/* 온라인 주사위 굴리기 전용 CSS (2026-10-23). 예시 줄 · 격자 [놀이판(상자·합계·조작) | 주사위 고르기] → [합계 확률 막대 | 이번 판 통계] → 기록 dice-*. 공용 부품은 assets/v2.css.
   상자는 가죽 상자 + 펠트(테마와 무관한 물건 색, 다크에서 더 어둡게). accent 는 '방금 결과'(막대 강조·떨어지는 표식)에만, 목표 영역은 잉크 엷은 띠.
   움직임(R45): 주사위가 상자 아래에서 던져져 튀고 멈춤(d6 정육면체는 3D로 구름), 결과 표식이 확률 막대 위로 떨어짐, 합계 pop, 새 기록 카드. 동작 줄이기면 모두 끔. */
.dice{container:dice / inline-size;--tray-a:#4f3822;--tray-b:#23170b;--rim:#7b5634;--die:#fdf8ec;--die-shade:#e9dcc0;--die-edge:#8c7552;--pip:#1a1208}
:root[data-theme="dark"] .dice{--tray-a:#22180e;--tray-b:#0c0804;--rim:#4b3521;--die:#f1e5c9;--die-shade:#d6c49d;--die-edge:#7a6441}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dice{--tray-a:#22180e;--tray-b:#0c0804;--rim:#4b3521;--die:#f1e5c9;--die-shade:#d6c49d;--die-edge:#7a6441}}
.dice [hidden]{display:none !important}
/* 예시 줄 */
.dice-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.dice-ex .v2-label{margin-right:4px}
.dice-ex button{display:inline-flex;align-items:baseline;gap:6px;height:30px;padding:0 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);white-space:nowrap;transition:background var(--ease)}
.dice-ex button small{font-size:11px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.dice-ex button:hover{background:var(--btn)}
/* 격자: 놀이판 높이 = 주사위 고르기 높이(상자가 늘어남), 아래 줄은 확률 막대 | 통계 */
.dice-stage{display:grid;grid-template-columns:minmax(0,1fr) 256px;grid-template-areas:"play build" "floor sess";gap:16px;padding:16px 18px 16px}
.dice-play{grid-area:play;display:flex;flex-direction:column;gap:12px;min-width:0}
.dice-build{grid-area:build}
.dice-floor{grid-area:floor}
.dice-session{grid-area:sess}
/* 상자 */
.dice-trayw{position:relative;display:flex;flex:1 1 auto;min-height:236px}
.dice-tray{position:relative;display:block;flex:1 1 auto;width:100%;min-height:236px;margin:0;padding:0;border:0;border-radius:4px;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent;
  background:radial-gradient(120% 95% at 50% 30%,var(--tray-a),var(--tray-b));box-shadow:inset 0 0 0 5px var(--rim),inset 0 0 0 6px rgba(0,0,0,.35),inset 0 16px 30px rgba(0,0,0,.45)}
.dice-tray::before{content:"";position:absolute;inset:6px;border-radius:2px;background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1.3px);background-size:5px 5px;pointer-events:none}
.dice-tray:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dice-tray:disabled{cursor:not-allowed}
.dice-felt{position:absolute;inset:8px}
.dice-fullbtn{position:absolute;top:12px;right:12px;z-index:2;height:28px;padding:0 10px;border:1px solid rgba(255,255,255,.22);border-radius:var(--radius);background:rgba(0,0,0,.3);font-family:var(--sans);font-size:12px;font-weight:650;color:#f5ead4}
.dice-fullbtn:hover{background:rgba(0,0,0,.5)}
.dice-fullbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 주사위: 바깥(.dice-die)은 자리·Z 회전·그림자, d6 은 정육면체(3D), 나머지는 윤곽 SVG + 숫자 */
.dice-die{position:absolute;width:var(--s);height:var(--s);margin:calc(var(--s) * -.5) 0 0 calc(var(--s) * -.5);transform:rotate(var(--rz,0deg));filter:drop-shadow(0 calc(var(--s) * .07) calc(var(--s) * .06) rgba(0,0,0,.5));transition:left .25s ease,top .25s ease,opacity .2s ease}
.dice-die.is-ready{opacity:.5}
.dice.is-rolling .dice-die{transition:none}
.dice-die.k6{perspective:calc(var(--s) * 5)}
.dice-cube{position:absolute;inset:10%;transform-style:preserve-3d}
.dice-cube i{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);padding:12%;border-radius:18%;background:radial-gradient(circle at 30% 25%,var(--die),var(--die-shade));box-shadow:inset 0 0 0 1px var(--die-edge);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.dice-cube s{display:block;width:72%;height:72%;place-self:center;border-radius:50%;background:var(--pip);box-shadow:inset 0 1px 1px rgba(0,0,0,.45)}
.dice-cube .f1{transform:translateZ(calc(var(--s) * .4))}
.dice-cube .f6{transform:rotateY(180deg) translateZ(calc(var(--s) * .4))}
.dice-cube .f2{transform:rotateY(90deg) translateZ(calc(var(--s) * .4))}
.dice-cube .f5{transform:rotateY(-90deg) translateZ(calc(var(--s) * .4))}
.dice-cube .f3{transform:rotateX(90deg) translateZ(calc(var(--s) * .4))}
.dice-cube .f4{transform:rotateX(-90deg) translateZ(calc(var(--s) * .4))}
.dice-spin{position:absolute;inset:0}
.dice-spin svg{display:block;width:100%;height:100%;overflow:visible}
.dice-spin .o{fill:var(--die);stroke:var(--die-edge);stroke-width:2.6;stroke-linejoin:round}
.dice-spin .e{fill:none;stroke:var(--die-edge);stroke-width:1.6;stroke-linejoin:round;opacity:.8}
.dice-spin b{position:absolute;left:0;right:0;transform:translateY(-50%);text-align:center;font-family:var(--sans);font-size:calc(var(--s) * .3);font-weight:800;line-height:1;color:var(--pip);font-variant-numeric:tabular-nums lining-nums}
.dice-die.k4 b{font-size:calc(var(--s) * .25)}
.dice-die.k100 b{font-size:calc(var(--s) * .26)}
/* 합계 */
.dice-result{display:grid;align-content:start;gap:4px;min-height:86px}
.dice-tot{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0}
.dice-tot b{font-family:var(--sans);font-size:46px;font-weight:800;line-height:1;letter-spacing:-.025em;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.dice-tot small{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.dice-verdict{align-self:center;padding:4px 9px;border-radius:var(--radius);font-style:normal;font-family:var(--sans);font-size:12.5px;font-weight:700;line-height:1.2}
.dice-verdict.is-ok{background:var(--fill);color:var(--on-fill)}
.dice-verdict.is-no{box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}
.dice-break{margin:0;font-family:var(--sans);font-size:14px;font-weight:650;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.dice-rare{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.dice-result.is-ready .dice-tot b,.dice.is-rolling .dice-tot b{color:var(--muted)}
.dice-result.is-pop .dice-tot b{animation:dice-pop .45s cubic-bezier(.22,1,.36,1)}
@keyframes dice-pop{0%{transform:scale(.9);opacity:.5}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
/* 조작 줄 */
.dice-ctrl{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.dice-main{min-width:120px;justify-content:center;font-size:14px}
.dice-many{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.dice-many .v2-label{margin:0}
.dice-ctrl .v2-status{flex-basis:100%}
.dice-ctrl .v2-status:empty{display:none}
.dice-fullhint{display:none}
/* 주사위 고르기 */
.dice-build{container:dicebuild / inline-size;display:flex;flex-direction:column;gap:10px;min-width:0;padding:14px;border:1px solid var(--soft);border-radius:var(--radius);background:color-mix(in srgb,var(--wash) 70%,var(--paper))}
.dice-build .v2-input input{text-align:left}
.dice-msg{margin:-4px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
.dice-msg.is-error{color:var(--accent)}
.dice-pickl{margin:2px 0 -4px}
.dice-kinds{display:grid;grid-template-columns:minmax(0,1fr);column-gap:18px;margin:0;padding:0;list-style:none}
.dice-kind{display:grid;grid-template-columns:24px minmax(0,1fr) auto;align-items:center;gap:8px;min-height:38px;padding:3px 0;border-top:1px solid var(--soft)}
.dice-kind:first-child{border-top:0}
.dice-ico{display:grid;place-items:center;width:24px;height:24px}
.dice-ico svg{display:block;width:24px;height:24px}
.dice-ico .o{fill:var(--paper);stroke:var(--muted);stroke-width:5;stroke-linejoin:round}
.dice-ico .e{fill:none;stroke:var(--muted);stroke-width:3.5;stroke-linejoin:round;opacity:.8}
.dice-ico .p{fill:var(--muted)}
.dice-kind.is-on .dice-ico .o,.dice-kind.is-on .dice-ico .e{stroke:var(--ink)}
.dice-kind.is-on .dice-ico .p{fill:var(--ink)}
.dice-ico--mod{font-family:var(--sans);font-size:16px;font-weight:800;color:var(--muted)}
.dice-kn{min-width:0;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--muted);overflow-wrap:anywhere}
.dice-kind.is-on .dice-kn{color:var(--ink)}
.dice-step{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.dice-step button{width:30px;height:30px;padding:0;border:0;background:none;font-family:var(--sans);font-size:16px;font-weight:700;line-height:1;color:var(--ink)}
.dice-step button:hover:not(:disabled){background:var(--btn)}
.dice-step button:disabled{opacity:.3;cursor:not-allowed}
.dice-step button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dice-step .dice-n{min-width:36px;padding:0 2px;border-left:1px solid var(--soft);border-right:1px solid var(--soft);font-family:var(--sans);font-size:14px;font-weight:750;line-height:30px;text-align:center;font-variant-numeric:tabular-nums lining-nums}
.dice-kind.is-on .dice-step{border-color:var(--ink)}
@container dicebuild (min-width:420px){.dice-kinds{grid-template-columns:repeat(2,minmax(0,1fr))}.dice-kind:nth-child(2){border-top:0}}
.dice-target{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px}
.dice-target .v2-label{display:block;margin:0 0 5px}
.dice-cmp{flex-wrap:nowrap}
.dice-cmp button{height:var(--v2-ctl);padding:0 12px}
.dice-link{align-self:flex-start}
/* 합계 확률 막대 */
.dice-floor,.dice-box{min-width:0;margin:0;padding:14px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.dice-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 8px}
.dice-head .v2-label{margin:0}
.dice-headnote{min-width:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.dice-head .v2-btn{margin-left:auto}
.dice-chart{position:relative;min-height:156px;outline:0;touch-action:pan-y;cursor:crosshair}
.dice-chart:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.dice-chart svg{display:block;width:100%;height:auto;overflow:visible}
.dice-chart .exp{fill:var(--soft)}
.dice-chart .exp.is-goal{fill:color-mix(in srgb,var(--line) 65%,var(--soft))}
.dice-chart .exp.is-last{fill:color-mix(in srgb,var(--accent) 38%,var(--soft))}
.dice-chart .obs{fill:var(--ink)}
.dice-chart .obs.is-last{fill:var(--accent)}
.dice-chart .mark{fill:var(--accent)}
.dice-chart .mark.is-drop{animation:dice-drop .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes dice-drop{0%{transform:translateY(-26px);opacity:0}100%{transform:none;opacity:1}}
.dice-chart .goal{fill:color-mix(in srgb,var(--ink) 6%,transparent)}
.dice-chart .goal-line{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3;opacity:.6}
.dice-chart .axis,.dice-chart .tick{stroke:var(--line);stroke-width:1}
.dice-chart .mean{fill:var(--muted)}
.dice-chart .sel{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:2 2}
.dice-chart text{font-family:var(--sans);font-size:10.5px;fill:var(--muted);font-variant-numeric:tabular-nums}
.dice-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin:8px 0 0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.dice-legend li{display:inline-flex;align-items:center;gap:6px}
.dice-legend li::before{content:"";width:10px;height:10px;background:var(--soft)}
.dice-legend .is-obs::before{width:5px;background:var(--ink)}
.dice-legend .is-goal::before{background:color-mix(in srgb,var(--ink) 6%,transparent);box-shadow:inset 0 0 0 1px var(--line)}
.dice-readout{min-height:3.1em;margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--ink);font-variant-numeric:tabular-nums}
/* 이번 판 통계 */
.dice-head .v2-btn{white-space:nowrap}
.dice-stats{display:grid;margin:0;font-family:var(--sans)}
.dice-stats div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:2px 10px;padding:8px 0;border-top:1px solid var(--soft)}
.dice-stats div:first-child{padding-top:2px;border-top:0}
.dice-stats dt{min-width:0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.dice-stats dd{margin:0;text-align:right;font-size:14px;font-weight:750;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.dice-stats dd small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
/* 기록 */
.dice-logbox{margin:0 18px 18px}
.dice-log{display:grid;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:8px;margin:0;padding:0;list-style:none}
.dice-log:empty{display:none}
.dice-log li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"n ok" "tot e" "v v";align-items:baseline;gap:2px 8px;min-width:0;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);font-family:var(--sans)}
.dice-log .n{grid-area:n;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.dice-log i{grid-area:ok;font-style:normal;font-size:11px;font-weight:700;text-align:right;color:var(--muted);white-space:nowrap}
.dice-log b{grid-area:tot;font-size:24px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums lining-nums}
.dice-log .e{grid-area:e;min-width:0;font-size:11.5px;font-weight:650;color:var(--muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dice-log .v{grid-area:v;min-width:0;margin-top:2px;font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.dice-log li.is-ok{box-shadow:inset 3px 0 0 var(--ink)}
.dice-log li.is-ok i{color:var(--ink)}
.dice-log li.is-new{animation:dice-in .35s cubic-bezier(.22,1,.36,1)}
@keyframes dice-in{0%{transform:translateY(-6px);opacity:0}100%{transform:none;opacity:1}}
/* 좁은 작업면: 한 열(상자·합계 → 조작 → 주사위 고르기 → 막대 → 통계) */
@container dice (max-width:599px){
  .dice-ex{padding:10px 12px}
  .dice-stage{grid-template-columns:minmax(0,1fr);grid-template-areas:"play" "build" "floor" "sess";gap:12px;padding:12px}
  .dice-trayw,.dice-tray{min-height:220px}
  .dice-tot b{font-size:40px}
  .dice-logbox{margin:0 12px 12px}
  .dice-log{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
}
/* 전체 화면(R46): 놀이판만 */
.dice-play:fullscreen,.dice-play.is-full{width:100%;height:100%;padding:3vmin 4vmin;gap:2vmin;background:var(--paper);overflow:auto}
.dice-play.is-full{position:fixed;inset:0;z-index:1000}
html.dice-noscroll{overflow:hidden}
.dice-play:fullscreen .dice-tot b,.dice-play.is-full .dice-tot b{font-size:min(11vmin,96px)}
.dice-play:fullscreen .dice-fullhint,.dice-play.is-full .dice-fullhint{display:block;flex-basis:100%;margin:0;font-family:var(--sans);font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.dice-die,.dice-log li.is-new,.dice-result.is-pop .dice-tot b,.dice-chart .mark.is-drop{transition:none;animation:none}}