/* ROOTA Components — Level 2. 여기를 바꾸면 모든 화면의 구조가 바뀐다.
   규칙: 색·반경·그림자·간격은 토큰만(ops/ui_lint.js). 카드는 .c-surface 하나 — 필요할 때만 경계를 만든다.
   밀도: --density 가 --space-* / --row-height / --table-row-height 에 이미 들어 있으므로 여기서는 토큰만 쓴다. */

/* ── eyebrow · 섹션 머리 ── */
.c-eyebrow{font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--tracking-eyebrow);color:var(--text-muted);text-transform:none}
.c-sh{margin:var(--section-gap) 0 var(--space-3);padding-bottom:var(--space-2);border-bottom:1px solid var(--border-soft)}
.c-sh.tight{margin-top:var(--space-4)}
.c-sh-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap}
.c-sh-t{margin:0;font-size:var(--fs-lg);font-weight:800;letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.c-sh-n{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);margin-left:var(--space-1)}
.c-sh-a{font-size:var(--fs-sm);color:var(--text-muted);display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.c-sh-d{margin-top:var(--space-1);font-size:var(--fs-sm);color:var(--text-muted);word-break:keep-all}
.c-dot{display:inline-block;width:3px;height:3px;border-radius:var(--radius-pill);background:var(--text-faint);vertical-align:middle;margin:0 var(--space-1)}

/* ── 큰 숫자 ── */
.c-metric{min-width:0}
.c-metric-l{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted);white-space:nowrap}
.c-metric-v{display:flex;align-items:baseline;gap:var(--space-1);margin-top:2px;color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight);line-height:var(--lh-tight)}
.c-metric-v b{font-weight:700}
.c-metric-u{font-family:var(--font-sans);font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}
.c-metric.xl .c-metric-v b{font-size:var(--fs-hero)}
.c-metric.lg .c-metric-v b{font-size:var(--fs-display)}
.c-metric.md .c-metric-v b{font-size:var(--fs-xl)}
.c-metric.sm .c-metric-v b{font-size:var(--fs-lg)}
.c-metric-s{display:flex;gap:var(--space-2);align-items:center;margin-top:var(--space-1);font-size:var(--fs-sm);color:var(--text-muted)}
.c-metric.t-up .c-metric-v,.c-metric.t-danger .c-metric-v{color:var(--danger)}
.c-metric.t-down .c-metric-v,.c-metric.t-info .c-metric-v{color:var(--info)}
.c-metric.t-positive .c-metric-v{color:var(--positive)}
.c-metric.t-warning .c-metric-v{color:var(--warning)}
.c-metric.t-muted .c-metric-v{color:var(--text-muted)}
.c-hint{cursor:help;color:var(--text-faint);font-size:var(--fs-xs)}
/* 한 줄에 여러 숫자 — 박스 없이 세로선으로 */
.c-metrics{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--metric-gap);padding:var(--space-4) 0;border-bottom:1px solid var(--border-soft)}
.c-metrics>.c-metric{padding-right:var(--metric-gap);border-right:1px solid var(--border-soft)}
.c-metrics>.c-metric:last-child{border-right:none;padding-right:0}
@media(max-width:700px){.c-metrics{gap:var(--space-3) var(--space-4)} .c-metrics>.c-metric{padding-right:var(--space-4)} .c-metric.xl .c-metric-v b{font-size:var(--fs-display)} .c-metric.lg .c-metric-v b{font-size:var(--fs-xl)}}
/* 변화량 */
.c-delta{font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.c-delta.up{color:var(--up)} .c-delta.down{color:var(--down)} .c-delta.flat{color:var(--text-muted)} .c-delta.mute{color:var(--text-faint)}

/* ── 표면(카드) — 경계가 필요할 때만 ── */
.c-surface{background:var(--surface);border:1px solid var(--border-soft);border-radius:var(--radius-card);min-width:0}
.c-surface.sunken{background:var(--surface-sunken);border-color:transparent}
.c-surface.inverse{background:var(--surface-inverse);color:var(--text-inverse);border-color:transparent}
.c-surface.inverse .c-metric-l,.c-surface.inverse .c-metric-u,.c-surface.inverse .c-eyebrow{color:color-mix(in srgb,var(--text-inverse) 60%,transparent)}
.c-surface.inverse .c-metric-v{color:var(--text-inverse)}
.c-surface-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) var(--space-4) 0;font-size:var(--fs-md)}
.c-surface-h b{font-weight:800;letter-spacing:var(--tracking-tight)} .c-surface-h span{font-size:var(--fs-xs);color:var(--text-muted)}
.c-surface-b{padding:var(--space-3) var(--space-4) var(--space-4)}
.c-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--space-4)}
@media(max-width:900px){.c-grid>*{grid-column:1/-1!important}}

