/* 성분 가이드 공유 스타일 — ATELIER editorial 톤.
   매거진/아티클(article-editorial.css)과 동일한 디자인 언어로 정합:
   Bodoni Moda 디스플레이 · Libre Caslon Text italic eyebrow · Hanken Grotesk 본문/라벨,
   gold/burgundy/cream 팔레트, 0.5px 골드 헤어라인, 샤프 코너, 넉넉한 여백.
   대상: /ingredients/*.html (10편, <div class="wrap">) + /ingredients.html (index, <div class="wrap wrap-index">).
   bare element 룰(h1/h2/h3/p)은 .wrap:not(.wrap-index) 로 스코프해 index card 타이포 침범 방지. */

:root {
  --ig-gold: #b88a3d;
  --ig-gold-deep: #8c6726;
  --ig-burgundy: #600016;
  --ig-cream: #f6f7f9;
  --ig-cream-soft: #f1f3f6;
  --ig-cream-deep: #e8ebef;
  --ig-ink: #1c1b1b;
  --ig-ink-soft: #475569;
  --ig-line: #e2e8f0;
  --ig-display: 'Hanken Grotesk', 'Noto Sans KR', sans-serif;
  --ig-script: 'Hanken Grotesk', 'Noto Sans KR', sans-serif;
  --ig-sans: 'Hanken Grotesk', 'Noto Sans KR', system-ui, sans-serif;
}

/* Hero 이미지 — h1 + meta 다음 박힘 (성분 가이드 본문 도입). */
.ing-hero {
  margin: 24px 0 36px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--ig-cream-soft);
}
.ing-hero img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
@media (min-width: 768px) {
  .ing-hero { margin: 32px 0 48px; }
}

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

body {
  font-family: var(--ig-sans);
  background: var(--ig-cream);
  color: var(--ig-ink);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── 레이아웃 ───────────────────────────────────────────── */
.wrap { max-width: 720px; margin: 0 auto; padding: 24px 24px 96px; }

/* ── 상단 back ──────────────────────────────────────────── */
.back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ig-sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ig-ink-soft); text-decoration: none;
  background: none; border-radius: 0; padding: 8px 0; margin-bottom: 16px;
}
.back:hover { color: var(--ig-ink); }

/* ── 인트로(중앙 정렬) — eyebrow · h1 · meta · lead ──────── */
.wrap:not(.wrap-index) > .badge {
  display: block; text-align: center;
  font-family: var(--ig-script); 
  color: var(--ig-burgundy); font-size: 16px; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  background: none; border-radius: 0; padding: 0; margin: 24px 0 16px;
}
.wrap:not(.wrap-index) > h1 {
  font-family: var(--ig-display); font-weight: 400;
  font-size: 34px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ig-ink); text-align: center;
  max-width: 640px; margin: 0 auto 20px;
}
.wrap:not(.wrap-index) > .meta {
  font-family: var(--ig-sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ig-ink-soft); opacity: 0.7; text-align: center; margin: 0 0 24px;
}
.wrap:not(.wrap-index) > .lead {
  font-size: 17px; line-height: 1.75; color: var(--ig-ink-soft);
  max-width: 600px; margin: 0 auto 24px; text-align: center;
}
.wrap:not(.wrap-index) > .lead::after {
  content: ''; display: block; width: 48px; height: 0.5px;
  background: var(--ig-gold); margin: 40px auto 0;
}

/* ── 본문 타이포 ────────────────────────────────────────── */
.wrap:not(.wrap-index) h2 {
  font-family: var(--ig-display); font-weight: 400;
  font-size: 26px; line-height: 1.3; letter-spacing: -0.01em;
  color: var(--ig-ink); margin: 64px 0 22px;
  padding-bottom: 16px; border-bottom: 1px solid var(--ig-line);
}
.wrap:not(.wrap-index) h3 {
  font-family: var(--ig-sans); font-weight: 600; font-size: 17px;
  color: var(--ig-ink); margin: 32px 0 10px;
}
.wrap:not(.wrap-index) p {
  font-size: 16px; line-height: 1.85; color: var(--ig-ink-soft); margin-bottom: 16px;
}
.wrap:not(.wrap-index) strong { color: var(--ig-ink); font-weight: 600; }

/* ── 핵심 요약(.highlight) → key-card ──────────────────── */
.highlight {
  background: var(--ig-cream-soft); border: none; border-left: 2px solid var(--ig-gold);
  border-radius: 0; padding: 18px 24px; margin: 28px 0;
}
.wrap:not(.wrap-index) .highlight p {
  font-family: var(--ig-script); 
  font-size: 16px; line-height: 1.7; color: var(--ig-ink-soft); margin: 0;
}
.wrap:not(.wrap-index) .highlight p strong { font-style: normal; color: var(--ig-ink); font-weight: 600; }

