/* ============================================================
   더파크사이드 스위트 — 컴포넌트 CSS
   자료 표준: 부동산_표준_레이아웃.md v1.4 (§1 백본 4분리)
   구조: 하이브리드 스냅 — 서사 섹션은 .panel(100svh 스냅),
         데이터 섹션은 .sec(높이 자유). design2.md §3-5 참고.
   배경: 흰색 단색. 패턴·격자 없음.
   ⚠️ 색·폰트 값은 전부 theme.css 토큰 참조. 하드코딩 금지.
   ============================================================ */

/* ---------- 기본 ---------- */
*,*::before,*::after{ box-sizing:border-box }
html{
  scroll-behavior:smooth; -webkit-text-size-adjust:100%;
  scroll-snap-type:y proximity;      /* proximity = 긴 섹션은 자유 스크롤 */
  background:var(--canvas);
}
body{
  margin:0; background:var(--canvas); color:var(--ink);
  font-family:var(--body); font-weight:400; font-size:17px; line-height:1.78;
  letter-spacing:-.01em; word-break:keep-all; overflow-x:hidden;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit }
input,select,textarea{ font-family:inherit; font-size:16px; color:var(--ink) }

.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter) }
.sec{ padding:var(--sec-pad) 0; background:var(--canvas) }
.sec-soft{ background:var(--canvas-2) }

/* ---------- 섹션 헤드 ---------- */
.eyebrow{
  font-family:var(--display); font-size:13px; letter-spacing:.34em;
  text-transform:uppercase; color:var(--accent); margin:0 0 18px;
}
.sec-title{
  font-weight:800; color:var(--green-brand);
  font-size:clamp(28px,4.2vw,44px); line-height:1.28; letter-spacing:-.035em; margin:0 0 20px;
}
.sec-lead{ color:var(--muted); font-size:17px; max-width:62ch; margin:0 }
.sec-head{ margin-bottom:56px }
.sec-head.center{ text-align:center }
.sec-head.center .sec-lead{ margin:0 auto }

/* ============================================================
   스냅 패널 (서사 섹션)
   ============================================================ */
.panel{
  position:relative; min-height:100svh; background:var(--canvas);
  border-top:1px solid var(--line);
  scroll-snap-align:start; scroll-snap-stop:normal;
  display:flex;
  align-items:center;
  align-items:safe center;   /* 내용이 뷰포트보다 길면 start로 자동 폴백 → 제목이 네비에 안 잘림 */
  padding:calc(var(--nav-h) + 46px) 0 92px;
}
.panel.hero{ border-top:0 }
.panel-inner{ position:relative; z-index:1 }

.panel-eyebrow{
  font-family:var(--display); font-size:13px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--accent); margin:0 0 26px;
}
.panel-title{
  font-weight:800; color:var(--green-brand); margin:0 0 28px;
  font-size:clamp(38px,6.6vw,92px); line-height:1.08; letter-spacing:-.045em; max-width:15ch;
}
.panel-title .hl{ color:var(--accent) }
.panel-lead{
  color:var(--muted); font-size:clamp(16px,1.55vw,21px); line-height:1.74;
  max-width:56ch; margin:0;
}

/* 패널 진입 모션 — 활성화될 때마다 재생 (레퍼런스 동작) */
.anim{ opacity:0; transform:translateY(42px); transition:opacity .62s var(--ease-out), transform .62s var(--ease-out) }
.panel.in .anim{ opacity:1; transform:none }
.panel.in .anim:nth-child(1){ transition-delay:0s }
.panel.in .anim:nth-child(2){ transition-delay:calc(var(--anim-step) * 1) }
.panel.in .anim:nth-child(3){ transition-delay:calc(var(--anim-step) * 2) }
.panel.in .anim:nth-child(4){ transition-delay:calc(var(--anim-step) * 3) }
.panel.in .anim:nth-child(5){ transition-delay:calc(var(--anim-step) * 4) }

