/* ============================================================
 * K-MUDANG Blog FX styles
 * Light theme, additive (no existing rules overridden).
 * ============================================================ */

/* ---------- 1. Reading progress bar ---------- */
#blog-fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, #B8902A, #c8382e);
  z-index: 9998;
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
  pointer-events: none;
}

/* (TOC styles removed per user feedback) */

/* ---------- 3. Day-master card accent (index) ---------- */
.blog-fx-card-accent {
  position: relative;
  border-left: 3px solid var(--blog-fx-accent, transparent) !important;
}

.blog-fx-el-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'KMudang Brush', 'Ma Shan Zheng', 'Noto Serif KR', serif;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 3;
  letter-spacing: 0;
  pointer-events: none;
  opacity: 0.92;
}

/* Post hero subtle tint */
.post-hero.blog-fx-hero-tint::before,
.hero-section.blog-fx-hero-tint::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--blog-fx-day-color, transparent) 0%, transparent 50%);
  opacity: 0.08;
  pointer-events: none;
  border-radius: inherit;
}

.post-hero.blog-fx-hero-tint,
.hero-section.blog-fx-hero-tint {
  position: relative;
}

/* ---------- 4. Today's Resonant Celebrity Spotlight ---------- */
#blog-fx-spotlight {
  margin: 24px auto 36px;
  max-width: 380px;
  padding: 0 16px;
}

.blog-fx-spot-link {
  display: block;
  background: rgba(245, 240, 232, 0.9);
  border: 1.5px solid var(--blog-fx-spot-color, rgba(184, 144, 42, 0.4));
  border-radius: 16px;
  text-decoration: none !important;
  color: inherit;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 4px 18px rgba(58, 45, 30, 0.08);
}

.blog-fx-spot-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(58, 45, 30, 0.14);
}

/* Eyebrow strip on top */
.blog-fx-spot-eyebrow {
  flex-wrap: wrap;
  row-gap: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(90deg,
    transparent,
    rgba(184, 144, 42, 0.06),
    transparent);
  font-size: 17px;
  letter-spacing: 1px;
  color: var(--blog-fx-spot-color, #B8902A);
  /* 제목·간지와 같은 서체. 브러시는 굵기 400 하나뿐이라 합성 굵게를 막는다. */
  font-family: 'KMudang Brush', 'Noto Serif KR', serif;
  font-weight: 400;
  font-synthesis: none;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(184, 144, 42, 0.15);
}

.blog-fx-spot-eyebrow-icon {
  font-size: 13px;
}

.blog-fx-spot-eyebrow-divider {
  opacity: 0.4;
  margin: 0 2px;
}

.blog-fx-spot-day {
  /* 카드의 나머지(제목·간지·CTA)와 같은 브러시. 'Ma Shan Zheng' 만 두면
     한글이 폴백으로 떨어져 「임술」과 「(壬戌)」이 서로 다른 서체로 나온다. */
  font-family: 'KMudang Brush', 'Ma Shan Zheng', 'Noto Serif KR', serif;
  font-weight: 400;
  font-synthesis: none;
  white-space: nowrap;
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--blog-fx-spot-color, #B8902A);
}

/* Image — full width, 3:4 aspect */
.blog-fx-spot-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #ddd;
  overflow: hidden;
}

.blog-fx-spot-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.blog-fx-spot-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.blog-fx-spot-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'KMudang Brush', 'Ma Shan Zheng', serif;
  font-synthesis: none;
  color: #fff;
  font-size: 22px;
  font-weight: 900;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35);
  z-index: 2;
}

/* Body */
.blog-fx-spot-body {
  padding: 16px 18px 18px;
  text-align: center;
}

.blog-fx-spot-title {
  font-size: 1.5rem;
  /* KMudang Brush 는 굵기가 400 하나뿐이라 700 을 부르면 브라우저가 획을 합성해 번진다.
     포스트 제목(.post-title)과 같은 규약으로 400 + font-synthesis:none. */
  font-weight: 400;
  font-synthesis: none;
  margin: 0 0 6px;
  color: #2C2C2C;
  line-height: 1.32;
  letter-spacing: .01em;
  font-family: 'KMudang Brush', 'Noto Serif KR', serif;
}

/* 🚨 font-family 를 반드시 명시할 것. 선언이 없으면 style.css 의 `:lang(en) *`/`:lang(ja) *`
   시스템 스택이 이 span 에 **직접** 걸려 부모 상속을 이긴다(CLAUDE.md §6.10 면제 규칙).
   blog-fx.css 가 style.css 보다 뒤라서, 같은 특정도면 여기 선언이 이긴다. */
.blog-fx-spot-pillar .blog-fx-spot-gz {
  font-family: 'KMudang Brush', 'Ma Shan Zheng', 'Noto Serif KR', serif;
  font-weight: 400;
  font-synthesis: none;
  white-space: nowrap;
}

