/* 청약각 웹 — 색은 앱 토큰(mobile/src/design/tokens.ts)과 같은 값을 쓴다 */
:root {
  --navy-900: #0B1626; --navy-800: #12233B; --navy-700: #1B3457; --navy-600: #27497A; --navy-400: #5B7BA8; --navy-50: #E7EDF6;
  --text: #111826; --text-2: #545C6B; --text-3: #8A93A3;
  --canvas: #F6F7F9; --surface: #FFFFFF; --sunken: #F1F2F4;
  --border: #E3E6EB; --border-strong: #D6DAE1;
  --pass: #147A5E; --pass-bg: #E6F4EF;
  --check: #B4761A; --check-bg: #FDF3E1; --check-text: #8A5A12;
  --maroon: #A4471F; --maroon-bg: #FBEEE8;
  --danger: #B3261E; --danger-bg: #FBEBEA;
  --radius: 14px; --radius-s: 10px;
  --shadow: 0 1px 2px rgba(11,22,38,.06);
  --shadow-raised: 0 6px 20px rgba(11,22,38,.10);
  --top-h: 56px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 64px); }
body {
  margin: 0; background: var(--canvas); color: var(--text);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 16px; line-height: 1.65; letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: anywhere;
}
a { color: var(--navy-600); text-underline-offset: 3px; }
.num { font-variant-numeric: tabular-nums; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 12px; top: 12px; z-index: 99; background: #fff; padding: 8px 12px; border-radius: 8px; }

/* ── 상단바 ── */
.top { position: sticky; top: 0; z-index: 30; height: var(--top-h); background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); }
.top-in { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.logo { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: 18px; color: var(--navy-800); text-decoration: none; letter-spacing: -0.03em; }
.logo-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--navy-800); color: #fff; font-size: 15px; }
.logo-img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.top-act { display: flex; align-items: center; gap: 8px; }
.top-grp { display: flex; gap: 4px; padding: 3px; background: var(--sunken); border-radius: 999px; }
.top-grp a { height: 30px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 999px; color: var(--navy-800); font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.top-share { display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--navy-800); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
@media (hover: hover) {
  .top-grp a:hover { background: var(--surface); box-shadow: var(--shadow); }
  .top-share:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); }
}
button.btn { border: 0; font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; }
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 60; transform: translate(-50%, 16px); opacity: 0; pointer-events: none; background: rgba(18,35,59,.94); color: #fff; font-size: 14.5px; font-weight: 600; padding: 11px 18px; border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.18); transition: opacity .2s, transform .2s; width: max-content; max-width: calc(100vw - 32px); text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 480px) {
  .logo { font-size: 16px; gap: 6px; }
  .logo-img { width: 26px; height: 26px; }
  .top-act { gap: 6px; }
  .top-grp a { padding: 0 9px; font-size: 13px; height: 28px; }
  .top-share { width: 34px; height: 34px; padding: 0; justify-content: center; }
  .top-share span { display: none; }
}
/* ★2026-09-23 — 상단 버튼이 3개(일반·무순위·오피스텔)가 되며 360px 폭에서 로고 글자가 세로로 꺾였다 */
@media (max-width: 400px) {
  .logo { white-space: nowrap; font-size: 15px; }
  .top-act { gap: 4px; }
  .top-grp { gap: 2px; }
  .top-grp a { padding: 0 6px; font-size: 12px; }
}

