/* ============================================================
   MUSTACHE PM BLOG — Design System CSS v7.2
   Generated from: mustache-pm.blog homepage + live testing

   v5.2 Changes (from v5.1):
   - Card styles scoped with :has() per card type:
     • Grid card  = li.wp-block-post:has(> figure.wp-block-post-featured-image)
     • Cover card = li.wp-block-post:has(> .wp-block-cover)
     • Text-only  = li.wp-block-post (no figure, no cover, no columns)
     • Category   = li.wp-block-post:has(> .wp-block-columns)
   - Removed ::before hover line entirely
   - Toned down hover (no scale, just translateY(-4px))
   - Figure height: 200px scoped to grid cards ONLY
   - Single post figure: full height, no clipping
   - Removed aggressive display:grid on .wp-block-query
   - Shimmer & glow pulse scoped to grid cards only
   ============================================================ */

/* ============================================================
   KILL BLUEHOST TEAL — CSS-only override (replaces JS killTealColors body* loop)
   Theme preset --wp--preset--color--contrast = #085a67 (teal).
   Override at :root + high-specificity selectors so no JS scan needed.
   ============================================================ */
:root {
  --wp--preset--color--contrast: #f0f4ff !important;
  --wp--preset--color--contrast-2: #f0f4ff !important;
}
/* Elements using WordPress preset color classes */
.has-contrast-color,
.has-contrast-2-color,
[class*="has-contrast-color"] {
  color: #f0f4ff !important;
}
/* Date elements — muted blue instead of teal */
.wp-block-post-date,
.wp-block-post-date time,
.wp-block-post-date a {
  color: #7b8db0 !important;
}
/* Links outside cards */
a:not(li.wp-block-post a):not(.wp-block-navigation-item__content):not([class*="wp-block-post-terms"]) {
  color: #3399FF !important;
}
/* Card chip links */
li.wp-block-post .nfd-bg-subtle a,
li.wp-block-post .wp-block-post-terms a {
  color: #60c0ff !important;
}
/* Inline style overrides for color(srgb ...) and #085a67 */
[style*="085a67"],
[style*="color(srgb"] {
  color: #f0f4ff !important;
}

/* ============================================================
   THEME FADE-IN OVERRIDE
   Bluehost Blueprint theme adds .nfd-wb-fade-in-bottom to
   .nfd-container elements, which sets opacity:0 and waits for
   the theme's own IntersectionObserver to trigger. This often
   fails or conflicts with our custom animations, leaving entire
   page sections (hero, card stacks, CTAs) permanently invisible.
   Override: force all theme fade-ins to be visible. Our own
   card/section reveal system handles animations properly.
   ============================================================ */
.nfd-wb-fade-in-bottom,
.nfd-wb-fade-in-top,
.nfd-wb-fade-in-left,
.nfd-wb-fade-in-right,
.nfd-wb-fade-in {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ============================================================
   FOUC PREVENTION
   Cards: hide ALL cards until body.mp-content-ready is set.
   JS adds mp-content-ready AFTER all init functions + tag API
   finish, so the user only sees the fully-rendered result.
   Single post glass wrap: hide main + entry-content via CSS
   direct-child selectors. Once JS moves them into .mp-glass-wrap,
   the "> main" selector no longer matches → opacity defaults to 1.
   The wrap itself fades in via animation.
   ============================================================ */

/* FOUC prevention: hide cards until JS finishes sync rendering */
body:not(.mp-content-ready) li.wp-block-post {
  opacity: 0 !important;
}

li.wp-block-post.revealed {
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Single post: hide content BEFORE JS wraps in .mp-glass-wrap.
   Uses > (direct child) so it ONLY matches pre-wrap state.
   After initGlassWrap() moves them inside .mp-glass-wrap,
   this selector stops matching → opacity reverts to default (1). */
body.single .wp-site-blocks > main,
body.single .wp-site-blocks > .entry-content.wp-block-post-content {
  opacity: 0 !important;
}

/* Smooth reveal once glass wrap exists */
body.single .mp-glass-wrap {
  animation: mp-glass-reveal 0.35s ease both !important;
}
@keyframes mp-glass-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   1. DESIGN TOKENS — PURE BLUE PALETTE (NO PURPLE)
   ============================================================ */

:root {
  --mp-bg: #03050f;
  --mp-bg-2: #060a18;
  --mp-bg-3: #080d1e;
  --mp-surface: rgba(255,255,255,0.04);
  --mp-surface-2: rgba(255,255,255,0.07);
  --mp-border: rgba(255,255,255,0.08);
  --mp-border-2: rgba(255,255,255,0.12);
  --mp-text: #f0f4ff;
  --mp-text-2: #a8b4d0;
  --mp-text-3: #5a6a8a;
  --mp-accent: #002FFF;
  --mp-accent-2: #0050FF;
  --mp-accent-3: #0070FF;
  --mp-accent-4: #0080FF;
  --mp-accent-5: #3399FF;
  --mp-accent-dim: rgba(0,80,255,0.1);
  --mp-accent-glow: rgba(0,80,255,0.6);
  --mp-accent-glow-strong: rgba(0,47,255,0.8);
  --mp-radius: 12px;
  --mp-radius-lg: 20px;
  --mp-ease: cubic-bezier(0.22,1,0.36,1);
  --mp-font: 'PretendardVariable','Pretendard',-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',sans-serif;
}

/* ============================================================
   2. RESET & BASE — BLANKET COLOR KILL
   ============================================================ */

/* NUCLEAR: Kill ALL teal/dark-green theme default colors */
body.wp-theme-bluehost-blueprint,
body.wp-theme-bluehost-blueprint *,
body.wp-theme-bluehost-blueprint *::before,
body.wp-theme-bluehost-blueprint *::after {
  color: var(--mp-text) !important;
  border-color: var(--mp-border) !important;
}

/* html gets the opaque dark background — everything else transparent
   so that body::before gradient + canvas particles show through */
html {
  background: var(--mp-bg) !important;
  color: var(--mp-text) !important;
  font-family: var(--mp-font) !important;
  margin: 0;
  padding: 0;
}

body,
body.wp-theme-bluehost-blueprint {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--mp-text) !important;
  font-family: var(--mp-font) !important;
  margin: 0;
  padding: 0;
}

/* wp-site-blocks MUST be transparent so the canvas particles show through */
body.wp-theme-bluehost-blueprint .wp-site-blocks {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--mp-text) !important;
  font-family: var(--mp-font) !important;
  margin: 0;
  padding: 0;
}

/* Kill ALL white/light NFD backgrounds */
body.wp-theme-bluehost-blueprint .nfd-bg-surface,
body.wp-theme-bluehost-blueprint .nfd-theme-white,
body.wp-theme-bluehost-blueprint [class*="nfd-bg-surface"],
body.wp-theme-bluehost-blueprint [class*="nfd-theme-white"],
body.wp-theme-bluehost-blueprint .wp-block-group.alignfull,
body.wp-theme-bluehost-blueprint .has-global-padding,
body.wp-theme-bluehost-blueprint [class*="nfd-bg-"] {
  background: transparent !important;
  background-color: transparent !important;
}

/* Kill ALL NFD text colors (teal, dark-green, faded) */
body.wp-theme-bluehost-blueprint .nfd-text-contrast,
body.wp-theme-bluehost-blueprint [class*="nfd-text-contrast"],
body.wp-theme-bluehost-blueprint .nfd-text-faded,
body.wp-theme-bluehost-blueprint [class*="nfd-text-faded"],
body.wp-theme-bluehost-blueprint [class*="nfd-text-"] {
  color: var(--mp-text) !important;
}

/* Faded text → use our text-3 instead */
body.wp-theme-bluehost-blueprint .nfd-text-faded,
body.wp-theme-bluehost-blueprint [class*="nfd-text-faded"] {
  color: var(--mp-text-3) !important;
}

/* Ensure all text elements use correct font family */
body.wp-theme-bluehost-blueprint div,
body.wp-theme-bluehost-blueprint span,
body.wp-theme-bluehost-blueprint p,
body.wp-theme-bluehost-blueprint a,
body.wp-theme-bluehost-blueprint li,
body.wp-theme-bluehost-blueprint time,
body.wp-theme-bluehost-blueprint h1,
body.wp-theme-bluehost-blueprint h2,
body.wp-theme-bluehost-blueprint h3,
body.wp-theme-bluehost-blueprint h4,
body.wp-theme-bluehost-blueprint h5,
body.wp-theme-bluehost-blueprint h6,
body.wp-theme-bluehost-blueprint label,
body.wp-theme-bluehost-blueprint input,
body.wp-theme-bluehost-blueprint textarea,
body.wp-theme-bluehost-blueprint button,
body.wp-theme-bluehost-blueprint select {
  font-family: var(--mp-font) !important;
}

/* Links */
body.wp-theme-bluehost-blueprint a {
  color: var(--mp-accent-5) !important;
}

body.wp-theme-bluehost-blueprint a:hover {
  color: var(--mp-accent-4) !important;
}

/* Noise overlay for depth */
body.wp-theme-bluehost-blueprint::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* ============================================================
   2b. ANIMATED BACKGROUND — FLOATING BLUE ORBS
   ============================================================ */

/* Canvas element injected by JS */
#mp-bg-canvas {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 1 !important;
  pointer-events: none !important;
  opacity: 0.35 !important;
}

/* Ensure content sits above background canvas */
body.wp-theme-bluehost-blueprint .wp-site-blocks {
  position: relative !important;
  z-index: 2 !important;
}

header.wp-block-template-part {
  z-index: 100 !important;
}

/* Animated gradient background — smooth flowing blue tones (inspired by P1N2O gradient pen)
   Uses background-size: 400% 400% with shifting background-position for fluid motion.
   Pure blue palette only — no purple/teal. */
body.wp-theme-bluehost-blueprint::before {
  content: '' !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  /* Subtle blue gradient — deep blacks with faint blue hints, matching landing page depth */
  background: linear-gradient(
    135deg,
    #000206 0%,
    rgba(0, 47, 255, 0.15) 15%,
    #010307 30%,
    rgba(0, 80, 255, 0.08) 45%,
    #010306 55%,
    rgba(0, 47, 255, 0.12) 70%,
    #000205 85%,
    rgba(0, 80, 255, 0.10) 100%
  ) !important;
  background-size: 400% 400% !important;
  animation: mp-gradient-flow 15s ease infinite !important;
  opacity: 0.5 !important;
}

@keyframes mp-gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  33% {
    background-position: 100% 0%;
  }
  66% {
    background-position: 50% 100%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* ============================================================
   3. TYPOGRAPHY SCALE
   ============================================================ */

/* Global Korean line-break: never split a word mid-syllable */
body.wp-theme-bluehost-blueprint {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
}

/* Single post body content — base line-height for all text
   (WP Gutenberg renders body text as bare nodes / <strong> etc.,
   not always inside <p> tags, so we set it on the container) */
body.single .entry-content {
  line-height: 1.75 !important;
  font-size: 17px !important;
}

/* Single post body content typography */
body.single .entry-content h1,
body.single .entry-content .wp-block-heading:where(h1) {
  font-size: 2.8rem !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  color: var(--mp-text) !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
  letter-spacing: -0.02em !important;
}

body.single .entry-content h2,
body.single .entry-content .wp-block-heading:where(h2) {
  font-size: 2.2rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #e8eeff !important;
  -webkit-text-fill-color: #e8eeff !important;
  margin-top: 1.8em !important;
  margin-bottom: 0.5em !important;
  letter-spacing: -0.01em !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.12),
    0 0 24px rgba(0,80,255,0.20),
    0 0 48px rgba(0,47,255,0.08) !important;
}

body.single .entry-content h3,
body.single .entry-content .wp-block-heading:where(h3) {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  color: #e0e8ff !important;
  -webkit-text-fill-color: #e0e8ff !important;
  margin-top: 1.5em !important;
  margin-bottom: 0.5em !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.10),
    0 0 20px rgba(0,80,255,0.15),
    0 0 40px rgba(0,47,255,0.06) !important;
}

body.single .entry-content h4,
body.single .entry-content .wp-block-heading:where(h4) {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  color: var(--mp-text) !important;
  margin-top: 1.2em !important;
  margin-bottom: 0.4em !important;
}

/* Paragraphs */
body.single .entry-content p {
  font-size: 17px !important;
  line-height: 1.75 !important;
  color: var(--mp-text) !important;

  margin-bottom: 1.2em !important;
}

/* Blockquotes with accent gradient bar */
body.single .entry-content blockquote,
body.single .entry-content .wp-block-quote {
  border-left: 4px solid transparent !important;
  border-image: linear-gradient(180deg, var(--mp-accent-4), var(--mp-accent-5)) 1 !important;
  padding-left: 1.5em !important;
  padding-right: 1.5em !important;
  margin: 2em 0 !important;
  color: var(--mp-text-2) !important;
  font-style: italic !important;
  background: var(--mp-surface) !important;
  padding-top: 1em !important;
  padding-bottom: 1em !important;
}

body.single .entry-content blockquote p,
body.single .entry-content .wp-block-quote p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  line-height: 1.75 !important;
}

/* Code blocks */
body.single .entry-content code,
body.single .entry-content pre {
  background: var(--mp-bg-2) !important;
  color: var(--mp-accent-5) !important;
  font-family: 'Monaco', 'Courier New', monospace !important;
  font-size: 14px !important;
}

body.single .entry-content code {
  padding: 0.2em 0.6em !important;
  border-radius: 4px !important;
  border: 1px solid var(--mp-border-2) !important;
}

body.single .entry-content pre {
  padding: 1.5em !important;
  border-radius: var(--mp-radius) !important;
  overflow-x: auto !important;
  border: 1px solid var(--mp-border-2) !important;
  margin: 1.5em 0 !important;
}

body.single .entry-content pre code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* Lists with blue markers */
body.single .entry-content ul,
body.single .entry-content ol {
  margin: 1.5em 0 !important;
  padding-left: 2em !important;
}

body.single .entry-content li {
  margin-bottom: 0.8em !important;
  color: var(--mp-text) !important;
}

body.single .entry-content ul > li::marker {
  color: var(--mp-accent-5) !important;
}

body.single .entry-content ol > li::marker {
  color: var(--mp-accent-4) !important;
}

/* Links with hover underline */
body.single .entry-content a {
  color: var(--mp-accent-5) !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color 0.3s var(--mp-ease) !important;
}

body.single .entry-content a::after {
  content: '' !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--mp-accent-4), var(--mp-accent-5)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s var(--mp-ease) !important;
}

body.single .entry-content a:hover::after {
  transform: scaleX(1) !important;
}

/* HR with gradient */
body.single .entry-content hr {
  border: none !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, var(--mp-border-2), transparent) !important;
  margin: 2em 0 !important;
}

/* Figcaption */
body.single .entry-content figcaption {
  font-size: 14px !important;
  color: var(--mp-text-3) !important;
  margin-top: 0.8em !important;
  font-style: italic !important;
}

/* Tables — scrollable on mobile when content overflows */
body.single .entry-content figure.wp-block-table,
body.single .entry-content .wp-block-table {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
}

body.single .entry-content table {
  border-collapse: collapse !important;
  width: 100% !important;
  margin: 1.5em 0 !important;
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
}

body.single .entry-content th,
body.single .entry-content td {
  border: 1px solid var(--mp-border-2) !important;
  padding: 0.8em !important;
  text-align: left !important;
}

body.single .entry-content th {
  background: var(--mp-surface-2) !important;
  color: var(--mp-text) !important;
  font-weight: 600 !important;
}

body.single .entry-content td {
  color: var(--mp-text-2) !important;
}

/* ============================================================
   4. LAYOUT & GRID
   ============================================================ */

/* Single post — all content areas centered at same 720px max-width + matching padding */
body.single .entry-content,
body.single main {
  max-width: 720px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* ── Unified frosted glass wrapper for single post ──
   CodePen-adapted: diagonal white band + inset depth shadows + light blur */
.mp-glass-wrap {
  position: relative !important;
  background: linear-gradient(
    -75deg,
    rgba(20,60,200,0.06),
    rgba(40,100,255,0.12),
    rgba(20,60,200,0.06)
  ) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border-radius: var(--mp-radius-lg, 20px) !important;
  max-width: 720px !important;
  width: 100% !important;
  margin: 2rem auto 2rem auto !important;
  padding: 1.5rem 2.5rem 2.5rem 2.5rem !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  z-index: 1 !important;
  /* CodePen box-shadow pattern (dark-adapted):
     inset top dark, inset bottom light, inner glow, outer shadow */
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.12),
    inset 0 -2px 2px rgba(255,255,255,0.06),
    inset 0 0 2px 4px rgba(255,255,255,0.02),
    0 4px 2px -2px rgba(0,0,0,0.25),
    0 8px 20px rgba(0,0,0,0.20) !important;
}

/* Reset children inside glass wrapper — z-index:3 lifts content above
   ::before (conic border, z:2) and ::after (specular highlight, z:2)
   so images and text render above the glass overlay effects. */
.mp-glass-wrap > main,
.mp-glass-wrap > .entry-content.wp-block-post-content {
  position: relative !important;
  z-index: 3 !important;
  background: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: visible !important;
}

/* CodePen conic-gradient border — single post glass wrap
   Uses mask-composite:exclude to render border-only region,
   conic-gradient varies brightness around the perimeter. */
.mp-glass-wrap::before {
  content: '' !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: -1px !important;
  border-radius: inherit !important;
  padding: 1px !important;
  box-sizing: border-box !important;
  background:
    conic-gradient(
      from -75deg at 50% 50%,
      rgba(255,255,255,0.30),
      rgba(255,255,255,0.0) 5% 40%,
      rgba(255,255,255,0.30) 50%,
      rgba(255,255,255,0.0) 60% 95%,
      rgba(255,255,255,0.30)
    ),
    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
}

/* CodePen specular highlight — sweeping white band via mix-blend-mode:screen */
.mp-glass-wrap::after {
  content: '' !important;
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(
    -45deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.06) 40%,
    rgba(255,255,255,0.12) 48%,
    rgba(255,255,255,0.06) 56%,
    rgba(255,255,255,0) 100%
  ) !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
}

/* Override WordPress is-layout-constrained children max-width inside entry-content */
body.single .entry-content > * {
  max-width: 100% !important;
}

/* Single post — category/date flex rows: remove extra padding, align left */
body.single main > .wp-block-group.is-layout-flex:has(.wp-block-post-terms),
body.single main > .wp-block-group.is-layout-flex:has(.wp-block-post-date) {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 1em !important;
}

