/* 모바일 레이아웃 — ref/mobile_main.png (719px, 360pt@2x) 실측 좌표. 1rem = 목업 10px */

/* 데스크톱: 모바일 전용 요소 숨김 */
.m-only, .m-br, .hero__text-m, .mnav { display: none; }

@media (max-width: 1023px) {
  html { font-size: calc(100vw / 71.9); }
  body { min-width: 0; }
  .pc-only { display: none; }
  .m-only { display: block; }
  span.m-only { display: inline; }
  .m-br { display: inline; }
  .wrap { width: 100%; }

  /* ── 헤더 (투명, 원본 로고 이미지 통일) ── */
  .header { height: 11rem; min-width: 0; }
  .header__inner { width: 100%; height: 11rem; }
  .header__logo a { left: 3rem; top: 3.6rem; }
  .header__logo-mark { width: 5.9rem; height: 5.9rem; }
  .header__logo-text { margin-left: 1.6rem; margin-top: 0.4rem; }
  .header__logo-text strong { font-size: 2.55rem; letter-spacing: -0.05rem; }
  .header__logo-text em { margin-top: 0.5rem; font-size: 1.25rem; letter-spacing: 0.22rem; }
  .gnb { display: none; }
  .header__util { right: 3.4rem; height: 11rem; gap: 4.2rem; }
  .btn-globe svg { width: 3.7rem; height: 3.7rem; stroke-width: 1.8px; }
  .btn-menu { gap: 0.9rem; width: 3.7rem; }
  .btn-menu span { height: 0.32rem; }

  /* ── 히어로 롤링 배너 (PC 이미지 공용, 세로 확대 + 하단 좌측 텍스트) ── */
  .hero { height: 128.3rem; }
  /* PC 이미지를 세로로 채우고, 배너별로 주요 피사체가 보이도록 위치 조정 */
  .hero__slide { background-size: cover; background-position: center; }
  .hero__slide:nth-child(1) { background-position: 26% center; }
  .hero__slide:nth-child(2) { background-position: 22% center; }
  .hero__slide:nth-child(3) { background-position: 38% center; }
  .hero__slide:nth-child(4) { background-position: 50% center; }
  .hero__slide .wrap { width: 100%; }
  /* 데스크톱 좌표(--sN)를 무시하고 하단 좌측 공통 배치 */
  .hero__text, .hero__text--s1, .hero__text--s2, .hero__text--s3, .hero__text--s4 {
    left: 7rem; top: 79.8rem; max-width: 56rem;
  }
  .hero__headline { font-size: 4.8rem; font-weight: 350; line-height: 6.4rem; letter-spacing: -0.15rem; }
  .hero__headline strong { font-size: 5.8rem; }
  .hero__headline--en { font-size: 4.4rem; line-height: 5.8rem; }
  .hero__headline--en strong { font-size: 5.4rem; }
  .hero__sub { margin-top: 2.4rem; font-size: 2.6rem; }
  .hero__dots { bottom: 5rem; gap: 1.4rem; }
  .hero__dot { width: 1.4rem; height: 1.4rem; }
  .hero__dot.is-active { width: 3.6rem; border-radius: 0.7rem; }

  /* ── 공통 타이틀/설명 ── */
  .sec-title { font-size: 5.8rem; letter-spacing: -0.12rem; }
  .sec-desc { font-size: 2.7rem; line-height: 3.8rem; letter-spacing: -0.05rem; }

  /* ── 원장 소개 ── */
  .doctor--kang { height: 130.7rem; }
  .doctor--lee { height: 127.7rem; }
  .doctor .sec-title { top: 6.7rem; }
  .doctor__greet { position: absolute; left: 0; right: 0; top: 16rem; text-align: center; z-index: 1; }
  .doctor__greet-lead { font-size: 3rem; }
  .doctor__greet-body { margin-top: 1.5rem; font-size: 2.6rem; line-height: 3.6rem; }
  .doctor__photo {
    left: 50%; transform: translateX(-50%); top: 32rem;
    width: 54.7rem; height: 54.7rem;
  }
  .doctor--lee .doctor__photo { top: 27.6rem; }
  .doctor__info { left: 12.5rem; right: 4rem; top: 82.7rem; }
  .doctor--lee .doctor__info { top: 82.1rem; }
  .doctor__name { position: absolute; left: 0; top: 0; font-size: 4.6rem; }
  .doctor__name span { font-size: 2.4rem; }
  .doctor__career {
    margin: 0.6rem 0 0 23rem;
    font-size: 2.6rem; line-height: 3.6rem; letter-spacing: -0.1rem; width: 31rem;
  }
  .doctor--lee .doctor__career li:nth-child(4) { margin-top: 3.6rem; }
  .doctor__career--second { margin-top: 3.6rem; }

  /* ── 진료과목 (2×2 카드) ── */
  .subjects { height: 125.4rem; }
  .subjects .wrap { height: 29.9rem; }
  .subjects .sec-title { top: 4.5rem; }
  .subjects .sec-desc { top: 13.3rem; }
  .subjects__cards { flex-wrap: wrap; }
  .subject-card { width: 50%; height: 37.7rem; }
  .subject-card__title { top: 8rem; font-size: 4rem; letter-spacing: -0.1rem; }
  .subject-card__desc { top: 14.5rem; font-size: 2.3rem; line-height: 3rem; }
  .subject-card--global .subject-card__title { font-size: 3.8rem; }
  .subject-card--global .subject-card__desc { font-size: 2rem; }

  /* ── 블루 섹션 (임플란트/치아교정) ── */
  .feature { height: 128rem; }
  .feature__logo { left: 50%; transform: translateX(-50%); top: 7.1rem; width: 11.3rem; height: 11.2rem; }
  .feature__title { top: 19.2rem; font-size: 5.6rem; letter-spacing: -0.3rem; white-space: nowrap; }
  .feature--ortho .feature__title { top: 19.8rem; }
  .feature__desc { top: 28.1rem; font-size: 2.6rem; line-height: 3.8rem; }
  .feature__cards, .feature--ortho .feature__cards {
    left: 0.5rem; right: 0.5rem; top: 41.9rem;
    flex-wrap: wrap; gap: 6rem 1rem;
  }
  .feature--ortho .feature__cards { top: 39.2rem; gap: 3.2rem 1rem; }
  .feature__cards li { width: calc(50% - 0.5rem); }
  .feature__cards img { width: 100%; height: 26.8rem; object-fit: cover; border-radius: 0.8rem; }
  .feature__caption { margin-top: 2rem; font-size: 2.55rem; line-height: 3.6rem; }

  /* ── 비교불가! 독보적 경력 ── */
  .career { height: 127.6rem; }
  .career .sec-title { top: 6.7rem; }
  .career .sec-desc { top: 15.7rem; }
  .career__plaque { left: 0; top: 25.6rem; width: 100%; height: auto; }
  .career__qlist { left: 1.5rem; right: 1.5rem; top: 50.8rem; z-index: 1; }
  .qbox {
    width: 100%; height: 19rem; margin-bottom: 4.6rem;
    border-radius: 1.6rem; box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.18);
  }
  .qbox__q { left: 4.5rem; top: 3rem; font-size: 2.6rem; }
  .qbox__a { left: 11rem; top: 7.9rem; font-size: 2.9rem; line-height: 4rem; }
  .qbox__num { left: -6.3rem; top: 1.6rem; width: 4.4rem; height: 4.4rem; line-height: 4.4rem; font-size: 2.2rem; }

  /* ── 치료 사례 ── */
  .cases { height: 127.9rem; }
  .cases--implant .sec-title, .cases--ortho .sec-title { top: 6.7rem; }
  .cases--implant .sec-desc, .cases--ortho .sec-desc { top: 15.9rem; }
  .cases--implant .cases__grid, .cases--ortho .cases__grid { top: 25.8rem; }
  .cases__grid { left: 1rem; right: 1rem; flex-direction: column; gap: 1.9rem; }
  .cases__item img { width: 100%; height: 43.1rem; object-fit: cover; border-radius: 1.2rem; }
  .badge { width: 18.5rem; height: 5rem; border-radius: 2.5rem; font-size: 2rem; line-height: 5rem; }
  .badge--before { left: 4.5rem; bottom: 3rem; }
  .badge--after { right: 4.5rem; bottom: 3rem; }
  .cases--implant .btn-more, .cases--ortho .btn-more { top: 117.5rem; }
  .btn-more {
    left: 50%; transform: translateX(-50%);
    width: 26.2rem; height: 7.4rem; border-radius: 3.7rem;
    font-size: 2.5rem; line-height: 7.4rem;
  }

  /* ── 교정치료 꼭 필요합니다 ── */
  .ortho-need { height: 127.4rem; }
  .ortho-need .sec-title { top: 7rem; }
  .ortho-need .sec-desc { top: 15.9rem; }
  .ortho-need__photo { left: 1rem; top: 24.8rem; width: calc(100% - 2rem); height: 33rem; object-fit: cover; border-radius: 1.2rem; }
  .ortho-need__text { left: 3rem; right: 3rem; width: auto; }
  .ortho-need__text h3 { top: 59.4rem; font-size: 3.1rem; color: var(--blue-deep); }
  .ortho-need__intro { top: 64.5rem; font-size: 2.65rem; line-height: 3.9rem; letter-spacing: -0.1rem; }
  .ortho-need__text h4 { top: 78.5rem; font-size: 3.1rem; }
  .ortho-need__list dt { font-size: 2.8rem; letter-spacing: -0.1rem; }
  .ortho-need__list dd { font-size: 2.4rem; line-height: 3.4rem; letter-spacing: -0.05rem; white-space: nowrap; }
  .ortho-need__list dt:nth-of-type(1) { top: 82.8rem; }
  .ortho-need__list dd:nth-of-type(1) { top: 86.1rem; }
  .ortho-need__list dt:nth-of-type(2) { top: 91.8rem; }
  .ortho-need__list dd:nth-of-type(2) { top: 95.1rem; }
  .ortho-need__list dt:nth-of-type(3) { top: 103.7rem; }
  .ortho-need__list dd:nth-of-type(3) { top: 107.1rem; }
  .ortho-need__list dt:nth-of-type(4) { top: 115.7rem; }
  .ortho-need__list dd:nth-of-type(4) { top: 119.1rem; }

  /* ── Global Dental Care ── */
  .global {
    height: 127.9rem;
    background: #000 url('../assets/img/global_bg.jpg') no-repeat center center;
    background-size: cover;
  }
  .global__title { top: 19.5rem; font-size: 6.3rem; }
  .global__desc { top: 27.4rem; font-size: 6.3rem; line-height: 7.8rem; letter-spacing: -0.15rem; }
  .global__flags { top: 58rem; flex-wrap: wrap; gap: 2rem 2.5rem; padding: 0 6rem; }
  .global__flags img { width: 17rem; }
  .global__foot { top: 106.8rem; font-size: 3.5rem; }

  /* ── 병원 둘러보기 + 위치 ── */
  .tour { height: 161.4rem; }
  .tour .sec-title { top: 7.9rem; }
  .tour .sec-desc { top: 16.5rem; }
  .tour__slider { top: 39.4rem; width: 100%; height: 50rem; }
  .tour__viewport { left: 0; width: 100%; height: 50rem; overflow-x: auto; scroll-snap-type: x mandatory; }
  .tour__track { gap: 1rem; width: max-content; }
  .tour__track li { scroll-snap-align: center; }
  .tour__track img { width: 71.9rem; height: 50rem; border-radius: 0; }
  .tour__arrow { display: none; }
  .tour__dots { margin-top: 3rem; gap: 1.4rem; }
  .tour__dot { width: 1.4rem; height: 1.4rem; }
  .tour__dot.is-active { width: 3.6rem; border-radius: 0.7rem; }
  .sec-title--location { top: 135rem !important; }
  .location__addr { top: 144.4rem; font-size: 2.8rem; }
  .location__desc { top: 148.2rem; font-size: 2.7rem; line-height: 3.8rem; }

  /* ── 지도 ── */
  .map { height: 94.6rem; }
  .map__canvas { height: 57.4rem; background-image: url('../assets/img/m_map.jpg') !important; }
  .map__card {
    left: 7.5rem; right: 8.4rem; top: 49.6rem; margin-left: 0;
    width: auto; height: 26rem; border-radius: 2rem;
  }
  .map__tel { left: 7.8rem; top: 4rem; right: 4rem; padding-bottom: 2.6rem; gap: 2.6rem; font-size: 3.4rem; }
  .map__addr { left: 7.8rem; top: 11.8rem; gap: 2.6rem; font-size: 3.1rem; }
  .ic-circle { width: 4rem; height: 4rem; }
  .map__btns { left: 4.6rem; top: 18.3rem; gap: 2.2rem; }
  .map__btn { width: 22.6rem; height: 5.6rem; border-radius: 2.8rem; font-size: 2.5rem; }
  .map__btn svg { width: 3rem; height: 3rem; }

  /* ── 빠른상담신청 ── */
  .consult { height: 58.8rem; }
  .consult__form { width: 100%; height: 58.8rem; }
  .consult__title { left: 4.5rem; top: 5.4rem; height: auto; gap: 1.6rem; font-size: 3.4rem; }
  .consult__title img { width: 6.4rem; height: 5rem; }
  .consult__input { height: 9rem; border-radius: 0.8rem; padding: 0 2.6rem; font-size: 2.8rem; }
  .consult__input--name { left: 4.5rem; right: 4.4rem; top: 11.7rem; width: auto; }
  .consult__input--phone { left: 4.5rem; right: 4.4rem; top: 22.7rem; width: auto; }
  .consult__agree { left: 4.5rem; top: 31.5rem; height: 8rem; gap: 1.6rem; font-size: 2.8rem; }
  .consult__radio { width: 3.4rem; height: 3.4rem; border-width: 0.2rem; }
  .consult__submit { left: 13rem; right: 12.9rem; top: 41.8rem; width: auto; height: 10rem; border-radius: 1rem; font-size: 3.2rem; }

  /* ── 푸터 (1단) ── */
  .footer { height: 114.2rem; }
  .footer__brand { left: 0; right: 0; top: 6.6rem; width: auto; }
  .footer__tagline { font-size: 2.7rem; }
  .footer__brand img { margin-top: 3.4rem; width: 28.7rem; height: 14.8rem; }
  .footer__info { left: 8rem; top: 35.5rem; }
  .footer__hours { left: 8rem; top: 66.8rem; }
  .footer__hours li { margin-left: 0; }
  .footer__col h3 { font-size: 3rem; }
  .footer__col ul { margin-top: 3.4rem; }
  .footer__col li { padding-left: 2.6rem; font-size: 2.7rem; line-height: 4.8rem; letter-spacing: -0.1rem; }
  .footer__col li::before { left: 0.4rem; top: 2.1rem; width: 0.6rem; height: 0.6rem; }
  .footer__links { top: 98.2rem; font-size: 2.5rem; }
  .footer__copy { top: 102rem; font-size: 2.5rem; }

  /* ── 플로팅 버튼 (전화/상담/TOP) ── */
  .quick {
    top: auto; bottom: 4rem; right: 2.4rem; transform: none;
    width: 8.3rem; height: auto;
    background: none; border-radius: 0; box-shadow: none; overflow: visible;
  }
  .quick ul { padding-top: 0; }
  .quick li { padding: 0 0 1.2rem !important; }
  .quick li + li::before { display: none; }
  .quick li:nth-child(3) { display: none; }  /* 오시는길 없음 */
  .quick a {
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    width: 8.3rem; height: 8.3rem; border-radius: 50%;
    background: var(--blue); box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.25);
    font-size: 0; color: transparent;
  }
  .quick a img { margin: 0; width: 8.8rem; height: 8.8rem; flex: none; border-radius: 50%; }
  .quick__top {
    position: static; display: block; height: auto;
    width: 8.3rem; height: 8.3rem; border-radius: 50%;
    background: #E9E9EC; box-shadow: 0 0.4rem 1.2rem rgba(0, 0, 0, 0.2);
    font-size: 3rem; font-weight: 400; color: #222;
  }


  .cases--ortho .cases__grid { gap: 2.9rem; }
  .cases--ortho .btn-more { top: 116.5rem !important; }
  .tour__track img { object-fit: cover; }

  /* ── 모바일 메뉴 드로어 ── */
  .mnav { display: block; position: fixed; inset: 0; z-index: 200; visibility: hidden; }
  body.menu-open .mnav { visibility: visible; }
  /* 메뉴 열림 시 본 페이지 스크롤 잠금 */
  body.menu-open { overflow: hidden; }
  .mnav__dim {
    position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4);
    opacity: 0; transition: opacity 0.3s;
  }
  body.menu-open .mnav__dim { opacity: 1; }
  .mnav__panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: 100%;
    background: #fff; transform: translateX(100%); transition: transform 0.3s;
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  }
  body.menu-open .mnav__panel { transform: translateX(0); }
  .mnav__head { position: relative; height: 13rem; padding: 4.2rem 0 0 2.6rem; display: flex; }
  .mnav__logo-mark { width: 5.4rem; height: 6.6rem; }
  .mnav__logo-text { margin-left: 1.6rem; margin-top: 0.6rem; }
  .mnav__logo-text strong { display: block; font-size: 2.55rem; letter-spacing: -0.05rem; color: #111; line-height: 1.1; }
  .mnav__logo-text em { display: block; margin-top: 0.5rem; font-size: 1.25rem; letter-spacing: 0.22rem; color: #555; font-weight: 500; }
  .mnav__close { position: absolute; right: 3rem; top: 5.6rem; width: 5rem; height: 5rem; color: #333; }
  .mnav__close svg { width: 5rem; height: 5rem; }
  .mnav__menu { padding: 3rem 5rem 0; }
  .mnav__item { border-bottom: 1px solid #E5E5EA; }
  .mnav__link { position: relative; display: block; width: 100%; padding: 3.6rem 0; font-size: 3rem; font-weight: 500; color: #222; letter-spacing: -0.05rem; text-align: left; background: none; border: 0; font-family: inherit; cursor: pointer; }
  /* 아코디언 화살표(닫힘=아래 삼각형) */
  .mnav__link--toggle::after {
    content: ''; position: absolute; right: 1rem; top: 50%; margin-top: -0.4rem;
    border-left: 0.8rem solid transparent; border-right: 0.8rem solid transparent;
    border-top: 0.9rem solid #aaa; transition: transform 0.3s;
  }
  .mnav__item.is-open > .mnav__link--toggle { color: #1F4BB4; }
  .mnav__item.is-open > .mnav__link--toggle::after { border-top-color: #1F4BB4; transform: rotate(180deg); }
  /* 서브메뉴 (펼침 전 접힘) */
  .mnav__sub { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
  .mnav__item.is-open .mnav__sub { max-height: 60rem; }
  .mnav__sub li { border: 0; }
  .mnav__sub a { display: block; padding: 1.7rem 0 1.7rem 2rem; font-size: 2.5rem; font-weight: 400; color: #666; letter-spacing: -0.05rem; }
  .mnav__sub li:last-child a { padding-bottom: 3.4rem; }
}