html:has(body[data-daily-chrome="boxes"]){height:100%;overflow:hidden;overscroll-behavior:none;scrollbar-gutter:auto}
body[data-daily-chrome="boxes"]{height:100vh;height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none;background:#0a1020;--bottom-nav:0px}
body[data-daily-chrome="boxes"] .app-shell{height:100%;min-height:0;padding-bottom:0;overflow:clip;background:#0a1020}
main.daily-boxes{height:100%;min-height:0;overflow:clip;background:#0a1020}
.fortune-box-scene{position:relative;isolation:isolate;display:flex;flex-direction:column;height:100%;min-height:0;padding:calc(8px + env(safe-area-inset-top)) 22px calc(10px + env(safe-area-inset-bottom));overflow:clip;color:#ffecd6;text-align:center;font-family:'Noto Serif KR',serif;line-height:1.8;letter-spacing:0}
.fortune-box-scene *{box-sizing:border-box;letter-spacing:0}
.fortune-box-scene [hidden]{display:none!important}
.fortune-box-scene p{margin:0}
.fortune-box-backdrop{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fortune-box-backdrop img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.fortune-box-topbar{display:flex;flex:0 0 48px;align-items:center;justify-content:space-between;gap:16px;min-width:0}
.fortune-box-scene .fortune-box-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:8px;background:#091627b3;border:0;color:#ffecd6;text-decoration:none;cursor:pointer;border-radius:4px}
.fortune-box-icon .icon{width:27px;height:27px}
.fortune-box-brand{display:flex;align-items:center;min-height:44px;max-width:calc(100% - 60px);text-decoration:none}
.fortune-box-brand img{display:block;width:131px;height:35px;object-fit:contain;filter:brightness(0) invert(1);opacity:.97}
.fortune-box-heading{flex:0 0 auto;padding:10px 0 0;text-shadow:0 2px 14px #050a18}
.fortune-box-heading .fortune-box-date{font:11px/1.5 system-ui,sans-serif;color:#dfd0c8}
.fortune-box-scene .fortune-box-heading h1{margin:5px 0 0;font-family:'Noto Serif KR',serif;font-size:36px;font-weight:700;line-height:1.4;color:#ffecd6;letter-spacing:0}
.fortune-box-divider{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px 0;color:#dfaf60}
.fortune-box-divider:before,.fortune-box-divider:after{content:'';width:42px;height:1px;background:#d4a666}
.fortune-box-divider>.icon{width:14px;height:14px}
.fortune-box-heading>p:not(.fortune-box-date){font-size:14px;line-height:1.7;word-break:keep-all}
.fortune-box-free{display:inline-flex;align-items:center;justify-content:center;min-height:28px;margin-top:9px;padding:1px 16px;border:1px solid #deab60;border-radius:30px;font-size:12px;color:#f5ce8d;background:#0a142366}
.fortune-box-form{display:flex;flex-direction:column;flex:1;gap:0;margin:0;padding:0;min-width:0;min-height:0}
/* Fit all three rows to the available height without altering the shared alpha frame. */
.fortune-box-grid-stage{display:grid;place-items:center;flex:1;min-width:0;min-height:0;margin:12px 0;container-type:size}
.fortune-box-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 12px;width:min(100%,calc((100dvh - 420px) * 1.095238 + 12px));max-width:406px;margin:0 auto;padding:0;min-width:0}
@supports(height:1cqh){.fortune-box-grid{width:min(100%,calc((100cqh - 32px) * 1.095238 + 12px))}}
.fortune-box-scene .fortune-box-choice{position:relative;grid-column:span 2;display:block;appearance:none;width:100%;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:4px;background:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation;transition:transform .18s ease,filter .18s ease}
.fortune-box-choice:last-child{grid-column:2/span 2}
.fortune-box-choice:before,.fortune-box-selected-stage:before{content:'';position:absolute;z-index:-1;left:5%;bottom:-2%;width:90%;height:13%;border-radius:50%;background:#02040bcc;filter:blur(5px);pointer-events:none}
.fortune-box-frame{display:block;position:relative;width:100%;aspect-ratio:var(--box-frame-ratio);overflow:clip;pointer-events:none}
.fortune-box-frame picture{display:contents}
.fortune-box-frame img{display:block;position:absolute;max-width:none!important;width:var(--box-canvas-width)!important;height:auto!important;left:var(--box-canvas-left);top:var(--box-canvas-top);user-select:none;-webkit-user-drag:none}
.fortune-box-choice:active{transform:scale(1.025)}
.fortune-box-choice:disabled{cursor:wait;opacity:1}
.fortune-box-scene :focus-visible{outline:2px solid #ffcf80;outline-offset:3px}
@media(hover:hover) and (pointer:fine){.fortune-box-choice:not(:disabled):hover{transform:translateY(-2px) scale(1.025);filter:brightness(1.06)}}
.fortune-box-footnote{flex:0 0 auto;padding-top:9px;border-top:1px solid #e9cda35e;text-shadow:0 2px 12px #000}
.fortune-box-footnote>p:first-child{font-size:13px;line-height:1.7;word-break:keep-all}
.fortune-box-footnote br{display:none}
.fortune-box-footnote>span{display:none}
.fortune-box-footnote>p:last-child{margin-top:4px;font-size:11px;color:#f0ded4}
.fortune-box-storage-notice{flex:0 0 auto;width:100%;max-width:360px;margin:12px auto 0;padding:9px 0 0;border-top:1px solid #edd6af40;text-align:center;font-family:system-ui,sans-serif;font-size:11px;line-height:1.7;color:#f2e6dc;text-shadow:0 1px 4px #000}
.fortune-box-storage-notice p{margin:0}
.fortune-box-storage-notice>div{display:flex;justify-content:center;flex-wrap:wrap;gap:18px;margin:0}
.fortune-box-storage-notice a{display:inline-flex;align-items:center;min-height:24px;text-decoration:underline;text-underline-offset:3px}
.fortune-box-scene .fortune-box-login,.fortune-box-scene .fortune-box-result-link{display:flex;align-items:center;justify-content:center;flex:0 0 auto;gap:12px;width:100%;max-width:330px;min-height:44px;margin:12px auto 0;padding:8px 12px;border:1px solid #d7a768;border-radius:6px;background:#10213be6;color:#ffe4bb;font-size:14px;text-decoration:none;word-break:keep-all}
.fortune-box-login .icon,.fortune-box-result-link .icon{width:19px;height:19px;flex:0 0 19px}
.fortune-box-scene .fortune-box-guest-note{margin-top:4px;font:11px/1.7 system-ui,sans-serif;color:#f0e4df}
.fortune-box-scene .fortune-box-status{flex:0 0 auto;min-height:0;margin-top:6px;font:12px/1.6 system-ui,sans-serif;color:#ffedcd;word-break:keep-all;overflow-wrap:anywhere;text-shadow:0 1px 5px #000}
.fortune-box-status:empty{display:none}
.fortune-box-recovery{display:flex;flex:0 0 auto;justify-content:center;align-items:center;flex-wrap:wrap;gap:18px;margin-top:6px;font:12px/1.6 system-ui,sans-serif}
.fortune-box-recovery button{padding:8px 12px;border:1px solid #d7a768;border-radius:6px;background:#15213b;color:#ffedcf;font:inherit;cursor:pointer;min-height:44px}
.fortune-box-recovery a{text-decoration:underline}
.fortune-box-scene .fortune-box-noscript{font:11px/1.5 system-ui,sans-serif}
.fortune-box-selected{display:flex;flex-direction:column;flex:1;align-items:center;justify-content:center;min-height:0;padding-top:12px;outline:none}
.fortune-box-scene .fortune-box-selected h2{flex:0 0 auto;margin:0;font-family:'Noto Serif KR',serif;font-size:21px;line-height:1.7;color:#ffecd6}
.fortune-box-selected>p{flex:0 0 auto;font-size:13px;margin-top:4px}
.fortune-box-selected-stage{position:relative;isolation:isolate;flex:0 1 auto;min-height:0;width:min(330px,100%,calc((100dvh - 380px) * 1.642857));aspect-ratio:var(--box-frame-ratio);margin:24px auto}
.fortune-box-selected-stage .fortune-box-frame{transform-origin:50% 50%;will-change:transform}
.fortune-box-scene.is-selected .fortune-box-free{display:none}
.fortune-box-scene .fortune-box-selected-note{margin-top:10px;font:12px/1.6 system-ui,sans-serif;color:#f1e4dd}
@media(max-width:370px){.fortune-box-scene{padding-left:18px;padding-right:18px}}
@media(max-height:700px){
 .fortune-box-heading{padding-top:2px}
 .fortune-box-heading .fortune-box-date,.fortune-box-divider{display:none}
 .fortune-box-scene .fortune-box-heading h1{margin-top:0;font-size:30px;line-height:1.35}
 .fortune-box-free{margin-top:6px;min-height:25px}
 .fortune-box-grid-stage{margin:9px 0}
 .fortune-box-footnote{padding-top:6px}
 .fortune-box-footnote>p:last-child{display:none}
 .fortune-box-storage-notice{margin-top:8px;padding-top:6px}
 .fortune-box-selected-stage{width:min(300px,100%,calc((100dvh - 310px) * 1.642857));margin:16px auto}
}
@media(max-height:480px){
 .fortune-box-scene{padding-top:env(safe-area-inset-top);padding-bottom:calc(6px + env(safe-area-inset-bottom))}
 .fortune-box-backdrop img{object-fit:fill}
 .fortune-box-topbar{flex-basis:44px}
 .fortune-box-heading{padding-top:0}
 .fortune-box-scene .fortune-box-heading h1{font-size:25px;line-height:1.3}
 .fortune-box-heading>p:not(.fortune-box-date){font-size:12px}
 .fortune-box-free{display:none}
 .fortune-box-footnote{display:none}
 .fortune-box-grid-stage{margin:6px 0}
 .fortune-box-storage-notice{margin-top:0;padding-top:3px}
 .fortune-box-selected{padding-top:4px}
 .fortune-box-scene .fortune-box-selected h2{font-size:17px;line-height:1.5}
 .fortune-box-selected>p{font-size:12px}
 .fortune-box-selected-stage{width:min(260px,100%,calc((100dvh - 260px) * 1.642857));margin:8px auto}
 .fortune-box-scene .fortune-box-result-link{margin-top:4px}
 .fortune-box-scene .fortune-box-selected-note{margin-top:6px;font-size:11px}
}
@media(prefers-reduced-motion:reduce){.fortune-box-choice{transition:none}.fortune-box-choice:active{transform:none}.fortune-box-choice:not(:disabled):hover{transform:none}.fortune-box-selected-stage .fortune-box-frame{will-change:auto}}
