/* 모바일 보정 — 문구·이미지는 그대로 두고 배치·글자 크기만 맞춘다 */
@media screen and (max-width: 960px) {
  /* 서브 히어로 제목 박스가 화면 오른쪽으로 3vw 넘치던 것 */
  .subpage_main_ttlgrp {
    left: 3vw;
    width: calc(100% - 3vw);
    padding: 0 5vw 0 0;
  }

  /* 하단 고정바 — 아이폰 홈 표시줄 영역 */
  .btm_menu {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* 본문 끝과 푸터 사이 빈칸 */
  .footer {
    margin-top: 100px;
  }

  /* 오시는 길 — 투명 헤더가 지도 위에 겹치지 않게 */
  .sub1-5 .header_mo {
    background: #fff;
  }
  .sub1-5 .map {
    padding-top: 80px;
  }
  .sub1-5 .map_address {
    width: calc(100% - 32px);
    height: auto;
    padding: 12px 16px;
    bottom: 16px;
    border-radius: 12px;
    font-size: 15px;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  /* 12px 미만 글자 */
  .main_center_eng { font-size: 12px !important; }
  .main_info_time1 ul li,
  .main_info_time1 ul li em,
  .main_info_time2 address { font-size: 12px !important; }
  .main_info_time1 ul li.small { font-size: 12px !important; }

  .comp-card .comp-subtitle,
  .comp-card .comp-desc,
  .comp-card .comp-desc strong { font-size: 12px !important; }
  .evo-info .evo-label,
  .evo-info .evo-desc { font-size: 12px !important; }
  .evo-info .evo-desc { white-space: normal !important; word-break: keep-all; }
  .evo-step { min-width: 0; }
  html body .hud-compare-grid .hud-cell,
  html body .hud-compare-grid .hud-cell span { font-size: 12px !important; }

  li[class^="compare-"] > span { font-size: 12px !important; }

  .slide-cont .eng_ttl { font-size: 12px !important; }
  .doctor-profile__brand-text { font-size: 12px !important; }
}

/* 원장 소개 히어로 — 엇갈린 세 줄의 상자(글자 아님)가 화면 밖으로 삐져나와 화면이 옆으로 밀리던 것.
   글자 위치·크기는 그대로 두고 넘친 상자만 제목 폭에서 자른다(세로는 자르지 않는다) */
@media screen and (max-width: 768px) {
  .landing_2026 #mainVisual .main_wrap .tit h1 {
    overflow-x: clip;
    overflow-y: visible;
  }
}

/* 홈 팝업(#popupLayer) — 옛 원본 CSS(top:45% + translate(-50%,-50%), 가로 500px 고정·960 이하 95%)는
   화면이 낮으면 위가 화면 밖으로 잘린다(가로 1024×세로 768 에서 위 20px).
   팝업 = 위 탭(한 줄 50px × 줄 수) + 그림(가로:세로 5:6) + 아래 버튼 32px 이므로 «높이가 화면 안에 들어오게»
   가로 폭 상한만 화면 높이로 줄이고, 세로 위치는 위·아래 12px 여백 안으로 붙잡는다. 화면이 넉넉하면 원본 그대로다.
   탭 줄 수는 탭 개수로 정한다(3칸씩) — 계산이 못 미치는 브라우저를 위해 화면 높이 상한 + 안쪽 스크롤을 함께 둔다. */
section#popupLayer {
  --ce-pop-nav: 100px;
  --ce-pop-w: min(500px, calc((100vh - var(--ce-pop-nav) - 56px) * 5 / 6));
  width: var(--ce-pop-w);
  top: clamp(calc(var(--ce-pop-w) * 0.6 + var(--ce-pop-nav) / 2 + 28px), 45%, calc(100vh - var(--ce-pop-w) * 0.6 - var(--ce-pop-nav) / 2 - 28px));
  top: clamp(calc(var(--ce-pop-w) * 0.6 + var(--ce-pop-nav) / 2 + 28px), 45%, calc(100dvh - var(--ce-pop-w) * 0.6 - var(--ce-pop-nav) / 2 - 28px));
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}
section#popupLayer:not(:has(.popup_nav li:nth-child(4))) { --ce-pop-nav: 50px; }
section#popupLayer:has(.popup_nav li:nth-child(7)) { --ce-pop-nav: 150px; }
section#popupLayer:has(.popup_nav li:nth-child(10)) { --ce-pop-nav: 200px; }
@media screen and (max-width: 960px) {
  section#popupLayer {
    --ce-pop-w: min(95vw, calc((100vh - var(--ce-pop-nav) - 56px) * 5 / 6));
  }
}
/* 홈 팝업 탭이 3의 배수가 아닐 때 마지막 줄을 가운데로 — 6칸일 때는 그대로다
   팝업 안이 스크롤돼도 위 탭은 늘 보이게 위에 붙인다 */
section#popupLayer .popup_nav { justify-content: center; position: sticky; top: 0; z-index: 2; }
section#popupLayer { overscroll-behavior: contain; }
/* 팝업 안 스크롤 막대를 숨긴다 — 막대가 생기면 그림 폭이 줄고, 줄면 막대가 사라지기를 되풀이해 팝업이 떨린다(창을 줄였을 때).
   스크롤은 휠·손가락으로 그대로 된다 */
