/** Shopify CDN: Minification failed

Line 485:2 All "@import" rules must come first

**/
/*
 * Skin Barrier 101 — page styles.
 *
 * Scope rules
 * -----------
 * 1. All selectors are namespaced under a top-level container class:
 *      .sb101-hub       (hub page)
 *      .sb101-article   (article pages — added in Phase 2)
 *      .sb101-ingredient (ingredient pages — Phase 3)
 *      .sb101-skintype  (skin-type pages — Phase 4)
 *    This prevents collisions with the rest of the theme's short class names
 *    like .hero / .wrap / .ing-card.
 * 2. Theme layout (header/footer/main wrapper) is owned by layout/theme.liquid;
 *    do NOT add global html/body/nav/footer styles here.
 * 3. CSS variables are scoped to each container so different pages can later
 *    have different palettes (e.g. ingredient color_key).
 */

/* ───────────────────────────────────────
 * HUB
 * ─────────────────────────────────────── */

.sb101-hub {
  --yellow: #FBDC81;
  --yellow-dark: #7a6200;
  --beige: #F5E4D5;
  --sage: #849F78;
  --black: #111111;
  --white: #ffffff;
  --gray-50: #f7f6f3;
  --gray-100: #eceae4;
  --gray-200: #d8d5cc;
  --gray-400: #9e9b92;
  --gray-600: #6b6860;
  --font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  font-family: var(--font);
  background: var(--white);
  color: var(--black);
  -webkit-font-smoothing: antialiased;
}
.sb101-hub *,
.sb101-hub *::before,
.sb101-hub *::after { box-sizing: border-box; }

.sb101-hub a { color: inherit; }

/* ── BREADCRUMB row (sb101-crumb snippet wraps its own; just add max-width container) */
.sb101-hub__crumbs { max-width: 960px; margin: 0 auto; padding: 0 40px; }
@media (max-width: 768px) { .sb101-hub__crumbs { padding: 0 20px; } }

/* ── HERO ── */
.sb101-hub .hero { background: var(--yellow); padding: 64px 40px 56px; position: relative; overflow: hidden; }
.sb101-hub .hero::after {
  content: '101'; position: absolute; right: -16px; bottom: -48px;
  font-size: 220px; font-weight: 800; line-height: 1;
  color: rgba(0,0,0,0.055); pointer-events: none; user-select: none; letter-spacing: -8px;
}
.sb101-hub .hero-inner { max-width: 960px; margin: 0 auto; }
.sb101-hub .hero-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--yellow-dark); margin-bottom: 16px; opacity: .85; }
.sb101-hub .hero-title { font-size: 52px; font-weight: 800; letter-spacing: -2px; line-height: 1.0; color: var(--black); margin-bottom: 14px; }
.sb101-hub .hero-desc { font-size: 15px; color: #4d3e00; line-height: 1.65; max-width: 500px; margin-bottom: 28px; }
.sb101-hub .hero-stats { display: flex; align-items: center; gap: 20px; }
.sb101-hub .hero-stat { display: flex; align-items: center; gap: 8px; }
.sb101-hub .hero-stat-num { font-size: 22px; font-weight: 800; color: var(--black); }
.sb101-hub .hero-stat-label { font-size: 12px; color: var(--yellow-dark); line-height: 1.2; }
.sb101-hub .hero-divider { width: 1px; height: 28px; background: rgba(0,0,0,0.15); }

/* ── WRAPPER ── */
.sb101-hub .wrap { max-width: 960px; margin: 0 auto; padding: 0 40px; }

/* ── SECTION HEADER ── */
.sb101-hub .sec-head { display: flex; align-items: flex-end; justify-content: space-between; padding-top: 52px; margin-bottom: 0; }
.sb101-hub .sec-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; color: var(--gray-400); margin-bottom: 6px; }
.sb101-hub .sec-title { font-size: 24px; font-weight: 800; letter-spacing: -.5px; color: var(--black); }
.sb101-hub .rule { height: 1px; background: var(--gray-100); margin: 16px 0 0; }

.sb101-hub .ghost-btn {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--gray-600);
  border: 1px solid var(--gray-200); border-radius: 20px;
  padding: 7px 16px; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, color .15s; background: none; cursor: pointer; font-family: var(--font);
}
.sb101-hub .ghost-btn:hover { border-color: var(--black); color: var(--black); }

/* ── FAQ ── */
.sb101-hub .faq-list { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; }
.sb101-hub .faq-item { border: 1px solid var(--gray-100); border-radius: 10px; overflow: hidden; background: var(--white); transition: border-color .2s; }
.sb101-hub .faq-item:hover { border-color: var(--gray-200); }
.sb101-hub .faq-item.is-open { border-color: var(--black); }
.sb101-hub .faq-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: none; border: none; cursor: pointer; text-align: left; font-family: var(--font); }
.sb101-hub .faq-badge { font-size: 10px; font-weight: 700; background: var(--yellow); color: var(--yellow-dark); padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }
.sb101-hub .faq-q { font-size: 14px; font-weight: 600; color: var(--black); flex: 1; line-height: 1.4; text-align: left; }
.sb101-hub .faq-plus { font-size: 18px; font-weight: 300; color: var(--gray-400); transition: transform .2s, color .2s; line-height: 1; flex-shrink: 0; }
.sb101-hub .faq-item.is-open .faq-plus { transform: rotate(45deg); color: var(--black); }
.sb101-hub .faq-answer { max-height: 0; overflow: hidden; font-size: 14px; color: var(--gray-600); line-height: 1.75; transition: max-height .3s ease, padding .2s; padding: 0 20px; }
.sb101-hub .faq-item.is-open .faq-answer { max-height: 600px; padding: 14px 20px 18px; border-top: 1px solid var(--gray-100); }

/* ── ARTICLE SLIDER ── */
.sb101-hub .slider-wrap { position: relative; margin-top: 20px; }
.sb101-hub .slider-controls { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.sb101-hub .slider-counter { font-size: 12px; color: var(--gray-400); }
.sb101-hub .slider-counter strong { color: var(--black); font-weight: 700; }
.sb101-hub .slider-btns { display: flex; gap: 6px; }
.sb101-hub .slider-btn {
  width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--gray-200); background: var(--white);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: var(--gray-600); transition: border-color .15s, color .15s, background .15s;
}
.sb101-hub .slider-btn:hover { border-color: var(--black); color: var(--black); background: var(--gray-50); }
.sb101-hub .slider-btn:disabled { opacity: .3; cursor: not-allowed; }

.sb101-hub .slider-track-outer { overflow: hidden; }
.sb101-hub .slider-track {
  display: grid;
  grid-template-columns: repeat(16, calc(25% - 8px));
  gap: 10px;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
}

.sb101-hub .article-card {
  border: 1px solid var(--gray-100); border-radius: 12px;
  padding: 20px; background: var(--white);
  text-decoration: none; color: inherit;
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .15s, transform .15s;
  min-width: 0;
}
.sb101-hub .article-card:hover { border-color: var(--gray-200); transform: translateY(-2px); }
.sb101-hub .article-card.is-draft { opacity: .55; }
.sb101-hub .card-ep { font-size: 11px; font-weight: 700; color: var(--gray-200); letter-spacing: .5px; }
.sb101-hub .card-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.sb101-hub .card-tag { font-size: 10px; color: var(--gray-600); background: var(--gray-50); border: 1px solid var(--gray-100); padding: 2px 8px; border-radius: 20px; }
.sb101-hub .card-title { font-size: 14px; font-weight: 700; color: var(--black); line-height: 1.4; flex: 1; }
.sb101-hub .card-summary { font-size: 12px; color: var(--gray-600); line-height: 1.6; }
.sb101-hub .card-meta { font-size: 11px; color: var(--gray-400); margin-top: auto; padding-top: 8px; border-top: 1px solid var(--gray-100); }

.sb101-hub .slider-dots { display: flex; gap: 6px; justify-content: center; margin-top: 16px; }
.sb101-hub .slider-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-200); border: none; cursor: pointer; padding: 0; transition: background .15s, transform .15s; }
.sb101-hub .slider-dot.is-active { background: var(--black); transform: scale(1.3); }

