/* 1. 토큰 정의 (1056개 · 시맨틱[S]→컴포넌트[C] 2단 · 편집 단일 출처) */
  :root {
    /* ============================================================
       ◆◆◆ :root 토큰 목차 (Ctrl+F 로 아래 검색어 점프) ◆◆◆
       [S] = 시맨틱(Semantic) · [C] = 컴포넌트(Component)
       편집 단일 출처(single source) = 이 인라인 :root 블록입니다.
       ------------------------------------------------------------
       ── 시맨틱 토큰 ──
        [S] 색상 (color)
        [S] 그림자 (shadow)
        [S] 간격 스케일 (space)
        [S] 모서리 둥글기 (radius)
        [S] 테두리 (border)
        [S] z-index (z)
        [S] 이징 (ease)
        [S] 전환 시간 (duration)
        [S] 폰트 (font)
        [S] 자간 (letter)
        [S] 글씨 크기 스케일 (text)
        [S] 줄간격 (leading)
        [S] 글씨 굵기 (weight)
        [S] 갭 (gap)
        [S] 컨테이너 (container)
        [S] 페이지 여백 (page)
        [S] 섹션 간격 (section)
        [S] 터치 타겟 (touch)
        [S] 아이콘 크기 (icon)
        [S] 포커스 링 (focus)
        [S] 모션 이동값 (motion)
        [S] 헤어라인 (hairline)
        [S] 밑줄 (underline)
        [S] content-visibility (cv)
        [S] 트랜지션 (transition)
       ── 컴포넌트 토큰 ──
        [C] 컴포넌트: footer
        [C] 컴포넌트: hero
        [C] 컴포넌트: sidebar
        [C] 컴포넌트: article
        [C] 컴포넌트: table
        [C] 컴포넌트: badge
        [C] 컴포넌트: category
        [C] 컴포넌트: card
        [C] 컴포넌트: header
        [C] 컴포넌트: input
        [C] 컴포넌트: textarea
        [C] 컴포넌트: btn
        [C] 컴포넌트: drawer
        [C] 컴포넌트: mobile
        [C] 컴포넌트: pill
        [C] 컴포넌트: thumb
        [C] 컴포넌트: avatar
        [C] 컴포넌트: paging
        [C] 컴포넌트: search
        [C] 컴포넌트: protected
        [C] 컴포넌트: cta
        [C] 컴포넌트: logo
        [C] 컴포넌트: tab
        [C] 컴포넌트: sns
        [C] 컴포넌트: quote
        [C] 컴포넌트: code
        [C] 컴포넌트: check
        [C] 컴포넌트: product
        [C] 컴포넌트: reply
        [C] 컴포넌트: toc
        [C] 컴포넌트: reading
        [C] 컴포넌트: popular
        [C] 컴포넌트: affiliate
        [C] 컴포넌트: summary
        [C] 컴포넌트: pros
        [C] 컴포넌트: cons
        [C] 컴포넌트: proscons
        [C] 컴포넌트: conclusion
        [C] 컴포넌트: post
        [C] 컴포넌트: placeholder
        [C] 컴포넌트: ad
        [C] 컴포넌트: module
        [C] 컴포넌트: inline
        [C] 컴포넌트: progress
        [C] 컴포넌트: comments
        [C] 컴포넌트: recent
        [C] 컴포넌트: breadcrumb
        [C] 컴포넌트: aside
        [C] 컴포넌트: related
        [C] 컴포넌트: tag
        [C] 컴포넌트: quiz
       ============================================================ */
    /* ============================================================
       [S] 색상 (color)
       ============================================================ */
    --color-bg: #FAF7F2;
    /* ── 카드 배경 — RGB 트리플렛이 단일 출처 ──────────────────────────────
     *  반투명 변형 rgba(var(--color-card-rgb), α) 이 다크모드에서 자동으로 따라오려면
     *  색을 여기 한 곳에만 적어야 한다. --color-card 는 이 값에서 파생된다.
     *  ⚠ 반투명 카드 표면을 새로 만들 때 rgba(255,255,255,…) 를 직접 쓰지 말 것
     *    (다크에서 안 뒤집혀 밝은 회색 덩어리가 됨 — 실제로 4곳에서 발생했음). */
    --color-card-rgb: 255, 255, 255;
    --color-card: rgb(var(--color-card-rgb));
    /* ── 브랜드 청록 — RGB 트리플렛이 단일 출처 ───────────────────────────
     *  primary 를 참조하는 반투명 토큰(soft·border·focus-ring 등)이 다크모드에서
     *  자동으로 따라오려면 색을 여기 한 곳에만 적어야 한다.
     *  ⚠ 그림자는 이 토큰을 쓰지 말 것 → --shadow-tint-rgb 사용 (다크에서 청록 발광 방지) */
    --color-primary-rgb: 47, 111, 115;
    --color-primary: rgb(var(--color-primary-rgb));
    --color-primary-dark: #24585C;
    --color-primary-soft-alpha: 0.10;
    --color-primary-soft: rgba(var(--color-primary-rgb), var(--color-primary-soft-alpha));
    --color-secondary: #DDE8E3;
    --color-secondary-soft: #EEF5F1;
    /* 민트 눌림(:active) 톤 — secondary 보다 한 단계 진함. 다크에서 자동 전환됨 */
    --color-secondary-strong: #D1E2DA;
    --color-secondary-border-alpha: 0.16;
    --color-secondary-border: rgba(var(--color-primary-rgb), var(--color-secondary-border-alpha));
    /* 옅은 민트 박스 배경 — 재사용용 시맨틱 토큰
     * (#EEF5F1 = 댓글 등록 버튼 / "함께 보면 좋은 글" 박스와 동일.
     *  앞으로 다른 박스 배경에도 var(--color-box-mint-soft) 로 그대로 사용) */
    --color-box-mint-soft: var(--color-secondary-soft);
    --color-accent: #F4A261;
    --color-accent-hover: #F6B27B;
    --color-accent-active: #E8914F;
    --color-accent-soft: #FFF1E3;
    --color-accent-soft-hover: #FCE3CC;
    --color-accent-border: rgba(244, 162, 97, 0.34);
    /* ── accent 표면 위 전경색 (on-accent) — 다크모드 명암비 자동 보정 ──
     *  accent(#F4A261)는 브랜드색이라 다크모드에서도 뒤집지 않는다.
     *  대신 그 위에 얹는 "글자색만" 이 토큰으로 뒤집어 WCAG AA(4.5:1)를 유지한다.
     *    라이트 : #222222 on #F4A261 → 7.72:1  ✅
     *    다크   : #1F1B16 on #F4A261 → 8.31:1  ✅   (보정 전 #F0E8DA = 1.69:1 ❌)
     *  ※ accent 배경 위에 글자를 얹는 모든 컴포넌트는 반드시 이 토큰만 참조할 것. */
    --color-on-accent: var(--color-text);
    --color-notice-bg: #FFF8EF;
    /* 따뜻한 표면 — 이미지가 들어가는 자리의 배경 (.post-hero · .product-thumb)
     *  ⚠ 원시 크림색을 컴포넌트 토큰에 직접 적으면 다크에서 안 뒤집혀
     *    어두운 카드 위에 밝은 크림 덩어리가 남는다. 반드시 이 토큰을 경유할 것. */
    --color-surface-warm: #F7EFE5;
    --color-text: #222222;
    --color-text-strong: #222222;
    --color-muted: #6B7280;
    --color-muted-light: #9CA3AF;
    --color-line: #E8E2DA;
    --color-focus-ring-alpha: 0.28;
    --color-focus-ring: rgba(var(--color-primary-rgb), var(--color-focus-ring-alpha));
    --color-input-focus-bg-alpha: 0.12;
    --color-input-focus-bg: rgba(var(--color-primary-rgb), var(--color-input-focus-bg-alpha));
    /* 아주 옅은 청록 헤어라인 (마무리 박스 · 본문 바로가기 버튼 테두리) */
    --border-hairline-teal-alpha: 0.14;
    --color-footer-copy-mobile: var(--color-muted-light);
    --color-post-lead: var(--color-text);
    --color-article-title: var(--color-text);
    --color-article-body: var(--color-text);
    --color-article-meta: var(--color-muted);
    --color-article-link: var(--color-primary);
    --color-article-mark-bg: var(--color-accent-soft);
    --color-article-mark-text: var(--color-text);
    --color-article-bq-border: var(--color-primary);
    --color-article-bq-bg: var(--color-secondary-soft);
    --color-breadcrumb-link: var(--color-primary);
    --color-breadcrumb-current: var(--color-muted);
    --color-breadcrumb-sep: var(--color-muted-light);
    --color-article-writer: var(--color-article-meta);
    --color-article-meta-label: var(--color-article-writer);
    --color-article-meta-sep: var(--color-article-writer);
    --article-meta-sep: "·";
    --article-modified-open: "(";
    --article-modified-close: ")";
    --color-article-modified: var(--color-article-meta);
    --color-article-views: var(--color-article-meta);
    --color-site-nav-link: #4B5563;
    --color-site-nav-link-hover: var(--color-primary);
    --color-footer-link: var(--color-muted);
    --color-footer-link-hover: var(--color-primary);
    /* ============================================================
       [S] 그림자 (shadow)
       ============================================================ */
    /* ⚠ 그림자 틴트 — --color-primary-rgb 와 의도적으로 분리.
     *   다크모드에서 primary 는 밝아지지만(#7CCBD0), 그림자는 밝히면 청록 발광이 되므로
     *   어두운 원본 청록(47,111,115)을 그대로 유지한다. 절대 primary 트리플렛으로 바꾸지 말 것. */
    --shadow-tint-rgb: 47, 111, 115;
    --shadow-xs: 0 4px 12px rgba(var(--shadow-tint-rgb), 0.04);
    --shadow-md: 0 14px 36px rgba(var(--shadow-tint-rgb), 0.08);
    --shadow-card: 0 12px 30px rgba(var(--shadow-tint-rgb), 0.06);
    --shadow-card-hover: 0 18px 38px rgba(var(--shadow-tint-rgb), 0.11);
    --shadow-header: 0 8px 24px rgba(var(--shadow-tint-rgb), 0.06);
    --shadow-header-mobile-real: 0 8px 22px rgba(var(--shadow-tint-rgb), 0.06);
    --shadow-footer: 0 12px 30px rgba(var(--shadow-tint-rgb), 0.07);
    --shadow-cta: 0 8px 18px rgba(244, 162, 97, 0.22);
    --shadow-cta-mobile-real: 0 7px 18px rgba(244, 162, 97, 0.22);
    --shadow-cta-hover: 0 10px 22px rgba(244, 162, 97, 0.28);
    --shadow-drawer: -18px 0 48px rgba(var(--shadow-tint-rgb), 0.14);
    --shadow-overlay: rgba(34, 34, 34, 0.36);
    --shadow-post-toc: 0 7px 18px rgba(var(--shadow-tint-rgb), 0.045);
    --shadow-post-toc-hover: 0 7px 16px rgba(var(--shadow-tint-rgb), 0.07);
    --shadow-header-mobile: var(--shadow-header-mobile-real);
    --shadow-article-card-mobile: none;
    --shadow-footer-mobile: var(--footer-shadow-mobile-real);
    /* ============================================================
       [S] 간격 스케일 (space)
       ============================================================ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;
    --space-8: 32px;
    --space-9: 36px;
    --space-10: 40px;
    --space-11: 44px;
    --space-12: 48px;
    --space-20: 80px;
    --space-hero-title-bottom-pc: 18px;
    --space-hero-title-bottom-mobile: 14px;
    --space-hero-desc-bottom-pc: 24px;
    --space-hero-desc-bottom-mobile: 22px;
    --space-section-title-bottom-mobile: var(--space-5);
    --space-footer-col-title-bottom-pc: var(--space-3);
    --space-footer-col-title-bottom-mobile: var(--space-2);
    --space-footer-copy-pad-top-pc: var(--space-5);
    --space-footer-copy-pad-top-mobile: var(--space-5);
    --space-post-lead-bottom: var(--space-6);
    --space-header-margin: 34px;
    --space-header-margin-mobile: var(--space-3);  /* 12px - 헤더↔본문 베이지(24→12) · 하드코딩 제거 → space 스케일 */
    --space-hero-pad: 41px;
    --space-section-title-bottom: 24px;
    --space-card-grid-gap: 30px;
    --space-recent-card-pad: 28px;
    --space-footer-margin: 72px;
    --space-footer-margin-mobile: var(--space-3);  /* 12px - 댓글↔푸터 베이지(48→12) · space 스케일 */
    --space-article-pad: 41px;
    --space-article-title-bottom: 17px;
    --space-article-lead-bottom: 24px;
    --space-article-meta-bottom: 28px;
    --space-article-meta-pad-bottom: 26px;
    --space-article-meta-gap: var(--space-3);
    --space-article-meta-item-gap: 5px;
    --space-article-thumb-bottom: 28px;
    --space-article-affiliate-bottom: 28px;
    --space-article-summary-bottom: 34px;
    --space-article-h2-top: 42px;
    --space-article-h2-bottom: 15px;
    --space-article-h3-top: 30px;
    --space-article-h3-bottom: 11px;
    --space-article-paragraph-bottom: 19px;
    --space-article-ad-y: 32px;
    --article-footer-ad-gap: var(--space-3);             /* 채워진 광고 ↔ 태그/관련글 하단 여백 (필요시 0 / --space-4) */
    --space-article-product-y: 26px;
    --space-article-related-top: 32px;
    --space-card-pad-mobile-real: 28px;
    --space-cta-h-mobile: 50px;
    --space-table-pad-y: 16px;
    --space-table-pad-x: 17px;
    --space-table-top: 22px;
    --space-table-bottom: 32px;
    --space-category-title-bottom-pc: 10px;
    --space-category-title-bottom-mobile: var(--space-2);
    --space-affiliate-top-pc: 54px;
    --space-affiliate-top-mobile: 44px;
    --space-affiliate-bottom-mobile: 18px;
    --space-article-breadcrumb-bottom: 24px;
    --space-article-pad-mobile: var(--space-3);  /* 12px - 본문카드 안쪽 좌우 슬림(28→12) · 베이지와 동일값 통일 · space 스케일 */
    --space-article-title-bottom-mobile: 14px;
    --space-article-lead-bottom-mobile: var(--space-5);
    --space-article-meta-gap-mobile: 9px;
    --space-article-meta-pad-bottom-mobile: 22px;
    --space-article-meta-bottom-mobile: var(--space-6);
    --space-article-thumb-bottom-mobile: var(--space-6);
    --space-article-summary-bottom-mobile: 30px;
    --space-article-h2-top-mobile: var(--space-9);
    --space-article-h2-bottom-mobile: 13px;
    --space-article-h3-top-mobile: 26px;
    --space-article-h3-bottom-mobile: 10px;
    --space-article-paragraph-bottom-mobile: 18px;
    --space-article-ad-y-mobile: 30px;
    --space-table-top-mobile: var(--space-5);
    --space-table-bottom-mobile: 30px;
    --space-article-product-y-mobile: var(--space-6);
    /* ============================================================
       [S] 모서리 둥글기 (radius)
       ============================================================ */
    --radius-xs: 8px;
    --radius-sm: 12px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --radius-2xl: 24px;
    --radius-3xl: 28px;
    --radius-4xl: 32px;
    --radius-pill: 999px;
    /* ============================================================
       [S] 테두리 (border)
       ============================================================ */
    --border-soft: 1px solid var(--color-line);
    --border-teal: 1px solid var(--color-secondary-border);
    --border-accent: 1px solid var(--color-accent-border);
    /* ============================================================
       [S] z-index (z)
       ============================================================ */
    --z-base: 1;
    --z-raised: 2;   /* stretched-link 오버레이 위로 올릴 요소(카드 배지 등) */
    --z-header: 50;
    --z-overlay: 100;
    --z-drawer: 110;
    --z-modal: 200;
    /* ============================================================
       [S] 이징 (ease)
       ============================================================ */
    --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
    /* ============================================================
       [S] 전환 시간 (duration)
       ============================================================ */
    --duration-fast: 0.16s;
    --duration-base: 0.22s;
    --duration-slow: 0.36s;
    --duration-toc: 0.18s;
    /* ============================================================
       [S] 폰트 (font)
       ============================================================ */
    --font-base: -apple-system, BlinkMacSystemFont, "Noto Sans KR", "Segoe UI", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, "Courier New", monospace;
    /* ============================================================
       [S] 자간 (letter)
       ============================================================ */
    --letter-spacing: -0.02em;
    --letter-spacing-logo: -0.04em;
    --letter-spacing-section: -0.05em;
    --letter-spacing-hero: -0.06em;
    --letter-spacing-tight: -0.045em;
    --letter-spacing-display: -0.055em;
    /* ============================================================
       [S] 글씨 크기 스케일 (text)
       ============================================================ */
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 17px;
    --text-2xl: 18px;
    --text-3xl: 20px;
    --text-4xl: 21px;
    --text-5xl: 24px;
    --text-7xl: 32px;
    --text-mobile-section: 25px;
    --text-logo-pc: 26px;
    --text-logo-mobile: 24px;
    --text-hero-title-pc: 47px;
    --text-hero-title-mobile: 32px;
    --text-hero-desc-pc: 17px;
    --text-hero-desc-mobile: 16px;
    --text-section-title-pc: 29px;
    --text-section-title-mobile: 25px;
    --text-menu-cat-pc: 16px;
    --text-menu-cat-mobile: 17px;
    --text-mobile-menu-blog: 25px;
    --text-mobile-menu-desc: 14px;
    --text-recent-title-mobile: 16px;
    --text-date-mobile: 13px;
    --text-foot-link-pc: 15px;
    --text-foot-link-mobile: 14px;
    --text-cta-pc: 14px;
    --text-cta-mobile: 14px;
    --text-search-pc: 15px;
    --text-search-mobile: 14px;
    --text-affiliate-pc: 15px;
    --text-affiliate-mobile: 14px;
    --text-affiliate-title-pc: 16px;
    --text-affiliate-title-mobile: 15px;
    --text-post-card-title-pc: 24px;
    --text-post-card-summary-pc: 15px;
    --text-post-card-date-pc: 14px;
    --text-footer-brand-title-pc: 24px;
    --text-footer-brand-title-mobile: 24px;
    --text-footer-brand-desc-pc: 15px;
    --text-footer-brand-desc-mobile: 14px;
    --text-footer-col-title-pc: 18px;
    --text-footer-col-title-mobile: 17px;
    --text-footer-copy-pc: 13px;
    --text-footer-copy-mobile: 12.5px;
    --text-footer-tagline-pc: 13px;
    --text-footer-tagline-mobile: 13px;
    --text-footer-affiliate-pc: 15px;
    --text-footer-affiliate-mobile: 14px;
    --text-section-desc-pc: 15px;
    --text-section-more-pc: 15px;
    --text-sidebar-title-pc: 25px;
    --text-hero-side-title-pc: 25px;
    --text-hero-side-title-mobile: 23px;
    --text-hero-side-desc-pc: 14px;
    --text-hero-side-link-pc: 16px;
    --text-hero-side-link-mobile: 15.5px;
    --text-category-title-pc: 22px;
    --text-category-title-mobile: 20px;
    --text-category-desc-pc: 15px;
    --text-category-desc-mobile: 15px;
    --text-cta-band-title-pc: 28px;
    --text-cta-band-title-mobile: 25px;
    --text-cta-band-desc-pc: 15px;
    --text-cta-pill-pc: 15px;
    --text-article-body-pc: 17px;
    --text-article-body-mobile: 16px;
    --text-article-title-pc: 46px;
    --text-article-title-mobile: 31px;
    --text-article-h2-pc: 29px;
    --text-article-h2-mobile: 25px;
    --text-article-h3-pc: 22px;
    --text-article-h3-mobile: 20px;
    --text-article-h4-pc: 20px;
    --text-article-h4-mobile: 18px;
    --text-article-h5-pc: 17px;
    --text-article-h5-mobile: 16px;
    --text-article-h6-pc: 16px;
    --text-article-h6-mobile: 15px;
    --text-article-lead-pc: 17px;
    --text-article-lead-mobile: 16px;
    --text-ke-size-12-mobile: 12px;
    --text-ke-size-14-mobile: 13px;
    --text-ke-size-15-mobile: 14px;
    --text-ke-size-16-mobile: 15px;
    --text-ke-size-17-mobile: 16px;
    --text-ke-size-18-mobile: 16px;
    --text-ke-size-20-mobile: 18px;
    --text-ke-size-22-mobile: 20px;
    --text-ke-size-24-mobile: 22px;
    --text-ke-size-26-mobile: 24px;
    --text-ke-size-28-mobile: 26px;
    --text-ke-size-30-mobile: 28px;
    --text-ke-size-32-mobile: 30px;
    --text-ke-size-34-mobile: 32px;
    --text-ke-size-36-mobile: 34px;
    --text-ke-size-38-mobile: 36px;
    --text-post-lead-pc: 17px;
    --text-post-lead-mobile: 16px;
    --text-article-meta-pc: 14px;
    --text-article-meta-mobile: 13px;
    --text-article-small-pc: 13px;
    --text-article-small-mobile: 13px;
    --text-article-blockquote-pc: 15px;
    --text-article-blockquote-mobile: 15px;
    --text-article-code-pc: 14px;
    --text-article-code-mobile: 14px;
    --text-article-foot-title-pc: 18px;
    --text-table: 15px;
    --text-ke-size-12: 12px;
    --text-ke-size-14: 14px;
    --text-ke-size-15: 15px;
    --text-ke-size-16: 16px;
    --text-ke-size-17: 17px;
    --text-ke-size-18: 18px;
    --text-ke-size-20: 20px;
    --text-ke-size-22: 22px;
    --text-ke-size-24: 24px;
    --text-ke-size-26: 26px;
    --text-ke-size-28: 28px;
    --text-ke-size-30: 30px;
    --text-ke-size-32: 32px;
    --text-ke-size-34: 34px;
    --text-ke-size-36: 36px;
    --text-ke-size-38: 38px;
    --text-table-mobile: 14px;
    --text-code-inline: 0.92em;
    --text-kbd-inline: 0.9em;
    /* ============================================================
       [S] 줄간격 (leading)
       ============================================================ */
    --leading-hero-title-pc: 1.18;
    --leading-hero-title-mobile: 1.25;
    --leading-foot-link: 1.7;
    --leading-hero-side-link-pc: 1.7;
    --leading-hero-side-link-mobile: 1.76;
    --leading-post-lead: var(--leading-relaxed);
    --leading-display: 1.22;
    --leading-tight: 1.25;
    --leading-h2: 1.35;
    --leading-h3: 1.38;
    --leading-snug: 1.4;
    --leading-form: 1.5;
    --leading-pros: 1.55;
    --leading-normal: 1.6;
    --leading-relaxed: 1.7;
    --leading-product-desc: 1.68;
    --leading-list: 1.76;
    --leading-loose: 1.78;
    --leading-body: 1.7;
    --leading-body-mobile: 1.78;
    --leading-hero-desc: 1.78;
    --leading-hero-desc-mobile: 1.80;
    --leading-recent-title-pc: 1.52;
    --leading-recent-title-mobile: 1.56;
    --leading-category-desc: 1.72;
    --leading-display-mobile: 1.28;
    --leading-reset: 1.15;   /* html 리셋 베이스라인(normalize) — 하드코딩 제거 */
    --leading-affiliate-mobile: var(--leading-product-desc);
    --leading-h2-mobile: 1.36;
    /* ============================================================
       [S] 글씨 굵기 (weight)
       ============================================================ */
    --weight-menu-cat: var(--weight-bold);
    --weight-menu-cat-mobile: var(--weight-extrabold);
    --weight-footer-col-title: var(--weight-black);
    --weight-post-lead: var(--weight-medium);
    --weight-article-meta: var(--weight-article-writer);
    --weight-article-title: var(--weight-black);
    --weight-article-h2: var(--weight-black);
    --weight-article-h3: var(--weight-extrabold);
    --weight-article-h4: var(--weight-bold);
    --weight-article-h5: var(--weight-bold);
    --weight-article-h6: var(--weight-bold);
    --weight-article-body: var(--weight-normal);
    --weight-article-strong: var(--weight-extrabold);
    --weight-article-lead: var(--weight-medium);
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    --weight-extrabold: 800;
    --weight-black: 900;
    --weight-article-writer: var(--weight-medium);
    --weight-article-meta-label: var(--weight-article-writer);
    /* ============================================================
       [S] 갭 (gap)
       ============================================================ */
    --gap-hero-side-list-pc: 14px;
    --gap-hero-side-list-mobile: 13px;
    /* ============================================================
       [S] 컨테이너 (container)
       ============================================================ */
    --container-max: 1170px;
    --content-col-w-pc: calc(var(--container-max) - var(--sidebar-width) - var(--sidebar-gap));
    /* ============================================================
       [S] 페이지 여백 (page)
       ============================================================ */
    --page-pad-top: 40px;
    --page-pad-x: 24px;
    --page-pad-bottom: 76px;
    --page-pad-mobile-top: var(--space-3);  /* 12px - 헤더 위 베이지(30→12) · 하드코딩 제거 → space 스케일 */
    --page-pad-mobile-x: var(--space-3);  /* 12px - 베이지 가장자리 슬림(18→12) · 하드코딩 제거 → space 스케일 */
    --page-pad-mobile-bottom: var(--space-3);  /* 12px - 푸터 아래 베이지(64→12) · 하드코딩 제거 → space 스케일 */
    /* ============================================================
       [S] 섹션 간격 (section)
       ============================================================ */
    --section-gap: 52px;
    --section-gap-mobile: 42px;
    /* ============================================================
       [S] 터치 타겟 (touch)
       ============================================================ */
    --touch-target-min: 44px;
    --touch-target-comfort: 48px;
    /* ============================================================
       [S] 아이콘 크기 (icon)
       ============================================================ */
    --icon-xl: 44px;
    /* ============================================================
       [S] 포커스 링 (focus)
       ============================================================ */
    --focus-ring-w: 3px;
    --focus-ring-offset: 3px;
    --focus-ring-spread: 4px;
    --focus-outline-w: 2px;
    --focus-outline-offset: 2px;
    /* ============================================================
       [S] 모션 이동값 (motion)
       ============================================================ */
    --motion-shift-sm: 2px;
    --motion-shift-md: 3px;
    /* ============================================================
       [S] 헤어라인 (hairline)
       ============================================================ */
    --hairline: 1px;
    --hairline-neg: -1px;
    /* ============================================================
       [S] 밑줄 (underline)
       ============================================================ */
    /* ============================================================
       [S] content-visibility (cv)
       ============================================================ */
    --cv-intrinsic-h-sm: 100px;
    --cv-intrinsic-h-md: 300px;
    --cv-intrinsic-h-lg: 600px;
    /* ============================================================
       [S] 트랜지션 (transition)
       ============================================================ */
    --transition-card: transform var(--duration-base) var(--ease-soft), box-shadow var(--duration-base) var(--ease-soft), background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;
    /* ============================================================
       [C] 컴포넌트: footer
       ============================================================ */
    --footer-bottom-gap-pc: var(--space-5);
    --footer-bottom-gap-mobile: var(--space-2);
    --footer-grid-col-gap-pc: var(--space-12);
    --footer-grid-row-gap-pc: var(--space-4);
    --footer-grid-cols-pc: 1.4fr 1fr 1fr 1.4fr;   /* 4열 비율 — 하드코딩 제거 */
    --footer-radius-pc: var(--radius-4xl);
    --footer-radius-mobile: var(--radius-3xl);
    --footer-pad-pc: var(--space-7) var(--space-10);
    --footer-pad-mobile: var(--space-6) var(--space-5);
    --footer-shadow-pc: var(--shadow-footer);
    --footer-shadow-mobile-real: 0 10px 28px rgba(var(--shadow-tint-rgb), 0.07);
    --footer-section-gap-mobile: var(--space-4);
    /* ============================================================
       [C] 컴포넌트: hero
       ============================================================ */
    --hero-side-radius-pc: var(--radius-3xl);
    --hero-side-radius-mobile: 26px;
    --hero-side-pad-pc: 31px;
    --hero-side-pad-mobile: 28px;
    --hero-side-shadow-pc: 0 10px 28px rgba(var(--shadow-tint-rgb), 0.06);
    --hero-side-shadow-mobile: 0 10px 28px rgba(var(--shadow-tint-rgb), 0.06);
    --hero-desc-max: 520px;
    --hero-card-radius-pc: 34px;
    --hero-card-radius-mobile: 30px;
    --hero-card-min-h-pc: 330px;
    --hero-card-min-h-mobile: auto;
    --hero-card-pad-pc: var(--space-hero-pad);
    --hero-card-pad-mobile: 30px;
    --hero-card-gap-pc: 27px;
    --hero-card-gap-mobile: 22px;
    --hero-card-shadow-pc: var(--shadow-md);
    --hero-card-shadow-mobile: 0 12px 30px rgba(var(--shadow-tint-rgb), 0.07);
    --hero-main-fr: 2fr;
    --hero-side-fr: 1fr;
    --hero-main-fr-mobile: 1.2fr;   /* 좁은 화면 비율 완화 — 하드코딩 제거 */
    --hero-side-fr-mobile: 1fr;
    --hero-tag-pad-y: var(--space-2);
    --hero-tag-pad-x: 15px;
    /* ============================================================
       [C] 컴포넌트: sidebar
       ============================================================ */
    --sidebar-width: 300px;
    --sidebar-gap: 27px;
    --sidebar-card-pad-pc: 31px;
    --sidebar-card-pad-mobile: 28px 30px;
    --sidebar-card-radius-pc: 30px;
    --sidebar-card-radius-mobile: var(--radius-3xl);
    --sidebar-card-shadow-pc: 0 10px 28px rgba(var(--shadow-tint-rgb), 0.06);
    --sidebar-card-shadow-mobile: 0 10px 26px rgba(var(--shadow-tint-rgb), 0.06);
    --sidebar-card-gap-pc: 29px;
    --sidebar-card-gap-mobile: 22px;
    /* ============================================================
       [C] 컴포넌트: article
       ============================================================ */
    --article-meta-border-bottom: var(--border-soft);
    --article-card-radius: 30px;
    --article-card-shadow: 0 14px 36px rgba(var(--shadow-tint-rgb), 0.08);
    --article-footer-border-top: none;
    --article-tag-y: 32px;
    --article-tag-bottom: var(--space-3);
    --article-tag-gap: 9px;
    --article-page-cols: 2;
    --article-page-gap: var(--space-3);
    --article-page-top: 28px;
    --article-page-pad-top: var(--space-6);
    --article-page-border-top: var(--border-soft);
    --article-page-card-bg: transparent;
    --article-page-card-border: var(--border-soft);
    --article-page-card-radius: var(--radius-lg);
    --article-page-card-pad-y: 17px;
    --article-page-card-pad-x: 18px;
    --article-page-card-shadow: none;
    --article-page-card-bg-hover: var(--color-secondary-soft);
    --article-card-radius-mobile: var(--radius-3xl);
    --article-tag-y-mobile: 30px;
    --article-tag-bottom-mobile: var(--space-3);
    --article-page-cols-mobile: 1;
    --article-page-gap-mobile: 10px;
    --article-page-card-pad-y-mobile: var(--space-4);
    --article-page-card-pad-x-mobile: 17px;
    --article-page-card-radius-mobile: var(--radius-lg);
    --article-figure-max-w: 100%;
    --article-figure-img-h: auto;
    --article-summary-source-display: none;
    /* ============================================================
       [C] 컴포넌트: table
       ============================================================ */
    --table-radius: var(--radius-xl);
    /* ============================================================
       [C] 컴포넌트: badge
       ============================================================ */
    --badge-min-h: 32px;
    --badge-pad-y: 6px;
    --badge-pad-x: 12px;
    --badge-text: 13px;
    --badge-weight: var(--weight-black);
    --badge-radius: var(--radius-pill);
    /* ============================================================
       [C] 컴포넌트: category
       ============================================================ */
    --category-label-pad-y: 7px;
    --category-label-pad-x: 14px;
    --category-label-bottom: 18px;
    --category-cards-cols-pc: 5;
    --category-cards-cols-mobile: 1;
    --category-cards-gap-pc: 22px;
    --category-cards-gap-mobile: 18px;
    --category-card-pad-pc: 29px;
    --category-card-pad-mobile: 26px 28px;
    --category-card-min-h-pc: 200px;
    --category-card-min-h-mobile: 180px;
    --category-card-radius-pc: 30px;
    --category-card-radius-mobile: var(--radius-3xl);
    --category-card-shadow-pc: 0 10px 26px rgba(var(--shadow-tint-rgb), 0.06);
    --category-card-shadow-mobile: 0 10px 24px rgba(var(--shadow-tint-rgb), 0.06);
    --category-icon-size-pc: 52px;
    --category-icon-size-mobile: 48px;
    --category-icon-radius-pc: var(--radius-lg);
    --category-icon-radius-mobile: var(--space-4);
    --category-label-pad-y-mobile: 7px;
    --category-label-pad-x-mobile: 13px;
    --category-label-bottom-mobile: var(--space-4);
    /* ============================================================
       [C] 컴포넌트: card
       ============================================================ */
    --card-bg: var(--color-card);
    --card-radius: var(--radius-3xl);
    --card-pad: var(--space-8);
    --card-pad-mobile: var(--space-6);
    --card-shadow: var(--shadow-card);
    /* ============================================================
       [C] 컴포넌트: header
       ============================================================ */
    --header-pad-y: 26px;
    --header-pad-x: 32px;
    --header-pad-mobile-y: var(--space-3);  /* 12px - 모바일 헤더 슬림(24→12) · 하드코딩 제거 → space 스케일 */
    --header-pad-mobile-x: 22px;
    --header-radius-pc: 28px;
    --header-radius-mobile: 24px;
    --header-menu-gap-pc: 24px;
    --header-menu-gap-mobile: 16px;
    --header-radius: var(--header-radius-pc);
    --header-menu-gap: var(--header-menu-gap-pc);
    /* ============================================================
       [C] 컴포넌트: input
       ============================================================ */
    --input-h: 48px;
    --input-h-mobile: 52px;
    --input-radius: var(--radius-lg);
    --input-pad: 0 var(--space-4);
    --input-bg: var(--color-card);
    --input-border: var(--border-soft);
    --input-line: var(--leading-form);
    /* ============================================================
       [C] 컴포넌트: textarea
       ============================================================ */
    --textarea-radius: 22px;
    --textarea-pad: 16px 18px;
    --textarea-min-h: 120px;
    /* ============================================================
       [C] 컴포넌트: btn
       ============================================================ */
    --btn-h: 48px;
    --btn-h-sm: 40px;
    --btn-h-lg: 54px;
    --btn-radius: var(--radius-lg);
    --btn-pad-x: var(--space-6);
    --btn-cta-pad-y-pc: 15px;
    --btn-cta-pad-x-pc: 25px;
    --btn-cta-pad-y-mobile: 14px;
    --btn-cta-pad-x-mobile: 22px;
    --btn-cta-font-pc: 16px;
    --btn-cta-font-mobile: 15px;
    --btn-cta-weight: var(--weight-black);
    --btn-cta-radius-pc: var(--radius-lg);
    --btn-cta-radius-mobile: var(--space-4);
    --btn-cta-width-pc: auto;
    --btn-cta-width-mobile: 100%;
    --btn-cta-min-h-pc: 54px;
    --btn-cta-min-h-mobile: 50px;
    --btn-cta-h-pc: auto;                            /* .btn 베이스 height:48px 무력화 — padding 이 높이 결정 */
    --btn-cta-bg: var(--color-accent);
    --btn-cta-bg-hover: var(--color-accent-hover);
    --btn-cta-bg-active: var(--color-accent-active);
    --btn-cta-color: var(--color-on-accent);         /* 다크모드 명암비 자동 보정 */
    --btn-cta-border: var(--border-accent);
    --btn-cta-shadow: var(--shadow-cta);
    --btn-cta-shadow-hover: var(--shadow-cta-hover);
    /* ============================================================
       [C] 컴포넌트: drawer
       ============================================================ */
    --drawer-w: 340px;
    --drawer-w-vw: 82vw;
    --drawer-radius: var(--radius-3xl);
    --drawer-pad: 28px 24px 34px;
    --drawer-pad-top: 28px;
    /* 시안1 헤더 — 색 박스 없이 로고+설명+아래 구분선 (위 --drawer-profile-* 박스 토큰은 미사용으로 전환) */
    --drawer-head-pad-bottom: var(--space-5);    /* 20 - 로고/설명 아래 ~ 구분선 여백 */
    --drawer-head-divider: var(--border-soft);   /* 1px solid #E8E2DA - 헤더 하단 구분선 */
    --drawer-head-margin-bottom: var(--space-5); /* 20 - 구분선 ~ 검색창 간격 (시안 18 ≈ 20) */
    --drawer-logo-margin-bottom: var(--space-2); /* 8 - 로고 ~ 설명 간격 */
    --drawer-menu-h: 54px;
    --drawer-shadow: none;
    --drawer-recent-title-size: 14px;
    --drawer-recent-date-size: 12px;
    /* ============================================================
       [C] 컴포넌트: mobile
       ============================================================ */
    --mobile-chev-color: var(--color-text);
    --mobile-chev-weight: var(--weight-extrabold);
    --mobile-chev-font-size: 17px;
    --mobile-chev-line-height: 1;
    --mobile-cat-bullet-content: '·';
    --mobile-cat-bullet-color: var(--color-text);
    --mobile-cat-bullet-weight: var(--weight-extrabold);
    --mobile-cat-bullet-font-size: 17px;
    --mobile-cat-bullet-line-height: 1;
    --mobile-menu-cats-margin-top: var(--space-3);
    --mobile-drawer-section-pad-x: var(--space-3);
    --mobile-drawer-item-pad-x: var(--space-6);
    --mobile-drawer-recent-end-margin: 0;
    --mobile-drawer-recent-hairline-inset: var(--mobile-drawer-item-pad-x);
    --mobile-drawer-recent-hairline-height: 1px;
    --mobile-drawer-recent-hairline-color: var(--color-line);
    --mobile-drawer-text-word-break: keep-all;
    --mobile-toggle-size: var(--space-10);  /* 40px - 헤더 추가 슬림(46→40) · 하드코딩 제거 → space 스케일 */
    --mobile-toggle-radius: var(--radius-md);
    --mobile-toggle-bg: var(--color-card);
    --mobile-toggle-border: var(--border-soft);
    --mobile-toggle-shadow: 0 4px 12px rgba(var(--shadow-tint-rgb), 0.05);
    --mobile-close-size: var(--touch-target-min);
    /* 시안1 닫기 버튼 — 둥근 사각형·흰 배경·1px 테두리·다크 × (이전: 원형 민트 배경+teal ×) */
    --mobile-close-bg: var(--color-card);          /* #FFFFFF 흰 배경 */
    --mobile-close-color: var(--color-text);       /* #222222 다크 × */
    --mobile-close-border: var(--border-soft);     /* 1px solid #E8E2DA 테두리 */
    --mobile-close-radius: var(--radius-md);        /* 14 둥근 사각형 */
    --mobile-close-bg-hover: var(--color-secondary-soft); /* 호버 시 옅은 민트 */
    --mobile-link-h: var(--drawer-menu-h);
    --mobile-recent-tab-font-size: 15px;
    --mobile-recent-tab-font-weight: var(--weight-extrabold);
    --mobile-recent-tab-gap: var(--space-2);
    --mobile-recent-tab-margin-top: var(--space-5);
    --mobile-recent-tab-margin-bottom: var(--space-4);
    --mobile-recent-tab-color-on: var(--color-text);
    --mobile-recent-tab-color-off: var(--color-muted);
    --mobile-recent-tab-sep-color: var(--color-line);
    --mobile-recent-tab-bg: transparent;
    --mobile-recent-tab-border: 0;
    --mobile-recent-tab-padding: 0;
    --mobile-recent-tab-cursor: pointer;
    /* ============================================================
       [C] 컴포넌트: pill
       ============================================================ */
    --pill-h-sm: 32px;
    --pill-h-lg: 36px;
    --pill-h-xl: 38px;
    --pill-h-3xl: 46px;
    /* ============================================================
       [C] 컴포넌트: thumb
       ============================================================ */
    --thumb-md: 60px;
    /* ============================================================
       [C] 컴포넌트: avatar
       ============================================================ */
    --avatar-md: 80px;
    /* ============================================================
       [C] 컴포넌트: paging
       ============================================================ */
    --paging-h: 40px;
    --paging-h-mobile: var(--touch-target-min);
    --paging-min-w: 40px;
    --paging-min-w-mobile: var(--touch-target-min);
    --paging-margin-top: var(--space-9);
    --paging-margin-top-mobile: var(--space-7);
    /* ============================================================
       [C] 컴포넌트: search
       ============================================================ */
    --search-w-pc: 280px;
    --search-w-tablet: 200px;
    --search-btn-size: 36px;
    /* 시안1 모바일 검색 박스 — 크림 배경 + 민트 칩(teal 돋보기) 버튼 */
    --mobile-search-box-bg: var(--color-bg);            /* #FAF7F2 크림 배경 (이전: 흰색) */
    --mobile-search-chip-bg: var(--color-secondary);    /* #DDE8E3 민트 칩 배경 */
    --mobile-search-chip-color: var(--color-primary);   /* #2F6F73 teal 돋보기 (이전: 회색) */
    --mobile-search-chip-radius: var(--radius-sm);       /* 12 둥근 사각형 칩 */
    --mobile-search-chip-size: var(--space-9);           /* 36 - 시안1처럼 칩 축소 (이전 44, 박스 안 여백 확보) */
    --mobile-search-chip-nudge-y: 1px;                   /* 칩을 세로 중앙에서 살짝 아래로 (사용자 광학 보정: 2px는 과해 1px로) */
    /* ============================================================
       [C] 컴포넌트: protected
       ============================================================ */
    --protected-form-max: 360px;
    /* ============================================================
       [C] 컴포넌트: cta
       ============================================================ */
    --cta-text-flex-min: 360px;
    --cta-bg: var(--color-accent);
    --cta-bg-hover: var(--color-accent-hover);
    --cta-bg-active: var(--color-accent-active);
    --cta-color: var(--color-on-accent);             /* 다크모드 명암비 자동 보정 */
    --cta-border: 1px solid rgba(244, 162, 97, 0.32);
    --cta-radius: 17px;
    --cta-min-h: 50px;
    --cta-pad-y: 14px;
    --cta-pad-x: 23px;
    --cta-font-size: 14px;
    --cta-font-weight: var(--weight-black);
    --cta-shadow: var(--shadow-cta);                 /* 동일값 중복 제거 — 단일 출처 */
    --cta-radius-mobile: var(--space-4);
    --cta-min-h-mobile: var(--btn-h);
    --cta-pad-y-mobile: var(--space-4);
    --cta-pad-x-mobile: var(--space-5);
    --cta-font-size-mobile: 14px;
    --cta-width-mobile: 100%;
    /* ── 모바일 드로어 CTA (.mobile-menu-cta / .mobile-menu-cta-fallback) ── */
    --mobile-menu-cta-h: var(--space-cta-h-mobile);
    --mobile-menu-cta-gap: var(--space-4);
    --mobile-menu-cta-pad-x: var(--space-6);
    --mobile-menu-cta-bg: var(--btn-cta-bg);
    --mobile-menu-cta-bg-hover: var(--btn-cta-bg-hover);
    --mobile-menu-cta-bg-active: var(--btn-cta-bg-active);
    --mobile-menu-cta-color: var(--btn-cta-color);
    --mobile-menu-cta-radius: var(--radius-lg);
    --mobile-menu-cta-font-size: var(--text-cta-mobile);
    --mobile-menu-cta-font-weight: var(--weight-bold);
    --mobile-menu-cta-border: var(--btn-cta-border);
    --mobile-menu-cta-shadow: var(--btn-cta-shadow);
    --mobile-menu-cta-shadow-hover: var(--btn-cta-shadow-hover);
    /* ── 본문 CTA 박스 버튼 (.box-cta__btn) ──
     *  ※ 이전 전경색 var(--color-card)(#FFFFFF) 는 라이트모드에서 2.06:1 로 AA 미달이었음 */
    --box-cta-btn-min-h: var(--touch-target-comfort);
    --box-cta-btn-pad-x: var(--space-7);
    --box-cta-btn-bg: var(--btn-cta-bg);
    --box-cta-btn-bg-hover: var(--btn-cta-bg-hover);
    --box-cta-btn-color: var(--color-on-accent);
    --box-cta-btn-radius: var(--btn-radius);
    --box-cta-btn-font-weight: var(--weight-bold);
    /* ============================================================
       [C] 컴포넌트: logo
       ============================================================ */
    --logo-img-max-h: 36px;
    /* ============================================================
       [C] 컴포넌트: tab
       ============================================================ */
    --tab-line-w: 2px;
    --tab-h: 40px;
    /* ============================================================
       [C] 컴포넌트: sns
       ============================================================ */
    --sns-icon-size: 32px;
    --sns-icon-size-mobile: var(--touch-target-min);
    /* ============================================================
       [C] 컴포넌트: quote
       ============================================================ */
    --quote-border-w: 4px;
    /* ============================================================
       [C] 컴포넌트: code
       ============================================================ */
    --code-pad-y: 2px;
    --code-pad-x: 6px;
    /* ============================================================
       [C] 컴포넌트: check
       ============================================================ */
    --check-mark-top: 8px;
    --check-mark-size: 16px;
    --check-mark-icon: 10px;
    /* 체크 글리프 — mask 로 쓰므로 SVG 안에 색을 넣지 않는다(알파만 사용).
     *  색은 아래 --check-mark-color / --google-check-color 토큰이 결정 → 다크 자동 전환. */
    /* ⚠ '<' '>' 를 %3C %3E 로 URL 인코딩해 둔 것은 의도적입니다.
     *   블로거 <b:skin> 파서가 CDATA 안의 '<태그>' 를 XML 로 긁어가 테마 저장이 실패합니다.
     *   원래 형태(<svg …>)로 되돌리지 마세요. 브라우저 동작은 완전히 동일합니다. */
    --check-mark-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    /* 청록 원 위의 체크 — 라이트 #FFFFFF / 다크 #2A2520 (원이 밝아지므로 체크는 어두워짐) */
    --check-mark-color: var(--color-card);
    /* .box-google-check 체크 (원 없음, 아이콘 단독) */
    --google-check-color: var(--color-primary);
    --check-row-pad-y: 6px;
    --check-icon-w: 18px;
    --check-icon-mt: 4px;
    /* ============================================================
       [C] 컴포넌트: product
       ============================================================ */
    --product-thumb-w: 160px;
    --product-bg: var(--color-card);
    --product-border: var(--border-soft);
    --product-radius: 26px;
    --product-pad: 26px;
    --product-shadow: 0 10px 28px rgba(var(--shadow-tint-rgb), 0.07);
    --product-gap: 22px;
    --product-thumb-h: 142px;
    --product-thumb-radius: var(--radius-xl);
    --product-thumb-border: var(--border-soft);
    --product-thumb-bg: var(--color-surface-warm);
    --product-label-bg: var(--color-secondary);
    --product-label-color: var(--color-primary);
    --product-label-radius: var(--radius-pill);
    --product-label-pad-y: 6px;
    --product-label-pad-x: 12px;
    --product-label-size: 12px;
    --product-label-bottom: 10px;
    --product-name-size: 22px;
    --product-name-bottom: var(--space-2);
    --product-name-color: var(--color-article-title);
    --product-desc-size: 15px;
    --product-desc-line: var(--leading-product-desc);
    --product-desc-color: var(--color-article-meta);
    --product-stats-cols: 3;
    --product-stats-gap: 10px;
    --product-stat-bg: var(--color-notice-bg);
    --product-stat-border: var(--border-soft);
    --product-stat-radius: 15px;
    --product-stat-pad: 11px;
    --product-stat-font-size: 13px;
    --product-stat-line: var(--leading-pros);
    --product-stat-label-size: 13px;
    --product-stat-label-color: var(--color-article-title);
    --product-stat-label-weight: var(--weight-extrabold);
    --product-stat-value-size: 13px;
    --product-stat-value-color: var(--color-article-meta);
    --product-stat-gap: var(--space-1);
    --product-cta-h: var(--cta-min-h);
    --product-radius-mobile: var(--radius-2xl);
    --product-pad-mobile: 22px;
    --product-gap-mobile: 18px;
    --product-shadow-mobile: 0 8px 22px rgba(var(--shadow-tint-rgb), 0.055);
    --product-thumb-w-mobile: 100%;
    --product-thumb-h-mobile: 220px;
    --product-thumb-radius-mobile: var(--radius-xl);
    --product-name-size-mobile: 20px;
    --product-desc-size-mobile: 14.5px;
    --product-label-size-mobile: 12px;
    --product-stats-cols-mobile: 1;
    /* ============================================================
       [C] 컴포넌트: reply
       ============================================================ */
    --reply-avatar-size: 44px;
    --reply-submit-bg: var(--color-secondary-soft);
    --reply-submit-color: var(--color-text);
    --reply-submit-border: var(--border-teal);
    --reply-submit-bg-hover: var(--color-secondary);
    --reply-submit-color-hover: var(--color-primary);
    --reply-submit-h: var(--btn-h);
    --reply-submit-pad-x: var(--btn-pad-x);
    --reply-submit-radius: var(--btn-radius);
    --reply-submit-font-size: 15px;
    --reply-submit-font-weight: var(--weight-bold);
    --reply-submit-white-space: nowrap;
    /* 본문 콘텐츠 링크 알약(.article-view p a / td a)
     * 댓글 등록 버튼과 동일한 민트 박스 패턴(secondary-soft + teal 테두리)을 쓰되
     * 박스 크기만 축소(radius·padding·font 작게). 초록(teal) 글씨·밑줄은 미사용. */
    --article-link-pill-bg: var(--color-secondary-soft);
    --article-link-pill-color: var(--color-text);
    --article-link-pill-border: var(--border-teal);
    --article-link-pill-radius: var(--radius-md);
    --article-link-pill-pad-y: var(--space-1);
    --article-link-pill-pad-x: var(--space-3);
    --article-link-pill-font-size: var(--text-base);
    --article-link-pill-font-weight: var(--weight-bold);
    --article-link-pill-bg-hover: var(--color-secondary);
    --article-link-pill-color-hover: var(--color-text);
    /* 본문 링크 알약 모바일 축소(2026-06-17) — 하드코딩 → 컴포넌트 토큰 */
    --article-link-pill-pad-y-mobile:     2px;
    --article-link-pill-pad-x-mobile:     var(--space-2);     /* 8 */
    --article-link-pill-font-size-mobile: 0.86em;
    --article-link-pill-line-mobile:      1.28;
    --article-link-pill-radius-mobile:    var(--radius-pill); /* 999 */
    /* 본문 큐레이션 "함께 보면 좋은 글" 박스(.box-related)
     * 핵심 요약 박스(.box-summary) 레이아웃을 그대로 재사용하되,
     * 배경만 댓글 등록 버튼의 밝은 민트(secondary-soft)로, 텍스트엔 옅은 그림자. */
    --related-box-bg: var(--color-box-mint-soft);
    --related-box-border: var(--border-teal);
    --related-box-radius: var(--summary-radius);
    --related-box-pad: var(--summary-pad);
    --related-box-bottom: var(--space-article-summary-bottom);
    --related-box-title-size: var(--summary-title-size);
    --related-box-title-color: var(--summary-title-color);
    --related-box-title-letter: var(--summary-title-letter);
    --related-box-title-bottom: var(--summary-title-bottom);
    --related-box-li-size: var(--summary-li-size);
    --related-box-li-line: var(--summary-li-line);
    --related-box-li-gap: var(--summary-li-gap);
    --related-box-li-pad-l: var(--summary-li-pad-l);
    --related-box-mark-bg: var(--summary-mark-bg);
    --related-box-link-color: var(--color-article-body);
    --related-box-link-color-hover: var(--color-primary);
    --related-box-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
    /* box-related 모바일 실측 보정(2026-06-17) — 하드코딩 → 컴포넌트 토큰 */
    --related-box-pad-mobile:          var(--space-6) 22px;   /* 24 22 */
    --related-box-radius-mobile:       26px;
    --related-box-title-size-mobile:   var(--text-5xl);       /* 24 */
    --related-box-title-bottom-mobile: 18px;
    --related-box-li-size-mobile:      var(--text-lg);        /* 16 */
    --related-box-li-line-mobile:      1.62;
    --related-box-li-gap-mobile:       14px;
    /* 본문 H2·H3 제목 글씨 그림자 (흰 카드 위 진한 제목 — 옅은 입체감) */
    --article-heading-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
    --article-heading-shadow-mobile: 0 1px 1px rgba(34, 34, 34, 0.08);   /* 모바일: 장문 제목 무게감↓ (약하게) */
    /* ============================================================
       [C] 컴포넌트: toc
       ============================================================ */
    --toc-item-h: 44px;
    --toc-item-pad-x: 20px;
    --toc-num-w: 16px;
    --toc-sub-indent: 28px;
    --toc-sub-pad-y: 6px;
    --toc-sub-pad-l: 18px;
    --toc-sub-marker-w: 8px;
    --toc-sub-marker-h: 2px;
    --toc-sub-marker-l: 4px;
    --toc-empty-pad: 4px;
    --toc-pill-bg: var(--color-secondary-soft);
    --toc-pill-bg-hover: var(--color-secondary);
    --toc-pill-text: var(--color-text);
    --toc-pill-text-hover: var(--color-primary);
    --toc-pill-num-color: var(--color-text);
    --toc-pill-border: var(--border-teal);
    --toc-pill-radius: var(--radius-pill);
    --toc-pill-h: var(--toc-item-h);
    --toc-pill-pad-x: var(--toc-item-pad-x);
    --toc-pill-gap: var(--space-3);
    --toc-pill-font-size: 15px;
    --toc-pill-font-weight: var(--weight-extrabold);
    --toc-sublink-color: var(--color-muted);
    --toc-sublink-color-hover: var(--color-primary);
    --toc-sublink-bg-hover: var(--color-secondary-soft);
    --toc-sublink-marker-color: var(--color-primary);
    --toc-sublink-font-size: 14px;
    --toc-sublink-font-weight: var(--weight-bold);
    /* ============================================================
       [C] 컴포넌트: reading
       ============================================================ */
    --reading-order-bg: var(--color-primary);
    --reading-order-text: var(--color-card);
    --reading-order-text-soft-alpha: 0.86;
    --reading-order-text-soft: rgba(var(--color-card-rgb), var(--reading-order-text-soft-alpha));
    --reading-order-border: transparent;
    --reading-order-title-color: var(--reading-order-text);
    --reading-order-desc-color: var(--reading-order-text-soft);
    --reading-order-desc-size: 15px;
    --reading-order-desc-weight: var(--weight-medium);
    /* ============================================================
       [C] 컴포넌트: popular
       ============================================================ */
    --popular-thumb-size: var(--recent-thumb-size-pc);
    --popular-thumb-radius: var(--recent-thumb-radius-pc);
    --popular-thumb-bg: var(--color-accent-soft);
    --popular-thumb-bg-image: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-secondary-soft) 100%);
    --popular-num-display: none;
    --popular-num-color: var(--color-text);
    --popular-num-bg: var(--color-secondary-soft);
    --popular-num-size: 16px;
    --popular-num-weight: var(--weight-black);
    --popular-row-gap: var(--space-4);
    --popular-row-border: var(--border-soft);
    --popular-title-color: var(--color-text);
    --popular-title-size-pc: 17px;
    --popular-title-size-mobile: var(--text-recent-title-mobile);
    --popular-title-weight: var(--weight-extrabold);
    --popular-title-line-pc: var(--leading-recent-title-pc);
    --popular-title-line-mobile: var(--leading-recent-title-mobile);
    --popular-date-color: var(--color-muted);
    --popular-date-size-pc: 14px;
    --popular-date-size-mobile: var(--text-date-mobile);
    --popular-row-pad-y-pc: 18px;
    --popular-row-pad-x-pc: 19px;
    --popular-row-pad-y-mobile: 17px;
    --popular-row-pad-x-mobile: 18px;
    --popular-row-gap-mobile-real: 14px;
    --popular-row-pad-y: var(--popular-row-pad-y-pc);
    --popular-row-pad-x: var(--popular-row-pad-x-pc);
    /* ============================================================
       [C] 컴포넌트: affiliate
       ============================================================ */
    --affiliate-rail-w-pc: 4px;                 /* §4-9 콤팩트 (이전 §1 5px) */
    --affiliate-rail-w-mobile: 4px;
    --affiliate-rail-w: var(--affiliate-rail-w-pc);
    --affiliate-rail-color: var(--color-accent);
    --affiliate-bg: var(--color-notice-bg);
    --affiliate-border: var(--border-soft);
    --affiliate-radius-pc: var(--radius-xl);    /* §4-9 콤팩트 22px (이전 §1 radius-2xl 24px) */
    --affiliate-radius-mobile: var(--radius-lg);
    --affiliate-radius: var(--affiliate-radius-pc);
    --affiliate-pad-y-mobile: 14px;
    --affiliate-pad-x-mobile: var(--space-4);
    --affiliate-pad-y: 24px;                    /* §4-9 콤팩트 (이전 §1 26px) */
    --affiliate-pad-x: 27px;                    /* §4-9 콤팩트 (이전 §1 30px) */
    /* ============================================================
       .box-notice — 정보성 안내 박스 (기준 §1, 넉넉)
       ※ .box-affiliate(상업글 판정: .box-product/.box-affiliate)와
          분리된 별도 컴포넌트. 정보글에서 상업글 오판 없이 사용.
       ============================================================ */
    --notice-rail-w-pc: 5px;
    --notice-rail-w-mobile: 4px;
    --notice-rail-w: var(--notice-rail-w-pc);
    --notice-rail-color: var(--color-accent);
    --notice-bg: var(--color-notice-bg);
    --notice-border: var(--border-soft);
    --notice-radius-pc: var(--radius-2xl);
    --notice-radius-mobile: var(--radius-xl);
    --notice-radius: var(--notice-radius-pc);
    --notice-pad-y: 26px;
    --notice-pad-x: 30px;
    --notice-pad-y-mobile: 18px;
    --notice-pad-x-mobile: var(--space-5);
    --space-notice-top-pc: 30px;
    --space-notice-bottom-pc: 30px;
    --space-notice-top-mobile: 20px;
    --space-notice-bottom-mobile: var(--space-6);
    --text-notice-pc: 15.5px;
    --text-notice-mobile: 15px;
    --text-notice-title-pc: 17px;
    --text-notice-title-mobile: 16px;
    /* ============================================================
       [C] 컴포넌트: summary
       ============================================================ */
    --summary-bg: var(--color-secondary);
    --summary-border: 0;
    --summary-radius: var(--radius-2xl);
    --summary-pad: 27px;
    --summary-title-color: var(--color-primary);
    --summary-title-size: 25px;
    --summary-title-bottom: 13px;
    --summary-title-letter: var(--letter-spacing-tight);
    --summary-li-size: 16px;
    --summary-li-line: var(--leading-loose);
    --summary-li-pad-l: 21px;
    --summary-li-gap: var(--space-3);
    --summary-mark-bg: var(--color-primary);
    --summary-radius-mobile: var(--radius-2xl);
    --summary-pad-mobile: 22px;
    /* ============================================================
       [C] 컴포넌트: pros
       ============================================================ */
    --pros-bg: var(--color-card);
    --pros-border: var(--border-soft);
    --pros-title-color: var(--color-primary);
    --pros-marker-color: var(--color-primary);
    /* ============================================================
       [C] 컴포넌트: cons
       ============================================================ */
    --cons-bg: var(--color-card);
    --cons-border: var(--border-soft);
    --cons-title-color: var(--color-primary);
    --cons-marker-color: var(--color-primary);
    /* ============================================================
       [C] 컴포넌트: proscons
       ============================================================ */
    --proscons-title-size: 20px;
    --proscons-radius: var(--radius-xl);
    --proscons-pad: 22px;
    --proscons-gap: 15px;
    --proscons-shadow: 0 7px 20px rgba(var(--shadow-tint-rgb), 0.045);
    --proscons-list-size: 15.5px;
    --proscons-list-line: var(--leading-list);
    --proscons-list-pad-l: var(--space-5);
    --proscons-cols-mobile: 1;
    --proscons-gap-mobile: var(--space-4);
    --proscons-radius-mobile: var(--radius-xl);
    --proscons-pad-mobile: var(--space-5);
    --proscons-list-size-mobile: 15px;
    --proscons-list-line-mobile: 1.74;
    /* ============================================================
       [C] 컴포넌트: conclusion
       ============================================================ */
    --conclusion-bg: var(--color-secondary);
    --conclusion-border: 1px solid rgba(var(--color-primary-rgb), var(--border-hairline-teal-alpha));
    --conclusion-radius: 26px;
    --conclusion-pad: 27px;
    --conclusion-top: 42px;
    --conclusion-bottom: 32px;
    --conclusion-title-color: var(--color-primary);
    --conclusion-title-size: 25px;
    --conclusion-title-bottom: 11px;
    --conclusion-text-color: var(--color-article-body);
    --conclusion-cta-gap: var(--space-5);
    --conclusion-cta-h: var(--btn-h-lg);
    --conclusion-cta-bg: var(--cta-bg);
    --conclusion-cta-bg-hover: var(--cta-bg-hover);
    --conclusion-cta-bg-active: var(--cta-bg-active);
    --conclusion-cta-text: var(--cta-color);
    --conclusion-cta-radius: var(--cta-radius);
    --conclusion-cta-border: var(--cta-border);
    --conclusion-radius-mobile: var(--radius-2xl);
    --conclusion-pad-mobile: 22px;
    --conclusion-top-mobile: 38px;
    --conclusion-bottom-mobile: 30px;
    --conclusion-title-size-mobile: 23px;
    --conclusion-text-size-mobile: 15.5px;
    /* ============================================================
       [C] 컴포넌트: post
       ============================================================ */
    --post-hero-bg: var(--color-surface-warm);
    --post-hero-border: var(--border-soft);
    --post-hero-radius: var(--radius-3xl);
    --post-hero-margin-top: var(--space-7);
    --post-hero-margin-bottom: var(--space-article-thumb-bottom);
    --post-hero-img-fit: cover;
    --post-hero-img-aspect: 16 / 9;
    --post-hero-min-h-placeholder: 200px;
    --post-hero-caption-bg-alpha: 0.68;
    --post-hero-caption-bg: rgba(var(--color-card-rgb), var(--post-hero-caption-bg-alpha));
    --post-hero-caption-color: var(--color-article-meta);
    --post-hero-caption-size: 13px;
    --post-hero-caption-weight: var(--weight-normal);
    --post-hero-caption-pad-y: 13px;
    --post-hero-caption-pad-x: 17px;
    --post-hero-caption-border-top: var(--border-soft);
    --post-hero-caption-align: center;
    --post-toc-bg: var(--color-card);
    --post-toc-border: var(--border-soft);
    --post-toc-shadow: var(--shadow-post-toc);
    --post-toc-radius-pc: var(--radius-2xl);
    --post-toc-radius-mobile: var(--radius-xl);
    --post-toc-radius: var(--post-toc-radius-pc);
    --post-toc-pad-y: var(--space-6);
    --post-toc-pad-x: var(--space-6);
    --post-toc-pad-y-mobile: var(--space-5);
    --post-toc-pad-x-mobile: var(--space-5);
    --post-toc-bottom-pc: 34px;
    --post-toc-bottom-mobile: 30px;
    --post-toc-title-color: var(--color-text);
    --post-toc-title-size: 23px;
    --post-toc-title-size-mobile: 20px;
    --post-toc-title-weight: var(--weight-extrabold);
    --post-toc-title-bottom: var(--space-3);
    --post-toc-title-bottom-mobile: 7px;
    --post-toc-title-line-mobile: 1.34;
    --post-toc-title-letter: var(--letter-spacing-tight);
    --post-toc-desc-color: var(--color-article-meta);
    --post-toc-desc-size: 14.5px;
    --post-toc-desc-size-mobile: 13.5px;
    --post-toc-desc-line: 1.68;
    --post-toc-desc-line-mobile: 1.66;
    --post-toc-desc-bottom: var(--space-4);
    --post-toc-desc-bottom-mobile: 14px;
    --post-toc-list-cols-pc: 4;
    --post-toc-list-cols-mobile: 2;
    --post-toc-list-gap-pc: 10px;
    --post-toc-list-gap-mobile: 9px;
    --post-toc-list-gap: var(--post-toc-list-gap-pc);
    --post-toc-link-bg: var(--color-secondary);
    --post-toc-link-bg-hover: var(--color-secondary-soft);      /* #EEF5F1 — 값 동일 */
    --post-toc-link-bg-active: var(--color-secondary-strong);   /* #D1E2DA — 값 동일 */
    --post-toc-link-color: var(--color-primary);
    --post-toc-link-border: 1px solid rgba(var(--color-primary-rgb), var(--border-hairline-teal-alpha));
    --post-toc-link-radius: 16px;
    --post-toc-link-radius-mobile: 15px;
    --post-toc-link-min-h: 48px;
    --post-toc-link-min-h-mobile: 46px;
    --post-toc-link-pad-y: 11px;
    --post-toc-link-pad-x: 13px;
    --post-toc-link-pad-y-mobile: 10px;
    --post-toc-link-pad-x-mobile: 11px;
    --post-toc-link-font-size: 13.5px;
    --post-toc-link-font-weight: 850;
    --post-toc-link-hover-shift: -1px;
    --post-toc-link-hover-shadow: var(--shadow-post-toc-hover);
    --post-toc-link-transition: var(--duration-toc);
    --post-hero-radius-mobile: var(--radius-2xl);
    --post-card-thumb-aspect: 16 / 9;
    --post-hero-source-display: none;
    /* ============================================================
       [C] 컴포넌트: placeholder
       ============================================================ */
    --placeholder-border-color: #D8CDBF;
    /* ============================================================
       [C] 컴포넌트: ad
       ============================================================ */
    --ad-bg-alpha: 0.58;
    --ad-bg: rgba(var(--color-card-rgb), var(--ad-bg-alpha));
    --ad-border: 1px dashed var(--placeholder-border-color);
    --ad-radius: var(--radius-xl);
    --ad-pad: 26px;
    --ad-font-size: 14px;
    --ad-color: var(--color-article-meta);
    --ad-slot-min-h: 280px;
    --ad-slot-min-h-mobile: 150px;
    --ad-slot-min-h-inline: 90px;
    --ad-slot-upper-min-h-mobile: 300px;             /* 상단 광고 전용 모바일 예약 — 실제 광고 높이(~330)에 맞춰 CLS 방지 */
    --ad-pad-mobile: var(--space-6);
    --ad-font-size-mobile: 13.5px;
    /* ============================================================
       [C] 컴포넌트: module
       ============================================================ */
    --module-pad-pc: var(--space-6);
    --module-pad-mobile: var(--space-5);
    --module-radius: var(--radius-lg);
    --module-gap-inner: var(--space-3);
    --module-margin-y-pc: var(--space-7);
    --module-margin-y-mobile: var(--space-6);
    --module-title-size-pc: 16px;
    --module-title-size-mobile: 15px;
    --module-title-weight: var(--weight-bold);
    --module-body-size-pc: 14px;
    --module-body-size-mobile: 13.5px;
    /* ============================================================
       [C] 컴포넌트: inline
       ============================================================ */
    --inline-pad-y: 2px;
    --inline-pad-x: 6px;
    --inline-radius: var(--radius-sm);
    --inline-term-border-style: 1px dotted var(--color-muted-light);
    /* ============================================================
       [C] 컴포넌트: progress
       ============================================================ */
    --progress-bar-h: 3px;
    /* 막대는 청록(primary) — 주황(accent)은 라이트모드 트랙(#E8E2DA) 위에서 1.60:1 로 묻힘.
     *  청록은 4.48:1 로 또렷하고, accent 는 CTA 전용으로 남겨둔다. */
    --progress-bar-color: var(--color-primary);
    --progress-bar-bg: var(--color-line);
    --progress-bar-z: var(--z-header);
    /* ============================================================
       [C] 컴포넌트: comments
       ============================================================ */
    --comments-bg-alpha: 0.54;
    --comments-bg: rgba(var(--color-card-rgb), var(--comments-bg-alpha));
    --comments-border: 1px dashed var(--placeholder-border-color);
    --comments-radius: 20px;
    --comments-pad: 22px;
    --comments-top: var(--space-6);
    --comments-font-size: 13.5px;
    --comments-color: var(--color-article-meta);
    --comments-top-mobile: 22px;
    --comments-radius-mobile: 20px;
    --comments-pad-mobile: var(--space-5);
    --comments-font-size-mobile: 13px;
    /* ============================================================
       [C] 컴포넌트: recent
       ============================================================ */
    --recent-popular-cols-pc: 1;
    --recent-popular-cols-mobile: 1;
    --recent-thumb-size-pc: 83px;
    --recent-thumb-size-mobile: 74px;
    --recent-thumb-radius-pc: var(--radius-lg);
    --recent-thumb-radius-mobile: var(--space-4);
    /* ============================================================
       [C] 컴포넌트: breadcrumb
       ============================================================ */
    --breadcrumb-current-white-space-pc: normal;
    --breadcrumb-current-white-space-mobile: nowrap;
    --breadcrumb-current-overflow-pc: visible;
    --breadcrumb-current-overflow-mobile: hidden;
    --breadcrumb-current-text-overflow-pc: clip;
    --breadcrumb-current-text-overflow-mobile: ellipsis;
    --breadcrumb-current-min-width-pc: auto;
    --breadcrumb-current-min-width-mobile: 0;
    --breadcrumb-current-flex-pc: 0 1 auto;
    --breadcrumb-current-flex-mobile: 1 1 0;
    --breadcrumb-display-pc: flex;
    --breadcrumb-display-mobile: none;
    --breadcrumb-font-size: 13px;
    --breadcrumb-gap: var(--space-2);
    --breadcrumb-sep-char: '\203A';
    /* ============================================================
       [C] 컴포넌트: aside
       ============================================================ */
    /* ============================================================
       [C] 컴포넌트: related
       ============================================================ */
    --related-card-bg: transparent;
    --related-card-border: 0;
    --related-card-radius: 0;
    --related-card-pad-top: 32px;
    --related-card-pad-x: 0;
    --related-card-pad-bottom: var(--space-2);
    --related-grid-cols-pc: 3;
    --related-grid-cols-mobile: 1;
    --related-grid-gap: var(--space-3);
    --related-border-top: var(--border-soft);
    --related-title-size: 24px;
    --related-title-color: var(--color-article-title);
    --related-title-bottom: var(--space-2);
    --related-desc-size: 14.5px;
    --related-desc-color: var(--color-article-meta);
    --related-desc-line: var(--leading-relaxed);
    --related-desc-bottom: 17px;
    --related-item-bg: var(--color-card);
    --related-item-border: var(--border-soft);
    --related-item-pad: 17px 40px 17px 17px;
    --related-item-radius: var(--radius-lg);
    --related-item-min-h: 104px;
    --related-item-shadow: 0 6px 16px rgba(var(--shadow-tint-rgb), 0.035);
    --related-item-shadow-hover: 0 8px 18px rgba(var(--shadow-tint-rgb), 0.055);
    --related-thumb-display: none;
    --related-title-size-mobile: 23px;
    --related-desc-size-mobile: 14px;
    --related-item-pad-mobile: 17px;
    --related-item-radius-mobile: var(--radius-lg);
    --related-grid-gap-mobile: 10px;
    /* ============================================================
       [C] 컴포넌트: tag
       ============================================================ */
    --tag-btn-bg: var(--color-card);
    --tag-btn-color: var(--color-muted);
    --tag-btn-border: var(--border-soft);
    --tag-btn-radius: var(--radius-pill);
    --tag-btn-min-h: var(--pill-h-lg);
    --tag-btn-pad-y: 7px;
    --tag-btn-pad-x: var(--space-3);
    --tag-btn-font-size: 13px;
    --tag-btn-font-weight: var(--weight-bold);
    --tag-btn-bg-hover: var(--color-secondary-soft);
    --tag-btn-color-hover: var(--color-primary);
    --tag-btn-min-h-mobile: var(--touch-target-min);
    --tag-btn-pad-y-mobile: 7px;
    --tag-btn-pad-x-mobile: 11px;
    --tag-btn-font-size-mobile: 12.5px;
    /* tag-list 모바일 — 행/열 갭 + 콤마 텍스트노드 숨김(2026-06-17) */
    --tag-list-gap-mobile:        10px var(--space-2);   /* 10 8 */
    --tag-list-comma-font-size:   0;
    /* ============================================================
       [C] 컴포넌트: quiz
       ============================================================ */
    --quiz-bg: var(--color-card);
    --quiz-border: var(--border-soft);
    --quiz-radius: var(--module-radius);
    --quiz-margin-y-pc: var(--module-margin-y-pc);
    --quiz-pad-pc: var(--module-pad-pc);
    --quiz-divider: var(--border-soft);
    --quiz-badge-text: 'QUIZ';
    --quiz-badge-bg: var(--color-secondary);
    --quiz-badge-color: var(--color-primary);
    --quiz-badge-size: 12px;
    --quiz-badge-weight: var(--weight-black);
    --quiz-badge-letter: 0.08em;
    --quiz-badge-pad-y: var(--space-3);
    --quiz-q-size-pc: 16px;
    --quiz-q-weight: var(--module-title-weight);
    --quiz-q-color: var(--color-text-strong);
    --quiz-marker-color: var(--color-primary);
    --quiz-marker-gap: var(--space-6);
    --quiz-a-size-pc: 14px;
    --quiz-a-color: var(--color-text);
    --quiz-a-pad: var(--space-4);
    --quiz-a-bg: var(--color-secondary-soft);
    --quiz-a-accent-w: var(--quote-border-w);
    --quiz-a-accent-color: var(--color-primary);
    --quiz-a-radius: var(--radius-sm);
  }
  /* 1-D. 다크모드 토큰 — (단일 출처: tokens.css) */
  @media (prefers-color-scheme: dark) {
    :root {
      /* ======================================================
         [S] 다크모드 색상 오버라이드 (dark color overrides)
         ====================================================== */
      --color-bg: #1F1B16;
      --color-card-rgb: 42, 37, 32;   /* #2A2520 — --color-card 와 모든 반투명 변형이 여기서 파생 */
      /* 청록을 한 단계 밝힘 — 민트 배지 위 대비 3.39:1 ❌ → 4.71:1 ✅ (28개 규칙 일괄 해결)
       *  --color-primary / -soft / --color-secondary-border / --color-focus-ring /
       *  --color-input-focus-bg / 헤어라인 테두리가 전부 이 트리플렛에서 파생된다. */
      --color-primary-rgb: 124, 203, 208;   /* #7CCBD0 (이전 #5BAEB3) */
      --color-primary-dark: #5FB6BB;        /* hover·::selection — 이전 #4A9398 은 4.28:1 ❌ → 6.43:1 ✅ */
      --color-primary-soft-alpha: 0.18;
      --color-secondary: #3A4F4C;
      --color-secondary-soft: #2F4341;
      --color-secondary-strong: #2A3D3A;   /* 눌림 = 더 진하게 (라이트와 같은 방향) */
      --color-secondary-border-alpha: 0.28;
      --color-accent-soft: #3D2F22;
      --color-accent-soft-hover: #4D3D2E;
      --color-accent-border: rgba(244, 162, 97, 0.55);
      --color-notice-bg: #2F2820;
      --color-surface-warm: #332B23;   /* 크림 → 다크 웜. 카드(#2A2520)보다 한 단계 밝아 구분됨 */
      --color-text: #F0E8DA;
      --color-text-strong: #F8F2E6;
      --color-muted: #A8A095;
      --color-muted-light: #7A7268;
      --color-line: #3A332A;
      --color-focus-ring-alpha: 0.45;
      --color-input-focus-bg-alpha: 0.20;
      --placeholder-border-color: #5A4F40;
      --color-site-nav-link: #B5BFC9;
      /* accent 는 다크에서 뒤집지 않으므로(브랜드 유지) 그 위 글자만 어둡게 뒤집는다 */
      --color-on-accent: var(--color-bg);
    }
  }

  /* 2. 첫 화면 셀렉터 (자동 추출, ~180 rules) */
  *,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  line-height: var(--leading-reset);
}
body {
  margin: 0;
}
article, aside, footer, header, main, nav, section {
  display: block;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}
