:root{
  --paper:#F7F5EF; --ground:#E9E6DD; --ink:#1B1A17; --muted:#5C5850;
  --line:#8C877C; --hair:#C8C3B6; --seal:#B02A1A; --seal-soft:#F2DCD5;
  --sans:"Apple SD Gothic Neo","Noto Sans KR","Noto Sans CJK KR","Malgun Gothic",sans-serif;
  --serif:"AppleMyungjo","Apple Myungjo","Noto Serif KR","Noto Serif CJK KR","Batang",serif;
  --mono:ui-monospace,"SFMono-Regular","Menlo","Consolas",monospace;
}
*{box-sizing:border-box}
html{background:var(--ground);color:var(--ink);font-family:var(--sans);font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
body{margin:0;min-width:0;word-break:keep-all;overflow-wrap:break-word}
button{font:inherit;color:inherit;min-height:44px;min-width:44px;border-radius:0}
input,textarea{font:inherit;min-height:44px;border-radius:0}
a{color:var(--ink);display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-weight:700}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
[hidden]{display:none !important}

/* sheet: one column; R3 border on ground uses muted */
.sheet{display:block;background:var(--paper);max-width:560px;margin:0 auto;border-bottom:1px solid var(--hair);min-width:0}
@media (min-width:600px){.sheet{margin:24px auto 0;border:1px solid var(--muted)}}
.scene{display:block}

/* docket head */
.head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:14px 16px 12px;border-bottom:3px double var(--ink)}
.head .kind{font:700 12px/1.4 var(--mono);letter-spacing:.08em;color:var(--muted);overflow-wrap:break-word}
.head h1{grid-column:1/-1;margin:2px 0 0;font:700 26px/1.2 var(--serif);letter-spacing:-.02em;overflow-wrap:break-word}
.head .who{font-size:13px;line-height:1.5;color:var(--muted)}
.head .count{font:700 13px var(--mono);align-self:end;white-space:nowrap}
.notice{padding:8px 16px 0}
.lede{margin:0;padding:12px 16px;font-size:15px;line-height:1.6;border-bottom:1px solid var(--hair)}
.lede strong{font-weight:800}

