/* ════════════════════════════════════════════════════
   Olivarrier · Comfort Barrier Cream · v4
   
   v4 변경점:
   1. 작은 글씨 컬러 위계 재조정
      · 일반 mono 캡션/푸터 → text-3 (#8A8A82)
      · 강조 meta (시점/측정기) → text-2 (#B8B8B0)
      · 가장 미세한 라벨 (FIG번호) → text-4 유지
   2. PNK 임상시험 정보 블록 (Section 06)
   3. 데이터 디스플레이 디자인 통일 (clinical-card)
   4. FIG 1.2 widescreen + cream 두께 강화
   ════════════════════════════════════════════════════ */

.olv-cbc {
  --bg:           #0A0B0D;
  --surface:      #16181C;
  --surface-elev: #1E2024;
  --border-sub:   #26282D;
  --border-emph:  #3A3C42;

  --text-1: #E8E8E4;
  --text-2: #B8B8B0;
  --text-3: #8A8A82;
  --text-4: #62625E;

  --olive:      #6B7C5E;
  --olive-emph: #9CB088;
  --water:      #7A94A8;
  --water-emph: #96B0C4;
  --corneo:     #D4B07E;
  --corneo-emph:#E8C896;

  --bg-light:    #F0F0EE;
  --text-l-1:    #0A0A0A;
  --text-l-2:    #5C5C58;
  --text-l-3:    #9A9A95;
  --olive-light: #2C3E2D;
  --border-light:#D0D0CB;
  --border-light-sub:#E5E5E0;

  --font-hero: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Monaco, 'Courier New', monospace;

  /* Design System v1.1 — Gray scale (7 steps) */
  --gray-50:  #FAFAF7;
  --gray-100: #F0EFEA;
  --gray-200: #E8E6E0;
  --gray-300: #D4D2CC;
  --gray-500: #8A8A82;
  --gray-700: #5A5A55;
  --gray-900: #1E2228;

  /* Olive scale (5 steps) */
  --olive-50:  #F0F4ED;
  --olive-100: #D8E1D2;
  --olive-200: #9CB088;
  --olive-400: #6B8A6D;
  --olive-500: #4A6B4C;
  --olive-700: #2C3E2D;

  /* Motion tokens */
  --ease:       cubic-bezier(.16, 1, .3, 1);
  --ease-quick: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 200ms;
  --dur:      350ms;
  --dur-slow: 500ms;
}

.olv-cbc * { margin: 0; padding: 0; box-sizing: border-box; }
.olv-cbc {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 16px; /* pin inheritance root — 아임웹 host root(14px) 종속 차단 */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
  line-height: 1.5;
  overflow-x: hidden;
  letter-spacing: -0.005em;
}

/* Selection — olive 톤 */
.olv-cbc ::selection { background: rgba(156,176,136,.35); color: inherit; }
.olv-cbc ::-moz-selection { background: rgba(156,176,136,.35); color: inherit; }

/* Focus visible — 접근성 */
.olv-cbc :focus { outline: none; }
.olv-cbc :focus-visible {
  outline: 2px solid var(--olive-200);
  outline-offset: 3px;
  border-radius: 2px;
}
.olv-cbc button:focus-visible,
.olv-cbc a:focus-visible {
  outline-offset: 4px;
}

/* Tabular numbers utility */
.olv-cbc .tabular,
.olv-cbc .data-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
  letter-spacing: -0.01em;
}

.olv-cbc .sec {
  padding: 96px 24px;
  position: relative;
}
.olv-cbc .sec-light {
  background: var(--bg-light);
  color: var(--text-l-1);
}
.olv-cbc .sec-inner {
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .olv-cbc .sec       { padding: 140px 48px; }
  .olv-cbc .sec-inner { max-width: 840px; }
}

/* ─── Eyebrow · Section Num ─── */
.olv-cbc .sec-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--text-3);
  margin-bottom: 16px;
}
.olv-cbc .sec-light .sec-num { color: var(--text-l-3); }

.olv-cbc .eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--olive-emph);
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.olv-cbc .eyebrow::before {
  content: '';
  width: 24px; height: 1px;
  background: var(--olive-emph);
  display: inline-block;
}
.olv-cbc .sec-light .eyebrow { color: var(--olive-light); }
.olv-cbc .sec-light .eyebrow::before { background: var(--olive-light); }

/* ─── Hero H1 ─── */
.olv-cbc h1 {
  font-family: var(--font-hero);
  font-weight: 500;
  font-size: 51px;
  letter-spacing: -.035em;
  line-height: 1.04;
  background: linear-gradient(180deg, #FFFFFF 0%, #B8B8B0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-bottom: 28px;
}
@media (min-width: 768px) {
  .olv-cbc h1 { font-size: 90px; margin-bottom: 40px; }
}

.olv-cbc .h2-kr {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 31px;
  letter-spacing: -.022em;
  line-height: 1.3;
  color: var(--text-1);
  margin-bottom: 28px;
}
@media (min-width: 768px) {
  .olv-cbc .h2-kr { font-size: 38px; }
}
.olv-cbc .sec-light .h2-kr { color: var(--text-l-1); }

.olv-cbc h2 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 31px;
  letter-spacing: -.022em;
  line-height: 1.3;
  color: var(--text-1);
  margin-bottom: 24px;
}
@media (min-width: 768px) {
  .olv-cbc h2 { font-size: 38px; }
}
.olv-cbc .sec-light h2 { color: var(--text-l-1); }

.olv-cbc h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -.005em;
  line-height: 1.3;
  color: var(--text-1);
  margin-bottom: 12px;
}
.olv-cbc .sec-light h3 { color: var(--text-l-1); }

.olv-cbc .lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  color: var(--text-2);
  margin-bottom: 20px;
  max-width: 600px;
}
.olv-cbc .sec-light .lead { color: var(--text-l-2); }

.olv-cbc .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-2);
  max-width: 640px;
}
.olv-cbc .body + .body { margin-top: 18px; }
.olv-cbc .sec-light .body { color: var(--text-l-2); }
.olv-cbc .body strong { color: var(--text-1); font-weight: 500; }
.olv-cbc .sec-light .body strong { color: var(--text-l-1); }

/* ─── HERO ─── */
.olv-cbc .hero {
  padding-top: 120px;
  padding-bottom: 100px;
}
@media (min-width: 768px) {
  .olv-cbc .hero { padding-top: 180px; padding-bottom: 140px; }
}
.olv-cbc .hero-en {
  font-family: var(--font-hero);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--olive-emph);
  margin-bottom: 32px;
}

.olv-cbc .hero-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 24px;
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--border-sub);
}
@media (min-width: 768px) {
  .olv-cbc .hero-meta {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 36px;
  }
}
.olv-cbc .meta-cell { display: flex; flex-direction: column; gap: 6px; }
.olv-cbc .meta-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.olv-cbc .meta-value {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--olive-emph);
}

/* ─── PHOTO PLACEHOLDER ─── */
.olv-cbc .photo {
  margin: 56px 0 0;
  background: var(--surface);
  border: 1px dashed var(--border-emph);
  border-radius: 14px;
  aspect-ratio: 4 / 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px;
}
.olv-cbc .sec-light .photo {
  background: #E5E5E0;
  border-color: #C8C8C3;
}
.olv-cbc .photo-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--olive-emph);
}
.olv-cbc .sec-light .photo-tag { color: var(--olive-light); }
.olv-cbc .photo-hint {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--text-3);
  text-align: center;
  max-width: 380px;
  line-height: 1.5;
}
.olv-cbc .sec-light .photo-hint { color: var(--text-l-3); }