ul, ol {
  padding: 0;
  list-style: none;
}
img, svg, video {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
  border-style: none;
}
button {
  font: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: 0;
}
input, textarea, select {
  font: inherit;
  color: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
address {
  font-style: normal;
}
hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}
html,
body {
  height: 100%;
}
body.theme-odyssey-custom {
  font-family: var(--font-base);
  font-size: var(--text-md);
  /* 중간 플러스 추천값: 전체 줄간격 1.74 (--leading-body) */
  line-height: var(--leading-body);
  letter-spacing: var(--letter-spacing);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.screen-out,
.blind {
  position: absolute;
  overflow: hidden;
  clip: rect(0 0 0 0);
  margin: var(--hairline-neg);
  width: var(--hairline);
  height: var(--hairline);
  white-space: nowrap;
}
body.theme-odyssey-custom .skip-to-content {
  position: absolute;
  top: 0;
  left: 0;
  /* 평소: 화면 밖으로 숨김 */
  transform: translateY(-100%);
  z-index: var(--z-modal);
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 0 var(--space-5);
  background-color: var(--color-primary);
  color: var(--color-card);
  border-radius: 0 0 var(--radius-md) 0;
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  text-decoration: none;
  letter-spacing: var(--letter-spacing);
  transition: transform var(--duration-base) var(--ease-soft);
}
body.theme-odyssey-custom .skip-to-content:focus,
body.theme-odyssey-custom .skip-to-content:focus-visible {
  /* Tab 포커스 시: 화면 안으로 슬라이드 */
  transform: translateY(0);
}
body.theme-odyssey-custom .site-nav a[aria-current="page"],
body.theme-odyssey-custom .site-nav-fallback a[aria-current="page"],
body.theme-odyssey-custom .site-nav-link[aria-current="page"],
body.theme-odyssey-custom .mobile-menu-cat-link[aria-current="page"],
body.theme-odyssey-custom .mobile-foot-link[aria-current="page"],
body.theme-odyssey-custom .footer-link[aria-current="page"] {
  color: var(--color-primary);
}
body.theme-odyssey-custom ::selection {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-dark);
}
body.theme-odyssey-custom a:focus-visible,
body.theme-odyssey-custom button:focus-visible,
body.theme-odyssey-custom input:focus-visible,
body.theme-odyssey-custom textarea:focus-visible {
  outline: var(--focus-ring-w) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}
