/* 썸트리 웹 화면. 값은 tokens.css 변수만 쓴다. 기준: docs/design-system.md
   구성: 밝은 바탕 + 초록 포인트. 사진은 액자(둥근 모서리)로 배치하고 그 위에 흰 지표 카드를 겹친다. */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-s); line-height: 1.6; letter-spacing: var(--ls-body);
  font-variant-numeric: tabular-nums; word-break: keep-all; overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100vh;
}
#app { flex: 1; }
a { color: inherit; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--r-xs); }
img { display: block; max-width: 100%; }
.wrap { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.up { color: var(--up); } .down { color: var(--down); }
.muted { color: var(--ink-3); }
.show-m { display: none; }

/* ---------- 헤더 ---------- */
.gnb { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.gnb .wrap { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); height: 72px; }
.logo { display: inline-flex; align-items: center; gap: var(--s-3); color: var(--brand); text-decoration: none; flex: none; }
.logo svg { height: 20px; width: auto; display: block; }
.logo small { padding-left: var(--s-3); border-left: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-m); white-space: nowrap; }
.gnb nav { display: flex; gap: var(--s-1); flex: 1; height: 100%; min-width: 0; }
.gnb nav a { display: inline-flex; align-items: center; padding: 0 clamp(8px, 1.2vw, 16px); text-decoration: none; font-weight: var(--fw-b); font-size: var(--fs-l); color: var(--ink-2); position: relative; white-space: nowrap; }
.gnb nav a:hover { color: var(--ink); }
.gnb nav a[aria-current="page"] { color: var(--brand); }
.gnb nav a[aria-current="page"]::after { content: ""; position: absolute; left: clamp(8px, 1.2vw, 16px); right: clamp(8px, 1.2vw, 16px); bottom: -1px; height: 3px; background: var(--brand); border-radius: var(--r-bar) var(--r-bar) 0 0; }
.gnb .util { display: flex; align-items: center; gap: var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); flex: none; }
.gnb .util a { text-decoration: none; }
.gnb .util a:not(.btn):hover { color: var(--ink); }

/* ---------- 버튼·칩·배지·링크 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: var(--tap); padding: 0 var(--s-5);
  border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-weight: var(--fw-b); font-size: var(--fs-s); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s; }
.btn:hover { border-color: var(--ink-3); background: var(--surface-2); }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--on-dark); }
.btn.primary:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--brand); }
.btn.ghost:hover { background: var(--brand-50); }
.btn.sm { min-height: 40px; padding: 0 var(--s-4); font-size: var(--fs-xs); }
.btn.block { display: flex; width: 100%; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn .dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.btn-row { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.stack { display: grid; gap: var(--s-2); }
.chip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--s-4); border-radius: var(--r-s); border: 1px solid var(--line);
  background: var(--surface); font-size: var(--fs-xs); font-weight: var(--fw-m); color: var(--ink-2); cursor: pointer; text-decoration: none; white-space: nowrap; }
.chip:hover { border-color: var(--ink-3); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--brand-50); border-color: var(--brand); color: var(--brand); font-weight: var(--fw-b); }
.badge { display: inline-flex; align-items: center; min-height: 24px; padding: 2px var(--s-2); border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: var(--fw-b); white-space: nowrap; line-height: 20px; }
.badge.dday { min-width: 56px; justify-content: center; border: 1px solid var(--line); color: var(--ink-2); background: var(--surface); }
.badge.dday.hot { border-color: var(--up); color: var(--up); background: var(--up-50); }
.badge.green { background: var(--brand-50); color: var(--brand); }
.badge.gray { background: var(--line-2); color: var(--ink-2); font-weight: var(--fw-m); }
.badge.gold { background: var(--gold-50); color: var(--gold); border: 1px solid var(--gold); }
.link { color: var(--brand); text-decoration: none; font-weight: var(--fw-b); font-size: var(--fs-xs); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-1);
  min-height: 40px; padding: 0 var(--s-2); margin-right: calc(-1 * var(--s-2)); border-radius: var(--r-xs); }
.link:hover { background: var(--brand-50); }

/* ---------- 홈 히어로: 왼쪽 정보 + 오른쪽 사진 액자 ---------- */
/* 배경 사진(Canva 생성, 왼쪽 여백 구도) + 그라데이션: 글자 영역은 바탕색, 오른쪽으로 갈수록 사진이 드러난다 */
.hero, .pagehead { position: relative; overflow: hidden; isolation: isolate; }
.hero::before, .pagehead::before { content: ""; position: absolute; inset: -24px; z-index: -2; background: var(--photo) right 40% / cover no-repeat;
  transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) scale(1.03); transition: transform .8s cubic-bezier(.2, .7, .2, 1); filter: saturate(.88) brightness(1.03); }
.hero::after, .pagehead::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero { --photo: url("assets/bg-home.jpg"); background: var(--paper); padding: clamp(48px, 6vw, 96px) 0 clamp(56px, 7vw, 104px); }
.hero::after { background:
    linear-gradient(180deg, rgba(253, 253, 246, 0) 58%, var(--paper) 100%),
    linear-gradient(90deg, var(--paper) 0%, rgba(253, 253, 246, .96) 36%, rgba(253, 253, 246, .72) 52%, rgba(253, 253, 246, .18) 76%, rgba(253, 253, 246, 0) 100%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.eyebrow { display: inline-flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; min-height: 32px; padding: 0 var(--s-3); border-radius: 999px; background: var(--brand-50); color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.eyebrow i { width: 3px; height: 3px; border-radius: 50%; background: var(--leaf); }
.hero h1 { margin: var(--s-5) 0 0; font-size: var(--fs-2xl); font-weight: var(--fw-b); letter-spacing: var(--ls-tight); line-height: 1.3; color: var(--ink-2); }
.headline { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-2); flex-wrap: wrap; }
.headline b { font-size: var(--fs-display); font-weight: var(--fw-num); letter-spacing: var(--ls-tight); line-height: 1; color: var(--brand); }
.headline b small { font-size: var(--fs-3xl); margin-left: var(--s-1); }
.delta { display: inline-flex; align-items: center; gap: var(--s-1); min-height: 32px; padding: 0 var(--s-3); border-radius: var(--r-xs); background: var(--up-50); color: var(--up); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.trend { display: flex; align-items: flex-end; gap: var(--s-3); height: 120px; margin-top: var(--s-6); max-width: 400px; }
.trend div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--s-1); height: 100%; }
.trend b { font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-2); line-height: 1; }
.trend span { display: block; width: 100%; background: var(--brand-100); border-radius: var(--r-bar) var(--r-bar) 0 0; }
.trend div:last-child span { background: var(--leaf); }
.trend div:last-child b { color: var(--brand); }
.trend label { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1; padding-top: var(--s-1); }
.searchbox { display: flex; align-items: center; margin-top: var(--s-6); max-width: 560px; height: 56px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 var(--s-1) 0 var(--s-4); box-shadow: var(--shadow); }
.searchbox:focus-within { border-color: var(--brand); }
.searchbox svg { width: 20px; height: 20px; stroke: var(--ink-3); fill: none; stroke-width: 2; flex: none; margin-right: var(--s-3); }
.searchbox input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: var(--fs-s); color: var(--ink); }
.searchbox input::placeholder { color: var(--ink-3); }
.searchbox button { min-height: 46px; padding: 0 var(--s-5); border: 0; border-radius: var(--r-xs); background: var(--brand); color: var(--on-dark); font-weight: var(--fw-b); cursor: pointer; white-space: nowrap; }
.searchbox button:hover { background: var(--brand-600); }
.searchbox.flat { box-shadow: none; max-width: none; margin-top: 0; }
.popular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); }
.popular a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--s-3); border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--line); color: var(--ink-2); text-decoration: none; }
.popular a:hover { border-color: var(--brand); color: var(--brand); }

.visual { display: flex; justify-content: flex-end; perspective: 1400px; }
.stat-card { width: min(380px, 100%); background: rgba(255, 255, 255, .82); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, .8); border-radius: var(--r-l); box-shadow: var(--shadow-l); padding: var(--s-5) var(--s-6); }
.stat-card h2 { margin: 0 0 var(--s-2); font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-3); }
.leaders { list-style: none; margin: 0; padding: 0; }
.leaders li { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; }
.leaders li + li { border-top: 1px solid var(--line-2); }
.leaders .k { font-size: var(--fs-s); color: var(--ink-2); white-space: nowrap; }
.leaders .v { font-size: var(--fs-xl); font-weight: var(--fw-num); letter-spacing: var(--ls-tight); white-space: nowrap; }
.leaders .v small { font-size: var(--fs-xs); font-weight: var(--fw-m); margin-left: 2px; color: var(--ink-3); }
.stat-card .foot { margin-top: var(--s-2); padding-top: var(--s-3); border-top: 1px solid var(--line-2); display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); color: var(--ink-3); }

/* 주제 지표 4칸 */
.kpis4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.kpi { display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
.kpi:hover { border-color: var(--leaf-300); box-shadow: var(--shadow); }
.kpi .k { font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-m); display: flex; justify-content: space-between; gap: var(--s-2); }
.kpi .k span { color: var(--brand); font-weight: var(--fw-b); white-space: nowrap; }
.kpi .v { margin-top: var(--s-2); font-size: var(--fs-2xl); font-weight: var(--fw-num); letter-spacing: var(--ls-tight); line-height: 1.2; }
.kpi .v small { font-size: var(--fs-s); font-weight: var(--fw-m); margin-left: 2px; color: var(--ink-2); }
.kpi .sub { font-size: var(--fs-xs); color: var(--ink-2); }

/* ---------- 페이지 머리 (하위 페이지): 밝은 바탕 + 사진 액자 ---------- */
.pagehead { background: var(--sage); border-bottom: 1px solid var(--line); }
.pagehead::after { background: linear-gradient(90deg, var(--sage) 0%, rgba(242, 245, 234, .96) 38%, rgba(242, 245, 234, .7) 56%, rgba(242, 245, 234, .12) 84%); }
.pagehead.no-photo::before { display: none; }
.pagehead .wrap { padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.pagehead .wrap > div { max-width: 760px; }
.crumb { font-size: var(--fs-xs); color: var(--ink-3); display: flex; gap: var(--s-2); flex-wrap: wrap; }
.crumb a { color: var(--ink-2); text-decoration: none; }
.crumb a:hover { color: var(--brand); }
.pagehead h1 { margin: var(--s-3) 0 0; font-size: var(--fs-3xl); font-weight: var(--fw-b); letter-spacing: var(--ls-tight); line-height: 1.3; }
.pagehead p { margin: var(--s-2) 0 0; color: var(--ink-2); }
.ph-kpis { display: flex; flex-wrap: wrap; margin-top: var(--s-6); }
.ph-kpis div { padding: 0 var(--s-6); }
.ph-kpis div:first-child { padding-left: 0; }
.ph-kpis div + div { border-left: 1px solid var(--line); }
.ph-kpis span { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.ph-kpis b { font-size: var(--fs-2xl); font-weight: var(--fw-num); letter-spacing: var(--ls-tight); color: var(--ink); }

/* ---------- 구역·패널 ---------- */
main { padding-bottom: var(--section); }
.sec { margin-top: var(--section); }
.sec.first { margin-top: var(--s-6); }
.sec-h { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); margin-bottom: var(--s-5); }
.sec-h h2 { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-b); letter-spacing: var(--ls-tight); line-height: 1.3; }
.sec-h p { margin: var(--s-1) 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.panel-h { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line-2); min-height: 64px; }
.panel-h h3 { margin: 0; font-size: var(--fs-l); font-weight: var(--fw-b); letter-spacing: var(--ls-tight); }
.panel-h small { font-size: var(--fs-xs); color: var(--ink-3); }
.pad { padding: var(--s-5); }
.cols { display: grid; gap: var(--s-5); align-items: start; }
.c-8-4 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.c-6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.c-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.c-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.c-side { grid-template-columns: 272px minmax(0, 1fr); }
.c-detail { grid-template-columns: minmax(0, 1fr) 352px; }
.stretch { align-items: stretch; }
.note { font-size: var(--fs-xs); color: var(--ink-3); margin: var(--s-3) 0 0; }
.sticky { position: sticky; top: 96px; }

/* 공종 띠 */
.kinds { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; }
.kinds a { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) var(--s-4); text-decoration: none; }
.kinds a + a { border-left: 1px solid var(--line-2); }
.kinds a:hover { background: var(--surface-2); }
.kinds .ic { width: 40px; height: 40px; border-radius: var(--r-s); background: var(--brand-50); display: grid; place-items: center; }
.kinds svg { width: 24px; height: 24px; stroke: var(--brand); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kinds .t { font-size: var(--fs-xs); color: var(--ink-2); font-weight: var(--fw-m); margin-top: var(--s-1); }
.kinds .v { font-size: var(--fs-xl); font-weight: var(--fw-num); letter-spacing: var(--ls-tight); line-height: 1; }
.kinds .v small { font-size: var(--fs-xs); font-weight: var(--fw-m); color: var(--ink-3); margin-left: 2px; }
.kinds .bar { height: 4px; border-radius: var(--r-bar); background: var(--line-2); overflow: hidden; }
.kinds .bar i { display: block; height: 100%; background: var(--leaf); }

/* 표 */
.tbl-wrap { overflow-x: auto; }
table.tbl { width: 100%; border-collapse: collapse; }
.tbl th { text-align: left; font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-m); padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: var(--s-4); border-bottom: 1px solid var(--line-2); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tr.row { cursor: pointer; }
.tbl tr.row:hover td { background: var(--surface-2); }
.tbl th:first-child, .tbl td:first-child { padding-left: var(--s-5); }
.tbl th:last-child, .tbl td:last-child { padding-right: var(--s-5); }
.tbl .n { text-align: right; white-space: nowrap; }
.tbl .c { text-align: center; width: 88px; }
.tbl .nm { font-weight: var(--fw-b); color: var(--ink); text-decoration: none; line-height: 1.45; }
.tbl a.nm:hover { color: var(--brand); }
.tbl .sub { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-r); }
.tbl .sub .badge { margin-left: var(--s-1); }
.tbl .rank { width: 56px; color: var(--ink-3); font-weight: var(--fw-num); text-align: center; }
.tbl .rank.top { color: var(--brand); }
.tbl td.sp, .tbl td.nowrap, .tbl td.hide-m { white-space: nowrap; }
.tbl td.spec { max-width: 168px; word-break: break-all; }
.have { color: var(--gold); font-weight: var(--fw-b); font-size: var(--fs-xs); text-decoration: none; white-space: nowrap; }
.have:hover { text-decoration: underline; }

/* 지역 타일 지도 */
.tilemap { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: var(--s-5) var(--s-5) var(--s-3); }
.tile { aspect-ratio: 1 / .82; border-radius: var(--r-xs); display: flex; flex-direction: column; align-items: center; justify-content: center; text-decoration: none; line-height: 1.25; }
.tile b { font-size: var(--fs-xs); font-weight: var(--fw-b); }
.tile span { font-size: var(--fs-xs); }
.tile:hover { box-shadow: inset 0 0 0 2px var(--ink); }
.tile.mine { box-shadow: inset 0 0 0 2px var(--up); }
.legend { display: flex; align-items: center; gap: 2px; padding: 0 var(--s-5) var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; flex-wrap: wrap; }
.legend i { width: 20px; height: 8px; border-radius: var(--r-bar); }

/* 정의 목록 */
.kv { display: grid; grid-template-columns: 128px minmax(0, 1fr); margin: 0; }
.kv dt, .kv dd { margin: 0; padding: var(--s-3) 0; border-bottom: 1px solid var(--line-2); }
.kv dt { color: var(--ink-3); font-size: var(--fs-xs); align-self: center; }
.kv dd { font-weight: var(--fw-m); }
.kv > :nth-last-child(-n+2) { border-bottom: 0; }
.kv.rsum { padding: var(--s-1) var(--s-5) var(--s-2); border-top: 1px solid var(--line-2); grid-template-columns: minmax(0, 1fr) auto; }
.kv.rsum dd { text-align: right; font-weight: var(--fw-b); }

/* 가로 막대 */
.hbars { list-style: none; margin: 0; padding: var(--s-3) var(--s-5) var(--s-4); }
.hbars li { display: grid; grid-template-columns: 104px minmax(0, 1fr) 64px; align-items: center; gap: var(--s-3); min-height: 36px; }
.hbars .k { font-size: var(--fs-xs); color: var(--ink-2); }
.hbars .bar { height: 12px; background: var(--leaf-300); border-radius: 0 var(--r-bar) var(--r-bar) 0; min-width: 2px; }
.hbars li.hl .bar { background: var(--brand); }
.hbars li.hl .k, .hbars li.hl .v { color: var(--ink); font-weight: var(--fw-b); }
.hbars .v { text-align: right; font-size: var(--fs-xs); }

/* 낙찰 분석 + 리포트 */
.facts { list-style: none; margin: 0; padding: 0; }
.facts li { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5); align-items: center; }
.facts li + li { border-top: 1px solid var(--line-2); }
.facts .v { font-size: var(--fs-3xl); font-weight: var(--fw-num); letter-spacing: var(--ls-tight); line-height: 1.1; color: var(--brand); }
.facts .v small { font-size: var(--fs-l); font-weight: var(--fw-m); margin-left: 2px; }
.facts b { display: block; font-size: var(--fs-s); font-weight: var(--fw-b); }
.facts p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-2); }
.panel-f { padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line-2); }

/* 매물 카드 */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: var(--s-4); }
.lst { display: flex; flex-direction: column; text-decoration: none; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .15s, box-shadow .15s; }
.lst:hover { border-color: var(--leaf-300); box-shadow: var(--shadow); }
.lst .ph { aspect-ratio: 4 / 3; background: var(--line-2) center / cover no-repeat; }
.lst .ph.none { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--s-2); color: var(--ink-3); font-size: var(--fs-xs); background: var(--surface-2); }
.lst .ph.none svg { width: 28px; height: 28px; stroke: var(--ink-3); fill: none; stroke-width: 1.5; }
.lst .bd { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-1); flex: 1; }
.lst .farm { font-size: var(--fs-xs); color: var(--ink-3); }
.lst .sp { font-weight: var(--fw-b); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lst .q { font-size: var(--fs-xs); color: var(--ink-2); }
.lst .tel { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line-2); display: flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-b); color: var(--brand); font-size: var(--fs-xs); }
.ico { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.slot { border: 1px solid var(--line); background: var(--gold-50); border-radius: var(--r); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.slot b { color: var(--ink); font-size: var(--fs-l); font-weight: var(--fw-b); line-height: 1.4; }
.slot p { margin: 0; color: var(--ink-2); font-size: var(--fs-xs); }
.slot .btn { align-self: flex-start; margin-top: auto; }

/* 필터 */
.filters { position: sticky; top: 96px; overflow: hidden; }
.fdet > summary { display: none; }
.fdet > summary::-webkit-details-marker { display: none; }
.filters h4 { margin: 0; padding: var(--s-4) var(--s-5) var(--s-2); font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-b); }
.filters .opts { display: flex; flex-wrap: wrap; gap: var(--s-2); padding: 0 var(--s-5) var(--s-4); border-bottom: 1px solid var(--line-2); }
.filters .opts:last-child { border-bottom: 0; }
.filters .field { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line-2); }
.input { width: 100%; height: var(--tap); border: 1px solid var(--line); border-radius: var(--r-s); padding: 0 var(--s-4); background: var(--surface); font-size: var(--fs-s); }
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.listbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--s-3); min-height: 40px; }
.listbar b { font-size: var(--fs-l); font-weight: var(--fw-b); }
.pagerow { display: flex; justify-content: center; padding: var(--s-4); border-top: 1px solid var(--line-2); }

/* 상세 */
.facts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.facts-row > div { padding: var(--s-5); }
.facts-row > div + div { border-left: 1px solid var(--line-2); }
.facts-row span { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.facts-row b { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-1); font-size: var(--fs-xl); font-weight: var(--fw-num); letter-spacing: var(--ls-tight); line-height: 1.3; }
.facts-row b > span { display: inline; font-size: inherit; color: inherit; white-space: nowrap; }
.facts-row em { font-style: normal; display: block; font-size: var(--fs-xs); color: var(--ink-2); margin-top: 2px; }
.gallery { display: grid; grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: clamp(120px, 13vw, 184px); gap: 4px; border-radius: var(--r); overflow: hidden; }
.gallery .g-it { position: relative; display: block; padding: 0; border: 0; background: var(--line-2); cursor: zoom-in; overflow: hidden; }
.gallery .g-it:first-child { grid-row: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.gallery .g-it:hover img { transform: scale(1.03); }
.g-more { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10, 20, 14, .55); color: #fff; font-size: var(--fs-xl); font-weight: var(--fw-num); }
.raw { white-space: pre-wrap; font-size: var(--fs-xs); color: var(--ink-2); padding: var(--s-5); margin: 0; font-family: var(--font); line-height: 1.7; }
details.more-raw > summary { list-style: none; cursor: pointer; min-height: var(--tap); display: flex; align-items: center; padding: 0 var(--s-5); color: var(--brand); font-weight: var(--fw-b); font-size: var(--fs-xs); }
details.more-raw > summary::-webkit-details-marker { display: none; }
details.more-raw:not([open]) > .raw { display: none; }
.raw-preview { max-height: 168px; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
details.more-raw[open] + .raw-preview, details.more-raw[open] > summary { display: none; }
.phone-big { font-size: var(--fs-2xl); font-weight: var(--fw-num); letter-spacing: var(--ls-tight); line-height: 1.2; }
.callout { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-3) var(--s-5); border-radius: var(--r); background: var(--brand-50); border: 1px solid var(--brand-100); text-decoration: none; margin-bottom: var(--s-4); }
.callout b { color: var(--brand); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps > div { padding: var(--s-5); }
.steps > div + div { border-left: 1px solid var(--line-2); }
.steps .k { display: inline-flex; font-size: var(--fs-xs); color: var(--brand); font-weight: var(--fw-b); background: var(--brand-50); border-radius: var(--r-xs); padding: 2px var(--s-2); }
.steps b { display: block; margin-top: var(--s-2); font-size: var(--fs-l); }
.steps p { margin: var(--s-1) 0 0; font-size: var(--fs-xs); color: var(--ink-2); }
.soon { font-size: var(--fs-xs); color: var(--ink-3); }

/* 빈 상태 */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-2); padding: var(--s-7) var(--s-5); color: var(--ink-2); }
.empty svg { width: 40px; height: 40px; stroke: var(--ink-3); fill: none; stroke-width: 1.5; }
.empty b { color: var(--ink); font-size: var(--fs-s); }
.empty p { margin: 0; font-size: var(--fs-xs); max-width: 440px; }
.empty .btn { margin-top: var(--s-2); }

/* 안내 메시지 (준비 중 기능) */
.toast { position: fixed; left: 50%; bottom: var(--s-6); transform: translateX(-50%); z-index: 50; width: max-content; max-width: calc(100% - 2 * var(--gutter)); background: var(--ink); color: var(--on-dark); padding: var(--s-3) var(--s-5); border-radius: var(--r-s); box-shadow: var(--shadow-l); font-size: var(--fs-s); }

/* 아래 */

/* ---------- 반응형 ---------- */
@media (max-width: 1240px) {
  .kinds { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kinds a:nth-child(5) { border-left: 0; }
  .kinds a:nth-child(n+5) { border-top: 1px solid var(--line-2); }
  .logo small { display: none; }
}
@media (max-width: 1024px) {
  .gnb .util .hide-t { display: none; }
  .gnb nav a { font-size: var(--fs-s); }
  .hero-grid, .c-8-4, .c-detail, .c-6-6, .c-side { grid-template-columns: minmax(0, 1fr); }
  .visual { justify-content: flex-start; }
  .kpis4, .c-4, .c-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sticky, .filters { position: static; }
}
@media (max-width: 760px) {
  .gnb .wrap { height: auto; flex-wrap: wrap; padding-top: var(--s-3); gap: 0 var(--s-3); }
  .gnb .util { margin-left: auto; }
  .gnb nav { order: 3; flex-basis: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--s-2); height: 48px; overflow-x: auto; scrollbar-width: none;
    -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .hero h1 { font-size: var(--fs-xl); }
  .trend { height: 100px; }
  .hero::before { inset: 0 -40% auto 0; height: 420px; background-position: 70% top; }
  .hero::after { background: linear-gradient(180deg, rgba(253, 253, 246, .55) 0%, rgba(253, 253, 246, .9) 40%, var(--paper) 62%); }
  .pagehead::after { background: linear-gradient(90deg, rgba(242, 245, 234, .97) 0%, rgba(242, 245, 234, .9) 60%, rgba(242, 245, 234, .6) 100%); }
  .visual { justify-content: stretch; }
  .tilt { width: 100%; }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kinds a:nth-child(odd) { border-left: 0; }
  .kinds a:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .c-3, .c-4, .steps { grid-template-columns: minmax(0, 1fr); }
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .steps > div + div { border-left: 0; border-top: 1px solid var(--line-2); }
  .facts-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-row > div:nth-child(3) { border-left: 0; }
  .facts-row > div:nth-child(n+3) { border-top: 1px solid var(--line-2); }
  .facts-row b { flex-direction: column; align-items: flex-start; gap: var(--s-1); }
  .facts li { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-4); }
  .facts .v { font-size: var(--fs-2xl); }
  .pagehead h1 { font-size: var(--fs-2xl); }
  .ph-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--s-4); }
  .ph-kpis div { padding: 0 var(--s-4); }
  .ph-kpis div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .ph-kpis b { font-size: var(--fs-xl); }
  .gallery { grid-template-columns: 1fr 1fr; }
  .tbl .hide-m { display: none; }
  .show-m { display: block; }
  .tbl th, .tbl td { padding: var(--s-3); }
  .tbl th:first-child, .tbl td:first-child { padding-left: var(--s-4); }
  .tbl th:last-child, .tbl td:last-child { padding-right: var(--s-4); }
  .chip, .btn.sm { min-height: var(--tap); }
  .fdet > summary { display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 var(--s-5); font-weight: var(--fw-b); cursor: pointer; list-style: none; }
  .fdet[open] > summary { border-bottom: 1px solid var(--line-2); }
  .aside-first { display: flex; flex-direction: column; }
  .aside-first > aside { order: -1; margin-bottom: var(--s-5); }
}
@media (max-width: 480px) {
  .kpis4 { grid-template-columns: minmax(0, 1fr); }
  .kpi { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-3); }
  .kpi .k { flex-basis: 100%; }
  .kpi .v { margin-top: 0; }
  .headline b { font-size: var(--fs-3xl); }
  .headline b small { font-size: var(--fs-2xl); }
  .searchbox button { padding: 0 var(--s-4); }
}

