/* ROBERIN 생활비 분배 계산기 - The New workspace (20260718c)
 * Scope: .tn-le-* only. The New warm paper palette (#16). Structured item-level budget tracker:
 * per-category expense item rows (name + amount + remove) with add buttons and running subtotals,
 * rolling up into a dependency-free inline-SVG distribution donut (#10/#15) + 총지출/잔액 + per-category
 * 실제-vs-권장 ratio cards. Category hues are warm-family + distinct (#27). Gates: input-left (#3),
 * no Calculate (#17), uniform 1px borders / no left rail (#11/#30), field label 5px (#34), dark token
 * flip + text-fill + solid dark surfaces (#8/#16), reset limited to li/ul/ol/dd (#3/#37). */

.tn-le-page { width: min(1180px, calc(100vw - 32px)); margin: 0 auto; color: #1a1208; -webkit-text-fill-color: currentColor; }
.tn-le-page, .tn-le-page * { box-sizing: border-box; }

.tn-le-tool {
  --le-ink: #1a1208; --le-muted: #5a4a30; --le-line: #b8a888; --le-soft: #cbb692;
  --le-paper: #fffdf8; --le-wash: #f6eddc; --le-surface: #fffdf8; --le-card: #fbf4e6; --le-band-bg: #f9f1e2;
  --le-accent: #b5540f; --le-accent-soft: #e6c9a6; --le-track: #e7dcc4;
  --le-needs: #b5540f; --le-wants: #c8922e; --le-savings: #2f7d54; --le-others: #8a7a5a;
  --le-danger: #a3301a;
  --le-btn-sec-bg: #f2e7d3; --le-btn-sec-hover: #e7d8bd; --le-btn-sec-text: #3a2c18;
  --le-btn-pri-bg: #b5540f; --le-btn-pri-hover: #9c470b; --le-btn-pri-text: #fff6ec;
  color: var(--le-ink); -webkit-text-fill-color: var(--le-ink); font-family: inherit;
}
.tn-le-tool ul, .tn-le-tool ol, .tn-le-tool li, .tn-le-tool dd { margin: 0; padding: 0; list-style: none; }

.tn-le-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border: 1px solid var(--le-line); background: var(--le-surface); }
.tn-le-input, .tn-le-result { display: grid; align-content: start; gap: 12px; padding: 16px; min-width: 0; }
.tn-le-input { border-right: 1px solid var(--le-line); background: var(--le-wash); }
.tn-le-pane-label { margin: 0; font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); }

.tn-le-fields { display: grid; gap: 12px; }
.tn-le-band { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--le-soft); background: var(--le-band-bg); }
.tn-le-band-label { margin: 0; font: 700 11px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; letter-spacing: 0.04em; text-transform: uppercase; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); }
.tn-le-band-opt { font-weight: 400; text-transform: none; letter-spacing: 0; }

.tn-le-field { display: grid; gap: 5px; align-content: start; min-width: 0; }
.tn-le-field > span { font-size: 12px; font-weight: 600; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); }
.tn-le-control { display: flex; align-items: stretch; min-width: 0; height: 36px; border: 1px solid var(--le-line); background: var(--le-paper); }
.tn-le-control:has(input:focus-visible) { outline: 2px solid var(--le-accent); outline-offset: -1px; }
.tn-le-control input { flex: 1 1 auto; width: 100%; min-width: 0; padding: 0 10px; border: 0; background: transparent; color: var(--le-ink); -webkit-text-fill-color: var(--le-ink); font: 600 14px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.tn-le-control input:focus-visible { outline: none; }
.tn-le-control input::placeholder { color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); opacity: 0.5; }
.tn-le-control--suffix b { display: inline-flex; align-items: center; padding: 0 10px; border-left: 1px solid var(--le-soft); color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); font: 600 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; white-space: nowrap; }
.tn-le-hint { min-height: 16px; font-size: 12px; line-height: 16px; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); }

.tn-le-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tn-le-chip { height: 30px; border: 1px solid var(--le-soft); background: var(--le-card); color: var(--le-ink); -webkit-text-fill-color: var(--le-ink); font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; cursor: pointer; }
.tn-le-chip:hover { background: var(--le-accent-soft); }
.tn-le-chip.is-active { border-color: var(--le-accent); background: var(--le-accent-soft); }
.tn-le-chip:focus-visible { outline: 2px solid var(--le-accent); outline-offset: 2px; }