body.theme-odyssey-custom #wrap {
  position: relative;
  min-height: 100%;
  padding: var(--page-pad-top) var(--page-pad-x) var(--page-pad-bottom);
  max-width: var(--container-max);
  margin: 0 auto;
  /* clip: 가로 overflow 만 차단하고 세로 scroll context 는 생성 안 함
   * (hidden 은 다른 축에 암묵적 overflow:auto 를 적용해 내부 sticky 요소 동작에 영향) */
  overflow-x: clip;
}
body.theme-odyssey-custom #container {
  /* 추가.txt: 헤더 아래 간격 34px */
  margin-top: var(--space-header-margin);
}
body.theme-odyssey-custom .main {
  display: block;
}
body.theme-odyssey-custom .card,
body.theme-odyssey-custom .site-header,
body.theme-odyssey-custom .hero-main,
body.theme-odyssey-custom .hero-side,
body.theme-odyssey-custom .category-card,
body.theme-odyssey-custom .post-card,
body.theme-odyssey-custom .cta-band,
body.theme-odyssey-custom .article-card,
body.theme-odyssey-custom .sidebar-card,
body.theme-odyssey-custom .site-footer {
  background-color: var(--card-bg);
  border: var(--border-soft);
}
body.theme-odyssey-custom .card               { border-radius: var(--card-radius); }
body.theme-odyssey-custom .site-header        { border-radius: var(--header-radius-pc); }
body.theme-odyssey-custom .hero-main          { border-radius: var(--hero-card-radius-pc); }
body.theme-odyssey-custom .hero-side          { border-radius: var(--hero-side-radius-pc); }
body.theme-odyssey-custom .category-card      { border-radius: var(--category-card-radius-pc); }
body.theme-odyssey-custom .post-card          { border-radius: var(--card-radius); }
body.theme-odyssey-custom .cta-band           { border-radius: var(--card-radius); }
body.theme-odyssey-custom .article-card       { border-radius: var(--article-card-radius); }
body.theme-odyssey-custom .sidebar-card       { border-radius: var(--sidebar-card-radius-pc); }
body.theme-odyssey-custom .site-footer        { border-radius: var(--footer-radius-pc); }
body.theme-odyssey-custom .site-header {
  box-shadow: var(--shadow-header);
}
body.theme-odyssey-custom .hero-main {
  box-shadow: var(--hero-card-shadow-pc);
}
body.theme-odyssey-custom .hero-side {
  box-shadow: var(--hero-side-shadow-pc);
}
body.theme-odyssey-custom .article-card {
  box-shadow: var(--article-card-shadow);
}
body.theme-odyssey-custom .category-card {
  box-shadow: var(--category-card-shadow-pc);
}
body.theme-odyssey-custom .sidebar-card {
  box-shadow: var(--sidebar-card-shadow-pc);
}
body.theme-odyssey-custom .card,
body.theme-odyssey-custom .post-card,
body.theme-odyssey-custom .cta-band {
  box-shadow: var(--shadow-card);
}
body.theme-odyssey-custom .site-footer {
  box-shadow: var(--footer-shadow-pc);
}
body.theme-odyssey-custom .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--btn-pad-x);
  border-radius: var(--btn-radius);
  /* 추가.txt: PC CTA 버튼 14px (모바일은 15px - .mobile-menu-cta 등에서 별도) */
  font-size: var(--text-cta-pc);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing);
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) ease,
    color            var(--duration-fast) ease,
    box-shadow       var(--duration-base) var(--ease-soft),
    transform        var(--duration-base) var(--ease-soft),
    border-color     var(--duration-fast) ease;
}
body.theme-odyssey-custom .btn-cta {
  /* 메인화면 상세값 §13: padding 15 25 / font 16 / weight 900 / radius 18 / 그림자 0 8px 18px ..0.22
   *                       글씨색 #222 / 배경 #F4A261 / hover #F6B27B
   *  ※ .btn 베이스의 height:48px 는 시안 .btn-cta 와 불일치 → height:auto + min-height 54px 로
   *    padding 이 실제 높이를 결정하도록 변경 (시안 매칭) */
  height: var(--btn-cta-h-pc);
  min-height: var(--btn-cta-min-h-pc);               /* 54px - 시안 매칭 */
  padding: var(--btn-cta-pad-y-pc) var(--btn-cta-pad-x-pc);
  font-size: var(--btn-cta-font-pc);
  font-weight: var(--btn-cta-weight);                /* 900 - 메인화면 상세값 §13 (이전 700 → 900) */
  width: var(--btn-cta-width-pc);
  background-color: var(--btn-cta-bg);
  color: var(--btn-cta-color);                       /* on-accent — 라이트 #222 / 다크 #1F1B16 */
  border: var(--btn-cta-border);
  border-radius: var(--btn-cta-radius-pc);           /* 18px - 메인화면 상세값 §13 */
  box-shadow: var(--btn-cta-shadow);                 /* 0 8px 18px ..0.22 - 메인화면 상세값 §13 */
}
body.theme-odyssey-custom .btn-cta:hover {
  background-color: var(--btn-cta-bg-hover);
  color: var(--btn-cta-color);
  box-shadow: var(--btn-cta-shadow-hover);
}
body.theme-odyssey-custom .btn-cta:active {
  background-color: var(--btn-cta-bg-active);
  color: var(--btn-cta-color);
}
body.theme-odyssey-custom .btn-cta:focus-visible {
  background-color: var(--btn-cta-bg);   /* 기본과 동일 (추가.txt) */
  color: var(--btn-cta-color);
  outline: var(--focus-ring-w) solid var(--color-focus-ring);   /* 청록 포커스링 */
  outline-offset: var(--focus-ring-offset);
}
body.theme-odyssey-custom .btn-outline {
  background-color: var(--color-secondary);
  color: var(--color-text);
  border: var(--border-teal);
}
body.theme-odyssey-custom .btn-outline:hover {
  background-color: var(--color-secondary-soft);
}
body.theme-odyssey-custom .hero-actions .btn-outline {
  height: auto;
  min-height: var(--btn-cta-min-h-pc);                       /* 54px - .btn-cta 와 동일 */
  padding: var(--btn-cta-pad-y-pc) var(--btn-cta-pad-x-pc);  /* 15 25 - .btn-cta 와 동일 */
  font-size: var(--btn-cta-font-pc);                         /* 16px */
  font-weight: var(--btn-cta-weight);                        /* 900 */
  border-radius: var(--btn-cta-radius-pc);                   /* 18px */
}
body.theme-odyssey-custom .btn-primary {
  background-color: var(--color-primary);
  color: var(--color-card);
}
body.theme-odyssey-custom .btn-primary:hover {
  background-color: var(--color-primary-dark);
}
body.theme-odyssey-custom .badge {
  display: inline-flex;
  align-items: center;
  min-height: var(--badge-min-h);
  padding: var(--badge-pad-y) var(--badge-pad-x);
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border-radius: var(--badge-radius);
  font-size: var(--badge-text);
  font-weight: var(--badge-weight);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .badge--rec {
  background-color: var(--color-secondary);
  color: var(--color-primary);
}
body.theme-odyssey-custom .badge--discount {
  background-color: var(--color-accent-soft);
  color: var(--color-text);
}
body.theme-odyssey-custom .badge--affiliate {
  background-color: var(--color-notice-bg);
  color: var(--color-muted);
}
body.theme-odyssey-custom .site-search-input,
body.theme-odyssey-custom .mobile-search-input {
  width: 100%;
  height: var(--input-h);
  padding: var(--input-pad);
  background-color: var(--input-bg);
  border: var(--input-border);
  border-radius: var(--input-radius);
  /* 추가.txt §2: 베이스 15px / line-height 1.5 (모바일 검색창은 14px override) */
  font-size: var(--text-search-pc);
  line-height: var(--input-line);
  color: var(--color-text);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease;
}
body.theme-odyssey-custom .site-search-input::placeholder,
body.theme-odyssey-custom .mobile-search-input::placeholder {
  /* 추가.txt §2: placeholder 색 #9CA3AF */
  color: var(--color-muted-light);
}
body.theme-odyssey-custom .site-search-input:focus,
body.theme-odyssey-custom .mobile-search-input:focus {
  /* 추가.txt §2: focus border #2F6F73 + shadow 0 0 0 4px rgba(var(--shadow-tint-rgb), 0.12) */
  border-color: var(--color-primary);
  box-shadow: 0 0 0 var(--focus-ring-spread) var(--color-input-focus-bg);
  outline: none;
}
body.theme-odyssey-custom .site-header {
  /* 중간 플러스: PC 헤더 내부 여백 28px 34px / 둥근값 PC 32px */
  padding: var(--header-pad-y) var(--header-pad-x);
  border-radius: var(--header-radius);
}
body.theme-odyssey-custom .header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
body.theme-odyssey-custom .site-logo {
  flex: 0 0 auto;
  font-size: var(--text-logo-pc);
  font-weight: var(--weight-black);
  letter-spacing: var(--letter-spacing-logo);
  margin: 0;
}
body.theme-odyssey-custom .site-logo-link {
  display: inline-block;
  color: var(--color-text);                /* 메인화면 상세값 §3: #222222 (이전 primary 변경) */
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .site-logo-link:hover {
  color: var(--color-primary);             /* hover 시 primary 톤 (시각 affordance) */
}
body.theme-odyssey-custom .site-logo-img {
  max-height: var(--logo-img-max-h);
  display: block;
}
body.theme-odyssey-custom .site-nav,
body.theme-odyssey-custom .site-nav-fallback {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 중간 플러스: 메뉴 간격 PC 26px */
  gap: var(--header-menu-gap);
}
body.theme-odyssey-custom .site-nav > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 중간 플러스: 메뉴 간격 PC 26px */
  gap: var(--header-menu-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.theme-odyssey-custom .site-nav > ul > li {
  list-style: none;
}
body.theme-odyssey-custom .site-nav a,
body.theme-odyssey-custom .site-nav-fallback a,
body.theme-odyssey-custom .site-nav-link {
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  /* 메인화면 상세값 §4: 16px / weight 700 / 글씨색 #4B5563 / hover #2F6F73 */
  font-size: var(--text-menu-cat-pc);
  font-weight: var(--weight-menu-cat);
  color: var(--color-site-nav-link);
  letter-spacing: var(--letter-spacing);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .site-nav a:hover,
body.theme-odyssey-custom .site-nav-fallback a:hover,
body.theme-odyssey-custom .site-nav-link:hover {
  color: var(--color-site-nav-link-hover);
}
body.theme-odyssey-custom .site-nav .selected > a,
body.theme-odyssey-custom .site-nav .link_tit.selected {
  color: var(--color-primary);
}
body.theme-odyssey-custom .site-nav-fallback {
  display: flex;
}
body.theme-odyssey-custom .site-search {
  position: relative;
  flex: 0 0 auto;
  width: var(--search-w-pc);
}
body.theme-odyssey-custom .site-search-input {
  padding-right: var(--space-12);
}
body.theme-odyssey-custom .site-search-btn {
  position: absolute;
  top: 50%;
  right: var(--space-3);
  transform: translateY(-50%);
  width: var(--search-btn-size);
  height: var(--search-btn-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  border-radius: var(--radius-pill);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .site-search-btn:hover {
  color: var(--color-primary);
}
body.theme-odyssey-custom .mobile-toggle {
  display: none;
  width: var(--mobile-toggle-size);
  height: var(--mobile-toggle-size);
  align-items: center;
  justify-content: center;
  color: var(--color-text);
  background-color: var(--mobile-toggle-bg);          /* 메인화면 상세값 모바일 §4: #FFFFFF */
  border: var(--mobile-toggle-border);                /* 메인화면 상세값 모바일 §4: 1px solid #E8E2DA */
  border-radius: var(--mobile-toggle-radius);         /* 메인화면 상세값 모바일 §4: 14px */
  box-shadow: var(--mobile-toggle-shadow);            /* 메인화면 상세값 모바일 §4 */
  transition: background-color var(--duration-fast) ease;
}
body.theme-odyssey-custom .mobile-toggle:hover {
  background-color: var(--color-primary-soft);
}
body.theme-odyssey-custom .index-only-block {
  display: none;
}
body.theme-odyssey-custom.is-index-page .index-only-block,
body.theme-odyssey-custom#tt-body-index .index-only-block {
  display: block;
}
body.theme-odyssey-custom.is-index-page .area-common .breadcrumb-nav,
body.theme-odyssey-custom.is-index-page .area-common .title-search,
body.theme-odyssey-custom#tt-body-index .area-common .breadcrumb-nav,
body.theme-odyssey-custom#tt-body-index .area-common .title-search {
  display: none;
}
body.theme-odyssey-custom .hero {
  display: grid;
  /* b 단계: 카드 비율을 시안 기준 2:1 로 변경 — :root --hero-main-fr / --hero-side-fr 토큰 사용
   *  (이전 1.6fr : 1fr → 새 2fr : 1fr — minmax(0, …) 로 자식 overflow 방지 유지) */
  grid-template-columns:
    minmax(0, var(--hero-main-fr))
    minmax(0, var(--hero-side-fr));
  /* 메인 카드 간격 PC 27px (메인화면 상세값 §9) — 모바일에서 var(--hero-card-gap-mobile) 로 재정의 */
  gap: var(--hero-card-gap-pc);
  /* 헤더 ↔ .hero 간격: 헤더 margin-bottom 34px (--space-header-margin, 메인화면 상세값 §2) 만 사용
   *  ※ 이전 margin-top: var(--space-8) 32px 추가로 누적되어 66px 큰 공백 발생 — 제거
   *  ※ 시안: 헤더 ↔ hero 사이 약 34px */
  margin-top: 0;
  margin-bottom: var(--section-gap);
}
body.theme-odyssey-custom .hero-main {
  position: relative;
  padding: var(--hero-card-pad-pc);              /* 41px - 메인화면 상세값 §9 */
  min-height: var(--hero-card-min-h-pc);         /* 330px - 메인화면 상세값 §9 */
  overflow: hidden;
}
body.theme-odyssey-custom .hero-main-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}
body.theme-odyssey-custom .hero-tag {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  min-height: var(--badge-min-h);
  padding: var(--hero-tag-pad-y) var(--hero-tag-pad-x);   /* 메인화면 상세값 §10: 8 15 — 토큰화 */
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border-radius: var(--badge-radius);
  font-size: var(--badge-text);
  font-weight: var(--badge-weight);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .hero-title {
  font-size: var(--text-hero-title-pc);
  font-weight: var(--weight-black);
  line-height: var(--leading-hero-title-pc);         /* 1.18 - 메인화면 상세값 §11 */
  letter-spacing: var(--letter-spacing-hero);        /* -0.06em - 메인화면 상세값 §11 */
  color: var(--color-text-strong);
  margin: 0 0 var(--space-hero-title-bottom-pc);     /* 아래 18 - 메인화면 상세값 §11 */
}
body.theme-odyssey-custom .hero-desc {
  font-size: var(--text-hero-desc-pc);
  line-height: var(--leading-hero-desc);             /* 1.78 */
  color: var(--color-muted);
  max-width: var(--hero-desc-max);
  margin: 0 0 var(--space-hero-desc-bottom-pc);      /* 아래 24 - 메인화면 상세값 §12 */
}
body.theme-odyssey-custom .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
body.theme-odyssey-custom .hero-side {
  padding: var(--hero-side-pad-pc);                  /* 31px - 메인화면 상세값 §15 */
  min-height: var(--hero-card-min-h-pc);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
body.theme-odyssey-custom .hero-side-title {
  font-size: var(--text-hero-side-title-pc);         /* 25px - 메인화면 상세값 §16 */
  font-weight: var(--weight-black);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-tight);
  margin: 0;
}
body.theme-odyssey-custom .hero-side-desc {
  font-size: var(--text-hero-side-desc-pc);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  margin: 0;
}
body.theme-odyssey-custom .hero-side-list {
  margin-top: auto;
  padding-top: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--gap-hero-side-list-pc);                 /* 14px - 메인화면 상세값 §17 */
}
body.theme-odyssey-custom .hero-side-list li {
  display: block;
}
body.theme-odyssey-custom .hero-side-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--btn-h);
  padding: 0 var(--space-5);
  background-color: var(--color-accent-soft);
  border-radius: var(--radius-md);
  font-size: var(--text-hero-side-link-pc);          /* 16px - 메인화면 상세값 §17 */
  font-weight: var(--weight-bold);
  line-height: var(--leading-hero-side-link-pc);     /* 1.7 - 메인화면 상세값 §17 */
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  transition: background-color var(--duration-fast) ease, transform var(--duration-base) var(--ease-soft);
}
body.theme-odyssey-custom .hero-side-list a:hover {
  background-color: var(--color-accent-soft-hover);
  transform: translateY(calc(-1 * var(--motion-shift-sm)));
}
body.theme-odyssey-custom .hero-side-arrow {
  color: var(--color-muted);
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
}
body.theme-odyssey-custom .section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  /* 추가.txt: 섹션 제목 아래 간격 24px (22~28 중간값) */
  margin-bottom: var(--space-section-title-bottom);
}
body.theme-odyssey-custom .section-head-text {
  flex: 1 1 auto;
}
body.theme-odyssey-custom .section-title {
  /* 메인화면 상세값 §8: PC 29 / 모바일 25 / weight 900 / 자간 -0.05em / 아래 24 */
  font-size: var(--text-section-title-pc);
  font-weight: var(--weight-black);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing-section);     /* -0.05em - 메인화면 상세값 §8 */
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
}
body.theme-odyssey-custom .section-desc {
  font-size: var(--text-section-desc-pc);
  line-height: var(--leading-normal);
  color: var(--color-muted);
  margin: 0;
}
body.theme-odyssey-custom .section-more {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-section-more-pc);
  font-weight: var(--weight-bold);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing);
  transition: color var(--duration-fast) ease, transform var(--duration-base) var(--ease-soft);
}
body.theme-odyssey-custom .section-more:hover {
  color: var(--color-primary-dark);
  transform: translateX(var(--motion-shift-sm));
}
body.theme-odyssey-custom .categories {
  margin-bottom: var(--section-gap);
}
body.theme-odyssey-custom .category-cards {
  display: grid;
  /* 중간 플러스: PC 4열 / 카드 간격 24px */
  grid-template-columns: repeat(var(--category-cards-cols-pc), minmax(0, 1fr));
  gap: var(--category-cards-gap-pc);
}
body.theme-odyssey-custom .category-card {
  display: flex;
  flex-direction: column;
  /* 메인화면 상세값 §19: PC padding 29 / 최소 높이 200 / radius (카드 베이스 적용) / 그림자 (그림자 베이스 적용) */
  padding: var(--category-card-pad-pc);
  min-height: var(--category-card-min-h-pc);
  color: var(--color-text);
  /* 추가.txt §3: 4속성 통합 트랜지션 */
  transition: var(--transition-card);
}
body.theme-odyssey-custom .category-card:hover {
  /* 추가.txt §3: translateY(-3px) */
  transform: translateY(calc(-1 * var(--motion-shift-md)));
  box-shadow: var(--shadow-card-hover);
}
body.theme-odyssey-custom .category-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--category-icon-size-pc);
  height: var(--category-icon-size-pc);
  margin-bottom: var(--space-4);
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border-radius: var(--category-icon-radius-pc);     /* 18px - 메인화면 상세값 §20 (이전 999 → 18) */
  flex-shrink: 0;
}
body.theme-odyssey-custom .category-title {
  font-size: var(--text-category-title-pc);
  font-weight: var(--weight-black);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-category-title-bottom-pc); /* 10px - 메인화면 상세값 §21 */
}
body.theme-odyssey-custom .category-desc {
  font-size: var(--text-category-desc-pc);
  line-height: var(--leading-category-desc);         /* 1.72 - 메인화면 상세값 §22 (이전 1.7 → 1.72) */
  color: var(--color-muted);
  margin: 0;
}
body.theme-odyssey-custom .area-common {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* 추가.txt: 카드 그리드 간격 28px (24~30 중간) */
  gap: var(--space-card-grid-gap);
  margin-bottom: var(--section-gap);
}
body.theme-odyssey-custom .post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;   /* stretched-link 기준 — 카드 전체 클릭 영역 */
  /* 추가.txt §3: 4속성 통합 트랜지션 */
  transition: var(--transition-card);
}
body.theme-odyssey-custom .post-card:hover {
  transform: translateY(calc(-1 * var(--motion-shift-md)));
  box-shadow: var(--shadow-card-hover);
}
body.theme-odyssey-custom .post-card-thumb-link {
  display: block;
}
body.theme-odyssey-custom .post-card-thumb {
  position: relative;
  width: 100%;
  /* 컴포넌트 토큰 — 메인 카드 썸네일 비율
   * 16/9 (1.78) 유지: 카드의 가로 긴 비율이 디자인적으로 정돈됨.
   * 변경 시 :root --post-card-thumb-aspect 토큰만 수정 (단일 출처). */
  aspect-ratio: var(--post-card-thumb-aspect);
  margin: 0;
  background-color: var(--color-accent-soft);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  /* background-image 는 skin-init.js [3] 가 지연로딩(IntersectionObserver)으로
   *   주입 — 카드가 뷰포트 진입 시점에만, 카카오 리사이즈 프록시(R640x0)를 거친
   *   축소 이미지로 적용. 우선순위:
   *     ① RSS 본문 첫 가로형 이미지(베너) → data-thumb-banner="1"
   *     ② 없으면 data-thumb-src(대표이미지) 폴백 → data-thumb-banner="fallback"
   *   원본 URL 은 .post-card-thumb[data-thumb-src] 에 보관(즉시 로드 차단).
   *   JS/IO 실패 시 background-image 미적용 → background-color 플레이스홀더 유지. */
}
body.theme-odyssey-custom .post-card-thumb:not([has-thumbnail="1"]) {
  background-image: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-secondary-soft) 100%);
}
body.theme-odyssey-custom .post-card-thumb-img {
  display: none;
}
body.theme-odyssey-custom .post-card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  /* 추가.txt: 최신글 카드 내부 여백 24~28px - 28px 적용 */
  padding: var(--space-recent-card-pad);
}
body.theme-odyssey-custom .post-card-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
body.theme-odyssey-custom .post-card-cat {
  /* 추가.txt Badge 시스템 - 기본 카테고리 톤 */
  display: inline-flex;
  align-items: center;
  position: relative;   /* stretched-link 오버레이 위로 — 배지는 카테고리 이동 예외 */
  z-index: var(--z-raised);
  min-height: var(--badge-min-h);
  padding: var(--badge-pad-y) var(--badge-pad-x);
  background-color: var(--color-secondary);
  color: var(--color-primary);
  border-radius: var(--badge-radius);
  font-size: var(--badge-text);
  font-weight: var(--badge-weight);
  letter-spacing: var(--letter-spacing);
  transition: background-color var(--duration-fast) ease;
}
body.theme-odyssey-custom .post-card-cat:hover {
  background-color: var(--color-secondary-soft);
}
body.theme-odyssey-custom .post-card-date {
  font-size: var(--text-post-card-date-pc);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .post-card-title-link {
  display: block;
}
body.theme-odyssey-custom .post-card-title {
  font-size: var(--text-post-card-title-pc);
  font-weight: var(--weight-black);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-tight);
  margin: var(--space-2) 0 var(--space-3);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .post-card-title-link:hover .post-card-title {
  color: var(--color-primary);
}
body.theme-odyssey-custom .post-card-summary {
  font-size: var(--text-post-card-summary-pc);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.theme-odyssey-custom .post-card-reply {
  display: none;  /* 시안에 없음 - 필요 시 Stage 4 에서 활성화 */
}
body.theme-odyssey-custom .breadcrumb-nav {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: calc(var(--space-2) * -1) 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .breadcrumb-link {
  /* 시안: 링크 청록 (이전: --color-text) */
  color: var(--color-breadcrumb-link);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .breadcrumb-link:hover {
  color: var(--color-primary-dark);
}
body.theme-odyssey-custom .breadcrumb-sep {
  color: var(--color-breadcrumb-sep);
}
body.theme-odyssey-custom .breadcrumb-current {
  /* 시안: 현재 페이지 다크 (이전: --color-primary) */
  color: var(--color-breadcrumb-current);
  font-weight: var(--weight-extrabold);
  /* PC 기본: 정상 표시, 모바일에서는 미디어 쿼리로 ellipsis 처리 */
  white-space:   var(--breadcrumb-current-white-space-pc);
  overflow:      var(--breadcrumb-current-overflow-pc);
  text-overflow: var(--breadcrumb-current-text-overflow-pc);
  min-width:     var(--breadcrumb-current-min-width-pc);
  flex:          var(--breadcrumb-current-flex-pc);
}
body.theme-odyssey-custom .area-common .title-search {
  grid-column: 1 / -1;
  display: none;
}
body.theme-odyssey-custom .empty-box {
  grid-column: 1 / -1;
  /* 추가.txt §10: padding 44px 28px */
  padding: var(--space-11) var(--space-7);
  background-color: var(--card-bg);
  /* 추가.txt §10: border-radius 28px (= --radius-3xl) */
  border-radius: var(--radius-3xl);
  border: var(--border-soft);
  text-align: center;
  /* 추가.txt §10: color #6B7280 */
  color: var(--color-muted);
  box-shadow: var(--shadow-xs);
}
body.theme-odyssey-custom .empty-title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-black);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing);
  margin: 0 0 var(--space-3);
}
body.theme-odyssey-custom .empty-desc {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  margin: 0;
}
body.theme-odyssey-custom .empty-desc--friendly {
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  margin: 0;
  white-space: pre-line;   /* XML 안의 줄바꿈 그대로 표시 */
}
body.theme-odyssey-custom .index-cta-wrap {
  margin-bottom: var(--section-gap);
}
body.theme-odyssey-custom .cta-band {
  background-color: var(--color-notice-bg);
  padding: var(--space-12) var(--space-12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-9);
  flex-wrap: wrap;
}
body.theme-odyssey-custom .cta-band-text {
  flex: 1 1 var(--cta-text-flex-min);
}
body.theme-odyssey-custom .cta-band-title {
  font-size: var(--text-cta-band-title-pc);
  font-weight: var(--weight-black);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-3);
}
body.theme-odyssey-custom .cta-band-desc {
  font-size: var(--text-cta-band-desc-pc);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  margin: 0;
}
body.theme-odyssey-custom .cta-band-actions {
  flex: 0 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}
