/*! gpchild-bundle be077846136809b000e03fecdf7de5e4 */
/* ── common.css ── */
/* ===================================================================
   청년누수케어 · 공통 스타일
   색상 변경은 아래 :root 블록만 수정하면 전체 페이지에 반영됩니다.
   =================================================================== */
:root {
  --bg:          #ffffff;
  --surface:     #f4f6f9;
  --text:        #201e1d;
  --text-soft:   #605d5d;
  --text-mute:   #7d7979;
  --line:        #d7d3d3;
  --accent:      #2e7fe0;
  --accent-deep: #1a63bd;
  --accent-tint: #eef5fe;
  --accent-2:    #2e7fe0;

  --font-head: "Noto Serif KR", "Source Serif 4", serif;
  --font-body: "Source Serif 4", "Noto Serif KR", serif;

  --s1: 5px; --s2: 10px; --s3: 15px;
  --s4: 20px; --s6: 30px; --s8: 40px; --s10: 64px;

  --wrap: 820px;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.015em; margin: 0; }

a { color: var(--accent-deep); text-decoration: none; }
a:hover { color: var(--accent-2); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: #d8e8fc; }

img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s4) 80px; }

/* ── 상단 ───────────────────────────────────── */
.topbar {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4);
  align-items: baseline; justify-content: space-between;
  padding: var(--s3) 0 var(--s2); font-size: 15px;
}
.topbar .brand { font-weight: 600; color: var(--text); }
.topbar .tel { color: var(--text-soft); }
.rule-thick { height: 4px; background: var(--text); }
.rule-thin  { height: 1px; background: var(--text); margin-top: 3px; }

nav.lnb {
  display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3);
  padding: var(--s3) 0 0; font-size: 15px;
}
nav.lnb a { color: var(--text-soft); }
nav.lnb a[aria-current="page"] { color: var(--accent-deep); font-weight: 600; }

/* ── 머리글 ─────────────────────────────────── */
header.page { padding-top: var(--s10); }
.kicker { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-2); font-weight: 600; }
h1 { font-size: clamp(34px, 6.5vw, 50px); line-height: 1.25; margin-top: var(--s3); }
.lead { margin: var(--s4) 0 0; font-size: 21px; color: #444141; }

/* ── 섹션 ───────────────────────────────────── */
.sec { padding-top: var(--s10); }
.sec-label { font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-soft); margin-bottom: var(--s4); }
h2.sec-title { font-size: 25px; margin-bottom: var(--s3); }
h3.sub-title { font-size: 20px; margin-bottom: var(--s2); }
.lead-sm { color: var(--text-soft); margin: 0 0 var(--s4); }
p { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

/* ── 정의 목록 ──────────────────────────────── */
.dl { margin: 0; }
.dl-row {
  display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr);
  gap: var(--s4); padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.dl-row dt { font-size: 16px; color: var(--text-soft); }
.dl-row dd { margin: 0; font-size: 18px; }

/* ── 수치 ───────────────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s4); }
.stat { border-top: 3px solid var(--text); padding-top: var(--s3); }
.stat-n { font-size: 34px; font-weight: 600; color: var(--accent); line-height: 1.2; }
.stat-l { font-size: 17px; font-weight: 600; margin-top: 4px; }
.stat-note { font-size: 14px; color: var(--text-soft); }

/* ── 목록 ───────────────────────────────────── */
.list { margin: 0; padding-left: 1.2em; color: #444141; }
.list li { margin-bottom: 6px; }

/* ── 줄 항목 ────────────────────────────────── */
.row { display: grid; gap: 2px; padding: var(--s3) 0; border-bottom: 1px solid var(--line); }
.row-name { font-size: 19px; font-weight: 600; }
.row-sub  { font-size: 16px; color: var(--text-soft); }

.row-2col {
  display: grid; grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
  gap: var(--s4); align-items: baseline;
  padding: var(--s3) 0; border-bottom: 1px solid var(--line);
}
.row-2col > :first-child { font-size: 19px; font-weight: 600; }
.row-2col > :last-child { font-size: 17px; color: #444141; }

/* ── 색인 링크 ──────────────────────────────── */
.idx {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s4); align-items: baseline;
  padding: var(--s3); margin: 0 calc(var(--s3) * -1);
  border-bottom: 1px solid var(--line); color: inherit;
}
.idx:hover { background: var(--accent-tint); color: inherit; }
.idx-t { font-size: 19px; font-weight: 600; display: block; }
.idx-d { font-size: 16px; color: var(--text-soft); }
.idx-a { color: var(--accent); font-size: 20px; }

/* ── 연혁 ───────────────────────────────────── */
.year-block { display: grid; gap: var(--s2); margin-bottom: var(--s8); }
.year-n { font-family: "Source Serif 4", serif; font-size: 30px; font-weight: 700; color: var(--accent-2); line-height: 1; }

/* ── 다단 ───────────────────────────────────── */
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--s8); }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s8); }

/* 3열 — 인증서 카드 한 줄 배치 */
.cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
@media (max-width: 760px) { .cols-3 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }

/* ── 카드(인물·장비) ────────────────────────── */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--s8); }
.card-t { font-size: 20px; font-weight: 700; font-family: var(--font-head); margin-top: var(--s3); }
.card-m { font-size: 15px; color: var(--text-soft); }
.card-b { font-size: 17px; color: #444141; margin-top: var(--s2); }

/* ── 이미지 자리 ────────────────────────────── */
/* 실제 이미지로 교체할 때: <div class="ph" ...> 를 <img src="..." alt="..."> 로 바꾸면 됩니다. */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: var(--s4);
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 8px, #fff 8px, #fff 16px);
  border: 1px solid var(--line);
  color: var(--text-mute);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px; line-height: 1.5;
}
.ph-sq   { aspect-ratio: 1 / 1; }
.ph-4x3  { aspect-ratio: 4 / 3; }
.ph-16x9 { aspect-ratio: 16 / 9; }
.ph-a4   { aspect-ratio: 210 / 297; }

/* 인증서 카드 — 문서가 잘리지 않도록 contain */
.cert img { aspect-ratio: 210 / 297; object-fit: contain; background: var(--surface); }

/* ── 표 ─────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 17px; }
thead th { text-align: left; border-bottom: 2px solid var(--text); padding: var(--s2) var(--s2) var(--s2) 0; font-family: var(--font-head); }
tbody td { border-bottom: 1px solid var(--line); padding: var(--s3) var(--s2) var(--s3) 0; vertical-align: top; color: #444141; }
tbody td:first-child { white-space: nowrap; color: var(--text); font-weight: 600; }

/* ── 안내 상자 ──────────────────────────────── */
.note {
  padding: var(--s4); background: var(--surface);
  border-top: 2px solid var(--text-soft); font-size: 17px; color: #444141;
}

/* ── 언론보도 ───────────────────────────────── */
.press-year { padding-top: var(--s8); }
.year-n { display: flex; align-items: baseline; gap: var(--s3);
  padding-bottom: var(--s2); border-bottom: 2px solid var(--text); }
