/* ============================================================================
   mobile (3단계) — 990px↓ 단일 반응형.
   원본의 '통이미지 세로 적층'을 HTML 텍스트+자리표시로 재구성(기준서 0장 재현 판단).
   스페이싱은 기준서 A-3에 따라 데스크톱 4px 스케일을 모바일에도 적용.
   모션은 4단계에서 추가 — 이 파일에 transition/animation 없음.
   ============================================================================ */

@media (max-width: 990px) {
  /* 모바일에서만 감추는 것들 (대표 지시 2026-08-27):
     메뉴의 언론보도·AiQ 시스템, 커뮤니티 안 '단지 조경', 평면정보 안 '마감재 리스트'.
     PC에는 그대로 남는다 — 지우지 않고 감추는 이유는 검색엔진이 계속 읽게 두기 위함. */
  .mo-hide { display: none !important; }


  .home-mo { display: flex; flex-direction: column; width: 100%; }

  /* 공용 조각 */
  .mo-section { position: relative; width: 100%; overflow: hidden; }
  .mo-kicker {           /* 상단 라운드 배지 라인 */
    display: inline-block;
    border: 1px solid var(--color-main1);
    border-radius: var(--radius-circle);
    padding: var(--sp-8) var(--sp-20);
    font-size: var(--fs-16);
    font-weight: var(--fw-emph);
  }
  .mo-kicker b { color: var(--color-main1); font-weight: var(--fw-head); }
  .mo-pill {             /* 네이비 필 배지 */
    display: inline-block;
    background: var(--color-main1);
    color: var(--color-text-invert);
    border-radius: var(--radius-circle);
    padding: var(--sp-10) var(--sp-24);
    font-size: var(--fs-19);
    font-weight: var(--fw-head);
  }
  .mo-pill em { font-style: normal; color: var(--color-main3); }
  .ph-media { position: relative; width: 100%; }        /* 이미지 자리 */
  .ph-media img { width: 100%; height: auto; }
  .ph-media video { display: block; width: 100%; height: auto; object-fit: cover; }
  .ph-chip {             /* 사진 위 라벨 칩 */
    position: absolute;
    left: 0; bottom: 0;
    background: var(--color-overlay-60);
    color: var(--color-text-invert);
    font-size: var(--fs-14);
    padding: var(--sp-4) var(--sp-12);
  }

  /* ---------- 1. 히어로 — 비주얼 위 카피 오버레이 (오산 방식, 대표 지시) ---------- */
  .mo-hero { position: relative; text-align: center; padding: 0; }
  /* 히어로 프레이밍 — 원본 영상이 '하늘에서 아래로 내려오는' 항공 컷이라 세로를 그대로 두면
     화면의 60%가 빈 하늘이 되어 정적으로 보인다(실측: 693px 중 상단 420px가 하늘).
     오산 모바일 히어로가 420px(1화면의 50%)인 것에 맞춰 높이를 고정하고 건물 쪽으로 프레임을 내린다. */
  .mo-hero .hero-media { aspect-ratio: 39 / 56; overflow: hidden; }
  .mo-hero .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: center 72%; }
  /* 영상 위 글자 오버레이 — 히어로 영상은 그대로 두고 글자 판(투명 PNG)만 덮는다(대표 결정).
     PNG가 오면 .hero-copy(HTML 글자)를 이걸로 갈아끼운다. 비율은 히어로 박스와 동일(39/56). */
  .mo-hero .hero-overlay {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;              /* 영상 위 장식일 뿐 — 탭을 가로채지 않는다 */
  }
  .mo-hero .hero-overlay img { display: block; width: 100%; height: 100%; object-fit: cover; }

  /* ② 트램·역기둥 그래픽 — 크기·위치를 여기서 조절한다(PNG를 다시 뽑을 필요 없음) */
  .mo-hero .hero-scene {
    position: absolute; right: 0; bottom: 0; z-index: 1;
    width: 58%;                       /* 캔버스 대비 크기 — 이 값만 바꾸면 커지고 작아진다 */
    pointer-events: none;
  }
  .mo-hero .hero-scene img { display: block; width: 100%; height: auto; }

  /* ③ 사진 위 작은 배지 2개 (오산 하단 좌측 배지) */
  .mo-hero .hero-badges { display: flex; gap: var(--sp-8); margin-top: var(--sp-8); }
  .mo-hero .hb {
    display: flex; flex-direction: column; align-items: center;
    background: #fff; border-radius: 6px;
    padding: var(--sp-4) var(--sp-10);
    font-size: 3.1vw; font-weight: var(--fw-head); line-height: 1.25;
    color: var(--color-text);
    box-shadow: 0 2px 8px rgba(0,9,33,.25);
  }
  .mo-hero .hb b { color: var(--color-main1); font-weight: var(--fw-head); }
  .mo-hero .hb-red { border: 1.5px solid #c81e1e; color: #c81e1e; }
  .mo-hero .hb-red b { color: #c81e1e; }

  .mo-hero .hero-copy {
    position: absolute; left: 4vw; right: 4vw; top: 6vw;
    display: flex; flex-direction: column; align-items: center; gap: var(--sp-12);
    z-index: 1;
  }
  /* 메인 카피 = 글자 PNG (킥커·계약금·리본이 한 장에 들어 있다) */
  .mo-hero .hero-title { width: 100%; margin: 0; }
  .mo-hero .hero-title img { display: block; width: 100%; height: auto; }

  /* 단지 규모 — 이미지 자체가 흰 배경이라 섹션도 흰색(남색 mo-slab과 다르다) */
  .mo-scale { background: #fff; font-size: 0; }
  .mo-scale img { display: block; width: 100%; height: auto; }

  /* ---------- 1-b. 세대수 띠 ---------- */
  /* 이미지 자체가 흰 배경이라 섹션도 흰색으로 둔다(남색 mo-slab과 다르다) */
  .mo-ribbon { background: #fff; font-size: 0; }
  .mo-ribbon img { display: block; width: 100%; height: auto; }

  /* ---------- 2. 영상 + 프리미엄 4 ---------- */
  .mo-video { background: var(--color-main1); color: var(--color-text-invert); text-align: center; padding: 0; }
  .mo-video .mo-in { padding: var(--sp-40) var(--sp-16); }
  .mo-video .video-copy { font-size: var(--fs-20); font-weight: var(--fw-emph); margin-bottom: var(--sp-16); }
  .mo-video .video-frame { border-radius: 5px; overflow: hidden; margin: 0 var(--sp-16); }
  .mo-video .video-frame video { display: block; width: 100%; height: auto; }
  /* 두 번째 섹션 영상 — 우리 파일이라 유튜브 UI(로고·정지버튼·자막)가 처음부터 없다.
     조작도 막는다: 컨트롤을 안 달았고 포인터도 받지 않는다. */
  .mo-video .sec-frame { position: relative; aspect-ratio: 16 / 9; margin: 0 var(--sp-16);
    border-radius: 5px; overflow: hidden; background: #000; pointer-events: none; }
  .mo-video .sec-frame video { position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; }

  /* PREMIUM 4칸 — 카드 네 장이 이미지 한 장에 들어 있다(카드별 HTML은 없앴다) */
  .mo-premium4 { margin-top: var(--sp-24); font-size: 0; }
  .mo-premium4 img { display: block; width: 100%; height: auto; }
  .mo-premium4 .p4-card {
    background: #fff;
    color: var(--color-text);
    border: 2px solid var(--color-main3);  /* 브랜드 라이트 스카이 보더 */
    padding: var(--sp-12) var(--sp-16);
  }
  .mo-premium4 .p4-label { font-size: var(--fs-12); color: var(--color-main2); letter-spacing: var(--ls-point); }
  .mo-premium4 .p4-copy { font-size: var(--fs-16); font-weight: var(--fw-head); margin-top: var(--sp-4); }
  .mo-premium4 .p4-copy em { font-style: normal; color: var(--color-main1); }
  /* 영문 제목 뒤에 국문이 인라인으로 붙어 '도보권 초·' 처럼 어정쩡하게 꺾였다 — 줄을 갈라 준다 */
  .mo-premium4 .p4-copy small { display: block; margin-top: var(--sp-4); font-size: var(--fs-12);
    font-weight: var(--fw-regular); line-height: 1.55; color: var(--color-gray-3); }

  /* ---------- 3. 유닛 플랜 ---------- */
  .mo-unit { background: #f2f2f2; text-align: center; padding: 0; }
  .mo-unit .mo-in { padding: var(--sp-40) var(--sp-16); }
  /* UNIT PLAN 머리글 = 이미지 한 장 (라벨·두 줄 카피가 들어 있다) */
  .mo-unit .u-head-img { margin: 0 0 var(--sp-24); font-size: 0; }
  .mo-unit .u-head-img img { display: block; width: 100%; height: auto; }
  .mo-unit .u-kicker-mo { letter-spacing: var(--ls-point); color: var(--color-main2); font-size: var(--fs-14); }
  .mo-unit .u-title-mo { font-size: var(--fs-31); font-weight: var(--fw-head); line-height: 1.3; margin: var(--sp-12) 0 var(--sp-24); }
  .mo-unit .u-title-mo em { font-style: normal; color: var(--color-main1); }
  /* 주택형 라벨 — 굵은 고딕 이미지는 폭이 좁아 눌려 보였다(대표 지적).
     가는 세리프로 바꾸고 세대수는 뺐다. 글자가 작아도 눌리지 않는다. */
  .mo-unit .u-lb {
    margin: 0 0 var(--sp-8);
    font-family: 'Noto Serif KR', serif;
    font-weight: 300;
    font-size: var(--fs-19);
    letter-spacing: .02em;
    color: var(--color-main1);
    white-space: nowrap;
  }

  .mo-unit .u-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); }
  .mo-unit .u-card { background: #fff; border: 1px solid #dfe4ec; padding: var(--sp-12); }
  .mo-unit .u-card h5 { font-size: var(--fs-17); font-weight: var(--fw-emph); letter-spacing: var(--ls-point); margin-bottom: var(--sp-8); }

  /* ---------- 4. 특화설계 인테리어 ---------- */
  .mo-interior { background: var(--color-main1); }
  .mo-interior .int-head { color: var(--color-text-invert); padding: var(--sp-24) var(--sp-16); }
  .mo-interior .int-head .int-sub { font-size: var(--fs-19); font-weight: var(--fw-emph); color: var(--color-main3); }
  .mo-interior .int-head h3 { font-size: var(--fs-31); font-weight: var(--fw-head); line-height: 1.3; }
  .mo-interior .int-head h3 em { font-style: normal; color: var(--color-main3); }
  .mo-interior .int-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); padding: 0 var(--sp-8) var(--sp-8); }
  .mo-interior .int-grid .wide { grid-column: 1 / -1; }

  /* ---------- 5. 미래가치(시세) ---------- */
  .mo-value { background: #fff; text-align: center; padding: 0; }
  .mo-value .mo-in { padding: var(--sp-40) var(--sp-16); }
  .mo-value .v-title { font-size: var(--fs-25); font-weight: var(--fw-head); color: var(--color-main1); line-height: 1.35; }
  .mo-value .v-title em { font-style: normal; color: var(--color-main2); }
  .mo-value .v-band {
    background: var(--color-main1);
    color: var(--color-text-invert);
    font-size: var(--fs-17);
    font-weight: var(--fw-emph);
    padding: var(--sp-10) 0;
    margin: var(--sp-20) 0;
  }
  /* (시세 차트·분양가 표기 없음 — 분양가는 어떤 화면에도 넣지 않음, 대표 규칙 2026-08-27) */

  /* ---------- 6. 입지도 + 프리미엄 상세 ---------- */
  .mo-map { background: #eef2f8; padding: 0; text-align: center; }
  .mo-map .mo-in { padding: var(--sp-24) var(--sp-16); }
  .mo-map .map-title { font-size: var(--fs-25); font-weight: var(--fw-head); color: var(--color-main1); margin-top: var(--sp-20); }
  .mo-map .map-title em { font-style: normal; letter-spacing: var(--ls-point); }

  .mo-premium-list { background: #fff; padding: 0; }
  .mo-premium-list .mo-in { padding: var(--sp-24) var(--sp-16); display: flex; flex-direction: column; gap: var(--sp-16); }
  .mo-premium-list .pr-card { border: 1px solid #dfe4ec; padding: var(--sp-20) var(--sp-16); }
  .mo-premium-list .pr-card h4 { font-size: var(--fs-20); font-weight: var(--fw-head); margin-bottom: var(--sp-8); color: var(--color-main2); letter-spacing: .04em; }
  .mo-premium-list .pr-card p { font-size: var(--fs-16); line-height: 1.6; color: var(--color-gray-3); }

  /* ---------- 구간 디자인 이미지(슬래브) ---------- */
  /* ── GPT 이미지 섹션들 (2026-08-27) ───────────────────────── */

  /* 6. 인테리어 머리글 — 이미지 자체가 남색 바탕이라 섹션도 남색 */
  .mo-interior .int-head-img { margin: 0; font-size: 0; background: var(--color-main1); }
  .mo-interior .int-head-img img { display: block; width: 100%; height: auto; }

  /* 8. 입지 — 머리글(흰 글자·투명)은 남색 위에, 지도는 그 아래 */
  .mo-loc { background: var(--color-main1); font-size: 0; }
  .mo-loc .loc-head { padding: var(--sp-24) var(--sp-16) var(--sp-16); }
  .mo-loc .loc-head img { display: block; width: 100%; height: auto; }
  .mo-loc .loc-map { display: block; width: 100%; height: auto; }

  /* 7. 미래가치 · 9. 프리미엄 상세 — 이미지 한 장짜리 섹션 */
  .mo-value, .mo-premium-list { font-size: 0; background: #fff; }
  .mo-value img, .mo-premium-list img { display: block; width: 100%; height: auto; }

  /* 미래가치 — 이미지 위에 얹는 움직임.
     aspect-ratio를 줘야 자식의 % 높이가 계산된다(부모 높이가 auto면 % 높이는 무시된다). */
  .mo-value .value-wrap { position: relative; aspect-ratio: 1100 / 799; }
  .mo-value .value-wrap img { width: 100%; height: 100%; }
  /* 점선을 덮고 새로 그리는 방식은 버렸다 — 덮개 끝에서 조각이 잘린 채 나타나
     "툭툭 끊기는" 느낌이 난다(대표 지적). 원본 점선은 그대로 두고,
     그 위로 밝은 빛 띠가 왼쪽에서 오른쪽으로 지나가게 한다(노선도에서 흔한 방식).
     좌표 실측: 점선 x 29.55~62.73%, 중심 y 74.16%, 두께 10px(1.25%). */
  .mo-value .vf-dash {
    position: absolute; left: 29.2%; width: 33.8%;
    top: 74.16%; height: 3.4%; transform: translateY(-50%);
    overflow: hidden; pointer-events: none;
  }
  .mo-value .vf-dash::after {
    content: ''; position: absolute; top: 0; bottom: 0; width: 42%;
    left: -42%;
    background: linear-gradient(90deg,
      rgba(64,150,240,0) 0%, rgba(64,150,240,.55) 45%, rgba(120,190,255,.85) 60%, rgba(64,150,240,0) 100%);
    mix-blend-mode: screen;
    animation: vfSweep 2.4s cubic-bezier(.45,0,.55,1) infinite;
  }
  @keyframes vfSweep { to { left: 100%; } }

  /* 2030 쪽 원에 불이 들어오는 느낌.
     ⚠ 좌표는 원을 확대해 눈으로 재서 넣었다. 자동 스캔(축 한 줄 훑기)은
     원 왼쪽에 붙은 점선 마지막 조각까지 원으로 세어 중심이 왼쪽으로 4px 밀렸고,
     그래서 원 왼쪽에 흰 초승달이 생겼다.
     최종 실측(원의 오른쪽 끝 850 + 세로 지름 최댓값으로 역산):
     지름 121px(11.0%) · 중심 (71.77%, 74.09%).
     후광 요소는 원보다 조금 작게(10.2%) 두고 살짝 아래로 내렸다 —
     box-shadow가 경계 밖으로 번지므로 요소를 원과 같게 두면 후광이 커 보인다. */
  .mo-value .vf-glow {
    position: absolute; left: 71.77%; top: 74.6%;
    width: 10.2%; aspect-ratio: 1; transform: translate(-50%, -50%);
    border-radius: 50%; pointer-events: none;
    animation: vfPulse 1.9s ease-in-out infinite;
  }
  @keyframes vfPulse {
    /* spread(3번째 값)를 키우면 후광이 원보다 그만큼 크게 퍼져 어긋나 보인다.
       0~2px로 묶고 blur만 키운다. */
    0%, 100% { box-shadow: 0 0 12px 0 rgba(64,150,240,.5); }
    50%      { box-shadow: 0 0 26px 2px rgba(64,150,240,.92); }
  }
  @media (prefers-reduced-motion: reduce) {
    .mo-value .vf-dash::after, .mo-value .vf-glow { animation: none; }
  }
  .mo-premium-list .mo-in { padding: 0; }

  /* 10. AMENITY 표지 — 조경 실사(109/255) 위 흰 글자. 남색 막은 대비 확보용이라 약하게 */
  .mo-amenity-cover { position: relative; background: var(--color-main1); font-size: 0; overflow: hidden; }
  .mo-amenity-cover .ac-bg { display: block; width: 100%; height: auto; opacity: .62; }
  /* 표지가 섹션(배경 사진 높이)보다 커서 위아래가 잘렸다(실측 +18px).
     폭을 줄이고 높이 상한을 함께 걸어 어느 화면비에서도 안 넘치게 한다. */
  .mo-amenity-cover .ac-title {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 74%; max-width: 74%; max-height: 88%;
    height: auto; display: block; object-fit: contain;
  }

  /* 11. 커뮤니티 라벨 — 라벨이 검은색이고 'Special' 필기체도 짙은 회색이라
     남색 위에 올리면 묻힌다(실측 확인). 밝은 바탕에 둔다. */
  /* 라벨만 있으면 허전해서 조경 실사를 옅게 깐다.
     처음에 쓴 건물 외관(danzi_img_05)은 창·격자가 많아 라벨과 부딪혀 조경으로 바꿨다.
     라벨 글자가 검은색이라 배경이 진해지면 대비가 죽는다 — 원본 밝기 104에 opacity 0.26이면
     유효 밝기 약 208이라 검은 글자가 충분히 읽힌다. */
  /* 라벨만 있으면 허전해서 조경 실사를 옅게 깐다.
     라벨이 검은색이라 배경이 진하면 대비가 죽는다 — 원본 밝기 104 × opacity 0.26 → 유효 밝기 약 208. */
  .mo-comm-label {
    position: relative; background: #f3f4f7; font-size: 0;
    padding: var(--sp-24) var(--sp-16); overflow: hidden;
  }
  .mo-comm-label::before {
    content: ''; position: absolute; inset: 0;
    background: url('../img/danzi_img_03.jpg') center / cover no-repeat;
    opacity: .26;
  }
  .mo-comm-label::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(243,244,247,.35) 0%, rgba(243,244,247,0) 40%, rgba(243,244,247,.35) 100%);
  }
  .mo-comm-label .cl-card { position: relative; z-index: 1; }
  .mo-comm-label img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }

  /* 12. 마무리 카드 — 영상 위에 얹는다 */
  .mo-final { position: relative; }
  .mo-final .final-card {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 76%; height: auto; display: block; z-index: 1;
    filter: drop-shadow(0 6px 24px rgba(0, 9, 33, .35));
  }

  .mo-slab { background: var(--color-main1); font-size: 0; }
  .mo-slab img { display: block; width: 100%; height: auto; }

  /* ---------- 8. 당겨보세요 풀 배너 (동작은 4단계) ---------- */
  /* 당겨보세요 안의 유튜브 — 열 때 JS가 iframe을 넣는다.
     처음 1초쯤 유튜브 로고와 큰 재생버튼이 번쩍이므로, 그동안은 포스터로 덮어 둔다.
     (is-ready가 붙으면 포스터가 사라지고 영상이 보인다) */
  .pull-yt { position: absolute; inset: 0; overflow: hidden; background: #000; }
  /* 확대해서 유튜브 UI를 밀어내는 방법은 쓰지 않는다 — 영상이 잘린다.
     자동재생이 붙으면 유튜브가 제목바·로고·재생버튼을 스스로 감추는 것을 실측으로 확인했고,
     붙기 전까지는 위의 포스터가 덮는다. */
  .pull-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
  .pull-yt::after {
    content: ''; position: absolute; inset: 0; z-index: 2;
    background: #000 url('../img/pull_poster.jpg') center / cover no-repeat;
    transition: opacity .35s ease; opacity: 1; pointer-events: none;
  }
  .pull-yt.is-ready::after { opacity: 0; }
  /* 유튜브가 제 UI를 그리려 해도 포인터를 받지 않아 조작·이동이 안 된다 */
  .pull-yt { pointer-events: none; }

  .pull-banner {
    /* ⚠ touch-action이 없으면 실기기에서 가로 드래그를 브라우저가 스크롤로 가져가
       pointercancel이 즉시 떨어져 '당겨도 아무 일 없음'이 된다(헤드리스 마우스로는 통과해 안 보임).
       pan-y = 세로 스크롤은 브라우저, 가로는 우리가 처리. */
    touch-action: pan-y;
    user-select: none; -webkit-user-select: none;
    position: relative;
    /* 배너 안 요소들(배지·화살표 z-index 6)이 바깥(고정 퀵 z-index 2)보다 위로 올라와
       트램·말풍선을 덮었다. isolate로 이 배너 안에서만 층이 겹치게 가둔다. */
    isolation: isolate;
    width: 94%;
    max-width: 500px;
    height: 200px;
    margin: var(--sp-16) auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-card);
  }
  /* 오산 구조: 배경 전체에 미리보기 영상, 그 위 오른쪽 절반을 흰 그라데이션이 덮고 글자가 놓인다.
     한때 좌우를 뒤집어 놨는데(왼쪽 글자·오른쪽 영상) 원래대로 되돌렸다. */
  .pull-banner .pull-thumb { position: absolute; inset: 0; background: #000; }
  .pull-banner .pull-thumb .pull-loop {
    display: block; width: 100%; height: 100%; object-fit: cover;
  }
  .pull-banner .pull-text {
    position: absolute; inset: 0; z-index: 2;
    display: flex; align-items: center;
    padding: var(--sp-20);
    background: linear-gradient(90deg, transparent 40%, rgba(255,255,255,.95) 55%);
    pointer-events: none;
  }
  .pull-banner .pull-text-inner { margin-left: auto; text-align: right; max-width: 48%; }
  .pull-banner .brand-name { font-size: 17px; font-weight: 900; letter-spacing: .06em; color: #1a1a1a; }
  .pull-banner .brand-sub { font-size: 11px; color: #888; margin-top: var(--sp-4); }
  .pull-banner .pull-badge {
    position: absolute; z-index: 6; top: var(--sp-10); right: var(--sp-10);
    background: var(--color-main1);
    color: var(--color-text-invert);
    font-size: 0.7rem; font-weight: var(--fw-head);
    padding: var(--sp-10);
    border-radius: 20px;
  }
  .pull-banner .pull-arrow {
    position: absolute; z-index: 6; right: 14px; bottom: 25px;
    font-size: 20px; font-weight: 900;
    color: var(--color-main1);
  }

  /* ---------- 9. 어메니티 ---------- */
  .mo-amenity { background: var(--color-main1); padding: 0; text-align: center; }
  .mo-amenity .mo-in { padding: var(--sp-40) var(--sp-16); }
  .mo-amenity .am-display {
    font-family: var(--font-display-en);   /* 대표 선택: Playfair Display 800 (후보3) */
    font-weight: 800;
    font-size: var(--fs-31);
    letter-spacing: var(--ls-point);
    color: transparent;
    -webkit-text-stroke: 0.4px #fff;
  }
  .mo-amenity .am-sub { color: var(--color-text-invert); font-size: var(--fs-17); margin: var(--sp-8) 0 var(--sp-20); }
  .mo-amenity .am-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .mo-amenity .ph-media { border-radius: var(--radius-btn); overflow: hidden; aspect-ratio: 4 / 3; }
  /* 1.6:1 가로컷 → 4:3 카드 크롭 — 초점(대표 승인): danzi_02(티하우스)=left, 나머지 center */
  .mo-amenity .ph-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
  .mo-amenity .ph-media img.pos-left { object-position: left center; }

  /* ---------- 10. 마무리 히어로 ---------- */
  .mo-final { background: #fff; text-align: center; padding: 0; }
  .mo-final .mo-in { padding: var(--sp-40) var(--sp-16) 0; }
  .mo-final .f-kicker { font-size: var(--fs-17); font-weight: var(--fw-emph); color: var(--color-main2); }
  .mo-final .f-title { font-size: var(--fs-31); font-weight: var(--fw-head); line-height: 1.25; margin: var(--sp-12) 0; }
  .mo-final .f-title em { font-style: normal; color: var(--color-main1); }
  .mo-final .f-sub { font-size: var(--fs-16); line-height: 1.6; color: #333; margin-bottom: var(--sp-20); }
  .mo-final .f-sub b { color: var(--color-main1); }

  /* ---------- 11. 접수(다크 글래스 폼 — 기준서 C-11 스킨) ----------
     배경: contact_bg 세로 크롭 초점 60% center (대표 승인 표 D) + 네이비 오버레이 */
  .mo-form {
    background:
      linear-gradient(rgba(0, 9, 33, .85), rgba(0, 9, 33, .85)),
      url(../img/contact_bg.jpg) 60% center / cover no-repeat;
    padding: 0;
  }
  .mo-form .mo-in { padding: var(--sp-24) var(--sp-16) var(--sp-40); }
  .mo-form .form-box {
    display: flex; flex-direction: column; gap: var(--sp-12);
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--glass-radius);
    padding: var(--sp-24) var(--sp-20);
    color: var(--color-text-invert);
  }
  .mo-form h3 { text-align: center; font-size: var(--fs-24); font-weight: var(--fw-head); }
  .mo-form .form-note { text-align: center; font-size: var(--fs-14); opacity: .7; }
  .mo-form label { font-size: var(--fs-16); }
  .mo-form label.required::after { content: " *"; color: rgba(255,255,255,.7); }
  .mo-form input:not([type="checkbox"]):not([type="radio"]), .mo-form textarea, .mo-form select {
    width: 100%;
    color: var(--color-text-invert);
    font-size: 14px;
    font-family: var(--font-body);
    background: var(--glass-bg);
    border: var(--glass-border);
    border-radius: var(--glass-radius);
    padding: var(--sp-8);
    outline: none;
  }
  /* 어두운 폼 위의 날짜 입력 — color-scheme를 dark로 줘야 브라우저가 달력 아이콘·글자를
     밝게 그린다(기본값이면 검정 아이콘이라 남색 배경에서 안 보인다) */
  .mo-form input[type="date"], .mo-form select { color-scheme: dark; }
  .mo-form input::placeholder, .mo-form textarea::placeholder { color: rgba(255,255,255,.3); font-weight: var(--fw-light); }
  /* 개인정보 동의 — 체크박스와 [보기]를 한 줄에 둔다 */
  .mo-form .agree-row { display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap; }
  .mo-form .agree-row .agree { margin: 0; }
  .mo-form .agree-view {
    background: none; border: 0; padding: 2px 0;
    color: var(--color-main3); font-size: var(--fs-13);
    text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  }
  .mo-form .agree-body {
    margin-top: var(--sp-8); font-size: var(--fs-12); color: rgba(255,255,255,.75);
    background: rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.16);
    border-radius: 4px; padding: var(--sp-12); line-height: 1.7; text-align: left;
  }
  .mo-form .agree-body dl { margin: 0; display: grid; grid-template-columns: 76px 1fr; gap: 4px var(--sp-8); }
  .mo-form .agree-body dt { font-weight: var(--fw-head); color: rgba(255,255,255,.92); }
  .mo-form .agree-body dd { margin: 0; }
  .mo-form .agree-body p { margin: var(--sp-8) 0 0; color: rgba(255,255,255,.6); }

  .mo-form .agree input[type="checkbox"] { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; accent-color: var(--color-main3); }
  .mo-form .agree { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,.9); }
  /* 접수 상태 문구(어두운 배경용) — 비어 있으면 자리 차지 안 함 */
  /* 제출 버튼 = 이미지. 배경·테두리를 없애고 이미지만 보이게 한다 */
  .mo-form button.btn-img {
    background: none; border: 0; padding: 0; width: 100%;
    height: auto; display: block; margin-top: var(--sp-8);
    filter: drop-shadow(0 4px 12px rgba(0, 9, 33, .4));
  }
  .mo-form button.btn-img img { display: block; width: 100%; height: auto; }
  .mo-form button.btn-img:disabled { opacity: .5; }

  .mo-form .form-status { font-size: var(--fs-14); line-height: 1.6; text-align: center; color: rgba(255,255,255,.85); }
  .mo-form .form-status:empty { display: none; }
  .mo-form .form-status.is-ok { color: #fff; font-weight: var(--fw-head); }
  .mo-form .form-status.is-warn { color: #ffb4ab; font-weight: var(--fw-btn); }
  .mo-form button[type="submit"]:disabled { opacity: .5; cursor: default; }
  .mo-form button[type="submit"] {
    width: 100%;
    height: 64px;                          /* 제출형 버튼 실측(기준서 D-13) */
    background: #fff;
    color: #000;
    font-size: var(--fs-19);
    font-weight: var(--fw-emph);
    border-radius: var(--radius-btn);
    display: flex; align-items: center; justify-content: center;
  }

  /* ---------- 하단 고정 퀵 (원형 버튼 + 배너 바) ---------- */
  .mo-quick { position: fixed; left: 0; bottom: 0; width: 100%; z-index: 2; pointer-events: none; }
  .mo-quick .q-btns {
    position: absolute; left: var(--sp-8); bottom: 21vw;
    display: flex; flex-direction: column; gap: 5px;
    pointer-events: auto; z-index: 2;
  }
  /* 원형 버튼 = 이미지 한 장(입체 버튼). CSS로 원을 그리지 않는다 */
  .mo-quick .q-btns a, .mo-quick .q-btns button {
    display: block; width: 20vw; max-width: 86px; padding: 0; border: 0; background: none;
    filter: drop-shadow(0 3px 8px rgba(0, 9, 33, .35));
  }
  .mo-quick .q-btns img { display: block; width: 100%; height: auto; }

  /* 우하단 트램 블록 — 트램·기둥 위에 말풍선이 겹쳐 뜨고, 왼쪽에 선착순 리본.
     말풍선만 위아래로 흔들려야 해서 세 장을 따로 얹는다. */
  /* 크기는 오산 실제 화면 실측에 맞췄다(스크린샷 1179px/DPR3 → CSS px 환산):
     트램·기둥 128px · 말풍선 147px · 리본 67px. 화면 폭 393px 기준.
     bottom:21vw는 배너 높이와 같아서, 트램 아래가 배너 윗면에 딱 붙는다. */
  .mo-quick .q-scene {
    position: absolute; right: var(--sp-8); bottom: 19vw;
    width: 33vw; max-width: 150px;
    pointer-events: none;
    z-index: 0;              /* 배너보다 뒤 — 기둥 아래쪽이 배너에 가려진다 */
  }
  .mo-quick .q-scene .q-tram { display: block; width: 100%; height: auto; }
  /* 말풍선 꼬리가 트램 지붕에 닿게 내렸다. x는 그대로 둔다.
     트램 지붕은 q_scene.webp 안에서 높이의 46.2% 지점(알파 스캔 실측).
     말풍선 높이가 장면의 40.7%이므로 top = 46.2 - 40.7 ≈ 5.5%인데,
     실제 렌더는 그림자·반올림으로 5px 위에 떠서 9%로 맞췄다(실측 보정). */
  .mo-quick .q-scene .q-bubble {
    position: absolute; left: -18%; top: 9%;
    width: 114%; max-width: none;   /* base.css의 img{max-width:100%}가 114%를 100%로 자른다 */
    height: auto; display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 9, 33, .3));
  }
  /* 리본은 트램과 함께 내려가면 안 된다 — 꼭지점이 배너 윗면에 딱 닿아야 한다.
     트램 블록(q-scene)이 배너 뒤로 2vw 내려갔으므로, 리본은 그만큼 되올린다.
     (q-scene bottom 19vw + 리본 bottom 2vw = 배너 높이 21vw) */
  .mo-quick .q-scene .q-ribbon {
    position: absolute; left: -105%; bottom: 2vw;
    width: 52%; height: auto; display: block;
    filter: drop-shadow(0 2px 6px rgba(0, 9, 33, .3));
  }

  /* 하단 고정 배너 = 이미지 한 장 */
  .mo-quick .q-banner {
    position: relative; z-index: 1; display: block; font-size: 0;
    pointer-events: auto;
    border-top: 2px solid var(--color-main3);
  }
  .mo-quick .q-banner img { display: block; width: 100%; height: auto; }

  /* 푸터: 실측상 모바일은 밝은 배경(#f2f2f2 · 글자 #333) + 고정 퀵에 가리지 않게 */
  .site-footer { background: #f2f2f2; color: #333; padding-bottom: 30vw; }
  .site-footer p, .site-footer table { color: #333; }
  .site-footer .ft-logo { color: var(--color-main2); }
  .site-footer .ft-side { display: flex; justify-content: space-between; align-items: center; }
  #scrollTopBtn {
    display: flex; align-items: center; justify-content: center;
    width: 10vw; height: 10vw;
    background: var(--color-main1);
    color: var(--color-text-invert);
    border-radius: var(--radius-circle);
    font-size: var(--fs-19);
  }

  /* ---------- 모바일 메뉴 패널 (햄버거) — 원본 실측(04-style.css @max-990) 그대로:
     absolute(헤더 아래에서 시작·헤더/X버튼 유지), translateX(-100%)→0 0.3s ease,
     bg #383A38, padding 3vw/3vw/80vw, 스크롤바 숨김. 색 #C8B9AF(오산 웜톤)만 중립 매핑. */
  .mega {
    display: block;
    position: absolute;
    top: 100%; left: 0;
    width: 100%; height: 100vh;
    background: #383a38;
    transform: translateX(-100%);
    overflow-y: auto;
    scrollbar-width: none;
    padding: 3vw 3vw 80vw;
    z-index: 1;
  }
  .site-header.open .mega { transform: translateX(0); }
  .mega-inner { display: block; }
  .mega-col { border-bottom: 1px solid #555; }
  .mega-col h4 { display: block; }
  .mega-col h4, .mega-col ul li a { position: relative; display: block; padding: 4vw 8vw; color: var(--color-gray-2); font-size: 4vw; }
  .mega-col h4:hover, .mega-col ul li a:hover { background: rgba(0, 0, 0, .1); }   /* 원본 .mega .col a:hover */
  /* 아코디언 셰브론 (원본: 1.8vw 박스·0.6vw 보더·right 6vw·rotate 135↔-45·0.3s) */
  .mega-col h4::after {
    content: '';
    position: absolute; right: 6vw; top: 5vw;
    width: 1.8vw; height: 1.8vw;
    border-top: 0.6vw solid var(--color-gray-2);
    border-right: 0.6vw solid var(--color-gray-2);
    transform: rotate(135deg);
    transition: 0.3s;
  }
  .mega-col.mo-open h4::after { transform: rotate(-45deg); }
  .mega-col ul { background: rgba(0,0,0,.2); display: none; }   /* 원본 header .depth2 */
  .mega-col.mo-open ul { display: block; }
  .mega .mo-gnb { margin-top: 60px; }
  .mega .mo-gnb li a, .mega .mo-gnb li button { display: block; width: 100%; text-align: center; color: #fff; font-size: 4.5vw; font-weight: var(--fw-emph); padding: 4vw 0; }
  .mega .mo-gnb .m-number { background: #4b5055; }
  .mega .mo-gnb .m-registration { background: var(--color-main1); }
  .mega .mo-gnb .m-close { background: #222; margin-top: var(--sp-10); border-radius: var(--sp-10); }
  .header-dim { display: none; }

  /* 햄버거 → X (구조 상태만, 모션 4단계) */
  .site-header.open .menu-btn span:nth-child(1) { transform: rotate(45deg); transform-origin: top left; }
  .site-header.open .menu-btn span:nth-child(2) { opacity: 0; }
  .site-header.open .menu-btn span:nth-child(3) { transform: rotate(-45deg); transform-origin: bottom left; }
}