@charset "utf-8";
/* ==========================================================================
   제품픽 V10 — Design System
   컨셉: "검수 대장(臺帳)" — 가로 괘선이 흐르는 짙은 그린 지면 위에
        흰 종이 카드가 놓인 문서형 레이아웃. 확인일·출처가 항상 눈에 보인다.
   구조: 1) 토큰  2) 리셋·타이포  3) 헤더/푸터  4) 홈  5) 카테고리
        6) 제품 상세  7) 사이드/모바일 바  8) 공용  9) 반응형  10) 접근성
   반응형: 데스크톱 우선 → 1080px(태블릿·1단) → 780px(모바일) → 430px(소형)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root {
  /* 색 — 로고(짙은 그린 + 골드)에서 파생 */
  --paper: #ffffff;
  --bg: #f2f3ef;
  --bg-2: #e9ebe4;
  --ink: #14201c;
  --ink-2: #37473f;
  --muted: #6b7a73;
  --muted-2: #8a978f;

  --brand: #0b5344;
  --brand-2: #083b31;
  --brand-3: #052620;
  --brand-tint: #e7efeb;
  --brand-tint-2: #d5e3dc;

  --gold: #9a6f22;
  --gold-2: #c79a45;
  --gold-tint: #fbf2df;

  --line: #e0e4dd;
  --line-2: #c9d1c9;
  --danger: #9b3b2f;

  --text-on-dark: #f4f8f5;
  --text-on-dark-muted: #bfd3cb;

  /* 레이아웃 */
  --content: 1200px;
  --article: 820px;
  --aside: 328px;
  --gutter: 32px;
  --header-h: 74px;

  /* 형태 */
  --r-xs: 8px;
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 22px;

  --shadow-1: 0 1px 2px rgba(16, 32, 27, .04), 0 10px 26px -14px rgba(16, 32, 27, .22);
  --shadow-2: 0 2px 4px rgba(16, 32, 27, .05), 0 22px 50px -22px rgba(16, 32, 27, .3);
  --shadow-dark: 0 24px 60px -24px rgba(5, 38, 32, .55);

  /* 서체 */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-serif: "Nanum Myeongjo", "Noto Serif KR", "Batang", "Apple SD Gothic Neo", Georgia, serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  /* 시그니처: 괘선 텍스처 */
  --rule-dark: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 34px);
  --rule-light: repeating-linear-gradient(180deg, rgba(11, 83, 68, .05) 0 1px, transparent 1px 34px);
}

/* --------------------------------------------------------------------------
   2. 리셋 · 기본 타이포그래피
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

html, body { width: 100%; max-width: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 450;
  line-height: 1.75;
  letter-spacing: -.015em;
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
img, svg, video { max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }

h1, h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: 1.32;
  text-wrap: balance;
  margin: 0;
}

h3, h4 {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.45;
  margin: 0;
}

p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* 숫자는 언제나 표(表)처럼 정렬 */
strong, b, time, del, dd, .price-panel, .quick-facts, .summary-grid { font-variant-numeric: tabular-nums; }

/* 대문자 라벨 — 문서의 항목 머리표 */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* 어두운 면 위에서는 밝은 골드로 */
.hero .eyebrow, .direct-answer .eyebrow, .trust-grid .eyebrow { color: var(--gold-2); }

.muted { color: var(--muted) !important; }
.compact-note { margin-top: 14px !important; font-size: 13px !important; line-height: 1.7 !important; color: var(--muted) !important; }

/* --------------------------------------------------------------------------
   3. 헤더 · 내비게이션 · 푸터
   -------------------------------------------------------------------------- */
.skip-link {
  position: fixed; left: 12px; top: -80px; z-index: 9999;
  padding: 11px 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 14px; font-weight: 700;
}
.skip-link:focus { top: 12px; }

.reading-progress {
  position: fixed; z-index: 999; top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--brand), var(--gold-2));
  transform: scaleX(0); transform-origin: left;
}

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  width: 100%; max-width: calc(var(--content) + var(--gutter) * 2);
  height: var(--header-h); margin-inline: auto; padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.brand img { width: 38px; height: 38px; border-radius: 10px; }
.brand span { display: grid; min-width: 0; }
.brand strong { font-family: var(--font-serif); font-size: 20px; font-weight: 700; letter-spacing: -.04em; color: var(--brand-2); }
.brand small { font-size: 11px; color: var(--muted); letter-spacing: -.01em; }

.site-header nav { display: flex; align-items: center; gap: 6px; }
.site-header nav a {
  position: relative; padding: 9px 12px; border-radius: var(--r-xs);
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  transition: color .18s ease, background .18s ease;
}
.site-header nav a:hover { color: var(--brand); background: var(--brand-tint); }
.site-header nav a[aria-current="page"] { color: var(--brand); font-weight: 700; }
.site-header nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px;
  height: 2px; border-radius: 2px; background: var(--gold-2);
}

.nav-toggle {
  display: none; width: 42px; height: 42px; padding: 0;
  background: transparent; border: 1px solid var(--line); border-radius: var(--r-xs); cursor: pointer;
}
.nav-toggle span { display: block; width: 18px; height: 1.5px; margin: 4px auto; border-radius: 2px; background: var(--ink); }

.site-footer {
  margin-top: 80px; padding: 64px var(--gutter) 32px;
  background: var(--brand-3); background-image: var(--rule-dark);
  color: var(--text-on-dark);
  content-visibility: auto; contain-intrinsic-size: 640px;
}
.footer-inner { max-width: var(--content); margin-inline: auto; }
.footer-brand { display: flex; align-items: center; gap: 14px; padding-bottom: 28px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.footer-brand img { width: 44px; height: 44px; border-radius: 11px; }
.footer-brand strong { font-family: var(--font-serif); font-size: 19px; }
.footer-brand p { margin: 3px 0 0; font-size: 13px; color: var(--text-on-dark-muted); }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; padding: 32px 0; }
.footer-grid > div { display: grid; align-content: start; gap: 10px; }
.footer-grid b { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-2); }
.footer-grid a { font-size: 14px; color: var(--text-on-dark-muted); transition: color .18s ease; }
.footer-grid a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.footer-bottom {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12px; color: rgba(191, 211, 203, .8);
}

/* --------------------------------------------------------------------------
   4. 홈 — 히어로 · 분야 · 목록 · 신뢰
   -------------------------------------------------------------------------- */
.content-shell, .article-shell {
  width: 100%; max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto; padding-inline: var(--gutter);
}

.hero {
  position: relative; overflow: hidden;
  background-color: var(--brand-3);
  background-image:
    radial-gradient(90% 70% at 84% 0%, rgba(199, 154, 69, .22), transparent 62%),
    radial-gradient(70% 60% at 0% 100%, rgba(11, 83, 68, .55), transparent 60%),
    var(--rule-dark);
  color: var(--text-on-dark);
}
.hero-inner {
  position: relative; z-index: 1;
  width: 100%; max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto; padding: 86px var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 64px; align-items: center;
}
.hero-copy { min-width: 0; }
.hero h1 {
  margin: 18px 0 20px;
  font-size: clamp(38px, 4.6vw, 62px);
  font-weight: 800; line-height: 1.22; letter-spacing: -.045em;
  color: #fff;
}
.hero-copy > p { max-width: 46em; margin: 0 0 28px; font-size: 17px; line-height: 1.8; color: var(--text-on-dark-muted); }