.year-c { font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--text-soft); }
.press-list { display: grid; }
.press {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 110px;
  gap: var(--s4);
  align-items: baseline;
  padding: var(--s3) var(--s2);
  margin: 0 calc(var(--s2) * -1);
  border-bottom: 1px solid var(--line);
  color: inherit;
}
.press:hover { background: var(--accent-tint); color: inherit; }
.press-d { font-size: 16px; color: var(--text-soft); white-space: nowrap; }
.press-t { font-size: 19px; line-height: 1.55; text-wrap: pretty; }
.press-m { font-size: 15px; color: var(--text-soft); text-align: right; }

.tag {
  display: inline-block; vertical-align: 2px;
  font-size: 13px; line-height: 1.4; padding: 1px 8px;
  border-radius: 2px; white-space: nowrap;
  background: var(--surface); color: var(--text-soft);
}
.tag-award  { background: var(--accent-tint); color: var(--accent-deep); }
.tag-patent { background: var(--accent-tint); color: var(--accent-deep); }
.tag-tv     { background: var(--surface); color: var(--text); }
.tag-mou,
.tag-csr    { background: var(--surface); color: var(--text-soft); }

@media (max-width: 640px) {
  .press { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .press-m { text-align: left; }
}

/* ── 푸터 ───────────────────────────────────── */
footer {
  margin-top: 96px; padding-top: var(--s4);
  border-top: 4px solid var(--text);
  font-size: 15px; color: var(--text-soft);
}
footer .legal-name { font-weight: 600; color: var(--text); font-size: 17px; }
footer p { margin: 6px 0 0; }
footer nav { margin-top: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); }
footer nav a { color: var(--text-soft); font-size: 14px; }

/* ── CSS_blog.css ── */
/* ============================================================
   YBP (Yaan Blog Post) — Global Design Tokens + Component CSS
   Usage: enqueue globally via functions.php or wp_head
   ============================================================ */

:root {
  /* Brand Colors */
  --ybp-color-primary:        #1a1a1a;
  --ybp-color-secondary:      #4a4a4a;
  --ybp-color-accent:         #b89a72;
  --ybp-color-accent-light:   #f5efe6;
  --ybp-color-accent-dark:    #8a7055;
  --ybp-color-muted:          #888888;
  --ybp-color-border:         #e0d8cc;
  --ybp-color-bg:             #ffffff;
  --ybp-color-bg-alt:         #faf8f5;
  --ybp-color-bg-dark:        #1a1a1a;
  --ybp-color-text-on-dark:   #ffffff;

  /* Typography */
  --ybp-font-sans:            'Inter', 'Noto Sans KR', sans-serif;
  --ybp-font-serif:           'Playfair Display', Georgia, serif;
  --ybp-font-size-xs:         0.75rem;
  --ybp-font-size-sm:         0.875rem;
  --ybp-font-size-base:       1rem;
  --ybp-font-size-md:         1.125rem;
  --ybp-font-size-lg:         1.5rem;
  --ybp-font-size-xl:         2rem;
  --ybp-font-weight-normal:   400;
  --ybp-font-weight-medium:   500;
  --ybp-font-weight-bold:     700;
  --ybp-line-height-tight:    1.2;
  --ybp-line-height-base:     1.7;

  /* Spacing */
  --ybp-space-xs:             0.25rem;
  --ybp-space-sm:             0.5rem;
  --ybp-space-md:             1rem;
  --ybp-space-lg:             1.5rem;
  --ybp-space-xl:             2.5rem;
  --ybp-space-2xl:            4rem;
  --ybp-space-3xl:            6rem;

  /* Layout */
  --ybp-radius-sm:            4px;
  --ybp-radius-md:            8px;
  --ybp-radius-lg:            16px;

  /* Shadows */
  --ybp-shadow-sm:            0 1px 4px rgba(0,0,0,0.06);
  --ybp-shadow-md:            0 4px 16px rgba(0,0,0,0.09);

  /* Transitions */
  --ybp-transition:           0.2s ease;
}

/* ============================================================
   WRAPPER
   ============================================================ */
.ybp {
  font-family:    var(--ybp-font-sans);
  color:          var(--ybp-color-primary);
  margin:         0 auto;
  line-height:    var(--ybp-line-height-base);
  font-size:      var(--ybp-font-size-base);
}

/* ============================================================
   HERO
   ============================================================ */
.ybp-hero {
  padding:        var(--ybp-space-2xl) 0 var(--ybp-space-xl);
  border-bottom:  1px solid var(--ybp-color-border);
  margin-bottom:  var(--ybp-space-2xl);
}

.ybp-hero-line {
  width:          40px;
  height:         3px;
  background:     var(--ybp-color-accent);
  margin-bottom:  var(--ybp-space-lg);
}

.ybp-hero-tag {
  font-size:      var(--ybp-font-size-xs);
  font-weight:    var(--ybp-font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--ybp-color-accent);
  margin:         0 0 var(--ybp-space-sm);
}

.ybp-hero-category {
  display:        inline-block;
  font-size:      var(--ybp-font-size-xs);
  color:          var(--ybp-color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom:  var(--ybp-space-md);
}

.ybp-hero h1 {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-xl);
  font-weight:    var(--ybp-font-weight-bold);
  line-height:    var(--ybp-line-height-tight);
  margin:         0 0 var(--ybp-space-md);
  color:          var(--ybp-color-primary);
}

.ybp-hero h1 em {
  font-style:     italic;
  color:          var(--ybp-color-accent-dark);
}

.ybp-hero-meta {
  display:        flex;
  gap:            var(--ybp-space-sm);
  align-items:    center;
  font-size:      var(--ybp-font-size-xs);
  color:          var(--ybp-color-muted);
  margin:         0 0 var(--ybp-space-md);
}

.ybp-hero-desc {
  font-size:      var(--ybp-font-size-md);
  color:          var(--ybp-color-secondary);
  max-width:      600px;
  margin:         0;
}

/* ============================================================
   QUICK ANSWER
   ============================================================ */
.ybp-quick-answer {
  background:     var(--ybp-color-accent-light);
  border-left:    4px solid var(--ybp-color-accent);
  border-radius:  0 var(--ybp-radius-md) var(--ybp-radius-md) 0;
  padding:        var(--ybp-space-lg) var(--ybp-space-xl);
  margin-bottom:  var(--ybp-space-2xl);
  font-size:      var(--ybp-font-size-md);
  color:          var(--ybp-color-primary);
}

.ybp-quick-answer p {
  margin: 0;
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.ybp-trust-bar {
  display:        grid;
  grid-template-columns: repeat(3, 1fr);
  gap:            var(--ybp-space-md);
  background:     var(--ybp-color-bg-dark);
  border-radius:  var(--ybp-radius-lg);
  padding:        var(--ybp-space-xl);
  margin-bottom:  var(--ybp-space-2xl);
  text-align:     center;
}

.ybp-trust-item {
  display:        flex;
  flex-direction: column;
  gap:            var(--ybp-space-xs);
}

.ybp-trust-num {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-xl);
  font-weight:    var(--ybp-font-weight-bold);
  color:          var(--ybp-color-accent);
  line-height:    1;
}

