:root{--narre-bg: #12100e;--narre-surface: #1c1917;--narre-border: #3a332e;--narre-text: #f2ece4;--narre-text-dim: #a89f94;--narre-accent: #c9a227;--narre-danger: #c0483c;--narre-font-body: "Nanum Gothic", system-ui, -apple-system, sans-serif;--narre-font-display: "NanumSquare", var(--narre-font-body);--narre-text-sm: .875rem;--narre-text-base: 1rem;--narre-text-lg: 1.25rem;--narre-text-xl: 1.75rem;--narre-gap-xs: .25rem;--narre-gap-sm: .5rem;--narre-gap-md: 1rem;--narre-gap-lg: 2rem;--narre-radius: .5rem;--narre-shadow: 0 2px 12px rgb(0 0 0 / .35);--narre-chip-inset: 78px}.narre-shell{height:100%}.narre-shell__chip{position:fixed;top:var(--narre-gap-sm);left:var(--narre-gap-sm);z-index:100;display:flex;align-items:center;gap:var(--narre-gap-sm);padding:var(--narre-gap-xs);border:1px solid transparent;border-radius:var(--narre-radius)}.narre-shell__chip[data-open]{background:var(--narre-surface);border-color:var(--narre-border);box-shadow:var(--narre-shadow)}.narre-shell__logo{padding:var(--narre-gap-xs) var(--narre-gap-sm);border:0;border-radius:var(--narre-radius);background:var(--narre-surface);color:var(--narre-accent);font-family:var(--narre-font-display);font-size:var(--narre-text-sm);cursor:pointer}.narre-shell__chip[data-open] .narre-shell__logo{background:transparent}.narre-shell__menu{display:flex;align-items:center;gap:var(--narre-gap-md);padding-right:var(--narre-gap-sm);font-family:var(--narre-font-body)}.narre-shell__link{color:var(--narre-text-dim);font-size:var(--narre-text-sm);text-decoration:none;white-space:nowrap}.narre-shell__link:hover{color:var(--narre-accent)}*{box-sizing:border-box;margin:0;padding:0}:root{--page: #e8e4da;--paper: #f6f1e9;--paper-2: #fbf9f4;--ink: #2a2330;--muted: #6e6878;--dim-ink: #4a4454;--tan: #f0e4cc;--red: #b3312f;--gold: #f2b01e;--green: #3e8e5a;--display: "NanumSquare", "Nanum Gothic", "Malgun Gothic", sans-serif}html,body{height:100%}body{background:var(--page);color:var(--ink);font-family:Nanum Gothic,Malgun Gothic,Apple SD Gothic Neo,sans-serif;font-size:15px}#app{height:100vh;height:100dvh;max-width:720px;margin:0 auto;display:flex;flex-direction:column;background:var(--paper);border-left:2px solid var(--ink);border-right:2px solid var(--ink);overflow:hidden}.screen{flex:1;min-height:0;display:flex;flex-direction:column}.screen[hidden]{display:none}button{font:inherit;font-family:var(--display);color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:8px;padding:6px 13px;font-weight:700;cursor:pointer}button:hover:not(:disabled){background:var(--tan)}button:disabled{opacity:.4;cursor:not-allowed}button.primary{background:var(--gold)}button.primary:hover:not(:disabled){background:#dfa011}.chip{display:inline-block;font-family:var(--display);color:var(--red);background:#fff;border:1.5px solid var(--red);border-radius:14px;padding:2px 10px;font-weight:700;font-size:13.5px;white-space:nowrap}.topbar{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:2px solid var(--ink);background:var(--paper-2)}.topbar-title{font-family:var(--display);font-weight:800;font-size:19px;white-space:nowrap}@media (max-width: 860px){.topbar{padding-left:var(--narre-chip-inset)}}.scroll{flex:1;min-height:0;overflow-y:auto;padding:16px 16px 18px;display:flex;flex-direction:column;gap:10px}.bottom-bar{display:flex;align-items:center;gap:10px;min-height:68px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));border-top:2px solid var(--ink);background:var(--paper-2)}.bottom-bar button.primary{margin-left:auto}.bottom-bar button[hidden]{display:none}.bar-note{color:var(--muted);font-size:13px;word-break:keep-all;line-height:1.4}h1{font-family:var(--display);font-size:24px;font-weight:800}h2{font-family:var(--display);font-size:14px;font-weight:800}.lead{color:var(--dim-ink);line-height:1.55;word-break:keep-all;font-size:14px}.panel{background:var(--paper-2);border:2px solid var(--ink);border-radius:10px;padding:14px;box-shadow:3px 3px #2a233026}.panel h2{display:inline-block;background:var(--ink);color:#fff;padding:3px 10px;margin-bottom:10px;font-size:13px;letter-spacing:.02em}.panel-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}.panel-head h2{margin-bottom:0}.note{color:var(--muted);font-size:13.5px;line-height:1.7;margin-top:8px;word-break:keep-all}.note.tight{margin-top:0;font-size:13px;line-height:1.5}.panel .note{font-family:var(--display)}.rules-panel{margin-top:2px}.rules-panel>summary{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:8px 12px;background:var(--red);border:2px solid var(--ink);border-radius:8px;cursor:pointer;list-style:none}.rules-panel>summary::-webkit-details-marker{display:none}.rules-panel>summary .banbar-label{color:#fff;font-family:var(--display);font-weight:800;font-size:13px}.rules-panel>summary .chip{border-color:#fff;background:#fff;font-size:13px}.rules-panel>summary:after{content:"자세히 ▾";margin-left:auto;color:#fff;font-family:var(--display);font-size:12px;font-weight:700;white-space:nowrap;opacity:.85}.rules-panel[open]>summary{border-radius:8px 8px 0 0}.rules-panel[open]>summary:after{content:"접기 ▴"}.rules-panel[open]>summary .chip{display:none}.rule-body{border:2px solid var(--ink);border-top:0;border-radius:0 0 8px 8px;overflow:hidden}.rule-grid{display:grid;grid-template-columns:1fr 1fr;gap:0}.rule-foot{padding:8px 11px;background:var(--tan);border-top:2px solid var(--ink);color:var(--dim-ink);font-family:var(--display);font-size:13px;font-weight:700;word-break:keep-all;line-height:1.45}.rule-card{display:flex;flex-direction:column;gap:5px;padding:10px 11px;background:var(--paper-2)}.rule-card:nth-child(-n+2){border-bottom:1px solid #d9cfbd}.rule-card:nth-child(odd){border-right:1px solid #d9cfbd}.rule-card p{color:var(--dim-ink);font-family:var(--display);font-size:13px;line-height:1.45;word-break:keep-all}@media (max-width: 360px){.rule-grid{grid-template-columns:1fr}.rule-grid .rule-card{border-right:0;border-bottom:1px solid #d9cfbd}.rule-grid .rule-card:last-child{border-bottom:0}}.picks{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.picks button{padding:8px 16px;font-size:15px}.picks.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.picks.grid button{padding:8px 6px}@media (max-width: 430px){.picks.grid{grid-template-columns:repeat(3,1fr)}}button.big{font-family:var(--display);padding:12px 34px;font-size:18px;letter-spacing:.04em}.picks button.on{background:var(--ink);color:#fff}.picks button.on:hover{background:var(--ink)}.field{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.field[hidden]{display:none}.field-label{flex:0 0 4.4rem;color:var(--dim-ink);font-family:var(--display);font-size:14px;font-weight:800;line-height:1.35;word-break:keep-all}.field .picks{flex:1;min-width:0}.picks.toggle{gap:0}.picks.toggle .mode{flex:1;border-radius:0}.picks.toggle .mode:first-child{border-radius:8px 0 0 8px}.picks.toggle .mode:last-child{border-radius:0 8px 8px 0;border-left-width:1px}.mode-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.mode-row .text-input{flex:1;min-width:8rem}.mode-row button{padding:10px 22px;font-size:16px}#multiOnly,#roomCreate,#roomBox{display:flex;flex-direction:column;gap:8px}#multiOnly[hidden],#roomCreate[hidden],#roomBox[hidden]{display:none}#roomBox{gap:10px}.rename{margin-left:auto;display:flex;gap:6px;align-items:center}.rename-btn{flex:none;padding:3px 10px;font-size:12.5px}.rename-input{width:8.5rem;padding:3px 9px;font-size:14px;font-weight:700}.panel.settings{display:flex;flex-direction:column;gap:9px;padding:12px}.final{font-family:var(--display);font-size:22px;font-weight:800}.review{list-style:none}.review li{display:flex;align-items:baseline;gap:8px;padding:7px 2px;border-top:1px solid #d9cfbd}.review .tag{color:var(--muted);font-family:var(--display);font-size:13px;margin-left:auto;white-space:nowrap}.review .tag+.tag{margin-left:8px}.review .tag.foul{color:var(--red);font-weight:700}.review .tag.hit{color:var(--green);font-weight:700}.text-input{font:inherit;font-family:var(--display);font-size:16px;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:8px;padding:9px 12px;outline:none}.text-input:focus{box-shadow:0 0 0 3px var(--gold)}.text-input.code{flex:0 0 auto;width:7.5rem;letter-spacing:.3em;text-transform:uppercase;font-weight:800}.code-box{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.code-label{font-family:var(--display);font-size:12px;color:var(--muted);font-weight:700;margin-bottom:4px}.code-value{display:inline-block;background:var(--gold);border:2px solid var(--ink);border-radius:8px;padding:3px 12px;font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:.2em;line-height:1.2}.count{color:var(--muted);font-weight:700}.player-list{list-style:none;display:flex;flex-direction:column;gap:6px}.player-list li{display:flex;align-items:center;gap:8px;font-weight:700}.player-list .dot{width:9px;height:9px;border-radius:50%;background:var(--green);border:1.5px solid var(--ink);flex:none}.player-list .dot[data-on=false]{background:#cfc8bb}.badge{font-family:var(--display);font-size:11.5px;font-weight:800;padding:1px 7px;border-radius:10px;border:1.5px solid var(--ink);background:#fff}.badge.me{background:var(--tan)}.badge.host{background:var(--gold)}#mscores{flex:1;font-family:var(--display);font-weight:700;font-size:14px;word-break:keep-all}#mscores .me{color:var(--red)}#mclock{font-family:var(--display);font-weight:800;font-size:20px;font-variant-numeric:tabular-nums}#mclock.hurry{color:var(--red)}#mbanbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 16px;border-bottom:2px solid var(--ink);background:var(--red)}#mbanbar .banbar-label{color:#fff;font-family:var(--display);font-weight:800;font-size:13px}#mbanbar .chip{border-color:#fff;background:#fff;font-size:13px}#mcardbar{padding:14px 16px 13px;border-bottom:2px solid var(--ink);background:var(--tan);text-align:center}#manswer{font-family:var(--display);font-weight:800;font-size:clamp(22px,7vw,34px);letter-spacing:.08em;word-break:keep-all;line-height:1.25}#mban{margin-top:9px}#mban .chip{font-size:14.5px;padding:3px 12px;border-width:2px}#mchat{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px}#mcomposer{display:flex;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:2px solid var(--ink);background:var(--paper-2)}#mInput{flex:1;min-width:0;font:inherit;font-family:var(--display);font-size:16px;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:8px;padding:9px 12px;outline:none}#mInput:focus{box-shadow:0 0 0 3px var(--gold)}#mSend{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2}#mSend small{font-size:11px;font-weight:700;opacity:.55}#playerList li{color:var(--ink)}#score{margin-left:auto;color:var(--dim-ink);font-weight:700;white-space:nowrap}#score b{color:var(--ink);font-family:var(--display);font-size:18px}#clock{font-family:var(--display);font-weight:800;font-size:20px;font-variant-numeric:tabular-nums;white-space:nowrap}#clock.paused{color:var(--muted)}.menu-fab{position:relative;flex:none}.menu-btn{width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;font-size:17px;line-height:1}.menu-panel{position:absolute;top:calc(100% + 8px);right:0;z-index:70;min-width:220px;background:#fff;border:2px solid var(--ink);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px;box-shadow:4px 4px #2a233033}.menu-panel[hidden]{display:none}.menu-panel button{font-size:14px;padding:8px 10px;text-align:left;font-weight:700}.menu-leave{color:var(--red);border-color:var(--red)}.menu-leave:hover:not(:disabled){background:#f7e7e6}.topbar .menu-leave{flex:none;padding:5px 10px;font-size:13px}#banbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 16px;border-bottom:2px solid var(--ink);background:var(--red)}#banbar .banbar-label{color:#fff;font-family:var(--display);font-weight:800;font-size:13px;margin-right:2px;white-space:nowrap}#banbar .chip{border-color:#fff;background:#fff;font-size:13px}#ban{margin-top:9px}#ban .chip{font-size:14.5px;padding:3px 12px;border-width:2px}#cardbar{padding:14px 16px 13px;border-bottom:2px solid var(--ink);background:var(--tan);text-align:center}#answer{font-family:var(--display);font-weight:800;font-size:clamp(22px,7vw,34px);letter-spacing:.08em;line-height:1.25;word-break:keep-all}#chat{flex:1;min-height:0;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px}.msg-row{display:flex}.msg-row.mine{justify-content:flex-end}.msg-col{max-width:78%;display:flex;flex-direction:column}.msg-row.mine .msg-col{align-items:flex-end}.speaker{font-size:12.5px;color:var(--dim-ink);font-weight:700;margin:0 4px 3px}.bubble{padding:8px 12px;background:#fff;border:2px solid var(--ink);border-radius:14px 14px 14px 4px;line-height:1.6;word-break:keep-all;overflow-wrap:break-word}.msg-row.mine .bubble{background:var(--tan);border-bottom-left-radius:14px;border-bottom-right-radius:4px}.bubble.hit{border-color:var(--green);background:#eaf5ee;font-weight:800}.scene{display:flex;align-items:center;gap:10px;color:var(--red);font-family:var(--display);font-weight:800;font-size:15px;margin:8px 0 2px;white-space:nowrap}.scene:before,.scene:after{content:"";flex:1;height:2px;background:#b3312f4d}.system{text-align:center;color:var(--red);font-size:13.5px;font-weight:700;padding:2px 0}.system.muted{color:var(--muted)}#composer{display:flex;gap:8px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:2px solid var(--ink);background:var(--paper-2)}#sayInput{flex:1;min-width:0;font:inherit;font-family:var(--display);font-size:16px;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:8px;padding:9px 12px;outline:none}#sayInput:focus{box-shadow:0 0 0 3px var(--gold)}#composer button{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:1px;line-height:1.2;padding:6px 12px}#composer button small{font-size:11px;font-weight:700;opacity:.55;letter-spacing:.02em}@media (max-width: 520px){.topbar{padding:9px 12px 9px var(--narre-chip-inset);gap:8px}.topbar-title{font-size:16px}button.big{padding:11px 26px;font-size:17px}.scroll,.bottom-bar,#banbar,#cardbar,#chat{padding-left:12px;padding-right:12px}#composer{padding-left:12px;padding-right:12px;gap:6px}#composer button{padding:8px 10px}}@media (hover: none){#passBtn small{display:none}}