/*
 * 호스팅 인증 화면 스타일.
 *
 * 색은 전부 design-system 토큰에서 온다. 여기서 색을 새로 정의하지 않는다 —
 * 관리 콘솔(SPA)과 이 화면의 색이 갈라지면 같은 제품으로 보이지 않는다.
 *
 * 다크 모드는 토큰 쪽에서 처리된다. 이 파일은 구조만 담당한다.
 */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg-canvas);
  color: var(--text-primary);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
}

.muted { color: var(--text-tertiary); }

/*
 * 로고는 테마마다 다른 파일을 쓴다.
 * 시스템 설정(prefers-color-scheme)과 화면에서 고른 값(data-theme) 둘 다 따라야 한다.
 * 한쪽만 처리하면 토글했을 때 로고만 이전 테마로 남는다.
 */
.logo--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .logo--light { display: none; }
  :root:not([data-theme="light"]) .logo--dark { display: block; }
}
:root[data-theme="dark"] .logo--light { display: none; }
:root[data-theme="dark"] .logo--dark { display: block; }
.small { font-size: 12px; }

/* ------------------------------------------------------------ 단독 인증 화면 */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--spacing-xl);
}
.auth__card {
  width: 100%;
  max-width: 420px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  box-shadow: var(--elevation-md);
  padding: var(--spacing-3xl);
}
.auth__logo { width: 132px; height: auto; margin-bottom: var(--spacing-xl); }
.auth__title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-xs);
}
.auth__lede {
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-xl);
}

/* -------------------------------------------------------------------- 폼 */
.form, .stack { display: flex; flex-direction: column; gap: var(--spacing-lg); }
/* 폼 안의 버튼은 내용만큼만 넓힌다. 가로로 늘어난 버튼은 오조작을 부른다. */
.stack > .btn { align-self: flex-start; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 13px; font-weight: 500; }
.field__optional { color: var(--text-tertiary); font-weight: 400; font-size: 12px; }
.field__input {
  font: inherit;
  color: var(--text-primary);
  background: var(--bg-canvas);
  /* 입력창 경계는 WCAG 1.4.11 대상이라 장식용 선보다 진해야 한다 */
  border: 1px solid var(--border-control);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  width: 100%;
}
.field__input:focus-visible {
  outline: 2px solid var(--border-focus, var(--bg-brand));
  outline-offset: 1px;
  border-color: transparent;
}
.field__input--area { resize: vertical; font-family: inherit; }
.field__hint { font-size: 12px; color: var(--text-tertiary); margin: 0; }
.field__check { font-size: 12px; margin: 0; }
.field__check--ok { color: var(--status-success-fg); }
.field__check--bad { color: var(--status-danger-fg); }

/* ------------------------------------------------------------------ 버튼 */
.btn {
  font: inherit;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  padding: 9px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--block { width: 100%; }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn--primary { background: var(--bg-brand); color: var(--text-on-brand); }
.btn--primary:hover { filter: brightness(1.06); }
.btn--ghost {
  background: var(--bg-surface);
  border-color: var(--border-control);
  color: var(--text-secondary);
}
.btn--danger {
  background: var(--status-danger-bg);
  color: var(--status-danger-fg);
  border-color: var(--status-danger-border);
}

/* ------------------------------------------------------------------ 알림 */
.alert {
  border: 1px solid var(--border-default);
  border-left-width: 3px;
  border-radius: var(--radius-lg);
  padding: var(--spacing-base) var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  background: var(--bg-surface);
}
.alert--error { border-left-color: var(--status-danger-border); }
.alert--ok { border-left-color: var(--status-success-border); }
/* 경고. 성공(초록)·실패(빨강)와 구분되는 세 번째 상태다 —
 * "저장은 됐지만 값이 바뀌었다". 다른 알림과 같은 구조를 쓴다. */
.alert--warn { border-left-color: var(--status-warning-border); }
.alert__head { display: flex; gap: var(--spacing-sm); align-items: baseline; }
.alert__code {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--status-danger-fg);
  background: var(--status-danger-bg);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  white-space: nowrap;
}
.alert__trace { font-size: 12px; color: var(--text-tertiary); margin-top: 6px; }

.auth__links {
  margin-top: var(--spacing-lg);
  text-align: center;
  font-size: 13px;
}

