/*═══════════════════════════════════════════════════════════════
  content.css — dacalc 디자인 시스템 SSOT (BEM Block)
  ═══════════════════════════════════════════════════════════════

  설계 원칙 (KISS SSOT 자기진화):
    ① CSS = 시각적 디자인 (기능 부재, 페이지 유형 무관)
    ② us/ 계산기/롱테일 템플릿 사용 중 검증된 정의 채택
    ③ 명명 일반화 — calc-/lt- 접두어 부재 (본문 컴포넌트)
    ④ BEM 표준 — Block / __Element / --Modifier
    ⑤ 색상 직접 Modifier (--blue, --green, --orange) + 가이드 주석
    ⑥ 단일 SSOT — 동일 시각 = 단일 Block + Modifier

  명명 가이드:
    -block      → 큰 시각 모듈 (faq, sources, table, formula, citation, highlight, insight)
    -box        → 작은 강조 박스 (info, tip, warning, ...)
    -card       → 카드 시각 (info, result, related, step, combo, hub)
    -container  → 컨테이너 wrapper (toc, steps)
    -list       → 리스트 (link, source, step)
    -grid       → 그리드 레이아웃 (related, info, hub, cta-buttons)

  Modifier 색상 사용 가이드 (LLM 참조 의무):
    --blue   = 정보, 중립 (default)
    --green  = 팁, 긍정, 성공, 절약
    --orange = 주의, 경고, 점검 의무
    --red    = 위험, 금지, critical
    --yellow = 팩트, 핵심 강조, 빠른 답변
    --purple = 추천, 분석, 프리미엄
    --sky    = 결론, 요약, 인사이트
    --mint   = 분석 흐름, 단계, narrative
    --gray   = 면책, 부수, deprecated

  현재 cascade 절차:
    content.css 가장 먼저 로드 → 기존 components/modules/seo-modules.css 후 로드
    → 기존 분산 정의가 cascade 우선 (호환 유지)
    → 검증 후 사용자 승인 시점에 기존 분산 정의 제거 + content.css 단일 SSOT

  계산기 본체 UI (calc-input/form/toggle/result/donut 등):
    → modules.css 잔존 (계산기 페이지 specific, 본 파일 부재)
═══════════════════════════════════════════════════════════════*/


/*═══════════════════════════════════════════════════════════════
  ① 타이틀 (Titles)
═══════════════════════════════════════════════════════════════*/

.module-section__title {
    font-size: 24px;
    font-weight: 700;
    color: #1a73e8;
    padding-left: 15px;
    padding-bottom: 10px;
    border-left: 4px solid #4285f4;
    border-bottom: 1px solid #e0e0e0;
    margin: 70px 0 15px 0;
    line-height: 1.35;   /* B39(07-18 사용자): 1.7→1.35 — 24px/700 제목 행간 정석(1.2~1.4)·2줄 제목 결속(1.5=본문용·1.7=과대) */
}

.module-section__title--sub {
    /* 모듈 소제목 = 섹션 H2(24px·파란 좌선·하단선)보다 명확히 하위 위계(2026-07-04 사용자 적발:
       동일 스타일이라 이중 제목처럼 보임). 크기·색·보더 축소 — h3 자동 강등(_helpers)과 세트. */
    font-size: 19px;
    font-weight: 700;
    color: var(--color-text-primary, #1e293b);
    padding-left: 12px;
    padding-bottom: 0;
    border-left: 3px solid #cbd5e1;
    border-bottom: none;
    margin: 28px 0 12px 0;
    line-height: 1.7;
}

.module-section__title--accent { color: #dc2626; border-left-color: #ef4444; }
.module-section__title--small  { font-size: 20px; margin: 40px 0 12px 0; }
.module-section__title--large  { font-size: 28px; margin: 80px 0 18px 0; }

.content-subtitle {
    font-size: 20px;
    font-weight: 600;
    color: #334155;
    margin: 24px 0 12px 0;
    line-height: 1.5;
}


/*═══════════════════════════════════════════════════════════════
  ② info-box (Block) + 색상 Modifier
  ───────────────────────────────────────────────────────────────
  사용 가이드 (Modifier 선택 절차):
    --blue   → 일반 정보, 보충 설명
    --green  → 실전 팁, 권장 절차, 절약 팁
    --orange → 주의, 경고, 점검 의무, 시점 검증
    --red    → 위험, 금지, critical 경고
    --yellow → 팩트, 핵심 강조, 빠른 답변
    --purple → 추천, 분석, 프리미엄 절차
    --sky    → 결론, 요약, 인사이트
    --mint   → 분석 흐름, 단계 narrative, 마일스톤
    --gray   → 면책, 부수 정보, deprecated 안내
═══════════════════════════════════════════════════════════════*/

/* Block — 기본 (--blue 시각) */
.module-info-box {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 16px;
    line-height: 1.8;
    color: #1e3a5f;
}

/* Element — 하위 구조 */
.module-info-box__title {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: inherit;
}
.module-info-box__desc {        /* __title 과 쌍 — 제목 밑 설명(dacalc hub-block__desc 값 이식) */
    font-size: 0.95rem;
    color: #4b5563;
    line-height: 1.5;
    margin: 0 0 16px;
}
.module-info-box__body {
    font-size: 1rem;       /* 본문 콘텐츠 = 기본 크기 (축소 금지 — disclaimer·sources 만 0.95rem 유지) */
    line-height: 1.7;
    margin: 0;
    color: inherit;
}
/* 내부 마지막 요소 margin-bottom 제거 — 박스 하단 여백을 상단(padding 16px)과 대칭 */
.module-info-box > *:last-child,
.module-info-box__body > *:last-child {
    margin-bottom: 0 !important;
}
.module-info-box strong { font-weight: 700; color: #111827; }
/* specificity 강화 (0,2,1) — components.css line 404 .module-info-box a { color: inherit } cascade override 차단 */
.module-info-box.module-info-box a       { color: #1a73e8; text-decoration: underline; }
.module-info-box.module-info-box a:hover { color: #c2410c; text-decoration: underline; }

/* Modifier — 색상 변형 */
.module-info-box--plain  {       /* 중립 그룹박스(dacalc hub-block) — 옅은 회색·좌측 강조선 없음·얇은 전체 테두리. link-grid explore 그룹 기본 */
    background: #fafbfc;
    border: 1px solid #e5e7eb;
    border-left: 1px solid #e5e7eb;
    color: #1e293b;
}
.module-info-box--blue   { background: #eff6ff; border-left-color: #3b82f6; color: #1e3a5f; }
.module-info-box--green  { background: #f0fdf4; border-left-color: #22c55e; color: #14532d; }
.module-info-box--orange { background: #fff7ed; border-left-color: #f97316; color: #7c2d12; }
.module-info-box--red    { background: #fef2f2; border-left-color: #ef4444; color: #7f1d1d; }
.module-info-box--yellow { background: #fefce8; border-left-color: #eab308; color: #713f12; }
/* specificity 강화 (0,2,0) — components.css line 287 .module-info-box (0,1,0) cascade override 차단 */
.module-info-box.module-info-box--amber { background: #fef3c7; border-left-color: #f59e0b; color: #78350f; }
.module-info-box--purple { background: #faf5ff; border-left-color: #a855f7; color: #581c87; }
.module-info-box--sky    { background: #f0f9ff; border-left-color: #0284c7; color: #075985; }
.module-info-box--mint   { background: #f0fdfa; border-left-color: #14b8a6; color: #134e4a; }
.module-info-box--gray   { background: #f8fafc; border-left-color: #64748b; color: #334155; }

/* Modifier — 변형 */
.module-info-box--dashed  { border-style: dashed; border-left-style: solid; }
.module-info-box--compact { padding: 12px 16px; font-size: 14px; }


/*═══════════════════════════════════════════════════════════════
  ③ header-block (Block) — 페이지/섹션 헤더 (그라데이션 + 큰 타이틀)
  ───────────────────────────────────────────────────────────────
  사용: 계산기/롱테일 페이지 최상단 헤더 (calculator/core/render/header.php)
  bg-gradient-{color} 결합으로 17색 그라데이션 적용
═══════════════════════════════════════════════════════════════*/

.module-header {
    padding: 30px 15px;
    color: #ffffff;
    border-radius: 8px;
    margin-bottom: 40px;
    text-align: center;
    transition: all 0.3s ease;
}

/* `.module-header p { margin-bottom: 0 }` 영역 — `.module-section__body p` (16px margin) 영역 specificity 0,1,1 override 의무 → !important 영역 추가 정합 (사용자 영구 mandate 2026-05-05, components.css 중복 정의 폐기 → 본 영역 SSOT 단일화) */
.module-header p { margin-bottom: 0 !important; }

.module-header__title {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 10px;
    color: #ffffff;
}

/* `.module-header__intro` 영역 SSOT (사용자 영구 mandate 2026-05-05 + 2026-05-25):
   - font-size 16px 통일 (데스크톱·모바일 동일) = 본문 16px 일치 + 사용자 push 정합 2026-05-25
   - font-weight: 500 (semibold) — `<strong>` 영역 (브라우저 default 700) 차별 영역 발생.
   - 기존 18px 데스크톱 / 16px 모바일 반응형 → 16px 통일 (단순성 + 모바일 우선 + 일관성). */
.module-header__intro {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    opacity: 0.9;
    color: #ffffff;
}

.module-header__info {
    background: rgba(255, 255, 255, 0.2);
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 1.1em;
    margin-top: 12px;
    margin-bottom: 0;
    color: #ffffff;
}

/* `.module-header a` 영역 화이트 일관 색상 (사용자 영구 mandate 2026-05-25):
   기존 = GeneratePress theme 안 link 기본 색상 (진한 파란색·보라색) 사용 → gradient 배경 안 가독성 약함.
   정정 = 헤더블록 안 모든 <a> link 흰색 + 밑줄 표시 (가시성·일관성 확보).
   `<strong>` + `<a>` + 본문 텍스트 모두 동일 색상 유지 = 사용자 push 정합. */
.module-header a,
.module-header__title a,
.module-header__intro a,
.module-header__info a {
    color: #ffffff !important;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: opacity 0.2s ease;
}
.module-header a:hover,
.module-header__title a:hover,
.module-header__intro a:hover,
.module-header__info a:hover {
    color: #ffffff !important;
    opacity: 0.85;
    text-decoration-thickness: 2px;
}
.module-header a:visited,
.module-header__intro a:visited,
.module-header__info a:visited {
    color: #ffffff !important;
}

/* `.module-header` 안 모든 텍스트 element 흰색 통일 영역 (사용자 영구 mandate 2026-05-25):
   <strong> + <em> + <span> + <b> + <i> 등 inline element 모두 흰색 유지 의무. */
.module-header strong,
.module-header em,
.module-header span,
.module-header b,
.module-header i,
.module-header__intro strong,
.module-header__intro em,
.module-header__intro span,
.module-header__info strong,
.module-header__info em,
.module-header__info span {
    color: #ffffff;
}

.module-header .module-cta {
    margin-top: 20px;
    min-width: 160px;
}

@media (max-width: 768px) {
    .module-header { padding: 20px 15px; }
    .module-header__title { font-size: 24px; }
    /* .module-header__intro = 16px 통일 (반응형 부담 0) — 데스크톱 SSOT 정의 사용 */
    .module-header__info { font-size: 1em; }
}


/*═══════════════════════════════════════════════════════════════
  ④ bg-gradient-{color} (Utility) — 그라데이션 색상 (17색)
  ───────────────────────────────────────────────────────────────
  header-block + highlight-block + 기타 큰 영역에 결합 가능
  예: <div class="header-block bg-gradient-blue">
═══════════════════════════════════════════════════════════════*/

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


/*═══════════════════════════════════════════════════════════════
  ⑤ highlight-block (Block) — 큰 강조 헤더 (그라데이션 배경)
═══════════════════════════════════════════════════════════════*/

.module-highlight {
    position: relative;
    color: #ffffff;
    border-radius: 12px;
    padding: 1.5rem 2rem 2rem;
    margin: 2rem 0;
    text-align: center;
    overflow: hidden;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.module-highlight__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0.5rem 0 1rem 0;
    color: #ffffff;
    line-height: 1.3;
}

.module-highlight__text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9);
}

.module-highlight__description {
    color: #ffffff;
    font-size: 1.05em;
    margin-bottom: 12px;
    font-weight: 600;
}

.module-highlight p { color: #ffffff; font-size: 1rem; line-height: 1.6; margin: 0 0 1.5em; }
.module-highlight ul { text-align: left; margin: 24px 0 0 0; padding-left: 0; list-style: none; }
.module-highlight ul li { color: #ffffff; margin-bottom: 8px; list-style: none; }

/* Modifier — 색상 그라데이션 변형 */
.module-highlight--blue   { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.module-highlight--green  { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.module-highlight--purple { background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%); }
.module-highlight--orange { background: linear-gradient(135deg, #f97316 0%, #c2410c 100%); }
.module-highlight--red    { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); }
.module-highlight--gold   { background: linear-gradient(135deg, #eab308 0%, #a16207 100%); }
.module-highlight--mint   { background: linear-gradient(135deg, #14b8a6 0%, #0f766e 100%); }
.module-highlight--gray   { background: linear-gradient(135deg, #64748b 0%, #334155 100%); }


/*═══════════════════════════════════════════════════════════════
  ④ table-block (Block) — 본문 표 (calc-table 정의 채택, 명명 일반화)

  ⚠️ 공유 사용처: comparison 모듈(core/template/modules/comparison.php)도
     <table class="module-table"> 를 출력해 이 CSS 를 그대로 공유한다.
     → 이 블록을 수정하면 일반 표와 비교표가 함께 바뀐다. (표 디자인 단일 출처 = 이곳)
═══════════════════════════════════════════════════════════════*/

.module-table,
.module-table__table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    /* [v13.44] GeneratePress/WordPress theme 기본 'table { border: 1px }' 차단 */
    border: 0 !important;
    table-layout: auto;
    /* [v13.50] 글자 크기 17px (master hub 가독성 향상) */
    font-size: 17px;
    margin: 16px 0 8px;
}

/* [v13.50] td-notes mandate (master hub) — 텍스트/문장 컬럼 왼쪽 정렬 */
/* [v13.51] .td-notes (line 2491) font-size: 14px + color: #64748b 영역 차단 — 표 안 td-notes 영역 본문 글자 크기 정합 */
.module-table td.td-notes,
.module-table__table td.td-notes {
    text-align: left !important;
    font-size: inherit !important;
    color: inherit !important;
}
/* [v13.50] td-center — 짧은 라벨 / 날짜 / 코드 가운데 정렬용 */
.module-table td.td-center,
.module-table__table td.td-center {
    text-align: center !important;
}
/* [v4.2.11 2026-06-16] 모듈 실제 출력 클래스 정합 — resolve_type 가 align 옵션을
   module-table__cell--center/--note 로 출력하는데 CSS 규칙이 누락돼 default(우측)로
   떨어지던 결함 정정(gas-station 표에서 발견). 레거시 td-center/td-notes 와 동일 동작. */
.module-table td.module-table__cell--center,
.module-table__table td.module-table__cell--center {
    text-align: center !important;
}
.module-table td.module-table__cell--note,
.module-table__table td.module-table__cell--note {
    text-align: left !important;
}

.module-table thead,
.module-table__head {
    background: #e2e8f0;
    color: #1e293b;
    border-bottom: 2px solid #94a3b8;
}

.module-table caption,
.module-table__caption {
    caption-side: top;
    text-align: left;
    font-size: 16px;
    font-weight: 700;
    color: #0f172a;
    background: #f8fafc;
    padding: 10px 14px;
    /* [v13.43] 표 앞 세로선 제거 — caption border-left 차단 */
    margin-bottom: 10px;
    border-radius: 4px;
}

.module-table:has(caption) { margin-top: 24px; }

/* [v5.6.54 2026-07-19] .module-table__caption 상단 마진 부재 정정(사용자 라이브 실측 신고:
   /deposit/bank/jeonbuk-bank/ — info-box--plain(deposit-cardlist) 바로 다음 캡션 여백 0).
   원인(CDP 실측 확정): dc-runtime.js MODULE 1(initScrollHints)이 표 안 <caption>을 스크롤
   영역 밖으로 꺼내 <div class="module-table__caption">으로 wrapper 앞에 삽입 — 이 div는
   margin-bottom:10px(L413)만 있고 margin-top이 정의된 적이 없음(부재, 상쇄 아님). 평소엔
   앞 모듈의 자체 margin-bottom(대부분 >0)과 collapse 되어 티가 안 나다가, 앞 요소가
   .module-info-box:has(>.module-info-box__body>.deposit-cardlist){margin:0}(L12334, B13
   증분⑪ — 카드 자체 테두리 보유로 래퍼 무테두리화)인 조합만 0 vs 0 collapse → 여백 0.
   원칙 = "뒤에 오는 요소가 자기 앞 간격을 소유"(margin-top) — 어떤 모듈 뒤에 와도 표준 간격
   확보, 마지막 요소 문제 없음(margin-bottom 방식과 달리 이 요소가 last-child가 될 일 없음).
   값 24px = L417 .module-table:has(caption) 표준값과 통일(표 캡션 앞 간격 SSOT 정합).
   margin은 인접 형제 간 max() collapse이므로 기존에 이미 24px 이상이던 조합은 무변화(회귀 0),
   0~23px이던 조합만 24px로 상향 — 전역 축소 사례 없음. */
.module-table__caption { margin-top: 24px; }

.module-table th,
.module-table__table th {
    padding: 12px 10px;
    font-weight: 700;
    text-align: center;
    color: #1e293b;
    /* [v13.44] GeneratePress/WordPress theme 'th { border: 1px }' 강제 차단 */
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.module-table td,
.module-table__table td,
.module-table__cell {
    padding: 11px 10px;
    text-align: right;
    border-bottom: 1px solid #e5e7eb !important;
    color: #374151;
    /* [v13.44] GeneratePress/WordPress theme 'td { border: 1px }' 강제 차단 — bottom만 유지 */
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
}

.module-table td:first-child { text-align: left; }
/* [v13.43] 짝수 행 옅은 배경 (zebra striping) — 가독성 향상 */
.module-table tbody tr:nth-child(even) td { background: #f8fafc; }
.module-table tr:hover td { background: #f1f5f9; }
.module-table a { text-decoration: none; color: #3b82f6; }
.module-table a:hover { text-decoration: none; color: #1d4ed8; }

/* Element — 본문 노트 셀 (좌측 정렬) */
.module-table__note, .module-table__notes {
    text-align: left;
    font-size: 1rem;       /* 본문 기본 크기 */
    color: #94a3b8;        /* 옅은 회색 — 색으로만 부차 정보 구분 */
    margin-top: 6px;
}
.module-table__note-ic { margin-right: 3px; }   /* note 앞 ※ 표식(모듈 출력) — 회색 그대로, 박스 렌더링 없음 */

/* Element — 행 변형 */
.module-table__row--highlight td { background: #fef3c7; font-weight: 600; }
.module-table__row--group td {
    background: #f1f5f9;
    font-weight: 700;
    color: #1e293b;
    border-top: 2px solid #94a3b8;
}

/* Element — wrapper (모바일 가로 스크롤) */
.module-table__wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0;
    border-radius: 8px;
}

/* Modifier */
.module-table--compact td,
/* v14.67 (사용자 mandate "별도 지시 없으면 본문 사이즈"): font-size 영영구 영영구 — padding만 정합 */
.module-table--compact th { padding: 6px 8px; }
.module-table--full { width: 100%; }


/*═══════════════════════════════════════════════════════════════
  ⑤ formula-block (Block) — 수식 모듈
═══════════════════════════════════════════════════════════════*/

.module-calc-example__formula-block {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 20px 0;
    font-size: 16px;
    line-height: 1.8;
}

.module-calc-example__formula-title {
    font-size: 14px;
    font-weight: 700;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 8px 0;
}

.module-calc-example__formula-expr {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 15px;
    color: #0f172a;
    background: #ffffff;
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid #e2e8f0;
    overflow-x: auto;
    white-space: pre-wrap;
}

.module-calc-example__formula-note {
    font-size: 13px;
    color: #64748b;
    margin-top: 8px;
    font-style: italic;
}


/*═══════════════════════════════════════════════════════════════
  ⑥ faq-block (Block) — FAQ
═══════════════════════════════════════════════════════════════*/

.module-faq {
    margin: 2.5rem 0;
}

.module-faq__items {
    background: #ffffff;
    padding: 0;
    margin-top: 20px;
    border-radius: 8px;
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    text-align: left;
}

/* FAQ 스타일 SSOT: .module-faq__list / __item / __q / __a 통합 정의는 이 파일 하단 한 곳에 있음.
   2026-06-05 정리: calc-faq→module-faq BEM 리네임 때 중복으로 남았던 옛 묶음(.module-faq__question/__answer +
   충돌 .module-faq__item)을 제거. 옛 클래스는 현재 마크업(__q/__a)과 안 맞아 사용처 0건이었음. */


/*═══════════════════════════════════════════════════════════════
  ⑦ toc-container (Block) — 목차 (Table of Contents)
═══════════════════════════════════════════════════════════════*/

.module-toc {
    margin: 30px 0;
    padding: 20px 25px;
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border-left: 4px solid #0284c7;
    border-radius: 8px;
}

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

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

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

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

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

.module-toc__item--level-2 a:hover,
.module-toc__level--2 a:hover {
    color: #0284c7;
    text-decoration: underline;
}

.module-toc__item--level-3,
.toc-level-3 {
    margin-left: 16px;
}

.module-toc__item--level-3 a,
.toc-level-3 a {
    color: #0369a1;
    flex: 1;
    text-decoration: none;
    font-size: 0.95em;
}

.module-toc__item--level-3 a:hover,
.toc-level-3 a:hover {
    color: #0284c7;
    text-decoration: underline;
}

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


/*═══════════════════════════════════════════════════════════════
  ⑧ citation-block / citation-passages (Block) — 본문 인용
  ───────────────────────────────────────────────────────────────
  본문 중간 핵심 사실 + 개별 출처 인용 (statute styling)
  vs sources-block — 하단 출처 모음 (별도 Block)

  명명 호환:
    .module-core-facts + Element  (BEM 표준 명명)
    .module-core-facts__list          (us/ data.php 사용 — wrapper, 복수)
    .module-core-facts__item           (us/ data.php 사용 — 개별, 단수)
═══════════════════════════════════════════════════════════════*/

.module-citation-passage,
.module-citation-passage__list {
    margin-bottom: 24px;
}

.module-citation-passage__item,
.module-citation-passage__item {
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

.module-citation-passage__item:last-child,
.module-citation-passage__item:last-child {
    margin-bottom: 0;
}

.module-citation-passage__topic,
.module-citation-passage__topic {
    font-size: 1rem;
    font-weight: 600;
    color: #92400e;
    margin: 0 0 8px 0;
}

.module-citation-passage__text,
.module-citation-passage__text {
    font-size: 0.95rem;
    color: #1e293b;
    line-height: 1.75;
    margin: 0 0 8px 0;
}

/* 사용자 영구 mandate (2026-05-27): citation 안 마지막 문단 = margin-bottom 0
   → 박스 padding-bottom 한정 + 텍스트 사후 추가 여백 차단 = 시각 정합 */
.module-citation-passage__text:last-child,
.module-citation-passage__text:last-child {
    margin-bottom: 0;
}

.module-citation-passage__source {
    display: block;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    font-size: 13px;
    color: #6b7280;
    font-style: normal;
}


/*═══════════════════════════════════════════════════════════════
  ⑨ sources-block (Block) — 하단 출처 모음 (참고 자료 리스트)
═══════════════════════════════════════════════════════════════*/

/* dacalc 스타일: 박스(bg·border·radius·padding) 제거 → 깔끔한 리스트·공간 활용(모바일)·2026-06-29 사용자 */
.module-sources {
    margin: 32px 0;
}

.module-sources__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
}

/* (legacy .module-sources__list disc 중복 제거 — flex 배지 정의가 SSOT) */

.module-sources__item {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.module-sources__badge {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    flex-shrink: 0;
}

.module-sources__text { flex: 1; }

.module-sources__link {
    color: #1d4ed8;
    text-decoration: underline;
    flex-shrink: 0;
}


/*═══════════════════════════════════════════════════════════════
  ⑩ cta-button (Block) — CTA 버튼 + Modifier
  ───────────────────────────────────────────────────────────────
  사용 가이드:
    (default)        → 파란 강조 버튼 (행동 유도)
    --secondary      → 회색 배경 (back-to-X 등 부수 행동)
    --small          → 작은 크기 (인라인 링크, 태그)
    --green/red/teal → 색상 강조
═══════════════════════════════════════════════════════════════*/

/* .module-cta base/:hover → 이 파일 끝 cta SSOT 블록으로 통합 (2026-06-05, 그라데이션 버전).
   아래 --secondary/--outline/--small 등 고유 변형은 유지. */

/* Modifier — 변형 */
.module-cta--secondary {
    background: #f1f5f9;
    color: #1e293b;
    border: 1px solid #cbd5e1;
}
.module-cta--secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
}

.module-cta--outline {
    background: #ffffff;
    color: #3b82f6;
    border: 2px solid #3b82f6;
}
.module-cta--outline:hover {
    background: #eff6ff;
    color: #1d4ed8;
}

.module-cta--small {
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 4px;
}

/* .module-cta--large + 단색 색상 변형 → 파일 끝 cta SSOT(그라데이션 버전)로 통합 (2026-06-05).
   teal은 미사용(cta.php = blue·green·red·purple 4색 한정 mandate). */

/* CTA 그룹 */
.module-ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.module-ctas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

/* CTA 박스 (그라데이션 배경 + 내부 버튼) */
.module-cta__box {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #ffffff;
    border-radius: 12px;
    padding: 24px 28px;
    margin: 24px 0;
    text-align: center;
}

.module-cta__box__title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 12px 0;
    color: #ffffff;
}

.module-cta__box__text {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 16px 0;
    color: rgba(255, 255, 255, 0.9);
}

/* CTA 체크리스트 */
.module-cta__checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    text-align: left;
}

.module-cta__checklist--item {
    position: relative;
    padding-left: 28px;
    margin-bottom: 8px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.module-cta__checklist--item::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #22c55e;
    font-weight: 700;
}


/*═══════════════════════════════════════════════════════════════
  ⑪ step-card (Block) — 단계 카드 + Modifier
═══════════════════════════════════════════════════════════════*/

.module-steps__item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    padding: 20px 24px;
    margin-bottom: 16px;
    display: flex;
    gap: 20px;
    align-items: flex-start;
    transition: border-color .2s ease, box-shadow .2s ease;
}

/* ⑤ 호버 복원 (2026-06-05): 옅은 테두리 강조 + 그림자 (체크리스트 블록 제거 시 사라졌던 호버 복원) */
.module-steps__item:hover {
    border-color: var(--color-primary, #1a73e8);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.module-steps__num {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3b82f6;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.module-steps__content { flex: 1; }

.module-steps__title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.module-steps__desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* Modifier — 강조/완료 */
.module-steps__item--highlight { background: #fef3c7; border-left-color: #f59e0b; }
.module-steps__item--complete  { background: #d1fae5; border-left-color: #10b981; }
.module-steps__item--warning   { background: #fff7ed; border-left-color: #f97316; }
.module-steps__item--current   { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }

/* steps-container — 단계 wrapper */
.steps-container { margin: 24px 0; }


/*═══════════════════════════════════════════════════════════════
  ⑫ step-list (Block) — 단계 리스트 (번호 자동, 카드 부재 형태)
═══════════════════════════════════════════════════════════════*/

.step-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
    counter-reset: step-counter;
}

.step-list__item {
    position: relative;
    padding: 12px 16px 12px 48px;
    margin-bottom: 8px;
    background: #f8fafc;
    border-radius: 6px;
    counter-increment: step-counter;
    font-size: 16px;
    line-height: 1.6;
    color: #374151;
}

.step-list__item::before {
    content: counter(step-counter);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #3b82f6;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* step-checklist — 체크박스 단계 */
.step-checklist {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.step-checklist__item {
    position: relative;
    padding: 10px 16px 10px 40px;
    margin-bottom: 6px;
    background: #f8fafc;
    border-radius: 6px;
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
}

.step-checklist__item::before {
    content: "☐";
    position: absolute;
    left: 12px;
    top: 10px;
    color: #94a3b8;
    font-size: 18px;
}

.step-checklist__item--done::before { content: "☑"; color: #22c55e; }


/*═══════════════════════════════════════════════════════════════
  ⑬ info-card (Block) — 정보 카드 + 색상 Modifier
═══════════════════════════════════════════════════════════════*/

.info-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s ease;
}

.info-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }

.info-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.info-card__body {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* Modifier — 색상 */
.info-card--blue   { background: #eff6ff; border-color: #bfdbfe; }
.info-card--green  { background: #f0fdf4; border-color: #bbf7d0; }
.info-card--orange { background: #fff7ed; border-color: #fed7aa; }
.info-card--yellow { background: #fefce8; border-color: #fde68a; }
.info-card--purple { background: #faf5ff; border-color: #e9d5ff; }
.info-card--gray   { background: #f8fafc; border-color: #cbd5e1; }

/* info-grid — 카드 그리드 */
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin: 20px 0;
}


/*═══════════════════════════════════════════════════════════════
  ⑭ result-card (Block) — 결과 카드 (그라데이션 + 큰 숫자)
═══════════════════════════════════════════════════════════════*/

.module-result-card {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-radius: 12px;
    padding: 24px;  /* v14.50 (2026-05-09, 사용자 mandate "padding 통일"): 20px 24px → 24px (stat/result 일관) */
    margin: 0;      /* v14.50: grid container 영영구 외부 margin 영영구 (grid gap 영영구 영영구) */
    text-align: center;
    /* v14.47 (2026-05-09, 사용자 mandate "같은 행 카드 길이 맞춤"): grid stretch 영영구 */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.module-result-card__label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 8px 0;
}

.module-result-card__value {
    font-size: 2rem;
    font-weight: 700;
    color: #1d4ed8;
    margin: 0;
    line-height: 1.2;
}

.module-result-card__sub {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 8px;
}

/* Modifier */
.module-result-card--highlight { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); }
.module-result-card--highlight .module-result-card__value { color: #92400e; }
.module-result-card--green     { background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%); }
.module-result-card--green .module-result-card__value { color: #15803d; }
.module-result-card--red       { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); }
.module-result-card--red .module-result-card__value { color: #b91c1c; }

/* Element — answer paragraph (instant retirement pay narrative answer) */
.module-result-card__answer {
    text-align: left;
    font-size: 1rem;
    line-height: 1.6;
    color: #1e293b;
    margin: 0 0 16px 0;
}
.module-result-card__answer strong {
    color: #1d4ed8;
    font-weight: 700;
}

/* [v13.45] .module-result-card 안 calc-briefing / lt-note — text-align: center 상속 차단 */
.module-result-card .module-briefing,
.module-result-card .lt-note {
    text-align: left;
}

/* Element — basis paragraph (citation + cross-link CTA, "Based on ... Explore: ...") */
.module-result-card__basis {
    text-align: left;
    background: rgba(255, 255, 255, 0.6);
    border-left: 3px solid #3b82f6;
    border-radius: 6px;
    padding: 12px 16px;
    margin: 16px 0 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: #475569;
}
.module-result-card__basis a {
    color: #1d4ed8;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(29, 78, 216, 0.3);
}
.module-result-card__basis a:hover {
    text-decoration-color: #1d4ed8;
}


/*═══════════════════════════════════════════════════════════════
  ⑮ related-card (Block) — 관련 글 카드
═══════════════════════════════════════════════════════════════*/

.related-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.related-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: #3b82f6;
}

.related-card__title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.related-card__title a { color: #1d4ed8; text-decoration: none; }
.related-card__title a:hover { color: #1e40af; text-decoration: underline; }

.related-card__desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0;
}

.related-card__cta {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.85rem;
    color: #3b82f6;
    font-weight: 500;
}

/* related-grid */
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin: 24px 0;
}


/*═══════════════════════════════════════════════════════════════
  ⑯ combo-card (Block) — 조합 카드 (호버 효과 + CTA)
═══════════════════════════════════════════════════════════════*/

/* ⑯ 교체(2026-06-19): 죽은 combo-card(미사용 dacalc 잔재) 제거 → module-link-grid 로 통일.
   카드 그리드가 필요하면 card-grid 모듈(.module-card-grid + stat/result/method-card) 사용.
   .module-link-grid = dacalc hub-cell pill 디자인 값 그대로 이식(이름만 4세대 module-* 규칙).
   모듈 = link-grid.php(module_link_grid) · 용도 = 하단 explore 섹션·동네/유종 내부링크 나열. */
.module-link-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr));   /* min(100%) = 초협소 컨테이너 오버플로 차단 */
    gap: 8px;
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.module-link-grid--narrow {           /* 짧은 라벨(유종 등) */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 100px), 1fr));
}

.module-link-grid__item {
    display: flex;
}

.module-link-grid__pill {
    flex: 1;
    min-width: 0;          /* 🚨 긴 콘텐츠로 늘어나 열이 줄지 않게 — 열은 트랙 너비로만 */
    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;
    line-height: 1.3;          /* 박스 안(info-box line-height:1.8) 상속으로 셀이 길어지는 것 방지 — 안/밖 높이 통일 */
    text-align: center;
    transition: all 0.15s ease;
    min-height: 44px;
}

.module-link-grid__pill:hover {
    background: #eff6ff;
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
    text-decoration: none;
}

.module-link-grid__label {
    font-weight: 600;
    overflow-wrap: break-word;
    word-break: keep-all;   /* 한글=어절 단위 줄바꿈 / 긴 영문 단어만 강제 break(트랙 넘침 방지) */
}

.module-link-grid__meta {
    font-size: 0.85rem;
    color: #6b7280;
    margin-top: 2px;
}

@media (max-width: 640px) {
    .module-link-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 110px), 1fr));
    }
    .module-link-grid--narrow {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 84px), 1fr));
    }
}

/* link-grid 가 info-box 박스 안(explore 그룹)일 때: 맨 그리드와 100% 동일하게(info-box a color/hover/underline/좌패딩 상쇄) */
.module-info-box .module-link-grid { padding-left: 0; margin: 8px 0 0; }
/* 스택된 link-grid 그룹 제목 간격(2026-06-23): 앞 그리드 ↔ 다음 그룹 제목 사이 여백(휘발유/경유/LPG 그룹 분리) */
.module-link-grid + .module-info-box__title { margin-top: 1.75rem; }
.module-info-box .module-link-grid__pill,
.module-info-box a.module-link-grid__pill {
    color: #1e40af;
    text-decoration: none;
}
.module-info-box .module-link-grid__pill:hover,
.module-info-box a.module-link-grid__pill:hover {
    color: #1e40af;
    background: #eff6ff;
    border-color: #2563eb;
    text-decoration: none;
}
.module-info-box a.module-link-grid__card,
.module-info-box a.module-link-grid__card:hover {
    color: #1e293b;
    text-decoration: none;
}
.module-info-box .module-link-grid__card-cta { color: #2563eb; }

/* cards 변형 — 디폴트 __card(아이콘+제목+설명·흰 카드 = module-related 흡수) / __card--cta(제목+보조+CTA화살표·그라데이션 = dacalc combo). 2026-06-20 */
.module-link-grid--cards {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));   /* min(100%) = 초협소 컨테이너 오버플로 차단(gold-standard) */
    gap: 12px;
}
/* CTA 카드 = 콘텐츠 밀도 높음(제목+보조+CTA) → 디폴트는 본문 너비에 따라 동적 계산(auto-fill·min 230px → 넓은 본문 3열·좁으면 2/1열·stretch 최소화). 고정 열은 cols 옵션. */
.module-link-grid--cta {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
}
/* cols 옵션 = 동적 디폴트 대신 열 수(카드 너비) 명시 오버라이드. variant 디폴트보다 우선(뒤 선언). auto-fill 반응형 */
.module-link-grid--cols-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.module-link-grid--cols-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 185px), 1fr)); }
.module-link-grid--cols-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 145px), 1fr)); }
/* 디폴트 카드 = 아이콘 카드(중앙 정렬·흰 배경) */
.module-link-grid__card {
    flex: 1;
    min-width: 0;          /* 🚨 grid item이 긴 콘텐츠(영문 타이틀 등)로 늘어나 열이 줄지 않게 — 열은 트랙 너비로만 결정 */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    text-decoration: none;
    color: #1e293b;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.module-link-grid__card:hover {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59,130,246,0.1);
    transform: translateY(-2px);
    text-decoration: none;
}
.module-link-grid__card-icon { font-size: 34px; margin-bottom: 8px; line-height: 1; }
.module-link-grid__card-title { display: block; font-size: 1rem; font-weight: 700; color: #1e293b; line-height: 1.3; overflow-wrap: break-word; word-break: keep-all; }
.module-link-grid__card-desc { display: block; font-size: 0.9rem; color: #4b5563; margin-top: 6px; line-height: 1.5; overflow-wrap: break-word; word-break: keep-all; }
.module-info-box .module-link-grid__card,
.module-info-box .module-link-grid__card:hover { text-decoration: none; }
/* CTA 변형 = 좌측 정렬 그라데이션 카드(제목+보조+화살표) */
.module-link-grid__card--cta {
    align-items: stretch;
    text-align: left;
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
    padding: 16px;
}
.module-link-grid__card--cta:hover { border-color: #2563eb; box-shadow: 0 4px 8px rgba(37,99,235,0.15); }
.module-link-grid__card-sub { display: block; font-size: 0.85rem; color: #4b5563; margin-top: 4px; line-height: 1.4; }
.module-link-grid__card-cta { display: inline-block; margin-top: 8px; color: #2563eb; font-size: 0.85rem; font-weight: 600; }

/* 카드색 프리셋(card_color 옵션 → --cards-{color}) — 기본 파랑 외 소프트 톤. specificity 0,2,0 으로 기본 배경 확실히 override.
   색 값 = info-box 파스텔 팔레트와 일관. 더 필요하면 여기 한 줄씩만 추가(전 카드 재사용). */
.module-link-grid--cards-green  .module-link-grid__card { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-color: #86efac; }
.module-link-grid--cards-amber  .module-link-grid__card { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); border-color: #fcd34d; }
.module-link-grid--cards-rose   .module-link-grid__card { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-color: #fca5a5; }
.module-link-grid--cards-purple .module-link-grid__card { background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); border-color: #d8b4fe; }
.module-link-grid--cards-gray   .module-link-grid__card { background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%); border-color: #cbd5e1; }


/*═══════════════════════════════════════════════════════════════
  ⑰ hub-block (Block) — 허브 네비게이션
═══════════════════════════════════════════════════════════════*/

.module-hub-nav {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

/* BEM Block 자체 specificity 보강 (element selector 침범 방어) — h3.module-hub-nav__title compound 0,1,1.
   .lt-content / 기타 element-selector wrapper 영역에서도 동일 적용. (사용자 영구 명시 2026-05-04 — wrapper 폐기 + BEM Block 단독 정합) */
h3.module-hub-nav__title,
.module-hub-nav__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
}

p.module-hub-nav__desc,
.module-hub-nav__desc {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.5;
    margin: 0 0 12px 0;
}

p.module-hub-nav__intro,
.module-hub-nav__intro {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

/* hub-list — 허브 link list (사용자 영구 mandate 2026-05-27: 카드 양식 → 텍스트 list 양식 전환)
   직관적 BEM class 양식: .module-hub-nav__list / .module-hub-nav__item / .module-hub-nav__link / .module-hub-nav__label
   모바일 접속 영역 공간 큰 효율 + 카드 영역 영역 부담 차단 + 더 많은 link 한 화면 노출 */
.module-hub-nav__list {
    list-style: none;
    margin: 8px 0 0 0;
    padding: 0;
}

/* hub-block 내부 마지막 child = margin-bottom 0 (박스 padding-bottom 만 적용 = 상/하 일관성) */
.module-hub-nav > *:last-child {
    margin-bottom: 0;
}

/* hub-list__item — list 안 개별 item (= 텍스트 행 1개)
   모바일 영역 공간 효율 + 사용자 push 부합 본질 (= 카드 양식 폐기) */
.module-hub-nav__item {
    border-bottom: 1px solid #e2e8f0;
    transition: background 0.2s ease;
}

.module-hub-nav__item:last-child {
    border-bottom: 0;
}

.module-hub-nav__item:hover {
    background: #f1f5f9;
}

.module-hub-nav__link {
    display: block;
    /* 사용자 영구 mandate (2026-05-27): 불렛 양식 hanging indent
       → emoji 영역(= 좌측 1.8em) + 텍스트 줄바꿈 시점 사후 줄 emoji 사후 위치에서 시작
       → padding-left 1.8em + text-indent -1.8em = 첫 줄 emoji 좌측 영역 + 사후 줄 들여쓰기 */
    padding: 10px 4px 10px 1.8em;
    text-indent: -1.8em;
    color: #1e293b;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    /* 사용자 영구 mandate (2026-05-27): 줄바꿈 시점 줄 사이 여유 영역 강화 (1.4 → 1.65) */
    line-height: 1.65;
}

.module-hub-nav__link:hover {
    color: #1d4ed8;
    text-decoration: none;
}

.module-hub-nav__label {
    display: inline;
    color: inherit;
}

/* 모바일 768px 이하 = 사용자 push 부합 본질 (= 공간 큰 효율) */
@media (max-width: 768px) {
    .module-hub-nav__link {
        padding: 12px 4px 12px 1.8em;
        text-indent: -1.8em;
        font-size: 0.95rem;
    }
    .module-hub-nav {
        padding: 12px 14px;
    }
}

/* hub-matrix — 허브 매트릭스 (표 형태) */
.hub-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 16px 0;
}

.hub-matrix th,
.hub-matrix td {
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    text-align: center;
}

.hub-matrix thead {
    background: #f1f5f9;
    font-weight: 700;
}


/*═══════════════════════════════════════════════════════════════
  ⑱ tier-header (Block) — 티어 헤더 (그라데이션 + 텍스트)
═══════════════════════════════════════════════════════════════*/

.tier-header {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    color: #ffffff;
    border-radius: 8px;
    padding: 16px 24px;
    margin: 24px 0 16px 0;
    text-align: center;
}

.tier-header__title {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
    color: #ffffff;
}

.tier-header__subtitle {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 4px 0 0 0;
}

/* Modifier — 색상 */
.tier-header--blue   { background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); }
.tier-header--green  { background: linear-gradient(135deg, #22c55e 0%, #15803d 100%); }
.tier-header--purple { background: linear-gradient(135deg, #a855f7 0%, #6b21a8 100%); }
.tier-header--gold   { background: linear-gradient(135deg, #eab308 0%, #a16207 100%); }


/*═══════════════════════════════════════════════════════════════
  ⑲ badge (Block) — 배지 + 색상 Modifier
═══════════════════════════════════════════════════════════════*/

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    background: #e2e8f0;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Modifier — 색상 */
.badge--blue    { background: #dbeafe; color: #1e40af; }
.badge--green   { background: #d1fae5; color: #065f46; }
.badge--red     { background: #fee2e2; color: #991b1b; }
.badge--orange  { background: #fed7aa; color: #9a3412; }
.badge--yellow  { background: #fef9c3; color: #854d0e; }
.badge--purple  { background: #ede9fe; color: #5b21b6; }
.badge--silver  { background: #f1f5f9; color: #475569; }
.badge--bronze  { background: #fed7aa; color: #9a3412; }
.badge--gold    { background: #fef3c7; color: #92400e; }
.badge--mint    { background: #ccfbf1; color: #134e4a; }

/* Modifier — 의미 (alias) */
.badge--info     { background: #dbeafe; color: #1e40af; }
.badge--success  { background: #d1fae5; color: #065f46; }
.badge--warning  { background: #fed7aa; color: #9a3412; }
.badge--danger   { background: #fee2e2; color: #991b1b; }
.badge--fact     { background: #fef9c3; color: #854d0e; }
.badge--verified { background: #dcfce7; color: #14532d; }


/*═══════════════════════════════════════════════════════════════
  ⑳ tag (Block) — 작은 태그/링크 (인라인)
═══════════════════════════════════════════════════════════════*/

.tag {
    display: inline-block;
    padding: 4px 10px;
    background: #f1f5f9;
    color: #475569;
    border-radius: 999px;
    font-size: 0.85rem;
    text-decoration: none;
    transition: background 0.2s ease;
    margin: 2px 4px 2px 0;
}

.tag:hover {
    background: #e2e8f0;
    color: #1e293b;
    text-decoration: none;
}

/* tag-cloud — 태그 그룹 */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 16px 0;
}

/* Modifier — 색상 */
.tag--blue   { background: #dbeafe; color: #1e40af; }
.tag--blue:hover { background: #bfdbfe; color: #1e3a8a; }
.tag--green  { background: #d1fae5; color: #065f46; }
.tag--green:hover { background: #a7f3d0; color: #064e3b; }


/*═══════════════════════════════════════════════════════════════
  ㉑ link-list (Block) — 링크 리스트
═══════════════════════════════════════════════════════════════*/

.link-list {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.link-list__item {
    margin-bottom: 8px;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.link-list__item:hover { background: #f1f5f9; }

.link-list__link {
    color: #1d4ed8;
    text-decoration: none;
    font-size: 0.95rem;
}

.link-list__link:hover { color: #1e40af; text-decoration: underline; }


/*═══════════════════════════════════════════════════════════════
  ㉘ bullet-list (Block) — 불렛 리스트 (어디든 사용 단독 BEM, KISS-SSOT)
  ───────────────────────────────────────────────────────────────
  사용: info-box / calc-briefing / citation-passage / 본문 어디든.
  Modifier:
    (default) → 불렛 list (disc)
    --ol      → 번호 list (decimal)
    --none    → 불렛 부재 (padding 0)
═══════════════════════════════════════════════════════════════*/

.bullet-list {
    margin: 8px 0;
    padding-left: 20px;
    list-style: disc;
}

.bullet-list:last-child { margin-bottom: 0; }

.bullet-list__item {
    margin-bottom: 6px;
    line-height: 1.65;
}

.bullet-list__item:last-child { margin-bottom: 0; }

/* Modifier — list 타입 */
.bullet-list--ol { list-style: decimal; }
.bullet-list--none { list-style: none; padding-left: 0; }


/*═══════════════════════════════════════════════════════════════
  ㉙ 박스 내부 마지막 child 마진 정합 (KISS-SSOT, 모든 박스 일괄)
  ───────────────────────────────────────────────────────────────
  글로벌 p { margin-bottom: 1.5em; } 차단 — 박스 padding-bottom 이중 여백 방지.
  direct child > *:last-child = p / div / ul / ol 등 모든 타입 처리.
═══════════════════════════════════════════════════════════════*/

.module-briefing > *:last-child,
.module-briefing__body > *:last-child,
.module-info-box > *:last-child,
.module-faq__a > *:last-child,
.module-core-facts__text > *:last-child,
.module-quick-answer__content > *:last-child,
.module-answer-first > *:last-child,
.module-answer-first__answer > *:last-child,
.module-highlight > *:last-child,
.module-header > *:last-child {
    margin-bottom: 0;
}


/*═══════════════════════════════════════════════════════════════
  ㉒ answer-first (Block) — AI 인용용 Q&A 박스 (SEO 핵심)
  ───────────────────────────────────────────────────────────────
  사용: SEO 답변 우선 영역 (AI 스크래퍼/검색 인용 최적화)
═══════════════════════════════════════════════════════════════*/

.module-answer-first {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #7dd3fc;
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 24px;
}

.module-answer-first__question {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0c4a6e;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.module-answer-first__answer {
    font-size: 1.05rem;
    color: #1e293b;
    line-height: 1.7;
    margin: 0 0 8px 0;
}

.module-answer-first__answer p { margin: 0 0 8px 0; }
.module-answer-first__answer p:last-child { margin-bottom: 0; }

.module-answer-first__source {
    font-size: 0.85rem;
    color: #64748b;
    margin: 12px 0 0 0;
    font-style: italic;
}

.module-answer-first__table {
    margin-top: 16px;
    border-radius: 8px;
    overflow: hidden;
}


/*═══════════════════════════════════════════════════════════════
  ㉓ quick-answer-box (Block) — 빠른 답변 박스 (헤더 직후 SEO 핵심)
═══════════════════════════════════════════════════════════════*/

.module-quick-answer {
    background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
    border: 1px solid #bfdbfe;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    padding: 20px 24px;
    margin: 20px 0 24px;
}

.module-quick-answer__header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.module-quick-answer__icon {
    font-size: 22px;
    line-height: 1;
}

.module-quick-answer__title {
    font-size: 20px;
    font-weight: 700;
    color: #1e40af;
    margin: 0;          /* v14.16 — h2 default margin reset (사용자 mandate: Quick Summary h2 정정) */
    padding: 0;
    line-height: 1.3;
    border-left: none;  /* h2 기본 border-left 차단 (.module-section__body h3 등 영역 영역) */
}

.module-quick-answer__content {
    font-size: 16px;
    color: #374151;
    line-height: 1.75;
}

.module-quick-answer__content p { margin: 0 0 8px; }
.module-quick-answer__content p:last-child { margin-bottom: 0; }

.module-quick-answer__source {
    font-size: 0.85rem;
    color: #64748b;
    margin-top: 12px;
    font-style: italic;
}


/*═══════════════════════════════════════════════════════════════
  ㉔ affiliate-block (Block) — 제휴/스폰서 블록
═══════════════════════════════════════════════════════════════*/

.module-affiliate {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.module-affiliate__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 16px 0;
}

.module-affiliate__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.module-affiliate__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-decoration: none;
    color: #1e293b;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.module-affiliate__item:hover {
    border-color: #3b82f6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-decoration: none;
}

.module-affiliate__img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-bottom: 8px;
}

.module-affiliate__name {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 4px 0;
    color: #1e293b;
}

.module-affiliate__reason {
    font-size: 0.8rem;
    color: #64748b;
    margin: 0;
}

.module-affiliate__disclaimer {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 12px;
    font-style: italic;
    text-align: center;
}


/*═══════════════════════════════════════════════════════════════
  ㉕ core-facts (Block) — 핵심 사실 모음 (계산기/롱테일 SEO 핵심)
  ───────────────────────────────────────────────────────────────
  대체: calc-core-facts (us/ 사용 중) — 일반화 명명
═══════════════════════════════════════════════════════════════*/



/*═══════════════════════════════════════════════════════════════
  ㉖ briefing-box (Block) — 브리핑 박스 (요약/팁/설명)
  ───────────────────────────────────────────────────────────────
  대체: calc-briefing (us/ 사용 중) — 일반화 명명
═══════════════════════════════════════════════════════════════*/

.module-briefing,
.module-briefing {
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 0;
}

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

.module-briefing__body,
.module-briefing__body {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

/* Modifier — 색상 변형 */
.module-briefing--tip,
.module-briefing--tip {
    background: #f0fdf4;
    border-left-color: #22c55e;
}

.module-briefing--explain,
.module-briefing--explain {
    background: #faf5ff;
    border-left-color: #a855f7;
}


/*═══════════════════════════════════════════════════════════════
  ㉗ attr-card (Block) — 속성 카드 (큰 제목 + 본문 + 부수)
═══════════════════════════════════════════════════════════════*/

.attr-card,

.attr-card__title,

.attr-card__body,

.attr-card__brackets,

.attr-list,


/*═══════════════════════════════════════════════════════════════
  ㉘ example-block (Block) — 예시 박스 (계산 예시, 단계 설명)
  ───────────────────────────────────────────────────────────────
  대체: calc-example (us/ 사용 중) — 일반화 명명
═══════════════════════════════════════════════════════════════*/

.module-calc-example,
.module-calc-example {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 0;
}

.module-calc-example__title,
.module-calc-example__title,
.module-calc-example-title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 12px 0;
}

/* v13.86 (2026-05-07) — selector 분리 정정 (v13.85 부작용 정정)
   .module-calc-example-step (1세대 단순 schema) — number + 텍스트 한 줄 → display:flex 정합
   .module-calc-example__step (BEM 다단 schema) — header + body 위아래 column → modules.css line 1841 정의 (position:relative + absolute number) */
.module-calc-example-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 0.95rem;
    color: #374151;
}

.module-calc-example__step {
    /* BEM schema — flex 영역 (modules.css 영역 column flow + absolute number 정의) */
    padding: 8px 0;
    border-bottom: 1px dashed #e2e8f0;
    font-size: 0.95rem;
    color: #374151;
}

.module-calc-example__step:last-child,
.module-calc-example__step:last-child {
    border-bottom: none;
}

.module-calc-example__formula,
.module-calc-example__formula {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 0.9rem;
    color: #0f172a;
    background: #ffffff;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 8px 0;
}

.module-calc-example__formula--final,
.module-calc-example__formula--final {
    background: #fef3c7;
    border: 1px solid #fde68a;
    font-weight: 600;
}

.module-calc-example__step--result,
.module-calc-example__step--result {
    background: #f0fdf4;
    padding: 12px;
    border-radius: 4px;
    margin-top: 12px;
    font-weight: 600;
    color: #14532d;
}


/*═══════════════════════════════════════════════════════════════
  ㉙ method-card (Block) — 방법 카드 (계산 방법 설명)
  ───────────────────────────────────────────────────────────────
  대체: method-card (us/ 사용 중) — 일반화 명명
═══════════════════════════════════════════════════════════════*/

/* v15.80 (2026-05-24 사용자 영구 push) — .module-method-card 사실 = modules.css 정의 사실 사용 본문 사실 (icon layout 사실)
   content.css 안 `.module-method-card` 사실만 보존 사실 (number layout 사실). `.module-method-card` selector 사실 제거 사실 */
.module-method-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
    position: relative;
    /* v14.47 (2026-05-09, 사용자 mandate "같은 행 카드 길이 맞춤"): grid stretch 영영구 */
    height: 100%;
    /* v15.81 (2026-06-07): icon·title 같은 줄 — 세로 강제(flex-direction:column) 제거.
       카드 레이아웃은 새버전 SSOT(.module-method-card line ~5226, flex-wrap row)가 담당 */
}

.module-method-card__number {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #3b82f6;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.module-method-card__title {
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.module-method-card__body {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.7;
    margin: 0;
}

.module-method-card__example,
.module-method-card__example {
    margin-top: 12px;
    padding: 12px;
    background: #f8fafc;
    border-radius: 4px;
    font-size: 0.9rem;
}

.module-method-card__badge,
.module-method-card__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 8px;
}

.module-method-card__badge--recommended,
.module-method-card__badge--recommended {
    background: #d1fae5;
    color: #065f46;
}

.module-method-card__badge--caution,
.module-method-card__badge--caution {
    background: #fef3c7;
    color: #92400e;
}

.module-method-card__badge--warning,
.module-method-card__badge--warning {
    background: #fee2e2;
    color: #991b1b;
}

.module-method-card__icon--red,
.module-method-card__icon--red {
    color: #ef4444;
}

.module-method-card__tag--warning,
.module-method-card__tag--warning {
    color: #f97316;
    font-weight: 600;
}


/*═══════════════════════════════════════════════════════════════
  ㉚ stat-card (Block) — 통계 카드 + 색상 Modifier
═══════════════════════════════════════════════════════════════*/

/* stat-card SSOT는 이 파일 맨 끝으로 이동 (2026-06-05): components.css의 그라데이션·shine·떠오름 호버 버전을
   modules.css 단일 소스로 통합. (이 자리에 있던 단순 버전은 components가 덮어 죽어 있던 dead CSS였음.)
   맨 끝 배치 이유 = 로드 순서 최후 → 기존 components 위치를 재현해 현재 모습 그대로 유지. */


/*═══════════════════════════════════════════════════════════════
  ㉛ change-list (Block) — 변경 항목 리스트 (정책 변경/시점 비교)
═══════════════════════════════════════════════════════════════*/

.change-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.change-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.change-item__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-right: 8px;
    background: #d1fae5;
    color: #065f46;
}

.change-item__badge--down {
    background: #fee2e2;
    color: #991b1b;
}

.change-item--down {
    background: #fef2f2;
    border-color: #fecaca;
}

.change-item__impact {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #475569;
}

.change-item__impact-bar {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    margin: 8px 0;
    overflow: hidden;
}

.change-item__impact-fill {
    height: 100%;
    background: #3b82f6;
    transition: width 0.3s ease;
}

.change-item__impact-fill--good { background: #22c55e; }
.change-item__impact-fill--high { background: #ef4444; }
.change-item__impact-fill--mid  { background: #f97316; }
.change-item__impact-fill--low  { background: #94a3b8; }

.change-item__impact-label {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 4px;
    font-weight: 600;
}

.change-item__impact-text {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.5;
    margin-top: 4px;
}


/*═══════════════════════════════════════════════════════════════
  ㉜ reference-table (Block) — 참고 표 (큰 데이터 표)
  ───────────────────────────────────────────────────────────────
  대체: reference-table-block (us/ 사용 중) — 일반화 명명
═══════════════════════════════════════════════════════════════*/

.module-table--reference {
    margin: 24px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 8px;
}

.module-table--reference table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.reference-table-caption {
    caption-side: top;
    text-align: left;
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    padding: 10px 14px;
    background: #f8fafc;
    border-left: 4px solid #3b82f6;
    margin-bottom: 0;
}

.module-table--reference th {
    padding: 10px;
    background: #e2e8f0;
    color: #1e293b;
    font-weight: 700;
    text-align: center;
    border-bottom: 2px solid #94a3b8;
}

.module-table--reference td {
    padding: 8px 10px;
    text-align: right;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
}

.module-table--reference td:first-child {
    text-align: left;
}


/*═══════════════════════════════════════════════════════════════
  ㉝ spoke-hero (Block) — 롱테일 스포크 hero (header-block 변형)
  ───────────────────────────────────────────────────────────────
  대체: calc-spoke-hero (us/ 사용 중) — 일반화 명명
═══════════════════════════════════════════════════════════════*/

.spoke-hero,

.spoke-hero__title,

.spoke-hero__subtitle,


/*═══════════════════════════════════════════════════════════════
  ㉞ content-section (Block) — 본문 섹션 wrapper (큰 모듈)
  ───────────────────────────────────────────────────────────────
  대체: calc-content-section (us/ 사용 중) — 일반화 명명
  jiwon.css의 .content-section + Element 절차 정합
═══════════════════════════════════════════════════════════════*/

.content-section,

.content-section__title {
    font-size: 24px;
    color: #1a73e8;
    padding-bottom: 10px;
    border-bottom: 1px solid #e0e0e0;
    margin: 0 0 15px 0;
    line-height: 1.3;
    font-weight: 700;
}

.content-section__intro,
.content-section__text {
    font-size: 16px;
    color: #475569;
    line-height: 1.7;
    margin: 0 0 16px 0;
}

/* content-section Element (us/ 사용 중 — 호환 유지) */
.module-section__body {
    font-size: 16px;
    color: #374151;
    line-height: 1.7;
    margin: 0 0 16px 0;
}

.content-section-note {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    margin: 8px 0;
    padding: 8px 12px;
    background: #f8fafc;
    border-radius: 4px;
}

.content-section-fact {
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 4px;
    padding: 12px 16px;
    margin: 12px 0;
    font-size: 15px;
    color: #78350f;
    line-height: 1.6;
}


/*═══════════════════════════════════════════════════════════════
  ㉟+ 추가 Block — us/ 사용 중 잔존 (호환 정의)
═══════════════════════════════════════════════════════════════*/

/* faq-source — FAQ 출처 표기 */
.faq-source {
    display: block;
    font-size: 0.8rem;
    color: #64748b;
    margin-top: 8px;
    font-style: italic;
}

/* highlight — 인라인 하이라이트 (이미 ⑤ 섹션에 정의 — 잔존) */
.highlight-green {
    color: #065f46;
    font-weight: 600;
    background: linear-gradient(180deg, transparent 60%, #bbf7d0 60%);
    padding: 0 2px;
}

/* overview-banner — 개요 배너 (롱테일 hero 변형) */
.overview-banner {
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 0;
    font-size: 16px;
    color: #075985;
    line-height: 1.7;
}

.overview-banner__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0c4a6e;
    margin: 0 0 8px 0;
}

/* interaction-box — 상호작용 박스 (CTA 변형) */
.module-info-box--interactive {
    background: #f8fafc;
    border: 1px dashed #94a3b8;
    border-radius: 8px;
    padding: 16px 20px;
    margin: 16px 0;
    text-align: center;
}

/* hub-base-block — 허브 base 블록 (hub-block 변형) */
.module-hub-nav__base {
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

/* row-highlight / row-group-header — 표 행 변형 (table 안 직접 결합) */
.row-highlight td {
    background: #fef3c7;
    font-weight: 600;
}

.row-group-header td {
    background: #f1f5f9;
    font-weight: 700;
    color: #1e293b;
    border-top: 2px solid #94a3b8;
}

/* description — 일반 설명 (utility) */
.description {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 4px 0 12px 0;
}

/* muted — 부수 텍스트 */
.muted {
    color: #94a3b8;
}

/* positive / negative — 증감 표기 */
.positive { color: #15803d; font-weight: 600; }
.negative { color: #b91c1c; font-weight: 600; }


/*═══════════════════════════════════════════════════════════════
  ㉟ Utility — 색상/정렬/줄간격 (BEM 부재, 단일 클래스)
═══════════════════════════════════════════════════════════════*/

/* 텍스트 색상 */
.text-blue   { color: #1d4ed8; }
.text-green  { color: #065f46; }
.text-red    { color: #991b1b; }
.text-orange { color: #9a3412; }
.text-yellow { color: #92400e; }
.text-purple { color: #5b21b6; }
.text-gray   { color: #475569; }

/* 시세·가격 인라인 강조 (인라인 style 대체 — 시세 관례: 상승 빨강·하락 파랑 / 저렴·최저=빨강 절약 신호) */
.price-low  { color: #dc2626; font-weight: 700; }   /* 최저가·저렴(절약 신호) */
.price-high { color: #475569; }                       /* 비쌈·높음(중립 회색) */
.chg-up     { color: #dc2626; font-weight: 600; }    /* 시세 상승 */
.chg-down   { color: #2563eb; font-weight: 600; }    /* 시세 하락 */
.chg-flat   { color: #64748b; }                       /* 보합 */
/* 표 셀 안 좌우 분리 유틸 (범용·전 아이템 공용) — 명칭(왼쪽, 보통 링크) + 값(오른쪽). 한 셀에 명칭+값 동거 시 (2026-06-18) */
.cell-split { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.cell-split > :first-child { text-align: left; min-width: 0; overflow-wrap: anywhere; }
.cell-split .cell-val { white-space: nowrap; flex: 0 0 auto; }   /* 오른쪽 값(가격 등) — 줄바꿈 방지 */
/* 주유소 지도 height — 인라인에서 이관, 모바일 세로 축소(2026-06-18 사용자) */
.module-gst-locator__map { height: 460px; }
.module-naver-map__canvas { height: 340px; }
@media (max-width: 600px) {
  .module-gst-locator__map { height: 320px; }
  .module-naver-map__canvas { height: 260px; }
}
.module-table__row--here { background: #eff6ff; font-weight: 700; }   /* 표 안 '이 항목/이 주유소' 행 강조 */
.module-table__row--best td { font-weight: 700; }                    /* 랭킹/비교 표 최적(최저가·1위) 행 강조 — 전 아이템 공통 */
.text-amber  { color: #92400e; }
.text-mint   { color: #134e4a; }

/* 정렬 */
.align-left   { text-align: left; }
.align-right  { text-align: right; }
.align-center { text-align: center; }

/* 너비 */
.width-100 { width: 100%; }

/* 접근성 — 스크린 리더 전용 (시각 숨김) */
/* v14.59 (2026-05-09, 사용자 mandate "타이틀만 나옴"):
 *   결함: .module-chart-ai-table selector가 visually-hidden과 동일 그룹으로 묶여 항상 시각 차단
 *   원인: v14.57에서 .module-chart-ai-table을 visually-hidden 그룹에 추가 → visible:true schema 무력화
 *   정정: .module-chart-ai-table selector 제거 → class "visually-hidden" 영역만 시각 차단
 *         module markup에서 visible:false 시 "visually-hidden calc-chart-ai-table" 영역 → 차단 정합
 *         visible:true 시 "calc-chart-ai-table" 영역만 → 시각 노출 정합
 */
.visually-hidden,
.screen-reader-text,
table.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    /* 🚨 HSCROLL(2026-07-09): .module-section__body table{width:100%!important}(특이도 0,2,1)가 width 1px(0,1,1)를 이겨
       숨김 차트 데이터표가 646px로 부활 → 모바일 문서 가로 오버플로(주유소 계열 실증·CDP 실측). max-width는 width
       특이도 경쟁과 무관하게 항상 승리(used = min(width, max-width)) → 봉인. min-width 0 = 테이블 min-content 하한 해제. */
    max-width: 1px !important;
    min-width: 0 !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* 줄간격 */
.lineheight-30 { line-height: 30px; }
.lineheight-35 { line-height: 35px; }

/* sr-only — visually-hidden alias (접근성) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/*═══════════════════════════════════════════════════════════════
  ㊱ 호환 alias — 기존 us/ 사용 명명 호환 (cascade 정합)
  ───────────────────────────────────────────────────────────────
  본 영역 = us/ 사용 중 명명 ↔ content.css BEM 표준 명명 호환
  검증 후 사용자 승인 시점에 기존 명명 정리 → 단일 SSOT
═══════════════════════════════════════════════════════════════*/

/* 박스 호환 — tip-box / warning-box (info-box 색상 Modifier 정합) */
.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 {
    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;
}

/* (CTA 색상 alias 중복 제거 → 파일 끝 cta SSOT로 통합, 2026-06-05) */

/* steps 모듈 컨테이너 SSOT (2026-06-05: grid 오버라이드 정리 — 항목은 ⑪ step-card의 .module-steps__item).
   세로 스택 = 블록 컨테이너 + 항목 자체 margin-bottom. steps.php 출력(__num/__content/__title/__desc)과 1:1. */
.module-steps {
    margin: 24px 0;
}
.module-steps + .info-table {
    margin-top: 32px;
}

.step-num,
.step-number {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3b82f6;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 8px 0;
}

.step-desc {
    font-size: 0.95rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* 표 호환 — table-scroll-wrap / td-notes (table-block 정합) */
.table-scroll-wrap,
.module-table__scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 16px 0;
    border-radius: 8px;
}

.td-notes {
    text-align: left;
    font-size: 14px;
    color: #64748b;
}

/* 표 utility — striped / row-subtotal */
.striped tr:nth-child(odd) td {
    background: #f8fafc;
}

.row-subtotal td {
    background: #e2e8f0;
    font-weight: 600;
    border-top: 1px solid #94a3b8;
}

/* 레이블 utility */
.label-hint {
    font-size: 0.85rem;
    color: #64748b;
    margin-left: 8px;
    font-weight: 400;
}

.unit-label {
    font-size: 0.9rem;
    color: #475569;
    font-weight: 500;
}

/* state-hero — 미국 주(state) 페이지 hero (header-block 변형) */
.state-hero {
    padding: 30px 20px;
    margin: 20px 0;
    border-radius: 8px;
    text-align: center;
    color: #ffffff;
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}

.state-hero__title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #ffffff;
    line-height: 1.2;
}

.state-hero__subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
}

/* highlight (인라인 강조 — 이미 ⑤ 섹션에 정의됨, 본 alias 잔존 검증) */

/* 좌측 테두리 색상 (어떤 박스에든 결합) */
.border-left-blue   { border-left: 4px solid #3b82f6; }
.border-left-green  { border-left: 4px solid #22c55e; }
.border-left-red    { border-left: 4px solid #ef4444; }
.border-left-orange { border-left: 4px solid #f97316; }
.border-left-yellow { border-left: 4px solid #eab308; }
.border-left-purple { border-left: 4px solid #a855f7; }
.border-left-mint   { border-left: 4px solid #14b8a6; }
.border-left-gray   { border-left: 4px solid #64748b; }
.border-left-sky    { border-left: 4px solid #0284c7; }
.border-left-amber  { border-left: 4px solid #f59e0b; }


/* === END content.css === */

/* =============================================================
 * Step 6-C: calc.css → modules.css 이동 (2026-05-30)
 * 본질: 4세대 framework SSOT 통일 양식
 * 사전 calc.css 안 모든 양식 (= .module-* + 계산기 UI 양식)
 * 정정 본질: .calc-* → .module-calc-{ui}, .lt-* → 사전 4세대 모듈 양식 통합
 * ============================================================ */
/**
 * calc-modules.css v2.0 — Premium Calculator UI
 *
 * Design principles:
 *   - 8px modular spacing grid
 *   - WCAG AA contrast (body #374151 = 5.7:1, secondary #4b5563 = 4.6:1)
 *   - Flat single-card layout (no double boxing)
 *   - Unified input/select height (48px)
 *   - Mobile-first responsive
 *   - color-mix() focus rings for theme-aware styling
 *
 * Depends on: components.css (layout, header, FAQ, CTA, step-cards, stat-cards)
 */

/* ===== Design Tokens ===== */
:root {
  --color-primary: #1a73e8;
  --color-primary-dark: #1557b0;
  --color-primary-light: #e8f0fe;
  --color-radius-sm: 8px;
  --color-radius-md: 12px;
  --color-radius-lg: 16px;
  --color-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --color-shadow-md: 0 4px 16px rgba(0,0,0,.08);
  --color-shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
  --color-text-primary: #111827;
  --color-text-body: #374151;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;
  --color-border: #e5e7eb;
  --color-border-light: #f3f4f6;
  --color-bg-subtle: #f9fafb;
}

/* ===== Theme Color Variants — DEPRECATED 2026-04-16 =====
   모든 계산기 페이지는 :root 기본 블루(#1a73e8)로 통일.
   .theme-*  클래스 오버라이드 제거.
   사유:
     - 사용자는 단일 계산기만 접근 → 테마 구분 불필요
     - 일관성 우선 (thead/col-highlight/hover/스크롤바 모두 중립 통일)
     - Premium finance UX 표준 (Stripe/Apple/Morningstar 모두 단일 hue)
   HTML에서 .theme-green/red/purple/gold 클래스는 그대로 있어도 무해
   (오버라이드 없으므로 :root 블루 상속)
   ====================================================== */


/* ==========================================================
   CALC MODULE — Single flat card
   ========================================================== */
.module-calc-module {
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--color-primary) 35%, #e5e7eb);
  border-radius: var(--color-radius-lg);
  padding: 32px 24px;
  margin: 24px 0 32px;
  box-shadow: var(--color-shadow-sm);
}
.module-calc-module__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-primary-light);
}


/* ==========================================================
   FORM LAYOUT
   ========================================================== */
.module-calc-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.module-calc-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.module-calc-input-group label {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-body);
}
.module-calc-input-group label span.label-hint {
  font-weight: 400;
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-left: 4px;
}

/* ==========================================================
   INPUT ROW (가로 배치 — Month/Day/Year, ft+in, 영역 영역)
   v13.82 (2026-05-07) — modules.css SSOT 정합 (이전 영역 — 영역 — 영역 — calc 영역 inline <style> 영역 정의 — mandate 위반)
   ========================================================== */
.module-calc-input-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}
.module-calc-input-row > .module-calc-input-group {
  flex: 1;
  min-width: 0;
}
.module-calc-input-third {
  flex: 1;
  min-width: 0;
}
.module-calc-input-half {
  flex: 1;
  min-width: 0;
}
.module-calc-input-unit--half {
  flex: 1;
  min-width: 0;
}

/* v13.89 (2026-05-07) — Tier 1.M3 inline <style> 영역 — bmi/calc-ui.php + va-disability-rating/calc-ui.php SSOT */
.module-calc-input-row--compact {
  /* bmi ft+in / 영역 영역 영역 — 작은 gap (8px) */
  gap: 8px;
}
.module-calc-input-row--checkbox {
  /* va-disability-rating — checkbox row + margin-bottom */
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* v13.89 — calc-checkbox (va-disability-rating SSOT) */
.module-calc-checkbox {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #475569;
  white-space: nowrap;
  cursor: pointer;
}
.module-calc-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* v13.89 — calc-btn--secondary (va-disability-rating SSOT) */
.module-calc-btn--secondary {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #dbeafe;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.module-calc-btn--secondary:hover {
  background: #e2e8f0;
}

/* v13.89 — calc-chart-wrap--narrow (ss-fairness-act SSOT) */
.module-chart-wrap--narrow {
  max-width: 360px;
  margin: 16px auto;
}

/* v13.89 — action-plan-list (ss-fairness-act SSOT) */
.action-plan-list li {
  margin-bottom: 8px;
}
.action-plan-list a {
  color: #2563eb;
  text-decoration: underline;
}

/* v13.89 — unit-converter (unit-converter SSOT) */
.unit-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.unit-tab {
  padding: 8px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  color: #374151;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.unit-tab:hover {
  border-color: #6366f1;
  color: #4f46e5;
  background: #eef2ff;
}
.unit-tab.active {
  background: #4f46e5;
  color: #fff;
  border-color: #4f46e5;
}
.unit-converter-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.unit-converter-col {
  flex: 1;
  min-width: 0;
}
.unit-converter-col label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}
.unit-converter-swap {
  display: flex;
  align-items: center;
  padding-bottom: 2px;
}
.swap-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #d1d5db;
  border-radius: 50%;
  background: #f9fafb;
  color: #4f46e5;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s ease;
  flex-shrink: 0;
}
.swap-btn:hover {
  background: #4f46e5;
  color: #fff;
  border-color: #4f46e5;
}
@media (max-width: 480px) {
  .unit-converter-row { flex-direction: column; align-items: stretch; }
  .unit-converter-swap { justify-content: center; padding: 4px 0; }
  .swap-btn { transform: rotate(90deg); }
  .unit-tab { padding: 6px 10px; font-size: 12px; }
}


/* ==========================================================
   TOGGLE BUTTONS
   ========================================================== */
.module-calc-toggle {
  display: flex;
  border: 1.5px solid var(--color-border);
  border-radius: var(--color-radius-md);
  overflow: hidden;
}
.module-calc-toggle__btn {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s, color .2s;
  border: none;
  background: #fff;
  color: var(--color-text-muted);
}
.module-calc-toggle__btn.active {
  background: var(--color-primary);
  color: #fff;
}
.module-calc-toggle__btn:hover:not(.active) {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
/* Switch toggle — 예/아니오 양쪽 레이블 */
.module-calc-toggle-wrap {
  display: flex;
  justify-content: flex-start;
}
.module-calc-toggle[role="switch"] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 8px 0;
  font-size: 15px;
}
.module-calc-toggle__track {
  position: relative;
  width: 48px;
  height: 26px;
  background: #d1d5db;
  border-radius: 13px;
  transition: background .2s;
  flex-shrink: 0;
}
.module-calc-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.module-calc-toggle[role="switch"].active .module-calc-toggle__track {
  background: var(--color-primary);
}
.module-calc-toggle[role="switch"].active .module-calc-toggle__thumb {
  transform: translateX(22px);
}
.module-calc-toggle__status {
  min-width: 40px;
  font-weight: 600;
  color: var(--color-text-muted);
  transition: color .2s;
  user-select: none;
}
.module-calc-toggle[role="switch"].active .module-calc-toggle__status {
  color: var(--color-primary);
}

/* US toggle pattern (button IS the toggle, not __btn child) */
.module-calc-toggle-group {
  display: flex;
  border: 1.5px solid #d1d5db;
  border-radius: var(--color-radius-md);
  overflow: hidden;
}
.module-calc-toggle-group .module-calc-toggle {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  /* 2026-07-02 정렬 픽스(모두의카드 발 → 2026-07-11 union 역이식): 상위 .module-calc-toggle{display:flex}
     구식 컨테이너 규칙이 버튼을 플렉스 컨테이너로 만들어 글자가 좌측으로 붙던 결함 → 중앙 정렬 명시 */
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 600;
  border: none;
  background: #f9fafb;
  color: #374151;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.module-calc-toggle-group .module-calc-toggle--active {
  background: var(--color-primary);
  color: #fff;
}
.module-calc-toggle-group .module-calc-toggle:hover:not(.module-calc-toggle--active) {
  background: var(--color-primary-light);
  color: var(--color-primary);
}


/* ==========================================================
   INPUT — Unified 48px height
   ========================================================== */
.module-calc-input {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-primary);
  border: 1.5px solid #d1d5db;
  border-radius: var(--color-radius-sm);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
  background: #fff;
}
.module-calc-input:focus {
  border-color: var(--color-primary);
  box-shadow: var(--color-shadow-focus);
}
.module-calc-input::placeholder {
  color: #9ca3af;
  font-weight: 400;
}

/* ════════════════════════════════════════════════════════════════
 * [2026-04-14 인라인 JS 리팩토링] 컬럼 평준화 (Flexbox)
 * ────────────────────────────────────────────────────────────────
 * 대체 대상: generatepress-child/functions.php 라인 126-166의
 *           dacalcEqualizeColumns JS (제거됨)
 *
 * 원리:
 *   JS로 sidebar.offsetHeight 읽고 content.style.minHeight 강제 설정 대신
 *   Flexbox의 align-items: stretch로 레이아웃 엔진이 자연 처리.
 *   JS 실행 5회(DOMContentLoaded+load+resize+setTimeout×2) → CSS 규칙 1회.
 *
 * 범위 한정:
 *   body.dacalc-flex-layout 클래스가 있을 때만 적용 (main.php body_class 필터).
 *   modules.css는 $is_calc 조건부 로드이므로 이중 안전장치.
 *   계산기·롱테일 페이지에만 적용 → 홈·카테고리·블로그 영향 없음.
 *
 * 글로벌 규격화:
 *   US 완성 후 dacalc 테마 전체 레이아웃 정규화 시 이 블록 재평가 예정.
 * ════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  .dacalc-flex-layout .site-content {
    display: flex;
    align-items: stretch;
  }
  .dacalc-flex-layout .site-content > .content-area {
    float: none;
    min-width: 0; /* flex 자식 overflow 방지 */
  }
  .dacalc-flex-layout .site-content > .widget-area {
    float: none;
  }
}
/* Elementor 전체 폭 템플릿은 Flexbox 예외 */
.dacalc-flex-layout.elementor-template-full-width .site-content {
  display: block;
}
/* ════ [2026-04-14 컬럼 평준화] 끝 ════ */

/* Input with unit label
 * ═══════════════════════════════════════════════════════════════
 * [2026-04-14] 고정 padding으로 변경 (JS adjustUnitPadding 대체)
 * 이전: calculator.php 라인 290-306의 adjustUnitPadding JS가
 *       label.offsetWidth + 20px를 동적 설정 → 리플로우 유발
 * 현재: 64px 고정 (가장 긴 라벨 "USD/oz", "km/kWh" 등 6자 영문 수용)
 *       Phase 0.3 전수 조사: 한글 최대 2자(만원), 영문 최대 6자
 * 변경 시: 긴 라벨이 추가되면 이 값 조정 또는 .module-calc-input-unit--wide 클래스 신설
 * ═══════════════════════════════════════════════════════════════
 */
.module-calc-input-unit {
  position: relative;
}
.module-calc-input-unit .unit-label {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-muted);
  pointer-events: none;
}
.module-calc-input-unit .module-calc-input {
  padding-right: 64px;
  text-align: right;
}
/* Unit label on the LEFT side (e.g., $ prefix for USD) */
.module-calc-input-unit .unit-label--left {
  left: 16px;
  right: auto;
}
.module-calc-input-unit .unit-label--left + .module-calc-input {
  padding-left: 32px;
  padding-right: 16px;
  text-align: left;
}


/* ==========================================================
   SELECT — Unified 48px height, custom arrow
   ========================================================== */
.module-calc-select {
  width: 100%;
  height: 48px;
  padding: 0 40px 0 16px;
  font-size: 16px;
  color: var(--color-text-primary);
  border: 1.5px solid #d1d5db;
  border-radius: var(--color-radius-sm);
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E") no-repeat right 14px center;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.module-calc-select:focus {
  border-color: var(--color-primary);
  box-shadow: var(--color-shadow-focus);
}


/* ==========================================================
   CTA BUTTON (Calculate)
   ========================================================== */
.module-calc-btn {
  width: 100%;
  padding: 16px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border: none;
  border-radius: var(--color-radius-md);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  margin-top: 8px;
}
.module-calc-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--color-primary) 35%, transparent);
}
.module-calc-btn:active {
  transform: translateY(0);
}


/* ==========================================================
   RESULT AREA
   ========================================================== */
.module-calc-result {
  margin-top: 16px;
  display: none;
}
.module-calc-result.active {
  display: block;
  animation: fadeInUp .35s ease-out;
}
.module-calc-result__box {
  background: #fff;
  border: 2px solid #c7d2fe; /* fallback for browsers without color-mix */
  border: 2px solid color-mix(in srgb, var(--color-primary) 25%, #e5e7eb);
  border-radius: var(--color-radius-lg);
  padding: 28px 24px;
  margin-bottom: 24px;
  box-shadow: var(--color-shadow-sm);
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Main result hero card */
.module-calc-result__main {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  border-radius: var(--color-radius-md);
  padding: 28px 24px;
  color: #fff;
  text-align: center;
  margin-bottom: 20px;
}
.module-calc-result__label {
  font-size: 15px;
  opacity: .9;
  margin-bottom: 4px;
}
.module-calc-result__value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 6px;
  line-height: 1.2;
  color: #fff !important;
}
.module-calc-result__sub {
  font-size: 15px;
  opacity: .85;
}

/* Calculator result box: 4 cards → 2-col grid */
.module-calc-result__box .module-calc-result__cards {
  grid-template-columns: repeat(2, 1fr);
}


/* ==========================================================
   SALARY SUMMARY — 3-col grid (used by salary, acquisition-tax, etc.)
   ========================================================== */
.salary-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}
.salary-summary__item {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-sm);
  padding: 16px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.salary-summary__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}
.salary-summary__value {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  word-break: break-all;
}
.salary-summary__value--deduct {
  color: #dc2626;
}


/* ==========================================================
   DETAIL TABLE — Breakdown list
   ========================================================== */
.module-calc-detail__title {
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  margin: 16px 0 8px;
}
.module-calc-detail {
  margin-bottom: 16px;
  border: none !important;
  border-radius: 0 !important;
  overflow: visible;
  box-shadow: none !important;
}
.module-calc-detail table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  border: none !important;
}
.module-calc-detail thead {
  background: #e2e8f0 !important;  /* slate-200 — 전역 중립 통일 */
  color: #1e293b !important;
}
.module-calc-detail th {
  padding: 10px 14px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-body);
  border: none !important;
  border-bottom: 2px solid var(--color-border) !important;
  background: transparent !important;
}
.module-calc-detail th:not(:first-child),
.module-calc-detail td:not(:first-child) {
  text-align: right;
}
.module-calc-detail td {
  padding: 12px 14px;
  border: none !important;
  border-bottom: 1px solid var(--color-border-light) !important;
  color: var(--color-text-body) !important;
  background: #fff !important;
}
.module-calc-detail tr.subtotal td {
  padding-top: 14px;
  font-weight: 600;
  color: var(--color-text-primary) !important;
  border-bottom: 1px solid var(--color-border) !important;
  background: #fff !important;
}
.module-calc-detail tr.total td {
  font-weight: 700;
  color: var(--color-primary-dark) !important;
  border-bottom: none !important;
  border-top: 2px solid var(--color-primary) !important;
  background: #fff !important;
}
.module-calc-detail tr.row-highlight td {
  background: #f9fafb !important;
  font-weight: 600;
}
.module-calc-detail tbody tr:last-child td {
  border-bottom: 2px solid var(--color-border) !important;
}


/* ==========================================================
   SALARY TABLE — Comparison/reference table (standalone)
   Reused by: salary, acquisition-tax, etc.
   ========================================================== */
.module-table--salary {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  margin: 16px 0 8px;
}
.module-table--salary thead {
  background: #e2e8f0;  /* slate-200 — 테마 무관 중립, 약간 진하게 */
  color: #1e293b;        /* slate-800 */
  border-bottom: 2px solid #94a3b8;  /* slate-400 */
}
.module-table--salary th {
  padding: 12px 10px;
  font-weight: 700;
  text-align: center;
  color: #1e293b;
}
.module-table--salary td {
  padding: 11px 10px;
  text-align: right;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-body);
}
.module-table--salary td:first-child:has(a) {
  text-align: center;
}
.module-table--salary tbody tr:nth-child(even) {
  background: var(--color-bg-subtle);
}
.module-table--salary tbody tr:hover {
  background: #f1f5f9;  /* slate-100 — 테마 무관 중립 */
}
.module-table--salary .col-highlight {
  font-weight: 700;
  color: #0f172a;  /* slate-900 — 최고 대비, hue 제거 */
}
.module-table--salary thead .col-highlight {
  color: #92400e;
  background: #fef3c7 !important;
}

/* 기준 금액 행 강조 — 본 포스트 & 롱테일 공통 (zebra보다 한 톤 진한 회색) */
.module-table--salary tr.row-highlight,
.module-table tr.row-highlight {
  background: #f3f4f6;
}
.module-table--salary tr.row-highlight td,
.module-table tr.row-highlight td {
  font-weight: 600;
  background: #f3f4f6 !important;
}
/* v14.90 — 표 행 강조 modifier (PHP inline style 차단 mandate)
   tr.row-highlight--current = blue-50 (현재 페이지/시나리오), 사용자 매칭 row 시각 표시
   tr.row-highlight--green   = lime-100 (Tier A — 가장 유리)
   tr.row-highlight--yellow  = amber-100 (Tier C — 중립/주의)
   tr.row-highlight--red     = red-100  (Tier D — 불리/경고) */
.module-table--salary tr.row-highlight--current,
.module-table tr.row-highlight--current {
  background: #eff6ff !important;
}
.module-table--salary tr.row-highlight--current td,
.module-table tr.row-highlight--current td {
  font-weight: 600;
  background: #eff6ff !important;
}
.module-table tr.row-highlight--green,
.module-table tr.row-highlight--green td {
  background: #ecfccb !important;
  font-weight: 600;
}
.module-table tr.row-highlight--yellow,
.module-table tr.row-highlight--yellow td {
  background: #fef3c7 !important;
  font-weight: 600;
}
.module-table tr.row-highlight--red,
.module-table tr.row-highlight--red td {
  background: #fee2e2 !important;
  font-weight: 600;
}
/* v14.96 — soft 영역 modifier (eitc deep-dive 안 phase highlight)
   .row-highlight--green-soft = green-50 배경 (Phase In 영역 영역 영역)
   .row-highlight--red-soft   = red-50 배경 (Phase Out 영역 영역 영역) */
.module-table tr.row-highlight--green-soft,
.module-table tr.row-highlight--green-soft td {
  background: #f0fdf4 !important;
}
.module-table tr.row-highlight--red-soft,
.module-table tr.row-highlight--red-soft td {
  background: #fef2f2 !important;
}
/* v15.160 — row inactive modifier (tax-bracket JS inline style="opacity:0.4" 차단)
   .row-inactive = 현재 적용 부재 row 시각 약화 (opacity 0.4) */
.module-table tr.row-inactive,
.module-table tr.row-inactive td {
  opacity: 0.4;
}
/* v14.96 — 표 cell 정렬 modifier (PHP inline style="text-align:right|left" 차단)
   balance-transfer / anticipatory 표 영역 우측/좌측 정렬 의무 */
.module-table th.th-right,
.module-table td.td-right {
  text-align: right;
}
.module-table th.th-left,
.module-table td.td-left {
  text-align: left;
}
/* v15.85 — table 모듈 column 'align' => 'center' 정합 (PHP table.php td-center class 매핑)
   default .module-table td (text-align: right) override 강제 — hub-matrix 5건 cell 가운데 정렬 영역 */
/* v15.86 — specificity 강화 (body wrapper + tbody) — 다른 강력 rule 영역 우선 차단 */
/* v15.88 — :has() selector 강화 (hub-matrix__link 영역 자동 가운데 정렬) — paycheck `.module-table__link` 정합
            specificity 0,3,1 — default `.module-table td` (0,1,1) + `.td-center` (0,2,1) 보다 강력 */
body .module-table th.td-center,
body .module-table td.td-center,
.module-table tbody td.td-center,
.module-table thead th.td-center,
.module-table th.td-center,
.module-table td.td-center,
.module-table td:has(a.hub-matrix__link),
.module-table th:has(a.hub-matrix__link) {
  text-align: center !important;
}
/* v14.90 — nearby cell center alignment (lt-nearby-link 영역 PHP inline style="text-align:center" 차단) */
.module-table td.td-nearby,
.longtail-page table td.td-nearby,
.module-section__body table td.td-nearby {
  text-align: center;
}
/* v14.90 — meta-small text (small element grey muted, PHP inline style="color:#6b7280" 차단)
   .module-calc-meta-text — 본문 안 보조 메타 텍스트 (base context, formerly, this page note 등) */
.module-calc-meta-text {
  color: #6b7280;
  font-size: 0.85em;
}
.module-table--salary tr.subtotal td {
  background: var(--color-bg-subtle);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}
.module-table--salary tr.total td {
  background: var(--color-primary-light);
  font-weight: 700;
  color: var(--color-primary-dark);
}
.module-table--salary tbody tr:last-child td {
  border-bottom: 2px solid var(--color-border) !important;
}


/* ==========================================================
   UNIVERSAL CALC-TABLE — Shared table styles
   For any calc that needs a standalone table without salary prefix
   ========================================================== */
.module-table,
.longtail-page table,
.module-section__body table {
  width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: auto;
  font-size: 16px;
  margin: 16px 0 8px;
  /* v14.77 (사용자 mandate "좌우 테두리 영영구 — 답답해 보임"):
     - 외곽 border 영영구 → 상하 (top + bottom)만 영영구
     - 좌우 (left + right) 영영구 → 시각 답답 영영구 영영구 */
  border-top: 1px solid #dbeafe !important;
  border-bottom: 1px solid #dbeafe !important;
  border-left: none !important;
  border-right: none !important;
}
.longtail-page table thead,
.longtail-page table tbody,
.longtail-page table tr {
  width: 100%;
}
.module-table thead {
  background: #e2e8f0;  /* slate-200 — 테마 무관 중립, CTA와 시각 계층 분리 */
  color: #1e293b;        /* slate-800 */
  border-bottom: 2px solid #94a3b8;  /* slate-400 */
}
/* Table caption — 테이블 위에 표시되는 제목 (Single / MFJ 등 구분용) */
.module-table-caption,
.module-table caption {
  caption-side: top;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  background: #f8fafc;
  padding: 10px 14px;
  border-left: 4px solid var(--color-primary, #3b82f6);
  margin-bottom: 0;
  border-radius: 4px 4px 0 0;
}
.module-table:has(caption) {
  margin-top: 24px;
}
/* v14.75 (사용자 mandate "표준 모듈 SSOT 원천 일괄 반영"): th/td !important 강제
   - WordPress / GeneratePress theme override 차단
   - longtail-page table + content-section-body table 동일 selector 영영구 (SSOT 일관성) */
.module-table th,
.longtail-page table th,
.module-section__body table th {
  padding: 12px 10px;
  font-weight: 700;
  text-align: center;
  color: #1e293b;
  border-right: 1px solid #cbd5e1 !important;
}
.module-table th:last-child,
.longtail-page table th:last-child,
.module-section__body table th:last-child {
  border-right: none !important;
}
.module-table td,
.longtail-page table td,
.module-section__body table td {
  padding: 11px 10px;
  text-align: right;
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-body);
  border-right: 1px solid #dbeafe !important;
}
.module-table td:last-child,
.longtail-page table td:last-child,
.module-section__body table td:last-child {
  border-right: none !important;
}
.module-table td:first-child {
  text-align: left;
}
.module-table td:first-child:has(a:not(.module-table__link)) {
  text-align: left;
}
/* Notes/descriptive column — 왼쪽 정렬 명시 */
/* [v13.63] .td-notes element class (content.css line 2491-2495) font-size: 14px + color: #64748b cascade override */
/*          .module-table td.td-notes (0,2,1) > .td-notes (0,1,0) — !important 영역 영역 (specificity 영역 충분) */
/*          → data-*.php 영역 font-size class (font-size-sm / font-size-lg 등) override 영역 정합 */
/* [v14.66] (2026-05-09, 사용자 mandate "별도 지시 없으면 표 컬럼 글자 크기 = 기본 사이즈"):
            !important 강제 — .td-notes element class cascade 차단 + 본문 일반 크기 정합 */
.module-table td.td-notes,
.module-table th.td-notes {
  text-align: left;
  font-size: inherit !important;
  color: inherit !important;
}

/* v14.66 — .module-table 모든 td 본문 사이즈 default 정합 (사용자 mandate)
   text-align은 column type별 default (right/left/center)에 위임 */
.module-table td,
.module-table th {
  font-size: inherit;
  color: inherit;
}

/* [v13.65] font-size utility class — data-*.php 영역 'font_size' 옵션 영역 영역 적용 (직관 px 영역) */
.font-size-12px { font-size: 12px; }
.font-size-13px { font-size: 13px; }
.font-size-14px { font-size: 14px; }
.font-size-15px { font-size: 15px; }
.font-size-16px { font-size: 16px; }   /* default (root inherit과 동일) */
.font-size-17px { font-size: 17px; }
.font-size-18px { font-size: 18px; }
.font-size-20px { font-size: 20px; }
.font-size-24px { font-size: 24px; }
.module-table a:not(.module-table__link) {
  text-decoration: none;
  color: var(--color-primary);
}
.module-table a:not(.module-table__link):hover {
  text-decoration: underline;
  color: var(--color-primary-dark);
}
/* 2026-05-17 Phase 4-Pilot — 표 안 텍스트 버튼 (touch target 본질 + 사용자 클릭 본질) */
.module-table a.module-table__btn {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid var(--color-border, #cbd5e1);
  border-radius: 6px;
  background: var(--color-bg-subtle, #f8fafc);
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, border-color 0.15s ease;
  min-height: 36px;
  line-height: 1.4;
}
.module-table a.module-table__btn:hover,
.module-table a.module-table__btn:focus-visible {
  background: var(--color-primary-bg, #eff6ff);
  border-color: var(--color-primary);
  text-decoration: none;
  outline: none;
}
.module-table a.module-table__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* 2026-05-17 Phase 4-Pilot — 텍스트 버튼 디폴트 = 셀 내 가운데 정렬 (사용자 mandate) */
/* specificity = .module-table td:first-child (0,2,1) → :has() 본질 = 동일 → 후행 우선 정합 */
.module-table td:has(> a.module-table__btn),
.module-table td:has(> strong > a.module-table__btn),
.module-table td:first-child:has(a.module-table__btn) {
  text-align: center;
}
.module-table tbody tr:nth-child(even) {
  background: var(--color-bg-subtle);
}
.module-table tbody tr:hover {
  background: #f1f5f9;  /* slate-100 — 테마 무관 중립 */
}
.module-table .col-highlight {
  font-weight: 700;
  color: #0f172a;  /* slate-900 — 최고 대비, hue 제거 */
}
.module-table thead .col-highlight {
  color: #92400e;
  background: #fef3c7 !important;
}
.module-table tr.row-highlight td {
  background: #f9fafb;
  font-weight: 600;
}
.module-table tr.subtotal td,
.module-table tr.row-subtotal td {
  background: var(--color-bg-subtle);
  font-weight: 600;
  border-bottom: 1px solid var(--color-border);
}
.module-table tr.total td {
  background: var(--color-primary-light);
  font-weight: 700;
  color: var(--color-primary-dark);
}
.module-table tbody tr:last-child td {
  border-bottom: 2px solid var(--color-border) !important;
}

/* 첫 컬럼 중앙 정렬이 필요한 테이블용 (예: 비교표) */
.module-table--salary.center-first td:first-child,
.module-table.center-first td:first-child {
  text-align: center;
}


/* ==========================================================
   PYUNG TABLE — Area comparison (backward compat)
   ========================================================== */


/* ==========================================================
   AREA TYPE TABLE (backward compat)
   ========================================================== */


/* ==========================================================
   UNIVERSAL ROW VARIANTS
   Apply to any table via class on <tr>
   ========================================================== */
tr.row-highlight td {
  background: #f9fafb;
  font-weight: 600;
}
tr.row-subtotal td {
  background: var(--color-bg-subtle);
  font-weight: 600;
  border-bottom-color: var(--color-border);
}
tr.subtotal td {
  background: var(--color-bg-subtle);
  font-weight: 600;
  border-bottom-color: var(--color-border);
}
tr.total td {
  background: var(--color-primary-light);
  font-weight: 700;
  color: var(--color-primary-dark);
}


/* ==========================================================
   QUICK ANSWER BOX (핵심 요약)
   ========================================================== */
.module-quick-answer {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%);
  border: 1px solid #bfdbfe;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--color-radius-md);
  padding: 20px 24px;
  margin: 20px 0 24px;
}
.module-quick-answer__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.module-quick-answer__icon {
  font-size: 22px;
  line-height: 1;
}
.module-quick-answer__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary-dark);
}
.module-quick-answer__content {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.75;
}
.module-quick-answer__content p {
  margin: 0 0 8px;
}
.module-quick-answer__content p:last-child {
  margin-bottom: 0;
}
.module-quick-answer__content ul {
  margin: 8px 0 0;
  padding-left: 20px;
}
.module-quick-answer__content li {
  margin-bottom: 6px;
  line-height: 1.65;
}
.module-quick-answer__content li:last-child {
  margin-bottom: 0;
}
.module-quick-answer__content strong {
  color: var(--color-text-primary);
  font-weight: 600;
}
.module-quick-answer__source {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #dbeafe;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* ==========================================================
   CITATION PASSAGES — AI 인용 최적화 블록
   ========================================================== */
.module-core-facts__list {
  margin: 28px 0;
}
.module-core-facts__item {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--color-primary);
  border-radius: var(--color-radius-md);
  padding: 20px 24px;
  margin: 16px 0;
}
.module-core-facts__topic {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 12px;
}
.module-core-facts__text {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.75;
}
.module-core-facts__text p {
  margin: 0 0 8px;
}
.module-core-facts__text p:last-child {
  margin-bottom: 0;
}
.module-core-facts__text ul {
  margin: 8px 0 0;
  padding-left: 20px;
  list-style: disc;
}
.module-core-facts__text li {
  margin-bottom: 6px;
  line-height: 1.65;
}
.module-core-facts__text li:last-child {
  margin-bottom: 0;
}
.module-core-facts__text strong {
  color: var(--color-text-primary);
  font-weight: 600;
}
.module-core-facts__source {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e2e8f0;
  font-size: 13px;
  color: var(--color-text-muted);
  font-style: normal;
}
@media (max-width: 600px) {
  .module-core-facts__item {
    padding: 16px 18px;
  }
}

/* E36 (2026-04-30): .module-core-facts CSS 폐지 — citation_passages 영역의 alias 자가 위반
   Core Facts H2 = .module-core-facts__item (line 872 above) 영역 그대로 활용 */

/* ==========================================================
   BRIEFING INFO BOX
   ========================================================== */
/* Hide briefing when body is empty (before calculate) */
.module-briefing:has(.module-briefing__body:empty) {
  display: none;
}
.module-briefing {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-md);
  padding: 20px 22px;
  margin-bottom: 16px;
  line-height: 1.75;
  font-size: 16px;
  color: var(--color-text-body);
  position: relative;
  overflow: hidden;
}
.module-briefing::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}
.module-briefing__title {
  font-weight: 700;
  font-size: 17px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.module-briefing__body {
  font-size: 16px;
  color: var(--color-text-body);
  line-height: 1.75;
}
.module-briefing__body strong {
  color: var(--color-text-primary);
  font-weight: 600;
}
/* v14.90 — calc-briefing 부속 클래스 (PHP inline style 차단 mandate)
   __list — briefing 안 ul 마지막 마진 영영구 (style="margin-bottom:0" 대체)
   __recommend — 강조 권장 메시지 p (style="font-weight:600;margin-top:12px" 대체) */
.module-briefing__list {
  margin-bottom: 0;
}
.module-briefing__recommend {
  font-weight: 600;
  margin-top: 12px;
}
/* v14.90 — calc-result 안 보조 h3 (Calculation Breakdown 등) — style="margin:16px 0 8px 0;font-size:16px" 대체 */
.module-calc-result__sub-h {
  margin: 16px 0 8px 0;
  font-size: 16px;
}

/* Briefing type variants */
.module-briefing--explain::before { background: #3b82f6; }
.module-briefing--explain .module-briefing__title { color: #1d4ed8; }

.module-briefing--tip::before { background: #10b981; }
.module-briefing--tip .module-briefing__title { color: #047857; }
.module-briefing--tip .module-briefing__cta {
  display: inline-block;
  margin-top: 10px;
  padding: 12px 18px;
  min-height: 44px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--color-radius-sm);
  text-decoration: none;
  color: #047857;
  border: 1.5px solid #10b981;
  background: #ecfdf5;
  transition: background .2s, color .2s;
}
.module-briefing--tip .module-briefing__cta:hover {
  background: #047857;
  color: #fff;
}

/* Briefing links */
.module-briefing__links {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.module-briefing__links li {
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: 6px;
  transition: border-color .2s, box-shadow .2s;
}
.module-briefing__links li:hover {
  border-left-color: var(--color-primary-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.module-briefing__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}
.module-briefing__links a:hover .link-arrow {
  background: var(--color-primary);
  color: #fff;
}
.module-briefing__links .link-text {
  flex: 1;
}
.module-briefing__links .link-desc {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 400;
  display: block;
  margin-top: 2px;
}
.module-briefing__links .link-arrow {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  margin-left: 12px;
  transition: background .2s, color .2s;
}


/* ==========================================================
   SHARE BUTTONS
   ========================================================== */
.module-share-buttons {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
/* hidden 속성 존중 — 계산 전/계산기 없는 페이지에서 숨김 (display:flex 가 [hidden] 덮어쓰던 버그 차단) */
.module-share-buttons[hidden] { display: none !important; }
.module-share-buttons button {
  flex: 1;
  padding: 10px 18px;
  min-height: 44px;
  border-radius: var(--color-radius-sm);
  border: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .2s, box-shadow .2s;
}
.module-share-buttons button {
  background: var(--color-primary);
  color: #fff;
}
/* v14.86 (사용자 mandate "Copy / Recalculate hover 짙은 회색 → 분홍/빨강"):
   opacity: 0.85 영영구 → background rose-500 (#f43f5e) 명시 변경
   분홍-빨강 중간 → 액션 버튼 강조 + UI 정합 */
.module-share-buttons button:hover {
  background: #f43f5e;
  color: #fff;
  box-shadow: 0 2px 8px rgba(244, 63, 94, 0.35);
}


/* ==========================================================
   AD SLOT
   ========================================================== */
.module-calc-ad {
  margin: 24px 0;
  text-align: center;
}


/* ==========================================================
   STEP CARDS (calc-modules version — overridden by components.css)
   ========================================================== */
.module-calc-module .step-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 20px 0 28px;
}
.module-calc-module .step-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-md);
  padding: 20px 18px;
  text-align: center;
  transition: box-shadow .2s;
}
.module-calc-module .step-card:hover {
  box-shadow: var(--color-shadow-md);
}
.module-calc-module .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 10px;
}
.module-calc-module .step-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}
.module-calc-module .step-desc {
  font-size: 16px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}


/* ==========================================================
   ERROR MESSAGE
   ========================================================== */
.module-calc-error {
  color: #dc2626;
  font-size: 14px;
  font-weight: 500;
  margin-top: 6px;
}
/* v14.96 — calc-error hidden 속성 활용 (inline style="display:none" 차단 mandate)
   초기 상태 hidden 속성 → JS 영역 .removeAttribute('hidden') 영역 영역 노출 */
.module-calc-error[hidden] {
  display: none;
}

/* v14.96 — 본문 텍스트 색상 modifier (PHP inline color hardcoded 차단 mandate)
   .module-calc-text-error      = red-600 (오류/경고 텍스트 — Extra Tax / Not Eligible)
   .module-calc-text-success    = green-600 (성공/적격 텍스트 — Eligible / Fix)
   .module-calc-text-danger     = red-600 (위험/Mistake 텍스트 — ❌ Mistake)
   .module-calc-text-muted      = gray-400 (회색 보조 텍스트 — past dates)
   .module-calc-text-source     = emerald-800 (출처 텍스트 — Source: BEA) */
.module-calc-text-error,
.module-calc-text-danger {
  color: #dc2626;
  font-weight: 600;
}
.module-calc-text-success {
  color: #16a34a;
  font-weight: 600;
}
.module-calc-text-muted {
  color: #9ca3af;
}
.module-calc-text-source {
  color: #065f46;
  font-size: 0.85em;
}

/* v15.160 — BMI grade 색상 modifier (bmi/calc-ui.php JS inline style="color:hex" 차단)
   .bmi-grade--underweight = blue-500   (BMI < 18.5)
   .bmi-grade--normal      = green-500  (BMI 18.5-25)
   .bmi-grade--overweight  = amber-500  (BMI 25-30)
   .bmi-grade--obese1      = red-500    (BMI 30-35)
   .bmi-grade--obese2plus  = red-600    (BMI >= 35) */
.bmi-grade--underweight { color: #3b82f6; font-weight: 600; }
.bmi-grade--normal      { color: #22c55e; font-weight: 600; }
.bmi-grade--overweight  { color: #f59e0b; font-weight: 600; }
.bmi-grade--obese1      { color: #ef4444; font-weight: 600; }
.bmi-grade--obese2plus  { color: #dc2626; font-weight: 600; }

/* v14.96 — 안내 박스 modifier (inline background hardcoded 차단)
   .module-info-box--color--blue  = sky-50 background + blue-500 left border
   eitc / income-tax / tax-refund-estimator 영역 영역 영역 영역 */
.module-info-box--color--blue {
  margin-top: 1.25rem;
  padding: 12px 16px;
  background: #f0f9ff;
  border-left: 4px solid #3b82f6;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.6;
}

/* v14.96 — 헤딩 modifier (inline margin/font-size hardcoded 차단)
   .h-section-emoji      = ss-fairness 안 이모지 헤딩 (margin:16px 0 8px 0; font-size:16px)
   .h-donut-comparison   = donut chart 비교 제목 (margin:24px 0 12px; font-size:17px)
   .h-section-1099       = 1099-tax 비교 제목 (margin:1.5rem 0 0.75rem; font-size:1.05rem)
   .h-donut-caption      = donut chart 안내 (text-align:center; font-size:13px; color:gray-500) */
.h-section-emoji {
  margin: 16px 0 8px 0;
  font-size: 16px;
}
.h-section-emoji--center {
  text-align: center;
}
.h-donut-comparison {
  margin: 24px 0 12px;
  font-size: 17px;
}
.h-donut-comparison[hidden] {
  display: none;
}
.h-section-1099 {
  margin: 1.5rem 0 0.75rem;
  font-size: 1.05rem;
}
.h-donut-caption {
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  margin-top: 8px;
}

/* v14.96 — bonus-tax 안 method note (inline text-align:center;font-size:13px 차단) */
.r-method-note {
  text-align: center;
  font-size: 13px;
}

/* v14.96 — ss-fairness-act 안 action plan list (inline padding-left:20px;line-height:1.8 차단) */
.action-plan-list {
  padding-left: 20px;
  line-height: 1.8;
}

/* v14.96 — salary affordability state RPP callout (inline gradient + padding 차단)
   green-themed callout for cost-of-living adjustment 정보 */
.module-info-box--rpp {
  margin: 16px 0;
  padding: 14px 18px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-left: 4px solid #059669;
  border-radius: 8px;
}

/* v14.96 — lt-callout--milestone (related sections 안 milestone narrative)
   sky-themed gradient callout (10 calc 일괄 적용) */
.module-info-box--milestone {
  margin: 20px 0;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-left: 4px solid #0284c7;
  border-radius: 8px;
}

/* v14.96 — lt-callout--tfd (Tax Freedom Day narrative — salary derived)
   amber-themed gradient callout */
.module-info-box--tfd {
  margin: 16px 0;
  padding: 14px 18px;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  border-left: 4px solid #d97706;
  border-radius: 8px;
}

/* v14.96 — _shared/section-insights.php 안 4 callout 블록 (inline background + padding + border-radius 차단)
   .module-info-box--position = 청색 (slate background + blue left border) — 위치/percentile 정보
   .module-info-box--fica     = 황색 (amber background + amber left border) — FICA 경고
   .module-table--credit-map       = 녹색 (emerald background + emerald left border) — 크레딧 적격
   .module-info-box--state-arb        = 주황 (amber background + amber-700 left border) — 주별 절세 */
.module-info-box--position {
  background: #f8fafc;
  border-left: 4px solid #3b82f6;
  padding: 16px 20px;
  margin: 18px 0;
  border-radius: 0 8px 8px 0;
  font-size: 14.5px;
  line-height: 1.65;
}
.module-info-box--fica {
  background: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 6px 6px 0;
  font-size: 14px;
  line-height: 1.6;
}
.module-table--credit-map {
  background: #ecfdf5;
  border-left: 4px solid #10b981;
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 6px 6px 0;
  font-size: 13.5px;
  line-height: 1.7;
}
.module-info-box--state-arb {
  background: #fef3c7;
  border-left: 4px solid #d97706;
  padding: 14px 18px;
  margin: 14px 0;
  border-radius: 0 6px 6px 0;
  font-size: 13.5px;
  line-height: 1.7;
}
/* v14.96 — section-insights.php 안 텍스트 정렬 modifier (inline margin + color + font 차단) */
.module-info-box__title {
  margin: 0 0 8px;
  font-weight: 700;
  color: #1e293b;
  font-size: 16px;   /* MODOOCARD-PORT 2026-07-03: 사이트 최소 폰트 16px 원칙(사용자 확정) — 구 15px 상향.
                        L111 선행 정의(1rem=16px)와 정합(이 후행 규칙이 이겨 실효 15px이던 결함 해소). */
}
.module-info-box__title--emerald {
  color: #064e3b;
  margin-bottom: 6px;
}
.module-info-box__title--amber {
  color: #78350f;
  margin-bottom: 6px;
}
.module-info-box__body {
  margin: 0 0 8px;
  color: #334155;
}
.module-info-box__body--last {
  margin-bottom: 0;
}
.module-info-box__body--amber {
  color: #78350f;
}
.module-info-box__list {
  margin: 0;
  padding-left: 18px;
  color: #065f46;
}
.module-info-box__list li {
  margin: 3px 0;
}

/* v14.96 — label-hint block 표시 (inline display:block;margin-top:4px;font-size:12px;color:gray-500 차단)
   eitc 안 "Married Filing Separately is NOT eligible for EITC" */
.module-calc-input-group label span.label-hint--block {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
}


/* ==========================================================
   TABLE OVERFLOW WRAPPER
   ========================================================== */
.module-table__scroll-wrap,
.module-calc-detail,
.module-table--salary,
.module-table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #94a3b8 #f1f5f9;  /* slate-400 thumb / slate-100 track — 전역 중립 */
}
.module-table__scroll-wrap {
  margin: 16px 0 8px;
}
.module-table__scroll-wrap > table {
  margin: 0;
}

/* Scroll hint (JS toggles .scroll-active) */
.module-table__scroll-hint {
  display: none !important;
  text-align: center;
  font-size: 16px !important;
  font-weight: 700;
  color: #2563eb !important;  /* blue-600 — 테마 무관 고정 블루 통일 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: 1.4 !important;
  padding: 2px 0;
  margin: -10px 0 32px 0 !important;
}
.module-table__scroll-hint--top {
  margin: 0 0 10px 0 !important;
}
/* 본문 콘텐츠 테이블 스크롤 힌트 간격 보정 */
.module-table__scroll-wrap + .module-table__scroll-hint:not(.module-table__scroll-hint--top),
.module-table-wrap + .module-table__scroll-hint:not(.module-table__scroll-hint--top) {
  margin-top: 14px !important;
}
.module-table__scroll-hint--top + .module-table__scroll-wrap,
.module-table__scroll-hint--top + .module-table-wrap {
  margin-top: 2px !important;
}
.module-table__scroll-hint:last-child {
  margin-bottom: 0 !important;
}
.module-table__scroll-hint.scroll-active {
  display: block !important;
}

/* Reset theme global table borders
   v14.76 (사용자 mandate "표준 모듈 SSOT 우선"):
   .module-table 영역 reset 제거 — v14.75 정정 (border + th/td border-right) 영영구 영영구 영영구
   .module-calc-detail / .module-table--salary / .pyung-table 영영구 reset 정합 (legacy 표 영영구) */
.module-calc-detail table,
.module-calc-detail td,
.module-calc-detail th,
.module-table--salary,
.module-table--salary td,
.module-table--salary th,
.module-calc-detail td,
.module-table--salary td,

/* Table cells: no line-break → overflow triggers horizontal scroll */
.module-calc-detail th,
.module-calc-detail td,
.module-table__scroll-wrap th,
.module-table__scroll-wrap td,
.module-table--salary th,
.module-table--salary td,
.module-table th,
.module-table td {
  white-space: nowrap !important;
}


/* ==========================================================
   LONGTAIL SPOKE TABLE RULES (v13.47 — moved from core/template/longtail.php inline <style>)
   ========================================================== */
.longtail-page table,
.longtail-page .module-table__scroll-wrap table,
.longtail-page .module-table-wrap table {
  width: auto !important;
  min-width: 100% !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  table-layout: auto !important;
  display: table !important;
}
.longtail-page .module-table__scroll-wrap { overflow-x: auto; width: 100%; }
.longtail-page table th,
.longtail-page table td {
  border-bottom: 1px solid #e5e7eb;
  white-space: nowrap !important;
}
.longtail-page table thead {
  background: var(--color-primary, #1a73e8);
  color: #fff;
}
.longtail-page table th {
  padding: 12px 10px;
  font-weight: 600;
  text-align: center;
}
.longtail-page table td {
  padding: 11px 10px;
  text-align: right;
  font-size: 16px;
}
.longtail-page table td:first-child { text-align: left; }
/* td-notes mandate — feedback_table_td_notes_convention.md */
.longtail-page table td.td-notes { text-align: left !important; }
/* [v13.49] table td 안 <small> 영역 줄바꿈 강제 — (formerly ...) / (this page) 영역 별도 줄 표시 */
.longtail-page table td small { display: block; font-size: 0.85em; color: #6b7280; }
.longtail-page table[style*="--lt-last-col-align"] td:last-child { text-align: left; }
.longtail-page table tbody tr:hover td { background: #f0f9ff; }

/* [v13.54] tr-current — current_button column 자동 row highlight (module-data-table.php 영역 자동 적용) */
.module-table tr.tr-current td,
.module-table tr.tr-current td,
.module-table__table tr.tr-current td,
.longtail-page table tr.tr-current td {
    background: #eff6ff !important;
    font-weight: 600;
}

/* ==========================================================
   ACCESSIBILITY
   ========================================================== */

/* Focus-visible ring */
.module-calc-toggle__btn:focus-visible,
.module-calc-btn:focus-visible,
.module-calc-input:focus-visible,
.module-calc-select:focus-visible,
.module-share-buttons button:focus-visible,
.module-briefing__cta:focus-visible,
.module-briefing__links a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
a:focus-visible,
button:focus-visible,
details summary:focus-visible {
  outline: 2px solid var(--color-primary, #1a73e8);
  outline-offset: 2px;
}

/* Screen reader only */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* TOC links */
.toc-level-2 a {
  color: inherit;
  text-decoration: none;
}
.toc-level-2 a:hover {
  color: #0284c7;
  text-decoration: underline;
}
/* v15.207 라운드 7 정정 — focus-visible 정합 (WCAG 2.1 AA — 2.4.7 Focus Visible) */
.toc-level-2 a:focus-visible {
  outline: 2px solid #0284c7;
  outline-offset: 2px;
  border-radius: 2px;
}

/* ==========================================================
   CALC FAQ — Always-open Q&A cards (jiwon.css 미사용)
   ========================================================== */
/* .module-faq margin/h2 정의 폐기 (사용자 영구 명시 2026-05-04) — 섹션/블록 개별 사용 mandate.
   universal .module-section__title (margin: 70px 0 15px 0) = 모든 섹션 동일 적용. per-section override 차단.
   .module-faq__list 가 첫 child → __list margin-top 0 만 별도 보장하면 박스 시각 일관성 유지. */
.module-faq__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  counter-reset: faq-counter;
}
.module-faq__item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-sm);
  padding: 18px 18px 16px;
  transition: border-color .2s, box-shadow .2s;
  counter-increment: faq-counter;
}
.module-faq__item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  background: #eff6ff;
}
.module-faq__q {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 10px;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.module-faq__q::before {
  content: counter(faq-counter);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.module-faq__a {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--color-text-body);
  padding-left: 38px;
}
.module-faq__a p {
  margin: 0;
  font-weight: 400;
}
.module-faq__a strong {
  color: var(--color-primary-dark);
  font-weight: 700;
  background: var(--color-primary-light);
  padding: 1px 6px;
  border-radius: 4px;
}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */
@media (prefers-reduced-motion: reduce) {
  .module-calc-result.active {
    animation: none;
  }
  .module-calc-btn,
  .module-calc-toggle__btn,
  .module-briefing__cta,
  .module-share-buttons button {
    transition: none !important;
  }
  .module-calc-btn:hover,
  .module-calc-btn:active {
    transform: none !important;
  }
}


/* ==========================================================
   RESPONSIVE — Mobile (max-width: 640px)
   ========================================================== */
@media (max-width: 640px) {
  .module-calc-module {
    padding: 20px 16px;
    margin: 16px 0 24px;
    border-radius: var(--color-radius-md);
  }

  .module-calc-result__box {
    padding: 20px 16px;
  }
  .module-calc-result__value {
    font-size: 28px;
  }
  .module-calc-result__main {
    padding: 24px 16px;
  }
  .module-briefing {
    padding: 16px 14px;
  }

  /* Summary → 1 column on mobile */
  .salary-summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .salary-summary__item {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
  }
  .salary-summary__value {
    font-size: 18px;
  }

  /* 본 계산기 테이블: 모바일 좌우 스크롤 강제 */
  .module-calc-result__box .module-table,
  .module-table-wrap .module-table { min-width: 420px; }
  .module-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Tables: webkit scrollbar (thin scrollbar already global) */
  .module-calc-detail::-webkit-scrollbar,
  .module-table__scroll-wrap::-webkit-scrollbar,
  .pyung-table::-webkit-scrollbar,
  .area-type-table::-webkit-scrollbar,
  .module-table--salary::-webkit-scrollbar,
  .module-table::-webkit-scrollbar {
    height: 6px;
  }
  .module-calc-detail::-webkit-scrollbar-track,
  .module-table__scroll-wrap::-webkit-scrollbar-track,
  .pyung-table::-webkit-scrollbar-track,
  .area-type-table::-webkit-scrollbar-track,
  .module-table--salary::-webkit-scrollbar-track,
  .module-table::-webkit-scrollbar-track {
    background: #f1f5f9;  /* slate-100 — 중립 통일 */
    border-radius: 3px;
  }
  .module-calc-detail::-webkit-scrollbar-thumb,
  .module-table__scroll-wrap::-webkit-scrollbar-thumb,
  .pyung-table::-webkit-scrollbar-thumb,
  .area-type-table::-webkit-scrollbar-thumb,
  .module-table--salary::-webkit-scrollbar-thumb,
  .module-table::-webkit-scrollbar-thumb {
    background: #94a3b8;  /* slate-400 — 중립 통일 */
    border-radius: 3px;
  }
  /* Quick answer box compact */
  .module-quick-answer {
    padding: 16px 14px;
    margin: 16px 0 20px;
  }
  .module-quick-answer__title {
    font-size: 16px;
  }
  .module-quick-answer__content {
    font-size: 14px;
  }

  /* Briefing compact */
  .module-briefing {
    padding: 16px 14px;
  }

  /* Step cards single column within calc-module */
  .module-calc-module .step-cards {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   FEATURED IMAGE — 헤더~목차 사이 대표 이미지
   ========================================================== */
.featured-image-block {
  margin: 0 0 20px;
  text-align: center;
}
.featured-image-block__image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.featured-image-block__caption {
  font-size: 0.85rem;
  color: #64748b;
  margin: 8px 0 0;
}

/* ==========================================================
   RELATED LINKS (정적, 결과 영역 밖)
   ========================================================== */
.module-related-links {
  margin: 32px 0;
}
.module-related-links__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--color-text-primary);
}

/* ==========================================================
   DEDUCTION CARDS — Premium content section cards
   Used by: salary deductions, insurance breakdowns, etc.
   ========================================================== */
.deduction-grid {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.deduction-grid__group-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--color-primary-light);
  display: flex;
  align-items: center;
  gap: 8px;
}
.deduction-grid__group-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 2px;
  flex-shrink: 0;
}
.deduction-grid__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: stretch;
}
/* 카드 높이를 긴 쪽에 맞춤 — grid stretch + body flex:1 */
.deduction-grid__cards > .module-method-card {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-self: stretch;
  height: 100%;
}
.deduction-grid__cards > .module-method-card > .module-method-card__header {
  flex: 0 0 auto;
  width: 100%;
}
.deduction-grid__cards > .module-method-card > .module-method-card__body {
  flex: 1 1 auto;
  width: 100%;
}
.deduction-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-sm);
  padding: 20px 18px;
  transition: box-shadow .2s, border-color .2s, transform .2s;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* 인라인 텍스트만 있는 deduction-card: flex→block 전환 (구조화 서브요소 없는 경우) */
.deduction-card:not(:has(.deduction-card__header)) {
  display: block;
}
.deduction-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.deduction-card__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
  line-height: 1;
}
.deduction-card__icon--pension { background: #ede9fe; }
.deduction-card__icon--health { background: #dcfce7; }
.deduction-card__icon--care { background: #fef3c7; }
.deduction-card__icon--employ { background: #dbeafe; }
.deduction-card__icon--tax { background: #fce7f3; }
.deduction-card__icon--local { background: #e0e7ff; }
.deduction-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-primary-dark);
}
.deduction-card__header-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.deduction-card__name {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary-dark);
}
.deduction-card__rate {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* Amount bar with label — shows actual monthly deduction */
.deduction-card__amount {
  background: var(--color-bg-subtle);
  border-radius: 6px;
  padding: 10px 12px;
}
.deduction-card__amount-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}
.deduction-card__amount-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.deduction-card__amount-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--color-primary-dark);
  white-space: nowrap;
  min-width: 72px;
}
.deduction-card__amount-bar {
  flex: 1;
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
}
.deduction-card__amount-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  transition: width .6s ease-out;
}
.deduction-card__desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0;
}
.deduction-card__desc strong {
  color: var(--color-text-primary);
  font-weight: 600;
}
/* deduction-card 단순 변형 (icon/header 없이 title+body만 사용) */
.deduction-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin: 0 0 6px;
}
.deduction-card__body {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text-body);
  margin: 0;
}

/* Deduction card — full-width variant (for items needing more space) */
.deduction-card--wide {
  grid-column: 1 / -1;
}

.deduction-card:only-child {
  grid-column: 1 / -1;
}

@media (max-width: 640px) {
  .deduction-grid__cards {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================
   CALC EXAMPLE — Step-by-step calculation walkthrough
   Used by: salary calc-example, tax examples, etc.
   ========================================================== */
.module-calc-example {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-sm);
  padding: 16px 20px;
  margin: 12px 0;
}
.module-calc-example__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
}
.module-calc-example__premise {
  background: var(--color-primary-light);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: var(--color-radius-sm);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.module-calc-example__premise-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.module-calc-example__premise-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.module-calc-example__tag {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: #fff;
  padding: 5px 14px;
  border-radius: 20px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
}
.module-calc-example__steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.module-calc-example__step {
  position: relative;
  padding-left: 44px;
  padding-bottom: 24px;
  border-left: 2px solid var(--color-border);
  margin-left: 16px;
}
.module-calc-example__step:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.module-calc-example__step-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.module-calc-example__step-num {
  position: absolute;
  left: -15px;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.module-calc-example__step--result .module-calc-example__step-num {
  background: #059669;
  width: 32px;
  height: 32px;
  left: -17px;
}
.module-calc-example__step-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text-primary);
  display: block;
  margin-bottom: 6px;
}
.module-calc-example__step-body {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-sm);
  padding: 16px;
  display: block;
}
.module-calc-example__formula {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 8px;   /* 8px = 뒤따르는 note와의 간격 전용 */
  line-height: 1.6;
}
/* note 없이 formula가 마지막이면 하단 마진 제거 — step-body padding 16px에 8px가 더해져
   상하 비대칭(하단 ~24px)이 되던 결함(사용자 실측 2026-07-04) */
.module-calc-example__formula:last-child { margin-bottom: 0; }
.module-calc-example__formula strong {
  color: var(--color-primary);
  font-weight: 800;
}
.module-calc-example__formula--final {
  font-size: 18px;
  padding: 12px 16px;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  text-align: center;
}
.module-calc-example__formula--final strong {
  color: #059669;
  font-size: 22px;
}
.module-calc-example__note {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 8px 0 0;
}
.module-calc-example__note strong {
  color: var(--color-text-primary);
  font-weight: 600;
}
.module-calc-example__step-body table {
  margin-top: 0;
  margin-bottom: 8px;
}
@media (max-width: 640px) {
  .module-calc-example__step {
    padding-left: 0;
    margin-left: 0;
    border-left: none;
    padding-bottom: 16px;
  }
  .module-calc-example__step-num {
    display: none;
  }
  .module-calc-example__step--result .module-calc-example__step-num {
    display: none;
  }
  .module-calc-example__step-header {
    gap: 8px;
    margin-bottom: 8px;
  }
  .module-calc-example__step-title {
    font-size: 15px;
  }
  .module-calc-example__step-body {
    padding: 12px;
  }
  .module-calc-example__formula--final {
    font-size: 15px;
    padding: 10px 12px;
  }
  .module-calc-example__formula--final strong {
    font-size: 18px;
  }
}


/* ==========================================================
   CHANGE LIST — Year-over-year comparison cards
   Used by: tax-changes, rate updates, etc.
   ========================================================== */
.change-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.change-list__baseline {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 20px;
  padding: 5px 14px;
  align-self: flex-start;
}
.module-table__change-item {
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--color-radius-sm);
  padding: 18px 16px;
  transition: box-shadow .2s, border-color .2s;
}
.module-table__change-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.module-table__change-item--up {
  border-left-color: #dc2626;
}
.module-table__change-item--down {
  border-left-color: #059669;
}
.module-table__change-item--good {
  border-left-color: #2563eb;
}
.module-table__change-item__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.module-table__change-item__name {
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text-primary);
  flex: 1;
}
.module-table__change-item__badge {
  font-size: 13px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}
.module-table__change-item__badge--up {
  color: #dc2626;
  background: #fef2f2;
}
.module-table__change-item__badge--down {
  color: #059669;
  background: #ecfdf5;
}
.module-table__change-item__badge--good {
  color: #2563eb;
  background: #eff6ff;
}
.module-table__change-item__values {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 700;
}
.module-table__change-item__before {
  color: var(--color-text-muted);
  text-decoration: line-through;
}
.module-table__change-item__arrow {
  color: var(--color-text-muted);
  font-size: 14px;
}
.module-table__change-item__after {
  color: var(--color-text-primary);
  font-size: 18px;
}
.module-table__change-item--up .module-table__change-item__after {
  color: #dc2626;
}
.module-table__change-item--down .module-table__change-item__after {
  color: #059669;
}
.module-table__change-item--good .module-table__change-item__after {
  color: #2563eb;
}
/* Delta tag — change magnitude next to before→after */
.module-table__change-item__delta {
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  margin-left: auto;
}
.module-table__change-item__delta--up {
  color: #dc2626;
  background: #fef2f2;
}
.module-table__change-item__delta--good {
  color: #2563eb;
  background: #eff6ff;
}

/* Effect highlight box — key takeaway per change */
.module-table__change-item__effect {
  font-size: 16px;
  font-weight: 600;
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.module-table__change-item__effect--up {
  background: #fef2f2;
  color: #991b1b;
  border-left: 3px solid #dc2626;
}
.module-table__change-item__effect--good {
  background: #eff6ff;
  color: #1e40af;
  border-left: 3px solid #3b82f6;
}
.module-table__change-item__effect strong {
  font-weight: 800;
}

.module-table__change-item__desc {
  font-size: 16px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0;
}
.module-table__change-item__desc strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Change item — icon (emoji in header) */
.module-table__change-item__icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

/* Change item — impact magnitude bar */
.module-table__change-item__impact {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.module-table__change-item__impact-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 36px;
}
.module-table__change-item__impact-bar {
  flex: 1;
  height: 6px;
  background: var(--color-border-light);
  border-radius: 3px;
  overflow: hidden;
}
.module-table__change-item__impact-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .6s ease-out;
}
.module-table__change-item__impact-fill--high {
  background: linear-gradient(90deg, #ef4444, #dc2626);
}
.module-table__change-item__impact-fill--mid {
  background: linear-gradient(90deg, #fb923c, #f97316);
}
.module-table__change-item__impact-fill--low {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.module-table__change-item__impact-fill--good {
  background: linear-gradient(90deg, #60a5fa, #3b82f6);
}
.module-table__change-item__impact-text {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  min-width: 28px;
  text-align: right;
}
.module-table__change-item--up .module-table__change-item__impact-text {
  color: #dc2626;
}
.module-table__change-item--good .module-table__change-item__impact-text {
  color: #2563eb;
}


/* ==========================================================
   CONTENT SECTION — Formula / Regulation cards
   Used by: content_sections body HTML (data/*.php)
   ========================================================== */

/* Section sub-heading (h3 inside content_sections) */
.module-calc-section-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin: 20px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-border);
}
.module-calc-section-sub::before {
  content: attr(data-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--color-primary-light);
  font-size: 15px;
  flex-shrink: 0;
}

/* Formula highlight box */
.module-calc-example__formula-box {
  background: linear-gradient(135deg, #eff6ff, #f0f9ff);
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
  border-radius: var(--color-radius-md);
  padding: 20px 24px;
  margin: 12px 0 16px;
  text-align: left;
}
.module-calc-example__formula-box__expr {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary-dark);
  letter-spacing: -0.3px;
  line-height: 1.5;
}
.module-calc-example__formula-box__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 10px;
}
.module-calc-example__formula-box__body {
  text-align: left;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-body);
}
.module-calc-example__formula-box__note {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 8px;
}

/* Formula box — extended sub-classes for US calculators */
.module-calc-example__formula-box__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.module-calc-example__formula-box__header .module-calc-example__formula-box__icon {
  font-size: 22px;
  flex-shrink: 0;
}
.module-calc-example__formula-box__header .module-calc-example__formula-box__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-primary-dark, #1e40af);
  margin: 0;
}
.module-calc-example__formula-box__formula {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-primary-dark, #1e40af);
  line-height: 1.6;
  margin-bottom: 6px;
}
.module-calc-example__formula-box__desc {
  font-size: 16px;
  color: var(--color-text-secondary, #475569);
  line-height: 1.6;
  margin: 0;
}

/* Method cards — repayment types, regulation items */
.module-calc-method-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0;
}
.module-method-card {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  align-content: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-sm);
  padding: 14px 16px;
  margin-bottom: 10px;
  transition: box-shadow .2s, border-color .2s;
}
.module-method-card > h3,
.module-method-card > h4 {
  width: 100%;
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text-primary, #1e293b);
}
.module-method-card > ul,
.module-method-card > ol {
  width: 100%;
  margin: 0;
}
.module-method-card > p {
  width: 100%;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-text-secondary, #475569);
}
.module-method-card > table,
.module-method-card > .module-table__scroll-wrap {
  width: 100%;
}
/* ── Color variants ── */
.module-method-card--green       { border-left: 4px solid #22c55e; }
.module-method-card--amber       { border-left: 4px solid #f59e0b; }
.module-method-card--blue        { border-left: 4px solid #3b82f6; }
.module-method-card--purple      { border-left: 4px solid #a855f7; }
.module-method-card--red         { border-left: 4px solid #ef4444; }
.module-method-card--gold        { border-left: 4px solid #eab308; }
.module-method-card--recommended { border-color: #22c55e; background: #f0fdf4; }
.module-method-card:last-child {
  margin-bottom: 0;
}
.module-method-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.module-method-card__header {
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-text-primary, #1e293b);
  margin: 0;
}
.module-method-card__header .module-method-card__icon {
  display: none;
}
.module-method-card .module-method-card__header .module-method-card__title img.emoji {
  vertical-align: text-top !important;
  height: 1.1em !important;
  width: 1.1em !important;
  margin-right: 3px !important;
}
.module-method-card__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary, #3b82f6);
  border-radius: 6px;
  padding: 0 6px;
  flex-shrink: 0;
  line-height: 1;
}
.module-method-card--green .module-method-card__number  { background: #22c55e; }
.module-method-card--amber .module-method-card__number  { background: #f59e0b; }
.module-method-card--purple .module-method-card__number { background: #a855f7; }
.module-method-card--red .module-method-card__number    { background: #ef4444; }
.module-method-card__badge {
  display: block;
  width: fit-content;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
  line-height: 1.4;
  white-space: nowrap;
  color: #1e40af;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
}
.module-method-card__badge--recommended {
  color: #059669;
  background: #ecfdf5;
}
.module-method-card__badge--caution {
  color: #d97706;
  background: #fffbeb;
}
.module-method-card__badge--warning {
  color: #dc2626;
  background: #fef2f2;
}
.module-method-card__header .module-method-card__title {
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}
/* 패턴 A (icon+body 2열): 기본 — 아이콘 좌측, 본문 우측 */
.module-method-card__body {
  flex: 1;
  min-width: 0;
}
/* dl/dt/dd inside card body — US calculator cards (stacked layout) */
.module-method-card__body dl {
  margin: 0;
  display: block;
  font-size: 16px;
  line-height: 1.6;
}
.module-method-card__body dt {
  font-weight: 700;
  color: var(--color-text-primary, #1e293b);
  margin-top: 14px;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.module-method-card__body dt:first-child {
  margin-top: 0;
}
.module-method-card__body dd {
  margin: 4px 0 0 0;
  color: var(--color-text-secondary, #475569);
  font-size: 16px;
}
/* Card content top-align (not center) */
.module-method-card__body ul {
  align-self: flex-start;
}
/* 패턴 B (header+body 1열): __header 다음에 오는 __body */
.module-method-card__header ~ .module-method-card__body {
  width: 100%;
  flex: none;
}
.module-method-card__example {
  font-size: 14px;
  color: var(--color-text-secondary, #475569);
  background: var(--color-bg-subtle, #f8fafc);
  border-radius: 6px;
  padding: 8px 12px;
  margin-top: 8px;
  line-height: 1.5;
}
.module-method-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
  margin-top: -1px; /* v15.81 2026-06-07: 이모지·타이틀 baseline 1px 보정 */
}
.module-method-card__icon--blue {
  background: #eff6ff;
}
.module-method-card__icon--green {
  background: #f0fdf4;
}
.module-method-card__icon--amber {
  background: #fffbeb;
}
.module-method-card__icon--red {
  background: #fef2f2;
}
.module-method-card__icon--purple {
  background: #faf5ff;
}
/* __body base rule and __header~ override are defined above (line ~2065) */
.module-method-card__title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 4px;
  flex: 1 1 0;
  min-width: 0;
  padding-left: 0;
  min-height: 36px;
}
.module-method-card__formula {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-bg-subtle);
  border-radius: 4px;
  padding: 6px 10px;
  display: inline-block;
  margin-bottom: 4px;
  font-family: 'Courier New', monospace;
}
.module-method-card__desc {
  font-size: 15px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
}
.module-method-card__tag {
  font-size: 14px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}
.module-method-card__tag--recommended {
  color: #059669;
  background: #ecfdf5;
}
.module-method-card__tag--caution {
  color: #d97706;
  background: #fffbeb;
}
.module-method-card__tag--warning {
  color: #dc2626;
  background: #fef2f2;
}

@media (max-width: 600px) {
  .module-calc-example__formula-box {
    padding: 16px;
  }
  .module-calc-example__formula-box__expr {
    font-size: 15px;
  }
  .module-method-card {
    padding: 12px;
  }
  .module-method-card__icon {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
  .module-method-card__tag {
    display: none;
  }
}


/* ==========================================================
   DONUT CHART — CSS-only conic-gradient breakdown visual
   Used by: calc-example result step, comparison summaries
   ========================================================== */
.module-calc-donut-wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 16px 0;
  padding: 16px 20px;
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-sm);
}
.module-calc-donut {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: #e5e7eb;
  background-image: conic-gradient(
    #3b82f6 0% calc(var(--seg1) * 1%),
    #f59e0b calc(var(--seg1) * 1%) 100%
  );
  position: relative;
  flex-shrink: 0;
}
/* Legacy: hide segment divs inside donut circle */
.module-calc-donut > [class*="calc-donut--seg"] {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
/* Legacy: style legend spans without __legend-item class */
.module-calc-donut__legend > span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-body, #374151);
  line-height: 1.8;
}
.module-calc-donut__legend > span::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
.module-calc-donut__legend > .module-calc-donut__seg1::before { background: #4CAF50; }
.module-calc-donut__legend > .module-calc-donut__seg2::before { background: #2196F3; }
.module-calc-donut__legend > .module-calc-donut__seg3::before { background: #FF9800; }
/* Legacy: standalone donut without calc-donut-wrap gets basic layout */
.module-calc-donut:not(.module-calc-donut-wrap .module-calc-donut) {
  margin: 16px 0 8px;
}
.module-calc-donut__legend:not(.module-calc-donut-wrap .module-calc-donut__legend) {
  margin: 0 0 16px;
}
.module-calc-donut__center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  background: var(--color-bg-subtle);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.module-calc-donut__value,
.module-calc-donut__center > strong {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-primary-dark);
  line-height: 1.1;
}
.module-calc-donut__label,
.module-calc-donut__center > span {
  font-size: 10px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 2px;
}
.module-calc-donut__legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.module-calc-donut__legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-body);
  line-height: 1.4;
}
.module-calc-donut__legend-item strong {
  color: var(--color-text-primary);
  font-weight: 700;
}
.module-calc-donut__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex-shrink: 0;
}
/* v14.90 — donut legend dot color modifier (inline style 차단 mandate)
   Federal/Tax/Fee = red-500, State/Secondary = orange-500, Net/Take-Home = green-500
   추가 색 필요 시 modifier 확장 */
.module-calc-donut__legend-dot--red    { background: #ef4444; }
.module-calc-donut__legend-dot--orange { background: #f97316; }
.module-calc-donut__legend-dot--green  { background: #22c55e; }
.module-calc-donut__legend-dot--blue   { background: #3b82f6; }
.module-calc-donut__legend-dot--purple { background: #a855f7; }
/* v14.96 — bonus-tax / eitc / gross-to-net 영역 신규 색 modifier */
.module-calc-donut__legend-dot--amber   { background: #f59e0b; }
.module-calc-donut__legend-dot--emerald { background: #10b981; }
/* v14.95 — 51 state-paycheck inline style 차단 마이그레이션 — secondary tax/local tax 영역 violet */
.module-calc-donut__legend-dot--violet  { background: #8b5cf6; }
.module-calc-donut__caption {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}
@media (max-width: 640px) {
  .module-calc-donut-wrap {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .module-calc-donut {
    width: 100px;
    height: 100px;
  }
  .module-calc-donut__center {
    width: 60px;
    height: 60px;
  }
  .module-calc-donut__value {
    font-size: 15px;
  }
}


/* ==========================================================
   CHART.JS — Interactive canvas chart container
   Used by: partials with Chart.js (salary, compound-interest, etc.)
   ========================================================== */
/* CSS 막대 차트 (KISS/SSOT) — chart.php가 [label,value]를 width:% 막대로 렌더.
   canvas/JS/Chart.js 없음. .module-chart__bar의 width만 data값(inline), 나머지는 여기 SSOT. */
.module-chart {
  margin: 24px 0;
  padding: 20px;
  background: var(--color-bg-card, #fff);
  border-radius: var(--color-radius-sm, 8px);
  border: 1px solid var(--color-border, #e5e7eb);
}
.module-chart__title {
  font-size: 20px;
  font-weight: 700;
  color: var(--color-text-primary, #111827);
  margin: 0 0 8px;
}
.module-chart__caption {
  font-size: 13px;
  color: var(--color-text-secondary, #6b7280);
  margin: 0 0 16px;
  line-height: 1.6;
}
.module-chart__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;                                            /* R(2026-07-14): flex→grid — 라벨 열 = 가장 긴 라벨 폭(fit-content·고정 132px 제거→왕/특/대 같은 짧은 라벨 빈 여백 해소·트랙 정렬 유지) */
  grid-template-columns: fit-content(160px) minmax(0, 1fr) max-content;
  align-items: center;
  gap: 10px 12px;
}
.module-chart__row {
  display: contents;                                        /* 자식(라벨·트랙·값)이 부모 grid 셀에 직접 배치 → 행 간 라벨 열 폭 공유·정렬 */
}
.module-chart__label {
  font-size: 14px;
  color: var(--color-text-primary, #111827);
  word-break: keep-all;
  line-height: 1.4;
}
.module-chart__track {
  flex: 1 1 auto;
  height: 22px;
  background: var(--color-bg-subtle, #eef2f7);
  border-radius: 4px;
  overflow: hidden;
}
.module-chart__bar {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--color-accent, #3b82f6);
  border-radius: 4px;
  transition: width .3s ease;
}
.module-chart__value {
  flex: 0 0 auto;
  min-width: 44px;
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-primary, #111827);
  font-variant-numeric: tabular-nums;
}
.module-chart__note {
  font-size: 12px;
  color: var(--color-text-secondary, #6b7280);
  margin: 14px 0 0;
  line-height: 1.6;
}
@media (max-width: 640px) {
  .module-chart {
    padding: 16px;
  }
  .module-chart__label {
    font-size: 13px;                                        /* R(2026-07-14): flex-basis 제거 — grid 열(fit-content)이 폭 담당 */
  }
}

/* ── SVG 차트 (chart.php type=line/area/sparkline/range/donut/candle/heatmap) ──
   서버 렌더 inline SVG. JS·canvas 0. 좌표만 PHP가 박고 색·굵기·폰트는 여기 SSOT.
   상승=#dc2626(빨강)·하락=#2563eb(파랑) 한국 관례. 데이터표는 .visually-hidden 재사용. */
.module-chart__svg {
  display: block;
  width: 100%;
  height: auto;
  margin: 4px 0 2px;
  overflow: visible;
  font-variant-numeric: tabular-nums;
}
.module-chart--sparkline .module-chart__svg { max-width: 240px; }
.module-chart--donut .module-chart__svg { max-width: 280px; margin-inline: auto; }
.module-chart--range .module-chart__svg,
.module-chart--heatmap .module-chart__svg { max-width: 100%; }
/* line / area */
.module-chart__line {
  fill: none;
  stroke: var(--color-accent, #3b82f6);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.module-chart__area { fill: var(--color-accent, #3b82f6); opacity: .10; stroke: none; }
.module-chart__dot { fill: var(--color-accent, #3b82f6); }
.module-chart__grid { stroke: var(--color-border, #e5e7eb); stroke-width: 1; stroke-dasharray: 3 4; }
.module-chart__axis-line { stroke: var(--color-border, #e5e7eb); stroke-width: 1; }   /* D6(2026-07-18): 세로 Y축선 — grid와 동일 색·두께·실선(점선 그리드와 구분) */
.module-chart__axis { fill: var(--color-text-secondary, #6b7280); font-size: 12px; }
.module-chart__vlabel { fill: var(--color-text-primary, #111827); font-size: 13px; font-weight: 700; }
/* sparkline */
.module-chart__spark { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.module-chart__spark--up,  .module-chart__spark-dot--up   { stroke: #dc2626; }
.module-chart__spark--down,.module-chart__spark-dot--down { stroke: #2563eb; }
.module-chart__spark-dot--up   { fill: #dc2626; }
.module-chart__spark-dot--down { fill: #2563eb; }
/* range */
.module-chart__range-track { fill: var(--color-bg-subtle, #eef2f7); }
.module-chart__range-fill  { fill: var(--color-accent, #3b82f6); opacity: .35; }
.module-chart__marker { fill: var(--color-accent, #3b82f6); stroke: #fff; stroke-width: 2; }
/* donut */
.module-chart__seg { transition: stroke-dasharray .6s ease; }
.module-chart__donut-center { fill: var(--color-text-primary, #111827); font-size: 30px; font-weight: 700; }
.module-chart__donut-sub { fill: var(--color-text-secondary, #6b7280); font-size: 13px; }
/* candle */
.module-chart__wick { stroke-width: 1.5; }
.module-chart__candle--up   { fill: #dc2626; stroke: #dc2626; }
.module-chart__candle--down { fill: #2563eb; stroke: #2563eb; }
/* heatmap */
.module-chart__cell { fill: var(--color-accent, #3b82f6); }
.module-chart__cell--empty { fill: var(--color-bg-subtle, #eef2f7); fill-opacity: 1; }
.module-chart__cell-val { fill: var(--color-text-primary, #111827); font-size: 12px; }
/* 라인 그려지는 애니메이션 (점진적 향상 — 꺼져도 완전 렌더) */
@media (prefers-reduced-motion: no-preference) {
  .module-chart__line, .module-chart__spark {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: module-chart-draw 1s ease forwards;
  }
}
@keyframes module-chart-draw { to { stroke-dashoffset: 0; } }
@media (max-width: 640px) {
  .module-chart__axis { font-size: 11px; }
  .module-chart__donut-center { font-size: 26px; }
}


/* ==========================================================
   FULL TABLE — Premium intro/footnote/link styles
   Used by: calc_build_full_table() across all calculators
   ========================================================== */
.full-table__intro {
  background: var(--color-primary-light);
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: var(--color-radius-sm);
  padding: 14px 18px;
  margin-bottom: 16px;
}
.full-table__intro p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-primary-dark);
  margin: 0;
  font-weight: 500;
}
.full-table__footnote {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-sm);
  padding: 12px 16px;
  margin-top: 12px;
}
.full-table__footnote p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin: 0;
}
/* full-table__link → lt-nearby-link으로 통일 */


/* ==========================================================
   SOURCES — Citation block with linked cards
   ========================================================== */
.module-sources__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: source-counter;
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.module-sources__badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ecfdf5;
  color: #059669;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.module-sources__badge::before {
  content: counter(source-counter);
}
/* 원형 번호 badge = 티어 색의 옅은 톤 (2026-06-29 사용자·dacalc 참고: 짙은 원형 넘버는 너무 튐 → 연한 배경 + 진한 색 숫자). 범례 pill은 짙은 색으로 구분. */
.module-sources__badge--tier-1 { background: #dcfce7; color: #16a34a; }  /* 정부·공공 1차 (연녹색 + 진녹색 숫자) */
.module-sources__badge--tier-2 { background: #fef3c7; color: #b45309; }  /* 협회·연구소·업계 2차 (연호박 + 진호박 숫자) */
.module-sources__badge--tier-3 { background: #f1f5f9; color: #4b5563; }  /* 상업·뉴스 3차 (연회색 + 진회색 숫자) */
.module-sources__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-sm);
  padding: 12px 16px;
  transition: border-color .2s, box-shadow .2s;
  counter-increment: source-counter;
}
.module-sources__item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
/* meta 영역 영역 = numbering + tier badge 영역 같은 줄 영역 (사용자 영구 mandate 2026-05-05, 모바일 공간 절약) */
.module-sources__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* tier legend 영역 영역 (사용자 영역 영역 — H2 직후 영역 영역에 영역 영역 영역, 사용자 영구 mandate 2026-05-05) */
.module-sources__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-sm);
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.module-sources__legend-item {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}
/* tier badge 영역 영역 영역 영역 (legend 영역 영역) — vertical 정합 영역 (text 영역 영역 영역 영역 영역 영역) */
.module-sources__legend-item .module-sources__tier {
  margin-top: 2px;
}
@media (max-width: 768px) {
  .module-sources__legend { flex-direction: column; gap: 6px; }
}
/* tier badge 영역 시각 영역 (E-E-A-T 영역 신뢰성 영역 분류 영역, 사용자 영구 mandate 2026-05-05) */
.module-sources__tier {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  color: white;
  line-height: 1.4;
  flex-shrink: 0;
  letter-spacing: 0.3px;
}
.module-sources__tier--1 { background: #16a34a; }   /* 1차 source — federal/state agency 영역 (IRS / SSA / state TRD / Congress / NMSA 등, 녹색) */
.module-sources__tier--2 { background: #f59e0b; }   /* 2차 source — think tank / association 영역 (Tax Foundation / state CPA society 등, 호박색) */
.module-sources__tier--3 { background: #6b7280; }   /* 3차 source — commercial / news 영역 (TurboTax / NerdWallet 등, 회색) */
.module-sources__text {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  flex: 1;
  line-height: 1.5;
  /* desktop padding-top — 배지(28px) vs text(21px) 높이 차이 보정 (사용자 push 2026-05-05) */
  padding-top: 3px;
}
@media (max-width: 640px) {
  /* 모바일 = flex-direction column → padding-top 부재 (column 영역에서 별도 줄) */
  .module-sources__text { padding-top: 0; }
}
.module-sources__link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary) !important;
  background: var(--color-primary-light);
  padding: 4px 12px;
  border-radius: 20px;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.module-sources__link:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}
.module-sources__disclaimer {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0 8px;
}
.module-sources__disclaimer p {
  font-size: 13px !important;
  font-style: italic;
  line-height: 1.7;
  color: #6b7280;
  margin: 0 0 4px;
}
.module-sources__disclaimer strong {
  color: #111827;
  font-weight: 700;
}
.module-sources__updated {
  font-size: 12px;
  font-style: italic;
  color: #9ca3af;
  margin-top: 6px;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .module-sources__item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}


/* ===== jiwon.css 오버라이드 (jiwon.css 이후 로드) ===== */

/* card-grid--cols-3: components.css로 통합 (중복 충돌 제거) — base가 display/gap/margin, cols-3가 columns 제공. card-grid.php는 항상 base+modifier 동시 출력 */

/* stat-card__value (렌더러 클래스) = stat-card__number (jiwon.css 클래스) */
.module-stat-card__value {
  display: block;
  font-size: 2.5rem;
  font-weight: 900;
  margin-bottom: 8px;
  color: #4F46E5;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}


/* ==========================================================================
   LONGTAIL SECTIONS — Premium Visual UI (lt- prefix)
   8 section renderers, 158 pages auto-applied
   ========================================================================== */

/* ── lt-section 공통 ── */
.module-section {
  margin-bottom: 32px;
  min-width: 0;
  overflow: hidden;
}

.module-section__intro {
  font-size: 16px;
  color: #374151;
  line-height: 1.85;
  margin-bottom: 16px;
}

/* ===== Section 1: 결과 카드 ===== */
.module-result-card--lt {
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #fff 60%);
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-md);
  padding: 24px;
  box-shadow: var(--color-shadow-sm);
}
.module-result-card__answer {
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text-body);
  margin-bottom: 16px;
}
.module-result-card__highlight {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--color-radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
}
.module-result-card__label {
  font-size: 14px;
  font-weight: 600;
  opacity: .9;
}
.module-result-card__value {
  font-size: 16px;
  font-weight: 800;
}
.module-result-card__basis {
  font-size: 13px;
  color: var(--color-text-muted);
  background: var(--color-bg-subtle);
  border-radius: 6px;
  padding: 10px 14px;
  margin-top: 12px;
  line-height: 1.6;
}

/* 결과 상세 테이블 → calc-table 클래스 재사용 (본 포스트와 동일) */

/* ===== Section 2: 맥락 인사이트 — Quick Facts ===== */
.module-stat-card--quicks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.module-stat-card--quick {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-sm);
  padding: 16px 12px;
  transition: box-shadow .2s, border-color .2s;
}
.module-stat-card--quick:hover {
  border-color: var(--color-primary);
  box-shadow: var(--color-shadow-md);
}
.module-stat-card__icon {
  font-size: 28px;
  margin-bottom: 8px;
  line-height: 1;
}
.module-stat-card__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.module-stat-card__value {
  font-size: 16px;
  font-weight: 800;
  color: var(--color-primary-dark);
}
.module-sources__note {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
}

/* ===== Section 3: 파생 계산 카드 ===== */
.module-result-card__grid--derived {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}
.module-result-card--derived {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--color-radius-md);
  padding: 20px;
  transition: box-shadow .2s, border-color .2s;
  min-width: 0;
  overflow: hidden;
}
.module-result-card--derived:hover {
  border-color: var(--color-primary);
  box-shadow: var(--color-shadow-md);
}
.module-result-card__header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 12px;
}
.module-result-card__icon {
  flex-shrink: 0;
}
.module-result-card--derived .module-result-card__header .module-result-card__icon img.emoji,
.module-result-card--derived .module-result-card__header .module-result-card__icon img {
  width: 24px !important;
  height: 24px !important;
  vertical-align: text-bottom !important;
  margin: 0 !important;
}
.module-result-card__title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}
.module-result-card__content {
  padding-left: 0;
}
.module-result-card__value {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
  padding: 8px 12px;
  background: var(--color-primary-light);
  border-radius: 6px;
  border-left: 3px solid var(--color-primary);
}
.module-result-card__body {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-body);
  margin-bottom: 12px;
}
.module-result-card__formula {
  background: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 15px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  line-height: 1.6;
}
.module-result-card__formula-label {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  background: var(--color-primary-light);
  padding: 3px 10px;
  border-radius: 4px;
  margin-bottom: 6px;
}
.module-result-card__note {
  font-size: 15px;
  color: var(--color-text-muted);
  padding: 8px 12px;
  background: var(--color-bg-subtle);
  border-radius: 6px;
  margin-bottom: 12px;
}
.module-result-card__link {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding: 10px 20px;
  background: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  transition: background .2s, color .2s;
}
.module-result-card__link:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}
.module-result-card__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 12px 0;
}
.module-result-card__table caption {
  text-align: left;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding-bottom: 6px;
}
.module-result-card__table th {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  padding: 10px 12px;
  text-align: center;
  border-bottom: 2px solid var(--color-primary-dark);
}
.module-result-card__table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  text-align: right;
}
.module-result-card__table td:first-child {
  text-align: center;
}
.module-result-card__table tr.highlight {
  background: var(--color-primary-light);
  font-weight: 700;
}

/* ===== (제거) "최적화 전략 체크리스트" 블록 — 콘텐츠 전용 CSS가 범용 steps 모듈을 덮던 오염. 2026-06-05 제거.
   steps SSOT = ⑪ step-card(.module-steps__item, 865행대) + 컨테이너(.module-steps).
   __icon/__savings/__content>strong 은 steps.php가 출력하지 않는 마크업 = 死 CSS였음.
   본문 내 링크는 .module-section__body a 가 처리(steps는 섹션 본문 안에서 렌더). ===== */

/* ===== Section 5: 인사이트 블록 ===== */
.module-info-box--insight {
  background: #fff;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--color-radius-sm);
  padding: 20px;
  margin-bottom: 14px;
  transition: box-shadow .2s;
}
.module-info-box--insight:hover {
  box-shadow: var(--color-shadow-sm);
}
.module-info-box--insight h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.module-info-box--insight h3::before {
  content: '💡';
  font-size: 18px;
}
.module-info-box--insight p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text-body);
  margin: 0 0 8px;
}
.module-info-box--insight a {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}
.module-info-box--insight a:hover {
  text-decoration: underline;
}

/* ===== Section 6: 인근 비교 테이블 → calc-table 클래스 재사용 ===== */
.module-table tr.row-current {
  background: var(--color-primary-light);
}
.module-table tr.row-current td {
  font-weight: 700;
  color: var(--color-primary-dark);
}
/* nearby 테이블: 첫 번째 열 — 링크 버튼이므로 가운데 정렬 */
.module-section--nearby .module-table td:first-child {
  text-align: center;
}
.module-table td:has(.module-hub-nav__current):not(.td-notes),
.module-table td:has(.module-table__link):not(.td-notes) {
  text-align: center;
}
/* ── 롱테일 & 본 포스트 공통 테이블 링크 버튼 ── */
.module-table__link {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 35%, transparent);
  padding: 8px 16px;
  min-height: 44px;
  line-height: 26px;
  border-radius: var(--color-radius-sm);
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: background .2s, color .2s, transform .15s, box-shadow .15s;
}
.module-table__link:hover,
.module-content a.module-table__link:hover {
  background: var(--color-primary-dark);   /* 호버 배경 더 진하게(#1557b0) — 흰 글자 대비 강화 */
  color: #fff !important;                  /* 전역 .module-content a:hover 색 오버라이드(주석 7333·7371 명시) */
  border-color: var(--color-primary-dark);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-primary) 30%, transparent);
}
.module-table__link:active,
.module-content a.module-table__link:active {
  transform: translateY(0) scale(.97);
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff !important;
  box-shadow: none;
}
.module-hub-nav__current {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  border: 1.5px solid var(--color-primary);
  padding: 8px 16px;
  min-height: 44px;
  line-height: 26px;
  border-radius: var(--color-radius-sm);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* ===== Section 7: 롱테일 FAQ → calc-faq 클래스 재사용 ===== */
.faq-bridge-link {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--color-primary);
  text-decoration: none;
  padding: 6px 14px;
  border: 1px solid var(--color-primary);
  border-radius: 6px;
  margin-top: 8px;
  transition: background .2s, color .2s;
}
.faq-bridge-link:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: #fff;
}

/* archive-* CSS 폐기 (2026-05-25 SSOT·KISS 정합):
   사유: hub.php 모듈 폐기 → home.php 양식 (표준 모듈) 사용
   대안: header + hub-nav + card-grid + stats 표준 모듈 사용 본문 */

/* ============================================================================
   Breadcrumb 모듈 (사용자 영구 push 2026-05-25 — Phase 1 AdSense 강화)
   reference: WCAG 2.1 navigation 표준 + Schema.org BreadcrumbList rich results
   ============================================================================ */
.module-breadcrumb {
    margin: -20px 0 20px;
    padding: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #6b7280;
}
.module-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.module-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
}
.module-breadcrumb__link {
    color: #1e40af;
    text-decoration: none;
    transition: color 0.2s ease;
}
.module-breadcrumb__link:hover {
    color: #1e3a8a;
    text-decoration: underline;
}
.module-breadcrumb__current {
    color: #111827;
    font-weight: 600;
}
.module-breadcrumb__separator {
    margin: 0 8px;
    color: #9ca3af;
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 768px) {
    .module-breadcrumb        { font-size: 13px; margin-bottom: 16px; margin-top: -16px; }
    .module-breadcrumb__separator { margin: 0 6px; }
}

/* ============================================================================
   Social Share 모듈 (사용자 영구 push 2026-05-25 — Phase 2 AdSense 강화)
   콘텐츠 사이트 사실 사실 SNS 공유 + URL 복사 양식
   ============================================================================ */
.module-social-share {
    margin: 40px 0 0;
    padding: 20px 24px;
    background: #f9fafb;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
}
.module-social-share__title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #111827;
}
.module-social-share__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.module-social-share__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}
.module-social-share__btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}
.module-social-share__btn--twitter:hover  { background: #000000; color: #ffffff; border-color: #000000; }
.module-social-share__btn--facebook:hover { background: #1877f2; color: #ffffff; border-color: #1877f2; }
.module-social-share__btn--linkedin:hover { background: #0a66c2; color: #ffffff; border-color: #0a66c2; }
.module-social-share__btn--kakao:hover    { background: #fee500; color: #3c1e1e; border-color: #fee500; }
.module-social-share__btn--copy:hover     { background: #1e40af; color: #ffffff; border-color: #1e40af; }
.module-social-share__btn > span[aria-hidden] {
    font-weight: 700;
    font-size: 14px;
}

@media (max-width: 768px) {
    .module-social-share        { padding: 16px; margin: 32px 0 0; }
    .module-social-share__label { display: none; }
    .module-social-share__btn   { padding: 10px 12px; }
}

/* ============================================================================
   Search page + search form (사용자 영구 push 2026-05-25 — Phase 2 AdSense)
   ============================================================================ */
.search-header {
    max-width: 960px;
    margin: 0 auto 32px;
    padding: 32px 24px;
    text-align: center;
    background: linear-gradient(135deg, #3b82f6, #1e40af);
    color: #ffffff;
    border-radius: 12px;
}
.search-header__title {
    font-size: 32px;
    font-weight: 800;
    margin: 0 0 8px;
    color: #ffffff;
    line-height: 1.2;
}
.search-header__query {
    color: #fbbf24;
    word-break: break-word;
}
.search-header__meta {
    font-size: 15px;
    opacity: 0.9;
    margin: 0 0 20px;
}
.search-form--inline {
    display: flex;
    max-width: 480px;
    margin: 0 auto;
    gap: 8px;
}
.search-form__input {
    flex: 1;
    padding: 12px 16px;
    font-size: 15px;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.95);
    color: #1a1a1a;
}
.search-form__input:focus {
    outline: 0;
    background: #ffffff;
}
.search-form__btn {
    padding: 12px 20px;
    background: #ffffff;
    color: #1e40af;
    border: 0;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.search-form__btn:hover {
    background: #fbbf24;
    color: #111827;
}

.search-results-list {
    max-width: 960px;
    margin: 0 auto;
}

.search-empty {
    max-width: 720px;
    margin: 48px auto;
    padding: 64px 24px;
    text-align: center;
    background: #f9fafb;
    border-radius: 16px;
}
.search-empty h2 {
    font-size: 24px;
    color: #374151;
    margin: 0 0 12px;
}
.search-empty a {
    color: #1e40af;
    font-weight: 600;
}

@media (max-width: 768px) {
    .search-header        { padding: 24px 16px; margin-bottom: 24px; }
    .search-header__title { font-size: 24px; }
    .search-form--inline  { flex-direction: column; }
    .search-form__btn     { width: 100%; }
}

/* ===== .future-link — 사전 결함 양식 (영구 보존 — backward compat) ===== */
/*   사용자 영구 push 2026-05-25: 시각 차이 부재 양식 = "완성 사이트" 강화.
   calc_internal_link() 사실 사실 helpers.php 안 정정 = label 텍스트만 반환 (span 자체 부재).
   본 CSS = 사전 작성 콘텐츠 안 잔존 <span class="future-link"> 영역 안전 처리. */
.future-link {
  /* 시각 차이 부재 — 일반 텍스트와 동일 양식 */
  color: inherit;
  font-weight: inherit;
  border-bottom: none;
  cursor: text;
  text-decoration: none;
}

/* ===== Section 8: 관련 콘텐츠 ===== */
/* ※ 가이드 CTA는 .module-highlight (공용) 사용, lt-guide-cta 제거됨 */
/* ── 관련 계산기 wrap (사용자 영구 mandate 2026-05-25 — related.php 정정 사후 추가) ── */
/*   본인 사전 결함: .module-related__title 정의 부재 → WordPress 기본 h3 (29px) 사용 본문 사실
     정정: module H3 20px 통일 (task #37 mandate 정합) + margin·color 사실 추가. */
.module-related {
  margin: 24px 0 20px;
}
.module-related__title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
  margin: 8px 0 16px;
  padding-bottom: 10px;
  color: #0f172a;
  text-transform: none;
  border-bottom: 2px solid #3b82f6;
}

/* ── 관련 계산기 카드 (본 계산기 + 롱테일 + 카운티 공용) ── */
.module-related__grid,
.module-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin: 24px 0 20px;
}
.module-related__card,
.module-related__card:hover,
.module-related__card:visited,
.module-related__card,
.module-related__card:hover,
.module-related__card:visited {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 12px;
  text-decoration: none !important;
  color: #1e293b;
  transition: border-color .2s, box-shadow .2s, transform .15s;
  position: relative;
}
.module-related__card::before,
.module-related__card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: transparent;
  border-radius: 8px 8px 0 0;
  transition: background .2s;
}
.module-related__card:hover,
.module-related__card:hover {
  border-color: #3b82f6;
  box-shadow: 0 2px 8px rgba(59,130,246,0.1);
  transform: translateY(-2px);
}
.module-related__card:hover::before,
.module-related__card:hover::before {
  background: #3b82f6;
}
.module-related__card__icon,
.module-related__icon {
  font-size: 36px;
  margin-bottom: 10px;
  line-height: 1;
}
.module-related__card__title {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 6px;
}
.module-related__card__desc,
.module-related__desc {
  font-size: 15px;
  color: #475569;
  line-height: 1.5;
}

/* 대표 계산기 돌아가기 */
.module-cta--back {
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.module-cta--back a,
.module-content .module-cta--back a {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  font-size: 24px;                 /* XL 급 통일 */
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff !important;
  background: var(--color-primary);
  text-align: center;
  text-decoration: none !important;
  padding: 20px 44px;               /* XL 급 통일 */
  min-height: 74px;
  border-radius: 14px;              /* 프리미엄 라운드 */
  box-shadow: 0 6px 18px rgba(0,0,0,0.14);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-sizing: border-box;
}
/* Shine — hover 시 1회 diagonal sweep */
.module-cta--back a::before,
.module-content .module-cta--back a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 80%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 0%,
    rgba(255,255,255,0.35) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.7s ease;
  pointer-events: none;
}
.module-cta--back a:hover::before,
.module-content .module-cta--back a:hover::before {
  left: 120%;
}
/* 2번째 이후 CTA는 보조 스타일 (아웃라인) */
.module-cta--back a:nth-child(n+2),
.module-content .module-cta--back a:nth-child(n+2) {
  background: transparent;
  color: var(--color-primary) !important;
  border: 2px solid var(--color-primary);
}
.module-cta--back a:nth-child(n+2):hover,
.module-content .module-cta--back a:nth-child(n+2):hover {
  background: var(--color-primary);
  color: #fff !important;
}
.module-cta--back a:hover,
.module-content .module-cta--back a:hover {
  /* 테마색 유지, 명도·리프트·그림자만 강화 */
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
  filter: brightness(1.08);
  color: #fff !important;
  text-decoration: none !important;
}
/* 접근성: 모션 축소 */
@media (prefers-reduced-motion: reduce) {
  .module-cta--back a::before,
  .module-content .module-cta--back a::before { display: none; }
  .module-cta--back a,
  .module-content .module-cta--back a { transition: none; }
  .module-cta--back a:hover,
  .module-content .module-cta--back a:hover { transform: none; filter: none; }
}

/* 데이터 출처 → calc-sources 클래스 재사용 (본 포스트와 동일) */

/* 최종 업데이트 */
.post p.module-disclaimer__updated,
.module-disclaimer__updated {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #9ca3af;
  font-style: italic;
  margin-top: 8px;
}

/* ===== Longtail Responsive ===== */
/* ===== Longtail Article Variant ===== */
.module-result-card--article {
  border-left: 3px solid var(--color-primary);
}

/* ===== Longtail Focus-Visible (WCAG AA) ===== */
.module-result-card__link:focus-visible,
.module-table__link:focus-visible,
.module-cta--back a:focus-visible,
.module-related__card:focus-visible,
.module-related__card:focus-visible,
.module-steps__content a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-primary-light);
}

/* ===== Longtail Responsive ===== */
@media (max-width: 768px) {
  .module-result-card--lt {
    padding: 16px;
  }
  .module-result-card__highlight {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 12px 16px;
  }
  .module-stat-card--quicks {
    grid-template-columns: 1fr;
  }
  .module-result-card--derived {
    padding: 16px;
  }
  .module-result-card__table {
    font-size: 14px;
  }
  .module-result-card__table th {
    font-size: 14px;
  }
  .module-steps__item {
    padding: 12px;
  }
  .module-info-box--insight {
    padding: 16px;
  }
  .module-related__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .module-related__grid {
    grid-template-columns: 1fr;
  }
  .module-result-card__body {
    line-height: 1.6;
  }
}

@media (max-width: 480px) {
  .module-stat-card--quicks {
    grid-template-columns: 1fr;
  }
  .module-related__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   DSR Gauge — 시각적 DSR 비율 바
   ========================================================== */
.dsr-gauge {
  margin: 16px 0;
  background: var(--color-bg-subtle, #f3f4f6);
  border-radius: var(--color-radius-sm);
  height: 32px;
  position: relative;
  overflow: hidden;
}
.dsr-gauge__bar {
  height: 100%;
  border-radius: var(--color-radius-sm);
  transition: width 0.5s ease, background 0.3s;
  width: 0%;
}
.dsr-gauge__bar--safe { background: #16a34a; }
.dsr-gauge__bar--warning { background: #f59e0b; }
.dsr-gauge__bar--danger { background: #dc2626; }
.dsr-gauge__marker {
  position: absolute;
  top: 0;
  height: 100%;
  border-left: 2px dashed;
  z-index: 1;
}
.dsr-gauge__marker--bank {
  left: 57.14%; /* 40/70 */
  border-color: #dc2626;
}
.dsr-gauge__marker--nonbank {
  left: 71.43%; /* 50/70 */
  border-color: #f59e0b;
}
.dsr-gauge__label {
  position: absolute;
  top: -18px;
  font-size: 11px;
  font-weight: 600;
  transform: translateX(-50%);
}
.dsr-gauge__label--bank {
  left: 57.14%;
  color: #dc2626;
}
.dsr-gauge__label--nonbank {
  left: 71.43%;
  color: #f59e0b;
}

/* ===== Longtail Print ===== */
@media print {
  .module-section {
    page-break-inside: avoid;
  }
  .module-result-card--lt,
  .module-result-card--derived,
  .module-steps__item,
  .module-info-box--insight {
    border: 1px solid #ccc;
    box-shadow: none;
    break-inside: avoid;
  }
  .module-result-card__link,
  .module-table__link,
  .module-cta--back {
    display: none;
  }
}

/* ══════════════════════════════════════════════════════════════
   US State Paycheck Calculator — Missing CSS (2026-04-05)
   ══════════════════════════════════════════════════════════════ */

/* ──── State Hero Section ──── */
.state-hero {
  background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
  border-radius: 12px;
  padding: 24px 20px;
  margin-bottom: 24px;
  text-align: center;
}
.state-hero h2 {
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 12px 0;
  color: #1e293b;
}
.state-hero p {
  margin: 12px 0 0 0;
  color: #475569;
  font-size: 15px;
  line-height: 1.6;
}
.state-hero__badges {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

/* ──── Badge System ──── */
.badge {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.badge--green {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}
.badge--blue {
  background: #dbeafe;
  color: #1e40af;
  border: 1px solid #93c5fd;
}
.badge--purple {
  background: #e9d5ff;
  color: #6b21a8;
  border: 1px solid #d8b4fe;
}

/* ──── Result Summary Cards ──── */
.module-calc-result__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.module-calc-result__card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px 14px;
  text-align: center;
}
.module-calc-result__card-label {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 6px;
}
.module-calc-result__card-value {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: #2563eb;
}
.module-calc-result__card--highlight {
  background: #eff6ff;
  border-color: #2563eb;
  border-width: 2px;
}
.module-calc-result__card--highlight .module-calc-result__card-value {
  font-size: 26px;
  color: #1d4ed8;
}

/* ──── Chart Wrapper (Responsive) ──── */
.module-chart-wrap {
  margin: 20px auto;
  padding: 16px;
  max-width: 360px;
  text-align: center;
}
.module-chart-wrap canvas {
  max-width: 100%;
  height: auto !important;
}

/* ──── Content Section (US Shared) ──── */
.module-calc-content-section {
  margin: 24px 0;
  padding: 0;
}
/* `>` direct child only — nested h3/h4 (combo-card / hub-block / FAQ details 안) 영향 차단 */
.module-calc-content-section > h3,
.module-calc-result > h3,
.module-table__scroll-wrap > h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 24px 0 12px 0 !important;
  line-height: 1.4 !important;
  color: #1e293b;
}
.module-calc-content-section > h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  margin: 20px 0 8px 0 !important;
  line-height: 1.4 !important;
  color: #1e293b;
}
.module-table-caption {
  font-size: 16px;
  font-weight: 700;
  color: #1e293b;
  margin: 24px 0 8px 0;
}
.module-calc-content-section p {
  font-size: 16px;
  line-height: 1.7;
  color: #374151;
  margin: 0 0 12px 0;
}
.module-calc-content-section ul {
  padding-left: 20px;
  margin: 0 0 12px 0;
}
.module-calc-content-section li {
  font-size: 16px;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 6px;
}

/* ──── Calc List ──── */
.module-calc-list {
  list-style: disc;
  padding-left: 20px;
  margin: 8px 0 16px 0;
}
.module-calc-list li {
  font-size: 14px;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 6px;
}
.module-calc-list--links {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.module-calc-list--links li {
  margin: 0;
}
.module-calc-list--links a {
  display: block;
  padding: 8px 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #2563eb;
  text-decoration: none;
  font-size: 14px;
  transition: background 0.15s;
}
.module-calc-list--links a:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

/* ──── Row Group Header (for deduction table) ──── */
/* v14.85 (사용자 mandate "Monthly Pension (Gross) / State Tax Impact / Lifetime Value 글자 작음 — 본문 사이즈"):
   font-size: 13px 영영구 → inherit (본문 일반 크기) */
.row-group-header td {
  background: #f1f5f9;
  font-weight: 600;
  color: #475569;
  padding: 8px 12px;
  border-bottom: 2px solid #e2e8f0;
}

/* ──── Longtail Page Styles ──── */
/*
 * [2026-04-14] KR 롱테일 테이블 100% 너비 수정
 * 이전: .module-table에 display:block + overflow-x:auto → 테이블이 콘텐츠 기반 폭으로 수축
 * 현재: .module-table은 display:table 유지 + width:100% → 부모 폭 채움
 *       가로 스크롤 책임은 부모 .module-table__scroll-wrap으로 이동
 * US 영향: longtail-master.php:108의 인라인 스타일(!important)이 이 규칙을 덮어쓰므로
 *         US 롱테일 동작은 변화 없음. KR 롱테일만 100% 너비 획득.
 * 장기: US 글로벌 규격화 완료 시 modules.css 재작성으로 이 블록 자연 소멸 예정.
 */
.longtail-page .module-table {
  display: table !important;
  width: 100% !important;
  table-layout: auto;
  margin: 16px 0 8px;
}
.longtail-page .module-table__scroll-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.longtail-page .entry-content > div,
.longtail-page .entry-content table {
  max-width: 100%;
  overflow-wrap: break-word;
}
.module-header--lt {
  margin-bottom: 24px;
}
.module-header--lt h2 {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 8px 0;
}
.module-highlight__tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.module-highlight--tag {
  display: inline-block;
  padding: 6px 14px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  color: #2563eb;
  font-size: 13px;
  text-decoration: none;
  transition: background 0.15s;
}
.module-highlight--tag:hover {
  background: #dbeafe;
  border-color: #93c5fd;
}
.module-hub-nav__links {
  margin-top: 24px;
}
.module-hub-nav__list {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.module-hub-nav__list li {
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 14px;
  line-height: 1.6;
}
.module-hub-nav__list a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 600;
}
.module-hub-nav__list a:hover {
  text-decoration: underline;
}

/* ──── Mobile Responsive ──── */
@media (max-width: 640px) {
  .state-hero {
    padding: 16px 14px;
  }
  .state-hero h2 {
    font-size: 20px;
  }
  .module-calc-result__cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .module-calc-result__card-value {
    font-size: 18px;
  }
  .module-chart-wrap {
    max-width: 280px;
    padding: 12px;
  }
  .module-calc-list--links {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════
   US Longtail Content (.module-content) — 2026-04-06
   ══════════════════════════════════════════════════════════════ */

/* ── Base ── */
.module-content { font-size: 16px; line-height: 1.85; color: #374151; max-width: 100%; }
.module-content h2 { font-size: 24px; font-weight: 700; color: #1e293b; margin: 36px 0 16px; padding-bottom: 10px; border-bottom: 2px solid #e5e7eb; }
.module-content h3 { font-size: 20px; font-weight: 700; color: #1e293b; margin: 28px 0 12px; }
.module-content p { font-size: 16px; line-height: 1.85; color: #374151; margin: 0 0 16px; }
.module-content ul, .module-content ol { padding-left: 0; margin: 0 0 16px; list-style-position: inside; }
.module-content li { font-size: 16px; line-height: 1.8; margin-bottom: 8px; }
.module-content a { color: #2563eb; text-decoration: none; }
.module-content a:hover { text-decoration: underline; }
.module-content a.module-table__link:hover { text-decoration: none; }
.module-content strong { color: #111827; font-weight: 700; }

/* ── Tables ── */
.module-content table, .module-content .module-table,
.module-content section table, .module-content div table,
.longtail-page table {
  width: 100% !important; min-width: 100%; border-collapse: collapse; margin: 16px 0;
}
.module-content table { table-layout: auto; }
.module-content table td, .longtail-page table td { text-align: right; font-size: 16px; }
.module-content table td:first-child, .longtail-page table td:first-child { text-align: left; }
.module-content table tr:hover td, .longtail-page table tr:hover td { background: #f1f5f9; }  /* slate-100 — 본 계산기 통일 */
/* 롱테일 thead — 본 계산기와 동일 중립 슬레이트 통일 (2026-04-16) */
.module-content table thead,
.module-content table thead th,
.longtail-page table thead,
.longtail-page table thead th {
  background: #e2e8f0 !important;  /* slate-200 */
  color: #1e293b !important;        /* slate-800 */
  border-bottom: 2px solid #94a3b8;  /* slate-400 */
  font-weight: 700;
}
.module-content .module-table__scroll-wrap,
.module-content .module-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.module-content > table, .module-content section > table,
.module-content div > table { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── Info/Tip/Warning Boxes ── */
.module-content .module-info-box { background: #eff6ff; border-left: 4px solid #3b82f6; border-radius: 8px; padding: 16px 20px; margin: 20px 0; font-size: 16px; line-height: 1.8; color: #1e3a5f; }
.module-content .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; }
.module-content .warning-box { background: #fefce8; border-left: 4px solid #eab308; border-radius: 8px; padding: 16px 20px; margin: 20px 0; font-size: 16px; line-height: 1.8; color: #713f12; }

/* ── FAQ Accordion ── */
.module-content .module-faq-item { border: 1px solid #e5e7eb; border-radius: 8px; margin-bottom: 8px; overflow: hidden; }
.module-content .module-faq-item summary,
.module-content .module-faq-q { background: #f8fafc; padding: 14px 18px; font-weight: 600; font-size: 16px; color: #1e293b; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.module-content .module-faq-item summary::after { content: '+'; font-size: 20px; color: #9ca3af; }
.module-content .module-faq-item[open] summary::after { content: '\2212'; }
.module-content .module-faq-item[open] summary { background: #eff6ff; border-bottom: 1px solid #e5e7eb; }
.module-content .module-faq-a,
.module-content .module-faq-item p { padding: 14px 18px; margin: 0; font-size: 16px; line-height: 1.8; color: #374151; }

/* ── Related Calculator Cards — lt-* 는 상단 공용 블록에서 calc-* 와 통합 정의됨 ── */

/* ── State Grid (ss-fairness-act 51-region card grid)
   .module-related__grid + .module-related__card 범용 구조 재사용, 글자만 확대 + 왼쪽 정렬
   ──────────────────────────────────────────────── */
#state-specific-analysis .module-related__grid {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
#state-specific-analysis .module-related__card {
  align-items: flex-start;
  text-align: left;
}
#state-specific-analysis .module-related__card__title {
  font-size: 20px;
}
#state-specific-analysis .module-related__card__desc {
  display: block;
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 4px;
}
#state-specific-analysis .module-related__card .module-table__link {
  display: block;
  margin-top: 8px;
  width: 100%;
  text-align: center;
  pointer-events: none; /* 카드 전체가 링크 */
}
#state-specific-analysis .module-related__card:hover .module-table__link {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--color-primary) 30%, transparent);
}

/* ── Box-nested list (tip/warning/info-box 안 ol/ul spacing 통합 — v15.0 inline style 영역 modules.css SSOT 마이그레이션) ── */
.module-content .tip-box ol,
.module-content .tip-box ul,
.module-content .warning-box ol,
.module-content .warning-box ul { margin: 0.5rem 0 0; padding-left: 1.25rem; }
/* info-box ul/ol — .module-content 컨텍스트 의존 제거 (가상 스포크 페이지엔 .module-content 없어 ul 기본 40px 들여쓰기 과다 → 정정 2026-06-10) */
.module-info-box ol,
.module-info-box ul { margin: 0.5rem 0 1rem; padding-left: 1.25rem; }
/* info-box 안 링크 그리드(.module-calc-list--links, opinet 등): 박스 자체 padding(20px)으로 충분 →
   추가 좌패딩 제거(그리드 전용·불릿 목록은 1.25rem 유지). 51개 내비 링크는 최소 글자(12px). */
.module-info-box .module-calc-list--links { padding-left: 0; }
.module-info-box .module-calc-list--links a { font-size: 16px; }

/* ── Section wrapper spacing (lt-popular-searches / lt-hub-links / lt-sources 영역 inline margin-top 영역 modules.css SSOT 마이그레이션 — v15.0) ── */
.module-content .module-hub-nav__popular,
.module-content .module-hub-nav__links { margin-top: 2em; }
.module-content .lt-sources { margin-top: 2.5em; }

/* ── Sources List ── */
.module-content .lt-sources,
.module-content .lt-source-list { list-style: none; padding: 0; margin: 12px 0; }
.module-content .lt-sources li,
.module-content .lt-source-list li { padding: 10px 14px 10px 20px; border-left: 3px solid #e2e8f0; margin-bottom: 8px; background: #f8fafc; border-radius: 0 6px 6px 0; font-size: 16px; line-height: 1.7; transition: border-color 0.2s; }
.module-content .lt-sources li:hover,
.module-content .lt-source-list li:hover { border-left-color: #3b82f6; }
.module-content .lt-sources a { color: #2563eb; text-decoration: none; }
.module-content .lt-sources a:hover { text-decoration: underline; }

/* ── Link List (More Paycheck Resources) ── */
.module-content .module-hub-nav__list { list-style: none; padding: 0; margin: 12px 0; }
.module-content .module-hub-nav__list li { padding: 10px 14px 10px 20px; border-left: 3px solid #e2e8f0; margin-bottom: 8px; background: #f8fafc; border-radius: 0 6px 6px 0; font-size: 16px; line-height: 1.7; transition: border-color 0.2s; }
.module-content .module-hub-nav__list li:hover { border-left-color: #3b82f6; }

/* ── Disclaimer (작은 italic + 박스) ── */
.module-content .lt-disclaimer { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px 20px; margin: 24px 0 8px; font-size: 13px; font-style: italic; line-height: 1.7; color: #6b7280; }
.module-content .lt-disclaimer p { font-size: 13px; font-style: italic; color: #6b7280; margin: 0 0 4px; }

/* ── CTA Button ── */
.module-content .lt-cta-btn { display: block; width: 100%; padding: 14px 24px; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff !important; font-weight: 600; font-size: 16px; border-radius: 8px; text-decoration: none !important; text-align: center; transition: transform 0.15s, box-shadow 0.15s; margin: 16px 0; box-sizing: border-box; }
.module-content .lt-cta-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,99,235,0.3); text-decoration: none !important; }
.module-content .lt-cta-wrap { text-align: center; margin: 1.2em 0; }

/* ── Income Tier Header ── */
.module-header--tier,
.module-content .module-header--tier { font-size: 18px; font-weight: 700; color: #1e293b; margin: 28px 0 12px; padding: 10px 16px; background: linear-gradient(135deg, #f0f9ff, #e0f2fe); border-radius: 8px; border-left: 4px solid #3b82f6; }

/* ══════════════════════════════════════════════════════════
   LONGTAIL — Additional Component Styles
   ══════════════════════════════════════════════════════════ */

/* ── Section BEM Modifiers (layout hooks) ── */
.module-section--result,
.module-section--context,
.module-section--derived,
.module-section--optimize,
.module-section--tax-leakage,
.module-section--state-comparison,
.module-section--affordability,
.module-section--insights,
.module-section--nearby,
.module-section--faq,
.module-section--anticipatory,
.module-section--related,
/* [Phase E-3b 2026-04-24] Comparison page modifiers */
.module-section--comparison-table,
.module-section--narrative,
.module-section--verdict,
.module-section--statutes,
.module-section--focus-narrative,
.module-section--focus-retirement_type,
.module-section--focus-retirement_component,
.module-section--focus-tis,
.module-section--focus-system,
.module-section--focus-rank,
.module-section--focus-state,
.module-section--interaction,
/* [2026-04-27] hub-nav.php 의 "Reading the Rank × TIS Matrix" anchor section — 다른 lt-section modifiers 와 동일 styling */
.module-section--hub-context {
  margin-bottom: 32px;
}

/* ── Comparison page content hierarchy (margins for readability) ── */
/* 주의: .module-content a:hover 등 전역 규칙을 !important 로 오버라이드 필요 */
.module-section--narrative p,
.module-section--verdict p,
.module-section--comparison-table p,
.module-section--focus-narrative p,
.module-section--interaction p,
.module-section--scenarios p,
.entry-content .module-section--narrative p,
.entry-content .module-section--comparison-table p,
.entry-content .module-section--scenarios p {
  margin: 0 0 16px 0 !important;
  line-height: 1.75 !important;
  text-align: left !important;
  color: var(--color-text-body, #1f2937) !important;
}
.module-section--narrative p:last-child {
  margin-bottom: 0 !important;
}
.module-section--narrative h3,
.module-section--focus-narrative h3,
.entry-content .module-section--narrative h3,
.entry-content .module-section--focus-narrative h3 {
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  font-size: 1.15em !important;
  color: var(--color-text-heading, #111827) !important;
  text-align: left !important;
}
/* (제거 2026-04-25: 이전 v7 `lt-section--focus-narrative ul li { list-style: disc outside !important }` 규칙이
    inline `list-style:none` 을 무력화시킴. 기존 `.module-info-box` + inline style 패턴에 맡김.) */

/* ══════════════════════════════════════════════════════════
   COMPARISON PAGE — 기존 CSS 재사용 전략 (v7 2026-04-24)
   ══════════════════════════════════════════════════════════
   원칙: 신규 CSS 추가 금지. 기존 framework convention 재사용.
   - 테이블 좌측 정렬 → `class="td-notes"` convention (자기진화 ⑦)
   - Verdict/Detailed Analysis → 기존 `.module-info-box` class
   - Related hover underline → 전역 `.module-table a:hover` 규칙이 원인이 아님,
     `.module-content a:hover` 전역 underline 이 원인 → 아래 1개 규칙으로 차단
   ══════════════════════════════════════════════════════════ */

/* Related Pages — 카드형 링크의 underline 완전 제거 (전역 .module-content a:hover 오버라이드) */
.module-related__list a,
.module-related__list a:hover,
.module-related__list a:focus,
.module-content .module-related__list a,
.module-content .module-related__list a:hover,
.entry-content .module-related__list a,
.entry-content .module-related__list a:hover {
  text-decoration: none !important;
}

/* (.statute-list 제거 — 2026-04-25: 기존 .module-info-box 래핑 패턴으로 대체.
    Confederate Base Renames 섹션 참고 — <h3> + <div class="info-box"><ul>...</ul></div>) */

/* ══════════════════════════════════════════════════════════
   .module-table 모든 행 border-bottom 일관성 (td + th[scope="row"])
   Problem 1: 기존 규칙 .module-table tbody tr:last-child td { border-bottom: 2px !important }
     → <td> 만 대상, <th scope="row"> 제외 → 첫 컬럼 마지막 행 bottom 없음
   Problem 2: longtail-master inline .longtail-page table td { border-bottom: 1px } (no !important)
     → 다른 CSS rule 에 의해 중간 행 td border 사라짐 → th[scope="row"] 만 border 보이는 불일치
   Fix: th[scope="row"] + td 모두 !important 로 동일 border 강제
   ══════════════════════════════════════════════════════════ */
.module-table tbody tr th[scope="row"],
.module-table tbody tr td,
.longtail-page .module-table tbody tr th[scope="row"],
.longtail-page .module-table tbody tr td {
  border-bottom: 1px solid #e5e7eb !important;
}
.module-table tbody tr:last-child th[scope="row"],
.module-table tbody tr:last-child td,
.longtail-page .module-table tbody tr:last-child th[scope="row"],
.longtail-page .module-table tbody tr:last-child td {
  border-bottom: 2px solid #e5e7eb !important;
}
/* hub-matrix 는 예외 — 자체 스타일 */
.module-table.hub-matrix tbody tr th[scope="row"],
.module-table.hub-matrix tbody tr td,
.longtail-page .module-table.hub-matrix tbody tr th[scope="row"],
.longtail-page .module-table.hub-matrix tbody tr td {
  border-bottom: 1px solid #e5e7eb !important;
}

/* Verdict box — decision emphasis (NOT .module-highlight — that class forces white-text-on-dark) */
.verdict-box,
.entry-content .verdict-box,
.module-content .verdict-box {
  background: linear-gradient(135deg, #ecfdf5 0%, #f0fdf4 100%) !important;
  border-left: 4px solid #10b981 !important;
  padding: 20px 24px !important;
  border-radius: 8px !important;
  margin: 16px 0 !important;
  color: #064e3b !important;
  text-align: left !important;
}
.verdict-box p,
.entry-content .verdict-box p,
.module-content .verdict-box p {
  color: #064e3b !important;
  line-height: 1.75 !important;
  margin: 0 0 12px 0 !important;
  text-align: left !important;
}
.verdict-box p:last-child,
.entry-content .verdict-box p:last-child {
  margin-bottom: 0 !important;
}
.verdict-box strong,
.entry-content .verdict-box strong {
  color: #065f46 !important;
}

/* Interaction box — E-3a 2-dim analysis (NOT .module-highlight) */
.entry-content .interaction-box,
.module-content .interaction-box {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f9ff 100%) !important;
  border-left: 4px solid #3b82f6 !important;
  padding: 20px 24px !important;
  border-radius: 8px !important;
  margin: 16px 0 !important;
  color: #1e3a8a !important;
  text-align: left !important;
}
.entry-content .interaction-box p,
.module-content .interaction-box p {
  color: #1e3a8a !important;
  line-height: 1.75 !important;
  margin: 0 0 12px 0 !important;
  text-align: left !important;
}
.entry-content .interaction-box strong {
  color: #1e40af !important;
}

/* Statute list — clean bullet styling */
.statute-list {
  margin: 12px 0;
  padding-left: 24px;
}
.statute-list li {
  margin-bottom: 6px;
  line-height: 1.7;
  color: var(--color-text-body, #374151);
}

/* FAQ source attribution */
.faq-source {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border, #e5e7eb);
  font-size: 0.85em;
  color: var(--color-text-secondary, #6b7280);
}

/* ══════════════════════════════════════════════════════════
   Hub Matrix Override — longtail page global table rule 복원
   ══════════════════════════════════════════════════════════
   Problem: longtail-master.php inline <style>:
     `.longtail-page table { width: 100% !important; table-layout: fixed !important }`
     forces hub-matrix (21 × 11 = 12 cols) into crushed fixed-layout → 버튼 겹침.
   Fix: hub-matrix 전용 auto layout + min-width 900px + cell padding.
   각 셀에 pension $ 3-4자리 + /mo 텍스트 있으니 min-width 70-80px 필요 × 12 cols = 900px+.
   ══════════════════════════════════════════════════════════ */
.longtail-page table.hub-matrix,
.longtail-page .module-table__scroll-wrap table.hub-matrix,
.longtail-page .module-table-wrap table.hub-matrix {
  width: auto !important;
  min-width: 900px !important;
  table-layout: auto !important;
  overflow-x: visible !important;
  display: table !important;
}
.longtail-page table.hub-matrix th,
.longtail-page table.hub-matrix td {
  white-space: nowrap !important;
  padding: 6px 4px !important;
  text-align: center !important;
  min-width: 70px !important;
}
.longtail-page table.hub-matrix td:first-child,
.longtail-page table.hub-matrix th:first-child {
  text-align: left !important;
  padding-left: 12px !important;
  min-width: 60px !important;
}
/* hub-matrix__link font-size 는 components.css:1193 `.hub-matrix__link { font-size: 0.9rem }` 가 담당.
   modules.css override 에서 font-size 오버라이드 제거 (2026-04-25) — 최소 가독 크기 준수. */
.longtail-page table.hub-matrix .hub-matrix__link,
.longtail-page table.hub-matrix .hub-matrix__cell a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px !important;
  min-width: 54px !important;
  min-height: 32px !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

/* ══════════════════════════════════════════════════════════
   📌 Few-column matrix override (4 ~ 7 cols) — 2026-05-05
   ──────────────────────────────────────────────────────────
   배경: hub-matrix 기본 min-width: 900px + width: auto 영역 21×11
         (Rank × YOS, 12 cols) 영역 영역 영역 영역 영역. 4-col / 7-col
         matrix 영역 영역 영역 영역 영역 영역 영역 영역 영역 — 컬럼 너비
         영역 영역 영역 영역 영역 영역 영역 영역 영역 영역 영역 영역.
   Fix: block-specific
     - table: width: auto + min-width: 0 (콘텐츠 영역 영역 영역 자연 너비)
     - td/th: min-width: 0 (영역 영역 영역 영역 영역 영역 영역 영역)
     - 모든 컬럼 자연 너비 영역 영역 (첫 컬럼 + 데이터 컬럼 모두)
   ══════════════════════════════════════════════════════════ */
.longtail-page .hub-block--rank-x-component .hub-matrix,
.longtail-page .hub-block--tis-x-component .hub-matrix,
.longtail-page .hub-block--rank-x-type .hub-matrix,
.longtail-page .hub-block--state-x-service .hub-matrix,
.longtail-page .hub-block--rank-x-component .module-table__scroll-wrap table.hub-matrix,
.longtail-page .hub-block--tis-x-component .module-table__scroll-wrap table.hub-matrix,
.longtail-page .hub-block--rank-x-type .module-table__scroll-wrap table.hub-matrix,
.longtail-page .hub-block--state-x-service .module-table__scroll-wrap table.hub-matrix {
  min-width: 100% !important;   /* 컨테이너 영역 영역 영역 영역 영역 영역 영역 영역 (스크롤 부재) */
  width: auto !important;        /* 콘텐츠 영역 영역 영역 영역 영역 영역 (영역 영역 영역 영역 영역 영역 영역 영역) */
  table-layout: auto !important;
}
.longtail-page .hub-block--rank-x-component .hub-matrix th,
.longtail-page .hub-block--rank-x-component .hub-matrix td,
.longtail-page .hub-block--tis-x-component .hub-matrix th,
.longtail-page .hub-block--tis-x-component .hub-matrix td,
.longtail-page .hub-block--rank-x-type .hub-matrix th,
.longtail-page .hub-block--rank-x-type .hub-matrix td,
.longtail-page .hub-block--state-x-service .hub-matrix th,
.longtail-page .hub-block--state-x-service .hub-matrix td {
  min-width: 0 !important;
  width: auto !important;
  padding: 8px 12px !important;
}
.longtail-page .hub-block--rank-x-component .hub-matrix th:first-child,
.longtail-page .hub-block--rank-x-component .hub-matrix td:first-child,
.longtail-page .hub-block--tis-x-component .hub-matrix th:first-child,
.longtail-page .hub-block--tis-x-component .hub-matrix td:first-child,
.longtail-page .hub-block--rank-x-type .hub-matrix th:first-child,
.longtail-page .hub-block--rank-x-type .hub-matrix td:first-child,
.longtail-page .hub-block--state-x-service .hub-matrix th:first-child,
.longtail-page .hub-block--state-x-service .hub-matrix td:first-child {
  white-space: nowrap !important;
}

/* ══════════════════════════════════════════════════════════
   📌 hub-base-block__title — Top 50 base block 영역 h4 (2026-05-05)
   ──────────────────────────────────────────────────────────
   배경: WordPress 기본 h4 = font-size: 24px + margin-bottom: 20px
         → calc 영역 영역 (.hub-block__title = 1.25rem = 20px) 영역
         영역 영역 영역 영역 영역. .hub-base-block__title CSS 정의 부재.
   Fix: hub-block__title 영역 정합 영역 영역 영역 영역 영역 영역.
   ══════════════════════════════════════════════════════════ */
.hub-base-block {
  margin: 12px 0 8px;
}
.hub-base-block__title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin: 8px 0 6px !important;
  line-height: 1.3 !important;
}

/* ══════════════════════════════════════════════════════════
   📌 calc widget h3 통일 — .module-briefing / .module-chart-wrap (2026-05-06)
   ──────────────────────────────────────────────────────────
   배경: WordPress 기본 h3 = font-size: 29px + margin-bottom: 20px + line-height: 1.2em
         + font-weight: 400 → calc widget 안 h3 ("Your Scenario Summary" /
         "4-System NPV Comparison" 등) 어색하게 큼.
   Fix: calc widget 안 h3 통일 정의 (1.05rem ≈ h4 정합, .hub-base-block__title 정합).
   적용 대상: military-retirement main.php line 233 / 239 + 모든 calc widget h3.
   ══════════════════════════════════════════════════════════ */
.module-briefing h3,
.module-chart-wrap h3,
.module-calc-results h3,
.module-calc-result h3 {
  font-size: 1.05rem !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.3 !important;
  text-transform: none !important;
}

/* ══════════════════════════════════════════════════════════
   📌 calculator page 안 sections h3 통일 (2026-05-18)
   ──────────────────────────────────────────────────────────
   배경: WordPress 기본 h3 = font-size: 29px (큰 본질) → calculator sections 안
         h3 ("Which Deductions Reduce Which Federal Taxes?" 등) 어색하게 큼.
   Fix: calc / longtail page 안 모든 h3 본질 정합 (1.25rem ≈ 20px, h2 본질 사후 본질).
   적용 대상: sections/*.php 안 모든 h3 + info-box 안 h3 + table 사전 본질 h3 모두.
   ══════════════════════════════════════════════════════════ */
.single-calc h3,
.single-longtail h3,
.module-calc-page-content h3,
.module-calc-section h3,
.dacalc-section h3,
.module-section h3,
.module-info-box h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 0.5rem;
  line-height: 1.35;
  text-transform: none;
}

/* (legacy .module-sources__list padding 중복 제거 — flex 배지 정의가 SSOT) */
.module-sources__list li {
  margin-bottom: 6px;
  color: var(--color-text-body, #374151);
}
.module-sources__list a {
  color: var(--color-primary, #1a73e8);
  text-decoration: underline;
  text-decoration-color: rgba(26, 115, 232, 0.3);
}
.module-sources__list a:hover {
  text-decoration-color: var(--color-primary, #1a73e8);
}

/* Disclaimer box — bottom of comparison page */
.module-section--disclaimer {
  margin-top: 24px;
}
/* 면책 = 출처/인용과 동일한 subtle 회색 (원본 .lt-disclaimer 복원 — 앰버 경고박스 아님) */
.module-disclaimer {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 24px 0 8px;
  font-size: 13px;
  font-style: italic;
  line-height: 1.7;
  color: #6b7280;
}
.module-disclaimer p {
  font-size: 13px;
  font-style: italic;
  color: #6b7280;
  margin: 0 0 4px;
}
.module-disclaimer p:last-child { margin-bottom: 0; }

/* Scenario table — comparison page enrichment */
.module-section--scenarios .module-table,
.longtail-page .module-section--scenarios .module-table {
  width: 100% !important;
  margin: 16px 0 !important;
  table-layout: auto !important;
}
.module-section--scenarios .module-table th,
.module-section--scenarios .module-table td,
.longtail-page .module-section--scenarios .module-table th,
.longtail-page .module-section--scenarios .module-table td {
  padding: 10px 12px !important;
  text-align: right !important;
  font-size: 15px !important;
}
.module-section--scenarios .module-table thead th,
.longtail-page .module-section--scenarios .module-table thead th {
  background: #1a73e8 !important;
  color: #fff !important;
  text-align: center !important;
}
.module-section--scenarios .module-table tbody th[scope="row"],
.longtail-page .module-section--scenarios .module-table tbody th[scope="row"] {
  text-align: left !important;
  background: #f9fafb !important;
  font-weight: 600 !important;
  color: #111827 !important;
}

/* Related list — comparison page */
.module-related__list {
  list-style: none;
  padding: 0;
  margin: 16px 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}
.module-related__list li a {
  display: block;
  padding: 14px 16px;
  background: var(--color-bg-muted, #f9fafb);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  color: var(--color-primary, #1a73e8);
  text-decoration: none;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}
.module-related__list li a:hover {
  background: #f0f9ff;
  border-color: var(--color-primary, #1a73e8);
}

/* ── Donut 2-segment variant ── */
.module-calc-donut--2seg {
  --seg1: 0; --seg2: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #3b82f6 0% calc(var(--seg1) * 1%),
    #22c55e calc(var(--seg1) * 1%) 100%
  );
  position: relative;
  margin: 0 auto;
}

/* ── Donut 3-segment variant ── */
.module-calc-donut--3seg {
  --seg1: 0; --seg2: 0; --seg3: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #3b82f6 0% calc(var(--seg1) * 1%),
    #f59e0b calc(var(--seg1) * 1%) calc((var(--seg1) + var(--seg2)) * 1%),
    #22c55e calc((var(--seg1) + var(--seg2)) * 1%) 100%
  );
  position: relative;
  margin: 0 auto;
}

/* ── Donut 4-segment variant ── */
.module-calc-donut--4seg {
  --seg1: 0; --seg2: 0; --seg3: 0; --seg4: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #ef4444 0% calc(var(--seg1) * 1%),
    #f97316 calc(var(--seg1) * 1%) calc((var(--seg1) + var(--seg2)) * 1%),
    #3b82f6 calc((var(--seg1) + var(--seg2)) * 1%) calc((var(--seg1) + var(--seg2) + var(--seg3)) * 1%),
    #22c55e calc((var(--seg1) + var(--seg2) + var(--seg3)) * 1%) 100%
  );
  position: relative;
  margin: 0 auto;
}
.module-calc-donut__center {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  background: #fff;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.module-calc-donut__value {
  font-size: 24px;
  font-weight: 800;
  color: #1e293b;
}
.module-calc-donut__label {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}
.module-calc-donut-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin: 20px 0;
}
.module-calc-donut__legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.module-calc-donut__legend-item {
  font-size: 14px;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 8px;
}
.module-calc-donut__legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── Compact Table Variant ── */
.module-table--compact {
  font-size: 14px;
}
.module-table--compact th,
.module-table--compact td {
  padding: 8px 10px;
}

/* ── Table Row Highlight ── */
.module-table__row--highlight td {
  background: #eff6ff !important;
  font-weight: 600;
}

/* ── Table Total Row ── */
.module-table__total td {
  font-weight: 700;
  border-top: 2px solid #94a3b8;
  background: #f8fafc;
}

/* ── Table Net Row (final take-home / net result) ── */
.module-table__net td {
  font-weight: 700;
  border-top: 2px solid #22c55e;
  background: #f0fdf4;
  color: #15803d;
}

/* ── S06 State Comparison: first cell 왼쪽 정렬 (링크 + 배지 시각 균형) ── */
.module-section--state-comparison .module-table td:first-child,
.module-section--state-comparison .module-table th:first-child {
  text-align: left !important;
  vertical-align: middle;
}

/* ── Badge System ── */
.badge,
.module-highlight--badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  vertical-align: middle;
  line-height: 1.5;
}
.badge--info,
.module-highlight--badge-info {
  background: #dbeafe;
  color: #1d4ed8;
}
.module-highlight--badge-current {
  background: #dbeafe;
  color: #1d4ed8;
}
.module-highlight--badge-notax {
  background: #dcfce7;
  color: #166534;
}

/* ── Callout Boxes ── */
.module-info-box--callout {
  border-radius: 8px;
  padding: 16px 20px;
  margin: 16px 0;
  font-size: 16px;
  line-height: 1.8;
}
.module-info-box--positive {
  background: #f0fdf4;
  border-left: 4px solid #22c55e;
  color: #14532d;
}
.module-info-box--warning {
  background: #fefce8;
  border-left: 4px solid #eab308;
  color: #713f12;
}

/* ── Highlight Box ── */
.module-highlight {
  border-radius: 10px;
  padding: 20px 24px;
  margin: 20px 0;
}
/* flex(아이콘+내용 가로 배치)는 아이콘 있는 변형(savings 등)에만 — 중앙정렬 그라데이션 highlight(제목+CTA)는 세로 stack 유지 */
.module-highlight:has(.module-highlight__icon) {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.module-highlight--savings {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  border: 1px solid #bbf7d0;
}
.module-highlight__icon {
  font-size: 28px;
  flex-shrink: 0;
}
.module-highlight__content {
  flex: 1;
}
.module-highlight__content strong {
  display: block;
  font-size: 18px;
  color: #166534;
  margin-bottom: 4px;
}
.module-highlight__content p {
  margin: 0;
  font-size: 15px;
  color: #374151;
}

/* ── Note Text ── */
.module-info-box--note {
  font-size: 14px;
  color: #6b7280;
  margin: 12px 0;
  line-height: 1.6;
}
/* first-child 기본 center (Year/Rank/Step 등 숫자 컬럼용). .td-notes 지정 시 opt-out */
.module-table td:first-child:not(.td-notes) {
  text-align: center;
}
.module-table th:first-child:not(.td-notes) {
  text-align: center;
}

/* ── Full Table Container ── */
.module-table--full {
  margin-top: 32px;
}

/* ── Popular Searches ── */
.module-hub-nav__popular {
  margin: 24px 0;
}

/* ── Insight Block Modifiers ── */
.module-info-box--benefits { border-left: 4px solid #3b82f6; }
.module-info-box--planning { border-left: 4px solid #8b5cf6; }
.module-info-box--tax      { border-left: 4px solid #f59e0b; }
.module-info-box--wealth   { border-left: 4px solid #059669; }

/* ── FAQ List & Items ── */
.module-faq-list {
  margin: 16px 0;
}
.module-faq-item__question {
  background: #f8fafc;
  padding: 14px 18px;
  font-weight: 600;
  font-size: 16px;
  color: #1e293b;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.module-faq-item__answer {
  padding: 14px 18px;
  margin: 0;
  font-size: 16px;
  line-height: 1.8;
  color: #374151;
}

/* ── Related Card Sub-elements — 상단 공용 블록에서 통합 정의됨 ── */

/* ── Disclaimer Updated ── */
/* (legacy .module-disclaimer__updated 중복 제거 — 6855 정의가 SSOT) */

/* ── Longtail Mobile ── */
@media (max-width: 640px) {
  .module-content h2 { font-size: 20px; }
  .module-content h3 { font-size: 18px; }
  .module-content .module-related__grid,
  .module-related__grid { grid-template-columns: 1fr; }
  .module-header--tier,
  .module-content .module-header--tier { font-size: 16px; padding: 8px 12px; }
  .module-calc-donut--2seg,
  .module-calc-donut--3seg,
  .module-calc-donut--4seg { width: 160px; height: 160px; }
  .module-calc-donut__center { width: 96px; height: 96px; }
  .module-calc-donut__value { font-size: 20px; }
  .module-calc-donut-wrap { flex-direction: column; }
  .module-highlight { flex-direction: column; gap: 10px; padding: 16px; }
  .module-info-box--callout { padding: 12px 16px; }
  /* 모바일 CTA 버튼 — XL 기반 축소 */
  .module-cta--back a,
  .module-content .module-cta--back a {
    font-size: 20px;
    padding: 18px 20px;
    min-height: 64px;
    border-radius: 12px;
  }
  .module-content .module-table__scroll-wrap,
  .module-content .module-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ============================================================
   KR Minimum Wage Badge (v14.97 — partials/kr/minimum-wage.php inline <style> migration)
   사용처: partials/kr/minimum-wage.php (실수령 결과 카드 상단 배지)
   - .mw-badge--pass: 최저시급 충족 (녹색)
   - .mw-badge--fail: 최저시급 위반 (적색)
   ============================================================ */
.mw-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-right: 6px;
}
.mw-badge--pass {
  background: #dcfce7;
  color: #16a34a;
  border: 1px solid #bbf7d0;
}
.mw-badge--fail {
  background: #fef2f2;
  color: #dc2626;
  border: 1px solid #fecaca;
}

/* ============================================================
   Inline Style Migration Utilities (v15.3 — Agent 16)
   사용처: 31건 calc inline style hardcoded 마이그레이션
   - PHP inline style 차단 mandate 정합 (TOP MANDATE)
   - reference markup 100% 정합 mandate 정합
   ============================================================ */

/* margin-top utilities (rem 기반) */
.module-calc-mt-sm { margin-top: 1.25rem; }
.module-calc-mt-md { margin-top: 1.5rem; }

/* margin shorthand (paragraph after heading 패턴) */
.module-calc-mt-tight { margin: 6px 0 0; }

/* list reset (info-box ul / 일반 ul 패턴) */
.module-calc-list-flat {
  margin: 0;
  padding-left: 18px;
}
.module-calc-list-flat--rem {
  margin: 0;
  padding-left: 1.25rem;
}
.module-calc-list-flat--rem-mt {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}
.module-calc-list-flat--tight {
  margin: 6px 0 0;
  padding-left: 18px;
}

/* longtail spacer (h2/h3 직후 hub-nav / divider wrapper 패턴) */
.module-calc-spacer-block {
  margin: 24px 0 36px;
}

/* longtail back-to-calc — sections 사이 변형 (margin/padding override) */
.module-cta--back-inset {
  margin: 36px 0 16px;
  padding: 12px 0;
}

/* donut chart wrapper margin */
.module-calc-donut-wrap--my {
  margin: 24px 0;
}

/* flex row inline (small button group 패턴) */
.module-calc-flex-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* info-box example heading reset (h4 first child) */
.module-info-box__heading {
  margin-top: 0;
}
.module-info-box__body {
  margin-bottom: 0;
}

/* ============================================================
   v15.4 — Agent 12 추가 utility (17 file × 21건 inline style 정합)
   `.module-info-box--calc__list` = `.module-calc-list-flat--tight` (이미 존재) 영역 영역 — 중복 제거
   ============================================================ */

/* equal-flex (button row 안 동일 너비) — va-disability-rating add/remove 버튼 */
.module-calc-flex-1 { flex: 1; }

/* ============================================================
   TIMELINE BLOCK (v15.42 — 신규 모듈 timeline.php SSOT)
   3-mode (vertical/horizontal/compact) + semantic tag 색
   + highlight 자동 (today 기준) + Tier 1 출처 인라인 + Schema.org JSON-LD
   ============================================================ */
/* v15.61 (사용자 mandate "모바일 우측 빈 여백 + 가로 스크롤 발생"):
   root cause = .timeline-event--highlight::before 영영구 right: -16px → viewport 우측 영영구
   overflow-x: clip 영영구 가로 스크롤 차단 (sticky positioning 정합 — hidden 영영구 sticky 깨짐) */
.module-timeline {
    margin: 16px 0;
    overflow-x: clip;
}
/* v15.77 (2026-05-24 사용자 영구 push) — S급 시각화 사실 (icon + gradient + border-left accent)
   v15.79 (2026-05-24 전 팀 분석 사실) — 22px → 20px (H2 24px × 1/1.2 = Material Design 정합 사실) */
.module-timeline__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 24px;
    padding: 14px 18px 14px 56px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #1a73e8) 8%, transparent), transparent 70%);
    border-left: 4px solid var(--color-primary, #1a73e8);
    border-radius: 8px;
    position: relative;
    line-height: 1.3;
}
.module-timeline__title::before {
    content: '📅';
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 26px;
    line-height: 1;
}

/* Vertical mode (default — events ≥ 6 또는 모바일)
   v15.49 (사용자 mandate "content 영역도 marker만큼 우측 이동 — marker와 content 간격 정합"):
   padding-left 32 → 48px → content 시작 = 부모 + 48px (marker 우측 + 20px 간격)
   세로선 위치 (left: 13px) + marker 위치 (left: -48px) 동기 조정 → marker 위치 유지
   v15.75 (2026-05-24 사용자 영구 push) — S급 시각화 (Material Design + GitHub 정합 사실)
   gradient line + card content + hover effect + marker glow 사실 추가 */
.module-timeline--vertical .timeline-events {
    position: relative;
    padding-left: 48px;
}
.module-timeline--vertical .timeline-events::before {
    content: '';
    position: absolute;
    top: 14px;
    bottom: 14px;
    left: 13px;
    width: 3px;
    background: linear-gradient(180deg, var(--color-primary, #1a73e8) 0%, color-mix(in srgb, var(--color-primary, #1a73e8) 30%, transparent) 100%);
    border-radius: 2px;
}
/* S급 card content (Material Design + Tailwind 정합) */
.module-timeline--vertical .module-timeline__content {
    background: #fff;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
}
.module-timeline--vertical .timeline-event:hover .module-timeline__content {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
    border-color: color-mix(in srgb, var(--color-primary, #1a73e8) 30%, var(--color-border, #e5e7eb));
}
/* card arrow (왼쪽 marker 방향 화살표) */
.module-timeline--vertical .module-timeline__content::before {
    content: '';
    position: absolute;
    top: 14px;
    left: -8px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid var(--color-border, #e5e7eb);
}
.module-timeline--vertical .module-timeline__content::after {
    content: '';
    position: absolute;
    top: 14px;
    left: -7px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #fff;
}
/* v15.67 (사용자 결정 "16px vs 20px → 20px"):
   padding-bottom: 16 → 20px (가독성 우선 — 긴 desc 정합 + Tailwind/Material 표준 중간값) */
.module-timeline--vertical .timeline-event {
    position: relative;
    padding-bottom: 20px;
}
.module-timeline--vertical .timeline-event:last-child {
    padding-bottom: 0;
}
/* v15.78 (2026-05-24 사용자 영구 push) — 마지막 event 사실 사후 세로선 사실 차단 사실
   사유: parent .timeline-events::before (top:14px ~ bottom:14px) 사실 = 마지막 marker 사실 사후 사실 = 잔존 사실
   해결: 마지막 event 사실 안 ::after 사실 = 흰색 mask 사실 사용 본문 사실 (marker bottom 사실 사후 사실 ~ parent 끝 사실) */
.module-timeline--vertical .timeline-event:last-child::after {
    content: '';
    position: absolute;
    top: 32px;       /* marker top:4 + height:28 = 32 사후 사실 */
    bottom: -14px;   /* parent .timeline-events::before bottom:14 사실 cover */
    left: -35px;     /* parent padding-left:48 - line left:13 = 35 사실 */
    width: 3px;
    background: #fff;
    z-index: 1;
}
/* v15.49 (사용자 mandate "content 영역 우측 이동 — marker 위치 유지"):
   padding-left 32 → 48 → marker left -32 → -48 동기 조정 (marker 위치 부모 + 0 유지) */
.module-timeline--vertical .timeline-marker {
    position: absolute;
    left: -48px;
    top: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px var(--color-border);
}
/* v15.55 (사용자 mandate "내부 하단 여백을 상단 여백처럼 줘"):
   highlight ::before bottom: -12px → background가 content 하단까지 확장
   상단 여백 (padding-top 12px) + 하단 여백 (::before bottom -12px = background 12px 추가 확장)
   결과: 박스 안 상단 12px + 하단 12px 동일 여백 정합 */
.module-timeline--vertical .timeline-event--highlight {
    position: relative;
    padding: 12px 0;
    border-radius: var(--color-radius-sm);
}
.module-timeline--vertical .timeline-event--highlight::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: -10px;
    left: -16px;
    right: -16px;
    background: var(--color-bg-subtle);
    border-radius: var(--color-radius-sm);
    z-index: -1;
}

/* Horizontal mode (events 3-5 + 데스크톱 — stepper 형) */
.module-timeline--horizontal .timeline-events {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.module-timeline--horizontal .timeline-event {
    flex: 1;
    min-width: 180px;
    position: relative;
    padding-top: 44px;
}
.module-timeline--horizontal .timeline-marker {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}
.module-timeline--horizontal .module-timeline__content {
    text-align: center;
}
.module-timeline--horizontal .timeline-event--highlight {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-primary);
    border-radius: var(--color-radius-sm);
    padding: 44px 12px 12px;
}

/* Compact mode (print/AEO 친화 — dl 형) */
.module-timeline--compact .timeline-events {
    margin: 0;
    padding: 0;
}
.module-timeline--compact .timeline-event {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}
.module-timeline--compact .timeline-event:last-child {
    border-bottom: none;
}
.module-timeline--compact .timeline-marker {
    display: none;
}
.module-timeline--compact .timeline-event--highlight {
    background: var(--color-bg-subtle);
    border-left: 4px solid var(--color-primary);
    padding-left: 12px;
}

/* Common */
.timeline-event {
    position: relative;
}
/* v15.68 (사용자 결정 "13px vs 15px → 15px"):
   font-size: 13 → 15px (timeline 핵심 정보 — 시간 인지 강조 + title 16px 대비 위계 유지) */
.module-timeline__date {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.timeline-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 6px;
    line-height: 1.4;
}
.timeline-title a {
    color: var(--color-primary);
    text-decoration: none;
}
.timeline-title a:hover {
    text-decoration: underline;
}
.module-timeline__desc {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0 0 8px;
}
.module-timeline__desc:last-child {
    margin-bottom: 0;
}

/* Sources (Tier 1 출처 인라인 — 이벤트별 출처 link) */
.timeline-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 6px;
    font-size: 13px;
}
/* v15.60 (사용자 mandate "S급 default 채택 — pill 배지"):
   base 스타일 = pill 배지 (Stripe/Linear 패턴) — modifier 영영구 영영구 → 영영구 적용
   span (URL 부재) → plain text 영영구 / a (URL 영영구) → pill 배지 (옅은 파랑 + 호버 짙음)
   hover preview 영영구 영영구 (.timeline-source__preview 영영구 영영구) */
.timeline-source {
    color: var(--color-text-secondary);
}
a.timeline-source {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 4px;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    position: relative;
}
a.timeline-source:hover {
    background: rgba(59, 130, 246, 0.15);
    color: var(--color-primary-dark);
}

/* v15.52 — timeline-source 5 옵션 modifier (test verify 영영구 — 사용자 결정 후 1개 채택) */

/* 옵션 A — 외부 링크 아이콘 (Apple/Google 패턴) */
a.timeline-source--icon::after {
    content: ' ↗';
    font-size: 0.85em;
    opacity: 0.7;
    margin-left: 2px;
}

/* 옵션 B — Pill/Tag 배지 (Stripe/Linear 패턴) */
a.timeline-source--pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 4px;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
}
a.timeline-source--pill:hover {
    background: rgba(59, 130, 246, 0.15);
    text-decoration: none;
    text-decoration-thickness: initial;
}

/* 옵션 C — Dot marker + underline (구조 강조) */
a.timeline-source--dot::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--color-primary);
    margin-right: 6px;
    vertical-align: middle;
}

/* 옵션 D — Wavy underline (현대 트렌드) */
a.timeline-source--wavy {
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

/* 옵션 E — Material 화살표 + hover 애니메이션 */
a.timeline-source--material::after {
    content: ' →';
    margin-left: 4px;
    transition: transform 0.2s;
    display: inline-block;
}
a.timeline-source--material:hover::after {
    transform: translateX(3px);
}

/* ============================================================
   TIMELINE S급 5 옵션 (v15.53 — 디자인 사이트 리서치 결과 통합)
   1. Schema.org 강화 (CSS 부재)
   2. Scroll-driven fade-in animation
   3. Hover card preview (출처 미리보기)
   4. Sticky year headers
   5. Accordion (hover 시 desc 확장)
   ============================================================ */

/* 옵션 2 — Scroll-driven fade-in animation (Intersection Observer + NoScript fallback)
   v15.54 — html.no-js fallback 추가 (JS 미실행 환경 영영구 영영구 영영구)
   v15.73 (2026-05-24 사용자 영구 push) — default visible 사실 (opacity:0 → opacity:1)
   사유: dacalc 안 timeline 사실 사이트 사용 본문 부재 사실 = 검증 부재 사실 + 시세 사이트 안 JS 실행 부재 사실 = 영구 hidden 결함 사실 차단 의무
   .is-visible class 사실 = JS 사후 add 사실 (보존 — 기존 사용 본문) */
.timeline-event {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.timeline-event.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .timeline-event {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* NoScript / JS 미실행 fallback — 영구 hidden 차단 */
html.no-js .timeline-event,
.no-js .timeline-event {
    opacity: 1;
    transform: none;
}

/* 옵션 3 — Hover card preview (출처 미리보기 — Tier 1 출처 신뢰성) */
a.timeline-source {
    position: relative;
}
.timeline-source__preview {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    padding: 10px 14px;
    background: #1f2937;
    color: #fff;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    width: max-content;
    max-width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    z-index: 100;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-decoration: none;
}
.timeline-source__preview::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 16px;
    border: 5px solid transparent;
    border-top-color: #1f2937;
}
a.timeline-source:hover .timeline-source__preview,
a.timeline-source:focus .timeline-source__preview {
    opacity: 1;
    visibility: visible;
}
/* v15.62 (사용자 mandate "모바일 preview 깨져 노출 — 영영구 영영구"):
   v15.54 영영구 모바일 인라인 노출은 a.timeline-source 영영구 inline-flex (v15.60) 영영구 wrap 깨짐
   정정: 모바일 영영구 hover preview 영영구 (KISS — 정보 영영구 영영구 영영구)
   a11y 정합: aria-label 영영구 영영구 → 스크린 리더 정합 영영구 */
@media (hover: none) {
    .timeline-source__preview {
        display: none;
    }
}

/* 옵션 4 — Sticky year headers (긴 timeline — group_by_year)
   v15.54 — top 값 CSS 변수화 (--color-sticky-top default 60px — 사이트별 override) */
:root {
    --color-sticky-top: 60px;
}
/* v15.63 (사용자 mandate "연도 배지 sticky 영영구 영영구"):
   position: sticky 영영구 — 일반 inline 배지 (스크롤 시 따라가지 않음)
   top / z-index / --color-sticky-top 변수 영영구 영영구 영영구 영영구 */
.module-timeline--grouped .timeline-year {
    margin: 10px 0 8px;
    padding: 6px 14px;
    background: var(--color-bg-subtle);
    border-radius: var(--color-radius-sm);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    width: fit-content;
    border: 1px solid var(--color-border);
}
.module-timeline--grouped .timeline-year:first-child {
    margin-top: 0;
}

/* v15.54 — 옵션 5 (Accordion / expandable) 폐기 (3 Agent 만장일치 권장):
   - 모바일 hover 부재 → desc 영구 truncate (사용자 정확 지적)
   - a11y WCAG 1.4.4 위반 (시각/청각 사용자 정보 불일치)
   - 2026 트렌드 역행 (Material 3 / Linear / Vercel 모두 hover-only deprecated)
   복원 시 click-toggle + aria-expanded 패턴 재설계 의무 */

/* Highlight badge (현재 / 예정) */
.module-timeline__badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 8px;
    color: #fff;
    vertical-align: middle;
}
.module-timeline__badge--current {
    background: #059669;
}
.module-timeline__badge--upcoming {
    background: #f59e0b;
}

/* Semantic tag colors (marker background)
   v15.74 (2026-05-24 사용자 영구 push) — specificity 강화 사실
   사유: .module-timeline--horizontal .timeline-marker (0,2,0) > .timeline-marker--{tag} (0,1,0)
         → background override 부재 사실 = invisible marker 결함 사실
   정석 사실: .timeline-marker.timeline-marker--{tag} (0,2,0 specificity) = 동일 사실 + 마지막 정의 적용 사실 */
.timeline-marker.timeline-marker--milestone {
    background: #3b82f6;  /* 파랑 — 법 시행 / 정책 도입 */
}
.timeline-marker.timeline-marker--revision {
    background: #8b5cf6;  /* 보라 — 개정 / 연장 */
}
.timeline-marker.timeline-marker--warning {
    background: #f59e0b;  /* 주황 — 사건 / 피해 */
}
.timeline-marker.timeline-marker--event {
    background: #94a3b8;  /* 회색 — 일반 사건 (default) */
}

/* Mobile responsive */
@media (max-width: 640px) {
    .module-timeline--horizontal .timeline-events {
        flex-direction: column;
    }
    .module-timeline--horizontal .timeline-event {
        padding-top: 0;
        padding-left: 44px;
        text-align: left;
    }
    .module-timeline--horizontal .timeline-marker {
        top: 4px;
        left: 0;
        transform: none;
    }
    .module-timeline--horizontal .module-timeline__content {
        text-align: left;
    }
    .module-timeline--horizontal .timeline-event--highlight {
        padding: 12px 12px 12px 56px;
    }
    .module-timeline--compact .timeline-event {
        grid-template-columns: 100px 1fr;
        gap: 8px;
    }
}



/* ═══════════════════════════════════════════════════════════════════ */
/* v15.194 (2026-05-16) — comparison.php 모듈 (4세대 framework 신규)   */
/* 본질: 비교 시각 효과 (A vs B / dacalc vs 경쟁사)                     */
/* ═══════════════════════════════════════════════════════════════════ */
.module-comparison {
    margin: 32px 0;
}
.module-comparison .comparison-intro {
    margin: 8px 0 16px;
    color: var(--color-text-muted, #555);
    font-size: 16px;
}
/* [2026-06-05] 비교표는 표준 .module-table CSS 를 그대로 재사용한다.
   렌더러(comparison.php)가 <table class="module-table"> 를 출력하므로
   여기에는 comparison 고유 요소(컨테이너 margin · intro · verdict · cta)만 둔다. */
.comparison-verdict {
    margin: 16px 0;
    padding: 12px 16px;
    background: var(--color-bg-info, #e3f2fd);
    border-left: 4px solid var(--color-info, #1976d2);
    border-radius: 4px;
    font-size: 16px;
}
.module-comparison__cta {
    margin: 16px 0 0;
    text-align: center;
}
.module-comparison__cta__btn {
    /* 표준 module-cta--xl 사양 준용 + 전폭(사용자 확정 2026-07-04 — 비교 후 행동 버튼은
       최대 시인성·엄지 타겟. 모듈 레벨 통일 = 전 comparison CTA 동일 적용) */
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 18px 40px;
    font-size: 24px;
    font-weight: 700;
    min-height: 70px;
    background: var(--color-primary, #0066cc);
    color: #fff !important;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.2s ease;
}
.module-comparison__cta__btn:hover {
    background: var(--color-primary-hover, #0052a3);
}

/* sources.php 보강 — Updated date + pages 영역 (v15.194 — 4세대 framework) */
.module-sources__updated {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    background: var(--color-bg-light, #f7f8fa);
    color: var(--color-text-muted, #666);
    font-size: 13px;
    border-radius: 3px;
}
.module-sources__pages {
    display: inline-block;
    margin-left: 6px;
    color: var(--color-text-muted, #888);
    font-size: 13px;
    font-style: italic;
}

/* 모바일 영역 (표는 표준 .module-table 모바일 처리에 위임) */
@media (max-width: 640px) {
    .module-comparison__cta__btn {
        display: block;
        text-align: center;
    }
}


/* ═══════════════════════════════════════════════════════════════════ */
/* v15.195 (2026-05-16) — Phase 2 확장 6 모듈 (4세대 framework 범용)   */
/* qr-code + download + pdf + player + tts + canvas                     */
/* ═══════════════════════════════════════════════════════════════════ */

/* ── module-qr-code ── */
.module-qr-code {
    margin: 24px 0;
}
.module-qr-code--left   { text-align: left; }
.module-qr-code--center { text-align: center; }
.module-qr-code--right  { text-align: right; }
.qr-code__title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
}
.module-qr-code__img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 6px;
    padding: 8px;
    background: #fff;
}
.module-qr-code__caption {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--color-text-muted, #666);
}

/* ── module-download ── */
.module-download {
    margin: 32px 0;
}
.download__intro {
    margin: 8px 0 16px;
    color: var(--color-text-muted, #555);
}
.module-download--list .module-download__items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.module-download--grid .module-download__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.module-download__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg-light, #f7f8fa);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 6px;
    color: var(--color-text, #222) !important;
    text-decoration: none !important;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.module-download__item:hover {
    background: var(--color-bg-hover, #eef2f7);
    border-color: var(--color-primary, #0066cc);
}
.module-download__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: var(--color-bg-icon, #e0e7f0) center / 60% no-repeat;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 12px;
    color: var(--color-text-muted, #666);
}
.module-download__icon--pdf::before  { content: 'PDF'; }
.module-download__icon--mp3::before  { content: 'MP3'; }
.module-download__icon--mp4::before  { content: 'MP4'; }
.module-download__icon--jpg::before  { content: 'JPG'; }
.module-download__icon--png::before  { content: 'PNG'; }
.module-download__icon--csv::before  { content: 'CSV'; }
.module-download__icon--xlsx::before { content: 'XLS'; }
.module-download__icon--docx::before { content: 'DOC'; }
.module-download__icon--zip::before  { content: 'ZIP'; }
.module-download__icon--other::before { content: 'FILE'; }
.module-download__meta {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.module-download__name {
    font-weight: 600;
    word-break: break-word;
}
.module-download__size {
    font-size: 13px;
    color: var(--color-text-muted, #888);
}
.module-download__desc {
    font-size: 14px;
    color: var(--color-text-muted, #666);
}
.module-download__arrow {
    flex-shrink: 0;
    font-size: 18px;
    color: var(--color-primary, #0066cc);
}

/* ── module-pdf ── */
.module-pdf {
    margin: 32px 0;
}
.pdf__caption {
    margin: 8px 0 12px;
    color: var(--color-text-muted, #666);
}
.module-pdf__embed-wrap {
    width: 100%;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 6px;
    overflow: hidden;
    background: #f5f5f5;
}
.module-pdf__embed {
    display: block;
    width: 100%;
    border: 0;
}
.module-pdf__actions {
    margin: 12px 0 0;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.module-pdf__download-link,
.module-pdf__open-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 14px;
    background: var(--color-bg-light, #f7f8fa);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    color: var(--color-text, #222) !important;
    text-decoration: none !important;
    font-size: 14px;
    transition: background 0.15s ease;
}
.module-pdf__download-link:hover,
.module-pdf__open-link:hover {
    background: var(--color-bg-hover, #eef2f7);
}

/* ── module-player ── */
.module-player {
    margin: 24px 0;
}
.player__title {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 600;
}
.module-player__media {
    width: 100%;
}
.module-player__audio {
    width: 100%;
    max-width: 600px;
}
.module-player__youtube-wrap {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 6px;
    background: #000;
}
.module-player__youtube {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.module-player__video {
    width: 100%;
    max-width: 100%;
    border-radius: 6px;
    background: #000;
}
.module-player__caption {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--color-text-muted, #666);
}

/* ── module-tts (KoreanSheets 한정 — 인라인 ▶ button) ── */
.module-tts--inline {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    line-height: 1.4;
}
.module-tts--block {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}
.module-tts__text {
    font-weight: 500;
}
.module-tts__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    background: var(--color-bg-icon, #e0e7f0);
    border: 1px solid var(--color-border, #c0d0e0);
    border-radius: 50%;
    color: var(--color-primary, #0066cc);
    cursor: pointer;
    font-size: 10px;
    line-height: 1;
    transition: background 0.15s ease, transform 0.1s ease;
}
.module-tts__btn:hover {
    background: var(--color-primary, #0066cc);
    color: #fff;
}
.module-tts__btn:active {
    transform: scale(0.92);
}

/* ── module-canvas (KoreanSheets 한정 — 한글 자모음 그리기) ── */
.module-canvas {
    margin: 24px 0;
}
.canvas__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 600;
}
.module-canvas__wrap {
    position: relative;
    max-width: 100%;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
}
.module-canvas__guide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.25;
    pointer-events: none;
    user-select: none;
}
.module-canvas__cv {
    position: relative;
    display: block;
    max-width: 100%;
    touch-action: none;
    cursor: crosshair;
    background: transparent;
}
.module-canvas__controls {
    margin: 8px 0 0;
    display: flex;
    gap: 8px;
}
.module-canvas__btn {
    padding: 6px 14px;
    background: var(--color-bg-light, #f7f8fa);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    color: var(--color-text, #222);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s ease;
}
.module-canvas__btn:hover {
    background: var(--color-bg-hover, #eef2f7);
}
.module-canvas__caption {
    margin: 8px 0 0;
    font-size: 14px;
    color: var(--color-text-muted, #666);
}

/* 모바일 영역 (Phase 2 확장) */
@media (max-width: 640px) {
    .module-download--grid .module-download__items {
        grid-template-columns: 1fr;
    }
    .module-pdf__embed {
        min-height: 400px;
    }
    .module-pdf__actions {
        flex-direction: column;
    }
    .module-pdf__download-link,
    .module-pdf__open-link {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════════════════
   v15.80 (2026-05-25 사용자 push) — .module-title CSS 정의 추가
   사유: 4 모듈 (core-facts, sources, hub-nav, faq) 안 `<h3 class="module-title">` 사용
        CSS 정의 부재 = WordPress 기본 H3 적용 결함 = 사용자 라이브 검수 발견
   양식: timeline-block__title 정합 (20px·gradient·border-left·padding)
   ═══════════════════════════════════════════════════════════════ */
.module-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 32px 0 20px;
    padding: 14px 18px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary, #1a73e8) 8%, transparent), transparent 70%);
    border-left: 4px solid var(--color-primary, #1a73e8);
    border-radius: 8px;
    line-height: 1.3;
}
.module-title:first-child {
    margin-top: 0;
}

/*═══════════════════════════════════════════════════════════════
  ㉚ stat-card SSOT (2026-06-05 통합) — components.css에서 이동.
  그라데이션 배경 + shine + 떠오름 호버 보존. 파일 끝 배치 = modules.css 내
  다른 stat-card 규칙(__value 등)에 안 덮이도록(로드 순서 최후 = 기존 components 위치 재현).
═══════════════════════════════════════════════════════════════*/
.module-stat-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-radius: 12px;
    padding: 24px;  /* v14.50 (2026-05-09, 사용자 mandate "padding 통일"): stat/result 일관 24px */
    text-align: center;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.12);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    /* v14.47 (사용자 mandate "같은 행 카드 길이 맞춤"): grid stretch */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* v14.49 (사용자 mandate ".module-related-card__icon 동일 사이즈"): 36px + 10px margin-bottom */
.module-stat-card__icon {
    font-size: 36px;
    line-height: 1;
    margin-bottom: 10px;
    text-align: center;
}

.module-stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.2);
}

.module-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(79, 70, 229, 0.1), transparent);
    transition: all 0.8s ease;
}

.module-stat-card:hover::before {
    left: 100%;
}

a.module-stat-card:focus-visible {
    outline: 2px solid var(--color-primary, #1a73e8);
    outline-offset: -2px;
}

/* 사용자 영구 mandate (2026-05-27): card-grid 안 link 양식 underline 제거 + 색상 정합 */
a.module-stat-card, a.module-result-card, a.module-method-card,
.module-stat-card--link, .module-result-card--link, .module-method-card--link {
    text-decoration: none;
    color: inherit;
}
a.module-stat-card:hover, a.module-result-card:hover, a.module-method-card:hover,
.module-stat-card--link:hover, .module-result-card--link:hover, .module-method-card--link:hover {
    text-decoration: none;
    color: inherit;
}
.module-stat-card__title, .module-result-card__title, .module-method-card__title {
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
    color: #1a73e8;
}

.module-stat-card__number,
.module-stat-card__value {
    display: block;
    font-size: 2.5rem;
    font-weight: 900;
    margin-bottom: 8px;
    color: #4F46E5;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.module-stat-card__label {
    font-size: 1rem;
    font-weight: 700;
    color: #6c757d;
    margin-bottom: 4px;
    display: block;
}

.module-stat-card__desc {
    font-size: 1rem;
    color: #4b5563;
    display: block;
}

/* Stat card color variants */
.module-stat-card--top {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-top: 4px solid #4F46E5;
    box-shadow: 0 4px 20px rgba(79, 70, 229, 0.12);
}

.module-stat-card--top:hover {
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.3);
}

.module-stat-card--gold {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border-top: 3px solid #d97706;
}
.module-stat-card--silver {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-top: 3px solid #64748b;
}
/* CHANGE2MODE(2026-06-21): --gray = 보합/중립 카드(전엔 CSS 부재로 색 미적용·잠재버그). 보합색(.chg-flat #64748b)과 통일. */
.module-stat-card--gray {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-top: 3px solid #64748b;
}
.module-stat-card--red {
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-top: 3px solid #dc2626;
}
.module-stat-card--orange {
    background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
    border-top: 3px solid #ea580c;
}
.module-stat-card--blue {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
    border-top: 3px solid #2563eb;
}
.module-stat-card--purple {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
    border-top: 3px solid #9333ea;
}
.module-stat-card--green {
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border-top: 3px solid #059669;
}

/* Stat card 숫자(__value)를 카드 색에 맞춰 — 복합 선택자(0,2,0)라 components.css 단일 규칙(0,1,0)을 이김 */
.module-stat-card--red    .module-stat-card__value { color: #dc2626; }
.module-stat-card--blue   .module-stat-card__value { color: #2563eb; }
.module-stat-card--gold   .module-stat-card__value { color: #d97706; }
.module-stat-card--green  .module-stat-card__value { color: #059669; }
.module-stat-card--orange .module-stat-card__value { color: #ea580c; }
.module-stat-card--silver .module-stat-card__value { color: #475569; }
.module-stat-card--gray   .module-stat-card__value { color: #475569; }   /* CHANGE2MODE(2026-06-21): 보합/중립 카드 값 색 */
.module-stat-card--purple .module-stat-card__value { color: #9333ea; }

/* 차트 호버 크로스헤어·툴팁 (진보적 향상 — JS off여도 SVG·데이터표 정상) */
.module-chart { position: relative; }
.module-chart__svg[data-points] { cursor: crosshair; }
.module-chart__crosshair { stroke: #94a3b8; stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.module-chart__hoverdot { fill: #1d4ed8; stroke: #fff; stroke-width: 1.5; pointer-events: none; }
.module-chart__tip { position: absolute; top: 32px; transform: translateX(-50%); display: none; flex-direction: column; gap: 2px; min-width: 84px; background: rgba(17, 24, 39, .92); color: #fff; font-size: 12px; line-height: 1.5; padding: 7px 10px; border-radius: 7px; text-align: left; pointer-events: none; white-space: nowrap; z-index: 6; }
.module-chart__tip:not([hidden]) { display: flex; }   /* hidden 속성으로 토글 — 멀티라인 세로 스택 */
.module-chart__tip strong { color: #fbbf24; margin-bottom: 1px; }
.module-chart__tip-row { font-variant-numeric: tabular-nums; opacity: .95; }

/* R36: chart 기법 6종 — 밴드 호버·포인트 라벨·기준선·구간 음영 */
.module-chart__band { cursor: crosshair; transition: fill .1s; }
.module-chart__band:hover { fill: rgba(99,102,241,.07); }
.module-chart__plabel { font-size: 10px; fill: #475569; }
.module-chart__baseline { stroke: #cbd5e1; stroke-width: 1; stroke-dasharray: 5,4; opacity: .8; }

/* Stat card shine effect */
.module-stat-card.shine::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: stat-shine 3s ease-in-out infinite;
}
@keyframes stat-shine {
    0% { left: -100%; }
    50%, 100% { left: 150%; }
}

@media (max-width: 480px) {
    .module-stat-card__number {
        font-size: 2rem;
    }
}

/*═══════════════════════════════════════════════════════════════
  ㉘ cta SSOT (2026-06-05 통합) — components.css에서 이동.
  cta.php 모듈 + highlight.php가 품는 cta 모두 이 한 곳이 단일 소스.
  파일 끝 배치 = 로드 최후(기존 components 위치 재현) → 현재 모습 그대로 유지.
  highlight 자체 스타일(설명·목록·제목)은 components.css에 유지(별개 모듈).
═══════════════════════════════════════════════════════════════*/

/* ---- CTA Arrow — JS(wrapCtaArrows)가 .cta-arrow span 주입 ---- */
.cta-arrow {
    display: inline-block;
    margin-left: 0.4em;
    font-weight: 700;
    animation: cta-arrow-bob 1.4s ease-in-out infinite;
    will-change: transform;
    line-height: 1;
}
@keyframes cta-arrow-bob {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(6px); }
}
.module-cta[href]:hover .cta-arrow,
.module-cta--back a:hover .cta-arrow,
.module-content .module-cta--back a:hover .cta-arrow {
    animation-duration: 0.9s;
    animation-name: cta-arrow-bob-hover;
}
@keyframes cta-arrow-bob-hover {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(10px); }
}
@media (prefers-reduced-motion: reduce) {
    .cta-arrow {
        animation: none !important;
    }
}

/* ---- CTA Button System ---- */
.module-cta {
    position: relative;
    overflow: hidden;
    display: inline-block;
    color: white;
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 8px;
    font-weight: bold;
    font-size: 18px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    /* 사용자 영구 mandate (2026-05-27): cta-button 사전·사후 여백 의무 */
    margin-top: 28px;
    margin-bottom: 28px;
}

.module-cta--large {
    padding: 18px 32px;
    font-size: 20px;
    font-weight: 700;
    min-height: 60px;
}

.module-cta--xl {
    padding: 18px 40px;
    font-size: 24px;
    font-weight: 700;
    min-height: 70px;
}

.module-cta--hero {
    padding: 18px 48px;
    font-size: 28px;
    font-weight: 800;
    min-height: 80px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.module-cta--hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.module-cta + .module-cta,
.module-cta--large + .module-cta--large,
.module-cta--xl + .module-cta--xl,
.module-cta--hero + .module-cta--hero {
    margin-top: 12px;
}

/* Shine sweep on hover */
.module-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient(115deg, transparent 0%, rgba(30, 64, 175, 0.15) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
    z-index: 1;
}
.module-cta:hover::before { left: 120%; }
.module-cta > * { position: relative; z-index: 2; }

/* 기본 fallback hover (color variant 없을 때) */
.module-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .module-cta,
    .module-cta--large,
    .module-cta--xl,
    .module-cta--hero {
        width: 100%;
    }

    .module-cta + .module-cta,
    .module-cta--large + .module-cta--large,
    .module-cta--xl + .module-cta--xl,
    .module-cta--hero + .module-cta--hero {
        margin-top: 12px;
    }
}

/* ---- CTA Color Variants (일반 영역 = 그라데이션 배경 + 글자 화이트) ---- */
.module-cta--red {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.module-cta--red:hover {
    background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(220, 38, 38, 0.45);
}

.module-cta--blue {
    background: linear-gradient(135deg, #3b82f6, #1e40af) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.module-cta--blue:hover {
    background: linear-gradient(135deg, #2563eb, #1e3a8a) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(30, 64, 175, 0.45);
}

.module-cta--green {
    background: linear-gradient(135deg, #1e7e34, #155d27) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.module-cta--green:hover {
    background: linear-gradient(135deg, #155d27, #14532d) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(22, 101, 52, 0.45);
}

.module-cta--purple {
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: #fff !important;
    font-weight: 700 !important;
}
.module-cta--purple:hover {
    background: linear-gradient(135deg, #5b6fd6, #6a4290) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(124, 58, 237, 0.45);
}

/* ---- Highlight 블록 안 CTA = 배경 화이트 + 글자 색상 (override) ---- */
.module-highlight .module-cta--red {
    background: #fff !important;
    color: #dc2626 !important;
    border: 2px solid #dc2626 !important;
}
.module-highlight .module-cta--red:hover {
    background: #fff !important;
    color: #dc2626 !important;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.45),
        0 10px 28px rgba(220, 38, 38, 0.32);
}

.module-highlight .module-cta--blue {
    background: #fff !important;
    color: #1e40af !important;
    border: 2px solid #1e40af !important;
}
.module-highlight .module-cta--blue:hover {
    background: #fff !important;
    color: #1e40af !important;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.45),
        0 10px 28px rgba(30, 64, 175, 0.32);
}

.module-highlight .module-cta--green {
    background: #fff !important;
    color: #166534 !important;
    border: 2px solid #166534 !important;
}
.module-highlight .module-cta--green:hover {
    background: #fff !important;
    color: #166534 !important;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.45),
        0 10px 28px rgba(22, 101, 52, 0.32);
}

.module-highlight .module-cta--purple {
    background: #fff !important;
    color: #7c3aed !important;
    border: 2px solid #7c3aed !important;
}
.module-highlight .module-cta--purple:hover {
    background: #fff !important;
    color: #7c3aed !important;
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.45),
        0 10px 28px rgba(124, 58, 237, 0.32);
}

/* ---- CTA 버튼 underline 차단 ---- */
a.module-cta,
a.module-cta:hover,
.module-content a.module-cta,
.module-content a.module-cta:hover,
.module-highlight a.module-cta,
.module-highlight a.module-cta:hover,
.module-content .module-highlight a.module-cta:hover {
    text-decoration: none !important;
}

/* ---- Highlight 블록 CTA 버튼 override (padding 제거 — --large/--xl/--hero 승리) ---- */
.module-highlight .module-cta {
    display: block;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    box-sizing: border-box;
    margin-top: 12px;
}

.module-highlight .module-cta:hover {
    background: white !important;
    opacity: 1 !important;
    transform: translateY(-2px);
    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.55),
        0 12px 30px rgba(0, 0, 0, 0.35);
}

/* ---- CTA 글자색: highlight 그라데이션 배경별 ---- */
.module-highlight.bg-gradient-blue .module-cta { color: #2563eb !important; }
.module-highlight.bg-gradient-green .module-cta { color: #166534 !important; }
.module-highlight.bg-gradient-orange .module-cta { color: #92400e !important; }
.module-highlight.bg-gradient-purple .module-cta { color: #5b21b6 !important; }
.module-highlight.bg-gradient-red .module-cta { color: #991b1b !important; }
.module-highlight.bg-gradient-teal .module-cta { color: #0d9488 !important; }
.module-highlight.bg-gradient-gold .module-cta { color: #92400e !important; }
.module-highlight.bg-gradient-pink .module-cta { color: #db2777 !important; }
.module-highlight.bg-gradient-indigo .module-cta { color: #4338ca !important; }
.module-highlight.bg-gradient-violet .module-cta { color: #6d28d9 !important; }
.module-highlight.bg-gradient-cyan .module-cta { color: #0891b2 !important; }
.module-highlight.bg-gradient-brown .module-cta { color: #8b4513 !important; }

.module-highlight.bg-gradient-blue .module-cta:hover { color: #1d4ed8 !important; }
.module-highlight.bg-gradient-green .module-cta:hover { color: #059669 !important; }
.module-highlight.bg-gradient-orange .module-cta:hover { color: #78350f !important; }
.module-highlight.bg-gradient-purple .module-cta:hover { color: #4c1d95 !important; }
.module-highlight.bg-gradient-red .module-cta:hover { color: #dc2626 !important; }
.module-highlight.bg-gradient-teal .module-cta:hover { color: #0f766e !important; }
.module-highlight.bg-gradient-gold .module-cta:hover { color: #78350f !important; }
.module-highlight.bg-gradient-pink .module-cta:hover { color: #be185d !important; }
.module-highlight.bg-gradient-indigo .module-cta:hover { color: #3730a3 !important; }
.module-highlight.bg-gradient-violet .module-cta:hover { color: #5b21b6 !important; }
.module-highlight.bg-gradient-cyan .module-cta:hover { color: #0e7490 !important; }
.module-highlight.bg-gradient-brown .module-cta:hover { color: #6b3410 !important; }

/*═══════════════════════════════════════════════════════════════
  ⑤ highlight 자체 스타일 SSOT (2026-06-05 통합) — components.css에서 이동.
  highlight.php 출력: .module-highlight.bg-gradient-{theme} + __title + <p> + 내부 cta.
  배경은 .bg-gradient-* 유틸 클래스에서 옴. 파일 끝 배치 = 로드 최후(현재 모습 유지).
  ※ 앞쪽(288행대)·badge/savings subsystem의 .module-highlight 정의는 이 블록이 덮어
    현재 모습 유지. modules 내부 다중 base 정리는 별도 작업(subsystem 손상 위험).
═══════════════════════════════════════════════════════════════*/
.module-highlight {
    position: relative;
    color: white;
    border-radius: 12px;
    padding: 1.5rem 2rem 2rem;
    margin: 2rem 0;
    text-align: center;
    overflow: hidden;
    border-left: none !important;
}

.module-highlight .module-highlight__title,
.module-highlight p.module-highlight__title,
p.module-highlight__title {
    font-size: 1.5rem !important;
    font-weight: bold !important;
    margin: 0.5rem 0 1rem 0 !important;
    color: white !important;
    line-height: 1.3 !important;
}

.module-highlight__text {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.9) !important;
}

.module-highlight p,
.module-content .module-highlight p,
.entry-content .module-highlight p {
    color: white !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin: 0 0 1.5em !important;
}

.module-highlight__description {
    color: white !important;
    font-size: 1.05em;
    margin-bottom: 12px;
    font-weight: 600;
}

.module-highlight ul,
.entry-content .module-highlight ul,
body .module-highlight ul {
    text-align: left !important;
    margin: 24px 0 0 0 !important;
    padding-left: 0 !important;
    list-style-type: none !important;
    list-style: none !important;
}

.module-highlight ul li,
.entry-content .module-highlight ul li,
body .module-highlight ul li {
    list-style: none !important;
    list-style-type: none !important;
}

.module-highlight li {
    margin-bottom: 8px;
    color: inherit;
}

.module-highlight li:last-child {
    margin-bottom: 0;
}

.module-highlight strong + ul,
.module-highlight p + ul,
.entry-content .module-highlight strong + ul,
.entry-content .module-highlight p + ul {
    margin-top: 16px !important;
}

.module-highlight > strong,
.entry-content .module-highlight > strong {
    display: block;
    margin-bottom: 12px;
}

.module-highlight[class*="bg-gradient-"] a {
    color: #fff !important;
}
.module-highlight[class*="bg-gradient-"] a:hover {
    color: #fff !important;
    opacity: 0.9;
}

@media (max-width: 768px) {
    .module-highlight {
        padding: 1.5rem;
        margin: 1.5rem 0;
    }

    .module-highlight p.module-highlight__title,
    p.module-highlight__title {
        font-size: 1.25rem !important;
    }
}

/* dacalc citation-passage 반응형 (2026-06-07 — 위 .module-citation-passage 섹션 연관) */
@media (max-width: 600px) {
    .module-citation-passage__item { padding: 16px 18px; }
}

/* citation-passage 출처 링크 (공식 1차 출처 연결) */
.module-citation-passage__source a {
    color: #a16207;
    text-decoration: none;
    border-bottom: 1px dotted #a16207;
}
.module-citation-passage__source a:hover {
    border-bottom-style: solid;
}

/* region-select — 지역 순차 드롭다운 (시도→시군구, 정적 URL 이동) · 전 지역 아이템 공용 (2026-06-16) */
.module-region-select {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    margin: 20px 0;
    background: linear-gradient(0deg, #eff6ff, #f5faff);   /* 옅은 파랑 틴트 — 회색 대비 눈에 띔 */
    border: 2px solid var(--color-primary, #2563eb);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.10);
}
.module-region-select__label {
    flex: 1 0 100%;            /* B 스택 — 라벨을 항상 자체 줄(컨트롤 그룹 제목), 드롭다운은 아래 줄 */
    font-weight: 800;
    color: var(--color-primary, #1d4ed8);
    margin: 0 0 2px;
    font-size: 1.02rem;
}
.module-region-select__label::before {
    content: "📍 ";
}
.module-region-select select {
    flex: 1 1 160px;
    min-width: 140px;
    padding: 10px 40px 10px 12px;   /* 우측 여백 = 커스텀 화살표 자리(화살표를 우측 끝에서 안쪽으로) */
    font-size: 1rem;
    color: var(--color-text, #1e293b);
    background-color: #fff;
    /* 커스텀 펼침 화살표(우측 끝이 아니라 14px 안쪽 배치) */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    border: 1px solid var(--color-border, #cbd5e1);
    border-radius: 8px;
    cursor: pointer;
}
.module-region-select select:focus {
    outline: 2px solid var(--color-primary, #2563eb);
    outline-offset: 1px;
}
@media (max-width: 600px) {
    .module-region-select { flex-direction: column; align-items: stretch; }
    .module-region-select select { flex: 1 1 auto; width: 100%; }
}


/* ==========================================================================
   MODOOCARD-PORT (모두의카드 발 범용 모듈 CSS 이식 · 2026-07-03 · 순수 append)
   포함: stat/result/method __go · card-product-grid(+featured 리본) · case-compare
   (base+tone+method-go/linked) · hero(+cta2) · bento(+__stats) · card-spotlight ·
   core-issuer-ico(+--txt) · module-table__ico-cell(+td:has 좌정렬) · notice 배너
   (--notice·imminent·CTA 전폭) · 흰 버튼 hover 색 고정 · md-top-posts 컴팩트.
   기존 셀렉터와 충돌 0(census 확인). 소스: modoocard modules.css L9301-9315 + L9904-10492.
   ========================================================================== */
/* 링크 카드 목적지 어포던스(사용자 실측 피드백 2026-07-03 "링크는 어떤 의도인지 매칭이 안돼")
   — 렌더러(_render_card_grid)가 link 존재 시 __go 라인 자동 출력·case-compare method-go와 동일 계열 */
.module-stat-card__go, .module-result-card__go, .module-method-card__go {
    margin-top: 8px; text-align: right;
    font-size: 12.5px; font-weight: 700; color: var(--color-primary-dark);
}
.module-stat-card__go::after, .module-result-card__go::after, .module-method-card__go::after {
    content: ' →'; display: inline-block; transition: transform .18s ease;
}
.module-stat-card--link:hover .module-stat-card__go::after,
.module-result-card--link:hover .module-result-card__go::after,
.module-method-card--link:hover .module-method-card__go::after { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
    .module-stat-card__go::after, .module-result-card__go::after, .module-method-card__go::after { transition: none; }
}


/* ==========================================================================
   CARD-PRODUCT-GRID (카드 상품 그리드 — korea-pass.kr 초월형·2026-07-02)
   필터 = CSS-only(라디오+형제 선택자·JS 0) · 이미지 lazy · 참고1.jpg 벤치마크
   ========================================================================== */
.module-card-product-grid { margin: 24px 0 32px; }
.module-card-product-grid__radio { position: absolute; opacity: 0; pointer-events: none; }
.module-card-product-grid__filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; }
.module-card-product-grid__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border: 1.5px solid var(--color-border);
  border-radius: 999px; background: #fff; cursor: pointer;
  font-size: 15px; font-weight: 600; color: var(--color-text-secondary);
  transition: all .15s ease; user-select: none;
}
.module-card-product-grid__chip:hover { border-color: var(--color-primary); color: var(--color-primary); }
.module-card-product-grid__chip-n { font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); background: var(--color-border-light); border-radius: 999px; padding: 1px 8px; }
/* 칩 활성(checked) 상태 */
.module-card-product-grid__radio--all:checked ~ .module-card-product-grid__filters .module-card-product-grid__chip--all,
.module-card-product-grid__radio--credit:checked ~ .module-card-product-grid__filters .module-card-product-grid__chip--credit,
.module-card-product-grid__radio--check:checked ~ .module-card-product-grid__filters .module-card-product-grid__chip--check,
.module-card-product-grid__radio--prepaid:checked ~ .module-card-product-grid__filters .module-card-product-grid__chip--prepaid,
.module-card-product-grid__radio--mobile:checked ~ .module-card-product-grid__filters .module-card-product-grid__chip--mobile {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.module-card-product-grid__radio--all:checked ~ .module-card-product-grid__filters .module-card-product-grid__chip--all .module-card-product-grid__chip-n,
.module-card-product-grid__radio--credit:checked ~ .module-card-product-grid__filters .module-card-product-grid__chip--credit .module-card-product-grid__chip-n,
.module-card-product-grid__radio--check:checked ~ .module-card-product-grid__filters .module-card-product-grid__chip--check .module-card-product-grid__chip-n,
.module-card-product-grid__radio--prepaid:checked ~ .module-card-product-grid__filters .module-card-product-grid__chip--prepaid .module-card-product-grid__chip-n,
.module-card-product-grid__radio--mobile:checked ~ .module-card-product-grid__filters .module-card-product-grid__chip--mobile .module-card-product-grid__chip-n {
  background: rgba(255,255,255,.25); color: #fff;
}
/* 유형 필터링(선택 유형 외 숨김) */
.module-card-product-grid__radio--credit:checked ~ .module-card-product-grid__grid .module-card-product-grid__item:not(.module-card-product-grid__item--credit),
.module-card-product-grid__radio--check:checked ~ .module-card-product-grid__grid .module-card-product-grid__item:not(.module-card-product-grid__item--check),
.module-card-product-grid__radio--prepaid:checked ~ .module-card-product-grid__grid .module-card-product-grid__item:not(.module-card-product-grid__item--prepaid),
.module-card-product-grid__radio--mobile:checked ~ .module-card-product-grid__grid .module-card-product-grid__item:not(.module-card-product-grid__item--mobile) { display: none; }

/* 인피드 광고 행(카드 every 장마다 — card-product-grid.php ads_every와 세트) */
.module-card-product-grid__ad-row { grid-column: 1 / -1; list-style: none; margin: 0; min-width: 0; }
/* 유형 필터 활성 시 인피드 전부 숨김 — 배수 위치는 전체 61장 기준이라 필터(4~29장)에선
   카드가 숨고 광고 행만 연속으로 몰림 → 전체 보기에서만 노출(CSS-only·JS 0) */
.module-card-product-grid__radio--credit:checked ~ .module-card-product-grid__grid .module-card-product-grid__ad-row,
.module-card-product-grid__radio--check:checked ~ .module-card-product-grid__grid .module-card-product-grid__ad-row,
.module-card-product-grid__radio--prepaid:checked ~ .module-card-product-grid__grid .module-card-product-grid__ad-row,
.module-card-product-grid__radio--mobile:checked ~ .module-card-product-grid__grid .module-card-product-grid__ad-row { display: none; }

.module-card-product-grid__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px;
}
.module-card-product-grid__item {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--color-border); border-radius: var(--color-radius-lg);
  background: #fff; box-shadow: var(--color-shadow-sm); overflow: hidden;
  transition: box-shadow .18s ease, transform .18s ease;
}
.module-card-product-grid__item:hover { box-shadow: var(--color-shadow-md); transform: translateY(-2px); }
.module-card-product-grid__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 18px 0; }
.module-card-product-grid__badge {
  display: inline-block; padding: 4px 12px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.2px;
}
.module-card-product-grid__badge--credit  { background: var(--color-primary-light); color: var(--color-primary-dark); }
.module-card-product-grid__badge--check   { background: #fdeef3; color: #c2185b; }
.module-card-product-grid__badge--prepaid { background: #e6f6ee; color: #0f7a4d; }
.module-card-product-grid__badge--mobile  { background: #f1e9fd; color: #6d28d9; }
.module-card-product-grid__name { margin: 0; font-size: 18px; font-weight: 800; color: var(--color-text-primary); line-height: 1.35; }
.module-card-product-grid__body { display: flex; gap: 16px; padding: 14px 18px 0; align-items: flex-start; }
.module-card-product-grid__img {
  /* 가로/세로 혼재 카드 이미지 시각 통일: 고정 박스 + 비율 유지(contain) — 2026-07-02 */
  flex: 0 0 auto; width: 110px; height: 150px; object-fit: contain; border-radius: 8px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
}
.module-card-product-grid__benefits { min-width: 0; }
.module-card-product-grid__benefits-title { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.module-card-product-grid__benefits-list { margin: 0; padding: 0; list-style: none; }
.module-card-product-grid__benefits-list li {
  position: relative; padding-left: 12px; margin: 0 0 4px;
  font-size: 14.5px; color: var(--color-text-body); line-height: 1.5;
}
.module-card-product-grid__benefits-list li::before { content: ''; position: absolute; left: 0; top: .62em; width: 4px; height: 4px; border-radius: 50%; background: var(--color-primary); }
.module-card-product-grid__hook {
  margin: 12px 18px 0; padding: 10px 14px; border-radius: var(--color-radius-sm);
  background: color-mix(in srgb, var(--color-primary) 6%, #fff);
  border-left: 3px solid var(--color-primary);
  font-size: 14px; font-weight: 600; color: var(--color-text-primary); line-height: 1.5;
}
/* CTA = 기본이 채움형(파랑 배경·흰 글자·눈에 띄게 — 사용자 확정 2026-07-02) */
.module-card-product-grid__cta {
  display: block; margin: 14px 18px 0; padding: 12px 16px;
  border: 1.5px solid var(--color-primary); border-radius: 999px;
  text-align: center; font-size: 15px; font-weight: 700;
  background: var(--color-primary); color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary) 35%, transparent);
  text-decoration: none; transition: all .15s ease;
}
.module-card-product-grid__cta:hover {
  background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 45%, transparent);
}
.module-card-product-grid__conds {
  display: flex; gap: 0; margin: 16px 0 0; padding: 14px 18px;
  background: var(--color-bg-subtle); border-top: 1px solid var(--color-border-light);
}
.module-card-product-grid__cond { flex: 1 1 0; min-width: 0; padding-right: 12px; }
.module-card-product-grid__cond dt { font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); margin: 0 0 4px; }
.module-card-product-grid__cond dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--color-text-primary); line-height: 1.5; word-break: keep-all; }
.module-card-product-grid__fee {
  display: inline-block; padding: 1px 7px; margin-right: 4px; border-radius: 4px;
  font-size: 11px; font-weight: 700; vertical-align: 1px;
}
.module-card-product-grid__fee--local  { background: #fde8e8; color: #c81e1e; }
.module-card-product-grid__fee--global { background: var(--color-primary-light); color: var(--color-primary-dark); }
@media (max-width: 480px) {
  .module-card-product-grid__grid { grid-template-columns: 1fr; }
  .module-card-product-grid__img { width: 92px; }
  .module-card-product-grid__chip { padding: 9px 14px; font-size: 14px; }
}

/* ==========================================================================
   CASE-COMPARE (사례별 방식 비교 카드 — 국토부 공식 사례 원형·2026-07-02)
   ========================================================================== */
.module-case-compare { margin: 24px 0 32px; }
.module-case-compare__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.module-case-compare__card {
  border: 1.5px solid var(--color-border); border-radius: var(--color-radius-lg);
  background: #fff; box-shadow: var(--color-shadow-sm); padding: 20px;
}
.module-case-compare__who { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; }
.module-case-compare__avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: var(--color-primary-light); display: inline-flex; align-items: center; justify-content: center;
  font-size: 20px;
}
.module-case-compare__who-name { margin: 0; font-size: 16px; font-weight: 800; color: var(--color-text-primary); }
.module-case-compare__who-sub { margin: 2px 0 0; font-size: 13.5px; color: var(--color-text-muted); }
.module-case-compare__spend {
  margin: 12px 0 14px; padding: 8px 12px; border-radius: var(--color-radius-sm);
  background: var(--color-bg-subtle); font-size: 14px; font-weight: 700; color: var(--color-text-body);
  display: inline-block;
}
.module-case-compare__methods { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.module-case-compare__method {
  border: 1.5px solid var(--color-border-light); border-radius: var(--color-radius-md);
  padding: 12px 14px; background: #fff;
}
.module-case-compare__method--win {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, #fff);
  box-shadow: var(--color-shadow-focus);
}
.module-case-compare__method-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.module-case-compare__method-label { font-size: 14px; font-weight: 700; color: var(--color-text-secondary); }
.module-case-compare__method--win .module-case-compare__method-label { color: var(--color-primary-dark); }
.module-case-compare__win-badge {
  padding: 2px 10px; border-radius: 999px; background: var(--color-primary); color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: -.2px; white-space: nowrap;
}
.module-case-compare__method-bottom { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.module-case-compare__formula { font-size: 13px; color: var(--color-text-muted); flex: 1 1 auto; min-width: 0; }
.module-case-compare__amount { font-size: 20px; font-weight: 800; color: var(--color-text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.module-case-compare__method--win .module-case-compare__amount { color: var(--color-primary-dark); font-size: 22px; }
.module-case-compare__note { margin: 14px 0 0; font-size: 13.5px; color: var(--color-text-secondary); line-height: 1.6; }
@media (max-width: 480px) { .module-case-compare__grid { grid-template-columns: 1fr; } }

/* case-compare 방식 행 내부 링크 — 클릭 어포던스 → 관련 페이지 학습 순환 (범용) */
.module-case-compare__method-link { display: block; color: inherit; text-decoration: none; }
.module-case-compare__method-go {
  display: block; margin-top: 8px; text-align: right;
  font-size: 12.5px; font-weight: 700; color: var(--color-primary-dark);
}
.module-case-compare__method-go::after {
  content: ' →'; display: inline-block; transition: transform .18s ease;
}
.module-case-compare__method--linked:hover .module-case-compare__method-go::after { transform: translateX(4px); }
.module-case-compare__method--linked {
  cursor: pointer;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
/* 링크 행은 평상시에도 테두리로 부각(사용자 실측 피드백 2026-07-03 "테두리선이 없어서 부각이 안 돼")
   — win 행(primary 실선)보다 한 단계 아래 톤·비링크 행(연회색)보다 뚜렷하게 */
.module-case-compare__method--linked:not(.module-case-compare__method--win) {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
}
.module-case-compare__method--linked:hover, .module-case-compare__method--linked:focus-within {
  border-color: var(--color-primary-dark);
  background: color-mix(in srgb, var(--color-primary) 12%, #fff);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--color-primary) 28%, transparent);
  transform: translateY(-3px);
}
.module-case-compare__method--linked:hover .module-case-compare__method-label {
  color: var(--color-primary-dark); text-decoration: underline;
}
@media (prefers-reduced-motion: reduce) {
  .module-case-compare__method--linked, .module-case-compare__method-go::after { transition: none; }
  .module-case-compare__method--linked:hover { transform: none; }
}

/* case-compare 카드 톤 — 이득(best)/손해(worst) 대비 강조 (범용) */
.module-case-compare__card { position: relative; }
.module-case-compare__card--best {
  border: 2px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 6%, #fff);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.module-case-compare__card--worst {
  border: 2px solid #fca5a5;
  background: color-mix(in srgb, #ef4444 4%, #fff);
}
.module-case-compare__card--worst .module-case-compare__amount { color: #dc2626; }
/* worst 카드 내부 방식 행 = 빨강 테두리(이득 카드의 파랑 win 행과 대칭) + 빨강 호버 */
.module-case-compare__card--worst .module-case-compare__method {
  border-color: #f87171;
  background: color-mix(in srgb, #ef4444 6%, #fff);
}
.module-case-compare__card--worst .module-case-compare__method-label { color: #b91c1c; }
.module-case-compare__card--worst .module-case-compare__method-go { color: #b91c1c; }
.module-case-compare__card--worst .module-case-compare__method--linked:hover,
.module-case-compare__card--worst .module-case-compare__method--linked:focus-within {
  border-color: #dc2626;
  background: color-mix(in srgb, #ef4444 12%, #fff);
  box-shadow: 0 8px 18px color-mix(in srgb, #ef4444 28%, transparent);
}
.module-case-compare__card--worst .module-case-compare__method--linked:hover .module-case-compare__method-label { color: #991b1b; }
.module-case-compare__tone-ribbon {
  position: absolute; top: -12px; right: 14px; padding: 3px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: -.2px; white-space: nowrap; color: #fff;
  box-shadow: var(--color-shadow-sm);
}
.module-case-compare__tone-ribbon--best  { background: var(--color-primary); }
.module-case-compare__tone-ribbon--worst { background: #dc2626; }

/* card-product-grid featured — 혜택 집중 카드 강조 배경 (범용) */
.module-card-product-grid__item--featured {
  position: relative;
  /* 리본 걸침(-12px) 복원용 — 기본 __item의 overflow:hidden이 리본 윗부분을 잘라서(라이브 실측),
     리본이 붙는 featured만 해제. 내부 자식은 전부 여백 보유라 모서리 클리핑 불요(사용자 확정 2026-07-03
     "테두리 걸침이 원 의도" — case-compare tone-ribbon과 동일 디자인 언어). */
  overflow: visible;
  border: 2px solid var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 5%, #fff);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
/* overflow 해제로 하단 전폭 바(__conds)의 각진 모서리가 카드 라운드 테두리를 덮음(라이브 실측 2026-07-03)
   → __conds 자체에 하단 내부 라운드(카드 radius − 보더 2px)를 부여해 걸침 리본과 라운드 공존 */
.module-card-product-grid__item--featured .module-card-product-grid__conds {
  border-radius: 0 0 calc(var(--color-radius-lg) - 2px) calc(var(--color-radius-lg) - 2px);
}
.module-card-product-grid__ribbon {
  /* 테두리 걸침 = 원 의도(tone-ribbon 정본과 통일) — 잘림은 featured의 overflow:visible로 해소 */
  position: absolute; top: -12px; right: 14px; padding: 3px 12px; border-radius: 999px;
  background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 800;
  letter-spacing: -.2px; white-space: nowrap; box-shadow: var(--color-shadow-sm);
}

/* ==========================================================================
   CALC UX 픽스 (2026-07-02) — 결과 플래시 반응 + 하단 여백 중첩 해소
   ========================================================================== */
@keyframes calcResultFlash {
  0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 45%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.module-calc-result--flash .module-calc-result__box { animation: calcResultFlash .7s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .module-calc-result--flash .module-calc-result__box { animation: none; }
}
/* 계산 모듈 하단 내부 여백 이중 제거 — 마지막 자식의 하단 마진 0(상/하 균형) */
.module-calc-module > :last-child,
.module-calc-result__box > :last-child { margin-bottom: 0; }

/* CALC 결과 stale 상태(2026-07-02·v3 상단 배너) — 조건 변경 후 재계산 전
   오버레이 X → 결과 섹션 "맨 위"에 흐름 배치 배너(모바일에서도 항상 보임·내용을 아래로 밀어냄).
   버튼명 = data-stale-btn 속성(모듈별 실제 CTA 라벨) 주입. 2줄 = \A + pre-line. */
.module-calc-result--stale .module-calc-result__box { opacity: .35; filter: grayscale(.35); transition: opacity .2s ease; }
.module-calc-result--stale::before {
  content: '🔄 조건이 바뀌었어요\A“' attr(data-stale-btn) '” 버튼을 다시 눌러주세요';
  white-space: pre-line;
  display: block; margin: 0 0 14px; padding: 14px 20px;
  border-radius: var(--color-radius-md);
  background: #fff7ed; border: 2px solid #f59e0b;
  box-shadow: 0 4px 14px rgba(245, 158, 11, .25);
  color: #b45309; font-size: 15.5px; font-weight: 800; line-height: 1.6;
  text-align: center;
}
@media (max-width: 480px) {
  .module-calc-result--stale::before { font-size: 14px; padding: 12px 14px; }
}

/* ==========================================================================
   HERO (범용 히어로 — 정적 센터형·대형 타이포·주 CTA 채움형 + 보조 링크 + 시의성 배지·2026-07-02)
   ========================================================================== */
.module-hero {
  text-align: center;
  padding: 48px 24px 44px;
  margin: 0 0 28px;
  border-radius: var(--color-radius-lg);
  background: linear-gradient(160deg, var(--color-primary-light) 0%, #fff 72%);
  border: 1px solid var(--color-border);
}
.module-hero--green { background: linear-gradient(160deg, #e7f6ec 0%, #fff 72%); }
.module-hero--slate { background: linear-gradient(160deg, #eef2f7 0%, #fff 72%); }
.module-hero__badge {
  display: inline-block; margin: 0 0 18px; padding: 7px 16px;
  border-radius: 999px; text-decoration: none;
  background: #fde8e8; color: #c81e1e; border: 1px solid #f7c4c4;
  font-size: 13.5px; font-weight: 800; letter-spacing: -.2px;
  transition: background-color .18s ease, transform .18s ease;
}
a.module-hero__badge:hover { background: #fbd5d5; transform: translateY(-1px); }
.module-hero__title {
  margin: 0 auto; max-width: 22ch;
  font-size: clamp(26px, 6.2vw, 44px); line-height: 1.22;
  font-weight: 800; letter-spacing: -.6px; color: var(--color-text-primary);
}
.module-hero__sub {
  margin: 18px auto 0; max-width: 46ch;
  font-size: clamp(15px, 2.4vw, 18.5px); line-height: 1.6;
  color: var(--color-text-secondary);
}
.module-hero__sub strong { color: var(--color-primary-dark); font-weight: 800; }
.module-hero__actions {
  margin: 28px 0 0; display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center; gap: 14px 22px;
}
.module-hero__cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 15px 30px; border-radius: 999px; text-decoration: none;
  background: var(--color-primary); color: #fff;
  font-size: 16.5px; font-weight: 800; letter-spacing: -.3px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--color-primary) 28%, transparent);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.module-hero__cta:hover {
  background: var(--color-primary-dark); transform: translateY(-2px);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--color-primary) 36%, transparent);
}
/* 보조 CTA = 아웃라인 버튼(사용자 확정 2026-07-03 "둘 다 버튼식" — 주=채움/보조=아웃라인 위계 유지) */
.module-hero__cta2 {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 15px 30px; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  background: #fff; color: var(--color-primary-dark); text-decoration: none;
  font-size: 15.5px; font-weight: 700;
  transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}
.module-hero__cta2::after { content: ' →'; transition: transform .18s ease; }
.module-hero__cta2:hover, .module-hero__cta2:focus {
  color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  background: color-mix(in srgb, var(--color-primary) 7%, #fff);
  transform: translateY(-2px); text-decoration: none;
}
.module-hero__cta2:hover::after { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .module-hero__cta, .module-hero__cta2::after, a.module-hero__badge { transition: none; }
  .module-hero__cta:hover, a.module-hero__badge:hover { transform: none; }
}
@media (max-width: 480px) {
  .module-hero { padding: 36px 16px 32px; }
  .module-hero__actions { flex-direction: column; gap: 14px; }
  .module-hero__cta, .module-hero__cta2 { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* ==========================================================================
   BENTO-GRID (중요도 가중 타일 내비 — 홈/허브 진입점·CSS-only·2026-07-02)
   ========================================================================== */
.module-bento-grid { margin: 24px 0 32px; }
.module-bento-grid__grid {
  display: grid; grid-template-columns: 1fr; gap: 14px; grid-auto-flow: dense;
}
.module-bento-grid__cell {
  position: relative; display: flex; flex-direction: column;
  padding: 20px 20px 18px; text-decoration: none;
  border: 1.5px solid var(--color-border); border-radius: var(--color-radius-lg);
  background: #fff; box-shadow: var(--color-shadow-sm);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.module-bento-grid__cell:hover, .module-bento-grid__cell:focus-visible {
  border-color: var(--color-primary);
  box-shadow: 0 8px 20px color-mix(in srgb, var(--color-primary) 22%, transparent);
  transform: translateY(-3px); outline: none;
}
.module-bento-grid__badge {
  align-self: flex-start; margin: 0 0 10px; padding: 3px 10px;
  border-radius: 6px; background: var(--color-primary-light);
  color: var(--color-primary-dark); font-size: 12px; font-weight: 800; letter-spacing: -.2px;
}
.module-bento-grid__title {
  font-size: 17px; font-weight: 800; letter-spacing: -.3px; line-height: 1.35;
  color: var(--color-text-primary);
}
.module-bento-grid__cell:hover .module-bento-grid__title { color: var(--color-primary-dark); }
.module-bento-grid__desc {
  margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--color-text-secondary);
}
.module-bento-grid__count {
  margin-top: auto; padding-top: 12px;
  font-size: 12.5px; font-weight: 700; color: var(--color-text-muted);
}
.module-bento-grid__cell--lg {
  background: linear-gradient(155deg, var(--color-primary-light) 0%, #fff 78%);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
}
.module-bento-grid__cell--lg .module-bento-grid__title { font-size: 20px; }
.module-bento-grid__cell--sm { padding: 16px 18px; }
.module-bento-grid__cell--sm .module-bento-grid__title { font-size: 15.5px; }
@media (min-width: 600px) {
  .module-bento-grid__grid { grid-template-columns: repeat(2, 1fr); }
  .module-bento-grid__cell--lg { grid-column: span 2; }
}
@media (min-width: 980px) {
  .module-bento-grid__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; }
  .module-bento-grid__cell--lg { grid-column: span 2; grid-row: span 2; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .module-bento-grid__cell { transition: none; }
  .module-bento-grid__cell:hover { transform: none; }
}

/* ==========================================================================
   CARD-SPOTLIGHT (카드 상품 히어로 — 공식 상품 페이지 히어로 재현·JS 0·2026-07-02)
   좌: 카드 실물 대형(기울임+입체 그림자) / 우: 뱃지·카드명 대형·하이라이트 pill·CTA·note
   ========================================================================== */
.module-card-spotlight {
  display: flex; gap: 30px; align-items: center;
  margin: 24px 0 32px; padding: 30px 32px;
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 24%, var(--color-border));
  border-radius: var(--color-radius-lg);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #fff 60%);
  box-shadow: var(--color-shadow-md);
}
.module-card-spotlight__visual { flex: 0 0 auto; }
.module-card-spotlight__img {
  width: 260px; height: auto; max-height: 360px; object-fit: contain;
  border-radius: 12px;
  transform: rotate(-4deg);
  filter: drop-shadow(0 16px 30px rgba(0,0,0,.28));
  transition: transform .25s ease;
}
.module-card-spotlight:hover .module-card-spotlight__img { transform: rotate(-2deg) translateY(-4px); }
.module-card-spotlight__body { flex: 1 1 auto; min-width: 0; }
.module-card-spotlight__badge {
  display: inline-block; padding: 4px 13px; border-radius: 999px;
  background: var(--color-primary); color: #fff;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.2px;
}
/* B14(2026-07-17 지휘자 증분⑤) badge_url 앵커화 — 기존 배지 스타일 그대로(위 규칙 공용) + 밑줄 제거·호버 시 색 변화만(작은 요소=버튼화 금지). */
a.module-card-spotlight__badge { text-decoration: none; font-size: 14.5px; padding: 7px 14px; }   /* 2026-07-17 사용자: 모바일 사이즈를 데스크톱에도 동일 적용 */
a.module-card-spotlight__badge:hover,
a.module-card-spotlight__badge:focus-visible { background: var(--color-primary-dark); color: #fff; text-decoration: none; }
/* 배지 앵커 이동 신호 화살표(2026-07-17 사용자 확정 — 링크형 배지에만) */
a.module-card-spotlight__badge::after { content: '\2192'; margin-left: 5px; font-weight: 700; opacity: .75; }   /* → 스타일(2026-07-17 사용자 확정) */
.module-card-spotlight__cta::after { content: '\2192'; margin-left: 6px; font-weight: 700; }   /* CTA 이동 신호(2026-07-17 사용자 확정) */
/* 모바일 배지 링크 중앙 정렬은 철회(2026-07-17 재확정) — 좌정렬 일관성(배지·리드·노트·상품명 필 전부 좌) 우선.
   크기(14.5px·7×14)는 베이스 규칙으로 승격돼 전 뷰포트 동일. */
.module-card-spotlight__name {
  margin: 12px 0 8px; font-size: 26px; font-weight: 800;
  color: var(--color-text-primary); line-height: 1.25; letter-spacing: -.4px; word-break: keep-all;
}
.module-card-spotlight__lead {
  margin: 0 0 18px; font-size: 15px; font-weight: 600; color: var(--color-text-body); line-height: 1.55; word-break: keep-all;
}
.module-card-spotlight__highlights {
  list-style: none; margin: 14px 0 20px; padding: 0;   /* 상단 여백 +14(2026-07-17 사용자: 상품명과 붙어 답답) */
  display: flex; flex-wrap: wrap; gap: 12px;
}
.module-card-spotlight__highlight {
  flex: 1 1 120px; min-width: 108px;
  padding: 12px 14px; border-radius: var(--color-radius-md);
  background: #fff; border: 1.5px solid color-mix(in srgb, var(--color-primary) 16%, var(--color-border));
  box-shadow: var(--color-shadow-sm);
}
.module-card-spotlight__hl-value {
  display: block; font-size: 22px; font-weight: 800;
  color: var(--color-primary-dark); font-variant-numeric: tabular-nums; line-height: 1.15;
}
.module-card-spotlight__hl-label {
  display: block; margin-top: 4px; font-size: 13px; font-weight: 600;
  color: var(--color-text-muted); line-height: 1.4; word-break: keep-all;
}
.module-card-spotlight__cta {
  display: inline-block; padding: 14px 30px; border-radius: 999px;   /* B10 2026-07-17: 12px 26px→14px 30px·CTA 확대(색·radius·그림자 무변경) */
  background: var(--color-primary); color: #fff; text-decoration: none;
  font-size: 16.5px; font-weight: 700;   /* B10: 15px→16.5px */
  box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary) 38%, transparent);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.module-card-spotlight__cta:hover,
.module-card-spotlight__cta:focus {
  /* color 미지정 시 테마 전역 a:hover 색이 승리해 글자가 어두워짐(라이브 실측 2026-07-03) → 화이트 고정 */
  color: #fff;
  background: var(--color-primary-dark); transform: translateY(-1px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--color-primary) 48%, transparent);
}
.module-card-spotlight__note {
  margin: 14px 0 0; font-size: 13px; color: var(--color-text-muted); line-height: 1.6;
}
@media (max-width: 720px) {
  /* 모바일 텍스트=왼쪽 정렬(badge·name·lead·note — 모두의카드 발원·역이식 2026-07-16). 이미지·하이라이트·CTA 텍스트는 가운데 유지. */
  .module-card-spotlight { flex-direction: column; align-items: stretch; text-align: left; padding: 24px 20px; gap: 20px; }
  .module-card-spotlight__visual { align-self: center; }
  .module-card-spotlight__img { width: 200px; }
  .module-card-spotlight__name { font-size: 22px; }
  .module-card-spotlight__highlights { justify-content: center; }
  .module-card-spotlight__highlight { flex: 1 1 100px; }
  /* 모바일 CTA = 전폭(엄지 터치 타겟·notice-banner CTA와 일관 — 사용자 확정 2026-07-03).
     데스크톱은 내용 폭 pill 유지(공식사이트 히어로 관행). 텍스트 중앙 명시=컨테이너 left 전환 보상. */
  .module-card-spotlight__cta { display: block; width: 100%; box-sizing: border-box; text-align: center; padding: 15px 30px; }   /* B10: 모바일 터치 높이 ≈48px(세로 패딩 15px) */
}
@media (prefers-reduced-motion: reduce) {
  .module-card-spotlight__img, .module-card-spotlight__cta { transition: none; }
  .module-card-spotlight:hover .module-card-spotlight__img { transform: rotate(-4deg); }
}

/* ISSUER-ICO(2026-07-02): 발급사 아이콘 — related·link-grid 의 'icon' 이미지 + spotlight 카드명 옆 뱃지.
   이모지 아이콘(font-size 기반)은 무영향, 이미지 아이콘(.core-issuer-ico)만 크기 규칙 적용. */
.core-issuer-ico {
  display: inline-block; width: 34px; height: 34px;
  object-fit: contain; vertical-align: middle; border-radius: 6px;
  background: #fff;
}
.module-related__card__icon--img,
.module-link-grid__card-icon--img { font-size: 0; }              /* 이미지일 땐 이모지용 큰 font-size 무효화 */
.module-related__card__icon--img .core-issuer-ico { width: 36px; height: 36px; }
.module-link-grid__card-icon--img .core-issuer-ico { width: 34px; height: 34px; }
/* ISSUER-ICO(2026-07-02 v4.2.67): 표 셀 안 발급사 아이콘 + 텍스트 = 세로 가운데 정렬·아이콘 축소(20px). */
.module-table__ico-cell { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.module-table__ico-cell .core-issuer-ico.module-table__cell-ico { width: 20px; height: 20px; flex: 0 0 auto; border-radius: 4px; }
.module-card-spotlight__name-row {
  display: flex; align-items: center; gap: 10px; margin: 12px 0 8px;
}
.module-card-spotlight__name-row .module-card-spotlight__name { margin: 0; }
.module-card-spotlight__ico {
  flex: 0 0 auto; width: 28px; height: 28px;
  object-fit: contain; border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
@media (max-width: 720px) {
  /* 왼쪽 정렬 전환(역이식 2026-07-16)과 정합 — 아이콘+카드명 행도 왼쪽부터 */
  .module-card-spotlight__name-row { justify-content: flex-start; }
}

/* ==========================================================================
   SPOTLIGHT 폴백 비주얼 + variant (2026-07-16 deposit B5 — 기존 규칙 무변경·추가만)
   실물 카드 이미지가 없는 아이템(예금 기관 등)에서 __visual 슬롯에 기관 이니셜/이모지 타일.
   로고 이미지(추후 codes icon_img) 확보 시 img 경로로 드롭인 — 슬롯(__visual) 동일 유지.
   ========================================================================== */
.module-card-spotlight__visual--fallback {
  width: 132px; min-height: 132px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 18px 14px; border-radius: 18px;
  background: linear-gradient(150deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--color-primary) 34%, transparent);
}
/* 이니셜 아바타 제거(2026-07-17 사용자 확정) — 박스 유지·명칭만(__vname). __initial/__vsub 규칙은 하위호환 잔존 무해라 유지. */
.module-card-spotlight__initial {
  font-size: 40px; font-weight: 800; line-height: 1; color: #fff; letter-spacing: -1px;
}
.module-card-spotlight__vsub {
  font-size: 12.5px; font-weight: 700; color: rgba(255,255,255,.92);
  text-align: center; word-break: keep-all; line-height: 1.3;
}
.module-card-spotlight__vname {
  font-size: 16px; font-weight: 800; color: #fff;
  text-align: center; word-break: keep-all; line-height: 1.35; letter-spacing: -.3px;
}
/* B10(2026-07-17) 명칭 폴백 박스 모바일 폭 보정 — 고정 132px는 모바일 세로 스택에서 과소·기관명 길이 편차(4~11자) 취약 → 내용 기반 유연 폭. 데스크톱 132px·img 분기 무변경. */
@media (max-width: 720px) {
  .module-card-spotlight__visual--fallback {
    width: auto; min-width: 55%; max-width: 85%; align-self: center; padding: 20px 24px;
  }
  /* B13(2026-07-17 증분⑥) 모바일 이미지 대역 존재감 확대 — 18px 고정→가변(clamp)·긴 기관명 2줄 허용(word-break 기존 keep-all 유지) */
  .module-card-spotlight__vname { font-size: clamp(20px, 5.5vw, 24px); line-height: 1.3; }
}
/* variant --rate: 대형 금리 타이포(첫 하이라이트=최고금리 히어로) + 기본금리 회색 병기 */
.module-card-spotlight--rate .module-card-spotlight__highlight:first-child {
  flex: 1 1 160px;
  background: color-mix(in srgb, var(--color-primary) 8%, #fff);
  border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
}
.module-card-spotlight--rate .module-card-spotlight__highlight:first-child .module-card-spotlight__hl-value {
  font-size: 34px; color: var(--color-primary);
}
.module-card-spotlight--rate .module-card-spotlight__highlight:nth-child(2) .module-card-spotlight__hl-value {
  color: var(--color-text-muted);   /* 기본금리 회색 병기(우대 없이 받는 금리 위계 하향) */
}
/* variant --dday: 특판 마감 배지 톤(정적·카운트다운 JS 없음). #b91c1c = 기존 notice-imminent 임박 경고색 재사용 */
.module-card-spotlight--dday .module-card-spotlight__badge { background: #b91c1c; color: #fff; }

/* ==========================================================================
   CALCULATOR (입력형 즉시 계산기 — calculator.php · deposit B5 2026-07-16)
   노스크립트 폴백: 기본 display:none → JS(.is-ready) 있을 때만 노출(정적 매트릭스 표가 색인 담당).
   산식=source core_deposit_after_tax 미러(모듈=표시전용). 신규 클래스만·기존 규칙 무변경.
   ========================================================================== */
.module-calculator { display: none; }
.module-calculator.is-ready {
  display: block; margin: 20px 0 26px; padding: 22px 24px;
  border: 1.5px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  border-radius: var(--color-radius-lg);
  background: linear-gradient(135deg, var(--color-primary-light) 0%, #fff 62%);
  box-shadow: var(--color-shadow-sm);
}
.module-calculator__head { margin-bottom: 16px; }
.module-calculator__title { display: block; font-size: 17px; font-weight: 800; color: var(--color-text-primary); letter-spacing: -.3px; }
.module-calculator__sub { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--color-text-muted); line-height: 1.5; word-break: keep-all; }
.module-calculator__form { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.module-calculator__field { display: flex; flex-direction: column; gap: 6px; flex: 1 1 130px; min-width: 120px; }
.module-calculator__field--toggle { flex: 1 1 190px; }
.module-calculator__flabel { font-size: 12.5px; font-weight: 700; color: var(--color-text-body); }
.module-calculator__input, .module-calculator__select {
  width: 100%; box-sizing: border-box; padding: 10px 12px;
  border: 1.5px solid var(--color-border); border-radius: var(--color-radius-md);
  background: #fff; font-size: 15px; font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums;
}
.module-calculator__input:focus, .module-calculator__select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
}
.module-calculator__toggle { display: flex; border: 1.5px solid var(--color-border); border-radius: var(--color-radius-md); overflow: hidden; }
.module-calculator__tbtn {
  flex: 1 1 auto; padding: 9px 8px; border: 0; background: #fff; cursor: pointer;
  font-size: 13px; font-weight: 700; color: var(--color-text-muted); line-height: 1.2;
  transition: background-color .12s ease, color .12s ease;
}
.module-calculator__tbtn + .module-calculator__tbtn { border-left: 1.5px solid var(--color-border); }
.module-calculator__tbtn.is-on { background: var(--color-primary); color: #fff; }
.module-calculator__out {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--color-radius-md);
  background: #fff; border: 1.5px solid color-mix(in srgb, var(--color-primary) 14%, var(--color-border));
}
.module-calculator__row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; border-bottom: 1px dashed var(--color-border);
}
.module-calculator__row:last-child { border-bottom: 0; }
.module-calculator__rk { font-size: 13.5px; font-weight: 600; color: var(--color-text-body); word-break: keep-all; }
.module-calculator__rv { font-size: 15px; font-weight: 700; color: var(--color-text-primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.module-calculator__row--total .module-calculator__rk { color: var(--color-text-primary); font-weight: 800; }
.module-calculator__row--total .module-calculator__rv { font-size: 18px; font-weight: 800; color: var(--color-primary); }
.module-calculator__note { margin: 12px 0 0; font-size: 12px; color: var(--color-text-muted); line-height: 1.6; }
@media (max-width: 720px) {
  .module-calculator.is-ready { padding: 18px 16px; }
  .module-calculator__field, .module-calculator__field--toggle { flex: 1 1 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .module-calculator__tbtn { transition: none; }
}

/* notice-banner 모듈 = 표준 info-box/​module-cta 클래스 재사용(신규 클래스 0 — 사용자 확정 2026-07-02).
   아래 1규칙만 스코프 미세조정: .module-cta 기본 마진 28px(단독 CTA 버튼 의무 여백)이
   공지 info-box "안"에서는 배너 높이를 2배로 불려 과함 → 박스 내부에서만 축소. */
.module-info-box__body .module-cta--small { margin-top: 8px; margin-bottom: 2px; }
/* 공지 배너(--notice) 스코프 — 테마 전역 p{margin-bottom:1.5em} 상속 차단·타이틀 본문 동급 위계. 일반 info-box 무영향 */
.module-info-box--notice .module-info-box__body p { margin: 0 0 1em; }
.module-info-box--notice .module-info-box__body p:last-child { margin-bottom: 0; }
.module-info-box--notice .module-cta--small { display: block; width: 100%; text-align: center; } /* 배너 CTA 전폭(사용자 확정) */
/* 임박 사인(D-1·D-0 자동 부여·사용자 확정 2026-07-03) — 보더·틴트 한 단계 강화(JS 0·절제 유지) */
.module-info-box--notice-imminent { border-left-width: 6px; background: #fee2e2; }
.module-info-box--notice-imminent .module-info-box__title { color: #b91c1c; }

/* ==========================================================================
   2026-07-03 라이브 실측 마감 3종 (설계 정본 §4 결함 카탈로그 반영)
   ========================================================================== */
/* ① 흰 글자 버튼 hover/focus 색 고정 전수 — hover에 color 미지정 시 테마 전역 a:hover(검정)가
     승리(spotlight·hero CTA 실측). 채움형(primary 배경) 버튼만 포함, secondary/outline 변형은 제외. */
.module-hero__cta:hover, .module-hero__cta:focus,
.module-cta--hero:hover, .module-cta--hero:focus,
.module-calc-btn:hover, .module-calc-btn:focus,
.module-cta:not(.module-cta--secondary):not(.module-cta--outline):hover,
.module-cta:not(.module-cta--secondary):not(.module-cta--outline):focus {
  color: #fff;
}
/* ② card-product-grid 비강조 카드 = 호버 시 primary 톤 테두리(사용자 확정 2026-07-03
     "BC만 테두리 있고 다른 카드는 호버 시 테두리라도" — featured 상시 primary와 위계 유지) */
.module-card-product-grid__item:not(.module-card-product-grid__item--featured):hover {
  border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
}
/* ③ bento lg 셀 데이터 pill(제목+한 줄만으로는 큰 셀 정보 무게 부족 — 사용자 실측 피드백) */
.module-bento-grid__stats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.module-bento-grid__stat {
  display: inline-flex; align-items: baseline; gap: 5px;
  padding: 6px 12px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-primary) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border));
  font-size: 12.5px; color: var(--color-text-secondary); white-space: nowrap;
}
.module-bento-grid__stat strong { font-size: 14px; font-weight: 800; color: var(--color-primary-dark); }
/* ④ 발급사 이니셜 배지 폴백(제주은행·네이버페이 — 공식 아이콘 세트 미포함 확정 2026-07-03)
     — 아이콘과 같은 자리·크기의 균일 배지. 크기는 기존 .core-issuer-ico 규칙(w/h)을 그대로 상속. */
.core-issuer-ico--txt {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 6px; flex: 0 0 auto;
  background: color-mix(in srgb, var(--color-primary) 10%, #fff);
  border: 1px solid color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
  font-size: 11px; font-weight: 800; letter-spacing: -.5px;
  color: var(--color-primary-dark); line-height: 1;
}
.module-table__ico-cell .core-issuer-ico--txt.module-table__cell-ico { width: 20px; height: 20px; font-size: 8.5px; border-radius: 4px; }
/* ⑥ 사이드바 TOP 인기 글(코드 기반·sidebar.php) 컴팩트 — 이모지 90px 박스=세로 낭비(사용자 실측
     2026-07-03·세로형 애드센스 대비). 위젯 인라인 CSS(.horizontal-*)보다 명시도 우위(0,2,0)로 축소. */
.md-top-posts .horizontal-image { width: 40px; height: 40px; min-width: 40px; border-radius: 6px; }
/* opacity 1 = 위젯 기본 스타일의 opacity:.5(이모지 흐림 — 사용자 실측 2026-07-03) 해제 */
.md-top-posts .horizontal-default { font-size: 24px; line-height: 40px; opacity: 1; }
.md-top-posts .horizontal-post-item { padding: 7px 0; }
.md-top-posts .horizontal-post-link { gap: 10px; align-items: center; }
.md-top-posts .horizontal-title { font-size: 16px; line-height: 1.45; margin: 0; font-weight: 600; }   /* 사이트 최소 16px 기준(사용자 확정) */

/* ⑦ 전체 시세 바로가기 위젯 (.items-list-widget) — 2열 그리드 텍스트 카드 (2026-07-09)
   데이터 SSOT: site.php sidebar.top + footer.columns (items-list-widget.php·sidebar.php 코드 기반)
   카드 톤: 흰 배경·8px 라운드·얇은 그림자·호버 lift — 모두의카드 위젯 계열.
   폰트: 라벨 15px·font-weight 600 / 그룹 제목 14px / 위젯 타이틀 TOP 인기 글 동급(18px).
   터치 타깃: min-height 44px(텍스트+패딩·≥40px 기준 충족). 이모지 미렌더(2026-07-09 확정). */
.widget_items_list_widget .widget-title {
    font-size: 18px; font-weight: 700; color: #1f2937;
    margin: 0 0 16px; padding-bottom: 8px;
    border-bottom: 2px solid #1e40af; line-height: 1.3;
}
.items-list-widget { margin-bottom: 4px; }
.ilw-group { margin-bottom: 0; padding-bottom: 16px; }
.ilw-group:last-child { padding-bottom: 0; }
/* 그룹 간 분리 = 여백만. border-top 제거(2026-07-09 사용자 실측): 제목의 border-bottom과
   이중선이 되어 h3 글자가 두 선 사이에 끼어 보임 — 구분선은 제목 밑줄 1개로 충분. */
.ilw-group + .ilw-group { margin-top: 4px; }
.ilw-group-title {
    font-size: 16px; font-weight: 700; color: #4b5563;   /* 사이트 최소 16px 기준(사용자 확정 2026-07-09) */
    margin: 0 0 10px; padding-bottom: 5px;
    border-bottom: 1px solid #e5e7eb;
}
.ilw-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
}
.ilw-card {
    display: flex; align-items: center; justify-content: center;
    padding: 10px 8px; min-height: 44px;
    border-radius: 8px;
    background: #fff; border: 1px solid #e5e7eb;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
    text-decoration: none; color: inherit;
    transition: box-shadow .15s ease, transform .15s ease;
    text-align: center;
}
.ilw-card:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, .10);
    transform: translateY(-1px);
}
.ilw-label {
    font-size: 15px; font-weight: 600; color: #374151;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ilw-card:hover .ilw-label { color: #1e40af; }

/* ⑤ 발급사(ico) 셀 = 좌측 정렬(사용자 확정 2026-07-03 "가운데 정렬 말고") — label형 열의
     가운데 정렬(!important·cell--center)을 ico 셀 포함 td에서만 해제(동등 !important·후순위 승리).
     :has 미지원 구형 브라우저 = 기존 가운데(무해 폴백). */
.module-table td:has(.module-table__ico-cell),
.module-table__table td:has(.module-table__ico-cell) { text-align: left !important; }
.module-table__ico-cell { justify-content: flex-start; }

/* MODOOCARD-PORT 2026-07-03 추가 3건(지휘자 판정) — ①·③ append(순수 additive)·②는 L4204 인라인 정합 */
/* ① calc-toggle US 그룹 버튼 중앙 정렬 픽스(모두의카드 2026-07-02 검증): 상위
     .module-calc-toggle{display:flex}(L2864 구식 컨테이너 규칙)가 버튼을 플렉스 컨테이너로 만들어
     글자가 좌측(flex-start)으로 붙던 결함 → 플렉스 중앙 정렬 명시. 기존 L2949 동일 셀렉터 규칙에
     이 두 속성은 미선언(census 확인) — 선언 추가만·기존 선언 덮어쓰기 0. */
.module-calc-toggle-group .module-calc-toggle {
  justify-content: center;
  align-items: center;
}
/* ③ stat-card red-value = 흰 배경·값만 빨강(배경 강조가 과할 때 — 주변에 빨강 요소가 많은 페이지용)
     — stat-card.php docblock 'color' 옵션(blue|green|red|amber|purple|red-value)의 CSS 대응 블록. */
.module-stat-card--red-value {
    background: #fff;
    border-top: 3px solid #dc2626;
}
.module-stat-card--red-value .module-stat-card__value { color: #dc2626; }

/* ═══════════════════════════════════════════════════════════════════════════
   time-of-day — 범용 24h 타임라인 (band/mark · CSS-only 툴팁 · JS 0)
   PHP: core/template/modules/time-of-day.php. 위치·색만 인라인(--tod-c/left/width),
   그 외 전부 여기 SSOT. 반응형: 축=width:100%(비율 유지)·얇은 밴드 min-width 보존·
   범례가 모바일 가독 보강. 툴팁=:hover/:focus(데스크톱 hover + 모바일 탭 + 키보드 focus).
   ═══════════════════════════════════════════════════════════════════════════ */
.module-time-of-day {
  margin: 24px 0;
  padding: 20px;
  background: var(--color-bg-card, #fff);
  border-radius: var(--color-radius-sm, 8px);
  border: 1px solid var(--color-border, #e5e7eb);
}
.module-time-of-day__title { font-size: 20px; font-weight: 700; color: var(--color-text-primary, #111827); margin: 0 0 8px; }
.module-time-of-day__caption { font-size: 13px; color: var(--color-text-secondary, #6b7280); margin: 0 0 16px; line-height: 1.6; }
.module-time-of-day__viz { position: relative; padding-top: 40px; }   /* 상단 = 툴팁 공간 */
.module-time-of-day__axis {
  position: relative;
  height: 30px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;   /* 트랙 경계=테두리+점선 눈금이 잡아주므로 배경은 더 옅게 */
  border-radius: 6px;
}
.module-time-of-day__grid {
  position: absolute; top: 0; bottom: 0; width: 0;
  margin-left: -0.5px;
  border-left: 1px dashed #94a3b8;   /* 점선 눈금 — 밴드보다 은은한 참조선(6·12·18시) */
}
/* ── band(연속 구간) ── */
.module-time-of-day__band {
  position: absolute; top: 3px; bottom: 3px;
  min-width: 8px;
  background: var(--tod-c, #3b82f6);
  border-radius: 4px;
  cursor: pointer; outline: none;
  transition: filter .15s ease, box-shadow .15s ease;
}
.module-time-of-day__band:hover,
.module-time-of-day__band:focus,
.module-time-of-day__band:focus-visible {
  filter: brightness(1.08);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--tod-c, #3b82f6);
  z-index: 4;
}
/* ── mark(이산 시각) ── */
.module-time-of-day__mark {
  position: absolute; top: -5px; bottom: -5px; width: 2px;
  margin-left: -1px;
  background: var(--tod-c, #3b82f6);
  cursor: pointer; outline: none; z-index: 2;
}
.module-time-of-day__mark-dot {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--tod-c, #3b82f6); border: 2px solid #fff;
  box-shadow: 0 0 0 1px var(--color-border, #e5e7eb);
}
.module-time-of-day__mark:hover,
.module-time-of-day__mark:focus,
.module-time-of-day__mark:focus-visible { filter: brightness(1.12); z-index: 5; }
/* ── 툴팁(CSS-only) ── */
.module-time-of-day__tip {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  min-width: 118px; max-width: 220px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(17, 24, 39, .94); color: #fff;
  font-size: 12px; line-height: 1.5;
  padding: 7px 10px; border-radius: 7px;
  text-align: left; white-space: normal; word-break: keep-all;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .15s ease; z-index: 10;
}
.module-time-of-day__tip::after {
  content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: rgba(17, 24, 39, .94);
}
.module-time-of-day__band:hover  .module-time-of-day__tip,
.module-time-of-day__band:focus  .module-time-of-day__tip,
.module-time-of-day__band:focus-within .module-time-of-day__tip,
.module-time-of-day__mark:hover  .module-time-of-day__tip,
.module-time-of-day__mark:focus  .module-time-of-day__tip,
.module-time-of-day__mark:focus-within .module-time-of-day__tip { opacity: 1; visibility: visible; }
.module-time-of-day__tip strong { color: #fbbf24; }
.module-time-of-day__tip-time { font-variant-numeric: tabular-nums; opacity: .95; }
.module-time-of-day__tip-desc { opacity: .82; }
/* 툴팁 가장자리 정렬(좌/우 오버플로 방지 — 중심 <18% / >82% 밴드·마크) */
.module-time-of-day__band--tl .module-time-of-day__tip,
.module-time-of-day__mark--tl .module-time-of-day__tip { left: 0; transform: none; }
.module-time-of-day__band--tl .module-time-of-day__tip::after,
.module-time-of-day__mark--tl .module-time-of-day__tip::after { left: 16px; }
.module-time-of-day__band--tr .module-time-of-day__tip,
.module-time-of-day__mark--tr .module-time-of-day__tip { left: auto; right: 0; transform: none; }
.module-time-of-day__band--tr .module-time-of-day__tip::after,
.module-time-of-day__mark--tr .module-time-of-day__tip::after { left: auto; right: 16px; transform: none; }
/* ── 눈금 ── */
.module-time-of-day__ticks { position: relative; height: 18px; margin-top: 6px; }
.module-time-of-day__tick {
  position: absolute; transform: translateX(-50%);
  font-size: 11px; color: var(--color-text-secondary, #6b7280);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.module-time-of-day__tick--start { transform: none; }
.module-time-of-day__tick--end { transform: translateX(-100%); }
/* ── 범례(가시·모바일 가독·GEO 텍스트) ── */
.module-time-of-day__legend {
  list-style: none; margin: 16px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 18px;
}
.module-time-of-day__legend-item {
  display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 3px 8px;
  font-size: 15px; line-height: 1.55;
}
.module-time-of-day__legend-dot {
  width: 12px; height: 12px; border-radius: 3px; background: var(--tod-c, #3b82f6); flex: 0 0 auto;
}
.module-time-of-day__legend-time { font-weight: 700; color: var(--color-text-primary, #111827); font-variant-numeric: tabular-nums; white-space: nowrap; }
.module-time-of-day__legend-label { font-weight: 600; color: var(--color-text-primary, #111827); }
.module-time-of-day__legend-desc { grid-column: 2 / -1; color: var(--color-text-secondary, #6b7280); font-size: 13px; }
.module-time-of-day__note { font-size: 12px; color: var(--color-text-secondary, #6b7280); margin: 14px 0 0; line-height: 1.6; }
@media (max-width: 640px) {
  .module-time-of-day { padding: 16px; }
  .module-time-of-day__legend { grid-template-columns: 1fr; }
  .module-time-of-day__tip { max-width: 180px; }
}

/* ══════════════════════════════════════════════════════════════════════
   랜딩 전용 CSS 증분 (2026-07-10 · kpi-card · link-grid chips · qa-cards)
   ══════════════════════════════════════════════════════════════════════ */

/* ── module-kpi-board: KPI 시세판 그리드 ────────────────────────────── */
.module-kpi-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .module-kpi-board { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .module-kpi-board { grid-template-columns: repeat(2, 1fr); } }

.module-kpi-board__card {
  padding: 16px 18px;
  display: block;
  color: inherit;
  text-decoration: none;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.module-kpi-board__card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
  transform: translateY(-1px);
  border-color: #3b82f6;
  color: inherit;
}
.module-kpi-board__group {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 4px;
}
.module-kpi-board__label {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 8px;
}
.module-kpi-board__price {
  font-size: 22px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.1;
}
.module-kpi-board__unit {
  font-size: 12px;
  font-weight: 400;
  color: #475569;
  margin-left: 3px;
}
.module-kpi-board__chg {
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}
.module-kpi-board__dual {
  display: flex;
  gap: 6px;
  margin-top: 6px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 700;
}
.module-kpi-board__spark {
  display: block;
  margin: 8px 0 4px;
}
.module-kpi-board__ts {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 6px;
}

/* 무버 */
.module-kpi-board__movers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 640px) { .module-kpi-board__movers { grid-template-columns: 1fr; } }
.module-kpi-board__mgroup {
  overflow: hidden;
}
.module-kpi-board__mhead {
  padding: 12px 18px;
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.module-kpi-board__mhead--up   { background: #fef2f2; color: #991b1b; }
.module-kpi-board__mhead--down { background: #eff6ff; color: #1e40af; }
.module-kpi-board__mitem {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid #f8fafc;
  color: inherit;
  text-decoration: none;
  transition: background .15s;
}
.module-kpi-board__mitem:last-child { border-bottom: 0; }
.module-kpi-board__mitem:hover { background: #f8fafc; color: inherit; }
.module-kpi-board__mrank { font-size: 14px; font-weight: 800; color: #94a3b8; width: 18px; flex-shrink: 0; }
.module-kpi-board__minfo { flex: 1; }
.module-kpi-board__mlabel { font-size: 15px; font-weight: 700; color: #1e293b; }
.module-kpi-board__msub   { font-size: 12px; color: #475569; }
.module-kpi-board__mr     { text-align: right; }
.module-kpi-board__mchg   { font-size: 15px; font-weight: 800; }
.module-kpi-board__mpx    { font-size: 12px; color: #94a3b8; }

/* ── module-link-grid--chips: 히어로 인기 시세 칩 (additive) ─────────── */
.module-link-grid--chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  /* max-width 760px 제거(2026-07-10 R3 보완 — 히어로 오른쪽 여백 실원인·컨테이너 전폭 자동) */
}
@media (max-width: 820px) { .module-link-grid--chips { grid-template-columns: repeat(2, 1fr); } }

.module-link-grid__chip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: rgba(255,255,255,0.96);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 52px;
  color: #1e293b;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease;
}
.module-link-grid__chip:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  color: #1e293b;
}
.module-link-grid__chip-name {
  font-size: 14px;
  font-weight: 700;
}
.module-link-grid__chip-val {
  font-size: 13px;
  font-weight: 700;
  text-align: right;
  line-height: 1.3;
}
.module-link-grid__chip-unit {
  font-size: 11px;
  font-weight: 400;
  color: #475569;
  margin-left: 2px;
}
.module-link-grid__chip-chg {
  display: block;
  font-size: 11px;
  font-weight: 700;
}
/* 히어로 배경(어두움)에서 chip 내부 등락색 반전 없음 — chip 배경이 흰색이라 표준 색 유지 */

/* ── R165(2026-07-16): chips--card 수정자 — 흰 페이지 배경용 카드형 칩(/all/ 전 품목 디렉터리)
     기존 --chips(히어로 흰 칩) 룰 무변경·이 수정자 스코프에서만 오버라이드(additive). */
.module-link-grid--chips--card {
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 8px;
}
@media (max-width: 820px) { .module-link-grid--chips--card { grid-template-columns: repeat(2, 1fr); } }
.module-link-grid--chips--card .module-link-grid__chip {
  justify-content: flex-start;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  min-height: 46px;
  padding: 9px 12px;
}
.module-link-grid--chips--card .module-link-grid__chip:hover {
  border-color: var(--color-primary, #2563eb);
  background: #fff;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.12);
}
.module-link-grid__chip-ico {
  font-size: 21px;
  line-height: 1;
  flex: 0 0 auto;
}
.module-link-grid--chips--card .module-link-grid__chip-name {
  font-size: 14.5px;
  font-weight: 600;
}
.module-link-grid__chip-ico-img {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  display: block;
}

/* ── module-qa-cards: 즉답 밴드 카드 (additive) ─────────────────────── */
.module-qa-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 820px) { .module-qa-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .module-qa-cards { grid-template-columns: 1fr; } }

.module-qa-cards__card {
  padding: 20px 22px;
  display: block;
  text-decoration: none;
  color: inherit;
}
.module-qa-cards__tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.module-qa-cards__tag--buy  { background: #fef2f2; color: #991b1b; }
.module-qa-cards__tag--sell { background: #eff6ff; color: #1e40af; }
.module-qa-cards__tag--low  { background: #f0fdf4; color: #14532d; }
.module-qa-cards__q {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px;
  line-height: 1.4;
}
.module-qa-cards__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  border-radius: 6px;
  background: #f8fafc;
  margin-bottom: 8px;
}
.module-qa-cards__row:last-of-type { margin-bottom: 0; }
.module-qa-cards__key { font-size: 14px; color: #475569; }
.module-qa-cards__val { font-size: 17px; font-weight: 800; }
.module-qa-cards__foot {
  margin-top: 12px;
  font-size: 12px;
  color: #94a3b8;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.module-qa-cards__cta { font-size: 13px; font-weight: 700; color: #1a73e8; }
.module-qa-cards__ts  { font-size: 12px; color: #94a3b8; }

/* ── 랜딩 공용 섹션 래퍼 ────────────────────────────────────────────── */
.landing-strip {
  background: #1e293b;
  color: #e2e8f0;
  font-size: 14px;
}
.landing-strip__row {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  padding: 9px 0;
  max-width: 1080px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.landing-strip b     { font-weight: 700; color: #fff; }
.landing-strip .s-up   { color: #f87171; font-weight: 700; }
.landing-strip .s-down { color: #93c5fd; font-weight: 700; }
.landing-strip .s-flat { color: #94a3b8; }
.landing-strip .s-ts   { margin-left: auto; color: #94a3b8; }

.landing-hero {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e293b 100%);
  color: #fff;
}
.landing-hero__inner { padding: 40px 0 44px; max-width: 1080px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.landing-hero__h1 { font-size: 36px; font-weight: 800; line-height: 1.22; margin: 0 0 14px; letter-spacing: -.02em; max-width: 15ch; }
@media (max-width: 640px) { .landing-hero__h1 { font-size: 26px; } }
.landing-hero__sum { font-size: 16px; line-height: 1.85; color: rgba(255,255,255,.9); max-width: 720px; margin: 0 0 22px; }
.landing-hero__sum b { color: #fff; font-weight: 700; }
.landing-hero__chip-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.7); margin: 0 0 10px; }
.landing-hero__all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.22);
  padding: 11px 20px;
  border-radius: 24px;
  text-decoration: none;
}
.landing-hero__all:hover { color: #fff; background: rgba(255,255,255,.24); }

.landing-sec { padding: 36px 0; }
.landing-sec--tint { background: #eef2f7; }
.landing-sec__inner { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.landing-sec__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.landing-sec__title {
  font-size: 24px;
  font-weight: 700;
  color: #1e293b;
  border-left: 4px solid #4285f4;
  padding-left: 12px;
  margin: 0;
  line-height: 1.2;
}
.landing-sec__title small {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: #475569;
  border: 0;
  padding: 0;
  margin-top: 4px;
}
.landing-sec__ts   { font-size: 13px; color: #94a3b8; white-space: nowrap; }
.landing-sec__more { font-size: 14px; font-weight: 600; color: #1a73e8; text-decoration: none; }

/* 주목 차트 (농넷 패턴) */
.landing-feature {
  padding: 22px 24px;
  margin-bottom: 18px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.landing-feature__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.landing-feature__cat { font-size: 13px; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.landing-feature__price { font-size: 34px; font-weight: 800; color: #1e293b; line-height: 1.05; }
.landing-feature__unit { font-size: 14px; font-weight: 400; color: #475569; margin-left: 4px; }
.landing-feature__badges { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.landing-feature__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}
.landing-feature__badge--up   { color: #dc2626; background: #fef2f2; }
.landing-feature__badge--down { color: #2563eb; background: #eff6ff; }
.landing-feature__badge small { font-size: 11px; font-weight: 400; opacity: .75; }
.landing-feature__tabs { display: flex; border: 1px solid #e2e8f0; border-radius: 6px; overflow: hidden; width: fit-content; }
.landing-feature__tab {
  padding: 6px 15px;
  font-size: 13px;
  font-weight: 700;
  color: #475569;
  background: #fff;
  border: 0;
  border-right: 1px solid #e2e8f0;
  cursor: pointer;
  font-family: inherit;
}
.landing-feature__tab:last-child { border-right: 0; }
.landing-feature__tab.on { background: #1a73e8; color: #fff; }
.landing-feature__chart-wrap { overflow-x: auto; }
.landing-feature__chart { display: block; width: 100%; max-width: 100%; }   /* 760→100%(2026-07-10 R3 보완 — 주목 차트 오른쪽 여백 실원인) */
.landing-feature__legend { display: flex; gap: 16px; flex-wrap: wrap; margin: 12px 0 0; }
.landing-feature__legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #475569; }
.landing-feature__legend i { width: 20px; height: 0; border-top-width: 2px; border-top-style: solid; display: inline-block; }
.landing-feature__note { font-size: 13px; color: #94a3b8; margin: 14px 0 0; }
/* CSS 호버 툴팁 */
.lf-cp { cursor: pointer; }
.lf-cp .lf-ct { visibility: hidden; pointer-events: none; }
.lf-cp:hover .lf-ct, .lf-cp:focus .lf-ct { visibility: visible; }

/* 광고 슬롯 */
.landing-ad {
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  background: #f8fafc;
  color: #94a3b8;
  text-align: center;
  padding: 18px;
  font-size: 13px;
  letter-spacing: .02em;
  margin: 4px 0;
}
.landing-ad b { color: #64748b; font-weight: 700; }

/* 지역 관문 */
.landing-region__bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.landing-region__sel {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  background: #fff;
  font-family: inherit;
  min-height: 44px;
  min-width: 140px;
  cursor: pointer;
}
.landing-region__tabs { display: flex; gap: 8px; }
.landing-region__tab {
  font-size: 14px;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  font-family: inherit;
  min-height: 44px;
}
.landing-region__tab.on { background: #1a73e8; color: #fff; border-color: #1a73e8; }
.landing-region__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) { .landing-region__list { grid-template-columns: 1fr; } }
.landing-region__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f8fafc;
  text-decoration: none;
  color: inherit;
}
.landing-region__row:hover { border-color: #3b82f6; background: #fff; }
.landing-region__name { font-size: 15px; font-weight: 700; color: #1e293b; }
.landing-region__sub  { font-size: 12px; color: #475569; margin-top: 2px; }
.landing-region__val  { font-size: 17px; font-weight: 800; text-align: right; }
.landing-region__pane { display: none; }
.landing-region__pane.on { display: block; }

/* 가이드 카드 */
.landing-guides {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 820px) { .landing-guides { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .landing-guides { grid-template-columns: 1fr; } }
.landing-guide__card {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  min-height: 104px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.landing-guide__card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.10);
  transform: translateY(-1px);
  border-color: #3b82f6;
  color: inherit;
}
.landing-guide__kicker { font-size: 11px; font-weight: 700; color: #4285f4; text-transform: uppercase; letter-spacing: .05em; }
.landing-guide__title  { font-size: 16px; font-weight: 700; color: #1e293b; line-height: 1.4; }
.landing-guide__desc   { font-size: 13px; color: #475569; line-height: 1.5; margin-top: auto; }

/* ── module-kpi-board__roll — CSS 롤링 다품목 카드 (additive 2026-07-10) ─ */
/* SEO: 전 품목 DOM 실재(opacity 전환·display:none 금지) → 크롤러 전 품목 색인. */
/* CLS=0: 슬라이드 position:absolute → 컨테이너 고정 높이가 레이아웃 결정.   */
.module-kpi-board__card--roll {
  position: relative;  /* contain absolute slides */
}
.module-kpi-board__roll-wrap {
  position: relative;
  min-height: 80px;    /* 슬라이드 콘텐츠 높이 기준 — CLS 방지 */
  overflow: hidden;
}
.module-kpi-board__roll-slide {
  position: absolute;
  top: 0; left: 0; width: 100%;
  opacity: 0;
  /* animation-name/duration/delay — PHP 인라인으로 주입 */
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
/* 호버·포커스 시 롤링 일시정지 */
.module-kpi-board__roll-wrap:hover .module-kpi-board__roll-slide,
.module-kpi-board__roll-wrap:focus-within .module-kpi-board__roll-slide {
  animation-play-state: paused;
}
/* 롤 서브 레이블 (품목명) */
.module-kpi-board__roll-sub {
  font-size: 12px;
  font-weight: 700;
  color: #64748b;
  margin-bottom: 3px;
}
/* prefers-reduced-motion: 첫 품목만 정적 표시·애니메이션 없음 */
@media (prefers-reduced-motion: reduce) {
  .module-kpi-board__roll-slide {
    animation: none !important;
    opacity: 0;
    position: absolute;
  }
  .module-kpi-board__roll-slide:first-child {
    opacity: 1;
    position: relative;
  }
}

/* 공통 등락색 SSOT (랜딩 전용 스코프 없이 전역 사용) */
.chg-up   { color: #dc2626; }
.chg-down { color: #2563eb; }
.chg-flat { color: #94a3b8; }

/* ── CSS census 보강 (R2 2026-07-10) ── 아래 클래스 모두 front-page.php 출력 확인 */

/* .lift — 호버 시 위로 이동하는 글로벌 유틸리티 (landing-v1.html 토큰 동일) */
.lift { transition: transform .2s ease, box-shadow .2s ease; }
.lift:hover { transform: translateY(-1px); }

/* .card — FAQ <details> 박스 스타일 기반 (WP 표준 .card 없음·랜딩 전용) */
.card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; }

/* .landing-faq-grid — FAQ 2열 그리드 (front-page.php §9) */
.landing-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .landing-faq-grid { grid-template-columns: 1fr; } }

/* .landing-sources — 데이터 출처 블록 (항상 렌더·애드센스 신뢰 요소) */
.landing-sources {
  margin-top: 28px;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.landing-sources__title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 12px;
}
.landing-sources__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
/* .src-chip — 출처 뱃지 칩 */
.src-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: #1a73e8;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
}
.landing-sources__legal {
  font-size: 12px;
  line-height: 1.75;
  color: #64748b;
  margin: 0;
}

/* =====================================================================
   랜딩 시안 완전 적용 블록 (landing-v1.html → 2026-07-10 R2b)
   전역 선택자(body·a·*·section)는 .landing-page 하위로 스코프
   헤더/푸터 관련 규칙(.site-header .site-footer .brand .nav) 이식 제외
   ===================================================================== */

/* ── 토큰 (CSS 사용자 정의 속성 · :root = 전역 무해) ──────────────── */
:root {
  --lp-up:    #dc2626;
  --lp-down:  #2563eb;
  --lp-flat:  #64748b;
  --lp-amber: #f59e0b;
  --lp-text:  #1e293b;
  --lp-body:  #374151;
  --lp-sec:   #475569;
  --lp-muted: #94a3b8;
  --lp-link:  #1a73e8;
  --lp-point: #4285f4;
  --lp-card:  #ffffff;
  --lp-subtle:#f8fafc;
  --lp-bg:    #f1f5f9;
  --lp-border:#e2e8f0;
  --lp-blt:   #e5e7eb;
  --lp-radius:8px;
  --lp-shadow:0 4px 12px rgba(0,0,0,0.06);
  --lp-shover:0 8px 20px rgba(0,0,0,0.10);
}

/* ── 전역 스코프 리셋 (.landing-page 래퍼 하위) ──────────────────── */
.landing-page * { box-sizing: border-box; }
.landing-page {
  font-family: -apple-system,'Noto Sans KR',sans-serif;
  font-size: 16px;
  color: var(--lp-text);
  background: var(--lp-bg);
  line-height: 1.5;
  overflow-x: hidden; /* R5: full-bleed 밴드 가로 스크롤 방지 */
}
/* R5: full-bleed — 히어로·요약 스트립·tint 블록이 뷰포트 전폭으로 확장 */
.landing-page .hero,
.summary-strip,
.landing-page .block--tint {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.landing-page a { color: var(--lp-link); text-decoration: none; }
.landing-page a:hover { color: #1557b0; }
.landing-page section { scroll-margin-top: 64px; }

/* ── 컨테이너 ─────────────────────────────────────────────────────── */
/* R3: div.container로 특이성 상향(0,2,1) + padding !important — GP 테마 override 방지 */
/* R4: shorthand 대신 left/right만 — hero__inner 상하 padding 보호 */
.landing-page div.container { max-width: 1080px; margin: 0 auto !important; padding-left: 20px !important; padding-right: 20px !important; }
@media (min-width:821px) { .landing-page div.container { padding-left: 36px !important; padding-right: 36px !important; } }

/* ── 공통 섹션 헤더 ───────────────────────────────────────────────── */
.landing-page .sec-head  { display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px; }
.landing-page .sec-title { font-size:24px;font-weight:700;color:var(--lp-text);border-left:4px solid var(--lp-point);padding-left:12px;margin:0;line-height:1.2; }
.landing-page .sec-title small { display:block;font-size:13px;font-weight:400;color:var(--lp-sec);border:0;padding:0;margin-top:4px; }
.landing-page .sec-ts    { font-size:13px;color:var(--lp-muted);white-space:nowrap; }
.landing-page .more-link { font-size:14px;font-weight:600;color:var(--lp-link); }
.landing-page .block     { padding:36px 0; }
.landing-page .block--tint { background:#eef2f7; }

/* 카드 공통 */
.landing-page .card { background:var(--lp-card);border-radius:var(--lp-radius);border:1px solid var(--lp-border);box-shadow:var(--lp-shadow); }
.landing-page .lift { transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease; }
.landing-page .lift:hover { box-shadow:var(--lp-shover);transform:translateY(-1px);border-color:#3b82f6; }
.landing-page .up   { color:var(--lp-up); }
.landing-page .down { color:var(--lp-down); }

/* 광고 슬롯 */
.landing-page .ad { border:1px dashed #cbd5e1;border-radius:var(--lp-radius);background:#f8fafc;color:#94a3b8;text-align:center;padding:18px;font-size:13px;letter-spacing:.02em; }
.landing-page .ad b { color:#64748b;font-weight:700; }

/* ── 요약 스트립 — CSS 마퀴 티커 (R5: NO JS · DOM 2x · hover pause · reduced-motion) ── */
/* R10: .summary-strip = 풀블리드 배경 밴드 / flex row는 .summary-strip__row(container 내부)로 분리 */
.summary-strip { background:var(--lp-text);color:#e2e8f0;font-size:14px;overflow:hidden;height:38px; }
.summary-strip__row { display:flex;align-items:center;height:100%; }
/* R9증분/R10: strip-label 고정(flex:0 0 auto), container 패딩으로 좌측 여백 확보 */
.strip-label { flex:0 0 auto;font-size:12px;font-weight:700;color:#94a3b8;white-space:nowrap;padding:0 14px 0 0;letter-spacing:.04em;border-right:1px solid rgba(255,255,255,.1); }
.strip-ticker { flex:1 1 auto;overflow:hidden;min-width:0; }
.ticker-track { display:flex;align-items:center;width:max-content;animation:lp-ticker var(--tkdur,27s) linear infinite; }
.summary-strip:hover .ticker-track { animation-play-state:paused; }
@keyframes lp-ticker { 0% { transform:translateX(0); } 100% { transform:translateX(-50%); } }
.ticker-item { display:inline-flex;align-items:center;gap:5px;white-space:nowrap;padding:0 8px;color:#e2e8f0;text-decoration:none;font-size:13px;border-radius:4px; }
.ticker-item:hover { color:#fff;background:rgba(255,255,255,.08); }
.tk-name  { font-weight:700;color:#fff; }        /* 시안: 품목명 #fff 700 */
.tk-price { font-size:13px;color:#e2e8f0; }
.tk-unit  { font-size:11px;color:#94a3b8; }
.tk-chg   { font-size:12px;font-weight:700;color:#94a3b8; } /* 보합 기본색 */
.tk-chg.up   { color:#f87171; }                  /* 시안: 상승 */
.tk-chg.down { color:#93c5fd; }                  /* 시안: 하락 */
.tk-sep { color:#64748b;padding:0 4px; }          /* 시안: 구분점 */
@media (prefers-reduced-motion:reduce) { .ticker-track { animation:none; } }

/* ── 히어로 ───────────────────────────────────────────────────────── */
.landing-page .hero { background:linear-gradient(135deg,#1e3a8a 0%,#1e293b 100%);color:#fff; }
.landing-page .hero__inner { padding:40px 0 44px; }
.landing-page .hero__h1 { font-size:36px;font-weight:800;line-height:1.22;margin:0 0 14px;letter-spacing:-.02em; }
@media(max-width:640px) { .landing-page .hero__h1 { font-size:26px; } }
.landing-page .hero__sum { font-size:16px;line-height:1.85;color:rgba(255,255,255,.9);max-width:720px;margin:0 0 22px; }
.landing-page .hero__sum b { color:#fff;font-weight:700; }
.landing-page .hero__stats { display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px; }
.landing-page .stat-pill { display:inline-flex;align-items:baseline;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:10px 16px;text-decoration:none;transition:background .15s ease,border-color .15s ease; }
.landing-page .stat-pill:hover { background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.3);color:inherit; }
.landing-page .stat-pill__k { font-size:13px;color:rgba(255,255,255,.72); }
.landing-page .stat-pill__v { font-size:19px;font-weight:800;color:#fff; }
.landing-page .stat-pill__c { font-size:13px;font-weight:700; }
.landing-page .stat-pill .u { color:#fca5a5; }
.landing-page .stat-pill .d { color:#93c5fd; }
/* ── module-stat-pill 범용 승격 (2026-07-10) — .landing-page 스코프 무변경·기존 랜딩 무영향. data-only 계약: pills[{k,v,c:{dir,text}}] + tone='dark'|'light'. */
.module-stat-pill { display:flex;flex-wrap:wrap;gap:8px;padding:10px 0; }
.module-stat-pill .stat-pill { display:inline-flex;align-items:baseline;gap:8px;border-radius:12px;padding:10px 16px; }
.module-stat-pill .stat-pill__k { font-size:13px; }
.module-stat-pill .stat-pill__v { font-size:19px;font-weight:800; }
.module-stat-pill .stat-pill__c { font-size:13px;font-weight:700; }
.module-stat-pill--dark .stat-pill { background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14); }
.module-stat-pill--dark .stat-pill__k { color:rgba(255,255,255,.72); }
.module-stat-pill--dark .stat-pill__v { color:#fff; }
.module-stat-pill--dark .stat-pill .u { color:#fca5a5; }
.module-stat-pill--dark .stat-pill .d { color:#93c5fd; }
.module-stat-pill--light .stat-pill { background:#f5f5f5;border:1px solid #e5e7eb; }
.module-stat-pill--light .stat-pill__k { color:#6b7280; }
.module-stat-pill--light .stat-pill__v { color:#111827; }
.module-stat-pill--light .stat-pill .u { color:#dc2626; }
.module-stat-pill--light .stat-pill .d { color:#2563eb; }
.landing-page .hero__chip-label { font-size:13px;font-weight:600;color:rgba(255,255,255,.7);margin:0 0 10px; }
/* R3: 폭 제한 해제 → 컨테이너 전폭(4열 grid·gap 자동 확장). .hero__sum은 가독성 위해 max-width:720px 유지 */
.landing-page .chips { display:grid;grid-template-columns:repeat(4,1fr);gap:10px; }
@media(max-width:820px) { .landing-page .chips { grid-template-columns:repeat(2,1fr); } }
.landing-page .chip { display:flex;align-items:center;justify-content:space-between;gap:8px;background:rgba(255,255,255,.96);border-radius:10px;padding:12px 14px;min-height:52px;color:var(--lp-text);transition:transform .15s ease,box-shadow .2s ease; }
.landing-page .chip:hover { transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25);color:var(--lp-text); }
.landing-page .chip__name { font-size:14px;font-weight:700; }
.landing-page .chip__val  { font-size:13px;font-weight:700;text-align:right;line-height:1.3; }
.landing-page .chip__unit { font-size:11px;font-weight:400;color:var(--lp-sec); }
.landing-page .chip__val .c { display:block;font-size:11px;font-weight:700; }
.landing-page .hero__all  { display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:15px;font-weight:700;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);padding:11px 20px;border-radius:24px; }
.landing-page .hero__all:hover { color:#fff;background:rgba(255,255,255,.24); }

/* ── 오늘 시세판 ──────────────────────────────────────────────────── */
/* 주목 차트 */
.landing-page .feature        { padding:22px 24px;margin-bottom:18px; }
.landing-page .feature__top   { display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:14px; }
.landing-page .feature__label { font-size:13px;font-weight:700;color:var(--lp-sec);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px; }
.landing-page .feature__price { font-size:34px;font-weight:800;color:var(--lp-text);line-height:1.05; }
.landing-page .feature__price .u { font-size:14px;font-weight:400;color:var(--lp-sec);margin-left:4px; }
.landing-page .badges    { display:flex;gap:8px;margin-top:10px;flex-wrap:wrap; }
.landing-page .badge     { display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:4px 12px;border-radius:20px; }
.landing-page .badge--up   { color:var(--lp-up);background:#fef2f2; }
.landing-page .badge--down { color:var(--lp-down);background:#eff6ff; }
.landing-page .badge small { font-size:11px;font-weight:400;opacity:.75; }
.landing-page .tabs { display:flex;border:1px solid var(--lp-border);border-radius:6px;overflow:hidden;width:fit-content; }
.landing-page .tabs button { padding:6px 15px;font-size:13px;font-weight:700;color:var(--lp-sec);background:#fff;border:0;border-right:1px solid var(--lp-border);cursor:pointer;font-family:inherit; }
.landing-page .tabs button:last-child { border-right:0; }
.landing-page .tabs button.on { background:var(--lp-link);color:#fff; }
.landing-page .chart-wrap { overflow-x:auto; }
.landing-page .chart-svg  { display:block;width:100%;max-width:100%; }
/* R55: 모바일 SVG 이중 렌더 — 데스크톱 기본/모바일 전환 */
.landing-page .chart-svg--mob { display:none; }
@media (max-width:640px) {
  .landing-page .chart-svg--desk { display:none; }
  .landing-page .chart-svg--mob  { display:block; }
}
.landing-page .legend     { display:flex;gap:16px;flex-wrap:wrap;margin:12px 0 0; }
.landing-page .legend span { display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--lp-sec); }
.landing-page .legend i   { width:20px;height:0;border-top-width:2px;border-top-style:solid;display:inline-block; }
.landing-page .cp { cursor:pointer; }
.landing-page .cp .ct { visibility:hidden;pointer-events:none; }
.landing-page .cp:hover .ct, .landing-page .cp:focus .ct { visibility:visible; }
/* R40: .cp 내 원 기본 hidden — Pass A 정적 원이 보임, 호버 시 .cp 원만 확대 페인트 */
.landing-page .cp circle { visibility:hidden; }
/* R27/R40: 호버 시 .cp 원 표시 + 확대 (r:7 — 모든 정적 요소 위에 페인트) */
.landing-page .cp:hover circle, .landing-page .cp:focus circle { visibility:visible; r:7; }
/* R28: 호버 열 음영 — 현재 열 전체 밴드를 인디고 7% 으로 강조 */
.landing-page .cp:hover .cp__band, .landing-page .cp:focus .cp__band { fill:rgba(99,102,241,.07); }
/* R50: feature-panel 차트 수직 가이드선 (CSS-only hover · 스파크 미적용) */
.landing-page .cp__guide { visibility:hidden; stroke:#94a3b8; stroke-width:1; stroke-dasharray:2,3; pointer-events:none; }
.landing-page .cp:hover .cp__guide, .landing-page .cp:focus .cp__guide { visibility:visible; }
/* R54: 도넛 → feature__top 우측(기존 space-between 활용) — fp-chart-row 제거·차트 단독 100% */
.landing-page .fp-donut-wrap { flex-shrink:0; }
@media (max-width:640px) {
  .landing-page .feature__top { flex-direction:column; }
  .landing-page .fp-donut-wrap { margin-top:12px; }
}
/* R51: module-chart-panel 자립 박스·스코프 — data-only 계약(사용처 보정 CSS 0) */
.module-chart-panel { padding:22px 24px;background:#ffffff;border-radius:8px;border:1px solid #e2e8f0;box-shadow:0 4px 12px rgba(0,0,0,.06);box-sizing:border-box;font-family:-apple-system,'Noto Sans KR',sans-serif;font-size:16px;color:#1e293b;line-height:1.5; }
.module-chart-panel * { box-sizing:border-box; }
/* 홈: .card 안에서는 박스·폰트 중복 제거 — .card+.feature가 동일 값 공급·렌더 불변(padding:0 → .feature 22px 24px 그대로 발효) */
.landing-page .card .module-chart-panel { padding:0;background:none;border:none;border-radius:0;box-shadow:none;font-size:inherit;color:inherit;line-height:inherit; }
/* R54: 차트 폭=컨테이너 100%(R53 고정폭 철회) — .landing-page .chart-svg 기존 100% 규칙으로 충분 */
/* R4: 품목 탭 패널 show/hide */
.landing-page .chart-panel { display:none; }
.landing-page .chart-panel.on { display:block; }
.landing-page .item-tabs { display:flex;gap:6px;flex-wrap:wrap;margin:0 0 10px; }
.landing-page .itab { padding:6px 14px;font-size:13px;border-radius:20px;border:1px solid #e2e8f0;background:#fff;color:#475569;cursor:pointer;font-family:inherit; }
.landing-page .itab.on { background:#1e293b;color:#fff;border-color:#1e293b; } /* 2026-07-11 확정: 선택=중립 다크 채움 — 구 파랑 채움은 하락(파랑) 선택 시 ▼ 매몰·의미 충돌. 인지 최강+의미 중립 */
.landing-page .itab.on small.up { color:#f87171; }   /* 다크 배경 등락 문법(티커·R52 다크 툴팁과 동일 팔레트) */
.landing-page .itab.on small.down { color:#93c5fd; }

/* KPI 그리드 */
/* R13: grid-auto-rows:1fr — 행별 높이 균일(롤링·이중배지 유무 무관) */
.landing-page .board { display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:14px; }
@media(max-width:900px) { .landing-page .board { grid-template-columns:repeat(3,1fr); } }
@media(max-width:640px) { .landing-page .board { grid-template-columns:repeat(2,1fr); } }
/* R13: flex-column+height:100% — 카드가 그리드 셀 전체를 채우고 내부 요소 수직 배치 */
.landing-page .kpi         { padding:16px 18px;display:flex;flex-direction:column;height:100%;color:inherit; }
.landing-page .kpi__group  { font-size:11px;font-weight:700;color:var(--lp-muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px; }
.landing-page .kpi__label  { font-size:15px;font-weight:700;color:var(--lp-text);margin-bottom:8px; }
.landing-page .kpi__price  { font-size:22px;font-weight:800;color:var(--lp-text);line-height:1.1; }
.landing-page .kpi__price .u { font-size:12px;font-weight:400;color:var(--lp-sec);margin-left:2px; }
.landing-page .kpi__chg    { font-size:13px;font-weight:700;margin-top:4px; }
.landing-page .kpi__dual   { display:flex;gap:6px;margin-top:6px;flex-wrap:wrap; }
.landing-page .kpi__dual span { font-size:12px;font-weight:700; }
.landing-page .kpi__spark  { margin:8px 0 4px;display:block; }
/* R11/R14: spark-area min-height 예약은 .kpi--has-spark 카드에만 적용
   → spark 전무 카드 40px 여백 소거 / 스파크 보유 카드 내 슬라이드 높이 균일 유지 */
.landing-page .kpi--has-spark .kpi__spark-area { min-height:40px; }
/* R13: margin-top:auto — ts를 카드 하단에 고정(내용 적은 카드는 여백으로 흡수) */
.landing-page .kpi__ts     { font-size:11px;color:var(--lp-muted);margin-top:auto;padding-top:6px; }
/* R24: 1주 소자 — 스파크 동일 소스·방향 색 일관 */
.landing-page .kpi__week        { font-size:11px;color:#64748b;margin-top:2px;line-height:1.4; }
.landing-page .kpi__week--up    { color:#dc2626; }
.landing-page .kpi__week--down  { color:#2563eb; }
/* R4: KPI 롤링 (다품목)
   R122(라이브 실증 — 모바일 카드 높이 출렁): display:none 전환은 "현재 슬라이드만 배치 참여"라
   슬라이드 높이가 다르면(긴 품목명 줄바꿈·추이선 유무) 카드가 3초마다 늘었다 줄고, 보드의
   grid-auto-rows:1fr이 그 출렁임을 전 행(금시세 등 정적 카드까지)에 전파했다.
   → 전 슬라이드를 같은 그리드 칸(1/1)에 겹쳐 상시 배치(카드 높이 = 최대 슬라이드로 고정·CLS 0)하고
   보이기만 visibility로 전환. 부수효과: display:none 소거 = 숨김 텍스트 SEO 우려 해소. */
.landing-page .kpi--multi .kpi__roll { display:grid; } /* R142b: relative 제거(구 절대배치 잔재) — 남아 있으면 전면 클릭 ::after의 기준이 카드가 아닌 롤 영역에 걸려 "일부만 링크"(라이브 실증). 기준=.card.kpi(relative) */
.landing-page .kroll { grid-area:1/1; visibility:hidden; opacity:0; transform:translateY(4px); transition:opacity .45s ease, transform .45s ease, visibility 0s linear .45s; } /* R125: 떠오름 */
.landing-page .kroll.on { visibility:visible; opacity:1; transform:none; transition:opacity .45s ease, transform .45s ease; } /* R142d(라이브 실증 — 전면 클릭이 슬라이드 영역에 갇힘): translateY(0)도 transform이라 ::after의 기준점을 앵커 자신으로 만든다 → none(항등)으로 교체. 떠오름 전환(4px→none 보간)은 동일 */
.landing-page .kroll__name { font-size:11px;font-weight:700;color:var(--lp-muted);letter-spacing:.03em;margin-bottom:2px; }

/* ── 무버 ─────────────────────────────────────────────────────────── */
.landing-page .movers       { display:grid;grid-template-columns:1fr 1fr;gap:16px; }
@media(max-width:640px) { .landing-page .movers { grid-template-columns:1fr; } }
.landing-page .mgroup       { overflow:hidden; }
.landing-page .mgroup__h    { padding:12px 18px;font-size:14px;font-weight:700;display:flex;align-items:center;gap:8px; }
.landing-page .mgroup__h--up   { background:#fef2f2;color:#991b1b; }
.landing-page .mgroup__h--down { background:#eff6ff;color:#1e40af; }
.landing-page .mitem        { display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--lp-subtle);color:inherit;transition:background .15s; }
.landing-page .mitem:last-child { border-bottom:0; }
.landing-page .mitem:hover  { background:var(--lp-subtle);color:inherit; }
.landing-page .mitem__rank  { font-size:14px;font-weight:800;color:var(--lp-muted);width:18px;flex-shrink:0; }
.landing-page .mitem__info  { flex:1; }
.landing-page .mitem__label { font-size:15px;font-weight:700;color:var(--lp-text); }
.landing-page .mitem__sub   { font-size:12px;color:var(--lp-sec); }
.landing-page .mitem__r     { text-align:right; }
.landing-page .mitem__chg   { font-size:15px;font-weight:800; }
.landing-page .mitem__px    { font-size:12px;color:var(--lp-muted); }
/* R6b: 미달 정직 문구 — 채우기 왜곡 금지 원칙(TOP3 미달 시 실 후보 수 노출) */
.landing-page .mitem__shortfall { font-size:12px;color:var(--lp-muted);padding:10px 16px;border-top:1px solid var(--lp-subtle); }

/* ── 즉답 밴드 ────────────────────────────────────────────────────── */
.landing-page .answers { display:grid;grid-template-columns:repeat(3,1fr);gap:14px; }
@media(max-width:820px) { .landing-page .answers { grid-template-columns:1fr 1fr; } }
@media(max-width:560px) { .landing-page .answers { grid-template-columns:1fr; } }
/* R4: a-in-a 해소 — 외부<div>+flex, 내부<a>로 분리, .afoot margin-top:auto */
.landing-page .acard  { padding:20px 22px;display:flex;flex-direction:column;color:inherit; }
.landing-page .acard__body { display:block;text-decoration:none;color:inherit;flex:1; }
.landing-page .atag   { display:inline-block;font-size:11px;font-weight:700;padding:2px 8px;border-radius:4px;margin-bottom:10px;text-transform:uppercase;letter-spacing:.05em; }
.landing-page .atag--buy  { background:#fef2f2;color:#991b1b; }
.landing-page .atag--sell { background:#eff6ff;color:#1e40af; }
.landing-page .atag--low  { background:#f0fdf4;color:#14532d; }
.landing-page .aq     { font-size:15px;font-weight:700;color:var(--lp-text);margin-bottom:12px;line-height:1.4; }
.landing-page .arow   { display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:6px;background:var(--lp-subtle);margin-bottom:8px; }
.landing-page .arow:last-of-type { margin-bottom:0; }
.landing-page .arow__k { font-size:14px;color:var(--lp-sec); }
.landing-page .arow__v { font-size:17px;font-weight:800; }
.landing-page .afoot  { margin-top:auto;padding-top:10px;border-top:1px solid var(--lp-subtle);font-size:12px;color:var(--lp-muted);display:flex;justify-content:space-between;align-items:center; }
.landing-page .afoot a { font-size:13px;font-weight:700; }

/* ── 지역 관문 ────────────────────────────────────────────────────── */
.landing-page .region      { padding:24px; }
.landing-page .region__bar { display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:18px; }
/* R5: appearance:none + SVG 화살표 배경 — 브라우저 기본 화살표 제거 후 커스텀 */
.landing-page .region__sel { font-size:15px;font-weight:700;color:var(--lp-text);border:1px solid var(--lp-border);border-radius:8px;padding:10px 34px 10px 14px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2364748b' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;background-size:16px 16px;appearance:none;-webkit-appearance:none;font-family:inherit;min-height:44px;min-width:140px;cursor:pointer; }
.landing-page .region__tabs { display:flex;gap:8px; }
.landing-page .rtab        { font-size:14px;font-weight:700;padding:10px 16px;border-radius:8px;border:1px solid var(--lp-border);background:#fff;color:var(--lp-sec);cursor:pointer;font-family:inherit;min-height:44px; }
.landing-page .rtab.on     { background:var(--lp-link);color:#fff;border-color:var(--lp-link); }
.landing-page .rlist       { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
@media(max-width:640px) { .landing-page .rlist { grid-template-columns:1fr; } }
.landing-page .rrow        { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--lp-blt);border-radius:8px;background:var(--lp-subtle);color:inherit; }
.landing-page .rrow:hover  { border-color:#3b82f6;background:#fff; }
.landing-page .rrow__name  { font-size:15px;font-weight:700;color:var(--lp-text); }
.landing-page .rrow__sub   { font-size:12px;color:var(--lp-sec);margin-top:2px; }
.landing-page .rrow__v     { font-size:17px;font-weight:800;text-align:right; }
.landing-page .rrow__badge { font-size:11px;font-weight:700;color:#14532d;background:#f0fdf4;padding:2px 7px;border-radius:4px;margin-left:6px; }
.landing-page .rpane       { display:none; }
.landing-page .rpane.on    { display:block; }

/* ── 가이드 카드 ──────────────────────────────────────────────────── */
.landing-page .guides      { display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }
@media(max-width:820px) { .landing-page .guides { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px) { .landing-page .guides { grid-template-columns:1fr; } }
.landing-page .gcard       { padding:16px 18px;display:flex;flex-direction:column;gap:6px;color:inherit;min-height:104px; }
.landing-page .gcard__kicker { font-size:11px;font-weight:700;color:var(--lp-point);text-transform:uppercase;letter-spacing:.05em; }
.landing-page .gcard__title  { font-size:16px;font-weight:700;color:var(--lp-text);line-height:1.4; }
.landing-page .gcard__desc   { font-size:13px;color:var(--lp-sec);line-height:1.5;margin-top:auto; }

/* ── FAQ + 출처 ───────────────────────────────────────────────────── */
.landing-page .faq-grid    { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
@media(max-width:720px) { .landing-page .faq-grid { grid-template-columns:1fr; } }
.landing-page .faq         { padding:18px 20px; }
.landing-page .faq__q      { font-size:16px;font-weight:700;color:var(--lp-text);margin:0 0 8px;display:flex;gap:8px; }
.landing-page .faq__q .qmark { color:var(--lp-link);font-weight:800; }
.landing-page .faq__a      { font-size:15px;color:var(--lp-body);line-height:1.7;margin:0; }
.landing-page .faq__a b    { color:var(--lp-text);font-weight:700; }
.landing-page .sources     { margin-top:20px;padding:20px 24px; }
.landing-page .sources__title { font-size:14px;font-weight:700;color:var(--lp-sec);margin:0 0 12px;text-transform:uppercase;letter-spacing:.04em; }
.landing-page .src-list    { display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px; }
.landing-page .src-chip    { font-size:12px;font-weight:600;color:var(--lp-sec);background:var(--lp-subtle);border:1px solid var(--lp-blt);padding:5px 11px;border-radius:20px; }
.landing-page .disclaimer  { font-size:12px;color:var(--lp-muted);line-height:1.7;border-top:1px solid var(--lp-blt);padding-top:12px; }


/* R64: .module-chart-panel 스코프 범용 규칙 — .landing-page 없는 페이지(스포크·일반 콘텐츠)에서 동작 보장
   기존 .landing-page 스코프 무변경·추가만(기존 라인 변경 0). CSS 변수 정적 등가값 사용. */
.module-chart-panel .feature__top   { display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:14px; }
.module-chart-panel .feature__label { font-size:13px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px; }
.module-chart-panel .feature__price { font-size:34px;font-weight:800;color:#1e293b;line-height:1.05; }
.module-chart-panel .feature__price .u { font-size:14px;font-weight:400;color:#475569;margin-left:4px; }
.module-chart-panel .badges    { display:flex;gap:8px;margin-top:10px;flex-wrap:wrap; }
.module-chart-panel .badge     { display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:4px 12px;border-radius:20px; }
.module-chart-panel .badge--up   { color:#dc2626;background:#fef2f2; }
.module-chart-panel .badge--down { color:#2563eb;background:#eff6ff; }
.module-chart-panel .badge small { font-size:11px;font-weight:400;opacity:.75; }
.module-chart-panel .chart-wrap { overflow-x:auto; }
.module-chart-panel .chart-svg  { display:block;width:100%;max-width:100%; }
.module-chart-panel .chart-svg--mob { display:none; }
@media (max-width:640px) {
  .module-chart-panel .chart-svg--desk { display:none; }
  .module-chart-panel .chart-svg--mob  { display:block; }
}
.module-chart-panel .legend     { display:flex;gap:16px;flex-wrap:wrap;margin:12px 0 0; }
.module-chart-panel .legend span { display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#475569; }
.module-chart-panel .legend i   { width:20px;height:0;border-top-width:2px;border-top-style:solid;display:inline-block; }
.module-chart-panel .cp { cursor:pointer; }
.module-chart-panel .cp .ct { visibility:hidden;pointer-events:none; }
.module-chart-panel .cp:hover .ct, .module-chart-panel .cp:focus .ct { visibility:visible; }
.module-chart-panel .cp circle { visibility:hidden; }
.module-chart-panel .cp:hover circle, .module-chart-panel .cp:focus circle { visibility:visible; r:7; }
.module-chart-panel .cp:hover .cp__band, .module-chart-panel .cp:focus .cp__band { fill:rgba(99,102,241,.07); }
.module-chart-panel .cp__guide { visibility:hidden; stroke:#94a3b8; stroke-width:1; stroke-dasharray:2,3; pointer-events:none; }
.module-chart-panel .cp:hover .cp__guide, .module-chart-panel .cp:focus .cp__guide { visibility:visible; }
.module-chart-panel .fp-donut-wrap { flex-shrink:0; }
@media (max-width:640px) {
  .module-chart-panel .feature__top { flex-direction:column; }
  .module-chart-panel .fp-donut-wrap { margin-top:12px; }
}
.module-chart-panel .chart-panel { display:none; }
.module-chart-panel .chart-panel.on { display:block; }

/* R68b (2026-07-11): rich가 module: chart 경로(figure 래퍼 .module-chart--rich)로 렌더될 때의 스코프 —
   패널(.module-chart-panel)·랜딩(.landing-page)과 동일 인터랙션 규칙. 부재 시 툴팁 전체 동시 표시·호버 불능. */
.module-chart--rich .chart-svg { display:block;width:100%;max-width:100%; }
.module-chart--rich .chart-svg--mob { display:none; }
@media (max-width:640px) {
  .module-chart--rich .chart-svg--desk { display:none; }
  .module-chart--rich .chart-svg--mob  { display:block; }
}
.module-chart--rich .cp { cursor:pointer; }
.module-chart--rich .cp .ct { visibility:hidden;pointer-events:none; }
.module-chart--rich .cp:hover .ct, .module-chart--rich .cp:focus .ct { visibility:visible; }
.module-chart--rich .cp circle { visibility:hidden; }
.module-chart--rich .cp:hover circle, .module-chart--rich .cp:focus circle { visibility:visible; r:7; }
.module-chart--rich .cp:hover .cp__band, .module-chart--rich .cp:focus .cp__band { fill:rgba(99,102,241,.07); }
.module-chart--rich .cp__guide { visibility:hidden; stroke:#94a3b8; stroke-width:1; stroke-dasharray:2,3; pointer-events:none; }
.module-chart--rich .cp:hover .cp__guide, .module-chart--rich .cp:focus .cp__guide { visibility:visible; }

/* ── R114: 오늘 오른/내린 시세 롤링 2+2 카드 (2026-07-12) ─────────────────────────
   데스크탑: .lp-updown 2열(상승그룹|하락그룹) × 각 그룹 .lp-updown__cards 2열 = 1행 4카드
   모바일  : .lp-updown 1열 스택 → 상승 2카드 1행, 하락 2카드 1행 */
.landing-page .lp-updown { display:grid;grid-template-columns:1fr 1fr;gap:20px; }
@media(max-width:640px) { .landing-page .lp-updown { grid-template-columns:1fr; } }
.landing-page .lp-updown__gh { font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:10px;padding-left:2px; } /* R119: 13→16px(사용자 확정 최소 16) */
.landing-page .lp-updown__group--up .lp-updown__gh { color:#991b1b; }
.landing-page .lp-updown__group--dn .lp-updown__gh { color:#1e40af; }
.landing-page .lp-updown__cards { display:grid;grid-template-columns:1fr 1fr;gap:12px; }

/* ── R107h: hub-kpi-board — .landing-page 단독 룰 중화(허브 인라인 모듈 컨텍스트) ── */
/* .landing-page { background:var(--lp-bg); overflow-x:hidden } 이 허브 섹션 내부에서 발동하지 않도록 리셋. */
.landing-page.hub-kpi-board { background:transparent;overflow-x:visible; }
/* 하단 각주 스타일 (kpi-board.php module_kpi_board() 출력) */
.landing-page.hub-kpi-board .kpi-board__note { font-size:13px;color:#94a3b8;margin:8px 0 0; }

/* ── R115: 무버 슬라이드 스파크 — 높이 예약·SVG 비율 ──────────────────────────
   .kpi--has-spark .kpi__spark-area { min-height:40px } 는 R11/R14 룰(line 11520)이 이미 담당.
   무버 카드(.lp-updown 내 .kpi--multi.kpi--has-spark)는 동일 룰 재사용 — 추가 셀렉터 불필요.
   슬라이드별 spark SVG는 kpi-card.php _roll_sparks 배열로 주입(series=null → 빈 div · series 有 → SVG). */

/* ── R117: 허브 오른/내린 롤링 섹션 (2026-07-12) ───────────────────────────────
   updown-board 모듈 래퍼(.hub-updown) 중화 — hub-kpi-board 미러(배경·overflow 리셋).
   슬라이드 <a.kroll> 링크 스타일 리셋 — 상속 색·하이라이트 제거.
   display:none/block 제어는 기존 .landing-page .kroll / .kroll.on 룰 그대로 재사용. */
.landing-page.hub-updown { background:transparent;overflow-x:visible; }
.landing-page a.kroll { color:inherit;text-decoration:none; }

/* ── R125: 롤링 점 인디케이터 — "여러 슬라이드+현재 위치" 상시 신호(모션 아님) ── */
.landing-page .kroll-dots { display:flex;gap:5px;justify-content:center;margin-top:6px; }
.landing-page .kroll-dots span { width:5px;height:5px;border-radius:50%;background:#cbd5e1;cursor:pointer;transition:background .3s; } /* R142c3(사용자 확정): 크기 원복(5px)·상태는 색으로만 */
.landing-page .kroll-dots span:hover { background:#64748b; }
.landing-page .kroll-dots span.on { background:#1e293b; } /* R142c4: 활성 점만 최대 대비(중립 잉크색 — 등락 빨강/파랑과 비충돌) */

/* ── R142: 롤 카드 전면 클릭(stretched-link) — "보이는 슬라이드의 링크가 카드 전체를 덮는다" ──
   슬라이드 앵커 구조(내용-링크 일치)를 유지하면서 클릭 영역만 카드 전면으로 확장.
   점 인디케이터는 z-index 상위로 클릭 유지. */
.landing-page .card.kpi { position:relative; }
.landing-page a.kroll.on::after { content:""; position:absolute; inset:0; z-index:1; }
.landing-page .kroll-dots { position:relative; z-index:2; }

/* ==========================================================================
   dv-tier 발산 판정색 토큰(공유 SSOT) — 2026-07-17 B6 신설 · B17 재편성
   정본: 00-공통/평점-장단점-모듈-설계-정본.md §3·§8. 판정색(dv-tier)=등락색과 별개 의미축(혼용 금지·좋고나쁨).
   색 SSOT = .dv-tier-1..5 5개 클래스(타일/바/배지가 참조만). 소비 모듈 = review-panel·overall-score·rate-bar(아래).
   ========================================================================== */
/* 발산 판정색 토큰(공유 SSOT) — 낮음=적(1) → 높음=녹(5). --dv-accent(채움)·--dv-bg(배경)·--dv-fg(글자). */
.dv-tier-1 { --dv-accent:#b91c1c; --dv-bg:#fef2f2; --dv-fg:#b91c1c; }
.dv-tier-2 { --dv-accent:#ea580c; --dv-bg:#fff7ed; --dv-fg:#c2410c; }
.dv-tier-3 { --dv-accent:#ca8a04; --dv-bg:#fefce8; --dv-fg:#a16207; }
.dv-tier-4 { --dv-accent:#65a30d; --dv-bg:#f7fee7; --dv-fg:#4d7c0f; }
.dv-tier-5 { --dv-accent:#16a34a; --dv-bg:#f0fdf4; --dv-fg:#15803d; }

/* 인라인 순위 배지(표 셀·상품 행 "N위/430") — dv-tier 색 참조. */
.dv-rank-badge {
  display:inline-block; padding:1px 7px; border-radius:999px;
  background:var(--dv-bg,#f1f5f9); color:var(--dv-fg,#475569);
  border:1px solid color-mix(in srgb, var(--dv-accent,#94a3b8) 40%, transparent);
  font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* [색 설계 이력·복원 레시피 2026-07-17]
   1차 확정안(폐기 아님·계약 옵션으로 잔존): 판정 스케일 = dv-tier 5단 상시(타일/바/도넛 색=tier 토큰).
     복원 = 호스트 data에 color_mode:'tier' 1줄(모듈 코드 경로 유지됨).
   검토 후 미채택안(기록만): 한국형 5단 재정의 — tier5 #e43917 / 4 #f97316 / 3 #ca8a04 / 2 #60a5fa / 1 #2563eb.
   현행: color_mode 기본 'accent' = REHub 버밀리언 단색(--rv-accent) + 전 바 "길수록 좋음" 통일(우대갭=정직성 반전). */
/* B18(지휘자 증분⑥·⑥보완): 리뷰 모듈 단색 SSOT — 기본 color_mode='accent'(=--rv-accent 단색·REHub 버밀리언 #E43917). 트랙=#ddd(REHub).
   color_mode='tier'(이식처 선택·--tiercolor 모디파이어)=dv-tier 스케일 참조. dv-tier 토큰 5줄은 무변경(조건 칩 등 기존 사용처 유지). */
.module-review-panel, .module-overall-score, .module-rate-bar { --rv-accent:#e43917; --rv-track:#ddd; }

/* ── review-panel (조립 패널·부유 카드) ── B17 신설(REHub .rate_bar_wrap·R17 §3-6 사상) */
.module-review-panel {
  margin:24px 0 32px; padding:26px 28px;
  border-radius:var(--color-radius-lg); background:#fff;
  box-shadow:0 2px 20px rgba(0,0,0,.08);
}
.module-review-panel > .module-overall-score {
  margin-bottom:18px; padding-bottom:18px; border-bottom:1px solid var(--color-border);
}
.module-review-panel > .module-rate-bar { margin-top:0; }
.module-review-panel > .module-pros-cons { margin-top:22px; }
.module-review-panel__cta { margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.module-review-panel__cta-btn {
  display:inline-block; padding:11px 22px; border-radius:10px;
  background:var(--color-primary,#1d4ed8); color:#fff; font-weight:800; font-size:15px;
  text-decoration:none; transition:background .15s;
}
.module-review-panel__cta-btn:hover { background:var(--color-primary-dark,#1e40af); color:#fff; }
.module-review-panel__cta-notice { font-size:11.5px; font-weight:700; color:var(--color-text-muted); }
.module-review-panel__attribution { margin:18px 0 0; font-size:12px; color:var(--color-text-muted); line-height:1.5; }

/* ── overall-score (총점 헤더·tile 기본 / circle·badge 분기) ── B17 신설(REHub .overall-score·Metacritic 타일 사상) */
.module-overall-score { margin:0; }
/* B20(지휘자 증분·사용자 07-18·REHub .overall-score{float:left;margin:0 20px 10px 0} 정합): 타일 좌측 고정 + __meta 우측 잔여 폭·상단 정렬(교차축 flex-start — 요약 첫 줄이 타일 상단과 나란히·세로 가운데 금지). 가로 간격 20px·타일 하단(줄바꿈 시) 여백 10px=row-gap. 모바일=세로 스택(하단 640px 규칙). */
.module-overall-score__head { display:flex; flex-wrap:wrap; gap:10px 20px; align-items:flex-start; }
.module-overall-score__tile {
  flex:0 0 auto; min-width:100px; max-width:210px;
  border-radius:6px; overflow:hidden; text-align:center;
  background:var(--rv-accent,#e43917); box-shadow:var(--color-shadow-sm);   /* B18⑥: 리뷰 단색 rv-accent(REHub 버밀리언) */
}
/* B19(지휘자 재확정 07-18): 타일(tile 변형) 정사각 실루엣 — 폭 110px 고정(REHub 100px 사상·유료 테마 정사각 선호). 축약 라벨(≤12자·source)은 타일 폭 안 2줄 이내.
   circle/badge/donut는 자체 override 유지 → flex-basis/width 누출(원형 왜곡) 방지 위해 tile 변형에만 스코프. */
.module-overall-score--tile .module-overall-score__tile { flex:0 0 110px; width:110px; min-width:0; max-width:110px; }
/* 높이 복원(2026-07-18 사용자 확정: "스코어 박스 높이 이전으로") — 34~42px 축소분 철회.
   48px = 110px 폭에 "11위"(≈2.2em·탭숫자) 물리 수용 상한(52px는 폭 초과 — 넓은 타일 전용). 세로 padding 보강으로 이전 높이 근사. */
.module-overall-score--tile .module-overall-score__value { font-size:clamp(40px,8vw,48px); padding:12px 2px 10px; }
/* B22(07-18 사용자 확정·REHub 적층 분석): 캡션 바가 빨강 위 "띠"로 떠 보이는 편차 차단 — 타일=flex 세로 적층,
   숫자 영역=가변(중앙 배치), 검정 캡션=항상 최하단 전폭 밀착(REHub .overall+overall-text 블록 적층 동형). */
.module-overall-score--tile .module-overall-score__tile { display:flex; flex-direction:column; }
/* B22(07-18 사용자 확정·REHub 원문 채택: .overall-score{float:left;margin:0 20px 10px 0}) — 모바일 우측 여백 낭비 제거:
   요약문이 타일 옆에서 시작해 타일 아래로 자연 감김(전 뷰포트 동일·flex 줄바꿈 방식 폐기). */
.module-overall-score--tile .module-overall-score__head { display:block; }
.module-overall-score--tile .module-overall-score__head::after { content:""; display:block; clear:both; }
.module-overall-score--tile .module-overall-score__tile { float:left; margin:0 20px 10px 0; min-height:110px; }   /* B23(07-18 사용자): 내용이 짧으면 가로로 긴 직사각이 되는 편차 차단 — 최소 높이=폭(정사각 보장·초과는 세로형 허용) */
.module-overall-score--tile .module-overall-score__value { flex:1 1 auto; display:flex; align-items:center; justify-content:center; }
.module-overall-score--tile .module-overall-score__label { margin-top:auto; width:100%; box-sizing:border-box; }
.module-overall-score--tiercolor .module-overall-score__tile { background:var(--dv-accent,#64748b); }   /* B18⑥보완: color_mode=tier(이식처) */
.module-overall-score__value {
  display:block; padding:8px 0; color:#fff; font-weight:400;   /* B18⑦정정: REHub .overall 실측 weight 400(대형+가는 획)·padding 8px 0 */
  font-size:clamp(40px,8vw,52px); line-height:1; letter-spacing:0; font-variant-numeric:tabular-nums;
}
.module-overall-score__label {
  display:block; margin:0; padding:9px 10px;   /* B20(지휘자 증분·사용자 07-18): 캡션 바 세로 padding 6px→9px(REHub 6px 0보다 한 단계 높게). 하단 라운드=타일 래퍼 overflow:hidden+radius 6px가 처리(별도 radius 불요). */
  background:var(--color-text-primary,#1e293b); color:#fff;
  font-size:11.5px; font-weight:700; letter-spacing:.3px; line-height:1.35; word-break:keep-all;
}
.module-overall-score__label a { color:#fff; text-decoration:underline; text-underline-offset:2px; }
.module-overall-score__meta { flex:1 1 240px; min-width:0; text-align:left; }   /* B20(지휘자 증분·사용자 07-18): 우측 텍스트(요약·delta) 좌정렬 명시(상위 정렬 영향 차단·가운데 정렬은 타일 내부만·REHub 동형). */
.module-overall-score__delta { display:inline-block; margin-bottom:6px; font-size:12.5px; font-weight:700; font-variant-numeric:tabular-nums; }
.module-overall-score__delta.chg-up { color:#d11507; }
.module-overall-score__delta.chg-down { color:#1554d1; }
.module-overall-score__summary { margin:0; font-size:16px; font-weight:500; color:var(--color-text-body); line-height:1.65; word-break:keep-all; }   /* B37(07-18 사용자): 판정 요약문 = 본문급 가독(14.5→16px) — 페이지 핵심 결론 문단이라 축소 서체 부적합 */
.module-overall-score__attribution { margin:14px 0 0; font-size:12px; color:var(--color-text-muted); line-height:1.5; }
/* circle 변형(도넛 게이지·중앙 숫자·순수 CSS conic·JS 0·R18 §2-1) */
.module-overall-score--circle .module-overall-score__tile {
  width:100px; height:100px; min-width:0; max-width:none; padding:0; border-radius:50%;
  display:flex; align-items:center; justify-content:center; box-shadow:none;
  /* B20(지휘자 증분·사용자 07-18): 도넛 링=버밀리언(rv-accent)에서 분리 → 파랑 토큰(--color-primary·기존 팔레트 재사용·신규 색 0). 층위 분리 — 판정(순위/경쟁력)=rv-accent 타일·바 / 정보성 비율(비대면·무조건 %)=파랑 도넛. 중앙 숫자·트랙 #ddd·분모 캡션 무변경. */
  background:conic-gradient(var(--color-primary,#1d4ed8) calc(var(--dv-pct,100) * 1%), var(--rv-track,#ddd) 0);
}
.module-overall-score--tiercolor.module-overall-score--circle .module-overall-score__tile {
  background:conic-gradient(var(--dv-accent,#64748b) calc(var(--dv-pct,100) * 1%), var(--color-border,#e2e8f0) 0);
}
.module-overall-score--circle .module-overall-score__value {
  display:flex; align-items:center; justify-content:center; width:72px; height:72px; padding:0;
  border-radius:50%; background:#fff; color:var(--color-primary-dark,#1557b0); font-size:23px; letter-spacing:0;   /* B20fix(07-18 지휘자): 링=파랑(정보성 비율) 분리에 맞춰 중앙 숫자도 동일 파랑 축 — 버밀리언(판정 축)과 혼재 방지 */
}
.module-overall-score--tiercolor.module-overall-score--circle .module-overall-score__value { color:var(--dv-fg,#334155); }
/* B19(지휘자 증분·사용자 07-18): 도넛(circle) 채움도 바와 같은 리듬(1.1s·delay .2s) — @property로 --dv-pct 0→인라인값 스윕(JS 0). 미지원 브라우저=인라인 값 정적 렌더(폴백·최종 상태 정확). */
@property --dv-pct { syntax: '<number>'; initial-value: 0; inherits: true; }
.module-overall-score--circle .module-overall-score__tile { animation:module-donut-fill 1.5s ease-out .2s both; animation-play-state:paused; }   /* B27b(07-18 사용자): 1.1→1.5s 추가 감속. R7ANIM-FIX(07-18 사용자 실측 — JS 타이밍 경쟁으로 "이미 채워짐" 버그): 기본 paused로 경쟁 제거, .rv-anim-go(2클래스·특이성 0,0,3,0 > 이 규칙 0,0,2,0)만 재생. */
@keyframes module-donut-fill { from { --dv-pct:0; } }
/* badge 변형(소형 인라인 칩·표 셀/카드 헤더·R18 §2-1) */
.module-overall-score--badge { display:inline-block; margin:0; }
.module-overall-score--badge .module-overall-score__head { display:inline-flex; }
.module-overall-score--badge .module-overall-score__tile {
  min-width:0; max-width:none; border-radius:999px; overflow:visible; box-shadow:none;
}
.module-overall-score--badge .module-overall-score__value { padding:4px 14px; font-size:15px; line-height:1.5; letter-spacing:0; }
/* badge = 캡션 미표시(정보는 aria-label + 주변 문맥). circle = 링 하단 라벨 표시(B18 지휘자④ 도넛·calc 달성률 라벨). */
.module-overall-score--badge .module-overall-score__label { display:none; }
.module-overall-score--circle .module-overall-score__head { flex-direction:column; align-items:center; gap:8px 0; }
.module-overall-score--circle .module-overall-score__label { display:block; margin:0; padding:0; background:none; color:var(--color-text-body); text-align:center; font-size:12.5px; font-weight:700; letter-spacing:0; line-height:1.35; word-break:keep-all; }
.module-overall-score--circle .module-overall-score__label a { color:var(--color-primary-dark,#1e40af); text-decoration:underline dotted 1px; text-underline-offset:2px; }
/* B19: 도넛 분자/분모 캡션("{den}개 중 {num}개"·라벨 밑) — 표시 전용·num/den source 전달분만 렌더. */
.module-overall-score--circle .module-overall-score__fraction { display:block; margin-top:2px; text-align:center; font-size:11.5px; font-weight:700; color:var(--color-text-muted); font-variant-numeric:tabular-nums; }

/* ── rate-bar (항목 바·얇은 트랙↔채움 강대비·CSS 채움 애니메이션·JS 0 / dist 변형) ── B17 신설(REHub .rate-bar 사상) */
.module-rate-bar { list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:16px; }
.module-rate-bar__head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; min-height:20px; }   /* B31(07-18 사용자): min-height=전 바 행 head 높이 통일 floor → 트랙 시작선 정렬(라벨은 패널 폭에서 1줄·wrap 시에도 margin-bottom 6px 일정). */
.module-rate-bar__label { font-size:13.5px; font-weight:600; color:var(--color-text-body); word-break:keep-all; }
.module-rate-bar__label a { color:var(--color-primary-dark,#1e40af); font-weight:700; text-decoration:underline dotted 1px; text-underline-offset:3px; }
.module-rate-bar__label a:hover { text-decoration:underline; }
.module-rate-bar__value { font-size:14px; font-weight:800; color:var(--color-text-primary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.module-rate-bar__track { height:13px; border-radius:7px; background:var(--rv-track,#ddd); overflow:hidden; }   /* B18⑥: 트랙 #ddd(REHub) */
.module-rate-bar__fill {
  display:block; height:100%; border-radius:7px; background:var(--rv-accent,#e43917);   /* B18⑥: 채움 단색 rv-accent */
  transform-origin:left center; animation:module-rate-bar-fill 1.5s linear .2s both;   /* B27b(07-18 사용자): 1.15→1.5s 추가 감속(도넛과 동일 리듬). R7ANIM-V(07-18): ease-out→linear(속도 통일·인라인 duration과 세트 — 도넛은 원형이라 무변경). */
  animation-play-state:paused;   /* R7ANIM-FIX(07-18 사용자 실측 — JS 타이밍 경쟁으로 "이미 채워짐" 버그): 기본 paused로 경쟁 제거, .rv-anim-go(2클래스·특이성 0,0,2,0 > 이 규칙 0,0,1,0)만 재생. */
}
.module-rate-bar--tiercolor .module-rate-bar__fill { background:var(--dv-accent,#94a3b8); }   /* B18⑥보완: color_mode=tier */
@keyframes module-rate-bar-fill { from { transform:scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .module-rate-bar__fill, .module-overall-score--circle .module-overall-score__tile { animation:none; } }   /* B19: 도넛 채움도 감속 애니 비활성(접근성) */
/* B27(07-18 사용자): 채움 = 화면 노출 시 시작 — JS(1회 인라인 관찰자)가 wait 부여→진입 시 go. no-JS=클래스 없음=로드 애니(완전 렌더 불변). */
.module-rate-bar__fill.rv-anim-wait, .module-overall-score--circle .module-overall-score__tile.rv-anim-wait { animation-play-state:paused; }
.module-rate-bar__fill.rv-anim-go, .module-overall-score--circle .module-overall-score__tile.rv-anim-go { animation-play-state:running; }
.module-rate-bar__attribution { margin:14px 0 0; font-size:12px; color:var(--color-text-muted); line-height:1.5; }
/* dist 변형(분포 히스토그램·count 병기·앱마켓 사상) */
.module-rate-bar--dist .module-rate-bar__item { display:flex; align-items:center; gap:10px; }
.module-rate-bar--dist .module-rate-bar__head { flex:0 0 92px; display:block; margin:0; }
.module-rate-bar--dist .module-rate-bar__value { font-size:12.5px; }
.module-rate-bar--dist .module-rate-bar__track { flex:1 1 auto; height:10px; border-radius:5px; }
.module-rate-bar--dist .module-rate-bar__count { flex:0 0 auto; font-size:12px; font-weight:700; color:var(--color-text-muted); font-variant-numeric:tabular-nums; }

/* ── segment 변형(R19 (j)·서열 5구간+위치 핀·B18 신설) — B18⑥: 단일 hue rv-accent 명도 램프(좌 옅음→우 진함)+핀. tier 모드=dv-tier 셀. 서버 left inline·JS 0. ── */
.module-overall-score--segment { margin:0; }
.module-overall-score--segment .module-overall-score__head { display:block; }
.module-overall-score__seg { display:block; }
/* B38(07-18 사용자): 세그먼트 상단 좌측 타이틀 — rate-bar __head/__label과 동일 스펙(시각 언어 통일). 값=핀 정박 칩 전담(중복 0). */
.module-overall-score__seg-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:6px; min-height:20px; }
.module-overall-score__seg-label { font-size:13.5px; font-weight:600; color:var(--color-text-body); word-break:keep-all; }
.module-overall-score__seg-track { position:relative; display:flex; height:13px; border-radius:7px; overflow:hidden; box-shadow:var(--color-shadow-sm); }   /* B35(07-18 사용자): 바 지오메트리 통일(전 바 13px/라운드 7px)·overflow로 양끝 라운드 강제 보장 */
.module-overall-score__seg-cell { flex:1 1 20%; height:100%; background:var(--rv-accent,#e43917); }
.module-overall-score__seg-cell:nth-child(1) { background:color-mix(in srgb, var(--rv-accent,#e43917) 22%, #fff); }
.module-overall-score__seg-cell:nth-child(2) { background:color-mix(in srgb, var(--rv-accent,#e43917) 40%, #fff); }
.module-overall-score__seg-cell:nth-child(3) { background:color-mix(in srgb, var(--rv-accent,#e43917) 58%, #fff); }
.module-overall-score__seg-cell:nth-child(4) { background:color-mix(in srgb, var(--rv-accent,#e43917) 78%, #fff); }
.module-overall-score__seg-cell:nth-child(5) { background:var(--rv-accent,#e43917); }
.module-overall-score--tiercolor .module-overall-score__seg-cell { background:var(--dv-accent,#94a3b8); }   /* color_mode=tier */
.module-overall-score__seg-cell:first-child { border-radius:7px 0 0 7px; }   /* B35: 통일 라운드 7px */
.module-overall-score__seg-cell:last-child { border-radius:0 7px 7px 0; }
.module-overall-score__seg-pin { position:absolute; top:0; bottom:0; width:2px; transform:translateX(-50%); background:var(--color-text-primary,#1e293b); border-radius:1px; z-index:2; box-shadow:0 0 0 1px rgba(255,255,255,.6); }   /* B35(07-18 사용자): 핀=불릿 마커와 동일 스펙(트랙 안 봉쇄·돌출 0·흰 헤일로) — 세로선 언어 통일 */
/* R7ANIM-V(07-18 사용자 확정): 핀 = fill과 동일 원리(left:0→인라인 값 자동 수렴)·linear 이징(속도 통일)·duration=PHP 인라인(거리 비례). wait/go·reduce = 아래 통합 규칙. */
.module-overall-score__seg-pin { animation:rv-anim-pos 1.5s linear .2s both; animation-play-state:paused; }   /* R7ANIM-FIX(07-18): 기본 paused(경쟁 제거) — .rv-anim-go(2클래스)만 재생. */
@keyframes rv-anim-pos { from { left:0; } }
/* B32→B33(07-18 사용자): 서열 캡션 칩=핀 x 정박(흐름 유지·넘침 0). 글리프 문자 폐지 — 정박면 border(3px·핀색)=선과 픽셀 정합(칩 라운드/패딩 오프셋 0)·정박면 라운드 2px(곡률로 물러나지 않게). 정박 마진·--r=서버 inline(clamp [1,99]=핀과 동일 기준·100% 구분선도 라운드 안). */
.module-overall-score__seg-caption { display:block; width:max-content; max-width:100%; white-space:nowrap; margin-top:8px; padding:3px 10px; border-left:3px solid var(--color-text-primary,#1e293b); border-radius:2px 10px 10px 2px; background:color-mix(in srgb, var(--color-text-primary,#1e293b) 7%, #fff); font-size:12.5px; font-weight:600; color:var(--color-text-body); word-break:keep-all; line-height:1.35; transform:translateX(-2px); }   /* B34(07-18 사용자): 좌정박 border 중심↔핀 중심 광학 정합(-2px). R7ANIM-V: white-space:nowrap 추가(줄바꿈 방지 — 아래 calc 예약폭 산정의 전제조건). */
.module-overall-score__seg-caption--r { border-left:0; border-right:3px solid var(--color-text-primary,#1e293b); border-radius:10px 2px 2px 10px; transform:translateX(2px); }   /* B34: 우정박 대칭(+2px) */
.module-overall-score__seg-caption strong { color:var(--color-text-primary); font-weight:800; }
/* R7ANIM-V(2026-07-18 사용자 지적 반영 — 직전 45% 출발은 "중간에서 출발"로 라이브 실측 지적됨. 트랙 시작점 상당으로 교정):
   좌정박(margin-left 최종값)=from margin-left:0(핀과 동일 원리·오버플로 0·무변경).
   우정박(--r·margin-left:auto+margin-right 최종값)은 margin-left:auto가 키프레임 보간 불가(비수치 auto)라 margin-right를 대리 변수로 사용.
   기법: from margin-right:calc(100% - 예약폭px) — margin-left:auto 조합 시 실제 위치 = 예약폭(px) - 박스폭(px)(컨테이너 폭에 무관·항상 동일 절대 오프셋).
   예약폭 ≥ 실사용 최장 텍스트 박스폭이면 시작 시 margin-left ≥ 0 보장(오버플로 0)이며 거의 좌측 끝(트랙 시작점 상당)에서 출발.
   예약폭 산정(폰트 12.5px/700·padding 3px 10px·border-left 3px, 시스템 UI 폰트 스택 — 한글 1.0em·공백 .28em·숫자기호 .58em 근사):
     seg-caption 최장 실사용값 = core_deposit_percentile_label() "하위 49.9%"류(한글 2+공백 1+"49.9%" 5자) ≈ 2×12.5 + 1×3.5 + 5×7.25 = 64.75px 텍스트
     + padding 20px + border 3px = 87.75px → 안전 여유 포함 100px 예약. */
.module-overall-score__seg-caption { animation:rv-anim-cap-l 1.5s linear .2s both; animation-play-state:paused; }   /* R7ANIM-FIX(07-18): 기본 paused. */
.module-overall-score__seg-caption--r { animation:rv-anim-cap-r 1.5s linear .2s both; animation-play-state:paused; }   /* R7ANIM-FIX(07-18): --r도 animation 쇼트핸드를 재선언하므로(=play-state 재초기화) paused를 별도 명시 필수 — 생략 시 base 규칙의 paused가 무효화됨(동일 특이성·소스순서로 후행 규칙이 이김). */
@keyframes rv-anim-cap-l { from { margin-left:0; } }
@keyframes rv-anim-cap-r { from { margin-right:calc(100% - 100px); } }
.module-review-panel > .module-overall-score--segment { margin:14px 0 0; padding:0; border:0; }

/* ── bullet 변형(R19 (i)·막대+평균 마커+단일 hue 3밴드·B18 신설) — "평균 대비"의 정직 형식. B18⑥: 밴드=rv-accent 톤 명도 3단(단일 hue). ── */
.module-rate-bar--bullet { padding-bottom:0; }   /* B31: 절대배치 라벨 폐지 → 하단 예약 padding 불요(캡션 줄=정상 흐름). */
.module-review-panel > .module-rate-bar--bullet { margin-top:16px; }   /* B31(07-18 사용자): 불릿 ul을 일반 바 간격(gap 16px)과 동일 리듬으로 — 직전 바와 flush(0) 제거·수직 리듬 통일. */
.module-rate-bar--bullet .module-rate-bar__track--bullet {
  position:relative; height:13px; border-radius:7px; overflow:hidden;   /* B35(07-18 사용자): 바 지오메트리 통일(13px/7px·뭉텅한 5px 라운드 제거)·마커=트랙 안 봉쇄라 hidden 안전+양끝 라운드 보장 */
  background:linear-gradient(to right,
    color-mix(in srgb, var(--color-text-primary,#1e293b) 6%, #fff) 0 33.33%,
    color-mix(in srgb, var(--color-text-primary,#1e293b) 11%, #fff) 33.33% 66.66%,
    color-mix(in srgb, var(--color-text-primary,#1e293b) 17%, #fff) 66.66% 100%);   /* B32(07-18 사용자): 밴드=중립 슬레이트 3단(분홍 워시 제거) — accent 채움과 명확 대비 */
}
.module-rate-bar--bullet .module-rate-bar__fill { height:100%; margin-top:0; border-radius:7px; }   /* B32: 트랙 전 높이 채움(마커=z2 위) / B35: 라운드 7px 통일. R7ANIM-FIX3(2026-07-18 지휘자 실측 — 진범 확정): B32 시절 잔재이던 애니메이션 무효화 선언 제거 — 그 선언이 불릿 채움 애니메이션을 명시적으로 꺼서 항상 완성 상태로 보였음. 제거 후 base .module-rate-bar__fill 규칙의 animation(+기본 일시정지)이 그대로 상속·적용(캐스케이드 검증은 완료보고 참조). */
/* B31(07-18 사용자): 마커 선=트랙 안에 갇힌 얇은 짙은 세로선(돌출 0·z-index로 채움 위·흰 헤일로로 채움 대비). 라벨=트랙 밖 캡션 줄(__marker-cap)로 분리(마커와 같은 색 글리프 ▏로 연결·소형). */
.module-rate-bar__marker { position:absolute; top:0; bottom:0; width:2px; transform:translateX(-50%); background:var(--color-text-primary,#1e293b); border-radius:1px; z-index:2; box-shadow:0 0 0 1px rgba(255,255,255,.6); }
/* R7ANIM-V(07-18): 마커=핀과 동일 키프레임 재사용(left:0→인라인 값 수렴)·linear 이징(속도 통일)·duration=PHP 인라인(거리 비례). */
.module-rate-bar__marker { animation:rv-anim-pos 1.5s linear .2s both; animation-play-state:paused; }   /* R7ANIM-FIX(07-18): 기본 paused(경쟁 제거) — .rv-anim-go(2클래스)만 재생. */
/* B32→B33(07-18 사용자): 마커 캡션 칩=마커 x 정박(흐름 유지·넘침 0). 글리프 문자 폐지 — 정박면 border(3px·마커색)=선과 픽셀 정합(칩 라운드/패딩 오프셋 0)·정박면 라운드 2px. 칩 배경+소형=아래 행 제목(13.5px·무배경)과 분리. 정박 마진·--r=서버 inline(clamp [1,99]·100% 구분선도 라운드 안). */
.module-rate-bar__marker-cap { display:block; width:max-content; max-width:100%; white-space:nowrap; margin-top:6px; padding:2px 9px; border-left:3px solid var(--color-text-primary,#1e293b); border-radius:2px 10px 10px 2px; background:color-mix(in srgb, var(--color-text-primary,#1e293b) 7%, #fff); font-size:11.5px; font-weight:700; color:var(--color-text-primary,#1e293b); line-height:1.35; word-break:keep-all; font-variant-numeric:tabular-nums; transform:translateX(-2px); }   /* B34(07-18 사용자): 좌정박 border 중심↔마커 중심 광학 정합(-2px). R7ANIM-V: white-space:nowrap 추가(줄바꿈 방지 — 아래 calc 예약폭 산정의 전제조건). */
.module-rate-bar__marker-cap--r { border-left:0; border-right:3px solid var(--color-text-primary,#1e293b); border-radius:10px 2px 2px 10px; transform:translateX(2px); }   /* B34: 우정박 대칭(+2px) */
/* R7ANIM-V(07-18): 좌정박=seg-caption과 동일 keyframe(rv-anim-cap-l) 재사용(margin-left:0→오버플로 0, 텍스트 길이 무관 안전).
   우정박(--r)은 seg-caption--r과 예약폭이 달라 전용 키프레임 분리(marker-cap 텍스트가 더 긺 — "{저축은행|은행} 평균 연 N.NN%").
   예약폭 산정(폰트 11.5px/700·padding 2px 9px·border-left 3px, 근사 동일):
     최장 실사용값 = "저축은행 평균 연 10.25%"(한글 7+공백 3+"10.25%" 6자, source.php:2362 marker_label 실측 패턴 기준)
     ≈ 7×12(한글 1.0em 반올림) + 3×3.5(공백 .3em) + 6×6.3(숫자기호 .55em) = 84+10.5+37.8 = 132.3px 텍스트
     + padding 18px + border 3px = 153.3px → 안전 여유 포함 175px 예약(seg-caption보다 텍스트가 길어 100px보다 큰 값 사용). */
.module-rate-bar__marker-cap { animation:rv-anim-cap-l 1.5s linear .2s both; animation-play-state:paused; }   /* R7ANIM-FIX(07-18): 기본 paused. */
.module-rate-bar__marker-cap--r { animation:rv-anim-mcap-r 1.5s linear .2s both; animation-play-state:paused; }   /* R7ANIM-FIX(07-18): --r도 쇼트핸드 재선언(=play-state 재초기화)이라 paused 별도 명시 필수(seg-caption--r과 동일 이유). */
@keyframes rv-anim-mcap-r { from { margin-right:calc(100% - 175px); } }
/* R7ANIM-V(07-18): 4종 신규 대상 — prefers-reduced-motion=즉시 최종 상태(애니메이션 해제). 기존 fill/tile 규칙(위 L12005)은 무변경(추가만). */
@media (prefers-reduced-motion: reduce) {
  .module-overall-score__seg-pin, .module-rate-bar__marker,
  .module-overall-score__seg-caption, .module-rate-bar__marker-cap { animation:none; }
}
/* R7ANIM(2026-07-18): wait(paused)/go(running) — 기존 fill/tile 규칙(위 L12007-12008)과 동일 메커니즘·동일 리듬으로 4종 확장(추가 규칙·기존 라인 무변경). */
.module-overall-score__seg-pin.rv-anim-wait, .module-rate-bar__marker.rv-anim-wait,
.module-overall-score__seg-caption.rv-anim-wait, .module-rate-bar__marker-cap.rv-anim-wait { animation-play-state:paused; }
.module-overall-score__seg-pin.rv-anim-go, .module-rate-bar__marker.rv-anim-go,
.module-overall-score__seg-caption.rv-anim-go, .module-rate-bar__marker-cap.rv-anim-go { animation-play-state:running; }

/* ── review-panel 도넛 행(B18 지휘자④·"전체 중 %" 소형 도넛 나란히·65px) ── */
.module-review-panel__donuts { display:flex; flex-wrap:wrap; gap:18px 30px; margin-top:20px; padding-top:18px; border-top:1px solid var(--color-border); }
.module-review-panel__donut { flex:0 0 auto; }
.module-review-panel__donuts .module-overall-score { margin:0; }
/* B20(지휘자 증분·사용자 07-18 "너무 작다"): 패널 도넛 지름 66→88px(REHub 소형 65/대형 100의 중간·데스크톱)·링 두께 12px((88-64)/2)·중앙 % 숫자 비례 확대(16→19px·가독 우선·tabular-nums 유지). 라벨·분모 캡션 크기 무변경. */
.module-review-panel__donuts .module-overall-score--circle .module-overall-score__tile { width:100px; height:100px; }   /* B22(07-18 사용자): 88→100px — REHub 대형 게이지 실측 규격·타일/썸네일 110px과 리듬 통일 */
.module-review-panel__donuts .module-overall-score--circle .module-overall-score__value { width:72px; height:72px; font-size:22px; }
.module-review-panel__donuts .module-overall-score--circle .module-overall-score__label { max-width:130px; }
@media (max-width:640px) {   /* B22: 모바일 80px(두 도넛 2열 유지)·중앙 숫자 비례 */
  .module-review-panel__donuts .module-overall-score--circle .module-overall-score__tile { width:80px; height:80px; }
  .module-review-panel__donuts .module-overall-score--circle .module-overall-score__value { width:58px; height:58px; font-size:18px; }
}

/* ── review-links 층(B19·사용자 재설계) — 바 라벨 링크 폐지의 이관처(칩 버튼 행·바/도넛 직하·pros_cons 위).
   앵커=기존 .module-table__link 재사용(SSOT 1곳·표 밖이라 화살표 어포던스 자연 적용). 신규 클래스=래퍼 .module-review-links + external 고지 2종뿐. ── */
.module-review-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--color-border); }
.module-review-links .module-table__link::after { content:' →'; margin-left:5px; font-weight:700; opacity:.6; display:inline-block; transition:transform .18s ease, opacity .18s ease; }
.module-review-links .module-table__link:hover::after { opacity:1; transform:translateX(2px); }
.module-review-links__item { display:inline-flex; align-items:center; gap:7px; }
.module-review-links__ad { flex:0 0 auto; font-size:10.5px; font-weight:800; letter-spacing:.02em; color:var(--color-text-muted); padding:2px 6px; border:1px solid var(--color-border); border-radius:5px; background:#fff; }
/* ── review-links 행 형태(B20·사용자 07-18) — [이미지 슬롯]+정보(명칭 굵게+info 소형)+라운드 CTA 훅. 칩(문자열 label만)과 하위호환 공존(행=flex-basis 100%·칩=inline). 신규 색 정의 0(기존 토큰만). ── */
/* B24(07-18 사용자): 패널 안 행 박스=이중 테두리라 제거 — 무테·무그림자·좌 들여쓰기 0(위 총점 타일과 같은 선상 시작).
   행이 여럿이면 사이 구분선 1개만. */
.module-review-links__row { flex:1 1 100%; display:flex; align-items:center; gap:14px; padding:12px 0; }
.module-review-links__row + .module-review-links__row { border-top:1px solid var(--color-border); margin-top:-10px; }   /* B25(07-18 사용자 분석 확정): 컨테이너 flex gap 10px 상쇄 — 구분선 위/아래 여백 12px/12px 대칭. (B45 강화안은 07-18 사용자 착오 정정으로 철회 — 상시 회색 구분+호버 파랑 피드백 이원 체계 유지 확정) */
.module-review-links__thumb { flex:0 0 auto; width:110px; height:110px; object-fit:cover; border-radius:10px; border:1px solid var(--color-border); background:#fff; }   /* B22(07-18 사용자): 52→110px — 상품 이미지가 잘 보여야 클릭률↑·총점 타일 폭(110px)과 정렬 통일 */
/* 이미지 폴백 = 텍스트 미니 타일(card-spotlight __visual--fallback/__vname 사상 재사용·클래스 복제 없이 동급·중립 브랜드 틴트·aria-hidden). */
.module-review-links__vtile { flex:0 0 auto; width:110px; height:110px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; padding:8px; border-radius:10px; background:var(--color-primary-light); overflow:hidden; }   /* B22: 썸네일과 동일 110px(타일 폭 정렬 통일) */
.module-review-links__vname { font-size:14px; font-weight:800; line-height:1.3; color:var(--color-primary-dark); text-align:center; word-break:keep-all; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }   /* B22: 110px 타일 비례 확대·3줄 clamp */
.module-review-links__body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.module-review-links__name { font-size:16px; font-weight:800; color:var(--color-text-primary); line-height:1.4; word-break:keep-all; }   /* B25(07-18 사용자): 14.5→16px(본문 기본 이상) */
.module-review-links__info { font-size:14px; font-weight:600; color:var(--color-text-muted); line-height:1.45; font-variant-numeric:tabular-nums; word-break:keep-all; }   /* B25: 12.5→14px */
.module-review-links__act { flex:0 0 auto; display:flex; align-items:center; gap:8px; }
/* B25(07-18 사용자: "훅 더 강하게") — 옅은 배경형→솔리드 채움 CTA(프라이머리 그라데이션+흰 글자·기존 토큰 재사용·신규 색 0). */
.module-review-links__cta,
.module-review-links a.module-table__link.module-review-links__cta {
  border-radius:999px; padding:10px 20px;
  background:linear-gradient(135deg, var(--color-primary,#1a73e8), var(--color-primary-dark,#1557b0));
  color:#fff; border:1.5px solid transparent; font-weight:800;
}
.module-review-links a.module-table__link.module-review-links__cta:hover { background:var(--color-primary-dark,#1557b0); color:#fff; }
/* ── B29(07-18) — 금리 가격 타이포(price/price_sub)+순위 미니 배지(.dv-rank-badge 재사용·dv-tier 색 SSOT)+신선도 신호(fresh)+행 호버 틴트.
   신규 색 정의 0(기존 --color-* 토큰·dv-tier 토큰만 참조). 배지=이름 옆(namerow)·가격=이름 아래(body). ── */
.module-review-links__namerow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.module-review-links__fresh { flex:0 0 auto; font-size:11px; font-weight:800; letter-spacing:.01em; padding:1px 7px; border-radius:999px; background:var(--color-primary-light); color:var(--color-primary-dark); white-space:nowrap; }
.module-review-links__price { font-size:19px; font-weight:800; line-height:1.2; color:var(--color-primary-dark); font-variant-numeric:tabular-nums; word-break:keep-all; }
.module-review-links__price-sub { font-size:12.5px; font-weight:600; color:var(--color-text-muted); line-height:1.4; }
/* B36(07-18 사용자): 행 호버=배경 틴트 폐지(좌 로고 타일 primary-light와 동색이라 타일이 묻힘) → 상하 1px 라인만 점등. inset 그림자 방식=레이아웃 불변·행 구분선 구조 무관·마지막 행도 하단 라인 표시. */
.module-review-links__row { transition:box-shadow .18s ease; }
.module-review-links__row:hover { box-shadow:inset 0 1px 0 var(--color-primary-dark,#1e40af), inset 0 -1px 0 var(--color-primary-dark,#1e40af); }
@media (max-width:640px) {
  .module-review-links .module-table__link { white-space:normal; }
  /* B22(07-18 사용자 확정): 전부 세로 스택=공간 낭비 → [썸네일+이름/설명 한 행] + 줄바꿈 [버튼 100% 너비] */
  .module-review-links__row { flex-direction:row; flex-wrap:wrap; align-items:center; }
  .module-review-links__body { flex:1 1 0; min-width:0; }   /* B41(07-18 사용자): 기준 폭 0 — 좁은 폭에서 본문이 썸네일 아래로 떨어지는 랩 방지(본문=항상 우측 축소·랩은 버튼 줄만) */
  .module-review-links__act { flex:1 1 100%; justify-content:stretch; }
  .module-review-links__cta { display:block; width:100%; text-align:center; align-self:auto; box-sizing:border-box; }
}

/* 반응형(모바일) — review-panel 패딩·overall-score 세로 스택 */
@media (max-width:640px) {
  .module-review-panel { padding:18px; }
  .module-overall-score__head { flex-direction:column; align-items:stretch; }
  .module-overall-score--tile .module-overall-score__tile { align-self:flex-start; }
  .module-overall-score--segment .module-overall-score__head { flex-direction:column; }
  .module-overall-score__value { font-size:36px; }
  .module-overall-score__meta { flex:1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   pros-cons + 서술문 분해(spcl 칩·mtrt 카드) + 권역/필터 스위처 밴드 + G5 카드 리스트
   — 2026-07-17 B9 신설. 판정색=dv-tier 토큰 참조(등락색과 별개). 서버 inline width·JS 0.
   ═══════════════════════════════════════════════════════════════════════════ */
.module-pros-cons { margin:18px 0; }
.module-pros-cons__grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.module-pros-cons__col { border:1px solid var(--color-border); border-radius:12px; padding:16px 18px; background:#fff; }
.module-pros-cons__col--pros { border-color:#bbf7d0; background:#f0fdf4; }
.module-pros-cons__col--cons { border-color:#fecaca; background:#fef2f2; }
.module-pros-cons__title { margin:0 0 10px; font-size:17px; font-weight:800; letter-spacing:-.01em; }
.module-pros-cons__col--pros .module-pros-cons__title { color:#15803d; }
.module-pros-cons__col--pros .module-pros-cons__title::before { content:"\2714"; margin-right:6px; }
.module-pros-cons__col--cons .module-pros-cons__title { color:#b91c1c; }
.module-pros-cons__col--cons .module-pros-cons__title::before { content:"\26A0"; margin-right:6px; }
.module-pros-cons__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.module-pros-cons__item { position:relative; padding-left:22px; font-size:16px; line-height:1.6; color:var(--color-text-body); word-break:keep-all; }
.module-pros-cons__item::before { position:absolute; left:0; top:0; font-weight:800; }
.module-pros-cons__col--pros .module-pros-cons__item::before { content:"\FF0B"; color:#16a34a; }
.module-pros-cons__col--cons .module-pros-cons__item::before { content:"\FF0D"; color:#dc2626; }
.module-pros-cons__note { margin:12px 0 0; font-size:14px; color:var(--color-text-muted); }
@media (max-width:640px) { .module-pros-cons__grid { grid-template-columns:1fr; } }

/* 권역/필터 스위처 밴드(info-box body 안 렌더·상단 내비) */
.deposit-switch-band { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0; }
.deposit-switch-band .deposit-switch-lbl { font-size:12.5px; font-weight:800; color:var(--color-text-muted); margin-right:2px; }
.deposit-switch-band a, .deposit-switch-band .deposit-switch-cur {
  display:inline-block; padding:5px 13px; border-radius:999px; font-size:13px; font-weight:700; line-height:1.2;
  border:1px solid var(--color-border); text-decoration:none; }
.deposit-switch-band a { color:var(--color-text-body); background:#fff; }
.deposit-switch-band a:hover { border-color:#93c5fd; color:#1d4ed8; }
.deposit-switch-band .deposit-switch-cur { color:#fff; background:#1d4ed8; border-color:#1d4ed8; cursor:default; }

/* spcl_cnd 조건 칩 분해(원문 조각 보존 + %p 배지 + dv-tier 유형색) */
.deposit-cond-chips { display:flex; flex-wrap:wrap; gap:8px; margin:4px 0 12px; }
.deposit-cond-chip { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:7px 12px; border-radius:10px;
  border:1px solid var(--color-border); background:#fff; font-size:12.5px; line-height:1.4; color:var(--color-text-body); }
.deposit-cond-chip.dv-tier-1,.deposit-cond-chip.dv-tier-2,.deposit-cond-chip.dv-tier-3,.deposit-cond-chip.dv-tier-4,.deposit-cond-chip.dv-tier-5 {
  border-color:var(--dv-accent); background:var(--dv-bg); }
.deposit-cond-chip__type { font-weight:800; color:var(--dv-fg,#334155); white-space:nowrap; }
.deposit-cond-chip__text { word-break:keep-all; }
.deposit-cond-chip__bonus { flex:0 0 auto; padding:1px 7px; border-radius:6px; background:#1d4ed8; color:#fff; font-weight:800; font-size:11.5px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.deposit-cond-raw { margin:0; font-size:12.5px; color:var(--color-text-muted); line-height:1.6; }
blockquote.deposit-spcl { margin:8px 0; padding:10px 14px; border-left:3px solid var(--color-border); background:#f8fafc; font-size:12.5px; color:var(--color-text-body); white-space:pre-line; }
/* mtrt_int 만기후 이자율 기간 구간 카드 */
.deposit-mtrt-cards { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 10px; }
.deposit-mtrt-card { flex:1 1 150px; border:1px solid var(--color-border); border-radius:10px; padding:11px 14px; background:#fff; }
.deposit-mtrt-card__k { font-size:12px; font-weight:700; color:var(--color-text-muted); }
.deposit-mtrt-card__v { font-size:15px; font-weight:800; color:var(--color-text-primary); margin-top:3px; }

/* G5 모바일 카드 리스트(은행 앱 리스트 문법) — 데스크톱=숨김(표 담당)·모바일=카드 */
.deposit-cardlist { display:none; }
.deposit-cardlist__item { display:block; border:1px solid var(--color-border); border-radius:12px; padding:14px 16px; margin:0 0 10px; background:#fff; text-decoration:none; color:inherit; }
.deposit-cardlist__top { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.deposit-cardlist__co { font-size:12px; font-weight:700; color:var(--color-text-muted); }
.deposit-cardlist__name { display:block; font-size:14.5px; font-weight:800; color:var(--color-text-primary); margin-top:2px; word-break:keep-all; }
.deposit-cardlist__rate { font-size:22px; font-weight:800; color:#d11507; font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }
.deposit-cardlist__rate small { display:block; font-size:11.5px; font-weight:700; color:var(--color-text-muted); }
.deposit-cardlist__meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; align-items:center; }
.deposit-cardlist__gap { font-size:12px; color:var(--color-text-muted); font-variant-numeric:tabular-nums; }
.deposit-cardlist__medal { font-size:15px; }
/* B13(2026-07-17 증분⑩) 클릭 어포던스 — meta 행 우측 정렬(margin-left:auto) */
.deposit-cardlist__go { margin-left:auto; font-size:13px; font-weight:700; color:var(--color-primary-dark); white-space:nowrap; transition:transform .15s ease; }
.deposit-cardlist__item:hover .deposit-cardlist__go { transform:translateX(2px); }
/* 밑줄 최종 차단(2026-07-17 사용자 원인 특정: `.module-info-box.module-info-box a`(0,2,1)가 카드 앵커에 승리)
   — 동급 이상 특이성으로 상쇄. 색도 카드 자체 팔레트 상속. */
.module-info-box.module-info-box a.deposit-cardlist__item,
.module-info-box.module-info-box .deposit-cardlist a { text-decoration:none; color:inherit; }
/* 호버 시각 강화(2026-07-17 사용자 확정): 리프트+프라이머리 보더+그림자 — 어포던스 이동과 결합 */
.deposit-cardlist__item { transition:box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.deposit-cardlist__item:hover { border-color:var(--color-primary); box-shadow:0 6px 18px rgba(0,0,0,.10); transform:translateY(-2px); }
.deposit-cardlist__item:hover .deposit-cardlist__name { color:var(--color-primary); }
@media (max-width:640px) { .deposit-cardlist { display:block; } }
/* B14(2026-07-17 ④ 사용자 확정) --grid 변형 — 3분할 칩(link-grid) 대체용 전 뷰포트 카드 그리드.
   .deposit-cardlist(기본 클래스) 위 modifier 클래스라 특이성(0,2,0)이 위 규칙들(0,1,0)을 이겨 전 뷰포트에서 항상 표시됨 —
   기존 .deposit-cardlist{display:none}(G5 표/카드 쌍) 규칙은 modifier 없는 호출부에 그대로 적용되어 무영향. */
.deposit-cardlist.deposit-cardlist--grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.deposit-cardlist.deposit-cardlist--grid .deposit-cardlist__item { margin: 0; }
@media (max-width:640px) {
  .deposit-cardlist.deposit-cardlist--grid { grid-template-columns: 1fr; }
}
/* B13(2026-07-17 증분⑨) 모바일 밑줄 잔존 — 테마 전역 a 밑줄 규칙(추정 .entry-content a 등 0,1,1)이
   .deposit-cardlist__item 단독(0,1,0)보다 특이성 우위 → .entry-content 접두로 특이성 상향(0,2,0). 자식 span도 명시 방어. */
.entry-content .deposit-cardlist__item,
.entry-content .deposit-cardlist__item:hover,
.entry-content .deposit-cardlist__item:visited,
.entry-content .deposit-cardlist__item span { text-decoration: none; }

/* B12(2026-07-17 사용자 확정): 상품명/기관명 텍스트 버튼 링크 — dp-prodlink(SSOT 1곳=core_deposit_product_link 헬퍼).
   '상세' 별도 열 폐지(모바일 가로스크롤 밖=CTR 저하 — 원래 금지 지침 복원) 대체책: 상품/기관명 자체를 버튼화.
   박스형 .module-table__link 와 달리 텍스트 버튼(볼드+화살표만·표 셀 과밀 방지). 수동 조립 링크 셀(기관명 등)도
   컬럼 'wrap'=>'dp-prodlink' 오버라이드로 동일 스타일 적용(전역 table 모듈 변경 없이 deposit 표 한정 격리). */
/* 특이성 상쇄(2026-07-17 사용자 적발): `.module-info-box.module-info-box a`(0,2,1) 류 전역 규칙이
   .dp-prodlink(0,1,0)를 이겨 표 안에서 버튼 스타일 미적용 — 동급 이상 셀렉터 병기로 확정. */
/* B18(2026-07-17 지휘자 증분①): 병기 앵커 `dp-prodlink module-table__link`에서 이 텍스트 버튼 시각 블록이
   버튼(.module-table__link L6431)을 덮어 하이브리드로 깨지는 문제 — 각 셀렉터에 :not(.module-table__link) 한정.
   병기 시 이 블록 미적용 → 버튼 스타일 단독 승리. 표 밖 단독(dp-prodlink만)은 기존 텍스트 버튼 유지. */
.dp-prodlink:not(.module-table__link),
.module-content a.dp-prodlink:not(.module-table__link),
.module-table a.dp-prodlink:not(.module-table__link),
.module-info-box.module-info-box a.dp-prodlink:not(.module-table__link),
.entry-content .module-section a.dp-prodlink:not(.module-table__link) {
    font-weight: 700;
    color: var(--color-primary-dark);
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background .15s, color .15s;
}
.dp-prodlink::after { content: '\2192'; margin-left: 3px; font-weight: 700; opacity: .6; display: inline-block; transition: transform .18s ease, opacity .18s ease; }   /* → 스타일(2026-07-17 사용자 확정)·B19: hover 이동 위해 transition 추가 */
/* 표 셀 안 화살표 제거(2026-07-17 사용자 확정 — 밀도: 화살표=히어로·단독 링크 전용) */
.module-table a.dp-prodlink::after { content: none; }
/* 표 안 버튼 스타일 = 기존 .module-table__link 클래스 재사용(2026-07-17 사용자 확정 — 레시피 복제 삭제·SSOT 1곳).
   헬퍼(core_deposit_product_link)가 `dp-prodlink module-table__link` 병기 출력 — dp-prodlink는 마커·화살표 제어 전용. */
/* deposit 표 링크 셀 좌정렬(전수 — 기존 :has 관례 L6427·L10697 준용) */
.module-table td:has(a.dp-prodlink) { text-align: left !important; }
/* 카드 리스트 래퍼와 다음 요소(표 캡션) 사이 여백(2026-07-17 사용자: 붙어 답답) */
.module-info-box:has(.deposit-cardlist) { margin-bottom: 18px; }
.dp-prodlink:not(.module-table__link):hover,
.module-content a.dp-prodlink:not(.module-table__link):hover,
.module-table a.dp-prodlink:not(.module-table__link):hover,
.module-info-box.module-info-box a.dp-prodlink:not(.module-table__link):hover,
.entry-content .module-section a.dp-prodlink:not(.module-table__link):hover {
    background: color-mix(in srgb, var(--color-primary-dark, #1e40af) 12%, #fff);   /* B40(07-18 사용자): primary-light(#e8f0fe)가 흰 배경과 미구분 → 확실한 틴트로 강화(클릭 가능 인지) */
    color: var(--color-primary-dark);
    text-decoration: none;
}
/* B19(지휘자 증분·사용자 07-18): 표 밖 단독 dp-prodlink hover 시각화 강화 — 화살표 opacity .6→1 + 우측 이동(배경 틴트/색은 위 블록 유지·신규 색 정의 0·병기 module-table__link 앵커는 무변경). */
.dp-prodlink:not(.module-table__link):hover::after { opacity: 1; transform: translateX(2px); }
.dp-prodlink:not(.module-table__link):active { opacity: .75; }

/* B13(2026-07-17 증분⑤⑦·07-17 개정) 스포트라이트 상품명 앵커(name_url) — 전 뷰포트 pill 버튼화
   (사용자 확정: 데스크톱도 클릭 가능성 시각화 — 모바일 문법 통일·크기만 비례). 화살표는 .dp-prodlink::after 공용. */
.module-card-spotlight__name a.dp-prodlink {
  display: inline-block; padding: 6px 16px;
  background: color-mix(in srgb, var(--color-primary) 10%, #fff);
  border-radius: 999px;
}
@media (max-width: 720px) {
  .module-card-spotlight__name a.dp-prodlink {
    display: block;
    width: max-content;
    max-width: 100%;
    margin: 8px 0 12px;   /* 2026-07-17 사용자 확정: 모바일 왼쪽 정렬(중앙→좌)·하단 여백 +8 */
    padding: 11px 22px;
    background: color-mix(in srgb, var(--color-primary) 13%, #fff);
    border-radius: 999px;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.25;
    box-sizing: border-box;
    text-align: center;
  }
}

/* B10 문맥 링크(💡 함께 보면 좋아요) — 섹션 하단 데이터 파생 유도(info-box body 안 렌더) */
.deposit-ctxlink { margin:12px 0 0; padding:10px 14px; border-radius:10px; background:#f0f9ff; font-size:16px; line-height:1.6; color:var(--color-text-body); word-break:keep-all; }
.deposit-ctxlink__tip { font-weight:800; color:#0369a1; margin-right:4px; }
.deposit-ctxlink a { font-weight:700; color:#1d4ed8; text-decoration:none; }
.deposit-ctxlink a:hover { text-decoration:underline; }
/* B13(2026-07-17 증분④) 이중 테두리 제거 — deposit-ctxlink를 감싼 info-box 래퍼만 표적(:has, 전역 info-box 타입 무변경·다른 페이지 무영향).
   deposit-ctxlink 자체 border 제거(위 규칙에서 이미 반영) + 바깥 info-box 프레임(테두리·배경·패딩) 무력화 → 틴트 박스 1겹만 남음. */
.module-info-box:has(> .module-info-box__body > .deposit-ctxlink) {
  background: transparent; border: 0; padding: 0; margin: 0;
}
/* B13(2026-07-17 증분⑪) cardlist 래퍼 무테두리화 — 카드 자체(.deposit-cardlist__item)가 보더+라운드 완결 단위라
   바깥 info-box 프레임은 이중 갑갑 → :has()로 cardlist를 감싼 info-box만 투명 통과(--bare 개념·전역 타입 매핑 불변경). */
.module-info-box:has(> .module-info-box__body > .deposit-cardlist) {
  background: transparent; border: 0; padding: 0; margin: 0;
}