/* 그랑시티 필하우스 — "입면(Elevation)" 디자인 시스템
   style.css(백석 계승 구조) 위에 얹는 공개 페이지 전용 레이어. 관리자(/manage)는 이 파일을 쓰지 않는다. */
@font-face{
  font-family:'Big Shoulders Display';font-style:normal;font-weight:700 900;font-display:swap;
  src:url(/assets/fonts/bigshoulders-latin.woff2) format('woff2');
  unicode-range:U+0020-007E,U+00B7,U+2013,U+2014;
}
:root{
  --deep:#0d3b36; --deep-2:#092b27; --amber:#f4b942; --amber-deep:#d99a1c; --on-amber:#241800;
  --on-deep:#eaf3ee; --on-deep-2:#a9c7bd;
  --concrete:#eceee9; --panel:#f8f9f6;
  /* style.css 토큰 재지정 */
  --navy:var(--deep); --blue:var(--deep); --blue-soft:#dde7e1; --call:var(--amber); --deal:var(--amber); --deal-deep:#7a5200;
  --ink:#12211e; --muted:#51605c; --line:#cfd6cf; --bg:var(--concrete); --card:var(--panel);
  --radius:3px; --shadow:none;
  --num:'Big Shoulders Display','Pretendard Variable',Pretendard,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
html{scroll-behavior:smooth;background:#fff}
body{background:var(--concrete);font-feature-settings:'tnum' 1;-webkit-font-smoothing:antialiased}
::selection{background:var(--amber);color:var(--on-amber)}
:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px}
input,textarea,select{caret-color:var(--deep)}
a{text-underline-offset:3px}

/* ── 헤더·탑바 ── */
.app-header{background:var(--deep);border-bottom:0;padding:10px 14px;backdrop-filter:none}
.brand{color:var(--on-deep);font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.brand-logo{display:none}
.brand::before{content:"";flex:0 0 14px;width:14px;height:20px;
  background:
    linear-gradient(var(--amber),var(--amber)) 0 0/6px 4px no-repeat,
    linear-gradient(var(--on-deep-2),var(--on-deep-2)) 8px 0/6px 4px no-repeat,
    linear-gradient(var(--on-deep-2),var(--on-deep-2)) 0 8px/6px 4px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 8px 8px/6px 4px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 0 16px/6px 4px no-repeat,
    linear-gradient(var(--on-deep-2),var(--on-deep-2)) 8px 16px/6px 4px no-repeat}
.head-right{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.lift{display:inline-flex;align-items:baseline;gap:1px;min-width:44px;justify-content:center;padding:4px 8px 3px;
  border:1px solid rgba(234,243,238,.28);border-radius:2px;color:var(--amber);
  font-family:var(--num);font-weight:800;font-size:17px;line-height:1;letter-spacing:.02em}
.lift small{font-size:11px;font-weight:700;color:var(--on-deep-2)}
.head-call{background:var(--amber);color:var(--on-amber);border-radius:2px;padding:7px 12px;font-weight:800}
.deal-topbar{background:var(--amber);color:var(--on-amber);font-weight:700;padding:7px 12px;font-size:12.5px}
.deal-topbar b{font-family:var(--num);font-size:16px;font-weight:800;letter-spacing:.01em}
.deal-topbar .live-dot{background:var(--deep)}

/* ── 하단 탭·전화 바 ── */
.tabbar{background:var(--deep);border-top:0}
.tab{color:var(--on-deep-2);font-weight:600}
.tab.active{color:var(--amber)}
.ctabar{background:var(--concrete);border-top:1px solid var(--line)}
.cta-call{background:var(--amber)!important;color:var(--on-amber)!important;border-radius:3px!important;font-weight:800}
.cta-call svg{color:var(--on-amber)}

/* ── 홈: 입면 히어로 ── */
.elev{position:relative;overflow:hidden;background:var(--deep);color:var(--on-deep);
  min-height:calc(100svh - 86px - var(--tab-h) - var(--cta-h));display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px 16px 22px}
.elev-copy{position:relative;z-index:2;max-width:calc(100% - 132px)}
.elev h1{margin:0;font-size:30px;line-height:1.16;font-weight:800;letter-spacing:-.035em;text-wrap:balance}
.elev-price{display:flex;align-items:flex-end;gap:2px;margin:10px 0 0;color:var(--amber);line-height:.8}
.elev-price .n{font-family:var(--num);font-weight:900;font-size:176px;letter-spacing:-.02em;margin-left:-6px}
.elev-price .u{font-size:44px;font-weight:900;letter-spacing:-.04em;line-height:1;padding-bottom:10px;white-space:nowrap}
.elev-sub{margin:16px 0 0;font-size:14px;line-height:1.55;color:var(--on-deep);font-weight:500}
.elev-sub b{font-weight:800}
/* 지면 — 타워가 딛고 선 바닥. 버튼과 고지문은 지면 아래에 놓여 창과 겹치지 않는다 */
.elev-base{position:relative;z-index:2;margin:22px -16px -22px;padding:16px 16px 20px;background:var(--deep);border-top:1px solid rgba(234,243,238,.35)}
.elev-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.elev-btn{display:flex;align-items:center;justify-content:center;min-height:52px;border-radius:3px;font-size:15.5px;font-weight:800;text-decoration:none;
  transition:transform .25s var(--ease),background-color .25s var(--ease)}
.elev-btn:active{transform:translateY(1px)}
.elev-btn.go{background:var(--amber);color:var(--on-amber)}
.elev-btn.go:hover{background:#ffd06a}
.elev-btn.tel{border:1px solid rgba(234,243,238,.45);color:var(--on-deep)}
.elev-btn.tel:hover{background:rgba(234,243,238,.08)}
.elev-note{margin:12px 0 0;font-size:11px;line-height:1.5;color:var(--on-deep-2)}

/* 타워 — 28개 층 × 4개 라인의 창. 불 켜진 창이 순서대로 들어온다(1회) */
.tower{position:absolute;z-index:1;right:14px;top:22px;bottom:0;width:112px;display:flex;flex-direction:column}
.tower-roof{height:10px;margin:0 18px;border:1px solid rgba(234,243,238,.35);border-bottom:0}
.tower-body{flex:1;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:3px;padding:5px;
  border:1px solid rgba(234,243,238,.35)}
.tower-body i{display:block;background:rgba(234,243,238,.09)}
.tower-body i.on{background:var(--amber);animation:lit .7s var(--ease) both;animation-delay:calc(var(--d) * 26ms + 250ms)}
@keyframes lit{from{background:rgba(234,243,238,.09)}to{background:var(--amber)}}
.tower-ticks{position:absolute;right:calc(100% + 6px);top:10px;bottom:0;display:flex;flex-direction:column;justify-content:space-between;
  font-family:var(--num);font-weight:700;font-size:12px;color:var(--on-deep-2);text-align:right;padding:4px 0 150px}

/* ── 홈: 본문 층 ── */
.ad-note{background:var(--concrete);border-bottom:0;padding:8px 16px 0;font-size:11px}
.floor{padding:44px 16px 0}
.floor h2{margin:0 0 6px;font-size:24px;line-height:1.25;font-weight:800;letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
.floor .lede{margin:0 0 20px;font-size:14.5px;line-height:1.6;color:var(--muted)}
.floor.dark{background:var(--deep);color:var(--on-deep);padding-bottom:36px;margin-top:44px}
.floor.dark h2{color:var(--on-deep)}
.floor.dark .lede{color:var(--on-deep-2)}
.fine{margin:12px 0 0;font-size:11px;line-height:1.55;color:var(--muted)}
.floor.dark .fine{color:var(--on-deep-2)}

/* 노선 — 단지에서 역까지 */
.route{list-style:none;margin:0;padding:0;position:relative}
.route::before{content:"";position:absolute;left:9px;top:12px;bottom:14px;width:2px;background:var(--deep)}
.route li{position:relative;padding:0 0 0 34px}
.route .stop{padding-bottom:6px}
.route .stop::before{content:"";position:absolute;left:2px;top:4px;width:16px;height:16px;border-radius:50%;
  background:var(--concrete);border:3px solid var(--deep);box-sizing:border-box}
.route .stop.here::before{background:var(--amber);border-color:var(--deep)}
.route .stop strong{display:block;font-size:17px;font-weight:800;letter-spacing:-.03em;line-height:1.35}
.route .stop span{display:block;font-size:13px;color:var(--muted);line-height:1.5}
.route .leg{padding-top:6px;padding-bottom:18px;font-size:13px;color:var(--muted)}
.route .leg b{font-family:var(--num);font-weight:800;font-size:30px;line-height:1;color:var(--deep);letter-spacing:.01em;margin-right:4px}
.reach{display:grid;grid-template-columns:auto 1fr;gap:0 14px;margin:22px 0 0;padding:0;border-top:2px solid var(--ink)}
.reach dt,.reach dd{margin:0;padding:11px 0;border-bottom:1px solid var(--line)}
.reach dt{font-family:var(--num);font-weight:800;font-size:22px;line-height:1.15;color:var(--deep);white-space:nowrap}
.reach dt small{font:600 12px/1 'Pretendard Variable',Pretendard,sans-serif;color:var(--muted);margin-left:1px}
.reach dd{font-size:14px;line-height:1.5;align-self:center}

/* 두 생활권 */
.twin{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;border:1px solid rgba(234,243,238,.3)}
.twin > div{padding:16px 12px}
.twin h3{margin:0 0 8px;font-size:19px;font-weight:800;letter-spacing:-.03em;color:var(--amber)}
.twin ul{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.75;color:var(--on-deep)}
.twin .mid{display:flex;align-items:center;justify-content:center;padding:0 2px;background:var(--amber);color:var(--on-amber);
  writing-mode:vertical-rl;font-size:12.5px;font-weight:800;letter-spacing:.06em}

/* 큰 수치 줄 */
.figs{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0;border-top:2px solid var(--ink)}
.figs div{padding:14px 0 12px;border-bottom:1px solid var(--line)}
.figs div:nth-child(odd){padding-right:12px;border-right:1px solid var(--line)}
.figs div:nth-child(even){padding-left:14px}
.figs b{display:block;font-family:var(--num);font-weight:900;font-size:44px;line-height:.95;color:var(--deep);letter-spacing:.005em}
.figs b small{font:800 15px/1 'Pretendard Variable',Pretendard,sans-serif;margin-left:2px;letter-spacing:-.02em}
.figs span{display:block;margin-top:5px;font-size:12.5px;color:var(--muted);line-height:1.45}
.bleed{margin:22px -16px 0}
.bleed img{display:block;width:100%;height:auto}

/* 견본주택 — 영상 + 가로로 넘기는 사진 */
.unit-video{position:relative;margin:0 -16px;background:#000;aspect-ratio:9/12;overflow:hidden}
.unit-video video{width:100%;height:100%;object-fit:cover;display:block}
.reel{display:flex;gap:8px;margin:8px -16px 0;padding:0 16px 4px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reel::-webkit-scrollbar{display:none}
.reel figure{flex:0 0 78%;margin:0;scroll-snap-align:center}
.reel img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.reel figcaption{margin-top:6px;font-size:12.5px;color:var(--muted)}

/* 줄 목록 — 교육·커뮤니티 */
.rows{margin:0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.rows li{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:13px 0;border-bottom:1px solid var(--line);font-size:14px;line-height:1.55}
.rows li b{font-weight:800;letter-spacing:-.02em}
.rows li span{color:var(--muted)}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-size:14px;font-weight:800;color:var(--deep);text-decoration:none;
  border-bottom:2px solid var(--amber);padding-bottom:2px}
.more svg{width:14px;height:14px}

/* 1층 — 상담 */
.ground{margin-top:48px;padding:34px 16px 30px;background:var(--amber);color:var(--on-amber)}
.ground h2{margin:0;font-size:26px;line-height:1.22;font-weight:900;letter-spacing:-.04em;text-wrap:balance}
.ground p{margin:10px 0 18px;font-size:14px;line-height:1.6}
.ground .elev-actions{margin-top:0}
.ground .elev-btn.go{background:var(--deep);color:var(--on-deep)}
.ground .elev-btn.go:hover{background:var(--deep-2)}
.ground .elev-btn.tel{border-color:rgba(36,24,0,.5);color:var(--on-amber)}
.ground .elev-btn.tel:hover{background:rgba(36,24,0,.07)}

/* ── 이벤트·카운트다운(관리자 설정 시) ── */
.dealband{background:var(--deep)}
.deal-cta{background:var(--amber);color:var(--on-amber);border-radius:3px}
.deal-cta::after{display:none}
.dealsheet{border-radius:3px}
.dealsheet-title b{color:var(--deep)}
.dealsheet-live{background:var(--blue-soft);color:var(--deep)}
.dealsheet .btn.call-btn{color:var(--on-amber)}

/* ── 하위 페이지 공통 재정의 ── */
.section{padding:30px 16px 0}
.sec-title{font-size:21px;font-weight:800;letter-spacing:-.035em;color:var(--ink);margin-bottom:14px}
h1.sec-title{font-size:25px}
.cards{gap:0;border-top:2px solid var(--ink)}
.card{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:14px 0}
.card h3{font-size:16px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.card p{font-size:14px;line-height:1.6}
.spec{background:none;border:0;border-top:2px solid var(--ink);border-radius:0}
.spec th{background:none;color:var(--muted);font-weight:600;width:76px;padding-left:0}
.spec td{font-weight:600;padding-right:0}
.spec th,.spec td{border-bottom:1px solid var(--line)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:1px solid var(--line)}
.wide-img img{border:0;border-radius:2px}
.banner{background:var(--deep);border-radius:3px;font-weight:800}
.btn{border-radius:3px}
.btn.primary{background:var(--deep);border-color:var(--deep)}
.btn.call-btn{color:var(--on-amber)}
.chip{border-radius:2px;border-color:var(--line);background:var(--panel)}
.chip.on{background:var(--deep);border-color:var(--deep);color:var(--on-deep)}
.plan-panel img{border:1px solid var(--line);border-radius:2px}
.area-table{background:none;border:0;border-top:2px solid var(--ink);border-radius:0;font-variant-numeric:tabular-nums}
.area-table th{background:none;color:var(--muted);font-weight:600}
.chip-list li{border-radius:2px;background:var(--blue-soft)}
.gallery img{border:0;border-radius:2px}
.price-note{border-radius:2px}
.lead-form input,.lead-form select,.lead-form textarea{border-radius:3px}
.post-card{border-radius:2px;box-shadow:none}
.app-footer{background:var(--deep-2)}
.modal-box{border-radius:6px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .tower-body i.on{animation:none}
  .elev-btn{transition:none}
}