/* 패널 내부 — 번호 리스트 (핵심 가치 / 입지) */
.panel-points{ list-style:none; margin:44px 0 0; padding:0; display:grid; gap:2px; counter-reset:pp }
.panel-points li{
  counter-increment:pp; position:relative; padding:22px 0 22px 78px;
  border-top:1px solid var(--line);
}
.panel-points li:last-child{ border-bottom:1px solid var(--line) }
.panel-points li::before{
  content:counter(pp,decimal-leading-zero); position:absolute; left:0; top:23px;
  font-family:var(--display); font-size:15px; letter-spacing:.16em; color:var(--accent);
}
.panel-points b{
  display:block; font-size:clamp(18px,1.9vw,24px); font-weight:700; color:var(--green-brand);
  letter-spacing:-.03em; margin-bottom:6px;
}
.panel-points span{ font-size:15.5px; color:var(--muted); line-height:1.72 }

/* 패널 안에서 텍스트와 렌더를 나란히 놓는 2단 (텍스트만 있는 구간 방지) */
.panel-split{ display:grid; grid-template-columns:1.02fr .98fr; gap:56px; align-items:center }
.panel-media{ margin:0 }
/* 세로 렌더가 패널을 늘리지 않도록 비율 고정 */
.panel-media img{ width:100%; aspect-ratio:4/3; object-fit:cover; box-shadow:var(--shadow) }
/* 구성도·배치도는 잘리면 범례를 읽을 수 없으므로 전체를 보여준다 */
.panel-media.contain img{ object-fit:contain; background:var(--surface-2); box-shadow:none; border:1px solid var(--line) }

/* 컴팩트 항목 리스트 (단지 구성 8기능) */
.panel-list{ list-style:none; margin:28px 0 0; padding:0; border-top:1px solid var(--line) }
.panel-list li{
  display:flex; gap:16px; align-items:baseline; justify-content:space-between;
  padding:12px 2px; border-bottom:1px solid var(--line);
}
.panel-list b{ font-size:16px; font-weight:700; color:var(--green-brand); letter-spacing:-.03em }
.panel-list span{ font-size:14px; color:var(--muted); text-align:right }

/* 패널 내부 — 칩 나열 (커뮤니티 어메니티) */
.chips{ display:flex; flex-wrap:wrap; gap:9px; margin:36px 0 0; padding:0; list-style:none }
.chips li{
  padding:10px 18px; border:1px solid var(--line); font-size:14.5px; color:var(--ink);
  border-radius:var(--radius-btn); transition:border-color .25s, color .25s, background .25s;
}
.chips li:hover{ border-color:var(--accent); color:var(--green-light); background:var(--surface-2) }
.perk{ margin:36px 0 0; padding:28px 32px; border-left:2px solid var(--accent); background:var(--surface-2) }
.perk h4{ margin:0 0 12px; font-size:17px; color:var(--green-light); letter-spacing:-.02em }
.perk ul{ margin:0; padding-left:18px; color:var(--muted); font-size:15px }
.perk li{ margin-bottom:6px }
.perk .note{ margin:14px 0 0; font-size:12.5px; color:rgba(var(--fg-rgb),.44) }

