/* PlanX 입찰 데스크 — 시각 체계 v4 (2026-09-02 고급화)
   ── 인코딩 채널 배정표 (이 표를 어기면 위계가 무너진다) ──────────────────
     크기      → 우선순위   : 화면당 --fs-hero 1회(경보반)만
     굵기 700  → 시선 1순위 : 큐 그리드에서는 **마감 셀 하나**에만
     --accent  → 행동       : 누를 것에만. 데이터 인코딩·장식·배지 금지
     --invert  → 이상       : 수집 경보·마감 임박. 정상 화면엔 0개
     --ink-1~5 → 수량       : **시각물 내부 전용.** 버튼·배지·테두리·본문 금지
   타이포 4단계: 12.5 / 15 / 20 / 26. 굵기 400·700. 빨강 0회.
   (--fs-micro 11px 는 램프와 같은 예외 — 차트 축·범례 안에서만) */
:root {
  /* 면 3층 — 흰 목록이 "판"으로 떠야 표로 읽힌다 */
  --bg: #eceff3; --surface: #ffffff; --surface-2: #f4f6f9; --surface-3: #e6ebf1;
  /* 선 3층 — 행 30개면 선 하나의 무게가 30번 곱해진다 */
  --line: #d9dee5; --line-strong: #aeb6c0; --rule: #eceff2;
  /* 잉크 3층 (흰 바탕 대비) */
  --text: #14171b;      /* 17.9:1 */
  --text-2: #4d5661;    /*  8.0:1 */
  --muted: #667080;     /*  5.0:1 — 현행 #6b7280은 4.83 */
  /* 행동 — 화면에서 유일한 채도 */
  --accent: #1d4ed8; --accent-ink: #ffffff; --accent-weak: #e8edfb;
  /* 이상 — 유일한 반전 */
  --invert: #12161c; --invert-ink: #f2f5f8;
  /* 수량 램프 — 시각물 전용 */
  --ink-1: #c7ced7; --ink-2: #9aa4b1; --ink-3: #6f7b8a; --ink-4: #454f5c; --ink-5: #12161c;
  /* 타이포 — 이름은 현행 유지(app.js·css 330줄이 쓴다), 값만 4단계로 합친다 */
  --fs-meta: 12.5px; --fs-label: 12.5px; --fs-body: 15px; --fs-title: 20px; --fs-hero: 26px;
  --fs-micro: 11px; --ls-lbl: .05em;
  /* 간격·치수 */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --row-h: 88px;   /* 모바일 3줄 */
  --row: 54px;     /* >=1024 읽기와 조작을 위한 레코드 높이 */
  --head-h: 38px; --rail-w: 224px; --panel-w: 420px; --strip-h: 36px; --tab-h: 64px;
  --r-sm: 4px; --r-md: 6px; --r-lg: 10px;
  --well: inset 0 1px 0 rgba(18,22,28,.06);
  --lift: 0 1px 2px rgba(18,22,28,.06), 0 10px 28px -10px rgba(18,22,28,.22);
  --dur-1: .09s; --dur-2: .18s; --ease: cubic-bezier(.2,.7,.3,1);
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --font-no: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
/* 다크 — 값만 갈아끼운다. 골격이 1px --line 하나에 몰려 있던 구조를
   --line-strong + --surface-2 채움으로 나눈다(현행 다크는 --line 대비 1.26:1로 골격이 소실). */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #0c0f13; --surface: #14181e; --surface-2: #1b2027; --surface-3: #232a33;
  --line: #2a313a; --line-strong: #48525f; --rule: #1e242b;
  --text: #e6eaef; --text-2: #a9b2bd; --muted: #8e99a6;
  --accent: #6f9bff; --accent-ink: #06101f; --accent-weak: #182338;
  --invert: #e6eaef; --invert-ink: #0c0f13;
  --ink-1: #333b45; --ink-2: #4a5563; --ink-3: #6d7886; --ink-4: #a2abb6; --ink-5: #e6eaef;
  --well: inset 0 1px 0 rgba(0,0,0,.45);
  --lift: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.75);
  color-scheme: dark;
}}
:root[data-theme="dark"] {
  --bg: #0c0f13; --surface: #14181e; --surface-2: #1b2027; --surface-3: #232a33;
  --line: #2a313a; --line-strong: #48525f; --rule: #1e242b;
  --text: #e6eaef; --text-2: #a9b2bd; --muted: #8e99a6;
  --accent: #6f9bff; --accent-ink: #06101f; --accent-weak: #182338;
  --invert: #e6eaef; --invert-ink: #0c0f13;
  --ink-1: #333b45; --ink-2: #4a5563; --ink-3: #6d7886; --ink-4: #a2abb6; --ink-5: #e6eaef;
  --well: inset 0 1px 0 rgba(0,0,0,.45);
  --lift: 0 1px 2px rgba(0,0,0,.5), 0 12px 32px -12px rgba(0,0,0,.75);
  color-scheme: dark;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 1ms; --dur-2: 1ms; } }

* { box-sizing: border-box; min-width: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 var(--fs-body)/1.45 var(--font);
  font-variant-numeric: tabular-nums;
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
  overflow-x: hidden;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--accent); }
b { font-weight: 700; }
.muted { color: var(--muted); font-size: var(--fs-label); }
.meta { color: var(--muted); font-size: var(--fs-meta); }
.num { font-size: var(--fs-hero); font-weight: 700; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── S0 스트립 ─────────────────────────────────────────────────────────── */
.strip {
  position: sticky; top: 0; z-index: 20; height: 32px; padding: 0 12px;
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: var(--fs-meta); cursor: pointer;
}
.strip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strip.alert { background: var(--invert); color: var(--invert-ink); border-bottom-color: var(--invert); }
.strip.alert .strip-text { font-weight: 700; }

/* ── 레이아웃 ─────────────────────────────────────────────────────────── */
#app { max-width: 720px; margin: 0 auto; }
.hdr { padding: 18px 16px 8px; }
.hdr h1 { margin: 0; font-size: var(--fs-hero); font-weight: 700; line-height: 1.2; }
.hdr-mid { font-size: var(--fs-title); }
.hdr-label { font-size: var(--fs-title); font-weight: 700; }
.hdr-sub { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-label); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 16px 10px; }
.chip {
  font-size: var(--fs-meta); line-height: 1; padding: 7px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); white-space: nowrap;
}
.chip b { font-weight: 400; margin-left: 2px; }
.chip[aria-pressed="true"] { border-color: var(--accent); color: var(--text); }
.chip-gap { width: 6px; }

/* ── 목록(빽빽) ──────────────────────────────────────────────────────── */
.list { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.group-hdr {
  position: sticky; top: var(--strip-h); z-index: 5;
  padding: 4px 16px; font-size: var(--fs-meta); color: var(--muted);
  background: var(--bg); border-bottom: 1px solid var(--line);
}
.group-hdr.invert { background: var(--invert); color: var(--invert-ink); font-weight: 700; }
/* v4 — 모바일 3줄. 셀 이름은 데스크톱과 같고 배치만 접힌다. */
.row {
  /* 행 높이를 고정하면 마감 셀(값+부제 2줄)이 제목 줄을 덮는다 — auto 로 두고 min-height 로 밀도를 지킨다 */
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: auto auto auto;
  gap: 0 8px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--rule);
  cursor: pointer; min-height: var(--row-h);
}
/* 배지가 기관명을 굶기지 않게 폭을 나눈다 — 감사: 375px 에서 기관명이 5px 로 짜부라졌다.
   배지는 잘리되 2자 약어로 줄이지 않는다(§2.6③: 「적격심사」와 「규격가격동시입찰」을
   앞 두 글자로 자르면 안 된다 — 실제로 996건 오분류 전력이 있다). 전체 라벨은 상세에 있다. */
.row > .l1  { grid-column: 1; grid-row: 1; max-width: 58%; }
.row > .l1 > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.row > .ag  { grid-column: 2; grid-row: 1; min-width: 5em; color: var(--text-2); font-size: var(--fs-label);
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row > .due { grid-column: 3; grid-row: 1; }
.row > .l2  { grid-column: 1 / 4; grid-row: 2; }
.row > .l3  { grid-column: 1 / 4; grid-row: 3; display: flex; align-items: center; gap: 8px; min-width: 0; }
.row .comp, .row .nr { display: none; }          /* 산문(.slot)이 이미 말한다 */
.row:last-child { border-bottom: 0; }
.row.dim { opacity: .6; }
.row.collapsing { max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; border-bottom: 0; }
.row .l1 { display: flex; gap: 5px; align-items: center; font-size: var(--fs-label); overflow: hidden; }
/* ★ 마감 — 큐 그리드에서 굵기 700 을 쓰는 유일한 곳 */
.row .due { font-size: var(--fs-label); text-align: right; white-space: nowrap; color: var(--text); }
.row .due b { font-weight: 700; font-size: var(--fs-body); }
.row .due .run { width: 46px; margin-left: auto; }
.row .due .u { display: block; font-size: var(--fs-micro); font-weight: 400; color: var(--muted); line-height: 1.3; }
.row.hot .due b { background: var(--invert); color: var(--invert-ink); padding: 0 4px; border-radius: var(--r-sm); }
.row .l2 { font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .l3 { font-size: var(--fs-meta); color: var(--muted); }
.row .l3 .slot { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .amt { flex: 0 0 auto; font-size: var(--fs-label); color: var(--text); text-align: right; min-width: 5ch; white-space: nowrap; }
.row .amt.na { font-size: var(--fs-micro); color: var(--muted); }
.row .amt .u, .row .nr .u, .row .comp .u { font-size: var(--fs-micro); color: var(--muted); margin-left: 1px; }
.badge {
  flex: 0 0 auto; font-size: var(--fs-micro); line-height: 1; padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted);
}
.acts { flex: 0 0 auto; display: flex; gap: 4px; }
.act {
  height: 28px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--line);
  font-size: var(--fs-meta); color: var(--text); background: var(--surface); white-space: nowrap;
}
.act.go { border-color: var(--accent); color: var(--accent); }
.act.go.filled, .act.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.act.reason { color: var(--muted); }
.act.reason.first { color: var(--text); border-color: var(--text); }
.row .decided { font-size: var(--fs-meta); color: var(--muted); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tail { padding: 14px 16px 24px; font-size: var(--fs-label); color: var(--muted); }
.tail details summary { cursor: pointer; }
.empty { padding: 28px 16px; font-size: var(--fs-body); }
.empty .meta { display: block; margin-top: 6px; }
.empty a { display: inline-block; margin-top: 10px; }
.preview-label { font-size: var(--fs-micro); color: var(--muted); border: 1px dashed var(--line); padding: 2px 5px; border-radius: 4px; }

/* ── S2 패널 ─────────────────────────────────────────────────────────── */
.panel {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: var(--bg); padding-bottom: 40px;
}
.panel-top {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--surface); border-bottom: 1px solid var(--line); font-size: var(--fs-label);
}
.panel-top .back { font-size: var(--fs-body); }
.panel-top .no { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-meta); color: var(--muted); cursor: copy; }
.panel-top .spacer { flex: 1; }
.panel-top a { font-size: var(--fs-label); text-decoration: none; }
.closed-band { padding: 8px 16px; background: var(--invert); color: var(--invert-ink); font-size: var(--fs-label); font-weight: 700; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; margin: 16px 16px 0; padding: 20px; }
.card h2 { margin: 0 0 10px; font-size: var(--fs-meta); font-weight: 400; color: var(--muted); letter-spacing: .04em; }
.facts .fact { padding: 8px 0; border-top: 1px solid var(--line); font-size: var(--fs-body); }
.facts .fact:first-of-type { border-top: 0; }
.facts .fact .meta { display: block; margin-top: 2px; }
.band { padding: 10px 12px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); font-size: var(--fs-label); font-weight: 700; margin-bottom: 10px; }
.qual { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: var(--fs-label); }
.qual .k { color: var(--muted); }
.tl { list-style: none; margin: 0; padding: 0; }
.tl li { display: grid; grid-template-columns: 16px 1fr auto; gap: 10px; align-items: baseline; padding: 6px 0; font-size: var(--fs-body); color: var(--muted); }
.tl li .dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); align-self: center; }
.tl li.next { color: var(--text); font-weight: 700; }
.tl li.next .dot { background: var(--accent); border-color: var(--accent); }
.tl li.past .dot { background: var(--line); }
.tl li .when { font-size: var(--fs-label); white-space: nowrap; }
.decide { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.decide .act { height: 44px; font-size: var(--fs-body); }
.decide-state { font-size: var(--fs-label); color: var(--muted); display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; }
.reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.note-in { width: 100%; margin-top: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-label); }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: var(--fs-meta); }
.kv .k { color: var(--muted); white-space: nowrap; }
.kv .v { overflow-wrap: anywhere; }
.kv a { overflow-wrap: anywhere; }
details.expert > summary { cursor: pointer; font-size: var(--fs-label); color: var(--muted); list-style: none; }
details.expert > summary::-webkit-details-marker { display: none; }
details.expert > summary::before { content: "▸ "; }
details.expert[open] > summary::before { content: "▾ "; }
details.expert .kv { margin-top: 12px; }
.recorded { padding: 8px 12px; border-radius: 6px; background: var(--invert); color: var(--invert-ink); font-size: var(--fs-label); font-weight: 700; text-align: center; }

/* ── 탭바 ─────────────────────────────────────────────────────────────── */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; height: calc(56px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); display: flex;
  background: var(--surface); border-top: 1px solid var(--line);
}
.tabbtn { flex: 1; font-size: var(--fs-label); color: var(--muted); }
.tabbtn b { font-weight: 400; }
.tabbtn[aria-current="page"] { color: var(--text); font-weight: 700; }

