/* =========================================
           [PREMIUM & AI VIBE] 공통 CSS 변수
           ========================================= */
:root {
    /* ── 배경색 ── */
    --bg-deep: #060b14;
    --bg-dark: #0f172a;
    --bg-light: #f8fafc;
    --bg-white: #ffffff;
    --bg-warm: #fffcf5;
    /* 골드 계열 warm 배경 */
    --bg-subtle: #f1f5f9;
    /* 살짝 회색 배경 */

    /* ── 골드 팔레트 ── */
    --gold-premium: #d4af37;
    --gold-light: #fef9c3;
    --gold-dark: #b48e24;

    /* ── 텍스트 ── */
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-light: #f1f5f9;

    /* ── 보더 ── */
    --border-light: #e2e8f0;
    --border-subtle: #cbd5e1;
    --border-gold: rgba(212, 175, 55, 0.3);

    /* ── 그림자 8종 ── */
    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.04);
    --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-premium: 0 20px 40px rgba(0, 0, 0, 0.08);
    --shadow-deep: 0 30px 60px rgba(0, 0, 0, 0.28);
    --shadow-glow: 0 0 24px rgba(212, 175, 55, 0.22);
    --shadow-glow-lg: 0 10px 28px rgba(212, 175, 55, 0.38);
    --shadow-navy: 0 4px 15px rgba(15, 23, 42, 0.2);
    --shadow-navy-lg: 0 10px 25px rgba(15, 23, 42, 0.3);

    /* ── Border-radius 4단계 ── */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;

    /* ── Z-index 계층 ── */
    --z-nav: 100;
    --z-overlay: 500;
    --z-modal: 600;
    --z-toast: 700;

    /* ── 오행 색상 ── */
    --oheng-wood: #22c55e;
    --oheng-fire: #ef4444;
    --oheng-earth: #eab308;
    --oheng-metal: #e8ecf0;
    --oheng-water: #0f172a;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    margin: 0;
    padding: 0;
    background-color: var(--bg-white);
    color: var(--text-primary);
    line-height: 1.7;
    font-weight: 400;
    scroll-behavior: smooth;
}

/* ── 접근성: 키보드 포커스 링 (마우스 클릭 시에는 숨김) ── */
*:focus {
    outline: none;
}

*:focus-visible {
    outline: 2.5px solid var(--gold-premium);
    outline-offset: 3px;
    border-radius: 4px;
}

/* 버튼·링크 포커스 강조 */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
    outline: 2.5px solid var(--gold-premium);
    outline-offset: 4px;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.18);
}

/* 폼 입력 — 기존 스타일 유지, focus-visible로 업그레이드 */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: none;
    border-color: var(--gold-premium);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.12);
}

/* 숫자·영문 accent: DM Sans */
.hero-badge-num,
.card-score-badge,
.season-num,
.score-num,
.section-tag,
.story-chapter-label {
    font-family: 'DM Sans', 'Pretendard', sans-serif;
}

/* =========================================
           [1] 네비게이션
           ========================================= */
nav {
    position: fixed;
    top: 0;
    width: 100%;
    background: transparent;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    z-index: var(--z-nav);
    transition: background 0.3s ease, border-color 0.3s ease;
}

nav.scrolled {
    background: rgba(15, 23, 42, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    cursor: pointer;
}

.logo-icon {
    height: 30px;
    width: auto;
}

.logo-text {
    height: 23px;
    width: auto;
}

.nav-hamburger {
    display: none;
    background: transparent;
    border: none;
    color: white;
    padding: 8px;
    cursor: pointer;
    position: relative;
    z-index: 155;
}

.nav-hamburger svg {
    width: 30px;
    height: 30px;
}

.main-nav-links {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

#user-badge {
    align-self: center;
}

.nav-cta-row {
    display: flex;
    align-items: center;
    gap: 0;
}

.nav-cta-row a.premium-link,
.nav-cta-row a.login-link {
    margin-left: 28px;
}

.nav-cta-row #user-badge {
    margin-left: 28px;
}

.main-nav-links a {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    color: white;
    margin-left: 28px;
    font-weight: 500;
    font-size: 1.05rem;
    transition: 0.3s;
    cursor: pointer;
}

.main-nav-links a:hover {
    opacity: 0.8;
}

.nav-svg {
    height: 26px;
    width: auto;
    transition: filter 0.25s ease, opacity 0.25s ease;
}

.main-nav-links a.premium-link {
    padding: 0;
    background: transparent;
    border: none;
}

.main-nav-links a.premium-link .nav-svg {
    height: 34px;
}

.main-nav-links a.premium-link:hover {
    opacity: 0.8;
}

.main-nav-links a.login-link {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    padding: 8px 22px;
    border-radius: var(--radius-pill);
    margin-left: 28px;
    font-weight: 600;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.main-nav-links a.login-link:hover {
    background: white;
    color: var(--bg-dark);
}

.report-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    transition: color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.report-back-link:hover {
    color: var(--gold-premium, #d4af37);
    background: none;
    transform: translateX(-2px);
}

/* =========================================
           [2] 레이아웃 및 섹션 분리
           ========================================= */
section {
    padding: 120px 24px;
    width: 100%;
    box-sizing: border-box;
}

.section-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* ── 타입 위계 (Pretendard 단일 패밀리) ──────────────────────
         *  900  로고
         *  800  Hero H1 (Display)
         *  700  섹션 타이틀, 카드 제목
         *  600  네비, 레이블, 버튼
         *  400  본문
         * ──────────────────────────────────────────────────────── */

.section-tag {
    color: var(--gold-premium);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 15px;
    display: inline-block;
}

.section-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 60px;
    color: var(--bg-dark);
    letter-spacing: -0.03em;
    line-height: 1.25;
}

.title-flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
}

.bg-hero {
    background: linear-gradient(145deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
    position: relative;
    overflow: hidden;
}

.bg-white {
    background: var(--bg-white);
}

.bg-gray {
    background: var(--bg-light);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.bg-premium {
    background: var(--bg-deep);
}

/* =========================================
           [3] 공통 컴포넌트
           ========================================= */
.btn {
    width: 100%;
    padding: 20px;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
    letter-spacing: 0.03em;
    box-sizing: border-box;
}

.btn-gold {
    background: linear-gradient(135deg, var(--gold-premium) 0%, var(--gold-dark) 100%);
    color: white;
    box-shadow: var(--shadow-glow);
}

.btn-gold:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow-lg);
}

.btn-navy {
    background: var(--bg-dark);
    color: white;
}

.btn-navy:hover {
    background: var(--text-primary);
    transform: translateY(-3px);
    box-shadow: var(--shadow-navy-lg);
}

.btn-outline-gold {
    background: transparent;
    border: 2px solid var(--gold-premium);
    color: var(--gold-dark);
    padding: 10px 22px;
    border-radius: var(--radius-pill);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    margin-bottom: 10px;
}

.btn-outline-gold:hover {
    background: var(--gold-premium);
    color: white;
    box-shadow: var(--shadow-glow);
}

/* 보고서 하단 공유·인쇄·이메일 버튼 */
.btn-report-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    font-size: 0.92rem;
    background: transparent;
    border: 1.5px solid var(--border-light);
    color: var(--text-secondary);
    border-radius: var(--radius-pill);
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.btn-report-ghost:hover {
    border-color: #94a3b8;
    color: var(--text-primary);
}

.btn-report-ghost.sm {
    padding: 10px 22px;
    font-size: 0.85rem;
}

.btn-report-gold-sm {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 28px;
    font-size: 0.92rem;
    background: linear-gradient(135deg, var(--gold-premium), var(--gold-dark));
    border: none;
    color: white;
    border-radius: var(--radius-pill);
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.35);
    transition: all 0.2s;
    font-family: inherit;
}

.btn-report-gold-sm:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(212, 175, 55, 0.45);
}

/* CTA 골드 버튼 (프리미엄 섹션 대형) */
.btn-cta-gold {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--gold-premium), var(--gold-dark));
    border: none;
    color: white;
    padding: 16px 40px;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 900;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(212, 175, 55, 0.4);
    transition: all 0.25s;
    letter-spacing: 0.02em;
    font-family: inherit;
}

.btn-cta-gold:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(212, 175, 55, 0.55);
}

/* 영역별 평가 뱃지 */
.grade-badge {
    padding: 6px 16px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    display: inline-block;
}

.grade-very-good {
    background: #f0fdf4;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.grade-high {
    background: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

.grade-mid {
    background: #fffbeb;
    color: #d97706;
    border: 1px solid #fde68a;
}

.grade-low {
    background: #fee2e2;
    color: #dc2626;
    border: 1px solid #fecaca;
}

.tech-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-top: 15px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.tech-table th,
.tech-table td {
    padding: 20px;
    border-bottom: 1px solid var(--border-light);
    text-align: left;
    font-size: 1.05rem;
    line-height: 1.6;
}

.tech-table tr:last-child th,
.tech-table tr:last-child td {
    border-bottom: none;
}

.tech-table th {
    background: var(--bg-light);
    color: var(--bg-dark);
    font-weight: 600;
    width: 25%;
    letter-spacing: 0.01em;
}

.tech-table td {
    color: var(--text-primary);
    background: white;
}

.tech-table ul {
    margin: 0;
    padding-left: 20px;
}

.tech-table li {
    margin-bottom: 10px;
}

/* =========================================
           [4] 메인 뷰 특화 스타일
           ========================================= */
.bg-hero::before {
    content: '';
    position: absolute;
    width: 1200px;
    height: 1200px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.12) 0%, transparent 65%);
    top: -400px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.bg-hero::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.08) 0%, transparent 70%);
    bottom: -100px;
    right: 5%;
    z-index: 0;
    pointer-events: none;
}

.hero {
    padding: 280px 24px 200px;
    text-align: center;
    color: white;
    position: relative;
    z-index: 10;
}

.hero-eyebrow {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: var(--gold-premium);
    margin-bottom: 28px;
    display: block;
}

.hero h1 {
    font-size: 5rem;
    font-weight: 800;
    margin-bottom: 36px;
    letter-spacing: -0.04em;
    line-height: 1.15;
    text-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.hero h1 span {
    color: var(--gold-premium);
}

.hero-sub {
    font-size: 1.35rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 680px;
    margin: 0 auto 56px;
    font-weight: 300;
    letter-spacing: 0em;
    line-height: 1.9;
}

.hero-divider {
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-premium), transparent);
    margin: 0 auto 56px;
}

.hero-cta {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 70px;
}

.hero-cta .btn {
    width: auto;
    padding: 18px 40px;
    font-size: 1.05rem;
    border-radius: var(--radius-pill);
}

.btn-ghost-white {
    background: transparent;
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: white;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-ghost-white:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
}

.hero-badges {
    display: flex;
    gap: 32px;
    justify-content: center;
    flex-wrap: wrap;
}

.hero-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hero-badge-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gold-premium);
    letter-spacing: -0.03em;
}

.hero-badge-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
    letter-spacing: 0.06em;
}

.hero-badge-sep {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.12);
    align-self: center;
}

.live-ticker {
    background: rgba(0, 0, 0, 0.5);
    padding: 22px 0;
    overflow: hidden;
    border-top: 1px solid rgba(212, 175, 55, 0.12);
    border-bottom: 1px solid rgba(212, 175, 55, 0.12);
    backdrop-filter: blur(10px);
}

.ticker-wrap {
    display: flex;
    white-space: nowrap;
    animation: ticker 15s linear infinite;
}

.ticker-wrap span {
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.1rem;
    margin-right: 100px;
    font-weight: 300;
    letter-spacing: 0em;
}

.ticker-wrap b {
    color: var(--gold-premium);
    font-weight: 700;
    margin-right: 6px;
    font-size: 1.15rem;
}

@keyframes ticker {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ── 스크롤 fade-up 진입 애니메이션 ── */
.fade-up {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

.fade-up.delay-1 {
    transition-delay: 0.1s;
}

.fade-up.delay-2 {
    transition-delay: 0.2s;
}

.fade-up.delay-3 {
    transition-delay: 0.3s;
}

.fade-up.delay-4 {
    transition-delay: 0.4s;
}

@media (prefers-reduced-motion: reduce) {
    .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* =========================================
           [4-A] 리뷰·후기 섹션
           ========================================= */
.review-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 56px;
}

.review-card {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 32px 28px;
    box-shadow: var(--shadow-card);
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: transform 0.25s, box-shadow 0.25s;
}

.review-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-premium);
}

.review-stars {
    color: #f59e0b;
    font-size: 1.05rem;
    letter-spacing: 2px;
}

.review-text {
    font-size: 1.0rem;
    color: var(--text-primary);
    line-height: 1.85;
    flex: 1;
    font-style: italic;
}

.review-text::before {
    content: '\201C';
    font-size: 2rem;
    color: var(--gold-premium);
    line-height: 0;
    vertical-align: -0.5em;
    margin-right: 4px;
    font-style: normal;
}

.review-author {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

.review-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-premium), var(--gold-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.review-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--bg-dark);
}

.review-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 2px;
}

.review-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fef9c3;
    color: #92400e;
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    border: 1px solid #fde68a;
}

/* 상단 집계 바 */
.review-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 48px;
    background: linear-gradient(135deg, var(--bg-deep), var(--bg-dark));
    border-radius: var(--radius-lg);
    padding: 32px 40px;
    margin-bottom: 12px;
}

.rs-stat {
    text-align: center;
}

.rs-num {
    font-size: 2.1rem;
    font-weight: 600;
    color: var(--gold-premium);
    font-family: 'DM Sans', sans-serif;
    letter-spacing: -0.03em;
    line-height: 1;
}

.rs-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 6px;
    letter-spacing: 0.03em;
}

.rs-sep {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
}

/* =========================================
           [4-B] Why DearName 섹션
           ========================================= */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.why-card {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 36px 32px 30px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: box-shadow 0.22s ease, transform 0.22s ease;
}

.why-card:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.why-card--accent {
    background: var(--bg-dark);
    border-color: var(--bg-dark);
}

.why-card-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 4px;
}

.why-card-kicker {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold-premium);
}

.why-card-title {
    font-size: 1.22rem;
    font-weight: 800;
    line-height: 1.4;
    color: var(--bg-dark);
    margin: 0;
}

.why-card--accent .why-card-title {
    color: #fff;
}

.why-card-desc {
    font-size: 0.92rem;
    line-height: 1.85;
    color: var(--text-secondary);
    margin: 0;
    flex: 1;
}

.why-card--accent .why-card-desc {
    color: rgba(255, 255, 255, 0.6);
}

.why-card-stat {
    margin-top: 8px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--gold-premium);
    letter-spacing: -0.02em;
}

.why-card-stat span {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0;
    margin-top: 2px;
}

.why-card--accent .why-card-stat span {
    color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 768px) {
    #why-dearname {
        padding: 56px 0 48px;
    }

    #why-dearname .section-inner {
        padding: 0 20px;
    }

    #why-dearname h2.section-title {
        font-size: 1.8rem;
        margin-bottom: 12px;
    }

    #why-dearname p {
        font-size: 0.92rem;
    }

    /* 가로 스크롤 */
    .why-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        padding: 4px 20px 4px 20px;
        scrollbar-width: none;
    }

    .why-grid::-webkit-scrollbar {
        display: none;
    }

    .why-card {
        min-width: 72vw;
        max-width: 72vw;
        scroll-snap-align: start;
        flex-shrink: 0;
        padding: 24px 22px;
        gap: 8px;
    }

    .why-card-title {
        font-size: 1.05rem;
    }

    .why-card-desc {
        font-size: 0.85rem;
        line-height: 1.7;
    }

    .why-card-stat {
        font-size: 1.15rem;
        margin-top: 4px;
    }
}

/* =========================================
           [4-C] FAQ 섹션
           ========================================= */
.faq-list {
    margin-top: 48px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}

.faq-item {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: white;
}

.faq-q {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 28px;
    text-align: left;
    font-size: 1.0rem;
    font-weight: 700;
    color: var(--bg-dark);
    font-family: inherit;
    transition: background 0.2s;
}

.faq-q:hover {
    background: var(--bg-light);
}

.faq-q[aria-expanded="true"] {
    background: var(--bg-light);
    color: var(--gold-dark);
}

.faq-icon {
    font-size: 1.4rem;
    color: var(--gold-premium);
    transition: transform 0.3s;
    flex-shrink: 0;
    line-height: 1;
}

.faq-q[aria-expanded="true"] .faq-icon {
    transform: rotate(45deg);
}

.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), padding 0.35s;
    font-size: 0.97rem;
    color: var(--text-secondary);
    line-height: 1.85;
    padding: 0 28px;
}

.faq-a.open {
    max-height: 400px;
    padding: 4px 28px 24px;
}

.faq-a strong {
    color: var(--bg-dark);
}

@media (max-width: 768px) {

    /* 집계 바 — 숫자 폰트 축소 */
    .review-summary {
        flex-wrap: nowrap;
        gap: 0;
        padding: 20px 16px;
        justify-content: space-around;
    }

    .rs-sep {
        width: 1px;
        height: 36px;
        display: block;
    }

    .rs-num {
        font-size: 1.3rem;
    }

    .rs-label {
        font-size: 0.68rem;
        margin-top: 4px;
    }

    /* 리뷰 카드 — 가로 스크롤 */
    .review-grid {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 12px;
        margin-top: 24px;
        padding: 4px 20px 4px 20px;
        scrollbar-width: none;
    }

    .review-grid::-webkit-scrollbar {
        display: none;
    }

    .review-card {
        min-width: 72vw;
        max-width: 72vw;
        scroll-snap-align: start;
        flex-shrink: 0;
    }

    /* 스크롤 dot 인디케이터 공통 */
    .scroll-dots {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: 16px;
    }

    .scroll-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--border-light);
        transition: background 0.2s, width 0.2s;
        cursor: pointer;
    }

    .scroll-dot.active {
        background: var(--gold-premium);
        width: 18px;
        border-radius: 3px;
    }
}

@media (max-width: 480px) {
    .review-card {
        padding: 24px 20px;
    }

    .faq-q {
        padding: 18px 20px;
        font-size: 0.95rem;
    }

    .faq-a {
        padding: 0 20px;
    }

    .faq-a.open {
        padding: 4px 20px 20px;
    }
}

.core-text-area li>div {
    flex: 1;
}

.core-text-area li b {
    display: block;
    margin-bottom: 6px;
    color: var(--bg-dark);
    font-size: 1.05rem;
    font-weight: 700;
}

.core-text-area li>div>span {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

.core-report-box {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.core-text-area p {
    font-size: 1.15rem;
    color: var(--text-secondary);
    margin-bottom: 30px;
}

.core-text-area ul {
    list-style: none;
    padding: 0;
}

.core-text-area li {
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    font-size: 1.05rem;
}

.core-text-area li::before {
    content: '✨';
    margin-right: 12px;
    font-size: 1.2rem;
}

.report-visual {
    background: white;
    padding: 50px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-premium);
    position: relative;
    border: 1px solid var(--border-light);
}

.report-visual::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--gold-premium), transparent);
    z-index: -1;
    opacity: 0.3;
}

.report-visual h4 {
    margin-top: 0;
    color: var(--bg-dark);
    font-size: 1.5rem;
    font-weight: 700;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 20px;
    letter-spacing: -0.02em;
}

.badge-premium {
    position: absolute;
    top: 25px;
    right: 25px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    background: var(--gold-premium);
    padding: 6px 12px;
    border-radius: var(--radius-lg);
    letter-spacing: 0.08em;
    box-shadow: var(--shadow-glow);
}

.report-narrative {
    background: var(--bg-light);
    padding: 25px;
    border-radius: var(--radius-lg);
    margin: 30px 0;
    font-size: 1.05rem;
    color: var(--bg-dark);
    font-style: italic;
    line-height: 1.8;
    border-left: 4px solid var(--gold-premium);
}

.theory-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.theory-row {
    display: grid;
    gap: 30px;
}

.theory-row-2 {
    grid-template-columns: repeat(2, 1fr);
}

.theory-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

.theory-grid-uniform {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.theory-card-clean {
    background: white;
    padding: 30px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.04);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.theory-card-clean:hover {
    transform: translateY(-4px);
    border-color: var(--border-gold);
    box-shadow: var(--shadow-premium);
}

.theory-card-clean .tc-icon {
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #fffcf0, #fff8e0);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold-dark);
}

.theory-card-clean .tc-icon svg {
    width: 22px;
    height: 22px;
}

.theory-card-clean h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bg-dark);
    margin: 0;
    letter-spacing: -0.01em;
}

.theory-card-clean .tc-sub {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--gold-dark);
    letter-spacing: 0.08em;
}

.theory-card-clean p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0;
}

.theory-card {
    background: white;
    padding: 40px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-card);
}

.theory-card:hover {
    transform: translateY(-10px);
    border-color: var(--border-gold);
    box-shadow: var(--shadow-premium);
}

.theory-header {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
}

.theory-icon {
    background: var(--bg-light);
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    color: var(--gold-premium);
    border: 1px solid var(--border-light);
    flex-shrink: 0;
    transition: 0.3s;
}

.theory-card:hover .theory-icon {
    background: var(--gold-premium);
    color: white;
}

.theory-icon svg {
    width: 30px;
    height: 30px;
}

.theory-header h3 {
    font-size: 1.4rem;
    color: var(--bg-dark);
    margin: 0 0 5px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.theory-subtitle {
    font-size: 0.9rem;
    color: var(--gold-dark);
    font-weight: 600;
    letter-spacing: 0.04em;
}

.theory-card>p {
    font-size: 1rem;
    color: var(--text-secondary);
    margin-bottom: 30px;
    line-height: 1.7;
    flex-grow: 1;
}

.theory-example {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 24px;
    font-size: 0.95rem;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.theory-example .example-label {
    font-weight: 600;
    color: var(--bg-dark);
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.theory-card.full-width {
    grid-column: 1 / -1;
}

.theory-split {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: center;
}

.theory-split .text-area {
    flex: 1;
}

.theory-split .diagram-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--bg-warm);
    padding: 50px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-gold);
    box-shadow: inset 0 0 20px rgba(212, 175, 55, 0.05);
}

/* 폼 입력 UI */
.form-card {
    background: white;
    padding: 60px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-premium);
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.full-width-form {
    grid-column: span 2;
}

.input-label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bg-dark);
    margin-bottom: 12px;
    letter-spacing: 0.02em;
}

input,
select,
textarea {
    width: 100%;
    padding: 16px 20px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 1.05rem;
    box-sizing: border-box;
    background: var(--bg-light);
    transition: all 0.3s ease;
    color: var(--text-primary);
    font-family: 'Pretendard', sans-serif;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--gold-premium);
    background: white;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.1);
}