/* ---------- 우측 도트 네비 ---------- */
.dots{
  position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:118;
  display:flex; flex-direction:column; gap:15px;
}
.dots button{
  width:9px; height:9px; border-radius:50%; background:var(--dot-idle); padding:0;
  transition:transform .32s var(--ease), background .32s var(--ease); position:relative;
}
.dots button::after{
  content:attr(data-label); position:absolute; right:20px; top:50%; transform:translateY(-50%);
  white-space:nowrap; font-size:12px; font-weight:700; color:var(--green-light);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.dots button:hover{ background:var(--green-mid) }
.dots button:hover::after{ opacity:1 }
.dots button.on{ background:var(--accent); transform:scale(1.6) }

/* ---------- 상단 진행바 ---------- */
.progress{
  position:fixed; inset:0 0 auto 0; height:2px; z-index:140;
  background:var(--accent); transform:scaleX(0); transform-origin:left center;
}

/* ---------- 네비 ---------- */
.nav{
  /* 드로어(130)보다 위 — 열려 있어도 로고·닫기(X)가 보여야 한다 */
  position:fixed; inset:0 0 auto 0; z-index:135; height:var(--nav-h);
  display:flex; align-items:center;
  background:transparent; transition:background .35s var(--ease), box-shadow .35s var(--ease);
}
/* 히어로 영상 위에 떠 있을 땐 site.js가 .on-dark를 붙여 흰 글자로 전환한다 */
.nav.solid{ background:var(--canvas); box-shadow:var(--shadow-nav) }
.nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px }
.nav-logo{ display:flex; align-items:center; gap:11px }
.nav-logo img{ height:26px; width:auto; transition:filter .35s var(--ease) }
.nav.on-dark .nav-logo img{ filter:brightness(1.3) }
.nav-logo span{
  font-family:var(--display); font-size:17px; letter-spacing:.18em;
  color:var(--green-brand); white-space:nowrap; transition:color .35s var(--ease);
}
.nav-logo span em{ font-style:normal; color:var(--accent) }
.nav.on-dark .nav-logo span em{ color:var(--green-light) }
.nav-menu{ display:flex; align-items:center; gap:30px }
.nav-menu a{
  font-size:15px; font-weight:600; color:rgba(var(--fg-rgb),.80); letter-spacing:-.02em;
  position:relative; padding:6px 0; transition:color .2s;
}
.nav-menu a:hover{ color:var(--ink) }
.nav-menu a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent); transition:width .3s var(--ease);
}
.nav-menu a:hover::after{ width:100% }
.nav-cta{
  padding:11px 22px; background:var(--green-cta); color:var(--on-cta) !important;
  font-size:14px; font-weight:700; border-radius:var(--radius-btn);
  transition:background .25s var(--ease);
}
.nav-cta::after{ display:none !important }
.nav-cta:hover{ background:var(--green-mid) }
.burger{ display:none; width:42px; height:42px; position:relative }
.burger span{
  position:absolute; left:9px; width:24px; height:1.5px; background:var(--ink);
  transition:transform .3s var(--ease), opacity .2s;
}
.burger span:nth-child(1){ top:15px } .burger span:nth-child(2){ top:21px } .burger span:nth-child(3){ top:27px }
.burger.on span:nth-child(1){ transform:translateY(6px) rotate(45deg) }
.burger.on span:nth-child(2){ opacity:0 }
.burger.on span:nth-child(3){ transform:translateY(-6px) rotate(-45deg) }

.drawer{
  position:fixed; inset:0; z-index:130; background:var(--canvas);
  display:flex; flex-direction:column; justify-content:center; gap:6px;
  padding:var(--nav-h) 32px 0;   /* 상단 네비(로고·닫기) 영역을 비워둔다 */
  opacity:0; visibility:hidden; transition:opacity .34s var(--ease), visibility .34s;
}
.drawer.on{ opacity:1; visibility:visible }
.drawer a{
  font-family:var(--display); font-size:26px; color:var(--green-brand); padding:14px 0;
  border-bottom:1px solid var(--line);
}
.drawer a.drawer-cta{ color:var(--accent); border-bottom:0; margin-top:16px; font-weight:600 }

