/* Hallmark · shape: app screen · genre: modern-minimal · theme: brand
 * paper: #ffffff · accent: #1a3d2b · display: Pretendard · body: Pretendard
 * nav: top bar with in-page links · signature: the product board, nine progress cells per product · states: loading, empty, error, full
 * axes: light/grotesk-sans/chromatic-green · posture: app · contrast: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R4 V3 · weakest: E, one accent only and the board carries the screen */
@import url("./tokens.css");
@import url("./base.css");

body { color: var(--color-ink-2); word-break: keep-all; }
h1, h2, h3 { color: var(--color-ink); line-height: 1.3; max-width: none; }
h2 { margin-block-end: var(--space-sm); }
strong { color: var(--color-ink); font-weight: 600; }
.muted { color: var(--color-muted); font-size: var(--text-sm); }
.note { margin-block: var(--space-sm); font-size: var(--text-sm); max-width: none; }
.lead { max-width: none; }

/* 위쪽 막대 */
.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: var(--color-paper); border-block-end: var(--rule-hair) solid var(--color-rule); }
.bar-in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs) var(--space-lg); padding-block: var(--space-xs); }
.brand { color: var(--color-ink); font-weight: 600; text-decoration: none; }
.bar nav { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); font-size: var(--text-sm); }
.bar nav a { padding-block: var(--space-xs); text-decoration: none; }
.bar nav a:hover { text-decoration: underline; }
.bar-tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-sm); margin-inline-start: auto; font-size: var(--text-sm); }

/* 본문 */
main { padding-block: var(--space-md) var(--space-3xl); }
section { margin-block-start: var(--section-gap); scroll-margin-top: var(--space-3xl); }
section:first-child { margin-block-start: var(--space-md); }
section:nth-child(2) { margin-block-start: var(--space-lg); }
.state { padding-block: var(--space-lg); max-width: none; }
.state.error { color: var(--color-error); }

.btn { min-block-size: var(--control); padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.btn:hover { background: var(--color-paper-2); border-color: var(--color-accent); }
.btn:active { background: var(--color-paper-3); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }
.btn[aria-pressed="true"]:hover { border-color: var(--color-accent-2); background: var(--color-accent-2); }
.err { color: var(--color-error); }
#key-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
#key { inline-size: 9rem; min-block-size: var(--control); margin-inline-start: var(--space-2xs); padding: 0 var(--space-sm); border: var(--rule-hair) solid var(--color-muted); border-radius: var(--radius-control); background: var(--color-paper); color: var(--color-ink); }
#key:hover { border-color: var(--color-accent); }
.tag { display: inline-block; padding: 0 var(--space-xs); border-radius: var(--radius-pill); background: var(--color-paper-3); color: var(--color-ink); font-size: var(--text-xs); font-weight: 500; line-height: 1.7; white-space: nowrap; }
.tag.cur { background: var(--color-accent); color: var(--color-accent-ink); }

/* 맨 위 숫자 */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--space-xs); margin-block: var(--space-sm) 0; }
.figures div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--space-sm); padding: var(--space-xs) var(--space-md); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.figures dt { font-size: var(--text-sm); }
.figures dd { margin: 0; color: var(--color-accent); font-size: var(--text-2xl); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.3; }

/* 표 */
.scroll { overflow-x: auto; }
table { inline-size: 100%; border-collapse: collapse; font-size: var(--text-sm); }
th, td { padding: var(--space-xs) var(--space-sm); border-block-end: var(--rule-hair) solid var(--color-rule); text-align: start; vertical-align: middle; }
thead th { color: var(--color-ink-2); font-weight: 600; white-space: nowrap; }
tbody th { color: var(--color-ink); font-weight: 500; }

/* 진행 현황판 */
.key { display: inline-flex; align-items: center; gap: var(--space-2xs); margin-inline-start: var(--space-xs); white-space: nowrap; }
.group { border-block-start: var(--rule-hair) solid var(--color-rule); }
.group:last-child { border-block-end: var(--rule-hair) solid var(--color-rule); }
.group summary { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) 9.5rem 7.5rem; align-items: center; gap: var(--space-md); min-block-size: 44px; padding-inline: var(--space-xs); cursor: pointer; list-style: none; }
.group summary::-webkit-details-marker { display: none; }
.group summary:hover, .group[open] summary { background: var(--color-paper-2); }
.g-name { color: var(--color-ink); font-weight: 600; }
.g-bar { position: relative; block-size: 12px; border-radius: var(--radius-pill); background: var(--color-paper-2); }
.g-bar span { position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: calc(var(--w) * 1%); border-radius: var(--radius-pill); }
.g-bar .all { background: var(--color-paper-3); }
.g-bar .stock { background: var(--color-accent-2); }
.g-made { color: var(--color-accent); font-weight: 600; text-align: end; }
.group table { min-inline-size: 34rem; }
.group td:last-child { inline-size: 45%; }
.steps { display: inline-flex; gap: var(--space-2xs); vertical-align: middle; }
.s { display: inline-block; inline-size: 14px; block-size: 14px; border: 1.5px solid var(--color-muted); border-radius: 3px; }
.steps .s:nth-child(5), .steps .s:nth-child(7) { margin-inline-start: var(--space-xs); }
.s.done { border-color: var(--color-accent); background: var(--color-accent); }
.s.warn { border-color: var(--color-accent); background: var(--color-accent-2); box-shadow: inset 0 0 0 2.5px var(--color-paper); }
/* 체크 모드: 칸이 누르는 단추가 된다 */
button.s { inline-size: 28px; block-size: 28px; padding: 0; border-radius: var(--radius-control); background: var(--color-paper); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
button.s:hover { border-color: var(--color-accent); background: var(--color-paper-3); }
button.s:active { background: var(--color-accent-2); }
button.s.done { background: var(--color-accent); }
button.s.done:hover { background: var(--color-accent-2); }
button.s.warn { background: var(--color-accent-2); }

/* 한 일과 할 일 */
.cols3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: var(--space-lg); }
.cols3 h3 { padding-block-end: var(--space-xs); border-block-end: 2px solid var(--color-accent); }
.cols3 ul { margin: 0; padding: 0; list-style: none; }
.cols3 li { padding-block: var(--space-xs); border-block-end: var(--rule-hair) solid var(--color-rule); font-size: var(--text-sm); }

/* 로드맵 */
.road { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
.road li { display: grid; gap: var(--space-2xs); align-content: start; padding: var(--space-sm); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); font-size: var(--text-sm); }
.road li.done { background: var(--color-paper-2); }
.road li.cur { border: 2px solid var(--color-accent); }
.road .tag { justify-self: start; }
.road .muted { color: var(--color-ink-2); }

@media (max-width: 40rem) {
  .bar { position: static; }
  .group summary { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2xs) var(--space-sm); padding-block: var(--space-xs); }
  .g-bar { grid-column: 1 / -1; grid-row: 2; }
  .g-made { grid-column: 1 / -1; text-align: start; }
  .g-made:empty { display: none; }
}
@media (pointer: coarse) { :root { --control: 44px; } button.s { inline-size: 36px; block-size: 36px; } }