/*
 * atomic-arb 운영 콘솔 — iPad mini 7 세로(744 × 1133 CSS px) 기준.
 *
 * 단일 다크 테마다. 이 화면은 거치대에 세워 두고 흘깃 보는 계기판이고, 밝은
 * 테마로 전환할 상황이 운영상 없다. 그래서 media query 로 테마를 나누지 않고
 * 모든 색을 명시적으로 칠한다 — 호스트 배경이 무엇이든 화면이 그대로 선다.
 *
 * 색은 역할로만 쓴다: accent 는 "측정되고 있다", good/warn/crit 는 상태.
 * 계열색을 상태색으로 돌려쓰지 않는다.
 */
:root{
  --bg:#070B0F;
  --surface:#0D131A;
  --surface-2:#131C25;
  --inset:#0A1017;
  --line:#1E2A36;
  --line-soft:#16202B;
  --ink:#E8F0F7;
  --muted:#93A6B8;
  /* 4.71:1 — 작은 라벨도 읽히는 하한. 더 어두운 값은 구분선에만 쓴다. */
  --faint:#6E8296;
  --accent:#3FBFD4;
  --accent-dim:#17323C;
  --good:#3FCB7F;
  --good-dim:#0E2A1C;
  --warn:#E8A33D;
  --warn-dim:#2E2210;
  --crit:#FF5C68;
  --crit-dim:#2E1418;
  --radius:14px;
}

*{box-sizing:border-box;margin:0;padding:0}

html{-webkit-text-size-adjust:100%}

body{
  background:var(--bg);
  color:var(--ink);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  padding:0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}

/* ---------- 상단 판정 ---------- */
/* 세로 화면에서는 스크롤이 길어 판정이 시야에서 사라진다. 고정해 둔다. */
.topbar{
  position:sticky;top:0;z-index:20;
  background:rgba(7,11,15,.94);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 12px) 20px 12px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.verdict{display:flex;align-items:center;gap:12px;min-width:0;flex:1 1 380px}
.verdict .dot{
  width:12px;height:12px;border-radius:50%;flex:none;
  background:var(--faint);
}
.verdict-text{min-width:0}
.verdict-state{font-size:27px;font-weight:650;letter-spacing:-.02em;line-height:1.15}
.verdict-why{margin-top:3px;color:var(--muted);font-size:14px;overflow-wrap:anywhere}
.topbar-meta{font-size:12px;color:var(--faint);white-space:nowrap;margin-left:auto}

.verdict.ok .verdict-state{color:var(--good)}
.verdict.ok .dot{background:var(--good);box-shadow:0 0 0 5px var(--good-dim)}
.verdict.measuring .verdict-state{color:var(--accent)}
.verdict.measuring .dot{background:var(--accent);box-shadow:0 0 0 5px var(--accent-dim)}
.verdict.warn .verdict-state{color:var(--warn)}
.verdict.warn .dot{background:var(--warn);box-shadow:0 0 0 5px var(--warn-dim)}
.verdict.bad .verdict-state{color:var(--crit)}
.verdict.bad .dot{background:var(--crit);box-shadow:0 0 0 5px var(--crit-dim)}

/* ---------- 레이아웃 ---------- */
main{
  max-width:744px;margin:0 auto;
  padding:16px 20px 48px;
  display:flex;flex-direction:column;gap:14px;
}

.card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:16px 18px 18px;
}
.card h2{
  font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);margin-bottom:14px;
  display:flex;align-items:center;gap:8px;
}
.pill{
  font-size:11px;font-weight:600;letter-spacing:.04em;
  padding:2px 9px;border-radius:999px;
  border:1px solid var(--line);color:var(--muted);background:var(--surface-2);
  text-transform:none;
}
.pill.ok{border-color:var(--good);color:var(--good);background:var(--good-dim)}
.pill.measuring{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}
.pill.warn{border-color:var(--warn);color:var(--warn);background:var(--warn-dim)}
.pill.bad{border-color:var(--crit);color:var(--crit);background:var(--crit-dim)}

.note{margin-top:12px;font-size:13px;line-height:1.6;color:var(--faint);overflow-wrap:anywhere}