/* ---------- 히어로 (패널 · .on-dark 스코프) ---------- */
.hero{ align-items:flex-end; overflow:hidden; background:var(--green-deep) }
/* 밝은 하늘 구간 위에서도 읽히도록 서브카피 대비를 올린다 */
.hero .panel-lead{ color:var(--white-soft) }
.hero-media{ position:absolute; inset:0; z-index:0 }
.hero-media video,.hero-media img{
  width:100%; height:100%; object-fit:cover; animation:kenburns 22s ease-out both;
}
@keyframes kenburns{ from{ transform:scale(1) } to{ transform:scale(1.08) } }
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(var(--scrim-rgb),.76) 0%, rgba(var(--scrim-rgb),.40) 48%, rgba(var(--scrim-rgb),.08) 78%),
    linear-gradient(180deg, rgba(var(--scrim-rgb),.66) 0%, rgba(var(--scrim-rgb),.22) 30%, rgba(var(--scrim-rgb),.58) 74%, rgba(var(--scrim-rgb),.92) 100%);
}
.hero-chips{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 34px }
.chip{
  padding:8px 16px; border:1px solid rgba(var(--fg-rgb),.30); border-radius:var(--radius-btn);
  font-size:13.5px; font-weight:600; letter-spacing:-.01em; color:rgba(var(--fg-rgb),.94);
  backdrop-filter:blur(3px); background:rgba(var(--fg-rgb),.06);
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:16px 34px; font-size:16px; font-weight:700; letter-spacing:-.02em;
  border-radius:var(--radius-btn); transition:transform .22s var(--ease), background .25s, color .25s, box-shadow .25s;
}
.btn-primary{ background:var(--green-cta); color:var(--on-cta) }
.btn-primary:hover{ background:var(--green-mid); transform:translateY(-2px); box-shadow:var(--shadow-lift) }
.btn-ghost{ background:transparent; color:var(--ink); border:1px solid rgba(var(--fg-rgb),.42) }
.btn-ghost:hover{ background:rgba(var(--fg-rgb),.10); transform:translateY(-2px) }
.btn-block{ width:100%; padding:18px 24px }
.hero-note{ margin:26px 0 0; font-size:12.5px; color:rgba(var(--fg-rgb),.54); letter-spacing:-.01em }
.scroll-hint{
  position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:2;
  width:22px; height:34px; border:1px solid rgba(var(--fg-rgb),.42); border-radius:12px;
}
.scroll-hint::after{
  content:""; position:absolute; left:50%; top:8px; width:2px; height:6px; margin-left:-1px;
  background:rgba(var(--fg-rgb),.8); border-radius:2px; animation:bounceY 1.8s infinite;
}
@keyframes bounceY{ 0%,100%{ transform:translateY(0); opacity:1 } 50%{ transform:translateY(8px); opacity:.3 } }

/* ---------- 퀵폼 (DB①) ---------- */
.quick{ background:var(--canvas-2); border-bottom:1px solid var(--line); padding:30px 0 }
.quick-inner{ display:flex; align-items:center; gap:28px; flex-wrap:wrap }
.quick-copy{ flex:1 1 260px; min-width:0 }
.quick-copy strong{ display:block; font-size:20px; color:var(--green-brand); font-weight:700; letter-spacing:-.03em }
.quick-copy span{ font-size:14px; color:var(--muted) }
.quick form{ flex:2 1 460px; display:flex; gap:10px; flex-wrap:wrap; margin:0 }
.quick input{
  flex:1 1 150px; min-width:0; padding:15px 16px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); border-radius:var(--radius-btn);
}
.quick input::placeholder{ color:rgba(var(--fg-rgb),.42) }
.quick input:focus{ outline:none; border-color:var(--green-cta) }
.quick .btn{ flex:0 0 auto; padding:15px 26px }
.quick .btn-ghost{ border-color:var(--green-cta); color:var(--green-brand) }

/* ---------- STAT BAR ---------- */
.statbar{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); margin-top:52px;
}
.statbar div{ background:var(--surface); padding:30px 16px; text-align:center }
.statbar dt{ font-size:13px; color:var(--muted); letter-spacing:.04em; margin:0 0 10px }
.statbar dd{
  margin:0; font-family:var(--display); font-size:clamp(22px,2.7vw,30px);
  font-weight:500; color:var(--green-light); line-height:1.2;
}
.statbar dd small{ font-family:var(--body); font-size:14px; font-weight:600; color:var(--muted) }

