/* ═══════════════════════════════════════════════════════════════════════════
   Admin Board — 공개 디자인 시스템 (2026-07-28)

   Console 에서 만든 관리 화면이 쓸 수 있는 **유일한** 어휘다. 보드는 Axowl 내부 클래스
   (.card-panel, .sidebar-link, --ah-*)를 직접 쓰지 않는다.

   왜 떼어내는가(Sonny):
     - Axowl 내부 CSS 를 리팩터링하면 고객이 만든 보드가 깨진다.
     - 쓸 수 있는 클래스에 제한이 없으면 보드가 대시보드 아무 화면이나 흉내 낼 수 있다.
   경계를 여기 한 벌로 못 박아 두 방향을 다 막는다.

   🔒 이 파일이 AI 가 읽는 정본이기도 하다. 아래 @axb-manifest 블록을 서버가 그대로
      프롬프트에 넣는다(AdminBoardDesignSystem.cs). 클래스를 추가하면 **매니페스트도 같이**
      고쳐야 한다 — 안 그러면 AI 는 그 클래스의 존재를 모른다.

   토큰은 Axowl 변수(--ah-*)에서 한 번 받아 --axb-* 로 옮긴다. 보드는 --axb-* 만 본다.
   그래서 Axowl 이 팔레트를 바꾸면 보드도 따라오지만, 보드가 Axowl 변수를 직접 참조하진
   않는다(의존 방향이 한쪽이다).

   ┌─ @axb-manifest ─────────────────────────────────────────────────────────
   │ LAYOUT
   │   axb-page          한 화면 전체를 감싼다
   │   axb-header        제목 + 우측 액션. 화면당 하나
   │   axb-title         화면 제목
   │   axb-subtitle      제목 아래 한 줄 설명
   │   axb-panel         내용 한 덩어리(카드). 여러 개 쌓아도 된다
   │   axb-panel-title   패널 제목
   │   axb-panel-desc    패널 설명
   │   axb-row           가로 배치. 자식은 axb-col
   │   axb-col           axb-row 안의 한 칸
   │ TABLE
   │   axb-table         목록 컨테이너
   │   axb-thead / axb-th        헤더 줄 / 헤더 칸
   │   axb-tr / axb-td           행 / 칸
   │   axb-empty         행이 없을 때 (제목=axb-empty-title, 설명=axb-empty-body)
   │ DETAIL
   │   axb-detail        상세 보기 컨테이너
   │   axb-pair          한 줄(라벨+값). 라벨=axb-k, 값=axb-v
   │ ACTIONS
   │   axb-actions       버튼 묶음
   │   axb-btn           기본 버튼
   │   axb-btn approve / reject / flag   액션 종류별 색
   │   axb-btn ghost     보조 버튼
   │ STATUS
   │   axb-badge         상태 배지 (ok / warn / bad / muted 를 같이 준다)
   │   axb-chip          작은 태그
   │   axb-seal          도장 표시 — 승인이 봉인된다는 뜻
   │ TEXT
   │   axb-mono          기계용 값(키·ID·타입)
   │   axb-muted         부차 정보
   │ 색은 클래스로만 고른다. 임의 hex 를 쓰지 않는다.
   └──────────────────────────────────────────────────────────────────────── */

