/* 공통 디자인 값. 화면 상태는 .btn:disabled, .btn.ghost, .btn.warn, .tag.ok, .tag.wait, .tag.warn,
   .saved-mark, .dirty, .done-banner, .st-done, .st-mid, .st-idle, .choice.picked, .direction.picked,
   .cover-pick.on, .part-pick.on, .stepper a.on, .view-tabs a.on, .pin.on, .minor li.held 로 구분한다. */
:root {
  --font-sans: "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-md: 14px;
  --text-lg: 16px;
  --text-xl: 18px;
  --text-title: 22px;
  --text-display: 34px;
  --space-2: 2px;
  --space-3: 3px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-80: 80px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-card: 16px;
  --radius-panel: 18px;
  --radius-pill: 999px;
  --content-lead: 720px;
  --layout-side: 240px;
  --ink: #161616;
  --muted: #5e5e5e;
  --lead: #333;
  --ink-strong: #111;
  --chip: var(--ink-strong);
  --on-strong: #fff;
  --on-strong-muted: #ddd;
  --paper: #fff;
  --wash: #f3f3f3;
  --line: #e4e4e4;
  --input-line: #ccc;
  --chip-line: #ddd;
  --swatch-line: #b8b8b8;
  --hairline: #8a8a8a;
  --rail: #eee;
  --ribbon: #5d6a78;
  --ok: #1f6b45;
  --ok-wash: #e8f6ee;
  --wait: #8a5a12;
  --warn: #8d2f2f;
  --flash: #f6f1e7;
  --notice: #f8efe8;
  --note: #f6f6f6;
  --dirty: #fff6d8;
  --pick: #f7f7f7;
  --row-out: #fbf7f4;
  --row-hold: #fff3c4;
  --pin-on: #9a3412;
  --chart-parent: #c4a574;
  --held: #6b6b6b;
  --disabled: #9a9a9a;
  --disabled-ink: #888;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  --surface-matte: linear-gradient(#eceae6, #d9d6d0);
  --surface-satin: linear-gradient(160deg, #f7f7f7, #d5d5d5 46%, #f3f3f3);
  --surface-soft: linear-gradient(#f3f1ea, #e4efe4);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font-family: var(--font-sans); color: var(--ink); background: var(--paper); word-break: keep-all; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
.topbar { height: 8px; background: var(--ink-strong); }
.header { display: flex; align-items: center; gap: var(--space-28); padding: var(--space-18) var(--space-32); border-bottom: 1px solid var(--line); }
.brand { display: flex; flex-direction: column; text-decoration: none; min-width: 140px; }
.brand b { font-size: var(--text-xl); letter-spacing: 0.08em; }
.brand span { color: var(--muted); font-size: var(--text-xs); }
.nav { display: flex; gap: var(--space-22); align-items: center; flex: 1; }
.nav > a, .drop > summary { text-decoration: none; font-weight: 650; list-style: none; cursor: pointer; }
.drop { position: relative; }
.drop summary { display: flex; }
.drop summary::-webkit-details-marker { display: none; }
.menu { position: absolute; z-index: 5; top: 28px; left: 0; min-width: 220px; background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow); padding: var(--space-8); }
.menu a { display: block; padding: var(--space-8) var(--space-10); text-decoration: none; }
.menu a:hover, .menu a.on { background: var(--wash); }
.header-side { margin-left: auto; color: var(--muted); font-size: var(--text-sm); }
.ribbon-layout { display: grid; grid-template-columns: 46px 1fr; min-height: calc(100vh - 78px); }
.ribbon { background: var(--ribbon); color: var(--on-strong); writing-mode: vertical-rl; transform: rotate(180deg); display: grid; place-items: center; letter-spacing: 0.14em; font-size: var(--text-xs); }
.page { padding: var(--space-28) var(--space-32) var(--space-80); }
.kicker { color: var(--muted); font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
h1 { font-size: var(--text-display); font-weight: 650; margin: var(--space-8) 0 var(--space-12); }
h2 { font-size: var(--text-title); margin: 0 0 var(--space-8); }
.lead { max-width: var(--content-lead); color: var(--lead); line-height: 1.6; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-16); }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow); }
.card a { text-decoration: none; display: block; }
.card .media, .ph { aspect-ratio: 4 / 3; background: var(--wash); display: grid; place-items: center; text-align: center; padding: var(--space-16); color: var(--muted); }
.card .media img, .frame img { width: 100%; height: 100%; object-fit: cover; }
.card .body, .pad { padding: var(--space-16); }
.tag { display: inline-block; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: var(--space-3) var(--space-8); font-size: var(--text-xs); margin-right: var(--space-6); }
.tag.ok { color: var(--ok); }
.saved-mark { font-size: var(--text-xl); font-weight: 700; padding: var(--space-8) var(--space-16); border-color: var(--ok); }
.tag.wait { color: var(--wait); }
.tag.warn { color: var(--warn); }
.layout { display: grid; grid-template-columns: var(--layout-side) minmax(0, 1fr); gap: var(--space-24); }
.layout > section { min-width: 0; }
.stepper { position: sticky; top: 12px; }
.stepper a { display: grid; grid-template-columns: 28px 1fr; gap: var(--space-8); text-decoration: none; padding: var(--space-8); border-radius: var(--radius-md); }
.stepper a.on { background: var(--ink-strong); color: var(--on-strong); }
.stepper small { display: block; color: var(--muted); }
.stepper a.on small { color: var(--on-strong-muted); }
.phase { margin: var(--space-14) 0 var(--space-6); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--muted); }
.panel { border: 1px solid var(--line); border-radius: var(--radius-panel); padding: var(--space-20); background: var(--paper); }
.panel + .panel, .stack > * + * { margin-top: var(--space-16); }
label { display: block; font-size: var(--text-sm); margin: var(--space-12) 0 var(--space-6); }
input[type="text"], textarea, select { width: 100%; border: 1px solid var(--input-line); border-radius: var(--radius-md); padding: var(--space-10) var(--space-12); background: var(--paper); }
textarea { min-height: 96px; resize: vertical; }
.row { display: flex; gap: var(--space-8); flex-wrap: wrap; align-items: center; }
.btn { border: 1px solid var(--ink-strong); background: var(--ink-strong); color: var(--on-strong); border-radius: var(--radius-pill); padding: var(--space-10) var(--space-16); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: var(--space-6); }
.btn.ghost { background: var(--paper); color: var(--ink-strong); }
.btn.warn { background: var(--paper); color: var(--warn); border-color: var(--warn); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.flash { background: var(--flash); border-radius: var(--radius-lg); padding: var(--space-10) var(--space-12); }
.notice { background: var(--notice); border-radius: var(--radius-lg); padding: var(--space-10) var(--space-12); }
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.swatch { width: 28px; height: 28px; border-radius: var(--radius-xs); border: 1px solid var(--swatch-line); box-sizing: border-box; display: inline-block; flex: none; }
.sample-color { display: inline-flex; align-items: center; gap: var(--space-8); }
.sample-color .code { font-variant-numeric: tabular-nums; }
table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
th, td { border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; padding: var(--space-8) var(--space-6); }
.muted { color: var(--muted); }
.bars { display: grid; gap: var(--space-6); }
.bar { display: grid; grid-template-columns: minmax(120px, 200px) 1fr auto; gap: var(--space-8); align-items: center; font-size: var(--text-sm); }
.bar i { display: block; height: 8px; background: var(--ink-strong); border-radius: var(--radius-pill); }
.chips { display: flex; gap: var(--space-8); flex-wrap: wrap; }
.colorchip { width: 72px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--chip-line); }
.marker { width: 22px; height: 22px; border-radius: 50%; background: var(--ink-strong); color: var(--on-strong); display: inline-grid; place-items: center; font-size: var(--text-xs); }
.footer-nav { display: flex; justify-content: space-between; gap: var(--space-12); margin-top: var(--space-18); }
.site-foot { border-top: 1px solid var(--line); padding: var(--space-18) var(--space-32) var(--space-28); color: var(--muted); font-size: var(--text-xs); }
@media (max-width: 900px) {
  .header, .page { padding-left: var(--space-16); padding-right: var(--space-16); }
  .header { flex-wrap: wrap; gap: var(--space-12); }
  .nav { flex-wrap: wrap; gap: var(--space-12); }
  .header-side { display: none; }
  .layout, .compare, .ribbon-layout { display: block; }
  .ribbon { writing-mode: horizontal-tb; transform: none; padding: var(--space-8) var(--space-16); }
  .stepper { display: flex; gap: var(--space-6); overflow: auto; position: static; }
  .stepper a { min-width: 140px; }
  .bar { grid-template-columns: 1fr; }
}
.casebar { display: flex; justify-content: space-between; gap: var(--space-16); align-items: end; }
.switcher { font-size: var(--text-sm); color: var(--muted); }
.switcher select { min-width: 180px; }
.st { font-style: normal; }
.st-done { color: var(--ok); }
.check { width: 16px; height: 16px; vertical-align: -2px; }
.done-banner { display: flex; align-items: center; gap: var(--space-10); margin: 0 0 var(--space-16); padding: var(--space-14) var(--space-18); border: 1px solid var(--ok); border-radius: var(--radius-xl); background: var(--ok-wash); color: var(--ok); font-size: var(--text-xl); font-weight: 700; }
.done-banner .check { width: 22px; height: 22px; }
.stepper .num .check { width: 16px; height: 16px; }
.tag .check { width: 16px; height: 16px; }
.next-main { font-size: var(--text-lg); padding: var(--space-12) var(--space-18); }
.st-mid { color: var(--wait); }
.st-idle { color: var(--muted); }
.stepper a.on .st { color: var(--on-strong); }
.demo-note { background: var(--note); border-radius: var(--radius-lg); padding: var(--space-10) var(--space-12); }
.dirty { background: var(--dirty); }
.fold { margin-top: var(--space-12); border-top: 1px solid var(--line); padding-top: var(--space-8); }
.fold.slim { border: 0; padding: 0; margin-top: var(--space-8); }
.fold summary { cursor: pointer; font-weight: 650; }
.nowrap { white-space: nowrap; }
.empty-slot { gap: var(--space-6); }
.empty-slot .ico, .file-btn .ico, .tag .ico { width: 22px; height: 22px; }
.file-btn { display: inline-flex; align-items: center; gap: var(--space-6); border: 1px solid var(--ink-strong); border-radius: var(--radius-pill); padding: var(--space-8) var(--space-12); cursor: pointer; }
.file-btn input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.float-tag { position: absolute; left: 10px; top: 10px; background: var(--paper); border-radius: var(--radius-pill); padding: var(--space-4) var(--space-8); font-size: var(--text-xs); }
.media { position: relative; }
.mood textarea { min-height: 64px; }
.key-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rgb { margin: 0; }
.rgb .colorchip { display: block; }
.surface { height: 72px; border-radius: var(--radius-lg); border: 1px solid var(--chip-line); margin: var(--space-10) 0; }
.surface.matte { background: var(--surface-matte); }
.surface.satin { background: var(--surface-satin); }
.surface.soft { background: var(--surface-soft); }
.palette { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.pill { border: 1px solid var(--line); border-radius: var(--radius-pill); padding: var(--space-4) var(--space-8); }
.direction.picked { outline: 2px solid var(--ink-strong); }
.spec-dl { display: grid; gap: var(--space-4); }
.spec-dl div { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: var(--space-8); }
.spec-dl dd, .direction .pad, .direction .ph { overflow-wrap: anywhere; }
.concept-dl div { grid-template-columns: 64px minmax(0, 1fr); }
.direction-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cover-meta { margin: var(--space-8) 0 0; font-size: var(--text-sm); color: var(--muted); }
.cover-label { margin: var(--space-12) 0 var(--space-6); font-size: var(--text-sm); }
.cover-picks { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.cover-pick { width: 64px; height: 64px; padding: 0; border: 1px solid var(--swatch-line); border-radius: var(--radius-sm); background: var(--paper); cursor: pointer; overflow: hidden; }
.cover-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cover-pick.on { outline: 2px solid var(--ink-strong); }
.ref-sample { border-top: 1px solid var(--line); margin-top: var(--space-10); padding-top: var(--space-8); }
.ref-sample .sample-color { flex-wrap: wrap; }
.changed { color: var(--wait); font-weight: 700; }
.intent { font-size: var(--text-xl); line-height: 1.5; }
.hero, .frame img { width: 100%; border-radius: var(--radius-lg); }
.evidence { width: 120px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); }
.split { display: grid; grid-template-columns: minmax(180px, var(--layout-side)) minmax(0, 1fr); gap: var(--space-16); }
.split > * { min-width: 0; }
.part-link { grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); }
.part-link .stage-wrap { min-width: 0; overflow: hidden; }
.part-picks { display: grid; gap: var(--space-8); }
.part-pick { text-align: left; border: 1px solid var(--line); background: var(--paper); border-radius: var(--radius-lg); padding: var(--space-10); cursor: pointer; display: grid; gap: var(--space-2); }
.part-pick.on { border-color: var(--ink-strong); background: var(--pick); }
.pane { display: none; margin-top: var(--space-12); }
.pane.on { display: block; }
.workbench { display: grid; grid-template-columns: 220px minmax(0, 1fr) 280px; gap: var(--space-12); align-items: start; }
.workbench .pane { margin-top: 0; }
.guard { background: var(--dirty); border-radius: var(--radius-lg); padding: var(--space-12); margin-bottom: var(--space-12); }
.table-wrap { overflow-x: auto; }
table.parts { width: 100%; min-width: 0; table-layout: fixed; }
.part-code { display: block; margin-top: var(--space-4); color: var(--muted); font-size: var(--text-xs); }
.c-name { width: 34%; }
.c-code { width: 12%; }
.c-act { width: 10%; }
.c-inc { width: 16%; }
.c-why { width: 28%; }
table.parts select, table.parts input[type="text"] { width: 100%; min-width: 0; }
tr.is-out { background: var(--row-out); }
.cell-label { display: none; }
@media (max-width: 900px) {
  table.parts { min-width: 0; table-layout: auto; }
  table.parts tr:first-child { display: none; }
  table.parts, table.parts tr, table.parts td { display: block; width: auto; }
  table.parts tr { padding: var(--space-8) 0 var(--space-12); }
  .cell-label { display: block; color: var(--muted); font-size: var(--text-xs); margin-top: var(--space-8); }
  table.parts select { width: 100%; min-width: 8rem; }
}
.card.cand { overflow: visible; }
.choice { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--space-8); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--space-10); margin-top: var(--space-8); }
.choice.picked { border-color: var(--ink-strong); }
.choice > span { min-width: 0; line-height: 1.55; overflow-wrap: anywhere; }
.choice .meta { display: block; margin-top: var(--space-4); }
.cand + .cand { margin-top: var(--space-12); }
.q3-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-16); align-items: start; }
.board { columns: 3; column-gap: var(--space-8); margin: var(--space-12) 0; }
.tile { break-inside: avoid; margin: 0 0 var(--space-8); position: relative; }
.tile img { width: 100%; height: auto; display: block; border-radius: var(--radius-md); }
.tile .num { position: absolute; left: 8px; top: 8px; background: var(--ink-strong); color: var(--on-strong); border-radius: var(--radius-pill); width: 22px; height: 22px; display: grid; place-items: center; font-size: var(--text-xs); }
.tile .pick { position: absolute; right: 8px; top: 8px; background: var(--paper); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-6); font-size: var(--text-xs); }
.dropzone { border: 1px dashed var(--ink-strong); border-radius: var(--radius-card); padding: var(--space-16); text-align: center; margin-top: var(--space-12); }
.dropzone input { display: block; margin: var(--space-8) auto; }
.stage { position: relative; display: block; max-width: 100%; }
.stage img { width: 100%; height: auto; display: block; }
.leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.leaders line { stroke: var(--ink-strong); stroke-width: 1.5; }
.leaders circle { fill: var(--ink-strong); }
.pin { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--ink-strong); color: var(--on-strong); cursor: pointer; z-index: 2; }
.pin.on { background: var(--pin-on); outline: 2px solid var(--pin-on); }
tr[data-pin] { cursor: pointer; }
tr.on { background: var(--row-hold); }
tr.on { background: var(--note); }
@media (max-width: 900px) {
  .q3-split { display: block; }
  .board { columns: 2; }
}
.cmf-block { margin: var(--space-18) 0; }
.cmf-block h4, .cmf-detail h4 { margin: var(--space-14) 0 var(--space-6); font-size: var(--text-lg); }
.cmf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
.emotion-table { width: 100%; border-collapse: collapse; font-size: var(--text-md); }
.emotion-table th, .emotion-table td { border-bottom: 1px solid var(--line); text-align: left; padding: var(--space-6) var(--space-4); vertical-align: top; }
.emotion-table caption { caption-side: bottom; color: var(--muted); text-align: left; padding-top: var(--space-6); }
.spec-props { list-style: none; margin: 0; padding: 0; }
.spec-props li { display: grid; grid-template-columns: minmax(8.5rem, 13rem) minmax(0, 1fr); gap: var(--space-2) var(--space-8); margin: 0 0 var(--space-8); align-items: start; }
.spec-props .muted { grid-column: 2; }
.spec-prop-name { font-weight: 650; overflow-wrap: anywhere; }
.spec-prop-value { overflow-wrap: anywhere; line-height: 1.55; }
table.spec-table { width: 100%; table-layout: fixed; }
table.spec-table th, table.spec-table td { vertical-align: top; padding: var(--space-8) var(--space-6); line-height: 1.45; overflow-wrap: anywhere; word-break: normal; }
table.spec-table .spec-id, table.spec-table .part-code { overflow-wrap: anywhere; }
.spec-detail td { padding-top: 0; }
.spec-detail-grid { display: block; }
.spec-copy { margin: 0 0 var(--space-12); }
.spec-copy h4 { margin: 0 0 var(--space-4); font-size: var(--text-md); font-weight: 650; }
.spec-copy p, .summary-copy, .full-copy p { margin: 0; line-height: 1.6; white-space: pre-line; overflow: visible; text-overflow: unset; }
.summary-copy { margin: var(--space-2) 0; }
.full-copy { margin-top: var(--space-8); }
.full-copy summary { cursor: pointer; font-size: var(--text-sm); }
.full-copy .spec-copy, .full-copy p { margin-top: var(--space-8); }
.choice .meta { display: block; margin-top: var(--space-6); line-height: 1.6; white-space: normal; }
.spec-detail-title { margin: 0 0 var(--space-6); font-size: var(--text-sm); font-weight: 650; }
@media (max-width: 900px) {
  table.spec-table, table.spec-table thead, table.spec-table tbody, table.spec-table tr, table.spec-table td { display: block; width: 100%; box-sizing: border-box; }
  table.spec-table tr:first-of-type { display: none; }
  table.spec-table tr[data-spec-row], table.spec-table tr.spec-detail { border: 1px solid var(--line); border-radius: var(--radius-lg); margin: 0 0 var(--space-12); padding: var(--space-8) var(--space-10); }
  table.spec-table tr.spec-detail { margin-top: -13px; border-top: 0; border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
  .spec-detail-grid { grid-template-columns: 1fr; row-gap: var(--space-10); }
  .spec-detail-title { display: none; }
  .spec-props li { display: block; }
  .spec-prop-name, .spec-prop-value, .spec-props .muted { display: block; grid-column: auto; }
}
.emotion-link p { margin: var(--space-2) 0; }
.cmf-stats p { margin: 0; padding: var(--space-10) var(--space-12); background: var(--wash); border-radius: var(--radius-lg); }
.cmf-stats strong { display: block; font-size: var(--text-title); }
.cmf-stats span, .cmf-scope { color: var(--muted); font-size: var(--text-sm); }
.cmf-bar { display: flex; width: 100%; height: 28px; border-radius: var(--radius-sm); overflow: hidden; background: var(--wash); }
.cmf-seg { flex-grow: 0; flex-shrink: 0; height: 28px; border: 0; padding: 0; min-width: 0; cursor: pointer; }
.cmf-seg.hairline, .swatch.hairline { box-shadow: inset 0 0 0 1px var(--hairline); }
.cmf-seg:focus-visible, .cmf-legend button:focus-visible, .cmf-track:focus-visible { outline: 2px solid var(--ink-strong); outline-offset: 2px; }
.cmf-legend { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-12); list-style: none; padding: var(--space-8) 0 0; margin: 0; }
.cmf-legend button, .cmf-track { display: flex; gap: var(--space-6); align-items: center; border: 0; background: transparent; cursor: pointer; text-align: left; padding: 0; }
.cmf-track { width: 100%; margin: var(--space-6) 0; }
.cmf-rail { flex: 1; height: 12px; background: var(--rail); border-radius: var(--radius-pill); overflow: hidden; }
.cmf-track .cmf-fill { display: block; height: 12px; border-radius: var(--radius-pill); }
.cmf-fill.product { background: var(--ribbon); }
.cmf-fill.parent { background: var(--chart-parent); }
.cmf-track b { margin-left: auto; font-weight: 650; white-space: nowrap; }
.cmf-expr p { margin: var(--space-10) 0 0; }
.cmf-key { display: flex; gap: var(--space-8); align-items: center; }
.cmf-dot { width: 12px; height: 12px; border-radius: var(--radius-pill); display: inline-block; }
.cmf-dot.product { background: var(--ribbon); }
.cmf-dot.parent { background: var(--chart-parent); }
.cmf-combo { display: flex; gap: var(--space-12); align-items: center; }
.cmf-combo svg { width: 48px; height: 48px; flex: none; }
.cmf-detail table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); margin: var(--space-8) 0 var(--space-16); }
.cmf-detail th, .cmf-detail td { border-bottom: 1px solid var(--line); text-align: left; padding: var(--space-6) var(--space-4); vertical-align: top; }
.cmf-detail caption { caption-side: bottom; color: var(--muted); text-align: left; padding-top: var(--space-4); }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
@media (max-width: 900px) {
  .cmf-stats { display: block; }
  .cmf-combo { align-items: flex-start; }
}
.render-views { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-12); }
.render-views img { width: 100%; border-radius: var(--radius-lg); }
.render-views figcaption { margin-top: var(--space-6); }
.view-slot { position: relative; }
.view-slot .ph { min-height: 160px; }
.file-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.slot-del { position: absolute; top: 36px; right: 8px; margin: 0; }
.icon-del { width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: var(--paper); color: var(--warn); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); }
.icon-del svg { width: 16px; height: 16px; }
.view-label { font-weight: 650; margin: 0 0 var(--space-8); }
.view-badge { position: absolute; left: 8px; bottom: 8px; background: var(--ink-strong); color: var(--on-strong); border-radius: var(--radius-pill); padding: var(--space-2) var(--space-8); font-size: var(--text-xs); }
.view-tabs { display: flex; flex-wrap: wrap; gap: var(--space-8); margin: var(--space-8) 0 var(--space-12); max-width: 100%; }
.view-tabs a { text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: var(--space-6) var(--space-12); white-space: nowrap; }
.view-tabs a.on { background: var(--ink-strong); color: var(--on-strong); }
.tile-del { position: absolute; right: 8px; bottom: 8px; }
.stage { position: relative; }
.picker { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-12); margin-top: var(--space-28); }
.picker label { display: grid; gap: var(--space-6); min-width: 260px; color: var(--muted); font-size: var(--text-sm); font-weight: 650; }
.picker select { height: 44px; border: 1px solid var(--ink-strong); border-radius: var(--radius-lg); padding: 0 var(--space-12); background: var(--paper); color: var(--ink); font-weight: 450; }
.picker select:disabled { background: var(--wash); color: var(--disabled-ink); border-color: var(--line); }
.catalog { display: grid; gap: var(--space-28); }
.major { border-top: 1px solid var(--line); padding-top: var(--space-18); }
.major-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); margin-bottom: var(--space-12); }
.major-head span, .minor h3 { color: var(--muted); font-size: var(--text-sm); font-weight: 650; }
.minor { margin: 0 0 var(--space-16); }
.minor h3 { margin: 0 0 var(--space-8); }
.minor ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--layout-side), 1fr)); gap: var(--space-8); }
.minor li { border: 1px solid var(--line); border-radius: var(--radius-lg); min-height: 64px; }
.minor li label, .minor li.held { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: var(--space-2) var(--space-8); padding: var(--space-10) var(--space-12); height: 100%; }
.minor li label { grid-template-columns: 18px 1fr auto; cursor: pointer; }
.minor input { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 16px; height: 16px; margin: 0; }
.minor .pname { grid-column: 2; grid-row: 1; }
.minor .pcode { grid-column: 2; grid-row: 2; color: var(--muted); font-size: var(--text-xs); }
.minor .pstate { grid-column: 3; grid-row: 1 / span 2; align-self: center; color: var(--muted); font-size: var(--text-xs); }
.minor li.held { background: var(--wash); color: var(--held); }
.minor li.held .pname, .minor li.held .pcode { grid-column: 1; }
.minor li.held .pstate { grid-column: 2; }
.minor li.ready:has(input:checked) { border-color: var(--ink-strong); background: var(--pick); }
.minor li.ready:has(input:checked) .pstate { color: var(--ink); font-weight: 650; }
.startbar { position: sticky; bottom: 0; display: flex; justify-content: space-between; align-items: center; gap: var(--space-12); padding: var(--space-14) 0; background: var(--paper); border-top: 1px solid var(--line); }
.startbar p { margin: 0; }
.btn-note { font-size: var(--text-xs); opacity: 0.7; }
.btn:disabled { background: var(--disabled); border-color: var(--disabled); color: var(--on-strong); }
@media (max-width: 900px) {
  .casebar, .split, .workbench { display: block; }
  .workbench > * + *, .split > * + * { margin-top: var(--space-12); }
  .part-picks { grid-auto-flow: column; grid-auto-columns: minmax(160px, 70%); overflow-x: auto; }
}
@media print {
  .topbar, .header, .ribbon, .stepper, .footer-nav, .site-foot, .no-print { display: none !important; }
  .layout, .ribbon-layout { display: block; }
  .page { padding: 0; }
}