/* ---------- 2단 split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center }
.split.wide-img{ grid-template-columns:1.15fr 1fr }
.split-media figure{ margin:0 }
.split-media img{ width:100%; box-shadow:var(--shadow) }
.cap{ margin:12px 0 0; font-size:12.5px; color:var(--muted); letter-spacing:-.01em }

.spec-list{ margin:0; border-top:1px solid var(--line) }
.spec-list div{ display:flex; gap:20px; padding:15px 2px; border-bottom:1px solid var(--line) }
.spec-list dt{ flex:0 0 118px; font-size:14.5px; font-weight:700; color:var(--green-light) }
.spec-list dd{ margin:0; font-size:15.5px; color:var(--ink) }

/* ---------- 평형 & 타입 ---------- */
.size-chips{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:44px }
.size-chip{
  padding:11px 22px; border:1px solid var(--green-cta); color:var(--green-light);
  font-size:14.5px; font-weight:700; border-radius:var(--radius-btn); background:var(--surface);
}
.grid-2{ display:grid; grid-template-columns:repeat(2,1fr); gap:28px }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px }
.grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.type-card{ background:var(--surface); box-shadow:var(--shadow-card); transition:transform .3s var(--ease), box-shadow .3s var(--ease) }
.type-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-lift) }
.type-card img{ width:100%; aspect-ratio:16/10; object-fit:cover }
.type-body{ padding:20px 22px 22px }
.type-body h3{ font-family:var(--display); font-size:28px; font-weight:500; color:var(--green-light); margin:0 0 2px }
.type-body h3 small{ font-family:var(--body); font-size:13px; font-weight:700; color:var(--muted); letter-spacing:.08em }
.type-area{ margin:13px 0 0; border-top:1px solid var(--line) }
.type-area div{ display:flex; justify-content:space-between; gap:8px; padding:8px 0; border-bottom:1px solid var(--line) }
.type-area dt{ font-size:13px; color:var(--muted); white-space:nowrap }
.type-area dd{ margin:0; font-size:13.5px; font-weight:700; color:var(--ink); white-space:nowrap }
.type-note{
  margin-top:36px; padding:24px 28px; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid var(--accent);
  font-size:14.5px; color:var(--muted);
}
.type-note strong{ color:var(--green-brand) }

/* ---------- 갤러리 ---------- */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px }
.gallery figure{ margin:0; position:relative; overflow:hidden; cursor:zoom-in; background:var(--surface-2) }
.gallery img{ width:100%; height:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s var(--ease) }
.gallery figure:hover img{ transform:scale(1.06) }
.gallery figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:26px 16px 12px;
  background:linear-gradient(180deg,transparent,rgba(var(--scrim-deep-rgb),.86));
  color:var(--white); font-size:12.5px; letter-spacing:-.01em;
}
.gallery .tall{ grid-row:span 2 }
.gallery .tall img{ aspect-ratio:2/3 }
.gallery .wide{ grid-column:span 2 }
.gallery .wide img{ aspect-ratio:8/3 }

/* ---------- 시행·시공 ---------- */
.developer{
  padding:20px 24px; border:1px solid var(--line); border-left:2px solid var(--accent);
  background:var(--surface); transition:background .3s var(--ease);
}
.developer:hover{ background:var(--surface-2) }
.developer h4{ margin:0 0 6px; font-size:16px; color:var(--green-brand); letter-spacing:-.02em }
.developer h4 em{
  font-family:var(--display); font-style:normal; font-weight:500; font-size:11.5px;
  letter-spacing:.18em; color:var(--accent); display:block; margin-bottom:4px;
}
.developer p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.66 }

/* ---------- 폼 (DB②) ---------- */
.form-card{ position:relative; background:var(--surface); box-shadow:var(--shadow); padding:48px 44px }
.lead-form .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px }
.lead-form label{ display:block; font-size:14px; font-weight:700; color:var(--green-brand); margin:0 0 8px }
.lead-form .field{ margin-bottom:20px }
.lead-form input,.lead-form textarea{
  width:100%; padding:15px 16px; border:1px solid var(--line); background:var(--surface-2);
  border-radius:var(--radius-btn); transition:border-color .2s, background .2s;
}
.lead-form textarea{ min-height:132px; resize:vertical; line-height:1.7 }
.lead-form input:focus,.lead-form textarea:focus{ outline:none; border-color:var(--green-cta); background:var(--surface) }
.agree{ display:flex; align-items:flex-start; gap:10px; margin:6px 0 22px; font-size:13.5px; color:var(--muted) }
.agree input{ width:auto; margin-top:4px; accent-color:var(--green-cta) }
.form-note{ margin:14px 0 0; font-size:12.5px; color:var(--muted); text-align:center }
.contact-row{ display:flex; gap:10px; margin-top:16px }
.contact-btn{
  flex:1 1 0; min-width:0; white-space:nowrap; padding:14px 10px; text-align:center;
  border:1px solid var(--green-cta); color:var(--green-light); font-size:14.5px; font-weight:700;
  border-radius:var(--radius-btn); transition:background .22s, color .22s;
}
.contact-btn:hover{ background:var(--green-cta); color:var(--on-cta) }

