/* ═════════════════════════════════════════════════════════════════
   Glow Design System v3 — boost layer
   Sits on top of _quiet.css. R-1 PR ships these as a single CSS file.
   Source: design-system-v3.html (M-1 ~ M-16 확정안)
   ═════════════════════════════════════════════════════════════════ */

:root {
  /* M-1 banner — 4 tones (warn 신규) */
  --warn:        #D97706;
  --warn-text:   #B45309;
  --warn-tint:   #FFF7E6;
  --warn-border: #FBE0A6;
  --pos-border:  #BBE9CA;
  --neg-border:  #FCA5A5;

  /* M-4 14-col group palette */
  --g-blue-bg:   #EFF6FF; --g-blue-fg:   #1D4ED8; --g-blue-bd:   #BFDBFE;
  --g-emerald-bg:#ECFDF5; --g-emerald-fg:#047857; --g-emerald-bd:#A7F3D0;
  --g-amber-bg:  #FFFBEB; --g-amber-fg:  #B45309; --g-amber-bd:  #FDE68A;
  --g-purple-bg: var(--accent-tint);
  --g-purple-fg: var(--accent-text);
  --g-purple-bd: var(--accent-border);
  --g-rose-bg:   #FDF2F8; --g-rose-fg:   #BE185D; --g-rose-bd:   #FBCFE8;

  /* M-16 treatment tones (shared by calendar / drawer / donut) */
  --t-amber: #FBBF24;
  --t-blue:  #60A5FA;
  --t-pink:  #F472B6;
  --t-brand: var(--accent);

  /* M-11 drawer compat aliases — for current server inline CSS */
  --border-1:  var(--line-strong);
  --bg-app:    var(--bg);
  --fg-1:      var(--ink-1);
  --fg-2:      var(--ink-2);
  --fg-3:      var(--ink-3);
  --fg-4:      var(--ink-4);
  --fg-5:      var(--ink-4);
  --brand-500: var(--accent);
  --brand-700: var(--accent-text);
  --brand-50:  var(--accent-tint);
  --accent-amber: var(--t-amber);
  --accent-blue:  var(--t-blue);
  --accent-pink:  var(--t-pink);
}

/* ─────────────── R1 · Table column alignment ─────────────── */
th.col-label, td.col-label  { text-align: left; }
th.col-num,   td.col-num,
th.num,       td.num        { text-align: right; font-variant-numeric: tabular-nums; }
th.col-status,td.col-status { text-align: center; }
th.col-action,td.col-action { text-align: right; }

/* ─────────────── Treatment tone dot (shared) ─────────────── */
.tdot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; vertical-align: middle; flex-shrink: 0; }
.tdot.t-amber { background: var(--t-amber); }
.tdot.t-blue  { background: var(--t-blue); }
.tdot.t-pink  { background: var(--t-pink); }
.tdot.t-brand { background: var(--t-brand); }

