/* ==========================================================================
   admin-fusion.css — 관리자 화면 융합 규칙(03_ui_fusion §4-3). 부품 이름 재정의 없이 새 클래스만, 색은 토큰 변수만.
   P2-B: .todo-bar·.attend-card·.kpi-scroll·.cert-panel·.audit-note·.admin-filter·.admin-nav(2단계 메뉴)·.check-grid
   ========================================================================== */
/* 표 행과 그리드 카드도 필터·권한에 따른 HTML hidden 상태를 따른다. */
[hidden] { display: none !important; }

/* 관리자 로그인 — 회색 바탕, 화면 세로·가로 가운데 흰 카드(사용자 지시 2026-11-08) */
.admin-login { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kha-sp-24); padding: var(--kha-sp-40) 16px; background: var(--kha-surface-subtle); }
.admin-login__brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 0 var(--kha-sp-32); padding-bottom: var(--kha-sp-24); border-bottom: 1px solid var(--kha-gray-200); color: var(--kha-text-secondary); text-align: center; }
.admin-login__logo { height: 34px; width: auto; }
.admin-login__site { font-size: var(--kha-fs-15); font-weight: var(--kha-fw-semibold); letter-spacing: -0.01em; }
.admin-login__card { width: 100%; max-width: 440px; padding: var(--kha-sp-40) var(--kha-sp-40) var(--kha-sp-32); border-radius: 20px; background: var(--kha-white); box-shadow: 0 8px 40px rgba(14, 0, 66, .08); }
.admin-login__head { margin-bottom: var(--kha-sp-24); }
.admin-login__step { margin: 0 0 6px; font-size: var(--kha-fs-14); font-weight: var(--kha-fw-semibold); color: var(--kha-text-secondary); }
.admin-login__title { margin: 0; font-size: var(--kha-fs-28, 1.75rem); font-weight: var(--kha-fw-bold); letter-spacing: -0.02em; color: var(--kha-text-heading); }
.admin-login__lead { margin: 10px 0 0; font-size: var(--kha-fs-15); line-height: 1.6; color: var(--kha-text-secondary); }
.admin-login__card form { gap: 18px; }
.admin-login__card .btn--block { margin-top: 8px; }
.admin-login__card .alert { margin-bottom: 18px; }
.admin-login__code { letter-spacing: .4em; font-size: var(--kha-fs-22); text-align: center; }
.admin-login__sub { margin: 20px 0 0; text-align: center; font-size: var(--kha-fs-15); }
.admin-login__foot { max-width: 440px; margin: 0; font-size: var(--kha-fs-14); line-height: 1.6; color: var(--kha-text-secondary); text-align: center; }
@media (max-width: 480px) { .admin-login { justify-content: flex-start; padding-top: var(--kha-sp-40); } .admin-login__card { padding: 28px 22px 24px; } }
.admin-inline-form { display: inline; margin: 0; }
.admin-footer { padding: var(--kha-sp-16) var(--kha-sp-32); color: var(--kha-text-secondary); }
.admin-popup { max-width: 720px; padding-block: var(--kha-sp-32); }
.admin-mobile { max-width: 767px; }
@media print { .pv-bar { display: none; } }

/* 사이드바 메뉴 2단계(2026-11-08): 그룹 버튼(아이콘·이름·화살표) → 2단계 화면(글자만, 들여쓰기).
   현재 항목은 배경 한 가지만 — 디자인 시스템 어두운 사이드바의 왼쪽 3px 띠(inset box-shadow)는 끈다(사용자 원칙: 컬러 띠 금지). */
