@charset "UTF-8";
/* =====================================================================
 *  ildamshop 관리자 스타일
 *
 *  ⚠️ 0056(나솔사계) 관리자 룩앤필을 이식했다 — 운영자가 두 프로젝트를 오가며 쓰기 때문에
 *     색·간격·사이드바 동작을 맞춰두면 학습 비용이 줄어든다.
 *  ⚠️ Bootstrap 을 걷어내고 필요한 것만 직접 작성했다(아이콘 폰트만 CDN).
 *     운영자 화면은 매일 쓰는 도구라 **가독성과 밀도**를 우선한다.
 * ===================================================================== */

:root {
  --adm-primary: #FF5A00;
  --adm-primary-dark: #f16519;
  --adm-primary-bg: #fdf0e9;
  --adm-line: #e8eaed;
  --adm-text: #333;
  --adm-muted: #6b7280;
  --adm-bg: #f5f6fa;
  --adm-danger: #e03131;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Pretendard', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px; background: var(--adm-bg); color: var(--adm-text);
}
input, textarea, select, button { font-family: 'Pretendard', sans-serif; }
a { color: var(--adm-primary); text-decoration: none; }
a:hover { color: var(--adm-primary-dark); }
code { background: #eef1f5; padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ============================================================
   레이아웃
   ============================================================ */
.adm-wrap { display: flex; }
.adm-main { flex: 1; min-width: 0; }
.adm-content { padding: 24px; }
.adm-title { margin: 0 0 18px; font-size: 22px; font-weight: 700; color: #1a1a2e; }
.adm-hr { margin: 24px 0; border: 0; border-top: 1px solid var(--adm-line); }

/* ============================================================
   사이드바
   ============================================================ */
.sidebar {
  width: 240px; flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: #fff;
}
.sidebar-logo {
  height: 60px; display: flex; align-items: center;
  padding: 0 24px; font-size: 18px; font-weight: 700; color: #1a1a2e;
  border-bottom: 1px solid var(--adm-line);
}
.sidebar-nav {
  list-style: none; padding: 12px 0; margin: 0;
  border-right: 1px solid var(--adm-line);
  min-height: calc(100vh - 60px);
}

/* 1뎁스 */
.sidebar-item > a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 24px; color: var(--adm-muted); font-size: 15px;
  border-left: 3px solid transparent; transition: all .15s ease;
}
.sidebar-item > a:hover { color: var(--adm-primary); background: var(--adm-primary-bg); }
.sidebar-item > a i:first-child { font-size: 18px; width: 20px; text-align: center; }
.sidebar-item.active > a {
  color: var(--adm-primary); background: var(--adm-primary-bg);
  border-left-color: var(--adm-primary); font-weight: 600;
}

/* 2뎁스 아코디언 */
.sidebar-arrow { margin-left: auto; font-size: 12px; transition: transform .2s ease; }
.sidebar-parent.open > a .sidebar-arrow { transform: rotate(180deg); }
.sidebar-parent.open > a {
  color: var(--adm-primary); background: var(--adm-primary-bg);
  border-left-color: var(--adm-primary); font-weight: 600;
}
.sidebar-sub {
  list-style: none; padding: 0; margin: 0;
  max-height: 0; overflow: hidden; transition: max-height .25s ease;
  background: #fafbfd;
}
.sidebar-parent.open > .sidebar-sub { max-height: 500px; }
.sidebar-sub-item a {
  display: block; padding: 9px 24px 9px 52px;
  color: #868e96; font-size: 15px;
  border-left: 3px solid transparent; transition: all .12s ease;
}
.sidebar-sub-item a:hover { color: var(--adm-primary); background: var(--adm-primary-bg); }
.sidebar-sub-item.active a {
  color: var(--adm-primary); font-weight: 600;
  background: #ffe7db; border-left-color: var(--adm-primary);
}

/* ============================================================
   상단 헤더
   ============================================================ */
.adm-navbar {
  height: 60px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 24px; background: #fff; border-bottom: 1px solid var(--adm-line);
  position: sticky; top: 0; z-index: 50;
}
.adm-navbar-right { display: flex; align-items: center; gap: 12px; }
.adm-user { color: var(--adm-muted); font-size: 13px; }

/* ============================================================
   카드 / 폼 박스
   ============================================================ */
.adm-form, .adm-card {
  background: #fff; border-radius: 12px; box-shadow: 0 1px 10px rgba(0,0,0,.06);
  padding: 20px 22px; margin-bottom: 20px;
}
.adm-form { max-width: 940px; }

/* 섹션 제목 — 0056 의 card-header 느낌으로 띠를 두른다.
   ⚠️ <legend> 는 fieldset 테두리 **위에 얹혀** 선을 끊어먹는 요소다(브라우저 기본 동작).
      그래서 fieldset 의 border 를 없애고, legend 를 float 로 일반 블록처럼 만들어 띠로 쓴다.
      (display:block 만으로는 legend 의 특수 배치가 안 풀린다) */
.adm-fieldset { border: 0; margin: 0 0 26px; padding: 0; }
.adm-fieldset > legend {
  float: left; width: 100%; box-sizing: border-box;
  margin: 0 0 16px; padding: 11px 15px; border-radius: 8px;
  background: var(--adm-primary-bg); color: #1a1a2e;
  font-size: 14px; font-weight: 700;
}
.adm-fieldset > legend + * { clear: both; }
.adm-fieldset::after { content: ''; display: block; clear: both; }

/* ============================================================
   알림 / 안내
   ============================================================ */
.adm-flash { margin: 0 0 16px; padding: 12px 16px; border-radius: 10px; font-size: 13px; }
.adm-flash-ok  { background: #ebfbee; color: #2b8a3e; border: 1px solid #b2f2bb; }
.adm-flash-err { background: #fff0f0; color: var(--adm-danger); border: 1px solid #ffc9c9; }
.adm-note {
  margin: 0 0 16px; padding: 12px 16px; border-radius: 10px;
  background: #fffbe6; border: 1px solid #ffe58f; color: #8a6d1b;
  font-size: 13px; line-height: 1.7;
}
.adm-help { margin: 6px 0 0; font-size: 12px; color: var(--adm-muted); line-height: 1.7; }
/* 입력칸 글자수 카운터 (`0/30`) — 인풋 **바로 아래 오른쪽**.
   ⚠️ 마크업은 `.js-len` 입력칸 바로 뒤에 둔다 — JS 가 `nextElementSibling` 로 찾는다.
   ⚠️ `.adm-help` 와 같이 쓰면 카운터가 위, 안내문이 아래다. */
.adm-len { margin: 4px 0 0; text-align: right; font-size: 12px; color: var(--adm-muted); }
.adm-len b { font-weight: 600; color: var(--adm-primary); }
.adm-len.is-full b { color: #c92a2a; }   /* 가득 찼거나 넘음 */

/* ============================================================
   툴바 / 검색
   ============================================================ */
.adm-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.adm-toolbar > .adm-btn-primary { margin-left: auto; }
.adm-search {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  background: #fff; padding: 14px 16px; border-radius: 12px; box-shadow: 0 1px 10px rgba(0,0,0,.06);
}
.adm-count { margin: 0 0 10px; color: var(--adm-muted); font-size: 13px; }
.adm-count b { color: var(--adm-primary); }

/* ============================================================
   버튼
   ============================================================ */
.adm-btn, .btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 14px; border: 1px solid #d5d8dd; border-radius: 8px;
  background: #fff; color: #495057; font-size: 13px; cursor: pointer; line-height: 1.3;
  transition: all .12s ease;
}
.adm-btn:hover, .btn:hover { background: #f8f9fa; color: var(--adm-text); }
.adm-btn-primary, .btn-primary {
  background: var(--adm-primary); border-color: var(--adm-primary); color: #fff;
}
.adm-btn-primary:hover, .btn-primary:hover {
  background: var(--adm-primary-dark); border-color: var(--adm-primary-dark); color: #fff;
}
.adm-btn-danger { color: var(--adm-danger); border-color: #ffc9c9; }
.adm-btn-danger:hover { background: #fff0f0; color: var(--adm-danger); }
/* ⭐ 되살리는 동작 — 초록 [2026-08-12 사용자 *"정지해제 버튼은 색상도 달랐으면 좋겠어"*]
   회원상세에서 `안내 사유 저장`(primary 주황)과 `정지 해제`가 **같은 색**이라 구분이 안 됐다.
   색으로 성격을 나눈다: **주황=저장/수정 · 초록=되살림(해제) · 빨강=위험(정지·탈퇴·삭제)**
   ⚠️ `.badge-green` 과 같은 계열 색을 쓴다 — 목록의 `정상` 뱃지와 의미가 이어져야 한다. */
.adm-btn-success {
  background: #2b8a3e; border-color: #2b8a3e; color: #fff;
}
.adm-btn-success:hover { background: #237032; border-color: #237032; color: #fff; }
.btn-outline { color: var(--adm-primary); border-color: #c5cef0; }
.btn-outline:hover { background: var(--adm-primary-bg); color: var(--adm-primary); }
.btn-sm { padding: 6px 11px; font-size: 12px; border-radius: 6px; }

/* ============================================================
   테이블
   ============================================================ */
.adm-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border-radius: 12px; overflow: hidden; box-shadow: 0 1px 10px rgba(0,0,0,.06);
}
/* ⭐ 목록 표는 **가운데 정렬이 기본**이다 [2026-08-06 사용자 요청].
   숫자·상태·날짜가 대부분이라 가운데가 훑기 좋다.
   ⚠️ 제목·상품명처럼 **길어서 줄바꿈되는 칸만** `.adm-cell-left` 로 왼쪽 정렬한다.
      가운데 정렬된 긴 문장은 줄마다 시작 위치가 달라져서 읽기 나쁘다. */
.adm-table th, .adm-table td { padding: 8px 5px; text-align: center; vertical-align: middle; }
.adm-table td.adm-cell-left, .adm-table th.adm-cell-left { text-align: left; }
/* 액션 버튼 칸 — 기본 가운데 정렬(위 190줄)을 그대로 쓴다. 아래 .adm-row-actions 주석 참고 */
.adm-table th {
  background: #fafbfc; font-size: 13px; color: var(--adm-muted); font-weight: 600;
  white-space: nowrap; border-bottom: 1px solid var(--adm-line); text-align: center;
}
.adm-table td { border-bottom: 1px solid #f0f0f0; font-size: 14px; }
.adm-table tbody tr:last-child td { border-bottom: 0; }
.adm-table tbody tr:hover { background: #f8f9ff; }
.adm-empty { text-align: center; color: var(--adm-muted); padding: 48px 0 !important; }
/* ⭐⭐ 행 액션 버튼([수정][삭제]) — **`display:flex` 를 쓰지 않는다**
   [2026-08-12 사용자 신고 "상품 리스트인데 왜 버튼쪽만 높이가 다르지?" · "대부분의 페이지가 다 그런거같아"]

   원래 `.adm-row-actions { display:flex; gap:5px }` 였는데, 이 클래스가 붙는 요소는 **`<td>`** 다.
   `td` 에 `display:flex` 를 주면 그 칸은 **더 이상 테이블 셀(`table-cell`)이 아니다.**
   → 행의 셀 레이아웃에서 빠져나와서
     · 행 높이를 다른 칸과 **같이 타지 않고**
     · `vertical-align: middle` 이 **무효**가 되고
     · 칸의 아래 테두리(`border-bottom`)가 다른 칸과 **어긋난다**
   그래서 버튼 칸만 위아래로 밀려 보였다. 모든 목록이 이 클래스를 쓰니 **전 페이지**에서 나타났다.

   ⚠️ 셀은 `table-cell` 로 두고, 가운데 정렬은 `.adm-table td` 의 `text-align:center`(190줄)에 맡긴다.
      `.adm-btn` 이 `inline-flex`(=인라인 레벨)라 그것만으로 가운데에 모인다.
   ⚠️ 간격은 `gap` 대신 **인접 형제 마진**으로 준다 — `gap` 은 flex/grid 전용이라 여기서 안 먹는다.
   ⚠️ 버튼이 1개뿐인 목록도 있어서 `+ *` 로 걸어야 한다(첫 버튼 앞에 여백이 붙으면 안 맞는다).
   ⚠️ `nowrap` 은 유지 — 좁은 칸에서 [수정]/[삭제]가 위아래로 갈라지면 행 높이가 튄다.
      대신 §794 주석대로 **이 칸은 폭을 넉넉히** 잡아야 한다. */
.adm-row-actions { white-space: nowrap; }
.adm-row-actions > * + * { margin-left: 5px; }
.adm-ellipsis { max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-thumb-cell { width: 68px; }
.adm-thumb-cell img { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--adm-line); }
.adm-noimg {
  display: inline-block; width: 48px; height: 48px; line-height: 48px; text-align: center;
  background: #f1f3f5; border-radius: 6px; color: #adb5bd;
}
/* 폼 안에 끼워 넣는 표(옵션 편집 등) — 카드 그림자 없이 */
.adm-table-inline { box-shadow: none; border: 1px solid var(--adm-line); margin-bottom: 10px; }
/* ⭐ 옵션 편집표 입력칸 — 다른 폼 입력칸과 **같은 모양**으로 맞춘다 [2026-09-02 사용자]
   예전엔 `width:100%` 하나뿐이었다. 아래 §폼 블록이 "칸이 좁아 **별도 규칙으로 산다**"며
   `:not(.adm-table-inline)` 로 제외해 뒀는데 **정작 그 별도 규칙이 없었다** →
   상품등록 폼에서 이 표만 브라우저 기본 인풋(각진 테두리·다른 높이·다른 글자크기)으로 떠 있었다.
   ⚠️ 테두리·라운드·글자크기·포커스링은 `.adm-field` 입력칸과 **같은 값**을 쓴다.
      값을 따로 정하면 또 어긋난다 — 저기를 고치면 여기도 같이 고칠 것.
   ⚠️ 높이·좌우여백만 한 단계 줄인다(39px → 34px). 옵션은 행이 여러 줄이라 밀도가 필요하다.
   ⚠️ 체크박스·라디오는 **제외**한다 — 폭 100% 와 테두리가 덧씌워지면 배치가 깨진다
      (그 둘은 §체크박스 블록이 18px 로 따로 그린다). */
.adm-table-inline input:not([type=checkbox]):not([type=radio]),
.adm-table-inline select {
  width: 100%; height: 34px;
  padding: 0 10px; border: 1px solid #d5d8dd; border-radius: 8px;
  font-size: 13px; background: #fff; color: var(--adm-text);
}
.adm-table-inline input:not([type=checkbox]):not([type=radio]):focus,
.adm-table-inline select:focus {
  outline: none; border-color: var(--adm-primary); box-shadow: 0 0 0 3px rgba(59,91,219,.12);
}
.adm-table-inline input[disabled], .adm-table-inline select[disabled] { background: #f1f3f5; color: #868e96; }
.adm-table-inline tr.is-del { opacity: .45; text-decoration: line-through; }
/* 상세 화면의 라벨-값 표 */
.adm-table th.adm-th-label, .adm-form .adm-table th { width: 140px; background: #fafbfc; }
/* ⭐ **상세·폼 화면의 표는 왼쪽 정렬** [2026-08-10 사용자 요청].
   목록(§ 위 190줄)과 반대다 — 상세는 "라벨 : 값" 을 위아래로 훑어 읽는 표라
   가운데 정렬하면 값의 시작 위치가 줄마다 달라져서 읽기 나쁘고, 입력칸이 들어가면 더 심하다.
   ⚠️ `.adm-form` 안에만 건다. 목록 표까지 왼쪽으로 가면 안 된다. */
.adm-form .adm-table th, .adm-form .adm-table td { text-align: left; }
/* 값이 빈 칸(주문 없음 등)은 그대로 가운데 유지 */
.adm-form .adm-table td.adm-empty { text-align: center !important; }

/* ============================================================
   뱃지 (아웃라인)
   ============================================================ */
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 12px;
  font-size: 12px; font-weight: 500; vertical-align: middle;
}
.badge-blue,   .badge-outline-blue   { background: #edf2ff; color: #3b5bdb; border: 1px solid #bac8ff; }
.badge-green,  .badge-outline-green  { background: #ebfbee; color: #2b8a3e; border: 1px solid #b2f2bb; }
.badge-red,    .badge-outline-red    { background: #fff0f0; color: #e03131; border: 1px solid #ffc9c9; }
.badge-orange, .badge-outline-orange { background: #fff4e6; color: #e8590c; border: 1px solid #ffd8a8; }
.badge-gray,   .badge-outline-gray   { background: #f1f3f5; color: #868e96; border: 1px solid #dee2e6; }
.badge-purple, .badge-outline-purple { background: #f3f0ff; color: #7048e8; border: 1px solid #d0bfff; }

/* ============================================================
   ⭐ 일괄처리 액션바 — 표 **위**에 붙는 처리 바 [2026-08-12 사용자]
      지금은 주문관리의 무통장 일괄 입금확인이 쓴다.

      *"버튼이 처리한다라는 느낌의 명칭도 아니고 (…) 문구랑 같은 선에 있는데 뭔가 이쁘지 않아!"*
      → 안내문과 버튼을 **한 줄에 나란히 두지 않는다.** 왼쪽=제목+안내, 오른쪽=건수+처리버튼.

   ⚠️ `sticky` 의 `top` 은 상단바 높이(`.adm-navbar { height: 60px }`)와 **같아야** 한다.
      상단바를 고치면 여기도 같이 고칠 것 — 안 맞으면 버튼이 상단바에 가려진다.
   ⚠️ `z-index` 는 상단바(50)보다 **낮게**(40) 둔다. 높이면 스크롤 시 이 바가 상단바를 덮는다.
   ⚠️ 배경을 반드시 불투명하게 준다 — sticky 로 표 위를 지나가므로 투명하면 행이 비쳐 보인다.
   ============================================================ */
.adm-bulkbar {
  position: sticky; top: 60px; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px; padding: 14px 18px;
  background: #fff; border: 1px solid var(--adm-line); border-left: 4px solid var(--adm-primary);
  border-radius: 10px; box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.adm-bulkbar-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.adm-bulkbar-title { font-size: 15px; font-weight: 700; color: #1a1a2e; }
.adm-bulkbar-title i { color: var(--adm-primary); margin-right: 4px; }
.adm-bulkbar-note { font-size: 12px; color: var(--adm-muted); line-height: 1.6; }
.adm-bulkbar-note b { color: var(--adm-danger); font-weight: 600; }

.adm-bulkbar-act { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.adm-bulkbar-cnt { font-size: 13px; color: var(--adm-text); white-space: nowrap; }
.adm-bulkbar-cnt b { color: var(--adm-primary); font-size: 16px; font-weight: 700; }
/* 0건 — 흐리게. 버튼이 왜 안 눌리는지 눈으로 알 수 있다 */
.adm-bulkbar-cnt.is-zero, .adm-bulkbar-cnt.is-zero b { color: #b9bec5; }

/* 처리 버튼 — 목록의 [수정]/[삭제] 보다 **한 단계 크게**. "지금 실행하는 동작"이라는 신호다 */
.adm-bulkbar-btn { padding: 11px 20px; font-size: 14px; font-weight: 600; border-radius: 9px; }
.adm-bulkbar-btn i { font-size: 16px; }
/* ⚠️ `disabled` 상태를 확실히 구분한다 — 색만 옅게 하면 눌리는 줄 알고 계속 클릭한다 */
.adm-bulkbar-btn:disabled {
  background: #e9ecef; border-color: #e9ecef; color: #adb5bd; cursor: not-allowed; box-shadow: none;
}
.adm-bulkbar-btn:disabled:hover { background: #e9ecef; color: #adb5bd; }

/* ⭐ 값 + 뱃지를 **세로로 쌓는 칸** — 목록 공용 [2026-08-12 사용자]
   *"주문자이름 옆에 비회원 뱃지를 주문자이름 밑으로 내려줘"* → *"회원관리 아이디쪽도 뱃지가 아래로!"*

   쓰는 곳: 주문목록 **주문자**(이름 + 비회원/아이디) · 회원목록 **아이디**(아이디 + 가입경로 뱃지)
   ⚠️ 뱃지를 값 **옆**에 두면 값이 길 때 줄이 접혀 **행 높이가 제각각**이 된다. 그래서 아래로 내린다.
   ⚠️ 이름을 `.adm-orderer` 로 두지 않았다 — **주문자 전용처럼 보이면** 회원목록에서 또 다른
      클래스를 만들게 되고, 두 목록의 모양이 조용히 갈린다. 쓰는 곳이 늘면 위 목록에 한 줄 추가할 것. */
.adm-cell-stack .adm-cell-stack-main { display: block; margin-bottom: 4px; }
.adm-cell-stack .badge, .adm-cell-stack .dash-sub { display: inline-block; }

/* 상세·폼의 **읽기전용 값** — 입력칸 대신 값만 보여줄 때 [2026-08-12] */
.adm-readonly-val {
  margin: 0; padding: 9px 12px; border-radius: 8px;
  background: #f8f9fa; border: 1px solid var(--adm-line);
  font-size: 13px; color: var(--adm-text); line-height: 1.6; word-break: break-word;
}
.adm-readonly-val em { color: var(--adm-muted); font-style: normal; }

/* ⭐ **직전 처리 요약** — 입력칸 위에서 "지난 기록"을 알려주는 박스 [2026-08-12 사용자]
   *"처리메모가 내부용인데 왜 최고관리자인데 안보여주는거야?"*
   메모를 숨긴 게 아니라 **찾는 자리에 없었다.** 입력칸 바로 위에 직전 기록을 붙여
   스크롤할 이유를 없앤다.
   ⚠️ 입력칸과 **시각적으로 확실히 구분**해야 한다 — 안 그러면 이것도 입력칸으로 읽는다.
      그래서 회색 배경 + 왼쪽 굵은 띠를 쓴다. */
.adm-lastact {
  margin: 0 0 20px; padding: 12px 14px; border-radius: 8px;
  background: #f8f9fa; border: 1px solid var(--adm-line); border-left: 4px solid #adb5bd;
  font-size: 13px; line-height: 1.8; color: var(--adm-text);
}
.adm-lastact > b { color: #1a1a2e; }
.adm-lastact-act {
  margin-left: 6px; padding: 2px 8px; border-radius: 10px;
  background: #fff; border: 1px solid var(--adm-line); font-size: 12px; font-weight: 600;
}
.adm-lastact-meta { margin-left: 6px; font-size: 12px; color: var(--adm-muted); }
.adm-lastact-memo b { color: var(--adm-primary); }
/* [처리 이력 보기] 앵커 — 안내문과 붙지 않게 살짝 띄운다 */
.adm-lastact-more { margin-top: 8px; background: #fff; }

/* ⭐ `fieldset` 안의 **동작 단위 소제목** [2026-08-12 사용자 *"나 이거 좀 헷갈려!"*]
   한 fieldset 에 폼이 둘 이상 들어갈 때(회원 처리 = 안내사유 수정 + 정지 해제)
   **어느 입력칸이 어느 버튼에 딸린 것인지** 보이게 하려고 둔다.
   ⚠️ `legend`(fieldset 제목)와 혼동하지 말 것 — 이건 그 **안쪽** 구획 제목이다. */
.adm-subhead {
  margin: 0 0 12px; padding-left: 9px;
  border-left: 3px solid var(--adm-primary);
  font-size: 14px; font-weight: 700; color: #1a1a2e;
}
/* 부가 표시(예: "정지 유지") — 제목 옆에 작게 */
.adm-subhead-tag {
  margin-left: 6px; padding: 2px 8px; border-radius: 10px;
  background: var(--adm-primary-bg); border: 1px solid #bac8ff;
  font-size: 11px; font-weight: 600; color: #3b5bdb; vertical-align: middle;
}

/* 상품목록 재고 칸 — 합계 숫자 **아래 줄**에 옵션 상태 뱃지를 깐다
   [2026-08-12 사용자 "줄에 있으면 지저분한 느낌"]
   ⚠️ 뱃지가 2개(품절·부족) 붙을 수 있어 `gap` 으로 간격을 준다. 마진을 쓰면 첫 뱃지 앞에도 붙는다. */
.adm-stock-cell .adm-stock-num { display: block; margin-bottom: 5px; }
.adm-stock-cell .badge         { margin: 0 3px 3px 0; }

/* ============================================================
   폼
   ============================================================ */
.adm-field { margin-bottom: 18px; }
.adm-field > label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: #343a40; }

.adm-field input[type=text], .adm-field input[type=number], .adm-field input[type=email],
.adm-field input[type=password], .adm-field input[type=datetime-local], .adm-field input[type=date],
.adm-field input[type=search], .adm-field input[type=url], .adm-field input[type=tel],
.adm-field select, .adm-field textarea,
.adm-search input, .adm-search select {
  padding: 0 12px; border: 1px solid #d5d8dd; border-radius: 8px;
  font-size: 13px; background: #fff; color: var(--adm-text);
  height:39px;
}
/* ⚠️ 체크박스·라디오까지 100% 로 늘어나면 배치가 통째로 깨진다 — 반드시 제외한다 */
.adm-field input:not([type=checkbox]):not([type=radio]),
.adm-field select, .adm-field textarea { width: 100%; }
.adm-field textarea { resize: vertical; line-height: 1.7; min-height: 120px; padding:10px; }

/* 상세 표(라벨-값) 칸 안의 입력칸 — `.adm-field` 밖이라 위 스타일을 못 받는다.
   ⚠️ `.adm-table-inline`(상품 옵션 편집표)은 **제외**한다 — 칸이 좁아 더 작게 간다.
      → 그 규칙은 위 **§표 블록의 `.adm-table-inline input`** 에 있다(모양은 여기와 같고 높이만 34px).
      ⚠️ 이쪽 값을 고치면 거기도 같이 고칠 것 — 두 곳 모양이 갈리면 한 화면에서 바로 드러난다. */
.adm-form .adm-table:not(.adm-table-inline) td input[type=text],
.adm-form .adm-table:not(.adm-table-inline) td input[type=email],
.adm-form .adm-table:not(.adm-table-inline) td input[type=password] {
  width: 100%; max-width: 320px;
  padding: 8px 11px; border: 1px solid #d5d8dd; border-radius: 8px;
  font-size: 13px; background: #fff; color: var(--adm-text);
}
.adm-form .adm-table:not(.adm-table-inline) td input:focus {
  outline: none; border-color: var(--adm-primary); box-shadow: 0 0 0 3px rgba(59,91,219,.12);
}
.adm-form .adm-table:not(.adm-table-inline) td input[disabled] { background: #f1f3f5; color: #868e96; }
/* 값 옆에 붙는 짧은 안내 (예: "변경 불가") */
.adm-cell-note { margin-left: 8px; font-size: 12px; color: var(--adm-muted); font-style: normal; }
.adm-field input:focus, .adm-field select:focus, .adm-field textarea:focus,
.adm-search input:focus, .adm-search select:focus {
  outline: none; border-color: var(--adm-primary); box-shadow: 0 0 0 3px rgba(59,91,219,.12);
}
/* 파일 선택 — 기본 버튼이 회색 벽돌이라 폼 안에서 혼자 튄다 */
.adm-field input[type=file] {
  padding: 8px 10px; border: 1px dashed #ccd0d5; border-radius: 8px;
  background: #fafbfc; font-size: 13px;
}
.adm-field input[type=file]::file-selector-button {
  margin-right: 10px; padding: 6px 12px; border: 1px solid #d5d8dd; border-radius: 6px;
  background: #fff; color: #495057; font-size: 12px; cursor: pointer;
}
.adm-field input[type=file]::file-selector-button:hover { background: #f1f3f5; }

/* 가로 배치 */
.adm-field-row { display: flex; gap: 14px; }
.adm-field-row > .adm-field { flex: 1; }
.adm-field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 14px; }
.adm-field-grid-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .adm-field-grid, .adm-field-grid-3 { grid-template-columns: 1fr; } }

/* ============================================================
   체크박스 / 라디오 — 브라우저 기본형 대신 직접 그린다
   ⚠️ 라벨 텍스트와 **가로로 나란히** 놓는다. 세로로 쌓이면 어느 설명이
      어느 체크박스 것인지 알 수 없다.
   ============================================================ */
.adm-field input[type=checkbox], .adm-field input[type=radio],
.adm-table input[type=checkbox], .adm-table input[type=radio] {
  appearance: none; -webkit-appearance: none;
  flex: none; width: 18px; height: 18px; margin: 0; padding: 0;
  border: 1.5px solid #ccd0d5; border-radius: 5px; background: #fff;
  cursor: pointer; position: relative; transition: all .12s ease;
}
.adm-field input[type=radio], .adm-table input[type=radio] { border-radius: 50%; }
.adm-field input[type=checkbox]:checked, .adm-field input[type=radio]:checked,
.adm-table input[type=checkbox]:checked, .adm-table input[type=radio]:checked {
  background: var(--adm-primary); border-color: var(--adm-primary);
}
/* 체크 표시 — 두 변만 남긴 사각형을 45도 돌린다 */
.adm-field input[type=checkbox]:checked::after,
.adm-table input[type=checkbox]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.adm-field input[type=radio]:checked::after,
.adm-table input[type=radio]:checked::after {
  content: ''; position: absolute; left: 4px; top: 4px;
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
}
.adm-field input[type=checkbox]:focus-visible, .adm-field input[type=radio]:focus-visible {
  outline: none; box-shadow: 0 0 0 3px rgba(59,91,219,.2);
}
.adm-field input[type=checkbox]:disabled, .adm-field input[type=radio]:disabled {
  background: #f1f3f5; border-color: #dee2e6; cursor: not-allowed;
}

/* 체크박스 + 라벨을 하나의 알약으로 묶는다 (선택하면 색이 산다) */
.adm-check,
.adm-field > label:has(> input[type=checkbox]),
.adm-field > label:has(> input[type=radio]) {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 8px 8px 0; padding: 0 14px; height:39px;
  border: 1px solid #d5d8dd; border-radius: 8px; background: #fff;
  font-size: 13px; font-weight: 400; color: var(--adm-text); cursor: pointer;
  transition: all .12s ease;
}
.adm-check:hover,
.adm-field > label:has(> input[type=checkbox]):hover,
.adm-field > label:has(> input[type=radio]):hover { border-color: #adb5bd; background: #f8f9fa; }
.adm-check:has(:checked),
.adm-field > label:has(> input[type=checkbox]:checked),
.adm-field > label:has(> input[type=radio]:checked) {
  border-color: var(--adm-primary); background: var(--adm-primary-bg);
  color: var(--adm-primary); font-weight: 600;
}
.adm-toolbar .adm-check {margin:0;}
/* 체크박스 여러 개를 한 줄에 늘어놓을 때 */
.adm-check-row { display: flex; flex-wrap: wrap; align-items: center; }
.adm-check-row + .adm-help { margin-top: 2px; }
/* 표 안(옵션 편집 등)에서는 알약을 씌우지 않는다 — 칸이 좁다 */
.adm-table label:has(> input[type=checkbox]) {
  display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0;
  border: 0; background: none; font-weight: 400;
}

/* 설명이 붙는 체크박스 — 체크박스 오른쪽에 제목+설명을 세로로 쌓는다 */
.adm-check-desc { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.adm-check-desc > input { margin-top: 2px !important; }
.adm-check-desc b { display: block; font-size: 13px; font-weight: 600; }
.adm-check-desc span { display: block; margin-top: 2px; font-size: 12px; color: var(--adm-muted); line-height: 1.6; }

.adm-form-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--adm-line);
}
.req { color: var(--adm-danger); font-size: 11px; font-style: normal; margin-left: 3px; }
.optional { color: var(--adm-muted); font-size: 11px; font-style: normal; font-weight: 400; margin-left: 4px; }

/* ============================================================
   이미지
   ============================================================ */
.adm-preview img { max-width: 160px; max-height: 120px; border: 1px solid var(--adm-line); border-radius: 8px; }
.adm-preview-wide img { max-width: 100%; max-height: 180px; }
.adm-image-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.adm-image-item {
  width: 148px; padding: 8px; background: #fff; text-align: center;
  border: 1px solid var(--adm-line); border-radius: 10px;
}
.adm-image-item.is-thumb { border-color: var(--adm-primary); box-shadow: 0 0 0 2px rgba(59,91,219,.12); }
.adm-image-item img { width: 100%; height: 100px; object-fit: contain; }
.adm-image-actions { display: flex; gap: 4px; justify-content: center; margin-top: 8px; }
.adm-image-actions .adm-btn { padding: 4px 8px; font-size: 11px; }

/* ============================================================
   대시보드
   ============================================================ */
.adm-stat-group { margin-bottom: 26px; }
.adm-stat-group h2 { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #1a1a2e; }
.adm-stats { display: flex; gap: 14px; flex-wrap: wrap; }
.adm-stat {
  min-width: 160px; padding: 20px; background: #fff;
  border-radius: 12px; box-shadow: 0 1px 10px rgba(0,0,0,.06);
  transition: all .15s ease;
}
a.adm-stat:hover { box-shadow: 0 4px 16px rgba(59,91,219,.18); transform: translateY(-1px); }
.adm-stat b { display: block; font-size: 28px; line-height: 1.2; color: #1a1a2e; }
.adm-stat span { font-size: 12px; color: var(--adm-muted); }
.adm-stat.urgent b { color: var(--adm-danger); }

/* ============================================================
   페이저
   ============================================================ */
nav.d-flex { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.pagination { display: flex; gap: 3px; list-style: none; padding: 0; margin: 0; }
.page-link {
  display: block; padding: 6px 12px; border-radius: 8px;
  color: var(--adm-muted); font-size: 13px; background: transparent;
}
.page-link:hover { background: var(--adm-primary-bg); color: var(--adm-primary); }
.page-item.active .page-link { background: var(--adm-primary); color: #fff; }
.page-item.disabled .page-link { color: #ced4da; }
.text-muted { color: var(--adm-muted); }
.small { font-size: 12px; }

/* ============================================================
   로그인 (사이드바 없는 화면)
   ============================================================ */
.layout-admin-blank { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: var(--adm-bg); }
.adm-login {
  width: 360px; padding: 36px 32px; background: #fff;
  border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.08);
}
.adm-login h1 { margin: 0 0 24px; font-size: 20px; font-weight: 700; text-align: center; color: #1a1a2e; }
.adm-login input {
  width: 100%; padding: 12px 14px; margin-bottom: 10px;
  border: 1px solid #d5d8dd; border-radius: 8px; font-size: 14px;
}
.adm-login input:focus {
  outline: none; border-color: var(--adm-primary); box-shadow: 0 0 0 3px rgba(59,91,219,.12);
}
.adm-login button {
  width: 100%; padding: 13px; margin-top: 6px; border: 0; border-radius: 8px;
  background: var(--adm-primary); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer;
}
.adm-login button:hover { background: var(--adm-primary-dark); }

/* =====================================================================
 *  대시보드
 *  ⭐ 처리 대기 큐가 주인공이다. 0건은 회색으로 죽이고 1건 이상만 색이 산다(.on).
 *     "빨간 게 없으면 오늘 할 일 없음"이 한눈에 들어와야 한다.
 * ===================================================================== */
.dash-kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.dash-kpi-card {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 20px; background: #fff; border-radius: 12px;
  box-shadow: 0 1px 10px rgba(0,0,0,.06);
}
.dash-kpi-card > i {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; color: var(--adm-primary); background: var(--adm-primary-bg);
}
.dash-kpi-card > div { min-width: 0; }
.dash-kpi-label { display: block; font-size: 12px; color: var(--adm-muted); }
.dash-kpi-value { display: block; font-size: 22px; font-weight: 700; color: #1a1a2e; line-height: 1.3; }
.dash-kpi-diff { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; }
.dash-kpi-diff em { font-style: normal; font-weight: 400; color: var(--adm-muted); }
.dash-kpi-diff.up   { color: #2f9e44; }
.dash-kpi-diff.down { color: var(--adm-danger); }
.dash-kpi-diff.none { color: #adb5bd; font-weight: 400; }

.dash-card {
  background: #fff; border-radius: 12px; padding: 20px 22px;
  box-shadow: 0 1px 10px rgba(0,0,0,.06); margin-bottom: 18px;
}
.dash-card-title {
  display: flex; align-items: center; gap: 7px;
  margin: 0 0 16px; font-size: 15px; font-weight: 600; color: #1a1a2e;
}
.dash-card-title > i { color: var(--adm-primary); }
.dash-card-title em { font-style: normal; font-size: 12px; font-weight: 400; color: var(--adm-muted); }
.dash-more { margin-left: auto; font-size: 12px; font-weight: 400; }
.dash-allclear { margin-left: auto; font-size: 12px; font-weight: 500; color: #2f9e44; }

/* 처리 대기 큐 */
.dash-queue { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.dash-queue-item {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px 10px; border: 1px solid var(--adm-line); border-radius: 10px;
  background: #fafbfc; color: #adb5bd; transition: .15s;
}
.dash-queue-item > i { font-size: 18px; margin-bottom: 4px; }
.dash-queue-item b { font-size: 26px; line-height: 1.1; color: #ced4da; }
.dash-queue-item span { font-size: 12px; text-align: center; }
/* 1건 이상 — 여기부터가 '할 일'이다 */
.dash-queue-item.on { background: #fff; border-color: var(--adm-primary); color: var(--adm-primary); }
.dash-queue-item.on b { color: var(--adm-primary); }
.dash-queue-item.on:hover { box-shadow: 0 4px 16px rgba(59,91,219,.18); transform: translateY(-1px); }
/* 기한이 걸린 건 더 세게 — 놓치면 주문이 자동취소된다 */
.dash-queue-item.urgent { border-color: var(--adm-danger); color: var(--adm-danger); background: #fff5f5; }
.dash-queue-item.urgent b { color: var(--adm-danger); }
.dash-queue-item.urgent:hover { box-shadow: 0 4px 16px rgba(224,49,49,.18); }

/* 2단 배치
 *
 * ⭐ **좌우 카드 높이를 맞춘다** [2026-08-12 사용자]
 *    *"그래프 옆이 최근주문인데 height가 다르다보니 쓸모없는 여백이 많아보여.
 *      좌측 그래프와 판매TOP5 높이를 기준으로 우측이 잡히고 내부 리스트만 스크롤되면 좋겠어."*
 *
 * ⚠️ 예전엔 `align-items: start` 였다 — 카드마다 내용 높이만큼만 차지해서
 *    좌우 높이가 어긋나고 짧은 쪽 아래에 빈 공간이 남았다.
 * → `stretch`(기본값)로 두면 **같은 행의 카드가 같은 높이**가 된다.
 *
 * ⭐ **왼쪽이 높이를 정하는 원리** — 오른쪽 카드의 목록을 `.dash-scroll`
 *    (`flex:1; min-height:0; overflow-y:auto`)로 감싸면 그 영역이 **0 까지 줄어들 수 있다.**
 *    즉 오른쪽 카드가 행 높이를 밀어올리지 않고, 왼쪽(그래프 260px 고정 · 판매TOP5 5행)이 기준이 된다.
 *    내용이 넘치면 그 안에서만 스크롤된다.
 *
 * ⚠️ `margin-bottom` 을 **0 으로** 바꿨다. `gap:18px` 과 겹쳐 행 간격이 36px 이었고,
 *    `stretch` 에서는 margin 이 카드 높이를 깎아 정렬이 어긋난다.
 */
.dash-row { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; align-items: stretch; }
/* ⚠️ 카드 자체의 `margin-bottom` 은 **0** 이어야 한다 — `stretch` 에서 margin 은 카드 높이를
      깎아서 좌우 정렬이 어긋난다(그래서 예전 `margin-bottom:18px` 를 뺐다).
   ⭐ 대신 **행 컨테이너에 아래 간격**을 준다 [2026-08-12 사용자 "대시보드 상하 간격은 줘"].
      `.dash-row` 가 **여러 개**(그래프+최근주문 / TOP5+재고부족)라 그 사이가 붙어 있었다.
      `gap` 은 같은 그리드 **안**의 간격이라 행 사이는 못 벌린다. */
.dash-row { margin-bottom: 18px; }
.dash-row .dash-card { margin-bottom: 0; display: flex; flex-direction: column; }
.dash-chart { position: relative; height: 260px; }

/* 카드 안에서 **이 영역만** 스크롤된다 (제목·안내문은 고정)
 * ⚠️⚠️ `min-height: 0` 이 **핵심**이다. flex 자식은 기본 `min-height:auto` 라
 *    내용보다 작아지지 않아서, 이게 없으면 `overflow` 가 아예 발동하지 않고
 *    카드가 내용만큼 늘어나 버린다(= 고치기 전과 같은 상태). */
.dash-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; }
/* 스크롤바를 얇게 — 카드 안이라 기본 스크롤바는 두껍다 */
.dash-scroll::-webkit-scrollbar { width: 6px; }
.dash-scroll::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 3px; }
.dash-scroll::-webkit-scrollbar-thumb:hover { background: #ced4da; }
.dash-scroll { scrollbar-width: thin; scrollbar-color: #dee2e6 transparent; }

/* 대시보드 안의 간이 테이블 — 헤더 없이 2~3열로 압축한다 */
.dash-table { margin: 0; }
.dash-table td { padding: 9px 6px; vertical-align: middle; }
.dash-table tr:last-child td { border-bottom: 0; }
.dash-right { text-align: right; white-space: nowrap; }
.dash-rank {
  width: 24px; text-align: center; font-weight: 700; color: var(--adm-muted);
}
.dash-sub { display: block; font-size: 11px; color: var(--adm-muted); margin-top: 2px; }

@media (max-width: 1280px) {
  .dash-kpi   { grid-template-columns: repeat(2, 1fr); }
  .dash-queue { grid-template-columns: repeat(3, 1fr); }
  .dash-row   { grid-template-columns: 1fr; }
}

/* =====================================================================
 *  상태 탭 (주문관리)
 * ===================================================================== */
.adm-tabs {
  display: flex; gap: 4px; margin-bottom: 16px;
  border-bottom: 1px solid var(--adm-line); flex-wrap: wrap;
}
.adm-tab {
  padding: 9px 16px; font-size: 13px; color: var(--adm-muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.adm-tab:hover { color: var(--adm-primary); }
.adm-tab.active { color: var(--adm-primary); font-weight: 600; border-bottom-color: var(--adm-primary); }
.adm-tab b { margin-left: 4px; font-size: 12px; color: inherit; }
.adm-search-sep { color: var(--adm-muted); }
.adm-toolbar-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* 답변 화면이 아직 없는 큐 — 건수는 보여주되 클릭은 막는다 */
.dash-queue-item.soon { cursor: default; }
.dash-queue-item.soon:hover { box-shadow: none; transform: none; }
.dash-soon { margin-top: 4px; font-size: 10px; font-style: normal; color: #adb5bd; }

/* =====================================================================
 *  AJAX 액션 (public/js/admin.js) — 삭제·토글이 페이지를 새로고침하지 않는다
 *  ⚠️ 새로고침이 없어졌으니 결과를 알릴 자리가 필요하다. 상단 플래시(admin_flash)는
 *     리다이렉트로 들어온 요청에서만 뜨므로, AJAX 결과는 이 토스트로 알린다.
 * ===================================================================== */
.adm-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 1200;
  max-width: 420px; padding: 12px 18px; border-radius: 6px;
  background: #212529; color: #fff; font-size: 13px; line-height: 1.5;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
.adm-toast.on { opacity: 1; transform: translateY(0); }
.adm-toast.is-err { background: #c92a2a; }

/* 지워지는 행/타일 — 툭 사라지지 않고 한 박자 접힌다 (무엇이 지워졌는지 눈으로 따라갈 수 있게) */
.is-removing { opacity: .35; transition: opacity .15s ease; }

/* 이미지 필드의 "같은 사이즈로 등록" 경고 — 도움말 안에서 눈에 띄어야 한다.
   운영자가 이걸 놓치면 목록 카드 높이가 제각각이 되고, 그건 나중에 이미지를 전부 다시 올려야 한다. */
.adm-help-warn { color: #c92a2a; }

/* 목록 드래그 정렬 (admin.js admSortable) */
.adm-table tr[data-idx] { cursor: default; }
.adm-drag-handle {
  width: 34px; color: #adb5bd; cursor: grab; user-select: none; font-size: 16px; line-height: 1;
}
.adm-drag-handle:active { cursor: grabbing; }
.adm-table tr.is-dragging { opacity: .4; background: #eef2ff; }

/* ============================================================
   본문 에디터 (public/js/admin_editor.js)
   상품 상세설명 · 게시판 본문에 붙는다. 원본 textarea 는 숨어서 값만 실어 나른다.
   ⚠️ 라이브러리 없이 contenteditable 로 만든 것이라 여기 스타일이 곧 에디터의 전부다.
   ============================================================ */
.adm-editor {
  border: 1px solid #d5d8dd; border-radius: 6px; background: #fff; overflow: hidden;
}
.adm-editor:focus-within { border-color: var(--adm-primary); }

.adm-editor-tools {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 6px 8px; background: #f8f9fb; border-bottom: 1px solid var(--adm-line);
  position: sticky; top: 0; z-index: 2;   /* 긴 본문에서 스크롤해도 툴바가 따라온다 */
}
.adm-editor-btn {
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: #4b5563; font-size: 15px; line-height: 1; cursor: pointer;
}
.adm-editor-btn:hover { background: #e9edf5; color: var(--adm-primary); }
.adm-editor-btn.is-on { background: var(--adm-primary-bg); color: var(--adm-primary); }
.adm-editor-sep { width: 1px; height: 18px; margin: 0 5px; background: #dde1e7; }

/* ⭐ [2026-09-09 사용자] 본문 글꼴·크기·줄간격을 **앱과 같은 값**으로 맞췄다.
   예전엔 `14px / 1.75` 라 에디터가 앱보다 글자는 작고 줄간격은 넓어서, 관리자가 여기서
   맞춰놓은 모양이 앱에서 달라 보였다. 아래 세 줄은 `app.css` 의 `body` 와 **같은 값**이다 —
   ⚠️ `app.css` 쪽을 바꾸면 여기도 같이 바꿔야 미리보기가 어긋나지 않는다.
   ⚠️ 이건 **에디터 표시용**일 뿐이라 저장되는 HTML 에는 안 들어간다.
      본문에 실제로 박히는 줄간격은 툴바의 [줄간격] 버튼이 넣는 인라인 style 이다. */
.adm-editor-body {
  min-height: 320px; max-height: 640px; overflow-y: auto;
  padding: 14px 16px; outline: 0;
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, "Malgun Gothic", sans-serif;
  font-size: 15px; line-height: 1.5;
  /* ⚠️ 긴 URL·표가 들어와도 에디터 밖으로 삐져나가지 않게 한다 */
  word-break: break-word;
}
.adm-editor-body.is-dropping { background: var(--adm-primary-bg); outline: 2px dashed var(--adm-primary); outline-offset: -6px; }

/* 빈 상태 안내 — :empty 는 <br> 하나만 있어도 안 먹어서 JS 가 붙이는 클래스로 판단한다 */
.adm-editor-body.is-empty::before {
  content: attr(data-placeholder); color: #adb5bd; pointer-events: none;
}

/* 본문 안 요소 — 앱 화면과 똑같이 보이진 않지만, 크기 감각은 맞춰둔다 */
.adm-editor-body img { max-width: 100%; height: auto; }
.adm-editor-body h2 { font-size: 20px; font-weight: 700; margin: 18px 0 8px; }
.adm-editor-body h3 { font-size: 17px; font-weight: 700; margin: 16px 0 8px; }
.adm-editor-body p  { margin: 0; }
.adm-editor-body ul, .adm-editor-body ol { margin: 0 0 10px; padding-left: 22px; }
.adm-editor-body blockquote {
  margin: 0 0 10px; padding: 6px 14px; border-left: 3px solid var(--adm-line); color: var(--adm-muted);
}
.adm-editor-body hr { margin: 16px 0; border: 0; border-top: 1px solid var(--adm-line); }
.adm-editor-body table { border-collapse: collapse; }
.adm-editor-body th, .adm-editor-body td { border: 1px solid var(--adm-line); padding: 6px 10px; }

/* 글자 색 팔레트 — 팔레트 버튼 아래에 뜬다 (위치는 JS 가 매번 계산해 넣는다) */
/* ⚠️ `display: grid` 는 `hidden` 속성(UA 스타일 display:none)보다 우선순위가 높다.
      아래 [hidden] 규칙이 없으면 **팔레트가 항상 펼쳐진 채로 보인다.**
      (HTML 편집창에서 실제로 물렸던 함정이라 그대로 남겨둔다) */
.adm-editor-palette[hidden] { display: none; }
.adm-editor-palette {
  position: absolute; z-index: 5;
  padding: 8px; background: #fff; border: 1px solid var(--adm-line);
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.adm-editor-swatches { display: grid; grid-template-columns: repeat(5, 22px); gap: 6px; }
.adm-editor-swatch {
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid rgba(0,0,0,.12); border-radius: 4px;
}
.adm-editor-swatch:hover { transform: scale(1.12); }

/* 자유 색상 — 기본 9색 아래에 한 줄 */
.adm-editor-custom {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--adm-line);
  font-size: 12px; color: var(--adm-muted); white-space: nowrap;
}
/* ⚠️ 색 선택기 기본 모양은 브라우저마다 제각각이라(윈도우 크롬은 회색 테두리가 두껍다)
      스와치와 같은 크기로 맞춰준다 */
.adm-editor-custom input[type="color"] {
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid rgba(0,0,0,.12); border-radius: 4px; background: none;
}
.adm-editor-custom input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.adm-editor-custom input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 2px; }

/* 글꼴 · 글자 크기 드롭다운 — 팔레트와 같은 자리에 뜬다 (위치는 JS 가 계산해 넣는다)
   ⚠️ `[hidden]` 규칙을 반드시 먼저 둔다 — 팔레트에서 물렸던 것과 같은 함정이다
      (UA 의 `[hidden]{display:none}` 은 우선순위가 낮아 아래 display 선언에 진다) */
.adm-editor-menu[hidden] { display: none; }
.adm-editor-menu {
  position: absolute; z-index: 5; min-width: 128px;
  padding: 4px; background: #fff; border: 1px solid var(--adm-line);
  border-radius: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.12);
  /* ⚠️ 글자 크기 목록은 36pt 미리보기까지 있어 세로로 길다 — 화면 밖으로 나가지 않게 자른다 */
  max-height: 320px; overflow-y: auto;
}
/* ⚠️ 항목의 글꼴·크기는 JS 가 인라인으로 넣는다(미리보기) — 여기서 font 를 지정하지 말 것 */
.adm-editor-menu-item {
  display: block; width: 100%; padding: 6px 10px;
  border: 0; border-radius: 4px; background: none;
  text-align: left; white-space: nowrap; line-height: 1.35; color: #1e1e1e;
}
.adm-editor-menu-item:hover { background: var(--adm-primary-bg); color: var(--adm-primary); }

.mgt10 {margin-top:10px;}
.mgt15 {margin-top:15px;}
/* ============================================================
   배치 실행 (설정 > 배치 실행) — 2026-08-12
   ⚠️ 검수 환경(카페24)엔 크론이 없어 이 화면이 사실상 유일한 실행 수단이다.
      "지금 할 일이 있는지"가 한눈에 보여야 해서 대기 건수를 크게 잡는다.
   ============================================================ */

/* 작업 설명 — `.adm-cell-note` 는 인라인(272줄)이라 표 안에서 줄바꿈이 안 된다.
   ⚠️ 원본을 고치지 않는다. 다른 상세 화면들이 인라인 배치에 의존하고 있다. */
.adm-batch-title { font-size: 14px; font-weight: 600; color: var(--adm-text); }
.adm-batch-note {
  display: block; margin: 4px 0 0; font-size: 12px; line-height: 1.6;
  color: var(--adm-muted); font-style: normal;
}
.adm-batch-note.is-warn { color: #e8590c; }

/* 대기 건수 — 0건은 눈에 안 띄게, 1건 이상은 확실히 띄게 */
.adm-batch-count {
  display: inline-block; min-width: 58px; padding: 7px 10px; border-radius: 8px;
  font-size: 14px; font-weight: 600; text-align: center;
  background: #f1f3f5; color: #adb5bd; border: 1px solid #dee2e6;
}
.adm-batch-count.is-on {
  background: #fff4e6; color: #e8590c; border-color: #ffd8a8;
}

/* 행 구분을 뚜렷하게 — 작업이 여러 줄이라 붙어 보이면 어디까지가 한 작업인지 헷갈린다 */
.adm-batch-table td { padding-top: 16px !important; padding-bottom: 16px !important; }
.adm-batch-table tbody tr + tr td { border-top: 1px solid #f0f0f0; }
.adm-batch-table tbody tr:hover { background: transparent; }  /* 목록이 아니라 실행 화면이다 */

/* ============================================================
   이미지 라이트박스 (관리자 공용) — 2026-08-12
   ============================================================ */
.adm-thumb { cursor: zoom-in; transition: transform .12s; }
.adm-thumb:hover { transform: scale(1.08); box-shadow: 0 2px 8px rgba(0,0,0,.25); }

.adm-lb {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.82);
  align-items: center; justify-content: center; gap: 8px;
}
.adm-lb.is-on { display: flex; }

.adm-lb-stage { margin: 0; text-align: center; max-width: 82vw; max-height: 88vh; }
/* ⚠️ 원본이 세로로 길 때 화면을 넘지 않게 **가로·세로 둘 다** 제한한다 */
.adm-lb-stage img {
  display: block; max-width: 82vw; max-height: 80vh;
  border-radius: 6px; background: #fff; box-shadow: 0 8px 40px rgba(0,0,0,.5);
}
.adm-lb-count { margin-top: 12px; font-size: 13px; color: #ced4da; }

.adm-lb-nav, .adm-lb-close {
  border: 0; background: rgba(255,255,255,.12); color: #fff; cursor: pointer;
  border-radius: 50%; line-height: 1;
}
.adm-lb-nav { width: 46px; height: 46px; font-size: 20px; flex: 0 0 auto; }
.adm-lb-nav:hover, .adm-lb-close:hover { background: rgba(255,255,255,.28); }
.adm-lb-close {
  position: absolute; top: 18px; right: 22px;
  width: 40px; height: 40px; font-size: 26px;
}

/* ============================================================
   PII 보기 / 복사 (관리자 목록) — 2026-08-12
   기본은 마스킹, [보기] 로 그 행만 펼치고 [복사] 로 클립보드에.
   ============================================================ */
.adm-pii { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.adm-pii .js-pii-text { font-variant-numeric: tabular-nums; }
/* 펼친 행은 살짝 강조 — 지금 원문이 보이는 상태라는 걸 알 수 있게 */
.adm-pii.is-open .js-pii-text { color: var(--adm-text); font-weight: 600; }

.adm-pii-btn {
  border: 1px solid #dee2e6; background: #fff; color: var(--adm-muted);
  border-radius: 5px; padding: 1px 6px; font-size: 11px; line-height: 1.6;
  cursor: pointer;
}
.adm-pii-btn:hover { background: #f1f3f5; color: var(--adm-text); border-color: #ced4da; }

/* 로그아웃 — POST 폼이지만 버튼처럼 보여야 한다 (2026-08-12) */
.adm-logout-form { display: inline; margin: 0; }

/* ============================================================
   목록 표 — **컬럼 폭 고정** [2026-08-12 사용자]
   *"각각의 th가 넓이가 고정되었으면 해. 지금 휴대폰 보기/가리기만 해도 넓이가 바뀌거든."*

   ⚠️⚠️ 원인은 `table-layout` 이 기본값(`auto`)이었던 것이다. auto 는 **내용이 폭을 정한다** →
      셀 안의 글자 수가 바뀌면(마스킹 ↔ 원문, 뱃지 유무, 상품명 길이) 모든 열이 다시 계산돼
      **같은 화면인데 페이지마다·클릭마다 열 위치가 달라진다.**
   → `fixed` 로 바꾸면 **`<th>` 에 지정한 폭이 절대 기준**이 되고 내용은 그 안에서 접힌다.

   ⚠️ `fixed` 의 부작용: 폭보다 긴 내용이 **넘친다.** 그래서 아래 기본 규칙이 필요하다:
      · 글자는 `word-break` 로 접는다(넘치는 대신 행이 높아진다 — 잘려 사라지는 것보다 낫다)
      · `.adm-ellipsis` 는 그대로 한 줄 말줄임 (이메일·상품명처럼 접히면 지저분한 칸)
      · `.adm-pii` · `.adm-row-actions` 처럼 `nowrap` 인 칸은 **폭을 넉넉히 줘야** 한다
   ⚠️ 폭을 안 지정한 열은 남은 공간을 나눠 갖는다 — 각 목록 뷰의 `<th style="width:%">` 참고.
   ============================================================ */
.adm-table { table-layout: fixed; }
.adm-table td { word-break: break-word; overflow-wrap: anywhere; }
/* 말줄임 칸은 `fixed` 에서 max-width 가 불필요하다(열 폭이 이미 고정) */
.adm-ellipsis { max-width: none; }

/* =====================================================================
 *  매출 통계 (주문 관리 > 매출 통계) [2026-09-15]
 *  ⚠️ 카드·그래프는 대시보드 클래스(.dash-kpi · .dash-card · .dash-chart)를 그대로 쓴다.
 *     여기엔 표에만 필요한 것만 둔다.
 * ===================================================================== */
/* 합계 줄 — 본문 행과 한눈에 구분되게. `tbody tr:last-child` 가 테두리를 지우므로 위 선은 여기서 긋는다 */
.adm-table tfoot td {
  background: #fafbfc; font-weight: 700; color: #1a1a2e;
  border-top: 1px solid var(--adm-line); border-bottom: 0;
}
/* 주문·취소가 없는 칸은 흐리게 — 일별 한 달치에서 실제로 팔린 날이 눈에 들어와야 한다 */
.sales-table tbody tr.is-zero td { color: #adb5bd; }
.sales-table tbody tr.is-zero td b { font-weight: 400; }
/* 대시보드 KPI 카드 중 매출 통계로 가는 카드(이번 달·누적) — 눌린다는 걸 hover 로만 알려준다.
   ⚠️ `a` 전역 색(파랑)이 카드 글자에 번지지 않게 색을 되돌린다 */
a.dash-kpi-card.is-link { color: inherit; transition: box-shadow .15s, transform .15s; }
a.dash-kpi-card.is-link:hover { box-shadow: 0 4px 16px rgba(59,91,219,.18); transform: translateY(-1px); }