/* Single post — title, excerpt, featured image: remove extra padding */
body.single main > h1.wp-block-post-title,
body.single main > .wp-block-post-excerpt,
body.single main > figure.wp-block-post-featured-image {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Kill WordPress auto-margins on category/date children */
body.single main > .wp-block-group.is-layout-flex:has(.wp-block-post-terms) > *,
body.single main > .wp-block-group.is-layout-flex:has(.wp-block-post-date) > * {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Single post — category chip style (match card chips) */
body.single .wp-block-post-terms a {
  background: rgba(0, 80, 255, 0.20) !important;
  border: 1px solid rgba(0, 80, 255, 0.50) !important;
  color: #3399FF !important;
  border-radius: 100px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: inline-block !important;
  text-decoration: none !important;
}

body.single .wp-block-post-terms a:hover {
  background: rgba(0, 80, 255, 0.30) !important;
  border-color: rgba(0, 80, 255, 0.70) !important;
}

/* Single post — date styling next to chip */
body.single main > .wp-block-group.is-layout-flex .wp-block-post-date,
body.single main > .wp-block-group.is-layout-flex time {
  font-size: 13px !important;
  color: var(--mp-text-3) !important;
}

/* Featured image — flush with text, no extra padding */
body.single .wp-block-post-featured-image,
body.single figure.wp-block-post-featured-image {
  border: none !important;
}

body.single .wp-block-post-featured-image img {
  width: 100% !important;
  border-radius: var(--mp-radius-lg) !important;
  border: 1px solid var(--mp-border-2) !important;
}

/* Single post — generous breathing room below sticky header */
body.single .wp-site-blocks > main,
body.single main.wp-block-group {
  padding-top: 3.5em !important;
}

/* Single post — don't double-add margin from the general rule */
body.single .wp-site-blocks > main > *:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* ALL pages (except single) — breathing room below sticky header
   Target main's first child, NOT the header itself */
body:not(.single) .wp-site-blocks > main > *:first-child,
body:not(.single) .wp-site-blocks > main > header + * {
  margin-top: 2em !important;
}

/* Category/archive pages — extra top spacing for content below header */
body:not(.single) .wp-site-blocks main,
body:not(.single) .wp-site-blocks > main {
  padding-top: 2.5em !important;
}

/* /post/ main page — tighter spacing within category sections */
.entry-content .nfd-container .has-global-padding.is-layout-constrained {
  --wp--style--block-gap: 0.8em !important;
}

/* Reduce vertical gap in flex groups inside content — match /category's 8px */
.entry-content .nfd-container .wp-block-group.is-vertical {
  gap: 8px !important;
}

/* Category section blocks — reduce margins between siblings */
.entry-content .nfd-container .wp-block-columns {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}

/* Query loops inside sections — tighter */
.entry-content .nfd-container .wp-block-query {
  margin-top: 0.5em !important;
  margin-bottom: 0.5em !important;
}

/* "더 읽기" buttons — less gap above */
.entry-content .nfd-container .wp-block-buttons {
  margin-top: 0.5em !important;
}

/* Spacer blocks — reduce if present */
.entry-content .nfd-container .wp-block-spacer {
  height: 1em !important;
  min-height: 1em !important;
}

/* Section headings — modest bottom spacing */
.entry-content .nfd-container h2.wp-block-heading {
  margin-bottom: 0.3em !important;
}

/* Post cards in query loops — less top margin */
.entry-content .nfd-container li.wp-block-post {
  margin-top: 0.5em !important;
}

/* Hide "Post - All" page title on /post-all page (page-id-77) */
body.page-id-77 > .wp-site-blocks > h1.wp-block-post-title,
body.page-id-77 .wp-site-blocks h1.wp-block-post-title {
  display: none !important;
}

/* ── Unified layout: /post-all and /category ──
   Both pages should show identical spacing and positioning.
   Target values:
     container padding-top: 40px
     chips → title gap: 20px
     title → cards gap: 12px
     chip button gap: 12px
   /post-all uses flex parent (no margin collapse).
   /category uses block parent (margins collapse). */

/* --- Container padding --- */
body.page-id-77 .entry-content > .nfd-container,
body.page-id-27 .entry-content > .nfd-container {
  padding-left: 40px !important;
  padding-right: 40px !important;
  padding-top: 40px !important;  /* was 79px from nfd-p-lg */
}
body.archive:not(.single) main {
  padding-left: 40px !important;
  padding-right: 40px !important;
  padding-top: 40px !important;  /* match /post-all container padding-top */
}
/* /search page — match /category padding for consistency */
body.search main,
body.page-id-590 main {
  padding-left: 40px !important;
  padding-right: 40px !important;
  padding-top: 40px !important;
}

/* --- /post-all + /search: zero flex gap, use margins only (matches block layout behavior) --- */
body.page-id-77 .entry-content .nfd-container > .wp-block-group.is-vertical,
body.page-id-590 .entry-content .nfd-container > .wp-block-group.is-vertical {
  gap: 0px !important;
}

/* --- Filter group: shared styles for all listing pages --- */
body.page-id-77 .wp-block-group.is-vertical:has(.wp-block-buttons),
body.archive .wp-block-group.is-vertical:has(.wp-block-buttons),
body.search .wp-block-group.is-vertical:has(.wp-block-buttons),
body.page-id-590 .wp-block-group.is-vertical:has(.wp-block-buttons) {
  gap: 12px !important;            /* flex children gap (filterWrap/titleRow/query) */
  margin-top: 0 !important;       /* no extra top margin */
  margin-bottom: 20px !important;  /* chips → title gap */
}

/* --- 카테고리 label → chips spacing (block layout, needs margin not gap) --- */
body.page-id-77 .wp-block-group.has-global-padding:has(.wp-block-buttons) > p,
body.page-id-27 .wp-block-group.has-global-padding:has(.wp-block-buttons) > p,
body.archive .wp-block-group.has-global-padding:has(.wp-block-buttons) > p,
body.search .wp-block-group.has-global-padding:has(.wp-block-buttons) > p,
body.page-id-590 .wp-block-group.has-global-padding:has(.wp-block-buttons) > p {
  margin-bottom: 12px !important;
}

/* --- /post (page-id-27): chip gaps — no .is-vertical in DOM, target via space-between row --- */
body.page-id-27 .is-content-justification-space-between .wp-block-buttons {
  gap: 12px !important;
  margin-top: 0 !important;
}

/* --- Search bar: wider input area (desktop only) --- */
@media (min-width: 769px) {
  /* Direct child selector (>) prevents matching ancestor wrappers */
  .wp-block-group.is-layout-constrained:has(> form.wp-block-search) {
    flex: 1 1 auto !important;
    max-width: 380px !important;
  }
  .wp-block-search__input {
    min-width: 200px !important;
  }
}

/* --- /post-all + /search: category filter wrapper → title gap (correct DOM target) --- */
body.page-id-77 .entry-content .nfd-container > .wp-block-group.is-vertical > .wp-block-group.has-global-padding:first-child,
body.page-id-590 .entry-content .nfd-container > .wp-block-group.is-vertical > .wp-block-group.has-global-padding:first-child {
  margin-bottom: 20px !important;
}

/* --- /category: filter section → query block gap --- */
body.archive main > .wp-block-group.has-global-padding:first-child {
  margin-top: 0 !important;      /* kill theme 32px default — match /post-all/ */
  margin-bottom: 20px !important;
}

/* --- Chip button wrapping gaps (horizontal + vertical) --- */
body.page-id-77 .wp-block-group.is-vertical:has(.wp-block-buttons) .wp-block-buttons,
body.archive .wp-block-group.is-vertical:has(.wp-block-buttons) .wp-block-buttons,
body.search .wp-block-group.is-vertical:has(.wp-block-buttons) .wp-block-buttons,
body.page-id-590 .wp-block-group.is-vertical:has(.wp-block-buttons) .wp-block-buttons {
  gap: 12px !important;
  margin-top: 0 !important;
}

/* --- /post-all: title group margin --- */
body.page-id-77 .entry-content .nfd-container > .wp-block-group.is-vertical > .wp-block-group:nth-child(2) {
  margin-top: 0 !important;
  margin-bottom: 12px !important;  /* title → cards gap */
}

/* --- /post-all: heading inside title group — ensure no extra collapse --- */
body.page-id-77 .entry-content .nfd-container > .wp-block-group.is-vertical > .wp-block-group:nth-child(2) h2 {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* --- /post-all: normalize "전체 글" mixed bold (WP editor <strong>) --- */
body.page-id-77 h2.wp-block-heading strong {
  font-weight: inherit !important;
}

/* --- /post-all: query block margin (title → cards gap) --- */
body.page-id-77 .entry-content .nfd-container > .wp-block-group.is-vertical > .wp-block-query {
  margin-top: 12px !important;
}

/* --- /category + /search: query block margin --- */
body.archive .wp-block-query,
body.search .wp-block-query,
body.page-id-590 .wp-block-query {
  margin-top: 0px !important;
}

/* --- /category + /search: title margins (match /post-all/ title→cards gap: 12px) --- */
body.archive h1.wp-block-query-title,
body.search h1.wp-block-query-title,
body.page-id-590 h1.wp-block-query-title,
body.search .wp-block-heading,
body.page-id-590 .wp-block-heading {
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  font-weight: 500 !important;
}

/* --- /category + /search: hide spacer --- */
body.archive .wp-block-query > .wp-block-spacer,
body.search .wp-block-query > .wp-block-spacer,
body.page-id-590 .wp-block-query > .wp-block-spacer {
  display: none !important;
}

/* --- /search: card grid margin --- */
body.search .wp-block-post-template,
body.page-id-590 .wp-block-post-template {
  margin-top: 0px !important;
}

/* --- /category: card grid margin --- */
body.archive .wp-block-post-template {
  margin-top: 0px !important;
}

/* --- /category: term description + spacer spacing (match /post-all title→cards gap) --- */
body.archive .wp-block-term-description {
  margin-top: 8px !important;
  margin-bottom: 12px !important;
  color: var(--mp-text-3, #7b8db0) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
}
body.archive .wp-block-query > .wp-block-spacer {
  display: none !important;
}
body.archive h1.wp-block-query-title {
  margin-bottom: 4px !important;
}

/* Post grid for /post-all — only on post-template with figure-based cards */
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 2em !important;
  padding: 0 !important;
  align-items: stretch !important;
}

/* Remove old inner alignment padding (no longer needed: parent handles 40px) */
.entry-content .nfd-container > .wp-block-group > .wp-block-group {
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Grid cards — equal height via flex column stretch */
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Grid card — push date/last-child to bottom for equal-height alignment */
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post > *:last-child {
  margin-top: auto !important;
}

/* Container width constraints */
body .wp-block-columns {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

body .alignwide {
  max-width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ============================================================
   5. NAVIGATION & HEADER
   ============================================================ */

/* Sticky header — transparent background, nav elements stay visible */
header.wp-block-template-part {
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  transition: box-shadow 0.3s var(--mp-ease) !important;
}

/* Match landing page header height (~70px): 19.2px top/bottom + 32px logo
   ONLY for initial (non-scrolled) state — scroll-compact pill keeps its own padding */
header.wp-block-template-part:not(.scrolled) .nfd-py-sm {
  padding-top: 19px !important;
  padding-bottom: 19px !important;
}
/* Ensure scrolled pill inner row stays compact */
header.wp-block-template-part.scrolled .nfd-py-sm {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* Mobile: Force header row to stay horizontal (theme stacks logo + hamburger vertically) */
@media (max-width: 768px) {
  header.wp-block-template-part .nfd-py-sm,
  header.wp-block-template-part .nfd-py-sm.wp-block-group {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

}

/* Logo size to match homepage */
header.wp-block-template-part .wp-block-site-logo img {
  height: 32px !important;
  width: auto !important;
}

/* Nav links font size/weight to match homepage */
/* Nav links — font matching landing page exactly */
header.wp-block-template-part .wp-block-navigation-item a {
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: normal !important;
}

/* Nav link gap — landing uses 36px between items */
header.wp-block-template-part .wp-block-navigation__container {
  gap: 36px !important;
}

/* Header container horizontal padding — match landing's 37px (initial state only) */
header.wp-block-template-part:not(.scrolled) .nfd-container {
  padding-left: 37px !important;
  padding-right: 37px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
/* Kill any extra WordPress global padding on header inner elements
   NOTE: Do NOT reset .nfd-container itself — it needs the 37px padding.
   Only reset children inside it that have .has-global-padding. */
header.wp-block-template-part:not(.scrolled) .nfd-py-sm.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
header.wp-block-template-part:not(.scrolled) .nfd-container > .has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Mobile: reduce header horizontal padding (37px too wide for narrow screens).
   Must also target .has-global-padding to beat the reset rule above. */
@media (max-width: 768px) {
  header.wp-block-template-part:not(.scrolled) .nfd-container,
  header.wp-block-template-part:not(.scrolled) .nfd-container.has-global-padding {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
}

/* Navigation links — muted color matching landing page */
header.wp-block-template-part .wp-block-navigation-item a,
header.wp-block-template-part .wp-block-navigation__submenu-icon {
  color: var(--mp-text-2) !important;
  text-decoration: none !important;
  position: relative !important;
  transition: color 0.3s var(--mp-ease) !important;
}

/* Logo link stays bright */
header.wp-block-template-part .wp-block-site-logo a,
header.wp-block-template-part .wp-block-site-title a {
  color: var(--mp-text) !important;
}

header.wp-block-template-part .wp-block-navigation-item a:hover {
  color: var(--mp-text) !important;
  text-shadow: 0 0 12px rgba(0, 80, 255, 0.4) !important;
}

/* ── Nav underline indicator ──
   Sliding blue underline that:
   1. Shows under "블로그" on blog pages (via .mp-nav-active class added by JS)
   2. Follows hovered item smoothly
   3. Returns to active item when hover leaves
   Uses a shared ::after on the nav container, positioned via CSS custom properties. */
header.wp-block-template-part .wp-block-navigation__container {
  position: relative !important;
}
/* The sliding underline element — positioned via JS-set CSS vars */
.mp-nav-underline {
  position: absolute !important;
  bottom: -4px !important;
  left: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, var(--mp-accent-4, #0050ff), var(--mp-accent-5, #0080ff)) !important;
  border-radius: 1px !important;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              width 0.3s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease !important;
  pointer-events: none !important;
  opacity: 0;
  width: 0;
}
.mp-nav-underline.mp-visible {
  opacity: 1;
}

/* Logo/branding */
header.wp-block-template-part .wp-block-site-title {
  color: var(--mp-text) !important;
}

header.wp-block-template-part .wp-block-site-tagline {
  color: var(--mp-text-3) !important;
}

/* Mobile menu background — ensure dark bg for open state */
nav.wp-block-navigation {
  background: transparent !important;
}

/* ---- MOBILE NAV OVERLAY ----
   WordPress structure:
   .wp-block-navigation__responsive-container.is-menu-open
     └─ .wp-block-navigation__responsive-dialog
         ├─ button.wp-block-navigation__responsive-container-close
         └─ .wp-block-navigation__responsive-container-content
             └─ ul.wp-block-navigation__container
                 ├─ li.wp-block-navigation-item > a (홈)
                 ├─ li.wp-block-navigation-item > a (블로그)
                 └─ li.wp-block-navigation-item > a (소개)
*/

/* CRITICAL: When mobile menu is open, remove backdrop-filter from header.
   backdrop-filter creates a new containing block, trapping position:fixed children
   inside the header's 52px height instead of viewport. */
header.wp-block-template-part:has(.wp-block-navigation__responsive-container.is-menu-open) {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
  z-index: 99999 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
}

/* Container: fixed full-screen overlay */
.wp-block-navigation__responsive-container.is-menu-open {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  background: var(--mp-bg) !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  overflow-y: auto !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  clip-path: none !important;
}

/* Responsive-close wrapper (between container and dialog) — must fill parent */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: var(--mp-bg) !important;
  z-index: 99999 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Dialog wrapper inside container */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  background: var(--mp-bg) !important;
  width: 100% !important;
  height: 100vh !important;
  min-height: 100vh !important;
  max-height: none !important;
  padding: 24px !important;
  padding-top: 80px !important;
  box-sizing: border-box !important;
  position: relative !important;
}

/* Content wrapper */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  background: transparent !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
}

/* Nav list */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open ul {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 100% !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* Nav items */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100% !important;
  display: block !important;
  text-align: left !important;
  border: none !important;
  outline: none !important;
}

/* Nav links */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
.wp-block-navigation__responsive-container.is-menu-open a:not(button) {
  color: var(--mp-text) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  padding: 18px 0 !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  text-decoration: none !important;
  outline: none !important;
  background: transparent !important;
}

.wp-block-navigation__responsive-container.is-menu-open a:hover {
  color: var(--mp-accent-5) !important;
}

/* Close button — top-right */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: var(--mp-text) !important;
  position: absolute !important;
  top: 18px !important;
  right: 24px !important;
  z-index: 10000 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  cursor: pointer !important;
  padding: 8px !important;
}

/* Hamburger button */
.wp-block-navigation__responsive-container-open {
  color: var(--mp-text) !important;
}

/* Kill ALL blue outlines/borders on nav elements in open menu */
.wp-block-navigation__responsive-container.is-menu-open *:focus,
.wp-block-navigation__responsive-container.is-menu-open *:active,
.wp-block-navigation__responsive-container.is-menu-open *:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Hide desktop nav underline in mobile overlay menu — position calc is wrong in vertical layout */
.wp-block-navigation__responsive-container.is-menu-open .mp-nav-underline {
  display: none !important;
}
@media (max-width: 768px) {
  .mp-nav-underline {
    display: none !important;
  }
}

/* ============================================================
   6. CARD STYLES — SCOPED PER CARD TYPE

   Card types:
   A) Grid card    = li.wp-block-post:has(> figure.wp-block-post-featured-image)
   B) Cover card   = li.wp-block-post:has(> .wp-block-cover)
   C) Text-only    = li.wp-block-post (no figure, no cover, no columns)
   D) Category     = li.wp-block-post:has(> .wp-block-columns)
   ============================================================ */

/* Page titles — frosted-glass style for visibility */
h1.wp-block-post-title {
  color: #e8eeff !important;
  -webkit-text-fill-color: #e8eeff !important;
  font-weight: 900 !important;
  font-size: 2.8rem !important;
  margin-bottom: 1em !important;
  text-shadow:
    0 1px 0 rgba(255,255,255,0.15),
    0 0 30px rgba(0,80,255,0.25),
    0 0 60px rgba(0,47,255,0.10) !important;
}

/* Category archive title — match "전체 포스트" heading style */
h1.wp-block-query-title {
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: unset !important;
  background-clip: unset !important;
  color: var(--mp-text-1) !important;
  font-weight: 700 !important;
  font-size: 36px !important;
  margin-bottom: 0.5em !important;
}

/* Blog page heading (rendered by theme, not query-title) — spacing below */
.wp-block-query > h2,
.wp-block-group > h2:first-child,
.wp-site-blocks h1:not(.wp-block-query-title):not(.wp-block-post-title) {
  margin-bottom: 0.8em !important;
}

/* ── Hide "블로그" title area on /post page ──
   The blog page nav underline now indicates we're on the blog.
   JS adds .mp-hide-blog-title to body on /post page. */
body.mp-hide-blog-title .entry-content .is-vertical.is-content-justification-center {
  display: none !important;
}

/* ── Reduce header-to-hero gap on /post page ── */
body.mp-hide-blog-title .entry-content > .nfd-container:first-child {
  padding-top: 20px !important;
}

/* ── Card Stack Layout on /post page ──
   21st.dev CardSticky pattern with 2-column layout:
   LEFT: category title + desc (sticky)
   RIGHT: card stack (sticky-stacking cards)

   JS restructures DOM: creates .mp-section-row > .mp-section-cards + .mp-section-title
   Desktop: title LEFT, cards RIGHT
   Mobile: title on top (sticky), cards below — solid bg prevents card clipping
   CSS here handles visual styling only. */

/* ── Section row ── */
.mp-section-row {
  width: 100% !important;
}

/* ── Title column ── */
.mp-section-title {
  display: flex !important;
  flex-direction: column !important;
  gap: 1rem !important;
}

.mp-section-title h2 {
  font-size: 1.8rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.mp-section-title p {
  font-size: 0.95rem !important;
  opacity: 0.6 !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ── Card stack container ── */
body.mp-hide-blog-title .wp-block-post-template.mp-card-stack {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  list-style: none !important;
  padding: 0 !important;
}

/* Cards inside stack — shadow for depth
   position/top/z-index set as inline styles by JS. */
body.mp-hide-blog-title .wp-block-post-template.mp-card-stack > li.wp-block-post,
body.mp-hide-blog-title .wp-block-post-template.mp-card-stack > li.wp-block-post.mp-flip-enabled {
  width: 100% !important;
  transition: box-shadow 0.4s ease, transform 0.3s ease !important;
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.12),
    inset 0 -2px 2px rgba(255,255,255,0.06),
    inset 0 0 2px 4px rgba(255,255,255,0.02),
    0 -2px 6px rgba(0,0,0,0.15),
    0 4px 2px -2px rgba(0,0,0,0.25),
    0 8px 20px rgba(0,0,0,0.20) !important;
}

/* Kill any ::before overlays on stack cards */
body.mp-hide-blog-title .wp-block-post-template.mp-card-stack > li.wp-block-post::before {
  content: none !important;
}

/* ── Text-only cards in card stack (no featured image) ── */
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) {
  background: linear-gradient(
    -75deg,
    rgba(20,60,200,0.06),
    rgba(40,100,255,0.12),
    rgba(20,60,200,0.06)
  ) !important;
  border: none !important;
  border-radius: var(--mp-radius-lg) !important;
  padding: 20px !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.12),
    inset 0 -2px 2px rgba(255,255,255,0.06),
    inset 0 0 2px 4px rgba(255,255,255,0.02),
    0 4px 2px -2px rgba(0,0,0,0.25),
    0 8px 20px rgba(0,0,0,0.20) !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)):hover {
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.10),
    inset 0 -2px 2px rgba(255,255,255,0.08),
    inset 0 0 1px 2px rgba(255,255,255,0.04),
    0 3px 1px -1px rgba(0,0,0,0.30),
    0 12px 28px rgba(0,0,0,0.25) !important;
}

/* Text-only card title */
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) h3,
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) h2,
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) .wp-block-post-title {
  color: var(--mp-text) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding-top: 6px !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  max-width: 100% !important;
}

.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) h3 a,
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) h2 a,
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) .wp-block-post-title a {
  color: var(--mp-text) !important;
  text-decoration: none !important;
  display: block !important;
}

