/* 화면이 옆으로 밀리지 않게 — 슬라이드의 다음 장·행의 음수 여백이 문서 폭을 넓히지 못하게 자른다(폰·태블릿·PC 공통) */
body{overflow-x:clip !important;}
/* html 은 992px 이하에서만 자른다 — 넓은 화면에서 html 을 자르면 고정(sticky) 연출이 풀린다 */
@media (max-width:992px){html{overflow-x:clip !important;}}

/* 폰 — 한글이 낱말 중간에서 끊기지 않게. 화면보다 긴 낱말(주소·영문)만 넘칠 때 끊는다 */
@media (max-width:768px){
  body,body *{word-break:keep-all !important;overflow-wrap:break-word !important;}
}

/* 폰 — 오른쪽에 떠 있던 바로가기 묶음을 하단 바 바로 위 한 줄로 눕힌다(본문 글자를 덮지 않게). 칸·문구·링크는 그대로 */
@media (max-width:768px){
  .m-rect-float{
    top:auto !important;bottom:var(--clone-bar-h,96px) !important;left:0 !important;right:0 !important;
    transform:none !important;flex-direction:row !important;align-items:stretch !important;justify-content:flex-end;
    gap:4px !important;padding:4px 6px !important;box-sizing:border-box;
    background:#fff;border-top:1px solid #E5E8EB;box-shadow:0 -2px 10px rgba(0,0,0,.06);
  }
  .m-rect-float .m-rect-title{flex:0 0 auto;display:flex;align-items:center;padding:4px 8px !important;border-radius:6px !important;}
  .m-rect-float .m-rect-btn{flex:1 1 0;min-width:0 !important;padding:5px 2px !important;border-radius:6px !important;}
  .m-rect-float #mobile_consult_trigger{
    align-self:stretch !important;flex:0 0 40px !important;
    width:40px !important;min-width:40px !important;max-width:40px !important;height:auto !important;min-height:28px;
    margin:0 !important;border-radius:6px !important;
  }
  .m-rect-float #mobile_consult_trigger img{
    width:40px !important;min-width:40px !important;max-width:40px !important;height:100% !important;max-height:40px;
    margin:0 auto;border-radius:6px !important;object-fit:contain !important;
  }
}

/* 폰 — 바로가기 칸이 하나도 보이지 않는 지면(칼럼 등)에서는 흰 띠·테두리·그림자를 걷고 빠른 상담 버튼만 남긴다. 띠 자리는 그대로라 아래 여백도 같다 */
@media (max-width:768px){
  html.clone-strip-bare .m-rect-float,
  html.ebian-column-page .m-rect-float{
    background:transparent !important;border:0 !important;box-shadow:none !important;pointer-events:none !important;
  }
  html.clone-strip-bare .m-rect-float #mobile_consult_trigger,
  html.ebian-column-page .m-rect-float #mobile_consult_trigger{pointer-events:auto !important;}
}

/* 폰 — 글자를 입력하는 동안에는 하단 바·바로가기 줄을 접는다(자판이 올라온 좁은 화면에서 입력 칸을 가리지 않게). 입력이 끝나면 돌아온다 */
@media (max-width:768px){
  html.clone-typing .bottom-bar,
  html.clone-typing .m-rect-float,
  html.clone-typing #mobile_consult_trigger{display:none !important;}
  /* 빠른 상담 창·예약 달력이 열려 있는 동안에도 같다 — 창 아래쪽 칸과 버튼을 가리지 않게. 닫으면 돌아온다 */
  body.mobile-consult-lock .bottom-bar,
  body.mobile-consult-lock .m-rect-float,
  body:has(.bootstrap-datetimepicker-widget) .bottom-bar,
  body:has(.bootstrap-datetimepicker-widget) .m-rect-float{display:none !important;}
  /* 입력하는 동안 브라우저가 칸을 끌어올릴 때 위쪽 고정 띠 밑으로 들어가지 않게 띠 높이만큼 띄운다 */
  html.clone-typing input,
  html.clone-typing textarea{scroll-margin-top:56px;}
  html.clone-picker-open .bottom-bar,
  html.clone-picker-open .m-rect-float{display:none !important;}
  html:not(.clone-guard-js):has(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=hidden]):not([type=file]):focus,textarea:focus) .bottom-bar,
  html:not(.clone-guard-js):has(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=hidden]):not([type=file]):focus,textarea:focus) .m-rect-float{display:none !important;}
}

/* 폰 — 옆으로 미는 메뉴줄의 오른쪽 끝을 흐리게 해 이어지는 칸이 더 있음을 보인다(끝까지 밀면 걷힌다) */
@media (max-width:768px){
  html.clone-guard-js ._mobile_navigation_menu.clone-more{
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);
  }
}

/* 메뉴가 열린 동안 위쪽 배너를 메뉴 아래로 내린다 — :has() 를 모르는 옛 브라우저용(스크립트가 단 표식을 본다) */
html.clone-menu-open #custom-top-banner{z-index:1000 !important;}

/* PC 1280 이상 — 머리 메뉴가 한 줄에 다 들어가게 왼쪽·오른쪽 칸을 내용 폭으로 줄인다(로고는 줄지 않게). 한국어 메뉴 여백은 화면 폭에 맞춰 10~30px. 안 들어가는 폭에서는 더보기 단추로 접힌다 */
@media (min-width:1280px){
  #doz_header .inline-col-group-left,#doz_header .inline-col-group-right{width:1% !important;white-space:nowrap;}
  #doz_header .inline-col-group-left .img_box img{max-width:none !important;}
  #doz_header .inline-col-group-right .widget.button a.btn{white-space:nowrap !important;}
  html[lang=ko] #doz_header .viewport-nav.desktop>li>a{padding-left:clamp(10px,calc((100vw - 1280px) / 16),30px) !important;padding-right:clamp(10px,calc((100vw - 1280px) / 16),30px) !important;}
}
/* PC 1280~1919 — 양 끝 빈 칸을 24px 로, 전화 단추 좌우 여백을 18px 로 줄여 메뉴 칸을 넓힌다 */
@media (min-width:1280px) and (max-width:1919px){
  #doz_header .inline-col-group-left>.inline-col:first-child .widget.padding,#doz_header .inline-col-group-left>.inline-col:first-child .widget.padding>div,
  #doz_header .inline-col-group-right>.inline-col:last-child .widget.padding,#doz_header .inline-col-group-right>.inline-col:last-child .widget.padding>div{width:24px !important;}
  #doz_header .inline-col-group-right .widget.button a.btn{padding-left:18px !important;padding-right:18px !important;}
}
/* PC 1280~1365 한국어 — 메뉴 여덟 칸 글자만 555px 라 19px 로는 메뉴 사이가 붙는다. 이 폭에서만 17px */
@media (min-width:1280px) and (max-width:1365px){
  html[lang=ko] #doz_header .viewport-nav.desktop>li>a,html[lang=ko] #doz_header .viewport-nav.desktop>li>a .plain_name{font-size:17px !important;}
  html[lang=ko] #doz_header .viewport-nav.desktop>li>a{padding-left:clamp(8px,calc((100vw - 1200px) / 16),30px) !important;padding-right:clamp(8px,calc((100vw - 1200px) / 16),30px) !important;}
}