/* ─── TRUST STRIP ─── */
.olv-cbc .trust {
  padding: 64px 24px;
}
@media (min-width: 768px) {
  .olv-cbc .trust { padding: 88px 48px; }
}
.olv-cbc .trust-grid {
  max-width: 1080px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 20px;
}
@media (min-width: 768px) {
  .olv-cbc .trust-grid { grid-template-columns: repeat(3, 1fr); gap: 36px 32px; }
}
@media (min-width: 1024px) {
  .olv-cbc .trust-grid { grid-template-columns: repeat(6, 1fr); gap: 28px; }
}
.olv-cbc .trust-cell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 14px;
  border-left: 1px solid var(--border-emph);
}
.olv-cbc .trust-cell {
  transition: transform var(--dur) var(--ease);
}
.olv-cbc .trust-cell:hover {
  transform: translateY(-1px);
}
.olv-cbc .trust-num {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .15em;
  color: var(--olive-emph);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.olv-cbc .trust-en {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-1);
  line-height: 1.3;
}
.olv-cbc .trust-kr {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  margin-top: 2px;
}
.olv-cbc .trust-desc {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  line-height: 1.55;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════
   AT A GLANCE — 제품 요약 시스템 (혜택 + 인증 통합 · 재사용 모듈)
   ═══════════════════════════════════════════════════ */
.olv-cbc .atg-inner { max-width: 840px; margin: 0 auto; }
.olv-cbc .atg-eyebrow {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .26em; text-transform: uppercase; color: var(--olive-emph);
  margin-bottom: 26px;
  display: flex; align-items: center; gap: 16px;
}
.olv-cbc .atg-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--border-sub); }
.olv-cbc .atg-radio { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; }
.olv-cbc .atg-seg {
  position: relative; display: flex; width: 380px; max-width: 100%; padding: 4px;
  border: 1px solid var(--border-emph); border-radius: 100px; margin-bottom: 28px;
}
.olv-cbc .atg-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  border-radius: 100px; background: #23262C; border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 3px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.07);
  transition: transform .4s var(--ease); z-index: 0;
}
.olv-cbc #atgtab-a:checked ~ .atg-seg .atg-tab[for="atgtab-a"],
.olv-cbc #atgtab-b:checked ~ .atg-seg .atg-tab[for="atgtab-b"] { text-shadow: 0 1px 2px rgba(0,0,0,.5); }
.olv-cbc #atgtab-b:checked ~ .atg-seg .atg-thumb { transform: translateX(100%); }
.olv-cbc .atg-tab {
  position: relative; z-index: 1; flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; color: var(--text-2);
  padding: 11px 14px; border-radius: 100px;
  cursor: pointer; white-space: nowrap; user-select: none; -webkit-user-select: none;
  transition: color .3s var(--ease);
}
.olv-cbc .atg-tab:hover { color: var(--text-2); }
/* active tab label color (thumb provides the moving background) */
.olv-cbc #atgtab-a:checked ~ .atg-seg .atg-tab[for="atgtab-a"],
.olv-cbc #atgtab-b:checked ~ .atg-seg .atg-tab[for="atgtab-b"] { color: var(--text-1); }
/* inactive tab label — olive accent so it statically reads as "tap me" */
.olv-cbc #atgtab-a:checked ~ .atg-seg .atg-tab[for="atgtab-b"],
.olv-cbc #atgtab-b:checked ~ .atg-seg .atg-tab[for="atgtab-a"] { color: var(--olive-emph); }
/* inactive tab — triple-chevron "slide" affordance, flowing toward the tab */
/* directional chevron — centered at the seam, flows toward the inactive tab */
.olv-cbc .atg-seg::after {
  content: ""; position: absolute; top: 50%; left: 50%; margin: -4.5px 0 0 -11px;
  width: 22px; height: 9px; pointer-events: none; z-index: 2;
  background: center/contain no-repeat;
}
/* the "empty well" — the inactive half reads as a recessed, outlined slot waiting to be filled */
.olv-cbc .atg-seg::before {
  content: ""; position: absolute; top: 4px; bottom: 4px; width: calc(50% - 4px);
  border-radius: 100px; z-index: 0; pointer-events: none;
  box-shadow: inset 0 1px 5px rgba(0,0,0,.55), inset 0 0 0 1px rgba(156,176,136,.30);
  transition: left .4s var(--ease), right .4s var(--ease);
  animation: atgWell 2.6s ease-in-out infinite;
}
.olv-cbc #atgtab-a:checked ~ .atg-seg::before { left: auto; right: 4px; }
.olv-cbc #atgtab-b:checked ~ .atg-seg::before { left: 4px; right: auto; }
@keyframes atgWell {
  0%, 100% { box-shadow: inset 0 1px 5px rgba(0,0,0,.55), inset 0 0 0 1px rgba(156,176,136,.30); }
  50%      { box-shadow: inset 0 1px 5px rgba(0,0,0,.55), inset 0 0 0 1px rgba(156,176,136,.48), inset 0 0 11px rgba(156,176,136,.14); }
}
.olv-cbc #atgtab-a:checked ~ .atg-seg::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='9' viewBox='0 0 22 9'%3E%3Cg fill='none' stroke='%239CB088' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 1.5 6 4.5 2 7.5' opacity='.4'/%3E%3Cpath d='M9 1.5 13 4.5 9 7.5' opacity='.7'/%3E%3Cpath d='M16 1.5 20 4.5 16 7.5'/%3E%3C/g%3E%3C/svg%3E");
  animation: atgFlowR 1.4s ease-in-out infinite;
}
.olv-cbc #atgtab-b:checked ~ .atg-seg::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='9' viewBox='0 0 22 9'%3E%3Cg fill='none' stroke='%239CB088' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 1.5 16 4.5 20 7.5' opacity='.4'/%3E%3Cpath d='M13 1.5 9 4.5 13 7.5' opacity='.7'/%3E%3Cpath d='M6 1.5 2 4.5 6 7.5'/%3E%3C/g%3E%3C/svg%3E");
  animation: atgFlowL 1.4s ease-in-out infinite;
}
/* panels — pure CSS switch (no JS) */
.olv-cbc .atg-panel { display: none; }
.olv-cbc #atgtab-a:checked ~ .atg-panel[data-p="a"],
.olv-cbc #atgtab-b:checked ~ .atg-panel[data-p="b"] { display: block; animation: atgFade .4s var(--ease); }
@keyframes atgFade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
@keyframes atgFlowR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes atgFlowL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-3px); } }
/* mobile — full-width segmented control */
@media (max-width: 600px) {
  .olv-cbc .atg-seg { width: 100%; }
  .olv-cbc .atg-tab { padding: 14px 10px; font-size: 10px; letter-spacing: .1em; }
}
/* tap hint under the toggle — tells people it switches */
.olv-cbc .atg-hint {
  font-family: var(--font-mono); font-size: 9px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-3);
  display: flex; align-items: center; gap: 8px; margin: 0 0 28px; padding-left: 2px;
}
.olv-cbc .atg-hint span {
  display: inline-flex; width: 17px; height: 17px; border-radius: 50%;
  border: 1px solid var(--olive-emph); color: var(--olive-emph);
  align-items: center; justify-content: center; font-size: 10px; flex: none;
  animation: atgHintTap 1.6s ease-in-out infinite;
}
@keyframes atgHintTap { 0%, 100% { transform: scale(1); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }
/* one-time "peek" demo when the toggle scrolls into view */
.olv-cbc .atg-seg.atg-demo .atg-thumb { animation: atgPeek 1.15s cubic-bezier(.5,0,.3,1) .25s 2; }
@keyframes atgPeek { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(26px); } }
/* mobile — bump body copy one step for readability */
@media (max-width: 600px) {
  .olv-cbc .lead { font-size: 18px; line-height: 1.7; }
  .olv-cbc .body { font-size: 17px; line-height: 1.8; }
  .olv-cbc .atg-v { font-size: 17px; }
  .olv-cbc .atg-sub { font-size: 14px; }
  .olv-cbc .ing-intro { font-size: 17px; }
  .olv-cbc .ing-role { font-size: 16px; }
  .olv-cbc .fit-group-desc { font-size: 16px; }
  .olv-cbc .fit-acc-body { font-size: 16px; }
  .olv-cbc .step-body { font-size: 15px; }
}
.olv-cbc .atg-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border-emph); border-radius: 14px; overflow: hidden;
}
.olv-cbc .atg-cell { background: #1B1D22; padding: 26px clamp(20px, 2.2vw, 30px); border-top: 1px solid var(--border-emph); }
/* AT A GLANCE — uniform white body text across all cells */
@media (min-width: 601px) {
  .olv-cbc .atg-cell:nth-child(1), .olv-cbc .atg-cell:nth-child(2) { border-top: none; }
  .olv-cbc .atg-cell:nth-child(odd) { border-right: 1px solid var(--border-emph); }
}
@media (max-width: 600px) {
  .olv-cbc .atg-grid { grid-template-columns: 1fr; }
  .olv-cbc .atg-cell:nth-child(1) { border-top: none; }
}
.olv-cbc .atg-k {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--olive-emph);
  opacity: 1; display: block; margin-bottom: 10px;
}
.olv-cbc .atg-v {
  display: block;
  font-family: var(--font-body); font-size: 17px; font-weight: 500;
  line-height: 1.4; letter-spacing: -.01em; color: #F2F2EF;
}
.olv-cbc .atg-sub {
  display: block;
  font-family: var(--font-body); font-size: 12px; font-weight: 400;
  line-height: 1.5; color: var(--text-3); margin-top: 6px;
}