.admin-nav .side-nav__list { gap: 2px; }
.admin-nav__head { width: 100%; border: 0; background: transparent; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.admin-nav__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.admin-nav__chev { margin-left: auto; --icon-size: 16px; transition: transform .15s ease; }
.admin-nav__head[aria-expanded="true"] .admin-nav__chev { transform: rotate(180deg); }
.admin-nav__group + .admin-nav__group, li + .admin-nav__group { margin-top: 2px; }
.admin-nav__sub { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px; padding: 0; list-style: none; }
.admin-nav__sub[hidden] { display: none; }
.admin-nav__link { height: 34px; padding-left: 38px; font-size: var(--kha-fs-14); font-weight: 400; }
.side-nav--dark.admin-nav .admin-nav__head { color: var(--kha-navy-100); }
.side-nav--dark.admin-nav .admin-nav__head:hover { background: rgba(255, 255, 255, 0.06); color: var(--kha-white); }
.side-nav--dark.admin-nav .admin-nav__head:focus-visible, .side-nav--dark.admin-nav .admin-nav__link:focus-visible { outline: 2px solid var(--kha-white); outline-offset: -2px; }
.side-nav--dark.admin-nav .admin-nav__link { color: var(--kha-navy-200); }
.side-nav--dark.admin-nav .side-nav__item[aria-current="page"] { background: rgba(255, 255, 255, 0.12); color: var(--kha-white); font-weight: 600; box-shadow: none; }
.side-nav--dark.admin-nav .side-nav__item[aria-current="page"] > [data-icon] { color: var(--kha-white); }
@media (prefers-reduced-motion: reduce) { .admin-nav__chev { transition: none; } }

/* 상단 바 경로(그룹 › 화면) */
.topbar__title { min-width: 0; flex: 1 1 auto; }
.topbar__page { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar__crumb { font-weight: 500; color: var(--kha-text-secondary); }
.topbar__sep { color: var(--kha-text-tertiary); font-weight: 400; }
@container kha (max-width: 599px) { .topbar__crumb, .topbar__sep, .topbar__date { display: none; } }

/* 처리할 일 한 줄 */
.todo-bar { display: flex; flex-wrap: wrap; gap: var(--kha-sp-8); margin-bottom: var(--kha-sp-24); }
.todo-bar .chip { min-height: 40px; }

/* 목록 위 필터 줄 */
.admin-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--kha-sp-12); margin-bottom: var(--kha-sp-16); }
.admin-filter .field { margin: 0; min-width: 140px; }
.admin-section { margin-bottom: var(--kha-sp-32); }
.admin-actions { display: flex; flex-wrap: wrap; gap: var(--kha-sp-8); margin: var(--kha-sp-16) 0; }

/* 휴대폰 KPI 가로 스크롤 */
.kpi-scroll { display: flex; gap: var(--kha-sp-8); overflow-x: auto; padding-bottom: var(--kha-sp-8); }
.kpi-scroll .kpi { min-width: 120px; }

/* 현장 출석 카드(767px 전용, 체크 버튼 56×56 — ACC-10) */
.attend-search { position: sticky; top: 0; z-index: 2; background: var(--kha-surface); padding: var(--kha-sp-8) 0; }
.attend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kha-sp-12); }
.attend-card { border: 1px solid var(--kha-border); border-radius: var(--kha-radius-md); padding: var(--kha-sp-12); display: grid; gap: var(--kha-sp-8); }
.attend-card__who { display: flex; justify-content: space-between; gap: var(--kha-sp-8); }
.attend-card__checks { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kha-sp-8); }
.attend-check { min-height: 56px; min-width: 56px; font-size: var(--kha-fs-17); border: 2px solid var(--kha-border-strong); border-radius: var(--kha-radius-md); background: var(--kha-surface); color: var(--kha-text); }
.attend-check[aria-pressed="true"] { border-color: var(--kha-success-border); background: var(--kha-success-bg); font-weight: var(--kha-fw-bold); }
.attend-check:focus-visible { outline: none; box-shadow: var(--kha-focus-ring); }

/* 오른쪽 수료증 패널 */
.cert-panel { display: grid; gap: var(--kha-sp-16); }
.cert-panel .card { margin: 0; }

/* 정정 사유 입력 상자 */
.audit-note { border-left: 4px solid var(--kha-border-strong); padding: var(--kha-sp-8) var(--kha-sp-12); background: var(--kha-neutral-bg); }

/* 역할 권한 체크 표 */
.check-grid td, .check-grid th { text-align: center; }
.check-grid td:first-child, .check-grid th:first-child { text-align: left; }

/* 줄바꿈 보존 글(문의·알림 본문) */
.admin-pre { white-space: pre-line; }

/* 1023px 이하 사이드바 서랍(검증 P2-B 수정 15, P3): 디자인 시스템은 이 폭에서 사이드바를 숨긴다 → 머리말 '메뉴' 버튼으로 연다 */
.admin-nav-toggle { display: none; min-height: 44px; }
@container kha (max-width: 1023px) {
  .admin-nav-toggle { display: inline-flex; align-items: center; gap: var(--kha-sp-4); }
  .app-shell > .side-nav.is-open { display: flex; position: fixed; inset: 0 auto 0 0; width: min(var(--kha-sidebar-w), 86vw); z-index: 50; overflow-y: auto; box-shadow: var(--kha-shadow-lg); }
}