.ybp-trust-label {
  font-size:      var(--ybp-font-size-xs);
  color:          rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.ybp section {
  margin-bottom:  var(--ybp-space-3xl);
}

.ybp-sec-hd {
  display:        flex;
  align-items:    center;
  gap:            var(--ybp-space-md);
  margin-bottom:  var(--ybp-space-lg);
}

.ybp-sec-nb {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-xs);
  font-weight:    var(--ybp-font-weight-bold);
  color:          var(--ybp-color-accent);
  letter-spacing: 0.1em;
  white-space:    nowrap;
}

.ybp-sec-ln {
  flex:           1;
  height:         1px;
  background:     var(--ybp-color-border);
}

.ybp section h2 {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-lg);
  font-weight:    var(--ybp-font-weight-bold);
  line-height:    var(--ybp-line-height-tight);
  margin:         0 0 var(--ybp-space-xl);
  color:          var(--ybp-color-primary);
}

.ybp section h2 em {
  font-style:     italic;
  color:          var(--ybp-color-accent-dark);
}

/* ============================================================
   FEATURE MEDIA BLOCK
   ============================================================ */
.ybp-feature-media-block {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  gap:            var(--ybp-space-xl);
  align-items:    start;
  margin-bottom:  var(--ybp-space-xl);
}

.ybp-feature-media-block img {
  width:          100%;
  border-radius:  var(--ybp-radius-md);
  display:        block;
  object-fit:     cover;
  aspect-ratio:   4/3;
}

.ybp-fmb-text p {
  color:          var(--ybp-color-secondary);
  margin:         0 0 var(--ybp-space-md);
}

.ybp-fmb-text p:last-child {
  margin-bottom:  0;
}

/* ============================================================
   SCIENCE BLOCK
   ============================================================ */
.ybp-science-block {
  background:     var(--ybp-color-bg-alt);
  border:         1px solid var(--ybp-color-border);
  border-radius:  var(--ybp-radius-md);
  padding:        var(--ybp-space-lg) var(--ybp-space-xl);
}

.ybp-science-label {
  font-size:      var(--ybp-font-size-xs);
  font-weight:    var(--ybp-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--ybp-color-accent-dark);
  margin:         0 0 var(--ybp-space-sm);
}

.ybp-science-block p:last-child {
  margin:         0;
  color:          var(--ybp-color-secondary);
}

/* ============================================================
   PROFILE GRID (What's Included Cards)
   ============================================================ */
.ybp-profile-grid {
  display:        grid;
  grid-template-columns: repeat(2, 1fr);
  gap:            var(--ybp-space-md);
  margin-bottom:  var(--ybp-space-xl);
}

.ybp-profile-card {
  background:     var(--ybp-color-bg-alt);
  border:         1px solid var(--ybp-color-border);
  border-top:     3px solid var(--ybp-color-accent);
  border-radius:  var(--ybp-radius-md);
  padding:        var(--ybp-space-lg);
}

.ybp-profile-card h3 {
  font-size:      var(--ybp-font-size-base);
  font-weight:    var(--ybp-font-weight-bold);
  color:          var(--ybp-color-primary);
  margin:         0 0 var(--ybp-space-sm);
  line-height:    var(--ybp-line-height-tight);
}

.ybp-profile-card p {
  font-size:      var(--ybp-font-size-sm);
  color:          var(--ybp-color-secondary);
  margin:         0;
}

/* ============================================================
   INLINE HIGHLIGHT
   ============================================================ */
.ybp-inline-highlight {
  background:     var(--ybp-color-accent-light);
  border-left:    3px solid var(--ybp-color-accent);
  border-radius:  0 var(--ybp-radius-sm) var(--ybp-radius-sm) 0;
  padding:        var(--ybp-space-md) var(--ybp-space-lg);
  font-size:      var(--ybp-font-size-sm);
  color:          var(--ybp-color-secondary);
  margin:         var(--ybp-space-xl) 0 0;
}

/* ============================================================
   COMPARE TABLE
   ============================================================ */
.ybp-compare-table {
  width:          100%;
  border-collapse: collapse;
  font-size:      var(--ybp-font-size-sm);
  margin-bottom:  0;
}

.ybp-compare-table thead tr {
  background:     var(--ybp-color-bg-dark);
  color:          var(--ybp-color-text-on-dark);
}

