/* ROBERIN 당뇨 위험도 계산기 - The New workspace (20260718a)
 * Scope: .tn-dr-* only. Health-family; The New warm paper palette (#16). Realtime classifier
 * against 대한당뇨병학회/WHO thresholds with a dependency-free 3-zone severity scale (정상/전단계/당뇨)
 * that renders an empty frame on load and drops a marker per test when values are entered (#10/#15).
 * Gates baked in: input-left (#3), no Calculate button (#17), container gap ownership (#22),
 * uniform 1px borders / no decorative left rail (#11/#30), field label separation 5px (#34),
 * flipped dark tokens + text-fill, solid dark surfaces (#8/#16), element reset limited to
 * li/ul/ol/dd so p padding survives (#3/#37), criteria table reflows to row cards on mobile (#36). */

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

.tn-dr-tool {
  --dr-ink: #1a1208;
  --dr-muted: #5a4a30;
  --dr-line: #b8a888;
  --dr-soft: #cbb692;
  --dr-paper: #fffdf8;
  --dr-wash: #f6eddc;
  --dr-surface: #fffdf8;
  --dr-card: #fbf4e6;
  --dr-band-bg: #f9f1e2;
  --dr-accent: #b5540f;
  --dr-accent-soft: #e6c9a6;
  --dr-track: #e7dcc4;
  --dr-ok: #2f7d54;
  --dr-ok-wash: rgba(47, 125, 84, 0.16);
  --dr-pre: #b0741a;
  --dr-pre-wash: rgba(176, 116, 26, 0.18);
  --dr-high: #b3401f;
  --dr-high-wash: rgba(179, 64, 31, 0.15);
  --dr-btn-sec-bg: #f2e7d3;
  --dr-btn-sec-hover: #e7d8bd;
  --dr-btn-sec-text: #3a2c18;
  --dr-btn-pri-bg: #b5540f;
  --dr-btn-pri-hover: #9c470b;
  --dr-btn-pri-text: #fff6ec;
  color: var(--dr-ink);
  -webkit-text-fill-color: var(--dr-ink);
  font-family: inherit;
}

/* reset limited to list/dd so p padding survives (#3/#37) */
.tn-dr-tool ul, .tn-dr-tool ol, .tn-dr-tool li, .tn-dr-tool dd { margin: 0; padding: 0; list-style: none; }

.tn-dr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--dr-line);
  background: var(--dr-surface);
}
.tn-dr-input, .tn-dr-result {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 16px;
  min-width: 0;
}
.tn-dr-input { border-right: 1px solid var(--dr-line); background: var(--dr-wash); }

.tn-dr-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(--dr-muted); -webkit-text-fill-color: var(--dr-muted);
}

.tn-dr-fields { display: grid; gap: 0; padding: 4px 12px; border: 1px solid var(--dr-soft); background: var(--dr-band-bg); }
.tn-dr-test { display: grid; gap: 6px; padding: 10px 0; }
.tn-dr-test + .tn-dr-test { border-top: 1px solid var(--dr-soft); }

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

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