/* ── 시트·토스트 ──────────────────────────────────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 40; background: rgba(0,0,0,.35); display: flex; align-items: flex-end; }
.sheet-body { width: 100%; max-height: 70%; overflow-y: auto; background: var(--surface); border-radius: 12px 12px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
.sheet-title { margin: 0 0 6px; font-size: var(--fs-body); font-weight: 700; }
.sheet table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); margin: 10px 0; }
.sheet th, .sheet td { text-align: left; padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: top; }
.sheet td.r, .sheet th.r { text-align: right; }
.sheet .foot { font-size: var(--fs-meta); color: var(--muted); margin-top: 10px; line-height: 1.6; }
#codeform { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
#codeinput { flex: 1 1 120px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: var(--fs-title); letter-spacing: .2em; }
.btn-accent { background: var(--accent); color: var(--accent-ink); padding: 10px 14px; border-radius: 6px; font-weight: 700; }
.btn-plain { color: var(--muted); padding: 10px 8px; }
.toast {
  position: fixed; left: 50%; bottom: calc(68px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45;
  background: var(--invert); color: var(--invert-ink); padding: 10px 14px; border-radius: 8px; font-size: var(--fs-label);
  display: flex; gap: 12px; align-items: center; max-width: calc(100% - 32px); white-space: nowrap;
}
.toast button { color: var(--invert-ink); text-decoration: underline; font-weight: 700; }
.error-box { margin: 16px; padding: 14px; border: 1px solid var(--line); border-radius: 8px; font-size: var(--fs-label); }
.pull { text-align: center; font-size: var(--fs-meta); color: var(--muted); padding: 8px; }

@media (prefers-reduced-motion: reduce) { .row { transition: none; } }

/* ── v2: 프리셋·시장·설정 ─────────────────────────────────────────────────── */
#presets { padding-bottom: 2px; }
.chip.preset { font-size: var(--fs-label); padding: 8px 12px; }
.preset-note { margin: 0; padding: 0 16px 8px; font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; }
.badge.warn { border-color: var(--muted); color: var(--text); font-weight: 700; }
.mkt-head { padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface); }
.mkt-title { margin: 0 0 8px; font-size: var(--fs-body); font-weight: 700; }
.mkt-head .chips { padding: 0 0 8px; }
.cost-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cost-row label { font-size: var(--fs-label); font-weight: 700; }
.cost-row input { width: 90px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.cost-row .meta { flex: 1 1 240px; line-height: 1.5; }
.row.mkt .l2 { font-size: var(--fs-label); color: var(--muted); white-space: normal; }
.row.mkt .l1 .agency { color: var(--text); font-size: var(--fs-body); font-weight: 700; }
.form label { display: block; margin: 14px 0 6px; font-size: var(--fs-label); font-weight: 700; }
.form input { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; }
.form .chips { padding: 0; }
.row-inline { display: flex; gap: 8px; align-items: center; }
.row-inline input { flex: 1; }
.form .meta { line-height: 1.6; margin: 6px 0 0; }
@media (min-width: 1024px) { .row.mkt .l2 { display: block; } }

/* ── v3: 로그인 · 온보딩 · 판정 배지 ─────────────────────────────────────────
   기존 체계를 그대로 따른다 — 색 토큰 7개, 포인트색은 행동에만, 빨강 0.
   판정은 색이 아니라 **글자 굵기와 반전**으로 구분한다(✔ 굵게 / ◐ 흐리게 / ✖ 반전). */
.gate {
  position: fixed; inset: 0; z-index: 60; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  overflow-y: auto;
}
.gate-card {
  width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 28px 22px;
}
.gate-card.wide { max-width: 560px; max-height: calc(100vh - 40px); overflow-y: auto; }
.gate-brand { margin: 0 0 18px; font-size: var(--fs-meta); color: var(--muted); letter-spacing: .04em; }
.gate-title { margin: 0 0 6px; font-size: var(--fs-title); font-weight: 700; line-height: 1.35; }
.gate-sub { margin: 0 0 20px; font-size: var(--fs-label); color: var(--muted); line-height: 1.55; }
.gate-card label { display: block; margin: 14px 0 5px; font-size: var(--fs-label); color: var(--muted); }
.gate-card input {
  width: 100%; padding: 11px 12px; font: inherit; color: var(--text);
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px;
}
.gate-card .btn-accent { width: 100%; margin-top: 18px; }
.gate-err { margin: 12px 0 0; padding: 9px 11px; font-size: var(--fs-label); font-weight: 700;
            background: var(--invert); color: var(--invert-ink); border-radius: 6px; }
.gate-foot { margin: 20px 0 0; font-size: var(--fs-meta); color: var(--muted); line-height: 1.6; }

.onb-step { margin: 0 0 10px; font-size: var(--fs-meta); color: var(--muted); letter-spacing: .08em; }
.onb-nav { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.onb-nav .spacer { flex: 1; }
.srch { max-height: 210px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; margin-top: 6px; }
.srch:empty { display: none; }
.srch-row { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
            padding: 9px 11px; border-bottom: 1px solid var(--line); font-size: var(--fs-label); }
.srch-row:last-child { border-bottom: 0; }
.srch-row:hover, .srch-row:focus-visible { background: var(--bg); }
.chip.picked { border-color: var(--text); }
.pv { border: 1px solid var(--line); border-radius: 8px; padding: 16px; background: var(--bg); }
.pv-num { margin: 0 0 6px; font-size: var(--fs-title); font-weight: 700; line-height: 1.3; }
.pv-grid { display: grid; grid-template-columns: auto 1fr; gap: 5px 14px; margin-top: 12px; font-size: var(--fs-label); }
.pv-grid .k { color: var(--muted); }
.pv-rows { margin-top: 6px; }
.pv-row { display: flex; flex-direction: column; gap: 1px; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--fs-label); }

/* 내 조건 ↔ 전체 전환 — 대표 지시의 "체크 풀면 전체" */
.scopebar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 16px 8px; }
.switch { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-label); cursor: pointer; }
.switch input { width: 17px; height: 17px; accent-color: var(--accent); margin: 0; }
.scope-sum { flex: 1; min-width: 0; font-size: var(--fs-meta); color: var(--muted);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 접힌 것 — 미탐이 보이는 유일한 창 */
.folded { margin: 0 16px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.folded summary { padding: 9px 12px; font-size: var(--fs-label); color: var(--muted); cursor: pointer; }
.folded[open] summary { border-bottom: 1px solid var(--line); color: var(--text); }
.fold-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 12px;
            font-size: var(--fs-label); border-bottom: 1px solid var(--line); }
#folded-body .meta { display: block; padding: 9px 12px; line-height: 1.6; }

/* 판정 배지 — 색이 아니라 굵기·반전으로 구분한다(포인트색은 행동에만) */
.vb { font-size: var(--fs-meta); padding: 1px 6px; border-radius: 3px; white-space: nowrap; }
.vb.ok  { border: 1px solid var(--text); color: var(--text); font-weight: 700; }
.vb.rev { border: 1px solid var(--line); color: var(--muted); }
.vb.no  { background: var(--invert); color: var(--invert-ink); }
.g-ok  { font-weight: 700; }
.g-rev { color: var(--muted); }
.g-no  { font-weight: 700; }
.band-ok  { border-color: var(--text); }
.band-rev { color: var(--muted); }
.band-no  { background: var(--invert); color: var(--invert-ink); border-color: var(--invert); }
.qual.ref { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--line); }
.qual.ref .k, .qual.ref span { color: var(--muted); }
.form label { display: block; margin: 14px 0 5px; font-size: var(--fs-label); color: var(--muted); }
.form input { width: 100%; padding: 10px 11px; font: inherit; color: var(--text);
              background: var(--bg); border: 1px solid var(--line); border-radius: 6px; }
.row-inline { display: flex; gap: 8px; align-items: center; }
.row-inline input { flex: 1; }
@media (min-width: 1024px) { .gate-card { padding: 34px 30px; } }
.onb-nav .btn-plain { white-space: nowrap; }
.btn-plain { padding: 9px 12px; border-radius: 6px; }


/* ===========================================================================
   v4 [1단계] 전역 반응 · 뒷면 정리 — 마크업 변경 0
   감사 지적: hover 규칙 1개 · :active 0개 · #pwbox input 무스타일 ·
              .sheet 데스크톱 분기 없음(1920에서 시트가 전체 폭으로 올라옴)
   =========================================================================== */

/* 폼 요소 전역 — 어떤 선택자에도 안 걸리던 #pwcur/#pwnew 를 여기서 받는다 */
input, select, textarea {
  font: inherit; color: var(--text); background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 10px 12px;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
input:hover, select:hover, textarea:hover { border-color: var(--line-strong); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-weak);
}
input::placeholder { color: var(--muted); }
input[type="checkbox"] { padding: 0; border: 0; background: none; box-shadow: none; }

/* 누른 티 · 마우스 반응 (§7 체감 속도) */
@media (hover: hover) {
  .row:hover { background: var(--surface-2); }
  .chip:hover { border-color: var(--line-strong); color: var(--text); }
  .act:hover { border-color: var(--line-strong); background: var(--surface-3); }
  .act.go:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .tabbtn:hover { color: var(--text); }
  .strip:hover { background: var(--surface-2); }
  .folded summary:hover { color: var(--text); }
  .srch-row:hover { background: var(--surface-2); }
}
.act:active, .chip:active, .btn-accent:active, .btn-plain:active, .tabbtn:active { transform: translateY(1px); }
.act, .chip, .btn-accent, .btn-plain, .tabbtn {
  transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.row { transition: background var(--dur-1) var(--ease), opacity var(--dur-2), max-height .3s; }
.row.selected { background: var(--surface-3); }

/* 면·선 3층 적용 — 다크에서 골격이 사라지던 것을 여기서 갚는다 */
.group-hdr { background: var(--surface-2); border-bottom-color: var(--line); }
.row { border-bottom-color: var(--rule); }
.list { border-color: var(--line); }
.card { box-shadow: var(--well); }
.badge, .chip, .act { background: var(--surface-2); }
.vb.ok { border-color: var(--line-strong); }
.sheet-body { box-shadow: var(--lift); }

/* 시트 데스크톱 분기 — 1920에서 전체 폭으로 올라오던 것 */
@media (min-width: 768px) {
  .sheet { align-items: center; justify-content: center; padding: 24px; }
  .sheet-body {
    width: min(560px, 100%); max-height: min(78vh, 720px);
    border-radius: var(--r-lg); padding: 22px 24px;
  }
}

/* 토스트 넘침 — nowrap + flex 기본 min-width:auto 로 알약 밖으로 나가던 것 */
.toast { white-space: normal; min-width: 0; line-height: 1.4; }
.toast > :first-child { min-width: 0; overflow-wrap: anywhere; }
.toast button { flex: 0 0 auto; white-space: nowrap; }

/* 로딩 스켈레톤 — 2단계에서 app.js 가 쓴다 */
.sk-row { height: var(--row-h); border-bottom: 1px solid var(--rule); padding: 14px 16px;
          display: flex; flex-direction: column; justify-content: center; gap: 9px; }
.sk-bar { height: 10px; border-radius: 3px;
          background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
          background-size: 400% 100%; animation: sk 1.4s var(--ease) infinite; }
.sk-bar.w1 { width: 42%; } .sk-bar.w2 { width: 78%; } .sk-bar.w3 { width: 30%; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.list.stale { opacity: .45; pointer-events: none; transition: opacity var(--dur-2) var(--ease); }
@media (prefers-reduced-motion: reduce) { .sk-bar { animation: none; } }

/* 라벨 질감 — 12.5px 가 '명판'으로 읽히게 */
.card h2, .group-hdr, .onb-step, .gate-brand { letter-spacing: var(--ls-lbl); }
.num, .row .due, .row .l3 .amt, .ro-v { font-variant-numeric: tabular-nums; }


/* ===========================================================================
   v4 [3+5단계] 공유 열 축 · 좌측 레일
   감사 치명 #1 — .row 마다 독립 grid + .due{nowrap} 이라 열 모서리가 행마다 달랐다.
   해법은 "하나의 grid로 묶기"가 아니라 **모든 행이 같은 트랙을 쓰고
   auto/max-content 트랙이 0개인 것**이다. 가변 트랙은 제목 minmax(0,1fr) 하나뿐.
   =========================================================================== */

/* 열 머리 = 정렬 컨트롤. 모바일에서는 없다(정렬은 필터 시트로). */
.thead { display: none; }

/* 판정 배지 — 사실 표지는 면(.badge), 판정은 테두리(.vb). 굵기는 마감이 독점한다. */
.vb.ok { border: 1px solid var(--text); color: var(--text); font-weight: 400; }
.vb i { font-style: normal; }

/* ── 1024+ : 레일 + 목록. 여기서 열 축이 생긴다 ─────────────────────────── */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }

  /* 하단 탭바 → 좌측 레일 (DOM 이동 0 — position/flex-direction 만 바꾼다) */
  .tabbar {
    top: var(--strip-h); bottom: 0; left: 0; right: auto; width: var(--rail-w);
    height: auto; flex-direction: column; align-items: stretch; gap: 2px; padding: var(--s2);
    border-top: 0; border-right: 1px solid var(--line); background: var(--surface-2); overflow-y: auto;
  }
  .tabbtn {
    flex: 0 0 auto; height: 34px; padding: 0 var(--s3); text-align: left;
    border-radius: var(--r-md); display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-label);
  }
  .tabbtn[aria-current="page"] { background: var(--accent-weak); color: var(--text); font-weight: 700; }

  #app { max-width: none; margin: 0 0 0 var(--rail-w); width: calc(100% - var(--rail-w)); padding-bottom: 0; }
  .panel { left: var(--rail-w); right: 0; top: var(--strip-h); bottom: 0; box-shadow: var(--lift); }
  .panel-top .back { display: inline; }

  /* 열 축 — .thead 와 .row 가 같은 트랙을 쓴다 */
  .thead, .row {
    display: grid; align-items: center; gap: 0 6px; padding: 0 12px;
    grid-template-columns: 176px 96px minmax(0, 1fr) 56px 52px 80px 76px 124px;
    grid-template-rows: none;
  }
  .thead {
    position: sticky; top: var(--strip-h); z-index: 6; height: var(--head-h);
    background: var(--surface-2); border-bottom: 1px solid var(--line-strong);
    font-size: var(--fs-micro); letter-spacing: var(--ls-lbl); color: var(--muted);
  }
  .thead > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .thead .r { text-align: right; }
  .thead button { cursor: pointer; }
  .thead [aria-sort]:not([aria-sort="none"]) { color: var(--accent); }
  .thead [aria-sort="ascending"]::after  { content: " ▲"; font-size: 8px; }
  .thead [aria-sort="descending"]::after { content: " ▼"; font-size: 8px; }

  .row { height: var(--row); min-height: 0; contain: layout style; }
  .row > *, .row .l3 > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .row > .l1 { grid-column: 1; grid-row: 1; max-width: none; }
  .row > .ag { grid-column: 2; grid-row: 1; font-size: var(--fs-meta); }
  .row > .l2 { grid-column: 3; grid-row: 1; font-size: var(--fs-label); }
  /* 마감 셀 = [값] 위, [자] 아래. flex 로 두면 3px 자가 눌려 사라진다. */
  /* 마감 셀 = [값] 위, [자] 아래. .run 이 DOM 첫 자식이라 명시 배치가 필요하다. */
  .row > .due { grid-column: 7; grid-row: 1; display: grid; grid-template-rows: auto 3px;
                align-content: center; justify-items: end; gap: 3px; }
  .row .due b   { grid-row: 1; line-height: 1.1; }
  .row .due .run { grid-row: 2; width: 100%; margin: 0; }
  .row .due .u { display: none; }                    /* 부제는 모바일 전용 */
  .row > .l3 { display: contents; }                  /* 자식이 곧 열이 된다 */
  .row .slot { display: none; }                      /* 산문은 모바일 전용 */
  .row .comp { display: block; grid-column: 4; grid-row: 1; text-align: right; font-size: var(--fs-meta); color: var(--text-2); }
  .row .nr   { display: block; grid-column: 5; grid-row: 1; text-align: right; font-size: var(--fs-meta); color: var(--text-2); }
  .row .amt  { grid-column: 6; grid-row: 1; }
  .row .acts { grid-column: 8; grid-row: 1; display: flex; justify-content: flex-end; gap: 3px; }
  .row .decided { grid-column: 4 / 8; grid-row: 1; text-align: right; }
  .row .act { height: 24px; padding: 0 7px; font-size: var(--fs-micro); opacity: .5; }
  .row:hover .act, .row:focus-within .act, .row.selected .act { opacity: 1; }
  .row.selected { box-shadow: inset 3px 0 0 var(--accent); }

  .vb em { display: none; }                          /* 데스크톱은 글리프만 */
  .vb { border: 0; padding: 0 2px 0 0; }
  .vb.no { padding: 1px 5px; }

  .group-hdr { top: calc(var(--strip-h) + var(--head-h)); padding-left: 12px; }
  .hdr, .chips, .scopebar, .preset-note { padding-left: 16px; }
  .panel-empty { display: flex; align-items: center; justify-content: center; height: 60vh;
                 color: var(--muted); font-size: var(--fs-label); text-align: center; padding: 0 24px; }
}