body.theme-odyssey-custom .cta-pill {
  display: inline-flex;
  align-items: center;
  height: var(--btn-h);
  padding: 0 var(--space-6);
  background-color: var(--color-secondary);
  color: var(--color-text);
  border-radius: var(--radius-md);
  font-size: var(--text-cta-pill-pc);
  font-weight: var(--weight-bold);
  letter-spacing: var(--letter-spacing);
  border: var(--border-teal);
  transition:
    background-color var(--duration-fast) ease,
    transform        var(--duration-base) var(--ease-soft);
}
body.theme-odyssey-custom .cta-pill:hover {
  background-color: var(--color-secondary-soft);
  transform: translateY(calc(-1 * var(--motion-shift-sm)));
}
body.theme-odyssey-custom .sidebar-card {
  padding: var(--sidebar-card-pad-pc);                  /* 31px - 메인화면 상세값 §24 */
  margin-bottom: var(--sidebar-card-gap-pc);
}
body.theme-odyssey-custom .sidebar-recent-grid {
  display: grid;
  grid-template-columns: repeat(var(--recent-popular-cols-pc), minmax(0, 1fr));
  gap: var(--sidebar-card-gap-pc);
  /* 그리드 자체는 다음 사이드바 모듈과 박스 간격으로 분리 */
  margin-bottom: var(--sidebar-card-gap-pc);
}
body.theme-odyssey-custom .sidebar-recent-grid > .sidebar-card {
  /* 그리드 안에서는 카드 자체 margin-bottom 제거 (gap 으로 일원화) */
  margin-bottom: 0;
}
body.theme-odyssey-custom .sidebar-title {
  font-size: var(--text-sidebar-title-pc);
  font-weight: var(--weight-black);
  color: var(--color-text-strong);
  letter-spacing: var(--letter-spacing);
  margin: 0 0 var(--space-5);
}
body.theme-odyssey-custom .mobile-overlay,
body.theme-odyssey-custom .mobile-close,
body.theme-odyssey-custom .mobile-menu-head,
body.theme-odyssey-custom .mobile-menu-cats-wrap,
body.theme-odyssey-custom .mobile-menu-foot,
body.theme-odyssey-custom .mobile-menu-cta,
body.theme-odyssey-custom .mobile-menu-cta-fallback,
body.theme-odyssey-custom .mobile-search,
body.theme-odyssey-custom .mobile-menu-affiliate,
body.theme-odyssey-custom .mobile-recent-tabs {
  display: none;
}
body.theme-odyssey-custom .site-footer {
  /* 메인화면 상세값 §30 (2026-05-23 축소): padding 28 40 / radius 32 (카드 베이스 적용) / 그림자 0 12px 30px 0.07 */
  margin-top: var(--space-footer-margin);
  padding: var(--footer-pad-pc);                /* 28 40 - 메인화면 상세값 §30 (축소) */
}
body.theme-odyssey-custom .footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.4fr;
  column-gap: var(--footer-grid-col-gap-pc);
  row-gap: var(--footer-grid-row-gap-pc);
}
body.theme-odyssey-custom .footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
body.theme-odyssey-custom .footer-brand-title {
  font-size: var(--text-footer-brand-title-pc);
  font-weight: var(--weight-black);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing);
  line-height: var(--leading-tight);
  transition: color var(--duration-fast) ease;
}
body.theme-odyssey-custom .footer-brand-title:hover {
  color: var(--color-primary-dark);
}
body.theme-odyssey-custom .footer-brand-desc {
  font-size: var(--text-footer-brand-desc-pc);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing);
  margin: 0;
}
body.theme-odyssey-custom .footer-col-title {
  font-size: var(--text-footer-col-title-pc);              /* 18px - 메인화면 상세값 §31 */
  font-weight: var(--weight-footer-col-title);             /* 900 - 메인화면 상세값 §31 (이전 800 → 900) */
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  margin: 0 0 var(--space-footer-col-title-bottom-pc);     /* 12 - 메인화면 상세값 §31 (축소) */
}
body.theme-odyssey-custom .footer-cat,
body.theme-odyssey-custom .footer-policy {
  display: flex;
  flex-direction: column;
}
body.theme-odyssey-custom .footer-cat-nav,
body.theme-odyssey-custom .footer-cat-fallback,
body.theme-odyssey-custom .footer-policy-fallback {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
body.theme-odyssey-custom .footer-cat-nav > ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
body.theme-odyssey-custom .footer-link,
body.theme-odyssey-custom .footer-cat-nav a,
body.theme-odyssey-custom .footer-cat-fallback a,
body.theme-odyssey-custom .footer-policy a {
  display: inline-block;
  font-size: var(--text-foot-link-pc);            /* 15px - 메인화면 상세값 §32 (PC) */
  font-weight: var(--weight-bold);                /* 700 - 메인화면 상세값 §32 */
  line-height: var(--leading-foot-link);          /* 1.9 - 메인화면 상세값 §32 */
  color: var(--color-footer-link);                /* #6B7280 - 메인화면 상세값 §32 */
  letter-spacing: var(--letter-spacing);
  transition: color var(--duration-fast) ease, transform var(--duration-base) var(--ease-soft);
}
body.theme-odyssey-custom .footer-link:hover,
body.theme-odyssey-custom .footer-cat-nav a:hover,
body.theme-odyssey-custom .footer-cat-fallback a:hover,
body.theme-odyssey-custom .footer-policy a:hover {
  color: var(--color-footer-link-hover);
}
body.theme-odyssey-custom .footer-cat-fallback,
body.theme-odyssey-custom .footer-policy-fallback {
  display: none;
}
body.theme-odyssey-custom.footer-cat-empty .footer-cat-nav {
  display: none;
}
body.theme-odyssey-custom.footer-cat-empty .footer-cat-fallback {
  display: flex;
}
body.theme-odyssey-custom.footer-policy-empty .footer-policy-fallback {
  display: flex;
}
body.theme-odyssey-custom .footer-affiliate {
  display: flex;
  flex-direction: column;
}
body.theme-odyssey-custom .footer-affiliate-box {
  padding: var(--space-3) var(--space-6);
  background-color: var(--color-notice-bg);
  border: var(--border-soft);
  border-radius: var(--radius-lg);
  font-size: var(--text-footer-affiliate-pc);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing);
}
body.theme-odyssey-custom .footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--footer-bottom-gap-pc);                   /* 20px - PC: 좌측 카피라이트 ↔ 우측 태그라인 가로 간격 */
  margin-top: var(--space-4);
  padding-top: var(--space-footer-copy-pad-top-pc);   /* 20 - 푸터 하단 시각 대칭 (축소) */
  border-top: var(--border-soft);
  flex-wrap: wrap;
}
body.theme-odyssey-custom .footer-copy {
  font-size: var(--text-footer-copy-pc);
  font-weight: var(--weight-extrabold);
  color: var(--color-text);
  letter-spacing: var(--letter-spacing);
  margin: 0;
}
body.theme-odyssey-custom .footer-tagline {
  font-size: var(--text-footer-tagline-pc);
  font-weight: var(--weight-normal);
  color: var(--color-muted);
  letter-spacing: var(--letter-spacing);
  margin: 0;
}
body.theme-odyssey-custom .mobile-overlay {
  position: fixed;
  inset: 0;
  background-color: var(--shadow-overlay);
  opacity: 0;
  visibility: hidden;
  z-index: var(--z-overlay);
  transition: opacity var(--duration-base) ease, visibility var(--duration-base) ease;
}
body.theme-odyssey-custom.menu-open .mobile-overlay {
  opacity: 1;
  visibility: visible;
}
body.theme-odyssey-custom .mobile-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);              /* 사용자 요청: 우측 상단 배치 (이전 left) */
  width: var(--mobile-close-size);
  height: var(--mobile-close-size);
  display: none;
  align-items: center;
  justify-content: center;
  /* 시안1: 흰 배경 + 1px 테두리 + 둥근 사각형 + 다크 × (이전: 민트 원형 + teal ×) */
  background-color: var(--mobile-close-bg);
  color: var(--mobile-close-color);
  border: var(--mobile-close-border);
  border-radius: var(--mobile-close-radius);
  /* 추가.txt §5 Z-index 시스템 */
  z-index: var(--z-base);
  transition: background-color var(--duration-fast) ease, color var(--duration-fast) ease;
}
body.theme-odyssey-custom .mobile-close:hover {
  background-color: var(--mobile-close-bg-hover);
}

