/* 관리자 화면 — account.css 위에 얹는다.

   여기 있는 것은 "여러 줄을 한눈에 훑는" 자리에만 필요한 것들이다.
   계정 화면(로그인·가입·마이페이지)은 한 사람의 것을 한 번에 하나씩
   보여 주는데, 이 화면은 남의 것을 목록으로 본다. 그래서 표가 필요하다.

   토큰과 컴포넌트는 DESIGN.md 를 따른다. 여기에만 있는 색을 만들지 않는다. */

/* ── 개인정보를 본다는 것을 화면이 먼저 말한다 ──────────────────────── */
.lognote{font-size:13.5px;color:var(--ink-3);background:var(--bg-2);
  border:1px solid var(--line);border-radius:4px;padding:11px 14px;margin:0 0 22px}

/* ── 찾기 ───────────────────────────────────────────────────────────── */
.searchbar{display:flex;gap:9px;margin-bottom:20px;flex-wrap:wrap}
.searchbar input{flex:1 1 240px;min-width:0;font-family:inherit;font-size:15px;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:3px;
  padding:9px 12px}
.searchbar input:focus{outline:2px solid var(--brand);outline-offset:-1px;border-color:var(--brand)}

/* ── 표 ─────────────────────────────────────────────────────────────
   넓은 것은 제 상자 안에서만 옆으로 굴러야 한다. 본문이 통째로
   가로로 밀리면 화면이 망가진 것으로 읽힌다. */
.tscroll{overflow-x:auto;border:1px solid var(--line);border-radius:5px;background:#fff}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:820px}
.tbl th,.tbl td{text-align:left;padding:11px 14px;border-top:1px solid var(--line-2);
  vertical-align:middle;white-space:nowrap}
.tbl thead th{border-top:0;background:var(--bg-2);font-family:var(--mono);font-weight:400;
  font-size:11.5px;letter-spacing:.09em;color:var(--ink-3)}
.tbl tbody tr{cursor:pointer}
.tbl tbody tr:hover{background:var(--bg-2)}
.tbl td.mono{font-family:var(--mono);font-size:12.5px;color:var(--ink-2)}
.tbl td a{color:var(--brand);text-decoration:none}
.tbl td a:hover{text-decoration:underline}
.tbl .prov{color:var(--ink-3)}
.unv{font-family:var(--mono);font-size:10.5px;color:var(--warn);border:1px solid currentColor;
  border-radius:2px;padding:0 5px;margin-left:6px;vertical-align:1px}

/* ── 상태 칩 — 판정색과 같은 규칙을 쓴다 ────────────────────────────── */
.chip{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.05em;
  padding:2px 8px;border-radius:2px;border:1px solid currentColor}
.chip.ok{color:var(--ok)}
.chip.warn{color:var(--warn)}
.chip.off{color:var(--ink-3)}
.chip.ng{color:var(--ng)}

.empty{font-size:14.5px;color:var(--ink-3);text-align:center;padding:28px 0}

/* ── 자세히 보기 ────────────────────────────────────────────────────── */
.crumb{font-family:var(--mono);font-size:12px;color:var(--ink-3);padding-top:36px}
.crumb a{color:var(--brand);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.page-head .idline{font-family:var(--mono);font-size:14px;color:var(--ink-3);margin-top:6px}
/* 자세히 화면의 표는 좁아도 되므로 최소폭을 풀어 준다 */
.panel .tbl{min-width:0}
.panel .tscroll{border:0;border-radius:0}
.panel .tbl th,.panel .tbl td{padding:9px 0}
.panel .tbl thead th{background:transparent;padding-top:0}

/* 사용량 막대 — 숫자만 있으면 어느 날이 튀는지 안 보인다 */
.spark{display:flex;align-items:flex-end;gap:3px;height:44px;margin:4px 0 14px}
.spark i{flex:1 1 0;min-width:2px;background:var(--bg-3);border-radius:1px 1px 0 0}
.spark i.on{background:var(--brand)}

/* ── 페이지 사이를 옮겨 다닐 때 ─────────────────────────────────────
   같은 Optra 안에서 움직이는 느낌이 나야 한다. 차림표와 바닥글에 이름을
   주면 브라우저가 그 둘을 "같은 것" 으로 알아보고 그대로 둔 채 본문만
   바꾼다. 지원하지 않는 브라우저는 예전처럼 그냥 넘어간다 — 깨지지 않는다. */
@view-transition{navigation:auto}