/* ── 출생 정보 입력 (1줄 인라인) ── */
.birth-form-area {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.bf-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.bf-sep {
    width: 1px;
    height: 26px;
    background: var(--border-light);
    flex-shrink: 0;
    margin: 0 4px;
}

/* 년도·시·분 입력 칩 */
.bf-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--bg-light);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.bf-chip:focus-within {
    border-color: var(--gold-premium);
    background: white;
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.bf-chip input {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0;
    box-shadow: none !important;
    outline: none;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bg-dark);
    font-family: 'Pretendard', sans-serif;
    text-align: center;
}

.bf-chip input.bf-year {
    width: 50px;
}

.bf-chip input.bf-hm {
    width: 26px;
}

.bf-chip input::placeholder {
    color: #c8c8c8;
    font-weight: 500;
}

.bf-unit {
    font-size: 0.88rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* 월·일 선택 (select 칩) */
.bf-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--bg-light);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 10px 30px 10px 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bg-dark);
    font-family: 'Pretendard', sans-serif;
    cursor: pointer;
    flex: 1;
    min-width: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bf-select:focus {
    outline: none;
    border-color: var(--gold-premium);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

.bf-select option[value=""] {
    color: #c8c8c8;
}

/* 오전/오후 토글 칩 */
.bf-ampm-chip {
    display: inline-flex;
    align-items: center;
    background: var(--bg-light);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 5px 6px;
    gap: 2px;
}

.ampm-pill {
    position: relative;
    cursor: pointer;
}

.ampm-pill input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 1px;
    height: 1px;
}

.ampm-pill span {
    display: inline-flex;
    align-items: center;
    padding: 6px 11px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    border-radius: 9px;
    transition: all 0.2s;
    white-space: nowrap;
    user-select: none;
}

.ampm-pill input:checked~span {
    background: var(--gold-premium);
    color: white;
}

/* 도시 선택 — bf-select와 동일한 높이 */
.bf-city-select {
    appearance: none;
    -webkit-appearance: none;
    background-color: var(--bg-light);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: 10px 30px 10px 14px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--bg-dark);
    font-family: 'Pretendard', sans-serif;
    cursor: pointer;
    flex: 2;
    min-width: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23aaa' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.bf-city-select:focus {
    outline: none;
    border-color: var(--gold-premium);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
}

/* 레거시 호환 (prem 폼 등) */
.ampm-group {
    display: flex;
    gap: 3px;
    margin-right: 4px;
    flex-shrink: 0;
}

/* 윤달 서브 옵션 */
.cal-lunar-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.cal-sub-pill {
    position: relative;
    cursor: pointer;
}

.cal-sub-pill input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.cal-sub-label {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    background: #fafaf8;
    border: 1px dashed var(--text-muted);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    transition: all 0.2s;
    user-select: none;
    margin-left: 4px;
}

.cal-sub-pill:hover .cal-sub-label {
    background: var(--border-light);
}

.cal-sub-pill input:checked~.cal-sub-label {
    background: #fff8e6;
    border-color: var(--gold-dark);
    color: var(--gold-dark);
}

#hanja-selection-area {
    background: var(--bg-warm);
    border: 1px dashed var(--gold-premium);
    padding: 30px;
    border-radius: var(--radius-lg);
    display: none;
    margin-bottom: 25px;
    margin-top: 10px;
}

#hanja-dropdowns {
    display: flex;
    gap: 20px;
}

.hanja-block {
    background: white;
    border: 1px solid var(--border-gold);
    padding: 20px;
    border-radius: var(--radius-md);
    flex: 1;
    text-align: center;
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.05);
}

.hanja-block span {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--bg-dark);
    margin-bottom: 15px;
}

.hanja-block select {
    margin-bottom: 0;
    padding: 12px;
    font-size: 1.1rem;
    text-align: center;
    background: var(--bg-warm);
    font-weight: 600;
}

#analysis-result-area {
    display: none;
    margin-top: 50px;
    border-top: 1px solid var(--border-light);
    padding-top: 50px;
    animation: fadeIn 0.6s ease-in-out;
}

.form-card-title {
    font-size: 2rem;
    margin-bottom: 12px;
    font-weight: 800;
}

.result-summary-header {
    font-size: 1.6rem;
    color: var(--bg-dark);
    font-weight: 800;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.result-row {
    display: grid;
    gap: 16px;
}

.result-row-2 {
    grid-template-columns: repeat(2, 1fr);
}

.result-row-4 {
    grid-template-columns: repeat(4, 1fr);
}

.result-row-3 {
    grid-template-columns: repeat(3, 1fr);
}

.result-box {
    background: var(--bg-white);
    padding: 30px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.result-header h4 {
    margin: 0;
    font-size: 1.15rem;
    color: var(--bg-dark);
    font-weight: 800;
}

/* 프리미엄 의뢰 UI */
.premium-box {
    background: linear-gradient(145deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
    border-radius: var(--radius-lg);
    padding: 80px;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-deep);
}

.premium-box::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.1), transparent 60%);
    pointer-events: none;
}

.premium-form .form-grid {
    gap: 24px;
}

.premium-form .input-label {
    color: rgba(255, 255, 255, 0.8);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 10px;
}

.premium-form .compact-input {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 16px;
    font-size: 1.05rem;
    backdrop-filter: blur(10px);
}

.premium-form .compact-input:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--gold-premium);
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

.premium-form .compact-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.premium-pill-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.premium-pill {
    position: relative;
    cursor: pointer;
}

.premium-pill input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.premium-pill .pill-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-pill);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1rem;
    font-weight: 600;
    transition: all 0.3s ease;
    user-select: none;
}

.premium-pill:hover .pill-label {
    background: rgba(255, 255, 255, 0.1);
}

.premium-pill input:checked~.pill-label {
    background: rgba(212, 175, 55, 0.15);
    border-color: var(--gold-premium);
    color: var(--gold-premium);
    box-shadow: inset 0 0 10px rgba(212, 175, 55, 0.1);
}

.split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.premium-form select option {
    background: var(--bg-dark);
    color: white;
}

.parent-saju-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.parent-saju-who {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--gold-dark);
    white-space: nowrap;
    min-width: 44px;
}

/* 셀프작명 양력/음력 토글 */
.cal-pill-group {
    display: flex;
    gap: 6px;
}

.cal-pill {
    position: relative;
    cursor: pointer;
}

.cal-pill input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.cal-pill .cal-label {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    transition: all 0.2s;
    user-select: none;
}

.cal-pill:hover .cal-label {
    background: var(--border-light);
}

.cal-pill input:checked~.cal-label {
    background: #fff8e6;
    border-color: var(--gold-dark);
    color: var(--gold-dark);
}

/* 푸터 */
footer {
    text-align: center;
    padding: 60px 24px;
    border-top: 1px solid var(--border-light);
    background: var(--bg-white);
    font-size: 0.95rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* =========================================
           [5] 공통 리포트/상세 뷰 스타일
           ========================================= */
#report-view,
#self-report-view,
#theory-detail-view {
    display: none;
    background: var(--bg-light);
    min-height: 100vh;
}

.report-header {
    padding: 160px 24px 100px;
    background: var(--bg-dark);
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.report-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4=');
    opacity: 0.5;
    pointer-events: none;
}

#report-view .report-header {
    background: linear-gradient(145deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
}

#self-report-view .report-header {
    background: linear-gradient(145deg, var(--text-primary) 0%, var(--bg-dark) 100%);
}

/* 이론 가이드 헤더 — 보고서와 동일한 딥다크 그라데이션 */
#theory-detail-view .report-header {
    background: linear-gradient(145deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
}

/* 이론 가이드 h1 서브타이틀 */
.theory-h1-sub {
    font-weight: 300;
    font-size: 2.2rem;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: -0.5px;
}

.score-badge {
    display: inline-block;
    background: var(--gold-premium);
    color: white;
    padding: 10px 25px;
    border-radius: var(--radius-pill);
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 30px;
    box-shadow: var(--shadow-glow);
    white-space: nowrap;
}

#self-report-view .score-badge {
    background: #334155;
    box-shadow: none;
    border: 1px solid #475569;
}

/* 이론 가이드 배지 — 골드로 통일 */
#theory-detail-view .score-badge {
    background: var(--gold-premium);
    box-shadow: var(--shadow-glow);
    border: none;
    margin-bottom: 20px;
}

.report-header h1 {
    font-size: 4.5rem;
    margin: 0 0 15px;
    font-weight: 900;
    letter-spacing: -2px;
    position: relative;
    z-index: 1;
}

#theory-detail-view .report-header h1 {
    font-size: 3.2rem;
    letter-spacing: -1.5px;
}

.report-header h1 span {
    font-weight: 300;
    font-size: 2rem;
    color: rgba(255, 255, 255, 0.6);
    margin-left: 15px;
}

.meta-info {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.15rem;
    margin-top: 25px;
    background: rgba(0, 0, 0, 0.3);
    display: inline-block;
    padding: 12px 30px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    position: relative;
    z-index: 1;
}

.report-main {
    max-width: 1000px;
    margin: -60px auto 100px;
    padding: 0 24px;
    position: relative;
    z-index: 10;
}

.report-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: 60px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: var(--shadow-premium);
    margin-bottom: 50px;
    position: relative;
}

.intro-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: center;
}

.highlight-quote {
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--gold-dark);
    margin-bottom: 30px;
    line-height: 1.5;
    letter-spacing: -0.5px;
}

.intro-text p {
    font-size: 1.1rem;
    color: var(--text-primary);
    margin-bottom: 20px;
    line-height: 1.8;
}

/* 오행 밸런스 바 */
.oheng-bars {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px dashed var(--border-light);
}

.oheng-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.oheng-label {
    width: 55px;
    font-size: 1rem;
    font-weight: 800;
    color: var(--bg-dark);
}

.oheng-bar-bg {
    flex-grow: 1;
    height: 10px;
    background: var(--bg-light);
    border-radius: 10px;
    overflow: hidden;
    margin-right: 20px;
    border: 1px solid rgba(0, 0, 0, 0.03);
}

.oheng-bar-fill {
    height: 100%;
    border-radius: 10px;
}

.oheng-count {
    width: 35px;
    text-align: right;
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text-secondary);
}

/* 사주 그리드 */
.saju-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-top: 44px;
    align-items: start;
}

.saju-box {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    text-align: center;
    border: 1px solid var(--border-light);
    transition: 0.3s;
    overflow: visible;
    display: flex;
    flex-direction: column;
}

.saju-box.point {
    border-color: var(--gold-premium);
    background: var(--bg-warm);
    box-shadow: 0 4px 20px rgba(212, 175, 55, 0.12);
}

.saju-box-bar {
    height: 4px;
    width: 100%;
    background: var(--border-light);
}

.saju-box.point .saju-box-bar {
    background: var(--gold-premium);
}

.saju-box-inner {
    padding: 24px 18px 20px;
    flex: 1;
}

.saju-label {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-weight: 800;
    letter-spacing: 1.2px;
    margin-bottom: 12px;
}

.saju-box.point .saju-label {
    color: var(--gold-dark);
}

.saju-hanja {
    font-size: 2.8rem;
    font-weight: 900;
    color: var(--bg-dark);
    margin: 0 0 6px;
    line-height: 1;
}

.saju-kor {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--gold-dark);
    margin-bottom: 0;
}

.saju-oheng-pill {
    display: inline-block;
    border-radius: var(--radius-lg);
    padding: 3px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: white;
    margin: 10px 0 0;
}

.saju-story {
    font-size: 0.79rem;
    color: var(--text-primary);
    line-height: 1.8;
    text-align: left;
    margin-top: 14px;
    border-top: 1px solid var(--border-light);
    padding-top: 12px;
}

.saju-gungwi {
    font-size: 0.74rem;
    color: var(--text-secondary);
    margin-top: 10px;
    font-weight: 600;
    text-align: center;
}

.saju-desc {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.6;
    text-align: justify;
    word-break: keep-all;
}

/* ── 한국어 의미 단위 줄바꿈 (keep-all: CJK 단어 경계에서만 개행) ── */
h1,
h2,
h3,
h4,
p,
li,
label {
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 작명 시너지 / 의미 */
.synergy-box {
    background: linear-gradient(to right, var(--bg-light), var(--bg-warm));
    padding: 40px;
    border-radius: var(--radius-lg);
    border-left: 6px solid var(--gold-premium);
    margin-bottom: 40px;
}

.synergy-box h3 {
    margin: 0 0 15px;
    font-size: 1.5rem;
    color: var(--bg-dark);
    font-weight: 900;
}

.synergy-box p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.8;
}

.meaning-item {
    display: flex;
    gap: 35px;
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid var(--border-light);
}

.meaning-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.hanja-circle {
    width: 100px;
    height: 100px;
    background: white;
    border: 4px solid var(--gold-premium);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--bg-dark);
    flex-shrink: 0;
    box-shadow: var(--shadow-glow);
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.meaning-text h4 {
    margin: 0 0 15px;
    font-size: 1.5rem;
    color: var(--bg-dark);
    font-weight: 900;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.meaning-text h4 span {
    font-size: 0.95rem;
    font-weight: 700;
    background: var(--bg-light);
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    color: var(--text-secondary);
    border: 1px solid var(--border-light);
}

.meaning-text p {
    margin: 0 0 15px;
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.8;
}

.meaning-effect {
    font-size: 1rem;
    color: var(--gold-dark);
    font-weight: 800;
    background: var(--bg-warm);
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    display: inline-block;
    border: 1px solid var(--border-gold);
}

/* 81수리 분석 */
.suri-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
}

.suri-card {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: var(--radius-lg);
    padding: 35px;
    display: flex;
    gap: 25px;
    box-shadow: var(--shadow-card);
}

.suri-badge {
    background: var(--bg-dark);
    color: white;
    width: 70px;
    height: 70px;
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--shadow-navy);
}

.suri-badge .num {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}

.suri-badge .txt {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.8;
    margin-top: 5px;
}

.suri-info h5 {
    margin: 0 0 12px;
    font-size: 1.3rem;
    color: var(--bg-dark);
    font-weight: 800;
    display: flex;
    align-items: center;
}

.suri-info h5 b {
    color: var(--gold-dark);
    font-weight: 900;
    margin-left: 5px;
}

.suri-info p {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 생애 주기 흐름 컨테이너 */
.chart-container-large {
    background: var(--bg-white);
    padding: 40px 20px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(0, 0, 0, 0.05);
    margin-bottom: 40px;
    box-shadow: var(--shadow-card);
    height: 350px;
}

.timeline {
    border-left: 4px solid var(--bg-light);
    padding-left: 50px;
    margin-left: 20px;
}

.time-step {
    position: relative;
    margin-bottom: 60px;
}

.time-step:last-child {
    margin-bottom: 0;
}

.time-step::before {
    content: '';
    position: absolute;
    left: -61px;
    top: 5px;
    width: 18px;
    height: 18px;
    background: white;
    border: 5px solid var(--gold-premium);
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.1);
}

.time-step h4 {
    margin: 0 0 15px;
    color: var(--bg-dark);
    font-size: 1.4rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.time-step span {
    font-size: 0.9rem;
    background: var(--bg-dark);
    color: white;
    padding: 6px 16px;
    border-radius: var(--radius-pill);
    font-weight: 700;
}

.time-step p {
    margin: 0;
    font-size: 1.1rem;
    color: var(--text-primary);
    line-height: 1.8;
}

.advice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 60px;
}

.advice-card {
    background: white;
    padding: 40px 30px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-card);
    text-align: center;
}

.advice-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.advice-card h4 {
    margin: 0 0 20px;
    color: var(--bg-dark);
    font-size: 1.2rem;
    font-weight: 800;
    border-bottom: 2px solid var(--bg-light);
    padding-bottom: 15px;
}

.advice-card p {
    margin: 0;
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* ── 이론 가이드 상세 뷰 전용 스타일 ─────────────────────── */

/* 헤더 아래 목차 칩 행 */
.theory-toc-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-top: 28px;
    position: relative;
    z-index: 1;
}

.theory-toc-chip {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: rgba(255, 255, 255, 0.85);
    padding: 7px 18px;
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}

.theory-toc-chip:hover {
    background: var(--gold-premium);
    color: white;
    border-color: var(--gold-premium);
    box-shadow: var(--shadow-glow);
}

/* 카드 패딩 + 좌측 골드 라인 */
#theory-detail-view .report-card {
    padding: 44px 56px;
    border-left: 4px solid var(--gold-premium);
}

/* 챕터 레이블 (CHAPTER 01 스타일) */
.theory-chapter-label {
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--gold-dark);
    text-transform: uppercase;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.theory-chapter-label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--gold-premium);
}

/* 이론 번호 골드 원형 배지 */
.theory-num-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--gold-premium), var(--gold-dark));
    color: white;
    font-size: 1rem;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
    flex-shrink: 0;
    margin-right: 14px;
}

/* 이론 제목 행 */
.theory-title-row {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.theory-title-row .section-title {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--bg-dark);
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.3;
}

/* 인트로 박스 */
.theory-intro-box {
    background: linear-gradient(135deg, #fffef9 0%, #fff8e6 100%);
    border-left: 5px solid var(--gold-premium);
    padding: 32px 40px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-bottom: 36px;
    box-shadow: var(--shadow-card);
}

.theory-intro-box p {
    margin: 0;
    font-size: 1.08rem;
    color: var(--bg-dark);
    font-weight: 500;
    line-height: 1.9;
}

/* 팁 박스 — 보고서 ai-story-block과 동일 패턴 */
.theory-tip-box {
    background: #fffbeb;
    padding: 20px 28px 20px 24px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    border-left: 4px solid var(--gold-dark);
    border-top: none;
    border-right: none;
    border-bottom: none;
    margin-top: 20px;
    margin-bottom: 24px;
}

.theory-tip-box h5 {
    margin: 0 0 8px;
    color: var(--gold-dark);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 6px;
}

.theory-tip-box h5::before {
    content: '✦';
    font-size: 0.75rem;
}

.theory-tip-box p {
    margin: 0;
    font-size: 0.97rem;
    color: var(--text-secondary);
    line-height: 1.75;
}

/* 리스트 */
.theory-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.theory-list li {
    margin-bottom: 14px;
    font-size: 1.02rem;
    color: var(--text-secondary);
    line-height: 1.8;
    padding-left: 20px;
    position: relative;
}

.theory-list li::before {
    content: '▸';
    position: absolute;
    left: 0;
    color: var(--gold-premium);
    font-size: 0.8rem;
    top: 3px;
}

.theory-list li b {
    color: var(--bg-dark);
    font-weight: 800;
}

/* 테이블 — th 다크 배경 */
#theory-detail-view .tech-table th {
    background: var(--bg-dark);
    color: #f1f5f9;
    font-weight: 700;
    font-size: 0.95rem;
    width: 160px;
}

#theory-detail-view .tech-table td {
    font-size: 1rem;
}

#theory-detail-view .tech-table tr:hover td {
    background: var(--bg-subtle);
}

/* 오행 컬러 도트 (발음오행 테이블용) */
.oheng-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 7px;
    vertical-align: middle;
    flex-shrink: 0;
}

/* 구분선 + 보너스 팁 헤더 */
.theory-bonus-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bg-dark);
    margin: 0 0 14px;
    padding-top: 28px;
    border-top: 1px dashed var(--border-light);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 하단 CTA 카드 */
.theory-cta-card {
    background: linear-gradient(145deg, var(--bg-deep) 0%, var(--bg-dark) 100%);
    border-radius: var(--radius-lg);
    padding: 56px 60px;
    color: white;
    text-align: center;
    position: relative;
    overflow: hidden;
    margin-top: 60px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-deep);
}

.theory-cta-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.12), transparent 65%);
    pointer-events: none;
}

.theory-cta-card .tc-tag {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--gold-premium);
    text-transform: uppercase;
    margin-bottom: 16px;
}

.theory-cta-card h3 {
    font-size: 1.9rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    margin: 0 0 12px;
    position: relative;
    z-index: 1;
}

.theory-cta-card p {
    font-size: 1.0rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 32px;
    line-height: 1.7;
    position: relative;
    z-index: 1;
}

.theory-cta-btns {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

/* 모바일 대응 — 이론 가이드 전용 */
@media (max-width: 768px) {

    /* 헤더 — TOC 칩 영역이 있어 네거티브 마진 제거 (겹침 방지) */
    #theory-detail-view .report-header {
        padding-bottom: 36px !important;
    }

    #theory-detail-view .report-main {
        margin-top: 0 !important;
        padding-top: 24px;
    }

    /* 헤더 h1 & 서브타이틀 (인라인 스타일 강제 override) */
    #theory-detail-view .report-header h1 {
        font-size: 1.9rem;
        letter-spacing: -0.5px;
    }

    #theory-detail-view .report-header h1 span {
        font-size: 1.1rem !important;
        display: block;
        margin: 6px 0 0;
        letter-spacing: 0 !important;
    }

    /* TOC 칩 행 */
    .theory-toc-row {
        gap: 7px;
        margin-top: 18px;
    }

    .theory-toc-chip {
        font-size: 0.74rem;
        padding: 6px 12px;
    }

    /* 카드 패딩 & 좌측 골드 라인 가늘게 */
    #theory-detail-view .report-card {
        padding: 24px 18px;
        border-left-width: 3px;
        margin-bottom: 20px;
    }

    /* 챕터 레이블 */
    .theory-chapter-label {
        font-size: 0.62rem;
        margin-bottom: 8px;
    }

    /* 이론 번호 배지 소형화 */
    .theory-num-badge {
        width: 28px;
        height: 28px;
        font-size: 0.85rem;
        margin-right: 10px;
        flex-shrink: 0;
    }

    /* 제목 행 — 배지와 제목을 상단 기준 정렬 */
    .theory-title-row {
        align-items: flex-start;
        margin-bottom: 14px;
    }

    .theory-title-row .section-title {
        font-size: 1.15rem;
        line-height: 1.4;
    }

    /* 인트로 박스 */
    .theory-intro-box {
        padding: 18px 18px;
        margin-bottom: 22px;
    }

    .theory-intro-box p {
        font-size: 0.91rem;
        line-height: 1.82;
    }

    /* 팁 박스 */
    .theory-tip-box {
        padding: 14px 16px 14px 14px;
        margin-top: 14px;
        margin-bottom: 16px;
    }

    .theory-tip-box p {
        font-size: 0.88rem;
        line-height: 1.72;
    }

    /* 본문 리스트 */
    .theory-list li {
        font-size: 0.91rem;
        line-height: 1.75;
        margin-bottom: 10px;
    }

    /* 테이블 — 데스크톱 th width: 160px 무력화 후 블록 스타일 정비 */
    #theory-detail-view .tech-table th {
        width: 100% !important;
        padding: 9px 14px;
        font-size: 0.84rem;
    }

    #theory-detail-view .tech-table td {
        padding: 10px 14px;
        font-size: 0.87rem;
    }

    /* CTA 카드 */
    .theory-cta-card {
        padding: 36px 20px;
        margin-top: 36px;
    }

    .theory-cta-card h3 {
        font-size: 1.3rem;
    }

    /* CTA 버튼: 세로 스택 + 전체 너비 + 가운데 정렬 (inline-flex → flex) */
    .theory-cta-btns {
        flex-direction: column;
        gap: 10px;
    }

    .theory-cta-btns>* {
        display: flex !important;
        justify-content: center !important;
        align-items: center;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* 보너스 구분 제목 */
    .theory-bonus-title {
        font-size: 0.95rem;
        padding-top: 22px;
    }
}

