/* 아티팩트 시안에서 그대로 옮긴 스타일. 팔레트·글꼴은 현황판과 형제다. */
:root {
    --paper: #F4F5F2; --surface: #FFFFFF; --sunken: #ECEEEA; --raised: #FBFBFA;
    --ink: #191D1A; --muted: #5D655F; --faint: #8B938C; --rule: #D8DCD6;
    --accent: #1F4E46; --accent-soft: #E3EDEA;
    --ok: #2E7042; --ok-bg: #E7F1E9;
    --warn: #8A6212; --warn-bg: #FAF2E1;
    --crit: #963226; --crit-bg: #FAECE9;
    --na: #8B938C; --na-bg: #EFF0EE;
    --display: "Noto Serif KR", Georgia, serif;
    --body: "IBM Plex Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
    --data: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --paper: #101312; --surface: #181C19; --sunken: #1E2320; --raised: #1B201C;
      --ink: #E7EAE5; --muted: #99A29A; --faint: #6E776F; --rule: #2A312B;
      --accent: #6FAE9E; --accent-soft: #1C2A26;
      --ok: #66B47D; --ok-bg: #15251A;
      --warn: #C89B47; --warn-bg: #231D11;
      --crit: #DB7F70; --crit-bg: #261715;
      --na: #6E776F; --na-bg: #1C201D;
    }
  }
  :root[data-theme="dark"] {
    --paper: #101312; --surface: #181C19; --sunken: #1E2320; --raised: #1B201C;
    --ink: #E7EAE5; --muted: #99A29A; --faint: #6E776F; --rule: #2A312B;
    --accent: #6FAE9E; --accent-soft: #1C2A26;
    --ok: #66B47D; --ok-bg: #15251A;
    --warn: #C89B47; --warn-bg: #231D11;
    --crit: #DB7F70; --crit-bg: #261715;
    --na: #6E776F; --na-bg: #1C201D;
  }

  * { box-sizing: border-box; }
  body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); font-size: .92rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
  a { color: var(--accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* ── 껍데기 ── */
  .app { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
  @media (min-width: 940px) { .app { grid-template-columns: 232px 1fr; } }

  aside { background: var(--surface); border-right: 1px solid var(--rule); padding: 1.4rem 1.1rem; display: flex; flex-direction: column; gap: 1.5rem; }
  @media (min-width: 940px) { aside { position: sticky; top: 0; height: 100vh; overflow-y: auto; } }
  .logo { font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; letter-spacing: -.01em; }
  .logo small { display: block; font-family: var(--data); font-size: .66rem; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-top: .2rem; }
  nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
  nav button { width: 100%; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: none; border: 0; border-radius: 3px; padding: .45rem .6rem; font: inherit; font-size: .86rem; color: var(--muted); cursor: pointer; }
  nav button:hover { background: var(--sunken); color: var(--ink); }
  nav button[aria-current="true"] { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
  nav .badge { font-family: var(--data); font-size: .68rem; color: var(--faint); font-variant-numeric: tabular-nums; }
  nav button[aria-current="true"] .badge { color: var(--accent); }
  nav .group { font-family: var(--data); font-size: .64rem; letter-spacing: .13em; text-transform: uppercase; color: var(--faint); padding: .8rem .6rem .3rem; }
  .env { margin-top: auto; font-family: var(--data); font-size: .68rem; color: var(--faint); line-height: 1.7; border-top: 1px solid var(--rule); padding-top: .9rem; }

  main { padding: clamp(1.2rem, 3vw, 2.4rem); max-width: 1200px; }
  .head { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: baseline; justify-content: space-between; border-bottom: 2px solid var(--ink); padding-bottom: .8rem; margin-bottom: 1.6rem; }
  h1 { font-family: var(--display); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); margin: 0; letter-spacing: -.012em; }
  .head p { margin: 0; color: var(--muted); font-size: .84rem; max-width: 62ch; }
  h2 { font-family: var(--display); font-weight: 600; font-size: 1.18rem; margin: 2.2rem 0 .7rem; }
  h3 { font-size: .95rem; font-weight: 600; margin: 1.4rem 0 .5rem; }
  p { margin: 0 0 .8rem; max-width: 72ch; }

  /* ── 지표 ── */
  .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  .stat { background: var(--surface); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
  .stat .n { font-family: var(--data); font-size: 1.5rem; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1.15; }
  .stat .k { font-size: .76rem; color: var(--muted); }
  .stat .s { font-size: .7rem; color: var(--faint); font-family: var(--data); }
  .stat.warn .n { color: var(--warn); } .stat.crit .n { color: var(--crit); } .stat.ok .n { color: var(--ok); }

  /* ── 표 ── */
  .tw { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); }
  table { border-collapse: collapse; width: 100%; font-size: .8rem; }
  th, td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid var(--rule); white-space: nowrap; }
  th { font-family: var(--data); font-size: .68rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); font-weight: 500; background: var(--sunken); }
  tbody tr:last-child td { border-bottom: none; }
  tbody tr.clickable { cursor: pointer; }
  tbody tr.clickable:hover { background: var(--raised); }
  td.m, th.m { font-family: var(--data); }
  td.n { font-family: var(--data); text-align: right; font-variant-numeric: tabular-nums; }
  td.trunc { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; }
  tr.dim { color: var(--faint); }

  .pill { display: inline-block; font-family: var(--data); font-size: .66rem; letter-spacing: .05em; text-transform: uppercase; padding: .08rem .42rem; border: 1px solid currentColor; border-radius: 2px; white-space: nowrap; }
  .pill.controller, .pill.pass { color: var(--ok); }
  .pill.processor, .pill.warn { color: var(--warn); }
  .pill.fail { color: var(--crit); }
  .pill.na, .pill.test { color: var(--na); }
  .pill.acc { color: var(--accent); }

  .card { background: var(--surface); border: 1px solid var(--rule); padding: 1rem 1.15rem; }
  .card.worm { border-left: 4px solid var(--accent); }
  .card.mut { border-left: 4px dashed var(--faint); }
  .grid2 { display: grid; grid-template-columns: 1fr; gap: 1rem; }
  @media (min-width: 800px) { .grid2 { grid-template-columns: 1fr 1fr; } }

  dl.kv { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: .3rem .9rem; font-size: .82rem; }
  dl.kv dt { color: var(--muted); }
  dl.kv dd { margin: 0; font-family: var(--data); }

  /* ── 점검 ── */
  .checks { border: 1px solid var(--rule); background: var(--surface); }
  .chk { display: grid; grid-template-columns: 4px auto 1fr auto; gap: 0 .8rem; align-items: baseline; padding: .6rem .9rem .6rem 0; border-bottom: 1px solid var(--rule); }
  .chk:last-child { border-bottom: none; }
  .chk .bar { grid-row: span 2; align-self: stretch; }
  .chk.pass .bar { background: var(--ok); } .chk.warn .bar { background: var(--warn); }
  .chk.fail .bar { background: var(--crit); } .chk.na .bar { background: var(--na); }
  .chk .code { font-family: var(--data); font-size: .68rem; color: var(--faint); letter-spacing: .04em; }
  .chk .label { font-size: .85rem; font-weight: 500; }
  .chk .verdict { font-family: var(--data); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; }
  .chk.pass .verdict { color: var(--ok); } .chk.warn .verdict { color: var(--warn); }
  .chk.fail .verdict { color: var(--crit); } .chk.na .verdict { color: var(--na); }
  .chk .why { grid-column: 3 / -1; font-size: .76rem; color: var(--muted); margin-top: .15rem; max-width: 78ch; }
  .chk .why b { color: var(--ink); font-weight: 500; }

  .dimhead { display: flex; align-items: baseline; gap: .7rem; margin: 1.8rem 0 .6rem; }
  .dimhead h3 { margin: 0; }
  .tally { font-family: var(--data); font-size: .72rem; color: var(--muted); }
  .tally b { font-weight: 500; }
  .tally .p { color: var(--ok); } .tally .w { color: var(--warn); } .tally .f { color: var(--crit); }

  /* ── 문구 원문 ── */
  .textbody { font-family: var(--body); font-size: .86rem; line-height: 1.75; white-space: pre-wrap; background: var(--sunken); border: 1px solid var(--rule); border-left: 3px solid var(--accent); padding: .9rem 1.1rem; margin: .6rem 0 0; overflow-wrap: anywhere; }
  .hashline { font-family: var(--data); font-size: .7rem; color: var(--faint); margin-top: .4rem; overflow-wrap: anywhere; }

  /* ── 원장 ── */
  .ledger { border: 1px solid var(--rule); background: var(--surface); max-height: 640px; overflow-y: auto; }
  .entry { display: grid; grid-template-columns: auto 1fr; gap: .05rem .9rem; padding: .55rem .85rem; border-bottom: 1px solid var(--rule); }
  .entry:last-child { border-bottom: none; }
  .entry time { font-family: var(--data); font-size: .68rem; color: var(--faint); grid-row: span 2; font-variant-numeric: tabular-nums; padding-top: .1rem; }
  .entry .act { font-family: var(--data); font-size: .76rem; font-weight: 500; }
  .entry .meta { font-size: .7rem; color: var(--muted); overflow-wrap: anywhere; }
  .entry .meta b { color: var(--ink); font-weight: 500; }
  .entry.rejected .act { color: var(--crit); }

  .box { border: 1px solid var(--rule); border-left: 4px solid var(--accent); background: var(--surface); padding: .9rem 1.1rem; margin: 0 0 1.2rem; }
  .box.warn { border-left-color: var(--warn); background: var(--warn-bg); }
  .box.crit { border-left-color: var(--crit); background: var(--crit-bg); }
  .box .tag { font-family: var(--data); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; display: block; margin-bottom: .3rem; color: var(--accent); }
  .box.warn .tag { color: var(--warn); } .box.crit .tag { color: var(--crit); }
  .box p:last-child { margin-bottom: 0; }
  code { font-family: var(--data); font-size: .88em; background: var(--sunken); padding: .06em .35em; border-radius: 2px; }

  .back { background: none; border: 0; font: inherit; font-size: .8rem; color: var(--muted); cursor: pointer; padding: 0 0 .6rem; }
  .back:hover { color: var(--accent); }

  /* ── 신청 접수 (미구현 화면) ── */
  .lane { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
  @media (min-width: 780px) { .lane { grid-template-columns: repeat(4, 1fr); } }
  .lane > div { background: var(--surface); padding: .8rem .9rem; display: flex; flex-direction: column; gap: .45rem; min-height: 130px; }
  .lane h4 { margin: 0; font-size: .78rem; font-family: var(--data); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 500; display: flex; justify-content: space-between; }
  .req { border: 1px solid var(--rule); border-left: 3px solid var(--accent); padding: .45rem .6rem; font-size: .76rem; background: var(--raised); }
  .req b { font-family: var(--data); font-weight: 500; display: block; }
  .req span { color: var(--muted); }
  .ghost { border: 1px dashed var(--rule); padding: .45rem .6rem; font-size: .74rem; color: var(--faint); text-align: center; }

/* ── 콘솔에서 새로 필요한 것 ── */
.loading { color: var(--faint); font-family: var(--data); font-size: .82rem; }
.btn {
  font: inherit; font-size: .82rem; font-family: var(--body);
  background: var(--surface); color: var(--accent);
  border: 1px solid var(--accent); border-radius: 3px;
  padding: .35rem .8rem; cursor: pointer;
}
.btn:hover { background: var(--accent-soft); }
.sel {
  font: inherit; font-size: .82rem; font-family: var(--data);
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 3px; padding: .25rem .5rem;
}

.btn.sm { padding: .2rem .55rem; font-size: .74rem; }
.btn.danger { color: var(--crit); border-color: var(--crit); }
.btn.danger:hover { background: var(--crit-bg); }
.btn:disabled { opacity: .5; cursor: default; }
.req .acts { display: flex; gap: .4rem; margin-top: .35rem; }
.req .note { color: var(--muted); font-size: .72rem; }

/* 오류 밑에 붙는 조치 안내. 오류 문장(무슨 일이 났나)과 조치(무엇을 하나)를
   시각적으로 갈라 놓는다 — 장애 때 읽는 순서가 그 순서다. */
.hint {
  margin-top: .5rem; padding-top: .5rem;
  border-top: 1px dashed var(--rule);
  color: var(--muted); font-size: .78rem; line-height: 1.55;
}

/* **`hidden` 속성이 이기게 한다.**
   브라우저 기본 스타일시트의 `[hidden] { display: none }` 은 **작성자 규칙에
   진다.** `.grid2 { display: grid }` 같은 규칙 하나가 `el.hidden = true` 를
   조용히 무력화한다 — 2026-09-10 에 `legal_role: controller` 인데 Controller
   창구 입력이 계속 보였던 원인이다. 스크린샷을 받고서야 알았다.
   `display` 를 건드리는 규칙이 늘어도 안전하도록 여기서 한 번 못박는다. */
[hidden] { display: none !important; }

/* ── 연동 신청 폼 ──
   접기 상태로 둔다. 이 화면의 주 용도는 신청을 **보는** 것이고, 제출은
   제품 팀이 한 번 하는 일이다. 신청이 하나도 없을 때만 펼쳐 둔다 — 처음 온
   사람이 「어디서 신청하나」를 찾지 않아도 되게. */
.apply { border: 1px solid var(--rule); border-radius: 4px; background: var(--surface); padding: .5rem .9rem; margin-bottom: 1.2rem; }
.apply > summary { cursor: pointer; font-weight: 600; padding: .35rem 0; color: var(--accent); }
.apply > summary::marker { color: var(--faint); }
.apply .box { margin: .7rem 0; }

.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .8rem 1rem; margin: .8rem 0; }
.apply label { display: flex; flex-direction: column; gap: .25rem; font-size: .8rem; color: var(--muted); }
.apply label.wide { margin: .8rem 0; }
.apply input, .apply select, .apply textarea {
  font: inherit; font-size: .86rem; font-family: var(--data);
  background: var(--raised); color: var(--ink);
  border: 1px solid var(--rule); border-radius: 3px; padding: .4rem .55rem;
  width: 100%; box-sizing: border-box;
}
.apply textarea { font-family: var(--body); resize: vertical; }
.apply small { color: var(--faint); font-size: .72rem; line-height: 1.5; }
.apply .acts { display: flex; gap: .5rem; margin-top: .9rem; }

/* 수령한 토큰. 줄바꿈되게 두고 폭을 채운다 — 옮겨 적을 값이라 잘리면 안 된다. */
code.tok {
  display: block; font-family: var(--data); font-size: .8rem;
  background: var(--sunken); border: 1px solid var(--rule); border-radius: 3px;
  padding: .3rem .45rem; word-break: break-all; user-select: all;
}


/* 미리보기 — HTML 문구는 sandbox iframe 안에서 그린다 (#90).
   출처가 분리돼 스크립트가 돌지 않고 콘솔 스타일도 섞이지 않는다. */
.preview {
  width: 100%;
  height: 26rem;
  border: 1px solid var(--rule);
  border-radius: .4rem;
  background: #fff;
}