.notice {
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}
.notice > p { margin: 0 0 var(--spacing-sm); }
.notice > p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- 관리 화면 */
/*
 * 껍데기는 사이드바 + 본문 2열이다.
 *
 * --side-w 는 console.js 가 인라인으로 얹는다. 여기 적는 240 은 스크립트가
 * 아직 안 붙었을 때의 값이라, 자바스크립트가 죽어도 화면은 멀쩡히 뜬다.
 */
.app {
  --side-w: 240px;
  position: relative;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr);
  min-height: 100vh;
}
.app--dragging { user-select: none; cursor: col-resize; }
/* 끌고 있는 동안에는 트랜지션을 끈다. 커서를 늦게 따라오면 고무줄처럼 느껴진다. */
.app--dragging .app__side { transition: none; }

/* 사이드바는 라이트·다크 무관하게 네이비다 — design/00 §6.
   화면이 밝든 어둡든 제품의 앵커가 한 곳에 고정되어 있어야 한다. */
.app__side {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  color: var(--sidebar-fg);
  overflow: hidden;
}
.app__brand {
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 0 var(--spacing-base);
  border-bottom: 1px solid var(--sidebar-border);
  flex: none;
}
.app__logo { height: auto; }
.app__logo--mark { display: none; }
.app--collapsed .app__logo { display: none; }
.app--collapsed .app__logo--mark { display: block; margin: 0 auto; }

.app__side-foot {
  margin-top: auto;
  padding: var(--spacing-sm);
  border-top: 1px solid var(--sidebar-border);
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: none;
}
.app__side-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 8px 10px;
  border: 0;
  background: none;
  border-radius: var(--radius-md);
  color: var(--sidebar-fg-muted);
  font: inherit;
  font-size: 13px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background 80ms var(--ease-out, ease), color 80ms var(--ease-out, ease);
}
.app__side-btn:hover { background: var(--sidebar-active-bg); color: var(--sidebar-fg); }
.app__side-btn:focus-visible { outline: 2px solid var(--sidebar-fg); outline-offset: -2px; }

/* 폭 조절 손잡이. 1px 이면 아무도 못 잡는다 — 히트 영역 8px. design/03 §2.5
   사이드바 밖에 둔다. 안에 두면 overflow:hidden 에 잘린다. */
.app__grip {
  position: absolute;
  top: 0;
  left: calc(var(--side-w) - 4px);
  width: 8px;
  height: 100%;
  cursor: col-resize;
  z-index: 3;
  /* 끌 때 옆 글자가 딸려 선택되지 않게 */
  user-select: none;
  touch-action: none;
}
.app__grip::after {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 2px;
  height: 100%;
  background: transparent;
  transition: background 80ms var(--ease-out);
}
.app__grip:hover::after,
.app--dragging .app__grip::after { background: var(--bg-brand); }
.app__grip:focus-visible::after { background: var(--border-focus); }

.console {
  padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-5xl);
  min-width: 0;
}
/* 읽기 위주 화면은 880px 로 묶는다. 표 화면은 창을 꽉 채운다 — design/03 §2.3 */
.console--reading { max-width: 880px; }
.console__head {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}
.console__head > div:first-of-type { flex: 1; min-width: 0; }
.console__head-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex: none;
}
.console__realm {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-full);
  padding: 3px 10px;
}
.console__head-meta .app__side-btn { color: var(--text-secondary); }
.console__head-meta .app__side-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.console__title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; margin: 0; }
.console__lede { color: var(--text-secondary); margin: 2px 0 0; font-size: 13px; }

/* 아이콘은 글자색을 따른다. 크기를 글자에 맞춰 두면 접힌 사이드바에서도
   줄 높이가 흔들리지 않는다. */
.icon { width: 18px; height: 18px; flex: none; }
.icon--dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon--light { display: none; }
  :root:not([data-theme="light"]) .icon--dark { display: inline-block; }
}
:root[data-theme="dark"] .icon--light { display: none; }
:root[data-theme="dark"] .icon--dark { display: inline-block; }

h2 {
  font-size: 17px;
  font-weight: 700;
  margin: var(--spacing-3xl) 0 var(--spacing-md);
  padding-bottom: var(--spacing-sm);
  border-bottom: 1px solid var(--border-default);
}