@media (max-width: 480px) {
    #theory-detail-view .report-header h1 {
        font-size: 1.65rem;
    }

    #theory-detail-view .report-header h1 span {
        font-size: 1.0rem !important;
    }

    #theory-detail-view .report-card {
        padding: 20px 14px;
    }

    .theory-title-row .section-title {
        font-size: 1.05rem;
    }
}

/* =========================================
           [6] 모달 팝업 (통합)
           ========================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-modal);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.modal-content {
    background: var(--bg-white, white);
    padding: 36px 32px;
    border-radius: var(--radius-lg);
    text-align: center;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    box-shadow: var(--shadow-deep);
    position: relative;
    box-sizing: border-box;
    animation: modalScaleIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes modalScaleIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1.8rem;
    cursor: pointer;
    color: var(--text-muted);
    background: transparent;
    border: none;
    padding: 5px 10px;
    line-height: 1;
    transition: color 0.2s;
}

.close-modal:hover {
    color: var(--text-primary);
}

.social-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    border-radius: var(--radius-md);
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--border-light);
    background: white;
    color: var(--text-primary);
    margin-bottom: 12px;
    transition: all 0.2s;
}

.social-btn:hover {
    background: var(--bg-light);
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.google-btn {
    border-color: #e2e8f0;
}

.google-btn:hover {
    border-color: var(--border-subtle);
}

.apple-btn {
    background: #000000;
    border: 1px solid #000000;
    color: white;
}

.apple-btn:hover {
    background: #1a1a1a;
}

.social-icon {
    width: 24px;
    height: 24px;
}

/* ── 모달 모바일 스크롤 (#9/#10) ── */
@media (max-width: 600px) {
    .modal-content {
        max-height: 90vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 32px 24px;
    }
}

.payment-content h3 {
    margin-top: 0;
    color: var(--bg-dark);
    font-size: 1.8rem;
    font-weight: 900;
    margin-bottom: 15px;
}

.payment-content p {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-bottom: 30px;
    line-height: 1.6;
}

.price-tag {
    font-size: 2.5rem;
    font-weight: 900;
    color: var(--gold-premium);
    margin-bottom: 40px;
}

/* ── 햄버거 메뉴 버튼 ─────────────────────────────────── */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: white;
    border-radius: 2px;
    transition: transform 0.28s ease, opacity 0.2s ease;
    transform-origin: center;
}

.nav-hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.nav-hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── 전역 터치 최적화 ──────────────────────────────────── */
button,
a,
[onclick] {
    touch-action: manipulation;
}

* {
    -webkit-tap-highlight-color: transparent;
}

/* ── 반응형 ────────────────────────────────────────────── */
@media (max-width: 992px) {
    .theory-split {
        flex-direction: column;
        align-items: stretch;
    }

    .theory-split .diagram-area {
        margin-top: 30px;
        padding: 40px 20px;
    }
}

@media (max-width: 768px) {

    /* ─ 햄버거 버튼 노출 / 기본 메뉴 숨김 ─ */
    .nav-hamburger {
        display: flex;
    }

    .main-nav-links {
        display: none;
    }

    .desktop-only {
        display: none !important;
    }

    .mobile-nav-text {
        display: inline;
    }

    /* ─ 모바일 메뉴 드로어 ─ */
    .main-nav-links.mobile-open {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-dark);
        padding: 10px 14px 24px;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        z-index: 150;
        max-height: calc(100vh - 66px);
        overflow-y: auto;
        animation: mobileMenuSlide 0.22s ease;
    }

    @keyframes mobileMenuSlide {
        from {
            opacity: 0;
            transform: translateY(-6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* 일반 링크 */
    .main-nav-links.mobile-open a {
        margin-left: 0;
        padding: 14px 16px;
        border-radius: 10px;
        border-bottom: none;
        font-size: 1.0rem;
        font-weight: 600;
        text-align: right;
        justify-content: flex-end;
        color: white;
        transition: background 0.15s;
    }

    .main-nav-links.mobile-open a:hover,
    .main-nav-links.mobile-open a:active {
        background: rgba(255, 255, 255, 0.1);
    }

    .main-nav-links.mobile-open a+a {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* 하단 CTA 행: 의뢰 + 마이페이지/로그인 나란히 */
    .main-nav-links.mobile-open .nav-cta-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--bg-subtle);
    }

    .main-nav-links.mobile-open .nav-cta-row a,
    .main-nav-links.mobile-open .nav-cta-row>div {
        flex: 1;
        border-top: none !important;
        text-align: right;
        padding: 14px 16px;
        border-radius: 10px;
        font-size: 1.0rem;
        font-weight: 600;
        cursor: pointer;
        color: white;
    }

    .main-nav-links.mobile-open a.premium-link {
        background: transparent;
        color: white !important;
    }

    .main-nav-links.mobile-open a.login-link {
        margin-left: 0;
        background: transparent;
        color: white;
    }

    .main-nav-links.mobile-open #user-badge {
        margin-left: 0 !important;
        background: transparent;
        justify-content: flex-end;
        width: 100%;
    }

    .main-nav-links.mobile-open #user-badge a {
        border-top: none !important;
        font-weight: 600;
        color: white;
        padding: 0;
    }

    /* ─ 그리드 1열 ─ */
    .core-report-box,
    .intro-grid,
    .advice-grid,
    .theory-example-grid,
    .form-grid,
    .suri-grid {
        grid-template-columns: 1fr;
    }

    .theory-row-2,
    .theory-row-3 {
        grid-template-columns: 1fr;
    }

    /* 작명 기준 6개 카드: 모바일 2열 (세로 길이 절반으로) */
    .theory-grid-uniform {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .theory-card-clean {
        padding: 18px 12px;
        gap: 8px;
    }

    .theory-card-clean h3 {
        font-size: 0.92rem;
    }

    .theory-card-clean p {
        font-size: 0.8rem;
        line-height: 1.55;
    }

    .theory-card-clean .tc-sub {
        font-size: 0.72rem;
    }

    .result-row-4,
    .result-row-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .result-row-2 {
        gap: 10px;
    }

    /* 사주 그리드: 2×2 유지 */
    .saju-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin-top: 44px;
    }

    .saju-box-inner {
        padding: 16px 12px 14px;
    }

    .saju-hanja {
        font-size: 2.1rem;
    }

    .saju-story {
        font-size: 0.74rem;
        line-height: 1.7;
    }

    /* 이름 탭: 모바일 균일 그리드 */
    .report-selector-area {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 6px;
        padding: 0 10px;
        margin-bottom: 14px;
    }

    .name-card-tab {
        flex: unset;
        min-width: 0;
        padding: 10px 6px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .card-score-badge {
        margin-bottom: 3px;
        display: block;
        font-size: 0.7rem;
        padding: 2px 6px;
    }

    .card-names {
        display: flex;
        flex-direction: column;
        gap: 2px;
        align-items: center;
    }

    .card-kr {
        font-size: 0.98rem;
    }

    .card-hanja {
        font-size: 0.68rem;
    }

    section {
        padding: 60px 20px;
    }

    .hero {
        padding: 140px 20px 90px;
    }

    .hero h1 {
        font-size: 2.6rem;
        letter-spacing: -1.5px;
    }

    .hero h1 br {
        display: block;
    }

    .hero-badge-sep {
        display: none;
    }

    .hero-sub {
        font-size: 1.15rem;
    }

    .hero-cta {
        margin-bottom: 52px;
    }

    .hero-cta .btn {
        padding: 16px 32px;
    }

    .report-header {
        padding: 130px 20px 90px !important;
    }

    .report-header p,
    #mypage-view .report-header p {
        margin: 0 0 45px !important;
        font-size: 1rem !important;
        color: rgba(255, 255, 255, 0.85) !important;
    }

    .report-main {
        margin: -35px auto 80px !important;
    }

    .report-header h1 {
        font-size: 2.4rem;
        margin: 0 0 10px;
    }

    .report-header h1 span {
        display: block;
        margin: 6px 0 0;
        font-size: 1.5rem;
    }

    #report-header-tagline {
        font-size: 0.92rem !important;
        margin-top: 6px !important;
    }

    .meta-info {
        font-size: 0.85rem;
        margin-top: 14px;
    }

    .report-card,
    #theory-detail-view .report-card {
        padding: 30px 20px;
    }

    .chart-container-large {
        padding: 20px;
        height: 250px;
    }

    .meaning-item {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-bottom: 28px;
        padding-bottom: 28px;
        gap: 20px;
    }

    .meaning-text h4 {
        justify-content: center;
    }

    .premium-box {
        padding: 50px 20px;
    }

    .tech-table th,
    .tech-table td {
        display: block;
        width: 100%;
    }

    .split-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .title-flex-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        margin-bottom: 40px;
    }

    .theory-intro-box {
        padding: 20px;
    }

    /* ─ Phase 1: Critical ─ */
    /* report-visual 패딩 (AI 소견서 미리보기 카드) */
    .report-visual {
        padding: 28px 20px;
    }

    .report-visual h4 {
        font-size: 1.2rem;
    }

    .report-narrative {
        padding: 16px;
        margin: 20px 0;
        font-size: 0.95rem;
    }

    /* form-card 패딩 (셀프 작명 폼) */
    .form-card {
        padding: 28px 16px;
        border-radius: var(--radius-lg);
    }

    /* full-width-form: 1열 그리드에서 span 해제 */
    .full-width-form {
        grid-column: span 1;
    }

    /* ─ Phase 2: Major ─ */
    /* intro-grid gap 축소 (1열 전환 후) */
    .intro-grid {
        gap: 32px;
    }

    /* highlight-quote 폰트 축소 */
    .highlight-quote {
        font-size: 1.35rem;
    }

    /* 소개 섹션 한자 원 축소 */
    .hanja-circle {
        width: 72px;
        height: 72px;
        font-size: 2rem;
        border-width: 3px;
    }

    /* 타임라인 좌측 오프셋 축소 */
    .timeline {
        padding-left: 28px;
        margin-left: 8px;
    }

    .time-step {
        margin-bottom: 36px;
    }

    .time-step::before {
        left: -37px;
    }

    .time-step h4 {
        font-size: 1.15rem;
    }

    /* ─ Phase 3: Minor ─ */
    .advice-card {
        padding: 28px 20px;
    }

    /* ─ Phase 4: birth-form-area 3행 레이아웃 ─ */
    .birth-form-area {
        flex-direction: column;
        gap: 10px;
        align-items: stretch;
    }

    .bf-row {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
    }

    .bf-row .bf-select {
        flex: 1;
        min-width: 0 !important;
    }

    /* 날짜 행: 양력/음력 토글을 아래 줄로 이동 */
    .bf-row--date {
        flex-wrap: wrap;
        row-gap: 8px;
    }

    .bf-row--date .cal-pill-group {
        order: 10;
        width: 100%;
    }

    .bf-row--city .bf-city-select {
        width: 100%;
        flex: 1;
    }

    .bf-sep {
        display: none;
    }

    /* ─ Phase 4: hanja-dropdowns 세로 스택 ─ */
    #hanja-dropdowns {
        flex-direction: column;
        gap: 14px;
    }

    /* ─ Phase 5: 폼·결과 영역 ─ */
    .form-card-title {
        font-size: 1.55rem;
    }

    .result-summary-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 1.2rem;
    }

    .result-box {
        padding: 14px 12px;
        border-radius: var(--radius-md);
    }

    .result-header {
        margin-bottom: 8px;
    }

    .result-header h4 {
        font-size: 0.88rem;
    }

    .result-box>p {
        font-size: 0.75rem !important;
        line-height: 1.45;
        margin-top: 4px;
    }

    .grade-badge {
        font-size: 0.68rem !important;
        padding: 3px 8px !important;
    }

    /* 이름형식 + 성별: 모바일에서 2열 유지 */
    #naming-form {
        grid-template-columns: 1fr 1fr !important;
    }

    #naming-form .full-width-form {
        grid-column: span 2;
    }

    #wstep-1 .form-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    #wstep-1 .full-width-form {
        grid-column: span 2;
    }

    /* 이름스타일 버튼 예시 모바일 표시 */
    .prem-style-pill .psb {
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        padding: 9px 10px;
    }

    .prem-style-pill .psb-ex {
        display: block !important;
        font-size: 0.68rem;
        color: var(--text-muted);
        font-weight: 500;
    }

    .prem-style-pill .psb-ex-label {
        display: none;
    }

    .prem-style-pill .psb-sep {
        display: none !important;
    }

    /* ─ Phase 5: wizard 탭 ─ */
    .wizard-progress {
        gap: 8px;
        margin-bottom: 32px;
    }

    .tab-label {
        font-size: 0.7rem;
        letter-spacing: 0;
    }

    /* ─ Phase 6: 여백 압축 ─ */
    #analysis-result-area {
        margin-top: 32px;
        padding-top: 32px;
    }

    .form-card>p {
        font-size: 0.97rem;
        margin-bottom: 28px;
    }

    /* ─ 섹션 제목 폰트 ─ */
    .section-title {
        font-size: 1.4rem;
        word-break: keep-all;
        line-height: 1.35;
        margin-bottom: 24px;
    }

    /* term-tip 모바일: 클릭 시 툴팁 표시 (hover 대신 click 사용) */
    .term-tip {
        cursor: pointer;
    }

    .section-title .term-tip {
        display: inline-block;
        border-bottom: 1.5px dashed var(--gold-dark);
    }

    /* 모바일에서 hover는 비활성 — tip-open(click)만 활성화 */
    .term-tip:not(.tip-open)::after,
    .term-tip:not(.tip-open)::before {
        opacity: 0 !important;
    }

    /* ─ 버튼 위치 개선 ─ */
    /* 이름 기준 알아보기 버튼: 전체 너비, 텍스트 중앙 */
    .btn-outline-gold {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
        white-space: normal;
    }

    /* 프리미엄 섹션 상하 여백 압축 */
    #premium {
        padding-top: 60px !important;
        padding-bottom: 80px !important;
    }

    /* 이름 스타일 필 버튼: 2열 배치 */
    .prem-style-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .prem-style-pill .psb {
        display: block;
        padding: 10px 10px;
    }

    .prem-style-pill .psb-sep {
        display: none !important;
    }

    .prem-style-pill .psb-ex-label {
        display: none;
    }

    .prem-style-pill .psb-ex {
        display: none;
    }

    /* 셀프 작명 결과 버튼 */
    .report-visual .btn {
        text-align: center;
    }
}

@media (max-width: 480px) {

    /* ─ 소형 폰 전반 ─ */
    section {
        padding: 44px 16px;
    }

    .hero {
        padding: 110px 16px 64px;
    }

    .hero h1 {
        font-size: 1.7rem;
        letter-spacing: -0.5px;
    }

    .hero-eyebrow {
        font-size: 0.85rem;
        letter-spacing: 2px;
    }

    .hero-sub {
        font-size: 1.0rem;
        margin-bottom: 36px;
    }

    .hero-sub br {
        display: none;
    }

    .hero-cta {
        gap: 10px;
        flex-direction: column;
        align-items: center;
        margin-bottom: 44px;
    }

    .hero-cta .btn {
        padding: 14px 24px;
        font-size: 0.95rem;
        width: 100%;
        max-width: 320px;
    }

    .hero-badges {
        gap: 20px;
    }

    .hero-badge-num {
        font-size: 1.25rem;
    }

    .hero-badge-label {
        font-size: 0.72rem;
    }

    /* ─ 카드 패딩 (추가 축소) ─ */
    .report-card,
    #theory-detail-view .report-card {
        padding: 22px 14px;
    }

    .report-visual {
        padding: 20px 14px;
    }

    .form-card {
        padding: 20px 12px;
    }

    .premium-box {
        padding: 32px 16px;
    }

    .modal-content {
        padding: 32px 20px;
        border-radius: var(--radius-lg);
    }

    /* ─ 이름 탭 (480px 추가 축소) ─ */
    .name-card-tab {
        padding: 7px 4px;
    }

    .card-kr {
        font-size: 0.85rem;
    }

    .card-hanja {
        font-size: 0.6rem;
    }

    .card-score-badge {
        font-size: 0.62rem;
    }

    /* ─ 사주 ─ */
    .saju-hanja {
        font-size: 1.8rem;
    }

    .saju-story {
        display: block;
        font-size: 0.7rem;
        line-height: 1.65;
        margin-top: 10px;
        padding-top: 10px;
    }

    /* ─ 보고서 헤더 ─ */
    .report-header h1 {
        font-size: 2.2rem;
    }

    /* ─ 섹션 제목 ─ */
    .section-title {
        font-size: 1.5rem;
    }

    h2.section-title {
        font-size: 1.55rem;
    }

    /* ─ 어드바이스 카드 패딩 ─ */
    .advice-card {
        padding: 28px 18px;
    }

    /* ─ 결론 그리드 ─ */
    .ai-conclusion-grid,
    .conclusion-points {
        grid-template-columns: 1fr;
    }

    /* ─ 타임라인 추가 축소 ─ */
    .timeline {
        padding-left: 22px;
        margin-left: 4px;
    }

    .time-step {
        margin-bottom: 28px;
    }

    .time-step::before {
        left: -30px;
        width: 14px;
        height: 14px;
    }

    /* ─ 한자 원 추가 축소 ─ */
    .hanja-circle {
        width: 60px;
        height: 60px;
        font-size: 1.7rem;
    }

    /* ─ Phase 4~5 추가 축소 ─ */
    .form-card-title {
        font-size: 1.35rem;
    }

    .result-box {
        padding: 12px 10px;
    }

    .result-header h4 {
        font-size: 0.82rem;
    }

    .tab-label {
        font-size: 0.65rem;
    }

    /* 마이페이지 결제내역 모바일 */
    .mp-payment-row {
        flex-wrap: wrap;
        gap: 10px;
    }

    .mp-payment-info {
        min-width: 0;
    }

    .mp-payment-right {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .mp-payment-title {
        font-size: 0.82rem;
    }

    .mp-payment-meta {
        font-size: 0.7rem;
    }

    .mp-payment-amount {
        font-size: 0.88rem;
    }

    /* 마이페이지 전체 폰트 */
    .mp-section-title {
        font-size: 1.15rem;
    }

    .mp-section-tag {
        font-size: 0.68rem;
    }

    .mp-card-title {
        font-size: 0.9rem;
    }

    .mp-card-meta {
        font-size: 0.72rem;
    }

    .mp-sub-card {
        padding: 14px 16px;
        font-size: 0.88rem;
    }

    .mp-badge-ai,
    .mp-badge-sub {
        font-size: 0.62rem;
    }

    /* ─ 보고서 점수 배지: 모바일 축소 (한 줄 유지) ─ */
    .score-badge {
        font-size: 0.78rem;
        letter-spacing: 0.5px;
        padding: 8px 18px;
        max-width: 92vw;
    }

    /* 소형 화면: 기준 카드 2열 유지, 패딩/폰트 추가 축소 */
    .theory-grid-uniform {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .theory-card-clean {
        padding: 14px 10px;
    }

    .theory-card-clean .tc-icon {
        width: 36px;
        height: 36px;
    }

    .theory-card-clean .tc-icon svg {
        width: 18px;
        height: 18px;
    }

    .theory-card-clean h3 {
        font-size: 0.88rem;
    }

    .theory-card-clean p {
        font-size: 0.75rem;
        line-height: 1.5;
    }
}

/* =========================================
           [수정완료] 결제 모달 전용 스타일
           ========================================= */
.payment-options-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    text-align: left;
}

.payment-option {
    display: block;
    cursor: pointer;
    position: relative;
}

.payment-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.payment-option-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-light);
    transition: all 0.2s;
}

.pay-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pay-price {
    font-size: 1.2rem;
    font-weight: 900;
    color: var(--bg-dark);
}

.pay-badge {
    font-size: 0.75rem;
    color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-weight: 800;
}

.payment-option:hover .payment-option-content {
    background: var(--bg-subtle);
    border-color: var(--border-subtle);
}

.payment-option input:checked~.payment-option-content {
    background: var(--bg-warm);
    border-color: var(--gold-premium);
    box-shadow: inset 0 0 0 1px var(--gold-premium);
}

.payment-option input:checked~.payment-option-content .pay-label,
.payment-option input:checked~.payment-option-content .pay-price {
    color: var(--gold-dark);
}

.payment-disclosure {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-light);
    color: var(--text-secondary);
    font-size: 0.84rem;
    line-height: 1.6;
    text-align: left;
}

.payment-disclosure p {
    margin: 0 0 4px;
}

.payment-disclosure a {
    display: inline-block;
    margin-top: 4px;
    color: var(--gold-dark);
    font-weight: 700;
}

.payment-consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
    color: var(--text-primary);
    font-size: 0.84rem;
    line-height: 1.55;
    text-align: left;
    cursor: pointer;
}

.payment-consent input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    accent-color: var(--gold-dark);
    flex: 0 0 auto;
}

.payment-consent b {
    color: var(--gold-dark);
}

/* =========================================
           [수정완료] 리포트 헤더 카드형 탭 스타일
           ========================================= */
.report-selector-area {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding: 0 4px;
    position: relative;
    z-index: 2;
}

.name-card-tab {
    background: rgba(255, 255, 255, 0.07);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
    min-width: 110px;
    user-select: none;
    -webkit-user-select: none;
}

.name-card-tab:hover {
    background: rgba(255, 255, 255, 0.14);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.name-card-tab:active {
    transform: translateY(0) scale(0.97);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.1);
}

.name-card-tab.active {
    background: rgba(212, 175, 55, 0.18);
    border-color: var(--gold-premium);
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.2);
}

