/* ============================================================
   HOMEBOX Design System — site-wide token remap
   기존 Tailwind/커스텀(파랑·보라) 토큰을 mall(모노크롬+오렌지)로 통일.
   app.css / custom.css 이후 마지막에 로드. (mall.css 와 공존)
   ============================================================ */

/* ---- --hb-* 컴포넌트 토큰을 mall 값으로 ---- */
:root {
  --hb-primary:    #F5631E;
  --hb-primary2:   #C94E12;
  --hb-primary-dark: #C94E12;
  --hb-primaryBg:  #FDEDE4;
  --hb-primary-bg: #FDEDE4;
  --hb-cb-label:   #F5631E;
  --hb-text:       #16181D;
  --hb-muted:      #8B9099;
  --hb-muted2:     #B5BAC2;
  --hb-bg:         #F4F5F6;
  --hb-surface:    #FFFFFF;
  --hb-surface2:   #F8F9FA;
  --hb-surface3:   #F1F2F4;
  --hb-border:     #E9EBEE;
  --hb-border2:    #D8DCE2;
  --hb-success:    #1E9E6A;
  --hb-warning:    #C98A1E;
  --hb-error:      #E5484D;
}

/* ====== Tailwind 색 스케일 리매핑 (homebox=blue → orange) ====== */
/* 오렌지 램프 */
.text-homebox-50,.text-plani-50{color:#FFF7F2!important}
.text-homebox-100,.text-plani-100{color:#FDEDE4!important}
.text-homebox-200{color:#FAD6C3!important}
.text-homebox-300{color:#F6B595!important}
.text-homebox-400{color:#F58E5E!important}
.text-homebox-500,.text-plani-500,.text-coral-500{color:#F5631E!important}
.text-homebox-600,.text-plani-600,.text-coral-600,.text-primary{color:#F5631E!important}
.text-homebox-700,.text-plani-700{color:#C94E12!important}
.text-homebox-800{color:#9F3E10!important}
.text-homebox-900{color:#7C310D!important}

.bg-homebox-50,.bg-plani-50{background-color:#FFF7F2!important}
.bg-homebox-100,.bg-plani-100{background-color:#FDEDE4!important}
.bg-homebox-200{background-color:#FAD6C3!important}
.bg-homebox-300{background-color:#F6B595!important}
.bg-homebox-400{background-color:#F58E5E!important}
.bg-homebox-500,.bg-plani-500,.bg-coral-500{background-color:#F5631E!important}
.bg-homebox-600,.bg-plani-600,.bg-coral-600,.bg-primary{background-color:#F5631E!important}
.bg-homebox-700,.bg-plani-700,.bg-primary-dark{background-color:#C94E12!important}
.bg-homebox-800{background-color:#9F3E10!important}
.bg-homebox-900{background-color:#7C310D!important}

.border-homebox-100,.border-plani-100{border-color:#FDEDE4!important}
.border-homebox-200,.border-plani-200{border-color:#FAD6C3!important}
.border-homebox-300,.border-plani-300{border-color:#F6B595!important}
.border-homebox-400{border-color:#F58E5E!important}
.border-homebox-500,.border-coral-500{border-color:#F5631E!important}
.border-homebox-600,.border-plani-600,.border-primary{border-color:#F5631E!important}
.border-homebox-700{border-color:#C94E12!important}

.ring-homebox-100{--tw-ring-color:#FDEDE4!important}
.ring-homebox-200{--tw-ring-color:#FAD6C3!important}
.ring-homebox-500,.ring-homebox-600,.ring-primary{--tw-ring-color:#F5631E!important}

.from-homebox-600,.from-homebox-500,.from-plani-600{--tw-gradient-from:#F5631E var(--tw-gradient-from-position)!important}
.to-homebox-600,.to-violet-600,.to-plani-600{--tw-gradient-to:#C94E12 var(--tw-gradient-to-position)!important}
.via-homebox-50,.via-plani-50{--tw-gradient-via-position: ;}

/* hover/focus 변형 (자주 쓰는 것만) */
.hover\:bg-homebox-50:hover,.hover\:bg-homebox-50\/60:hover{background-color:#FFF7F2!important}
.hover\:bg-homebox-100:hover{background-color:#FDEDE4!important}
.hover\:bg-homebox-700:hover,.hover\:bg-primary-dark:hover{background-color:#C94E12!important}
.hover\:bg-homebox-600:hover{background-color:#F5631E!important}
.hover\:text-homebox-600:hover,.hover\:text-homebox-700:hover,.hover\:text-primary:hover{color:#C94E12!important}
.hover\:border-homebox-300:hover,.hover\:border-homebox-400:hover,.hover\:border-homebox-500:hover,.hover\:border-homebox-600:hover{border-color:#F5631E!important}
.group:hover .group-hover\:text-homebox-700{color:#C94E12!important}

/* ====== 보라(violet) → ink/오렌지 ====== */
.text-violet-400,.text-violet-500,.text-violet-600,.text-violet-700{color:#C94E12!important}
.bg-violet-50{background-color:#FFF7F2!important}
.bg-violet-500,.bg-violet-600,.bg-violet-700{background-color:#F5631E!important}
.border-violet-200,.border-violet-300,.border-violet-600{border-color:#F6B595!important}
.from-violet-600,.from-violet-500{--tw-gradient-from:#C94E12 var(--tw-gradient-from-position)!important}

/* 본문 기본 텍스트/배경 톤 보정 (블루빛 ink → 차콜) */
:root{ --color-ink-900:#16181D; }

/* ---- hidden 속성이 display:grid/flex 등 컴포넌트 규칙에 먹히는 문제 방지 ----
   (예: .plans{display:grid} 가 [hidden] 을 덮어써 월간+연간이 동시 노출) */
[hidden] { display: none !important; }

/* ====== 남은 쿨톤 액센트(파랑/인디고/하늘/청록) 전부 오렌지/잉크로 ====== */
.text-blue-400,.text-blue-500,.text-blue-600,.text-blue-700,
.text-indigo-400,.text-indigo-500,.text-indigo-600,.text-indigo-700,
.text-sky-500,.text-sky-600,.text-sky-700,
.text-cyan-500,.text-cyan-600 { color:#C94E12 !important; }

.bg-blue-50,.bg-indigo-50,.bg-sky-50,.bg-cyan-50 { background-color:#FFF7F2 !important; }
.bg-blue-100,.bg-indigo-100,.bg-sky-100 { background-color:#FDEDE4 !important; }
.bg-blue-500,.bg-blue-600,.bg-blue-700,
.bg-indigo-500,.bg-indigo-600,.bg-indigo-700,
.bg-sky-500,.bg-sky-600 { background-color:#F5631E !important; }

.border-blue-200,.border-blue-300,.border-blue-500,.border-blue-600,
.border-indigo-200,.border-indigo-300,.border-indigo-600,
.border-sky-200,.border-sky-300 { border-color:#F6B595 !important; }

.ring-blue-500,.ring-blue-600,.ring-indigo-500,.ring-sky-500,.ring-sky-200 { --tw-ring-color:#F5631E !important; }

.from-blue-500,.from-blue-600,.from-indigo-500,.from-indigo-600,.from-sky-500,
.from-blue-50,.from-sky-50,.via-blue-50,.via-indigo-50,.via-sky-50 { --tw-gradient-from:#F5631E var(--tw-gradient-from-position) !important; }
.to-blue-600,.to-indigo-600,.to-indigo-700,.to-sky-600,.to-purple-600,.to-fuchsia-600 { --tw-gradient-to:#C94E12 var(--tw-gradient-to-position) !important; }

.hover\:bg-blue-700:hover,.hover\:bg-indigo-700:hover { background-color:#C94E12 !important; }
.hover\:text-blue-600:hover,.hover\:text-indigo-600:hover,.hover\:text-sky-600:hover { color:#C94E12 !important; }
.hover\:border-blue-300:hover,.hover\:border-indigo-300:hover,.hover\:border-sky-300:hover { border-color:#F5631E !important; }

/* purple/fuchsia 잔여 → 오렌지 */
.text-purple-500,.text-purple-600,.text-fuchsia-500,.text-fuchsia-600 { color:#C94E12 !important; }
.bg-purple-500,.bg-purple-600,.bg-fuchsia-500,.bg-fuchsia-600 { background-color:#F5631E !important; }

/* ai-pdp: 보라/파랑 에이전트 버튼 그라데이션이 인라인이 아닌 클래스인 경우 대비 */
#ai-studio-page [style*="124, 58, 237"],
#ai-studio-page [style*="79, 70, 229"] { background-image:none !important; }

/* ---- 공개 페이지 배경: 푸른빛 레거시 제거 → mall 화이트 ---- */
body.imgshop-site { background: var(--bg) !important; }

/* ---- 스토어 검색 결과: 이미지를 원본 비율대로(마손리) ---- */
#storeGrid {
  display: block;
  column-count: 4;
  column-gap: 16px;
}
#storeGrid > .gcard {
  break-inside: avoid;
  margin-bottom: 16px;
  display: inline-block;
  width: 100%;
}
#storeGrid .gcard__media { aspect-ratio: auto !important; height: auto !important; }
#storeGrid .gcard__media img { position: static !important; height: auto !important; width: 100%; aspect-ratio: auto !important; object-fit: contain !important; }
@media (max-width: 1100px) { #storeGrid { column-count: 3; } }
@media (max-width: 760px) { #storeGrid { column-count: 2; } }
@media (max-width: 460px) { #storeGrid { column-count: 1; } }