/* 간지 앞의 작은 라벨(일진/일주). 간지가 둘인데 표시가 없어 읽는 사람이
   어느 쪽이 오늘 것인지 못 가르던 것을 푼다(2026-08-16 운영자 지적).
   🚨 새 span 에는 font-family 를 반드시 선언한다 — 없으면 style.css 의
   `:lang(en) *`/`:lang(ja) *` 시스템 스택이 이 span 에 **직접** 걸려 상속을 이긴다
   (ko 만 멀쩡해 보여 못 알아챈다). letter-spacing 은 0 으로 되돌린다. */
.blog-fx-spot-gzlabel {
  font-family: 'KMudang Brush', 'Noto Serif KR', serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: 0.72em;
  letter-spacing: 0;
  opacity: 0.62;
  /* 같은 줄의 간지↔소제목이 9.9px 인데 라벨만 4px 라 「일주임오」로 붙어 읽혔다(실측).
     em 이라 글자 크기를 조정해도 비율이 따라간다. */
  margin-right: 0.45em;
  white-space: nowrap;
  /* 🚨 베이스라인 정렬이면 작은 라벨이 큰 간지의 **아래로 쏠려** 보인다
     (2026-08-16 실측 — 글리프 아래는 0.7px 차인데 가운데는 2px 어긋났다).
     발을 맞추는 대신 광학적 가운데를 맞춘다. em 단위라 크기가 바뀌어도 따라간다. */
  vertical-align: 0.14em;
}