/* ── 배지 ── */
.c-badge{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-xs);font-weight:600;line-height:1;padding:5px var(--space-2);border-radius:var(--radius-sm);border:1px solid var(--border-soft);background:var(--surface);color:var(--text-secondary);white-space:nowrap}
.c-badge.on::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--positive)}
.c-badge.off{color:var(--text-muted);border-style:dashed;background:transparent}
.c-badge.off::before{content:"";width:6px;height:6px;border-radius:var(--radius-pill);background:var(--text-faint)}
.c-badge.positive{background:var(--positive-soft);color:var(--positive);border-color:transparent}
.c-badge.warning{background:var(--warning-soft);color:var(--warning);border-color:transparent}
.c-badge.danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.c-badge.info{background:var(--info-soft);color:var(--info);border-color:transparent}
.c-badge.accent{background:var(--accent);color:var(--text-on-accent);border-color:transparent}
.c-badge.demo{background:var(--warning-soft);color:var(--warning);border-color:transparent;letter-spacing:.04em}
.c-badge.mute{color:var(--text-faint);border-style:dashed;background:transparent}

/* ── 상태 스트립 (가격 하락 · 반입 미연결 · 작황 양호 · 기상 안정) ── */
.c-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));border:1px solid var(--border-soft);border-radius:var(--radius-md);overflow:hidden;background:var(--surface)}
.c-strip-c{display:flex;flex-direction:column;gap:2px;padding:var(--space-2) var(--space-3);border-right:1px solid var(--border-soft);min-width:0}
.c-strip-c:last-child{border-right:none}
.c-strip-l{font-size:var(--fs-xs);font-weight:600;color:var(--text-muted)}
.c-strip-v{font-size:var(--fs-md);font-weight:700;color:var(--text-primary);letter-spacing:var(--tracking-tight)}
.c-strip-c small{font-size:var(--fs-xs);color:var(--text-muted)}
.c-strip-c.t-positive .c-strip-v{color:var(--positive)} .c-strip-c.t-warning .c-strip-v{color:var(--warning)} .c-strip-c.t-danger .c-strip-v{color:var(--danger)}
.c-strip-c.t-info .c-strip-v{color:var(--info)} .c-strip-c.t-up .c-strip-v{color:var(--up)} .c-strip-c.t-down .c-strip-v{color:var(--down)} .c-strip-c.t-muted .c-strip-v{color:var(--text-faint);font-weight:600}

/* ── 라벨:값 목록 ── */
.c-kv{margin:0;display:grid;grid-template-columns:max-content 1fr;gap:var(--space-1) var(--space-4);font-size:var(--fs-sm)}
.c-kv dt{color:var(--text-muted);font-weight:600} .c-kv dd{margin:0;color:var(--text-primary);font-variant-numeric:tabular-nums}
.c-kv>div{display:contents}
.c-kv>div.t-danger dd{color:var(--danger)} .c-kv>div.t-positive dd{color:var(--positive)} .c-kv>div.t-warning dd{color:var(--warning)} .c-kv>div.t-muted dd{color:var(--text-faint)}