.card-score-badge {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.name-card-tab.active .card-score-badge {
    color: var(--gold-premium);
}

.card-names {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.card-kr {
    color: white;
    font-size: 1.45rem;
    font-weight: 800;
}

.name-card-tab.active .card-kr {
    color: var(--gold-premium);
}

.card-hanja {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.88rem;
}

/* ── Executive Summary Card ── */
.exec-summary {
    display: flex;
    align-items: center;
    gap: 20px;
    background: white;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    border-top: 3px solid var(--gold-premium);
    padding: 20px 22px;
    box-shadow: var(--shadow-premium);
    margin-bottom: 20px;
}

.exec-score-ring {
    flex-shrink: 0;
}

.exec-score-body {
    flex: 1;
    min-width: 0;
}

.exec-name {
    font-size: 1.25rem;
    font-weight: 900;
    color: var(--bg-dark);
    margin-bottom: 2px;
}

.exec-name span {
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 6px;
}

.exec-stars {
    font-size: 0.85rem;
    color: var(--gold-premium);
    letter-spacing: 2px;
    margin-bottom: 6px;
}

.exec-msg {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    border-left: 3px solid var(--gold-premium);
    padding-left: 10px;
    margin: 6px 0 10px;
    line-height: 1.6;
    word-break: keep-all;
}

.exec-items {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.exec-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-md);
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.exec-item-grade {
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 0.66rem;
    font-weight: 800;
    flex-shrink: 0;
}

.exec-grade-great {
    background: #f0fdf4;
    color: #15803d;
    border-color: #bbf7d0;
}

.exec-grade-great .exec-item-grade {
    background: #15803d;
    color: #fff;
}

.exec-grade-good {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.exec-grade-good .exec-item-grade {
    background: #1d4ed8;
    color: #fff;
}

.exec-grade-bad {
    background: #fffbeb;
    color: #b45309;
    border-color: #fde68a;
}

.exec-grade-bad .exec-item-grade {
    background: #d97706;
    color: #fff;
}

.exec-grade-worst {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

.exec-grade-worst .exec-item-grade {
    background: #dc2626;
    color: #fff;
}

/* ── 용어 툴팁 ── */
.term-tip {
    border-bottom: 1.5px dashed var(--gold-dark);
    cursor: pointer;
    position: relative;
    display: inline-block;
    color: inherit;
}

.term-tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-dark);
    color: var(--bg-subtle);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.65;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    width: 230px;
    text-align: left;
    white-space: normal;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    transform: translateX(-50%) translateY(4px);
    z-index: 300;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
}

.term-tip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--bg-dark);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 300;
}

.term-tip:hover::after,
.term-tip.tip-open::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.term-tip:hover::before,
.term-tip.tip-open::before {
    opacity: 1;
}

/* 왼쪽 끝 툴팁 위치 보정 */
.term-tip.tip-left::after {
    left: 0;
    transform: translateX(0);
}

.term-tip.tip-left::before {
    left: 18px;
    transform: none;
}

.term-tip.tip-left:hover::after,
.term-tip.tip-left.tip-open::after {
    transform: translateX(0);
}

/* 오른쪽 끝 툴팁 위치 보정 */
.term-tip.tip-right::after {
    left: auto;
    right: 0;
    transform: translateX(0);
}

.term-tip.tip-right::before {
    left: auto;
    right: 18px;
    transform: none;
}

.term-tip.tip-right:hover::after,
.term-tip.tip-right.tip-open::after {
    transform: translateX(0);
}


/* ── C: 분석 로딩 오버레이 ── */
#self-report-loader {
    position: fixed;
    inset: 0;
    background: var(--bg-deep);
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

#self-report-loader.active {
    display: flex;
}

.loader-ring {
    width: 64px;
    height: 64px;
    border: 3px solid rgba(212, 175, 55, 0.15);
    border-top-color: var(--gold-premium);
    border-radius: 50%;
    animation: loaderSpin 0.85s linear infinite;
    margin-bottom: 32px;
}

@keyframes loaderSpin {
    to {
        transform: rotate(360deg);
    }
}

.loader-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.loader-sub {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 28px;
}

.loader-steps-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loader-step {
    font-size: 0.82rem;
    color: var(--gold-premium);
    opacity: 0;
    animation: loaderStepFade 0.4s ease forwards;
}

.loader-step:nth-child(1) {
    animation-delay: 0.3s;
}

.loader-step:nth-child(2) {
    animation-delay: 0.9s;
}

.loader-step:nth-child(3) {
    animation-delay: 1.5s;
}

@keyframes loaderStepFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ── E: 프리미엄 소셜 프루프 칩 ── */
.premium-social-proof {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
    margin-bottom: 0;
}

.psp-chip {
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.25);
    border-radius: var(--radius-pill);
    padding: 6px 16px;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    gap: 6px;
}

.psp-chip strong {
    color: var(--gold-premium);
    font-weight: 800;
}

/* ── F: 셀프작명 → 프리미엄 업셀 카드 ── */
.self-upsell-card {
    background: linear-gradient(135deg, var(--bg-deep) 0%, #0f1f35 100%);
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: var(--radius-lg);
    padding: 48px 40px;
    text-align: center;
    margin: 60px auto 0;
    max-width: 740px;
    color: white;
    position: relative;
    overflow: hidden;
}

.self-upsell-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.1), transparent 60%);
    pointer-events: none;
}

.self-upsell-card .suc-tag {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    color: var(--gold-premium);
    margin-bottom: 14px;
    display: block;
}

.self-upsell-card h3 {
    font-size: 1.7rem;
    font-weight: 900;
    margin: 0 0 14px;
    line-height: 1.3;
}

.self-upsell-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.97rem;
    margin: 0 0 28px;
    line-height: 1.7;
}

.self-upsell-card .suc-price {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 14px;
}

/* ── 스토리형 셀프 보고서 ── */
.story-intro-card {
    max-width: 780px;
    margin: 0 auto 8px;
    padding: 28px 36px;
    background: linear-gradient(135deg, var(--bg-light), var(--bg-subtle));
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--gold-dark);
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.9;
}

.story-chapter-label {
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* ── 편지형 서문 ─────────────────────────────────────── */
.conclusion-letter-wrap {
    background: linear-gradient(135deg, #fffef7 0%, #fff9e8 100%);
    border: 1.5px solid #dab85b;
    border-radius: var(--radius-md);
    padding: 32px 36px 28px;
    position: relative;
    overflow: hidden;
}

.conclusion-letter-wrap::before {
    content: '\201C';
    position: absolute;
    top: 4px;
    left: 16px;
    font-size: 6rem;
    color: var(--gold-premium);
    opacity: 0.13;
    font-family: Georgia, serif;
    line-height: 1;
    pointer-events: none;
}

.conclusion-letter-greeting {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--gold-dark);
    letter-spacing: 0.06em;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dab85b55;
}

.conclusion-letter-body {
    font-size: 0.98rem;
    line-height: 2.1;
    color: var(--text-primary);
    white-space: pre-line;
    margin: 0 0 20px;
}

.conclusion-letter-sig {
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-style: italic;
    font-weight: 600;
}

@media (max-width: 768px) {
    .conclusion-letter-wrap {
        padding: 24px 18px 22px;
        border-radius: var(--radius-md);
    }

    .conclusion-letter-wrap::before {
        font-size: 4.5rem;
        left: 10px;
        top: 2px;
    }

    .conclusion-letter-greeting {
        font-size: 0.78rem;
        margin-bottom: 14px;
        padding-bottom: 10px;
    }

    .conclusion-letter-body {
        font-size: 0.92rem;
        line-height: 1.95;
        margin: 0 0 16px;
    }

    .conclusion-letter-sig {
        font-size: 0.75rem;
    }
}

/* ── 기준별 시각 스코어카드 ─────────────────────────── */
.score-criteria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 4px 0 8px;
}

.score-criteria-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 8px 12px;
    border-radius: var(--radius-md);
    background: var(--bg-light);
    border: 1.5px solid transparent;
    text-align: center;
    transition: transform 0.15s;
}

.score-criteria-item:hover {
    transform: translateY(-2px);
}

.sci-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: white;
    font-weight: 800;
}

.sci-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.sci-sub {
    font-size: 0.64rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.3;
    margin-top: 1px;
}

.sci-grade-pill {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 2px 9px;
    border-radius: var(--radius-lg);
}

/* ── 모바일: 스코어카드 2열 (3열 시 sci-sub 깨짐 방지) ── */
@media (max-width: 768px) {
    .score-criteria-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .score-criteria-item {
        padding: 14px 10px 12px;
        gap: 6px;
    }

    .sci-dot {
        width: 36px;
        height: 36px;
        font-size: 0.95rem;
    }

    .sci-label {
        font-size: 0.85rem;
        word-break: keep-all;
    }

    .sci-sub {
        font-size: 0.72rem;
        word-break: keep-all;
        line-height: 1.4;
    }

    .sci-grade-pill {
        font-size: 0.7rem;
        padding: 2px 9px;
    }
}

/* ── 2-Section 구조 ────────────────────────────────── */
#report-section-story {}

#report-section-expert {
    margin-top: 36px;
}

#expert-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--bg-dark) 0%, var(--text-primary) 60%, #0f2744 100%);
    border: 1.5px solid rgba(212, 175, 55, 0.4);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.22s;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    position: relative;
    overflow: hidden;
}

#expert-toggle-bar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.6), transparent);
}

#expert-toggle-bar:hover {
    border-color: var(--gold-premium);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(212, 175, 55, 0.3);
    transform: translateY(-1px);
}

.expert-toggle-eyebrow {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--gold-premium);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 8px;
    opacity: 0.85;
}

.expert-toggle-title {
    font-size: 0.97rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 3px;
    letter-spacing: -0.01em;
}

.expert-toggle-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.5);
    line-height: 1.5;
    display: none;
}

#expert-toggle-btn {
    background: linear-gradient(135deg, var(--gold-premium) 0%, var(--gold-dark) 100%) !important;
    color: white !important;
    border: none !important;
    padding: 12px 24px !important;
    border-radius: var(--radius-pill) !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(212, 175, 55, 0.35);
    transition: all 0.2s;
}

#expert-toggle-btn:hover {
    box-shadow: 0 6px 24px rgba(212, 175, 55, 0.5);
    transform: scale(1.03);
}

#expert-master-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.6s ease-in-out;
}

#expert-master-body.open {
    max-height: 100000px;
    padding-top: 24px;
}

/* 전문 분석 섹션 시각적 구분 */
#report-section-expert {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff),
        linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.5) 30%, rgba(212, 175, 55, 0.5) 70%, transparent 100%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    position: relative;
}

#report-section-expert::before {
    content: '✦ 전문 분석 영역 ✦';
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--gold-premium);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    padding: 3px 14px;
    border-radius: var(--radius-lg);
    white-space: nowrap;
}

/* ── 한자이야기 카드 (Section 1) ──────────────────────────── */
.hanja-s1-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 12px;
}

.hanja-s1-card {
    text-align: center;
    padding: 24px 16px 20px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gold-light);
    background: linear-gradient(160deg, #fffbeb 0%, #fff 100%);
}

.hanja-s1-char {
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 10px;
}

.hanja-s1-kr {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bg-dark);
    margin-bottom: 4px;
}

.hanja-s1-meaning {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

.hanja-s1-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 12px;
    border-radius: var(--radius-lg);
    font-size: 0.72rem;
    font-weight: 800;
}

.hanja-s1-story {
    margin-top: 20px;
    padding: 16px 20px;
    background: #fffbeb;
    border-left: 4px solid var(--gold-dark);
    border-radius: 0 14px 14px 0;
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--text-primary);
}

/* ── 부모한마디 ─────────────────────────────────────────────── */
#parent-message-input {
    width: 100%;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    font-size: 0.95rem;
    font-family: inherit;
    color: var(--bg-dark);
    resize: vertical;
    line-height: 1.8;
    transition: border-color 0.2s;
    box-sizing: border-box;
    background: #fafafa;
}

#parent-message-input:focus {
    outline: none;
    border-color: var(--gold-dark);
    background: white;
}

/* ── 아코디언 챕터 ──────────────────────────────────── */
/* overflow:visible → 챕터 헤더 내 term-tip 툴팁이 카드 밖으로 노출되어야 함 */
.report-card-acc {
    overflow: visible;
}

.chapter-acc-header {
    cursor: pointer;
}

/* 전문 분석 섹션 내부 챕터: 클릭으로 접기/펼치기 가능 */
#expert-master-body .chapter-acc-header {
    cursor: pointer;
}

.chapter-acc-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.chapter-toggle-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 5px 14px;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-lg);
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    margin-top: 4px;
}

.chapter-toggle-btn:hover {
    background: var(--bg-warm);
    border-color: var(--gold-light);
    color: var(--gold-dark);
}

.chapter-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s ease-in-out;
}

.chapter-acc-body.open {
    max-height: 3000px;
    overflow: visible;
}

.chapter-acc-body>*:first-child {
    margin-top: 12px;
}

.chapter-verdict-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: var(--radius-sm);
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.cvs-badge {
    flex-shrink: 0;
    padding: 4px 14px;
    border-radius: var(--radius-lg);
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.cvs-text {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.5;
}

.story-bridge-wrap {
    max-width: 780px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 0;
}

.story-bridge-line {
    width: 1px;
    height: 28px;
    background: var(--border-light);
}

.story-bridge-pill {
    font-size: 0.85rem;
    color: var(--text-secondary);
    font-style: italic;
    background: var(--bg-light);
    padding: 10px 24px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-light);
    text-align: center;
    word-break: keep-all;
}

@media (max-width: 768px) {
    .story-bridge-wrap {
        padding: 2px 14px;
    }

    .story-bridge-line {
        height: 18px;
    }

    .story-bridge-pill {
        font-size: 0.78rem;
        padding: 9px 16px;
        line-height: 1.55;
        border-radius: var(--radius-md);
    }

    .story-intro-card {
        padding: 18px 18px;
        font-size: 0.92rem;
        line-height: 1.75;
        border-radius: var(--radius-md);
    }

    .chapter-theory-box {
        padding: 14px 14px;
        font-size: 0.82rem;
        line-height: 1.65;
    }

    .chapter-theory-title {
        font-size: 0.72rem;
    }
}

.suri-seasons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 8px;
}

@media(max-width:600px) {
    .suri-seasons-grid {
        grid-template-columns: 1fr;
    }
}

.season-card {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid var(--border-light);
    position: relative;
}

.season-card.season-daegil {
    border-color: #86efac;
    background: #f0fdf4;
}

.season-card.season-good {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.season-card.season-bad {
    border-color: #fecaca;
    background: #fff5f5;
}

.season-card.season-avg {
    border-color: #fde68a;
    background: #fffbeb;
}

.season-card.season-jeong {
    border: 2.5px solid var(--gold-premium) !important;
    background: #fffcf3 !important;
}

/* 흐름 패턴 배너 */
.suri-pattern-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-bottom: 16px;
    border: 1.5px solid;
}

.suri-pattern-banner.rising {
    background: linear-gradient(135deg, #fffcf3, #fff8e1);
    border-color: var(--gold-premium);
}

.suri-pattern-banner.stable {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border-color: #4ade80;
}

.suri-pattern-banner.falling {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-color: #f87171;
}

.suri-pattern-banner.mixed {
    background: linear-gradient(135deg, var(--bg-light), var(--bg-subtle));
    border-color: var(--text-muted);
}

.suri-pattern-banner.peak {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    border-color: #60a5fa;
}

.spb-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.spb-name {
    font-size: 0.98rem;
    font-weight: 900;
    margin-bottom: 3px;
}

.spb-name.rising {
    color: #92400e;
}

.spb-name.stable {
    color: #14532d;
}

.spb-name.falling {
    color: #991b1b;
}

.spb-name.mixed {
    color: #475569;
}

.spb-name.peak {
    color: #1d4ed8;
}

.spb-desc {
    font-size: 0.81rem;
    line-height: 1.55;
}

.spb-desc.rising {
    color: #78350f;
}

.spb-desc.stable {
    color: #166534;
}

.spb-desc.falling {
    color: #7f1d1d;
}

.spb-desc.mixed {
    color: #475569;
}

.spb-desc.peak {
    color: #1e3a8a;
}

.spb-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.spb-tag {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 800;
    border-radius: var(--radius-lg);
    padding: 3px 10px;
    color: white;
    white-space: nowrap;
}

.spb-tag.rising {
    background: var(--gold-premium);
}

.spb-tag.stable {
    background: #16a34a;
}

.spb-tag.falling {
    background: #dc2626;
}

.spb-tag.mixed {
    background: var(--text-secondary);
}

.spb-tag.peak {
    background: #2563eb;
}

/* 수리 특수 배지 */
.suri-special-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    border-radius: 10px;
    padding: 2px 8px;
    margin-top: 5px;
}

.ssb-daegil {
    background: var(--gold-premium);
    color: white;
}

.ssb-daehyung {
    background: #dc2626;
    color: white;
}

.ssb-total {
    background: rgba(212, 175, 55, 0.15);
    color: #92400e;
    border: 1px solid rgba(212, 175, 55, 0.4);
}

.season-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.season-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.season-emoji {
    font-size: 1.2rem;
}

.season-period {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
}

.season-num {
    font-size: 2.2rem;
    font-weight: 900;
    color: var(--bg-dark);
    line-height: 1;
    margin-bottom: 2px;
}

.season-suri-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--bg-dark);
    margin-bottom: 8px;
}

.season-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.jawon-chips {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.jawon-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: var(--radius-pill);
    border: 2px solid;
    background: white;
}

.jawon-chip-hanja {
    font-size: 1.5rem;
    font-weight: 900;
}

.jawon-chip-label {
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.85;
}

.story-score-wrap {
    text-align: center;
    padding: 28px 0 20px;
}

.story-score-num {
    font-size: 4.5rem;
    font-weight: 900;
    color: var(--gold-dark);
    line-height: 1;
}

.story-score-unit {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-left: 4px;
}

.story-score-sub {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 6px;
}

/* AI 보고서 스토리 요소 */
.ai-story-block {
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    margin-top: 20px;
    font-size: 0.95rem;
    line-height: 1.75;
    color: var(--text-primary);
    word-break: keep-all;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .ai-story-block {
        padding: 16px 16px;
        font-size: 0.88rem;
        line-height: 1.7;
    }
}

.ai-tagline {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--bg-dark);
    line-height: 1.55;
    margin-bottom: 16px;
    font-style: italic;
    border-left: 4px solid var(--gold-dark);
    padding-left: 16px;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.ai-hanja-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 22px 0;
    border-bottom: 1px solid var(--border-light);
}

.ai-hanja-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ai-hanja-char {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    font-weight: 900;
    color: white;
    flex-shrink: 0;
}

.ai-hanja-body h4 {
    font-size: 1rem;
    font-weight: 800;
    color: var(--bg-dark);
    margin: 0 0 6px;
}

.ai-hanja-body p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0 0 8px;
}

.ai-hanja-synergy {
    font-size: 0.82rem;
    background: #fff8e6;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    padding: 8px 12px;
    color: #92400e;
    line-height: 1.6;
}

.ai-hanja-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ai-hanja-meta span {
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: 2px 10px;
    white-space: nowrap;
}

/* ── 모바일: 한자 디테일 카드 컴팩트 ── */
@media (max-width: 768px) {
    .ai-hanja-card {
        gap: 12px;
        padding: 16px 0;
    }

    .ai-hanja-char {
        width: 56px;
        height: 56px;
        font-size: 1.8rem;
        border-radius: var(--radius-sm);
    }

    .ai-hanja-meta {
        gap: 5px;
        font-size: 0.7rem;
    }

    .ai-hanja-meta span {
        padding: 2px 8px;
    }

    .ai-hanja-body p {
        font-size: 0.85rem;
        line-height: 1.65;
    }

    .ai-hanja-synergy {
        font-size: 0.78rem;
        padding: 7px 10px;
    }
}

.ai-sound-flow {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ai-sound-char {
    text-align: center;
}

.ai-sound-char .char-kr {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--bg-dark);
    display: block;
}

.ai-sound-char .char-oheng {
    font-size: 0.72rem;
    font-weight: 700;
    color: white;
    border-radius: var(--radius-lg);
    padding: 2px 10px;
    display: inline-block;
    margin-top: 4px;
}

.ai-sound-arrow {
    font-size: 1.1rem;
    color: var(--text-muted);
}

.ai-sound-arrow.good {
    color: #16a34a;
}

.ai-sound-arrow.bad {
    color: #dc2626;
}

.ai-conclusion-letter {
    background: linear-gradient(135deg, #fffbeb, #fff8e6);
    border: 1px solid #fcd34d;
    border-radius: var(--radius-md);
    padding: 24px 28px;
    margin-top: 24px;
}

.ai-conclusion-letter .letter-title {
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--gold-dark);
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.ai-conclusion-letter p {
    font-size: 0.97rem;
    line-height: 1.85;
    color: #78350f;
    margin: 0;
}

.ai-score-display {
    text-align: center;
    padding: 28px 0 20px;
}

.ai-score-num {
    font-size: 4rem;
    font-weight: 900;
    color: var(--gold-dark);
    line-height: 1;
}

.ai-score-denom {
    font-size: 1.2rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.ai-score-label {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-top: 6px;
}

.ai-conclusion-grid,
.conclusion-points {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 20px 0;
}

@media(max-width:600px) {

    .ai-conclusion-grid,
    .conclusion-points {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 결론 포인트 — 셀프/프리미엄 공통 */
.conclusion-point {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 0.82rem;
    font-weight: 700;
}

.conclusion-point-icon {
    font-size: 0.88rem;
    flex-shrink: 0;
}

.conclusion-msg {
    font-size: 0.97rem;
    line-height: 1.85;
    color: var(--text-primary);
    margin-bottom: 22px;
    padding: 20px 22px;
    border-radius: var(--radius-md);
    border-left: 4px solid;
}

/* ── Report Guide 그리드 ── */
.report-guide-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

@media(max-width:720px) {
    .report-guide-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.report-guide-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    background: white;
    border-radius: 10px;
    border: 1px solid var(--border-light);
}

.report-guide-num {
    font-size: 0.95rem;
    font-weight: 900;
    color: var(--gold-dark);
    min-width: 22px;
    flex-shrink: 0;
}

.report-guide-title {
    font-size: 0.83rem;
    font-weight: 800;
    color: var(--bg-dark);
    line-height: 1.3;
}

.report-guide-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 1px;
    line-height: 1.3;
}

/* ── 실천 가이드 섹션 ── */
/* 오행 팁: 가로 카드 (아이콘 좌 + 팁 리스트 우) */
.practice-oheng-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0 28px;
}

.oheng-tip-card {
    display: grid;
    grid-template-columns: 100px 1fr;
    border-radius: var(--radius-md);
    border: 1.5px solid;
    overflow: hidden;
}

@media(max-width:520px) {
    .oheng-tip-card {
        grid-template-columns: 80px 1fr;
    }
}

.oheng-tip-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px 8px;
}

.oheng-tip-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: white;
    flex-shrink: 0;
}

.oheng-tip-name {
    font-size: 0.8rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.3;
}

.oheng-tip-keyword {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.7;
    text-align: center;
}

.oheng-tip-status {
    font-size: 0.62rem;
    font-weight: 800;
    color: white;
    border-radius: var(--radius-lg);
    padding: 2px 7px;
    text-align: center;
    white-space: nowrap;
}

.oheng-tip-right {
    background: white;
    padding: 14px 18px;
    border-left: 1px solid;
}