/* ── 1600+ : 상세를 상시로 붙인다. 그 아래에서는 오버레이 ──────────────── */
@media (min-width: 1600px) {
  :root { --rail-w: 216px; --panel-w: 480px; }
  #app   { width: calc(100% - var(--rail-w) - var(--panel-w)); }
  .panel { left: auto; width: var(--panel-w); border-left: 1px solid var(--line); box-shadow: none; }
  .panel-top .back { display: none; }
}
@media (min-width: 1920px) { :root { --panel-w: 520px; } }

@media (prefers-reduced-motion: reduce) { .row { transition: none; } }


/* ===========================================================================
   v4 [6단계] 행 시각물 — 인라인 커스텀 프로퍼티 + 순수 CSS
   행당 SVG 는 400행에서 비싸다. CSS 가 없으면 무시되므로 되돌려도 숫자만 남는다.
   ⚠️ 전부 과거 사실이다. 0~100 점수·신호등·"가능성" 게이지는 하나도 만들지 않는다(§3-7).
   =========================================================================== */

/* A. 마감 자(ruler) — 진행바가 아니다. 눈금 7칸 = 7일, 채워진 만큼이 '지나간 시간'.
      7일 초과는 채우지 않고 숫자만 D-n 으로 쓴다(클램프를 시각으로 속이지 않는다). */
.run {
  display: block; height: 3px; margin-bottom: 2px; border-radius: 1px; overflow: hidden;
  background: repeating-linear-gradient(90deg, var(--ink-1) 0 1px, transparent 1px calc(100% / 7));
}
.run::before {
  content: ""; display: block; height: 100%; border-radius: 1px;
  width: calc(var(--u, 0) * 100%); background: var(--ink-3);
}
.row.hot .run::before { background: var(--invert); }

/* B. 과거경쟁 콤 — 5칸 로그. 선형 막대는 무의미하다(중앙 9, 최대 5,045).
      ★ 단독응찰은 기회가 아니라 대개 수의시담이다(§2.5②) → 채운 막대가 아니라 '빈 칸'으로 그린다. */
.comb {
  display: inline-block; width: 33px; height: 8px; margin-right: 5px; vertical-align: -1px;
  background: repeating-linear-gradient(90deg, var(--ink-1) 0 5px, transparent 5px 7px);
}
.comb::before {
  content: ""; display: block; height: 100%;
  width: calc(var(--comp, 0) * 7px - 2px);
  background: repeating-linear-gradient(90deg, var(--ink-4) 0 5px, transparent 5px 7px);
}
.row[data-solo] .comb { background: none; box-shadow: inset 0 0 0 1px var(--line-strong); }
.row[data-solo] .comb::before { display: none; }
.lg-solo { display: inline-block; width: 14px; height: 8px; vertical-align: -1px;
           box-shadow: inset 0 0 0 1px var(--line-strong); }

/* ===========================================================================
   v4 [5단계] 레일 필터 — 칩 13개를 레일이 흡수한다(정렬 4개는 이미 열 머리로 갔다)
   =========================================================================== */
#rail-filters { display: none; }

@media (min-width: 1024px) {
  #filters { display: none; }                       /* 칩 바 → 레일로 흡수 */
  #rail-filters { display: block; margin-top: var(--s4); }
  .rail-sec { margin: var(--s3) 0 var(--s1); padding: 0 var(--s3);
              font-size: var(--fs-micro); letter-spacing: .06em; color: var(--muted); }
  .rail-i {
    width: 100%; height: 30px; padding: 0 var(--s3); display: flex; align-items: center;
    justify-content: space-between; gap: var(--s2); border-radius: var(--r-md);
    font-size: var(--fs-label); color: var(--muted); text-align: left;
    transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
  }
  .rail-i .n { font-size: var(--fs-micro); color: var(--muted); font-variant-numeric: tabular-nums; }
  .rail-i[aria-pressed="true"] { background: var(--accent-weak); color: var(--text); }
  .rail-i[aria-pressed="true"] .n { color: var(--text); }
  .legend {
    margin: var(--s4) 0 0; padding: var(--s3) var(--s3) 0; border-top: 1px solid var(--line);
    font-size: var(--fs-micro); line-height: 1.65; color: var(--muted);
  }
  .legend b { font-weight: 400; color: var(--text-2); }
}
@media (hover: hover) { .rail-i:hover { background: var(--surface-3); color: var(--text); } }


/* ===========================================================================
   v4 [4단계] 경보반 — 화면에서 유일하게 큰 것 1개
   1순위는 크기가 아니라 '최상단 단독 배치'가 만든다. --fs-hero 는 26px 고정이다.
   =========================================================================== */
.noc {
  padding: var(--s4) var(--s4) var(--s3);
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: grid; gap: 2px;
}
.noc-lbl { margin: 0; font-size: var(--fs-micro); letter-spacing: var(--ls-lbl); color: var(--muted); }
.noc-val { margin: 0; font-size: var(--fs-hero); font-weight: 700; line-height: 1.15; color: var(--text); }
.noc[data-near="1"] .noc-val { color: var(--text); }
.noc[data-near="1"] .noc-lbl::after { content: " · 임박"; }
.noc-line { margin: 4px 0 0; font-size: var(--fs-label); color: var(--text-2); }
.noc-line .num-sm { font-size: var(--fs-title); font-weight: 700; color: var(--text); }
.noc-line .hdr-label { font-size: var(--fs-label); font-weight: 400; }
.noc-wall { color: var(--muted); }
.noc-wall:not(:empty)::before { content: " · "; }
.noc .hdr-sub { margin: 2px 0 0; font-size: var(--fs-micro); color: var(--muted); line-height: 1.5; }
/* 이상 — 큰 값을 밀어내고 경보가 들어앉는다. 색이 아니라 반전이다. */
.noc[data-alarm="1"] { background: var(--invert); color: var(--invert-ink); border-bottom-color: var(--invert); }
.noc[data-alarm="1"] .noc-lbl, .noc[data-alarm="1"] .noc-line,
.noc[data-alarm="1"] .hdr-sub, .noc[data-alarm="1"] .num-sm { color: var(--invert-ink); }
.noc[data-alarm="1"] .noc-val { display: none; }
.noc-alarm { margin: 0; font-size: var(--fs-title); font-weight: 700; line-height: 1.25; color: var(--invert-ink); }
@media (min-width: 1024px) { .noc { padding-left: 16px; } }


/* ===========================================================================
   v4 [7단계] 모바일 필터 세그먼트 — 칩 8개(375px 3줄·113.5px) → 두 줄·80px
   ★ 성격이 다르면 모양도 달라야 한다.
     「범위」    = 고르는 것(상호배타) → 트랙 하나, 채워진 칸은 언제나 1개
     「걸러 보기」= 켜고 끄는 것(토글)  → 떨어진 알약 + 켜짐 네모
     둘을 같은 알약으로 만들면 사용자는 "몇 개까지 눌러도 되나"를 매번 시험해 봐야 한다.
   ★ 가로 스크롤 0(전사 §5-2): 트랙은 flex 라 폭이 모자라면 라벨이 말줄임될 뿐 옆으로 밀지 않는다.
     320px 에서도 페이지 본문은 밀리지 않는다 — 줄어드는 것은 셀 안의 글자다.
   ★ 색은 :root 에만 있다. --accent 는 '활성 필터'(=누를 것의 상태)에만 쓴다 — §1 허용 범위.
     --ink-1~5(시각물 전용)·--fs-micro(차트 축·범례 전용)·--invert(이상 신호)는 여기서 0회.
   ★ ≥1024 는 위쪽 @media 의 #filters{display:none} 가 이긴다(아이디 1,0,0 > .filterbar 0,1,0).
     레일이 같은 data-* 로 같은 일을 한다.
   =========================================================================== */
.filterbar { display: grid; gap: 6px; padding: 6px 16px 8px; }

/* 범위 — 하나의 트랙. 칸막이는 머리카락 선 하나뿐이고 선택은 '면'으로 말한다.
   레일의 .rail-i[aria-pressed=true] 와 같은 표현이라, 좁은 화면과 넓은 화면이
   같은 것을 같은 방식으로 말하게 된다. */
.seg {
  display: flex; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
}
.seg-i {
  flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 3px;
  display: flex; align-items: center; justify-content: center; gap: 3px;
  border-left: 1px solid var(--line);
  font-size: var(--fs-meta); line-height: 1; color: var(--muted);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.seg-i:first-child { border-left: 0; border-radius: var(--r-md) 0 0 var(--r-md); }
.seg-i:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }
.seg-i > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seg-i > b { flex: 0 0 auto; font-weight: 400; font-variant-numeric: tabular-nums; }
.seg-i[aria-pressed="true"] { background: var(--accent-weak); color: var(--text); }

/* 걸러 보기 — 떨어진 알약 셋. 앞의 작은 네모가 켜짐/꺼짐을 말한다.
   .switch 의 체크박스와 같은 어법이라 "이건 여러 개 켤 수 있다"가 모양으로 읽힌다. */
.togs { display: flex; gap: 6px; }
.tog {
  flex: 1 1 0; min-width: 0; height: 28px; padding: 0 8px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  font-size: var(--fs-meta); line-height: 1; color: var(--muted);
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.tog::before {
  content: ""; flex: 0 0 auto; width: 9px; height: 9px;
  border: 1px solid var(--line-strong); border-radius: 2px;
}
.tog > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tog > b { flex: 0 0 auto; font-weight: 400; font-variant-numeric: tabular-nums; }
.tog[aria-pressed="true"] { color: var(--text); border-color: var(--accent); }
.tog[aria-pressed="true"]::before { background: var(--accent); border-color: var(--accent); }

/* 초점 링은 안쪽에 그린다 — 바깥(:focus-visible 전역 offset 2px)이면 이웃 칸을 덮는다.
   트랙에 overflow:hidden 을 걸어 자르는 방식은 링을 지워 버리므로 쓰지 않는다. */
.seg-i:focus-visible, .tog:focus-visible { outline-offset: -2px; }
@media (hover: hover) { .seg-i:hover, .tog:hover { color: var(--text); } }
.seg-i:active, .tog:active { background: var(--surface-3); }


/* ===========================================================================
   v4 [7단계·C] 상세 판독부 — .dh 머리띠 + .readout 계기 3칸 + 낙찰가 밴드
   카드 안의 카드를 없앤다: .dh 는 .panel-top 과 같은 자격의 머리띠지 카드가 아니다.
   ⚠️ 밴드는 0~100 축의 '가능성' 게이지가 아니다 — 축은 **과거 낙찰가 ÷ 추정가**다(§3-7).
   ⚠️ 색은 전부 :root 토큰이다. 미디어쿼리 안에서 새로 정의하는 색 0개.
   =========================================================================== */
.dh { padding: 14px 16px 12px; background: var(--surface); border-bottom: 1px solid var(--line); }
.dh-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--fs-label); color: var(--muted); }
.dh-t { margin: 6px 0 12px; font-size: var(--fs-title); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.dh > .meta { margin: 8px 0 0; }
.closed-band a { color: inherit; }

/* 계기 3칸 — 상자를 만들지 않고 세로 실선으로만 나눈다(여백이 격을 만든다).
   위계는 크기 하나로만 준다: 제목 20/700 이 1순위, 값은 20/400 이다(굵기를 겹쳐 쓰지 않는다). */
.readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.ro { min-width: 0; padding: 10px 10px 0 0; }
.ro + .ro { padding-left: 12px; border-left: 1px solid var(--line); }
.ro-k { display: block; font-size: var(--fs-meta); color: var(--muted); letter-spacing: var(--ls-lbl); }
.ro-v { display: block; margin-top: 2px; font-size: var(--fs-title); font-weight: 400; line-height: 1.2;
        font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.ro-v .ro-x { font-size: var(--fs-meta); color: var(--muted); margin-left: 2px; }
.ro-u { display: block; margin-top: 3px; font-size: var(--fs-meta); color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }

/* 밴드 범례 — --fs-micro 는 여기와 축 안에서만 쓴다(인코딩 채널 배정표의 유일한 예외) */
.pb-lg { display: flex; flex-wrap: wrap; gap: 3px 12px; margin: 0 0 5px; font-size: var(--fs-micro); color: var(--muted); }
.pb-lg i { display: inline-block; width: 14px; height: 0; vertical-align: 3px; margin-right: 5px; border-top: 2px solid var(--ink-5); }
.pb-lg .l25 i { border-top: 1px dashed var(--ink-3); }
.pb-lg .lct i { border-top: 1px dashed var(--ink-4); }

/* 밴드 본체. 좌표는 app.js 의 bandX() 가 만든다 — CSS 에 좌표를 두지 않는다.
   max-width 300px = viewBox 폭. 좁은 화면에서만 비율을 지키며 줄어든다(글자가 늘어지지 않는다). */
.pband { display: block; width: 100%; max-width: 300px; height: 48px; overflow: visible; }
.pband .axl { stroke: var(--line-strong); }
.pband .axt { font-size: var(--fs-micro); fill: var(--muted); }
.pband .hxl { stroke: var(--ink-2); stroke-width: 2; }      /* 빗금(마진 폭) */
.pband .s25 { stroke: var(--ink-3); stroke-dasharray: 2 2; }  /* 하위 25% */
.pband .smd { stroke: var(--ink-5); stroke-width: 2; }        /* 실측 중앙 */
.pband .sct { stroke: var(--ink-4); stroke-dasharray: 3 3; }  /* 원가율 = 가정 */
.pband .clip { fill: var(--ink-3); }                          /* 축 밖 값을 붙인 자리 표식 */
/* 이상 — 경고를 색이 아니라 반전과 방향으로 낸다. 정상 화면에는 이 규칙이 0번 걸린다. */
.pband[data-loss="1"] .hxl { stroke: var(--invert); }

.pb-cap { margin: 2px 0 0; }
.pb-num { margin: 8px 0 0; font-size: var(--fs-body); }
.pb-num .meta { display: block; margin-top: 2px; }


/* ===========================================================================
   v4 [7단계 D] 시장 규모 대비 열린 문 — 시장 표 (SPEC_v4 §4-D)
   규모(과거)와 기회(현재)는 **다른 열**에 둔다. 한 트랙에 겹치면 "큰 시장 = 기회"로 읽힌다.
   실측이 그 반대다: 규모 1위(1,063억)의 열린 자리는 5건, 3위(316억)는 31건이다.
   막대는 제곱근 비례 — 원 데이터가 3,903:1(0.27억~1,063억)이라 선형이면 중앙값이 0.15px 다.
   ⚠️ 둘 다 과거·현재의 **사실**이다. 0~100 축의 '가능성' 형태는 여기에 없다(§3-7).
   ⚠️ 색은 CSS 로만 준다 — SVG 프레젠테이션 속성의 fill="var(--…)" 은 브라우저별로 안 먹는다.
   =========================================================================== */

.szbar, .opdots { display: block; flex: 0 0 auto; }
.szbar rect  { fill: var(--ink-3); }   /* --ink-* 는 시각물 내부 전용(§1) */
.opdots circle { fill: var(--ink-4); }

/* 모바일 3줄 — 셀 이름은 데스크톱과 같고 배치만 접힌다(큐와 같은 문법).
   auto/max-content 트랙 0개. 그래야 숫자 열의 오른쪽 모서리가 행마다 흩어지지 않는다. */
.row.mkt {
  grid-template-columns: minmax(0, 1fr) 38px 74px;
  grid-template-rows: auto auto auto;
  column-gap: 10px;
}
.row.mkt > .l1    { grid-column: 1; grid-row: 1; max-width: none; }
.row.mkt > .msz   { grid-column: 2; grid-row: 1; }
.row.mkt > .mszv  { grid-column: 3; grid-row: 1; }
.row.mkt > .mop   { grid-column: 1 / 4; grid-row: 2; }
.row.mkt > .mfact { grid-column: 1 / 3; grid-row: 3; }
.row.mkt > .amt   { grid-column: 3; grid-row: 3; }
.list:not(.has-margin) .row.mkt > .mfact { grid-column: 1 / 4; }

/* 품목명은 이 표의 이름표지 시선 1순위가 아니다 — 700 은 행마다 하나(열린 자리)만 쓴다(§1) */
.row.mkt .l1 .agency { font-weight: 400; }
.row.mkt .mszv  { font-size: var(--fs-label); color: var(--text-2); text-align: right;
                  white-space: nowrap; font-variant-numeric: tabular-nums; }
.row.mkt .mfact { font-size: var(--fs-meta); color: var(--muted); white-space: normal; }
.row.mkt .amt   { font-size: var(--fs-label); color: var(--text); text-align: right; }
.row.mkt .u     { font-size: var(--fs-micro); color: var(--muted); margin-left: 1px; }

/* 기회 — 이 표에서 굵기 700 을 쓰는 유일한 곳.
   숫자를 점보다 앞에 고정폭으로 두어 점의 왼쪽 모서리를 모든 행에서 맞춘다. */
.row.mkt .mop      { display: flex; align-items: center; gap: 6px; min-width: 0; }
.row.mkt .mop .lbl { font-size: var(--fs-meta); color: var(--muted); }
.row.mkt .mop .v   { flex: 0 0 34px; text-align: right; font-size: var(--fs-label);
                     color: var(--muted); font-variant-numeric: tabular-nums; }
.row.mkt .mop .v b { font-size: var(--fs-body); font-weight: 700; color: var(--text); }

/* 열 머리 — 큐의 #thead 와 같은 문법이되 트랙은 이 표의 것이다(다른 표다).
   프로즈 5줄을 지운 대신 열 이름이 그 말을 한다. 모바일에는 없다. */
.mkt-cols { display: none; }

@media (min-width: 1024px) {
  .row.mkt .l1 .agency { font-size: var(--fs-label); }   /* 34px 한 줄 — 큐의 공고명과 같은 급 */
  .row.mkt .mop .lbl   { display: none; }                /* 열 머리가 대신 말한다 */
  .row.mkt .mfact      { white-space: nowrap; }

  /* .mkt-cols 와 .row.mkt 가 **같은 트랙**을 쓴다 — auto/max-content 트랙 0개.
     큐(#thead + .row)와는 다른 표이므로 축도 따로다. 각 표 안에서는 하나다. */
  .mkt-cols, .row.mkt {
    display: grid; align-items: center; gap: 0 6px; padding: 0 12px;
    grid-template-columns: minmax(0, 1fr) 38px 88px 120px minmax(0, 1.25fr);
    grid-template-rows: none;
  }
  .list.has-margin .mkt-cols, .list.has-margin .row.mkt {
    grid-template-columns: minmax(0, 1fr) 38px 88px 120px minmax(0, 1.25fr) 92px;
  }
  .mkt-cols {
    position: sticky; top: var(--strip-h); z-index: 6; height: var(--head-h);
    background: var(--surface-2); border-bottom: 1px solid var(--line-strong);
    font-size: var(--fs-micro); letter-spacing: var(--ls-lbl); color: var(--muted);
  }
  .mkt-cols > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mkt-cols .r  { text-align: right; }

  .row.mkt > .l1    { grid-column: 1; grid-row: 1; }
  .row.mkt > .msz   { grid-column: 2; grid-row: 1; }
  .row.mkt > .mszv  { grid-column: 3; grid-row: 1; }
  .row.mkt > .mop   { grid-column: 4; grid-row: 1; }
  .row.mkt > .mfact { grid-column: 5; grid-row: 1; }
  .row.mkt > .amt   { grid-column: 6; grid-row: 1; }
  .list:not(.has-margin) .row.mkt > .mfact { grid-column: 5; grid-row: 1; }
}


/* ===========================================================================
   v4 [7단계 E] 7일 마감 분포 스파크 — 상세 미선택 자리(≥1600 도킹 패널)
   서버 집계가 아니라 **지금 화면에 있는 행**의 다음 행동 시각이다. 모수는 캡션이 인쇄한다(§9).
   0~100 축의 '가능성' 게이지가 아니다(§3-7). --accent·--invert·빨강 0회.
   =========================================================================== */
.panel-idle { padding: var(--s4); }
.idle-h { margin: 0 0 var(--s3); font-size: var(--fs-body); font-weight: 400; color: var(--text); }

/* 봉우리 원수치가 밴드 위로 나가므로 margin-top 으로 자리를 비워 둔다 */
.spark { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px;
         align-items: end; height: 40px; margin-top: var(--s4);
         border-bottom: 1px solid var(--line-strong); }
.spark i { height: calc(var(--h) * 100%); min-height: 1px; background: var(--ink-2); }
.spark i.pk { background: var(--ink-5); position: relative; }
.spark i.pk::after { content: attr(data-n); position: absolute; bottom: 100%; left: 50%;
                     transform: translateX(-50%); font-size: var(--fs-micro); color: var(--text); }

/* 축 — 칸과 같은 14트랙(auto/max-content 트랙 0개). 주말 칸에 옅은 띠를 깔아
   "0 = 결측"으로 읽히지 않게 한다. 공휴일은 아직 구분하지 못한다(§6 영업일 달력 미도입) —
   그 사실은 캡션이 말한다. */
.spark-x { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 1px; margin-top: 3px;
           font-size: var(--fs-micro); letter-spacing: var(--ls-lbl); color: var(--muted); }
.spark-x span { padding: 1px 0; text-align: center; border-radius: 2px; }
.spark-x span.we { background: var(--surface-3); }

.spark-cap { margin: var(--s2) 0 0; font-size: var(--fs-meta); line-height: 1.6; color: var(--muted); }
.spark-cap + .spark-cap { margin-top: var(--s1); }
.spark-cap b { color: var(--text-2); }

/* 계기 둘 — 이 패널의 시선 1순위는 스파크다. 계기는 본문 크기(15px)까지만 쓴다. */
.gauge { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3);
         margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line); }