/* ── INGREDIENT CARDS ── */
.sb101-hub .ing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.sb101-hub .ing-card { border-radius: 12px; padding: 22px 20px; cursor: pointer; text-decoration: none; color: inherit; transition: transform .2s; display: block; }
.sb101-hub .ing-card:hover { transform: translateY(-3px); }
.sb101-hub .ing-card.panthenol { background: #f0edf8; border: 1px solid #c8b8e8; }
.sb101-hub .ing-card.egf { background: #f9eff3; border: 1px solid #e8c4d0; }
.sb101-hub .ing-card.squalane { background: #fdf8e8; border: 1px solid #f0dc9a; }
.sb101-hub .ing-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.sb101-hub .ing-card.panthenol .ing-eyebrow { color: #5c3d99; }
.sb101-hub .ing-card.egf .ing-eyebrow { color: #9a4060; }
.sb101-hub .ing-card.squalane .ing-eyebrow { color: var(--yellow-dark); }
.sb101-hub .ing-name-en { font-size: 20px; font-weight: 800; color: var(--black); letter-spacing: -.3px; margin-bottom: 2px; }
.sb101-hub .ing-name-kr { font-size: 12px; font-weight: 500; color: var(--gray-600); margin-bottom: 12px; }
.sb101-hub .ing-desc { font-size: 12px; color: var(--gray-600); line-height: 1.6; margin-bottom: 14px; }
.sb101-hub .ing-link-row { display: flex; align-items: center; justify-content: space-between; }
.sb101-hub .ing-read { font-size: 12px; font-weight: 700; }
.sb101-hub .ing-card.panthenol .ing-read { color: #5c3d99; }
.sb101-hub .ing-card.egf .ing-read { color: #9a4060; }
.sb101-hub .ing-card.squalane .ing-read { color: var(--yellow-dark); }
.sb101-hub .ing-product { font-size: 10px; color: var(--gray-400); }

/* ── SKIN TYPE GRID ── */
.sb101-hub .skin-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 20px; }
.sb101-hub .skin-type-card {
  display: block; text-decoration: none; color: inherit;
  border-radius: 12px; padding: 22px 20px; cursor: pointer;
  transition: transform .2s;
  background: var(--skin-bg, #f5f9f4);
  border: 1px solid var(--skin-border, #d0e4cc);
  border-top: 3px solid var(--skin-accent, var(--sage));
}
.sb101-hub .skin-type-card:hover { transform: translateY(-3px); }
.sb101-hub .skin-type-card .ing-eyebrow,
.sb101-hub .skin-type-card .ing-read { color: var(--skin-accent, var(--sage)); }
.sb101-hub .skin-type-card .ing-name-kr { color: var(--gray-400); }
.sb101-hub .skin-type-card .ing-name-en { font-size: 20px; }

/* ── SEMINAR ── */
.sb101-hub .seminar-list { display: flex; flex-direction: column; gap: 4px; margin-top: 20px; }
.sb101-hub .seminar-row {
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px; border: 1px solid var(--gray-100);
  border-radius: 10px; text-decoration: none; color: inherit;
  transition: border-color .15s, background .15s;
}
.sb101-hub .seminar-row:hover { border-color: var(--gray-200); background: var(--gray-50); }
.sb101-hub .sem-num { font-size: 12px; font-weight: 700; color: var(--gray-200); min-width: 20px; }
.sb101-hub .sem-info { flex: 1; }
.sb101-hub .sem-meta { font-size: 11px; color: var(--gray-400); margin-bottom: 3px; }
.sb101-hub .sem-title { font-size: 14px; font-weight: 600; color: var(--black); line-height: 1.4; }
.sb101-hub .sem-badge { font-size: 10px; font-weight: 700; background: #ffeeee; color: #cc0000; padding: 3px 9px; border-radius: 20px; white-space: nowrap; border: 1px solid #ffcccc; }

/* ── CTA ── */
.sb101-hub .cta-wrap { padding: 52px 0 72px; }
.sb101-hub .cta-block { background: var(--black); border-radius: 16px; padding: 48px 52px; display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.sb101-hub .cta-eyebrow { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: #555; margin-bottom: 10px; }
.sb101-hub .cta-title { font-size: 26px; font-weight: 800; color: var(--white); letter-spacing: -.5px; margin-bottom: 6px; }
.sb101-hub .cta-sub { font-size: 13px; color: #666; }
.sb101-hub .cta-btns { display: flex; gap: 8px; flex-shrink: 0; }
.sb101-hub .btn-y {
  background: var(--yellow); color: var(--black);
  border: none; border-radius: 8px;
  padding: 13px 22px; font-family: var(--font); font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block;
}

/* ── MOBILE ── */
@media (max-width: 768px) {
  .sb101-hub .hero { padding: 48px 20px 44px; }
  .sb101-hub .hero::after { font-size: 120px; right: -8px; bottom: -24px; }
  .sb101-hub .hero-title { font-size: 36px; letter-spacing: -1px; }
  .sb101-hub .hero-desc { font-size: 14px; }
  .sb101-hub .hero-stats { gap: 14px; flex-wrap: wrap; }
  .sb101-hub .hero-stat-num { font-size: 18px; }

  .sb101-hub .wrap { padding: 0 20px; }

  .sb101-hub .sec-head { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 40px; }

  .sb101-hub .faq-btn { padding: 14px 16px; gap: 8px; }
  .sb101-hub .faq-q { font-size: 13px; }
  .sb101-hub .faq-badge { display: none; }

  .sb101-hub .slider-track { grid-template-columns: repeat(16, calc(85vw - 32px)); }
  .sb101-hub .slider-controls { margin-bottom: 12px; }

  .sb101-hub .ing-grid { grid-template-columns: 1fr; }

  .sb101-hub .skin-type-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 10px;
    padding-bottom: 12px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 20px;
    padding-right: 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .sb101-hub .skin-type-grid::-webkit-scrollbar { display: none; }
  .sb101-hub .skin-type-card {
    flex: 0 0 calc(80vw - 32px);
    scroll-snap-align: start;
    min-width: 0;
  }

  .sb101-hub .sem-title { font-size: 13px; }

  .sb101-hub .cta-block { flex-direction: column; align-items: flex-start; padding: 32px 24px; gap: 24px; }
  .sb101-hub .cta-title { font-size: 20px; }
  .sb101-hub .cta-btns { flex-direction: column; width: 100%; }
  .sb101-hub .btn-y { width: 100%; text-align: center; padding: 14px; }
}

@media (max-width: 480px) {
  .sb101-hub .hero-title { font-size: 30px; }
  .sb101-hub .sec-title { font-size: 20px; }
}


/* ───────────────────────────────────────
 * ARTICLE — Skin Barrier 101 article pages
 * Extracted from _artifacts/skin-barrier-101/ep01-…html
 * All selectors namespaced under .sb101-article
 * ─────────────────────────────────────── */


.sb101-article * { box-sizing: border-box; margin: 0; padding: 0; }
.sb101-article { font-family: 'Outfit', -apple-system, sans-serif; background: #fff; color: #111; line-height: 1.7; }

.sb101-article /* ── LAYOUT ── */
.page-wrap { max-width: 980px; margin: 0 auto; padding: 0 28px 6rem; }
.sb101-article .article-grid { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }

@media (max-width: 768px) {
  .sb101-article .page-wrap { padding: 0 16px 4rem; }
  .sb101-article .article-grid { grid-template-columns: 1fr; gap: 0; }
  .sb101-article .article-title { font-size: 24px !important; }
  .sb101-article .sidebar-desktop { display: none !important; }
  .sb101-article .mobile-toc-wrap, .sb101-article .mobile-series-wrap, .sb101-article .mobile-products-wrap { display: block !important; }
  .sb101-article .mobile-progress-bar { display: block !important; }
}
@media (min-width: 769px) {
  .sb101-article .sidebar-desktop { display: flex !important; }
  .sb101-article .mobile-toc-wrap, .sb101-article .mobile-series-wrap, .sb101-article .mobile-products-wrap, .sb101-article .mobile-progress-bar { display: none !important; }
}

.sb101-article /* ── PROGRESS (mobile) ── */
.mobile-progress-bar { display: none; height: 3px; background: #e5e5e0; }
.sb101-article .mobile-progress-fill { height: 3px; background: #FBDC81; width: 18%; transition: width 0.3s; }

.sb101-article /* ── BREADCRUMB ── */
.breadcrumb { font-size: 12px; color: #999; margin: 20px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sb101-article .breadcrumb a { color: #999; text-decoration: none; }
.sb101-article .breadcrumb a:hover { color: #111; }
.sb101-article .breadcrumb .sep { color: #ddd; }

.sb101-article /* ── SLUG / META BOX ── */
.dev-box { border: 0.5px dashed #d0cdc8; border-radius: 10px; padding: 14px 16px; margin-bottom: 28px; background: #fafaf8; }
.sb101-article .dev-box-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #aaa; margin-bottom: 10px; }
.sb101-article .dev-row { margin-bottom: 10px; }
.sb101-article .dev-row:last-child { margin-bottom: 0; }
.sb101-article .dev-key { font-size: 11px; color: #999; margin-bottom: 3px; }
.sb101-article .dev-val { font-size: 12.5px; color: #111; font-family: 'Courier New', monospace; background: #fff; border: 0.5px solid #e5e5e0; padding: 6px 10px; border-radius: 6px; word-break: break-all; line-height: 1.6; }

.sb101-article /* ── HEADER ── */
.series-badge { display: inline-block; background: #FBDC81; color: #5a4200; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; text-transform: uppercase; }
.sb101-article .article-title { font-size: 32px; font-weight: 800; line-height: 1.22; letter-spacing: -0.025em; color: #111; margin-bottom: 14px; }
.sb101-article .article-meta { display: flex; gap: 14px; font-size: 12.5px; color: #999; margin-bottom: 22px; flex-wrap: wrap; align-items: center; }
.sb101-article .meta-dot { width: 3px; height: 3px; background: #ccc; border-radius: 50%; }

.sb101-article /* ── YOUTUBE BANNER ── */
.yt-banner { display: flex; align-items: center; gap: 12px; background: #fafaf8; border: 0.5px solid #e5e5e0; border-left: 3px solid #FF0000; border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 32px; cursor: pointer; text-decoration: none; }
.sb101-article .yt-icon { width: 28px; height: 28px; background: #FF0000; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb101-article .yt-icon svg { width: 14px; height: 14px; }
.sb101-article .yt-text { font-size: 13px; font-weight: 500; color: #111; }
.sb101-article .yt-sub { font-size: 11.5px; color: #999; margin-top: 1px; }
.sb101-article .yt-arrow { margin-left: auto; font-size: 13px; color: #bbb; }

.sb101-article .article-divider { height: 0.5px; background: #e8e8e4; margin-bottom: 32px; }

.sb101-article /* ── MOBILE TOC ACCORDION ── */
.mobile-toc-wrap { display: none; margin-bottom: 22px; }
.sb101-article .toc-accordion { border: 0.5px solid #e5e5e0; border-radius: 10px; overflow: hidden; }
.sb101-article .toc-trigger { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #fafaf8; cursor: pointer; user-select: none; }
.sb101-article .toc-trigger-left { display: flex; align-items: center; gap: 8px; }
.sb101-article .toc-dot { width: 8px; height: 8px; background: #FBDC81; border-radius: 50%; }
.sb101-article .toc-label-txt { font-size: 12px; font-weight: 700; color: #111; text-transform: uppercase; letter-spacing: 0.06em; }
.sb101-article .toc-chevron { width: 16px; height: 16px; color: #999; transition: transform 0.2s; }
.sb101-article .toc-chevron.open { transform: rotate(180deg); }
.sb101-article .toc-body { display: none; padding: 8px 0; border-top: 0.5px solid #e5e5e0; }
.sb101-article .toc-body.open { display: block; }
.sb101-article .toc-item-mob { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px; color: #999; cursor: pointer; border-left: 2px solid transparent; line-height: 1.4; }
.sb101-article .toc-item-mob:hover { background: #fafaf8; color: #111; }
.sb101-article .toc-item-mob.active { color: #3d2d00; background: #FFF8E0; border-left-color: #FBDC81; font-weight: 600; }
.sb101-article .toc-n { font-size: 10px; color: #bbb; min-width: 18px; flex-shrink: 0; }
.sb101-article .toc-item-mob.active .toc-n { color: #8a6200; }

.sb101-article /* ── PROSE ── */
.prose { font-size: 15.5px; line-height: 1.85; color: #222; }
.sb101-article .prose h2 { font-size: 20px; font-weight: 800; margin: 2.8rem 0 1rem; padding-bottom: 7px; border-bottom: 2.5px solid #FBDC81; display: inline-block; line-height: 1.3; letter-spacing: -0.01em; color: #111; }
.sb101-article .prose h3 { font-size: 16px; font-weight: 700; margin: 1.8rem 0 0.7rem; color: #111; }
.sb101-article .prose p { margin-bottom: 1.1rem; }

.sb101-article /* callout */
.callout { border-left: 3px solid #FBDC81; border-radius: 0 8px 8px 0; background: #fffcf0; padding: 13px 18px; margin: 1.4rem 0; font-size: 14.5px; color: #333; }
.sb101-article .callout-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8a6200; margin-bottom: 6px; }

.sb101-article /* keyword pill */
.kw { background: #FBDC81; color: #3d2d00; font-weight: 700; padding: 1px 7px; border-radius: 10px; font-size: 0.92em; }

.sb101-article /* ── VISUAL ELEMENTS ── */

/* Diagnostic checklist box */
.check-box { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.6rem 0; }
.sb101-article .check-box-header { background: #111; color: #FBDC81; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 16px; }
.sb101-article .check-box-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.sb101-article .check-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: #333; line-height: 1.5; }
.sb101-article .check-icon { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; font-size: 11px; }
.sb101-article .check-icon.yes { background: #FBDC81; color: #3d2d00; font-weight: 800; }
.sb101-article .check-icon.no { background: #f0e0e0; color: #a02020; font-weight: 800; }

.sb101-article /* Barrier diagram (SVG) */
.diagram-wrap { margin: 2rem 0; border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .diagram-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #999; padding: 10px 16px; background: #fafaf8; border-bottom: 0.5px solid #e5e5e0; }
.sb101-article .diagram-caption { font-size: 12px; color: #999; padding: 10px 16px; border-top: 0.5px solid #e5e5e0; background: #fafaf8; line-height: 1.5; }

.sb101-article /* Progress graph */
.graph-wrap { margin: 2rem 0; border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .graph-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #999; padding: 10px 16px; background: #fafaf8; border-bottom: 0.5px solid #e5e5e0; }
.sb101-article .graph-caption { font-size: 12px; color: #999; padding: 10px 16px; border-top: 0.5px solid #e5e5e0; background: #fafaf8; line-height: 1.5; }

.sb101-article /* 3-step routine visual */
.routine-steps { display: flex; gap: 0; margin: 1.6rem 0; border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .routine-step { flex: 1; padding: 16px 14px; text-align: center; border-right: 0.5px solid #e5e5e0; position: relative; }
.sb101-article .routine-step:last-child { border-right: none; }
.sb101-article .step-num { font-size: 10px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.sb101-article .step-icon-wrap { width: 40px; height: 40px; background: #FBDC81; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.sb101-article .step-icon-wrap svg { width: 20px; height: 20px; }
.sb101-article .step-name { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 4px; }
.sb101-article .step-desc { font-size: 11px; color: #999; line-height: 1.4; }
.sb101-article .step-arrow { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: #FBDC81; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #3d2d00; font-weight: 700; z-index: 1; }
@media (max-width: 480px) {
  .sb101-article .routine-steps { flex-direction: column; }
  .sb101-article .routine-step { border-right: none; border-bottom: 0.5px solid #e5e5e0; }
  .sb101-article .routine-step:last-child { border-bottom: none; }
  .sb101-article .step-arrow { display: none; }
}

.sb101-article /* GEO FAQ block */
.geo-faq { margin: 2.8rem 0; }
.sb101-article .geo-faq-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #999; margin-bottom: 12px; }
.sb101-article .faq-item { border: 0.5px solid #e5e5e0; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.sb101-article .faq-q { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 13px 16px; cursor: pointer; user-select: none; background: #fafaf8; }
.sb101-article .faq-q-text { font-size: 14px; font-weight: 600; color: #111; line-height: 1.45; }
.sb101-article .faq-toggle { font-size: 16px; color: #FBDC81; font-weight: 700; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.sb101-article .faq-a { display: none; padding: 13px 16px; font-size: 13.5px; color: #555; line-height: 1.7; border-top: 0.5px solid #e5e5e0; background: #fff; }
.sb101-article .faq-a.open { display: block; }

.sb101-article /* Summary box */
.summary-box { background: #111; color: #fff; border-radius: 14px; padding: 26px 28px; margin-top: 3rem; }
.sb101-article .summary-title { color: #FBDC81; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 16px; }
.sb101-article .summary-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.sb101-article .summary-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: #e0e0e0; }
.sb101-article .chk { width: 19px; height: 19px; background: #FBDC81; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.sb101-article .chk svg { width: 10px; height: 10px; }

.sb101-article /* Post nav */
.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 3rem; }
.sb101-article .nav-card { border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s; text-decoration: none; display: block; }
.sb101-article .nav-card:hover { border-color: #FBDC81; }
.sb101-article .nav-card.next { text-align: right; }
.sb101-article .nav-dir { font-size: 10.5px; color: #aaa; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.sb101-article .nav-ttl { font-size: 13px; font-weight: 500; color: #111; line-height: 1.4; }

.sb101-article /* ── MOBILE SERIES SCROLL ── */
.mobile-series-wrap { display: none; margin-top: 2.6rem; }
.sb101-article .section-label-sm { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #aaa; margin-bottom: 12px; }
.sb101-article .series-scroll-wrap { overflow-x: auto; scrollbar-width: none; }
.sb101-article .series-scroll-wrap::-webkit-scrollbar { display: none; }
.sb101-article .series-scroll { display: flex; gap: 8px; width: max-content; }
.sb101-article .ep-card { width: 130px; border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 10px 12px; flex-shrink: 0; cursor: pointer; background: #fff; }
.sb101-article .ep-card.current { border-color: #FBDC81; background: #FFF8E0; }
.sb101-article .ep-card-num { font-size: 10px; font-weight: 700; color: #aaa; margin-bottom: 5px; }
.sb101-article .ep-card.current .ep-card-num { color: #8a6200; }
.sb101-article .ep-card-title { font-size: 12px; font-weight: 500; color: #111; line-height: 1.35; }
.sb101-article .ep-card.current .ep-card-title { color: #3d2d00; font-weight: 700; }
.sb101-article .ep-more { width: 80px; border: 0.5px dashed #ccc; border-radius: 10px; padding: 10px 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #aaa; }

.sb101-article /* ── MOBILE PRODUCTS ── */
.mobile-products-wrap { display: none; margin-top: 2rem; padding-top: 2rem; border-top: 0.5px solid #e5e5e0; }
.sb101-article .product-list-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 0.5px solid #e5e5e0; align-items: center; }
.sb101-article .product-list-item:last-child { border-bottom: none; }
.sb101-article .product-thumb { width: 52px; height: 64px; background: #F5E4D5; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #a07050; text-align: center; line-height: 1.3; padding: 4px; flex-shrink: 0; }
.sb101-article .mob-prod-name { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 3px; }
.sb101-article .mob-prod-desc { font-size: 11px; color: #999; line-height: 1.4; margin-bottom: 8px; }
.sb101-article .mob-prod-cta { font-size: 11px; font-weight: 700; color: #3d2d00; background: #FBDC81; padding: 5px 12px; border-radius: 20px; border: none; cursor: pointer; }

.sb101-article /* Skin type CTA block */
.skintype-cta-block { background: #111; border-radius: 14px; padding: 22px 20px; margin-top: 2rem; }
.sb101-article .skintype-cta-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #FBDC81; margin-bottom: 8px; }
.sb101-article .skintype-cta-title { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 10px; }
.sb101-article .skintype-cta-body { font-size: 13px; color: #bbb; line-height: 1.65; margin-bottom: 18px; }
.sb101-article .skintype-cta-btn { display: block; background: #FBDC81; color: #3d2d00; font-size: 14px; font-weight: 700; text-align: center; padding: 13px 16px; border-radius: 10px; text-decoration: none; letter-spacing: 0.01em; }
.sb101-article .skintype-cta-btn:hover { background: #f5d06a; }
.sb101-article .skintype-cta-note { font-size: 11px; color: #666; text-align: center; margin-top: 10px; }

.sb101-article /* ── DESKTOP SIDEBAR ── */
.sidebar-desktop { display: flex; position: sticky; top: 28px; flex-direction: column; gap: 20px; }
.sb101-article .sb-card { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; background: #fff; }
.sb101-article .sb-header { padding: 11px 15px; background: #fafaf8; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #aaa; border-bottom: 0.5px solid #e5e5e0; }
.sb101-article .toc-list { list-style: none; padding: 10px 0; }
.sb101-article .toc-item { display: block; padding: 7px 15px; font-size: 13px; color: #999; cursor: pointer; transition: color 0.15s, background 0.15s; border-left: 2px solid transparent; line-height: 1.4; }
.sb101-article .toc-item:hover { color: #111; background: #fafaf8; }
.sb101-article .toc-item.active { color: #3d2d00; background: #FFF8E0; border-left-color: #FBDC81; font-weight: 600; }
.sb101-article .series-list { list-style: none; padding: 8px 0; }
.sb101-article .series-item { display: flex; gap: 9px; padding: 7px 13px; font-size: 12px; cursor: pointer; transition: background 0.12s; align-items: center; color: #999; line-height: 1.35; }
.sb101-article .series-item:hover { background: #fafaf8; }
.sb101-article .series-item.current { background: #FFF8E0; font-weight: 700; color: #3d2d00; }
.sb101-article .ep-n { font-size: 10px; min-width: 26px; padding: 2px 5px; background: #f0f0ec; border-radius: 4px; text-align: center; color: #aaa; flex-shrink: 0; }
.sb101-article .series-item.current .ep-n { background: #FBDC81; color: #5a4200; }
.sb101-article .sb-product { padding: 14px; display: flex; gap: 11px; align-items: center; }
.sb101-article .sb-product + .sb-product { border-top: 0.5px solid #e5e5e0; }
.sb101-article .sb-prod-img { width: 54px; height: 68px; background: #F5E4D5; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 8px; font-weight: 700; color: #a07050; text-align: center; line-height: 1.3; padding: 4px; }
.sb101-article .sb-prod-name { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 3px; }
.sb101-article .sb-prod-desc { font-size: 11.5px; color: #999; line-height: 1.4; margin-bottom: 8px; }
.sb101-article .sb-prod-cta { font-size: 11.5px; font-weight: 700; color: #3d2d00; background: #FBDC81; padding: 5px 12px; border-radius: 20px; border: none; cursor: pointer; }
.sb101-article .sb-prod-cta:hover { background: #f5d06a; }



/* ── ep02 unique styles (from _artifacts/ep02-10-skincare-myths-debunked.html) ── */

  @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;700;800&display=swap');
  .sb101-article * { box-sizing: border-box; margin: 0; padding: 0; }
  .sb101-article { font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; background: #fff; color: #111; }
  .sb101-article .demaf-article { max-width: 960px; margin: 0 auto; padding: 0 24px 4rem; }

  .sb101-article .article-grid { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }

  @media (max-width: 768px) {
    .sb101-article .demaf-article { padding: 0 16px 4rem; }
    .sb101-article .article-grid { grid-template-columns: 1fr; gap: 0; }
    .sb101-article .article-title { font-size: 24px !important; }
    .sb101-article .sidebar-desktop { display: none !important; }
    .sb101-article .mobile-toc-wrap { display: block !important; }
    .sb101-article .mobile-series-wrap { display: block !important; }
    .sb101-article .mobile-products-wrap { display: block !important; }
    .sb101-article .mobile-progress-bar { display: block !important; }
  }
  @media (min-width: 769px) {
    .sb101-article .sidebar-desktop { display: flex !important; }
    .sb101-article .mobile-toc-wrap, .sb101-article .mobile-series-wrap, .sb101-article .mobile-products-wrap, .sb101-article .mobile-progress-bar { display: none !important; }
  }

  .sb101-article /* Progress bar */
  .mobile-progress-bar { display: none; height: 3px; background: #e5e5e0; }
  .sb101-article .mobile-progress-fill { height: 3px; background: #FBDC81; width: 12%; transition: width 0.4s; }

  .sb101-article /* Breadcrumb */
  .breadcrumb { font-size: 12px; color: #888; margin: 16px 0 20px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
  .sb101-article .breadcrumb a { color: #888; text-decoration: none; }
  .sb101-article .breadcrumb a:hover { color: #111; text-decoration: underline; }
  .sb101-article .breadcrumb .sep { color: #ccc; }

  .sb101-article /* Dev/meta box */
  .dev-box { border: 0.5px dashed #ccc; border-radius: 10px; padding: 14px 16px; margin-bottom: 2.4rem; background: #f8f8f5; }
  .sb101-article .dev-box-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #888; margin-bottom: 10px; }
  .sb101-article .dev-row { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
  .sb101-article .dev-row:last-child { margin-bottom: 0; }
  .sb101-article .dev-key { font-size: 11px; color: #888; }
  .sb101-article .dev-val { font-size: 13px; font-weight: 500; color: #111; line-height: 1.5; font-family: 'Courier New', monospace; background: #fff; border: 0.5px solid #e5e5e0; padding: 6px 10px; border-radius: 6px; word-break: break-all; }

  .sb101-article /* Header */
  .series-badge { display: inline-block; background: #FBDC81; color: #5a4200; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; text-transform: uppercase; }
  .sb101-article .article-title { font-size: 30px; font-weight: 800; line-height: 1.25; letter-spacing: -0.02em; color: #111; margin-bottom: 14px; }
  .sb101-article .article-meta { display: flex; gap: 16px; font-size: 13px; color: #888; margin-bottom: 20px; flex-wrap: wrap; align-items: center; }
  .sb101-article .meta-dot { width: 3px; height: 3px; background: #888; border-radius: 50%; }

  .sb101-article /* YouTube banner */
  .yt-banner { display: flex; align-items: center; gap: 12px; background: #f8f8f5; border: 0.5px solid #e5e5e0; border-left: 3px solid #FF0000; border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 32px; cursor: pointer; text-decoration: none; }
  .sb101-article .yt-icon { width: 28px; height: 28px; background: #FF0000; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
  .sb101-article .yt-icon svg { width: 14px; height: 14px; }
  .sb101-article .yt-banner-text { font-size: 13px; font-weight: 500; color: #111; }
  .sb101-article .yt-banner-sub { font-size: 12px; color: #888; }
  .sb101-article .yt-arrow { margin-left: auto; font-size: 14px; color: #888; }

  .sb101-article .article-divider { height: 0.5px; background: #e5e5e0; margin-bottom: 32px; }

  .sb101-article /* Mobile TOC accordion */
  .mobile-toc-wrap { display: none; margin-bottom: 20px; }
  .sb101-article .toc-accordion { border: 0.5px solid #e5e5e0; border-radius: 10px; overflow: hidden; }
  .sb101-article .toc-trigger { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #f8f8f5; cursor: pointer; user-select: none; }
  .sb101-article .toc-trigger-left { display: flex; align-items: center; gap: 8px; }
  .sb101-article .toc-dot { width: 8px; height: 8px; background: #FBDC81; border-radius: 50%; }
  .sb101-article .toc-label { font-size: 12px; font-weight: 700; color: #111; text-transform: uppercase; letter-spacing: 0.06em; }
  .sb101-article .toc-chevron { width: 16px; height: 16px; color: #888; transition: transform 0.2s; }
  .sb101-article .toc-chevron.open { transform: rotate(180deg); }
  .sb101-article .toc-body { display: none; padding: 8px 0; border-top: 0.5px solid #e5e5e0; }
  .sb101-article .toc-body.open { display: block; }
  .sb101-article .toc-item-mob { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px; color: #888; cursor: pointer; border-left: 2px solid transparent; line-height: 1.4; }
  .sb101-article .toc-item-mob:hover { background: #f8f8f5; color: #111; }
  .sb101-article .toc-item-mob.active { color: #3d2d00; background: #FFF8E0; border-left-color: #FBDC81; font-weight: 600; }
  .sb101-article .toc-num { font-size: 10px; color: #888; min-width: 20px; flex-shrink: 0; }
  .sb101-article .toc-item-mob.active .toc-num { color: #8a6200; }

  .sb101-article /* Prose */
  .prose { font-size: 16px; line-height: 1.85; color: #111; }
  .sb101-article .prose p { margin-bottom: 1.2rem; }

  .sb101-article .intro-callout { border-left: 3px solid #FBDC81; border-radius: 0 8px 8px 0; background: #f8f8f5; padding: 14px 18px; margin: 0 0 1.6rem; font-size: 15px; color: #111; }

  .sb101-article .verdict-legend { display: flex; gap: 10px; margin-bottom: 1.4rem; flex-wrap: wrap; }
  .sb101-article .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #888; }
  .sb101-article .legend-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

  .sb101-article /* Fact cards */
  .fact-card { border: 0.5px solid #e5e5e0; border-radius: 12px; margin: 1.6rem 0; overflow: hidden; }
  .sb101-article .fact-header { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; }
  .sb101-article .fact-num { font-size: 11px; font-weight: 700; color: #888; background: #fff; border: 0.5px solid #d0cdc8; border-radius: 6px; padding: 2px 7px; flex-shrink: 0; margin-top: 1px; }
  .sb101-article .fact-claim { font-size: 14px; font-weight: 600; color: #111; line-height: 1.45; flex: 1; }
  .sb101-article .verdict { flex-shrink: 0; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; letter-spacing: 0.04em; margin-top: 1px; }
  .sb101-article .verdict.false { background: #FBDC81; color: #5a4200; }
  .sb101-article .verdict.true { background: #d4f0e0; color: #1a5c35; }
  .sb101-article .verdict.mixed { background: #fde8c8; color: #7a4200; }
  .sb101-article .fact-body { padding: 14px 16px; }
  .sb101-article .fact-truth { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 8px; display: flex; gap: 8px; align-items: flex-start; }
  .sb101-article .fact-truth-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #8a6200; background: #FFF8E0; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; margin-top: 2px; }
  .sb101-article .fact-detail { font-size: 13px; color: #666; line-height: 1.7; }
  .sb101-article .fact-science { margin-top: 10px; display: flex; gap: 8px; align-items: flex-start; }
  .sb101-article .fact-science-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #555; background: #f0f0ec; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; margin-top: 2px; }
  .sb101-article .fact-science-text { font-size: 12px; color: #777; line-height: 1.6; font-style: italic; }
  .sb101-article .fact-tip { margin-top: 10px; border-left: 3px solid #849F78; border-radius: 0 6px 6px 0; background: #f3f7f0; padding: 9px 12px; font-size: 13px; color: #111; }
  .sb101-article .fact-tip-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #3d5c30; margin-bottom: 4px; }
  .sb101-article .kw { background: #FBDC81; color: #3d2d00; font-weight: 600; padding: 1px 7px; border-radius: 12px; font-size: 0.93em; white-space: nowrap; }

  .sb101-article /* GEO Q&A callout */
  .geo-callout { border: 0.5px solid #e5e5e0; border-radius: 12px; padding: 20px 22px; margin: 2.4rem 0; background: #fafaf7; }
  .sb101-article .geo-callout-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin-bottom: 16px; display: flex; align-items: center; gap: 6px; }
  .sb101-article .geo-callout-label::before { content: ''; width: 6px; height: 6px; background: #FBDC81; border-radius: 50%; display: inline-block; }
  .sb101-article .geo-qa { margin-bottom: 16px; }
  .sb101-article .geo-qa:last-child { margin-bottom: 0; }
  .sb101-article .geo-q { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 6px; line-height: 1.45; }
  .sb101-article .geo-a { font-size: 13px; color: #555; line-height: 1.7; }

  .sb101-article /* Dark summary box */
  .summary-box { background: #1a1a18; color: #fff; border-radius: 12px; padding: 24px 28px; margin-top: 2.8rem; }
  .sb101-article .summary-title { color: #FBDC81; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 14px; }
  .sb101-article .summary-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .sb101-article .summary-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: #e8e8e8; }
  .sb101-article .check { width: 18px; height: 18px; background: #FBDC81; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
  .sb101-article .check svg { width: 10px; height: 10px; }

  .sb101-article /* Mobile: series horizontal scroll */
  .mobile-series-wrap { display: none; margin-top: 2.4rem; }
  .sb101-article .section-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin-bottom: 12px; }
  .sb101-article .series-scroll-wrap { overflow-x: auto; scrollbar-width: none; }
  .sb101-article .series-scroll-wrap::-webkit-scrollbar { display: none; }
  .sb101-article .series-scroll { display: flex; gap: 8px; width: max-content; }
  .sb101-article .ep-card { width: 130px; border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 10px 12px; flex-shrink: 0; cursor: pointer; background: #fff; }
  .sb101-article .ep-card.current { border-color: #FBDC81; background: #FFF8E0; }
  .sb101-article .ep-card-num { font-size: 10px; font-weight: 700; color: #888; margin-bottom: 5px; }
  .sb101-article .ep-card.current .ep-card-num { color: #8a6200; }
  .sb101-article .ep-card-title { font-size: 12px; font-weight: 500; color: #111; line-height: 1.35; }
  .sb101-article .ep-card.current .ep-card-title { color: #3d2d00; font-weight: 700; }
  .sb101-article .ep-more { width: 80px; border: 0.5px dashed #ccc; border-radius: 10px; padding: 10px 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #888; }

  .sb101-article /* Mobile: skin type CTA */
  .mobile-products-wrap { display: none; margin-top: 2rem; padding-top: 2rem; border-top: 0.5px solid #e5e5e0; }

  .sb101-article /* Post nav */
  .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 3rem; }
  .sb101-article .nav-card { border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s; }
  .sb101-article .nav-card:hover { border-color: #FBDC81; }
  .sb101-article .nav-card.next { text-align: right; }
  .sb101-article .nav-direction { font-size: 11px; color: #888; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
  .sb101-article .nav-title { font-size: 13px; font-weight: 500; color: #111; }

  .sb101-article /* Sidebar */
  .sidebar-desktop { display: flex; position: sticky; top: 24px; flex-direction: column; gap: 20px; }
  .sb101-article .sidebar-card { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; background: #fff; }
  .sb101-article .sidebar-header { padding: 12px 16px; background: #f8f8f5; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #888; border-bottom: 0.5px solid #e5e5e0; }
  .sb101-article .toc-list { list-style: none; padding: 12px 0; }
  .sb101-article .toc-item { display: block; padding: 7px 16px; font-size: 13px; color: #888; cursor: pointer; transition: color 0.15s, background 0.15s; border-left: 2px solid transparent; line-height: 1.45; }
  .sb101-article .toc-item:hover { color: #111; background: #f8f8f5; }
  .sb101-article .toc-item.active { color: #3d2d00; background: #FFF8E0; border-left-color: #FBDC81; font-weight: 500; }
  .sb101-article .series-list { list-style: none; padding: 10px 0; }
  .sb101-article .series-item { display: flex; gap: 10px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; transition: background 0.12s; align-items: center; color: #888; }
  .sb101-article .series-item:hover { background: #f8f8f5; }
  .sb101-article .series-item.current { background: #FFF8E0; font-weight: 600; color: #3d2d00; }
  .sb101-article .ep-num-sb { font-size: 10px; min-width: 26px; padding: 2px 5px; background: #f8f8f5; border-radius: 4px; text-align: center; color: #888; flex-shrink: 0; }
  .sb101-article .series-item.current .ep-num-sb { background: #FBDC81; color: #5a4200; }

  .sb101-article /* Skin type CTA — mobile block (ep01 pattern) */
  .skintype-cta-block { background: #111; border-radius: 14px; padding: 22px 20px; margin-top: 2rem; }
  .sb101-article .skintype-cta-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #FBDC81; margin-bottom: 8px; }
  .sb101-article .skintype-cta-title { font-size: 17px; font-weight: 800; color: #fff; line-height: 1.3; margin-bottom: 10px; }
  .sb101-article .skintype-cta-body { font-size: 13px; color: #bbb; line-height: 1.65; margin-bottom: 18px; }
  .sb101-article .skintype-cta-btn { display: block; background: #FBDC81; color: #3d2d00; font-size: 14px; font-weight: 700; text-align: center; padding: 13px 16px; border-radius: 10px; text-decoration: none; letter-spacing: 0.01em; }
  .sb101-article .skintype-cta-btn:hover { background: #f5d06a; }
  .sb101-article .skintype-cta-note { font-size: 11px; color: #666; text-align: center; margin-top: 10px; }



/* ── ep04 unique styles (from _artifacts/ep04-fix-your-skin-barrier-10-rules.html) ── */

.sb101-article * { box-sizing: border-box; margin: 0; padding: 0; }
.sb101-article { font-family: 'Outfit', -apple-system, sans-serif; background: #fff; color: #111; line-height: 1.7; }
.sb101-article .page-wrap { max-width: 980px; margin: 0 auto; padding: 0 28px 6rem; }
.sb101-article .article-grid { display: grid; grid-template-columns: 1fr 300px; gap: 56px; align-items: start; }
@media (max-width: 768px) {
  .sb101-article .page-wrap { padding: 0 16px 4rem; }
  .sb101-article .article-grid { grid-template-columns: 1fr; gap: 0; }
  .sb101-article .article-title { font-size: 24px !important; }
  .sb101-article .sidebar-desktop { display: none !important; }
  .sb101-article .mobile-toc-wrap, .sb101-article .mobile-series-wrap, .sb101-article .mobile-products-wrap { display: block !important; }
  .sb101-article .mobile-progress-bar { display: block !important; }
}
@media (min-width: 769px) {
  .sb101-article .sidebar-desktop { display: flex !important; }
  .sb101-article .mobile-toc-wrap, .sb101-article .mobile-series-wrap, .sb101-article .mobile-products-wrap, .sb101-article .mobile-progress-bar { display: none !important; }
}
.sb101-article .mobile-progress-bar { display: none; height: 3px; background: #e5e5e0; }
.sb101-article .mobile-progress-fill { height: 3px; background: #FBDC81; width: 18%; transition: width 0.3s; }
.sb101-article .breadcrumb { font-size: 12px; color: #999; margin: 20px 0; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sb101-article .breadcrumb a { color: #999; text-decoration: none; }
.sb101-article .breadcrumb a:hover { color: #111; }
.sb101-article .breadcrumb .sep { color: #ddd; }
.sb101-article .series-badge { display: inline-block; background: #FBDC81; color: #5a4200; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; padding: 4px 12px; border-radius: 20px; margin-bottom: 14px; text-transform: uppercase; }
.sb101-article .article-title { font-size: 32px; font-weight: 800; line-height: 1.22; letter-spacing: -0.025em; color: #111; margin-bottom: 14px; }
.sb101-article .article-meta { display: flex; gap: 14px; font-size: 12.5px; color: #999; margin-bottom: 22px; flex-wrap: wrap; align-items: center; }
.sb101-article .meta-dot { width: 3px; height: 3px; background: #ccc; border-radius: 50%; }
.sb101-article .yt-banner { display: flex; align-items: center; gap: 12px; background: #fafaf8; border: 0.5px solid #e5e5e0; border-left: 3px solid #FF0000; border-radius: 0 8px 8px 0; padding: 12px 16px; margin-bottom: 32px; cursor: pointer; text-decoration: none; }
.sb101-article .yt-icon { width: 28px; height: 28px; background: #FF0000; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sb101-article .yt-icon svg { width: 14px; height: 14px; }
.sb101-article .yt-text { font-size: 13px; font-weight: 500; color: #111; }
.sb101-article .yt-sub { font-size: 11.5px; color: #999; margin-top: 1px; }
.sb101-article .yt-arrow { margin-left: auto; font-size: 13px; color: #bbb; }
.sb101-article .article-divider { height: 0.5px; background: #e8e8e4; margin-bottom: 32px; }
.sb101-article .mobile-toc-wrap { display: none; margin-bottom: 22px; }
.sb101-article .toc-accordion { border: 0.5px solid #e5e5e0; border-radius: 10px; overflow: hidden; }
.sb101-article .toc-trigger { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; background: #fafaf8; cursor: pointer; user-select: none; }
.sb101-article .toc-trigger-left { display: flex; align-items: center; gap: 8px; }
.sb101-article .toc-dot { width: 8px; height: 8px; background: #FBDC81; border-radius: 50%; }
.sb101-article .toc-label-txt { font-size: 12px; font-weight: 700; color: #111; text-transform: uppercase; letter-spacing: 0.06em; }
.sb101-article .toc-chevron { width: 16px; height: 16px; color: #999; transition: transform 0.2s; }
.sb101-article .toc-chevron.open { transform: rotate(180deg); }
.sb101-article .toc-body { display: none; padding: 8px 0; border-top: 0.5px solid #e5e5e0; }
.sb101-article .toc-body.open { display: block; }
.sb101-article .toc-item-mob { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 13px; color: #999; cursor: pointer; border-left: 2px solid transparent; line-height: 1.4; }
.sb101-article .toc-item-mob:hover { background: #fafaf8; color: #111; }
.sb101-article .toc-item-mob.active { color: #3d2d00; background: #FFF8E0; border-left-color: #FBDC81; font-weight: 600; }
.sb101-article .toc-n { font-size: 10px; color: #bbb; min-width: 18px; flex-shrink: 0; }
.sb101-article .toc-item-mob.active .toc-n { color: #8a6200; }
.sb101-article .prose { font-size: 15.5px; line-height: 1.85; color: #222; }
.sb101-article .prose h2 { font-size: 20px; font-weight: 800; margin: 2.8rem 0 1rem; padding-bottom: 7px; border-bottom: 2.5px solid #FBDC81; display: inline-block; line-height: 1.3; letter-spacing: -0.01em; color: #111; }
.sb101-article .prose h3 { font-size: 16px; font-weight: 700; margin: 1.8rem 0 0.7rem; color: #111; }
.sb101-article .prose p { margin-bottom: 1.1rem; }
.sb101-article .callout { border-left: 3px solid #FBDC81; border-radius: 0 8px 8px 0; background: #fffcf0; padding: 13px 18px; margin: 1.4rem 0; font-size: 14.5px; color: #333; }
.sb101-article .callout-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #8a6200; margin-bottom: 6px; }
.sb101-article .kw { background: #FBDC81; color: #3d2d00; font-weight: 700; padding: 1px 7px; border-radius: 10px; font-size: 0.92em; }
.sb101-article .rule-card { border: 0.5px solid #e5e5e0; border-radius: 12px; margin: 1.4rem 0; overflow: hidden; }
.sb101-article .rule-header { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; background: #fafaf8; border-bottom: 0.5px solid #e5e5e0; }
.sb101-article .rule-num-badge { font-size: 11px; font-weight: 700; color: #5a4200; background: #FBDC81; border-radius: 6px; padding: 2px 8px; flex-shrink: 0; margin-top: 2px; white-space: nowrap; }
.sb101-article .rule-headline { font-size: 14px; font-weight: 700; color: #111; line-height: 1.45; flex: 1; }
.sb101-article .rule-body { padding: 14px 16px; font-size: 14px; color: #444; line-height: 1.75; }
.sb101-article .rule-body p { margin-bottom: 0.8rem; }
.sb101-article .rule-body p:last-child { margin-bottom: 0; }
.sb101-article .rule-tip { background: #fffcf0; border-top: 0.5px solid #e5e5e0; padding: 10px 16px; font-size: 13px; color: #5a4200; display: flex; gap: 8px; align-items: flex-start; }
.sb101-article .rule-tip-icon { flex-shrink: 0; font-size: 13px; margin-top: 1px; }
.sb101-article .rule-stat { background: #f0f0ee; border-top: 0.5px solid #e5e5e0; padding: 10px 16px; font-size: 12.5px; color: #666; display: flex; gap: 8px; align-items: flex-start; line-height: 1.55; }
.sb101-article .rule-stat-bar { width: 3px; background: #FBDC81; border-radius: 2px; flex-shrink: 0; align-self: stretch; }
.sb101-article .diagram-wrap { margin: 2rem 0; border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .diagram-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #999; padding: 10px 16px; background: #fafaf8; border-bottom: 0.5px solid #e5e5e0; }
.sb101-article .diagram-caption { font-size: 12px; color: #999; padding: 10px 16px; border-top: 0.5px solid #e5e5e0; background: #fafaf8; line-height: 1.5; }
.sb101-article .routine-steps { display: flex; gap: 0; margin: 1.6rem 0; border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .routine-step { flex: 1; padding: 16px 14px; text-align: center; border-right: 0.5px solid #e5e5e0; position: relative; }
.sb101-article .routine-step:last-child { border-right: none; }
.sb101-article .step-num { font-size: 10px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.sb101-article .step-icon-wrap { width: 40px; height: 40px; background: #FBDC81; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; }
.sb101-article .step-icon-wrap svg { width: 20px; height: 20px; }
.sb101-article .step-name { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 4px; }
.sb101-article .step-desc { font-size: 11px; color: #999; line-height: 1.4; }
.sb101-article .step-arrow { position: absolute; right: -8px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; background: #FBDC81; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #3d2d00; font-weight: 700; z-index: 1; }
@media (max-width: 480px) {
  .sb101-article .routine-steps { flex-direction: column; }
  .sb101-article .routine-step { border-right: none; border-bottom: 0.5px solid #e5e5e0; }
  .sb101-article .routine-step:last-child { border-bottom: none; }
  .sb101-article .step-arrow { display: none; }
}
.sb101-article .geo-faq { margin: 2.8rem 0; }
.sb101-article .geo-faq-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #999; margin-bottom: 12px; }
.sb101-article .faq-item { border: 0.5px solid #e5e5e0; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.sb101-article .faq-q { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 13px 16px; cursor: pointer; user-select: none; background: #fafaf8; }
.sb101-article .faq-q-text { font-size: 14px; font-weight: 600; color: #111; line-height: 1.45; }
.sb101-article .faq-toggle { font-size: 16px; color: #FBDC81; font-weight: 700; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.sb101-article .faq-a { display: none; padding: 13px 16px; font-size: 13.5px; color: #555; line-height: 1.7; border-top: 0.5px solid #e5e5e0; background: #fff; }
.sb101-article .faq-a.open { display: block; }
.sb101-article .summary-box { background: #111; color: #fff; border-radius: 14px; padding: 26px 28px; margin-top: 3rem; }
.sb101-article .summary-title { color: #FBDC81; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 16px; }
.sb101-article .summary-list { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.sb101-article .summary-list li { display: flex; gap: 10px; font-size: 14px; line-height: 1.6; color: #e0e0e0; }
.sb101-article .chk { width: 19px; height: 19px; background: #FBDC81; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.sb101-article .chk svg { width: 10px; height: 10px; }
.sb101-article .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 3rem; }
.sb101-article .nav-card { border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 14px 16px; cursor: pointer; transition: border-color 0.15s; text-decoration: none; display: block; }
.sb101-article .nav-card:hover { border-color: #FBDC81; }
.sb101-article .nav-card.next { text-align: right; }
.sb101-article .nav-dir { font-size: 10.5px; color: #aaa; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.06em; }
.sb101-article .nav-ttl { font-size: 13px; font-weight: 500; color: #111; line-height: 1.4; }
.sb101-article .mobile-series-wrap { display: none; margin-top: 2.6rem; }
.sb101-article .section-label-sm { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #aaa; margin-bottom: 12px; }
.sb101-article .series-scroll-wrap { overflow-x: auto; scrollbar-width: none; }
.sb101-article .series-scroll-wrap::-webkit-scrollbar { display: none; }
.sb101-article .series-scroll { display: flex; gap: 8px; width: max-content; }
.sb101-article .ep-card { width: 130px; border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 10px 12px; flex-shrink: 0; cursor: pointer; background: #fff; }
.sb101-article .ep-card.current { border-color: #FBDC81; background: #FFF8E0; }
.sb101-article .ep-card-num { font-size: 10px; font-weight: 700; color: #aaa; margin-bottom: 5px; }
.sb101-article .ep-card.current .ep-card-num { color: #8a6200; }
.sb101-article .ep-card-title { font-size: 12px; font-weight: 500; color: #111; line-height: 1.35; }
.sb101-article .ep-card.current .ep-card-title { color: #3d2d00; font-weight: 700; }
.sb101-article .ep-more { width: 80px; border: 0.5px dashed #ccc; border-radius: 10px; padding: 10px 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #aaa; }
.sb101-article .mobile-products-wrap { display: none; margin-top: 2rem; padding-top: 2rem; border-top: 0.5px solid #e5e5e0; }
.sb101-article .skintype-cta-block { border: 0.5px solid #FBDC81; border-radius: 14px; overflow: hidden; }
.sb101-article .skintype-cta-header { background: #FBDC81; padding: 11px 16px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #5a4200; }
.sb101-article .skintype-cta-body-wrap { padding: 16px; }
.sb101-article .skintype-cta-title { font-size: 15px; font-weight: 800; color: #111; line-height: 1.3; margin-bottom: 8px; }
.sb101-article .skintype-cta-desc { font-size: 12.5px; color: #666; line-height: 1.6; margin-bottom: 16px; }
.sb101-article .skintype-cta-btn { display: block; background: #111; color: #FBDC81; font-size: 13px; font-weight: 700; text-align: center; padding: 12px 16px; border-radius: 10px; text-decoration: none; letter-spacing: 0.01em; }
.sb101-article .skintype-cta-note { font-size: 11px; color: #aaa; text-align: center; margin-top: 10px; }
.sb101-article .sidebar-desktop { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 24px; }
.sb101-article .sb-card { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .sb-header { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #999; padding: 10px 15px; background: #fafaf8; border-bottom: 0.5px solid #e5e5e0; }
.sb101-article .toc-list { list-style: none; padding: 6px 0; }
.sb101-article .toc-item { padding: 8px 14px; font-size: 13px; color: #999; cursor: pointer; border-left: 2px solid transparent; line-height: 1.4; transition: all 0.15s; }
.sb101-article .toc-item:hover { color: #111; background: #fafaf8; }
.sb101-article .toc-item.active { color: #3d2d00; background: #FFF8E0; border-left-color: #FBDC81; font-weight: 600; }
.sb101-article .series-list { list-style: none; padding: 6px 0; }
.sb101-article .series-item { display: flex; gap: 8px; align-items: baseline; padding: 7px 14px; font-size: 12.5px; color: #999; line-height: 1.4; }
.sb101-article .series-item.current { color: #3d2d00; font-weight: 700; background: #FFF8E0; }
.sb101-article .ep-n { font-size: 10px; font-weight: 700; color: #ccc; min-width: 22px; flex-shrink: 0; }
.sb101-article .series-item.current .ep-n { color: #8a6200; }


/* ============================================================
   Phase 2B page-specific CSS (ep03/05/06/07)
   ============================================================ */

/* ============================================================
   sb101 ep03 — page-specific CSS
   Source: _artifacts/skin-barrier-101/ep03-skin-type-vs-barrier.html
   All selectors namespaced under .sb101-article to avoid theme bleed.
   Classes already covered by sb101.css (TOC, sidebar, prose, FAQ, etc.)
   are intentionally omitted here.
   ============================================================ */

/* Warning callout (amber) — companion to .callout */
.sb101-article .warn-callout {
  border-left: 3px solid #f0a030;
  border-radius: 0 8px 8px 0;
  background: #fdf5e8;
  padding: 13px 18px;
  margin: 1.4rem 0;
  font-size: 14.5px;
  color: #333;
}
.sb101-article .warn-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a06000;
  margin-bottom: 6px;
}

/* 3-up skin type comparison */
.sb101-article .skin-compare {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 1.6rem 0;
}
.sb101-article .skin-card {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  overflow: hidden;
}
.sb101-article .skin-card-header {
  padding: 10px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sb101-article .skin-card.oily .skin-card-header {
  background: #e8f4e8;
  color: #2a5c2a;
}
.sb101-article .skin-card.dry .skin-card-header {
  background: #f0e8f4;
  color: #4a2a5c;
}
.sb101-article .skin-card.combo .skin-card-header {
  background: #e8eef8;
  color: #2a3c6a;
}
.sb101-article .skin-card-analogy {
  padding: 12px 14px 4px;
  font-size: 24px;
  text-align: center;
}
.sb101-article .skin-card-label {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: #999;
  margin-bottom: 10px;
  letter-spacing: 0.05em;
}
.sb101-article .skin-card-traits {
  padding: 0 14px 14px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sb101-article .skin-card-traits li {
  font-size: 12px;
  color: #555;
  line-height: 1.45;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}
.sb101-article .trait-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.sb101-article .oily .trait-dot { background: #4a9c4a; }
.sb101-article .dry .trait-dot  { background: #9c4ab4; }
.sb101-article .combo .trait-dot { background: #4a6ab4; }
.sb101-article .skin-card-risk {
  margin: 0 14px 14px;
  border-top: 0.5px solid #e5e5e0;
  padding-top: 10px;
}
.sb101-article .risk-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #c05050;
  margin-bottom: 3px;
}
.sb101-article .skin-card-risk p {
  font-size: 11px;
  color: #888;
  line-height: 1.5;
  margin: 0;
}

/* Breakdown table — 3-col grid */
.sb101-article .breakdown-table {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  overflow: hidden;
  margin: 1.6rem 0;
}
.sb101-article .bt-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  background: #111;
  padding: 10px 14px;
}
.sb101-article .bt-header span {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #FBDC81;
}
.sb101-article .bt-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: 11px 14px;
  border-top: 0.5px solid #f0f0ec;
  align-items: start;
  gap: 8px;
}
.sb101-article .bt-row:first-of-type {
  border-top: none;
}
.sb101-article .bt-cell {
  font-size: 13px;
  color: #333;
  line-height: 1.5;
}
.sb101-article .bt-cell.label {
  font-weight: 700;
  color: #111;
  font-size: 12.5px;
}

/* Insight callout — neutral framed note */
.sb101-article .insight-callout {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 1.6rem 0;
  background: #fafaf8;
}
.sb101-article .insight-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a6200;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb101-article .insight-label::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #FBDC81;
  border-radius: 50%;
  display: inline-block;
}
.sb101-article .insight-text {
  font-size: 14px;
  color: #333;
  line-height: 1.75;
}

/* Repair steps — 3-up horizontal cards */
.sb101-article .repair-steps {
  display: flex;
  gap: 0;
  margin: 1.6rem 0;
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  overflow: hidden;
}
.sb101-article .repair-step {
  flex: 1;
  padding: 16px 14px;
  text-align: center;
  border-right: 0.5px solid #e5e5e0;
}
.sb101-article .repair-step:last-child {
  border-right: none;
}
.sb101-article .rs-num {
  font-size: 10px;
  font-weight: 700;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.sb101-article .rs-icon {
  font-size: 22px;
  margin-bottom: 8px;
}
.sb101-article .rs-name {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
}
.sb101-article .rs-desc {
  font-size: 11px;
  color: #999;
  line-height: 1.4;
}

/* Responsive — collapse compare + repair grids on small viewports */
@media (max-width: 500px) {
  .sb101-article .skin-compare {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .sb101-article .repair-steps {
    flex-direction: column;
  }
  .sb101-article .repair-step {
    border-right: none;
    border-bottom: 0.5px solid #e5e5e0;
  }
  .sb101-article .repair-step:last-child {
    border-bottom: none;
  }
}

/* ─────────────────────────────────────────────────────────────────────
   sb101-ep05-pagecss.css
   Page-specific CSS for /pages/ep05-water-and-skin-cleansing.
   Extracted from _artifacts/skin-barrier-101/ep05-water-and-skin-cleansing.html.
   Shared tokens / common classes live in sb101.css. Only NEW classes here.
   All selectors namespaced under .sb101-article.
   ───────────────────────────────────────────────────────────────────── */

/* ── WARN CALLOUT ── */
.sb101-article .warn-callout {
  border-left: 3px solid #f0a030;
  border-radius: 0 8px 8px 0;
  background: #fdf5e8;
  padding: 13px 18px;
  margin: 1.4rem 0;
  font-size: 14.5px;
  color: #333;
}
.sb101-article .warn-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #a06000;
  margin-bottom: 6px;
}

/* ── CLEANSER COMPARISON GRID ── */
.sb101-article .cleanser-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 1.6rem 0;
}
@media (max-width: 480px) {
  .sb101-article .cleanser-grid { grid-template-columns: 1fr; }
}
.sb101-article .cleanser-card {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  overflow: hidden;
}
.sb101-article .cleanser-card-header {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
}
.sb101-article .cleanser-card.best .cleanser-card-header {
  background: #e8f0d4;
  color: #3a5c10;
}
.sb101-article .cleanser-card.caution .cleanser-card-header {
  background: #fdf0dc;
  color: #7a4800;
}
.sb101-article .cleanser-card.neutral .cleanser-card-header {
  background: #f0f0ec;
  color: #444;
}
.sb101-article .cleanser-card.secondary .cleanser-card-header {
  background: #e8f4f8;
  color: #1a4a5c;
}
.sb101-article .cleanser-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  white-space: nowrap;
}
.sb101-article .cleanser-card.best .cleanser-badge {
  background: #FBDC81;
  color: #5a4200;
}
.sb101-article .cleanser-card.caution .cleanser-badge {
  background: #f0a030;
  color: #fff;
}
.sb101-article .cleanser-card.neutral .cleanser-badge {
  background: #d0cdc8;
  color: #444;
}
.sb101-article .cleanser-card.secondary .cleanser-badge {
  background: #a0d0e0;
  color: #1a3a4c;
}
.sb101-article .cleanser-card-body {
  padding: 12px 14px 14px;
}
.sb101-article .cleanser-card-name {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  margin-bottom: 6px;
}
.sb101-article .cleanser-card-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.65;
}
.sb101-article .cleanser-card-note {
  margin-top: 8px;
  font-size: 11px;
  color: #888;
  line-height: 1.5;
  border-top: 0.5px solid #f0f0ec;
  padding-top: 8px;
  font-style: italic;
}

/* ── INGREDIENT LIST ── */
.sb101-article .ingredient-list {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  margin: 1.6rem 0;
  overflow: hidden;
}
.sb101-article .ingredient-list-header {
  padding: 11px 16px;
  background: #111;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #FBDC81;
}
.sb101-article .ingredient-item {
  display: flex;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 0.5px solid #f0f0ec;
  align-items: flex-start;
}
.sb101-article .ingredient-item:last-child {
  border-bottom: none;
}
.sb101-article .ingredient-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.sb101-article .ingredient-icon.danger {
  background: #fde8e8;
}
.sb101-article .ingredient-icon.warning {
  background: #fdf0dc;
}
.sb101-article .ingredient-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.sb101-article .ingredient-label.danger {
  color: #c03030;
}
.sb101-article .ingredient-label.warning {
  color: #a06000;
}
.sb101-article .ingredient-name {
  font-size: 12px;
  font-weight: 700;
  color: #111;
  margin-bottom: 3px;
  font-family: 'Courier New', monospace;
}
.sb101-article .ingredient-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}

/* ── TIP CARD ── */
.sb101-article .tip-card {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  margin: 1.6rem 0;
  overflow: hidden;
}
.sb101-article .tip-card-header {
  padding: 11px 16px;
  background: #fafaf8;
  border-bottom: 0.5px solid #e5e5e0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #aaa;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb101-article .tip-card-header::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #FBDC81;
  border-radius: 50%;
  display: inline-block;
}
.sb101-article .tip-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sb101-article .tip-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.sb101-article .tip-num {
  width: 22px;
  height: 22px;
  background: #FBDC81;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #5a4200;
  flex-shrink: 0;
  margin-top: 2px;
}
.sb101-article .tip-text {
  font-size: 13.5px;
  color: #333;
  line-height: 1.7;
}

/* ── INSIGHT CALLOUT ── */
.sb101-article .insight-callout {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 1.6rem 0;
  background: #fafaf8;
}
.sb101-article .insight-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a6200;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb101-article .insight-label::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #FBDC81;
  border-radius: 50%;
  display: inline-block;
}
.sb101-article .insight-text {
  font-size: 14px;
  color: #333;
  line-height: 1.75;
}

/* ── MOBILE CLEANSING KIT CTA ── */
.sb101-article .kit-cta-block {
  background: #111;
  border-radius: 14px;
  padding: 22px 20px;
}
.sb101-article .kit-cta-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #FBDC81;
  margin-bottom: 8px;
}
.sb101-article .kit-cta-title {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  margin-bottom: 10px;
}
.sb101-article .kit-cta-body {
  font-size: 13px;
  color: #bbb;
  line-height: 1.65;
  margin-bottom: 18px;
}
.sb101-article .kit-cta-btn {
  display: block;
  background: #FBDC81;
  color: #3d2d00;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  padding: 13px 16px;
  border-radius: 10px;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.sb101-article .kit-cta-btn:hover {
  background: #f5d06a;
}
.sb101-article .kit-cta-note {
  font-size: 11px;
  color: #666;
  text-align: center;
  margin-top: 10px;
}

/* ============================================================
   sb101-ep06 page-specific CSS
   Extracted from _artifacts/skin-barrier-101/ep06-how-to-cleanse-your-skin.html
   All selectors namespaced with `.sb101-article`.
   Shared tokens / global classes live in sb101.css and are SKIPPED here.
   ============================================================ */

/* --- Rule card (Cleansing Standard: Bad vs Good) ------------- */
.sb101-article .rule-card-header { padding: 10px 16px; background: #1a1a18; display: flex; align-items: center; gap: 10px; }
.sb101-article .rule-card-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #FBDC81; }
.sb101-article .rule-card-body { display: grid; grid-template-columns: 1fr 1fr; }
.sb101-article .rule-half { padding: 16px 18px; }
.sb101-article .rule-half:first-child { border-right: 0.5px solid #e5e5e0; }
.sb101-article .rule-half-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
.sb101-article .rule-half.bad .rule-half-label { color: #c05050; }
.sb101-article .rule-half.good .rule-half-label { color: #2a6c3a; }
.sb101-article .rule-half-value { font-size: 18px; font-weight: 800; margin-bottom: 6px; }
.sb101-article .rule-half.bad .rule-half-value { color: #c05050; }
.sb101-article .rule-half.good .rule-half-value { color: #2a6c3a; }
.sb101-article .rule-half-desc { font-size: 12px; color: #888; line-height: 1.55; }

/* --- Prerequisite grid -------------------------------------- */
.sb101-article .prereq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4rem 0; }
@media (max-width: 500px) {
  .sb101-article .prereq-grid { grid-template-columns: 1fr; }
}
.sb101-article .prereq-card { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .prereq-header { padding: 10px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sb101-article .prereq-card.p1 .prereq-header { background: #fff3d4; color: #7a4d00; }
.sb101-article .prereq-card.p2 .prereq-header { background: #e8f7ee; color: #1a5c35; }
.sb101-article .prereq-body { padding: 12px 14px 14px; }
.sb101-article .prereq-name { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 8px; }
.sb101-article .prereq-traits { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.sb101-article .prereq-traits li { font-size: 12px; color: #555; display: flex; gap: 6px; align-items: flex-start; line-height: 1.5; }
.sb101-article .p-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.sb101-article .p1 .p-dot { background: #d4900a; }
.sb101-article .p2 .p-dot { background: #2a8c4a; }

/* --- Step card (cleansing routine instructions) ------------- */
.sb101-article .step-card { border: 0.5px solid #e5e5e0; border-radius: 12px; margin: 1.4rem 0; overflow: hidden; }
.sb101-article .step-card-header { padding: 12px 16px; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; display: flex; align-items: center; gap: 10px; }
.sb101-article .step-card-icon { width: 28px; height: 28px; background: #FBDC81; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.sb101-article .step-card-title { font-size: 13px; font-weight: 700; color: #111; }
.sb101-article .step-card-sub { font-size: 11px; color: #888; margin-top: 1px; }
.sb101-article .step-list { list-style: none; padding: 8px 0; }
.sb101-article .step-item { display: flex; gap: 14px; padding: 12px 16px; border-bottom: 0.5px solid #f0f0ec; align-items: flex-start; }
.sb101-article .step-item:last-child { border-bottom: none; }
.sb101-article .step-q { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 3px; }
.sb101-article .step-note { font-size: 12px; color: #666; line-height: 1.55; }
.sb101-article .step-tip { margin-top: 7px; background: #FFF8E0; border-radius: 6px; padding: 7px 10px; font-size: 12px; color: #5a4200; line-height: 1.5; }

/* --- Routine flow (3-step visual flow) ---------------------- */
.sb101-article .routine-flow { display: flex; gap: 0; margin: 1.6rem 0; border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .flow-step { flex: 1; padding: 16px 14px; text-align: center; border-right: 0.5px solid #e5e5e0; position: relative; background: #fff; }
.sb101-article .flow-step:last-child { border-right: none; }
.sb101-article .flow-num { font-size: 10px; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.sb101-article .flow-icon { width: 38px; height: 38px; background: #FBDC81; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin: 0 auto 8px; font-size: 18px; }
.sb101-article .flow-name { font-size: 12px; font-weight: 700; color: #111; margin-bottom: 3px; line-height: 1.3; }
.sb101-article .flow-time { font-size: 11px; color: #888; }
.sb101-article .flow-arrow { position: absolute; right: -9px; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; background: #FBDC81; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; color: #3d2d00; font-weight: 700; z-index: 1; }
@media (max-width: 480px) {
  .sb101-article .routine-flow { flex-direction: column; }
  .sb101-article .flow-step { border-right: none; border-bottom: 0.5px solid #e5e5e0; }
  .sb101-article .flow-step:last-child { border-bottom: none; }
  .sb101-article .flow-arrow { display: none; }
}

/* --- Warn callout (frequency warning) ----------------------- */
.sb101-article .warn-callout { border-left: 3px solid #f0a030; border-radius: 0 8px 8px 0; background: #fdf5e8; padding: 12px 16px; margin: 1.2rem 0; font-size: 13px; color: #111; }
.sb101-article .warn-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #a06000; margin-bottom: 5px; }

/* --- Insight callout (morning cleansing tip) ---------------- */
.sb101-article .insight-callout { border: 0.5px solid #e5e5e0; border-radius: 12px; padding: 16px 18px; margin: 1.6rem 0; background: #f8f8f5; }
.sb101-article .insight-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #8a6200; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.sb101-article .insight-label::before { content: ''; width: 8px; height: 8px; background: #FBDC81; border-radius: 50%; display: inline-block; }
.sb101-article .insight-text { font-size: 14px; color: #111; line-height: 1.75; }

/* --- Avoid table (products to retire) ----------------------- */
.sb101-article .avoid-table { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.6rem 0; }
.sb101-article .avoid-header { padding: 10px 16px; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #888; }
.sb101-article .avoid-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 16px; border-bottom: 0.5px solid #f0f0ec; }
.sb101-article .avoid-item:last-child { border-bottom: none; }
.sb101-article .avoid-badge { font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 20px; background: #fde8e8; color: #b03030; flex-shrink: 0; margin-top: 2px; letter-spacing: 0.04em; }
.sb101-article .avoid-name { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 3px; }
.sb101-article .avoid-reason { font-size: 12px; color: #888; line-height: 1.55; }

/* ============================================================
   Skin Barrier 101 — Episode 07 page-specific CSS
   Extracted from _artifacts/skin-barrier-101/ep07-three-roles-of-moisturizer.html
   Shared tokens live in sb101.css; this file carries only ep07-unique classes.
   All selectors are namespaced under `.sb101-article`.
   ============================================================ */

/* Trio grid — the 3 roles of a moisturizer (humectant / emollient / occlusive) */
.sb101-article .trio-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 1.4rem 0;
}
@media (max-width: 560px) {
  .sb101-article .trio-grid { grid-template-columns: 1fr; }
}
.sb101-article .trio-card {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  overflow: hidden;
}
.sb101-article .trio-card-header {
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sb101-article .trio-card.hum .trio-card-header { background: #e8f0fe; color: #1a3c8a; }
.sb101-article .trio-card.emo .trio-card-header { background: #e8f4e8; color: #1a5c2a; }
.sb101-article .trio-card.occ .trio-card-header { background: #fde8c8; color: #7a3c00; }
.sb101-article .trio-icon { font-size: 18px; }
.sb101-article .trio-body { padding: 12px 14px 14px; }
.sb101-article .trio-role { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 5px; }
.sb101-article .trio-desc { font-size: 12px; color: #666; line-height: 1.6; margin-bottom: 8px; }
.sb101-article .trio-eg { font-size: 11px; color: #888; }
.sb101-article .trio-eg span {
  background: #f8f8f5;
  border: 0.5px solid #e5e5e0;
  padding: 2px 7px;
  border-radius: 4px;
  margin-right: 4px;
  display: inline-block;
  margin-bottom: 3px;
}

/* Warning callout — the mist trap */
.sb101-article .warn-callout {
  border-left: 3px solid #f0a030;
  border-radius: 0 8px 8px 0;
  background: #fdf5e8;
  padding: 12px 16px;
  margin: 1.2rem 0;
  font-size: 13px;
  color: #111;
}
.sb101-article .warn-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #a06000;
  margin-bottom: 5px;
}

/* Order box — correct layering sequence */
.sb101-article .order-box {
  border: 0.5px solid #FBDC81;
  border-radius: 12px;
  padding: 20px 22px;
  margin: 1.6rem 0;
  background: #FFFDF5;
}
.sb101-article .order-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a6200;
  margin-bottom: 14px;
}
.sb101-article .order-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
}
.sb101-article .order-row:last-child { margin-bottom: 0; }
.sb101-article .order-step {
  font-size: 10px;
  font-weight: 700;
  background: #FBDC81;
  color: #5a4200;
  border-radius: 4px;
  padding: 3px 8px;
  flex-shrink: 0;
  margin-top: 2px;
}
.sb101-article .order-text { font-size: 13px; color: #111; line-height: 1.65; }

/* Habit card — 5 habits for sensitive skin */
.sb101-article .habit-card {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  margin: 1rem 0;
  overflow: hidden;
}
.sb101-article .habit-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #f8f8f5;
  border-bottom: 0.5px solid #e5e5e0;
}
.sb101-article .habit-num {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  background: #fff;
  border: 0.5px solid #d0cdc8;
  border-radius: 6px;
  padding: 2px 7px;
  flex-shrink: 0;
  margin-top: 1px;
}
.sb101-article .habit-title {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  line-height: 1.45;
  flex: 1;
}
.sb101-article .habit-body {
  padding: 14px 16px;
  font-size: 13px;
  color: #666;
  line-height: 1.7;
}

/* Insight callout — the core principle */
.sb101-article .insight-callout {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  padding: 16px 18px;
  margin: 1.6rem 0;
  background: #f8f8f5;
}
.sb101-article .insight-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #8a6200;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sb101-article .insight-label::before {
  content: '';
  width: 8px;
  height: 8px;
  background: #FBDC81;
  border-radius: 50%;
  display: inline-block;
}
.sb101-article .insight-text {
  font-size: 14px;
  color: #111;
  line-height: 1.75;
}

/* ============================================================
   Phase 2C page-specific CSS (ep09/10/11/12/13)
   ============================================================ */

/* sb101 — ep09 page-specific CSS (skin turnover & exfoliation) */
/* All selectors namespaced under .sb101-article. */
/* Globals (*, body, html) and shared classes already in sb101.css are skipped. */

.sb101-article .danger-callout { border-left: 3px solid #e05050; border-radius: 0 8px 8px 0; background: #fef0f0; padding: 14px 18px; margin: 1.4rem 0; font-size: 13px; color: #111; }
.sb101-article .danger-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #b03030; margin-bottom: 6px; }

.sb101-article .barrier-visual { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.6rem 0; }
.sb101-article .barrier-visual-header { padding: 10px 16px; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #888; }
.sb101-article .barrier-row { display: flex; align-items: flex-start; gap: 14px; padding: 13px 16px; border-bottom: 0.5px solid #f0f0ec; }
.sb101-article .barrier-row:last-child { border-bottom: none; }
.sb101-article .barrier-icon { width: 32px; height: 32px; border-radius: 8px; background: #FFF8E0; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.sb101-article .barrier-title { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 3px; }
.sb101-article .barrier-desc { font-size: 12px; color: #666; line-height: 1.6; }

.sb101-article .cycle-card { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .cycle-header { padding: 10px 16px; background: #1a1a18; border-bottom: 0.5px solid #333; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #FBDC81; }
.sb101-article .cycle-row { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid #f0f0ec; align-items: flex-start; }
.sb101-article .cycle-row:last-child { border-bottom: none; }
.sb101-article .cycle-badge { font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 20px; flex-shrink: 0; margin-top: 2px; }
.sb101-article .cycle-badge.bad { background: #fde8e8; color: #b03030; }
.sb101-article .cycle-badge.good { background: #d4f0e0; color: #1a5c35; }
.sb101-article .cycle-text { font-size: 13px; color: #444; line-height: 1.65; }
.sb101-article .cycle-text strong { color: #111; font-weight: 700; }

.sb101-article .turnover-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4rem 0; }
@media (max-width: 500px) {
  .sb101-article .turnover-grid { grid-template-columns: 1fr; }
}
.sb101-article .turnover-card { border: 0.5px solid #e5e5e0; border-radius: 12px; padding: 16px 18px; }
.sb101-article .turnover-card.young { border-top: 3px solid #FBDC81; }
.sb101-article .turnover-card.older { border-top: 3px solid #849F78; }
.sb101-article .turnover-age { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #888; margin-bottom: 6px; }
.sb101-article .turnover-days { font-size: 28px; font-weight: 800; color: #111; margin-bottom: 4px; }
.sb101-article .turnover-desc { font-size: 12px; color: #666; line-height: 1.6; }

.sb101-article .exception-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4rem 0; }
@media (max-width: 500px) {
  .sb101-article .exception-grid { grid-template-columns: 1fr; }
}
.sb101-article .exception-card { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .exception-card-header { padding: 10px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sb101-article .exception-card.ok .exception-card-header { background: #e8f4e8; color: #1a5c2a; }
.sb101-article .exception-card.never .exception-card-header { background: #fde8e8; color: #8a2020; }
.sb101-article .exception-body { padding: 12px 14px 14px; }
.sb101-article .exception-item { display: flex; gap: 8px; margin-bottom: 7px; align-items: flex-start; }
.sb101-article .exception-item:last-child { margin-bottom: 0; }
.sb101-article .exception-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.sb101-article .exception-card.ok .exception-dot { background: #2a8c4a; }
.sb101-article .exception-card.never .exception-dot { background: #cc4040; }
.sb101-article .exception-text { font-size: 12px; color: #444; line-height: 1.6; }

/* ============================================================================
   sb101 — ep10 page-specific CSS (Blackheads, Whiteheads & Pores)
   Namespaced under .sb101-article. Classes already in sb101.css are skipped.
   ============================================================================ */

/* Analogy card — "What sebum actually does" 4-up grid */
.sb101-article .analogy-card {
  border: 1.5px solid #FBDC81;
  border-radius: 12px;
  padding: 22px 24px;
  margin: 1.6rem 0;
  background: #FFFDF5;
}
.sb101-article .analogy-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #8a6200;
  margin-bottom: 12px;
}
.sb101-article .analogy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sb101-article .analogy-item {
  background: #fff;
  border: 0.5px solid #e5e5e0;
  border-radius: 10px;
  padding: 14px;
}
.sb101-article .analogy-emoji {
  font-size: 24px;
  margin-bottom: 6px;
}
.sb101-article .analogy-name {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
}
.sb101-article .analogy-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}

/* Trigger list — "5 sebum triggers to eliminate" */
.sb101-article .trigger-list {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  overflow: hidden;
  margin: 1.4rem 0;
}
.sb101-article .trigger-header {
  padding: 10px 16px;
  background: #f8f8f5;
  border-bottom: 0.5px solid #e5e5e0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #888;
}
.sb101-article .trigger-item {
  display: flex;
  gap: 14px;
  padding: 13px 16px;
  border-bottom: 0.5px solid #f0f0ec;
  align-items: flex-start;
}
.sb101-article .trigger-item:last-child {
  border-bottom: none;
}
.sb101-article .trigger-num {
  width: 22px;
  height: 22px;
  background: #FBDC81;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #5a4200;
  flex-shrink: 0;
  margin-top: 1px;
}
.sb101-article .trigger-title {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  margin-bottom: 3px;
}
.sb101-article .trigger-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}
.sb101-article .trigger-stat {
  display: inline-block;
  background: #fde8c8;
  color: #7a3c00;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  margin-top: 5px;
}

/* Solution card — Blackheads / Whiteheads / Enlarged Pores */
.sb101-article .solution-card {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  margin: 1.2rem 0;
  overflow: hidden;
}
.sb101-article .solution-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-bottom: 0.5px solid #e5e5e0;
}
.sb101-article .solution-header.black { background: #1a1a18; }
.sb101-article .solution-header.white { background: #f8f8f5; }
.sb101-article .solution-header.pore  { background: #f0e8f8; }
.sb101-article .solution-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.sb101-article .solution-header.black .solution-badge { background: #FBDC81; color: #3d2d00; }
.sb101-article .solution-header.white .solution-badge { background: #e5e5e0; color: #444; }
.sb101-article .solution-header.pore  .solution-badge { background: #d8c8f0; color: #4a2880; }
.sb101-article .solution-title {
  font-size: 13px;
  font-weight: 700;
}
.sb101-article .solution-header.black .solution-title { color: #fff; }
.sb101-article .solution-header.white .solution-title,
.sb101-article .solution-header.pore  .solution-title { color: #111; }
.sb101-article .solution-body {
  padding: 14px 16px;
}
.sb101-article .solution-step {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  align-items: flex-start;
}
.sb101-article .solution-step:last-child {
  margin-bottom: 0;
}
.sb101-article .solution-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FBDC81;
  flex-shrink: 0;
  margin-top: 7px;
}
.sb101-article .solution-text {
  font-size: 13px;
  color: #444;
  line-height: 1.65;
}
.sb101-article .solution-text strong {
  color: #111;
  font-weight: 700;
}

/* Danger callout — unused in current markup but defined in artifact */
.sb101-article .danger-callout {
  border-left: 3px solid #e05050;
  border-radius: 0 8px 8px 0;
  background: #fef0f0;
  padding: 12px 16px;
  margin: 1.2rem 0;
  font-size: 13px;
  color: #111;
}
.sb101-article .danger-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #b03030;
  margin-bottom: 5px;
}

/* Responsive — analogy grid collapses on narrow screens */
@media (max-width: 500px) {
  .sb101-article .analogy-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   sb101 ep11 — Page-specific CSS
   /pages/ep11-acne-causes-and-age-specific-management
   All selectors are namespaced under .sb101-article
   ============================================================ */

/* --- step-flow: 3-step acne formation diagram --- */
.sb101-article .step-flow {
  display: flex;
  align-items: stretch;
  margin: 1.6rem 0;
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  overflow: hidden;
}
.sb101-article .step-block {
  flex: 1;
  padding: 18px 16px;
  background: #fff;
  position: relative;
}
.sb101-article .step-block:not(:last-child) {
  border-right: 0.5px solid #e5e5e0;
}
.sb101-article .step-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  background: #FBDC81;
  color: #5a4200;
  padding: 2px 8px;
  border-radius: 10px;
  margin-bottom: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
/* step-name / step-desc / step-arrow already exist via shared sb101.css */

/* --- age-grid: teen vs adult comparison cards --- */
.sb101-article .age-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 1.4rem 0;
}
.sb101-article .age-card {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  overflow: hidden;
}
.sb101-article .age-card-header {
  padding: 14px 16px;
}
.sb101-article .age-card.teen .age-card-header {
  background: #e8f0fe;
}
.sb101-article .age-card.adult .age-card-header {
  background: #fdf0dc;
}
.sb101-article .age-card-label {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.sb101-article .age-card.teen .age-card-label {
  color: #1a3c8a;
}
.sb101-article .age-card.adult .age-card-label {
  color: #7a4800;
}
.sb101-article .age-card-title {
  font-size: 15px;
  font-weight: 800;
  color: #111;
  line-height: 1.3;
}
.sb101-article .age-card-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sb101-article .age-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.sb101-article .age-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #FBDC81;
  flex-shrink: 0;
  margin-top: 7px;
}
.sb101-article .age-text {
  font-size: 12.5px;
  color: #444;
  line-height: 1.6;
}
.sb101-article .age-text strong {
  color: #111;
  font-weight: 700;
}

/* --- solution-block: teen / adult action-list cards --- */
.sb101-article .solution-block {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  margin: 1.4rem 0;
  overflow: hidden;
}
.sb101-article .solution-block-header {
  padding: 12px 16px;
  border-bottom: 0.5px solid #e5e5e0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb101-article .solution-block.teen .solution-block-header {
  background: #e8f0fe;
}
.sb101-article .solution-block.adult .solution-block-header {
  background: #fdf0dc;
}
.sb101-article .solution-block-badge {
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.04em;
}
.sb101-article .solution-block.teen .solution-block-badge {
  background: #3a6ad4;
  color: #fff;
}
.sb101-article .solution-block.adult .solution-block-badge {
  background: #f0a030;
  color: #fff;
}
.sb101-article .solution-block-title {
  font-size: 13px;
  font-weight: 700;
  color: #111;
}
.sb101-article .solution-block-body {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sb101-article .solution-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.sb101-article .solution-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #FFF8E0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 1px;
}
.sb101-article .solution-text {
  font-size: 13px;
  color: #444;
  line-height: 1.65;
}
.sb101-article .solution-text strong {
  color: #111;
  font-weight: 700;
}

/* --- danger-callout: red-bordered warning box --- */
.sb101-article .danger-callout {
  border-left: 3px solid #e05050;
  border-radius: 0 8px 8px 0;
  background: #fef0f0;
  padding: 12px 16px;
  margin: 1.2rem 0;
  font-size: 13px;
  color: #111;
}
.sb101-article .danger-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #b03030;
  margin-bottom: 5px;
}

/* --- responsive: step-flow + age-grid stack on narrow screens --- */
@media (max-width: 560px) {
  .sb101-article .step-flow {
    flex-direction: column;
  }
  .sb101-article .step-block:not(:last-child) {
    border-right: none;
    border-bottom: 0.5px solid #e5e5e0;
  }
  .sb101-article .step-arrow {
    display: none;
  }
  .sb101-article .age-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   sb101 — ep12 page-specific CSS
   Source: _artifacts/skin-barrier-101/ep12-melasma-pigmentation-real-whitening.html
   Namespaced under .sb101-article
   New classes only (existing classes already covered by shared sb101.css):
     reality-grid, reality-card (myth/truth), reality-card-header, reality-card-body
     umbrella-card, umbrella-label, umbrella-row, umbrella-icon, umbrella-text
     factor-grid, factor-card (fixed/control), factor-card-header, factor-card-body,
       factor-row, factor-dot, factor-text
     action-list, action-header, action-item, action-icon, action-text
   ============================================================ */

.sb101-article .reality-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4rem 0; }
.sb101-article .reality-card { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .reality-card-header { padding: 11px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.sb101-article .reality-card.myth .reality-card-header { background: #fde8e8; color: #8a2020; }
.sb101-article .reality-card.truth .reality-card-header { background: #e8f4e8; color: #1a5c2a; }
.sb101-article .reality-card-body { padding: 13px 14px; font-size: 13px; color: #444; line-height: 1.7; }
.sb101-article .reality-card-body strong { color: #111; font-weight: 700; }

.sb101-article .umbrella-card { border: 1.5px solid #FBDC81; border-radius: 12px; padding: 22px 24px; margin: 1.6rem 0; background: #FFFDF5; }
.sb101-article .umbrella-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: #8a6200; margin-bottom: 14px; }
.sb101-article .umbrella-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.sb101-article .umbrella-row:last-child { margin-bottom: 0; }
.sb101-article .umbrella-icon { width: 32px; height: 32px; background: #FFF8E0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.sb101-article .umbrella-text { font-size: 13px; color: #444; line-height: 1.65; }
.sb101-article .umbrella-text strong { color: #111; font-weight: 700; }

.sb101-article .factor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4rem 0; }
.sb101-article .factor-card { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .factor-card-header { padding: 11px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sb101-article .factor-card.fixed .factor-card-header { background: #f0e8f8; color: #4a2880; }
.sb101-article .factor-card.control .factor-card-header { background: #e8f4e8; color: #1a5c2a; }
.sb101-article .factor-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.sb101-article .factor-row { display: flex; gap: 8px; align-items: flex-start; }
.sb101-article .factor-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.sb101-article .factor-card.fixed .factor-dot { background: #a080d0; }
.sb101-article .factor-card.control .factor-dot { background: #2a8c4a; }
.sb101-article .factor-text { font-size: 12.5px; color: #444; line-height: 1.6; }
.sb101-article .factor-text strong { color: #111; font-weight: 700; }

.sb101-article .action-list { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .action-header { padding: 10px 16px; background: #1a1a18; border-bottom: 0.5px solid #333; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #FBDC81; }
.sb101-article .action-item { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid #f0f0ec; align-items: flex-start; }
.sb101-article .action-item:last-child { border-bottom: none; }
.sb101-article .action-icon { width: 28px; height: 28px; background: #FFF8E0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.sb101-article .action-text { font-size: 13px; color: #444; line-height: 1.65; }
.sb101-article .action-text strong { color: #111; font-weight: 700; }

@media (max-width: 520px) {
  .sb101-article .reality-grid { grid-template-columns: 1fr; }
  .sb101-article .factor-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   sb101 — EP13 page-specific CSS (Anti-Aging & Sunscreen Guide)
   All selectors are namespaced under .sb101-article.
   Classes already present in shared sb101.css are SKIPPED.
   ============================================================ */

/* UVA vs UVB grid */
.sb101-article .uv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4rem 0; }
@media (max-width: 520px) {
  .sb101-article .uv-grid { grid-template-columns: 1fr; }
}
.sb101-article .uv-card { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .uv-card-header { padding: 12px 14px; }
.sb101-article .uv-card.uva .uv-card-header { background: #fde8c8; }
.sb101-article .uv-card.uvb .uv-card-header { background: #fde8e8; }
.sb101-article .uv-card-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; }
.sb101-article .uv-card.uva .uv-card-label { color: #7a3c00; }
.sb101-article .uv-card.uvb .uv-card-label { color: #8a2020; }
.sb101-article .uv-card-title { font-size: 14px; font-weight: 800; color: #111; }
.sb101-article .uv-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 7px; }
.sb101-article .uv-row { display: flex; gap: 8px; align-items: flex-start; }
.sb101-article .uv-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.sb101-article .uv-card.uva .uv-dot { background: #f0a030; }
.sb101-article .uv-card.uvb .uv-dot { background: #cc4040; }
.sb101-article .uv-text { font-size: 12.5px; color: #444; line-height: 1.6; }
.sb101-article .uv-text strong { color: #111; font-weight: 700; }

/* Amount card — "2 finger lengths" */
.sb101-article .amount-card { border: 1.5px solid #FBDC81; border-radius: 12px; padding: 22px 24px; margin: 1.6rem 0; background: #FFFDF5; }
.sb101-article .amount-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: #8a6200; margin-bottom: 16px; }
.sb101-article .amount-visual { display: flex; align-items: center; gap: 20px; margin-bottom: 16px; }
.sb101-article .amount-finger { text-align: center; }
.sb101-article .amount-finger-num { font-size: 52px; font-weight: 800; color: #111; line-height: 1; }
.sb101-article .amount-finger-label { font-size: 11px; color: #888; margin-top: 4px; }
.sb101-article .amount-arrow { font-size: 20px; color: #ccc; flex-shrink: 0; }
.sb101-article .amount-result { flex: 1; }
.sb101-article .amount-result-title { font-size: 14px; font-weight: 700; color: #111; margin-bottom: 4px; }
.sb101-article .amount-result-desc { font-size: 12px; color: #666; line-height: 1.6; }
.sb101-article .amount-warning { display: flex; gap: 10px; background: #fde8e8; border-radius: 8px; padding: 10px 12px; align-items: flex-start; }
.sb101-article .amount-warning-icon { font-size: 14px; flex-shrink: 0; }
.sb101-article .amount-warning-text { font-size: 12px; color: #8a2020; line-height: 1.6; }

/* Technique card — layering method */
.sb101-article .technique-card { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .technique-header { padding: 10px 16px; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #888; }
.sb101-article .technique-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.sb101-article .technique-row { display: flex; gap: 12px; align-items: flex-start; }
.sb101-article .technique-icon { width: 28px; height: 28px; background: #FFF8E0; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; margin-top: 1px; }
.sb101-article .technique-text { font-size: 13px; color: #444; line-height: 1.65; }
.sb101-article .technique-text strong { color: #111; font-weight: 700; }

/* Timing bar — protection duration */
.sb101-article .timing-bar { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .timing-header { padding: 10px 16px; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #888; }
.sb101-article .timing-body { padding: 16px; }
.sb101-article .timing-track { position: relative; height: 8px; background: #f0f0ec; border-radius: 4px; margin-bottom: 8px; }
.sb101-article .timing-fill-full { position: absolute; left: 0; top: 0; height: 8px; background: linear-gradient(to right, #2a8c4a, #FBDC81); border-radius: 4px; width: 100%; }
.sb101-article .timing-fill-half { position: absolute; left: 0; top: 0; height: 8px; background: linear-gradient(to right, #cc4040, #fde8c8); border-radius: 4px; width: 50%; }
.sb101-article .timing-labels { display: flex; justify-content: space-between; font-size: 11px; color: #888; margin-bottom: 12px; }

/* Picker grid — mineral vs chemical sunscreen */
.sb101-article .picker-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4rem 0; }
@media (max-width: 520px) {
  .sb101-article .picker-grid { grid-template-columns: 1fr; }
}
.sb101-article .picker-card { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; }
.sb101-article .picker-card-header { padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sb101-article .picker-card.mineral .picker-card-header { background: #e8f4e8; color: #1a5c2a; }
.sb101-article .picker-card.chemical .picker-card-header { background: #e8f0fe; color: #1a3c8a; }
.sb101-article .picker-card.avoid .picker-card-header { background: #fde8e8; color: #8a2020; }
.sb101-article .picker-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.sb101-article .picker-row { display: flex; gap: 8px; align-items: flex-start; }
.sb101-article .picker-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.sb101-article .picker-card.mineral .picker-dot { background: #2a8c4a; }
.sb101-article .picker-card.chemical .picker-dot { background: #3a6ad4; }
.sb101-article .picker-card.avoid .picker-dot { background: #cc4040; }
.sb101-article .picker-text { font-size: 12.5px; color: #444; line-height: 1.6; }
.sb101-article .picker-text strong { color: #111; font-weight: 700; }

/* ============================================================
   Phase 3+4 + ep08 page-specific CSS
   ep08 / ingredient × 3 / skin-type × 3
   ============================================================ */

/* ============================================================
   Skin Barrier 101 — Episode 08 page-specific CSS
   Source: _artifacts/skin-barrier-101/ep08-skincare-by-skin-type.html
   All selectors prefixed with .sb101-article namespace.
   Only contains classes NOT already present in sb101.css.
   ============================================================ */

/* ---- Layer Order Table (thinnest → thickest) ---- */
.sb101-article .layer-order { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .layer-header { padding: 11px 16px; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #888; }
.sb101-article .layer-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-bottom: 0.5px solid #f0f0ec; }
.sb101-article .layer-row:last-child { border-bottom: none; }
.sb101-article .layer-num { width: 24px; height: 24px; border-radius: 50%; background: #f0f0ec; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #888; flex-shrink: 0; margin-top: 1px; }
.sb101-article .layer-row.highlight .layer-num { background: #FBDC81; color: #5a4200; }
.sb101-article .layer-name { font-size: 13px; font-weight: 600; color: #111; min-width: 120px; flex-shrink: 0; }
.sb101-article .layer-tag { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; flex-shrink: 0; margin-top: 2px; }
.sb101-article .layer-tag.thin { background: #e8f4f8; color: #1a4a5c; }
.sb101-article .layer-tag.thick { background: #fde8e8; color: #8a2020; }
.sb101-article .layer-tag.optional { background: #f0f0ec; color: #666; }
.sb101-article .layer-desc { font-size: 12px; color: #888; line-height: 1.55; flex: 1; }

/* ---- Skill Card (application skills) ---- */
.sb101-article .skill-card-header { padding: 11px 16px; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #888; display: flex; align-items: center; gap: 8px; }
.sb101-article .skill-card-header::before { content: ''; width: 8px; height: 8px; background: #FBDC81; border-radius: 50%; }
.sb101-article .skill-card-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.sb101-article .skill-row { display: flex; gap: 12px; align-items: flex-start; }
.sb101-article .skill-icon { width: 28px; height: 28px; border-radius: 8px; background: #FFF8E0; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; margin-top: 1px; }
.sb101-article .skill-text { font-size: 13px; color: #111; line-height: 1.7; }
.sb101-article .skill-text strong { font-weight: 700; }

/* ---- Skin Type Cards (dry / oily / combo modifiers + body + badge + step) ---- */
.sb101-article .skin-card.dry .skin-card-header { background: #fdf0dc; color: #7a4800; }
.sb101-article .skin-card.oily .skin-card-header { background: #e8f0d4; color: #3a5c10; }
.sb101-article .skin-card.combo .skin-card-header { background: #e8f4f8; color: #1a4a5c; }
.sb101-article .skin-type-badge { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 10px; letter-spacing: 0.04em; margin-left: auto; }
.sb101-article .skin-card.dry .skin-type-badge { background: #f0a030; color: #fff; }
.sb101-article .skin-card.oily .skin-type-badge { background: #6ab04c; color: #fff; }
.sb101-article .skin-card.combo .skin-type-badge { background: #40a0cc; color: #fff; }
.sb101-article .skin-card-body { padding: 12px 14px 14px; }
.sb101-article .skin-step { display: flex; gap: 8px; margin-bottom: 8px; align-items: flex-start; }
.sb101-article .skin-step:last-child { margin-bottom: 0; }
.sb101-article .skin-step-dot { width: 6px; height: 6px; border-radius: 50%; background: #FBDC81; flex-shrink: 0; margin-top: 7px; }
.sb101-article .skin-step-text { font-size: 12px; color: #444; line-height: 1.6; }
.sb101-article .skin-step-text strong { color: #111; font-weight: 700; }

/* ============================================================
   sb101-body-ingredient-egf — page-specific styles
   Wrapper namespace: .sb101-article
   Skipped (already in shared sb101.css): hero, hero-inner, hero-eyebrow,
   hero-title, breadcrumb, sep, badge, kw, summary-box, summary-list,
   summary-title, check, insight-callout, insight-label, insight-text,
   danger-callout, danger-label, warn-callout, warn-label, age-grid,
   age-card, age-card-header, age-card-body, step-card, step-card-header,
   step-icon, step-list, step-item, step-num, step-q, step-note, step-tip,
   flow-arrow, p-dot, good, bad, toc-list, toc-item, active, post-nav,
   nav-card, nav-direction, nav-title, next, page-wrap, routine-flow,
   sidebar-card, sidebar-header, open.
   ============================================================ */

/* Hero extensions */
.sb101-article .hero-subtitle { font-size: 14px; color: #8a2a1e; font-weight: 500; margin-bottom: 20px; line-height: 1.5; }
.sb101-article .hero-oneliner { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--red-mid); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--ink2); line-height: 1.6; }
.sb101-article .hero-oneliner-icon { font-size: 18px; flex-shrink: 0; }
.sb101-article .hero-product-img { width: 100%; max-width: 220px; aspect-ratio: 3/4; background: #fff; border-radius: 16px; border: 1px solid var(--red-mid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 32px rgba(192,57,43,0.10); margin: 0 auto; }
.sb101-article .hero-cta-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.sb101-article .product-img-conc { font-size: 22px; font-weight: 800; color: var(--red); }
.sb101-article .product-img-label { font-size: 10px; font-weight: 700; color: var(--red); text-align: center; letter-spacing: 0.05em; text-transform: uppercase; }
.sb101-article .product-img-name { font-size: 13px; font-weight: 800; color: var(--ink); text-align: center; padding: 0 16px; line-height: 1.3; }

/* Badge variants */
.sb101-article .badge-category { background: var(--red); color: #fff; }
.sb101-article .badge-type { background: #fff; color: var(--red); border: 1px solid var(--red-mid); }

/* Buttons */
.sb101-article .btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; }
.sb101-article .btn-secondary { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--red); font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 8px; border: 1.5px solid var(--red); cursor: pointer; text-decoration: none; }

/* Layout grid */
.sb101-article .content-grid { display: grid; grid-template-columns: 1fr 280px; gap: 48px; align-items: start; margin-top: 48px; }
.sb101-article .sidebar { position: sticky; top: 24px; flex-direction: column; gap: 16px; }

/* Section */
.sb101-article .section { margin-bottom: 3rem; }
.sb101-article .section-eyebrow { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--red); margin-bottom: 8px; }
.sb101-article .section-title { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.01em; line-height: 1.3; }
.sb101-article .section-divider { height: 0.5px; background: var(--line); margin-bottom: 3rem; }
.sb101-article .prose-text { font-size: 15px; line-height: 1.85; color: #333; margin-bottom: 1rem; }
.sb101-article .prose-text:last-child { margin-bottom: 0; }
.sb101-article .kw-red { background: var(--red-light); color: #7a1a0e; font-weight: 700; padding: 1px 7px; border-radius: 12px; font-size: 0.92em; }

/* Age cards (twenties/thirties variants) */
.sb101-article .age-card.twenties .age-card-header { background: #f8f8f5; color: #888; }
.sb101-article .age-card.thirties .age-card-header { background: var(--red); color: #fff; }
.sb101-article .age-pct { font-size: 28px; font-weight: 800; margin-bottom: 4px; }
.sb101-article .age-card.twenties .age-pct { color: #ccc; }
.sb101-article .age-card.thirties .age-pct { color: var(--red); }
.sb101-article .age-sub { font-size: 11px; color: #888; margin-bottom: 10px; }
.sb101-article .age-card.thirties .age-sub { color: #8a2a1e; }
.sb101-article .age-traits { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sb101-article .age-traits li { font-size: 12px; color: var(--ink2); display: flex; gap: 7px; align-items: flex-start; line-height: 1.5; }
.sb101-article .a-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.sb101-article .twenties .a-dot { background: #ccc; }
.sb101-article .thirties .a-dot { background: var(--red); }

/* Compare table */
.sb101-article .compare-table { border: 0.5px solid var(--line); border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .compare-header-row { display: grid; grid-template-columns: 110px 1fr 1fr; background: var(--ink); }
.sb101-article .compare-col-head { padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--yellow); }
.sb101-article .compare-col-head:not(:first-child) { border-left: 0.5px solid #333; }
.sb101-article .compare-row { display: grid; grid-template-columns: 110px 1fr 1fr; border-bottom: 0.5px solid var(--line2); }
.sb101-article .compare-row:last-child { border-bottom: none; }
.sb101-article .compare-row:nth-child(even) { background: var(--surface); }
.sb101-article .compare-cell { padding: 11px 14px; font-size: 12.5px; color: var(--ink2); line-height: 1.5; border-left: 0.5px solid var(--line2); }
.sb101-article .compare-cell:first-child { border-left: none; font-weight: 600; color: var(--ink); font-size: 12px; }
.sb101-article .compare-cell.winner { color: var(--red); font-weight: 600; }

/* Routine flow nodes */
.sb101-article .flow-node { flex: 1; min-width: 90px; border: 0.5px solid var(--line); border-radius: 10px; padding: 12px 10px; text-align: center; background: #fff; }
.sb101-article .flow-node.highlight { border-color: var(--red); background: var(--red-light); }
.sb101-article .flow-node-step { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #888; margin-bottom: 4px; }
.sb101-article .flow-node.highlight .flow-node-step { color: var(--red); }
.sb101-article .flow-node-name { font-size: 12px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.sb101-article .flow-node.highlight .flow-node-name { color: var(--red); }
.sb101-article .flow-node-sub { font-size: 10px; color: #888; margin-top: 2px; }

/* Pairing grid (good/bad cards) */
.sb101-article .pairing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4rem 0; }
.sb101-article .pairing-card { border: 0.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.sb101-article .pairing-card.good .pairing-header { background: #e8f5e8; color: #1a5c2a; }
.sb101-article .pairing-card.bad .pairing-header { background: var(--red-light); color: var(--red); }
.sb101-article .pairing-header { padding: 10px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sb101-article .pairing-list { list-style: none; padding: 10px 0; }
.sb101-article .pairing-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 14px; border-bottom: 0.5px solid var(--line2); }
.sb101-article .pairing-item:last-child { border-bottom: none; }
.sb101-article .pairing-ing { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.sb101-article .pairing-reason { font-size: 11px; color: #888; line-height: 1.45; }
.sb101-article .good .p-dot { background: #2a8c3a; }
.sb101-article .bad .p-dot { background: var(--red); }

/* QA collapsible */
.sb101-article .qa-list { display: flex; flex-direction: column; gap: 2px; margin: 1.4rem 0; }
.sb101-article .qa-item { border: 0.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.sb101-article .qa-q { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; background: var(--surface); }
.sb101-article .qa-q:hover { background: #f0f0ec; }
.sb101-article .qa-q-icon { font-size: 12px; font-weight: 800; color: var(--red); flex-shrink: 0; margin-top: 2px; background: var(--red-light); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sb101-article .qa-q-text { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.5; flex: 1; }
.sb101-article .qa-chevron { font-size: 12px; color: #888; flex-shrink: 0; margin-top: 2px; transition: transform 0.2s; }
.sb101-article .qa-a { display: none; padding: 12px 16px 14px 48px; font-size: 13px; color: #444; line-height: 1.75; border-top: 0.5px solid var(--line); background: #fff; }
.sb101-article .qa-item.open .qa-a { display: block; }
.sb101-article .qa-item.open .qa-chevron { transform: rotate(180deg); }

/* Buying list */
.sb101-article .buying-list { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 1.2rem 0; }
.sb101-article .buying-item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border: 0.5px solid var(--line); border-radius: 10px; }
.sb101-article .buying-icon { font-size: 20px; flex-shrink: 0; }
.sb101-article .buying-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 3px; }
.sb101-article .buying-desc { font-size: 12px; color: #666; line-height: 1.55; }

/* Summary check icon (red circle variant) */
.sb101-article .s-check { width: 18px; height: 18px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.sb101-article .s-check svg { width: 10px; height: 10px; }

/* Sidebar CTA card */
.sb101-article .cta-card { border: 1.5px solid var(--red); border-radius: 14px; overflow: hidden; }
.sb101-article .cta-card-product { padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--red-light); border-bottom: 1px solid var(--red-mid); }
.sb101-article .cta-product-img { width: 80px; height: 100px; background: #fff; border-radius: 10px; border: 1px solid var(--red-mid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-bottom: 8px; }
.sb101-article .cta-pct { font-size: 14px; font-weight: 800; color: var(--red); text-align: center; line-height: 1.2; }
.sb101-article .cta-ing { font-size: 8px; font-weight: 700; color: #8a2a1e; text-transform: uppercase; letter-spacing: 0.05em; }
.sb101-article .cta-product-name { font-size: 13px; font-weight: 800; color: var(--ink); text-align: center; }
.sb101-article .cta-product-sub { font-size: 11px; color: #8a2a1e; text-align: center; margin-top: 2px; }
.sb101-article .cta-card-body { padding: 16px; }
.sb101-article .cta-traits { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sb101-article .cta-traits li { font-size: 12px; color: var(--ink2); display: flex; gap: 7px; align-items: flex-start; line-height: 1.45; }
.sb101-article .cta-check { width: 16px; height: 16px; background: var(--red-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; font-size: 9px; color: var(--red); }
.sb101-article .btn-cta-full { display: block; width: 100%; text-align: center; background: var(--red); color: #fff; font-size: 13px; font-weight: 700; padding: 12px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; margin-bottom: 8px; }
.sb101-article .btn-cta-ghost { display: block; width: 100%; text-align: center; background: #fff; color: var(--red); font-size: 12px; font-weight: 600; padding: 10px; border-radius: 8px; border: 1.5px solid var(--red-mid); cursor: pointer; text-decoration: none; }

/* Mobile sticky CTA bar */
.sb101-article .mobile-sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); padding: 12px 16px; z-index: 100; gap: 10px; align-items: center; box-shadow: 0 -4px 20px rgba(0,0,0,0.06); }
.sb101-article .mobile-sticky-left { flex: 1; }
.sb101-article .mobile-sticky-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.sb101-article .mobile-sticky-sub { font-size: 11px; color: #888; }
.sb101-article .mobile-sticky-btn { background: var(--red); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  .sb101-article .hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 16px 28px; }
  .sb101-article .hero-product-img { order: -1; }
  .sb101-article .hero-title { font-size: 26px; }
}

@media (max-width: 768px) {
  .sb101-article .content-grid { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .sb101-article .sidebar { display: none !important; }
  .sb101-article .mobile-sticky-cta { display: flex !important; }
}

@media (min-width: 769px) {
  .sb101-article .sidebar { display: flex !important; }
  .sb101-article .mobile-sticky-cta { display: none !important; }
}

@media (max-width: 500px) {
  .sb101-article .age-grid { grid-template-columns: 1fr; }
  .sb101-article .pairing-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .sb101-article .compare-header-row,
  .sb101-article .compare-row { grid-template-columns: 80px 1fr 1fr; }
  .sb101-article .compare-cell { padding: 9px 10px; font-size: 11px; }
  .sb101-article .routine-flow { gap: 6px; }
  .sb101-article .flow-arrow { display: none; }
}

/* ============================================================
   sb101 — ingredient-panthenol page CSS
   Extracted from _artifacts/skin-barrier-101/ingredient-panthenol.html
   All selectors namespaced under `.sb101-article`.
   Skips: *, body, html, and selectors already present in sb101.css.
   ============================================================ */

/* hero CTA row + oneliner + product image (badge / btn / hero subtitle etc.) */
.sb101-article .badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.sb101-article .badge-category { background: var(--sage); color: #fff; }
.sb101-article .badge-type { background: #fff; color: var(--sage); border: 1px solid var(--sage-mid); }
.sb101-article .hero-subtitle { font-size: 14px; color: #5a3a9a; font-weight: 500; margin-bottom: 20px; line-height: 1.5; }
.sb101-article .hero-oneliner { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--sage-mid); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--ink2); line-height: 1.6; }
.sb101-article .hero-oneliner-icon { font-size: 18px; flex-shrink: 0; }
.sb101-article .hero-product-img { width: 100%; max-width: 220px; aspect-ratio: 3/4; background: #fff; border-radius: 16px; border: 1px solid var(--sage-mid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 32px rgba(124,92,191,0.12); margin: 0 auto; }
.sb101-article .product-img-label { font-size: 11px; font-weight: 700; color: var(--sage); text-align: center; letter-spacing: 0.05em; text-transform: uppercase; }
.sb101-article .product-img-name { font-size: 14px; font-weight: 800; color: var(--ink); text-align: center; padding: 0 16px; line-height: 1.3; }
.sb101-article .product-img-conc { font-size: 28px; font-weight: 800; color: var(--sage); }
.sb101-article .hero-cta-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.sb101-article .btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--sage); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; }
.sb101-article .btn-secondary { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--sage); font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 8px; border: 1.5px solid var(--sage); cursor: pointer; text-decoration: none; }

/* content layout */
.sb101-article .content-grid { display: grid; grid-template-columns: 1fr 280px; gap: 48px; align-items: start; margin-top: 48px; }

/* section heads */
.sb101-article .section { margin-bottom: 3rem; }
.sb101-article .section-eyebrow { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--sage); margin-bottom: 8px; }
.sb101-article .section-title { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.01em; line-height: 1.3; }
.sb101-article .section-divider { height: 0.5px; background: var(--line); margin-bottom: 3rem; }
.sb101-article .prose-text { font-size: 15px; line-height: 1.85; color: #333; margin-bottom: 1rem; }
.sb101-article .prose-text:last-child { margin-bottom: 0; }
.sb101-article .kw-sage { background: var(--sage-light); color: #3a1a7a; font-weight: 700; padding: 1px 7px; border-radius: 12px; font-size: 0.92em; }

/* comparison table (Panthenol vs HA) */
.sb101-article .compare-table { border: 0.5px solid var(--line); border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .compare-header-row { display: grid; grid-template-columns: 1fr 1fr 1fr; background: var(--ink); }
.sb101-article .compare-col-head { padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--yellow); }
.sb101-article .compare-col-head:not(:first-child) { border-left: 0.5px solid #333; }
.sb101-article .compare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 0.5px solid var(--line2); }
.sb101-article .compare-row:last-child { border-bottom: none; }
.sb101-article .compare-row:nth-child(even) { background: var(--surface); }
.sb101-article .compare-cell { padding: 11px 14px; font-size: 12.5px; color: var(--ink2); line-height: 1.5; border-left: 0.5px solid var(--line2); }
.sb101-article .compare-cell:first-child { border-left: none; font-weight: 600; color: var(--ink); }

/* concentration split cards */
.sb101-article .conc-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4rem 0; }
.sb101-article .conc-card { border: 0.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.sb101-article .conc-card-header { padding: 10px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sb101-article .conc-card.standard .conc-card-header { background: #f8f8f5; color: #888; }
.sb101-article .conc-card.demaf .conc-card-header { background: var(--sage); color: #fff; }
.sb101-article .conc-card-body { padding: 14px; }
.sb101-article .conc-pct { font-size: 32px; font-weight: 800; margin-bottom: 4px; }
.sb101-article .conc-card.standard .conc-pct { color: #ccc; }
.sb101-article .conc-card.demaf .conc-pct { color: var(--sage); }
.sb101-article .conc-label { font-size: 11px; color: #888; margin-bottom: 10px; }
.sb101-article .conc-card.demaf .conc-label { color: #5a3a9a; }
.sb101-article .conc-traits { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sb101-article .conc-traits li { font-size: 12px; color: var(--ink2); display: flex; gap: 7px; align-items: flex-start; line-height: 1.5; }
.sb101-article .conc-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.sb101-article .standard .conc-dot { background: #ccc; }
.sb101-article .demaf .conc-dot { background: var(--sage); }

/* efficacy bars */
.sb101-article .efficacy-list { display: flex; flex-direction: column; gap: 12px; margin: 1.4rem 0; }
.sb101-article .efficacy-item { display: flex; align-items: center; gap: 12px; }
.sb101-article .efficacy-label { font-size: 12px; font-weight: 600; color: var(--ink); width: 130px; flex-shrink: 0; line-height: 1.35; }
.sb101-article .efficacy-bars { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.sb101-article .efficacy-bar-row { display: flex; align-items: center; gap: 8px; }
.sb101-article .efficacy-bar-label { font-size: 10px; color: #888; width: 36px; flex-shrink: 0; }
.sb101-article .efficacy-bar-track { flex: 1; height: 8px; background: var(--line); border-radius: 20px; overflow: hidden; }
.sb101-article .efficacy-bar-fill { height: 8px; border-radius: 20px; }
.sb101-article .efficacy-bar-fill.low { background: #ccc; }
.sb101-article .efficacy-bar-fill.high { background: var(--sage); }

/* step-card additions (icon / title / sub) */
.sb101-article .step-icon { width: 28px; height: 28px; background: var(--sage); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.sb101-article .step-title { font-size: 13px; font-weight: 700; color: var(--ink); }
.sb101-article .step-sub { font-size: 11px; color: #888; margin-top: 1px; }

/* pairing grid */
.sb101-article .pairing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4rem 0; }
.sb101-article .pairing-card { border: 0.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.sb101-article .pairing-header { padding: 10px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sb101-article .pairing-card.good .pairing-header { background: var(--sage-light); color: #3a1a7a; }
.sb101-article .pairing-card.caution .pairing-header { background: #fff8e8; color: #7a5000; }
.sb101-article .pairing-list { list-style: none; padding: 10px 0; }
.sb101-article .pairing-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 14px; border-bottom: 0.5px solid var(--line2); }
.sb101-article .pairing-item:last-child { border-bottom: none; }
.sb101-article .pairing-ing { font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.sb101-article .pairing-reason { font-size: 11px; color: #888; line-height: 1.45; }
.sb101-article .good .p-dot { background: var(--sage); }
.sb101-article .caution .p-dot { background: #e0a030; }

/* Q&A accordion */
.sb101-article .qa-list { display: flex; flex-direction: column; gap: 2px; margin: 1.4rem 0; }
.sb101-article .qa-item { border: 0.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.sb101-article .qa-q { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; background: var(--surface); }
.sb101-article .qa-q:hover { background: #f0f0ec; }
.sb101-article .qa-q-icon { font-size: 12px; font-weight: 800; color: var(--sage); flex-shrink: 0; margin-top: 2px; background: var(--sage-light); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.sb101-article .qa-q-text { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.5; flex: 1; }
.sb101-article .qa-chevron { font-size: 12px; color: #888; flex-shrink: 0; margin-top: 2px; transition: transform 0.2s; }
.sb101-article .qa-a { display: none; padding: 12px 16px 14px 48px; font-size: 13px; color: #444; line-height: 1.75; border-top: 0.5px solid var(--line); background: #fff; }
.sb101-article .qa-item.open .qa-a { display: block; }
.sb101-article .qa-item.open .qa-chevron { transform: rotate(180deg); }

/* sidebar (desktop CTA column for ingredient page) */
.sb101-article .sidebar { position: sticky; top: 24px; flex-direction: column; gap: 16px; }
.sb101-article .cta-card { border: 1.5px solid var(--sage); border-radius: 14px; overflow: hidden; }
.sb101-article .cta-card-product { padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--sage-light); border-bottom: 1px solid var(--sage-mid); }
.sb101-article .cta-product-img { width: 80px; height: 100px; background: #fff; border-radius: 10px; border: 1px solid var(--sage-mid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-bottom: 8px; }
.sb101-article .cta-pct { font-size: 22px; font-weight: 800; color: var(--sage); }
.sb101-article .cta-ing { font-size: 8px; font-weight: 700; color: #5a3a9a; text-transform: uppercase; letter-spacing: 0.05em; }
.sb101-article .cta-product-name { font-size: 13px; font-weight: 800; color: var(--ink); text-align: center; }
.sb101-article .cta-product-sub { font-size: 11px; color: #5a3a9a; text-align: center; margin-top: 2px; }
.sb101-article .cta-card-body { padding: 16px; }
.sb101-article .cta-traits { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sb101-article .cta-traits li { font-size: 12px; color: var(--ink2); display: flex; gap: 7px; align-items: flex-start; line-height: 1.45; }
.sb101-article .cta-check { width: 16px; height: 16px; background: var(--sage-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; font-size: 9px; color: var(--sage); }
.sb101-article .btn-cta-full { display: block; width: 100%; text-align: center; background: var(--sage); color: #fff; font-size: 13px; font-weight: 700; padding: 12px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; margin-bottom: 8px; }
.sb101-article .btn-cta-ghost { display: block; width: 100%; text-align: center; background: #fff; color: var(--sage); font-size: 12px; font-weight: 600; padding: 10px; border-radius: 8px; border: 1.5px solid var(--sage-mid); cursor: pointer; text-decoration: none; }

/* mobile sticky CTA */
.sb101-article .mobile-sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); padding: 12px 16px; z-index: 100; gap: 10px; align-items: center; box-shadow: 0 -4px 20px rgba(0,0,0,0.06); }
.sb101-article .mobile-sticky-left { flex: 1; }
.sb101-article .mobile-sticky-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.sb101-article .mobile-sticky-sub { font-size: 11px; color: #888; }
.sb101-article .mobile-sticky-btn { background: var(--sage); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; white-space: nowrap; }

/* summary box — s-check (ingredient page variant: filled sage circle) */
.sb101-article .s-check { width: 18px; height: 18px; background: var(--sage); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.sb101-article .s-check svg { width: 10px; height: 10px; }

/* responsive */
@media (max-width: 720px) {
  .sb101-article .hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 16px 28px; }
  .sb101-article .hero-product-img { order: -1; }
  .sb101-article .hero-title { font-size: 26px; }
}
@media (max-width: 768px) {
  .sb101-article .content-grid { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .sb101-article .sidebar { display: none !important; }
  .sb101-article .mobile-sticky-cta { display: flex !important; }
}
@media (min-width: 769px) {
  .sb101-article .sidebar { display: flex !important; }
  .sb101-article .mobile-sticky-cta { display: none !important; }
}
@media (max-width: 480px) {
  .sb101-article .compare-header-row,
  .sb101-article .compare-row { grid-template-columns: 90px 1fr 1fr; }
  .sb101-article .compare-cell { padding: 9px 10px; font-size: 11.5px; }
}
@media (max-width: 500px) {
  .sb101-article .conc-split { grid-template-columns: 1fr; }
  .sb101-article .pairing-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   sb101 — ingredient-squalane page-specific CSS
   Generated from _artifacts/skin-barrier-101/ingredient-squalane.html
   All selectors namespaced under .sb101-article
   SKIPPED (already in shared sb101.css): *, body, html, .hero,
     .hero-inner, .hero-eyebrow, .hero-title, .breadcrumb, .sep,
     .page-wrap, .kw, .insight-callout, .insight-label, .insight-text,
     .warn-callout, .warn-label, .summary-box, .summary-list, .summary-title
   ============================================================ */

/* --- Hero extras --- */
.sb101-article .hero-eyebrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.sb101-article .badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.sb101-article .badge-category { background: var(--gold); color: #fff; }
.sb101-article .badge-type { background: #fff; color: var(--gold); border: 1px solid var(--gold-mid); }
.sb101-article .hero-title span { color: var(--gold); }
.sb101-article .hero-subtitle { font-size: 14px; color: #7a5c00; font-weight: 500; margin-bottom: 20px; line-height: 1.5; }
.sb101-article .hero-oneliner { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--gold-mid); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: var(--ink2); line-height: 1.6; }
.sb101-article .hero-oneliner-icon { font-size: 18px; flex-shrink: 0; }
.sb101-article .hero-product-img { width: 100%; max-width: 220px; aspect-ratio: 3/4; background: #fff; border-radius: 16px; border: 1px solid var(--gold-mid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 32px rgba(212,160,23,0.12); margin: 0 auto; }
.sb101-article .product-img-icon { font-size: 36px; }
.sb101-article .product-img-conc { font-size: 15px; font-weight: 800; color: var(--gold); text-align: center; line-height: 1.2; }
.sb101-article .product-img-label { font-size: 10px; font-weight: 700; color: var(--gold); text-align: center; letter-spacing: 0.05em; text-transform: uppercase; }
.sb101-article .product-img-name { font-size: 13px; font-weight: 800; color: var(--ink); text-align: center; padding: 0 16px; line-height: 1.3; }
.sb101-article .hero-cta-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.sb101-article .btn-primary { display: inline-flex; align-items: center; gap: 6px; background: var(--gold); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; }
.sb101-article .btn-secondary { display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--gold); font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 8px; border: 1.5px solid var(--gold); cursor: pointer; text-decoration: none; }

/* --- Layout: content grid + sidebar --- */
.sb101-article .content-grid { display: grid; grid-template-columns: 1fr 280px; gap: 48px; align-items: start; margin-top: 40px; }

/* --- Section system --- */
.sb101-article .section { margin-bottom: 3rem; }
.sb101-article .section-eyebrow { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.09em; color: var(--gold); margin-bottom: 8px; }
.sb101-article .section-title { font-size: 20px; font-weight: 800; color: var(--ink); margin-bottom: 14px; letter-spacing: -0.01em; line-height: 1.3; }
.sb101-article .section-divider { height: 0.5px; background: var(--line); margin-bottom: 3rem; }
.sb101-article .prose-text { font-size: 15px; line-height: 1.85; color: #333; margin-bottom: 1rem; }
.sb101-article .prose-text:last-child { margin-bottom: 0; }
.sb101-article .kw-gold { background: var(--gold-light); color: #6b4800; font-weight: 700; padding: 1px 7px; border-radius: 12px; font-size: 0.92em; border: 0.5px solid var(--gold-mid); }

/* --- Function grid (3-up icon cards) --- */
.sb101-article .function-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 1.4rem 0; }
.sb101-article .func-card { border: 0.5px solid var(--line); border-radius: 12px; padding: 16px 14px; }
.sb101-article .func-icon { font-size: 22px; margin-bottom: 8px; }
.sb101-article .func-title { font-size: 12px; font-weight: 800; color: var(--ink); margin-bottom: 5px; }
.sb101-article .func-desc { font-size: 12px; color: #666; line-height: 1.55; }

/* --- Truth table (what-you-want vs. what-delivers) --- */
.sb101-article .truth-table { border: 0.5px solid var(--line); border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .truth-header-row { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink); }
.sb101-article .truth-col-head { padding: 10px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--yellow); }
.sb101-article .truth-col-head:last-child { border-left: 0.5px solid #333; }
.sb101-article .truth-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 0.5px solid var(--line2); }
.sb101-article .truth-row:last-child { border-bottom: none; }
.sb101-article .truth-row:nth-child(even) { background: var(--surface); }
.sb101-article .truth-cell { padding: 12px 16px; font-size: 12.5px; color: var(--ink2); line-height: 1.55; }
.sb101-article .truth-cell:last-child { border-left: 0.5px solid var(--line2); }
.sb101-article .truth-cell.label { font-weight: 700; color: var(--ink); }
.sb101-article .truth-cell.good { color: #2a6c3a; }

/* --- Compare split (avoid vs. choose) --- */
.sb101-article .compare-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 1.4rem 0; }
.sb101-article .cmp-card { border: 0.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.sb101-article .cmp-header { padding: 10px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.sb101-article .cmp-card.avoid .cmp-header { background: #fef0f0; color: #b03030; }
.sb101-article .cmp-card.choose .cmp-header { background: var(--gold-light); color: #7a5c00; }
.sb101-article .cmp-body { padding: 14px; }
.sb101-article .cmp-name { font-size: 18px; font-weight: 800; margin-bottom: 5px; }
.sb101-article .cmp-card.avoid .cmp-name { color: #ccc; }
.sb101-article .cmp-card.choose .cmp-name { color: var(--gold); }
.sb101-article .cmp-sub { font-size: 11px; color: #888; margin-bottom: 10px; }
.sb101-article .cmp-traits { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sb101-article .cmp-traits li { font-size: 12px; color: var(--ink2); display: flex; gap: 7px; align-items: flex-start; line-height: 1.5; }
.sb101-article .c-dot { width: 4px; height: 4px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.sb101-article .avoid .c-dot { background: #e05050; }
.sb101-article .choose .c-dot { background: var(--gold); }

/* --- Skin-type list --- */
.sb101-article .skintype-list { display: flex; flex-direction: column; gap: 10px; margin: 1.4rem 0; }
.sb101-article .skintype-item { border: 0.5px solid var(--line); border-radius: 12px; overflow: hidden; display: flex; }
.sb101-article .skintype-label { width: 90px; flex-shrink: 0; background: var(--surface); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--ink); text-align: center; padding: 14px 10px; border-right: 0.5px solid var(--line); line-height: 1.35; }
.sb101-article .skintype-label.highlight { background: var(--gold-light); color: #7a5c00; }
.sb101-article .skintype-content { padding: 14px 16px; flex: 1; }
.sb101-article .skintype-tip { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.sb101-article .skintype-desc { font-size: 12px; color: #666; line-height: 1.6; }
.sb101-article .skintype-badge { display: inline-block; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 20px; margin-top: 6px; background: var(--gold-light); color: #7a5c00; border: 0.5px solid var(--gold-mid); }

/* --- Q&A accordion --- */
.sb101-article .qa-list { display: flex; flex-direction: column; gap: 2px; margin: 1.4rem 0; }
.sb101-article .qa-item { border: 0.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.sb101-article .qa-q { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; background: var(--surface); }
.sb101-article .qa-q:hover { background: #f0f0ec; }
.sb101-article .qa-q-icon { font-size: 12px; font-weight: 800; color: var(--gold); flex-shrink: 0; margin-top: 2px; background: var(--gold-light); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 0.5px solid var(--gold-mid); }
.sb101-article .qa-q-text { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.5; flex: 1; }
.sb101-article .qa-chevron { font-size: 12px; color: #888; flex-shrink: 0; margin-top: 2px; transition: transform 0.2s; }
.sb101-article .qa-a { display: none; padding: 12px 16px 14px 48px; font-size: 13px; color: #444; line-height: 1.75; border-top: 0.5px solid var(--line); background: #fff; }
.sb101-article .qa-item.open .qa-a { display: block; }
.sb101-article .qa-item.open .qa-chevron { transform: rotate(180deg); }

/* --- Summary box checkmark (paired with shared .summary-box) --- */
.sb101-article .s-check { width: 18px; height: 18px; background: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; }
.sb101-article .s-check svg { width: 10px; height: 10px; }

/* --- Sidebar CTA card --- */
.sb101-article .sidebar { position: sticky; top: 24px; flex-direction: column; gap: 16px; }
.sb101-article .cta-card { border: 1.5px solid var(--gold); border-radius: 14px; overflow: hidden; }
.sb101-article .cta-card-product { padding: 20px; display: flex; flex-direction: column; align-items: center; gap: 4px; background: var(--gold-light); border-bottom: 1px solid var(--gold-mid); }
.sb101-article .cta-product-img { width: 80px; height: 100px; background: #fff; border-radius: 10px; border: 1px solid var(--gold-mid); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; margin-bottom: 8px; }
.sb101-article .cta-icon { font-size: 28px; }
.sb101-article .cta-ing { font-size: 8px; font-weight: 700; color: #7a5c00; text-transform: uppercase; letter-spacing: 0.05em; }
.sb101-article .cta-product-name { font-size: 13px; font-weight: 800; color: var(--ink); text-align: center; }
.sb101-article .cta-product-sub { font-size: 11px; color: #7a5c00; text-align: center; margin-top: 2px; }
.sb101-article .cta-card-body { padding: 16px; }
.sb101-article .cta-traits { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.sb101-article .cta-traits li { font-size: 12px; color: var(--ink2); display: flex; gap: 7px; align-items: flex-start; line-height: 1.45; }
.sb101-article .cta-check { width: 16px; height: 16px; background: var(--gold-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 1px; font-size: 9px; color: var(--gold); border: 0.5px solid var(--gold-mid); }
.sb101-article .btn-cta-full { display: block; width: 100%; text-align: center; background: var(--gold); color: #fff; font-size: 13px; font-weight: 700; padding: 12px; border-radius: 8px; border: none; cursor: pointer; text-decoration: none; margin-bottom: 8px; }
.sb101-article .btn-cta-ghost { display: block; width: 100%; text-align: center; background: #fff; color: var(--gold); font-size: 12px; font-weight: 600; padding: 10px; border-radius: 8px; border: 1.5px solid var(--gold-mid); cursor: pointer; text-decoration: none; }

/* --- Mobile sticky CTA --- */
.sb101-article .mobile-sticky-cta { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); padding: 12px 16px; z-index: 100; gap: 10px; align-items: center; box-shadow: 0 -4px 20px rgba(0,0,0,0.06); }
.sb101-article .mobile-sticky-left { flex: 1; }
.sb101-article .mobile-sticky-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.sb101-article .mobile-sticky-sub { font-size: 11px; color: #888; }
.sb101-article .mobile-sticky-btn { background: var(--gold); color: #fff; font-size: 13px; font-weight: 700; padding: 10px 20px; border-radius: 8px; border: none; cursor: pointer; white-space: nowrap; }

/* ============================================================
   Responsive overrides (selectors prefixed inside @media)
   ============================================================ */
@media (max-width: 720px) {
  .sb101-article .hero-inner { grid-template-columns: 1fr; gap: 24px; padding: 32px 16px 28px; }
  .sb101-article .hero-product-img { order: -1; }
  .sb101-article .hero-title { font-size: 26px; }
}

@media (max-width: 768px) {
  .sb101-article .page-wrap { padding: 0 16px 6rem; }
  .sb101-article .content-grid { grid-template-columns: 1fr; gap: 0; margin-top: 32px; }
  .sb101-article .sidebar { display: none !important; }
  .sb101-article .mobile-sticky-cta { display: flex !important; }
}

@media (min-width: 769px) {
  .sb101-article .sidebar { display: flex !important; }
  .sb101-article .mobile-sticky-cta { display: none !important; }
}

@media (max-width: 560px) {
  .sb101-article .function-grid { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .sb101-article .compare-split { grid-template-columns: 1fr; }
}

/* ============================================================
   Skin Barrier 101 — page CSS for /pages/skin-type-dry-skin
   Generated from _artifacts/skin-barrier-101/skin-type-dry-skin.html (Phase 4).
   All selectors namespaced under .sb101-article.
   Selectors already covered by shared sb101.css are intentionally omitted.
   ============================================================ */

/* Guide badge (Dry Skin · Complete Guide) */
.sb101-article .guide-badge {
  display: inline-block;
  background: #f0a030;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

/* Definition box (The simple version) */
.sb101-article .definition-box {
  border: 1.5px solid #f0a030;
  border-radius: 12px;
  overflow: hidden;
  margin: 1.4rem 0;
}
.sb101-article .definition-header {
  padding: 11px 16px 10px;
  background: #fdf0dc;
  border-bottom: 0.5px solid #f0d0a0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb101-article .def-icon { font-size: 16px; }
.sb101-article .def-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #7a4800;
}
.sb101-article .definition-body {
  padding: 16px 18px;
  font-size: 14px;
  color: #111;
  line-height: 1.8;
}
.sb101-article .def-highlight {
  font-size: 16px;
  font-weight: 700;
  color: #7a4800;
  margin-bottom: 8px;
  display: block;
}

/* Barrier grid (3 cards: TEWL, sensitivity, damage cycle) */
.sb101-article .barrier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 1.4rem 0;
}
@media (max-width: 560px) {
  .sb101-article .barrier-grid { grid-template-columns: 1fr; }
}
.sb101-article .barrier-card {
  border: 0.5px solid #e5e5e0;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  background: #fff;
}
.sb101-article .barrier-emoji { font-size: 22px; margin-bottom: 8px; }
/* .barrier-title / .barrier-desc already exist in shared sb101 — re-namespaced sizing for this page */

/* Warn list (4 things you should never do) */
.sb101-article .warn-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 1.4rem 0;
}
.sb101-article .warn-item {
  border: 0.5px solid #e5e5e0;
  border-radius: 10px;
  overflow: hidden;
}
.sb101-article .warn-item-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #fdf5f5;
  border-bottom: 0.5px solid #f5e0e0;
}
.sb101-article .warn-x {
  width: 22px;
  height: 22px;
  background: #e84040;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.sb101-article .warn-title {
  font-size: 13px;
  font-weight: 700;
  color: #111;
}
.sb101-article .warn-body {
  padding: 10px 14px 12px;
  font-size: 13px;
  color: #444;
  line-height: 1.7;
}
.sb101-article .warn-body strong {
  font-weight: 600;
  color: #8a2020;
}
.sb101-article .warn-arrow {
  font-size: 12px;
  color: #888;
  margin-top: 6px;
  display: block;
}

/* Routine phases (Hydrate / Bind / Seal + cleansing phases) */
.sb101-article .routine-phase {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  overflow: hidden;
  margin: 1.4rem 0;
}
.sb101-article .routine-phase-header {
  padding: 12px 16px;
  background: #FFF8E0;
  border-bottom: 0.5px solid #f0d878;
  display: flex;
  align-items: center;
  gap: 10px;
}
.sb101-article .phase-num {
  width: 24px;
  height: 24px;
  background: #FBDC81;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  color: #5a4200;
  flex-shrink: 0;
}
.sb101-article .phase-title {
  font-size: 14px;
  font-weight: 700;
  color: #3d2d00;
}
.sb101-article .phase-subtitle {
  font-size: 12px;
  color: #8a6200;
  margin-left: auto;
  font-weight: 600;
}
.sb101-article .routine-phase-body { padding: 14px 16px; }
.sb101-article .routine-row {
  display: flex;
  gap: 10px;
  margin-bottom: 9px;
  align-items: flex-start;
}
.sb101-article .routine-row:last-child { margin-bottom: 0; }
.sb101-article .routine-dot {
  width: 6px;
  height: 6px;
  background: #FBDC81;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 8px;
}
.sb101-article .routine-text {
  font-size: 13px;
  color: #111;
  line-height: 1.7;
}
.sb101-article .routine-text strong { font-weight: 700; }
.sb101-article .routine-ing-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  background: #f0f0ec;
  color: #666;
  padding: 1px 7px;
  border-radius: 8px;
  font-family: 'Courier New', monospace;
  margin-left: 4px;
  white-space: nowrap;
}

/* Ingredient name/role overrides (this page renders monospaced compact name + role tag) */
.sb101-article .ing-name {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  margin-bottom: 4px;
  font-family: 'Courier New', monospace;
}
.sb101-article .ing-role {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a6200;
  margin-bottom: 6px;
}

/* S-L-S-W grid */
.sb101-article .slsw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 1.4rem 0;
}
@media (max-width: 480px) {
  .sb101-article .slsw-grid { grid-template-columns: 1fr; }
}
.sb101-article .slsw-card {
  border: 0.5px solid #e5e5e0;
  border-radius: 10px;
  padding: 14px;
}
.sb101-article .slsw-letter {
  font-size: 28px;
  font-weight: 800;
  color: #FBDC81;
  line-height: 1;
  margin-bottom: 6px;
}
.sb101-article .slsw-title {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  margin-bottom: 5px;
}
.sb101-article .slsw-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.65;
}
.sb101-article .slsw-avoid {
  font-size: 11px;
  color: #8a2020;
  margin-top: 6px;
  line-height: 1.6;
}

/* Compare table (Exfoliation-focused vs Barrier-focused) */
.sb101-article .compare-table {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  overflow: hidden;
  margin: 1.6rem 0;
}
.sb101-article .compare-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.sb101-article .compare-header-cell {
  padding: 11px 14px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #888;
  background: #f8f8f5;
  border-bottom: 0.5px solid #e5e5e0;
}
.sb101-article .compare-header-cell:not(:last-child) {
  border-right: 0.5px solid #e5e5e0;
}
.sb101-article .compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 0.5px solid #f0f0ec;
}
.sb101-article .compare-row:last-child { border-bottom: none; }
.sb101-article .compare-cell {
  padding: 11px 14px;
  font-size: 13px;
  color: #111;
  line-height: 1.5;
}
.sb101-article .compare-cell:not(:last-child) {
  border-right: 0.5px solid #f0f0ec;
}
.sb101-article .compare-cell.bad { color: #8a2020; }
.sb101-article .compare-cell.good { color: #3a5c10; font-weight: 500; }

/* QA block (Common Questions) */
.sb101-article .qa-block {
  border: 0.5px solid #e5e5e0;
  border-radius: 12px;
  overflow: hidden;
  margin: 2rem 0;
}
.sb101-article .qa-block-header {
  padding: 12px 16px;
  background: #f8f8f5;
  border-bottom: 0.5px solid #e5e5e0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #888;
}
.sb101-article .qa-item { border-bottom: 0.5px solid #f0f0ec; }
.sb101-article .qa-item:last-child { border-bottom: none; }
.sb101-article .qa-q {
  display: flex;
  gap: 12px;
  padding: 14px 16px 10px;
  align-items: flex-start;
}
.sb101-article .qa-q-badge {
  font-size: 11px;
  font-weight: 800;
  color: #5a4200;
  background: #FBDC81;
  padding: 2px 8px;
  border-radius: 8px;
  flex-shrink: 0;
  margin-top: 1px;
}
.sb101-article .qa-q-text {
  font-size: 14px;
  font-weight: 600;
  color: #111;
  line-height: 1.5;
}
.sb101-article .qa-a {
  display: flex;
  gap: 12px;
  padding: 0 16px 14px;
}
.sb101-article .qa-a-badge {
  font-size: 11px;
  font-weight: 800;
  color: #888;
  background: #f0f0ec;
  padding: 2px 8px;
  border-radius: 8px;
  flex-shrink: 0;
  margin-top: 1px;
}
.sb101-article .qa-a-text {
  font-size: 13px;
  color: #444;
  line-height: 1.7;
}

/* Sidebar: Find Your Skin Type CTA (sidebar-skin-type) */
.sb101-article .sidebar-skin-type { padding: 16px; }
.sb101-article .sidebar-st-label {
  font-size: 11px;
  font-weight: 700;
  color: #8a6200;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.sb101-article .sidebar-st-text {
  font-size: 13px;
  color: #111;
  line-height: 1.6;
  margin-bottom: 12px;
}
.sb101-article .sidebar-st-btn {
  display: block;
  text-align: center;
  background: #FBDC81;
  color: #3d2d00;
  font-size: 13px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 20px;
  text-decoration: none;
  border: none;
  cursor: pointer;
}

/* Sidebar product card (sb-product variant — desktop) */
.sb101-article .product-card-sb {
  padding: 14px;
  display: flex;
  gap: 12px;
  align-items: center;
}
.sb101-article .product-img-sb {
  width: 52px;
  height: 66px;
  background: #F5E4D5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 8px;
  font-weight: 700;
  color: #a07050;
  text-align: center;
  line-height: 1.4;
  padding: 5px;
}
.sb101-article .product-name-sb {
  font-size: 13px;
  font-weight: 600;
  color: #111;
  margin-bottom: 3px;
}
.sb101-article .product-desc-sb {
  font-size: 12px;
  color: #888;
  line-height: 1.4;
  margin-bottom: 8px;
}
.sb101-article .product-divider {
  height: 0.5px;
  background: #e5e5e0;
}

/* Mobile product items (built for dry skin) */
.sb101-article .mobile-product-item {
  display: flex;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 0.5px solid #e5e5e0;
  align-items: center;
}
.sb101-article .mobile-product-item:last-child { border-bottom: none; }
.sb101-article .mobile-product-thumb {
  width: 52px;
  height: 64px;
  background: #F5E4D5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 700;
  color: #a07050;
  text-align: center;
  line-height: 1.3;
  padding: 4px;
  flex-shrink: 0;
}
.sb101-article .mobile-product-info { flex: 1; min-width: 0; }
.sb101-article .mobile-product-name {
  font-size: 13px;
  font-weight: 700;
  color: #111;
  margin-bottom: 3px;
}
.sb101-article .mobile-product-desc {
  font-size: 11px;
  color: #888;
  line-height: 1.4;
  margin-bottom: 8px;
}
.sb101-article .prod-step-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: #FBDC81;
  color: #5a4200;
  padding: 2px 7px;
  border-radius: 8px;
  margin-bottom: 5px;
}

/* ============================================================
   sb101-body-skin-type-combination-skin — page-specific CSS
   Namespace: .sb101-article
   Skips classes already defined in shared sb101.css.
   ============================================================ */

/* ----- Badge / definition / zone-map ----- */
.sb101-article .guide-badge { display: inline-block; background: #849F78; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; text-transform: uppercase; }

.sb101-article .definition-box { border: 1.5px solid #849F78; border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .definition-header { padding: 11px 16px 10px; background: #eef4ea; border-bottom: 0.5px solid #c0d4b0; display: flex; align-items: center; gap: 10px; }
.sb101-article .def-icon { font-size: 16px; }
.sb101-article .def-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #3a5c10; }
.sb101-article .definition-body { padding: 16px 18px; font-size: 14px; color: #111; line-height: 1.8; }
.sb101-article .def-highlight { font-size: 16px; font-weight: 700; color: #3a5c10; margin-bottom: 8px; display: block; }

.sb101-article .zone-map { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .zone-map-header { padding: 11px 16px 10px; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; display: flex; align-items: center; gap: 10px; }
.sb101-article .zone-map-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #5a4200; }
.sb101-article .zone-map-body { display: grid; grid-template-columns: 1fr 1fr; }
.sb101-article .zone-col { padding: 18px; }
.sb101-article .zone-col:first-child { border-right: 0.5px solid #e5e5e0; }
.sb101-article .zone-col-tag { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; padding: 2px 10px; border-radius: 8px; margin-bottom: 10px; }
.sb101-article .zone-col-tag.t { background: #fff3d6; color: #8a6200; }
.sb101-article .zone-col-tag.u { background: #e8f4e0; color: #2e5c10; }
.sb101-article .zone-col-name { font-size: 14px; font-weight: 800; color: #111; margin-bottom: 6px; }
.sb101-article .zone-col-area { font-size: 12px; color: #888; margin-bottom: 10px; }
.sb101-article .zone-trait { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 6px; }
.sb101-article .zone-trait-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.sb101-article .zone-trait-dot.t { background: #FBDC81; }
.sb101-article .zone-trait-dot.u { background: #849F78; }
.sb101-article .zone-trait-text { font-size: 13px; color: #444; line-height: 1.6; }

/* ----- Barrier grid (3-up cards) ----- */
.sb101-article .barrier-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 1.4rem 0; }
.sb101-article .barrier-card { border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 14px; text-align: center; background: #fff; }
.sb101-article .barrier-emoji { font-size: 22px; margin-bottom: 8px; }

/* ----- Warn list (mistakes) ----- */
.sb101-article .warn-list { display: flex; flex-direction: column; gap: 12px; margin: 1.4rem 0; }
.sb101-article .warn-item { border: 0.5px solid #e5e5e0; border-radius: 10px; overflow: hidden; }
.sb101-article .warn-item-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fdf5f5; border-bottom: 0.5px solid #f5e0e0; }
.sb101-article .warn-x { width: 22px; height: 22px; background: #e84040; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; }
.sb101-article .warn-title { font-size: 13px; font-weight: 700; color: #111; }
.sb101-article .warn-body { padding: 10px 14px 12px; font-size: 13px; color: #444; line-height: 1.7; }
.sb101-article .warn-body strong { font-weight: 600; color: #8a2020; }
.sb101-article .warn-arrow { font-size: 12px; color: #888; margin-top: 6px; display: block; }

/* ----- Routine phases ----- */
.sb101-article .routine-phase { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .routine-phase-header { padding: 12px 16px; background: #FFF8E0; border-bottom: 0.5px solid #f0d878; display: flex; align-items: center; gap: 10px; }
.sb101-article .phase-num { width: 24px; height: 24px; background: #FBDC81; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #5a4200; flex-shrink: 0; }
.sb101-article .phase-title { font-size: 14px; font-weight: 700; color: #3d2d00; }
.sb101-article .phase-subtitle { font-size: 12px; color: #8a6200; margin-left: auto; font-weight: 600; }
.sb101-article .routine-phase-body { padding: 14px 16px; }
.sb101-article .routine-row { display: flex; gap: 10px; margin-bottom: 9px; align-items: flex-start; }
.sb101-article .routine-row:last-child { margin-bottom: 0; }
.sb101-article .routine-dot { width: 6px; height: 6px; background: #FBDC81; border-radius: 50%; flex-shrink: 0; margin-top: 8px; }
.sb101-article .routine-text { font-size: 13px; color: #111; line-height: 1.7; }
.sb101-article .routine-text strong { font-weight: 700; }
.sb101-article .routine-ing-tag { display: inline-block; font-size: 10px; font-weight: 700; background: #f0f0ec; color: #666; padding: 1px 7px; border-radius: 8px; font-family: 'Courier New', monospace; margin-left: 4px; white-space: nowrap; }

/* ----- Zone routine split (T/U halves) ----- */
.sb101-article .zone-routine-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 0; }
.sb101-article .zone-half { border-radius: 8px; padding: 12px 14px; }
.sb101-article .zone-half.t-zone { background: #FFF8E0; border: 0.5px solid #f0d878; }
.sb101-article .zone-half.u-zone { background: #eef4ea; border: 0.5px solid #c0d4b0; }
.sb101-article .zone-half-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
.sb101-article .zone-half.t-zone .zone-half-label { color: #8a6200; }
.sb101-article .zone-half.u-zone .zone-half-label { color: #3a5c10; }
.sb101-article .zone-half-text { font-size: 12px; color: #444; line-height: 1.65; }

/* ----- Ingredient cards (per-page styling override) ----- */
.sb101-article .ing-name { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 4px; font-family: 'Courier New', monospace; }
.sb101-article .ing-role { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #3a5c10; margin-bottom: 6px; }

/* ----- Exfoliation grid ----- */
.sb101-article .exfo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 1.4rem 0; }
.sb101-article .exfo-card { border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 14px; }
.sb101-article .exfo-tag { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 8px; margin-bottom: 8px; }
.sb101-article .exfo-card.aha .exfo-tag { background: #fde8e8; color: #8a2020; }
.sb101-article .exfo-card.bha .exfo-tag { background: #e8f4e0; color: #2e5c10; }
.sb101-article .exfo-card.pha .exfo-tag { background: #e8f0fe; color: #1a3c8a; }
.sb101-article .exfo-name { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 4px; }
.sb101-article .exfo-target { font-size: 11px; color: #888; margin-bottom: 5px; }
.sb101-article .exfo-desc { font-size: 12px; color: #666; line-height: 1.6; }

/* ----- Cleansing steps ----- */
.sb101-article .cleanse-steps { display: flex; flex-direction: column; gap: 10px; margin: 1.4rem 0; }
.sb101-article .cleanse-step { border: 0.5px solid #e5e5e0; border-radius: 10px; overflow: hidden; }
.sb101-article .cleanse-step-header { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fafaf8; border-bottom: 0.5px solid #f0f0ec; }
.sb101-article .cleanse-num { width: 22px; height: 22px; background: #849F78; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; }
.sb101-article .cleanse-step-title { font-size: 13px; font-weight: 700; color: #111; }
.sb101-article .cleanse-step-body { padding: 10px 14px 12px; font-size: 13px; color: #444; line-height: 1.7; }

/* ----- S-L-S-W framework grid ----- */
.sb101-article .slsw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.4rem 0; }
.sb101-article .slsw-card { border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 14px; }
.sb101-article .slsw-letter { font-size: 28px; font-weight: 800; color: #FBDC81; line-height: 1; margin-bottom: 6px; }
.sb101-article .slsw-title { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 5px; }
.sb101-article .slsw-desc { font-size: 12px; color: #666; line-height: 1.65; }
.sb101-article .slsw-avoid { font-size: 11px; color: #8a2020; margin-top: 6px; line-height: 1.6; }

/* ----- Compare table (approach vs result) ----- */
.sb101-article .compare-table { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.6rem 0; }
.sb101-article .compare-header { display: grid; grid-template-columns: 1.2fr 1fr 1fr; }
.sb101-article .compare-header-cell { padding: 11px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #888; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; }
.sb101-article .compare-header-cell:not(:last-child) { border-right: 0.5px solid #e5e5e0; }
.sb101-article .compare-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr; border-bottom: 0.5px solid #f0f0ec; }
.sb101-article .compare-row:last-child { border-bottom: none; }
.sb101-article .compare-cell { padding: 11px 14px; font-size: 13px; color: #111; line-height: 1.5; }
.sb101-article .compare-cell:not(:last-child) { border-right: 0.5px solid #f0f0ec; }
.sb101-article .compare-cell.bad { color: #8a2020; }
.sb101-article .compare-cell.good { color: #3a5c10; font-weight: 500; }
.sb101-article .compare-cell.label { font-weight: 600; }

/* ----- Acne management grid ----- */
.sb101-article .acne-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.4rem 0; }
.sb101-article .acne-card { border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 14px; }
.sb101-article .acne-card-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #888; margin-bottom: 8px; }
.sb101-article .acne-card-title { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 6px; }
.sb101-article .acne-card-body { font-size: 12px; color: #666; line-height: 1.65; }

/* ----- Q&A block ----- */
.sb101-article .qa-block { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 2rem 0; }
.sb101-article .qa-block-header { padding: 12px 16px; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #888; }
.sb101-article .qa-item { border-bottom: 0.5px solid #f0f0ec; }
.sb101-article .qa-item:last-child { border-bottom: none; }
.sb101-article .qa-q { display: flex; gap: 12px; padding: 14px 16px 10px; align-items: flex-start; }
.sb101-article .qa-q-badge { font-size: 11px; font-weight: 800; color: #5a4200; background: #FBDC81; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; margin-top: 1px; }
.sb101-article .qa-q-text { font-size: 14px; font-weight: 600; color: #111; line-height: 1.5; }
.sb101-article .qa-a { display: flex; gap: 12px; padding: 0 16px 14px; }
.sb101-article .qa-a-badge { font-size: 11px; font-weight: 800; color: #888; background: #f0f0ec; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; margin-top: 1px; }
.sb101-article .qa-a-text { font-size: 13px; color: #444; line-height: 1.7; }

/* ----- Dark summary block ----- */
.sb101-article .dark-summary { background: #1a1a18; border-radius: 14px; padding: 24px 24px 20px; margin: 2.4rem 0; }
.sb101-article .dark-summary-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #FBDC81; margin-bottom: 14px; }
.sb101-article .dark-summary-title { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 14px; line-height: 1.35; }
.sb101-article .dark-summary-rows { display: flex; flex-direction: column; gap: 8px; }
.sb101-article .dark-row { display: flex; gap: 10px; align-items: flex-start; }
.sb101-article .dark-dot { width: 6px; height: 6px; background: #FBDC81; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.sb101-article .dark-text { font-size: 13px; color: #d0d0cc; line-height: 1.7; }

/* ----- Sidebar (skin-type CTA + product card) ----- */
.sb101-article .product-card-sb { padding: 14px; display: flex; gap: 12px; align-items: center; }
.sb101-article .product-img-sb { width: 52px; height: 66px; background: #F5E4D5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 8px; font-weight: 700; color: #a07050; text-align: center; line-height: 1.4; padding: 5px; }
.sb101-article .product-name-sb { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 3px; }
.sb101-article .product-desc-sb { font-size: 12px; color: #888; line-height: 1.4; margin-bottom: 8px; }
.sb101-article .product-divider { height: 0.5px; background: #e5e5e0; }
.sb101-article .sidebar-skin-type { padding: 16px; }
.sb101-article .sidebar-st-label { font-size: 11px; font-weight: 700; color: #8a6200; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.sb101-article .sidebar-st-text { font-size: 13px; color: #111; line-height: 1.6; margin-bottom: 12px; }
.sb101-article .sidebar-st-btn { display: block; text-align: center; background: #FBDC81; color: #3d2d00; font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 20px; text-decoration: none; }

/* ----- Mobile skin-type CTA + product items ----- */
.sb101-article .mobile-skintype-wrap { display: none; margin-top: 2rem; padding: 20px; background: #f8f8f5; border: 0.5px solid #e5e5e0; border-radius: 12px; }
.sb101-article .mobile-st-label { font-size: 11px; font-weight: 700; color: #8a6200; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.sb101-article .mobile-st-text { font-size: 14px; color: #111; line-height: 1.6; margin-bottom: 14px; }
.sb101-article .mobile-st-btn { display: block; text-align: center; background: #FBDC81; color: #3d2d00; font-size: 13px; font-weight: 700; padding: 12px 16px; border-radius: 20px; text-decoration: none; }
.sb101-article .mobile-st-note { font-size: 11px; color: #aaa; text-align: center; margin-top: 8px; }

.sb101-article .prod-step-tag { display: inline-block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; background: #FBDC81; color: #5a4200; padding: 2px 7px; border-radius: 8px; margin-bottom: 5px; }
.sb101-article .mobile-product-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 0.5px solid #e5e5e0; align-items: center; }
.sb101-article .mobile-product-item:last-child { border-bottom: none; }
.sb101-article .mobile-product-thumb { width: 52px; height: 64px; background: #F5E4D5; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #a07050; text-align: center; line-height: 1.3; padding: 4px; flex-shrink: 0; }
.sb101-article .mobile-product-info { flex: 1; min-width: 0; }
.sb101-article .mobile-product-name { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 3px; }
.sb101-article .mobile-product-desc { font-size: 11px; color: #888; line-height: 1.4; margin-bottom: 8px; }

/* ----- Responsive overrides ----- */
@media (max-width: 768px) {
  .sb101-article .mobile-skintype-wrap { display: block; }
}
@media (max-width: 560px) {
  .sb101-article .barrier-grid { grid-template-columns: 1fr; }
  .sb101-article .exfo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .sb101-article .zone-map-body { grid-template-columns: 1fr; }
  .sb101-article .zone-routine-split { grid-template-columns: 1fr; }
  .sb101-article .acne-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Skin Barrier 101 — page-specific CSS for /pages/skin-type-oily-skin
   Source: _artifacts/skin-barrier-101/skin-type-oily-skin.html
   All selectors namespaced under .sb101-article
   Skipped classes already defined elsewhere:
     demaf-article, article-grid, article-title, article-meta, meta-dot,
     breadcrumb, sep, mobile-progress-bar, mobile-progress-fill,
     yt-banner, yt-icon, yt-banner-text, yt-banner-sub, yt-arrow,
     article-divider,
     mobile-toc-wrap, toc-accordion, toc-trigger, toc-trigger-left,
     toc-dot, toc-label, toc-chevron, toc-body, toc-item-mob, toc-num,
     prose, intro-callout, kw,
     barrier-title, barrier-desc,
     insight-callout, insight-label, insight-text,
     sidebar-desktop, sb-card, sb-header, toc-list, toc-item,
     mobile-products-wrap, section-label,
     dev-box, dev-box-label, dev-row, dev-key, dev-val,
     bad, good
   ============================================================ */

/* --- Guide badge (header eyebrow) --- */
.sb101-article .guide-badge { display: inline-block; background: #849F78; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 20px; margin-bottom: 16px; text-transform: uppercase; }

/* --- Definition box ("simple version" callout) --- */
.sb101-article .definition-box { border: 1.5px solid #849F78; border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .definition-header { padding: 11px 16px 10px; background: #eef4ea; border-bottom: 0.5px solid #c0d4b0; display: flex; align-items: center; gap: 10px; }
.sb101-article .def-icon { font-size: 16px; }
.sb101-article .def-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.07em; color: #3a5c10; }
.sb101-article .definition-body { padding: 16px 18px; font-size: 14px; color: #111; line-height: 1.8; }
.sb101-article .def-highlight { font-size: 16px; font-weight: 700; color: #3a5c10; margin-bottom: 8px; display: block; }

/* --- Barrier feature grid (3-up cards) --- */
.sb101-article .barrier-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 1.4rem 0; }
.sb101-article .barrier-card { border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 14px; text-align: center; background: #fff; }
.sb101-article .barrier-emoji { font-size: 22px; margin-bottom: 8px; }

/* --- Warn list ("4 things you should never do") --- */
.sb101-article .warn-list { display: flex; flex-direction: column; gap: 12px; margin: 1.4rem 0; }
.sb101-article .warn-item { border: 0.5px solid #e5e5e0; border-radius: 10px; overflow: hidden; }
.sb101-article .warn-item-header { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #fdf5f5; border-bottom: 0.5px solid #f5e0e0; }
.sb101-article .warn-x { width: 22px; height: 22px; background: #e84040; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; }
.sb101-article .warn-title { font-size: 13px; font-weight: 700; color: #111; }
.sb101-article .warn-body { padding: 10px 14px 12px; font-size: 13px; color: #444; line-height: 1.7; }
.sb101-article .warn-body strong { font-weight: 600; color: #8a2020; }
.sb101-article .warn-arrow { font-size: 12px; color: #888; margin-top: 6px; display: block; }

/* --- Routine phases (Hydrate → Control 3 stages) --- */
.sb101-article .routine-phase { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.4rem 0; }
.sb101-article .routine-phase-header { padding: 12px 16px; background: #FFF8E0; border-bottom: 0.5px solid #f0d878; display: flex; align-items: center; gap: 10px; }
.sb101-article .phase-num { width: 24px; height: 24px; background: #FBDC81; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #5a4200; flex-shrink: 0; }
.sb101-article .phase-title { font-size: 14px; font-weight: 700; color: #3d2d00; }
.sb101-article .phase-subtitle { font-size: 12px; color: #8a6200; margin-left: auto; font-weight: 600; }
.sb101-article .routine-phase-body { padding: 14px 16px; }
.sb101-article .routine-row { display: flex; gap: 10px; margin-bottom: 9px; align-items: flex-start; }
.sb101-article .routine-row:last-child { margin-bottom: 0; }
.sb101-article .routine-dot { width: 6px; height: 6px; background: #FBDC81; border-radius: 50%; flex-shrink: 0; margin-top: 8px; }
.sb101-article .routine-text { font-size: 13px; color: #111; line-height: 1.7; }
.sb101-article .routine-text strong { font-weight: 700; }
.sb101-article .routine-ing-tag { display: inline-block; font-size: 10px; font-weight: 700; background: #f0f0ec; color: #666; padding: 1px 7px; border-radius: 8px; font-family: 'Courier New', monospace; margin-left: 4px; white-space: nowrap; }

/* --- Exfoliant comparison cards (AHA / BHA / PHA) --- */
.sb101-article .exfo-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin: 1.4rem 0; }
.sb101-article .exfo-card { border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 14px; }
.sb101-article .exfo-tag { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: 8px; margin-bottom: 8px; }
.sb101-article .exfo-card.aha .exfo-tag { background: #fde8e8; color: #8a2020; }
.sb101-article .exfo-card.bha .exfo-tag { background: #e8f4e0; color: #2e5c10; }
.sb101-article .exfo-card.pha .exfo-tag { background: #e8f0fe; color: #1a3c8a; }
.sb101-article .exfo-name { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 4px; }
.sb101-article .exfo-target { font-size: 11px; color: #888; margin-bottom: 5px; }
.sb101-article .exfo-desc { font-size: 12px; color: #666; line-height: 1.6; }

/* --- Cleansing step list (1st / 2nd / morning) --- */
.sb101-article .cleanse-steps { display: flex; flex-direction: column; gap: 10px; margin: 1.4rem 0; }
.sb101-article .cleanse-step { border: 0.5px solid #e5e5e0; border-radius: 10px; overflow: hidden; }
.sb101-article .cleanse-step-header { display: flex; align-items: center; gap: 10px; padding: 11px 14px; background: #fafaf8; border-bottom: 0.5px solid #f0f0ec; }
.sb101-article .cleanse-num { width: 22px; height: 22px; background: #849F78; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; flex-shrink: 0; }
.sb101-article .cleanse-step-title { font-size: 13px; font-weight: 700; color: #111; }
.sb101-article .cleanse-step-body { padding: 10px 14px 12px; font-size: 13px; color: #444; line-height: 1.7; }

/* --- S-L-S-W framework grid (2x2) --- */
.sb101-article .slsw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.4rem 0; }
.sb101-article .slsw-card { border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 14px; }
.sb101-article .slsw-letter { font-size: 28px; font-weight: 800; color: #FBDC81; line-height: 1; margin-bottom: 6px; }
.sb101-article .slsw-title { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 5px; }
.sb101-article .slsw-desc { font-size: 12px; color: #666; line-height: 1.65; }
.sb101-article .slsw-avoid { font-size: 11px; color: #8a2020; margin-top: 6px; line-height: 1.6; }

/* --- Compare table (approach vs short/long term) --- */
.sb101-article .compare-table { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 1.6rem 0; }
.sb101-article .compare-header { display: grid; grid-template-columns: 1fr 1fr 1fr; }
.sb101-article .compare-header-cell { padding: 11px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #888; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; }
.sb101-article .compare-header-cell:not(:last-child) { border-right: 0.5px solid #e5e5e0; }
.sb101-article .compare-row { display: grid; grid-template-columns: 1fr 1fr 1fr; border-bottom: 0.5px solid #f0f0ec; }
.sb101-article .compare-row:last-child { border-bottom: none; }
.sb101-article .compare-cell { padding: 11px 14px; font-size: 13px; color: #111; line-height: 1.5; }
.sb101-article .compare-cell:not(:last-child) { border-right: 0.5px solid #f0f0ec; }
.sb101-article .compare-cell.bad { color: #8a2020; }
.sb101-article .compare-cell.good { color: #3a5c10; font-weight: 500; }

/* --- Acne management & lifestyle 2-card grid --- */
.sb101-article .acne-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 1.4rem 0; }
.sb101-article .acne-card { border: 0.5px solid #e5e5e0; border-radius: 10px; padding: 14px; }
.sb101-article .acne-card-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #888; margin-bottom: 8px; }
.sb101-article .acne-card-title { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 6px; }
.sb101-article .acne-card-body { font-size: 12px; color: #666; line-height: 1.65; }

/* --- Q&A block (FAQ inline) --- */
.sb101-article .qa-block { border: 0.5px solid #e5e5e0; border-radius: 12px; overflow: hidden; margin: 2rem 0; }
.sb101-article .qa-block-header { padding: 12px 16px; background: #f8f8f5; border-bottom: 0.5px solid #e5e5e0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: #888; }
.sb101-article .qa-item { border-bottom: 0.5px solid #f0f0ec; }
.sb101-article .qa-item:last-child { border-bottom: none; }
.sb101-article .qa-q { display: flex; gap: 12px; padding: 14px 16px 10px; align-items: flex-start; }
.sb101-article .qa-q-badge { font-size: 11px; font-weight: 800; color: #5a4200; background: #FBDC81; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; margin-top: 1px; }
.sb101-article .qa-q-text { font-size: 14px; font-weight: 600; color: #111; line-height: 1.5; }
.sb101-article .qa-a { display: flex; gap: 12px; padding: 0 16px 14px; }
.sb101-article .qa-a-badge { font-size: 11px; font-weight: 800; color: #888; background: #f0f0ec; padding: 2px 8px; border-radius: 8px; flex-shrink: 0; margin-top: 1px; }
.sb101-article .qa-a-text { font-size: 13px; color: #444; line-height: 1.7; }

/* --- Dark final takeaway summary --- */
.sb101-article .dark-summary { background: #1a1a18; border-radius: 14px; padding: 24px 24px 20px; margin: 2.4rem 0; }
.sb101-article .dark-summary-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: #FBDC81; margin-bottom: 14px; }
.sb101-article .dark-summary-title { font-size: 17px; font-weight: 800; color: #fff; margin-bottom: 14px; line-height: 1.35; }
.sb101-article .dark-summary-rows { display: flex; flex-direction: column; gap: 8px; }
.sb101-article .dark-row { display: flex; gap: 10px; align-items: flex-start; }
.sb101-article .dark-dot { width: 6px; height: 6px; background: #FBDC81; border-radius: 50%; flex-shrink: 0; margin-top: 7px; }
.sb101-article .dark-text { font-size: 13px; color: #d0d0cc; line-height: 1.7; }

/* --- Sidebar product card variant --- */
.sb101-article .product-card-sb { padding: 14px; display: flex; gap: 12px; align-items: center; }
.sb101-article .product-img-sb { width: 52px; height: 66px; background: #F5E4D5; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 8px; font-weight: 700; color: #a07050; text-align: center; line-height: 1.4; padding: 5px; }
.sb101-article .product-name-sb { font-size: 13px; font-weight: 600; color: #111; margin-bottom: 3px; }
.sb101-article .product-desc-sb { font-size: 12px; color: #888; line-height: 1.4; margin-bottom: 8px; }
.sb101-article .product-divider { height: 0.5px; background: #e5e5e0; }

/* --- Sidebar skin-type CTA card --- */
.sb101-article .sidebar-skin-type { padding: 16px; }
.sb101-article .sidebar-st-label { font-size: 11px; font-weight: 700; color: #8a6200; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.sb101-article .sidebar-st-text { font-size: 13px; color: #111; line-height: 1.6; margin-bottom: 12px; }
.sb101-article .sidebar-st-btn { display: block; text-align: center; background: #FBDC81; color: #3d2d00; font-size: 13px; font-weight: 700; padding: 10px 16px; border-radius: 20px; text-decoration: none; }

/* --- Mobile skin-type CTA --- */
.sb101-article .mobile-skintype-wrap { display: none; margin-top: 2rem; padding: 20px; background: #f8f8f5; border: 0.5px solid #e5e5e0; border-radius: 12px; }
.sb101-article .mobile-st-label { font-size: 11px; font-weight: 700; color: #8a6200; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; }
.sb101-article .mobile-st-text { font-size: 14px; color: #111; line-height: 1.6; margin-bottom: 14px; }
.sb101-article .mobile-st-btn { display: block; text-align: center; background: #FBDC81; color: #3d2d00; font-size: 13px; font-weight: 700; padding: 12px 16px; border-radius: 20px; text-decoration: none; }
.sb101-article .mobile-st-note { font-size: 11px; color: #aaa; text-align: center; margin-top: 8px; }

/* --- Routine product step tag (shared sidebar + mobile) --- */
.sb101-article .prod-step-tag { display: inline-block; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; background: #FBDC81; color: #5a4200; padding: 2px 7px; border-radius: 8px; margin-bottom: 5px; }

/* --- Mobile product item rows --- */
.sb101-article .mobile-product-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 0.5px solid #e5e5e0; align-items: center; }
.sb101-article .mobile-product-item:last-child { border-bottom: none; }
.sb101-article .mobile-product-thumb { width: 52px; height: 64px; background: #eef4ea; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: 700; color: #3a5c10; text-align: center; line-height: 1.3; padding: 4px; flex-shrink: 0; }
.sb101-article .mobile-product-info { flex: 1; min-width: 0; }
.sb101-article .mobile-product-name { font-size: 13px; font-weight: 700; color: #111; margin-bottom: 3px; }
.sb101-article .mobile-product-desc { font-size: 11px; color: #888; line-height: 1.4; margin-bottom: 8px; }

/* --- Responsive --- */
@media (max-width: 560px) {
  .sb101-article .barrier-grid { grid-template-columns: 1fr; }
  .sb101-article .exfo-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .sb101-article .slsw-grid { grid-template-columns: 1fr; }
  .sb101-article .acne-grid { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────
   Phase 2A mobile responsive safety net (cascade-last override).
   부모 wrapper 영향으로 viewport 가득 차지 못하는 경우 강제 100% 폭.
   margin: 0 auto는 .demaf-article 자체 정의 유지하면서 width만 강제.
   ──────────────────────────────────────────────────────────────── */
.sb101-article { width: 100%; min-width: 0; box-sizing: border-box; }
.sb101-article .demaf-article,
.sb101-article .page-wrap { width: 100%; box-sizing: border-box; }
.sb101-article * { box-sizing: border-box; }

@media (max-width: 768px) {
  .sb101-article .demaf-article,
  .sb101-article .page-wrap { max-width: 100%; padding-left: 16px; padding-right: 16px; }
  .sb101-article .article-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
  .sb101-article .sidebar-desktop { display: none !important; }
  .sb101-article .mobile-toc-wrap,
  .sb101-article .mobile-series-wrap,
  .sb101-article .mobile-products-wrap,
  .sb101-article .mobile-progress-bar { display: block !important; }
}


/* ────────────────────────────────────────────────────────────────
   Phase 4D mobile responsive — CSS Grid items min-width fix.
   
   ep01 (.page-wrap) 모바일 진단 결과: grid items의 default min-width가
   min-content라 main 안 inline content (긴 link 등)이 1fr track을
   container 너비 이상으로 확장 → horizontal overflow.
   
   표준 패턴: grid items에 min-width: 0 강제 + max-width: 100%로 컨테이너
   안에서만 fit. 모든 article-grid 후손에도 적용 (yt-banner, callout,
   summary-box, table 류가 모바일에서 viewport 초과하는 케이스 방지).
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sb101-article .article-grid > * { min-width: 0 !important; max-width: 100% !important; }
  .sb101-article .article-grid main,
  .sb101-article .article-grid aside,
  .sb101-article main { min-width: 0 !important; max-width: 100% !important; }
  /* yt-banner, callout, summary-box 등 자주 viewport 초과하는 elements */
  .sb101-article .yt-banner,
  .sb101-article .callout,
  .sb101-article .warn-callout,
  .sb101-article .intro-callout,
  .sb101-article .insight-callout,
  .sb101-article .geo-callout,
  .sb101-article .summary-box,
  .sb101-article .check-box,
  .sb101-article .check-row { max-width: 100% !important; min-width: 0 !important; word-wrap: break-word; }
  /* Prevent any image / svg from breaking layout */
  .sb101-article img,
  .sb101-article svg,
  .sb101-article iframe { max-width: 100% !important; height: auto; }
  /* Horizontal scrollable elements should be contained */
  .sb101-article pre,
  .sb101-article table { max-width: 100% !important; overflow-x: auto; }
}

/* ────────────────────────────────────────────────────────────────
   Phase 4E — ingredient × 3 hero CSS (sb101-article namespace).
   
   sb101.css의 .hero/.hero-inner/.hero-title은 .sb101-hub 전용이라
   ingredient 페이지 (.sb101-article)에 미적용되어 데스크탑 hero 영역이
   block 상태로 깨졌음. 페이지 핸들별 색상 변수 + 공통 layout 추가.
   ──────────────────────────────────────────────────────────────── */

/* Color variables per ingredient handle */
.sb101-article[data-episode-handle="ingredient-egf"] {
  --ing-accent: #C0392B;
  --ing-accent-light: #fdf0ee;
  --ing-accent-mid: #e8b8b2;
  --ing-accent-text: #8a2a1e;
  --ing-accent-shadow: rgba(192,57,43,0.10);
}
.sb101-article[data-episode-handle="ingredient-panthenol"] {
  --ing-accent: #7c5cbf;
  --ing-accent-light: #f0e8f8;
  --ing-accent-mid: #c7b8e0;
  --ing-accent-text: #5a3a9a;
  --ing-accent-shadow: rgba(124,92,191,0.12);
}
.sb101-article[data-episode-handle="ingredient-squalane"] {
  --ing-accent: #c79a23;
  --ing-accent-light: #faf3e1;
  --ing-accent-mid: #e8d4a0;
  --ing-accent-text: #7a5c00;
  --ing-accent-shadow: rgba(212,160,23,0.12);
}

/* Common hero layout (ingredient pages) */
.sb101-article .hero { background: var(--ing-accent-light, #fafaf8); border-bottom: 1px solid var(--ing-accent-mid, #e5e5e0); overflow: hidden; }
.sb101-article .hero-inner { max-width: 960px; margin: 0 auto; padding: 48px 24px 40px; display: grid; grid-template-columns: 1fr 260px; gap: 48px; align-items: center; }
.sb101-article .hero-eyebrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 16px; }
.sb101-article .hero-title { font-size: 36px; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; color: #111; margin-bottom: 10px; }
.sb101-article .hero-title span { color: var(--ing-accent, #111); }
.sb101-article .hero-subtitle { font-size: 14px; color: var(--ing-accent-text, #888); font-weight: 500; margin-bottom: 20px; line-height: 1.5; }
.sb101-article .hero-oneliner { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--ing-accent-mid, #e5e5e0); border-radius: 10px; padding: 12px 16px; font-size: 13px; color: #444; line-height: 1.6; }
.sb101-article .hero-oneliner-icon { font-size: 18px; flex-shrink: 0; }
.sb101-article .hero-product-img { width: 100%; max-width: 220px; aspect-ratio: 3/4; background: #fff; border-radius: 16px; border: 1px solid var(--ing-accent-mid, #e5e5e0); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 32px var(--ing-accent-shadow, rgba(0,0,0,0.1)); margin: 0 auto; }
.sb101-article .product-img-conc { font-size: 22px; font-weight: 800; color: var(--ing-accent, #111); }
.sb101-article .product-img-label { font-size: 10px; font-weight: 700; color: var(--ing-accent, #111); text-align: center; letter-spacing: 0.05em; text-transform: uppercase; }
.sb101-article .product-img-name { font-size: 13px; font-weight: 800; color: #111; text-align: center; padding: 0 16px; line-height: 1.3; }
.sb101-article .hero-cta-row { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }

/* Badges */
.sb101-article .badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 4px 10px; border-radius: 20px; }
.sb101-article .badge-category { background: var(--ing-accent, #111); color: #fff; }
.sb101-article .badge-type { background: #fff; color: var(--ing-accent, #111); border: 1px solid var(--ing-accent-mid, #e5e5e0); }

/* Buttons */
.sb101-article .btn-primary { background: var(--ing-accent, #111); color: #fff; font-size: 13px; font-weight: 700; padding: 11px 20px; border-radius: 22px; text-decoration: none; display: inline-block; }
.sb101-article .btn-primary:hover { opacity: 0.9; }
.sb101-article .btn-secondary { background: #fff; color: var(--ing-accent, #111); font-size: 13px; font-weight: 700; padding: 11px 20px; border-radius: 22px; text-decoration: none; display: inline-block; border: 1px solid var(--ing-accent-mid, #e5e5e0); }
.sb101-article .btn-secondary:hover { background: var(--ing-accent-light, #fafaf8); }

/* Mobile collapse */
@media (max-width: 720px) {
  .sb101-article .hero-inner { grid-template-columns: 1fr !important; gap: 24px; padding: 32px 16px 28px; }
  .sb101-article .hero-product-img { order: -1; }
  .sb101-article .hero-title { font-size: 26px; }
}

/* ────────────────────────────────────────────────────────────────
   Phase 5A — Ingredients index page (/pages/ingredients)
   + ep14~16 placeholder pages
   
   .ing-card 디자인은 sb101-hub와 동일하되 sb101-article namespace에도
   재사용. 페이지 핸들 'ingredients' (인덱스), 'ep14-placeholder' 등.
   ──────────────────────────────────────────────────────────────── */

/* Ingredients index hero */
.sb101-article .ix-hero { background: #fafaf7; padding: 56px 24px 40px; text-align: center; border-bottom: 1px solid #e5e5e0; margin-bottom: 32px; }
.sb101-article .ix-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #8a6200; margin-bottom: 14px; }
.sb101-article .ix-title { font-size: 36px; font-weight: 800; letter-spacing: -.025em; color: #111; line-height: 1.15; margin-bottom: 12px; }
.sb101-article .ix-subtitle { font-size: 14px; color: #555; line-height: 1.65; max-width: 540px; margin: 0 auto; }
@media (max-width: 720px) {
  .sb101-article .ix-hero { padding: 40px 16px 28px; }
  .sb101-article .ix-title { font-size: 26px; }
}

/* Ingredient cards (same design as sb101-hub) */
.sb101-article .ix-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: 1100px; margin: 0 auto 48px; padding: 0 24px; }
@media (max-width: 900px) {
  .sb101-article .ix-grid { grid-template-columns: 1fr; padding: 0 16px; }
}
.sb101-article .ing-card { border-radius: 12px; padding: 22px 20px; cursor: pointer; text-decoration: none; color: inherit; transition: transform .2s; display: block; }
.sb101-article .ing-card:hover { transform: translateY(-3px); }
.sb101-article .ing-card.panthenol { background: #f0edf8; border: 1px solid #c8b8e8; }
.sb101-article .ing-card.egf { background: #f9eff3; border: 1px solid #e8c4d0; }
.sb101-article .ing-card.squalane { background: #fdf8e8; border: 1px solid #f0dc9a; }
.sb101-article .ing-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; }
.sb101-article .ing-card.panthenol .ing-eyebrow { color: #5c3d99; }
.sb101-article .ing-card.egf .ing-eyebrow { color: #9a4060; }
.sb101-article .ing-card.squalane .ing-eyebrow { color: #7a6200; }
.sb101-article .ing-name-en { font-size: 20px; font-weight: 800; color: #111; letter-spacing: -.3px; margin-bottom: 2px; }
.sb101-article .ing-name-kr { font-size: 12px; font-weight: 500; color: #666; margin-bottom: 12px; }
.sb101-article .ing-desc { font-size: 13px; color: #444; line-height: 1.65; margin-bottom: 14px; }
.sb101-article .ing-link-row { display: flex; align-items: center; justify-content: space-between; }
.sb101-article .ing-read { font-size: 12px; font-weight: 700; }
.sb101-article .ing-card.panthenol .ing-read { color: #5c3d99; }
.sb101-article .ing-card.egf .ing-read { color: #9a4060; }
.sb101-article .ing-card.squalane .ing-read { color: #7a6200; }

/* Back to hub CTA */
.sb101-article .back-to-hub { text-align: center; padding: 32px 16px 48px; }
.sb101-article .back-to-hub a { display: inline-block; padding: 12px 28px; border: 1px solid #111; border-radius: 24px; text-decoration: none; color: #111; font-size: 13px; font-weight: 700; }
.sb101-article .back-to-hub a:hover { background: #111; color: #fff; }

/* ep14~16 placeholder page */
.sb101-article .placeholder-wrap { max-width: 720px; margin: 0 auto; padding: 24px 16px 64px; text-align: center; }
.sb101-article .placeholder-badge { display: inline-block; background: #FBDC81; color: #5a4200; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; padding: 4px 12px; border-radius: 20px; margin: 32px 0 18px; text-transform: uppercase; }
.sb101-article .placeholder-title { font-size: 30px; font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: #111; margin-bottom: 14px; }
.sb101-article .placeholder-subtitle { font-size: 14px; color: #888; margin-bottom: 32px; }
.sb101-article .placeholder-card { background: #f8f8f5; border: 0.5px dashed #d0cdc8; border-radius: 16px; padding: 36px 24px; margin: 24px 0; }
.sb101-article .placeholder-eyebrow { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #888; margin-bottom: 14px; }
.sb101-article .placeholder-msg { font-size: 17px; font-weight: 700; color: #111; margin-bottom: 12px; }
.sb101-article .placeholder-msg-sub { font-size: 13.5px; color: #666; line-height: 1.7; }
.sb101-article .placeholder-yt { display: block; max-width: 540px; margin: 28px auto 0; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #000; }
.sb101-article .placeholder-yt iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 720px) {
  .sb101-article .placeholder-title { font-size: 22px; }
  .sb101-article .placeholder-card { padding: 24px 18px; }
}

/* Hub ep14~16 placeholder card — Coming Soon label */
.sb101-hub .article-card.is-draft { position: relative; opacity: 0.7; }
.sb101-hub .article-card.is-draft:hover { opacity: 1; }
.sb101-hub .article-card.is-draft .coming-soon-label { display: inline-block; background: #888; color: #fff; font-size: 9px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; padding: 3px 9px; border-radius: 10px; margin-bottom: 8px; }