.oheng-tip-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.oheng-tip-list li {
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--text-secondary);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.oheng-tip-list li::before {
    content: '✦';
    font-size: 0.65rem;
    color: var(--gold-dark);
    flex-shrink: 0;
    margin-top: 4px;
}

.parent-guide-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 4px;
}

.parent-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 0;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.parent-step-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 8px;
    gap: 4px;
}

.parent-step-icon {
    font-size: 1.4rem;
    line-height: 1;
}

.parent-step-age {
    font-size: 0.65rem;
    font-weight: 800;
    color: white;
    border-radius: var(--radius-lg);
    padding: 2px 6px;
    text-align: center;
    white-space: nowrap;
}

.parent-step-right {
    padding: 14px 16px;
    background: white;
}

.parent-step-title {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--bg-dark);
    margin: 0 0 6px;
}

.parent-step-body {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 8px;
}

.parent-step-tips {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.parent-step-tips li {
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-muted);
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.parent-step-tips li::before {
    content: '→';
    font-size: 0.75rem;
    flex-shrink: 0;
    margin-top: 1px;
    opacity: 0.6;
}

/* ── 오행 순환도 + 바 레이아웃 ── */
.oheng-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
    align-items: stretch;
}

.oheng-pentagon-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

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

/* ── 사주 이론 설명 박스 ── */
.chapter-theory-box {
    background: linear-gradient(135deg, #f8faff 0%, #f0f4ff 100%);
    border: 1.5px solid #c7d2fe;
    border-radius: var(--radius-md);
    padding: 18px 20px;
    margin: 14px 0 20px;
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--text-primary);
}

.chapter-theory-box b {
    color: #1e40af;
}

/* report-view 에서는 이론박스 숨김 — ⓘ 버튼 팝오버로 대체 */
#report-view .chapter-theory-box {
    display: none;
}

/* story-intro-card report-view 에서는 숨김 */
#report-view #report-story-intro {
    display: none;
}

/* 챕터 제목 + ⓘ 버튼 row */
.ch-title-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ch-title-row .section-title {
    margin-bottom: 0;
}

/* ⓘ 이론 설명 버튼 */
.theory-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #e0e7ff;
    border: none;
    color: #4f46e5;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.18s;
    line-height: 1;
}

.theory-info-btn:hover {
    background: #c7d2fe;
}

/* 이론 팝오버 — 바텀 시트 */
#theory-popover-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 500;
}

#theory-popover {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: var(--radius-lg) 22px 0 0;
    z-index: 501;
    max-height: 75vh;
    overflow-y: auto;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.14);
}

#theory-popover.open {
    transform: translateY(0);
}

#theory-popover-handle {
    width: 38px;
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    margin: 12px auto 0;
    cursor: grab;
}

#theory-popover-inner {
    padding: 16px 22px 36px;
}

.theory-pop-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.theory-pop-title {
    font-size: 0.85rem;
    font-weight: 900;
    color: #1e40af;
}

.theory-pop-close {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: var(--bg-subtle);
    color: var(--text-secondary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}

.theory-pop-close:hover {
    background: var(--border-light);
}

#theory-popover-body {
    font-size: 0.88rem;
    color: var(--text-primary);
    line-height: 1.78;
}

#theory-popover-body b {
    color: #1e40af;
}

#theory-popover-body .chapter-theory-title {
    display: none;
}

#theory-popover-body .chapter-theory-pillars {
    margin-top: 14px;
}

#theory-popover-body .pillar-explain {
    margin-bottom: 5px;
    font-size: 0.82rem;
}

/* ── 데스크톱 말풍선 팝오버 (769px+) ───────────────────── */
@media (min-width: 769px) {
    #theory-popover-overlay {
        background: transparent;
    }

    #theory-popover {
        bottom: auto;
        left: auto;
        right: auto;
        width: 400px;
        max-width: calc(100vw - 32px);
        max-height: min(70vh, 540px);
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.13), 0 2px 8px rgba(0, 0, 0, 0.07);
        transform: translateY(-8px);
        opacity: 0;
        transition: opacity 0.18s ease, transform 0.18s ease;
    }

    #theory-popover.open {
        transform: translateY(0);
        opacity: 1;
    }

    #theory-popover-handle {
        display: none;
    }

    #theory-popover-inner {
        padding: 16px 20px 24px;
    }

    /* 말풍선 꼬리 — 외곽선 삼각 */
    #theory-popover::before {
        content: '';
        position: absolute;
        top: -8px;
        left: var(--tp-tail, 28px);
        transform: translateX(-50%);
        border: 8px solid transparent;
        border-top: 0;
        border-bottom-color: #e2e8f0;
        z-index: 1;
        pointer-events: none;
    }

    /* 말풍선 꼬리 — 흰색 채움 */
    #theory-popover::after {
        content: '';
        position: absolute;
        top: -6px;
        left: var(--tp-tail, 28px);
        transform: translateX(-50%);
        border: 7px solid transparent;
        border-top: 0;
        border-bottom-color: #fff;
        z-index: 2;
        pointer-events: none;
    }
}

/* 챕터 헤더 내 section-title: 2.8rem 전역값 대신 소형화 */
.chapter-acc-header .section-title {
    font-size: 1.35rem !important;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin-bottom: 4px;
}

.story-chapter-label {
    margin-bottom: 6px;
}

.chapter-verdict-strip {
    margin-top: 10px;
}

/* 플로팅 챕터 네비게이터 — dot + 큰 터치 영역 */
#chapter-float-nav {
    position: fixed;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    display: none;
    flex-direction: column;
    gap: 0;
    background: white;
    border-radius: var(--radius-lg);
    padding: 6px 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    border: 1px solid var(--border-light);
}

#chapter-float-nav.visible {
    display: flex;
}

.cfn-item {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
    transition: all 0.18s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cfn-item::after {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--border-subtle);
    transition: all 0.18s;
}

.cfn-item:hover::after {
    background: var(--text-muted);
    transform: scale(1.3);
}

.cfn-item.cfn-active::after {
    background: var(--gold-premium);
    width: 7px;
    height: 14px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    #chapter-float-nav {
        right: 2px;
    }
}

/* 빈 스토리 블록 숨김 */
.ai-story-block:empty {
    display: none !important;
}

/* AI 해석 블록 접기 */
.ai-story-block.ai-clamped {
    max-height: 9em;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}

.ai-expand-btn {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--gold-dark);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0 0;
    text-align: left;
}

.ai-expand-btn:hover {
    color: var(--gold-premium);
}

.chapter-theory-title {
    font-size: 0.78rem;
    font-weight: 900;
    color: #3b82f6;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}

.chapter-theory-pillars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin: 12px 0 10px;
}

@media(max-width:540px) {
    .chapter-theory-pillars {
        grid-template-columns: 1fr;
    }
}

.pillar-explain {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    padding: 7px 10px;
    background: white;
    border-radius: 9px;
    border: 1px solid #e0e7ff;
}

.pillar-explain.pe-me {
    border-color: var(--gold-premium);
    background: #fffbeb;
    font-weight: 700;
}

.pe-year,
.pe-month,
.pe-day,
.pe-time {
    font-size: 0.72rem;
    font-weight: 900;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    flex-shrink: 0;
}

.pe-year {
    background: #dbeafe;
    color: #1e40af;
}

.pe-month {
    background: #dcfce7;
    color: #15803d;
}

.pe-day {
    background: var(--gold-premium);
    color: white;
}

.pe-time {
    background: var(--bg-subtle);
    color: #475569;
}

/* ── 일주 '나' 배지 ── */
.saju-box-bar {
    position: relative;
}

.saju-me-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--gold-premium);
    color: white;
    font-size: 0.68rem;
    font-weight: 900;
    padding: 3px 10px;
    border-radius: var(--radius-lg);
    letter-spacing: 0.04em;
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(212, 175, 55, 0.35);
    z-index: 2;
}

/* ── 이름 기여 카드 ── */
.oheng-contrib-card {
    background: linear-gradient(135deg, #fffbeb 0%, #fef9c3 100%);
    border: 1.5px solid var(--gold-dark);
    border-radius: var(--radius-md);
    padding: 13px 16px;
    margin-bottom: 14px;
}

.oheng-contrib-title {
    font-size: 0.72rem;
    font-weight: 900;
    color: var(--gold-dark);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 9px;
}

.oheng-contrib-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.oheng-contrib-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    background: white;
    border-radius: 10px;
    padding: 7px 13px;
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.oheng-contrib-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.oheng-contrib-hint {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin: 9px 0 0;
    line-height: 1.6;
}

/* ── 후보 비교 테이블 ── */
#report-compare-section {
    max-width: 780px;
    margin: 0 auto 12px;
}

.compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 380px;
}

.compare-table thead tr {
    background: var(--bg-dark);
}

.ct-label-col {
    padding: 10px 16px;
    text-align: left;
}

.ct-name-col {
    padding: 14px 10px;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s;
    min-width: 110px;
}

.ct-name-col:hover {
    background: rgba(255, 255, 255, 0.08);
}

.ct-name-col.ct-active {
    background: rgba(212, 175, 55, 0.22);
}

.ct-name-kr {
    font-size: 1.05rem;
    font-weight: 900;
    color: white;
    line-height: 1.2;
}

.ct-name-hj {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
}

.ct-now-badge {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    color: var(--gold-premium);
    background: rgba(212, 175, 55, 0.2);
    border: 1px solid rgba(212, 175, 55, 0.4);
    border-radius: var(--radius-lg);
    padding: 2px 8px;
    margin-top: 5px;
}

thead .ct-label-col {
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 1px;
    text-transform: uppercase;
    vertical-align: bottom;
    padding-bottom: 12px;
}

.compare-table tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: background 0.12s;
}

.compare-table tbody tr:last-child {
    border-bottom: none;
}

.compare-table tbody tr:hover {
    background: #fafaf8;
}

.ct-val-col {
    padding: 9px 10px;
    text-align: center;
    font-size: 0.88rem;
}

.ct-val-col.ct-active {
    background: #fffcf3;
}

.ct-score-row td {
    background: #f8f7f3;
}

.ct-score-row td.ct-active {
    background: #fffbea;
}

.ct-score-num {
    font-size: 1.15rem;
    font-weight: 900;
    color: var(--gold-dark);
}

.ct-rank {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 800;
    color: white;
    background: var(--gold-premium);
    border-radius: var(--radius-lg);
    padding: 1px 7px;
    margin-left: 3px;
    vertical-align: middle;
}

.ct-rank.r2 {
    background: var(--text-muted);
}

.ct-rank.r3 {
    background: #b45309;
}

.ct-row-label {
    font-size: 0.83rem;
    font-weight: 700;
    color: var(--bg-dark);
    line-height: 1.3;
    word-break: keep-all;
}

.ct-row-sub {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: 1px;
    word-break: keep-all;
}

.ct-very-good {
    color: #15803d;
    font-weight: 800;
}

.ct-good {
    color: #1d4ed8;
    font-weight: 800;
}

.ct-bad {
    color: #b45309;
    font-weight: 800;
}

.ct-very-bad {
    color: #dc2626;
    font-weight: 800;
}

.ct-mid {
    color: var(--text-muted);
    font-weight: 600;
}

/* ── 모바일: 비교 테이블 ── */
@media (max-width: 768px) {
    #report-compare-section {
        padding: 0 14px;
    }

    .ct-label-col {
        padding: 8px 10px;
    }

    .ct-name-col {
        min-width: 100px !important;
        padding: 10px 6px !important;
    }

    .ct-row-label {
        font-size: 0.75rem;
    }

    .ct-row-sub {
        font-size: 0.62rem;
    }

    .ct-name-kr {
        font-size: 0.9rem;
    }

    .ct-name-hj {
        font-size: 0.65rem;
    }

    .ct-val-col {
        padding: 8px 6px !important;
        font-size: 0.78rem;
    }

    .ct-score-num {
        font-size: 0.95rem;
    }
}


/* ── 오행 계산방식 안내 박스 ── */
.oheng-diff-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 0.84rem;
    color: #78350f;
    line-height: 1.7;
}

.oheng-diff-note .odn-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.oheng-diff-note b {
    color: #92400e;
}

.oheng-diff-note code {
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 0.8rem;
    font-family: inherit;
    color: inherit;
}

/* ── AI 작명 상담 채팅 ── */
#report-chat-section {
    margin-top: 12px;
}

#chat-example-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

#chat-example-chips button {
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
    border-radius: var(--radius-lg);
    padding: 8px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}

#chat-example-chips button:hover {
    background: var(--bg-dark);
    color: white;
    border-color: var(--bg-dark);
}

.chat-followup-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0 4px;
}

.chat-followup-chips button {
    background: var(--bg-subtle);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 5px 13px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all .15s;
}

.chat-followup-chips button:hover {
    background: var(--bg-dark);
    color: white;
    border-color: var(--bg-dark);
}

#chat-messages {
    min-height: 60px;
    max-height: 420px;
    overflow-y: auto;
    padding: 4px 0 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chat-bubble {
    max-width: 82%;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: 0.92rem;
    line-height: 1.75;
    word-break: break-word;
}

.chat-bubble-user {
    align-self: flex-end;
    background: var(--bg-dark);
    color: white;
    border-bottom-right-radius: 4px;
}

.chat-bubble-assistant {
    align-self: flex-start;
    background: var(--bg-light);
    color: var(--text-primary);
    border: 1px solid var(--border-light);
    border-bottom-left-radius: 4px;
}

.chat-bubble-loading {
    opacity: 0.6;
}

/* ── 스켈레톤 UI ── */
@keyframes skeleton-shimmer {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}

.skel {
    background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
    background-size: 800px 100%;
    animation: skeleton-shimmer 1.4s infinite linear;
    border-radius: var(--radius-sm);
}

.skel-line {
    height: 14px;
    margin-bottom: 10px;
}

.skel-title {
    height: 28px;
    width: 60%;
    margin-bottom: 16px;
}

.skel-tag {
    height: 20px;
    width: 100px;
    margin-bottom: 12px;
    border-radius: var(--radius-pill);
}

.skel-block {
    height: 80px;
    margin-bottom: 12px;
    border-radius: var(--radius-md);
}

.skel-chart {
    height: 180px;
    margin-bottom: 20px;
    border-radius: var(--radius-md);
}

/* 보고서 뷰 로딩 스켈레톤 */
#report-skeleton {
    display: none;
    padding: 0;
}

#report-skeleton.active {
    display: block;
}

@keyframes chatDot {

    0%,
    80%,
    100% {
        opacity: 0.2
    }

    40% {
        opacity: 1
    }
}

.chat-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-secondary);
    margin: 0 2px;
    animation: chatDot 1.2s infinite;
}

.chat-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.chat-dot:nth-child(3) {
    animation-delay: 0.4s;
}

#chat-input-area {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border-light);
}

#chat-input {
    flex: 1;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 11px 16px;
    font-size: 0.92rem;
    resize: none;
    font-family: inherit;
    outline: none;
    min-height: 44px;
    max-height: 120px;
    overflow-y: auto;
    transition: border-color 0.18s;
}

#chat-input:focus {
    border-color: var(--gold-dark);
}

#chat-send-btn {
    background: var(--bg-dark);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    padding: 11px 22px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s;
    flex-shrink: 0;
}

#chat-send-btn:hover {
    background: #334155;
}

#chat-send-btn:disabled {
    background: var(--text-muted);
    cursor: not-allowed;
}

#chat-disclaimer {
    font-size: 0.74rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: 14px;
    line-height: 1.5;
}

@media(max-width:600px) {
    .chat-bubble {
        max-width: 92%;
        font-size: 0.88rem;
    }

    #chat-send-btn {
        padding: 11px 16px;
        font-size: 0.85rem;
    }
}

.sound-unified {
    font-size: 0.95rem;
    line-height: 1.85;
    color: var(--text-primary);
    padding: 20px 22px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    word-break: keep-all;
    overflow-wrap: break-word;
}

@media (max-width: 768px) {
    .sound-unified {
        padding: 16px 14px;
        font-size: 0.88rem;
        line-height: 1.7;
    }

    .sound-grade-row {
        flex-wrap: wrap;
        gap: 6px;
    }
}

/* ── 대운 칩 바 ── */
.daeun-chips-bar {
    display: flex;
    gap: 6px;
    padding: 14px 0 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.daeun-chip {
    flex: 1;
    min-width: 54px;
    text-align: center;
    padding: 10px 4px 8px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.2s;
    background: var(--bg-light);
    position: relative;
}

.daeun-chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.daeun-chip.active {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
}

.daeun-chip .dc-age {
    font-size: 0.6rem;
    font-weight: 700;
    color: var(--text-muted);
    display: block;
    margin-bottom: 5px;
    letter-spacing: 0.3px;
}

.daeun-chip .dc-gan {
    font-size: 1.25rem;
    font-weight: 900;
    display: block;
    line-height: 1.1;
}

.daeun-chip .dc-ji {
    font-size: 1.05rem;
    font-weight: 800;
    display: block;
    line-height: 1.1;
}

.daeun-chip .dc-read {
    font-size: 0.58rem;
    color: var(--text-muted);
    display: block;
    margin-top: 3px;
}

/* 상세 패널 */
.daeun-panel {
    padding: 20px 22px;
    background: var(--bg-warm);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--gold-dark);
    animation: fadeIn 0.2s ease;
}

.daeun-panel-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.daeun-panel-ganji {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
    min-width: 48px;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-6px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

.sound-grade-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sound-grade-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ── DearName v2: 동적 보고서 뷰 추가 스타일 ── */
.suri-cards-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.suri-card {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.suri-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.suri-card .suri-badge {
    width: 80px;
    min-width: 80px;
    height: 80px;
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
}

.suri-card .suri-badge .num {
    font-size: 1.6rem;
    font-weight: 900;
    line-height: 1;
}

.suri-card .suri-badge .txt {
    font-size: 0.7rem;
    font-weight: 600;
    margin-top: 4px;
    opacity: 0.85;
}

.suri-card .suri-info {
    flex: 1;
}

.suri-card .suri-info h5 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--bg-dark);
}

.suri-card .suri-info p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0;
}

#report-oheng-bars .oheng-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

#report-oheng-bars .oheng-label {
    width: 64px;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--bg-dark);
}

#report-oheng-bars .oheng-bar-bg {
    flex: 1;
    height: 8px;
    background: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
}

#report-oheng-bars .oheng-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}

#report-oheng-bars .oheng-count {
    width: 52px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
    white-space: nowrap;
}

.meaning-item {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-light);
}

.hanja-circle {
    width: 72px;
    min-width: 72px;
    height: 72px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 900;
    border: 2px solid;
}

.meaning-text {
    flex: 1;
}

.meaning-text h4 {
    font-size: 1.1rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: var(--bg-dark);
}

.meaning-text h4 span {
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
}

.meaning-text p {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.75;
    margin: 0 0 10px;
}

.meaning-effect {
    font-size: 0.85rem;
    color: var(--gold-dark);
    font-weight: 700;
    background: #fffcf0;
    border: 1px solid #f0e0a0;
    border-radius: 8px;
    padding: 8px 12px;
}

.synergy-box {
    background: linear-gradient(135deg, var(--bg-warm), #fff9eb);
    border: 1px solid #f0d080;
    border-radius: var(--radius-lg);
    padding: 28px;
    margin-bottom: 36px;
}

.synergy-box h3 {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--bg-dark);
    margin: 0 0 12px;
}

.synergy-box p {
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.8;
    margin: 0;
}

.timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.time-step {
    padding: 28px 0 28px 28px;
    border-left: 3px solid var(--gold-premium);
    margin-left: 12px;
    position: relative;
}

.time-step::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 30px;
    width: 14px;
    height: 14px;
    background: var(--gold-premium);
    border-radius: 50%;
}

.time-step h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bg-dark);
    margin: 0 0 10px;
}

.time-step h4 span {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-left: 8px;
}

.time-step p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.75;
    margin: 0;
}