/* ── 시장 행 (브리핑 줄) ── */
.c-rows{display:flex;flex-direction:column}
.c-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:var(--space-3);min-height:var(--row-height);padding:var(--space-1) 0;border-bottom:1px solid var(--border-faint);cursor:pointer;transition:background var(--dur-fast) var(--ease)}
.c-row:hover{background:var(--surface-sunken)}
.c-row:last-child{border-bottom:none}
.c-row-i{font-size:var(--fs-xs);color:var(--text-faint);min-width:2ch}
.c-row-m{min-width:0;display:flex;flex-direction:column;gap:1px}
.c-row-m b{font-size:var(--fs-md);font-weight:700;letter-spacing:var(--tracking-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-row-m span{font-size:var(--fs-xs);color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-row-v{display:flex;align-items:baseline;gap:3px;justify-content:flex-end;font-variant-numeric:tabular-nums}
.c-row-v b{font-size:var(--fs-md);font-weight:600} .c-row-v span{font-size:var(--fs-xs);color:var(--text-muted)}
.c-row-t{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--space-1);padding-bottom:var(--space-1)}
.c-row .c-bar{width:72px}

/* ── 막대 ── */
.c-bar{display:inline-block;height:6px;border-radius:var(--radius-pill);background:var(--surface-sunken);overflow:hidden;vertical-align:middle}
.c-bar i{display:block;height:100%;background:var(--accent);border-radius:var(--radius-pill);transition:width var(--dur) var(--ease)}
.c-bars{display:flex;flex-direction:column;gap:var(--space-2)}
.c-bars-r{display:grid;grid-template-columns:5em minmax(0,1fr) 3.5em;align-items:center;gap:var(--space-2);font-size:var(--fs-sm)}
.c-bars-l{color:var(--text-secondary);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-bars-v{text-align:right;font-weight:600;color:var(--text-primary)}
.c-bars-r.t-positive .c-bar i{background:var(--positive)} .c-bars-r.t-warning .c-bar i{background:var(--warning)} .c-bars-r.t-danger .c-bar i{background:var(--danger)} .c-bars-r.t-muted .c-bar i{background:var(--text-faint)}

/* ── 밀도 높은 표 ── */
.c-tblwrap{overflow-x:auto;border:1px solid var(--border-soft);border-radius:var(--radius-md);background:var(--surface)}
.c-tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm);font-variant-numeric:tabular-nums}
.c-tbl th{position:sticky;top:0;text-align:left;font-size:var(--fs-xs);font-weight:700;color:var(--text-muted);background:var(--surface-sunken);padding:0 var(--space-3);height:calc(var(--table-row-height) - 4px);white-space:nowrap;border-bottom:1px solid var(--border-soft)}
.c-tbl td{padding:0 var(--space-3);height:var(--table-row-height);border-bottom:1px solid var(--border-faint);white-space:nowrap;color:var(--text-primary)}
.c-tbl tbody tr:last-child td{border-bottom:none}
.c-tbl tbody tr:hover td{background:var(--surface-sunken)}
.c-tbl tbody tr[data-code]{cursor:pointer}
.c-tbl .n{text-align:right;font-family:var(--font-mono)}
.c-tbl td.name{font-weight:700} .c-tbl td.mute{color:var(--text-faint)}
.c-tblwrap.dense .c-tbl td{height:calc(var(--table-row-height) - 6px);font-size:var(--fs-xs)}

/* ── 빈 상태: 제품 구조를 설명한다 ── */
.c-empty{padding:var(--space-6) var(--space-4);text-align:center;border:1px dashed var(--border-strong);border-radius:var(--radius-md);color:var(--text-secondary)}
.c-empty-t{font-size:var(--fs-lg);font-weight:800;letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.c-empty-d{margin-top:var(--space-2);font-size:var(--fs-sm);color:var(--text-muted);word-break:keep-all;line-height:1.6}
.c-empty-a{margin-top:var(--space-4);display:flex;gap:var(--space-2);justify-content:center;flex-wrap:wrap}

/* ── 단추 — 절제된 두 단계 ── */
.c-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:0 var(--space-4);border-radius:var(--radius-md);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-primary);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.c-btn:hover{background:var(--surface-sunken)}
.c-btn.primary{background:var(--accent);border-color:var(--accent);color:var(--text-on-accent)}
.c-btn.primary:hover{background:color-mix(in srgb,var(--accent) 88%,black)}
.c-btn.ghost{border-color:transparent;background:transparent;color:var(--text-secondary)}
.c-btn.sm{min-height:30px;padding:0 var(--space-3);font-size:var(--fs-xs)}
.c-btn.lg{min-height:44px;padding:0 var(--space-5);font-size:var(--fs-md)}
.c-btn[disabled]{opacity:.45;cursor:not-allowed}

/* ── 오늘 전화할 목록 ── */
.c-calls{display:flex;flex-direction:column}
.c-call{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--border-soft)}
.c-call:last-child{border-bottom:none}
.c-call-i{font-size:var(--fs-sm);color:var(--text-faint)}
.c-call-m{display:flex;flex-direction:column;gap:2px;min-width:0}
.c-call-m b{font-size:var(--fs-md);font-weight:700;letter-spacing:var(--tracking-tight)}
.c-call-m span{font-size:var(--fs-sm);color:var(--text-secondary);font-variant-numeric:tabular-nums}
.c-call-m small{font-size:var(--fs-xs);color:var(--text-muted)}
.c-call-a{display:flex;gap:var(--space-1)}
.c-call.k-A .c-call-i{color:var(--accent)} .c-call.k-B .c-call-i{color:var(--warning)} .c-call.k-C .c-call-i{color:var(--positive)}
@media(max-width:600px){.c-call{grid-template-columns:auto minmax(0,1fr)} .c-call-a{grid-column:2}}