/* budget rule segmented */
.tn-le-rules { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.tn-le-rule { position: relative; display: block; cursor: pointer; }
.tn-le-rule input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tn-le-rule > span { display: grid; gap: 2px; padding: 8px 6px; border: 1px solid var(--le-soft); background: var(--le-card); text-align: center; }
.tn-le-rule strong { font-size: 12px; font-weight: 700; color: var(--le-ink); -webkit-text-fill-color: var(--le-ink); }
.tn-le-rule small { font-size: 10px; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); }
.tn-le-rule input:checked + span { border-color: var(--le-accent); background: var(--le-accent-soft); }
.tn-le-rule input:focus-visible + span { outline: 2px solid var(--le-accent); outline-offset: 2px; }
.tn-le-custom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tn-le-custom[hidden] { display: none; }
.tn-le-field--sm > span { font-size: 11px; }

/* expense item groups */
.tn-le-band--items { gap: 8px; }
.tn-le-groups { display: grid; gap: 8px; }
.tn-le-group { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--le-soft); background: var(--le-card); }
.tn-le-group-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tn-le-group-name { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--le-ink); -webkit-text-fill-color: var(--le-ink); }
.tn-le-group-sub { font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-style: normal; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); }
.tn-le-swatch { width: 10px; height: 10px; border-radius: 2px; flex: 0 0 auto; }
.tn-le-swatch--needs { background: var(--le-needs); }
.tn-le-swatch--wants { background: var(--le-wants); }
.tn-le-swatch--savings { background: var(--le-savings); }
.tn-le-swatch--others { background: var(--le-others); }

.tn-le-items { display: grid; gap: 6px; }
.tn-le-item { display: grid; grid-template-columns: minmax(0, 1fr) 128px 30px; gap: 6px; align-items: center; }
.tn-le-item-name { height: 34px; min-width: 0; padding: 0 9px; border: 1px solid var(--le-line); background: var(--le-paper); color: var(--le-ink); -webkit-text-fill-color: var(--le-ink); font: 500 13px/1 inherit; }
.tn-le-item-name::placeholder { color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); opacity: 0.5; }
.tn-le-item-name:focus-visible { outline: 2px solid var(--le-accent); outline-offset: -1px; }
.tn-le-item-amt { height: 34px; }
.tn-le-item-amt input { text-align: right; font-size: 13px; }
.tn-le-item-amt b { padding: 0 8px; font-size: 11px; }
.tn-le-item-remove { width: 30px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--le-soft); background: var(--le-band-bg); color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); font-size: 16px; line-height: 1; cursor: pointer; }
.tn-le-item-remove:hover { border-color: var(--le-danger); color: var(--le-danger); -webkit-text-fill-color: var(--le-danger); background: var(--le-paper); }
.tn-le-item-remove:focus-visible { outline: 2px solid var(--le-accent); outline-offset: 1px; }
.tn-le-additem { height: 32px; border: 1px dashed var(--le-line); background: transparent; color: var(--le-accent); -webkit-text-fill-color: var(--le-accent); font: 700 12px/1 inherit; cursor: pointer; }
.tn-le-additem:hover { background: var(--le-accent-soft); border-style: solid; }
.tn-le-additem:focus-visible { outline: 2px solid var(--le-accent); outline-offset: 2px; }

/* command */
.tn-le-command { display: grid; gap: 8px; }
.tn-le-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tn-le-secondary, .tn-le-primary { height: 38px; border: 1px solid var(--le-line); background: var(--le-btn-sec-bg); color: var(--le-btn-sec-text); -webkit-text-fill-color: var(--le-btn-sec-text); font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tn-le-secondary:hover { background: var(--le-btn-sec-hover); }
.tn-le-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.tn-le-primary { border-color: var(--le-btn-pri-bg); background: var(--le-btn-pri-bg); color: var(--le-btn-pri-text); -webkit-text-fill-color: var(--le-btn-pri-text); }
.tn-le-primary:hover { background: var(--le-btn-pri-hover); }
.tn-le-secondary:focus-visible, .tn-le-primary:focus-visible { outline: 2px solid var(--le-accent); outline-offset: 2px; }
.tn-le-status { margin: 0; padding: 8px 10px; border: 1px solid var(--le-soft); background: var(--le-card); font-size: 12px; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); text-align: center; }
.tn-le-status[data-state="error"] { border-color: var(--le-danger); color: var(--le-danger); -webkit-text-fill-color: var(--le-danger); }
.tn-le-status[data-state="success"] { border-color: var(--le-savings); color: var(--le-savings); -webkit-text-fill-color: var(--le-savings); }