/* ── 히어로 ── */
.hero { background: radial-gradient(1200px 400px at 85% -10%, #2a4f82 0%, transparent 60%), linear-gradient(160deg, var(--navy-900), var(--navy-700)); color: #fff; padding: 28px 0 32px; }
.crumb { font-size: 13px; color: rgba(255,255,255,.65); display: flex; gap: 6px; align-items: center; }
.crumb a { color: rgba(255,255,255,.8); text-decoration: none; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.chip-s { font-size: 12.5px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.18); }
.chip-s.private { background: #fff; color: var(--navy-700); }
.chip-s.danger { background: var(--danger-bg); color: var(--danger); }
.hero h1 { font-size: clamp(28px, 5.4vw, 44px); line-height: 1.2; margin: 12px 0 8px; letter-spacing: -0.035em; font-weight: 800; }
.hero h1 span { display: block; font-size: .5em; font-weight: 600; color: rgba(255,255,255,.7); letter-spacing: -0.02em; margin-top: 4px; }
.hero-sub { margin: 0; color: rgba(255,255,255,.78); font-size: 15px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
.fact { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fact span { font-size: 12.5px; color: rgba(255,255,255,.66); }
.fact b { font-size: clamp(19px, 2.4vw, 24px); font-weight: 750; letter-spacing: -0.03em; }
.fact em { font-style: normal; font-size: 12.5px; color: rgba(255,255,255,.6); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fact.neg b { color: #FFC9A8; }
.fact.pos b { color: #9FE3C9; }
/* 공고 상세(.hero-d) 상단 여백 압축 — 메인·목록 hero 는 그대로 (2026-10-05) */
.hero.hero-d { padding: 14px 0 20px; }
.hero-d .chips { margin-top: 10px; }
.hero-d h1 { margin: 8px 0 5px; }
.hero-d .facts { margin-top: 16px; }
@media (min-width: 961px) { .hero-d + .layout { padding-top: 16px; } }
@media (max-width: 640px) {
  .hero.hero-d { padding: 10px 0 14px; }
  .hero-d .chips { margin-top: 8px; }
  .hero-d h1 { margin: 6px 0 4px; }
  .hero-d .facts { margin-top: 12px; }
  .hero-d + .layout .toc { margin-bottom: 8px; }
}

/* ── 본문 레이아웃 ── */
.layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 32px; padding-top: 28px; padding-bottom: 48px; }
.toc { position: sticky; top: calc(var(--top-h) + 20px); align-self: start; }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.toc a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; color: var(--text-2); text-decoration: none; font-size: 14.5px; font-weight: 550; }
.toc a span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--sunken); font-size: 12px; font-weight: 700; color: var(--text-3); }
.toc a:hover { background: var(--surface); color: var(--navy-700); box-shadow: var(--shadow); }
.toc a:hover span { background: var(--navy-50); color: var(--navy-600); }
.toc a { transition: background-color .2s, color .2s, border-color .2s; }
.toc a.on, .toc a.on:hover { background: var(--navy-800); color: #fff; border-color: var(--navy-800); box-shadow: none; }
.toc a.on span, .toc a.on:hover span { background: rgba(255,255,255,.18); color: #fff; }

/* ── 섹션 ── */
.sec { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px 28px; margin-bottom: 16px; box-shadow: var(--shadow); }
.sec-h { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 8px; }
.sec-no { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--navy-800); color: #fff; font-weight: 800; font-size: 16px; }
.sec h2 { margin: 0; font-size: 22px; line-height: 1.3; letter-spacing: -0.03em; }
.sec-lead { margin: 2px 0 0; color: var(--text-3); font-size: 14px; }
.sub { padding-top: 20px; margin-top: 20px; border-top: 1px solid var(--sunken); }
.sec-h + .sub { border-top: 0; margin-top: 4px; padding-top: 12px; }
.sub h3 { margin: 0 0 10px; font-size: 16.5px; letter-spacing: -0.02em; color: var(--navy-800); }

.kv { margin: 0; display: grid; gap: 0; }
.kv > div { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.kv > div:last-child { border-bottom: 0; }
.kv dt { color: var(--text-2); font-size: 14.5px; }
.kv dd { margin: 0; font-size: 15px; }
.unk { display: inline-flex; align-items: center; gap: 4px; color: var(--check-text); background: var(--check-bg); font-size: 13px; font-weight: 600; padding: 1px 8px; border-radius: 6px; }
.muted { color: var(--text-3); font-size: 14px; }
.note { font-size: 13.5px; color: var(--text-2); margin: 10px 0 0; }
.note.warn { color: var(--maroon); }
/* fmtText 줄 나눔 불릿(앱 문구 "• ...") — 줄마다 줄바꿈, 둘째 줄부터는 불릿 뒤에 맞춰 들여쓴다 */
.bl { display: block; padding-left: 1em; text-indent: -1em; margin: 2px 0; }
.bl::before { content: "•\00a0"; }
.note b, .jgrace b, .jlaw b, .assume b, .margin p b { font-weight: 700; }
.blk { display: block; color: var(--text-3); font-size: 13px; margin-top: 2px; }
.tag { display: inline-block; font-size: 12px; font-weight: 700; color: var(--pass); background: var(--pass-bg); padding: 1px 8px; border-radius: 6px; margin-left: 4px; }
.chip { display: inline-block; font-size: 12.5px; background: var(--sunken); color: var(--text-2); padding: 2px 8px; border-radius: 6px; margin: 2px 0; white-space: nowrap; }

.near { list-style: none; margin: 0; padding: 0; }
.near li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.near em { font-style: normal; font-size: 12px; color: var(--text-3); }
.near b { font-weight: 650; font-variant-numeric: tabular-nums; color: var(--navy-700); white-space: nowrap; }
/* 주요 업무지구까지 — 지구 이름 아래에 자동차·대중교통 시간 한 줄(사장님 2026-09-18) */
.near.cbd li { align-items: flex-start; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.near.cbd li:last-child { border-bottom: 0; }
.near.cbd em.cmt { display: block; font-size: 12.5px; color: var(--text-2); font-variant-numeric: tabular-nums; margin-top: 2px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.grid2 .kv > div { grid-template-columns: 120px minmax(0,1fr); }

.missing { margin-top: 20px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 14px 16px; font-size: 14px; color: var(--text-2); }
.missing strong { color: var(--text); font-size: 14px; }
.missing ul { margin: 6px 0; padding-left: 18px; }
.missing p { margin: 0; font-size: 13px; color: var(--text-3); }

/* ── 표 ── */
.tbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border); border-radius: var(--radius-s); margin-top: 4px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 560px; }
.tbl caption { text-align: left; font-size: 13px; color: var(--text-3); padding: 10px 14px 0; caption-side: top; }
.tbl th, .tbl td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--sunken); vertical-align: top; }
.tbl thead th { font-size: 13px; color: var(--text-3); font-weight: 600; background: var(--canvas); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl tbody th { font-weight: 650; white-space: nowrap; }
.tbl tbody th small { font-weight: 400; }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl td.num, .tbl td .num { text-align: right; white-space: nowrap; }
.tbl td.num { text-align: right; }
.tbl thead th:nth-child(n+2) { text-align: right; }
.tbl small { display: block; font-size: 12px; color: var(--text-3); font-weight: 400; }
.tbl .strong { font-weight: 700; color: var(--navy-800); }
.tbl tr.hl { background: var(--navy-50); }
.tbl.tracks thead th:nth-child(n+3), .tbl.tracks td:nth-child(n+3) { text-align: left; }
.tbl.tracks { min-width: 760px; }
.stages { margin: 0; padding-left: 18px; }
.stages li { margin: 0 0 6px; }
.stages li:last-child { margin-bottom: 0; }
.stages small { display: block; color: var(--text-3); font-size: 12.5px; }

/* ── 안전마진 ── */
.margin { border-radius: var(--radius); padding: 18px; background: var(--canvas); border: 1px solid var(--border); margin-bottom: 14px; }
.margin-eq { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 10px; }
.margin-eq > div { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; }
.margin-eq i { font-style: normal; font-size: 22px; color: var(--text-3); text-align: center; }
.margin-eq span { font-size: 12.5px; color: var(--text-3); }
.margin-eq b { font-size: 19px; letter-spacing: -0.03em; }
.margin-eq em { font-style: normal; font-size: 12px; color: var(--text-3); }
.margin-eq .res { border-width: 2px; }
.margin.neg .res { border-color: #E8C9BC; background: var(--maroon-bg); }
.margin.neg .res b { color: var(--maroon); }
.margin.pos .res { border-color: #B9DFD2; background: var(--pass-bg); }
.margin.pos .res b { color: var(--pass); }
.margin > p { margin: 12px 0 0; font-size: 14.5px; }
/* 교통 호재 한 줄(사장님 2026-09-21) — 마진 숫자 **아래**에 붙는 별도 줄.
   ★안전마진 값·계산과는 아무 상관이 없다(표시만). 그래서 .margin 상자 **밖**에 둔다. */
.boon { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin: -6px 0 14px; padding: 9px 12px;
  border: 1px dashed var(--border-strong); border-radius: var(--radius-s); background: var(--canvas); font-size: 13.5px; }
.boon > b { font-size: 12.5px; font-weight: 700; color: var(--navy-700); background: var(--navy-50); border-radius: 5px; padding: 1px 7px; }
.boon i { font-style: normal; color: var(--text-3); }
.boon small.blk { flex-basis: 100%; font-size: 11.5px; color: var(--text-3); }

/* ── 가점·추첨 비율 ── */
.ratio { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ratio li { display: grid; grid-template-columns: 220px 1fr auto; gap: 14px; align-items: center; font-size: 14.5px; }
.bar { height: 12px; border-radius: 999px; background: #D9E6F7; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--navy-600); border-radius: 999px 0 0 999px; }
.ratio b { font-weight: 650; white-space: nowrap; }

.types { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.types li { background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-s); padding: 10px 14px; font-size: 14.5px; }
.types b { color: var(--navy-800); margin-right: 4px; }
.types .num { color: var(--text-3); margin-left: 4px; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gallery figure { margin: 0; border: 1px solid var(--border); border-radius: var(--radius-s); overflow: hidden; background: #fff; }
.gallery img { display: block; width: 100%; height: auto; }
.gallery figcaption { font-size: 13px; padding: 8px 10px; color: var(--text-2); }

/* ── 일정 ── */
.timeline { list-style: none; margin: 0 0 8px; padding: 0; position: relative; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--border); }
.timeline li { position: relative; display: flex; gap: 16px; padding: 7px 0; }
.timeline .dot { flex: none; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--navy-600); margin-top: 4px; z-index: 1; }
.timeline div { display: grid; grid-template-columns: 140px 1fr; gap: 2px 16px; width: 100%; }
.timeline b { font-weight: 650; }
.timeline time { font-variant-numeric: tabular-nums; color: var(--navy-800); font-weight: 600; }
.timeline small { grid-column: 2; color: var(--text-3); font-size: 13px; }

/* ── 앱 안내·출처 ── */
.app-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(135deg, var(--navy-800), var(--navy-600)); color: #fff; border-radius: 18px; padding: 22px 26px; margin: 24px 0 16px; }
.app-cta strong { font-size: 17px; }
.app-cta p { margin: 4px 0 0; color: rgba(255,255,255,.78); font-size: 14.5px; }
.btn { flex: none; background: #fff; color: var(--navy-800); font-weight: 700; text-decoration: none; padding: 11px 18px; border-radius: 12px; font-size: 15px; }
.src { font-size: 13.5px; color: var(--text-2); padding: 4px 4px 0; }
.src p { margin: 0 0 8px; }
.site-foot { border-top: 1px solid var(--border); padding: 20px 0 32px; font-size: 13px; color: var(--text-3); }
.site-foot a { color: var(--text-2); }

/* ── 태블릿 ── */
@media (max-width: 960px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 0; }
  .toc { position: sticky; top: var(--top-h); z-index: 20; margin: 0 -20px 16px; background: rgba(246,247,249,.94); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
  .toc ol { flex-direction: row; overflow-x: auto; gap: 6px; padding: 10px 20px; scrollbar-width: none; }
  /* 마지막 항목도 맨 왼쪽까지 올 수 있게 뒤쪽 여백(사장님 2026-09-18 왼쪽 정렬) */
  .toc ol::after { content: ''; flex: 0 0 calc(100vw - 90px); }
  .toc ol::-webkit-scrollbar { display: none; }
  .toc a { white-space: nowrap; padding: 6px 12px 6px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 14px; }
  .toc a span { width: 20px; height: 20px; border-radius: 999px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  /* 공고 상세(2026-10-05 안 2): 스크롤을 내리면 헤더를 접고 목차 줄만 맨 위(top:0)에 고정 — 고정 영역 111px → 약 40px */
  .toc { display: flex; align-items: center; transition: top .22s ease; }
  .toc ol { flex: 1 1 auto; min-width: 0; padding-top: 6px; padding-bottom: 6px; padding-left: 0; }
  .toc a { padding-top: 4px; padding-bottom: 4px; line-height: 1.2; }
  .toc .toc-back { flex: 0 0 44px; width: 44px; height: 40px; margin-left: 2px; display: grid; place-items: center; color: var(--navy-800); font-size: 28px; line-height: 1; font-weight: 700; text-decoration: none; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
  .top { transition: transform .22s ease; }
  body.toc-fold .top { transform: translateY(-100%); }
  body.toc-fold .toc { top: 0; }
}
@media (max-width: 960px) and (prefers-reduced-motion: reduce) {
  .top, .toc { transition: none; }
}
@media (min-width: 961px) { .toc .toc-back { display: none; } }

/* ── 모바일 ── */
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .wrap { padding: 0 16px; }
  .toc { margin: 0 -16px 12px; }
  .toc ol { padding: 6px 16px 6px 0; }
  .hero { padding: 20px 0 22px; }
  .facts { gap: 8px; margin-top: 18px; }
  .fact { padding: 12px; }
  .fact b { font-size: 19px; }
  .sec { padding: 20px 16px; border-radius: 16px; margin-bottom: 12px; }
  .sec h2 { font-size: 19px; }
  .sec-no { width: 30px; height: 30px; font-size: 14px; }
  .kv > div, .grid2 .kv > div { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; }
  .kv dt { font-size: 13px; color: var(--text-3); }
  .grid2 { grid-template-columns: 1fr; }
  .margin { padding: 12px; }
  .margin-eq { grid-template-columns: 1fr; gap: 6px; }
  .margin-eq i { display: none; }
  .margin-eq > div { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: space-between; column-gap: 8px; }
  .margin-eq em { width: 100%; }
  .ratio li { grid-template-columns: 1fr auto; }
  .ratio .bar { grid-column: 1 / -1; grid-row: 2; }
  .timeline div { grid-template-columns: 1fr; }
  .timeline small { grid-column: 1; }
  .app-cta { flex-direction: column; align-items: stretch; padding: 20px; }
  .btn { text-align: center; }
  /* 표는 좁은 화면에서 카드처럼 편다 — 가로 스크롤 없이 읽히게 */
  .tbl-wrap { border: 0; overflow: visible; }
  .tbl { min-width: 0 !important; }
  .tbl caption { display: block; padding: 0 0 8px; }
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl, .tbl tbody, .tbl tr, .tbl th, .tbl td { display: block; }
  .tbl tr { border: 1px solid var(--border); border-radius: var(--radius-s); padding: 10px 12px; margin-bottom: 8px; background: #fff; }
  .tbl tr.hl { background: var(--navy-50); }
  .tbl tbody th { padding: 0 0 6px; border: 0; font-size: 15px; white-space: normal; }
  .tbl td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border: 0; text-align: right !important; }
  .tbl td::before { content: attr(data-label); color: var(--text-3); font-size: 13px; text-align: left; flex: none; }
  .tbl td .cv { text-align: right; }
  .tbl td small { display: inline; margin-left: 6px; }
  .tbl tbody th small { display: inline; margin-left: 6px; }
  .tbl.tracks td { display: block; text-align: left !important; }
  .tbl.tracks td .cv { display: block; text-align: left; }
  .tbl.tracks td::before { display: block; margin-bottom: 2px; }
}

/* ── 목록 ── */
.index-main { padding-top: 24px; padding-bottom: 48px; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
/* ★사장님 2026-09-21 "카드 슬롯 높이가 안 맞아 통일시켜줘"
   ① 칸(li)은 줄 높이만큼 늘어나는데 카드(a)가 안 늘어나서 들쭉날쭉했다 → li·card 둘 다 늘린다
   ② 단지명이 1줄이냐 2줄이냐로도 어긋났다 → 제목은 항상 2줄 자리를 차지하고 넘치면 …로 자른다
   ③ 아래 정보표(분양가·세대수·접수·마진)는 카드 바닥에 붙여 줄을 맞춘다 */
.cards > li { display: flex; }
/* ★검색으로 숨긴 카드 — `display:flex` 가 hidden 속성을 이겨서 안 숨겨지던 것(2026-09-21 실측) */
.cards > li[hidden], .closed-list > li[hidden] { display: none; }
.card { flex: 1; display: flex; flex-direction: column; gap: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; text-decoration: none; color: var(--text); box-shadow: var(--shadow); transition: box-shadow .15s, transform .15s; }
.card:hover { box-shadow: var(--shadow-raised); transform: translateY(-1px); }
/* ★사장님 2026-09-21 "안전마진이 분양가보다 10% 이상 좋은 건 카드 테두리를 배색"
   — 초록 계열(--pass)은 이미 양수 마진에 쓰는 색이라 그대로 쓰고, 테두리 2px + 옅은 배경 띠로만 구분한다 */
.card-hot { border: 2px solid var(--pass); background: linear-gradient(180deg, var(--pass-bg) 0%, var(--surface) 76px); }
.card-hot .card-kv dd.pos { font-weight: 800; }
.card strong { font-size: 18px; letter-spacing: -0.02em; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: calc(2 * 1.35em); }
.card-meta { font-size: 13px; color: var(--text-3); }
.card-row { font-size: 14.5px; color: var(--text-2); font-variant-numeric: tabular-nums; }

/* ═══════════ 2차(2026-09-17): 상세보기·지도·달력·전형카드·목록 ═══════════ */
.pg { display: inline-block; font-size: 11.5px; color: var(--text-3); background: var(--sunken); border-radius: 5px; padding: 0 6px; margin-left: 4px; vertical-align: middle; white-space: nowrap; }
.raw { font-size: 13px; color: var(--text-2); background: var(--canvas); border-left: 3px solid var(--border-strong); padding: 8px 12px; border-radius: 0 8px 8px 0; margin: 8px 0 0; }
.order { margin: 0 0 8px; font-size: 14px; }
.order b { color: var(--navy-700); margin-right: 6px; }
.bul { margin: 4px 0; padding-left: 18px; font-size: 14px; }
.bul li { margin: 3px 0; }
h4 { margin: 14px 0 6px; font-size: 14.5px; color: var(--navy-800); }

/* 상세보기(details) */
.dt { border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--surface); }
.dt > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 11px 40px 11px 14px; position: relative; font-size: 14.5px; }
.dt > summary::-webkit-details-marker { display: none; }
.dt > summary::after { content: ""; position: absolute; right: 16px; top: 50%; width: 8px; height: 8px; border-right: 2px solid var(--navy-400); border-bottom: 2px solid var(--navy-400); transform: translateY(-70%) rotate(45deg); transition: transform .15s; }
.dt[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.dt > summary:hover { background: var(--canvas); border-radius: var(--radius-s); }
.dt[open] > summary { border-bottom: 1px solid var(--sunken); border-radius: var(--radius-s) var(--radius-s) 0 0; }
.dt-b { padding: 12px 14px 14px; }
.dt.mini { border: 0; background: transparent; margin-top: 8px; }
.dt.mini > summary { padding: 6px 28px 6px 0; color: var(--navy-600); font-weight: 600; font-size: 14px; display: inline-flex; }
.dt.mini > summary::after { right: 8px; }
.dt.mini[open] > summary { border: 0; }
/* ── '공고문에 없음' 옆의 「왜 없나요?」(사장님 2026-09-21) ────────────────────
   값 자리에 들어가므로 작고 얌전하게. 접혀 있어도 글자는 HTML 에 그대로 남는다(검색엔진). */
.dt.why { display: block; margin-top: 3px; }
.dt.why > summary { font-size: 12.5px; font-weight: 600; color: var(--text-3); padding: 2px 20px 2px 0; }
.dt.why > summary::after { right: 4px; width: 6px; height: 6px; border-color: var(--text-3); }
.dt.why .dt-b { padding: 6px 10px; margin-top: 2px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-s); }
.dt.why .dt-b p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.dt.why .dt-b p:last-child { margin-bottom: 0; }
/* 페이지 끝의 「확인되지 않은 항목 N가지」 — 칸이 없는 항목까지 하나도 버리지 않고 모아 둔다 */
.why-all { margin: 18px 0 0; }
.why-all > summary { font-size: 13.5px; color: var(--text-2); }
.why-all .dt-b { padding: 10px 14px; background: var(--canvas); border: 1px solid var(--border); border-radius: var(--radius-s); }
.why-all .bul li { font-size: 13px; line-height: 1.6; color: var(--text-2); margin-bottom: 6px; }
.why-all .bul b { color: var(--text); }
.dt.mini > summary:hover { background: transparent; text-decoration: underline; }
.dt.mini > summary small { color: var(--text-3); font-weight: 400; margin-left: 6px; }
.dt.mini .dt-b { padding: 6px 0 0; }

/* ── 모바일 접기(사장님 2026-09-18 "모바일 버전은 …으로 표시하고 더보기") ──────────────
   접는 방식은 기존 상세보기와 같은 <details> 다. display:none 이 아니라서 접혀 있어도
   글자는 HTML 안에 그대로 있고 검색엔진이 읽는다.
   PC(721px 이상)에서는 '더보기' 줄을 감추고 본문을 펼친 상태로 되돌린다 — 지금과 같은 화면.
   ★2026-09-18 실측(Chromium): 닫힌 <details> 본문은 ::details-content 의 content-visibility:hidden
     으로 감춰진다. 그래서 그 속성을 되돌려야 펼쳐진다(display 만 바꾸면 안 펼쳐진다).
     ::details-content 를 모르는 낡은 브라우저에서는 '더보기' 줄을 그대로 남겨 눌러서 펼치게 둔다. */
.m-fold { margin-top: 6px; }
.m-fold > summary { font-size: 14px; }
@media (min-width: 721px) {
  .m-fold { margin-top: 0; }
  .m-fold::details-content { content-visibility: visible; }
  .m-fold > .dt-b { padding: 0; }
  /* .dt.mini > summary(특이도 0,2,1)를 이기려면 이쪽도 클래스 둘 이상이어야 한다(2026-09-18 실측) */
  @supports selector(::details-content) { .dt.mini.m-fold > summary { display: none; } }
}

/* 위치 지도 2장 */
.maps2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.map { margin: 0; }
.map-box { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #eef1f4; aspect-ratio: 1 / 1; }
.map-box img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map figcaption { font-size: 13.5px; color: var(--text-2); padding: 8px 2px 0; }
.map figcaption b { color: var(--text); }
.home { position: absolute; transform: translate(-50%, -100%); z-index: 5; display: flex; flex-direction: column; align-items: center; pointer-events: none; }
.home i { width: 22px; height: 22px; background: var(--danger); border: 3px solid #fff; border-radius: 50% 50% 50% 0; transform: rotate(-45deg) translate(3px, -3px); box-shadow: 0 2px 6px rgba(0,0,0,.35); order: 2; }
.home b { order: 1; background: var(--navy-900); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 6px; white-space: nowrap; margin-bottom: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.25); max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.gl { width: 14px; height: 14px; flex: none; vertical-align: -2px; }
.spin, .ipin { position: absolute; transform: translate(-50%, -50%); z-index: 3; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: var(--navy-700); border: 1.5px solid var(--navy-600); box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: default; outline: none; }
.spin .gl, .ipin .gl { width: 13px; height: 13px; }
.spin b { display: none; position: absolute; left: 125%; top: 50%; transform: translateY(-50%); white-space: nowrap; background: #fff; color: var(--text); border: 1px solid var(--border-strong); font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; box-shadow: var(--shadow-raised); }
.ipin b { display: none; position: absolute; left: 50%; bottom: 125%; transform: translateX(-50%); white-space: nowrap; background: #fff; color: var(--text); border: 1px solid var(--border-strong); font-size: 11.5px; font-weight: 600; padding: 2px 7px; border-radius: 6px; box-shadow: var(--shadow-raised); }
.spin.on b, .spin:hover b, .spin:focus b, .ipin:hover b, .ipin:focus b { display: block; }
.spin:hover, .spin:focus, .ipin:hover, .ipin:focus { z-index: 9; }
.near.st li span { display: inline-flex; align-items: center; gap: 6px; }
.near.st .gl { color: var(--navy-600); }
/* 역 목록 접기(사장님 2026-09-21 "가까운 8곳만 펼친 상태") — 앞 목록과 이어 붙어 보이게 여백을 없앤다.
   PC 는 위 `.m-fold` 규칙이 자동으로 펼쳐 준다(지금과 같은 화면). */
.st-more { margin-top: 0; }
.st-more > summary { font-size: 13px; color: var(--navy-600); }
.st-more > .dt-b { padding: 0; }  /* 접힌 목록이 위 목록과 왼쪽 줄이 맞게 */
.near.st.st-rest { margin-top: 0; }

/* 주변 인프라 지도 — 종류별 색 */
.map.infra { max-width: 560px; margin: 0 auto 14px; }
.rings { position: absolute; inset: 0; pointer-events: none; }
.ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px dashed rgba(39,73,122,.35); }
.ring.r1k { border: 1.5px solid rgba(39,73,122,.6); background: rgba(39,73,122,.04); }
.ring em { position: absolute; top: -1px; left: 50%; transform: translate(-50%, -50%); font-style: normal; font-size: 11px; font-weight: 700; color: var(--navy-700); background: rgba(255,255,255,.9); padding: 0 5px; border-radius: 4px; }
.k-subway { --kc: #27497A; } .k-daycare { --kc: #B4761A; } .k-kinder { --kc: #C0582B; } .k-elem { --kc: #147A5E; } .k-mid { --kc: #1F6F6B; }
.k-high { --kc: #6B4E9E; } .k-mart { --kc: #A4471F; } .k-park { --kc: #3F7D2C; } .k-lib { --kc: #7A5C2E; } .k-hosp { --kc: #B3261E; }
.ipin { color: var(--kc, var(--navy-700)); border-color: var(--kc, var(--navy-600)); }
.legend { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12.5px; }
.legend li { display: inline-flex; align-items: center; gap: 4px; color: var(--kc); font-weight: 600; }
.cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cat .dt > summary, .cat-flat { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cat-flat { border: 1px solid var(--border); border-radius: var(--radius-s); padding: 11px 14px; background: var(--canvas); font-size: 14.5px; }
.cat-h { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text); }
.cat-h .gl { color: var(--kc); width: 17px; height: 17px; }
.cat-n { font-size: 13.5px; color: var(--text-2); white-space: nowrap; }
.cat-n b { color: var(--navy-800); font-size: 15px; margin-left: 2px; }
.cat-n.zero b { color: var(--text-3); font-weight: 500; }
/* ★2026-09-21 사장님 — 1km 안에 없으면 '가장 가까운 곳 1.8km'를 같은 줄에 붙인다. 글이 길어져
   nowrap 이면 좁은 화면에서 잘리므로 이 경우에만 줄바꿈을 푼다. 거리는 다시 또렷하게 보여 준다. */
.cat-n.zero { white-space: normal; text-align: right; font-size: 12.5px; }
.cat-n b.nz { color: var(--navy-800); font-weight: 700; font-size: 12.5px; }
.cat-n.zero b { font-size: 13px; }
/* 종류 이름('대형마트'·'응급실 있는 병원')이 글자 사이에서 끊기지 않게 — 줄바꿈은 오른쪽 글이 맡는다 */
.cat-h > span { white-space: nowrap; }
.near.out { font-size: 13px; color: var(--text-3); }
.near-t { margin: 8px 0 2px; font-size: 12px; color: var(--text-3); font-weight: 600; }
.dt-b > .near-t:first-child { margin-top: 0; }
.near.out b { color: var(--text-3); font-weight: 500; }

/* 평형 묶음 */
.bands { display: grid; gap: 8px; }
.band > summary { display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 12px; padding-top: 13px; padding-bottom: 13px; }
.band-n { font-size: 19px; font-weight: 800; color: var(--navy-800); letter-spacing: -0.02em; }
.band-n small { display: block; font-size: 12px; color: var(--text-3); font-weight: 500; }
.band-m { color: var(--text-2); font-size: 14px; }
.band-p { text-align: right; }
.band-p small { display: block; font-size: 12px; color: var(--text-3); }
.band-p b { font-size: 17px; color: var(--navy-800); }
.opts { list-style: none; padding: 0; margin: 0; }
.opts li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 14px; }
.opts li small { display: block; color: var(--text-3); font-size: 12px; }
.opts b { white-space: nowrap; font-weight: 650; }

/* 전형 카드 */
.tracks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.track { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; background: var(--canvas); min-width: 0; }
.track header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.track h4 { margin: 0; font-size: 16px; }
.track header b { font-size: 15px; color: var(--navy-700); background: var(--navy-50); padding: 2px 10px; border-radius: 999px; }
.conds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.dt { min-width: 0; }
.dt-b { overflow-x: auto; }
.stages > li { min-width: 0; }
.cond > summary { padding-top: 9px; padding-bottom: 9px; font-size: 14px; }
.chip-l { flex: none; font-size: 11.5px; font-weight: 700; color: var(--navy-600); background: var(--navy-50); padding: 1px 7px; border-radius: 5px; }
.lbl { margin: 12px 0 6px; font-size: 13px; font-weight: 700; color: var(--text-2); }
.lbl small { font-weight: 400; color: var(--text-3); margin-left: 4px; }
.stages { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.stage > summary { font-size: 14px; }
.st-n { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy-800); color: #fff; font-size: 12px; font-weight: 700; }
.st-t { flex: 1; min-width: 0; }
.st-t b { color: var(--navy-600); }
.st-u { flex: none; font-weight: 650; color: var(--text); }
.score { margin-top: 6px; }
.score-h { margin: 0 0 6px; font-size: 13.5px; }
.score ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.score li { background: var(--canvas); border-radius: 8px; padding: 8px 10px; }
.score li > div { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; }
.score li > div span { color: var(--navy-600); font-weight: 700; white-space: nowrap; }
.score li p { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px; }
.lv { font-size: 12px; background: #fff; border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; color: var(--text-2); }
.lv b { color: var(--navy-800); }
.score li small { display: block; color: var(--text-3); font-size: 12px; margin-top: 4px; }
.lot ol { margin: 0; padding-left: 20px; font-size: 14px; }
.lot li { margin: 3px 0; }
.tbl.inc { min-width: 480px; font-size: 13.5px; }
.tbl.inc th em { display: block; font-style: normal; font-size: 11px; color: var(--pass); }
.tbl.pay td:nth-child(3) { text-align: left; }

/* 규제 */
.rules { display: grid; gap: 8px; }
.rule-d > summary, .rule-flat { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; align-items: center; }
.rule-flat { border: 1px solid var(--border); border-radius: var(--radius-s); padding: 11px 14px; }
.rule-k { color: var(--text-2); font-size: 14px; font-weight: 600; }
.rule-v { font-size: 14.5px; }
.law { background: var(--canvas); border-radius: 8px; padding: 10px 12px; margin-top: 8px; }
.law:first-child { margin-top: 0; }
.law.easy { background: var(--navy-50); }
.law b { font-size: 14px; color: var(--navy-800); }
.law p { margin: 4px 0 0; font-size: 13.5px; color: var(--text-2); }
.law .links a { font-size: 13px; margin-right: 8px; }

/* 달력 */
.cals { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 8px; }
.cal { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.cal caption { text-align: left; font-weight: 800; font-size: 16px; color: var(--navy-800); padding: 0 3px 6px; }
.cal th { font-size: 12px; color: var(--text-3); font-weight: 600; padding: 2px 0; }
.cal td { vertical-align: top; height: 58px; background: var(--canvas); border-radius: 8px; padding: 4px; font-size: 12px; overflow: hidden; }
.cal td.pad { background: transparent; }
.cal .dn { display: block; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cal td.sun .dn { color: var(--danger); }
.cal td.sat .dn { color: var(--navy-600); }
.cal td.has { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ec); }
.ev { display: block; margin-top: 2px; font-size: 11px; font-weight: 700; line-height: 1.25; color: var(--ec); word-break: keep-all; }
.e-notice { --ec: #5B7BA8; } .e-apply { --ec: #27497A; } .e-result { --ec: #147A5E; } .e-doc { --ec: #B4761A; } .e-contract { --ec: #A4471F; }
.cal-leg { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-2); }
.cal-leg li::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--ec); margin-right: 5px; vertical-align: -1px; }

/* 갤러리 */
.gallery a { display: block; }
.gallery.wide { grid-template-columns: 1fr; }
.gallery.wide img { max-height: 720px; object-fit: contain; background: #fff; }
.band .gallery { margin-top: 12px; }

/* 목록 */
.rg { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.rg a { color: #fff; text-decoration: none; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); padding: 5px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; }
.rg a b { margin-left: 4px; color: #9FC3F0; }
.rg a.on { background: #fff; color: var(--navy-800); border-color: #fff; }
.rg a.on b { color: var(--navy-800); }
.empty { padding: 40px 16px; text-align: center; color: var(--text-3); background: var(--surface, #fff); border: 1px dashed var(--border); border-radius: 14px; }
.rg-sec { margin-bottom: 28px; }
.rg-sec h2 { font-size: 20px; margin: 0 0 12px; letter-spacing: -0.02em; }
.rg-sec h2 small { font-size: 14px; color: var(--text-3); font-weight: 500; }
.card { gap: 8px; }
.card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.st { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.st-on { background: var(--pass-bg); color: var(--pass); }
.st-soon { background: var(--navy-50); color: var(--navy-600); }
.st-off { background: var(--sunken); color: var(--text-3); }
.card-kv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: auto 0 0; padding-top: 4px; }
/* 안전마진은 한 줄을 다 쓴다 — 공고일이 들어오며 칸이 5개가 돼 마지막 줄이 비어 보이던 것 */
.card-kv .kv-wide { grid-column: 1 / -1; }
/* ★사장님 2026-09-21 "안전마진만 셋째 줄에 있으니 가운데 정렬하고 강조하자" */
.card-kv .kv-wide { align-items: center; text-align: center; border-top: 1px dashed var(--border); margin-top: 2px; padding-top: 8px; }
.card-kv .kv-wide dt { font-size: 12.5px; }
.card-kv .kv-wide dd { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; }
.card-kv div { display: flex; flex-direction: column; }
.card-kv dt { font-size: 12px; color: var(--text-3); }
.card-kv dd { margin: 0; font-size: 15px; font-weight: 650; color: var(--text); }
.card-kv dd.neg { color: var(--maroon); }
.card-kv dd.pos { color: var(--pass); }

/* 노선 지도(가장 가까운 역 + 앞뒤 역) */
.lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lines polyline { fill: none; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; opacity: .9; vector-effect: non-scaling-stroke; }
.ldot { position: absolute; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: #fff; border: 2.5px solid var(--lc); z-index: 2; }
.lst { position: absolute; transform: translate(-50%, -50%); z-index: 4; display: flex; align-items: center; }
.lst i { width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 4px solid var(--lc); box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.lst b { position: absolute; left: 20px; white-space: nowrap; background: #fff; color: var(--text); border: 1px solid var(--border-strong); font-size: 12px; font-weight: 700; padding: 2px 7px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.lst.near1 i { width: 22px; height: 22px; border-width: 5px; }
.lst.near1 b { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }
/* ★2026-09-21 사장님 "프레임 안 역 이름을 전부" — 점(등급별 크기)과 이름표(.llab)를 따로 그린다.
   자리는 서버(build-maps.mjs)가 겹침을 피해 정해 둔 퍼센트 값이라 여기서는 크기만 맞춘다.
   등급 t1=가장 가까운 역 · t2=공고문 인근 역 · t3=앞뒤 역 · t4=그 밖의 프레임 안 역 */
.lst.t1 i { width: 22px; height: 22px; border-width: 5px; }
.lst.t2 i { width: 18px; height: 18px; border-width: 4.5px; }
.lst.t3 i { width: 13px; height: 13px; border-width: 3.5px; }
.lst.t4 i { width: 9px; height: 9px; border-width: 2.5px; }
.llab {
  position: absolute; transform: translate(-50%, -50%); z-index: 5; white-space: nowrap;
  background: rgba(255,255,255,.94); color: var(--text); border: 1px solid var(--border-strong);
  font-size: 11px; font-weight: 700; line-height: 1.35; padding: 1px 5px; border-radius: 5px;
  box-shadow: 0 1px 4px rgba(0,0,0,.14);
}
.llab.t1 { background: var(--navy-900); color: #fff; border-color: var(--navy-900); z-index: 7; }
.llab.t2 { z-index: 6; }
/* 그 밖의 역은 9px — 역이 촘촘한 곳(의정부 경전철 18역)에서 11px 로는 자리가 물리적으로 모자란다.
   ★서버(build-maps.mjs LABEL_FONT_SMALL_PX)가 이 크기로 자리를 계산한다. 둘을 같이 고칠 것. */
.llab.t4 { font-size: 9px; font-weight: 600; color: var(--text-2); padding: 1px 4px; }
/* 환승역 이름표 앞 노선 색 칩(사장님 2026-09-21 3차 "환승역은 두 호선 모두 표시").
   지도 위라 글자 칩은 못 넣는다 — 같은 색의 작은 네모로 줄여서 붙인다. 목록에는 글자 칩이 그대로 있다. */
.llab i { display: inline-block; width: .58em; height: .58em; border-radius: 2px; background: var(--c); margin-right: 2px; vertical-align: 0; }
.lchip { display: inline-block; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--lc); padding: 1px 7px; border-radius: 999px; vertical-align: 1px; }
/* ── 개통 **예정** 역·노선(사장님 2026-09-21 "미래 지하철역 GTX역 … (20xx예정) 이런 식으로") ──
   아직 없는 것이므로 **전부 점선**으로 그려 개통 노선과 갈라 놓는다. 색은 노선 공식색을 지어내지
   않고 회색 하나(build-maps.mjs PLANNED_COLOR)로 통일했다 — 어느 노선인지는 글자 칩이 말해 준다. */
.lines polyline.pln-halo { stroke: #fff; stroke-width: 7; opacity: .85; stroke-dasharray: none; }
.lines polyline.pln { stroke-width: 4; stroke-dasharray: 8 7; opacity: 1; }
.lst.pln i { width: 11px; height: 11px; border: 2.5px dashed var(--lc); background: #fff; box-shadow: none; }
.llab.pln { font-size: 9px; font-weight: 600; color: var(--text-2); padding: 1px 4px; z-index: 3; border-style: dashed; background: rgba(255,255,255,.9); }
.lchip.pln { color: var(--text-2); background: #fff; border: 1px dashed var(--border-strong); padding: 0 6px; font-weight: 650; }
.near.st em.pln { color: var(--text-2); background: transparent; border: 1px dashed var(--border-strong); }
/* 아직 역명심의 전인 예정역 — 이름 뒤에 '가칭'을 작게 붙인다(역명은 보통 개통 몇 달 전 확정) */
.pln-t { font-size: 10.5px; font-weight: 600; color: var(--text-3); margin-left: 3px; }
.near.st .st-1 span { font-weight: 700; }
.near.st em { font-style: normal; font-size: 11.5px; color: var(--navy-600); background: var(--navy-50); padding: 0 6px; border-radius: 5px; margin-left: 4px; }

/* 안전마진 비교단지 지도(사장님 2026-09-18) — 핀 하나에 연식·거래가격·거래일시·평수를 다 적는다.
   지도가 넓게 나올 수 있어 한 변을 본문 폭 전체로 쓴다(지도1·2 처럼 반반이 아니다). */
.map.comps { margin: 14px 0 10px; }
.map.comps .map-box { max-width: 560px; }
.cpin { position: absolute; transform: translate(-50%, -50%); z-index: 4; display: flex; align-items: center; }
.cpin i { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--navy-700); color: #fff; border: 3px solid #fff; font-style: normal; font-size: 11px; font-weight: 800; line-height: 14px; text-align: center; box-shadow: 0 1px 5px rgba(0,0,0,.4); }
/* 이름표는 줄바꿈해서 좁게 — 한 줄로 길게 두면 지도 가장자리에서 잘린다(2026-09-18 실측) */
.cpin b { position: absolute; top: 50%; transform: translateY(calc(-50% + var(--dy, 0px))); left: 24px; width: 172px; background: rgba(255,255,255,.95); color: var(--text); border: 1px solid var(--border-strong); font-size: 11.5px; font-weight: 700; line-height: 1.35; padding: 3px 7px; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.cpin.flip b { left: auto; right: 24px; text-align: right; }
.cpin .nw { white-space: nowrap; }
/* 좁은 화면(폰)에서는 이름표를 숨기고 번호만 둔다 — 지도 한 변이 330px 남짓이라 158px 이름표 5개가
   물리적으로 안 들어간다(2026-09-18 실측: 5곳 중 2곳이 틀 밖으로 잘렸다).
   같은 내용은 바로 아래 표에 번호와 함께 그대로 있다. */
@media (max-width: 720px) { .cpin b { display: none; } }
.cpin b em { display: block; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--text-2); font-variant-numeric: tabular-nums; }
.cpin b em.p { color: var(--text); font-weight: 700; }
.cno.dim { background: var(--text-3); }
.cno { display: inline-block; min-width: 17px; height: 17px; margin-right: 6px; border-radius: 50%; background: var(--navy-700); color: #fff; font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; }
/* 이름표 안 번호 — 이름표가 핀에서 밀려나도 어느 핀인지 헷갈리지 않게(2026-09-18 실측) */
.cpin b { padding-left: 23px; }
.cpin.flip b { padding-left: 7px; padding-right: 23px; }
.cpin b .cno { position: absolute; left: 5px; top: 4px; min-width: 15px; height: 15px; line-height: 15px; font-size: 10px; margin: 0; }
.cpin.flip b .cno { left: auto; right: 5px; }

/* 비교단지 번호 연동(사장님 2026-09-18 "지도의 번호랑 밑에 번호는 클릭하면 배색되게 서로 연동").
   강조색은 주변 인프라 목록↔핀 강조와 같은 토큰(navy-600 / navy-50)을 쓴다 — 새 색을 만들지 않는다. */
button.cpin { padding: 0; border: 0; background: transparent; font: inherit; color: inherit; text-align: inherit; cursor: pointer; }
.comps-tbl tr[data-c] { cursor: pointer; }
.map-box.cdim .cpin { opacity: .3; }
.map-box.cdim .cpin.sel { opacity: 1; z-index: 9; }
.cpin.sel i { background: var(--navy-600); box-shadow: 0 0 0 3px var(--navy-50), 0 1px 5px rgba(0,0,0,.4); }
/* 이름표는 원래 규칙 그대로 — 좁은 화면에서는 숨긴 채 둔다(172px 이름표가 지도 밖으로 잘린다). */
.cpin.sel b { border-color: var(--navy-600); box-shadow: 0 0 0 2px var(--navy-50), 0 2px 6px rgba(0,0,0,.18); }
.comps-tbl tr.csel { background: var(--navy-50); }
.comps-tbl tr.csel > * { border-color: var(--navy-600); }
.comps-tbl tr.csel .cno { background: var(--navy-600); box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--navy-600); }

/* 시 경계선 지도(1번) — 카카오 행정구역 역지오코딩으로 만든 경계 + 시 이름.
   흰 바깥선 + 진한 안쪽선 2겹이라 배경지도(위성·색이 다양한 카카오 맵) 위에서도 안 뭉개진다. */
.rbound { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rbound polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* ★사장님 결정(2026-09-21 3차) "한 번이면 되고, 두 번째 그린 걸로 하자" — 굵은 첫 선을 버리고
   **가는 선** 쪽으로 맞췄다(예전 5.5/2.2 → 3.8/1.6). 같은 경계가 두 줄로 나오던 것은
   build-maps.mjs 에서 **선분 자체를 한 번만 만들게** 고쳤다(edgePoint·emittedSegments). */
.rbound polyline.out { stroke: #fff; stroke-width: 3.8; opacity: .95; }
.rbound polyline.in { stroke: var(--navy-700); stroke-width: 1.6; }
/* 이웃 시(nb)는 격자 중점으로 그린 약 700m 해상도 참고선이다(대상 시만 이분 탐색으로 약 50m).
   대상 시와 계속 구별되게 한 단계 더 얇고 흐리게. */
.rbound polyline.out.nb { stroke-width: 3.0; opacity: .85; }
.rbound polyline.in.nb { stroke: var(--navy-400); stroke-width: 1.1; }
.rbound text { fill: var(--navy-900); font-size: 5.4px; font-weight: 800; paint-order: stroke fill; stroke: #fff; stroke-width: 1.8px; stroke-linejoin: round; }
.rbound text.nb { fill: var(--text-2); font-size: 4.2px; font-weight: 700; stroke-width: 1.5px; }

/* 인프라 목록 ↔ 지도 강조 */
button.ipin { padding: 0; font: inherit; cursor: pointer; }
.ipin.extra { display: none; }
.map-box.dim .ipin { opacity: .22; }
.map-box.dim .ipin.on { opacity: 1; display: grid; background: var(--kc); color: #fff; border-color: #fff; width: 26px; height: 26px; z-index: 6; box-shadow: 0 2px 8px rgba(0,0,0,.35); }
.map-box.dim .ipin.on .gl { width: 15px; height: 15px; }
.map-box.dim .ipin.sel { z-index: 8; transform: translate(-50%, -50%) scale(1.25); }
.map-box.dim .ipin.sel b { display: block; }
.cat.act .dt, .cat.act .cat-flat { border-color: var(--kc, var(--navy-600)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--navy-600) 18%, transparent); }
.cat li[data-id] { cursor: pointer; border-radius: 6px; padding-left: 4px; padding-right: 4px; margin: 0 -4px; }
.cat li[data-id]:hover { background: var(--canvas); }
.cat li.sel { background: var(--navy-50); font-weight: 700; }
.cat-flat { cursor: pointer; }

/* 지도 → 카카오맵 */
a.map-box { display: block; color: inherit; text-decoration: none; }
.kmap { position: absolute; right: 8px; bottom: 8px; z-index: 9; background: #FEE500; color: #191600; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(0,0,0,.2); }

/* 자금 조달 표 */
/* 자금표 3토막(모바일 접기, 사장님 2026-09-18) — 같은 상자 안에서 열 너비를 맞춰 한 표처럼 이어 보인다 */
.fund-split { display: block; }
.fund-split .tbl.fund { table-layout: fixed; }
.fund-split .fc-k { width: 62%; }
.fund-split .tbl tbody tr:last-child > * { border-bottom: 1px solid var(--sunken); }
.fund-split > table:last-child tbody tr:last-child > * { border-bottom: 0; }
.tbl.fund { min-width: 0; }
.tbl.fund thead th:nth-child(n+2) { text-align: right; }
.tbl.fund tbody th { white-space: normal; font-weight: 600; }
.tbl.fund tbody th small { display: block; font-weight: 400; color: var(--text-3); font-size: 12px; }
.tbl.fund td small { display: block; font-size: 11.5px; color: var(--text-3); font-weight: 400; }
.tbl.fund tr.sub-h > * { border-top: 2px solid var(--border); }
.tbl.fund tr.sum > * { background: var(--canvas); }
.tbl.fund tr.total > * { background: var(--navy-50); font-size: 15.5px; }
.tbl.fund tr.total td strong { color: var(--navy-800); font-size: 17px; }
.assume { margin: 10px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-2); }
.assume li { margin: 3px 0; }

/* 전형 — 지역 우선 · 핵심 자격 */
.rg-mode { margin: 0 0 10px; font-size: 13.5px; border-radius: 8px; padding: 8px 10px; }
.rg-mode b { font-size: 12px; padding: 1px 7px; border-radius: 5px; margin-right: 6px; }
.rg-mode small { display: block; margin-top: 3px; color: var(--text-2); font-size: 12.5px; }
.rg-mode.priority { background: var(--check-bg); }
.rg-mode.priority b { background: var(--check); color: #fff; }
.rg-mode.split, .rg-mode.agency { background: var(--pass-bg); }
.rg-mode.split b, .rg-mode.agency b { background: var(--pass); color: #fff; }
.rg-sum { display: grid; gap: 6px; margin-bottom: 14px; }
.rg-sum p { margin: 0; display: grid; grid-template-columns: 220px 1fr; gap: 10px; padding: 9px 12px; border-radius: 10px; font-size: 14px; }
.rg-sum p.ok { background: var(--pass-bg); }
.rg-sum p.ok b { color: var(--pass); }
.rg-sum p.warn { background: var(--check-bg); }
.rg-sum p.warn b { color: var(--check-text); }
.keys { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.keys .dt.key { flex: 1 1 auto; min-width: 45%; }
.key > summary { padding-top: 8px; padding-bottom: 8px; }
.key-h { font-weight: 700; font-size: 14.5px; color: var(--navy-800); }

/* 조감도 */
.aerial { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); background: #0B1626; }
.aerial img { display: block; width: 100%; max-height: 640px; object-fit: cover; }
.aerial figcaption { position: absolute; left: 12px; top: 12px; background: rgba(11,22,38,.72); color: #fff; font-size: 12.5px; padding: 3px 10px; border-radius: 999px; }
.struct { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 6px; padding: 28px 12px 12px; background: linear-gradient(transparent, rgba(11,22,38,.85)); }
.sc { font-size: 13px; color: #fff; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); padding: 4px 10px; border-radius: 999px; }
.sc b { margin-right: 4px; }
.sc.flat b { color: #9FE3C9; }
.sc.tower b { color: #FFC9A8; }

@media (max-width: 960px) {
  .tracks { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .maps2 { grid-template-columns: 1fr; }
  .cats { grid-template-columns: 1fr; }
  .band > summary { grid-template-columns: 1fr auto; }
  .band > summary .band-m { grid-column: 1 / -1; grid-row: 2; font-size: 13px; }
  .band-p b { font-size: 15.5px; }
  .rule-d > summary, .rule-flat { grid-template-columns: 1fr; gap: 2px; }
  .rule-k { font-size: 12.5px; color: var(--text-3); }
  .cal td { height: 50px; padding: 3px; }
  .ev { font-size: 10px; letter-spacing: -0.03em; }
  .cals { grid-template-columns: 1fr; }
  .home b { font-size: 11px; max-width: 120px; }
  .tbl.inc { display: table !important; min-width: 460px !important; }
  .tbl.inc thead { position: static; width: auto; height: auto; clip: auto; }
  .tbl.inc thead, .tbl.inc tbody { display: table-row-group !important; }
  .tbl.inc thead { display: table-header-group !important; }
  .tbl.inc tr { display: table-row !important; border: 0; padding: 0; }
  .tbl.inc th, .tbl.inc td { display: table-cell !important; padding: 6px 8px; text-align: right !important; }
  .tbl.inc td::before { content: none; }
  /* 납부 일정표는 4칸이라 모바일에서도 표 그대로 — 카드로 펴면 9장이 늘어진다 */
  .tbl.pay { display: table !important; font-size: 13px; }
  .tbl.pay thead { position: static; width: auto; height: auto; clip: auto; display: table-header-group !important; }
  .tbl.pay tbody { display: table-row-group !important; }
  .tbl.pay tr { display: table-row !important; border: 0; padding: 0; margin: 0; }
  .tbl.pay th, .tbl.pay td { display: table-cell !important; padding: 7px 6px; border-bottom: 1px solid var(--sunken); }
  .tbl.pay td::before { content: none; }
  .tbl.pay td .cv { text-align: inherit; }
  .tbl.pay tbody th { font-size: 13px; white-space: nowrap; }
  /* 자금표도 3칸 표 그대로 */
  .tbl.fund { display: table !important; font-size: 13px; }
  .tbl.fund thead { position: static; width: auto; height: auto; clip: auto; display: table-header-group !important; }
  .tbl.fund tbody { display: table-row-group !important; }
  .tbl.fund tr { display: table-row !important; border: 0; padding: 0; margin: 0; background: transparent; }
  .tbl.fund th, .tbl.fund td { display: table-cell !important; padding: 7px 6px; border-bottom: 1px solid var(--sunken); }
  .tbl.fund td { text-align: right !important; }
  .tbl.fund td::before { content: none; }
  .tbl.fund tbody th { font-size: 13px; }
  .tbl.fund tr.total td strong { font-size: 14.5px; }
  .rg-sum p { grid-template-columns: 1fr; gap: 2px; }
  .keys .dt.key { min-width: 100%; }
  .struct { position: static; background: #0B1626; }
  .aerial img { max-height: 320px; }
  .tbl-wrap.scroll { overflow-x: auto; border: 1px solid var(--border); }
  .dt-b { padding: 10px 12px 12px; }
  .tbl td.num { white-space: normal; }
  .tbl td .cv small { display: block; margin-left: 0; }
}

.grp-note { margin: -6px 0 12px; font-size: 13.5px; color: var(--text-3); }

/* 접수 마감된 공고 — 목록에서 빠진 공고 페이지가 고아가 되지 않게 링크만 모아 둔다 */
.closed-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.closed-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.closed-list a { font-weight: 700; color: var(--navy-800); text-decoration: none; }
.closed-list span { font-size: 13px; color: var(--text-3); }

/* 자금표 — 직접 살 때 한 줄 + 맨 끝 '전세를 놓을 경우' (사장님 2026-09-17) */
.tbl.fund.one td { white-space: nowrap; }
.jeonse { margin: 14px 0 6px; border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; background: var(--surface); }
.jeonse h4 { margin: 0 0 10px; font-size: 15.5px; letter-spacing: -0.02em; }
.jeonse.no { background: var(--check-bg, #fff4e5); }
.jeonse.no b { color: var(--check-text, #a15c00); }
.jeonse .jgrace { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--text); background: var(--check-bg); border-radius: 10px; padding: 9px 11px; }
.jeonse .jlaw { margin: 6px 0 0; font-size: 12.5px; color: var(--text-3); }
.jt { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.jt li { display: grid; grid-template-columns: 92px 1fr; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--canvas); }
.jt li.on { background: var(--navy-50, #eef3fb); box-shadow: inset 3px 0 0 var(--navy-700); }
.jt-when { font-weight: 700; font-size: 14px; color: var(--navy-800); }
.jt-when small, .jt-what small { display: block; font-weight: 500; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.jt-what { font-size: 14px; line-height: 1.5; }
.jt-what b { font-variant-numeric: tabular-nums; }
.jt-sum { margin: 12px 0 0; font-size: 15px; }
.jt-sum s { color: var(--text-3); }
.jt-sum b { font-size: 16.5px; color: var(--navy-800); }
.jt-sum small { color: var(--text-3); font-size: 12.5px; }
.jt-warn { margin: 8px 0 0; font-size: 13px; color: var(--check-text, #a15c00); }

/* ── 목록 검색(사장님 2026-09-21, 2차 손질) ─────────────────────────────── */
.srch { display: flex; gap: 8px; margin: 20px 0 8px; }
.srch-box { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.srch-ico { position: absolute; left: 14px; width: 18px; height: 18px; fill: none; stroke: var(--text-3); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.srch input {
  width: 100%; font: inherit; font-size: 15.5px; padding: 13px 40px 13px 42px;
  border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text);
  box-shadow: var(--shadow); transition: border-color .15s, box-shadow .15s;
}
.srch input::placeholder { color: var(--text-3); }
.srch input:focus { outline: none; border-color: var(--navy-600); box-shadow: 0 0 0 3px var(--navy-50); }
.srch input::-webkit-search-cancel-button { display: none; }
.srch-x { position: absolute; right: 10px; width: 26px; height: 26px; display: grid; place-items: center; border: 0; border-radius: 999px; background: var(--sunken); color: var(--text-2); font-size: 17px; line-height: 1; cursor: pointer; }
.srch-x:hover { background: var(--border); }
.srch button[type="submit"] { font: inherit; font-size: 15px; font-weight: 700; padding: 0 20px; border: 0; border-radius: 999px; background: var(--navy-800); color: #fff; cursor: pointer; box-shadow: var(--shadow); }
.srch button[type="submit"]:hover { background: var(--navy-700); }
.srch-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.srch-tags button { font: inherit; font-size: 13px; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.srch-tags button:hover { border-color: var(--border-strong); color: var(--text); }
.srch-tags button.on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.srch-res { margin: 2px 0 12px; font-size: 14px; color: var(--text-2); }
.srch-res b { color: var(--text); }
.srch-res button { margin-left: 8px; font: inherit; font-size: 13px; padding: 4px 10px; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--surface); color: var(--text-2); cursor: pointer; }
.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; }
@media (max-width: 720px) {
  .srch { margin-top: 14px; gap: 6px; }
  .srch input { font-size: 16px; padding: 12px 38px 12px 40px; }   /* 16px 미만이면 iOS 가 화면을 확대한다 */
  .srch button[type="submit"] { padding: 0 16px; }
  .srch-tags { margin-bottom: 12px; }
}

/* ── 이번에 나온 세대(동·호) — 2026-09-25 무순위·계약취소 재공급. 앱 UnitsMap 과 같은 색(danger 톤) ── */
.units-box { margin: 0 0 16px; padding: 14px 16px; border: 1px solid #F0CFCC; background: #FBEBEA; border-radius: var(--radius); }
.units-t { margin: 0; font-weight: 800; color: #7A1B15; }
.units-s { margin: 2px 0 0; font-size: 13px; color: var(--text-2); }
.units-list { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 4px; font-weight: 700; }
.map.units { margin: 12px 0 0; }
.map.units .map-box { max-width: 560px; }
.units-list li { display: grid; gap: 4px; }
.units-list .u-line { font-weight: 800; }
.u-body { display: flex; gap: 10px; align-items: flex-start; }
.u-stat { flex: 1; display: grid; gap: 1px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.u-plan { flex: none; width: 96px; text-align: center; text-decoration: none; }
.u-plan img { width: 96px; height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--border); border-radius: 6px; }
.u-plan small { display: block; font-size: 11px; color: var(--text-3); }
/* 지도: 점·이름표·잇는 선 — 자리는 render.mjs placeLabels(앱 lib/labelPlace.ts 와 같은 규칙)가 정한다 */
.udot { position: absolute; z-index: 4; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #B3261E; border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.ulead { position: absolute; z-index: 3; height: 1.5px; background: #B3261E; transform-origin: 0 50%; }
.utags { position: absolute; z-index: 5; display: flex; flex-direction: column; gap: 3px; align-items: flex-start; }
.utags b { padding: 2px 6px; border-radius: 5px; background: #B3261E; border: 1px solid #fff; color: #fff; font-size: 12px; line-height: 1.3; white-space: nowrap; }
.utags b small { margin-left: 4px; font-size: 10.5px; font-weight: 700; }

/* 검색창 아래 버튼 머리글 — 인기(24시간)·최근·추천(기본) (2026-09-25, 앱 홈 검색과 같은 구성) */
.srch-tags .tg-h { align-self: center; font-size: 11.5px; font-weight: 800; color: var(--text-3); margin: 0 2px 0 6px; }
.srch-tags .tg-h:first-child { margin-left: 0; }

/* 공공임대 상세(2026-09-26) — 대상별 자격 칸·주변 월세 비교 머리줄 */
.rent-tg { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.rent-t { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #fff; }
.rent-t h3 { margin: 0 0 4px; font-size: 15px; }
.rent-t p { margin: 0 0 6px; font-size: 14px; }
.rent-head { font-size: 17px; margin: 0 0 10px; }
.rent-head.pos b { color: var(--pass); }
.rent-head.neg b { color: var(--maroon); }
.tbl .sub-row td { padding-top: 0; color: var(--text-3); border-top: 0; }

/* ★2026-09-30 정정공고(사장님 규칙) — 고지 색(danger) 계열 */
.corr-tag { display: inline-block; font-size: 11.5px; font-weight: 800; color: #fff; background: var(--danger); border-radius: 4px; padding: 1px 6px; margin: 0 6px; vertical-align: middle; }
.corr-box { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--danger-bg); border: 1px solid #F0CFCC; color: #111826; font-size: 14px; line-height: 1.6; }
.corr-box .corr-h { font-weight: 800; font-size: 15.5px; margin: 0 0 6px; }
.corr-box .corr-h .corr-tag { margin-left: 0; }
.corr-box ul { margin: 8px 0 0; padding: 0; list-style: none; }
.corr-box li { margin: 6px 0; }
.corr-box .corr-sec { font-size: 11.5px; font-weight: 700; color: var(--danger); border: 1px solid #F0CFCC; border-radius: 4px; padding: 0 5px; margin-right: 6px; }
.corr-box s { color: #545C6B; }
.corr-box em { font-style: normal; font-weight: 700; color: var(--danger); }
.corr-box small, .corr-box .note { color: #545C6B; }

/* ★공공임대(단지 여러 곳) 단지별 위치·교통(2026-10-01, 사장님 "지도·교통시간을 단지별로") */
.cx-map .map-box { max-width: 560px; position: relative; }
.cxdot { position: absolute; z-index: 4; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--navy-900); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; }
.cxdot b { color: #fff; font-size: 11px; font-weight: 800; }
.cx-list { display: grid; gap: 10px; margin-top: 10px; }
.cx-row { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: #fff; }
.cx-h { margin: 0 0 2px; font-size: 14.5px; font-weight: 800; }
.cx-n { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--navy-900); color: #fff; font-size: 11px; font-weight: 800; }
.cx-row .muted { margin: 0 0 2px; font-size: 13px; color: var(--text-2); }
.cx-row .note { margin: 0 0 4px; }
.cx-commute { margin-top: 2px; }
.cx-more .cx-row { margin-top: 10px; }

/* ===== 시안 추가 CSS (site.css 토큰 재사용) ===== */
.feed{margin:0 0 26px}
.feed h2{font-size:20px;margin:0 0 10px;letter-spacing:-.02em}.feed h2 small{font-size:14px;color:var(--text-3);font-weight:500}
.fd-list{list-style:none;margin:0;padding:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.fd-list li+li{border-top:1px solid var(--border)}
.fd-list li[hidden]{display:none}
.fd-row{display:flex;align-items:center;gap:10px;padding:11px 14px;text-decoration:none;color:var(--text)}
.fd-b{flex:none;min-width:56px;text-align:center;font-size:12px;font-weight:800;padding:3px 0;border-radius:6px}
.b-new{background:#E3EEFF;color:#1F5FBF}.b-comp{background:#FFEBD6;color:#B25A00}.b-res{background:var(--pass-bg);color:var(--pass)}.b-fix{background:#ECEDF0;color:#5A6270}
.fd-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.fd-l1{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.fd-l1 b{font-weight:800;color:var(--navy-800)}.fd-l1 i{font-style:normal;color:var(--text-3);font-size:13.5px}
.fd-l2{font-size:12.5px;color:var(--text-2);font-variant-numeric:tabular-nums;line-height:1.35}
.fd-t{flex:none;font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.fd-go{flex:none;color:var(--border-strong);font-size:20px;line-height:1;margin-left:-2px}
.fd-btn{display:block;width:100%;margin-top:8px;font:inherit;font-size:14px;font-weight:700;padding:11px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface);color:var(--navy-700);cursor:pointer}
.sub-h{font-size:15px;margin:14px 0 8px;color:var(--navy-700)}.sub-h small{font-size:13px;color:var(--text-3);font-weight:500}
.later{margin-top:12px}.later summary{cursor:pointer;list-style:none;padding:11px 14px;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;font-weight:700;color:var(--navy-700);font-size:14.5px}
.later summary::-webkit-details-marker{display:none}.later[open] summary{margin-bottom:6px}.later[open] .chev{display:inline-block;transform:rotate(180deg)}
.closed-list b.tl{color:var(--pass);font-weight:800}
.all-link{display:block;margin-top:8px;padding:11px 14px;text-align:center;background:var(--surface);border:1px solid var(--border-strong);border-radius:12px;font-weight:700;font-size:14.5px;color:var(--navy-700);text-decoration:none}
/* [3] 칩 한 줄 (모바일만, PC 그대로) */
@media (max-width:720px){
 .srch-tags{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none;
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 36px),transparent)}
 .srch-tags::-webkit-scrollbar{display:none}
 .srch-tags button{flex:none;white-space:nowrap}
 .srch-tags .tg-h{flex:none}
 .fd-l1{font-size:14.5px}.fd-row{padding:10px 12px;gap:8px}.fd-b{min-width:50px;font-size:11.5px}
}
.closed-list b.tl2{color:var(--check-text);font-weight:800}
/* 새 소식 날짜 묶음 — 자바스크립트가 있을 때만 하루씩 접는다(없으면 전부 보임) */
.fd-day+.fd-day{margin-top:14px}
.fd-dh{font-size:14.5px;margin:0 0 6px;color:var(--navy-700)}.fd-dh small{font-size:12.5px;color:var(--text-3);font-weight:500}
.fd-btn{display:none}.fd-js .fd-btn{display:block}.fd-btn[hidden]{display:none!important}
.fd-l1 b{margin-right:0}
/* 상세 앵커(#competition·#gajeom) — 고정 헤더에 제목이 가리지 않게 */
.sub[id]{scroll-margin-top:8px}
/* 지난 결과 월 이동 */
.rs-nav{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px;font-size:14.5px;font-weight:700}
.rs-nav a{color:var(--navy-700);text-decoration:none;padding:8px 10px}
.rs-nav .rs-all{color:var(--text-3);font-weight:600}
.closed-list b.tl,.closed-list b.tl2{white-space:nowrap}
/* 더보기 날짜 묶음 일반화(공공임대 섹션·검색 중 펼침) */
.fd-js .fd-day.fd-later:not(.fd-open):not(.fd-s){display:none}
.fd-day[hidden]{display:none}
.fd-btn.fd-hide{display:none!important}
.rg-sec .fd-day+.fd-day{margin-top:14px}
.fd-none{margin:0 0 8px}

/* ── 앱 받기 · 접수처 바로가기 (2026-10-15 사장님 지시) ── */
.top-app { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 999px; background: var(--navy-800); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.app-strip { display: none; }
@media (max-width: 860px) {
  .top-app { display: none; }
  .app-strip { display: flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--navy-800); color: #fff; text-decoration: none; }
  .app-strip svg { flex: none; width: 22px; height: 22px; padding: 7px; box-sizing: content-box; border-radius: 10px; background: rgba(255,255,255,.14); }
  .app-strip span { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
  .app-strip b { font-size: 15px; font-weight: 800; }
  .app-strip small { font-size: 12.5px; color: rgba(255,255,255,.72); }
  .app-strip em { font-style: normal; font-size: 22px; color: rgba(255,255,255,.8); }
}
.go-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.go-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 18px; border-radius: 12px; font-size: 15px; font-weight: 800; text-decoration: none; letter-spacing: -0.02em; }
.go-btn small { font-size: 13px; font-weight: 700; opacity: .8; }
.go-btn i { font-style: normal; opacity: .7; }
.go-apply { background: #fff; color: var(--navy-800); }
.go-win { border: 1.5px solid rgba(255,255,255,.75); color: #fff; }
.go-off { border: 1.5px dashed rgba(255,255,255,.4); color: rgba(255,255,255,.65); cursor: default; }
@media (max-width: 480px) { .go-btn { flex: 1 1 100%; } }
.hero-go { margin-top: 14px; display: grid; gap: 4px; }
.hero-go p { margin: 0; font-size: 13.5px; color: rgba(255,255,255,.72); display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.hero-go b { color: rgba(255,255,255,.95); font-weight: 800; margin-right: 4px; }
.hero-go a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.4); text-underline-offset: 3px; }
.hero-go i { font-style: normal; opacity: .5; }