.blog-fx-spot-pillar {
  /* 배지(.blog-fx-spot-badge)가 이미 브러시라 간지도 같은 서체로 맞춘다 */
  font-family: 'KMudang Brush', 'Ma Shan Zheng', 'Noto Serif KR', serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: 19px;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

/* 소제목·멘트도 카드의 나머지(제목·간지·CTA)와 같은 브러시로 맞춘다.
   기울임은 쓰지 않는다 — 브러시는 정체 하나뿐이라 브라우저가 획을 눕혀 번진다. */
.blog-fx-spot-pillar .blog-fx-spot-sub {
  font-family: 'KMudang Brush', 'Noto Serif KR', serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: 0.98rem;
  color: #7a7265;
  letter-spacing: 0;
  margin-left: 2px;
}

.blog-fx-spot-sub {
  font-family: 'KMudang Brush', 'Noto Serif KR', serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: 1.02rem;
  margin: 0 0 10px;
  color: #7a7265;
}

.blog-fx-spot-reason {
  font-family: 'KMudang Brush', 'Noto Serif KR', serif;
  font-weight: 400;
  font-synthesis: none;
  font-size: 0.98rem;
  color: #5a5247;
  line-height: 1.6;
  margin: 8px 0 12px;
  letter-spacing: 0.2px;
}

.blog-fx-spot-cta {
  display: inline-block;
  font-size: 1.02rem;
  color: #fff;
  background: var(--blog-fx-spot-color, #B8902A);
  letter-spacing: 0.5px;
  /* 제목·간지와 같은 서체. 브러시는 굵기 400 하나뿐이라 합성 굵게를 막는다. */
  font-family: 'KMudang Brush', 'Noto Serif KR', serif;
  font-weight: 400;
  font-synthesis: none;
  padding: 8px 18px;
  border-radius: 22px;
  margin-top: 4px;
  transition: transform 0.18s;
}

.blog-fx-spot-link:hover .blog-fx-spot-cta {
  transform: scale(1.04);
}

/* Mobile: same vertical card, slightly tighter */
@media (max-width: 480px) {
  #blog-fx-spotlight {
    padding: 0 12px;
  }
  .blog-fx-spot-eyebrow {
    padding: 8px 12px;
    font-size: 15.5px;
    letter-spacing: 0.8px;
  }
  .blog-fx-spot-day {
    font-size: 13px;
    letter-spacing: 1.5px;
  }
  .blog-fx-spot-badge {
    width: 32px;
    height: 32px;
    font-size: 18px;
    top: 10px;
    right: 10px;
  }
  .blog-fx-spot-body {
    padding: 14px 14px 16px;
  }
  .blog-fx-spot-title {
    font-size: 1.22rem;
  }
  .blog-fx-spot-pillar {
    font-size: 16px;
  }
  .blog-fx-spot-sub {
    font-size: 0.96rem;
  }
  .blog-fx-spot-reason {
    font-size: 0.94rem;
  }
}

/* ---------- 5. Bujeok modal: CTA ---------- */
.blog-fx-bujeok-cta {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #B8902A, #c8a84b);
  color: #fff !important;
  text-decoration: none !important;
  padding: 12px 24px;
  border-radius: 26px;
  font-family: 'Noto Serif KR', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 16px rgba(184, 144, 42, 0.5);
  transition: all 0.22s;
  z-index: 11;
  white-space: nowrap;
}

.blog-fx-bujeok-cta:hover {
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 6px 20px rgba(184, 144, 42, 0.7);
}

@media (max-width: 480px) {
  .blog-fx-bujeok-cta {
    bottom: 16px;
    padding: 10px 18px;
    font-size: 0.85rem;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #blog-fx-progress,
  .blog-fx-spot-link,
  .blog-fx-bujeok-cta {
    transition: none !important;
    animation: none !important;
  }
}


/* ── 오늘의 셀럽 카드 글자 크기 (spot-size-bump · 2026-08-16 운영자 지시) ──
   KO·EN 은 카드의 모든 글자를 한 단계 크게. JA 는 **셀럽 이름만** 한 단계 —
   일본어는 전각이라 다 키우면 카드가 넘친다(가나·한자는 라틴보다 폭이 크다).
   🚨 #blog-fx-spotlight 로 id 특정도를 얹었다. 아래 미디어쿼리 블록을 같이 두지 않으면
      모바일이 데스크톱 크기를 물려받아 카드가 터진다. */
html:lang(ko) #blog-fx-spotlight .blog-fx-spot-eyebrow,
html:lang(en) #blog-fx-spotlight .blog-fx-spot-eyebrow { font-size: 19px; }
html:lang(ko) #blog-fx-spotlight .blog-fx-spot-eyebrow-icon,
html:lang(en) #blog-fx-spotlight .blog-fx-spot-eyebrow-icon { font-size: 15px; }
html:lang(ko) #blog-fx-spotlight .blog-fx-spot-day,
html:lang(en) #blog-fx-spotlight .blog-fx-spot-day { font-size: 18px; }
html:lang(ko) #blog-fx-spotlight .blog-fx-spot-badge,
html:lang(en) #blog-fx-spotlight .blog-fx-spot-badge { font-size: 24px; }
html:lang(ko) #blog-fx-spotlight .blog-fx-spot-pillar,
html:lang(en) #blog-fx-spotlight .blog-fx-spot-pillar { font-size: 21px; }
html:lang(ko) #blog-fx-spotlight .blog-fx-spot-pillar .blog-fx-spot-sub,
html:lang(en) #blog-fx-spotlight .blog-fx-spot-pillar .blog-fx-spot-sub { font-size: 1.06rem; }
html:lang(ko) #blog-fx-spotlight .blog-fx-spot-sub,
html:lang(en) #blog-fx-spotlight .blog-fx-spot-sub { font-size: 1.10rem; }
html:lang(ko) #blog-fx-spotlight .blog-fx-spot-reason,
html:lang(en) #blog-fx-spotlight .blog-fx-spot-reason { font-size: 1.06rem; }
html:lang(ko) #blog-fx-spotlight .blog-fx-spot-cta,
html:lang(en) #blog-fx-spotlight .blog-fx-spot-cta { font-size: 1.10rem; }

/* 셀럽 이름 — 세 언어 모두 한 단계 */
#blog-fx-spotlight .blog-fx-spot-title { font-size: 1.68rem; }

@media (max-width: 480px) {
  html:lang(ko) #blog-fx-spotlight .blog-fx-spot-eyebrow,
  html:lang(en) #blog-fx-spotlight .blog-fx-spot-eyebrow { font-size: 17px; }
  html:lang(ko) #blog-fx-spotlight .blog-fx-spot-eyebrow-icon,
  html:lang(en) #blog-fx-spotlight .blog-fx-spot-eyebrow-icon { font-size: 14px; }
  html:lang(ko) #blog-fx-spotlight .blog-fx-spot-day,
  html:lang(en) #blog-fx-spotlight .blog-fx-spot-day { font-size: 14.5px; }
  html:lang(ko) #blog-fx-spotlight .blog-fx-spot-badge,
  html:lang(en) #blog-fx-spotlight .blog-fx-spot-badge { font-size: 20px; }
  html:lang(ko) #blog-fx-spotlight .blog-fx-spot-pillar,
  html:lang(en) #blog-fx-spotlight .blog-fx-spot-pillar { font-size: 18px; }
  html:lang(ko) #blog-fx-spotlight .blog-fx-spot-sub,
  html:lang(en) #blog-fx-spotlight .blog-fx-spot-sub { font-size: 1.04rem; }
  html:lang(ko) #blog-fx-spotlight .blog-fx-spot-reason,
  html:lang(en) #blog-fx-spotlight .blog-fx-spot-reason { font-size: 1.02rem; }

  #blog-fx-spotlight .blog-fx-spot-title { font-size: 1.36rem; }
}