/* result: summary */
.tn-le-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tn-le-sum { display: grid; gap: 3px; padding: 10px 12px; border: 1px solid var(--le-line); background: var(--le-band-bg); }
.tn-le-sum span { font-size: 11px; font-weight: 600; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); }
.tn-le-sum strong { font: 800 18px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--le-ink); -webkit-text-fill-color: var(--le-ink); word-break: keep-all; }
.tn-le-sum strong[data-neg="1"] { color: var(--le-danger); -webkit-text-fill-color: var(--le-danger); }

/* result: 소득 대비 지출 게이지 */
.tn-le-alloc { display: grid; gap: 5px; padding: 8px 12px; border: 1px solid var(--le-soft); background: var(--le-card); }
.tn-le-alloc-label { font-size: 11px; font-weight: 600; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); }
.tn-le-alloc-label b { font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--le-ink); -webkit-text-fill-color: var(--le-ink); }
.tn-le-alloc-bar { height: 8px; border: 1px solid var(--le-soft); background: var(--le-track); overflow: hidden; }
.tn-le-alloc-bar i { display: block; block-size: 100%; inline-size: 0%; background: var(--le-accent); transition: inline-size 0.3s ease; }
.tn-le-alloc-bar i[data-over="1"] { background: var(--le-danger); }

/* donut (#15) */
.tn-le-donut { position: relative; display: grid; place-items: center; margin: 0; padding: 8px; min-height: 176px; border: 1px solid var(--le-line); background: var(--le-card); }
.tn-le-donut-svg { width: 160px; height: 160px; transform: rotate(-90deg); }
.tn-le-donut-track { stroke: var(--le-track); stroke-width: 5; }
.tn-le-seg { stroke-width: 5; transition: stroke-dasharray 0.3s ease, stroke-dashoffset 0.3s ease; }
.tn-le-seg--needs { stroke: var(--le-needs); }
.tn-le-seg--wants { stroke: var(--le-wants); }
.tn-le-seg--savings { stroke: var(--le-savings); }
.tn-le-seg--others { stroke: var(--le-others); }
.tn-le-donut-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; }
.tn-le-donut-cap { font-size: 11px; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); }
.tn-le-donut-center strong { font: 800 clamp(17px, 3.2vw, 21px)/1.1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--le-ink); -webkit-text-fill-color: var(--le-ink); word-break: keep-all; }

/* result: ratio cards */
.tn-le-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tn-le-cat { display: grid; gap: 5px; padding: 10px 12px; border: 1px solid var(--le-soft); background: var(--le-card); }
.tn-le-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tn-le-cat-name { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--le-ink); -webkit-text-fill-color: var(--le-ink); }
.tn-le-cat-tag { font-size: 10px; font-style: normal; font-weight: 700; padding: 1px 6px; }
.tn-le-cat-tag[data-level="over"] { color: var(--le-danger); -webkit-text-fill-color: var(--le-danger); border: 1px solid var(--le-danger); }
.tn-le-cat-tag[data-level="under"] { color: var(--le-savings); -webkit-text-fill-color: var(--le-savings); border: 1px solid var(--le-savings); }
.tn-le-cat-vals { display: flex; align-items: baseline; justify-content: space-between; gap: 6px; }
.tn-le-cat-actual { font: 700 14px/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--le-ink); -webkit-text-fill-color: var(--le-ink); }
.tn-le-cat-rec { font-size: 11px; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); font-family: ui-monospace, monospace; }
.tn-le-cat-bar { height: 6px; border: 1px solid var(--le-soft); background: var(--le-track); overflow: hidden; }
.tn-le-cat-bar i { display: block; block-size: 100%; inline-size: 0%; background: var(--le-accent); transition: inline-size 0.3s ease; }
.tn-le-cat[data-cat="needs"] .tn-le-cat-bar i { background: var(--le-needs); }
.tn-le-cat[data-cat="wants"] .tn-le-cat-bar i { background: var(--le-wants); }
.tn-le-cat[data-cat="savings"] .tn-le-cat-bar i { background: var(--le-savings); }
.tn-le-cat[data-cat="others"] .tn-le-cat-bar i { background: var(--le-others); }
.tn-le-cat-bar i[data-over="1"] { background: var(--le-danger); }
.tn-le-cat-ratio { min-height: 14px; font: 600 11px/14px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); }