.ybp-compare-table th {
  padding:        var(--ybp-space-md) var(--ybp-space-lg);
  text-align:     left;
  font-weight:    var(--ybp-font-weight-medium);
  font-size:      var(--ybp-font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ybp-compare-table td {
  padding:        var(--ybp-space-md) var(--ybp-space-lg);
  border-bottom:  1px solid var(--ybp-color-border);
  color:          var(--ybp-color-secondary);
  vertical-align: top;
}

.ybp-compare-table td:first-child {
  font-weight:    var(--ybp-font-weight-medium);
  color:          var(--ybp-color-primary);
  white-space:    nowrap;
}

.ybp-compare-table tbody tr:last-child td {
  border-bottom:  none;
}

.ybp-compare-table tbody tr:nth-child(even) {
  background:     var(--ybp-color-bg-alt);
}

/* ============================================================
   STEPS
   ============================================================ */
.ybp-steps {
  display:        flex;
  flex-direction: column;
  gap:            var(--ybp-space-lg);
  margin-bottom:  var(--ybp-space-xl);
}

.ybp-step {
  display:        flex;
  gap:            var(--ybp-space-lg);
  align-items:    flex-start;
}

.ybp-step-num {
  flex-shrink:    0;
  width:          2.5rem;
  height:         2.5rem;
  border-radius:  50%;
  background:     var(--ybp-color-accent);
  color:          var(--ybp-color-text-on-dark);
  font-size:      var(--ybp-font-size-xs);
  font-weight:    var(--ybp-font-weight-bold);
  display:        flex;
  align-items:    center;
  justify-content:center;
  letter-spacing: 0.04em;
}

.ybp-step p {
  margin:         0;
  color:          var(--ybp-color-secondary);
  padding-top:    0.4rem;
}

/* ============================================================
   FAQ
   ============================================================ */
.ybp-faq-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.ybp-faq-item {
  border-bottom:  1px solid var(--ybp-color-border);
  padding:        var(--ybp-space-lg) 0;
}

.ybp-faq-item:first-child {
  border-top:     1px solid var(--ybp-color-border);
}

.ybp-faq-q {
  font-weight:    var(--ybp-font-weight-bold);
  color:          var(--ybp-color-primary);
  margin:         0 0 var(--ybp-space-sm);
  font-size:      var(--ybp-font-size-base);
}

.ybp-faq-a {
  color:          var(--ybp-color-secondary);
  font-size:      var(--ybp-font-size-sm);
  margin:         0;
}

/* ============================================================
   GOOGLE RATING
   ============================================================ */
.ybp-google-rating {
  background:     var(--ybp-color-bg-alt);
  border:         1px solid var(--ybp-color-border);
  border-radius:  var(--ybp-radius-md);
  padding:        var(--ybp-space-lg) var(--ybp-space-xl);
  text-align:     center;
  color:          var(--ybp-color-secondary);
  font-size:      var(--ybp-font-size-sm);
  margin-bottom:  var(--ybp-space-2xl);
}

.ybp-google-rating strong {
  color:          var(--ybp-color-accent-dark);
  font-size:      var(--ybp-font-size-lg);
}

/* ============================================================
   CONTACT BLOCK
   ============================================================ */
.ybp-contact-block {
  background:     var(--ybp-color-accent-light);
  border:         1px solid var(--ybp-color-border);
  border-radius:  var(--ybp-radius-lg);
  padding:        var(--ybp-space-xl) var(--ybp-space-2xl);
  text-align:     center;
  margin-bottom:  var(--ybp-space-2xl);
}

.ybp-contact-block h3 {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-lg);
  margin:         0 0 var(--ybp-space-sm);
}

.ybp-contact-block p {
  color:          var(--ybp-color-secondary);
  margin:         0 0 var(--ybp-space-lg);
}

.ybp-cta-link {
  display:        inline-block;
  background:     var(--ybp-color-accent);
  color:          var(--ybp-color-text-on-dark);
  padding:        var(--ybp-space-md) var(--ybp-space-xl);
  border-radius:  var(--ybp-radius-sm);
  font-weight:    var(--ybp-font-weight-medium);
  font-size:      var(--ybp-font-size-sm);
  text-decoration:none;
  transition:     background var(--ybp-transition);
  letter-spacing: 0.04em;
}

.ybp-cta-link:hover {
  background:     var(--ybp-color-accent-dark);
}

/* ============================================================
   DOCTOR BLOCK
   ============================================================ */
.ybp-doctor-block {
  background:     var(--ybp-color-bg-alt);
  border:         1px solid var(--ybp-color-border);
  border-radius:  var(--ybp-radius-md);
  padding:        var(--ybp-space-lg) var(--ybp-space-xl);
  font-size:      var(--ybp-font-size-sm);
  color:          var(--ybp-color-secondary);
}

.ybp-doctor-block p {
  margin: 0;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.ybp-final-cta {
  background:     var(--ybp-color-bg-dark);
  border-radius:  var(--ybp-radius-lg);
  padding:        var(--ybp-space-2xl);
  text-align:     center;
  margin-top:     var(--ybp-space-2xl);
}

.ybp-final-cta h3 {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-lg);
  color:          var(--ybp-color-text-on-dark);
  margin:         0 0 var(--ybp-space-lg);
}

.ybp-cta-btn {
  display:        inline-block;
  background:     var(--ybp-color-accent);
  color:          var(--ybp-color-text-on-dark);
  padding:        var(--ybp-space-md) var(--ybp-space-2xl);
  border-radius:  var(--ybp-radius-sm);
  font-weight:    var(--ybp-font-weight-bold);
  font-size:      var(--ybp-font-size-base);
  text-decoration:none;
  transition:     background var(--ybp-transition);
  letter-spacing: 0.04em;
}

.ybp-cta-btn:hover {
  background:     var(--ybp-color-accent-dark);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .ybp-trust-bar             { grid-template-columns: repeat(3, 1fr); gap: var(--ybp-space-sm); padding: var(--ybp-space-lg); }
  .ybp-trust-num             { font-size: var(--ybp-font-size-lg); }
  .ybp-feature-media-block   { grid-template-columns: 1fr; }
  .ybp-profile-grid          { grid-template-columns: 1fr; }
  .ybp-compare-table         { font-size: var(--ybp-font-size-xs); }
  .ybp-compare-table th,
  .ybp-compare-table td      { padding: var(--ybp-space-sm) var(--ybp-space-md); }
  .ybp-contact-block         { padding: var(--ybp-space-xl) var(--ybp-space-lg); }
  .ybp-final-cta             { padding: var(--ybp-space-xl) var(--ybp-space-lg); }
}

@media (max-width: 480px) {
  .ybp-trust-bar             { grid-template-columns: 1fr; }
}

/* ── CSS_common.css ── */
/* =========================================
   Section Number Overlay
   ========================================= */

.gb-overlap {
    display: grid;
    place-items: center;
    justify-items: center;
    position: relative;
    margin-bottom: 1rem;
}

.gb-overlap > * {
    grid-area: 1 / 1;
}

/* Background Number */

.gb-overlap-number {
    font-size: clamp(90px, 14vw, 220px);
    font-weight: 700;
    line-height: 1;
    color: #d9d9d9;
    opacity: 0.7;
    z-index: 1;
    user-select: none;
}

/* Front Text */

.gb-overlap-text {
    font-size: clamp(28px, 8vw, 100px);
    font-weight: 700;
    line-height: 1;
    color: #9c6234;
    z-index: 2;

    /* 숫자 위쪽으로 조금 이동 */
    transform: translateY(20%);
}
.gb-container-wide{

    width:100%;
    padding-inline:30px;
    margin-inline:auto;
    box-sizing:border-box;
	margin-bottom:200px;
}
.highlight-strong strong {
    font-weight: 700;
    background-image: linear-gradient(#eae3dc, #eae3dc);
    background-repeat: no-repeat;
    background-size: 100% 15px;
    background-position: left bottom;
}
.entry-header {
    display: none;
}


/* ===========================
   YAAN Signature Auto Slider
=========================== */

/* 바깥 영역 */
.signature-slider{
    width:100%;
    overflow:hidden;
    position:relative;
}

/* 카드 트랙 */
.signature-track{
    display:flex;
    flex-wrap:nowrap;
    gap:24px;
    width:max-content;
    animation:signatureScroll 30s linear infinite;
    will-change:transform;
}

/* 카드 */
.signature-track > *{
    flex:0 0 320px;
}

/* 마우스를 올리면 일시정지 */
.signature-track:hover{
    animation-play-state:paused;
}

/* 무한 롤링 */
@keyframes signatureScroll{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}

/* 태블릿 */
@media (max-width:1024px){

.signature-track{
    gap:20px;
    animation-duration:25s;
}

.signature-track > *{
    flex:0 0 280px;
}

}

/* 모바일 */
@media (max-width:768px){

.signature-track{
    gap:16px;
    animation-duration:18s;
}

.signature-track > *{
    flex:0 0 240px;
}

}

/* 사진 두개 살짝 기울여서 겹치기 */
.photo-overlap{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:-60px;
    position:relative;
    overflow:visible;
    padding:40px 0;
}

/* 공통 */
.photo-overlap img{
    width:320px;
    max-width:48%;
    border-radius:24px;
    box-shadow:0 20px 40px rgba(0,0,0,.18);
    transition:all .35s ease;
}

@keyframes float-left {
    0%,100%{
        transform: rotate(-7deg) translateY(0);
    }
    50%{
        transform: rotate(-7deg) translateY(-20px);
    }
}

@keyframes float-right {
    0%,100%{
        transform: rotate(7deg) translateY(0);
    }
    50%{
        transform: rotate(7deg) translateY(20px);
    }
}

/* 왼쪽 */
.photo-left{
    transform:rotate(-7deg);
    z-index:1;
    animation:float-left 4s ease-in-out infinite;
}

/* 오른쪽 */
.photo-right{
    transform:rotate(7deg);
    margin-left:-70px;
    z-index:2;
    animation:float-right 4s ease-in-out infinite;
}

/* Hover */
.photo-overlap img:hover{
    animation-play-state: paused;
}


/* ===========================
   FAQ Style
=========================== */

.wp-block-details{

    border-bottom:1px solid #e8e8e8;
    margin:0;
    padding:0;
}

/* ===========================
   Premium FAQ Style
=========================== */

.wp-block-details{

    border-bottom:1px solid #e8e8e8;
    margin:0;
    padding:0;
}

/* 질문 */

.wp-block-details summary{

    list-style:none;
    cursor:pointer;

    display:flex;
    align-items:center;

    padding:22px 0;

    font-size:22px;
    font-weight:600;
    line-height:1.5;

    color:#222;

    transition:color .25s ease;

}

/* 기본 삼각형 제거 */

.wp-block-details summary::-webkit-details-marker{

    display:none;

}

.wp-block-details summary::marker{

    display:none;

}

/* 왼쪽 Search SVG */

.wp-block-details summary::before{

    content:"";

    width:28px;
    height:28px;

    flex:0 0 28px;

    margin-right:14px;

    background-repeat:no-repeat;
    background-position:center;
    background-size:28px;

    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E73BE' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='M16 16L21 21'/%3E%3C/svg%3E");

}

/* 오른쪽 + */

.wp-block-details summary::after{

    content:"+";

    margin-left:auto;

    font-size:28px;
    font-weight:300;
    line-height:1;

    color:#999;

    transition:.25s ease;

}

/* 열린 상태 */

.wp-block-details[open] summary::after{

    content:"−";

    color:#1E73BE;

}

/* Hover */

.wp-block-details summary:hover{

    color:#1E73BE;

}

/* 답변 */

.wp-block-details > div{

    padding:0 0 28px 34px;

    color:#666;

    font-size:17px;
    line-height:1.9;

}

/* 슬라이더 css + JS 약간 30kb 들어감*/
.slider-track{

    display:flex;
    gap:24px;

    overflow-x:auto;

    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;

    scrollbar-width:none;

}

.slider-track::-webkit-scrollbar{
    display:none;
}

.card{

    flex:0 0 320px;

    scroll-snap-align:start;

}
/* =========================================
   3단 배너 사선 넣고 멀티플레스. Banner Stack
   ========================================= */

.banner-stack {
    position: relative;
    width: 100%;
    overflow: visible;
}


/* =========================================
   Individual Banner
   ========================================= */

.banner-stack > .banner {
    position: relative;
    min-height: 400px;
    margin-bottom: -70px;

    overflow: hidden;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /*
     * 사선 형태
     */
    clip-path: polygon(
        0 8%,
        100% 0,
        100% 92%,
        0 100%
    );
}


/* =========================================
   Banner Layer / Stacking Order
   ========================================= */

.banner-stack > .banner-1 {
    z-index: 1;
}

.banner-stack > .banner-2 {
    z-index: 2;
}

.banner-stack > .banner-3 {
    z-index: 3;
}


/* =========================================
   Middle Banner - Opposite Angle
   ========================================= */
/* =========================================
   Clip Path
   1st: Top Horizontal / Bottom Diagonal
   ========================================= */

.banner-stack > .banner-1 {
    clip-path: polygon(
        0 0,
        100% 0,
        100% 92%,
        0 100%
    );
}


/* =========================================
   2nd: Top Diagonal / Bottom Diagonal
   ========================================= */

.banner-stack > .banner-2 {
    clip-path: polygon(
        0 0,
        100% 8%,
        100% 100%,
        0 92%
    );
}


/* =========================================
   3rd: Top Diagonal / Bottom Horizontal
   ========================================= */

.banner-stack > .banner-3 {
    clip-path: polygon(
        0 8%,
        100% 0,
        100% 100%,
        0 100%
    );
}



/* =========================================
   Color Overlay
   ========================================= */

.banner-stack > .banner::before {
    content: "";
    position: absolute;
    inset: 0;

    z-index: 1;

    background: rgba(0, 0, 0, 0.35);

    pointer-events: none;
}


/* =========================================
   Banner 1 Overlay
   ========================================= */

.banner-stack > .banner-1::before {
    background: rgba(30, 50, 60, 0.38);

}


/* =========================================
   Banner 2 Overlay
   ========================================= */

.banner-stack > .banner-2::before {
    background: rgba(110, 65, 55, 0.42);
}


/* =========================================
   Banner 3 Overlay
   ========================================= */

.banner-stack > .banner-3::before {
    background: rgba(0, 0, 0, 0.45);
}


/* =========================================
   Content Layer
   ========================================= */

.banner-stack > .banner > * {
    position: relative;
    z-index: 2;
}


/* =========================================
   Text / Content Position
   ========================================= */

.banner-stack .banner-content {
    position: relative;
    z-index: 2;
}
@media (max-width: 767px) {
    .design-wrap.gb-element-45008d9f {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }
}

/* =========================================
   Mobile
   ========================================= */

@media (max-width: 768px) {

    .banner-stack > .banner {
        min-height: 260px;
        margin-bottom: -34px;

        clip-path: polygon(
            0 5%,
            100% 0,
            100% 95%,
            0 100%
        );
    }


    .banner-stack > .banner-2 {
        clip-path: polygon(
            0 0,
            100% 5%,
            100% 100%,
            0 95%
        );
    }
}


/* =========================================
   Small Mobile
   ========================================= */

@media (max-width: 480px) {

    .banner-stack > .banner {
        min-height: 220px;
        margin-bottom: -24px;
    }

}


/* =========================================
   전체 영역 사각형 배너 디자인
   ========================================= */

.design-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: center;

    width: 100%;
    margin: 0 auto;

    padding: 30px 0;
}


/* =========================================
   왼쪽 2 × 2 카드
   ========================================= */

.design-cards {
    position: relative;
    z-index: 3;
    width: 100%;

    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
}


/* =========================================
   각각의 카드
   ========================================= */

.design-card {
    position: relative;

    min-height: 200px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    padding: 35px 25px;

    box-sizing: border-box;

    background: #fff;

    overflow: hidden;
}


/* =========================================
   카드 내부 테두리
   ========================================= */

.design-cards::after {           /* ← .design-card::after 에서 이동 */
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border: 1px solid #e59a52;
    pointer-events: none;
    z-index: 1;
}


/* =========================================
   카드 숫자
   ========================================= */

.design-card::before {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);

    font-size: 72px;
    line-height: 1;
    font-weight: 700;
    z-index: 1;
    pointer-events: none;
}