.search-box {
  display: flex; align-items: center; gap: 12px;
  max-width: 620px; height: 62px; padding: 0 18px;
  background: var(--paper); border: 1px solid transparent; border-radius: var(--r);
  box-shadow: var(--shadow-dark);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.search-box svg { flex: 0 0 20px; width: 20px; height: 20px; fill: none; stroke: var(--brand); stroke-width: 1.9; }
.search-box input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; }
.search-box input::placeholder { color: var(--muted-2); }
.search-box:focus-within { border-color: var(--gold-2); box-shadow: var(--shadow-dark), 0 0 0 4px rgba(199, 154, 69, .22); }

.hero-trust { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-trust span {
  padding: 7px 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px;
  background: rgba(255, 255, 255, .06); font-size: 12px; color: var(--text-on-dark-muted);
}

/* 현황 카드 — 유리판이 아니라 '명세서'처럼 */
.hero-summary {
  padding: 26px; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .06); box-shadow: var(--shadow-dark);
}
.summary-primary { display: flex; align-items: baseline; gap: 8px; padding-bottom: 20px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
.summary-primary small { margin-right: auto; font-size: 12px; letter-spacing: .04em; color: var(--text-on-dark-muted); }
.summary-primary strong { font-family: var(--font-serif); font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -.05em; color: #fff; }
.summary-primary span { font-size: 14px; color: var(--text-on-dark-muted); }
.summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin-top: 20px; background: rgba(255, 255, 255, .16); border-radius: var(--r-sm); overflow: hidden; }
.summary-grid div { display: grid; gap: 3px; padding: 16px 18px; background: var(--brand-3); }
.summary-grid b { font-size: 22px; font-weight: 700; color: #fff; }
.summary-grid small { font-size: 11px; color: var(--text-on-dark-muted); }

/* 섹션 머리 */
.category-overview, .listing-section { padding: 72px 0; }
.section-heading, .listing-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.section-heading h2, .listing-head h2 { margin: 10px 0 6px; font-size: clamp(26px, 3vw, 38px); }
.section-heading p, .listing-head p { margin: 0; font-size: 15px; color: var(--muted); }
.listing-head > strong {
  flex: 0 0 auto; padding: 8px 14px; border: 1px solid var(--brand-tint-2); border-radius: 999px;
  background: var(--brand-tint); color: var(--brand); font-size: 13px; font-weight: 700;
}

/* 분야 카드 */
.category-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.category-card {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--r);
  background: var(--paper); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.category-card:hover { transform: translateY(-2px); border-color: var(--brand-tint-2); box-shadow: var(--shadow-1); }
.category-symbol {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px;
  background: var(--brand-tint); color: var(--brand); font-size: 22px;
}
.category-card strong { font-size: 16px; font-weight: 700; }
.category-card p { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.category-card > b {
  display: grid; place-items: center; min-width: 34px; height: 30px; padding: 0 9px; border-radius: 999px;
  background: var(--bg-2); color: var(--ink-2); font-size: 13px; font-weight: 700;
}

/* 필터 */
.filter-row {
  display: flex; gap: 8px; margin-bottom: 22px; padding-bottom: 6px;
  overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
}
.filter-row button {
  flex: 0 0 auto; padding: 9px 15px; border: 1px solid var(--line-2); border-radius: 999px;
  background: var(--paper); color: var(--ink-2); font-size: 13.5px; font-weight: 600; cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.filter-row button:hover { border-color: var(--brand); color: var(--brand); }
.filter-row button.active { background: var(--brand); border-color: var(--brand); color: #fff; }

/* 제품 카드 */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 306px), 1fr)); gap: 20px; }
.product-card { min-width: 0; }
.product-card > a {
  height: 100%; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper);
  box-shadow: var(--shadow-1);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.product-card > a:hover { transform: translateY(-4px); border-color: var(--brand-tint-2); box-shadow: var(--shadow-2); }

.card-visual {
  position: relative; aspect-ratio: 4 / 3; padding: 18px;
  display: flex; align-items: flex-start; justify-content: space-between;
  background-color: var(--bg-2);
  background-image: radial-gradient(80% 70% at 78% 12%, rgba(199, 154, 69, .16), transparent 60%), var(--rule-light);
  border-bottom: 1px solid var(--line);
}
.card-visual > span {
  display: grid; place-items: center; width: 54px; height: 54px; border-radius: 15px;
  background: var(--paper); color: var(--brand); font-size: 25px; box-shadow: var(--shadow-1);
}
.card-visual small {
  flex: 0 0 auto; margin-left: auto; padding: 5px 10px; border: 1px solid var(--brand-tint-2); border-radius: 999px;
  background: rgba(255, 255, 255, .82); color: var(--brand); font-size: 11px; font-weight: 700;
}
.card-visual.has-product-image { display: block; padding: 20px; }
.card-visual.has-product-image img {
  display: block; width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 14px 20px rgba(16, 32, 27, .14));
}
.card-visual.has-product-image small { position: absolute; right: 14px; top: 14px; }

