/**
 * HOMEBOX Design System — 프로덕션 단일 소스
 * 시각·컴포넌트 스펙: agents/homebox-ds.html (:root 단축명과 동일 팔레트)
 * PHP 컴포넌트 계약: includes/homebox-components.php · agents/09_homebox-components.jsx (C/F 토큰)
 * 적용 대상: body.imgshop-site--dark (공개·클래스명은 레거시), body.imgshop-admin-app--hb (관리자)
 */

body.imgshop-site--dark,
body.imgshop-admin-app--hb {
  /* agents/tokens.html · layouts.html — ink / plani(hbox-600) */
  --hb-bg: #f5f7fb;
  --hb-surface: #ffffff;
  --hb-surface2: #f5f7fb;
  --hb-surface3: #e7ebf3;
  --hb-border: #e7ebf3;
  --hb-border2: #c9d1e0;
  --hb-primary: #2555eb;
  --hb-primary2: #1d4ed8;
  /** `hb_text_link_class()` 호버용 */
  --hb-primary-dark: var(--hb-primary2);
  --hb-primaryBg: rgba(37, 99, 235, 0.12);
  --hb-successBg: rgba(75, 224, 184, 0.16);
  /* 성공·양수: DS accent-mint (agents/tokens.html) */
  --hb-success: #4be0b8;
  --hb-text: #0a0e27;
  --hb-muted: #475572;
  --hb-muted2: #6b7a9a;
  --hb-error: #f8285a;
  --hb-errorBg: rgba(248, 40, 90, 0.12);
  --hb-warning: #f6c000;
  /** 라이트 모드 체크박스 보조 텍스트 */
  --hb-cb-label: #2555eb;
  --hb-primary-bg: var(--hb-primaryBg);
  --hb-error-bg: var(--hb-errorBg);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html:has(body.imgshop-site--dark),
html:has(body.imgshop-admin-app--hb) {
  color-scheme: light;
  /* 전역 가독성: 90.3% → 약 1.2배(108.36%) */
  font-size: 108.36%;
}

body.imgshop-site--dark,
body.imgshop-admin-app--hb {
  background-color: var(--hb-bg);
  color: var(--hb-text);
  font-family: "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
}

/* ── agents/homebox-ds.html 동기: 선택·구분선·포커스 링(네온 그린 / 다크 보더) ── */
body.imgshop-site--dark ::selection,
body.imgshop-admin-app--hb ::selection {
  background-color: rgba(37, 99, 235, 0.22);
  color: var(--hb-text);
}
body.imgshop-site--dark hr,
body.imgshop-admin-app--hb hr {
  border-color: var(--hb-border);
}
body.imgshop-site--dark a:focus-visible,
body.imgshop-site--dark button:focus-visible,
body.imgshop-site--dark input:focus-visible,
body.imgshop-site--dark select:focus-visible,
body.imgshop-site--dark textarea:focus-visible,
body.imgshop-site--dark summary:focus-visible,
body.imgshop-admin-app--hb a:focus-visible,
body.imgshop-admin-app--hb button:focus-visible,
body.imgshop-admin-app--hb input:focus-visible,
body.imgshop-admin-app--hb select:focus-visible,
body.imgshop-admin-app--hb textarea:focus-visible,
body.imgshop-admin-app--hb summary:focus-visible {
  outline: 2px solid var(--hb-primary);
  outline-offset: 2px;
}
/* 카드 내 세로 리스트(ul) — 공개 모드 */
body.imgshop-site--dark ul.divide-y.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
body.imgshop-site--dark ul.divide-y.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--hb-border) !important;
}
body.imgshop-site--dark li.hover\:bg-gray-50\/80:hover,
body.imgshop-site--dark li.hover\:bg-gray-50\/90:hover {
  background-color: rgba(7, 20, 55, 0.04) !important;
}

html:has(body.imgshop-site--dark) ::-webkit-scrollbar,
html:has(body.imgshop-admin-app--hb) ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
html:has(body.imgshop-site--dark) ::-webkit-scrollbar-track,
html:has(body.imgshop-admin-app--hb) ::-webkit-scrollbar-track {
  background: transparent;
}
html:has(body.imgshop-site--dark) ::-webkit-scrollbar-thumb,
html:has(body.imgshop-admin-app--hb) ::-webkit-scrollbar-thumb {
  background: var(--hb-border2);
  border-radius: 3px;
}