/* 표 안 모바일 전용 줄은 PC에서 숨긴다 (.tbl .sub의 display:block보다 우선) */
.tbl .sub.show-m { display: none; }
@media (max-width: 760px) { .tbl .sub.show-m { display: block; } .eyebrow { border-radius: var(--r-s); padding: var(--s-1) var(--s-3); } }

/* ---------- 입체감: 깊이·떠오름·기울기 (동작 줄이기 설정 시 끔) ---------- */
.tilt { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .7, .2, 1); width: min(380px, 100%); }
.tilt .stat-card { width: 100%; }

.kpi, .lst, .kinds a, .tile, .chip, .btn { transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .15s, background .15s; }
.kpi:hover, .lst:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); }
.kinds a:hover .ic { transform: translateY(-2px) scale(1.06); box-shadow: var(--shadow); }
.kinds .ic { transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.tile:hover { transform: translateY(-2px) scale(1.04); z-index: 1; position: relative; }
.btn.primary:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(4, 84, 70, .24); }
.panel, .kpi, .lst { box-shadow: 0 1px 2px rgba(17, 26, 20, .03); }

.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }
.kpis4 .kpi.reveal:nth-child(2) { transition-delay: .06s; }
.kpis4 .kpi.reveal:nth-child(3) { transition-delay: .12s; }
.kpis4 .kpi.reveal:nth-child(4) { transition-delay: .18s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .tilt, .tilt .stat-card, .hero::before, .pagehead::before { transform: none !important; }
}


/* ---------- 그래프 (charts.js) ---------- */
.viz { padding: var(--s-5); }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; }
.viz-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--ink); color: var(--on-dark); font-size: var(--fs-xs); font-weight: var(--fw-b); padding: var(--s-2) var(--s-3); border-radius: var(--r-xs); box-shadow: var(--shadow-l); white-space: nowrap; }
.ax { font-size: 12px; fill: var(--ink-3); font-family: var(--font); }
.val { font-size: 13px; fill: var(--ink); font-weight: var(--fw-b); font-family: var(--font); }
.grid { stroke: var(--line-2); stroke-width: 1; }
.base { stroke: var(--line); stroke-width: 1; }
.linechart .ln { fill: none; stroke: var(--leaf); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linechart .area { fill: var(--leaf); opacity: .12; }
.linechart .avg { stroke: var(--ink-3); stroke-dasharray: 4 4; stroke-width: 1; }
.linechart .avg-t { fill: var(--ink-2); }
.linechart .cross { stroke: var(--ink-3); stroke-width: 1; opacity: 0; }
.linechart .dot { fill: var(--surface); stroke: var(--brand); stroke-width: 2.5; opacity: 0; }
.linechart .hit { fill: transparent; cursor: crosshair; }
.colchart .col { fill: var(--leaf-300); transition: fill .15s; }
.colchart .col.hl, .colchart .col.on { fill: var(--brand); }
.donut { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5); align-items: center; }
.donut svg { width: 168px; height: 168px; }
.donut .seg { transition: stroke-width .2s; cursor: pointer; }
.donut .seg.on { stroke-width: 34; }
.d-num { font-size: 28px; font-weight: var(--fw-num); fill: var(--ink); font-family: var(--font); letter-spacing: -0.02em; }
.d-cap { font-size: 13px; fill: var(--ink-3); font-family: var(--font); }
.legend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.legend-list li { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 44px; gap: var(--s-2); align-items: center; font-size: var(--fs-xs); min-height: 28px; }
.legend-list i { width: 12px; height: 12px; border-radius: var(--r-bar); }
.legend-list span { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend-list b { font-weight: var(--fw-b); white-space: nowrap; }
.legend-list em { font-style: normal; color: var(--ink-3); text-align: right; }
.kmap { padding: var(--s-4) var(--s-5) var(--s-2); }
.kmap svg { display: block; width: 100%; max-width: 380px; height: auto; margin: 0 auto; filter: drop-shadow(0 8px 14px rgba(17, 26, 20, .1)); }
.kmap path { stroke: var(--surface); stroke-width: 1.2; stroke-linejoin: round; transition: transform .2s, filter .2s; transform-box: fill-box; transform-origin: center; cursor: pointer; }
.kmap path.on, .kmap a:hover path { filter: brightness(.92); stroke: var(--ink); stroke-width: 1.6; }
.kmap .lab text { font-family: var(--font); fill: var(--ink); paint-order: stroke; stroke: rgba(255, 255, 255, .7); stroke-width: 3px; }
.kmap .lab.on text { fill: #fff; stroke: rgba(5, 50, 48, .5); }
.kmap .ln { font-size: 11px; font-weight: var(--fw-m); }
.kmap .lv { font-size: 13px; font-weight: var(--fw-num); }
.rank-bars { list-style: none; margin: 0; padding: var(--s-3) var(--s-5) var(--s-4); }
.rank-bars li { display: grid; grid-template-columns: 24px 96px minmax(0, 1fr) 84px; gap: var(--s-3); align-items: center; min-height: 36px; }
.rank-bars .r { color: var(--ink-3); font-weight: var(--fw-num); font-size: var(--fs-xs); text-align: center; }
.rank-bars .k { font-size: var(--fs-xs); font-weight: var(--fw-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-bars .t { height: 12px; background: var(--line-2); border-radius: var(--r-bar); overflow: hidden; }
.rank-bars .t i { display: block; height: 100%; border-radius: 0 var(--r-bar) var(--r-bar) 0; }
.rank-bars b { font-size: var(--fs-xs); text-align: right; white-space: nowrap; }
.viz-note { font-size: var(--fs-xs); color: var(--ink-3); padding: 0 var(--s-5) var(--s-4); margin: 0; }
.big-stat { display: flex; align-items: baseline; gap: var(--s-2); }
.big-stat b { font-size: var(--fs-3xl); font-weight: var(--fw-num); letter-spacing: var(--ls-tight); color: var(--brand); }
@media (max-width: 760px) {
  .donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .donut .legend-list { width: 100%; }
  .rank-bars li { grid-template-columns: 20px 80px minmax(0, 1fr) 72px; }
}

/* ---------- 표 디자인 포인트 ---------- */
.tbl thead th { background: var(--surface-2); border-bottom-color: var(--line-2); }
.tbl thead th:first-child { border-top-left-radius: 0; }
.tbl tr.hot td:first-child { box-shadow: inset 3px 0 0 var(--up); }
.tbl tr.row:hover td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.tbl tr.hot:hover td:first-child { box-shadow: inset 3px 0 0 var(--up); }
.tbl .rank b { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: var(--fs-xs); color: var(--ink-3); }
.tbl .rank b.top { color: var(--brand); background: var(--brand-50); }
.tbl .rank b.t1 { color: var(--on-dark); background: var(--brand); box-shadow: 0 4px 10px rgba(4, 84, 70, .25); }
.qcell { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s-3); }
.qbar { width: 72px; height: 6px; border-radius: var(--r-bar); background: var(--line-2); overflow: hidden; display: inline-block; }
.qbar i { display: block; height: 100%; border-radius: var(--r-bar); background: linear-gradient(90deg, var(--leaf-300), var(--leaf)); }
.have.pill { display: inline-flex; align-items: center; min-height: 28px; padding: 0 var(--s-3); border-radius: 999px; background: var(--gold-50); border: 1px solid rgba(138, 100, 16, .25); }
.have.pill:hover { text-decoration: none; background: var(--gold); color: var(--on-dark); }
.tbl .badge.green { border: 1px solid var(--brand-100); }
/* 지도 패널: 옆 표와 높이를 맞추고 지도를 가운데 */
.map-panel { display: flex; flex-direction: column; }
.map-body { flex: 1; display: flex; align-items: center; justify-content: center; }
.map-body .kmap { width: 100%; padding: var(--s-4) var(--s-5) 0; }
@media (max-width: 760px) { .qbar { display: none; } }

/* 사진 없는 매물: 나무 표지(벡터) + 은은한 바탕 */
.lst .ph.none { position: relative; background: radial-gradient(circle at 50% 38%, var(--surface) 0%, var(--brand-50) 70%); color: var(--ink-3); gap: var(--s-1); }
.lst .ph.none::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(var(--brand-100) 1px, transparent 1px); background-size: 14px 14px; opacity: .6; }
.lst .ph.none svg.tree { position: relative; width: 64px; height: 64px; stroke: none; }
.tree .cn { fill: var(--leaf-300); stroke: var(--leaf); stroke-width: 1.6; }
.tree .tr { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; }
.tree .hl { fill: none; stroke: var(--surface); stroke-width: 2; stroke-linecap: round; opacity: .9; }
.tree .sh { fill: var(--brand-100); }
.lst .ph.none span { position: relative; font-size: var(--fs-xs); font-weight: var(--fw-m); }
.lst:hover .ph.none svg.tree { transform: translateY(-2px); transition: transform .25s; }
/* 왼쪽 조건 패널: 화면 고정을 풀어 오른쪽 목록과 함께 자연스럽게 내려간다 */
.filters { position: static; }
.filters .search-field { padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line-2); }
.filters .search-field form { position: relative; }
.filters .search-field svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; stroke: var(--ink-3); fill: none; stroke-width: 2; pointer-events: none; }
.filters .search-field .input { padding-left: 40px; }
.filters .search-field p { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--ink-3); }

/* 조회 기간 선택 */
.period { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding: var(--s-4) var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.period .pl { font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-2); }
.period .seg { display: inline-flex; padding: 4px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r-s); gap: 2px; flex-wrap: wrap; }
.period .seg button { min-height: 40px; padding: 0 var(--s-4); border: 0; border-radius: var(--r-xs); background: transparent; font-size: var(--fs-xs); font-weight: var(--fw-m); color: var(--ink-2); cursor: pointer; }
.period .seg button:hover { color: var(--ink); background: var(--surface); }
.period .seg button.on { background: var(--surface); color: var(--brand); font-weight: var(--fw-b); box-shadow: var(--shadow); }
.period .range { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.period input[type=date] { height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); font-size: var(--fs-s); color: var(--ink); }
.period input[type=date]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.period .pnote { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); }
@media (max-width: 760px) { .period .pnote { margin-left: 0; flex-basis: 100%; } .period .seg { width: 100%; } .period .seg button { flex: 1; } .period input[type=date] { flex: 1; min-width: 0; } }

/* ---------- 홈 v3: 왼쪽 핵심 수치 + 오른쪽 지도 ---------- */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hero.v3 { padding: clamp(36px, 4.5vw, 64px) 0 clamp(48px, 6vw, 80px); }
.hero.v3 .hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; }
.hero.v3 h1 { margin: var(--s-4) 0 0; font-size: var(--fs-3xl); color: var(--ink); line-height: 1.32; }
.hero.v3 h1 em { font-style: normal; color: var(--brand); background: linear-gradient(transparent 64%, var(--brand-100) 64%); }
.statblock { margin-top: var(--s-6); }
.statblock .row1 { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.region-sel { position: relative; display: inline-flex; }
.region-sel select { appearance: none; -webkit-appearance: none; min-height: 44px; padding: 0 40px 0 var(--s-4); border-radius: 999px; border: 1.5px solid var(--brand);
  background: var(--surface); color: var(--brand); font-weight: var(--fw-b); font-size: var(--fs-s); cursor: pointer; box-shadow: var(--shadow); }
.region-sel::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.statblock .wk { font-size: var(--fs-xs); color: var(--ink-3); }
.statblock .lbl { margin-top: var(--s-4); font-size: var(--fs-l); font-weight: var(--fw-m); color: var(--ink-2); }
.statblock .big { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-1); }
.statblock .big b { font-size: var(--fs-display); font-weight: var(--fw-num); line-height: 1.05; color: var(--brand); letter-spacing: var(--ls-tight); }
.statblock .big small { font-size: var(--fs-3xl); font-weight: var(--fw-b); color: var(--brand); margin-left: calc(-1 * var(--s-2)); }
.trend-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--s-3); border-radius: 999px; background: var(--up-50); color: var(--up); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.trend-chip.down { background: var(--down-50); color: var(--down); }
.trend-path { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--ink-3); }
.trend-path b { color: var(--brand); font-weight: var(--fw-num); }
.opp { margin-top: var(--s-5); max-width: 580px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-5); border-radius: var(--r); text-decoration: none;
  background: linear-gradient(135deg, var(--surface) 0%, var(--brand-50) 100%); border: 1px solid var(--brand-100); box-shadow: var(--shadow); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.opp:hover { transform: translateY(-3px); box-shadow: var(--shadow-l); }
.opp .k { display: block; font-size: var(--fs-l); font-weight: var(--fw-b); }
.opp .s { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); }
.opp .m { display: block; margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--ink-2); }
.opp .m b { color: var(--ink); font-weight: var(--fw-b); }
.opp .v { text-align: right; white-space: nowrap; }
.opp .v b { font-size: var(--fs-3xl); font-weight: var(--fw-num); color: var(--brand); letter-spacing: var(--ls-tight); line-height: 1; }
.opp .v small { font-size: var(--fs-l); font-weight: var(--fw-b); color: var(--brand); margin-left: 2px; }
.opp .go { display: block; margin-top: var(--s-2); font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--brand); }
.hotline { margin-top: var(--s-3); max-width: 580px; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-1) var(--s-3); min-height: 52px; padding: var(--s-2) var(--s-4);
  border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line); text-decoration: none; font-size: var(--fs-s); transition: border-color .15s; }
.hotline:hover { border-color: var(--up); }
.hotline i { width: 8px; height: 8px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 4px var(--up-50); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(176, 68, 28, 0); } }
.hotline b { color: var(--up); font-weight: var(--fw-num); }
.hotline span { color: var(--ink-3); font-size: var(--fs-xs); }
.hotline em { margin-left: auto; font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--brand); }
.hero.v3 .searchbox { margin-top: var(--s-5); max-width: 580px; }
.hero.v3 .visual { justify-content: flex-end; }
.hero.v3 .tilt { width: 100%; max-width: 500px; }
.mapcard { background: rgba(255, 255, 255, .86); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: var(--r-l); box-shadow: var(--shadow-l); padding: var(--s-5) var(--s-5) var(--s-3); }
.mc-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); }
.mc-h h2 { margin: 0; font-size: var(--fs-l); font-weight: var(--fw-b); }
.mc-h p { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.mapcard .kmap { padding: var(--s-3) 0 0; }
.mapcard .kmap svg { max-height: 520px; max-width: 400px; }
.mapcard .legend { padding: var(--s-2) 0; }
/* 지도: 선택·흐림·차례로 채워짐 */
.kmap path.dim { fill-opacity: .32; }
.kmap path.sel { stroke: var(--ink); stroke-width: 2; }
.kmap .lab.dim { opacity: .4; }
.kmap .lab.sel .lv, .kmap .lab.sel .ln { font-weight: var(--fw-num); }
.kmap.anim path { animation: provIn .6s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 40ms); }
.kmap.anim .lab { animation: labIn .5s .6s both; }
@keyframes provIn { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@keyframes labIn { from { opacity: 0; } }

/* 공공공사에 들어갈 나무 (상위 5종) */
.home-first { margin-top: var(--s-7); }
.seg-tabs { display: inline-flex; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-s); gap: 2px; flex: none; }
.seg-tabs a { min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--s-4); border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: var(--fw-m); color: var(--ink-2); text-decoration: none; }
.seg-tabs a.on { background: var(--brand); color: var(--on-dark); font-weight: var(--fw-b); }
.tstrip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-4); }
.tcard { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .15s; }
.tcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: var(--leaf-300); }
.tc-top { display: flex; align-items: center; gap: var(--s-2); }
.tc-rank { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-num); background: var(--brand-50); color: var(--brand); }
.tcard:first-child .tc-rank { background: var(--brand); color: var(--on-dark); box-shadow: 0 4px 10px rgba(4, 84, 70, .25); }
.tc-name { font-size: var(--fs-l); font-weight: var(--fw-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tc-qty { margin-top: var(--s-2); }
.tc-qty b { font-size: var(--fs-2xl); font-weight: var(--fw-num); letter-spacing: var(--ls-tight); }
.tc-qty small { font-size: var(--fs-s); color: var(--ink-2); margin-left: 2px; }
.tc-bar { height: 6px; background: var(--line-2); border-radius: var(--r-bar); overflow: hidden; }
.tc-bar i { display: block; height: 100%; width: var(--w); border-radius: var(--r-bar); background: linear-gradient(90deg, var(--leaf-300), var(--leaf)); transition: width 1.1s cubic-bezier(.2, .7, .2, 1) .15s; }
.reveal .tc-bar i { width: 0; }
.reveal.in .tc-bar i { width: var(--w); }
.tc-meta { font-size: var(--fs-xs); color: var(--ink-2); }
.tc-farm { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--line-2); font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--gold); }
.tc-farm.none { color: var(--ink-3); font-weight: var(--fw-m); }

/* 썸트리로 할 수 있는 일 (3단계 흐름) */
.flow { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--s-3); align-items: stretch; }
.flow-arrow { align-self: center; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); font-weight: var(--fw-num); font-size: var(--fs-l); }
.step { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5) var(--s-5) var(--s-4); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); text-decoration: none;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s, border-color .15s; }
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-l); border-color: var(--leaf-300); }
.step .ic { width: 48px; height: 48px; border-radius: var(--r-s); background: var(--brand-50); display: grid; place-items: center; }
.step .ic svg { width: 26px; height: 26px; stroke: var(--brand); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.step .sn { margin-top: var(--s-2); font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--leaf); }
.step .st { font-size: var(--fs-xl); font-weight: var(--fw-b); color: var(--ink); letter-spacing: var(--ls-tight); }
.step .sv { font-size: var(--fs-s); color: var(--ink-2); }
.step .sv b { font-size: var(--fs-2xl); font-weight: var(--fw-num); color: var(--brand); letter-spacing: var(--ls-tight); margin-right: 2px; }
.step p { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); }
.step .link { margin-top: auto; align-self: flex-start; }