/* issue rows (answer) — R5: labels wrap, values don't */
ol.issues{list-style:none;margin:0;padding:0}
.issue{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:center;min-height:64px;padding:10px 16px 8px 8px;border-bottom:1px solid var(--hair)}
.issue .no{flex:0 0 36px}
.issue .label{flex:1 1 6em;min-width:0}
.issue .no,.vrow .no{font:700 12px var(--mono);color:var(--muted);text-align:right;align-self:start;padding-top:3px}
.label{font-size:16px;font-weight:700;line-height:1.35;overflow-wrap:break-word;min-width:0}
.issue .val{font:800 16px var(--mono);text-align:right;min-width:4.5em;white-space:nowrap;margin-left:auto}
.issue .val small{display:block;font:500 11px var(--sans);color:var(--muted)}
.issue .ctrl,.issue .scale{flex:0 0 calc(100% - 44px);margin-left:44px}
.issue .ctrl{display:grid;grid-template-columns:minmax(0,1fr) 64px;gap:8px;align-items:center}
.issue.none .label{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
.issue.pending .val{color:var(--muted)}

/* split range: R1 pan-y so vertical scroll never sets a value */
.split{position:relative;height:44px;min-height:44px;touch-action:pan-y;--v:0%}
.split .track{position:absolute;left:0;right:0;top:14px;height:16px;background:repeating-linear-gradient(90deg,transparent 0 calc(10% - 1px),var(--hair) calc(10% - 1px) 10%),var(--paper);border:1px solid var(--ink)}
.split .mine{position:absolute;left:0;top:14px;height:16px;background:var(--ink);width:var(--v)}
.split .knob{position:absolute;top:6px;width:4px;height:32px;margin-left:-2px;background:var(--seal);left:var(--v)}
.split input{position:absolute;inset:0;width:100%;height:44px;margin:0;opacity:0;cursor:pointer;touch-action:pan-y}
.split input:disabled{cursor:not-allowed}
.pending .split .mine,.pending .split .knob,.none .split .mine,.none .split .knob{display:none}
.split:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:2px}
.v0{--v:0%}.v10{--v:10%}.v20{--v:20%}.v30{--v:30%}.v40{--v:40%}.v50{--v:50%}.v60{--v:60%}.v70{--v:70%}.v80{--v:80%}.v90{--v:90%}.v100{--v:100%}
.nobtn{min-height:44px;min-width:64px;border:1px solid var(--line);background:var(--paper);font-size:13px;font-weight:700;cursor:pointer;padding:0 4px}
.nobtn[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.scale{display:flex;justify-content:space-between;font:500 11px var(--mono);color:var(--muted);margin-top:-4px}

/* footer actions */
.foot{padding:16px;display:grid;gap:12px}
.primary{min-height:52px;border:0;background:var(--seal);color:#fff;font-size:17px;font-weight:800;cursor:pointer;text-align:left;padding:0 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.primary[disabled]{background:var(--ground);color:var(--muted);cursor:not-allowed}
.secondary{min-height:48px;border:1px solid var(--ink);background:var(--paper);font-weight:700;cursor:pointer;text-align:left;padding:0 14px}
.secondary[disabled]{color:var(--muted);border-color:var(--muted);cursor:progress}
.fine{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}
.fine strong{color:var(--ink)}
.link{display:block;width:100%;min-height:44px;padding:8px 10px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:14px/1.5 var(--mono);word-break:break-all;resize:none}
.toast{margin:0;padding:10px 12px;border:1px solid var(--ink);font-size:14px;line-height:1.55;background:var(--paper);display:grid;gap:8px}
.toast p{margin:0}

/* 봉인 notice */
.sealed{margin:12px 16px;padding:12px;border:2px solid var(--ink);display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;align-items:start}
.sealed .stamp{font:800 13px var(--mono);color:var(--seal);border:2px solid var(--seal);padding:6px;line-height:1.1;text-align:center;width:2.6em;overflow-wrap:break-word}
.sealed p{margin:0;font-size:14px;line-height:1.55}

/* verdict */
.order{padding:14px 16px;border-bottom:1px solid var(--hair)}
.order .kind{font:700 12px var(--mono);color:var(--muted);letter-spacing:.08em}
.order p{margin:6px 0 0;font:700 21px/1.45 var(--serif)}
.order .tier{display:inline-block;margin-top:10px;padding:4px 8px;border:2px solid var(--seal);color:var(--seal);font-weight:800;font-size:15px}
dl.gist{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);border-bottom:3px double var(--ink)}
dl.gist dt,dl.gist dd{margin:0;padding:9px 16px;border-bottom:1px solid var(--hair);font-size:14px;line-height:1.5}
dl.gist dt{color:var(--muted);padding-right:0}
dl.gist dd{font-weight:700;text-align:right;overflow-wrap:break-word;font-variant-numeric:tabular-nums}
.vrow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:4px 8px;padding:10px 16px 10px 8px;border-bottom:1px solid var(--hair)}
.vrow .label{font-size:15px}
.vrow .sum{font:800 15px var(--mono);text-align:right;white-space:nowrap}
.vrow .sum.over{color:var(--seal)}
.vrow .bar{grid-column:2/-1;position:relative;height:22px;border:1px solid var(--ink);background:var(--paper);overflow:hidden}
.vrow .bar i{position:absolute;top:0;bottom:0}
/* R2: 2px paper separators at each boundary; overlap also gets an ink top/bottom border */
.vrow .bar .g{left:0;background:var(--ink);border-right:2px solid var(--paper)}
.vrow .bar .e{right:0;background:repeating-linear-gradient(135deg,var(--ink) 0 2px,transparent 2px 5px);border-left:2px solid var(--paper)}
.vrow .bar .ov{background:var(--seal);border:2px solid var(--ink);border-left:2px solid var(--paper);border-right:2px solid var(--paper);z-index:2}
.vrow .bar .gap{border-left:1px dashed var(--ink);border-right:1px dashed var(--ink);z-index:2}
.vrow .bar .w0{display:none}
.w0{width:0}.w10{width:10%}.w20{width:20%}.w30{width:30%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w70{width:70%}.w80{width:80%}.w90{width:90%}.w100{width:100%}
.l0{left:0}.l10{left:10%}.l20{left:20%}.l30{left:30%}.l40{left:40%}.l50{left:50%}.l60{left:60%}.l70{left:70%}.l80{left:80%}.l90{left:90%}.l100{left:100%}
.vrow .nums{grid-column:2/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 8px;font:12px/1.5 var(--sans);color:var(--muted)}
.vrow .nums span{font-family:var(--mono);color:var(--ink)}
.vrow.skip .nums{display:block}
.vrow.top{background:var(--seal-soft)}
.vrow .topmark{grid-column:2/-1;font-size:12px;font-weight:800;color:var(--seal)}
.vrow.skip .label,.vrow.skip .sum{color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;padding:10px 16px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--hair)}
.legend span::before{content:"";display:inline-block;width:14px;height:10px;margin-right:5px;vertical-align:-1px;border:1px solid var(--ink)}
.legend .lg::before{background:var(--ink)}
.legend .le::before{background:repeating-linear-gradient(135deg,var(--ink) 0 2px,transparent 2px 5px)}
.legend .lo::before{background:var(--seal);border-color:var(--ink)}
.legend .lx::before{border-style:dashed}
.ref{font-size:12px;line-height:1.6;color:var(--muted);margin:0}

/* static pages + footer links */
.prose{padding:4px 16px 16px;font-size:15px;line-height:1.7}
.prose h2{font:700 13px var(--mono);letter-spacing:.06em;color:var(--muted);margin:20px 0 6px}
.prose p,.prose ul,.prose table{margin:0 0 10px}
.prose ul{padding-left:20px}
.prose table{border-collapse:collapse;width:100%;font-size:14px}
.prose th,.prose td{border-bottom:1px solid var(--hair);padding:6px 4px;text-align:left;vertical-align:top}
.prose a{display:inline-flex;overflow-wrap:break-word}
.links{max-width:560px;margin:0 auto;padding:8px 16px 24px;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:14px}

@media (prefers-reduced-motion: no-preference){
  .split .mine,.split .knob{transition:width .12s ease-out,left .12s ease-out}
  .scene{animation:scene-in .18s ease-out}
  @keyframes scene-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}