/**
 * HOMEBOX Design System — agents/homebox-components.php 인라인 <style> 과 동일 계약
 * (참고: agents/homebox-components.jsx 의 C / F 토큰)
 * 적용 대상: body.imgshop-site--dark (공개), body.imgshop-admin-app--hb (관리자)
 */

body.imgshop-site--dark,
body.imgshop-admin-app--hb {
  --hb-bg: #0a0a0a;
  --hb-surface: #161616;
  --hb-surface2: #1f1f1f;
  --hb-surface3: #252525;
  --hb-border: #2a2a2a;
  --hb-border2: #3a3a3a;
  --hb-primary: #22c55e;
  --hb-primary2: #4ade80;
  --hb-primaryBg: rgba(34, 197, 94, 0.12);
  --hb-successBg: rgba(34, 197, 94, 0.12);
  --hb-success: #22c55e;
  --hb-text: #ffffff;
  --hb-muted: #888888;
  --hb-muted2: #555555;
  --hb-error: #ef4444;
  --hb-errorBg: rgba(239, 68, 68, 0.12);
  --hb-warning: #f59e0b;
  --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: dark;
  /* JSX F: 기준 대비 ~10% 축소 */
  font-size: 90.3%;
}

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;
}

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 {
  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(34, 197, 94, 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;
}

/* ── 공개(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;
}