/* 동전 던지기 전용 CSS (2026-10-22). 무대(앞면 카드 | 동전 | 뒷면 카드)·조작 줄·기록판·비율 곡선·연속 길이 막대 coin-*. 공용 부품은 assets/v2.css.
   면 표시는 어디서나 같다: 앞면 = 채운 원(--fill), 뒷면 = 테두리 원. accent 는 '지금'(내 곡선·지금 이어지는 연속)에만.
   움직임(R45): 동전은 JS(WAAPI)가 위로 던져 돌리고(rotateX) 그림자가 줄었다 돌아옴, 결과 글자 pop, 기록판 새 칸이 차례로 튀어나옴, 카드 막대·연속 막대는 너비 전환, 곡선은 새 구간이 그려짐. 동작 줄이기면 모두 끔. */
.coin{container:coin / inline-size;--coin:128px;--coin-hi:#f6e4b2;--coin-mid:#d6b066;--coin-lo:#a67a2e;--coin-rim:#c99b47;--coin-ink:#5b3c0c}
:root[data-theme="dark"] .coin{--coin-hi:#e6c886;--coin-mid:#bb9045;--coin-lo:#7d581c;--coin-rim:#a77d36;--coin-ink:#3b2607}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .coin{--coin-hi:#e6c886;--coin-mid:#bb9045;--coin-lo:#7d581c;--coin-rim:#a77d36;--coin-ink:#3b2607}}
.coin [hidden]{display:none !important}
.coin-help{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
/* 무대 */
.coin-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,300px) minmax(0,1fr);grid-template-areas:"h c t" "ctrl ctrl ctrl";gap:14px 16px;padding:18px;background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.coin-side.is-h{grid-area:h}.coin-side.is-t{grid-area:t}.coin-center{grid-area:c}.coin-ctrl{grid-area:ctrl}
.coin-side{display:flex;flex-direction:column;align-self:end;gap:12px;min-width:0;padding:14px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);transition:border-color .25s ease,box-shadow .25s ease}
.coin-side.is-on{border-color:var(--ink);box-shadow:inset 0 3px 0 var(--ink)}
.coin-side .v2-input input{text-align:left;font-weight:600}
.coin-tally{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin:auto 0 0;font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums}
.coin-tally b{font-size:40px;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ink)}
.coin-tally span{font-size:14px;font-weight:650;color:var(--muted)}
.coin-mark{display:inline-grid;place-items:center;align-self:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;font-style:normal;font-family:var(--sans);font-size:11px;font-weight:800}
.coin-side.is-h .coin-mark,.coin-dot.is-h{background:var(--fill);color:var(--on-fill)}
.coin-side.is-t .coin-mark,.coin-dot.is-t{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.coin-bar{display:block;height:6px;background:var(--soft);border-radius:3px;overflow:hidden}
.coin-bar i{display:block;height:100%;width:0;background:var(--fill);transition:width .5s cubic-bezier(.22,1,.36,1)}
.coin-side.is-t .coin-bar i{background:var(--muted)}
.coin-facts{display:grid;gap:0;margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.4}
.coin-facts div{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:6px 0 0;margin-top:6px;border-top:1px solid var(--soft)}
.coin-facts div:first-child{margin-top:0}
.coin-facts dt{min-width:0;color:var(--muted)}
.coin-facts dd{margin:0;font-weight:700;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
/* 동전: 누르는 단추 안에서 위로 던져 돈다. 두 면은 ±4px 띄우고 가운데 띠가 옆면처럼 보이게 */
.coin-center{display:flex;flex-direction:column;align-items:center;min-width:0}
.coin-btn{position:relative;display:flex;align-items:flex-end;justify-content:center;width:100%;height:calc(var(--coin) * 1.5);padding:0 0 16px;border:0;border-radius:var(--radius);background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.coin-btn:focus-visible{outline:0}
.coin-btn:focus-visible .coin-toss{border-radius:50%;outline:2px solid var(--accent);outline-offset:6px} /* 초점 고리는 동전 둘레에 */
.coin-toss{position:relative;z-index:1;display:block;width:var(--coin);height:var(--coin);perspective:640px}
.coin-coin{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(0deg)}
.coin-coin::before{content:"";position:absolute;left:2%;right:2%;top:50%;height:8px;margin-top:-4px;border-radius:2px;background:linear-gradient(var(--coin-lo),var(--coin-rim) 50%,var(--coin-lo));transform:rotateX(90deg)}
.coin-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:50%;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:radial-gradient(circle at 34% 28%,var(--coin-hi),var(--coin-mid) 56%,var(--coin-lo));box-shadow:inset 0 0 0 4px var(--coin-rim),inset 0 0 0 6px var(--coin-lo),inset 0 0 0 9px color-mix(in srgb,var(--coin-hi) 55%,transparent);transform:translateZ(4px);color:var(--coin-ink)}
.coin-face.is-t{transform:rotateX(180deg) translateZ(4px)}
.coin-face b{font-family:var(--sans);font-size:calc(var(--coin) * var(--gs,.4));font-weight:800;line-height:1;letter-spacing:-.02em;text-shadow:0 1px 0 color-mix(in srgb,var(--coin-hi) 70%,transparent)}
.coin-face small{max-width:72%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--sans);font-size:12px;font-weight:700}
.coin-face small:empty{display:none}
.coin-shadow{position:absolute;left:50%;bottom:8px;width:calc(var(--coin) * .78);height:12px;margin-left:calc(var(--coin) * -.39);border-radius:50%;background:radial-gradient(closest-side,rgba(26,18,8,.28),transparent);transform-origin:center}
.coin-result{display:flex;flex-direction:column;align-items:center;gap:2px;min-height:68px;width:100%;margin-top:6px;text-align:center}
.coin-result b{max-width:100%;font-family:var(--sans);font-size:30px;font-weight:800;line-height:1.2;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere}
.coin-result em{font-style:normal;font-family:var(--sans);font-size:12.5px;font-weight:700;color:var(--muted)}
.coin-result em:empty{display:none}
.coin-result span{font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted)}
.coin-result.is-empty b,.coin-result.is-air b{color:var(--muted)}
.coin-result.is-empty b{font-size:20px;font-weight:700}
.coin-result.is-pop b{animation:coin-pop .45s cubic-bezier(.22,1,.36,1)}
@keyframes coin-pop{0%{transform:scale(.9);opacity:.5}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
.coin-hint{margin:6px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;text-align:center;color:var(--ink);visibility:hidden}
.coin-hint.is-on{visibility:visible}
/* 조작 줄 */
.coin-ctrl{position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding-top:14px}
.coin-ctrl::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1px solid var(--soft)} /* 구분선은 테두리 대신(align-check 가 테두리 상자 안 단추를 상자 높이로 잼) */
.coin-main{min-width:132px;justify-content:center;font-size:14px}
.coin-many{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.coin-many .v2-label{margin:0}
.coin-tools{display:flex;flex-wrap:wrap;gap:8px;margin-left:auto}
.coin-ctrl .v2-status{flex-basis:100%}
.coin-ctrl .v2-status:empty{display:none}
.coin-fullhint{display:none;grid-column:1 / -1;margin:0;text-align:center;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
/* 전체 화면(R46): 무대만 키움. Fullscreen API 가 없으면 .is-full 고정 보기 */
/* 컨테이너 질의는 .coin(원래 폭) 기준이라 전체 화면에서도 좁은 배치가 걸린다 → 전체 화면은 칸 배치를 직접 정하고 좁은 화면은 화면 폭(media)으로 나눈다 */
.coin-stage:fullscreen,.coin-stage.is-full{--coin:min(36vmin,340px);grid-template-columns:minmax(0,360px) minmax(0,1fr) minmax(0,360px);grid-template-areas:"h c t" "ctrl ctrl ctrl";align-content:safe center;width:100%;height:100%;padding:4vmin;background:var(--paper);overflow:auto}
.coin-stage:fullscreen .coin-side,.coin-stage.is-full .coin-side{align-self:end}
.coin-stage:fullscreen #coinReset,.coin-stage.is-full #coinReset,.coin-stage:fullscreen #coinLink,.coin-stage.is-full #coinLink{display:none}
@media (min-width:761px){
  .coin-stage:fullscreen .coin-main,.coin-stage.is-full .coin-main{flex:0 0 auto}
  .coin-stage:fullscreen .coin-tools,.coin-stage.is-full .coin-tools{margin-left:auto}
}
@media (max-width:760px){
  .coin-stage:fullscreen,.coin-stage.is-full{--coin:min(34vmin,220px);grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"c c" "h t" "ctrl ctrl";padding:16px}
  .coin-stage:fullscreen .coin-side,.coin-stage.is-full .coin-side{align-self:stretch}
}
.coin-stage.is-full{position:fixed;inset:0;z-index:1000}
.coin-stage:fullscreen .coin-result b,.coin-stage.is-full .coin-result b{font-size:clamp(30px,6vmin,60px)}
.coin-stage:fullscreen .coin-tally b,.coin-stage.is-full .coin-tally b{font-size:clamp(34px,5vmin,52px)}
.coin-stage:fullscreen .coin-fullhint,.coin-stage.is-full .coin-fullhint{display:block}
html.coin-noscroll{overflow:hidden}
/* 기록판·실험실 */
.coin-box{min-width:0;margin:0;padding:16px 18px 18px;border-top:1px solid var(--soft)}
.coin-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px;min-height:32px}
.coin-head .v2-label{margin:0}
.coin-headnote{flex:1 1 auto;font-family:var(--sans);font-size:12px;color:var(--muted)}
.coin-trail{display:grid;grid-template-columns:repeat(var(--cols,25),minmax(0,1fr));gap:9px 4px;margin:0 0 12px}
.coin-dot{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:50%;font-style:normal;font-family:var(--sans);font-size:11px;font-weight:800;line-height:1}
.coin-dot.is-empty{box-shadow:inset 0 0 0 1px var(--soft)}
.coin-dot.is-run::after{content:"";position:absolute;left:-2px;right:-2px;bottom:-6px;height:2px;background:var(--accent)}
.coin-dot.is-new{animation:coin-in .34s cubic-bezier(.22,1,.36,1) both;animation-delay:var(--d,0ms)}
@keyframes coin-in{0%{transform:scale(.3);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1);opacity:1}}
.coin-lab{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.coin-lab > .coin-ratio{border-right:1px solid var(--soft)}
.coin-chart{margin:0 0 10px}
.coin-svg{display:block;width:100%;height:auto;overflow:visible}
.coin-svg text{font-family:var(--sans);font-size:10.5px;fill:var(--muted)}
.coin-grid line{stroke:var(--soft);stroke-width:1}
.coin-grid line.is-mid{stroke:var(--line);stroke-dasharray:3 3}
.coin-band{fill:var(--soft);opacity:.7}
.coin-refs circle{fill:var(--paper);stroke:var(--ink);stroke-width:1.2}
.coin-refs text{font-size:9.5px;font-weight:800;fill:var(--ink)}
.coin-line{fill:none;stroke:var(--accent);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.coin-now{fill:var(--accent)}
.coin-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 6px;padding:0;list-style:none;font-family:var(--sans);font-size:12px;color:var(--ink)}
.coin-legend li{display:flex;align-items:center;gap:6px}
.coin-legend li::before{content:"";width:16px;height:10px;border-radius:1px}
.coin-legend .is-you::before{height:2px;background:var(--accent)}
.coin-legend .is-band::before{background:var(--soft)}
.coin-refs-list{display:grid;gap:3px;margin:0 0 10px;padding:0;list-style:none;counter-reset:coinref;font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--ink)}
.coin-refs-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:6px;align-items:start;counter-increment:coinref}
.coin-refs-list li::before{content:counter(coinref);display:grid;place-items:center;width:16px;height:16px;margin-top:1px;border-radius:50%;box-shadow:inset 0 0 0 1.2px var(--ink);font-size:9.5px;font-weight:800}
.coin-runs{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:6px 10px;margin:0 0 10px;padding:0;list-style:none;font-family:var(--sans);font-size:12px;font-variant-numeric:tabular-nums lining-nums}
.coin-runs li{display:grid;grid-template-columns:subgrid;grid-column:1 / -1;align-items:center;min-height:18px}
.coin-rk{color:var(--muted);font-weight:600;white-space:nowrap}
.coin-rt{position:relative;height:10px;background:color-mix(in srgb,var(--soft) 45%,transparent);border-radius:1px}
.coin-rb{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--fill);border-radius:1px;transition:width .5s cubic-bezier(.22,1,.36,1)}
.coin-re{position:absolute;top:-3px;bottom:-3px;left:0;width:2px;margin-left:-1px;background:var(--muted);transition:left .5s cubic-bezier(.22,1,.36,1)}
.coin-rv{min-width:3.2em;text-align:right;font-weight:700;color:var(--ink);white-space:nowrap}
.coin-runs li.is-ex .coin-rv{font-weight:600;color:var(--muted)}
.coin-runlegend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 8px;font-family:var(--sans);font-size:12px;color:var(--ink)}
.coin-runlegend i{display:inline-block;width:14px;height:10px}
.coin-runlegend i + i,.coin-runlegend i.is-exp{margin-left:8px}
.coin-runlegend .is-obs{margin-left:0;background:var(--fill)}
.coin-runlegend .is-exp{width:2px;height:14px;background:var(--muted)}
/* 좁은 폭(작업면 760 이하 — 레일이 있는 1280 화면 포함): 동전·결과가 먼저, 두 카드는 아래 나란히, 실험실은 720 이하 한 열 */
@container coin (max-width:720px){
  .coin-lab{grid-template-columns:minmax(0,1fr)}
  .coin-lab > .coin-ratio{border-right:0}
}
@container coin (max-width:760px){
  .coin-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"c c" "h t" "ctrl ctrl";gap:12px}
  .coin-side{align-self:stretch;padding:12px;gap:10px}
  .coin-tally b{font-size:28px}
  .coin-tally span{font-size:13px}
  .coin-tools{margin-left:0}
  .coin-main{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .coin-bar i,.coin-rb,.coin-re,.coin-side{transition:none}
  .coin-result.is-pop b,.coin-dot.is-new{animation:none}
}