:root{
  --bg:#0b1020; --panel:#121a30; --panel2:#0e1730; --line:#2a3760;
  --txt:#eaf0ff; --dim:#8a99c4;
  --gpt:#19c37d; --claude:#c07bff; --gemini:#4d9dff; --accent:var(--claude);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
  background:radial-gradient(900px 500px at 20% -10%,#1a2550 0,transparent 55%),var(--bg);color:var(--txt)}
.app{display:flex;flex-direction:column;height:100dvh;max-width:820px;margin:0 auto}
.top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px}
.logo{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-weight:900;font-size:14px;
  background:linear-gradient(135deg,var(--gpt),var(--claude),var(--gemini));color:#04122a}
.titles b{font-size:16px;display:block;line-height:1.1}
.titles small{font-size:11px;color:var(--dim)}
.clear{background:var(--panel);border:1px solid var(--line);color:var(--txt);width:40px;height:40px;border-radius:11px;font-size:17px;cursor:pointer}
.chat{flex:1;overflow-y:auto;padding:10px 16px 20px;display:flex;flex-direction:column;gap:12px}

.mission-card,.result-card,.submit-card,.board-mini,.helper{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px}
.mrow{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.badge{font-size:12px;font-weight:800;padding:5px 11px;border-radius:999px}
.badge.open{background:rgba(77,157,255,.16);color:#8fc0ff}
.badge.judging{background:rgba(255,213,74,.16);color:#ffd54a}
.badge.results{background:rgba(51,224,138,.16);color:#5ff0a8}
.timer{font-weight:900;font-size:16px;font-variant-numeric:tabular-nums;color:var(--dim)}
.timer.danger{color:#ff5a6a}
.mission-card h2{font-size:19px;line-height:1.3;margin-bottom:6px}
.mission-card p{font-size:15px;line-height:1.6;color:#d6e0ff;white-space:pre-wrap}
.rubric{margin-top:10px;font-size:13px;color:var(--dim);background:#0e1730;border-radius:10px;padding:9px 12px}
.result-card{text-align:center;background:linear-gradient(180deg,rgba(255,213,74,.08),var(--panel))}
.rrank{font-size:26px;font-weight:900;color:var(--c)}
.rscore{font-size:44px;font-weight:900;margin:2px 0}
.rscore small{font-size:16px;color:var(--dim);font-weight:700}
.rcomment{font-size:14px;color:#d6e0ff;line-height:1.5}
.sc-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}
.sc-head b{font-size:15px}
.sstat{font-size:12px;color:#5ff0a8;font-weight:700}
#answer{width:100%;min-height:110px;resize:vertical;background:#0e1730;border:1.5px solid var(--line);border-radius:12px;color:var(--txt);font-size:15px;padding:12px;font-family:inherit;line-height:1.5;outline:none}
#answer:focus{border-color:var(--accent)}
#answer:disabled{opacity:.5}
.submit-btn{width:100%;margin-top:10px;padding:14px;border:none;border-radius:12px;background:var(--accent);color:#fff;font-weight:900;font-size:16px;cursor:pointer}
.submit-btn:disabled{opacity:.45;cursor:not-allowed}
.board-mini .bm-head{font-size:14px;font-weight:800;margin-bottom:10px}
.brow{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:9px}
.brow.me{background:rgba(192,123,255,.12)}
.brow .r{width:20px;text-align:center;font-weight:900;color:var(--dim)}
.brow .dot{width:12px;height:12px;border-radius:4px}
.brow .n{flex:1;font-weight:700;font-size:14px}
.brow .sc{font-weight:900;font-variant-numeric:tabular-nums}
.helper{padding:10px}
.helper-toggle{width:100%;background:none;border:none;color:var(--dim);font-weight:800;font-size:14px;padding:8px;cursor:pointer}
.chatlog{max-height:280px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding:6px 2px}
.cmsg{padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.55;white-space:pre-wrap;word-break:break-word;max-width:88%}
.cmsg.user{align-self:flex-end;background:#2b3a66}
.cmsg.bot{align-self:flex-start;background:#0e1730;border:1px solid var(--line)}
.composer{display:flex;gap:9px;align-items:flex-end}
.composer.inline{padding:8px 0 0}
#chatInput{flex:1;resize:none;max-height:120px;background:#0e1730;border:1.5px solid var(--line);border-radius:14px;color:var(--txt);font-size:15px;padding:11px 13px;font-family:inherit;line-height:1.4;outline:none}
#chatSend{width:44px;height:44px;flex-shrink:0;border:none;border-radius:13px;background:var(--accent);color:#fff;font-size:18px;cursor:pointer}
.picker{display:flex;gap:8px;margin-bottom:8px}
.pick{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px;border-radius:12px;border:1.5px solid var(--line);background:var(--panel2);color:var(--dim);font-weight:800;font-size:14px;cursor:pointer}
.pick .ic{font-size:12px}
.pick:disabled{opacity:.35}
.pick.on[data-p="gpt"]{border-color:var(--gpt);color:#fff}
.pick.on[data-p="claude"]{border-color:var(--claude);color:#fff}
.pick.on[data-p="gemini"]{border-color:var(--gemini);color:#fff}
.dots::after{content:'';animation:dots 1.2s steps(4,end) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.hidden{display:none !important}
.modal{position:fixed;inset:0;background:rgba(6,9,20,.82);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
.modal.show{display:flex}
.mbox{background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:24px;width:100%;max-width:420px}
.mbox h3{font-size:20px;margin-bottom:4px}
.mbox p{color:var(--dim);font-size:14px;margin-bottom:16px}
.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tcard{padding:16px;border-radius:13px;border:2px solid var(--c);background:transparent;color:#fff;font-weight:800;font-size:16px;cursor:pointer}
.tcard.sel{background:var(--c);color:#04122a}
::-webkit-scrollbar{width:7px}::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}