/* 초파리 직원 — 화면
   원칙: 여백을 넉넉히, 색은 하나만, 글자 위계는 적게.
   주인공은 게임 화면과 뇌다. 조작부는 뒤로 물러난다. */
: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:14px;flex-wrap:wrap;
  padding:16px 40px;border-bottom:1px solid var(--line);
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(0,0,0,.6);backdrop-filter:saturate(180%) blur(24px);
}
header h1{font-size:15px;letter-spacing:-.02em}
header .sub{font-size:13px;color:var(--fg3)}
header .meta{font-family:"SF Mono",ui-monospace,Menlo,monospace;font-size:11.5px}

/* ── 히어로 ─────────────────────────────── */
.hero{min-height:86vh;display:flex;flex-direction:column;justify-content:center;
  padding:130px 40px 70px;max-width:1240px;margin:0 auto}
.hero h2{font-size:clamp(38px,6.6vw,96px);letter-spacing:-.045em;line-height:1.04;font-weight:600;margin:0}
.hero h2 em{font-style:normal;color:var(--fg3)}
.hero .lead{margin-top:30px;max-width:54ch;font-size:clamp(15.5px,1.45vw,19px);line-height:1.64;color:var(--fg2)}
.hero .lead b{color:var(--fg);font-weight:500}
.hero .scroll{margin-top:52px;font-size:12px;color:var(--fg3);letter-spacing:.14em;text-transform:uppercase}

/* ── 제원표 ─────────────────────────────── */
.spec{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:40px}
.spec div{background:#000;padding:30px 36px;display:flex;flex-direction:column;justify-content:flex-start}
.spec .n{font-size:clamp(24px,2.7vw,38px);font-weight:600;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.spec .n small{font-size:.45em;color:var(--fg3);font-weight:400;letter-spacing:-.01em;white-space:nowrap}
.spec .l{margin-top:11px;font-size:12.5px;color:var(--fg3);line-height:1.45;max-width:24ch}
@media(max-width:900px){.spec{grid-template-columns:repeat(2,1fr)}.spec div{padding:24px 20px}}
@media(max-width:700px){.hero{padding:104px 20px 56px;min-height:auto}}
.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:0 28px 80px}
.workbench{display:grid;grid-template-columns:1.55fr 1fr;gap:20px;align-items:start}
@media(max-width:1080px){.workbench{grid-template-columns:1fr}}

.panel{background:#0b0b0d;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.panel .hd{display:flex;align-items:baseline;gap:12px;padding:20px 24px 16px;flex-wrap:wrap}
.panel .hd h2{flex:none;white-space:nowrap;font-size:19px;font-weight:600;letter-spacing:-.03em}
.panel .hd .tag{font-size:12px;color:var(--fg3);font-family:"SF Mono",ui-monospace,Menlo,monospace}
.panel .bd{padding:0 24px 24px}

/* 구역 제목 — 히어로와 같은 위계 */
.secttl{max-width:1420px;margin:70px auto 0;padding:0 28px}
.secttl .eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);margin-bottom:16px}
.secttl h3{font-size:clamp(26px,3.2vw,40px);letter-spacing:-.04em;max-width:22ch;font-weight:600;margin:0}
.secttl p{margin:18px 0 0;max-width:56ch;font-size:16px;line-height:1.66;color:var(--fg2)}
.secttl p b{color:var(--fg);font-weight:500}

/* ── 화면 ─────────────────────────────── */
.stage{position:relative;aspect-ratio:4/3;background:#000;overflow:hidden;border-radius:14px;border:1px solid var(--line)}
.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:86px 1fr 62px;align-items:center;gap:14px}
.g .k{font-size:11.5px;color:var(--fg3);text-transform:uppercase;letter-spacing:.1em}
.g .t{height:3px;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:14px;text-align:right;color:var(--fg);font-family:"SF Mono",ui-monospace,Menlo,monospace}

.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:#0b0b0d;padding:20px 22px}
.stat .k{font-size:11.5px;color:var(--fg3)}
.stat .v{font-size:26px;font-weight:600;letter-spacing:-.04em;margin-top:5px}

/* ── 사원 ─────────────────────────────── */
.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}

/* ── 좁은 화면 ───────────────────────────────
   심사도 링크로 받는다. 폰에서 먼저 열릴 수 있다.
   기본 레이아웃은 상단 머리말이 세 줄로 늘어나 화면의 4분의 1을 고정으로
   먹고, 근무지 버튼 줄이 패널 밖으로 잘렸다. 둘 다 여기서 잡는다. */
@media(max-width:700px){
  header{padding:12px 16px;gap:10px}
  header h1{font-size:17px}
  header .sub{font-size:12.5px;line-height:1.35}
  header .meta{display:none}          /* 같은 숫자가 본문에 다시 나온다 */
  .page{padding:16px 16px 60px}
  .panel .hd{padding:12px 14px;gap:8px}
  .panel .bd{padding:14px}
  .seg{border-radius:10px}
  .seg button{padding:6px 10px;font-size:12.5px}
  button.plain{padding:7px 11px;font-size:12.5px}
  .legend{gap:8px 10px;font-size:10.5px;left:10px;bottom:9px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .g{grid-template-columns:78px 1fr 50px;gap:9px}
  .g .k{font-size:11.5px}
  .stage .hud{left:9px;top:9px;gap:5px}
  .chip{padding:3px 8px;font-size:11px}
  #bugs{max-height:none}              /* 폰에서는 칸 안에 칸을 만들지 않는다 */
}

/* ── 스크롤 진입 ─────────────────────────
   한 번, 짧게, 위로만. 과하면 싸구려가 된다. */
.rise{opacity:0;transform:translateY(16px);
  transition:opacity .65s cubic-bezier(.2,.8,.2,1),transform .65s cubic-bezier(.2,.8,.2,1)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}