/* 최근 등록 공고 */
.recent { list-style: none; margin: 0; padding: 0; }
.recent li + li { border-top: 1px solid var(--line-2); }
.recent a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-3); align-items: center; min-height: 75px; padding: var(--s-2) var(--s-5); text-decoration: none; }
.recent a:hover { background: var(--surface-2); }
.recent .t { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.35; }
.recent .nm { display: block; font-weight: var(--fw-b); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.recent .m { display: block; font-size: var(--fs-xs); color: var(--ink-3); }

@media (max-width: 1240px) { .tstrip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) {
  .hero.v3 .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero.v3 .visual { justify-content: center; }
  .flow { grid-template-columns: minmax(0, 1fr); }
  .flow-arrow { justify-self: center; transform: rotate(90deg); }
}
@media (max-width: 760px) {
  .hero.v3 h1 { font-size: var(--fs-2xl); }
  .hero.v3 h1 br { display: none; }
  .hero.v3 .eyebrow { border-radius: var(--r-s); }
  .hero.v3 .tilt { max-width: none; }
  .opp { grid-template-columns: minmax(0, 1fr); }
  .opp .v { text-align: left; }
  .tstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .tcard { padding: var(--s-4); }
  .tcard:last-child:nth-child(odd) { grid-column: span 2; }
  .mapcard { padding: var(--s-4); }
}

/* 사용자 팔레트 포인트(라임·네온) */
.hero.v3 h1 em { background: linear-gradient(transparent 62%, var(--leaf-300) 62%); }
.trend div:last-child span, .tc-bar i { background: linear-gradient(90deg, var(--leaf-300), var(--lime)); }
.tcard:first-child .tc-rank, .tbl .rank b.t1 { background: var(--brand); color: var(--neon); }
.eyebrow { background: var(--brand-50); color: var(--brand); }
.eyebrow i { background: var(--lime); }
.step .sn { color: var(--brand-600); }
.step .ic, .kinds .ic { background: var(--brand-50); }
.kinds .bar i, .qbar i { background: linear-gradient(90deg, var(--leaf-300), var(--leaf)); }
.btn.primary:hover { box-shadow: 0 6px 16px rgba(4, 84, 70, .28); }
.gnb nav a[aria-current="page"]::after { background: linear-gradient(90deg, var(--brand), var(--lime)); }
.flow-arrow { background: var(--brand); color: var(--neon); }

/* 수목수요: 교목·관목 탭 + 수종 검색 */
.dem-h { flex-wrap: wrap; gap: var(--s-3); }
.dem-q { display: flex; gap: var(--s-2); align-items: center; flex: 1 1 280px; max-width: 440px; margin-left: auto; }
.dem-q .input { flex: 1; min-width: 0; }
@media (max-width: 760px) { .dem-q { max-width: none; margin-left: 0; } }

/* 첫 화면 조회 기간 (기본 최근 7일) */
.statblock .row1 { flex-wrap: wrap; }
.hrange { display: inline-flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.hrange input[type="date"] { min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); font: inherit; font-size: var(--fs-xs); color: var(--ink); }
.hrange span { color: var(--ink-3); font-size: var(--fs-xs); }
@media (max-width: 480px) { .hrange input[type="date"] { flex: 1 1 120px; } }

.sec-act { display: flex; align-items: center; gap: var(--s-4); flex: none; }
@media (max-width: 760px) { .home-first .sec-h { flex-wrap: wrap; } .sec-act { width: 100%; justify-content: space-between; } }

/* ---------- 맞춤관리 (mine.js) ---------- */
.btn.lg { min-height: 52px; padding: 0 var(--s-6); font-size: var(--fs-s); font-weight: var(--fw-b); }
.util-acct { display: contents; }
.badge.new { background: var(--brand); color: var(--neon); }
/* 알림톡 미리보기 (카카오비즈니스 말풍선 구조) */
.alim { background: #abc1d1; border-radius: var(--r); padding: var(--s-4); font-size: var(--fs-xs); color: #191919; }
.alim-h { display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-2); }
.alim-av { width: 36px; height: 36px; border-radius: 14px; background: var(--brand); color: var(--neon); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-num); }
.alim-ck { width: 16px; height: 16px; border-radius: 50%; background: #3c8cf0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2L11.5 5.6' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.alim-row { display: flex; align-items: flex-end; gap: 6px; padding-left: 44px; }
.alim-b { flex: 1; min-width: 0; background: #fff; border-radius: 4px 14px 14px 14px; overflow: hidden; }
.alim-tag { display: block; padding: 10px var(--s-4); background: #fee500; font-weight: var(--fw-b); }
.alim-c { padding: var(--s-3) var(--s-4) var(--s-4); }
.alim-c > small { color: #7a7a7a; }
.alim-t { display: block; margin: var(--s-1) 0 var(--s-1); font-size: var(--fs-s); line-height: 1.45; }
.alim-p { margin: 0 0 var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid #eee; color: #555; }
.alim-c ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.alim-c li span { display: block; font-weight: var(--fw-m); line-height: 1.45; }
.alim-c li em { display: block; padding-left: 14px; font-style: normal; color: #7a7a7a; }
.alim-more { margin: var(--s-2) 0 0; color: #7a7a7a; }
.alim-btn { display: block; margin-top: var(--s-3); padding: 10px; text-align: center; background: #f2f2f2; border-radius: 6px; font-weight: var(--fw-m); }
.alim-time { flex: none; font-size: var(--fs-xs); color: #4b5b66; }
/* 비회원 소개: 히어로 */
.mg-hero { position: relative; overflow: hidden; padding: var(--s-8) 0 var(--s-8); background: radial-gradient(900px 480px at 85% 30%, var(--brand-100), transparent 70%), linear-gradient(180deg, var(--sage), var(--paper)); }
.mg-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.mg-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s-3); border-radius: 16px; background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.mg-pill svg { width: 16px; height: 16px; }
.mg-copy h1 { margin: var(--s-5) 0 var(--s-4); font-size: var(--fs-display); font-weight: var(--fw-num); line-height: 1.22; letter-spacing: -0.03em; color: var(--ink); }
.mg-copy h1 em { font-style: normal; color: var(--brand); background: linear-gradient(transparent 64%, var(--leaf-300) 64%); }
.mg-copy > p { margin: 0 0 var(--s-6); max-width: 540px; font-size: var(--fs-l); line-height: 1.7; color: var(--ink-2); }
.mg-cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.mg-cta .btn { padding: 0 var(--s-6); }
.mg-note { display: block; margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); }
.mg-visual { position: relative; justify-self: center; }
.phone { width: 340px; padding: 12px; border-radius: 44px; background: #1d2a23; box-shadow: 0 40px 80px -30px rgba(20, 49, 35, .55), inset 0 0 0 2px #2f3d35; transform: rotate(2deg); }
.phone-in { border-radius: 34px; overflow: hidden; background: #abc1d1; min-height: 520px; padding-top: var(--s-6); }
.phone-in .alim { border-radius: 0; }
.phone-in .alim-row { padding-left: 0; }
.float-card { position: absolute; left: -96px; bottom: 96px; display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3) var(--s-4); border-radius: var(--r); background: rgba(255, 255, 255, .96); box-shadow: 0 20px 40px -18px rgba(20, 49, 35, .45); animation: floaty 4s ease-in-out infinite; }
.float-card > span { width: 40px; height: 40px; border-radius: 12px; background: var(--brand); color: var(--neon); display: inline-flex; align-items: center; justify-content: center; }
.float-card > span svg { width: 22px; height: 22px; }
.float-card b { display: block; font-size: var(--fs-s); }
.float-card small { font-size: var(--fs-xs); color: var(--ink-3); }
@keyframes floaty { 50% { transform: translateY(-8px); } }
/* 숫자 띠 */
.mg-stats { background: var(--surface); border-block: 1px solid var(--line); }
.mg-stats .wrap { display: grid; grid-template-columns: repeat(3, 1fr); padding-block: var(--s-6) var(--s-5); }
.mg-stat { display: grid; justify-items: center; gap: var(--s-1); padding: 0 var(--s-4); }
.mg-stat + .mg-stat { border-left: 1px solid var(--line); }
.mg-stat b { font-size: var(--fs-3xl); font-weight: var(--fw-num); color: var(--brand); letter-spacing: -0.02em; }
.mg-stat span { font-size: var(--fs-s); color: var(--ink-2); }
.mg-src { grid-column: 1 / -1; margin-top: var(--s-4); text-align: center; font-size: var(--fs-xs); color: var(--ink-3); }
.mg-sec { padding-block: var(--s-8) 0; }
.mg-h { margin-bottom: var(--s-6); text-align: center; }
.mg-h h2 { margin: 0; font-size: var(--fs-3xl); font-weight: var(--fw-num); letter-spacing: -0.02em; }
.mg-h p { margin: var(--s-2) 0 0; font-size: var(--fs-s); color: var(--ink-3); }
/* 잠금 미리보기 */
.lockview { position: relative; max-width: 960px; margin: 0 auto; padding: var(--s-5); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(20, 49, 35, .4); overflow: hidden; }
.lv-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-bottom: var(--s-4); }
.lv-sum div { padding: var(--s-4); border-radius: var(--r-s); background: var(--surface-2); }
.lv-sum small { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.lv-sum b { font-size: var(--fs-2xl); color: var(--brand); }
.lv-list { list-style: none; margin: 0; padding: 0; }
.lv-list li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-2); border-top: 1px solid var(--line-2); }
.lv-list b { display: block; font-size: var(--fs-s); }
.lv-list small { font-size: var(--fs-xs); color: var(--ink-3); }
.lv-list > li > span:last-child { font-weight: var(--fw-b); }
.lv-list li.blur { filter: blur(6px); user-select: none; }
.lv-over { position: absolute; left: 50%; bottom: var(--s-6); transform: translateX(-50%); width: min(480px, calc(100% - 32px)); padding: var(--s-6); border-radius: var(--r-l); background: rgba(255, 255, 255, .97); box-shadow: 0 24px 60px -20px rgba(20, 49, 35, .45); text-align: center; }
.lv-over b { display: block; font-size: var(--fs-xl); line-height: 1.4; }
.lv-over em { font-style: normal; color: var(--brand); }
.lv-over p { margin: var(--s-2) 0 var(--s-5); color: var(--ink-2); font-size: var(--fs-s); }
.lockview::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(255, 255, 255, .85)); pointer-events: none; }
.lv-over { z-index: 1; }
/* 할 수 있는 일 */
.mg-feat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
.mf { position: relative; padding: var(--s-6); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); transition: transform .2s, box-shadow .2s; }
.mf:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(4, 84, 70, .45); }
.mf-ic { display: flex; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-50); color: var(--brand); align-items: center; justify-content: center; }
.mf-ic svg { width: 24px; height: 24px; }
.mf h3 { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-xl); font-weight: var(--fw-num); letter-spacing: -0.01em; display: flex; align-items: center; gap: var(--s-2); }
.mf p { margin: 0; font-size: var(--fs-s); line-height: 1.7; color: var(--ink-2); }
.mf-mini { margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-s); background: var(--surface-2); border: 1px dashed var(--line); }
.mf-mini.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.mf-mini.chips i { font-style: normal; padding: 6px var(--s-3); border-radius: 16px; background: var(--brand); color: #fff; font-size: var(--fs-xs); }
.mf-mini.bubble { display: grid; gap: 0; padding: 0; overflow: hidden; background: #fff; border: 1px solid #e6e6e6; max-width: 280px; }
.mf-mini.bubble span { padding: 8px var(--s-3); background: #fee500; font-size: var(--fs-xs); font-weight: var(--fw-b); color: #191919; }
.mf-mini.bubble b { padding: var(--s-3); font-size: var(--fs-s); }
.mf-mini.dates { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.mf-mini.dates span { display: grid; justify-items: center; gap: var(--s-1); padding: var(--s-2) var(--s-3); border-radius: var(--r-xs); background: var(--surface); border: 1px solid var(--line); }
.mf-mini.dates small { font-size: var(--fs-xs); color: var(--ink-3); }
.mf.soon { background: var(--surface-2); }
.mf.soon .mf-ic { background: var(--line-2); color: var(--ink-3); }
/* 3단계 */
.mg-steps { margin-top: var(--s-8); padding-block: var(--s-8); background: var(--brand-50); }
.mg-steps ol { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin: 0; padding: 0; counter-reset: s; }
.mg-steps li { position: relative; padding: var(--s-6); border-radius: var(--r-l); background: var(--surface); }
.mg-steps li + li::before { content: "→"; position: absolute; left: -22px; top: 50%; transform: translateY(-50%); font-size: var(--fs-l); color: var(--brand); font-weight: var(--fw-num); }
.mg-steps li > span { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--neon); align-items: center; justify-content: center; font-weight: var(--fw-num); }
.mg-steps b { display: block; margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-xl); }
.mg-steps p { margin: 0; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.6; }
/* 자주 묻는 질문 */
.faq { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding: 0 var(--s-2); font-size: var(--fs-l); font-weight: var(--fw-b); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: var(--fs-xl); color: var(--brand); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 var(--s-2) var(--s-5); font-size: var(--fs-s); line-height: 1.7; color: var(--ink-2); }
.mg-last { margin-top: var(--s-8); padding-block: var(--s-7); background: linear-gradient(90deg, var(--brand-50), var(--surface) 60%, var(--brand-50)); border-top: 1px solid var(--line); }
.mg-last .wrap { display: flex; justify-content: center; align-items: center; gap: var(--s-6); flex-wrap: wrap; }
.mg-last b { font-size: var(--fs-2xl); font-weight: var(--fw-num); }
.mg-sticky { display: none; }
/* 회원 대시보드 */
.md-top { padding: var(--s-6) 0 var(--s-5); background: linear-gradient(180deg, var(--sage), var(--paper)); border-bottom: 1px solid var(--line); }
.md-hi { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.md-hi small { font-size: var(--fs-xs); color: var(--ink-3); }
.md-hi h1 { margin: var(--s-1) 0 0; font-size: var(--fs-2xl); font-weight: var(--fw-num); letter-spacing: -0.02em; }
.md-hi h1 em { font-style: normal; color: var(--brand); }
.md-st { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.md-st .btn svg { width: 16px; height: 16px; }
.alarm { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 var(--s-4); border-radius: 20px; font-size: var(--fs-xs); font-weight: var(--fw-b); text-decoration: none; }
.alarm svg { width: 16px; height: 16px; }
.alarm.on { background: var(--brand-50); color: var(--brand); border: 1px solid var(--brand-100); }
.alarm.off { background: var(--gold-50); color: var(--gold); border: 1px solid var(--gold); }
.msums { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); margin-top: var(--s-5); }
.msum { display: grid; gap: var(--s-1); padding: var(--s-4) var(--s-5); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); text-decoration: none; color: var(--ink); transition: .15s; }
.msum:hover { border-color: var(--brand); transform: translateY(-2px); }
.msum small { font-size: var(--fs-s); color: var(--ink-2); }
.msum b { font-size: var(--fs-3xl); font-weight: var(--fw-num); letter-spacing: -0.02em; line-height: 1.1; }
.msum b em { font-style: normal; font-size: var(--fs-s); font-weight: var(--fw-m); margin-left: 2px; color: var(--ink-3); }
.msum.hot b { color: var(--up); }
.msum.on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); background: var(--brand-50); }
.md-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); padding-block: var(--s-6) var(--s-8); align-items: start; }
.cond { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); margin-bottom: var(--s-4); }
.cond > div { flex: 1; min-width: 0; }
.cond small { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.cond b { font-size: var(--fs-s); }
.cond-n { padding: 4px var(--s-3); border-radius: 14px; background: var(--brand); color: var(--neon); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.cond .btn svg { width: 16px; height: 16px; }
.md-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.md-tabs { display: flex; gap: var(--s-1); }
.md-tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 48px; padding: 0 var(--s-4); font-size: var(--fs-s); font-weight: var(--fw-m); color: var(--ink-2); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.md-tabs a em { font-style: normal; font-size: var(--fs-xs); color: var(--ink-3); }
.md-tabs a.on { color: var(--brand); font-weight: var(--fw-b); border-color: var(--brand); }
.md-tabs a.on em { color: var(--brand); }
.md-sort { height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--surface); font: inherit; font-size: var(--fs-xs); }
.mrows { list-style: none; margin: 0; padding: 0; }
.mrow { display: flex; justify-content: space-between; gap: var(--s-5); padding: var(--s-5) var(--s-2); border-bottom: 1px solid var(--line-2); cursor: pointer; transition: background .15s; }
.mrow:hover { background: var(--surface); }
.mr-main { min-width: 0; display: grid; gap: 6px; }
.mr-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.mr-t { font-size: var(--fs-l); font-weight: var(--fw-b); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mr-s { font-size: var(--fs-s); color: var(--ink-2); }
.mr-why { justify-self: start; padding: 2px var(--s-2); border-radius: var(--r-xs); background: var(--brand-50); color: var(--brand); font-size: var(--fs-xs); }
.mr-side { flex: none; display: grid; justify-items: end; align-content: start; gap: 4px; text-align: right; }
.mr-side b { font-size: var(--fs-l); font-weight: var(--fw-num); }
.mr-side small { font-size: var(--fs-xs); color: var(--ink-3); }
.mr-act { display: flex; gap: 4px; margin-top: var(--s-1); }
.star, .out { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: #c3cbc0; cursor: pointer; }
.star svg, .out svg { width: 20px; height: 20px; }
.star:hover { color: var(--gold); }
.star.on { color: var(--star); border-color: #f0d48a; background: var(--star-50); }
.out { color: var(--ink-3); }
.out:hover { color: var(--brand); border-color: var(--brand); }
.md-empty { display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-8) var(--s-4); text-align: center; color: var(--ink-2); }
.md-empty > svg { width: 40px; height: 40px; color: var(--brand); }
.md-empty b { font-size: var(--fs-xl); color: var(--ink); }
.md-empty p { margin: 0 0 var(--s-2); font-size: var(--fs-s); }
.md-side { display: grid; gap: var(--s-4); position: sticky; top: 88px; }
.mcal, .md-alim, .md-soon { padding: var(--s-5); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.mcal-h { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); margin-bottom: var(--s-3); flex-wrap: wrap; }
.mcal-h b { font-size: var(--fs-s); }
.mcal-h small { font-size: var(--fs-xs); color: var(--ink-3); display: inline-flex; align-items: center; gap: 4px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); margin-left: var(--s-2); }
.dot.st { background: var(--star); }
.mcal-w, .mcal-g { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.mcal-w span { font-size: var(--fs-xs); color: var(--ink-3); padding-bottom: var(--s-1); }
.mcal-g span { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; font-size: var(--fs-xs); color: var(--ink-2); border-radius: var(--r-xs); }
.mcal-g span.has { font-weight: var(--fw-b); color: var(--ink); background: var(--brand-50); }
.mcal-g span.has i { position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); }
.mcal-g span.st i { background: var(--star); }
.mcal-g span.st { background: #fff3cc; }
.mcal-g span.today { box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand); }
.md-soon { display: flex; gap: var(--s-3); background: var(--surface-2); }
.md-soon > svg { flex: none; width: 24px; height: 24px; color: var(--ink-3); }
.md-soon b { font-size: var(--fs-s); }
.md-soon p { margin: var(--s-1) 0 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }
@media (max-width: 1024px) {
  .mg-hero-in { grid-template-columns: minmax(0, 1fr); }
  .mg-visual { margin-top: var(--s-5); }
  .float-card { left: -24px; }
  .md-body { grid-template-columns: minmax(0, 1fr); }
  .md-side { position: static; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
@media (max-width: 760px) {
  .mg-hero { padding: var(--s-6) 0 var(--s-7); }
  .mg-copy h1 { font-size: var(--fs-3xl); }
  .mg-cta .btn { width: 100%; }
  .phone { width: 300px; transform: none; }
  .phone-in { min-height: 0; }
  .float-card { left: -8px; bottom: -24px; }
  .mg-stats .wrap { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  .mg-stat + .mg-stat { border-left: 0; border-top: 1px solid var(--line); padding-top: var(--s-4); }
  .mg-sec { padding-top: var(--s-7); }
  .mg-h h2 { font-size: var(--fs-2xl); }
  .lv-sum { grid-template-columns: repeat(2, 1fr); }
  .lv-list li { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .lv-list > li > span:last-child { display: none; }
  .lv-list .badge { justify-self: start; }
  .lv-over { position: relative; left: auto; bottom: auto; transform: none; width: auto; margin-top: calc(var(--s-7) * -1); }
  .mg-feat, .mg-steps ol { grid-template-columns: minmax(0, 1fr); }
  .mg-steps li + li::before { content: "↓"; left: 50%; top: -24px; transform: translateX(-50%); }
  .mg-last b { font-size: var(--fs-xl); text-align: center; }
  .mg-sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: var(--s-3) 16px calc(var(--s-3) + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8px 24px -12px rgba(0, 0, 0, .25); transform: translateY(110%); transition: transform .25s; }
  .mg-sticky.show { transform: none; }
  .msums { grid-template-columns: repeat(2, 1fr); }
  .md-hi h1 { font-size: var(--fs-xl); }
  .mrow { flex-direction: column; gap: var(--s-3); }
  .mr-side { justify-items: start; text-align: left; grid-template-columns: auto 1fr auto; align-items: center; width: 100%; }
  .mr-act { margin: 0; justify-self: end; }
  .md-tabs a { padding: 0 var(--s-3); }
  .cond { flex-wrap: wrap; }
}

/* ===== 회원가입 · 로그인 (auth.js) — 벤치마킹: 네이버 520 카드, 사람인 업로드 상자, 카카오 비활성 버튼 ===== */
.auth { min-height: calc(100vh - 72px); padding: var(--s-7) var(--gutter) var(--s-8); background: radial-gradient(1200px 400px at 50% -80px, var(--brand-50), transparent 70%), var(--paper); }
.auth-card { width: 100%; max-width: 560px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: var(--s-7) 56px; box-shadow: 0 24px 64px -40px rgba(20, 49, 35, .35); }
.auth-card.wide { max-width: 1080px; }
.auth-foot { text-align: center; margin: var(--s-5) 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.auth-k { margin: 0 0 var(--s-2); font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--brand); }
.auth-h { margin: 0; font-size: var(--fs-2xl); font-weight: var(--fw-num); letter-spacing: var(--ls-tight); line-height: 1.35; color: var(--ink); }
.auth-h.sm { font-size: var(--fs-xl); }
.auth-s { margin: var(--s-2) 0 0; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.6; }
.auth-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-6); }
.auth-top .muted { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; }
.skip, .tlink { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-xs); color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.skip:hover, .tlink:hover { color: var(--brand); }
/* 단계 */
.stepper { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); margin: var(--s-6) 0; padding: 0; }
.stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); text-align: center; }
.stepper li + li::before { content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: var(--line); z-index: 0; }
.stepper li.done + li::before, .stepper li.now::before { background: var(--brand); }
.stepper .n { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 2px solid var(--line); font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-3); }
.stepper .n svg { width: 18px; height: 18px; }
.stepper .now .n { background: var(--brand); border-color: var(--brand); color: var(--neon); box-shadow: 0 0 0 6px var(--brand-50); }
.stepper .done .n { background: var(--brand-50); border-color: var(--brand); color: var(--brand); }
.stepper .t { font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-3); display: grid; }
.stepper .now .t, .stepper .done .t { color: var(--ink); }
.stepper .t small { font-weight: var(--fw-r); color: var(--ink-3); }
.stepper .skip .t { opacity: .6; }
/* 간편가입 */
.kakao-btn { display: flex; align-items: center; justify-content: center; gap: var(--s-2); width: 100%; height: 56px; border: 0; border-radius: var(--r-s); background: #fee500; color: #191919; font: inherit; font-size: var(--fs-s); font-weight: var(--fw-b); cursor: pointer; }
.kakao-btn svg { width: 22px; height: 22px; }
.kakao-btn:hover { filter: brightness(.97); }
.or { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0; font-size: var(--fs-xs); color: var(--ink-3); }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* 입력칸: 라벨 위, 높이 56, 값 18px, 오류는 칸 바로 아래 */
.aform { display: grid; gap: var(--s-5); }
.af { display: grid; gap: var(--s-2); }
.af-l { font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--ink); }
.af-l .opt { font-weight: var(--fw-r); font-size: var(--fs-xs); color: var(--ink-3); margin-left: var(--s-1); }
.af-lrow { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.af-row { display: flex; gap: var(--s-2); }
.af-box { position: relative; flex: 1; min-width: 0; }
.af-i { width: 100%; height: 56px; padding: 0 48px 0 var(--s-4); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); font: inherit; font-size: var(--fs-l); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
select.af-i { padding-right: var(--s-4); font-size: var(--fs-s); }
.af-i::placeholder { color: #9aa59d; font-size: var(--fs-s); }
.af-i:hover { border-color: #c9d2c4; }
.af-i:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-100); }
.af-i:disabled { background: var(--surface-2); color: var(--ink-2); }
.af-ok { position: absolute; right: 16px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--leaf); opacity: 0; transform: scale(.6); transition: .2s; pointer-events: none; }
.af.good .af-ok { opacity: 1; transform: none; }
.af-msg { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.af-msg:empty { display: none; }
.af.bad .af-i { border-color: var(--up); }
.af.bad .af-i:focus { box-shadow: 0 0 0 3px var(--up-50); }
.af.bad .af-msg { color: var(--up); }
.af.good .af-msg { color: var(--ok); }
.af-side { height: 56px; flex: none; min-width: 128px; border-radius: var(--r-s); font-weight: var(--fw-b); }
.af-row .eye { position: relative; margin-left: -60px; width: 52px; height: 56px; border: 0; background: none; color: var(--ink-3); cursor: pointer; z-index: 1; }
.af-row .eye svg { width: 22px; height: 22px; }
.af-row .eye.on { color: var(--brand); }
.af-box:has(+ .eye) .af-ok { right: 60px; }
.otp-t { position: absolute; right: 48px; top: 50%; transform: translateY(-50%); font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--up); font-variant-numeric: tabular-nums; }
.demo { display: inline-block; margin-left: var(--s-1); padding: 0 var(--s-2); border-radius: var(--r-xs); background: var(--gold-50); color: var(--gold); font-size: var(--fs-xs); }
.pw-rule { list-style: none; margin: calc(var(--s-3) * -1) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); }
.pw-rule li::before { content: "○"; margin-right: var(--s-1); }
.pw-rule li.ok { color: var(--ok); }
.pw-rule li.ok::before { content: "✓"; }
.af2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.af2.tight { gap: var(--s-2); }
/* 가입 유형 */
.seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2); }
.seg2 label, .seg3 label, .chcards label, .pill { position: relative; cursor: pointer; }
.seg2 input, .seg3 input, .chcards input, .pill input, .terms input, .cbl input, .sw input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg2 span { display: grid; gap: 2px; padding: var(--s-4); border: 1.5px solid var(--line); border-radius: var(--r-s); transition: .15s; }
.seg2 b { font-size: var(--fs-s); }
.seg2 small { font-size: var(--fs-xs); color: var(--ink-3); }
.seg2 input:checked + span { border-color: var(--brand); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand); }
.seg2 input:checked + span b { color: var(--brand); }
.seg2 input:focus-visible + span, .seg3 input:focus-visible + span, .pill input:focus-visible + span, .chcards input:focus-visible + span { outline: 3px solid var(--brand-100); }
/* 약관 */
.terms { border: 1px solid var(--line); border-radius: var(--r); padding: var(--s-5); background: var(--surface-2); }
.terms.bad { border-color: var(--up); }
.terms label, .cbl { display: flex; align-items: flex-start; gap: var(--s-3); cursor: pointer; }
.cb { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--chk-line); background: var(--surface); transition: .15s; }
.terms input:checked + .cb, .cbl input:checked + .cb { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%2387f374' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; border-color: var(--brand); }
.terms input:focus-visible + .cb, .cbl input:focus-visible + .cb { box-shadow: 0 0 0 3px var(--brand-100); }
.tall b { display: block; font-size: var(--fs-l); line-height: 24px; }
.tall small { display: block; margin-top: var(--s-1); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }
.terms ul { list-style: none; margin: var(--s-4) 0 0; padding: var(--s-4) 0 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-1); }
.terms li { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-height: 44px; font-size: var(--fs-s); }
.terms li label { align-items: center; }
.terms li small { color: var(--ink-3); font-size: var(--fs-xs); margin-left: var(--s-1); }
.terms em { font-style: normal; color: var(--ink-3); }
.terms em.req { color: var(--brand); font-weight: var(--fw-b); }
.tview { flex: none; background: none; border: 0; font: inherit; font-size: var(--fs-xs); color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; padding: var(--s-2); }
.terms .af-msg { margin-top: var(--s-2); color: var(--up); }
.btn.xl { min-height: 56px; font-size: var(--fs-l); font-weight: var(--fw-b); border-radius: var(--r-s); }
.btn[aria-disabled="true"] { background: var(--line-2); border-color: var(--line-2); color: #8d988f; }
.auth-alt { margin: 0; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); }
.auth-alt a { color: var(--brand); font-weight: var(--fw-b); }
.btn2 { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s-2); }
/* 약관 보기 창 */
.tdlg { border: 0; border-radius: var(--r-l); padding: 0; width: min(520px, calc(100vw - 32px)); box-shadow: 0 32px 80px -24px rgba(0, 0, 0, .4); }
.tdlg::backdrop { background: rgba(20, 49, 35, .45); }
.tdlg-h { display: flex; justify-content: space-between; align-items: center; padding: var(--s-5) var(--s-5) 0; font-size: var(--fs-l); }
.tdlg-h button { border: 0; background: none; font-size: var(--fs-l); cursor: pointer; color: var(--ink-3); width: 44px; height: 44px; }
.tdlg-b { padding: var(--s-4) var(--s-5); font-size: var(--fs-s); line-height: 1.7; color: var(--ink-2); }
.tdlg-f { padding: 0 var(--s-5) var(--s-5); }
/* 사업자등록증 업로드 */
.drop2 { position: relative; display: grid; justify-items: center; gap: var(--s-2); padding: var(--s-6) var(--s-5); border: 2px dashed #9fd38e; border-radius: var(--r); background: linear-gradient(180deg, var(--brand-50), var(--surface)); text-align: center; transition: .2s; }
.drop2:hover, .drop2.over { border-color: var(--brand); background: var(--brand-50); }
.drop2.over { transform: scale(1.01); }
.drop2 > input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop2 .d-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -12px rgba(4, 84, 70, .5); }
.drop2 .d-ic svg { width: 26px; height: 26px; }
.drop2 b { font-size: var(--fs-l); color: var(--ink); }
.drop2 small { font-size: var(--fs-xs); color: var(--ink-3); }
.drop2 .d-btns { display: flex; gap: var(--s-2); margin-top: var(--s-2); }
.drop2 .d-btns .btn { pointer-events: none; }
.drop2 .d-btns label.btn { pointer-events: auto; position: relative; z-index: 2; }
.drop2 .d-btns label input { position: absolute; opacity: 0; width: 1px; }
.drop2 .d-btns svg { width: 18px; height: 18px; }
.drop2.has { padding: var(--s-4); }
.drop2.has .d-ic, .drop2.has small { display: none; }
.show-m-only { display: none !important; }
.file-card { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); }
.fc-ic { flex: none; width: 44px; height: 52px; border-radius: 6px; background: var(--up-50); color: var(--up); display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-xs); font-weight: var(--fw-num); }
.fc-t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fc-t b { font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-t small { font-size: var(--fs-xs); color: var(--ink-3); }
.fc-bar { height: 4px; border-radius: 2px; background: var(--line-2); overflow: hidden; margin: var(--s-1) 0; }
.fc-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--leaf-300), var(--brand)); animation: fcbar 1.6s ease-out forwards; }
.file-card.read .fc-bar { display: none; }
@keyframes fcbar { to { width: 100%; } }
.fc-x { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: var(--fs-s); }
.af.auto .af-i { background: #f6fbf2; border-style: dashed; border-color: #9fd38e; }
.af.auto .af-l::after { content: "자동 입력"; margin-left: var(--s-2); padding: 1px var(--s-2); border-radius: var(--r-xs); background: var(--brand-50); color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-m); }
/* 사업자등록번호 불러오기 결과(2026-11-10) */
.biz-res p { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-2) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-s); background: var(--brand-50); color: var(--ink); font-size: var(--fs-s); line-height: 1.6; }
.biz-res p svg { flex: none; margin-top: 2px; color: var(--brand); }
.biz-res small { color: var(--ink-2); }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
/* 선택 칩·구간·스위치·채널 카드 */
.pills { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: 22px; background: var(--surface); font-size: var(--fs-xs); font-weight: var(--fw-m); color: var(--ink-2); transition: .15s; }
.pill:hover span { border-color: var(--ink-3); }
.pill input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.pill input:checked + span::before { content: "✓"; margin-right: 6px; color: var(--neon); font-weight: var(--fw-num); }
.seg3 { display: flex; flex-wrap: wrap; padding: 4px; gap: 4px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); }
.seg3 label { flex: 1 1 auto; }
.seg3 span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: var(--fw-m); color: var(--ink-2); white-space: nowrap; }
.seg3 input:checked + span { background: var(--surface); color: var(--brand); font-weight: var(--fw-b); box-shadow: 0 2px 8px -2px rgba(20, 49, 35, .2); }
.sw { display: flex; align-items: center; gap: var(--s-3); cursor: pointer; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-s); }
.sw-t { flex: none; width: 48px; height: 28px; border-radius: 14px; background: #cfd6cc; position: relative; transition: .2s; }
.sw-t::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: .2s; }
.sw input:checked + .sw-t { background: var(--brand); }
.sw input:checked + .sw-t::after { left: 23px; }
.sw input:focus-visible + .sw-t { box-shadow: 0 0 0 3px var(--brand-100); }
.sw b { display: block; font-size: var(--fs-s); }
.sw small { font-size: var(--fs-xs); color: var(--ink-3); }
.chcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2); }
.chcards span { position: relative; display: grid; gap: 2px; padding: var(--s-4); padding-left: 44px; border: 1.5px solid var(--line); border-radius: var(--r-s); min-height: 76px; align-content: center; transition: .15s; }
.chcards span::before { content: ""; position: absolute; left: 14px; top: 50%; margin-top: -10px; width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--chk-line); background: var(--surface); }
.chcards input:checked + span { border-color: var(--brand); background: var(--brand-50); }
.chcards input:checked + span::before { background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%2387f374' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat; border-color: var(--brand); }
.chcards b { font-size: var(--fs-s); }
.chcards small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.4; word-break: keep-all; }
.chcards .rec { position: absolute; top: -9px; right: 10px; font-style: normal; padding: 0 var(--s-2); border-radius: 10px; background: var(--brand); color: var(--neon); font-size: var(--fs-xs); font-weight: var(--fw-b); line-height: 20px; }
/* 3단계: 조건 + 실시간 미리보기 */
.j3 { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--s-7); align-items: start; }
.pv { position: sticky; top: 96px; padding: var(--s-5); border-radius: var(--r); background: var(--sage); border: 1px solid var(--line); }
.pv-k { font-size: var(--fs-xs); color: var(--ink-3); }
.pv-n { margin-top: var(--s-1); font-size: var(--fs-s); color: var(--ink-2); }
.pv-n b { font-size: var(--fs-3xl); font-weight: var(--fw-num); color: var(--brand); letter-spacing: var(--ls-tight); margin-right: 2px; }
.pv-l { margin: var(--s-1) 0 var(--s-4); font-size: var(--fs-xs); color: var(--ink-2); }
/* 완료 */
.done { display: grid; justify-items: center; text-align: center; gap: var(--s-3); }
.done > svg { width: 72px; height: 72px; }
.done .dn { stroke-dasharray: 48; stroke-dashoffset: 48; animation: dn .6s .2s ease-out forwards; }
@keyframes dn { to { stroke-dashoffset: 0; } }
.done-kv { width: 100%; margin: var(--s-4) 0; padding: var(--s-2) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-s); text-align: left; grid-template-columns: 96px minmax(0, 1fr); }
.me-kv { margin-bottom: var(--s-6); padding: var(--s-2) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-s); }
/* 로그인 */
.lopts { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; font-size: var(--fs-s); }
.cbl { align-items: center; }
.login-err { margin: 0; font-size: var(--fs-xs); color: var(--up); text-align: center; }
.login-err:empty { display: none; }
.auth-links { display: flex; justify-content: center; align-items: center; gap: var(--s-3); margin: var(--s-6) 0 0; font-size: var(--fs-s); }
.auth-links a { color: var(--ink-2); text-decoration: none; }
.auth-links a:hover { color: var(--ink); text-decoration: underline; }
.auth-links a.strong { color: var(--brand); font-weight: var(--fw-b); }
.auth-links i { width: 1px; height: 12px; background: var(--line); }
@media (max-width: 1024px) { .j3 { grid-template-columns: minmax(0, 1fr); } .pv { position: static; } }
@media (max-width: 760px) {
  .auth { padding: 0; background: var(--surface); }
  .auth-card, .auth-card.wide { max-width: none; border: 0; border-radius: 0; box-shadow: none; padding: var(--s-6) 20px var(--s-7); }
  .aform > .btn.xl.block, .aform > .btn2 { position: sticky; bottom: 0; z-index: 5; }
  .aform > .btn2 { background: #fff; padding: var(--s-3) 0 calc(var(--s-3) + env(safe-area-inset-bottom)); box-shadow: 0 -16px 16px -4px #fff; }
  .show-m-only { display: inline-flex !important; }
  .chcards { grid-template-columns: minmax(0, 1fr); }
  .af2 { grid-template-columns: minmax(0, 1fr); }
  .af-side { min-width: 104px; padding: 0 var(--s-3); }
  .auth-top { flex-direction: column; align-items: flex-start; }
}

/* 크기를 따로 주지 않은 small은 14px (브라우저 기본 '한 단계 작게' 11.67px 방지) */
small { font-size: var(--fs-xs); }

/* ===== 보기 범위 · 참가 자격 (scope.js) ===== */
.scope { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.sc-k { font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-2); margin-right: var(--s-1); }
.sc-pick { display: inline-flex; align-items: center; gap: var(--s-2); height: 44px; padding: 0 var(--s-4); border: 1.5px solid var(--brand); border-radius: 22px; background: var(--brand-50); color: var(--brand); font: inherit; font-size: var(--fs-s); cursor: pointer; }
.sc-pick svg { width: 18px; height: 18px; }
.sc-pick b { font-weight: var(--fw-b); }
.sc-car { font-size: var(--fs-xs); }
.sc-pick:hover { background: var(--brand-100); }
.sc-tg { position: relative; cursor: pointer; }
.sc-tg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sc-tg > span { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border: 1px solid var(--line); border-radius: 22px; font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-2); background: var(--surface); transition: .15s; }
.sc-tg > span::before { content: ""; width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--chk-line); flex: none; }
.sc-tg small { font-weight: var(--fw-r); color: var(--ink-3); }
.sc-tg input:checked + span { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.sc-tg input:checked + span::before { border-color: var(--brand); background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3.2 3.2L15 7' fill='none' stroke='%2387f374' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat; }
.sc-tg input:focus-visible + span { box-shadow: 0 0 0 3px var(--brand-100); }
.sc-tg.ok input:checked + span { border-color: var(--ok); color: var(--ok); background: var(--ok-50); }
.sc-x { margin-left: auto; background: none; border: 0; font: inherit; font-size: var(--fs-xs); color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 44px; }
/* 선택 창: 데스크톱은 가운데, 휴대폰은 아래에서 올라오는 시트 */
.scdlg { border: 0; padding: 0; width: min(720px, calc(100vw - 32px)); max-height: min(80vh, 720px); border-radius: var(--r-l); box-shadow: 0 32px 80px -24px rgba(0, 0, 0, .45); overflow: hidden; }
.scdlg[open] { display: flex; flex-direction: column; }
.scdlg::backdrop { background: rgba(20, 49, 35, .45); }
.scdlg-h { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3); padding: var(--s-5) var(--s-5) var(--s-3); border-bottom: 1px solid var(--line-2); }
.scdlg-h b { display: block; font-size: var(--fs-l); }
.scdlg-h small { font-size: var(--fs-xs); color: var(--ink-3); }
.scdlg-h button { flex: none; width: 44px; height: 44px; border: 0; background: none; font-size: var(--fs-l); color: var(--ink-3); cursor: pointer; }
.scdlg-b { padding: var(--s-4) var(--s-5) var(--s-5); overflow: auto; }
.scb { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.scb b { font-size: var(--fs-s); }
/* 시·도 다시 고르기: 눈에 띄게 진한 초록 테두리 단추(2026-11-10 사용자 요청) */
.sc-back { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--brand); background: #fff; border-radius: var(--r-s); padding: 0 var(--s-4) 0 var(--s-3); min-height: 44px; font: inherit; font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--brand); cursor: pointer; flex: none; }
.sc-back b { font-size: 1.3em; line-height: 1; }
.sc-back:hover, .sc-back:focus-visible { background: var(--brand-50); }
.scg { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: var(--s-2); }
.sct { display: grid; gap: 2px; justify-items: start; min-height: 56px; padding: var(--s-2) var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); font: inherit; text-align: left; cursor: pointer; transition: .12s; }
.sct b { font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--ink); }
.sct small { font-size: var(--fs-xs); color: var(--ink-3); }
.sct:hover { border-color: var(--brand); }
.sct.on { border-color: var(--brand); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand); }
.sct.on b { color: var(--brand); }
@media (max-width: 760px) {
  .scdlg { width: 100vw; max-width: none; max-height: 85vh; margin: auto 0 0; border-radius: var(--r-l) var(--r-l) 0 0; }
  .scg { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .scope { padding: var(--s-3); }
  .sc-k { width: 100%; }
  .sc-x { margin-left: 0; }
}
/* 참가 자격 배지 (목록) */
.elig { display: inline-flex; align-items: center; margin-left: var(--s-2); padding: 1px var(--s-2); border-radius: var(--r-xs); border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2); background: var(--surface); line-height: 20px; white-space: nowrap; }
.elig.ok { border-color: var(--ok-line); color: var(--ok); background: var(--ok-50); font-weight: var(--fw-b); }
.elig.no { color: var(--ink-3); background: var(--surface-2); text-decoration: line-through; text-decoration-color: rgba(0, 0, 0, .25); }
/* 참가 자격 (상세) */
.elig-panel.ok { border-color: var(--ok-line); }
.elig-panel.no { border-color: #f0c9b8; }
.ep-areas { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.ep-chip { padding: 6px var(--s-3); border-radius: 16px; background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.ep-chip.all { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand); }
.ep-me { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-s); display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); align-items: baseline; }
.elig-panel.ok .ep-me { color: var(--ok); }
.elig-panel.no .ep-me { color: var(--up); }
/* 낙찰현황 */
.qrow { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-3); }
.qrow .opts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.insight { margin-bottom: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r); background: var(--brand-50); border: 1px solid var(--brand-100); font-size: var(--fs-s); line-height: 1.7; color: var(--ink); }
.insight b { color: var(--brand); }
.panel-h.wrap-h { flex-wrap: wrap; gap: var(--s-3); }
.panel-h h3 small.muted { font-size: var(--fs-xs); font-weight: var(--fw-r); color: var(--ink-3); margin-left: var(--s-1); }
.row-act { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.mini-q .input { height: 40px; width: 240px; font-size: var(--fs-xs); }
a.corp { color: var(--ink); font-weight: var(--fw-b); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 3px; }
a.corp:hover { color: var(--brand); text-decoration-color: var(--brand); }
.rival { list-style: none; margin: 0; padding: var(--s-2) var(--s-5) var(--s-4); }
.rival li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-s); }
.rival li:last-child { border-bottom: 0; }
.rival a { color: var(--ink); font-weight: var(--fw-b); text-decoration: none; }
.rival a:hover { color: var(--brand); text-decoration: underline; }
.rival span { color: var(--ink-3); font-size: var(--fs-xs); white-space: nowrap; }
.rival.wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); column-gap: var(--s-6); }
@media (max-width: 760px) { .mini-q .input { width: 100%; } .mini-q { flex: 1 1 100%; } }

