/*! gpchild-bundle 9f81c4d20c7b38baa740846359b5a9a2 */
/* ── common.css ── */
/* autopost internal links */
.gb-element-autopost-internal-links {
  margin: 56px 0 24px;
  padding: 28px;
  border: 1px solid #d8e2ee;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(241, 246, 252, 0.96) 100%);
  box-shadow: 0 18px 40px rgba(31, 56, 88, 0.08);
}

.gb-element-autopost-internal-links .gb-text-autopost-internal-links-h2 {
  margin: 0 0 18px;
  color: #16365d;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
}

.gb-element-autopost-internal-links .autopost-internal-links-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gb-element-autopost-internal-links .autopost-internal-links-list li {
  margin: 0 0 12px;
}

.gb-element-autopost-internal-links .autopost-internal-links-list li:last-child {
  margin-bottom: 0;
}

.gb-element-autopost-internal-links a.gb-text,
.gb-element-autopost-internal-links .gb-text[href] {
  display: block;
  padding: 16px 18px;
  border: 1px solid #d5e1ef;
  border-radius: 14px;
  background: #ffffff;
  color: #1a3a63;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.55;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(21, 49, 79, 0.06);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.gb-element-autopost-internal-links a.gb-text:hover,
.gb-element-autopost-internal-links a.gb-text:focus,
.gb-element-autopost-internal-links .gb-text[href]:hover,
.gb-element-autopost-internal-links .gb-text[href]:focus {
  transform: translateY(-2px);
  border-color: #a9bfd9;
  color: #0f2c4e;
  box-shadow: 0 14px 28px rgba(21, 49, 79, 0.1);
  text-decoration: none;
}

.gb-element-autopost-internal-links a.gb-text::after,
.gb-element-autopost-internal-links .gb-text[href]::after {
  content: "See more";
  display: block;
  margin-top: 8px;
  color: #5b7697;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media (max-width: 768px) {
  .gb-element-autopost-internal-links {
    margin: 40px 0 20px;
    padding: 20px 16px;
    border-radius: 14px;
  }

  .gb-element-autopost-internal-links .gb-text-autopost-internal-links-h2 {
    font-size: 15px;
    margin-bottom: 14px;
  }

  .gb-element-autopost-internal-links a.gb-text,
  .gb-element-autopost-internal-links .gb-text[href] {
    padding: 14px 15px;
    font-size: 15px;
    border-radius: 12px;
  }
}

/* ── 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; }
}