/* ── 큰 숫자 탭 ── */
.c-bigtabs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:var(--space-2)}
.c-bigtab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:var(--space-3) var(--space-4);border:1px solid var(--border-soft);border-radius:var(--radius-md);background:var(--surface);cursor:pointer;font:inherit;text-align:left;transition:border-color var(--dur-fast) var(--ease)}
.c-bigtab b{font-size:var(--fs-display);font-weight:700;letter-spacing:var(--tracking-tight);line-height:1;color:var(--text-primary)}
.c-bigtab span{font-size:var(--fs-sm);font-weight:600;color:var(--text-muted)}
.c-bigtab.on{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.c-bigtab.t-warning b{color:var(--warning)} .c-bigtab.t-positive b{color:var(--positive)} .c-bigtab.t-accent b{color:var(--accent)}

/* ── 퍼널 ── */
.c-funnel{display:flex;align-items:stretch;gap:var(--space-2);overflow-x:auto;padding:var(--space-2) 0}
.c-funnel-s{display:flex;flex-direction:column;gap:2px;min-width:96px;padding:var(--space-2) var(--space-3);border:1px solid var(--border-soft);border-radius:var(--radius-md);background:var(--surface)}
.c-funnel-s span{font-size:var(--fs-xs);font-weight:600;color:var(--text-muted)} .c-funnel-s b{font-size:var(--fs-xl);font-weight:700;letter-spacing:var(--tracking-tight)} .c-funnel-s small{font-size:var(--fs-xs);color:var(--text-muted)}
.c-funnel-arr{align-self:center;color:var(--text-faint)}

/* ── 로딩 스켈레톤 · 노트 ── */
.c-skel{display:block;height:1em;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--surface-sunken),var(--border-faint),var(--surface-sunken));background-size:200% 100%;animation:c-skel 1.2s linear infinite}
@keyframes c-skel{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.c-skel{animation:none}}
.c-note{font-size:var(--fs-sm);color:var(--text-muted);line-height:1.6;word-break:keep-all}
.c-note b{color:var(--text-secondary)}
.c-prov{font-size:var(--fs-xs);color:var(--text-faint);line-height:1.6;word-break:keep-all}