/* 초파리 직원 — 화면
   원칙: 여백을 넉넉히, 색은 하나만, 글자 위계는 적게.
   주인공은 게임 화면과 뇌다. 조작부는 뒤로 물러난다. */
:root{
  --bg:#000;
  --surface:#141416;
  --surface2:#1c1c1f;
  --line:rgba(255,255,255,.09);
  --line2:rgba(255,255,255,.16);
  --fg:#f5f5f7;
  --fg2:#a1a1a6;
  --fg3:#6e6e73;
  --accent:#30d158;
  --blue:#0a84ff;
  --red:#ff453a;
  --orange:#ff9f0a;
  --r:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg)}
body{
  color:var(--fg);
  font:400 15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Apple SD Gothic Neo","Pretendard",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.011em;
}
.mono{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-feature-settings:"tnum"}
a{color:var(--blue);text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.022em;font-weight:600}

/* ── 상단 ─────────────────────────────── */
header{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:18px 28px;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:40;
  background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(20px);
}
header h1{font-size:19px}
header .sub{font-size:13.5px;color:var(--fg3)}
.sp{flex:1}
.meta{font-size:12.5px;color:var(--fg3)}
.meta b{color:var(--fg2);font-weight:500}

/* ── 레이아웃 ─────────────────────────── */
.page{max-width:1420px;margin:0 auto;padding:26px 28px 80px}
.hero{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:start}
@media(max-width:1080px){.hero{grid-template-columns:1fr}}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.panel .hd{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line)}
.panel .hd h2{font-size:14.5px}
.panel .hd .tag{font-size:12.5px;color:var(--fg3)}
.panel .bd{padding:18px}