.filters {
  display: flex;
  gap: var(--spacing-lg);
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: var(--spacing-md);
}
.filters__tabs { display: flex; gap: var(--spacing-xs); flex-wrap: wrap; }
.filters__search { display: flex; gap: var(--spacing-xs); margin-left: auto; }
.filters__search .field__input { width: 220px; }
.tab {
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border-control);
  background: var(--bg-surface);
  color: var(--text-secondary);
  border-radius: var(--radius-md);
  padding: 6px 12px;
  cursor: pointer;
}
.tab--active { background: var(--bg-brand); border-color: var(--bg-brand); color: var(--text-on-brand); }

/*
 * 좁아지면 컬럼을 접는다 — design/03 §2.3.
 *
 * 창이 아니라 **표가 놓인 자리**의 폭을 본다. 사이드바를 펼치거나 상세
 * 패널을 열면 창 폭은 그대로인데 표만 좁아진다. 그래서 미디어 쿼리가
 * 아니라 컨테이너 쿼리다.
 *
 * data-pri="3" 이 먼저 접히고 "2" 가 나중에 접힌다. 표시하지 않은 컬럼은
 * 어떤 폭에서도 남는다 — 식별자·상태·주요 액션 (design/00 §1).
 *
 * 머리글의 data-pri 를 그 열의 칸에 옮겨 적는 일만 table.js 가 한다.
 * 폭에 따라 계속 바뀌는 판단은 CSS 가 맡는다 — 스크립트가 안 돌아도
 * 컬럼이 숨은 채로 굳지 않는다.
 */
.table-wrap {
  overflow-x: auto;
  container-type: inline-size;
}
@container (max-width: 1000px) {
  .table-wrap [data-pri="3"] { display: none; }
}
@container (max-width: 720px) {
  .table-wrap [data-pri="2"] { display: none; }
}
/* 컨테이너 쿼리를 모르는 브라우저를 위한 대비.
   인쇄에서는 창 폭이 의미 없으므로 전부 보여준다. */
@media print {
  .table-wrap [data-pri] { display: table-cell !important; }
}

/* 컬럼 폭 손잡이. 헤더 경계선 위에 얹는다 — design/03 §2.5.
   히트 영역 8px. 1px 이면 아무도 못 잡는다. */
.th--sizable { position: relative; }
.th-grip {
  position: absolute;
  top: 0;
  right: -4px;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 1;
}
.th-grip::after {
  content: "";
  position: absolute;
  top: 15%;
  left: 3px;
  width: 2px;
  height: 70%;
  background: transparent;
  transition: background 80ms var(--ease-out);
}
.th-grip:hover::after,
.table--dragging .th-grip::after { background: var(--border-strong); }
.th-grip:focus-visible::after { background: var(--border-focus); height: 100%; top: 0; }
/* 끄는 동안에는 옆 글자가 딸려 선택되지 않게. 트랜지션도 끈다 —
   커서를 늦게 따라오면 고무줄처럼 느껴진다. */
.table--dragging { user-select: none; }
.table--dragging .th-grip::after { transition: none; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
thead th {
  background: var(--bg-subtle);
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-align: left;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-default);
}
tbody td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
  color: var(--text-secondary);
}
tbody tr:last-child td { border-bottom: none; }
.table__empty { text-align: center; color: var(--text-tertiary); padding: var(--spacing-3xl); }
.row-actions { display: flex; gap: var(--spacing-xs); }
.inline-form { display: inline; }

/*
 * 상태 표시는 왼쪽 막대 + 글자다.
 * 색만으로 구분하면 색각 이상과 흑백 인쇄에서 읽을 수 없다 —
 * 인쇄본은 규제 심사에서 실제로 쓰인다.
 */
.status {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  padding: 1px 0 1px 9px;
  border-left: 3px solid var(--border-strong);
  color: var(--text-secondary);
}
.status--ACTIVE { border-left-color: var(--status-success-border); color: var(--status-success-fg); }
.status--PENDING { border-left-color: var(--status-warning-border); color: var(--status-warning-fg); }
.status--REJECTED { border-left-color: var(--status-danger-border); color: var(--status-danger-fg); }
.status--SUSPENDED { border-left-color: var(--status-danger-border); color: var(--status-danger-fg); }
.status--DEACTIVATED { border-left-color: var(--border-strong); color: var(--text-tertiary); }