/* ── 표(.info-table) ────────────────────────────────────── */
.info-table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.info-table th {
  font-family: var(--ig-sans);
  font-size: 11px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ig-ink-soft); padding: 14px 12px 14px 0; text-align: left; width: 35%;
  background: transparent; border-bottom: 0.5px solid var(--ig-line);
}
.info-table td {
  padding: 14px 12px 14px 0; border-bottom: 0.5px solid var(--ig-line);
  color: var(--ig-ink-soft); vertical-align: top; font-size: 14px; line-height: 1.7; background: transparent;
}

/* 모바일 — th/td 한 행에 우겨넣지 말고 자연 stack (라벨 위 / 값 아래) */
@media (max-width: 640px) {
  .info-table, .info-table tbody, .info-table tr, .info-table th, .info-table td { display: block; width: 100%; }
  .info-table tr { padding: 12px 0; border-bottom: 0.5px solid var(--ig-line); }
  .info-table tr:last-child { border-bottom: none; }
  .info-table th { padding: 0 0 4px 0; border-bottom: none; letter-spacing: 0.12em; }
  .info-table td { padding: 0; border-bottom: none; }
}

/* ── 농도 카드(.concentration) → trio-card ──────────────── */
.concentration { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 32px 0; }
.conc-item {
  background: var(--ig-cream-soft); border: 0.5px solid var(--ig-line); border-top: 2px solid var(--ig-gold);
  border-radius: 0; padding: 28px 20px; text-align: center;
}
.conc-pct { font-family: var(--ig-display); font-weight: 400; font-size: 30px; color: var(--ig-gold-deep); margin-bottom: 8px; }
.conc-label {
  font-family: var(--ig-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--ig-ink); margin-bottom: 8px;
}
.conc-desc { font-size: 13px; color: var(--ig-ink-soft); line-height: 1.6; }

/* ── 비교 카드(.compare-*) ──────────────────────────────── */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }
.compare-card { background: var(--ig-cream-soft); border: 0.5px solid var(--ig-line); border-top: 2px solid var(--ig-gold); border-radius: 0; padding: 28px 24px; }
.compare-tag {
  font-family: var(--ig-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--ig-gold); margin-bottom: 12px;
}
.compare-name { font-family: var(--ig-display); font-weight: 400; font-size: 20px; line-height: 1.3; color: var(--ig-ink); margin-bottom: 14px; }
.wrap:not(.wrap-index) .compare-card p { font-size: 14px; line-height: 1.75; color: var(--ig-ink-soft); margin-bottom: 8px; }
.compare-card ul { padding-left: 18px; font-size: 13.5px; line-height: 1.8; color: var(--ig-ink-soft); }

