@charset "UTF-8";

/* ============================================================
   단지 상세 페이지 공용 디자인 시스템
   ------------------------------------------------------------
   전 단지가 이 한 파일을 공유한다. 단지별로 다른 것은 히어로 이미지와
   --accent 계열 색뿐이고, 레이아웃·타이포·간격은 전부 동일하다.

   기준이 된 것
     · 전체 골격  : 북오산자이 드포레(원페이지 + 앵커)
     · 평면 블록  : 오산헤리티지자이 floorplan (.plan article)
     · 단지배치   : 오산헤리티지자이 site (배치도 + 커뮤니티)

   ⚠ 단지별 개별 스타일을 이 파일에 넣지 말 것.
     단지 고유값은 각 index.html 의 <style> 에서 :root 변수만 덮어쓴다.
   ============================================================ */

:root{
  /* 기본 테마 — Xi 딥블루 계열. 단지별로 덮어쓸 수 있다. */
  --navy:#122d43;
  --navy-2:#1b3f5e;
  --accent:#0085ad;      /* 면·버튼용 */
  --accent-d:#00647f;    /* 흰 배경 위 작은 글씨용 (명도대비 확보) */
  --sky:#46a5e6;         /* 어두운 배경 위 강조용 */
  /* 조감도 사진 위 전용 밝은 브랜드 톤.
     --sky 는 단지마다 밝기가 제각각이라(한양 #5b9be0 실측 2.19) 사진 위에서
     3:1 을 못 넘기는 경우가 있다. 히어로 제목 강조는 반드시 이 값을 쓴다. */
  --sky-l:#9fd0f5;
  /* 상담신청 CTA — 브랜드 외 강조색(헤더가 한 색으로 덮이지 않도록) */
  --cta:#ffc83d;
  --cta-d:#f0b21c;

  --ink:#22272f;
  --gray:#6d747e;
  --line:#e3e0d9;
  --bg:#f4f3f0;
  --wrap:1180px;
  --hd:64px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Noto Sans KR',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  color:var(--ink);background:#fff;line-height:1.75;word-break:keep-all;
  letter-spacing:-.01em;
  /* 하단 고정바(.fbar) 자리. 아이폰은 홈 인디케이터 높이만큼 더 비운다 */
  padding-bottom:calc(64px + env(safe-area-inset-bottom,0px));
}
/* 모든 <img>에 width/height 속성을 넣어 두었다(레이아웃 밀림 방지).
   height:auto 가 있어야 그 값이 고정 높이가 아니라 '비율'로 동작한다. */
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
li{list-style:none}
table{border-collapse:collapse;width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ============ header ============ */
/* 기본은 '불투명'. JS가 최상단을 감지했을 때만 .at-top 을 붙여 투명하게 만든다.
   (스크립트가 실패해도 흰 글씨가 흰 배경에 묻히지 않도록) */
.hd{
  position:fixed;inset:0 0 auto 0;z-index:200;height:var(--hd);
  background:rgba(18,45,67,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(255,255,255,.08);color:#fff;
  transition:background .28s ease,border-color .28s ease,backdrop-filter .28s ease;
}
.hd.at-top{background:transparent;backdrop-filter:none;border-bottom-color:transparent}
/* 메뉴가 열려 있으면 최상단이라도 불투명하게. 헤더 바와 아래 패널이 같은 색으로
   이어져야 한 덩어리로 읽힌다. .at-top 뒤에 두어야 이긴다.
   여기만 반투명을 쓰지 않는다 — 메뉴 글씨 뒤로 조감도가 비치면 읽기 어렵다.
   덮개가 불투명하니 blur 도 필요 없다(합성 비용만 든다).
   색은 위 .hd 와 같은 값이다. var(--navy) 가 아니다 — 헤더는 단지마다 색을
   바꾸지 않고 전 단지 같은 남색을 쓴다(.hd 의 rgba(18,45,67,.94) 참고). */
.hd.nav-open{background:rgb(18,45,67);backdrop-filter:none;border-bottom-color:transparent}
.hd .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
/* min-width:0 — 이게 없으면 flex 항목이 nowrap 텍스트 폭 아래로 줄지 않고,
   좁은 화면에서 로고 글씨가 상자 밖으로 삐져나와 전화 버튼과 겹친다 */
.hd .brand{
  display:flex;align-items:center;gap:10px;font-weight:900;font-size:16px;
  letter-spacing:.02em;white-space:nowrap;min-width:0;overflow:hidden;
}
.hd .brand img{height:21px;width:auto}
.hd .brand em{font-style:normal;color:var(--sky)}

.gnb{display:flex;gap:4px}
.gnb a{
  font-size:14.5px;color:#c9d2dd;padding:8px 14px;border-radius:6px;
  transition:color .15s,background .15s;white-space:nowrap;
}
.gnb a:hover{color:#fff;background:rgba(255,255,255,.08)}
/* 현재 보고 있는 섹션 표시 — complex.js 가 스크롤에 따라 붙인다 */
.gnb a[aria-current]{color:var(--sky);font-weight:700}
/* 상담신청 — 전환 유도 CTA. 어두운 글씨 + 옐로 배경 (명도대비 약 11:1) */
.gnb a.req{
  background:var(--cta);color:var(--navy);font-weight:800;
  padding:8px 18px;border-radius:999px;margin-left:8px;
}
.gnb a.req:hover,
.gnb a.req[aria-current]{background:var(--cta-d);color:var(--navy)}

.hd .tel{
  display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:#fff;
  font-weight:800;font-size:14px;padding:9px 18px;border-radius:999px;white-space:nowrap;
  flex:0 0 auto;
}
.hd .tel:hover{background:var(--accent-d)}

/* 모바일 메뉴 버튼. 마크업에는 없다 — 단지 페이지 20여 개를 건드리지 않으려고
   complex.js 가 전화 버튼 바로 오른쪽에 만들어 넣는다. */
.hd-burger{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:40px;height:40px;flex:0 0 auto;padding:0;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);border-radius:10px;
  background:rgba(255,255,255,.08);
}
.hd-burger span{display:block;width:17px;height:2px;border-radius:2px;background:#fff;transition:transform .2s,opacity .2s}
.hd-burger:hover{background:rgba(255,255,255,.16)}
.hd-burger:focus-visible{outline:3px solid #fff;outline-offset:2px}
/* 열리면 X 로 바뀐다. 막대 사이 간격이 4px, 막대가 2px 라 가운데까지 6px. */
.hd.nav-open .hd-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd.nav-open .hd-burger span:nth-child(2){opacity:0}
.hd.nav-open .hd-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.hd-burger span{transition:none}}

/* 좁은 데스크톱 — 상담신청 버튼이 전화번호와 붙지 않도록 간격만 줄인다 */
@media(min-width:1041px) and (max-width:1150px){
  .gnb a{padding-left:9px;padding-right:9px}
  .gnb a.req{margin-left:4px;padding-left:15px;padding-right:15px}
}

/* ---- 모바일: 접히는 메뉴 ----
   전에는 두 번째 줄에 가로 스크롤 띠로 항상 펼쳐 뒀다. 탭 한 번에 갈 수 있다는
   게 장점이었는데, 폭이 좁으면 뒤쪽 항목이 잘려 나간 것처럼만 보이고 옆으로
   밀 수 있다는 게 드러나지 않았다. 접어 두고 버튼으로 여는 쪽으로 바꾼다.
   헤더가 한 줄로 줄면서 --hd 도 106px 에서 기본값 64px 로 돌아간다.
   히어로·앵커 여백이 이 값을 따라가므로 첫 화면이 그만큼 넓어진다. */
@media(max-width:1040px){
  .hd .wrap{gap:0 10px}
  .hd .brand{flex:1 1 auto;min-width:0}
  .hd .tel{padding:8px 14px;font-size:13px}
  .hd-burger{display:flex}

  /* 헤더 아래로 펼쳐지는 패널. .hd 가 fixed 라 그게 기준이 된다. */
  .gnb{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:rgb(18,45,67);          /* 헤더 바와 같은 색 — 이어져 보여야 한다 */
    border-bottom:1px solid rgba(255,255,255,.1);
    padding:6px 12px 12px;
    max-height:calc(100vh - var(--hd));overflow-y:auto;overscroll-behavior:contain;
  }
  .hd.nav-open .gnb{display:flex}
  .gnb a{font-size:15px;padding:13px 12px;border-radius:8px}
  .gnb a + a{border-top:1px solid rgba(255,255,255,.07)}
  .gnb a.req{margin:10px 0 0;padding:13px 18px;text-align:center;border-top:0}
}

/* 헤더 전화 버튼은 폭이 좁아질수록 단계적으로 줄인다.
   번호를 완전히 감춰도 하단 고정바(.fbar)에 항상 전체 번호가 떠 있어 손해가 없다. */
@media(max-width:560px){
  .hd .brand{font-size:15px}
  .hd .tel .txt{display:none}
}
@media(max-width:430px){
  .hd .tel .num{display:none}
  .hd-burger{width:38px;height:38px}
  .hd .tel{gap:0;padding:0;width:38px;height:38px;justify-content:center;font-size:16px}
}

/* ============ sections ============ */
section{padding:82px 0}
section.tinted{background:var(--bg)}
/* 앵커(#overview 등)로 점프할 때 고정 헤더에 제목이 가리지 않도록 */
section[id]{scroll-margin-top:var(--hd)}
.sec-h{text-align:center;margin-bottom:46px}
.sec-h .tag{color:var(--accent-d);font-size:12px;letter-spacing:.3em;font-weight:800;margin-bottom:12px}
.sec-h h2{font-size:clamp(23px,3.6vw,34px);font-weight:900;color:var(--navy);letter-spacing:-.02em}
.sec-h p{color:var(--gray);margin-top:14px;font-size:15px}

/* 섹션 안의 작은 묶음 제목 — 커뮤니티/동호수 등 하위 블록용 */
.sub-h{margin:56px 0 22px;text-align:center}
.sub-h .tag{color:var(--accent-d);font-size:11.5px;letter-spacing:.28em;font-weight:800;margin-bottom:8px}
.sub-h h3{font-size:clamp(19px,2.8vw,25px);font-weight:900;color:var(--navy);letter-spacing:-.02em}
.sub-h p{color:var(--gray);margin-top:10px;font-size:14.5px}

.figure{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.figure figcaption{font-size:12.5px;color:#98a0ab;padding:12px 16px;border-top:1px solid var(--line);background:#f7f8f9}
.figure video{width:100%;display:block;background:#000}

/* 확대 가능한 이미지 배지.
   .zoomable 은 lightbox.js 가 붙인다 → 스크립트가 안 뜨면 배지도 안 나온다(거짓 안내 방지). */
.figure,.plan .pic{position:relative}
.figure:has(.zoomable)::after,
.plan .pic:has(.zoomable)::after{
  content:'🔍 눌러서 크게 보기';
  position:absolute;top:10px;right:10px;pointer-events:none;
  background:rgba(18,45,67,.78);color:#fff;font-size:11.5px;font-weight:700;
  letter-spacing:-.02em;padding:5px 11px;border-radius:999px;
}

/* ============ hero ============ */
/* 히어로도 헤더 아래로 깔린다. .in 의 상단 패딩이 헤더 높이를 흡수 */
/* 바탕은 이미지가 뜨기 전 잠깐만 보인다. 브랜드색을 쓰면 로딩 중 화면이
   그 색으로 번쩍이므로 중성 어두운 색으로 둔다. */
/* 높이 — 조감도가 잘리지 않을 만큼 확보한다.
   조감도 원본은 가로:세로가 대략 1.6~1.85 : 1 이다. 박스가 그보다 납작하면
   object-fit:cover 가 위아래를 잘라내 건물 밑동이 사라진다.
   56vw ≈ 1.79:1 이라 대부분 온전히 들어온다.
   ⚠ 상한을 94svh 로 두면 안 된다. 1920×1080 에서 히어로가 1015px(화면의 94%)이 되어
     아래에 내용이 더 있다는 신호가 사라진다. 86svh 로 묶어 화면 아래쪽을 조금 남긴다.
   (svh = 모바일 주소창이 접혔을 때 기준. vh 를 쓰면 주소창 높이만큼 잘린다) */
.hero{
  position:relative;color:#fff;background:#101418;scroll-margin-top:0;
  min-height:min(56vw,86svh);display:flex;align-items:center;
}
.hero .bg{position:absolute;inset:0}
/* 조감도는 원래 색으로 보여야 한다.
   ⚠ 예전에는 이미지를 opacity:.42 로 깔고 그 아래 브랜드색 바탕을 두었는데,
     바탕색이 이미지 위로 비쳐 올라와 화면 전체가 그 색으로 덮여 보였다.
     이미지는 불투명하게 두고, 아래 검정 그라데이션만으로 글자 대비를 만든다. */
/* 그래도 남는 잘림은 하늘 쪽에서 가져간다.
   건물 밑동이 조감도의 핵심이라 아래를 자르면 안 된다. */
.hero .bg img{width:100%;height:100%;object-fit:cover;object-position:center bottom}

/* ── 조감도를 한 픽셀도 자르지 않는 변형 (.hero.full) ──
   하단에 고지 문구가 박혀 있는 CG 처럼 잘리면 안 되는 이미지에 쓴다.
   이미지를 흐름 안에 두어 스스로 높이를 정하게 하고, 글자는 그 위에 얹는다.
   ⚠ 좁은 화면에서는 이미지 높이가 글자보다 낮아져 글자가 넘친다.
     그래서 데스크톱 폭에서만 적용하고, 그 아래는 기본 동작(cover)으로 둔다. */
@media(min-width:901px){
  .hero.full{min-height:0;display:block}
  .hero.full .bg{position:relative;inset:auto}
  .hero.full .bg img{width:100%;height:auto;object-fit:fill}
  /* ⚠ 여기서 flex 를 쓰면 안 된다. 자식들이 flex 아이템이 되면서
     .eyebrow 알약이 전체폭 막대로 늘어난다. 절대배치 + translate 로 중앙을 잡는다. */
  .hero.full .in{position:absolute;left:0;right:0;top:50%;bottom:auto;transform:translateY(-50%)}
}
/* 이미지 전체를 덮지 않는다. 조감도는 원본 그대로 두고,
   어둠은 아래 .hero .in::before 로 글자 블록 뒤에만 깐다. */
.hero .bg::after{content:'';position:absolute;inset:0}
/* .hero 가 flex 로 세로 중앙을 잡으므로, 위 여백은 고정 헤더를 피하는 정도만 준다.
   여기에 예전처럼 112px 을 더 얹으면 내용이 아래로 쏠린다. */
.hero .in{position:relative;width:100%;padding:calc(40px + var(--hd)) 20px 40px;text-align:center}

/* 글자 블록 뒤에만 깔리는 어둠.
   조감도 전체를 덮으면 사진이 죽어서, 글자가 놓인 자리에만 타원으로 깐다.
   가장자리는 알파 0 으로 빠지므로 경계선이 보이지 않고 이미지가 그대로 살아난다.
   ⚠ 중심 알파를 .62 아래로 내리지 말 것 — 하늘이 밝은 조감도(원본 rgb(190,240,255) 근처)에서
     부제(19px)가 4.5:1 밑으로 떨어진다. */
.hero .in::before{
  content:'';position:absolute;z-index:0;pointer-events:none;
  left:50%;transform:translateX(-50%);
  top:calc(var(--hd) + 8px);bottom:8px;
  width:min(1180px,calc(100% - 24px));
  background:radial-gradient(ellipse 74% 86% at 50% 50%,
    rgba(0,0,0,.70) 0%,
    rgba(0,0,0,.68) 58%,
    rgba(0,0,0,.52) 78%,
    rgba(0,0,0,.22) 92%,
    rgba(0,0,0,0) 100%);
}
/* 글자는 그 위로 */
.hero .in > *{position:relative;z-index:1}
/* --sky 는 '어두운 면 위' 강조색이라 사진 위에 그냥 얹으면 대비가 안 나온다
   (북오산 히어로에서 1.77:1 이었다). 글자 뒤에 검정 칩을 깔아
   사진 밝기와 무관하게 대비를 고정한다. */
.hero .eyebrow{
  /* ⚠ 여기에 --sky(밝은 브랜드색)를 쓰면 안 된다.
     조감도 하늘 위에서는 덮개를 깔아도 4.5:1 을 못 넘긴다(오산 실측 3.53).
     브랜드색은 제목 em 처럼 크고 굵은 곳에만 쓰고, 작은 글씨는 흰색으로 간다. */
  display:inline-block;border:1px solid rgba(255,255,255,.45);color:#fff;
  background:rgba(0,0,0,.5);
  font-size:12.5px;letter-spacing:.28em;padding:7px 18px;margin-bottom:26px;
}
.hero h1{font-size:clamp(32px,6.6vw,60px);font-weight:900;letter-spacing:-.03em;line-height:1.2}
/* 사진 위라서 --sky 가 아니라 밝은 톤(--sky-l)을 쓴다. 이유는 :root 주석 참고. */
.hero h1 em{font-style:normal;color:var(--sky-l)}
/* h1 첫 줄에 얹는 단지명.
   h1 에 단지명이 없으면 검색엔진이 이 문서를 무엇에 대한 것으로 볼지 판단할 근거가 title 뿐이다.
   히어로 카피는 그대로 두고 단지명만 작은 줄로 앞에 붙인다.
   ⚠ h1 본문(최대 60px)과 같은 크기로 키우지 말 것 — 카피가 밀려 줄바꿈이 깨진다. */
/* ── 단지명 유리 명패 ──
   ⚠ 예전에는 흰 글씨만 얹어 두었는데, 조감도 위에서 단지명이 카피에 묻혀
     '이 페이지가 어느 단지인지'가 첫 화면에서 안 읽혔다(VL 르웨스트에서
     명패로 바꿔 보고 확실히 나아져서 전 단지 기본값으로 올린다).

   대비는 사진이 아니라 명패 자신이 만든다 —
     ① 위가 밝고 아래가 어두운 본체 그라데이션 (유리 표면)
     ② inset 상단 1px 흰 선 (유리 두께)
     ③ inset 하단 옅은 빛 (바닥에서 올라오는 굴절)
     ④ 바깥 그림자 (사진에서 떠 있는 느낌)
   판이 항상 어두우므로 하늘이 아무리 밝아도 흰 글자 대비가 보장된다.

   ⚠ backdrop-filter 는 쓰지 말 것. .hero-v 주석대로 사진이 뿌옇게 죽고
     저사양 모바일에서 스크롤이 끊긴다. 입체감은 전부 자기 배경으로 만든다.
   ⚠ 아래 헤드라인(clamp 30~56px)보다 작게 둘 것. 같은 크기로 키우면
     명패와 카피가 서로 경쟁해서 위계가 무너진다. */
.hero h1 .h1-name,
.hero-v h1 .h1-name{
  /* inline-block 으로 두면 뒤따르는 카피가 같은 줄에 붙는다.
     fit-content + auto 마진이라야 글자 폭만큼만 차지하면서 제 줄을 갖는다. */
  display:block;width:-moz-fit-content;width:fit-content;margin-inline:auto;
  /* ⚠ 최대 31px. 헤드라인이 clamp 30~56px 이라 여기를 더 키우면 명패와 카피가
     서로 경쟁해서 위계가 무너진다. 최소 19px 은 375px 화면에서 가장 긴 단지명
     ('이천 중리 B3블록 금성백조 예미지')이 한 줄에 들어가는 한계값이다. */
  font-size:clamp(19px,3.1vw,31px);
  font-weight:900;
  letter-spacing:-.005em;
  line-height:1.2;
  margin-bottom:18px;
  padding:9px 26px;
  border-radius:999px;
  text-align:center;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  /* ::after 광택 띠가 알약 모서리 밖으로 새지 않게 자른다 */
  position:relative;overflow:hidden;
  border:1px solid rgba(255,255,255,.5);
  /* color-mix 를 모르는 구형 브라우저용 중립 먹색. 아래 선언이 이걸 덮는다. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,0) 47%),
    linear-gradient(180deg, rgba(20,26,38,.84) 0%, rgba(6,9,18,.9) 100%);
  /* ── 단지별 시그니처 색 ──
     위에서부터 ① 유리 광택 ② 시그니처 틴트 ③ 어두운 본체 세 겹이다.

     ⚠ 색의 원천은 --accent 가 아니라 --accent-d 다. --accent 는 흰 배경 위
       면·버튼용이라 단지에 따라 꽤 밝고(기본값 #0085ad), 그대로 명패에 깔면
       흰 하늘 조감도 위에서 흰 글자가 4.5:1 을 못 넘긴다. --accent-d 는
       애초에 '어두운 쪽' 용으로 잡아 둔 값이라 색상은 그대로 살면서 어둡다.
     ⚠ 틴트 알파 .42(위)~.58(아래) 이 상한이다. 위쪽을 더 올리면 유리 광택과
       겹치는 자리에서 판이 밝아진다. 전 단지 --accent-d 로 계산한 최악값
       (새하얀 하늘 + 광택 최대)이 4.66:1 로, 여기서 조금만 올려도 4.5 를
       깬다. 색을 더 진하게 보이고 싶으면 알파가 아니라 아래쪽(.58)만 올릴 것.
     ⚠ 틴트가 아래로 갈수록 진한 이유 — 위쪽은 유리 광택이 얹히는 자리라
       대비 여유가 없고, 아래쪽은 광택이 없어서 색을 마음껏 넣을 수 있다. */
  background:
    linear-gradient(180deg, rgba(255,255,255,.20) 0%, rgba(255,255,255,.06) 46%, rgba(255,255,255,0) 47%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--accent-d) 42%, transparent) 0%,
      color-mix(in srgb, var(--accent-d) 58%, transparent) 100%),
    linear-gradient(180deg, rgba(10,13,20,.84) 0%, rgba(3,5,11,.9) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -9px 16px rgba(255,255,255,.08),
    0 10px 26px rgba(4,7,16,.5);
}
/* 판 위를 훑고 지나가는 광택 띠.
   ⚠ 최대 알파 .15 를 넘기지 말 것. 중립 먹색 판일 때는 .18 까지 버텼지만,
     시그니처 틴트가 한 겹 얹히면서 여유가 줄었다. 지금 값이 전 단지
     최악 4.66:1 을 만드는 기준이다. */
.hero h1 .h1-name::after,
.hero-v h1 .h1-name::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,
    rgba(255,255,255,0)   38%,
    rgba(255,255,255,.08) 48%,
    rgba(255,255,255,.15) 52%,
    rgba(255,255,255,.08) 56%,
    rgba(255,255,255,0)   66%);
  background-size:260% 100%;
}
/* 움직임을 줄이도록 설정한 사용자에겐 켜지 않는다 */
@media (prefers-reduced-motion:no-preference){
  .hero h1 .h1-name::after,
  .hero-v h1 .h1-name::after{animation:nameSheen 7.5s ease-in-out infinite}
  @keyframes nameSheen{
    0%,100%{background-position:0% 50%}
    50%{background-position:100% 50%}
  }

  /* ── 등장 → 좌우 부유 ──
     북수원 디에트르 II · 브레인시티 비스타동원의 제목 연출과 같은 값이다
     (heroTitleIn / heroTitleFloat). 그쪽은 페이지 안에 직접 박혀 있고 여기는
     공용이라, 이름이 겹치지 않게 nameIn / nameFloat 으로 둔다.

     ⚠ 두 애니메이션의 시작 시각이 맞물려야 한다. 등장이 .3s 에 시작해 .9s 동안
       도니 끝나는 시점이 1.2s 이고, 부유는 정확히 그때 이어받는다. 부유를
       먼저 시작하면 등장 중에 transform 이 덮여 튀어 오르는 동작이 죽는다.
     ⚠ both 를 빼지 말 것. 빼면 지연(.3s) 동안 명패가 최종 상태로 먼저 보였다가
       사라진 뒤 다시 등장한다. */
  .hero h1 .h1-name,
  .hero-v h1 .h1-name{
    animation:nameIn .9s cubic-bezier(.22,1,.36,1) .3s both,
              nameFloat 3s ease-in-out 1.2s infinite;
  }
  /* 55% 에서 한 번 넘겼다가(-10px, 1.08배) 75% 에서 살짝 되돌아오는 탄성이
     이 연출의 핵심이다. 단순 fade-in 으로 바꾸지 말 것. */
  @keyframes nameIn{
    0%  {opacity:0;transform:translateY(32px) scale(.88)}
    55% {opacity:1;transform:translateY(-10px) scale(1.08)}
    75% {transform:translateY(4px) scale(.98)}
    100%{opacity:1;transform:translateY(0) scale(1)}
  }
  @keyframes nameFloat{
    0%  {transform:translateX(-5px)}
    50% {transform:translateX(5px)}
    100%{transform:translateX(-5px)}
  }
}
/* 히어로 파티클을 화면 밖에서 멈추는 것과 같은 이유다. background-position 이
   바뀔 때마다 다시 그리므로, 긴 페이지를 스크롤하는 내내 돌게 두면 배터리를
   먹는다. assets/complex.js 가 .fx-off 를 붙였다 뗀다. */
.hero.fx-off h1 .h1-name,
.hero-v.fx-off h1 .h1-name,
.hero.fx-off h1 .h1-name::after,
.hero-v.fx-off h1 .h1-name::after{animation-play-state:paused}
/* 좁은 화면에서는 명패가 두 줄로 꺾이면서 히어로가 한 화면을 넘긴다 */
@media(max-width:600px){
  .hero h1 .h1-name,
  .hero-v h1 .h1-name{padding:7px 17px;margin-bottom:13px}
}
/* 사진 위 본문이라 흰색을 쓴다. 회색기를 넣으면 밝은 조감도에서 4.5:1 을 못 맞춘다 */
.hero .sub{font-size:clamp(15px,2.3vw,19px);color:#fff;margin-top:20px}
.hero .btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:36px}

.btn{
  display:inline-flex;align-items:center;gap:8px;border-radius:999px;font-weight:800;
  font-size:16px;padding:15px 34px;transition:transform .15s,background .15s;
}
.btn:hover{transform:translateY(-2px)}
.btn.primary{background:var(--accent);color:#fff;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.btn.ghost{border:1px solid rgba(255,255,255,.45);color:#fff}
.btn.ghost:hover{background:rgba(255,255,255,.1)}

.stats{
  position:relative;display:grid;grid-template-columns:repeat(4,1fr);
  margin-top:56px;border-top:1px solid rgba(255,255,255,.16);
}
/* 통계가 3개뿐인 단지도 있다 — 열 수를 따로 지정할 수 있게 */
.stats.g3{grid-template-columns:repeat(3,1fr)}
.stats div{padding:24px 10px;text-align:center;border-left:1px solid rgba(255,255,255,.1)}
.stats div:first-child{border-left:0}
/* 통계는 히어로 아래쪽, 조감도에서 건물·지면이 밝게 깔리는 자리다.
   --sky 로는 3:1 을 못 넘겨서(오산 실측 2.68) 숫자는 흰색으로 둔다.
   설명 글씨도 #a4aeba 로는 2.94 였다 → 더 밝은 회색으로 올린다. */
.stats b{display:block;font-size:clamp(19px,3.2vw,26px);color:#fff;font-weight:900;letter-spacing:-.02em}
/* #dbe2ea 로는 북수원에서 4.33 이었다(기준 4.5). 덮개를 더 키우면 조감도가 죽으니
   글자를 밝히는 쪽으로 맞춘다. 숫자(흰색)보다는 어두워 위계는 유지된다. */
.stats span{font-size:12.5px;color:#e2e8ee}
@media(max-width:640px){
  .stats,.stats.g3{grid-template-columns:repeat(2,1fr)}
  .stats div:nth-child(3){border-left:0}
  .stats div:nth-child(n+3){border-top:1px solid rgba(255,255,255,.1)}
}

/* ============ hero — 풀스크린 변형 (.hero-v) ============
   기본 .hero 는 조감도 위에 글자 블록만 얹는 가로형이다.
   .hero-v 는 화면을 꽉 채우고 배지 → 제목 → 통계 → CTA 를 세로로 쌓는다.
   (브레인시티 비스타동원에서 쓰던 구성을 공용 변형으로 옮긴 것)

   마크업 구조 — 이 순서를 지킬 것
     <div class="hero-v" id="top">
       <div class="bg"><img …></div>      조감도
       <canvas class="hero-fx"></canvas>  파티클 (complex.js 가 자동으로 켠다. 없어도 됨)
       <div class="badges"><span class="on">…</span>…</div>
       <div class="in"><span class="eyebrow">…</span><h1>…</h1><p class="sub">…</p></div>
       <div class="hstats"><div><b>…</b><span>…</span></div>…</div>
       <div class="scroll"><span>scroll</span><i></i></div>
     </div>

   ⚠ backdrop-filter(블러)를 쓰지 말 것.
     조감도가 뿌옇게 죽고, 저사양 모바일에서 스크롤이 눈에 띄게 끊긴다.
     대비는 불투명·반투명 '색'으로만 만든다.
   ⚠ .hero 계열 선택자와 겹치지 않는다. 두 형태를 한 페이지에 섞어 쓰지 말 것. */
.hero-v{
  position:relative;color:#fff;background:#101418;overflow:hidden;
  /* 100svh — 모바일 주소창이 접힌 상태 기준. vh 로 두면 주소창 높이만큼
     아래가 잘려 CTA 버튼이 첫 화면에서 사라진다. */
  min-height:100svh;
  display:flex;flex-direction:column;
  padding:0 0 30px;
}
.hero-v .bg{position:absolute;inset:0}
/* 건물 밑동이 조감도의 핵심이라 아래를 자르면 안 된다. 잘림은 하늘에서 가져간다. */
.hero-v .bg img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
/* ⚠ 조감도 위에 어둠(veil)을 덮지 않는다.
   전에 화면 전체를 덮는 그라데이션을 깔았다가 걷어냈다. 두 가지가 문제였다.
     · 사진이 통째로 잿빛이 되어 '회색 블러를 씌운 것처럼' 보인다.
     · 조감도에 문구가 박힌 경우에도 소용없다. 박힌 글자와 하늘이 같은
       비율로 어두워져 대비가 그대로 남는다(.80 까지 올려도 비쳤다).
   대비는 '글자 쪽'에서 만든다 — 아래 h1 의 text-shadow, 그리고 배지·통계·
   버튼처럼 자기 배경을 가진 요소들. 사진은 원래 색 그대로 둔다. */
.hero-v .hero-fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* 글자는 조감도·파티클 위로 */
.hero-v .badges,
.hero-v .in,
.hero-v .hstats,
.hero-v .btns,
.hero-v .scroll{position:relative;z-index:1}

/* ── 상단 배지 ── */
/* 폭·여백을 .wrap 과 똑같이 맞춘다(max-width:1180 + 가운데 정렬 + 좌우 20px).
   헤더 로고도 .hd .wrap 안에 있어서, 이래야 첫 배지 왼쪽 끝이 로고와 한 줄로 선다.
   ⚠ padding 만 20px 주면 안 된다 — 넓은 화면에서 .wrap 은 가운데로 모이는데
     배지는 화면 왼쪽 끝에 붙어, 1280px 에서 43px 어긋난다(실측). */
.hero-v .badges{
  display:flex;gap:6px;
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:0 20px;
  margin-top:calc(var(--hd) + 16px);
  /* 전에는 가로로 미는 띠였다(nowrap + overflow-x). 좁은 화면에서 줄을 바꾸면
     히어로가 한 화면을 넘긴다는 이유였는데, 헤더가 한 줄이 되면서 --hd 가
     106px -> 64px 로 줄어 그 여유가 생겼다. .in 이 남는 높이를 흡수하므로
     배지가 세 줄이 되어도 통계는 첫 화면 안에 남는다(360x640, 배지 6개 실측).
     띠로 두면 뒤쪽 배지가 잘려 나간 것처럼만 보이고 밀 수 있다는 게 드러나지
     않는다. 배지는 읽히라고 두는 것이니 전부 펼친다. */
  flex-wrap:wrap;row-gap:6px;
}
.hero-v .badges span{
  background:rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.38);color:#fff;
  font-size:11.5px;font-weight:500;padding:5px 12px;border-radius:999px;
  letter-spacing:.02em;white-space:nowrap;flex-shrink:0;
}
.hero-v .badges span.on{background:#fff;color:var(--navy);border-color:transparent;font-weight:800}

/* ── 제목 블록 ── */
/* flex:1 이라 배지와 통계 사이의 남는 높이를 전부 먹고, 그 안에서 세로 중앙을 잡는다.
   (통계·CTA 에 margin-top:auto 를 주는 방식보다 화면 높이 변화에 안정적이다) */
.hero-v .in{
  flex:1 1 auto;min-height:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:20px;text-align:center;
}
/* ⚠ 제목 뒤에 타원형 어둠 '판'을 깔지 말 것.
   한 번 해봤는데(.txt::before radial-gradient), 대비 수치는 좋았지만
   밝은 하늘 위에 뭉개진 얼룩이 떠 있는 것처럼 보여 걷어냈다.
   조감도처럼 배경이 밝고 평평하면 아무리 부드럽게 빼도 판의 존재가 드러난다.
   대비는 아래 h1 의 text-shadow 로만 만든다. */
.hero-v .eyebrow{
  /* .hero .eyebrow 와 같은 이유로 --sky 를 쓰지 않는다 —
     조감도 하늘 위에서는 덮개를 깔아도 4.5:1 을 못 넘긴다. */
  display:inline-block;border:1px solid rgba(255,255,255,.45);color:#fff;
  background:rgba(0,0,0,.5);
  font-size:12px;letter-spacing:.26em;padding:6px 16px;margin-bottom:20px;
}
/* 조감도에 어둠을 안 깔기 때문에, 대비는 전부 이 그림자가 만든다.
   세 겹인 이유 — 좁은 것 하나로는 밝은 하늘 위에서 획이 묻히고,
   넓은 것 하나만 쓰면 글자 주변이 뿌옇게 번져 사진이 지저분해진다.
     ① 0 1px 2px  : 획 가장자리를 또렷하게 (밝은 배경에서 형태 유지)
     ② 0 2px 10px : 글자 바로 뒤에 어두운 자리를 만든다
     ③ 0 4px 34px : 넓게 퍼지는 후광 — 하늘이 아주 밝을 때의 보험
   ⚠ 이 값을 줄이려면 밝은 하늘 조감도(rgb 190,220,245 근처) 위에서
     실제로 확인할 것. 노을 조감도만 보고 판단하면 안 된다. */
.hero-v h1{
  font-size:clamp(30px,7.2vw,56px);font-weight:900;letter-spacing:-.03em;line-height:1.24;
  text-shadow:
    0 1px 2px rgba(0,0,0,.62),
    0 2px 10px rgba(0,0,0,.58),
    0 4px 34px rgba(0,0,0,.45);
}
/* 강조는 브랜드색 + 흰 테두리. 사진 밝기와 무관하게 글자가 읽힌다.
   (paint-order 가 없으면 테두리가 글자 안쪽을 먹어 획이 가늘어진다)
   ⚠ 여기에 background-clip:text 그라데이션을 넣어 봤는데, 속색이 옅어지면서
     흰 테두리와 뭉개져 오히려 안 읽혔다. 단색으로 둘 것. */
.hero-v h1 em{
  font-style:normal;color:var(--accent);
  -webkit-text-stroke:2px #fff;paint-order:stroke fill;
}
.hero-v .sub{
  display:inline-block;margin-top:18px;
  font-size:clamp(13.5px,1.9vw,16px);font-weight:700;color:#fff;
  background:var(--accent);padding:8px 20px;border-radius:999px;
  letter-spacing:.01em;line-height:1.5;
}

/* ── 하단 통계 ── */
/* gap:1px + 배경색으로 칸 사이 선을 만든다(테두리보다 모서리 처리가 깔끔하다). */
.hero-v .hstats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.22);border-radius:14px;overflow:hidden;
  width:calc(100% - 40px);max-width:820px;margin:0 auto 16px;
}
.hero-v .hstats > div{background:rgba(6,16,26,.58);padding:15px 8px;text-align:center}
/* nowrap — '59~125㎡' 는 기호 사이에서 꺾여 그 칸만 두 줄이 되고
   옆 칸 숫자와 높이가 어긋난다(375·390px 폭에서 실제로 발생). */
.hero-v .hstats b{
  display:block;font-size:clamp(17px,2.5vw,23px);font-weight:900;color:#fff;
  letter-spacing:-.02em;line-height:1.15;margin-bottom:3px;white-space:nowrap;
}
.hero-v .hstats span{display:block;font-size:11.5px;color:#e2e8ee;line-height:1.35}

/* ※ 히어로 안에는 CTA 버튼을 두지 않는다.
   전환 동선은 헤더의 전화번호·상담신청과 하단 .fbar-v 가 맡는다.
   (히어로에 버튼까지 넣으면 통계와 붙어 첫 화면이 버튼투성이가 된다) */

/* ── 스크롤 안내 ── */
.hero-v .scroll{
  position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:5px;
}
.hero-v .scroll span{font-size:10px;color:rgba(255,255,255,.55);letter-spacing:.18em;text-transform:uppercase}
.hero-v .scroll i{
  display:block;width:1px;height:26px;
  background:linear-gradient(to bottom,rgba(255,255,255,.7),transparent);
  animation:heroVScroll 1.5s ease-in-out infinite;
}
@keyframes heroVScroll{0%,100%{opacity:1}50%{opacity:.3}}

@media(max-width:900px){
  /* 통계·CTA 를 바닥까지 내리면 이 자리와 겹친다. 터치 기기에서는 안내 자체가 불필요. */
  .hero-v .scroll{display:none}
}
/* 스크롤 안내가 보이는 폭에서는 그 높이(약 50px)만큼 바닥을 더 비운다.
   기본 30px 이면 안내가 CTA 버튼 위로 올라타 글자와 겹친다(1280×720 실측). */
@media(min-width:901px){
  .hero-v{padding-bottom:66px}
}
@media(max-width:640px){
  .hero-v{padding-bottom:20px}
  .hero-v .badges{margin-top:calc(var(--hd) + 12px);padding:0 18px}
  .hero-v .in{padding:16px 18px}
  .hero-v .eyebrow{font-size:11px;letter-spacing:.22em;padding:5px 13px;margin-bottom:14px}
  .hero-v .sub{margin-top:14px}
  /* 4칸이면 한 칸이 80px 아래로 내려가 숫자가 깨진다. 2×2 로 접는다. */
  .hero-v .hstats{grid-template-columns:repeat(2,1fr);width:calc(100% - 36px)}
  .hero-v .hstats > div{padding:13px 6px}
}
/* 세로가 짧은 기기(360×640 등) — 기본 여백이면 히어로가 화면을 넘겨
   통계가 첫 화면 밖으로 밀린다. 요소마다 조금씩 깎아 담는다.
   모바일 헤더가 106px(2단)이라 위에서 이미 크게 먹고 들어가는 탓이다. */
@media(max-width:640px) and (max-height:700px){
  .hero-v .badges{margin-top:calc(var(--hd) + 8px)}
  .hero-v .in{padding:10px 18px}
  .hero-v .eyebrow{margin-bottom:10px}
  .hero-v h1{font-size:clamp(25px,6.6vw,34px)}
  .hero-v .sub{margin-top:10px;padding:7px 16px}
  .hero-v .hstats > div{padding:11px 6px}
}
@media(prefers-reduced-motion:reduce){
  .hero-v .scroll i{animation:none}
}

/* ============ status strip ============ */
.strip{background:var(--accent-d);color:#fff}
.strip .wrap{
  display:flex;align-items:center;justify-content:center;gap:10px 26px;
  flex-wrap:wrap;padding-top:16px;padding-bottom:16px;font-size:14.5px;font-weight:600;
}
.strip b{font-weight:900;letter-spacing:.02em}

/* ============ cards ============ */
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.card{
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:32px 26px;
  transition:box-shadow .2s,transform .2s;
}
.card:hover{box-shadow:0 16px 36px rgba(18,45,67,.10);transform:translateY(-3px)}
.card .num{font-size:26px;font-weight:900;color:var(--accent);line-height:1;margin-bottom:14px}
.card .ico{font-size:26px;line-height:1;margin-bottom:12px}

/* 번호 + 아이콘을 한 줄로. 숫자만 있으면 카드가 밋밋해 보인다. */
.card .cap{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.card .cap .ico,.card .cap .num{margin:0}
.card .cap .ico{
  font-size:19px;width:38px;height:38px;flex:0 0 38px;
  display:flex;align-items:center;justify-content:center;
  border-radius:11px;background:var(--soft-tint,#f3f4f8);
}
.card .cap .num{font-size:20px}
.card h3{font-size:17.5px;font-weight:800;color:var(--navy);margin-bottom:9px;letter-spacing:-.02em}
.card p{font-size:14px;color:var(--gray)}
.card b{color:var(--navy)}

/* 이미지가 들어간 카드 (프리미엄 등) */
.card.pic-card{padding:0;overflow:hidden}
.card.pic-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card.pic-card .body{padding:22px 22px 26px}

/* ============ tables ============ */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:#fff}
.tbl{min-width:640px;font-size:14.5px}
.tbl th,.tbl td{padding:13px 14px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
/* 가로로 밀어야 보인다는 안내 — complex.js 가 넘치는 표 위에만 넣는다 */
.tbl-hint{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:12.5px;font-weight:700;color:var(--accent-d);margin-bottom:8px;
}
.tbl thead th{background:var(--navy);color:#fff;font-weight:700;font-size:13.5px;letter-spacing:.02em;border-bottom:0}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:#f2f7fa}
.tbl .lead{font-weight:800;color:var(--navy)}
.tbl .em{color:var(--accent-d);font-weight:800}
.tbl tfoot td{background:#eceae5;font-weight:800;color:var(--navy);border-top:2px solid var(--navy)}

/* 좁은 화면에서는 글자·여백을 줄여 가로 스크롤 양을 줄인다.
   ※ 반드시 .tbl 기본 규칙들 '뒤'에 두어야 한다. 앞에 두면
     .tbl thead th 의 font-size:13.5px 에 특정도가 같아 덮여버린다. */
@media(max-width:560px){
  .tbl{min-width:560px;font-size:13.5px}
  .tbl th,.tbl td{padding:11px 9px}
  .tbl thead th{font-size:12.5px}
}

.spec{font-size:15px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.spec th,.spec td{padding:15px 18px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.spec th{width:150px;background:#f6f5f2;color:var(--navy);font-weight:700;white-space:nowrap}
/* ⚠ 아래 규칙은 '항목명 | 값' 2열 표(.spec) 전용이다.
   열이 3개 이상인 데이터 표에 .spec 을 쓰면 셀이 전부 세로로 쪼개져
   머리글과 값의 짝이 끊어진다. 그런 표는 .tbl-wrap > .tbl 을 쓸 것. */
@media(max-width:560px){
  .spec th,.spec td{display:block;width:100%;border-bottom:0;padding:12px 16px}
  .spec th{padding-bottom:2px}
  .spec tr{display:block;border-bottom:1px solid var(--line)}
  .spec tr:last-child{border-bottom:0}
}

.note{font-size:12.5px;color:#98a0ab;margin-top:16px;line-height:1.8}
.note b,.note strong{color:var(--accent-d)}
/* 사실관계를 반드시 짚어야 하는 안내(조합사업 고지 등) */
.callout{
  margin-top:18px;padding:16px 18px;border-left:4px solid var(--accent);
  background:#f4f7fb;font-size:13px;color:var(--gray);line-height:1.85;border-radius:0 8px 8px 0;
}
.callout b{color:var(--accent-d)}

/* ============ list ============ */
.checks li{position:relative;padding:11px 0 11px 30px;font-size:15px;border-bottom:1px dashed var(--line)}
.checks li:last-child{border-bottom:0}
.checks li::before{content:'✓';position:absolute;left:4px;top:11px;color:var(--accent);font-weight:900}
.checks b{color:var(--navy)}

/* 이름 — 값 두 칸짜리 목록 (거리·소요시간·품목 등) */
.deflist{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
.deflist li{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:13px 18px;border-bottom:1px solid var(--line);font-size:14.5px;
}
.deflist li:last-child{border-bottom:0}
.deflist .k{color:var(--ink);font-weight:700}
.deflist .v{color:var(--accent-d);font-weight:800;white-space:nowrap;font-size:13.5px}

/* 태그처럼 늘어놓는 품목 목록 (무상제공 등) */
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.tags span{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:7px 14px;font-size:13.5px;color:var(--ink);
}

/* ============ split ============ */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.split.rev{grid-template-columns:.9fr 1.1fr}
@media(max-width:900px){.split,.split.rev{grid-template-columns:1fr;gap:28px}}
.split h3{font-size:clamp(20px,3vw,28px);font-weight:900;color:var(--navy);margin-bottom:16px;letter-spacing:-.02em}
.split .tag{color:var(--accent-d);font-size:12px;letter-spacing:.3em;font-weight:800;margin-bottom:10px}
.split p{color:var(--gray);font-size:15px;margin-bottom:14px}

/* ============ timeline ============ */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:900px){.tl{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tl{grid-template-columns:1fr}}
.tl li{
  background:#fff;border:1px solid var(--line);border-top:3px solid var(--accent);
  border-radius:0 0 12px 12px;padding:22px 20px;
}
.tl li.done{opacity:.58;border-top-color:#c9cdd3}
.tl li.now{border-top-color:var(--navy);box-shadow:0 12px 30px rgba(18,45,67,.13)}
/* 진행 중 배지 — 어떤 항목이 now 가 되든 자동으로 붙는다 */
.tl li.now .t::after{
  content:'진행 중';display:inline-block;vertical-align:middle;margin-left:8px;
  font-size:11px;font-weight:800;letter-spacing:.02em;color:#fff;
  background:var(--accent-d);padding:2px 9px;border-radius:999px;
}
.tl .d{font-size:13px;color:var(--accent-d);font-weight:800;letter-spacing:.04em}
.tl li.done .d{color:#9aa1ab}
.tl .t{font-size:17px;font-weight:800;color:var(--navy);margin-top:4px}
.tl .m{font-size:13px;color:var(--gray);margin-top:6px}

/* 외부 임베드 (E모델하우스 360° 투어 등) — 비율을 지켜 반응형으로 */
.embed{position:relative;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#000;aspect-ratio:16/10}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:640px){.embed{aspect-ratio:4/3}}

/* 분양가 표 — 블록별로 금액이 다른 타입의 보조 금액, 확장비 열 */
.tbl td.em .alt{display:inline-block;margin-top:3px;font-size:13px;font-weight:600;color:var(--gray)}
.tbl td.ext{font-size:13.5px;color:var(--gray);white-space:nowrap}
.tbl td small{display:block;margin-top:2px;font-size:12px;color:var(--gray);font-weight:400}
/* 평면 카드 금액 박스의 보조 줄 (다른 블록 금액 · 확장비) */
.plan .price em{
  display:block;margin-top:5px;font-style:normal;
  font-size:13.5px;font-weight:600;color:var(--accent-d);
}

/* ============ 공급 블록 필터 ============
   허브 메인의 .chip 과 같은 모양새를 단지 페이지 팔레트로 옮긴 것.
   필터에서 빠진 요소는 [hidden] 으로 감춘다. */
.blfilter{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  margin:0 0 26px;padding:14px 18px;
  border:1px solid var(--line);border-radius:14px;background:#f7fafc;
}
.blfilter-label{
  font-size:12px;font-weight:800;color:var(--gray);letter-spacing:.14em;
  white-space:nowrap;margin-right:6px;
}
.blchip{
  border:1px solid var(--line);background:#fff;color:var(--navy);
  padding:8px 18px;border-radius:999px;font-size:14px;font-weight:700;
  font-family:inherit;cursor:pointer;white-space:nowrap;transition:.15s;
}
.blchip:hover{border-color:var(--accent);color:var(--accent-d)}
.blchip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.blfilter-count{margin-left:auto;font-size:13px;color:var(--gray);white-space:nowrap}
@media(max-width:640px){
  .blfilter{padding:12px 14px;gap:6px}
  .blchip{padding:7px 14px;font-size:13.5px}
  .blfilter-count{margin-left:0;width:100%;text-align:right}
}
/* 필터로 걸러진 표 행·타입칩·평면 카드 */
[data-bl][hidden]{display:none!important}

/* ============ type nav / plans ============ */
.typenav{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:40px}
.typenav a{
  border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 20px;
  font-size:14.5px;font-weight:700;color:var(--navy);transition:.15s;
}
.typenav a:hover{background:var(--navy);color:#fff;border-color:var(--navy)}

.plan{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;margin-bottom:34px;scroll-margin-top:calc(var(--hd) + 20px)}
.plan:last-of-type{margin-bottom:0}
.plan .top{
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
  background:var(--navy);color:#fff;padding:20px 26px;
}
.plan .top h3{font-size:23px;font-weight:900;letter-spacing:-.02em}
.plan .top .sup{font-size:14px;color:var(--sky);font-weight:700}
.plan .top .cnt{margin-left:auto;font-size:13.5px;color:#a9b3bf}
.plan .body{display:grid;grid-template-columns:1.05fr .95fr;gap:0}
@media(max-width:860px){.plan .body{grid-template-columns:1fr}}
.plan .pic{padding:22px;background:#f5f8fa;border-right:1px solid var(--line);display:flex;align-items:center;justify-content:center}
@media(max-width:860px){.plan .pic{border-right:0;border-bottom:1px solid var(--line)}}
.plan .info{padding:26px 28px}
.plan .info dl{display:grid;grid-template-columns:auto 1fr;gap:0}
.plan .info dt{font-size:13.5px;color:var(--gray);padding:11px 20px 11px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.plan .info dd{font-size:14.5px;font-weight:700;color:var(--navy);padding:11px 0;border-bottom:1px solid var(--line);text-align:right}
.plan .price{margin-top:20px;background:#eff7fb;border:1px solid #cfe5f0;border-radius:12px;padding:16px 20px}
.plan .price span{display:block;font-size:12.5px;color:var(--accent-d);font-weight:800;letter-spacing:.16em;margin-bottom:4px}
.plan .price b{font-size:clamp(19px,2.6vw,24px);font-weight:900;color:var(--navy);letter-spacing:-.02em}
/* 타입별 상담 유도 — 평면을 보다가 바로 문의로 이어지게 */
.plan .ask{
  display:block;margin-top:14px;text-align:center;background:var(--accent);color:#fff;
  font-weight:800;font-size:14.5px;padding:13px 16px;border-radius:10px;transition:background .15s;
}
.plan .ask:hover{background:var(--accent-d)}

/* ============ CTA ============ */
.cta{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);color:#fff;text-align:center;scroll-margin-top:var(--hd)}
.cta h2{font-size:clamp(23px,3.8vw,34px);font-weight:900;margin-bottom:12px;letter-spacing:-.02em}
.cta p{color:#b9c3ce;margin-bottom:26px;font-size:15px}
.cta .tel{
  display:inline-block;font-size:clamp(32px,6.4vw,52px);font-weight:900;color:var(--sky);
  letter-spacing:.02em;margin-bottom:8px;
}
.cta .hours{color:#93a0ae;font-size:14px;margin-bottom:0}

/* ============ 방문 상담 신청 폼 ============ */
.apply{
  max-width:720px;margin:38px auto 0;text-align:left;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:16px;padding:30px 30px 26px;
}
.apply h3{font-size:19px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-.02em}
.apply .lead{color:#a8b3c0;font-size:13.5px;margin-bottom:22px}

/* 허니팟 — 사람에게는 보이지 않음 */
.apply .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.apply .fields{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}
@media(max-width:700px){.apply .fields{grid-template-columns:1fr}}

.apply .fld{display:flex;flex-direction:column;gap:7px}
.apply .fld span{font-size:13px;font-weight:700;color:var(--sky);letter-spacing:.04em}
/* font-size 는 16px 아래로 내리지 말 것.
   iOS 사파리는 15px 이하 입력칸에 포커스가 가면 페이지를 강제로 확대하고
   빠져나와도 원래 배율로 돌아오지 않는다. */
.apply input[type="text"],
.apply input[type="tel"]{
  width:100%;font:inherit;font-size:16px;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  border-radius:10px;padding:13px 15px;transition:border-color .15s,background .15s;
}
.apply input::placeholder{color:#7d8794}
.apply input:focus{outline:none;border-color:var(--sky);background:rgba(255,255,255,.13)}
.apply input:user-invalid{border-color:#ff9a8b}

.apply button{
  font:inherit;font-size:15.5px;font-weight:800;color:#fff;cursor:pointer;
  background:var(--accent);border:0;border-radius:10px;padding:14px 28px;
  white-space:nowrap;transition:background .15s,transform .15s;
}
.apply button:hover{background:var(--accent-d);transform:translateY(-1px)}
.apply button:active{transform:none}

.apply .agree{
  display:flex;align-items:flex-start;gap:10px;margin-top:20px;
  font-size:12.5px;color:#9aa5b2;line-height:1.7;cursor:pointer;
}
.apply .agree input{flex:0 0 auto;width:16px;height:16px;margin-top:3px;accent-color:var(--sky);cursor:pointer}
.apply .agree a{color:var(--sky);font-weight:700}

/* 선택 입력 묶음 — 문의구분 / 방문희망일시 / 문의사항 */
.apply .opt{margin-top:20px}
.apply .opt-h{font-size:13px;font-weight:700;color:var(--sky);letter-spacing:.04em;margin-bottom:9px}
.apply .opt-h em{font-style:normal;font-weight:400;color:#7d8794;letter-spacing:0}

.apply .purpose{display:flex;flex-wrap:wrap;gap:8px}
.apply .purpose label{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  font-size:13.5px;color:#c4ccd6;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);
  border-radius:999px;padding:9px 15px;transition:border-color .15s,background .15s;
}
.apply .purpose label:hover{border-color:var(--sky);background:rgba(255,255,255,.1)}
.apply .purpose input{width:15px;height:15px;accent-color:var(--sky);cursor:pointer}
.apply .purpose label:has(input:checked){border-color:var(--sky);background:rgba(70,165,230,.16);color:#dbe9f7}

.apply .visit{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:700px){.apply .visit{grid-template-columns:1fr}}
/* 위와 같은 이유로 16px 유지 (iOS 자동 확대 방지) */
.apply input[type="date"],
.apply input[type="time"],
.apply textarea{
  width:100%;font:inherit;font-size:16px;color:#fff;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  border-radius:10px;padding:13px 15px;transition:border-color .15s,background .15s;
}
.apply textarea{resize:vertical;min-height:82px;line-height:1.6}
.apply textarea::placeholder{color:#7d8794}
.apply input[type="date"]:focus,
.apply input[type="time"]:focus,
.apply textarea:focus{outline:none;border-color:var(--sky);background:rgba(255,255,255,.13)}
/* 어두운 배경이라 날짜·시간 피커 아이콘이 검게 묻힌다 */
.apply input[type="date"]::-webkit-calendar-picker-indicator,
.apply input[type="time"]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.6;cursor:pointer}

/* 접수 결과 안내 — lead.js 가 .form-msg 에 ok/err 클래스를 붙인다 */
.apply .form-msg{
  margin-top:18px;padding:13px 16px;border-radius:10px;
  font-size:14px;font-weight:700;line-height:1.6;white-space:pre-line;
  background:rgba(255,255,255,.09);color:#dbe3ec;border:1px solid rgba(255,255,255,.16);
}
.apply .form-msg:empty{display:none}
.apply .form-msg.ok{background:rgba(70,165,230,.16);border-color:rgba(70,165,230,.5);color:#cfe6fa}
.apply .form-msg.err{background:rgba(255,138,120,.14);border-color:rgba(255,138,120,.5);color:#ffcfc6}

/* ============ CTA — 밝은 변형 (.cta.soft) ============ */
/* 브랜드가 짙은 유채색(와인 등)인 단지는 섹션 전체를 그 색으로 덮으면
   상담 영역만 지나치게 무거워진다. 그럴 때 쓰는 변형이다.
     · 배경   : --soft (연한 브랜드 톤) → 흰색
     · 제목   : .band 로 감싸면 브랜드 그라데이션 배너가 된다
     · 폼     : 흰 카드 + 밝은 입력칸
   구조·간격은 기본형과 완전히 같고 색만 바뀐다. */
.cta.soft{background:linear-gradient(180deg,var(--soft,var(--bg)) 0%,#fff 34%);color:var(--ink)}
.cta.soft > .wrap > h2{color:var(--navy)}
.cta.soft > .wrap > p{color:var(--gray)}
.cta.soft .tel{color:var(--accent-d)}
.cta.soft .hours{color:var(--gray)}

/* 제목 배너 — 기본형에는 없고 .soft 에서만 쓴다.
   ⚠ 그라데이션 끝을 --accent 로 두면 안 된다. --accent 는 '면에 칠하는 색'이라
     밝은 브랜드(하늘색 계열)에서는 흰 글씨 대비가 4.5:1 아래로 떨어진다.
     흰 배경용으로 어둡게 잡아 둔 --accent-d 로 끝내고, 더 밝은 끝을 쓰고 싶으면
     --accent-l 을 따로 지정하되 흰색 대비 4.5:1 이상인 값만 넣을 것. */
.cta .band{
  background:linear-gradient(135deg,var(--navy) 0%,var(--accent-d) 60%,var(--accent-l,var(--accent-d)) 100%);
  border-radius:16px;padding:34px 30px;margin-bottom:34px;color:#fff;
}
.cta .band .eyebrow{font-size:12px;letter-spacing:.22em;font-weight:700;color:rgba(255,255,255,.78);margin-bottom:10px}
.cta .band h2{color:#fff;margin-bottom:8px}
.cta .band p{color:rgba(255,255,255,.9);margin-bottom:0}
.cta .band .marks{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.cta .band .marks span{
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  border-radius:999px;padding:6px 13px;font-size:12.5px;font-weight:700;
}
@media(max-width:640px){.cta .band{padding:26px 20px;margin-bottom:26px}}

/* ---- 상담 섹션 2단 배치 ----
   왼쪽에 단지 정보와 연락처, 오른쪽에 상담폼을 둔다.
   좁은 화면에서는 위아래로 쌓이므로 1단을 기본으로 잡는다. */
.cta .lead2{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
@media(min-width:900px){.cta .lead2{grid-template-columns:1fr 1.1fr;gap:36px}}
/* 2단에서는 배너가 옆 칸과 나란히 서므로 아래 여백이 필요 없다 */
.cta .lead2 .band{margin-bottom:0}
.cta .lead2 .band h2{font-size:clamp(21px,2.6vw,28px)}

/* 연락처 — 배지 아래에 선을 긋고 전화·상담시간·카톡을 한 덩어리로 둔다.
   .cta.soft .tel 은 흰 배경용 색이라 배너 안에서는 흰색으로 되돌린다. */
.cta .band .band-contact{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.22)}
.cta .band .band-contact .tel{display:block;color:#fff;font-size:clamp(28px,4.6vw,40px);margin-bottom:4px}
.cta .band .band-contact .hours{color:rgba(255,255,255,.78);font-size:13.5px;margin-bottom:0}
.cta .band .band-kakao{
  display:block;margin-top:16px;padding:13px 16px;border-radius:10px;
  background:#FEE500;color:#3C1E1E;font-weight:800;font-size:14.5px;text-decoration:none;
}
.cta .band .band-kakao:hover{background:#f2d900}


/* 폼을 흰 카드로 */
.cta.soft .apply{background:#fff;border:1px solid var(--line);box-shadow:0 20px 48px rgba(0,0,0,.08)}
.cta.soft .apply h3{color:var(--navy)}
.cta.soft .apply .lead{color:var(--gray)}
.cta.soft .apply .fld span,
.cta.soft .apply .opt-h{color:var(--accent-d)}
.cta.soft .apply .opt-h em{color:#9aa1ab}
.cta.soft .apply input[type="text"],
.cta.soft .apply input[type="tel"],
.cta.soft .apply input[type="date"],
.cta.soft .apply input[type="time"],
.cta.soft .apply textarea{color:var(--ink);background:#fbfaf8;border-color:var(--line)}
.cta.soft .apply input::placeholder,
.cta.soft .apply textarea::placeholder{color:#a9b0b8}
.cta.soft .apply input:focus,
.cta.soft .apply textarea:focus{border-color:var(--accent);background:#fff}
/* 밝은 배경에서는 피커 아이콘을 반전시키면 안 보인다 */
.cta.soft .apply input[type="date"]::-webkit-calendar-picker-indicator,
.cta.soft .apply input[type="time"]::-webkit-calendar-picker-indicator{filter:none;opacity:.75}
.cta.soft .apply .purpose label{color:var(--gray);background:#fbfaf8;border-color:var(--line)}
.cta.soft .apply .purpose label:hover{border-color:var(--accent);background:#fff}
.cta.soft .apply .purpose label:has(input:checked){border-color:var(--accent);background:var(--soft-tint,#f6f5f2);color:var(--accent-d)}
.cta.soft .apply .purpose input,
.cta.soft .apply .agree input{accent-color:var(--accent)}
/* 흰 카드 위에서는 --accent 가 밝은 브랜드에서 대비 미달이다 (예: #0085ad + 흰 글씨 = 4.24:1).
   버튼 글씨는 15.5px 굵게라 '큰 글씨' 예외가 적용되지 않으므로 --accent-d 를 쓴다. */
.cta.soft .apply button{background:var(--accent-d)}
.cta.soft .apply button:hover{background:var(--navy)}
.cta.soft .apply .agree{color:var(--gray)}
.cta.soft .apply .agree a{color:var(--accent-d)}
.cta.soft .apply .form-msg{background:#f6f5f2;border-color:var(--line);color:var(--ink)}
.cta.soft .apply .form-msg.ok{background:var(--soft-tint,#f6f5f2);border-color:var(--accent);color:var(--accent-d)}
.cta.soft .apply .form-msg.err{background:#fdf0ed;border-color:#e8a99b;color:#a8442e}

/* ============ footer ============ */
footer{background:#0b1f30;color:#8b939f;font-size:12.5px;padding:46px 0 40px}
footer .co{color:#c5cdd7;font-size:14.5px;font-weight:800;margin-bottom:14px;letter-spacing:.02em}
footer p{margin-bottom:7px;line-height:1.85}
footer a{color:#a8b1bd}
footer a:hover{color:#fff}
footer .fnav{display:flex;flex-wrap:wrap;gap:6px 20px;margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.08)}
footer .fnav a{color:#a8b1bd;font-size:13px}
footer .warn{margin-top:18px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);color:#6f7885;font-size:12px}

/* ============ floating bar ============ */
.fbar{
  position:fixed;left:0;right:0;bottom:0;z-index:190;display:flex;
  background:var(--navy);border-top:1px solid rgba(255,255,255,.12);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
.fbar a{
  flex:1;text-align:center;color:#fff;font-weight:800;font-size:15px;padding:19px 8px;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.fbar a.main{background:var(--accent)}
.fbar a:hover{background:rgba(255,255,255,.06)}
.fbar a.main:hover{background:var(--accent-d)}
@media(max-width:520px){.fbar a{font-size:14px;padding:17px 6px}}

/* ============ floating bar — 떠 있는 형 (.fbar-v) ============
   기본 .fbar 는 화면 바닥에 딱 붙는 불투명 막대다.
   .fbar-v 는 본문 위에 떠 있는 둥근 버튼 두 개 + 아래로 깔리는 흰 페이드.
   (브레인시티 비스타동원에서 쓰던 형태를 공용 변형으로 옮긴 것)

   마크업
     <nav class="fbar-v"><div class="row">
       <a class="tel-btn" href="tel:…">📞 전화 상담</a>
       <a class="kakao-btn" href="…" target="_blank" rel="noopener">💬 오픈카톡 1:1 문의</a>
     </div></nav>

   ⚠ 컨테이너는 pointer-events:none 이다. 버튼 옆 빈자리에서 아래 본문을
     그대로 스크롤·클릭할 수 있어야 해서다. .row 에서만 되살린다.
   ⚠ .hide 는 complex.js 가 붙인다. 최상단(히어로 위)과 상담폼이 보일 때 내려간다.
     히어로 통계를 가리지 않고, 폼을 채우는 동안 입력칸을 덮지 않기 위한 것이다. */
.fbar-v{
  position:fixed;left:0;right:0;bottom:0;z-index:190;
  padding:12px 16px calc(5px + env(safe-area-inset-bottom,0px));
  background:linear-gradient(to top,#fff 70%,rgba(255,255,255,0));
  pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
}
.fbar-v.hide{opacity:0;transform:translateY(110%)}
.fbar-v .row{display:flex;gap:10px;pointer-events:auto}
@media(min-width:768px){
  .fbar-v{padding:12px 0 calc(20px + env(safe-area-inset-bottom,0px))}
  .fbar-v .row{max-width:var(--wrap);margin:0 auto;padding:0 32px}
}
.fbar-v a{
  flex:1;display:flex;align-items:center;justify-content:center;
  padding:16px 10px;border-radius:14px;
  font-size:14px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;
}
.fbar-v .tel-btn{
  background:linear-gradient(135deg,var(--accent) 0%,var(--sky) 100%);
  color:#fff;box-shadow:0 6px 20px rgba(0,133,173,.42);
  position:relative;overflow:hidden;
}
/* 반짝임 — 버튼 위를 왼쪽에서 오른쪽으로 훑고 지나간다 */
.fbar-v .tel-btn::before{
  content:'';position:absolute;top:0;left:-100%;width:60px;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:fbarShimmer 2.5s infinite;
}
@keyframes fbarShimmer{to{left:200%}}
.fbar-v .kakao-btn{background:#FEE500;color:#3C1E1E;box-shadow:0 4px 14px rgba(0,0,0,.12)}
@media(max-width:360px){
  .fbar-v{padding:10px 10px calc(5px + env(safe-area-inset-bottom,0px))}
  .fbar-v .row{gap:6px}
  .fbar-v a{font-size:12.5px;padding:13px 6px;border-radius:12px;letter-spacing:-.03em}
}
@media(prefers-reduced-motion:reduce){
  .fbar-v,.fbar-v .tel-btn::before{transition:none;animation:none}
}
/* body 기본 여백은 .fbar(64px) 기준이라 이 형태에는 모자라 푸터 끝이 가린다.
   :has() 를 못 쓰는 브라우저는 64px 로 남는데, 아래가 흰 페이드라 티가 크지 않다. */
body:has(.fbar-v){padding-bottom:calc(98px + env(safe-area-inset-bottom,0px))}

/* ============ 모바일 밀도 조정 ============ */
/* 데스크톱 여백을 그대로 두면 히어로만 869px 이라 첫 화면에서 상담 버튼이 안 보인다.
   아래 값들은 360×740(갤럭시 계열) 기준으로 히어로가 한 화면에 들어오도록 맞춘 것이다. */
@media(max-width:640px){
  .wrap{padding:0 18px}

  /* 세로 화면에서는 56vw 가 너무 납작하다. 화면 높이 기준으로 잡는다. */
  .hero{min-height:min(150vw,92svh)}
  .hero .in{padding:calc(24px + var(--hd)) 18px 28px}
  .hero .eyebrow{font-size:11.5px;letter-spacing:.22em;padding:6px 14px;margin-bottom:18px}
  .hero .sub{margin-top:14px}
  .hero .btns{margin-top:26px;gap:10px}
  /* 폭이 제각각이면 지저분해 보인다. 전체폭으로 통일 */
  .hero .btns .btn{width:100%;justify-content:center;padding:15px 20px}
  .stats{margin-top:32px}
  .stats div{padding:16px 8px}

  section{padding:54px 0}
  .sec-h{margin-bottom:32px}
  .sub-h{margin:40px 0 18px}
  .card{padding:24px 20px}
  footer{padding:36px 0 32px}

  /* 평면도 — 여백을 줄여 도면 자체에 폭을 더 준다 */
  .plan .pic{padding:12px}
  .plan .info{padding:20px 18px}
  .plan .top{padding:16px 18px}

  /* 상담폼 — 좁은 화면에서 30px 좌우 여백은 입력칸을 지나치게 좁힌다 */
  .apply{padding:24px 20px 22px}
  .apply .purpose label{padding:11px 15px}   /* 터치 목표 확보 */
  .apply .agree input{width:20px;height:20px}
  .apply button{width:100%;padding:16px 20px}
}

/* ============ reveal ============ */
/* 기본은 '보임'. JS가 정상 동작할 때만 숨겼다가 등장시킨다(스크립트 실패 시 백지 방지). */
.js-rv .rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.js-rv .rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js-rv .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .btn:hover,.card:hover{transform:none}
}