/* /css/clone-overlap-guard.css */
/* 화면이 옆으로 밀리지 않게 — 슬라이드의 다음 장·행의 음수 여백이 문서 폭을 넓히지 못하게 자른다(폰·태블릿·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;}
}

/* /css/imgtx.css */
/* 그림 위 글자 층 — 바탕 그림(글자를 지운 그림) 위에 원래 자리·색·굵기로 글자를 얹는다.
   글자 크기는 층 폭 대비(cqw)라 그림이 줄면 함께 준다. 자리는 그림 픽셀 대비 % 다. */
._img_box:has(> .imgtx) { position: relative; }
.imgtx {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(100%, calc(var(--w) * 1px)); aspect-ratio: var(--ar);
  container-type: inline-size; direction: ltr; pointer-events: none;
  visibility: hidden; margin: 0; padding: 0; line-height: normal; text-align: left; display: block;
}
.imgtx > .imgtx-cover { position: absolute; display: none; pointer-events: none; }
.imgtx > .imgtx-t[data-i18n-removed] + .imgtx-cover, .imgtx > .imgtx-cover.is-on { display: block; }
img:not([style*="visibility:hidden"]):not([style*="visibility: hidden"]) + .imgtx { visibility: visible; }
.imgtx > .imgtx-t {
  position: absolute; display: flex; align-items: center; box-sizing: border-box;
  margin: 0 !important; padding: 0 !important; border: 0; background: none;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans', sans-serif !important;
  font-size: calc(var(--fs) * 1cqw * var(--fit, 1)) !important;
  line-height: var(--lh) !important; letter-spacing: 0 !important;
  white-space: normal; word-break: normal; overflow-wrap: normal;
  direction: ltr !important; unicode-bidi: plaintext !important; text-shadow: none; overflow: visible;
}
html[lang^="ko"] .imgtx > .imgtx-t { white-space: nowrap; word-break: keep-all; letter-spacing: var(--ls, 0) !important; }
.imgtx > .imgtx-t.imgtx-serif { font-family: 'Nanum Myeongjo', 'AppleMyungjo', 'Apple Myungjo', 'Batang', 'Noto Serif KR', 'Noto Serif CJK KR', 'Source Han Serif K', 'Times New Roman', serif !important; }
.imgtx > .imgtx-t .imgtx-em { color: var(--em, inherit); font: inherit; }
/* 외국어 화면 전용 글자 폭(fw) — 번역이 길어 그림 도형(원 등) 밖으로 나가는 칸을 한국어 자리는 그대로 두고 좁힌다 */
html:not([lang^="ko"]) .imgtx > .imgtx-t.imgtx-fw { left: var(--fl) !important; width: var(--fw) !important; }
/* 한국어 화면 — 원래 그림(글자가 그림에 들어 있음)을 보여 주고, 층은 화면에서만 숨겨 읽기 도구·검색용 글자로 남긴다 */
.imgtx.imgtx-a11y {
  position: absolute !important; left: 0 !important; top: 0 !important; transform: none !important;
  width: 1px !important; height: 1px !important; aspect-ratio: auto !important;
  overflow: hidden !important; clip-path: inset(50%) !important; white-space: nowrap;
  visibility: visible !important; margin: -1px !important; padding: 0 !important; border: 0 !important;
}