:root { --paper: #f2ece0; --ink: #1c1a17; --mute: #766d5f; --line: #bfb299; --red: #b23b25; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 14px/1.65 "IBM Plex Sans KR", "Malgun Gothic", sans-serif; word-break: keep-all; overflow-wrap: anywhere; }
.sheet { max-width: 900px; margin: auto; padding: 36px 28px 60px; }
.sheet-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; }
.sheet-toolbar a { color: var(--ink); font-weight: 600; }
.sheet-toolbar button { min-height: 44px; padding: 10px 20px; font: inherit; border: 0; background: var(--red); color: #fffaf1; border-radius: 24px; cursor: pointer; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; }
.sheet-head { display: flex; align-items: center; gap: 18px; border-bottom: 2px solid var(--ink); padding-bottom: 18px; }
.seal { position: relative; flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: var(--red); color: #fffaf1; border-radius: 5px; font: 900 28px "Noto Serif KR", serif; transform: rotate(-3deg); }
.seal[data-r]::after { content: attr(data-r); position: absolute; top: 100%; color: var(--mute); font: 10px/1.5 "IBM Plex Sans KR", sans-serif; }
h1 { margin: 0; font: 900 27px/1.25 "Noto Serif KR", serif; }
h1 small { display: block; margin-top: 6px; font: 13px/1.4 "IBM Plex Sans KR", sans-serif; color: var(--mute); }
h2 { font: 700 20px/1.5 "Noto Serif KR", serif; margin: 32px 0 12px; }
h3 { font-size: 14px; margin: 0 0 5px; }
.sheet-hint, .sheet-block > p { font-size: 12px; color: var(--mute); }
.sheet-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sheet-block { margin: 12px 0; break-inside: avoid; }
.sheet-grid .sheet-block { margin: 0; }
.sheet-block > p { margin: 0 0 5px; }
.write-field { min-height: 68px; padding: 10px; border: 1px solid var(--line); background: #fffaf1; white-space: pre-wrap; overflow-wrap: anywhere; }
.decision-book { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.decision-book li { display: grid; grid-template-columns: 100px 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); break-inside: avoid; }
.decision-book li > span { color: var(--mute); font-size: 12px; }
.decision-book p { margin: 0; }
.decision-book small { display: block; color: var(--red); font-size: 11px; }
.needs-review { color: var(--red); }
table { width: 100%; border-collapse: collapse; margin: 10px 0; }
th, td { text-align: left; padding: 8px 10px; border: 1px solid var(--line); }
th { font-size: 12px; }
.sheet-rules { padding-left: 22px; }
.sheet-rules li { margin-bottom: 6px; }
.sheet-foot { border-top: 1px solid var(--line); padding-top: 16px; color: var(--mute); font-size: 12px; }
rt { font: 10px/1 "IBM Plex Sans KR", sans-serif; color: var(--mute); }
@media(max-width: 640px) { .sheet { padding: 24px 16px 40px; } .sheet-grid { grid-template-columns: 1fr; } h1 { font-size: 22px; } .decision-book li { grid-template-columns: 1fr; gap: 4px; } }
@page { size: A4; margin: 16mm; }
@media print {
  body { background: white; font-size: 11px; }
  .sheet { max-width: none; padding: 0; }
  .sheet-toolbar, .site-footer { display: none !important; }
  h1 { font-size: 22px; } h2 { margin-top: 16px; font-size: 17px; break-after: avoid; }
  h3 { font-size: 12px; break-after: avoid; }
  .sheet-grid { grid-template-columns: 1fr 1fr; }
  .write-field { background: white; min-height: 42px; padding: 6px; }
  .case-sheet { break-before: page; }
  .decision-book li { grid-template-columns: 80px 1fr; padding: 6px 0; }
  table, .sheet-rules { break-inside: avoid; }
  .sheet-hint, .sheet-block > p, .sheet-foot { font-size: 10px; }
}
/* 상태판 표지 */
.bowls { list-style: none; padding: 0; margin: 14px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.bowls li { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border: 1px solid #cdc1a8; text-align: center; min-width: 0; }
.bowls li.cracked { border-color: #b23b25; }
.bowls li b { font-size: 15px; }
.bowls li small { font-size: 11px; color: #766d5f; overflow-wrap: anywhere; }
.bowls li.cracked small { color: #b23b25; }
.bowl { width: 48px; height: 34px; overflow: visible; }
.bowl-body { fill: #faf6ee; stroke: #1c1a17; stroke-width: 2; }
.bowl-rim { stroke: #1c1a17; stroke-width: 3; stroke-linecap: round; }
.bowl-crack { fill: none; stroke: #b23b25; stroke-width: 2.4; stroke-linejoin: round; display: none; }
.bowl.is-cracked .bowl-crack { display: inline; }
.bowl.is-cracked .bowl-body { fill: #ecd3c8; }
@media (max-width: 560px) { .bowls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }