/*
Theme Name: GeneratePress Child - Editorial
Theme URI: https://daynote.blog
Description: Premium editorial / magazine style for daynote.blog. Toss blue palette, Pretendard + Nanum Myeongjo typography, drop caps, highlighter marks, callouts, pull quotes. Based on the 정론저널 reference design.
Author: daynote
Template: generatepress
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: generatepress-child
*/

/* =========================================================
   Design Tokens
   ========================================================= */
:root {
    /* Toss blue palette */
    --c-primary:       #3182F6;
    --c-primary-700:   #1B64DA;
    --c-accent:        #3182F6;
    --c-accent-soft:   #E8F3FF;

    /* Deep blue for number badges (H2 counter, TOC counter) */
    --c-number-fg:     #1548B5;

    /* Table header background */
    --c-table-head:    #111827;

    /* Ink / neutrals */
    --c-ink:           #111827;
    --c-body:          #2d3748;
    --c-muted:         #64748b;
    --c-subtle:        #94a3b8;

    /* Surfaces */
    --c-bg:            #ffffff;
    --c-surface:       #f7f9fc;
    --c-surface-2:     #eef2f7;
    --c-line:          #e4e8ef;
    --c-line-strong:   #cbd5e1;

    /* Callout colors */
    --c-info-bg:       #eef4fc;
    --c-info-br:       #2b6cb0;
    --c-tip-bg:        #ecfaf2;
    --c-tip-br:        #0f9d58;
    --c-warn-bg:       #fff7ed;
    --c-warn-br:       #d97706;
    --c-danger-bg:     #fef2f2;
    --c-danger-br:     #dc2626;

    /* Font stacks */
    --ff-sans:  'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
                'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
    --ff-serif: 'Nanum Myeongjo', 'Noto Serif KR', Georgia, serif;
    --ff-mono:  'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

    --fs-body: 17px;
    --lh-body: 1.85;
    --ls-body: -0.01em;

    --w-content: 780px;
    --w-wide:    1160px;

    --r-sm: 6px;
    --r:    10px;
    --r-lg: 14px;
}

/* =========================================================
   Base
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
    font-family: var(--ff-sans);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    letter-spacing: var(--ls-body);
    color: var(--c-body);
    background: var(--c-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01", "tnum";
}

img { max-width: 100%; height: auto; display: block; border-radius: var(--r-sm); }

a {
    color: var(--c-accent);
    text-decoration: none;
    transition: color .15s ease;
}
a:hover {
    color: var(--c-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}

::selection {
    background: var(--c-accent-soft);
    color: var(--c-ink);
}

/* =========================================================
   Read progress bar (injected via functions.php)
   ========================================================= */
.read-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: var(--c-primary);
    z-index: 9999;
    transition: width .08s linear;
    pointer-events: none;
}

/* =========================================================
   Floating side TOC (desktop ≥1280px, built via JS in footer)
   Anchored to the LEFT edge of the centered article (not viewport).
   right = 50% + half-article-width + gap  →  TOC sits just left of content.
   ========================================================= */
.float-toc {
    position: fixed;
    top: 120px;
    right: calc(50% + (var(--w-content) / 2) + 24px);
    width: 220px;
    max-height: calc(100vh - 160px);
    overflow-y: auto;
    display: none;
    z-index: 40;
    background: transparent;
    padding: 0;
}
@media (min-width: 1280px) {
    .single-post .float-toc { display: block; }
}
/* Below 1280px: hidden. At very wide viewports, TOC auto-stays aligned
   to article's left edge thanks to right: calc(50% + ...). */
.float-toc .lbl {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--c-muted);
    text-transform: uppercase;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-line);
}
.float-toc ul { list-style: none; padding: 0; margin: 0; }
.float-toc li { margin: 0; }
.float-toc a {
    display: block;
    padding: 8px 0 8px 12px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--c-muted);
    border-left: 2px solid var(--c-line);
    transition: color .15s ease, border-left-color .15s ease, background .15s ease;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-decoration: none;
}
.float-toc a:hover {
    color: var(--c-primary);
    border-left-color: var(--c-primary);
    text-decoration: none;
}
.float-toc a.active {
    color: var(--c-primary);
    border-left-color: var(--c-primary);
    font-weight: 600;
    background: var(--c-accent-soft);
}

/* Thin scrollbar for the floating panel */
.float-toc::-webkit-scrollbar { width: 4px; }
.float-toc::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: 2px; }
.float-toc::-webkit-scrollbar-thumb:hover { background: var(--c-line-strong); }

/* =========================================================
   Header & Navigation
   Sticky with auto-hide on scroll-down, auto-show on scroll-up.
   Compact even when ad plugins inject banners inside the header.
   ========================================================= */
.site-header,
.site-header.grid-container {
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--c-line);
    position: sticky;
    top: 0;
    z-index: 50;
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    box-shadow: none;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transform: translateY(0);
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
}

/* Applied by JS when user scrolls down past threshold */
.site-header.is-hidden {
    transform: translateY(-100%);
}

/* Subtle shadow when scrolled away from top (header is pinned but content scrolled) */
.site-header.is-scrolled {
    box-shadow: 0 2px 10px -4px rgba(17, 24, 39, 0.08);
}

/* =========================================================
   H2 sticky section header (single posts only)
   Pinned to top at z-index above the site-header, so it stays
   visible as the primary top bar while reading a section.
   When scrolled back above the first H2, it disappears and
   site-header becomes the top bar again.
   ========================================================= */
.h2-sticky-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 52px;
    padding: 0 24px;
    display: none;
    align-items: center;
    gap: 0;
    z-index: 99;                         /* well above site-header (50) */
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--c-line);
    box-shadow: 0 2px 10px -4px rgba(17, 24, 39, 0.08);
    font-family: var(--ff-sans);
    font-size: 14px;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -0.01em;
    line-height: 1.3;
    pointer-events: none;
}
.h2-sticky-header.is-visible {
    display: flex !important;
}

.h2-sticky-header .num {
    background: var(--c-accent-soft);
    color: var(--c-number-fg);
    font-family: var(--ff-serif);
    font-size: 12px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 4px;
    margin-right: 10px;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}

.h2-sticky-header .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

@media (max-width: 640px) {
    .h2-sticky-header {
        height: 40px;
        padding: 0 16px;
        font-size: 13px;
    }
    .h2-sticky-header .num { font-size: 11px; padding: 2px 7px; margin-right: 8px; }
}

/* Inside-header: tight vertical padding so brand + nav stay compact */
.site-header .inside-header {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}

/* Google AdSense Auto Ads places a 790×280 banner as a direct child of
   .site-header, which makes the sticky header huge. Hide it there so
   Auto Ads relocates the placement elsewhere on the page. */
.site-header > .google-auto-placed,
.site-header > ins.adsbygoogle,
.site-header > .adsbygoogle {
    display: none !important;
}

/* Ad slots injected INSIDE .inside-header (via theme hooks / plugins):
   strip margins and constrain height. */
.site-header .inside-header ins.adsbygoogle,
.site-header .inside-header .adsbygoogle,
.site-header .inside-header .ai-insert-wrapper,
.site-header .inside-header .code-block,
.site-header .inside-header [class*="ad-inserter"] {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    max-height: 60px !important;
    overflow: hidden;
}

/* Mobile: even tighter inside-header padding */
@media (max-width: 768px) {
    .site-header .inside-header {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }
}

.site-branding .site-title,
.site-branding .site-title a,
.site-branding .site-title a:hover {
    color: var(--c-ink);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.site-description {
    color: var(--c-muted);
    font-weight: 500;
    font-size: 13px;
}

.main-navigation {
    background: transparent;
    border: 0;
    box-shadow: none;
}

.main-navigation .main-nav ul li a {
    color: var(--c-ink);
    font-size: 15px;
    font-weight: 500;
    padding: 14px 0;
    margin: 0 14px;
    border-bottom: 2px solid transparent;
    transition: all .15s ease;
    background: transparent;
    letter-spacing: -0.01em;
}

.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item > a,
.main-navigation .main-nav ul li.current-menu-parent > a {
    color: var(--c-primary);
    border-bottom-color: var(--c-primary);
    background: transparent;
}

.main-navigation .main-nav ul ul {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    box-shadow: 0 10px 28px -12px rgba(17, 24, 39, 0.10);
    padding: 8px;
    margin-top: 4px;
}

.main-navigation .main-nav ul ul li a {
    border-bottom: 0;
    border-radius: var(--r-sm);
    padding: 10px 14px;
    margin: 0;
    font-size: 14px;
}

.main-navigation .main-nav ul ul li a:hover {
    background: var(--c-surface);
    border-bottom: 0;
}

/* =========================================================
   Layout / container
   ========================================================= */
.site.grid-container {
    background: var(--c-bg);
}

/* Hold content at editorial width on single posts (not pages) */
.single-post .site-main .inside-article {
    max-width: var(--w-content);
    margin: 0 auto;
}

/* Hide the large featured image header on single posts */
.single-post .featured-image.page-header-image-single,
.single-post .page-header-image-single,
.single-post .page-header-image {
    display: none !important;
}

/* =========================================================
   Article card (blog list)
   ========================================================= */
.inside-article {
    background: var(--c-bg);
    border-radius: 0;
    box-shadow: none;
    padding: 40px 0;
    border-bottom: 1px solid var(--c-line);
    transition: none;
}

.blog .inside-article:last-of-type,
.archive .inside-article:last-of-type {
    border-bottom: 0;
}

.inside-article:hover { box-shadow: none; }

.entry-header {
    margin-bottom: 20px;
}

.entry-title,
.entry-title a {
    font-family: var(--ff-sans);
    font-size: clamp(26px, 3vw, 36px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.025em;
    color: var(--c-ink);
    margin: 0 0 12px;
    text-wrap: balance;
    text-decoration: none;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.entry-title a:hover { color: var(--c-primary); text-decoration: none; }

.single .entry-title {
    font-size: clamp(30px, 4vw, 42px);
    margin-bottom: 18px;
}

/* Entry meta hidden globally (user request). Categories/tags that live
   inside .entry-meta are hidden too. Remove this rule to re-enable. */
.entry-meta {
    display: none !important;
}

.byline,
.posted-on,
.post-navigation-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid var(--c-line);
    border-bottom: 1px solid var(--c-line);
    font-size: 14px;
    color: var(--c-muted);
    font-weight: 500;
    letter-spacing: 0;
    flex-wrap: wrap;
}

.archive .entry-meta,
.blog .entry-meta {
    border: 0;
    padding: 0;
    margin-bottom: 6px;
}

.entry-meta a {
    color: var(--c-muted);
    text-decoration: none;
}
.entry-meta a:hover { color: var(--c-primary); text-decoration: none; }

.entry-meta .cat-links,
.entry-meta .tags-links {
    display: inline-flex;
    gap: 6px;
    flex-wrap: wrap;
}

.entry-meta .cat-links a {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--c-accent);
    background: var(--c-accent-soft);
    padding: 4px 10px;
    border-radius: 100px;
}

.entry-meta .tags-links a {
    font-size: 13px;
    color: var(--c-muted);
    border: 1px solid var(--c-line);
    padding: 4px 11px;
    border-radius: 100px;
    background: #fff;
    font-weight: 500;
    transition: all .15s ease;
}
.entry-meta .tags-links a:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: #fff;
}

/* Featured image on article */
.post-image {
    margin-bottom: 20px;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--c-line);
}
.post-image img { border-radius: 0; }

/* =========================================================
   Entry content typography
   ========================================================= */
.entry-content {
    color: var(--c-body);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.entry-content > * + * { margin-top: 1.4em; }

.entry-content p {
    margin: 0;
    color: var(--c-body);
    word-break: keep-all;
    text-wrap: pretty;
}

/* Lead paragraph (first paragraph of a post) */
.single .entry-content > p:first-of-type {
    font-size: 20px;
    line-height: 1.7;
    color: var(--c-ink);
    font-weight: 500;
    letter-spacing: -0.015em;
}

/* Gutenberg drop cap (user toggles per paragraph) */
.entry-content .has-drop-cap::first-letter,
.entry-content .has-drop-cap:first-letter {
    font-family: var(--ff-serif);
    font-size: 3.6em;
    font-weight: 700;
    float: left;
    line-height: 0.9;
    margin: 0.08em 0.12em 0 0;
    color: var(--c-primary);
    text-transform: none;
}

.entry-content strong {
    color: var(--c-ink);
    font-weight: 700;
}

/* Highlighter marker for <em> */
.entry-content em {
    font-style: normal;
    color: var(--c-primary);
    font-weight: 600;
    background: linear-gradient(transparent 62%, var(--c-accent-soft) 62%);
    padding: 0 2px;
}

/* True italics via <i> */
.entry-content i { font-style: italic; color: inherit; background: none; padding: 0; }

.entry-content h2 {
    font-family: var(--ff-sans);
    font-size: 28px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.025em;
    color: var(--c-ink);
    margin: 2.4em 0 0.8em;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--c-line);
    scroll-margin-top: 90px;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

/* Auto-number H2s in single posts (01, 02, 03 ...) to mirror the TOC.
   Initialize counter on the entry container, increment on each H2,
   render the pill badge via ::before. */
.single-post .entry-content {
    counter-reset: h2-counter;
}
.single-post .entry-content h2 {
    counter-increment: h2-counter;
}
.single-post .entry-content h2::before {
    content: counter(h2-counter, decimal-leading-zero);
    display: inline-block;
    font-family: var(--ff-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--c-number-fg);
    background: var(--c-accent-soft);
    padding: 4px 10px;
    border-radius: 4px;
    margin-right: 12px;
    vertical-align: middle;
    letter-spacing: 0.04em;
    line-height: 1;
}

/* Opt-out: add class="no-num" to a heading to skip numbering */
.single-post .entry-content h2.no-num {
    counter-increment: none;
}
.single-post .entry-content h2.no-num::before {
    content: none;
}

/* Manual number span (legacy / override): <h2><span class="num">01</span>Title</h2>
   If user adds this manually, hide the auto-counter to avoid duplicate. */
.entry-content h2 .num {
    display: inline-block;
    font-family: var(--ff-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--c-number-fg);
    background: var(--c-accent-soft);
    padding: 4px 10px;
    border-radius: 4px;
    margin-right: 12px;
    vertical-align: middle;
    letter-spacing: 0.04em;
}
.single-post .entry-content h2:has(> .num)::before {
    content: none;
}

.entry-content h3 {
    font-family: var(--ff-sans);
    font-size: 21px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: -0.02em;
    color: var(--c-ink);
    margin: 2em 0 0.6em;
    scroll-margin-top: 90px;
    position: relative;
    padding-left: 14px;
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

.entry-content h3::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 4px;
    height: 0.95em;
    background: var(--c-table-head);
    border-radius: 2px;
}

.entry-content h4 {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.5;
    color: var(--c-ink);
    margin: 1.8em 0 0.5em;
    letter-spacing: -0.015em;
    scroll-margin-top: 90px;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.entry-content ul,
.entry-content ol {
    padding-left: 24px;
    margin: 0;
}
.entry-content li {
    margin: 8px 0;
    word-break: keep-all;
}
.entry-content ul li::marker { color: var(--c-accent); }
.entry-content ol li::marker { color: var(--c-accent); font-weight: 600; }

.entry-content hr {
    border: none;
    border-top: 1px solid var(--c-line);
    margin: 3em 0;
}

.entry-content code {
    font-family: var(--ff-mono);
    font-size: 0.88em;
    color: var(--c-primary);
    background: var(--c-surface-2);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid var(--c-line);
}

.entry-content pre {
    font-family: var(--ff-mono);
    font-size: 14px;
    line-height: 1.7;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    padding: 18px 22px;
    overflow-x: auto;
    color: var(--c-body);
}
.entry-content pre code {
    padding: 0;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: inherit;
}

/* =========================================================
   Blockquote (editorial, serif)
   ========================================================= */
.entry-content blockquote {
    margin: 2em 0;
    padding: 6px 0 6px 28px;
    border-left: 3px solid var(--c-primary);
    font-family: var(--ff-serif);
    font-size: 21px;
    line-height: 1.7;
    color: var(--c-ink);
    font-weight: 500;
    letter-spacing: -0.005em;
    word-break: keep-all;
    background: transparent;
    border-radius: 0;
}

.entry-content blockquote p {
    margin: 0 0 10px;
    font-family: inherit;
    color: inherit;
}

.entry-content blockquote cite {
    display: block;
    margin-top: 10px;
    font-family: var(--ff-sans);
    font-size: 13px;
    font-style: normal;
    color: var(--c-muted);
    font-weight: 500;
    letter-spacing: 0;
}
.entry-content blockquote cite::before {
    content: "— ";
    color: var(--c-subtle);
}

/* =========================================================
   Tables
   Desktop: normal rendering (full-width, rounded, no scroll).
   Mobile (≤768px): wrap into a horizontal-scroll container so
   page layout doesn't break on overflow.
   ========================================================= */

/* --- Desktop default --- */
.entry-content figure.wp-block-table,
.entry-content .wp-block-table {
    margin: 2em 0;
}

.entry-content table,
.entry-content figure.wp-block-table table,
.entry-content .wp-block-table table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin: 2em 0;
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    overflow: hidden;
}

.entry-content figure.wp-block-table table,
.entry-content .wp-block-table table {
    margin: 0;
}

.entry-content table thead th {
    background: var(--c-table-head);
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    padding: 13px 18px;
    text-align: left;
    letter-spacing: -0.005em;
    border: none;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.entry-content table tbody td {
    padding: 13px 18px;
    border-top: 1px solid var(--c-line);
    color: var(--c-body);
    vertical-align: top;
    background: #fff;
    word-break: keep-all;
}

.entry-content table tbody td:first-child {
    color: var(--c-ink);
    font-weight: 600;
}

.entry-content table tbody tr:nth-child(even) td {
    background: var(--c-surface);
}

/* --- Mobile (≤768px): horizontal scroll on wrapper --- */
@media (max-width: 768px) {
    .entry-content figure.wp-block-table,
    .entry-content .wp-block-table {
        border: 1px solid var(--c-line);
        border-radius: var(--r);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        background-image:
            linear-gradient(to right, #fff, #fff),
            linear-gradient(to right, #fff, #fff),
            linear-gradient(to right, rgba(17, 24, 39, 0.08), rgba(17, 24, 39, 0)),
            linear-gradient(to left,  rgba(17, 24, 39, 0.08), rgba(17, 24, 39, 0));
        background-position: left center, right center, left center, right center;
        background-repeat: no-repeat;
        background-size: 24px 100%, 24px 100%, 12px 100%, 12px 100%;
        background-attachment: local, local, scroll, scroll;
    }

    .entry-content figure.wp-block-table table,
    .entry-content .wp-block-table table {
        min-width: 480px;
        border: 0;
        border-radius: 0;
    }

    /* Bare <table> without figure wrapper (classic / embedded HTML) */
    .entry-content > table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Keep-all on mobile too — headers wrap at word boundaries.
       Horizontal scroll still triggers when total content > min-width. */
    .entry-content table thead th {
        white-space: normal;
    }

    /* Scrollbar polish */
    .entry-content figure.wp-block-table::-webkit-scrollbar,
    .entry-content .wp-block-table::-webkit-scrollbar,
    .entry-content > table::-webkit-scrollbar {
        height: 8px;
    }
    .entry-content figure.wp-block-table::-webkit-scrollbar-thumb,
    .entry-content .wp-block-table::-webkit-scrollbar-thumb,
    .entry-content > table::-webkit-scrollbar-thumb {
        background: var(--c-line-strong);
        border-radius: 4px;
    }
    .entry-content figure.wp-block-table::-webkit-scrollbar-thumb:hover,
    .entry-content .wp-block-table::-webkit-scrollbar-thumb:hover,
    .entry-content > table::-webkit-scrollbar-thumb:hover {
        background: var(--c-muted);
    }
}

/* =========================================================
   Custom content classes (authors add these in posts)
   ========================================================= */

/* Pull quote: <p class="pull-quote">…</p> */
.entry-content .pull-quote {
    margin: 2.6em 0;
    padding: 32px 28px;
    border-top: 1px solid var(--c-ink);
    border-bottom: 1px solid var(--c-ink);
    font-family: var(--ff-serif);
    font-size: 26px;
    line-height: 1.5;
    color: var(--c-ink);
    font-weight: 500;
    letter-spacing: -0.01em;
    text-align: center;
    text-wrap: balance;
    word-break: keep-all;
    background: transparent;
}

/* Callout: <div class="callout"><div class="ico">i</div><div class="ct"><div class="ct-label">INFO</div><p>...</p></div></div> */
.entry-content .callout {
    border-radius: var(--r);
    padding: 20px 24px 20px 22px;
    margin: 2em 0;
    border-left: 3px solid var(--c-info-br);
    background: var(--c-info-bg);
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.entry-content .callout .ico {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--c-info-br);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    font-family: var(--ff-serif);
    margin-top: 2px;
}

.entry-content .callout .ct { flex: 1; }

.entry-content .callout .ct-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--c-info-br);
    text-transform: uppercase;
    margin-bottom: 4px;
}

.entry-content .callout p {
    margin: 0 !important;
    font-size: 16px;
    line-height: 1.7;
    color: var(--c-body);
    word-break: keep-all;
}

.entry-content .callout.tip    { background: var(--c-tip-bg);    border-left-color: var(--c-tip-br); }
.entry-content .callout.tip .ico { background: var(--c-tip-br); }
.entry-content .callout.tip .ct-label { color: var(--c-tip-br); }

.entry-content .callout.warn   { background: var(--c-warn-bg);   border-left-color: var(--c-warn-br); }
.entry-content .callout.warn .ico { background: var(--c-warn-br); }
.entry-content .callout.warn .ct-label { color: var(--c-warn-br); }

.entry-content .callout.danger { background: var(--c-danger-bg); border-left-color: var(--c-danger-br); }
.entry-content .callout.danger .ico { background: var(--c-danger-br); }
.entry-content .callout.danger .ct-label { color: var(--c-danger-br); }

/* Stats row: <div class="stats"><div class="cell"><div class="label">…</div><div class="val">…</div><div class="sub">…</div></div>×3</div> */
.entry-content .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    margin: 2em 0;
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    overflow: hidden;
    background: #fff;
}
.entry-content .stats .cell {
    padding: 22px 24px;
    border-left: 1px solid var(--c-line);
}
.entry-content .stats .cell:first-child { border-left: none; }
.entry-content .stats .label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-subtle);
    margin-bottom: 8px;
}
.entry-content .stats .val {
    font-family: var(--ff-serif);
    font-weight: 600;
    font-size: 28px;
    color: var(--c-primary);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.entry-content .stats .sub {
    font-size: 13px;
    color: var(--c-muted);
    margin-top: 6px;
}
@media (max-width: 640px) {
    .entry-content .stats { grid-template-columns: 1fr; }
    .entry-content .stats .cell { border-left: none; border-top: 1px solid var(--c-line); }
    .entry-content .stats .cell:first-child { border-top: none; }
    .entry-content .pull-quote { font-size: 21px; padding: 22px 12px; }
}

/* Figure with caption */
.entry-content figure.wp-block-image,
.entry-content figure.post-figure {
    margin: 2em 0;
}
.entry-content figure.wp-block-image figcaption,
.entry-content figure.post-figure figcaption {
    margin-top: 12px;
    font-size: 13px;
    color: var(--c-muted);
    line-height: 1.6;
    padding-left: 14px;
    border-left: 2px solid var(--c-line);
    word-break: keep-all;
    text-align: left;
}

/* =========================================================
   TOC plugin (Easy Table of Contents) — editorial style
   Maps the plugin's HTML to the reference .toc design:
   eyebrow label → big title → numbered list w/ dashed separators.
   Mobile only (<768px): inline TOC visible.
   Tablet/Desktop (≥768px): inline TOC hidden.
   ≥1280px: .float-toc takes over as the side rail TOC.
   ========================================================= */
@media (min-width: 768px) {
    div#ez-toc-container,
    .ez-toc-v2_0_74,
    .ez-toc-widget-container,
    .ez-toc-counter,
    .ez-toc {
        display: none !important;
    }
}
div#ez-toc-container,
.ez-toc-v2_0_74,
.ez-toc-widget-container,
.ez-toc-counter,
.ez-toc {
    background: var(--c-surface) !important;
    border: 1px solid var(--c-line) !important;
    border-radius: var(--r) !important;
    padding: 24px 28px !important;
    margin: 2.4em 0 !important;
    box-shadow: none !important;
    width: auto !important;
    /* display removed — was overriding @media (min-width: 768px) { display: none }
       Default for <div> is block anyway, so no visual change on mobile. */
}

/* Eyebrow label above the title */
div#ez-toc-container::before {
    content: "Table of Contents";
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--ff-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--c-muted);
    text-transform: uppercase;
    margin-bottom: 10px;
}
/* (removed stray nested ::before::after — pseudo-elements cannot chain) */

/* Main title */
div#ez-toc-container p.ez-toc-title,
div#ez-toc-container .ez-toc-title,
.ez-toc-title {
    font-family: var(--ff-sans) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--c-ink) !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    text-transform: none !important;
    display: block !important;
    line-height: 1.4 !important;
}

/* Hide the plugin's toggle button (optional — keep it clean) */
div#ez-toc-container .ez-toc-title-toggle,
div#ez-toc-container a.ez-toc-toggle {
    margin-left: 8px;
    color: var(--c-muted) !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 2px 8px !important;
}

/* Title-container: hide entirely (user request). The eyebrow label
   "Table of Contents" above is rendered by ::before on the container. */
div#ez-toc-container .ez-toc-title-container,
.ez-toc-title-container {
    display: none !important;
}

/* List — remove plugin defaults, apply editorial numbered style */
div#ez-toc-container nav,
div#ez-toc-container > ul,
div#ez-toc-container .ez-toc-list,
div#ez-toc-container ul.ez-toc-list-level-1 {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    list-style: none !important;
    counter-reset: ez-toc-counter;
}

div#ez-toc-container ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    counter-reset: ez-toc-counter;
}

/* Base li layout (applies to all levels).
   flex-wrap: wrap is critical — the hierarchy structure nests <ul> as
   a sibling of <a> inside a level-2 <li>, and it must drop to its own
   row, not squish next to the link. */
div#ez-toc-container li,
div#ez-toc-container ul.ez-toc-list li {
    padding: 10px 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 14px;
    align-items: baseline;
    list-style: none !important;
    background: transparent !important;
    line-height: 1.5;
    border-top: 1px dashed var(--c-line);
}

/* --- Level 2 (main sections): numbered --- */
div#ez-toc-container li.ez-toc-heading-level-2 {
    counter-increment: ez-toc-counter;
    padding: 10px 0 !important;
    border-top: 1px dashed var(--c-line);
}

div#ez-toc-container li.ez-toc-heading-level-2::before {
    content: counter(ez-toc-counter, decimal-leading-zero);
    font-family: var(--ff-serif);
    font-size: 13px;
    color: var(--c-number-fg);
    font-weight: 700;
    min-width: 26px;
    flex-shrink: 0;
}

/* First level-2 item: no top border */
div#ez-toc-container li.ez-toc-heading-level-2:first-child,
div#ez-toc-container > ul > li.ez-toc-heading-level-2:first-child,
div#ez-toc-container .ez-toc-list > li.ez-toc-heading-level-2:first-child {
    border-top: 0 !important;
    padding-top: 4px !important;
}

/* --- Level 3+ (subsections): smaller, muted, no number, em-dash prefix --- */
div#ez-toc-container li.ez-toc-heading-level-3,
div#ez-toc-container li.ez-toc-heading-level-4,
div#ez-toc-container li.ez-toc-heading-level-5,
div#ez-toc-container li.ez-toc-heading-level-6 {
    counter-increment: none !important;
    padding: 4px 0 !important;
    margin: 0 0 0 40px !important;
    border-top: 0 !important;
    line-height: 1.45;
}

div#ez-toc-container li.ez-toc-heading-level-3::before,
div#ez-toc-container li.ez-toc-heading-level-4::before,
div#ez-toc-container li.ez-toc-heading-level-5::before,
div#ez-toc-container li.ez-toc-heading-level-6::before {
    content: "—" !important;
    color: var(--c-subtle) !important;
    font-family: var(--ff-sans) !important;
    font-weight: 400 !important;
    font-size: 13px !important;
    min-width: 20px !important;
    flex-shrink: 0;
}

/* Level 3+ link: smaller + muted (targets both <li class> and <a class>) */
div#ez-toc-container li.ez-toc-heading-level-3 a,
div#ez-toc-container li.ez-toc-heading-level-4 a,
div#ez-toc-container li.ez-toc-heading-level-5 a,
div#ez-toc-container li.ez-toc-heading-level-6 a,
div#ez-toc-container a.ez-toc-link.ez-toc-heading-3,
div#ez-toc-container a.ez-toc-link.ez-toc-heading-4,
div#ez-toc-container a.ez-toc-link.ez-toc-heading-5,
div#ez-toc-container a.ez-toc-link.ez-toc-heading-6,
div#ez-toc-container .ez-toc-link.ez-toc-heading-3,
div#ez-toc-container .ez-toc-link.ez-toc-heading-4,
div#ez-toc-container .ez-toc-link.ez-toc-heading-5,
div#ez-toc-container .ez-toc-link.ez-toc-heading-6 {
    font-size: 14px !important;
    color: var(--c-muted) !important;
    font-weight: 400 !important;
}

div#ez-toc-container li.ez-toc-heading-level-3 a:hover,
div#ez-toc-container li.ez-toc-heading-level-4 a:hover,
div#ez-toc-container li.ez-toc-heading-level-5 a:hover,
div#ez-toc-container li.ez-toc-heading-level-6 a:hover,
div#ez-toc-container a.ez-toc-link.ez-toc-heading-3:hover,
div#ez-toc-container a.ez-toc-link.ez-toc-heading-4:hover,
div#ez-toc-container a.ez-toc-link.ez-toc-heading-5:hover,
div#ez-toc-container a.ez-toc-link.ez-toc-heading-6:hover {
    color: var(--c-primary) !important;
}

/* --- Nested <ul class="ez-toc-list-level-3"> inside a level-2 <li> ---
   Keep margin-left on the li (handled above), not on the ul, so flat
   and hierarchical structures both get a single 40px indent. */
div#ez-toc-container ul.ez-toc-list-level-3,
div#ez-toc-container ul.ez-toc-list-level-4,
div#ez-toc-container ul.ez-toc-list-level-5,
div#ez-toc-container ul.ez-toc-list-level-6,
div#ez-toc-container li > ul,
div#ez-toc-container li > ol {
    flex-basis: 100%;
    width: 100%;
    margin: 6px 0 0 0 !important;
    padding: 0 !important;
    counter-reset: none;
    background: transparent !important;
    border: 0 !important;
    list-style: none !important;
}

/* Inside a nested UL, the level-3 LI already gets margin-left: 40px from
   its own class rule — so no additional indent on the UL is needed. */

/* Link inside list item */
div#ez-toc-container a,
div#ez-toc-container .ez-toc-link,
div#ez-toc-container a.ez-toc-link {
    color: var(--c-body) !important;
    font-family: var(--ff-sans) !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    flex: 1;
    background: transparent !important;
    padding: 0 !important;
    border: 0 !important;
}
div#ez-toc-container a:hover,
div#ez-toc-container a.ez-toc-link:hover,
div#ez-toc-container a:focus {
    color: var(--c-primary) !important;
    text-decoration: none !important;
    background: transparent !important;
}

/* Active / currently-scrolled item (some versions add .ez-toc-active) */
div#ez-toc-container a.active,
div#ez-toc-container .is-active-link,
div#ez-toc-container li.is-active-li > a {
    color: var(--c-primary) !important;
    font-weight: 600 !important;
}

/* =========================================================
   Buttons
   ========================================================= */
.button,
button,
input[type="submit"],
input[type="button"],
.wp-block-button__link {
    background: var(--c-primary);
    color: #fff;
    border: 0;
    border-radius: var(--r-sm);
    padding: 11px 20px;
    font-family: var(--ff-sans);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: background .15s ease, transform .1s ease;
    box-shadow: none;
    letter-spacing: -0.01em;
    text-transform: none;
}
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-block-button__link:hover {
    background: var(--c-primary-700);
    color: #fff;
}
.button:active, button:active { transform: translateY(1px); }

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--c-primary);
    border: 1px solid var(--c-primary);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--c-accent-soft);
}

/* =========================================================
   Forms
   ========================================================= */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background: #fff;
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    padding: 11px 14px;
    font-family: var(--ff-sans);
    font-size: 15px;
    color: var(--c-ink);
    transition: border-color .15s ease, box-shadow .15s ease;
    width: 100%;
    box-shadow: none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
    outline: 0;
    border-color: var(--c-primary);
    box-shadow: 0 0 0 3px var(--c-accent-soft);
}

::placeholder { color: var(--c-subtle); }

/* =========================================================
   Sidebar widgets
   ========================================================= */
.widget-area .widget {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 0 32px;
    margin: 0 0 32px;
    box-shadow: none;
    border-bottom: 1px solid var(--c-line);
}
.widget-area .widget:last-child { border-bottom: 0; }

.widget-title {
    font-family: var(--ff-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--c-muted);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li {
    padding: 8px 0;
    border: 0;
    font-size: 14px;
}
.widget ul li a { color: var(--c-body); font-weight: 500; }
.widget ul li a:hover { color: var(--c-primary); text-decoration: none; }

/* =========================================================
   Comments
   ========================================================= */
.comments-area {
    background: transparent;
    border-top: 1px solid var(--c-line);
    padding: 48px 0 0;
    margin-top: 56px;
    box-shadow: none;
    border-radius: 0;
}

.comments-title,
.comment-reply-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -0.015em;
    margin: 0 0 24px;
}

.comment-list li.comment {
    border: 0;
    padding: 0;
    margin: 0 0 24px;
}

.comment-body {
    padding: 20px 24px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
}

.comment-author .fn { color: var(--c-ink); font-weight: 600; }
.comment-metadata a { color: var(--c-subtle); font-size: 12px; }

/* =========================================================
   Post navigation (prev/next)
   ========================================================= */
.post-navigation {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--c-line);
}

.post-navigation .nav-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 640px) {
    .post-navigation .nav-links { grid-template-columns: 1fr; }
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    display: block;
    padding: 20px;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    color: var(--c-ink);
    font-weight: 600;
    text-decoration: none;
    transition: all .15s ease;
    box-shadow: none;
}
.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: #fff;
    transform: none;
    box-shadow: 0 4px 12px -4px rgba(17, 24, 39, 0.08);
}
.post-navigation .nav-next { text-align: right; }

/* =========================================================
   Pagination
   ========================================================= */
.paging-navigation .nav-links,
.generate-pagination .nav-links {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-top: 40px;
}

.paging-navigation .nav-links a,
.paging-navigation .nav-links .current,
.generate-pagination .nav-links a,
.generate-pagination .nav-links .current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 14px;
    background: #fff;
    color: var(--c-body);
    border: 1px solid var(--c-line);
    border-radius: var(--r-sm);
    font-weight: 600;
    font-size: 14px;
    box-shadow: none;
}

.paging-navigation .nav-links .current,
.generate-pagination .nav-links .current {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
    background: var(--c-surface);
    border-top: 1px solid var(--c-line);
    color: var(--c-muted);
    padding: 48px 0 28px;
    font-size: 13px;
}

.site-footer .footer-widgets {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--c-line);
    margin-bottom: 20px;
}

.site-footer .widget-title {
    color: var(--c-ink);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    font-weight: 700;
    margin-bottom: 10px;
}

.site-footer .widget ul li {
    padding: 4px 0;
    font-size: 13px;
}
.site-footer .widget ul li a { color: var(--c-muted); }
.site-footer .widget ul li a:hover { color: var(--c-primary); text-decoration: none; }

.site-info {
    font-size: 12px;
    color: var(--c-subtle);
}
.site-info a { color: var(--c-muted); }

/* Single posts: hide .site-info (related posts block takes its role) */
body.single-post .site-info,
body.single-post .footer-bar {
    display: none !important;
}

/* =========================================================
   Related posts — "함께 읽으면 좋은 글"
   Injected via functions.php before the site footer on single posts.
   ========================================================= */
.related-section {
    max-width: var(--w-content);
    margin: 0 auto;
    padding: 0 24px;
}

.related-section .related {
    padding: 56px 0 64px;
    border-top: 1px solid var(--c-line);
    margin-top: 40px;
}

.related-header {
    display: flex;
    align-items: baseline;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.related-header .eyebrow {
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--c-muted);
    font-weight: 700;
    margin-bottom: 4px;
}
.related-header .big {
    font-size: 26px;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.3;
    word-break: keep-all;
    overflow-wrap: break-word;
}
.related-header .more {
    margin-left: auto;
    font-size: 13px;
    color: var(--c-accent);
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}
.related-header .more:hover {
    color: var(--c-primary-700);
    text-decoration: none;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.rcard {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform .2s ease;
}
.rcard:hover { text-decoration: none; }

.rcard .thumb {
    aspect-ratio: 1 / 1;
    background-color: var(--c-surface-2);
    background-image: repeating-linear-gradient(-45deg, #eaeef5 0 8px, #f1f4fa 8px 16px);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-line);
    margin-bottom: 14px;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease;
}
.rcard:hover .thumb {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px -8px rgba(17, 24, 39, 0.15);
}

.rcard .cat {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--c-accent);
    text-transform: uppercase;
    margin-bottom: 6px;
    display: none; /* hidden for now — show thumbnail + title only */
}

.rcard h4 {
    font-size: 16px;
    line-height: 1.5;
    color: var(--c-ink);
    margin: 0 0 10px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-wrap: pretty;
    word-break: keep-all;
    overflow-wrap: break-word;
    transition: color .15s ease;
}
.rcard:hover h4 { color: var(--c-primary); }

.rcard .rmeta {
    font-size: 12px;
    color: var(--c-muted);
    display: none; /* hidden for now — show thumbnail + title only */
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.rcard .rmeta .d {
    width: 2px; height: 2px;
    border-radius: 50%;
    background: var(--c-subtle);
}

@media (max-width: 768px) {
    .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .related-grid { grid-template-columns: 1fr; }
    .related-section .related { padding: 40px 0 48px; }
    .related-header .big { font-size: 22px; }
}

/* =========================================================
   Back to top (GeneratePress + generic fallback)
   GP outputs <a class="generate-back-to-top"> fixed bottom-right.
   ========================================================= */
.generate-back-to-top,
a.generate-back-to-top,
.back-to-top,
a.back-to-top {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #111827 !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 6px 16px -4px rgba(17, 24, 39, 0.25) !important;
    text-decoration: none !important;
    z-index: 9998 !important;
    transition: opacity .2s ease,
                visibility .2s ease,
                background-color .15s ease,
                transform .15s ease,
                box-shadow .15s ease !important;
}

/* Hide GP's default SVG — we inject a custom arrow-up icon via ::before */
.generate-back-to-top svg,
.back-to-top svg {
    display: none !important;
}

.generate-back-to-top::before,
.back-to-top::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'><path stroke-linecap='round' stroke-linejoin='round' d='M4.5 10.5 12 3m0 0 7.5 7.5M12 3v18'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.generate-back-to-top:hover,
.generate-back-to-top:focus,
.back-to-top:hover,
.back-to-top:focus {
    background: #374151 !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 22px -6px rgba(17, 24, 39, 0.35) !important;
    text-decoration: none !important;
    outline: 0 !important;
}

.generate-back-to-top:active,
.back-to-top:active {
    transform: translateY(0) !important;
}

/* Smooth scroll globally (already set in base, but redundancy is cheap) */
html { scroll-behavior: smooth; }

@media (max-width: 640px) {
    .generate-back-to-top,
    .back-to-top {
        right: 16px !important;
        bottom: 16px !important;
        width: 44px !important;
        height: 44px !important;
    }
}

/* =========================================================
   Floating share button (above the back-to-top button)
   Injected by functions.php. Uses Web Share API on mobile,
   falls back to clipboard copy + toast on desktop.
   ========================================================= */
.share-float {
    position: fixed;
    right: 24px;
    bottom: 84px;              /* 24 + 48 (back-to-top) + 12 gap */
    width: 48px;
    height: 48px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #111827;
    color: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 6px 16px -4px rgba(17, 24, 39, 0.25);
    cursor: pointer;
    z-index: 9997;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease,
                background-color .15s ease, box-shadow .15s ease;
    font: inherit;
}

.share-float.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.share-float::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='white'><path stroke-linecap='round' stroke-linejoin='round' d='M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.share-float:hover,
.share-float:focus {
    background: #374151;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -6px rgba(17, 24, 39, 0.35);
    outline: 0;
}

.share-float:active { transform: translateY(0); }

@media (max-width: 640px) {
    .share-float {
        right: 16px;
        bottom: 72px;          /* 16 + 44 + 12 */
        width: 44px;
        height: 44px;
    }
}

/* Toast for "link copied" confirmation */
.share-toast {
    position: fixed;
    bottom: 96px;
    right: 84px;
    background: var(--c-ink);
    color: #fff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    box-shadow: 0 8px 20px -4px rgba(17, 24, 39, 0.3);
    z-index: 9997;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
    white-space: nowrap;
}
.share-toast.show {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 640px) {
    .share-toast {
        bottom: 80px;
        right: 70px;
    }
}

/* =========================================================
   Coupang Partners CTA links
   Auto-detects Coupang affiliate URLs and styles them as pill CTAs.
   Matches both the link.coupang.com redirector and coupa.ng short domain,
   plus any coupang.com link explicitly marked rel="sponsored".
   Inline-flex so the "— 설명" text that follows stays on the same line.
   ========================================================= */
.entry-content a[href*="link.coupang.com"],
.entry-content a[href*="coupa.ng"],
.entry-content a[href*="coupang.com"][rel~="sponsored"] {
    display: inline-flex;
    align-items: center;
    padding: 3px 14px 3px 8px;
    background: var(--c-primary);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.93em;
    border-radius: 999px;
    text-decoration: none !important;
    box-shadow: 0 2px 6px -1px rgba(49, 130, 246, 0.28);
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    word-break: keep-all;
    overflow-wrap: break-word;
    line-height: 1.5;
    vertical-align: baseline;
    letter-spacing: -0.01em;
    background-image: none;
}

/* "쿠팡 최저가 확인" chip before the product name */
.entry-content a[href*="link.coupang.com"]::before,
.entry-content a[href*="coupa.ng"]::before,
.entry-content a[href*="coupang.com"][rel~="sponsored"]::before {
    content: "쿠팡 최저가 확인";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: #fff;
    color: var(--c-primary);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: -0.015em;
    margin-right: 8px;
    font-family: var(--ff-sans);
    flex-shrink: 0;
    line-height: 1.5;
    white-space: nowrap;
}

/* External arrow that slides on hover */
.entry-content a[href*="link.coupang.com"]::after,
.entry-content a[href*="coupa.ng"]::after,
.entry-content a[href*="coupang.com"][rel~="sponsored"]::after {
    content: "→";
    display: inline-block;
    margin-left: 6px;
    font-weight: 500;
    opacity: 0.9;
    transition: transform .2s ease, opacity .15s ease;
}

.entry-content a[href*="link.coupang.com"]:hover,
.entry-content a[href*="coupa.ng"]:hover,
.entry-content a[href*="coupang.com"][rel~="sponsored"]:hover {
    background: var(--c-primary-700);
    color: #fff !important;
    transform: translateY(-1px);
    box-shadow: 0 8px 16px -4px rgba(49, 130, 246, 0.45);
    text-decoration: none !important;
}

.entry-content a[href*="link.coupang.com"]:hover::after,
.entry-content a[href*="coupa.ng"]:hover::after,
.entry-content a[href*="coupang.com"][rel~="sponsored"]:hover::after {
    transform: translateX(3px);
    opacity: 1;
}

/* List item context: subtle row background + vertical rhythm */
.entry-content li:has(> a[href*="link.coupang.com"]):first-child,
.entry-content li:has(> a[href*="coupa.ng"]) {
    padding: 6px 0;
}

/* =========================================================
   Coupang Partners disclosure — auto-injected at top of posts
   with affiliate links. Required by Korean FTC (공정거래위원회)
   guidelines for 경제적 대가관계 disclosure visibility.
   ========================================================= */
.entry-content .aff-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    margin: 0 0 28px;
    background: var(--c-accent-soft);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--r-sm);
    font-size: 13px;
    line-height: 1.55;
    color: var(--c-body);
}

.entry-content .aff-notice-icon {
    flex-shrink: 0;
    color: var(--c-accent);
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    margin-top: 1px;
}

.entry-content .aff-notice-text {
    flex: 1;
    min-width: 0;
}

.entry-content .aff-notice-title {
    display: block;
    font-weight: 700;
    color: var(--c-ink);
    font-size: 13px;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}

.entry-content .aff-notice-body {
    display: block;
    color: var(--c-muted);
    font-size: 12.5px;
    word-break: keep-all;
    line-height: 1.55;
}

/* =========================================================
   Affiliate product cards — richer CTAs for manual inserts
   Authors wrap product HTML in one of 5 variants. All share the
   common disclosure tag (.aff-disclose) and CTA button (.aff-cta).
   Scoped to .entry-content.
   ========================================================= */

/* Shared disclosure tag */
.entry-content .aff-disclose {
    font-size: 11px;
    color: var(--c-subtle);
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}
.entry-content .aff-disclose::before {
    content: "i";
    width: 13px; height: 13px;
    border-radius: 50%;
    background: var(--c-line-strong);
    color: #fff;
    display: inline-grid;
    place-items: center;
    font-family: var(--ff-serif);
    font-size: 9px;
    font-weight: 700;
}

/* Shared large CTA button (variants A + E) */
.entry-content .aff-cta {
    background: var(--c-primary);
    color: #fff !important;
    border: none;
    height: 44px;
    padding: 0 22px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    letter-spacing: -0.005em;
    white-space: nowrap;
    box-shadow: 0 4px 10px -3px rgba(49, 130, 246, 0.35);
}
.entry-content .aff-cta:hover {
    background: var(--c-primary-700);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -4px rgba(49, 130, 246, 0.5);
    text-decoration: none !important;
    color: #fff !important;
}
.entry-content .aff-cta .arrow { display: inline-block; transition: transform .15s ease; }
.entry-content .aff-cta:hover .arrow { transform: translateX(3px); }

.entry-content .aff-foot {
    font-size: 11px;
    color: var(--c-subtle);
    margin-top: 8px;
    line-height: 1.5;
    padding: 0 2px;
}

/* --- Variant A: Editor's Pick horizontal card --- */
.entry-content .aff-card {
    margin: 2.4em 0;
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    background: #fff;
    overflow: hidden;
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 0;
    transition: transform .2s ease, box-shadow .2s ease;
}
.entry-content .aff-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px -14px rgba(17, 24, 39, 0.18);
}
.entry-content .aff-card .ph {
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 30% 30%, #fff, transparent 60%),
        repeating-linear-gradient(-45deg, #eaeef5 0 6px, #f1f4fa 6px 12px);
    border-right: 1px solid var(--c-line);
    position: relative;
    display: grid;
    place-items: center;
    color: var(--c-subtle);
    font-family: var(--ff-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    background-size: cover;
    background-position: center;
}
.entry-content .aff-card .ph .rank {
    position: absolute;
    top: 10px; left: 10px;
    background: var(--c-primary);
    color: #fff;
    font-family: var(--ff-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 9px;
    border-radius: 4px;
}
.entry-content .aff-card .body {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.entry-content .aff-card .eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--c-accent);
    margin-bottom: 2px;
}
.entry-content .aff-card h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--c-ink);
    margin: 0;
    letter-spacing: -0.015em;
    line-height: 1.4;
    word-break: keep-all;
}
.entry-content .aff-card .brand-line {
    font-size: 13px;
    color: var(--c-muted);
}
.entry-content .aff-card .why {
    font-size: 14px;
    color: var(--c-body);
    line-height: 1.65;
    margin: 4px 0 2px;
    word-break: keep-all;
}
.entry-content .aff-card .rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--c-muted);
}
.entry-content .aff-card .stars { color: #f59e0b; letter-spacing: 0.05em; }
.entry-content .aff-card .row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px dashed var(--c-line);
}
.entry-content .aff-card .price-wrap {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.entry-content .aff-card .price-was {
    font-size: 12px;
    color: var(--c-subtle);
    text-decoration: line-through;
}
.entry-content .aff-card .price-now {
    font-family: var(--ff-serif);
    font-size: 24px;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -0.01em;
}
.entry-content .aff-card .price-now .dc {
    color: #dc2626;
    font-size: 14px;
    margin-right: 6px;
    letter-spacing: 0;
}

/* --- Variant B: Compact inline banner --- */
.entry-content .aff-banner {
    margin: 2em 0;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px 14px 14px;
    background: var(--c-accent-soft);
    border: 1px solid var(--c-line);
    border-left: 3px solid var(--c-accent);
    border-radius: var(--r-sm);
}
.entry-content .aff-banner .thumb {
    width: 64px; height: 64px;
    border-radius: 6px;
    background:
        radial-gradient(circle at 30% 30%, #fff, transparent 60%),
        repeating-linear-gradient(-45deg, #dce6f5 0 5px, #e8edf6 5px 10px);
    border: 1px solid var(--c-line);
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
}
.entry-content .aff-banner .txt { flex: 1; min-width: 0; }
.entry-content .aff-banner .lbl {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--c-accent);
    text-transform: uppercase;
    margin-bottom: 2px;
}
.entry-content .aff-banner .ttl {
    font-size: 15px;
    color: var(--c-ink);
    font-weight: 600;
    line-height: 1.4;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
    word-break: keep-all;
}
.entry-content .aff-banner .price {
    font-size: 13px;
    color: var(--c-muted);
}
.entry-content .aff-banner .price b {
    font-family: var(--ff-serif);
    color: var(--c-ink);
    font-weight: 700;
    font-size: 15px;
    margin-left: 4px;
}
.entry-content .aff-banner .cta-sm {
    background: var(--c-primary);
    color: #fff !important;
    padding: 9px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s ease;
}
.entry-content .aff-banner .cta-sm:hover { background: var(--c-primary-700); }

/* --- Variant C: 3-way spec comparison --- */
.entry-content .aff-compare {
    margin: 2.4em 0;
    border: 1px solid var(--c-line);
    border-radius: var(--r);
    overflow: hidden;
    background: #fff;
}
.entry-content .aff-compare .head {
    padding: 16px 22px;
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.entry-content .aff-compare .head .title {
    font-size: 15px;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -0.015em;
}
.entry-content .aff-compare .head .title::before {
    content: "";
    display: inline-block;
    width: 6px; height: 6px;
    background: var(--c-accent);
    border-radius: 50%;
    margin-right: 10px;
    vertical-align: 2px;
}
.entry-content .aff-compare .grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0;
}
.entry-content .aff-compare .col {
    padding: 22px;
    border-left: 1px solid var(--c-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
}
.entry-content .aff-compare .col:first-child { border-left: none; }
.entry-content .aff-compare .col.best {
    background: linear-gradient(180deg, var(--c-accent-soft) 0%, transparent 40%);
}
.entry-content .aff-compare .col.best::before {
    content: "Editor's Pick";
    position: absolute;
    top: -1px; right: 16px;
    background: var(--c-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 4px 10px;
    border-radius: 0 0 4px 4px;
    text-transform: uppercase;
}
.entry-content .aff-compare .col .ph {
    width: 100%;
    aspect-ratio: 1;
    background:
        radial-gradient(circle at 30% 30%, #fff, transparent 60%),
        repeating-linear-gradient(-45deg, #eaeef5 0 6px, #f1f4fa 6px 12px);
    border-radius: 6px;
    border: 1px solid var(--c-line);
    background-size: cover;
    background-position: center;
}
.entry-content .aff-compare .col h5 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -0.01em;
    line-height: 1.35;
    word-break: keep-all;
    min-height: 2.7em;
}
.entry-content .aff-compare .col .price {
    font-family: var(--ff-serif);
    font-size: 18px;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -0.01em;
}
.entry-content .aff-compare .col .tag {
    font-size: 11px;
    color: var(--c-accent);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.entry-content .aff-compare .col .cta-mini {
    margin-top: auto;
    background: #fff;
    border: 1.5px solid var(--c-primary);
    color: var(--c-primary) !important;
    padding: 9px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none !important;
    transition: all .15s ease;
}
.entry-content .aff-compare .col.best .cta-mini {
    background: var(--c-primary);
    color: #fff !important;
}
.entry-content .aff-compare .col .cta-mini:hover {
    background: var(--c-primary);
    color: #fff !important;
}
.entry-content .aff-compare .foot {
    padding: 10px 22px;
    border-top: 1px solid var(--c-line);
    background: var(--c-surface);
    font-size: 11px;
    color: var(--c-subtle);
}

/* --- Variant D: Inline quote-style --- */
.entry-content .aff-inline {
    margin: 2em 0;
    padding: 20px 22px 18px;
    border-left: 2px solid var(--c-primary);
    background: var(--c-surface);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
    font-size: 15px;
    line-height: 1.75;
    color: var(--c-body);
    word-break: keep-all;
}
.entry-content .aff-inline .lbl {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--c-accent);
    text-transform: uppercase;
    margin-bottom: 6px;
}
.entry-content .aff-inline a.link {
    color: var(--c-primary);
    font-weight: 700;
    border-bottom: 1.5px solid var(--c-primary);
    padding: 0 0 1px;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    display: inline;
    text-decoration: none;
}
.entry-content .aff-inline a.link::before,
.entry-content .aff-inline a.link::after { content: none; }
.entry-content .aff-inline a.link:hover {
    background: var(--c-accent-soft);
    text-decoration: none;
    color: var(--c-primary);
    transform: none;
    box-shadow: none;
}
.entry-content .aff-inline .row {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--c-line);
}
.entry-content .aff-inline .row .price {
    font-size: 13px;
    color: var(--c-muted);
}
.entry-content .aff-inline .row .price b {
    color: var(--c-ink);
    font-family: var(--ff-serif);
    font-size: 16px;
    font-weight: 700;
    margin-left: 4px;
}
.entry-content .aff-inline .row .cta-txt {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--c-primary);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}
.entry-content .aff-inline .row .cta-txt:hover {
    color: var(--c-primary-700);
    text-decoration: none;
}

/* --- Variant E: Hero conversion block --- */
.entry-content .aff-hero {
    margin: 2.6em 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    border: 1px solid var(--c-line);
    background: #fff;
    position: relative;
}
.entry-content .aff-hero .strip {
    background: var(--c-primary);
    color: #fff;
    padding: 8px 22px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.entry-content .aff-hero .strip .deal {
    background: #dc2626;
    color: #fff;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 10px;
    letter-spacing: 0.08em;
}
.entry-content .aff-hero .inner {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    padding: 24px 26px;
    align-items: center;
}
.entry-content .aff-hero .ph {
    aspect-ratio: 1;
    border-radius: var(--r-sm);
    background:
        radial-gradient(circle at 30% 30%, #fff, transparent 60%),
        repeating-linear-gradient(-45deg, #eaeef5 0 6px, #f1f4fa 6px 12px);
    border: 1px solid var(--c-line);
    background-size: cover;
    background-position: center;
}
.entry-content .aff-hero .content h4 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -0.015em;
    line-height: 1.35;
    word-break: keep-all;
}
.entry-content .aff-hero .content .benefits {
    list-style: none;
    padding: 0;
    margin: 10px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.entry-content .aff-hero .content .benefits li {
    font-size: 14px;
    color: var(--c-body);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    word-break: keep-all;
    border: 0 !important;
    padding: 0 !important;
}
.entry-content .aff-hero .content .benefits li::before {
    content: "✓";
    color: var(--c-accent);
    font-weight: 800;
    flex-shrink: 0;
}
.entry-content .aff-hero .cta-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.entry-content .aff-hero .price-blk {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}
.entry-content .aff-hero .price-blk .was {
    font-size: 12px;
    color: var(--c-subtle);
    text-decoration: line-through;
}
.entry-content .aff-hero .price-blk .now {
    font-family: var(--ff-serif);
    font-size: 28px;
    font-weight: 700;
    color: var(--c-ink);
    letter-spacing: -0.02em;
}
.entry-content .aff-hero .price-blk .now .dc {
    color: #dc2626;
    font-size: 15px;
    margin-right: 6px;
}
.entry-content .aff-hero .aff-cta { height: 48px; padding: 0 26px; font-size: 15px; }

/* Affiliate responsive (≤640px) */
@media (max-width: 640px) {
    .entry-content .aff-card,
    .entry-content .aff-hero .inner {
        grid-template-columns: 1fr;
    }
    .entry-content .aff-card .ph,
    .entry-content .aff-hero .ph {
        aspect-ratio: 2/1;
        border-right: none;
        border-bottom: 1px solid var(--c-line);
    }
    .entry-content .aff-compare .grid { grid-template-columns: 1fr; }
    .entry-content .aff-compare .col {
        border-left: none;
        border-top: 1px solid var(--c-line);
    }
    .entry-content .aff-compare .col:first-child { border-top: none; }
    .entry-content .aff-banner { flex-wrap: wrap; }
    .entry-content .aff-banner .cta-sm { flex-basis: 100%; text-align: center; }
}

/* =========================================================
   Theme variants (opt-in via body class)
   Add via functions.php body_class filter or manually.
   ========================================================= */

body.theme-warm {
    --c-primary:     #3e2e1c;
    --c-primary-700: #5b4426;
    --c-accent:      #8a5a33;
    --c-accent-soft: #faf3ea;
    --c-ink:         #2a1f14;
    --c-body:        #3f372d;
    --c-muted:       #6b6253;
    --c-subtle:      #a9a091;
    --c-surface:     #faf7f2;
    --c-surface-2:   #f2ece1;
    --c-line:        #ebe3d4;
    --c-line-strong: #d9cdb7;
}

body.theme-mono {
    --c-primary:     #111111;
    --c-primary-700: #2a2a2a;
    --c-accent:      #177245;
    --c-accent-soft: #e9f2ed;
    --c-ink:         #0b0b0d;
    --c-body:        #26262a;
    --c-muted:       #5c5c63;
    --c-subtle:      #9a9aa0;
    --c-surface:     #f7f7f8;
    --c-surface-2:   #ededef;
    --c-line:        #e2e2e5;
    --c-line-strong: #c6c6cb;
}

body.theme-clinical {
    --c-primary:     #0a3d62;
    --c-primary-700: #1660a0;
    --c-accent:      #0891b2;
    --c-accent-soft: #e0f5fa;
    --c-surface:     #f4f9fc;
    --c-surface-2:   #e7f0f6;
    --c-line:        #dce6ed;
}

body.titles-serif .entry-title,
body.titles-serif .entry-content h2,
body.titles-serif .entry-content h3 {
    font-family: var(--ff-serif);
    font-weight: 700;
    letter-spacing: -0.015em;
}

body.density-tight {
    --fs-body: 16px;
    --lh-body: 1.78;
}
body.density-tight .entry-content h2 { font-size: 25px; }
body.density-tight .entry-content h3 { font-size: 19px; }

body.density-airy {
    --fs-body: 18px;
    --lh-body: 1.95;
}

body.width-narrow { --w-content: 680px; }
body.width-wide   { --w-content: 860px; }

/* =========================================================
   Responsive tweaks
   ========================================================= */
@media (max-width: 768px) {
    :root { --fs-body: 16px; }
    .entry-content h2 { font-size: 23px; }
    .entry-content h3 { font-size: 18px; }
    .site-header { position: relative; backdrop-filter: none; -webkit-backdrop-filter: none; }
}