[x-cloak] { display: none !important; }
    * { box-sizing: border-box; margin: 0; padding: 0; }

    body {
      font-family: var(--font-sans);
      font-size: var(--fs-body-lg);
      background: var(--bg-app);
      color: var(--fg-strong);
      -webkit-font-smoothing: antialiased;
    }

    a { color: var(--accent-500); text-decoration: none; }
    a:hover { color: var(--accent-600); text-decoration: none; }

    /* 본문 그릇. 골격이라 여기가 정본이다 — 2026-08-28 에 components_core.css 의
       `.page-container { padding }` 한 줄을 여기로 합쳤다(부품이 아니라 골격이다).
       기본 = 1280px(관리 화면 표준 폭) · 왼쪽 정렬(2026-10-29 사장님 — 넓은 모니터에서 표가 끝없이 늘어 읽기 어려웠다).
       넓게 봐야 하는 화면(대시보드·거래내역·큰 표)만 {% block page_class %}is-wide 로 푼다. */
    .page-container {
      max-width: 1280px;
      margin: 0;
      padding: var(--space-6) var(--space-7);
    }
    /* 넓은 화면도 상한은 둔다 — 1920 모니터에선 사실상 꽉 차고, 그보다 큰 모니터에서만 멈춘다. */
    .page-container.is-wide {
      max-width: 1600px;
    }

    /* ── 페이지 제목 ── */

    /* ── 공통 박스 ── */

    /* ── 통합 필터 바 ── */

    .admin-body table.form-table { font-size: var(--fs-body-lg); }
    .admin-body table.form-table th {
      background: var(--bg-subtle);
      color: var(--fg-default);
      border: none;
      border-bottom: 1px solid var(--border-default);
      font-size: var(--fs-body);
    }
    .admin-body table.form-table td {
      border: none;
      border-bottom: 1px solid var(--border-subtle);
    }

    /* ── 폼 테이블 ── */
    /* PsimBook 색상 — 디자인 문서에 따라 보존 */
    table.form-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
    table.form-table th {
      background: var(--psim-head);
      color: var(--fg-default);
      padding: 8px 12px;
      text-align: center;
      width: 120px;
      border: 1px solid var(--psim-line);
      white-space: nowrap;
      font-weight: var(--fw-bold);
      font-size: var(--fs-control);
    }
    table.form-table td {
      padding: 8px 12px;
      border: 1px solid var(--psim-head);
    }
    table.form-table input[type=text],
    table.form-table input[type=password],
    table.form-table select {
      padding: 5px 8px;
      border: 1px solid var(--border-default);
      border-radius: var(--radius-sm);
      font-size: var(--fs-control);
      width: 220px;
      outline: none; box-shadow: var(--ring-focus); }
    table.form-table input:focus, table.form-table select:focus {
      border-color: var(--border-focus);
      box-shadow: var(--ring-focus);
    }

    /* 흐름 스텝(파이프라인)의 정본은 `components_core.css` 다 — 2026-09-09 에 여기 있던
       옛 판(`.admin-flow-steps` 컨테이너 + `.flow-step-arrow`·`-sep`·`-muted`)을 걷었다.
       두 벌이 겹쳐 있었고 나중 로드인 그쪽이 이기고 있었다. */

    /* ── 필터 더보기 버튼 ── */
    .filter-more-btn {
      display: flex; align-items: center; gap: var(--space-2);
      padding: var(--space-3) var(--space-5);
      font-size: var(--fs-control); color: var(--fg-muted);
      background: var(--bg-surface);
      border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md);
      cursor: pointer; white-space: nowrap;
      transition: border-color var(--dur-fast), color var(--dur-fast);
    }
    .filter-more-btn:hover { border-color: var(--border-strong); color: var(--fg-strong); }

    /* ── 탭 바 ── */
    .tab-bar {
      display: flex; gap: 0; margin-bottom: 16px;
      border-bottom: 2px solid var(--border-subtle);
    }
    .tab-bar a {
      padding: 10px 20px; font-size: var(--fs-body-lg); font-weight: var(--fw-semibold);
      color: var(--fg-faint); text-decoration: none; border-bottom: 2px solid transparent;
      margin-bottom: -2px; transition: all var(--dur-fast); cursor: pointer;
    }
    .tab-bar a:hover { color: var(--fg-default); }
    .tab-bar a.active { color: var(--fg-strong); border-bottom-color: var(--accent-500); }
    .tab-bar .tab-count {
      font-size: var(--fs-label); font-weight: var(--fw-bold); background: var(--bg-subtle); color: var(--fg-muted);
      padding: 1px 7px; border-radius: var(--radius-md); margin-left: 4px;
    }

    /* ── 필터 바 공용 ── */

    /* 버튼은 전부 `components_core.css` 가 정본이다 — 색 변형(orange·gray·dark·
       outline·red·blue·green) 14선언이 여기에도 있었는데, core 가 나중에 로드돼
       **전부 지고 있었다**(2026-08-28 렌더 실측: btn-orange 가 base 의 --accent-700 이
       아니라 core 의 oklch(0.7 0.16 50) 로 나왔다). 죽은 코드라 걷었다.
       ⛔ 여기에 버튼 스타일을 다시 만들지 마라. core 를 고쳐라.
       ⚠️ 위 `btn-orange` 는 2026-09-03 에 걷혔다(SSOT 밖 색이라 primary 로 통일).
       찾으러 가지 마라 — 이 문단은 그때의 실측 기록으로만 남긴다. */

    /* ── 로딩 상태 (2-1) ── */
    @keyframes spin { to { transform: rotate(360deg); } }

    /* ── 타이포그래피 유틸리티 ── */
    .text-xs { font-size: var(--fs-label); }
    .text-sm { font-size: var(--fs-control); }
    .text-base { font-size: var(--fs-body); }
    .text-lg { font-size: var(--fs-body-lg); }
    .text-muted { color: var(--fg-muted); }
    .text-error { color: var(--danger-500); }
    .text-success { color: var(--success-500); }
    .text-warning { color: var(--warning-fg); }
    .text-bold { font-weight: var(--fw-semibold); }
    .td-mono { font-family: var(--font-mono); font-size: var(--fs-control); }

    /* ── 드롭다운 메뉴 ── */
    .dropdown-menu {
      position: absolute; right: 0; top: 100%;
      background: var(--bg-surface); border: 1px solid var(--border-subtle);
      border-radius: var(--radius-md); box-shadow: 0 4px 12px oklch(0 0 0 / 0.1);
      min-width: 160px; z-index: 50; padding: 4px 0;
    }
    .dropdown-item {
      display: block; padding: 7px 14px;
      font-size: var(--fs-control); color: var(--fg-default);
      text-decoration: none; white-space: nowrap;
    }
    .dropdown-item:hover { background: var(--bg-subtle); color: var(--accent-700); text-decoration: none; }
    .dropdown-divider { border-top: 1px solid var(--border-subtle); margin: 4px 0; }

    /* ── 폼 입력 통일 ── */
    .form-input,
    .form-table input[type="text"],
    .form-table input[type="number"],
    .form-table input[type="date"],
    .form-table input[type="tel"],
    .form-table input[type="email"],
    .form-table select,
    .form-table textarea {
      padding: 5px 8px;
      font-size: var(--fs-control);
      border: 1px solid var(--border-default);
      border-radius: var(--radius-sm);
      outline: none;
      transition: border-color var(--dur-fast);
    }
    .form-input:focus,
    .form-table input:focus,
    .form-table select:focus,
    .form-table textarea:focus {
      border-color: var(--border-focus);
      box-shadow: var(--ring-focus);
    }

    /* ── 폼 유효성 (2-2) ── */
    .required-mark { color: var(--danger-500); margin-left: 2px; }

    /* ── 페이지네이션 (3-4) ── */
    .pagination {
      display: flex; gap: 4px; justify-content: center;
      margin: 16px 0; flex-wrap: wrap;
    }
    .pagination a, .pagination span {
      display: inline-block; padding: 6px 12px; font-size: var(--fs-body);
      border: 1px solid var(--border-subtle); border-radius: var(--radius-sm);
      color: var(--fg-default); text-decoration: none;
    }
    .pagination a:hover { background: var(--accent-soft-bg); border-color: var(--accent-500); }
    .pagination .current {
      background: var(--accent-700); color: var(--fg-inverse); border-color: var(--accent-700);
    }
    .pagination .disabled { color: var(--border-default); pointer-events: none; }

    /* ── 타임라인 (3-1) ── */
    .timeline { padding: 12px 16px; }
    .timeline-item {
      display: flex; gap: 10px; align-items: flex-start;
      padding: 6px 0; position: relative;
    }
    .timeline-item:not(:last-child)::before {
      content: ''; position: absolute; left: 7px; top: 22px; bottom: -6px;
      width: 2px; background: var(--border-subtle);
    }
    .timeline-dot {
      width: 16px; height: 16px; border-radius: 50%;
      background: var(--accent-500); flex-shrink: 0; margin-top: 2px;
    }
    .timeline-dot.pending { background: var(--accent-500); }
    .timeline-dot.shipping { background: var(--warning-500); }
    .timeline-dot.delivered { background: var(--success-500); }
    .timeline-dot.cancelled { background: var(--fg-faint); }
    .timeline-content { font-size: var(--fs-control); color: var(--fg-muted); }
    .timeline-content strong { color: var(--fg-strong); }
    .timeline-content .time { color: var(--fg-faint); font-size: var(--fs-label); }

    /* ── Empty State (2-5) ── */
    .empty-state {
      text-align: center; padding: 40px 20px; color: var(--fg-faint); font-size: var(--fs-body);
    }
    .empty-state p { font-size: var(--fs-body-lg); margin-bottom: 12px; }

    /* ── 모바일 스크롤 힌트 (6-2) ── */
    .scroll-hint {
      position: relative;
    }
    .scroll-hint::after {
      content: ''; position: absolute; top: 0; right: 0; bottom: 0;
      width: 30px; background: linear-gradient(to right, transparent, oklch(0.93 0.006 264 / 0.8));
      pointer-events: none; display: none;
    }

    /* ── 인풋 공통 ── */
    /* ⛔ 여기 있던 `input[type=text], … { font-size: var(--fs-body) }` 는 2026-09-09 에 걷었다.
       특이도가 (0,1,1) 이라 `components_core.css` 의 전역 바닥(`:where()`, 특이도 0)을 «이겨서»
       셀렉트는 12px 인데 텍스트 입력칸만 14px 로 남는 어긋남을 만들고 있었다.
       정본은 `components_core.css` 의 「Form controls」 절 하나다 — 여기 두 벌 적지 마라. */

    /* ── 주문 입력 폼 ── */
    .order-row-wrap { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; }
    .order-total-bar {
      background: var(--bg-app);
      border: 1px solid var(--border-subtle);
      border-top: none;
      border-radius: 0 0 var(--radius-md) var(--radius-md);
      padding: 8px 12px;
      text-align: right;
      font-weight: var(--fw-semibold);
    }

    @keyframes badgePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.3); }
    }

    /* ── Skeleton Shimmer (2.3) ── */
    @keyframes shimmer {
      0% { background-position: -400px 0; }
      100% { background-position: 400px 0; }
    }
    .skeleton-row {
      height: 40px;
      background: linear-gradient(90deg, var(--bg-subtle) 25%, var(--border-subtle) 50%, var(--bg-subtle) 75%);
      background-size: 800px 40px;
      animation: shimmer 1.5s infinite linear;
      border-radius: var(--radius-sm);
      margin-bottom: 4px;
    }
    .skeleton-overlay {
      position: relative;
    }
    .skeleton-overlay::after {
      content: '';
      position: absolute;
      inset: 0;
      background: oklch(1 0 0 / 0.7);
      z-index: 10;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .skeleton-overlay .skeleton-content {
      position: absolute;
      inset: 0;
      z-index: 11;
      padding: 20px;
    }

    /* ── 필터바 2단 연결 ── */

    /* ── 섹션 헤더 (택배수거/직접회수 등) ── */
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
    }
    .section-header-title {
      font-size: var(--fs-body-lg);
      font-weight: var(--fw-bold);
      color: var(--fg-strong);
    }
    .section-header-count {
      font-size: var(--fs-control);
      color: var(--fg-faint);
      font-weight: var(--fw-regular);
      margin-left: 6px;
    }

    /* ── 모바일 반응형 ── */
    @media (max-width: 768px) {
      /* 흐름 스텝의 폰 조정은 `components_core.css` 로 옮겼다(2026-09-09) */

      /* 테이블 가로 스크롤 + 힌트 */
      .scroll-hint::after { display: block; }

      /* 검색 바 세로 정렬 */
      /* 폼 테이블 반응형 */
      table.form-table th { width: 80px; font-size: var(--fs-label); }
      table.form-table input[type=text],
      table.form-table input[type=password],
      table.form-table select { width: 100%; }

      /* 전화번호 필드 전체 너비 */
      input[type=tel], input[name*=phone], input[name*=mobile] { width: 100%; }

      /* 버튼 터치 영역 확대는 `components_core.css` 로 옮겼다(2026-09-09) — 여기 두면
         뒤에 실리는 그 파일의 평범한 선언에 덮여 한 줄도 안 먹었다. */
    }

/* ── 움직임 줄이기 (2026-09-09) ────────────────────────────────────
   OS 설정으로 「동작 줄이기」를 켠 사람에게는 전환을 없앤다. 어지럼증·전정기관
   장애가 있으면 애니메이션이 실제 증상을 일으킨다 — 취향이 아니라 접근성이다.
   ⚠️ `!important` 는 여기서 맞다. 사용자 의사가 화면 CSS 를 이겨야 한다.
   실측 2026-09-09: transition 을 쓰는 CSS 22개 중 이 선언이 있던 것은 3개뿐이었다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}