.gauge dt { font-size: var(--fs-meta); color: var(--muted); }
.gauge dd { margin: 2px 0 0; font-size: var(--fs-body); color: var(--text); }
.gauge dd .u { font-size: var(--fs-meta); color: var(--muted); margin-left: 3px; }
.gauge dd .hint { display: block; margin-top: 3px; font-size: var(--fs-meta); line-height: 1.5;
                  color: var(--muted); font-variant-numeric: normal; overflow-wrap: anywhere; }

.panel-hint { margin: var(--s4) 0 0; padding-top: var(--s3); border-top: 1px solid var(--line);
              font-size: var(--fs-meta); color: var(--muted); line-height: 1.6; }

/* ===========================================================================
   v4 [7단계 · F] 판정 축 스택 .axes — 상세 「내가 되나」 판독부
   한 칸 = 판정 축 하나. 채움 = 확정 통과 / 빈칸 = 확인 필요 / 반전 = 확인된 불일치.
   참고 축은 칸을 만들지 않는다 — 서버가 결합에서 뺀 축이라 통과·불통과가 성립하지 않는다.
   채널 배정표: --ink-4 는 시각물 내부 전용 램프, --invert 는 이상 신호. --accent 0회 · 빨강 0회.
   글자를 쓰지 않으므로 타이포 단계도 --fs-micro 도 건드리지 않는다.
   =========================================================================== */
.axes { display: inline-flex; gap: 2px; margin-left: 6px; vertical-align: 1px; }
.axes i { width: 6px; height: 6px; border: 1px solid var(--line-strong); border-radius: 1px; }
.axes i.on { background: var(--ink-4); border-color: var(--ink-4); }
/* 확인된 불일치 — 실측 589공고(5.5%)에서 실제로 난다. 채움과 헷갈리면
   "못 들어감"이 "아직 모름"으로 둔갑한다(§3-8). 반전 채움 + 안쪽 1px 고리로
   solid 채움과 **형태부터** 다르게 만든다. 자리 폭·간격은 그대로다.
   이 칸이 뜨는 화면은 이미 .band-no 로 반전을 쓰고 있다 — 정상 화면에 반전을 새로 늘리지 않는다. */
.axes i.no { background: var(--invert); border-color: var(--invert); box-shadow: inset 0 0 0 1px var(--surface); }
/* 축이 6개를 넘을 때만 나오는 접힘 칸. 지금은 구조상 도달하지 않는다(실측 최대 6).
   넓은 칸 하나로 접고 **가장 나쁜 값**을 쓴다 — 잘라내지 않으며 접힌 축 이름은 title 에 남는다. */
.axes i.grp { width: 10px; }
/* 시트 하단 액션 줄 — 인라인 style="margin-top:12px" 을 대신한다 */
.sheet-act { margin-top: 12px; }

/* v5 — 업무 공간. RPC·데이터 속성·1600px 상세 도킹 계약은 유지한다. */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px;
  background: var(--surface); transform: translateY(-160%); border: 1px solid var(--accent); }
.skip-link:focus { transform: translateY(0); }
.strip { height: var(--strip-h); padding-inline: 20px; }
.desk-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 28px 24px 20px; }
.desk-eyebrow { font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.desk-heading p { margin: 6px 0 0; font-size: 15px; color: var(--text-2); }
.desk-settings { flex-shrink: 0; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; }
.desk-settings span { margin-left: 12px; }
.rail-brand, .rail-caption { display: none; }
.noc { margin: 0 16px 16px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 12px; gap: 6px; }
.noc-lbl { font-size: 12.5px; letter-spacing: 0; }
.noc-val .num { font-size: 36px; font-weight: 400; letter-spacing: -.045em; }
.noc-line .num-sm { font-size: 15px; font-weight: 400; }
.noc .hdr-sub { font-size: 12.5px; max-width: 72ch; }
.noc[data-alarm="1"] { border-color: var(--invert); }
.scopebar { padding: 0 20px 12px; min-height: 42px; }
.switch { min-height: 32px; }
.scopebar .chip { border-radius: 6px; min-height: 34px; color: var(--text-2); }
.preset-note:empty { display: none; }
.list { border-color: var(--line); }
.row { transition: background var(--dur-1) var(--ease); }
.row .l2 { line-height: 1.5; }
.group-hdr { padding-block: 9px; background: var(--surface-2); }
.empty { padding: 40px 24px; line-height: 1.7; }
.empty .meta { max-width: 60ch; margin-top: 8px; }
.empty a { display: inline-block; margin-top: 16px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; text-decoration: none; }
.panel { background: var(--surface); }
.panel-top { min-height: 52px; padding: 12px 20px; }
.panel-idle { padding: 28px 24px; }
.panel-idle .idle-h { font-size: 20px; line-height: 1.4; letter-spacing: -.03em; }
.panel-idle .spark { margin-top: 32px; height: 64px; }
.panel-hint { padding-top: 20px; }
.sheet-body { border: 1px solid var(--line); }
.sheet-title { margin-bottom: 12px; font-size: 20px; font-weight: 400; }
.tabbar { height: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
.tabbtn { text-decoration: none; display: flex; align-items: center; justify-content: center; line-height: 1.4; }
.tabbtn[aria-current="page"] { color: var(--accent); font-weight: 400; }
body { padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }

/* 로그인: 브랜드 설명과 작업 진입을 분리하되 모바일은 폼을 먼저 읽는다. */
#gate { padding: 32px; gap: clamp(40px, 7vw, 120px); align-items: center; justify-content: center; overflow-y: auto; }
.gate-intro { display: none; }
#gate .gate-card { width: 100%; max-width: 420px; padding: 36px; border-radius: 16px;
  box-shadow: 0 16px 48px -32px rgba(0,0,0,.2); }
#gate .gate-title { font-size: 24px; font-weight: 400; letter-spacing: -.04em; line-height: 1.4; margin-bottom: 12px; }
#gate .gate-brand { margin: 0 0 28px; color: var(--text-2); font-size: 12px; }
#gate .gate-sub { line-height: 1.7; margin-bottom: 28px; }
#gate .gate-card input { background: var(--surface); border-color: var(--line-strong); min-height: 48px; border-radius: 7px; }
#gate .gate-card label { color: var(--text-2); margin-top: 18px; }
#gate .gate-card .btn-accent { min-height: 48px; margin-top: 24px; border-radius: 7px; font-weight: 400; }
#gate .gate-foot { border-top: 1px solid var(--rule); margin-top: 26px; padding-top: 20px; line-height: 1.8; }
@media (min-width: 900px) {
  .gate-intro { display: block; width: min(440px, 42vw); }
  .desk-wordmark { font-size: 24px; letter-spacing: -.06em; margin: 0 0 64px; }
  .desk-wordmark span { font-size: 12px; color: var(--muted); letter-spacing: 0; padding-left: 14px; margin-left: 14px; border-left: 1px solid var(--line-strong); }
  .intro-kicker { font-size: 12.5px; color: var(--muted); }
  .gate-intro h2 { font-size: clamp(26px, 2.7vw, 38px); line-height: 1.45; font-weight: 400; letter-spacing: -.055em; margin: 18px 0; }
  .intro-copy { font-size: 14px; line-height: 1.9; color: var(--text-2); }
  .intro-steps { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--line); }
  .intro-steps li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--text-2); }
  .intro-steps span { font-family: var(--font-no); margin-right: 24px; color: var(--muted); }
  .intro-foot { font-size: 11px; color: var(--muted); margin-top: 26px; }
}
@media (min-width: 1024px) {
  body { padding-bottom: 0; }
  .tabbar { height: auto; padding: 20px 12px; gap: 4px; background: var(--surface); }
  .rail-brand { display: flex; align-items: center; gap: 12px; padding: 4px 12px 28px; font-size: 20px; letter-spacing: -.04em; }
  .rail-brand small { display: block; font-size: 11px; margin-top: 3px; letter-spacing: 0; color: var(--muted); }
  .brand-monogram { width: 34px; height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 17px; }
  .brand-monogram span { font-size: 12px; }
  .rail-caption { display: block; font-size: 11px; color: var(--muted); padding: 0 12px; margin: 0 0 8px; }
  .tabbtn { height: 42px; justify-content: flex-start; padding: 0 14px; border-radius: 7px; gap: 10px; }
  .tabbtn::before { content: ''; width: 5px; height: 5px; border: 1px solid currentColor; border-radius: 1px; opacity: .65; }
  .tabbtn[aria-current="page"] { background: var(--accent-weak); color: var(--accent); font-weight: 400; }
  .tabbtn[aria-current="page"]::before { background: currentColor; }
  #rail-filters { margin-top: 20px; padding-top: 6px; border-top: 1px solid var(--line); }
  .rail-sec { margin-top: 18px; margin-bottom: 6px; }
  .rail-i { height: 34px; }
  .legend { line-height: 1.8; }
  .desk-heading { padding: 28px 28px 22px; }
  .noc { margin: 0 24px 20px; padding: 24px 28px; }
  .scopebar { padding: 0 28px 14px; }
  .preset-note { padding-left: 28px; }
  .thead, .row { grid-template-columns: 142px 88px minmax(130px, 1fr) 55px 48px 70px 62px 120px; gap: 0 8px; padding-inline: 20px; }
  .row { height: auto; min-height: var(--row); padding-block: 10px; }
  .row .act { opacity: 1; height: 30px; padding: 0 7px; border-radius: 5px; }
  .row > .l2 { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .row .l1 { gap: 4px; }
  .thead { font-size: 11px; border-bottom-color: var(--line); }
  .group-hdr { padding-left: 20px; }
  .row.mkt { padding-block: 10px; }
  .hdr { padding: 8px 28px 24px; }
}
/* 1024~1199: 보조 과거통계 열을 접어 공고 제목과 결정 버튼을 보존한다. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .thead, .row:not(.mkt) { grid-template-columns: 116px 74px minmax(120px, 1fr) 0 0 62px 54px 116px; column-gap: 4px; padding-inline: 12px; }
  .thead > :nth-child(4), .thead > :nth-child(5), .row:not(.mkt) .comp, .row:not(.mkt) .nr { visibility: hidden; }
}
@media (min-width: 1600px) { :root { --rail-w: 224px; --panel-w: 420px; } }
@media (min-width: 1920px) { :root { --panel-w: 460px; } }
@media (max-width: 767px) {
  #gate { padding: 20px; }
  #gate .gate-card { padding: 28px 24px; }
  .desk-heading { padding: 20px 16px 16px; }
  .desk-heading p { font-size: 13px; }
  .desk-settings { display: none; }
  .noc { padding: 20px; }
  .noc-val .num { font-size: 30px; }
  .scopebar { padding-inline: 16px; gap: 8px; }
  .scope-sum { flex-basis: 100%; order: 3; }
  .scopebar .chip { margin-left: auto; }
  .row { padding-block: 14px; }
  .row > .l1 { max-width: 140px; }
  .tabbtn { font-size: 11px; text-align: center; padding: 4px 2px; }
  .tabbtn b { margin-left: 3px; }
  .panel-top { padding-inline: 16px; }
}

/* v6 — 공고를 읽고 판단하는 순서: 공고·조건 → 마감 → 금액 → 결정. */
.account-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 24px; background: var(--surface); border-bottom: 1px solid var(--line); }
.account-bar strong { display: block; color: var(--text); font-size: 14px; font-weight: 400; overflow-wrap: anywhere; }
.account-bar [data-bind="accountRole"] { display: block; color: var(--text-2); font-size: 11px; margin-top: 2px; }
.account-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.account-bar > .btn-plain { color: var(--accent); font-size: 12px; }
.account-actions .btn-plain { color: var(--accent); padding: 8px; font-size: 12px; }
#account-menu { position: relative; font-size: 13px; }
#account-menu summary { cursor: pointer; list-style: none; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 6px; }
#account-menu summary { display: grid; grid-template-columns: minmax(0, 1fr) 12px; column-gap: 12px; max-width: 260px; }
#account-menu summary strong, #account-menu summary [data-bind] { grid-column: 1; }
#account-menu summary > [aria-hidden] { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.feedback-group > h2 { padding: 16px 24px; margin: 0; font-size: 16px; font-weight: 400; background: var(--surface-2); border-top: 1px solid var(--line); }
.answer-group > h2 { font-size: 22px; background: var(--surface); }
.group-note { padding: 0 24px; font-size: 13px; line-height: 1.7; }
.feedback-ongoing > summary { cursor: pointer; padding: 18px 24px; font-size: 14px; }
.account-dropdown { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; width: 180px;
  padding: 6px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--lift); border-radius: 8px; }
