/* 몇프로 — 다크 + 형광 라임. 모바일 먼저, 1024px부터 PC 배치 */
:root {
  --bg: #0B0E14; --bg-2: #10141E; --card: #131824; --card-2: #1A2030; --chip: #1C2232;
  --line: rgba(255,255,255,.07); --line-2: rgba(255,255,255,.12); --line-3: rgba(255,255,255,.18);
  --ink: #EEF1F7; --ink-2: #AEB6C8; --ink-3: #8C95AA; --ink-4: #7A8398; --ink-soft: #DCE1EC;
  --volt: #CCF94A; --volt-2: #E4FF94; --volt-ink: #0B0E14;
  --up: #FF6B6B; --down: #5B9BFF; --warn: #F2B07A;
  --o-target: #199e70; --o-partial: #c98500; --o-time: #6B7385; --o-stop: #d95926;
  --o-target-ink: #3FD39F; --o-partial-ink: #F2B53A; --o-stop-ink: #FF8A5C;
  --r0: #3B5418; --r1: #4E701A; --r2: #64901C; --r3: #7DB01E; --r4: #9CD322; --r5: #CCF94A;
  /* 3D 기둥의 옆면. 빛이 왼쪽 위에서 온다고 보고: 밝은 옆면(m, 윗면의 72%)은 왼쪽·앞, 어두운 옆면(d, 52%)은 오른쪽 */
  --r0m: #2A3C11; --r1m: #385113; --r2m: #486814; --r3m: #5A7F16; --r4m: #709818; --r5m: #93B335;
  --r0d: #1F2C0C; --r1d: #293A0E; --r2d: #344B0F; --r3d: #415C10; --r4d: #516E12; --r5d: #6A8126;
  --lip: #86A82B; /* 라임 버튼의 아랫단 */
  --font: 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --num: 'Unbounded', 'IBM Plex Sans KR', system-ui, sans-serif;
  --radius: 24px; --radius-s: 16px; --gutter: 16px;
  --cell: #262D3D; /* 꺼진 칸 · 막대 바탕 */
  --hatch: rgba(255,255,255,.14); /* 자료가 적은 칸의 빗금 */
  /* 움직임. 속도는 둘뿐이에요: 손가락을 따라(live) · 놓았을 때(settle). 숫자는 넘치지 않게 --ease-out, 기둥·알약은 --spring, 길이가 곧 값인 막대·고리는 --spring-soft */
  --t-tap: 120ms; --t-live: 90ms; --t-move: 240ms; --t-settle: 420ms; --t-map: 520ms; --t-step: 32ms;
  --ease-out: cubic-bezier(.16,1,.3,1); --ease: var(--ease-out);
  --spring: cubic-bezier(.2,1.3,.4,1); --spring-soft: cubic-bezier(.2,.9,.3,1); /* linear() 를 모르는 브라우저용 */
  color-scheme: dark;
}
/* 진짜 스프링 곡선: src/core/spring.js 의 springLinear(.62) · springLinear(.8) 결과를 그대로 붙였어요 (tests/spring.test.js 가 맞춰 봐요) */
@supports (transition-timing-function: linear(0,1)) {
  :root {
    --spring: linear(0, 0.034 2.5%, 0.122 5%, 0.241 7.5%, 0.51 12.5%, 0.638 15%, 0.752 17.5%, 0.849 20%, 0.927 22.5%, 0.988 25%, 1.031 27.5%, 1.06 30%, 1.076 32.5%, 1.083 35%, 1.082 37.5%, 1.067 42.5%, 1.015 55%, 0.999 62.5%, 0.993 70%, 1);
    --spring-soft: linear(0, 0.021 2.5%, 0.074 5%, 0.148 7.5%, 0.324 12.5%, 0.503 17.5%, 0.584 20%, 0.658 22.5%, 0.723 25%, 0.781 27.5%, 0.83 30%, 0.872 32.5%, 0.906 35%, 0.934 37.5%, 0.957 40%, 0.988 45%, 1.005 50%, 1.015 57.5%, 1.007 80%, 1);
  }
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; overflow-x: clip; }
a { color: var(--volt); text-decoration: none; }
a:hover { color: var(--volt-2); }
button, input { font-family: inherit; }
img, svg { display: block; }
h1, h2, h3, p { margin: 0; }
.num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 12px; background: var(--volt); color: var(--volt-ink); font-weight: 700; }
.skip:focus { top: 8px; }
:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }

/* 배경 */
.atmos { position: fixed; inset: 0; pointer-events: none; z-index: -1; overflow: hidden; }
.atmos::before { content: ''; position: absolute; right: -14rem; top: -14rem; width: 46rem; height: 46rem; border-radius: 50%; background: radial-gradient(circle, rgba(204,249,74,.2), rgba(204,249,74,0) 62%); opacity: var(--lit, .56); transition: opacity var(--t-settle) linear; } /* 빛이 값을 따라와요: 고른 지역이 0%면 .35, 100%면 1 (ui.js light · 놓았을 때만). 값이 없는 화면은 .56 */
.atmos::after { content: ''; position: absolute; left: -16rem; top: 40%; width: 40rem; height: 40rem; border-radius: 50%; background: radial-gradient(circle, rgba(57,135,229,.09), rgba(57,135,229,0) 62%); }