.chip {
  display: inline-block;
  font-size: 11px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  margin-right: 4px;
}

.kv {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xl);
  padding: var(--spacing-base) var(--spacing-lg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  margin-bottom: var(--spacing-md);
}
.kv__k { display: block; font-size: 11px; color: var(--text-tertiary); }
.kv__v { display: block; font-size: 13px; font-weight: 500; }

.card {
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}
.card h2 { margin-top: 0; }

/*
 * 인쇄 스타일은 선택이 아니다.
 * 21 CFR 11.10(b) 는 "정확하고 완전한 사본"을 사람이 읽을 수 있는 형태로
 * 낼 수 있어야 한다고 요구한다. 화면 그대로 인쇄하면 표가 잘린다.
 */
@media print {
  .filters, .row-actions, .btn, .card form { display: none !important; }
  body { background: #fff; color: #000; }
  .console { max-width: none; padding: 0; }
  table { border-color: #999; }
  thead th { background: #eee; color: #000; }
  tbody td { color: #000; }
  .status { border-left-color: #000 !important; color: #000 !important; }
}

@media (max-width: 720px) {
  .filters__search { margin-left: 0; width: 100%; }
  .filters__search .field__input { flex: 1; width: auto; }
}

/* ── 관리 화면 이동 막대 ─────────────────────────────────────────────
 *
 * 화면이 늘어나면 각 페이지가 서로를 모르는 상태가 된다. 계정에서 인증
 * 설정으로 가려면 주소를 직접 쳐야 하는 식이다.
 *
 * 현재 위치를 색만으로 표시하지 않는다 — 아래 밑줄과 굵기를 함께 쓴다.
 * 색각 이상과 흑백 출력에서도 어디에 있는지 읽혀야 한다. */
.console__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.console__nav-group {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sidebar-fg-muted);
  padding: var(--spacing-md) 10px var(--spacing-2xs);
}
/* 스크롤이 생겼다는 것을 보이게. 없으면 아래에 더 있는 줄 모른다. */
.console__nav { scrollbar-width: thin; scrollbar-color: var(--sidebar-active-bg) transparent; }
.console__nav::-webkit-scrollbar { width: 6px; }
.console__nav::-webkit-scrollbar-thumb {
  background: var(--sidebar-active-bg);
  border-radius: var(--radius-full);
}
.app--collapsed .console__nav-group {
  /* 접히면 글자가 들어갈 자리가 없다. 구획은 선으로만 남긴다. */
  height: 1px;
  padding: 0;
  margin: var(--spacing-sm) 10px;
  overflow: hidden;
  background: var(--sidebar-border);
  color: transparent;
}
.console__nav-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: 8px 10px;
  border-radius: var(--radius-md);
  color: var(--sidebar-fg-muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  transition: background 140ms var(--ease-out, ease), color 80ms var(--ease-out, ease);
}
.console__nav-item:hover {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-fg);
  text-decoration: none;
}
.console__nav-item:focus-visible {
  outline: 2px solid var(--sidebar-fg);
  outline-offset: -2px;
}
/* 현재 위치를 색만으로 표시하지 않는다 — 왼쪽 막대와 굵기를 함께 쓴다.
   색각 이상과 흑백 출력에서도 어디에 있는지 읽혀야 한다. */
.console__nav-item--active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-fg);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--sidebar-fg);
}
/* 접힌 사이드바에서는 글자를 접고 아이콘만 남긴다. 아이콘이 없는 항목은
   여기서 사라져 버리므로, NavItem.Icon 은 비워 두지 않는다. */
.app--collapsed .console__nav-label { display: none; }

/* 승인 대기 뱃지. 접혀도 보여야 한다 — 운영의 1차 신호다 (design/03 §2.3).
   펼친 상태에서는 오른쪽 끝, 접히면 아이콘 모서리로 옮겨 붙는다. */
