/**
 * calc-components.css
 * Extracted from jiwon.css — only the classes used by calc PHP templates
 *
 * Source: jiwon.css v2.4 (2026-01-23)
 * Extraction date: 2026-03-05
 *
 * PHP files scanned:
 *   templates/calc.php, partials/pyung.php, data/pyung.php,
 *   includes/render-*.php (header, section, toc, faq, stats, steps,
 *   cta, guide-cta, related, sources, briefing),
 *   calc-main.php, calc-ads.php, calc-seo.php, calc-schema.php
 *
 * NOTE: Calculator-specific classes (calc-module, calc-form, calc-input,
 * calc-btn, calc-result, calc-detail, calc-briefing, calc-share, calc-error,
 * calc-toggle, calc-select, pyung-table, area-type-table, table-scroll-wrap,
 * screen-reader-text, core-ad, step-cards/step-card/step-number/step-title/
 * step-desc in calc-modules.css context, theme-*, etc.) are defined in
 * calc-modules.css and NOT duplicated here.
 *
 * This file contains only jiwon.css components used by calc templates.
 */


/* ========================================
   Utility Classes
   ======================================== */
.width-100 { width: 100% !important; display: block; }


/* ========================================
   Background Gradient System
   (used by header-block, highlight-block, CTA)
   ======================================== */