/* ─────────────── Icon size primitives ─────────────── */
.ic    { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic-14 { width: 14px; height: 14px; }
.ic-18 { width: 18px; height: 18px; }
.ic-20 { width: 20px; height: 20px; }

/* ─────────────── M-1 · Banner (Tinted · A) ─────────────── */
.bn { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 10px; font-size: 13px; min-width: 0; }
.bn .ico-wrap { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; background: var(--surface); }
.bn .ttl  { font-size: 13px; font-weight: 600; color: var(--ink-1); }
.bn .sub  { font-size: 12px; color: var(--ink-3); margin-top: 1px; }
.bn .body { flex: 1; min-width: 0; }
.bn .x    { background: transparent; border: 0; color: var(--ink-3); cursor: pointer; padding: 4px; border-radius: 4px; flex-shrink: 0; }
.bn--tint.t-accent { background: var(--accent-tint); border: 1px solid var(--accent-border); }
.bn--tint.t-accent .ico-wrap { color: var(--accent-text); }
.bn--tint.t-pos    { background: var(--pos-tint);   border: 1px solid var(--pos-border); }
.bn--tint.t-pos .ico-wrap    { color: var(--pos); }
.bn--tint.t-warn   { background: var(--warn-tint);  border: 1px solid var(--warn-border); }
.bn--tint.t-warn .ico-wrap   { color: var(--warn-text); }
.bn--tint.t-neg    { background: var(--neg-tint);   border: 1px solid var(--neg-border); }
.bn--tint.t-neg .ico-wrap    { color: var(--neg); }

/* ─────────────── M-2 · Status badge (Outlined · D) ─────────────── */
.sb { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; letter-spacing: -0.005em; white-space: nowrap; }
.sb--out { height: 22px; padding: 0 9px; border-radius: 999px; background: var(--surface); border: 1px solid; }
.sb--out.draft     { border-color: var(--line-strong);    color: var(--ink-3); }
.sb--out.active    { border-color: var(--accent-border);  color: var(--accent-text); }
.sb--out.finalized { border-color: var(--pos-border);     color: var(--pos); }

/* ─────────────── M-4 · 14-col Group (Column tint · B) ─────────────── */
.gtbl { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.gtbl th, .gtbl td { padding: 9px 8px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.gtbl th { font-weight: 600; color: var(--ink-2); background: var(--subtle); font-size: 11px; letter-spacing: 0.01em; }
.gtbl th.col-label:first-child, .gtbl td.col-label:first-child { padding-left: 12px; font-weight: 600; }
.gtbl tr:last-child td { border-bottom: 0; }
.g-blue    { --gh: var(--g-blue-bg);    --gh-text: var(--g-blue-fg);    --gh-line: var(--g-blue-bd); }
.g-emerald { --gh: var(--g-emerald-bg); --gh-text: var(--g-emerald-fg); --gh-line: var(--g-emerald-bd); }
.g-amber   { --gh: var(--g-amber-bg);   --gh-text: var(--g-amber-fg);   --gh-line: var(--g-amber-bd); }
.g-purple  { --gh: var(--g-purple-bg);  --gh-text: var(--g-purple-fg);  --gh-line: var(--g-purple-bd); }
.g-rose    { --gh: var(--g-rose-bg);    --gh-text: var(--g-rose-fg);    --gh-line: var(--g-rose-bd); }
.gtbl--col-tint th.gh,
.gtbl--col-tint td.gc { background: var(--gh); }
.gtbl--col-tint th.gh { color: var(--gh-text); font-weight: 700; }
.gtbl--col-tint td.gc { color: var(--ink-1); }

/* ─────────────── M-5 · Disc Stepper (A) ─────────────── */
.stepper { display: flex; align-items: center; gap: 0; min-width: 0; width: 100%; }
.step { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; flex: 0 0 auto; }
.step-line { flex: 1; height: 2px; background: var(--line); margin-bottom: 26px; min-width: 8px; }
.step-line.done { background: var(--accent); }
.step .lbl { font-size: 11px; color: var(--ink-3); font-weight: 500; max-width: 64px; text-align: center; line-height: 1.25; white-space: nowrap; }
.step.done .lbl { color: var(--accent-text); font-weight: 600; }
.step.now  .lbl { color: var(--ink-1); font-weight: 700; }
.step--disc .node {
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--line);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.step--disc.done .node { background: var(--accent); border-color: var(--accent); color: #fff; }
.step--disc.now  .node { background: var(--surface); border-color: var(--accent); color: var(--accent-text); box-shadow: 0 0 0 3px rgba(156,101,255,0.18); }

/* ─────────────── M-6 · Section Card (Number badge · A) ─────────────── */
.sec { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; display: flex; align-items: center; gap: 12px; min-width: 0; }
.sec .num-badge { width: 28px; height: 28px; border-radius: 8px; background: var(--accent-tint); color: var(--accent-text); font-size: 12px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.sec .ttl { font-size: 14px; font-weight: 700; color: var(--ink-1); flex: 1; min-width: 0; }
.sec .ttl small { font-weight: 500; color: var(--ink-3); font-size: 12px; margin-left: 6px; }
.sec .chip { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; background: var(--pos-tint); color: var(--pos); border-radius: 4px; font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.sec .chip.draft { background: var(--subtle); color: var(--ink-3); }

/* ─────────────── M-7 · Grouped Table Row (Left-bar · B) ─────────────── */
.gtable { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.gtable th, .gtable td { padding: 9px 14px; border-bottom: 1px solid var(--line); }
.gtable th { font-weight: 500; font-size: 11.5px; color: var(--ink-3); background: var(--subtle); }
.gtable tr:last-child td { border-bottom: 0; }
.gtable--bar .gh-row td { background: var(--surface); color: var(--accent-text); position: relative; box-shadow: inset 3px 0 0 var(--accent); font-weight: 700; letter-spacing: 0.02em; font-size: 12px; }

/* ─────────────── M-8 · KPI Hero (Left-bar + gradient · A) ─────────────── */
/* Hero uses _quiet.css .kpi base + .kpi.hero modifier. No extra rules here. */

/* ─────────────── M-9 · Sidebar Coming-soon (Locked rows · C) ─────────────── */
.mock-sb { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 10px 8px; min-width: 0; }
.mock-sb .ni { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; color: var(--ink-2); font-size: 13px; font-weight: 500; cursor: default; }
.mock-sb .ni.active  { background: var(--accent-tint); color: var(--accent-text); font-weight: 600; }
.mock-sb .ni.locked  { color: var(--ink-4); }
.mock-sb .ni.locked .ic { color: var(--ink-4); }
.mock-sb .ni.locked .soon {
  margin-left: auto; font-size: 9.5px; font-weight: 700; color: var(--ink-4);
  background: var(--subtle); padding: 2px 6px; border-radius: 4px; letter-spacing: 0.04em;
}
.mock-sb .group-hdr {
  font-size: 10.5px; color: var(--ink-4); letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; padding: 14px 12px 4px;
}

/* Production sidebar — same rules applied to .nav-item.locked + nav group-hdr */
.nav-item.locked { color: var(--ink-4); cursor: default; }
.nav-item.locked:hover { background: transparent; color: var(--ink-4); }
.nav-item.locked .ico { color: var(--ink-4); }
.nav-item.locked .soon {
  margin-left: auto; font-size: 9.5px; font-weight: 700; color: var(--ink-4);
  background: var(--subtle); padding: 2px 6px; border-radius: 4px; letter-spacing: 0.04em;
}
.nav-group-hdr {
  font-size: 10.5px; color: var(--ink-4); letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700; padding: 14px 12px 4px;
}

/* ─────────────── M-10 · Calendar Day Status (Solid · A) ─────────────── */
.cal-wrap {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: 16px;
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; gap: 12px;
}
.cal {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px; background: transparent; border: 0; border-radius: 0; padding: 0;
  width: 100%; max-width: none;
}
.cal .dow { font-size: 10px; font-weight: 600; color: var(--ink-3); text-align: center; padding: 4px 0; letter-spacing: 0.04em; }
.cal .day {
  aspect-ratio: 1 / 1; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--ink-1); background: var(--bg);
  border: 1px solid transparent;
  letter-spacing: -0.01em;
}
.cal .day.empty { background: transparent; color: var(--ink-4); opacity: 0.5; }
.cal--solid .day.확정 { background: var(--accent); color: #fff; }
.cal--solid .day.진행 { background: var(--accent-tint-strong); color: var(--accent-text); }
.cal--solid .day.미생성 { background: var(--bg); color: var(--ink-3); }
.cal-head { display: flex; align-items: center; padding: 0 2px; gap: 12px; }
.cal-head .ttl { font-size: 16px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.015em; }
.cal-legend {
  display: flex; gap: 14px; padding: 8px 2px 0; border-top: 1px solid var(--line);
  margin-top: 4px; font-size: 11px; color: var(--ink-3); flex-wrap: wrap;
}
.cal-legend span { display: inline-flex; align-items: center; gap: 5px; }
.cal-legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex-shrink: 0; }

/* ─────────────── M-11 · Side Drawer — current server spec (locked) ───────────────
   No CSS lives here. Markup keeps its inline styles from _v2/_drawer*.html.
   Compat aliases at :root above let the inline styles resolve to v3 tokens.
   ─────────────────────────────────────────────────────────────────── */

/* ─────────────── M-12 · Range Picker (Dropdown · A) ─────────────── */
.rg-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 10px 0 14px;
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r-control);
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-1); cursor: pointer;
}
.rg-btn:hover { border-color: var(--line-strong); }
.rg-btn .sub { font-size: 11.5px; color: var(--ink-3); font-weight: 500; margin-left: 4px; }
.rg-menu {
  width: 220px; background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(11,11,18,.06), 0 8px 24px rgba(11,11,18,.08);
  padding: 6px; display: flex; flex-direction: column; gap: 1px;
}
.rg-menu button {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-1);
  text-align: left; padding: 8px 10px; border-radius: 6px;
  background: transparent; border: 0; cursor: pointer;
  display: flex; align-items: center; gap: 8px;
}
.rg-menu button:hover { background: var(--hover); }
.rg-menu button.on { background: var(--accent-tint); color: var(--accent-text); font-weight: 600; }
.rg-menu button .meta { margin-left: auto; font-size: 11.5px; color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.rg-menu button.on .meta { color: var(--accent-text); }
.rg-div { height: 1px; background: var(--line); margin: 4px 6px; }

/* ─────────────── M-13 · File Upload (Numbered list · C) ─────────────── */
.up-list { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.up-list .li {
  display: grid; grid-template-columns: 28px 1fr 56px 72px;
  align-items: center; gap: 12px;
  padding: 10px 14px; border-top: 1px solid var(--line);
}
.up-list .li:first-child { border-top: 0; }
.up-list .li .ic-wrap { width: 28px; height: 28px; border-radius: 6px; background: var(--accent-tint); color: var(--accent-text); display: grid; place-items: center; }
.up-list .li .nm { font-size: 13px; font-weight: 600; color: var(--ink-1); min-width: 0; overflow: hidden; }
.up-list .li .nm small { display: block; font-size: 11px; color: var(--ink-3); font-weight: 500; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-list .li .st { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; justify-self: center; }
.up-list .li .st.done  { background: var(--pos-tint); color: var(--pos); }
.up-list .li .st.empty { background: var(--subtle);   color: var(--ink-3); }
.btn-up {
  font: inherit; font-size: 12px; font-weight: 600;
  height: 30px; padding: 0;
  border-radius: 6px; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
  width: 100%;
}
.btn-up:hover { color: var(--accent-text); border-color: var(--accent-border); }

/* ─────────────── M-14 · Section Heading (Stack · B) ─────────────── */
.sh { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; min-width: 0; }
.sh--stack { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 12px; }
.sh--stack .ttl  { font-size: 16px; font-weight: 700; color: var(--ink-1); letter-spacing: -0.015em; }
.sh--stack .meta { font-size: 12px; color: var(--ink-3); margin-top: 3px; }
.sh--stack .chip { font-size: 11px; font-weight: 700; background: var(--pos-tint); color: var(--pos); padding: 3px 8px; border-radius: 999px; align-self: center; }

/* ─────────────── M-15 · Total Row (Subtle · A) ─────────────── */
.tot-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.tot-tbl th, .tot-tbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); }
.tot-tbl th { font-weight: 500; font-size: 11.5px; color: var(--ink-3); background: var(--subtle); }
.tot-tbl tr.total td { background: var(--subtle); font-weight: 700; color: var(--ink-1); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.tot-tbl tr.total td:first-child { color: var(--ink-3); font-weight: 500; }

/* ─────────────── Flush table (cards 100% width, no own border) ───────────────
   For tables inside .m-card / .sec that should span edge-to-edge.
   Provides thead bg + 1px top/bottom lines via cell borders. */
.tbl-flush { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl-flush thead th { background: var(--subtle); padding: 12px 22px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl-flush tbody td { padding: 13px 22px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; vertical-align: middle; color: var(--ink-1); }
.tbl-flush tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.tbl-flush tr.total td { background: var(--subtle); font-weight: 700; color: var(--ink-1); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.tbl-flush tr.total td:first-child { color: var(--ink-3); font-weight: 500; }
.tbl-flush .name-cell { font-weight: 600; color: var(--ink-1); }

/* M-4 14-col table total row + CMS-style thead bg (system-wide) */
.gtbl tr.total td { background: var(--subtle); font-weight: 700; color: var(--ink-1); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line); }
.gtbl tr.total td:first-child.col-label { color: var(--ink-3); font-weight: 500; }
/* When .gtbl sits inside .m-card, sit flush with card edges */
.m-card .gtbl,
.m-card .tbl-flush { border-radius: 0; }
.m-card .gtbl { border-left: 0; border-right: 0; }

/* ─────────────── M-16 · Calendar Event Tones (Dot + neutral fill · B) ─────────────── */
.cal-cell {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: 8px;
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0; width: 100%;
}
.cal-cell .day-num {
  font-size: 13.5px; font-weight: 700; color: var(--ink-1);
  font-variant-numeric: tabular-nums; padding: 2px 4px 6px;
  letter-spacing: -0.01em;
}
.cal-cell.muted .day-num { color: var(--ink-4); }
.evt {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 8px; font-size: 11px; font-weight: 600;
  border-radius: 4px; min-width: 0;
  letter-spacing: -0.01em; line-height: 1.4;
}
.evt .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evt .cnt { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 10px; }
.evt .marker { width: 6px; height: 6px; border-radius: 999px; flex-shrink: 0; }
.evt.t-amber { --et-dot: var(--t-amber); }
.evt.t-blue  { --et-dot: var(--t-blue); }
.evt.t-pink  { --et-dot: var(--t-pink); }
.evt.t-brand { --et-dot: var(--t-brand); }
.evt.v-dot {
  background: var(--bg); color: var(--ink-1); padding-left: 6px;
}
.evt.v-dot .marker { background: var(--et-dot); }
.evt.v-dot .cnt { color: var(--ink-3); font-weight: 600; }

.tone-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); }
.tone-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tone-legend i { width: 7px; height: 7px; border-radius: 999px; }
.tone-legend i.t-amber { background: var(--t-amber); }
.tone-legend i.t-blue  { background: var(--t-blue); }
.tone-legend i.t-pink  { background: var(--t-pink); }
.tone-legend i.t-brand { background: var(--t-brand); }


/* ═════════════════════════════════════════════════════════════════
   v3.1 ADDITIONS (2026-05-20) — M-19 / M-20 / M-21
   Decision context: pm-handoff/CATALOG_M17_ONWARD.md
   ═════════════════════════════════════════════════════════════════ */

/* ─────────────── M-19 · Generic Card (gcard system) ─────────────── */
.gcard       { background: var(--surface); border: 1px solid var(--line);
               border-radius: var(--r-card); display: flex; flex-direction: column;
               min-width: 0; }
.gcard-head  { padding: 18px 20px 14px; display: flex; align-items: center;
               justify-content: space-between; gap: 12px; min-width: 0; }
.gcard-head .ttl { font-size: 16px; font-weight: 700; color: var(--ink-1);
                   letter-spacing: -0.015em; }
.gcard-head .ttl .unread { display: inline-flex; align-items: center; height: 18px;
                           padding: 0 7px; background: var(--accent-tint); color: var(--accent-text);
                           border-radius: 999px; font-size: 11px; font-weight: 700; margin-left: 6px;
                           vertical-align: 2px; }
.gcard-head .actions { display: flex; gap: 8px; align-items: center; }
.gcard-body  { padding: 0 20px 22px; min-width: 0; }
.gcard-body--pad { padding: 18px 20px 22px; }   /* head 없이 단독 body일 때 */
.gcard-foot  { padding: 14px 20px 18px; border-top: 1px solid var(--line);
               display: flex; align-items: center; justify-content: flex-end;
               gap: 8px; }

/* ─────────────── M-20 · Button System (Tailwind layer 흡수 + 정리) ─────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center;
       gap: 6px; height: 40px; padding: 0 16px;
       border: 1px solid transparent; border-radius: 8px;
       font-size: 14px; font-weight: 500; line-height: 1;
       cursor: pointer; transition: background-color 120ms, border-color 120ms, color 120ms;
       text-decoration: none; flex-shrink: 0; }
.btn:disabled { cursor: not-allowed; opacity: 0.5; }
.btn:focus-visible { outline: 2px solid var(--accent-border); outline-offset: 2px; }
.btn-primary   { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-text); }
.btn-secondary { background: var(--surface); border-color: var(--line); color: var(--ink-1); }
.btn-secondary:hover { background: var(--hover); }
.btn-danger    { background: var(--surface); border-color: var(--neg-border); color: var(--neg); }
.btn-danger:hover { background: var(--neg-tint); }
.btn-ghost     { background: transparent; color: var(--ink-2); }
.btn-ghost:hover { background: var(--hover); color: var(--ink-1); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }
/* DEPRECATED — 작업자 사용 금지:
   .btn-outline → .btn-secondary
   .btn-accent  → .btn-primary
   .btn-brand   → .btn-primary
   .btn-del     → .btn-danger
*/

/* ─────────────── M-21a · Badge (small inline status) ─────────────── */
/* 페이지 상단/큰 status는 M-2 .sb.sb--out 사용. .badge는 row 안 작은 라벨 전용. */
.badge { display: inline-flex; align-items: center; gap: 4px;
         padding: 2px 8px; border: 1px solid; border-radius: 6px;
         font-size: 11px; font-weight: 500; }
.badge-muted   { background: var(--subtle);      border-color: var(--line);            color: var(--ink-3); }
.badge-success { background: var(--pos-tint);    border-color: var(--pos-border);      color: var(--pos); }
.badge-warn    { background: var(--warn-tint);   border-color: var(--warn-border);     color: var(--warn-text); }
.badge-danger  { background: var(--neg-tint);    border-color: var(--neg-border);      color: var(--neg); }
.badge-brand   { background: var(--accent-tint); border-color: var(--accent-border);   color: var(--accent-text); }
.badge-dot::before { content: ''; display: inline-block; width: 6px; height: 6px;
                     border-radius: 999px; background: currentColor; }
/* DEPRECATED — .status-badge → .sb.sb--out (M-2) */

/* ─────────────── M-21b · Table — Tailwind ver deprecated ─────────────── */
/* .tbl (단독 테이블, _quiet.css), .tbl-flush (카드 안, design-system-v3.css R-2) 가 표준.
   DEPRECATED — 작업자 사용 금지:
   .table       → .tbl
   .table-wrap  → .table-scroll
   .th-num/.td-num → .col-num (R-1)
   .th-center/.td-center → .col-status (R-1)
   .th-left/.td-left → .col-label (R-1)
   .tr-total    → tr.total (M-4/.tbl-flush 룰에 이미 정의됨)
*/


/* ═════════════════════════════════════════════════════════════════
   v3.2 ADDITIONS (2026-05-20) — M-22
   Decision context: pm-handoff/CATALOG_M17_ONWARD.md
   ═════════════════════════════════════════════════════════════════ */

/* ─────────────── M-22 · Achievement / Target Tone ─────────────── */
/* 표 셀 / inline 지표에서 달성률·목표 톤. badge·chip 아닌 글자 색만으로 표현.
   .pct-ok   = 달성/긍정 (>=100%)
   .pct-warn = 주의 (90~99%)
   .pct-low  = 부족 (<90%)                                              */
.pct-ok   { color: var(--pos);  font-weight: 700; font-variant-numeric: tabular-nums; }
.pct-warn { color: var(--warn); font-weight: 700; font-variant-numeric: tabular-nums; }
.pct-low  { color: var(--neg);  font-weight: 700; font-variant-numeric: tabular-nums; }