.tn-le-advice { display: grid; gap: 6px; }
.tn-le-advice:empty { display: none; }
.tn-le-advice-item { padding: 8px 10px; border: 1px solid var(--le-soft); background: var(--le-card); font-size: 12px; color: var(--le-ink); -webkit-text-fill-color: var(--le-ink); }
.tn-le-advice-item[data-level="over"] { border-color: var(--le-danger); background: rgba(163,48,26,0.08); }
.tn-le-advice-item[data-level="good"] { border-color: var(--le-savings); background: rgba(47,125,84,0.1); }

.tn-le-disclaimer { margin: 2px 0 0; padding-top: 10px; border-top: 1px solid var(--le-track); font-size: 11px; line-height: 1.5; color: var(--le-muted); -webkit-text-fill-color: var(--le-muted); }

/* Desktop: keep the analysis in view while editing a tall item list */
@media (min-width: 721px) {
  .tn-le-result { position: sticky; top: 12px; align-self: start; }
}
@media (max-width: 720px) {
  .tn-le-grid { grid-template-columns: minmax(0, 1fr); }
  .tn-le-input { border-right: 0; border-bottom: 1px solid var(--le-line); }
}
@media (max-width: 420px) {
  .tn-le-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tn-le-cats { grid-template-columns: minmax(0, 1fr); }
  .tn-le-item { grid-template-columns: minmax(0, 1fr) 104px 28px; }
  .tn-le-item-remove { width: 28px; }
}

/* Dark / inverse / auto-dark (#8/#16) */
body:is([data-scheme="dark"], [data-scheme="inverse"], [data-scheme="auto"][data-d="dark"], [data-scheme="auto"][data-l="dark"]):not([data-scheme="light"]) .tn-le-tool,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-le-tool,
html[data-scheme="inverse"] body:not([data-scheme="light"]) .tn-le-tool {
  --le-ink: #efe6d2; --le-muted: #c3b492; --le-line: #6f6047; --le-soft: #574a37;
  --le-paper: #241d12; --le-wash: #221b11; --le-surface: #1f1810; --le-card: #322a1a; --le-band-bg: #2c2517;
  --le-accent: #e8823f; --le-accent-soft: rgba(232,130,63,0.28); --le-track: rgba(120,104,74,0.3);
  --le-needs: #e8823f; --le-wants: #e0a94b; --le-savings: #6fc79a; --le-others: #b3a17f;
  --le-danger: #ef8a63;
  --le-btn-sec-bg: #33291a; --le-btn-sec-hover: #453720; --le-btn-sec-text: #efe6d2;
  --le-btn-pri-bg: #e8823f; --le-btn-pri-hover: #f2a061; --le-btn-pri-text: #241206;
  color: var(--le-ink); -webkit-text-fill-color: var(--le-ink);
}
@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"]:not([data-scheme="light"]) .tn-le-tool {
    --le-ink: #efe6d2; --le-muted: #c3b492; --le-line: #6f6047; --le-soft: #574a37;
    --le-paper: #241d12; --le-wash: #221b11; --le-surface: #1f1810; --le-card: #322a1a; --le-band-bg: #2c2517;
    --le-accent: #e8823f; --le-accent-soft: rgba(232,130,63,0.28); --le-track: rgba(120,104,74,0.3);
    --le-needs: #e8823f; --le-wants: #e0a94b; --le-savings: #6fc79a; --le-others: #b3a17f;
    --le-danger: #ef8a63;
    --le-btn-sec-bg: #33291a; --le-btn-sec-hover: #453720; --le-btn-sec-text: #efe6d2;
    --le-btn-pri-bg: #e8823f; --le-btn-pri-hover: #f2a061; --le-btn-pri-text: #241206;
    color: var(--le-ink); -webkit-text-fill-color: var(--le-ink);
  }
}
@media (prefers-reduced-motion: reduce) { .tn-le-seg, .tn-le-cat-bar i { transition: none; } }