/* ─── TEWL DATA CARD (Section 02) ─── */
.olv-cbc .data-card {
  margin-top: 36px;
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--border-sub);
  border-radius: 12px;
}
.olv-cbc .data-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 11, 13, 0.12), 0 2px 4px rgba(10, 11, 13, 0.06);
  border-color: var(--border-emph);
}
@media (min-width: 768px) {
  .olv-cbc .data-card { padding: 36px 32px; }
}
.olv-cbc .data-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--border-sub);
  gap: 16px;
}
.olv-cbc .data-row:last-child { border-bottom: none; }
.olv-cbc .data-key {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-2);
}
.olv-cbc .data-val {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--olive-emph);
  text-align: right;
}
.olv-cbc .data-val-hi { color: var(--text-1); font-size: 17px; }

.olv-cbc .caption-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--text-3);
  margin-top: 18px;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════════════
   FIG 1.1 — LAMELLAR LIQUID CRYSTAL
   ═══════════════════════════════════════════════════ */
.olv-cbc .fig-container { margin: 36px 0 24px; display: flex; justify-content: center; }
.olv-cbc .llc {
  background: transparent;
  max-width: 480px;
  width: 100%;
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.olv-cbc .llc-fig {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--olive-emph);
  opacity: 0;
  animation: llcF .5s ease .3s forwards;
}
.olv-cbc .llc-center {
  flex: 1; display: flex; justify-content: center; align-items: center;
  opacity: 0; animation: llcF .6s ease .5s forwards;
}
.olv-cbc .llc-bars { display: flex; flex-direction: column; align-items: center; gap: 7px;
  width: 100%;
  filter: drop-shadow(0 0 3px rgba(138, 158, 120, 0.25));
}
.olv-cbc .llc-b { height: 18px; border-radius: 100px; opacity: 0; transform: scaleX(0.1); }
.olv-cbc .llc-lip {
  background: linear-gradient(90deg, #6B7C5E, #8A9E78);
  box-shadow: 0 0 24px rgba(107,124,94,0.3);
}
.olv-cbc .llc-wat {
  background: linear-gradient(90deg, #7A94A8, #96B0C4);
  box-shadow: 0 0 24px rgba(122,148,168,0.25);
}
.olv-cbc .llc-b:nth-child(1)  { width: 20.5%; }
.olv-cbc .llc-b:nth-child(2)  { width: 35%; }
.olv-cbc .llc-b:nth-child(3)  { width: 51%; }
.olv-cbc .llc-b:nth-child(4)  { width: 67%; }
.olv-cbc .llc-b:nth-child(5)  { width: 79%; }
.olv-cbc .llc-b:nth-child(6)  { width: 88%; }
.olv-cbc .llc-b:nth-child(7)  { width: 79%; }
.olv-cbc .llc-b:nth-child(8)  { width: 67%; }
.olv-cbc .llc-b:nth-child(9)  { width: 51%; }
.olv-cbc .llc-b:nth-child(10) { width: 35%; }
.olv-cbc .llc-b:nth-child(11) { width: 20.5%; }
.olv-cbc .llc-b:nth-child(6)  { animation: llcIn .6s cubic-bezier(.16,1,.3,1) .7s forwards; }
.olv-cbc .llc-b:nth-child(5), .olv-cbc .llc-b:nth-child(7)  { animation: llcIn .6s cubic-bezier(.16,1,.3,1) .85s forwards; }
.olv-cbc .llc-b:nth-child(4), .olv-cbc .llc-b:nth-child(8)  { animation: llcIn .6s cubic-bezier(.16,1,.3,1) 1.0s forwards; }
.olv-cbc .llc-b:nth-child(3), .olv-cbc .llc-b:nth-child(9)  { animation: llcIn .6s cubic-bezier(.16,1,.3,1) 1.15s forwards; }
.olv-cbc .llc-b:nth-child(2), .olv-cbc .llc-b:nth-child(10) { animation: llcIn .6s cubic-bezier(.16,1,.3,1) 1.3s forwards; }
.olv-cbc .llc-b:nth-child(1), .olv-cbc .llc-b:nth-child(11) { animation: llcIn .6s cubic-bezier(.16,1,.3,1) 1.45s forwards; }
.olv-cbc .llc-legend {
  display: flex; justify-content: center; align-items: center; gap: 32px;
  padding-top: 12px; opacity: 0; animation: llcF .5s ease 2.0s forwards;
}
.olv-cbc .llc-leg-item { display: flex; align-items: center; gap: 10px; }
.olv-cbc .llc-leg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.olv-cbc .llc-leg-lip { background: #8A9E78; }
.olv-cbc .llc-leg-wat { background: #96B0C4; }
.olv-cbc .llc-leg-text {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--text-2);
  text-transform: uppercase;
}
.olv-cbc .llc-b.llc-wv { animation: llcWv 2.4s ease-in-out infinite; transform: scaleX(1); opacity: 1; }
.olv-cbc .llc-b:nth-child(1).llc-wv  { animation-delay: 0s; }
.olv-cbc .llc-b:nth-child(2).llc-wv  { animation-delay: 0.12s; }
.olv-cbc .llc-b:nth-child(3).llc-wv  { animation-delay: 0.24s; }
.olv-cbc .llc-b:nth-child(4).llc-wv  { animation-delay: 0.36s; }
.olv-cbc .llc-b:nth-child(5).llc-wv  { animation-delay: 0.48s; }
.olv-cbc .llc-b:nth-child(6).llc-wv  { animation-delay: 0.6s; }
.olv-cbc .llc-b:nth-child(7).llc-wv  { animation-delay: 0.72s; }
.olv-cbc .llc-b:nth-child(8).llc-wv  { animation-delay: 0.84s; }
.olv-cbc .llc-b:nth-child(9).llc-wv  { animation-delay: 0.96s; }
.olv-cbc .llc-b:nth-child(10).llc-wv { animation-delay: 1.08s; }
.olv-cbc .llc-b:nth-child(11).llc-wv { animation-delay: 1.2s; }
@keyframes llcF { to { opacity: 1; } }
@keyframes llcIn { from { opacity: 0; transform: scaleX(0.1); } to { opacity: 1; transform: scaleX(1); } }
@keyframes llcWv {
  0%, 100% { transform: scaleX(1) translateX(0); opacity: 1; }
  30%      { transform: scaleX(1.07) translateX(-2px); opacity: .74; }
  50%      { transform: scaleX(1.11) translateX(0); opacity: .5; }
  70%      { transform: scaleX(1.07) translateX(2px); opacity: .74; }
}
@media (max-width: 500px) {
  .olv-cbc .llc { padding: 6px 0 4px; }
  .olv-cbc .llc-b { height: 14px; }
  .olv-cbc .llc-leg-text { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════
   FIG 1.2 v4 — Wide Brick & Mortar (thicker cream)
   ═══════════════════════════════════════════════════ */
.olv-cbc .fig12-wrap {
  margin: 36px 0 24px;
  display: flex;
  justify-content: center;
}
.olv-cbc .fig12 {
  background: transparent;
  width: 100%;
  max-width: 480px;
  padding: 8px 0 4px;
}
@media (max-width: 500px) {
  .olv-cbc .fig12 { padding: 6px 0 4px; }
}
.olv-cbc .fig12-id {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--olive-emph);
  margin-bottom: 24px;
}
.olv-cbc .fig12 svg { width: 100%; height: auto; display: block; }
/* FIG 1.2 v5 — 10층 수분 침투 캔버스 다이어그램 (코발트 잉크) */
.olv-cbc .cbc10-diagram{position:relative;width:100%;aspect-ratio:410/540;overflow:hidden;background:var(--bg)}
.olv-cbc .cbc10-diagram canvas,.olv-cbc .cbc10-diagram svg{position:absolute;inset:0;width:100%;height:100%}
.olv-cbc .cbc10-diagram svg{pointer-events:none}
.olv-cbc .fig12 .surface {
  fill: url(#waterGradV4);
  filter: drop-shadow(0 0 12px rgba(122,148,168,0.7));
}
.olv-cbc .fig12 .surface-lipid {
  fill: url(#lipidGradV13);
  filter: drop-shadow(0 0 6px rgba(138,158,120,0.55));
}
.olv-cbc .fig12 .cream-line {
  fill: url(#waterGradV4);
  filter: drop-shadow(0 0 6px rgba(122,148,168,0.55));
}
.olv-cbc .fig12 .brick {
  fill: #B89460;
  stroke: #E5C580;
  stroke-width: 1.2;
  filter: drop-shadow(0 0 5px rgba(229,197,128,0.4));
}
.olv-cbc .fig12 .boundary {
  stroke: #3A3C42;
  stroke-width: .8;
  stroke-dasharray: 3 3;
  fill: none;
}
.olv-cbc .fig12 .label-text {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 1.2px;
  fill: var(--text-3);
}
.olv-cbc .fig12 .enter {
  opacity: 0;
  transform-origin: center;
  transform: scaleX(0.3);
}
.olv-cbc .fig12 .surface.enter { animation: f12Enter .55s cubic-bezier(.16,1,.3,1) .3s forwards; }
.olv-cbc .fig12 .surface-lipid.enter { animation: f12Enter .55s cubic-bezier(.16,1,.3,1) .42s forwards; }
.olv-cbc .fig12 .cream-line.enter:nth-of-type(1)  { animation: f12Enter .5s cubic-bezier(.16,1,.3,1) .50s forwards; }
.olv-cbc .fig12 .cream-line.enter:nth-of-type(2)  { animation: f12Enter .5s cubic-bezier(.16,1,.3,1) .65s forwards; }
.olv-cbc .fig12 .cream-line.enter:nth-of-type(3)  { animation: f12Enter .5s cubic-bezier(.16,1,.3,1) .80s forwards; }
.olv-cbc .fig12 .cream-line.enter:nth-of-type(4)  { animation: f12Enter .5s cubic-bezier(.16,1,.3,1) .95s forwards; }
.olv-cbc .fig12 .cream-line.enter:nth-of-type(5)  { animation: f12Enter .5s cubic-bezier(.16,1,.3,1) 1.10s forwards; }
.olv-cbc .fig12 .cream-line.enter:nth-of-type(6)  { animation: f12Enter .5s cubic-bezier(.16,1,.3,1) 1.25s forwards; }
.olv-cbc .fig12 .cream-line.enter:nth-of-type(7)  { animation: f12Enter .5s cubic-bezier(.16,1,.3,1) 1.40s forwards; }
.olv-cbc .fig12 .cream-line.enter:nth-of-type(8)  { animation: f12Enter .5s cubic-bezier(.16,1,.3,1) 1.55s forwards; }
.olv-cbc .fig12 .cream-line.enter:nth-of-type(9)  { animation: f12Enter .5s cubic-bezier(.16,1,.3,1) 1.70s forwards; }
.olv-cbc .fig12 .cream-line.enter:nth-of-type(10) { animation: f12Enter .5s cubic-bezier(.16,1,.3,1) 1.85s forwards; }
.olv-cbc .fig12 .brick.enter { animation: f12Fade .4s ease forwards; transform: scaleX(1); }
.olv-cbc .fig12 .brick.enter.r1  { animation-delay: .58s; }
.olv-cbc .fig12 .brick.enter.r2  { animation-delay: .73s; }
.olv-cbc .fig12 .brick.enter.r3  { animation-delay: .88s; }
.olv-cbc .fig12 .brick.enter.r4  { animation-delay: 1.03s; }
.olv-cbc .fig12 .brick.enter.r5  { animation-delay: 1.18s; }
.olv-cbc .fig12 .brick.enter.r6  { animation-delay: 1.33s; }
.olv-cbc .fig12 .brick.enter.r7  { animation-delay: 1.48s; }
.olv-cbc .fig12 .brick.enter.r8  { animation-delay: 1.63s; }
.olv-cbc .fig12 .brick.enter.r9  { animation-delay: 1.78s; }
.olv-cbc .fig12 .brick.enter.r10 { animation-delay: 1.93s; }
.olv-cbc .fig12 .boundary.enter,
.olv-cbc .fig12 .label-text.enter { animation: f12Fade .5s ease 2.1s forwards; transform: scaleX(1); }
.olv-cbc .fig12 .cream-line.wv,
.olv-cbc .fig12 .surface.wv,
.olv-cbc .fig12 .surface-lipid.wv {
  animation: f12Pulse 3.2s ease-in-out infinite;
  transform: scaleX(1);
  opacity: 1;
}
.olv-cbc .fig12 .cream-line.wv:nth-of-type(1)  { animation-delay: 0s; }
.olv-cbc .fig12 .cream-line.wv:nth-of-type(2)  { animation-delay: 0.15s; }
.olv-cbc .fig12 .cream-line.wv:nth-of-type(3)  { animation-delay: 0.30s; }
.olv-cbc .fig12 .cream-line.wv:nth-of-type(4)  { animation-delay: 0.45s; }
.olv-cbc .fig12 .cream-line.wv:nth-of-type(5)  { animation-delay: 0.60s; }
.olv-cbc .fig12 .cream-line.wv:nth-of-type(6)  { animation-delay: 0.75s; }
.olv-cbc .fig12 .cream-line.wv:nth-of-type(7)  { animation-delay: 0.90s; }
.olv-cbc .fig12 .cream-line.wv:nth-of-type(8)  { animation-delay: 1.05s; }
.olv-cbc .fig12 .cream-line.wv:nth-of-type(9)  { animation-delay: 1.20s; }
.olv-cbc .fig12 .cream-line.wv:nth-of-type(10) { animation-delay: 1.35s; }
@keyframes f12Fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes f12Enter { from { opacity: 0; transform: scaleX(0.3); } to { opacity: 1; transform: scaleX(1); } }
@keyframes f12Pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .55; }
}
.olv-cbc .fig12-legend {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #2A2A2A;
  opacity: 0;
  animation: f12Fade .5s ease 2.2s forwards;
}
.olv-cbc .fig12-leg-item { display: flex; align-items: center; gap: 10px; }
.olv-cbc .fig12-leg-dot { width: 11px; height: 11px; border-radius: 50%; }
.olv-cbc .fig12-leg-cream {
  background: linear-gradient(135deg, #7A94A8, #96B0C4);
  box-shadow: 0 0 8px rgba(122,148,168,0.5);
}
.olv-cbc .fig12-leg-corneo {
  background: linear-gradient(135deg, #B89460, #E5C580);
  box-shadow: 0 0 10px rgba(229,197,128,0.55);
}
.olv-cbc .fig12-leg-text {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-2);
}
.olv-cbc .fig12-leg-sub {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--text-3);
  margin-left: 4px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ═══════════════════════════════════════════════════
   CLINICAL CARD — 통일 디자인 (Section 04 + 06)
   ═══════════════════════════════════════════════════ */
.olv-cbc .clinical-card {
  margin-top: 36px;
  padding: 40px 28px 32px;
  background: #0E0E0E;
  border: 1px solid var(--border-sub);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.olv-cbc .clinical-card:hover {
  border-color: var(--olive-emph);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 12px 32px rgba(0,0,0,.16);
}
@media (min-width: 768px) {
  .olv-cbc .clinical-card { padding: 48px 40px 40px; }
}
.olv-cbc .clinical-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #96B0C4, transparent);
}
.olv-cbc .clinical-title {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--olive-emph);
  margin-bottom: 24px;
}

/* Meta block — TEST/PANEL/METHOD/STATS */
.olv-cbc .clinical-meta {
  padding: 18px 0 22px;
  margin-bottom: 8px;
  border-top: 1px solid var(--border-sub);
  border-bottom: 1px solid var(--border-sub);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.olv-cbc .clinical-meta-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: baseline;
}
@media (min-width: 768px) {
  .olv-cbc .clinical-meta-row {
    grid-template-columns: 80px 1fr;
    gap: 20px;
  }
}
.olv-cbc .clinical-meta-key {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive-emph);
}
.olv-cbc .clinical-meta-val {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-2);
  line-height: 1.55;
}

/* Data rows */
.olv-cbc .clinical-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border-sub);
}
@media (min-width: 600px) {
  .olv-cbc .clinical-row {
    grid-template-columns: 200px 1fr auto;
    align-items: baseline;
    gap: 28px;
  }
}
@media (min-width: 768px) {
  .olv-cbc .clinical-row {
    grid-template-columns: 220px 1fr auto;
  }
}
.olv-cbc .clinical-num {
  font-family: var(--font-hero);
  font-size: 45px;
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1;
  background: linear-gradient(180deg, #FFFFFF 0%, #6A6A66 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  white-space: nowrap;
  padding-right: .15em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
@media (min-width: 768px) {
  .olv-cbc .clinical-num { font-size: 48px; }
}
.olv-cbc .clinical-lbl {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-1);
}
.olv-cbc .clinical-row-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.olv-cbc .clinical-foot {
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ─── DERMATEST HERO Card ─── */
.olv-cbc .ev-hero {
  margin-top: 48px;
  padding: 40px 28px 36px;
  background: var(--surface);
  border: 1px solid var(--border-emph);
  border-radius: 14px;
}
@media (min-width: 768px) {
  .olv-cbc .ev-hero { padding: 48px 40px 44px; }
}
/* Dermatest 로고 (실제 이미지) - 10% 축소, 좌측 정렬 */
.olv-cbc .ev-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 28px 0;
  width: 144px;
  height: 144px;
}
@media (min-width: 768px) {
  .olv-cbc .ev-logo {
    width: 180px;
    height: 180px;
  }
}
.olv-cbc .ev-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.olv-cbc .ev-h-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--olive-emph);
  margin-bottom: 14px;
}
.olv-cbc .ev-h-title {
  font-family: var(--font-hero);
  font-weight: 600;
  font-size: 32px;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--text-1);
  margin-bottom: 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #B8B8B0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