/* ═══════════════════════════════════════════════════════
           데스크톱 (≥ 769px) — 네이버 수준 타이포그래피 스케일
           루트 17px 기준: 1rem=17px / 0.88rem≈15px / 0.76rem≈13px
           ═══════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    /*
             * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
             * DearName 데스크톱 타입 스케일 (1rem = 17px)
             *
             *  Display  4.5rem  76px  히어로 H1
             *  H1       2.5rem  42px  섹션 타이틀
             *  H2       1.6rem  27px  챕터 헤더
             *  H3       1.15rem 20px  카드 제목
             *  Body     1.0rem  17px  본문·설명·스토리 (최소 기준)
             *  Label    0.95rem 16px  보조 레이블·태그·배지 텍스트
             *  Caption  0.82rem 14px  메타·획수 등 작아도 되는 정보
             * ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
             */

    html {
        font-size: 17px;
    }

    /* ── 네비게이션 ── */
    .main-nav-links a {
        font-size: 1.05rem;
    }

    /* 18px */
    .logo {
        font-size: 1.35rem;
    }

    /* 23px */

    /* ── 랜딩 히어로 ── */
    .hero h1 {
        font-size: 4.5rem;
    }

    /* Display 76px */
    .hero-sub {
        font-size: 1.0rem;
    }

    /* Body 17px */
    .hero-eyebrow {
        font-size: 1.2rem;
    }

    /* 20px */
    .section-title {
        font-size: 2.5rem;
    }

    /* H1 42px */
    .section-tag {
        font-size: 1.15rem;
    }

    /* 20px */

    /* ── 랜딩 이론 카드 ── */
    .theory-card-clean h3 {
        font-size: 1.15rem;
    }

    /* H3 20px */
    .theory-card-clean p {
        font-size: 1.0rem;
    }

    /* Body 17px */
    .theory-card-clean .tc-sub {
        font-size: 0.95rem;
    }

    /* Label 16px */

    /* ── 보고서 헤더 ── */
    .report-header h1 {
        font-size: 2.8rem;
    }

    /* ~H1 48px */
    .meta-info {
        font-size: 0.95rem;
    }

    /* Label 16px */

    /* ── 챕터 헤더 ── */
    .chapter-acc-header .section-title {
        font-size: 1.6rem !important;
        /* H2 27px */
        letter-spacing: -0.4px;
    }

    .story-chapter-label {
        font-size: 0.95rem;
        letter-spacing: 2px;
    }

    /* Label 16px */
    .chapter-verdict-strip {
        padding: 10px 16px;
        font-size: 1.0rem;
    }

    /* Body 17px */

    /* 보고서 카드 섹션 제목 (챕터 헤더 제외) */
    #report-view .section-title,
    #self-result-area .section-title,
    #analysis-result-area .section-title {
        font-size: 1.75rem;
        /* ~H2 30px */
        letter-spacing: -0.5px;
    }

    /* ── Executive Summary ── */
    .exec-summary {
        padding: 26px 32px;
        gap: 26px;
        border-radius: var(--radius-lg);
    }

    .exec-name {
        font-size: 1.35rem;
    }

    /* 23px */
    .exec-msg {
        font-size: 1.0rem;
        line-height: 1.75;
    }

    /* Body 17px */
    .exec-item {
        font-size: 0.82rem;
        padding: 5px 12px;
        gap: 5px;
    }

    /* Caption 14px */

    /* ── AI 태그라인 ── */
    .ai-tagline {
        font-size: 1.15rem;
        padding-left: 20px;
        line-height: 1.65;
    }

    /* H3 20px */

    /* ── AI 스토리 블록 ── */
    .ai-story-block {
        font-size: 1.0rem;
        padding: 20px 26px;
        line-height: 1.88;
    }

    /* Body 17px */

    /* ── 한자 카드 ── */
    .ai-hanja-card {
        gap: 26px;
        padding: 22px 0;
    }

    .ai-hanja-char {
        width: 80px;
        height: 80px;
        font-size: 2.5rem;
        border-radius: var(--radius-md);
    }

    .ai-hanja-body p {
        font-size: 1.0rem;
        line-height: 1.8;
    }

    /* Body 17px */
    .ai-hanja-synergy {
        font-size: 0.95rem;
        padding: 9px 14px;
    }

    /* Label 16px */
    .ai-hanja-meta {
        font-size: 0.82rem;
    }

    /* Caption 14px */
    .ai-hanja-meta span {
        padding: 3px 12px;
    }

    /* ── 이름 후보 탭 ── */
    .report-selector-area {
        gap: 16px;
    }

    .name-card-tab {
        padding: 20px 28px;
        border-radius: var(--radius-md);
        min-width: 160px;
    }

    .card-kr {
        font-size: 1.65rem;
    }

    /* 28px */
    .card-hanja {
        font-size: 0.95rem;
    }

    /* Label 16px */
    .card-score-badge {
        font-size: 0.82rem;
        margin-bottom: 8px;
    }

    /* Caption 14px */

    /* ── 사격수리 카드 ── */
    .season-card {
        padding: 22px 20px;
        border-radius: var(--radius-md);
    }

    .season-num {
        font-size: 2.4rem;
    }

    /* 41px */
    .season-suri-name {
        font-size: 0.95rem;
        margin-bottom: 9px;
    }

    /* Label 16px */
    .season-desc {
        font-size: 1.0rem;
        line-height: 1.7;
    }

    /* Body 17px */

    /* ── 발음 오행 unified ── */
    .sound-unified {
        font-size: 1.0rem;
        padding: 20px 26px;
        line-height: 1.88;
    }

    /* Body 17px */

    /* ── 자원오행 칩 ── */
    .jawon-chip {
        padding: 10px 16px;
        gap: 10px;
        border-radius: var(--radius-lg);
        min-height: 56px;
    }

    .jawon-chip-hanja {
        font-size: 1.4rem;
    }

    .jawon-chip-kr {
        font-size: 0.82rem;
    }

    .jawon-chip-oheng {
        font-size: 0.72rem;
    }

    /* Caption 14px */

    /* ── 오행 밸런스 바 ── */
    #report-oheng-bars .oheng-item {
        gap: 13px;
        margin-bottom: 11px;
    }

    #report-oheng-bars .oheng-label {
        width: 80px;
        font-size: 0.95rem;
    }

    /* Label 16px */
    #report-oheng-bars .oheng-bar-bg {
        height: 10px;
    }

    #report-oheng-bars .oheng-count {
        font-size: 0.82rem;
    }

    /* Caption 14px */

    /* ── 오행 분포 아이템 ── */
    .oheng-dist-item {
        padding: 11px 20px;
        gap: 11px;
        border-radius: var(--radius-md);
    }

    .oheng-dist-hanja {
        font-size: 0.95rem;
    }

    /* Label 16px */
    .oheng-dist-count {
        font-size: 0.82rem;
    }

    /* Caption 14px */

    /* ── 사주 원국 ── */
    .saju-mingsik .gan-cell {
        font-size: 1.7rem;
    }

    /* 29px */
    .saju-mingsik .ji-cell {
        font-size: 2.3rem;
    }

    /* 39px */
    .saju-mingsik .gan-kr,
    .saju-mingsik .ji-kr {
        font-size: 0.82rem;
    }

    /* Caption 14px */
    .saju-mingsik .am-cell {
        font-size: 0.82rem;
    }

    /* Caption 14px */

    /* ── 인생 흐름 패턴 배너 ── */
    .suri-pattern-banner {
        padding: 18px 22px;
        border-radius: var(--radius-md);
        gap: 18px;
    }

    .spb-name {
        font-size: 1.0rem;
    }

    /* Body 17px */
    .spb-desc {
        font-size: 0.95rem;
    }

    /* Label 16px */

    /* ── 수리 시즌 그리드 ── */
    .suri-seasons-grid {
        gap: 16px;
    }

    /* ── 전문 분석 토글 ── */
    #expert-toggle-bar {
        padding: 18px 26px;
    }

    .expert-toggle-title {
        font-size: 1.0rem;
    }

    /* Body 17px */

    /* ── 종합 결론 서신 ── */
    .conclusion-letter-wrap {
        padding: 34px 38px;
    }

    .conclusion-letter-text {
        font-size: 1.0rem;
        line-height: 2.0;
    }

    /* Body 17px */

    /* ── 점수 카드 ── */
    .score-criteria-grid {
        gap: 11px;
    }

    .sci-label {
        font-size: 0.82rem;
    }

    /* Caption 14px */

    /* ── 이론 박스 ── */
    .chapter-theory-title {
        font-size: 0.95rem;
    }

    /* Label 16px */
    .chapter-theory-box {
        font-size: 1.0rem;
        line-height: 1.8;
    }

    /* Body 17px */

    /* ── 판정 뱃지 ── */
    .grade-badge {
        font-size: 0.82rem;
        padding: 5px 14px;
    }

    /* Caption 14px */

    /* ── 인트로 그리드 gap ── */
    .intro-grid {
        gap: 60px;
    }

    /* ── result-box ── */
    .result-header h4 {
        font-size: 0.95rem;
    }

    /* Label 16px */
    .result-box>p {
        font-size: 1.0rem !important;
    }

    /* Body 17px */
}

/* ═══════════════════════════════════════════════════
           태블릿 (769px ~ 1024px) — 데스크톱 스케일 소폭 축소
           ═══════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {
    html {
        font-size: 15px;
    }

    /* 히어로 */
    .hero {
        padding: 180px 32px 140px;
    }

    .hero h1 {
        font-size: 3.6rem;
    }

    .hero-eyebrow {
        font-size: 1.1rem;
    }

    .section-title {
        font-size: 2.1rem;
    }

    .section-tag {
        font-size: 1.05rem;
    }

    /* 보고서 헤더 */
    .report-header {
        padding: 120px 32px 80px;
    }

    .report-header h1 {
        font-size: 2.3rem;
    }

    /* 챕터 헤더 */
    .chapter-acc-header .section-title {
        font-size: 1.4rem !important;
    }

    /* 이름 후보 탭 */
    .name-card-tab {
        padding: 16px 22px;
        min-width: 130px;
    }

    .card-kr {
        font-size: 1.45rem;
    }

    /* 사주 원국 */
    .saju-mingsik .ji-cell {
        font-size: 1.9rem;
    }

    .saju-mingsik .gan-cell {
        font-size: 1.4rem;
    }

    /* 사격수리 카드 */
    .season-num {
        font-size: 2.0rem;
    }
}

/* ── DearName v2: 인쇄 스타일 ── */
@media print {

    #main-nav,
    #report-nav,
    #user-badge,
    .report-selector-area,
    #load-more-btn,
    button,
    .modal-overlay {
        display: none !important;
    }

    #report-view {
        display: block !important;
    }

    .report-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }

    body {
        background: white;
    }

    .report-header {
        background: white;
        padding: 20px 0;
    }
}


/* ── 사주명식 표 ── */
/* 사주 원국 설명 토글 */
details.saju-theory-details {
    margin-bottom: 16px;
}

details.saju-theory-details>summary {
    font-size: 0.78rem;
    font-weight: 800;
    color: #3b82f6;
    letter-spacing: 0.04em;
    cursor: pointer;
    list-style: none;
    padding: 8px 14px;
    background: #eff6ff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #bfdbfe;
    user-select: none;
}

details.saju-theory-details>summary::-webkit-details-marker {
    display: none;
}

details.saju-theory-details[open]>summary {
    border-radius: 10px 10px 0 0;
}

details.saju-theory-details>summary::after {
    content: '↓';
    margin-left: auto;
    font-weight: 900;
}

details.saju-theory-details[open]>summary::after {
    content: '↑';
}

details.saju-theory-details .theory-detail-body {
    padding: 12px 14px 14px;
    background: white;
    border-radius: 0 0 10px 10px;
    font-size: 0.82rem;
    line-height: 1.65;
    border: 1px solid #bfdbfe;
    border-top: none;
    color: var(--text-primary);
}

/* 사주 기둥 안내 strip */
.pillar-guide-strip {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    margin-top: 4px;
}

.pg-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: var(--text-secondary);
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 4px 8px;
    font-weight: 600;
}

.pg-item.pg-me {
    background: #fffbeb;
    border-color: var(--gold-premium);
    color: var(--gold-dark);
    font-weight: 700;
}

.saju-mingsik-wrap {
    overflow-x: auto;
    margin: 0 0 24px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.saju-mingsik {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.saju-mingsik th,
.saju-mingsik td {
    border-bottom: 1px solid var(--border-light);
    border-right: 1px solid var(--border-light);
    padding: 0;
    text-align: center;
}

.saju-mingsik th:last-child,
.saju-mingsik td:last-child {
    border-right: none;
}

.saju-mingsik tr:last-child td {
    border-bottom: none;
}

.saju-mingsik thead tr {
    background: var(--bg-light);
}

.saju-mingsik thead th {
    font-weight: 800;
    color: var(--text-secondary);
    font-size: 0.82rem;
    letter-spacing: 0.05em;
    padding: 12px 8px;
}

.saju-mingsik .row-label {
    background: var(--bg-light);
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.82rem;
    width: 58px;
    letter-spacing: 0.03em;
    padding: 18px 8px;
}

.saju-mingsik .gan-cell {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    padding: 20px 8px 6px;
}

.saju-mingsik .gan-kr {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
    padding-bottom: 16px;
}

.saju-mingsik .ji-cell {
    font-size: 2.4rem;
    font-weight: 900;
    line-height: 1;
    padding: 20px 8px 6px;
}

.saju-mingsik .ji-kr {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: block;
    padding-bottom: 16px;
}

.saju-mingsik .am-cell {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.8;
    padding: 12px 6px;
    letter-spacing: 0.02em;
}

.oheng-dist-wrap {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.oheng-dist-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 10px 18px;
    border: 1px solid var(--border-light);
}

.oheng-dist-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.oheng-dist-hanja {
    font-size: 0.88rem;
    font-weight: 800;
}

.oheng-dist-count {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--bg-dark);
    margin-left: 2px;
}

.oheng-dist-item.weak .oheng-dist-count {
    color: #ef4444;
}

.oheng-dist-plus {
    font-size: 0.85rem;
    font-weight: 900;
    margin-left: 1px;
    opacity: 0.85;
}

/* ── 구독 팝업 ── */
.plan-option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-bottom: 12px;
    transition: all 0.2s;
}

.plan-option:hover {
    border-color: var(--gold-premium);
}

.plan-option.selected {
    border-color: var(--gold-premium);
    background: rgba(212, 175, 55, 0.06);
}

.plan-radio {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border-subtle);
    border-radius: 50%;
    flex-shrink: 0;
    transition: all 0.2s;
}

.plan-option.selected .plan-radio {
    border-color: var(--gold-premium);
    background: var(--gold-premium);
    box-shadow: inset 0 0 0 4px white;
}

.plan-badge {
    font-size: 0.72rem;
    font-weight: 800;
    padding: 3px 9px;
    border-radius: var(--radius-lg);
    margin-left: 8px;
}

.plan-badge.popular {
    background: #fef3c7;
    color: #92400e;
}

.plan-badge.best {
    background: #fee2e2;
    color: #991b1b;
}

.plan-price {
    margin-left: auto;
    text-align: right;
}

.plan-price-main {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bg-dark);
}

.plan-price-per {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* ── 마이페이지 섹션 ── */
.mp-section-tag {
    color: var(--gold-premium);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 6px;
}

.mp-section-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--bg-dark);
    margin: 0 0 18px;
}

.mp-empty {
    text-align: center;
    padding: 36px 0;
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.mp-report-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-light);
}

.mp-report-row:last-child {
    border-bottom: none;
}

.mp-report-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: 900;
    color: white;
    flex-shrink: 0;
}

.mp-btn {
    border: none;
    padding: 7px 14px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.mp-btn-gold {
    background: var(--gold-premium);
    color: white;
}

.mp-btn-gold:hover {
    background: var(--gold-dark);
}

.mp-btn-blue {
    background: var(--bg-dark);
    color: white;
}

.mp-btn-blue:hover {
    background: var(--text-primary);
}

.mp-btn-outline {
    background: transparent;
    border: 1px solid var(--border-light);
    color: var(--text-secondary);
}

.mp-btn-outline:hover {
    border-color: var(--bg-dark);
    color: var(--bg-dark);
}

.mp-btn-danger {
    background: transparent;
    border: 1px solid #fca5a5;
    color: #ef4444;
}

.mp-account-danger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 24px;
    padding: 24px 28px;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    background: #fffafa;
}

.mp-account-danger-title {
    margin: 8px 0 4px;
    color: #7f1d1d;
    font-size: 1.08rem;
    line-height: 1.35;
}

.mp-account-danger-copy p {
    margin: 0;
    color: #7f5860;
    font-size: 0.84rem;
    line-height: 1.6;
}

.mp-withdrawal-button {
    flex: 0 0 auto;
    min-width: 112px;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid #dc2626;
    border-radius: 6px;
    color: #b91c1c;
    background: #ffffff;
    font-family: 'Pretendard', sans-serif;
    font-size: 0.88rem;
    font-weight: 800;
    cursor: pointer;
    transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}

.mp-withdrawal-button:hover,
.mp-withdrawal-button:focus-visible {
    border-color: #b91c1c;
    color: #ffffff;
    background: #b91c1c;
    outline: none;
}

.mp-sub-card {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.mp-provider-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: var(--radius-lg);
    font-size: 0.78rem;
    font-weight: 700;
    background: var(--bg-subtle);
    color: #475569;
}

/* ── 결제 내역 ── */
.mp-payment-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--border-light);
}

.mp-payment-row:last-child {
    border-bottom: none;
}

.mp-payment-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.mp-payment-icon.type-sub {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
}

.mp-payment-icon.type-ai {
    background: linear-gradient(135deg, #fefce8, #fef9c3);
}

.mp-payment-info {
    flex: 1;
    min-width: 0;
}

.mp-payment-title {
    font-size: 0.97rem;
    font-weight: 800;
    color: var(--bg-dark);
}

.mp-payment-meta {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 3px;
}

.mp-payment-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
    flex-shrink: 0;
}

.mp-payment-amount {
    font-size: 1rem;
    font-weight: 800;
    color: var(--bg-dark);
}

.mp-payment-status {
    font-size: 0.73rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: var(--radius-lg);
}

.mp-status-done {
    background: #f0fdf4;
    color: #16a34a;
}

.mp-status-cancel {
    background: #fef2f2;
    color: #dc2626;
}

.mp-status-refund {
    background: var(--bg-light);
    color: var(--text-secondary);
}

.mp-payment-type-badge {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 2px 8px;
    border-radius: 10px;
    margin-right: 6px;
    vertical-align: middle;
}

.mp-badge-sub {
    background: #dcfce7;
    color: #15803d;
}

.mp-badge-ai {
    background: #fef9c3;
    color: #a16207;
}

.mp-refund-form {
    flex: 0 0 calc(100% - 58px);
    max-width: calc(100% - 58px);
    margin: 4px 0 2px 58px;
    padding: 16px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: var(--bg-light);
}

.mp-refund-label {
    display: block;
    margin-bottom: 8px;
    color: var(--bg-dark);
    font-size: 0.85rem;
    font-weight: 800;
}

.mp-refund-textarea {
    width: 100%;
    min-height: 104px;
    resize: vertical;
    padding: 12px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    background: white;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.88rem;
    line-height: 1.55;
}

.mp-refund-textarea:focus {
    border-color: var(--gold-premium);
    outline: 2px solid rgba(212, 175, 55, 0.15);
}

.mp-refund-footer,
.mp-refund-actions {
    display: flex;
    align-items: center;
}

.mp-refund-footer {
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
}

.mp-refund-actions {
    gap: 8px;
}

.mp-refund-help {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* Wizard */
.wizard-progress {
    display: flex;
    gap: 16px;
    margin-bottom: 44px;
}

.wizard-step-tab {
    flex: 1;
    text-align: center;
    cursor: default;
}

.wizard-step-tab .tab-bar {
    height: 3px;
    background: rgba(0, 0, 0, 0.08);
    margin-bottom: 8px;
    border-radius: 2px;
    transition: background 0.35s;
}

.wizard-step-tab .tab-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.wizard-step-tab.wt-active .tab-bar {
    background: var(--gold-premium);
}

.wizard-step-tab.wt-active .tab-label {
    color: var(--gold-dark);
}

.wizard-step-tab.wt-done .tab-bar {
    background: rgba(212, 175, 55, 0.38);
}

.wizard-step-tab.wt-done .tab-label {
    color: var(--gold-dark);
    opacity: 0.6;
}

.wizard-step {
    display: none;
}

.wizard-step.ws-active {
    display: block;
    animation: wsFadeIn 0.25s ease;
}

@keyframes wsFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

.wizard-nav {
    display: flex;
    gap: 12px;
    margin-top: 44px;
}

.wizard-btn-prev {
    flex: 1;
    padding: 17px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.97rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.wizard-btn-prev:hover {
    background: var(--bg-dark);
    color: white;
}

.wizard-btn-next {
    flex: 2;
    padding: 17px;
    background: linear-gradient(135deg, var(--gold-dark), var(--gold-premium));
    border: none;
    border-radius: var(--radius-md);
    color: white;
    font-size: 0.97rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}

.wizard-btn-next:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.wizard-step-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-top: 10px;
    text-align: center;
}

.wizard-step-title {
    color: var(--bg-dark);
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0 0 6px;
}

.wizard-step-sub {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0 0 30px;
}

/* 필수·선택 뱃지 */
.badge-req {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: var(--radius-lg);
    background: #fee2e2;
    color: #dc2626;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0;
}

.badge-opt {
    display: inline-flex;
    align-items: center;
    font-size: 0.66rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: var(--radius-lg);
    background: var(--bg-subtle);
    color: var(--text-muted);
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0;
}

/* 이름 스타일 선택 */
.prem-style-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.prem-style-pill {
    position: relative;
    cursor: pointer;
}

.prem-style-pill input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.prem-style-pill .psb {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    padding: 7px 14px;
    background: var(--bg-subtle);
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
    line-height: 1;
}

.prem-style-pill .psb .psb-sep {
    display: inline-block;
    width: 1px;
    height: 11px;
    background: var(--border-subtle);
    margin: 0 7px;
    vertical-align: middle;
}

.prem-style-pill .psb .psb-ex-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-muted);
}

.prem-style-pill .psb .psb-ex {
    font-weight: 500;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.prem-style-pill:hover .psb {
    background: var(--border-light);
}

.prem-style-pill input:checked~.psb {
    background: #fff8e6;
    border-color: #b45309;
    color: #b45309;
}

.prem-style-pill input:checked~.psb .psb-sep,
.prem-style-pill input:checked~.psb .psb-ex-label,
.prem-style-pill input:checked~.psb .psb-ex {
    color: #b45309;
    opacity: 0.7;
}

.tooltip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    font-size: 0.68rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.5);
    cursor: help;
    margin-left: 5px;
    vertical-align: middle;
}

/* [이전 중복 선언 제거 — [6] 모달 팝업 섹션으로 통합됨] */

/* ═══════════════════════════════════════════════════════
           [추가] UI 감사 보고서 개선사항
           ═══════════════════════════════════════════════════════ */

/* ── #5: nav 스타일 통일 (딥 네이비 / 반투명 블러) ── */

/* 서브 페이지 뒤로가기 텍스트 링크 스타일 */
.report-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    transition: color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.report-back-link:hover {
    color: var(--gold-premium, #d4af37);
    background: none;
    transform: translateX(-2px);
}

nav.nav-light .report-back-link {
    color: var(--text-secondary, #64748b);
    background: none;
    border: none;
}

@media (max-width: 768px) {
    /* 모바일에서는 햄버거 메뉴와 로고가 사용되므로 로고 옆 뒤로가기 버튼 숨김 */
    .report-back-link {
        display: none !important;
    }

    /* Chapter 2 자원오행 및 인트로 1열 레이아웃 (글자 찌그러짐 방지) */
    .intro-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .intro-grid > div {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* 자원오행 인터랙티브 칩 스타일 (소프트 프리미엄 톤) */
.jawon-chips {
    display: flex;
    gap: 12px;
    margin: 14px 0 20px;
    flex-wrap: wrap;
    align-items: center;
}

.jawon-chip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 12px;
    border: 1.5px solid #e2e8f0;
    background: #ffffff;
    color: #1e293b;
    cursor: pointer;
    user-select: none;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    min-height: 60px;
    box-sizing: border-box;
}

.jawon-chip:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.jawon-chip.active {
    background: #fffdf5 !important;
    border-width: 2px !important;
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.16) !important;
    transform: scale(1.02);
}

.jawon-chip:not(.active) {
    opacity: 0.42;
    filter: grayscale(0.85);
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
    transform: none !important;
}

.jawon-chip-hanja {
    font-size: 1.45rem;
    font-weight: 900;
    line-height: 1;
    flex-shrink: 0;
    display: inline-block;
}

.jawon-chip-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    text-align: left;
    overflow: visible;
}

.jawon-chip-kr {
    display: block;
    font-weight: 800;
    font-size: 0.85rem;
    line-height: 1.25;
    color: inherit;
}

.jawon-chip-oheng {
    display: block;
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.25;
    opacity: 0.85;
    white-space: nowrap;
}

/* Main mobile rhythm: keep the landing page scannable without removing content. */
@media (max-width: 768px) {
    #main-view section {
        padding: 44px 20px !important;
    }

    #main-view .hero {
        padding: 96px 20px 52px !important;
    }

    #main-view #why-dearname {
        padding: 44px 0 36px !important;
    }

    #main-view #premium {
        padding: 52px 20px 56px !important;
    }

    #main-view .live-ticker {
        padding: 12px 0;
    }

    #main-view .ticker-wrap span {
        font-size: 0.82rem;
        margin-right: 48px;
    }

    #main-view .ticker-wrap b {
        font-size: 0.86rem;
    }

    #main-view footer {
        padding: 32px 20px 24px;
    }
}