.tn-dr-command { display: grid; gap: 8px; }
.tn-dr-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tn-dr-secondary, .tn-dr-primary {
  height: 38px; border: 1px solid var(--dr-line); background: var(--dr-btn-sec-bg);
  color: var(--dr-btn-sec-text); -webkit-text-fill-color: var(--dr-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-dr-secondary:hover { background: var(--dr-btn-sec-hover); }
.tn-dr-primary { border-color: var(--dr-btn-pri-bg); background: var(--dr-btn-pri-bg); color: var(--dr-btn-pri-text); -webkit-text-fill-color: var(--dr-btn-pri-text); }
.tn-dr-primary:hover { background: var(--dr-btn-pri-hover); }
.tn-dr-secondary:focus-visible, .tn-dr-primary:focus-visible { outline: 2px solid var(--dr-accent); outline-offset: 2px; }
.tn-dr-status {
  margin: 0; padding: 8px 10px; border: 1px solid var(--dr-soft); background: var(--dr-card);
  font-size: 12px; color: var(--dr-muted); -webkit-text-fill-color: var(--dr-muted); text-align: center;
}

/* result pane */
.tn-dr-main { display: grid; gap: 6px; padding: 16px 14px; border: 1px solid var(--dr-line); background: var(--dr-card); text-align: center; }
.tn-dr-verdict {
  font: 800 clamp(24px, 5vw, 32px)/1.1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color: var(--dr-muted); -webkit-text-fill-color: var(--dr-muted); word-break: keep-all;
}
.tn-dr-verdict[data-level="ok"] { color: var(--dr-ok); -webkit-text-fill-color: var(--dr-ok); }
.tn-dr-verdict[data-level="pre"] { color: var(--dr-pre); -webkit-text-fill-color: var(--dr-pre); }
.tn-dr-verdict[data-level="high"] { color: var(--dr-high); -webkit-text-fill-color: var(--dr-high); }
.tn-dr-verdict-desc { font-size: 12.5px; font-style: normal; line-height: 1.5; color: var(--dr-muted); -webkit-text-fill-color: var(--dr-muted); }

/* 3-zone severity scales (#15/#27) */
.tn-dr-scales { display: grid; gap: 12px; }
.tn-dr-scale-row { display: grid; gap: 5px; }
.tn-dr-scale-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tn-dr-scale-label { font-size: 12px; font-weight: 700; color: var(--dr-ink); -webkit-text-fill-color: var(--dr-ink); }
.tn-dr-scale-verdict { font-size: 11px; font-style: normal; font-weight: 700; padding: 1px 7px; border: 1px solid var(--dr-soft); color: var(--dr-muted); -webkit-text-fill-color: var(--dr-muted); }
.tn-dr-scale-verdict[data-level="ok"] { border-color: var(--dr-ok); color: var(--dr-ok); -webkit-text-fill-color: var(--dr-ok); background: var(--dr-ok-wash); }
.tn-dr-scale-verdict[data-level="pre"] { border-color: var(--dr-pre); color: var(--dr-pre); -webkit-text-fill-color: var(--dr-pre); background: var(--dr-pre-wash); }
.tn-dr-scale-verdict[data-level="high"] { border-color: var(--dr-high); color: var(--dr-high); -webkit-text-fill-color: var(--dr-high); background: var(--dr-high-wash); }
.tn-dr-scale-track {
  position: relative; display: flex; height: 14px;
  border: 1px solid var(--dr-line); background: var(--dr-track); overflow: visible;
}
.tn-dr-zone { display: block; block-size: 100%; }
.tn-dr-zone--ok { background: var(--dr-ok-wash); }
.tn-dr-zone--pre { background: var(--dr-pre-wash); }
.tn-dr-zone--high { background: var(--dr-high-wash); }
.tn-dr-marker {
  position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px;
  background: var(--dr-ink); -webkit-text-fill-color: var(--dr-ink);
  border-radius: 2px; transition: left 0.18s ease;
}
.tn-dr-marker::after {
  content: ""; position: absolute; top: -5px; left: 50%; width: 8px; height: 8px;
  margin-left: -4px; background: var(--dr-ink); border-radius: 50%;
}
.tn-dr-scale-ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--dr-muted); -webkit-text-fill-color: var(--dr-muted); font-family: ui-monospace, monospace; }

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

/* criteria table */
.tn-dr-criteria { display: grid; gap: 8px; margin-top: 14px; padding: 16px; border: 1px solid var(--dr-line); background: var(--dr-surface); }
.tn-dr-criteria-wrap { overflow-x: auto; }
.tn-dr-criteria-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.tn-dr-criteria-table th {
  padding: 8px 10px; border-bottom: 1px solid var(--dr-line); background: var(--dr-band-bg);
  color: var(--dr-muted); -webkit-text-fill-color: var(--dr-muted); font-weight: 700; text-align: right; white-space: nowrap;
}
.tn-dr-criteria-table th:first-child, .tn-dr-criteria-table td:first-child { text-align: left; }
.tn-dr-criteria-table td {
  padding: 8px 10px; border-bottom: 1px solid var(--dr-track);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; text-align: right;
  color: var(--dr-ink); -webkit-text-fill-color: var(--dr-ink); white-space: nowrap;
}
.tn-dr-dot { display: inline-block; width: 9px; height: 9px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; }
.tn-dr-dot--ok { background: var(--dr-ok); }
.tn-dr-dot--pre { background: var(--dr-pre); }
.tn-dr-dot--high { background: var(--dr-high); }
.tn-dr-criteria-note { margin: 0; font-size: 11px; color: var(--dr-muted); -webkit-text-fill-color: var(--dr-muted); }