.console__nav-badge {
  margin-left: auto;
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--radius-full);
  background: var(--status-warning-strong, var(--status-warning-fg));
  color: var(--text-on-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.app--collapsed .console__nav-item { position: relative; }
.app--collapsed .console__nav-badge {
  position: absolute;
  top: 2px;
  right: 6px;
  margin: 0;
  min-width: 0;
  padding: 0;
  width: 8px;
  height: 8px;
  line-height: 0;
  font-size: 0;
  border: 1px solid var(--sidebar-bg);
}
.app--collapsed .console__nav-item,
.app--collapsed .app__side-btn { justify-content: center; padding-left: 0; padding-right: 0; }

/* 설정 화면: 항목이 많아 두 열로 읽는다. 좁으면 한 열로 접힌다. */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px 32px;
}
/* 위아래 모두 띄운다. 아래만 띄우면 표 바로 뒤에 오는 구획의 제목이
   표 마지막 줄에 붙어 버린다 — 실제로 기능·플랜·워크스페이스 화면이
   그랬다. 이웃한 여백은 합쳐지므로 구획끼리는 그대로 32px 이다. */
.settings-section {
  margin: 32px 0;
}
.settings-section:first-child { margin-top: 0; }
.settings-section__title {
  font-size: 16px;
  font-weight: 700;
  margin: 0 0 4px;
}
.settings-section__lede {
  color: var(--text-secondary);
  font-size: 13px;
  margin: 0 0 16px;
}
/* 규제로 잠긴 항목. 왜 잠겼는지 옆에 적는다 — 이유 없이 비활성이면
 * 고장으로 보인다. */
.field--locked .field__input,
.field--locked select {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  cursor: not-allowed;
}
.field__lock {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ── 대시보드 지표 ───────────────────────────────────────────────────
 *
 * 처리할 것이 있으면(승인 대기 등) 눈에 띄어야 한다. 색만으로 구분하지
 * 않는다 — 굵은 테두리를 함께 쓴다. 색각 이상과 흑백 출력에서도 읽혀야 한다. */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--spacing-base);
  margin: 0 0 32px;
}
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--spacing-lg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--bg-surface);
  text-decoration: none;
  color: inherit;
}
.stat:hover { border-color: var(--border-strong); }
.stat:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}
.stat--attention {
  border-width: 2px;
  border-color: var(--status-warning-border);
}
.stat__value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.stat__label {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ── 전자서명 기록 ───────────────────────────────────────────────────
 *
 * 11.50 이 요구하는 셋(이름·일시·의미)을 가장 크게, 가장 먼저 보여준다.
 * 나머지는 그다음이다. */
.sig-statement {
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin: 0 0 32px;
  background: var(--bg-surface);
}
.sig-statement__lede {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 13px;
}
.sig-statement__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px 32px;
  margin: 0;
}
.sig-statement__grid dt {
  font-size: 12px;
  color: var(--text-secondary);
  margin: 0 0 4px;
}
.sig-statement__grid dd { margin: 0; }
.sig-statement__strong {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.sig-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 24px;
  margin: 0 0 12px;
}
.sig-meta dt { font-size: 12px; color: var(--text-secondary); margin: 0 0 2px; }
.sig-meta dd { margin: 0; font-size: 13px; word-break: break-all; }

.sig-assertion {
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.6;
  word-break: break-all;
  white-space: pre-wrap;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-base);
  margin: 0;
}

/* ── 인쇄 ────────────────────────────────────────────────────────────
 *
 * **장식이 아니라 규제 항목이다.** 11.50 은 서명 표시 내용이 "화면과 인쇄
 * 양쪽에서" 사람이 읽을 수 있어야 한다고 한다.
 *
 * 화면용 요소(이동 막대·버튼)를 숨기고, 배경을 없애고, 링크 주소를 펼친다 —
 * 종이에서는 누를 수 없으므로 어디를 가리키는지 글자로 남아야 한다. */
@media print {
  .no-print, .app__side, .console__nav, .filters, .btn { display: none !important; }
  .app { display: block; }

  body { background: #fff; color: #000; }
  .console { max-width: none; padding: 0; }

  .sig-statement {
    border: 2px solid #000;
    background: transparent;
    break-inside: avoid;
  }
  .sig-assertion, .notice, .alert {
    background: transparent;
    border: 1px solid #666;
  }
  /* 한 서명 기록이 페이지 중간에 잘리지 않게 한다. */
  .settings-section { break-inside: avoid; }

  /* 링크는 주소를 함께 찍는다. */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }

  /* 표는 페이지가 넘어가도 머리글이 반복돼야 읽을 수 있다. */
  thead { display: table-header-group; }
  tr { break-inside: avoid; }
}