/* ==========================================================================
   관리자 화면 정비(2026-11-09) — 상세 화면 공통 패턴: 머리(제목 + 상태 태그 + 오른쪽 동작) → 요약 카드 줄 → 바로가기 → 카드 단위 내용.
   사용자 원칙: 컬러 띠 금지, 색 최소(상태 태그만), 카드로 구역 구분, 여백.
   ========================================================================== */
/* 화면 머리: 제목 줄 오른쪽에 동작 버튼을 모은다(layout.tag actions 조각). 위험 동작은 btn--ghost/danger-ghost 작은 버튼 + 확인 대화상자 */
.page-head.admin-head { align-items: flex-start; }
.admin-head__main { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 320px; }
.admin-head__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; }
.admin-head__row .page-head__title { display: block; margin: 0; }
.admin-head__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.admin-head__actions .admin-head__sep { width: 1px; height: 24px; margin: 0 4px; background: var(--kha-border); }
@container kha (max-width: 767px) { .admin-head__actions { justify-content: flex-start; } }

/* 요약 카드 줄: 한 줄 4칸(좁으면 2×2), 낮은 높이 */
.admin-kpis { display: grid; grid-template-columns: repeat(var(--admin-kpi-cols, 4), minmax(0, 1fr)); gap: var(--kha-sp-12); }
.admin-kpis--5 { --admin-kpi-cols: 5; }
.admin-kpis .kpi { padding: 14px 18px; gap: 2px; --kpi-value-size: var(--kha-fs-24, 1.5rem); }
.admin-kpis .kpi__meta { font-size: var(--kha-fs-13); }
@container kha (max-width: 899px) { .admin-kpis, .admin-kpis--5 { --admin-kpi-cols: 2; } }

/* 카드 구역(제목 + 내용). 카드 사이 여백은 app-content gap */
.admin-card { display: flex; flex-direction: column; gap: var(--kha-sp-16); padding: var(--kha-sp-24); background: var(--kha-surface); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); min-width: 0; }
.admin-card__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.admin-card__title { margin: 0; font-size: var(--kha-fs-19, 1.1875rem); font-weight: var(--kha-fw-bold); color: var(--kha-text-heading); }
.admin-card__desc { margin: 0; font-size: var(--kha-fs-14); color: var(--kha-text-secondary); }
.admin-card > .table-wrap { border-radius: var(--kha-radius-md); }
.admin-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kha-block-gap); align-items: start; }
@container kha (max-width: 1099px) { .admin-cards { grid-template-columns: minmax(0, 1fr); } }
@container kha (max-width: 599px) { .admin-card { padding: var(--kha-sp-16); } }

/* 정의 목록: dt/dd를 바로 넣는 2열(라벨 열 고정 폭) + 행 구분선. 빈 값은 '—' */
.admin-dl { display: grid; grid-template-columns: var(--admin-dl-term, 148px) minmax(0, 1fr); margin: 0; }
.admin-dl > dt, .admin-dl > dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--kha-border); }
.admin-dl > dt { padding-right: var(--kha-sp-16); font-size: var(--kha-fs-15); font-weight: 600; color: var(--kha-text-secondary); }
.admin-dl > dd { color: var(--kha-text-strong); overflow-wrap: anywhere; }
.admin-dl > dt:last-of-type, .admin-dl > dd:last-of-type { border-bottom: 0; }
.admin-dl > dd:empty::before { content: "—"; color: var(--kha-text-tertiary); }
.admin-dl .admin-dl__sub { margin-left: 6px; font-size: var(--kha-fs-14); color: var(--kha-text-secondary); }
.admin-dl .admin-dl__none { color: var(--kha-text-tertiary); }
@container kha (max-width: 599px) {
  .admin-dl { grid-template-columns: minmax(0, 1fr); }
  .admin-dl > dt { padding: 12px 0 2px; border-bottom: 0; font-size: var(--kha-fs-14); }
  .admin-dl > dd { padding: 0 0 12px; }
}

