/* ============================================================
   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-size-2xl:        2.75rem;
  --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-max-width:            780px;
  --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);
  max-width:      var(--ybp-max-width);
  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-2xl);
  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-xl);
  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-hero h1               { font-size: var(--ybp-font-size-xl); }
  .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; }
  .ybp-hero h1               { font-size: var(--ybp-font-size-lg); }
  .ybp section h2            { font-size: var(--ybp-font-size-lg); }
}