/* 제출 완료 전체화면 오버레이 (표준 §7) */
.done-overlay{
  position:fixed; inset:0; z-index:600; display:none; place-items:center; padding:24px;
  background:rgba(var(--scrim-deep-rgb),.72); backdrop-filter:blur(4px);
}
.done-overlay.on{ display:grid }
.done-card{
  background:var(--surface); max-width:420px; width:100%; padding:48px 36px 40px; text-align:center;
  box-shadow:var(--shadow-lift); animation:fadeUp .4s var(--ease) both;
}
@keyframes fadeUp{ from{ opacity:0; transform:translateY(26px) } to{ opacity:1; transform:none } }
.done-card .tick{
  width:62px; height:62px; margin:0 auto 22px; border-radius:50%;
  display:grid; place-items:center; background:var(--green-cta); color:var(--on-cta); font-size:28px;
}
.done-card h3{ font-family:var(--display); font-size:26px; font-weight:500; color:var(--green-brand); margin:0 0 12px }
.done-card p{ margin:0 0 26px; font-size:15px; color:var(--muted) }

/* ---------- 푸터 (.on-dark 스코프) ---------- */
.footer{ background:var(--green-deep); color:var(--muted); padding:70px 0 40px; font-size:14px }
.footer-top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; margin-bottom:38px }
.footer img{ height:58px; width:auto; margin-bottom:20px; filter:brightness(1.35) }
.footer-info{ margin:0; display:grid; gap:6px }
.footer-info b{ color:var(--green-brand); font-weight:600 }
.footer-links{ display:flex; gap:20px; flex-wrap:wrap }
.footer-links a:hover{ color:var(--accent) }
.disclaimer{
  border-top:1px solid var(--line); padding-top:26px;
  font-size:12.5px; line-height:1.8; color:rgba(var(--fg-rgb),.42);
}

/* ---------- 플로팅 ---------- */
.fab{ position:fixed; right:20px; bottom:20px; z-index:119; display:grid; gap:10px }
.fab a,.fab button{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--green-cta); color:var(--on-cta); box-shadow:var(--shadow-lift);
  font-size:12px; font-weight:700; line-height:1.2; text-align:center;
  transition:transform .24s var(--ease), background .24s;
}
.fab a:hover,.fab button:hover{ transform:translateY(-3px); background:var(--green-mid) }
.fab .to-top{
  background:var(--surface); color:var(--green-light); border:1px solid var(--line);
  opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s, transform .24s;
}
.fab .to-top.show{ opacity:1; visibility:visible }

/* 모바일 하단 상담바 (.on-dark 스코프) */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:125; display:none;
  background:var(--green-deep); border-top:1px solid var(--line);
}
.mobile-bar a{
  flex:1 1 0; min-width:0; white-space:nowrap; text-align:center; padding:16px 6px;
  color:var(--ink); font-size:15px; font-weight:700;
}
.mobile-bar a+a{ border-left:1px solid var(--line) }
.mobile-bar a.main{ background:var(--green-cta); color:var(--on-cta) }

/* ---------- 확대 모달 ---------- */
.modal{
  position:fixed; inset:0; z-index:500; display:none; place-items:center; padding:28px;
  background:rgba(var(--scrim-deep-rgb),.94);
}
.modal.on{ display:grid }
.modal img{ max-width:100%; max-height:86vh; object-fit:contain }
.modal figcaption{ margin-top:14px; text-align:center; color:var(--white-soft); font-size:13px }
.modal-close{ position:absolute; top:20px; right:24px; color:var(--white); font-size:32px; line-height:1 }
.zoomable{ cursor:zoom-in }