/* 바로가기(탭 아님): 다른 화면 이동(→)과 출력(인쇄·새 창)을 구분해 보여 준다. 선택 표시 없음 */
.admin-jump { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--kha-sp-8); margin: 0; padding: 0; list-style: none; }
.admin-jump__link { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 14px; border: 1px solid var(--kha-border); border-radius: var(--kha-radius-md); background: var(--kha-surface); color: var(--kha-text-strong); text-decoration: none; --icon-size: 20px; }
.admin-jump__link:hover { border-color: var(--kha-border-strong); background: var(--kha-surface-subtle); text-decoration: none; color: var(--kha-text-strong); }
.admin-jump__link:focus-visible { outline: none; box-shadow: var(--kha-focus-ring); }
.admin-jump__link > [data-icon]:first-child { flex: none; color: var(--kha-text-secondary); }
.admin-jump__text { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.35; }
.admin-jump__name { font-weight: 600; }
.admin-jump__meta { font-size: var(--kha-fs-13); color: var(--kha-text-secondary); }
.admin-jump__end { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: var(--kha-fs-13); color: var(--kha-text-tertiary); --icon-size: 16px; }
.admin-jump__group + .admin-jump__group { margin-top: var(--kha-sp-12); }
.admin-jump__label { margin: 0 0 6px; font-size: var(--kha-fs-13); font-weight: 600; color: var(--kha-text-secondary); }

/* 카드 안 입력 격자(2~3열) + 오른쪽 아래 버튼 */
.admin-form-grid { display: grid; grid-template-columns: repeat(var(--admin-form-cols, 3), minmax(0, 1fr)); gap: var(--kha-sp-16); }
.admin-form-grid .field { margin: 0; min-width: 0; }
.admin-form-grid .field--wide { grid-column: span 2; }
.admin-form-grid .field--full, .admin-form-grid > .alert { grid-column: 1 / -1; }
.admin-form-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--kha-sp-8); }
@container kha (max-width: 899px) { .admin-form-grid { --admin-form-cols: 2; } }
@container kha (max-width: 599px) { .admin-form-grid { --admin-form-cols: 1; } .admin-form-grid .field--wide { grid-column: auto; } }

/* 오류 상자는 내용이 있을 때만(디자인 시스템 .alert의 display가 hidden 속성을 이김) */
.alert[hidden], [data-msg][hidden] { display: none !important; }

/* 붙어 나오던 날짜·시간 구분 */
.admin-when { white-space: nowrap; }
.admin-when__time { margin-left: 0.35em; }

/* 링크 칩의 현재 표시(aria-current) — 선택 칩과 같은 모양 */
.chip[aria-current="true"], .chip[aria-current="page"] { border-color: var(--kha-primary); background: var(--kha-primary-subtle); color: var(--kha-primary-strong); font-weight: 600; }

/* 사이드바: 현재 항목만 배경, 호버는 글자만 밝게(배경 없음) — 두 항목이 동시에 강조돼 보이던 문제(2026-11-09) */
.side-nav--dark.admin-nav .admin-nav__link:hover, .side-nav--dark.admin-nav a.admin-nav__head:hover { background: transparent; color: var(--kha-white); text-decoration: underline; text-underline-offset: 3px; }
.side-nav--dark.admin-nav .admin-nav__link[aria-current="page"]:hover { background: rgba(255, 255, 255, 0.12); text-decoration: none; }

/* 휴대폰 폭 표: 가로 스크롤 상자, 첫 열 고정 */
.app-content > *, .admin-card > * { min-width: 0; max-width: 100%; }
/* position: relative — 표 안 .sr-only(절대 위치) 글자가 가로 스크롤 상자 밖 기준으로 잡혀 화면 전체가 넓어지던 원인(2026-11-09 확인) */
.table-wrap { position: relative; -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { outline: none; box-shadow: var(--kha-focus-ring); }
@container kha (max-width: 767px) {
  .table-wrap > .table { min-width: max-content; }
  .table-wrap > .table :where(th, td):first-child { position: sticky; left: 0; z-index: 1; background: var(--kha-surface); box-shadow: 1px 0 0 var(--kha-border); }
  .table-wrap > .table thead :where(th):first-child { background: var(--kha-surface-subtle); }
}

/* 목록 위 동작 줄을 머리로 옮긴 뒤 남는 보조 링크 줄 */
.admin-links { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--kha-fs-15); }
.admin-form-grid + .admin-form-foot { margin-top: var(--kha-sp-16); }
.admin-card > form { display: flex; flex-direction: column; gap: var(--kha-sp-16); margin: 0; }
.admin-card > form > .admin-form-foot { margin-top: 0; }