.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)):hover h3,
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)):hover h2,
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)):hover .wp-block-post-title {
  color: var(--mp-accent-5) !important;
  text-shadow: 0 0 16px rgba(0, 80, 255, 0.5) !important;
}

.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)):hover h3 a,
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)):hover h2 a {
  color: var(--mp-accent-5) !important;
}

/* Text-only card date */
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) .wp-block-post-date,
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) time {
  color: var(--mp-text-3) !important;
  font-size: 12px !important;
  margin: 0 !important;
  padding-top: 4px !important;
  display: block !important;
}

/* Text-only card excerpt */
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) .wp-block-post-excerpt,
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) .wp-block-post-excerpt p {
  color: rgba(200, 210, 230, 0.55) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;

  margin-top: 6px !important;
  margin-bottom: 2px !important;
  padding: 0 !important;
}
/* NOTE: text-only cards have 0 padding because they're inside padded containers */

/* Text-only card — kill link underline pseudo-elements */
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) a::after,
.mp-card-stack li.wp-block-post:not(:has(> figure.wp-block-post-featured-image)) a::before {
  display: none !important;
  content: none !important;
}

/* ---- 6A. GRID CARDS (/post-all, /post category sections) ---- */

li.wp-block-post:has(> figure.wp-block-post-featured-image) {
  /* CodePen glass: diagonal gradient white band */
  background: linear-gradient(
    -75deg,
    rgba(20,60,200,0.06),
    rgba(40,100,255,0.12),
    rgba(20,60,200,0.06)
  ) !important;
  border: none !important;
  border-radius: var(--mp-radius-lg) !important;
  padding: 0 !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  /* CodePen box-shadow pattern (dark-adapted):
     1. inset top dark edge (light source above → shadow inside top)
     2. inset bottom light edge (reflected light from surface)
     3. inset glow spread (inner glass luminosity)
     4. outer drop shadow */
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.12),
    inset 0 -2px 2px rgba(255,255,255,0.06),
    inset 0 0 2px 4px rgba(255,255,255,0.02),
    0 4px 2px -2px rgba(0,0,0,0.25),
    0 8px 20px rgba(0,0,0,0.20) !important;
}

/* CodePen-style conic-gradient border — grid cards (pre-flip state)
   Uses mask-composite:exclude to create a border-only region,
   then fills it with a conic gradient that varies around the edge. */
li.wp-block-post:has(> figure.wp-block-post-featured-image)::after {
  content: '' !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: -1px !important;
  border-radius: inherit !important;
  padding: 1px !important;
  box-sizing: border-box !important;
  background:
    conic-gradient(
      from -75deg at 50% 50%,
      rgba(255,255,255,0.30),
      rgba(255,255,255,0.0) 5% 40%,
      rgba(255,255,255,0.30) 50%,
      rgba(255,255,255,0.0) 60% 95%,
      rgba(255,255,255,0.30)
    ),
    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  transition: opacity 0.4s cubic-bezier(0.25,1,0.5,1) !important;
  opacity: 1 !important;
}
li.wp-block-post:has(> figure.wp-block-post-featured-image):hover::after {
  opacity: 1 !important;
}

/* Hover state — grid cards only */
li.wp-block-post:has(> figure.wp-block-post-featured-image):hover {
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.10),
    inset 0 -2px 2px rgba(255,255,255,0.08),
    inset 0 0 1px 2px rgba(255,255,255,0.04),
    0 3px 1px -1px rgba(0,0,0,0.30),
    0 12px 28px rgba(0,0,0,0.25) !important;
}

/* Grid card thumbnail — fixed height, flush with card top */
li.wp-block-post > figure.wp-block-post-featured-image {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  height: 200px !important;
  position: relative !important;
  border-radius: 0 !important;
}

li.wp-block-post > figure.wp-block-post-featured-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 0 !important;
  transition: filter 0.4s var(--mp-ease) !important;
}

li.wp-block-post:has(> figure.wp-block-post-featured-image):hover > figure img {
  /* scale removed — no image zoom on hover */
  filter: brightness(1.1) saturate(1.15) !important;
}

/* Gradient fade overlay on thumbnail — grid cards only */
li.wp-block-post > figure.wp-block-post-featured-image::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, transparent 30%, rgba(3, 5, 15, 0.85)) !important;
  opacity: 0.6 !important;
  pointer-events: none !important;
}

/* Grid card — uniform content padding for ALL children except figure */
li.wp-block-post:has(> figure.wp-block-post-featured-image) > *:not(figure) {
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

li.wp-block-post:has(> figure.wp-block-post-featured-image) > *:not(figure):first-of-type {
  padding-top: 14px !important;
}

li.wp-block-post:has(> figure.wp-block-post-featured-image) > *:last-child {
  padding-bottom: 8px !important;
}

/* Grid card — vertical spacing between chip, title, date */
li.wp-block-post:has(> figure.wp-block-post-featured-image) .wp-block-post-terms {
  margin-bottom: 6px !important;
}

li.wp-block-post:has(> figure.wp-block-post-featured-image) .wp-block-post-title,
li.wp-block-post:has(> figure.wp-block-post-featured-image) h3,
li.wp-block-post:has(> figure.wp-block-post-featured-image) h2 {
  margin-bottom: 4px !important;
}

li.wp-block-post:has(> figure.wp-block-post-featured-image) .wp-block-post-date {
  margin-top: 2px !important;
}

/* Grid card content wrapper — flex layout */
li.wp-block-post:has(> figure.wp-block-post-featured-image) > div.wp-block-group {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important;
}

/* Chip wrapper collapse — grid cards + card stack cards
   IMPORTANT: exclude .wp-block-post-terms from all:unset
   because it needs display:flex for chip layout */
li.wp-block-post:has(> figure.wp-block-post-featured-image) .nfd-bg-subtle,
li.wp-block-post:has(> figure.wp-block-post-featured-image) [class*="nfd-bg-subtle"],
li.wp-block-post:has(> figure.wp-block-post-featured-image) .nfd-bg-subtle div:not(.wp-block-post-terms),
li.wp-block-post:has(> figure.wp-block-post-featured-image) [class*="nfd-bg-subtle"] div:not(.wp-block-post-terms),
.mp-card-stack li.wp-block-post .nfd-bg-subtle,
.mp-card-stack li.wp-block-post [class*="nfd-bg-subtle"],
.mp-card-stack li.wp-block-post .nfd-bg-subtle div:not(.wp-block-post-terms),
.mp-card-stack li.wp-block-post [class*="nfd-bg-subtle"] div:not(.wp-block-post-terms) {
  all: unset !important;
  display: contents !important;
}

/* Hide dot separator between chips */
.mp-card-stack .wp-block-post-terms__separator,
li.wp-block-post .wp-block-post-terms__separator {
  display: none !important;
}

/* Chip links — grid cards + card stack text-only cards */
li.wp-block-post:has(> figure.wp-block-post-featured-image) .nfd-bg-subtle a,
li.wp-block-post:has(> figure.wp-block-post-featured-image) .wp-block-post-terms a,
.mp-card-stack li.wp-block-post .nfd-bg-subtle a,
.mp-card-stack li.wp-block-post .wp-block-post-terms a {
  background: rgba(0, 80, 255, 0.20) !important;
  border: 1px solid rgba(0, 80, 255, 0.50) !important;
  color: #3399FF !important;
  border-radius: 100px !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: inline-block !important;
  text-decoration: none !important;
  margin: 0 !important;
  position: relative !important;
}

/* Kill underline pseudo-elements on grid card links */
li.wp-block-post:has(> figure.wp-block-post-featured-image) a::after,
li.wp-block-post:has(> figure.wp-block-post-featured-image) a::before {
  display: none !important;
  content: none !important;
}

li.wp-block-post:has(> figure.wp-block-post-featured-image) .nfd-bg-subtle a:hover,
li.wp-block-post:has(> figure.wp-block-post-featured-image) .wp-block-post-terms a:hover,
.mp-card-stack li.wp-block-post .nfd-bg-subtle a:hover,
.mp-card-stack li.wp-block-post .wp-block-post-terms a:hover {
  background: rgba(0, 80, 255, 0.30) !important;
  border-color: rgba(0, 80, 255, 0.7) !important;
  color: #fff !important;
  text-decoration: none !important;
}

li.wp-block-post:has(> figure.wp-block-post-featured-image) .wp-block-post-terms,
.mp-card-stack li.wp-block-post .wp-block-post-terms {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4em !important;
}

/* Chip parent group gap — theme sets ~27px, reduce to compact chip spacing.
   Targets .wp-block-group wrapper that holds .nfd-bg-subtle > .wp-block-post-terms.
   Since .nfd-bg-subtle and .wp-block-post-terms both use display:contents,
   chip links become direct flex children of this group. */
li.wp-block-post .wp-block-group.is-nowrap,
li.wp-block-post .wp-block-group.is-layout-flex:has(.wp-block-post-terms) {
  gap: 0.4em !important;
  flex-wrap: wrap !important;
}

/* Override Bluehost theme nfd-text-balance max-width (650px) inside cards —
   lets card titles use the full card width for natural word wrapping */
li.wp-block-post h3.nfd-text-balance,
li.wp-block-post h2.nfd-text-balance,
li.wp-block-post .wp-block-post-title.nfd-text-balance {
  max-width: 100% !important;
  text-wrap: auto !important;
}

/* Grid card title */
li.wp-block-post:has(> figure.wp-block-post-featured-image) h3,
li.wp-block-post:has(> figure.wp-block-post-featured-image) h2,
li.wp-block-post:has(> figure.wp-block-post-featured-image) .wp-block-post-title {
  color: var(--mp-text) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  padding-top: 6px !important;
  line-height: 1.4 !important;
  /* min-height removed: title height is now dynamic (1-line or 2-line) */
  transition: all 0.3s var(--mp-ease) !important;
  text-decoration: none !important;
  max-width: 100% !important;
}

li.wp-block-post:has(> figure.wp-block-post-featured-image):hover h3,
li.wp-block-post:has(> figure.wp-block-post-featured-image):hover h2,
li.wp-block-post:has(> figure.wp-block-post-featured-image):hover .wp-block-post-title {
  color: var(--mp-accent-5) !important;
  text-shadow: 0 0 16px rgba(0, 80, 255, 0.5) !important;
}

/* Grid card title link — fill full heading width for natural word wrap */
li.wp-block-post:has(> figure.wp-block-post-featured-image) h3 a,
li.wp-block-post:has(> figure.wp-block-post-featured-image) h2 a,
li.wp-block-post:has(> figure.wp-block-post-featured-image) .wp-block-post-title a {
  color: var(--mp-text) !important;
  text-decoration: none !important;
  display: block !important;
}

li.wp-block-post:has(> figure.wp-block-post-featured-image):hover h3 a,
li.wp-block-post:has(> figure.wp-block-post-featured-image):hover h2 a,
li.wp-block-post:has(> figure.wp-block-post-featured-image):hover .wp-block-post-title a {
  color: var(--mp-accent-5) !important;
}

/* Grid card date */
li.wp-block-post:has(> figure.wp-block-post-featured-image) .wp-block-post-date,
li.wp-block-post:has(> figure.wp-block-post-featured-image) time {
  color: var(--mp-text-3) !important;
  font-size: 12px !important;
  margin: 0 !important;
  padding-top: 4px !important;
  display: block !important;
}

/* Grid card excerpt — left/right 16px to match title/chips/tags/date */
li.wp-block-post:has(> figure.wp-block-post-featured-image) .wp-block-post-excerpt {
  color: rgba(200, 210, 230, 0.55) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;

  margin-top: 6px !important;
  margin-bottom: 2px !important;
  padding: 0 16px !important;
}
li.wp-block-post:has(> figure.wp-block-post-featured-image) .wp-block-post-excerpt p {
  margin: 0 !important;
  padding: 0 !important;
}

/* (Grid card bottom spacing handled by uniform padding above) */

/* ---- 6B. COVER CARD (/post featured — 상단) ---- */
/* The cover card uses .wp-block-cover for image background.
   Let WordPress handle most of it — just clean up edges. */

li.wp-block-post:has(> .wp-block-cover) {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: var(--mp-radius-lg) !important;
  transition: background 0.4s var(--mp-ease), box-shadow 0.4s var(--mp-ease), border-color 0.4s var(--mp-ease) !important;
  position: relative !important;
}

li.wp-block-post:has(> .wp-block-cover) .wp-block-cover {
  border-radius: var(--mp-radius-lg) !important;
  overflow: hidden !important;
  min-height: 480px !important;
  /* Kill NFD nfd-p-card-md padding — let inner container handle its own padding */
  padding: 0 !important;
}

/* Cover card image — must match card radius because transform-style:preserve-3d
   on .mp-flip-inner breaks parent overflow:hidden clipping.
   Apply border-radius directly on every layer so clipping is self-contained. */
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover img,
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover video,
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover .wp-block-cover__image-background {
  border-radius: var(--mp-radius-lg) !important;
}

/* Also target nfd-p-card-md specifically for cover cards */
li.wp-block-post:has(> .wp-block-cover) .nfd-p-card-md,
li.wp-block-post:has(> .wp-block-cover) [class*="nfd-p-card"],
li.wp-block-post:has(> .wp-block-cover) [class*="nfd-p-"] {
  padding: 0 !important;
}

li.wp-block-post:has(> .wp-block-cover):hover {
  /* transform removed — parallax handles it via JS */
}

/* Cover card — kill link pseudo-elements */
li.wp-block-post:has(> .wp-block-cover) a::after,
li.wp-block-post:has(> .wp-block-cover) a::before {
  display: none !important;
  content: none !important;
}

/* Cover card — collapse chip wrapper (uses nfd-backdrop-blur-sm, NOT nfd-bg-subtle)
   Exclude .wp-block-post-terms and .wp-block-post-excerpt so they keep their own display */
li.wp-block-post:has(> .wp-block-cover) .nfd-backdrop-blur-sm,
li.wp-block-post:has(> .wp-block-cover) .nfd-rounded-sm.wp-block-group,
li.wp-block-post:has(> .wp-block-cover) .nfd-backdrop-blur-sm div:not(.wp-block-post-terms):not(.wp-block-post-excerpt),
li.wp-block-post:has(> .wp-block-cover) .nfd-rounded-sm.wp-block-group div:not(.wp-block-post-terms):not(.wp-block-post-excerpt) {
  all: unset !important;
  display: contents !important;
}

/* Cover card title */
li.wp-block-post:has(> .wp-block-cover) h3,
li.wp-block-post:has(> .wp-block-cover) h2,
li.wp-block-post:has(> .wp-block-cover) .wp-block-post-title {
  color: var(--mp-text) !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  text-decoration: none !important;
}

li.wp-block-post:has(> .wp-block-cover) h3 a,
li.wp-block-post:has(> .wp-block-cover) h2 a,
li.wp-block-post:has(> .wp-block-cover) .wp-block-post-title a {
  color: var(--mp-text) !important;
  text-decoration: none !important;
}

/* Cover card chip — prevent wrapping */
li.wp-block-post:has(> .wp-block-cover) .wp-block-post-terms {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 6px !important;
}
li.wp-block-post:has(> .wp-block-cover) .wp-block-post-terms a {
  background: rgba(0, 80, 255, 0.25) !important;
  border: 1px solid rgba(0, 80, 255, 0.50) !important;
  color: #3399FF !important;
  border-radius: 100px !important;
  padding: 3px 10px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  display: inline-block !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

/* Cover card excerpt — compact inside overlay */
li.wp-block-post:has(> .wp-block-cover) .wp-block-post-excerpt,
li.wp-block-post:has(> .wp-block-cover) .wp-block-post-excerpt p {
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* Cover card tags */
li.wp-block-post:has(> .wp-block-cover) .mp-card-tags {
  padding: 0 !important;
  margin-top: 4px !important;
}

/* Cover card "Read more" link */
li.wp-block-post:has(> .wp-block-cover) .wp-block-read-more,
li.wp-block-post:has(> .wp-block-cover) a[href*="read-more"],
li.wp-block-post:has(> .wp-block-cover) > a:last-of-type {
  color: var(--mp-accent-5) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
}

/* Cover card date */
li.wp-block-post:has(> .wp-block-cover) time,
li.wp-block-post:has(> .wp-block-cover) .wp-block-post-date {
  color: var(--mp-text-3) !important;
  font-size: 13px !important;
}

/* ---- 6C. TEXT-ONLY LIST ITEMS (/post Recent Posts) ---- */
/* These have no figure, no cover, no columns — just a div group with title + date */

/* Text-only card INSIDE a grid context (post-all page) — give it a card style */
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) {
  background:
    linear-gradient(135deg,
      rgba(0, 60, 255, 0.06) 0%,
      rgba(0, 128, 255, 0.03) 40%,
      rgba(0, 80, 255, 0.05) 100%
    ) !important;
  border: none !important;
  border-radius: var(--mp-radius-lg) !important;
  padding: 24px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.06),
    0 4px 24px rgba(0,0,0,0.3) !important;
}

/* Text-only card in grid — ALL children left-aligned, full width */
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) > * {
  width: 100% !important;
  text-align: left !important;
}

/* Text-only card in grid — the first child is a flex-row wp-block-group
   that wraps the chip. Force it to collapse so chip flows naturally */
/* Text-only card in grid — do NOT push last-child to bottom (override generic rule) */
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) > *:last-child {
  margin-top: 0 !important;
}

.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) > .wp-block-group.is-nowrap,
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) > .wp-block-group.is-layout-flex {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  gap: 6px !important;
  margin-bottom: 0 !important;
}

/* Text-only card in grid — title to match grid card font/spacing */
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) h3,
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) h2,
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) .wp-block-post-title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  padding-top: 10px !important;
  margin-bottom: 0 !important;
}

/* Text-only card in grid — date to match grid card */
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) .wp-block-post-date,
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) time,
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) .nfd-text-faded {
  font-size: 12px !important;
  margin-top: 10px !important;
  padding-top: 4px !important;
}

/* Text-only card in grid — chip wrapper collapse (exclude .wp-block-post-terms) */
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) .nfd-bg-subtle,
.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) .nfd-bg-subtle div:not(.wp-block-post-terms) {
  all: unset !important;
  display: contents !important;
}

.wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) > li.wp-block-post:not(.mp-stack-card):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)):hover {
  border: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 16px 40px rgba(0, 47, 255, 0.15) !important;
}

/* Recent Posts sidebar — vertically center content next to cover card */
.wp-block-columns:has(> .wp-block-column.is-vertically-aligned-center) > .wp-block-column:not(.is-vertically-aligned-center) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

/* Recent Posts section heading — align with items below */
h2.nfd-text-lg.wp-block-heading,
.wp-block-query h2.wp-block-heading {
  padding-left: 12px !important;
}

/* Category section — reduce gap between title (h2) and description (p) */
.wp-block-group.is-vertical.is-layout-flex:has(> h2 + p) {
  gap: 14px !important;
}
.wp-block-group.is-vertical.is-layout-flex:has(> h2 + p) > h2 {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.wp-block-group.is-vertical.is-layout-flex:has(> h2 + p) > p {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Text-only card OUTSIDE grid context (Recent Posts list)
   Exclude .mp-stack-card — those get card-stack glass styling instead.
   Exclude .mp-flip-enabled — those are grid cards on /post-all that get
   flip/glass styling and need border-radius preserved. */
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 12px !important;
  transition: background 0.3s var(--mp-ease), border-color 0.3s var(--mp-ease) !important;
  position: relative !important;
}

/* Kill inner div borders that create double lines */
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) > div,
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) > div > * {
  border: none !important;
  border-bottom: none !important;
}

/* Single bottom separator line (on the li itself, after content) */
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)):not(:last-child)::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 12px !important;
  right: 12px !important;
  height: 1px !important;
  background: var(--mp-border) !important;
}