/* 보기 범위 2차 (벤치마킹: 당근 '주변 지역', 네이버 부동산 단계 선택, 사람인 건수 미리보기) */
.sc-pick { height: 48px; padding: 0 var(--s-4); border-radius: 24px; }
.sc-pick b { font-size: var(--fs-l); }
.sc-hint { flex: 1 1 320px; font-size: var(--fs-xs); color: var(--ink-3); }
.scws { display: grid; gap: var(--s-2); }
.scw { display: flex; align-items: center; gap: var(--s-4); min-height: 64px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); font: inherit; text-align: left; cursor: pointer; transition: .12s; }
.scw:hover { border-color: var(--brand); }
.scw .r { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--chk-line); }
.scw.on { border-color: var(--brand); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand); }
.scw.on .r { border: 7px solid var(--brand); }
.scw .t { flex: 1; min-width: 0; display: grid; gap: 2px; }
.scw .t b { font-size: var(--fs-l); color: var(--ink); }
.scw .t small { font-size: var(--fs-xs); color: var(--ink-3); }
.scw em { flex: none; font-style: normal; font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--brand); }
.scr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-4); }
.scr > span { font-size: var(--fs-xs); color: var(--ink-3); margin-right: var(--s-1); }
.sc-more { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 56px; margin: 0 0 var(--s-3); padding: 0 var(--s-4); border: 1.5px solid var(--brand); border-radius: var(--r-s); background: #fff; font: inherit; font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--brand); cursor: pointer; }
.sc-tip { display: flex; gap: var(--s-2); align-items: flex-start; margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-s); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-s); line-height: 1.6; }
.sc-tip svg { flex: none; margin-top: 3px; color: var(--brand); }
.sc-tip b { color: var(--ink); }
.sc-more .sc-more-ar { font-size: 1.5em; line-height: 1; }
.sc-more:hover, .sc-more:focus-visible { background: var(--brand-50); }
.scdlg-b > .tlink { display: block; margin: var(--s-4) auto 0; }
.scq { margin-bottom: var(--s-4); }
.scq .input { height: 48px; }
.scpath { font-size: var(--fs-xs); color: var(--ink-3); }
.scpath b { color: var(--ink); }
.lb-t { font-size: var(--fs-s); color: var(--ink-2); }
.lb-t b { color: var(--ink); }
/* 배지 2차: 불가는 회색 'OO 업체만'(빨강·취소선 없음), 높이 28 */
.elig { min-height: 28px; padding: 2px var(--s-2); border-radius: 8px; font-weight: var(--fw-m); }
.elig.no { color: var(--ink-3); background: var(--surface-2); border-color: var(--line); text-decoration: none; }
.ep-me { font-size: var(--fs-xl); font-weight: var(--fw-b); }
.ep-me .tlink { font-weight: var(--fw-r); }

/* 그리드 칸이 안쪽 표 폭 때문에 늘어나지 않게 */
.cols > *, .stack > * { min-width: 0; }

/* ===== 디자인 기준 정리 (2026-11-05 실측 벤치마킹: 토스·당근·오늘의집·네이버·사람인·KOSIS·인포21C) =====
   - 제목 굵기는 모두 700, 줄간격은 정수 px, 자간은 역할별로 따로(본문 0)
   - 그림자는 떠 있는 층에만. 카드는 마우스를 올리면 테두리 색 + 2px만 떠오름(150ms)
   - 강조색은 상태(선택·참가 가능 표시의 체크)에만. 행마다 초록 칩을 깔지 않는다
   - 높이는 56/48/40 세 가지, 입력칸 경계는 --line-strong(3.2:1) */
svg.lc, svg.lc * { stroke-width: 1.75px !important; vector-effect: non-scaling-stroke; }
svg.lc { flex: none; }
.pagehead h1, .sec-h h2, .hero.v3 h1, .mg-h h2, .mg-copy h1, .md-hi h1, .auth-h, .mf h3, .gate h2 { font-weight: var(--fw-num); }
.pagehead h1 { line-height: 44px; letter-spacing: var(--ls-tight); }
.sec-h h2 { line-height: 36px; letter-spacing: var(--ls-tight); }
.panel-h h3 { line-height: 26px; letter-spacing: var(--ls-snug); }
.ph-kpis b, .kpi .v { line-height: 36px; letter-spacing: var(--ls-tight); }
.mg-copy h1 { letter-spacing: var(--ls-display); line-height: 68px; }
/* 설명 문장은 16px (14px 쏠림 해소: 14px는 메타·출처·표 머리·배지·칩에만) */
.step p, .facts p, .opp .s, .empty p, .ft p, .md-empty p, .tdlg-b p { font-size: var(--fs-s); line-height: 26px; }
/* 표: 머리 14/600 ink-2, 2줄 행 72px */
.tbl th { font-weight: var(--fw-b); color: var(--ink-2); line-height: 20px; }
.tbl td { padding-top: var(--s-3); padding-bottom: var(--s-3); }
.tbl .nm { line-height: 24px; }
.tbl .sub { line-height: 20px; }
/* 입력칸·날짜·정렬: 높이 48, 경계 3.2:1 */
.input, .af-i, .period input[type=date], .hrange input[type="date"], .md-sort, .mini-q .input { border-color: var(--line-strong); }
.af-i:hover, .input:hover { border-color: var(--ink-3); }
.period input[type=date], .hrange input[type="date"], .md-sort, .mini-q .input { height: 48px; }
.searchbox button { min-height: 48px; border-radius: var(--r-s); }
.btn.lg { min-height: 56px; }
.sc-pick { border-radius: var(--r-full); }
.pill span, .sc-tg > span, .mg-pill, .ep-chip, .mf-mini.chips i, .cond-n, .alarm { border-radius: var(--r-full); }
.elig, .badge { border-radius: var(--r-xs); }
.chip, .popular a { border-radius: var(--r-s); }
/* 그림자·움직임 절제 */
.panel, .kpi, .lst { box-shadow: none; }
.kpi:hover, .lst:hover, .tcard:hover, .step:hover, .mf:hover, .msum:hover { transform: translateY(-2px); box-shadow: none; border-color: var(--leaf-300); }
.kpi, .lst, .tcard, .step, .mf, .msum, .opp { transition: transform .15s cubic-bezier(.4, 0, .2, 1), border-color .15s cubic-bezier(.4, 0, .2, 1), background .15s; }
.opp:hover { transform: translateY(-2px); }
.reveal { transform: translateY(12px); transition: opacity .4s ease, transform .4s cubic-bezier(.4, 0, .2, 1); }
.float-card { animation: none; }
.btn:active, .sc-pick:active, .kakao-btn:active { transform: scale(.98); }
/* 참가 자격 배지: 초록 칩 대신 '체크(초록) + 회색 글자' — 강조색 과다(목록 13%) 해소 */
.elig { min-height: 24px; line-height: 20px; padding: 1px var(--s-2); border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); font-weight: var(--fw-m); }
.elig.ok { background: var(--surface); border-color: var(--line); color: var(--ink-2); font-weight: var(--fw-b); }
.elig.ok i { font-style: normal; color: var(--ok); margin-right: 2px; }
.elig.no { color: var(--ink-3); background: var(--surface-2); }
.sc-tg.ok input:checked + span { color: var(--ok); }
@media (max-width: 760px) {
  :root { --section: 48px; }
  .sec-h h2 { font-size: var(--fs-xl); line-height: 30px; letter-spacing: var(--ls-snug); }
  .pagehead h1 { line-height: 36px; }
  .mg-copy h1 { line-height: 44px; letter-spacing: var(--ls-tight); }
  .tbl td { padding-top: var(--s-3); padding-bottom: var(--s-3); }
}

/* ===== 공고 목록 줄 (벤치마킹: 산군 카드·비드프로 업종/지역 약칭·나라장터 목록에 없던 추정가격·지역 보강) ===== */
.nrows { list-style: none; margin: 0; padding: 0; }
.nrows li + li { border-top: 1px solid var(--line-2); }
.nrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) 128px 152px; gap: var(--s-4); align-items: center; padding: var(--s-4) var(--s-5); color: inherit; text-decoration: none; transition: background .15s cubic-bezier(.4, 0, .2, 1); position: relative; }
.nrow:hover { background: var(--surface-2); }
.nrow:hover .nr-t { color: var(--brand); }
.nrow.hot::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--up); }
.nrow.closed .nr-t, .nrow.closed .nr-amt b { color: var(--ink-2); }
.nr-d { align-self: start; padding-top: 2px; }
.nr-main { display: grid; gap: 6px; min-width: 0; }
.nr-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.nr-tags .elig { margin-left: 0; }
.tag { display: inline-flex; align-items: center; min-height: 24px; padding: 1px var(--s-2); border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); line-height: 20px; white-space: nowrap; }
.tag.leaf { background: var(--brand-50); color: var(--brand); }
.nr-t { font-size: var(--fs-l); font-weight: var(--fw-b); line-height: 26px; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
.nr-s { font-size: var(--fs-xs); line-height: 20px; color: var(--ink-3); }
.nr-s em { font-style: normal; color: var(--ink-3); opacity: .8; }
.nr-amt, .nr-date { display: grid; gap: 2px; text-align: right; }
.nr-amt small, .nr-date small { font-size: var(--fs-xs); line-height: 20px; color: var(--ink-3); }
.nr-amt b { font-size: var(--fs-l); font-weight: var(--fw-num); line-height: 26px; font-variant-numeric: tabular-nums; }
.nr-date b { font-size: var(--fs-s); font-weight: var(--fw-b); line-height: 24px; font-variant-numeric: tabular-nums; }
.nrows.compact .nrow { grid-template-columns: 72px minmax(0, 1fr) 112px; padding: var(--s-3) var(--s-5); }
.nrows.compact .nr-t { font-size: var(--fs-s); line-height: 24px; }
.nrows.compact .nr-amt b { font-size: var(--fs-s); }
.listbar .md-sort { margin-left: auto; }
/* 공고 상세: 참가 판정 타일, 비슷한 공고, 출처 */
.fx-elig b { color: var(--ink); }
.fx-elig.ok b { color: var(--ok); }
.fx-elig.no b { color: var(--ink-2); }
.simlist { list-style: none; margin: 0; padding: var(--s-1) var(--s-5) var(--s-3); }
.simlist li + li { border-top: 1px solid var(--line-2); }
.simlist a { display: grid; gap: 2px; padding: var(--s-3) 0; text-decoration: none; color: var(--ink); }
.simlist b { font-size: var(--fs-s); line-height: 24px; }
.simlist a:hover b { color: var(--brand); text-decoration: underline; }
.simlist small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 20px; }
.src { margin: var(--s-6) 0 0; font-size: var(--fs-xs); line-height: 20px; color: var(--ink-3); }
.src a { color: var(--brand); }
@media (max-width: 1024px) { .nrow { grid-template-columns: 64px minmax(0, 1fr) 120px; } .nr-date { display: none; } }
@media (max-width: 760px) {
  .nrow, .nrows.compact .nrow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "d amt" "main main" "date date"; gap: var(--s-2) var(--s-3); padding: var(--s-4); }
  .nr-d { grid-area: d; padding: 0; }
  .nr-amt { grid-area: amt; }
  .nr-amt small { display: none; }
  .nr-main { grid-area: main; }
  .nr-date { grid-area: date; display: flex; gap: var(--s-2); justify-content: flex-start; text-align: left; align-items: baseline; }
  .nr-date b { font-size: var(--fs-xs); }
  .nrows.compact .nr-date { display: none; }
}

.ep-me { display: block; }
.ep-me .tlink { margin-left: var(--s-3); }

/* ===== 썸트리만의 분석 (insights.js) — 숨기지 말고 첫 화면에서 실제 숫자로 자랑 ===== */
.showcase { margin-top: var(--s-7); }
.sx-h { text-align: center; margin-bottom: var(--s-6); }
.sx-pill { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s-4); border-radius: var(--r-full); background: var(--ink); color: var(--neon); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.sx-h h2 { margin: var(--s-4) 0 var(--s-2); font-size: var(--fs-3xl); font-weight: var(--fw-num); line-height: 44px; letter-spacing: var(--ls-tight); }
.sx-h p { margin: 0; font-size: var(--fs-s); color: var(--ink-3); }
.sx-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.sx { position: relative; display: grid; align-content: start; gap: var(--s-2); padding: var(--s-6); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow: hidden; transition: transform .15s cubic-bezier(.4, 0, .2, 1), border-color .15s; }
.sx::after { content: ""; position: absolute; right: -40px; top: -40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, var(--brand-50), transparent 70%); pointer-events: none; }
.sx:hover { transform: translateY(-2px); border-color: var(--leaf-300); }
.sx-ic { display: flex; width: 48px; height: 48px; border-radius: var(--r); background: var(--brand-50); color: var(--brand); align-items: center; justify-content: center; }
.sx-k { margin-top: var(--s-2); font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--ink-2); }
.sx-v { display: flex; align-items: baseline; gap: 4px; }
.sx-v b { font-size: var(--fs-3xl); font-weight: var(--fw-num); line-height: 44px; letter-spacing: var(--ls-tight); color: var(--brand); font-variant-numeric: tabular-nums; }
.sx-v b i { font-style: normal; font-size: var(--fs-l); color: var(--ink-3); margin: 0 6px; font-weight: var(--fw-b); }
.sx-v small { font-size: var(--fs-s); color: var(--ink-2); font-weight: var(--fw-b); }
.sx-d { font-size: var(--fs-s); line-height: 26px; color: var(--ink-2); }
.sx-d b { color: var(--ink); }
.sx-go { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--s-2); font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--brand); }
.sx-cmp { margin-top: var(--s-5); padding: var(--s-5) var(--s-6); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); overflow-x: auto; }
.sx-cmp table { width: 100%; border-collapse: collapse; min-width: 560px; }
.sx-cmp th, .sx-cmp td { padding: var(--s-3) var(--s-3); font-size: var(--fs-s); line-height: 24px; text-align: center; border-bottom: 1px solid var(--line-2); }
.sx-cmp thead th { font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-b); }
.sx-cmp tbody th { text-align: left; font-weight: var(--fw-b); color: var(--ink); }
.sx-cmp td { color: var(--ink-3); }
.sx-cmp .us { background: var(--brand-50); color: var(--brand); font-weight: var(--fw-num); }
.sx-cmp thead .us { color: var(--brand); border-radius: var(--r-s) var(--r-s) 0 0; }
.sx-cmp tr:last-child th, .sx-cmp tr:last-child td { border-bottom: 0; }
.sx-cmp .src { margin-top: var(--s-3); }
/* 예상 경쟁 */
.tag.comp { gap: 4px; background: var(--info-100); color: var(--info); }
.comp-strip { display: flex; gap: var(--s-4); align-items: flex-start; margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r); background: var(--info-50); border: 1px solid var(--info-line); color: var(--info); }
.comp-strip > svg { margin-top: 2px; }
.comp-strip b { display: block; font-size: var(--fs-l); line-height: 26px; color: var(--info-ink); }
.comp-strip span { font-size: var(--fs-xs); line-height: 20px; color: var(--info-2); }
@media (max-width: 1024px) { .sx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .sx-grid { grid-template-columns: minmax(0, 1fr); }
  .sx-h h2 { font-size: var(--fs-xl); line-height: 30px; }
  .sx { padding: var(--s-5); }
  .sx-cmp { padding: var(--s-3); }
}
@media (max-width: 760px) { .sx-cmp table { min-width: 0; table-layout: fixed; } .sx-cmp th, .sx-cmp td { padding: var(--s-2) 4px; font-size: var(--fs-xs); line-height: 20px; word-break: keep-all; } .sx-cmp tbody th { width: 34%; } }
@media (max-width: 760px) { .sec-h { flex-wrap: wrap; } }