/* 목록(.list)의 굵은 위 선(2px 제목색)은 관리자 카드 안에서 끈다 — 컬러 띠처럼 보임 */
.app-content .list { border-top: 1px solid var(--kha-border); }
.admin-card .list { border-top: 0; }
.admin-card .list__item { padding: 12px 0; flex-wrap: wrap; gap: 4px 12px; }
.admin-card .list__item:last-child { border-bottom: 0; }
/* 위험 동작(머리 오른쪽): 평소에는 회색 글자, 올리면 빨강 — 덜 눈에 띄게 */
.admin-head__actions .btn--danger-ghost { color: var(--kha-text-secondary); }
.admin-head__actions .btn--danger-ghost:hover, .admin-head__actions .btn--danger-ghost:focus-visible { color: var(--kha-danger-text); }

/* 등록·수정 폼(.form-grid)을 카드로: 흰 바탕·테두리·여백, 오류 상자·안내 문단·버튼 줄은 한 줄 전체, 버튼은 오른쪽 아래 */
.app-content > form.form-grid, .app-content > .admin-section > form.form-grid { padding: var(--kha-sp-32); background: var(--kha-surface); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); max-width: 1080px; }
.form-grid > .alert, .form-grid > p, .form-grid > .btn-row, .form-grid > fieldset, .form-grid > .field--full, .form-grid > .table-wrap, .form-grid > h2, .form-grid > h3 { grid-column: 1 / -1; }
.form-grid > .btn-row { justify-content: flex-end; padding-top: var(--kha-sp-16); border-top: 1px solid var(--kha-border); }
.form-grid > .field:has(> .check:only-child), .form-grid > .field:has(> label.check) { align-self: end; min-height: var(--kha-control-h-md); display: flex; flex-direction: row; align-items: center; justify-content: flex-start; }
.form-grid fieldset { margin: 0; padding: var(--kha-sp-12) var(--kha-sp-16); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-md); min-width: 0; }
.form-grid fieldset legend { padding: 0 6px; font-weight: 600; }
@container kha (max-width: 599px) { .app-content > form.form-grid, .app-content > .admin-section > form.form-grid { padding: var(--kha-sp-16); } }

/* 구역 제목 여백 */
.app-content > h2, .admin-section > h2, .app-content > .admin-section > .h3 { margin: var(--kha-sp-8) 0 var(--kha-sp-12); }
.admin-section { margin-bottom: 0; }
.admin-filter > .alert { flex: 1 1 100%; }
.admin-filter .field { flex: 0 1 auto; max-width: 100%; }

/* 표 칸: 번호·코드는 줄바꿈 없이, 긴 문안은 한 줄 말줄임(전체는 상세에서) */
.table td.mono, .table td.nowrap, .table th { white-space: nowrap; }
.table td.truncate { max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 합친 화면 탭(2026-11-09) — 제목 줄 바로 아래 한 줄, 옛 화면 URL로 이동(현재 탭 aria-current) */
.admin-tabs { margin: calc(var(--kha-sp-8) * -1) 0 var(--kha-sp-8); }
.admin-tabs .tab:focus-visible { outline: none; box-shadow: var(--kha-focus-ring); }

/* ==========================================================================
   화면 틀 통일(2026-11-09 관리자 피드백 17): 제목 줄 → 검색 카드(.admin-search) → 표 → 빈 상태(.admin-empty)
   ========================================================================== */
/* 목록 위 검색·필터를 흰 카드 한 장 안에(칸은 왼쪽부터, 버튼은 오른쪽 끝) */
.admin-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--kha-sp-12) var(--kha-sp-16); margin: 0; padding: var(--kha-sp-16) var(--kha-sp-20, 20px); background: var(--kha-surface); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); }
.admin-search .field { margin: 0; flex: 0 1 auto; min-width: 140px; max-width: 100%; }
.admin-search .field--grow { flex: 1 1 220px; }
.admin-search > .chip-group { flex: 1 1 100%; }
.admin-search__btns { display: flex; gap: var(--kha-sp-8); margin-left: auto; }
.admin-search > .alert { flex: 1 1 100%; }
@container kha (max-width: 599px) { .admin-search { padding: var(--kha-sp-12); } .admin-search .field { flex: 1 1 100%; } .admin-search__btns { margin-left: 0; } }

/* 표 밖 빈 상태 안내(카드·목록이 비었을 때) — 회색 글자, 가운데 정렬 없이 왼쪽 */
.admin-empty { margin: 0; padding: var(--kha-sp-24); border: 1px dashed var(--kha-border-strong); border-radius: var(--kha-radius-lg); background: var(--kha-surface); color: var(--kha-text-secondary); }
.admin-card .admin-empty { padding: var(--kha-sp-16); border: 0; background: var(--kha-surface-subtle); border-radius: var(--kha-radius-md); }
.table .is-empty { padding-block: var(--kha-sp-24); color: var(--kha-text-secondary); }

