/* ============================================================
   kcshop.css — 한채움 디자인 시스템
   파스텔 소프트 팔레트 (부드러운 한복 색감)
   ============================================================ */


/* ── 1. CSS 변수 (Design Tokens) ─────────────────────────── */

:root {
  /* 더스티 라벤더 블루 (메인) */
  --color-jjok:       #7B8EC4;
  --color-jjok-lt:    #A4B3D8;
  --color-jjok-dk:    #5C70AC;
  --color-jjok-mist:  #EEF1FA;

  /* 소프트 골드 (포인트) */
  --color-gold:       #C4A070;
  --color-gold-lt:    #E4C898;
  --color-gold-dk:    #A08050;
  --color-gold-tint:  #FBF6EE;

  /* 더스티 로즈 (서브) */
  --color-jaju:       #C89098;
  --color-jaju-lt:    #F8EEF0;

  /* 크림 아이보리 (배경) */
  --color-hanji:      #FAF8F5;
  --color-mosi:       #F3F0E8;
  --color-border-trad: #E0D8CC;

  /* 소프트 브라운 (텍스트) */
  --color-ink:        #3C3530;
  --color-ink-mid:    #7A7068;
  --color-ink-lt:     #B0A898;

  /* 헤더 전용 */
  --color-header-bg:  #FFFFFF;
  --color-header-border: #EDE8E0;
  --color-util-bg:    #F8F5F0;

  /* 시맨틱 별칭 */
  --color-primary:    var(--color-jjok);
  --color-secondary:  var(--color-jaju);
  --color-accent:     var(--color-gold);
  --color-surface:    var(--color-hanji);
  --color-text:       var(--color-ink);
  --color-text-muted: var(--color-ink-mid);
  --color-border:     var(--color-border-trad);

  /* 타이포그래피 */
  --font-sans:        'Noto Sans KR', 'Apple SD Gothic Neo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-size-base:   16px;
  --line-height-base: 1.7;

  /* 간격 시스템 */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  40px;
  --space-2xl: 64px;

  /* 컴포넌트 */
  --btn-primary-bg:    var(--color-jjok);
  --btn-primary-color: #fff;
  --btn-gold-bg:       var(--color-gold);
  --btn-gold-color:    #fff;
  --card-radius:       6px;
  --card-shadow:       0 1px 4px rgba(60,53,48,.06);
  --card-border:       1px solid var(--color-border-trad);
  --input-border:      var(--color-border-trad);
  --input-focus-ring:  0 0 0 3px rgba(123,142,196,.2);
}


/* ── 1b. 다크 모드 변수 ──────────────────────────────────── */

[data-theme="dark"] {
  --color-hanji:        #16140F;
  --color-mosi:         #1E1C16;
  --color-border-trad:  #3A3530;

  --color-ink:          #EDE8E0;
  --color-ink-mid:      #C0B8AC;
  --color-ink-lt:       #8A8278;

  --color-header-bg:    #1C1A16;
  --color-header-border:#2E2C28;
  --color-util-bg:      #141210;

  --color-surface:      #1E1C16;
  --color-text:         #EDE8E0;
  --color-text-muted:   #C0B8AC;
  --color-border:       #3A3530;

  --card-shadow:        0 2px 8px rgba(0,0,0,.35);
  --card-border:        1px solid #2E2C28;
  --input-border:       #3A3530;
}

[data-theme="dark"] body {
  background-color: var(--color-hanji);
  color: var(--color-ink);
}