.bg-gradient-red {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: white !important;
}
.bg-gradient-blue {
    background: linear-gradient(135deg, #3b82f6, #1e40af) !important;
    color: white !important;
}
.bg-gradient-green {
    background: linear-gradient(135deg, #1e7e34, #155d27) !important;
    color: white !important;
}
.bg-gradient-purple {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
}
.bg-gradient-orange {
    background: linear-gradient(135deg, #ff8c42, #ff6b1a) !important;
    color: white !important;
}
.bg-gradient-yellow {
    background: linear-gradient(135deg, #eab308, #a16207) !important;
    color: white !important;
}
.bg-gradient-rose {
    background: linear-gradient(135deg, #e11d48, #be123c) !important;
    color: white !important;
}
.bg-gradient-gray {
    background: linear-gradient(135deg, #6b7280, #374151) !important;
    color: white !important;
}
.bg-gradient-mint {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    color: white !important;
}
.bg-gradient-teal {
    background: linear-gradient(135deg, #14b8a6, #0d9488) !important;
    color: white !important;
}
.bg-gradient-gold {
    background: linear-gradient(135deg, #f5d742, #d4af37) !important;
    color: #5d4e0f !important;
}
.bg-gradient-silver {
    background: linear-gradient(135deg, #e8e8e8, #a0a0a0) !important;
    color: #333 !important;
}
.bg-gradient-pink {
    background: linear-gradient(135deg, #ec4899, #db2777) !important;
    color: white !important;
}
.bg-gradient-indigo {
    background: linear-gradient(135deg, #6366f1, #4338ca) !important;
    color: white !important;
}
.bg-gradient-violet {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9) !important;
    color: white !important;
}
.bg-gradient-cyan {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
    color: white !important;
}
.bg-gradient-brown {
    background: linear-gradient(135deg, #a0522d, #8b4513) !important;
    color: white !important;
}


/* ========================================
   Content Titles — SSOT: content.css line 46 (.module-section__title)
   ======================================== */
/* h2.module-section__title 중복 정의 폐기 (사용자 영구 명시 2026-05-04, "범용 .module-section__title 무효화 원인 fix"):
   content.css `.module-section__title { margin: 70px 0 15px 0 }` (specificity 0,1,0) 가 universal SSOT.
   기존 `h2.module-section__title` (specificity 0,1,1, 동일 값) = 중복 정의 → dev tools 에서 .module-section__title 무효화 시각.
   제거 후 .module-section__title 단일 활성 → 모든 섹션/블록 개별 사용 시 동일 적용 (master hub = longtail 정합).
   .module-content wrapper 도 폐기 (모든 calc longtail.php) → element selector 침범 부재 → BEM Block 자체 specificity 충분. */

/* [폐기 2026-07-04] h3.module-section__title--sub("H2와 동일 스타일" 구세대 규칙) 삭제 —
   태그+클래스(0,1,1) 특이성이 modules.css의 소제목 SSOT(.module-section__title--sub·19px)를 이겨
   h3 강등 후에도 H2처럼 보이던 원인(사용자 적발). 위 h2 중복 폐기(2026-05-04)와 동일 함정의 h3판.
   소제목 스타일 SSOT = modules.css 한 곳. */

h3.content-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: #374151;
    margin: 32px 0 16px 0;
    padding-left: 12px;
    border-left: 3px solid #3b82f6;
    line-height: 1.7;
    transform: scaleY(1.1);
}


/* ========================================
   Content Section Body — 본문 내 h3/p/ul 기본 스타일
   ======================================== */

.module-section__body {
    font-size: 16px;
    line-height: 1.85;
    color: #374151;
    word-break: keep-all;
}
.module-section__body table {
    width: 100%;
    border-collapse: collapse;
}
.module-section__body .calc-table {
    width: 100%;
}
/* 금액 테이블: 기본 right 유지 (calc-table 기본값) */
/* 문장 테이블: calc-table--text 클래스 추가 시 left 적용 */
.module-section__body .calc-table--text td {
    text-align: left;
}
.module-section__body .calc-table td:first-child:not(.td-notes) {
    text-align: center;
}
.module-section__body > h3,
.module-section__body h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 28px 0 12px 0;
    padding-left: 12px;
    border-left: 3px solid #3b82f6;
    line-height: 1.5;
}
.module-section__body h4 {
    font-size: 17px;
    font-weight: 700;
    color: #1e293b;
    margin: 24px 0 10px 0;
    padding-left: 10px;
    border-left: 3px solid #60a5fa;
    line-height: 1.5;
}
.module-section__body .module-info-box--note {
    font-size: 14px;
    color: #6b7280;
    font-style: italic;
    padding: 8px 12px;
    background: #f9fafb;
    border-radius: 6px;
    border-left: 3px solid #d1d5db;
}
.module-section__body p {
    margin-bottom: 16px;
}
.module-section__body ul,
.module-section__body ol {
    margin: 0 0 16px 0;
    padding-left: 0;
    list-style: none;
}
.module-section__body li {
    background: #f8fafc;
    border-left: 3px solid #e2e8f0;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 8px;
    line-height: 1.8;
    transition: border-color 0.2s;
}
.module-section__body li:hover {
    border-left-color: #3b82f6;
}
.module-section__body li strong {
    color: #1e40af;
}
.module-section__body p.content-section-note,
.content-section-note {
    margin-top: 24px !important;
    padding: 14px 18px;
    background: #f0f9ff;
    border-left: 4px solid #3b82f6;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.7;
    color: #1e293b;
}
/* fact-box: 팩트/데이터 강조 (그린, content-section-note와 시각 구분) */
.module-section__body p.content-section-fact,
.content-section-fact {
    margin: 16px 0 !important;
    padding: 14px 18px;
    background: #ecfdf5;
    border-left: 4px solid #10b981;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.75;
    color: #064e3b;
    box-shadow: 0 1px 2px rgba(16, 185, 129, 0.08);
}
.content-section-fact strong {
    color: #047857;
    font-weight: 700;
}
.content-section-fact a {
    color: #047857;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.content-section-fact a:hover {
    color: #065f46;
}
.content-section-fact + .content-section-fact {
    margin-top: 12px !important;
}
.content-section-note strong {
    color: #1e40af;
}
.content-section-note a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.content-section-note a:hover {
    color: #1d4ed8;
}
.module-section__body a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.module-section__body a:hover {
    color: #1d4ed8;
}
.module-section__body .module-nearby-link {
    text-decoration: none;
    color: var(--color-primary-dark, #1e40af);
}
.module-section__body .module-nearby-link:hover {
    color: #fff;
}
.module-section__body strong {
    font-weight: 700;
    color: #111827;
}

/* .module-info-box SSOT는 modules.css로 통일 (2026-06-05, 값 동일 중복 제거 — 모듈 CSS는 modules.css 한 곳) */

/* tip-box: 실전 팁/꿀팁 (초록색) */
.tip-box {
    background: #f0fdf4;
    border-left: 4px solid #22c55e;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 16px;
    line-height: 1.8;
    color: #14532d;
}

/* warning-box: 주의/경고 (주황색) */
.warning-box {
    background: #fff7ed;
    border-left: 4px solid #f97316;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 16px;
    line-height: 1.8;
    color: #7c2d12;
}

/* lt-bracket-warn: 세율 구간 경계 경고 (주황 — warning-box 동일 기반) */
/* calc-briefing--warn: info-box 모듈 'warn' 타입 표준 CSS (lt-bracket-warn 시각 100% 정합) */
.module-bracket-warn,
.module-briefing.module-briefing--warn {
    background: #fff7ed;
    border-left: 4px solid #f97316;
    padding: 16px 20px;
    margin: 20px 0;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.8;
    color: #7c2d12;
}
.module-bracket-warn p,
.module-briefing.module-briefing--warn p {
    margin: 0;
    color: #7c2d12;
}
.module-bracket-warn strong,
.module-briefing.module-briefing--warn strong {
    font-weight: 700;
    color: #9a3412;
}

/* lt-raise-sim: 인상/소득 변화 시뮬레이션 (파란 배경 — info-box 동일 기반) */
.module-raise-sim {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    padding: 16px 20px;
    margin: 20px 0;
    border-radius: 8px;
    font-size: 16px;
    line-height: 1.8;
    color: #1e3a5f;
}
.module-raise-sim p {
    margin: 0;
}
.module-raise-sim p:first-child {
    font-weight: 700;
    color: #1e3a8a;
    margin-bottom: 6px;
}
.module-raise-sim table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.module-raise-sim thead tr {
    background: rgba(37,99,235,0.08);
}
.module-raise-sim th {
    text-align: left;
    padding: 6px 10px;
    border-bottom: 1px solid #bfdbfe;
    font-weight: 600;
    color: #1e3a8a;
}
.module-raise-sim th:not(:first-child) {
    text-align: right;
}
.module-raise-sim td {
    padding: 5px 10px;
}
.module-raise-sim td:nth-child(2) {
    text-align: right;
    color: #dc2626;
}
.module-raise-sim td:nth-child(3) {
    text-align: right;
}
.module-raise-sim td:last-child {
    text-align: right;
    color: #059669;
    font-weight: 600;
}
.module-raise-sim .module-raise-sim__note {
    margin: 8px 0 0;
    font-size: 13px;
    color: #475569;
}

/* 공통: box 내부 strong/a 스타일 */
.module-info-box strong, .tip-box strong, .warning-box strong {
    font-weight: 700;
}
.module-info-box a, .tip-box a, .warning-box a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ========================================
   Header Block
   ======================================== */
/* .module-header SSOT는 modules.css로 통일 (2026-06-05, 값 동일 중복 제거 — 모듈 CSS는 modules.css 한 곳) */

/* ════════════════════════════════════════════════════════════════════════════
   `.module-header` 영역 중복 정의 폐기 (사용자 영구 mandate 2026-05-05):
   content.css 영역 `.module-header` 영역 (specificity 0,1,0) = universal SSOT 영역.
   기존 `.module-header .module-header__intro` 영역 (specificity 0,2,1 + !important) = 중복 정의 영역
     → dev tools 영역에서 `.module-header__intro` 영역 무효화 시각 영역.
   제거 후 content.css 영역의 SSOT 영역 단일 활성 → 모든 영역 동일 적용 (이전 mandate 2026-05-04 영역의
     `h2.module-section__title` 중복 정의 폐기 영역과 동일 패턴 영역).
   ──────────────────────────────────────────────────────────────────────────── */


/* ========================================
   Table of Contents (TOC)
   (jiwon.css 원본 복사)
   ======================================== */
.toc-container {
    margin: 30px 0;
    padding: 20px 25px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid #0284c7;
    border-radius: 8px;
}

.toc-title {
    font-size: 1.2em;
    font-weight: 700;
    color: #0c4a6e;
    margin-bottom: 15px;
}

.toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: toc-counter;
}

.toc-list li {
    margin: 8px 0;
    padding-left: 0;
    line-height: 1.6;
    counter-increment: toc-counter;
    display: flex;
    align-items: baseline;
}

.toc-list li::before {
    content: counter(toc-counter) ". ";
    color: #075985;
    font-weight: 500;
    margin-right: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.toc-level-2 a {
    color: #075985;
    flex: 1;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.toc-level-2 a:hover {
    color: #0284c7;
    text-decoration: underline;
}

@media (max-width: 768px) {
    .toc-list li {
        margin: 12px 0;
        line-height: 1.7;
    }
}


/* ========================================
   Calc Attr List — Entity Attribute Cards (I2 pattern)
   용도: 각 행이 독립 엔티티이고 서로 비교하지 않는 경우
   예시: state local_taxes (county/city/transit district 각 독립)
   원칙: semantic <dl> 사용, slate 중립 톤, 모바일 우선
   ======================================== */
/* Nested bracket list inside a card (e.g., NYC income tax brackets) */
@media (max-width: 640px) {
    .calc-attr-card__body {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .calc-attr-card__body dt {
        margin-top: 8px;
    }
    .calc-attr-card__body dt:first-of-type {
        margin-top: 0;
    }
}

/* CTA(arrow 포함) 전체 → modules.css 단일 SSOT로 이동 (2026-06-05). 아래 cta 영역들도 동일. */

/* (CTA Button System → modules.css 이동됨) */


/* (CTA Color Variants + Highlight 안 CTA override → modules.css 이동됨) */


/* ========================================
   Highlight Block → modules.css 단일 SSOT로 이동 (2026-06-05).
   highlight 자체 스타일(base·__title·__text·p·__description·ul·li·strong·[bg-gradient] a·@media)
   전부 modules.css 끝으로 옮김. (.bg-gradient-* 유틸 클래스 + badge/savings subsystem은 별개로 유지)
   ======================================== */

/* ══════════════════════════════════════════════════════════════
   📌 Overview Banner (Step 4.1 — Silent Default 방지 notice)
   ════════════════════════════════════════════════════════════ */
.overview-banner {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    margin: 0 0 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-left: 4px solid #f59e0b;
    border-radius: 6px;
    font-size: 0.95rem;
    line-height: 1.55;
    color: #78350f;
}
.overview-banner__icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1.2;
}
.overview-banner__body {
    flex: 1;
}
.overview-banner__body strong {
    color: #78350f;
    font-weight: 700;
}
.overview-banner__body span {
    display: inline;
    margin-left: 4px;
    color: #92400e;
}
.overview-banner__cta {
    display: inline-block;
    margin-top: 4px;
    padding: 4px 10px;
    background: #f59e0b;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.9rem;
}
.overview-banner__cta:hover {
    background: #d97706;
    text-decoration: none !important;
}
.overview-banner a:not(.overview-banner__cta) {
    color: #92400e;
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════
   🚀 Progressive Render — Precise Selector v2 (자기진화 ㊳ 재설계, 2026-04-26)
   화면 밖 sections 의 layout/paint 계산 skip → Mobile LCP 30-50% ↓
   HTML/SEO/콘텐츠 영향 0 (CSS only, native browser feature)
   2026-04-25 v1 실패 학습: .module-section / .calc-table-wrap 적용 시 .module-table__scroll-wrap 위치 깨짐
   v2 정밀 selector: table-scroll-wrap 충돌 회피 + 페이지 하단 큰 sections 만
   ════════════════════════════════════════════════════════════ */
.module-faq,                /* FAQ wrapper (대신 .module-faq__list 도 OK) */
.module-sources,            /* Sources & References 16개 */
.module-related-grid,       /* Related calculator cards 7개 */
.module-hub-nav {              /* Hub-Nav blocks (Popular/Rank/TIS/State/System/Base) */
    content-visibility: auto;
    contain-intrinsic-size: 0 600px;
}


/* ══════════════════════════════════════════════════════════════
   🕸️ Derivative Hub Blocks (자기진화 ㉒ Pillar 1 + C-M04 BEM)
   ════════════════════════════════════════════════════════════ */

/* .hub-nav-wrap: CSS 제거 (자기진화 ㊵ KISS) — h2.module-section__title 이 자체 margin/border 로 시각 구분 충분 */

.hub-nav__intro {
    font-size: 1rem;
    color: #374151;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.module-hub-nav {
    margin: 2rem 0;
    padding: 1.5rem;
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
}

.module-hub-nav__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px;
}

.module-hub-nav__desc {
    font-size: 0.95rem;
    color: #4b5563;
    margin: 0 0 16px;
    line-height: 1.5;
}

.module-hub-nav__footer {
    font-size: 0.875rem;
    color: #6b7280;
    margin: 16px 0 0;
    text-align: center;
    font-style: italic;
}

/* Grid for dim-list blocks */
.hub-grid {
    display: grid;
    gap: 8px;
}

.hub-grid--rank,
.hub-grid--retirement-type,
.hub-grid--retirement-component,
.hub-grid--system {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

.hub-grid--tis {
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}

.hub-grid--service {
    /* [2026-04-27] service 6 cells (Army/Navy/Marine Corps/Air Force/Space Force/Coast Guard) — desktop ~6열, mobile ~2-3열 */
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
}

.hub-grid--state,
.hub-grid--base {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}

.hub-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    text-decoration: none;
    color: #1e40af;
    font-size: 0.95rem;
    text-align: center;
    transition: all 0.15s ease;
    min-height: 44px;
}

.hub-cell:hover {
    background: #eff6ff;
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
}

.hub-cell__label {
    font-weight: 600;
}

.hub-cell__meta {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 2px;
}

/* Matrix block */
.module-hub-nav--matrix .hub-matrix {
    margin: 0;
}

.hub-matrix__row-label {
    font-weight: 700;
    color: #1e293b;
    background: #f3f4f6;
    text-align: left;
    padding-left: 12px !important;
}

/* v14.80 (사용자 mandate "View → 버튼 가운데 정렬"): specificity 강화
   - .hub-matrix__cell (0,1,0) < .calc-table td (0,1,1) → override 영영구
   - .hub-matrix td.hub-matrix__cell (0,2,1) > .calc-table td → specificity 영영구 */
.hub-matrix__cell,
.hub-matrix td.hub-matrix__cell,
.hub-matrix th.hub-matrix__cell {
    padding: 4px;
    text-align: center;
}

/* 버튼식: hub-cell 과 동일 톤 + matrix 밀도 (padding/font 최소 가독 크기 0.9rem) */
/* v14.67 (2026-05-09, 사용자 mandate "별도 지시 없으면 본문 사이즈"):
   font-size 영영구 영영구 (본문 inherit) — 자동 스크롤바 영영구 영영구 영영구 작은 글자 영영구 영영구 */
.hub-matrix__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    color: #1e40af;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
    min-width: 54px;
    min-height: 32px;
    line-height: 1.1;
    white-space: nowrap;
}

.hub-matrix__link:hover,
.hub-matrix__link:focus {
    background: #eff6ff;
    border-color: #2563eb;
    color: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.12);
    text-decoration: none;
}

.hub-matrix__empty {
    color: #d1d5db;
}

/* Combo card block */
.combo-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}

.combo-card,
.module-content a.combo-card,
.entry-content a.combo-card {
    display: block;
    padding: 16px;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border: 1px solid #93c5fd;
    border-radius: 8px;
    text-decoration: none !important;
    color: #1e293b;
    transition: all 0.2s ease;
}

.combo-card:hover,
.module-content a.combo-card:hover,
.entry-content a.combo-card:hover {
    border-color: #2563eb;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.15);
    text-decoration: none !important;
}

/* hub-cell + hub-matrix__link 도 동일 underline 차단 (.module-content a:hover 오버라이드) */
.hub-cell,
.hub-cell:hover,
.module-content a.hub-cell,
.module-content a.hub-cell:hover,
.entry-content a.hub-cell,
.entry-content a.hub-cell:hover,
.hub-matrix__link,
.hub-matrix__link:hover,
.module-content a.hub-matrix__link,
.module-content a.hub-matrix__link:hover {
    text-decoration: none !important;
}

/* combo-card__title — `.module-section__body h4` (0,1,1) override 위해 specificity 0,2,0 */
.combo-card .combo-card__title,
.module-content .combo-card__title,
.module-section__body .combo-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px;
    padding-left: 0;
    border-left: none;
    line-height: 1.3;
}

.combo-card__dims {
    font-size: 0.85rem;
    color: #4b5563;
    margin: 0 0 4px;
}

.combo-card__meta {
    font-size: 0.85rem;
    color: #059669;
    font-weight: 600;
    margin: 4px 0;
}

.combo-card__cta {
    display: inline-block;
    margin-top: 8px;
    color: #2563eb;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Responsive */
@media (max-width: 640px) {
    .hub-grid--rank,
    .hub-grid--retirement-type,
    .hub-grid--retirement-component,
    .hub-grid--system {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
    .hub-grid--service {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
    .hub-grid--state,
    .hub-grid--base {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    }
    .combo-card-grid {
        grid-template-columns: 1fr;
    }
}

/* Entry-content box list margin resets */
.entry-content .step-card ul,
.entry-content .step-card ol,
.entry-content .module-highlight ul,
.entry-content .module-highlight ol,
.entry-content .module-faq ul,
.entry-content .module-faq ol {
    padding-left: 1.5em !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}


/* ========================================
   Step Cards (레거시 .step-* 클래스 — steps 모듈은 .module-steps__* 사용)
   .module-steps(모듈 클래스) SSOT는 modules.css로 통일 (2026-06-05, grid 오버라이드 제거)
   ======================================== */
.step-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 24px 20px;
    text-align: left;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    position: relative;
}

.step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
}

.step-number {
    background: linear-gradient(135deg, #3b82f6, #8b5cf6);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 12px;
    letter-spacing: 0;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: auto;
    width: auto;
    min-width: fit-content;
}

.step-card > .step-title {
    font-size: 1.15em;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 10px;
    line-height: 1.7;
    transform: scaleY(1.1);
    display: block;
}

.step-title {
    display: inline;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0;
}

.step-desc {
    font-size: 1rem;
    color: #6b7280;
    line-height: 1.6;
    margin-bottom: 0;
}

.step-desc ul {
    margin: 0 !important;
    padding-left: 20px !important;
    line-height: 1.9;
}

/* Steps container variant (steps-container__item 전용 — .step-card 영역 영역 영역, line 1307 jiwon version 정합)
   v14.10 정정: 영역 영역 영역 .step-card 영역 영역 → display: inline 영역 결함 영역 → number + title 한 줄 결함 영역 */
.steps-container__item {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-left: 4px solid #667eea;
    position: relative;
    transition: all 0.3s ease;
}

.steps-container__item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(102, 126, 234, 0.2);
}

.steps-container__item > .step-number,
.steps-container__item > .step-title,
.steps-container__item > h4 {
    display: inline;
    vertical-align: middle;
}

.steps-container__number,
.step-number {
    display: inline-block;
    padding: 5px 12px;
    background: #4F46E5 !important;
    color: #fff !important;
    border-radius: 3px !important;
    font-weight: 700;
    margin-right: 10px;
}

/* .module-steps + .info-table 간격은 modules.css(컨테이너 SSOT)로 이동 (2026-06-05) */

@media (max-width: 768px) {
    .step-card {
        padding: 20px 16px;
    }

    .steps-container__number,
    .step-number {
        width: 36px;
        height: 36px;
        font-size: 1rem;
    }
}


/* ========================================
   Grid Cards Layout
   ======================================== */
.module-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.module-card-grid--cols-2 {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.module-card-grid--cols-3 {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media (max-width: 768px) {
    .module-card-grid,
    .module-card-grid--cols-2,
    .module-card-grid--cols-3 {
        grid-template-columns: 1fr;
    }
}

/* card-grid--cols-2 fixed columns (overrides auto-fit for 2-col layout) */
.module-card-grid--cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 768px) {
    .module-card-grid--cols-2 {
        grid-template-columns: 1fr;
    }
}

/* v14.47 (2026-05-09, 사용자 mandate): card-grid--cols-1 정의만 영영구 (--4 폐지 — 콘텐츠 카드 너비 부족) */
.module-card-grid--cols-1 {
    grid-template-columns: 1fr;
}


/* ========================================
   Stat Card System → modules.css 단일 SSOT로 이동 (2026-06-05).
   그라데이션·shine·떠오름 호버 전체를 modules.css 맨 끝으로 옮김.
   (아래 reduced-motion @media는 여러 모듈 공통이라 그대로 유지 — 교차 파일로 정상 적용)
   ======================================== */


/* ========================================
   Link Description (used in calc-briefing links)
   ======================================== */
.link-desc {
    font-size: 1rem;
    color: #6b7280;
}


/* ========================================
   Sources Block
   ======================================== */
.sources-block {
    background: white;
    padding: 16px;
    border-radius: 8px;
}


/* ========================================
   FAQ Block
   ======================================== */
/* .module-faq / .module-faq__items SSOT는 modules.css로 통일 (2026-06-05, 값 동일 중복 제거 — 모듈 CSS는 modules.css 한 곳) */

/* FAQ 스타일 SSOT는 modules.css의 .module-faq__* 한 곳으로 통일됨.
   2026-06-05: 여기 있던 옛 .module-faq__item(border-left transparent + margin-bottom 1.5rem +
   .module-faq__item h3 회색) 블록이 modules.css(먼저 로드)를 덮어써, dacalc 박스 스타일이
   화면에 안 보이던 근본 원인이었음 → 제거. (아래 details/summary 아코디언 변형 규칙은 유지) */

/* FAQ Accordion (details/summary) */
details.module-faq__item {
    list-style: none;
}

details.module-faq__item::-webkit-details-marker,
details.module-faq__item::marker {
    display: none;
}

details.module-faq__item > summary.module-faq__question {
    cursor: pointer;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #2d3748;
    padding-right: 28px;
    position: relative;
    list-style: none;
    min-height: 44px;
    padding: 10px 28px 10px 0;
}

details.module-faq__item > summary.module-faq__question:focus-visible {
    outline: 2px solid var(--color-primary, #1a73e8);
    outline-offset: 2px;
}

details.module-faq__item > summary.module-faq__question::-webkit-details-marker {
    display: none;
}

details.module-faq__item > summary.module-faq__question::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a5568'%3E%3Cpath d='M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z'/%3E%3C/svg%3E") center/contain no-repeat;
    transition: transform 0.25s ease;
}

details.module-faq__item[open] {
    border-left-color: #4285F4;
    background-color: #EFF6FF;
}

details.module-faq__item[open] > summary.module-faq__question::after {
    transform: translateY(-50%) rotate(180deg);
}

details.module-faq__item .module-faq__answer {
    font-size: 1rem;
    color: #4a5568;
    line-height: 1.7;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #cbd5e0;
}


/* ========================================
   Animation: Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .module-stat-card,
    .module-stat-card::before,
    .module-stat-card::after,
    .module-cta {
        transition: none !important;
    }
    .module-stat-card:hover,
    .module-cta:hover,
    .step-card:hover {
        transform: none !important;
    }
    .module-stat-card.shine::before {
        animation: none;
    }
    .step-card,
    .module-header {
        transition: none !important;
    }
    details.module-faq__item > summary.module-faq__question::after {
        transition: none !important;
    }
    .module-highlight .module-cta:hover {
        transform: none !important;
    }
}

/* ==========================================
   본문이 사이드바보다 짧을 때 사이드바 높이까지 stretch (전역)
   - 데스크톱만 (모바일은 사이드바가 본문 아래로 내려가므로 영향 없음)
   - SP 페이지 + 계산기 페이지 + 모든 페이지 적용
   - 추가 2026-04-13
   ========================================== */
@media (min-width: 769px) {
    body .site-content {
        display: flex;
        align-items: stretch;
    }
    body .site-content #primary,
    body .site-content .content-area {
        display: flex;
        flex-direction: column;
    }
    body .site-content #primary > .site-main,
    body .site-content .content-area > .site-main {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
    }
    body .site-content article {
        flex: 1 0 auto;
    }
    body .site-content .inside-article {
        min-height: 100%;
    }
}


/* stat 카드 그리드 = 모바일 2열(사용자 확정 2026-07-03 "1열은 공간 낭비") — 값+라벨 중심이라 2열 적합.
   서술이 긴 method/result 그리드는 위 1열 유지. --stat 클래스는 _render_card_grid가 stat-card에만 자동 부여.
   :not(--cols-1) = 의도적 1열 밴드 보호. 본 규칙이 위 1fr 규칙보다 명시도 높아(0,2,0) 승리.
   union 역이식 2026-07-11: 481~768px = 2열, ≤480px = 1열 복귀(모두의카드 실사용 실측) */
@media (max-width: 768px) and (min-width: 481px) {
    .module-card-grid--stat:not(.module-card-grid--cols-1) {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}
/* 좁은 폰(≤480px) = 1열 복귀(2026-07-03 사용자 실측 "2열 너무 좁아" — 2열은 넓은 모바일만) */
@media (max-width: 480px) {
    .module-card-grid--stat:not(.module-card-grid--cols-1) {
        grid-template-columns: 1fr;
    }
}