/* ===== 독립 디자인 검수 반영 (2026-11-05) ===== */
[hidden] { display: none !important; }   /* P0: .af·.file-card의 display가 hidden을 덮던 문제 */
/* 공고 상세 상단 칸: 배지는 원래 크기, 좁은 화면 1열 */
.facts-row b > .badge { font-size: var(--fs-xs); display: inline-flex; letter-spacing: 0; }
.facts-row b > span:not(.badge) { white-space: normal; }
@media (max-width: 480px) {
  .facts-row { grid-template-columns: minmax(0, 1fr); }
  .facts-row > div + div { border-left: 0; border-top: 1px solid var(--line-2); }
  .facts-row b { font-size: var(--fs-l); }
  .period .range { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; }
  .period .range input[type=date] { width: 100%; min-width: 0; }
  .period .range .btn { grid-column: 1 / -1; min-height: 48px; }
  .hrange { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); width: 100%; }
  .hrange input[type="date"] { width: 100%; min-width: 0; }
  .hrange .btn { grid-column: span 3; }
  .cards { grid-template-columns: minmax(0, 1fr); }
}
/* 머리글: 휴대폰에서 메뉴 6개를 3칸 2줄로, 로그인·내 정보 링크는 계속 보이게 */
.util-link { font-size: var(--fs-xs); color: var(--ink-3); text-decoration: none; }
.util-link:hover { color: var(--ink); }
@media (max-width: 1024px) { .gnb .util .hide-t { display: inline-flex; } }
@media (max-width: 760px) {
  .gnb nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; overflow: visible; padding: 0; margin: var(--s-2) 0 0; flex-basis: 100%; }
  .gnb nav a { justify-content: center; min-height: 44px; padding: 0 4px; font-size: var(--fs-s); }
  .gnb nav a[aria-current="page"]::after { left: 16px; right: 16px; }
  .gnb .util { gap: var(--s-3); }
  .gnb .util .btn.sm { padding: 0 var(--s-3); }
  .util-link.hide-m { display: none; }
}
/* 한 줄 안 높이 통일(도구 막대 48) */
.period .btn.sm, .hrange .btn.sm, .dem-q .btn.sm, .listbar .btn.sm, .row-act .btn.sm { min-height: 48px; }
.period .seg button { min-height: 40px; }
.sc-tg > span { min-height: 48px; }
.trend-chip.same { background: var(--line-2); color: var(--ink-2); }
/* 막대·지도 대비 */
.hbars .bar, .colchart .col { fill: var(--leaf); background: var(--leaf); }
/* 금색은 직접 등록(인증) 농원 전용 */
.have.pill { background: var(--brand-50); border-color: var(--brand-100); color: var(--brand); }
.tc-farm { color: var(--brand); }
/* 체크·포커스·입력 안내문 대비 */
.af-i::placeholder, .input::placeholder { color: #6b776e; }
.input:focus, .af-i:focus { box-shadow: 0 0 0 2px var(--brand); }
.star { color: var(--ink-3); border-color: var(--line-strong); }
.searchbox { border-color: var(--line-strong); box-shadow: none; }
/* 누르는 영역 */
.crumb a { display: inline-block; padding: 11px 4px; }
.tbl a.corp, .tbl a.nm, a.corp { display: inline-block; padding: 6px 0; }
.cbl { min-height: 44px; }
.tview { min-height: 44px; min-width: 44px; }
@media (max-width: 760px) { .have.pill { min-height: 40px; display: inline-flex; align-items: center; } }
/* 준비 중 기능: 일반 버튼처럼 보이지 않게 */
.btn.soon, .kakao-btn.soon { cursor: default; opacity: .75; }
.btn.soon:hover { background: var(--surface); border-color: var(--line); }
.kakao-btn.soon { background: #fff7c2; }
.btn.soon .badge, .kakao-btn.soon .badge { margin-left: var(--s-2); }
/* 맞춤관리 잠금 미리보기·탭 */
.lockv { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-s) !important; color: var(--ink-3) !important; }
.md-tabs { overflow-x: auto; scrollbar-width: none; }
.md-tabs a { white-space: nowrap; }
/* 예상 경쟁: 금액 아래 글자 */
.nr-comp { color: var(--info) !important; }
/* 낙찰현황 칩 묶음 이름 */
.qg { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.qg-k { font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-2); min-width: 56px; }
/* 기타 */
.aside-h { margin: 0 0 var(--s-3); font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-2); }
.tbl td.spec { white-space: nowrap; word-break: normal; }
.nrow.closed { opacity: .72; }
.sx::after { display: none; }
.hotline i { animation: none; }
.sx-h { text-align: left; }
.sx-h h2 { font-size: var(--fs-2xl); line-height: 36px; }
.mg-copy h1 { font-size: var(--fs-3xl); line-height: 44px; letter-spacing: var(--ls-tight); }
.donut-legend li, .donut .lg li { white-space: normal; }
@media (max-width: 760px) {
  .panel-h { flex-wrap: wrap; }
  .panel-h h3 { flex: 1 1 auto; }
  .aform > .btn.xl.block { background-clip: padding-box; box-shadow: 0 -12px 16px -4px #fff; }
}
/* 도넛 범례·순위 막대 라벨 잘림 */
.c-8-4 > :last-child .donut, .c-3 .donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.c-8-4 > :last-child .donut .legend-list, .c-3 .donut .legend-list { width: 100%; }
.legend-list span { white-space: normal; overflow: visible; }
.rank-bars li { grid-template-columns: 24px 160px minmax(0, 1fr) 84px; }
.rank-bars .k { white-space: normal; line-height: 20px; }
@media (max-width: 760px) { .rank-bars li { grid-template-columns: 24px 112px minmax(0, 1fr) 64px; } }
/* 그래프·지도 글자: 화면에 그려지는 크기가 너무 작지 않게(그래프 좌표 단위 기준) */
.ax, .val, .d-cap { font-size: 14px; }
.kmap .ln { font-size: 12px; } .kmap .lv { font-size: 14px; }

.gnb nav { overflow: hidden; }
@media (max-width: 760px) { .gnb nav { overflow: visible; } }

/* ===== 사용자 입장 검수 반영 (2026-11-05) ===== */
.tempbar { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--info-50); border: 1px solid var(--info-line); color: var(--info); font-size: var(--fs-s); }
.tempbar span { flex: 1 1 320px; }
.tempbar b { color: var(--info-ink); }
.closed-more { display: flex; justify-content: center; align-items: center; gap: var(--s-2); min-height: 48px; margin-top: var(--s-3); border: 1px dashed var(--line-strong); border-radius: var(--r); color: var(--ink-2); font-size: var(--fs-s); font-weight: var(--fw-b); text-decoration: none; }
.closed-more:hover { background: var(--surface); color: var(--ink); }
.next-why { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); text-align: center; }
.next-why:empty { display: none; }
.panel-sub { padding: var(--s-2) var(--s-5) 0; }
.panel-sub small { font-size: var(--fs-xs); color: var(--ink-3); }
@media (max-width: 760px) {
  .gnb nav { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .gnb nav a { font-size: var(--fs-xs); padding: 0; }
  .gnb nav a[aria-current="page"]::after { left: 6px; right: 6px; }
}
.crumb a { padding: 10px 4px; margin: -10px -4px; display: inline-block; }
@media (max-width: 760px) {
  .gnb nav { margin: var(--s-2) calc(-1 * var(--gutter)) 0; width: calc(100% + 2 * var(--gutter)); max-width: none; flex-basis: auto; }
  .util-acct a + a { display: none; }
  .period .range input[type=date], .hrange input[type="date"] { font-size: var(--fs-xs); padding: 0 var(--s-2); }
}
@media (max-width: 760px) { .gnb nav { gap: 0; } .gnb .util .util-acct a + a { display: none; } }
@media (max-width: 760px) { .gnb nav { -webkit-mask-image: none; mask-image: none; } }
.cmp-panel { grid-column: 1 / -1; }
/* 사업 소재지 선택 (참가 가능 판단 기준) — 보기 범위와 별개, 기본값 '선택' */
.sc-base { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 48px; padding: 0 var(--s-4); border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface); font: inherit; font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; }
.sc-base b { font-size: var(--fs-s); color: var(--ink); }
.sc-base:hover { border-color: var(--brand); }

/* ===== 첫 화면: 낙찰 분석(넓게) · 매물 4칸×3줄 (2026-11-05 사용자 요청) ===== */
.home-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-cards .slot { order: -1; }
@media (max-width: 1024px) { .home-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .home-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .home-cards { grid-template-columns: minmax(0, 1fr); } }
.hw { overflow: hidden; }
.hw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line-2); }
.hw-k { display: grid; gap: 4px; padding: var(--s-5) var(--s-6); }
.hw-k + .hw-k { border-left: 1px solid var(--line-2); }
.hw-k small { font-size: var(--fs-xs); color: var(--ink-3); }
.hw-k b { font-size: var(--fs-2xl); font-weight: var(--fw-num); line-height: 36px; letter-spacing: var(--ls-tight); color: var(--brand); font-variant-numeric: tabular-nums; }
.hw-k b em { font-style: normal; font-size: var(--fs-s); color: var(--ink-2); margin-left: 2px; }
.hw-k span { font-size: var(--fs-xs); line-height: 20px; color: var(--ink-2); }
.hw-body { display: grid; grid-template-columns: minmax(0, 1fr) 360px; }
.hw-body h3 { margin: 0; padding: var(--s-4) var(--s-5) var(--s-2); font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--ink); }
.hw-side { border-left: 1px solid var(--line-2); padding-bottom: var(--s-3); }
.hw-rank { list-style: none; margin: 0; padding: 0 var(--s-5) var(--s-2); counter-reset: r; }
.hw-rank li { display: flex; align-items: baseline; gap: var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line-2); counter-increment: r; font-size: var(--fs-s); }
.hw-rank li::before { content: counter(r); width: 20px; flex: none; font-size: var(--fs-xs); font-weight: var(--fw-num); color: var(--ink-3); }
.hw-rank a { flex: 1; min-width: 0; color: var(--ink); font-weight: var(--fw-b); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hw-rank a:hover { color: var(--brand); text-decoration: underline; }
.hw-rank span { flex: none; font-size: var(--fs-xs); color: var(--ink-3); }
.hw-side .hbars { padding: 0 var(--s-5); }
@media (max-width: 1024px) { .hw-body { grid-template-columns: minmax(0, 1fr); } .hw-side { border-left: 0; border-top: 1px solid var(--line-2); } }
@media (max-width: 760px) { .hw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hw-k:nth-child(3) { border-left: 0; } .hw-k:nth-child(n+3) { border-top: 1px solid var(--line-2); } .hw-k { padding: var(--s-4); } .hw-k b { font-size: var(--fs-xl); line-height: 30px; } }
/* 구역 머리의 기간 선택(첫 화면 낙찰 분석·나무) */
.sec-act { flex-wrap: wrap; justify-content: flex-end; }
.sec-range { flex-wrap: nowrap; }
.sec-range input[type="date"] { width: 156px; }
@media (max-width: 1024px) { .sec-act { justify-content: flex-start; } }
@media (max-width: 760px) { .sec-range { width: 100%; } .sec-range input[type="date"] { width: auto; } }
@media (max-width: 1024px) { .sec-h { flex-wrap: wrap; } .sec-h > .sec-act { flex: 1 1 100%; min-width: 0; } }
/* 첫 화면 나무 순위: 한 패널 안에 교목(위)·관목(아래) 두 줄. 칸은 카드 대신 얇은 구분선으로 나눈다(다음 금융·토스증권 지수판, 낙찰 분석 숫자 줄과 같은 방식) */
.panel.tboard { overflow: hidden; }
.tb-band { display: grid; grid-template-columns: 184px minmax(0, 1fr); }
.tb-band + .tb-band { border-top: 1px solid var(--line); }
.tb-head { display: flex; flex-direction: column; gap: 2px; padding: var(--s-5); background: var(--surface-2); border-right: 1px solid var(--line-2); }
.tb-head h3 { margin: 0 0 var(--s-2); font-size: var(--fs-l); font-weight: var(--fw-b); color: var(--ink); }
.tb-sum b { font-size: var(--fs-xl); font-weight: var(--fw-num); letter-spacing: var(--ls-tight); color: var(--ink); font-variant-numeric: tabular-nums; }
.tb-sum small { font-size: var(--fs-xs); color: var(--ink-2); margin-left: 2px; }
.tb-n { font-size: var(--fs-xs); color: var(--ink-3); }
.tb-head .link { align-self: flex-start; margin: auto 0 0 calc(-1 * var(--s-2)); }
.tb-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.tb-list li + li { border-left: 1px solid var(--line-2); }
.tb-list a { display: flex; flex-direction: column; gap: var(--s-2); height: 100%; padding: var(--s-5); color: inherit; text-decoration: none; transition: background .15s; }
.tb-list a:hover { background: var(--brand-50); }
.tb-list a:hover .tb-name { color: var(--brand); }
.tb-top { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.tb-rank { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: var(--fs-xs); font-weight: var(--fw-num); background: var(--brand-50); color: var(--brand); }
.tb-list li:first-child .tb-rank { background: var(--brand); color: var(--on-dark); }
.tb-name { font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-qty b { font-size: var(--fs-2xl); font-weight: var(--fw-num); line-height: 36px; letter-spacing: var(--ls-tight); color: var(--brand); font-variant-numeric: tabular-nums; }
.tb-qty small { font-size: var(--fs-s); color: var(--ink-2); margin-left: 2px; }
.tb-list .tc-bar { height: 6px; }
.tb-meta { font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-empty { grid-column: 1 / -1; padding: var(--s-6) var(--s-5); font-size: var(--fs-s); color: var(--ink-2); }
.tb-sum { white-space: nowrap; }
@media (max-width: 1240px) { .tb-band { grid-template-columns: 168px minmax(0, 1fr); } .tb-head { padding: var(--s-5) var(--s-4); } .tb-list a { padding: var(--s-4); } .tb-qty b { font-size: var(--fs-xl); line-height: 30px; } }
/* 태블릿: 합계를 머리 한 줄로 올려 1~5위 칸을 넓게 쓴다 */
@media (max-width: 1180px) {
  .tb-band { grid-template-columns: minmax(0, 1fr); }
  .tb-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); padding: var(--s-2) var(--s-4); border-right: 0; border-bottom: 1px solid var(--line-2); }
  .tb-head h3 { margin: 0; }
  .tb-head .link { margin: 0 calc(-1 * var(--s-2)) 0 auto; }
}
/* 좁은 화면: 순위는 세로 목록(이름 · 수량 오른쪽 정렬) */
@media (max-width: 900px) {
  .tb-list { grid-template-columns: minmax(0, 1fr); }
  .tb-list li + li { border-left: 0; border-top: 1px solid var(--line-2); }
  .tb-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top qty" "bar bar" "meta meta"; align-items: center; gap: 6px var(--s-3); padding: var(--s-3) var(--s-4); }
  .tb-top { grid-area: top; } .tb-qty { grid-area: qty; } .tb-list .tc-bar { grid-area: bar; height: 4px; } .tb-meta { grid-area: meta; }
  .tb-qty b { font-size: var(--fs-l); line-height: 24px; }
}
/* 수목수요 반영 현황(페이지 머리 숫자 아래): 전체 → 반영/미반영 → 사유. 국토부 실거래가 공개시스템의 '모든 계약이 집계되는가' 안내처럼 집계 범위를 먼저 밝힌다 */
.cov { margin-top: var(--s-5); padding: var(--s-4) var(--s-5); background: rgba(255, 255, 255, .86); border: 1px solid var(--line); border-radius: var(--r); }
.cov-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-5); font-size: var(--fs-s); line-height: 24px; color: var(--ink-2); }
.cov-h b { font-weight: var(--fw-num); color: var(--ink); font-variant-numeric: tabular-nums; }
.cov-h small { font-size: var(--fs-xs); color: var(--ink-3); }
.cov-bar { display: flex; height: 8px; margin: var(--s-3) 0 var(--s-4); border-radius: var(--r-full); overflow: hidden; background: var(--line-2); }
.cov-bar i { display: block; height: 100%; }
.cov-bar i + i { border-left: 2px solid var(--surface); }
.cd { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px; }
.cov-bar .ok, .cd.ok { background: var(--brand); }
.cov-bar .a, .cd.a, .cd.no { background: var(--line-strong); }
.cov-bar .b, .cd.b { background: #c3cabd; }
.cov-bar .c, .cd.c { background: var(--line-2); box-shadow: inset 0 0 0 1px #c3cabd; }
.cov-why { padding-top: var(--s-3); border-top: 1px solid var(--line-2); font-size: var(--fs-xs); line-height: 20px; color: var(--ink-2); }
.cov-why > b { display: block; margin-bottom: var(--s-1); color: var(--ink); font-weight: var(--fw-b); }
.pagehead .cov-why p { margin: 2px 0 0; font-size: var(--fs-xs); line-height: 20px; color: var(--ink-2); }
.cov-why p b { font-weight: var(--fw-b); color: var(--ink); }
.pagehead .cov-why .cov-end { margin-top: var(--s-2); color: var(--ink); font-weight: var(--fw-m); }
@media (max-width: 760px) { .cov { padding: var(--s-3) var(--s-4); } .cov-h { gap: 2px var(--s-4); } }
.period .seg button { white-space: nowrap; }
@media (max-width: 480px) { .period .seg button { padding: 0 var(--s-2); } }
.pagehead .cov-why p:not(.cov-end) { padding-left: 14px; text-indent: -14px; }
/* 공고 상세 — 입찰 정보(금액·일정·낙찰 방식·공사 개요): 한 패널 안 2×2 묶음, 칸은 구분선(낙찰 분석 숫자 줄과 같은 방식). 어려운 말은 아래 한 줄 설명 */
.bi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bi-col { min-width: 0; }
.bi-col + .bi-col { border-left: 1px solid var(--line-2); }
.bi-g { padding: var(--s-6) var(--s-5); }
.bi-g + .bi-g { border-top: 1px solid var(--line-2); }
.bi-g h4 { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); font-size: var(--fs-s); line-height: 24px; font-weight: var(--fw-b); color: var(--ink); }
.bi-g h4 .lc { color: var(--brand); }
.bi-g dl { margin: 0; }
.bi-r { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); }
.bi-r + .bi-r { margin-top: var(--s-4); }
.bi-r dt { font-size: var(--fs-xs); line-height: 24px; color: var(--ink-3); }
.bi-r dd { margin: 0; font-size: var(--fs-s); line-height: 24px; color: var(--ink); overflow-wrap: anywhere; }
.bi-r .nw { white-space: nowrap; }
.bi-r dd b { font-weight: var(--fw-num); font-variant-numeric: tabular-nums; }
.bi-r dd small { display: block; margin-top: var(--s-1); font-size: var(--fs-xs); line-height: 20px; color: var(--ink-3); }
/* 참가 자격: 지역 · 업종(면허) · 공동도급 · 실적 줄 */
.ep-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); padding: var(--s-4) 0; border-top: 1px solid var(--line-2); }
.ep-row:first-child { border-top: 0; padding-top: 0; }
.ep-k { font-size: var(--fs-xs); line-height: 32px; font-weight: var(--fw-b); color: var(--ink-3); }
.ep-v { min-width: 0; font-size: var(--fs-s); line-height: 32px; }
.ep-v > small { display: block; font-size: var(--fs-xs); line-height: 20px; color: var(--ink-3); }
.ep-row .ep-me { margin: var(--s-3) 0 0; font-size: var(--fs-s); line-height: 24px; font-weight: var(--fw-m); }
.ep-chip.lic { background: var(--brand-50); border-color: var(--leaf-300); color: var(--brand); }
.ep-or { align-self: center; font-size: var(--fs-xs); color: var(--ink-3); }
/* 원문 · 첨부파일 */
.flist { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line-2); border-radius: var(--r-s); }
.flist li + li { border-top: 1px solid var(--line-2); }
.flist a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); min-height: 44px; color: var(--ink); text-decoration: none; }
.flist a:hover { background: var(--brand-50); }
.fl-k { padding: 2px 6px; border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-xs); line-height: 20px; font-weight: var(--fw-b); color: var(--ink-2); white-space: nowrap; }
.fl-k.leaf { background: var(--brand-50); border-color: var(--leaf-300); color: var(--brand); }
.fl-n { font-size: var(--fs-xs); line-height: 20px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.fl-x { font-size: var(--fs-xs); color: var(--ink-3); }
/* 취소된 공고 */
.cancel-strip { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border: 1px solid #f0c9b8; border-radius: var(--r); background: #fdf3ee; color: var(--up); }
.cancel-strip b { display: block; font-size: var(--fs-s); }
.cancel-strip span { font-size: var(--fs-xs); color: var(--ink-2); }
@media (max-width: 760px) {
  .bi-grid { grid-template-columns: minmax(0, 1fr); }
  .bi-col + .bi-col { border-left: 0; border-top: 1px solid var(--line-2); }
  .bi-g { padding: var(--s-5) var(--s-4); }
  .bi-r + .bi-r { margin-top: var(--s-3); }
  .bi-r { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); }
  .ep-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ep-k { line-height: 20px; }
}
/* 페이지 머리 숫자 줄: 설명 글 폭(760px)에 묶이지 않고 한 줄로(낙찰현황 5개 숫자가 두 줄로 갈라지지 않게) */
.ph-kpis { width: max-content; max-width: calc(100vw - 2 * var(--gutter)); }
@media (max-width: 760px) { .ph-kpis { width: auto; max-width: none; } }
/* 업체 상세: 업체 정보(대표자·연락처·업력·보유 업종)·낙찰 패턴 — 공고 상세 입찰 정보와 같은 키-값 규칙(구분선 없이 여백) */
.cp-body { padding: var(--s-6) var(--s-5); }
.cp-kv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-6); margin: 0; }
.cp-kv .bi-r + .bi-r { margin-top: 0; }
aside .cp-kv { grid-template-columns: minmax(0, 1fr); }
aside .cp-kv .bi-r { grid-template-columns: 88px minmax(0, 1fr); }
.cp-kv a.tel { color: var(--brand); font-weight: var(--fw-b); text-decoration: none; font-variant-numeric: tabular-nums; }
.cp-lic { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line-2); }
.cp-lic h4 { margin: 0 0 var(--s-3); font-size: var(--fs-s); font-weight: var(--fw-b); }
.cp-lic h4 small { margin-left: var(--s-1); font-size: var(--fs-xs); font-weight: var(--fw-r); color: var(--ink-3); }
@media (max-width: 760px) { .cp-body { padding: var(--s-5) var(--s-4); } .cp-kv { grid-template-columns: minmax(0, 1fr); gap: var(--s-3); } }
/* 사업 소재지 '미선택' 칸: 지역 칸과 구분되게 점선 */
.sct-none { border-style: dashed; }
.sct-none:not(.on) b { color: var(--ink-2); }
/* 공고 상세: 마감·개찰된 공고의 실제 결과 띠(예상 경쟁 자리), 결과가 아직 없을 때는 회색 안내 */
.res-strip { margin-top: var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.rs-h { display: flex; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-5); border-bottom: 1px solid var(--line-2); background: var(--surface-2); }
.rs-h .lc { color: var(--brand); }
.rs-h b { font-size: var(--fs-s); }
.rs-h small { margin-left: auto; font-size: var(--fs-xs); color: var(--ink-3); }
.rs-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.rs-grid > div { display: grid; gap: 2px; padding: var(--s-4) var(--s-5); min-width: 0; }
.rs-grid > div + div { border-left: 1px solid var(--line-2); }
.rs-grid small { font-size: var(--fs-xs); color: var(--ink-3); }
.rs-grid b { font-size: var(--fs-l); line-height: 26px; font-weight: var(--fw-num); color: var(--ink); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-grid b a { color: var(--brand); text-decoration: none; }
.rs-grid b a:hover { text-decoration: underline; }
.rs-grid em { font-style: normal; font-size: var(--fs-xs); color: var(--ink-3); }
.comp-strip.res-wait { background: var(--surface-2); border-color: var(--line); color: var(--ink-3); }
.comp-strip.res-wait b { color: var(--ink); }
.comp-strip.res-wait span { color: var(--ink-2); }
@media (max-width: 760px) { .rs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rs-grid > div:nth-child(3) { border-left: 0; } .rs-grid > div:nth-child(n+3) { border-top: 1px solid var(--line-2); } .rs-h small { display: none; } }

/* 사진 크게 보기(현재 페이지 팝업): 어두운 바탕 · 가운데 사진 · 좌우 화살표 · 오른쪽 위 X · 아래 'n / 전체' */
.lb { position: fixed; inset: 0; z-index: 1000; background: rgba(8, 12, 10, .92); }
.lb-stage { position: absolute; inset: 64px 88px; display: grid; place-items: center; }
.lb-stage img { max-width: calc(100vw - 176px); max-height: calc(100vh - 128px); object-fit: contain; border-radius: 4px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); user-select: none; }
.lb-x, .lb-nav { position: absolute; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; cursor: pointer; transition: background .15s; }
.lb-x:hover, .lb-nav:hover { background: rgba(255, 255, 255, .28); }
.lb-x:focus-visible, .lb-nav:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lb-x { top: 16px; right: 16px; width: 48px; height: 48px; }
.lb-nav { top: 50%; width: 56px; height: 56px; transform: translateY(-50%); }
.lb-nav.prev { left: 20px; }
.lb-nav.prev .lc { transform: rotate(180deg); }
.lb-nav.next { right: 20px; }
.lb-count { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 4px 14px; border-radius: var(--r-full); background: rgba(0, 0, 0, .45); color: #fff; font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .lb-stage { inset: 64px 0 56px; } .lb-stage img { max-width: 100vw; max-height: calc(100vh - 120px); border-radius: 0; } .lb-nav { width: 44px; height: 44px; background: rgba(0, 0, 0, .35); } .lb-nav.prev { left: 8px; } .lb-nav.next { right: 8px; } }
/* 쪽 번호(수목매물): 가운데 정렬, 누르기 쉬운 44px 칸, 현재 쪽은 진한 칸 */
.pager { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--s-1); margin-top: var(--s-6); }
.pg-n, .pg-s { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font-size: var(--fs-s); font-weight: var(--fw-m); text-decoration: none; font-variant-numeric: tabular-nums; }
.pg-n:hover, .pg-s:hover { border-color: var(--brand); color: var(--brand); }
.pg-n.on { background: var(--brand); border-color: var(--brand); color: var(--on-dark); font-weight: var(--fw-b); }
.pg-s.off { color: var(--ink-3); background: var(--surface-2); border-color: var(--line-2); }
.pg-gap { min-width: 24px; text-align: center; color: var(--ink-3); }
@media (max-width: 480px) { .pg-s { padding: 0 var(--s-2); } .pg-n { min-width: 40px; } }
/* 매물 상세: 연락처 칸·보유 수목 표 여백을 넉넉하게, 게시글 원문은 큰 글자(나이 드신 분도 읽기 쉽게) */
.lst-contact { padding: var(--s-6) var(--s-5); }
.lc-where { margin: 0; font-size: var(--fs-xs); line-height: 20px; color: var(--ink-3); }
.lc-name { margin: var(--s-2) 0 0; font-size: var(--fs-l); line-height: 26px; font-weight: var(--fw-b); color: var(--ink); }
.lc-name span { margin-left: var(--s-1); font-size: var(--fs-xs); font-weight: var(--fw-r); color: var(--ink-3); }
.lst-contact .phone-big { margin-top: var(--s-4); }
.lc-btns { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
.lc-meta { margin: var(--s-5) 0 0; padding-top: var(--s-4); border-top: 1px solid var(--line-2); display: grid; gap: var(--s-2); }
.lc-meta > div { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--s-3); font-size: var(--fs-xs); line-height: 20px; }
.lc-meta dt { color: var(--ink-3); }
.lc-meta dd { margin: 0; color: var(--ink-2); }
.lc-tip { margin: var(--s-3) 0 0; font-size: var(--fs-xs); line-height: 22px; color: var(--ink-3); }
.lst-items .tbl td { padding-top: var(--s-5); padding-bottom: var(--s-5); line-height: 24px; }
.lst-items .tbl td .sub { display: block; margin-top: var(--s-1); line-height: 20px; }
.raw { padding: var(--s-6) var(--s-5); font-size: var(--fs-l); line-height: 1.85; color: var(--ink); }
@media (max-width: 760px) { .raw { padding: var(--s-5) var(--s-4); font-size: var(--fs-s); line-height: 1.8; } .lst-contact { padding: var(--s-5) var(--s-4); } }