/* ---------- reveal (일반 스크롤 섹션) ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.reveal.in{ opacity:1; transform:none }
.reveal-left{ opacity:0; transform:translateX(-34px); transition:opacity .85s var(--ease), transform .85s var(--ease) }
.reveal-right{ opacity:0; transform:translateX(34px); transition:opacity .85s var(--ease), transform .85s var(--ease) }
.reveal-left.in,.reveal-right.in{ opacity:1; transform:none }
.stagger>*{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease) }
.stagger.in>*{ opacity:1; transform:none }
.stagger.in>*:nth-child(1){ transition-delay:.00s }
.stagger.in>*:nth-child(2){ transition-delay:.09s }
.stagger.in>*:nth-child(3){ transition-delay:.18s }
.stagger.in>*:nth-child(4){ transition-delay:.27s }
.stagger.in>*:nth-child(5){ transition-delay:.36s }
.stagger.in>*:nth-child(6){ transition-delay:.45s }
.stagger.in>*:nth-child(7){ transition-delay:.54s }
.stagger.in>*:nth-child(8){ transition-delay:.63s }

@media (prefers-reduced-motion:reduce){
  html{ scroll-snap-type:none; scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .reveal,.reveal-left,.reveal-right,.stagger>*,.anim{ opacity:1; transform:none }
}

/* ---------- 반응형 ---------- */
@media (max-width:920px){
  .nav-menu{ display:none }
  .burger{ display:block }
}
@media (max-width:1024px){
  :root{ --sec-pad:82px }
  .split{ grid-template-columns:1fr; gap:40px }
  .split.wide-img{ grid-template-columns:1fr }
  .panel-split{ grid-template-columns:1fr; gap:40px }
  .grid-3{ grid-template-columns:1fr 1fr }
  .grid-4{ grid-template-columns:repeat(2,1fr) }
  .statbar{ grid-template-columns:repeat(3,1fr) }
  .gallery{ grid-template-columns:repeat(2,1fr) }
  .gallery .wide{ grid-column:span 2 }
  .gallery .tall{ grid-row:span 1 }
  .gallery .tall img{ aspect-ratio:4/3 }
  .dots{ display:none }
}
@media (max-width:760px){
  body{ font-size:16px }
  :root{ --sec-pad:64px; --gutter:20px; --anim-step:.09s }
  .panel{ padding:calc(var(--nav-h) + 34px) 0 118px }
  .panel-points li{ padding:18px 0 18px 58px }
  .panel-points li::before{ top:20px; font-size:13px }
  .panel-split{ grid-template-columns:1fr; gap:32px }
  .panel-list li{ flex-direction:column; gap:3px; align-items:flex-start }
  .panel-list span{ text-align:left }
  .grid-3,.grid-2{ grid-template-columns:1fr }
  .grid-4{ grid-template-columns:repeat(2,1fr); gap:12px }
  .type-card img{ aspect-ratio:4/3 }
  .type-body{ padding:16px 14px 18px }
  .type-body h3{ font-size:23px }
  .type-area dt,.type-area dd{ font-size:12.5px }
  .statbar{ grid-template-columns:repeat(2,1fr) }
  .statbar div{ padding:22px 12px }
  .quick form{ flex-direction:column }
  .quick .btn{ width:100% }
  .lead-form .row{ grid-template-columns:1fr }
  .form-card{ padding:34px 22px }
  .sec-head{ margin-bottom:38px }
  .footer{ padding-bottom:96px }
  .mobile-bar{ display:flex }
  .drawer{ padding-bottom:62px }
  .fab{ bottom:82px; right:14px }
  .fab a.call{ display:none }
  .scroll-hint{ display:none }
  .nav-logo img{ height:22px }
  .nav-logo span{ font-size:14px; letter-spacing:.14em }
  /* 세로 화면에선 카피가 밝은 하늘 구간에 걸리므로 스크림을 더 깊게 */
  .hero-media::after{
    background:linear-gradient(180deg,
      rgba(var(--scrim-rgb),.74) 0%, rgba(var(--scrim-rgb),.50) 38%,
      rgba(var(--scrim-rgb),.72) 76%, rgba(var(--scrim-rgb),.94) 100%);
  }
}
@media (max-width:360px){
  .contact-btn,.mobile-bar a{ font-size:13px }
  .chip{ font-size:12.5px; padding:7px 13px }
}