/* ---------- 지표 셀 ---------- */
/* 744px 안쪽 폭은 약 704px 이다. 기본 3열, 큰 숫자를 쓰는 자금 카드는 2열. */
.cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 12px}
.cells.wide{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.cell{display:flex;flex-direction:column;gap:4px;min-width:0}
.cell-label{font-size:12px;color:var(--faint)}
.cell-value{
  font:600 21px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.cell-sub{font-size:11.5px;color:var(--faint);font-family:ui-monospace,monospace}
.cell.ok .cell-value{color:var(--good)}
.cell.warn .cell-value{color:var(--warn)}
.cell.bad .cell-value{color:var(--crit)}
.cell.dim .cell-value{color:var(--faint)}

/* ---------- 관문 사다리 ---------- */
/* 24시간을 기다리는 동안 운영자가 실제로 보는 유일한 화면이라, 남은 양이
   숫자가 아니라 길이로 보여야 한다. */
.ladder{display:flex;flex-direction:column;gap:11px}
.rung{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:baseline}
.rung-name{font-size:14px;color:var(--ink)}
.rung-value{
  font:600 14px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;
}
.rung-track{
  grid-column:1 / -1;height:8px;border-radius:5px;background:var(--inset);
  overflow:hidden;border:1px solid var(--line-soft);
}
.rung-bar{display:block;height:100%;border-radius:4px;background:var(--accent);transition:width .6s ease}
.rung.done .rung-bar{background:var(--good)}
.rung.done .rung-value{color:var(--good)}
.rung.blocked .rung-bar{background:var(--crit)}
.rung.blocked .rung-value{color:var(--crit)}
.rung.unknown .rung-bar{background:var(--faint)}

/* ---------- 서킷 미터 ---------- */
.meters{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.meter-row{display:grid;grid-template-columns:1fr auto;gap:5px 12px;align-items:baseline}
.meter-name{font-size:13px;color:var(--muted)}
.meter-value{font:600 13px/1 ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--muted)}
.meter-track{grid-column:1 / -1;height:7px;border-radius:4px;background:var(--inset);overflow:hidden;border:1px solid var(--line-soft)}
.meter-bar{display:block;height:100%;border-radius:3px;background:var(--good);transition:width .5s ease}
.meter-row.warn .meter-bar{background:var(--warn)}
.meter-row.warn .meter-value{color:var(--warn)}
.meter-row.bad .meter-bar{background:var(--crit)}
.meter-row.bad .meter-value{color:var(--crit)}

/* ---------- 퍼널 ---------- */
.funnel{display:flex;flex-direction:column;gap:9px}
.stage{display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:12px}
.stage-name{font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.stage-track{height:10px;border-radius:5px;background:var(--inset);overflow:hidden;border:1px solid var(--line-soft)}
.stage-bar{display:block;height:100%;border-radius:4px;background:var(--accent);transition:width .6s ease}
.stage.zero .stage-bar{background:var(--line)}
.stage.unmeasured .stage-bar{background:transparent}
.stage-count{font:13px/1 ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap;text-align:right;min-width:92px}
.stage-count small{color:var(--faint)}

/* ---------- 관문 목록 ---------- */
.gates{display:flex;flex-direction:column;gap:8px}
.gate{
  display:grid;grid-template-columns:22px 1fr auto;gap:11px;align-items:start;
  padding:11px 12px;border-radius:10px;
  background:var(--surface-2);border:1px solid var(--line-soft);
}
.gate-mark{font:700 14px/1.4 ui-monospace,monospace;text-align:center}
.gate-q{font-size:13.5px;line-height:1.45;overflow-wrap:anywhere}
.gate-q small{display:block;margin-top:3px;color:var(--faint);font-size:11.5px;font-family:ui-monospace,monospace;overflow-wrap:anywhere}
.gate-st{font:11px/1.6 ui-monospace,monospace;padding:1px 8px;border-radius:999px;white-space:nowrap}
.gate.pass .gate-mark{color:var(--good)}
.gate.pass .gate-st{background:var(--good-dim);color:var(--good)}
.gate.fail .gate-mark{color:var(--crit)}
.gate.fail .gate-st{background:var(--crit-dim);color:var(--crit)}
.gate.pending .gate-mark{color:var(--accent)}
.gate.pending .gate-st{background:var(--accent-dim);color:var(--accent)}
.gate.conditional .gate-mark{color:var(--warn)}
.gate.conditional .gate-st{background:var(--warn-dim);color:var(--warn)}

/* ---------- 표 ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.rows{width:100%;border-collapse:collapse}
.rows td{padding:9px 10px 9px 0;font-size:13px;border-top:1px solid var(--line-soft);white-space:nowrap}
.rows tr:first-child td{border-top:0}
.rows td.num{text-align:right;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums}
.rows td.ok{color:var(--good)}
.rows td.bad{color:var(--crit)}
.rows td.dim{color:var(--faint)}
.rows .empty{color:var(--faint);font-size:13px}

/* ---------- 제어 ---------- */
/* 터치 목표는 Apple HIG 44pt 이상. 세로로 잡고 엄지로 누르는 위치라 넉넉히 준다. */
.buttons{display:flex;gap:10px;flex-wrap:wrap}
/* flex-grow 는 .buttons 의 가로 행에서만 의미가 있다. 이것을 모든 button 에
   걸면 세로 flex 컨테이너(로그인 카드) 안에서 버튼이 세로로 늘어나, 접속
   버튼 하나가 카드 절반을 먹는다. 실제로 iPad 에서 그렇게 나왔다. */
.buttons > button{flex:1 1 150px}
button{
  flex:none;min-height:52px;
  border-radius:12px;border:1px solid var(--line);
  background:var(--surface-2);color:var(--ink);
  font-size:16px;font-weight:600;
  font-family:inherit;
  cursor:pointer;touch-action:manipulation;
}
button:active{opacity:.72}
button:disabled{opacity:.38;cursor:not-allowed}
button.ghost{color:var(--muted);font-weight:500}
button.danger{border-color:var(--crit);color:var(--crit);background:var(--crit-dim)}
button.ready{border-color:var(--good);color:var(--good);background:var(--good-dim)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.control-result{margin-top:12px;font-size:13px;color:var(--muted);overflow-wrap:anywhere;min-height:18px}

footer{text-align:center;font-size:12px;color:var(--faint);padding-top:6px}

/* ---------- 확인 시트 ---------- */
.scrim{
  position:fixed;inset:0;z-index:60;
  background:rgba(3,6,9,.72);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.scrim[hidden]{display:none}
.sheet{
  width:100%;max-width:440px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:22px 22px 20px;
}
.sheet h3{font-size:19px;margin-bottom:6px}
.sheet p{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:14px}
.sheet-ack{font-size:13px;color:var(--accent);margin-bottom:8px}
.sheet input{
  width:100%;min-height:52px;
  font:15px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;
  padding:0 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--inset);color:var(--ink);
  margin-bottom:10px;
}
.sheet input:focus{border-color:var(--accent);outline:none}
.sheet-error{font-size:13px;color:var(--crit);min-height:18px;margin-bottom:10px}

/* ---------- 로그인 ---------- */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{
  width:100%;max-width:400px;
  background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:26px 24px 22px;display:flex;flex-direction:column;gap:12px;
}
.login-card .eyebrow{font:11px/1 ui-monospace,monospace;letter-spacing:.14em;color:var(--accent)}
.login-card h2{font-size:22px;margin-bottom:6px}
.login-card input{
  width:100%;min-height:52px;font-size:16px;
  padding:0 14px;border-radius:12px;
  border:1px solid var(--line);background:var(--inset);color:var(--ink);
  font-family:inherit;
}
.login-card input:focus{border-color:var(--accent);outline:none}
.login-error{font-size:13px;color:var(--crit);min-height:18px}
.login-note{font-size:12px;color:var(--faint);line-height:1.6}

/* ---------- 치명적 오류 ---------- */
.fatal-bar{
  position:sticky;top:0;z-index:80;
  background:var(--crit);color:#180406;
  font:600 13px/1.4 ui-monospace,monospace;
  padding:10px 16px;overflow-wrap:anywhere;
}

@media (prefers-reduced-motion: reduce){
  .rung-bar,.meter-bar,.stage-bar{transition:none}
}

/* 가로로 돌리거나 데스크톱에서 열어도 읽히도록 폭만 넓힌다. */
@media (min-width:1000px){
  main{max-width:960px}
  .cells.wide{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
}