/* ── 궁합 카드(.pair-*) — 의미색 유지, editorial 톤 ──────── */
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 32px 0; }
.pair-card { padding: 24px; border-radius: 0; background: var(--ig-cream-soft); border: 0.5px solid var(--ig-line); border-top: 2px solid var(--ig-line); }
.pair-good { border-top-color: #5b8c5a; }
.pair-bad { border-top-color: #b06a6a; }
.pair-title { font-family: var(--ig-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; }
.pair-good .pair-title { color: #3a6b39; }
.pair-bad .pair-title { color: #9a4a4a; }
.pair-card ul { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--ig-ink-soft); line-height: 1.8; }
.pair-card li { margin-bottom: 6px; }

/* ── 제품 링크(.product-link) ───────────────────────────── */
.product-link {
  display: flex; align-items: center; gap: 12px;
  background: var(--ig-cream-soft); border: 0.5px solid var(--ig-line);
  border-radius: 0; padding: 14px 16px; text-decoration: none; color: var(--ig-ink); margin-bottom: 8px; transition: background .2s, border-color .2s;
}
.product-link:hover { background: var(--ig-cream-deep); border-color: var(--ig-gold); }
.product-link .pl-cat {
  font-family: var(--ig-sans); background: transparent; color: var(--ig-gold);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase;
  padding: 0; border-radius: 0; white-space: nowrap;
}
.product-link .pl-name { font-size: 14px; font-weight: 500; }

/* ── FAQ ────────────────────────────────────────────────── */
.faq-item { border-bottom: 0.5px solid var(--ig-line); padding: 24px 0; }
.faq-q { font-family: var(--ig-display); font-weight: 400; font-size: 18px; line-height: 1.4; color: var(--ig-ink); margin-bottom: 10px; }
.faq-a { font-size: 15px; color: var(--ig-ink-soft); line-height: 1.8; }

/* ── CTA — editorial 다크 버튼 ──────────────────────────── */
.cta {
  display: block; width: fit-content; margin: 56px auto;
  background: var(--ig-ink); color: var(--ig-cream); text-align: center;
  font-family: var(--ig-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 18px 36px; border-radius: 0; text-decoration: none; transition: opacity .3s;
}
.cta:hover { opacity: 0.85; }

/* ── 면책 ───────────────────────────────────────────────── */
.disclaimer-box {
  margin-top: 80px; padding: 24px 28px; background: var(--ig-cream-soft);
  border: none; border-left: 0.5px solid var(--ig-gold); border-radius: 0;
}
.disclaimer-title {
  font-family: var(--ig-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.25em;
  text-transform: uppercase; color: var(--ig-ink); margin-bottom: 12px;
}
.wrap:not(.wrap-index) .disclaimer-box p { font-size: 13px; color: var(--ig-ink-soft); line-height: 1.7; margin-bottom: 6px; }
.disclaimer-box ul { margin: 10px 0 8px 18px; font-size: 12.5px; color: var(--ig-ink-soft); line-height: 1.8; }
.disclaimer-box li { margin-bottom: 5px; }
.disclaimer-box strong { color: var(--ig-ink); font-weight: 600; }
.disclaimer-final {  color: var(--ig-ink-soft) !important; padding-top: 12px; margin-top: 12px !important; border-top: 0.5px solid var(--ig-line); }
.copyright { font-family: var(--ig-sans); font-size: 11px; color: var(--ig-ink-soft); opacity: 0.7; margin-top: 32px; text-align: center; letter-spacing: 0.1em; }

/* ── index (성분 가이드 목록) → continue-explore 톤 ──────── */
.wrap-index { max-width: 1100px; padding: 24px 24px 96px; }
.breadcrumb { font-family: var(--ig-sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ig-ink-soft); margin-bottom: 24px; }
.breadcrumb a { color: var(--ig-gold-deep); text-decoration: none; }
.page-title { font-family: var(--ig-display); font-weight: 400; font-size: 40px; line-height: 1.15; letter-spacing: -0.01em; color: var(--ig-ink); margin-bottom: 16px; }
.page-subtitle { font-size: 16px; color: var(--ig-ink-soft); margin-bottom: 56px; line-height: 1.8; max-width: 640px; }
.group-title { font-family: var(--ig-display); font-weight: 400; font-size: 24px; line-height: 1.25; color: var(--ig-ink); margin: 64px 0 8px; }
.group-desc { font-family: var(--ig-script);  font-size: 15px; color: var(--ig-burgundy); margin-bottom: 28px; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; }
.card {
  background: var(--ig-cream-soft); border: 0.5px solid var(--ig-line); border-top: 2px solid var(--ig-gold); border-radius: 0;
  padding: 28px 24px; text-decoration: none; color: var(--ig-ink);
  display: flex; flex-direction: column; gap: 12px; transition: border-color .3s, box-shadow .3s;
}
.card:hover { border-color: var(--ig-gold); box-shadow: 0 4px 16px rgba(140,103,38,0.07); }
.card-tag { font-family: var(--ig-sans); background: transparent; color: var(--ig-gold); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; padding: 0; border-radius: 0; display: block; margin: 0; }
.card-title { font-family: var(--ig-display); font-weight: 400; font-size: 21px; line-height: 1.3; color: var(--ig-ink); margin: 0; transition: color .3s; }
.card:hover .card-title { color: var(--ig-gold); }
.card-excerpt { font-size: 14px; color: var(--ig-ink-soft); line-height: 1.7; margin: 0; }
.card-cta { font-family: var(--ig-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ig-gold); }

/* ── 반응형 ─────────────────────────────────────────────── */
@media (min-width: 768px) {
  .wrap:not(.wrap-index) > h1 { font-size: 52px; line-height: 1.15; }
  .wrap:not(.wrap-index) h2 { font-size: 30px; }
  .page-title { font-size: 52px; }
}
@media (min-width: 481px) and (max-width: 720px) {
  .compare-grid, .pair-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .wrap:not(.wrap-index) > h1 { font-size: 28px; }
  .concentration, .compare-grid, .pair-grid { grid-template-columns: 1fr; }
  .page-title { font-size: 30px; }
}