/* =========================================
   주황색 카드
   ========================================= */

.card-01,
.card-04 {
    background: #f57c00;
}

/* =========================================
   카드 콘텐츠
   ========================================= */

.design-card > * {
    position: relative;

    z-index: 2;
}



/* =========================================
   제목 밑의 작은 선
   ========================================= */

.design-card h3::after {
    content: "";

    display: block;

    width: 45px;
    height: 1px;

    margin: 15px auto 0;

    background: #df7620;
}


/* 주황색 카드의 선 */

.card-01 h3::after,
.card-04 h3::after {
    background: rgba(255, 255, 255, 0.8);
}

/* 주황색 카드 설명 */

.card-01 p,
.card-04 p {
    color: rgba(255, 255, 255, 0.9);
}


/* =========================================
   오른쪽 설명 박스
   ========================================= */

.design-info {
    position: relative;
    z-index: 1;

    min-height: 310px;

    margin-left: -1px;

    padding: 60px 70px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    text-align: center;

    border: 1px solid #e59a52;

    background: #fff;

    overflow: hidden;
}


/* =========================================
   오른쪽 박스 제목
   ========================================= */

.design-info h2 {
    position: relative;

    z-index: 2;

    margin: 0 0 20px;

    font-size: 27px;
    line-height: 1.4;

    color: #df7620;

    font-weight: 500;
}


