/* ============================================================
   담아 ENGINE — 디자인 토큰 (CSS 변수)
   컬러·폰트·간격·그림자 단일 진실 (Single Source of Truth)
   여기서 값 하나 바꾸면 모든 페이지에 자동 반영됩니다.
   ============================================================ */

:root {

  /* ========== Palette : Cream Champagne Gold ========== */
  --cream-50:  #FBF8F1;
  --cream-100: #F6F0E3;
  --cream-200: #EFE5D1;
  --cream-300: #E5D7B8;
  --white:     #FFFFFF;
  --off-white: #FDFBF6;

  --gold-50:   #F5E9CC;
  --gold-100:  #E8D2A0;
  --gold-300:  #D4B373;
  --gold-500:  #B89255;
  --gold-700:  #8C6E40;
  --gold-900:  #5B4828;

  --ink-900:   #1A1612;
  --ink-800:   #25201B;
  --ink-700:   #3C342B;
  --ink-500:   #6F6459;
  --ink-300:   #A89B8C;
  --ink-100:   #DDD3C3;

  --line:       #E8DDC9;
  --line-soft:  #F0E7D5;
  --line-dark:  #2A2520;

  --sale:      #B33A2B;
  --sale-soft: #FCEDE9;
  --new:       #2D5A3F;
  --warn:      #C49A2C;
  --info:      #2E6296;

  /* ========== Typography ========== */
  --font-display:   'Fraunces', 'Gowun Batang', serif;
  --font-serif-kr:  'Gowun Batang', 'Fraunces', serif;
  --font-body:      'Pretendard Variable', 'Manrope', -apple-system, sans-serif;
  --font-mono:      'Manrope', 'Pretendard Variable', monospace;

  /* ========== Layout ========== */
  --container:      1280px;
  --container-narrow: 920px;
  --sb-w:           240px;   /* admin sidebar */

  /* ========== Radius ========== */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* ========== Shadow ========== */
  --shadow-sm: 0 1px 2px rgba(26,22,18,0.04), 0 1px 1px rgba(26,22,18,0.03);
  --shadow-md: 0 4px 12px rgba(26,22,18,0.06), 0 2px 4px rgba(26,22,18,0.04);
  --shadow-lg: 0 12px 32px rgba(26,22,18,0.08), 0 4px 8px rgba(26,22,18,0.04);

  /* ========== Motion ========== */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.15s;
  --dur-mid:  0.25s;
  --dur-slow: 0.4s;

  /* ========== Header heights (sticky offset 용) ========== */
  --topbar-h: 36px;
  --header-h: 96px;     /* main-header padding 28*2 + content */
  --nav-h:    56px;
  --total-sticky-h: 152px;  /* header + nav (sticky tab 용) */

}

/* ========== Body 기본 (그레인 텍스처 포함) ========== */
html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream-50);
  color: var(--ink-900);
  line-height: 1.5;
  font-weight: 400;
  font-feature-settings: 'ss01', 'cv01';
  letter-spacing: -0.01em;
  margin: 0;
  background-image:
    radial-gradient(at 0% 0%, rgba(212, 179, 115, 0.04) 0%, transparent 40%),
    radial-gradient(at 100% 0%, rgba(212, 179, 115, 0.03) 0%, transparent 35%),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.025 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*::selection { background: var(--gold-300); color: var(--ink-900); }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
img, svg { display: block; max-width: 100%; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.container-narrow {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   헤드라인 폰트 일괄 — 산세리프 강제 + em 강조는 컬러로만
   시리프(Fraunces / Gowun Batang) 헤드라인을 모두 산세리프로.
   em 태그의 italic / 시리프 변형 제거. 강조는 컬러로만 유지.
   ※ 로고(.logo-word)는 브랜드 정체성이라 제외
   ============================================================ */
.banner-headline, .banner-headline em,
.page-title, .page-title em,
.section-title, .section-title em,
.my-greeting, .my-greeting em,
.mag-title, .mag-title em,
.stories-title, .stories-title em,
.recommend-title, .recommend-title em,
.related-title, .related-title em,
.cat-title, .cat-title em,
.auth-title, .auth-title em,
.success-title, .success-title em,
.detail-headline, .detail-headline em,
.detail-block-title, .detail-block-title em,
.ep-title, .ep-title em,
.f-headline, .f-headline em,
.s-headline, .s-headline em,
.promo-title, .promo-title em,
.deal-name, .item-name, .info-name, .o-name,
.coup-name, .coup-name em,
.card-title, .card-title em,
.sec-title, .sec-title em,
.side-title,
.block-title,
.summary-title,
.recommend-eyebrow + .recommend-title,
.featured-no, .s-no, .ep-no, .tp-no,
.logo-mark,
.product-tag,
.nav-link.editorial, .nav-link.editorial em,
.mag-filter,
.f-author, .review-options,
.detail-block-eyebrow,
.banner-cta, .grade-name,
.detail-eyebrow, .ep-quote,
.mag-issue, .mag-issue em {
  font-family: var(--font-body), 'Pretendard Variable', sans-serif !important;
  font-variation-settings: normal !important;
  font-style: normal !important;
}

/* em 강조는 컬러 + 약간 더 굵게로만 (italic·시리프 제거) */
.banner-headline em, .page-title em, .section-title em,
.my-greeting em, .mag-title em, .stories-title em,
.recommend-title em, .related-title em, .cat-title em,
.auth-title em, .success-title em, .detail-headline em,
.detail-block-title em, .ep-title em, .f-headline em,
.s-headline em, .promo-title em, .coup-name em,
.card-title em, .sec-title em {
  font-weight: 700 !important;
}

/* ============================================================
   숫자 / 가격 폰트 일괄 — 산세리프 강제
   가격·카운트·금액·전화번호 같이 숫자가 도드라지는 곳은
   매거진 시리프(Fraunces) 대신 본문 산세리프(Pretendard)
   ============================================================ */
.deal-discount, .deal-price, .deal-price-original,
.product-discount, .product-price, .product-price-original,
.price-current, .price-original, .price-current sup,
.discount-rate, .price-tag,
.kpi-value, .kpi-value .unit, .stat-value, .stat-value .unit,
.summary-total .value, .summary-total .value sup,
.detail-row.total .value,
.item-price, .item-price-sub, .item-discount-line, .item-pricing,
.qty-val, .price-inline,
.order-id, .order-amt, .o-price,
.cell-price, .stock-num,
.cs-phone, .footer-cs-mini,
.ep-price, .ep-price-sub, .rec-price, .oi-price,
.new-info-price,
.sum-qty-price .price, .sum-info-name,
.pager-num, .pager-num strong,
.delivery-eta, .coup-amt,
.tp-amt, .tp-sold strong, .tp-no,
.card-discount-box strong, .summary-earn strong,
.order-no-block strong,
.avg-rating, .avg-count strong,
.cat-count,
.bar-row .label, .bar-row .count,
.foot-info strong, .bulk-info strong,
.deal-image .product-tag,
.grade-meta strong, .grade-name,
.delivery-tag, .review-rating, .stars,
.subcat-chip .count, .filter-count {
  font-family: var(--font-body), 'Pretendard Variable', sans-serif !important;
  font-variation-settings: normal !important;
  font-style: normal !important;
}