.card-content { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.card-meta { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: var(--muted); }
.card-meta time { font-family: var(--font-mono); font-size: 11px; color: var(--muted-2); }
.card-content h2 {
  margin: 10px 0 7px; font-family: var(--font-sans); font-size: 18px; font-weight: 700;
  line-height: 1.45; letter-spacing: -.035em;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.card-content > p { margin: 0 0 20px; font-size: 13px; line-height: 1.65; color: var(--muted); }
.card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.card-bottom strong { font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.card-bottom span { font-size: 12.5px; font-weight: 700; color: var(--brand); }
.card-bottom b { transition: transform .2s ease; display: inline-block; }
.product-card > a:hover .card-bottom b { transform: translateX(3px); }

.empty-state { padding: 72px 20px; text-align: center; color: var(--muted); }
.empty-state strong { display: block; margin-bottom: 6px; font-size: 17px; color: var(--ink); }

/* 편집 기준 */
.trust-section {
  padding: 84px 0; background-color: var(--brand-2); background-image: var(--rule-dark);
  color: var(--text-on-dark);
}
.trust-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 64px; align-items: center; }
.trust-grid h2 { margin: 12px 0 14px; font-size: clamp(28px, 3.2vw, 40px); color: #fff; }
.trust-grid > div > p { margin: 0; color: var(--text-on-dark-muted); }
.trust-grid > div > a { display: inline-flex; gap: 6px; margin-top: 16px; color: var(--gold-2); font-size: 14px; font-weight: 700; }
.trust-grid > div > a:hover { text-decoration: underline; text-underline-offset: 4px; }
.trust-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.trust-points article { padding: 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r); background: rgba(255, 255, 255, .05); }
.trust-points b { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; color: var(--gold-2); }
.trust-points strong { display: block; margin: 14px 0 7px; font-size: 15px; color: #fff; }
.trust-points p { margin: 0; font-size: 13px; line-height: 1.7; color: var(--text-on-dark-muted); }

/* --------------------------------------------------------------------------
   5. 카테고리 페이지
   -------------------------------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; padding: 18px 0; font-size: 12.5px; color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb strong { font-weight: 600; color: var(--ink-2); }

.category-hero {
  background-color: var(--bg-2);
  background-image: radial-gradient(70% 80% at 88% 0%, rgba(199, 154, 69, .16), transparent 60%), var(--rule-light);
  border-bottom: 1px solid var(--line);
}
.category-hero-inner { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; align-items: center; gap: 24px; padding: 34px 0 44px; }
.category-hero-symbol { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 22px; background: var(--paper); color: var(--brand); font-size: 36px; box-shadow: var(--shadow-1); }
.category-hero h1 { margin: 10px 0 8px; font-size: clamp(28px, 3.4vw, 42px); }
.category-hero p { max-width: 62ch; margin: 0; font-size: 15px; color: var(--ink-2); }
.category-hero-inner > strong { font-family: var(--font-serif); font-size: 46px; line-height: 1; letter-spacing: -.05em; color: var(--brand); text-align: right; }
.category-hero-inner > strong small { display: block; margin-top: 8px; font-family: var(--font-sans); font-size: 12px; letter-spacing: 0; color: var(--muted); }

/* --------------------------------------------------------------------------
   6. 제품 상세 — 본문
   -------------------------------------------------------------------------- */
.product-layout { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside); gap: 32px; align-items: start; padding-bottom: 40px; }
.product-layout>*{min-width:0}

.article {
  position: relative; min-width: 0; max-width: 100%; overflow: hidden;
  padding: 46px 50px 52px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--paper); box-shadow: var(--shadow-1);
}
.article h1, .article h2, .article h3, .article p, .article li, .article dt, .article dd, .article summary, .article strong, .article span, .article a { overflow-wrap: anywhere; word-break: keep-all; }

.compensation-disclosure {
  margin: 4px 0 14px; padding: 12px 16px; border: 1px solid #e3d3ae; border-radius: var(--r-sm);
  background: var(--gold-tint); color: #6d5220; font-size: 13px; font-weight: 600; text-align: center;
}

/* 머리말 */
.article-header { padding-bottom: 30px; border-bottom: 2px solid var(--ink); }
.article-labels { display: flex; flex-wrap: wrap; gap: 7px; }
.status-badge, .availability { padding: 6px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-badge { background: var(--brand-tint); color: var(--brand); }
.availability { background: var(--gold-tint); color: #7c5c1c; }
.article-header h1 { margin: 18px 0 16px; font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; line-height: 1.28; }
.article-lead { max-width: 64ch; margin: 0; font-size: 17px; line-height: 1.9; color: var(--ink-2); }

.article-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; font-size: 12px; }
.article-byline a { padding: 5px 11px; border: 1px solid var(--brand-tint-2); border-radius: 999px; background: var(--brand-tint); color: var(--brand); font-weight: 700; }
.article-byline span { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); }
/* 시그니처: 확인 스탬프 */
.article-byline span:first-of-type { border-color: #e3d3ae; background: var(--gold-tint); color: #7c5c1c; font-weight: 600; }

/* 핵심 수치 3칸 */
.article-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.article-hero-facts > div { position: relative; padding: 16px 18px 16px 20px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.article-hero-facts > div::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--gold-2); }
.article-hero-facts small { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.article-hero-facts strong { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.03em; }
.article-hero-facts del { display: block; margin-top: 3px; font-size: 12px; color: var(--muted-2); }
.article-hero-facts span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* 대표 이미지 */
.product-main-image { margin: 30px 0 34px; }
.product-image-frame {
  aspect-ratio: 1 / 1; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background-color: var(--bg-2); background-image: var(--rule-light);
}
.product-image-frame img { width: 100%; height: 100%; object-fit: contain; }
.product-main-image figcaption { margin-top: 10px; font-size: 12px; text-align: center; color: var(--muted); }

/* 외부 평점 */
.external-rating {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 22px;
  margin: 24px 0 6px; padding: 20px 22px; border: 1px solid #e3d3ae; border-radius: var(--r);
  background: var(--gold-tint);
}
.external-rating > div { grid-row: 1 / 3; display: flex; align-items: baseline; gap: 12px; white-space: nowrap; }
.external-rating > div > span { font-size: 12px; font-weight: 700; color: #7c5c1c; }
.external-rating strong { font-family: var(--font-serif); font-size: 30px; letter-spacing: -.04em; color: var(--brand); }
.external-rating strong small { font-family: var(--font-sans); font-size: 13px; color: var(--muted); }
.external-rating p { margin: 0; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.external-rating > small { font-size: 11.5px; line-height: 1.6; color: var(--muted); }

/* 핵심 요약 — 어두운 블록 1 */
.direct-answer {
  position: relative; overflow: hidden; margin: 30px 0 22px; padding: 30px 32px;
  border-radius: var(--r-lg); border: 0;
  background-color: var(--brand-2);
  background-image: radial-gradient(80% 90% at 92% 4%, rgba(199, 154, 69, .2), transparent 58%), var(--rule-dark);
  color: var(--text-on-dark); box-shadow: var(--shadow-1);
}
.direct-answer h2 { margin: 10px 0 12px; font-size: clamp(21px, 2.3vw, 27px); color: #fff; }
.direct-answer > p { max-width: 66ch; margin: 0; font-size: 15.5px; line-height: 1.9; color: var(--text-on-dark-muted); }
.takeaway-list { display: grid; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.takeaway-list li {
  position: relative; padding: 12px 16px 12px 38px; border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .06); font-size: 14.5px; line-height: 1.65; color: #fff;
}
.takeaway-list li::before {
  content: "✓"; position: absolute; left: 14px; top: 12px;
  color: var(--gold-2); font-size: 13px; font-weight: 700;
}

/* 요약 수치 */
.quick-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0 30px; }
.quick-facts > div { padding: 17px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg); }
.quick-facts span { display: block; margin-bottom: 6px; font-size: 12px; color: var(--muted); }
.quick-facts strong { display: block; font-size: 16px; font-weight: 700; line-height: 1.45; }
.quick-facts small { display: block; margin-top: 6px; font-size: 11.5px; line-height: 1.55; color: var(--muted-2); }

/* 목차 */
.table-of-contents {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 20px;
  margin: 26px 0 44px; padding: 22px 24px;
  border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); background: var(--bg);
}
.table-of-contents > strong { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.table-of-contents ol { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; margin: 0; padding-left: 18px; }
.table-of-contents li::marker { color: var(--muted-2); font-size: 12px; }
.table-of-contents a { font-size: 13.5px; line-height: 1.6; color: var(--ink-2); }
.table-of-contents a:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.table-of-contents a.is-current { color: var(--brand); font-weight: 700; }

/* 본문 섹션 — 괘선으로 구분되는 문서 리듬 */
.article-section { margin: 0; padding: 44px 0; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 20px); }
.table-of-contents + .article-section { padding-top: 0; border-top: 0; }
#price h3 { margin: 26px 0 10px; font-size: 17px; }
.section-title { display: grid; gap: 12px; margin-bottom: 22px; }
.section-title > span {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
}
.section-title > span::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.section-title h2 { font-size: clamp(23px, 2.6vw, 31px); }
.article-section > p, .longform-sections p, .detail-blocks p { max-width: 68ch; font-size: 16px; line-height: 1.95; color: var(--ink-2); }
.paragraph-note { display: block; margin-top: 10px; padding-left: 12px; border-left: 2px solid var(--line-2); font-size: 12.5px; line-height: 1.7; color: var(--muted); }

.longform-sections { display: grid; gap: 16px; }
.longform-sections > section { padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.longform-sections h3, .detail-blocks h3 { margin: 0 0 12px; font-size: 19px; }
.detail-blocks { display: grid; gap: 12px; }
.detail-blocks > div { padding: 22px 24px; border-left: 3px solid var(--brand); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--bg); }
.notice-box { margin-top: 16px; padding: 18px 20px; border: 1px solid #e3d3ae; border-radius: var(--r-sm); background: var(--gold-tint); }
.notice-box strong { font-size: 13.5px; color: #6d5220; }
.notice-box p { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-2); }

/* 특징 카드 */
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.feature-grid article { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); transition: border-color .18s ease, box-shadow .18s ease; }
.feature-grid article:hover { border-color: var(--brand-tint-2); box-shadow: var(--shadow-1); }
.feature-grid article > span { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; color: var(--gold); }
.feature-grid h3 { margin: 12px 0 8px; font-size: 17px; }
.feature-grid p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--ink-2); }