/* =========================================
   오른쪽 설명
   ========================================= */

.design-info p {
    position: relative;

    z-index: 2;

    max-width: 500px;

    margin: 0;

    font-size: 15px;
    line-height: 1.7;

    color: #777;
}


/* =========================================
   오른쪽 워터마크
   ========================================= */

.design-info::after {
    content: "Yaan Clinic Gang-Nam";

    position: absolute;

    left: 20px;
    bottom: 5px;

    white-space: nowrap;

    font-size: 62px;
    line-height: 1;

    font-weight: 700;

    letter-spacing: 1px;

    color: rgba(245, 130, 20, 0.045);

    z-index: 1;

    pointer-events: none;
}


/* =========================================
   모바일
   ========================================= */

@media (max-width: 768px) {

    .design-wrap {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 20px;
    }


    .design-cards {
        width: 100%;
    }


    .design-card {
        min-height: 180px;

        padding: 30px 15px;
    }


    .design-card h3 {
        font-size: 19px;
    }


    .design-card p {
        font-size: 13px;
    }


    .design-info {
        min-height: 280px;

        margin-left: 0;

        padding: 50px 30px;
    }


    .design-info h2 {
        font-size: 24px;
    }


    .design-info::after {
        font-size: 42px;
        left: 10px;
    }
}


/* =========================================
   작은 모바일
   ========================================= */

@media (max-width: 480px) {

    .design-card {
        min-height: 160px;

        padding: 25px 10px;
    }


    .design-card::before {
        font-size: 55px;
    }


    .design-card h3 {
        font-size: 17px;

        margin-bottom: 20px;
    }


    .design-card p {
        font-size: 12px;
        line-height: 1.5;
    }


    .design-info {
        padding: 40px 20px;
    }

}

/* ===== 카드 폭 (잘림 방지 핵심) ===== */
.gb-element-39ba0ee7 {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 767px) {
    .gb-element-39ba0ee7 {
        width: 100% !important;
        margin-top: -40px !important;
    }
}

/* ===== 타임라인 01 ===== */
.care-timeline {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 1em;
    padding: 50px 60px 30px;
    text-align: center;
}
.care-timeline-item { display: flex; flex-direction: column; align-items: center; }
.care-timeline-title { font-size: 18px; font-weight: 700; color: #333; margin: 0; }

.care-timeline-stem {
    position: relative;
    width: 0;
    height: 26px;
    margin-top: 10px;
    border-left: 1px dotted #aaa;
}
.care-timeline-stem::after {
    content: "";
    position: absolute;
    left: -3px;
    bottom: -2px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #7a6bb5;
    z-index: 2;
}

.care-timeline-track {
    grid-column: 1 / -1;
    position: relative;
    height: 3px;
    margin: 0 0 25px;
    background: linear-gradient(90deg, #cfe8f0 0%, #b9a8e0 100%);
}
.care-timeline-track::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -8px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 9px solid #b9a8e0;
    transform: translateY(-50%);
}

.care-timeline-desc { font-size: 14px; line-height: 1.7; color: #666; margin: 0; }

/* ===== 모바일 ===== */
@media (max-width: 767px) {
    .care-timeline {
        grid-template-columns: 1fr;
        row-gap: 4px;
    }
    .care-timeline-track,
    .care-timeline-stem {
        display: none;
    }

    .care-timeline-item:nth-child(1) { order: 1; }
    .care-timeline-item:nth-child(6) { order: 2; margin-bottom: 22px; }
    .care-timeline-item:nth-child(2) { order: 3; }
    .care-timeline-item:nth-child(7) { order: 4; margin-bottom: 22px; }
    .care-timeline-item:nth-child(3) { order: 5; }
    .care-timeline-item:nth-child(8) { order: 6; margin-bottom: 22px; }
    .care-timeline-item:nth-child(4) { order: 7; }
    .care-timeline-item:nth-child(9) { order: 8; }

    .care-timeline-title::before {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #7a6bb5;
        margin-right: 6px;
        vertical-align: middle;
    }
}


/* ===== recommand for 조정 ===== */
.numbered-row-item {
    position: relative;
    margin-top: 35px;
}
.numbered-row-number {
    position: absolute;
    top: -35px;
    left: 15px;
    z-index: 2;
    font-size: 65px;
    font-weight: 900;
    line-height: 1;
    margin: 0;
}
.numbered-row-text {
    position: relative;
    z-index: 1;
    border: 1px solid var(--contrast-2);
    padding: 20px 20px 20px 75px;
    font-size: 30px;
    text-align: left;
    margin: 0;
}

/* ── CSS_Hero.css ── */
.hero {
    background-position: right bottom;
	background-size: 50%;
	background-repeat: no-repeat;
}

/* ── CSS_Landing.css ── */
/* ============================================================
   YBP (Yaan Blog Post) — Global Design Tokens + Component CSS
   Usage: enqueue globally via functions.php or wp_head
   ============================================================ */

:root {
  /* Brand Colors */
  --ybp-color-primary:        #1a1a1a;
  --ybp-color-secondary:      #4a4a4a;
  --ybp-color-accent:         #b89a72;
  --ybp-color-accent-light:   #f5efe6;
  --ybp-color-accent-dark:    #8a7055;
  --ybp-color-muted:          #888888;
  --ybp-color-border:         #e0d8cc;
  --ybp-color-bg:             #ffffff;
  --ybp-color-bg-alt:         #faf8f5;
  --ybp-color-bg-dark:        #1a1a1a;
  --ybp-color-text-on-dark:   #ffffff;

  /* Typography */
  --ybp-font-sans:            'Inter', 'Noto Sans KR', sans-serif;
  --ybp-font-serif:           'Playfair Display', Georgia, serif;
  --ybp-font-size-xs:         0.75rem;
  --ybp-font-size-sm:         0.875rem;
  --ybp-font-size-base:       1rem;
  --ybp-font-size-md:         1.125rem;
  --ybp-font-size-lg:         1.5rem;
  --ybp-font-size-xl:         2rem;
  --ybp-font-weight-normal:   400;
  --ybp-font-weight-medium:   500;
  --ybp-font-weight-bold:     700;
  --ybp-line-height-tight:    1.2;
  --ybp-line-height-base:     1.7;

  /* Spacing */
  --ybp-space-xs:             0.25rem;
  --ybp-space-sm:             0.5rem;
  --ybp-space-md:             1rem;
  --ybp-space-lg:             1.5rem;
  --ybp-space-xl:             2.5rem;
  --ybp-space-2xl:            4rem;
  --ybp-space-3xl:            6rem;

  /* Layout */
  --ybp-radius-sm:            4px;
  --ybp-radius-md:            8px;
  --ybp-radius-lg:            16px;

  /* Shadows */
  --ybp-shadow-sm:            0 1px 4px rgba(0,0,0,0.06);
  --ybp-shadow-md:            0 4px 16px rgba(0,0,0,0.09);

  /* Transitions */
  --ybp-transition:           0.2s ease;
}

/* ============================================================
   WRAPPER
   ============================================================ */
.ybp {
  font-family:    var(--ybp-font-sans);
  color:          var(--ybp-color-primary);
  margin:         0 auto;
  line-height:    var(--ybp-line-height-base);
  font-size:      var(--ybp-font-size-base);
}

/* ============================================================
   HERO
   ============================================================ */
.ybp-hero {
  padding:        var(--ybp-space-2xl) 0 var(--ybp-space-xl);
  border-bottom:  1px solid var(--ybp-color-border);
  margin-bottom:  var(--ybp-space-2xl);
}

.ybp-hero-line {
  width:          40px;
  height:         3px;
  background:     var(--ybp-color-accent);
  margin-bottom:  var(--ybp-space-lg);
}

.ybp-hero-tag {
  font-size:      var(--ybp-font-size-xs);
  font-weight:    var(--ybp-font-weight-medium);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--ybp-color-accent);
  margin:         0 0 var(--ybp-space-sm);
}

.ybp-hero-category {
  display:        inline-block;
  font-size:      var(--ybp-font-size-xs);
  color:          var(--ybp-color-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom:  var(--ybp-space-md);
}

.ybp-hero h1 {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-xl);
  font-weight:    var(--ybp-font-weight-bold);
  line-height:    var(--ybp-line-height-tight);
  margin:         0 0 var(--ybp-space-md);
  color:          var(--ybp-color-primary);
}

.ybp-hero h1 em {
  font-style:     italic;
  color:          var(--ybp-color-accent-dark);
}

.ybp-hero-meta {
  display:        flex;
  gap:            var(--ybp-space-sm);
  align-items:    center;
  font-size:      var(--ybp-font-size-xs);
  color:          var(--ybp-color-muted);
  margin:         0 0 var(--ybp-space-md);
}

.ybp-hero-desc {
  font-size:      var(--ybp-font-size-md);
  color:          var(--ybp-color-secondary);
  max-width:      600px;
  margin:         0;
}

/* ============================================================
   QUICK ANSWER
   ============================================================ */
.ybp-quick-answer {
  background:     var(--ybp-color-accent-light);
  border-left:    4px solid var(--ybp-color-accent);
  border-radius:  0 var(--ybp-radius-md) var(--ybp-radius-md) 0;
  padding:        var(--ybp-space-lg) var(--ybp-space-xl);
  margin-bottom:  var(--ybp-space-2xl);
  font-size:      var(--ybp-font-size-md);
  color:          var(--ybp-color-primary);
}

.ybp-quick-answer p {
  margin: 0;
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.ybp-trust-bar {
  display:        grid;
  grid-template-columns: repeat(3, 1fr);
  gap:            var(--ybp-space-md);
  background:     var(--ybp-color-bg-dark);
  border-radius:  var(--ybp-radius-lg);
  padding:        var(--ybp-space-xl);
  margin-bottom:  var(--ybp-space-2xl);
  text-align:     center;
}

.ybp-trust-item {
  display:        flex;
  flex-direction: column;
  gap:            var(--ybp-space-xs);
}

.ybp-trust-num {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-xl);
  font-weight:    var(--ybp-font-weight-bold);
  color:          var(--ybp-color-accent);
  line-height:    1;
}

.ybp-trust-label {
  font-size:      var(--ybp-font-size-xs);
  color:          rgba(255,255,255,0.6);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.ybp section {
  margin-bottom:  var(--ybp-space-3xl);
}

.ybp-sec-hd {
  display:        flex;
  align-items:    center;
  gap:            var(--ybp-space-md);
  margin-bottom:  var(--ybp-space-lg);
}

.ybp-sec-nb {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-xs);
  font-weight:    var(--ybp-font-weight-bold);
  color:          var(--ybp-color-accent);
  letter-spacing: 0.1em;
  white-space:    nowrap;
}

.ybp-sec-ln {
  flex:           1;
  height:         1px;
  background:     var(--ybp-color-border);
}

.ybp section h2 {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-lg);
  font-weight:    var(--ybp-font-weight-bold);
  line-height:    var(--ybp-line-height-tight);
  margin:         0 0 var(--ybp-space-xl);
  color:          var(--ybp-color-primary);
}