.axb-page {
    /* Axowl 팔레트를 한 번 받아 보드 어휘로 옮긴다 — 의존 방향은 여기 한 곳뿐이다. */
    --axb-bg:        var(--ah-bg, #ffffff);
    --axb-surface:   var(--ah-bg-surface, #ffffff);
    --axb-subtle:    var(--ah-bg-subtle, #f8fafc);
    --axb-line:      var(--ah-border, #e2e8f0);
    --axb-text:      var(--ah-text, #0f172a);
    --axb-text-sub:  var(--ah-text-sub, #475569);
    --axb-muted:     var(--ah-text-muted, #94a3b8);
    --axb-accent:    var(--ah-link, #4f46e5);
    --axb-ok:        #047857;
    --axb-ok-bg:     #ecfdf5;
    --axb-ok-line:   #a7f3d0;
    --axb-bad:       #b91c1c;
    --axb-bad-bg:    #fef2f2;
    --axb-bad-line:  #fecaca;
    --axb-warn:      #92400e;
    --axb-warn-bg:   #fffbeb;
    --axb-warn-line: #fde68a;
    --axb-radius:    8px;

    color: var(--axb-text);
    font-size: 0.85rem;
}

/* ── Layout ── */
.axb-header {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1.5rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.axb-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.5px; margin: 0; }
.axb-subtitle { font-size: 0.8rem; color: var(--axb-muted); margin: 0.25rem 0 0; }

.axb-panel {
    background: var(--axb-surface); border: 1px solid var(--axb-line);
    border-radius: var(--axb-radius); padding: 1.1rem 1.25rem; margin-bottom: 1rem;
}
.axb-panel.flush { padding: 0; overflow: hidden; }
.axb-panel-title { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.35rem; }
.axb-panel-desc { font-size: 0.78rem; color: var(--axb-muted); line-height: 1.65; margin: 0 0 0.75rem; }

.axb-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.axb-col { flex: 1; min-width: 0; }

/* ── Table ── */
.axb-table { width: 100%; }
.axb-thead {
    display: flex; gap: 1rem; padding: 0.6rem 1rem;
    background: var(--axb-subtle); border-bottom: 1px solid var(--axb-line);
}
.axb-th {
    flex: 1; min-width: 0; font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase; color: var(--axb-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.axb-th.right, .axb-td.right { flex: 0 0 auto; text-align: right; }
.axb-tr {
    display: flex; gap: 1rem; padding: 0.7rem 1rem;
    border-bottom: 1px solid var(--axb-line); align-items: center;
}
.axb-tr:last-child { border-bottom: none; }
.axb-tr:hover { background: var(--axb-subtle); }
.axb-td {
    flex: 1; min-width: 0; font-size: 0.8rem; color: var(--axb-text-sub);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.axb-empty { padding: 3rem 2rem; text-align: center; }
.axb-empty-title { font-size: 0.85rem; font-weight: 700; margin-bottom: 0.4rem; }
.axb-empty-body {
    font-size: 0.78rem; color: var(--axb-muted); line-height: 1.7;
    max-width: 28rem; margin: 0 auto;
}

/* ── Detail ── */
.axb-detail { display: flex; flex-direction: column; gap: 0.1rem; }
.axb-pair {
    display: flex; justify-content: space-between; gap: 1rem;
    font-size: 0.78rem; padding: 0.35rem 0.5rem; border-radius: 4px;
}
.axb-pair:nth-child(odd) { background: var(--axb-subtle); }
.axb-k { color: var(--axb-text-sub); flex-shrink: 0; }
.axb-v { color: var(--axb-text); text-align: right; word-break: break-word; }

/* ── Actions ── */
.axb-actions { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; }
.axb-btn {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-family: inherit; font-size: 0.75rem; font-weight: 600;
    padding: 0.35rem 0.8rem; border-radius: 6px; cursor: pointer;
    border: 1px solid var(--axb-line); background: var(--axb-surface);
    color: var(--axb-text-sub); transition: filter .15s, border-color .15s;
}
.axb-btn:hover { border-color: var(--axb-muted); }
.axb-btn.approve { color: var(--axb-ok);   border-color: var(--axb-ok-line);   background: var(--axb-ok-bg); }
.axb-btn.reject  { color: var(--axb-bad);  border-color: var(--axb-bad-line);  background: var(--axb-bad-bg); }
.axb-btn.flag    { color: var(--axb-warn); border-color: var(--axb-warn-line); background: var(--axb-warn-bg); }
.axb-btn.ghost   { background: transparent; }
.axb-btn:disabled { opacity: .5; cursor: default; }

/* ── Status ── */
.axb-badge {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.68rem; font-weight: 600; padding: 0.15rem 0.5rem;
    border-radius: 4px; border: 1px solid var(--axb-line); color: var(--axb-muted);
}
.axb-badge.ok    { color: var(--axb-ok);   border-color: var(--axb-ok-line);   background: var(--axb-ok-bg); }
.axb-badge.warn  { color: var(--axb-warn); border-color: var(--axb-warn-line); background: var(--axb-warn-bg); }
.axb-badge.bad   { color: var(--axb-bad);  border-color: var(--axb-bad-line);  background: var(--axb-bad-bg); }
.axb-badge.muted { color: var(--axb-muted); }

.axb-chip {
    display: inline-block; font-size: 0.66rem; color: var(--axb-muted);
    border: 1px solid var(--axb-line); border-radius: 4px; padding: 0.05rem 0.4rem;
}
.axb-seal { font-size: 0.7rem; color: var(--axb-muted); }

/* ── Text ── */
.axb-mono { font-family: "JetBrains Mono", monospace; font-size: 0.72rem; color: var(--axb-muted); }
.axb-muted { color: var(--axb-muted); }

@media (max-width: 720px) {
    .axb-row { flex-direction: column; }
    .axb-thead { display: none; }
    .axb-tr { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
}