/* Keep the first three SVG menu assets as the visual and typographic baseline. */
.nav-icon-link,
.main-nav-links a.login-link {
    min-height: 36px;
    box-sizing: border-box;
    border-radius: 8px;
}

.nav-icon-link {
    justify-content: center;
    padding: 0 4px;
}

.main-nav-links a.login-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    background: transparent;
    border: 0;
    color: white;
    font-size: 1.05rem;
    font-weight: 500;
}

.site-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.site-footer-nav,
.site-footer-legal,
.site-footer-business {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.site-footer-nav {
    gap: 10px 24px;
    margin-bottom: 18px;
}

.site-footer-legal {
    gap: 10px 20px;
    margin-bottom: 14px;
}

.site-footer-legal a {
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: 0;
    text-decoration: none;
}

.site-footer-business {
    gap: 4px 18px;
    color: var(--text-secondary);
    font-size: 0.78rem;
    line-height: 1.7;
}

.site-footer-business span:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    margin-left: 18px;
    background: var(--border-light);
}

.site-footer-copyright {
    margin: 14px 0 0;
    font-size: 0.76rem;
}

@media (max-width: 600px) {
    .site-footer-business {
        display: block;
        text-align: left;
    }

    .site-footer-business span {
        display: block;
    }

    .site-footer-business span::after {
        display: none !important;
    }
}

.main-nav-links a.login-link:hover {
    background: transparent;
    color: white;
    opacity: 0.8;
}

.main-nav-links a.premium-link {
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.main-nav-links a.premium-link:hover {
    background: transparent;
    opacity: 0.9;
    transform: none;
}

.main-nav-links a.premium-link .nav-svg {
    height: 34px;
    filter: brightness(1.18) saturate(1.12);
}

.mobile-premium-label {
    display: none;
}

nav.nav-light .main-nav-links a.login-link {
    color: var(--text-primary);
}

@media (max-width: 768px) {
    .main-nav-links.mobile-open {
        gap: 0;
        padding: 8px 16px 16px;
    }

    .main-nav-links.mobile-open > a,
    .main-nav-links.mobile-open .nav-cta-row > a,
    .main-nav-links.mobile-open .nav-cta-row > div {
        width: 100%;
        height: 48px;
        min-height: 48px;
        box-sizing: border-box;
        margin: 0 !important;
        padding: 8px 12px;
        border: 0;
        border-radius: 0;
        align-items: center;
        text-align: right !important;
        justify-content: flex-end !important;
    }

    .main-nav-links.mobile-open > a.nav-icon-link + a.nav-icon-link {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    nav.nav-light .main-nav-links.mobile-open > a.nav-icon-link:not(.premium-link) .nav-svg,
    nav.nav-light .main-nav-links.mobile-open .nav-user-badge .user-icon {
        filter: none;
    }

    .main-nav-links.mobile-open .nav-cta-row {
        gap: 0;
        margin-top: 0;
        padding-top: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-nav-links.mobile-open .nav-cta-row a.login-link {
        min-height: 48px;
        border: 0 !important;
        border-radius: 0;
        background: transparent;
        color: white !important;
        opacity: 1;
        font-size: 15px !important;
        font-weight: 500 !important;
        line-height: 1;
        letter-spacing: 0;
    }

    .main-nav-links.mobile-open a.premium-link .nav-svg {
        display: none;
    }

    .main-nav-links.mobile-open a.premium-link .mobile-premium-label {
        display: inline;
        color: var(--gold-premium);
        font-size: 15px;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0;
    }

    .main-nav-links.mobile-open #user-badge {
        min-height: 48px;
        border: 0 !important;
        border-radius: 0;
        background: transparent;
        gap: 8px;
    }

    .main-nav-links.mobile-open #user-badge .user-icon {
        height: 26px;
    }

    .main-nav-links.mobile-open #user-badge .user-avatar {
        width: 26px;
        height: 26px;
    }
}

/* ── #11: 마이페이지 보고서 행 모바일 스택 ── */
@media (max-width: 480px) {
    .mp-report-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 14px 0;
    }

    .mp-report-row .mp-report-icon {
        align-self: flex-start;
    }

    .mp-report-row .mp-btn {
        width: 100%;
        text-align: center;
    }

    .mp-payment-row {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .mp-payment-right {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .mp-refund-form {
        flex-basis: 100%;
        max-width: 100%;
        margin-left: 0;
    }

    .mp-refund-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .mp-refund-actions .mp-btn {
        flex: 1;
    }

    .mp-account-danger {
        align-items: stretch;
        flex-direction: column;
        gap: 18px;
        padding: 22px 20px;
    }

    .mp-withdrawal-button {
        width: 100%;
    }
}

/* ── #12: 툴팁 상단 오버플로우 보정 ── */
.term-tip.tip-bottom::after {
    bottom: auto;
    top: calc(100% + 10px);
    transform: translateX(-50%);
}

.term-tip.tip-bottom::before {
    bottom: auto;
    top: calc(100% + 4px);
    border-top-color: transparent;
    border-bottom-color: var(--bg-dark);
}

.term-tip.tip-bottom:hover::after,
.term-tip.tip-bottom.tip-open::after {
    transform: translateX(-50%) translateY(0);
}

/* ── #2: 히어로 CTA 버튼 영역 ── */
.hero-cta {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-top: 36px;
    flex-wrap: wrap;
}

.hero-cta .btn {
    min-width: 180px;
    padding: 17px 36px;
    font-size: 1.05rem;
}

.btn-ghost-white {
    background: transparent;
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    padding: 15px 28px;
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-ghost-white:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.7);
}

.hero-badges {
    display: flex;
    gap: 0;
    justify-content: center;
    align-items: center;
    margin-top: 32px;
}

.hero-badge {
    text-align: center;
    padding: 0 24px;
}

.hero-badge-num {
    display: block;
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--gold-premium);
    line-height: 1.2;
}

.hero-badge-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 4px;
}

.hero-badge-sep {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 480px) {
    .hero-cta {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .hero-cta .btn {
        width: 100%;
        max-width: 320px;
        min-width: auto;
    }

    .hero-badges {
        gap: 0;
    }

    .hero-badge {
        padding: 0 14px;
    }

    .hero-badge-num {
        font-size: 1.15rem;
    }

    .hero-badge-label {
        font-size: 0.7rem;
    }
}

/* ── #17: nav 인라인 스타일 클래스화 ── */
.nav-user-badge {
    display: none;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    margin-left: 28px;
}

.nav-user-badge .user-icon {
    height: 24px;
}

.nav-user-badge .user-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    display: none;
}