/* ------------------------------------------------------- 2단계 인증 (A04·A05) */

/* 등록 화면의 폼은 카드 폭을 다 쓴다. 로그인 폼과 같은 리듬이다. */
.auth__form { display: flex; flex-direction: column; gap: var(--spacing-lg); }
.auth__form + .auth__form { margin-top: var(--spacing-lg); }
.auth__hint {
  color: var(--text-secondary);
  font-size: 13px;
  margin: var(--spacing-lg) 0 0;
}

.steps {
  margin: 0 0 var(--spacing-xl);
  padding-left: 1.2em;
  color: var(--text-secondary);
  font-size: 14px;
}
.steps li + li { margin-top: var(--spacing-xs); }

/* QR 은 흰 바탕 위에 둔다. 어두운 카드 위에 그대로 올리면 인식률이 떨어진다. */
.qr {
  margin: 0 0 var(--spacing-xl);
  display: grid;
  place-items: center;
  padding: var(--spacing-lg);
  background: #fff;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.qr img { display: block; image-rendering: pixelated; }

.manual { margin-bottom: var(--spacing-xl); }
.manual > summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-size: 13px;
}
.manual .kv { margin-top: var(--spacing-md); }

/* 백업 코드는 옮겨 적는 값이다. 고정폭으로 두고 자간을 벌린다 —
   0 과 O, 1 과 l 을 눈으로 갈라야 한다. */
.codes {
  list-style: none;
  margin: 0 0 var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--bg-subtle, #f6f7f9);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--spacing-xs) var(--spacing-lg);
}
.codes code {
  font-size: 14px;
  letter-spacing: 0.04em;
}

@media print {
  /* 백업 코드는 인쇄해서 보관하는 것이 정상적인 사용이다. */
  .auth__form, .auth__hint, .alert { display: none; }
  .codes { border: 1px solid #000; }
}

/* -------------------------------------------------- 서명 의식 (A31–A34·A38) */

/* 서명 화면은 무엇에 서명하는지가 주인공이라 로그인 카드보다 넓다. */
.auth__card--wide { max-width: 640px; }

.sign-doc {
  margin: 0 0 var(--spacing-xl);
  padding: var(--spacing-lg);
  background: var(--bg-subtle, #f6f7f9);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
}
.sign-doc__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 var(--spacing-xs);
}
.sign-doc__subtitle {
  color: var(--text-secondary);
  margin: 0 0 var(--spacing-md);
}

.receipt { margin-bottom: var(--spacing-xl); }
.receipt .kv + .sign-doc__title { margin-top: var(--spacing-xl); }

/* 어서션은 긴 base64 다. 넘치면 카드 밖으로 밀려난다. */
.assertion {
  margin: var(--spacing-md) 0 0;
  padding: var(--spacing-md);
  background: var(--bg-subtle, #f6f7f9);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: 11px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 220px;
  overflow: auto;
}

/* 11.50 은 서명 표시가 화면과 **인쇄 양쪽에서** 읽히기를 요구한다.
   인쇄 스타일시트는 장식이 아니다. */
@media print {
  .no-print, .auth__form, .row-actions { display: none; }
  .auth { display: block; padding: 0; }
  .auth__card {
    max-width: none;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .sign-doc, .assertion { background: #fff; border: 1px solid #000; }
  /* 접힌 내용도 인쇄물에는 나와야 한다 — 종이에는 펼칠 방법이 없다. */
  details.manual { display: block; }
  details.manual > summary { display: none; }
  details.manual > *:not(summary) { display: block !important; }
  .assertion { max-height: none; overflow: visible; }
}

/* 상세 화면의 되돌아가기·상태 줄.
   이동 막대는 껍데기(ConsoleShell)가 그린다 — 여기서 다시 그리지 않는다. */
.detail-bar {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}
.detail-bar__id {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-weight: 600;
}

/* 움직임에 민감한 사용자가 있다. 선택이 아니다 — design/03 §1.5.
   단 색·투명도 변화는 남긴다. 상태가 바뀐 걸 알 수 없게 되면 안 된다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}