li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)):hover {
  background: var(--mp-surface) !important;
  border-radius: 8px !important;
  /* NO padding/margin change on hover — prevents layout shift */
}

/* Text-only list — consistent inner element alignment */
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) > * {
  padding: 0 !important;
  margin: 0 !important;
}

li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) > div.wp-block-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

/* Text-only card title */
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) h3,
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) h2,
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) .wp-block-post-title {
  color: var(--mp-text) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
}

li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) h3 a,
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) h2 a {
  color: var(--mp-text) !important;
  text-decoration: none !important;
}

li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)):hover h3 a,
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)):hover h2 a {
  color: var(--mp-accent-5) !important;
}

/* Text-only card date */
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) time,
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns)) .wp-block-post-date {
  color: var(--mp-text-3) !important;
  font-size: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Text-only — kill ::before pseudo-element */
li.wp-block-post:not(.mp-stack-card):not(.mp-flip-enabled):not(:has(> figure)):not(:has(> .wp-block-cover)):not(:has(> .wp-block-columns))::before {
  display: none !important;
  content: none !important;
}

/* ---- 6D. CATEGORY PAGE — HORIZONTAL 2-COLUMN CARDS ---- */

li.wp-block-post:has(> .wp-block-columns) {
  background: linear-gradient(
    -75deg,
    rgba(20,60,200,0.06),
    rgba(40,100,255,0.12),
    rgba(20,60,200,0.06)
  ) !important;
  border: none !important;
  border-radius: var(--mp-radius-lg) !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  overflow: visible !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  position: relative !important;
  width: 100% !important;
  box-sizing: border-box !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.12),
    inset 0 -2px 2px rgba(255,255,255,0.06),
    inset 0 0 2px 4px rgba(255,255,255,0.02),
    0 4px 2px -2px rgba(0,0,0,0.25),
    0 8px 20px rgba(0,0,0,0.20) !important;
}

/* CodePen-style conic-gradient border — category horizontal cards */
li.wp-block-post:has(> .wp-block-columns)::after {
  content: '' !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: -1px !important;
  border-radius: inherit !important;
  padding: 1px !important;
  box-sizing: border-box !important;
  background:
    conic-gradient(
      from -75deg at 50% 50%,
      rgba(255,255,255,0.30),
      rgba(255,255,255,0.0) 5% 40%,
      rgba(255,255,255,0.30) 50%,
      rgba(255,255,255,0.0) 60% 95%,
      rgba(255,255,255,0.30)
    ),
    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  transition: opacity 0.4s cubic-bezier(0.25,1,0.5,1) !important;
  opacity: 1 !important;
}
li.wp-block-post:has(> .wp-block-columns):hover::after {
  opacity: 1 !important;
}

/* Category card post template — grid layout matching /post-all/ */
.wp-block-post-template:has(> li.wp-block-post > .wp-block-columns) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 2em !important;
  padding: 0 !important;
  align-items: stretch !important;
}

li.wp-block-post:has(> .wp-block-columns):hover {
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.10),
    inset 0 -2px 2px rgba(255,255,255,0.08),
    inset 0 0 1px 2px rgba(255,255,255,0.04),
    0 3px 1px -1px rgba(0,0,0,0.30),
    0 12px 28px rgba(0,0,0,0.25) !important;
}

/* Category card figure — match /post-all/ thumbnail (192px fixed height) */
li.wp-block-post:has(> .wp-block-columns) figure.wp-block-post-featured-image {
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
}

li.wp-block-post:has(> .wp-block-columns) figure.wp-block-post-featured-image img {
  width: 100% !important;
  height: 192px !important;
  object-fit: cover !important;
  display: block !important;
  transition: filter 0.4s var(--mp-ease) !important;
}

/* Category card figure — dark gradient overlay (injected by JS as .mp-cat-fig-overlay)
   Matches /post-all/ figure::after: linear-gradient(180deg, transparent 30%, rgba(3,5,15,0.85)) opacity 0.6 */

li.wp-block-post:has(> .wp-block-columns):hover figure img {
  /* scale removed */
}

/* Category card title — match /post-all/ grid card title exactly */
li.wp-block-post:has(> .wp-block-columns) h2,
li.wp-block-post:has(> .wp-block-columns) .wp-block-post-title {
  color: var(--mp-text) !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 6px 16px 0 !important;
  text-decoration: none !important;
  transition: all 0.3s var(--mp-ease) !important;
}

li.wp-block-post:has(> .wp-block-columns) h2 a,
li.wp-block-post:has(> .wp-block-columns) .wp-block-post-title a {
  color: var(--mp-text) !important;
  text-decoration: none !important;
  display: block !important;
}

li.wp-block-post:has(> .wp-block-columns):hover h2,
li.wp-block-post:has(> .wp-block-columns):hover .wp-block-post-title {
  color: var(--mp-accent-5) !important;
  text-shadow: 0 0 16px rgba(0, 80, 255, 0.5) !important;
}

li.wp-block-post:has(> .wp-block-columns):hover h2 a,
li.wp-block-post:has(> .wp-block-columns):hover .wp-block-post-title a {
  color: var(--mp-accent-5) !important;
}

/* Category card excerpt — match /post-all/ grid card excerpt */
li.wp-block-post:has(> .wp-block-columns) .wp-block-post-excerpt,
li.wp-block-post:has(> .wp-block-columns) .wp-block-post-excerpt p {
  color: rgba(200, 210, 230, 0.55) !important;
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  margin: 6px 0 2px !important;
  padding: 0 16px !important;
}

/* Category card — inner columns: vertical stack (matches /post-all/ card layout) */
li.wp-block-post:has(> .wp-block-columns) .wp-block-columns {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: var(--mp-radius-lg) !important;
  flex: 1 !important;
}

/* Category card — image column: full width (vertical stack) */
li.wp-block-post:has(> .wp-block-columns) .wp-block-column:has(figure) {
  padding: 0 !important;
  margin: 0 !important;
  flex: none !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Category card — text column: flex stretch (vertical stack) */
li.wp-block-post:has(> .wp-block-columns) .wp-block-column:not(:has(figure)) {
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* Category card date — match /post-all/ grid card date */
li.wp-block-post:has(> .wp-block-columns) .wp-block-post-date,
li.wp-block-post:has(> .wp-block-columns) time {
  color: var(--mp-text-3) !important;
  font-size: 12px !important;
  margin-top: auto !important;
  margin-bottom: 0 !important;
  padding: 8px 16px 16px !important;
  display: block !important;
}

/* Category card chips — match /post-all/ grid card chips */
li.wp-block-post:has(> .wp-block-columns) .wp-block-post-terms {
  padding: 14px 16px 0 !important;
  margin-bottom: 0 !important;
}

/* Category card — kill link pseudo-elements */
li.wp-block-post:has(> .wp-block-columns) a::after,
li.wp-block-post:has(> .wp-block-columns) a::before {
  display: none !important;
  content: none !important;
}

/* Category card — shine overlay matching grid card ::after */
li.wp-block-post:has(> .wp-block-columns)::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0.04) 0%,
    transparent 40%,
    transparent 60%,
    rgba(255, 255, 255, 0.02) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* ============================================================
   7. ARTICLE BODY — SINGLE POST
   ============================================================ */

/* Centered title and metadata */
body.single .entry-header {
  text-align: center !important;
  margin-bottom: 2em !important;
  max-width: 720px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body.single .entry-title {
  color: var(--mp-text) !important;
  font-size: 2.8rem !important;
  font-weight: 900 !important;
  margin-bottom: 0.5em !important;
}

body.single .entry-meta {
  color: var(--mp-text-3) !important;
  font-size: 14px !important;
  margin-bottom: 1.5em !important;
}

/* Featured image — rounded corners, reasonable height */
body.single figure.wp-block-post-featured-image {
  border-radius: 0 !important;
  overflow: hidden !important;
  margin-bottom: 2em !important;
  border: none !important;
  height: auto !important;
  max-height: none !important;
  background: transparent !important;
}

/* Content figures (inline images in article body) */
body.single .entry-content figure {
  border-radius: var(--mp-radius) !important;
  overflow: hidden !important;
  margin-bottom: 1.5em !important;
  border: 1px solid var(--mp-border-2) !important;
}

body.single figure.wp-block-post-featured-image img,
body.single .wp-post-image {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: cover !important;
  border-radius: var(--mp-radius-lg) !important;
  border: 1px solid var(--mp-border-2) !important;
}

/* Content images — natural aspect ratio */
body.single .entry-content figure img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

/* SAFETY: Kill ALL pseudo-element overlays on single post images */
body.single figure::after,
body.single figure::before,
body.single .wp-block-post-featured-image::after,
body.single .wp-block-post-featured-image::before {
  display: none !important;
  content: none !important;
}

/* Comment section — FULL DARK OVERRIDE */
body.single .comment-form,
body.single #comments,
body.single .comments-area,
body.single #respond {
  background: var(--mp-surface) !important;
  border: 1px solid var(--mp-border-2) !important;
  border-radius: var(--mp-radius) !important;
  padding: 1.5em !important;
  margin-top: 2em !important;
}

/* Kill ALL teal inside comments specifically */
body.single .comment-form *,
body.single #comments *,
body.single .comments-area *,
body.single #respond *,
body.single .comment-reply-title,
body.single .comment-notes,
body.single .logged-in-as {
  color: var(--mp-text) !important;
}

body.single .comment-form label {
  color: var(--mp-text-2) !important;
}

body.single .comment-form input[type="text"],
body.single .comment-form input[type="email"],
body.single .comment-form input[type="url"],
body.single .comment-form textarea {
  background: var(--mp-bg-2) !important;
  border: 1px solid var(--mp-border-2) !important;
  color: var(--mp-text) !important;
  border-radius: 6px !important;
  padding: 0.8em !important;
  font-family: var(--mp-font) !important;
}

body.single .comment-form textarea {
  min-height: 120px !important;
}

body.single .comment-form input:focus,
body.single .comment-form textarea:focus {
  outline: none !important;
  border-color: var(--mp-accent-4) !important;
  box-shadow: 0 0 12px rgba(0, 128, 255, 0.2) !important;
}

/* Comment submit → glass with blue tint */
body.single .comment-form #submit,
body.single .comment-form .submit {
  background: linear-gradient(
    -75deg,
    rgba(0, 60, 255, 0.08),
    rgba(0, 100, 255, 0.18),
    rgba(0, 60, 255, 0.08)
  ) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  color: white !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0.8em 2em !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.10),
    inset 0 -1px 1px rgba(0, 0, 0, 0.25),
    0 4px 16px -2px rgba(0, 60, 255, 0.30),
    inset 0 0 6px 2px rgba(0, 100, 255, 0.06) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

body.single .comment-form #submit:hover,
body.single .comment-form .submit:hover {
  transform: scale(0.975) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    inset 0 -1px 1px rgba(0, 0, 0, 0.20),
    0 3px 12px rgba(0, 60, 255, 0.25) !important;
}

body.single .comment-form #submit:active,
body.single .comment-form .submit:active {
  transform: scale(0.96) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.35),
    inset 0 -1px 1px rgba(255, 255, 255, 0.05),
    0 1px 3px rgba(0, 60, 255, 0.15) !important;
}

/* ============================================================
   8. CATEGORY FILTER BUTTONS — SUBTLE PILL STYLE
   ============================================================ */

/* Category filter buttons — subtle, non-aggressive pill
   IMPORTANT: specificity boosted with body prefix to beat link ripple rule
   transition MUST be set here at highest specificity to prevent theme's
   link ripple rule from overriding it (which causes reversed animation) */
/* ═══ GLASS BUTTON — Houdini angle properties ═══ */
@property --mp-btn-angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}
@property --mp-btn-angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

/* ═══ GLASS BUTTON — base (category pills, standard buttons) ═══ */
body.wp-theme-bluehost-blueprint .wp-block-button__link.wp-element-button,
body.wp-theme-bluehost-blueprint a.wp-block-button__link,
body.wp-theme-bluehost-blueprint .wp-block-button .wp-block-button__link,
body.wp-theme-bluehost-blueprint .wp-block-buttons .wp-block-button__link {
  /* Glass background */
  background: linear-gradient(
    -75deg,
    rgba(255, 255, 255, 0.03),
    rgba(255, 255, 255, 0.10),
    rgba(255, 255, 255, 0.03)
  ) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  /* Shape */
  border: none !important;
  border-radius: 100px !important;
  padding: 0.55em 1.5em !important;
  /* Glass shadows — dark-mode inversion */
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.25),
    0 2px 4px -1px rgba(0, 0, 0, 0.4),
    inset 0 0 6px 2px rgba(255, 255, 255, 0.04) !important;
  /* Text */
  color: rgba(200, 210, 235, 0.9) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  text-decoration: none !important;
  /* Layout */
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;
  /* Animation */
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Glass shine pseudo — inner light streak */
body.wp-theme-bluehost-blueprint .wp-block-button__link::before,
body.wp-theme-bluehost-blueprint a.wp-block-button__link::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(
    var(--mp-btn-angle-2),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.12) 40%,
    rgba(255, 255, 255, 0.18) 48%,
    rgba(255, 255, 255, 0) 55%
  ) !important;
  background-size: 200% 200% !important;
  background-position: 0% 50% !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: background-position 500ms cubic-bezier(0.25, 1, 0.5, 1),
              --mp-btn-angle-2 500ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Glass border pseudo — conic gradient outline */
body.wp-theme-bluehost-blueprint .wp-block-button__link::after,
body.wp-theme-bluehost-blueprint a.wp-block-button__link::after {
  content: '' !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: -1px !important;
  border-radius: inherit !important;
  padding: 1px !important;
  box-sizing: border-box !important;
  background:
    conic-gradient(
      from var(--mp-btn-angle-1) at 50% 50%,
      rgba(255, 255, 255, 0.25),
      rgba(255, 255, 255, 0) 5% 40%,
      rgba(100, 160, 255, 0.35) 50%,
      rgba(255, 255, 255, 0) 60% 95%,
      rgba(255, 255, 255, 0.25)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.04)) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1),
              --mp-btn-angle-1 500ms ease !important;
  pointer-events: none !important;
}

/* ═══ GLASS BUTTON — hover ═══ */
body.wp-theme-bluehost-blueprint .wp-block-button__link.wp-element-button:hover,
body.wp-theme-bluehost-blueprint a.wp-block-button__link:hover,
body.wp-theme-bluehost-blueprint .wp-block-button .wp-block-button__link:hover {
  background: linear-gradient(
    -75deg,
    rgba(0, 80, 255, 0.06),
    rgba(255, 255, 255, 0.14),
    rgba(0, 80, 255, 0.06)
  ) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  transform: scale(0.975) !important;
  color: #e0e8ff !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.10),
    inset 0 -1px 1px rgba(0, 0, 0, 0.20),
    0 1px 3px -1px rgba(0, 0, 0, 0.35),
    inset 0 0 4px 1px rgba(100, 160, 255, 0.06) !important;
}

body.wp-theme-bluehost-blueprint .wp-block-button__link:hover::before,
body.wp-theme-bluehost-blueprint a.wp-block-button__link:hover::before {
  background-position: 25% 50% !important;
}

body.wp-theme-bluehost-blueprint .wp-block-button__link:hover::after,
body.wp-theme-bluehost-blueprint a.wp-block-button__link:hover::after {
  --mp-btn-angle-1: -125deg !important;
}

/* ═══ GLASS BUTTON — active/press ═══ */
body.wp-theme-bluehost-blueprint .wp-block-button__link:active,
body.wp-theme-bluehost-blueprint a.wp-block-button__link:active {
  transform: scale(0.96) !important;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.3),
    inset 0 -1px 1px rgba(255, 255, 255, 0.05),
    0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

body.wp-theme-bluehost-blueprint .wp-block-button__link:active::before,
body.wp-theme-bluehost-blueprint a.wp-block-button__link:active::before {
  background-position: 50% 15% !important;
  --mp-btn-angle-2: -15deg !important;
}

body.wp-theme-bluehost-blueprint .wp-block-button__link:active::after,
body.wp-theme-bluehost-blueprint a.wp-block-button__link:active::after {
  --mp-btn-angle-1: -75deg !important;
}

/* ═══ GLASS BUTTON — active/current page ═══ */
body.wp-theme-bluehost-blueprint .wp-block-button__link.wp-element-button.is-active,
body.wp-theme-bluehost-blueprint .wp-block-button__link.is-active,
body.wp-theme-bluehost-blueprint a.wp-block-button__link.is-active {
  background: linear-gradient(
    -75deg,
    rgba(0, 60, 255, 0.10),
    rgba(0, 100, 255, 0.18),
    rgba(0, 60, 255, 0.10)
  ) !important;
  color: #ffffff !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    inset 0 -1px 1px rgba(0, 0, 0, 0.20),
    0 2px 8px rgba(0, 80, 255, 0.25),
    inset 0 0 8px 2px rgba(0, 100, 255, 0.08) !important;
}

/* ═══ GLASS BUTTON — outline variant ═══ */
.is-style-outline .wp-block-button__link {
  background: rgba(255, 255, 255, 0.02) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  color: var(--mp-text-2) !important;
}

.is-style-outline .wp-block-button__link:hover {
  background: linear-gradient(
    -75deg,
    rgba(0, 80, 255, 0.05),
    rgba(255, 255, 255, 0.10),
    rgba(0, 80, 255, 0.05)
  ) !important;
  color: #e0e8ff !important;
}

/* CTA section (.wp-block-cover NOT inside li.wp-block-post) — vertical centering */
.wp-site-blocks .wp-block-cover:not(li.wp-block-post .wp-block-cover) .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 2em !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 32px !important;
  box-sizing: border-box !important;
}

/* CTA inner wrapper — kill excessive nfd-p-card-lg padding, keep flex row */
.wp-site-blocks .wp-block-cover:not(li.wp-block-post .wp-block-cover) .wp-block-cover__inner-container > .wp-block-group {
  width: 100% !important;
  max-width: 100% !important;
  padding: 24px 32px !important;
  gap: 2em !important;
}

/* CTA text — vertically centered */
.wp-site-blocks .wp-block-cover:not(li.wp-block-post .wp-block-cover) .wp-block-cover__inner-container h2,
.wp-site-blocks .wp-block-cover:not(li.wp-block-post .wp-block-cover) .wp-block-cover__inner-container h3,
.wp-site-blocks .wp-block-cover:not(li.wp-block-post .wp-block-cover) .wp-block-cover__inner-container p {
  margin: 0 !important;
}

/* CTA buttons (nfd-btn-xl) — vivid blue glass (matches landing page) */
body.wp-theme-bluehost-blueprint .nfd-btn-xl .wp-block-button__link,
body.wp-theme-bluehost-blueprint .nfd-btn-xl.wp-block-button .wp-block-button__link {
  background: linear-gradient(
    135deg,
    rgb(0, 80, 255),
    rgb(0, 112, 255)
  ) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: none !important;
  color: white !important;
  border-radius: 100px !important;
  padding: 0.8em 2em !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 0, 0, 0.20),
    0 0 28px rgba(0, 80, 255, 0.55),
    0 0 60px rgba(0, 47, 255, 0.20) !important;
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1) !important;
  text-decoration: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

/* CTA shine — use background-image only to preserve size/position for animation */
body.wp-theme-bluehost-blueprint .nfd-btn-xl .wp-block-button__link::before,
body.wp-theme-bluehost-blueprint .nfd-btn-xl.wp-block-button .wp-block-button__link::before {
  background-image: linear-gradient(
    var(--mp-btn-angle-2),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 38%,
    rgba(200, 225, 255, 0.40) 48%,
    rgba(255, 255, 255, 0) 56%
  ) !important;
}

/* CTA border — blue conic, also background-image only */
body.wp-theme-bluehost-blueprint .nfd-btn-xl .wp-block-button__link::after,
body.wp-theme-bluehost-blueprint .nfd-btn-xl.wp-block-button .wp-block-button__link::after {
  background-image:
    conic-gradient(
      from var(--mp-btn-angle-1) at 50% 50%,
      rgba(120, 180, 255, 0.6),
      rgba(120, 180, 255, 0) 5% 40%,
      rgba(180, 220, 255, 0.7) 50%,
      rgba(120, 180, 255, 0) 60% 95%,
      rgba(120, 180, 255, 0.6)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(120, 180, 255, 0.10)) !important;
}