.ybp section h2 em {
  font-style:     italic;
  color:          var(--ybp-color-accent-dark);
}

/* ============================================================
   FEATURE MEDIA BLOCK
   ============================================================ */
.ybp-feature-media-block {
  display:        grid;
  grid-template-columns: 1fr 1fr;
  gap:            var(--ybp-space-xl);
  align-items:    start;
  margin-bottom:  var(--ybp-space-xl);
}

.ybp-feature-media-block img {
  width:          100%;
  border-radius:  var(--ybp-radius-md);
  display:        block;
  object-fit:     cover;
  aspect-ratio:   4/3;
}

.ybp-fmb-text p {
  color:          var(--ybp-color-secondary);
  margin:         0 0 var(--ybp-space-md);
}

.ybp-fmb-text p:last-child {
  margin-bottom:  0;
}

/* ============================================================
   SCIENCE BLOCK
   ============================================================ */
.ybp-science-block {
  background:     var(--ybp-color-bg-alt);
  border:         1px solid var(--ybp-color-border);
  border-radius:  var(--ybp-radius-md);
  padding:        var(--ybp-space-lg) var(--ybp-space-xl);
}

.ybp-science-label {
  font-size:      var(--ybp-font-size-xs);
  font-weight:    var(--ybp-font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--ybp-color-accent-dark);
  margin:         0 0 var(--ybp-space-sm);
}

.ybp-science-block p:last-child {
  margin:         0;
  color:          var(--ybp-color-secondary);
}

/* ============================================================
   PROFILE GRID (What's Included Cards)
   ============================================================ */
.ybp-profile-grid {
  display:        grid;
  grid-template-columns: repeat(2, 1fr);
  gap:            var(--ybp-space-md);
  margin-bottom:  var(--ybp-space-xl);
}

.ybp-profile-card {
  background:     var(--ybp-color-bg-alt);
  border:         1px solid var(--ybp-color-border);
  border-top:     3px solid var(--ybp-color-accent);
  border-radius:  var(--ybp-radius-md);
  padding:        var(--ybp-space-lg);
}

.ybp-profile-card h3 {
  font-size:      var(--ybp-font-size-base);
  font-weight:    var(--ybp-font-weight-bold);
  color:          var(--ybp-color-primary);
  margin:         0 0 var(--ybp-space-sm);
  line-height:    var(--ybp-line-height-tight);
}

.ybp-profile-card p {
  font-size:      var(--ybp-font-size-sm);
  color:          var(--ybp-color-secondary);
  margin:         0;
}

/* ============================================================
   INLINE HIGHLIGHT
   ============================================================ */
.ybp-inline-highlight {
  background:     var(--ybp-color-accent-light);
  border-left:    3px solid var(--ybp-color-accent);
  border-radius:  0 var(--ybp-radius-sm) var(--ybp-radius-sm) 0;
  padding:        var(--ybp-space-md) var(--ybp-space-lg);
  font-size:      var(--ybp-font-size-sm);
  color:          var(--ybp-color-secondary);
  margin:         var(--ybp-space-xl) 0 0;
}