@keyframes hb-ds-spin {
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: hb-ds-spin 0.8s linear infinite;
}

@keyframes hb-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}
.hb-progress-anim {
  animation: hb-pulse 1.5s ease-in-out infinite;
}

/* ── 관리자 레이아웃: 라이트 그레이 → HOMEBOX 서피스 ── */
body.imgshop-admin-app--hb .imgshop-admin-main {
  background-color: var(--hb-bg) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-topbar {
  background-color: var(--hb-surface) !important;
  border-color: var(--hb-border) !important;
  color: var(--hb-text);
  box-shadow: none;
}
body.imgshop-admin-app--hb .imgshop-admin-sidebar {
  background-color: var(--hb-surface) !important;
  border-color: var(--hb-border) !important;
  color: var(--hb-text);
}
body.imgshop-admin-app--hb .imgshop-admin-sidebar .border-b.border-gray-200.bg-white,
body.imgshop-admin-app--hb .imgshop-admin-sidebar .border-b.border-gray-200.bg-gray-50,
body.imgshop-admin-app--hb .imgshop-admin-sidebar .border-t.border-gray-200.bg-white {
  background-color: var(--hb-surface2) !important;
  border-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-sidebar span.text-gray-900,
body.imgshop-admin-app--hb .imgshop-admin-sidebar span.text-gray-400,
body.imgshop-admin-app--hb .imgshop-admin-sidebar a.text-gray-700,
body.imgshop-admin-app--hb .imgshop-admin-sidebar .text-gray-600,
body.imgshop-admin-app--hb .imgshop-admin-sidebar .text-gray-700 {
  color: var(--hb-muted) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-sidebar span.block.truncate.text-lg {
  color: var(--hb-text) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-sidebar-site {
  color: var(--hb-muted) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-sidebar-site:hover {
  border-color: var(--hb-border2) !important;
  background-color: var(--hb-surface3) !important;
  color: var(--hb-text) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-topbar .text-gray-900,
body.imgshop-admin-app--hb .imgshop-admin-topbar .text-gray-400,
body.imgshop-admin-app--hb .imgshop-admin-topbar .text-gray-600 {
  color: var(--hb-muted) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-topbar .truncate.text-sm {
  color: var(--hb-text) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-topbar .border-gray-200,
body.imgshop-admin-app--hb .imgshop-admin-topbar button.border-gray-200,
body.imgshop-admin-app--hb .imgshop-admin-topbar a.border-gray-200 {
  border-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-topbar button:hover,
body.imgshop-admin-app--hb .imgshop-admin-topbar a:hover {
  background-color: var(--hb-surface2) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-topbar .border-l.border-gray-200 {
  border-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-topbar .rounded-full.border.border-gray-100.bg-gray-50 {
  background-color: var(--hb-surface2) !important;
  border-color: var(--hb-border) !important;
  color: var(--hb-muted) !important;
}

/* 관리자 사이드 네비 — 라이트 전용 색 제거 */
body.imgshop-admin-app--hb .imgshop-admin-sidebar-nav {
  scrollbar-color: var(--hb-border2) transparent;
}
body.imgshop-admin-app--hb .imgshop-admin-nav-summary:hover {
  background: var(--hb-surface2) !important;
  border-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-nav-summary-icon,
body.imgshop-admin-app--hb .imgshop-admin-nav-chevron {
  color: var(--hb-muted) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-nav-summary-label {
  color: var(--hb-muted) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-nav-details[open] > .imgshop-admin-nav-summary {
  background: var(--hb-surface2) !important;
  border-color: var(--hb-border) !important;
  border-left-color: var(--hb-primary) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-nav-details[open] > .imgshop-admin-nav-summary .imgshop-admin-nav-summary-icon,
body.imgshop-admin-app--hb .imgshop-admin-nav-details[open] > .imgshop-admin-nav-summary .imgshop-admin-nav-summary-label {
  color: var(--hb-text) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-nav-subs {
  border-left-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-nav-sub {
  color: var(--hb-muted) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-nav-sub:hover {
  background: var(--hb-surface2) !important;
  border-color: var(--hb-border) !important;
  color: var(--hb-text) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-nav-sub.is-active {
  background: var(--hb-primaryBg) !important;
  color: var(--hb-primary) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-sidebar a.border-gray-200 {
  border-color: var(--hb-border) !important;
  color: var(--hb-muted) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-sidebar a.border-gray-200:hover {
  border-color: var(--hb-primary) !important;
  background: var(--hb-primaryBg) !important;
  color: var(--hb-primary) !important;
}

/* 관리자 본문 카드·폼: 라이트 그레이 패널 → HOMEBOX 서피스(일반 패턴만) */
body.imgshop-admin-app--hb .imgshop-admin-page-inner .rounded-xl.border.border-gray-200.bg-white,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .rounded-xl.border.border-gray-100.bg-white {
  background-color: var(--hb-surface) !important;
  border-color: var(--hb-border) !important;
  color: var(--hb-text);
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .rounded-xl.border.border-gray-200.bg-gray-50,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .rounded-xl.border.border-gray-200.bg-gray-50\/80 {
  background-color: var(--hb-surface2) !important;
  border-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .text-gray-900 {
  color: var(--hb-text) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .text-gray-800,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .text-gray-700 {
  color: var(--hb-muted) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .text-gray-600,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .text-gray-500 {
  color: var(--hb-muted2) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner input.border-gray-300,
body.imgshop-admin-app--hb .imgshop-admin-page-inner select.border-gray-300,
body.imgshop-admin-app--hb .imgshop-admin-page-inner textarea.border-gray-300 {
  background-color: var(--hb-surface2) !important;
  border-color: var(--hb-border) !important;
  color: var(--hb-text) !important;
}

/* CKEditor 5(Classic): 상위 다크 토큰 색 상속 시 본문이 흰 글자+밝은 배경으로 안 보이는 문제 방지 */
body.imgshop-admin-app--hb .imgshop-admin-page-inner .ck-editor__editable,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .ck-source-editing-area textarea {
  color: #111827 !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .ck-editor__editable {
  background-color: #f3f4f6 !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .ck-editor__editable.ck-focused {
  background-color: #fff !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .ck-source-editing-area textarea {
  background-color: #f3f4f6 !important;
  border-color: var(--hb-border) !important;
}

/* ── 관리자 본문: 테이블·뱃지·링크 (에이전트 DS와 동일 다크 셸) ───────── */
body.imgshop-admin-app--hb .imgshop-admin-page-inner table {
  color: var(--hb-text);
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner thead,
body.imgshop-admin-app--hb .imgshop-admin-page-inner thead.bg-gray-50,
body.imgshop-admin-app--hb .imgshop-admin-page-inner thead.border-b.border-gray-200 {
  background-color: var(--hb-surface2) !important;
  border-color: var(--hb-border) !important;
  color: var(--hb-muted);
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner thead th {
  color: var(--hb-muted) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner tbody {
  background-color: var(--hb-surface) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner tbody.divide-y.divide-gray-100 > tr,
body.imgshop-admin-app--hb .imgshop-admin-page-inner tbody.divide-y.divide-gray-200 > tr {
  border-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner tbody tr:hover,
body.imgshop-admin-app--hb .imgshop-admin-page-inner tbody tr.align-top:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

/* 카드 내 세로 리스트(ul): divide-gray-* 는 다크 배경에서 너무 밝음 → 보더 토큰 */
body.imgshop-admin-app--hb .imgshop-admin-page-inner ul.divide-y.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
body.imgshop-admin-app--hb .imgshop-admin-page-inner ul.divide-y.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--hb-border) !important;
}
/* 리스트 행(li 등): 라이트용 gray-50 호버 제거 → 서피스 위 미세 하이라이트 */
body.imgshop-admin-app--hb .imgshop-admin-page-inner li.hover\:bg-gray-50\/80:hover,
body.imgshop-admin-app--hb .imgshop-admin-page-inner tr.hover\:bg-gray-50\/80:hover,
body.imgshop-admin-app--hb .imgshop-admin-page-inner tr.hover\:bg-gray-50\/90:hover {
  background-color: rgba(255, 255, 255, 0.06) !important;
}

body.imgshop-admin-app--hb .imgshop-admin-page-inner .overflow-x-auto.rounded-xl.border.border-gray-200.bg-white,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .overflow-x-auto.rounded-xl.border.border-gray-200 {
  background-color: var(--hb-surface) !important;
  border-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .text-teal-600,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .text-teal-700,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .text-teal-800 {
  color: var(--hb-primary) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner a.text-teal-600:hover,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .hover\:text-teal-800:hover {
  color: var(--hb-primary2) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .text-primary-light {
  color: var(--hb-primary) !important;
}
/* 라이트용 상태 뱃지 → 다크 토큰 */
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-emerald-200.bg-emerald-50,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-emerald-200.bg-emerald-50.text-emerald-700 {
  background-color: var(--hb-primaryBg) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
  color: var(--hb-primary) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-sky-200.bg-sky-50,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-sky-200.bg-sky-50.text-sky-800 {
  background-color: rgba(56, 189, 248, 0.12) !important;
  border-color: rgba(56, 189, 248, 0.35) !important;
  color: #7dd3fc !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-amber-200.bg-amber-50,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-amber-200.bg-amber-50.text-amber-800,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-amber-200.bg-amber-50.text-amber-900 {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: var(--hb-warning) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-red-200.bg-red-50,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-red-200.bg-red-50.text-red-700 {
  background-color: var(--hb-errorBg) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: var(--hb-error) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .bg-amber-100.text-amber-900,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .inline-flex.rounded-full.bg-amber-100 {
  background-color: rgba(245, 158, 11, 0.18) !important;
  color: var(--hb-warning) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .bg-rose-100.text-rose-900 {
  background-color: rgba(244, 63, 94, 0.15) !important;
  color: #fda4af !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .bg-gray-100.text-gray-700,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-gray-200.bg-gray-100 {
  background-color: var(--hb-surface2) !important;
  border-color: var(--hb-border) !important;
  color: var(--hb-muted) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-gray-200.bg-gray-50 {
  background-color: var(--hb-surface2) !important;
  border-color: var(--hb-border) !important;
  color: var(--hb-text) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner input[type="checkbox"],
body.imgshop-admin-app--hb .imgshop-admin-page-inner input[type="radio"] {
  accent-color: var(--hb-primary);
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner input[type="file"]::file-selector-button {
  border-radius: 0.5rem;
  border: 1px solid var(--hb-border2);
  background: var(--hb-surface2);
  color: var(--hb-text);
  padding: 0.35rem 0.75rem;
  margin-right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner input[type="file"]::file-selector-button:hover {
  border-color: var(--hb-primary);
  background: var(--hb-primaryBg);
  color: var(--hb-primary);
}

/* 설정 등: 앰버 알림 박스(페이지 이너 밖·안 공통) */
body.imgshop-admin-app--hb .rounded-xl.border.border-amber-200\/80.bg-amber-50\/60,
body.imgshop-admin-app--hb .rounded-xl.border.border-amber-200.bg-amber-50 {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: var(--hb-warning) !important;
}
body.imgshop-admin-app--hb .rounded-xl.border.border-amber-200\/80.bg-amber-50\/60 p,
body.imgshop-admin-app--hb .rounded-xl.border.border-amber-200\/80.bg-amber-50\/60 label {
  color: var(--hb-text);
}
body.imgshop-admin-app--hb .rounded-xl.border.border-amber-200\/80.bg-amber-50\/60 .text-amber-950,
body.imgshop-admin-app--hb .rounded-xl.border.border-amber-200\/80.bg-amber-50\/60 .text-amber-900,
body.imgshop-admin-app--hb .rounded-xl.border.border-amber-200\/80.bg-amber-50\/60 .text-amber-800 {
  color: var(--hb-muted) !important;
}

/* ── 관리자 본문·메인: 밝은 회색 보더·구분선 잔류 → 다크 DS 토큰 ───────────
   (Tailwind border-gray-*, divide-*, ring-offset 흰색, hr 기본색 등) */
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-gray-100,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-gray-200,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-gray-300,
body.imgshop-admin-app--hb .imgshop-admin-main .border-gray-100,
body.imgshop-admin-app--hb .imgshop-admin-main .border-gray-200,
body.imgshop-admin-app--hb .imgshop-admin-main .border-gray-300 {
  border-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-gray-400,
body.imgshop-admin-app--hb .imgshop-admin-main .border-gray-400 {
  border-color: var(--hb-border2) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-rose-100,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-t.border-rose-100,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .border-b.border-rose-100 {
  border-color: rgba(244, 63, 94, 0.28) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
body.imgshop-admin-app--hb .imgshop-admin-page-inner .divide-gray-200 > :not([hidden]) ~ :not([hidden]),
body.imgshop-admin-app--hb .imgshop-admin-main .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
body.imgshop-admin-app--hb .imgshop-admin-main .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .divide-x.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
body.imgshop-admin-app--hb .imgshop-admin-page-inner .divide-x.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner hr,
body.imgshop-admin-app--hb .imgshop-admin-main hr {
  border: 0;
  border-top: 1px solid var(--hb-border);
  background: none;
  height: 0;
  margin: 1rem 0;
}
body.imgshop-admin-app--hb dialog.rounded-2xl,
body.imgshop-admin-app--hb dialog.rounded-xl,
body.imgshop-admin-app--hb .imgshop-admin-page-inner dialog {
  background-color: var(--hb-surface) !important;
  color: var(--hb-text) !important;
  border-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .shadow-sm,
body.imgshop-admin-app--hb .imgshop-admin-main .shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .shadow-inner,
body.imgshop-admin-app--hb .imgshop-admin-main .shadow-inner {
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .focus\:ring-offset-0:focus,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .focus\:ring-offset-1:focus,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .focus\:ring-offset-2:focus,
body.imgshop-admin-app--hb .imgshop-admin-main .focus\:ring-offset-1:focus,
body.imgshop-admin-app--hb .imgshop-admin-main .focus\:ring-offset-2:focus {
  --tw-ring-offset-color: var(--hb-bg) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner input[type="checkbox"].border-gray-300,
body.imgshop-admin-app--hb .imgshop-admin-page-inner input[type="checkbox"].border-gray-400,
body.imgshop-admin-app--hb .imgshop-admin-page-inner input[type="radio"].border-gray-300,
body.imgshop-admin-app--hb .imgshop-admin-main input[type="checkbox"].border-gray-300 {
  border-color: var(--hb-border2) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .rounded-lg.border.border-gray-200.bg-white,
body.imgshop-admin-app--hb .imgshop-admin-page-inner .rounded-lg.border.border-gray-200 {
  border-color: var(--hb-border) !important;
  background-color: var(--hb-surface) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner table.min-w-full th,
body.imgshop-admin-app--hb .imgshop-admin-page-inner table.min-w-full td {
  border-right-color: transparent !important;
  border-left-color: transparent !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner table.min-w-full thead th {
  border-bottom-color: var(--hb-border) !important;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .admin-images-list tbody tr {
  border-top: 1px solid var(--hb-border);
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner .admin-images-list tbody tr:first-of-type {
  border-top: none;
}
body.imgshop-admin-app--hb .imgshop-admin-page-inner p code,
body.imgshop-admin-app--hb .imgshop-admin-page-inner li code,
body.imgshop-admin-app--hb .imgshop-admin-page-inner td code {
  background: var(--hb-surface2) !important;
  color: var(--hb-primary2) !important;
  border: 1px solid var(--hb-border) !important;
  padding: 0.12em 0.4em;
  border-radius: 4px;
  font-size: 0.85em;
}

/* ── 공개(imgshop-site--dark): 라이트 잔류·프로즈·다이얼로그·경고 ─────────── */
body.imgshop-site--dark .border-red-200.bg-red-50,
body.imgshop-site--dark .border-red-200.bg-red-50.text-red-800 {
  background-color: var(--hb-errorBg) !important;
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: var(--hb-error) !important;
}
body.imgshop-site--dark .border-amber-200.bg-amber-50,
body.imgshop-site--dark .border-amber-200.bg-amber-50.text-amber-900,
body.imgshop-site--dark .border-amber-200.bg-amber-50 .text-amber-800,
body.imgshop-site--dark .border-amber-200.bg-amber-50 .text-amber-900 {
  background-color: rgba(245, 158, 11, 0.12) !important;
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: var(--hb-warning) !important;
}
body.imgshop-site--dark .bg-amber-50.rounded-2xl.border-2.border-amber-400\/60,
body.imgshop-site--dark .bg-amber-50.rounded-xl.border.border-amber-200 {
  background-color: rgba(245, 158, 11, 0.1) !important;
  border-color: rgba(245, 158, 11, 0.45) !important;
  color: var(--hb-text) !important;
}
body.imgshop-site--dark .text-amber-800,
body.imgshop-site--dark .text-amber-950,
body.imgshop-site--dark .text-amber-900 {
  color: var(--hb-warning) !important;
}
body.imgshop-site--dark .text-red-700,
body.imgshop-site--dark .text-red-800 {
  color: var(--hb-error) !important;
}
body.imgshop-site--dark .text-emerald-700 {
  color: var(--hb-success) !important;
}
body.imgshop-site--dark .from-zinc-200 {
  --tw-gradient-from: var(--hb-surface2) var(--tw-gradient-from-position);
}
body.imgshop-site--dark .to-zinc-300 {
  --tw-gradient-to: var(--hb-surface3) var(--tw-gradient-to-position);
}
body.imgshop-site--dark dialog.rounded-2xl,
body.imgshop-site--dark dialog.rounded-xl {
  background-color: var(--hb-surface) !important;
  color: var(--hb-text) !important;
  border-color: var(--hb-border) !important;
}
body.imgshop-site--dark .prose,
body.imgshop-site--dark .prose-zinc {
  color: var(--hb-muted);
  max-width: none;
}
body.imgshop-site--dark .prose h1,
body.imgshop-site--dark .prose h2,
body.imgshop-site--dark .prose h3,
body.imgshop-site--dark .prose h4,
body.imgshop-site--dark .prose-zinc h1,
body.imgshop-site--dark .prose-zinc h2,
body.imgshop-site--dark .prose-zinc h3,
body.imgshop-site--dark .prose-zinc h4 {
  color: var(--hb-text);
}
body.imgshop-site--dark .prose a,
body.imgshop-site--dark .prose-zinc a {
  color: var(--hb-primary);
}
body.imgshop-site--dark .prose strong,
body.imgshop-site--dark .prose-zinc strong {
  color: var(--hb-text);
}
body.imgshop-site--dark .prose code,
body.imgshop-site--dark .prose-zinc code {
  background: var(--hb-surface2);
  color: var(--hb-text);
  border: 1px solid var(--hb-border);
}
body.imgshop-site--dark .prose blockquote,
body.imgshop-site--dark .prose-zinc blockquote {
  border-left-color: var(--hb-border2);
  color: var(--hb-muted);
}
body.imgshop-site--dark .search-result-card.border-zinc-200\/90,
body.imgshop-site--dark .search-result-card.border-zinc-200 {
  background-color: var(--hb-surface2) !important;
  border-color: var(--hb-border) !important;
}
body.imgshop-site--dark .search-result-card .text-zinc-600,
body.imgshop-site--dark .search-result-card .text-zinc-700 {
  color: var(--hb-muted) !important;
}

body.imgshop-site--dark input[type="checkbox"],
body.imgshop-site--dark input[type="radio"] {
  accent-color: var(--hb-primary);
}
body.imgshop-site--dark input[type="file"]::file-selector-button {
  border-radius: 0.5rem;
  border: 1px solid var(--hb-border2);
  background: var(--hb-surface2);
  color: var(--hb-text);
  padding: 0.35rem 0.75rem;
  margin-right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
body.imgshop-site--dark input[type="file"]::file-selector-button:hover {
  border-color: var(--hb-primary);
  background: var(--hb-primaryBg);
  color: var(--hb-primary);
}

/* 검색 상세 바: 정렬 `<details>` — Firefox 등에서 마커 숨김 */
.search-sort-details > summary {
  list-style: none;
}
.search-sort-details > summary::-moz-list-bullet {
  list-style: none;
}