section#popupLayer,
section#popupLayer .swiper-slide { scrollbar-width: none; -ms-overflow-style: none; }
section#popupLayer::-webkit-scrollbar,
section#popupLayer .swiper-slide::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* 팝업 그림 틀은 가로:세로 5:6 으로 고정 — 세로로 긴 그림(진료 달력 등)은 찌그러뜨리지 않고 틀 안에서 세로로 스크롤한다.
   5:6 그림은 틀과 크기가 같아 화면이 그대로다 */
section#popupLayer .swiper-slide {
  aspect-ratio: 5 / 6;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  align-items: flex-start;
}
section#popupLayer .swiper-slide a { display: block; width: 100%; }
section#popupLayer .swiper-slide img { width: 100%; height: auto; object-fit: initial; }
/* dvh 를 아는 브라우저만 주소창 높이를 뺀 값으로 다시 잡는다 — 사용자 정의 속성은 선언 단계에서 걸러지지 않아
   dvh 를 모르는 브라우저에서 vh 값까지 무효가 되므로 @supports 안에만 둔다 */
@supports (height: 100dvh) {
  section#popupLayer { --ce-pop-w: min(500px, calc((100dvh - var(--ce-pop-nav) - 56px) * 5 / 6)); }
  @media screen and (max-width: 960px) {
    section#popupLayer { --ce-pop-w: min(95vw, calc((100dvh - var(--ce-pop-nav) - 56px) * 5 / 6)); }
  }
}

/* ── 2026-10-12 옛 원본 화면 결함 보정 (디자인 정체성은 그대로, 읽히고 안 넘치게만) ── */

/* 폰 머리(로고·햄버거) — 서브 지면은 첫 화면이 어두운 사진인데 머리가 투명 + 검정 로고라 안 보였다.
   홈과 같은 모양(흰 배경·검정 로고)으로 맞춘다. 홈(.mainbanner_container 가 있는 지면)은 손대지 않는다.
   옛 스크립트가 스크롤에 따라 inline 으로 투명/흰색을 바꾸므로 !important 로 붙잡는다 */
@media screen and (max-width: 960px) {
  body:not(:has(.mainbanner_container)) .header_mo {
    background: #fff !important;
  }
  /* 지식·소개 1-1 — 제목 영역이 머리 밑 20px 아래서 시작해 흰 띠가 보이던 것 */
  .wrapper.sub1-1 {
    margin-top: 0;
  }
}

/* 우측 퀵메뉴 라벨(오시는길·카톡상담·유튜브…) — 회색 글자가 사진 위에서 안 읽혔다.
   라벨 뒤에 흰 바탕을 깔아 사진·흰 바탕 어디서든 읽히게 한다(아이콘·위치는 그대로) */
.quick_menu2 div a p {
  display: block;
  margin: 6px -6px 0;
  padding: 3px 0;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #333;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* 폭 961~1480 가로 넘침 — AOS 가 옆에서 들어오는 요소의 시작 위치(translate)와 큰 이미지가 화면 밖으로 삐져나와
   문서 가로 폭이 화면보다 커졌다. 본문 상자에서 가로로만 잘라 문서 폭을 화면에 맞춘다(세로·고정 요소는 안 건드린다) */
@media screen and (min-width: 961px) and (max-width: 1480px) {
  body {
    overflow-x: clip;
  }
  /* 두 장이 나란한 줄 — 그림이 줄 폭보다 커서 오른쪽이 잘리던 것: 줄 안에서 같이 줄어들게 */
  .flex-sb > img,
  .flex > img {
    min-width: 0;
    max-width: 100%;
    height: auto;
  }
  /* 홈 영상 틀(가로 1280 고정) */
  iframe {
    max-width: 100%;
  }
}

/* 스마트노바 비교표(좁은 폭) — 셋째·넷째 열이 글자 최소 폭 때문에 표 밖으로 밀려 오른쪽이 잘리던 것.
   열을 0 까지 줄어들 수 있게 하고 글자를 12px 로 맞춘다. 칸 높이는 모든 열을 같게 둬 줄이 어긋나지 않게 한다 */
@media screen and (max-width: 640px) {
  html body .hud-compare-grid {
    grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
  }
  html body .hud-compare-grid > * {
    min-width: 0;
  }
  html body .hud-label-col .hud-cell,
  html body .hud-data-col .hud-cell,
  html body .hud-col-featured .hud-cell {
    min-height: 52px !important;
  }
  html body .hud-label-col .hud-cell span {
    font-size: 12px;
    line-height: 1.25;
    letter-spacing: -0.03em;
    word-break: keep-all;
  }
  html body .hud-data-col .hud-cell,
  html body .hud-col-featured .hud-cell {
    font-size: 12px !important;
    letter-spacing: -0.02em;
  }
  html body .hud-data-col .hud-col-head h3 {
    font-size: 14px;
    word-break: keep-all;
  }
  html body .hud-col-featured .hud-col-head h3 {
    font-size: 16px !important;
    word-break: keep-all;
  }
}

/* 백내장 렌즈 지면 대표원장 인용 문장 — 좁은 폭에서 큰 글자가 줄마다 접히거나 화면 밖으로 밀리던 것 */
@media screen and (max-width: 767px) {
  html body .bg-sub2-1-1 .big-point-txt {
    font-size: 24px;
    line-height: 1.45;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }
}