/* =========================================
           [5] 공통 리포트/상세 뷰 스타일
           ========================================= */
        #report-view, #self-report-view, #theory-detail-view { display: none; background: var(--bg-light); min-height: 100vh;}
        
        .report-header { padding: 160px 24px 100px; background: var(--bg-dark); color: white; text-align: center; position: relative; overflow: hidden; }
        .report-header::before { content: ''; position: absolute; inset: 0; background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iMSIgY3k9IjEiIHI9IjEiIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC4wNSkiLz48L3N2Zz4='); opacity: 0.5; }
        
        #report-view .report-header { background: linear-gradient(145deg, var(--bg-deep) 0%, var(--bg-dark) 100%); }
        #self-report-view .report-header { background: linear-gradient(145deg, #1e293b 0%, #0f172a 100%); }
        /* 이론 가이드 헤더 특별 컬러 */
        #theory-detail-view .report-header { background: linear-gradient(145deg, #2c3e50 0%, #1a202c 100%); }

        .score-badge { display: inline-block; background: var(--gold-premium); color: white; padding: 10px 25px; border-radius: 30px; font-size: 0.95rem; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 30px; box-shadow: var(--shadow-glow); }
        #self-report-view .score-badge { background: #334155; box-shadow: none; border: 1px solid #475569; }
        #theory-detail-view .score-badge { background: #475569; box-shadow: none; border: 1px solid #64748b; margin-bottom: 20px;}

        .report-header h1 { font-size: 4.5rem; margin: 0 0 15px; font-weight: 900; letter-spacing: -2px; position: relative; z-index: 1;}
        #theory-detail-view .report-header h1 { font-size: 3.5rem; }
        .report-header h1 span { font-weight: 300; font-size: 2rem; color: rgba(255,255,255,0.6); margin-left: 15px; }
        .meta-info { color: rgba(255,255,255,0.9); font-size: 1.15rem; margin-top: 25px; background: rgba(0,0,0,0.3); display: inline-block; padding: 12px 30px; border-radius: 50px; border: 1px solid rgba(255,255,255,0.1); backdrop-filter: blur(5px); position: relative; z-index: 1;}

        .report-main { max-width: 1000px; margin: -60px auto 100px; padding: 0 24px; position: relative; z-index: 10; }
        .report-card { background: white; border-radius: 32px; padding: 60px; border: 1px solid rgba(0,0,0,0.05); box-shadow: var(--shadow-premium); margin-bottom: 50px; position: relative; }
        
        .intro-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: center; }
        .highlight-quote { font-size: 1.7rem; font-weight: 900; color: var(--gold-dark); margin-bottom: 30px; line-height: 1.5; letter-spacing: -0.5px; }
        .intro-text p { font-size: 1.1rem; color: var(--text-primary); margin-bottom: 20px; line-height: 1.8; }
        
        /* 오행 밸런스 바 */
        .oheng-bars { margin-top: 30px; padding-top: 30px; border-top: 1px dashed var(--border-light); }
        .oheng-item { display: flex; align-items: center; margin-bottom: 15px; }
        .oheng-label { width: 55px; font-size: 1rem; font-weight: 800; color: var(--bg-dark); }
        .oheng-bar-bg { flex-grow: 1; height: 10px; background: var(--bg-light); border-radius: 10px; overflow: hidden; margin-right: 20px; border: 1px solid rgba(0,0,0,0.03); }
        .oheng-bar-fill { height: 100%; border-radius: 10px; }
        .oheng-count { width: 35px; text-align: right; font-size: 0.95rem; font-weight: 800; color: var(--text-secondary); }
        
        /* 사주 그리드 */
        .saju-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; align-items: start; }
        .saju-box { background: var(--bg-light); border-radius: 20px; text-align: center; border: 1px solid var(--border-light); transition: 0.3s; overflow: visible; display: flex; flex-direction: column; }
        .saju-box.point { border-color: var(--gold-premium); background: #fffcf5; box-shadow: 0 4px 20px rgba(212,175,55,0.12); }
        .saju-box-bar { height: 4px; width: 100%; background: var(--border-light); }
        .saju-box.point .saju-box-bar { background: var(--gold-premium); }
        .saju-box-inner { padding: 24px 18px 20px; flex: 1; }
        .saju-label { font-size: 0.78rem; color: var(--text-secondary); font-weight: 800; letter-spacing: 1.2px; margin-bottom: 12px; }
        .saju-box.point .saju-label { color: var(--gold-dark); }
        .saju-hanja { font-size: 2.8rem; font-weight: 900; color: var(--bg-dark); margin: 0 0 6px; line-height: 1; }
        .saju-kor { font-size: 0.88rem; font-weight: 700; color: var(--gold-dark); margin-bottom: 0; }
        .saju-oheng-pill { display: inline-block; border-radius: 20px; padding: 3px 12px; font-size: 0.72rem; font-weight: 700; color: white; margin: 10px 0 0; }
        .saju-story { font-size: 0.79rem; color: var(--text-primary); line-height: 1.8; text-align: left; margin-top: 14px; border-top: 1px solid var(--border-light); padding-top: 12px; }
        .saju-gungwi { font-size: 0.74rem; color: var(--text-secondary); margin-top: 10px; font-weight: 600; text-align: center; }
        .saju-desc { font-size: 0.95rem; color: var(--text-primary); line-height: 1.6; text-align: justify; word-break: keep-all; }

        /* 작명 시너지 / 의미 */
        .synergy-box { background: linear-gradient(to right, #f8fafc, #fffcf5); padding: 40px; border-radius: 24px; border-left: 6px solid var(--gold-premium); margin-bottom: 40px; }
        .synergy-box h3 { margin: 0 0 15px; font-size: 1.5rem; color: var(--bg-dark); font-weight: 900;}
        .synergy-box p { margin: 0; font-size: 1.1rem; color: var(--text-primary); line-height: 1.8; }

        .meaning-item { display: flex; gap: 35px; margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--border-light); }
        .meaning-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
        .hanja-circle { width: 100px; height: 100px; background: white; border: 4px solid var(--gold-premium); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.8rem; font-weight: 800; color: var(--bg-dark); flex-shrink: 0; box-shadow: var(--shadow-glow); text-shadow: 0 2px 4px rgba(0,0,0,0.3);}
        .meaning-text h4 { margin: 0 0 15px; font-size: 1.5rem; color: var(--bg-dark); font-weight: 900; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
        .meaning-text h4 span { font-size: 0.95rem; font-weight: 700; background: var(--bg-light); padding: 6px 16px; border-radius: 30px; color: var(--text-secondary); border: 1px solid var(--border-light); }
        .meaning-text p { margin: 0 0 15px; font-size: 1.1rem; color: var(--text-primary); line-height: 1.8; }
        .meaning-effect { font-size: 1rem; color: var(--gold-dark); font-weight: 800; background: #fffcf5; padding: 12px 20px; border-radius: 12px; display: inline-block; border: 1px solid var(--border-gold); }

        /* 81수리 분석 */
        .suri-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 25px; }
        .suri-card { background: white; border: 1px solid rgba(0,0,0,0.05); border-radius: 24px; padding: 35px; display: flex; gap: 25px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); }
        .suri-badge { background: var(--bg-dark); color: white; width: 70px; height: 70px; border-radius: 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 10px 20px rgba(15, 23, 42, 0.2); }
        .suri-badge .num { font-size: 1.6rem; font-weight: 900; line-height: 1; }
        .suri-badge .txt { font-size: 0.8rem; font-weight: 600; opacity: 0.8; margin-top: 5px; }
        .suri-info h5 { margin: 0 0 12px; font-size: 1.3rem; color: var(--bg-dark); font-weight: 800; display:flex; align-items:center;}
        .suri-info h5 b { color: var(--gold-dark); font-weight: 900; margin-left: 5px;}
        .suri-info p { margin: 0; font-size: 1.05rem; color: var(--text-secondary); line-height: 1.6; }

        /* 생애 주기 흐름 컨테이너 */
        .chart-container-large { background: var(--bg-white); padding: 40px 20px 20px; border-radius: 24px; border: 1px solid rgba(0,0,0,0.05); margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.02); height: 350px; }

        .timeline { border-left: 4px solid var(--bg-light); padding-left: 50px; margin-left: 20px; }
        .time-step { position: relative; margin-bottom: 60px; }
        .time-step:last-child { margin-bottom: 0; }
        .time-step::before { content: ''; position: absolute; left: -61px; top: 5px; width: 18px; height: 18px; background: white; border: 5px solid var(--gold-premium); border-radius: 50%; box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.1); }
        .time-step h4 { margin: 0 0 15px; color: var(--bg-dark); font-size: 1.4rem; font-weight: 900; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
        .time-step span { font-size: 0.9rem; background: var(--bg-dark); color: white; padding: 6px 16px; border-radius: 30px; font-weight: 700; }
        .time-step p { margin: 0; font-size: 1.1rem; color: var(--text-primary); line-height: 1.8; }

        .advice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 60px; }
        .advice-card { background: white; padding: 40px 30px; border-radius: 24px; border: 1px solid var(--border-light); box-shadow: 0 10px 30px rgba(0,0,0,0.02); text-align: center;}
        .advice-icon { font-size: 2.5rem; margin-bottom: 20px; }
        .advice-card h4 { margin: 0 0 20px; color: var(--bg-dark); font-size: 1.2rem; font-weight: 800; border-bottom: 2px solid var(--bg-light); padding-bottom: 15px; }
        .advice-card p { margin: 0; font-size: 1rem; color: var(--text-secondary); line-height: 1.7; }

        /* [NEW] 이론 가이드 상세 뷰 전용 스타일 */
        #theory-detail-view .report-card { padding: 50px 60px; }
        .theory-intro-box { background: var(--bg-white); border-left: 6px solid var(--gold-premium); padding: 30px 40px; border-radius: 0 20px 20px 0; margin-bottom: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.03);}
        .theory-intro-box p { margin: 0; font-size: 1.15rem; color: var(--bg-dark); font-weight: 600; line-height: 1.8; }
        .theory-tip-box { background: #fffcf5; padding: 25px 35px; border-radius: 20px; border: 1px dashed var(--gold-premium); margin-top: 25px; }
        .theory-tip-box h5 { margin: 0 0 10px; color: var(--gold-dark); font-size: 1.1rem; font-weight: 800; display: flex; align-items: center;}
        .theory-tip-box h5::before { content: '💡'; margin-right: 8px; }
        .theory-tip-box p { margin: 0; font-size: 1rem; color: var(--text-secondary); line-height: 1.7; }
        .theory-list { padding-left: 20px; margin-bottom: 0;}
        .theory-list li { margin-bottom: 15px; font-size: 1.1rem; color: var(--text-secondary); line-height: 1.8;}
        .theory-list li b { color: var(--bg-dark); font-weight: 800;}



@media (max-width: 480px) {
    .hero {
        overflow: hidden;
    }

    .hero .section-inner {
        max-width: 100%;
    }

    .hero h1 {
        max-width: 100%;
        line-height: 1.35;
        word-break: keep-all;
        overflow-wrap: normal;
        text-wrap: balance;
    }

    .hero-badges {
        width: 100%;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .hero-badge {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 8px;
    }

    .hero-badge-label {
        white-space: normal;
        word-break: keep-all;
    }
}

@media (max-width: 360px) {
    .hero h1 {
        font-size: 1.55rem;
    }

    .hero-badge-num {
        font-size: 1.05rem;
    }
}

.guest-login-divider { display:flex; align-items:center; gap:12px; margin:22px 0 16px; color:#94a3b8; font-size:.78rem; }
.guest-login-divider::before,.guest-login-divider::after { content:""; flex:1; height:1px; background:#e2e8f0; }
.guest-login-label { display:block; margin-bottom:7px; color:#475569; font-size:.82rem; font-weight:700; text-align:left; }
.guest-login-input { width:100%; min-height:46px; padding:0 14px; border:1px solid #cbd5e1; border-radius:6px; outline:none; font-size:.94rem; }
.guest-login-input:focus { border-color:#b68b1e; box-shadow:0 0 0 3px rgba(212,175,55,.13); }
.guest-login-btn { justify-content:center; margin-top:10px; border-color:#d2ab3d; color:#6f520e; background:#fff9e7; }
.guest-login-note { margin:9px 0 0; color:#7b8494; font-size:.75rem; line-height:1.5; }
.guest-recovery-button { margin-top:9px; padding:0; border:0; color:#64748b; background:none; font-size:.76rem; text-decoration:underline; }
.payment-method-group { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:20px 0 0; padding:0; border:0; }
.payment-method-group legend { width:100%; margin-bottom:9px; color:#475569; font-size:.82rem; font-weight:800; }
.payment-method-group label { position:relative; min-width:0; }
.payment-method-group input { position:absolute; opacity:0; pointer-events:none; }
.payment-method-group span { min-height:42px; display:grid; place-items:center; padding:7px 5px; border:1px solid #d8dee8; border-radius:6px; color:#596579; background:#fff; font-size:.8rem; font-weight:700; text-align:center; }
.payment-method-group input:checked + span { border-color:#c99a20; color:#76570d; background:#fff8df; box-shadow:inset 0 0 0 1px #c99a20; }
.mp-payment-right .mp-btn { margin-top:5px; white-space:nowrap; }
@media (max-width:480px) {
    .report-card,
    #theory-detail-view .report-card {
        padding: 22px 14px;
    }

    .payment-method-group { grid-template-columns:1fr; }
    .payment-method-group span { min-height:38px; }
}

/* Premium report printing uses the rendered report itself. Browser chrome,
   controls, comparison UI, and chat are excluded from the printed document. */
@page {
    size: A4 portrait;
    margin: 0;
}

@media print {
    html,
    body.dn-printing-premium-report {
        width: 210mm !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    body.dn-printing-premium-report > :not(#content-area) {
        display: none !important;
    }

    body.dn-printing-premium-report #content-area,
    body.dn-printing-premium-report #report-view {
        display: block !important;
        width: 210mm !important;
        max-width: none !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: #fff !important;
    }

    body.dn-printing-premium-report #content-area > :not(#report-view),
    body.dn-printing-premium-report .report-selector-area,
    body.dn-printing-premium-report #report-skeleton,
    body.dn-printing-premium-report #report-compare-section,
    body.dn-printing-premium-report #expert-toggle-bar,
    body.dn-printing-premium-report #report-chat-section,
    body.dn-printing-premium-report .report-output-actions,
    body.dn-printing-premium-report .report-more-actions,
    body.dn-printing-premium-report #chapter-float-nav,
    body.dn-printing-premium-report #theory-popover-overlay,
    body.dn-printing-premium-report #theory-popover,
    body.dn-printing-premium-report .theory-info-btn,
    body.dn-printing-premium-report .chapter-toggle-btn,
    body.dn-printing-premium-report .story-bridge-wrap {
        display: none !important;
    }

    body.dn-printing-premium-report .report-header {
        display: flex !important;
        min-height: 297mm !important;
        padding: 58mm 14mm 34mm !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: #fff !important;
        background: linear-gradient(145deg, var(--bg-deep) 0%, var(--bg-dark) 100%) !important;
        break-after: page;
        page-break-after: always;
    }

    body.dn-printing-premium-report .report-header h1 {
        font-size: 38pt !important;
    }

    body.dn-printing-premium-report .report-main {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 10mm !important;
        position: static !important;
        z-index: auto !important;
        background: var(--bg-light) !important;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
    }

    body.dn-printing-premium-report #report-section-story,
    body.dn-printing-premium-report #report-section-expert,
    body.dn-printing-premium-report #expert-master-body,
    body.dn-printing-premium-report .chapter-acc-body {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
    }

    body.dn-printing-premium-report .report-card {
        width: 100% !important;
        margin: 0 0 8mm !important;
        padding: 10mm !important;
        overflow: visible !important;
        border: 1px solid rgba(15, 23, 42, 0.09) !important;
        border-radius: 8mm !important;
        background: #fff !important;
        box-shadow: none !important;
        break-inside: auto;
        page-break-inside: auto;
    }

    body.dn-printing-premium-report #report-conclusion-card,
    body.dn-printing-premium-report #report-hanja-story-s1,
    body.dn-printing-premium-report #report-career-section,
    body.dn-printing-premium-report .chapter-theory-box,
    body.dn-printing-premium-report .saju-grid,
    body.dn-printing-premium-report .oheng-layout,
    body.dn-printing-premium-report .intro-grid,
    body.dn-printing-premium-report .ai-story-block,
    body.dn-printing-premium-report .hanja-s1-card,
    body.dn-printing-premium-report .ai-hanja-card,
    body.dn-printing-premium-report .suri-cards-wrap,
    body.dn-printing-premium-report .suri-sub-card,
    body.dn-printing-premium-report .suri-pattern-banner,
    body.dn-printing-premium-report .season-card,
    body.dn-printing-premium-report #ai-conclusion-grid,
    body.dn-printing-premium-report table,
    body.dn-printing-premium-report canvas,
    body.dn-printing-premium-report svg {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    body.dn-printing-premium-report #report-story-intro,
    body.dn-printing-premium-report #ch2,
    body.dn-printing-premium-report #ch3,
    body.dn-printing-premium-report #ch4,
    body.dn-printing-premium-report #ch5a,
    body.dn-printing-premium-report #ch5b,
    body.dn-printing-premium-report #ch5c,
    body.dn-printing-premium-report #report-closing-message {
        break-before: page;
        page-break-before: always;
    }

    body.dn-printing-premium-report #report-closing-message {
        display: block !important;
        min-height: 277mm;
        margin: 0 !important;
        padding: 60mm 14mm 30mm !important;
        border-radius: 0 !important;
    }

    body.dn-printing-premium-report .chapter-acc-header,
    body.dn-printing-premium-report .chapter-acc-title-row,
    body.dn-printing-premium-report .hanja-detail-card,
    body.dn-printing-premium-report .suri-card,
    body.dn-printing-premium-report tr {
        break-inside: avoid-page;
        page-break-inside: avoid;
    }

    body.dn-printing-premium-report thead {
        display: table-header-group;
    }
}

/* ============================================================
   디어네임 — 고해상도 노트북 (16:9 / 16:10, 배율 150%~200%)
   화면 하단 잘림 방지 & 모달 스크롤 최적화
   ============================================================ */

/* --- 1. 루트 & body: dvh 기반 최소 높이 --- */
html {
  min-height: 100dvh;
  height: auto;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100dvh;
  height: auto;
  overflow-x: hidden;
}

/* --- 2. 모달 콘텐츠: max-height + 스크롤 보장 --- */
.modal-overlay {
  align-items: center;
  justify-content: center;
  padding: 20px 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-content {
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}
.modal-content::-webkit-scrollbar {
  width: 6px;
}
.modal-content::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}
.modal-content::-webkit-scrollbar-track {
  background: transparent;
}

/* --- 3. 화면 높이가 낮은 환경 (≤800px) 패딩 최적화 --- */
@media (max-height: 800px) {
  .modal-content {
    max-height: 85dvh;
    padding: 28px 24px !important;
  }
}

/* --- 4. 가입/로그인 모달 동의 체크리스트 스타일 --- */
.consent-checklist-group {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 14px 0 20px;
  text-align: left;
  box-sizing: border-box;
}

.consent-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: #334155;
  cursor: pointer;
  padding: 6px 0;
  user-select: none;
}

.consent-check-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #d4a843;
  cursor: pointer;
  margin: 0;
  flex-shrink: 0;
}

.consent-all {
  font-size: 0.95rem;
  font-weight: 700;
  color: #0f172a;
  padding-bottom: 8px;
}

.consent-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0 8px;
}

.req-tag {
  color: #ef4444;
  font-weight: 700;
  font-size: 0.8rem;
  background: #fee2e2;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
}

.opt-tag {
  color: #2563eb;
  font-weight: 600;
  font-size: 0.8rem;
  background: #dbeafe;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 4px;
}

.consent-check-item a {
  color: #0f172a;
  text-decoration: underline;
  font-weight: 600;
}

.consent-check-item a:hover {
  color: #d4a843;
}

/* ─── Premium Report: Jaewoo-Kim Style Criteria & Hanja Story S1 ─── */
.score-criteria-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 4px 0 8px;
}
.score-criteria-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 8px 12px;
    border-radius: var(--radius-md, 12px);
    background: var(--bg-light, #f8fafc);
    border: 1.5px solid transparent;
    text-align: center;
    transition: transform 0.15s;
}
.score-criteria-item:hover { transform: translateY(-2px); }
.sci-dot {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem; color: white; font-weight: 800;
}
.sci-label {
    font-size: 0.75rem; font-weight: 700;
    color: var(--text-primary, #0f172a); line-height: 1.3;
}
.sci-sub {
    font-size: 0.64rem; font-weight: 500;
    color: var(--text-muted, #64748b); line-height: 1.3;
    margin-top: 1px;
}
.sci-grade-pill {
    font-size: 0.68rem; font-weight: 800;
    padding: 2px 9px; border-radius: var(--radius-lg, 16px);
}
@media (max-width: 768px) {
    .score-criteria-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .score-criteria-item { padding: 14px 10px 12px; gap: 6px; }
    .sci-dot { width: 36px; height: 36px; font-size: 0.95rem; }
    .sci-label { font-size: 0.85rem; word-break: keep-all; }
    .sci-sub { font-size: 0.72rem; word-break: keep-all; line-height: 1.4; }
    .sci-grade-pill { font-size: 0.7rem; padding: 2px 9px; }
}

/* ─── 한자이야기 Section 1 (hanja-s1) ─── */
.hanja-s1-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    margin-top: 12px;
}
.hanja-s1-card {
    text-align: center;
    padding: 24px 16px 20px;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--gold-light, #fde68a);
    background: linear-gradient(160deg, #fffbeb 0%, #ffffff 100%);
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.hanja-s1-char {
    font-size: 3.6rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 10px;
}
.hanja-s1-kr {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bg-dark, #0f172a);
    margin-bottom: 4px;
}
.hanja-s1-meaning {
    font-size: 0.82rem;
    color: var(--text-secondary, #475569);
    line-height: 1.5;
}
.hanja-s1-badge {
    display: inline-block;
    margin-top: 10px;
    padding: 3px 12px;
    border-radius: var(--radius-lg, 16px);
    font-size: 0.72rem;
    font-weight: 800;
}
.hanja-s1-story {
    margin-top: 20px;
    padding: 16px 20px;
    background: #fffbeb;
    border-left: 4px solid var(--gold-dark, #b45309);
    border-radius: 0 14px 14px 0;
    font-size: 0.92rem;
    line-height: 1.8;
    color: var(--text-primary, #0f172a);
}

/* ─── Expert Toggle & Master Body ─── */
#expert-toggle-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 60%, #0f2744 100%);
    border: 1.5px solid rgba(212, 175, 55, 0.4);
    border-radius: var(--radius-md, 12px);
    cursor: pointer;
    transition: all 0.22s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.14);
    position: relative;
    overflow: hidden;
}
#expert-toggle-bar:hover {
    border-color: var(--gold-premium, #d4af37);
    box-shadow: 0 12px 40px rgba(0,0,0,0.22), 0 0 0 1px rgba(212,175,55,0.3);
    transform: translateY(-1px);
}
.expert-toggle-eyebrow {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--gold-premium, #d4af37);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-bottom: 4px;
    opacity: 0.85;
}
.expert-toggle-title {
    font-size: 0.97rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 3px;
}
.expert-toggle-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.5;
}
#expert-master-body {
    display: block;
    margin-top: 16px;
}
#expert-master-body:not(.open) {
    display: none;
}

/* ════════════════════════════════════════════════════════════════
   Print & PDF Media Styles (A4 Clean Output)
   ════════════════════════════════════════════════════════════════ */
@media print {
    @page {
        size: A4 portrait;
        margin: 12mm 10mm 12mm 10mm;
    }

    *, *::before, *::after {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    html, body {
        background: #ffffff !important;
        color: #0f172a !important;
        font-size: 10pt !important;
        line-height: 1.6 !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    /* ── 불필요한 웹 내비게이션 및 인터랙티브 요소 완전 숨김 ── */
    nav,
    footer,
    .main-nav-links,
    .nav-hamburger,
    .report-back-link,
    .report-selector-area,
    #report-compare-section,
    #report-skeleton,
    #report-chat-container,
    #chat-input-area,
    #chapter-float-nav,
    #theory-popover,
    #theory-popover-overlay,
    #expert-toggle-bar,
    button,
    .btn-report-ghost,
    .btn-report-gold-sm,
    .chapter-accordion-btn,
    .theory-info-btn,
    .tip-target::after {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ── 프리미엄 보고서 본문 컨테이너 ── */
    #report-view {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .report-header {
        text-align: center !important;
        margin-bottom: 24px !important;
        padding-bottom: 16px !important;
        border-bottom: 2px solid #d4af37 !important;
        page-break-after: avoid !important;
        break-after: avoid !important;
    }

    .score-badge {
        display: inline-block !important;
        background: #fefce8 !important;
        color: #b45309 !important;
        border: 1px solid #fde68a !important;
        font-weight: 800 !important;
        padding: 4px 16px !important;
        border-radius: 20px !important;
        font-size: 9pt !important;
    }

    #premium-report-title {
        font-size: 26pt !important;
        color: #0f172a !important;
        margin: 8px 0 !important;
    }

    #premium-report-meta {
        font-size: 9pt !important;
        color: #64748b !important;
    }

    /* ── 아코디언 및 전문 분석 영역 모두 펼침 ── */
    .chapter-accordion-body,
    #expert-master-body {
        display: block !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        padding-top: 12px !important;
    }

    /* ── 보고서 카드 단위 페이지 분할 방지 ── */
    .report-card {
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 12px !important;
        padding: 20px !important;
        margin-bottom: 20px !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    .score-criteria-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }

    .score-criteria-item {
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        padding: 10px 6px !important;
    }

    .hanja-s1-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .hanja-s1-card {
        background: #fffbeb !important;
        border: 1px solid #fde68a !important;
        padding: 16px 12px !important;
    }

    /* ── 차트 캔버스 인쇄 최적화 ── */
    canvas {
        max-width: 100% !important;
        height: auto !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }
}

/* ============================================================
   [UI] 결제 완료 및 보고서 실시간 생성 프로그레스 오버레이
   ============================================================ */
.payment-progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
    background: rgba(15, 23, 42, 0.78);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.ppo-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 36px 30px;
    max-width: 460px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(212, 175, 55, 0.35);
    animation: ppoFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes ppoFadeIn {
    from { opacity: 0; transform: scale(0.94) translateY(12px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.ppo-badge {
    display: inline-block;
    background: #fffbeb;
    color: #b45309;
    font-size: 0.85rem;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 100px;
    border: 1px solid #fde68a;
    margin-bottom: 14px;
}

.ppo-title {
    font-size: 1.35rem;
    font-weight: 900;
    color: #0f172a;
    margin: 0 0 10px;
    line-height: 1.4;
    letter-spacing: -0.5px;
}

.ppo-sub {
    font-size: 0.9rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0 0 24px;
}

.ppo-sub b {
    color: #d97706;
}

.ppo-steps {
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    margin-bottom: 24px;
}

.ppo-step {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 14px;
    border: 1.5px solid #f1f5f9;
    background: #f8fafc;
    transition: all 0.3s ease;
}

.ppo-step.active {
    border-color: #d4a843;
    background: #fffdf5;
    box-shadow: 0 4px 14px rgba(212, 168, 67, 0.12);
}

.ppo-step.completed {
    border-color: #e2e8f0;
    background: #ffffff;
    opacity: 0.85;
}

.ppo-step.pending {
    opacity: 0.45;
}

.ppo-step-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #e2e8f0;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 800;
    flex-shrink: 0;
}

.ppo-step.active .ppo-step-icon {
    background: #d4a843;
    color: #ffffff;
    animation: ppoPulse 1.5s infinite;
}

.ppo-step.completed .ppo-step-icon {
    background: #22c55e;
    color: #ffffff;
}

@keyframes ppoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 0 12px rgba(212, 168, 67, 0.5); }
}

.ppo-step-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ppo-step-text strong {
    font-size: 0.92rem;
    color: #1e293b;
    font-weight: 800;
}

.ppo-step-text span {
    font-size: 0.78rem;
    color: #64748b;
}

.ppo-loading-bar {
    width: 100%;
    height: 6px;
    background: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}

.ppo-loading-bar-inner {
    height: 100%;
    width: 15%;
    background: linear-gradient(90deg, #d4a843, #f59e0b, #22c55e);
    border-radius: 10px;
    transition: width 0.45s ease-out;
}

/* ── 마이페이지 비회원(게스트) 안내 배너 ── */
.mp-guest-banner {
    background: #fffbeb;
    border: 1.5px solid #fde68a;
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    box-shadow: 0 4px 16px rgba(217, 119, 6, 0.08);
}

.mp-guest-banner-icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.mp-guest-banner-content {
    flex: 1;
}

.mp-guest-banner-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #92400e;
    margin-bottom: 4px;
}

.mp-guest-banner-desc {
    font-size: 0.88rem;
    color: #78350f;
    line-height: 1.6;
}

.mp-guest-banner-desc b {
    color: #b45309;
}

.mp-provider-guest {
    background: #fef3c7 !important;
    color: #92400e !important;
    border: 1px solid #fde68a !important;
}

/* ── 결제 진행 오버레이 에러 상태 및 액션 버튼 ── */
.ppo-step.error {
    background: #fef2f2;
    border-color: #fca5a5;
}

.ppo-step.error .ppo-step-icon {
    background: #fee2e2;
    color: #dc2626;
    border-color: #f87171;
    font-weight: 800;
}

.ppo-step.error .ppo-step-text strong {
    color: #991b1b;
}

.ppo-step.error .ppo-step-text span {
    color: #b91c1c;
    font-weight: 600;
}

.ppo-error-box {
    background: #fef2f2;
    border: 1.5px solid #fecaca;
    border-radius: 16px;
    padding: 18px 20px;
    text-align: center;
    animation: ppo-slide-up 0.3s ease-out;
}

@keyframes ppo-slide-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.ppo-btn-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.ppo-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 18px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.ppo-btn:active {
    transform: scale(0.98);
}

.ppo-btn-primary {
    background: linear-gradient(135deg, #1e3a8a, #2563eb);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
}

.ppo-btn-primary:hover {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
}

.ppo-btn-secondary {
    background: #ffffff;
    color: #334155;
    border: 1.5px solid #cbd5e1;
}

.ppo-btn-secondary:hover {
    background: #f8fafc;
    border-color: #94a3b8;
}

.ppo-btn-tertiary {
    background: transparent;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.ppo-btn-tertiary:hover {
    background: #f1f5f9;
    color: #334155;
}




/* ── [THEME] Light View Nav & Hamburger Contrast Fix ── */
nav[data-view="self-naming"] .nav-hamburger span,
nav[data-view="naming-theory"] .nav-hamburger span,
nav.nav-light .nav-hamburger span,
body.view-self-naming .nav-hamburger span,
body.view-naming-theory .nav-hamburger span {
    background-color: #1e293b !important;
    background: #1e293b !important;
}

nav[data-view="self-naming"] .report-back-link,
nav[data-view="naming-theory"] .report-back-link,
nav.nav-light .report-back-link,
body.view-self-naming .report-back-link,
body.view-naming-theory .report-back-link {
    color: #1e293b !important;
}

/* ── [THEME] Naming Theory View Navy Color Theme ── */
body.view-naming-theory #site-header,
nav[data-view="naming-theory"] {
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

body.view-naming-theory .nav-hamburger span,
nav[data-view="naming-theory"] .nav-hamburger span {
    background-color: #1e293b !important;
    background: #1e293b !important;
}

body.view-naming-theory .report-back-link,
nav[data-view="naming-theory"] .report-back-link,
body.view-naming-theory .nav-link,
nav[data-view="naming-theory"] .nav-link,
body.view-naming-theory .logo-text,
nav[data-view="naming-theory"] .logo-text {
    color: #1e293b !important;
}


/* ================================================================
   [DEARNAME UI ENHANCEMENT: FAQ, VIEWPORT SCALING, PAYMENT & SELF REPORT]
   ================================================================ */

/* ── [1] FAQ 아코디언 가독성 및 UI 복구 (항목 3) ── */
.faq-list {
    margin-top: 36px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
}
.faq-item {
    border: 1px solid var(--border-light, #e2e8f0);
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}
.faq-q {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 24px;
    text-align: left;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--bg-dark, #0f172a);
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
}
.faq-q:hover {
    background: var(--bg-light, #f8fafc);
}
.faq-q[aria-expanded="true"] {
    background: var(--bg-light, #f8fafc);
    color: var(--gold-dark, #92660f);
}
.faq-icon {
    font-size: 1.3rem;
    color: var(--gold-premium, #c59b27);
    transition: transform 0.3s;
    flex-shrink: 0;
    line-height: 1;
}
.faq-q[aria-expanded="true"] .faq-icon {
    transform: rotate(45deg);
}
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1), padding 0.35s;
    font-size: 0.95rem;
    color: var(--text-secondary, #475569);
    line-height: 1.8;
    padding: 0 24px;
    background: #ffffff;
}
.faq-a.open {
    max-height: 500px;
    padding: 6px 24px 22px;
}
.faq-a strong {
    color: var(--bg-dark, #0f172a);
}

/* ── [2] 화면 배율 및 뷰포트 적응형 레이아웃 최적화 (항목 1) ── */
section {
    padding: clamp(36px, 5vh, 64px) 20px !important;
}
.hero {
    padding-top: clamp(48px, 8vh, 80px) !important;
    padding-bottom: clamp(36px, 5vh, 60px) !important;
}
.hero h1 {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    line-height: 1.35 !important;
}
.hero-sub {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem) !important;
    margin-bottom: 24px !important;
}
.hero-cta {
    margin-bottom: 30px !important;
}
.section-title {
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    margin-bottom: 20px !important;
}
.form-card {
    padding: clamp(24px, 4vw, 44px) !important;
}
.why-grid {
    gap: 20px !important;
}
.theory-grid-uniform {
    gap: 16px !important;
}

/* ── [3] 성(한글/한자) 줄바꿈 방지 전용 서브 그리드 (항목 8) ── */
.form-row-duo {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    width: 100% !important;
    grid-column: span 2 !important;
}

/* ── [4] 프리미엄 의뢰 결제 모달 컴팩트화 (항목 9) ── */
.payment-content {
    max-width: 460px !important;
    padding: 24px 26px !important;
    border-radius: 16px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
}
.payment-content h3 {
    font-size: 1.35rem !important;
    margin-bottom: 4px !important;
}
.payment-content p {
    font-size: 0.85rem !important;
    margin-bottom: 16px !important;
}
.payment-options-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
}
.payment-option-content {
    padding: 8px 10px !important;
    border-radius: 8px !important;
}
.pay-label {
    font-size: 0.85rem !important;
}
.pay-price {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
}
.payment-method-group {
    padding: 10px 14px !important;
    margin-bottom: 12px !important;
    font-size: 0.82rem !important;
}
.price-tag {
    font-size: 1.7rem !important;
    margin: 12px 0 10px !important;
}
.payment-disclosure {
    font-size: 0.78rem !important;
    padding: 10px 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 12px !important;
}
.payment-consent {
    font-size: 0.8rem !important;
    margin-bottom: 16px !important;
}

/* ── [5] 셀프작명 상세 보고서 스타일 이식 (항목 11) ── */
#self-report-view {
    display: none;
    max-width: 860px;
    margin: 0 auto;
    padding: 40px 20px 80px;
    animation: fadeIn 0.3s ease;
}
.saju-mingsik-wrap {
    overflow-x: auto;
    margin: 16px 0 24px;
}
.saju-mingsik {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.saju-mingsik th, .saju-mingsik td {
    padding: 12px 8px;
    border: 1px solid #f1f5f9;
    font-size: 0.95rem;
}
.saju-mingsik th {
    background: #f8fafc;
    color: #475569;
    font-weight: 700;
}
.saju-mingsik td {
    font-size: 1.15rem;
    font-weight: 800;
    color: #0f172a;
}
.pillar-guide-strip {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
    font-size: 0.82rem;
    color: #64748b;
}
.pg-item {
    background: #f1f5f9;
    padding: 4px 10px;
    border-radius: 6px;
}
.pg-item.pg-me {
    background: #fef3c7;
    color: #92400e;
    font-weight: 700;
}
.suri-cards-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin: 16px 0;
}
.suri-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}
.suri-card-title {
    font-size: 0.85rem;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 4px;
}
.suri-card-score {
    font-size: 1.4rem;
    font-weight: 900;
    color: #0f172a;
    margin-bottom: 8px;
}
.story-bridge-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0;
    color: #94a3b8;
    font-size: 0.85rem;
}
.story-bridge-line {
    flex: 1;
    height: 1px;
    background: #e2e8f0;
}
.story-bridge-pill {
    padding: 6px 14px;
    background: #f8fafc;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 500;
}
.chapter-acc-header {
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}
.chapter-acc-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.chapter-toggle-btn {
    padding: 6px 12px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
}
.chapter-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.chapter-acc-body.open {
    max-height: 2000px;
    overflow: visible;
}

#analysis-result-area { display: none; }


/* ── 진단 결과 요약 및 뱃지 완벽 스타일 ── */
#analysis-result-area {
    margin-top: 36px;
    padding-top: 36px;
    border-top: 1.5px solid var(--border-light, #e2e8f0);
    animation: fadeIn 0.35s ease;
}

.result-summary-header {
    font-size: 1.5rem;
    color: var(--bg-dark, #0f172a);
    font-weight: 800;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.result-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.result-row {
    display: grid;
    gap: 16px;
}

.result-row-2 {
    grid-template-columns: repeat(2, 1fr);
}

.result-row-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .result-row-2, .result-row-4 {
        grid-template-columns: 1fr;
    }
}

.result-box {
    background: #ffffff;
    padding: 24px 20px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.result-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.result-header h4 {
    margin: 0;
    font-size: 1.1rem;
    color: #0f172a;
    font-weight: 800;
}

.grade-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.grade-badge.grade-best, .grade-badge.grade-매우좋음, .grade-badge.grade-대길 {
    background: #dcfce7 !important;
    color: #15803d !important;
    border: 1px solid #86efac !important;
}

.grade-badge.grade-good, .grade-badge.grade-좋음, .grade-badge.grade-길 {
    background: #dbeafe !important;
    color: #1d4ed8 !important;
    border: 1px solid #93c5fd !important;
}

.grade-badge.grade-normal, .grade-badge.grade-보통, .grade-badge.grade-평 {
    background: #fef3c7 !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
}

.grade-badge.grade-bad, .grade-badge.grade-나쁨, .grade-badge.grade-흉, .grade-badge.grade-매우나쁨, .grade-badge.grade-대흉 {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 1px solid #fca5a5 !important;
}