@media (min-width: 768px) {
  .olv-cbc .ev-h-title { font-size: 45px; }
}
.olv-cbc .ev-h-rating {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-1);
  margin-bottom: 28px;
}
.olv-cbc .ev-h-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--border-sub);
}
.olv-cbc .ev-h-list li {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--text-2);
  display: flex;
  gap: 12px;
  line-height: 1.6;
}
.olv-cbc .ev-h-list li::before {
  content: '·';
  color: var(--olive-emph);
  font-weight: 600;
  flex-shrink: 0;
}
.olv-cbc .ev-h-foot {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--border-sub);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ─── INGREDIENT TABLE (LIGHT) — v5 접힘 메뉴 ─── */
.olv-cbc .ing-intro {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-l-2);
  margin-bottom: 36px;
  max-width: 600px;
}
/* details/summary 토글 버튼 */
.olv-cbc .ing-details {
  margin-top: 8px;
}
.olv-cbc .ing-toggle {
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  background: #FFFFFF;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.olv-cbc .ing-toggle::-webkit-details-marker { display: none; }
.olv-cbc .ing-toggle:hover { background: #FAFAF8; border-color: #B8B8B0; }
.olv-cbc .ing-toggle-label { display: flex; flex-direction: column; gap: 4px; }
.olv-cbc .ing-toggle-main {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 16px;
  color: var(--text-l-1);
}
.olv-cbc .ing-toggle-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-l-3);
}
.olv-cbc .ing-toggle-arrow {
  font-family: var(--font-mono);
  font-size: 22px;
  color: var(--olive-light);
  transition: transform var(--dur) var(--ease);
  flex-shrink: 0;
  line-height: 1;
}
.olv-cbc details[open] .ing-toggle-arrow { transform: rotate(180deg); }
.olv-cbc .ing-table {
  margin-top: 28px;
  padding-top: 4px;
  animation: ingExpand .4s ease forwards;
  max-height: 600px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--olive-light) transparent;
}