/* === @media / @keyframes 등 === */
@media (max-width: 1060px) {
  body.theme-odyssey-custom #wrap {
    padding-left: var(--page-pad-mobile-x);
    padding-right: var(--page-pad-mobile-x);
  }

  /* 헤더 검색창 폭 축소 */
  body.theme-odyssey-custom .site-search {
    width: var(--search-w-tablet);
  }

  /* 카테고리 4열 → 2열 */
  body.theme-odyssey-custom .category-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 푸터 4열 → 2열 */
  body.theme-odyssey-custom .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-9);
  }

  /* 히어로 그리드 비율 살짝 완화 */
  body.theme-odyssey-custom .hero {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
}

/* ════════════════════════════════════════════════════════════════════
   사이드바 box-recent 빈/중복 카드 숨김 — 2026-05-22
   ────────────────────────────────────────────────────────────────────
   JS (L2680 부근) 가 다음 두 경우에 .is-empty 부여:
     [1] .recent-item 이 0 개인 경우 (빈 카드)
     [2] 인기글 카드 항목이 최근글 카드와 path 기준으로 완전 동일한 경우
         (블로거의 트래픽 부족 시 인기글 자리에 최근글 데이터를
          넣는 동작 대응)

   PC / 모바일 공통 적용 (글로벌 영역). specificity (0,4,1).
   기본 노출 규칙 .area-aside .box-recent (0,3,1) 보다 강함.
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .area-aside .box-recent.is-empty {
  display: none;
}
@media (max-width: 768px) {

  /* 페이지 패딩 */
  body.theme-odyssey-custom #wrap {
    padding-top: var(--page-pad-mobile-top);
    padding-bottom: var(--page-pad-mobile-bottom);
  }

  /* ─ 헤더 — 메인화면 상세값 모바일 §2: padding 24 22 / radius 24 / 그림자 0 8px 22px 0.06 / 아래 28 ─ */
  body.theme-odyssey-custom .site-header {
    padding: var(--header-pad-mobile-y) var(--header-pad-mobile-x);
    border-radius: var(--header-radius-mobile);          /* 24px - 메인화면 상세값 모바일 §2 */
    box-shadow: var(--shadow-header-mobile);             /* 0 8px 22px 0.06 - 메인화면 상세값 모바일 §2 */
  }
  body.theme-odyssey-custom .header-inner {
    gap: var(--space-3);
    justify-content: space-between;
  }
  body.theme-odyssey-custom .site-logo {
    /* 중간 플러스: 모바일 로고 24px */
    font-size: var(--text-logo-mobile);
  }
  /* PC 메뉴/검색 숨김, 햄버거 표시 */
  body.theme-odyssey-custom .site-nav,
  body.theme-odyssey-custom .site-nav-fallback,
  body.theme-odyssey-custom .site-search {
    display: none;
  }
  body.theme-odyssey-custom .mobile-toggle {
    display: inline-flex;
  }

  /* ─ 컨테이너 / 메인 ─ */
  /* ※ 모바일 헤더 ↔ 본문 사이 여백은 위 body.theme-odyssey-custom 토큰 재정의에서
   *   --space-header-margin: var(--space-header-margin-mobile) 로 처리됨 (16px)
   * ※ PC 베이스 #container { margin-top: var(--space-header-margin) } 셀렉터가 그대로 동작 */

  /* ─ 히어로 — 메인화면 상세값 모바일 §12: 1열 / gap 22 / padding 30 / radius 30 / 그림자 0 12px 30px 0.07 ─ */
  body.theme-odyssey-custom .hero {
    grid-template-columns: 1fr;
    gap: var(--hero-card-gap-mobile);                  /* 22px - 메인화면 상세값 모바일 §12 */
    margin-bottom: var(--section-gap-mobile);
  }
  body.theme-odyssey-custom .hero-main {
    padding: var(--hero-card-pad-mobile);              /* 30px */
    min-height: var(--hero-card-min-h-mobile);
    border-radius: var(--hero-card-radius-mobile);     /* 30px - 메인화면 상세값 모바일 §12 */
    box-shadow: var(--hero-card-shadow-mobile);        /* 0 12px 30px 0.07 - 메인화면 상세값 모바일 §12 */
    /* ※ 우측 .hero-image 박스 제거됨 — grid 리셋(grid-template-columns/row-gap/align-items) 불필요
     *   복구 시 PC와 동일하게 grid-template-columns: 1fr / row-gap / align-items 함께 복원 */
  }
  /* 히어로 대표 이미지 (.hero-image) 모바일 셀렉터 제거됨
   *  ※ figure 박스 자체 삭제와 동기화 — 복구 시 PC 셀렉터와 함께 복원 */
  /* 히어로 제목 — 메인화면 상세값 모바일 §14: 32 / 1.25 / -0.055em / 아래 14 */
  body.theme-odyssey-custom .hero-title {
    font-size: var(--text-hero-title-mobile);          /* 32px */
    line-height: var(--leading-hero-title-mobile);     /* 1.25 */
    letter-spacing: var(--letter-spacing-display);     /* -0.055em */
    margin-bottom: var(--space-hero-title-bottom-mobile);   /* 14px */
  }
  /* 히어로 설명 — 메인화면 상세값 모바일 §15: 16 / 1.78 / 아래 22 */
  body.theme-odyssey-custom .hero-desc {
    font-size: var(--text-hero-desc-mobile);
    line-height: var(--leading-hero-desc-mobile);
    margin-bottom: var(--space-hero-desc-bottom-mobile);    /* 22px */
  }
  /* 히어로 사이드 — 메인화면 상세값 모바일 §18·§19·§20 */
  body.theme-odyssey-custom .hero-side {
    padding: var(--hero-side-pad-mobile);              /* 28px - 메인화면 상세값 모바일 §18 */
    min-height: var(--hero-card-min-h-mobile);
    border-radius: var(--hero-side-radius-mobile);     /* 26px - 메인화면 상세값 모바일 §18 */
    box-shadow: var(--hero-side-shadow-mobile);        /* 0 10px 28px 0.06 - 메인화면 상세값 모바일 §18 */
  }
  body.theme-odyssey-custom .hero-side-title {
    font-size: var(--text-hero-side-title-mobile);     /* 23px - 메인화면 상세값 모바일 §19 */
  }
  body.theme-odyssey-custom .hero-side-list {
    gap: var(--gap-hero-side-list-mobile);             /* 13px - 메인화면 상세값 모바일 §20 */
  }
  body.theme-odyssey-custom .hero-side-list a {
    font-size: var(--text-hero-side-link-mobile);      /* 15.5px - 메인화면 상세값 모바일 §20 */
    line-height: var(--leading-hero-side-link-mobile); /* 1.76 - 메인화면 상세값 모바일 §20 */
  }
  /* CTA 버튼 모바일 — 메인화면 상세값 모바일 §16: padding 14 22 / radius 16 / font 15·900 / 100% / min-h 50 / 그림자 0 7px 18px 0.22 */
  body.theme-odyssey-custom .btn-cta {
    padding: var(--btn-cta-pad-y-mobile) var(--btn-cta-pad-x-mobile);
    border-radius: var(--btn-cta-radius-mobile);       /* 16px - 메인화면 상세값 모바일 §16 */
    font-size: var(--btn-cta-font-mobile);
    min-height: var(--btn-cta-min-h-mobile);           /* 50px - 메인화면 상세값 모바일 §16 */
    width: var(--btn-cta-width-mobile);
    box-shadow: var(--shadow-cta-mobile-real);         /* 0 7px 18px 0.22 - 메인화면 상세값 모바일 §16 */
  }

  /* ─ 섹션 헤드 — 메인화면 상세값 모바일 §11: 25 / 자간 -0.05em / 아래 20 ─ */
  body.theme-odyssey-custom .section-head {
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-bottom: var(--space-section-title-bottom-mobile);    /* 20px - 메인화면 상세값 모바일 §11 */
  }
  body.theme-odyssey-custom .section-title {
    font-size: var(--text-section-title-mobile);       /* 25px - 메인화면 상세값 모바일 §11 */
  }

  /* ─ 카테고리 카드 — 메인화면 상세값 모바일 §21·§22·§23·§24·§25 ─ */
  body.theme-odyssey-custom .categories,
  body.theme-odyssey-custom .area-common,
  body.theme-odyssey-custom .index-cta-wrap {
    margin-bottom: var(--section-gap-mobile);
  }
  body.theme-odyssey-custom .category-cards {
    grid-template-columns: repeat(var(--category-cards-cols-mobile), minmax(0, 1fr));
    gap: var(--category-cards-gap-mobile);
  }
  body.theme-odyssey-custom .category-card {
    padding: var(--category-card-pad-mobile);          /* 26 28 - 메인화면 상세값 모바일 §22 */
    min-height: var(--category-card-min-h-mobile);     /* 180 - 메인화면 상세값 모바일 §22 */
    border-radius: var(--category-card-radius-mobile); /* 28 - 메인화면 상세값 모바일 §22 */
    box-shadow: var(--category-card-shadow-mobile);    /* 0 10px 24px 0.06 - 메인화면 상세값 모바일 §22 */
  }
  body.theme-odyssey-custom .category-icon {
    width: var(--category-icon-size-mobile);
    height: var(--category-icon-size-mobile);
    border-radius: var(--category-icon-radius-mobile); /* 16 - 메인화면 상세값 모바일 §23 */
    margin-bottom: var(--space-4);                     /* 16 - 메인화면 상세값 모바일 §23: 아이콘 박스 아래 간격 */
  }
  body.theme-odyssey-custom .category-title {
    font-size: var(--text-category-title-mobile);      /* 20 - 메인화면 상세값 모바일 §24 */
    margin-bottom: var(--space-category-title-bottom-mobile);   /* 8 - 메인화면 상세값 모바일 §24 */
  }
  body.theme-odyssey-custom .category-desc {
    font-size: var(--text-category-desc-mobile);       /* 15 */
  }

  /* ─ 글 카드 (메인/카테고리 공용) — 메인 카드 간격 모바일 24px ─ */
  body.theme-odyssey-custom .area-common {
    grid-template-columns: 1fr;
    gap: var(--hero-card-gap-mobile);
  }
  body.theme-odyssey-custom .post-card-body {
    /* 추가.txt 모바일: 카드 내부 여백 28px (최신글 카드) */
    padding: var(--space-card-pad-mobile-real);
  }

  /* ─ CTA 밴드 ─ */
  body.theme-odyssey-custom .cta-band {
    /* 추가.txt 모바일: 카드 내부 여백 28px */
    padding: var(--space-card-pad-mobile-real);
    flex-direction: column;
    align-items: stretch;
  }
  body.theme-odyssey-custom .cta-band-title {
    font-size: var(--text-cta-band-title-mobile);
  }
  body.theme-odyssey-custom .cta-band-actions {
    gap: var(--space-2);
  }

  /* ─ 푸터 — 메인화면 상세값 모바일 §33·§34 (2026-05-23 축소):
     padding 24 20 / radius 28 / 그림자 0 10px 28px 0.07 / 섹션 gap 16 ─ */
  body.theme-odyssey-custom .site-footer {
    margin-top: var(--space-footer-margin-mobile);           /* 48 - 모바일 전용 (PC: 72) */
    padding: var(--footer-pad-mobile);                       /* 24 20 - 메인화면 상세값 모바일 §33 */
    border-radius: var(--footer-radius-mobile);              /* 28 - 메인화면 상세값 모바일 §33 */
    box-shadow: var(--shadow-footer-mobile);                 /* 0 10px 28px 0.07 - 메인화면 상세값 모바일 §33 */
  }
  body.theme-odyssey-custom .footer-inner {
    grid-template-columns: 1fr;
    gap: var(--footer-section-gap-mobile);                   /* 16 - 메인화면 상세값 모바일 §34 */
  }
  /* 푸터 컬럼 제목 — 메인화면 상세값 모바일 §35: 17 / 900 / 아래 8 */
  body.theme-odyssey-custom .footer-col-title {
    margin: 0 0 var(--space-footer-col-title-bottom-mobile); /* 8 - 메인화면 상세값 모바일 §35 */
    font-size: var(--text-footer-col-title-mobile);          /* 17 */
  }
  /* 푸터 링크 — 메인화면 상세값 모바일 §36: 14 / 1.9 / #6B7280
   * + WCAG 2.1 AA 터치 타겟 44px (텍스트는 그대로, 클릭 영역만 확장) — [중요].txt #9 */
  body.theme-odyssey-custom .footer-link,
  body.theme-odyssey-custom .footer-cat-nav a,
  body.theme-odyssey-custom .footer-cat-fallback a,
  body.theme-odyssey-custom .footer-policy a {
    display: flex;
    align-items: center;
    min-height: var(--touch-target-min);                     /* 44px - [중요].txt #9 */
    font-size: var(--text-foot-link-mobile);                 /* 14 */
  }
  /* 푸터 브랜드 영역 모바일 토큰 명시 */
  body.theme-odyssey-custom .footer-brand-title {
    font-size: var(--text-footer-brand-title-mobile);
  }
  body.theme-odyssey-custom .footer-brand-desc {
    font-size: var(--text-footer-brand-desc-mobile);
  }
  /* 카피라이트 — 메인화면 상세값 모바일 §37: 12.5 / #9CA3AF / 위 padding 20 / 위 구분선 */
  body.theme-odyssey-custom .footer-copy {
    font-size: var(--text-footer-copy-mobile);               /* 12.5 */
    color: var(--color-footer-copy-mobile);                  /* #9CA3AF */
  }
  body.theme-odyssey-custom .footer-tagline {
    font-size: var(--text-footer-tagline-mobile);
  }
  body.theme-odyssey-custom .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--footer-bottom-gap-mobile);                    /* 8px - 모바일: 위 카피라이트 ↔ 아래 태그라인 세로 간격 (이전 12→8 압축) */
    margin-top: var(--space-4);
    padding-top: var(--space-footer-copy-pad-top-mobile);    /* 28 - 푸터 하단 시각 대칭 (위 16+28=44 ↔ 아래 30) */
    border-top: var(--border-soft);                          /* 1px solid #E8E2DA - 메인화면 상세값 모바일 §37 */
  }

  /* ─ 모바일 카테고리·운영 안내 - 인라인 + 가운데점 ' · ' 구분자 ─
     - 세로로 길게 쌓이는 리스트를 한 줄(여러 줄 wrap)로 압축
     - 구분자는 CSS ::after 로 마지막 항목 제외 부착 → XML 깔끔 유지
     - 분리자 변경 가능: content 값만 수정 (예: '．' / ' · ' / ' / ') */
  body.theme-odyssey-custom .footer-cat-fallback,
  body.theme-odyssey-custom .footer-policy-fallback {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    row-gap: var(--space-2);
    align-items: baseline;
  }
  body.theme-odyssey-custom .footer-cat-fallback > a:not(:last-child)::after,
  body.theme-odyssey-custom .footer-policy-fallback > a:not(:last-child)::after,
  body.theme-odyssey-custom .footer-policy > a:not(:last-of-type)::after {
    content: ' · ';
    color: var(--color-muted);
    margin: 0 var(--space-2);
    font-weight: var(--weight-normal);
    pointer-events: none;
  }
  /* 메뉴 위젯 렌더 - <ul><li> 구조 - 도 인라인 처리
   * ※ 2026-05-22 ::after 위치 이동:
   *   이전엔 li:not(:last-child)::after 였으나, a 가 모바일에서
   *   display:flex (44px 터치 타겟) 로 적용되면서 a 가 li 안에서
   *   한 줄을 통째로 차지 → li::after (가운뎃점) 가 다음 줄로 떨어지는 문제 발생.
   *   ::after 를 a 의 자식으로 두면 a 의 flex container 안에서
   *   '텍스트' + '·' 가 가로로 나란히 배치되어 정상 표시.
   *   .footer-cat-fallback / .footer-policy 와 동일한 패턴(a::after).
   */
  body.theme-odyssey-custom .footer-cat-nav ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0;
    row-gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  body.theme-odyssey-custom .footer-cat-nav li {
    display: inline-block;
  }
  body.theme-odyssey-custom .footer-cat-nav li:not(:last-child) > a::after {
    content: ' · ';
    color: var(--color-muted);
    margin: 0 var(--space-2);
    font-weight: var(--weight-normal);
    pointer-events: none;
  }

  /* ─ 모바일 제휴 안내 - 박스 제거 + 첫 줄 숨김 (요약 1줄만) ─ */
  body.theme-odyssey-custom .footer-affiliate-box {
    background-color: transparent;
    border: none;
    padding: 0;
    /* 푸터 링크와 동일 크기 잠금 (모바일 15px) */
    font-size: var(--text-footer-affiliate-mobile);
  }
  body.theme-odyssey-custom .footer-affiliate-line1,
  body.theme-odyssey-custom .footer-affiliate-line1 + br {
    display: none;
  }

  /* ─ 모바일 햄버거 메뉴 (시안 모바일_햄버거_메뉴_01~03) ─ */

  /* 사이드바 = 드로어 (오른쪽에서 슬라이드 인) */
  body.theme-odyssey-custom .area-aside {
    position: fixed;
    top: 0;
    right: 0;
    width: var(--drawer-w-vw);
    max-width: var(--drawer-w);
    height: 100vh;
    height: 100dvh;
    background-color: var(--color-card);
    border-radius: var(--drawer-radius) 0 0 var(--drawer-radius);
    box-shadow: var(--drawer-shadow);
    padding: var(--drawer-pad);
    padding-top: var(--drawer-pad-top);  /* 상단 빈 공간 축소 (닫기 버튼 우측 이동에 따라) */
    overflow-y: auto;
    overflow-x: hidden;
    transform: translateX(100%);
    transition: transform var(--duration-slow) var(--ease-soft);
    z-index: var(--z-drawer);
    display: flex;
    flex-direction: column;
    gap: 0;
  }
  body.theme-odyssey-custom.menu-open {
    /* 드로어가 화면 안으로 슬라이드된 상태에서만 그림자 부여 (깊이감)
     * → 닫힌 상태에서 우측 viewport 로 그림자 누출되는 문제 해결 */
    --drawer-shadow: var(--shadow-drawer);
  }
  body.theme-odyssey-custom.menu-open .area-aside {
    transform: translateX(0);
  }

  /* 드로어 상단 drag handle 인디케이터 (시안 모바일_햄버거_메뉴_01 참조)
   * ※ 사용자 요청: 상단 회색 바 삭제 (장식 제거 + 상단 여백 깔끔하게)
   * ::before 자체를 제거하여 토큰(--drawer-handle-*) 은 정의만 남고 미사용
   * 향후 다시 복원 가능 */
  body.theme-odyssey-custom .area-aside::before {
    content: none;
  }

  /* 닫기 버튼 표시 */
  body.theme-odyssey-custom .mobile-close {
    display: inline-flex;
  }

  /* 모바일 메뉴 헤드 (블로그명 + 설명 + 분류 전체 + 카테고리) */
  /* 모바일 메뉴 헤드 (블로그명 + 설명 + 분류 전체 + 카테고리)
   * ※ 사용자 요청: 설명 하단 실선 제거 (이전 border-bottom)
   * ※ 사용자 요청: 설명문 우측 여백이 너무 많음 → padding-right 를 head 에서 제거
   *    (이전: head 전체에 X 버튼 회피 padding 56px → 설명문도 동일 폭으로 cut-off)
   *    (현재: padding-right 는 .mobile-menu-title 한정 → 설명문은 X 버튼과 줄이 다르므로 우측 풀폭 가능) */
  body.theme-odyssey-custom .mobile-menu-head {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    /* 시안1: 헤더 아래 가는 구분선 + 검색창과의 간격 (이전: 실선 없이 여백만) */
    padding-bottom: var(--drawer-head-pad-bottom);
    border-bottom: var(--drawer-head-divider);
    margin-bottom: var(--drawer-head-margin-bottom);
  }
  body.theme-odyssey-custom .mobile-menu-title {
    /* 추가.txt: 메뉴 블로그명 24px / weight 900 */
    font-size: var(--text-mobile-menu-blog);
    font-weight: var(--weight-black);
    color: var(--color-primary);
    letter-spacing: var(--letter-spacing);
    line-height: var(--leading-tight);
    /* 닫기 버튼(.mobile-close)과 겹침 방지 — head 가 아닌 title 에만 적용 */
    padding-right: calc(var(--mobile-close-size) + var(--space-4));
  }
  body.theme-odyssey-custom .mobile-menu-desc {
    /* 추가.txt: 메뉴 설명 14px */
    font-size: var(--text-mobile-menu-desc);
    line-height: var(--leading-relaxed);
    color: var(--color-muted);
    margin: 0;
    /* 사용자 요청: 분류 전체보기 / 최근 글 등 section header 와 좌측 정렬 통일 */
    padding-left: var(--mobile-drawer-section-pad-x);
    /* 사용자 요청: '애드센스' 가 통째로 line 2 로 wrap 되도록 한글 단어 단위 wrap 적용
     * (이전: word-break:normal 로 '애드 | 센스' 글자 단위 분리됨) */
    word-break: var(--mobile-drawer-text-word-break);
  }

  /* 드로어 헤더 — 시안1: 민트색 강조 박스 제거
   *  ※ 색 박스(배경/패딩/라운드/박스 여백) 없이 로고 + 설명만 노출
   *  ※ 헤더 하단 구분선은 .mobile-menu-head 의 border-bottom 이 담당
   *  ※ 로고와 설명 사이 간격은 flex column gap(8px)로 처리 */
  body.theme-odyssey-custom .mobile-menu-profile {
    padding: 0;
    border-radius: 0;
    background-color: transparent;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    gap: var(--drawer-logo-margin-bottom);
  }
  /* 시안1: 박스 제거로 로고가 닫기(×) 버튼과 겹칠 수 있어, 기본 .mobile-menu-title 의
   *  우측 여백(닫기 버튼 회피, padding-right calc)이 그대로 적용되도록 무효화 규칙을 제거함 */
  /* 프로필 박스 안의 설명은 section header 들여쓰기 해제 (박스 자체가 padding 보유) */
  body.theme-odyssey-custom .mobile-menu-profile .mobile-menu-desc {
    padding-left: 0;
  }

  /* 분류 전체보기
   * ※ 사용자 요청: 위/아래 실선 모두 제거 (이전 border-top + border-bottom) */
  body.theme-odyssey-custom .mobile-menu-allcat {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--mobile-link-h);
    /* 사용자 요청: section header 정렬 토큰 사용 (값은 기존 12px 와 동일) */
    padding: 0 var(--mobile-drawer-section-pad-x);
    /* 추가.txt: 카테고리 링크 17px - 분류 전체보기도 카테고리 그룹 헤드라 동일 토큰 사용 */
    font-size: var(--text-menu-cat-mobile);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: var(--letter-spacing);
  }
  body.theme-odyssey-custom .mobile-menu-cats {
    display: flex;
    flex-direction: column;
    /* 분류 전체보기(allcat) 와 카테고리 항목 사이 한 줄 정도의 시각적 공백 (사용자 요청) */
    margin-top: var(--mobile-menu-cats-margin-top);
  }
  body.theme-odyssey-custom .mobile-menu-cat-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 사용자 요청: 분류 전체보기·푸터 링크(50px)와 동일 높이로 통일 (이전 52px) — '위치가 살짝 맞지 않아' 해결 */
    height: var(--mobile-link-h);
    /* 사용자 요청: 좌측 정렬 통일
     * - padding-left: leaf item 들여쓰기 (24px) → 텍스트가 recent글·footer 와 같은 x 에 정렬
     * - padding-right: chevron 영역 확보 (12px) */
    padding: 0 var(--space-3) 0 var(--mobile-drawer-item-pad-x);
    /* bullet ::before 가 padding-left 영역 안쪽에 hang 하도록 containing block 제공 */
    position: relative;
    /* 추가.txt: 카테고리 링크 17px / weight 800 */
    font-size: var(--text-menu-cat-mobile);
    font-weight: var(--weight-menu-cat-mobile);
    color: var(--color-text);
    letter-spacing: var(--letter-spacing);
    /* 사용자 요청: 카테고리 항목 사이 실선 제거 (이전 border-bottom) */
    transition: color var(--duration-fast) ease;
  }
  /* 카테고리 항목 앞 bullet (·) — 사용자 요청
   * ※ '분류 전체보기'(allcat)는 그룹 헤더로 bullet 미적용
   * ※ ::before 가상요소로 마크업 변경 없이 추가 (시맨틱 요소 보존, 스크린리더 무시)
   * ※ position absolute 로 padding-left 영역 안쪽에 hang →
   *    bullet 은 section header(분류 전체보기) 와 같은 x 에 정렬되고,
   *    cat text 는 padding-left 너머 leaf item x 에 정렬됨 (Group B) */
  body.theme-odyssey-custom .mobile-menu-cat-link::before {
    content:      var(--mobile-cat-bullet-content);
    color:        var(--mobile-cat-bullet-color);
    font-weight:  var(--mobile-cat-bullet-weight);
    font-size:    var(--mobile-cat-bullet-font-size);
    line-height:  var(--mobile-cat-bullet-line-height);
    /* hanging bullet: section header padding 위치에 절대 배치 */
    position: absolute;
    left: var(--mobile-drawer-section-pad-x);
    top: 50%;
    transform: translateY(-50%);
  }
  body.theme-odyssey-custom .mobile-menu-cat-link:hover {
    color: var(--color-primary);
  }
  /* chevron 화살표 (›) — 카테고리·푸터 공통 컴포넌트 토큰
   * ※ 사용자 요청: 진하고 굵게 + 살짝 크게 (이전 muted-light + medium + 부모 글씨)
   * ※ 토큰은 :root --mobile-chev-* 에서 통제
   * ※ margin-left: auto — bullet(::before) 추가 후에도 chevron 이 우측에 고정되도록
   *   (auto margin 이 모든 잔여 공간을 흡수 → bullet/text 는 좌측, chev 는 우측) */
  body.theme-odyssey-custom .mobile-menu-cat-link > [aria-hidden="true"],
  body.theme-odyssey-custom .mobile-foot-link > [aria-hidden="true"] {
    color:       var(--mobile-chev-color);
    font-weight: var(--mobile-chev-weight);
    font-size:   var(--mobile-chev-font-size);
    line-height: var(--mobile-chev-line-height);
    margin-left: auto;
    flex: 0 0 auto;
  }

  /* ─ 사이드바 모듈 - 모바일에서 카드형 X, 평면 리스트로 ─
   *  ※ 모바일 드로어 안에서 sidebar-card 가 평면 리스트로 렌더되도록 베이스 톤을 모두 리셋.
   *  ※ 사용자 요청: 외곽 박스(border) 까지 제거 — PC 베이스 border 가 누락되어 있던 부분 보정 */
  body.theme-odyssey-custom .area-aside .sidebar-card {
    background-color: transparent;
    border: 0;                /* PC 베이스 border 리셋 (이전 누락) */
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0 0 var(--space-5);
  }
  /* recent글 그리드 안의 박스는 그리드 자체가 wrapper 역할 → 박스 하단 margin 불필요
   * ※ 사용자 요청: '2026.05.08 10:57' ↔ '블로그 소개' 사이 공백 축소
   * ※ 위 규칙(0,4,1) 의 margin-bottom 을 .sidebar-recent-grid 경유 (0,5,1) 로 덮어쓰기 */
  body.theme-odyssey-custom .area-aside .sidebar-recent-grid .sidebar-card {
    margin-bottom: var(--mobile-drawer-recent-end-margin);
  }

  /* ─ 모바일 토큰 재정의 - popular-row 패딩 ─
   * ※ PC 베이스 :root 매핑에서 var(--popular-row-pad-y/-x-pc) 로 갱신되어 모바일에서도 PC 값 사용 중이었던 문제 해결
   * ※ 다른 모바일 토큰들(예: header-radius, header-menu-gap)도 동일 패턴으로 모바일 @media 안에서 재정의 */
  body.theme-odyssey-custom {
    /* 본문글 상세값 5-12 모바일 문단 줄간격 1.78 */
    line-height: var(--leading-body-mobile);
    --popular-row-pad-y: var(--popular-row-pad-y-mobile);   /* 메인화면 상세값 모바일 §29: 17 */
    --popular-row-pad-x: var(--popular-row-pad-x-mobile);   /* 메인화면 상세값 모바일 §29: 18 */

    /* 메인화면 상세값 모바일 §29·§30: 항목 gap 14 / 썸네일 74·radius 16 */
    --popular-row-gap:    var(--popular-row-gap-mobile-real);  /* 14 - 메인화면 상세값 모바일 §29 */
    --popular-thumb-size: var(--recent-thumb-size-mobile);     /* 74 - 메인화면 상세값 모바일 §30 */
    --popular-thumb-radius: var(--recent-thumb-radius-mobile); /* 16 - 메인화면 상세값 모바일 §30 */

    /* 메인화면 상세값 모바일 §31·§32: 글 제목 16·800·1.56 / 메타 13 */
    --popular-title-size-pc: var(--popular-title-size-mobile);   /* 16 - 메인화면 상세값 모바일 §31 */
    --popular-title-line-pc: var(--popular-title-line-mobile);   /* 1.56 - 메인화면 상세값 모바일 §31 */
    --popular-date-size-pc:  var(--popular-date-size-mobile);    /* 13 - 메인화면 상세값 모바일 §32 */

    /* 에디터 글씨 크기 매핑 (data-ke-size · 레거시) — 모바일 재할당 (한 단계 축소)
     * ※ 셀렉터는 var(--text-ke-size-N) 만 참조 — 토큰 cascade 로 자동 분기 */
    --text-ke-size-12: var(--text-ke-size-12-mobile);
    --text-ke-size-14: var(--text-ke-size-14-mobile);
    --text-ke-size-15: var(--text-ke-size-15-mobile);
    --text-ke-size-16: var(--text-ke-size-16-mobile);
    --text-ke-size-17: var(--text-ke-size-17-mobile);
    --text-ke-size-18: var(--text-ke-size-18-mobile);
    --text-ke-size-20: var(--text-ke-size-20-mobile);
    --text-ke-size-22: var(--text-ke-size-22-mobile);
    --text-ke-size-24: var(--text-ke-size-24-mobile);
    --text-ke-size-26: var(--text-ke-size-26-mobile);
    --text-ke-size-28: var(--text-ke-size-28-mobile);
    --text-ke-size-30: var(--text-ke-size-30-mobile);
    --text-ke-size-32: var(--text-ke-size-32-mobile);
    --text-ke-size-34: var(--text-ke-size-34-mobile);
    --text-ke-size-36: var(--text-ke-size-36-mobile);
    --text-ke-size-38: var(--text-ke-size-38-mobile);

    /* 사용자 요청: 모바일에서 article-meta 하단 1px 선 숨김 (PC만 유지) */
    --article-meta-border-bottom: 0;

    /* 사용자 요청: 모바일 헤더 ↔ 본문 사이 베이지 여백 좁힘 (PC 34px → 모바일 16px) */
    --space-header-margin: var(--space-header-margin-mobile);
  }

  /* 중간 플러스: 최신글 / 인기글 그리드 — 메인화면 상세값 모바일 §26: 1열 / gap 22 */
  body.theme-odyssey-custom .sidebar-recent-grid {
    grid-template-columns: repeat(var(--recent-popular-cols-mobile), minmax(0, 1fr));
    gap: var(--sidebar-card-gap-mobile);
    margin-bottom: var(--sidebar-card-gap-mobile);
  }
  /* 모바일 사이드바 카드 (드로어 외부 컨텍스트) — 메인화면 상세값 모바일 §27
   *  padding 28 30 / radius 28 / 그림자 0 10px 26px 0.06
   *  ※ .area-aside .sidebar-card (specificity 0,3,1) 가 드로어 안에서 평면 리스트로 리셋하므로
   *    이 규칙은 드로어 외부 컨텍스트(예: 미래의 메인 본문 영역 사이드바 카드)에만 작동 */
  body.theme-odyssey-custom .sidebar-card {
    padding: var(--sidebar-card-pad-mobile);              /* 28 30 - 메인화면 상세값 모바일 §27 */
    border-radius: var(--sidebar-card-radius-mobile);     /* 28 - 메인화면 상세값 모바일 §27 */
    box-shadow: var(--sidebar-card-shadow-mobile);        /* 0 10px 26px 0.06 - 메인화면 상세값 모바일 §27 */
  }
  /* 드로어 안에서는 그리드도 평면 리스트 톤 — 카드 패딩 0 일 때 gap 만 유지
   * margin-bottom: 사용자 요청으로 0 (foot 의 내부 margin+border+padding 만으로 시각 분리) */
  body.theme-odyssey-custom .area-aside .sidebar-recent-grid {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    margin-bottom: var(--mobile-drawer-recent-end-margin);
  }

  /* 모바일에서 최근글/인기글 시안 일치 보정 (시안 모바일_햄버거_메뉴_02)
   * - 시안: "최근글 · 인기글" 한 줄 라벨처럼 컴팩트 표시
   * - 시안: 썸네일 없이 제목+날짜만 (PC 와 다름)
   * - 시안: 항목 사이 hairline 구분 없음, 단순 세로 리스트
   */
  /* 모바일 드로어: 최근글/인기글 박스의 h3 sidebar-title 을 섹션 라벨로 사용
   * - PC: 27px / weight 900 카드 타이틀 (sidebar-title 베이스)
   * - 모바일 드로어: 15px / weight 800 섹션 라벨 (시안 모바일_햄버거_메뉴_02 "최근 글 · 인기글" 톤)
   * - 이전엔 display:none 처리 후 .recent-tabs 로 대체 의도였으나, .recent-tabs XML 미존재로
   *   라벨 자체가 사라져 있어 h3 를 다시 노출 */
  body.theme-odyssey-custom .area-aside .box-recent .sidebar-title {
    font-size: var(--text-md);             /* 15px */
    font-weight: var(--weight-extrabold);  /* 800 */
    color: var(--color-text);
    margin: 0 0 var(--space-4);            /* 16px - 라벨 ↔ 리스트 분리 */
  }
  /* 탭을 인라인 라벨 형태로 (bottom border 제거, 작은 폰트) */
  body.theme-odyssey-custom .area-aside .box-recent .recent-tabs {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    border-bottom: 0;
    margin: 0 0 var(--space-4);
    padding: 0;
  }
  body.theme-odyssey-custom .area-aside .box-recent .recent-tab a,
  body.theme-odyssey-custom .area-aside .box-recent .recent-tab .tab-button {
    height: auto;
    padding: 0;
    font-size: var(--text-md);   /* 15px */
    font-weight: var(--weight-extrabold);
    color: var(--color-text);
    border: 0;
    margin: 0;
  }
  body.theme-odyssey-custom .area-aside .box-recent .recent-tab.on a,
  body.theme-odyssey-custom .area-aside .box-recent .recent-tab.on .tab-button {
    color: var(--color-text);   /* 활성 탭도 일반 본문색 (시안 일치) */
    border: 0;
  }
  /* 탭 사이 가운뎃점 separator (시안: "최근글 · 인기글") */
  body.theme-odyssey-custom .area-aside .box-recent .recent-tab + .recent-tab::before {
    content: '·';
    color: var(--color-muted);
    margin-right: var(--space-2);
    font-weight: var(--weight-extrabold);
  }
  /* 비활성 탭은 muted 톤 */
  body.theme-odyssey-custom .area-aside .box-recent .recent-tab:not(.on) a,
  body.theme-odyssey-custom .area-aside .box-recent .recent-tab:not(.on) .tab-button {
    color: var(--color-muted);
  }

  /* 최근글 리스트 - 시안: 썸네일 없음, 제목 위·날짜 아래 단순 구조 */
  body.theme-odyssey-custom .area-aside .box-recent .recent-list {
    gap: var(--space-5);
  }
  body.theme-odyssey-custom .area-aside .box-recent .recent-thumb {
    display: none;   /* 시안: 모바일 드로어에서는 썸네일 숨김 */
  }
  body.theme-odyssey-custom .area-aside .box-recent .recent-link {
    align-items: flex-start;
    /* padding-y 는 토큰 재정의(--popular-row-pad-y)로 처리 — 모바일에서 17px 적용 (기준표 §18a) */
  }
  /* recent-link 좌우 padding — 사용자 요청
   * ① padding-left: leaf item 들여쓰기 (cat 텍스트·footer 와 정렬)
   * ② padding-right: 좌우 대칭 (양쪽 여백 비율 맞추기, 2줄 wrap 허용)
   * ③ position: relative — 하단 hairline ::after 의 containing block
   * ④ border-bottom 제거 — 글로벌 규칙(line ~6476) 의 풀폭 hairline 을 ::after 인셋 버전으로 교체
   * ※ 글로벌 규칙 .area-aside .box-recent .recent-link (0,4,1) 가 padding 단축형으로
   *   네 면 모두를 덮어쓰므로, 마크업의 .recent-list 를 경유시켜 (0,5,1) 로 specificity 한 단계 강화 */
  body.theme-odyssey-custom .area-aside .box-recent .recent-list .recent-link {
    position: relative;
    padding-left:  var(--mobile-drawer-item-pad-x);
    padding-right: var(--mobile-drawer-item-pad-x);
    border-bottom: 0;
  }
  /* 단축 hairline — 사용자 요청: '얇은 줄의 길이를 맞춰주세요'
   * ※ 좌우 inset 으로 텍스트 영역과 같은 폭의 hairline 생성
   * ※ 토큰 --mobile-drawer-recent-hairline-* 로 통제 */
  body.theme-odyssey-custom .area-aside .box-recent .recent-list .recent-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left:   var(--mobile-drawer-recent-hairline-inset);
    right:  var(--mobile-drawer-recent-hairline-inset);
    height: var(--mobile-drawer-recent-hairline-height);
    background: var(--mobile-drawer-recent-hairline-color);
  }
  /* 마지막 보이는 항목의 hairline 숨김
   * ※ 글로벌 :last-child / :nth-child(5) border 제거 규칙 의 ::after 버전
   * ※ :nth-child(5) — 5개 초과 항목 display:none 처리 시 화면상 마지막이 5번째라 함께 처리 */
  body.theme-odyssey-custom .area-aside .box-recent .recent-item:last-child .recent-link::after,
  body.theme-odyssey-custom .area-aside .box-recent .recent-item:nth-child(5) .recent-link::after {
    content: none;
  }
  body.theme-odyssey-custom .area-aside .box-recent .recent-link:hover {
    transform: none;   /* 모바일 드로어에서는 hover 변형 없음 */
  }

  /* 모바일에서 최근글 제목/날짜 — 드로어 전용 컴포넌트 토큰 사용
   * ※ 글로벌 규칙 `.area-aside .box-recent .recent-title` (0,4,1, line ~6428) 가 PC 토큰을 강제 적용 중
   * ※ 본 규칙은 그 뒤가 아니라 앞(@media 안)에 위치하므로 specificity 를 한 단계 높여야 함
   * ※ 마크업의 .recent-body (제목·날짜 wrapper) 를 경유시켜 (0,5,1) 확보 → source order 무관하게 우선 */
  body.theme-odyssey-custom .area-aside .box-recent .recent-body .recent-title {
    font-size: var(--drawer-recent-title-size);
  }
  body.theme-odyssey-custom .area-aside .box-recent .recent-body .recent-date {
    font-size: var(--drawer-recent-date-size);
  }

  /* ─ 모바일 최근/인기 탭 UI ─
   *  ※ 사용자 요청: 모바일 사이드바에 "최근 글 | 인기 글" 탭으로 통합
   *  ※ 두 박스(.box-recent--recent, .box-recent--popular)는 위아래로 출력되지만
   *     CSS 로 활성 탭에 해당하는 박스 하나만 표시
   *  ※ .sidebar-recent-grid 에 .is-active-recent / .is-active-popular 클래스 토글
   *  ※ 박스 자체의 h3 라벨(최근 글 / 인기글)은 탭 UI 와 중복되므로 숨김 */
  body.theme-odyssey-custom .mobile-recent-tabs {
    display: flex;
    align-items: center;
    gap: var(--mobile-recent-tab-gap);
    margin: var(--mobile-recent-tab-margin-top) 0 var(--mobile-recent-tab-margin-bottom);
    /* 사용자 요청: 설명·분류 전체보기와 좌측 정렬 통일 (section header 들여쓰기) */
    padding-left: var(--mobile-drawer-section-pad-x);
  }
  body.theme-odyssey-custom .mobile-recent-tab {
    background-color: var(--mobile-recent-tab-bg);
    border: var(--mobile-recent-tab-border);
    padding: var(--mobile-recent-tab-padding);
    font-size: var(--mobile-recent-tab-font-size);
    font-weight: var(--mobile-recent-tab-font-weight);
    color: var(--mobile-recent-tab-color-off);
    letter-spacing: var(--letter-spacing);
    cursor: var(--mobile-recent-tab-cursor);
    transition: color var(--duration-fast) ease;
  }
  body.theme-odyssey-custom .mobile-recent-tab.is-on {
    color: var(--mobile-recent-tab-color-on);
  }
  body.theme-odyssey-custom .mobile-recent-tab-sep {
    color: var(--mobile-recent-tab-sep-color);
    font-size: var(--mobile-recent-tab-font-size);
    font-weight: var(--mobile-recent-tab-font-weight);
  }
  /* 활성 탭에 따라 박스 표시 전환
   * ※ 2026-05-22 단순화: 이전에 specificity 강화 목적으로 body.is-aside-ready 를
   *   요구했으나, 비교 대상이던 FOUC 방지 규칙(.box-recent--popular:not([data-empty]):not(.is-empty))
   *   이 이전 단계에서 이미 제거되어 specificity 경쟁 상대가 없는 상태.
   *   불필요한 JS 의존성 + 사이드바 두 박스 동시 노출 문제의 원인이 됨.
   *   → body.theme-odyssey-custom 까지만 사용해 즉시 토글 동작 (specificity 0,4,2)
   *   XML 에 .is-active-recent 가 미리 부여되어 있어 깜빡임 없음. */
  body.theme-odyssey-custom .sidebar-recent-grid.is-active-recent .box-recent--popular,
  body.theme-odyssey-custom .sidebar-recent-grid.is-active-popular .box-recent--recent {
    display: none;
  }
  /* 박스 내부 h3 라벨은 탭 UI 와 중복되므로 숨김 (모바일 한정) */
  body.theme-odyssey-custom .area-aside .box-recent > .sidebar-title {
    display: none;
  }

  /* 모바일 메뉴 푸터 (운영 안내) */
  body.theme-odyssey-custom .mobile-menu-foot {
    display: flex;
    flex-direction: column;
    padding: var(--space-5) 0;
    border-top: var(--border-soft);
    margin-top: var(--space-3);
  }
  body.theme-odyssey-custom .mobile-foot-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--mobile-link-h);
    /* 사용자 요청: leaf item 정렬 (recent글 텍스트·카테고리 텍스트 와 동일 x)
     * - padding-left: leaf indent (24px)
     * - padding-right: chevron 영역 (12px) */
    padding: 0 var(--space-3) 0 var(--mobile-drawer-item-pad-x);
    /* 추가.txt: 운영 안내 링크 모바일 15px */
    font-size: var(--text-foot-link-mobile);
    font-weight: var(--weight-bold);
    color: var(--color-text);
    letter-spacing: var(--letter-spacing);
    transition: color var(--duration-fast) ease;
  }
  body.theme-odyssey-custom .mobile-foot-link:hover {
    color: var(--color-primary);
  }

  /* fallback */
  body.theme-odyssey-custom .mobile-foot-fallback {
    display: none;
  }
  body.theme-odyssey-custom.mobile-foot-empty .mobile-foot-fallback {
    display: flex;
    flex-direction: column;
  }

  /* 모바일 CTA */
  body.theme-odyssey-custom .mobile-menu-cta,
  body.theme-odyssey-custom .mobile-menu-cta-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 추가.txt: CTA 버튼 높이 48~52 중간 50px */
    height: var(--mobile-menu-cta-h);
    margin: 0 0 var(--mobile-menu-cta-gap);
    padding: 0 var(--mobile-menu-cta-pad-x);
    background-color: var(--mobile-menu-cta-bg);
    color: var(--mobile-menu-cta-color);   /* on-accent — 라이트 #222 / 다크 #1F1B16 */
    border-radius: var(--mobile-menu-cta-radius);
    /* 추가.txt: CTA 버튼 모바일 15px */
    font-size: var(--mobile-menu-cta-font-size);
    font-weight: var(--mobile-menu-cta-font-weight);
    letter-spacing: var(--letter-spacing);
    box-shadow: var(--mobile-menu-cta-shadow);
    border: var(--mobile-menu-cta-border);
    transition:
      background-color var(--duration-fast) ease,
      box-shadow       var(--duration-base) var(--ease-soft);
  }
  body.theme-odyssey-custom .mobile-menu-cta:hover,
  body.theme-odyssey-custom .mobile-menu-cta-fallback:hover {
    background-color: var(--mobile-menu-cta-bg-hover);
    color: var(--mobile-menu-cta-color);
    box-shadow: var(--mobile-menu-cta-shadow-hover);
  }
  body.theme-odyssey-custom .mobile-menu-cta:active,
  body.theme-odyssey-custom .mobile-menu-cta-fallback:active {
    background-color: var(--mobile-menu-cta-bg-active);
    color: var(--mobile-menu-cta-color);
  }
  body.theme-odyssey-custom .mobile-menu-cta:focus-visible,
  body.theme-odyssey-custom .mobile-menu-cta-fallback:focus-visible {
    background-color: var(--mobile-menu-cta-bg);   /* 기본과 동일 (추가.txt) */
    color: var(--mobile-menu-cta-color);
    outline: var(--focus-ring-w) solid var(--color-focus-ring);   /* 청록 포커스링 */
    outline-offset: var(--focus-ring-offset);
  }

  /* 변수가 있을 때는 fallback 숨김 */
  body.theme-odyssey-custom .mobile-menu-cta + .mobile-menu-cta-fallback {
    display: none;
  }
  /* CTA 가 비어있을 때만 fallback 표시 */
  body.theme-odyssey-custom.mobile-cta-empty .mobile-menu-cta-fallback {
    display: inline-flex;
  }

  /* 모바일 검색창 */
  body.theme-odyssey-custom .mobile-search {
    display: block;
    position: relative;
    margin-bottom: var(--space-4);
  }
  body.theme-odyssey-custom .mobile-search-input {
    /* 추가.txt §2 Form/Input: 모바일 input 높이 50~54 중간 52px */
    height: var(--input-h-mobile);
    /* input 은 기본 inline-block → 컨테이너에 라인박스 디센더가 생겨 절대배치
     * 돋보기 칩(top:50%)이 1~3px 아래로 내려가 보임. block 으로 디센더 제거해 정렬 일치 */
    display: block;
    padding-right: var(--space-12);
    /* 시안1: 흰색 → 크림 배경 */
    background-color: var(--mobile-search-box-bg);
    border: var(--border-soft);
    /* 추가.txt: 검색창 모바일 14px (PC 15px 베이스를 오버라이드) */
    font-size: var(--text-search-mobile);
  }
  body.theme-odyssey-custom .mobile-search-btn {
    position: absolute;
    /* 세로 중앙에서 살짝 아래로 보정 (사용자 요청: 칩 아래 크림 공간이 더 넓어 보임 → 1~3px 내림) */
    top: calc(50% + var(--mobile-search-chip-nudge-y));
    right: var(--space-3);
    transform: translateY(-50%);
    width: var(--mobile-search-chip-size);    /* 36px - 시안1처럼 축소 (이전 44px) */
    height: var(--mobile-search-chip-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 시안1: 민트 칩 + teal 돋보기 (이전: 배경 없는 회색 돋보기) */
    background-color: var(--mobile-search-chip-bg);
    color: var(--mobile-search-chip-color);
    border-radius: var(--mobile-search-chip-radius);
  }

  /* 모바일 제휴 안내 */
  body.theme-odyssey-custom .mobile-menu-affiliate {
    display: block;
    padding: var(--space-3) var(--space-4);
    background-color: var(--color-notice-bg);
    border: var(--border-soft);
    border-radius: var(--radius-md);
    /* 중간 플러스: 제휴 안내 모바일 15px */
    font-size: var(--text-affiliate-mobile);
    line-height: var(--leading-relaxed);
    color: var(--color-muted);
    margin: 0;
  }

  /* ════════════════════════════════════════════════════════════════
   * 모바일 드로어 — 시각 순서 재배치 + 불필요 카드 숨김 (시안 모바일_햄버거_메뉴_01)
   * ────────────────────────────────────────────────────────────────
   * XML 순서는 SEO/접근성용으로 유지하고, flex `order` 로 시각 순서만 정리.
   *
   * 시각 순서 (사용자 시안 기준):
   *   ① 닫기 버튼  (.mobile-close, position: absolute - flex flow 무관)
   *   ② 헤드      (블로그명 + 짧은 설명)            — order 20
   *   ③ 검색창                                    — order 30
   *   ④ 카테고리   (분류 전체보기 + 4개)            — order 40
   *   ⑤ 최근/인기글 (최대 5개, 썸네일 없음)        — order 50
   *   ⑥ 운영 안내  (블로그 소개 / 문의 / 처리방침) — order 60
   *   ⑦ 제휴 안내 문구                            — order 70
   * ════════════════════════════════════════════════════════════════ */

  /* flex order 부여 - 직접 자식 요소 기준 */
  body.theme-odyssey-custom .area-aside .mobile-menu-head      { order: 20; }
  body.theme-odyssey-custom .area-aside .mobile-search         { order: 30; }
  body.theme-odyssey-custom .area-aside .mobile-menu-cats-wrap { order: 40; }
  body.theme-odyssey-custom .area-aside .mobile-recent-tabs    { order: 50; }   /* sidebar-recent-grid 와 같은 그룹: 탭이 grid 바로 위 (source order 먼저) */
  body.theme-odyssey-custom .area-aside .sidebar-recent-grid   { order: 50; }
  body.theme-odyssey-custom .area-aside .mobile-menu-foot      { order: 60; }
  body.theme-odyssey-custom .area-aside .mobile-menu-affiliate { order: 70; }

  /* 컨텍스트 가시성 규칙(§44) 동일 specificity 오버라이드 - 드로어 내부 한정 */
  body.theme-odyssey-custom.is-article-page .area-aside .box-reading-order,
  body.theme-odyssey-custom.is-index-page   .area-aside .box-google-check {
    display: none;
  }
  /* 모바일 메뉴에서 제거 (사용자 명시 요청)
   * - 큰 상품 CTA 버튼: 메뉴가 광고처럼 보일 수 있음
   * - 프로필/태그/댓글/공지/SNS 플러그인: 메뉴 본연 기능과 무관
   * - box-category: 모바일에서는 .mobile-menu-cats-wrap 으로 대체되므로 중복 제거
   * - box-archive/calendar/visit: 모바일 시안에 없는 카드, sidebar-card margin 으로 빈 공간 차지
   *   (이전 누락 — 사용자 이미지의 상단 큰 빈 공간 + 카테고리/탭 사이 여백 원인)
   * - 큰 이미지 카드(box-recent thumb): 별도 규칙으로 .recent-thumb 숨김 (기존 §15 처리됨) */
  body.theme-odyssey-custom .area-aside .box-profile,
  body.theme-odyssey-custom .area-aside .box-category,
  body.theme-odyssey-custom .area-aside .box-archive,
  body.theme-odyssey-custom .area-aside .box-calendar,
  body.theme-odyssey-custom .area-aside .box-visit,
  body.theme-odyssey-custom .area-aside .box-tag,
  body.theme-odyssey-custom .area-aside .box-reply,
  body.theme-odyssey-custom .area-aside .box-notice,
  body.theme-odyssey-custom .area-aside .box-plugins-empty,
  body.theme-odyssey-custom .area-aside .mobile-menu-cta,
  body.theme-odyssey-custom .area-aside .mobile-menu-cta-fallback {
    display: none;
  }

  /* 최근글 / 인기글 항목 5개로 제한 (사용자 명시: 10개 이상 안 보이게) */
  body.theme-odyssey-custom .area-aside .box-recent .recent-item:nth-child(n+6) {
    display: none;
  }
  /* 모바일에서 5개 제한과 짝 — 화면에 보이는 5번째(=마지막) 항목 아래 hairline 제거
   * ※ :last-child 만으로는 부족 (n+6 가 display:none 이라도 XML 상으로는 :last-child 가 아님)
   * ※ PC 에는 항목 개수 제한이 없으므로 이 규칙은 모바일 @media 안에서만 적용
   * ※ specificity (0,6,1) — 모바일 @media 안 .recent-list 경유 규칙(0,5,1)보다 한 단계 위 */
  body.theme-odyssey-custom .area-aside .box-recent .recent-item:nth-child(5) .recent-link {
    border-bottom: 0;
  }

  /* 카테고리 영역이 .mobile-menu-head 와 분리됨 → allcat 의 기존 margin-top 리셋
   * (예전엔 head 내부에서 desc 와 분리 용도였지만, 이제 별도 블록의 첫 요소) */
  body.theme-odyssey-custom .mobile-menu-cats-wrap .mobile-menu-allcat {
    margin-top: 0;
  }
  /* 검색창과 카테고리 사이 자연스러운 분리 */
  body.theme-odyssey-custom .mobile-menu-cats-wrap {
    display: block;
    margin-top: var(--space-5);
  }

  /* ════════════════════════════════════════════════════════════════
   * 중간 플러스 추천값 — 모바일 추가 매핑
   * ════════════════════════════════════════════════════════════════ */

  /* ─ CTA 버튼 (모바일) ─
   *  중간 플러스: padding 14px 22px / 글씨 15px / width 100% */
  body.theme-odyssey-custom .btn-cta {
    padding: var(--btn-cta-pad-y-mobile) var(--btn-cta-pad-x-mobile);
    font-size: var(--btn-cta-font-mobile);
    width: var(--btn-cta-width-mobile);
  }
  /* hero-actions 등에서 CTA 가 다른 버튼과 같이 있을 때 모바일에서 풀폭으로 */
  body.theme-odyssey-custom .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
  body.theme-odyssey-custom .hero-actions .btn {
    width: 100%;
  }

  /* ─ 메인 페이지 최신글 썸네일 (모바일 78px) ─
   *  ※ 사이드바 드로어 내부 .area-aside .box-recent .recent-thumb 는 위에서 display:none 처리됨.
   *     이 규칙은 메인 영역에 노출되는 .recent-thumb 에만 적용. */
  body.theme-odyssey-custom .recent-thumb {
    width: var(--recent-thumb-size-mobile);
    height: var(--recent-thumb-size-mobile);
  }

  /* ─ 인기글 항목 여백 (모바일 17px 18px) ─
   *  ※ 시안: 모바일 드로어에서는 평면 리스트(transparent)로 렌더되므로
   *     padding 은 0 으로 덮어 쓰는 위 규칙(2696)이 우선. 일반 페이지(드로어 외)
   *     에서 box-recent 가 노출되는 경우에만 본 토큰 값이 적용됨. */

  /* ─ 제휴 안내 박스 (모바일) ─
   *  중간 플러스: 위 간격 48px / 여백 22px 24px / 글씨 15px
   *  ※ padding 과 font-size 는 §43 (Stage 4 모바일 보정) 에서 토큰값으로 재정의.
   *     여기서는 margin-top 만 처리 — §43 의 box-* 공통 margin 보다 더 구체적이므로 우선 적용. */
  body.theme-odyssey-custom .article-view .box-affiliate {
    margin-top: var(--space-affiliate-top-mobile);
  }

  /* ─ 모바일 그림자 보정 (사용자 결정 — 확장) ─
   *  PC 의 청록빛(rgba(var(--shadow-tint-rgb), X)) box-shadow 가 모바일 좁은 폭에서는
   *  카드들이 가까이 붙으며 청록빛이 누적되어 답답하게 보임. 따라서 모바일에서는
   *  청록 계열 foundation shadow 토큰을 일괄 none 으로 재정의 → 모든 카드가 자동 따라옴.
   *  ─────────────────────────────────────────────────────────
   *  유지 사항:
   *   - --shadow-cta / --shadow-cta-hover : 주황 알파 (CTA 만 ‑ 명확한 affordance 필요)
   *   - --shadow-drawer                   : 모바일 햄버거 드로어 그림자 (UI 필수)
   *   - --color-input-focus-bg / focus 링 : 접근성용 포커스 신호 (그림자 토큰 아님)
   *  ─────────────────────────────────────────────────────────
   *  PC 화면에서는 :root 원본 값 그대로 사용 — 입체감 유지. */
  :root {
    --shadow-xs:          none;
    --shadow-md:          none;
    --shadow-card:        none;
    --shadow-card-hover:  none;
    --shadow-header:      none;
    --shadow-footer:      none;
  }
  /* ─ 명시적 컴포넌트 토큰 (legacy — 위 foundation override 만으로 충분하나
   *   세 곳은 명확한 의도 표기 + 향후 부분 복원 시 한 줄 토글 가능하도록 유지) ─ */
  body.theme-odyssey-custom .site-header {
    box-shadow: var(--shadow-header-mobile);
  }
  body.theme-odyssey-custom .article-card {
    box-shadow: var(--shadow-article-card-mobile);
  }
  body.theme-odyssey-custom .site-footer {
    box-shadow: var(--shadow-footer-mobile);
  }
}
/* ════════════════════════════════════════════════════════════════════
   17-A. 포털 전용 대표이미지(정사각형) 본문 숨김 — og:image / 검색 썸네일 전용
   ────────────────────────────────────────────────────────────────────
   목적: 본문에 16:9 배너(독자 노출용)와 정사각형 이미지(포털 썸네일용)를
         함께 올린 뒤 → 정사각형 이미지에 블로거 '대표 이미지'(featured) 체크 → og:image·
         포털 검색 썸네일이 정사각형이 됨. 단 본문에선 중복 노출을 막기 위해
         정사각형 이미지를 숨긴다 (PC·모바일 공통 / 전역 규칙).
   마커(둘 중 편한 방법 하나만 쓰면 됨):
     ① 이미지 '설명'(alt) 을  [썸네일]  로 시작하게 입력  ← 권장(모드 전환 불필요)
     ② <img>·figure, 또는 대표이미지 토큰을 감싼 <div> 에 class="thumb-portal"
   원리: display:none 은 화면 노출만 차단 — og:image 는 <head> 메타에서
         가져가므로 본문에서 숨겨도 포털 썸네일에는 영향 없음.
   ════════════════════════════════════════════════════════════════════ */