/* 수목 상세: 규격 행을 누르면 아래 반영 공고를 그 규격으로 거른다 */
.spec-pick .sp-a { color: inherit; text-decoration: none; font-weight: var(--fw-m); }
.spec-pick tr.row:hover .sp-a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.spec-pick tr.row.on td { background: var(--brand-50); }
.spec-pick tr.row.on td:first-child { box-shadow: inset 4px 0 0 var(--brand); }
.spec-pick tr.row.on .sp-a, .spec-pick tr.row.on .sp-n { color: var(--brand); font-weight: var(--fw-b); }
.tns-sel { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); padding: var(--s-3) var(--s-5); background: var(--brand-50); border-bottom: 1px solid var(--line-2); font-size: var(--fs-s); }
.tns-sel span { color: var(--ink-2); }
.tns-sel b { color: var(--brand); font-size: var(--fs-l); }
.tns-sel .btn { margin-left: auto; }
.tns-pg { padding: var(--s-2) var(--s-5) var(--s-6); border-top: 1px solid var(--line-2); }
.tns-pg .pager { margin-top: var(--s-4); }
.tns-pg p { margin: var(--s-3) 0 0; text-align: center; font-size: var(--fs-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tag.leaf.strong { font-weight: var(--fw-b); }

/* 검색: 검색 대상 선택(공고명·회사명·수종명·발주기관) + 검색어 — 국가법령정보센터 '현행법령 ⌄ | 검색어' 방식 */
.searchbox.sb2 { padding-left: 0; overflow: hidden; }
.sb-type { position: relative; display: flex; align-items: center; align-self: stretch; flex: none; border-right: 1px solid var(--line); }
.sb-type select { appearance: none; -webkit-appearance: none; height: 100%; min-width: 120px; padding: 0 40px 0 var(--s-4); border: 0; outline: 0; background: var(--surface-2); color: var(--ink); font: inherit; font-size: var(--fs-s); font-weight: var(--fw-b); cursor: pointer; }
.sb-type select:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
.searchbox .sb-type svg { position: absolute; right: 14px; width: 18px; height: 18px; margin: 0; stroke: var(--ink-2); pointer-events: none; }
.searchbox.sb2 > svg { margin-left: var(--s-4); }
.sr-tabs { display: grid; grid-template-columns: repeat(4, 1fr); width: 100%; max-width: 680px; margin: var(--s-5) 0; }
.sr-tabs a { justify-content: center; gap: 6px; font-size: var(--fs-s); }
.sr-tabs a b { font-variant-numeric: tabular-nums; }
.sr-orgs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line-2); }
.sr-orgs > span { margin-right: var(--s-2); font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-2); }
.sr-orgs > small { font-size: var(--fs-xs); color: var(--ink-3); }
.sr-orgs .chip small { margin-left: 4px; color: var(--ink-3); font-size: var(--fs-xs); }
.sr-alt { justify-content: center; margin-top: var(--s-4); }
@media (max-width: 560px) {
  .sb-type select { min-width: 96px; padding: 0 30px 0 var(--s-3); }
  .searchbox .sb-type svg { right: 8px; }
  .searchbox.sb2 > svg { display: none; }
  .searchbox.sb2 input { padding-left: var(--s-3); }
  .searchbox.sb2 button { padding: 0 var(--s-4); }
  .sr-tabs a { flex-direction: column; gap: 0; min-height: 52px; padding: 0 var(--s-1); font-size: var(--fs-xs); line-height: 1.3; }
}
.sr-tabs a.zero { color: var(--ink-3); }
.sr-tabs a.zero b { font-weight: var(--fw-m); }


/* 컬러 아이콘(2026-11-06 사용자 선택: Fluent 컬러 + 흰 카드·그림자). 조작용 선 아이콘(.lc)의 색·선 규칙이 덮지 않게 한다 */
svg.cc { flex: none; fill: #000 !important; stroke: none !important; }
:root { --tile-shadow: 0 1px 2px rgba(20, 49, 35, .06), 0 6px 16px rgba(20, 49, 35, .09); }
.sx-ic, .kinds .ic, .step .ic, .mf-ic, .float-card > span, .em-ic { background: var(--surface); box-shadow: var(--tile-shadow); }
.mf-ic { border-radius: 14px; }
.mf-ic svg.cc { width: 28px; height: 28px; }
.sx-ic svg.cc { width: 28px; height: 28px; }
.kinds .ic svg.cc { width: 26px; height: 26px; }
.float-card > span svg.cc { width: 24px; height: 24px; }
.em-ic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; margin-bottom: var(--s-2); }
.empty .em-ic svg.cc, .md-empty .em-ic svg.cc { width: 36px; height: 36px; }
.em-ic.sm { width: 44px; height: 44px; border-radius: 12px; margin: 0; flex: none; }
.em-ic.sm svg.cc { width: 24px; height: 24px; }
.sc-pick svg.cc { width: 22px; height: 22px; }
.comp-strip > svg.cc { margin-top: 0; }
.lst .ph.none svg.tree.cc { width: 56px; height: 56px; }

/* ===== 2026-11-06 로그인 · 가입 · 찾기 · 내 정보 · 약관 ===== */
.stepper { grid-template-columns: repeat(var(--n, 3), 1fr); }
.aform.mt { margin-top: var(--s-6); }
.aform.narrow { max-width: 520px; }
.af-tag { display: inline-flex; align-items: center; height: 22px; margin-left: var(--s-2); padding: 0 var(--s-2); border-radius: var(--r-xs); background: var(--brand-50); color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-b); vertical-align: 2px; }
.af-sub { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.af-sub::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.caps { margin: 0; font-size: var(--fs-xs); color: var(--gold); font-weight: var(--fw-b); }
.seg3.ind label { flex: 1 1 calc(50% - 4px); }
.seg3.ind span { justify-content: flex-start; padding: 0 var(--s-4); font-size: var(--fs-s); }
.af.bad .seg3, .af.bad .af2 .af-i { border-color: var(--up); }
.af.bad > .af-msg { color: var(--up); }
.auth-info { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-5); padding: var(--s-4); border-radius: var(--r-s); background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-s); line-height: 1.6; color: var(--ink-2); }
.auth-info .lc { flex: none; margin-top: 2px; color: var(--brand); }
.auth-info.ok { background: var(--ok-50); border-color: var(--ok-line); color: var(--ok); }
.auth-info.ok .lc { color: var(--ok); }
.aform .auth-info { margin-top: 0; }
.login-err a { color: inherit; font-weight: var(--fw-b); }
.err-n { font-variant-numeric: tabular-nums; opacity: .8; }
.lopts { justify-content: flex-start; gap: var(--s-2) var(--s-6); }
/* 가입 유형 */
.jtype { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin: var(--s-6) 0 var(--s-5); }
.jt { display: grid; align-content: start; gap: var(--s-2); padding: var(--s-5); border: 1.5px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.jt:hover { border-color: var(--brand); box-shadow: 0 12px 28px -18px rgba(20, 49, 35, .45); transform: translateY(-2px); }
.jt:focus-visible { outline: 3px solid var(--brand-100); border-color: var(--brand); }
.jt-ic { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: var(--s-2); border-radius: 16px; background: var(--surface); box-shadow: var(--tile-shadow); }
.jt b { font-size: var(--fs-xl); }
.jt > small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.jt ul { list-style: none; margin: var(--s-3) 0 0; padding: var(--s-3) 0 0; border-top: 1px solid var(--line-2); display: grid; gap: var(--s-2); }
.jt li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-s); line-height: 1.5; color: var(--ink-2); }
.jt li .lc { flex: none; margin-top: 3px; color: var(--brand); }
.jkind { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-3); font-size: var(--fs-s); color: var(--ink-2); }
.jkind .tlink { margin-left: auto; }
/* 로그인 아래 가입 권유 */
.join-nudge { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-6); padding: var(--s-4) var(--s-5); border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--line-2); }
.join-nudge > span { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--surface); box-shadow: var(--tile-shadow); }
.join-nudge div { flex: 1; display: grid; gap: 2px; }
.join-nudge b { font-size: var(--fs-s); }
.join-nudge small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
/* 아이디·비밀번호 찾기 */
.ftabs { display: grid; grid-template-columns: 1fr 1fr; margin: calc(var(--s-2) * -1) 0 var(--s-6); border-bottom: 1px solid var(--line); }
.ftabs a { display: flex; align-items: center; justify-content: center; min-height: 52px; font-size: var(--fs-l); font-weight: var(--fw-m); color: var(--ink-3); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.ftabs a.on { color: var(--ink); font-weight: var(--fw-b); border-bottom-color: var(--brand); }
.fmode { margin-top: var(--s-5); }
.fsteps { list-style: none; display: flex; gap: var(--s-2); margin: var(--s-5) 0 var(--s-6); padding: 0; counter-reset: fs; }
.fsteps li { flex: 1; display: flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--r-s); background: var(--surface-2); font-size: var(--fs-xs); color: var(--ink-3); counter-increment: fs; }
.fsteps li::before { content: counter(fs); display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #b9c3b4; color: var(--surface); font-weight: var(--fw-b); font-size: var(--fs-xs); }
.fsteps li.now { background: var(--brand-50); color: var(--brand); font-weight: var(--fw-b); }
.fsteps li.now::before { background: var(--brand); }
.fsteps li.done { color: var(--ink-2); }
.fsteps li.done::before { content: "✓"; background: var(--ok); }
.fres { display: grid; justify-items: center; gap: var(--s-2); margin-top: var(--s-6); padding: var(--s-6) var(--s-5); border-radius: var(--r); background: var(--surface-2); text-align: center; }
.fres-ic { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: var(--s-2); border-radius: 18px; background: var(--surface); box-shadow: var(--tile-shadow); }
.fres p { margin: 0; font-size: var(--fs-s); color: var(--ink-2); }
.fres p b { color: var(--ink); font-size: var(--fs-l); }
.fres-id { font-size: var(--fs-2xl); font-weight: var(--fw-num); letter-spacing: .02em; color: var(--brand); font-variant-numeric: tabular-nums; }
.fres small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }
.fres .btn2 { width: 100%; margin-top: var(--s-4); }
.fres > .btn.block { margin-top: var(--s-4); }
.fres .auth-alt { margin-top: var(--s-2); }
/* 내 정보 */
.acct { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.acct-nav { position: sticky; top: 96px; display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.acct-id { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2) var(--s-2) var(--s-4); border-bottom: 1px solid var(--line-2); }
.acct-id div { display: grid; min-width: 0; }
.acct-id b { font-size: var(--fs-l); }
.acct-id small { font-size: var(--fs-xs); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acct-av, .um-av { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: var(--neon); font-weight: var(--fw-b); font-size: var(--fs-l); }
.acct-nav nav { display: grid; gap: 2px; }
.acct-nav nav a { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: 0 var(--s-3); border-radius: var(--r-s); font-size: var(--fs-s); color: var(--ink-2); text-decoration: none; }
.acct-nav nav a:hover { background: var(--surface-2); color: var(--ink); }
.acct-nav nav a[aria-current] { background: var(--brand-50); color: var(--brand); font-weight: var(--fw-b); }
.acct-nav nav a.dim { color: var(--ink-3); font-size: var(--fs-xs); padding-left: calc(var(--s-3) + 20px + var(--s-3)); }
.acct-out { display: flex; align-items: center; gap: var(--s-2); min-height: 44px; margin-top: var(--s-2); padding: 0 var(--s-3); border: 0; border-top: 1px solid var(--line-2); background: none; font: inherit; font-size: var(--fs-xs); color: var(--ink-3); cursor: pointer; }
.acct-out:hover { color: var(--ink); }
.acct-main { display: grid; gap: var(--s-5); min-width: 0; }
.info-list { margin: 0; padding: var(--s-5); display: grid; gap: var(--s-4); }
.ir { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s-4); align-items: baseline; }
.ir dt { font-size: var(--fs-xs); color: var(--ink-3); }
.ir dd { margin: 0; font-size: var(--fs-s); color: var(--ink); line-height: 1.6; }
.ir dd .tlink { margin-left: var(--s-2); }
.ir dd .muted, .done-kv .muted { color: var(--ink-3); font-size: var(--fs-xs); }
.ir-hint { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.me-empty { display: flex; align-items: center; gap: var(--s-4); padding: var(--s-5); }
.me-empty div { flex: 1; display: grid; gap: 2px; }
.me-empty b { font-size: var(--fs-s); }
.me-empty small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.panel.pad { padding: var(--s-6); }
.me-j3 { margin: 0; }
.sw-list { display: grid; gap: var(--s-2); margin: var(--s-2) 0; }
.leave-box { padding: var(--s-5); border-radius: var(--r); background: var(--up-50); border: 1px solid #f1cdbd; }
.leave-box > b { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-l); color: var(--ink); }
.leave-box ul { margin: var(--s-3) 0 0; padding-left: 1.2em; display: grid; gap: var(--s-2); font-size: var(--fs-s); line-height: 1.6; color: var(--ink-2); }
.btn.danger { border-color: var(--up); background: var(--surface); color: var(--up); font-weight: var(--fw-b); }
.btn.danger:hover { background: var(--up); color: #fff; }
.cfm .tdlg-b { padding-top: var(--s-6); text-align: center; }
.cfm-t { display: block; font-size: var(--fs-xl); color: var(--ink); }
.cfm p { margin: var(--s-2) 0 0; }
/* 약관 */
.tdlg.doc { width: min(720px, calc(100vw - 32px)); }
.tdlg.doc .tdlg-b { max-height: min(60vh, 560px); overflow-y: auto; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); margin-top: var(--s-4); }
.tdlg.doc .tdlg-f { padding-top: var(--s-4); }
.tdoc { font-size: var(--fs-s); line-height: 1.85; color: var(--ink-2); }
.tdoc h3 { margin: var(--s-7) 0 var(--s-3); font-size: var(--fs-l); color: var(--ink); scroll-margin-top: 96px; }
.tdoc section:first-of-type h3, .tdoc > h4:first-child { margin-top: 0; }
.tdoc h4 { margin: var(--s-5) 0 var(--s-2); font-size: var(--fs-s); color: var(--ink); }
.tdoc p { margin: 0 0 var(--s-3); }
.tdoc ol, .tdoc ul { margin: 0 0 var(--s-3); padding-left: 1.4em; display: grid; gap: var(--s-1); }
.tdoc table { width: 100%; margin: var(--s-2) 0 var(--s-4); border-collapse: collapse; font-size: var(--fs-xs); line-height: 1.6; }
.tdoc th, .tdoc td { padding: var(--s-2) var(--s-3); border: 1px solid var(--line); text-align: left; vertical-align: top; }
.tdoc th { background: var(--surface-2); color: var(--ink); font-weight: var(--fw-b); }
.tdoc small { color: var(--ink-3); }
.terms-tabs { display: flex; flex-wrap: wrap; margin-bottom: var(--s-5); }
.terms-tabs a { font-size: var(--fs-s); }
.tr-memo { margin-bottom: var(--s-5); padding: var(--s-4) var(--s-5); border-radius: var(--r); background: var(--gold-50); border: 1px solid #ecd9a8; color: var(--ink-2); }
.tr-memo summary { display: flex; align-items: center; gap: var(--s-2); cursor: pointer; font-weight: var(--fw-b); color: var(--gold); }
.tr-memo summary small { font-weight: var(--fw-r); color: var(--ink-3); font-size: var(--fs-xs); }
.tr-memo ol { margin: var(--s-3) 0 0; padding-left: 1.4em; display: grid; gap: var(--s-2); font-size: var(--fs-xs); line-height: 1.7; }
.tdoc-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.tdoc-toc { position: sticky; top: 96px; max-height: calc(100vh - 120px); overflow-y: auto; padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); font-size: var(--fs-xs); }
.tdoc-toc b { display: block; margin-bottom: var(--s-2); font-size: var(--fs-s); }
.tdoc-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.tdoc-toc a { display: block; padding: var(--s-1) var(--s-2); border-radius: var(--r-xs); color: var(--ink-2); text-decoration: none; line-height: 1.5; }
.tdoc-toc a:hover { background: var(--surface-2); color: var(--ink); }
.tdoc.panel.pad { padding: var(--s-7) 56px; }
.tdoc-co { margin-top: var(--s-7) !important; padding-top: var(--s-5); border-top: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.8; }
/* 머리글 계정 메뉴 */
.um { position: relative; }
.um-btn { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-2) 0 4px; border: 1px solid transparent; border-radius: var(--r-full); background: none; font: inherit; font-size: var(--fs-s); font-weight: var(--fw-m); color: var(--ink); cursor: pointer; }
.um-btn:hover, .um-btn[aria-expanded="true"] { border-color: var(--line); background: var(--surface); }
.um-av { width: 34px; height: 34px; font-size: var(--fs-s); }
.um-btn .lc { color: var(--ink-3); }
.um-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 248px; padding: var(--s-2); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-l); }
.um-pop[hidden] { display: none; }
.um-h { display: grid; gap: 2px; padding: var(--s-3); margin-bottom: var(--s-1); border-bottom: 1px solid var(--line-2); }
.um-h b { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-s); color: var(--ink); }
.um-h small { font-size: var(--fs-xs); color: var(--ink-3); }
.um-pop a, .um-out { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 44px; padding: 0 var(--s-3); border: 0; border-radius: var(--r-s); background: none; font: inherit; font-size: var(--fs-s); color: var(--ink-2); text-decoration: none; cursor: pointer; text-align: left; }
.um-pop a:hover, .um-out:hover { background: var(--surface-2); color: var(--ink); }
.um-out { margin-top: var(--s-1); border-top: 1px solid var(--line-2); border-radius: 0 0 var(--r-s) var(--r-s); color: var(--ink-3); font-size: var(--fs-xs); }
@media (max-width: 960px) {
  .acct { grid-template-columns: 1fr; gap: var(--s-4); }
  .acct-nav { position: static; padding: var(--s-3); }
  .acct-id { padding: var(--s-1) var(--s-1) var(--s-3); }
  .acct-nav nav { display: flex; gap: var(--s-1); overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--s-3) * -1); padding: 0 var(--s-3); }
  .acct-nav nav a { flex: none; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-full); padding: 0 var(--s-4); }
  .acct-nav nav a .cc { display: none; }
  .acct-nav nav a.dim { padding-left: var(--s-4); font-size: var(--fs-s); }
  .acct-out { display: none; }
  .tdoc-wrap { grid-template-columns: 1fr; }
  .tdoc-toc { position: static; max-height: none; }
  .tdoc-toc ol { grid-template-columns: 1fr 1fr; }
  .tdoc.panel.pad { padding: var(--s-6) var(--s-5); }
}
@media (max-width: 560px) {
  .jtype { grid-template-columns: 1fr; }
  .seg3.ind label { flex-basis: 100%; }
  .ir { grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); }
  .panel.pad { padding: var(--s-5); }
  .join-nudge { flex-wrap: wrap; }
  .join-nudge .btn { width: 100%; }
  .me-empty { flex-wrap: wrap; }
  .me-empty .btn { width: 100%; }
  .um-n { display: inline-block; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xs); }
  .um-pop { position: fixed; left: var(--s-4); right: var(--s-4); top: 72px; width: auto; }
  .tdoc-toc ol { grid-template-columns: 1fr; }
  .fsteps li { padding: var(--s-2); font-size: 14px; }
}
.authed .gnb .util > .btn.primary { display: none; }
.gnb .util .util-acct .um-pop a { display: flex; }   /* 모바일 머리글의 "로그인만 보이기" 규칙이 계정 메뉴 항목을 숨기지 않게 */
.af.bad .af-i { background: #fffaf7; }   /* 배민 실측: 오류 칸은 테두리 + 옅은 바탕으로 한 번 더 표시 */
@media (max-width: 760px) {
  .tdoc table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }   /* 약관 표: 휴대폰에서는 표만 옆으로 밀어 본다 */
  .tdoc th, .tdoc td { min-width: 120px; }
  .tdoc th:first-child, .tdoc td:first-child { min-width: 96px; }
}
.tdoc-wrap > * { min-width: 0; }
.tdoc table { max-width: 100%; }
@media (max-width: 960px) { .tdoc-wrap { grid-template-columns: minmax(0, 1fr); } .tdoc-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tdoc-toc ol { grid-template-columns: minmax(0, 1fr); } }

/* 바닥글 (2026-11-06 개편): 밝은 바탕 · 당근 실측 구조 — 로고·메뉴·고객센터 / 구분선 / 약관 · 사업자 정보(굵은 이름표 + 값) · 출처 */
footer.ft { background: #e9efe1; color: var(--ink-2); border-top: 1px solid #d5dfcb; padding: var(--s-7) 0 var(--s-6); font-size: var(--fs-xs); }   /* 본문 바탕(#fdfdf6)과 확실히 구분되는 옅은 세이지 */
.ft-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4) var(--s-6); flex-wrap: wrap; padding-bottom: var(--s-5); border-bottom: 1px solid #d0dbc5; }
.ft-logo { display: inline-flex; color: var(--brand); text-decoration: none; }
.ft-logo svg { height: 22px; width: auto; display: block; }
.ft-brand p { margin: var(--s-2) 0 0; line-height: 1.6; color: var(--ink-3); }
.ft-legal a, .ft-mail { color: var(--ink-2); text-decoration: none; }
.ft-legal a:hover, .ft-mail:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.ft-cs { display: grid; gap: var(--s-1); justify-items: end; text-align: right; }
.ft-cs p { margin: 0; }
.ft-cs1 { display: flex; align-items: baseline; gap: var(--s-3); }
.ft-cs2 { color: var(--ink-3); }
/* 카카오톡 상담(채널 _ssNHG 채팅) — 카카오 노란색 단추 */
.ft-cs3 { margin-top: var(--s-2) !important; }
.kakao-chat { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s-4); border-radius: var(--r-s); background: #fee500; color: #191919; font-size: var(--fs-s); font-weight: var(--fw-b); text-decoration: none; }
.kakao-chat:hover { background: #fada0a; }
.ft-cs1 span { color: var(--ink-3); font-size: var(--fs-xs); }
.ft-tel { font-size: var(--fs-xl); font-weight: var(--fw-num); color: var(--brand); text-decoration: none; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.ft-bottom { display: grid; gap: var(--s-3); padding-top: var(--s-5); }
.ft-legal { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.ft-legal b { color: var(--ink); font-weight: var(--fw-b); }
.ft-co { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5); margin: 0; line-height: 1.7; }
.ft-co div { display: flex; gap: var(--s-2); }
.ft-co dt { color: var(--ink-2); font-weight: var(--fw-b); }
.ft-co dd { margin: 0; color: var(--ink-3); }
.ft-end { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-2); color: var(--ink-3); }
@media (max-width: 960px) {
  .ft-top { flex-direction: column; align-items: flex-start; }
  .ft-cs { justify-items: start; text-align: left; }
}
@media (max-width: 560px) {
  footer.ft { padding: var(--s-7) 0 var(--s-6); }
  .ft-co { display: grid; gap: var(--s-1); }
  .ft-end { display: grid; }
}
@media (min-width: 761px) and (max-width: 960px) { .ft-top { flex-direction: row; align-items: center; } .ft-cs { justify-items: end; text-align: right; } }   /* 태블릿도 로고·고객센터 한 줄 */
.ft-brand { flex: 1 1 280px; min-width: 0; }
.ft-cs { flex: none; }
@media (max-width: 760px) { .ft-brand { flex: none; } }
/* 기간 칸: PC에서는 요약 버튼 없이 그대로, 휴대폰은 mobile.css에서 접는다 */
.hr-sum { display: none; }
.hr-in { display: contents; }
.period .p-custom { display: none; }
.util-mine { display: none; }
/* 2026-11-06 기능 점검 반영 */
.listbar .md-sort + .btn { margin-left: var(--s-2); }
.linechart .avg-t { paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.star-btn.on { border-color: var(--gold); color: var(--gold); background: var(--gold-50); font-weight: var(--fw-b); }
/* 나란한 카드(높이 맞춤): 그래프를 카드 가운데에 두어 아래 빈 공간이 뭉치지 않게 */
.stretch > .panel { display: flex; flex-direction: column; }
.stretch > .panel > .viz { flex: 1 1 auto; display: grid; align-content: center; }

/* 입찰공고 목록: 진행 중과 마감 공고 사이 구분 줄 */
.closed-h { padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line-2); background: var(--surface-2); font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-3); }
.util-search { display: none; }
.fs-h, .fs-f { display: none; }
.lc-meta > div { grid-template-columns: max-content minmax(0, 1fr); }
/* 고른 조건 칩 · 맨 위로 */
.achips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-3); }
.achip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 var(--s-3); border-radius: var(--r-full); background: var(--brand-50); border: 1px solid var(--brand-100); color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-b); text-decoration: none; }
.achip span { font-size: var(--fs-xs); opacity: .7; }
.achip.reset { background: none; border-color: transparent; color: var(--ink-3); font-weight: var(--fw-m); text-decoration: underline; text-underline-offset: 3px; }
.totop { display: none; }

/* 휴대폰 전용: 전체 메뉴 버튼·판, 바닥글 사업자 정보 버튼 (mobile.css에서 보임) */
.gnb-all, .gnb-panel, .ft-biz-t { display: none; }
/* 휴대폰 전용 접기·더 보기 (mobile.css에서 보임) */
.btn.m-more, .wq, .tbl td.only-m { display: none; }
.m-fold > summary { display: none; }

/* 낙찰현황: 검색·조건 줄을 본문 상자 맨 위로 옮김(휴대폰 sticky) — 데스크톱 간격 */
.wrap.sec.wbody { margin-top: var(--s-4); }
.wbody > .wfil { margin-bottom: var(--s-4); }

/* 매물 등록 유도 카드(인증 농원) — 2026-11-06 사용자 요청: 등록하고 싶게, 가운데 정렬 */
.pro-slot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-2); min-height: 100%; padding: var(--s-6) var(--s-5); text-align: center; text-decoration: none; color: inherit;
  border: 1.5px dashed rgba(150, 98, 10, .45); border-radius: var(--r); background: radial-gradient(120% 75% at 50% 0%, #fffaf0 0%, var(--gold-50) 60%, #f9ecd0 100%);
  transition: border-color .15s, transform .15s, box-shadow .15s; }
.pro-slot:hover { border-style: solid; border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 14px 30px -16px rgba(150, 98, 10, .5); }
.pro-slot:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; }
.home-cards .pro-slot { order: -1; }
.pro-slot .badge { align-self: center; }
.ps-ic { position: relative; display: grid; place-items: center; width: 76px; height: 76px; margin: var(--s-3) 0 var(--s-2); border-radius: 50%; background: #fff; box-shadow: var(--tile-shadow); }
.ps-plus { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; border: 3px solid #fff; }
.pro-slot b { font-size: var(--fs-l); font-weight: var(--fw-b); line-height: 1.4; color: var(--ink); text-wrap: balance; word-break: keep-all; }
.pro-slot p { margin: 0; font-size: var(--fs-xs); line-height: 1.6; color: var(--ink-2); text-wrap: balance; word-break: keep-all; }
.pro-slot p em { font-style: normal; font-weight: var(--fw-b); color: var(--gold); }
.ps-cta { align-self: stretch; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 52px; margin-top: var(--s-4); font-size: var(--fs-s); }
.pro-slot:hover .ps-cta { filter: brightness(1.08); }

/* 목록 끝 가운데 '더 보기' (첫 화면 수목 매물 → 수목매물 화면) */
.more-c { display: flex; justify-content: center; margin-top: var(--s-6); }
.more-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-width: 260px; min-height: 52px; padding: 0 var(--s-6); border: 1px solid var(--line-strong); border-radius: var(--r-full); background: var(--surface); color: var(--ink); font-size: var(--fs-s); font-weight: var(--fw-b); text-decoration: none; transition: border-color .15s, color .15s, background .15s; }
.more-btn span { font-weight: var(--fw-m); color: var(--ink-3); }
.more-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-50); }
.more-btn:hover span { color: var(--brand); }
@media (max-width: 760px) { .more-c { margin-top: var(--s-4); } .more-btn { width: 100%; min-width: 0; min-height: 48px; } }