/* ── 화면 ─────────────────────────────── */
.stage{position:relative;aspect-ratio:4/3;background:#000;overflow:hidden}
.stage canvas,.stage iframe{position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:contain;image-rendering:pixelated;opacity:0;transition:opacity .22s ease;pointer-events:none}
.stage canvas.showing,.stage iframe.showing{opacity:1;pointer-events:auto}
/* 남의 게임은 우리 페이지 출처를 물려받은 blob: 문서다. 테두리를 지운다. */
.stage iframe{border:0;background:#000}
.stage .hud{position:absolute;left:14px;top:14px;display:flex;gap:7px;flex-wrap:wrap;z-index:2}
.chip{background:rgba(0,0,0,.55);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);
  border-radius:999px;padding:4px 11px;font-size:12px;color:var(--fg2)}
.chip b{color:var(--fg);font-weight:500}

.brainwrap{position:relative;aspect-ratio:1/1;background:#000}
.brainwrap canvas{position:absolute;inset:0;width:100%;height:100%;opacity:1}
.legend{position:absolute;left:14px;bottom:12px;display:flex;gap:12px;flex-wrap:wrap;font-size:11.5px;color:var(--fg3);z-index:2}
.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* ── 버튼 ─────────────────────────────── */
.seg{display:inline-flex;background:var(--surface2);border:1px solid var(--line);border-radius:11px;padding:3px;gap:3px}
.seg button{background:none;border:0;color:var(--fg2);font:inherit;font-size:13.5px;
  padding:7px 14px;border-radius:8px;cursor:pointer;transition:.16s;white-space:nowrap}
.seg button:hover{color:var(--fg)}
.seg button.on{background:var(--surface);color:var(--fg);box-shadow:0 1px 3px rgba(0,0,0,.4)}
button.plain{background:var(--surface2);border:1px solid var(--line);color:var(--fg);
  font:inherit;font-size:13.5px;padding:8px 14px;border-radius:10px;cursor:pointer;transition:.16s}
button.plain:hover{background:#26262a;border-color:var(--line2)}
button.plain:disabled{opacity:.4;cursor:default}
button.cta{background:var(--fg);color:#000;border:0;font-weight:600}
button.cta:hover{background:#fff}
button.danger{color:var(--red)}

/* ── 계기 ─────────────────────────────── */
.gauges{display:grid;gap:11px;margin-top:16px}
.g{display:grid;grid-template-columns:62px 1fr 56px;align-items:center;gap:12px}
.g .k{font-size:12.5px;color:var(--fg3)}
.g .t{height:4px;background:rgba(255,255,255,.08);border-radius:99px;position:relative;overflow:hidden}
.g .t i{position:absolute;top:0;bottom:0;background:var(--fg2);border-radius:99px;transition:.12s}
.g .v{font-size:12.5px;text-align:right;color:var(--fg2)}

.eyes{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.eyes .k{font-size:11.5px;color:var(--fg3);margin-bottom:6px}
.eyes canvas{width:100%;aspect-ratio:2/3;border-radius:8px;border:1px solid var(--line);
  background:#000;image-rendering:pixelated;display:block}

/* ── 숫자 ─────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line)}
.stat{background:var(--surface);padding:14px 16px}
.stat .k{font-size:11.5px;color:var(--fg3)}
.stat .v{font-size:21px;font-weight:600;letter-spacing:-.02em;margin-top:3px}

/* ── 사원 ─────────────────────────────── */
.emp{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface2);cursor:pointer;margin-bottom:8px;transition:.16s}
.emp:hover{border-color:var(--line2)}
.emp.sel{border-color:var(--fg2);background:#202024}
.emp .av{width:32px;height:32px;border-radius:50%;background:#2c2c30;display:grid;place-items:center;font-size:15px;flex:none}
.emp .nm{font-weight:600;font-size:14px}
.emp .st{font-size:12px;color:var(--fg3);margin-top:1px}
.emp .kv{margin-left:auto;text-align:right;font-size:12px;color:var(--fg3)}
.emp .kv b{color:var(--fg);font-weight:600;font-size:14px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--fg3);display:inline-block;margin-right:5px}
.dot.ok{background:var(--accent)}
.dot.busy{background:var(--orange);animation:p 1.2s infinite}
.dot.err{background:var(--red)}
@keyframes p{0%,100%{opacity:1}50%{opacity:.3}}

/* ── 버그 ─────────────────────────────── */
/* 발견 목록은 계속 쌓인다. 높이를 묶지 않으면 오른쪽 칸이 아래로 밀려
   비교표와 재현 패널이 화면 밖으로 나간다. */
#bugs{max-height:620px;overflow-y:auto}
#bugs::-webkit-scrollbar{width:8px}
#bugs::-webkit-scrollbar-thumb{background:#2c2c30;border-radius:99px}
.bug{padding:13px 16px;border-bottom:1px solid var(--line)}
.bug:last-child{border-bottom:0}
.bug .t{display:flex;align-items:baseline;gap:9px}
.bug .lb{font-weight:600;font-size:14px}
.bug .sev{font-size:11px;padding:2px 7px;border-radius:5px;background:rgba(255,159,10,.14);color:var(--orange)}
.bug .sev.critical,.bug .sev.high{background:rgba(255,69,58,.14);color:var(--red)}
.bug .mt{margin-left:auto;font-size:11.5px;color:var(--fg3)}
.bug .de{font-size:13px;color:var(--fg2);margin-top:5px;line-height:1.45}
.bug .ac{display:flex;gap:7px;margin-top:9px}
.bug .ac button{font-size:12px;padding:5px 11px}

/* ── 글 ───────────────────────────────── */
.note{font-size:13px;color:var(--fg2);line-height:1.62}
.note b{color:var(--fg);font-weight:600}
.muted{font-size:12.5px;color:var(--fg3);line-height:1.6}
details{border-top:1px solid var(--line);padding-top:12px;margin-top:14px}
details summary{cursor:pointer;font-size:13px;color:var(--fg2);list-style:none}
details summary::-webkit-details-marker{display:none}
details summary::before{content:"＋ ";color:var(--fg3)}
details[open] summary::before{content:"－ "}
details .note{margin-top:10px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;align-items:start}
@media(max-width:860px){.grid2{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}}

footer{color:var(--fg3);font-size:12.5px;text-align:center;padding:30px;border-top:1px solid var(--line);margin-top:40px}

/* ── 아무 게임이나 붙이기 ─────────────────────── */
.drop{border:1px dashed #33333a;border-radius:12px;padding:16px;text-align:center;
  color:var(--fg3);font-size:13px;transition:border-color .15s,background .15s;cursor:pointer}
.drop:hover,.drop.over{border-color:var(--accent);background:#30d1580d;color:var(--fg2)}
.byorow{display:flex;gap:7px;margin-top:9px}
.byorow input{flex:1;min-width:0;background:#0e0e10;border:1px solid var(--line);border-radius:9px;
  padding:8px 11px;color:var(--fg);font:13px ui-monospace,Menlo,monospace;outline:none}
.byorow input:focus{border-color:#3a3a42}