.ing-table::-webkit-scrollbar {
  width: 4px;
}
.ing-table::-webkit-scrollbar-track {
  background: transparent;
}
.ing-table::-webkit-scrollbar-thumb {
  background: var(--olive-light);
  border-radius: 2px;
}

@media (max-width: 768px) {
  .ing-table {
    max-height: 400px;
    padding-right: 6px;
  }
}
@keyframes ingExpand {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.olv-cbc .ing-thead {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-light);
}
.olv-cbc .ing-th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-l-3);
}
.olv-cbc .ing-row {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-light-sub);
  align-items: start;
}
@media (min-width: 768px) {
  .olv-cbc .ing-row { grid-template-columns: 260px 1fr; gap: 32px; padding: 22px 0; }
  .olv-cbc .ing-thead { grid-template-columns: 260px 1fr; gap: 32px; }
}
.olv-cbc .ing-name { display: flex; flex-direction: column; gap: 4px; }
.olv-cbc .ing-kor {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-l-1);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.olv-cbc .ing-lat {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--text-l-3);
}
.olv-cbc .ing-badge {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 3px;
  background: var(--olive-light);
  color: #F0F0EE;
}
.olv-cbc .ing-role {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-l-2);
}
.olv-cbc .ing-role strong { font-weight: 500; color: var(--text-l-1); }

