/* 값은 docs/design/tokens.md와 같게 유지한다. 시험지처럼 선과 글자로만 구분한다. */
@font-face { font-family: "IBM Plex Sans KR"; src: url(fonts/IBMPlexSansKR-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Sans KR"; src: url(fonts/IBMPlexSansKR-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
:root {
  --bg: #ffffff; --text: #111111; --text-2: #666666; --line: #dddddd; --line-2: #111111;
  --accent: #1647e8; --good: #1a7f37; --bad: #c62828;
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px;
  --r: 4px; --row: 52px;
  --font: "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #111111; --text: #eeeeee; --text-2: #a0a0a0; --line: #333333; --line-2: #eeeeee;
    --accent: #4d78f0; --good: #5fd07a; --bad: #ff7b72; }
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--bg); color: var(--text); font: 400 16px/1.6 var(--font); -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
.page { max-width: 640px; margin: 0 auto; padding: var(--s2) var(--s3) 104px; }
header { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s2) 0; border-bottom: 2px solid var(--line-2); }
h1 { font-size: 18px; font-weight: 700; line-height: 1.4; }
header nav { display: flex; gap: var(--s3); font-size: 14px; color: var(--text-2); }
header nav a[aria-current] { color: var(--text); font-weight: 700; }
h2 { font-size: 14px; font-weight: 700; margin: var(--s4) 0 0; padding-bottom: var(--s1); }
.sub { color: var(--text-2); font-size: 14px; }
.row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); min-height: var(--row); border-top: 1px solid var(--line); }
.row:last-child { border-bottom: 1px solid var(--line); }
.row .meta { color: var(--text-2); font-size: 14px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.resume { font-weight: 700; color: var(--accent); }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
th { text-align: right; font-size: 14px; font-weight: 400; color: var(--text-2); padding: var(--s2) 0; border-bottom: 1px solid var(--line-2); }
td { text-align: right; padding: 14px 0; border-bottom: 1px solid var(--line); }
th:first-child, td:first-child { text-align: left; }
.summary { margin-top: var(--s3); }
.bar { display: flex; justify-content: space-between; align-items: center; height: 44px; font-size: 14px; color: var(--text-2); border-bottom: 2px solid var(--line-2); }
.stem { margin: var(--s3) 0; font-size: 17px; font-weight: 700; word-break: keep-all; white-space: pre-line; }
.choice { display: flex; gap: var(--s2); width: 100%; text-align: left; padding: 12px 0; border-top: 1px solid var(--line); word-break: keep-all; }
.choice:last-child { border-bottom: 1px solid var(--line); }
.choice b { flex: none; width: 24px; height: 24px; line-height: 22px; margin-top: 2px; text-align: center; border: 1px solid var(--text-2); border-radius: 50%; font-size: 14px; font-weight: 400; }
.choice span { flex: 1; }
.choice em { flex: none; font-style: normal; font-size: 14px; font-weight: 700; padding-top: 2px; }
.choice.on b { background: var(--text); border-color: var(--text); color: var(--bg); }
.choice.good b { background: var(--good); border-color: var(--good); color: var(--bg); } .choice.good em { color: var(--good); }
.choice.bad b { background: var(--bad); border-color: var(--bad); color: var(--bg); } .choice.bad em { color: var(--bad); }
.paper { background: #fff; margin: var(--s2) calc(var(--s3) * -1) 0; padding: var(--s1); }
.paper img { display: block; width: 100%; height: auto; }
@media (min-width: 640px) { .paper { margin-left: 0; margin-right: 0; padding: 0; } }
.answers { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line-2); border-radius: var(--r); margin-top: var(--s3); }
.answers button { height: var(--row); font-size: 18px; }
.answers button + button { border-left: 1px solid var(--line-2); }
.answers button.on { background: var(--text); color: var(--bg); }
.answers button.good { background: var(--good); color: var(--bg); }
.answers button.bad { background: var(--bad); color: var(--bg); }
.cta { position: fixed; left: 0; right: 0; bottom: 0; padding: var(--s2) var(--s3) calc(var(--s2) + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line); }
.cta button, .btn { display: block; width: 100%; max-width: 608px; margin: 0 auto; height: var(--row); line-height: var(--row); text-align: center; border-radius: var(--r); background: var(--accent); color: #fff; font-weight: 700; }
.cta button:disabled { background: var(--line); color: var(--text-2); cursor: default; }
.result { margin-top: var(--s3); font-weight: 700; font-size: 17px; }
.result.good { color: var(--good); } .result.bad { color: var(--bad); }
.note { word-break: keep-all; color: var(--text-2); font-size: 14px; }
.link { color: var(--text-2); text-decoration: underline; font-size: 14px; display: inline-block; padding: var(--s2) 0; }
/* 구현 단계에서 추가 */
.row { width: 100%; text-align: left; }
.row > span:first-child { flex: 1; }
.warn { margin-top: var(--s2); font-size: 14px; color: var(--text-2); }
.imgfail { padding: var(--s4) var(--s3); text-align: center; color: var(--text-2); font-size: 14px; border: 1px solid var(--line); }
.imgfail button { display: block; margin: var(--s2) auto 0; padding: var(--s2) var(--s3); border: 1px solid var(--line-2); border-radius: var(--r); color: var(--text); }
.link { background: none; }
.choice:disabled, .answers button:disabled { cursor: default; }
.choice:focus-visible, .answers button:focus-visible, .row:focus-visible, .cta button:focus-visible, .link:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.empty { margin-top: var(--s4); color: var(--text-2); }
.deleted { margin: var(--s3) 0; font-weight: 700; font-size: 17px; }
.deleted-img { opacity: .4; }
.items { margin-bottom: var(--s3); white-space: pre-line; word-break: keep-all; }