@media (max-width: 720px) {
  .tn-dr-grid { grid-template-columns: minmax(0, 1fr); }
  .tn-dr-input { border-right: 0; border-bottom: 1px solid var(--dr-line); }
  .tn-dr-criteria-wrap { overflow-x: visible; }
  .tn-dr-criteria-table, .tn-dr-criteria-table tbody, .tn-dr-criteria-table tr, .tn-dr-criteria-table td { display: block; width: 100%; }
  .tn-dr-criteria-table thead { display: none; }
  .tn-dr-criteria-table tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin-bottom: 8px; padding: 8px 10px; border: 1px solid var(--dr-soft); background: var(--dr-card); }
  .tn-dr-criteria-table td { display: flex; justify-content: space-between; gap: 8px; padding: 2px 0; border: 0; text-align: right; white-space: normal; }
  .tn-dr-criteria-table td::before { content: attr(data-th); font-family: inherit; font-weight: 600; color: var(--dr-muted); -webkit-text-fill-color: var(--dr-muted); }
  .tn-dr-criteria-table td:first-child { grid-column: 1 / -1; border-bottom: 1px solid var(--dr-track); padding-bottom: 4px; font-weight: 700; }
  .tn-dr-criteria-table td:first-child::before { content: ""; }
}
@media (max-width: 400px) {
  .tn-dr-test[data-test="hba1c"] .tn-dr-chips, .tn-dr-test[data-test="fasting"] .tn-dr-chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Dark / inverse / auto-dark (#8/#16 solid warm dark) */
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-dr-tool,
html[data-scheme="dark"] body:not([data-scheme="light"]) .tn-dr-tool,
html[data-scheme="inverse"] body:not([data-scheme="light"]) .tn-dr-tool {
  --dr-ink: #efe6d2; --dr-muted: #c3b492; --dr-line: #6f6047; --dr-soft: #574a37;
  --dr-paper: #241d12; --dr-wash: #221b11; --dr-surface: #1f1810; --dr-card: #322a1a; --dr-band-bg: #2c2517;
  --dr-accent: #e8823f; --dr-accent-soft: rgba(232, 130, 63, 0.28); --dr-track: rgba(120, 104, 74, 0.3);
  --dr-ok: #6fc79a; --dr-ok-wash: rgba(111, 199, 154, 0.2);
  --dr-pre: #e0a94b; --dr-pre-wash: rgba(224, 169, 75, 0.22);
  --dr-high: #ef8a63; --dr-high-wash: rgba(239, 138, 99, 0.22);
  --dr-btn-sec-bg: #33291a; --dr-btn-sec-hover: #453720; --dr-btn-sec-text: #efe6d2;
  --dr-btn-pri-bg: #e8823f; --dr-btn-pri-hover: #f2a061; --dr-btn-pri-text: #241206;
  color: var(--dr-ink); -webkit-text-fill-color: var(--dr-ink);
}
@media (prefers-color-scheme: dark) {
  body[data-scheme="auto"]:not([data-scheme="light"]) .tn-dr-tool {
    --dr-ink: #efe6d2; --dr-muted: #c3b492; --dr-line: #6f6047; --dr-soft: #574a37;
    --dr-paper: #241d12; --dr-wash: #221b11; --dr-surface: #1f1810; --dr-card: #322a1a; --dr-band-bg: #2c2517;
    --dr-accent: #e8823f; --dr-accent-soft: rgba(232, 130, 63, 0.28); --dr-track: rgba(120, 104, 74, 0.3);
    --dr-ok: #6fc79a; --dr-ok-wash: rgba(111, 199, 154, 0.2);
    --dr-pre: #e0a94b; --dr-pre-wash: rgba(224, 169, 75, 0.22);
    --dr-high: #ef8a63; --dr-high-wash: rgba(239, 138, 99, 0.22);
    --dr-btn-sec-bg: #33291a; --dr-btn-sec-hover: #453720; --dr-btn-sec-text: #efe6d2;
    --dr-btn-pri-bg: #e8823f; --dr-btn-pri-hover: #f2a061; --dr-btn-pri-text: #241206;
    color: var(--dr-ink); -webkit-text-fill-color: var(--dr-ink);
  }
}
@media (prefers-reduced-motion: reduce) { .tn-dr-marker { transition: none; } }