body.theme-odyssey-custom .article-view .thumb-portal,
body.theme-odyssey-custom .article-view img[alt^="[썸네일]"],
body.theme-odyssey-custom .article-view figure:has(img[alt^="[썸네일]"]),
body.theme-odyssey-custom .article-view p:has(img[alt^="[썸네일]"]) {
  display: none;
}
@media (hover: none) {
  body.theme-odyssey-custom .category-card:hover,
  body.theme-odyssey-custom .post-card:hover,
  body.theme-odyssey-custom .article-related .related-link:hover,
  body.theme-odyssey-custom .hero-side-list a:hover,
  body.theme-odyssey-custom .article-view .post-toc .post-toc-link:hover {
    transform: none;
  }
}
@media print {
  body.theme-odyssey-custom .site-header,
  body.theme-odyssey-custom .site-footer,
  body.theme-odyssey-custom .area-aside,
  body.theme-odyssey-custom .index-only-block,
  body.theme-odyssey-custom .breadcrumb-nav {
    display: none;
  }
  body.theme-odyssey-custom #wrap {
    padding: 0;
  }
}

  /* ── 본문 인아티클 광고 슬롯 (.revenue-slot--inline, JS 삽입) — 2026-06-18 ──
     기존 .revenue-slot(stage4.css) 위에 인콘텐츠용 override (specificity 0,3,0 > 0,2,0).
     점선 placeholder·배경 제거 + 낮은 예약높이(--ad-slot-min-h-inline) + 문단 사이 여백.
     빈/오류 슬롯 자동 접힘(:has unfilled → display:none)은 stage4.css 규칙이 그대로 적용. */
  body.theme-odyssey-custom .revenue-slot.revenue-slot--inline {
    min-height: var(--ad-slot-min-h-inline);
    margin: var(--space-7) 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }

  /* ── 상단 광고(.revenue-slot--upper) 모바일 잘림 방지 — 2026-06-18 ──
     증상: 모바일에서 반응형 광고가 점선 박스보다 넓게 송출되어 좌우(AD 배지·광고주 텍스트)가 잘림.
     원인: ① ins 의 full-width-responsive 가 광고를 '화면 전체 폭'으로 확장(→ ins 에서 false 로 변경)
           ② 로딩 상태(padding 0)에서 측정한 폭으로 광고가 송출된 뒤, 송출 상태가 padding/테두리를
              추가해 박스 안쪽이 좁아짐 → 광고가 그만큼 삐져나와 overflow:hidden 에 잘림.
     해결: 로딩 상태도 송출 상태와 '박스 안쪽 폭(padding + 테두리 두께)'을 동일하게 맞춤.
           로딩 땐 테두리를 투명 처리해 점선은 안 보이되 폭만 동일 확보 → 반응형 광고가
           최종 폭 기준으로 측정·송출되어 잘리지 않음. (specificity 0,3,0 > stage4 로딩규칙 0,2,0,
           송출 상태 테두리 색은 stage4 의 filled 규칙이 뒤 순서로 다시 보이게 함) */
  @media (max-width: 768px) {
    body.theme-odyssey-custom .revenue-slot.revenue-slot--upper {
      padding: var(--ad-pad-mobile);
      border: var(--ad-border);
      border-color: transparent;
    }
  }