/* 틀 */
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.sample-bar { background: #3A2716; color: var(--warn); font-size: 13px; font-weight: 600; text-align: center; padding: 8px var(--gutter); line-height: 1.5; }
.topbar { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--line); } /* 폰에서는 불투명 — 흐림 유리는 아래 탭 바 하나만. 1024px부터 다시 유리 */
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.brand:hover { color: var(--ink); }
.logo { width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(160deg, var(--volt-2), var(--volt) 55%); color: var(--volt-ink); display: flex; align-items: center; justify-content: center; gap: 1px; font-weight: 700; font-size: 15px; line-height: 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 3px 0 var(--lip), 0 8px 16px rgba(204,249,74,.18); }
.logo .num { font-size: 12px; font-weight: 800; }
.brand-name { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name b { font-size: 17px; letter-spacing: -.02em; }
.brand-name small { font-size: 12px; color: var(--ink-3); }
.topnav { display: none; gap: 4px; }
.topnav a { display: flex; align-items: center; height: 40px; padding: 0 14px; border-radius: 999px; color: var(--ink-2); font-size: 14px; font-weight: 600; }
.topnav a:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.topnav a[aria-current="page"] { color: var(--volt-ink); background: var(--volt); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 var(--lip); }
.pill { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 999px; background: var(--chip); color: #C9D0DE; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill.warn { background: transparent; border: 1px solid rgba(240,160,90,.45); color: var(--warn); }
/* 한 줄 판독(폰): 슬라이더를 잡고 있거나 조건 카드가 위로 지나가면 날짜 알약 자리에 '내 가점 44점이면 / 경기 31%' (ui.js readout).
   너비는 내용과 상관없이 잡아요(flex 1 1 0 · contain): 글자가 바뀌어도 막대의 다른 것이 다시 놓이지 않게 */
.readout { display: none; }
@media (max-width: 1023.98px) {
  .readout:not([hidden]) { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; flex: 1 1 0; min-width: 0; height: 44px; padding: 0; border: 0; background: none; color: var(--ink-2); font-size: 12px; line-height: 1.3; cursor: pointer; contain: content; animation: rd-in var(--t-move) var(--ease-out); }
  .readout > * { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rd-num { font-size: 16px; color: var(--volt); }
  .topbar[data-rd] .pill, .topbar[data-rd] .brand-name small { display: none; }
  /* 지도 구역은 화면 양 끝에서 잘라요: 순위 자리로 날아가는 칸이 잠깐 화면 너비를 넘어도 가로로 밀리지 않게 */
  .map-sec { overflow-x: clip; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
}
@keyframes rd-in { from { opacity: 0; transform: translateY(6px); } }
/* 실거래 찾기 버튼 (위 막대 오른쪽 끝). 찾기 창 안의 모양은 finder.js 가 갖고 와요 */
.finder-open { flex: none; display: grid; place-items: center; width: 44px; height: 44px; margin: 0 -10px 0 -4px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; }
.finder-open:hover { color: var(--volt); }
.finder-open svg * { stroke: currentColor; }
.topbar .pill { margin-left: auto; } /* 날짜 알약은 찾기 버튼 옆에 붙여요 */
section[id] { scroll-margin-top: 76px; } /* 위 막대(64px)에 가리지 않게 */
main { padding-bottom: 24px; }
.tabbar { position: fixed; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30; padding: 5px; border-radius: 999px; background: rgba(30,36,52,.66); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 14px 44px rgba(0,0,0,.5); }
.tabbar div { display: flex; gap: 2px; } /* 화면 전환의 이름표는 이 링크 줄에 — 흐림 유리(.tabbar)에 달면 전환하는 동안 흐림이 빠져요 */
.tabbar a { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #C9D0DE; white-space: nowrap; }
.tabbar a[aria-current="page"] { background: var(--volt); color: var(--volt-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 var(--lip); }
footer.site { border-top: 1px solid var(--line); margin-top: 48px; padding: 28px 0 140px; color: var(--ink-4); font-size: 13px; }
footer.site .wrap { display: flex; flex-direction: column; gap: 12px; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 6px 16px; }
footer.site nav a { color: var(--ink-2); }
footer.site .operator { color: var(--ink-3); } /* 운영 ○○ · 문의 ○○ (.env 의 OPERATOR_NAME · CONTACT_EMAIL 이 있을 때만 나와요) */
footer.site .operator a { color: var(--ink-2); }

/* 공통 블록 */
.section { padding-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--volt); letter-spacing: .08em; }
/* 글은 낱말 사이에서만 줄을 바꿔요 (한 줄에 못 들어가는 긴 낱말만 중간에서) */
.h1, .h2, .lead, .fine, .scene, figcaption, .notice p, .prose p, .prose li, #ln-sum, .door-num, .fail-row small { word-break: keep-all; overflow-wrap: anywhere; }
.h1 { font-size: 30px; line-height: 1.22; font-weight: 700; letter-spacing: -.03em; text-wrap: balance; }
.h2 { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: -.02em; }
.lead { font-size: 15px; color: var(--ink-2); text-wrap: pretty; }
.fine { font-size: 12px; line-height: 1.6; color: var(--ink-4); }
.card { background: linear-gradient(180deg, #181E2C, var(--card) 64px); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 18px 36px rgba(0,0,0,.3); }
.card.soft { background: var(--bg-2); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.row { display: flex; align-items: center; gap: 10px; }
.between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; padding: 6px 10px; border-radius: 10px; background: var(--chip); color: var(--ink-soft); }
.sw { width: 8px; height: 8px; border-radius: 2px; flex: none; }
/* 버튼은 아랫단이 있어서 누르면 내려가요 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 18px; border-radius: 14px; border: 0; background: var(--volt); color: var(--volt-ink); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 0 var(--lip), 0 12px 22px rgba(204,249,74,.14); transition: transform .12s ease, box-shadow .12s ease, background-color .2s ease, border-color .2s ease; }
.btn:hover { background: var(--volt-2); color: var(--volt-ink); }
.btn:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 1px 0 var(--lip), 0 4px 10px rgba(204,249,74,.1); }
.btn.ghost { background: rgba(204,249,74,.04); color: var(--ink); border: 1px solid rgba(204,249,74,.4); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 0 rgba(204,249,74,.2); }
.btn.ghost:hover { border-color: var(--volt); background: rgba(204,249,74,.08); color: var(--ink); }
.btn.ghost:active { box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 0 rgba(204,249,74,.2); }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; padding: 4px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.seg button { height: 44px; border: 0; border-radius: 999px; background: transparent; color: #C9D0DE; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: var(--volt); color: var(--volt-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 var(--lip); }
/* 라임 알약 하나가 고른 칸으로 미끄러져 가요. 몇 번째(--i) · 칸 수(--n)는 :has() 로 읽고, :has() 를 모르면 위의 바탕색 바꾸기 그대로 */
@supports selector(:has(*)) {
  .seg { position: relative; --n: 2; --i: 0; }
  .seg:has(> :nth-child(3)) { --n: 3; }
  .seg:has(> :nth-child(4)) { --n: 4; }
  .seg::before { content: ''; position: absolute; left: 4px; top: 4px; bottom: 4px; width: calc((100% - 4px * (var(--n) + 1)) / var(--n)); border-radius: 999px; background: var(--volt); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 var(--lip); opacity: 0; transform: translateX(calc(var(--i) * (100% + 4px))); transition: transform var(--t-move) var(--spring); }
  .seg:has(> :is([aria-pressed="true"], [aria-selected="true"]))::before { opacity: 1; }
  .seg:has(> :nth-child(2):is([aria-pressed="true"], [aria-selected="true"])) { --i: 1; }
  .seg:has(> :nth-child(3):is([aria-pressed="true"], [aria-selected="true"])) { --i: 2; }
  .seg:has(> :nth-child(4):is([aria-pressed="true"], [aria-selected="true"])) { --i: 3; }
  .seg button { position: relative; }
  .seg button[aria-pressed="true"], .seg button[aria-selected="true"] { background: none; box-shadow: none; }
}
/* 광고 자리: 크기를 미리 잡아 둬요 (늦게 와도 아래가 밀리지 않게). 글 사이 300×250 → 500px부터 336×280 → 800px부터 728×90,
   넓은 띠(wide) 320×100 → 468×60 → 728×90, 맨 위 18px 는 '광고' 표시 줄. 자리가 칸보다 넓으면(320px 폰) 양옆 여백으로 조금 나가요 */
.ad-slot, .ad-live { --aw: 300px; --ah: 250px; flex: none; width: var(--aw); height: calc(var(--ah) + 18px); margin: 0 calc(50% - var(--aw) / 2); }
.ad-slot.wide, .ad-live.wide { --aw: 320px; --ah: 100px; }
.ad-slot { display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--radius-s); border: 1px dashed var(--line-3); color: var(--ink-4); font-size: 12px; }
.ad-slot .tag { padding: 2px 8px; border-radius: 6px; background: var(--chip); color: var(--ink-2); font-weight: 600; }
.ad-label { display: block; height: 18px; font-size: 11px; line-height: 18px; color: var(--ink-4); }
.ad-live ins { display: block; width: var(--aw); height: var(--ah); }
@media (min-width: 500px) {
  .ad-slot, .ad-live { --aw: 336px; --ah: 280px; }
  .ad-slot.wide, .ad-live.wide { --aw: 468px; --ah: 60px; }
}
@media (min-width: 800px) { .ad-slot, .ad-live, .ad-slot.wide, .ad-live.wide { --aw: 728px; --ah: 90px; } }

/* 숫자 굴리기 */
.roller { display: inline-flex; align-items: baseline; line-height: 1; }
.num.roller { letter-spacing: 0; } /* 서버가 넣어 둔 글자(44)와 굴림판(.78em 칸)의 폭이 같아서, 스크립트가 붙을 때 숫자가 밀리지 않아요 */
/* 자리 하나: 너비를 .78em 으로 고정해서 글꼴이 늦게 와도 숫자 폭이 바뀌지 않아요. 위아래 끝은 살짝 흐려서 굴러 들어오는 숫자가 스며들게 */
.roll { display: inline-block; inline-size: .78em; height: 1em; overflow: hidden; line-height: 1; text-align: center; -webkit-mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(transparent, #000 14%, #000 86%, transparent); }
.roll-col { display: flex; flex-direction: column; transition: transform var(--t-settle) var(--ease-out); transition-delay: calc(var(--i, 0) * 28ms); } /* 놓았을 때: 일의 자리부터 28ms 씩 늦게 */
.roll-col span { display: block; height: 1em; line-height: 1; }
[data-live] .roll-col { transition: transform var(--t-live) linear; transition-delay: 0s; } /* 손가락을 따라갈 때 */
.roll-in { animation: roll-in var(--t-settle) var(--ease-out) backwards; animation-delay: calc(var(--i, 0) * 28ms); } /* 새로 생긴 자리가 처음 굴러 들어올 때 (ui.js roller) */
[data-live] .roll-in { animation: none; }
@keyframes roll-in { from { transform: translateY(var(--from, 0em)); } }
.unit { font-family: var(--font); font-size: .5em; letter-spacing: 0; } /* 단위(% · 억 · 점)는 본문 글꼴로 작게 */

/* 판독 카드 · 100칸 판 · 상태 표시 (지역 패널 맨 위에 놓는 한 장: 장면 한 줄 → 큰 숫자 + 100칸 → 지난 일 한 문장 → 어디 · 몇 건 · 기준일) */
/* 카드 바탕의 가는 격자는 무늬가 아니라 단위예요: 가로 10칸 × 세로 10칸 = 100칸 판과 같은 눈금 */
.rcard { position: relative; margin: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--radius-s); border: 1px solid var(--line-2); background-color: var(--bg-2); background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px), linear-gradient(var(--line) 1px, transparent 1px); background-size: 10% 100%, 100% 10%; }
.rcard figcaption { font-size: 14px; color: var(--ink-soft); text-wrap: pretty; }
/* 장면 한 줄: '내 가점 44점이면' — 조건을 지난 일로 말하는 머리말 */
.scene { font-size: clamp(18px, 5.2vw, 26px); line-height: 1.25; font-weight: 700; letter-spacing: -.02em; text-wrap: balance; }
.scene b { font-family: var(--num); font-variant-numeric: tabular-nums; color: var(--volt); }
.rc-main { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.rc-main .big { color: var(--volt); font-size: min(60px, 13vw); } /* 좁은 폰(320px)에서도 '100%' 와 100칸 판이 한 줄에 들어가게 */
.rc-main .cells { inline-size: min(116px, 100vw - 236px); }
.rc-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 12px; font-size: 12px; color: var(--ink-3); }
.btn.sm.rc-share { position: relative; min-height: 36px; margin-left: auto; padding: 0 12px; font-size: 13px; } /* 주소 복사 (예시 데이터가 아닐 때만 나와요) */
/* 그림 틀: 곡선 · 막대 · 추세선의 자리. 높이만 여기서 잡고 안쪽은 viz.js 가 그려요 (그림이 늦게 와도 아래가 밀리지 않게). 스크립트가 없으면 빈 틀(.js)은 감춰요 */
.plot { position: relative; height: 134px; }
.scrub .plot { height: 112px; }
.sc-title { height: 24px; font-size: 14px; white-space: nowrap; } /* 추세선의 제목 줄: 훑는 동안 판독으로 바뀌어도 높이가 그대로 */
html:not([data-fx]) .js { display: none; }
/* 100칸 판: <div class="cells" style="--n: 37"> 안에 <i style="--i: 0…99"> 100개. --n 만 바꾸면 아래 줄 왼쪽부터 --n 칸이 켜져요 (ui.js setCells) */
.cells { --n: 0; flex: none; inline-size: 116px; aspect-ratio: 1; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-template-rows: repeat(10, minmax(0, 1fr)); gap: 2px; transform: scaleY(-1); } /* 뒤집어서 아래 줄부터 차오르게 (칸이 위아래 대칭이라 모양은 같아요) */
.cells i { border-radius: 2px; background: var(--volt); opacity: clamp(.14, calc(var(--n) - var(--i)), 1); transition: opacity .18s; }
/* 계산하지 않은 값: 꺼진 판 가운데에 이름표 글자를 그대로 적고(판이 뒤집혀 있어 다시 뒤집어요), 큰 숫자 '—' 는 라임 대신 회색으로 */
.cells[aria-label="계산 안 함"]::after { content: attr(aria-label); position: absolute; left: 50%; top: 50%; padding: 3px 8px; border-radius: 8px; background: var(--bg-2); transform: translate(-50%, -50%) scaleY(-1); font-size: 12px; white-space: nowrap; color: var(--ink-2); }
.rc-main .big:has(+ [aria-label="계산 안 함"]) { color: var(--ink-4); }
.is-stale { opacity: .6; } /* 손가락을 따라가는 동안 아직 다시 계산하지 않은 곳 */

/* 슬라이더 */
.slider { display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.slider .between label { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.slider .val { flex: none; font-size: 13px; color: var(--ink-2); white-space: nowrap; }
.slider .val b { color: var(--ink); }
.track { position: relative; height: 32px; }
.track .bg { position: absolute; left: 0; right: 0; top: 13px; height: 6px; border-radius: 999px; background: var(--cell); overflow: hidden; }
.track .fill { height: 100%; transform-origin: 0 50%; background: linear-gradient(180deg, var(--volt-2), var(--volt) 60%, var(--lip)); } /* 길이는 scaleX 로만. 둥근 끝은 .bg 가 잘라 줘요 */
.track input { -webkit-appearance: none; appearance: none; position: absolute; inset: 0; width: 100%; height: 32px; margin: 0; background: transparent; cursor: pointer; }
.track input::-webkit-slider-runnable-track { height: 32px; background: transparent; }
.track input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: 3px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff, #D9DEE9 55%, #A9B1C3); border: 5px solid var(--bg); box-shadow: 0 0 0 1px rgba(204,249,74,.7), 0 6px 16px rgba(0,0,0,.55); }
.track input::-moz-range-track { height: 32px; background: transparent; }
.track input::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #fff, #D9DEE9 55%, #A9B1C3); border: 5px solid var(--bg); box-shadow: 0 0 0 1px rgba(204,249,74,.7); }

/* 청약 지도 */
.score-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; } /* 칸 너비를 카드에 묶어요: 큰 숫자가 길어져도 카드가 화면 밖으로 밀리지 않게 (좁은 폰) */
.score-card > .between, .bid-card > .between, .money-card > .between { flex-wrap: wrap; } /* 아주 좁은 폰(320px)에서 큰 숫자가 길어지면 옆 숫자가 아랫줄로 내려가요 */
.big { font-size: 60px; font-weight: 700; line-height: 1; letter-spacing: -.04em; }
.map-head { align-items: flex-end; }
.map-head .fine { display: block; }
.map-mode { flex: none; }
.map-mode button { position: relative; height: 36px; padding: 0 14px; font-size: 13px; }
.map-mode button::after, .rc-share::after { content: ''; position: absolute; inset: -4px 0; } /* 보이는 높이는 36px, 눌리는 높이는 44px */
/* 육각 기둥. 칸(.hexwrap)은 제자리에 있고 옆면(.wall)은 34px 높이로 한 번만 칠해 둬요. 불투명한 윗면(.hex 버튼)이 transform 으로 오르내리며
   옆면을 가렸다 드러내서 높이가 바뀌어 보여요 (필터 · 등록 속성 · clip-path 움직임 없이 합성 단계에서만).
   --hn 높이(2~24) · --lift 들림 · --s 크기 · --d 물결 순서(ms) · --u 높이 1 이 몇 px 인지. 34 = 가장 높은 24 + 고른 칸 6 + 넘치는 만큼 */
.hexmap { position: relative; isolation: isolate; width: 100%; max-width: 420px; aspect-ratio: 315 / 316; margin: 38px auto 10px; --u: 1px; } /* 위 여백은 기둥이 솟을 자리 */
.hexwrap { position: absolute; width: 20.95%; height: 24.05%; --top: var(--cell); --wl: #1B202C; --wr: #141820; --cap: #F3F7E8; }
.hexwrap[data-k="0"] { --top: var(--r0); --wl: var(--r0m); --wr: var(--r0d); }
.hexwrap[data-k="1"] { --top: var(--r1); --wl: var(--r1m); --wr: var(--r1d); }
.hexwrap[data-k="2"] { --top: var(--r2); --wl: var(--r2m); --wr: var(--r2d); --cap: #0B0E14; }
.hexwrap[data-k="3"] { --top: var(--r3); --wl: var(--r3m); --wr: var(--r3d); --cap: #0B0E14; }
.hexwrap[data-k="4"] { --top: var(--r4); --wl: var(--r4m); --wr: var(--r4d); --cap: #0B0E14; }
.hexwrap[data-k="5"] { --top: var(--r5); --wl: var(--r5m); --wr: var(--r5d); --cap: #0B0E14; }
.hexwrap > * { transition: transform 460ms var(--spring), background-color var(--t-move) linear, color var(--t-move) linear, opacity var(--t-move) linear; transition-delay: calc(var(--d, 0) * 1ms); } /* 놓았을 때: 고른 칸에서 먼 칸일수록 늦게 (다 해서 0.65초 안) */
[data-live] .hexwrap > * { transition: transform var(--t-live) linear; } /* 손가락을 따라갈 때: 높이만 바로, 색은 그 자리에서 */
.hex, .hx-ring { transform: translateY(calc(var(--u) * -1 * (var(--hn, 2) + var(--lift, 0)))) scale(var(--s, 1)); }
.hex { position: relative; z-index: 1; width: 100%; height: 100%; border: 0; padding: 0; margin: 0; cursor: pointer; scroll-margin: 80px 0 96px; clip-path: polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; background: var(--top) linear-gradient(155deg, rgba(255,255,255,.24), rgba(255,255,255,0) 44%); color: var(--cap); outline: 0; } /* 초점 표시는 .hx-ring 이 해요 (outline 은 clip-path 에 잘려요) */
.hexwrap[data-k="x"] .hex { background-image: repeating-linear-gradient(45deg, var(--hatch) 0 1.5px, transparent 0 7px); } /* 값이 없는 칸: 빗금 (글로는 '표본 적음') */
.hex .nm { font-size: 12px; font-weight: 600; line-height: 1; }
.hex .pc { font-family: var(--num); font-size: 14px; font-weight: 700; line-height: 1; }
.hex[data-rank]::before { content: attr(data-rank); font-family: var(--num); font-size: 9px; font-weight: 700; line-height: 1; opacity: .7; } /* 순위 보기의 작은 번호 */
.wall { position: absolute; top: calc(75% - 34 * var(--u)); height: calc(25% + 34 * var(--u)); width: calc(50% + .25px); pointer-events: none; }
.wall.l { left: 0; background: var(--wl); clip-path: polygon(0 0, 100% calc(100% - 34 * var(--u)), 100% 100%, 0 calc(34 * var(--u))); }
.wall.r { right: 0; background: var(--wr); clip-path: polygon(0 calc(100% - 34 * var(--u)), 100% 0, 100% calc(34 * var(--u)), 0 100%); }
/* 바닥 그림자: 미리 흐려 둔 타원, 기둥이 높을수록 짙게 (opacity 만). 모든 그림자는 모든 기둥 아래에 깔려요 */
.hx-shadow { position: absolute; z-index: -1; left: 2%; right: 2%; bottom: -11%; height: 36%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)); opacity: calc(.15 + var(--hn, 2) / 34); pointer-events: none; }
/* 고른 칸: 들리고 커지고, 흰 테두리와 라임빛이 켜져요. 초점은 같은 테두리가 라임색으로 (바로) */
.hx-ring { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; fill: none; stroke: #fff; stroke-width: 1.5; }
.hx-ring polygon { vector-effect: non-scaling-stroke; }
.hx-ring polygon:first-child { display: none; } /* 초점 표시의 어두운 바탕 선: 라임 테두리가 밝은 윗면 위에서도 보이게 */
.hexwrap::before { content: ''; position: absolute; z-index: -1; inset: -22% -20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(204,249,74,.55), rgba(204,249,74,0)); opacity: 0; pointer-events: none; transition: opacity var(--t-move) linear; }
.hexwrap.sel { --lift: 6; --s: 1.06; z-index: 3; }
.hexwrap.sel::before { opacity: 1; transform: translateY(calc(var(--u) * -.6 * (var(--hn, 2) + 6))); }
.hexwrap.sel .hx-ring { opacity: 1; }
.hexwrap.sel .hx-shadow, .hexwrap:focus-within .hx-shadow { opacity: 0; } /* 앞으로 나온 칸의 그림자는 아랫줄 윗면 위에 얹히니 꺼요 */
.hexwrap:focus-within { z-index: 4; }
.hex:focus-visible ~ .hx-ring { opacity: 1; stroke: var(--volt); stroke-width: 3; transition: none; }
.hex:focus-visible ~ .hx-ring polygon:first-child { display: inline; stroke: var(--bg); stroke-width: 7; }
@media (hover: hover) { .hexwrap:hover:not(.sel) { --lift: 3; --d: 0 !important; } }
/* 지도 일어서기: 납작한 데서 고른 칸부터 차례로(--d0) 솟아, 제 높이를 4px 지나쳤다가 내려앉아요 (한 번 · translate 만 · 스크립트 없이도 끝난 모습).
   처음에 반도 안 보이면 ui.js rise 가 눕혀 뒀다가(.flat) 들어올 때 세워요. 다 솟으면 data-up. 물결 · 도착 고리는 hexfx.js 에 */
html[data-fx="full"] .hexmap:not([data-up]) :is(.hex, .hx-ring) { animation: hx-rise var(--t-map) calc(var(--d0, 0) * 1ms) backwards; }
@keyframes hx-rise {
  from { translate: 0 calc(var(--u) * (var(--hn, 2) + var(--lift, 0))); animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  50% { translate: 0 calc(var(--u) * -4); animation-timing-function: ease-in-out; }
  76% { translate: 0 calc(var(--u) * 1.4); animation-timing-function: ease-in-out; }
}
.hexmap.flat :is(.hex, .hx-ring) { translate: 0 calc(var(--u) * (var(--hn, 2) + var(--lift, 0))); }
/* 지도 안 판독: 고른 지역의 이름과 숫자가 제주 오른쪽 빈자리에 */
.map-readout { position: absolute; left: 47%; top: 84%; display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.map-readout small { font-size: 12px; line-height: 1; color: var(--ink-2); }
.map-readout b { font-size: 28px; font-weight: 700; color: var(--volt); }
.legend { display: flex; align-items: center; gap: 10px; max-width: 420px; width: 100%; margin: 0 auto; font-size: 12px; color: var(--ink-3); }
.legend .bar { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 3px; }
.legend .bar i { height: 8px; border-radius: 4px; }
.legend .thin { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.legend .thin i { width: 14px; height: 8px; border-radius: 4px; background: var(--cell) repeating-linear-gradient(45deg, var(--hatch) 0 1.5px, transparent 0 5px); }
.house { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 20px; background: var(--card); border: 1px solid var(--line); }
.ring { position: relative; width: 60px; height: 60px; flex: none; }
.ring svg circle { fill: none; stroke-width: 6; }
.ring .base { stroke: var(--cell); }
.ring .val { stroke: var(--volt); stroke-linecap: round; transition: stroke-dasharray var(--t-settle) var(--spring-soft); }
.lazy:not(.play) .ring .val { stroke-dasharray: 0 138.2; stroke-linecap: butt; } /* 공고 · 물건 카드의 고리: 카드가 처음 화면에 들어올 때(.play) 0에서 그려져요 */
.ring span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--num); font-size: 12px; font-weight: 700; }
.house .ringcol { flex: none; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.house .ringcol small { font-size: 10px; color: var(--ink-3); white-space: nowrap; }
.house .info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.house .t { min-width: 0; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 종목 목록 */
.search { position: relative; }
.search svg { position: absolute; left: 16px; top: 15px; }
.search input { width: 100%; height: 48px; padding: 0 16px 0 44px; border-radius: 16px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font-size: 16px; outline: none; } /* 16px 보다 작으면 iOS 가 누를 때 화면을 키워요 */
.search input:focus { border-color: var(--volt); }
.search input::placeholder { color: var(--ink-4); }
/* 실거래 찾기 칸: 누르면 찾기 창이 열려요 (스크립트가 없으면 /trade/?q= 로 가는 양식) */
.finder-pill { width: 100%; max-width: 480px; }
.crumb-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.crumb-row .finder-pill { flex: 1 1 260px; max-width: 360px; }
/* 시·군·구별 실거래가 화면 · 지역 목록 */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); min-height: 32px; display: inline-flex; align-items: center; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
/* 그림 둘 (빌드 때 그린 SVG): 100칸 그림 + 가운데 절반 띠(그린 크기 320px 까지만). 옆에 같은 숫자를 글로 */
.figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; margin-top: 8px; }
.fig { display: flex; align-items: center; gap: 14px; margin: 0; padding: 14px; border-radius: 12px; background: var(--chip); font-size: 14px; color: var(--ink-soft); }
.fig svg { flex: none; overflow: visible; }
.fig b { color: var(--volt); }
.fig.wide { flex-direction: column; align-items: stretch; gap: 8px; }
.fig.wide svg { width: 100%; max-width: 320px; }
.tb { display: block; height: 3px; margin-top: 4px; border-radius: 2px; background: var(--r3); transform: scaleX(var(--w)); transform-origin: 0; --a: 1; --from: scaleX(0); } /* 표 안의 거래 수 막대 */
.table small { color: var(--ink-3); font-size: 11px; font-family: var(--sans, inherit); white-space: nowrap; }
.table.apts td { vertical-align: top; }
.table.apts td b { font-size: 14px; font-weight: 600; word-break: keep-all; overflow-wrap: anywhere; }
.table.apts td small { display: block; margin-top: 3px; }
.table.apts td.n { white-space: nowrap; }
.linklist { display: flex; flex-wrap: wrap; gap: 6px; }
.linklist a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--chip); color: #C9D0DE; font-size: 13px; font-weight: 600; }
.linklist a:hover { border-color: var(--volt); color: var(--ink); }
.dir { display: grid; gap: 8px; }
.dir details { border-radius: 16px; background: var(--card); border: 1px solid var(--line); padding: 0 14px; }
.dir summary { min-height: 48px; display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; list-style: none; }
.dir summary::-webkit-details-marker { display: none; }
.dir summary::after { content: '+'; margin-left: auto; color: var(--ink-3); font-family: var(--num); }
.dir details[open] summary::after { content: '−'; }
.dir summary small { color: var(--ink-3); font-weight: 500; font-size: 12px; }
.dir .linklist { padding: 2px 0 14px; }
.list { display: grid; gap: 10px; }
.list > * { min-width: 0; } /* 긴 이름(실제 단지·물건명)이 칸을 화면 밖으로 밀지 않게: 격자 칸은 기본이 '내용만큼은 넓게'라서 */
.item { border-radius: 20px; background: var(--card); border: 1px solid var(--line); overflow: hidden; transition: border-color .3s ease; }
.item.open { border-color: rgba(204,249,74,.45); }
.item > button { width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px; margin: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.item > button:hover { background: rgba(255,255,255,.02); }
.item .top { display: flex; align-items: center; gap: 12px; width: 100%; }
.item .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.item .nm b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .nm small { font-size: 12px; color: var(--ink-3); }
.item .px { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; min-width: 96px; }
.pos { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.pos .rail { position: relative; height: 6px; border-radius: 999px; background: var(--cell); }
.pos .knob { position: absolute; top: -4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 3px var(--card); }
.pos .lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }
.winrow { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
.winrow .w { font-family: var(--num); font-size: 28px; font-weight: 700; color: var(--volt); letter-spacing: -.03em; }
.more { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; animation: unfold .38s var(--ease); }
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.stack { display: flex; gap: 2px; height: 14px; border-radius: 4px; overflow: hidden; }
.stack i { transition: flex-basis .7s var(--ease); }
.quad { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.quad span { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--ink-3); }
.quad b { font-family: var(--num); font-size: 13px; color: var(--ink); }
.duo { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.stat { padding: 10px 12px; border-radius: 12px; background: var(--chip); display: flex; flex-direction: column; gap: 4px; }
.stat small { font-size: 11px; color: var(--ink-3); }
.stat b { font-family: var(--num); font-size: 15px; }

/* 종목 페이지 · 플랜 */
.stock-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.chart-card { padding: 14px 0 10px; }
.chart-card .between { padding: 0 14px 8px; font-size: 12px; color: var(--ink-3); }
.chart-card .hint { color: var(--volt); font-weight: 600; }
.chart { width: 100%; height: auto; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.grip { cursor: ns-resize; touch-action: none; }
.ping { transform-box: fill-box; transform-origin: center; animation: ping 1.6s cubic-bezier(.2,.8,.2,1) 2 forwards; } /* 두 번만 깜빡이고 사라져요 (계속 도는 움직임은 두지 않아요) */
@keyframes ping { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(2.4); opacity: 0; } }
.steppers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; padding: 10px 10px 0; }
.stepper { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; padding: 8px; border-radius: 14px; background: var(--card-2); }
.stepper .lab { display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12px; color: #C9D0DE; }
.stepper .v { text-align: center; font-family: var(--num); font-size: 13px; font-weight: 600; white-space: nowrap; }
.stepper .ctl { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 4px; margin-top: 2px; }
.stepper button { height: 44px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--chip); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; touch-action: manipulation; }
.stepper button:hover { border-color: rgba(204,249,74,.6); }
.stepper button:active { background: var(--card); }
.plan-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 10px 0; flex-wrap: wrap; }
.plan-actions .btn { flex: 1 1 auto; max-width: 220px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-s); background: var(--card); border: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.steps .n { flex: none; width: 24px; height: 24px; border-radius: 8px; color: var(--volt-ink); display: flex; align-items: center; justify-content: center; font-family: var(--num); font-size: 11px; font-weight: 700; }
.dots { position: relative; height: 216px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; }
.dots .field { position: absolute; inset: 0 auto 0 10px; width: calc(100% - 20px); }
.dot { position: absolute; left: 0; top: 0; width: 5px; height: 5px; border-radius: 1.5px; transition: transform .9s cubic-bezier(.2,.9,.2,1), background-color .4s ease, opacity .5s ease; }
.bins { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 6px; }
.bin { display: flex; flex-direction: column; gap: 3px; padding: 10px 8px; border-radius: 14px; background: var(--card); border-top: 3px solid; }
.bin small { font-size: 11px; color: var(--ink-2); }
.bin b { font-family: var(--num); font-size: 16px; }
.bin em { font-style: normal; font-size: 11px; color: var(--ink-3); }
.compare { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.compare div { display: flex; flex-direction: column; gap: 6px; }
.compare small { font-size: 11px; color: var(--ink-3); }
.compare .p { font-family: var(--num); font-size: 15px; font-weight: 700; color: var(--volt); }
.compare .h { font-family: var(--num); font-size: 13px; color: var(--ink-2); }
.key { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); }
.key span { display: flex; align-items: center; gap: 6px; }
.odds { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.odds.short .odd:nth-child(n+7) { display: none; }
.odd { padding: 12px 14px; border-radius: var(--radius-s); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.odd.recent { border-color: rgba(204,249,74,.35); }
.odd .meta { font-size: 11px; color: var(--ink-3); }
.odd .v { font-family: var(--num); font-size: 16px; font-weight: 700; text-align: right; }
.odd .verdict { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #1F2A2A; color: #9FD8C2; }
.odd .verdict.few { background: #2A2F3D; color: var(--ink-2); }
.odd .barbox { position: relative; height: 10px; border-radius: 5px; background: #222939; }
.odd .barbox i { position: absolute; left: 0; top: 0; height: 10px; border-radius: 5px; transition: width .9s var(--ease), background-color .5s ease; }
.odd .barbox b { position: absolute; top: -4px; width: 2px; height: 18px; margin-left: -1px; border-radius: 1px; background: var(--ink); }
.versus { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.versus > div { padding: 14px; border-radius: 18px; background: var(--chip); display: flex; flex-direction: column; gap: 6px; }
.versus .after { border: 1px solid rgba(204,249,74,.4); }

/* 도구 화면의 배치 (모바일은 한 칸). .ctl: 실거래가의 조건 카드 둘 */
.split, .split-wide, .ctl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* 홈 */
.hero { padding-top: 36px; display: flex; flex-direction: column; gap: 16px; }
.hero .h1 { font-size: 40px; }
/* 홈의 작은 계기: 가점 슬라이더 하나 → 작은 지도(칸은 그림이라 누르지 않아요)와 전국 평균. 바탕은 판독 카드와 같은 100칸 눈금.
   작은 지도는 --u 로 기둥 높이를 줄여요. 슬라이더는 손가락 자리를 44px 로 */
.hero-inst .hexmap { max-width: 250px; margin: 24px auto 2px; --u: .62px; pointer-events: none; }
.hero-inst .hexwrap { --d: var(--d0); } /* 놓았을 때의 물결도 처음 솟을 때와 같은 차례로 */
.hero-inst .hex span { font-size: 10px; }
.hero-inst .track input { top: -6px; height: 44px; }
.hero-inst figcaption { display: grid; gap: 10px; }
@media (max-width: 359.98px) { .hero-inst .pc { display: none; } }
.doors { display: grid; gap: 12px; }
.door { display: flex; flex-direction: column; gap: 10px; padding: 22px; border-radius: 28px; background: radial-gradient(320px circle at var(--mx, 105%) var(--my, -5%), rgba(204,249,74,.12), rgba(204,249,74,0) 62%), linear-gradient(180deg, #181E2C, var(--card) 80px); border: 1px solid var(--line); color: var(--ink); position: relative; overflow: hidden; min-height: 210px; box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 20px 40px rgba(0,0,0,.34); transition: border-color .3s ease, transform .25s ease, box-shadow .3s ease; }
.door:hover { color: var(--ink); border-color: rgba(204,249,74,.45); transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 28px 50px rgba(0,0,0,.42); }
.door > :not(svg) { position: relative; z-index: 1; max-width: 78%; }
.door .go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--volt); font-weight: 700; }
/* 문마다 진짜 숫자 하나(조건 한 줄 + 큰 숫자)와 그 숫자를 그린 작은 그림 */
.door-num { font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--ink-2); }
.door-num b { display: block; font-size: 28px; line-height: 1.25; letter-spacing: -.03em; color: var(--volt); }
.door > svg { position: absolute; right: 18px; bottom: 18px; width: 108px; height: 108px; overflow: visible; }
.door > .dots { right: -6px; bottom: -8px; width: 160px; height: 216px; opacity: .95; } /* 주식 문의 점 그림 (주식을 켰을 때만 · 예전 그대로) */
.door .dots rect { animation: fall .9s var(--ease) both; animation-delay: calc(var(--i) * 45ms + 150ms); }
@keyframes fall { from { transform: translateY(-150px); opacity: 0; } 60% { opacity: 1; } }
/* 장면: 화면에 들어올 때 한 번 차오르는 작은 그림 (홈의 문 · 시·군·구 화면의 그림). 조각(.sp)이 --o 차례로, opacity · transform 으로만.
   스크롤 자리를 따라가는 animation-timeline 을 아는 브라우저에서만, 움직임 줄이기가 아니고 차분한 단계가 아닐 때만 — 그 밖에는 끝난 모습 그대로예요 */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .door, .sc { view-timeline: --sc; }
    html[data-fx="full"] .sp { transform-box: fill-box; transform-origin: 0 100%; animation: sp-in linear both; animation-timeline: --sc; animation-range: cover calc(6% + var(--o, 0) * 1.4%) cover calc(18% + var(--o, 0) * 1.4%); }
    @keyframes sp-in { from { opacity: var(--a, 0); transform: var(--from, none); } }
  }
}
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "doors" "dice"; column-gap: 32px; }
.home-grid .hero { grid-area: hero; }
.home-grid .doors { grid-area: doors; }
.home-grid .dice-sec { grid-area: dice; }
.door .lead, .door .door-num, .door .fine { max-width: calc(100% - 122px); }
.dice { display: flex; flex-direction: column; gap: 14px; }
.dice-main { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.dice-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dice-name a { font-size: 22px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dice-name a:hover { color: var(--volt); }
.dice-name small { font-size: 12px; color: var(--ink-3); }
.dice-num { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.dice-num .big { color: var(--volt); font-size: 52px; }
.dice-num small { font-size: 12px; color: var(--ink-3); white-space: nowrap; }
.dice .key b { color: var(--ink-soft); font-size: 11px; }
.btn.sm { min-height: 44px; padding: 0 14px; font-size: 14px; border-radius: 12px; }
#dc-roll svg { transition: transform .7s var(--ease); }
#dc-roll.spin svg { transform: rotate(360deg); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.table th { color: var(--ink-3); font-weight: 600; font-size: 12px; }
.table td.n { font-family: var(--num); text-align: right; }
.table th.n { text-align: right; }
.scroll-x { overflow-x: auto; }
.prose { max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.prose h2 { font-size: 20px; margin-top: 18px; }
.prose p, .prose li { color: var(--ink-soft); }
.prose ul, .prose ol { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.byline { color: var(--ink-3); }
/* 계산 방법의 '기둥 하나가 만들어지는 과정': 단계마다 제 그림이 차례로 쌓여 있어요. 붙여 두는 그림(.story-fig)은 스크립트가 켜요 (page-static.js 가 모양도 갖고 와요) */
.story-fig { display: none; }
.story ol { list-style: none; padding: 0; gap: 18px; }
.story h3 { font-size: 16px; }
.story li svg { width: 100%; max-width: 420px; margin-top: 8px; border-radius: 12px; background: var(--bg-2); }
.draft { padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(240,160,90,.45); color: var(--warn); font-size: 13px; }

/* 경매·공매 */
.bid-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin-top: 10px; }
.field-label small { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--chip); color: #C9D0DE; font-size: 13px; font-weight: 700; cursor: pointer; transition: background-color .3s ease, color .3s ease; }
.chips button small { font-weight: 500; opacity: .7; margin-left: 3px; font-size: 11px; }
.chips button[aria-pressed="true"] { background: var(--volt); color: var(--volt-ink); border-color: var(--volt); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 2px 0 var(--lip); }
.fail-bars { display: grid; gap: 10px; }
.fail-row { position: relative; display: grid; grid-template-columns: 72px minmax(0, 1fr) 44px; align-items: center; column-gap: 10px; row-gap: 2px; font-size: 12px; color: var(--ink-2); }
.fail-row .track2 { position: relative; height: 10px; border-radius: 5px; background: #222939; overflow: hidden; }
/* 막대 길이는 transform 으로만: 꽉 찬 막대를 왼쪽으로 밀어 두고 틀이 잘라요 (둥근 끝이 그대로). 놓았을 때는 60ms 늦게 --spring-soft 로, 끄는 동안은 바로 */
.fail-row .track2 i { position: absolute; left: 0; top: 0; width: 100%; height: 10px; border-radius: 5px; background: var(--volt); opacity: .4; transition: transform var(--t-settle) var(--spring-soft) 60ms, opacity .3s ease; }
[data-live] .track2 i, [data-live] .mix i { transition: none; }
.fail-row.sel { color: var(--ink); font-weight: 600; }
.fail-row.sel .track2 i { opacity: 1; }
.fail-row .v { font-family: var(--num); font-weight: 700; color: var(--ink); text-align: right; }
.fail-row small { grid-column: 2 / 4; font-size: 11px; color: var(--ink-3); font-weight: 400; }
.here { color: var(--volt); font-weight: 600; } /* 대출이 걸리는 한도 줄에만 보여요 (.sel 을 옮기면 글도 따라가요) */
.fail-row:not(.sel) .here { display: none; }
.notice { display: flex; flex-direction: column; gap: 8px; border-color: rgba(240,160,90,.35); }
.notice b { font-size: 16px; }
.notice p { font-size: 14px; color: var(--ink-soft); }
.auction-item .meta2 { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.auction-item .t { white-space: normal; }
.ext { font-size: 13px; font-weight: 700; align-self: flex-start; min-height: 32px; display: inline-flex; align-items: center; }

/* 실거래가 · 대출 한도 */
.money-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.slider label small { font-weight: 400; color: var(--ink-3); font-size: 12px; margin-left: 4px; }
.chips button[aria-expanded="true"] { border-color: var(--volt); color: var(--ink); }
/* 저장해 둔 방법 · 펼침은 그리기 전에 맞춰요 (templates.js TRADE_PREPAINT) */
[data-budget] :is(#loan-card, [data-row="cash"], [data-row="income"]) { display: none; }
[data-budget] [data-row="budget"], [data-more] #ln-more { display: block !important; }
.bump { flex-wrap: nowrap; }
.bump button { flex: 1 1 0; min-width: 0; padding: 0; border-radius: 12px; font-weight: 600; }
.bump button:active { background: var(--card); }
.mix { background: var(--volt); }
.mix i { flex: 1; background: #6B7385; box-shadow: 2px 0 0 var(--card); transition: transform var(--t-settle) var(--spring-soft) 60ms; }
.loan-bars .fail-row { grid-template-columns: 108px minmax(0, 1fr) 56px; }
.district-bars .fail-row { grid-template-columns: 96px minmax(0, 1fr) 44px; }
.district-bars .fail-row > span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
button.fail-row { width: 100%; margin: 0; padding: 6px 8px; border: 0; border-radius: 12px; background: transparent; font-family: inherit; text-align: left; cursor: pointer; transition: background-color .2s ease; }
button.fail-row:hover { background: rgba(255,255,255,.04); }
button.fail-row[aria-pressed="true"] { background: rgba(204,249,74,.08); box-shadow: inset 0 0 0 1px rgba(204,249,74,.35); }
button.fail-row[aria-pressed="true"] > span:first-child { color: var(--volt); }
.district-bars { gap: 4px; }
/* 동 · 단지별 실거래 */
.scroll-chips { position: relative; flex-wrap: nowrap; overflow-x: auto; padding: 2px 2px 8px; margin: 0 -2px; scrollbar-width: thin; scrollbar-color: #2A3142 transparent; -webkit-overflow-scrolling: touch; }
.scroll-chips button { flex: none; }
.td-sort { flex: 1 1 280px; max-width: 360px; }
.ring span.sm { font-size: 10px; }
/* 단지 카드(.apt · 빈 틀 .sk) · 찾아온 곳(.land · .pinned)의 모양은 trade-detail.js 가 갖고 와요 */

/* PC */
@media (min-width: 1024px) {
  :root { --gutter: 32px; }
  body { font-size: 16px; }
  .topbar { background: rgba(11,14,20,.78); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); }
  .topnav { display: flex; margin: 0 auto; }
  .topbar .pill { margin-left: 0; }
  .tabbar { display: none; }
  main { padding-bottom: 40px; }
  footer.site { padding-bottom: 48px; }
  .h1 { font-size: 36px; }
  .hero .h1 { font-size: 56px; }
  .doors { grid-auto-flow: column; grid-auto-columns: minmax(0,1fr); }
  .home-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "hero dice" "doors doors"; align-items: end; }
  .home-grid.no-dice { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "doors"; }
  .no-dice .hero { display: grid; grid-template-columns: minmax(0, 1fr) 420px; grid-template-rows: repeat(4, auto) 1fr; column-gap: 56px; padding-top: 28px; } /* 왼쪽에 문구 · 찾기 칸, 오른쪽에 작은 계기 */
  .no-dice .hero > * { grid-column: 1; }
  .no-dice .hero > .eyebrow { margin-top: 96px; }
  .no-dice .hero-inst { grid-column: 2; grid-row: 1 / -1; }
  .hero-inst .hexmap { max-width: 320px; --u: .8px; }
  .hero-inst .hex span { font-size: 12px; }
  .home-grid .doors { margin-top: 28px; }
  /* 도구 화면: 왼쪽에 조건 → 지도 → 나머지(.pm), 오른쪽에는 판독 카드가 따라와요 (패널 틀은 풀어요). 그 밖은 아래에 온 너비로 */
  .split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px 24px; align-items: start; }
  .split > * { grid-column: 1 / -1; }
  .split > :first-child, .map-sec, .panel > * { grid-column: 1; }
  .panel { display: contents; }
  .panel > .rcard { grid-column: 2; grid-row: 1 / span 3; position: sticky; top: 88px; }
  .panel.is-stale > * { opacity: .6; }
  .pm { padding: 6px 18px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
  .split-wide { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
  .list { grid-template-columns: repeat(2, minmax(0,1fr)); align-items: start; }
  .sticky { position: sticky; top: 88px; }
  .split-wide .ad-slot, .split-wide .ad-live { --aw: 336px; --ah: 280px; } /* 두 칸 배치의 한 칸에는 728 이 안 들어가요 */
  .topnav a[aria-current="page"] { view-transition-name: nav-pill; }
}
/* 세 칸: 조건 + 나머지 | 지도 | 판독 카드 (지도도 따라와요) */
@media (min-width: 1280px) {
  .split { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-sec, .panel > .rcard { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: 88px; }
  .panel > .rcard { grid-column: 3; }
}
/* 화면 사이 전환 (되는 브라우저만 · 움직임 줄이기면 안 함 · 차분한 단계면 머리 스크립트가 건너뛰어요). 화면은 짧게 겹쳐 바뀌고,
   탭 바는 제자리에, 고른 탭의 라임 알약은 다음 탭으로 미끄러지고, 누른 문·지역 이름은 다음 화면의 제목이 돼요 (nav.js) */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
.tabbar div { view-transition-name: tabbar; }
main h1 { view-transition-name: place-title; }
@media (max-width: 1023.98px) { .tabbar a[aria-current="page"] { view-transition-name: nav-pill; } }
::view-transition-old(root) { animation-duration: 120ms; }
::view-transition-new(root) { animation-duration: 180ms; }
::view-transition-group(nav-pill) { animation-duration: 260ms; animation-timing-function: var(--spring-soft); }
::view-transition-group(place-title) { animation-duration: 320ms; animation-timing-function: var(--ease-out); }
/* 차분한 단계: 움직임 줄이기를 켰거나, 데이터 절약 · ?fx=calm 이면(<html data-fx="calm">) 값만 바로 바뀌어요. 물결(늦게 출발)도 없어요.
   transition 은 아예 0초라 만들어지지도 않고(바꾼 값이 그 프레임에 바로 보여요), animation 은 끝난 모습이 바로 나오되 animationend 는 불리게 .01ms 로 둬요 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }
}
html[data-fx="calm"] *, html[data-fx="calm"] *::before, html[data-fx="calm"] *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; transition-delay: 0s !important; }