/* 파일 선택 칸: 브라우저 기본 모양 대신 입력칸 모양 + '파일 선택' 버튼을 회색 작은 버튼으로 */
.input.admin-file { height: auto; min-height: var(--kha-control-h-md); padding: 6px 8px; cursor: pointer; }
.input.admin-file::file-selector-button { margin-right: 12px; padding: 6px 14px; border: 1px solid var(--kha-border-strong); border-radius: var(--kha-radius-sm, 6px); background: var(--kha-surface-subtle); color: var(--kha-text-strong); font: inherit; font-weight: 600; cursor: pointer; }
.input.admin-file:hover::file-selector-button { background: var(--kha-gray-100); }

/* 알림 문안에 넣을 수 있는 항목(접는 표) */
.admin-vars { padding: var(--kha-sp-12) var(--kha-sp-16); background: var(--kha-surface); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); }
.admin-vars > summary { cursor: pointer; font-weight: 600; color: var(--kha-text-strong); }
.admin-vars[open] > summary { margin-bottom: var(--kha-sp-12); }
.admin-vars .table-wrap { max-width: 560px; }

/* 팝업 미리보기(사용자 사이트 팝업 모양 — 회색 바탕 위 흰 상자, 버튼은 모양만) */
.admin-popup-preview { display: flex; justify-content: center; padding: var(--kha-sp-24) var(--kha-sp-16); background: var(--kha-surface-subtle); border-radius: var(--kha-radius-md); }
.admin-popup-preview__box { display: flex; flex-direction: column; gap: var(--kha-sp-12); width: 100%; max-width: 420px; padding: var(--kha-sp-24); background: var(--kha-surface); border: 1px solid var(--kha-border); border-radius: var(--kha-radius-lg); box-shadow: var(--kha-shadow-lg); }
.admin-popup-preview__title { margin: 0; font-size: var(--kha-fs-19, 1.1875rem); font-weight: var(--kha-fw-bold); color: var(--kha-text-heading); }
.admin-popup-preview__body { color: var(--kha-text); overflow-wrap: anywhere; }
.admin-popup-preview__body > :first-child { margin-top: 0; }
.admin-popup-preview__body > :last-child { margin-bottom: 0; }
.admin-popup-preview__body img { max-width: 100%; height: auto; }
.admin-popup-preview__foot { display: flex; justify-content: space-between; gap: var(--kha-sp-8); padding-top: var(--kha-sp-12); border-top: 1px solid var(--kha-border); pointer-events: none; }
/* 날짜·시각 입력이 '오후 1…'로 잘리지 않게(2026-11-09 캡처) */
.input[type="datetime-local"] { min-width: 228px; }

/* 메인 팝업 편집 — 형식(글/그림)에 맞는 칸만(2026-11-09). :has 미지원 브라우저는 두 칸 다 보임(서버가 형식대로 처리) */
.admin-popup-type { margin: 0; padding: 0; border: 0; min-width: 0; }
.admin-popup-type > legend { padding: 0; margin-bottom: 8px; }
.admin-popup-type__opts { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-start; }
.admin-popup-form:has(input[name="popupType"][value="TEXT"]:checked) .admin-popup-image { display: none; }
.admin-popup-form:has(input[name="popupType"][value="IMAGE"]:checked) .admin-popup-text { display: none; }
.admin-popup-thumb { display: flex; align-items: flex-end; gap: 8px; margin: 8px 0 0; }
.admin-popup-thumb img { max-width: 160px; max-height: 120px; border: 1px solid var(--kha-border); border-radius: var(--kha-radius-sm, 4px); object-fit: contain; background: var(--kha-surface-subtle); }
.admin-popup-preview__body--img { max-height: 360px; overflow: auto; }
.admin-popup-preview__body--img p { margin: 0; }
.admin-popup-preview__body--img img { display: block; width: 100%; }

/* 좁은 화면에서도 시연 사이트 전환과 로그아웃 버튼을 한 줄 안에서 사용할 수 있게 한다. */
@media (max-width: 380px) {
  .topbar { padding-inline: 10px; gap: 6px; }
  .topbar__actions { gap: 2px; }
  .topbar .btn--sm { padding-inline: 7px; }
  .todo-bar .chip { max-width: 100%; min-width: 0; height: auto; padding-block: 6px; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; }
}