/* ============================================================================
 * Blogger(블로그스팟) 호환 레이어  [추가: 2026-07-06]
 * ----------------------------------------------------------------------------
 *  Blogger 는 <b:section>·<b:widget> 을 각각 div.section / div.widget 래퍼로
 *  감싸 출력합니다. 원본 DOM 과 동일하게 동작하도록 이 래퍼를
 *  레이아웃에서 제거(display:contents)해 평탄화합니다.
 *  · 구조 전용 규칙(디자인 토큰 불필요)
 * ========================================================================== */
body.theme-odyssey-custom .section,
body.theme-odyssey-custom .widget {
  display: contents;
}
/* display:contents 미지원 구형 브라우저 대비 최소 리셋 */
@supports not (display: contents) {
  body.theme-odyssey-custom .section,
  body.theme-odyssey-custom .widget {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
  }
}
/* 오버라이드한 main 외에 Blogger 가 넣을 수 있는 기본 위젯 타이틀 숨김(안전) */
body.theme-odyssey-custom .widget > h2.title,
body.theme-odyssey-custom .widget .widget-item-control {
  display: none;
}
/* 목록 그리드(.area-common: 2열) 안에서 전폭이어야 하는 요소 스팬 보정 */
body.theme-odyssey-custom .area-common > .breadcrumb-nav,
body.theme-odyssey-custom .area-common > .empty-box {
  grid-column: 1 / -1;
}
/* 목록 페이지 하단 페이지네이션(.area-main 직속 블록) */
body.theme-odyssey-custom .list-pager {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  margin-top: var(--section-gap);
}