/* Layout: a ledger book — header strip, tab row, one wide table per screen, inline editing drawer per row. */
:root {
  --bg: #f5f7f6; --surface: #ffffff; --ink: #18211e; --muted: #5d6b66; --line: #d9e1de;
  --accent: #1d6b57; --accent-soft: #e2efe9;
  --good: #1d7a4a; --good-soft: #e1f2e7; --warn: #9a6400; --warn-soft: #fbf0d9; --bad: #a33a2c; --bad-soft: #f8e4e0;
  --info: #2f5b8f; --info-soft: #e3ecf6;
  --display: "Nanum Myeongjo", "AppleMyungjo", "Noto Serif KR", "Batang", Georgia, serif;
  --body: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #111816; --surface: #18211e; --ink: #e6ede9; --muted: #9aaba4; --line: #2b3834;
  --accent: #5fbf9f; --accent-soft: #1c3a31;
  --good: #6fcf97; --good-soft: #17352a; --warn: #e3b25a; --warn-soft: #3a2d14; --bad: #ef8a7a; --bad-soft: #3d1f1a;
  --info: #8db4e8; --info-soft: #1b2a3d; color-scheme: dark; } }
:root[data-theme="dark"] {
  --bg: #111816; --surface: #18211e; --ink: #e6ede9; --muted: #9aaba4; --line: #2b3834;
  --accent: #5fbf9f; --accent-soft: #1c3a31;
  --good: #6fcf97; --good-soft: #17352a; --warn: #e3b25a; --warn-soft: #3a2d14; --bad: #ef8a7a; --bad-soft: #3d1f1a;
  --info: #8db4e8; --info-soft: #1b2a3d; color-scheme: dark; }
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 14px; line-height: 1.55; }
.wrap { max-width: 1180px; margin: 0 auto; padding-inline: 16px; padding-block: 28px 64px; display: grid; gap: 22px; }
header { display: grid; gap: 6px; }
h1 { font-family: var(--display); font-size: clamp(26px, 4vw, 34px); font-weight: 800; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
.lede { color: var(--muted); margin: 0; max-width: 70ch; }
.strip { display: flex; flex-wrap: wrap; gap: 10px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; min-width: 128px; display: grid; gap: 2px; }
.stat b { font-family: var(--mono); font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: 12px; letter-spacing: .02em; }
nav { display: flex; gap: 4px; border-bottom: 1px solid var(--line); overflow-x: auto; }
nav button { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 10px 14px; font: inherit; color: var(--muted); cursor: pointer; white-space: nowrap; }
nav button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); font-weight: 600; }
nav button:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.panel { display: grid; gap: 14px; min-width: 0; }
.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tools input, .tools select { font: inherit; padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); }
.tools input { min-width: 0; flex: 1 1 200px; max-width: 320px; }
.criteria { color: var(--muted); font-size: 12.5px; margin: 0; max-width: 95ch; }
.tablebox { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; min-width: 860px; }
th, td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
th { font-size: 11.5px; font-weight: 600; color: var(--muted); letter-spacing: .04em; background: var(--surface); position: sticky; top: 0; }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.row { cursor: pointer; }
tr.row:hover td { background: var(--accent-soft); }
.tk { font-family: var(--mono); font-weight: 500; }
.nm { color: var(--muted); font-size: 12.5px; display: block; }
.pill { display: inline-block; font-size: 11.5px; padding: 1px 8px; border-radius: 999px; white-space: nowrap; font-weight: 500; }
.p-pass { background: var(--good-soft); color: var(--good); }
.p-near, .p-watch { background: var(--info-soft); color: var(--info); }
.p-flag { background: var(--warn-soft); color: var(--warn); }
.m-관심 { background: var(--info-soft); color: var(--info); }
.m-검토중 { background: var(--warn-soft); color: var(--warn); }
.m-보유 { background: var(--good-soft); color: var(--good); }
.m-제외 { background: var(--bad-soft); color: var(--bad); }
.gauge { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.gauge i { position: relative; width: 72px; height: 6px; border-radius: 3px; background: var(--line); display: inline-block; overflow: hidden; }
.gauge i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--c, var(--muted)); }
.gauge i::before { content: ""; position: absolute; top: -2px; bottom: -2px; left: 50%; width: 1px; background: var(--muted); z-index: 1; }
tr.drawer td { background: var(--bg); padding: 14px 16px; }
.edit { display: grid; grid-template-columns: minmax(140px, 180px) minmax(140px, 180px) minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.edit label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); }
.edit select, .edit input, .edit textarea { font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; width: 100%; }
.edit textarea { min-height: 64px; resize: vertical; }
.btn { appearance: none; font: inherit; font-weight: 600; border-radius: 6px; padding: 8px 14px; cursor: pointer; border: 1px solid var(--accent); background: var(--accent); color: var(--surface); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn:disabled { opacity: .5; cursor: default; }
.saved { font-size: 12px; color: var(--muted); }
.empty { padding: 28px 18px; color: var(--muted); text-align: center; }
.note { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; color: var(--muted); font-size: 12.5px; }
.note b { color: var(--ink); }
.report-head { display: grid; gap: 6px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px; }
.report-head h2 { font-family: var(--display); margin: 0; font-size: 22px; }
.doc { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 22px 22px; min-width: 0; overflow-wrap: anywhere; }
.doc h1, .doc h2, .doc h3 { font-family: var(--display); line-height: 1.3; text-wrap: balance; }
.doc h1 { font-size: 22px; } .doc h2 { font-size: 19px; margin-top: 28px; } .doc h3 { font-size: 16px; }
.doc p, .doc li { max-width: 75ch; }
.doc table { min-width: 0; width: auto; font-size: 13px; margin: 10px 0; display: block; overflow-x: auto; }
.doc th { position: static; }
.doc blockquote { margin: 0; padding: 8px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); color: var(--ink); }
.doc code { font-family: var(--mono); font-size: 12.5px; }
.doc a { color: var(--accent); }
.reports { display: flex; gap: 8px; flex-wrap: wrap; }
footer { color: var(--muted); font-size: 12px; display: grid; gap: 4px; }
@media (max-width: 720px) { .edit { grid-template-columns: 1fr 1fr; } .edit .memo, .edit .act { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

body { margin: 0; }
.topbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; }
.who { color: var(--muted); font-size: 12.5px; display: flex; gap: 12px; align-items: center; }
.who a, .linkbtn { color: var(--accent); background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-decoration: underline; }
.gate { min-height: 100vh; display: grid; place-items: center; padding-inline: 16px; padding-block: 32px; }
.gate-card { width: 100%; max-width: 420px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 28px 24px; display: grid; gap: 14px; }
.gate-card h1 { font-size: 24px; }
.brand { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--muted); letter-spacing: .04em; }
.stack { display: grid; gap: 12px; }
.stack label { display: grid; gap: 4px; font-size: 13px; color: var(--muted); }
.stack input { font: inherit; font-size: 15px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 9px 11px; }
.stack .btn { margin-top: 4px; padding: 10px 14px; }
.alert { margin: 0; background: var(--bad-soft); color: var(--bad); border-radius: 6px; padding: 9px 12px; font-size: 13px; }
.ok { margin: 0; background: var(--good-soft); color: var(--good); border-radius: 6px; padding: 9px 12px; font-size: 13px; }
.fine { margin: 0; color: var(--muted); font-size: 12px; }
.fine a { color: var(--accent); }
.steps { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 13px; }
.qr { justify-self: center; background: #fff; border-radius: 8px; padding: 6px; width: 200px; height: 200px; }
.secret { margin: 0; display: grid; gap: 2px; font-size: 12px; color: var(--muted); text-align: center; }
.secret code { font-family: var(--mono); font-size: 14px; color: var(--ink); word-break: break-all; }
.g-good { --c: var(--good); } .g-warn { --c: var(--warn); } .g-bad { --c: var(--bad); }
.w-0 { --w: 0%; } .w-1 { --w: 1%; } .w-2 { --w: 2%; } .w-3 { --w: 3%; } .w-4 { --w: 4%; } .w-5 { --w: 5%; } .w-6 { --w: 6%; } .w-7 { --w: 7%; } .w-8 { --w: 8%; } .w-9 { --w: 9%; } .w-10 { --w: 10%; } .w-11 { --w: 11%; } .w-12 { --w: 12%; } .w-13 { --w: 13%; } .w-14 { --w: 14%; } .w-15 { --w: 15%; } .w-16 { --w: 16%; } .w-17 { --w: 17%; } .w-18 { --w: 18%; } .w-19 { --w: 19%; } .w-20 { --w: 20%; } .w-21 { --w: 21%; } .w-22 { --w: 22%; } .w-23 { --w: 23%; } .w-24 { --w: 24%; } .w-25 { --w: 25%; } .w-26 { --w: 26%; } .w-27 { --w: 27%; } .w-28 { --w: 28%; } .w-29 { --w: 29%; } .w-30 { --w: 30%; } .w-31 { --w: 31%; } .w-32 { --w: 32%; } .w-33 { --w: 33%; } .w-34 { --w: 34%; } .w-35 { --w: 35%; } .w-36 { --w: 36%; } .w-37 { --w: 37%; } .w-38 { --w: 38%; } .w-39 { --w: 39%; } .w-40 { --w: 40%; } .w-41 { --w: 41%; } .w-42 { --w: 42%; } .w-43 { --w: 43%; } .w-44 { --w: 44%; } .w-45 { --w: 45%; } .w-46 { --w: 46%; } .w-47 { --w: 47%; } .w-48 { --w: 48%; } .w-49 { --w: 49%; } .w-50 { --w: 50%; } .w-51 { --w: 51%; } .w-52 { --w: 52%; } .w-53 { --w: 53%; } .w-54 { --w: 54%; } .w-55 { --w: 55%; } .w-56 { --w: 56%; } .w-57 { --w: 57%; } .w-58 { --w: 58%; } .w-59 { --w: 59%; } .w-60 { --w: 60%; } .w-61 { --w: 61%; } .w-62 { --w: 62%; } .w-63 { --w: 63%; } .w-64 { --w: 64%; } .w-65 { --w: 65%; } .w-66 { --w: 66%; } .w-67 { --w: 67%; } .w-68 { --w: 68%; } .w-69 { --w: 69%; } .w-70 { --w: 70%; } .w-71 { --w: 71%; } .w-72 { --w: 72%; } .w-73 { --w: 73%; } .w-74 { --w: 74%; } .w-75 { --w: 75%; } .w-76 { --w: 76%; } .w-77 { --w: 77%; } .w-78 { --w: 78%; } .w-79 { --w: 79%; } .w-80 { --w: 80%; } .w-81 { --w: 81%; } .w-82 { --w: 82%; } .w-83 { --w: 83%; } .w-84 { --w: 84%; } .w-85 { --w: 85%; } .w-86 { --w: 86%; } .w-87 { --w: 87%; } .w-88 { --w: 88%; } .w-89 { --w: 89%; } .w-90 { --w: 90%; } .w-91 { --w: 91%; } .w-92 { --w: 92%; } .w-93 { --w: 93%; } .w-94 { --w: 94%; } .w-95 { --w: 95%; } .w-96 { --w: 96%; } .w-97 { --w: 97%; } .w-98 { --w: 98%; } .w-99 { --w: 99%; } .w-100 { --w: 100%; }
.act { display: grid; gap: 6px; justify-items: start; }
.memo-cell { max-width: 320px; min-width: 160px; white-space: normal; }
.nm.inline { display: inline; }
.headline { margin: 0; }
h1 { margin: 0; }
.basis { display: grid; gap: 10px; margin-bottom: 18px; min-width: 0; }
.basis h3, .notes-h { font-family: var(--display); font-size: 17px; margin: 0; }
.notes-h { margin-bottom: 8px; }
.basis h4 { margin: 6px 0 0; font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.basis-sum { margin: 0; font-weight: 600; }
table.checks { min-width: 0; width: 100%; max-width: 760px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
table.checks th { position: static; }
.calc { margin: 0; padding-left: 20px; display: grid; gap: 4px; max-width: 80ch; }
.calc b { font-family: var(--mono); font-weight: 500; }
.series table { min-width: 0; font-size: 12.5px; }
.series th { position: static; }
.series td, .series th { padding: 6px 8px; }
.trend { color: var(--accent); }
.spark { display: block; }
.fine a { overflow-wrap: anywhere; }
.flags { margin: 0; padding-left: 20px; display: grid; gap: 3px; color: var(--warn); font-size: 12.5px; max-width: 85ch; }