/* 사양표 */
.spec-table { margin: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.spec-table > div { display: grid; grid-template-columns: minmax(120px, 180px) minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.spec-table > div:last-child { border-bottom: 0; }
.spec-table > div:hover { background: var(--bg); }
.spec-table dt, .spec-table dd { margin: 0; padding: 14px 18px; }
.spec-table dt { background: var(--bg); font-size: 13px; font-weight: 700; color: var(--ink-2); border-right: 1px solid var(--line); }
.spec-table dd { font-size: 14.5px; line-height: 1.7; }

/* 가격 패널 */
.price-panel {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  padding: 28px 30px; border: 1px solid var(--brand-tint-2); border-radius: var(--r);
  background-color: var(--brand-tint); background-image: var(--rule-light);
}
.price-panel > div > span { display: block; font-size: 12px; color: var(--muted); }
.price-panel > div > strong { display: block; margin: 6px 0 10px; font-size: 36px; font-weight: 800; letter-spacing: -.045em; color: var(--brand); }
.discount-badge { display: inline-block; margin-right: 6px; padding: 5px 10px; border-radius: 999px; background: var(--gold-2); color: #2b1f08; font-size: 12px; font-weight: 700; }
.discount-badge.is-neutral { background: rgba(11, 83, 68, .12); color: var(--brand); }
.price-panel del { display: block; margin-top: 10px; font-size: 13px; color: var(--muted); }
.price-panel dl { margin: 0; }
.price-panel dl > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid rgba(11, 83, 68, .14); }
.price-panel dl > div:last-child { border-bottom: 0; }
.price-panel dt { flex: 0 0 auto; font-size: 13px; color: var(--muted); }
.price-panel dd { margin: 0; max-width: 62%; text-align: right; }
.term-main { display: block; font-size: 14px; font-weight: 700; line-height: 1.5; }
.term-note { display: block; margin-top: 4px; font-size: 11.5px; font-weight: 400; line-height: 1.6; color: var(--muted); }

.option-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.option-list li { padding: 9px 13px; border: 1px solid var(--line); border-radius: var(--r-xs); background: var(--paper); font-size: 13.5px; }

/* 선택 기준 · 확인할 점 · 체크리스트 */
.fit-guide-grid, .check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fit-guide-grid > div { display: flex; gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.fit-guide-grid span { flex: 0 0 26px; display: grid; place-items: center; height: 26px; border-radius: 50%; background: var(--brand-tint); color: var(--brand); font-size: 12px; font-weight: 700; }
.fit-guide-grid p, .check-grid p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--ink-2); }
.check-grid > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); }
.check-grid b { font-family: var(--font-mono); font-size: 12px; color: var(--gold); }

.limitations-list { display: grid; gap: 8px; margin: 0; padding: 20px 22px; list-style: none; border: 1px solid #e3d3ae; border-radius: var(--r); background: var(--gold-tint); }
.limitations-list li { position: relative; padding-left: 30px; font-size: 14px; line-height: 1.75; color: #5f4a1e; }
.limitations-list li::before {
  content: "!"; position: absolute; left: 0; top: 2px; display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; background: #e0c98f; color: #5a4416; font-size: 12px; font-weight: 800;
}

/* 핵심 정리 — 어두운 블록 2 (대비 보장) */
.article-section.conclusion-box {
  position: relative; overflow: hidden; padding: 34px 36px; border: 0; border-radius: var(--r-lg);
  background-color: var(--brand-2);
  background-image: radial-gradient(80% 90% at 90% 6%, rgba(199, 154, 69, .18), transparent 56%), var(--rule-dark);
  color:var(--text-on-dark);
}
.article-section.conclusion-box .section-title > span { color: var(--gold-2); }
.article-section.conclusion-box .section-title > span::after { background: rgba(255, 255, 255, .2); }
.article-section.conclusion-box h2 { color: #fff; }
.article-section.conclusion-box > p, .article-section.conclusion-box p { max-width: 66ch; margin: 0; font-size: 16px; line-height: 1.95; color: var(--text-on-dark-muted); }

/* 출처 · 구매 링크 */
.source-section dl { margin: 0; border-top: 1px solid var(--line); }
.source-section dl > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.source-section dt { font-size: 13px; color: var(--muted); }
.source-section dd { margin: 0; font-size: 14px; }
.purchase-link-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.source-button {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 18px; border-radius: var(--r-sm);
  font-size: 14px; font-weight: 700; text-align: center;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.official-button { background: var(--paper); color: var(--brand); border: 1.5px solid var(--brand); }
.official-button:hover { background: var(--brand-tint); }
.product-button { background: var(--brand); color: #fff; border: 1.5px solid var(--brand); box-shadow: var(--shadow-1); }
.product-button:hover { background: var(--brand-2); }
.comparison-button { background: var(--paper); color: var(--brand); border: 1.5px solid var(--brand); }
.comparison-button:hover { background: var(--brand-tint); }
.source-button:hover { transform: translateY(-2px); }
.inline-button { display: inline-flex; min-height: 48px; background: var(--brand); color: #fff; }
.source-note { max-width: 70ch; margin-top: 12px !important; font-size: 12.5px !important; line-height: 1.7; color: var(--muted) !important; }

/* FAQ */
.faq-section details { margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); overflow: hidden; }
.faq-section details[open] { border-color: var(--brand-tint-2); background: var(--bg); }
.faq-section summary { position: relative; padding: 17px 48px 17px 20px; font-size: 15px; font-weight: 700; line-height: 1.55; cursor: pointer; list-style: none; transition: color .16s ease; }
.faq-section summary::-webkit-details-marker { display: none; }
.faq-section summary:hover { color: var(--brand); }
.faq-section summary::after {
  content: "+"; position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand); font-size: 16px; font-weight: 700;
}
.faq-section details[open] summary::after { content: "−"; }
.faq-section details p { margin: 0; padding: 0 20px 18px; font-size: 14.5px; line-height: 1.85; color: var(--ink-2); }

/* 관련 정보 */
.related-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.related-list a { display: grid; gap: 6px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--paper); transition: border-color .18s ease, box-shadow .18s ease; }
.related-list a:hover { border-color: var(--brand-tint-2); box-shadow: var(--shadow-1); }
.related-list span { font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: var(--gold); }
.related-list strong { font-size: 13.5px; font-weight: 700; line-height: 1.5; }
.related-list small { font-size: 12.5px; font-weight: 700; color: var(--brand); }

/* --------------------------------------------------------------------------
   7. 사이드 요약 · 모바일 구매 바 · 광고
   -------------------------------------------------------------------------- */
.article-aside { position: relative; min-width: 0; }
.sticky-card { position: sticky; top: calc(var(--header-h) + 18px); padding: 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--paper); box-shadow: var(--shadow-1); }
.aside-product-image { aspect-ratio: 1 / 1; display: grid; place-items: center; margin-bottom: 16px; padding: 10px; border-radius: var(--r); background: var(--bg-2); overflow: hidden; }
.aside-product-image img { width: 100%; height: 100%; object-fit: contain; }
.aside-category { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; color: var(--gold); }
.sticky-card h2 { margin: 8px 0 16px; font-family: var(--font-sans); font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: -.035em; }
.aside-price { padding: 14px 0; border-block: 1px solid var(--line); }
.aside-price small { display: block; font-size: 11.5px; color: var(--muted); }
.aside-price strong { display: block; margin: 4px 0; font-size: 26px; font-weight: 800; letter-spacing: -.04em; color: var(--brand); }
.aside-price del { font-size: 12.5px; color: var(--muted-2); }
.sticky-card dl { margin: 14px 0; }
.sticky-card dl > div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; }
.sticky-card dt { flex: 0 0 auto; font-size: 12.5px; color: var(--muted); margin: 0; }
.sticky-card dd { margin: 0; font-size: 12.5px; text-align: right; }
.sticky-card .term-main { font-size: 12.5px; }
.sticky-card .term-note { font-size: 11px; }
.aside-purchase-links { grid-template-columns: 1fr; margin-top: 12px; }
.copy-link { width: 100%; margin-top: 8px; padding: 11px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); font-size: 13px; font-weight: 700; cursor: pointer; transition: background .16s ease; }
.copy-link:hover { background: var(--bg); }
.editorial-card { margin-top: 12px; padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg); }
.editorial-card strong { font-size: 14px; }
.editorial-card p { margin: 6px 0 10px; font-size: 12.5px; line-height: 1.7; color: var(--muted); }
.editorial-card a { font-size: 12.5px; font-weight: 700; color: var(--brand); }

