/* === Tokens (RGB channels so rgb(var(--x) / a) works). Theme: light / dark / system via <html data-theme>. === */
:root{--bg:244 246 249;--fg:28 36 48;--card:255 255 255;--land:227 232 239;--line:185 194 207;--muted:95 107 124;--accent:44 107 237;--link:15 79 196;--ok:27 122 70;--warn:150 98 0;--bad:198 45 51;--tab-h:0px;color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:5 5 16;--fg:232 237 243;--card:20 24 36;--land:34 42 58;--line:58 70 85;--muted:141 153 169;--accent:59 108 230;--link:143 184 255;--ok:47 182 106;--warn:229 165 10;--bad:229 72 77;color-scheme:dark}}
:root[data-theme=dark]{--bg:5 5 16;--fg:232 237 243;--card:20 24 36;--land:34 42 58;--line:58 70 85;--muted:141 153 169;--accent:59 108 230;--link:143 184 255;--ok:47 182 106;--warn:229 165 10;--bad:229 72 77;color-scheme:dark}
html[data-fs="1"]{font-size:118%}
html[data-fs="2"]{font-size:135%}
@media (max-width:767px){:root{--tab-h:calc(3.5rem + env(safe-area-inset-bottom,0px))}}

/* === Base === */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{word-break:keep-all;overflow-wrap:break-word}
body{margin:0;background:rgb(var(--bg));color:rgb(var(--fg));font-family:system-ui,-apple-system,"Noto Sans KR","Malgun Gothic",sans-serif;line-height:1.5;overflow-x:hidden}
@media (max-width:767px){body{padding-bottom:var(--tab-h)}}
a{color:rgb(var(--link))}
h1{font-size:1.5rem;margin:0 0 .25rem}
h2{font-size:1rem;margin:0 0 .25rem}
p{margin:0 0 .75rem}
.muted{color:rgb(var(--muted))}
.small{font-size:.8rem}
.center{text-align:center}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:3px solid rgb(var(--accent));outline-offset:2px}
#main{outline:none}
.skip-link{position:absolute;left:8px;top:-60px;z-index:100;background:rgb(var(--accent));color:#fff;padding:10px 14px;border-radius:8px;font-weight:700;text-decoration:none}
.skip-link:focus{top:8px}

/* === Top bar and tab bar === */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--line) / .6);background:rgb(var(--card) / .72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
@media (min-width:640px){.topbar{padding:.75rem 2rem}}
.brand{color:rgb(var(--fg));font-weight:600;letter-spacing:.02em;text-decoration:none;white-space:nowrap}
.brand:hover{color:rgb(var(--link))}
.topbar-right{display:flex;align-items:center;gap:.5rem;min-width:0}
.topnav{display:none;align-items:center;gap:.25rem}
@media (min-width:768px){.topnav{display:flex}.only-mobile{display:none!important}}
.topnav a{padding:.5rem 1rem;border-radius:.75rem;font-size:.875rem;color:rgb(var(--fg) / .7);text-decoration:none;transition:background .15s,color .15s}
.topnav a:hover{color:rgb(var(--fg));background:rgb(var(--land))}
.topnav a.on{background:rgb(var(--accent));color:#fff}
.who{display:none;font-size:.875rem;color:rgb(var(--muted));max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (min-width:640px){.who{display:inline}}
#tabbar{display:none}
@media (max-width:767px){
  #tabbar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;height:var(--tab-h);padding-bottom:env(safe-area-inset-bottom,0px);border-top:1px solid rgb(var(--line));background:rgb(var(--card) / .95);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  #tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:3.5rem;color:rgb(var(--muted));text-decoration:none;font-size:.7rem;font-weight:600;-webkit-tap-highlight-color:transparent}
  #tabbar a.on{color:rgb(var(--link))}
}
.reduce-motion *,.reduce-motion *::before,.reduce-motion *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
.reduce-motion .spin{animation-duration:1s!important;animation-iteration-count:infinite!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.spin{animation-duration:1s!important;animation-iteration-count:infinite!important}}
@media (forced-colors:active){.topnav a.on,#tabbar a.on{outline:2px solid Highlight}}
@media print{.topbar,#tabbar{display:none!important}}

/* === Pages, cards, buttons, forms === */
.page{max-width:42rem;margin:0 auto;padding:5rem 1rem 2.5rem}
.page.narrow{max-width:24rem;min-height:100vh;display:flex;align-items:center;padding-top:5rem;padding-bottom:2rem}
.page.narrow>.card{width:100%}
.page.wide{max-width:56rem}
.card{background:rgb(var(--card));border:1px solid rgb(var(--line));border-radius:1rem;padding:1rem}
@media (min-width:640px){.card{padding:1.25rem}}
.stack{display:flex;flex-direction:column;gap:1rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.75rem;padding:0 1.25rem;border-radius:.75rem;border:1px solid transparent;background:rgb(var(--accent));color:#fff;font:inherit;font-size:.875rem;font-weight:500;text-decoration:none;cursor:pointer;transition:filter .15s,background .15s}
.btn:hover{filter:brightness(1.1)}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:none}
.btn-sm{min-height:2rem;padding:0 .75rem}
.btn-ghost{background:transparent;color:rgb(var(--fg));border-color:rgb(var(--line))}
.btn-ghost:hover{background:rgb(var(--land));filter:none}
.btn-danger{background:rgb(var(--bad) / .15);color:rgb(var(--bad))}
.btn-ok{background:rgb(var(--ok));color:rgb(var(--bg))}
.btn-block{width:100%}
.input,.textarea{width:100%;background:rgb(var(--card));border:1px solid rgb(var(--line));border-radius:.75rem;padding:.6rem 1rem;color:rgb(var(--fg));font:inherit;font-size:.9rem}
.input::placeholder,.textarea::placeholder{color:rgb(var(--muted) / .6)}
.input:focus,.textarea:focus{outline:none;border-color:rgb(var(--accent));box-shadow:0 0 0 1px rgb(var(--accent))}
.textarea{resize:none}
.row{display:flex;align-items:center;gap:.75rem}
.between{justify-content:space-between}
.grow{flex:1;min-width:0}
.badge{display:inline-block;font-size:.75rem;padding:.1rem .5rem;border-radius:999px;white-space:nowrap}
.badge.muted{background:rgb(var(--muted) / .2);color:rgb(var(--muted))}
.badge.ok{background:rgb(var(--ok) / .2);color:rgb(var(--ok))}
.badge.warn{background:rgb(var(--warn) / .2);color:rgb(var(--warn))}
.badge.done{background:rgb(var(--land));color:rgb(var(--muted))}
.err{color:rgb(var(--bad));font-size:.875rem}

/* login */
.login-btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;min-height:3rem;padding:0 1.5rem;border-radius:.75rem;font:inherit;font-weight:600;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:opacity .15s,transform .1s}
.login-btn:hover{opacity:.9}.login-btn:active{transform:scale(.97)}
.login-btn.kakao{background:#FEE500;color:#3C1E1E}
.login-btn.naver{background:#03C75A;color:#fff}
.login-btn.google{background:#fff;color:#3c4043;border-color:#dadce0}
.login-btn.guest{background:transparent;color:rgb(var(--fg));border-color:rgb(var(--line))}
.login-btn.guest:hover{background:rgb(var(--land));opacity:1}

/* settings */
.seg{display:inline-flex;max-width:100%;overflow-x:auto;border:1px solid rgb(var(--line));border-radius:.75rem}
.seg button{min-height:2.5rem;padding:0 1rem;border:0;background:transparent;color:rgb(var(--fg));font:inherit;font-size:.875rem;white-space:nowrap;cursor:pointer}
.seg button+button{border-left:1px solid rgb(var(--line))}
.seg button[aria-checked=true]{background:rgb(var(--accent));color:#fff}
.seg button:hover:not([aria-checked=true]){background:rgb(var(--land))}
.setrow{display:flex;flex-direction:column;gap:.5rem;padding:.75rem 0;border-top:1px solid rgb(var(--line) / .6)}
.setrow:first-of-type{border-top:0}
@media (min-width:640px){.setrow{flex-direction:row;align-items:center;justify-content:space-between}}
.switch{flex-shrink:0;position:relative;appearance:none;-webkit-appearance:none;width:2.75rem;height:1.5rem;border-radius:999px;background:rgb(var(--line));cursor:pointer;transition:background .15s;border:0}
.switch::before{content:"";position:absolute;top:2px;left:2px;width:1.25rem;height:1.25rem;border-radius:50%;background:#fff;transition:transform .15s}
.switch:checked{background:rgb(var(--accent))}
.switch:checked::before{transform:translateX(1.25rem)}

/* === Landing (always dark: the scene sits behind white text whatever the theme) === */
#scene-bg{position:fixed;inset:0;background:radial-gradient(ellipse at 50% 40%,#1a1650 0%,#050510 70%)}
#scene{position:fixed;inset:0;width:100%;height:100%;display:block}
.hero{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 1rem;text-align:center;pointer-events:none;background:radial-gradient(ellipse 80% 40% at 50% 50%,rgba(5,5,16,.55),transparent 70%)}
.hero h1{font-size:clamp(2.5rem,9vw,4.5rem);font-weight:900;letter-spacing:-.02em;color:#fff;margin:0;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.hero p{margin:1rem 0 0;font-size:1.125rem;color:rgba(255,255,255,.8);text-shadow:0 2px 8px rgba(0,0,0,.6)}
.hero-cta{pointer-events:auto;margin-top:2.5rem;display:inline-flex;align-items:center;min-height:3rem;padding:0 2rem;border-radius:1rem;background:rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.4);color:#fff;font-weight:600;text-decoration:none;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:background .15s}
.hero-cta:hover{background:rgba(0,0,0,.55)}

/* === Lobby === */
.row.wrap{flex-wrap:wrap}
.rooms{display:grid;grid-template-columns:1fr;gap:1rem}
@media (min-width:640px){.rooms{grid-template-columns:1fr 1fr}}
.room-card{display:flex;flex-direction:column;gap:.75rem;transition:border-color .15s}
.room-card:hover{border-color:rgb(var(--accent) / .6)}
.room-card .btn{margin-top:auto}
.room-name{font-size:1rem;font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-card p{margin:0}
.stats{margin-left:.5rem}.stats span+span{margin-left:.5rem}
.st-ok{color:rgb(var(--ok))}.st-bad{color:rgb(var(--bad))}.st-warn{color:rgb(var(--warn))}.st-muted{color:rgb(var(--muted))}
.banner{padding:.5rem 1rem;font-size:.75rem;text-align:center}
.banner.warn{background:rgb(var(--warn) / .2);color:rgb(var(--warn))}
.banner.bad{background:rgb(var(--bad) / .2);color:rgb(var(--bad))}
#lobby>.banner{position:fixed;top:0;left:0;right:0;z-index:50}
.modal{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,.6)}
.modal-box{width:100%;max-width:28rem;background:rgb(var(--card));border:1px solid rgb(var(--line));border-radius:1rem;padding:1.5rem}
.pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{50%{opacity:.5}}
.spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* === Chat room (full screen) === */
.room{position:fixed;inset:0;display:flex;flex-direction:column;background:rgb(var(--bg))}
.room-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.75rem 1rem;border-bottom:1px solid rgb(var(--line));background:rgb(var(--card) / .9)}
.room-title{font-size:1rem;font-weight:600;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-title.editable{cursor:pointer}.room-title.editable:hover{color:rgb(var(--link))}
.room-title.editable::after{content:"편집";margin-left:.5rem;font-size:.75rem;font-weight:400;color:rgb(var(--muted))}
.input-sm{padding:.2rem .5rem;font-size:.875rem;border-radius:.5rem;width:12rem;max-width:100%}
.linkbtn{background:none;border:0;padding:.25rem;font:inherit;font-size:.875rem;color:rgb(var(--muted));cursor:pointer;white-space:nowrap}
.linkbtn:hover{color:rgb(var(--fg))}
.up{text-transform:uppercase;letter-spacing:.05em}
.timer{display:flex;align-items:center;gap:.5rem;padding:.375rem .75rem;border-radius:.5rem;font-family:ui-monospace,Menlo,monospace;font-size:.875rem;font-weight:700;background:rgb(var(--accent) / .2);color:rgb(var(--link))}
.timer.warn{background:rgb(var(--bad) / .25);color:rgb(var(--bad))}
.proposal{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin:.75rem 1rem 0;padding:.75rem 1rem;border-radius:.75rem;background:rgb(var(--warn) / .15);border:1px solid rgb(var(--warn) / .4)}
.prop-main{margin:0;font-size:.875rem;font-weight:500;color:rgb(var(--warn))}.prop-sub{margin:.125rem 0 0;font-size:.75rem;color:rgb(var(--warn) / .7)}
.room-body{display:flex;flex:1;min-height:0}
.room-main{display:flex;flex-direction:column;flex:1;min-width:0}
.scroller{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.messages{padding:1rem;display:flex;flex-direction:column;gap:.75rem}
.sys{text-align:center;font-size:.75rem;font-style:italic;color:rgb(var(--muted))}
.msg{display:flex;gap:.5rem;align-items:flex-start}
.msg.mine{justify-content:flex-end}
.msg-col{display:flex;flex-direction:column;gap:.125rem;max-width:75%}
.msg.mine .msg-col{align-items:flex-end}
.avatar{width:1.75rem;height:1.75rem;border-radius:50%;background:rgb(var(--land));color:rgb(var(--muted));display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;margin-top:.125rem}
.msg-name,.msg-time{font-size:.75rem;color:rgb(var(--muted));padding:0 .25rem}
.bubble{padding:.5rem .75rem;border-radius:1rem;font-size:.875rem;white-space:pre-wrap;overflow-wrap:anywhere}
.msg.mine .bubble{background:rgb(var(--accent));color:#fff;border-top-right-radius:.25rem}
.msg.theirs .bubble{background:rgb(var(--land));color:rgb(var(--fg));border-top-left-radius:.25rem}
.composer{padding:.75rem 1rem;border-top:1px solid rgb(var(--line));background:rgb(var(--card) / .6)}
.chars{display:block;text-align:right;padding-right:.25rem;min-height:1.1rem}
.btn-ok-soft{background:rgb(var(--ok) / .15);border:1px solid rgb(var(--ok) / .4);color:rgb(var(--ok))}
.people{width:13rem;flex-shrink:0;border-left:1px solid rgb(var(--line));background:rgb(var(--card) / .6);padding:1rem;overflow-y:auto;display:none}
@media (min-width:768px){.people{display:block}.only-small{display:none!important}}
@media (max-width:767px){.people.open{display:block;position:absolute;right:0;top:3.6rem;bottom:0;z-index:5;box-shadow:-8px 0 24px rgba(0,0,0,.3);background:rgb(var(--card))}}
.people h2{margin-bottom:.5rem}
.people ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem}
.person{display:flex;align-items:center;gap:.5rem;font-size:.875rem}
.person .me{font-weight:500}
.dot{width:.5rem;height:.5rem;border-radius:50%;flex-shrink:0}
.judging{display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:2rem 0}
.spinner{width:2rem;height:2rem;border:2px solid rgb(var(--accent));border-top-color:transparent;border-radius:50%}
.judge{margin:.75rem 1rem;padding:0;overflow:hidden}
.judge-head{padding:1rem 1.25rem;background:rgb(var(--accent) / .15);border-bottom:1px solid rgb(var(--line))}
.judge-head p{margin:0}.judge-result{font-size:1.25rem;font-weight:700}
.judge-crit{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:1rem}
.judge-expl{padding:1rem 1.25rem;border-top:1px solid rgb(var(--line));background:rgb(var(--land) / .4)}
.crit-label{margin:0 0 .25rem;font-size:.75rem;font-weight:500;color:rgb(var(--link))}
.crit-text{margin:0;font-size:.875rem;line-height:1.6}