/* 다크 모드 — 프로모션 배너 */
[data-theme="dark"] .promo-bar {
  background: linear-gradient(90deg, #1A3530 0%, #1E3A36 45%, #182E2A 100%);
  border-bottom-color: #2A4A44;
}
[data-theme="dark"] .promo-bar__text { color: #90C8BE; }
[data-theme="dark"] .promo-highlight  { color: #D4A860; }
[data-theme="dark"] .promo-code       { color: #90A8D8; }

/* 다크 모드 — 로고 행 */
[data-theme="dark"] .logo-row {
  background-color: var(--color-header-bg);
  border-bottom-color: var(--color-header-border);
}
[data-theme="dark"] .brand-name-lg { color: #EDE8E0; }

/* 라이트/다크 로고 토글 — 다크 로고가 있을 때만 사용 */
.brand-logo-img--dark { display: none; }
[data-theme="dark"] .brand-logo-img--light { display: none; }
[data-theme="dark"] .brand-logo-img--dark { display: inline-block; }

/* 다크 로고가 등록되지 않은 경우 폴백 — 라이트 로고를 다크 배경에서 또렷이 보이게 보정.
   .brand-logo-img--light 클래스가 붙어 있지 않은(=단독 라이트 로고) 경우만 적용 */
[data-theme="dark"] .brand-logo-img:not(.brand-logo-img--light):not(.brand-logo-img--dark) {
  filter: brightness(1.85) contrast(1.05);
}
[data-theme="dark"] .brand-tagline  { color: #8A8278; }
[data-theme="dark"] .brand-box {
  background: rgba(123,142,196,.12);
  border-color: var(--color-jjok-lt);
  color: var(--color-jjok-lt);
}

/* 다크 모드 — 네비게이션 */
[data-theme="dark"] .main-nav {
  background-color: var(--color-header-bg) !important;
  border-bottom-color: var(--color-header-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
[data-theme="dark"] .nav-menu-link         { color: #C0B8AC !important; }
[data-theme="dark"] .nav-menu-link:hover   { color: var(--color-jjok-lt) !important; }
[data-theme="dark"] .nav-menu-link.active  {
  color: var(--color-jjok-lt) !important;
  background: rgba(123,142,196,.14);
}
[data-theme="dark"] .nav-menu-link.active::after { background: var(--color-jjok-lt); }
[data-theme="dark"] .nav-icon-link         { color: #C0B8AC !important; }
[data-theme="dark"] .nav-icon-link:hover   { color: var(--color-jjok-lt) !important; }

/* 다크 모드 — 우측 버튼 */
[data-theme="dark"] .nav-theme-switch__track { background: #3A3830; }
[data-theme="dark"] .nav-theme-switch__input:checked ~ .nav-theme-switch__track {
  background: var(--color-jjok-dk);
}
[data-theme="dark"] .nav-theme-switch__sun  { color: #8A8278; }
[data-theme="dark"] .nav-theme-switch__moon { color: var(--color-jjok-lt); }

[data-theme="dark"] .nav-btn-outline {
  border-color: #3A3530;
  color: #C0B8AC;
}
[data-theme="dark"] .nav-btn-outline:hover { border-color: var(--color-jjok-lt); color: var(--color-jjok-lt); }

[data-theme="dark"] .nav-btn-lang {
  border-color: #3A3530;
  color: #C0B8AC;
}
[data-theme="dark"] .nav-btn-lang:hover,
[data-theme="dark"] .nav-btn-lang[aria-expanded="true"] {
  border-color: var(--color-jjok-lt);
  color: var(--color-jjok-lt);
  background: rgba(123,142,196,.1);
}
[data-theme="dark"] .lang-dropdown {
  background: #242018;
  border-color: #3A3530;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
}
[data-theme="dark"] .lang-dropdown__header {
  color: #6A6260;
  border-bottom-color: #3A3530;
}
[data-theme="dark"] .lang-item { color: #C0B8AC; }
[data-theme="dark"] .lang-item:hover {
  background: rgba(123,142,196,.12);
  color: var(--color-jjok-lt);
}
[data-theme="dark"] .lang-dropdown .lang-item.active {
  color: var(--color-jjok-lt) !important;
  background: rgba(123,142,196,.14) !important;
}
[data-theme="dark"] .lang-item__check { color: var(--color-jjok-lt); }

/* 다크 모드 — 드롭다운 메뉴 */
[data-theme="dark"] .dropdown-menu {
  background: #242018;
  border-color: #3A3530;
}
[data-theme="dark"] .dropdown-item        { color: #C0B8AC; }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus  { background: rgba(123,142,196,.1); color: var(--color-jjok-lt); }
[data-theme="dark"] .dropdown-divider     { border-color: #3A3530; }

/* ── 2. 베이스 스타일 ─────────────────────────────────────── */

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

html {
  font-size: var(--font-size-base);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-ink);
  background-color: var(--color-hanji);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .25s ease, color .25s ease;
}

/* ─────────────────────────────────────────────
   모드 전환 체계화 — 한 번 토글로 모든 요소가 동기 전환
   ─────────────────────────────────────────────
   원리:
   - `:root` 와 `[data-theme="dark"]` 에서 변수 재정의 → 변수를 쓰는 모든 요소 자동 일괄 전환
   - 변수가 아닌 직접 색상 룰도 함께 부드럽게 보이도록 모든 자손에 transition-property 일괄 적용
   - timing 은 모두 .18s (헤더·콘텐츠·푸터 전부 같은 속도) → 동기화로 "안 바뀐 것처럼" 인지 차단
   - 첫 페이지 로드 시 깜빡임 없도록 .theme-ready 가 붙은 후에만 transition 발동
─────────────────────────────────────────────── */
.theme-ready,
.theme-ready *,
.theme-ready *::before,
.theme-ready *::after {
  transition-property:
    background-color,
    background-image,
    color,
    border-color,
    outline-color,
    box-shadow,
    fill,
    stroke,
    filter,
    opacity;
  transition-duration: .18s;
  transition-timing-function: ease-out;
}

/* 위젯 자체 애니메이션이 있는 요소는 그 룰을 우선으로 */
.theme-ready .carousel-item,
.theme-ready [class*="animate"],
.theme-ready .nav-theme-switch__thumb {
  transition-duration: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  color: var(--color-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
}

a {
  color: var(--color-jjok);
  text-decoration: none;
  transition: color 0.18s ease;
}

a:hover {
  color: var(--color-jjok-lt);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

::selection {
  background: var(--color-gold-lt);
  color: var(--color-jjok-dk);
}


/* ── 3. Bootstrap 5.3 오버라이드 ─────────────────────────── */

/* ── 3-1. 버튼 ── */

.btn {
  border-radius: var(--card-radius);
  font-family: var(--font-sans);
  letter-spacing: 0.3px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-primary {
  background-color: var(--color-jjok);
  border-color: var(--color-jjok-dk);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--color-jjok-lt);
  border-color: var(--color-jjok);
  color: #fff;
}

.btn-primary:active {
  background-color: var(--color-jjok-dk) !important;
  border-color: var(--color-jjok-dk) !important;
}

.btn-primary:focus-visible {
  box-shadow: var(--input-focus-ring);
}

/* Gold CTA — 최우선 행동 유도 */
.btn-gold {
  background-color: var(--color-gold);
  border: none;
  color: var(--color-jjok-dk);
  font-weight: 500;
  border-radius: var(--card-radius);
}

.btn-gold:hover,
.btn-gold:focus-visible {
  background-color: var(--color-gold-lt);
  color: var(--color-jjok-dk);
  border: none;
}

.btn-gold:active {
  background-color: var(--color-gold-dk) !important;
  color: #fff !important;
}

.btn-gold:focus-visible {
  box-shadow: 0 0 0 3px rgba(184, 145, 63, 0.3);
}

/* Secondary → 자주 */
.btn-secondary {
  background-color: var(--color-jaju);
  border-color: var(--color-jaju);
  color: #fff;
  border-radius: var(--card-radius);
}

.btn-secondary:hover,
.btn-secondary:focus-visible {
  background-color: #8f3847;
  border-color: #8f3847;
  color: #fff;
}

/* Ghost 버튼 */
.btn-outline-primary {
  border-color: var(--color-jjok);
  color: var(--color-jjok);
  border-radius: var(--card-radius);
  background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
  background-color: var(--color-jjok-mist);
  color: var(--color-jjok);
  border-color: var(--color-jjok);
}

.btn-outline-gold {
  border-color: var(--color-gold);
  color: var(--color-gold-dk);
  border-radius: var(--card-radius);
  background-color: transparent;
}

.btn-outline-gold:hover {
  background-color: var(--color-gold-tint);
  color: var(--color-gold-dk);
  border-color: var(--color-gold);
}

/* ── 3-2. 카드 ── */

.card {
  border-radius: var(--card-radius);
  border: var(--card-border);
  background-color: #fff;
  box-shadow: var(--card-shadow);
}

.card-header {
  background-color: var(--color-mosi);
  border-bottom: var(--card-border);
  font-weight: 500;
  color: var(--color-ink);
}

.card-footer {
  background-color: var(--color-mosi);
  border-top: var(--card-border);
}

/* ── 3-3. 뱃지 ── */

.badge {
  border-radius: 2px;
  font-weight: 400;
  letter-spacing: 0.4px;
}

.badge-best {
  background-color: var(--color-jjok);
  color: var(--color-gold-lt);
}

.badge-new {
  background-color: var(--color-jaju);
  color: #F9E8EC;
}

.badge-sale {
  background-color: var(--color-gold);
  color: var(--color-jjok-dk);
}

.badge-rental {
  background-color: var(--color-jjok-mist);
  color: var(--color-jjok);
}

/* ── 3-4. 폼 입력 ── */

.form-control,
.form-select {
  border-color: var(--input-border);
  border-radius: var(--card-radius);
  color: var(--color-ink);
  background-color: #fff;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--color-jjok);
  box-shadow: var(--input-focus-ring);
  outline: none;
}

.form-control::placeholder {
  color: var(--color-ink-lt);
}

.form-label {
  font-weight: 400;
  color: var(--color-ink-mid);
  font-size: 0.875rem;
  margin-bottom: 4px;
}

.form-text {
  color: var(--color-ink-lt);
}

.invalid-feedback {
  color: var(--color-jaju);
}

.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--color-jaju);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(122, 47, 61, 0.15);
}

/* ── 3-5. 내비게이션 ── */

.navbar {
  background-color: var(--color-header-bg);
  border-bottom: 1px solid var(--color-header-border);
  box-shadow: 0 1px 8px rgba(60,53,48,.06);
}

.navbar-brand {
  color: var(--color-jjok) !important;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.navbar-nav .nav-link {
  color: var(--color-ink-mid);
  transition: color 0.18s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: var(--color-jjok) !important;
}

.navbar-toggler {
  border-color: var(--color-border-trad);
}

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%237A7068' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ── 3-6. 드롭다운 ── */

.dropdown-menu {
  border: var(--card-border);
  border-radius: var(--card-radius);
  background-color: #fff;
  box-shadow: 0 4px 16px rgba(28, 26, 20, 0.1);
  padding: 4px 0;
}

.dropdown-item {
  color: var(--color-ink);
  font-size: 0.9rem;
  padding: 8px 16px;
  transition: background-color 0.15s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--color-jjok-mist);
  color: var(--color-jjok);
}

.dropdown-item.active {
  background-color: var(--color-jjok);
  color: #fff;
}

.dropdown-divider {
  border-top-color: var(--color-border-trad);
  opacity: 1;
}

/* ── 3-7. 페이지네이션 ── */

.pagination .page-link {
  color: var(--color-jjok);
  border-color: var(--color-border-trad);
  background-color: #fff;
  border-radius: var(--card-radius) !important;
  margin: 0 2px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.pagination .page-link:hover {
  background-color: var(--color-jjok-mist);
  color: var(--color-jjok);
  border-color: var(--color-jjok);
}

.pagination .page-item.active .page-link {
  background-color: var(--color-jjok);
  border-color: var(--color-jjok-dk);
  color: #fff;
}

.pagination .page-item.disabled .page-link {
  color: var(--color-ink-lt);
  background-color: var(--color-mosi);
}

/* ── 3-8. 알림 (Alert) ── */

.alert {
  border-radius: var(--card-radius);
  border-width: 0;
  border-left: 3px solid;
}

.alert-info {
  background-color: var(--color-jjok-mist);
  border-left-color: var(--color-jjok);
  color: var(--color-jjok-dk);
}

.alert-warning {
  background-color: var(--color-gold-tint);
  border-left-color: var(--color-gold);
  color: var(--color-gold-dk);
}

.alert-danger {
  background-color: var(--color-jaju-lt);
  border-left-color: var(--color-jaju);
  color: var(--color-jaju);
}

.alert-success {
  background-color: #EBF5ED;
  border-left-color: #4A7C59;
  color: #2E5039;
}

/* ── 3-9. 테이블 ── */

.table {
  color: var(--color-ink);
  border-color: var(--color-border-trad);
}

.table thead th {
  background-color: var(--color-mosi);
  color: var(--color-ink);
  border-bottom: 1.5px solid var(--color-border-trad);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: 0.2px;
}

.table tbody tr:hover {
  background-color: var(--color-jjok-mist);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(237, 232, 220, 0.4);
}

/* ── 3-10. 모달 ── */

.modal-content {
  border-radius: var(--card-radius);
  border: var(--card-border);
  box-shadow: 0 8px 32px rgba(28, 26, 20, 0.15);
}

.modal-header {
  background-color: var(--color-mosi);
  border-bottom: var(--card-border);
  padding: var(--space-md) var(--space-lg);
}

.modal-title {
  font-weight: 500;
  color: var(--color-ink);
}

.modal-footer {
  background-color: var(--color-mosi);
  border-top: var(--card-border);
}

.btn-close {
  opacity: 0.5;
  filter: none;
}

/* ── 3-11. 탭 ── */

.nav-tabs {
  border-bottom: 1.5px solid var(--color-border-trad);
}

.nav-tabs .nav-link {
  color: var(--color-ink-mid);
  border-radius: var(--card-radius) var(--card-radius) 0 0;
  border: 1px solid transparent;
  padding: 8px 16px;
  font-size: 0.9rem;
}

.nav-tabs .nav-link:hover {
  color: var(--color-jjok);
  background-color: var(--color-jjok-mist);
  border-color: transparent;
}

.nav-tabs .nav-link.active {
  color: var(--color-jjok);
  background-color: var(--color-hanji);
  border-color: var(--color-border-trad) var(--color-border-trad) var(--color-hanji);
  font-weight: 500;
}

/* ── 3-12. 진행 표시줄 ── */

.progress {
  background-color: var(--color-mosi);
  border-radius: var(--card-radius);
  height: 6px;
}

.progress-bar {
  background-color: var(--color-jjok);
}

.progress-bar.bg-gold {
  background-color: var(--color-gold);
}

/* ── 3-13. 뱃지 기본 ── */

.badge.bg-primary { background-color: var(--color-jjok) !important; }
.badge.bg-secondary { background-color: var(--color-jaju) !important; }
.badge.bg-warning {
  background-color: var(--color-gold) !important;
  color: var(--color-jjok-dk) !important;
}


/* ── 4. 컴포넌트 ──────────────────────────────────────────── */

/* ── 4-1. 섹션 제목 (황금 좌측 강조바) ── */

.section-title {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--color-ink);
  padding-left: 12px;
  border-left: 3px solid var(--color-gold);
  margin-bottom: var(--space-lg);
  letter-spacing: -0.01em;
}

.section-title-lg {
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--color-ink);
  padding-left: 14px;
  border-left: 4px solid var(--color-gold);
  margin-bottom: var(--space-xl);
}

/* ── 4-2. 상품 카드 ── */

.product-card {
  border: var(--card-border);
  border-radius: var(--card-radius);
  background-color: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.product-card:hover {
  border-color: var(--color-jjok);
  box-shadow: 0 2px 12px rgba(44, 62, 107, 0.1);
}

.product-card .product-img-wrap {
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--color-mosi);
}

.product-card .product-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.product-card:hover .product-img-wrap img {
  transform: scale(1.04);
}

.product-card .product-info {
  padding: var(--space-sm) var(--space-md);
}

.product-card .product-name {
  font-size: 0.9rem;
  color: var(--color-ink);
  font-weight: 400;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product-card .price {
  color: var(--color-jjok);
  font-weight: 500;
  font-size: 0.95rem;
}

.product-card .price-jaju {
  color: var(--color-jaju);
  font-weight: 500;
}

.product-card .price-gold {
  color: var(--color-gold-dk);
  font-weight: 500;
}

.product-card .rent-price {
  font-size: 0.75rem;
  color: var(--color-ink-lt);
}

.product-card .badge-wrap {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* ── 4-3. 목적·국가 배지 ── */

.badge-purpose {
  display: inline-block;
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.badge-purpose.purpose-rental {
  background-color: var(--color-jjok-mist);
  color: var(--color-jjok);
}

.badge-purpose.purpose-sale {
  background-color: var(--color-gold-tint);
  color: var(--color-gold-dk);
}

.badge-purpose.purpose-styling {
  background-color: var(--color-jaju-lt);
  color: var(--color-jaju);
}

.badge-country {
  display: inline-block;
  background-color: var(--color-jjok-mist);
  color: var(--color-jjok);
  font-size: 0.65rem;
  padding: 2px 7px;
  border-radius: 2px;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

/* ── 4-4. 구분선 ── */

.divider-trad {
  height: 1px;
  background-color: var(--color-border-trad);
  border: none;
  margin: var(--space-lg) 0;
}

.divider-gold {
  height: 2px;
  background-color: var(--color-gold);
  border: none;
  margin: var(--space-lg) 0;
}

/* ── 4-5. 한지 배경 텍스처 ── */

.bg-hanji {
  background-color: var(--color-hanji);
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23b5a98a' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── 4-6. 히어로 배너 ── */

.hero-banner {
  position: relative;
  background-color: var(--color-jjok-dk);
  overflow: hidden;
  min-height: 480px;
  display: flex;
  align-items: center;
}

.hero-banner .hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(26, 38, 71, 0.75) 0%,
    rgba(26, 38, 71, 0.35) 100%
  );
}

.hero-banner .hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
}

.hero-banner .hero-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 300;
  letter-spacing: 0.02em;
  color: #fff;
  line-height: 1.35;
}

.hero-banner .hero-subtitle {
  color: var(--color-gold-lt);
  font-size: 1rem;
  letter-spacing: 0.5px;
}

/* ── 4-7. 상품 상세 ── */

.product-detail-gallery {
  border: var(--card-border);
  border-radius: var(--card-radius);
  overflow: hidden;
  background-color: var(--color-mosi);
}

.product-detail-price {
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--color-jjok);
}

.product-detail-rent-price {
  font-size: 1rem;
  color: var(--color-gold-dk);
  font-weight: 400;
}

.product-detail-divider {
  height: 1px;
  background-color: var(--color-border-trad);
  margin: var(--space-md) 0;
}

/* ── 4-8. 리뷰 별점 ── */

.star-rating .star {
  color: var(--color-border-trad);
  font-size: 1rem;
}

.star-rating .star.filled {
  color: var(--color-gold);
}

/* ── 4-9. 브레드크럼 ── */

.breadcrumb {
  background-color: transparent;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--color-ink-lt);
}

.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-border-trad);
  content: "›";
}

.breadcrumb-item a {
  color: var(--color-ink-mid);
}

.breadcrumb-item.active {
  color: var(--color-ink-lt);
}

/* ── 4-10. 장바구니 ── */

.cart-item {
  border-bottom: var(--card-border);
  padding: var(--space-md) 0;
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-total {
  border-top: 1.5px solid var(--color-border-trad);
  padding-top: var(--space-md);
}

.cart-total .total-label {
  color: var(--color-ink-mid);
  font-size: 0.875rem;
}

.cart-total .total-value {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-jjok);
}

/* ── 4-11. 주문 상태 배지 ── */

.order-status {
  display: inline-block;
  font-size: 0.75rem;
  padding: 3px 8px;
  border-radius: 2px;
  letter-spacing: 0.3px;
  font-weight: 400;
}

.order-status-pending   { background: var(--color-mosi);       color: var(--color-ink-mid); }
.order-status-paid      { background: var(--color-jjok-mist);  color: var(--color-jjok); }
.order-status-preparing { background: var(--color-jjok-mist);  color: var(--color-jjok); }
.order-status-shipping  { background: var(--color-gold-tint);  color: var(--color-gold-dk); }
.order-status-shipped   { background: var(--color-gold-tint);  color: var(--color-gold-dk); }
.order-status-delivered { background: #EBF5ED;                 color: #2E5039; }
.order-status-cancelled { background: var(--color-jaju-lt);    color: var(--color-jaju); }
.order-status-refunded  { background: var(--color-jaju-lt);    color: var(--color-jaju); }
/* 렌탈 예약 상태 */
.order-status-confirmed { background: var(--color-jjok-mist);  color: var(--color-jjok); }
.order-status-renting   { background: var(--color-gold-tint);  color: var(--color-gold-dk); }
.order-status-returned  { background: #EBF5ED;                 color: #2E5039; }
.order-status-no_show   { background: var(--color-jaju-lt);    color: var(--color-jaju); }

/* ── 4-12. 렌탈 예약 캘린더 ── */

.rental-calendar-cell {
  border: var(--card-border);
  border-radius: var(--card-radius);
  padding: var(--space-sm);
  cursor: pointer;
  transition: background-color 0.15s ease;
  min-height: 40px;
  text-align: center;
  font-size: 0.875rem;
}

.rental-calendar-cell:hover:not(.disabled) {
  background-color: var(--color-jjok-mist);
  border-color: var(--color-jjok);
}

.rental-calendar-cell.selected {
  background-color: var(--color-jjok);
  color: #fff;
  border-color: var(--color-jjok-dk);
}

.rental-calendar-cell.in-range {
  background-color: var(--color-jjok-mist);
  border-color: transparent;
}

.rental-calendar-cell.rented {
  background-color: var(--color-jaju-lt);
  color: var(--color-jaju);
  cursor: not-allowed;
}

.rental-calendar-cell.disabled {
  background-color: var(--color-mosi);
  color: var(--color-ink-lt);
  cursor: not-allowed;
  opacity: 0.6;
}

/* ── 4-13. 마이페이지 사이드바 ── */

.mypage-sidebar .nav-link {
  color: var(--color-ink-mid);
  border-radius: var(--card-radius);
  padding: 8px 12px;
  font-size: 0.9rem;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.mypage-sidebar .nav-link:hover {
  background-color: var(--color-jjok-mist);
  color: var(--color-jjok);
}

.mypage-sidebar .nav-link.active {
  background-color: var(--color-jjok-mist);
  color: var(--color-jjok);
  font-weight: 500;
  border-left: 3px solid var(--color-jjok);
}

/* ── 4-14. 대시보드 (어드민) ── */

.dashboard-stat-card {
  border: var(--card-border);
  border-radius: var(--card-radius);
  background-color: #fff;
  padding: var(--space-lg);
}

.dashboard-stat-card .stat-value {
  font-size: 1.75rem;
  font-weight: 500;
  color: var(--color-jjok);
}

.dashboard-stat-card .stat-label {
  font-size: 0.8125rem;
  color: var(--color-ink-lt);
  margin-top: 2px;
}

.dashboard-stat-card .stat-delta {
  font-size: 0.8rem;
}

.dashboard-stat-card .stat-delta.up   { color: #4A7C59; }
.dashboard-stat-card .stat-delta.down { color: var(--color-jaju); }

/* ── 4-15. 토스트 ── */

.toast {
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: 0 4px 16px rgba(28, 26, 20, 0.12);
}

.toast-header {
  background-color: var(--color-mosi);
  color: var(--color-ink);
  border-bottom: var(--card-border);
}

/* ── 4-16. 스크롤바 (웹킷) ── */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-mosi);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-trad);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-ink-lt);
}

/* ── 4-17. 프로모션 배너 ── */

.promo-bar {
  background: linear-gradient(90deg, #B8DDD8 0%, #D8EEE8 45%, #F0F8F5 100%);
  padding: 7px 0;
  text-align: center;
  border-bottom: 1px solid rgba(100,180,160,.18);
}
.promo-bar__text {
  font-size: .78rem;
  color: #2A5C52;
  margin: 0;
  letter-spacing: .15px;
}
.promo-highlight {
  color: #7A5010;
  font-weight: 700;
}
.promo-code {
  color: #3A5C9A;
  font-weight: 700;
  letter-spacing: .5px;
}

/* ── 4-17b. 로고 행 ── */

.logo-row {
  background-color: var(--color-header-bg);
  border-bottom: 1px solid var(--color-header-border);
  padding: 14px 0;
  text-align: center;
}
.logo-row__link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
}
.brand-box {
  width: 54px;
  height: 54px;
  border: 2px solid var(--color-jjok);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--color-jjok);
  flex-shrink: 0;
  letter-spacing: 0;
  font-family: 'Noto Serif KR', 'Noto Sans KR', serif;
  background: var(--color-jjok-mist);
}
.brand-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.brand-name-lg {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--color-ink-dk);
  letter-spacing: .02em;
  line-height: 1.2;
}
.brand-tagline {
  font-size: .72rem;
  color: var(--color-ink-lt);
  letter-spacing: .12em;
  line-height: 1;
}

/* 로고 이미지 (텍스트 심볼 대체) */
.brand-logo-img {
  height: 54px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-logo-img--mobile {
  height: 36px;
  max-width: 100px;
}

/* ── 4-18. 메인 네비게이션 ── */

.main-nav {
  background-color: var(--color-header-bg) !important;
  border-bottom: 1px solid var(--color-header-border);
  box-shadow: 0 2px 12px rgba(60,53,48,.07);
  padding: 0;
}

.brand-name {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--color-jjok);
  line-height: 1;
}
.brand-sub {
  display: block;
  font-size: .62rem;
  letter-spacing: .18em;
  color: var(--color-ink-lt);
  margin-top: 2px;
  line-height: 1;
}

.nav-menu-link {
  color: #4A4540 !important;
  font-size: .9rem;
  font-weight: 500;
  padding: 1.1rem .85rem !important;
  letter-spacing: .15px;
  transition: color .18s, background .18s !important;
  position: relative;
  border-radius: 6px;
}
.nav-menu-link:hover { color: var(--color-jjok-dk) !important; }

/* active — 배경 필 + 굵은 글씨 + 하단 인디케이터 */
.nav-menu-link.active {
  color: var(--color-jjok-dk) !important;
  font-weight: 700;
  background: var(--color-jjok-mist);
}
.nav-menu-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: .85rem;
  right: .85rem;
  height: 2.5px;
  background: var(--color-jjok-dk);
  border-radius: 2px 2px 0 0;
}

.nav-icon-link {
  color: #4A4540 !important;
  font-size: 1.05rem;
  transition: color .15s !important;
}
.nav-icon-link:hover { color: var(--color-jjok-dk) !important; }

.nav-cart-badge {
  position: absolute;
  top: 4px;
  right: 2px;
  transform: translate(50%,-50%);
  background: var(--color-jaju);
  color: #fff;
  font-size: .58rem;
  font-weight: 600;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  line-height: 1;
}

/* 모바일 아이콘 버튼 */
.nav-icons-mobile .nav-icon-link {
  font-size: .95rem;
  padding: 4px 6px;
  display: flex;
  align-items: center;
}

/* ── 4-18b. 네비 우측 버튼 ── */

/* 다크/라이트 스위치 */
.nav-theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  user-select: none;
  margin: 0;
}
.nav-theme-switch__input { display: none; }
.nav-theme-switch__sun  { font-size: .8rem; color: #C8922A; }
.nav-theme-switch__moon { font-size: .8rem; color: #7B8EC4; }
.nav-theme-switch__track {
  position: relative;
  width: 36px;
  height: 20px;
  background: #D8D6D2;
  border-radius: 999px;
  transition: background .22s;
  flex-shrink: 0;
}
.nav-theme-switch__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  transition: transform .22s;
}
.nav-theme-switch__input:checked ~ .nav-theme-switch__track {
  background: var(--color-jjok);
}
.nav-theme-switch__input:checked ~ .nav-theme-switch__track .nav-theme-switch__thumb {
  transform: translateX(16px);
}

/* 회원가입 금색 버튼 — 연한 톤 (요청에 따라 톤 다운) */
.nav-btn-gold {
  display: inline-block;
  background: var(--color-gold-lt);
  color: #3C3530 !important;
  font-size: .82rem;
  font-weight: 700;
  padding: 7px 18px;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s;
  border: none;
  line-height: 1.4;
}
.nav-btn-gold:hover { background: var(--color-gold); color: #3C3530 !important; }

/* 로그아웃·보조 아웃라인 버튼 */
.nav-btn-outline {
  display: inline-block;
  background: none;
  border: 1px solid #C8C0B4;
  color: #4A4540;
  font-size: .82rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color .15s, color .15s;
  white-space: nowrap;
  line-height: 1.4;
}
.nav-btn-outline:hover { border-color: var(--color-jjok-dk); color: var(--color-jjok-dk); }

/* 언어 선택 버튼 */
.nav-btn-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid #C8C0B4;
  border-radius: 999px;
  padding: 6px 11px 6px 10px;
  font-size: .82rem;
  font-weight: 500;
  color: #4A4540;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color .15s, color .15s, background .15s;
  white-space: nowrap;
  line-height: 1.4;
}
.nav-btn-lang:hover,
.nav-btn-lang[aria-expanded="true"] {
  border-color: var(--color-jjok-dk);
  color: var(--color-jjok-dk);
  background: var(--color-jjok-mist);
}
.lang-chevron {
  font-size: .65rem;
  transition: transform .2s;
  opacity: .6;
}
.nav-btn-lang[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }

/* ── 4-18c. 햄버거 collapse 영역 — 라이트/다크 일관 배경 (변수 기반)
   원리: 배경·텍스트·보더 모두 CSS 변수 사용 → 토글로 변수 변경만으로
        모든 자손 요소가 자동 일괄 전환. specific selector 로 Bootstrap
        기본값(transparent) 보다 우선. ─────────────────────────────── */
@media (max-width: 991.98px) {
  /* collapse 펼친 상태 — 헤더와 동일한 배경 사용 → 변수 변화에 자동 동기 */
  .main-nav .navbar-collapse {
    background-color: var(--color-header-bg);
    color: var(--color-ink);
    padding: 6px 12px 12px;
    border-radius: 0 0 12px 12px;
  }
  /* 펼친 상태의 메뉴 링크들 — 변수 사용으로 토글 자동 추종 */
  .main-nav .navbar-collapse .nav-menu-link,
  .main-nav .navbar-collapse .nav-link {
    color: var(--color-ink) !important;
    border-bottom: 1px solid var(--color-header-border);
    border-radius: 0 !important;
    padding: .9rem .85rem !important;
  }
  .main-nav .navbar-collapse .nav-menu-link.active,
  .main-nav .navbar-collapse .nav-link.active {
    color: var(--color-jjok-dk) !important;
    background: var(--color-jjok-mist) !important;
  }
  .main-nav .navbar-collapse .dropdown-menu {
    background-color: var(--color-header-bg);
    border-color: var(--color-header-border);
  }
  .main-nav .navbar-collapse .dropdown-item {
    color: var(--color-ink);
  }
}

/* ── 4-18c. 우측 유틸리티 메뉴 — 태블릿/모바일 collapse 영역 정렬 ── */
/* 데스크톱(≥992px): 좌측 메뉴 우측에 자동으로 붙어 가로 정렬 */
/* 태블릿/모바일(<992px): 햄버거를 열면 collapse 영역 안에 가로 한 줄로 표시 */
@media (max-width: 991.98px) {
  .navbar-collapse .nav-utility {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 12px 0 4px !important;
    padding: 12px 4px 4px !important;
    border-top: 1px solid var(--color-border-trad);
    gap: 10px !important;
    row-gap: 10px !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }
  [data-theme="dark"] .navbar-collapse .nav-utility {
    border-top-color: rgba(255,255,255,.08);
  }
  .navbar-collapse .nav-utility > .nav-item {
    display: flex !important;
    align-items: center;
    margin: 0 !important;
  }
  /* Bootstrap 의 ms-1 margin 이 gap 위에 더 붙는 것 차단 */
  .navbar-collapse .nav-utility > .nav-item.ms-1 { margin-left: 0 !important; }
}

/* 언어 드롭다운 패널 */
.lang-dropdown {
  min-width: 160px;
  padding: 8px 0 6px;
  font-size: .85rem;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(60,53,48,.14), 0 2px 8px rgba(60,53,48,.08);
  border: 1px solid #EAE6E0;
  background: #fff;
  margin-top: 6px !important;
}

/* 드롭다운 헤더 */
.lang-dropdown__header {
  padding: 2px 16px 8px;
  font-size: .72rem;
  font-weight: 600;
  color: #B0A898;
  letter-spacing: .5px;
  text-transform: uppercase;
  border-bottom: 1px solid #F0ECE6;
  margin-bottom: 4px;
  list-style: none;
}

/* 언어 항목 */
.lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: .88rem;
  font-weight: 500;
  color: #4A4540;
  cursor: pointer;
  transition: background .12s, color .12s;
  position: relative;
}
.lang-item__flag { font-size: 1.1rem; flex-shrink: 0; }
.lang-item__name { flex: 1; }
.lang-item__check {
  font-size: .8rem;
  color: var(--color-jjok-dk);
  opacity: 0;
  transition: opacity .15s;
}

.lang-item:hover {
  background: var(--color-jjok-mist);
  color: var(--color-jjok-dk);
}

/* 선택된 항목 — Bootstrap active 재정의 */
.lang-dropdown .lang-item.active {
  color: var(--color-jjok-dk) !important;
  background: var(--color-jjok-mist) !important;
  font-weight: 700;
}
.lang-dropdown .lang-item.active .lang-item__check { opacity: 1; }

/* ── 4-19. 푸터 ── */

/* ── 4-17. 푸터 ── */

.site-footer {
  background-color: #3C3530;
  color: rgba(250,248,245,.55);
  padding: var(--space-2xl) 0 var(--space-xl);
  font-size: 0.875rem;
}

.site-footer a {
  color: rgba(250,248,245,.55);
  transition: color 0.15s ease;
}

.site-footer a:hover {
  color: var(--color-gold-lt);
}

.site-footer .footer-brand {
  color: var(--color-gold-lt);
  font-size: 1.1rem;
  font-weight: 500;
}

.site-footer .footer-divider {
  border-top: 1px solid rgba(255,255,255,.1);
  margin: var(--space-lg) 0;
}


/* ── 5. 유틸리티 클래스 ────────────────────────────────────── */

/* 텍스트 색상 */
.text-jjok     { color: var(--color-jjok) !important; }
.text-jjok-lt  { color: var(--color-jjok-lt) !important; }
.text-gold     { color: var(--color-gold-dk) !important; }
.text-gold-lt  { color: var(--color-gold-lt) !important; }
.text-jaju     { color: var(--color-jaju) !important; }
.text-ink      { color: var(--color-ink) !important; }
.text-ink-mid  { color: var(--color-ink-mid) !important; }
.text-ink-lt   { color: var(--color-ink-lt) !important; }

/* 배경 색상 */
.bg-jjok       { background-color: var(--color-jjok) !important; }
.bg-jjok-dk    { background-color: var(--color-jjok-dk) !important; }
.bg-jjok-mist  { background-color: var(--color-jjok-mist) !important; }
.bg-gold       { background-color: var(--color-gold) !important; }
.bg-gold-tint  { background-color: var(--color-gold-tint) !important; }
.bg-jaju       { background-color: var(--color-jaju) !important; }
.bg-jaju-lt    { background-color: var(--color-jaju-lt) !important; }
.bg-mosi       { background-color: var(--color-mosi) !important; }
/* .bg-hanji 는 텍스처 포함이므로 위 4-5 섹션에서 정의 */

/* 테두리 */
.border-trad   { border: var(--card-border) !important; }
.border-jjok   { border-color: var(--color-jjok) !important; }
.border-gold   { border-color: var(--color-gold) !important; }

/* 간격 */
.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }

/* 타이포 보조 */
.letter-wide   { letter-spacing: 0.5px; }
.letter-wider  { letter-spacing: 1px; }
.lh-base       { line-height: var(--line-height-base); }


/* ── 6. 다크 모드 ──────────────────────────────────────────── */

@media (prefers-color-scheme: dark) {
  :root {
    --color-hanji:       #1E1C1A;
    --color-mosi:        #252220;
    --color-border-trad: #3A3530;
    --color-ink:         #F0ECE8;
    --color-ink-mid:     #A09890;
    --color-ink-lt:      #6A6058;
    --color-jjok-mist:   #1E2238;
    --color-gold-tint:   #1E1A10;
    --color-jaju-lt:     #241820;
    --color-header-bg:   #1E1C1A;
    --color-header-border: #3A3530;
    --color-util-bg:     #252220;
  }

  body {
    background-color: var(--color-hanji);
    color: var(--color-ink);
  }

  .card,
  .product-card {
    background-color: #252218;
    border-color: var(--color-border-trad);
  }

  .card-header,
  .card-footer {
    background-color: var(--color-mosi);
  }

  .modal-content {
    background-color: #252218;
  }

  .modal-header,
  .modal-footer {
    background-color: var(--color-mosi);
  }

  .form-control,
  .form-select {
    background-color: #252218;
    color: var(--color-ink);
    border-color: var(--color-border-trad);
  }

  .dropdown-menu {
    background-color: #252218;
    border-color: var(--color-border-trad);
  }

  .dropdown-item {
    color: var(--color-ink);
  }

  .dropdown-item:hover {
    background-color: var(--color-jjok-mist);
  }

  .table thead th {
    background-color: var(--color-mosi);
  }

  .table tbody tr:hover {
    background-color: var(--color-jjok-mist);
  }

  .dashboard-stat-card {
    background-color: #252218;
  }
}


/* ── 7. 반응형 ─────────────────────────────────────────────── */

@media (max-width: 767.98px) {
  :root {
    --font-size-base: 15px;
    --space-xl:  28px;
    --space-2xl: 48px;
  }

  .hero-banner {
    min-height: 320px;
  }

  .section-title-lg {
    font-size: 1.2rem;
  }

  .product-detail-price {
    font-size: 1.25rem;
  }
}

@media (max-width: 575.98px) {
  .navbar-brand {
    font-size: 1rem;
  }
}


/* ── 8. 인쇄 ───────────────────────────────────────────────── */

@media print {
  body {
    background: #fff;
    color: #000;
  }

  .navbar,
  .site-footer,
  .btn,
  .breadcrumb {
    display: none !important;
  }

  .card {
    border: 1px solid #ccc;
    box-shadow: none;
  }
}

/* ==========================================================================
   상품 카드 — 전체 상품 그리드용
   ========================================================================== */
.product-card {
  border-color: rgba(60, 53, 48, .08); /* 기본 카드 보더보다 훨씬 연하게 */
}

/* ==========================================================================
   KC Pagination — 한채움 공통 페이지네이션
   ========================================================================== */
.kc-pagination {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.kc-pagination__summary {
  font-size: .8rem;
  color: var(--color-text-muted);
  letter-spacing: .02em;
}

.kc-pagination__summary strong {
  color: var(--color-primary);
  font-weight: 700;
  font-size: .9rem;
}

.kc-pagination__list {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
  margin: 0;
  padding: .35rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: 0 2px 10px rgba(60, 53, 48, .04);
  list-style: none;
}

.kc-pagination__list > li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.kc-pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 .65rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
  user-select: none;
}

.kc-pagination__item:hover {
  background: var(--color-jjok-mist);
  color: var(--color-jjok-dk);
}

.kc-pagination__item:active {
  transform: translateY(1px);
}

.kc-pagination__item--current {
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  cursor: default;
  box-shadow: 0 2px 6px rgba(91, 112, 172, .25);
}

.kc-pagination__item--current:hover {
  background: var(--color-primary);
  color: #fff;
}

.kc-pagination__item--ellipsis {
  color: var(--color-text-muted);
  cursor: default;
  letter-spacing: .1em;
}

.kc-pagination__item--ellipsis:hover {
  background: transparent;
  color: var(--color-text-muted);
}

.kc-pagination__item--nav {
  font-size: .9rem;
}

.kc-pagination__item--nav i {
  font-size: .8rem;
}

.kc-pagination__item--disabled {
  color: var(--color-ink-lt);
  pointer-events: none;
  opacity: .55;
}

/* 모바일에서는 숫자 줄이고, 이전/다음 위주로 표시 */
@media (max-width: 575.98px) {
  .kc-pagination__item {
    min-width: 2rem;
    height: 2rem;
    padding: 0 .5rem;
    font-size: .8rem;
  }
  .kc-pagination__item--page:not(.kc-pagination__item--current) {
    display: none;
  }
  .kc-pagination__item--ellipsis {
    display: none;
  }
}

/* 다크 모드 — 정렬바: 상품 개수는 잘 보이게, select 는 라이트모드 색상 */
[data-theme="dark"] .shop-sortbar__count {
  color: #EDE8E0 !important;   /* --color-ink 다크 — 본문 위에 또렷하게 */
}
[data-theme="dark"] .shop-sortbar .form-select {
  color: #3C3530;              /* --color-ink 라이트 */
  background-color: #fff;
  border-color: #dee2e6;
}
[data-theme="dark"] .shop-sortbar .form-select option {
  color: #3C3530;
  background-color: #fff;
}

/* 다크 모드 — 사이드바(흰 박스 내부)의 form 요소는 라이트모드 색상 유지 */
[data-theme="dark"] .shop-sidebar .form-control,
[data-theme="dark"] .shop-sidebar .form-select {
  color: #3C3530;          /* --color-ink (라이트) */
  background-color: #fff;
  border-color: #dee2e6;
}
[data-theme="dark"] .shop-sidebar .form-select option {
  color: #3C3530;
  background-color: #fff;
}
[data-theme="dark"] .shop-sidebar .form-label {
  color: #3C3530;
}
[data-theme="dark"] .shop-sidebar .form-text {
  color: #7A7068;          /* --color-ink-mid (라이트) */
}

/* 다크 모드 — 흰 박스 그대로 유지, 글자색도 라이트모드 값으로 고정 */
[data-theme="dark"] .kc-pagination__item {
  color: #3C3530; /* --color-ink (라이트) */
}
[data-theme="dark"] .kc-pagination__item:hover {
  background: #EEF1FA; /* --color-jjok-mist */
  color: #5C70AC;       /* --color-jjok-dk */
}
[data-theme="dark"] .kc-pagination__item--current,
[data-theme="dark"] .kc-pagination__item--current:hover {
  background: #7B8EC4; /* --color-jjok */
  color: #fff;
}
[data-theme="dark"] .kc-pagination__item--ellipsis,
[data-theme="dark"] .kc-pagination__item--ellipsis:hover {
  color: #7A7068;       /* --color-ink-mid (라이트) */
  background: transparent;
}
[data-theme="dark"] .kc-pagination__item--disabled {
  color: #B0A898;       /* --color-ink-lt (라이트) */
}

/* ==========================================================================
   전체 상품 페이지 — 모바일 필터 토글 + 활성 칩 + 그리드 미세 조정
   ========================================================================== */

/* 모바일 필터 토글 버튼 */
.shop-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 1px solid var(--color-border);
  color: var(--color-ink);
  border-radius: 14px;
  padding: .75rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .01em;
  box-shadow: 0 2px 10px rgba(60, 53, 48, .05);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.shop-filter-toggle:hover,
.shop-filter-toggle:focus { color: var(--color-jjok-dk); border-color: var(--color-jjok-lt); }
.shop-filter-toggle.is-active { border-color: var(--color-jjok); }
.shop-filter-toggle__left {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.shop-filter-toggle__badge {
  display: inline-block;
  background: var(--color-jjok);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 999px;
  letter-spacing: .02em;
  line-height: 1.3;
}
.shop-filter-toggle__chevron {
  transition: transform .25s ease;
  opacity: .55;
  font-size: .85rem;
}
.shop-filter-toggle[aria-expanded="true"] .shop-filter-toggle__chevron {
  transform: rotate(180deg);
}

[data-theme="dark"] .shop-filter-toggle {
  background: #1F1C18;
  border-color: rgba(255,255,255,.08);
  color: #EDE8E0;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}
[data-theme="dark"] .shop-filter-toggle.is-active { border-color: var(--color-jjok-lt); }
[data-theme="dark"] .shop-filter-toggle:hover,
[data-theme="dark"] .shop-filter-toggle:focus { color: var(--color-jjok-lt); }
[data-theme="dark"] .shop-filter-toggle__badge {
  background: var(--color-jjok-lt);
  color: #1A1814;
}

/* 활성 필터 칩 (모바일) */
.shop-active-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.shop-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-jjok-mist);
  border: 1px solid rgba(123, 142, 196, .35);
  color: var(--color-jjok-dk);
  font-size: .78rem;
  font-weight: 500;
  padding: .35rem .75rem .35rem .65rem;
  border-radius: 999px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.shop-chip > i:first-child { font-size: .82rem; opacity: .8; }
.shop-chip__x {
  font-size: .72rem;
  opacity: .65;
  margin-left: 2px;
  transition: opacity .15s;
}
.shop-chip:hover {
  background: #fff;
  border-color: var(--color-jjok);
  color: var(--color-jjok-dk);
}
.shop-chip:hover .shop-chip__x { opacity: 1; }

[data-theme="dark"] .shop-chip {
  background: rgba(164, 179, 216, .14);
  border-color: rgba(164, 179, 216, .35);
  color: var(--color-jjok-lt);
}
[data-theme="dark"] .shop-chip:hover {
  background: rgba(164, 179, 216, .22);
  border-color: var(--color-jjok-lt);
  color: #EDE8E0;
}

/* 모바일에선 정렬바 글자/간격 컴팩트하게 */
@media (max-width: 767.98px) {
  .shop-sortbar__count {
    font-size: .78rem;
    color: var(--color-ink-mid);
  }
  .shop-sortbar .form-select {
    font-size: .8rem;
    padding-top: .3rem;
    padding-bottom: .3rem;
  }
}

/* 모바일 상품 카드 — 패딩/폰트 살짝 키워 가독성·탭 영역 확보 */
@media (max-width: 575.98px) {
  .shop-grid .product-card .card-body { padding: .6rem .55rem !important; }
  .shop-grid .product-card h6 a { font-size: .82rem !important; }
  .shop-grid .product-card .card-body > div:last-child { font-size: .82rem !important; }
}

/* ==========================================================================
   전체 상품 페이지 — 다크모드 보강 (Bootstrap bg-white cascade 함정 차단)
   ========================================================================== */
/* 검색 박스 / 카테고리 패널 — Bootstrap .bg-white 가 다크에서도 흰 박스를 강제
   안 텍스트는 var(--color-ink) cascade 로 라이트 베이지가 되어 안 보임.
   selector specificity (0,3,0) 로 .bg-white(.0,1,0) 보다 강하게 다크 배경 + 라이트 텍스트 */
[data-theme="dark"] .shop-search-box.bg-white,
[data-theme="dark"] .shop-cat-panel.bg-white {
  background-color: #1F1C18 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #EDE8E0;
}
[data-theme="dark"] .shop-search-box .form-label,
[data-theme="dark"] .shop-cat-panel .form-label {
  color: #EDE8E0 !important;
}
[data-theme="dark"] .shop-search-box .form-text,
[data-theme="dark"] .shop-search-box .form-text i,
[data-theme="dark"] .shop-search-box .form-text strong,
[data-theme="dark"] .shop-search-box .form-text span {
  color: #B0A898 !important;
}
[data-theme="dark"] .shop-search-box .form-text .text-primary {
  color: var(--color-jjok-lt) !important;
}

/* 카드 안 텍스트 (전체 상품 그리드) — 흰 카드 유지 + 텍스트 라이트 강제 */
[data-theme="dark"] .shop-grid .product-card {
  background: #fff !important;
  border-color: rgba(255,255,255,.06) !important;
  box-shadow:
    0 10px 28px -10px rgba(0,0,0,.55),
    0 4px 10px -3px rgba(0,0,0,.32);
}
[data-theme="dark"] .shop-grid .product-card .card-body,
[data-theme="dark"] .shop-grid .product-card .card-body > div {
  background: #fff;
}
[data-theme="dark"] .shop-grid .product-card .card-body h6,
[data-theme="dark"] .shop-grid .product-card .card-body h6 a,
[data-theme="dark"] .shop-grid .product-card .card-body h6 a.text-dark,
[data-theme="dark"] .shop-grid .product-card .card-body .fw-bold {
  color: #3C3530 !important;            /* --color-ink 라이트 */
}
[data-theme="dark"] .shop-grid .product-card .card-body .text-muted,
[data-theme="dark"] .shop-grid .product-card .card-body small.text-muted,
[data-theme="dark"] .shop-grid .product-card .card-body p.text-muted {
  color: #7A7068 !important;            /* --color-ink-mid 라이트 */
}
[data-theme="dark"] .shop-grid .product-card .card-body p {
  color: #7A7068 !important;
}

/* "이미지 없음" placeholder — 라이트 배경 그대로(밝아서 확연한 빈 칸) */
[data-theme="dark"] .shop-grid .product-card .bg-light {
  background-color: #2A2620 !important;
  color: #B0A898 !important;
}
[data-theme="dark"] .shop-grid .product-card .bg-light .text-muted {
  color: #B0A898 !important;
}

/* ==========================================================================
   태블릿(768~991px) — 상단 sticky 검색 바 + 카테고리 dropdown
   - 사이드바를 풀폭 가로 한 줄로 변환
   - 상품 그리드는 풀폭(col-12) 사용 → 더 큰 카드
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
  .shop-sidebar {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--color-hanji);
    padding-top: 8px !important;
    padding-bottom: 6px !important;
    margin-bottom: 1rem !important;
  }
  [data-theme="dark"] .shop-sidebar {
    background: var(--color-hanji);                /* 다크 hanji = #16140F */
    box-shadow: 0 4px 14px rgba(0,0,0,.32);
  }

  /* 폼 — 가로 한 줄, 검색·토글이 같은 높이로 정렬 */
  .shop-filter-form {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .shop-filter-form .shop-search-box {
    flex: 1;
    margin-bottom: 0 !important;
    padding: .55rem .65rem !important;
    display: flex;
    align-items: center;
    min-height: 56px;
  }
  .shop-filter-form .shop-search-box .form-label {
    display: none;                                  /* 라벨은 placeholder 로 충분 */
  }
  .shop-filter-form .shop-search-box .form-text {
    display: none !important;                       /* 안내 텍스트 숨김 (공간 절약) */
  }
  .shop-filter-form .shop-search-box .input-group { width: 100%; }
  .shop-filter-form .shop-cat-section {
    flex-shrink: 0;
    position: relative;
    margin-bottom: 0 !important;
    min-width: 200px;
  }

  /* 카테고리 토글 버튼 — sticky 바와 같은 높이로 */
  .shop-cat-toggle {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 1px solid var(--color-border);
    color: var(--color-ink);
    border-radius: 12px;
    padding: .55rem .85rem;
    font-size: .85rem;
    font-weight: 600;
    height: 100%;
    min-height: 56px;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, box-shadow .15s;
  }
  .shop-cat-toggle:hover,
  .shop-cat-toggle:focus { border-color: var(--color-jjok-lt); color: var(--color-jjok-dk); }
  .shop-cat-toggle.is-active { border-color: var(--color-jjok); }
  .shop-cat-toggle__left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
  }
  .shop-cat-toggle__left > span:not(.shop-cat-toggle__badge) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100px;
  }
  .shop-cat-toggle__badge {
    display: inline-block;
    background: var(--color-jjok);
    color: #fff;
    font-size: .68rem;
    font-weight: 600;
    padding: .15rem .55rem;
    border-radius: 999px;
    line-height: 1.3;
    letter-spacing: .02em;
    white-space: nowrap;
    max-width: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .shop-cat-toggle__chevron {
    font-size: .82rem;
    opacity: .55;
    margin-left: 8px;
    transition: transform .22s;
  }
  .shop-cat-section.is-open .shop-cat-toggle__chevron {
    transform: rotate(180deg);
  }

  /* 카테고리 패널 — 절대 위치 dropdown */
  .shop-cat-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 320px;
    z-index: 50;
    box-shadow: 0 16px 40px rgba(0,0,0,.18), 0 6px 14px rgba(0,0,0,.08);
    display: none;
  }
  .shop-cat-section.is-open .shop-cat-panel {
    display: block;
    animation: shopCatPanelIn .18s ease-out;
  }
  @keyframes shopCatPanelIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* 다크 모드 — 검색·카테고리 토글·패널 */
  [data-theme="dark"] .shop-search-box,
  [data-theme="dark"] .shop-cat-panel {
    background: #1F1C18 !important;
    border-color: rgba(255,255,255,.08) !important;
  }
  [data-theme="dark"] .shop-cat-toggle {
    background: #1F1C18;
    border-color: rgba(255,255,255,.08);
    color: #EDE8E0;
  }
  [data-theme="dark"] .shop-cat-toggle.is-active { border-color: var(--color-jjok-lt); }
  [data-theme="dark"] .shop-cat-toggle:hover,
  [data-theme="dark"] .shop-cat-toggle:focus { color: var(--color-jjok-lt); }
  [data-theme="dark"] .shop-cat-toggle__badge {
    background: var(--color-jjok-lt);
    color: #1A1814;
  }
}

/* 데스크톱·모바일에선 카테고리 토글 버튼 자체가 숨김 (d-none d-md-flex d-lg-none) */
/* 데스크톱에선 카테고리 패널 항상 inline 표시 — 아무 추가 CSS 필요 없음 */
/* 모바일에선 외부 #shopFilters collapse 가 전체 폼을 감싸 토글 처리 */

/* ==========================================================================
   검색 입력 — '지우기' 버튼 (항상 표시 / 값 없으면 반투명)
   ========================================================================== */
.shop-search-input { position: relative; }
.shop-search-input__clear {
  background: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-ink-mid);
  padding: 0 .6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color .15s, background-color .15s, opacity .15s;
  cursor: pointer;
}
.shop-search-input__clear > i { font-size: 1rem; line-height: 1; }
.shop-search-input__clear:hover,
.shop-search-input__clear:focus {
  color: var(--color-jjok-dk);
  background: var(--color-jjok-mist);
  border-color: var(--color-jjok-lt);
}
.shop-search-input__clear.is-empty,
.shop-search-input__clear[disabled] {
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;       /* 비어 있으면 hover 효과·클릭 모두 차단 */
}

[data-theme="dark"] .shop-search-input__clear {
  border-color: rgba(255, 255, 255, .18);
  color: #B0A898;
}
[data-theme="dark"] .shop-search-input__clear:hover,
[data-theme="dark"] .shop-search-input__clear:focus {
  color: var(--color-jjok-lt);
  background: rgba(164, 179, 216, .12);
  border-color: var(--color-jjok-lt);
}

/* ==========================================================================
   로그인/회원가입 — 입력란 정렬 + 소셜 버튼 (공식 브랜드 컬러)
   ========================================================================== */

/* 카드 자체 — 좀 더 둥글게, 그림자 자연스럽게 */
.auth-card {
  border-radius: 16px;
  border: 1px solid var(--color-border, #E0D8CC);
  box-shadow: 0 8px 28px rgba(60, 53, 48, .10), 0 2px 8px rgba(60, 53, 48, .06);
}
[data-theme="dark"] .auth-card {
  background: #1F1C18;
  border-color: rgba(255, 255, 255, .08);
}

/* 폼 필드 — 라벨 위, input 아래 vertical 정렬 강제 */
.auth-form .auth-field {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

/* 체크박스 필드 — 라벨과 inline (아이디 저장 등) */
.auth-form .auth-field--check {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
}
.auth-form .auth-field--check input[type="checkbox"] {
  display: inline-block !important;
  width: 1.1rem !important;
  height: 1.1rem !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
  cursor: pointer;
  vertical-align: middle;
  accent-color: var(--color-jjok, #7B8EC4);
}
.auth-form .auth-field--check label {
  cursor: pointer;
  font-weight: 500 !important;
  color: var(--color-ink);
  margin-bottom: 0 !important;
}
.auth-form .auth-field > label {
  display: block;
  margin-bottom: .35rem;
  text-align: left;
}
.auth-form .auth-field input,
.auth-form .auth-field input[type="email"],
.auth-form .auth-field input[type="password"],
.auth-form .auth-field input[type="text"],
.auth-form .auth-field select {
  display: block !important;
  width: 100% !important;
  padding: .65rem .85rem;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-ink);
  background-color: #fff;
  border: 1px solid var(--color-border, #DEE2E6);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}
.auth-form .auth-field input:focus {
  border-color: var(--color-jjok);
  box-shadow: 0 0 0 3px rgba(123, 142, 196, .15);
  outline: none;
}
[data-theme="dark"] .auth-form .auth-field input {
  background-color: #fff;             /* 가독성 위해 입력 박스는 라이트 유지 */
  color: #3C3530;
  border-color: rgba(255,255,255,.18);
}

/* 가입 버튼 — 살짝 키움 */
.auth-form .btn-lg {
  padding: .7rem 1rem;
  font-size: 1rem;
  border-radius: 12px;
}

/* '또는 소셜 계정' 디바이더 — 가로 라인 + 가운데 텍스트 */
.auth-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 1.5rem 0 1rem;
  color: var(--color-ink-mid);
  font-size: .82rem;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border, #E0D8CC);
}
.auth-divider span { padding: 0 1rem; white-space: nowrap; }
[data-theme="dark"] .auth-divider { color: #B0A898; }
[data-theme="dark"] .auth-divider::before,
[data-theme="dark"] .auth-divider::after { background: rgba(255,255,255,.10); }

/* ── 소셜 버튼 공통 ── */
.social-btn {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 48px;
  border-radius: 12px;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: -.01em;
  border: 1px solid transparent;
  transition: filter .15s, transform .12s, box-shadow .15s;
  text-decoration: none;
}
.social-btn:hover { filter: brightness(.96); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.10); }
.social-btn:active { transform: translateY(0); }
.social-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.social-btn__label { line-height: 1; }

/* 카카오 — #FEE500 + 검정 텍스트 */
.social-btn--kakao {
  background-color: #FEE500;
  color: #3C1E1E !important;
  border-color: #FEE500;
}
.social-btn--kakao:hover { background-color: #FEE500; color: #3C1E1E !important; }

/* 네이버 — #03C75A + 흰 텍스트 */
.social-btn--naver {
  background-color: #03C75A;
  color: #fff !important;
  border-color: #03C75A;
}
.social-btn--naver:hover { background-color: #03C75A; color: #fff !important; }

/* Google — 흰 바탕 + 회색 보더 + 회색 텍스트(Google 공식 가이드) */
.social-btn--google {
  background-color: #fff;
  color: #3C4043 !important;
  border-color: #DADCE0;
}
.social-btn--google:hover {
  background-color: #F8F9FA;
  color: #3C4043 !important;
  border-color: #DADCE0;
}
[data-theme="dark"] .social-btn--google {
  background-color: #1F1F1F;
  color: #E8EAED !important;
  border-color: #3C4043;
}
[data-theme="dark"] .social-btn--google:hover {
  background-color: #2A2A2A;
  color: #E8EAED !important;
}

/* ──────────────────────────────────────────────────────────────────────
   인증 페이지 2단 레이아웃 (B안)
   PC: 좌 브랜드 패널 + 우 폼 카드
   모바일: 상 컴팩트 브랜드 띠 + 하 폼 카드
   ────────────────────────────────────────────────────────────────────── */

.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 980px;
  margin: 1rem auto;
  align-items: stretch;
}
@media (max-width: 991.98px) {
  .auth-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
    max-width: 540px;
  }
}

/* ── 좌측 브랜드 패널 ── */
.auth-brand-panel {
  background: linear-gradient(135deg, #5a6b97 0%, #2f3a5e 100%);
  color: #fff;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(47, 58, 94, 0.18);
}
.auth-brand-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.auth-brand-panel--signup {
  background: linear-gradient(135deg, #826B47 0%, #594A31 100%);
  box-shadow: 0 8px 28px rgba(89, 74, 49, 0.20);
}
.auth-brand-panel__inner {
  position: relative;
  z-index: 1;
  width: 100%;
}
.auth-brand-panel__eyebrow {
  font-size: .7rem;
  letter-spacing: .22em;
  font-weight: 700;
  color: var(--color-gold-lt, #e3c989);
  opacity: .92;
  margin-bottom: .85rem;
}
.auth-brand-panel--signup .auth-brand-panel__eyebrow {
  color: #f5d99a;
}
.auth-brand-panel__title {
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.25;
  margin-bottom: .9rem;
}
.auth-brand-panel__subtitle {
  font-size: .95rem;
  line-height: 1.65;
  opacity: .88;
  margin-bottom: 1.6rem;
}
.auth-brand-panel__benefits {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.auth-benefit-item {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  font-size: .9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.auth-benefit-item__icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-gold-lt, #e3c989);
  font-size: .88rem;
  margin-top: .05em;
}
.auth-benefit-item strong {
  color: #fff;
  font-weight: 700;
}
.auth-brand-panel__note {
  margin-top: 1.6rem;
  margin-bottom: 0;
  font-size: .78rem;
  opacity: .8;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* 모바일 — 브랜드 패널 컴팩트 띠 */
@media (max-width: 991.98px) {
  .auth-brand-panel {
    padding: 1.4rem 1.4rem;
    border-radius: 14px;
  }
  .auth-brand-panel__title {
    font-size: 1.35rem;
  }
  .auth-brand-panel__subtitle {
    font-size: .88rem;
    margin-bottom: 1rem;
  }
  .auth-brand-panel__benefits {
    gap: .55rem;
  }
  .auth-benefit-item {
    font-size: .82rem;
  }
  .auth-benefit-item__icon {
    width: 24px;
    height: 24px;
    font-size: .76rem;
  }
  .auth-brand-panel__note {
    margin-top: 1.1rem;
    padding-top: .75rem;
  }
}
@media (max-width: 575.98px) {
  .auth-brand-panel { padding: 1.15rem 1.15rem; }
  .auth-brand-panel__title { font-size: 1.2rem; }
}

/* ── 우측 폼 카드 (단독형) ── */
.auth-form-panel {
  display: flex;
  align-items: center;
}
.auth-card--standalone {
  width: 100%;
  background: var(--color-surface, #fff);
}
.auth-card__body {
  padding: 2.2rem 2rem;
}
@media (max-width: 575.98px) {
  .auth-card__body { padding: 1.6rem 1.4rem; }
}
.auth-card__title {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  text-align: center;
  margin-bottom: .35rem;
  color: var(--color-ink, #1a1a1a);
}
.auth-card__subtitle {
  text-align: center;
  font-size: .88rem;
  color: var(--color-ink-mid, #666);
  margin-bottom: 1.4rem;
}
.auth-card__social {
  margin-bottom: 0;
}

/* 통합 에러 알림 (로그인 실패·잠금·소셜 가입 안내) */
.auth-error-alert {
  background: #FFF6F6;
  border: 1px solid #F1B5B5;
  color: #8C2A2A;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
  font-size: .92rem;
}
.auth-error-alert .bi {
  font-size: 1.15rem;
  color: #C24545;
}
.auth-error-alert__msg {
  font-weight: 500;
  line-height: 1.5;
}
.auth-error-alert__msg + .auth-error-alert__msg {
  margin-top: .35rem;
}
[data-theme="dark"] .auth-error-alert {
  background: #3a1f1f;
  border-color: #6c3535;
  color: #F0C0C0;
}
[data-theme="dark"] .auth-error-alert .bi {
  color: #E48888;
}

.auth-card__footer {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--color-border, #ebe6dc);
  text-align: center;
  font-size: .88rem;
}
.auth-card__footer-link {
  color: var(--color-jjok, #2f3a5e);
  text-decoration: none;
  font-weight: 500;
  transition: color .15s ease;
}
.auth-card__footer-link:hover {
  color: var(--color-jjok-dk, #232a44);
  text-decoration: underline;
}
.auth-card__footer-sep {
  color: var(--color-border, #ddd);
  margin: 0 .35rem;
}
.auth-card__terms-note {
  line-height: 1.55;
}
.auth-card__terms-note a {
  color: var(--color-jjok, #2f3a5e);
  text-decoration: underline;
  text-underline-offset: 2px;
}
[data-theme="dark"] .auth-card--standalone {
  background: var(--color-surface-card, #232323);
}
[data-theme="dark"] .auth-card__title { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .auth-card__subtitle { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .auth-card__footer { border-top-color: var(--color-border, #3a3a3a); }
[data-theme="dark"] .auth-card__footer-link { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .auth-card__footer-link:hover { color: var(--color-gold, #b88a3a); }
[data-theme="dark"] .auth-card__terms-note a { color: var(--color-gold-lt, #e3c989); }

/* ── 브랜드 패널 mini-stepper (3단계 진행 표시) ── */
.auth-stepper-mini {
  list-style: none;
  padding: 0;
  margin: 0 0 1.4rem 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.auth-stepper-mini__item {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: rgba(255, 255, 255, 0.62);
  font-size: .88rem;
  transition: color .2s ease;
}
.auth-stepper-mini__num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.65);
  font-size: .8rem;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.22);
  transition: all .2s ease;
}
.auth-stepper-mini__label {
  line-height: 1.35;
}
.auth-stepper-mini__item.is-active {
  color: #fff;
  font-weight: 700;
}
.auth-stepper-mini__item.is-active .auth-stepper-mini__num {
  background: var(--color-gold-lt, #e3c989);
  border-color: var(--color-gold-lt, #e3c989);
  color: #2f3a5e;
  box-shadow: 0 0 0 4px rgba(227, 201, 137, 0.22);
}
.auth-stepper-mini__item.is-done {
  color: rgba(255, 255, 255, 0.95);
}
.auth-stepper-mini__item.is-done .auth-stepper-mini__num {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(255, 255, 255, 0.95);
  color: #2f3a5e;
}
@media (max-width: 991.98px) {
  .auth-stepper-mini { gap: .45rem; }
  .auth-stepper-mini__item { font-size: .78rem; }
  .auth-stepper-mini__num { width: 24px; height: 24px; font-size: .72rem; }
}

/* ==========================================================================
   마이페이지 — 태블릿 가로 viewport 변칙 대응
   (col-lg-* 가 viewport ≤991 보고 시 세로 스택으로 떨어지는 것을 가로에선 강제 분할)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 991.98px) and (orientation: landscape) {
  .mypage-row > .col-lg-3 {
    flex: 0 0 30%;
    max-width: 30%;
  }
  .mypage-row > .col-lg-9 {
    flex: 0 0 70%;
    max-width: 70%;
  }
}

/* ==========================================================================
   코디 추천·룩북 상세 — 모바일/태블릿 세로(portrait) 세로 스택 패턴
   (포토 갤러리와 동일한 orientation 기반 분기)
   ========================================================================== */

/* 모바일 + 태블릿 세로일 때 col-md-* 세로 스택 강제 */
@media (max-width: 767.98px),
       (min-width: 768px) and (max-width: 991.98px) and (orientation: portrait) {
  .styling-detail-row > [class*="col-md-"] {
    flex: 0 0 100%;
    max-width: 100%;
  }
  /* 룩북 캐러셀 — 480px 고정 → 화면 폭 비례 (aspect-ratio) */
  .styling-detail-row #lookbookCarousel .carousel-inner img,
  .styling-detail-row #lookbookCarousel .carousel-item {
    height: auto !important;
    aspect-ratio: 4 / 5;
    object-fit: cover;
  }
}

/* ==========================================================================
   /shop/menu/<tag>/ — 메뉴 히어로 + 빈 상태 (Phase 1)
   ========================================================================== */

.menu-hero {
  box-shadow: 0 6px 28px rgba(0,0,0,0.12);
  position: relative;
}
.menu-hero::after {
  /* 우측 상단 페인트 효과 */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.menu-hero h1 { letter-spacing: -.01em; }
.menu-hero__desc {
  max-width: 640px;
  line-height: 1.55;
  font-size: .92rem;
}
.menu-hero__bg-img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.menu-hero .btn-light {
  color: #1a1a1a;
}
.menu-hero .btn-outline-light {
  border-color: rgba(255,255,255,0.7);
  color: #fff;
}
.menu-hero .btn-outline-light:hover {
  background-color: rgba(255,255,255,0.15);
  border-color: #fff;
}

/* 브레드크럼 */
.breadcrumb-menu .breadcrumb-item + .breadcrumb-item::before {
  content: "›";
  color: var(--color-muted, #9a9a9a);
  padding: 0 .35rem;
}
[data-theme="dark"] .breadcrumb-menu .breadcrumb-item,
[data-theme="dark"] .breadcrumb-menu .breadcrumb-item a {
  color: var(--color-ink-muted, #cfcfcf);
}

/* 빈 상태 */
.menu-empty {
  max-width: 640px;
  margin: 0 auto;
}
.menu-empty__icon {
  opacity: .35;
}
[data-theme="dark"] .menu-empty h3 { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .menu-empty p  { color: var(--color-ink-muted, #b8b8b8); }

/* 모바일 — 히어로 축소 */
@media (max-width: 575.98px) {
  .menu-hero { padding: 1.5rem !important; }
  .menu-hero h1 { font-size: 1.5rem; }
  .menu-hero i.fs-1 { font-size: 2rem !important; }
  .menu-hero__desc { font-size: .85rem; }
}

/* ==========================================================================
   /shop/menu/<tag>/ 하단 연관 추천 섹션 (Phase 3)
   ========================================================================== */

.menu-bottom-recos {
  border-color: var(--color-border, #e6e3df) !important;
}
[data-theme="dark"] .menu-bottom-recos {
  border-color: var(--color-border, #2e2e2e) !important;
}
[data-theme="dark"] .menu-bottom-recos h2 { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .menu-bottom-recos p,
[data-theme="dark"] .menu-bottom-recos .text-muted {
  color: var(--color-ink-muted, #b8b8b8) !important;
}

/* ① 다른 메뉴 카드 — 그라데이션 띠(좌측 흰 아이콘) + tint_bg 텍스트 영역 */
.menu-reco-card {
  --card-tint-bg: #f6f3ee;
  --card-tint-text: #1a1a1a;
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  min-height: 88px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card-tint-bg);
  color: var(--card-tint-text) !important;
  text-decoration: none !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  transition: transform .2s ease-out, box-shadow .2s ease-out;
}
.menu-reco-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.14);
  color: var(--card-tint-text) !important;
}

/* 위쪽 — 그라데이션 띠 + 좌측 정렬 흰 아이콘 (박지 없음) */
.menu-reco-card__top {
  position: relative;
  flex: 0 0 42px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 .9rem;
  overflow: hidden;
}
.menu-reco-card__shine {
  /* 우측 상단 라이트 페인트 — 그라데이션에 깊이감 */
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 18%, rgba(255,255,255,0.32) 0%, transparent 55%);
  pointer-events: none;
  transition: opacity .22s;
}
.menu-reco-card:hover .menu-reco-card__top::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.08);
}
.menu-reco-card__icon-wrap {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 박지 없음 — 배경/사이즈 박스 제거, 아이콘만 노출 */
}
.menu-reco-card__icon {
  font-size: 1.25rem;
  color: #fff;                               /* 흰색 아이콘 — 그라데이션 위에 도드라짐 */
  line-height: 1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
}

/* 아래쪽 — tint_bg 위 텍스트 + 화살표 (세로 중앙 정렬) */
.menu-reco-card__bottom {
  position: relative;
  flex: 1;
  padding: .5rem .85rem .55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .35rem;
  background: var(--card-tint-bg);
}
.menu-reco-card__text {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
}
.menu-reco-card__label {
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.2;
  color: var(--card-tint-text);
}
.menu-reco-card__sub {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--card-tint-text);
  opacity: .55;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.menu-reco-card__arrow {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: transparent;
  color: var(--card-tint-text);
  font-size: .8rem;
  font-weight: 700;
  opacity: .85;
  transition: transform .2s ease-out, opacity .2s;
}
.menu-reco-card:hover .menu-reco-card__arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* 다크모드 — 텍스트 색은 그대로(카드 정체성 유지), 그라데이션 그림자 조정 */
[data-theme="dark"] .menu-reco-card__top {
  box-shadow: 0 3px 10px rgba(0,0,0,0.35);
}
[data-theme="dark"] .menu-reco-card:hover .menu-reco-card__top {
  box-shadow: 0 6px 16px rgba(0,0,0,0.5);
}

/* 렌탈 랜딩 — 분류 카드 (단일 그라데이션, '이런 분께 추천' 스타일)
   LG(992+) 에서 7카드 한 줄 노출 — 좁은 폭에 맞춰 컴팩트 기본값. */
.rental-cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 124px;
  padding: .7rem .75rem .65rem;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,0,0,0.07);
  transition: transform .2s ease, box-shadow .2s ease;
  background: linear-gradient(135deg, #888, #555);
}
.rental-cat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.16);
  color: #fff;
}
.rental-cat-card:focus-visible {
  outline: 3px solid rgba(255,255,255,0.6);
  outline-offset: 2px;
}
.rental-cat-card__icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
}
.rental-cat-card__icon {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
}
.rental-cat-card__body { margin-top: auto; min-width: 0; }
.rental-cat-card__label {
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rental-cat-card__sub {
  font-size: .68rem;
  margin-top: .15rem;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 파스텔 변형 — 기존 진한 gradient 위 흰 .72 오버레이로 톤다운
   텍스트/아이콘은 진한 ink 로 명도 대비 강화
   (사용처: shop/menu '다른 메뉴 둘러보기' 등 부가 섹션) */
.rental-cat-card--pastel { color: var(--color-ink, #2e2a26); }
.rental-cat-card--pastel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.72);
  pointer-events: none;
  border-radius: inherit;
  z-index: 0;
}
.rental-cat-card--pastel > * { position: relative; z-index: 1; }
.rental-cat-card--pastel .rental-cat-card__icon-wrap {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(60, 50, 40, 0.10);
  backdrop-filter: none;
}
.rental-cat-card--pastel .rental-cat-card__icon {
  color: var(--color-jjok-dk, #232a44);
}
.rental-cat-card--pastel .rental-cat-card__label {
  color: var(--color-ink, #2e2a26);
  text-shadow: none;
}
.rental-cat-card--pastel .rental-cat-card__sub {
  color: rgba(60, 50, 40, 0.72);
}
.rental-cat-card--pastel:hover { color: var(--color-ink, #2e2a26); }
.rental-cat-card--pastel:focus-visible {
  outline-color: rgba(60, 50, 40, 0.5);
}

/* md(768+) — 4컬럼: 폭 여유 → 살짝 키움 */
@media (min-width: 768px) and (max-width: 991.98px) {
  .rental-cat-card { min-height: 150px; padding: 1rem; border-radius: 16px; }
  .rental-cat-card__icon-wrap { width: 40px; height: 40px; border-radius: 10px; }
  .rental-cat-card__icon { font-size: 1.3rem; }
  .rental-cat-card__label { font-size: 1rem; }
  .rental-cat-card__sub { font-size: .78rem; -webkit-line-clamp: 2; }
}
/* sm 미만(<576) — 2컬럼: 폭 가장 큼 */
@media (max-width: 575.98px) {
  .rental-cat-card { min-height: 140px; padding: 1rem; border-radius: 16px; }
  .rental-cat-card__icon-wrap { width: 38px; height: 38px; border-radius: 8px; }
  .rental-cat-card__icon { font-size: 1.2rem; }
  .rental-cat-card__label { font-size: .95rem; white-space: normal; }
  .rental-cat-card__sub { font-size: .72rem; -webkit-line-clamp: 2; }
}
/* sm(576~767) — 3컬럼 */
@media (min-width: 576px) and (max-width: 767.98px) {
  .rental-cat-card { min-height: 140px; padding: .9rem; border-radius: 14px; }
  .rental-cat-card__icon-wrap { width: 36px; height: 36px; }
  .rental-cat-card__icon { font-size: 1.15rem; }
  .rental-cat-card__label { font-size: .92rem; white-space: normal; }
  .rental-cat-card__sub { font-size: .72rem; }
}

/* ② 추천 코디 카드 */
.menu-coord-card {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface, #fff);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  transition: transform .18s ease-out, box-shadow .18s ease-out;
  color: var(--color-ink, #1a1a1a) !important;
}
.menu-coord-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  color: var(--color-ink, #1a1a1a) !important;
}
.menu-coord-card__img-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
}
.menu-coord-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease-out;
}
.menu-coord-card:hover .menu-coord-card__img {
  transform: scale(1.06);
}
.menu-coord-card__title {
  padding: .55rem .65rem;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--color-ink, #1a1a1a);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-theme="dark"] .menu-coord-card {
  background: var(--color-surface-card, #2a2a2a);
}
[data-theme="dark"] .menu-coord-card__title { color: var(--color-ink, #f5f5f5); }

/* ③ 하단 CTA 박스 */
.menu-bottom-cta {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
}
[data-theme="dark"] .menu-bottom-cta {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #2e2e2e);
}
[data-theme="dark"] .menu-bottom-cta h3 { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .menu-bottom-cta p,
[data-theme="dark"] .menu-bottom-cta .text-muted {
  color: var(--color-ink-muted, #b8b8b8) !important;
}

/* 모바일 — 좌측 아이콘 + tint_bg 카드 축소 */
@media (max-width: 575.98px) {
  .menu-reco-card { min-height: 76px; border-radius: 8px; }
  .menu-reco-card__top { flex: 0 0 32px; padding: 0 .7rem; }
  .menu-reco-card__icon { font-size: 1.05rem; }
  .menu-reco-card__bottom { padding: .4rem .7rem .45rem; }
  .menu-reco-card__label { font-size: .8rem; }
  .menu-reco-card__sub { font-size: .54rem; letter-spacing: .06em; }
  .menu-reco-card__arrow { width: 20px; height: 20px; font-size: .72rem; }
  .menu-coord-card__title { font-size: .72rem; padding: .45rem .55rem; }
}

/* ==========================================================================
   /shop/menu/<tag>/ 빠른 필터 칩 (Phase 4)
   ========================================================================== */

.menu-quickchips {
  width: 100%;
}
.menu-quickchips__strip {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .35rem 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.menu-quickchip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .38rem .85rem;
  background: var(--color-surface-muted, #f6f3ee);
  color: var(--color-ink, #1a1a1a);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.menu-quickchip:hover {
  background: var(--color-surface-card, #fff);
  border-color: var(--color-accent, #c4a050);
  color: var(--color-accent, #c4a050);
}
.menu-quickchip.is-active {
  background: var(--color-accent, #c4a050);
  border-color: var(--color-accent, #c4a050);
  color: #fff;
  font-weight: 600;
}
.menu-quickchip.is-active:hover { color: #fff; }
.menu-quickchip__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  padding: 0 .35em;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  font-size: .68rem;
  font-weight: 600;
  margin-left: .15rem;
}
.menu-quickchip.is-active .menu-quickchip__count {
  background: rgba(255,255,255,0.28);
}

/* 다크모드 */
[data-theme="dark"] .menu-quickchip {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink, #f0eee9);
}
[data-theme="dark"] .menu-quickchip:hover {
  background: var(--color-surface, #353535);
}
[data-theme="dark"] .menu-quickchip__count {
  background: rgba(255,255,255,0.1);
}

/* 모바일 — 가로 스크롤 + 사이즈 축소 */
@media (max-width: 575.98px) {
  .menu-quickchips__strip {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
  }
  .menu-quickchip {
    font-size: .78rem;
    padding: .32rem .7rem;
  }
}

/* ==========================================================================
   /rental/ 랜딩 페이지 — C안 행동 중심 미니멀
   ========================================================================== */

/* ① 히어로 */
.rental-hero {
  background: linear-gradient(135deg, #5a6b97 0%, #2f3a5e 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(47, 58, 94, 0.18);
}
.rental-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.rental-hero__eyebrow {
  font-size: .7rem;
  letter-spacing: .2em;
  font-weight: 700;
  color: var(--color-gold-lt, #e3c989);
  opacity: .9;
}
.rental-hero__title {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.015em;
}
.rental-hero__subtitle {
  font-size: .95rem;
  opacity: .85;
  line-height: 1.6;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.rental-hero .btn {
  position: relative;
  z-index: 2;
}

/* ①-stat: 누적 예약·평점 stat 라인 */
.rental-hero__stats {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: .85rem 1.1rem;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  backdrop-filter: blur(4px);
}
.rental-hero__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  min-width: 0;
  flex: 1;
}
.rental-hero__stat-num {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  line-height: 1.1;
  display: inline-flex;
  align-items: baseline;
  gap: .15em;
}
.rental-hero__stat-unit {
  font-size: .65em;
  font-weight: 600;
  opacity: .8;
  margin-left: .05em;
}
.rental-hero__stat-label {
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--color-gold-lt, #e3c989);
  opacity: .9;
  font-weight: 500;
}
.rental-hero__cta {
  position: relative;
  z-index: 2;
}
.rental-hero .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}
.rental-hero .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
  color: #fff;
}

@media (max-width: 575.98px) {
  .rental-hero__stats { gap: .65rem; padding: .65rem .75rem; }
  .rental-hero__stat-num { font-size: 1.08rem; }
  .rental-hero__stat-label { font-size: .62rem; }
}

/* ③ 4단계 컴팩트 스텝 */
.rental-steps {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  padding: 1rem 1.25rem;
}
.rental-steps__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.rental-step {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
}
.rental-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-jjok, #4a5c7a);
  color: #fff;
  font-weight: 700;
  font-size: .82rem;
  flex-shrink: 0;
}
.rental-step__body {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}
.rental-step__icon {
  font-size: 1rem;
  color: var(--color-jjok-dk, #2f3a5e);
  opacity: .8;
}
.rental-step__label {
  font-size: .88rem;
  font-weight: 600;
  color: var(--color-ink, #1a1a1a);
  white-space: nowrap;
}
.rental-step__arrow {
  font-size: .9rem;
  color: var(--color-muted, #9a9a9a);
  flex-shrink: 0;
  /* chevron 두께 강화 — 컬렉션·인기상품 화살표와 일관 */
  -webkit-text-stroke: 1px currentColor;
}
[data-theme="dark"] .rental-steps {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .rental-step__label { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .rental-step__icon { color: var(--color-ink-muted, #b8b8b8); }

/* ⑤ 신뢰 배지 */
.rental-trust__item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1rem;
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 10px;
  background: var(--color-surface, #fff);
  height: 100%;
  transition: box-shadow .15s, transform .15s;
}
.rental-trust__item:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.rental-trust__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-surface-muted, #faf8f3);
  color: var(--color-jjok, #4a5c7a);
  font-size: 1.25rem;
  flex-shrink: 0;
}
.rental-trust__title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-ink, #1a1a1a);
  line-height: 1.2;
}
.rental-trust__desc {
  font-size: .75rem;
  color: var(--color-ink-muted, #6a6a6a);
  margin-top: .15rem;
}
[data-theme="dark"] .rental-trust__item {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .rental-trust__icon {
  background: rgba(255,255,255,0.06);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .rental-trust__title { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .rental-trust__desc  { color: var(--color-ink-muted, #b8b8b8); }

/* ⑥ FAQ accordion 다크모드 보정 */
[data-theme="dark"] .rental-faq .accordion-item {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .rental-faq .accordion-button {
  background: var(--color-surface-card, #2a2a2a);
  color: var(--color-ink, #f0eee9);
}
[data-theme="dark"] .rental-faq .accordion-button:not(.collapsed) {
  background: var(--color-surface-muted, #232323);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .rental-faq .accordion-body {
  background: var(--color-surface-card, #2a2a2a);
  color: var(--color-ink-muted, #cfcfcf);
}

/* ④ 인기 렌탈 상품 — '카테고리별 의상'(.collection-section) 카드 스타일 참조
   prod-grid 기본 갭(12/14/16/20px) 의 1/2 로 좁힘 — 카드 자체가 시각 호흡 가져감 */
.rental-featured-section .prod-grid { gap: 6px; }
@media (min-width: 576px) { .rental-featured-section .prod-grid { gap: 7px; } }
@media (min-width: 768px) { .rental-featured-section .prod-grid { gap: 8px; } }
@media (min-width: 992px) { .rental-featured-section .prod-grid { gap: 10px; } }

.rental-featured-section .product-card {
  background: #fff;
  border: 1px solid rgba(60, 53, 48, .08);
  border-radius: 14px;
  box-shadow:
    0 1px 4px rgba(60,50,40,.06),
    0 2px 12px rgba(60,50,40,.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
.rental-featured-section .product-card:hover {
  transform: translateY(-5px);
  box-shadow:
    0 6px 24px rgba(60,50,40,.11),
    0 2px 8px rgba(60,50,40,.06);
}
.rental-featured-section .product-card__img {
  padding: 0;
  background: transparent;
  border-radius: 14px 14px 0 0;
}
.rental-featured-section .product-card__img img {
  border-radius: 14px 14px 0 0;
  outline: 1px solid rgba(60, 53, 48, .08);
  transition: transform .38s ease;
}
.rental-featured-section .product-card:hover .product-card__img img {
  transform: scale(1.04);
}
.rental-featured-section .product-card__body {
  background: #fff;
  border-radius: 0 0 14px 14px;
}
[data-theme="dark"] .rental-featured-section .product-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .rental-featured-section .product-card__body {
  background: var(--color-surface-card, #2a2a2a);
}

/* /shop/menu/<tag>/ 와 /shop/?q=... 페이지의 _product_card 다크 모드 토큰 */
[data-theme="dark"] .shop-list-grid .product-card {
  background: var(--color-surface-card, #2a2a2a);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 2px 10px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .shop-list-grid .product-card:hover {
  box-shadow:
    0 0 0 1.5px rgba(227, 201, 137, 0.35),
    0 10px 30px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .shop-list-grid .product-card__body {
  background: var(--color-surface-card, #2a2a2a);
}
[data-theme="dark"] .shop-list-grid .product-card__name a {
  color: var(--color-ink, #f0eee9);
}
[data-theme="dark"] .shop-list-grid .product-card__summary,
[data-theme="dark"] .shop-list-grid .product-card__cat {
  color: var(--color-ink-muted, #b8b8b8);
}
[data-theme="dark"] .shop-list-grid .product-card__price {
  color: var(--color-gold-lt, #e3c989);
}

/* ==========================================================================
   /styling/coordination/ — 1:1 코디 상담 페이지 (B안 7섹션)
   ========================================================================== */

/* ① 히어로 */
.coord-hero {
  background: linear-gradient(135deg, #6B4F7E 0%, #3A2A4E 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(58, 42, 78, 0.18);
}
.coord-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.coord-hero__eyebrow {
  font-size: .7rem;
  letter-spacing: .2em;
  font-weight: 700;
  color: var(--color-gold-lt, #e3c989);
  opacity: .9;
}
.coord-hero__title {
  font-size: 1.7rem;
  font-weight: 700;
  letter-spacing: -.015em;
  position: relative;
  z-index: 2;
}
.coord-hero__subtitle {
  font-size: .95rem;
  opacity: .88;
  line-height: 1.6;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.coord-hero__badges {
  display: flex;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.coord-hero__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.18);
  color: #fff;
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.coord-hero .btn {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   coord-hero v2 — 한복 어두운 톤(꼭빛/자주/황금) + 골드 액센트 강화
   ========================================================================== */
.coord-hero--v2 {
  background:
    radial-gradient(circle at 12% 18%, rgba(196, 160, 80, 0.18) 0%, transparent 45%),
    radial-gradient(circle at 90% 88%, rgba(95, 45, 75, 0.55) 0%, transparent 50%),
    linear-gradient(135deg, #232a44 0%, #3D2A48 55%, #5C2A3C 100%);
  color: #fff;
  box-shadow: 0 8px 28px rgba(35, 25, 30, 0.24);
}
.coord-hero--v2::after {
  background:
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.10) 0%, transparent 60%),
    radial-gradient(circle at 15% 85%, rgba(227, 201, 137, 0.08) 0%, transparent 55%);
}
/* eyebrow — 라운드 배지 + 내부 라인 */
.coord-hero--v2 .coord-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .7rem;
  letter-spacing: .28em;
  font-weight: 700;
  color: var(--color-gold-lt, #e3c989);
  background: rgba(255, 255, 255, 0.06);
  padding: 6px 16px 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(227, 201, 137, 0.38);
  margin: 0 auto;
  opacity: 1;
  position: relative;
  z-index: 2;
}
.coord-hero--v2 .coord-hero__eyebrow::before {
  content: "";
  width: 16px;
  height: 1px;
  background: currentColor;
  opacity: .8;
}
/* 제목 — 크고 굵게 + 일부 단어 골드 액센트
   ※ text-shadow 는 짧은 blur(4px) + 약한 검정으로 — 큰 blur 는 글자 본체 덮어버림 */
.coord-hero--v2 .coord-hero__title {
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);
}
.coord-hero--v2 .coord-hero__accent {
  background: linear-gradient(135deg, #f0d599 0%, var(--color-gold-lt, #e3c989) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-gold-lt, #e3c989);  /* 폴백 */
}
/* 부제 — 컨트라스트 강화 (text-shadow blur 작게) */
.coord-hero--v2 .coord-hero__subtitle {
  font-size: 1rem;
  opacity: .94;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.94);
  max-width: 600px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
}
/* 배지 — 보더 + 그림자 강화 */
.coord-hero--v2 .coord-hero__badge {
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: .42rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
  letter-spacing: -.01em;
}
.coord-hero--v2 .coord-hero__badge i {
  color: var(--color-gold-lt, #e3c989);
}
/* CTA 버튼 — 골드 강조 */
.coord-hero--v2 .coord-hero__cta {
  background: var(--color-gold-lt, #e3c989);
  color: #2a221a;
  font-weight: 800;
  letter-spacing: -.01em;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: background .18s, transform .18s, box-shadow .18s;
}
.coord-hero--v2 .coord-hero__cta:hover {
  background: #f0d8a4;
  color: #1c1612;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}
.coord-hero--v2 .coord-hero__cta:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

/* 모바일 — 컴팩트 + 가독성 유지 */
@media (max-width: 575.98px) {
  .coord-hero--v2 .coord-hero__title { font-size: 1.55rem; }
  .coord-hero--v2 .coord-hero__subtitle { font-size: .88rem; line-height: 1.55; }
  .coord-hero--v2 .coord-hero__eyebrow { font-size: .65rem; letter-spacing: .22em; }
  .coord-hero--v2 .coord-hero__badge { font-size: .72rem; padding: .35rem .75rem; }
}
@media (min-width: 576px) and (max-width: 991.98px) {
  .coord-hero--v2 .coord-hero__title { font-size: 1.85rem; }
}

/* ② 이런 분께 추천 — 4 occasion 카드 */
.coord-occasion-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  min-height: 145px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
  transition: transform .22s ease-out, box-shadow .22s ease-out;
  padding: 1.1rem 1.15rem;
}
.coord-occasion-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 12%, rgba(255,255,255,0.22) 0%, transparent 55%);
  pointer-events: none;
}
.coord-occasion-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}
.coord-occasion-card__icon-wrap {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);
  margin-bottom: auto;
}
.coord-occasion-card__icon {
  font-size: 1.2rem;
  color: #fff;
  line-height: 1;
}
.coord-occasion-card__body {
  position: relative;
  z-index: 2;
  margin-top: .85rem;
}
.coord-occasion-card__label {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.coord-occasion-card__desc {
  font-size: .76rem;
  font-weight: 500;
  opacity: .9;
  line-height: 1.45;
  margin-top: .15rem;
}

/* ③ 프로세스 4단계 */
.coord-process {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.coord-process__strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}
.coord-process__step {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  flex: 1 1 auto;
  min-width: 160px;
}
.coord-process__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-jjok, #4a5c7a);
  color: #fff;
  font-weight: 700;
  font-size: .9rem;
  flex-shrink: 0;
}
.coord-process__body {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}
.coord-process__icon {
  font-size: 1.15rem;
  color: var(--color-jjok-dk, #2f3a5e);
  opacity: .82;
}
.coord-process__label {
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-ink, #1a1a1a);
  line-height: 1.2;
}
.coord-process__desc {
  font-size: .72rem;
  color: var(--color-ink-muted, #6a6a6a);
  margin-top: .15rem;
  line-height: 1.3;
}
.coord-process__arrow {
  font-size: 1rem;
  color: var(--color-muted, #9a9a9a);
  flex-shrink: 0;
}
[data-theme="dark"] .coord-process {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .coord-process__label { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .coord-process__desc  { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .coord-process__icon  { color: var(--color-ink-muted, #b8b8b8); }

/* ④ 룩북 카드 */
.coord-lookbook-grid { gap: 10px; }
@media (min-width: 576px) { .coord-lookbook-grid { gap: 12px; } }
@media (min-width: 992px) { .coord-lookbook-grid { gap: 16px; } }
.coord-lookbook-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(60, 53, 48, .08);
  box-shadow: 0 1px 4px rgba(60,50,40,.06), 0 2px 12px rgba(60,50,40,.05);
  transition: transform .22s ease, box-shadow .22s ease;
  height: 100%;
  color: var(--color-ink, #1a1a1a) !important;
}
.coord-lookbook-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(60,50,40,.13);
  color: var(--color-ink, #1a1a1a) !important;
}
.coord-lookbook-card__img-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
}
.coord-lookbook-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .38s ease;
}
.coord-lookbook-card:hover .coord-lookbook-card__img {
  transform: scale(1.05);
}
.coord-lookbook-card__noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-muted, #c9c3ba);
}
.coord-lookbook-card__body {
  padding: .65rem .8rem .75rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.coord-lookbook-card__title {
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--color-ink, #1a1a1a);
}
.coord-lookbook-card__tag {
  font-size: .68rem;
  color: var(--color-muted, #8b8b8b);
  letter-spacing: .04em;
  text-transform: uppercase;
}
[data-theme="dark"] .coord-lookbook-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .coord-lookbook-card__title { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .coord-lookbook-card__tag   { color: var(--color-ink-muted, #b8b8b8); }

/* ==========================================================================
   헤더 사용자 드롭다운 (B+C 결합) + 카운트 배지 + 모바일 카드
   ========================================================================== */

/* 사용자 진행중 배지 — 카트와 톤 통일하되 다른 색(골드) */
.nav-cart-badge--user {
  background: var(--color-gold-dk, #8a6f3a);
}

/* 마이페이지 아이콘 + "MY" 라벨 (접근성·발견성) */
.nav-icon-link--labeled {
  display: inline-flex !important;
  align-items: center;
  gap: .35rem;
}
.nav-icon-link__label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  line-height: 1;
  color: inherit;
  position: relative;
  top: 1px;
}
/* 카운트 배지 우측 위치 보정 (라벨 만큼 우측으로 밀림) */
.nav-icon-link--labeled .nav-cart-badge {
  right: -6px;
}
/* 다크모드 — 색 상속 (.nav-icon-link 가 이미 다크 토큰 갖고 있음) */
[data-theme="dark"] .nav-icon-link--labeled .nav-icon-link__label {
  color: inherit;
}

/* 데스크톱 드롭다운 — 헤더 + 메뉴 */
.nav-user-dropdown {
  min-width: 270px;
  padding: 0;
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,0.14);
}

.nav-user-dropdown__header {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .9rem 1rem;
  background: linear-gradient(135deg, #4a5c7a 0%, #1f2940 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.nav-user-dropdown__header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.nav-user-dropdown__avatar {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.nav-user-dropdown__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nav-user-dropdown__info {
  position: relative;
  z-index: 2;
  min-width: 0;
  flex: 1;
}
.nav-user-dropdown__name {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-user-dropdown__point {
  font-size: .76rem;
  color: var(--color-gold-lt, #e3c989);
  margin-top: .15rem;
}

.nav-user-dropdown__item {
  display: flex !important;
  align-items: center;
  padding: .65rem 1rem;
  font-size: .88rem;
  color: var(--color-ink, #1a1a1a);
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  transition: background .12s;
}
.nav-user-dropdown__item:hover,
.nav-user-dropdown__item:focus {
  background: var(--color-surface-muted, #faf8f3);
  color: var(--color-jjok-dk, #2f3a5e);
}
.nav-user-dropdown__count {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 .5rem;
  border-radius: 999px;
  background: var(--color-jjok, #4a5c7a);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
}
.nav-user-dropdown__logout { color: var(--color-jaju, #b5575f); }
.nav-user-dropdown__logout:hover { color: var(--color-jaju, #b5575f); background: rgba(181, 87, 95, 0.06); }

/* 다크모드 */
[data-theme="dark"] .nav-user-dropdown {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .nav-user-dropdown__item {
  color: var(--color-ink, #f0eee9);
}
[data-theme="dark"] .nav-user-dropdown__item:hover,
[data-theme="dark"] .nav-user-dropdown__item:focus {
  background: rgba(255,255,255,0.04);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .dropdown-divider { border-top-color: var(--color-border, #3a3a3a); }
[data-theme="dark"] .nav-user-dropdown__count {
  background: var(--color-gold-lt, #e3c989);
  color: #1a1a1a;
}

/* 모바일·태블릿 — 햄버거 안 사용자 카드 */
.nav-user-mobile { width: 100%; margin-bottom: .35rem; }
.nav-user-mobile__card {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  background: linear-gradient(135deg, #4a5c7a 0%, #1f2940 100%);
  color: #fff !important;
  border-radius: 12px;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(31,41,64,0.18);
}
.nav-user-mobile__card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.nav-user-mobile__avatar {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  overflow: hidden;
  backdrop-filter: blur(4px);
}
.nav-user-mobile__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.nav-user-mobile__text {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 0;
}
.nav-user-mobile__name {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav-user-mobile__point {
  font-size: .76rem;
  color: var(--color-gold-lt, #e3c989);
  margin-top: .15rem;
}
.nav-user-mobile__cta {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  color: #fff;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}

/* 비로그인 — 다른 톤 (회색·차분) */
.nav-user-mobile__card--guest {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  box-shadow: 0 4px 14px rgba(73, 80, 87, 0.18);
}
.nav-user-mobile__avatar--guest {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.3);
  font-size: 1.4rem;
}
.nav-user-mobile__card--guest .nav-user-mobile__point {
  color: rgba(255,255,255,0.75);
}

/* ==========================================================================
   /accounts/mypage/ — 마이페이지 대시보드 (B안 5섹션)
   ========================================================================== */

/* ① 환영 히어로 */
.mypage-hero {
  background: linear-gradient(135deg, #4a5c7a 0%, #1f2940 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(31,41,64,0.16);
}
.mypage-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.mypage-hero__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
.mypage-hero__avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 2px solid rgba(255,255,255,0.5);
  overflow: hidden;
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.mypage-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mypage-hero__text {
  flex: 1;
  min-width: 220px;
}
.mypage-hero__title {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 .2rem;
  letter-spacing: -.01em;
  color: var(--color-jjok-mist);  /* #EEF1FA — 배경(쪽빛)과 같은 계열의 라이트 톤 */
}
.mypage-hero__title strong { font-weight: 800; color: var(--color-jjok-mist); }
.mypage-hero__subtitle {
  font-size: .85rem;
  margin: 0 0 .55rem;
  color: var(--color-jjok-lt);    /* #A4B3D8 — 부제는 좀 더 톤다운 */
}
/* 다크모드 cascade 방어 — 글로벌 [data-theme="dark"] 의 h1/p color 변수가
   덮어쓰지 않도록 명시 (cascade 함정 패턴) */
[data-theme="dark"] .mypage-hero__title,
[data-theme="dark"] .mypage-hero__title strong { color: var(--color-jjok-mist); }
[data-theme="dark"] .mypage-hero__subtitle { color: var(--color-jjok-lt); }
.mypage-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.mypage-hero__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.18);
  color: #fff;
  padding: .3rem .7rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}
.mypage-hero__badge--gold {
  background: rgba(227, 201, 137, 0.32);
  color: #fff;
  border: 1px solid rgba(227, 201, 137, 0.5);
}

/* ② 통계 카드 4종 */
.mypage-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 10px;
  padding: 1rem .7rem;
  text-align: center;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  color: var(--color-ink, #1a1a1a) !important;
  text-decoration: none !important;
  height: 100%;
}
.mypage-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-color: rgba(74, 92, 122, 0.3);
}
.mypage-stat-card__icon {
  font-size: 1.4rem;
  color: var(--color-jjok, #4a5c7a);
  margin-bottom: .35rem;
}
.mypage-stat-card__value {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-jjok-dk, #2f3a5e);
  line-height: 1.2;
}
.mypage-stat-card__label {
  font-size: .76rem;
  color: var(--color-ink-muted, #6a6a6a);
  margin-top: .2rem;
}
[data-theme="dark"] .mypage-stat-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink, #f0eee9) !important;
}
[data-theme="dark"] .mypage-stat-card__icon { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .mypage-stat-card__value { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .mypage-stat-card__label { color: var(--color-ink-muted, #b8b8b8); }

/* ④ 진행 중 예약 카드 */
.mypage-active-card {
  display: block;
  position: relative;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-left: 4px solid var(--color-gold, #c4a050);
  border-radius: 10px;
  padding: .85rem 1rem;
  height: 100%;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  color: var(--color-ink, #1a1a1a) !important;
  text-decoration: none !important;
}
.mypage-active-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}
.mypage-active-card__head {
  margin-bottom: .35rem;
}
.mypage-active-card__status {
  display: inline-block;
  padding: .15rem .55rem;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 700;
  background: rgba(196,160,80,.15);
  color: var(--color-gold-dk, #8a6f3a);
  border: 1px solid rgba(196,160,80,.28);
}
.mypage-active-card__status--renting {
  background: rgba(40, 167, 69, .12);
  color: #2a7a3b;
  border-color: rgba(40, 167, 69, .3);
}
.mypage-active-card__status--confirmed {
  background: rgba(74, 92, 122, .12);
  color: var(--color-jjok-dk, #2f3a5e);
  border-color: rgba(74, 92, 122, .3);
}
.mypage-active-card__product {
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: .25rem;
  line-height: 1.3;
  color: var(--color-ink, #1a1a1a);
}
.mypage-active-card__date {
  font-size: .76rem;
  color: var(--color-ink-muted, #6a6a6a);
}
.mypage-active-card__arrow {
  position: absolute;
  right: .85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-muted, #9a9a9a);
  transition: transform .2s, color .2s;
}
.mypage-active-card:hover .mypage-active-card__arrow {
  transform: translateY(-50%) translateX(3px);
  color: var(--color-jjok-dk, #2f3a5e);
}
[data-theme="dark"] .mypage-active-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
  border-left-color: var(--color-gold-lt, #e3c989);
  color: var(--color-ink, #f0eee9) !important;
}
[data-theme="dark"] .mypage-active-card__product { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .mypage-active-card__date { color: var(--color-ink-muted, #b8b8b8); }

/* 최근 주문 리스트 */
.mypage-orders {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 10px;
  overflow: hidden;
}
.mypage-order-row {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--color-border, #ebe6dc);
  transition: background .15s;
  color: var(--color-ink, #1a1a1a) !important;
  text-decoration: none !important;
}
.mypage-order-row:last-child { border-bottom: none; }
.mypage-order-row:hover { background: var(--color-surface-muted, #faf8f3); }
.mypage-order-row__main {
  flex: 1;
  min-width: 0;
}
.mypage-order-row__num {
  font-family: 'D2Coding', 'Consolas', monospace;
  font-size: .82rem;
  color: var(--color-ink-mid, #555);
  margin-bottom: .15rem;
}
.mypage-order-row__date {
  font-size: .72rem;
  color: var(--color-ink-muted, #8b8b8b);
}
.mypage-order-row__amount {
  font-size: .95rem;
  font-weight: 800;
  color: var(--color-jjok-dk, #2f3a5e);
  white-space: nowrap;
}
[data-theme="dark"] .mypage-orders {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .mypage-order-row {
  border-bottom-color: var(--color-border, #3a3a3a);
  color: var(--color-ink, #f0eee9) !important;
}
[data-theme="dark"] .mypage-order-row:hover { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .mypage-order-row__num { color: var(--color-ink-muted, #cfcfcf); }
[data-theme="dark"] .mypage-order-row__date { color: var(--color-ink-muted, #9a9a9a); }
[data-theme="dark"] .mypage-order-row__amount { color: var(--color-gold-lt, #e3c989); }

/* 빈 상태 */
.mypage-empty {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px dashed var(--color-border, #e6e3df);
  border-radius: 10px;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-ink-muted, #6a6a6a);
}
.mypage-empty p { font-size: .92rem; margin: 0; }
.mypage-empty i.fs-2 { display: block; }
[data-theme="dark"] .mypage-empty {
  background: rgba(255,255,255,0.02);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink-muted, #b8b8b8);
}

/* ⑤ 도움말 CTA */
.mypage-help-cta {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
}
[data-theme="dark"] .mypage-help-cta {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .mypage-help-cta h3 { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .mypage-help-cta p,
[data-theme="dark"] .mypage-help-cta .text-muted {
  color: var(--color-ink-muted, #b8b8b8) !important;
}

/* 마이페이지 하위 페이지 헤더 */
.mypage-page-head__title {
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--color-ink, #1a1a1a);
}
.mypage-page-head__subtitle { margin: 0; }
[data-theme="dark"] .mypage-page-head__title { color: var(--color-ink, #f0eee9); }

/* 탭 (주문 / 예약) */
.mypage-tabs {
  display: flex;
  gap: .35rem;
  border-bottom: 2px solid var(--color-border, #e6e3df);
}
.mypage-tab {
  display: inline-flex;
  align-items: center;
  padding: .6rem 1rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--color-ink-muted, #6a6a6a);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  text-decoration: none !important;
  transition: color .15s, border-color .15s;
}
.mypage-tab:hover { color: var(--color-jjok-dk, #2f3a5e); }
.mypage-tab.is-active {
  color: var(--color-jjok-dk, #2f3a5e);
  border-bottom-color: var(--color-jjok, #4a5c7a);
  font-weight: 700;
}
.mypage-tab__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 .45rem;
  margin-left: .35rem;
  border-radius: 999px;
  background: var(--color-surface-muted, #f6f3ee);
  color: var(--color-ink-muted, #6a6a6a);
  font-size: .68rem;
  font-weight: 700;
}
.mypage-tab.is-active .mypage-tab__count {
  background: var(--color-jjok, #4a5c7a);
  color: #fff;
}
[data-theme="dark"] .mypage-tabs { border-bottom-color: var(--color-border, #3a3a3a); }
[data-theme="dark"] .mypage-tab { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .mypage-tab.is-active { color: var(--color-gold-lt, #e3c989); border-bottom-color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .mypage-tab__count {
  background: rgba(255,255,255,0.06);
  color: var(--color-ink-muted, #cfcfcf);
}
[data-theme="dark"] .mypage-tab.is-active .mypage-tab__count {
  background: var(--color-gold-lt, #e3c989);
  color: #1a1a1a;
}

/* 상태 필터 칩 (스크롤 가능) */
.mypage-status-filter {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.mypage-status-chip {
  display: inline-flex;
  align-items: center;
  padding: .32rem .75rem;
  background: var(--color-surface-muted, #f6f3ee);
  color: var(--color-ink, #1a1a1a);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.mypage-status-chip:hover {
  background: #fff;
  border-color: var(--color-jjok, #4a5c7a);
  color: var(--color-jjok-dk, #2f3a5e);
}
.mypage-status-chip.is-active {
  background: var(--color-jjok, #4a5c7a);
  border-color: var(--color-jjok, #4a5c7a);
  color: #fff;
  font-weight: 600;
}
[data-theme="dark"] .mypage-status-chip {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink, #f0eee9);
}
[data-theme="dark"] .mypage-status-chip:hover {
  background: rgba(255,255,255,0.04);
}

/* 주문/예약 카드 그리드 */
.mypage-cards {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.mypage-card-wrap {
  display: flex;
  flex-direction: column;
}
.mypage-card-actions {
  display: flex;
  justify-content: flex-end;
  padding: .35rem .25rem 0;
}
.mypage-card-actions .btn {
  font-size: .82rem;
  padding: .2rem .55rem;
}
.mypage-order-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 10px;
  padding: .75rem .9rem;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  color: var(--color-ink, #1a1a1a) !important;
  text-decoration: none !important;
}
.mypage-order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  border-color: rgba(74, 92, 122, 0.25);
}
.mypage-order-card__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mypage-order-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mypage-order-card__noimg {
  font-size: 1.5rem;
  color: var(--color-muted, #c9c3ba);
}
.mypage-order-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.mypage-order-card__top {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.mypage-order-card__num {
  font-family: 'D2Coding', 'Consolas', monospace;
  font-size: .72rem;
  color: var(--color-ink-muted, #8b8b8b);
}
.mypage-order-card__title {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
  margin: 0;
  color: var(--color-ink, #1a1a1a);
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mypage-order-card__more {
  font-size: .76rem;
  color: var(--color-ink-muted, #6a6a6a);
  font-weight: 500;
  margin-left: .25rem;
}
.mypage-order-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .76rem;
  color: var(--color-ink-muted, #6a6a6a);
  margin-top: .1rem;
  flex-wrap: wrap;
}
.mypage-order-card__amount {
  font-size: .9rem;
  font-weight: 800;
  color: var(--color-jjok-dk, #2f3a5e);
  white-space: nowrap;
}
.mypage-order-card__arrow {
  flex-shrink: 0;
  color: var(--color-muted, #9a9a9a);
  transition: transform .2s, color .2s;
}
.mypage-order-card:hover .mypage-order-card__arrow {
  transform: translateX(3px);
  color: var(--color-jjok-dk, #2f3a5e);
}
[data-theme="dark"] .mypage-order-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink, #f0eee9) !important;
}
[data-theme="dark"] .mypage-order-card__thumb { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .mypage-order-card__title { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .mypage-order-card__amount { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .mypage-order-card__meta { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .mypage-order-card__num { color: var(--color-ink-muted, #b8b8b8); }

/* 상태 배지 */
.mypage-status-badge {
  display: inline-block;
  padding: .2rem .55rem;
  border-radius: 4px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  background: rgba(74, 92, 122, .1);
  color: var(--color-jjok-dk, #2f3a5e);
  border: 1px solid rgba(74, 92, 122, .22);
}
.mypage-status-badge--pending,
.mypage-status-badge--preparing {
  background: rgba(196, 160, 80, .12);
  color: var(--color-gold-dk, #8a6f3a);
  border-color: rgba(196, 160, 80, .28);
}
.mypage-status-badge--paid,
.mypage-status-badge--confirmed,
.mypage-status-badge--shipped {
  background: rgba(74, 92, 122, .12);
  color: var(--color-jjok-dk, #2f3a5e);
  border-color: rgba(74, 92, 122, .3);
}
.mypage-status-badge--renting {
  background: rgba(40, 167, 69, .12);
  color: #2a7a3b;
  border-color: rgba(40, 167, 69, .3);
}
.mypage-status-badge--delivered,
.mypage-status-badge--returned {
  background: rgba(40, 167, 69, .12);
  color: #2a7a3b;
  border-color: rgba(40, 167, 69, .3);
}
.mypage-status-badge--cancelled,
.mypage-status-badge--refunded,
.mypage-status-badge--no_show {
  background: rgba(181, 87, 95, .1);
  color: var(--color-jaju, #b5575f);
  border-color: rgba(181, 87, 95, .25);
}
[data-theme="dark"] .mypage-status-badge {
  background: rgba(255,255,255,0.06);
  color: var(--color-ink, #f0eee9);
  border-color: rgba(255,255,255,0.1);
}

/* 모바일 — 카드 비례 축소 */
@media (max-width: 575.98px) {
  .mypage-order-card { padding: .65rem .75rem; gap: .75rem; }
  .mypage-order-card__thumb { width: 56px; height: 56px; }
  .mypage-order-card__title { font-size: .85rem; }
  .mypage-order-card__amount { font-size: .82rem; }
  .mypage-order-card__meta { font-size: .7rem; gap: .35rem; }
  .mypage-tab { padding: .55rem .8rem; font-size: .82rem; }
  .mypage-status-chip { padding: .28rem .65rem; font-size: .72rem; }
}

/* ==========================================================================
   /rental/<id>/reserve/ — 렌탈 예약 진행 페이지
   ========================================================================== */

/* ① 진행 단계 인디케이터 */
.booking-steps {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .75rem 0;
}
.booking-step {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex-shrink: 0;
}
.booking-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--color-surface-muted, #f0ede5);
  color: var(--color-ink-muted, #8b8b8b);
  font-weight: 800;
  font-size: .85rem;
  border: 2px solid var(--color-border, #e6e3df);
}
.booking-step__label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-ink-muted, #8b8b8b);
  white-space: nowrap;
}
.booking-step--active .booking-step__num {
  background: var(--color-jjok, #4a5c7a);
  color: #fff;
  border-color: var(--color-jjok, #4a5c7a);
  box-shadow: 0 2px 8px rgba(74, 92, 122, 0.28);
}
.booking-step--active .booking-step__label {
  color: var(--color-jjok-dk, #2f3a5e);
  font-weight: 700;
}
.booking-step--done .booking-step__num {
  background: rgba(40, 167, 69, .12);
  color: #2a7a3b;
  border-color: rgba(40, 167, 69, .35);
}
.booking-step--done .booking-step__label {
  color: #2a7a3b;
}
.booking-step__line {
  flex: 1;
  height: 2px;
  background: var(--color-border, #e6e3df);
  border-radius: 1px;
  min-width: 20px;
}
[data-theme="dark"] .booking-step__num {
  background: rgba(255,255,255,0.06);
  color: var(--color-ink-muted, #b8b8b8);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .booking-step__line { background: var(--color-border, #3a3a3a); }
[data-theme="dark"] .booking-step--active .booking-step__num {
  background: var(--color-gold-lt, #e3c989);
  color: #1a1a1a;
  border-color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .booking-step--active .booking-step__label { color: var(--color-gold-lt, #e3c989); }

/* ==========================================================================
   /orders/checkout/ — 결제 페이지
   ========================================================================== */

/* 결제 수단 안내 박스 */
.checkout-payment-info {
  background: linear-gradient(135deg, #FFEB3B 0%, #FEE500 100%);
  border: 1px solid rgba(0,0,0,.08);
  position: relative;
  overflow: hidden;
}
.checkout-payment-info::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.45) 0%, transparent 55%);
  pointer-events: none;
}
.checkout-payment-info__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #3C1E1E;
  color: #FEE500;
  font-size: 1.3rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.checkout-payment-info__title {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: #3C1E1E;
  position: relative;
  z-index: 2;
}
.checkout-payment-info__desc {
  color: rgba(60, 30, 30, 0.7) !important;
  position: relative;
  z-index: 2;
}

/* 영수증 — 주문 상품 행 */
.checkout-items {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.checkout-item-row {
  display: flex;
  justify-content: space-between;
  gap: .65rem;
  padding: .35rem 0;
}
.checkout-item-row__main { flex: 1; min-width: 0; }
.checkout-item-row__name {
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-ink, #1a1a1a);
  line-height: 1.3;
  letter-spacing: -.01em;
}
.checkout-item-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .72rem;
  color: var(--color-ink-muted, #6a6a6a);
  margin-top: .15rem;
}
.checkout-item-row__amount {
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-jjok-dk, #2f3a5e);
  white-space: nowrap;
}

/* 카카오페이 버튼 */
.checkout-pay-btn {
  background: #FEE500;
  color: #3C1E1E !important;
  border: none;
  font-weight: 800;
  letter-spacing: -.015em;
  box-shadow: 0 4px 14px rgba(254, 229, 0, 0.45);
  transition: transform .12s, box-shadow .12s, background .15s;
}
.checkout-pay-btn:hover {
  background: #FFC107;
  color: #3C1E1E !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(254, 229, 0, 0.55);
}
.checkout-pay-btn:active {
  transform: translateY(0);
}
.checkout-pay-btn:focus { box-shadow: 0 0 0 4px rgba(254, 229, 0, 0.32); }

/* 다크모드 */
[data-theme="dark"] .checkout-payment-info {
  background: linear-gradient(135deg, #d9c200 0%, #c4b000 100%);
}
[data-theme="dark"] .checkout-item-row__name { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .checkout-item-row__meta { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .checkout-item-row__amount { color: var(--color-gold-lt, #e3c989); }

@media (max-width: 575.98px) {
  .checkout-payment-info__logo { width: 38px; height: 38px; font-size: 1.1rem; }
  .checkout-payment-info__title { font-size: .92rem; }
  .checkout-item-row__name { font-size: .82rem; }
}

/* ==========================================================================
   /shop/<id>/ — 상품 상세 페이지 (보강)
   ========================================================================== */

/* 신뢰 배지 */
.product-trust {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .85rem 1rem;
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 8px;
}
.product-trust__item {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: .8rem;
  color: var(--color-ink-mid, #555);
}
.product-trust__item i {
  font-size: 1rem;
  flex-shrink: 0;
}
[data-theme="dark"] .product-trust {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .product-trust__item {
  color: var(--color-ink-muted, #cfcfcf);
}

/* 공유 — URL 복사 */
.product-share {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.product-share__btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: 1px solid var(--color-border, #e6e3df);
  color: var(--color-ink-muted, #6a6a6a);
  padding: .35rem .8rem;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.product-share__btn:hover {
  background: var(--color-surface-muted, #f6f3ee);
  border-color: var(--color-jjok, #4a5c7a);
  color: var(--color-jjok-dk, #2f3a5e);
}
.product-share__btn i { font-size: .92rem; }
[data-theme="dark"] .product-share__btn {
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink-muted, #b8b8b8);
}
[data-theme="dark"] .product-share__btn:hover {
  background: rgba(255,255,255,0.04);
  color: var(--color-gold-lt, #e3c989);
  border-color: var(--color-gold-lt, #e3c989);
}

/* ==========================================================================
   /shop/?q= — 검색 결과 페이지
   ========================================================================== */

/* 검색 결과 히어로 */
.search-hero {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, #f6f3ee 0%, #efe9da 100%);
  border: 1px solid var(--color-border, #e6e3df);
  flex-wrap: wrap;
}
.search-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-jjok, #4a5c7a);
  color: #fff;
  font-size: 1.4rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(74, 92, 122, 0.28);
}
.search-hero__body {
  flex: 1;
  min-width: 200px;
}
.search-hero__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-ink-muted, #6a6a6a);
  margin-bottom: .15rem;
}
.search-hero__title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--color-ink, #1a1a1a);
  margin: 0;
  line-height: 1.3;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem;
}
.search-query {
  color: var(--color-jjok-dk, #2f3a5e);
  font-weight: 800;
}
.search-hero__count {
  font-size: .85rem;
  font-weight: 500;
  color: var(--color-ink-muted, #6a6a6a);
}
.search-hero__count strong {
  color: var(--color-jjok-dk, #2f3a5e);
  font-weight: 800;
  font-size: 1rem;
}
[data-theme="dark"] .search-hero {
  background: linear-gradient(135deg, #2a2620 0%, #1e1c18 100%);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .search-hero__icon {
  background: var(--color-gold-lt, #e3c989);
  color: #1a1a1a;
}
[data-theme="dark"] .search-hero__label { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .search-hero__title { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .search-query { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .search-hero__count { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .search-hero__count strong { color: var(--color-gold-lt, #e3c989); }

/* 검색 결과 없음 빈 상태 */
.search-empty {
  max-width: 600px;
  margin: 0 auto;
}
.search-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--color-surface-muted, #faf8f3);
  border: 2px dashed var(--color-border, #e6e3df);
  color: var(--color-muted, #c9c3ba);
  font-size: 2rem;
}
[data-theme="dark"] .search-empty__icon {
  background: rgba(255,255,255,0.04);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .search-empty h3 { color: var(--color-ink, #f5f5f5); }

@media (max-width: 575.98px) {
  .search-hero__icon { width: 44px; height: 44px; font-size: 1.2rem; }
  .search-hero__title { font-size: 1rem; }
  .search-empty__icon { width: 64px; height: 64px; font-size: 1.5rem; }
}

/* ==========================================================================
   /cart/ — 장바구니 페이지
   ========================================================================== */

/* 카트 아이템 카드 */
.cart-items {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.cart-item-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  transition: box-shadow .15s;
}
.cart-item-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.06); }
.cart-item-card__thumb {
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
}
.cart-item-card__thumb a {
  display: block;
  width: 100%;
  height: 100%;
}
.cart-item-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item-card__noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: var(--color-muted, #c9c3ba);
}
.cart-item-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cart-item-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .55rem;
  margin-bottom: .35rem;
}
.cart-item-card__name {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  margin: 0;
}
.cart-item-card__name a {
  color: var(--color-ink, #1a1a1a);
  text-decoration: none;
}
.cart-item-card__name a:hover { color: var(--color-jjok-dk, #2f3a5e); }
.cart-item-card__remove {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  color: var(--color-ink-muted, #8b8b8b);
  border: 1px solid var(--color-border, #e6e3df);
  cursor: pointer;
  font-size: .78rem;
  transition: background .15s, color .15s, transform .15s;
}
.cart-item-card__remove:hover {
  background: var(--color-jaju, #b5575f);
  color: #fff;
  border-color: var(--color-jaju, #b5575f);
  transform: scale(1.05);
}
.cart-item-card__meta {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin-bottom: .55rem;
}
.cart-item-card__meta-row {
  font-size: .78rem;
  color: var(--color-ink-muted, #6a6a6a);
  line-height: 1.5;
}
.cart-item-card__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: .55rem;
  border-top: 1px solid rgba(0,0,0,.06);
  gap: .8rem;
  flex-wrap: wrap;
}

/* 수량 컨트롤 */
.cart-item-card__qty {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 8px;
  overflow: hidden;
}
.cart-item-card__qty .qty-btn {
  width: 30px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-ink, #1a1a1a);
  font-size: 1rem;
  cursor: pointer;
  transition: background .15s;
}
.cart-item-card__qty .qty-btn:hover { background: var(--color-surface-muted, #f6f3ee); }
.cart-item-card__qty .qty-input {
  width: 44px;
  height: 32px;
  border: none;
  border-left: 1px solid var(--color-border, #e6e3df);
  border-right: 1px solid var(--color-border, #e6e3df);
  text-align: center;
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-ink, #1a1a1a);
  background: transparent;
  -moz-appearance: textfield;
  appearance: textfield;
}
.cart-item-card__qty .qty-input::-webkit-outer-spin-button,
.cart-item-card__qty .qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.cart-item-card__price {
  display: flex;
  align-items: baseline;
  gap: 2px;
}
.cart-item-card__amount {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--color-jjok-dk, #2f3a5e);
}
.cart-item-card__unit {
  font-size: .78rem;
  font-weight: 500;
  color: var(--color-ink-muted, #8b8b8b);
}
[data-theme="dark"] .cart-item-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .cart-item-card__thumb { background: rgba(255,255,255,0.04); }
[data-theme="dark"] .cart-item-card__name a { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .cart-item-card__meta-row { color: var(--color-ink-muted, #cfcfcf); }
[data-theme="dark"] .cart-item-card__amount { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .cart-item-card__bottom { border-top-color: rgba(255,255,255,0.08); }
[data-theme="dark"] .cart-item-card__qty {
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .cart-item-card__qty .qty-btn { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .cart-item-card__qty .qty-btn:hover { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .cart-item-card__qty .qty-input {
  color: var(--color-ink, #f0eee9);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .cart-item-card__remove {
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink-muted, #b8b8b8);
}

@media (max-width: 575.98px) {
  .cart-item-card { padding: .75rem .8rem; gap: .8rem; }
  .cart-item-card__thumb { width: 76px; height: 76px; }
  .cart-item-card__name { font-size: .9rem; }
  .cart-item-card__amount { font-size: 1rem; }
}

/* Sticky 주문 요약 */
.cart-summary {
  position: sticky;
  top: 84px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(60,50,40,0.06);
}
.cart-summary__head {
  padding: .85rem 1.1rem;
  background: var(--color-surface-muted, #faf8f3);
  border-bottom: 1px solid var(--color-border, #ebe6dc);
}
.cart-summary__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 800;
  color: var(--color-jjok-dk, #2f3a5e);
}
.cart-summary__body {
  padding: 1rem 1.1rem 1.2rem;
}
.cart-summary__row {
  display: flex;
  justify-content: space-between;
  font-size: .9rem;
  color: var(--color-ink-mid, #555);
  padding: .35rem 0;
}
.cart-summary__row--discount span { font-weight: 700; }
.cart-summary__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .85rem 0;
  margin: .65rem 0;
  border-top: 2px solid var(--color-border, #e6e3df);
  border-bottom: 2px solid var(--color-border, #e6e3df);
  font-size: .95rem;
  color: var(--color-ink-mid, #555);
}
.cart-summary__total strong {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-jjok-dk, #2f3a5e);
}
.cart-summary__guest-tip {
  color: var(--color-ink-muted, #6a6a6a);
  text-align: center;
}
.cart-summary__guest-tip a {
  color: var(--color-jjok-dk, #2f3a5e);
  font-weight: 600;
  text-decoration: none;
}
.cart-summary__guest-tip a:hover { text-decoration: underline; }
.cart-summary__trust {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--color-border, #ebe6dc);
}
.cart-summary__trust-item {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  color: var(--color-ink-muted, #6a6a6a);
}
.cart-summary__trust-item i { font-size: .9rem; flex-shrink: 0; }

/* 쿠폰 영역 */
.cart-coupon__applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  padding: .6rem .85rem;
  background: rgba(40, 167, 69, .08);
  border: 1px solid rgba(40, 167, 69, .25);
  border-radius: 8px;
  font-size: .85rem;
}

[data-theme="dark"] .cart-summary {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .cart-summary__head {
  background: rgba(255,255,255,0.03);
  border-bottom-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .cart-summary__title { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .cart-summary__row { color: var(--color-ink-muted, #cfcfcf); }
[data-theme="dark"] .cart-summary__total {
  color: var(--color-ink-muted, #cfcfcf);
  border-top-color: var(--color-border, #3a3a3a);
  border-bottom-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .cart-summary__total strong { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .cart-summary__guest-tip { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .cart-summary__guest-tip a { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .cart-summary__trust { border-top-color: var(--color-border, #3a3a3a); }
[data-theme="dark"] .cart-summary__trust-item { color: var(--color-ink-muted, #b8b8b8); }

/* 빈 상태 */
.cart-empty {
  max-width: 480px;
  margin: 0 auto;
}
.cart-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-surface-muted, #faf8f3);
  border: 2px dashed var(--color-border, #e6e3df);
  color: var(--color-muted, #c9c3ba);
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
[data-theme="dark"] .cart-empty__icon {
  background: rgba(255,255,255,0.04);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .cart-empty h2 { color: var(--color-ink, #f5f5f5); }

/* ==========================================================================
   /policy/<slug>/ — 이용 안내·정책 페이지
   ========================================================================== */

/* ① 짧은 히어로 */
.policy-hero {
  background: linear-gradient(135deg, #faf8f3 0%, #efe9da 100%);
  border: 1px solid var(--color-border, #e6e3df);
}
.policy-hero__eyebrow {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  color: var(--color-gold-dk, #8a6f3a);
}
.policy-hero__title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--color-ink, #1a1a1a);
}
.policy-hero__subtitle {
  font-size: .8rem;
  color: var(--color-ink-muted, #6a6a6a);
}
[data-theme="dark"] .policy-hero {
  background: linear-gradient(135deg, #2a2620 0%, #1e1c18 100%);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .policy-hero__eyebrow { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .policy-hero__title { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .policy-hero__subtitle { color: var(--color-ink-muted, #b8b8b8); }

/* ② 좌측 sticky 네비 */
.policy-nav {
  position: sticky;
  top: 84px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  padding: .65rem;
  box-shadow: 0 2px 10px rgba(60,50,40,.05);
}
.policy-nav__title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-ink-muted, #6a6a6a);
  padding: .35rem .55rem .55rem;
}
.policy-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.policy-nav__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .55rem .75rem;
  font-size: .88rem;
  color: var(--color-ink, #1a1a1a);
  text-decoration: none !important;
  border-radius: 8px;
  transition: background .15s, color .15s;
  margin-bottom: 2px;
}
.policy-nav__link:hover {
  background: var(--color-surface-muted, #f6f3ee);
  color: var(--color-jjok-dk, #2f3a5e);
}
.policy-nav__link.is-active {
  background: rgba(74, 92, 122, .1);
  color: var(--color-jjok-dk, #2f3a5e);
  font-weight: 700;
  border: 1px solid rgba(74, 92, 122, .2);
}
.policy-nav__chev {
  font-size: .82rem;
  opacity: .7;
}
[data-theme="dark"] .policy-nav {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .policy-nav__title { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .policy-nav__link { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .policy-nav__link:hover {
  background: rgba(255,255,255,0.04);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .policy-nav__link.is-active {
  background: rgba(227, 201, 137, .12);
  color: var(--color-gold-lt, #e3c989);
  border-color: rgba(227, 201, 137, .28);
}

/* ③ 본문 article */
.policy-article {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  padding: 1.5rem 1.8rem;
  box-shadow: 0 2px 12px rgba(60,50,40,.05);
}
[data-theme="dark"] .policy-article {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
.policy-content {
  font-size: .92rem;
  line-height: 1.8;
  color: var(--color-ink, #1a1a1a);
}
.policy-content h2 {
  margin: 2.2rem 0 .85rem;
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -.015em;
  color: var(--color-jjok-dk, #2f3a5e);
  padding-bottom: .45rem;
  border-bottom: 2px solid var(--color-border, #e6e3df);
}
.policy-content h2:first-child { margin-top: 0; }
.policy-content h3 {
  margin: 1.5rem 0 .65rem;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-ink, #1a1a1a);
}
.policy-content p { margin-bottom: 1rem; }
.policy-content ul,
.policy-content ol {
  padding-left: 1.4rem;
  margin-bottom: 1rem;
}
.policy-content li { margin-bottom: .35rem; }
.policy-content strong { color: var(--color-ink, #1a1a1a); font-weight: 700; }
.policy-content .lead {
  font-size: 1rem;
  color: var(--color-ink-mid, #555);
  margin-bottom: 1.5rem;
  padding: .9rem 1rem;
  background: var(--color-surface-muted, #faf8f3);
  border-left: 3px solid var(--color-jjok, #4a5c7a);
  border-radius: 4px;
}
.policy-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: .88rem;
}
.policy-content th, .policy-content td {
  padding: .65rem .85rem;
  border: 1px solid var(--color-border, #e6e3df);
  text-align: left;
}
.policy-content th {
  background: var(--color-surface-muted, #faf8f3);
  font-weight: 700;
  color: var(--color-jjok-dk, #2f3a5e);
}
[data-theme="dark"] .policy-content { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .policy-content h2 {
  color: var(--color-gold-lt, #e3c989);
  border-bottom-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .policy-content h3 { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .policy-content strong { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .policy-content .lead {
  background: rgba(255,255,255,0.03);
  color: var(--color-ink-muted, #cfcfcf);
  border-left-color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .policy-content th {
  background: rgba(255,255,255,0.04);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .policy-content th,
[data-theme="dark"] .policy-content td {
  border-color: var(--color-border, #3a3a3a);
}

/* ④ 이전·다음 페이지 페어 */
.policy-prev-next__card {
  display: block;
  padding: 1rem 1.1rem;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 10px;
  text-decoration: none !important;
  color: var(--color-ink, #1a1a1a) !important;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  height: 100%;
}
.policy-prev-next__card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
  border-color: rgba(74, 92, 122, 0.3);
}
.policy-prev-next__card--right { text-align: right; }
.policy-prev-next__dir {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-ink-muted, #8b8b8b);
  margin-bottom: .25rem;
}
.policy-prev-next__title {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-jjok-dk, #2f3a5e);
}
[data-theme="dark"] .policy-prev-next__card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink, #f0eee9) !important;
}
[data-theme="dark"] .policy-prev-next__title { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .policy-prev-next__dir { color: var(--color-ink-muted, #b8b8b8); }

/* ⑤ 도움말 CTA */
.policy-help-cta {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
}
[data-theme="dark"] .policy-help-cta {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .policy-help-cta h3 { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .policy-help-cta p,
[data-theme="dark"] .policy-help-cta .text-muted {
  color: var(--color-ink-muted, #b8b8b8) !important;
}

@media (max-width: 575.98px) {
  .policy-hero__title { font-size: 1.15rem; }
  .policy-hero__subtitle { font-size: .74rem; }
  .policy-article { padding: 1.1rem 1.15rem; }
  .policy-content { font-size: .88rem; line-height: 1.7; }
  .policy-content h2 { font-size: 1.05rem; }
  .policy-content h3 { font-size: .95rem; }
}

/* 단계 라인 완료 처리 */
.booking-step__line--done {
  background: rgba(40, 167, 69, .45);
}
[data-theme="dark"] .booking-step__line--done {
  background: rgba(227, 201, 137, .5);
}

/* 단계 3번 — 성공(완료) 활성 */
.booking-step--success .booking-step__num {
  background: linear-gradient(135deg, #28a745 0%, #1e7a34 100%);
  color: #fff;
  border-color: #1e7a34;
  box-shadow: 0 4px 14px rgba(40, 167, 69, 0.35);
}
.booking-step--success .booking-step__label {
  color: #1e7a34;
  font-weight: 800;
}
[data-theme="dark"] .booking-step--success .booking-step__num {
  background: linear-gradient(135deg, #38c759 0%, #1a8235 100%);
  color: #fff;
  border-color: #1a8235;
}
[data-theme="dark"] .booking-step--success .booking-step__label { color: #6fd882; }

/* ② 성공 히어로 */
.booking-success {
  background: linear-gradient(135deg, #eaf7ed 0%, #d9efe0 100%);
  border: 1px solid rgba(40, 167, 69, .25);
  position: relative;
  overflow: hidden;
}
.booking-success::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.5) 0%, transparent 55%);
  pointer-events: none;
}
.booking-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, #28a745 0%, #1e7a34 100%);
  color: #fff;
  font-size: 3rem;
  box-shadow: 0 6px 20px rgba(40, 167, 69, 0.32);
  position: relative;
  z-index: 2;
  animation: booking-success-pop .45s ease-out;
}
@keyframes booking-success-pop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.booking-success__title {
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #1e3a25;
  position: relative;
  z-index: 2;
}
.booking-success__subtitle {
  font-size: .9rem;
  color: #3d5e44;
  line-height: 1.55;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.booking-success__num-box {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1rem;
  background: rgba(255,255,255,0.75);
  border: 1.5px dashed rgba(40, 167, 69, .42);
  border-radius: 10px;
  position: relative;
  z-index: 2;
  backdrop-filter: blur(4px);
}
.booking-success__num-label {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #2a7a3b;
}
.booking-success__num {
  font-family: 'D2Coding', 'Consolas', monospace;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #1e3a25;
}
.booking-success__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(40, 167, 69, .15);
  color: #1e7a34;
  border: none;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.booking-success__copy:hover {
  background: rgba(40, 167, 69, .28);
  transform: scale(1.05);
}
.booking-success__copy--done {
  background: #28a745;
  color: #fff;
}
[data-theme="dark"] .booking-success {
  background: linear-gradient(135deg, #1a3a25 0%, #122a1a 100%);
  border-color: rgba(40, 167, 69, .35);
}
[data-theme="dark"] .booking-success__title { color: #c8eecf; }
[data-theme="dark"] .booking-success__subtitle { color: #9ed4ab; }
[data-theme="dark"] .booking-success__num-box {
  background: rgba(0,0,0,0.28);
  border-color: rgba(40, 167, 69, .45);
}
[data-theme="dark"] .booking-success__num-label { color: #6fd882; }
[data-theme="dark"] .booking-success__num { color: #c8eecf; }
[data-theme="dark"] .booking-success__copy {
  background: rgba(40, 167, 69, .22);
  color: #6fd882;
}

/* ④ 다음 단계 안내 */
.booking-next-steps {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
}
.booking-next-steps__list {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.booking-next-steps__item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.booking-next-steps__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--color-jjok, #4a5c7a);
  color: #fff;
  font-weight: 800;
  font-size: .82rem;
  flex-shrink: 0;
}
.booking-next-steps__title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-ink, #1a1a1a);
  line-height: 1.3;
}
.booking-next-steps__desc {
  font-size: .8rem;
  color: var(--color-ink-muted, #6a6a6a);
  margin-top: .15rem;
  line-height: 1.5;
}
[data-theme="dark"] .booking-next-steps {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .booking-next-steps__num {
  background: var(--color-gold-lt, #e3c989);
  color: #1a1a1a;
}
[data-theme="dark"] .booking-next-steps__title { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .booking-next-steps__desc { color: var(--color-ink-muted, #b8b8b8); }

@media (max-width: 575.98px) {
  .booking-success__icon { width: 64px; height: 64px; font-size: 2.2rem; }
  .booking-success__title { font-size: 1.25rem; }
  .booking-success__subtitle { font-size: .82rem; }
  .booking-success__num { font-size: .92rem; }
  .booking-next-steps__title { font-size: .85rem; }
  .booking-next-steps__desc { font-size: .76rem; }
}

/* 예약 영수증 카드 */
.booking-receipt {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(60,50,40,0.05);
}
.booking-receipt__head {
  padding: .85rem 1.1rem;
  background: var(--color-surface-muted, #faf8f3);
  border-bottom: 1px solid var(--color-border, #ebe6dc);
}
.booking-receipt__title {
  margin: 0;
  font-size: .92rem;
  font-weight: 800;
  color: var(--color-jjok-dk, #2f3a5e);
}
.booking-receipt__body { padding: 1rem 1.1rem; }
.booking-receipt__row {
  display: flex;
  gap: 1rem;
  padding: .55rem 0;
  border-bottom: 1px dashed var(--color-border, #ebe6dc);
}
.booking-receipt__row:last-child { border-bottom: none; padding-bottom: 0; }
.booking-receipt__row:first-child { padding-top: 0; }
.booking-receipt__label {
  flex-shrink: 0;
  width: 110px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--color-ink-muted, #6a6a6a);
}
.booking-receipt__value {
  flex: 1;
  font-size: .9rem;
  color: var(--color-ink, #1a1a1a);
  line-height: 1.5;
  word-break: break-word;
}
[data-theme="dark"] .booking-receipt {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .booking-receipt__head {
  background: rgba(255,255,255,0.03);
  border-bottom-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .booking-receipt__title { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .booking-receipt__row { border-bottom-color: var(--color-border, #3a3a3a); }
[data-theme="dark"] .booking-receipt__label { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .booking-receipt__value { color: var(--color-ink, #f0eee9); }

/* 상품 미리보기 (상품 카드 + 영수증 머리) */
.booking-receipt__product {
  display: flex;
  gap: 1rem;
  padding: .85rem 1rem;
}
.booking-receipt__product-thumb {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
  display: flex;
  align-items: center;
  justify-content: center;
}
.booking-receipt__product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.booking-receipt__product-noimg {
  font-size: 1.6rem;
  color: var(--color-muted, #c9c3ba);
}
.booking-receipt__product-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.booking-receipt__product-cat {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-jjok-dk, #2f3a5e);
  text-transform: uppercase;
  opacity: .82;
}
.booking-receipt__product-name {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.015em;
  line-height: 1.3;
  margin: 0;
  color: var(--color-ink, #1a1a1a);
}
.booking-receipt__product-meta {
  font-size: .78rem;
  color: var(--color-ink-muted, #6a6a6a);
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
[data-theme="dark"] .booking-receipt__product-cat { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .booking-receipt__product-name { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .booking-receipt__product-meta { color: var(--color-ink-muted, #b8b8b8); }

/* 결제 정보 (총액 강조) */
.booking-receipt--total .booking-receipt__head {
  background: linear-gradient(135deg, #4a5c7a 0%, #2f3a5e 100%);
  border-bottom: none;
}
.booking-receipt--total .booking-receipt__title { color: #fff; }
[data-theme="dark"] .booking-receipt--total .booking-receipt__head {
  background: linear-gradient(135deg, #826B47 0%, #594A31 100%);
}
[data-theme="dark"] .booking-receipt--total .booking-receipt__title { color: #fff; }
.booking-receipt__price-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .35rem 0;
  font-size: .88rem;
  color: var(--color-ink-mid, #555);
}
.booking-receipt__price-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: .75rem 0 0;
  margin-top: .55rem;
  border-top: 2px solid var(--color-border, #e6e3df);
  font-size: .95rem;
  color: var(--color-ink-mid, #555);
}
.booking-receipt__price-total strong {
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-jjok-dk, #2f3a5e);
}
[data-theme="dark"] .booking-receipt__price-row { color: var(--color-ink-muted, #cfcfcf); }
[data-theme="dark"] .booking-receipt__price-total {
  color: var(--color-ink-muted, #cfcfcf);
  border-top-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .booking-receipt__price-total strong { color: var(--color-gold-lt, #e3c989); }

@media (max-width: 575.98px) {
  .booking-receipt__label { width: 90px; font-size: .76rem; }
  .booking-receipt__value { font-size: .85rem; }
  .booking-receipt__product-thumb { width: 64px; height: 64px; }
  .booking-receipt__product-name { font-size: .9rem; }
  .booking-receipt__price-total strong { font-size: 1.2rem; }
}

/* ③ 상품 sticky 카드 */
.booking-product {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(60,50,40,0.06);
}
.booking-product__img-wrap {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
}
.booking-product__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.booking-product__noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-muted, #c9c3ba);
}
.booking-product__body {
  padding: .9rem 1rem 1rem;
}
.booking-product__cat {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-jjok-dk, #2f3a5e);
  text-transform: uppercase;
  margin-bottom: .25rem;
  opacity: .82;
}
.booking-product__name {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  margin: 0 0 .5rem;
  color: var(--color-ink, #1a1a1a);
}
.booking-product__price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  padding-top: .5rem;
  border-top: 1px solid rgba(0,0,0,.06);
}
.booking-product__amount {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--color-jjok-dk, #2f3a5e);
}
.booking-product__unit {
  font-size: .8rem;
  font-weight: 500;
  color: var(--color-ink-muted, #8b8b8b);
}
.booking-product__preview {
  margin-top: .8rem;
  padding: .7rem .85rem;
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #ebe6dc);
  border-radius: 8px;
}
.booking-product__preview-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--color-ink-mid, #555);
  margin-bottom: .35rem;
}
.booking-product__preview-row strong { color: var(--color-ink, #1a1a1a); }
.booking-product__preview-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .82rem;
  color: var(--color-ink-mid, #555);
  padding-top: .35rem;
  border-top: 1px dashed var(--color-border, #e6e3df);
}
.booking-product__preview-total strong {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-jjok-dk, #2f3a5e);
}
[data-theme="dark"] .booking-product {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .booking-product__name { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .booking-product__cat { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .booking-product__amount { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .booking-product__price { border-top-color: rgba(255,255,255,0.06); }
[data-theme="dark"] .booking-product__preview {
  background: rgba(255,255,255,0.03);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .booking-product__preview-row,
[data-theme="dark"] .booking-product__preview-total { color: var(--color-ink-muted, #cfcfcf); }
[data-theme="dark"] .booking-product__preview-row strong { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .booking-product__preview-total strong { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .booking-product__preview-total { border-top-color: var(--color-border, #3a3a3a); }

/* ④ 수령 방법 카드 라디오 */
.pickup-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem;
}
.pickup-card {
  position: relative;
}
.pickup-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.pickup-card__inner {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding: .85rem .95rem;
  background: var(--color-surface, #fff);
  border: 2px solid var(--color-border, #e6e3df);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  margin: 0;
  height: 100%;
}
.pickup-card:hover .pickup-card__inner {
  border-color: var(--color-jjok, #4a5c7a);
  background: var(--color-surface-muted, #faf8f3);
}
.pickup-card input[type="radio"]:checked + .pickup-card__inner {
  border-color: var(--color-jjok-dk, #2f3a5e);
  background: rgba(74, 92, 122, .06);
  box-shadow: 0 0 0 2px rgba(74, 92, 122, 0.16);
}
.pickup-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--color-surface-muted, #f6f3ee);
  color: var(--color-jjok, #4a5c7a);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.pickup-card input[type="radio"]:checked + .pickup-card__inner .pickup-card__icon {
  background: var(--color-jjok, #4a5c7a);
  color: #fff;
}
.pickup-card__label {
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-ink, #1a1a1a);
  line-height: 1.2;
}
.pickup-card__desc {
  font-size: .72rem;
  color: var(--color-ink-muted, #8b8b8b);
  margin-top: .1rem;
}
[data-theme="dark"] .pickup-card__inner {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .pickup-card:hover .pickup-card__inner {
  background: rgba(255,255,255,0.04);
}
[data-theme="dark"] .pickup-card input[type="radio"]:checked + .pickup-card__inner {
  background: rgba(227, 201, 137, 0.06);
  border-color: var(--color-gold-lt, #e3c989);
  box-shadow: 0 0 0 2px rgba(227, 201, 137, 0.16);
}
[data-theme="dark"] .pickup-card__icon {
  background: rgba(255,255,255,0.06);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .pickup-card input[type="radio"]:checked + .pickup-card__inner .pickup-card__icon {
  background: var(--color-gold-lt, #e3c989);
  color: #1a1a1a;
}
[data-theme="dark"] .pickup-card__label { color: var(--color-ink, #f0eee9); }

/* 모바일 — 비례 축소 */
@media (max-width: 575.98px) {
  .booking-step__num { width: 28px; height: 28px; font-size: .78rem; }
  .booking-step__label { font-size: .74rem; }
  .booking-product__name { font-size: .92rem; }
  .booking-product__amount { font-size: 1rem; }
  .pickup-cards { grid-template-columns: 1fr; }
  .pickup-card__icon { width: 32px; height: 32px; font-size: 1.05rem; }
  .pickup-card__label { font-size: .82rem; }
}

/* ==========================================================================
   마이페이지 — 리뷰 카드 + 프로필 폼
   ========================================================================== */

/* 리뷰 카드 */
.review-list {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.review-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 10px;
  padding: 1rem 1.1rem;
  transition: box-shadow .18s, border-color .18s;
}
.review-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.06);
  border-color: rgba(74, 92, 122, 0.22);
}
.review-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.review-card__product-link {
  text-decoration: none !important;
  color: var(--color-ink, #1a1a1a);
  font-weight: 700;
}
.review-card__product-link:hover { color: var(--color-jjok-dk, #2f3a5e); }
.review-card__product-name {
  font-size: .92rem;
  letter-spacing: -.01em;
}
.review-card__actions {
  display: flex;
  gap: .35rem;
  flex-shrink: 0;
}
.review-card__rating-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
  margin-bottom: .55rem;
}
.review-stars {
  display: inline-flex;
  gap: 1px;
  color: var(--color-gold-dk, #c4a050);
  font-size: .92rem;
}
.review-card__rating-text {
  font-size: .82rem;
  font-weight: 700;
  color: var(--color-jjok-dk, #2f3a5e);
}
.review-card__date {
  font-size: .78rem;
  color: var(--color-ink-muted, #8b8b8b);
}
.review-card__badge--photo {
  display: inline-flex;
  align-items: center;
  padding: .12rem .5rem;
  border-radius: 4px;
  background: rgba(74, 92, 122, .1);
  color: var(--color-jjok-dk, #2f3a5e);
  font-size: .65rem;
  font-weight: 700;
  border: 1px solid rgba(74, 92, 122, .22);
  margin-left: auto;
}
.review-card__content {
  font-size: .9rem;
  color: var(--color-ink-mid, #444);
  line-height: 1.6;
  margin: 0 0 .5rem;
  white-space: pre-wrap;
}
.review-card__images {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .5rem;
}
.review-card__images a {
  display: inline-flex;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  transition: transform .15s;
}
.review-card__images a:hover { transform: scale(1.04); }
.review-card__images img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 6px;
}
[data-theme="dark"] .review-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .review-card__product-link { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .review-card__rating-text { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .review-card__content { color: var(--color-ink-muted, #cfcfcf); }
[data-theme="dark"] .review-card__images img { border-color: var(--color-border, #3a3a3a); }
@media (max-width: 575.98px) {
  .review-card { padding: .85rem .9rem; }
  .review-card__product-name { font-size: .85rem; }
  .review-card__content { font-size: .85rem; }
  .review-card__images img { width: 60px; height: 60px; }
}

/* 프로필 폼 카드 */
.profile-form-card {
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
}
[data-theme="dark"] .profile-form-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}

.profile-avatar-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.profile-avatar {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-jjok, #4a5c7a);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 700;
  border: 3px solid var(--color-gold, #c4a050);
  overflow: hidden;
}
.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar-info { flex: 1; min-width: 200px; }

.profile-account-display {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .55rem;
  margin-top: 1rem;
}
.profile-account-display__item {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #ebe6dc);
  border-radius: 8px;
  padding: .6rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  position: relative;
}
.profile-account-display__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-ink-muted, #8b8b8b);
}
.profile-account-display__value {
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-ink, #1a1a1a);
  word-break: break-all;
}
.profile-account-display__item .badge {
  position: absolute;
  top: .35rem;
  right: .5rem;
  font-size: .58rem !important;
  padding: .1rem .35rem;
}
[data-theme="dark"] .profile-account-display__item {
  background: rgba(255,255,255,0.03);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .profile-account-display__value { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .profile-account-display__label { color: var(--color-ink-muted, #b8b8b8); }

@media (max-width: 575.98px) {
  .profile-avatar { width: 64px; height: 64px; font-size: 1.5rem; }
}

/* 마이페이지 — 소셜 계정 연결 카드 */
.profile-social-card {
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
}
[data-theme="dark"] .profile-social-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
.profile-social-list { display: flex; flex-direction: column; gap: .55rem; }
.profile-social-item {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #ebe6dc);
  transition: background-color .12s ease, border-color .12s ease;
}
.profile-social-item:hover {
  background: var(--color-surface, #fff);
  border-color: var(--color-jjok, #4a5c7a);
}
.profile-social-item .fw-500 { color: var(--color-ink, #1a1a1a); }
[data-theme="dark"] .profile-social-item {
  background: rgba(255,255,255,0.03);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .profile-social-item:hover {
  background: rgba(255,255,255,0.06);
}
[data-theme="dark"] .profile-social-item .fw-500 { color: var(--color-ink, #f0eee9); }

.profile-social-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.profile-social-icon--kakao  { background: #FEE500; }
.profile-social-icon--naver  { background: #03C75A; }
.profile-social-icon--google { background: #fff; border: 1px solid var(--color-border, #e6e3df); }
[data-theme="dark"] .profile-social-icon--google { border-color: #555; }

/* 적립금 히어로 */
.point-hero {
  background: linear-gradient(135deg, #B89968 0%, #826B47 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(130, 107, 71, 0.18);
}
.point-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.2) 0%, transparent 55%);
  pointer-events: none;
}
.point-hero__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 2;
  flex-wrap: wrap;
}
.point-hero__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: 1.5px solid rgba(255,255,255,0.4);
  color: #fff;
  font-size: 1.6rem;
  backdrop-filter: blur(4px);
}
.point-hero__text { flex: 1; min-width: 200px; }
.point-hero__label {
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .9;
  margin-bottom: .15rem;
}
.point-hero__value {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.point-hero__value span {
  font-size: 1rem;
  font-weight: 500;
  margin-left: 2px;
  opacity: .85;
}
.point-hero__desc {
  font-size: .78rem;
  opacity: .9;
  margin-top: .25rem;
  color: #fff;
}
.point-hero__desc--warn {
  color: #FFE9A8;
  opacity: 1;
}
.point-hero__rules {
  list-style: none;
  padding: 0;
  margin: .35rem 0 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
  font-size: .78rem;
  color: #fff;
  opacity: .92;
}
.point-hero__rules li {
  display: flex;
  align-items: center;
  gap: .35rem;
}
.point-hero__rules .bi {
  opacity: .85;
  font-size: .9em;
}
.point-hero__cta {
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* 결제 화면 — 적립 예정 카드 */
.checkout-point-preview {
  margin-top: .75rem;
  padding: .65rem .85rem;
  border-radius: 8px;
  background: #FBF6EE;
  color: #6B4E1A;
  border: 1px solid #E4C898;
  font-size: .9rem;
}
.checkout-point-preview--event {
  background: linear-gradient(135deg, #FFF6F6 0%, #FFE5E5 100%);
  border-color: #F1B5B5;
  color: #8C2A2A;
}
[data-theme="dark"] .checkout-point-preview {
  background: #2A2212;
  color: #F0DCA0;
  border-color: #5C4628;
}
[data-theme="dark"] .checkout-point-preview--event {
  background: linear-gradient(135deg, #3a1f1f 0%, #2a1313 100%);
  color: #F0C0C0;
  border-color: #6c3535;
}

/* 상품 상세 — 이벤트 적립 강조 */
.product-price__earn--event {
  color: #C24545;
  background: linear-gradient(135deg, #FFF6F6 0%, #FFE5E5 100%);
  border-left: 3px solid #C24545;
  padding: .4rem .65rem;
  border-radius: 4px;
}
.product-price__earn--event .bi-stars { color: #FFB300; }
[data-theme="dark"] .product-price__earn--event {
  background: linear-gradient(135deg, #3a1f1f 0%, #2a1313 100%);
  color: #F0C0C0;
  border-left-color: #E48888;
}

/* 친구 추천 코드 카드 */
.referral-card {
  background: linear-gradient(135deg, #EEF1FA 0%, #DCE3F0 100%);
  border: 1px solid #A4B3D8;
  color: #2F3A5E;
}
.referral-card__icon {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(123, 142, 196, 0.25);
  color: #5C70AC;
  font-size: 1.15rem;
}
.referral-card__code {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: .35rem .75rem;
  border-radius: 6px;
  background: #fff;
  color: #2F3A5E;
  border: 1px solid #A4B3D8;
}
[data-theme="dark"] .referral-card {
  background: linear-gradient(135deg, #1f2940 0%, #161e30 100%);
  border-color: #3D4A6E;
  color: #EEF1FA;
}
[data-theme="dark"] .referral-card__code {
  background: #2A3450;
  color: #EEF1FA;
  border-color: #3D4A6E;
}

/* 만료 임박 적립금 알림 */
.point-expiring-alert {
  background: linear-gradient(135deg, #FFF6E0 0%, #FFE9B8 100%);
  border: 1px solid #E4C898;
  color: #6B4E1A;
}
.point-expiring-alert__icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(196, 160, 112, 0.25);
  color: #8B6A2F;
  font-size: 1.15rem;
}
[data-theme="dark"] .point-expiring-alert {
  background: linear-gradient(135deg, #3a2f1a 0%, #2a2212 100%);
  border-color: #5C4628;
  color: #F0DCA0;
}
[data-theme="dark"] .point-expiring-alert__icon {
  background: rgba(196, 160, 112, 0.18);
  color: #E4C898;
}
@media (max-width: 575.98px) {
  .point-hero__icon { width: 48px; height: 48px; font-size: 1.3rem; }
  .point-hero__value { font-size: 1.5rem; }
  .point-hero__value span { font-size: .85rem; }
  .point-hero__cta { width: 100%; }
  .point-hero__cta .btn { width: 100%; }
}

/* 쿠폰 티켓 카드 그리드 */
.coupon-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .85rem;
}
@media (min-width: 992px) { .coupon-grid { grid-template-columns: repeat(2, 1fr); } }

.coupon-ticket {
  display: flex;
  align-items: stretch;
  background: #fff;
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  transition: transform .18s, box-shadow .18s;
}
.coupon-ticket:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0,0,0,0.08);
}

/* 좌측 — 할인 금액·아이콘 */
.coupon-ticket__left {
  flex-shrink: 0;
  width: 130px;
  background: linear-gradient(135deg, #B89968 0%, #826B47 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: .9rem .65rem;
  position: relative;
  overflow: hidden;
}
.coupon-ticket__left::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 70% 20%, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.coupon-ticket__type {
  font-size: 1rem;
  opacity: .85;
  margin-bottom: .1rem;
  position: relative;
  z-index: 2;
}
.coupon-ticket__amount {
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  text-align: center;
  position: relative;
  z-index: 2;
}
.coupon-ticket__amount strong {
  font-size: 1.8rem;
  font-weight: 800;
}
.coupon-ticket__amount span {
  font-size: .95rem;
  margin-left: 2px;
  font-weight: 500;
}
.coupon-ticket__off {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .2em;
  opacity: .85;
  margin-top: .25rem;
  position: relative;
  z-index: 2;
}

/* 점선 구분 + 노치 효과 */
.coupon-ticket__divider {
  position: relative;
  width: 1px;
  background: var(--color-border, #e6e3df);
  margin: .5rem 0;
}
.coupon-ticket__divider::before,
.coupon-ticket__divider::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
}
.coupon-ticket__divider::before { top: -8px; }
.coupon-ticket__divider::after  { bottom: -8px; }

/* 우측 — 코드·설명·메타 */
.coupon-ticket__right {
  flex: 1;
  padding: .9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.coupon-ticket__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.coupon-ticket__code {
  font-family: 'D2Coding', 'Consolas', monospace;
  font-size: .92rem;
  font-weight: 800;
  color: var(--color-jjok-dk, #2f3a5e);
  letter-spacing: .02em;
}
.coupon-ticket__badge {
  display: inline-block;
  padding: .18rem .55rem;
  border-radius: 4px;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.coupon-ticket__badge--available {
  background: rgba(40, 167, 69, .14);
  color: #2a7a3b;
  border: 1px solid rgba(40, 167, 69, .3);
}
.coupon-ticket__badge--used {
  background: rgba(74, 92, 122, .12);
  color: var(--color-jjok-dk, #2f3a5e);
  border: 1px solid rgba(74, 92, 122, .3);
}
.coupon-ticket__badge--expired {
  background: rgba(108, 117, 125, .12);
  color: var(--color-ink-muted, #6a6a6a);
  border: 1px solid rgba(108, 117, 125, .28);
}
.coupon-ticket__desc {
  font-size: .85rem;
  color: var(--color-ink-mid, #555);
  line-height: 1.4;
}
.coupon-ticket__meta {
  margin-top: auto;
  font-size: .72rem;
  color: var(--color-ink-muted, #6a6a6a);
  line-height: 1.5;
}

/* 사용 완료·만료 — 흐리게 */
.coupon-ticket--used,
.coupon-ticket--expired {
  opacity: .65;
  filter: saturate(0.4);
}
.coupon-ticket--used .coupon-ticket__left,
.coupon-ticket--expired .coupon-ticket__left {
  background: linear-gradient(135deg, #909090 0%, #6a6a6a 100%);
}

/* 다크모드 */
[data-theme="dark"] .coupon-ticket {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .coupon-ticket__divider {
  background: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .coupon-ticket__divider::before,
[data-theme="dark"] .coupon-ticket__divider::after {
  background: var(--color-hanji, #1c1c1c);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .coupon-ticket__code { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .coupon-ticket__desc { color: var(--color-ink-muted, #cfcfcf); }
[data-theme="dark"] .coupon-ticket__meta { color: var(--color-ink-muted, #b8b8b8); }

/* 안내 박스 */
.coupon-info-box {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
}
.coupon-info-box ul { color: var(--color-ink-mid, #555); line-height: 1.7; }
[data-theme="dark"] .coupon-info-box {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .coupon-info-box h3 { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .coupon-info-box ul { color: var(--color-ink-muted, #b8b8b8); }

@media (max-width: 575.98px) {
  .coupon-ticket__left { width: 105px; padding: .7rem .5rem; }
  .coupon-ticket__amount strong { font-size: 1.5rem; }
  .coupon-ticket__amount span { font-size: .82rem; }
  .coupon-ticket__off { font-size: .62rem; }
  .coupon-ticket__right { padding: .7rem .8rem; }
  .coupon-ticket__code { font-size: .82rem; }
}

/* 위시리스트 카드 그리드 */
.wishlist-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 576px) { .wishlist-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
@media (min-width: 992px) { .wishlist-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1400px) { .wishlist-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

.wishlist-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
  box-shadow: 0 1px 4px rgba(60,50,40,.06), 0 2px 12px rgba(60,50,40,.05);
}
.wishlist-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(60,50,40,.13);
}
.wishlist-card__img-link {
  display: block;
  position: relative;
}
.wishlist-card__img,
.wishlist-card__noimg {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  background: var(--color-surface-muted, #f6f3ee);
  transition: transform .38s ease;
}
.wishlist-card__noimg {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-muted, #c9c3ba);
}
.wishlist-card:hover .wishlist-card__img { transform: scale(1.05); }

/* 우측 상단 제거 버튼 */
.wishlist-card__remove {
  position: absolute;
  top: .55rem;
  right: .55rem;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  color: var(--color-jaju, #b5575f);
  border: none;
  font-size: .8rem;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: background .15s, color .15s, transform .15s;
  backdrop-filter: blur(4px);
}
.wishlist-card__remove:hover {
  background: var(--color-jaju, #b5575f);
  color: #fff;
  transform: scale(1.08);
}

.wishlist-card__body {
  padding: .75rem .85rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1;
}
.wishlist-card__cat {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--color-jjok-dk, #2f3a5e);
  text-transform: uppercase;
  opacity: .82;
}
.wishlist-card__name {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.3;
  margin: 0;
  color: var(--color-ink, #1a1a1a);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.wishlist-card__name a {
  color: inherit;
  text-decoration: none;
}
.wishlist-card__name a:hover { color: var(--color-jjok-dk, #2f3a5e); }
.wishlist-card__price {
  display: flex;
  align-items: baseline;
  gap: 3px;
  margin-top: .15rem;
}
.wishlist-card__amount {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--color-jjok-dk, #2f3a5e);
}
.wishlist-card__unit {
  font-size: .72rem;
  font-weight: 500;
  color: var(--color-ink-muted, #8b8b8b);
}
.wishlist-card__actions {
  margin-top: auto;
  padding-top: .55rem;
}

/* 다크모드 */
[data-theme="dark"] .wishlist-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .wishlist-card__remove {
  background: rgba(40, 40, 40, 0.95);
  color: var(--color-jaju, #d77a83);
}
[data-theme="dark"] .wishlist-card__remove:hover {
  background: var(--color-jaju, #b5575f);
  color: #fff;
}
[data-theme="dark"] .wishlist-card__cat { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .wishlist-card__name { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .wishlist-card__amount { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .wishlist-card__unit { color: var(--color-ink-muted, #b8b8b8); }

/* 모바일 — 위시 카드 축소 */
@media (max-width: 575.98px) {
  .wishlist-card__body { padding: .6rem .7rem .7rem; }
  .wishlist-card__name { font-size: .82rem; }
  .wishlist-card__amount { font-size: .9rem; }
  .wishlist-card__unit { font-size: .68rem; }
  .wishlist-card__remove { width: 26px; height: 26px; font-size: .72rem; top: .4rem; right: .4rem; }
}

/* 모바일 — 마이페이지 비례 축소 */
@media (max-width: 575.98px) {
  .mypage-hero__avatar { width: 52px; height: 52px; font-size: 1.25rem; }
  .mypage-hero__title { font-size: 1rem; }
  .mypage-hero__subtitle { font-size: .8rem; }
  .mypage-hero__badge { font-size: .7rem; padding: .26rem .6rem; }
  .mypage-stat-card { padding: .75rem .55rem; }
  .mypage-stat-card__icon { font-size: 1.2rem; }
  .mypage-stat-card__value { font-size: 1.2rem; }
  .mypage-stat-card__label { font-size: .7rem; }
  .mypage-active-card { padding: .7rem .85rem; }
  .mypage-active-card__product { font-size: .85rem; }
  .mypage-order-row { padding: .7rem .85rem; gap: .55rem; }
  .mypage-order-row__num { font-size: .76rem; }
  .mypage-order-row__amount { font-size: .85rem; }
}

/* ==========================================================================
   /inquiry/ — 1:1 문의 페이지 (B안 6섹션 점진 퍼널)
   ========================================================================== */

/* ① 짧은 히어로 */
.inquiry-hero {
  background: linear-gradient(135deg, #3E7A85 0%, #1F4E5A 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(31, 78, 90, 0.16);
}
.inquiry-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.inquiry-hero__eyebrow {
  font-size: .7rem;
  letter-spacing: .2em;
  font-weight: 700;
  color: var(--color-gold-lt, #e3c989);
  opacity: .92;
  position: relative;
  z-index: 2;
}
.inquiry-hero__title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.015em;
  position: relative;
  z-index: 2;
}
.inquiry-hero__subtitle {
  font-size: .9rem;
  opacity: .88;
  line-height: 1.55;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.inquiry-hero__badges {
  display: flex;
  justify-content: center;
  gap: .45rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.inquiry-hero__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.18);
  color: #fff;
  padding: .32rem .75rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* ③ 문의 유형 카드 — 코디네이션 occasion 카드 패턴 재활용 */
.inquiry-topic-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  color: #fff;
  min-height: 140px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.10);
  transition: transform .22s ease-out, box-shadow .22s ease-out;
  padding: 1rem 1.1rem;
}
.inquiry-topic-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 12%, rgba(255,255,255,0.22) 0%, transparent 55%);
  pointer-events: none;
}
.inquiry-topic-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);
}
.inquiry-topic-card__icon-wrap {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);
  margin-bottom: auto;
}
.inquiry-topic-card__icon {
  font-size: 1.15rem;
  color: #fff;
  line-height: 1;
}
.inquiry-topic-card__body {
  position: relative;
  z-index: 2;
  margin-top: .85rem;
}
.inquiry-topic-card__label {
  font-size: .98rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.25;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.inquiry-topic-card__desc {
  font-size: .74rem;
  font-weight: 500;
  opacity: .88;
  line-height: 1.45;
  margin-top: .15rem;
}

/* ④ 응답 시간 안내 — 신뢰 배지 */
.inquiry-info__item {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .9rem 1rem;
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 10px;
  background: var(--color-surface, #fff);
  height: 100%;
  transition: box-shadow .15s, transform .15s;
}
.inquiry-info__item:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.inquiry-info__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-surface-muted, #faf8f3);
  color: var(--color-jjok, #4a5c7a);
  font-size: 1.25rem;
  flex-shrink: 0;
}
.inquiry-info__title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-ink, #1a1a1a);
  line-height: 1.2;
}
.inquiry-info__desc {
  font-size: .75rem;
  color: var(--color-ink-muted, #6a6a6a);
  margin-top: .15rem;
}
[data-theme="dark"] .inquiry-info__item {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .inquiry-info__icon {
  background: rgba(255,255,255,0.06);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .inquiry-info__title { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .inquiry-info__desc { color: var(--color-ink-muted, #b8b8b8); }

/* ⑤ 폼 카드 (coord-form-* 재활용) */
.inquiry-form-card {
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
}
[data-theme="dark"] .inquiry-form-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}

/* 모바일 — 문의 페이지 비례 축소 */
@media (max-width: 575.98px) {
  .inquiry-hero__title { font-size: 1.3rem; }
  .inquiry-hero__subtitle { font-size: .82rem; }
  .inquiry-hero__badge { font-size: .7rem; padding: .28rem .65rem; }
  .inquiry-topic-card { min-height: 120px; padding: .85rem .9rem; }
  .inquiry-topic-card__icon-wrap { width: 32px; height: 32px; }
  .inquiry-topic-card__icon { font-size: 1rem; }
  .inquiry-topic-card__label { font-size: .9rem; }
  .inquiry-topic-card__desc { font-size: .7rem; }
  .inquiry-info__item { padding: .7rem .85rem; }
  .inquiry-info__icon { width: 36px; height: 36px; font-size: 1.05rem; }
  .inquiry-info__title { font-size: .85rem; }
  .inquiry-info__desc { font-size: .7rem; }
}

/* ==========================================================================
   /faq/ — 자주 묻는 질문 페이지 (B안 7섹션)
   ========================================================================== */

/* ① 짧은 히어로 */
.faq-hero {
  background: linear-gradient(135deg, #4A5C7A 0%, #2F3A5E 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(47, 58, 94, 0.16);
}
.faq-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.faq-hero__eyebrow {
  font-size: .68rem;
  letter-spacing: .22em;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  position: relative;
  z-index: 2;
}
.faq-hero__title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.015em;
  position: relative;
  z-index: 2;
}
.faq-hero__subtitle {
  font-size: .9rem;
  opacity: .9;
  line-height: 1.55;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.faq-hero__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.22);
  color: #fff;
  padding: .42rem .95rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 2;
}

/* ② 검색바 */
.faq-search {
  max-width: 720px;
  margin: 0 auto;
}
.faq-search__wrap {
  position: relative;
  display: flex;
  align-items: center;
  background: var(--color-surface, #fff);
  border: 1.5px solid var(--color-border, #e6e3df);
  border-radius: 999px;
  padding: .3rem .3rem .3rem 1.1rem;
  transition: border-color .15s, box-shadow .15s;
}
.faq-search__wrap:focus-within {
  border-color: var(--color-jjok, #4a5c7a);
  box-shadow: 0 0 0 4px rgba(74, 92, 122, 0.1);
}
.faq-search__icon {
  font-size: 1rem;
  color: var(--color-muted, #8b8b8b);
  flex-shrink: 0;
}
.faq-search__input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: .92rem;
  padding: .55rem .65rem;
  outline: none;
  color: var(--color-ink, #1a1a1a);
}
.faq-search__input::placeholder {
  color: var(--color-muted, #9a9a9a);
}
.faq-search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--color-muted, #9a9a9a);
  background: transparent;
  text-decoration: none !important;
  margin-right: .25rem;
  font-size: 1rem;
}
.faq-search__clear:hover { color: var(--color-ink, #1a1a1a); }
.faq-search__submit {
  background: var(--color-jjok, #4a5c7a);
  color: #fff;
  border: none;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  flex-shrink: 0;
}
.faq-search__submit:hover {
  background: var(--color-jjok-dk, #2f3a5e);
}
[data-theme="dark"] .faq-search__wrap {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .faq-search__input { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .faq-search__icon { color: var(--color-ink-muted, #b8b8b8); }

/* ⑤ FAQ 그룹·아코디언 */
.faq-group {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  overflow: hidden;
}
.faq-group__title {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .95rem;
  font-weight: 700;
  margin: 0;
  padding: .85rem 1.2rem;
  background: var(--color-surface-muted, #faf8f3);
  color: var(--color-jjok-dk, #2f3a5e);
  border-bottom: 1px solid var(--color-border, #e6e3df);
}
.faq-group__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  min-width: 1.6em;
  padding: 0 .45em;
  border-radius: 999px;
  background: var(--color-jjok, #4a5c7a);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
}
[data-theme="dark"] .faq-group {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .faq-group__title {
  background: rgba(255,255,255,0.04);
  color: var(--color-gold-lt, #e3c989);
  border-bottom-color: var(--color-border, #3a3a3a);
}

.faq-accordion .accordion-item {
  border: none;
  border-bottom: 1px solid var(--color-border, #ebe6dc);
}
.faq-accordion .accordion-item:last-child { border-bottom: none; }
.faq-accordion .accordion-button {
  background: transparent;
  color: var(--color-ink, #1a1a1a);
  font-weight: 500;
  font-size: .92rem;
  padding: 1rem 1.2rem;
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  box-shadow: none;
}
.faq-accordion .accordion-button:not(.collapsed) {
  background: rgba(74, 92, 122, 0.04);
  color: var(--color-jjok-dk, #2f3a5e);
  font-weight: 600;
}
.faq-accordion .accordion-button:focus { box-shadow: none; }
.faq-accordion .accordion-body {
  padding: 1rem 1.2rem 1.25rem;
  background: rgba(0,0,0,0.015);
  font-size: .9rem;
  color: var(--color-ink-mid, #444);
  display: flex;
  align-items: flex-start;
  gap: .65rem;
}
.faq-q-mark, .faq-a-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: .8rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: .05rem;
}
.faq-q-mark {
  background: var(--color-gold, #c4a050);
  color: #fff;
}
.faq-a-mark {
  background: var(--color-jjok, #4a5c7a);
  color: #fff;
}
.faq-q-text { flex: 1; line-height: 1.5; }
.faq-a-text { flex: 1; line-height: 1.65; }
.faq-a-text p:last-child { margin-bottom: 0; }

[data-theme="dark"] .faq-accordion .accordion-item {
  border-bottom-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .faq-accordion .accordion-button {
  color: var(--color-ink, #f0eee9);
}
[data-theme="dark"] .faq-accordion .accordion-button:not(.collapsed) {
  background: rgba(255,255,255,0.04);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .faq-accordion .accordion-body {
  background: rgba(255,255,255,0.02);
  color: var(--color-ink-muted, #cfcfcf);
}

/* ⑦ 하단 CTA */
.faq-bottom-cta {
  background: linear-gradient(135deg, #f0e7d8 0%, #e3d4b8 100%);
  border: 1px solid rgba(180, 150, 100, .25);
  position: relative;
  overflow: hidden;
}
.faq-bottom-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.4) 0%, transparent 55%);
  pointer-events: none;
}
.faq-bottom-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  color: #B58A6B;
  font-size: 1.4rem;
  box-shadow: 0 2px 8px rgba(180, 150, 100, .2);
}
.faq-bottom-cta h3,
.faq-bottom-cta p,
.faq-bottom-cta .btn,
.faq-bottom-cta .form-text {
  position: relative;
  z-index: 2;
}
[data-theme="dark"] .faq-bottom-cta {
  background: linear-gradient(135deg, #3a3528 0%, #2c2920 100%);
  border-color: rgba(180, 150, 100, .25);
}
[data-theme="dark"] .faq-bottom-cta h3 { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .faq-bottom-cta p,
[data-theme="dark"] .faq-bottom-cta .text-muted {
  color: var(--color-ink-muted, #cfcfcf) !important;
}
[data-theme="dark"] .faq-bottom-cta__icon {
  background: rgba(255,255,255,0.12);
  color: var(--color-gold-lt, #e3c989);
}

/* 모바일 — FAQ 페이지 비례 축소 */
@media (max-width: 575.98px) {
  .faq-hero__title { font-size: 1.3rem; }
  .faq-hero__subtitle { font-size: .82rem; }
  .faq-hero__badge { font-size: .76rem; padding: .35rem .8rem; }
  .faq-search__input { font-size: .86rem; padding: .5rem .55rem; }
  .faq-search__submit { padding: .5rem 1.1rem; font-size: .8rem; }
  .faq-group__title { font-size: .88rem; padding: .7rem 1rem; }
  .faq-accordion .accordion-button { font-size: .85rem; padding: .85rem 1rem; }
  .faq-accordion .accordion-body { font-size: .85rem; padding: .85rem 1rem 1.1rem; }
  .faq-q-mark, .faq-a-mark { width: 21px; height: 21px; font-size: .72rem; }
  .faq-bottom-cta__icon { width: 44px; height: 44px; font-size: 1.2rem; }
}

/* ==========================================================================
   /gallery/ — 사진 갤러리 페이지 (B안 7섹션)
   ========================================================================== */

/* ① 짧은 히어로 (청록 그라데이션) */
.gallery-hero {
  background: linear-gradient(135deg, #3E7A85 0%, #1F4E5A 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(31, 78, 90, 0.18);
}
.gallery-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.gallery-hero__eyebrow {
  font-size: .68rem;
  letter-spacing: .22em;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  position: relative;
  z-index: 2;
}
.gallery-hero__title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.015em;
  position: relative;
  z-index: 2;
}
.gallery-hero__subtitle {
  font-size: .9rem;
  opacity: .9;
  line-height: 1.55;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.gallery-hero__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.22);
  color: #fff;
  padding: .42rem .95rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 2;
}

/* ④ 사진 그리드 — 4:5 비율 + 오버레이 */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
@media (min-width: 576px) { .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } }
@media (min-width: 992px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); gap: 14px; } }

.gallery-card {
  display: block;
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(60,50,40,.08);
  transition: transform .22s ease, box-shadow .22s ease;
  cursor: zoom-in;
  text-decoration: none !important;
}
.gallery-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(60,50,40,.16);
}
.gallery-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
}
.gallery-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .42s ease;
}
.gallery-card:hover .gallery-card__img { transform: scale(1.06); }

/* 호버 오버레이 — 하단 그라데이션 + 제목·카테고리 */
.gallery-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: .9rem .95rem;
  background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.7) 100%);
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
}
.gallery-card:hover .gallery-card__overlay,
.gallery-card:focus-visible .gallery-card__overlay {
  opacity: 1;
  transform: translateY(0);
}
.gallery-card__cat {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: .15rem;
}
.gallery-card__title {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 우측 상단 줌 아이콘 — 클릭 가능 힌트 */
.gallery-card__zoom {
  position: absolute;
  top: .55rem;
  right: .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  color: var(--color-jjok-dk, #2f3a5e);
  font-size: .85rem;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .2s, transform .2s;
  backdrop-filter: blur(4px);
}
.gallery-card:hover .gallery-card__zoom {
  opacity: 1;
  transform: scale(1);
}

/* glightbox 다크모드 토큰 — 캡션 색 보정 */
.glightbox-clean .gslide-description {
  background: rgba(0, 0, 0, 0.75);
}
.glightbox-clean .gslide-title {
  color: #fff;
  font-weight: 700;
}
.glightbox-clean .gslide-desc {
  color: rgba(255, 255, 255, 0.85);
}

/* 모바일 — 갤러리 페이지 비례 축소 */
@media (max-width: 575.98px) {
  .gallery-hero__title { font-size: 1.3rem; }
  .gallery-hero__subtitle { font-size: .82rem; }
  .gallery-hero__badge { font-size: .76rem; padding: .35rem .8rem; }
  .gallery-card__overlay { padding: .65rem .7rem; }
  .gallery-card__title { font-size: .8rem; }
  .gallery-card__cat { font-size: .6rem; }
  .gallery-card__zoom { width: 26px; height: 26px; font-size: .75rem; top: .4rem; right: .4rem; }
}

/* ==========================================================================
   /posts/ — 매거진·행사·블로그·공지 페이지 (B안 7섹션)
   ========================================================================== */

/* ① 카테고리별 히어로 — 컬러 분기 */
.magazine-hero {
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
}
.magazine-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.magazine-hero--magazine { background: linear-gradient(135deg, #6B4F7E 0%, #3A2A4E 100%); }
.magazine-hero--event    { background: linear-gradient(135deg, #B89968 0%, #826B47 100%); }
.magazine-hero--blog     { background: linear-gradient(135deg, #3E7A85 0%, #1F4E5A 100%); }
.magazine-hero--notice   { background: linear-gradient(135deg, #4A5C7A 0%, #1F2940 100%); }
.magazine-hero__eyebrow {
  font-size: .68rem;
  letter-spacing: .22em;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  position: relative;
  z-index: 2;
}
.magazine-hero__title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.015em;
  position: relative;
  z-index: 2;
}
.magazine-hero__subtitle {
  font-size: .9rem;
  opacity: .9;
  line-height: 1.55;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.magazine-hero__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.22);
  color: #fff;
  padding: .42rem .95rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 2;
}

/* ② 카테고리 칩 — count 배지 */
.magazine-chip-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  margin-left: .35rem;
  padding: 0 .35em;
  border-radius: 999px;
  background: rgba(0,0,0,0.08);
  font-size: .65rem;
  font-weight: 600;
}
.lookbook-chip.is-active .magazine-chip-count {
  background: rgba(255,255,255,0.28);
}
[data-theme="dark"] .magazine-chip-count {
  background: rgba(255,255,255,0.1);
}

/* ③ 피처드 (큰 카드, 가로 분할) */
.magazine-featured {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(60, 53, 48, .08);
  box-shadow: 0 4px 16px rgba(60,50,40,.08);
  transition: transform .22s ease, box-shadow .22s ease;
  color: var(--color-ink, #1a1a1a) !important;
  text-decoration: none !important;
  min-height: 280px;
}
.magazine-featured:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(60,50,40,.14);
  color: var(--color-ink, #1a1a1a) !important;
}
.magazine-featured__img-wrap {
  position: relative;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
  min-height: 280px;
}
.magazine-featured__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  transition: transform .4s ease;
}
.magazine-featured:hover .magazine-featured__img { transform: scale(1.04); }
.magazine-featured__noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3.5rem;
  color: var(--color-muted, #c9c3ba);
}
.magazine-featured__body {
  padding: 1.5rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.magazine-featured__cat {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--color-gold-dk, #8a6f3a);
  margin-bottom: .15rem;
}
.magazine-featured__title {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 0;
  color: var(--color-ink, #1a1a1a);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.magazine-featured__excerpt {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--color-ink-mid, #555);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.magazine-featured__meta {
  display: flex;
  gap: 1rem;
  font-size: .78rem;
  color: var(--color-ink-muted, #6a6a6a);
  margin-top: auto;
}
.magazine-featured__cta {
  display: inline-flex;
  align-items: center;
  font-size: .88rem;
  font-weight: 700;
  color: var(--color-jjok-dk, #2f3a5e);
  margin-top: .25rem;
}
.magazine-featured:hover .magazine-featured__cta i { transform: translateX(3px); }
.magazine-featured__cta i { transition: transform .2s; }

@media (max-width: 767.98px) {
  .magazine-featured { grid-template-columns: 1fr; min-height: 0; }
  .magazine-featured__img-wrap { aspect-ratio: 4/3; min-height: 0; }
  .magazine-featured__body { padding: 1.1rem 1.2rem; }
  .magazine-featured__title { font-size: 1.15rem; }
  .magazine-featured__excerpt { font-size: .86rem; }
}

[data-theme="dark"] .magazine-featured {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink, #f0eee9) !important;
}
[data-theme="dark"] .magazine-featured:hover {
  color: var(--color-ink, #f0eee9) !important;
}
[data-theme="dark"] .magazine-featured__title { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .magazine-featured__excerpt { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .magazine-featured__meta { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .magazine-featured__cta { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .magazine-featured__cat { color: var(--color-gold-lt, #e3c989); }

/* ⑤ 매거진 카드 그리드 */
.magazine-grid {
  gap: 14px;
}
@media (min-width: 768px) { .magazine-grid { gap: 18px; grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .magazine-grid { gap: 22px; grid-template-columns: repeat(3, 1fr); } }

.magazine-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(60, 53, 48, .08);
  box-shadow: 0 1px 4px rgba(60,50,40,.06), 0 2px 12px rgba(60,50,40,.05);
  transition: transform .22s ease, box-shadow .22s ease;
  height: 100%;
  color: var(--color-ink, #1a1a1a) !important;
}
.magazine-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 22px rgba(60,50,40,.13);
  color: var(--color-ink, #1a1a1a) !important;
}
.magazine-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
}
.magazine-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .38s ease;
}
.magazine-card:hover .magazine-card__img { transform: scale(1.05); }
.magazine-card__noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  color: var(--color-muted, #c9c3ba);
}
.magazine-card__pin {
  position: absolute;
  top: .55rem;
  right: .55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.92);
  color: #fff;
  font-size: .85rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.magazine-card__body {
  padding: .9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  flex: 1;
}
.magazine-card__cat {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--color-gold-dk, #8a6f3a);
  text-transform: uppercase;
}
.magazine-card__title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.35;
  margin: 0;
  color: var(--color-ink, #1a1a1a);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.magazine-card__excerpt {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--color-ink-mid, #555);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.magazine-card__meta {
  display: flex;
  gap: .8rem;
  font-size: .72rem;
  color: var(--color-ink-muted, #6a6a6a);
  margin-top: auto;
  padding-top: .45rem;
  border-top: 1px solid rgba(0,0,0,.06);
}
[data-theme="dark"] .magazine-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink, #f0eee9) !important;
}
[data-theme="dark"] .magazine-card:hover {
  color: var(--color-ink, #f0eee9) !important;
}
[data-theme="dark"] .magazine-card__title { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .magazine-card__excerpt { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .magazine-card__cat { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .magazine-card__meta {
  color: var(--color-ink-muted, #b8b8b8);
  border-top-color: rgba(255,255,255,.08);
}

/* 공지사항 — 텍스트 목록은 그대로 */
[data-theme="dark"] .notice-list .list-group-item {
  background: var(--color-surface-card, #2a2a2a);
  color: var(--color-ink, #f0eee9);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .notice-list .list-group-item small { color: var(--color-ink-muted, #b8b8b8) !important; }

/* 모바일 — 히어로·피처드 비례 축소 */
@media (max-width: 575.98px) {
  .magazine-hero__title { font-size: 1.3rem; }
  .magazine-hero__subtitle { font-size: .82rem; }
  .magazine-hero__badge { font-size: .76rem; padding: .35rem .8rem; }
  .magazine-card__title { font-size: .92rem; }
  .magazine-card__excerpt { font-size: .76rem; }
  .magazine-card__meta { font-size: .68rem; }
}

/* ==========================================================================
   /styling/lookbook/ — 룩북 갤러리 페이지 (B안 6섹션)
   ========================================================================== */

/* ① 짧은 히어로 */
.lookbook-hero {
  background: linear-gradient(135deg, #B89968 0%, #826B47 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(130, 107, 71, 0.18);
}
.lookbook-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.18) 0%, transparent 55%);
  pointer-events: none;
}
.lookbook-hero__eyebrow {
  font-size: .68rem;
  letter-spacing: .2em;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  position: relative;
  z-index: 2;
}
.lookbook-hero__title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.015em;
  position: relative;
  z-index: 2;
}
.lookbook-hero__subtitle {
  font-size: .9rem;
  opacity: .9;
  line-height: 1.55;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.lookbook-hero__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.22);
  color: #fff;
  padding: .42rem .95rem;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
  position: relative;
  z-index: 2;
}
.lookbook-hero__badge strong { font-weight: 700; }

/* ② 빠른 필터 칩 */
.lookbook-filters {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.lookbook-filters__label {
  font-size: .76rem;
  font-weight: 700;
  color: var(--color-muted, #6a6a6a);
  letter-spacing: .06em;
  text-transform: uppercase;
  flex-shrink: 0;
  min-width: 42px;
}
.lookbook-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.lookbook-chip {
  display: inline-flex;
  align-items: center;
  padding: .38rem .85rem;
  background: var(--color-surface-muted, #f6f3ee);
  color: var(--color-ink, #1a1a1a);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
}
.lookbook-chip:hover {
  background: #fff;
  border-color: var(--color-jjok, #4a5c7a);
  color: var(--color-jjok-dk, #2f3a5e);
}
.lookbook-chip.is-active {
  background: var(--color-jjok, #4a5c7a);
  border-color: var(--color-jjok, #4a5c7a);
  color: #fff !important;
  font-weight: 600;
}
.lookbook-chip.is-active:hover { color: #fff !important; }
.lookbook-chip--sm {
  font-size: .76rem;
  padding: .3rem .7rem;
}
[data-theme="dark"] .lookbook-chip {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink, #f0eee9);
}
[data-theme="dark"] .lookbook-chip:hover {
  background: rgba(255,255,255,0.04);
}
[data-theme="dark"] .lookbook-filters__label { color: var(--color-ink-muted, #b8b8b8); }

/* ③ 보조 필터 details */
.lookbook-advanced {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 10px;
  padding: .65rem 1rem;
}
.lookbook-advanced[open] { padding-bottom: 1rem; }
.lookbook-advanced__sum {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-ink, #1a1a1a);
  cursor: pointer;
  list-style: none;
  padding: .15rem 0;
}
.lookbook-advanced__sum::-webkit-details-marker { display: none; }
[data-theme="dark"] .lookbook-advanced {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .lookbook-advanced__sum { color: var(--color-ink, #f0eee9); }

/* ⑤ 룩북 카드 태그 (.coord-lookbook-card 위에 추가) */
.lookbook-card__tag {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 4px;
  background: rgba(74, 92, 122, 0.1);
  color: var(--color-jjok-dk, #2f3a5e);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.lookbook-card__tag--style {
  background: rgba(196, 160, 80, 0.12);
  color: var(--color-gold-dk, #8a6f3a);
}
[data-theme="dark"] .lookbook-card__tag {
  background: rgba(255,255,255,0.08);
  color: var(--color-ink-muted, #cfcfcf);
}
[data-theme="dark"] .lookbook-card__tag--style {
  background: rgba(227, 201, 137, 0.14);
  color: var(--color-gold-lt, #e3c989);
}

/* 빈 상태 */
.lookbook-empty {
  max-width: 640px;
  margin: 0 auto;
}
.lookbook-empty__icon { opacity: .35; }
[data-theme="dark"] .lookbook-empty h3 { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .lookbook-empty p { color: var(--color-ink-muted, #b8b8b8); }

/* ⑥ 하단 CTA */
.lookbook-bottom-cta {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
}
[data-theme="dark"] .lookbook-bottom-cta {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .lookbook-bottom-cta h3 { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .lookbook-bottom-cta p,
[data-theme="dark"] .lookbook-bottom-cta .text-muted {
  color: var(--color-ink-muted, #b8b8b8) !important;
}

/* 모바일 — 룩북 페이지 비례 축소 */
@media (max-width: 575.98px) {
  .lookbook-hero__title { font-size: 1.3rem; }
  .lookbook-hero__subtitle { font-size: .82rem; }
  .lookbook-hero__badge { font-size: .76rem; padding: .35rem .8rem; }
  .lookbook-filters__label { font-size: .7rem; }
  .lookbook-chip { font-size: .78rem; padding: .32rem .7rem; }
  .lookbook-chip--sm { font-size: .72rem; padding: .26rem .6rem; }
  .lookbook-advanced { padding: .55rem .85rem; }
  .lookbook-advanced__sum { font-size: .8rem; }
}

/* ==========================================================================
   /styling/recommend/ — 빠른 추천 페이지 (B안 5섹션)
   ========================================================================== */

/* ① 짧은 히어로 */
.recommend-hero {
  background: linear-gradient(135deg, #4A5C7A 0%, #2F3A5E 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(47, 58, 94, 0.16);
}
.recommend-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.recommend-hero__eyebrow {
  font-size: .68rem;
  letter-spacing: .2em;
  font-weight: 700;
  color: var(--color-gold-lt, #e3c989);
  opacity: .92;
  position: relative;
  z-index: 2;
}
.recommend-hero__title {
  font-size: 1.55rem;
  font-weight: 700;
  letter-spacing: -.015em;
  position: relative;
  z-index: 2;
}
.recommend-hero__subtitle {
  font-size: .9rem;
  opacity: .88;
  line-height: 1.55;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 2;
}
.recommend-hero__badges {
  display: flex;
  justify-content: center;
  gap: .45rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.recommend-hero__badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.18);
  color: #fff;
  padding: .32rem .75rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  backdrop-filter: blur(4px);
}

/* ③ preset 미리보기 카드 */
.recommend-preset-card {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(60, 53, 48, .08);
  box-shadow: 0 1px 4px rgba(60,50,40,.06), 0 2px 12px rgba(60,50,40,.05);
  transition: transform .22s ease, box-shadow .22s ease;
}
.recommend-preset-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(60,50,40,.13);
}
.recommend-preset-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
}
.recommend-preset-card__img {
  width: 100%;
  height: 100%;
  /* 인물 의상 이미지 — 잘림 없이 비율 보존 */
  object-fit: contain;
  /* 빈 공간은 wrap 의 배경색이 자연스럽게 채움 */
}
/* 멀티 이미지 — 첫 두 상품 좌우 분할 */
.recommend-preset-card__img-multi {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.recommend-preset-card__img-multi > div {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.recommend-preset-card__img-multi img {
  width: 100%; height: 100%;
  object-fit: contain;
}
[data-theme="dark"] .recommend-preset-card__img-multi > div { background: rgba(255,255,255,0.04); }
.recommend-preset-card__noimg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--color-muted, #c9c3ba);
}
.recommend-preset-card__badges {
  position: absolute;
  left: .55rem;
  bottom: .55rem;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
}
.recommend-preset-card__badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: rgba(74, 92, 122, 0.9);
  color: #fff;
  font-size: .65rem;
  font-weight: 600;
  backdrop-filter: blur(2px);
}
.recommend-preset-card__badge--gender {
  background: rgba(196, 160, 80, 0.92);
}
.recommend-preset-card__body {
  padding: .7rem .85rem .8rem;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.recommend-preset-card__name {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.3;
  color: var(--color-ink, #1a1a1a);
}
.recommend-preset-card__desc {
  font-size: .72rem;
  color: var(--color-ink-muted, #6a6a6a);
  line-height: 1.4;
}
.recommend-preset-card__price {
  margin-top: .25rem;
  font-size: .92rem;
  font-weight: 800;
  color: var(--color-jjok-dk, #2f3a5e);
  letter-spacing: -.01em;
}
.recommend-preset-card__price span {
  font-size: .72rem;
  font-weight: 500;
  color: var(--color-ink-muted, #8b8b8b);
  margin-left: 2px;
}
[data-theme="dark"] .recommend-preset-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .recommend-preset-card__name { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .recommend-preset-card__desc { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .recommend-preset-card__price { color: var(--color-gold-lt, #e3c989); }

/* ⑤ 1:1 상담 CTA 박스 */
.recommend-cta {
  background: linear-gradient(135deg, #e4ddf0 0%, #c9bee0 100%);
  border: 1px solid rgba(107, 79, 126, .22);
  position: relative;
  overflow: hidden;
}
.recommend-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.4) 0%, transparent 55%);
  pointer-events: none;
}
.recommend-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: .3rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  color: #6B4F7E;
  font-size: 1.45rem;
  box-shadow: 0 2px 8px rgba(107, 79, 126, .2);
}
.recommend-cta h3,
.recommend-cta p,
.recommend-cta .btn,
.recommend-cta .form-text {
  position: relative;
  z-index: 2;
}
[data-theme="dark"] .recommend-cta {
  background: linear-gradient(135deg, #2e2840 0%, #221c30 100%);
  border-color: rgba(107, 79, 126, .35);
}
[data-theme="dark"] .recommend-cta h3 { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .recommend-cta p,
[data-theme="dark"] .recommend-cta .text-muted {
  color: var(--color-ink-muted, #cfcfcf) !important;
}
[data-theme="dark"] .recommend-cta__icon {
  background: rgba(255,255,255,0.12);
  color: var(--color-gold-lt, #e3c989);
}

/* 모바일 — 히어로·preset 카드 축소 */
@media (max-width: 575.98px) {
  .recommend-hero__title { font-size: 1.3rem; }
  .recommend-hero__subtitle { font-size: .82rem; }
  .recommend-hero__badge { font-size: .68rem; padding: .26rem .6rem; }
  .recommend-preset-card__name { font-size: .82rem; }
  .recommend-preset-card__desc { font-size: .68rem; }
  .recommend-preset-card__price { font-size: .85rem; }
  .recommend-cta__icon { width: 44px; height: 44px; font-size: 1.25rem; }
}

/* ③ 빠른 코디 추천 quiz — 칩 라디오 */
.coord-quiz-form {
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
}
[data-theme="dark"] .coord-quiz-form {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
.coord-quiz-label {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  margin-bottom: .6rem;
  color: var(--color-ink, #1a1a1a);
}
.coord-quiz-label__hint {
  display: inline-block;
  margin-left: .4em;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--color-jjok, #4f91ba);
  background: rgba(79, 145, 186, 0.10);
  padding: 2px 8px;
  border-radius: 999px;
  vertical-align: middle;
}
[data-theme="dark"] .coord-quiz-label { color: var(--color-ink, #f0eee9); }
.coord-quiz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.coord-quiz-chip {
  display: inline-flex;
  align-items: center;
  padding: .42rem .95rem;
  background: var(--color-surface-muted, #faf8f3);
  color: var(--color-ink, #1a1a1a);
  border: 1.5px solid var(--color-border, #e6e3df);
  border-radius: 999px;
  font-size: .83rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .12s;
  user-select: none;
}
.coord-quiz-chip:hover {
  border-color: var(--color-jjok, #4a5c7a);
  color: var(--color-jjok-dk, #2f3a5e);
}
.btn-check:checked + .coord-quiz-chip {
  background: var(--color-jjok, #4a5c7a);
  border-color: var(--color-jjok, #4a5c7a);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(74, 92, 122, 0.22);
}
.btn-check:focus-visible + .coord-quiz-chip {
  outline: 2px solid var(--color-jjok-lt, #7080a0);
  outline-offset: 2px;
}
[data-theme="dark"] .coord-quiz-chip {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink, #f0eee9);
}
[data-theme="dark"] .coord-quiz-chip:hover {
  background: rgba(255,255,255,0.04);
}

.coord-quiz-optional {
  border-top: 1px dashed var(--color-border, #e6e3df);
  padding-top: .85rem;
}
.coord-quiz-optional__sum {
  font-size: .85rem;
  font-weight: 600;
  color: var(--color-ink-muted, #6a6a6a);
  cursor: pointer;
  list-style: none;
  padding: .25rem 0;
}
.coord-quiz-optional__sum::-webkit-details-marker { display: none; }
.coord-quiz-optional[open] .coord-quiz-optional__sum i.bi-plus-circle::before {
  content: "\f2ea"; /* dash-circle */
}
[data-theme="dark"] .coord-quiz-optional { border-color: var(--color-border, #3a3a3a); }

/* ⑥ CTA 박스 — 상담 폼 트리거 */
.coord-form-cta {
  background: linear-gradient(135deg, #f0e7d8 0%, #e3d4b8 100%);
  border: 1px solid rgba(180, 150, 100, .25);
  position: relative;
  overflow: hidden;
}
.coord-form-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.4) 0%, transparent 55%);
  pointer-events: none;
}
.coord-form-cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: .3rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.7);
  color: #B58A6B;
  font-size: 1.5rem;
  box-shadow: 0 2px 8px rgba(180, 150, 100, .18);
}
.coord-form-cta h3,
.coord-form-cta p {
  position: relative;
  z-index: 2;
}
.coord-form-cta .btn,
.coord-form-cta .form-text {
  position: relative;
  z-index: 2;
}
.coord-form-toggle__caret {
  display: inline-block;
  transition: transform .25s ease;
}
.coord-form-toggle[aria-expanded="true"] .coord-form-toggle__caret {
  transform: rotate(180deg);
}
[data-theme="dark"] .coord-form-cta {
  background: linear-gradient(135deg, #3a3528 0%, #2c2920 100%);
  border-color: rgba(180, 150, 100, .25);
}
[data-theme="dark"] .coord-form-cta h3 { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .coord-form-cta p,
[data-theme="dark"] .coord-form-cta .text-muted {
  color: var(--color-ink-muted, #cfcfcf) !important;
}
[data-theme="dark"] .coord-form-cta__icon {
  background: rgba(255,255,255,0.12);
  color: var(--color-gold-lt, #e3c989);
}

/* 모바일 — 퀴즈·CTA */
@media (max-width: 575.98px) {
  .coord-quiz-chip { font-size: .78rem; padding: .35rem .8rem; }
  .coord-quiz-label { font-size: .82rem; }
  .coord-form-cta__icon { width: 44px; height: 44px; font-size: 1.3rem; }
}

/* ⑤ 폼 그룹화 */
.coord-form-card {
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
}
[data-theme="dark"] .coord-form-card {
  background: var(--color-surface-card, #2a2a2a);
  border-color: var(--color-border, #3a3a3a);
}
.coord-form-group {
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-border, #ebe6dc);
  border-radius: 10px;
  background: var(--color-surface-muted, #faf8f3);
}
[data-theme="dark"] .coord-form-group {
  background: rgba(255,255,255,0.03);
  border-color: var(--color-border, #3a3a3a);
}
.coord-form-group__title {
  font-size: .92rem;
  font-weight: 700;
  margin-bottom: .85rem;
  color: var(--color-ink, #1a1a1a);
}
[data-theme="dark"] .coord-form-group__title { color: var(--color-ink, #f0eee9); }
.coord-form-assurance {
  font-size: .82rem;
  color: var(--color-ink-muted, #6a6a6a);
  text-align: center;
  padding: .55rem .8rem;
  background: rgba(40, 167, 69, 0.06);
  border: 1px solid rgba(40, 167, 69, 0.15);
  border-radius: 8px;
}
[data-theme="dark"] .coord-form-assurance {
  color: var(--color-ink-muted, #b8b8b8);
  background: rgba(40, 167, 69, 0.1);
}

/* 모바일 — 코디 페이지 비례 축소 */
@media (max-width: 575.98px) {
  .coord-hero__title { font-size: 1.35rem; }
  .coord-hero__subtitle { font-size: .85rem; }
  .coord-hero__badge { font-size: .7rem; padding: .28rem .65rem; }
  .coord-occasion-card { min-height: 125px; padding: .85rem .9rem; }
  .coord-occasion-card__icon-wrap { width: 34px; height: 34px; }
  .coord-occasion-card__icon { font-size: 1.05rem; }
  .coord-occasion-card__label { font-size: .92rem; }
  .coord-occasion-card__desc { font-size: .7rem; }
  .coord-process { padding: .85rem .9rem; }
  .coord-process__num { width: 28px; height: 28px; font-size: .82rem; }
  .coord-process__label { font-size: .82rem; }
  .coord-process__desc { font-size: .68rem; }
  .coord-form-group { padding: .85rem .9rem; }
  .coord-form-group__title { font-size: .85rem; }
}

/* ⑦ 하단 CTA */
.rental-bottom-cta {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
}
[data-theme="dark"] .rental-bottom-cta {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .rental-bottom-cta h3 { color: var(--color-ink, #f5f5f5); }
[data-theme="dark"] .rental-bottom-cta p,
[data-theme="dark"] .rental-bottom-cta .text-muted {
  color: var(--color-ink-muted, #b8b8b8) !important;
}

/* 모바일 — 4단계 스텝 줄바꿈 시 호흡 */
@media (max-width: 575.98px) {
  .rental-hero__title { font-size: 1.35rem; }
  .rental-hero__subtitle { font-size: .85rem; }
  .rental-steps { padding: .8rem .9rem; }
  .rental-steps__strip { gap: .35rem; }
  .rental-step__num { width: 24px; height: 24px; font-size: .75rem; }
  .rental-step__label { font-size: .78rem; }
  .rental-step__icon { font-size: .9rem; }
  .rental-trust__item { padding: .7rem .85rem; }
  .rental-trust__icon { width: 36px; height: 36px; font-size: 1.05rem; }
  .rental-trust__title { font-size: .85rem; }
  .rental-trust__desc { font-size: .7rem; }
}

/* ════════════════════════════════════════════════════════════════════
   주문 상세 페이지 (templates/orders/order_detail.html)
   ════════════════════════════════════════════════════════════════════ */

/* ① 주문번호 복사 버튼 */
.order-copy-btn {
  background: var(--color-surface-muted, #f4efe7);
  border: 1px solid var(--color-border, #e6e3df);
  color: var(--color-jjok, #2f3a5e);
  border-radius: 6px;
  width: 28px;
  height: 28px;
  font-size: .78rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all .15s ease;
  padding: 0;
}
.order-copy-btn:hover {
  background: var(--color-jjok-mist, #e0e6f1);
  border-color: var(--color-jjok, #2f3a5e);
}
.order-copy-btn--done {
  background: #d4edda;
  border-color: #28a745;
  color: #28a745;
}
[data-theme="dark"] .order-copy-btn {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .order-copy-btn:hover {
  background: var(--color-gold-tint, #594A31);
  border-color: var(--color-gold, #b88a3a);
}

/* ② 상태 타임라인 (5단계: 주문 → 결제 → 준비 → 배송 → 완료) */
.order-timeline {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
}
.order-timeline__strip {
  display: flex;
  align-items: flex-start;
  gap: .25rem;
}
.order-timeline__step {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  width: 70px;
  text-align: center;
}
.order-timeline__num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--color-muted, #b8b0a0);
  border: 2px solid var(--color-border, #e6e3df);
  font-size: 1rem;
  transition: all .2s ease;
}
.order-timeline__label {
  font-size: .76rem;
  color: var(--color-ink-muted, #888);
  font-weight: 500;
  line-height: 1.2;
}
.order-timeline__line {
  flex: 1;
  height: 2px;
  background: var(--color-border, #e6e3df);
  margin-top: 17px;
  border-radius: 1px;
}
.order-timeline__step.is-done .order-timeline__num {
  background: var(--color-jjok, #2f3a5e);
  border-color: var(--color-jjok, #2f3a5e);
  color: #fff;
}
.order-timeline__step.is-done .order-timeline__label {
  color: var(--color-jjok-dk, #232a44);
  font-weight: 600;
}
.order-timeline__step.is-active .order-timeline__num {
  background: var(--color-jjok-mist, #e0e6f1);
  border-color: var(--color-jjok, #2f3a5e);
  color: var(--color-jjok, #2f3a5e);
  box-shadow: 0 0 0 4px rgba(47, 58, 94, 0.15);
}
.order-timeline__step.is-active .order-timeline__label {
  color: var(--color-jjok, #2f3a5e);
  font-weight: 700;
}
.order-timeline__line.is-done {
  background: var(--color-jjok, #2f3a5e);
}
[data-theme="dark"] .order-timeline {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .order-timeline__num {
  background: var(--color-surface, #1a1a1a);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink-muted, #888);
}
[data-theme="dark"] .order-timeline__label { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .order-timeline__line { background: var(--color-border, #3a3a3a); }
[data-theme="dark"] .order-timeline__step.is-done .order-timeline__num,
[data-theme="dark"] .order-timeline__step.is-active .order-timeline__num {
  background: var(--color-gold, #b88a3a);
  border-color: var(--color-gold, #b88a3a);
  color: #1a1a1a;
}
[data-theme="dark"] .order-timeline__step.is-active .order-timeline__num {
  box-shadow: 0 0 0 4px rgba(184, 138, 58, 0.25);
}
[data-theme="dark"] .order-timeline__step.is-done .order-timeline__label,
[data-theme="dark"] .order-timeline__step.is-active .order-timeline__label {
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .order-timeline__line.is-done {
  background: var(--color-gold, #b88a3a);
}

@media (max-width: 767.98px) {
  .order-timeline__strip { gap: .15rem; }
  .order-timeline__step { width: 56px; }
  .order-timeline__num { width: 30px; height: 30px; font-size: .82rem; }
  .order-timeline__label { font-size: .68rem; }
  .order-timeline__line { margin-top: 14px; }
}
@media (max-width: 480px) {
  .order-timeline__step { width: 48px; }
  .order-timeline__label { font-size: .62rem; letter-spacing: -.02em; }
}

/* ③ 취소/환불 배너 */
.order-cancelled-banner {
  background: var(--color-jaju-lt, #f3e6ed);
  border: 1px solid var(--color-jaju, #a35585);
}
.order-cancelled-banner__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--color-jaju, #a35585);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}
[data-theme="dark"] .order-cancelled-banner {
  background: rgba(163, 85, 133, 0.18);
  border-color: var(--color-jaju, #a35585);
}
[data-theme="dark"] .order-cancelled-banner h2 { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .order-cancelled-banner__icon {
  background: var(--color-surface-card, #232323);
  color: var(--color-jaju-lt, #c987ad);
}

/* ④ 주문 상품 라인 (썸네일 + 정보 + 금액) */
.order-detail-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--color-border, #ebe6dc);
}
.order-detail-item:last-child { border-bottom: none; }
.order-detail-item__thumb {
  flex-shrink: 0;
  width: 72px;
  height: 90px;  /* 4:5 비율 */
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.order-detail-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.order-detail-item__noimg {
  font-size: 1.5rem;
  color: var(--color-muted, #c9c3ba);
}
.order-detail-item__body {
  flex: 1;
  min-width: 0;
}
.order-detail-item__name {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  margin-bottom: .35rem;
  color: var(--color-ink, #1a1a1a);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.order-detail-item__name a { color: inherit; transition: color .15s ease; }
.order-detail-item__name a:hover { color: var(--color-jjok, #2f3a5e); }
.order-detail-item__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  font-size: .8rem;
  color: var(--color-ink-mid, #666);
}
.order-detail-item__amount {
  flex-shrink: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-jjok-dk, #232a44);
  text-align: right;
  white-space: nowrap;
}
[data-theme="dark"] .order-detail-item { border-bottom-color: var(--color-border, #3a3a3a); }
[data-theme="dark"] .order-detail-item__name { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .order-detail-item__name a:hover { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .order-detail-item__meta { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .order-detail-item__amount { color: var(--color-gold-lt, #e3c989); }

@media (max-width: 575.98px) {
  .order-detail-item { gap: .75rem; padding: .85rem .9rem; }
  .order-detail-item__thumb { width: 60px; height: 75px; }
  .order-detail-item__name { font-size: .88rem; }
  .order-detail-item__meta { font-size: .72rem; gap: .35rem; }
  .order-detail-item__amount { font-size: .92rem; }
}

/* ⑤ 우측 스티키 사이드바 */
.order-detail-aside {
  position: sticky;
  top: 84px;
}
@media (max-width: 991.98px) {
  .order-detail-aside { position: static; }
}

.order-detail-summary {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
}
.order-detail-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 0;
  font-size: .88rem;
  gap: .75rem;
}
.order-detail-summary__label {
  color: var(--color-ink-mid, #6a6a6a);
  flex-shrink: 0;
}
.order-detail-summary__value {
  color: var(--color-ink, #1a1a1a);
  font-weight: 600;
  text-align: right;
}
.order-detail-summary__divider {
  height: 1px;
  background: var(--color-border, #e6e3df);
  margin: .5rem 0;
}
.order-detail-summary__row--total {
  padding-top: .35rem;
  padding-bottom: 0;
}
.order-detail-summary__total {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-jjok, #2f3a5e);
  letter-spacing: -.02em;
}
[data-theme="dark"] .order-detail-summary {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .order-detail-summary__label { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .order-detail-summary__value { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .order-detail-summary__divider { background: var(--color-border, #3a3a3a); }
[data-theme="dark"] .order-detail-summary__total { color: var(--color-gold-lt, #e3c989); }

.order-detail-help {
  background: var(--color-surface-muted, #faf8f3);
  border: 1px dashed var(--color-border, #e6e3df);
}
[data-theme="dark"] .order-detail-help {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .order-detail-help strong { color: var(--color-ink, #f0eee9); }

/* ⑥ 토스트 */
.order-detail-toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(26, 26, 26, 0.92);
  color: #fff;
  padding: .65rem 1.4rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 600;
  z-index: 1080;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.order-detail-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ════════════════════════════════════════════════════════════════════
   /styling/results/ & /styling/<pk>/  — 코디 추천 결과·세트 상세 (B안)
   ════════════════════════════════════════════════════════════════════ */

/* ① 결과 헤더 + 조건 요약 strip */
.results-header {
  background: linear-gradient(135deg, #f4eff8 0%, #e4ddf0 100%);
  border: 1px solid rgba(107, 79, 126, .18);
}
.results-header__eyebrow {
  font-size: .7rem;
  letter-spacing: .22em;
  font-weight: 700;
  color: #6B4F7E;
  opacity: .85;
}
[data-theme="dark"] .results-header {
  background: linear-gradient(135deg, #3a2e44 0%, #2a1f33 100%);
  border-color: rgba(170, 140, 210, .32);
}
[data-theme="dark"] .results-header h1 { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .results-header__eyebrow { color: var(--color-gold-lt, #e3c989); }

.results-conditions {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.results-conditions__label {
  font-size: .78rem;
  color: var(--color-ink-mid, #666);
  font-weight: 600;
  flex-shrink: 0;
}
.results-conditions__chips {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
[data-theme="dark"] .results-conditions__label { color: var(--color-ink-muted, #b8b8b8); }

/* 조건 chip — purpose/gender/season 색상 분기 */
.results-condition-chip {
  display: inline-flex;
  align-items: center;
  padding: .35rem .7rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: -.005em;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  color: var(--color-ink, #1a1a1a);
  border: 1px solid rgba(107, 79, 126, .22);
}
.results-condition-chip--purpose {
  background: var(--color-jjok-mist, #e0e6f1);
  color: var(--color-jjok-dk, #2f3a5e);
  border-color: var(--color-jjok, #2f3a5e);
}
.results-condition-chip--gender {
  background: var(--color-gold-tint, #f1e8d5);
  color: var(--color-gold-dk, #826b47);
  border-color: var(--color-gold, #b88a3a);
}
.results-condition-chip--season {
  background: #fdf3f0;
  color: #a3534a;
  border-color: #c97f70;
}
[data-theme="dark"] .results-condition-chip {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-ink, #f0eee9);
  border-color: rgba(255, 255, 255, 0.18);
}
[data-theme="dark"] .results-condition-chip--purpose {
  background: rgba(123, 142, 196, 0.22);
  color: var(--color-jjok-mist, #c5cde2);
  border-color: rgba(123, 142, 196, 0.45);
}
[data-theme="dark"] .results-condition-chip--gender {
  background: rgba(184, 138, 58, 0.22);
  color: var(--color-gold-lt, #e3c989);
  border-color: rgba(184, 138, 58, 0.5);
}
[data-theme="dark"] .results-condition-chip--season {
  background: rgba(201, 127, 112, 0.22);
  color: #e0a99e;
  border-color: rgba(201, 127, 112, 0.5);
}

/* ② preset 카드 추가 슬롯 — 구성 상품 썸네일 미리보기 + footer */
.results-preset-thumbs {
  display: flex;
  gap: .35rem;
  margin: .7rem 0 0;
  flex-wrap: wrap;
}
.results-preset-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--color-surface-muted, #f4efe7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted, #b8b0a0);
  font-size: .82rem;
  border: 1px solid var(--color-border, #e6e3df);
}
.results-preset-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.results-preset-thumb--more {
  background: var(--color-jjok-mist, #e0e6f1);
  color: var(--color-jjok-dk, #2f3a5e);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
[data-theme="dark"] .results-preset-thumb {
  background: var(--color-surface, #1a1a1a);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .results-preset-thumb--more {
  background: var(--color-gold-tint, #594A31);
  color: var(--color-gold-lt, #e3c989);
}

.recommend-preset-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .85rem;
  padding-top: .65rem;
  border-top: 1px solid var(--color-border, #ebe6dc);
}
.recommend-preset-card__cta {
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-jjok, #2f3a5e);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  transition: transform .15s ease;
}
.recommend-preset-card:hover .recommend-preset-card__cta {
  transform: translateX(3px);
}
[data-theme="dark"] .recommend-preset-card__footer { border-top-color: var(--color-border, #3a3a3a); }
[data-theme="dark"] .recommend-preset-card__cta { color: var(--color-gold-lt, #e3c989); }

/* ③ 빈 상태 */
.results-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--color-surface-muted, #faf8f3);
  color: var(--color-muted, #b8b0a0);
  font-size: 2rem;
  border: 2px dashed var(--color-border, #e6e3df);
}
[data-theme="dark"] .results-empty__icon {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}

/* ════════════════════════════════════════════════════════════════════
   /styling/<pk>/ — preset 상세
   ════════════════════════════════════════════════════════════════════ */

/* 큰 썸네일 */
.preset-hero-img {
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
  aspect-ratio: 4 / 5;
  position: relative;
}
.preset-hero-img img {
  width: 100%;
  height: 100%;
  /* 인물 의상 — 잘림 없이 비율 보존 */
  object-fit: contain;
  display: block;
}
/* 멀티 이미지 (첫 두 상품) — 좌우 1:1 분할 */
.preset-hero-img__multi {
  width: 100%; height: 100%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
}
.preset-hero-img__multi > div {
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.preset-hero-img__multi img {
  width: 100%; height: 100%;
  object-fit: contain;
}
[data-theme="dark"] .preset-hero-img__multi > div { background: rgba(255,255,255,0.04); }
.preset-hero-img__noimg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--color-muted, #c9c3ba);
}
[data-theme="dark"] .preset-hero-img {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}

.preset-detail__title {
  letter-spacing: -.025em;
  color: var(--color-ink, #1a1a1a);
  line-height: 1.25;
}
.preset-detail__desc {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--color-ink-mid, #5a5a5a);
  margin-bottom: 1.3rem;
}
[data-theme="dark"] .preset-detail__title { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .preset-detail__desc { color: var(--color-ink-muted, #b8b8b8); }

/* 구성 상품 row */
.preset-product-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--color-border, #ebe6dc);
  color: inherit;
  transition: background .15s ease;
}
.preset-product-row:last-child { border-bottom: none; }
.preset-product-row:hover {
  background: var(--color-surface-muted, #faf8f3);
}
.preset-product-row__thumb {
  flex-shrink: 0;
  width: 56px;
  height: 70px;  /* 4:5 */
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preset-product-row__thumb img {
  width: 100%;
  height: 100%;
  /* 작은 썸네일 — 비율 보존 */
  object-fit: contain;
}
.preset-product-row__noimg {
  font-size: 1.2rem;
  color: var(--color-muted, #c9c3ba);
}
.preset-product-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.preset-product-row__name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--color-ink, #1a1a1a);
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.preset-product-row__cat {
  font-size: .72rem;
  color: var(--color-ink-muted, #888);
  font-weight: 500;
}
.preset-product-row__price {
  flex-shrink: 0;
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.preset-product-row__price-main {
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-jjok-dk, #232a44);
  white-space: nowrap;
}
.preset-product-row__price-unit {
  font-size: .7em;
  font-weight: 600;
  opacity: .8;
  margin-left: .1em;
}
.preset-product-row__price-sub {
  font-size: .72rem;
  color: var(--color-ink-muted, #888);
  font-weight: 500;
  white-space: nowrap;
}
[data-theme="dark"] .preset-product-row { border-bottom-color: var(--color-border, #3a3a3a); }
[data-theme="dark"] .preset-product-row:hover { background: var(--color-surface, #1a1a1a); }
[data-theme="dark"] .preset-product-row__name { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .preset-product-row__cat,
[data-theme="dark"] .preset-product-row__price-sub { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .preset-product-row__price-main { color: var(--color-gold-lt, #e3c989); }

@media (max-width: 575.98px) {
  .preset-product-row { gap: .75rem; padding: .7rem .85rem; }
  .preset-product-row__thumb { width: 48px; height: 60px; }
  .preset-product-row__name { font-size: .82rem; }
  .preset-product-row__price-main { font-size: .82rem; }
  .results-condition-chip { font-size: .72rem; padding: .3rem .6rem; }
  .results-preset-thumb { width: 28px; height: 28px; }
}

/* ════════════════════════════════════════════════════════════════════
   /styling/lookbook/<pk>/ — 룩북 상세
   ════════════════════════════════════════════════════════════════════ */

/* 갤러리 — 메인 carousel + 썸네일 strip */
.lookbook-gallery {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.lookbook-gallery__main {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  background: var(--color-surface-muted, #f6f3ee);
  border: 1px solid var(--color-border, #e6e3df);
  aspect-ratio: 4 / 5;
}
.lookbook-gallery__main .carousel-inner,
.lookbook-gallery__main .carousel-item {
  height: 100%;
}
.lookbook-gallery__zoom,
.lookbook-gallery__single {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  cursor: zoom-in;
}
.lookbook-gallery__zoom img,
.lookbook-gallery__single img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lookbook-gallery__zoom-icon {
  position: absolute;
  right: 1rem;
  top: 1rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-jjok, #2f3a5e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.lookbook-gallery__zoom:hover .lookbook-gallery__zoom-icon,
.lookbook-gallery__single:hover .lookbook-gallery__zoom-icon {
  opacity: 1;
  transform: scale(1.05);
}

/* 카루셀 좌우 버튼 */
.lookbook-gallery__nav {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-jjok, #2f3a5e);
  border: 1px solid rgba(255, 255, 255, 0.5);
  opacity: 1;
  font-size: 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 .85rem;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: all .15s ease;
}
.lookbook-gallery__nav:hover {
  background: #fff;
  color: var(--color-jjok-dk, #232a44);
  transform: translateY(-50%) scale(1.06);
}
.lookbook-gallery__nav.carousel-control-prev { left: 0; }
.lookbook-gallery__nav.carousel-control-next { right: 0; }

/* 카운터 (좌하단) */
.lookbook-gallery__counter {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  padding: .35rem .75rem;
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.7);
  color: #fff;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  backdrop-filter: blur(4px);
}

/* 썸네일 strip */
.lookbook-gallery__thumbs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding: .2rem;
  scrollbar-width: thin;
}
.lookbook-gallery__thumbs::-webkit-scrollbar { height: 6px; }
.lookbook-gallery__thumbs::-webkit-scrollbar-thumb {
  background: var(--color-border, #ccc);
  border-radius: 3px;
}
.lookbook-gallery__thumb {
  flex-shrink: 0;
  width: 64px;
  height: 80px;  /* 4:5 */
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  padding: 0;
  background: var(--color-surface-muted, #f6f3ee);
  cursor: pointer;
  transition: all .15s ease;
}
.lookbook-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .65;
  transition: opacity .15s ease;
}
.lookbook-gallery__thumb:hover img {
  opacity: 1;
}
.lookbook-gallery__thumb.is-active {
  border-color: var(--color-jjok, #2f3a5e);
  box-shadow: 0 0 0 3px rgba(47, 58, 94, 0.18);
}
.lookbook-gallery__thumb.is-active img {
  opacity: 1;
}

/* 빈 상태 */
.lookbook-gallery__empty {
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  background: var(--color-surface-muted, #faf8f3);
  border: 2px dashed var(--color-border, #e6e3df);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  color: var(--color-muted, #b8b0a0);
  font-size: .9rem;
}
.lookbook-gallery__empty i {
  font-size: 2.5rem;
}

[data-theme="dark"] .lookbook-gallery__main,
[data-theme="dark"] .lookbook-gallery__empty {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .lookbook-gallery__thumb {
  background: var(--color-surface-card, #232323);
}
[data-theme="dark"] .lookbook-gallery__thumb.is-active {
  border-color: var(--color-gold, #b88a3a);
  box-shadow: 0 0 0 3px rgba(184, 138, 58, 0.3);
}
[data-theme="dark"] .lookbook-gallery__nav {
  background: rgba(40, 40, 40, 0.92);
  color: var(--color-gold-lt, #e3c989);
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .lookbook-gallery__nav:hover {
  background: var(--color-surface-card, #2a2a2a);
  color: var(--color-gold, #b88a3a);
}
[data-theme="dark"] .lookbook-gallery__zoom-icon {
  background: rgba(40, 40, 40, 0.92);
  color: var(--color-gold-lt, #e3c989);
}

/* 메타 정보 (조회수·발행일) */
.lookbook-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: .82rem;
  color: var(--color-ink-muted, #888);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--color-border, #ebe6dc);
}
.lookbook-meta__item {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
[data-theme="dark"] .lookbook-meta {
  color: var(--color-ink-muted, #b8b8b8);
  border-bottom-color: var(--color-border, #3a3a3a);
}

@media (max-width: 991.98px) {
  .lookbook-gallery__main { aspect-ratio: 1 / 1; }
  .lookbook-gallery__empty { aspect-ratio: 1 / 1; }
}
@media (max-width: 575.98px) {
  .lookbook-gallery__nav { width: 36px; height: 36px; font-size: 1rem; margin: 0 .55rem; }
  .lookbook-gallery__thumb { width: 52px; height: 65px; }
  .lookbook-gallery__counter { font-size: .7rem; padding: .25rem .55rem; }
}

/* ════════════════════════════════════════════════════════════════════
   공지사항 목록 row (notice_list.html)
   ════════════════════════════════════════════════════════════════════ */
.notice-list {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  overflow: hidden;
}
.notice-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  color: var(--color-ink, #1a1a1a);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border, #ebe6dc);
  transition: background .15s ease;
}
.notice-row:last-child { border-bottom: none; }
.notice-row:hover {
  background: var(--color-surface-muted, #faf8f3);
}
.notice-row__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-jjok-mist, #e0e6f1);
  color: var(--color-jjok, #2f3a5e);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .92rem;
}
.notice-row__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.notice-row__title {
  font-size: .95rem;
  font-weight: 500;
  color: var(--color-ink, #1a1a1a);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notice-row__meta {
  display: flex;
  gap: .8rem;
  font-size: .76rem;
  color: var(--color-ink-muted, #888);
  flex-wrap: wrap;
}
.notice-row__arrow {
  flex-shrink: 0;
  font-size: .9rem;
  color: var(--color-muted, #c9c3ba);
  transition: transform .15s ease, color .15s ease;
}
.notice-row:hover .notice-row__arrow {
  color: var(--color-jjok, #2f3a5e);
  transform: translateX(3px);
}

/* 고정 공지 강조 */
.notice-row--pinned {
  background: linear-gradient(to right, var(--color-gold-tint, #f4ecd8) 0%, transparent 100%);
}
.notice-row--pinned .notice-row__icon {
  background: var(--color-gold-tint, #f4ecd8);
  color: var(--color-gold-dk, #826b47);
}
.notice-row--pinned .notice-row__title {
  font-weight: 700;
}
.notice-row--pinned:hover {
  background: var(--color-gold-tint, #f4ecd8);
}

[data-theme="dark"] .notice-list {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .notice-row {
  color: var(--color-ink, #f0eee9);
  border-bottom-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .notice-row:hover {
  background: var(--color-surface, #1a1a1a);
}
[data-theme="dark"] .notice-row__icon {
  background: rgba(123, 142, 196, 0.22);
  color: var(--color-jjok-mist, #c5cde2);
}
[data-theme="dark"] .notice-row__title { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .notice-row__meta { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .notice-row--pinned {
  background: linear-gradient(to right, rgba(184, 138, 58, 0.18) 0%, transparent 100%);
}
[data-theme="dark"] .notice-row--pinned .notice-row__icon {
  background: rgba(184, 138, 58, 0.32);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .notice-row--pinned:hover {
  background: rgba(184, 138, 58, 0.22);
}

@media (max-width: 575.98px) {
  .notice-row { padding: .85rem .95rem; gap: .75rem; }
  .notice-row__icon { width: 32px; height: 32px; font-size: .82rem; }
  .notice-row__title { font-size: .88rem; }
  .notice-row__meta { font-size: .7rem; gap: .55rem; }
}

/* ════════════════════════════════════════════════════════════════════
   상세 본문 카드 (notice_detail / blog_detail / post_detail 공통)
   ════════════════════════════════════════════════════════════════════ */
.article-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(60, 53, 48, 0.05);
}
.article-card__hero-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface-muted, #f4efe7);
}
.article-card__hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.article-card__head {
  padding: 1.75rem 1.75rem 1rem;
  border-bottom: 1px solid var(--color-border, #ebe6dc);
}
.article-card__category {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .9rem;
}
.article-card__cat-tag {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  border-radius: 4px;
  background: var(--color-jjok-mist, #e0e6f1);
  color: var(--color-jjok-dk, #2f3a5e);
}
.article-card__cat-tag--blog {
  background: linear-gradient(135deg, #3E7A85 0%, #1F4E5A 100%);
  color: #fff;
}
.article-card__cat-tag--magazine {
  background: linear-gradient(135deg, #6B4F7E 0%, #3A2A4E 100%);
  color: #fff;
}
.article-card__cat-tag--event {
  background: linear-gradient(135deg, #B89968 0%, #826B47 100%);
  color: #fff;
}
.article-card__cat-tag--notice {
  background: linear-gradient(135deg, #4A5C7A 0%, #1F2940 100%);
  color: #fff;
}
.article-card__pin {
  display: inline-flex;
  align-items: center;
  padding: .3rem .7rem;
  font-size: .72rem;
  font-weight: 700;
  border-radius: 4px;
  background: var(--color-gold-tint, #f4ecd8);
  color: var(--color-gold-dk, #826b47);
}
.article-card__title {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.3;
  margin-bottom: .85rem;
  color: var(--color-ink, #1a1a1a);
}
.article-card__excerpt {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--color-ink-mid, #5a5a5a);
  margin-bottom: 1rem;
}
.article-card__meta {
  display: flex;
  gap: 1rem;
  font-size: .82rem;
  color: var(--color-ink-muted, #888);
  flex-wrap: wrap;
}
.article-card__body {
  padding: 1.75rem;
  line-height: 1.85;
  color: var(--color-ink, #1a1a1a);
}
.article-card__body p { margin-bottom: 1.1rem; }
.article-card__body h2 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 1.75rem 0 .85rem;
  letter-spacing: -.015em;
}
.article-card__body h3 {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 1.45rem 0 .7rem;
}
.article-card__body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1rem 0;
}
.article-card__body blockquote {
  border-left: 3px solid var(--color-jjok, #2f3a5e);
  padding: .3rem 0 .3rem 1.1rem;
  margin: 1.25rem 0;
  color: var(--color-ink-mid, #5a5a5a);
  font-style: italic;
}

[data-theme="dark"] .article-card {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] .article-card__hero-img {
  background: var(--color-surface, #1a1a1a);
}
[data-theme="dark"] .article-card__head {
  border-bottom-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .article-card__cat-tag {
  background: rgba(123, 142, 196, 0.25);
  color: var(--color-jjok-mist, #c5cde2);
}
[data-theme="dark"] .article-card__pin {
  background: rgba(184, 138, 58, 0.25);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .article-card__title { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .article-card__excerpt { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .article-card__meta { color: var(--color-ink-muted, #888); }
[data-theme="dark"] .article-card__body { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .article-card__body blockquote {
  border-left-color: var(--color-gold, #b88a3a);
  color: var(--color-ink-muted, #b8b8b8);
}

@media (max-width: 575.98px) {
  .article-card__head { padding: 1.25rem 1.25rem .85rem; }
  .article-card__title { font-size: 1.35rem; }
  .article-card__excerpt { font-size: .92rem; }
  .article-card__meta { font-size: .76rem; gap: .75rem; }
  .article-card__body { padding: 1.25rem; }
  .article-card__body h2 { font-size: 1.18rem; margin: 1.5rem 0 .7rem; }
  .article-card__body h3 { font-size: 1.02rem; }
}

/* ════════════════════════════════════════════════════════════════════
   브랜드 스토리 페이지 (homepage/brand.html)
   ════════════════════════════════════════════════════════════════════ */

/* ① 히어로 */
.brand-hero {
  background: linear-gradient(135deg, #4a5c7a 0%, #2f3a5e 70%, #1f2940 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 28px rgba(47, 58, 94, 0.18);
}
.brand-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 85% 15%, rgba(255,255,255,0.16) 0%, transparent 55%);
  pointer-events: none;
}
.brand-hero::after {
  content: "";
  position: absolute;
  left: -20px;
  bottom: -40px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(227, 201, 137, 0.22) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.brand-hero > * { position: relative; z-index: 1; }
.brand-hero__eyebrow {
  font-size: .72rem;
  letter-spacing: .25em;
  font-weight: 700;
  color: var(--color-gold-lt, #e3c989);
  opacity: .92;
}
.brand-hero__title {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-bottom: 1rem;
  color: #fff;
}
.brand-hero__tagline {
  font-size: 1rem;
  letter-spacing: .12em;
  color: var(--color-gold-lt, #e3c989);
  opacity: .95;
  padding-bottom: 1rem;
  position: relative;
  display: inline-block;
}
.brand-hero__tagline::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 2px;
  background: var(--color-gold-lt, #e3c989);
  opacity: .65;
}
.brand-hero__subtitle {
  font-size: 1rem;
  line-height: 1.7;
  opacity: .9;
  max-width: 560px;
  margin: 0 auto;
}

@media (max-width: 575.98px) {
  .brand-hero__tagline { font-size: .88rem; }
  .brand-hero__subtitle { font-size: .9rem; }
}

/* ② 섹션 공통 */
.brand-section__eyebrow {
  font-size: .7rem;
  letter-spacing: .25em;
  font-weight: 700;
  color: var(--color-jjok, #2f3a5e);
  opacity: .82;
  margin-bottom: .5rem;
}
.brand-section__title {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: 1rem;
  color: var(--color-ink, #1a1a1a);
}
.brand-section__title--center {
  position: relative;
  padding-bottom: .85rem;
  display: inline-block;
}
.brand-section__title--center::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  background: var(--color-gold, #b88a3a);
  border-radius: 2px;
}
.brand-section__sub {
  font-size: .92rem;
  color: var(--color-ink-mid, #666);
}
.brand-section__lead {
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.65;
  color: var(--color-ink, #1a1a1a);
  margin-bottom: 1rem;
}
.brand-section__lead strong {
  color: var(--color-jjok, #2f3a5e);
}
.brand-section__lead em {
  font-style: normal;
  color: var(--color-jjok, #2f3a5e);
  font-weight: 800;
}
.brand-section__text {
  font-size: .95rem;
  line-height: 1.85;
  color: var(--color-ink-mid, #5a5a5a);
}
[data-theme="dark"] .brand-section__eyebrow { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .brand-section__title { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .brand-section__sub { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .brand-section__lead { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .brand-section__lead strong,
[data-theme="dark"] .brand-section__lead em { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .brand-section__text { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .brand-section__title--center::after { background: var(--color-gold-lt, #e3c989); }

/* ③ 브랜드 엠블럼 */
.brand-emblem {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
}
.brand-emblem__circle {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4a5c7a 0%, #2f3a5e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-gold-lt, #e3c989);
  font-size: 5rem;
  box-shadow: 0 12px 32px rgba(47, 58, 94, 0.28),
              inset 0 2px 4px rgba(255, 255, 255, 0.18);
}
.brand-emblem__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--color-gold, #b88a3a);
  opacity: .35;
  animation: brand-ring-pulse 3s ease-in-out infinite;
}
@keyframes brand-ring-pulse {
  0%, 100% { transform: scale(1); opacity: .35; }
  50% { transform: scale(1.06); opacity: .15; }
}
[data-theme="dark"] .brand-emblem__circle {
  background: linear-gradient(135deg, #826B47 0%, #594A31 100%);
  color: #f0eee9;
}
[data-theme="dark"] .brand-emblem__ring {
  border-color: var(--color-gold-lt, #e3c989);
}

@media (max-width: 767.98px) {
  .brand-emblem { width: 160px; height: 160px; }
  .brand-emblem__circle { font-size: 3.4rem; inset: 16px; }
}

/* ④ 핵심 가치 카드 */
.brand-value-card {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 16px;
  padding: 1.75rem 1.5rem;
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.brand-value-card:hover {
  transform: translateY(-4px);
  border-color: var(--color-gold, #b88a3a);
  box-shadow: 0 10px 28px rgba(184, 138, 58, 0.14);
}
.brand-value-card__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-gold-tint, #f4ecd8) 0%, #fff 100%);
  color: var(--color-gold-dk, #826b47);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(184, 138, 58, 0.32);
  box-shadow: 0 4px 12px rgba(184, 138, 58, 0.16);
}
.brand-value-card__title {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--color-jjok, #2f3a5e);
  margin-bottom: .65rem;
}
.brand-value-card__desc {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--color-ink-mid, #5a5a5a);
  margin: 0;
}
[data-theme="dark"] .brand-value-card {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .brand-value-card:hover {
  border-color: var(--color-gold, #b88a3a);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .brand-value-card__icon {
  background: linear-gradient(135deg, rgba(184, 138, 58, 0.32) 0%, rgba(60, 60, 60, 0.7) 100%);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .brand-value-card__title { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .brand-value-card__desc { color: var(--color-ink-muted, #b8b8b8); }

/* ⑤ 연혁 타임라인 */
.brand-timeline {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
  padding-left: 2.4rem;
}
.brand-timeline::before {
  content: "";
  position: absolute;
  left: .85rem;
  top: .35rem;
  bottom: .35rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-gold, #b88a3a) 0%, var(--color-gold-tint, #f4ecd8) 100%);
}
.brand-timeline__item {
  position: relative;
  padding-bottom: 1.85rem;
}
.brand-timeline__item:last-child { padding-bottom: 0; }
.brand-timeline__dot {
  position: absolute;
  left: -1.85rem;
  top: .5rem;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-gold, #b88a3a);
  box-shadow: 0 0 0 4px var(--color-gold-tint, #f4ecd8),
              0 0 0 5px var(--color-gold, #b88a3a);
}
.brand-timeline__year {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--color-jjok-dk, #232a44);
  margin-bottom: .35rem;
}
.brand-timeline__title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-ink, #1a1a1a);
  margin-bottom: .25rem;
}
.brand-timeline__desc {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--color-ink-mid, #5a5a5a);
  margin: 0;
}
[data-theme="dark"] .brand-timeline::before {
  background: linear-gradient(to bottom, var(--color-gold-lt, #e3c989) 0%, rgba(184, 138, 58, 0.18) 100%);
}
[data-theme="dark"] .brand-timeline__dot {
  box-shadow: 0 0 0 4px rgba(184, 138, 58, 0.24),
              0 0 0 5px var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .brand-timeline__year { color: var(--color-gold-lt, #e3c989); }
[data-theme="dark"] .brand-timeline__title { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .brand-timeline__desc { color: var(--color-ink-muted, #b8b8b8); }

/* ⑥ 하단 CTA */
.brand-bottom-cta {
  background: linear-gradient(135deg, #f6f3ee 0%, #ebe6dc 100%);
  border: 1px solid var(--color-border, #e6e3df);
  position: relative;
  overflow: hidden;
}
.brand-bottom-cta::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -40px;
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(184, 138, 58, 0.18) 0%, transparent 70%);
  pointer-events: none;
}
.brand-bottom-cta > * { position: relative; z-index: 1; }
.brand-bottom-cta__eyebrow {
  font-size: .68rem;
  letter-spacing: .25em;
  font-weight: 700;
  color: var(--color-gold-dk, #826b47);
  opacity: .85;
}
[data-theme="dark"] .brand-bottom-cta {
  background: linear-gradient(135deg, var(--color-surface-card, #232323) 0%, #1a1a1a 100%);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .brand-bottom-cta h3 { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .brand-bottom-cta p,
[data-theme="dark"] .brand-bottom-cta .text-muted { color: var(--color-ink-muted, #b8b8b8) !important; }
[data-theme="dark"] .brand-bottom-cta__eyebrow { color: var(--color-gold-lt, #e3c989); }

/* ════════════════════════════════════════════════════════════════════
   에러 페이지 공통 (404 / 500 / 403 / 400)
   ════════════════════════════════════════════════════════════════════ */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}
.error-page__inner {
  text-align: center;
  max-width: 540px;
  width: 100%;
}
.error-page__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--color-surface-muted, #faf8f3);
  color: var(--color-jjok, #2f3a5e);
  font-size: 2.2rem;
  margin-bottom: 1rem;
  border: 2px dashed var(--color-border, #e6e3df);
}
.error-page__code {
  font-size: clamp(4rem, 12vw, 6.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--color-jjok-dk, #232a44);
  margin-bottom: .25rem;
  background: linear-gradient(135deg, var(--color-jjok, #2f3a5e) 0%, var(--color-jjok-dk, #232a44) 60%, var(--color-gold, #b88a3a) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.error-page__title {
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--color-ink, #1a1a1a);
  margin-bottom: .85rem;
}
.error-page__subtitle {
  font-size: .95rem;
  line-height: 1.7;
  color: var(--color-ink-mid, #5a5a5a);
  margin-bottom: 1.85rem;
}
.error-page__actions {
  display: flex;
  justify-content: center;
  gap: .65rem;
  flex-wrap: wrap;
  margin-bottom: 2.25rem;
}

/* 빠른 링크 chip — 404·403 */
.error-page__suggestions {
  padding-top: 1.65rem;
  border-top: 1px solid var(--color-border, #ebe6dc);
}
.error-page__suggest-label {
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--color-ink-muted, #888);
  font-weight: 600;
  margin-bottom: .85rem;
}
.error-page__suggest-chips {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem;
}
.error-page__chip {
  display: inline-flex;
  align-items: center;
  padding: .45rem .85rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: var(--color-ink, #1a1a1a);
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 999px;
  text-decoration: none;
  transition: all .15s ease;
}
.error-page__chip:hover {
  background: var(--color-jjok-mist, #e0e6f1);
  border-color: var(--color-jjok, #2f3a5e);
  color: var(--color-jjok-dk, #232a44);
  transform: translateY(-1px);
}

/* 도움말 박스 — 500 */
.error-page__help {
  padding: 1.25rem 1.4rem;
  background: var(--color-surface-muted, #faf8f3);
  border: 1px solid var(--color-border, #e6e3df);
  border-radius: 12px;
  text-align: left;
}
.error-page__help-label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--color-ink, #1a1a1a);
  margin-bottom: .45rem;
}
.error-page__help-text {
  font-size: .85rem;
  line-height: 1.6;
  color: var(--color-ink-mid, #5a5a5a);
  margin-bottom: 1rem;
}
.error-page__help-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* 코드 그라데이션 변형 — 404=청록, 500=주황, 403=보라, 400=골드 */
.error-page--404 .error-page__icon {
  color: #3E7A85;
  background: #e7f1f3;
  border-color: rgba(62, 122, 133, 0.35);
}
.error-page--404 .error-page__code {
  background: linear-gradient(135deg, #3E7A85 0%, #1F4E5A 60%, #2f3a5e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.error-page--500 .error-page__icon {
  color: #b0530c;
  background: #fbe9d1;
  border-color: rgba(176, 83, 12, 0.35);
}
.error-page--500 .error-page__code {
  background: linear-gradient(135deg, #b0530c 0%, #804018 60%, #2f3a5e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.error-page--403 .error-page__icon {
  color: #6B4F7E;
  background: #efe9f4;
  border-color: rgba(107, 79, 126, 0.35);
}
.error-page--403 .error-page__code {
  background: linear-gradient(135deg, #6B4F7E 0%, #3A2A4E 60%, #1F2940 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.error-page--400 .error-page__icon {
  color: var(--color-gold-dk, #826b47);
  background: var(--color-gold-tint, #f4ecd8);
  border-color: rgba(184, 138, 58, 0.35);
}
.error-page--400 .error-page__code {
  background: linear-gradient(135deg, var(--color-gold-dk, #826b47) 0%, #594A31 60%, var(--color-jjok, #2f3a5e) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 다크 모드 */
[data-theme="dark"] .error-page__icon {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .error-page__title { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .error-page__subtitle { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .error-page__suggestions { border-top-color: var(--color-border, #3a3a3a); }
[data-theme="dark"] .error-page__suggest-label { color: var(--color-ink-muted, #b8b8b8); }
[data-theme="dark"] .error-page__chip {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
  color: var(--color-ink, #f0eee9);
}
[data-theme="dark"] .error-page__chip:hover {
  background: rgba(123, 142, 196, 0.22);
  border-color: var(--color-gold, #b88a3a);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .error-page__help {
  background: var(--color-surface-card, #232323);
  border-color: var(--color-border, #3a3a3a);
}
[data-theme="dark"] .error-page__help-label { color: var(--color-ink, #f0eee9); }
[data-theme="dark"] .error-page__help-text { color: var(--color-ink-muted, #b8b8b8); }

[data-theme="dark"] .error-page__code {
  background: linear-gradient(135deg, var(--color-gold-lt, #e3c989) 0%, var(--color-gold, #b88a3a) 60%, #594A31 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
[data-theme="dark"] .error-page--404 .error-page__icon { background: rgba(62, 122, 133, 0.22); color: #6fb3bc; }
[data-theme="dark"] .error-page--500 .error-page__icon { background: rgba(176, 83, 12, 0.25); color: #e89656; }
[data-theme="dark"] .error-page--403 .error-page__icon { background: rgba(107, 79, 126, 0.28); color: #c9a8de; }
[data-theme="dark"] .error-page--400 .error-page__icon { background: rgba(184, 138, 58, 0.25); color: var(--color-gold-lt, #e3c989); }

@media (max-width: 575.98px) {
  .error-page { min-height: 50vh; padding: 1rem 0; }
  .error-page__icon { width: 64px; height: 64px; font-size: 1.65rem; }
  .error-page__title { font-size: 1.32rem; }
  .error-page__subtitle { font-size: .88rem; }
}

/* ════════════════════════════════════════════════════════════════════
   scroll-nav — 맨 위/아래 이동 플로팅 버튼 (homepage/index.html)
   ════════════════════════════════════════════════════════════════════ */
.scroll-nav {
  position: fixed;
  right: 24px;
  bottom: 96px;            /* 카카오 버튼(bottom:28px,56px) 위 */
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 기본 숨김 — 스크롤 중에만 노출 */
  opacity: 0;
  transform: translateX(8px);
  pointer-events: none;
  transition: opacity .28s ease, transform .28s ease;
}
.scroll-nav.is-visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.scroll-nav__btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(60, 50, 40, 0.14);
  background: rgba(255, 255, 255, 0.6);
  color: var(--color-ink, #2e2a26);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background .15s, color .15s, border-color .15s, box-shadow .18s, transform .15s, opacity .2s;
}
/* chevron 두께 강화 — 컬렉션 화살표와 일관 */
.scroll-nav__btn > i {
  -webkit-text-stroke: 1px currentColor;
}
.scroll-nav__btn:hover {
  background: rgba(255, 255, 255, 0.82);
  color: var(--color-jjok-dk, #232a44);
  border-color: rgba(60, 50, 40, 0.22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transform: translateY(-2px) scale(1.04);
}
.scroll-nav__btn:disabled {
  opacity: .35;
  cursor: default;
  transform: none;
}
[data-theme="dark"] .scroll-nav__btn {
  background: rgba(40, 40, 40, 0.65);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--color-gold-lt, #e3c989);
}
[data-theme="dark"] .scroll-nav__btn:hover {
  background: rgba(60, 60, 60, 0.85);
  color: var(--color-gold, #b88a3a);
}
@media (max-width: 575.98px) {
  .scroll-nav { right: 16px; bottom: 88px; }
  .scroll-nav__btn { width: 30px; height: 30px; font-size: 0.82rem; }
}

/* ==========================================================================
   상품 상세 이미지 carousel — 메인 화살표와 동일 톤 (흰 반투명)
   #productCarousel 식별자로 격리 — 다른 carousel 영향 없음
   ========================================================================== */
#productCarousel .carousel-control-prev,
#productCarousel .carousel-control-next {
  width: 56px;
  opacity: 1;
}
#productCarousel .carousel-control-prev-icon,
#productCarousel .carousel-control-next-icon {
  width: 40px;
  height: 40px;
  background-size: 16px 16px;
  background-position: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(60, 50, 40, 0.14);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14), 0 1px 4px rgba(0, 0, 0, 0.08);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: transform .18s, background-color .18s, box-shadow .18s, border-color .18s;
}
/* chevron SVG — ink 색 + stroke 1.2 두께 강화 */
#productCarousel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232e2a26' stroke='%232e2a26' stroke-width='1.2' stroke-linejoin='round'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}
#productCarousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%232e2a26' stroke='%232e2a26' stroke-width='1.2' stroke-linejoin='round'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}
#productCarousel .carousel-control-prev:hover .carousel-control-prev-icon,
#productCarousel .carousel-control-next:hover .carousel-control-next-icon {
  background-color: rgba(255, 255, 255, 0.85);
  border-color: rgba(60, 50, 40, 0.22);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  transform: scale(1.06);
}
@media (max-width: 767.98px) {
  #productCarousel .carousel-control-prev,
  #productCarousel .carousel-control-next { width: 44px; }
  #productCarousel .carousel-control-prev-icon,
  #productCarousel .carousel-control-next-icon {
    width: 34px;
    height: 34px;
    background-size: 14px 14px;
  }
}