/* =====================================================================
   입찰분석 개편 (2026-11-06, stats.js) — 지역 고르기 → 브리핑 → 지역 비교 → 6개 장 → 다음 할 일
   ===================================================================== */
.st-top { display: grid; gap: var(--s-3); }
.lens { padding: var(--s-4) var(--s-5) var(--s-5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.lens-h { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-3); }
.lens-h b { font-size: var(--fs-s); }
.lens-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.lens-t { display: grid; justify-items: start; gap: 2px; min-height: 84px; padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-s); background: var(--surface-2); color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: border-color .15s, background .15s; }
.lens-t:hover { border-color: var(--brand); }
.lens-t small { font-size: var(--fs-xs); color: var(--ink-3); }
.lens-t b { font-size: var(--fs-l); font-weight: var(--fw-b); line-height: 1.35; }
.lens-t em { font-style: normal; font-size: var(--fs-xs); color: var(--ink-2); }
.lens-t.on { border-color: var(--brand); background: var(--brand-50); box-shadow: inset 0 0 0 1px var(--brand); }
.lens-t.on b, .lens-t.on em { color: var(--brand); }
.lens-near { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; }
.lens-near input { width: 18px; height: 18px; accent-color: var(--brand); }
.lens-near small { color: var(--ink-3); }

.st-brief { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--s-5); align-items: stretch; margin-top: var(--s-5); }
.brief { padding: var(--s-6); border: 1px solid #d6e6cf; border-radius: var(--r); background: linear-gradient(180deg, #f2f8ec 0%, var(--surface) 70%); }
.brief-h h2 { margin: var(--s-3) 0 var(--s-1); font-size: var(--fs-xl); line-height: 1.35; }
.brief-h p { margin: 0; font-size: var(--fs-xs); color: var(--ink-3); }
.brief-l { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; }
.brief-l li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: var(--s-3); align-items: start; padding: var(--s-4) 0; border-top: 1px solid var(--line-2); }
.bf-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: var(--tile-shadow); }
.brief-l small { display: block; font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-3); }
.brief-l p { margin: 2px 0 0; font-size: var(--fs-s); line-height: 1.7; color: var(--ink); word-break: keep-all; }
.brief-l p b { color: var(--brand); }
.brief-l .st-up { color: var(--brand); }
.brief-l .st-dn { color: var(--ink-2); }
.bf-go { align-self: center; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 var(--s-2); border: 0; background: none; font: inherit; font-size: var(--fs-xs); color: var(--ink-3); cursor: pointer; white-space: nowrap; }
.bf-go:hover { color: var(--brand); }

.cmpx { display: flex; flex-direction: column; }
.cmpx .tbl-wrap { flex: 1; }
.cmpx-t th[scope="row"] { font-weight: var(--fw-m); color: var(--ink-2); text-align: left; white-space: nowrap; }
.cmpx-t th small, .cmpx-t thead small { display: block; font-size: var(--fs-xs); font-weight: var(--fw-r); color: var(--ink-3); white-space: normal; }
.cmpx-t td.on, .cmpx-t th.on { background: var(--brand-50); }
.cmpx-t td.on { font-weight: var(--fw-b); color: var(--brand); }
.cmpx-t thead th.on { color: var(--brand); }
.cmpx .viz-note { padding: 0 var(--s-5) var(--s-4); }
.empty-cmp { flex-direction: column; align-items: center; justify-content: center; gap: var(--s-3); padding: var(--s-6); background: var(--surface-2); text-align: center; }
.empty-cmp b { display: block; word-break: keep-all; text-wrap: balance; }
.empty-cmp b { font-size: var(--fs-l); line-height: 1.45; }
.empty-cmp p { margin: var(--s-1) 0 0; font-size: var(--fs-xs); color: var(--ink-2); }

.ch-nav { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ch-nav button { display: inline-flex; align-items: center; gap: var(--s-2); min-height: 40px; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-full); background: var(--surface); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-2); cursor: pointer; }
.ch-nav button:hover { border-color: var(--brand); color: var(--brand); }
.ch-nav i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-style: normal; font-size: var(--fs-xs); }
.st-ch { scroll-margin-top: 90px; }
.ch-h { display: flex; align-items: flex-start; gap: var(--s-4); margin-bottom: var(--s-5); scroll-margin-top: 90px; }
.ch-no { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: #fff; font-size: var(--fs-l); font-weight: var(--fw-num); }
.ch-t { flex: 1; min-width: 0; }
.ch-t h2 { margin: 0; font-size: var(--fs-2xl); line-height: 1.3; letter-spacing: var(--ls-tight); }
.ch-t p { margin: var(--s-2) 0 0; font-size: var(--fs-s); line-height: 1.7; color: var(--ink-2); word-break: keep-all; }
.ch-t p b { color: var(--brand); }
.ch-h > .link { flex: none; align-self: flex-end; }

.tyx th[scope="row"] { text-align: left; font-weight: var(--fw-m); white-space: nowrap; }
.tyx th i { display: inline-block; width: 10px; height: 10px; margin-right: var(--s-2); border-radius: 3px; vertical-align: 1px; }
.okp-b { display: grid; gap: var(--s-3); padding: var(--s-5); }
.okp-big small { display: block; font-size: var(--fs-xs); color: var(--ink-2); }
.okp-big b { display: block; font-size: var(--fs-3xl); font-weight: var(--fw-num); color: var(--brand); line-height: 1.2; }
.okp-big b em { margin-left: 2px; font-style: normal; font-size: var(--fs-l); color: var(--ink-3); }
.okp-big span { font-size: var(--fs-xs); color: var(--ink-3); }
.okp-l { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-2); }
.okp-l li { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-2) 0; border-bottom: 1px solid var(--line-2); font-size: var(--fs-xs); color: var(--ink-2); }
.okp-l li b { color: var(--ink); }
.okp-l li.no, .okp-l li.no b { color: var(--ink-3); font-weight: var(--fw-r); }
.okp-b .btn { justify-content: center; gap: 6px; min-height: 52px; }
.okp-b .tlink { justify-self: center; }
.okp-empty { justify-items: center; text-align: center; padding: var(--s-6) var(--s-5); }
.okp-empty b { font-size: var(--fs-l); line-height: 1.45; }
.okp-empty p { margin: 0; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.6; }

.wtop { list-style: none; margin: 0; padding: var(--s-2) var(--s-5); }
.wtop li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0 var(--s-2); padding: var(--s-2) 0; border-bottom: 1px solid var(--line-2); }
.wtop li:last-child { border-bottom: 0; }
.wtop .r { grid-row: span 2; font-weight: var(--fw-num); color: var(--ink-3); font-size: var(--fs-xs); padding-top: 3px; }
.wtop a { font-weight: var(--fw-b); color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wtop a:hover { color: var(--brand); text-decoration: underline; }
.wtop small { font-size: var(--fs-xs); color: var(--ink-3); }
.nbx tr.on th, .nbx tr.on td { background: var(--brand-50); }
.nbx th[scope="row"] { text-align: left; }
.nbx th a { font-weight: var(--fw-b); color: var(--ink); text-decoration: none; }
.nbx th a:hover { color: var(--brand); text-decoration: underline; }
.nbx th small { margin-left: var(--s-2); font-size: var(--fs-xs); color: var(--brand); font-weight: var(--fw-b); }
.st-fold { margin-top: var(--s-5); }
.st-fold > summary { display: none; }

.st-next h2 { margin: 0 0 var(--s-4); font-size: var(--fs-xl); }
.nx-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); }
.nx-grid a { display: grid; gap: var(--s-1); align-content: start; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.nx-grid a:hover { border-color: var(--brand); transform: translateY(-2px); }
.nx-grid span { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s-2); border-radius: 12px; background: #fff; box-shadow: var(--tile-shadow); }
.nx-grid b { font-size: var(--fs-s); }
.nx-grid small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
@media (max-width: 1024px) {
  .st-brief { grid-template-columns: minmax(0, 1fr); }
  .nx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 2026-11-06 사용자 요청: 데스크톱·태블릿 메뉴에서 '맞춤관리'를 뺀다(메뉴가 넘쳐 '입찰공고'가 가려짐).
   비회원은 오른쪽 [맞춤 알림 받기] 버튼, 로그인 회원은 그 자리의 '맞춤관리' 링크로 들어간다.
   태블릿(1023px 이하)은 버튼이 숨고 메뉴 6개가 한 줄 격자로 모두 보이므로, 휴대폰과 함께 맞춤관리를 그대로 둔다. */
@media (min-width: 1024px) {
  .gnb nav a[data-tab="mine"] { display: none; }
  /* 로그인 회원의 맞춤관리: 연한 초록 알약 + 종 아이콘 + 새 공고 수 배지 (테두리 버튼 대신) */
  .authed .gnb .util .util-mine { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px 0 12px; border-radius: var(--r-full); background: var(--brand-50); color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-b); letter-spacing: -0.01em; text-decoration: none; box-shadow: inset 0 0 0 1px rgba(4, 84, 70, .10); transition: background .15s, box-shadow .15s, color .15s; }
  .authed .gnb .util .util-mine svg { width: 18px; height: 18px; flex: none; }
  .authed .gnb .util .util-mine:hover { background: #e3f4dc; box-shadow: inset 0 0 0 1px rgba(4, 84, 70, .22); }
  .authed .gnb .util .util-mine[aria-current] { background: var(--brand); color: #fff; box-shadow: none; }

}

/* 2026-11-06 사용자 요청: 머리글 계정 버튼의 동그라미(이름 첫 글자) 빼고 '이름님 ▾'만 */
.um-btn { padding: 0 var(--s-2) 0 var(--s-3); gap: 4px; }

/* 맞춤관리 달력: 공고 있는 날은 누를 수 있는 단추, 고른 날은 진초록 */
.mcal-t { display: flex; align-items: center; gap: var(--s-1); }
.mcal-nav { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink-2); font-size: var(--fs-l); line-height: 1; cursor: pointer; }
.mcal-nav:disabled { opacity: .3; cursor: default; }
.mcal-nav:not(:disabled):hover { border-color: var(--brand); color: var(--brand); }
.mcal-g button { position: relative; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: var(--r-xs); background: var(--brand-50); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink); cursor: pointer; transition: background .12s, color .12s; }
.mcal-g button i { position: absolute; right: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--leaf); }
.mcal-g button.st { background: #fff3cc; }
.mcal-g button.st i { background: var(--star); }
.mcal-g button:hover { box-shadow: inset 0 0 0 2px var(--leaf); }
.mcal-g button.today { box-shadow: inset 0 0 0 2px var(--brand); color: var(--brand); }
.mcal-g button.on { background: var(--brand); color: #fff; box-shadow: none; }
.mcal-g button.on i { background: var(--neon); }
.mcal-tip { display: flex; align-items: flex-start; gap: 6px; margin: var(--s-3) 0 0; font-size: var(--fs-xs); line-height: 1.5; color: var(--ink-3); }
.mcal-tip svg { flex: none; margin-top: 2px; }
.mday { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-s); background: var(--brand-50); border: 1px solid #cfe9c6; }
.mday > span { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); color: var(--brand); }
.mday b { font-size: var(--fs-s); }
.mday small { font-size: var(--fs-xs); color: var(--ink-2); }
.mday .btn { gap: 4px; }
#mdList { scroll-margin-top: 110px; }

/* 2026-11-06 사용자 요청: 가입 약관 동의 칸 세로 길이 줄이기(설명 문장 빼고 여백·줄 간격 좁힘) */
.terms { padding: var(--s-3) var(--s-4); }
.tall { align-items: center !important; min-height: 44px; }
.tall b { font-size: var(--fs-s); }
.terms ul { margin-top: var(--s-2); padding-top: var(--s-2); gap: 0; }
.terms li { min-height: 40px; }
@media (max-width: 760px) { .terms li small { display: none; } }   /* 휴대폰: 마케팅 줄 보조 설명은 줄바꿈되므로 숨김 */

/* 2026-11-06 가입 유형 카드: '○○ 회원으로 가입 →' 글 빼고 여백을 넉넉히, 오른쪽 위 화살표 */
.jtype { gap: var(--s-4); margin: var(--s-7) 0 var(--s-6); }
.jt { position: relative; gap: var(--s-1); padding: var(--s-6) var(--s-5); }
.jt li { white-space: nowrap; }
.jt-ic { margin-bottom: var(--s-4); }
.jt b { margin-top: 0; }
.jt > small { margin-top: 2px; }
.jt ul { margin-top: var(--s-5); padding-top: var(--s-5); gap: var(--s-3); }
.jt-ar { position: absolute; top: var(--s-5); right: var(--s-5); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); color: var(--ink-3); transition: background .15s, color .15s, border-color .15s; }
.jt:hover .jt-ar, .jt:focus-visible .jt-ar { background: var(--brand); border-color: var(--brand); color: #fff; }
@media (max-width: 760px) {
  .jtype { gap: var(--s-3); margin: var(--s-5) 0; }
  .jt { padding: var(--s-5); }
  .jt-ic { margin-bottom: var(--s-3); }
  .jt ul { margin-top: var(--s-4); padding-top: var(--s-4); }
  .jt-ar { top: var(--s-4); right: var(--s-4); }
}

/* 공고 출처 배지 · 나라장터 밖 공고 상세 (2026-11-09) */
.tag.srcb { margin: 0; font-weight: var(--fw-b); }
.tag.src-apt { background: #eef3fd; color: #2c4f9e; }
.tag.src-lh { background: #fdf1e7; color: #9a4b0d; }
.tag.src-kwater { background: #e8f6f8; color: #11657a; }
.src-box { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-4); padding: var(--s-5); }
.src-box .sb-l { flex: 1 1 360px; display: grid; gap: var(--s-2); justify-items: start; }
.src-box b { font-size: var(--fs-l); }
.src-box p { margin: 0; font-size: var(--fs-s); line-height: 1.65; color: var(--ink-2); }
.src-box .btn { gap: 6px; }
.src-kv { margin-top: var(--s-4); }
@media (max-width: 760px) { .src-box { padding: var(--s-4); } .src-box .btn { width: 100%; justify-content: center; } }

/* ---------- 썸트리 프로 (2026-11-09) ---------- */
.pro-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: var(--r-xs); background: linear-gradient(135deg, var(--brand), var(--brand-600)); color: var(--neon); font-size: var(--fs-xs); font-weight: var(--fw-num); letter-spacing: .04em; line-height: 1; vertical-align: middle; }
.pro-chip.sm { height: 18px; padding: 0 5px; margin-left: 6px; font-size: var(--fs-xs); letter-spacing: 0; }
.pro-lock { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-5); border-radius: var(--r-l); background: var(--brand-50); border: 1px solid var(--brand-100); }
.pro-lock > div { flex: 1 1 240px; }
.pro-lock b { font-size: var(--fs-l); }
.pro-lock p { margin: var(--s-1) 0 0; font-size: var(--fs-s); color: var(--ink-2); }
.pl-ic { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--surface); color: var(--brand); border: 1px solid var(--brand-100); }
.pl-ic.lg { width: 56px; height: 56px; }
/* 요금 카드 */
.plans { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s-5); align-items: stretch; }
.plan { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); }
.plan.pro { background: linear-gradient(180deg, var(--brand-50), var(--surface) 60%); border: 2px solid var(--brand); box-shadow: 0 30px 60px -40px rgba(4, 84, 70, .55); }
.plan h2 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-num); display: flex; align-items: center; gap: var(--s-2); }
.plan h3 { margin: var(--s-4) 0 0; font-size: var(--fs-s); color: var(--ink-2); font-weight: var(--fw-b); }
.pl-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.pl-free { display: inline-flex; align-items: center; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-full); background: var(--up); color: var(--on-dark); font-size: var(--fs-xs); font-weight: var(--fw-num); }
.pl-price { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.pl-price b { font-size: var(--fs-3xl); font-weight: var(--fw-num); letter-spacing: -0.02em; }
.plan.pro .pl-price b { color: var(--brand); }
.pl-price span { font-size: var(--fs-xs); color: var(--ink-3); }
.pl-for { margin: 0; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.6; }
.pl-cta { display: grid; gap: var(--s-2); }
.pl-cta .btn { width: 100%; justify-content: center; }
.pr-now { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-s); font-weight: var(--fw-b); color: var(--brand); }
.btn.disabled { pointer-events: none; color: var(--ink-3); background: var(--surface-2); }
.pl-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.pl-list > li { display: flex; gap: var(--s-2); align-items: flex-start; font-size: var(--fs-s); line-height: 1.5; }
.pl-list > li > svg { flex: none; color: var(--ok); margin-top: 2px; }
.pro-list > li { gap: var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--line-2); }
.pro-list > li:first-child { border-top: 0; }
.pro-list b { display: block; font-size: var(--fs-l); }
.pro-list small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
.pn { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: var(--neon); font-size: var(--fs-xs); font-weight: var(--fw-num); }
.pn.bonus { background: var(--gold-50); color: var(--gold); border: 1px solid var(--gold); }
/* 왜 매일인가 */
.pro-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-6); }
.pro-why > div { display: grid; gap: 2px; padding: var(--s-5); border-radius: var(--r-l); background: var(--surface-2); border: 1px solid var(--line-2); }
.pro-why b { font-size: var(--fs-2xl); font-weight: var(--fw-num); color: var(--brand); letter-spacing: -0.02em; }
.pro-why b em { font-style: normal; font-size: var(--fs-s); margin-left: 2px; color: var(--ink-3); }
.pro-why span { font-size: var(--fs-s); font-weight: var(--fw-b); }
.pro-why small { font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; }
/* 비교표 */
.pro-cmp { width: 100%; border-collapse: collapse; }
.pro-cmp thead th { font-size: var(--fs-s); color: var(--ink); font-weight: var(--fw-num); text-align: center; }
.pro-cmp thead th:first-child { text-align: left; }
.pro-cmp tbody th { font-size: var(--fs-s); color: var(--ink); font-weight: var(--fw-m); white-space: normal; border-bottom: 1px solid var(--line-2); }
.pro-cmp td { text-align: center; font-size: var(--fs-xs); color: var(--ink-2); white-space: nowrap; }
.pro-cmp .on { background: rgba(238, 251, 234, .6); }
.pro-cmp thead th.on { background: var(--brand-50); color: var(--brand); }
.pro-cmp tr.grp th { padding-top: var(--s-5); font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-b); background: var(--surface); border-bottom: 1px solid var(--line); }
.cmp-y { display: inline-flex; color: var(--ok); }
.cmp-n { color: var(--line-strong); }
.cmp-bonus { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: var(--r-xs); background: var(--gold-50); color: var(--gold); font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-b); vertical-align: middle; }
.pro-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); margin: 0; padding: var(--s-6); border-radius: var(--r-l); background: var(--brand-50); }
.pro-steps li { padding: var(--s-5); border-radius: var(--r-l); background: var(--surface); }
.pro-steps li > span { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: var(--neon); align-items: center; justify-content: center; font-weight: var(--fw-num); }
.pro-steps b { display: block; margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-l); }
.pro-steps p { margin: 0; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.6; }
.pro-page .src { margin-top: var(--s-6); }
/* 머리글 계정 메뉴 · 맞춤관리 */
.um-plan { display: flex; align-items: center; gap: 4px; margin-top: var(--s-2); padding: 6px var(--s-2); border-radius: var(--r-xs); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-b); text-decoration: none; }
.um-plan.on { background: var(--brand-50); color: var(--brand); }
.um-plan .pro-chip.sm { margin: 0 4px 0 0; }
.trial-bar { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-s); background: var(--brand); color: var(--on-dark); font-size: var(--fs-s); text-decoration: none; }
.trial-bar .pro-chip.sm { margin: 0; background: var(--neon); color: var(--brand-600); }
.trial-bar > span:not(.pro-chip) { flex: 1 1 220px; }
.trial-bar .pro-chip { flex: none; }
.trial-bar em { font-style: normal; display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-b); color: var(--neon); }
.trial-bar.off { background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); }
.trial-bar.off em, .trial-bar.off b { color: var(--brand); }
.msum small { display: flex; align-items: center; }
.msum.lk b { color: var(--ink-3); display: flex; align-items: baseline; gap: 2px; }
.msum.lk b svg { margin-left: auto; color: var(--ink-3); align-self: center; }
.md-tabs a svg { margin-right: 4px; vertical-align: -2px; }
.lockview.md-lock { padding: var(--s-4); min-height: 380px; }
.lockview.md-lock .lv-over { bottom: var(--s-5); }
/* 업체 상세 열람 제한 */
.corp-meter { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r-s); background: var(--info-50); border: 1px solid var(--info-line); color: var(--info-ink); font-size: var(--fs-s); }
.corp-meter span { flex: 1 1 260px; }
.corp-lock { position: relative; min-height: 460px; overflow: hidden; padding: var(--s-5); }
.cl-blur { display: grid; gap: var(--s-4); filter: blur(5px); opacity: .6; }
.cl-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-4); }
.cl-row i { height: 64px; border-radius: var(--r-s); background: var(--line-2); }
.cl-over { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-3); padding: var(--s-5); text-align: center; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .92)); }
.cl-over b { max-width: 560px; font-size: var(--fs-xl); line-height: 1.45; }
.cl-over p { max-width: 560px; margin: 0; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.6; }
.cl-over small { font-size: var(--fs-xs); color: var(--ink-3); }
.cl-over .btn-row { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: center; margin-top: var(--s-2); }
@media (max-width: 1024px) { .plans { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .pro-why, .pro-steps { grid-template-columns: 1fr; }
  .pro-steps { padding: var(--s-4); }
  .plan { padding: var(--s-5); }
  .pro-cmp th, .pro-cmp td { padding: var(--s-3) 6px !important; }
  .pro-cmp th:first-child { padding-left: var(--s-3) !important; min-width: 120px; }
  .pro-cmp td { white-space: normal; font-size: var(--fs-xs); }
  .pro-cmp thead th { font-size: var(--fs-xs); white-space: normal; }
  .pro-cmp tbody th { font-size: var(--fs-xs); }
  .cl-over .btn-row .btn { width: 100%; justify-content: center; }
  .corp-lock { min-height: 520px; }
}

/* ---------- 관리자 분석 (2026-11-09) ---------- */
.adm-top { padding: var(--s-6) 0 0; background: var(--sage); border-bottom: 1px solid var(--line); }
.adm-hi { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.adm-hi small { font-size: var(--fs-xs); color: var(--ink-3); }
.adm-hi h1 { margin: var(--s-1) 0 0; font-size: var(--fs-2xl); font-weight: var(--fw-num); letter-spacing: -0.02em; }
.adm-src { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.demo-badge, .real-badge { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--s-3); border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.demo-badge { background: var(--gold-50); color: var(--gold); border: 1px solid var(--gold); }
.real-badge { background: var(--ok-50); color: var(--ok); border: 1px solid var(--ok-line); }
.adm-range { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: var(--r-s); background: var(--surface-2); border: 1px solid var(--line-2); }
.seg a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 var(--s-3); border-radius: 6px; color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-m); text-decoration: none; }
.seg a em { font-style: normal; color: var(--ink-3); }
.seg a.on { background: var(--surface); color: var(--brand); font-weight: var(--fw-b); box-shadow: 0 1px 3px rgba(20, 49, 35, .12); }
.adm-range .dt input { height: 40px; padding: 0 var(--s-2); border: 1px solid var(--line-strong); border-radius: var(--r-s); font: inherit; font-size: var(--fs-xs); background: var(--surface); color: var(--ink); }
.adm-range .tilde { color: var(--ink-3); }
.adm-chk { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: var(--fs-xs); color: var(--ink-2); cursor: pointer; }
.adm-tabs { display: flex; gap: var(--s-5); margin-top: var(--s-5); }
.adm-tabs a { position: relative; padding: var(--s-3) 0; color: var(--ink-2); font-size: var(--fs-s); font-weight: var(--fw-b); text-decoration: none; }
.adm-tabs a em { font-style: normal; color: var(--ink-3); font-weight: var(--fw-m); }
.adm-tabs a.on { color: var(--brand); }
.adm-tabs a.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: var(--r-bar) var(--r-bar) 0 0; background: var(--brand); }
.adm-body { display: grid; gap: var(--s-5); }
.adm-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-3); }
.ak { display: grid; align-content: start; gap: 2px; padding: var(--s-4); border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.ak small { font-size: var(--fs-xs); color: var(--ink-3); }
.ak b { font-size: var(--fs-2xl); font-weight: var(--fw-num); letter-spacing: -0.02em; line-height: 1.2; }
.ak b em { font-style: normal; font-size: var(--fs-xs); color: var(--ink-3); margin-left: 2px; font-weight: var(--fw-m); }
.ak span { font-size: var(--fs-xs); color: var(--ink-3); }
.dl { font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--ink-3); }
.dl.up { color: var(--ok); }
.dl.dn { color: var(--up); }
.adm-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.adm-grid.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.adm-ins ul { list-style: none; margin: 0; padding: 0; }
.adm-ins li { display: flex; gap: var(--s-3); padding: var(--s-4) var(--s-5); border-top: 1px solid var(--line-2); }
.adm-ins li:first-child { border-top: 0; }
.adm-ins b { font-size: var(--fs-s); line-height: 1.5; }
.adm-ins p { margin: 4px 0 0; font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.6; }
.adm-ins p.act { display: flex; gap: 4px; color: var(--brand); font-weight: var(--fw-b); }
.adm-ins p.act svg { flex: none; margin-top: 3px; }
.ins-lv { flex: none; display: inline-grid; place-items: center; height: 26px; padding: 0 8px; border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: var(--fw-num); }
.lv-bad .ins-lv { background: var(--up-50); color: var(--up); }
.lv-chance .ins-lv { background: var(--gold-50); color: var(--gold); }
.lv-good .ins-lv { background: var(--ok-50); color: var(--ok); }
.lv-info .ins-lv { background: var(--info-50); color: var(--info); }
.adm-mem { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-2); padding: var(--s-4) var(--s-5) 0; }
.adm-mem a { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-s); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); text-decoration: none; }
.adm-mem a:hover { background: var(--brand-50); }
.adm-mem i { width: 10px; height: 10px; border-radius: 50%; }
.adm-mem b { font-size: var(--fs-xl); color: var(--ink); font-weight: var(--fw-num); }
.adm-note { margin: 0; padding: var(--s-3) var(--s-5) var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }
.adm-note code { padding: 1px 4px; border-radius: 4px; background: var(--surface-2); font-size: var(--fs-xs); }
.adm-dl { display: grid; grid-template-columns: 1fr auto; gap: 6px var(--s-3); margin: 0; padding: 0 var(--s-5) var(--s-4); font-size: var(--fs-xs); }
.adm-dl dt { color: var(--ink-3); }
.adm-dl dd { margin: 0; font-weight: var(--fw-b); }
.funnel { list-style: none; margin: 0; padding: var(--s-4) var(--s-5) 0; display: grid; gap: var(--s-2); }
.funnel li { display: grid; grid-template-columns: 180px 1fr 72px 56px; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); }
.funnel .fk { color: var(--ink-2); }
.funnel li > div { height: 22px; border-radius: var(--r-xs); background: var(--surface-2); overflow: hidden; }
.funnel .fb { height: 100%; background: linear-gradient(90deg, var(--brand), var(--leaf)); border-radius: var(--r-xs); }
.funnel b { text-align: right; font-size: var(--fs-s); }
.funnel em { font-style: normal; color: var(--ink-3); text-align: right; }
.adm-pages td:first-child { position: relative; }
.adm-pages .bar-in { position: absolute; left: var(--s-5); bottom: 6px; height: 3px; max-width: calc(100% - 48px); border-radius: 2px; background: var(--brand-100); }
.adm-pages td.warn, .adm-mem-t .warn { color: var(--up); font-weight: var(--fw-b); }
.adm-mem-t .ok { color: var(--ok); font-weight: var(--fw-b); }
.adm-mem-t .muted { color: var(--ink-3); }
.adm-mem-t td { vertical-align: middle; font-size: var(--fs-xs); }
.adm-mem-t td b { font-size: var(--fs-s); }
.gr { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border-radius: var(--r-xs); font-size: var(--fs-xs); font-weight: var(--fw-b); white-space: nowrap; }
.gr-admin { background: var(--gold-50); color: var(--gold); }
.gr-pro { background: var(--brand); color: var(--neon); }
.gr-trial { background: var(--brand-50); color: var(--brand); }
.gr-free { background: var(--surface-2); color: var(--ink-2); }
.grant { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.grant .gd { display: inline-flex; gap: 4px; }
.grant input { width: 72px; height: 36px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: var(--r-s); font: inherit; font-size: var(--fs-xs); }
.adm-mtools { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.adm-q { display: flex; gap: var(--s-2); }
.adm-q input { height: 40px; min-width: 220px; padding: 0 var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-s); font: inherit; font-size: var(--fs-xs); }
.um-pop a.um-admin { color: var(--gold); font-weight: var(--fw-b); }
@media (max-width: 1200px) { .adm-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .adm-grid, .adm-grid.g3 { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ak b { font-size: var(--fs-xl); }
  .adm-chk { margin-left: 0; }
  .adm-range { padding: var(--s-3); }
  .adm-range .dt input { width: 140px; }
  .funnel li { grid-template-columns: 1fr 56px 48px; }
  .funnel li > div { grid-column: 1 / -1; grid-row: 2; }
  .adm-q, .adm-q input { width: 100%; min-width: 0; }
  .adm-mem-t th, .adm-mem-t td { padding: var(--s-2) 6px !important; }
  .adm-mem-t td:first-child, .adm-mem-t th:first-child { padding-left: var(--s-3) !important; }
}

/* 홈 머리 출처 묶음: 출처 사이를 점과 여백으로 떼어 놓는다 (2026-11-09) */
.eyebrow.eb-src { gap: 0; }
.eb-src span + span::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 var(--s-3); border-radius: 50%; background: currentColor; opacity: .45; vertical-align: middle; }

/* 나라장터 밖 공고 상세 보강 (2026-11-09) */
.fd-strip { display: flex; gap: var(--s-3); align-items: flex-start; margin-top: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r); background: var(--gold-50); border: 1px solid var(--gold); color: var(--ink); }
.fd-strip svg { flex: none; color: var(--gold); margin-top: 2px; }
.fd-strip b { display: block; font-size: var(--fs-s); }
.fd-strip span { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.6; }
.jx-cols { margin-top: var(--s-4); }
.jx-content { margin: 0; padding: var(--s-4) var(--s-5) var(--s-5); white-space: pre-wrap; font-size: var(--fs-s); line-height: 1.7; color: var(--ink-2); }
.jx-tree p { margin: 0 0 var(--s-2); font-size: var(--fs-xs); line-height: 1.7; color: var(--ink-2); }
.src-kv small.muted { font-size: var(--fs-xs); color: var(--ink-3); margin-left: 4px; }