.account-dropdown button { display: block; width: 100%; padding: 12px; text-align: left; color: var(--text); border-radius: 4px; }
.account-dropdown button:hover { background: var(--surface-2); }
.notice-doors { display: grid; gap: 5px; width: 100%; }
.door-warning { padding: 6px 8px; border-left: 3px solid var(--text); background: var(--surface-2); color: var(--text); font-size: 12px; white-space: normal; }
.door-next, .margin-hint { color: var(--text-2); font-size: 12px; line-height: 1.6; white-space: normal; }
.doors-error { padding: 12px 24px; color: var(--text); font-size: 13px; }
.feedback-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px; font-size: 13px; }
.feedback-card { padding: 20px 24px; border-top: 1px solid var(--line); background: var(--surface); }
.feedback-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--text-2); font-size: 12px; }
.feedback-title { display: block; margin-top: 12px; text-align: left; font-size: 16px; line-height: 1.5; color: var(--accent); overflow-wrap: anywhere; }
.feedback-title:hover { text-decoration: underline; text-underline-offset: 4px; }
.feedback-facts { margin: 12px 0; font-size: 14px; line-height: 1.7; color: var(--text); }
.match-note, .outcome-error { padding: 10px 12px; border: 1px solid var(--line-strong); color: var(--text); font-size: 13px; line-height: 1.7; }
.outcome-question { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; font-size: 14px; }
.outcome-question .act, .outcome-form .act { height: 40px; }
.outcome-saved { font-size: 13px; color: var(--text); }
.outcome-details summary { width: fit-content; cursor: pointer; color: var(--accent); font-size: 13px; padding: 8px 0; }
.outcome-form { display: grid; gap: 12px; max-width: 460px; padding-block: 12px; }
.outcome-form label { display: grid; gap: 6px; color: var(--text-2); font-size: 13px; }
.outcome-form input, .outcome-form select { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--text); background: var(--surface); }
.recap-section { padding-top: 24px; background: var(--surface-2); }
.recap-section > h2 { margin: 0; padding: 0 24px; font-size: 20px; font-weight: 400; }
.recap-section > p { padding: 0 24px; }
.recap-basis { font-size: 13px; line-height: 1.8; color: var(--text); }
.recap-section > .act { margin: 12px 24px 24px; }
@media (max-width: 600px) {
  .account-bar { padding: 10px 16px; flex-wrap: wrap; }
  .account-actions { margin-left: auto; }
  #account-menu summary { max-width: 185px; }
  .togs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feedback-group > h2, .group-note { padding-inline: 16px; }
  .feedback-card { padding: 18px 16px; }
  .feedback-toolbar { padding: 12px 16px; align-items: flex-start; }
  .outcome-question > span { flex-basis: 100%; }
  .recap-section > h2, .recap-section > p { padding-inline: 16px; }
}
:root { --head-h: 42px; }
.noc { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  margin: 0; padding: 26px 24px 18px; border: 0; border-radius: 0; gap: 16px; }
.queue-heading h1 { margin: 0; color: var(--text); font-size: 24px; font-weight: 400; letter-spacing: -.04em; }
.queue-heading h1 span { margin-left: 8px; font-variant-numeric: tabular-nums; }
.queue-heading .hdr-label { margin: 6px 0 0; color: var(--text-2); font-size: 13px; font-weight: 400; }
.next-deadline { display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; color: var(--text-2); font-size: 13px; }
.next-deadline strong { color: var(--text); font-size: 16px; font-weight: 400; }
.noc[data-near="1"] .next-deadline { border-color: var(--text); }
.noc[data-alarm="1"] { background: var(--surface); color: var(--text); }
.noc-alarm { flex-basis: 100%; padding: 12px; background: var(--invert); border-radius: 6px; font-size: 14px; font-weight: 400; }
.scopebar { background: var(--surface); padding: 0 24px 12px; margin: 0; gap: 10px; }
.switch { color: var(--text); font-size: 14px; }
.scope-sum { color: var(--text-2); }
.scopebar .chip { color: var(--accent); border-color: var(--line-strong); }
.queue-guide { background: var(--surface); padding: 0 24px 14px; color: var(--text-2); font-size: 12.5px; }
.queue-guide summary { cursor: pointer; width: fit-content; padding: 3px 0; text-decoration: underline; text-underline-offset: 3px; }
.queue-guide[open] summary { margin-bottom: 12px; }
.queue-guide .preset-note, .queue-guide .hdr-sub, .queue-guide .noc-wall { padding: 0; margin: 8px 0; color: var(--text-2); font-size: 13px; line-height: 1.6; }
.queue-guide .noc-wall::before { content: none; }
.sort-options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.filterbar { border-top: 1px solid var(--line); background: var(--surface); }
.group-hdr { color: var(--text-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 8px; }
.notice-row { background: var(--surface); border-bottom: 1px solid var(--line); }
.notice-row.dim { opacity: 1; background: var(--surface-2); }
.notice-row .change-note { color: var(--text); font-size: 12px; padding: 3px 7px; border: 1px solid var(--line-strong); border-radius: 4px; }
.notice-row .notice-info { display: flex; flex-direction: column; align-items: flex-start; gap: 9px;
  overflow: visible; white-space: normal; min-width: 0; }
.notice-row .l1 { max-width: none; overflow: visible; flex-wrap: wrap; gap: 6px; }
.notice-row .l2 { display: block; color: var(--text); font-size: 16px; line-height: 1.5;
  white-space: normal; overflow-wrap: anywhere; letter-spacing: -.025em; }
.notice-row .notice-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 5px 10px; color: var(--text-2); font-size: 12.5px; line-height: 1.5; }
.notice-meta > span + span::before { content: '·'; margin-right: 10px; color: var(--muted); }
.notice-meta .badge { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.notice-row .vb { display: inline-flex; gap: 5px; padding: 4px 7px; border-radius: 4px;
  font-size: 12px; line-height: 1.3; border: 1px solid var(--line-strong); }
.notice-row .vb em { display: inline; font-style: normal; }
.notice-row .vb.ok { color: var(--surface); background: var(--text); border-color: var(--text); }
.notice-row .vb.rev { color: var(--text); background: var(--surface); border: 1px dashed var(--text-2); }
.notice-row .slot { display: none; }
.notice-row .amt { color: var(--text); font-size: 15px; }
.notice-row .amt::before { content: '추정가'; display: block; color: var(--text-2); font-size: 11px; margin-bottom: 3px; }
.notice-row .due { padding: 8px; background: var(--surface-2); border-radius: 6px; }
.notice-row .due b { font-size: 16px; font-weight: 400; line-height: 1.4; }
.notice-row .due .run { display: none; }
.notice-row .due .u { display: block; margin-top: 3px; color: var(--text-2); font-size: 11px; }
.notice-row.hot .due { background: var(--invert); color: var(--invert-ink); }
.notice-row.hot .due b { padding: 0; color: inherit; background: none; }
.notice-row.hot .due .u { color: inherit; }
.notice-row .acts { gap: 5px; }
.notice-row .act { height: 36px; padding: 0 10px; opacity: 1; font-size: 12px; background: var(--surface); border-color: var(--line-strong); }
.notice-row .act.go { color: var(--accent); border-color: var(--accent); background: var(--accent-weak); }
.notice-row.selected { background: var(--accent-weak); box-shadow: inset 3px 0 var(--accent); }
.notice-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
@media (hover: hover) {
  .notice-row:hover { background: var(--surface-2); }
  .notice-row:hover .l2 { color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
  .notice-row .act:hover { border-color: var(--text); background: var(--surface-3); }
  .notice-row .act.go:hover { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
}
@media (min-width: 1024px) {
  .thead, .row.notice-row { grid-template-columns: minmax(0, 1fr) 92px 90px 152px; column-gap: 18px; padding-inline: 24px; }
  .thead { color: var(--text-2); font-size: 12px; }
  .thead > :nth-child(4) { visibility: visible; }
  .row.notice-row { min-height: 120px; padding-block: 18px; grid-template-rows: auto; }
  .notice-row .notice-info { grid-column: 1; grid-row: 1 / 3; }
  .row.notice-row > .due { grid-column: 2; grid-row: 1; display: block; text-align: center; }
  .notice-row .amt { grid-column: 3; grid-row: 1; text-align: right; }
  .notice-row .acts { grid-column: 4; grid-row: 1; flex-wrap: wrap; }
  .notice-row .decided { grid-column: 2 / 5; grid-row: 2; padding-top: 8px; white-space: normal; font-size: 12px; }
  .row.notice-row .act { height: 36px; padding-inline: 10px; font-size: 12px; }
  .notice-row .amt::before { display: none; }
  .hdr { padding-top: 26px; }
}
@media (max-width: 1023px) {
  .notice-row { grid-template-columns: minmax(0, 1fr) 86px; grid-template-rows: auto auto;
    padding: 18px 16px; gap: 14px 12px; }
  .notice-row .notice-info { grid-column: 1; grid-row: 1; }
  .notice-row > .due { grid-column: 2; grid-row: 1; align-self: start; text-align: center; }
  .notice-row > .l3 { grid-column: 1 / 3; grid-row: 2; justify-content: space-between; flex-wrap: wrap; }
  .notice-row .amt { text-align: left; }
  .notice-row .decided { flex: 1 1 160px; }
  .notice-row .act { height: 38px; }
}
@media (max-width: 600px) {
  .noc { padding: 20px 16px 14px; gap: 12px; }
  .queue-heading h1 { font-size: 23px; }
  .next-deadline { padding: 0; border: 0; background: none; font-size: 12px; gap: 6px; }
  .next-deadline strong { font-size: 14px; }
  .scopebar { padding: 0 16px 8px; }
  .scope-sum { display: none; }
  .queue-guide { padding: 0 16px 12px; }
  .notice-row .l2 { font-size: 16px; }
}
#hdr-result{font-size:16px;font-weight:400}
.collection-disclosure { padding:16px; border:1px solid var(--line-strong); color:var(--text); font-size:15px; line-height:1.8; }
.answer-empty > h2 { font-size:16px; }
.answer-empty .group-note { font-size:14px; }
.recap-section > h2 { font-size:22px; font-weight:400; }

/* 읽기 → 기한 확인 → 판단. 색상 없이도 순서와 행동을 구분한다. */
.review-path { display:flex; list-style:none; margin:0; padding:0 24px 20px; gap:24px; background:var(--surface); }
.filter-options { width:100%; }
.rail-i { min-height:44px; font-size:15px; }
.tabbtn { font-size:14px; }
.decide .act { min-height:44px; height:auto; font-size:15px; padding:10px 12px; }
.filter-options summary { min-height:44px; padding:12px 0; font-size:15px; cursor:pointer; }
.filter-options[open] summary { margin-bottom:8px; }
.filter-options .seg-i, .filter-options .tog { min-height:44px; font-size:14px; }
.filter-options .togs { margin-top:10px; }
.notice-row .door-warning, .notice-row .door-next { font-size:14px; line-height:1.6; }
.review-path li { display:flex; align-items:center; gap:8px; color:var(--text-2); font-size:15px; }
.review-path li > span { display:grid; place-items:center; width:26px; height:26px; border:1px solid var(--line-strong); border-radius:50%; font-size:14px; }
.queue-heading .hdr-label { font-size:16px; line-height:1.6; }
.notice-row .l2 { font-size:20px; line-height:1.55; }
.notice-row .notice-meta, .notice-row .vb, .notice-row .change-note { font-size:14px; }
.notice-row .vb.ok { color:var(--surface); background:var(--text); border-color:var(--text); }
.notice-row .due { padding:12px 8px; }
.notice-row .due b { font-size:20px; }
.notice-row .due .u, .notice-row .amt::before { font-size:14px; line-height:1.5; }
.notice-row .amt { font-size:17px; }
.notice-row .acts { gap:8px; }
.row.notice-row .act { min-height:44px; height:auto; padding:10px 12px; font-size:15px; }
.notice-row .act.go { background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.review-open { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:8px 0; margin-top:3px; border:0; border-radius:0; background:transparent; color:var(--text-2); text-decoration:underline; text-underline-offset:4px; font:inherit; font-size:15px; cursor:pointer; }
.review-open:hover { color:var(--text); }
.review-open:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.group-hdr { font-size:15px; padding-top:12px; padding-bottom:12px; }
.notice-row .door-note, .notice-row .margin-hint { font-size:14px; line-height:1.65; }
.scopebar .switch, .scopebar .chip, .queue-guide, .queue-guide summary { font-size:15px; }
.queue-guide summary { min-height:36px; display:flex; align-items:center; }
#gate .gate-intro { display:block; }
.gate-intro .desk-wordmark { font-size:24px; margin:0 0 36px; }
.gate-intro .desk-wordmark span { font-size:14px; margin-left:14px; }
.gate-intro .intro-kicker { font-size:16px; color:var(--text-2); }
.gate-intro h2 { font-size:38px; line-height:1.4; font-weight:400; letter-spacing:-.04em; margin:16px 0; }
.gate-intro .intro-copy { font-size:17px; line-height:1.8; color:var(--text-2); }
.gate-intro .intro-steps { list-style:none; padding:0; margin:28px 0; }
.gate-intro .intro-steps li { padding:14px 0; border-bottom:1px solid var(--line-strong); font-size:16px; }
.gate-intro .intro-steps span { margin-right:18px; color:var(--text-2); }
.gate-intro .intro-foot { font-size:14px; color:var(--text-2); }
#gate .gate-sub, #gate .gate-card label, #gate .gate-foot { font-size:15px; }
@media (min-width:1024px) {
  .thead, .row.notice-row { grid-template-columns:minmax(0,1fr) 120px 96px 110px; gap:20px; }
  .thead { font-size:14px; }
  .row.notice-row { padding-block:24px; }
  .notice-row .acts { flex-direction:column; align-items:stretch; }
}
@media (max-width:1023px) {
  .notice-row { grid-template-columns:minmax(0,1fr) 108px; }
  .notice-row .acts { flex-wrap:wrap; }
}
@media (max-width:899px) {
  #gate { flex-direction:column; justify-content:flex-start; padding:28px 20px; gap:28px; }
  #gate .gate-intro { width:100%; max-width:420px; }
  .gate-intro .desk-wordmark { margin-bottom:22px; }
  .gate-intro h2 { font-size:28px; }
  .gate-intro h2 br:last-child { display:none; }
  .gate-intro .intro-copy { font-size:16px; }
  .gate-intro .intro-steps, .gate-intro .intro-foot { display:none; }
}
@media (max-width:600px) {
  .review-path { padding:0 16px 16px; gap:12px; }
  .review-path li { flex:1; flex-direction:column; align-items:flex-start; gap:6px; font-size:13px; line-height:1.5; }
  .notice-row { grid-template-columns:minmax(0,1fr); gap:16px; padding:22px 16px; }
  .notice-row .notice-info { grid-column:1; grid-row:1; }
  .notice-row > .due { grid-column:1; grid-row:2; display:flex; gap:12px; align-items:center; text-align:left; }
  .notice-row > .l3 { grid-column:1; grid-row:3; gap:14px; }
  .notice-row .acts { width:100%; display:flex; }
  .notice-row .acts .act { flex:1; }
  .notice-row .l2 { font-size:19px; }
  .notice-row .due .u { margin:0; }
  .review-open { width:100%; justify-content:space-between; }
}

/* Public landing — approved ivory/sage preview and original rounded wordmark. */
body:has(#gate:not([hidden])) { overflow: hidden; }
#gate.landing {
  --landing-bg: #faf9f3; --landing-ink: #173f35; --landing-muted: #5d695e;
  --landing-lime: #d3efa2; --landing-line: #173f3526; --landing-blue: #173f35;
  --landing-green: #173f35; --landing-paper: #f6f2e9; --accent: var(--landing-green);
  display: block; padding: 0;
  background: linear-gradient(120deg, var(--landing-bg) 8%, #f2f6eb 48%, #dcebd8 100%);
  color: var(--landing-ink);
  color-scheme: light; scroll-behavior: smooth; scroll-padding-top: calc(var(--landing-header-height, 92px) + 16px); overflow-x: hidden;
  overscroll-behavior: contain;
}
.landing a { text-decoration: none; color: inherit; }
.landing :focus-visible { outline: 2px solid var(--landing-green); outline-offset: 5px; }
.landing-content, .landing-footer { width: min(1320px, calc(100% - 112px)); margin-inline: auto; }
.landing-header { position: sticky; top: 0; z-index: 20; width: 100%; height: 92px; padding-inline: max(56px, calc((100% - 1320px) / 2)); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--landing-line); background: #faf9f3f5; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.landing-brand { display: flex; flex-shrink: 0; align-items: center; gap: 12px; }
.landing-wordmark { display: block; width: 216px; height: auto; margin-inline: -9px; }
.landing-brand small { display: inline-block; margin-left: 8px; padding-left: 20px; border-left: 1px solid var(--landing-line); font: 400 11px/1.4 var(--font); letter-spacing: -.02em; color: var(--landing-muted); font-size: 12px; }
.preview-wordmark { display: block; width: 124px; height: auto; margin-inline: -5px; }
.footer-wordmark { display: block; width: 158px; height: auto; margin-inline: -7px; }
.landing-nav { display: flex; align-items: center; gap: 24px; margin-left: auto; margin-right: 30px; font-size: 14px; color: #586958; }
.landing-nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.landing-nav a:hover, .landing-secondary:hover, .landing-footer a:hover { color: var(--landing-green); }
.landing-login { display: flex; flex-shrink: 0; gap: 28px; align-items: center; min-height: 44px; border: 1px solid #173f354d; border-radius: 8px; padding: 0 18px; font-size: 14px; white-space: nowrap; transition: background .2s; }
.landing-login:hover { background: var(--landing-paper); }
.landing-login > span { font-size: 18px; }
.landing-hero { display: grid; grid-template-columns: 1fr 1.14fr; align-items: center; min-height: 620px; gap: 0; padding-block: 40px 36px; }
.landing-story { position: relative; z-index: 2; padding-block: 20px; }
.landing-eyebrow { display: flex; align-items: center; gap: 12px; font: 13px/1.5 var(--font); letter-spacing: .015em; margin: 0 0 24px; color: var(--landing-muted); }
.landing-eyebrow .free-report-badge { padding: 6px 10px; border-radius: 5px; background: #e9f2df; color: var(--landing-green); font: 550 12px/1.2 var(--font); letter-spacing: 0; }
#landing-title { margin: 0; font-size: clamp(42px, 4.2vw, 62px); line-height: 1.24; font-weight: 700; letter-spacing: -.05em; white-space: nowrap; }
.landing-description { margin: 28px 0 0; font-size: 18px; line-height: 1.8; color: #53645a; letter-spacing: -.015em; word-break: keep-all; }
.landing-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 30px; }
.landing-primary { display: flex; gap: 24px; align-items: center; justify-content: space-between; min-height: 56px; padding: 0 24px; border: 1px solid #90b75555; border-radius: 8px; background: var(--landing-lime); color: var(--landing-ink); box-shadow: 0 2px 0 #173f350a; font-size: 16px; font-weight: 650; transition: background .2s; }
.landing-primary:hover { background: #c6e98d; }
.landing-primary > span { font-size: 23px; font-weight: 400; }
.landing-secondary { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; font-size: 14px; color: #4d6549; }
.landing-secondary > span { font-size: 21px; }
.landing-access { margin: 13px 0 0; font-size: 12px; color: #657168; }
.automation-art { height: 540px; margin: 0; position: relative; min-width: 0; }
.automation-art img { position: absolute; left: -8%; top: 50%; width: 114%; height: auto; transform: translateY(-50%); max-width: none; mask-image: linear-gradient(to right, transparent, #000 8%, #000 95%, transparent), linear-gradient(to bottom, transparent, #000 9%, #000 88%, transparent); mask-composite: intersect; }
.art-label { position: absolute; z-index: 1; }
.art-label strong { display: block; font-size: 14px; font-weight: 400; margin-top: 8px; letter-spacing: -.02em; }
.art-label-index { font: 500 11px/1.5 var(--font); letter-spacing: .02em; color: #53645a; }
.art-label-input { top: 30px; left: 10%; padding-left: 14px; border-left: 1px solid #66844e66; }
.art-label-line { display: block; height: 48px; width: 1px; margin-top: 16px; background: #8eab6550; }
.report-teaser { position: absolute; z-index: 1; right: 0; bottom: 0; width: 300px; padding: 18px 20px; background: #fffefa; border: 1px solid #173f3526; border-radius: 12px; box-shadow: 0 12px 32px -12px #173f3533; }
.report-teaser-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.report-teaser-header h2 { margin: 0; font-size: 16px; line-height: 1.5; font-weight: 650; letter-spacing: -.025em; }
.report-teaser-example { border: 1px solid #658a72; border-radius: 5px; padding: 2px 10px; font-size: 11px; line-height: 1.4; }
.report-teaser-label { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin: 22px 0 6px; font-size: 14px; font-weight: 550; }
.report-teaser-label > span { font-size: 11px; font-weight: 400; color: #687870; }
.report-teaser-count { margin: 0 0 12px; font-size: 52px; line-height: 1.08; font-weight: 700; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.report-teaser-count > span { font-size: .72em; margin-left: 2px; }
.report-teaser-stats { display: grid; grid-template-columns: 1fr 1fr; margin: 0; padding-top: 12px; border-top: 1px solid var(--landing-line); }
.report-teaser-stats > div + div { border-left: 1px solid var(--landing-line); padding-left: 16px; }
.report-teaser-stats dt { font-size: 12px; line-height: 1.5; color: #687870; }
.report-teaser-stats dd { margin: 3px 0 0; font-size: 24px; line-height: 1.2; font-weight: 650; letter-spacing: -.03em; }
.report-teaser-stats dd > span { font-size: .8em; }
.report-teaser-note { margin: 14px 0 0; color: #687870; font-size: 11px; line-height: 1.6; word-break: keep-all; }
.automation-flow { display: grid; grid-template-columns: .82fr 3fr; gap: 24px; padding: 30px 0 36px; border-top: 1px solid var(--landing-line); }
.flow-heading > span { font: 500 11px/1.5 var(--font); letter-spacing: .03em; color: #6c785f; }
.flow-heading h2 { font-size: 18px; font-weight: 500; line-height: 1.6; letter-spacing: -.035em; margin: 11px 0 0; word-break: keep-all; }
.flow-stages { display: grid; grid-template-columns: repeat(3, 1fr); list-style: none; padding: 0; margin: 0; }
.flow-stages li { position: relative; display: flex; align-items: flex-start; gap: 13px; border-left: 1px solid var(--landing-line); padding: 0 20px; }
.flow-stages li:last-child { padding-right: 0; }
.flow-number { font: 13px/1.4 var(--font-no); color: #5c784d; align-self: flex-start; margin-top: 6px; font-size: 11px; }
.flow-stages h3 { font-size: 16px; font-weight: 550; margin: 3px 0 8px; letter-spacing: -.025em; line-height: 1.5; word-break: keep-all; }
.flow-stages p { font-size: 13px; line-height: 1.7; margin: 0; color: #59695d; word-break: keep-all; }
.landing-product { display: grid; grid-template-columns: .95fr 1.05fr; align-items: center; gap: 64px; color: var(--landing-ink); position: relative; padding: 64px 0 66px; border-top: 1px solid var(--landing-line); scroll-margin-top: 0; }
.landing-product :focus-visible { outline-color: #31673e; }
.product-eyebrow { font: 500 12px/1.5 var(--font); letter-spacing: .02em; color: #5b7160; margin: 0 0 24px; margin-bottom: 18px; }
.product-story h2 { font-size: clamp(29px, 2.65vw, 39px); font-weight: 550; line-height: 1.3; letter-spacing: -.04em; margin: 0; }
.product-description { font-size: 16px; line-height: 1.9; color: #59695d; margin: 24px 0; }
.product-benefits { list-style: none; margin: 28px 0; padding: 0; }
.product-benefits li { display: flex; gap: 11px; align-items: center; font-size: 15px; margin: 15px 0; }
.product-benefits li > span { color: #44723a; font-size: 15px; }
.product-cta { display: inline-flex; align-items: center; gap: 48px; min-height: 44px; padding-bottom: 6px; border-bottom: 1px solid #778e6d; font-size: 15px; font-weight: 550; }
.product-cta > span { font-size: 21px; }
.product-scope { font-size: 12px; color: #6f7f71; margin: 25px 0 0; }
.landing-visual { position: relative; padding: 30px 0 29px; }
.landing-visual-caption { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; margin: 0; font: 500 11px/1.5 var(--font); letter-spacing: .02em; color: #647965; }
.desk-preview { position: relative; background: #fff; border: 1px solid #d7dfd2; border-radius: 12px; box-shadow: 0 16px 40px -24px #173f3540; border-color: #173f3526; }
.preview-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; height: 53px; padding: 0 21px; border-bottom: 1px solid #edf0f3; }
.preview-logo { font-size: 15px; font-weight: 600; letter-spacing: -.06em; }
.preview-logo > span { font: 10px/1.4 var(--font); color: #727b88; letter-spacing: 0; margin-left: 9px; }
.preview-company { display: flex; align-items: center; gap: 7px; color: #616b78; font-size: 10px; }
.preview-company > span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #eef1f4; font: 11px/1 var(--font-no); }
.preview-body { padding: 23px 22px 14px; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.preview-heading p { margin: 0 0 5px; font-size: 10px; color: #727b88; }
.preview-heading h2 { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -.045em; }
.preview-sun { font-size: 30px; font-weight: 300; color: #8b96a4; }
.preview-tabs { display: flex; gap: 16px; border-bottom: 1px solid #e7ebef; margin-top: 23px; }
.preview-tabs > button { position: relative; min-height: 40px; color: #707987; font-size: 11px; padding: 0 0 12px; white-space: nowrap; }
.preview-tabs > button[aria-selected="true"] { color: var(--landing-blue); }
.preview-tabs > button[aria-selected="true"]::after { content: ''; position: absolute; height: 2px; bottom: -1px; left: 0; right: 0; background: var(--landing-blue); }
.preview-panel { min-height: 275px; }
.preview-filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 17px 0 12px; font-size: 10px; color: #667280; }
.preview-filter > span:first-child { color: #4c5866; }
.preview-filter > span > span { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 4px; border-radius: 3px; background: #e9edf2; color: #526172; }
.preview-notice { border: 1px solid #e0e5eb; border-radius: 7px; padding: 13px 14px; margin-bottom: 10px; }
.preview-notice-meta { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; color: #697686; }
.preview-notice-meta > span:last-child { color: #3b4858; font-weight: 500; }
.preview-notice h3 { margin: 8px 0 3px; font-size: 14px; font-weight: 500; letter-spacing: -.03em; }
.preview-notice p { margin: 0; font-size: 10px; color: #6e7987; }
.preview-notice-bottom { display: flex; gap: 8px; align-items: center; margin-top: 11px; font-size: 9px; color: #6e7987; }
.preview-verdict { flex: 0 0 auto; background: #edf0f3; color: #3a4859; border-radius: 3px; padding: 3px 5px; font-size: 9px; font-weight: 600; }
.preview-verdict.review { background: #f3f3f1; font-weight: 400; }
.preview-bottom { display: flex; align-items: center; gap: 7px; padding-top: 4px; color: #727d8b; font-size: 9px; line-height: 1.6; }
.preview-bottom > span { font-size: 18px; }
.preview-schedule { display: flex; align-items: center; gap: 14px; padding: 20px 0; border-bottom: 1px solid #e7ebef; }
.preview-schedule > span { border: 1px solid #dce2e9; border-radius: 6px; padding: 10px 7px; font: 13px/1 var(--font-no); }
.preview-schedule h3 { font-size: 14px; font-weight: 500; margin: 0 0 4px; }
.preview-schedule p { font-size: 10px; color: #6e7987; margin: 0; }
.preview-schedule > strong { margin-left: auto; font-size: 12px; font-weight: 400; }
.preview-panel-note { margin: 22px 0 12px; text-align: center; font-size: 11px; line-height: 1.8; color: #6e7987; }
.preview-result-path { display: flex; justify-content: space-between; gap: 8px; margin-top: 24px; font-size: 11px; color: #6e7987; }
.preview-result-path > strong { color: #344355; font-weight: 500; }

.preview-tabs > button { min-height: 44px; }
.landing-example-label { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; font-size: 11px; color: #647965; text-align: right; }
.landing-coverage { color: #59695d; margin: 0; padding: 0 0 34px; font-size: 12px; line-height: 1.8; }
.landing-footer { display: flex; align-items: center; gap: 25px; padding: 29px 0; font-size: 12px; color: #66755e; }
.landing-footer > span:first-child { font-size: 24px; font-weight: 550; letter-spacing: -.06em; color: #2d492f; }
.landing-footer-links { display: flex; align-items: center; gap: 25px; margin-left: auto; font: 13px/1.5 var(--font); }
.landing-footer-links a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.landing-dialog { --text: #202935; --text-2: #536171; --muted: #637080; --surface: #fff; --line-strong: #c7d0db; --rule: #e4e8ed; --accent: #31673e; --accent-ink: #fff; --invert: #edf1ed; --invert-ink: #202935; width: min(440px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 0; border-radius: 12px; background: #fff; color: #202935; color-scheme: light; box-shadow: 0 24px 90px #0005; }
.landing-dialog::backdrop { background: #33462b55; backdrop-filter: blur(8px); }
#gate .landing-dialog .gate-card { position: relative; max-width: none; border: 0; background: #fff; padding: 38px 32px 30px; }
#gate .landing-dialog .gate-title { font-weight: 500; font-size: 24px; }
#gate .landing-dialog .gate-sub, #gate .landing-dialog label, #gate .landing-dialog .gate-foot { font-size: 13px; }
#gate .landing-dialog .gate-card input { font-size: 16px; color: #202935; }
#gate .landing-dialog .gate-card .btn-accent { background: #31673e; color: #fff; }
.landing-dialog :focus-visible { outline-color: #31673e; }
.report-login-steps { display: flex; flex-wrap: wrap; gap: 8px 12px; padding: 12px 0; margin: -6px 0 20px; list-style: none; border-block: 1px solid #e0e7dc; font-size: 11px; color: #536b55; }
.landing-agents { border-top: 1px solid var(--landing-line); padding: 64px 0; }
.agents-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 44px; }
.agents-kicker { font: 500 12px/1.5 var(--font); letter-spacing: .02em; color: #667b55; margin: 0 0 20px; margin-bottom: 18px; }
.agents-heading h2, .value-story h2 { margin: 0; font-size: 40px; font-weight: 650; line-height: 1.3; letter-spacing: -.04em; word-break: keep-all; }
.agents-heading > p { font-size: 15px; line-height: 1.85; margin: 0; color: #59695d; }
.agents-illustration { margin: 32px -20px 4px; position: relative; }
.agents-illustration img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 84%, transparent), linear-gradient(to right, transparent, #000 3%, #000 97%, transparent); mask-composite: intersect; }
.agent-image-labels { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); list-style: none; padding: 0 1.3%; margin: 0 0 clamp(-44px, -3vw, -20px); text-align: center; }
.agent-image-labels li { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.agent-image-labels li::after { content: ''; width: 1px; height: 12px; margin-top: 6px; background: linear-gradient(#71885799, transparent); }
.agent-image-labels span { font: 10px/1.5 var(--font-no); letter-spacing: .12em; color: #687b59; margin-bottom: 6px; }
.agent-image-labels strong { display: flex; flex-direction: column; justify-content: center; min-height: 2.8em; font-size: clamp(11px, 1.55vw, 19px); line-height: 1.4; font-weight: 550; letter-spacing: -.035em; color: var(--landing-ink); word-break: keep-all; }
.agent-image-labels small { display: block; font-size: .7em; font-weight: 400; color: #67735e; margin-top: 3px; white-space: nowrap; }
.agent-stages { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; gap: 24px; padding: 0; margin: 0; }
.agent-stages li { display: flex; flex-direction: column; align-items: flex-start; border-top: 1px solid #80966640; padding-top: 20px; }
.agent-stage-no { display: none; font: 12px/1.5 var(--font-no); letter-spacing: .02em; color: #45663c; }
.agent-stages h3 { font-size: 20px; font-weight: 550; line-height: 1.45; letter-spacing: -.025em; margin: 12px 0; }
.agent-stages h3 small { display: block; font-size: 13px; font-weight: 400; color: #67735e; margin-top: 3px; }
.agent-stages p { font-size: 14px; line-height: 1.8; color: #59695d; margin: 0 0 18px; word-break: keep-all; }
.agent-availability { margin-top: auto; font-size: 12px; color: #395646; line-height: 1.6; padding: 4px 12px; border-radius: 20px; background: #e4eed3; }
.agent-availability.planned, .agent-availability.detail { padding-inline: 0; border-radius: 0; color: #5d6d62; background: transparent; word-break: keep-all; }
.agents-next { display: flex; gap: 28px; align-items: center; justify-content: space-between; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--landing-line); }
.agents-next p { color: #687760; font-size: 13px; line-height: 1.8; margin: 0; }
.agents-next .landing-primary { font-size: 15px; min-height: 52px; }
.landing-value { display: grid; grid-template-columns: 1fr 1.14fr; gap: 50px; align-items: center; border: 1px solid var(--landing-line); border-radius: 12px; padding: 40px; background: #fffdf680; margin: 0 0 64px; }
.value-story h2 { font-size: 29px; }
.value-story > p:last-child { font-size: 14px; color: #59695d; line-height: 1.8; margin: 18px 0 0; }
.value-scenario { font-size: 12px; margin: 0 0 20px; color: #637852; }
.value-prices { display: flex; align-items: center; gap: 20px; justify-content: space-between; }
.value-prices > div > span { font-size: 13px; color: #687958; }
.value-prices strong { display: block; font: 450 36px/1.5 var(--font); letter-spacing: -.06em; }
.value-prices small { font-size: 12px; margin-left: 6px; font-weight: 400; letter-spacing: -.025em; color: #687958; }
.value-proposed strong { color: var(--landing-green); }
.value-arrow { color: #758c5c; font-size: 25px; }
.value-outcomes { display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid #90aa6d44; padding-top: 16px; margin-top: 18px; font-size: 12px; color: #687958; }
.value-outcomes b { color: #3e5a2f; font-size: 15px; font-weight: 550; margin-left: 4px; }
.value-basis { font-size: 11px; line-height: 1.8; color: #59695d; margin: 13px 0 0; }
.landing-pricing { padding-block: 56px; border-top: 1px solid var(--landing-line); }
.pricing-heading { max-width: 760px; margin: 0 auto 30px; text-align: center; }
.pricing-kicker { margin: 0 0 16px; color: #586e60; font-size: 13px; }
.pricing-heading h2 { margin: 0; font-size: 42px; font-weight: 650; line-height: 1.3; letter-spacing: -.045em; word-break: keep-all; }
.pricing-intro { margin: 18px 0 0; color: #596b60; font-size: 16px; line-height: 1.8; word-break: keep-all; }
.pricing-proof { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; margin: 0 0 40px; padding: 22px 0; border-block: 1px solid #cfd8cc; text-align: center; }
.pricing-proof li { padding: 2px 16px; }
.pricing-proof li + li { border-left: 1px solid #cfd8cc; }
.pricing-proof span { display: block; margin-bottom: 7px; color: #596b60; font-size: 13px; }
.pricing-proof strong { font-size: 16px; font-weight: 550; letter-spacing: -.025em; word-break: keep-all; }
.pricing-table-caption { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 14px; font-size: 13px; line-height: 1.6; color: #596b60; }
.pricing-table-caption > span { color: var(--landing-ink); }
.pricing-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pricing-mobile-overview, .pricing-scroll-hint { display: none; }
.pricing-table-wrap { position: relative; overflow-x: auto; border: 1px solid #aebfaf; border-top: 2px solid var(--landing-ink); border-radius: 6px; background: #fffefa; scrollbar-color: #93a88a #e7eddf; }
.pricing-table-wrap:focus-visible { outline: 2px solid var(--landing-ink); outline-offset: 4px; }
.pricing-table { width: 100%; border-spacing: 0; table-layout: fixed; text-align: center; color: var(--landing-ink); }
.pricing-label-col { width: 18%; }
.pricing-table th, .pricing-table td { padding: 20px 18px; text-align: center; font-size: 14px; font-weight: 400; line-height: 1.65; vertical-align: middle; word-break: keep-all; }
.pricing-table tr > * + * { border-left: 1px solid #e1e6dc; }
.pricing-table .pricing-plans th { padding-block: 25px 28px; vertical-align: top; }
.pricing-plan-type { display: block; margin-bottom: 10px; font-size: 12px; color: #596b60; }
.pricing-plan-name { font-size: 26px; font-weight: 600; letter-spacing: -.035em; }
.pricing-table .pricing-plan-desc { margin: 6px 0 23px; color: #596b60; font-size: 13px; font-weight: 400; }
.pricing-original { position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0 0 6px; color: #596b60; font-size: 12px; font-weight: 400; line-height: 1.5; }
.pricing-original .pricing-sr-only { top: 0; left: 0; }
.pricing-original s { text-decoration-thickness: 1px; }
.pricing-table .pricing-price { margin: 0; font-size: 40px; line-height: 1.2; font-weight: 600; letter-spacing: -.045em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pricing-price > span { margin-left: 4px; font-size: 18px; font-weight: 500; letter-spacing: -.035em; }
.pricing-price > small { margin-left: 4px; font-size: 13px; font-weight: 400; letter-spacing: -.02em; }
.pricing-price > .pricing-term { margin: 0 8px 0 0; font-size: 15px; }
.pricing-table .pricing-period, .pricing-monthly { display: block; margin: 12px 0 0; font-size: 13px; font-weight: 400; line-height: 1.5; color: #596b60; }
.pricing-table .pricing-plans .pricing-row-label { vertical-align: middle; color: var(--landing-ink); font-size: 18px; font-weight: 500; }
.pricing-row-label > small { display: block; margin-top: 12px; font-size: 12px; font-weight: 400; line-height: 1.7; color: #596b60; }
.pricing-table .pricing-custom { background: #e6f2cf; box-shadow: inset 0 4px var(--landing-lime); }
.pricing-table tbody th, .pricing-table tbody td { border-top: 1px solid #dde3d8; }
.pricing-table tbody th { color: #475f50; font-size: 13px; font-weight: 500; background: #f7f8f2; }
.pricing-table td > strong { font-weight: 600; }
.pricing-cell-note { display: block; margin-top: 3px; font-size: 12px; color: #596b60; }
.pricing-muted { color: #6a746a; font-size: 13px; }
.pricing-channels { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 24px; border-bottom: 1px solid #cfd8cc; }
.pricing-channels > div { display: flex; align-items: center; gap: 16px; }
.pricing-channels span { font-size: 12px; color: #596b60; }
.pricing-channels strong { font-size: 16px; font-weight: 550; letter-spacing: -.025em; }
.pricing-channels p { margin: 0; font-size: 12px; line-height: 1.8; color: #596b60; }
.pricing-notes { margin-top: 17px; color: #596b5c; font-size: 12px; line-height: 1.8; word-break: keep-all; }
.pricing-notes p { margin: 3px 0; }
.pricing-next { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: 32px; }
.pricing-next h3 { margin: 0; font-size: 22px; font-weight: 550; letter-spacing: -.035em; word-break: keep-all; }
.pricing-next p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: #61705c; }
.pricing-next .landing-primary { font-size: 15px; min-height: 52px; flex-shrink: 0; }
.pricing-roadmap { margin: 24px 0 32px; padding: 34px; border: 1px solid #cfd8cc; border-radius: 6px; background: #fffefa; }
.pricing-roadmap > header { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-bottom: 30px; }
.pricing-roadmap .pricing-kicker { margin-bottom: 10px; }
.pricing-roadmap h3 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -.04em; line-height: 1.35; word-break: keep-all; }
.pricing-roadmap header > p { margin: 0; font-size: 14px; line-height: 1.8; color: #596b60; word-break: keep-all; }
.pricing-roadmap header > p strong { display: inline-block; margin-top: 6px; font-weight: 500; color: var(--landing-ink); }
.pricing-roadmap-steps { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin: 0; padding: 0; }
.pricing-roadmap-steps > li { display: flex; flex-direction: column; border-top: 2px solid #9eafa0; padding-top: 17px; }
.pricing-roadmap-step { color: #596b60; font-size: 12px; }
.pricing-roadmap-steps h4 { margin: 13px 0 12px; font-size: 21px; font-weight: 550; letter-spacing: -.035em; line-height: 1.4; word-break: keep-all; }
.pricing-roadmap-steps p { margin: 0 0 20px; font-size: 14px; line-height: 1.85; color: #596b60; word-break: keep-all; }
.pricing-roadmap-steps small { margin-top: auto; font-size: 12px; }
.pricing-roadmap-note { margin: 28px 0 0; font-size: 12px; line-height: 1.8; color: #596b60; word-break: keep-all; }
.pricing-custom-details { border-block: 1px solid var(--landing-line); }
.pricing-custom-details summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 66px; cursor: pointer; list-style: none; font-size: 15px; line-height: 1.6; word-break: keep-all; }
.pricing-custom-details summary::-webkit-details-marker { display: none; }
.pricing-custom-details summary > span { font-size: 25px; font-weight: 400; flex-shrink: 0; }
.pricing-custom-details[open] summary > span { transform: rotate(45deg); }
.pricing-custom-scope { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding: 12px 0 28px; }
.pricing-custom-scope h3 { margin: 0 0 8px; font-size: 15px; font-weight: 550; }
.pricing-custom-scope p { margin: 0; color: #596b5c; font-size: 14px; line-height: 1.8; word-break: keep-all; }
@media (max-width: 1150px) {
  .agent-stages { gap: 18px; }
  .agent-stages h3 { font-size: 17px; }
  .landing-value { padding: 28px; gap: 30px; }
  .value-prices strong { font-size: 30px; }
  .pricing-table th, .pricing-table td { padding-inline: 15px; font-size: 14px; }
  .pricing-table .pricing-price { font-size: 33px; }
  .pricing-price > span { font-size: 16px; }
  .pricing-price > small { font-size: 12px; }
  .pricing-proof strong { font-size: 15px; }
  .pricing-channels { padding-inline: 0; }
  .pricing-channels > div { display: block; }
  .pricing-channels strong { display: block; margin-top: 5px; }
  .pricing-roadmap { padding: 28px; }
  .pricing-roadmap-steps { gap: 24px; }
  .pricing-roadmap-steps h4 { font-size: 19px; }
}
@media (max-width: 850px) {
  .agents-heading { align-items: flex-start; gap: 30px; }
  .agents-heading h2 { font-size: 31px; }
  .agents-heading > p { font-size: 14px; }
  .agents-illustration figcaption { display: none; }
  .agent-stages { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .agent-stages li:last-child { grid-column: 1 / -1; }
  .landing-value { grid-template-columns: 1fr; gap: 30px; }
  .value-story h2 br { display: none; }
  .pricing-heading h2 { font-size: 34px; }
  .pricing-proof { grid-template-columns: repeat(2, 1fr); row-gap: 24px; }
  .pricing-proof li:nth-child(3) { border-left: 0; }
  .pricing-table { min-width: 800px; }
  .pricing-table tbody th, .pricing-table .pricing-row-label { position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 #cfd8cc; }
  .pricing-table .pricing-row-label { background: #fffefa; }
  .pricing-scroll-hint { display: block; margin: 0 0 12px; font-size: 12px; color: #596b5c; }
  .pricing-custom-scope { gap: 24px; }
  .pricing-roadmap > header { display: block; }
  .pricing-roadmap header > p { margin-top: 16px; }
  .pricing-roadmap-steps { grid-template-columns: 1fr; gap: 24px; }
  .pricing-roadmap-steps > li { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
  .pricing-roadmap-step, .pricing-roadmap-steps h4 { grid-column: 1; margin: 0; }
  .pricing-roadmap-steps p { grid-column: 2; grid-row: 1 / 4; margin: 0; }
  .pricing-roadmap-steps small { grid-column: 1; margin-top: 4px; }
}
@media (max-width: 480px) {
  .landing-agents { padding-block: 40px; }
  .agents-heading { display: block; }
  .agents-kicker { font-size: 11px; margin-bottom: 16px; }
  .agents-heading h2 { font-size: clamp(29px, 8.8vw, 38px); font-weight: 700; }
  .agents-heading > p { margin-top: 16px; font-size: 15px; line-height: 1.75; }
  .agents-illustration { margin: 24px -16px 8px; }
  .agent-stages { grid-template-columns: 1fr; gap: 0; }
  .agent-stages li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; row-gap: 6px; padding: 20px 0; }
  .agent-stages li:first-child { border-top: 0; }
  .agent-stage-no { display: block; grid-column: 1; grid-row: 1 / 4; padding-top: 3px; }
  .agent-stages h3 { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 20px; font-weight: 650; margin: 0; }
  .agent-stages h3 small { margin: 0; font-size: 13px; }
  .agent-stages p { grid-column: 2; font-size: 14px; line-height: 1.65; margin: 0; }
  .agent-availability { grid-column: 2; justify-self: start; margin-top: 0; }
  .agents-next { display: block; margin-top: 4px; padding-top: 0; border-top: 0; }
  .agents-next p { display: none; }
  .agents-next .landing-primary { margin-top: 0; width: 100%; font-size: 15px; }
  .landing-value { padding: 22px 18px; margin-bottom: 34px; }
  .value-story h2 { font-size: 24px; }
  .value-story h2 br { display: block; }
  .value-story > p:last-child { font-size: 14px; }
  .value-story > p:last-child br { display: none; }
  .value-prices { gap: 9px; }
  .value-prices strong { font-size: 27px; }
  .value-prices small { font-size: 11px; margin-left: 4px; }
  .value-prices > div > span { font-size: 11px; }
  .value-outcomes { gap: 10px; font-size: 11px; flex-wrap: wrap; }
  .value-outcomes b { font-size: 12px; }
  .landing-pricing { padding-block: 38px; }
  .pricing-heading { margin-bottom: 24px; }
  .pricing-heading h2 { font-size: 28px; }
  .pricing-intro { font-size: 14px; margin-top: 16px; }
  .pricing-intro br { display: none; }
  .pricing-proof { margin-bottom: 28px; padding-block: 20px; row-gap: 22px; }
  .pricing-proof li { padding-inline: 8px; }
  .pricing-proof span { font-size: 11px; }
  .pricing-proof strong { font-size: 13px; }
  .pricing-table-caption { display: block; text-align: center; }
  .pricing-table-caption > span { display: block; margin-top: 3px; }
  .pricing-mobile-overview { display: block; margin: 0 0 24px; border: 1px solid #aebfaf; border-top: 2px solid var(--landing-ink); border-radius: 6px; overflow: hidden; text-align: center; }
  .pricing-mobile-overview > div { padding: 22px 16px; background: #fffefa; }
  .pricing-mobile-overview > div + div { border-top: 1px solid #cfd8cc; }
  .pricing-mobile-overview > div:last-child { background: #e6f2cf; }
  .pricing-mobile-overview dt { font-size: 19px; font-weight: 600; }
  .pricing-mobile-overview dt > small { display: block; margin: 6px 0 14px; font-size: 12px; font-weight: 400; color: #596b60; }
  .pricing-mobile-overview dd { margin: 0; font-size: 13px; white-space: nowrap; }
  .pricing-mobile-overview .pricing-monthly { margin-top: 6px; font-size: 12px; }
  .pricing-mobile-overview strong { font-size: 31px; font-weight: 600; letter-spacing: -.035em; }
  .pricing-table { min-width: 770px; }
  .pricing-label-col { width: 117px; }
  .pricing-table th, .pricing-table td { padding: 17px 12px; font-size: 13px; }
  .pricing-table tbody th { font-size: 12px; }
  .pricing-table .pricing-plans .pricing-row-label { font-size: 16px; }
  .pricing-plan-name { font-size: 23px; }
  .pricing-table .pricing-plan-desc { font-size: 12px; }
  .pricing-table .pricing-price { font-size: 33px; }
  .pricing-table .pricing-period { font-size: 11px; }
  .pricing-price > span { font-size: 16px; }
  .pricing-price > small { font-size: 11px; }
  .pricing-channels { display: block; text-align: center; padding-block: 20px; }
  .pricing-channels p { margin-top: 10px; font-size: 12px; word-break: keep-all; }
  .pricing-next { flex-direction: column; align-items: stretch; padding-block: 27px; gap: 18px; }
  .pricing-next h3 { font-size: 21px; }
  .pricing-next .landing-primary { width: 100%; }
  .pricing-roadmap { margin-top: 12px; padding: 23px 20px; }
  .pricing-roadmap h3 { font-size: 25px; }
  .pricing-roadmap header > p br { display: none; }
  .pricing-roadmap-steps > li { display: flex; gap: 0; }
  .pricing-roadmap-steps h4 { margin: 12px 0; font-size: 21px; }
  .pricing-roadmap-steps small { margin-top: 16px; }
  .pricing-custom-details summary { gap: 15px; font-size: 14px; padding-block: 15px; }
  .pricing-custom-scope { grid-template-columns: 1fr; gap: 22px; }
}
.login-close { position: absolute; top: 10px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; color: #627080; font-size: 26px; line-height: 1; }
.login-close:hover { background: #f0f3ef; }
@media (min-width: 1600px) {
  .landing-hero { min-height: 690px; }
  .automation-art { height: 580px; }
}
@media (max-width: 1150px) {
  .landing-content, .landing-footer { width: calc(100% - 72px); }
  .landing-header { padding-inline: 36px; }
  .landing-brand small { display: none; }
  #landing-title { font-size: 47px; }
  .landing-hero { min-height: 590px; }
  .automation-art { height: 490px; }
  .landing-description { font-size: 16px; }
  .landing-actions { gap: 12px 18px; }
  .landing-primary { padding-inline: 20px; font-size: 15px; gap: 20px; }
  .art-label-input { left: 16%; top: 12px; }
  .flow-stages li { gap: 11px; padding-inline: 16px; }
  .landing-product { gap: 45px; padding-top: 64px; }
  .product-story h2 { font-size: 30px; }
  .preview-body { padding-inline: 16px; }
}
@media (max-width: 850px) {
  .landing-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; height: auto; min-height: 84px; padding-top: 6px; }
  .landing-brand small { display: none; }
  .landing-brand { grid-column: 1; grid-row: 1; }
  .landing-login { grid-column: 2; grid-row: 1; }
  .landing-nav { grid-column: 1 / -1; grid-row: 2; justify-content: space-between; gap: 12px; margin: 0; padding-block: 4px 7px; font-size: 13px; }
  .landing-hero { grid-template-columns: 1fr; padding-top: 44px; gap: 0; }
  .landing-story { padding-bottom: 0; }
  #landing-title { font-size: clamp(42px, 7vw, 60px); }
  .landing-description { font-size: 16px; }
  .automation-art { width: 100%; max-width: 670px; height: 440px; justify-self: center; margin-top: 12px; }
  .automation-art img { width: 112%; left: -6%; }
  .art-label-input { left: 3%; top: 35px; }
  .report-teaser { bottom: 0; }
  .automation-flow { grid-template-columns: 1fr; gap: 23px; }
  .flow-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
  .flow-heading h2 { margin: 0; font-size: 15px; }
  .flow-heading h2 br { display: none; }
  .flow-stages li:first-child { border-left: 0; padding-left: 0; }
  .landing-product { grid-template-columns: 1fr; gap: 42px; }
  .product-story h2 { font-size: 34px; }
  .landing-visual { width: 100%; max-width: 560px; justify-self: center; }
  .product-scope { display: none; }
}
@media (max-width: 640px) {
  .automation-art { display: grid; height: auto; margin-top: 20px; }
  .automation-art img { position: relative; top: auto; left: -20px; transform: none; width: calc(100% + 40px); margin-bottom: -8px; }
  .art-label-input { top: 11px; left: 0; }
  .report-teaser { position: relative; width: 100%; max-width: 380px; justify-self: end; }
}
@media (max-width: 480px) {
  .landing-content, .landing-footer { width: calc(100% - 40px); }
  .landing-header { min-height: 74px; padding-inline: 20px; }
  .landing-nav { gap: 8px; font-size: 12px; }
  .landing-wordmark { width: clamp(166px, 49vw, 184px); margin-inline: -8px; }
  .landing-login { min-height: 44px; padding-inline: 13px; gap: 16px; font-size: 13px; }
  .landing-hero { padding-top: 25px; padding-bottom: 20px; }
  .landing-eyebrow { font-size: 12px; margin-bottom: 22px; gap: 9px; }
  .landing-eyebrow .free-report-badge { font-size: 11px; padding: 5px 8px; }
  #landing-title { font-size: clamp(30px, 8.5vw, 40px); line-height: 1.25; letter-spacing: -.05em; }
  .landing-description { font-size: 15px; line-height: 1.85; margin-top: 22px; }
  .landing-description br { display: none; }
  .landing-actions { gap: 8px 16px; margin-top: 24px; align-items: flex-start; flex-direction: column; }
  .landing-primary { min-height: 52px; font-size: 15px; padding-inline: 20px; gap: 20px; }
  .landing-secondary { font-size: 13px; gap: 8px; min-height: 40px; }
  .landing-access { font-size: 11px; margin-top: 8px; }
  .art-label-input { top: 11px; left: 0; padding-left: 9px; }
  .art-label-index { font-size: 10px; }
  .art-label strong { font-size: 12px; margin-top: 5px; }
  .art-label-line { height: 18px; margin-top: 10px; }
  .automation-flow { padding-top: 22px; padding-bottom: 26px; }
  .flow-heading { display: block; }
  .flow-heading > span { font-size: 12px; }
  .flow-heading h2 { font-size: 18px; margin-top: 8px; }
  .flow-stages { grid-template-columns: 1fr; gap: 0; }
  .flow-stages li { padding: 18px 0; border-left: 0; border-bottom: 1px solid var(--landing-line); gap: 20px; align-items: flex-start; }
  .flow-stages li:last-child { border-bottom: 0; padding-bottom: 0; }
  .flow-number { margin-top: 2px; font-size: 12px; }
  .flow-stages h3 { font-size: 16px; margin-top: 0; margin-bottom: 6px; }
  .flow-stages p { font-size: 13px; }
  .landing-product { padding-block: 40px; gap: 33px; margin-top: 12px; }
  .product-eyebrow { font-size: 11px; margin-bottom: 17px; }
  .product-story h2 { font-size: clamp(23px, 6.2vw, 29px); }
  .product-description { font-size: 14px; margin-block: 20px; }
  .product-benefits { margin-block: 20px; }
  .product-benefits li { font-size: 14px; margin-block: 12px; }
  .product-cta { font-size: 14px; }
  .landing-visual-caption { font-size: 10px; }
  .preview-topbar { height: 44px; padding-inline: 14px; }
  .preview-body { padding: 19px 13px 12px; }
  .preview-heading h2 { font-size: 20px; }
  .preview-tabs { gap: 17px; margin-top: 17px; }
  .preview-tabs > button { font-size: 10px; }
  .preview-filter { font-size: 9px; gap: 5px; }
  .preview-notice { padding: 12px; }
  .preview-notice h3 { font-size: 13px; }
  .preview-notice-bottom { font-size: 8px; gap: 6px; }
  .preview-bottom { font-size: 9px; }
  .preview-panel { min-height: 265px; }
  .preview-schedule { gap: 9px; }
  .preview-schedule h3 { font-size: 13px; }
  .landing-example-label { font-size: 10px; text-align: center; }
  .landing-coverage { font-size: 11px; padding-bottom: 25px; }
  .landing-footer { gap: 12px; flex-wrap: wrap; padding-block: 24px; }
  .landing-footer > span:first-child { font-size: 21px; }
  .landing-footer > span:nth-child(2) { font-size: 11px; }
  .landing-footer-links { width: 100%; justify-content: space-between; margin-top: 5px; }
  #gate .landing-dialog .gate-card { padding: 38px 23px 26px; }
}
@media (max-width: 360px) {
  .landing-nav { gap: 3px; font-size: 11.5px; letter-spacing: -.015em; }
  .pricing-mobile-overview > div { padding-inline: 12px; }
  .pricing-heading h2 { font-size: 26px; }
}
/* A single arrival sequence, then one reveal along the five-agent workflow.
   Individual translate/scale preserve the artwork's existing centering transform. */
@keyframes landing-arrive {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes landing-art-arrive {
  from { opacity: 0; translate: 0 12px; scale: .985; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes landing-panel-arrive {
  from { opacity: .5; translate: 0 5px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: no-preference) {
  #gate:not([hidden]) .landing-story { animation: landing-arrive .7s cubic-bezier(.22, 1, .36, 1) both; }
  #gate:not([hidden]) .automation-art > .landing-art-ready { animation: landing-art-arrive 1s cubic-bezier(.22, 1, .36, 1) .12s backwards; }
  #gate:not([hidden]) .report-teaser { animation: landing-arrive .75s cubic-bezier(.22, 1, .36, 1) .3s backwards; }
  #gate:not([hidden]) .landing-story:focus-within { opacity: 1 !important; translate: none !important; }
  .landing .agents-illustration.landing-revealed { animation: landing-art-arrive .85s cubic-bezier(.22, 1, .36, 1) backwards; }
  .landing .agent-stages > .landing-revealed { animation: landing-arrive .6s cubic-bezier(.22, 1, .36, 1) var(--step-delay, 0s) backwards; }
  .landing .preview-panel:not([hidden]), .landing-dialog[open] { animation: landing-panel-arrive .24s ease-out backwards; }
  .landing-primary { transition: background .2s, translate .2s, box-shadow .2s; }
  .landing-primary > span, .landing-secondary > span, .product-cta > span, .landing-login > span { transition: translate .2s; }
  .landing-primary:active { translate: 0 1px; }
  .landing-primary:focus-visible > span, .product-cta:focus-visible > span { translate: 2px -2px; }
}
@media (min-width: 851px) and (prefers-reduced-motion: no-preference) {
  .agent-stages > li:nth-child(2) { --step-delay: .08s; }
  .agent-stages > li:nth-child(3) { --step-delay: .16s; }
  .agent-stages > li:nth-child(4) { --step-delay: .24s; }
  .agent-stages > li:nth-child(5) { --step-delay: .32s; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .landing-primary:hover { translate: 0 -2px; box-shadow: 0 6px 18px -6px #173f3526; }
  .landing-primary:hover > span, .landing-login:hover > span, .product-cta:hover > span { translate: 2px -2px; }
  .landing-secondary:hover > span { translate: 2px 2px; }
  .landing-primary:active { translate: 0 1px; }
}
@media (prefers-reduced-motion: reduce) {
  #gate.landing { scroll-behavior: auto; }
  .landing-primary, .landing-login { transition: none; }
  .landing-primary:hover { transform: none; }
}