body.wp-theme-bluehost-blueprint .nfd-btn-xl .wp-block-button__link:hover,
body.wp-theme-bluehost-blueprint .nfd-btn-xl.wp-block-button .wp-block-button__link:hover {
  transform: scale(0.975) !important;
  background: linear-gradient(
    135deg,
    rgb(10, 90, 255),
    rgb(20, 125, 255)
  ) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.30),
    inset 0 -1px 2px rgba(0, 0, 0, 0.18),
    0 0 32px rgba(0, 80, 255, 0.60),
    0 0 70px rgba(0, 47, 255, 0.25) !important;
  color: white !important;
}

body.wp-theme-bluehost-blueprint .nfd-btn-xl .wp-block-button__link:active,
body.wp-theme-bluehost-blueprint .nfd-btn-xl.wp-block-button .wp-block-button__link:active {
  transform: scale(0.96) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.45),
    inset 0 -1px 1px rgba(255, 255, 255, 0.10),
    0 1px 6px rgba(30, 80, 255, 0.30) !important;
}

/* Force glass transition on ALL button links */
body.wp-theme-bluehost-blueprint .wp-block-buttons a.wp-block-button__link.wp-element-button,
body.wp-theme-bluehost-blueprint .wp-block-button a.wp-block-button__link.wp-element-button {
  transition: all 400ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Post terms pills (small, secondary) */
.wp-block-post-terms {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5em !important;
}

/* ============================================================
   9. PAGINATION
   ============================================================ */

.wp-block-query-pagination {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 3em 0 !important;
  flex-wrap: wrap !important;
}

/* Pagination numbers wrapper — tighter spacing */
.wp-block-query-pagination-numbers {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

/* All pagination links — glass base */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next,
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span {
  background: linear-gradient(
    135deg,
    rgba(20, 60, 200, 0.06),
    rgba(40, 100, 255, 0.10),
    rgba(20, 60, 200, 0.06)
  ) !important;
  background-color: rgba(10, 14, 30, 0.50) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  border: 1px solid rgba(80, 140, 255, 0.15) !important;
  color: rgba(200, 210, 235, 0.80) !important;
  border-radius: 10px !important;
  padding: 0.5em 1em !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.06),
    inset 0 -1px 1px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Prev / Next buttons — pill shape */
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
  border-radius: 100px !important;
  padding: 0.5em 1.4em !important;
  font-weight: 600 !important;
}

/* Hover state — all pagination items */
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-numbers a:hover {
  background: linear-gradient(
    135deg,
    rgba(40, 100, 255, 0.15),
    rgba(60, 130, 255, 0.20),
    rgba(40, 100, 255, 0.15)
  ) !important;
  background-color: rgba(20, 40, 100, 0.50) !important;
  border-color: rgba(80, 140, 255, 0.30) !important;
  color: #fff !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    inset 0 -1px 1px rgba(0, 0, 0, 0.12),
    0 4px 12px rgba(30, 80, 220, 0.20) !important;
}

/* Active / current page — vivid glass accent */
.wp-block-query-pagination-numbers span[aria-current],
.wp-block-query-pagination-numbers .current,
.wp-block-query-pagination__page.is-current {
  background: linear-gradient(
    135deg,
    rgba(40, 100, 255, 0.30),
    rgba(60, 140, 255, 0.40),
    rgba(40, 100, 255, 0.30)
  ) !important;
  background-color: rgba(30, 70, 200, 0.45) !important;
  border-color: rgba(80, 160, 255, 0.35) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    inset 0 -1px 1px rgba(0, 0, 0, 0.15),
    0 0 0 3px rgba(40, 100, 255, 0.10),
    0 4px 12px rgba(30, 80, 220, 0.25) !important;
}

/* Dots / ellipsis */
.wp-block-query-pagination-numbers .dots,
.wp-block-query-pagination-numbers span:not([aria-current]):not(.current) {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: rgba(200, 210, 235, 0.45) !important;
  padding: 0.5em 0.4em !important;
}

/* ============================================================
   9b. FOOTER — COMPACT SPACING
   ============================================================ */

/* Increase gap between separator line and social icons */
footer.wp-block-template-part .nfd-pb-sm,
footer.wp-block-template-part [class*="nfd-pb-sm"] {
  padding-bottom: 2em !important;
}

/* Separator inside footer — add spacing below */
footer.wp-block-template-part .nfd-pt-sm,
footer.wp-block-template-part [class*="nfd-pt-sm"] {
  padding-top: 2em !important;
}

/* Social icon links — spacing above */
footer.wp-block-template-part .wp-block-social-links {
  margin-top: 1em !important;
}

/* ============================================================
   9c. FEATURED COVER CARD — TEXT READABILITY
   ============================================================ */

/* Cover card — strong bottom gradient for text readability (no visible box) */
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg,
    transparent 30%,
    rgba(3, 5, 15, 0.4) 55%,
    rgba(3, 5, 15, 0.85) 80%,
    rgba(3, 5, 15, 0.95) 100%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
  border-radius: inherit !important;
}

/* Cover card inner content — FULL WIDTH, sits above gradient, no box/border
   SCOPED to li.wp-block-post ONLY — do NOT target CTA or other .wp-block-cover blocks */
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover .wp-block-cover__inner-container {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  pointer-events: none !important;          /* ← let mouse events reach the card for flip */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  padding: 28px 32px !important;
  box-sizing: border-box !important;
}

/* Re-enable clicks on interactive elements inside the overlay */
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover__inner-container a,
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover__inner-container button {
  pointer-events: auto !important;
}

/* Override WordPress is-layout-constrained max-width on cover card parents */
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover .is-layout-constrained,
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover .nfd-container,
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover [class*="is-layout-"],
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover .has-global-padding,
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover .wp-block-group {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Cover card — all nested div wrappers must not add their own padding */
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover__inner-container div {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* NUCLEAR: Kill ALL visible containers/boxes inside cover card
   Target every possible wrapper — the theme uses many NFD utility classes
   that create visible background/border/blur boxes */
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover__inner-container *:not(a):not(h2):not(h3):not(time):not(span):not(p) {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Also target the direct children explicitly */
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover__inner-container > div,
li.wp-block-post:has(> .wp-block-cover) .wp-block-cover__inner-container > div > div {
  background: transparent !important;
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* ============================================================
   10. INTERACTIVE COMPONENTS CSS SUPPORT
   ============================================================ */

/* Elite card base */
.mp-elite-card {
  transform-origin: center center !important;
}

/* Profile reveal overlay */
.mp-profile-reveal__overlay {
  clip-path: circle(0% at 50% 50%) !important;
  transition: clip-path 0.5s var(--mp-ease) !important;
}

.mp-profile-reveal__overlay.active {
  clip-path: circle(160% at 50% 50%) !important;
}

/* Gradient card with glow */
.mp-gradient-card {
  position: relative !important;
}

.mp-gradient-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  opacity: 0 !important;
  transition: opacity 0.3s var(--mp-ease) !important;
}

.mp-gradient-card.active::before {
  opacity: 1 !important;
  box-shadow: inset 0 0 20px rgba(0, 80, 255, 0.2) !important;
}

.mp-gradient-card--glow {
  box-shadow: 0 0 20px rgba(0, 80, 255, 0.1) !important;
  transition: box-shadow 0.3s var(--mp-ease) !important;
}

.mp-gradient-card--glow.active {
  box-shadow: 0 0 40px rgba(0, 80, 255, 0.4) !important;
}

.mp-gradient-card--border-glow {
  border: 1px solid rgba(0, 128, 255, 0.3) !important;
  transition: border-color 0.3s var(--mp-ease) !important;
}

.mp-gradient-card--border-glow.active {
  border-color: rgba(0, 80, 255, 0.8) !important;
}

/* Carousel base */
.mp-carousel {
  position: relative !important;
}

.mp-carousel__track {
  display: flex !important;
  gap: 1.5em !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  padding: 1em 0 !important;
  scrollbar-width: thin !important;
  scrollbar-color: var(--mp-border-2) transparent !important;
}

.mp-carousel__track::-webkit-scrollbar {
  height: 6px !important;
}

.mp-carousel__track::-webkit-scrollbar-track {
  background: transparent !important;
}

.mp-carousel__track::-webkit-scrollbar-thumb {
  background: var(--mp-border-2) !important;
  border-radius: 3px !important;
}

.mp-carousel__item {
  flex: 0 0 calc(33.333% - 1em) !important;
  opacity: 0.5 !important;
  transition: opacity 0.3s var(--mp-ease) !important;
}

.mp-carousel__item.in-view {
  opacity: 1 !important;
}

.mp-carousel__nav {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
  background: var(--mp-surface-2) !important;
  border: 1px solid var(--mp-border-2) !important;
  color: var(--mp-text) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s var(--mp-ease) !important;
}

.mp-carousel__nav:hover {
  background: var(--mp-accent-dim) !important;
  border-color: var(--mp-accent-4) !important;
  color: var(--mp-accent-5) !important;
}

.mp-carousel__nav--prev {
  left: -50px !important;
}

.mp-carousel__nav--next {
  right: -50px !important;
}

/* ============================================================
   10b. MICRO-INTERACTIONS
   ============================================================ */

/* Shimmer loading state — GRID CARDS ONLY */
@keyframes mp-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

li.wp-block-post > figure.wp-block-post-featured-image {
  background: linear-gradient(90deg, var(--mp-bg-2), var(--mp-bg-3), var(--mp-bg-2)) !important;
  background-size: 200% 100% !important;
  animation: mp-shimmer 2s ease-in-out infinite !important;
}

/* Subtle glow pulse — GRID CARDS ONLY */
@keyframes mp-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 128, 255, 0); }
  50% { box-shadow: 0 0 20px rgba(0, 128, 255, 0.15); }
}

li.wp-block-post:has(> figure.wp-block-post-featured-image):nth-child(1) {
  animation: mp-glow-pulse 4s ease-in-out infinite !important;
  animation-delay: 0s !important;
}

li.wp-block-post:has(> figure.wp-block-post-featured-image):nth-child(2) {
  animation: mp-glow-pulse 4s ease-in-out infinite !important;
  animation-delay: 1.3s !important;
}

li.wp-block-post:has(> figure.wp-block-post-featured-image):nth-child(3) {
  animation: mp-glow-pulse 4s ease-in-out infinite !important;
  animation-delay: 2.6s !important;
}

/* Link hover ripple — exclude buttons (all variants) */
body.wp-theme-bluehost-blueprint a:not(li.wp-block-post a):not(header a):not(.wp-block-button__link):not(.wp-element-button):not([class*="wp-block-button"]) {
  transition: color 0.3s var(--mp-ease), text-shadow 0.3s var(--mp-ease) !important;
}

body.wp-theme-bluehost-blueprint a:not(li.wp-block-post a):not(header a):not(.wp-block-button__link):not(.wp-element-button):not([class*="wp-block-button"]):hover {
  text-shadow: 0 0 8px rgba(0, 80, 255, 0.4) !important;
}

/* Scroll progress bar */
#mp-scroll-progress {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 0% !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--mp-accent-2), var(--mp-accent-4), var(--mp-accent-5)) !important;
  z-index: 9999 !important;
  transition: width 0.1s linear !important;
}

/* ============================================================
   11. RESPONSIVE DESIGN
   ============================================================ */

