/* 영통 7단지 선도지구 통합정보 — 공통 스타일
   레이아웃: 좁은 화면은 한 줄, 넓은 화면은 2단. 큰 글씨·높은 대비 우선. */
:root {
  color-scheme: light;
  --bg: #f3f4f6;
  --surface: #ffffff;
  --line: #d5dae1;
  --ink: #1b222b;          /* 차콜 */
  --muted: #4d5765;
  --navy: #1d3557;
  --heading: #1d3557;
  --heading-strong: #0f1b2d;
  --tint: #e9edf2;
  --navy-soft: #e6ecf4;
  --teal: #2a6f69;
  --teal-soft: #e2efed;
  --amber: #8a5a00;
  --amber-soft: #fbf0d9;
  --plum: #5b3f7a;
  --plum-soft: #efe9f6;
  --hold: #8b3a2b;
  --hold-soft: #f6e5e1;
  --gray: #8a939f;
  --gray-soft: #eceef1;
  --focus: #f0a500;
  --font: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --display: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  --radius: 10px;
  font-size: 18px;
}
html.big { font-size: 21px; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: 1rem; line-height: 1.65;
  word-break: keep-all; overflow-wrap: anywhere;
}
a { color: var(--heading); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
h1, h2, h3 { line-height: 1.3; text-wrap: balance; margin: 0; }
p { margin: 0 0 .8em; }
.wrap {
  max-width: 1080px; margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* ---------- 헤더 ---------- */
.site-header { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 12px; }
.brand { text-decoration: none; color: var(--heading); display: flex; flex-direction: column; }
.brand small { font-size: .7rem; letter-spacing: .12em; color: var(--muted); font-weight: 600; }
.brand strong { font-family: var(--display); font-size: 1.15rem; font-weight: 700; }
.textsize {
  border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font: inherit; font-size: .85rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.textsize[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.nav { display: flex; gap: 4px; overflow-x: auto; padding-bottom: 10px; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  flex: 0 0 auto; text-decoration: none; color: var(--ink); font-weight: 600; font-size: .92rem;
  padding: 8px 14px; border-radius: 999px; border: 1px solid transparent;
}
.nav a[aria-current="page"] { background: var(--navy); color: #fff; }
.nav a:hover:not([aria-current="page"]) { border-color: var(--line); }

/* ---------- 공통 블록 ---------- */
main { padding-block: 24px 64px; display: grid; gap: 28px; }
.section { display: grid; gap: 14px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-head h2 { font-size: 1.3rem; }
.eyebrow { font-size: .78rem; letter-spacing: .1em; font-weight: 700; color: var(--muted); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.note {
  border-left: 4px solid var(--gray); background: var(--gray-soft); padding: 12px 14px;
  border-radius: 0 var(--radius) var(--radius) 0; font-size: .9rem; color: var(--muted);
}
.note.sample { border-left-color: var(--amber); background: var(--amber-soft); color: var(--ink); }
.empty { color: var(--muted); font-size: .92rem; padding: 6px 0; }
.grid2 { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.grid3 { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.links { margin: 0; padding-left: 1.1em; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; text-decoration: none;
  padding: 10px 16px; border-radius: 8px; border: 1px solid var(--navy); background: var(--navy); color: #fff;
}
.btn.ghost { background: var(--surface); color: var(--heading); }
.btn.danger { background: var(--surface); color: var(--hold); border-color: var(--hold); }
.btn:disabled { opacity: .5; cursor: default; }

/* 상태 표시 */
.badge {
  display: inline-block; font-size: .78rem; font-weight: 700; padding: 2px 10px; border-radius: 999px;
  white-space: nowrap; border: 1px solid transparent; vertical-align: middle;
}
.badge.done { background: var(--teal-soft); color: var(--teal); border-color: var(--teal); }
.badge.doing { background: var(--navy); color: #fff; }
.badge.review { background: var(--amber-soft); color: var(--amber); border-color: #d9b56a; }
.badge.voice { background: var(--plum-soft); color: var(--plum); border-color: #b9a3d1; }
.badge.plan { background: var(--surface); color: var(--muted); border-color: var(--line); }
.badge.hold { background: var(--hold-soft); color: var(--hold); border-color: #d6a397; }
.badge.none { background: var(--gray-soft); color: var(--muted); border-style: dashed; border-color: var(--gray); }
.tag { display: inline-block; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 4px; background: var(--gray-soft); color: var(--muted); }
.tag.hyundai { background: var(--navy-soft); color: var(--heading); }
.tag.salgu { background: var(--teal-soft); color: var(--teal); }
.kind { display: inline-block; font-size: .75rem; font-weight: 700; padding: 1px 8px; border-radius: 4px; border: 1px solid; }
.kind.fact { color: var(--heading); border-color: var(--navy); }
.kind.analysis { color: var(--amber); border-color: var(--amber); }
.kind.opinion { color: var(--plum); border-color: var(--plum); }

/* ---------- 첫 화면 ---------- */
.hero { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 24px 20px; display: grid; gap: 18px; }
.hero h1 { font-family: var(--display); font-size: 1.65rem; font-weight: 700; }
.hero .sub { color: #c9d4e3; margin: 6px 0 0; }
.hero .motto { font-size: .85rem; color: #c9d4e3; letter-spacing: .02em; }
.hero-now { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.hero-now > div { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 14px; }
.hero-now .label { font-size: .8rem; color: #c9d4e3; font-weight: 600; }
.hero-now .value { font-size: 1.25rem; font-weight: 800; margin-top: 2px; }
.hero-now .value.unset { font-size: 1rem; font-weight: 600; color: #e5ebf3; }
.hero .site-notice { background: #fff; color: #1b222b; border-radius: 8px; padding: 12px 14px; font-size: .95rem; }

.overall { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.overall .panel h3 { font-size: 1rem; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.overall ul { margin: 0; padding-left: 1.1em; }

/* 타임라인 */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; }
.tl-item { display: grid; grid-template-columns: 44px 1fr; gap: 12px; position: relative; }
.tl-item::before { content: ''; position: absolute; left: 21px; top: 44px; bottom: 0; width: 2px; background: var(--line); }
.tl-item:last-child::before { display: none; }
.tl-dot {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; font-size: 1rem; background: var(--gray-soft); color: var(--muted); border: 2px solid var(--gray);
  position: relative; z-index: 1;
}
.tl-item.done .tl-dot { background: var(--teal); color: #fff; border-color: var(--teal); }
.tl-item.done::before { background: var(--teal); }
.tl-item.current .tl-dot { background: var(--navy); color: #fff; border-color: var(--navy); box-shadow: 0 0 0 5px var(--navy-soft); }
.tl-body { padding-bottom: 18px; min-width: 0; }
.tl-body details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.tl-item.current .tl-body details { border-color: var(--navy); border-width: 2px; }
.tl-body summary { list-style: none; cursor: pointer; padding: 12px 14px; display: grid; gap: 4px; }
.tl-body summary::-webkit-details-marker { display: none; }
.tl-title { font-weight: 800; font-size: 1.02rem; }
.tl-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .85rem; color: var(--muted); }
.tl-now { font-size: .75rem; font-weight: 800; color: var(--heading); letter-spacing: .05em; }
.tl-detail { padding: 0 14px 14px; display: grid; gap: 10px; font-size: .95rem; }
.tl-detail dt { font-weight: 700; font-size: .82rem; color: var(--muted); }
.tl-detail dd { margin: 0; }
.tl-more { font-size: .82rem; color: var(--heading); font-weight: 700; }
details[open] .tl-more { display: none; }

/* 단지 카드 */
.complex-card { display: grid; gap: 14px; align-content: start; }
.complex-card h3 { font-family: var(--display); font-size: 1.3rem; color: var(--heading); }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stat { background: var(--bg); border-radius: 8px; padding: 10px; text-align: center; }
.stat .v { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat .k { font-size: .78rem; color: var(--muted); font-weight: 600; }
.kv { display: grid; grid-template-columns: 7.5em 1fr; gap: 6px 10px; font-size: .95rem; }
.kv dt { color: var(--muted); font-weight: 600; }
.kv dd { margin: 0; min-width: 0; }
.kv ul { margin: 0; padding-left: 1.1em; }
.src-line { font-size: .8rem; color: var(--muted); }
.src-line.warn { color: var(--amber); font-weight: 600; }

/* 공동 검토 */
.joint { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.joint li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.joint li:last-child { border-bottom: 0; }
.joint .t { font-weight: 600; min-width: 0; }
.joint .d { font-size: .88rem; color: var(--muted); font-weight: 400; display: block; }

/* 게시물 목록 */
.post-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.post-list a { display: grid; gap: 6px; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.post-list a:hover { border-color: var(--navy); }
.post-list .pt { font-weight: 800; font-size: 1.02rem; }
.post-list .ps { color: var(--muted); font-size: .92rem; margin: 0; }
.post-meta { display: flex; gap: 6px 10px; flex-wrap: wrap; align-items: center; font-size: .8rem; color: var(--muted); }

.filters { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .filters { grid-template-columns: 2fr 1fr 1fr; } }
input, select, textarea {
  font: inherit; font-size: 1rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%;
}
textarea { min-height: 8em; resize: vertical; line-height: 1.6; }
label { font-weight: 700; font-size: .88rem; display: grid; gap: 4px; }

/* 게시물 상세 */
.article { display: grid; gap: 16px; }
.article h1 { font-family: var(--display); font-size: 1.55rem; color: var(--heading); }
.article .summary { background: var(--navy-soft); border-radius: 8px; padding: 14px 16px; font-weight: 600; }
.article .body { max-width: 68ch; }
.article h2 { font-size: 1rem; margin-bottom: 6px; }
.history { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.history details { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--bg); }
.history summary { cursor: pointer; font-weight: 600; font-size: .9rem; }

/* 비교표 */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
table.compare { border-collapse: collapse; width: 100%; min-width: 680px; font-size: .95rem; }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--navy); color: #fff; font-size: .88rem; }
.compare tbody th { width: 22%; }
.compare tbody tr:last-child > * { border-bottom: 0; }
.compare .na { color: var(--muted); font-size: .88rem; }

/* FAQ */
.faq { display: grid; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.faq summary { cursor: pointer; padding: 16px; font-weight: 800; list-style: none; display: flex; gap: 10px; }
.faq summary::before { content: 'Q'; color: var(--heading); font-family: var(--display); font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq .a { padding: 0 16px 16px 40px; }

.legend { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--muted); }

/* 단지 코드 */
.complex-card.locked { background: var(--gray-soft); border-style: dashed; }
.unlock { display: grid; gap: 10px; }
.linkbtn { font: inherit; font-size: .85rem; color: var(--muted); background: none; border: 0; padding: 4px 0; text-decoration: underline; cursor: pointer; justify-self: start; }

/* 입장코드 */
.gate { position: fixed; inset: 0; background: var(--bg); z-index: 50; display: grid; place-items: center;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
.gate form { width: min(100%, 380px); display: grid; gap: 12px; }
.gate h1 { font-family: var(--display); color: var(--heading); font-size: 1.4rem; }

.footer { border-top: 1px solid var(--line); padding-block: 20px 40px; font-size: .82rem; color: var(--muted); }
.demo-banner { background: var(--amber-soft); color: var(--ink); font-size: .85rem; font-weight: 600; text-align: center; padding: 8px 16px; }

@media (min-width: 720px) {
  .hero { padding: 32px; }
  .hero h1 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }

/* ---------- 법정 절차 대시보드 ---------- */
.tag.amended { background: var(--plum-soft); color: var(--plum); }
.tag.ours { background: var(--amber-soft); color: var(--amber); }
.phase-strip { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.phase-strip li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.phase-strip .ph { display: grid; gap: 2px; padding: 12px; color: inherit; text-decoration: none; height: 100%; }
.phase-strip .ph-id { font-size: .78rem; font-weight: 800; color: var(--muted); letter-spacing: .08em; }
.phase-strip .ph-name { font-weight: 800; line-height: 1.35; }
.phase-strip .ph-count { font-size: .82rem; color: var(--muted); }
.phase-strip li.done { border-color: var(--teal); background: var(--teal-soft); }
.phase-strip li.current { border: 2px solid var(--navy); background: var(--navy-soft); }
.phase-strip li.current .ph-id::after { content: ' · 현재'; color: var(--heading); }
.law-now { display: grid; gap: 6px; border-left: 4px solid var(--navy); }
.law-now strong { font-size: 1.15rem; color: var(--heading); }
.law-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.law-step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; display: grid; gap: 6px; }
.law-step.done { border-color: var(--teal); }
.ls-head { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.ls-id { font-weight: 800; color: var(--muted); font-size: .85rem; min-width: 2em; }
.ls-name { font-weight: 800; font-size: 1.02rem; flex: 1 1 12em; min-width: 0; }
.ls-desc { margin: 0; font-size: .95rem; }
.ls-meta, .ls-ref { margin: 0; font-size: .82rem; color: var(--muted); }
section[id^="law-"] { scroll-margin-top: 130px; }

/* ---------- 왜 재건축 ---------- */
.why-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.why-chip { text-decoration: none; color: var(--heading); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: .92rem; }
.why-chip:hover { border-color: var(--navy); }
.summary-box { background: var(--navy-soft); border-radius: 8px; padding: 14px 16px; font-weight: 600; }

/* =========================================================
   랜딩 스타일 (첫 화면) — 화면 전체 폭 띠(band) + 안쪽 .wrap
   ========================================================= */
:root { --brass: #5b7089; --platinum: #cdd8e6; --ink-deep: #0c1626; }
main { padding: 0; display: block; }
.page { padding-block: 24px 64px; display: grid; gap: 28px; }
.textsize-group { display: inline-flex; gap: 4px; }
.textsize-group .textsize { padding: 6px 10px; }
.textsize:disabled { opacity: .4; cursor: default; }

.band { padding-block: 56px; }
.band-tint { background: var(--tint); }
.band-dark { background: var(--ink-deep); color: #fff; }
.band-eyebrow { margin: 0 0 6px; font-size: .78rem; letter-spacing: .24em; font-weight: 700; color: var(--brass); }
.band-title { font-family: var(--display); font-size: 1.7rem; color: var(--heading); margin: 0 0 22px; }
.band-dark .band-title { color: #fff; }
.band-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.band-head .band-title { margin-bottom: 22px; }
.more { font-weight: 700; font-size: .92rem; color: var(--heading); text-decoration: none; }
.fine { font-size: .82rem; color: var(--muted); margin: 14px 0 0; }

/* 히어로 */
.hero-band {
  color: #fff; padding-block: 72px 150px;
  background:
    radial-gradient(120% 70% at 85% 0%, rgba(176,190,210,.22) 0%, transparent 55%),
    radial-gradient(90% 60% at 0% 100%, rgba(90,118,156,.28) 0%, transparent 60%),
    linear-gradient(170deg, #1a2c46 0%, #0f1d31 55%, #0a1422 100%);
}
.hero-inner { display: grid; gap: 20px; }
.hero-eyebrow { margin: 0; font-size: .78rem; letter-spacing: .2em; font-weight: 700; color: #b8c4d3; }
.hero-band h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 6.4vw, 3.1rem); line-height: 1.25; margin: 0; text-wrap: balance; }
.hero-band h1 em { font-style: normal; color: var(--platinum); }
.hero-sub { margin: 0; color: #c9d4e3; max-width: 36em; font-size: 1.02rem; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.btn.light { background: #e6ebf1; color: #0c1626; border-color: #e6ebf1; }
.btn.outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); }
.hero-stats { margin: 12px 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; overflow: hidden; }
.hero-stats > div { background: rgba(15,27,45,.55); padding: 16px; }
.hero-stats dt { font-size: .78rem; color: #b9c6d8; font-weight: 600; }
.hero-stats dd { margin: 4px 0 0; font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.hero-stats dd small { font-size: .82rem; font-weight: 600; color: #c9d4e3; margin-left: 4px; }
.hero-notice { background: #fff; color: #1b222b; border-radius: 8px; padding: 12px 14px; font-size: .95rem; }
@media (min-width: 760px) { .hero-stats { grid-template-columns: repeat(4, 1fr); } .hero-band { padding-block: 104px 190px; } }

/* 단지 소개 */
.ov-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.ov-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px; display: grid; gap: 10px; }
.ov-card h3 { font-family: var(--display); color: var(--heading); font-size: 1.25rem; margin: 0; }
.ov-big { font-size: 2.6rem; font-weight: 800; margin: 0; line-height: 1; color: var(--heading-strong); }
.ov-big small { font-size: 1rem; font-weight: 600; margin-left: 4px; color: var(--muted); }
.ov-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; }
.ov-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.ov-list li span:first-child { color: var(--muted); font-weight: 600; flex: 0 0 auto; }
.ov-list li span:last-child { text-align: right; }

/* 가로형 진행 단계 */
.stepper { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: s; }
.stepper li a { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }
.stepper .dot { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--gray-soft); color: var(--muted); border: 2px solid var(--gray); }
.stepper .s-name { font-weight: 800; }
.stepper .s-meta { font-size: .82rem; color: var(--muted); font-weight: 600; }
.stepper li.done .dot { background: var(--teal); border-color: var(--teal); color: #fff; }
.stepper li.current a { border: 2px solid var(--navy); }
.stepper li.current .dot { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 0 0 5px var(--navy-soft); }
.stepper li.current .s-meta { color: var(--heading); }
@media (min-width: 860px) {
  .stepper { grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
  .stepper::before { content: ''; position: absolute; left: 10%; right: 10%; top: 22px; height: 2px; background: var(--gray); }
  .stepper li a { grid-template-columns: 1fr; justify-items: center; text-align: center; background: none; border: 0; padding: 0 8px; gap: 8px; position: relative; }
  .stepper li.current a { border: 0; }
}
.lead-note { margin: 20px 0 0; background: var(--surface); border-left: 4px solid var(--brass); border-radius: 0 10px 10px 0; padding: 14px 16px; font-size: .95rem; }

/* 왜 재건축 카드 */
.why-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.why-card { display: grid; gap: 6px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; color: inherit; text-decoration: none; }
.why-card:hover { border-color: var(--navy); }
.why-no { font-family: var(--display); font-size: 1.6rem; color: var(--brass); line-height: 1; }
.why-card strong { font-size: 1.08rem; color: var(--heading-strong); }
.why-card span:last-child { font-size: .9rem; color: var(--muted); }

/* 함께하기 */
.join-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.join-card { display: grid; gap: 8px; padding: 22px; border-radius: 14px; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05); color: #fff; text-decoration: none; }
.join-card:hover { border-color: var(--platinum); }
.join-card strong { font-size: 1.2rem; font-family: var(--display); }
.join-card span { color: #c9d4e3; font-size: .95rem; }
.join-card em { font-style: normal; color: var(--platinum); font-weight: 700; }

/* 관리코드 화면 */
.gate { background: linear-gradient(160deg, #16263d 0%, #0c1626 70%); color: #fff; }
.gate form { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.18); border-radius: 16px; padding: 28px 22px; }
.gate h1 { color: #fff; font-size: 2rem; margin: 0; }
.gate .gate-eyebrow { margin: 0; font-size: .78rem; letter-spacing: .24em; color: #b8c4d3; font-weight: 700; }
.gate .gate-sub { margin: 0; color: #c9d4e3; }
.gate .muted { color: #c9d4e3; }
.gate label { color: #fff; }
.gate .btn { background: #fff; color: #0f1b2d; border-color: #fff; }
.gate #gate-msg { color: #ffb4a6 !important; }
body.is-home .footer { margin-top: 0; }

/* 7단지 장점 카드 */
.st-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.st-card { display: grid; gap: 6px; align-content: start; padding: 18px; background: var(--ink-deep); color: #fff; border-radius: 14px; text-decoration: none; min-height: 132px; }
.st-card:hover { outline: 2px solid var(--brass); }
.st-tag { font-size: .75rem; letter-spacing: .08em; color: #b8c4d3; font-weight: 700; }
.st-big { font-family: var(--display); font-size: 1.45rem; line-height: 1.2; color: #fff; }
.st-card strong { font-size: .92rem; color: #c9d4e3; font-weight: 600; }
.law-step .st-big { color: var(--brass); }

/* 소유주 인증 잠금 */
.member-link { font-size: .82rem; font-weight: 700; color: var(--heading); border: 1px solid var(--navy); border-radius: 999px; padding: 6px 12px; text-decoration: none; white-space: nowrap; align-self: center; }
.member-link.on { background: var(--teal-soft); color: var(--teal); border-color: var(--teal); }
.member-link.on::before { content: '✓ '; }
.lock-panel { background: var(--surface); border: 1px dashed var(--gray); border-radius: 14px; padding: 24px 20px; display: grid; gap: 12px; text-align: center; justify-items: center; }
.lock-panel h2 { font-family: var(--display); color: var(--heading); font-size: 1.25rem; margin: 0; }
.lock-panel p { margin: 0; max-width: 34em; color: var(--muted); }
.lock-icon { font-size: 1.8rem; }
.lock-form { display: grid; gap: 10px; width: min(100%, 320px); text-align: left; }
.lock-err { color: var(--hold) !important; font-size: .88rem; }
.lock-alt { font-size: .9rem; }
.light-link { color: var(--platinum); }

/* ---------- 사진 블록 (사진과 글이 번갈아) ---------- */
.blocks { display: grid; gap: 28px; }
.block { display: grid; gap: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; }
.block-media { position: relative; aspect-ratio: 16 / 10; max-width: 100%; background: var(--tint); overflow: hidden; }
.block-media img, .block-media svg { display: block; width: 100%; height: 100%; object-fit: cover; }
.block-text { padding: 22px 22px 26px; display: grid; gap: 6px; align-content: center; }
.block-tag { margin: 0; font-size: .78rem; letter-spacing: .14em; font-weight: 700; color: var(--brass); }
.block-big { margin: 0; font-family: var(--display); font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--heading-strong); line-height: 1.2; }
.block-title { margin: 0; font-weight: 800; color: var(--heading); }
.block-body { margin: 6px 0 0; color: var(--muted); max-width: 34em; }
.block-note { margin: 4px 0 0; font-size: .8rem; color: var(--muted); }
@media (min-width: 820px) {
  .block { grid-template-columns: 1.1fr 1fr; min-height: 320px; }
  .block.rev .block-media { order: 2; }
  .block-media { aspect-ratio: auto; height: 100%; min-height: 320px; }
  .block-text { padding: 40px 44px; }
}

/* 히어로 배경 사진 / 스카이라인 */
.hero-band { position: relative; overflow: hidden; }
.hero-band .hero-inner { position: relative; z-index: 1; }
.hero-skyline { position: absolute; left: 0; right: 0; bottom: 0; height: 190px; pointer-events: none; }
@media (min-width: 760px) { .hero-skyline { height: clamp(190px, 25vw, 360px); } }
.hero-skyline svg { width: 100%; height: 100%; display: block; }
.hero-band.has-photo {
  background: linear-gradient(180deg, rgba(15,27,45,.55) 0%, rgba(15,27,45,.78) 70%, rgba(15,27,45,.92) 100%), var(--hero-photo) center / cover no-repeat;
}
.photo-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.photo-slot { display: grid; gap: 8px; align-content: start; }
.photo-prev { aspect-ratio: 16 / 10; max-width: 100%; border-radius: 8px; overflow: hidden; background: var(--gray-soft); display: grid; place-items: center; color: var(--muted); font-size: .85rem; }
.photo-prev img { width: 100%; height: 100%; object-fit: cover; display: block; }
.block-media img.ph-transit { object-position: 78% 50%; }


/* =========================================================
   다크 모드 — 휴대폰 설정을 따르고, 달 버튼으로 직접 바꿀 수 있음
   ========================================================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0e1319; --surface: #161c24; --line: #2c3440; --ink: #e6eaf0; --muted: #a7b1be;
    --navy: #2f5487; --navy-soft: #1a2a40; --heading: #a9c3e6; --heading-strong: #f1f4f8; --tint: #121820;
    --teal: #6cc3b8; --teal-soft: #16302d; --amber: #e0b25a; --amber-soft: #3a2e14;
    --plum: #c3a6e6; --plum-soft: #2c2238; --hold: #f0998a; --hold-soft: #3a1f1a;
    --gray: #6b7684; --gray-soft: #1f2630; --brass: #9fb2c8;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1319; --surface: #161c24; --line: #2c3440; --ink: #e6eaf0; --muted: #a7b1be;
  --navy: #2f5487; --navy-soft: #1a2a40; --heading: #a9c3e6; --heading-strong: #f1f4f8; --tint: #121820;
  --teal: #6cc3b8; --teal-soft: #16302d; --amber: #e0b25a; --amber-soft: #3a2e14;
  --plum: #c3a6e6; --plum-soft: #2c2238; --hold: #f0998a; --hold-soft: #3a1f1a;
  --gray: #6b7684; --gray-soft: #1f2630; --brass: #9fb2c8;
}
:root[data-theme="light"] { color-scheme: light; }
.theme-btn { display: inline-grid; place-items: center; padding: 6px 10px; }
.theme-btn svg { width: 18px; height: 18px; display: block; }
.theme-btn .ic-sun { display: none; }
:root[data-theme="dark"] .theme-btn .ic-sun { display: block; }
:root[data-theme="dark"] .theme-btn .ic-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-btn .ic-sun { display: block; }
  :root:not([data-theme="light"]) .theme-btn .ic-moon { display: none; }
}
/* 어두운 화면에서 사진·그림이 너무 튀지 않게 */
:root[data-theme="dark"] .block-media img, :root[data-theme="dark"] .block-media svg { filter: brightness(.88); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .block-media img, :root:not([data-theme="light"]) .block-media svg { filter: brightness(.88); } }

/* ---------- 바로가기 (세련된 타일) ---------- */
.btn-lg { padding: 14px 22px; font-size: 1rem; border-radius: 10px; }
.guide-links { display: grid; max-width: 30em; border-top: 1px solid rgba(255,255,255,.22); }
.guide-links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 2px; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.22); font-weight: 600; letter-spacing: -.01em; }
.guide-links a svg { width: 20px; height: 20px; color: var(--platinum); transition: transform .2s; flex: 0 0 auto; }
.guide-links a:hover svg { transform: translateX(4px); }

.quick-band { padding-block: 28px 8px; }
.quick-title { margin: 0 0 14px; font-size: .78rem; letter-spacing: .24em; font-weight: 700; color: var(--brass); text-transform: uppercase; }
.quick-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
@media (min-width: 820px) { .quick-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.quick-tile { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 18px 16px; background: var(--surface); color: var(--ink); text-decoration: none; min-height: 84px; transition: background .2s; }
.quick-tile:hover { background: var(--navy-soft); }
.qt-icon { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; color: var(--heading); }
.qt-icon .ic { width: 22px; height: 22px; }
.qt-text { display: grid; gap: 2px; min-width: 0; }
.qt-text strong { font-size: 1rem; color: var(--heading-strong); }
.qt-text small { font-size: .8rem; color: var(--muted); display: flex; align-items: center; gap: 4px; }
.ic-lock { width: 13px; height: 13px; flex: 0 0 auto; }
.qt-arrow { position: absolute; top: 14px; right: 14px; width: 16px; height: 16px; color: var(--muted); opacity: .6; transition: transform .2s, opacity .2s; }
.quick-tile:hover .qt-arrow { transform: translateX(3px); opacity: 1; }
@media (max-width: 420px) { .qt-icon { width: 36px; height: 36px; } .quick-tile { padding: 16px 12px; gap: 10px; } }

/* ---------- 휴대폰 아래 고정 메뉴 ---------- */
.tabbar { display: none; }
@media (max-width: 759px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    background: rgba(12,22,38,.96); backdrop-filter: blur(8px); border-top: 1px solid rgba(255,255,255,.12);
    padding: 6px max(8px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left, 0px)); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; color: #9fb0c4; text-decoration: none; font-size: .72rem; font-weight: 600; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: #fff; }
  .tabbar a[aria-current="page"] svg { color: var(--platinum); }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
.qt-text { padding-right: 14px; }

/* 바로가기 아이콘: 네이비 배지 + 은백색 세선 */
.qt-icon {
  width: 52px; height: 52px; border-radius: 15px; border: 0; position: relative;
  background: linear-gradient(150deg, #24406a 0%, #13233a 55%, #0c1626 100%);
  color: #e3e9f1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), inset 0 0 0 1px rgba(205,216,230,.18), 0 6px 14px -8px rgba(12,22,38,.55);
}
.qt-icon::after { content: ''; position: absolute; inset: 4px; border-radius: 11px; border: 1px solid rgba(205,216,230,.10); pointer-events: none; }
.qt-icon .ic { width: 28px; height: 28px; }
.quick-tile:hover .qt-icon { background: linear-gradient(150deg, #2c4c7c 0%, #172a45 55%, #0e1a2d 100%); }
.quick-tile { gap: 14px; }
@media (max-width: 420px) { .qt-icon { width: 46px; height: 46px; border-radius: 13px; } .qt-icon .ic { width: 25px; height: 25px; } }
:root[data-theme="dark"] .qt-icon { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(205,216,230,.22); }
@media (max-width: 559px) {
  .quick-tile { grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 18px 16px 20px; min-height: 0; }
  .qt-text { padding-right: 0; }
  .qt-text strong { font-size: 1.02rem; }
}
.hero-stats .stat-note { margin: 4px 0 0; font-size: .74rem; color: #b9c6d8; }

/* 첫 화면 아래 야경 사진: 위쪽은 네이비로 자연스럽게 사라져 글씨에 영향 없음 */
.hero-night { position: absolute; left: 0; right: 0; bottom: 0; height: 230px; pointer-events: none; }
.hero-night img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 78%; display: block;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 30%, #000 55%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 30%, #000 55%); }
.hero-night::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(10,20,34,0) 55%, rgba(10,20,34,.55) 100%); }
.hero-night > svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 190px; }
.hero-band .hero-stats > div { background: rgba(10,20,34,.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (min-width: 760px) { .hero-night { height: 260px; } .hero-night img { object-position: 50% 80%; } }

/* 돋보기 버튼 */
.hero-actions .btn { display: inline-flex; align-items: center; gap: 10px; }
.btn-ic { display: inline-grid; place-items: center; width: 38px; height: 38px; margin-left: -6px; margin-right: 0; border-radius: 50%; background: linear-gradient(145deg, #1d3557, #0f1d31); color: #e8eef7; box-shadow: inset 0 0 0 1px rgba(232,238,247,.25); }
.btn-ic .ic { width: 22px; height: 22px; }

.btn[href="#strengths"] .btn-ic { margin-left: 2px; margin-right: -8px; }
.btn[href="#strengths"] .btn-ic { background: none; box-shadow: none; color: currentColor; width: auto; height: auto; margin: 0 -2px 0 0; }
.btn[href="#strengths"] .btn-ic .ic { width: 24px; height: 24px; }
.btn[href="#strengths"] .ic-lens { width: 28px; height: 28px; display: block; }

/* 바로가기 6칸: 입체 카드 */
.quick-grid { grid-auto-rows: 1fr; gap: 12px; background: none; border: 0; border-radius: 0; overflow: visible; }
.quick-tile {
  border-radius: 18px;
  background: linear-gradient(160deg, #ffffff 0%, #f1f4f8 100%);
  border: 1px solid rgba(29,53,87,.08);
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -3px 0 rgba(29,53,87,.06) inset, 0 2px 4px rgba(15,29,49,.06), 0 10px 22px -8px rgba(15,29,49,.22);
  transform: translateY(0); transition: transform .18s, box-shadow .18s;
}
.quick-tile:hover { background: linear-gradient(160deg, #ffffff 0%, #eef2f7 100%); transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 -3px 0 rgba(29,53,87,.06) inset, 0 4px 8px rgba(15,29,49,.08), 0 16px 28px -10px rgba(15,29,49,.3); }
.quick-tile:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15,29,49,.12); }
.qt-icon {
  position: relative; border: 0 !important;
  background: radial-gradient(120% 90% at 30% 15%, #3d5f8f 0%, #1d3557 45%, #0c1829 100%) !important;
  box-shadow: inset 0 1.5px 0 rgba(255,255,255,.35), inset 0 -3px 6px rgba(0,0,0,.35), 0 6px 12px -3px rgba(15,29,49,.45), 0 2px 3px rgba(15,29,49,.25) !important;
  color: #eef3f9 !important;
}
.qt-icon::before { content: ''; position: absolute; left: 12%; right: 12%; top: 6%; height: 42%; border-radius: 50% / 60%; background: linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0)); pointer-events: none; }
.qt-icon .ic { position: relative; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .quick-tile { background: linear-gradient(160deg, #1f2c40 0%, #141e2e 100%); border-color: rgba(205,216,230,.10); box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 -3px 0 rgba(0,0,0,.25) inset, 0 10px 22px -8px rgba(0,0,0,.6); } }
:root[data-theme="dark"] .quick-tile { background: linear-gradient(160deg, #1f2c40 0%, #141e2e 100%); border-color: rgba(205,216,230,.10); box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 -3px 0 rgba(0,0,0,.25) inset, 0 10px 22px -8px rgba(0,0,0,.6); }
:root[data-theme="dark"] .quick-tile:hover { background: linear-gradient(160deg, #24344c 0%, #172234 100%); }

/* 첫 화면 숫자 4칸: 칸 크기 동일 */
.hero-band .hero-stats { grid-auto-rows: 1fr; }

/* 7단지 가치 버튼: 입체 */
.hero-actions .btn[href="#strengths"] {
  background: linear-gradient(180deg, #ffffff 0%, #e4eaf2 100%);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(29,53,87,.14), 0 10px 22px -8px rgba(0,0,0,.6), 0 2px 4px rgba(0,0,0,.25);
  transition: transform .15s, box-shadow .15s;
}
.hero-actions .btn[href="#strengths"]:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 #fff, inset 0 -3px 0 rgba(29,53,87,.14), 0 16px 28px -10px rgba(0,0,0,.7), 0 3px 6px rgba(0,0,0,.25); }
.hero-actions .btn[href="#strengths"]:active { transform: translateY(1px); box-shadow: inset 0 2px 4px rgba(29,53,87,.2), 0 2px 4px rgba(0,0,0,.3); }

/* 행정 / 단지 진행상황 */
.side-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: var(--tint, rgba(29,53,87,.06)); border: 1px solid var(--line); margin-bottom: 6px; }
.side-switch a { text-align: center; padding: 10px 8px; border-radius: 10px; font-weight: 700; font-size: .95rem; color: var(--muted); text-decoration: none; }
.side-switch a[aria-current="page"] { background: var(--surface); color: var(--heading-strong); box-shadow: 0 1px 2px rgba(15,29,49,.12), 0 4px 10px -4px rgba(15,29,49,.18); }
.prog-row { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.prog-row:first-of-type { border-top: 0; padding-top: 0; }
.prog-sub { margin: 0; font-size: 1.08rem; color: var(--heading-strong); }
.prog-sub small { font-size: .78rem; font-weight: 600; color: var(--muted); margin-left: 6px; }

/* 이정표 (가로줄) */
.ms { margin: 14px 0 6px; }
.ms-label { margin: 0 0 8px; font-size: .86rem; font-weight: 800; color: var(--heading-strong); }
.milestone { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); position: relative; }
.milestone li { position: relative; }
.milestone li::before { content: ''; position: absolute; top: 17px; left: -50%; right: 50%; height: 3px; background: var(--line); z-index: 0; }
.milestone li:first-child::before { display: none; }
.milestone li.done::before, .milestone li.current::before { background: var(--navy); }
.milestone a { position: relative; z-index: 1; display: grid; justify-items: center; gap: 5px; text-decoration: none; color: inherit; text-align: center; padding: 0 2px; }
.m-dot { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; background: var(--surface); color: var(--muted); border: 2px solid var(--gray, #b8c2cf); }
.milestone li.done .m-dot { background: var(--navy); border-color: var(--navy); color: #fff; }
.milestone li.current .m-dot { background: var(--surface); border: 3px solid var(--navy); color: var(--heading-strong); box-shadow: 0 0 0 5px var(--navy-soft); }
.m-name { font-size: .78rem; font-weight: 700; line-height: 1.25; color: var(--heading-strong); word-break: keep-all; }
.milestone li:not(.done):not(.current) .m-name { color: var(--muted); font-weight: 600; }
.m-meta { font-size: .7rem; font-weight: 800; color: var(--heading); min-height: 1em; }
.milestone li.current .m-meta { color: #fff; background: var(--navy); padding: 1px 7px; border-radius: 999px; }
:root[data-theme="dark"] .milestone li.done .m-dot, :root[data-theme="dark"] .milestone li.done::before, :root[data-theme="dark"] .milestone li.current::before { background: var(--platinum, #c9d4e3); border-color: var(--platinum, #c9d4e3); color: #0f1d31; }
:root[data-theme="dark"] .milestone li.current .m-dot { border-color: var(--platinum, #c9d4e3); }
:root[data-theme="dark"] .milestone li.current .m-meta { background: var(--platinum, #c9d4e3); color: #0f1d31; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .milestone li.done .m-dot, :root:not([data-theme="light"]) .milestone li.done::before, :root:not([data-theme="light"]) .milestone li.current::before { background: var(--platinum, #c9d4e3); border-color: var(--platinum, #c9d4e3); color: #0f1d31; } :root:not([data-theme="light"]) .milestone li.current .m-dot { border-color: var(--platinum, #c9d4e3); } :root:not([data-theme="light"]) .milestone li.current .m-meta { background: var(--platinum, #c9d4e3); color: #0f1d31; } }
.cx-now { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 4px 0 6px; }
.cx-now small { display: block; font-size: .78rem; color: var(--muted); font-weight: 700; }
.cx-now strong { font-size: 1.02rem; }
.cx-badges { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 2px 0 0; }
.cx-b { display: inline-flex; align-items: center; gap: 6px; }
.cx-b em { font-style: normal; font-size: .8rem; font-weight: 800; color: var(--heading-strong); }

/* 단지 타임라인 */
.side-switch { margin: 6px 0 4px; }
.tl-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 8px; }
.tl-head h2 { margin: 0; }
.timeline { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.timeline li { position: relative; padding: 0 0 18px 28px; }
.timeline li::before { content: ''; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 4px var(--bg, #f2f4f7); }
.timeline li.doing::before { background: var(--surface); border: 3px solid var(--navy); box-sizing: border-box; }
.timeline li.future::before { background: var(--surface); border: 2px dashed var(--gray, #b8c2cf); box-sizing: border-box; }
.timeline li.future .tl-body strong { color: var(--muted); }
.tl-date { display: block; font-size: .8rem; font-weight: 700; color: var(--heading); }
.tl-body strong { display: block; font-size: 1rem; color: var(--heading-strong); margin-top: 2px; }
.tl-body strong .badge { margin-left: 4px; vertical-align: 2px; }
.tl-body p { margin: 4px 0 0; color: var(--ink); font-size: .94rem; }
.tl-empty { color: var(--muted); font-size: .9rem; margin: 6px 0 0; }
.tl-two { display: grid; gap: 18px; margin-top: 10px; }
@media (min-width: 760px) { .tl-two { grid-template-columns: 1fr 1fr; } }
.tl-two .timeline li { padding-bottom: 12px; }
.road { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.road li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 12px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; }
.road li > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .85rem; border: 2px solid var(--gray, #b8c2cf); color: var(--muted); }
.road strong { color: var(--heading-strong); }
.road p { margin: 2px 0 0; font-size: .84rem; color: var(--muted); }
:root[data-theme="dark"] .timeline li::before { background: var(--platinum, #c9d4e3); }
:root[data-theme="dark"] .timeline li.doing::before, :root[data-theme="dark"] .timeline li.future::before { background: var(--surface); border-color: var(--platinum, #c9d4e3); }

.nav a.nav-home { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.nav a.nav-home svg { width: 19px; height: 19px; display: block; flex: none; }
.lock-mini { display: flex; gap: 12px; align-items: center; margin-top: 10px; padding: 14px 16px; border: 1px dashed var(--line); border-radius: 12px; background: var(--surface); color: inherit; text-decoration: none; }
.lock-mini strong { display: block; color: var(--heading-strong); }
.lock-mini small { display: block; color: var(--muted); font-size: .84rem; }

/* 왜 지금 준비하나요? — 그림 카드 */
.why-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.why-jump a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: .86rem; font-weight: 700; color: var(--heading-strong); text-decoration: none; }
.why-jump a span { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--navy); color: #fff; font-size: .72rem; }
.age-card { display: grid; gap: 14px; padding: 20px; border-radius: 18px; color: #fff; background: linear-gradient(150deg, #1d3557 0%, #0f1d31 100%); box-shadow: 0 12px 26px -12px rgba(15,29,49,.55); }
.age-card small { color: #b9c6d8; font-weight: 700; font-size: .8rem; }
.age-card strong { display: block; font-size: 3rem; line-height: 1.05; font-weight: 800; }
.age-card strong span { font-size: 1.1rem; margin-left: 4px; color: #c9d4e3; }
.age-card p { margin: 2px 0 0; color: #c9d4e3; font-size: .9rem; }
.age-bar { position: relative; height: 12px; border-radius: 999px; background: rgba(255,255,255,.15); }
.age-bar span { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: linear-gradient(90deg, #c9d4e3, #ffffff); }
.age-bar em { position: absolute; right: 0; top: 16px; font-style: normal; font-size: .75rem; color: #b9c6d8; font-weight: 700; }
.age-card { padding-bottom: 30px; }
.wr-list { display: grid; gap: 14px; }
@media (min-width: 820px) { .wr-list { grid-template-columns: 1fr 1fr; } }
.wr { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; display: grid; gap: 10px; scroll-margin-top: 140px; box-shadow: 0 8px 20px -14px rgba(15,29,49,.35); }
.wr-top { display: flex; justify-content: space-between; align-items: center; }
.wr-no { font-family: var(--display); font-size: 1.5rem; color: var(--brass); line-height: 1; }
.wr h3 { margin: 0; font-size: 1.15rem; line-height: 1.35; color: var(--heading-strong); word-break: keep-all; }
.wr-vis { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; align-items: center; padding: 14px; border-radius: 14px; background: var(--tint, rgba(29,53,87,.06)); }
.wr-big strong { display: block; font-size: 1.7rem; font-weight: 800; line-height: 1.1; color: var(--heading-strong); word-break: keep-all; }
.wr-big span { display: block; margin-top: 4px; font-size: .8rem; font-weight: 700; color: var(--muted); }
.wr-svg { color: var(--heading); }
.wr-svg svg { width: 100%; height: auto; display: block; }
.wr-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.wr-points li { position: relative; padding-left: 24px; font-size: .97rem; font-weight: 600; line-height: 1.45; }
.wr-points li::before { content: ''; position: absolute; left: 2px; top: .38em; width: 14px; height: 14px; border-radius: 50%; background: var(--navy); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat; }
.wr-more summary { cursor: pointer; font-size: .86rem; font-weight: 700; color: var(--muted); }
.wr-more p { margin: 8px 0 0; font-size: .92rem; }
.cost-chips { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); }
.cost-chips div { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--navy); border-radius: 12px; padding: 12px 14px; }
.cost-chips strong { display: block; color: var(--heading-strong); }
.cost-chips span { display: block; font-size: .88rem; color: var(--muted); margin-top: 2px; }
.why-big { font-style: normal; font-size: 1.35rem; font-weight: 800; color: var(--heading-strong); line-height: 1.15; }
:root[data-theme="dark"] .wr-svg { color: var(--platinum, #c9d4e3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wr-svg { color: var(--platinum, #c9d4e3); } }

/* 가치 블록 요점 */
.block-points { margin-top: 8px; }
.block-points li { font-size: .95rem; }
.block .wr-more { margin-top: 8px; }
.block { scroll-margin-top: 140px; }
/* 행정 진행상황 단계 카드 */
.ph-card { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 18px; box-shadow: 0 8px 20px -14px rgba(15,29,49,.35); scroll-margin-top: 140px; }
.ph-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.ph-head h2 { margin: 0; font-size: 1.15rem; }
.ph-letter { font-size: .75rem; font-weight: 800; color: var(--muted); letter-spacing: .04em; }
.ph-done { font-size: .85rem; font-weight: 800; color: var(--heading); background: var(--tint, rgba(29,53,87,.06)); padding: 4px 10px; border-radius: 999px; }
.ph-ic { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; color: #eef3f9; background: radial-gradient(120% 90% at 30% 15%, #3d5f8f 0%, #1d3557 45%, #0c1829 100%); box-shadow: inset 0 1.5px 0 rgba(255,255,255,.3), 0 6px 12px -4px rgba(15,29,49,.45); flex: none; }
.ph-ic svg { width: 26px; height: 26px; }
.ph-sum { margin: 0; color: var(--muted); font-size: .94rem; }
.st-rows { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.st-rows details { border: 1px solid var(--line); border-radius: 12px; background: var(--bg, #f6f7f9); }
.st-rows li.done details { border-color: var(--teal); }
.st-rows summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; }
.st-rows summary::-webkit-details-marker { display: none; }
.st-id { font-size: .8rem; font-weight: 800; color: var(--muted); }
.st-name { font-weight: 700; font-size: .96rem; line-height: 1.35; color: var(--heading-strong); }
.st-rows details > p { margin: 0 14px 10px; font-size: .92rem; }
.st-rows details[open] summary { border-bottom: 1px dashed var(--line); margin-bottom: 10px; }
.road li { grid-template-columns: 46px 1fr; align-items: center; }
.road .ph-ic { width: 40px; height: 40px; border-radius: 12px; }
.road .ph-ic svg { width: 22px; height: 22px; }
/* FAQ 카드 */
.faq details { border-radius: 16px; box-shadow: 0 6px 16px -12px rgba(15,29,49,.35); }
.faq summary { align-items: center; padding: 16px; line-height: 1.4; }
.faq summary::before { content: 'Q'; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; background: linear-gradient(150deg, #2c4c7c, #0f1d31); font-family: inherit; font-size: .9rem; font-weight: 800; }
.faq summary::after { content: '+'; margin-left: auto; font-size: 1.3rem; font-weight: 400; color: var(--muted); }
.faq details[open] summary::after { content: '−'; }
.faq .a { padding: 0 18px 16px 56px; position: relative; }
.faq .a::before { content: 'A'; position: absolute; left: 16px; top: 0; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: .9rem; color: var(--heading); border: 2px solid var(--navy); }