/* ─── SKIN TYPE FIT v10 — 2그룹 카드 ─── */
.olv-cbc .fit-groups {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .olv-cbc .fit-groups {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}
.olv-cbc .fit-group {
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--border-sub);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.olv-cbc .fit-group.recommended {
  border-color: var(--olive);
}
.olv-cbc .fit-group-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--olive-emph);
}
.olv-cbc .fit-group.conditional .fit-group-tag { color: var(--text-3); }

.olv-cbc .fit-group-title {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.35;
  color: var(--text-1);
}
.olv-cbc .fit-group-types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0;
}
.olv-cbc .fit-type-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 100px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border-sub);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-2);
}
.olv-cbc .fit-type-chip strong {
  font-weight: 600;
  color: var(--text-1);
  letter-spacing: 0;
  margin-right: 2px;
}
.olv-cbc .fit-group-desc {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
  color: var(--text-2);
}
.olv-cbc .fit-group-desc strong { color: var(--text-1); font-weight: 500; }
.olv-cbc .fit-group-note {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-sub);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive-emph);
}
.olv-cbc .fit-group.conditional .fit-group-note { color: var(--text-3); }

/* ─── SKIN TYPE FIT (v9 자바라 - deprecated, kept for backward) ─── */
.olv-cbc .fit-acc {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
}
.olv-cbc .fit-item {
  border-bottom: 1px solid var(--border-sub);
  transition: background var(--dur) var(--ease);
}
.olv-cbc .fit-item:first-child { border-top: 1px solid var(--border-sub); }
.olv-cbc .fit-item[open] {
  background: rgba(255,255,255,0.015);
}
.olv-cbc .fit-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 4px;
  display: grid;
  grid-template-columns: 90px auto 1fr auto;
  gap: 14px;
  align-items: center;
  transition: background var(--dur) var(--ease);
}
@media (min-width: 600px) {
  .olv-cbc .fit-item summary {
    grid-template-columns: 110px 60px 1fr auto;
    gap: 24px;
    padding: 26px 8px;
  }
}
.olv-cbc .fit-item summary::-webkit-details-marker { display: none; }
.olv-cbc .fit-item summary:hover .fit-acc-arrow { color: var(--olive-emph); }

.olv-cbc .fit-acc-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.olv-cbc .fit-item.core .fit-acc-tag { color: var(--olive-emph); }
.olv-cbc .fit-item.priority .fit-acc-tag { color: var(--olive-emph); opacity: .75; }
.olv-cbc .fit-item.conditional .fit-acc-tag { color: var(--text-3); }
.olv-cbc .fit-acc-type {
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-1);
  line-height: 1;
}
@media (min-width: 600px) {
  .olv-cbc .fit-acc-type { font-size: 26px; }
}
.olv-cbc .fit-acc-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
}
.olv-cbc .fit-acc-arrow {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--text-3);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
  line-height: 1;
}
.olv-cbc .fit-item[open] .fit-acc-arrow {
  transform: rotate(180deg);
  color: var(--olive-emph);
}
.olv-cbc .fit-acc-body {
  padding: 0 4px 22px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-2);
  animation: fitExpand .35s ease forwards;
}
@media (min-width: 600px) {
  .olv-cbc .fit-acc-body {
    padding: 0 8px 28px 178px;
  }
}
@keyframes fitExpand {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ─── SKIN TYPE FIT (deprecated v8 grid - kept for backward) ─── */
.olv-cbc .fit-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 768px) {
  .olv-cbc .fit-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (min-width: 1024px) {
  .olv-cbc .fit-grid { grid-template-columns: repeat(3, 1fr); }
}
.olv-cbc .fit-cell {
  padding: 26px 22px;
  background: var(--surface);
  border: 1px solid var(--border-sub);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.olv-cbc .fit-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 11, 13, 0.15);
}
.olv-cbc .fit-cell.core { border-color: var(--olive); }
.olv-cbc .fit-tag {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.olv-cbc .fit-cell.core .fit-tag { color: var(--olive-emph); }
.olv-cbc .fit-cell.priority .fit-tag { color: var(--olive-emph); }
.olv-cbc .fit-cell.conditional .fit-tag { color: var(--text-3); }
.olv-cbc .fit-type {
  font-family: var(--font-mono);
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--text-1);
  margin-top: 6px;
}
.olv-cbc .fit-name {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text-1);
  margin-top: 2px;
}
.olv-cbc .fit-desc {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-2);
  margin-top: 10px;
}

/* ─── HOW TO USE STEPS (LIGHT) ─── */
.olv-cbc .steps {
  margin-top: 48px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
@media (min-width: 768px) {
  .olv-cbc .steps { grid-template-columns: repeat(3, 1fr); gap: 28px; }
}
.olv-cbc .step { padding-top: 22px; border-top: 1px solid var(--border-light); }
.olv-cbc .step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--olive-light);
  margin-bottom: 14px;
}
.olv-cbc .step-title {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--text-l-1);
  margin-bottom: 10px;
}
.olv-cbc .step-body {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text-l-2);
}

/* ─── REFERENCES ─── */
/* ─── REFERENCES (v6 작게) ─── */
.olv-cbc .sec-refs {
  padding: 56px 24px 64px;
  border-top: 1px solid var(--border-sub);
}
@media (min-width: 768px) {
  .olv-cbc .sec-refs { padding: 72px 48px 88px; }
}
.olv-cbc .sec-refs .sec-inner {
  max-width: 720px;
}
.olv-cbc .refs-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-sub);
}
.olv-cbc .ref-list { margin-top: 48px; display: flex; flex-direction: column; }
.olv-cbc .ref {
  padding: 22px 0;
  border-bottom: 1px solid var(--border-sub);
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  align-items: start;
}
.olv-cbc .sec-refs .ref-list { margin-top: 0; display: flex; flex-direction: column; }
.olv-cbc .sec-refs .ref {
  padding: 14px 0;
  border-bottom: 1px solid #1A1B1F;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 12px;
  align-items: start;
}
.olv-cbc .sec-refs .ref-num {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--text-4);
  padding-top: 4px;
}
.olv-cbc .sec-refs .ref-body {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-4);
  letter-spacing: .01em;
}
.olv-cbc .sec-refs .ref-body .title {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
  display: block;
  margin-bottom: 3px;
  letter-spacing: 0;
}
.olv-cbc .sec-refs .ref-body .pmid { color: var(--text-3); font-weight: 500; }

/* ─── LEGAL (사용상 주의사항 + 전성분) ─── */
.olv-cbc .legal {
  padding: 56px 24px 80px;
  border-top: 1px solid var(--border-sub);
}
@media (min-width: 768px) {
  .olv-cbc .legal { padding: 72px 48px 96px; }
}
.olv-cbc .legal-inner {
  max-width: 720px;
  margin: 0 auto;
}
.olv-cbc .legal-eyebrow {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border-sub);
}
.olv-cbc .legal-block + .legal-block { margin-top: 40px; }
.olv-cbc .legal-block h4 {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-3);
  margin-bottom: 14px;
  letter-spacing: 0;
}
.olv-cbc .legal-text {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-4);
}
.olv-cbc .legal-text + .legal-text { margin-top: 8px; }
.olv-cbc .legal-sub {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.85;
  color: var(--text-4);
  padding-left: 18px;
}
.olv-cbc .legal-ingredients {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.95;
  color: var(--text-4);
  word-break: keep-all;
}