@media (max-width: 768px) {
  /* Prevent horizontal scroll on entire page.
     Use overflow-x:clip instead of hidden — hidden breaks
     position:sticky on iOS Safari (known WebKit bug). */
  html, body {
    overflow-x: clip !important;
    max-width: 100% !important;
  }

  :root {
    --mp-radius: 10px;
    --mp-radius-lg: 16px;
  }

  .wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) {
    grid-template-columns: 1fr !important;
    gap: 1.5em !important;
  }

  /* All post grids single column on mobile */
  .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }

  .mp-glass-wrap {
    padding: 1.2rem 24px 1.8rem 24px !important;
    margin: 1.5rem auto 2rem auto !important;
    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;
    overflow-x: hidden !important;
  }

  body.single .entry-content,
  body.single main {
    padding: 0 !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Mobile: constrain WP layout children that tend to overflow
     — target specific block types instead of wildcard * to preserve
       margin:auto centering on other elements */
  body.single .entry-content > .wp-block-image,
  body.single .entry-content > .wp-block-embed,
  body.single .entry-content > figure,
  body.single .entry-content > .wp-block-cover,
  body.single .entry-content > .wp-block-gallery,
  body.single .entry-content > .wp-block-video,
  body.single .entry-content > .wp-block-columns,
  body.single .entry-content > .alignwide,
  body.single .entry-content > .alignfull {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box !important;
  }

  /* Keep all other descendants from overflowing, but allow centering */
  body.single .entry-content *:not(table):not(thead):not(tbody):not(tr):not(th):not(td) {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Mobile: tables scroll horizontally instead of overflowing page */
  body.single .entry-content table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Mobile: restore intended margins for spacing (vertical only) */
  body.single .entry-content p,
  body.single .entry-content ul,
  body.single .entry-content ol,
  body.single .entry-content h2,
  body.single .entry-content h3,
  body.single .entry-content h4,
  body.single .entry-content blockquote,
  body.single .entry-content .wp-block-quote,
  body.single .entry-content figure,
  body.single .entry-content hr,
  body.single .entry-content pre {
    width: 100% !important;
  }

  /* Mobile: Single post featured image — padding approach, border on img */
  body.single figure.wp-block-post-featured-image {
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
  }

  body.single .entry-content figure,
  body.single .wp-block-image {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--mp-radius) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  body.single figure.wp-block-post-featured-image img {
    border-radius: var(--mp-radius-lg) !important;
    border: 1px solid var(--mp-border-2) !important;
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  body.single .entry-content figure img,
  body.single .wp-block-image img {
    border-radius: 0 !important;
    width: 100% !important;
  }

  body.single .entry-content h1 {
    font-size: 2rem !important;
  }

  body.single .entry-content h2 {
    font-size: 1.6rem !important;
  }

  body.single .entry-content h3 {
    font-size: 1.3rem !important;
  }

  body.single .entry-content p {
    font-size: 16px !important;
  }

  h1.wp-block-query-title,
  h1.wp-block-post-title {
    font-size: 2rem !important;
  }

  li.wp-block-post > figure.wp-block-post-featured-image {
    height: 150px !important;
  }

  li.wp-block-post:has(> figure.wp-block-post-featured-image):hover {
    /* transform removed */
  }

  /* Mobile: Cover card full width + taller */
  li.wp-block-post:has(> .wp-block-cover) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  li.wp-block-post:has(> .wp-block-cover) .wp-block-cover {
    min-height: 380px !important;
  }

  /* Mobile: Consistent horizontal padding for all content sections */
  .wp-site-blocks > main > * {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* But don't double-pad things that already have padding */
  .wp-site-blocks > main > * .has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Mobile: Unified /post-all and /category padding.
     /post-all: nfd-container.alignfull breaks out of entry-content padding,
     so its own 20px is the sole source. Content at 20px. ✓
     /category: main > * already gets 20px from rule above.
     Do NOT add padding to main itself — would double up. */
  body.page-id-77 .entry-content > .nfd-container,
  body.page-id-27 .entry-content > .nfd-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* /category: match /post-all container padding exactly.
     Use 20px horizontal padding on main (same as nfd-container on /post-all).
     Children inherit this padding context — no double-padding risk
     because .has-global-padding children are zeroed out above. */
  body.archive:not(.single) main {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 20px !important;
  }
  /* Prevent /category main > * from getting ADDITIONAL 20px from the generic rule */
  body.archive:not(.single) .wp-site-blocks > main > * {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* /search: match mobile padding */
  body.search main,
  body.page-id-590 main {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-top: 20px !important;
  }

  /* Mobile: Cards should have no extra horizontal margin — let parent handle padding */
  li.wp-block-post {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Mobile: Card grid should have no extra side padding */
  .wp-block-post-template {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Mobile: Category card — stack columns vertically */
  li.wp-block-post:has(> .wp-block-columns) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    overflow: hidden !important;
  }

  li.wp-block-post:has(> .wp-block-columns) .wp-block-columns {
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    flex-direction: column !important;
  }

  li.wp-block-post:has(> .wp-block-columns) .wp-block-column:has(figure) {
    flex: none !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }

  li.wp-block-post:has(> .wp-block-columns) .wp-block-column:not(:has(figure)) {
    padding: 24px 20px !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  li.wp-block-post:has(> .wp-block-columns) figure {
    border-radius: var(--mp-radius) var(--mp-radius) 0 0 !important;
  }

  li.wp-block-post:has(> .wp-block-columns) > .wp-block-columns {
    flex-direction: column !important;
  }

  .mp-carousel__item {
    flex: 0 0 calc(50% - 0.75em) !important;
  }

  /* Mobile: Keep gradient animation but lighter for performance */
  body.wp-theme-bluehost-blueprint::before {
    animation: mp-gradient-flow 20s ease infinite !important;
  }

  #mp-bg-canvas {
    display: none !important;
  }

  /* Mobile: Featured glow — match cover card radius (--mp-radius-lg) */
  .mp-featured-glow-wrap {
    border-radius: var(--mp-radius-lg, 16px) !important;
  }

  .mp-featured-glow-wrap::before {
    inset: -1px !important;
    border-radius: calc(var(--mp-radius-lg, 16px) + 1px) !important;
  }

  .mp-featured-glow-wrap::after {
    inset: 0 !important;
    border-radius: var(--mp-radius-lg, 16px) !important;
    filter: blur(8px) !important;
  }

  /* Mobile: Single post — targeted children no extra padding (main provides it) */
  body.single main > .wp-block-group.is-layout-flex:has(.wp-block-post-terms),
  body.single main > .wp-block-group.is-layout-flex:has(.wp-block-post-date),
  body.single main > h1.wp-block-post-title,
  body.single main > .wp-block-post-excerpt,
  body.single main > figure.wp-block-post-featured-image {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }

  /* Mobile: Disable 3D tilt (touch devices) — but NOT flip cards */
  li.wp-block-post:not(.mp-flip-enabled) {
    transform-style: flat !important;
    transform: none !important;
  }

  /* ── Mobile flip cards: tap-to-flip via .mp-flipped class ── */
  li.wp-block-post.mp-flip-enabled {
    perspective: 800px !important;
    transform-style: flat !important;
    transform: none !important;
  }

  /* Tap toggles .mp-flipped — rotates inner (desktop also uses .mp-flipped via JS) */
  li.wp-block-post.mp-flipped > .mp-flip-inner {
    transform: rotateY(180deg) !important;
  }

  /* Disable hover-based flip on mobile (touch devices trigger :hover
     on tap and it sticks, causing double-flip issues) */
  li.wp-block-post.mp-flip-enabled:hover > .mp-flip-inner {
    transform: rotateY(0deg) !important;
  }
  /* But if it's also .mp-flipped, the tap class wins */
  li.wp-block-post.mp-flip-enabled.mp-flipped:hover > .mp-flip-inner {
    transform: rotateY(180deg) !important;
  }

  /* Mobile: slightly smaller card image height */
  li.wp-block-post.mp-flip-enabled:not(.mp-flip-text-only) .mp-flip-front > figure {
    height: 140px !important;
    margin: 6px 6px 0 6px !important;
  }

  /* Mobile: smaller back face padding */
  li.wp-block-post.mp-flip-enabled .mp-flip-back {
    padding: 16px 14px !important;
  }

  .mp-card-back-title {
    font-size: 16px !important;
  }

  .mp-card-back-text {
    font-size: 12px !important;
    -webkit-line-clamp: 3 !important;
  }

  .mp-card-back-cta {
    font-size: 13px !important;
    padding: 8px 20px !important;
  }

  /* ── Mobile: Section spacing ──
     Same section = tight spacing, different sections = wider gap.
     Category sections on /post page use nfd-container as wrappers. */

  /* Between different category sections (nfd-container siblings) — wider gap */
  .entry-content > .nfd-container + .nfd-container {
    margin-top: 3rem !important;
  }

  /* Within a section — tighter spacing */
  .entry-content .nfd-container .wp-block-group.is-vertical {
    gap: 0.5em !important;
  }

  /* ── Mobile: Unified /post-all ↔ /category spacing ── */

  /* Mobile: /post-all container padding-top */
  body.page-id-77 .entry-content > .nfd-container {
    padding-top: 20px !important;
  }

  /* Mobile: zero flex gap on /post-all (margins handle spacing) */
  body.page-id-77 .entry-content .nfd-container > .wp-block-group.is-vertical {
    gap: 0px !important;
  }

  /* Mobile: filter group (both pages) */
  body.page-id-77 .wp-block-group.is-vertical:has(.wp-block-buttons),
  body.archive .wp-block-group.is-vertical:has(.wp-block-buttons) {
    gap: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 14px !important;
  }

  /* Mobile: 카테고리 label → chips spacing (block layout, margin not gap) */
  body.page-id-77 .wp-block-group.has-global-padding:has(.wp-block-buttons) > p,
  body.archive .wp-block-group.has-global-padding:has(.wp-block-buttons) > p {
    margin-bottom: 12px !important;
  }

  /* Mobile: chip button gaps (both pages) */
  body.page-id-77 .wp-block-group.is-vertical:has(.wp-block-buttons) .wp-block-buttons,
  body.archive .wp-block-group.is-vertical:has(.wp-block-buttons) .wp-block-buttons {
    gap: 10px !important;
    margin-top: 0 !important;
  }

  /* Mobile: /post-all query block margin */
  body.page-id-77 .entry-content .nfd-container > .wp-block-group.is-vertical > .wp-block-query {
    margin-top: 8px !important;
  }

  /* Mobile: /category query block + title */
  body.archive .wp-block-query {
    margin-top: 0 !important;
  }
  body.archive h1.wp-block-query-title {
    margin-top: 0 !important;
    margin-bottom: 12px !important;  /* breathing room before cards on mobile */
  }

  /* Mobile: hide spacer on /category */
  body.archive .wp-block-query > .wp-block-spacer {
    display: none !important;
  }

  /* Mobile: card grid margin (both pages) */
  body.archive .wp-block-post-template {
    margin-top: 0 !important;
  }

  .wp-block-spacer {
    height: 16px !important;
    min-height: 16px !important;
  }

  /* ── Mobile card stack section layout — sticky title ── */
  .mp-section-title {
    padding: 0.75rem 0 !important;
    margin-bottom: 0.5rem !important;
    padding-bottom: 1rem !important;
  }

  .mp-section-title h2 {
    font-size: 1.4rem !important;
  }

  .mp-section-title p {
    font-size: 0.85rem !important;
  }

  /* Mobile: /post hero columns → stack vertically */
  body.page-id-27 .entry-content .wp-block-columns:first-of-type {
    flex-direction: column !important;
  }

  /* (reserved) */

  /* Mobile: listing pages padding */
  body.page-id-77 .entry-content > .nfd-container,
  body.archive:not(.single) main,
  body.page-id-590 main {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

}

@media (max-width: 480px) {
  :root {
    --mp-radius: 8px;
  }

  .wp-block-post-template:has(> li.wp-block-post > figure.wp-block-post-featured-image) {
    grid-template-columns: 1fr !important;
    gap: 1.2em !important;
  }

  .mp-glass-wrap {
    padding: 1rem 20px 1.2rem 20px !important;
    border-radius: var(--mp-radius, 12px) !important;
    margin: 1rem auto 1.5rem auto !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
  }

  body.single .entry-content,
  body.single main {
    padding: 0 !important;
  }

  body.single .entry-content h1 {
    font-size: 1.6rem !important;
  }

  body.single .entry-content h2 {
    font-size: 1.3rem !important;
  }

  body.single .entry-content h3 {
    font-size: 1.1rem !important;
  }

  body.single .entry-content p {
    font-size: 15px !important;
    line-height: 1.7 !important;
  }

  h1.wp-block-query-title,
  h1.wp-block-post-title {
    font-size: 1.6rem !important;
  }

  li.wp-block-post:has(> figure.wp-block-post-featured-image):hover {
    /* transform removed */
  }

  li.wp-block-post > figure.wp-block-post-featured-image {
    height: 120px !important;
  }

  li.wp-block-post:has(> figure.wp-block-post-featured-image) h3,
  li.wp-block-post:has(> figure.wp-block-post-featured-image) h2 {
    font-size: 1.2rem !important;
    padding: 4px 12px 0 12px !important;
  }

  .mp-carousel__item {
    flex: 0 0 100% !important;
  }

  .mp-carousel__nav {
    width: 36px !important;
    height: 36px !important;
  }

  .mp-carousel__nav--prev {
    left: -40px !important;
  }

  .mp-carousel__nav--next {
    right: -40px !important;
  }

  li.wp-block-post:has(> .wp-block-cover) .wp-block-cover {
    min-height: 250px !important;
  }

  /* 480px: Single post — targeted children no extra padding */
  body.single main > .wp-block-group.is-layout-flex:has(.wp-block-post-terms),
  body.single main > .wp-block-group.is-layout-flex:has(.wp-block-post-date),
  body.single main > h1.wp-block-post-title,
  body.single main > .wp-block-post-excerpt,
  body.single main > figure.wp-block-post-featured-image {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 480px: Featured glow radius */
  .mp-featured-glow-wrap {
    border-radius: var(--mp-radius-lg, 16px) !important;
  }

  .mp-featured-glow-wrap::before {
    border-radius: calc(var(--mp-radius-lg, 16px) + 1px) !important;
  }

  .mp-featured-glow-wrap::after {
    border-radius: var(--mp-radius-lg, 16px) !important;
  }

  /* 480px: Flip card image even smaller */
  li.wp-block-post.mp-flip-enabled:not(.mp-flip-text-only) .mp-flip-front > figure {
    height: 110px !important;
    margin: 4px 4px 0 4px !important;
  }

  /* 480px: Tighter back face */
  li.wp-block-post.mp-flip-enabled .mp-flip-back {
    padding: 12px 10px !important;
  }

  .mp-card-back-content {
    gap: 10px !important;
  }

  .mp-card-back-title {
    font-size: 14px !important;
  }

  .mp-card-back-text {
    font-size: 11px !important;
    -webkit-line-clamp: 2 !important;
  }

  .mp-card-back-cta {
    font-size: 12px !important;
    padding: 6px 16px !important;
  }

}

/* ============================================================
   12. FEATURED CARD GLOW (rotating conic-gradient border)
   ============================================================ */

.mp-featured-glow-wrap {
  position: relative !important;
  border-radius: var(--mp-radius-lg, 20px) !important;
  isolation: isolate !important;
}

.mp-featured-glow-wrap::before,
.mp-featured-glow-wrap::after {
  content: '' !important;
  position: absolute !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Outer sharp glow border */
.mp-featured-glow-wrap::before {
  inset: -1.5px !important;
  border-radius: calc(var(--mp-radius-lg, 20px) + 1.5px) !important;
  background-image: conic-gradient(
    from var(--mp-glow-rotate, 0deg),
    rgba(100, 140, 255, 0.7),
    rgba(60, 103, 227, 0.5) 25%,
    transparent 40%,
    transparent 60%,
    rgba(60, 103, 227, 0.5) 75%,
    rgba(100, 140, 255, 0.7)
  ) !important;
  animation: mp-glow-spin 4s linear infinite !important;
}

/* Inner soft bloom */
.mp-featured-glow-wrap::after {
  inset: 1px !important;
  border-radius: calc(var(--mp-radius-lg, 20px) + 1px) !important;
  filter: blur(10px) !important;
  opacity: 0.7 !important;
  background-image: conic-gradient(
    from var(--mp-glow-rotate, 0deg),
    rgba(100, 140, 255, 0.3),
    rgba(60, 103, 227, 0.25) 25%,
    transparent 40%,
    transparent 60%,
    rgba(60, 103, 227, 0.25) 75%,
    rgba(100, 140, 255, 0.3)
  ) !important;
  animation: mp-glow-spin 4s linear infinite !important;
}

/* Card inside glow wrapper sits above the glow pseudo-elements */
.mp-featured-glow-wrap > li.wp-block-post {
  position: relative !important;
  z-index: 1 !important;
}

@keyframes mp-glow-spin {
  from { --mp-glow-rotate: 0deg; }
  to { --mp-glow-rotate: 360deg; }
}

/* ── CSS Custom Properties for button angle animations ── */
@property --mp-flip-btn-angle-1 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -75deg;
}
@property --mp-flip-btn-angle-2 {
  syntax: "<angle>";
  inherits: false;
  initial-value: -45deg;
}

/* ── GLOBAL card fixes (work BEFORE flip JS initializes) ──
   These target li.wp-block-post directly so they apply immediately
   on page load, regardless of whether the flip JS has run. */

/* 1) Remove border/stroke from ALL cards. User wants NO visible stroke.
   Uses border shorthand to override theme's 1px solid rgba(255,255,255,0.1). */
/* 1b) Override WordPress Additional CSS that globally hides ALL cards
   with opacity:0 !important. Cards should be VISIBLE by default.
   JS will hide below-fold cards individually via inline !important.
   This eliminates the 1-2s blank hero on page load. */
li.wp-block-post {
  border: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.35s cubic-bezier(0.22,1,0.36,1),
              transform 0.35s cubic-bezier(0.22,1,0.36,1) !important;
}
li.wp-block-post:hover {
  border: none !important;
}

/* 2) Figure positioning — keep relative for layout.
   Blue glass overlay REMOVED per user request. */
li.wp-block-post > figure,
.mp-flip-front > figure {
  position: relative !important;
}
li.wp-block-post > figure::before,
.mp-flip-front > figure::before {
  content: none !important;
}

/* ============================================================
   13. FLIP CARD — 21st.dev FlippingCard pattern
   li = stable hover target (perspective, NEVER rotates)
   .mp-flip-inner = rotates via CSS :hover on li
   .mp-flip-front / .mp-flip-back = backface-visibility:hidden
   :has(> X) selectors are patched at runtime by JS.
   NOTE: overflow:visible and border:none are set as INLINE styles
   in JS because inline !important beats all stylesheet specificity
   (needed to override theme's :has(> figure) overflow:hidden rules
   and remove visible stroke per user request).
   Glass texture (gradient + box-shadow) is on .mp-flip-front because
   theme :has(> figure) selectors break after DOM restructuring.
   ============================================================ */

/* (Border removal is handled by the global pre-flip rules above.) */

/* ── li = stable hover target with perspective ── */
li.wp-block-post.mp-flip-enabled {
  perspective: 1000px !important;
  position: relative !important;
  transform-style: flat !important;
  isolation: auto !important;
  /* Kill li's own diagonal gradient — back face provides its own bg. */
  background: transparent !important;
}
/* Kill ::after shine overlay — its 105deg diagonal gradient renders
   ON TOP of the flipped back face due to 3D stacking context separation
   (li::after is in li's context, back face is inside .mp-flip-inner's
   preserve-3d context, so z-index comparison doesn't cross boundaries). */
li.wp-block-post.mp-flip-enabled::after {
  display: none !important;
}

/* ── Text-only flip card: title font size ──
   When ALL cards in a template are text-only, the template-level
   :has(> li > figure) selector never matches, so the grid-context
   1.3rem rule at line ~1817 doesn't apply.
   This universal rule ensures 1.3rem regardless of template contents. */
li.wp-block-post.mp-flip-enabled.mp-flip-text-only h3,
li.wp-block-post.mp-flip-enabled.mp-flip-text-only h2,
li.wp-block-post.mp-flip-enabled.mp-flip-text-only .wp-block-post-title {
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding-top: 6px !important;
  text-decoration: none !important;
}

/* Text-only cards need enough height for back face content (title + excerpt + CTA).
   Image cards are naturally tall; text-only must match so back face elements
   are identical size. 240px is minimum to fit 18px title + 3-line excerpt + CTA. */
li.wp-block-post.mp-flip-enabled.mp-flip-text-only {
  min-height: 180px !important;
  border-radius: var(--mp-radius-lg) !important;
  /* flex so children stretch to fill min-height
     (height:100% on children won't resolve against min-height) */
  display: flex !important;
  flex-direction: column !important;
}
/* Inner must stretch to fill the flex li */
li.wp-block-post.mp-flip-enabled.mp-flip-text-only > .mp-flip-inner {
  flex: 1 1 0% !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Front must stretch to fill the flex inner */
li.wp-block-post.mp-flip-enabled.mp-flip-text-only .mp-flip-front {
  flex: 1 1 0% !important;
}

/* Only kill li-level backdrop-filter when flipped — Chrome renders
   3D-transformed children blurry inside a backdrop-filter context.
   All other hover effects (gradient, glow, ::after shine) are KEPT
   so they show through the glass back face.
   NOTE: Uses .mp-flipped class (set by JS) instead of :hover to
   prevent flickering caused by 3D-transform ↔ hover feedback loop. */
li.wp-block-post.mp-flip-enabled.mp-flipped {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Text-only flip cards: zero li padding so back face covers full card.
   Per-child padding is set via inline styles in JS (to beat
   fixHasSelectors specificity). */
li.wp-block-post.mp-flip-enabled.mp-flip-text-only {
  padding: 0 !important;
}

/* Override glow wrapper for 3D context */
.mp-featured-glow-wrap:has(.mp-flip-enabled) {
  perspective: 1000px !important;
  overflow: visible !important;
  isolation: auto !important;
}

/* ── Inner rotating container ── */
/* Reset padding/margin to prevent li > *:not(figure) rules from leaking */
.mp-flip-inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  border-radius: inherit !important;
  transform: rotateY(0deg);
  transform-style: preserve-3d !important;
  transition: transform 0.6s cubic-bezier(0.4, 0.0, 0.2, 1) !important;
  will-change: transform;
}

/* Flip via JS-managed class — prevents 3D-transform ↔ hover flicker.
   JS document-level mousemove checks getBoundingClientRect of the li
   (pure 2D) and toggles .mp-flipped. No CSS :hover used. */
li.wp-block-post.mp-flip-enabled.mp-flipped > .mp-flip-inner {
  transform: rotateY(180deg) !important;
}

/* ── Pointer-events isolation ──
   3D-transformed children must NOT participate in browser hit-testing.
   Without this, the back-face's 3D-projected polygon extends outside
   the li's 2D rectangle, causing mouseenter/mouseleave to flicker.
   Only the li itself (never transforms, stable 2D box) handles hover.
   Interactive elements (CTA, links) are re-enabled below. */
.mp-flip-inner,
.mp-flip-front,
.mp-flip-back {
  pointer-events: none !important;
}
.mp-card-back-cta,
.mp-flip-front a,
.mp-flip-front button {
  pointer-events: auto !important;
}

/* ── Front face ── */
.mp-flip-front {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  border-radius: inherit !important;
  overflow: hidden !important;
}

/* Glass texture on front face — applied here (not on li) because:
   1. Theme :has(> figure) selectors break after DOM restructuring
      (figure moves from li > figure to li > inner > front > figure)
   2. backdrop-filter on li causes Chrome blurry text in 3D children
   Enhanced glassmorphism: multi-layer shadows simulate light refraction,
   top edge highlight = glass bevel, inner glow = depth, gradient = tint. */
li.wp-block-post.mp-flip-enabled .mp-flip-front {
  /* CodePen glass: diagonal gradient white band */
  background: linear-gradient(
    -75deg,
    rgba(20,60,200,0.06),
    rgba(40,100,255,0.12),
    rgba(20,60,200,0.06)
  ) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.12),
    inset 0 -2px 2px rgba(255,255,255,0.06),
    inset 0 0 2px 4px rgba(255,255,255,0.02),
    0 4px 2px -2px rgba(0,0,0,0.25),
    0 8px 20px rgba(0,0,0,0.20) !important;
}

/* Image cards: inset figure so glass frame shows around the image.
   Without this, figure is flush to card edges and hides the glass border. */
li.wp-block-post.mp-flip-enabled:not(.mp-flip-text-only) .mp-flip-front > figure {
  margin: 8px 8px 0 8px !important;
  border-radius: calc(var(--mp-radius-lg) - 8px) !important;
  overflow: hidden !important;
  height: 192px !important; /* 200px original - 8px top margin */
}

/* (Glass overlay on images is handled by the global pre-flip rules above via ::before.) */

/* Re-apply li > *:not(figure) padding to flip-front children.
   Original rules target li direct children, which after flip is
   .mp-flip-inner. These rules replicate the original text padding
   on the correct elements inside .mp-flip-front.
   NOTE: For text-only cards, fixHasSelectors patches override these
   with higher specificity (pL:0 !important). JS sets inline padding
   on text-only children to beat that. */
.mp-flip-front > *:not(figure):not(.wp-block-cover) {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
.mp-flip-front > *:not(figure):not(.wp-block-cover):first-of-type {
  padding-top: 14px !important;
}
.mp-flip-front > :last-child {
  padding-bottom: 16px !important;
  margin-top: auto !important;
}

/* Text-only front face: zero padding here because JS sets inline
   padding on each child (to beat fixHasSelectors specificity).
   Without this override, server CSS adds 24px 16px → double offset. */
.mp-flip-text-only .mp-flip-front {
  padding: 0 !important;
  /* Top-align content; date pushed to bottom via margin-top:auto on :last-child */
  justify-content: flex-start !important;
}

/* Text-only: push date to bottom of stretched card */
.mp-flip-text-only .mp-flip-front > :last-child {
  margin-top: auto !important;
}

/* ── Override server's text-only back face shrink rules ──
   Server CSS (from previous session) has:
     .mp-flip-text-only .mp-card-back-content { gap: 8px !important }
     .mp-flip-text-only .mp-card-back-title { font-size: 1rem !important }
     .mp-flip-text-only .mp-card-back-text { font-size: 0.78rem !important; line-clamp: 2 }
   These must be overridden so ALL card back faces are identical.
   Same specificity + later position in cascade = wins. */
.mp-flip-text-only .mp-card-back-content {
  gap: 14px !important;
}
.mp-flip-text-only .mp-card-back-title {
  font-size: 18px !important;
}
.mp-flip-text-only .mp-card-back-text {
  font-size: 13.5px !important;
  -webkit-line-clamp: 3 !important;
}

/* HIGH-SPECIFICITY back face override for ALL flip cards.
   The base .mp-flip-back rule below is too low specificity and gets
   overridden by theme :has(> figure) selectors and li gradients.
   This rule uses body prefix to beat them all.
   Fully opaque background — no thumbnail bleed-through on image cards,
   no diagonal artifacts from li's 135deg gradient showing through. */
body.wp-theme-bluehost-blueprint li.wp-block-post.mp-flip-enabled .mp-flip-back {
  /* Opaque base + centered radial glow = glass depth without diagonals */
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0, 80, 255, 0.10), transparent 70%),
    rgb(8, 13, 30) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 40px rgba(0, 60, 255, 0.06),
    0 4px 24px rgba(0, 0, 0, 0.3) !important;
  padding: 24px 20px !important;
}

/* ── Back face — glass texture ── */
/* inset: 0 fills the card exactly. No -1px extension needed because
   border is removed (border:none inline by JS).
   IMPORTANT: These same values are repeated with higher specificity
   below for .mp-flip-text-only to guarantee identical back faces. */
.mp-flip-back {
  position: absolute !important;
  inset: 0 !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform: rotateY(180deg) !important;
  border-radius: inherit !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* Opaque base + centered radial glow = glass depth without diagonals */
  background:
    radial-gradient(ellipse at 50% 40%, rgba(0, 80, 255, 0.10), transparent 70%),
    rgb(8, 13, 30) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    inset 0 0 40px rgba(0, 60, 255, 0.06),
    0 4px 24px rgba(0, 0, 0, 0.3) !important;
  padding: 24px 20px !important;
  box-sizing: border-box !important;
  z-index: 10 !important;
}

/* ── Back face content — IDENTICAL for ALL card types ──
   ALL values use px (not rem) to ensure identical rendering
   regardless of parent font-size context. */
.mp-card-back-content {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  text-align: center !important;
  width: 100% !important;
}

.mp-card-back-title {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #fff !important;
  line-height: 1.3 !important;
  margin: 0 !important;
}

.mp-card-back-text {
  font-size: 13.5px !important;
  font-weight: 400 !important;
  color: rgba(255, 255, 255, 0.60) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ── CTA button — exact match to 구독하기 nfd-btn-xl (scaled down) ──
   Source: blog-design-system.css rules 214-218 on /post page.
   Uses @property --mp-flip-btn-angle-1/2 for animatable conic-gradient
   border rotation and shine gradient angle (same technique as 구독하기).
   HIGH SPECIFICITY: body.wp-theme-bluehost-blueprint prefix is required
   to beat the theme's generic .wp-block-button__link glass styles. */
body.wp-theme-bluehost-blueprint li.wp-block-post .mp-flip-back .mp-card-back-content .mp-card-back-cta {
  display: inline-block !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0.5em 1.5em !important;
  margin-top: 2px !important;
  background: linear-gradient(135deg, rgb(0, 80, 255), rgb(0, 112, 255)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
  border: none !important;
  text-decoration: none !important;
  cursor: pointer !important;
  letter-spacing: 0.01em !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(0, 0, 0, 0.20),
    0 0 20px rgba(0, 80, 255, 0.45),
    0 0 40px rgba(0, 47, 255, 0.15) !important;
  transition: 400ms cubic-bezier(0.25, 1, 0.5, 1) !important;
  pointer-events: auto !important;
  -webkit-font-smoothing: antialiased !important;
  flex-shrink: 0 !important;
}

/* Shine pseudo — inner light streak using var(--mp-flip-btn-angle-2)
   for animatable gradient angle (matches 구독하기 ::before exactly). */
body.wp-theme-bluehost-blueprint .mp-card-back-cta::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  background-image: linear-gradient(
    var(--mp-flip-btn-angle-2),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.25) 38%,
    rgba(200, 225, 255, 0.40) 48%,
    rgba(255, 255, 255, 0) 56%
  ) !important;
  background-size: 200% 200% !important;
  background-position: 0% 50% !important;
  mix-blend-mode: screen !important;
  pointer-events: none !important;
  z-index: 1 !important;
  transition: background-position 500ms cubic-bezier(0.25, 1, 0.5, 1),
    --mp-flip-btn-angle-2 500ms cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Border pseudo — conic gradient outline using var(--mp-flip-btn-angle-1)
   for animatable rotation (matches 구독하기 ::after exactly). */
body.wp-theme-bluehost-blueprint .mp-card-back-cta::after {
  content: '' !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: -1px !important;
  border-radius: inherit !important;
  padding: 1px !important;
  box-sizing: border-box !important;
  background:
    conic-gradient(
      from var(--mp-flip-btn-angle-1) at 50% 50%,
      rgba(120, 180, 255, 0.6),
      rgba(120, 180, 255, 0) 5% 40%,
      rgba(180, 220, 255, 0.7) 50%,
      rgba(120, 180, 255, 0) 60% 95%,
      rgba(120, 180, 255, 0.6)
    ),
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(120, 180, 255, 0.10)) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  pointer-events: none !important;
  transition: 400ms cubic-bezier(0.25, 1, 0.5, 1),
    --mp-flip-btn-angle-1 500ms !important;
}

/* Force CTA text color — beat global a/a:link/a:visited rules from theme.
   body.wp-theme-bluehost-blueprint prefix for max specificity. */
body.wp-theme-bluehost-blueprint li.wp-block-post .mp-card-back-cta,
body.wp-theme-bluehost-blueprint li.wp-block-post .mp-card-back-cta:link,
body.wp-theme-bluehost-blueprint li.wp-block-post .mp-card-back-cta:visited {
  color: #fff !important;
  text-decoration: none !important;
}

/* ── CTA :hover — matches 구독하기 nfd-btn-xl:hover exactly ── */
body.wp-theme-bluehost-blueprint li.wp-block-post .mp-card-back-cta:hover {
  transform: scale(0.975) !important;
  background: linear-gradient(135deg, rgb(10, 90, 255), rgb(20, 125, 255)) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.3),
    inset 0 -1px 2px rgba(0, 0, 0, 0.18),
    0 0 32px rgba(0, 80, 255, 0.6),
    0 0 70px rgba(0, 47, 255, 0.25) !important;
  color: #fff !important;
}

/* CTA hover pseudo-element animations */
.mp-card-back-cta:hover::before {
  background-position: 25% 50% !important;
}
.mp-card-back-cta:hover::after {
  --mp-flip-btn-angle-1: -125deg !important;
}

/* ── CTA :active — matches 구독하기 nfd-btn-xl:active exactly ── */
body.wp-theme-bluehost-blueprint li.wp-block-post .mp-card-back-cta:active {
  transform: scale(0.96) !important;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.45),
    inset 0 -1px 1px rgba(255, 255, 255, 0.1),
    0 1px 6px rgba(30, 80, 255, 0.3) !important;
}

/* CTA active pseudo-element animations */
.mp-card-back-cta:active::before {
  background-position: 50% 15% !important;
  --mp-flip-btn-angle-2: -15deg !important;
}
.mp-card-back-cta:active::after {
  --mp-flip-btn-angle-1: -75deg !important;
}

/* ── Hero card (cover): larger text ── */
li.wp-block-post.mp-flip-enabled:has(.wp-block-cover) .mp-card-back-title {
  font-size: 1.4rem !important;
}

li.wp-block-post.mp-flip-enabled:has(.wp-block-cover) .mp-card-back-text {
  font-size: 0.95rem !important;
  -webkit-line-clamp: 5 !important;
}

li.wp-block-post.mp-flip-enabled:has(.wp-block-cover) .mp-card-back-cta {
  padding: 0.6em 2em !important;
  font-size: 15px !important;
}

/* ============================================================
   14. ACCESSIBILITY & MOTION
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--mp-accent-4) !important;
  outline-offset: 2px !important;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--mp-accent-4) !important;
  outline-offset: 2px !important;
}

.skip-link {
  position: absolute !important;
  top: -40px !important;
  left: 0 !important;
  background: var(--mp-accent-4) !important;
  color: white !important;
  padding: 8px 16px !important;
  text-decoration: none !important;
  z-index: 1000 !important;
}

.skip-link:focus {
  top: 0 !important;
}

/* ============================================================
   SEARCH BLOCK — Glass texture matching theme design system
   Targets .wp-block-search on /post-all, /search pages
   ============================================================ */

/* Search form container — glass wrapper */
.wp-block-search {
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  max-width: 380px !important;
  margin: 0 !important;
}

/* Kill WP inner wrapper that creates the gap between input and button */
.wp-block-search__inside-wrapper {
  display: flex !important;
  gap: 0 !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Remove WP default label if present */
.wp-block-search__label {
  display: none !important;
}

/* Search input field — glass background */
.wp-block-search__input,
.wp-block-search .wp-block-search__input {
  background: linear-gradient(
    135deg,
    rgba(20, 60, 200, 0.06),
    rgba(40, 100, 255, 0.10),
    rgba(20, 60, 200, 0.06)
  ) !important;
  background-color: rgba(10, 14, 30, 0.60) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  border: 1px solid rgba(80, 140, 255, 0.15) !important;
  border-right: none !important;
  border-radius: 12px 0 0 12px !important;
  color: var(--mp-text, #e8eeff) !important;
  font-size: 14px !important;
  padding: 0.65em 1.2em !important;
  outline: none !important;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 -1px 1px rgba(255, 255, 255, 0.04),
    0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}

.wp-block-search__input::placeholder {
  color: rgba(200, 210, 235, 0.45) !important;
}

.wp-block-search__input:focus {
  border-color: rgba(80, 140, 255, 0.35) !important;
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.15),
    inset 0 -1px 1px rgba(255, 255, 255, 0.04),
    0 0 0 3px rgba(40, 100, 255, 0.12),
    0 2px 6px rgba(0, 0, 0, 0.15) !important;
}

/* Search submit button — glass accent */
.wp-block-search__button,
.wp-block-search .wp-block-search__button {
  background: linear-gradient(
    135deg,
    rgba(40, 100, 255, 0.25),
    rgba(60, 130, 255, 0.35),
    rgba(40, 100, 255, 0.25)
  ) !important;
  background-color: rgba(30, 70, 200, 0.40) !important;
  backdrop-filter: blur(16px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.3) !important;
  border: 1px solid rgba(80, 140, 255, 0.25) !important;
  border-left: none !important;
  border-radius: 0 12px 12px 0 !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 0.65em 1.4em !important;
  cursor: pointer !important;
  margin: 0 !important;  /* kill WP default margin-left:10px */
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.10),
    inset 0 -1px 1px rgba(0, 0, 0, 0.20),
    0 2px 6px rgba(0, 0, 0, 0.15) !important;
  transition: background 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.wp-block-search__button:hover {
  background: linear-gradient(
    135deg,
    rgba(50, 120, 255, 0.35),
    rgba(70, 150, 255, 0.45),
    rgba(50, 120, 255, 0.35)
  ) !important;
  background-color: rgba(40, 90, 220, 0.50) !important;
  border-color: rgba(100, 160, 255, 0.35) !important;
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.12),
    inset 0 -1px 1px rgba(0, 0, 0, 0.18),
    0 4px 12px rgba(30, 80, 220, 0.25) !important;
}

/* Search on mobile — full width, wider input */
@media (max-width: 768px) {
  .wp-block-search {
    max-width: 100% !important;
    width: 100% !important;
  }
  .wp-block-search__inside-wrapper {
    width: 100% !important;
  }
  .wp-block-search__input {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: calc(100vw - 32px) !important;
  }
  /* Search bar's direct wrapper — fill available width */
  .wp-block-group.is-layout-constrained:has(> form.wp-block-search) {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ============================================================
   BLOG DROPDOWN MENU — Glass texture dropdown under 블로그 nav
   ============================================================ */

/* Container: the li wrapping 블로그 needs relative positioning */
.mp-has-dropdown {
  position: relative !important;
}

/* Dropdown panel — clean rectangle, no arrow */
.mp-blog-dropdown {
  position: absolute !important;
  top: calc(100% + 16px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(6px) !important;
  min-width: 180px !important;
  padding: 10px 0 !important;
  border-radius: 12px !important;
  /* Glass texture — blue tint matching rest of design system */
  background: linear-gradient(
    135deg,
    rgba(20, 60, 200, 0.08),
    rgba(40, 100, 255, 0.14),
    rgba(20, 60, 200, 0.08)
  ) !important;
  background-color: rgba(10, 14, 30, 0.78) !important;
  backdrop-filter: blur(24px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
  border: 1px solid rgba(80, 140, 255, 0.15) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  /* Animation — start hidden */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition:
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 1000 !important;
  user-select: none !important;
}

/* Open state */
.mp-has-dropdown.mp-dropdown-open .mp-blog-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* Invisible bridge between nav item and dropdown (prevents gap mouseout) */
.mp-has-dropdown::after {
  content: '' !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 200px !important;
  height: 20px !important;
  opacity: 0 !important;
  display: none !important;
}
.mp-has-dropdown.mp-dropdown-open::after {
  display: block !important;
}

/* Dropdown items */
.mp-blog-dropdown a {
  display: block !important;
  padding: 9px 22px !important;
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  transition:
    background 0.18s ease,
    color 0.18s ease !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
}

.mp-blog-dropdown a:hover {
  background: rgba(40, 100, 255, 0.12) !important;
  color: #fff !important;
}

/* Active category highlight */
.mp-blog-dropdown a.mp-dropdown-active {
  color: var(--mp-accent, #4d8eff) !important;
  background: rgba(40, 100, 255, 0.08) !important;
}

/* Scrolled header pill — adjust dropdown position */
header.wp-block-template-part.scrolled .mp-blog-dropdown {
  border-radius: 12px !important;
}

/* Mobile: show sub-menu inline inside hamburger menu */
@media (max-width: 768px) {
  /* Hide desktop hover dropdown */
  .mp-blog-dropdown {
    display: none !important;
  }
  .mp-has-dropdown::after {
    display: none !important;
  }

  /* Mobile sub-menu container — indented under 블로그, no extra borders */
  .mp-mobile-submenu {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 4px 0 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    border: none !important;
  }

  /* Remove border from 블로그 nav item when submenu follows */
  .wp-block-navigation-item.mp-has-dropdown,
  .wp-block-navigation-item.mp-has-dropdown a {
    border-bottom: none !important;
    border: none !important;
  }

  /* Sub-menu links — smaller, lighter, indented to show hierarchy.
     Uses high specificity + !important to override initMobileNavFix inline styles. */
  .wp-block-navigation__responsive-container .mp-mobile-submenu a,
  .mp-mobile-submenu a {
    display: block !important;
    padding: 10px 0 10px 24px !important;
    color: rgba(255, 255, 255, 0.45) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    border: none !important;
    border-bottom: none !important;
    background: transparent !important;
    text-align: left !important;
    width: 100% !important;
  }

  .wp-block-navigation__responsive-container .mp-mobile-submenu a:hover,
  .wp-block-navigation__responsive-container .mp-mobile-submenu a.mp-dropdown-active,
  .mp-mobile-submenu a:hover,
  .mp-mobile-submenu a.mp-dropdown-active {
    color: var(--mp-accent, #4d8eff) !important;
  }
}

/* Desktop: hide mobile submenu */
@media (min-width: 769px) {
  .mp-mobile-submenu {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  li.wp-block-post:has(> figure.wp-block-post-featured-image):hover {
    box-shadow: 0 4px 12px rgba(0, 128, 255, 0.15) !important;
  }

  body.single .entry-content a::after {
    display: none !important;
  }

  .mp-blog-dropdown {
    transition: none !important;
  }
}

/* ============================================================
   v7.2 ADDITIONS
   ============================================================ */

/* ── Post count — same style as parent title, just appended ── */
.mp-post-count {
  /* inherits font-size, font-weight, color, line-height from parent heading */
  margin-left: 0.3em !important;
}

/* ── Search keyword highlight ── */
.mp-search-keyword {
  color: var(--mp-accent-4, #60c0ff) !important;
  font-weight: 800 !important;
}
/* Search page: fix H1 alignment after JS replaces "Search" text */
body.page-id-590 h1.wp-block-post-title {
  text-align: center !important;
  font-style: normal !important;
}

/* ── Single post: blockquote — reduce padding, remove italic ── */
body.single .entry-content blockquote,
body.single .entry-content .wp-block-quote {
  font-style: normal !important;
  padding-top: 0.6em !important;
  padding-bottom: 0.6em !important;
  margin: 1.2em 0 !important;
}

/* ── Single post: excerpt → body content gap ── */
body.single main > .wp-block-post-excerpt {
  margin-bottom: 2em !important;
}
body.single main > figure.wp-block-post-featured-image {
  margin-top: 0.5em !important;
}

/* ── Single post: category separator dot vertical center ── */
body.single .wp-block-post-terms {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
body.single .wp-block-post-terms__separator {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

/* ── Single post: table responsive ──
   .wp-block-table (figure wrapper) is the scroll container.
   Table inside keeps its natural width and scrolls horizontally
   on narrow screens. No forced min-width — let content decide. */
body.single .entry-content .wp-block-table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
}
body.single .entry-content table {
  display: table !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}
/* Tables without .wp-block-table wrapper (classic HTML tables) —
   make the table itself the scroll container */
body.single .entry-content > table {
  display: block !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
}

/* ── Card: excerpt styling — smaller, muted color (universal + per card type) ── */

/* Universal: ALL card excerpts get small muted treatment */
li.wp-block-post .wp-block-post-excerpt {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: rgba(200, 210, 230, 0.55) !important;
  margin-top: 6px !important;
  margin-bottom: 2px !important;
  padding: 0 16px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}
/* Excerpt <p>: NO padding — container handles it */
li.wp-block-post .wp-block-post-excerpt p {
  font-size: 12.5px !important;
  line-height: 1.5 !important;
  color: rgba(200, 210, 230, 0.55) !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Hide "read more" link in excerpts */
li.wp-block-post .wp-block-post-excerpt__more-link {
  display: none !important;
}

/* Text-only cards — slightly smaller */
li.wp-block-post.mp-flip-text-only .wp-block-post-excerpt,
li.wp-block-post.mp-flip-text-only .wp-block-post-excerpt p {
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: rgba(200, 210, 230, 0.5) !important;
  margin-top: 4px !important;
}

/* Cover cards — white text, 2-line clamp */
li.wp-block-post:has(> .wp-block-cover) .wp-block-post-excerpt,
li.wp-block-post:has(> .wp-block-cover) .wp-block-post-excerpt p {
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  -webkit-line-clamp: 2 !important;
}

/* ── Card: JS-injected tag hashtags (.mp-card-tags) ── */
.mp-card-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px 8px !important;
  margin-top: 6px !important;
  padding: 0 !important;
  animation: mp-tag-fade 0.25s ease both !important;
}
@keyframes mp-tag-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.mp-card-tags span {
  font-size: 11px !important;
  color: rgba(100, 160, 255, 0.55) !important;
  line-height: 1.4 !important;
}

/* ── Card: prevent mid-word line break in titles ── */
li.wp-block-post h3.wp-block-post-title,
li.wp-block-post h2.wp-block-post-title,
li.wp-block-post .wp-block-post-title,
li.wp-block-post h3,
li.wp-block-post h2,
li.wp-block-post h3 a,
li.wp-block-post h2 a,
li.wp-block-post .wp-block-post-title a {
  word-break: keep-all !important;
  overflow-wrap: break-word !important;
  text-wrap: auto !important;
  min-width: 0 !important;
  display: block !important;
}
/* Flex children need min-width:0 for word-break to work — ALL levels */
li.wp-block-post,
li.wp-block-post .mp-flip-front,
li.wp-block-post .mp-flip-inner,
li.wp-block-post .wp-block-group,
li.wp-block-post .wp-block-column,
li.wp-block-post > div {
  min-width: 0 !important;
}

/* ── /post hero: left column matches right column height ── */
body.page-id-27 .entry-content .wp-block-columns:first-of-type {
  align-items: stretch !important;
}
/* WordPress sets align-self:center via .is-vertically-aligned-center — override to stretch */
body.page-id-27 .entry-content .wp-block-columns:first-of-type > .wp-block-column.is-vertically-aligned-center {
  align-self: stretch !important;
  display: flex !important;
  flex-direction: column !important;
}
body.page-id-27 .entry-content .wp-block-columns:first-of-type > .wp-block-column:first-child .wp-block-query {
  flex: 1 !important;
}
body.page-id-27 .entry-content .wp-block-columns:first-of-type > .wp-block-column:first-child .wp-block-post-template {
  height: 100% !important;
}
body.page-id-27 .entry-content .wp-block-columns:first-of-type > .wp-block-column:first-child li.wp-block-post {
  height: 100% !important;
}

/* (section row-reverse handled by .mp-section-row above) */

/* ── /category/ archive: match /post-all/ grid layout ── */
body.archive .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 2em !important;
  padding: 0 !important;
  align-items: stretch !important;
}
@media (max-width: 781px) {
  body.archive .wp-block-post-template {
    grid-template-columns: 1fr !important;
  }
}
/* Category archive cards: override category-card 2-column layout to be vertical like grid cards */
body.archive li.wp-block-post:has(> .wp-block-columns) .wp-block-columns,
body.archive li.wp-block-post:has(.wp-block-columns) .wp-block-columns {
  flex-direction: column !important;
}
body.archive li.wp-block-post:has(> .wp-block-columns) .wp-block-column:has(figure),
body.archive li.wp-block-post:has(.wp-block-columns) .wp-block-column:has(figure) {
  flex-basis: auto !important;
  max-width: 100% !important;
  width: 100% !important;
}
body.archive li.wp-block-post:has(> .wp-block-columns) .wp-block-column:not(:has(figure)),
body.archive li.wp-block-post:has(.wp-block-columns) .wp-block-column:not(:has(figure)) {
  flex-basis: auto !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 16px !important;
}
/* Archive category card sizes */
body.archive li.wp-block-post {
  min-height: auto !important;
}

/* ── /post-all/ and /category/ spacing consistency ── */
body.archive .wp-block-query-title {
  margin-bottom: 4px !important;
}
body.archive .wp-block-term-description {
  margin-top: 8px !important;
  margin-bottom: 12px !important;
}

/* (card tags are now JS-injected .mp-card-tags — no single post override needed) */

/* ============================================================
   STICKY TOC (Table of Contents) — Single post sidebar
   ============================================================ */

/* Desktop: fixed sidebar on the right */
.mp-sticky-toc {
  position: fixed !important;
  top: 100px !important;
  right: 20px !important;
  width: 240px !important;
  max-height: calc(100vh - 140px) !important;
  overflow-y: auto !important;
  z-index: 900 !important;
  background: linear-gradient(
    135deg,
    rgba(20, 60, 200, 0.06),
    rgba(40, 100, 255, 0.10),
    rgba(20, 60, 200, 0.06)
  ) !important;
  background-color: rgba(10, 14, 30, 0.85) !important;
  backdrop-filter: blur(20px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.3) !important;
  border: 1px solid rgba(80, 140, 255, 0.12) !important;
  border-radius: 14px !important;
  padding: 20px 16px 16px !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Scrollbar styling for TOC */
.mp-sticky-toc::-webkit-scrollbar {
  width: 3px !important;
}
.mp-sticky-toc::-webkit-scrollbar-track {
  background: transparent !important;
}
.mp-sticky-toc::-webkit-scrollbar-thumb {
  background: rgba(80, 140, 255, 0.2) !important;
  border-radius: 3px !important;
}

.mp-toc-title {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--mp-accent-5, #3399FF) !important;
  margin-bottom: 6px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

.mp-toc-desc {
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: rgba(200, 210, 230, 0.45) !important;
  margin-bottom: 12px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(80, 140, 255, 0.15) !important;
}

.mp-toc-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.mp-toc-list li {
  margin: 0 !important;
  padding: 0 !important;
}

.mp-toc-list a {
  display: block !important;
  padding: 7px 10px 7px 12px !important;
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: rgba(200, 210, 230, 0.65) !important;
  text-decoration: none !important;
  border-left: 2px solid transparent !important;
  border-image: none !important;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease !important;
  border-radius: 0 6px 6px 0 !important;
  word-break: keep-all !important;
}

.mp-toc-list a:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  background: rgba(40, 100, 255, 0.08) !important;
}

.mp-toc-list a.mp-toc-active {
  color: var(--mp-accent-5, #3399FF) !important;
  border-left: 2px solid var(--mp-accent-5, #3399FF) !important;
  border-image: none !important;
  background: rgba(40, 100, 255, 0.06) !important;
  font-weight: 600 !important;
}

/* TOC mobile toggle button */
.mp-toc-toggle {
  display: none !important;
}

/* ============================================================
   SHARE BUTTON — Bottom of post + inside TOC
   ============================================================ */

.mp-share-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 18px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  background: rgba(40, 100, 255, 0.1) !important;
  border: 1px solid rgba(80, 140, 255, 0.2) !important;
  border-radius: 10px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  font-family: var(--mp-font) !important;
  white-space: nowrap !important;
  -webkit-text-fill-color: rgba(255, 255, 255, 0.8) !important;
}

.mp-share-btn:hover {
  background: rgba(40, 100, 255, 0.18) !important;
  border-color: rgba(80, 140, 255, 0.35) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  transform: translateY(-1px) !important;
}

.mp-share-btn svg {
  flex-shrink: 0 !important;
  color: var(--mp-accent-5, #3399FF) !important;
}

/* Share button inside TOC — full width, top margin */
.mp-sticky-toc .mp-share-btn {
  width: 100% !important;
  justify-content: center !important;
  margin-top: 14px !important;
  padding: 9px 14px !important;
  font-size: 12px !important;
}

/* Share button at bottom of post */
.mp-share-bottom {
  display: flex !important;
  justify-content: center !important;
  margin-top: 3em !important;
  margin-bottom: 2em !important;
  padding-top: 2em !important;
  border-top: 1px solid var(--mp-border, rgba(255,255,255,0.08)) !important;
}

.mp-share-btn-bottom {
  padding: 12px 28px !important;
  font-size: 14px !important;
}

/* ============================================================
   TOAST NOTIFICATION
   ============================================================ */

.mp-toast {
  position: fixed !important;
  bottom: 30px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(20px) !important;
  z-index: 99999 !important;
  padding: 14px 28px !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: linear-gradient(135deg, rgba(0, 47, 255, 0.85), rgba(0, 80, 255, 0.9)) !important;
  background-color: rgba(10, 20, 60, 0.95) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(80, 140, 255, 0.25) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.35s ease, transform 0.35s ease !important;
  max-width: 90vw !important;
  text-align: center !important;
  font-family: var(--mp-font) !important;
  white-space: pre-line !important;
}

.mp-toast.mp-toast-show {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

.mp-toast.mp-toast-hide {
  opacity: 0 !important;
  transform: translateX(-50%) translateY(20px) !important;
}

/* ============================================================
   RELATED POSTS — Match homepage card style
   ============================================================ */

.relpost-thumb-wrapper,
.relpost-thumb-container {
  margin-top: 3em !important;
  padding: 0 !important;
}

/* Hide plugin's clear:both spacer divs */
.relpost-thumb-container > div[style*="clear"] {
  display: none !important;
}

.relpost-thumb-container h3 {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--mp-accent-5, #3399FF) !important;
  margin: 0 0 16px 0 !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid rgba(80, 140, 255, 0.15) !important;
}

.relpost-block-container {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.2em !important;
  width: 100% !important;
}

/* Card — glass gradient matching blog grid cards */
.relpost-block-single {
  background: linear-gradient(
    -75deg,
    rgba(20,60,200,0.06),
    rgba(40,100,255,0.12),
    rgba(20,60,200,0.06)
  ) !important;
  border: none !important;
  border-radius: var(--mp-radius-lg, 16px) !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
  cursor: pointer !important;
  width: auto !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.12),
    inset 0 -2px 2px rgba(255,255,255,0.06),
    inset 0 0 2px 4px rgba(255,255,255,0.02),
    0 4px 2px -2px rgba(0,0,0,0.25),
    0 8px 20px rgba(0,0,0,0.20) !important;
}

/* Conic-gradient border — matching blog grid cards */
.relpost-block-single::after {
  content: '' !important;
  position: absolute !important;
  z-index: 1 !important;
  inset: -1px !important;
  border-radius: inherit !important;
  padding: 1px !important;
  box-sizing: border-box !important;
  background:
    conic-gradient(
      from -75deg at 50% 50%,
      rgba(255,255,255,0.30),
      rgba(255,255,255,0.0) 5% 40%,
      rgba(255,255,255,0.30) 50%,
      rgba(255,255,255,0.0) 60% 95%,
      rgba(255,255,255,0.30)
    ),
    linear-gradient(180deg, rgba(255,255,255,0.15), rgba(255,255,255,0.05)) !important;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
}

.relpost-block-single:hover {
  transform: translateY(-4px) !important;
  box-shadow:
    inset 0 2px 2px rgba(0,0,0,0.10),
    inset 0 -2px 2px rgba(255,255,255,0.08),
    inset 0 0 1px 2px rgba(255,255,255,0.04),
    0 3px 1px -1px rgba(0,0,0,0.30),
    0 12px 28px rgba(0,0,0,0.25) !important;
}

/* Kill link underline pseudo-elements on related post card links */
.relpost-block-container a::before,
.relpost-block-container a::after {
  display: none !important;
  content: none !important;
}
.relpost-block-container a {
  text-decoration: none !important;
}

/* Image flush with card top — no inset padding */
.relpost-custom-block-single {
  padding: 0 !important;
}

/* Thumbnail — flush top, 16:9 ratio */
.relpost-block-single-image,
.relpost-block-single-image.rpt-lazyload,
.relpost-block-single-image[style] {
  width: 100% !important;
  height: 0 !important;
  padding-bottom: 56.25% !important; /* 16:9 */
  aspect-ratio: auto !important;
  border-radius: 16px !important;
  margin-bottom: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Title text — left-aligned matching blog cards */
.relpost-block-single-text,
.relpost-block-single-text[style] {
  padding: 12px 14px 4px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  font-family: var(--mp-font) !important;
  line-height: 1.45 !important;
  color: rgba(240, 244, 255, 0.9) !important;
  height: auto !important;
  max-height: 4.35em !important; /* 3 lines fallback */
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: left !important;
}

/* Excerpt — left-aligned, muted color */
a .relpost-block-excerpt,
.relpost-block-excerpt {
  padding: 6px 14px 14px !important;
  font-size: 11.5px !important;
  font-weight: 400 !important;
  font-family: var(--mp-font) !important;
  line-height: 1.55 !important;
  color: rgba(200, 210, 230, 0.5) !important;
  -webkit-text-fill-color: rgba(200, 210, 230, 0.5) !important;
  text-align: left !important;
}

.relpost-block-single-text h2,
.relpost-block-single-text .relpost-title-text {
  font-size: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline !important;
}

@media (max-width: 640px) {
  .relpost-block-container {
    grid-template-columns: 1fr !important;
    gap: 0.8em !important;
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .relpost-block-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   POST NAVIGATION — Previous / Next post buttons
   ============================================================ */

.mp-post-nav {
  display: flex !important;
  gap: 12px !important;
  margin-top: 2em !important;
  margin-bottom: 2em !important;
}

.mp-post-nav a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 16px 18px !important;
  background: rgba(8, 12, 28, 0.5) !important;
  border: 1px solid var(--mp-border-2, rgba(80, 140, 255, 0.10)) !important;
  border-radius: var(--mp-radius-lg, 16px) !important;
  text-decoration: none !important;
  transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease !important;
  overflow: hidden !important;
}

.mp-post-nav a:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(80, 140, 255, 0.25) !important;
  background: rgba(20, 30, 60, 0.5) !important;
}

.mp-post-nav-label {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--mp-accent-5, #3399FF) !important;
}

.mp-post-nav-title {
  font-size: 13.5px !important;
  font-weight: 500 !important;
  line-height: 1.45 !important;
  color: rgba(240, 244, 255, 0.85) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.mp-post-nav a.mp-post-nav-next {
  text-align: right !important;
}

@media (max-width: 640px) {
  .mp-post-nav {
    flex-direction: column !important;
  }
}

/* ============================================================
   RESPONSIVE — TOC + Share
   ============================================================ */

/* Large screens: TOC visible as sidebar */
@media (min-width: 1200px) {
  .mp-sticky-toc {
    display: block !important;
  }
  .mp-toc-toggle {
    display: none !important;
  }
}

/* Medium screens: hide TOC, show toggle button */
@media (max-width: 1199px) {
  .mp-sticky-toc {
    position: fixed !important;
    top: auto !important;
    bottom: 70px !important;
    right: 16px !important;
    left: 16px !important;
    width: auto !important;
    max-height: 60vh !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(20px) !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
  }

  .mp-sticky-toc.mp-toc-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  .mp-toc-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    position: fixed !important;
    bottom: 16px !important;
    right: 16px !important;
    width: auto !important;
    height: 44px !important;
    z-index: 901 !important;
    background: rgba(10, 14, 30, 0.9) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border: 1px solid rgba(80, 140, 255, 0.2) !important;
    border-radius: 22px !important;
    color: var(--mp-accent-5, #3399FF) !important;
    cursor: pointer !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transition: background 0.2s ease, transform 0.2s ease !important;
    padding: 0 16px !important;
    font-family: var(--mp-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
  }

  .mp-toc-toggle span {
    color: var(--mp-accent-5, #3399FF) !important;
    -webkit-text-fill-color: var(--mp-accent-5, #3399FF) !important;
  }

  .mp-toc-toggle:hover {
    background: rgba(40, 100, 255, 0.15) !important;
  }

  .mp-toc-toggle.mp-toc-toggle-active {
    background: rgba(40, 100, 255, 0.2) !important;
    border-color: rgba(80, 140, 255, 0.35) !important;
  }

  .mp-toc-toggle svg {
    color: var(--mp-accent-5, #3399FF) !important;
  }
}

/* Mobile share button adjustments */
@media (max-width: 600px) {
  .mp-share-btn-bottom {
    font-size: 13px !important;
    padding: 11px 20px !important;
  }
  .mp-toast {
    font-size: 13px !important;
    padding: 12px 20px !important;
    bottom: 20px !important;
  }
}

/* ============================================================
   TOC — Prev / Next post navigation
   ============================================================ */
.mp-toc-post-nav {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mp-toc-nav-prev,
.mp-toc-nav-next {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mp-toc-nav-prev:hover,
.mp-toc-nav-next:hover {
  color: rgba(255,255,255,0.9);
}
.mp-toc-nav-next {
  margin-left: auto;
}

/* ============================================================
   Category + Search section: unify spacing across /post & /post-all
   ============================================================ */
/* "카테고리" heading — 12px bottom margin (matches /post-all) */
.has-global-padding.is-layout-constrained:has(.is-content-justification-space-between .wp-block-search) > p:first-child {
  margin-bottom: 12px !important;
}
/* Category section container — 20px bottom margin (matches /post-all) */
.has-global-padding.is-layout-constrained:has(.is-content-justification-space-between .wp-block-search) {
  margin-bottom: 20px !important;
}

/* ============================================================
   Mobile: Search bar above category buttons
   ============================================================ */
@media (max-width: 768px) {
  /* The flex row containing category buttons + search */
  .is-content-justification-space-between.is-nowrap.is-layout-flex:has(.wp-block-search) {
    flex-direction: column-reverse !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
  }
  /* Search container takes full width */
  .is-content-justification-space-between.is-nowrap.is-layout-flex:has(.wp-block-search) > .has-global-padding:has(.wp-block-search) {
    width: 100% !important;
    flex-basis: 100% !important;
  }
  /* Category buttons group takes full width */
  .is-content-justification-space-between.is-nowrap.is-layout-flex:has(.wp-block-search) > .is-layout-flex:has(.wp-block-buttons) {
    width: 100% !important;
    flex-basis: 100% !important;
  }
}

/* ============================================================
   Hero section: make entire post cards clickable (stretched link)
   ============================================================ */
/* The title link stretches over the whole card */
body.page-id-27 .wp-block-columns li.wp-block-post .wp-block-post-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* Card container is the positioning context (already position:relative via WP) */
body.page-id-27 .wp-block-columns li.wp-block-post {
  cursor: pointer;
}
/* Keep category tag links clickable above the stretched overlay */
body.page-id-27 .wp-block-columns li.wp-block-post .taxonomy-category {
  position: relative;
  z-index: 2;
}
/* Keep any other interactive elements above the overlay */
body.page-id-27 .wp-block-columns li.wp-block-post .wp-block-post-date,
body.page-id-27 .wp-block-columns li.wp-block-post .wp-block-post-terms {
  position: relative;
  z-index: 2;
}

/* ============================================================
   /about (page-id-29) — Full blog design system
   ============================================================ */

/* ── 1. Layout: container padding (match /post-all) ── */
body.page-id-29 .entry-content > .nfd-container {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* ── 2. Hero section ── */
body.page-id-29 .nfd-wb-features__features-23 {
  padding-top: 60px !important;
  padding-bottom: 40px !important;
}

/* Hero heading — gradient text */
body.page-id-29 .nfd-wb-features__features-23 h3 {
  background: linear-gradient(135deg, #ffffff 0%, var(--mp-accent-5, #3399ff) 60%, var(--mp-accent-4, #6ec6ff) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: clamp(1.8rem, 4vw, 2.4rem) !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

/* Hero subtitle */
body.page-id-29 .nfd-wb-features__features-23 .nfd-text-balance {
  font-size: clamp(0.95rem, 1.8vw, 1.1rem) !important;
  line-height: 1.75 !important;
  color: rgba(240, 244, 255, 0.7) !important;
}

/* Hero CTA button — glass pill style */
body.page-id-29 .nfd-wb-features__features-23 .wp-block-button__link {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 999px !important;
  color: var(--mp-accent-5, #3399ff) !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
  transition: all 0.3s ease !important;
}
body.page-id-29 .nfd-wb-features__features-23 .wp-block-button__link:hover {
  background: rgba(0, 80, 255, 0.15) !important;
  border-color: rgba(0, 80, 255, 0.4) !important;
  box-shadow: 0 0 20px rgba(0, 80, 255, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* Hero image — subtle glow */
body.page-id-29 .nfd-wb-features__features-23 .wp-block-image img {
  border-radius: 16px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 60px rgba(0, 80, 255, 0.06) !important;
  transition: box-shadow 0.4s ease !important;
}
body.page-id-29 .nfd-wb-features__features-23 .wp-block-image img:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 80px rgba(0, 80, 255, 0.12) !important;
}

/* ── 3. Main content section ── */
/* Section heading — gradient */
body.page-id-29 .nfd-wb-text__text-24 h2 {
  background: linear-gradient(135deg, #ffffff 0%, var(--mp-accent-5, #3399ff) 50%, var(--mp-accent-4, #6ec6ff) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.35 !important;
}

/* Subheadings (간단 소개, 지금까지 이런 일을, 주로 다루는 주제, etc.) */
body.page-id-29 .nfd-wb-text__text-24 .nfd-text-md {
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  color: var(--mp-accent-5, #3399ff) !important;
  letter-spacing: 0.01em !important;
  margin-bottom: 8px !important;
  position: relative;
  padding-left: 12px !important;
}
/* Accent bar before subheadings */
body.page-id-29 .nfd-wb-text__text-24 .nfd-text-md::before {
  content: "" !important;
  position: absolute;
  left: 0;
  top: 0.15em;
  bottom: 0.15em;
  width: 3px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--mp-accent-4, #6ec6ff), var(--mp-accent-5, #3399ff)) !important;
}

/* Body text — improved readability */
body.page-id-29 .nfd-wb-text__text-24 .nfd-text-faded {
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: rgba(240, 244, 255, 0.65) !important;
  letter-spacing: 0.01em !important;
}

/* ── 4. Experience list — glass cards ── */
body.page-id-29 .nfd-wb-text__text-24 ul {
  list-style: none !important;
  padding-left: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
body.page-id-29 .nfd-wb-text__text-24 li {
  background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: rgba(240, 244, 255, 0.7) !important;
  transition: all 0.3s ease !important;
}
body.page-id-29 .nfd-wb-text__text-24 li:hover {
  background: linear-gradient(135deg, rgba(255,255,255,0.07) 0%, rgba(0,80,255,0.04) 100%) !important;
  border-color: rgba(0, 80, 255, 0.2) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2), 0 0 30px rgba(0, 80, 255, 0.06) !important;
  transform: translateY(-2px) !important;
}
/* Experience list — company name links */
body.page-id-29 .nfd-wb-text__text-24 li a {
  color: var(--mp-accent-5, #3399ff) !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}
body.page-id-29 .nfd-wb-text__text-24 li a::after {
  content: "" !important;
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--mp-accent-4, #6ec6ff), var(--mp-accent-5, #3399ff)) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s ease !important;
}
body.page-id-29 .nfd-wb-text__text-24 li a:hover::after {
  transform: scaleX(1) !important;
}
body.page-id-29 .nfd-wb-text__text-24 li a:hover {
  color: var(--mp-accent-4, #6ec6ff) !important;
  text-shadow: 0 0 12px rgba(0, 80, 255, 0.3) !important;
}

/* ── 5. Section divider between hero and main ── */
body.page-id-29 .nfd-wb-text__text-24::before {
  content: "" !important;
  display: block;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, var(--mp-accent-4, #6ec6ff), var(--mp-accent-5, #3399ff)) !important;
  margin: 0 auto 40px auto;
  border-radius: 1px;
}

/* ── 6. Content links (non-list) — hover glow ── */
body.page-id-29 .nfd-wb-text__text-24 p a:not(.wp-block-button__link) {
  color: var(--mp-accent-5, #3399ff) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(51, 153, 255, 0.3) !important;
  transition: all 0.2s ease !important;
}
body.page-id-29 .nfd-wb-text__text-24 p a:not(.wp-block-button__link):hover {
  border-bottom-color: var(--mp-accent-5, #3399ff) !important;
  text-shadow: 0 0 12px rgba(0, 80, 255, 0.3) !important;
}

/* ── 7. Right column — topics & cat name ── */
body.page-id-29 .nfd-wb-text__text-24 .wp-block-column:last-child .nfd-text-faded {
  color: rgba(240, 244, 255, 0.55) !important;
  line-height: 1.9 !important;
}

/* Image in main content — rounded + shadow */
body.page-id-29 .nfd-wb-text__text-24 .wp-block-image img {
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
}

/* ── 8. Mobile responsive ── */
@media (max-width: 768px) {
  body.page-id-29 .entry-content > .nfd-container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body.page-id-29 .nfd-wb-features__features-23 {
    padding-top: 32px !important;
    padding-bottom: 24px !important;
  }
  body.page-id-29 .nfd-wb-text__text-24 li {
    padding: 12px 14px !important;
    font-size: 0.88rem !important;
  }
  body.page-id-29 .nfd-wb-text__text-24 .wp-block-columns {
    flex-direction: column !important;
    gap: 32px !important;
  }
}