/* ============================================================
   COMPARE TABLE
   ============================================================ */
.ybp-compare-table {
  width:          100%;
  border-collapse: collapse;
  font-size:      var(--ybp-font-size-sm);
  margin-bottom:  0;
}

.ybp-compare-table thead tr {
  background:     var(--ybp-color-bg-dark);
  color:          var(--ybp-color-text-on-dark);
}

.ybp-compare-table th {
  padding:        var(--ybp-space-md) var(--ybp-space-lg);
  text-align:     left;
  font-weight:    var(--ybp-font-weight-medium);
  font-size:      var(--ybp-font-size-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ybp-compare-table td {
  padding:        var(--ybp-space-md) var(--ybp-space-lg);
  border-bottom:  1px solid var(--ybp-color-border);
  color:          var(--ybp-color-secondary);
  vertical-align: top;
}

.ybp-compare-table td:first-child {
  font-weight:    var(--ybp-font-weight-medium);
  color:          var(--ybp-color-primary);
  white-space:    nowrap;
}

.ybp-compare-table tbody tr:last-child td {
  border-bottom:  none;
}

.ybp-compare-table tbody tr:nth-child(even) {
  background:     var(--ybp-color-bg-alt);
}

/* ============================================================
   STEPS
   ============================================================ */
.ybp-steps {
  display:        flex;
  flex-direction: column;
  gap:            var(--ybp-space-lg);
  margin-bottom:  var(--ybp-space-xl);
}

.ybp-step {
  display:        flex;
  gap:            var(--ybp-space-lg);
  align-items:    flex-start;
}

.ybp-step-num {
  flex-shrink:    0;
  width:          2.5rem;
  height:         2.5rem;
  border-radius:  50%;
  background:     var(--ybp-color-accent);
  color:          var(--ybp-color-text-on-dark);
  font-size:      var(--ybp-font-size-xs);
  font-weight:    var(--ybp-font-weight-bold);
  display:        flex;
  align-items:    center;
  justify-content:center;
  letter-spacing: 0.04em;
}

.ybp-step p {
  margin:         0;
  color:          var(--ybp-color-secondary);
  padding-top:    0.4rem;
}

/* ============================================================
   FAQ
   ============================================================ */
.ybp-faq-list {
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.ybp-faq-item {
  border-bottom:  1px solid var(--ybp-color-border);
  padding:        var(--ybp-space-lg) 0;
}

.ybp-faq-item:first-child {
  border-top:     1px solid var(--ybp-color-border);
}

.ybp-faq-q {
  font-weight:    var(--ybp-font-weight-bold);
  color:          var(--ybp-color-primary);
  margin:         0 0 var(--ybp-space-sm);
  font-size:      var(--ybp-font-size-base);
}

.ybp-faq-a {
  color:          var(--ybp-color-secondary);
  font-size:      var(--ybp-font-size-sm);
  margin:         0;
}

/* ============================================================
   GOOGLE RATING
   ============================================================ */
.ybp-google-rating {
  background:     var(--ybp-color-bg-alt);
  border:         1px solid var(--ybp-color-border);
  border-radius:  var(--ybp-radius-md);
  padding:        var(--ybp-space-lg) var(--ybp-space-xl);
  text-align:     center;
  color:          var(--ybp-color-secondary);
  font-size:      var(--ybp-font-size-sm);
  margin-bottom:  var(--ybp-space-2xl);
}

.ybp-google-rating strong {
  color:          var(--ybp-color-accent-dark);
  font-size:      var(--ybp-font-size-lg);
}

/* ============================================================
   CONTACT BLOCK
   ============================================================ */
.ybp-contact-block {
  background:     var(--ybp-color-accent-light);
  border:         1px solid var(--ybp-color-border);
  border-radius:  var(--ybp-radius-lg);
  padding:        var(--ybp-space-xl) var(--ybp-space-2xl);
  text-align:     center;
  margin-bottom:  var(--ybp-space-2xl);
}

.ybp-contact-block h3 {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-lg);
  margin:         0 0 var(--ybp-space-sm);
}

.ybp-contact-block p {
  color:          var(--ybp-color-secondary);
  margin:         0 0 var(--ybp-space-lg);
}

.ybp-cta-link {
  display:        inline-block;
  background:     var(--ybp-color-accent);
  color:          var(--ybp-color-text-on-dark);
  padding:        var(--ybp-space-md) var(--ybp-space-xl);
  border-radius:  var(--ybp-radius-sm);
  font-weight:    var(--ybp-font-weight-medium);
  font-size:      var(--ybp-font-size-sm);
  text-decoration:none;
  transition:     background var(--ybp-transition);
  letter-spacing: 0.04em;
}

.ybp-cta-link:hover {
  background:     var(--ybp-color-accent-dark);
}

/* ============================================================
   DOCTOR BLOCK
   ============================================================ */
.ybp-doctor-block {
  background:     var(--ybp-color-bg-alt);
  border:         1px solid var(--ybp-color-border);
  border-radius:  var(--ybp-radius-md);
  padding:        var(--ybp-space-lg) var(--ybp-space-xl);
  font-size:      var(--ybp-font-size-sm);
  color:          var(--ybp-color-secondary);
}

.ybp-doctor-block p {
  margin: 0;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.ybp-final-cta {
  background:     var(--ybp-color-bg-dark);
  border-radius:  var(--ybp-radius-lg);
  padding:        var(--ybp-space-2xl);
  text-align:     center;
  margin-top:     var(--ybp-space-2xl);
}

.ybp-final-cta h3 {
  font-family:    var(--ybp-font-serif);
  font-size:      var(--ybp-font-size-lg);
  color:          var(--ybp-color-text-on-dark);
  margin:         0 0 var(--ybp-space-lg);
}

.ybp-cta-btn {
  display:        inline-block;
  background:     var(--ybp-color-accent);
  color:          var(--ybp-color-text-on-dark);
  padding:        var(--ybp-space-md) var(--ybp-space-2xl);
  border-radius:  var(--ybp-radius-sm);
  font-weight:    var(--ybp-font-weight-bold);
  font-size:      var(--ybp-font-size-base);
  text-decoration:none;
  transition:     background var(--ybp-transition);
  letter-spacing: 0.04em;
}

.ybp-cta-btn:hover {
  background:     var(--ybp-color-accent-dark);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .ybp-trust-bar             { grid-template-columns: repeat(3, 1fr); gap: var(--ybp-space-sm); padding: var(--ybp-space-lg); }
  .ybp-trust-num             { font-size: var(--ybp-font-size-lg); }
  .ybp-feature-media-block   { grid-template-columns: 1fr; }
  .ybp-profile-grid          { grid-template-columns: 1fr; }
  .ybp-compare-table         { font-size: var(--ybp-font-size-xs); }
  .ybp-compare-table th,
  .ybp-compare-table td      { padding: var(--ybp-space-sm) var(--ybp-space-md); }
  .ybp-contact-block         { padding: var(--ybp-space-xl) var(--ybp-space-lg); }
  .ybp-final-cta             { padding: var(--ybp-space-xl) var(--ybp-space-lg); }
}

@media (max-width: 480px) {
  .ybp-trust-bar             { grid-template-columns: 1fr; }
}