:root{
  --paper:#FFFDF8;--ink:#2B2622;--paper-ink:#26221E;--muted:#6B635A;
  --ground:#E8DAC3;--plate:#D8C5A6;--slit:#2A221C;--hint:#62503F;--accent:#2E7553;
  --s:1;--shift:-300px;
}
[data-season="spring"]{--ground:#F6E9E4;--plate:#EBCFCB;--slit:#3A2A2C}
[data-season="summer"]{--ground:#DDEFEA;--plate:#BCDCD6;--slit:#1F3A38}
[data-season="autumn"]{--ground:#E8DAC3;--plate:#D8C5A6;--slit:#2A221C}
[data-season="winter"]{--ground:#E6EEF3;--plate:#CAD8E2;--slit:#1E2C38}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ground);color:var(--ink);font-family:'Noto Sans KR',system-ui,-apple-system,'Apple SD Gothic Neo','Malgun Gothic',sans-serif}
::selection{background:#26221E;color:#FFFDF8}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
button{font-family:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
button:disabled{cursor:default}
button:focus-visible{outline:2px solid #2B2622;outline-offset:3px}

.root{position:relative;width:100%;height:100vh;height:100dvh;min-height:520px;overflow:hidden;background:var(--ground)}
.fallers{position:absolute;inset:0;pointer-events:none}
.fall,.sway,.spin{display:block}
.fall{position:absolute;opacity:.88}
.spin svg{width:100%;height:100%;display:block}

.toast{position:absolute;top:max(20px,env(safe-area-inset-top));left:50%;translate:-50% 0;z-index:6;padding:6px 14px;border-radius:16px;background:var(--ink);color:#FBF7EF;font-size:13px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity 200ms ease}
.toast.on{opacity:1}

.hit{position:absolute;left:0;right:0;top:calc(50% - 92px);height:190px;border:0;padding:0;background:transparent;z-index:2}
.hit:focus-visible{outline:none}
.hit:focus-visible .plate{outline:2px solid #2B2622;outline-offset:4px}
.plate{position:absolute;left:50%;top:68px;width:336px;margin-left:-168px;height:48px;border-radius:24px;display:flex;align-items:center;justify-content:center;background:var(--plate);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -2px 4px rgba(0,0,0,.08),0 6px 14px rgba(60,40,20,.10);transition-property:scale,opacity;transition-duration:150ms;transition-timing-function:ease-out}
.slit{display:block;width:304px;height:8px;border-radius:4px;background:var(--slit);box-shadow:inset 0 2px 3px rgba(0,0,0,.6)}
.led{position:absolute;right:8px;top:20px;width:6px;height:6px;border-radius:3px;background:#6E8B3D}
.hit:not(:disabled):active .plate{scale:.96}
[data-phase="turning"] .plate,[data-phase="revealed"] .plate{opacity:.45;transition-duration:450ms}
[data-phase="printing"] .led{background:#D98A1F}

.stub{display:none;position:absolute;left:50%;top:50%;width:292px;margin-left:-146px;height:12px;background:var(--paper);z-index:2;animation:fade 400ms ease-out both;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%}
[data-phase="turning"] .stub,[data-phase="revealed"] .stub{display:block}

.paperwin{pointer-events:none;position:absolute;left:50%;top:50%;width:292px;margin-left:-146px;height:50vh;overflow:hidden;z-index:3;transform-origin:50% 0;transform:scale(var(--s))}
[data-phase="turning"] .paperwin,[data-phase="revealed"] .paperwin{overflow:visible}
.print-in{display:none;filter:drop-shadow(0 1px 1px rgba(60,40,20,.08)) drop-shadow(0 6px 14px rgba(60,40,20,.07))}
[data-phase="printing"] .print-in,[data-phase="ready"] .print-in,[data-phase="turning"] .print-in,[data-phase="revealed"] .print-in{display:block}

.flipper{pointer-events:auto;position:relative;display:block;width:292px;padding:0;border:0;background:none;color:inherit;text-align:left;transform-style:preserve-3d}
[data-phase="turning"] .flipper{visibility:hidden}
[data-phase="revealed"] .flipper{transform:translateY(var(--shift)) rotateX(180deg)}
.face{-webkit-backface-visibility:hidden;backface-visibility:hidden}
.front{position:relative;transform:rotateX(180deg);padding:24px 20px 26px;background:var(--paper);color:var(--paper-ink);font-variant-numeric:tabular-nums}
.back{position:absolute;inset:0;overflow:hidden;background:var(--paper)}
.rig{display:none;position:absolute;left:0;top:0;width:292px;height:1px;perspective:6000px;transform-style:preserve-3d}
[data-phase="turning"] .rig{display:block}
.strip{position:absolute;left:0;top:0;width:292px;transform-origin:50% 0;transform-style:preserve-3d;will-change:transform}
.strip>div{position:absolute;inset:0;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.strip>div.sf{transform:rotateX(180deg)}
.strip .inner{position:absolute;left:0;width:292px;background:var(--paper)}
.strip .inner.fr{padding:24px 20px 26px;color:var(--paper-ink);font-variant-numeric:tabular-nums}
.shade{position:absolute;inset:0;background:#26221E;opacity:0;pointer-events:none}

.zz-b{-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/12px 100%}
.zz-tb{-webkit-mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/12px 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 51% repeat-x;mask:conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) top/12px 51% repeat-x,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 51% repeat-x}

/* receipt */
.rc{display:flex;flex-direction:column;gap:11px;font-size:12.5px;margin-top:-24px}
.rc-head{display:flex;justify-content:space-between;align-items:flex-start}
.rc-title{padding-top:22px;font-weight:900;font-size:30px;line-height:1.02;letter-spacing:.01em}
.rc-bar{width:16px;height:64px;background:var(--accent)}
.stars{white-space:nowrap;overflow:hidden;text-align:center;font-size:12px;letter-spacing:2px;line-height:1}
.rc-meta{display:flex;justify-content:space-between;align-items:center;line-height:1.6}
.rc-no{font-size:15px}
.rc-small{font-size:11px}
.bc{background:repeating-linear-gradient(90deg,#26221E 0 2px,transparent 2px 4px,#26221E 4px 5px,transparent 5px 8px,#26221E 8px 11px,transparent 11px 13px,#26221E 13px 14px,transparent 14px 17px)}
.rc-code{width:40px;height:40px;transform:rotate(90deg)}
.rc-genre{margin-top:-5px;font-weight:700;font-size:20px;line-height:1.15;letter-spacing:-.01em}
.rc-genre span{text-decoration-line:underline;text-decoration-color:var(--accent);text-decoration-thickness:3px;text-underline-offset:6px}
.rc-fortune{margin:0;text-align:center;font-size:18px;line-height:1.4;font-weight:400;text-wrap:balance;word-break:keep-all}
.dash{width:100%;border:0;border-top:1px dashed #B9B0A4;margin:0}
.rc-items{display:flex;flex-direction:column;gap:6px;line-height:1.45}
.rc-items>div{display:flex;gap:10px}
.rc-items span{word-break:keep-all}
.rc-k{flex:none;width:52px}
.grow{flex:1}
.rc-luck{display:flex;justify-content:space-between;align-items:center;border-top:2px solid #26221E;padding-top:8px}
.rc-luck-t{font-weight:900;font-size:19px;line-height:1}
.rc-circles{display:inline-flex;gap:4px;align-items:center;font-size:13px}
.rc-circles span{width:22px;text-align:center}
.rc-circles span.on{width:24px;height:24px;border-radius:12px;background:var(--accent);color:#FFFDF8;line-height:24px;font-weight:700}
.rc-sys{text-align:center}
.rc-sys-k{font-size:11px;letter-spacing:.08em;font-weight:700}
.rc-sys p{margin:6px 0 0;font-size:13px;line-height:1.45;text-wrap:balance;word-break:keep-all}
.rc-bc{height:26px}
.rc-foot{font-size:11px;line-height:1.5}
.bk-pat{position:absolute;inset:0 30px 0 0;padding:8px;font-weight:900;font-size:13px;line-height:1.5;letter-spacing:.06em;color:#EFEAE0;word-break:break-all}
.bk-strip{position:absolute;top:0;right:0;bottom:0;width:22px;background:#26221E;color:#FFFDF8;writing-mode:vertical-rl;font-size:11px;letter-spacing:.3em;line-height:22px;white-space:nowrap;overflow:hidden}

/* actions */
.acts{display:none;position:absolute;z-index:4;left:0;right:0;bottom:max(20px,env(safe-area-inset-bottom));justify-content:center;gap:10px}
[data-phase="revealed"] .acts{display:flex;animation:popIn 300ms ease-out both}
.acts.wide{left:auto;right:auto;bottom:auto;flex-direction:column;align-items:flex-start}
.btn{height:52px;border:1px solid transparent;border-radius:26px;font-size:15px;font-weight:600;display:flex;align-items:center;gap:8px}
.btn-ink{padding:0 22px 0 18px;background:var(--ink);color:#FBF7EF}
.btn-ghost{padding:0 20px 0 16px;background:rgba(255,255,255,.72);color:var(--ink);box-shadow:0 0 0 1px rgba(0,0,0,.06),0 1px 2px -1px rgba(0,0,0,.06),0 2px 4px rgba(0,0,0,.04)}
.press{transition-property:scale;transition-duration:150ms;transition-timing-function:ease-out}
.press:not(:disabled):active{scale:.96}
.share-wrap{position:relative}
.menu{position:absolute;z-index:5;right:0;bottom:60px;width:220px;padding:6px;border-radius:18px;background:#FCFBF7;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 8px 24px rgba(40,30,20,.16);display:flex;flex-direction:column;gap:2px;animation:popIn 300ms ease-out both}
.menu[hidden]{display:none}
.acts.wide .menu{right:auto;left:0;bottom:auto;top:60px}
.menu button{height:48px;border:0;border-radius:12px;background:transparent;color:#26221E;font-size:15px;display:flex;align-items:center;gap:10px;padding:0 12px;white-space:nowrap}
@media (hover:hover){.menu button:hover{background:#F1ECE2}}

@keyframes fade{from{opacity:0}}
@keyframes popIn{from{opacity:0;transform:translateY(8px);filter:blur(4px)}}
@keyframes printOut{0%{transform:translateY(-100%)}18%{transform:translateY(-82%)}22%{transform:translateY(-80%)}45%{transform:translateY(-48%)}50%{transform:translateY(-46%)}78%{transform:translateY(-10%)}100%{transform:translateY(0)}}
@keyframes blink{50%{opacity:.2}}
@keyframes fall{from{transform:translateY(calc(-1 * var(--y) - 60px))}to{transform:translateY(calc(110vh - var(--y)))}}
@keyframes sway{from{transform:translateX(calc(-1 * var(--sw)))}to{transform:translateX(var(--sw))}}
@keyframes spin{from{transform:rotate3d(var(--ax),var(--ay),1,0deg)}to{transform:rotate3d(var(--ax),var(--ay),1,360deg)}}
@media (prefers-reduced-motion:no-preference){
  [data-phase="printing"] .print-in{animation:printOut 1800ms cubic-bezier(.2,0,0,1) both}
  [data-phase="printing"] .led{animation:blink 400ms steps(2) infinite}
  .fall{animation:fall linear infinite}
  .sway{animation:sway ease-in-out infinite alternate}
  .spin{animation:spin linear infinite}
}
@media (prefers-reduced-motion:reduce){
  .acts,.menu{animation:none!important}
}