.mobile-source-bar { display: none; }

.ad-wrap { margin: 28px 0; }
.ad-label { display: block; margin-bottom: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; text-align: center; color: var(--muted-2); }
.ad-reserved { min-height: 112px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: rgba(255, 255, 255, .6); contain: layout paint; }
.adsbygoogle { display: block; width: 100% !important; max-width: 100%; overflow: hidden !important; }

/* --------------------------------------------------------------------------
   8. 정책 · 안내 페이지
   -------------------------------------------------------------------------- */
.policy-page { min-height: 55vh; margin: 10px 0 60px; }
.policy-page h1 { font-size: clamp(28px, 3.6vw, 44px); }
.policy-page h2 { margin-top: 40px; font-size: 22px; }
.policy-page p { max-width: 68ch; color: var(--ink-2); }
.policy-page a { color: var(--brand); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   9. 반응형 — 1080 / 780 / 430
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  :root { --gutter: 24px; }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 40px; padding: 64px var(--gutter); }
  .hero-summary { max-width: 640px; }
  .trust-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .product-layout { grid-template-columns: minmax(0, 1fr); }
  .article { max-width: 900px; margin-inline: auto; padding: 38px 36px 44px; }
  .article-aside { display: none; }
  .related-list { grid-template-columns: 1fr 1fr; }
  body.product-page { padding-bottom: 78px; }

  /* 모바일 구매 바 */
  .mobile-source-bar {
    position: fixed; left: 50%; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 80;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    width: min(620px, calc(100% - 28px)); padding: 10px 12px 10px 16px;
    border: 1px solid rgba(255, 255, 255, .16); border-radius: var(--r);
    background: rgba(8, 59, 49, .96); color: #fff; box-shadow: var(--shadow-dark);
    backdrop-filter: blur(10px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
  }
  .product-page.mobile-bar-visible .mobile-source-bar { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
  .mobile-source-bar > div { display: grid; min-width: 0; }
  .mobile-source-bar small { font-size: 10.5px; color: var(--text-on-dark-muted); }
  .mobile-source-bar strong { max-width: 46vw; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mobile-purchase-links { display: flex; flex: 0 0 auto; gap: 6px; }
  .mobile-purchase-links a { display: inline-flex; align-items: center; justify-content: center; min-width: 62px; min-height: 42px; padding: 0 12px; border-radius: var(--r-xs); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
  .mobile-official { background: rgba(255, 255, 255, .92); color: var(--brand-2); }
  .mobile-comparison { background: var(--gold-2); color: #2b1f08; }
}

@media (max-width: 780px) {
  :root { --gutter: 16px; --header-h: 62px; }
  body { font-size: 15.5px; }

  .nav-toggle { display: grid; place-items: center; }
  .site-header nav {
    display: none; position: absolute; left: 12px; right: 12px; top: calc(var(--header-h) + 6px);
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
    border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); box-shadow: var(--shadow-2);
  }
  .site-header nav.open { display: flex; }
  .site-header nav a { padding: 13px 14px; font-size: 15px; }
  .site-header nav a[aria-current="page"] { background: var(--brand-tint); }
  .site-header nav a[aria-current="page"]::after { display: none; }
  body.nav-open { overflow: hidden; }
  .brand small { display: none; }
  .brand img { width: 34px; height: 34px; }
  .brand strong { font-size: 18px; }

  .hero-inner { padding: 48px var(--gutter) 52px; }
  .hero h1 { font-size: clamp(30px, 8vw, 40px); margin: 14px 0 16px; }
  .hero-copy > p { font-size: 15.5px; margin-bottom: 22px; }
  .search-box { height: 56px; padding: 0 14px; }
  .hero-summary { padding: 20px; }
  .summary-primary strong { font-size: 42px; }
  .summary-grid div { padding: 14px 15px; }

  .category-overview, .listing-section { padding: 48px 0; }
  .section-heading, .listing-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .category-cards { grid-template-columns: minmax(0, 1fr); }
  .card-visual { aspect-ratio: 16 / 10; }
  .trust-section { padding: 56px 0; }
  .trust-points { grid-template-columns: minmax(0, 1fr); }

  .category-hero-inner { grid-template-columns: 62px minmax(0, 1fr); gap: 16px; padding: 22px 0 32px; }
  .category-hero-symbol { width: 62px; height: 62px; border-radius: 17px; font-size: 27px; }
  .category-hero-inner > strong { display: none; }

  .product-layout { display: block; padding-bottom: 24px; }
  .article { padding: 26px 18px 32px; border-radius: var(--r); }
  .article-header { padding-bottom: 24px; }
  .article-header h1 { font-size: clamp(25px, 7.4vw, 33px); letter-spacing: -.04em; }
  .article-lead { font-size: 15.5px; line-height: 1.85; }
  .article-byline { gap: 6px; font-size: 11.5px; }
  .article-hero-facts { grid-template-columns: minmax(0, 1fr); }
  .product-main-image { margin: 22px 0 26px; }
  .direct-answer { padding: 22px 18px; }
  .direct-answer h2 { font-size: 21px; }
  .quick-facts { grid-template-columns: 1fr 1fr; }
  .table-of-contents { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px; }
  .table-of-contents ol { grid-template-columns: minmax(0, 1fr); }
  .article-section { padding: 34px 0; }
  .section-title h2 { font-size: 22px; }
  .article-section > p, .longform-sections p, .detail-blocks p { font-size: 15.5px; line-height: 1.88; }
  .longform-sections > section { padding: 20px 18px; }
  .detail-blocks > div { padding: 18px 18px; }
  .feature-grid, .fit-guide-grid, .check-grid, .related-list { grid-template-columns: minmax(0, 1fr); }
  .feature-grid article { padding: 18px; }
  .spec-table > div { grid-template-columns: minmax(0, 1fr); }
  .spec-table dt { padding: 12px 16px 4px; border-right: 0; background: transparent; color: var(--muted); }
  .spec-table dd { padding: 0 16px 14px; }
  .spec-table > div + div { border-top: 1px solid var(--line); }
  .price-panel { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 22px 18px; }
  .price-panel > div > strong { font-size: 30px; }
  .price-panel dl > div { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px; }
  .price-panel dd { max-width: 100%; text-align: left; }
  .option-list { display: grid; grid-template-columns: minmax(0, 1fr); }
  .article-section.conclusion-box { padding: 26px 18px; }
  .article-section.conclusion-box > p, .article-section.conclusion-box p { font-size: 15.5px; }
  .source-section dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .purchase-link-group { grid-template-columns: 1fr 1fr; }
  .faq-section summary { padding: 15px 44px 15px 16px; font-size: 14.5px; }
  .faq-section details p { padding: 0 16px 16px; }

  .site-footer { margin-top: 56px; padding: 44px var(--gutter) 26px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 22px; padding: 26px 0; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}

@media (max-width: 430px) {
  .article { padding: 22px 14px 28px; }
  .quick-facts { grid-template-columns: minmax(0, 1fr); }
  .purchase-link-group { grid-template-columns: minmax(0, 1fr); }
  .price-panel dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .ad-reserved { min-height: 96px; }
  .mobile-source-bar { width: calc(100% - 16px); padding: 9px 10px 9px 13px; gap: 8px; }
  .mobile-source-bar strong { max-width: 38vw; font-size: 14px; }
  .mobile-purchase-links a { min-width: 54px; padding: 0 9px; font-size: 11.5px; }
  .compensation-disclosure { font-size: 12px; line-height: 1.5; }
}

/* --------------------------------------------------------------------------
   V8.5 mobile overflow hardening — 좁은 화면 가로 스크롤 차단
   -------------------------------------------------------------------------- */
main, .site-header, .site-footer, .article-shell, .content-shell, .hero-inner,
.product-layout, .article, .article-header, .article-section, .longform-sections,
.longform-sections > section, .direct-answer, .table-of-contents, .feature-grid,
.feature-grid > article, .spec-table, .price-panel, .fit-guide-grid, .check-grid,
.faq-section, .related-list, .source-section { min-width: 0; max-width: 100%; }

.article *, .policy-page *, .product-card *, .category-card * { min-width: 0; }
.article table, .policy-page table { display: block; width: 100%; overflow-x: auto; border-collapse: collapse; -webkit-overflow-scrolling: touch; }
.article pre, .article code { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
.article img, .article iframe, .article video, .ad-wrap ins { max-width: 100% !important; }
.spec-table dd, .price-panel dd, .source-section dd, .option-list li, .takeaway-list li, .limitations-list li { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }

/* --------------------------------------------------------------------------
   10. 접근성 · 인쇄 · 모션
   -------------------------------------------------------------------------- */
::selection { background: var(--brand-tint-2); color: var(--brand-3); }
:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; border-radius: 6px; }
.search-box:focus-within :focus-visible { outline: none; }

@supports (content-visibility: auto) {
  .product-card, .article-section { content-visibility: auto; contain-intrinsic-size: 1px 420px; }
}

@media (prefers-contrast: more) {
  :root { --line: #a9b3ab; --muted: #4c5a53; }
  .product-card > a, .category-card, .article, .quick-facts > div, .feature-grid article { border-width: 2px; }
}

@media print {
  .site-header, .site-footer, .ad-wrap, .reading-progress, .mobile-source-bar, .article-aside, .breadcrumb { display: none !important; }
  body { background: #fff; }
  .article { border: 0; box-shadow: none; padding: 0; }
  .product-layout { display: block; padding: 0; }
  .direct-answer, .article-section.conclusion-box { background: #fff !important; color: #000 !important; border: 1px solid #999 !important; }
  .direct-answer h2, .direct-answer p, .article-section.conclusion-box h2, .article-section.conclusion-box p, .takeaway-list li { color: #000 !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .product-card > a:hover, .source-button:hover, .category-card:hover { transform: none !important; }
}


/* V9.5.1 independent purchase and comparison links */
.mobile-purchase-links{display:flex;gap:7px;align-items:stretch}
.mobile-purchase-links a{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25}
.mobile-product{background:var(--brand);color:#fff}
.mobile-comparison{background:var(--paper);color:var(--brand);border:1px solid var(--brand)}
@media(max-width:520px){.mobile-purchase-links a{font-size:11px;padding:9px 10px}}


/* V9.5.7 홈 제품 더 보기 */
.load-more-wrap {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 28px;
}
.load-more-wrap[hidden] { display: none !important; }
.load-more-panel {
  width: min(100%, 480px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 18px 18px 16px;
  border: 1px solid rgba(11, 102, 85, .14);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(8, 59, 49, .06);
  text-align: center;
}
.load-more-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 50px;
  padding: 12px 24px;
  border: 1px solid #b7d4cc;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font: inherit;
  font-weight: 800;
  letter-spacing: -.01em;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(11, 102, 85, .16);
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.load-more-button:hover {
  transform: translateY(-1px);
  background: #095548;
  box-shadow: 0 12px 24px rgba(11, 102, 85, .2);
}
.load-more-button:focus-visible { outline: 3px solid rgba(11, 102, 85, .2); outline-offset: 3px; }
.load-more-status { margin: 0; font-size: 13px; line-height: 1.45; color: var(--muted); }
@media (max-width: 700px) {
  .load-more-wrap { margin-top: 22px; }
  .load-more-panel { width: 100%; padding: 16px 14px; }
  .load-more-button { width: 100%; min-width: 0; }
}


/* V9.6.0 performance + ad-free article index */
.product-card,.related-list>a,.article-section{content-visibility:auto;contain-intrinsic-size:1px 420px}
.card-visual img{will-change:auto}
.article-index-page{padding-bottom:92px;background:#f5f7f5}
.article-index-main{min-height:70vh}
.article-index-hero{padding:74px 0 34px;background:linear-gradient(145deg,#072f28,#0b5a4c);color:#fff}
.article-index-hero .content-shell{position:relative}
.article-index-hero .eyebrow{color:#c6ded5}
.article-index-hero h1{margin:8px 0 10px;font-family:var(--font-serif);font-size:clamp(34px,5vw,62px);letter-spacing:-.05em}
.article-index-hero p{max-width:720px;margin:0;color:#d6e5df;line-height:1.75}
.article-index-summary{display:flex;align-items:baseline;gap:8px;margin-top:24px}
.article-index-summary strong{font-size:30px}
.article-index-summary span{font-weight:800}
.article-index-summary small{margin-left:8px;color:#b9d0c8}
.article-index-section{padding-top:34px;padding-bottom:48px}
.article-index-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:14px}
.article-index-head h2{margin:4px 0 0;font-size:26px;letter-spacing:-.04em}
.article-index-head>strong{color:var(--brand);font-size:15px}
.article-index-list{display:grid;margin:0;padding:0;list-style:none;border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 12px 34px rgba(8,59,49,.06)}
.article-index-row{content-visibility:auto;contain-intrinsic-size:1px 68px;border-top:1px solid #e8eeeb}
.article-index-row:first-child{border-top:0}
.article-index-row[hidden]{display:none!important}
.article-index-row>a{display:grid;grid-template-columns:58px minmax(0,1fr) 94px 24px;gap:14px;align-items:center;min-height:68px;padding:11px 18px;color:inherit;text-decoration:none;transition:background .15s ease}
.article-index-row>a:hover{background:#f5faf7}
.article-index-number{font-family:var(--font-mono);font-size:11px;color:#8a9a93}
.article-index-copy{display:grid;gap:4px;min-width:0}
.article-index-copy strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;letter-spacing:-.02em}
.article-index-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:11px}
.article-index-row time{font-family:var(--font-mono);font-size:10px;color:#7c8d85;text-align:right}
.article-index-row>a>b{color:var(--brand);font-size:17px;text-align:right}
.article-index-empty{margin-top:16px}
.article-search-dock{position:fixed;z-index:80;left:0;right:0;bottom:0;padding:max(10px,env(safe-area-inset-bottom)) 16px max(10px,env(safe-area-inset-bottom));background:rgba(245,247,245,.94);border-top:1px solid rgba(11,102,85,.14);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.article-search-inner{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:10px;width:min(920px,100%);min-height:54px;margin:0 auto;padding:0 10px 0 16px;border:1px solid #b9ccc4;border-radius:16px;background:#fff;box-shadow:0 10px 26px rgba(8,59,49,.12)}
.article-search-inner svg{width:20px;height:20px;fill:none;stroke:#47655b;stroke-width:1.8}
.article-search-inner input{width:100%;height:52px;border:0;outline:0;background:transparent;font:inherit;font-size:14px}
.article-search-inner button{min-width:54px;height:36px;padding:0 10px;border:0;border-radius:10px;background:#edf5f1;color:#0b6655;font:inherit;font-size:11px;font-weight:850;cursor:pointer}
.article-search-inner button[hidden]{display:none}
@media(max-width:700px){
  .article-index-page{padding-bottom:88px}
  .article-index-hero{padding:54px 0 28px}
  .article-index-section{padding-top:24px}
  .article-index-row>a{grid-template-columns:38px minmax(0,1fr) 20px;gap:9px;min-height:64px;padding:10px 12px}
  .article-index-row time{display:none}
  .article-index-copy strong{font-size:13px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .article-index-copy small{font-size:10px}
  .article-search-dock{padding-left:10px;padding-right:10px}
}

/* V9.6.4 purchase/subscription intent separation */
.commerce-variant{margin:18px 0 28px;padding:16px 18px;border:1px solid var(--line);border-radius:18px;background:#f8faf9;display:flex;align-items:center;justify-content:space-between;gap:18px}
.commerce-variant>div{display:grid;gap:5px;min-width:0}.commerce-variant span{font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--accent);text-transform:uppercase}.commerce-variant strong{font-size:14px;line-height:1.65;color:var(--text);font-weight:700}
.commerce-variant>a{flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;padding:10px 13px;border-radius:12px;border:1px solid rgba(11,102,85,.2);background:#fff;color:var(--accent-dark);font-size:12px;font-weight:900;text-decoration:none}.commerce-variant>a:hover{background:#eef6f2}.commerce-variant>a b{font-size:14px}
@media (max-width:760px){.commerce-variant{align-items:stretch;flex-direction:column}.commerce-variant>a{justify-content:center;width:100%}}

/* ==========================================================================
   V9.7.2 Soft Rose Atelier — 여성 친화형 프리미엄 3D UI
   로즈베이지 · 크림화이트 · 소프트토프 · 샴페인, 딥 로즈는 포인트만 사용
   ========================================================================== */
:root{
  --paper:#fffdfc;
  --bg:#faf6f5;
  --bg-2:#f3eceb;
  --ink:#2f2729;
  --ink-2:#554a4d;
  --muted:#817478;
  --muted-2:#a29397;
  --brand:#a95364;
  --brand-2:#7d3e4b;
  --brand-3:#3d2c31;
  --brand-tint:#f8ecef;
  --brand-tint-2:#ecd3d9;
  --gold:#9a765e;
  --gold-2:#c5a07f;
  --gold-tint:#fbf5ef;
  --line:#eadfe1;
  --line-2:#d8c8cc;
  --danger:#984657;
  --text-on-dark:#fffaf9;
  --text-on-dark-muted:#eadde0;
  --r-xs:10px;
  --r-sm:14px;
  --r:18px;
  --r-lg:24px;
  --shadow-1:0 1px 0 rgba(255,255,255,.96) inset,0 4px 8px rgba(81,55,62,.045),0 18px 34px -22px rgba(93,59,68,.28);
  --shadow-2:0 1px 0 rgba(255,255,255,1) inset,0 8px 18px rgba(81,55,62,.055),0 32px 58px -28px rgba(93,59,68,.34);
  --shadow-dark:0 28px 58px -24px rgba(65,41,48,.38);
  --rule-dark:repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 34px);
  --rule-light:repeating-linear-gradient(180deg,rgba(125,62,75,.027) 0 1px,transparent 1px 34px)
}
body{
  background:
    radial-gradient(circle at 8% 1%,rgba(222,188,196,.22),transparent 27%),
    radial-gradient(circle at 94% 12%,rgba(223,205,188,.16),transparent 24%),
    linear-gradient(180deg,#fffdfc 0%,#faf6f5 48%,#f6f0ef 100%);
}
.site-header{
  background:rgba(255,253,252,.91)!important;
  border-color:rgba(125,62,75,.09)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.94) inset,0 10px 28px rgba(83,58,64,.055)!important;
  backdrop-filter:blur(22px) saturate(1.16);
}
.brand img,.footer-brand img{box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 9px 18px rgba(94,58,68,.13)}
.brand strong{color:#68404a}
.site-header nav a:hover{background:#f7eef0;color:#884654}
.site-header nav a[aria-current="page"]{color:#884654}
.site-header nav a[aria-current="page"]::after{background:linear-gradient(90deg,#bd7280,#d3b18f)}
.reading-progress{background:linear-gradient(90deg,#a95364,#d4b293)}

/* 홈 히어로: 넓은 빨강 면적을 없애고 밝은 로즈베이지 입체 패널로 전환 */
.hero,.detail-hero,.category-hero,.article-index-hero{
  background:
    radial-gradient(circle at 82% 8%,rgba(255,255,255,.95),transparent 26%),
    radial-gradient(circle at 11% 94%,rgba(220,185,193,.23),transparent 36%),
    linear-gradient(145deg,#fffdfc 0%,#f7edef 52%,#efe4e5 100%)!important;
  color:var(--ink)!important;
  border-bottom:1px solid rgba(125,62,75,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 26px 60px -42px rgba(82,51,60,.32)!important;
}
.hero h1,.category-hero h1,.article-index-hero h1{color:#392d31!important;text-shadow:0 1px 0 rgba(255,255,255,.9)}
.hero-copy>p,.category-hero p,.article-index-hero p{color:#675a5e!important}
.hero .eyebrow,.article-index-hero .eyebrow{color:#9d5665!important}
.hero-trust span{
  border-color:rgba(125,62,75,.13);
  background:rgba(255,255,255,.58);
  color:#735e64;
  box-shadow:0 1px 0 rgba(255,255,255,.92) inset,0 8px 18px -14px rgba(80,50,58,.22);
}
.search-box{
  border-color:rgba(125,62,75,.10);
  background:rgba(255,255,255,.92);
  box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 18px 38px -22px rgba(93,59,68,.28);
}
.search-box:focus-within{border-color:#c8949f;box-shadow:0 1px 0 #fff inset,0 18px 38px -22px rgba(93,59,68,.28),0 0 0 4px rgba(169,83,100,.08)}

.hero-summary,.summary-primary{
  border-color:rgba(125,62,75,.10)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.92),rgba(250,241,243,.9))!important;
  box-shadow:0 1px 0 #fff inset,0 22px 44px -26px rgba(91,57,66,.3)!important;
}
.summary-primary{padding:18px 20px;border-radius:17px!important}
.summary-primary small,.summary-primary span{color:#806d72!important}
.summary-primary strong{color:#824656!important}
.summary-grid{background:rgba(125,62,75,.08)}
.summary-grid div{background:rgba(255,253,252,.92)!important}
.summary-grid b{color:#4b363c!important}.summary-grid small{color:#8e7d81!important}

/* 카드와 목록 — 부드러운 3D 레이어 */
.product-card>a,.category-card,.article-index-list,.load-more-panel,
.article,.sticky-card,.editorial-card,.commerce-variant{
  border-color:rgba(125,62,75,.10)!important;
  background:linear-gradient(145deg,#fff 0%,#fffdfc 56%,#faf2f3 100%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 5px 12px rgba(75,51,57,.045),0 24px 46px -30px rgba(93,59,68,.32)!important;
}
.product-card>a:hover,.category-card:hover,.related-list a:hover,.feature-grid article:hover{
  transform:translateY(-5px) perspective(1000px) rotateX(.35deg)!important;
  border-color:rgba(169,83,100,.24)!important;
  box-shadow:0 1px 0 #fff inset,0 8px 18px rgba(75,51,57,.055),0 32px 58px -27px rgba(93,59,68,.38)!important;
}
.card-visual,.aside-product-image,.product-image-frame{
  background:
    radial-gradient(circle at 76% 12%,rgba(255,255,255,.82),transparent 26%),
    linear-gradient(145deg,#f8f3f1,#efe6e5)!important;
  border-color:#eadfe1!important;
}
.card-visual.has-product-image img{filter:drop-shadow(0 16px 18px rgba(75,52,58,.13))}
.category-symbol,.category-hero-symbol{
  background:linear-gradient(145deg,#fff,#f4e8eb)!important;
  color:#9b5160!important;
  border:1px solid rgba(125,62,75,.08);
  box-shadow:0 1px 0 #fff inset,0 12px 24px -17px rgba(94,58,68,.30)!important;
}

/* 본문 안의 모든 주요 정보박스에 동일한 3D 언어 적용 */
.article-hero-facts>div,.quick-facts>div,.table-of-contents,.longform-sections>section,
.detail-blocks>div,.notice-box,.feature-grid article,.spec-table,.price-panel,
.limitations-list,.faq-section details,.related-list a,.source-card,.detail-card,
.article-card,.check-grid>*,.fit-guide-grid>*{
  border-color:rgba(125,62,75,.105)!important;
  background:linear-gradient(145deg,#fff 0%,#fffdfc 58%,#faf3f3 100%)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.98) inset,0 4px 9px rgba(77,52,59,.035),0 18px 36px -27px rgba(94,58,68,.30)!important;
}
.article-hero-facts>div,.quick-facts>div{position:relative;overflow:hidden}
.article-hero-facts>div::after,.quick-facts>div::after{
  content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.98),transparent)
}
.article-hero-facts>div::before{background:linear-gradient(180deg,#b66776,#d4b08f)!important}
.longform-sections>section,.feature-grid article,.faq-section details,.related-list a{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.longform-sections>section:hover,.faq-section details:hover{transform:translateY(-2px);box-shadow:0 1px 0 #fff inset,0 22px 38px -28px rgba(94,58,68,.34)!important}
.detail-blocks>div{border-left:3px solid #b46b79!important;border-radius:0 16px 16px 0!important}
.notice-box,.limitations-list{background:linear-gradient(145deg,#fffaf5,#fbf2ea)!important;border-color:#ead8c9!important}
.notice-box strong,.limitations-list li{color:#715e52!important}
.limitations-list li::before{background:#ead9c7!important;color:#7c6452!important}

/* 표 — PC에서 폭을 온전히 사용하고 셀도 입체적으로 */
.article table,.policy-page table{
  width:100%!important;
  max-width:100%;
  border:1px solid var(--line)!important;
  border-radius:16px;
  background:#fffdfc;
  box-shadow:0 1px 0 #fff inset,0 16px 30px -26px rgba(93,59,68,.27);
}
.article table th,.policy-page table th{background:#f6edef!important;color:#674b53!important}
.article table td,.policy-page table td{background:rgba(255,253,252,.94)}
.spec-table{overflow:hidden!important}
.spec-table>div{border-color:#eee3e5!important}
.spec-table>div:hover{background:#fbf6f6!important}
.spec-table dt{background:#f8f1f2!important;border-color:#eadde0!important;color:#64545a!important}

/* 어두운 강조영역도 강한 레드 대신 딥 플럼 */
.direct-answer,.trust-section,.site-footer{
  background:
    radial-gradient(circle at 85% 0%,rgba(196,145,155,.13),transparent 30%),
    linear-gradient(145deg,#49343a,#392a2e 62%,#302429)!important;
  color:#fffaf9!important;
}
.direct-answer{border:1px solid rgba(255,255,255,.08)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 24px 46px -29px rgba(48,34,39,.5)!important}
.direct-answer h2,.trust-grid h2{color:#fffaf9!important}
.direct-answer>p,.trust-grid>div>p,.trust-points p{color:#e6dadd!important}
.trust-points article{
  border-color:rgba(255,255,255,.10)!important;
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.045))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 18px 34px -26px rgba(0,0,0,.34)!important;
}
.trust-points strong{color:#fffaf9!important}.trust-points b{color:#d9b9a0!important}

/* CTA — 포인트 레드/로즈는 화면 면적을 작게 사용 */
.primary-button,.cta-primary,.product-button,.inline-button,.load-more-button{
  background:linear-gradient(180deg,#b76575 0%,#9c4e5d 54%,#843d4b 100%)!important;
  border-color:#7b3946!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),inset 0 -2px 0 rgba(69,32,40,.15),0 12px 22px rgba(110,59,70,.16)!important;
}
.primary-button:hover,.cta-primary:hover,.product-button:hover,.inline-button:hover,.load-more-button:hover{
  background:linear-gradient(180deg,#bf7080,#9b4e5d 58%,#773642)!important;
  transform:translateY(-2px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 16px 28px rgba(110,59,70,.20)!important;
}
.official-button,.comparison-button{
  background:linear-gradient(180deg,#fff,#fbf4f5)!important;
  color:#8c4856!important;
  border-color:#d8b7be!important;
  box-shadow:inset 0 1px 0 #fff,0 8px 16px -13px rgba(93,59,68,.30);
}
.official-button:hover,.comparison-button:hover{background:#f7ecef!important}
.filter-row button.active,.chip.active{
  background:linear-gradient(180deg,#ad5a69,#914653)!important;
  color:#fff!important;border-color:#87414f!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),0 8px 16px rgba(107,59,69,.13)!important;
}
.eyebrow,.price strong,.product-card .price,.detail-price strong,.aside-price strong{color:#98505f!important}
.discount-badge{background:#d8b798!important;color:#503b2f!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.45)}
.status-badge,.article-byline a{background:#f7e9ec!important;color:#925060!important;border-color:#e8cfd5!important}
.faq-section summary::after{background:#f4e5e8!important;color:#955162!important;box-shadow:inset 0 1px 0 #fff}

/* 하단 고정 바도 진한 빨강 대신 고급 플럼 */
.mobile-source-bar{background:rgba(62,44,50,.96)!important;border-color:rgba(255,255,255,.12)!important;box-shadow:0 18px 42px rgba(55,38,44,.26)!important}
.mobile-official{color:#76404c!important}.mobile-comparison{background:#d0ad8d!important;color:#45352b!important}

/* 글 목록 검색 */
.article-index-hero .article-index-summary strong{color:#7f4653}
.article-index-hero .article-index-summary span{color:#66555a}.article-index-hero .article-index-summary small{color:#927e83}
.article-search-dock{background:rgba(250,246,245,.93)!important;border-color:rgba(125,62,75,.10)!important}
.article-search-inner{border-color:#ddcdd0!important;box-shadow:0 12px 28px rgba(83,58,64,.09)!important}
.article-search-inner button{background:#f5e9ec!important;color:#8d4958!important}
.article-index-row>a:hover{background:#fbf5f6!important}

@media(max-width:780px){
  .product-card>a:hover,.category-card:hover,.related-list a:hover,.feature-grid article:hover,.longform-sections>section:hover,.faq-section details:hover{transform:none!important}
  .hero,.detail-hero,.category-hero,.article-index-hero{box-shadow:none!important}
}