/* ─── FOOTER ─── */
.olv-cbc .foot { padding: 56px 24px; border-top: 1px solid var(--border-sub); text-align: center; }
.olv-cbc .foot-mark {
  font-family: var(--font-hero);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-1);
  margin-bottom: 8px;
}
.olv-cbc .foot-sub {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
}


  /* ─── Section Image (v20.2) — 흰선 21px 제거됨 ─── */
  .sec-image {
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -96px;        /* 모바일: .sec padding-top 96px 상쇄 */
    margin-bottom: 48px;
    overflow: hidden;
  }
  .sec-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  /* Hero 이미지는 .hero padding(120/180) 기준 */
  .hero-image {
    display: block;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: -120px;       /* 모바일: .hero padding-top 120px 상쇄 */
    margin-bottom: 48px;
    overflow: hidden;
  }
  .hero-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
  }
  @media (min-width: 768px) {
    .sec-image {
      margin-top: -140px;     /* .sec padding-top 140px */
      margin-bottom: 80px;
    }
    .hero-image {
      margin-top: -180px;     /* .hero padding-top 180px */
      margin-bottom: 80px;
    }
  }

/* ═══ split block ═══ */

html,body{background:#0A0B0D;margin:0}

/* ═══ split block ═══ */

/* ① 애플식 공간 — 섹션 호흡 (v22: 과도 여백 정돈 · 밀도 회복) */
.olv-cbc .sec{ padding-top:clamp(76px,10.5vh,138px); padding-bottom:clamp(76px,10.5vh,138px); }
.olv-cbc .trust{ padding-top:clamp(64px,8.5vh,104px); padding-bottom:clamp(64px,8.5vh,104px); }
.olv-cbc .sec-inner > .body{ margin-top:30px; }
.olv-cbc .fig12-wrap, .olv-cbc .llc-wrap, .olv-cbc .sec-image{ margin-top:clamp(40px,7vh,84px); }
/* ② "+" 펼치기 — v20 기존 ing-toggle 미감 계승 */
.olv-cbc .olvx{ margin-top:34px; border-top:1px solid rgba(255,255,255,.12); }
.olv-cbc .sec-light .olvx, .olv-cbc .ev-hero .olvx{ border-top-color:var(--border-light); }
.olv-cbc .olvx>summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 2px; font-family:var(--font-mono,'JetBrains Mono',monospace);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-3); transition:color .3s; }
.olv-cbc .sec-light .olvx>summary{ color:var(--text-l-3); }
.olv-cbc .olvx>summary:hover{ color:var(--olive-200); }
.olv-cbc .sec-light .olvx>summary:hover{ color:var(--olive-light); }
.olv-cbc .olvx>summary::-webkit-details-marker{ display:none; }
.olv-cbc .olvx .olvx-plus{ font-size:18px; line-height:1; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.olv-cbc .olvx[open] .olvx-plus{ transform:rotate(45deg); }
.olv-cbc .olvx>div{ overflow:hidden; animation:olvxR .5s cubic-bezier(.16,1,.3,1); }
@keyframes olvxR{ from{opacity:0;transform:translateY(-6px)} to{opacity:1;transform:none} }
/* ③ 가벼운 스크롤 리빌 (핀 고정 없음 · 자연 흐름) */
.olv-cbc .olvx-rv{ opacity:0; transform:translateY(22px); transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1s cubic-bezier(.16,1,.3,1); }
.olv-cbc .olvx-rv.in{ opacity:1; transform:none; }
.olv-cbc .hero-image{ will-change:transform; }
@media (prefers-reduced-motion:reduce){
  .olv-cbc .olvx-rv{opacity:1;transform:none;transition:none}
  .olv-cbc .olvx>div{animation:none}
}
/* ════ v22 · 챕터 리듬 — 끊김 없는 다크 스크롤을 장(章) 단위로 분절
        (copy·폰트·컬러 언어 불변 · 기존 토큰만 사용) ════ */
/* ════ v22 챕터 구분선 제거 — 이음매 없는 다크 스크롤 (여백으로만 분절) ════ */
.olv-cbc .sec-light{ border-top:1px solid var(--border-light-sub); }

/* ═══ split block ═══ */

/* 스펙 → 가로 스펙 레일 (2×3 그리드 → 흐르는 한 줄~두 줄) */
/* 스펙 → Rhode식 분할 리스트 (구매 결정 항목 · 디자인 언어 동일) */
.olv-cbc .hero-meta{ display:flex !important; flex-direction:column; gap:0;
  margin-top:clamp(30px,4.5vh,44px); max-width:520px; }
.olv-cbc .hero-meta .meta-cell{ display:flex; flex-direction:column; gap:7px;
  padding:15px 0; border-top:1px solid var(--border-sub); }
.olv-cbc .hero-meta .meta-cell:last-child{ border-bottom:1px solid var(--border-sub); }
.olv-cbc .hero-meta .meta-label{ font-size:10px; letter-spacing:.18em; opacity:.72; }
.olv-cbc .hero-meta .meta-value{ font-size:15px; line-height:1.42; letter-spacing:.01em; white-space:normal; }
/* 인증 → 가로 리듬: 더 일찍 가로로, 한 줄에 가깝게 · 설명은 한 단계 죽임 */
.olv-cbc .trust{ padding-top:clamp(54px,8vh,90px) !important; padding-bottom:clamp(54px,8vh,90px) !important; }
.olv-cbc .trust-grid{ gap:28px 24px; }
@media(min-width:600px){ .olv-cbc .trust-grid{ grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px){ .olv-cbc .trust-grid{ grid-template-columns:repeat(6,1fr); gap:24px; } }
.olv-cbc .trust-desc{ opacity:.6; font-size:11px; line-height:1.55; }
/* 두 밴드를 하나의 크리덴셜 존처럼 — 사이 간격만 살짝 좁혀 흐름 연결 */
.olv-cbc .hero{ padding-bottom:clamp(40px,7vh,90px) !important; }

/* ═══ split block ═══ */

.olv-cbc .f12-svg{width:100%;height:auto;display:block;overflow:visible}
.olv-cbc .f12-ripple{transform-box:fill-box;transform-origin:center;animation:f12sink 4.4s cubic-bezier(.4,0,.5,1) infinite}
.olv-cbc .f12-ripple.r2{animation-delay:1.46s}.olv-cbc .f12-ripple.r3{animation-delay:2.93s}
.olv-cbc .f12-front{animation:f12sinkF 4.4s cubic-bezier(.4,0,.5,1) infinite}
@keyframes f12sink{0%{transform:translateY(0);opacity:0}8%{opacity:.6}96%{opacity:.5}100%{transform:translateY(388px);opacity:0}}
@keyframes f12sinkF{0%{transform:translateY(0);opacity:0}8%{opacity:.9}96%{opacity:.6}100%{transform:translateY(388px);opacity:0}}
.olv-cbc .f12-pool-rise{transform:translateY(16px);animation:f12rise 6.2s cubic-bezier(.33,1,.68,1) 3.2s forwards}
@keyframes f12rise{0%{transform:translateY(16px)}18%{transform:translateY(11px)}22%{transform:translateY(12px)}40%{transform:translateY(7px)}44%{transform:translateY(8px)}62%{transform:translateY(3px)}66%{transform:translateY(4px)}84%{transform:translateY(-1px)}88%{transform:translateY(1px)}100%{transform:translateY(0)}}
.olv-cbc .f12-pool-flow{animation:f12flow 6.5s linear infinite}
.olv-cbc .f12-pool-flow2{animation:f12flow2 9.2s linear infinite}
@keyframes f12flow{from{transform:translateX(0)}to{transform:translateX(-150px)}}
@keyframes f12flow2{from{transform:translateX(0)}to{transform:translateX(150px)}}
.olv-cbc .f12-wave{fill:#96B0C4;opacity:.5}
.olv-cbc .f12-wave2{fill:#7A94A8;opacity:.42}
.olv-cbc .f12-tick{stroke:#D4B07E;stroke-width:1.4;opacity:.5}
.olv-cbc .f12-tlab{font-family:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.01em;fill:#E4C893;opacity:1;stroke:#0A0B0D;stroke-width:3.2px;paint-order:stroke;stroke-linejoin:round}
.olv-cbc .f12-flab{font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.15em;fill:#8A8A82}
.olv-cbc .f12-dlab{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.12em;fill:#8A8A82;opacity:.5}
@media(prefers-reduced-motion:reduce){.olv-cbc .f12-ripple,.olv-cbc .f12-front{animation:none;opacity:.35}.olv-cbc .f12-pool-rise{animation:none;transform:translateY(0)}.olv-cbc .f12-pool-flow,.olv-cbc .f12-pool-flow2{animation:none}}

/* ═══ split block ═══ */

.olv-cbc #sec-lipid{ position:relative; overflow:hidden; min-height:calc(556px + 55vw); }
.olv-cbc #sec-lipid .sec-inner{ position:relative; z-index:2; }
.olv-cbc .l3-stage{ position:absolute; z-index:1; pointer-events:none; left:44px; right:auto; top:460px; bottom:auto; width:74vw; transform:none; aspect-ratio:1069/792; }
.olv-cbc .l3-stage img{ width:100%; height:100%; display:block; object-fit:contain; opacity:var(--l3o,0.5); -webkit-mask-image:linear-gradient(45deg,#000 var(--l3p,120%),transparent calc(var(--l3p,120%) + 30%)); mask-image:linear-gradient(45deg,#000 var(--l3p,120%),transparent calc(var(--l3p,120%) + 30%)); transform:translate3d(var(--l3x,0px),var(--l3y,0px),0) scale(var(--l3s,1)); filter:blur(var(--l3b,0px)); will-change:opacity,transform,mask-image,filter; }
/* §05 크림 — 데스크톱 */
@media (min-width:768px){ .olv-cbc #sec-lipid{ min-height:1000px; } .olv-cbc .l3-stage{ left:calc(50% - 395px); right:auto; top:310px; bottom:auto; width:760px; transform:none; } }
@media(prefers-reduced-motion:reduce){ .olv-cbc .l3-stage img{ opacity:.85; -webkit-mask-image:none; mask-image:none; transform:none; filter:none; } }
/* ═══ 아임웹 새니타이저 대응 — 에디터가 template 태그를 벗겨 노출되는 빌드 썸네일 svg 숨김(JS가 최종 제거).
   라이브 실측: 에디터가 svg를 <p>로 감싸므로 래퍼째 숨긴다. 1200x800 viewBox는 썸네일 전용. ═══ */
p:has(> svg[viewBox="0 0 1200 800"]){ display:none !important; }
svg[viewBox="0 0 1200 800"]{ display:none !important; }

/* ═══ 아임웹 테마 h1 크기 탈취 방어(라이브 실측 2026-07-18: 모바일 h1 51→22px로 덮임, 크기만 탈취·family는 생존) ═══ */
.olv-cbc h1 { font-size: 51px !important; line-height: 1.04 !important; letter-spacing: -.035em !important; font-weight: 500 !important; }
@media (min-width: 768px) {
  .olv-cbc h1 { font-size: 90px !important; }
}

/* ═══ 아임웹 다이렉트 컨텍스트 — 풀블리드(100vw 브레이크아웃)를 컨테이너 폭으로 캡.
   아임웹 상세 컬럼은 뷰포트 중앙 정렬이 아니라 calc(50%-50vw) 트릭이 어긋나 이미지가 111px+ 삐져나옴(idx=38 실측).
   .shop-content 조상은 아임웹에만 존재 → 단독/iframe 페이지엔 무영향. ═══ */
.shop-content .olv-cbc .hero-image,
.shop-content .olv-cbc .sec-image{
  width:auto !important;
  margin-left:-24px !important;   /* 모바일 .sec 좌우 패딩 상쇄 = 컨테이너 가장자리까지 */
  margin-right:-24px !important;
  max-width:none !important;
}
@media (min-width:768px){
  .shop-content .olv-cbc .hero-image,
  .shop-content .olv-cbc .sec-image{
    margin-left:-48px !important;  /* 데스크톱 .sec 좌우 패딩 48px 상쇄 */
    margin-right:-48px !important;
  }
}
.shop-content .olv-cbc .hero-image img,
.shop-content .olv-cbc .sec-image img{
  width:100% !important; max-width:100% !important; margin:0 !important;
}

/* ═══ 아임웹 다이렉트 — 히어로 위 삐짐 클립. .hero-image margin-top(-120/-180 상수)이 실제 .sec 패딩(clamp ~85px)보다 커서
   위 35~95px가 아임웹 상품명·탭을 덮음(단독 페이지에선 body 위라 안 보이던 부채). 클립하면 단독과 동일 보임새. ═══ */
.shop-content .olv-cbc .hero{ overflow:hidden !important; }

/* ─── 담긴 이미지 카드 (토너 방식 이식) — 풀블리드 sec-image 대신 라운드 카드 (SJ 2026-07-19) ─── */
.olv-cbc .photo-card { width: 100%; margin: 0 auto clamp(40px, 7vh, 84px); border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: transparent; }
.olv-cbc .photo-card img { display: block; width: 100%; height: 100%; object-fit: cover; }


/* ─── 사진 카드 상단 헤어라인 제거 (SJ 2026-07-21) ───────────────────────────
   원인: aspect-ratio 컨테이너(overflow:hidden)는 소수점 높이를 갖는데(예: 472.5px)
   그 안의 img는 height:100%로 정수 래스터에 반올림된다 → 클립 박스와 이미지 사이
   1px 미만 틈이 남고, 배경이 transparent라 지면(밝은 색)이 가로줄로 비친다.
   해법: 이미지를 사방 1px씩 넘치게 깔아 클립 박스를 완전히 덮는다(비율 손실 없음 — object-fit:cover).
   ※ 새 사진 카드를 만들 때 이 규칙을 함께 상속시킬 것. */
.olv-cbc .photo-card { position: relative; }
.olv-cbc .photo-card img {
  position: absolute; top: -1px; left: -1px;
  width: calc(100% + 2px); height: calc(100% + 2px);
  object-fit: cover; display: block;
  margin: 0 !important;   /* ★ 진짜 원인: 아임웹 테마가 img에 margin:5px 0 을 먹여 사진이 카드 안에서 아래로 밀렸다
                                 → 위쪽 5px 틈으로 지면색이 가로줄로 비침 (라이브 EN 실측 2026-07-21) */
}


/* ═══ 톱라인 — "00%가 경험한" 오프닝 헤드라인 (SJ 2026-07-28) · type-scale H2 31/38 · 큰 숫자=Inter ═══ */
.olv-cbc .olv-topline{background:#F7F7F6;padding:64px 24px 44px;text-align:center;}
.olv-cbc .olv-topline .tl-h{font-family:'Pretendard',sans-serif;font-size:31px;line-height:1.3;font-weight:500;letter-spacing:-.01em;color:#0A0B0D;max-width:680px;margin:0 auto;word-break:keep-all;}
.olv-cbc .olv-topline .tl-h b{font-family:'Inter','Pretendard',sans-serif;font-weight:600;letter-spacing:-.01em;}
.olv-cbc .olv-topline .tl-h sup{font-size:14px;color:#8A8C91;}
.olv-cbc .olv-topline .tl-cap{margin-top:16px;font-family:'JetBrains Mono',monospace;font-size:10px;line-height:1.7;letter-spacing:.02em;color:#8A8C91;}
@media(min-width:768px){ .olv-cbc .olv-topline .tl-h{font-size:38px;} }