/* 입찰분석: 출처별 공고 (2026-11-09) */
.st-src { margin-top: var(--s-5); }
.st-src-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: var(--s-5); align-items: center; padding: var(--s-4) var(--s-5) 0; }
.st-src-f { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.st-src-f li { display: grid; gap: 2px; padding: var(--s-3) var(--s-4); border-radius: var(--r-s); background: var(--surface-2); }
.st-src-f b { font-size: var(--fs-s); }
.st-src-f span { font-size: var(--fs-xs); color: var(--ink-2); line-height: 1.6; }
@media (max-width: 760px) { .st-src-in { grid-template-columns: 1fr; padding: var(--s-4); } }
.sb-btns { display: flex; flex-direction: column; gap: var(--s-2); }
@media (max-width: 760px) { .sb-btns { width: 100%; } .sb-btns .btn { width: 100%; justify-content: center; } }

/* 범위 꼬리표 '나라장터만' — 제목 옆에 한 번만 (2026-11-09) */
.scope-tag { display: inline-flex; align-items: center; height: 24px; margin-left: var(--s-2); padding: 0 8px; border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-3); font-size: var(--fs-xs); font-weight: var(--fw-m); letter-spacing: 0; line-height: 1; vertical-align: middle; white-space: nowrap; }
.cov-note { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.cmpx-t tr.cmp-grp th { padding-top: var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); font-weight: var(--fw-b); background: var(--surface); }
.chip[aria-disabled="true"] { opacity: .4; pointer-events: none; }
.recent .nm .tag.srcb { margin-right: 6px; }
@media (max-width: 760px) { .jx-cols aside { order: -1; } }

/* 홈 지도: 제목 줄 오른쪽 범례 · 아래 출처 고르기 (2026-11-09) */
.mc-t { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.mapcard .legend.mc-lg { padding: 0; flex-wrap: nowrap; }
.mapcard .mc-h { display: block; }
.mc-src { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; padding: var(--s-3) 0 0; }
.mc-src .chip { min-height: 36px; padding: 0 var(--s-3); font-size: var(--fs-xs); }
.mc-src .mc-all { margin-left: var(--s-2); }
@media (max-width: 760px) { .mapcard .legend.mc-lg { display: none; } }
.lbl .lbl-src { color: var(--brand); font-weight: var(--fw-b); }

/* 업체 상세 잠금 카드 (2026-11-09 다시 디자인) */
.corp-lock { position: relative; min-height: 520px; padding: var(--s-5); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); overflow: hidden; display: grid; place-items: center; }
.corp-lock .cl-blur { position: absolute; inset: var(--s-5); display: grid; align-content: start; gap: var(--s-4); filter: blur(6px); opacity: .55; pointer-events: none; }
.corp-lock .cl-row i { height: 72px; }
.cl-card { position: relative; width: min(440px, 100%); display: grid; justify-items: center; gap: 0; padding: var(--s-6) var(--s-6) var(--s-5); border-radius: var(--r-l); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 60px -24px rgba(20, 49, 35, .35); text-align: center; }
.cl-ic { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--brand-50); color: var(--brand); }
.cl-meta { margin-top: var(--s-4); font-size: var(--fs-xs); color: var(--ink-3); }
.cl-h { margin: var(--s-1) 0 0; font-size: var(--fs-xl); font-weight: var(--fw-num); letter-spacing: -0.01em; line-height: 1.4; }
.cl-p { margin: var(--s-2) 0 0; font-size: var(--fs-s); color: var(--ink-2); line-height: 1.6; word-break: keep-all; }
.cl-chips { list-style: none; display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: var(--s-4) 0 0; padding: 0; }
.cl-chips li { padding: 4px 10px; border-radius: var(--r-full); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); }
.cl-btns { width: 100%; display: grid; gap: var(--s-2); margin-top: var(--s-5); }
.cl-btns .btn { justify-content: center; }
.cl-note { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--brand); font-weight: var(--fw-b); }
@media (max-width: 760px) { .corp-lock { min-height: 0; padding: 0; border: 0; background: none; } .corp-lock .cl-blur { display: none; } .cl-card { padding: var(--s-5) var(--s-4) var(--s-4); box-shadow: none; } }

/* 관리자 클릭·스크롤 (2026-11-09) */
.adm-iss { list-style: none; margin: 0; padding: 0; }
.adm-iss li { display: grid; grid-template-columns: 96px 1fr; gap: var(--s-3); padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line-2); }
.adm-iss li:first-child { border-top: 0; }
.adm-iss li > b { font-size: var(--fs-xs); color: var(--ink-2); padding-top: 4px; }
.adm-iss p { margin: 0 0 var(--s-2); font-size: var(--fs-xs); line-height: 1.6; }
.adm-iss p .ins-lv { margin-right: 6px; height: 22px; }
.adm-iss p small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.adm-bh td { font-size: var(--fs-xs); }
.sd-bar { display: inline-block; width: 80px; height: 6px; margin-right: 6px; border-radius: 3px; background: var(--surface-2); vertical-align: middle; overflow: hidden; }
.sd-bar i { display: block; height: 100%; background: var(--brand); }
.adm-bh .warn { color: var(--up); font-weight: var(--fw-b); }
@media (max-width: 760px) { .adm-iss li { grid-template-columns: 1fr; gap: 4px; } }
.adm-sum { list-style: none; margin: 0; padding: 0; }
.adm-sum li { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: start; padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line-2); }
.adm-sum li:first-child { border-top: 0; }
.adm-sum b { font-size: var(--fs-s); }
.adm-sum small { display: block; margin-top: 2px; font-size: var(--fs-xs); color: var(--ink-3); }
.adm-sum em { font-style: normal; text-align: right; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.5; white-space: nowrap; }
.adm-sum em b { font-size: var(--fs-s); color: var(--ink); }
.adm-days { border-top: 1px solid var(--line); }
.adm-days summary { padding: var(--s-3) var(--s-5); font-size: var(--fs-xs); font-weight: var(--fw-b); color: var(--brand); cursor: pointer; }
@media (max-width: 760px) { .adm-sum li { grid-template-columns: auto 1fr; } .adm-sum em { grid-column: 2; text-align: left; } }

/* 홈 큰 숫자: 누르면 입찰공고 목록(같은 기간·지역·출처) */
.big-go { display: inline-flex; align-items: baseline; gap: 2px; color: inherit; text-decoration: none; border-radius: var(--r-s); }
.statblock .big .big-go small { margin-left: 4px; }   /* 숫자와 "건"이 겹치지 않게(바깥 .big small의 음수 여백 취소) */
.big-go .bg-arrow { margin-left: 6px; font-size: var(--fs-2xl); color: var(--brand); opacity: .35; transition: transform .15s, opacity .15s; }
.big-go:hover .bg-arrow, .big-go:focus-visible .bg-arrow { opacity: 1; transform: translateX(3px); }
.big-go:hover b { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; text-decoration-color: var(--brand-100); }

/* 요금 화면: 체험 안내 띠 (2026-11-09) */
.trial-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; padding: var(--s-6); border-radius: var(--r-l); background: linear-gradient(135deg, var(--brand-50), var(--surface)); border: 1px solid var(--brand-100); }
.tb-tag { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--r-full); background: var(--brand); color: var(--neon); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.trial-band h2 { margin: var(--s-3) 0 0; font-size: var(--fs-2xl); font-weight: var(--fw-num); letter-spacing: -0.02em; }
.trial-band h2 em { font-style: normal; color: var(--brand); }
.tb-steps { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-5) 0 0; padding: 0; }
.tb-steps li { display: flex; gap: var(--s-2); align-items: flex-start; padding: var(--s-3); border-radius: var(--r-s); background: var(--surface); border: 1px solid var(--line-2); }
.tb-steps li > span { display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-xs); font-weight: var(--fw-num); }
.tb-steps b { display: block; font-size: var(--fs-s); }
.tb-steps small { display: block; font-size: var(--fs-xs); color: var(--ink-3); }
.tb-steps li.now { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.tb-steps li.now > span, .tb-steps li.done > span { background: var(--brand); color: var(--neon); }
.tb-r { display: grid; justify-items: center; gap: var(--s-2); text-align: center; }
.tb-r small { font-size: var(--fs-xs); color: var(--ink-3); }
.plans-h { margin: var(--s-7) 0 var(--s-5); }
.pl-auto { display: flex; align-items: center; justify-content: center; min-height: 52px; border-radius: var(--r-s); background: var(--surface-2); color: var(--ink-3); font-size: var(--fs-s); font-weight: var(--fw-b); }
.pl-auto.on { background: var(--brand-50); color: var(--brand); }
.done-trial { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-3) 0 var(--s-4); padding: var(--s-3) var(--s-4); border-radius: var(--r-s); background: var(--brand-50); color: var(--brand); font-size: var(--fs-s); text-decoration: none; }
.done-trial .pro-chip { flex: none; }
@media (max-width: 1024px) { .trial-band { grid-template-columns: 1fr; } .tb-r { justify-items: stretch; } .tb-r .btn { width: 100%; justify-content: center; } }
@media (max-width: 760px) { .trial-band { padding: var(--s-5) var(--s-4); } .trial-band h2 { font-size: var(--fs-xl); } .tb-steps { grid-template-columns: 1fr; } }
/* 카드 안 막대 목록·도넛: 글자가 카드 테두리에 붙지 않게 안쪽 여백 (2026-11-09) */
.panel > ol.mbars { padding: var(--s-3) var(--s-5) var(--s-4); }
.panel > .donut { padding: var(--s-4) var(--s-5); }
@media (max-width: 760px) { .panel > ol.mbars { padding: var(--s-2) var(--s-4) var(--s-3); } .panel > .donut { padding: var(--s-3) var(--s-4); } }

/* 로그인 후 화면 점검 (2026-11-09) */
.seg3.amt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.star:not(.on) { color: var(--ink-3); background: var(--surface); }
.star:not(.on):hover { color: var(--star); border-color: #f0d48a; }
.mr-tags .tag.srcb { margin: 0; }
@media (max-width: 760px) { .seg3.amt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 휴대폰 회원 화면 검수 (2026-11-09) */
.d-btns input[type=file] { display: none; }                                  /* 사진 찍기 버튼 안 기본 파일 칸 숨김 */
.af.good:has(input:placeholder-shown) .af-ok { opacity: 0; }                  /* 빈칸에는 ✓ 표시 안 함 */
.seg2 input, .seg3 input, .chcards input, .pill input, .sw input { clip: rect(0 0 0 0); clip-path: inset(50%); margin: 0; pointer-events: none; }   /* 숨긴 선택 칸의 점 찌꺼기 */
.chcards .rec { top: 10px; right: 10px; }

/* 메뉴의 맞춤관리는 로그인했을 때만 (2026-11-09 사용자 결정) */
body:not(.authed) .gnb-mine { display: none !important; }
.join-note { display: block; margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--brand); font-weight: var(--fw-b); text-align: center; }

/* 카카오톡 상담 떠 있는 단추(2026-11-10) — 오른쪽 아래, 카카오 노란색 동그라미 */
.kk-float { position: fixed; right: 28px; bottom: 28px; z-index: 41; display: grid; place-items: center; align-content: center; gap: 0; width: 84px; height: 84px; border-radius: 50%; background: #fee500; color: #191919; text-decoration: none; box-shadow: 0 8px 22px rgba(0, 0, 0, .22); transition: transform .15s, box-shadow .15s; }
.kk-float span { font-size: 14px; font-weight: 800; line-height: 1; margin-top: 1px; letter-spacing: -.02em; }
.kk-float:hover, .kk-float:focus-visible { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(0, 0, 0, .28); }
/* 아래에 가입하기·등록하기 막대가 떠 있는 화면에서는 그 위로 올린다 */
body:has(.mg-sticky.show) .kk-float, body:has(.rg-bar) .kk-float { bottom: 110px; }
@media print { .kk-float { display: none; } }
/* PC 카카오톡 상담 안내창 */
.kkdlg { width: min(420px, calc(100% - 32px)); }
.kk-body { text-align: center; }
.kk-qr img { display: block; margin: var(--s-2) auto var(--s-3); width: 200px; height: 200px; border: 1px solid var(--line); border-radius: var(--r-s); padding: 6px; background: #fff; }
.kk-qr p { margin: 0; font-size: var(--fs-s); line-height: 1.6; color: var(--ink-2); }
.kk-qr b { color: var(--ink); font-size: var(--fs-l); }
.kk-or { display: flex; align-items: center; gap: var(--s-3); margin: var(--s-5) 0 var(--s-4); color: var(--ink-3); font-size: var(--fs-xs); }
.kk-or::before, .kk-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.kk-pc { background: #fee500 !important; border-color: #fee500 !important; color: #191919 !important; font-weight: var(--fw-b); }
.kk-note { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--ink-3); }
.kk-tel { margin: var(--s-4) 0 0; font-size: var(--fs-s); color: var(--ink-2); }
.kk-tel a { font-weight: var(--fw-b); color: var(--brand); }

/* 첫 화면이 그려지기 전 잠깐 보이는 안내 글(검색 로봇용) */
/* 새로고침 때 안내문이 번쩍 보였다 사라지지 않게(2026-11-10): 먼저 '불러오는 중'만 보이고, 2.5초가 지나도 화면이 안 뜰 때만 안내문을 보여 준다 */
#app:has(> .seo-pre) { min-height: 72vh; }
#app:has(> .seo-pre)::before { content: "화면을 불러오는 중입니다…"; display: block; padding: 96px 16px 0; text-align: center; color: var(--ink-3); font-size: var(--fs-s); }
.seo-pre { max-width: 760px; color: var(--ink-2); line-height: 1.7; opacity: 0; animation: seoIn .3s 2.5s forwards; }
@keyframes seoIn { to { opacity: 1; } }
.seo-pre h1 { color: var(--brand); font-size: var(--fs-2xl); }
.seo-pre h2 { font-size: var(--fs-l); margin-top: var(--s-5); }
.seo-pre a { color: var(--brand); font-weight: var(--fw-b); }

/* 회원가입 준비 중 안내창 */
#joinPauseDlg p { margin: var(--s-3) 0 0; line-height: 1.7; color: var(--ink-2); }
#joinPauseDlg p b { color: var(--ink); }
#joinPauseDlg .jp-cs { font-size: var(--fs-s); }
#joinPauseDlg .jp-cs a { color: var(--brand); font-weight: var(--fw-b); }

/* ---------- 결제(2026-11-10): 머리글 알림 풍선 · 결제 화면 · 결제 관리 ---------- */
.um-bal { position: relative; display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 12px; background: var(--brand-50); color: var(--brand); font-size: 12px; font-weight: var(--fw-b); white-space: nowrap; }
.um-bal::before { content: ""; position: absolute; left: -4px; top: 50%; width: 8px; height: 8px; background: inherit; transform: translateY(-50%) rotate(45deg); border-radius: 1px; }
.um-bal.warn { background: #fff1e0; color: #b3540a; }
.um-bal.end { background: #fde8e4; color: #b0321c; }
.pl-year { margin: calc(-1 * var(--s-1)) 0 0; font-size: var(--fs-s); color: var(--ink-2); }
.pl-year b { color: var(--ink); }
.pl-year em { font-style: normal; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-xs); background: var(--neon); color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-b); }
.pay-page { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--s-5); align-items: start; }
.pay-main { display: grid; gap: var(--s-5); min-width: 0; }
.pay-side { position: sticky; top: 96px; }
.pay-h { display: flex; align-items: center; gap: var(--s-2); margin: 0 0 var(--s-4); font-size: var(--fs-l); font-weight: var(--fw-num); }
.pay-h span { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand); color: #fff; font-size: var(--fs-xs); }
.pay-opts { display: grid; gap: var(--s-3); }
.pay-opt { display: flex; align-items: center; gap: var(--s-3); min-height: 72px; padding: var(--s-3) var(--s-4); border: 1.5px solid var(--line); border-radius: var(--r-s); background: var(--surface); cursor: pointer; }
.pay-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pay-opt .po-r { flex: none; width: 22px; height: 22px; border: 2px solid #87928a; border-radius: 50%; background: #fff; }
.pay-opt.on { border-color: var(--brand); background: var(--brand-50); }
.pay-opt.on .po-r { border: 7px solid var(--brand); }
.pay-opt:has(input:focus-visible) { outline: 3px solid var(--brand-100); }
.po-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.po-t b { font-size: var(--fs-l); }
.po-t small { color: var(--ink-2); font-size: var(--fs-xs); }
.po-tag { font-style: normal; margin-left: 6px; padding: 2px 8px; border-radius: var(--r-xs); background: var(--neon); color: var(--brand); font-size: var(--fs-xs); font-weight: var(--fw-b); vertical-align: middle; }
.po-p { flex: none; font-size: var(--fs-s); color: var(--ink-2); }
.po-p b { font-size: var(--fs-xl); font-weight: var(--fw-num); color: var(--ink); }
.pay-card { display: grid; gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.pay-card .af.bad .af-i { border-color: #c4472d; background: #fff7f5; }
.pay-card #pcMsg { color: #b0321c; min-height: 1.4em; margin: 0; }
.pay-note { display: flex; gap: var(--s-2); margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-radius: var(--r-s); background: var(--surface-2); color: var(--ink-2); font-size: var(--fs-s); line-height: 1.6; }
.pay-note svg { flex: none; margin-top: 3px; color: var(--brand); }
.pay-sum { margin: 0 0 var(--s-4); display: grid; gap: var(--s-3); }
.pay-sum > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-3); align-items: baseline; }
.pay-sum dt { font-size: var(--fs-xs); color: var(--ink-3); }
.pay-sum dd { margin: 0; font-size: var(--fs-s); line-height: 1.5; }
.pay-sum dd small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.pay-sum .tot { padding-top: var(--s-3); border-top: 1px solid var(--line); }
.pay-sum .tot b { font-size: var(--fs-2xl); font-weight: var(--fw-num); color: var(--brand); }
.pay-agree { align-items: flex-start; margin: 0 0 var(--s-3); font-size: var(--fs-s); line-height: 1.5; }
.pay-safe { margin: var(--s-3) 0 0; font-size: var(--fs-xs); color: var(--ink-3); line-height: 1.6; }
.bill-tbl td small { display: block; color: var(--ink-3); font-size: var(--fs-xs); }
.bill-tbl .acts { white-space: nowrap; text-align: right; }
.bill-tbl .acts .tlink + .tlink { margin-left: var(--s-3); }
.bill-help h3, .vbank h3 { margin: 0 0 var(--s-3); font-size: var(--fs-l); }
.bill-help ul { margin: 0; padding-left: 1.1em; display: grid; gap: var(--s-2); color: var(--ink-2); font-size: var(--fs-s); line-height: 1.6; }
.bill-help b { color: var(--ink); }
.info-list.flat { padding: 0; }
.vbank { border: 1.5px solid var(--brand); }
.vb-no { font-size: var(--fs-xl); letter-spacing: .02em; }
p.muted.pad { padding: var(--s-5); margin: 0; }
@media (max-width: 900px) { .pay-page { grid-template-columns: 1fr; } .pay-side { position: static; } }
@media (max-width: 760px) { .um-bal { height: 22px; padding: 0 7px; font-size: 11px; } .pay-opt { min-height: 64px; } }

/* 결제 내역: 휴대폰에서는 표 대신 한 건씩 카드로 */
.acct-main > .panel { min-width: 0; }
@media (max-width: 760px) {
  .bill-tbl, .bill-tbl tbody { display: block; width: 100%; min-width: 0; }
  .bill-tbl thead { display: none; }
  .bill-tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px var(--s-3); padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--line); }
  .bill-tbl tr:last-child { border-bottom: 0; }
  .bill-tbl td { display: block; padding: 0; border: 0; text-align: left; }
  .bill-tbl td:nth-child(1) { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--ink-3); }
  .bill-tbl td:nth-child(2) { grid-column: 1; }
  .bill-tbl td:nth-child(3) { grid-column: 2; grid-row: 2; font-weight: var(--fw-b); text-align: right; white-space: nowrap; }
  .bill-tbl td:nth-child(4) { grid-column: 1; font-size: var(--fs-xs); color: var(--ink-2); }
  .bill-tbl td:nth-child(5) { grid-column: 2; grid-row: 3; text-align: right; }
  .bill-tbl td.acts { grid-column: 1 / -1; text-align: left; padding-top: var(--s-2); }
  .info-list .ir { grid-template-columns: 84px minmax(0, 1fr); }
}

/* 관리자 결제·환불 */
.adm-tabs em.hot { background: #c4472d; color: #fff; }
.adm-pay tr.rq td { background: #fff7ec; }
.adm-pay .act { white-space: nowrap; text-align: right; }
.adm-pay .act .btn + .btn { margin-left: 6px; }

/* 자료를 못 받았을 때 */
.load-fail { max-width: 420px; margin: 18vh auto; padding: 0 var(--gutter); text-align: center; display: grid; gap: var(--s-3); justify-items: center; }
.load-fail b { font-size: var(--fs-xl); } .load-fail p { color: var(--ink-2); } .load-fail small { color: var(--ink-3); font-size: var(--fs-xs); }
/* 첫 화면: 로그인한 회원의 내 조건 공고 한 줄 */
.home-me { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-5); padding: var(--s-3) var(--s-4); border-radius: var(--r); background: var(--brand); color: var(--on-dark); text-decoration: none; font-size: var(--fs-s); line-height: 1.45; }
.home-me b { font-weight: var(--fw-b); } .home-me em { font-style: normal; font-weight: var(--fw-num); color: var(--neon); font-size: var(--fs-l); }
.home-me .hm-s { display: block; font-style: normal; font-size: var(--fs-xs); color: var(--on-dark-2); }
.home-me strong { flex: none; display: inline-flex; align-items: center; gap: 4px; font-weight: var(--fw-b); font-size: var(--fs-xs); white-space: nowrap; }
.home-me:hover { background: var(--brand-600); }
.pro-now { margin-bottom: var(--s-5); }