.panel-loading-host{position:relative;isolation:isolate}
.panel-loading-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:24px;box-sizing:border-box;background:color-mix(in srgb,var(--bg-card) 88%,transparent);border-radius:inherit;cursor:wait;text-align:center;color:var(--tx);font-size:var(--font-size-base);font-weight:600}
.panel-loading-spinner{display:block;flex:none;width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:panel-loading-spin .8s linear infinite}
.panel-skeleton{width:100%;padding:16px;box-sizing:border-box;display:grid;gap:14px}
.panel-skeleton>div{padding:18px;border:1px solid var(--line);border-radius:10px;display:grid;gap:12px}
.panel-skeleton i{display:block;background:var(--bg-soft);height:14px;border-radius:4px;width:88%}
.panel-skeleton i:first-child{width:60%;height:18px}.panel-skeleton i:last-child{width:40%}
@keyframes panel-loading-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.panel-loading-spinner{animation:none}}

/* ───────── 공통 UX 규칙 (감사 1·2단계) ─────────
   감사 2026-09-07: 화면 10개에서 반복된 결함을 규칙 하나로 막는다.
   - 미정의 토큰(--muted --chip-bg --accent-bg)·미정의 클래스(.mini .mute)가 쓰이고 있었다
   - 포커스 표시가 세 구역에만 있었고 outline:none 이 곳곳에 있었다
   - 13pt 단일 크기라 제목·부제·보조 텍스트가 굵기·회색으로만 나뉘었다
   기본 글꼴 13pt 는 접근성 설정이라 유지하고 상대 배율만 쓴다. */

:root, [data-theme="light"]{
  --muted: var(--tx-dim);
  --chip-bg: var(--bg-chip);
  --accent-bg: var(--accent-soft);
  --src-k: #2e7d32;      /* 출처 배지: 지식 */
  --src-q: #6a4fb3;      /* 출처 배지: 질의회시 */
  --warn-bg: var(--amber-bg);
  --warn-tx: var(--amber);
  --danger-bg: var(--red-bg);
  --danger-tx: var(--red);
}
[data-theme="dark"]{
  --src-k: #6ee7a8;
  --src-q: #b8a6f5;
}

/* 보조 텍스트·작은 버튼 — 이름은 이미 쓰이고 있으므로 규칙만 채운다 */
.mute, small.mute, .muted{color:var(--tx-dim)}
.mini, .ax-mini{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:8px;
  border:1px solid var(--line); background:var(--bg-card); color:var(--tx-dim); font-size:.92em;
  line-height:1.4; cursor:pointer; white-space:nowrap}
.mini:hover, .ax-mini:hover{background:var(--bg-hover); color:var(--tx)}
button:disabled, .mini:disabled, .ax-mini:disabled{opacity:.5; cursor:not-allowed}

/* 키보드 포커스 — 전 화면 */
#main :focus-visible, #topbar :focus-visible, #sidebar :focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}

/* 정보 위계 — 상대 배율 */
.pg-h, .adm-h, .lc-head h2, .fm-heading h2, .wb-h, #currency h2{font-size:1.25em; font-weight:700; color:var(--tx); margin:0}
.pg-sub, .adm-h .sub, .wb-sub, .cl-sub{display:block; font-size:.88em; font-weight:400; color:var(--tx-dim); margin-top:3px}
.sec-h{font-size:1.08em; font-weight:700; color:var(--tx); margin:18px 0 8px}
.side-label{text-transform:none; letter-spacing:0}
.hint, .help{font-size:.9em; color:var(--tx-dim)}

/* 상태 블록 — 로딩 · 오류 · 빈 결과 · 잠금 (세 가지를 항상 구분해 그린다) */
.state{display:flex; flex-direction:column; align-items:center; gap:10px; padding:28px 16px;
  text-align:center; color:var(--tx-dim); border:1px dashed var(--line); border-radius:12px; background:var(--bg-soft)}
.state .st-ic{font-size:26px; line-height:1}
.state .st-tx{max-width:520px; line-height:1.55}
.state .st-actions{display:flex; gap:8px; flex-wrap:wrap; justify-content:center}
.state.err{border-style:solid; border-color:var(--red); background:var(--red-bg); color:var(--tx)}
.state.lock{border-style:solid; border-color:var(--amber); background:var(--amber-bg); color:var(--tx)}
.state details{font-size:.85em; color:var(--tx-faint); max-width:560px}
.state details pre{white-space:pre-wrap; word-break:break-all; text-align:left; margin:6px 0 0}

/* 인라인 오류(필드 아래) */
.field-err{color:var(--red); font-size:.9em; margin-top:4px}
[aria-invalid="true"]{border-color:var(--red) !important}

/* 버튼 줄·표 래퍼 — 좁은 폭에서 넘치지 않게 */
.btn-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}

/* 로그인 게이트 안내 */
.gate{display:inline-flex; align-items:center; gap:6px; font-size:.9em; color:var(--tx-dim)}

/* 토스트에 역할 부여됐을 때 시각 강조 */
[role="status"].toast, .toast[role="status"]{border-left:3px solid var(--accent)}