:root{--bg:#0b1030;--ink:#eef1ff;--muted:#9aa3d6;--card:rgba(20,24,64,.92);--line:rgba(140,155,255,.22);--ask:#ffd23f;--urgent:#ff4d6d;--ok:#4ade80;}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden;
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;overscroll-behavior:none;-webkit-user-select:none;user-select:none}
body{display:flex;flex-direction:column}

/* 위 막대 */
#top{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top) + 8px) 12px 8px;
  background:linear-gradient(#0b1030,rgba(11,16,48,.6));position:relative;z-index:6}
.brand{font-weight:800;font-size:16px;letter-spacing:-.2px;white-space:nowrap}
.brand:before{content:"✦ ";color:#c4b5fd}
.stat{font-size:12px;color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--line);padding:3px 9px;border-radius:999px;white-space:nowrap}
.right{margin-left:auto;display:flex;align-items:center;gap:6px}
#clock{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}
@media (max-width:420px){#clock,.stat{display:none}}
.pill{border:1px solid rgba(255,255,255,.18);background:#ffd23f;color:#1a1640;font:inherit;font-weight:700;font-size:13px;
  padding:7px 11px;border-radius:10px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pill:active{transform:scale(.97)}
.pill.ghost{background:rgba(255,255,255,.08);color:var(--ink)}
.pill.big{width:100%;justify-content:center;padding:12px;font-size:16px}
.pill.round{position:absolute;right:14px;bottom:calc(env(safe-area-inset-bottom) + 14px);width:42px;height:42px;justify-content:center;font-size:18px;border-radius:50%;z-index:3;backdrop-filter:blur(6px)}
.badge{background:var(--urgent);color:#fff;border-radius:999px;min-width:19px;height:19px;display:inline-grid;place-items:center;font-size:11px;font-weight:800;padding:0 5px}

/* 무대 */
#stage{flex:1;position:relative;overflow:hidden;
  background:radial-gradient(120% 80% at 50% 45%,#1b2160 0%,#0b1030 70%)}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
#ui{position:absolute;inset:0;pointer-events:none;z-index:2}
#ui>div{position:absolute;left:0;top:0;will-change:transform}

.tag{font-size:12px;white-space:nowrap;margin:-2px 0 0;translate:-50% -100%;
  background:rgba(10,12,36,.78);border:1px solid var(--line);color:var(--ink);padding:5px 10px;border-radius:10px;backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:flex-start;line-height:1.35}
.tag b{font-weight:800}
.tag small{color:var(--muted);font-size:11px;max-width:180px;overflow:hidden;text-overflow:ellipsis}
.tag.hub{color:#e9d5ff;border-color:rgba(196,181,253,.35)}
.tag .l1{display:flex;align-items:center;gap:6px}
.tag.hub{translate:-50% 0}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#7c84b8;flex:none}
.dot.working{background:var(--ok);box-shadow:0 0 8px var(--ok)}
.dot.error{background:var(--urgent);box-shadow:0 0 8px var(--urgent)}

.bubble{translate:-50% -100%;pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:6px;
  background:#fff8e1;color:#1a1640;border:2px solid #1a1640;border-radius:14px;padding:4px 10px 4px 4px;font-size:12px;font-weight:700;
  box-shadow:0 4px 16px rgba(0,0,0,.45);animation:bob 1.1s ease-in-out infinite;max-width:200px}
.bubble:after{content:"";position:absolute;left:50%;bottom:-8px;translate:-50% 0;border:7px solid transparent;border-top-color:#1a1640;border-bottom:0}
.bubble .ico{width:22px;height:22px;border-radius:50%;background:var(--ask);display:grid;place-items:center;font-weight:900;flex:none}
.bubble.urgent{background:#ffe1e7}.bubble.urgent .ico{background:var(--urgent);color:#fff}
.bubble .n{background:#1a1640;color:#fff;border-radius:999px;padding:0 6px;font-size:11px}
.bubble .tx{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@keyframes bob{0%,100%{margin-top:0}50%{margin-top:-6px}}
.zz{translate:-50% -100%;color:#c7d2fe;font-weight:800;font-size:13px;letter-spacing:2px;animation:zz 2.4s ease-in-out infinite;opacity:.85}
@keyframes zz{0%{margin-top:6px;opacity:0}30%{opacity:.9}100%{margin-top:-14px;opacity:0}}
.card{translate:-50% -100%;background:rgba(14,18,52,.92);border:1px solid rgba(74,222,128,.5);color:var(--ink);font-size:12px;padding:7px 11px;border-radius:10px;
  max-width:220px;box-shadow:0 6px 20px rgba(0,0,0,.4);animation:pop .3s ease-out;transition:opacity .5s}
.card b{color:var(--ok)}.card.out{opacity:0}
@keyframes pop{from{opacity:0;margin-top:10px}to{opacity:1;margin-top:0}}

/* 아래 시트 · 업무판 */
#sheet,#board{position:fixed;z-index:7;background:var(--card);backdrop-filter:blur(14px);color:var(--ink);overflow:auto;transition:transform .25s ease}
#sheet{left:0;right:0;bottom:0;max-height:62vh;border-radius:18px 18px 0 0;border-top:1px solid var(--line);transform:translateY(105%);
  padding:4px 16px calc(env(safe-area-inset-bottom) + 18px)}
#sheet.open{transform:none}
#board{top:0;right:0;bottom:0;width:min(400px,100%);border-left:1px solid var(--line);transform:translateX(105%);padding:calc(env(safe-area-inset-top) + 12px) 16px calc(env(safe-area-inset-bottom) + 18px)}
#board.open{transform:none}
@media (min-width:900px){#sheet{left:auto;right:16px;bottom:16px;width:400px;border-radius:18px;border:1px solid var(--line);max-height:80vh;transform:translateY(calc(100% + 40px))}}
.grab{width:40px;height:5px;border-radius:9px;background:var(--line);margin:8px auto 10px}
.who{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.who .pill{margin-left:auto}
.face{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:24px;background:var(--c);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2)}
.who h2,.bh h2{margin:0;font-size:18px}
.bh{display:flex;align-items:center;justify-content:space-between}
.role{color:var(--muted);font-size:13px;margin-top:2px}
.st{display:inline-block;font-size:11px;font-weight:800;padding:2px 8px;border-radius:6px;margin-left:8px;vertical-align:middle;color:#0b1030;background:#9aa3d6}
.st.working{background:var(--ok)}.st.error{background:var(--urgent);color:#fff}
.task{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:14px;margin:8px 0 12px;line-height:1.5}
.task small{display:block;color:var(--muted);font-size:12px;margin-top:4px}
.mut{color:var(--muted)}
h3{font-size:13px;color:var(--muted);margin:16px 0 8px;font-weight:700}
.al{background:#fff8e1;color:#1a1640;border-radius:12px;border-left:6px solid var(--ask);padding:10px 12px;margin-bottom:10px}
.al.urgent{border-left-color:var(--urgent)}
.al .t{font-weight:800;font-size:14px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.al .b{font-size:13px;margin-top:6px;white-space:pre-wrap;line-height:1.5}
.al .m{font-size:11px;color:#6b6890;margin-top:6px}
.al .act{display:flex;gap:8px;margin-top:10px}
.al .act a,.al .act button{flex:1;justify-content:center;text-decoration:none}
.al .act .ghost{background:#ece8ff;color:#1a1640}
.who-chip{background:var(--c);color:#fff;font-size:11px;padding:2px 7px;border-radius:6px}
.log{font-size:13px;padding:8px 0;border-bottom:1px dashed var(--line);display:flex;gap:8px;align-items:center}
.log time{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.empty{color:var(--muted);font-size:13px;padding:4px 0}

/* 비밀번호 */
#gate{position:fixed;inset:0;background:radial-gradient(#1b2160,#0b1030);display:grid;place-items:center;z-index:9;padding:24px}
#gate form{width:min(340px,100%);background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px}
.gate-title{font-size:22px;font-weight:800;margin-bottom:6px}
#gate p{color:var(--muted);font-size:14px}
#gate input{width:100%;font:inherit;font-size:16px;padding:12px;border-radius:10px;border:1px solid var(--line);margin:6px 0 12px;background:#fff;color:#1a1640}
.err{color:var(--urgent)!important;min-height:1em}
#toast{position:fixed;top:calc(env(safe-area-inset-top) + 58px);left:50%;transform:translateX(-50%);background:#14183f;color:var(--ink);
  padding:10px 14px;border-radius:10px;font-size:14px;z-index:10;max-width:90vw;text-align:center;border:1px solid var(--line)}