:root{--bg: #fff8f1;--bg-2: #ffffff;--surface: #ffffff;--surface-2: #fff3ea;--text: #1f1a17;--muted: #6d625b;--line: #f0e2d8;--primary: #ff6b4a;--primary-ink: #ffffff;--primary-soft: #ffe5dc;--accent: #7b61ff;--ok: #18a57b;--danger: #d93b3b;--shadow: 0 14px 34px rgba(60, 30, 10, .1);--radius: 22px;--common: #4fb8a4;--rare: #3f8cff;--epic: #9a5cff;--legendary: #f2a516;color-scheme:light}@media (prefers-color-scheme: dark){:root{--bg: #17130f;--bg-2: #1d1813;--surface: #241e18;--surface-2: #2e261f;--text: #f6eee8;--muted: #b6a89d;--line: #3a3028;--primary: #ff7a5c;--primary-soft: #3b2219;--shadow: 0 14px 34px rgba(0, 0, 0, .4);color-scheme:dark}}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}body{min-height:100vh;font-family:Pretendard Variable,Pretendard,Apple SD Gothic Neo,Noto Sans KR,system-ui,sans-serif;background:radial-gradient(1200px 600px at 50% -10%,var(--primary-soft),transparent 60%),var(--bg);color:var(--text);-webkit-font-smoothing:antialiased;word-break:keep-all}button,input,textarea{font:inherit;color:inherit}a{color:inherit}h1,h2,h3{margin:0;line-height:1.25}.muted{color:var(--muted)}.tiny{font-size:.78rem}.center{text-align:center}.grow{flex:1;min-width:0}.error{color:var(--danger);font-size:.88rem}.page{width:min(100%,460px);margin:0 auto;padding:20px 16px 48px;display:flex;flex-direction:column;gap:18px}.page-center{min-height:100vh;justify-content:center;align-items:center}.card,.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px}.card.center{display:flex;flex-direction:column;align-items:center;gap:12px}.big-emoji{font-size:3rem;margin:0}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:700;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:focus-visible,.option:focus-visible,.icon-btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.btn-primary{background:var(--primary);border-color:var(--primary);color:var(--primary-ink);box-shadow:0 8px 20px color-mix(in srgb,var(--primary) 35%,transparent)}.btn-ghost{background:transparent}.btn-xl{min-height:60px;font-size:1.1rem;padding:0 26px}.btn-small{min-height:44px;padding:0 14px;font-size:.9rem}.link-btn{border:0;background:none;color:var(--primary);font-weight:700;cursor:pointer;padding:0 4px;min-height:44px}.icon-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;text-decoration:none}.icon-btn:disabled{opacity:.35}.chip{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:999px;background:#ffffffa6;color:#2a211b;font-size:.8rem;font-weight:700}.chip-wild{background:#2a211b;color:#fff}.chip-new{background:var(--accent);color:#fff;animation:pop .5s ease both 1.6s}.hero{text-align:center;padding:28px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative}.hero-float{display:flex;gap:14px;font-size:2rem}.hero-float span{animation:bob 2.4s ease-in-out infinite}.hero-float span:nth-child(2){animation-delay:.3s}.hero-float span:nth-child(3){animation-delay:.6s}.hero-float span:nth-child(4){animation-delay:.9s}.logo{font-size:2.6rem;font-weight:900;letter-spacing:-.03em}.logo span{color:var(--primary)}.slogan{margin:0;font-weight:700}.hero-desc{margin:6px 0 8px;color:var(--muted);line-height:1.6}.hero-desc strong{color:var(--text)}.hero-actions{display:flex;flex-direction:column;gap:10px;width:100%}.panel-grid{display:flex;flex-direction:column;gap:12px}.panel{display:flex;gap:14px;align-items:center;padding:14px 16px}.panel.col{flex-direction:column;align-items:stretch}.panel p{margin:2px 0 0;font-size:.86rem}.panel-link{text-decoration:none}.panel-emoji{font-size:1.8rem}.code-form{align-items:flex-start}.code-row{display:flex;gap:8px;margin-top:8px}.code-row input,.panel input{flex:1;min-width:0;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);padding:0 12px;letter-spacing:.06em;text-transform:uppercase}.panel input[type=password],.panel input[autocomplete=username]{text-transform:none;letter-spacing:0}.footer{margin-top:8px}.disclosure{margin:0;font-size:.82rem;color:var(--muted);background:var(--surface-2);border-radius:12px;padding:10px 12px;line-height:1.5}.disclosure.compact{font-size:.74rem;padding:8px 10px}.disclosure strong{display:inline-block;background:var(--text);color:var(--bg);border-radius:4px;padding:0 5px;margin-right:4px;font-size:.72rem}.play{min-height:100vh}.play-top{display:flex;align-items:center;justify-content:space-between;gap:10px}.dots{display:flex;gap:6px}.dot{width:10px;height:10px;border-radius:50%;background:var(--line);transition:all .25s ease}.dot.done{background:var(--primary)}.dot.now{width:28px;border-radius:999px;background:var(--primary)}.question{display:flex;flex-direction:column;gap:14px;animation:slide-in .35s ease both;padding-top:18px}.wild-banner{align-self:center;background:#2a211b;color:#fff;padding:8px 16px;border-radius:999px;font-weight:800;animation:flip-in .6s ease both}.q-title{font-size:1.75rem;font-weight:900;text-align:center;letter-spacing:-.02em}.q-sub{margin:-6px 0 0;text-align:center}.options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}.options-3{grid-template-columns:repeat(3,1fr)}.option{min-height:116px;border-radius:22px;border:2px solid var(--line);background:var(--surface);box-shadow:var(--shadow);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:12px 8px;cursor:pointer;transition:transform .12s ease,border-color .12s ease,background .12s ease}.option:hover:not(:disabled){transform:translateY(-2px);border-color:var(--primary)}.option:disabled{cursor:default}.option.lit{border-color:var(--primary);background:var(--primary-soft);transform:scale(1.04)}.option-emoji{font-size:2.3rem;line-height:1}.option-label{font-weight:800;font-size:.98rem;text-align:center}.btn-dice{align-self:center;border-style:dashed;background:transparent}.trail{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px;justify-content:center}.trail li{background:var(--surface-2);border-radius:999px;padding:4px 10px;font-size:.82rem}.board-wrap{display:flex;flex-direction:column;align-items:center;gap:18px}.board{display:grid;grid-template-columns:repeat(5,52px);gap:6px}.board span{width:52px;height:52px;border-radius:14px;background:var(--surface);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:1.5rem;animation:cell-flash 1.2s ease-in-out infinite}.board-label{font-weight:800;margin:0}.reveal{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bg) 70%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fade-out .4s ease forwards 1.3s;pointer-events:none}.reveal-word{font-size:4.2rem;font-weight:900;letter-spacing:-.03em;color:var(--primary);animation:stamp .55s cubic-bezier(.2,1.6,.4,1) both}.reveal-legendary .reveal-word{color:var(--legendary)}.reveal-epic .reveal-word{color:var(--epic)}.reveal-rare .reveal-word{color:var(--rare)}.burst{position:absolute;left:50%;top:50%;width:0;height:0}.burst span{position:absolute;font-size:1.5rem;animation:burst 1.1s ease-out both}.hero-card{position:relative;border-radius:28px;padding:22px 20px;background:linear-gradient(145deg,var(--from),var(--to));color:#241c16;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;overflow:hidden;border:3px solid transparent}.hero-card-top{display:flex;gap:8px;align-items:center}.hero-card-emoji{font-size:4rem;line-height:1;margin-top:4px}.hero-card-context{margin:0;font-weight:700;opacity:.75}.hero-card-title{font-size:1.85rem;font-weight:900;letter-spacing:-.02em}.contrast{margin:0;font-weight:700;background:#ffffff8c;border-radius:12px;padding:6px 10px;align-self:flex-start}.diagnosis{margin:4px 0;padding-left:18px;line-height:1.55}.answer-chips{display:flex;flex-wrap:wrap;gap:6px}.rarity{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-weight:900;font-size:.78rem;color:#fff;letter-spacing:.02em}.rarity-common{background:var(--common)}.rarity-rare{background:var(--rare)}.rarity-epic{background:var(--epic)}.rarity-legendary{background:linear-gradient(90deg,#f2a516,#ff6fb5,#f2a516);background-size:200% 100%;animation:shimmer 2.5s linear infinite}.rarity-frame-rare{border-color:var(--rare)}.rarity-frame-epic{border-color:var(--epic);box-shadow:0 0 0 4px color-mix(in srgb,var(--epic) 25%,transparent),var(--shadow)}.rarity-frame-legendary{border-color:var(--legendary);box-shadow:0 0 0 5px color-mix(in srgb,var(--legendary) 30%,transparent),0 0 40px color-mix(in srgb,var(--legendary) 40%,transparent)}.is-shiny:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.35) 50%,transparent 60%);background-size:250% 100%;animation:shine 2.8s ease-in-out infinite;pointer-events:none}.fortune-row{display:flex;flex-direction:column;gap:8px}.fortune{display:flex;gap:10px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 14px}.fortune span{font-size:1.4rem}.fortune p{margin:0;font-weight:600}.lucky{display:flex;justify-content:space-around;font-size:.88rem;color:var(--muted)}.lucky strong{color:var(--text)}.section-title{font-size:1.2rem;font-weight:900}.slots{display:flex;flex-direction:column;gap:12px}.slot{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:14px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);animation:rise .45s ease both}.slot:nth-of-type(2){animation-delay:.08s}.slot:nth-of-type(3){animation-delay:.16s}.slot.rerolled{border-color:var(--accent)}.slot-bonus{border:2px dashed var(--ok)}.slot.spinning .slot-tile{animation:spin-tile .25s linear infinite}.slot-role{display:flex;align-items:center;gap:6px;font-weight:800;color:var(--muted);font-size:.88rem}.slot-role .chip{background:var(--primary-soft);color:var(--text)}.slot-body{display:flex;align-items:center;gap:14px}.slot-tile{flex:0 0 64px;height:64px;border-radius:18px;background:var(--surface-2);display:flex;align-items:center;justify-content:center;font-size:2.2rem}.slot-text strong{font-size:1.05rem}.slot-text p{margin:2px 0 0;font-size:.88rem}.slot-actions{display:flex;gap:8px;flex-wrap:wrap}.share-box{text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px}.share-box p{margin:0}.code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.4rem;font-weight:800;letter-spacing:.06em;margin:4px 0 12px!important}.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%);background:var(--text);color:var(--bg);padding:12px 18px;border-radius:999px;font-weight:700;z-index:60;animation:rise .3s ease both;max-width:calc(100% - 32px)}.book-head{display:flex;align-items:center;gap:12px}.book-head h1{flex:1;font-size:1.4rem}.progress-pill{background:var(--primary-soft);border-radius:999px;padding:6px 12px;font-weight:800}.meter{height:10px;border-radius:999px;background:var(--line);overflow:hidden}.meter span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));transition:width .6s ease}.book-section{display:flex;flex-direction:column;gap:10px}.book-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.book-card{position:relative;overflow:hidden;border-radius:18px;border:2px solid var(--line);background:var(--surface);padding:14px 10px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;text-decoration:none;min-height:132px;font-size:.9rem}.book-card.locked{background:var(--surface-2);border-style:dashed}.book-emoji{font-size:2rem}.admin-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:6px 0}.reel-page{min-height:100vh;display:flex;flex-wrap:wrap;gap:20px;justify-content:center;align-items:flex-start;padding:16px;background:#0f0c0a}.reel-page.clean{padding:0;align-items:center}.reel{position:relative;width:min(100%,calc((100vh - 32px)*.5625),460px);aspect-ratio:9 / 16;border-radius:24px;overflow:hidden;cursor:pointer;background:#222}.reel canvas{display:block;width:100%;height:100%}.reel-page.clean .reel{width:min(100vw,56.25vh);border-radius:0}.safe-guide{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.safe{position:absolute;left:0;right:0;background:repeating-linear-gradient(45deg,#f003 0,#f003 10px,#ff000014 10px,#ff000014 20px);color:#900;font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center}.reel-panel{width:min(100%,380px);background:var(--surface);color:var(--text);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:10px}.reel-controls{display:grid;grid-template-columns:1fr 1fr;gap:8px}.export-box{display:flex;flex-direction:column;gap:8px;border:1px solid var(--line);border-radius:16px;padding:12px;background:var(--surface-2)}.export-box p{margin:0}.export-video{width:100%;max-height:320px;border-radius:12px;background:#000}.export-done{display:flex;flex-direction:column;gap:8px}.caption-label{font-weight:800;font-size:.9rem}.reel-panel textarea,.admin textarea{width:100%;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);padding:10px;font-size:.82rem;line-height:1.5;resize:vertical}.admin{width:min(100%,720px)}.tabs{display:flex;gap:6px;overflow-x:auto}.tab{min-height:44px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:800;cursor:pointer;white-space:nowrap}.tab.on{background:var(--text);color:var(--bg);border-color:var(--text)}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px;text-align:center}.stat strong{display:block;font-size:1.4rem}.stat span{font-size:.76rem;color:var(--muted)}.notice{margin:0;background:#fff4d6;color:#5b4200;border-radius:12px;padding:10px 12px;font-size:.86rem}.filter-bar{display:flex;gap:8px}.filter-bar input,.filter-bar select,.editor input,.admin select{flex:1;min-width:0;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);padding:0 10px}.product-list,.scenario-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}.product-list li{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}.product-list li.is-hidden{opacity:.6}.product-row{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;min-height:56px;border:0;background:none;text-align:left;cursor:pointer}.product-emoji{font-size:1.8rem}.block{display:block}.pill{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:.75rem;font-weight:800;white-space:nowrap}.pill.ok{background:#d8f5ea;color:#0c6046}.pill.warn{background:#ffe9cc;color:#7a4300}.editor{display:flex;flex-direction:column;gap:10px;padding:4px 12px 14px}.editor label{display:flex;flex-direction:column;gap:4px;font-size:.82rem;font-weight:700}.editor label.check{flex-direction:row;align-items:center;gap:8px}.editor p{margin:-4px 0 0}.editor-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.editor .narrow{width:80px}.role-picker{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}.role-picker legend{font-size:.82rem;font-weight:700;margin-bottom:4px}.role-picker .role{flex-direction:row;align-items:center;border:1px solid var(--line);border-radius:999px;padding:6px 10px;cursor:pointer;font-weight:700}.role-picker .role.on{background:var(--primary-soft);border-color:var(--primary)}.role-picker input{position:absolute;opacity:0;pointer-events:none}details.panel summary{cursor:pointer;min-height:32px;display:flex;align-items:center}.scenario-head{display:flex;align-items:center;gap:10px}.scenario-head p{margin:2px 0 0}.chips-wrap{display:flex;flex-wrap:wrap;gap:6px}@keyframes bob{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes slide-in{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}@keyframes rise{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes flip-in{0%{opacity:0;transform:rotateX(90deg) scale(.8)}to{opacity:1;transform:none}}@keyframes pop{0%{opacity:0;transform:scale(.5)}70%{transform:scale(1.12)}to{opacity:1;transform:scale(1)}}@keyframes stamp{0%{opacity:0;transform:scale(2.4) rotate(-8deg)}to{opacity:1;transform:scale(1) rotate(-4deg)}}@keyframes fade-out{to{opacity:0;visibility:hidden}}@keyframes burst{0%{opacity:1;transform:translate(0) rotate(0)}to{opacity:0;transform:translate(var(--x),calc(var(--y) * -1 + 120px)) rotate(var(--r))}}@keyframes cell-flash{0%,to{transform:scale(1);background:var(--surface)}50%{transform:scale(1.08);background:var(--primary-soft)}}@keyframes shimmer{to{background-position:-200% 0}}@keyframes shine{0%{background-position:150% 0}60%,to{background-position:-100% 0}}@keyframes spin-tile{to{transform:rotate(360deg)}}@keyframes progress{0%{width:var(--start)}to{width:var(--end)}}@keyframes choose{0%{transform:scale(1)}40%{transform:scale(.92)}to{transform:scale(1.06);background:#fff;border-color:#221a14;box-shadow:0 8px 20px #0000002e}}@keyframes roulette{0%,20%,40%,60%,80%{background:#ffffffbf}10%,30%,50%,70%,90%{background:#fff6c2}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition:none!important}.burst{display:none}}@media (max-width: 360px){.options-3{grid-template-columns:1fr 1fr 1fr}.option{min-height:100px}.option-emoji{font-size:1.9rem}.q-title{font-size:1.5rem}}.home-section{display:flex;flex-direction:column;gap:10px}.home-section .section-title{margin:6px 0 0}.daily-card{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:var(--radius);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 16%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));box-shadow:var(--shadow)}.daily-head .section-title{margin:0}.daily-head p{margin:4px 0 0;font-size:.9rem}.daily-banner{margin:0;padding:10px 14px;border-radius:14px;background:color-mix(in srgb,var(--accent) 14%,var(--surface));color:var(--text);font-size:.9rem;font-weight:700;text-align:center}.result-row{display:flex;align-items:center;gap:12px;min-height:56px;padding:12px 14px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-decoration:none;transition:transform .15s ease}.result-row:hover{transform:translateY(-1px)}.result-row:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.result-row-emoji{flex:none;font-size:1.7rem}.result-row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.result-row-text strong,.result-row-text .tiny{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.result-row .rarity{flex:none}.streak-line{margin:4px 0 0;font-size:.92rem}.chip-streak{background:#2a211b;color:#ffd36b}.btn-kakao{background:#fee500;border-color:#fee500;color:#191600}
