.blog-wrapper{max-width:1140px;margin:0 auto;padding:0 24px}.blog-hero{padding:48px 0 32px;text-align:center}.blog-hero__badge{display:inline-block;padding:6px 16px;font-size:13px;font-weight:600;color:var(--wz-purple,#9e63cf);background:rgba(158,99,207,.1);border-radius:20px;margin-bottom:16px;letter-spacing:.02em}.blog-hero__title{font-family:var(--font-display, 'Nunito', sans-serif);font-size:clamp(28px, 5vw, 42px);font-weight:800;color:var(--wz-text-primary,#2d2a3e);line-height:1.3;margin-bottom:12px}.blog-hero__subtitle{font-size:17px;line-height:1.6;color:var(--wz-text-secondary,#6b6880);max-width:520px;margin:0 auto}.blog-divider{height:1px;background:rgba(0,0,0,.08);margin:8px 0}.blog-section{padding:32px 0}.blog-section__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.blog-section__title{font-family:var(--font-display, 'Nunito', sans-serif);font-size:22px;font-weight:800;color:var(--wz-text-primary,#2d2a3e);position:relative}.blog-section__title::after{content:'.';color:var(--wz-purple,#9e63cf)}.blog-section__more{font-size:13px;font-weight:700;color:var(--wz-purple,#9e63cf);text-decoration:none;text-transform:uppercase;letter-spacing:.05em;transition:opacity .15s}.blog-section__more:hover{opacity:.7}.blog-featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.blog-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform var(--transition-fast, .15s ease)}.blog-card:hover{transform:translateY(-4px)}.blog-card:hover .blog-card__image img{transform:scale(1.03)}.blog-card__image{position:relative;border-radius:var(--radius-lg,16px);overflow:hidden;aspect-ratio:3/2;margin-bottom:16px;background:var(--wz-purple-lightest,#ebd8f3)}.blog-card__image img{width:100%;height:100%;object-fit:cover;transition:transform .3s}.blog-card__category-tag{position:absolute;top:12px;left:12px;padding:4px 12px;font-size:11px;font-weight:700;color:#fff;background:var(--wz-purple,#9e63cf);border-radius:var(--radius-full,9999px);letter-spacing:.03em}.blog-card__category-tag--mint{background:var(--wz-mint,#36c9a1)}.blog-card__category-tag--coral{background:var(--wz-coral,#ff665e)}.blog-card__category-tag--sky{background:var(--wz-sky,#7dcfea);color:var(--wz-text-primary,#2d2a3e)}.blog-card__category-tag--yellow{background:var(--wz-yellow,#ffb830);color:var(--wz-text-primary,#2d2a3e)}.blog-card__meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;color:var(--wz-text-tertiary,#9995a9)}.blog-card__meta-divider{width:1px;height:12px;background:rgba(0,0,0,.12)}.blog-card__title{font-family:var(--font-display, 'Nunito', sans-serif);font-size:18px;font-weight:700;color:var(--wz-text-primary,#2d2a3e);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.blog-card__excerpt{margin-top:8px;font-size:14px;line-height:1.5;color:var(--wz-text-secondary,#6b6880);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.blog-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.blog-section--vertical .blog-list-grid{grid-template-columns:1fr;gap:0}.blog-section--vertical .blog-card{flex-direction:row;gap:20px;padding:20px 0;border-bottom:1px solid rgba(0,0,0,.06)}.blog-section--vertical .blog-card:last-child{border-bottom:none}.blog-section--vertical .blog-card__image{width:200px;min-width:200px;aspect-ratio:3/2;margin-bottom:0;border-radius:var(--radius-md,12px)}.blog-section--vertical .blog-card__content{display:flex;flex-direction:column;justify-content:center;flex:1}.blog-section--vertical .blog-card__title{font-size:16px}.blog-cta-banner{display:flex;align-items:center;justify-content:center;gap:24px;padding:32px 40px;margin:16px 0 40px;background:linear-gradient(135deg,var(--wz-purple,#9e63cf) 0,var(--wz-pink,#ff82d4) 100%);border-radius:var(--radius-xl,24px);color:#fff;text-align:center}.blog-cta-banner__text{font-family:var(--font-display, 'Nunito', sans-serif);font-size:20px;font-weight:700;line-height:1.4}.blog-cta-banner__btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 28px;background:#fff;color:var(--wz-purple,#9e63cf);font-family:var(--font-display, 'Nunito', sans-serif);font-size:15px;font-weight:700;border-radius:var(--btn-radius,14px);text-decoration:none;box-shadow:0 3px 0 rgba(0,0,0,.15);transition:transform .15s;white-space:nowrap}.blog-cta-banner__btn:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(0,0,0,.15)}@media (max-width:900px){.blog-featured-grid{grid-template-columns:repeat(2,1fr)}.blog-featured-grid .blog-card:nth-child(3){display:none}.blog-list-grid{grid-template-columns:repeat(2,1fr)}.blog-section--vertical .blog-card__image{width:160px;min-width:160px}.blog-cta-banner{flex-direction:column;padding:28px 24px;gap:16px}}@media (max-width:640px){.blog-wrapper{padding:0 16px}.blog-hero{padding:32px 0 24px}.blog-hero__title{font-size:28px}.blog-hero__subtitle{font-size:15px}.blog-featured-grid{grid-template-columns:1fr;gap:20px}.blog-featured-grid .blog-card:nth-child(3){display:flex}.blog-card__image{border-radius:var(--radius-md,12px)}.blog-card__title{font-size:16px}.blog-list-grid{grid-template-columns:1fr;gap:16px}.blog-section--vertical .blog-card{flex-direction:column;gap:12px;padding:16px 0}.blog-section--vertical .blog-card__image{width:100%;min-width:unset}.blog-section__title{font-size:19px}.blog-cta-banner__text{font-size:17px}}[dir=rtl] .blog-card__category-tag{left:auto;right:12px}[dir=rtl] .blog-cta-banner,[dir=rtl] .blog-section--vertical .blog-card,[dir=rtl] .blog-section__header{flex-direction:row-reverse}@media (max-width:640px){[dir=rtl] .blog-cta-banner,[dir=rtl] .blog-section--vertical .blog-card{flex-direction:column}}.blog-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px}.blog-filter__btn{padding:8px 20px;background:0 0;color:var(--wz-text-secondary,#6b6880);border:1.5px solid rgba(0,0,0,.12);border-radius:24px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s;font-family:inherit}.blog-filter__btn:hover{border-color:var(--wz-purple,#9e63cf);color:var(--wz-purple,#9e63cf)}.blog-filter__btn--active{background:var(--wz-purple,#9e63cf);color:#fff;border-color:var(--wz-purple,#9e63cf)}.blog-pagination{display:flex;justify-content:center;gap:8px;margin:40px 0}.blog-pagination__btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 12px;background:0 0;color:var(--wz-text-primary,#2d2a3e);border:1.5px solid rgba(0,0,0,.12);border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s;font-family:inherit}.blog-pagination__btn:hover{border-color:var(--wz-purple,#9e63cf);color:var(--wz-purple,#9e63cf)}.blog-pagination__btn--active{background:var(--wz-purple,#9e63cf);color:#fff;border-color:var(--wz-purple,#9e63cf)}.blog-card--hero{grid-column:1/-1;flex-direction:row;gap:32px}.blog-card--hero .blog-card__image{flex:0 0 58%;aspect-ratio:16/9;margin-bottom:0;border-radius:var(--radius-lg,16px)}.blog-card--hero .blog-card__body{display:flex;flex-direction:column;justify-content:center;flex:1}.blog-card--hero .blog-card__title{font-size:24px;-webkit-line-clamp:3}.blog-card--hero .blog-card__excerpt{-webkit-line-clamp:3;font-size:15px}@media (max-width:640px){.blog-card--hero{flex-direction:column;gap:0}.blog-card--hero .blog-card__image{aspect-ratio:3/2;margin-bottom:16px}.blog-card--hero .blog-card__title{font-size:18px}}[dir=rtl] .blog-card--hero{flex-direction:row-reverse}@media (max-width:640px){[dir=rtl] .blog-card--hero{flex-direction:column}}

.blog-search-form {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 24px auto 0;
  padding: 0 16px;
  box-sizing: border-box;
}
.blog-search-form__input {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  box-sizing: border-box;
  padding: 12px 18px;
  padding-inline-end: 52px;
  font-size: 16px;
  border: 2px solid var(--wz-border, #e5e1ec);
  border-radius: 16px;
  outline: none;
  background: var(--wz-surface, #fff);
  color: var(--wz-text-primary, #2d2a3e);
}
.blog-search-form__input:focus {
  border-color: var(--wz-purple, #9e63cf);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wz-purple, #9e63cf) 18%, transparent);
}
.blog-search-form__submit {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--wz-purple-dark, #7e4fa6);
  cursor: pointer;
  touch-action: manipulation;
  transform: translateY(-50%);
}
.blog-search-form__submit:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--wz-purple, #9e63cf) 38%, transparent);
  outline-offset: 2px;
}
.blog-search-form__icon {
  display: block;
  pointer-events: none;
}

/* ===== C2 글끝 추천 카드 (S3 end-of-article recommendation) =====================
   DESIGN_SPEC §4/§3/§6. Reuses .blog-card visual language (format parity — NO
   ad-zone styling). Two EQUAL-WEIGHT cards: identical base, padding, radius and
   min-height so neither dominates (no asymmetric dark pattern). Desktop 2-col →
   mobile 1-col with the "read another" card first.                            */
.blog-end-rec { margin: 16px 0 48px; animation: blog-hero-unit-in .45s var(--ease-out, ease-out) both; }
.blog-end-rec__heading {
  font-family: var(--font-display, 'Nunito', sans-serif);
  font-size: 22px; font-weight: 800; margin: 0 0 20px;
  color: var(--wz-text-primary, #2d2a3e);
}
.blog-end-rec__heading::after { content: '.'; color: var(--wz-purple, #9e63cf); }
.blog-end-rec__grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
  align-items: stretch; /* equal visual weight: both cards fill the row height */
}
/* Each card: a full-card link built on .blog-card, with a bordered surface and
   equal min-height (so neither card is visually heavier). */
.blog-end-rec__card {
  --blog-end-rec-accent: var(--wz-purple, #9e63cf);
  --blog-end-rec-accent-on: #ffffff;
  --blog-end-rec-tint: var(--wz-purple-lightest, #ebd8f3);
  display: flex; flex-direction: column; min-height: 280px;
  border: 0;
  border-radius: var(--radius-xl, 24px);
  overflow: visible; background: transparent; box-shadow: none;
}
/* Category accent scoping (DESIGN_SPEC §2 + §6): both the CTA and the badge use
   --blog-end-rec-accent (one colour per palette, white text). The fills below are
   AA-safe (white-on ≥4.5:1) and fixed-hue, so the ratio is identical in light AND
   dark mode. The shared design tokens were NOT all AA on white — sky-dark #5E9BB0
   =3.78 / mint-dark #2BA181=3.38 / coral-dark #CC524B=4.38 all fail — so these
   are component-scoped accessible values. yellow-darker (#996E1C, 4.60) and
   purple-dark (#7E4FA6, 5.16) already clear AA and are kept.
   Measured white-on: sky 4.63 / mint 5.02 / coral 4.89 / yellow 4.60 / purple 5.16. */
.blog-end-rec--sky    { --blog-end-rec-accent: #1F7E9E;                          --blog-end-rec-accent-on: #fff; --blog-end-rec-tint: var(--wz-sky-lightest, #def3fa); }
.blog-end-rec--mint   { --blog-end-rec-accent: #157E60;                          --blog-end-rec-accent-on: #fff; --blog-end-rec-tint: var(--wz-mint-lightest, #aeeada); }
.blog-end-rec--coral  { --blog-end-rec-accent: #CE3A3A;                          --blog-end-rec-accent-on: #fff; --blog-end-rec-tint: var(--wz-coral-lightest, #ffd2d0); }
.blog-end-rec--yellow { --blog-end-rec-accent: var(--wz-yellow-darker, #996e1c); --blog-end-rec-accent-on: #fff; --blog-end-rec-tint: var(--wz-yellow-lightest, #ffe8ab); }
.blog-end-rec--purple { --blog-end-rec-accent: var(--wz-purple-dark, #7e4fa6);   --blog-end-rec-accent-on: #fff; --blog-end-rec-tint: var(--wz-purple-lightest, #ebd8f3); }
/* Badge: small accessible pill sharing the CTA accent fill + white text (DESIGN_SPEC
   §6). NOT the base full-saturation chip (mint #36C9A1 white=2.09 etc., fails AA). */
.blog-end-rec__badge {
  align-self: flex-start; display: inline-block;
  padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .03em;
  background: var(--blog-end-rec-accent); color: var(--blog-end-rec-accent-on);
}
/* Read-another thumbnail (reuses .blog-card__thumb sizing). */
.blog-end-rec__thumb { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.blog-end-rec__thumb--empty { background: var(--wz-purple-lightest, #ebd8f3); }
/* Service card: character illustration on category tint + radial glow (§4). */
.blog-end-rec__art {
  position: relative; display: flex; align-items: flex-end; justify-content: center;
  aspect-ratio: 16/9; background: var(--blog-end-rec-tint); overflow: visible;
}
.blog-end-rec__art::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 62%,
    color-mix(in srgb, var(--blog-end-rec-accent) 26%, transparent), transparent 62%);
}
.blog-end-rec__char {
  --blog-char-scale: 1;
  position: relative; width: auto; height: 88%; max-height: 132px; margin-top: -8px;
  object-fit: contain; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .18));
  animation: blog-character-float 3.2s ease-in-out infinite;
}
.blog-end-rec__body {
  display: flex; flex-direction: column; gap: 10px; flex: 1 1 auto; padding: 20px;
}
.blog-end-rec__title {
  margin: 0; color: var(--wz-text-primary, #2d2a3e);
  font-family: var(--font-display, 'Nunito', sans-serif);
  font-size: 18px; font-weight: 800; line-height: 1.35;
}            /* no fixed height: wraps freely (i18n §3) */
.blog-end-rec__excerpt {
  margin: 0; color: var(--wz-text-secondary, #6b6880);
  font-size: 14px; line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
/* CTA: soft button, part of the full-card <a> (equal weight, not a louder ask).
   clamp long languages to keep one line (de/fi) per DESIGN_SPEC §3. */
.blog-end-rec__cta {
  margin-top: auto; align-self: flex-start; display: inline-block;
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  box-sizing: border-box; min-height: 44px; line-height: 24px; padding: 10px 20px;
  border-radius: var(--btn-radius, 14px); font-weight: 700; font-size: 15px;
  background: transparent; color: var(--blog-end-rec-accent);
  border: 1.5px solid color-mix(in srgb, var(--blog-end-rec-accent) 42%, transparent);
  box-shadow: none;
  transition: transform var(--transition-fast, .15s ease), box-shadow var(--transition-fast, .15s ease);
}
/* Hover/focus (whole card is the link). */
.blog-end-rec__card:hover { transform: translateY(-4px); box-shadow: none; }
.blog-end-rec__card:hover .blog-end-rec__cta {
  transform: translateY(-2px);
  box-shadow: none;
}
.blog-end-rec__card:active .blog-end-rec__cta {
  transform: translateY(1px);
  box-shadow: none;
}
.blog-end-rec__card:focus-visible { outline: 3px solid var(--blog-end-rec-accent); outline-offset: 3px; }
/* Responsive: 1 column; the read-another card is first in DOM so it stays first. */
@media (max-width:640px){
  .blog-end-rec__grid { grid-template-columns: 1fr; gap: 16px; }
  .blog-end-rec__card { min-height: 0; }
}
/* Reduced motion: no lift. */
@media (prefers-reduced-motion:reduce){
  .blog-end-rec, .blog-end-rec__char { animation: none; }
  .blog-end-rec__card, .blog-end-rec__cta { transition: none; }
  .blog-end-rec__card:hover { transform: none; }
  .blog-end-rec__card:hover .blog-end-rec__cta { transform: none; }
}
/* Dark mode (DESIGN_SPEC §3: variable swap, brand colours kept, tint as overlay).
   CTA + badge accents are AA-safe fills with white text (≥4.5:1) in both schemes. */
@media (prefers-color-scheme: dark){
  .blog-end-rec__card {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
  }
  .blog-end-rec__card:hover { box-shadow: none; }
  .blog-end-rec__art { background: color-mix(in srgb, var(--blog-end-rec-accent) 14%, var(--wz-bg-darker, #1d1a2e)); }
  .blog-end-rec__thumb--empty { background: var(--wz-bg-darker, #1d1a2e); }
  /* On dark, brand mid-tones read brighter; keep accent-on white (≥4.5:1). */
  /* Light-mode accent fills are already AA on white in BOTH schemes (fixed hue),
     so no dark-mode accent override is needed; the failing -dark tokens are dropped. */
}
/* RTL: mirror the character; CTA start-aligns via flex automatically. */
[dir=rtl] .blog-end-rec__char { --blog-char-scale: -1; transform: scaleX(-1); }
[dir=rtl] .blog-end-rec__cta { align-self: flex-end; }

/* ===== Mid-article CTA bar — small restful house ad ==========================
   Lightweight reading break: one character, one short line, one clean link. */
.blog-mid-cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 22px 0 28px;
  padding: 10px 0;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--wz-purple, #9e63cf) 20%, transparent);
  border-inline: 0;
  box-shadow: none;
}
.blog-mid-cta__char {
  width: 58px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, .12));
  animation: blog-character-float 3.4s ease-in-out infinite;
}
.blog-mid-cta__copy { min-width: 0; }
.blog-mid-cta__eyebrow {
  margin: 0 0 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--wz-purple-dark, #7e4fa6);
}
.blog-mid-cta__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
  font-weight: 800;
  color: var(--wz-text-primary, #2d2a3e);
}
.blog-mid-cta__body {
  margin: 3px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--wz-text-secondary, #6b6880);
}
.blog-mid-cta__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 14px;
  border-radius: var(--btn-radius, 14px);
  color: var(--wz-purple-dark, #7e4fa6);
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--wz-purple-dark, #7e4fa6) 38%, transparent);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
}
.blog-mid-cta__link:hover { transform: translateY(-1px); }
.blog-mid-cta__link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--wz-purple, #9e63cf) 38%, transparent);
  outline-offset: 3px;
}
@media (max-width:640px){
  .blog-mid-cta {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px 12px;
  }
  .blog-mid-cta__link {
    grid-column: 2;
    justify-self: start;
    white-space: normal;
    text-align: center;
  }
}
@media (prefers-reduced-motion:reduce){
  .blog-mid-cta__char { animation: none; }
  .blog-mid-cta__link { transition: none; }
  .blog-mid-cta__link:hover { transform: none; }
}
[dir=rtl] .blog-mid-cta__char { transform: scaleX(-1); }

.blog-article__content {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
@media (max-width:640px){
  .blog-article__content {
    padding: 0 18px;
  }
}
/* 언어 전환 새로고침 시 위치 복원 전까지 잠깐 가림(레이아웃은 유지=visibility) →
   "맨 위 노출 후 튐"이 안 보이게. wz-i18n-init.js가 복원 후 클래스 제거,
   미동작 시 layout의 1.2초 failsafe가 자동 해제하므로 화면이 계속 가려지지 않는다. */
html.wz-restoring body { visibility: hidden; }
/* 대문(hero) 카드는 flex 가로 배치. flex 자식에 min-width:0이 없으면 띄어쓰기 없는
   긴 문자열(예: 일본어 제목)이 안 쪼개지고 카드를 화면 밖으로 밀어 가로 오버플로우가
   난다(일본어 메인 깨짐). min-width:0으로 축소 허용 + 필요 시 어디서든 줄바꿈. */
.blog-card--hero .blog-card__body,
.blog-card--hero .blog-card__content { min-width: 0; }
.blog-card__title, .blog-card__excerpt { overflow-wrap: anywhere; }
/* 앱 다운로드 CTA의 QR 이미지 가운데 정렬. QR <img>는 display:block이라
   부모의 text-align:center로는 안 잡혀, 캡션 폭 안에서 왼쪽에 붙는다(캡션 긴 언어일수록 심함).
   margin auto로 중앙 고정. 선택자=qr_code 파일명 → 전 언어·전 글 공통,
   다른 본문 이미지 영향 0(검증: 28장 중 1장만 매칭, RTL 포함 정상). */
.blog-article__content img[src*="qr_code"] { margin-inline: auto; }

/* ===== C1 히어로 유닛 (S3 top-of-article hero) ===============================
   DESIGN_SPEC §4 C1 / §3 / §6. Soft, non-intrusive first-impression unit ABOVE
   the h1. flex row [character 80px | body(badge+headline+sub) | CTA]. Only the
   CTA is interactive (the card is NOT a link). 4 flavors A/B/C/D, light + dark.
   CTA + badge use a verified AA-safe accent (--blog-hero-accent, white text
   ≥4.5:1 in BOTH schemes — same fixed-hue values as C2). Backgrounds are pure
   CSS (gradient/pattern, no image) → zero LCP cost; the character img carries
   fetchpriority="high" but is kept at 80px so the h1 stays the LCP candidate. */
.blog-hero-unit {
  --blog-hero-accent: var(--wz-purple-dark, #7e4fa6);
  --blog-hero-tint: var(--wz-purple-lightest, #ebd8f3);
  --blog-hero-shadow: color-mix(in srgb, var(--blog-hero-accent) 55%, #000);
  display: flex; align-items: center; gap: 16px;
  padding: 14px 18px; margin: 0 0 8px;
  border-radius: var(--radius-xl, 24px);
  border: 0;
  background: transparent; box-shadow: none;
  overflow: visible; /* lets the character overflow above the top edge */
  animation: blog-hero-unit-in .42s var(--ease-out, ease-out) both;
}
/* Flavor backgrounds (DESIGN_SPEC §4 C1): A sky-lightest→white · B purple-lightest
   →pink-lightest · C warm + dot pattern · D mint-lightest→white. All soft tints. */
.blog-hero-unit--a { background: transparent; }
.blog-hero-unit--b { background: transparent; }
.blog-hero-unit--c {
  background-color: transparent;
  background-image: none;
  background-size: 14px 14px;
}
.blog-hero-unit--d { background: transparent; }
/* Character art: 96px, overflows -28px above the unit top (WAGZAK hero-style glow). */
.blog-hero-unit__art {
  position: relative; flex: 0 0 auto; align-self: flex-start;
  margin-top: -28px; line-height: 0;
}
.blog-hero-unit__art::before {
  content: ''; position: absolute; inset: -14px; border-radius: 50%;
  background: radial-gradient(circle at 50% 60%,
    color-mix(in srgb, var(--blog-hero-accent) 30%, transparent), transparent 64%);
  pointer-events: none;
}
.blog-hero-unit__char {
  --blog-char-scale: 1;
  position: relative; width: 96px; height: 96px; object-fit: contain; display: block;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .18));
  animation: blog-character-float 3.4s ease-in-out infinite;
}
.blog-hero-unit__body {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px;
  padding: 6px 10px; border-radius: var(--radius-md, 12px);
}
/* Badge: small AA-safe pill (accent fill + white text), same approach as C2. */
.blog-hero-unit__badge {
  align-self: flex-start; display: inline-block;
  padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .03em; background: var(--blog-hero-accent); color: #fff;
}
/* Headline: up to 2 lines, wraps freely — NO white-space:nowrap (i18n §3). */
.blog-hero-unit__headline {
  margin: 2px 0 0; font-family: var(--font-display, 'Nunito', sans-serif);
  font-size: 17px; font-weight: 700; line-height: 1.35;
  color: var(--wz-text-primary, #2d2a3e); overflow-wrap: anywhere;
}
.blog-hero-unit__sub { margin: 0; font-size: 13px; line-height: 1.4; color: var(--wz-text-secondary, #6b6880); }
/* CTA: the ONLY interactive element. AA-safe accent fill + white text, bounded
   width + ellipsis for long languages (de/fi), tap target ≥44px. */
.blog-hero-unit__cta {
  flex: 0 0 auto; align-self: center; box-sizing: border-box; display: inline-block;
  min-width: 96px; max-width: 200px;
  min-height: 44px; line-height: 44px; padding: 0 20px;
  border-radius: var(--btn-radius, 14px); font-weight: 700; font-size: 14px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-decoration: none; background: transparent; color: var(--blog-hero-accent);
  border: 1.5px solid color-mix(in srgb, var(--blog-hero-accent) 42%, transparent);
  box-shadow: none;
  transition: transform var(--transition-fast, .15s ease), box-shadow var(--transition-fast, .15s ease);
}
.blog-hero-unit__cta:hover { transform: translateY(-2px); box-shadow: none; }
.blog-hero-unit__cta:active { transform: translateY(1px); box-shadow: none; }
.blog-hero-unit__cta:focus-visible { outline: 3px solid var(--blog-hero-accent); outline-offset: 3px; }
@keyframes blog-hero-unit-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes blog-character-float {
  0%, 100% { transform: scaleX(var(--blog-char-scale, 1)) translateY(0); }
  50% { transform: scaleX(var(--blog-char-scale, 1)) translateY(-7px); }
}
/* Mobile (≤640): character float-right, CTA full-width 44px. */
@media (max-width:640px){
  .blog-hero-unit { display: block; padding: 12px 14px 14px; }
  .blog-hero-unit__art { float: right; margin: -14px 0 0 12px; }
  .blog-hero-unit__char { width: 60px; height: 60px; }
  .blog-hero-unit__headline { font-size: 16px; }
  .blog-hero-unit__cta {
    display: block; width: 100%; max-width: none; clear: both;
    min-height: 44px; line-height: 44px; margin-top: 12px;
  }
}
/* Reduced motion: no lift. */
@media (prefers-reduced-motion:reduce){
  .blog-hero-unit, .blog-hero-unit__char { animation: none; }
  .blog-hero-unit__cta { transition: none; }
  .blog-hero-unit__cta:hover { transform: none; }
}
/* Dark mode (DESIGN_SPEC §3: variable swap, brand colours kept, tint as overlay).
   Soft flavor fills become dark surfaces; CTA/badge keep accent + white (≥4.5:1). */
@media (prefers-color-scheme: dark){
  .blog-hero-unit--a { background: linear-gradient(135deg, color-mix(in srgb, var(--wz-sky) 14%, var(--wz-bg-darker, #1d1a2e)), var(--wz-bg-dark, #2d2a3e)); }
  .blog-hero-unit--b { background: linear-gradient(135deg, color-mix(in srgb, var(--wz-purple) 14%, var(--wz-bg-darker, #1d1a2e)), color-mix(in srgb, var(--wz-pink) 12%, var(--wz-bg-darker, #1d1a2e))); }
  .blog-hero-unit--c {
    background-color: var(--wz-bg-dark, #2d2a3e);
    background-image: radial-gradient(rgba(255, 255, 255, .06) 1.5px, transparent 1.5px);
  }
  .blog-hero-unit--d { background: linear-gradient(135deg, color-mix(in srgb, var(--wz-mint) 14%, var(--wz-bg-darker, #1d1a2e)), var(--wz-bg-dark, #2d2a3e)); }
  .blog-hero-unit__headline { color: #f3f1fa; }
  .blog-hero-unit__sub { color: #c4bfd6; }
  .blog-hero-unit { border-color: transparent; }
}
/* RTL: mirror the decorative character; flex handles directional layout. */
[dir=rtl] .blog-hero-unit__char { --blog-char-scale: -1; transform: scaleX(-1); }
@media (max-width:640px){
  [dir=rtl] .blog-hero-unit__art { float: left; margin: -14px 12px 0 0; }
}

/* ===== Blog final CTA stage — unboxed, character-led =========================
   Clean final conversion moment: no filled card/surface, no heavy button block.
   The scene relies on spacing, character art, soft glow and text hierarchy. */
.blog-final-cta {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, 1.05fr);
  gap: clamp(20px, 5vw, 56px);
  align-items: center;
  margin: 28px 0 36px;
  padding: clamp(28px, 6vw, 64px) 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.blog-final-cta::before {
  content: '';
  position: absolute;
  inset: 8% 8% 2% 42%;
  pointer-events: none;
  background: radial-gradient(circle at 58% 54%,
    color-mix(in srgb, var(--wz-purple, #9e63cf) 16%, transparent), transparent 66%);
  filter: blur(18px);
}
.blog-final-cta__copy { position: relative; z-index: 2; max-width: 520px; }
.blog-final-cta__eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wz-purple-dark, #7e4fa6);
}
.blog-final-cta__title {
  margin: 0;
  font-family: var(--font-display, 'Nunito', sans-serif);
  font-size: clamp(28px, 4.8vw, 48px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: 0;
  color: var(--wz-text-primary, #2d2a3e);
  text-wrap: balance;
}
.blog-final-cta__body {
  margin: 14px 0 0;
  font-size: clamp(15px, 2vw, 18px);
  line-height: 1.65;
  color: var(--wz-text-secondary, #6b6880);
  text-wrap: pretty;
}
.blog-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  margin-top: 22px;
}
.blog-final-cta__primary,
.blog-final-cta__store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  box-sizing: border-box;
  border-radius: var(--btn-radius, 14px);
  text-decoration: none;
  font-weight: 800;
  white-space: nowrap;
  background: transparent;
  transition: transform var(--transition-fast, .15s ease), border-color var(--transition-fast, .15s ease);
}
.blog-final-cta__primary {
  padding: 0 20px;
  color: var(--wz-purple-dark, #7e4fa6);
  border: 1.5px solid color-mix(in srgb, var(--wz-purple-dark, #7e4fa6) 40%, transparent);
  background: transparent;
  min-height: 44px;
}
.blog-final-cta__store {
  padding: 0 4px;
  min-width: 0;
  color: var(--wz-text-secondary, #6b6880);
  border: 0;
  border-radius: 0;
  border-bottom: 2px solid color-mix(in srgb, var(--wz-purple, #9e63cf) 28%, transparent);
  background: transparent;
}
.blog-final-cta__primary:hover,
.blog-final-cta__store:hover { transform: translateY(-2px); }
.blog-final-cta__primary:focus-visible,
.blog-final-cta__store:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--wz-purple, #9e63cf) 38%, transparent);
  outline-offset: 3px;
}
.blog-final-cta__trust {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--wz-text-tertiary, #9995a9);
}
.blog-final-cta__qr-row {
  display: flex;
  align-items: center;
  margin-top: 18px;
}
.blog-final-cta__art {
  position: relative;
  z-index: 1;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.blog-final-cta__family {
  position: absolute;
  right: 2%;
  bottom: 0;
  width: min(360px, 62%);
  height: auto;
  opacity: .18;
  filter: saturate(1.05);
}
.blog-final-cta__characters {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(0px, 1.5vw, 12px);
  width: 100%;
}
.blog-final-cta__char {
  width: clamp(104px, 16vw, 180px);
  height: auto;
  object-fit: contain;
  margin-left: calc(var(--char-index, 0) * -12px);
  filter: drop-shadow(0 14px 22px rgba(45, 42, 62, .16));
  animation: blog-final-character-float 4.8s ease-in-out infinite;
  animation-delay: calc(var(--char-index, 0) * -.45s);
}
.blog-final-cta__char:first-child {
  width: clamp(128px, 20vw, 220px);
  z-index: 2;
}
.blog-final-cta__qr {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--wz-text-secondary, #6b6880);
}
.blog-final-cta__qr img {
  width: 74px;
  height: 74px;
  padding: 6px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(45, 42, 62, .12);
}
@keyframes blog-final-character-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(.6deg); }
}
@media (max-width:760px){
  .blog-final-cta {
    grid-template-columns: 1fr;
    gap: 8px;
    margin: 12px 0 28px;
    padding: 24px 0 36px;
  }
  .blog-final-cta__copy { max-width: none; }
  .blog-final-cta__art { order: -1; min-height: 190px; }
  .blog-final-cta__family { width: 82%; left: 50%; right: auto; transform: translateX(-50%); }
  .blog-final-cta__char { width: clamp(82px, 27vw, 132px); }
  .blog-final-cta__char:first-child { width: clamp(104px, 34vw, 160px); }
  .blog-final-cta__actions { align-items: stretch; }
  .blog-final-cta__primary { width: 100%; }
  .blog-final-cta__qr-row { display: none; }
}
@media (prefers-color-scheme: dark){
  .blog-hero-unit--a,
  .blog-hero-unit--b,
  .blog-hero-unit--c,
  .blog-hero-unit--d { background: transparent; }
}
@media (prefers-reduced-motion:reduce){
  .blog-final-cta,
  .blog-final-cta__char { animation: none; }
  .blog-final-cta__primary,
  .blog-final-cta__store { transition: none; }
  .blog-final-cta__primary:hover,
  .blog-final-cta__store:hover { transform: none; }
}
/* ────────────────────────────────────────────────────────────────────────────
   S3 C3 — Character scroll speech bubble (DESIGN_SPEC §4 "C3 캐릭터 스크롤 말풍선").
   Fixed lower-right; appears at ~60% scroll, auto-dismiss 5.5s, tap/outside/Esc.
   Visual-language reuse: rounded card, character drop-shadow, CSS-only tail.
   Component (CharacterBubble.tsx) only toggles .is-visible / .is-leaving.
   ──────────────────────────────────────────────────────────────────────────── */
.blog-bubble {
  position: fixed;
  /* Desktop: aligned to the lower-right of the 680px reading column edge. The
     reading column is centered, so its right edge ≈ calc(50% + 340px); clamp keeps
     the bubble on-screen on narrow desktops. */
  right: max(16px, calc(50% - 340px));
  bottom: 32px;
  z-index: var(--z-fixed, 400);
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 240px;
  padding: 12px 16px;
  background: #ffffff;
  /* radius lg/lg/sm/lg — the bottom-RIGHT corner (sm) is where the tail anchors. */
  border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) var(--radius-sm, 8px) var(--radius-lg, 16px);
  box-shadow: 0 12px 32px rgba(45, 42, 62, .24), 0 2px 8px rgba(45, 42, 62, .12);
  cursor: pointer;
  /* GPU-composited transform/opacity only (60fps). */
  will-change: transform, opacity;
}
/* CSS-only tail triangle (no image), pointing down-right from the sm corner. */
.blog-bubble::after {
  content: '';
  position: absolute;
  right: 18px;
  bottom: -8px;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #ffffff;
  filter: drop-shadow(0 3px 2px rgba(45, 42, 62, .12));
}
.blog-bubble__char {
  flex: 0 0 auto;
  width: 40px; height: 40px; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .18));
}
/* One line, ellipsis, max-width 140px. Text ≥12:1 on white (DESIGN_SPEC §6). */
.blog-bubble__text {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 140px;
  font-family: var(--font-display, 'Nunito', sans-serif);
  font-size: 14px; font-weight: 700; line-height: 1.3;
  color: var(--wz-text-primary, #2d2a3e);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Dismiss: 20px glyph, 44px tap target via ::before (DESIGN_SPEC §4 C3). */
.blog-bubble__dismiss {
  position: relative;
  flex: 0 0 auto;
  width: 20px; height: 20px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: rgba(45, 42, 62, .08);
  border-radius: var(--radius-full, 9999px);
  color: var(--wz-text-secondary, #6b6880);
  font-size: 16px; line-height: 1; cursor: pointer;
  transition: background .15s;
}
.blog-bubble__dismiss::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.blog-bubble__dismiss:hover { background: rgba(45, 42, 62, .16); }
.blog-bubble__dismiss:focus-visible { outline: 3px solid var(--wz-purple, #9e63cf); outline-offset: 2px; }

/* Entry bounce (translateY + scale, ease-bounce 300ms) / exit (opacity + translateY
   150ms). transform/opacity only. ease-bounce = cubic-bezier(.34,1.56,.64,1). */
@keyframes blog-bubble-in {
  from { opacity: 0; transform: translateY(16px) scale(.85); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.blog-bubble.is-visible {
  animation: blog-bubble-in .3s cubic-bezier(.34, 1.56, .64, 1) both;
}
.blog-bubble.is-leaving {
  animation: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .15s ease, transform .15s ease;
  pointer-events: none;
}

/* Mobile: bottom 80px / right 16px (DESIGN_SPEC §4 C3 — never covers body text). */
@media (max-width: 640px) {
  .blog-bubble { right: 16px; bottom: 80px; max-width: calc(100vw - 32px); }
}

/* reduced-motion: opacity-only, no transform; dismiss is effectively instant
   (the JS exit timer still fires, but there is no visible motion). */
@media (prefers-reduced-motion: reduce) {
  @keyframes blog-bubble-in { from { opacity: 0; } to { opacity: 1; } }
  .blog-bubble.is-visible { animation: blog-bubble-in .01s linear both; }
  .blog-bubble.is-leaving { transition: opacity .01s linear; transform: none; }
}

/* Dark: card bg #2F2C44; tail border-color matches; dismiss bg lifted. Text ≥12:1. */
@media (prefers-color-scheme: dark) {
  .blog-bubble { background: #2f2c44; box-shadow: 0 12px 32px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4); }
  .blog-bubble::after { border-top-color: #2f2c44; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4)); }
  .blog-bubble__text { color: #f3f1fa; }
  .blog-bubble__dismiss { background: rgba(255, 255, 255, .12); color: #c4bfd6; }
  .blog-bubble__dismiss:hover { background: rgba(255, 255, 255, .22); }
}

/* RTL: mirror to lower-LEFT; tail on the left; flip the character to face inward. */
[dir=rtl] .blog-bubble {
  right: auto;
  left: max(16px, calc(50% - 340px));
  flex-direction: row-reverse;
  border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) var(--radius-lg, 16px) var(--radius-sm, 8px);
}
[dir=rtl] .blog-bubble::after { right: auto; left: 18px; }
[dir=rtl] .blog-bubble__char { transform: scaleX(-1); }
@media (max-width: 640px) {
  [dir=rtl] .blog-bubble { left: 16px; right: auto; }
}

/* ── C4 inline mini-quiz (DESIGN_SPEC §4 C4 / §6 contrast) ─────────────────────
   Cream card, radius-xl, character overflowing top-left, "퀴즈" badge.
   Answer states use ICON + COLOUR together (never colour alone):
     correct = mint-lightest tint + mint-darker border + ✓ chip
     wrong   = coral-lightest tint + coral-darker border + ✕ chip
     others  = opacity .5
   WCAG AA recomputed (real tokens.css values): dark text #2D2A3E on cream 13.47:1
   / on mint-lightest #AEEADA 10.30:1 / on coral-lightest #FFD2D0 10.17:1. Mark
   chips white-on-darker: ✓ (mint-darker #207961) 5.29:1, ✕ (coral-darker #993D38)
   6.82:1. Verdict text mint-darker/coral-darker on cream 5.13:1 / 6.62:1. All
   ≥ AA 4.5:1; the coloured borders are non-text (≥3:1) reinforcing the ✓/✕ shape. */
.blog-quiz {
  position: relative;
  margin: 32px 0;
  padding: 28px 20px 20px;
  background: var(--wz-bg-cream, #fffbf5);
  border: 1px solid rgba(45, 42, 62, .08);
  border-radius: var(--radius-xl, 24px);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(45, 42, 62, .1));
}
.blog-quiz__art { position: absolute; top: -16px; left: 16px; line-height: 0; }
.blog-quiz__char {
  width: 64px; height: 64px; object-fit: contain;
  filter: drop-shadow(0 4px 8px rgba(45, 42, 62, .18));
}
.blog-quiz__badge {
  display: inline-block; margin: 0 0 0 64px; padding: 4px 12px;
  font-size: 12px; font-weight: 700; letter-spacing: .03em; color: #fff;
  background: var(--wz-purple-dark, #7e4fa6); border-radius: var(--radius-full, 9999px);
}
.blog-quiz__prompt {
  margin: 12px 0 16px; font-family: var(--font-display, 'Nunito', sans-serif);
  font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--wz-text-primary, #2d2a3e);
}
.blog-quiz__options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.blog-quiz__option {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 88px; padding: 12px 8px; background: #fff;
  border: 2px solid rgba(45, 42, 62, .12); border-radius: var(--radius-lg, 16px);
  font-family: inherit; color: var(--wz-text-primary, #2d2a3e); cursor: pointer;
  transition: transform var(--duration-fast, .15s) var(--ease-smooth, ease),
              border-color var(--duration-fast, .15s) ease,
              box-shadow var(--duration-fast, .15s) ease;
}
.blog-quiz__option:hover:not(:disabled) {
  transform: translateY(-2px); border-color: var(--wz-purple, #9e63cf);
  box-shadow: 0 6px 14px rgba(45, 42, 62, .12);
}
.blog-quiz__option:focus-visible { outline: 3px solid var(--wz-purple, #9e63cf); outline-offset: 2px; }
.blog-quiz__option:disabled { cursor: default; }
.blog-quiz__icon { font-size: 28px; line-height: 1; }
.blog-quiz__label {
  font-size: 13px; font-weight: 700; text-align: center;
  word-break: keep-all; overflow-wrap: anywhere;
}
.blog-quiz__option.is-correct {
  background: var(--wz-mint-lightest, #aeeada); border-color: var(--wz-mint-darker, #207961);
}
.blog-quiz__option.is-wrong {
  background: var(--wz-coral-lightest, #ffd2d0); border-color: var(--wz-coral-darker, #993d38);
}
.blog-quiz__option.is-muted { opacity: .5; }
.blog-quiz__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: var(--radius-full, 9999px);
  color: #fff; font-size: 13px; font-weight: 800; line-height: 1;
}
.blog-quiz__mark--correct { background: var(--wz-mint-darker, #207961); }
.blog-quiz__mark--wrong { background: var(--wz-coral-darker, #993d38); }
.blog-quiz__reveal:empty { display: none; }
.blog-quiz__verdict {
  display: flex; align-items: center; gap: 8px; margin: 16px 0 8px;
  font-family: var(--font-display, 'Nunito', sans-serif); font-size: 16px; font-weight: 800;
}
.blog-quiz__verdict.is-correct { color: var(--wz-mint-darker, #207961); }
.blog-quiz__verdict.is-wrong { color: var(--wz-coral-darker, #993d38); }
.blog-quiz__verdict-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: var(--radius-full, 9999px); color: #fff; font-size: 13px;
}
.blog-quiz__verdict.is-correct .blog-quiz__verdict-mark { background: var(--wz-mint-darker, #207961); }
.blog-quiz__verdict.is-wrong .blog-quiz__verdict-mark { background: var(--wz-coral-darker, #993d38); }
.blog-quiz__explanation {
  margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--wz-text-secondary, #6b6880);
}
.blog-quiz__explanation strong { color: var(--wz-text-primary, #2d2a3e); }
.blog-quiz__cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 10px 22px; font-family: var(--font-display, 'Nunito', sans-serif);
  font-size: 14px; font-weight: 700; text-decoration: none; color: #fff;
  background: var(--wz-purple-dark, #7e4fa6); border-radius: var(--btn-radius, 14px);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  transition: transform var(--duration-fast, .15s) ease, box-shadow var(--duration-fast, .15s) ease;
}
.blog-quiz__cta:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(126, 79, 166, .3); }
.blog-quiz__cta:focus-visible { outline: 3px solid var(--wz-purple, #9e63cf); outline-offset: 3px; }
/* Reserved space for the lazy/code-split boundary (avoid CLS while the chunk loads). */
.blog-quiz-placeholder { min-height: 220px; }

@keyframes blog-quiz-celebrate {
  0% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-8px) rotate(-6deg); }
  60% { transform: translateY(0) rotate(4deg); }
  100% { transform: translateY(0) rotate(0); }
}
.blog-quiz__char.is-celebrate {
  animation: blog-quiz-celebrate .6s var(--ease-bounce, cubic-bezier(.34, 1.56, .64, 1)) both;
}

/* DESIGN_SPEC §4: the character reacts on ANSWER, not only when correct. On a
   wrong answer we play a gentle, ENCOURAGING nudge (a soft side-to-side tilt —
   NOT a sad/negative pose; kid-friendly). No dedicated reaction asset exists yet
   → we re-animate the existing portrait. TODO(reaction-variant assets): swap for a
   dedicated gentle-react illustration when one exists. */
@keyframes blog-quiz-react {
  0% { transform: rotate(0); }
  35% { transform: rotate(-4deg); }
  70% { transform: rotate(4deg); }
  100% { transform: rotate(0); }
}
.blog-quiz__char.is-react {
  animation: blog-quiz-react .5s ease-in-out both;
}

/* Responsive: 4-col → 2×2 on ≤480px; tap targets stay ≥44px (min-height 88px). */
@media (max-width: 480px) {
  .blog-quiz__options { grid-template-columns: repeat(2, 1fr); }
}

/* Reduced motion: no character animation, no option/cta lift (WCAG / DESIGN_SPEC §3). */
@media (prefers-reduced-motion: reduce) {
  .blog-quiz__char.is-celebrate,
  .blog-quiz__char.is-react { animation: none; }
  .blog-quiz__option { transition: none; }
  .blog-quiz__option:hover:not(:disabled) { transform: none; }
  .blog-quiz__cta { transition: none; }
  .blog-quiz__cta:hover { transform: none; }
}

/* Dark mode: dark surfaces, brand tints via low-opacity overlays (DESIGN_SPEC §6 dark). */
@media (prefers-color-scheme: dark) {
  .blog-quiz { background: #2f2c44; border-color: rgba(255, 255, 255, .08); }
  .blog-quiz__prompt { color: #f3f1fa; }
  .blog-quiz__option { background: #262338; border-color: rgba(255, 255, 255, .14); color: #f3f1fa; }
  .blog-quiz__option.is-correct {
    background: color-mix(in srgb, var(--wz-mint) 22%, #1d1a2e); border-color: var(--wz-mint, #36c9a1);
  }
  .blog-quiz__option.is-wrong {
    background: color-mix(in srgb, var(--wz-coral) 22%, #1d1a2e); border-color: var(--wz-coral, #ff665e);
  }
  .blog-quiz__mark--correct { background: var(--wz-mint, #36c9a1); color: #1d1a2e; }
  .blog-quiz__mark--wrong { background: var(--wz-coral, #ff665e); color: #1d1a2e; }
  .blog-quiz__verdict.is-correct { color: var(--wz-mint, #36c9a1); }
  .blog-quiz__verdict.is-wrong { color: var(--wz-coral, #ff665e); }
  .blog-quiz__verdict.is-correct .blog-quiz__verdict-mark { background: var(--wz-mint, #36c9a1); color: #1d1a2e; }
  .blog-quiz__verdict.is-wrong .blog-quiz__verdict-mark { background: var(--wz-coral, #ff665e); color: #1d1a2e; }
  .blog-quiz__explanation { color: #c4bfd6; }
  .blog-quiz__explanation strong { color: #f3f1fa; }
}

/* RTL: flip the character overflow side + mirror the portrait (DESIGN_SPEC §3 RTL). */
[dir=rtl] .blog-quiz__art { left: auto; right: 16px; }
[dir=rtl] .blog-quiz__badge { margin: 0 64px 0 0; }
[dir=rtl] .blog-quiz__char { transform: scaleX(-1); }
.blog-quiz--rtl { direction: rtl; }
/* ── C5 character-collection strip + completion modal (DESIGN_SPEC §4 C5 / §5 / §6)
   Strip lives at the END of <article>; the completion modal is a fixed-center
   overlay fired once on first 5/5. Silhouette = CSS filter over the REAL character
   image (NO separate silhouette asset). Slot label colors recomputed for AA below.
   ─────────────────────────────────────────────────────────────────────────── */
.blog-char-strip {
  margin: 40px 0 8px;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: var(--radius-xl, 24px);
  background: var(--wz-cream, #fffbf5);
}
.blog-char-strip__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 16px;
}
.blog-char-strip__heading {
  font-family: var(--wz-font-korean-display, var(--font-display, 'Nunito', sans-serif));
  font-size: 18px; font-weight: 800; color: var(--wz-text-primary, #2d2a3e); margin: 0;
}
.blog-char-strip__progress {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--wz-text-secondary, #6b6880);
}
.blog-char-strip__slots {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;
}
.blog-char-strip__slot {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  min-height: 44px; padding: 6px 2px;
}
.blog-char-strip__char {
  width: 56px; height: 56px; object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .12));
  transition: filter var(--transition-normal, .3s ease), transform var(--transition-fast, .15s ease);
}
/* Silhouette: greyscale + darkened over the REAL image (no separate asset). */
.blog-char-strip__slot.is-locked .blog-char-strip__char { filter: grayscale(1) brightness(.3); }
.blog-char-strip__slot.is-met .blog-char-strip__char { filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .16)); }
/* One-time reveal bounce (only for slots revealed THIS mount). */
@keyframes blog-char-reveal {
  0% { transform: scale(.6); opacity: .2; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.blog-char-strip__slot.is-revealed .blog-char-strip__char {
  animation: blog-char-reveal .5s var(--ease-bounce, cubic-bezier(.34, 1.56, .64, 1)) both;
}
.blog-char-strip__name {
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  text-transform: capitalize; color: var(--wz-text-tertiary, #9995a9);
}
/* Revealed slot label colors — recomputed AA-safe accents (>=4.5:1 on the cream
   #fffbf5 surface @ 14px/700). Full-saturation brand hues fail AA, so darkened
   family values are used. Measured on cream: sky #1B7491 5.15 / mint #157E60 5.14 /
   yellow #8A6212 5.31 / purple #7E4FA6 5.16 / pink #B83A8C 5.29 — all pass. */
.blog-char-strip__slot.is-met.blog-char-strip__slot--sky    .blog-char-strip__name { color: #1B7491; }
.blog-char-strip__slot.is-met.blog-char-strip__slot--mint   .blog-char-strip__name { color: #157E60; }
.blog-char-strip__slot.is-met.blog-char-strip__slot--yellow .blog-char-strip__name { color: #8A6212; }
.blog-char-strip__slot.is-met.blog-char-strip__slot--purple .blog-char-strip__name { color: var(--wz-purple-dark, #7e4fa6); }
.blog-char-strip__slot.is-met.blog-char-strip__slot--pink   .blog-char-strip__name { color: #B83A8C; }

/* Strip responsive: shrink gap <=480px (DESIGN_SPEC §5 — gap shrink). */
@media (max-width: 480px) {
  .blog-char-strip__slots { gap: 6px; }
  .blog-char-strip__char { width: 48px; height: 48px; }
  .blog-char-strip__name { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-char-strip__char { transition: none; }
  .blog-char-strip__slot.is-revealed .blog-char-strip__char { animation: none; }
}
@media (prefers-color-scheme: dark) {
  .blog-char-strip { background: #2f2c44; border-color: rgba(255, 255, 255, .08); }
  .blog-char-strip__heading { color: #f3f1fa; }
  .blog-char-strip__progress { color: #c4bfd6; }
  .blog-char-strip__name { color: #9995a9; }
  /* Dark AA: lighter accents read >=4.5:1 on the #2f2c44 surface. */
  .blog-char-strip__slot.is-met.blog-char-strip__slot--sky    .blog-char-strip__name { color: var(--wz-sky, #7dcfea); }
  .blog-char-strip__slot.is-met.blog-char-strip__slot--mint   .blog-char-strip__name { color: var(--wz-mint, #36c9a1); }
  .blog-char-strip__slot.is-met.blog-char-strip__slot--yellow .blog-char-strip__name { color: var(--wz-yellow, #ffb830); }
  .blog-char-strip__slot.is-met.blog-char-strip__slot--purple .blog-char-strip__name { color: var(--wz-pink, #ff82d4); }
  .blog-char-strip__slot.is-met.blog-char-strip__slot--pink   .blog-char-strip__name { color: var(--wz-pink, #ff82d4); }
}
[dir=rtl] .blog-char-strip__char { transform: scaleX(-1); }

/* ── C5 completion modal ──────────────────────────────────────────────────── */
.blog-chars-modal-overlay {
  position: fixed; inset: 0; z-index: var(--z-modal, 700);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(29, 26, 46, .6);
  animation: blog-chars-overlay-in .2s ease both;
}
@keyframes blog-chars-overlay-in { from { opacity: 0; } to { opacity: 1; } }
.blog-chars-modal {
  position: relative; width: 100%; max-width: 420px;
  padding: 32px 24px 24px; text-align: center;
  background: var(--wz-cream, #fffbf5);
  border-radius: var(--radius-2xl, 32px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, .35);
  overflow: hidden;
  animation: blog-chars-modal-in .4s var(--ease-out-expo, cubic-bezier(.16, 1, .3, 1)) both;
}
@keyframes blog-chars-modal-in {
  from { transform: translateY(16px) scale(.96); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}
.blog-chars-modal__cast {
  display: flex; justify-content: center; gap: 4px; margin-bottom: 16px; flex-wrap: wrap;
}
.blog-chars-modal__char {
  width: 56px; height: 56px; object-fit: contain;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .16));
}
/* Staggered pop for the 5 characters (spring scale .85->1). */
@keyframes blog-chars-pop {
  0% { transform: scale(.5); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
.blog-chars-modal__char { animation: blog-chars-pop .5s var(--ease-bounce, cubic-bezier(.34, 1.56, .64, 1)) both; }
.blog-chars-modal__char--0 { animation-delay: .05s; }
.blog-chars-modal__char--1 { animation-delay: .15s; }
.blog-chars-modal__char--2 { animation-delay: .25s; }
.blog-chars-modal__char--3 { animation-delay: .35s; }
.blog-chars-modal__char--4 { animation-delay: .45s; }
.blog-chars-modal__title {
  font-family: var(--wz-font-korean-display, var(--font-display, 'Nunito', sans-serif));
  font-size: 22px; font-weight: 800; color: var(--wz-text-primary, #2d2a3e); margin: 0 0 8px;
}
.blog-chars-modal__sub {
  font-size: 15px; line-height: 1.5; color: var(--wz-text-secondary, #6b6880); margin: 0 0 24px;
}
.blog-chars-modal__actions { display: flex; flex-direction: column; gap: 10px; }
.blog-chars-modal__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 12px 20px;
  font-family: var(--font-display, 'Nunito', sans-serif);
  font-size: 15px; font-weight: 700; border-radius: var(--btn-radius, 14px);
  text-decoration: none; cursor: pointer; border: 2px solid transparent;
  transition: transform var(--transition-fast, .15s ease), box-shadow var(--transition-fast, .15s ease);
}
/* Both buttons EQUAL weight (DESIGN_SPEC §4 C5 — no dark pattern). The primary is a
   filled AA-safe purple-dark + white; the ghost is an outlined same-accent button —
   same footprint/height, neither visually suppressed. */
.blog-chars-modal__btn--primary {
  background: var(--wz-purple-dark, #7e4fa6); color: #fff; border-color: var(--wz-purple-dark, #7e4fa6);
}
.blog-chars-modal__btn--ghost {
  background: transparent; color: var(--wz-purple-dark, #7e4fa6); border-color: var(--wz-purple-dark, #7e4fa6);
}
.blog-chars-modal__btn:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .16); }
.blog-chars-modal__btn:active { transform: translateY(0); }
.blog-chars-modal__btn:focus-visible { outline: 3px solid var(--wz-purple, #9e63cf); outline-offset: 3px; }
.blog-chars-modal__x {
  position: absolute; top: 10px; right: 10px;
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 24px; line-height: 1; color: var(--wz-text-secondary, #6b6880);
  background: transparent; border: 0; border-radius: 50%; cursor: pointer;
}
.blog-chars-modal__x:hover { background: rgba(45, 42, 62, .1); }
.blog-chars-modal__x:focus-visible { outline: 3px solid var(--wz-purple, #9e63cf); outline-offset: 2px; }

/* Confetti — purely decorative CSS pieces; hidden entirely under reduced motion. */
.blog-chars-modal__confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.blog-chars-modal__confetti-piece {
  position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; opacity: 0;
  animation: blog-chars-confetti 1.6s ease-in forwards;
}
@keyframes blog-chars-confetti {
  0% { transform: translateY(-12px) rotate(0deg); opacity: 1; }
  100% { transform: translateY(420px) rotate(540deg); opacity: 0; }
}
.blog-chars-modal__confetti-piece--0 { left: 8%;  background: var(--wz-sky, #7dcfea);    animation-delay: 0s;   }
.blog-chars-modal__confetti-piece--1 { left: 24%; background: var(--wz-mint, #36c9a1);   animation-delay: .15s; }
.blog-chars-modal__confetti-piece--2 { left: 40%; background: var(--wz-yellow, #ffb830); animation-delay: .3s;  }
.blog-chars-modal__confetti-piece--3 { left: 56%; background: var(--wz-purple, #9e63cf); animation-delay: .1s;  }
.blog-chars-modal__confetti-piece--4 { left: 72%; background: var(--wz-pink, #ff82d4);   animation-delay: .25s; }
.blog-chars-modal__confetti-piece--5 { left: 88%; background: var(--wz-coral, #ff665e);  animation-delay: .05s; }
/* Spread the second six pieces (i%6 repeats indices 0-5) across other columns. */
.blog-chars-modal__confetti-piece:nth-child(7)  { left: 16%; top: -20px; }
.blog-chars-modal__confetti-piece:nth-child(8)  { left: 32%; top: -20px; }
.blog-chars-modal__confetti-piece:nth-child(9)  { left: 48%; top: -20px; }
.blog-chars-modal__confetti-piece:nth-child(10) { left: 64%; top: -20px; }
.blog-chars-modal__confetti-piece:nth-child(11) { left: 80%; top: -20px; }
.blog-chars-modal__confetti-piece:nth-child(12) { left: 92%; top: -20px; }

@media (prefers-reduced-motion: reduce) {
  .blog-chars-modal-overlay { animation: none; }
  .blog-chars-modal { animation: none; }
  .blog-chars-modal__char { animation: none; }
  .blog-chars-modal__btn { transition: none; }
  .blog-chars-modal__btn:hover { transform: none; }
  /* No confetti at all under reduced motion (DESIGN_SPEC §4 C5). */
  .blog-chars-modal__confetti { display: none; }
}
@media (prefers-color-scheme: dark) {
  .blog-chars-modal { background: #2f2c44; box-shadow: 0 24px 64px rgba(0, 0, 0, .6); }
  .blog-chars-modal__title { color: #f3f1fa; }
  .blog-chars-modal__sub { color: #c4bfd6; }
  /* Primary = white on purple-dark (5.91:1) — matches the light-mode approach
     (white-on-#7e4fa6); the prior #1d1a2e-on-#9e63cf was 4.15 (fails AA). */
  .blog-chars-modal__btn--primary { background: var(--wz-purple-dark, #7e4fa6); border-color: var(--wz-purple-dark, #7e4fa6); color: #ffffff; }
  .blog-chars-modal__btn--ghost { color: #e6d9f5; border-color: #e6d9f5; }
  .blog-chars-modal__x { color: #c4bfd6; }
  .blog-chars-modal__x:hover { background: rgba(255, 255, 255, .12); }
}
@media (max-width: 480px) {
  .blog-chars-modal__cast { gap: 2px; }
  .blog-chars-modal__char { width: 48px; height: 48px; }
}
[dir=rtl] .blog-chars-modal__x { right: auto; left: 10px; }
[dir=rtl] .blog-chars-modal__char { transform: scaleX(-1); }

/* Article reactions — quiet feedback rail with tap-safe emoji buttons. */
.blog-reactions {
  margin: 22px 0 18px;
  padding: 18px 0 8px;
  border-top: 1px solid rgba(45, 42, 62, .1);
}
.blog-reactions__copy {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.blog-reactions__heading {
  margin: 0;
  color: var(--wz-text-primary, #2d2a3e);
  font-family: var(--wz-font-korean-display);
  font-size: 18px;
  line-height: 1.3;
}
.blog-reactions__hint {
  margin: 0;
  color: var(--wz-text-tertiary, #9995a9);
  font-size: 13px;
  line-height: 1.35;
  text-align: right;
}
.blog-reactions__rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}
.blog-reactions__button {
  position: relative;
  min-width: 0;
  min-height: 58px;
  padding: 8px 8px 7px;
  border-radius: 18px;
  border: 1px solid rgba(45, 42, 62, .12);
  background: transparent;
  color: var(--wz-text-primary, #2d2a3e);
  cursor: pointer;
  touch-action: manipulation;
  overflow: visible;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}
.blog-reactions__button:hover {
  transform: translateY(-2px);
  border-color: rgba(126, 79, 166, .38);
  background: rgba(158, 99, 207, .045);
}
.blog-reactions__button:active { transform: scale(.97); }
.blog-reactions__button:focus-visible {
  outline: 3px solid var(--wz-purple, #9e63cf);
  outline-offset: 3px;
}
.blog-reactions__button.is-active {
  border-color: var(--wz-purple, #9e63cf);
  background: rgba(158, 99, 207, .08);
}
.blog-reactions__button:disabled {
  cursor: wait;
  opacity: .72;
}
.blog-reactions__emoji {
  display: block;
  font-size: 25px;
  line-height: 1;
}
.blog-reactions__label {
  display: block;
  min-width: 0;
  margin-top: 5px;
  overflow: hidden;
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.blog-reactions__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-top: 4px;
  border-radius: 999px;
  color: var(--wz-text-secondary, #6f6a80);
  font-size: 11px;
  font-weight: 800;
}
.blog-reactions__burst {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.blog-reactions__burst span {
  position: absolute;
  left: 50%;
  top: 18px;
  opacity: 0;
  font-size: 18px;
  line-height: 1;
}
.blog-reactions__button.is-bursting .blog-reactions__burst span:nth-child(1) {
  animation: blog-reaction-burst-a .58s ease-out both;
}
.blog-reactions__button.is-bursting .blog-reactions__burst span:nth-child(2) {
  animation: blog-reaction-burst-b .62s ease-out .04s both;
}
.blog-reactions__button.is-bursting .blog-reactions__burst span:nth-child(3) {
  animation: blog-reaction-burst-c .64s ease-out .08s both;
}
@keyframes blog-reaction-burst-a {
  0% { transform: translate(-50%, 0) scale(.6); opacity: 0; }
  22% { opacity: 1; }
  100% { transform: translate(-34px, -38px) scale(1.2) rotate(-18deg); opacity: 0; }
}
@keyframes blog-reaction-burst-b {
  0% { transform: translate(-50%, 0) scale(.6); opacity: 0; }
  22% { opacity: 1; }
  100% { transform: translate(-50%, -48px) scale(1.25); opacity: 0; }
}
@keyframes blog-reaction-burst-c {
  0% { transform: translate(-50%, 0) scale(.6); opacity: 0; }
  22% { opacity: 1; }
  100% { transform: translate(18px, -36px) scale(1.15) rotate(16deg); opacity: 0; }
}
@media (max-width: 520px) {
  .blog-reactions__copy { display: block; }
  .blog-reactions__hint { margin-top: 5px; text-align: left; }
  .blog-reactions__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .blog-reactions__button {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    min-height: 52px; padding: 9px 10px; border-radius: 15px; text-align: left;
  }
  .blog-reactions__emoji { font-size: 22px; }
  .blog-reactions__label {
    margin-top: 0; padding: 0 6px; overflow: visible;
    font-size: 12px; line-height: 1.25; text-overflow: clip; white-space: normal;
  }
  .blog-reactions__count { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .blog-reactions__button { transition: none; }
  .blog-reactions__button:hover,
  .blog-reactions__button:active { transform: none; }
  .blog-reactions__button.is-bursting .blog-reactions__burst span { animation: none; }
}
@media (prefers-color-scheme: dark) {
  .blog-reactions { border-top-color: rgba(255, 255, 255, .1); }
  .blog-reactions__button {
    border-color: rgba(255, 255, 255, .14);
  }
  .blog-reactions__button:hover,
  .blog-reactions__button.is-active {
    border-color: rgba(230, 217, 245, .7);
    background: rgba(255, 255, 255, .06);
  }
}
[dir=rtl] .blog-reactions__hint { text-align: left; }
@media (max-width: 520px) {
  [dir=rtl] .blog-reactions__hint { text-align: right; }
}

/* Floating detail actions — icon-only, thumb-reachable, safe-area aware. */
.blog-floating-actions {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: var(--z-fixed, 400);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.blog-floating-back,
.blog-floating-share {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  color: var(--wz-text-primary, #2d2a3e);
  background: rgba(255, 255, 255, .88);
  border: 1px solid rgba(45, 42, 62, .1);
  box-shadow: 0 12px 32px rgba(45, 42, 62, .16), 0 2px 8px rgba(45, 42, 62, .08);
  text-decoration: none;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  touch-action: manipulation;
  cursor: pointer;
  transition: transform .16s ease, background-color .16s ease, box-shadow .16s ease;
}
.blog-floating-share {
  appearance: none;
  padding: 0;
}
.blog-floating-actions__status {
  position: absolute;
  right: 60px;
  bottom: 60px;
  max-width: min(220px, calc(100vw - 96px));
  padding: 8px 10px;
  border-radius: 999px;
  color: var(--wz-text-primary, #2d2a3e);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 8px 24px rgba(45, 42, 62, .14);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .16s ease, transform .16s ease;
}
.blog-floating-actions__status:not(:empty) { opacity: 1; transform: translateY(0); }
.blog-floating-back__emoji {
  font-size: 25px;
  line-height: 1;
  transform: translateX(-1px);
}
.blog-floating-share__emoji {
  font-size: 23px;
  line-height: 1;
  transform: translate(1px, -1px);
}
.blog-floating-back:hover,
.blog-floating-share:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .96);
}
.blog-floating-back:active,
.blog-floating-share:active { transform: scale(.96); }
.blog-floating-back:focus-visible,
.blog-floating-share:focus-visible { outline: 3px solid var(--wz-purple, #9e63cf); outline-offset: 3px; }
@media (max-width: 900px) {
  .blog-bubble { bottom: 148px; }
}
[dir=rtl] .blog-floating-actions {
  right: auto;
  left: max(16px, env(safe-area-inset-left));
  align-items: flex-start;
}
[dir=rtl] .blog-floating-actions__status { right: auto; left: 60px; }
[dir=rtl] .blog-floating-back__emoji { transform: scaleX(-1) translateX(-1px); }
[dir=rtl] .blog-floating-share__emoji { transform: scaleX(-1) translate(1px, -1px); }
@media (prefers-reduced-motion: reduce) {
  .blog-floating-back,
  .blog-floating-share,
  .blog-floating-actions__status {
    transition: none;
  }
  .blog-floating-back:hover,
  .blog-floating-share:hover,
  .blog-floating-back:active,
  .blog-floating-share:active {
    transform: none;
  }
}

/* Integrated content sections (Task 4) — maple viewer card after the article. */
.blog-interactive-sections-wrap {
  max-width: 680px;
  margin: 20px auto 24px;
  padding: 0 20px;
}

.blog-interactive-sections-wrap--maple-only {
  padding: 0;
}

.blog-interactive-section {
  border: 1px solid rgba(45, 42, 62, .12);
  border-radius: 8px;
  padding: 20px;
  background: #fff;
}

.blog-interactive-section--maple-viewer {
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
}

.blog-interactive-section__title {
  margin: 0 0 8px;
  font-size: 1.25rem;
  line-height: 1.35;
}

.blog-interactive-section__desc {
  margin: 0 0 16px;
  color: var(--wz-text-secondary, #5f5a70);
}

.blog-interactive-section__items {
  display: grid;
  gap: 10px;
}

.blog-interactive-section__item {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-radius: 8px;
  background: rgba(255, 245, 218, .6);
}

.blog-interactive-section__cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 16px;
  color: var(--wz-text-primary, #2D2A3E);
  font-weight: 700;
}

/* maple_viewer embedded PDF/HTML viewer (Task 4). The inline style sets height
   per-payload; this rule covers width/border/radius without !important. */
.blog-interactive-section .blog-interactive-section__viewer {
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: #fff;
}

.blog-interactive-section--maple-viewer .blog-interactive-section__viewer {
  border-radius: 0;
  background: transparent;
}

.blog-interactive-sections-wrap--maple-only .blog-interactive-section__viewer {
  background: transparent;
}