/* ── 공통 상단 헤더 ── */
        .global-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: var(--bg-card);
            border-bottom: 1px solid var(--b-default);
            padding-top: env(safe-area-inset-top, 0px);
        }
        .gh-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            max-width: 640px;
            margin: 0 auto;
            padding: 8px 16px;
        }
        .gh-logo {
            display: flex;
            align-items: center;
            gap: 8px;
            text-decoration: none;
            color: var(--t-strong);
        }
        .gh-logo img {
            width: 28px;
            height: 28px;
            border-radius: 6px;
        }
        .gh-logo span {
            font-size: 15px;
            font-weight: 700;
        }
        .gh-right {
            /* [#401] 거쳐가는 화면(monthly·manse·ridge·saju·compat-*)에서 좌측 4요소
               (ghLogo·ghBack·ghClose·ghNav) 모두 숨김 시 flex space-between 자식 1개로 좌측 정렬되던 결함 fix.
               margin-left: auto로 .gh-right 강제 우측 정렬. 다른 화면에서는 space-between과 함께 작동해 영향 없음. */
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: auto;
        }
        .gh-login-hint {
            font-size: var(--fs-small);
            color: var(--t-sub);
            white-space: nowrap;
        }
        body.result-active .gh-login-hint { color: var(--t-sub); }
        .gh-login-btn {
            padding: 6px 16px;
            border: 1.5px solid var(--c-primary);
            border-radius: 20px;
            background: transparent;
            color: var(--c-primary);
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.15s, color 0.15s;
            font-family: inherit;
        }
        .gh-login-btn:hover {
            background: var(--c-primary);
            color: var(--t-inverse);
        }
        @media (prefers-color-scheme: dark) {
            .gh-login-btn {
                border-color: var(--c-accent);
                color: var(--c-accent);
            }
            .gh-login-btn:hover {
                background: var(--c-accent);
                color: var(--c-primary);
            }
        }
        .gh-profile {
            position: relative;
        }
        .gh-avatar-btn {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            /* [#392] 운영자 명시 — 테두리 제거 (이전: 2px solid var(--c-primary) 노출됨) */
            border: 0;
            background: var(--c-primary);
            cursor: pointer;
            padding: 0;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .gh-avatar-btn img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .gh-avatar-fallback {
            color: #fff;
            font-size: 14px;
            font-weight: 700;
        }
        /* [#360] 프로필 드롭다운 — 시니어 UX 수치 정합 (16px+, 56px+, 7:1+) */
        .gh-dropdown {
            position: absolute;
            top: 48px;
            right: 0;
            min-width: 240px;
            background: var(--bg-card);
            border: 1px solid var(--b-default);
            border-radius: 12px;
            box-shadow: var(--shadow-2);
            padding: 8px 0;
            z-index: 1001;
            overflow: hidden;
        }
        .gh-dropdown-header {
            padding: 12px 16px 8px;
            display: flex;
            align-items: flex-start;
            gap: 8px;
        }
        .gh-dropdown-header-info {
            flex: 1;
            min-width: 0;
        }
        .gh-dropdown-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--t-strongest);
            line-height: 1.4;
        }
        .gh-dropdown-email {
            margin-top: 2px;
            font-size: 13px;
            color: var(--t-muted);
            word-break: break-all;
        }
        /* [#382] 헤더 우측 프로필 수정 버튼 — 시니어 UX 16px+ 터치 영역 */
        .gh-dropdown-edit-btn {
            flex-shrink: 0;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 8px 10px;
            min-height: 36px;
            background: var(--bg-card);
            border: 1px solid var(--b-default);
            border-radius: 8px;
            font-size: 14px;
            color: var(--t-strong);
            cursor: pointer;
            transition: background 0.15s ease;
        }
        .gh-dropdown-edit-btn:hover, .gh-dropdown-edit-btn:focus {
            background: rgba(0, 0, 0, 0.04);
        }
        @media (prefers-color-scheme: dark) {
            .gh-dropdown-edit-btn:hover, .gh-dropdown-edit-btn:focus {
                background: rgba(255, 255, 255, 0.08);
            }
        }
        .gh-dropdown-edit-icon { font-size: 14px; }
        .gh-dropdown-edit-label { font-weight: 600; }
        .gh-dropdown-divider {
            border: none;
            border-top: 1px solid var(--b-default);
            margin: 4px 0;
        }
        /* 메뉴 아이템 — 터치 56px / 폰트 16px / 시니어 친숙 */
        .gh-menu-item {
            display: flex;
            align-items: center;
            gap: 14px;
            width: 100%;
            min-height: 56px;
            padding: 14px 18px;
            border: none;
            background: transparent;
            text-align: left;
            font-size: 16px;
            font-weight: 500;
            color: var(--t-strong);
            cursor: pointer;
            font-family: inherit;
            text-decoration: none;
            box-sizing: border-box;
        }
        .gh-menu-item:hover,
        .gh-menu-item:focus-visible {
            background: var(--bg-card-alt);
            color: var(--t-strongest);
            outline: none;
        }
        .gh-menu-item:focus-visible {
            box-shadow: inset 0 0 0 2px var(--c-accent);
        }
        .gh-menu-icon {
            font-size: 22px;
            line-height: 1;
            flex-shrink: 0;
            width: 28px;
            text-align: center;
        }
        .gh-menu-label {
            flex: 1;
        }
        /* [#521] 토큰 통일 — 기존 #c53030/#f56565 하드코딩 → var(--c-danger) 디자인 시스템 정합 */
        .gh-menu-item-danger {
            color: var(--c-danger);
        }
        /* GNB: ← 뒤로가기 (#348 텍스트 병기 — 시니어 친화 R3 G16) */
        .gh-back {
            border: none;
            background: rgba(27, 42, 74, 0.06);
            color: var(--t-strong);
            font-size: 15px;
            font-weight: 600;
            min-width: 56px; height: 36px;
            padding: 0 12px;
            border-radius: 18px;
            cursor: pointer;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }
        .gh-back .gh-icon { font-size: 18px; }
        .gh-back .gh-btn-text { font-size: 14px; }
        .gh-back:active { background: rgba(27, 42, 74, 0.12); }
        /* GNB: ✕ 닫기 (flow 화면·입력 화면에서 홈/인트로 복귀) — #347·#348 텍스트 병기 */
        .gh-close {
            border: none;
            background: rgba(27, 42, 74, 0.06);
            color: var(--t-strong);
            font-size: 15px;
            font-weight: 600;
            min-width: 56px; height: 36px;
            padding: 0 12px;
            border-radius: 18px;
            cursor: pointer;
            flex-shrink: 0;
            display: none;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin-left: 6px;
        }
        .gh-close .gh-icon { font-size: 16px; }
        .gh-close .gh-btn-text { font-size: 14px; }
        .gh-close:active { background: rgba(27, 42, 74, 0.12); }
        /* 다크모드 — GNB 헤더가 어두워지므로 버튼도 밝은 톤 */
        @media (prefers-color-scheme: dark) {
            .gh-back, .gh-close {
                background: rgba(255,255,255,0.08);
                color: rgba(255,255,255,0.9);
            }
            .gh-back:active, .gh-close:active { background: rgba(255,255,255,0.15); }
        }
        /* 모바일 좁은 화면에서는 텍스트 부분 숨김 가능 — but 최소 화면 414px 기준 안전 */
        @media (max-width: 359px) {
            .gh-back .gh-btn-text, .gh-close .gh-btn-text { display: none; }
            .gh-back, .gh-close { min-width: 36px; padding: 0; }
        }
        /* GNB: 카드 바로가기 네비 */
        .gh-nav {
            display: flex;
            gap: 4px;
            flex: 1;
            justify-content: center;
        }
        .gh-nav button {
            border: none;
            background: rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.75);
            font-size: 13px;
            font-weight: 500;
            padding: 6px 14px;
            border-radius: 20px;
            cursor: pointer;
            font-family: inherit;
            white-space: nowrap;
        }
        .gh-nav button:active { background: rgba(255,255,255,0.18); }
        /* GNB: 공유 버튼 — [#369] 시니어 UX 개선 (이전 버튼과 동일 사이즈/형식) */
        /* [#518] 라이트 모드 비가시 fix — 기존 color:rgba(255,255,255,0.95) 흰색 텍스트가 라이트 GNB(흰색 배경) 위에서 비가시.
           자매 .gh-back 패턴 답습 — 라이트 골드 톤(가시성+공유 액션 시각 차별화) + @media (prefers-color-scheme: dark) 다크 분기.
           result-active(다크 GNB) 분기는 아래 별도 추가. #397·#423·#428c 거울 패턴 4번째 누적. */
        .gh-share-btn {
            border: none;
            background: rgba(255, 217, 147, 0.30);
            color: var(--c-accent);
            font-size: 15px;
            font-weight: 600;
            min-width: 56px; height: 36px;
            padding: 0 12px;
            border-radius: 18px;
            cursor: pointer;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            font-family: inherit;
        }
        .gh-share-btn .gh-icon { font-size: 16px; }
        .gh-share-btn .gh-btn-text { font-size: 14px; }
        .gh-share-btn:active { background: rgba(255, 217, 147, 0.45); }
        /* [#518] 다크 모드 — 골드 그라데이션 톤 유지 */
        @media (prefers-color-scheme: dark) {
            .gh-share-btn {
                background: rgba(255, 184, 140, 0.22);
                color: rgba(255, 255, 255, 0.95);
            }
            .gh-share-btn:active { background: rgba(255, 184, 140, 0.35); }
        }
        /* [#518] result-active 다크 GNB(var(--c-primary) 딥 네이비) 위에서도 골드 톤 시각 차별화 보장 */
        body.result-active .gh-share-btn {
            background: rgba(255, 217, 147, 0.22);
            color: var(--c-accent);
        }
        body.result-active .gh-share-btn:active { background: rgba(255, 217, 147, 0.35); }
        @media (max-width: 359px) {
            .gh-share-btn .gh-btn-text { display: none; }
            .gh-share-btn { min-width: 36px; padding: 0; }
        }
        /* 결과 화면: 헤더 다크 투명 */
        body.result-active .global-header {
            background: var(--c-primary);
            border-bottom-color: rgba(255,255,255,0.08);
        }
        body.result-active .gh-logo { color: rgba(255,255,255,0.95); }
        body.result-active .gh-login-btn { border-color: var(--c-accent); color: var(--c-accent); }
        body.result-active .gh-login-btn:hover { background: var(--c-accent); color: var(--c-primary); }
        body.result-active .gh-login-hint { display: none; }
        body.result-active .gh-right > .gh-login-btn { display: none; }
        /* [#380l] result-active 다크 GNB에서 우측 버튼 가시성 강화 */
        body.result-active .gh-share-btn {
            background: rgba(255,217,147,0.22);
            border: 1px solid rgba(255,217,147,0.50);
            color: var(--c-accent, #FFD993);
        }
        body.result-active .gh-share-btn:active { background: rgba(255,217,147,0.40); }
        /* [#428c] result-active 다크 GNB에서 ← 이전·✕ 닫기 버튼 가시성 강화 — #380l .gh-share-btn 패턴 정합 */
        /* 배경(rgba 27,42,74,0.06) + 진한 네이비 color(var(--t-strong))가 다크 GNB(#1B2A4A) 위에서 거의 비가시되던 결함. #397·#423 거울 패턴 */
        body.result-active .gh-back,
        body.result-active .gh-close {
            background: rgba(255,217,147,0.22);
            border: 1px solid rgba(255,217,147,0.50);
            color: var(--c-accent, #FFD993);
        }
        body.result-active .gh-back:active,
        body.result-active .gh-close:active { background: rgba(255,217,147,0.40); }
        /* [#393] 운영자 명시 — result-active 모드에서도 .gh-profile 테두리 제거 (이전: 2px solid rgba(255,217,147,0.40) 골드 노출) */
        body.result-active .gh-profile {
            border: 0;
            box-shadow: 0 0 0 1px rgba(0,0,0,0.20);
        }

        :root {
            /* ===== 디자인 시스템 v2 — 딥 네이비 ===== */
            --c-primary: #1B2A4A;
            --c-primary-light: #3B5998;
            --c-accent: #FFD993;
            --c-accent-warm: #FFB88C;
            --c-danger: #EF4444;
            --c-success: #16A34A;

            --bg-page: #F7F8FA;
            --bg-card: #FFFFFF;
            --bg-card-alt: #EDF1F7;
            --bg-section-1: #F0F4FA;
            --bg-section-2: #FFF8ED;
            --bg-section-3: #F0FAF5;
            --bg-overlay: rgba(0,0,0,0.5);

            --t-strongest: #0F1724;
            --t-strong: #1B2A4A;
            --t-body: #3D4F65;
            --t-sub: #6B7A8D;
            --t-muted: #A0AAB8;
            --t-inverse: #FFFFFF;

            --b-default: #E2E8F0;
            --b-input: #D4DCE8;
            --b-focus: #3B5998;

            --shadow-1: 0 1px 3px rgba(0,0,0,0.06);
            --shadow-2: 0 4px 12px rgba(0,0,0,0.08);
            --shadow-3: 0 8px 24px rgba(0,0,0,0.12);

            --fs-display: 36px;
            --fs-h1: 28px;
            --fs-h2: 22px;
            --fs-h3: 19px;
            --fs-body-l: 17px;
            --fs-body: 16px;
            --fs-caption: 14px;
            --fs-small: 12px;

            /* ===== 기존 변수 → 신규 매핑 ===== */
            --ridge: var(--c-primary-light);
            --horizon: var(--b-default);
            --text-main: var(--t-strong);
            --text-sub: var(--t-sub);
            --text-muted: var(--t-muted);
            --card-bg: var(--bg-card);
            --card-border: var(--b-default);
            --card-hover-bg: var(--bg-card);
            --card-hover-border: var(--c-primary-light);
            --danger: var(--c-danger);
            --golden: var(--c-accent);

            /* 로고 팔레트 (호환용) */
            --sunrise-peach: var(--c-accent-warm);
            --sunrise-gold: var(--c-accent);
            --sky-light: #A8D4F5;
            --sky-mid: var(--c-primary-light);
            --sky-deep: var(--c-primary);
            --snow: var(--bg-page);

            /* 배경 */
            --bg-gradient: var(--bg-page);
            --accent-light: rgba(27,42,74,0.06);

            /* 입력 카드 */
            --app-card-bg: var(--bg-card);
            --app-card-border: var(--b-default);
            --app-card-shadow: var(--shadow-1);
            --input-bg: var(--bg-card-alt);
            --input-border: var(--b-input);
            --input-placeholder: var(--t-muted);
            --input-focus-bg: var(--bg-card);
            --input-focus-ring: rgba(59,89,152,0.15);
            --toggle-bg: rgba(0,0,0,0.04);
            --toggle-border: var(--b-default);
            --toggle-selected-bg: var(--bg-card);
            --toggle-selected-shadow: var(--shadow-1);
            --btn-primary-shadow: rgba(27,42,74,0.2);
            --btn-disabled-bg: #D4DCE8;

            /* 확인 화면 칩 */
            --chip-bg: var(--bg-card-alt);
            --chip-border: var(--b-default);
            --pillar-bg: var(--bg-card);
            --pillar-border: var(--b-default);
            --pillar-shadow: var(--shadow-1);

            /* 내 기록 / 유명인 그룹 */
            --myrecords-bg: var(--bg-section-2);
            --myrecords-border: var(--b-default);
            --myrecords-select-border: var(--b-input);
            --myrecords-user-text: var(--t-sub);
            --myrecords-username: var(--t-body);
            --myrecords-separator: var(--b-default);
            --myrecords-logout: var(--c-primary-light);
            --myrecords-hint: var(--t-sub);
            --myrecords-login-bg: var(--bg-card-alt);
            --myrecords-login-border: var(--b-default);
            --myrecords-login-text: var(--t-strong);
            --celeb-bg: var(--bg-section-1);
            --celeb-border: var(--b-default);
            --celeb-select-border: var(--b-input);
            --input-header-bg: none;
            --segment-bg: #DDE6EF;
            --segment-border: #C5D0DD;
            --segment-tab-text: var(--t-sub);
            --segment-tab-active-bg: var(--bg-card);
            --segment-tab-active-text: var(--t-strong);
            --segment-tab-active-shadow: 0 2px 6px rgba(27,42,74,0.12), inset 0 0 0 1px rgba(27,42,74,0.10);
            --privacy-link-color: var(--t-muted);
            --select-option-bg: var(--bg-card);
            --select-option-text: var(--t-strong);

            /* 결과 화면 */
            --result-bg: var(--bg-page);
            --glass-bg: var(--bg-card);
            --glass-bg-fallback: var(--bg-card);
            --glass-border: var(--b-default);
            --glass-header-border: var(--b-default);
            --glass-title: var(--t-strong);
            --result-text: var(--t-body);
            --result-text-high: var(--t-strongest);
            --result-text-mid: var(--t-body);
            --result-text-sub: var(--t-sub);
            --result-text-muted: var(--t-muted);

            /* 네비바 */
            --nav-bg: var(--bg-card);
            --nav-border: var(--b-default);
            --nav-btn-bg: var(--bg-card-alt);
            --nav-btn-text: var(--t-body);
            --nav-btn-active: rgba(27,42,74,0.1);
            --nav-back-bg: var(--bg-card-alt);
            --nav-share-bg: rgba(255,184,140,0.2);
            --nav-share-active: rgba(255,184,140,0.35);
            --nav-share-text: #6b4a32;

            /* 차트 */
            --chart-bg: var(--bg-section-1);
            --legend-text: var(--t-sub);
            --zoom-bg: var(--bg-card);
            --zoom-text: var(--t-body);
            --zoom-slider-bg: rgba(27,42,74,0.15);
            --zoom-thumb-border: rgba(27,42,74,0.2);
            --zoom-thumb-shadow: 0 0 6px rgba(255,217,147,0.5);

            /* 조언/사주풀이 */
            --advice-divider: var(--b-default);
            --advice-label-color: var(--t-sub);
            --summary-text-color: var(--t-strong);
            --advice-text-color: var(--t-body);
            --reading-text-color: var(--t-body);
            --reading-h4-border: rgba(59,89,152,0.2);
            --reading-loading-color: var(--t-muted);

            /* 삶의 기록 */
            --record-hint-color: var(--t-muted);
            --record-label-color: var(--t-body);
            --record-input-bg: var(--bg-card-alt);
            --record-input-border: var(--b-input);
            --record-input-text: var(--t-strong);
            --record-placeholder-color: var(--t-muted);
            --record-focus-border: var(--b-focus);
            --record-focus-bg: var(--bg-card);
            --record-btn-bg: rgba(59,89,152,0.1);
            --record-btn-border: rgba(59,89,152,0.2);
            --record-btn-text: var(--t-body);
            --record-status-color: var(--c-primary-light);

            /* 궁합 */
            --compat-label-color: var(--t-sub);
            --compat-input-bg: var(--bg-card-alt);
            --compat-input-border: var(--b-input);
            --compat-input-text: var(--t-strong);
            --compat-placeholder: var(--t-muted);
            --compat-focus-bg: var(--bg-card);
            --compat-option-bg: var(--bg-card);
            --compat-option-text: var(--t-strong);
            --compat-history-bg: var(--bg-card);
            --compat-history-shadow: var(--shadow-2);
            --compat-history-hover: var(--bg-card-alt);
            --compat-history-divider: var(--b-default);
            --compat-btn-close-bg: var(--bg-card-alt);
            --compat-btn-close-border: var(--b-default);
            --compat-score-label-color: var(--t-sub);
            --compat-names-color: var(--t-body);
            --compat-partner-bg: var(--bg-card-alt);
            --compat-partner-text: var(--t-body);
            --compat-sync-text: var(--t-sub);
            --compat-sync-bg: var(--bg-card-alt);
            --compat-gender-border: var(--b-input);
            --compat-gender-bg: var(--bg-card-alt);
            --compat-gender-text: var(--t-muted);
            --compat-gender-checked: var(--t-strong);
            --compat-gender-selected: var(--bg-card);
            --compat-gender-selected-shadow: var(--shadow-1);
            --compat-autofill-bg: var(--bg-card-alt);
            --compat-autofill-text: var(--t-strong);

            /* 리셋 버튼 */
            --btn-reset-bg: var(--bg-card-alt);
            --btn-reset-border: var(--b-default);
            --btn-reset-text: var(--t-body);

            /* 로그인 모달 / 배너 — [#377] 라이트모드 정합 (운영자 명시) */
            --modal-bg: #FFFFFF;
            --modal-border: rgba(0,0,0,0.08);
            --modal-title-color: #1B2A4A;
            --modal-desc-color: rgba(27,42,74,0.7);
            --modal-skip-color: rgba(27,42,74,0.5);
            --banner-bg: #FFFFFF;
            --banner-border: rgba(0,0,0,0.08);
            --banner-close-color: rgba(27,42,74,0.5);
            --banner-text-color: #1B2A4A;

            /* 오행 */
            --el-wood: #16a34a; --bg-wood: #dcfce7;
            --el-fire: #dc2626; --bg-fire: #fee2e2;
            --el-earth: #b45309; --bg-earth: #fef3c7;
            --el-metal: #6b7280; --bg-metal: #f3f4f6;
            --el-water: #2563eb; --bg-water: #dbeafe;

            /* 범례 */
            --legend-ridge: #7CB8E4;
            --legend-horizon: rgba(0,0,0,0.3);
            --legend-partner: #FFB88C;

            /* 히스토리 삭제 */
            --del-border: rgba(255,100,100,0.25);
            --del-text: rgba(200,80,80,0.7);
            --del-hover-bg: rgba(255,80,80,0.15);
        }

        /* ===== 다크 모드 ===== */
        @media (prefers-color-scheme: dark) {
            :root {
                /* 디자인 시스템 v2 다크 오버라이드 */
                --c-primary-light: #5A7ABF;
                --c-danger: #F87171;
                --c-success: #4ADE80;

                --bg-page: #0F1724;
                --bg-card: #1A2335;
                --bg-card-alt: rgba(255,255,255,0.06);
                --bg-section-1: #111B2A;
                --bg-section-2: #1A1810;
                --bg-section-3: #0E1F17;
                --bg-overlay: rgba(0,0,0,0.7);

                --t-strongest: #FFFFFF;
                --t-strong: #E8EDF2;
                --t-body: #C8D0DC;
                --t-sub: #9AACBF;
                --t-muted: #7A8899;
                --t-inverse: #0F1724;

                --b-default: rgba(255,255,255,0.08);
                --b-input: rgba(255,255,255,0.12);
                --b-focus: #5A7ABF;

                --shadow-1: 0 1px 3px rgba(0,0,0,0.3);
                --shadow-2: 0 4px 12px rgba(0,0,0,0.4);
                --shadow-3: 0 8px 24px rgba(0,0,0,0.5);

                /* 기존 변수 다크 오버라이드 (신규 변수 참조) */
                --bg-gradient: var(--bg-page);
                --accent-light: rgba(90,122,191,0.15);
                --input-focus-ring: rgba(90,122,191,0.2);
                --toggle-selected-shadow: 0 1px 3px rgba(0,0,0,0.3);
                --btn-primary-shadow: rgba(90,122,191,0.4);
                --btn-disabled-bg: rgba(27,42,74,0.5);
                --pillar-shadow: var(--shadow-1);
                --select-option-bg: #1A2335;
                --select-option-text: #E8EDF2;

                /* 차트 다크 */
                --chart-bg: rgba(15,23,36,0.6);
                --zoom-bg: rgba(10,15,25,0.85);
                --zoom-text: rgba(255,255,255,0.5);
                --zoom-slider-bg: rgba(255,255,255,0.08);
                --zoom-thumb-border: rgba(255,255,255,0.25);
                --zoom-thumb-shadow: none;

                /* 조언/사주풀이 다크 */
                --reading-h4-border: rgba(90,122,191,0.15);

                /* 삶의 기록 다크 */
                --record-btn-bg: rgba(90,122,191,0.2);
                --record-btn-border: rgba(90,122,191,0.3);

                /* 궁합 다크 */
                --compat-option-bg: #1A2335;
                --compat-option-text: #E8EDF2;
                --compat-history-bg: #1A2335;
                --compat-autofill-bg: #1A2335;

                /* 세그먼트 탭 다크 — active 강조 + 컨테이너 톤 */
                /* [#457·#458·#461] active bg·text 다크 분기 누락 결함 fix → solid 골드 bg로 변경.
                   운영자 보고 "여전히 3개 다 선택" → 반투명 골드(0.30)도 비활성과 시각 구분 부족.
                   토스/iOS segment control 스타일: solid 골드 bg + 딥네이비 텍스트 → 비활성 투명·
                   회색과 명확 대비. 컨테이너 panel(다크) 위 골드 solid가 시각상 즉시 인식. */
                --segment-bg: rgba(255,255,255,0.06);
                --segment-border: rgba(255,255,255,0.12);
                --segment-tab-active-bg: var(--c-accent);
                --segment-tab-active-text: var(--c-primary);
                --segment-tab-active-shadow: 0 2px 8px rgba(255,217,147,0.35);

                /* 모달 다크 — [#D fix 2026-05-23] modal-bg 외 텍스트 토큰 4종도 다크 분기 누락 결함 fix */
                --modal-bg: rgba(10,15,24,0.95);
                --modal-border: rgba(255,255,255,0.10);
                --modal-title-color: #fff;
                --modal-desc-color: rgba(255,255,255,0.75);
                --modal-skip-color: rgba(255,255,255,0.6);
                --banner-bg: rgba(10,15,24,0.92);

                /* 기타 다크 */
                --btn-reset-text: #fff;
                --del-border: rgba(255,100,100,0.25);
                --del-text: rgba(255,150,150,0.7);
                --del-hover-bg: rgba(255,80,80,0.25);
                --legend-ridge: #7CB8E4;
                --legend-horizon: rgba(255,255,255,0.4);
                --legend-partner: #FFB88C;
                --el-wood: #4ade80; --bg-wood: rgba(22,163,74,0.15);
                --el-fire: #f87171; --bg-fire: rgba(220,38,38,0.15);
                --el-earth: #fbbf24; --bg-earth: rgba(180,83,9,0.15);
                --el-metal: #d1d5db; --bg-metal: rgba(107,114,128,0.15);
                --el-water: #60a5fa; --bg-water: rgba(37,99,235,0.15);
            }
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }

        html, body {
            overflow-x: hidden;
            overscroll-behavior: none;
        }

        body {
            background: var(--bg-page);
            font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            min-height: 100dvh;
            padding: 20px;
            color: var(--t-body);
            font-size: var(--fs-body);
            line-height: 1.7;
        }

        /* ===== 카드 컨테이너 ===== */
        .app-card {
            width: 100%;
            max-width: 480px;
            min-height: 70vh;
            min-height: 70dvh;
            margin-top: 50px;
            background: var(--bg-card);
            border: none;
            border-radius: 20px;
            padding: 40px 24px;
            box-shadow: var(--shadow-1);
        }
        /* 입력/마이/궁합입력/궁합사주원국/홈/오늘의운세 화면에서 스크롤 컨테이너 적용 */
        /* [#381b] home-active 추가 — 오늘의 운세 카드(#381) 도입으로 콘텐츠 viewport 초과 시 스크롤 필요 */
        /* [#382b] daily-active 추가 — #381 작업 시 max-height 누락(overflow만 있음). 4축 본문이 viewport 초과 시 스크롤 막힘 */
        /* [#389] home-active 제거 — 카드 안 스크롤이 아닌 페이지 body 자연 스크롤 (운영자 명시) */
        /* [#394] other-persons-active·tickets-active 추가 — 인물 목록·이용권 카드 길어지면 스크롤 필요 (운영자 보고) */
        body.input-active .app-card,
        body.my-active .app-card,
        body.compat-input-active .app-card,
        body.compat-manse-active .app-card,
        body.other-persons-active .app-card,
        body.tickets-active .app-card,
        body.daily-active .app-card,
        body.monthly-active .app-card,
        body.yearly-active .app-card,
        body.feedback-input-active .app-card,
        body.feedback-list-active .app-card,
        body.feedback-detail-active .app-card {
            /* [#396 이달의 운세] monthly-active 추가 — 5축 점검: ② CSS overflow selector */
            /* [#415 올해의 운세] yearly-active 추가 — 6축 점검: ② CSS overflow selector */
            /* [#484 피드백] feedback-{input|list|detail}-active 추가 — 5축 점검: ② CSS overflow selector */
            max-height: calc(100vh - 100px);
            max-height: calc(100dvh - 100px);
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }
        body.intro-active .app-card,
        body.onboarding-active .app-card { margin-top: 0; }

        .section { display: none; }
        .section.active { display: block; }
        body.result-mode { padding: 0; overflow-x: hidden; }
        /* [#369n 운영자 명시] result 모드에서 .app-card 자체 padding/min-height/배경 무력화 — 1cm 빈 블럭·세로 스크롤바 결함 fix */
        body.result-mode .app-card {
            padding: 0;
            margin-top: 0;
            min-height: 0;
            background: transparent;
            border: none;
            box-shadow: none;
            border-radius: 0;
        }
        /* [#369n] 능선 화면(차트 + 헤로 + fixed CTA만)에서는 페이지 스크롤 차단 — 모든 콘텐츠가 viewport 안에 표시되므로 스크롤 불필요 */
        /* [#369o] body 배경을 차트 색과 일체화 — chart-card-wide가 viewport 바닥까지 못 가는 케이스에서 회색 띠가 CTA 아래 노출되던 결함 시각 fix */
        body.flow-ridge,
        body.flow-compat-ridge {
            overflow: hidden;
            height: 100vh;
            height: 100dvh;
            background: var(--c-primary);
        }
        /* [#369p] .result-bg는 z-index:0으로 viewport 전체를 회색(--result-bg)으로 덮는 결과 화면 배경 레이어.
           능선 화면은 chart-card-wide(z-index:1)가 viewport 전체를 덮어야 하지만 약 30~50px 미달 발견 → 미달 영역에 result-bg 회색이 노출되던 진짜 원인.
           능선 화면은 차트 카드 자체가 배경 역할이라 result-bg 불필요 → 두 모드에서 숨김 */
        body.flow-ridge .result-bg,
        body.flow-compat-ridge .result-bg {
            display: none;
        }

        /* ===== 공통 요소 ===== */
        h1 { font-size: var(--fs-h1); font-weight: 700; letter-spacing: 2px; color: var(--t-strong); text-align: center; }
        h2 { font-size: var(--fs-h2); font-weight: 700; color: var(--t-strong); margin-bottom: 16px; }

        .btn {
            display: block; width: 100%; padding: 16px;
            border: none; border-radius: 26px; cursor: pointer;
            font-family: inherit; font-size: var(--fs-body-l); font-weight: 700;
            transition: all 0.2s;
            text-decoration: none; text-align: center; box-sizing: border-box;
            min-height: 52px;
        }
        .btn-primary {
            background: var(--c-primary);
            color: var(--t-inverse);
            box-shadow: 0 4px 12px var(--btn-primary-shadow);
        }
        .btn-primary:hover {
            filter: brightness(1.1);
            box-shadow: 0 6px 16px rgba(27,42,74,0.3);
            transform: translateY(-1px);
        }
        .btn-primary:active { filter: brightness(0.95); transform: scale(0.98); }
        .btn-primary:disabled { background: var(--btn-disabled-bg); color: var(--t-muted); cursor: not-allowed; transform: none; box-shadow: none; filter: none; }
        @media (prefers-color-scheme: dark) {
            .btn-primary {
                background: var(--c-accent);
                color: var(--c-primary);
            }
            .btn-primary:disabled { background: rgba(255,217,147,0.2); color: var(--t-muted); }
        }
        .btn-ghost {
            background: none; color: var(--t-sub); font-weight: 400;
            padding: 12px; margin-top: 12px; min-height: 44px;
        }
        .btn-ghost:hover { color: var(--t-strong); }

        /* ===== 인트로 배경 이미지 (블러 없음, 인트로에서만 표시) ===== */
        /* [#428g] iOS PWA viewport-fit=cover 환경에서 fixed bottom: -50px이 safe-area-inset-bottom 영역(홈 인디케이터 ~100px)을 못 덮어 viewport 하단에 body background(흰 톤) 띠 노출되던 결함 fix.
           inset: 0으로 viewport 풀 + min-height: 100vh/100dvh + bottom에 env 가산해 safe-area 포함 풀 viewport 보장 */
        #intro-bg {
            position: fixed;
            top: 0; left: 0; right: 0;
            bottom: 0;
            min-height: 100vh;
            min-height: 100dvh;
            background-size: cover;
            background-position: center;
            z-index: -1;
            transition: opacity 0.4s;
            /* [#450] will-change: transform 제거 — iOS PWA에서 GPU 합성 레이어 분리로
               viewport rubber-band 효과 시 fixed 배경이 끌려 위로 밀려 보이던 결함 트리거. */
        }
        body.result-active #intro-bg { display: none; }
        @media (prefers-color-scheme: dark) {
            #intro-bg {
                filter: brightness(0.45) saturate(0.7);
            }
            #intro-bg::after {
                content: '';
                position: absolute;
                inset: 0;
                background: linear-gradient(180deg, rgba(15,23,36,0.5) 0%, rgba(27,42,74,0.4) 50%, rgba(15,23,36,0.6) 100%);
                pointer-events: none;
            }
        }

        /* ===== 인트로 화면 ===== */
        #section-intro {
            text-align: center;
        }
        /* [#437] 인트로 화면 viewport 고정 — 모바일에서 손으로 당겨 본문이 끌리는 결함 fix.
           body.flow-ridge 패턴과 동일하게 페이지 스크롤 자체를 차단. fixed 자식 요소(.intro-extras .biz-info 등)는 영향 없음.
           [#438] body 배경을 딥 네이비로 강제 — #intro-bg(z-index:-1)가 safe-area·padding 영역 등을 미커버 시
           라이트 톤 var(--bg-page) #F7F8FA가 상단·좌측 흰 띠로 노출되던 결함 방어. 이미지 색조와 일관 유지. */
        body.intro-active {
            overflow: hidden;
            height: 100vh;
            height: 100dvh;
            background: var(--c-primary);
            /* [#450] iOS PWA viewport overscroll(rubber-band) 차단 — 손가락으로 화면 당길 때
               배경 이미지·콘텐츠 끌림 결함 fix. overscroll-behavior: none만으론 iOS rubber-band
               불완전 차단, touch-action: none이 페이지 자체 스크롤·드래그 제스처 차단(클릭은 영향 없음). */
            touch-action: none;
        }
        /* 인트로: 카드 배경 제거 → 텍스트만 배경 위에 표시 */
        body.intro-active .app-card {
            background: none; border: none; box-shadow: none;
            backdrop-filter: none; -webkit-backdrop-filter: none;
        }
        #section-intro {
            background: radial-gradient(ellipse at center, rgba(0,0,0,0.15) 0%, transparent 50%);
            border-radius: 32px; padding: 48px 24px;
        }
        #section-intro.active {
            display: flex; flex-direction: column; align-items: center; justify-content: space-between;
            min-height: 70vh;
        }
        #section-intro .intro-text-group {
            margin-top: 8vh;
        }
        #section-intro h1 {
            font-size: 56px; margin-bottom: 16px; font-weight: 900;
            -webkit-text-fill-color: transparent;
            background: linear-gradient(180deg, #FFFFFF 0%, #FFD993 50%, #FFB88C 100%);
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow: none;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)) drop-shadow(0 0 20px rgba(255,217,147,0.3));
            letter-spacing: 10px;
        }
        #section-intro .btn {
            max-width: 320px; width: 80%; font-size: 17px; padding: 16px;
            margin-bottom: 4vh;
        }
        #section-intro .btn-primary {
            background: var(--c-accent);
            color: var(--c-primary);
            box-shadow: 0 4px 16px rgba(0,0,0,0.3);
        }
        #section-intro .btn-primary:hover {
            filter: brightness(1.05);
            box-shadow: 0 6px 20px rgba(0,0,0,0.4);
        }
        .tagline { font-size: 16px; color: #fff; line-height: 1.7; margin-bottom: 0; word-break: keep-all; font-weight: 400; text-shadow: 0 1px 6px rgba(0,0,0,0.5); letter-spacing: 2px; }
        .tagline em { font-style: normal; color: var(--sky-deep); }
        /* 인트로 카드 바깥 요소 (fixed 배치) */
        .intro-extras { display: none; }
        body.intro-active .intro-extras { display: block; }
        .intro-extras .onboarding-reopen {
            position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
            padding: 7px 18px;
            background: rgba(255,255,255,0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(255,255,255,0.4); border-radius: 20px;
            font-family: inherit; font-size: 12px; color: rgba(60,50,40,0.7); cursor: pointer;
            transition: all 0.2s; z-index: 10;
        }
        .intro-extras .onboarding-reopen:hover { background: rgba(255,255,255,0.55); }
        .intro-extras .privacy-link { display: none; }
        .intro-extras .biz-info {
            position: fixed; bottom: 8px; left: 0; right: 0;
            text-align: center; font-size: 10px; line-height: 1.5;
            color: rgba(60,50,40,0.45); z-index: 10;
            text-shadow: 0 1px 3px rgba(255,255,255,0.7);
            padding: 0 20px;
        }
        .intro-extras .biz-info .biz-privacy-link {
            color: rgba(60,50,40,0.45); text-decoration: underline;
        }

        /* 온보딩 모드: body 배경 숨기기 */
        body.onboarding-active { background: #f5f5f5 !important; }
        body.onboarding-active .app-card { background: #f5f5f5; box-shadow: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
        body.onboarding-active #intro-bg { display: none; }
        @media (prefers-color-scheme: dark) {
            body.onboarding-active { background: #1a1e2e !important; }
            body.onboarding-active .app-card { background: #1a1e2e; }
            .intro-extras .onboarding-reopen {
                background: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.2);
                color: rgba(255,255,255,0.85);
            }
            .intro-extras .onboarding-reopen:hover { background: rgba(0,0,0,0.55); color: #fff; }
            .intro-extras .biz-info {
                color: rgba(255,255,255,0.55); text-shadow: 0 1px 4px rgba(0,0,0,0.8);
            }
            .intro-extras .biz-info .biz-privacy-link {
                color: rgba(255,255,255,0.55);
            }
        }

        /* ===== 온보딩 화면 ===== */
        #section-onboarding { padding: 0; }
        .onboarding-container {
            position: relative;
            width: 100%; height: 100%;
            display: flex; flex-direction: column;
            min-height: 520px;
        }
        .onboarding-slides {
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            -webkit-overflow-scrolling: touch;
            overscroll-behavior-x: contain;
            scrollbar-width: none;
            width: 100%;
            flex: 1;
        }
        .onboarding-slides::-webkit-scrollbar { display: none; }
        .onboarding-slide {
            flex: 0 0 100%;
            scroll-snap-align: center;
            display: flex; flex-direction: column;
            align-items: center;
            text-align: center;
            padding: 0 24px;
            box-sizing: border-box;
        }
        /* 비주얼 영역 — 슬라이드 상단 60% */
        .onboarding-visual {
            flex: 1;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            width: 100%;
            min-height: 240px;
            padding: 32px 0 16px;
        }
        .onboarding-illust {
            font-size: 120px;
            line-height: 1;
            margin-bottom: 12px;
            animation: obFloatIn 0.6s ease-out;
        }
        .onboarding-illust-sub {
            font-size: 48px;
            opacity: 0.7;
            animation: obFloatIn 0.6s ease-out 0.15s both;
        }
        /* 슬라이드 1: 산 뒤 일출 애니메이션 */
        .onboarding-sunrise-scene {
            position: relative;
            display: inline-block;
            margin-bottom: 12px;
        }
        .onboarding-mountain {
            position: relative;
            z-index: 2;
            font-size: 120px;
            line-height: 1;
            animation: obFloatIn 0.6s ease-out;
        }
        .onboarding-sun {
            position: absolute;
            z-index: 1;
            font-size: 56px;
            left: 50%;
            top: 0;
            transform: translate(-50%, 60px) scale(0.4);
            opacity: 0;
            animation: obSunrise 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) 0.6s forwards, obSunFloat 2.5s ease-in-out 2.2s infinite;
        }
        @keyframes obSunrise {
            0% { transform: translate(-50%, 60px) scale(0.4); opacity: 0; }
            15% { opacity: 0.7; transform: translate(-50%, 35px) scale(0.6); }
            35% { opacity: 1; transform: translate(-50%, 10px) scale(0.8); }
            60% { transform: translate(-50%, -28px) scale(1.08); }
            75% { transform: translate(-50%, -18px) scale(0.97); }
            88% { transform: translate(-50%, -24px) scale(1.02); }
            100% { transform: translate(-50%, -22px) scale(1); opacity: 1; }
        }
        @keyframes obSunFloat {
            0%, 100% { transform: translate(-50%, -22px) scale(1); }
            50% { transform: translate(-50%, -30px) scale(1); }
        }
        @keyframes obFloatIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        /* 날씨 페어 (슬라이드 2) */
        .onboarding-weather-pair {
            display: flex; align-items: center; gap: 32px;
        }
        .onboarding-wx {
            display: flex; flex-direction: column; align-items: center; gap: 8px;
        }
        .onboarding-wx-icon { font-size: 80px; line-height: 1; animation: obWxFloat 2.4s ease-in-out infinite; }
        .onboarding-wx:last-child .onboarding-wx-icon { animation-delay: 0.6s; }
        @keyframes obWxFloat {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        .onboarding-wx-label {
            font-size: 15px; font-weight: 600; color: var(--text-main);
        }
        .onboarding-wx-divider {
            width: 1px; height: 60px;
            background: var(--input-border);
        }
        /* 슬라이드 3: 꺾은선 그래프 + 핀 박히기 */
        .onboarding-graph-scene {
            position: relative;
            width: 220px; height: 160px;
            display: flex; align-items: flex-end; justify-content: center;
            margin-bottom: 12px;
            overflow: visible;
        }
        .onboarding-mini-graph {
            width: 200px; height: 80px;
            opacity: 0; transform: translateY(10px);
        }
        .onboarding-mini-graph.animate {
            animation: obGraphDraw 0.8s ease-out 0.2s both;
        }
        .ob-graph-line {
            stroke-dasharray: 400;
            stroke-dashoffset: 400;
        }
        .ob-graph-line.animate {
            animation: obLineDraw 1s ease-out 0.3s forwards;
        }
        @keyframes obLineDraw {
            to { stroke-dashoffset: 0; }
        }
        @keyframes obGraphDraw {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .onboarding-pin {
            position: absolute;
            font-size: 48px;
            left: 50%; bottom: 52px;
            transform: translate(-50%, -120px) scale(1.2);
            opacity: 0;
            z-index: 2;
        }
        .onboarding-pin.animate {
            animation: obPinDrop 0.4s cubic-bezier(0.5, 0, 0.9, 0.3) 0.5s forwards,
                       obPinBounce 0.35s cubic-bezier(0.2, 1.6, 0.4, 1) 0.9s forwards;
        }
        @keyframes obPinDrop {
            0% { transform: translate(-50%, -120px) scale(1.2); opacity: 0; }
            40% { opacity: 1; }
            100% { transform: translate(-50%, 0px) scale(1); opacity: 1; }
        }
        @keyframes obPinBounce {
            0% { transform: translate(-50%, 0px) scale(1); }
            50% { transform: translate(-50%, -8px) scale(1.08); }
            100% { transform: translate(-50%, 0px) scale(1); }
        }
        /* 텍스트 영역 — 슬라이드 하단 */
        .onboarding-body {
            padding: 0 8px 24px;
            word-break: keep-all;
        }
        .onboarding-title {
            font-size: 20px; font-weight: 700; color: var(--text-main);
            line-height: 1.6; margin-bottom: 12px;
        }
        .onboarding-desc {
            font-size: 15px; color: var(--text-sub); line-height: 1.7;
        }
        /* 도트 인디케이터 (슬라이드 바로 아래) */
        .onboarding-dots {
            display: flex; gap: 8px; align-items: center; justify-content: center;
            padding: 16px 0;
        }
        /* 하단 버튼 바 (화면 맨 아래) */
        .onboarding-nav {
            display: flex; align-items: center; justify-content: space-between;
            padding: 16px 20px 32px;
            width: 100%; box-sizing: border-box;
            margin-top: 48px;
        }
        .onboarding-skip {
            background: none; border: none; font-family: inherit;
            font-size: 15px; color: var(--text-muted); cursor: pointer;
            padding: 8px 4px;
            min-width: 72px; text-align: left;
        }
        .onboarding-skip:hover { color: var(--text-sub); }
        .onboarding-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--input-border); cursor: pointer;
            transition: all 0.3s;
        }
        .onboarding-dot.active {
            background: var(--sky-deep); width: 24px; border-radius: 4px;
        }
        .onboarding-arrows {
            display: flex; gap: 8px; min-width: 72px; justify-content: flex-end;
        }
        .onboarding-arrow-btn {
            width: 44px; height: 44px; border-radius: 50%;
            border: none; cursor: pointer; font-size: 18px;
            display: flex; align-items: center; justify-content: center;
            background: var(--input-border); color: var(--text-sub);
            transition: all 0.2s; font-family: inherit;
        }
        .onboarding-arrow-btn:hover { background: var(--text-muted); color: #fff; }
        .onboarding-arrow-btn.primary {
            background: var(--sky-deep); color: #fff;
        }
        .onboarding-arrow-btn.primary:hover { background: #4a8bc4; }
        .onboarding-arrow-btn:disabled {
            opacity: 0.3; cursor: default; pointer-events: none;
        }
        /* 마지막 슬라이드: "시작 →" 텍스트 버튼 */
        .onboarding-arrow-btn.start-btn {
            width: auto; border-radius: 22px; padding: 0 20px;
            font-size: 15px; font-weight: 600; gap: 4px;
        }

        /* ===== 입력 화면 ===== */
        .field-group { margin-bottom: 16px; }
        .field-label { font-size: var(--fs-caption); font-weight: 600; color: var(--c-primary-light); margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
        .field-input {
            width: 100%; padding: 14px 16px;
            border: 1px solid var(--b-input); border-radius: 12px;
            font-family: inherit; font-size: var(--fs-body-l); color: var(--t-strong);
            transition: all 0.2s; outline: none; background: var(--bg-card-alt);
            min-height: 52px;
        }
        .field-input::placeholder { color: var(--input-placeholder); }
        .field-input:-webkit-autofill,
        .field-input:-webkit-autofill:hover,
        .field-input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
            -webkit-text-fill-color: var(--text-main);
            transition: background-color 5000s ease-in-out 0s;
        }
        select.field-input {
            appearance: none; -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' 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;
            padding-right: 36px;
            cursor: pointer;
        }
        select.field-input:invalid,
        select.field-input.select-placeholder { color: var(--input-placeholder); }
        select.field-input option { color: var(--text-main); }
        select.field-input option:disabled { color: var(--input-placeholder); }
        select.field-input option, select.field-input optgroup { background: var(--select-option-bg); color: var(--select-option-text); }
        .field-input:focus {
            border-color: var(--b-focus);
            box-shadow: 0 0 0 3px var(--input-focus-ring);
            background: var(--bg-card);
        }
        .field-hint { font-size: var(--fs-small); color: var(--t-muted); margin-top: 4px; }
        .field-optional { font-size: var(--fs-small); font-weight: 400; color: var(--t-muted); }
        .events-textarea { min-height: 72px; resize: vertical; line-height: 1.8; }

        /* 이름+성별 한 줄 */
        .name-gender-row {
            display: flex; gap: 10px; align-items: flex-end;
        }
        .name-gender-row .name-field { flex: 1; min-width: 0; }
        .name-gender-row .gender-field { flex-shrink: 0; width: 110px; }

        /* 성별 토글 (pill switch) */
        .gender-toggle {
            display: flex; border: 1.5px solid var(--toggle-border); border-radius: 12px;
            background: var(--toggle-bg); padding: 3px;
        }
        .gender-toggle label {
            flex: 1; text-align: center; padding: 11px 0; cursor: pointer;
            font-size: 16px; color: var(--text-muted); transition: all 0.2s;
            border-radius: 9px;
        }
        .gender-toggle input { display: none; }
        .gender-toggle input:checked + span {
            color: var(--text-main); font-weight: 700;
        }
        .gender-toggle label.selected {
            background: var(--toggle-selected-bg);
            box-shadow: var(--toggle-selected-shadow);
        }

        /* 생년월일시 한 줄 배치 */
        .birth-row {
            display: flex; gap: 8px; align-items: center;
        }
        .birth-row .field-input { text-align: center; width: auto; }
        .birth-row select.field-input { padding: 14px 16px; padding-right: 36px; width: auto; min-width: 90px; flex-shrink: 0; }
        .birth-row .date-input { flex: 1; min-width: 0; }
        .birth-row .time-input { width: 80px; flex-shrink: 0; }

        /* 체크박스 */
        .checkbox-group {
            display: flex; align-items: center; gap: 8px; margin-top: 8px;
        }
        .checkbox-group input[type="checkbox"] {
            width: 18px; height: 18px; accent-color: var(--ridge);
        }
        .checkbox-group label {
            font-size: 14px; color: var(--text-sub); cursor: pointer;
        }

        .error-msg { color: var(--danger); font-size: 14px; margin-bottom: 12px; display: none; text-align: center; }

        /* ===== 로딩 화면 ===== */
        #section-loading { text-align: center; padding: 60px 0; }
        .loading-saju-summary { margin-bottom: 28px; }
        .loading-saju-name { font-size: 18px; font-weight: 600; color: var(--text-main); margin-bottom: 12px; }
        .loading-saju-pillars { display: flex; justify-content: center; gap: 16px; font-size: 22px; font-weight: 500; color: var(--text-sub); letter-spacing: 2px; }
        .loading-saju-pillars span { opacity: 0.7; }
        .loading-saju-day { opacity: 1 !important; color: var(--ridge); font-weight: 700; }
        .loader-ring {
            width: 56px; height: 56px; border: 3px solid var(--accent-light);
            border-top-color: var(--ridge); border-radius: 50%;
            animation: spin 1s linear infinite; margin: 0 auto 24px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
        .loading-text { font-size: 17px; color: var(--text-sub); }
        .loading-step { font-size: 14px; color: var(--text-muted); margin-top: 8px; }

        /* ===== 결과 화면 — 날씨앱 스타일 ===== */

        /* 결과 화면 활성 시 app-card를 전체 화면으로 확장 */
        body.result-active { padding: 0; align-items: stretch; background: var(--bg-page); }
        body.result-active .app-card {
            max-width: 100%; border-radius: 0; padding: 0;
            box-shadow: none; background: transparent;
            border: none;
        }

        /* 전체 화면 배경 레이어 */
        .result-bg {
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            z-index: 0; opacity: 0;
            background: var(--result-bg);
            transition: opacity 1.2s ease-in-out;
            pointer-events: none;
        }
        body.result-active .result-bg { opacity: 1; }

        /* 결과 콘텐츠 영역 */
        .result-content {
            position: relative;
            max-width: 500px; margin: 0 auto;
            padding: 0 20px 40px; min-height: 100vh; min-height: 100dvh;
            /* [#488] 폴드 7 펼침 모드 본문 스크롤·터치 무반응 fix — 세로 스크롤 제스처만 허용 + 부모로 스크롤 전달 차단 */
            touch-action: pan-y;
            overscroll-behavior: contain;
        }
        /* 개별 카드만 차트 위로 올림 (result-content 전체에 z-index 주면 차트를 덮음) */
        .result-content > .glass-card:not(.chart-card-wide) {
            position: relative; z-index: 2;
        }

        /* 히어로 영역 (큰 고도 숫자) — 모든 해상도 공통 */
        .result-hero {
            text-align: center; padding: 48px 0 0;
            position: fixed; top: 0; left: 0; right: 0;
            z-index: 3; pointer-events: none;
            /* [#372] 운영자 명시 — zoom-bar(top:86px)와 "현재 고도" 라벨 사이 여유 간격 확보 */
            /* [#428c] iOS safe-area-inset-top 가산 — GNB가 커진 분만큼 hero 시작 위치도 함께 내려 시각 간격 일관성 보존 */
            padding-top: calc(156px + env(safe-area-inset-top, 0px));
        }
        .result-hero-label {
            font-size: 13px; color: var(--result-text-sub);
            letter-spacing: 4px; margin-bottom: 4px;
        }
        .result-hero-altitude {
            display: flex; align-items: baseline; justify-content: center;
            margin-bottom: 8px;
        }
        .altitude-number {
            font-size: 96px; font-weight: 800; color: var(--c-accent);
            line-height: 1; letter-spacing: -4px;
        }
        .altitude-unit {
            font-size: 40px; font-weight: 300;
            color: rgba(255,255,255,0.6); margin-left: 2px;
        }
        .result-hero-level {
            font-size: var(--fs-h2); font-weight: 600; color: rgba(255,255,255,0.9); margin-bottom: 4px;
        }
        .result-hero-userinfo {
            font-size: 15px; color: var(--result-text-sub);
        }

        /* 글래스모피즘 카드 */
        .glass-card {
            background: var(--bg-card);
            border: none;
            border-radius: 16px; padding: 24px; margin-bottom: 48px;
            box-shadow: var(--shadow-1);
        }
        .glass-card-header {
            display: flex; align-items: center; gap: 8px;
            padding-bottom: 14px; border-bottom: 1px solid var(--b-default);
            margin-bottom: 16px;
        }
        .glass-card-icon { font-size: 18px; }
        .glass-card-title {
            font-size: var(--fs-h3); font-weight: 700;
            color: var(--t-strong); letter-spacing: 0.5px;
        }
        /* [B7 #348] 카드 도움말 ? 버튼 + 인라인 설명 박스 */
        .card-help-btn {
            display: inline-flex; align-items: center; justify-content: center;
            width: 28px; height: 28px;
            border-radius: 50%;
            background: rgba(27, 42, 74, 0.08);
            color: var(--c-primary, #1B2A4A);
            border: none;
            font-size: 16px; font-weight: 700;
            cursor: pointer;
            margin-left: auto;
        }
        .card-help-btn:active { background: rgba(27, 42, 74, 0.18); }
        .card-help-box {
            background: rgba(255, 217, 147, 0.12);
            border: 1px solid rgba(255, 217, 147, 0.4);
            border-radius: 10px;
            padding: 14px 16px;
            margin-bottom: 14px;
            font-size: 16px;
            line-height: 1.6;
            color: var(--t-strong);
        }
        .card-help-box strong { color: var(--c-primary, #1B2A4A); }

        /* 차트 (다크 테마) — 모든 해상도 공통 풀스크린 */
        .glass-card.chart-card-wide {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            width: 100%; height: 100vh; height: 100dvh;
            margin: 0; border-radius: 0; padding: 0; border: none;
            background: var(--c-primary);
            display: flex; flex-direction: column;
            z-index: 1;
            pointer-events: none;
            box-shadow: none;
        }
        .glass-card.chart-card-wide canvas { pointer-events: auto; }
        .glass-card.chart-card-wide .chart-zoom-bar { pointer-events: auto; }
        .glass-card.chart-card-wide .legend-dark { pointer-events: auto; }
        /* 네비바는 result-content 밖으로 이동됨 — 별도 stacking context */
        .glass-card.chart-card-wide .result-hero { pointer-events: none; }
        .chart-wrap-dark { position: relative; height: 220px; margin: 0; background: transparent; border-radius: 0; }
        .glass-card.chart-card-wide .chart-wrap-dark {
            flex: 1; height: 100vh; height: 100dvh;
        }
        /* [#369n] legend-dark를 result-hero 안 자식으로 이동 (DOM 변경) — userinfo 아래 자연 배치. 운영자 명시 */
        .result-hero .legend-dark {
            margin-top: 12px;
            padding-top: 0;
            pointer-events: auto;
        }
        .legend-dark {
            display: flex; justify-content: center; gap: 24px;
            font-size: 12px; color: var(--legend-text); padding-top: 8px;
        }
        /* 차트 아래 콘텐츠: 스크롤하면 차트 위로 올라옴 */
        /* [#369] .flow-cta-bar 추가 — 차트 카드 위에 겹쳐 보이던 결함 해소 */
        .glass-card.chart-card-wide ~ .glass-card,
        .glass-card.chart-card-wide ~ .btn-reset-dark,
        .glass-card.chart-card-wide ~ .flow-cta-bar {
            position: relative;
            z-index: 5;
        }
        .glass-card.chart-card-wide + .glass-card {
            margin-top: calc(100vh + 40px); margin-top: calc(100dvh + 40px);
        }
        /* [#369] 차트 카드 숨김 모드(flow-manse·saju·compat-detail)에서는 첫 카드 100vh 마진 제거 — 흰 화면 결함 fix */
        body.flow-manse .glass-card.chart-card-wide + .glass-card,
        body.flow-saju .glass-card.chart-card-wide + .glass-card,
        body.flow-compat-detail .glass-card.chart-card-wide + .glass-card {
            margin-top: 24px;
        }
        /* [#369j #369l #372] flow-* CTA — 화면 하단 fixed sticky 배너.
           #372 운영자 명시 — 본문 길어져도 항상 보이도록 manse·saju·compat-detail에도 동일 sticky 적용 */
        body.flow-ridge .flow-cta-bar.flow-cta-ridge,
        body.flow-compat-ridge .flow-cta-bar.flow-cta-compat-ridge,
        body.flow-manse .flow-cta-bar.flow-cta-manse,
        body.flow-saju .flow-cta-bar.flow-cta-saju,
        body.flow-compat-detail .flow-cta-bar.flow-cta-compat-detail {
            position: fixed;
            bottom: 8px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 10;
            margin: 0;
            gap: 6px;
            width: calc(100% - 16px);
            max-width: 480px;
            background: rgba(15, 23, 36, 0.94);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border-radius: 12px;
            padding: 8px 12px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        }
        /* [#405] flow-ridge·flow-compat-ridge에서 차트 하단이 fixed CTA 바에 가려지는 결함 fix.
           김연희 등 평생 음수 영역이 깊은 사주는 곡선 바닥이 viewport 하단까지 내려가
           CTA(bottom:8px, 약 72px 높이) 뒤로 숨던 잠복 결함. 캔버스 부모에 padding-bottom으로
           CTA 높이만큼 여백 확보 → Chart.js responsive가 줄어든 content box에 맞춰 재렌더 */
        body.flow-ridge .glass-card.chart-card-wide .chart-wrap-dark,
        body.flow-compat-ridge .glass-card.chart-card-wide .chart-wrap-dark {
            padding-bottom: 88px;
            box-sizing: border-box;
        }
        /* CTA 버튼 컴팩트화 — 두 버튼이 화면 하단 좁은 영역에 깔끔히 */
        body.flow-ridge .flow-cta-bar.flow-cta-ridge .btn,
        body.flow-compat-ridge .flow-cta-bar.flow-cta-compat-ridge .btn,
        body.flow-manse .flow-cta-bar.flow-cta-manse .btn,
        body.flow-saju .flow-cta-bar.flow-cta-saju .btn,
        body.flow-compat-detail .flow-cta-bar.flow-cta-compat-detail .btn {
            min-height: 48px;
            font-size: 16px;
            padding: 8px 16px;
        }
        /* [#378·#379] 운영자 명시 — flow-cta-bar fixed sticky 배경이 rgba(15,23,36,0.94) 딥네이비라
           라이트모드 .btn-primary(=딥네이비) 와 동화되어 안 보이던 결함. 모든 flow에 골드 강제 오버라이드 */
        body.flow-ridge .flow-cta-bar.flow-cta-ridge .btn-primary,
        body.flow-compat-ridge .flow-cta-bar.flow-cta-compat-ridge .btn-primary,
        body.flow-manse .flow-cta-bar.flow-cta-manse .btn-primary,
        body.flow-saju .flow-cta-bar.flow-cta-saju .btn-primary,
        body.flow-compat-detail .flow-cta-bar.flow-cta-compat-detail .btn-primary {
            background: var(--c-accent, #FFD993);
            color: var(--c-primary, #1B2A4A);
            box-shadow: 0 4px 12px rgba(255, 217, 147, 0.35);
        }
        body.flow-ridge .flow-cta-bar.flow-cta-ridge .btn-secondary,
        body.flow-compat-ridge .flow-cta-bar.flow-cta-compat-ridge .btn-secondary,
        body.flow-manse .flow-cta-bar.flow-cta-manse .btn-secondary,
        body.flow-saju .flow-cta-bar.flow-cta-saju .btn-secondary,
        body.flow-compat-detail .flow-cta-bar.flow-cta-compat-detail .btn-secondary {
            background: rgba(255, 255, 255, 0.92);
            color: var(--c-primary, #1B2A4A);
            border-color: rgba(255, 217, 147, 0.5);
        }
        /* [#372] flow-manse·flow-saju·flow-compat-detail은 차트 카드 숨김 모드라 본문이 길어질 수 있음 — fixed CTA 가림 방지 padding-bottom */
        /* [#380d] result-hero가 숨김인 모드들은 GNB(fixed top:0, ~60px) 가림 방지 padding-top 추가 */
        /* [#428c] iOS safe-area-inset-top 만큼 GNB 높이가 커진 분(#428) 추가 가산 — 본문 상단 잘림 결함 fix */
        body.flow-manse #section-result .result-content,
        body.flow-saju #section-result .result-content,
        body.flow-compat-detail #section-result .result-content {
            padding-top: calc(80px + env(safe-area-inset-top, 0px));
            padding-bottom: 96px;
        }
        /* [#488] 폴드 7 펼침 모드 사주풀이 본문 스크롤·터치 무반응 안전망 — 4축 (운영자 admin_note 가설 기반).
           정적 측정상 결함 미재현이나 Samsung Internet/폴드 펼침 펼침/접힘 전환 시점 잠재 결함 대비.
           회귀 안전 — fix 모두 body.flow-saju 한정, 자매 모드(flow-ridge·flow-compat-ridge·flow-manse·flow-compat-detail) 영향 0.
           ① momentum scroll 보강 (iOS PWA hint, 안드로이드 영향 0)
           ② fixed CTA safe-area-inset-bottom 가산 (#428c 자매 패턴, 폴드/노치 안전망)
           ③ stacking context 명시 (Samsung Internet z-index 처리 차이 회피) */
        body.flow-saju {
            -webkit-overflow-scrolling: touch;
        }
        body.flow-saju .flow-cta-bar.flow-cta-saju {
            bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        }
        body.flow-saju #section-result {
            position: relative;
            isolation: isolate;
        }
        /* 차트~첫 카드 사이 투명 스크롤 영역: 차트 위 빈 공간에서도 페이지 스크롤 가능하게 */
        .glass-card.chart-card-wide::after {
            content: '';
            position: fixed; top: 0; left: 0; right: 0; bottom: 0;
            z-index: 0;
            pointer-events: none;
        }
        .legend-dark b { font-weight: 800; }

        /* 줌 슬라이더 */
        /* [#438] iOS PWA safe-area-inset-top 가산 — GNB(.global-header)가 safe-area + 컨텐츠 높이로 늘어나는데
           chart-zoom-bar는 정적 top 86px이라 GNB 밑으로 가려지던 결함 fix. env() 가산으로 GNB 하단 정합 */
        .chart-zoom-bar {
            position: absolute;
            top: calc(86px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%);
            z-index: 10;
            display: flex; align-items: center; gap: 8px;
            background: var(--zoom-bg);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            border-radius: 20px; padding: 6px 14px;
        }
        /* [#372] 운영자 명시 — 비로그인(맛보기) 상태에서는 줌 슬라이더 숨김 */
        body.preview-mode .chart-zoom-bar { display: none; }
        /* [#465] 궁합 결과 오버레이 모드에선 줄 컨트롤 숨김 — 점수 카드(top 70px, 가운데)와
           시각 충돌 회피. 결과 화면은 점수·사건 관찰 위주라 줌 기능 불요(운영자 명시) */
        body.compat-overlay-active .chart-zoom-bar { display: none; }
        /* [#373] 운영자 명시 — 비로그인 상태에서는 공유 버튼 숨김 (저장된 결과가 없는 단계) */
        body.preview-mode #ghShareBtn { display: none !important; }
        .zoom-btn {
            background: none; border: none; cursor: pointer;
            font-size: 18px; color: var(--zoom-text);
            padding: 4px 8px; line-height: 1; user-select: none;
            display: flex; align-items: center; gap: 4px;
        }
        .zoom-btn .zoom-icon { font-size: 18px; line-height: 1; }
        /* [#372] 운영자 명시 — "축소"/"확대" 한글 한 자씩 wrap되어 세로 표시되던 결함 fix */
        .zoom-btn .zoom-text { font-size: 13px; font-weight: 600; white-space: nowrap; }
        .zoom-btn:active { color: var(--sunrise-gold); }
        #chartZoomSlider {
            -webkit-appearance: none; appearance: none;
            width: 120px; height: 4px;
            background: var(--zoom-slider-bg); border-radius: 2px; outline: none;
        }
        #chartZoomSlider::-webkit-slider-thumb {
            -webkit-appearance: none; appearance: none;
            width: 18px; height: 18px; border-radius: 50%;
            background: var(--sunrise-gold); border: 2px solid var(--zoom-thumb-border);
            cursor: pointer; box-shadow: var(--zoom-thumb-shadow);
        }
        #chartZoomSlider::-moz-range-thumb {
            width: 18px; height: 18px; border-radius: 50%;
            background: var(--sunrise-gold); border: 2px solid var(--zoom-thumb-border);
            cursor: pointer; box-shadow: var(--zoom-thumb-shadow);
        }

        /* 조언 카드 서브 섹션 */
        .advice-sub-section + .advice-sub-section {
            margin-top: 20px;
            padding-top: 18px;
            border-top: 1px solid var(--advice-divider);
        }
        /* [#414] 버튼 로딩 스피너 — 사주 자세히 보기 등 비동기 액션 시 진행 표시 */
        .btn.is-loading {
            opacity: 0.85;
            cursor: wait;
            pointer-events: none; /* 추가 터치 차단 안전망 */
        }
        .btn-spinner {
            display: inline-block;
            width: 16px;
            height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.35);
            border-top-color: currentColor;
            border-radius: 50%;
            animation: btn-spin 0.8s linear infinite;
            margin-right: 8px;
            vertical-align: middle;
        }
        @keyframes btn-spin {
            to { transform: rotate(360deg); }
        }
        @media (prefers-reduced-motion: reduce) {
            .btn-spinner { animation-duration: 1.6s; }
        }

        /* [#414] .reading-section h4와 시각 통일 (font-size·color·border) — 운영자 명시 */
        .advice-sub-label {
            font-size: var(--fs-h3); font-weight: 700; color: var(--c-primary-light);
            margin-bottom: 12px; padding-bottom: 8px;
            border-bottom: 1px solid var(--reading-h4-border);
        }

        /* 텍스트 카드 내용 — 조언 카드 내 모든 단락 통일 */
        .summary-text-dark,
        .advice-text-dark {
            font-size: 16px; line-height: 1.9; color: var(--advice-text-color);
            word-break: keep-all; letter-spacing: 0.2px;
        }

        /* 사주풀이 카드 */
        /* 결과 화면 원국 표시 */
        .result-pillars-area {
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid rgba(128,128,128,0.15);
        }
        /* 인물 정보 헤더 */
        .pillars-header {
            text-align: center;
            margin-bottom: 16px;
        }
        .pillars-header-name {
            font-size: 20px;
            font-weight: 800;
            color: var(--t-strongest);
            margin-bottom: 4px;
        }
        .pillars-header-ilju {
            font-size: 14px;
            color: var(--t-sub);
            margin-bottom: 8px;
        }
        .pillars-header-birth {
            font-size: 12px;
            color: var(--t-muted);
            line-height: 1.6;
        }
        /* [#374] 정보 수정 버튼 (본인 사주 #manse에만 노출) */
        .pillars-edit-row {
            display: flex; justify-content: center;
            margin: 8px 0 4px;
        }
        .pillars-edit-btn {
            background: var(--bg-card-2, rgba(255,255,255,0.08));
            color: var(--t-body, var(--text-main));
            border: 1px solid var(--card-border, rgba(255,255,255,0.18));
            border-radius: 999px;
            padding: 8px 18px;
            font-size: 14px; font-weight: 600;
            cursor: pointer;
            min-height: 40px;
            transition: background 0.15s, border-color 0.15s;
        }
        .pillars-edit-btn:hover { background: rgba(255,217,147,0.12); border-color: var(--c-accent, #FFD993); }
        .pillars-edit-btn:focus-visible { outline: 3px solid var(--c-accent, #FFD993); outline-offset: 2px; }
        /* [#408] 헤더 우측 정렬 변형 — 제목 행 우측에 배치 (작게) */
        .pillars-edit-btn--header {
            margin-left: auto;
            padding: 6px 12px;
            font-size: 13px;
            min-height: 32px;
        }
        /* 사주 원국 테이블 */
        /* [#401] 만세력 표 — 종이 만세력 시각 표준 (위키 [[만세력_사주표_시각표준]] §1~§7) */
        .pillars-table {
            width: 100%;
            border-collapse: separate;
            /* [#408] 세로 간격 6px — 천간·지지 색깔 칩이 위아래로 너무 붙어있던 결함 fix */
            border-spacing: 8px 6px;
            margin-bottom: 14px;
            font-size: 16px;
            table-layout: fixed; /* 4컬럼 균등 분할 (좌측 라벨 컬럼 제거 후) */
        }
        .pillars-table th,
        .pillars-table td {
            border: 0;
        }
        /* [#408] 시주/일주/월주/연주 헤더 — 구분만 되면 충분, 자리 차지 안 하게 축소 */
        .pillars-table th {
            font-size: 11px;
            font-weight: 500;
            color: var(--t-muted);
            padding: 2px 4px;
            background: transparent;
            text-align: center;
            letter-spacing: 0.5px;
        }
        .pillars-table td {
            text-align: center;
            padding: 10px 4px;
            vertical-align: middle;
        }
        @media (prefers-color-scheme: dark) {
            .pillars-table th, .pillars-table td { border-color: rgba(200,200,200,0.25); }
            /* [#408] th 배경 투명 통일 — 헤더 영역 최소화 */
            .pillars-table th { background: transparent; color: var(--t-muted); }
        }
        /* 한자 + 한글 글자 — [#401 S4] 한글 28px / 한자 14px (시니어 §3·§7) */
        .pillars-char-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 4px;
        }
        .pillars-hanzi {
            font-size: 28px;
            line-height: 1.1;
            position: relative;
            color: inherit; /* td 배경 색상 클래스의 글자 색상 상속 */
        }
        /* 양/음 기운에 따른 weight 분기 */
        .pillars-hanzi-yang { font-weight: 800; }
        .pillars-hanzi-yin  { font-weight: 400; }
        .pillars-hanzi .pillars-hanja {
            font-size: 14px;
            font-weight: 400;
            position: absolute;
            bottom: -2px;
            right: -18px;
            opacity: 0.7;
        }
        @media (max-width: 768px) {
            .pillars-hanzi { font-size: 24px; }
            .pillars-hanzi .pillars-hanja { font-size: 13px; right: -16px; }
        }
        .pillars-el-tag {
            font-size: 12px;
            opacity: 0.85;
            color: inherit;
        }
        /* [#401 S3] 오행 셀 배경 — 강한 원색 + 시니어 명도 대비 7:1 (위키 §4) */
        /* [요청] 셀 분리감 강화 — 둥근 모서리 */
        .pillars-cell-bg-wood,
        .pillars-cell-bg-fire,
        .pillars-cell-bg-earth,
        .pillars-cell-bg-metal,
        .pillars-cell-bg-water { border-radius: 6px; }
        .pillars-cell-bg-wood  { background: #1B7F3D; color: #FFFFFF; }
        .pillars-cell-bg-fire  { background: #D02828; color: #FFFFFF; }
        .pillars-cell-bg-earth { background: #E5B100; color: #1B2A4A; }
        .pillars-cell-bg-metal { background: #E8E8E8; color: #1B2A4A; }
        .pillars-cell-bg-water { background: #1B2A4A; color: #FFFFFF; }
        @media (prefers-color-scheme: dark) {
            /* 다크 배경에서 #E8E8E8 명도 ↓ → 약간 어둡게 보강 */
            .pillars-cell-bg-metal { background: #C0C0C0; color: #1B2A4A; }
        }
        /* 글자 색상 (이전 .pillars-el-* 호환 — 배경 없는 컨텍스트 대비) */
        .pillars-el-wood { color: #4CAF50; }
        .pillars-el-fire { color: #FF6B6B; }
        .pillars-el-earth { color: #FFB74D; }
        .pillars-el-metal { color: #B0BEC5; }
        .pillars-el-water { color: #64B5F6; }
        /* 십성 — [#401 시니어 자동 적용] 14px 하한 */
        .pillars-god {
            font-size: 14px;
            color: var(--t-sub);
            font-weight: 500;
        }
        .pillars-god-self {
            color: var(--c-accent, #FFD993);
            font-weight: 700;
            padding: 2px 8px;
            background: rgba(255, 217, 147, 0.18);
            border-radius: 6px;
        }
        .pillars-row-god td { padding: 6px 4px; }
        /* 지장간/12운성/신살 — [#401 시니어 자동 적용] 14px 하한 (위키 §6) */
        .pillars-sub {
            font-size: 14px;
            color: var(--t-body);
        }
        .pillars-row-sub td { padding: 8px 4px; }
        .pillars-shinsal { color: var(--c-accent); font-weight: 500; }
        /* 지장간 — 한글 한 줄 / 한자 한 줄 분리 (자동 줄바꿈 회피) */
        .pillars-jijanggan {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
            line-height: 1.25;
        }
        .pillars-jj-kr { font-size: 14px; color: var(--t-body); letter-spacing: 1px; }
        .pillars-jj-hj { font-size: 12px; color: var(--t-muted); letter-spacing: 1px; opacity: 0.85; }
        .pillars-cell-empty { color: var(--t-muted); }
        /* [B2 #350] 시니어 친숙어 풀이 — 천간/지지/십성 셀 하단 */
        .pillars-nickname {
            display: block;
            font-size: 12px;
            font-weight: 500;
            color: inherit;
            opacity: 0.85;
            margin-top: 2px;
            line-height: 1.3;
            letter-spacing: -0.3px;
        }
        .pillars-row-stem .pillars-nickname,
        .pillars-row-branch .pillars-nickname {
            margin-top: 4px;
        }
        /* 본원 셀의 친숙어는 골드 톤 강조 (오행 배경 없음) */
        .pillars-row-god .pillars-nickname {
            color: var(--c-accent, #FFD993);
            opacity: 1;
        }
        .result-daeun-seyun-wrap {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        .result-current-daeun, .result-current-seyun {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            font-size: 13px;
            color: var(--text-sub);
        }
        .result-daeun-label {
            font-size: 11px;
            color: var(--text-muted);
            padding: 2px 8px;
            border: 1px solid rgba(128,128,128,0.2);
            border-radius: 10px;
        }
        .result-daeun-chars {
            font-size: 16px;
            font-weight: 600;
            color: var(--text-main);
            letter-spacing: 2px;
            display: inline-flex;
            gap: 4px;
        }
        /* [요청 8] 현재 대운/올해 세운 글자 — 오행 배경 + 양/음 weight (사주표와 동일 톤) */
        .result-run-char {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px; height: 28px;
            border-radius: 6px;
            font-size: 18px;
            line-height: 1;
            letter-spacing: 0;
        }
        .result-daeun-gods {
            font-size: 12px;
            color: var(--text-sub);
        }
        .result-daeun-age {
            font-size: 11px;
            color: var(--text-muted);
        }
        .saju-reading-text {
            color: var(--reading-text-color);
        }
        .reading-section {
            margin-bottom: 32px;
        }
        .reading-section:last-child {
            margin-bottom: 0;
        }
        .reading-section h4 {
            font-size: var(--fs-h3); font-weight: 700;
            color: var(--c-primary-light);
            margin-bottom: 12px; padding-bottom: 8px;
            border-bottom: 1px solid var(--reading-h4-border);
        }
        .reading-section p {
            font-size: var(--fs-body-l); line-height: 1.9;
            color: var(--t-body);
            word-break: keep-all;
        }
        .reading-loading {
            text-align: center;
            color: var(--reading-loading-color);
            font-size: 14px;
            padding: 24px 0;
        }
        .reading-feedback-row {
            display: flex; align-items: center; gap: 6px;
            margin-top: 8px; padding-top: 8px;
        }
        .reading-feedback-label {
            font-size: 12px; color: var(--reading-loading-color);
            margin-right: 2px;
        }
        .reading-feedback-btn {
            background: transparent;
            border: 1px solid var(--reading-h4-border);
            border-radius: 14px;
            padding: 2px 12px;
            font-size: 13px; font-weight: 500;
            color: var(--reading-loading-color);
            cursor: pointer; transition: all 0.2s;
        }
        .reading-feedback-btn:hover {
            border-color: var(--sky-mid); color: var(--sky-mid);
        }
        .reading-feedback-btn.active[data-val="O"] {
            background: rgba(72,187,120,0.15);
            border-color: #48BB78; color: #48BB78;
        }
        .reading-feedback-btn.active[data-val="△"] {
            background: rgba(236,201,75,0.15);
            border-color: #ECC94B; color: #ECC94B;
        }
        .reading-feedback-btn.active[data-val="X"] {
            background: rgba(245,101,101,0.15);
            border-color: #F56565; color: #F56565;
        }

        /* [#397] 라이트 모달에서 흰색 텍스트 안 보이던 결함 fix — 다크모드 토큰 분리 */
        .feedback-textarea {
            width: 100%; box-sizing: border-box;
            padding: 12px; margin-bottom: 12px;
            border: 1px solid var(--border-1, rgba(0,0,0,0.12));
            border-radius: 12px;
            background: rgba(0,0,0,0.04);
            color: var(--t-strong);
            font-family: inherit; font-size: 14px; line-height: 1.6;
            resize: none; outline: none;
        }
        .feedback-textarea::placeholder {
            color: var(--t-muted, rgba(0,0,0,0.40));
        }
        @media (prefers-color-scheme: dark) {
            .feedback-textarea {
                background: rgba(255,255,255,0.08);
                color: #fff;
                border-color: var(--reading-h4-border);
            }
            .feedback-textarea::placeholder {
                color: var(--reading-loading-color);
            }
        }
        .feedback-textarea:focus {
            border-color: var(--sky-mid);
        }
        .feedback-submit-btn {
            margin-bottom: 8px !important;
        }

        /* 다시하기 버튼 (다크) */
        .btn-reset-dark {
            display: block; width: 100%; padding: 16px; border: none;
            border-radius: 16px; cursor: pointer; font-family: inherit;
            font-size: 16px; font-weight: 600;
            background: var(--btn-reset-bg); color: var(--btn-reset-text);
            backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            border: 1px solid var(--btn-reset-border); margin-top: 8px;
            transition: background 0.2s;
        }
        .btn-reset-dark:hover { background: rgba(255,255,255,0.25); }

        /* 상단 헤더 바 — 2행 구조 */
        .result-nav-bar {
            position: fixed;
            top: 46px; left: 0; right: 0;
            z-index: 999;
            display: none; flex-wrap: wrap; align-items: center;
            background: var(--bg-card);
            padding: 8px 12px;
            padding-top: calc(env(safe-area-inset-top, 0px) + 8px);
            border-bottom: 1px solid var(--b-default);
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        .result-nav-bar.visible { display: flex; }
        .nav-group-left, .nav-group-right {
            display: flex; align-items: center; gap: 6px;
        }
        .nav-group-left { flex-shrink: 0; }
        .nav-group-right { flex-shrink: 0; margin-left: auto; }
        .nav-group-center {
            display: flex; align-items: center; justify-content: center; gap: 6px;
            width: 100%; order: 1;
            overflow-x: auto; -webkit-overflow-scrolling: touch;
            padding-top: 6px;
            scrollbar-width: none;
        }
        .nav-group-center::-webkit-scrollbar { display: none; }
        .result-nav-bar button {
            background: var(--nav-btn-bg); border: none;
            color: var(--nav-btn-text); font-family: inherit;
            font-size: 13px; font-weight: 500;
            padding: 7px 14px; border-radius: 16px; cursor: pointer;
            transition: background 0.2s; white-space: nowrap;
        }
        .result-nav-bar button:active { background: var(--nav-btn-active); }
        .result-nav-bar .nav-back-btn {
            background: var(--nav-back-bg);
            font-size: 18px; padding: 5px 10px; line-height: 1;
        }
        .result-nav-bar .nav-back-btn:active { background: rgba(255,255,255,0.2); }
        .result-nav-bar .nav-share-btn {
            background: var(--nav-share-bg);
            color: var(--nav-share-text);
            font-size: 13px; padding: 7px 14px; border-radius: 16px;
        }
        .result-nav-bar .nav-share-btn:active { background: var(--nav-share-active); }

        /* 공유 보기 모드 — 하단 CTA */
        #shareCTA {
            text-align: center; padding: 30px 20px 40px; margin-top: 10px;
        }
        .share-cta-btn {
            display: inline-block;
            background: linear-gradient(135deg, #FFB88C, #FFD993);
            color: #1a1520; font-family: inherit;
            font-size: 18px; font-weight: 700;
            padding: 16px 40px; border: none; border-radius: 16px;
            cursor: pointer; letter-spacing: 1px;
            box-shadow: 0 4px 20px rgba(255,184,140,0.4);
            transition: transform 0.2s, box-shadow 0.2s;
        }
        .share-cta-btn:active {
            transform: scale(0.97);
            box-shadow: 0 2px 10px rgba(255,184,140,0.3);
        }

        /* 삶의 기록 입력 */
        .life-record-hint {
            font-size: 13px; color: var(--record-hint-color);
            line-height: 1.5; margin: 2px 0 6px 0;
        }
        .life-record-field { margin-bottom: 14px; }
        .life-record-label {
            display: block; font-size: 15px; font-weight: 600;
            color: var(--record-label-color); margin-bottom: 6px;
        }
        .life-record-textarea {
            width: 100%; padding: 12px 14px; box-sizing: border-box;
            background: var(--record-input-bg);
            border: 1px solid var(--record-input-border); border-radius: 12px;
            color: var(--record-input-text); font-family: inherit; font-size: 15px;
            line-height: 1.8; resize: vertical; min-height: 72px; outline: none;
        }
        .life-record-textarea:focus {
            border-color: var(--record-focus-border);
            background: var(--record-focus-bg);
        }
        .life-record-textarea::placeholder { color: var(--record-placeholder-color); }
        .life-record-btn {
            display: block; width: 100%; margin-top: 4px; padding: 13px;
            background: var(--record-btn-bg);
            border: 1px solid var(--record-btn-border); border-radius: 12px;
            color: var(--record-btn-text); font-family: inherit;
            font-size: 15px; font-weight: 600; cursor: pointer;
            transition: background 0.2s;
        }
        .life-record-btn:hover { background: rgba(124,184,228,0.35); }
        .life-record-btn:disabled { opacity: 0.5; cursor: default; }
        .life-record-status {
            font-size: 14px; color: var(--record-status-color);
            text-align: center; margin-top: 8px; min-height: 20px;
        }

        /* ===== 궁합 카드 ===== */
        .compat-field-group { margin-bottom: 12px; }
        .compat-label {
            display: block; font-size: 14px; font-weight: 600;
            color: var(--compat-label-color); margin-bottom: 4px;
        }
        .compat-input {
            width: 100%; padding: 14px 16px; box-sizing: border-box;
            background: var(--compat-input-bg);
            border: 1.5px solid var(--compat-input-border); border-radius: 12px;
            color: var(--compat-input-text); font-family: inherit; font-size: 16px;
            outline: none;
        }
        .compat-input::placeholder { color: var(--compat-placeholder); }
        .compat-input:-webkit-autofill,
        .compat-input:-webkit-autofill:hover,
        .compat-input:-webkit-autofill:focus {
            -webkit-box-shadow: 0 0 0 1000px var(--compat-autofill-bg) inset;
            -webkit-text-fill-color: var(--compat-autofill-text);
            border-color: rgba(124,184,228,0.5);
            transition: background-color 5000s ease-in-out 0s;
        }
        .compat-input:focus {
            border-color: rgba(124,184,228,0.5);
            background: var(--compat-focus-bg);
        }
        .compat-select {
            width: 100%; padding: 10px 12px; box-sizing: border-box;
            background: var(--compat-input-bg);
            border: 1px solid var(--compat-input-border); border-radius: 10px;
            color: var(--compat-input-text); font-family: inherit; font-size: 15px;
            appearance: none; -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,0.5)' 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;
            padding-right: 36px; cursor: pointer;
        }
        .compat-select option, select.compat-input option, select.compat-input optgroup,
        #compatGender option, #compatCalendar option, #compatCity option {
            background-color: var(--compat-option-bg) !important;
            color: var(--compat-option-text) !important;
        }
        .compat-history-dropdown { position: relative; }
        .compat-history-trigger {
            width: 100%; padding: 10px 12px; box-sizing: border-box;
            background: var(--compat-input-bg);
            border: 1px solid var(--compat-input-border); border-radius: 10px;
            color: var(--compat-input-text); font-family: inherit; font-size: 15px;
            cursor: pointer; display: flex; justify-content: space-between; align-items: center;
            text-align: left;
        }
        .compat-history-trigger:hover { background: var(--compat-focus-bg); }
        .compat-history-arrow { color: var(--result-text-muted); font-size: 12px; margin-left: 8px; }
        .compat-history-list {
            display: none; position: absolute; top: calc(100% + 4px); left: 0; right: 0;
            background: var(--compat-history-bg); border: 1px solid var(--compat-input-border); border-radius: 10px;
            max-height: 200px; overflow-y: auto; z-index: 50;
            box-shadow: var(--compat-history-shadow);
        }
        .compat-history-list.open { display: block; }
        .compat-history-item {
            display: flex; align-items: center; padding: 10px 12px;
            cursor: pointer; transition: background 0.15s;
        }
        .compat-history-item:hover { background: var(--compat-history-hover); }
        .compat-history-item:first-child { border-radius: 10px 10px 0 0; }
        .compat-history-item:last-child { border-radius: 0 0 10px 10px; }
        .compat-history-item:only-child { border-radius: 10px; }
        .compat-history-item + .compat-history-item { border-top: 1px solid var(--compat-history-divider); }
        .compat-history-item-label { flex: 1; min-width: 0; color: var(--compat-input-text); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .compat-history-item-del {
            flex-shrink: 0; width: 28px; height: 28px; margin-left: 8px;
            background: transparent; border: 1px solid var(--del-border); border-radius: 8px;
            color: var(--del-text); font-size: 13px;
            cursor: pointer; display: flex; align-items: center; justify-content: center;
            transition: background 0.15s, border-color 0.15s;
        }
        .compat-history-item-del:hover { background: var(--del-hover-bg); border-color: rgba(255,80,80,0.5); color: rgba(255,150,150,1); }
        .compat-row { display: flex; gap: 10px; align-items: flex-end; }
        .compat-name { flex: 1; min-width: 0; }
        .compat-gender { flex-shrink: 0; width: 110px; }
        /* 궁합 성별: select 박스로 전환됨 (토글 스타일 제거) */
        .compat-birth-row { display: flex; gap: 8px; }
        .compat-birth-row select { width: 80px; flex-shrink: 0; }
        .compat-birth-row input:first-of-type { flex: 1; min-width: 0; }
        .compat-birth-row input:last-of-type { width: 70px; flex-shrink: 0; }
        .compat-btn {
            display: block; width: 100%; margin-top: 12px; padding: 13px;
            background: var(--nav-share-bg);
            border: 1px solid rgba(255,184,140,0.4); border-radius: 12px;
            color: var(--nav-share-text); font-family: inherit;
            font-size: 15px; font-weight: 600; cursor: pointer;
            transition: background 0.2s;
        }
        .compat-btn:hover { background: rgba(255,184,140,0.35); }
        .compat-btn:disabled { opacity: 0.5; cursor: default; }
        .compat-btn-close {
            background: var(--compat-btn-close-bg);
            border-color: var(--compat-btn-close-border);
            margin-top: 20px;
        }
        .compat-error {
            font-size: 14px; color: var(--danger); text-align: center;
            margin-top: 8px; min-height: 20px;
        }
        .compat-type-hero {
            text-align: center; padding: 24px 0 20px;
            border-bottom: 1px solid var(--advice-divider);
            margin-bottom: 20px;
        }
        .compat-type-label {
            font-size: 28px; font-weight: 700; letter-spacing: 1px;
            background: linear-gradient(135deg, var(--sunrise-peach), var(--sunrise-gold));
            -webkit-background-clip: text; -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .compat-type-desc {
            font-size: 15px; color: var(--compat-score-label-color); margin-top: 6px;
            font-style: italic;
        }
        .compat-names {
            font-size: 15px; color: var(--compat-names-color); margin-top: 10px;
        }
        .compat-axes {
            display: flex; justify-content: center; gap: 20px;
            margin-top: 14px; font-size: 13px;
        }
        .compat-axis-item {
            display: flex; align-items: center; gap: 6px;
            color: var(--compat-score-label-color);
        }
        .compat-axis-dots {
            display: flex; gap: 3px;
        }
        .compat-axis-dot {
            width: 8px; height: 8px; border-radius: 50%;
            background: var(--compat-sync-bg);
            border: 1px solid rgba(255,184,140,0.3);
        }
        .compat-axis-dot.filled {
            background: linear-gradient(135deg, var(--sunrise-peach), var(--sunrise-gold));
            border-color: transparent;
        }
        .compat-partner-summary {
            background: var(--compat-partner-bg); border-radius: 12px;
            padding: 16px 18px; margin-bottom: 18px;
            border-left: 3px solid var(--sunrise-peach);
        }
        .compat-partner-summary h4 {
            color: var(--sunrise-peach); font-size: 15px;
            margin: 0 0 8px 0; font-weight: 600;
        }
        .compat-partner-summary p {
            color: var(--compat-partner-text); font-size: 14px;
            line-height: 1.8; margin: 0;
        }
        .compat-reading { margin-bottom: 16px; }
        .compat-reading .reading-section h4 { color: var(--sunrise-peach); }
        .compat-sync-summary {
            font-size: 14px; color: var(--compat-sync-text);
            line-height: 1.8; padding: 12px;
            background: var(--compat-sync-bg); border-radius: 10px;
        }

        /* 등장 애니메이션 */
        @keyframes fadeInUp {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .result-hero-altitude { animation: fadeInUp 0.8s ease-out 0.3s both; }
        .result-hero-level { animation: fadeInUp 0.6s ease-out 0.5s both; }
        .result-hero-userinfo { animation: fadeInUp 0.6s ease-out 0.7s both; }
        .glass-card:nth-child(1) { animation: fadeInUp 0.6s ease-out 0.6s both; }
        .glass-card:nth-child(2) { animation: fadeInUp 0.6s ease-out 0.8s both; }
        .glass-card:nth-child(3) { animation: fadeInUp 0.6s ease-out 1.0s both; }
        .btn-reset-dark { animation: fadeInUp 0.6s ease-out 1.1s both; }

        /* ===== 오행 색상 ===== */
        .el-wood { color: var(--el-wood); }
        .el-fire { color: var(--el-fire); }
        .el-earth { color: var(--el-earth); }
        .el-metal { color: var(--el-metal); }
        .el-water { color: var(--el-water); }

        .bg-wood { background: var(--bg-wood); }
        .bg-fire { background: var(--bg-fire); }
        .bg-earth { background: var(--bg-earth); }
        .bg-metal { background: var(--bg-metal); }
        .bg-water { background: var(--bg-water); }

        /* ===== 데이터 확인 화면 ===== */
        #confirmTitle {
            font-size: 16px; font-weight: 600; color: var(--text-main);
            text-align: center; line-height: 1.6; margin-bottom: 20px;
        }
        .confirm-card {
            background: var(--glass-bg); border-radius: 14px; padding: 16px;
            margin-bottom: 14px;
        }
        .confirm-title {
            font-size: 14px; font-weight: 600; color: var(--text-sub);
            margin-bottom: 12px; letter-spacing: 1px;
        }

        .pillar-grid {
            display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px;
            text-align: center;
        }
        .pillar-col .pillar-label {
            font-size: 11px; color: var(--text-muted); margin-bottom: 8px;
            letter-spacing: 1px;
        }
        .pillar-col .pillar-chars {
            background: var(--pillar-bg);
            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
            border-radius: 14px; padding: 6px;
            border: 1px solid var(--pillar-border);
            box-shadow: var(--pillar-shadow);
            display: flex; flex-direction: column; gap: 6px;
        }
        .pillar-col .stem {
            font-size: 28px; font-weight: 700;
            color: var(--text-main);
            border-radius: 10px; padding: 10px 0;
        }
        .pillar-col .branch {
            font-size: 28px; font-weight: 700;
            color: var(--text-main);
            border-radius: 10px; padding: 10px 0;
        }
        .char-kr {
            display: block; font-size: 11px; font-weight: 400;
            color: var(--text-muted); margin-top: 2px;
        }
        .pillar-god {
            font-size: 11px; font-weight: 600;
            color: var(--text-sub); margin: 4px 0 2px;
            letter-spacing: 0.5px;
        }
        .pillar-sub {
            display: flex; flex-direction: column; align-items: center;
            gap: 2px; margin-top: 4px;
        }
        .pillar-sub span {
            font-size: 10px; color: var(--text-muted);
            line-height: 1.3;
        }

        /* 운(대운/세운/월운) 컬럼 스타일 */
        .pillar-col.un-col .pillar-label {
            background: rgba(91,155,213,0.25);
            color: var(--sky-deep);
            border-radius: 6px; padding: 2px 6px;
            font-weight: 700;
        }
        .pillar-col.un-col .pillar-chars {
            background: rgba(91,155,213,0.15);
            border-color: rgba(91,155,213,0.3);
            box-shadow: 0 4px 16px rgba(91,155,213,0.18), inset 0 1px 0 rgba(255,255,255,0.3);
        }
        .pillar-col.un-col .pillar-god {
            color: var(--sky-deep);
        }
        .pillar-col.un-col .pillar-sub span {
            color: var(--sky-mid);
        }
        /* 클릭 가능 표시 */
        .clickable { cursor: pointer; }
        .clickable:hover { opacity: 0.75; }
        .pillar-col .stem, .pillar-col .branch { cursor: pointer; }
        .pillar-col .stem:hover, .pillar-col .branch:hover { opacity: 0.8; }

        /* 사주 용어 툴팁 */
        .saju-tooltip {
            position: fixed;
            z-index: 9999;
            background: rgba(30,41,59,0.95);
            color: #f1f5f9;
            padding: 10px 14px;
            border-radius: 10px;
            font-size: 13px;
            line-height: 1.5;
            max-width: 240px;
            box-shadow: 0 8px 24px rgba(0,0,0,0.3);
            opacity: 0;
            transition: opacity 0.15s;
            pointer-events: none;
        }
        .saju-tooltip.visible {
            opacity: 1;
            pointer-events: auto;
        }
        .saju-tooltip strong {
            font-size: 15px;
            color: #7CB8E4;
        }

        .wolun-chip { cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
        .wolun-chip:hover { transform: translateY(-2px); }
        .wolun-chip.active { border-color: var(--sky-deep); box-shadow: 0 0 10px rgba(91,155,213,0.4); }

        .daeun-flow {
            display: flex; flex-wrap: nowrap; gap: 6px;
            overflow-x: auto; -webkit-overflow-scrolling: touch;
            scrollbar-width: thin; padding: 2px 2px 4px 2px;
        }
        .daeun-chip {
            display: inline-flex; flex-direction: column; align-items: center;
            background: var(--chip-bg);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            border-radius: 10px;
            padding: 4px; min-width: 54px; flex-shrink: 0;
            border: 2px solid var(--chip-border);
        }
        .daeun-stem, .daeun-branch {
            font-size: 15px; font-weight: 600;
            width: 100%; text-align: center;
            padding: 4px 6px; box-sizing: border-box;
        }
        .daeun-stem { border-radius: 6px 6px 0 0; }
        .daeun-branch { border-radius: 0 0 6px 6px; }
        .daeun-chip .daeun-age {
            font-size: 10px; color: var(--text-muted); margin-top: 3px; padding-bottom: 2px;
        }
        .daeun-chip.current {
            border-color: var(--golden);
            box-shadow: 0 0 12px rgba(255,217,147,0.5);
        }
        .daeun-chip.current .daeun-age { color: var(--golden); font-weight: 600; }
        .daeun-chip { cursor: pointer; transition: transform 0.15s, border-color 0.15s; }
        .daeun-chip:hover { transform: translateY(-2px); }
        .daeun-chip.active { border-color: var(--sky-deep); box-shadow: 0 0 10px rgba(91,155,213,0.4); }
        .daeun-god {
            font-size: 9px; color: var(--text-muted); line-height: 1.2;
        }
        .daeun-twelve {
            font-size: 9px; color: var(--text-muted); margin-bottom: 1px;
        }
        .confirm-hint {
            font-size: 12px; font-weight: 400; color: var(--text-muted);
        }

        /* 세운 섹션 */
        .seyun-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(91,155,213,0.15); }
        .seyun-title { color: var(--sky-deep) !important; margin-bottom: 10px !important; }
        .seyun-flow {
            display: flex; flex-wrap: nowrap; gap: 8px;
            overflow-x: auto; -webkit-overflow-scrolling: touch;
            scrollbar-width: thin; padding: 2px 2px 4px 2px;
        }
        .seyun-chip {
            display: flex; flex-direction: column; align-items: center;
            background: var(--chip-bg);
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            border-radius: 10px; padding: 8px 4px; min-width: 72px; flex-shrink: 0;
            border: 2px solid var(--chip-border);
            cursor: pointer; transition: transform 0.15s, border-color 0.15s;
        }
        .seyun-chip:hover { transform: translateY(-2px); }
        .seyun-chip.current { border-color: var(--golden); box-shadow: 0 0 10px rgba(255,217,147,0.4); }
        .seyun-chip.active { border-color: var(--sky-deep); box-shadow: 0 0 10px rgba(91,155,213,0.4); }
        .seyun-year { font-size: 10px; color: var(--text-sub); margin-bottom: 4px; font-weight: 600; }
        .seyun-chars { display: flex; flex-direction: column; gap: 2px; margin-bottom: 3px; }
        .seyun-chars span { font-size: 16px; font-weight: 700; padding: 3px 5px; border-radius: 5px; width: 100%; text-align: center; box-sizing: border-box; }
        .seyun-god { font-size: 9px; color: var(--text-muted); }
        .seyun-twelve { font-size: 9px; color: var(--text-muted); }
        .seyun-chip.current .seyun-year { color: var(--golden); }

        /* 월운 섹션 */
        .wolun-section { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(91,155,213,0.15); }
        .wolun-title { color: var(--sky-deep) !important; margin-bottom: 10px !important; }
        .wolun-flow {
            display: flex; flex-wrap: nowrap; gap: 8px;
            overflow-x: auto; -webkit-overflow-scrolling: touch;
            scrollbar-width: thin; padding: 2px 2px 4px 2px;
        }
        .wolun-chip {
            display: flex; flex-direction: column; align-items: center;
            background: var(--chip-bg);
            backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
            border-radius: 10px; padding: 8px 4px; min-width: 64px; flex-shrink: 0;
            border: 2px solid var(--chip-border);
        }
        .wolun-month { font-size: 10px; color: var(--text-sub); margin-bottom: 4px; font-weight: 600; }
        .wolun-chars { display: flex; flex-direction: column; gap: 2px; margin-bottom: 3px; }
        .wolun-chars span { font-size: 16px; font-weight: 700; padding: 3px 5px; border-radius: 5px; width: 100%; text-align: center; box-sizing: border-box; }
        .wolun-god { font-size: 9px; color: var(--text-muted); }
        .wolun-twelve { font-size: 9px; color: var(--text-muted); }

        /* ===== 반응형 ===== */
        @media (max-width: 767px) {
            body { padding: 0; align-items: flex-start; }
            .app-card {
                border-radius: 0;
                min-height: 100vh;
                min-height: 100dvh;
                padding: 32px 20px;
                /* [#428] iOS safe-area-inset-top 만큼 본문 시작 위치를 GNB(.global-header) 아래로 밀어줌 */
                padding-top: calc(32px + env(safe-area-inset-top, 0px));
            }
            .input-header {
                margin: -32px -20px 16px;
                /* [#428] .app-card padding-top 가산 분 만큼 추가로 끌어올려 input-header 빈 영역 회귀 차단 */
                margin-top: calc(-32px - env(safe-area-inset-top, 0px));
                padding: 8px 16px 0;
                top: 0;
                border-radius: 0;
                background: transparent;
                backdrop-filter: none;
                -webkit-backdrop-filter: none;
            }

            /* 인트로: 배경 위 텍스트 */
            body.intro-active { padding: 24px 16px; align-items: center; }
            /* [#428f] #428d 정정 — body padding-top env 가산이 align-items: center 계산을 깨뜨려 viewport 하단에 흰 띠 노출됨.
               body padding은 이전 상태로 복원하고, .app-card padding-top에 env 가산해 본문(로고·태그라인)만 status bar 아래로 밀어줌. */
            body.intro-active .app-card {
                min-height: auto;
                padding: 40px 24px;
                padding-top: calc(40px + env(safe-area-inset-top, 0px));
                background: none; border: none; box-shadow: none;
                backdrop-filter: none; -webkit-backdrop-filter: none;
            }

            /* [#449] 온보딩 viewport 정렬 누락 fix — body.onboarding-active에 align-items·min-height 처리 부재로
               콘텐츠 상단 쏠림 + 하단 빈 공간 노출되던 결함. 자매 body.intro-active 패턴 답습. */
            body.onboarding-active { align-items: center; }
            body.onboarding-active .app-card {
                min-height: auto;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }

            /* 인트로 폰트 크기 */
            #section-intro h1 { font-size: 48px; font-weight: 900; letter-spacing: 8px; }
            #section-intro.active { min-height: 65vh; }
            #section-intro .intro-text-group { margin-top: 5vh; }
            #section-intro .btn { margin-bottom: 2vh; }
            .tagline { font-size: 15px; font-weight: 400; line-height: 1.8; margin-bottom: 0; letter-spacing: 1px; }
            .tagline br + br { display: block; content: ''; margin-top: 8px; }

            /* 입력 화면 폰트 크기 */
            h2 { font-size: 20px; }
            .field-label { font-size: 15px; }
            .field-input { font-size: 16px; }
            .field-hint { font-size: 13px; }
            .btn { font-size: 17px; }

            .pillar-grid { gap: 6px; }
            .pillar-col .stem, .pillar-col .branch { font-size: 22px; padding: 7px 0; }
            .pillar-col .pillar-chars { padding: 4px; }
            .seyun-flow { gap: 5px; }
            .wolun-flow { gap: 5px; }
            /* 모바일 네비바: 확실한 2단 구조 */
            .result-nav-bar { padding: 10px 12px; }
            .nav-group-left, .nav-group-right { gap: 8px; }
            .nav-group-center {
                padding-top: 10px; margin-top: 8px;
                border-top: 1px solid var(--nav-border);
                gap: 5px; overflow-x: visible;
            }
            .result-nav-bar button {
                font-size: 14px; padding: 10px 18px;
                min-height: 42px; border-radius: 10px;
            }
            .result-nav-bar .nav-group-center button {
                flex: 1; padding: 10px 4px; text-align: center;
            }
            .result-nav-bar .nav-back-btn {
                font-size: 22px; padding: 6px 16px; min-height: 42px;
            }
            .result-nav-bar .nav-share-btn {
                font-size: 14px; padding: 10px 18px; min-height: 42px;
            }
            .nav-auth-btn:not(.logged-in) { font-size: 14px !important; padding: 10px 18px !important; }
            .result-nav-bar .nav-auth-btn { order: -1; }
            .result-nav-bar .nav-auth-btn.logged-in {
                background: none !important; border-radius: 0 !important;
                padding: 8px 2px !important; min-height: auto !important;
                font-size: 13px !important; color: var(--text-muted) !important;
                font-weight: 400 !important; text-decoration: underline;
                white-space: nowrap !important;
            }
            /* [#471] iPhone PWA safe-area-inset-top env 가산 누락 fix.
               모바일 분기 절대값(142px)이 main 분기 calc(156px + env) override.
               .chart-zoom-bar는 env 가산이라 iPhone 14 PWA(env≈47px)에서 top 127px → 하단 159px.
               hero 142px(env 없음)와 충돌 → 줌 슬라이더 영역에 "현재 고도" 라벨 겹침.
               자매 #428~#428g 6축 매트릭스 패턴 재발. */
            .result-hero { padding-top: calc(142px + env(safe-area-inset-top, 0px)); }
            .chart-zoom-bar { top: calc(80px + env(safe-area-inset-top, 0px)); }
            .altitude-number { font-size: 72px; }
            .altitude-unit { font-size: 32px; }
            .result-hero-level { font-size: 18px; }
        }
        @media (min-width: 768px) and (max-width: 1023px) {
            .app-card { max-width: 540px; }
            .altitude-number { font-size: 84px; }
            .result-content { max-width: 540px; }
        }
        @media (min-width: 1024px) {
            .app-card { max-width: 640px; padding: 52px 40px; }
            #section-intro h1 { font-size: 120px; font-weight: 900; letter-spacing: 20px; }
            #section-intro.active { min-height: 55vh; }
            #section-intro .btn { max-width: 360px; font-size: 18px; }
            .tagline { font-size: 24px; font-weight: 400; line-height: 1.9; margin-bottom: 40px; letter-spacing: 5px; }
            h2 { font-size: 20px; }
            .field-label { font-size: 14px; }
            .field-input, .field-select { padding: 16px 18px; font-size: 16px; }
            .btn { padding: 18px; font-size: 17px; }
            .gender-btn { padding: 14px; font-size: 15px; }
            .result-content { max-width: 720px; padding: 0 40px 80px; }
            /* [#416 9차] hero 비례 크기 채택 — 운영자 "절대값 말고 비율 크기로". 1024+ 폰트·padding·
               margin을 vh 기반 clamp(min, Nvh, max)로 변경 → 짧은 viewport(700~850) 자동 축소,
               큰 viewport(1440+) 적정 확대. 기준점 vh=1080(데스크탑 표준)에서 6차 절대값 거의 동일.
               clamp min = 시니어 가독성 하한(56px+), max = 대화면 비대 방지.
               • padding-top: vh=1080에서 ~103(≈104) / 700에서 70(클램프) / 1440에서 130(클램프)
               • altitude:    vh=1080에서 ~97(≈100)  / 700에서 63 / 1440에서 110(클램프)
               • unit:        vh=1080에서 ~40       / 700에서 26 / 1440에서 44(클램프)
               • level:       vh=1080에서 ~22       / 700에서 16(클램프) / 1440에서 26(클램프)
               • userinfo:    vh=1080에서 ~15       / 700에서 13(클램프) / 1440에서 17(클램프)
               → hero 블록 총 높이가 viewport에 비례해 자동 스케일 → chart top padding 상수 150으로 단순화 */
            .chart-zoom-bar { top: calc(64px + env(safe-area-inset-top, 0px)); padding: 4px 12px; }
            /* [#454] zoom-bar(top 64 + safe-area, 높이 ~32px)와 "현재 고도" 라벨 영역 겹침 fix.
               기존 clamp(70, 9.5vh, 130)은 vh≈1052에서 100px → zoom-bar 하단(~96px)과 충돌.
               min 110px·max 150px로 상향해 zoom-bar 하단보다 항상 ≥10px 아래로 시작 */
            .result-hero { padding-top: clamp(110px, 11vh, 150px); }
            .altitude-number { font-size: clamp(56px, 9vh, 110px); }
            .altitude-unit { font-size: clamp(24px, 3.7vh, 44px); }
            .result-hero-altitude { margin-bottom: clamp(2px, 0.4vh, 6px); }
            .result-hero-label { font-size: clamp(11px, 1.3vh, 15px); margin-bottom: 2px; }
            .result-hero-level { font-size: clamp(16px, 2vh, 26px); margin-bottom: 2px; }
            .result-hero-userinfo { font-size: clamp(13px, 1.4vh, 17px); }
            .result-hero .legend-dark { margin-top: clamp(6px, 0.8vh, 12px); font-size: clamp(11px, 1.2vh, 14px); }
            /* [#416 5차] chart-card-wide bottom:180px 변경을 되돌림 — canvas가 viewport 끝까지 덮어
               CTA 위 영역에 body 배경이 노출되던 결함 해소. canvas-to-CTA "dead space" 인상은 본질적으로
               데이터 Y축 위치 이슈라 padding으로 해결 불가 — chart-wrap-dark padding-bottom(기본 88)을
               하향(1024+ 한정 48)해 plot area 하단이 CTA 직상까지 확장 → 곡선 시각 영역 ↑ */
            body.flow-ridge .glass-card.chart-card-wide .chart-wrap-dark,
            body.flow-compat-ridge .glass-card.chart-card-wide .chart-wrap-dark {
                padding-bottom: 48px;
            }
            .glass-card { padding: 36px; margin-bottom: 64px; }
            .glass-card p { font-size: 17px; line-height: 2.0; }
            .glass-card-title { font-size: 21px; }
            .glass-card-header { padding-bottom: 20px; margin-bottom: 24px; }
            .glass-card h4 { font-size: 18px; }
            .daeun-chip { padding: 10px 14px; }
            .daeun-chars { font-size: 16px; }
            .daeun-age { font-size: 12px; }
        }

        /* ===== 로그인 모달 ===== */
        .login-modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            /* [#369l] 모달 backdrop 강화 — 차감 게이트 표시 시 차트·CTA 등 뒤 요소가 흐릿하게 보여 화면 깨져보이는 결함 fix */
            background: rgba(0,0,0,0.85);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        /* [#369l] 모달 표시 시 능선 CTA(z-index:10) 가림 — 차트 카드(position:fixed)는 backdrop으로 어둡게 처리되지만 능선 CTA fixed bottom은 별도 가림 필요 */
        body:has(#sajuGateModal[style*="display: flex"]) .flow-cta-bar,
        body:has(.login-modal-overlay[style*="display: flex"]) .flow-cta-bar {
            display: none !important;
        }
        .login-modal-card {
            background: var(--modal-bg);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
            border: 1px solid var(--modal-border);
            border-radius: 20px;
            padding: 36px 28px;
            max-width: 360px;
            width: 100%;
            text-align: center;
        }
        .login-modal-title {
            font-size: 20px;
            font-weight: 700;
            color: var(--modal-title-color);
            margin-bottom: 10px;
        }
        .login-modal-desc {
            font-size: 14px;
            color: var(--modal-desc-color);
            line-height: 1.6;
            margin-bottom: 28px;
        }
        .login-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            width: 100%;
            padding: 14px 20px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            margin-bottom: 10px;
            transition: opacity 0.2s;
        }
        .login-btn:hover { opacity: 0.85; }
        .login-btn-icon {
            width: 22px;
            height: 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 800;
            font-size: 14px;
            border-radius: 6px;
        }
        .login-btn-google {
            background: #fff;
            color: #333;
        }
        .login-btn-google .login-btn-icon {
            background: #4285F4;
            color: #fff;
        }
        .login-modal-skip {
            background: none;
            border: none;
            color: var(--modal-skip-color);
            font-size: 14px;
            cursor: pointer;
            margin-top: 12px;
            padding: 8px 16px;
        }
        .login-modal-skip:hover { color: rgba(255,255,255,0.7); }

        /* nav bar 인증 버튼 */
        .nav-auth-btn {
            font-size: 12px;
            padding: 6px 10px;
            white-space: nowrap;
        }
        .nav-auth-btn:not(.logged-in) {
            background: var(--nav-share-bg);
            color: var(--nav-share-text);
            font-weight: 600;
            font-size: 13px;
            padding: 7px 14px;
        }
        .nav-auth-btn.logged-in {
            color: var(--sunrise-gold);
            font-weight: 600;
            font-size: 11px;
        }

        /* 내 기록 - 로그인 상태 헤더 */
        .my-records-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 8px;
        }
        .my-records-user-info {
            display: flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            color: var(--myrecords-user-text);
        }
        #myRecordsUserName {
            font-weight: 500;
            color: var(--myrecords-username);
        }
        .my-records-separator {
            color: var(--myrecords-separator);
        }
        .my-records-logout-btn {
            background: none;
            border: none;
            color: var(--myrecords-logout);
            font-family: inherit;
            font-size: 12px;
            cursor: pointer;
            padding: 0;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        .my-records-logout-btn:active {
            color: rgba(180,120,60,1);
        }

        /* 내 기록 - 비로그인 로그인 유도 */
        .my-records-login-hint {
            color: var(--myrecords-hint);
            font-size: 13px;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        .my-records-login-btn {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--myrecords-login-bg);
            border: 1px solid var(--myrecords-login-border);
            color: var(--myrecords-login-text);
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            padding: 9px 20px;
            border-radius: 20px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .my-records-login-btn:active {
            background: rgba(180,120,60,0.25);
        }

        /* 저장 유도 플로팅 배너 */
        .save-banner {
            position: fixed;
            bottom: 24px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20;
            width: calc(100% - 32px);
            max-width: 420px;
            background: var(--banner-bg);
            backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
            border: 1px solid var(--banner-border);
            border-radius: 16px;
            padding: 18px 20px;
            text-align: center;
            animation: saveBannerSlideUp 0.4s ease-out;
        }
        @keyframes saveBannerSlideUp {
            from { opacity: 0; transform: translateX(-50%) translateY(30px); }
            to   { opacity: 1; transform: translateX(-50%) translateY(0); }
        }
        .save-banner-close {
            position: absolute;
            top: 10px; right: 14px;
            background: none; border: none;
            color: var(--banner-close-color);
            font-size: 20px; cursor: pointer;
            line-height: 1;
        }
        .save-banner-text {
            color: var(--banner-text-color);
            font-size: 15px;
            line-height: 1.5;
            margin-bottom: 14px;
        }
        .save-banner-btn {
            display: inline-block;
            background: #fff;
            color: #333;
            font-family: inherit;
            font-size: 15px;
            font-weight: 600;
            padding: 10px 28px;
            border: none;
            border-radius: 24px;
            cursor: pointer;
            transition: background 0.2s;
        }
        .save-banner-btn:active {
            background: #e8e8e8;
        }

        /* ===== 광고 컨테이너 ===== */
        .ad-container {
            margin: 16px 0;
            border-radius: 16px;
            overflow: hidden;
            display: none;
        }
        .ad-container.ad-loaded {
            display: block;
        }

        /* ===== 입력 헤더 (로고 + 탭) ===== */
        .input-header {
            position: sticky;
            top: -40px;
            z-index: 5;
            margin: -40px -24px 20px;
            padding: 40px 24px 0;
            border-radius: 20px 20px 0 0;
            background: var(--bg-card);
            text-align: center;
        }
        .input-header .input-mode-control {
            margin-bottom: 0;
        }

        /* ===== 입력 모드 세그먼트 컨트롤 ===== */
        .input-mode-control {
            display: flex;
            border: 1.5px solid var(--segment-border);
            border-radius: 12px;
            background: var(--segment-bg);
            padding: 3px;
            margin-bottom: 16px;
        }
        .input-mode-tab {
            flex: 1;
            text-align: center;
            padding: 10px 0;
            cursor: pointer;
            font-size: 14px;
            font-weight: 500;
            font-family: inherit;
            color: var(--segment-tab-text);
            background: none;
            border: none;
            border-radius: 9px;
            transition: all 0.2s;
            min-height: 44px;
            -webkit-tap-highlight-color: transparent;
        }
        .input-mode-tab.active {
            background: var(--segment-tab-active-bg);
            color: var(--segment-tab-active-text);
            font-weight: 700;
            box-shadow: var(--segment-tab-active-shadow);
        }
        .input-mode-tab:active {
            transform: scale(0.97);
        }

        /* 모드별 패널 */
        .input-mode-panel {
            animation: fadeInPanel 0.2s ease;
        }
        @keyframes fadeInPanel {
            from { opacity: 0; transform: translateY(-4px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 리스트 스타일 (유명인 / 저장된 기록) */
        .record-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }
        .record-list-empty {
            text-align: center;
            padding: 40px 12px;
            color: var(--text-sub);
            font-size: 14px;
        }
        .record-list-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 12px;
            cursor: pointer;
            transition: background 0.15s, border-color 0.15s, transform 0.1s;
            min-height: 52px;
        }
        .record-list-item:hover {
            background: var(--card-hover-bg);
            border-color: var(--card-hover-border);
        }
        .record-list-item:active {
            transform: scale(0.98);
        }
        .record-list-item .record-content {
            flex: 1;
            min-width: 0;
        }
        .record-list-item .record-name {
            display: block;
            font-weight: 700;
            font-size: 17px;
            color: var(--text-main);
            margin-bottom: 3px;
        }
        .record-list-item .record-detail {
            font-size: 13px;
            color: var(--text-sub);
            line-height: 1.4;
        }
        .record-list-item .record-arrow {
            color: var(--text-muted);
            font-size: 18px;
            flex-shrink: 0;
        }

        #panelMyRecords {
            padding: 0;
        }
        #panelMyRecords .field-label {
            color: var(--t-strong);
            font-weight: 700;
            margin-bottom: 0;
        }
        #myRecordsLoggedOut .field-label {
            color: var(--t-strong);
            font-weight: 700;
        }
        #myRecordsLoggedOut {
            background: var(--myrecords-bg);
            border: 1px solid var(--myrecords-border);
            border-radius: 12px;
            padding: 12px 16px;
        }

        #panelCeleb {
            padding: 0;
        }

        /* 비우기 + 계산하기 버튼 행 */
        .input-btn-row {
            display: flex;
            gap: 10px;
            margin-bottom: 10px;
        }
        .input-btn-row .btn.btn-clear {
            width: auto;
            flex: none;
            padding: 14px 20px;
            font-size: 15px;
        }
        .input-btn-row .btn.btn-primary {
            width: auto;
            flex: 1;
        }
        .legend-dark .legend-ridge-color { color: var(--legend-ridge); }
        .legend-dark .legend-horizon-color { color: var(--legend-horizon); }
        .legend-dark .legend-partner-color { color: var(--legend-partner); }

        /* ===== 개인정보처리방침 링크 ===== */
        .privacy-link {
            display: block;
            margin-top: 24px;
            font-size: 12px;
            color: var(--privacy-link-color);
            text-decoration: none;
            text-align: center;
        }
        .privacy-link:hover {
            color: rgba(80,70,60,0.6);
            text-decoration: underline;
        }

        /* 결제 모달 */
        .payment-modal-card {
            max-width: 380px;
        }
        .payment-price {
            font-size: 32px;
            font-weight: 700;
            color: var(--sunrise-peach, #e8a87c);
            margin: 16px 0 24px;
            text-align: center;
        }
        .payment-btn {
            background: linear-gradient(135deg, #e8a87c 0%, #d4845a 100%);
        }

        /* ── 맛보기 (비로그인 결과 제한) ── */
        .taste-blur {
            filter: blur(6px);
            -webkit-filter: blur(6px);
            user-select: none;
            pointer-events: none;
            color: var(--text-sub);
            margin-top: -4px;
        }
        .taste-section-overlay {
            text-align: center;
            padding: 20px 16px;
            margin-top: 8px;
            background: linear-gradient(180deg, transparent, rgba(15,20,35,0.06) 40%, rgba(15,20,35,0.12));
            border-radius: 12px;
        }
        .taste-section-overlay p {
            font-size: 14px;
            color: var(--text-sub);
            margin-bottom: 12px;
        }
        .taste-login-btn {
            display: inline-block;
            padding: 10px 28px;
            border: none;
            border-radius: 24px;
            background: linear-gradient(135deg, #5B9BD5 0%, #4A8BC2 100%);
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: transform 0.15s, box-shadow 0.15s;
        }
        .taste-login-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(91,155,213,0.35);
        }
        #tasteLoginCta {
            display: none;
            text-align: center;
            padding: 24px 16px;
            margin: 24px 0;
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 16px;
        }
        #tasteLoginCta h3 {
            font-size: 16px;
            font-weight: 700;
            color: var(--text-main);
            margin-bottom: 8px;
        }
        #tasteLoginCta p {
            font-size: 13px;
            color: var(--text-sub);
            margin-bottom: 16px;
        }

        /* 다크 모드 맛보기 */
        @media (prefers-color-scheme: dark) {
            .taste-section-overlay {
                background: linear-gradient(180deg, transparent, rgba(255,255,255,0.03) 40%, rgba(255,255,255,0.06));
            }
            .taste-section-overlay p {
                color: var(--text-sub);
            }
        }

        /* ── 입력 화면 로그인 안내 배너 ── */
        .login-hint-banner {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 14px;
            margin: 0 0 12px;
            background: linear-gradient(135deg, rgba(91,155,213,0.08), rgba(91,155,213,0.15));
            border: 1px solid rgba(91,155,213,0.2);
            border-radius: 12px;
            font-size: 13px;
            color: var(--text-sub);
        }
        .login-hint-banner span {
            flex: 1;
        }
        .login-hint-banner button {
            border: none;
            border-radius: 16px;
            padding: 5px 14px;
            font-size: 12px;
            font-weight: 600;
            cursor: pointer;
            background: var(--ridge);
            color: #fff;
        }
        .login-hint-close {
            background: transparent !important;
            color: var(--text-muted) !important;
            font-size: 16px !important;
            padding: 2px 6px !important;
        }

        /* ── 프로필 카드 ── */
        .profile-card {
            background: var(--card-bg);
            border: 1px solid var(--card-border);
            border-radius: 14px;
            padding: 16px;
            margin-bottom: 12px;
        }
        .profile-card-top {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        .profile-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            overflow: hidden;
            flex-shrink: 0;
            background: linear-gradient(135deg, #5B9BD5 0%, #4A8BC2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .profile-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .profile-avatar-fallback {
            color: #fff;
            font-size: 20px;
            font-weight: 700;
        }
        .profile-info {
            flex: 1;
            min-width: 0;
        }
        .profile-name {
            font-size: 15px;
            font-weight: 700;
            color: var(--text-main);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .profile-email {
            font-size: 12px;
            color: var(--text-muted);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .profile-intro {
            font-size: 13px;
            color: var(--text-sub);
            margin-top: 4px;
            line-height: 1.4;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        .profile-actions {
            display: flex;
            flex-direction: column;
            gap: 6px;
            align-items: flex-end;
            flex-shrink: 0;
        }
        .profile-edit-btn {
            border: none;
            background: transparent;
            color: var(--text-sub);
            font-size: 18px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 6px;
            transition: background 0.15s;
        }
        .profile-edit-btn:hover {
            background: rgba(91,155,213,0.1);
            color: var(--ridge);
        }

        /* 프로필 편집 모드 */
        .profile-card-edit {
            padding-top: 4px;
        }
        .profile-edit-field {
            margin-bottom: 10px;
        }
        .profile-edit-label {
            display: block;
            font-size: 12px;
            font-weight: 600;
            color: var(--text-sub);
            margin-bottom: 4px;
        }
        .profile-edit-input,
        .profile-edit-textarea {
            width: 100%;
            padding: 8px 10px;
            border: 1px solid var(--card-border);
            border-radius: 8px;
            background: transparent;
            color: var(--text-main);
            font-size: 14px;
            font-family: inherit;
            box-sizing: border-box;
            transition: border-color 0.15s;
        }
        .profile-edit-input:focus,
        .profile-edit-textarea:focus {
            outline: none;
            border-color: var(--ridge);
        }
        .profile-edit-textarea {
            resize: vertical;
            min-height: 40px;
        }
        .profile-edit-actions {
            display: flex;
            gap: 8px;
            margin-top: 8px;
        }
        .profile-save-btn {
            flex: 1;
            padding: 8px 0;
            border: none;
            border-radius: 8px;
            background: linear-gradient(135deg, #5B9BD5 0%, #4A8BC2 100%);
            color: #fff;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
        }
        .profile-cancel-btn {
            flex: 1;
            padding: 8px 0;
            border: 1px solid var(--card-border);
            border-radius: 8px;
            background: transparent;
            color: var(--text-sub);
            font-size: 14px;
            cursor: pointer;
        }
        .profile-edit-status {
            font-size: 12px;
            color: var(--text-sub);
            margin-top: 6px;
            text-align: center;
        }
        /* SNS 아이콘 (프로필 카드 + 모달) */
        .profile-sns-icons {
            display: flex;
            gap: 6px;
            margin-top: 4px;
        }
        .sns-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            background: rgba(91,155,213,0.1);
            color: var(--text-sub);
            text-decoration: none;
            transition: background 0.15s, color 0.15s;
        }
        .sns-btn:hover {
            background: rgba(91,155,213,0.25);
            color: var(--ridge);
        }
        .sns-instagram:hover { color: #E1306C; background: rgba(225,48,108,0.1); }
        .sns-homepage:hover { color: #4A8BC2; }
        .sns-facebook:hover { color: #1877F2; background: rgba(24,119,242,0.1); }
        .sns-icon {
            vertical-align: middle;
            margin-right: 4px;
        }
        .profile-edit-label {
            display: flex !important;
            align-items: center;
            gap: 4px;
        }

        /* 프로필 카드 클릭 힌트 */
        .profile-card { cursor: pointer; transition: background 0.15s; }
        .profile-card:hover { background: var(--card-hover-bg); }
        .profile-edit-arrow {
            font-size: 20px;
            color: var(--text-muted);
            flex-shrink: 0;
            margin-left: 4px;
        }

        /* ── 프로필 편집 모달 ── */
        .profile-modal-overlay {
            position: fixed;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 2000;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(0,0,0,0.5);
            backdrop-filter: blur(4px);
            -webkit-backdrop-filter: blur(4px);
        }
        .profile-modal-card {
            width: 90%;
            max-width: 400px;
            max-height: 85vh;
            overflow-y: auto;
            background: var(--app-card-bg, #fff);
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 16px 48px rgba(0,0,0,0.2);
        }
        @media (prefers-color-scheme: dark) {
            .profile-modal-card {
                background: #1e2030;
                box-shadow: 0 16px 48px rgba(0,0,0,0.5);
            }
        }
        .profile-modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            font-size: 18px;
            font-weight: 700;
            color: var(--text-main);
        }
        .profile-modal-close {
            border: none;
            background: transparent;
            font-size: 24px;
            color: var(--text-muted);
            cursor: pointer;
            padding: 0 4px;
        }
        /* 프로필 사진 편집 */
        .profile-modal-photo {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        .profile-modal-avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            background: linear-gradient(135deg, #5B9BD5, #4A8BC2);
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .profile-modal-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .profile-modal-avatar-fallback {
            color: #fff;
            font-size: 32px;
            font-weight: 700;
        }
        .profile-modal-avatar-overlay {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: rgba(0,0,0,0.55);
            color: #fff;
            font-size: 11px;
            text-align: center;
            padding: 4px 0;
            opacity: 0;
            transition: opacity 0.15s;
        }
        .profile-modal-avatar:hover .profile-modal-avatar-overlay {
            opacity: 1;
        }
        .profile-modal-actions {
            display: flex;
            gap: 8px;
            margin-top: 16px;
        }

/* ============================================
   스텝 입력 방식
   ============================================ */
.step-container {
    position: relative;
    min-height: 320px;
}
.step {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 20px 32px;
    min-height: 300px;
    animation: stepFadeIn 0.3s ease;
}
.step.active {
    display: flex;
}
@keyframes stepFadeIn {
    from { opacity: 0; transform: translateX(30px); }
    to { opacity: 1; transform: translateX(0); }
}
.step-question {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    color: var(--t-strongest);
    margin-bottom: 32px;
    line-height: 1.4;
}
.step-input {
    font-size: 18px !important;
    padding: 16px 20px !important;
    text-align: center;
    max-width: 320px;
    width: 100%;
}
.step-select {
    font-size: 16px !important;
    padding: 12px 16px !important;
    text-align: center;
    max-width: 320px;
    width: 100%;
    margin-bottom: 12px;
}
.step-next {
    margin-top: 24px;
    min-width: 200px;
}
.step-error {
    color: var(--c-danger);
    font-size: 14px;
    margin-top: 8px;
    min-height: 20px;
    text-align: center;
}
.step-hint {
    font-size: 14px;
    color: var(--t-muted);
    margin-top: 8px;
    text-align: center;
}
.step-btn-row {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    justify-content: center;
}
.step-skip {
    min-width: 120px;
}

/* [B10·B11 #353] 4분할 시간 추정 도우미 + 출생시간 찾는 방법 링크 */
.step-helper-link {
    display: inline-block;
    margin-top: 12px;
    font-size: 16px;
    color: var(--c-accent, #FFD993);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.step-helper-link:hover { opacity: 0.85; }

.step-time-segments {
    margin-top: 20px;
    width: 100%;
    max-width: 360px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.step-time-segments-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 4px;
    color: var(--t-strong, #fff);
}
.time-segment-btn {
    width: 100%;
    min-height: 56px;
    padding: 12px 16px;
    background: var(--bg-card, rgba(255,255,255,0.08));
    border: 1.5px solid var(--c-border, rgba(255,255,255,0.15));
    border-radius: 12px;
    color: var(--t-strong, #fff);
    cursor: pointer;
    text-align: left;
    transition: background 150ms, border-color 150ms;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.time-segment-btn:hover {
    background: var(--bg-card-hover, rgba(255,255,255,0.12));
    border-color: var(--c-accent, #FFD993);
}
.time-segment-label {
    font-size: 18px;
    font-weight: 600;
}
.time-segment-hint {
    font-size: 15px;
    opacity: 0.8;
}
.time-segment-btn-skip {
    margin-top: 4px;
    background: transparent;
    border-style: dashed;
    align-items: center;
    text-align: center;
}
.time-segment-btn-skip .time-segment-label {
    font-size: 16px;
    opacity: 0.85;
}

/* [B11 #353] 출생시간 찾는 방법 모달 콘텐츠 */
.bt-finding-section { margin: 16px 0; text-align: left; }
.bt-finding-section-title {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--t-strong, #fff);
}
.bt-finding-text {
    font-size: 16px;
    line-height: 1.6;
    margin: 6px 0;
    color: var(--t-body, rgba(255,255,255,0.9));
}
.bt-finding-list {
    margin: 6px 0 6px 22px;
    padding: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--t-body, rgba(255,255,255,0.9));
}
.bt-finding-step {
    display: flex;
    gap: 12px;
    margin-top: 12px;
    padding: 12px;
    background: var(--bg-card, rgba(255,255,255,0.05));
    border-radius: 10px;
}
.bt-finding-step-num {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--c-accent, #FFD993);
    color: var(--c-primary, #1B2A4A);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
}
.bt-finding-step-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--t-strong, #fff);
}
.bt-finding-step-body p {
    font-size: 15px;
    line-height: 1.55;
    margin: 4px 0;
    color: var(--t-body, rgba(255,255,255,0.85));
}
.bt-finding-step-tip {
    font-size: 14px !important;
    opacity: 0.75;
    font-style: italic;
}

/* [B12 #353] 시주 컬럼 ? 아이콘 + 정확도 표 */
.pillars-help-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    border-radius: 50%;
    background: var(--c-accent, #FFD993);
    color: var(--c-primary, #1B2A4A);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    vertical-align: middle;
}
.pillars-help-icon:hover { opacity: 0.85; }
.bt-accuracy-table {
    width: 100%;
    margin: 8px 0 12px;
    border-collapse: collapse;
    font-size: 15px;
}
.bt-accuracy-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--c-border, rgba(255,255,255,0.1));
    color: var(--t-body, rgba(255,255,255,0.9));
}
.bt-accuracy-table td:last-child {
    text-align: right;
    font-weight: 700;
    color: var(--c-accent, #FFD993);
}

.step-back {
    position: absolute;
    left: 8px;
    top: 12px;
    background: none;
    border: none;
    font-size: 22px;
    color: var(--t-sub);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.15s;
}
.step-back:hover {
    background: var(--bg-card-alt, rgba(0,0,0,0.05));
}
.step-progress {
    height: 3px;
    background: var(--b-default);
    border-radius: 2px;
    overflow: hidden;
}
.step-progress-fill {
    height: 100%;
    background: var(--c-accent);
    border-radius: 2px;
    transition: width 0.3s ease;
    width: 20%;
}
/* [B4 #348] 단계 진행 row — 바 + 텍스트 */
.step-progress-row {
    display: flex; flex-direction: column; gap: 6px;
    margin-bottom: 16px;
}
.step-progress-text {
    font-size: 15px;
    color: var(--t-sub);
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: right;
}
.step-gender-row {
    display: flex;
    gap: 16px;
    justify-content: center;
}
.step-gender-btn {
    width: 120px;
    height: 120px;
    border-radius: 16px;
    border: 2px solid var(--b-default);
    background: var(--bg-card);
    color: var(--t-strong);
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.step-gender-btn:hover {
    border-color: var(--c-accent);
    background: var(--bg-section-2);
}
.step-gender-btn.selected {
    border-color: var(--c-accent);
    background: var(--c-accent);
    color: var(--c-primary);
}

/* 모바일 스텝 */
@media (max-width: 767px) {
    .step-question { font-size: 22px; }
    .step-gender-btn { width: 100px; height: 100px; font-size: 22px; }
    .step { padding: 40px 16px 24px; }
}

/* ===== 하단 탭바 ===== */
/* ===== 하단 탭바 (토스 스타일) ===== */
.bottom-tab-bar {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex; justify-content: space-around; align-items: center;
    background: var(--bg-card);
    border-top: 1px solid var(--b-default);
    z-index: 100;
    height: 56px;
    /* iOS safe-area + 추가 여백 16px — 참고 앱(토스) 수준 */
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
    box-shadow: 0 -1px 3px rgba(0,0,0,0.04);
}
.tab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; height: 100%; padding: 0; background: none; border: none;
    color: #999; font-size: 10px; font-family: inherit; cursor: pointer;
    transition: color 0.15s; -webkit-tap-highlight-color: transparent;
    min-width: 0;
}
.tab-icon-svg { display: block; width: 22px; height: 22px; flex-shrink: 0; stroke-linecap: round; stroke-linejoin: round; }
.tab-item .tab-label { font-weight: 500; letter-spacing: -0.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab-item.active { color: #222; }
.tab-item.active .tab-icon-svg { stroke-width: 2.2; }
.tab-item.active .tab-label { font-weight: 700; }
/* [#363] 하단 탭바 제거 — `.app-card` 하단 여백 단순화 (탭바 공간 불필요)
   기존: padding-bottom 약 100px (탭바 56px + safe-area + 32px)
   변경: padding-bottom 24px + safe-area (시각적 호흡감만 유지) */
body:not(.intro-active):not(.onboarding-active) .app-card { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }

/* [#363] 하단 탭바 DOM은 #363에서 제거됨. 아래 CSS는 미사용 상태이나 향후 복원·롤백 대비 보존 */
@media (prefers-color-scheme: dark) {
    .bottom-tab-bar { background: #0F1724; border-top-color: rgba(255,255,255,0.06); box-shadow: 0 -1px 3px rgba(0,0,0,0.3); }
    .tab-item { color: #666; }
    .tab-item.active { color: #eee; }
}

/* ===== 홈 화면 ===== */
.home-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0 12px; margin-bottom: 8px;
}
.home-logo { font-size: 22px; font-weight: 800; color: var(--c-primary); }
@media (prefers-color-scheme: dark) { .home-logo { color: var(--c-accent); } }

.home-profile-btn {
    display: flex; align-items: center; gap: 6px;
    background: none; border: none; cursor: pointer; color: var(--t-sub); font-family: inherit; font-size: 13px;
}
.home-profile-btn img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }

/* 홈 카드 공통 */
.home-card {
    background: var(--bg-card); border-radius: 16px;
    padding: 20px; margin-bottom: 12px; cursor: pointer;
    box-shadow: var(--shadow-1); transition: transform 0.15s, box-shadow 0.15s;
    display: flex; align-items: center; gap: 14px;
}
.home-card:active { transform: scale(0.98); }
.home-card-icon { font-size: 28px; flex-shrink: 0; width: 44px; text-align: center; }
.home-card-body { flex: 1; min-width: 0; }
.home-card-title { font-size: 15px; font-weight: 700; color: var(--t-strong); margin-bottom: 2px; }
.home-card-desc { font-size: 13px; color: var(--t-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-card-arrow { color: var(--t-muted); font-size: 16px; flex-shrink: 0; }

/* 고도 카드 (특별 스타일) */
/* 고도 카드 (분석 완료 시) */
.home-card-altitude {
    flex-direction: column; align-items: stretch; gap: 4px;
    background: linear-gradient(135deg, var(--c-primary), #2a3f6a);
    color: #fff; padding: 16px 20px;
}
.home-card-altitude {
    position: relative;
    overflow: hidden;
    min-height: 140px;
    /* [#438] 제목을 좌상단에 배치하도록 정렬 변경 (기존 center → flex-start) */
    justify-content: flex-start;
    align-items: flex-start;
}
.home-card-altitude > *:not(.home-card-ridge-bg):not(.home-card-ridge-pulse) { position: relative; z-index: 1; }
.home-card-ridge-title {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    letter-spacing: -0.2px;
    /* [#438] 좌상단 제목 위치 — 카드 패딩 16/20 안쪽 */
    text-align: left;
}
.home-card-ridge-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.32;
    pointer-events: none;
    z-index: 0;
}
/* [#438] 올해 위치 박동하는 해 — 능선 곡선 위 현재 나이 지점에 절대 위치한 점.
   _renderHomeMiniRidge에서 left/top px 계산 후 .home-card-ridge-pulse 요소에 인라인 스타일로 주입. */
.home-card-ridge-pulse {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #FFD993;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.9);
    z-index: 0;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: homeRidgePulse 1800ms ease-in-out infinite;
    /* 카드 cascade 이후 시작되도록 지연 (#438 task 7 정합) */
    animation-delay: 900ms;
    opacity: 0.95;
}
.home-card-ridge-pulse::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 217, 147, 0.55) 0%, rgba(255, 217, 147, 0) 70%);
    animation: homeRidgePulseGlow 1800ms ease-in-out infinite;
    animation-delay: 900ms;
}
@keyframes homeRidgePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.35); }
}
@keyframes homeRidgePulseGlow {
    0%, 100% { opacity: 0.55; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.55); }
}
@media (prefers-reduced-motion: reduce) {
    .home-card-ridge-pulse,
    .home-card-ridge-pulse::before { animation: none; }
}

/* [#444] 홈 진입 시 날씨 아이콘 순차 등장 — 오늘 → 이달 → 올해 → (능선 박동은 .home-card-ridge-pulse animation-delay 900ms로 이어짐).
   [#444 정정] body.home-active 트리거는 placeholder 이모지가 cascade로 등장하고 forwards로 종료 → API 응답 후
   _render에서 최종 이모지 갱신해도 animation 상태가 이미 끝나 새 이모지에 애니메이션 효과 안 보였던 결함 fix.
   변경: cascade를 .cascade-in class 명시 트리거로 변경 → JS가 _render 응답 후 호출 → 최종 이모지에 애니메이션 적용. */
.home-tile-emoji.cascade-in {
    opacity: 0;
    animation: homeWeatherCascadeIn 600ms cubic-bezier(0.34, 1.32, 0.64, 1) forwards;
}
#homeDailyEmoji.cascade-in { animation-delay: 0ms; }
#homeMonthlyEmoji.cascade-in { animation-delay: 300ms; }
#homeYearlyEmoji.cascade-in { animation-delay: 600ms; }
@keyframes homeWeatherCascadeIn {
    0% { opacity: 0; transform: scale(0.55); }
    60% { opacity: 1; transform: scale(1.12); }
    100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .home-tile-emoji.cascade-in {
        opacity: 1;
        animation: none;
    }
}

/* ─────────────────────────────────────────────────────────
   #409 홈 시간 타일 — 날씨 카드 메타포 (오늘 풀와이드 + 이달·올해 2-up)
   기획: 03.설계/홈화면_시간카드_리디자인_기능정의서.md
   위키: [[홈화면_시간카드_시각위계_가이드]]
   원칙: 등급 + 일러스트(이모지) + 시간 라벨. 3축·코멘트는 풀이 페이지로 이동
   ───────────────────────────────────────────────────────── */

/* [#459] 본인 사주 미입력(empty/others-only) 상태 시 홈 단순화 — "내 인생고도 보기" CTA만 표시.
   오늘/이달/올해 시간 타일 + 궁합/타인 사주 봐주기 배너 모두 숨김.
   운영자 합의 2026-05-28: 본인 사주 등록을 우선 흐름으로. 다른 인물 데이터는 보존(GNB 프로필 메뉴에서 접근). */
body.home-empty-state .home-tile-daily,
body.home-empty-state .home-tile-grid,
body.home-empty-state .home-banner-compat,
body.home-empty-state .home-banner-other {
    display: none !important;
}

/* 2-up 그리드 컨테이너 (이달·올해) */
.home-tile-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
@media (max-width: 320px) {
    /* 안전망: 매우 좁은 화면에서 1단 stack */
    .home-tile-grid { grid-template-columns: 1fr; }
}

/* 공통 타일 — 풀와이드(오늘), 2-up(이달/올해) 모두 동일 */
.home-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 20px;
    padding: 20px 16px;
    min-height: 170px;
    margin-bottom: 12px;
    cursor: pointer;
    color: #fff;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: transform 120ms ease, box-shadow 120ms ease;
    /* 등급 기반 그라데이션은 data-grade-bucket으로 결정 (기본=mid) */
    background: linear-gradient(135deg, #6FA8DC, #4A78B8);
}
/* 그리드 안의 타일은 자체 gap 사용 — 마진 0 */
.home-tile-grid .home-tile { margin-bottom: 0; }
.home-tile:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); }
.home-tile:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }

.home-tile-emoji {
    /* [#411] 텍스트 이모지로 표시 + twemoji.js가 페이지 로드 후 <img> 자동 변환
       SVG fetch 실패 시에도 OS 시스템 이모지로 fallback 보장 */
    font-size: 56px;
    line-height: 1;
    width: auto;
    height: auto;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    text-align: center;
}
/* twemoji.parse()로 변환된 <img> 태그 크기 통일 */
.home-tile-emoji img.emoji {
    width: 64px;
    height: 64px;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
}
/* [#448] Meteocons 애니메이션 SVG — 해상도 무한 확대 + SMIL 애니메이션 내장.
   width를 80px로 키워 시니어 가독성 강화 (기존 Twemoji 64px 대비 +25%).
   filter drop-shadow는 .home-tile-emoji에서 이미 적용 — 중복 회피.
   [#448 hotfix] <img>는 SW activate 전 정적 placeholder 첫 그림용. JS가 fetch 후 inline <svg>로 교체.
   inline svg.weather-icon이 진짜 SMIL 애니메이션 동작. */
.home-tile-emoji img.weather-icon,
.home-tile-emoji svg.weather-icon {
    width: 80px;
    height: 80px;
    margin: 0;
    display: inline-block;
    vertical-align: middle;
    pointer-events: none; /* 부모 카드의 onclick이 SVG 자식 hit-test로 막히지 않도록 */
    /* drop-shadow는 부모 .home-tile-emoji에서 적용. svg 자체엔 별도 효과 X */
}
.home-tile-label {
    font-size: 17px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.35;
    letter-spacing: -0.2px;
}
.home-tile-grade {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin-top: 4px;
}

/* 일운(풀와이드) — 가로 레이아웃: 좌측 이모지 + 우측 텍스트 스택 */
/* [#455] padding 22px 24px → 22px 32px — 풀와이드 카드 좌측 이모지의 카드 가장자리 여백이
   2-up 카드(emoji 가운데 정렬, 카드 폭 35% 여백)와 비교돼 시각상 좁아 보이던 결함 fix.
   카드 폭 560px 기준 padding-left 24px(4.3%) → 32px(5.7%)로 확장해 시각 안정감 부여. */
.home-tile-daily {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    padding: 22px 32px;
    text-align: left;
}
.home-tile-daily .home-tile-emoji {
    font-size: 64px;
    flex-shrink: 0;
}
.home-tile-daily .home-tile-emoji img.emoji {
    width: 72px;
    height: 72px;
}
.home-tile-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.home-tile-daily .home-tile-label {
    font-size: 20px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}
.home-tile-daily .home-tile-grade {
    font-size: 32px;
    font-weight: 700;
    margin-top: 0;
}

/* 2-up 타일(이달·올해) — 세로 유지, 라벨 강화 */
.home-tile-grid .home-tile { padding: 18px 10px; min-height: 160px; gap: 4px; }
.home-tile-grid .home-tile-emoji { font-size: 40px; }
.home-tile-grid .home-tile-emoji img.emoji { width: 48px; height: 48px; }
.home-tile-grid .home-tile-label { font-size: 17px; font-weight: 700; }
.home-tile-grid .home-tile-grade { font-size: 24px; margin-top: 2px; }

/* 잠금 타일 grade 슬롯은 텍스트 위주라 작게 */
.home-tile-locked .home-tile-grade { font-size: 14px; font-weight: 500; }

/* 작은 화면(iPhone SE 375px 등) 폰트 축약 */
@media (max-width: 380px) {
    .home-tile-daily { padding: 18px 18px; gap: 16px; }
    .home-tile-daily .home-tile-emoji { font-size: 52px; }
    .home-tile-daily .home-tile-emoji img.emoji { width: 60px; height: 60px; }
    .home-tile-daily .home-tile-label { font-size: 18px; }
    .home-tile-daily .home-tile-grade { font-size: 28px; }
    .home-tile-grid .home-tile { padding: 14px 8px; min-height: 152px; }
    .home-tile-grid .home-tile-emoji { font-size: 34px; }
    .home-tile-grid .home-tile-emoji img.emoji { width: 40px; height: 40px; }
    .home-tile-grid .home-tile-label { font-size: 15px; }
    .home-tile-grid .home-tile-grade { font-size: 22px; }
    .home-tile-locked .home-tile-grade { font-size: 13px; }
}

/* 등급별 배경 그라데이션 — 라이트 모드 (날씨 5단계, #411)
   날씨 톤 진행감: 맑음 → 흐림 → 비 → 폭풍 */
.home-tile[data-grade-bucket="best"]    { background: linear-gradient(135deg, #87CEEB, #4A90E2); }  /* ☀ 맑은 하늘 */
.home-tile[data-grade-bucket="good"]    { background: linear-gradient(135deg, #A8D8F0, #6FA8DC); }  /* ⛅ 살짝 흐림 */
.home-tile[data-grade-bucket="mid"]     { background: linear-gradient(135deg, #B8C2D0, #7A8696); }  /* ☁ 흐림 */
.home-tile[data-grade-bucket="warn"]    { background: linear-gradient(135deg, #6B7891, #475467); }  /* 🌧 비 어두운 회청 */
.home-tile[data-grade-bucket="bad"]     { background: linear-gradient(135deg, #2C3848, #0F1825); }  /* ⛈ 폭풍 어두운 네이비 */
.home-tile[data-grade-bucket="locked"]  { background: linear-gradient(135deg, #C8CCD6, #8E92A0); }  /* 🌫 옅은 안개 */
.home-tile[data-grade-bucket="unknown"] { background: linear-gradient(135deg, #B8C2D0, #7A8696); }

/* [#509] 로딩 skeleton 톤 — 모든 등급과 명확히 구분되는 중성 회색
   첫 paint(정적 HTML)부터 응답 도착까지 시각 안정. fetch 응답 후 위 등급 톤으로 한 번에 전환.
   라벨(오늘·이달·올해)은 정적 텍스트로 보존, 이모지는 visibility:hidden, 등급 자리는 "불러오는 중..." 텍스트로 안내.
   [#509 hotfix] grade 텍스트 transparent 폐기 — 운영자 명시 "불러오는 중 텍스트 표시" 의도. 시니어 친화. */
.home-tile[data-grade-bucket="loading"] { background: linear-gradient(135deg, #DDE1E7, #B8BFC8); }
.home-tile[data-grade-bucket="loading"] .home-tile-grade { color: rgba(27, 42, 74, 0.65); font-size: 16px; font-weight: 500; }
.home-tile[data-grade-bucket="loading"] .home-tile-emoji { visibility: hidden; }
/* [#509 hotfix2] "불러오는 중" 텍스트 정적 멈춤 인지 fix — 운영자 보고 "버그같아".
   ::after pseudo-element로 dot 1·2·3개 변동 애니메이션. 본문 텍스트는 "불러오는 중" 유지(점 부재) + ::after가 점 표시. */
.home-tile[data-grade-bucket="loading"] .home-tile-grade::after {
    content: '...';
    display: inline-block;
    width: 1.5em;
    text-align: left;
    animation: loadingDots 1.4s infinite steps(4, end);
}
@keyframes loadingDots {
    0%   { content: '';    }
    25%  { content: '.';   }
    50%  { content: '..';  }
    75%  { content: '...'; }
    100% { content: '';    }
}
/* prefers-reduced-motion: 애니메이션 비활성화 시 정적 "..." 유지 */
@media (prefers-reduced-motion: reduce) {
    .home-tile[data-grade-bucket="loading"] .home-tile-grade::after { animation: none; content: '...'; }
}

/* 다크 모드 — 모든 톤 한 단계 어둡게 */
@media (prefers-color-scheme: dark) {
    .home-tile[data-grade-bucket="best"]    { background: linear-gradient(135deg, #2E5C8A, #1B3A5C); }
    .home-tile[data-grade-bucket="good"]    { background: linear-gradient(135deg, #3B6390, #1F3B5C); }
    .home-tile[data-grade-bucket="mid"]     { background: linear-gradient(135deg, #4A5466, #262D3A); }
    .home-tile[data-grade-bucket="warn"]    { background: linear-gradient(135deg, #2D3648, #141A28); }
    .home-tile[data-grade-bucket="bad"]     { background: linear-gradient(135deg, #0E1622, #02060E); }
    .home-tile[data-grade-bucket="locked"]  { background: linear-gradient(135deg, #5A5E6E, #2E323E); }
    .home-tile[data-grade-bucket="unknown"] { background: linear-gradient(135deg, #4A5466, #262D3A); }
    /* [#509] 다크 skeleton — 다른 다크 등급보다 약간 밝은 중성 톤으로 구분 */
    .home-tile[data-grade-bucket="loading"] { background: linear-gradient(135deg, #3A3F48, #1F232A); }
    /* [#509 hotfix] 다크 모드 — 불러오는 중 텍스트는 라이트 톤으로 가시성 보장 */
    .home-tile[data-grade-bucket="loading"] .home-tile-grade { color: rgba(255, 255, 255, 0.7); }
}

/* 잠금 타일 — 약간 흐리게 */
.home-tile-locked { opacity: 0.85; }
.home-tile-locked .home-tile-emoji { filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) grayscale(0.3); }

/* prefers-reduced-motion: 호버 변환 정적화 */
@media (prefers-reduced-motion: reduce) {
    .home-tile { transition: none; }
    .home-tile:hover { transform: none; }
}

/* ─────────────────────────────────────────────────────────
   #381 오늘의 운세 — 홈 카드 + 상세 화면 (D6 = 홈 최상단)
   디자인: 시니어 18px+ / 등급 텍스트 (D2) / 한 화면 1~2 액션
   ───────────────────────────────────────────────────────── */

/* 등급 색상 토큰 (5단계, 7:1 대비 검증 후 확정) */
:root {
    --grade-best: #B8860B;       /* 매우 좋음 — 짙은 골드 */
    --grade-good: #2C5DAB;       /* 좋음 — 진한 블루 */
    --grade-mid:  #6A6F80;       /* 보통 — 중간 회색 */
    --grade-warn: #B07A2D;       /* 주의 — 짙은 피치 */
    --grade-bad:  #8C3A3A;       /* 나쁨 — 짙은 적갈 */
}
@media (prefers-color-scheme: dark) {
    :root {
        --grade-best: #FFD993;
        --grade-good: #6FA0E8;
        --grade-mid:  #B0B5C4;
        --grade-warn: #FFB88C;
        --grade-bad:  #E08989;
    }
}

/* 홈 카드 */
.home-card-daily {
    flex-direction: column; align-items: stretch; gap: 8px;
    background: linear-gradient(135deg, #FFF6E0 0%, #FFE9C4 100%);
    color: var(--t-strong); padding: 18px 20px;
    border: 1px solid rgba(184, 134, 11, 0.18);
    box-shadow: var(--shadow-1);
}
@media (prefers-color-scheme: dark) {
    .home-card-daily {
        background: linear-gradient(135deg, #2a3f6a 0%, #1B2A4A 100%);
        color: #fff;
        border-color: rgba(255, 217, 147, 0.25);
    }
}
.home-card-daily-meta {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px; color: var(--t-sub);
}
.home-card-daily-pillar { font-weight: 700; color: var(--t-strong); }
/* [#382] 카드 제목 + 자연스러운 도입 한 문장 */
.home-card-daily-title {
    font-size: 16px; font-weight: 800; color: var(--grade-best);
    letter-spacing: -0.3px;
}
.home-card-daily-intro {
    font-size: 15px; color: var(--t-sub); line-height: 1.5;
    margin-top: -2px;
}
.daily-title {
    font-size: 22px; font-weight: 800; color: var(--grade-best);
    margin-top: 8px; margin-bottom: 4px;
    letter-spacing: -0.3px;
}
.daily-intro {
    font-size: 17px; color: var(--t-strong); line-height: 1.55;
    margin-bottom: 4px;
}
.home-card-daily-grade {
    font-size: 26px; font-weight: 900; color: var(--grade-best);
    margin-top: 2px;
}
.home-card-daily-oneliner {
    font-size: 18px; line-height: 1.5; color: var(--t-strong);
    margin-bottom: 6px;
}
.home-card-daily-axes {
    display: flex; gap: 12px; flex-wrap: wrap;
    padding: 8px 0; border-top: 1px dashed rgba(184, 134, 11, 0.25);
}
.daily-axis {
    display: flex; align-items: center; gap: 6px;
    font-size: 15px; flex: 1; min-width: 80px;
}
.daily-axis-icon { font-size: 18px; }
.daily-axis-label { font-weight: 600; color: var(--t-strong); }
.home-card-daily-cta {
    font-size: 15px; color: var(--c-primary); font-weight: 700;
    text-align: right; margin-top: 4px;
}
@media (prefers-color-scheme: dark) {
    .home-card-daily-cta { color: var(--c-accent); }
}

/* 상세 화면 — #daily */
#section-daily { display: none; }
/* [#428c] iOS safe-area-inset-top 가산 — GNB(.global-header) 가림 fix. 본문 padding-top만 추가, 좌우·하단은 보존 */
/* [#457] 좌우 16px 폐기 → 홈·궁합 화면(20px만)과 시각 정합 */
/* [#463] 상단 padding 폐기 — .app-card가 이미 calc(32px + env(safe-area-inset-top)) 보유, 누적으로 ~52+2×safe 두꺼움. 홈·궁합과 정합 */
body.daily-active #section-daily { display: block; padding: 0 0 80px; }
body.daily-active .app-card { overflow-y: auto; }
.daily-content { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.daily-header { padding: 8px 0 12px; border-bottom: 1px solid var(--border-1); }
.daily-back {
    background: none; border: none; padding: 6px 0;
    font-size: 16px; color: var(--c-primary); cursor: pointer;
}

/* [#390] 화면 자체 ← 홈 버튼 — other-persons·tickets 등 진입 후 나갈 길 없던 화면용
   시니어 UX: 터치 48px+, 본문 18px, 6:1 대비 / 클릭 영역 넉넉 */
.section-back-btn {
    background: none; border: none; padding: 12px 0;
    font-size: 18px; color: var(--c-accent, #FFD993); font-weight: 600;
    cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
    min-height: 48px;
}
.section-back-btn:hover { opacity: 0.85; }
.section-back-btn:focus-visible { outline: 2px solid var(--c-accent, #FFD993); outline-offset: 2px; border-radius: 4px; }

/* [#390] 궁합 결과(compat-ridge·compat-detail)에서 "← 원래 사주로" 복귀 CTA
   타인 사주 → 궁합 진입 시 _flowBack 체인이 home으로만 가던 dead-end 차단
   시니어 UX: position:absolute로 result-flow 레이어 위에 떠 있게 (top + left fixed-ish), 터치 48px+ */
.compat-back-to-origin {
    position: absolute;
    top: 60px; left: 16px;
    z-index: 5;
    background: rgba(27, 42, 74, 0.92);
    color: var(--c-accent, #FFD993);
    border: 1.5px solid var(--c-accent, #FFD993);
    padding: 10px 16px;
    border-radius: 22px;
    font-size: 16px; font-weight: 600;
    cursor: pointer;
    min-height: 44px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
    display: inline-flex; align-items: center; gap: 4px;
}
.compat-back-to-origin:hover { background: rgba(27, 42, 74, 1); }
.compat-back-to-origin:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 480px) {
    .compat-back-to-origin { top: 56px; left: 12px; font-size: 15px; padding: 9px 14px; }
}


.daily-date { font-size: 18px; color: var(--t-sub); margin-top: 8px; }
.daily-pillar-row {
    display: flex; align-items: baseline; gap: 12px; margin-top: 6px;
    font-size: 24px; font-weight: 700; color: var(--t-strong);
}
.daily-pillar-han { font-size: 28px; }
.daily-pillar-nick { font-size: 18px; color: var(--t-sub); }

/* 7일권 활성 CTA */
.daily-pass-cta {
    background: linear-gradient(135deg, #FFE4A8 0%, #FFB88C 100%);
    border: 1.5px dashed rgba(184, 134, 11, 0.4);
    border-radius: 14px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.daily-pass-cta-headline { font-size: 18px; font-weight: 700; color: var(--t-strong); }
.daily-pass-cta-body { font-size: 15px; color: var(--t-sub); text-align: center; }
.daily-pass-cta-btn { margin-top: 8px; font-size: 16px; padding: 12px 24px; min-height: 48px; }
.daily-pass-cta-hint { font-size: 13px; color: var(--t-muted); }

/* 7일권 활성 잔여 */
.daily-pass-status {
    background: rgba(255, 217, 147, 0.12);
    border-left: 3px solid var(--grade-best);
    padding: 8px 12px; border-radius: 6px; font-size: 14px; color: var(--t-sub);
}

/* 한 줄 메시지 카드 */
.daily-oneliner-card {
    background: var(--bg-card);
    border-radius: 14px; padding: 24px 20px;
    box-shadow: var(--shadow-1);
    text-align: center;
}
.daily-grade-large {
    font-size: 32px; font-weight: 900; color: var(--grade-best);
    margin-bottom: 8px; letter-spacing: -0.5px;
}
.daily-oneliner-text { font-size: 18px; line-height: 1.6; color: var(--t-strong); }

/* 등급 색상 매핑 — 텍스트 클래스 */
.grade-매우-좋음 { color: var(--grade-best) !important; }
.grade-좋음 { color: var(--grade-good) !important; }
.grade-보통 { color: var(--grade-mid) !important; }
.grade-주의 { color: var(--grade-warn) !important; }
.grade-나쁨 { color: var(--grade-bad) !important; }

/* 4축 풀이 카드 */
.daily-axes-detail { display: flex; flex-direction: column; gap: 12px; }
.daily-axis-card {
    background: var(--bg-card);
    border-radius: 12px; padding: 16px 18px;
    box-shadow: var(--shadow-1);
}
.daily-axis-card.daily-axis-total { border: 2px solid var(--grade-best); }
.daily-axis-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.daily-axis-icon-lg { font-size: 22px; }
.daily-axis-name {
    font-size: 17px; font-weight: 700; color: var(--t-strong); flex: 1;
}
.daily-axis-grade { font-size: 16px; font-weight: 700; }
.daily-axis-body { font-size: 17px; line-height: 1.65; color: var(--t-strong); }

/* 신살 안내 */
.daily-sinsal {
    background: rgba(255, 184, 140, 0.1);
    border: 1px solid rgba(184, 134, 11, 0.2);
    border-radius: 10px; padding: 12px 14px;
    font-size: 15px; line-height: 1.55; color: var(--t-strong);
}
.daily-sinsal-name { font-weight: 700; color: var(--grade-best); margin-right: 6px; }

/* CTA row */
.daily-cta-row { display: flex; gap: 8px; margin-top: 8px; }
.daily-cta-row .btn { flex: 1; min-height: 48px; font-size: 16px; }

/* 비로그인·미입력 */
.daily-empty {
    background: var(--bg-card); border-radius: 12px;
    padding: 32px 20px; text-align: center; box-shadow: var(--shadow-1);
}
.daily-empty p { font-size: 17px; color: var(--t-strong); margin-bottom: 16px; line-height: 1.5; }

@media (max-width: 480px) {
    .home-card-daily-grade { font-size: 22px; }
    .home-card-daily-oneliner { font-size: 17px; }
    .daily-grade-large { font-size: 28px; }
    .daily-oneliner-text { font-size: 17px; }
    .daily-axis-body { font-size: 16px; }
}

/* ─────────────────────────────────────────────
   [#396 이달의 운세] — 일운 패턴 차용. 색상은 차분한 푸른 계열로 분리해 카니발리제이션 방어
   ───────────────────────────────────────────── */

/* 홈 카드 */
.home-card-monthly {
    flex-direction: column; align-items: stretch; gap: 8px;
    background: linear-gradient(135deg, #E8EFFC 0%, #C9D9F3 100%);
    color: var(--t-strong); padding: 18px 20px;
    border: 1px solid rgba(59, 89, 152, 0.18);
    box-shadow: var(--shadow-1);
}
@media (prefers-color-scheme: dark) {
    .home-card-monthly {
        background: linear-gradient(135deg, #2a3f6a 0%, #14213d 100%);
        color: #fff;
        border-color: rgba(180, 200, 240, 0.25);
    }
}
.home-card-monthly-title {
    font-size: 16px; font-weight: 800; color: var(--c-secondary, #3B5998);
    letter-spacing: -0.3px;
}
.home-card-monthly-intro {
    /* [#400] 시니어 UX 수치 정합 — 본문 18px+ 정책 (캡션 등급 16px 최소) */
    font-size: 16px; color: var(--t-sub); line-height: 1.5;
    margin-top: -2px;
}
.monthly-title {
    font-size: 22px; font-weight: 800; color: var(--c-secondary, #3B5998);
    margin-top: 8px; margin-bottom: 4px;
    letter-spacing: -0.3px;
}
.monthly-intro {
    font-size: 17px; color: var(--t-strong); line-height: 1.55;
    margin-bottom: 4px;
}
.home-card-monthly-grade {
    font-size: 26px; font-weight: 900; color: var(--c-secondary, #3B5998);
    margin-top: 2px;
}
.home-card-monthly-oneliner {
    font-size: 18px; line-height: 1.5; color: var(--t-strong);
    margin-bottom: 6px;
}
.home-card-monthly-axes {
    display: flex; gap: 12px; flex-wrap: wrap;
    padding: 8px 0; border-top: 1px dashed rgba(59, 89, 152, 0.25);
}
.monthly-axis {
    display: flex; align-items: center; gap: 6px;
    font-size: 15px; flex: 1; min-width: 80px;
}
.monthly-axis-icon { font-size: 18px; }
.monthly-axis-label { font-weight: 600; color: var(--t-strong); }
.home-card-monthly-dday {
    /* [#400] 시니어 UX 캡션 최소 15~16px 정책 (14px 금지) */
    font-size: 15px; color: var(--t-sub); font-weight: 600;
    text-align: left;
}
.home-card-monthly-cta {
    font-size: 15px; color: var(--c-primary); font-weight: 700;
    text-align: right; margin-top: 4px;
}
@media (prefers-color-scheme: dark) {
    .home-card-monthly-cta { color: var(--c-accent); }
}

/* 상세 화면 — #monthly */
#section-monthly { display: none; }
/* [#457] 좌우 16px 폐기 → 홈·궁합 화면(20px만)과 시각 정합 */
/* [#463] 상단 padding 폐기 — .app-card padding-top과 누적되던 결함 fix */
body.monthly-active #section-monthly { display: block; padding: 0 0 80px; }
.monthly-content { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.monthly-header { padding: 8px 0 12px; border-bottom: 1px solid var(--border-1); }
.monthly-back {
    /* [#400] 시니어 UX 터치 타겟 48~60px 정책 (기존 32~34px) */
    background: none; border: none; padding: 12px 0;
    font-size: 16px; color: var(--c-primary); cursor: pointer;
    min-height: 48px;
}
.monthly-date { font-size: 18px; color: var(--t-sub); margin-top: 8px; }
.monthly-dday { font-size: 16px; color: var(--c-secondary, #3B5998); font-weight: 600; margin-top: 4px; }

/* 7일권 통합 CTA */
.monthly-pass-cta {
    background: linear-gradient(135deg, #C9D9F3 0%, #A8C0E8 100%);
    border: 1.5px dashed rgba(59, 89, 152, 0.4);
    border-radius: 14px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.monthly-pass-cta-headline { font-size: 18px; font-weight: 700; color: var(--t-strong); }
.monthly-pass-cta-body { font-size: 15px; color: var(--t-sub); text-align: center; line-height: 1.5; }
.monthly-pass-cta-btn { margin-top: 8px; font-size: 16px; padding: 12px 24px; min-height: 48px; }
.monthly-pass-cta-hint {
    /* [#400] 시니어 UX 캡션 최소 15~16px 정책 (13px 금지) */
    font-size: 15px; color: var(--t-muted);
}

/* 한 줄 메시지 카드 */
.monthly-oneliner-card {
    background: var(--bg-card);
    border-radius: 14px; padding: 24px 20px;
    box-shadow: var(--shadow-1);
    text-align: center;
}
.monthly-grade-large {
    font-size: 32px; font-weight: 900; color: var(--c-secondary, #3B5998);
    margin-bottom: 8px; letter-spacing: -0.5px;
}
.monthly-oneliner-text { font-size: 18px; line-height: 1.6; color: var(--t-strong); }

/* 5축 풀이 카드 */
.monthly-axes-detail { display: flex; flex-direction: column; gap: 12px; }
.monthly-axis-card {
    background: var(--bg-card);
    border-radius: 12px; padding: 16px 18px;
    box-shadow: var(--shadow-1);
}
.monthly-axis-card.monthly-axis-total { border: 2px solid var(--c-secondary, #3B5998); }
.monthly-axis-card.monthly-axis-lucky { border: 1.5px solid var(--grade-best); }
.monthly-axis-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px;
}
.monthly-axis-icon-lg { font-size: 22px; }
.monthly-axis-name {
    font-size: 17px; font-weight: 700; color: var(--t-strong); flex: 1;
}
.monthly-axis-grade { font-size: 16px; font-weight: 700; }
.monthly-axis-body { font-size: 17px; line-height: 1.65; color: var(--t-strong); }

/* 길일 달력 스케줄러 */
.lucky-calendar { margin: 10px 0 14px; }
.lucky-cal-title {
    font-size: 15px; font-weight: 700; color: var(--t-strong);
    text-align: center; margin-bottom: 10px;
}
.lucky-cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.lucky-cal-wd {
    text-align: center; font-size: 13px; font-weight: 600;
    color: var(--t-muted, #8a8a8a); padding: 4px 0;
}
.lucky-cal-wd.sun { color: #EF4444; }
.lucky-cal-wd.sat { color: #3B5998; }
.lucky-cal-day {
    aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    font-size: 14px; color: var(--t-strong);
    background: rgba(0,0,0,0.02);
    position: relative;
}
.lucky-cal-day.blank { background: transparent; }
.lucky-cal-day.sun { color: #EF4444; }
.lucky-cal-day.sat { color: #3B5998; }
.lucky-cal-day.today {
    outline: 2px solid var(--c-secondary, #3B5998);
    outline-offset: -2px;
}
.lucky-cal-day.lucky {
    background: linear-gradient(135deg, var(--grade-best, #FFD993), #FFB88C);
    color: #1B2A4A;
    font-weight: 700;
    box-shadow: 0 2px 6px rgba(255, 184, 140, 0.35);
}
.lucky-cal-num { font-size: 14px; font-weight: 600; line-height: 1; }
.lucky-cal-star {
    position: absolute; top: 2px; right: 3px;
    font-size: 10px; line-height: 1;
}
.lucky-cal-extra {
    margin-top: 10px; padding: 8px 12px;
    background: rgba(255, 217, 147, 0.18);
    border: 1px solid rgba(255, 217, 147, 0.4);
    border-radius: 8px;
    font-size: 14px; line-height: 1.5; color: var(--t-strong);
}
@media (prefers-color-scheme: dark) {
    .lucky-cal-day { background: rgba(255,255,255,0.04); }
    .lucky-cal-day.lucky { color: #1B2A4A; }
}

/* 신살 안내 */
.monthly-sinsal {
    background: rgba(59, 89, 152, 0.08);
    border: 1px solid rgba(59, 89, 152, 0.2);
    border-radius: 10px; padding: 12px 14px;
    font-size: 15px; line-height: 1.55; color: var(--t-strong);
}
.monthly-sinsal-name { font-weight: 700; color: var(--c-secondary, #3B5998); margin-right: 6px; }

/* 비로그인·미입력 */
.monthly-empty {
    background: var(--bg-card); border-radius: 12px;
    padding: 32px 20px; text-align: center; box-shadow: var(--shadow-1);
}
.monthly-empty p { font-size: 17px; color: var(--t-strong); margin-bottom: 16px; line-height: 1.5; }

@media (max-width: 480px) {
    .home-card-monthly-grade { font-size: 22px; }
    .home-card-monthly-oneliner { font-size: 17px; }
    .monthly-grade-large { font-size: 28px; }
    .monthly-oneliner-text { font-size: 17px; }
    .monthly-axis-body { font-size: 16px; }
}

/* ============================================================
   [#415 올해의 운세] (2026-05-12) — 자매 monthly 패턴 1:1 미러링
   + 12개월 미니 라인 차트 컨테이너 + 호기/주의기 라벨
   ============================================================ */

/* 상세 화면 — #yearly */
#section-yearly { display: none; }
/* [#457] 좌우 16px 폐기 → 홈·궁합 화면(20px만)과 시각 정합 */
/* [#463] 상단 padding 폐기 — .app-card padding-top과 누적되던 결함 fix */
body.yearly-active #section-yearly { display: block; padding: 0 0 80px; }
.yearly-content { max-width: 600px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.yearly-header { padding: 8px 0 12px; border-bottom: 1px solid var(--border-1); }
.yearly-title { font-size: 22px; font-weight: 700; color: var(--t-strong); margin: 0; }
.yearly-intro { font-size: 16px; color: var(--t-sub); margin-top: 8px; line-height: 1.5; }
.yearly-date { font-size: 18px; color: var(--t-sub); margin-top: 8px; }
.yearly-dday { font-size: 16px; color: var(--c-secondary, #3B5998); font-weight: 600; margin-top: 4px; }

/* 통합 7일권 CTA — 일·월·년 통합 (Y4) */
.yearly-pass-cta {
    background: linear-gradient(135deg, #FFE4B5 0%, #FFB88C 100%);
    border: 1.5px dashed rgba(255, 184, 140, 0.6);
    border-radius: 14px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.yearly-pass-cta-headline { font-size: 18px; font-weight: 700; color: var(--t-strong); }
.yearly-pass-cta-body { font-size: 15px; color: var(--t-sub); text-align: center; line-height: 1.5; }
.yearly-pass-cta-btn { margin-top: 8px; font-size: 16px; padding: 12px 24px; min-height: 48px; }
.yearly-pass-cta-hint { font-size: 15px; color: var(--t-muted); }

/* 한 줄 메시지 카드 */
.yearly-oneliner-card {
    background: var(--bg-card);
    border-radius: 14px; padding: 24px 20px;
    box-shadow: var(--shadow-1);
    text-align: center;
}
.yearly-grade-large {
    font-size: 32px; font-weight: 900; color: var(--c-primary, #1B2A4A);
    margin-bottom: 8px; letter-spacing: -0.5px;
}
.yearly-oneliner-text { font-size: 18px; line-height: 1.6; color: var(--t-strong); }

/* 5축 풀이 카드 */
.yearly-axes-detail { display: flex; flex-direction: column; gap: 12px; }
.yearly-axis-card {
    background: var(--bg-card);
    border-radius: 12px; padding: 16px 18px;
    box-shadow: var(--shadow-1);
}
.yearly-axis-card.yearly-axis-total { border: 2px solid var(--c-primary, #1B2A4A); }
.yearly-axis-card.yearly-axis-monthly { border: 1.5px solid var(--grade-best, #6BAA75); }
.yearly-axis-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 8px; flex-wrap: wrap;
}
.yearly-axis-icon-lg { font-size: 22px; }
.yearly-axis-name { font-size: 17px; font-weight: 700; color: var(--t-strong); flex: 1; }
.yearly-axis-grade { font-size: 16px; font-weight: 700; }
.yearly-axis-body { font-size: 17px; line-height: 1.65; color: var(--t-strong); }

/* 호기·주의기 라벨 */
.yearly-peak-months, .yearly-valley-months {
    display: inline-block;
    font-size: 15px; font-weight: 600;
    margin-right: 12px;
}
.yearly-peak-months b { color: #22C55E; }
.yearly-valley-months b { color: #EAB308; }

/* 12개월 미니 라인 차트 (Y5 신규, #445에서 deprecated — wrap만 유지) */
.yearly-mini-chart-wrap {
    background: var(--bg-card);
    border-radius: 14px; padding: 18px 16px;
    box-shadow: var(--shadow-1);
    display: flex; flex-direction: column; gap: 10px;
}
.yearly-mini-chart-title {
    font-size: 17px; font-weight: 700; color: var(--t-strong);
}
.yearly-mini-chart-canvas-wrap {
    position: relative;
    width: 100%; height: 200px;
}
.yearly-mini-chart-canvas-wrap canvas {
    width: 100% !important; height: 100% !important;
}
.yearly-mini-chart-hint {
    font-size: 14px; color: var(--t-muted); line-height: 1.5;
}

/* [#445] 4계층 공용 미니 라인 차트 — daily ±7일·monthly ±6개월·yearly ±5년 통일 */
.range-mini-chart {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 18px 16px;
    box-shadow: var(--shadow-1);
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
}
.range-mini-chart-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--t-strong);
}
.range-mini-chart-hint {
    font-size: 14px;
    color: var(--t-muted);
    line-height: 1.5;
}
.range-mini-chart-canvas-wrap {
    position: relative;
    width: 100%;
    height: 200px;
}
.range-mini-chart-canvas-wrap canvas {
    width: 100% !important;
    height: 100% !important;
}
.range-mini-chart-summary {
    font-size: 15px;
    font-weight: 600;
    color: var(--t-strong);
    background: rgba(255, 217, 147, 0.18);
    border-left: 4px solid var(--c-accent);
    border-radius: 6px;
    padding: 10px 12px;
    line-height: 1.5;
    margin-top: 4px;
}
@media (max-width: 767px) {
    .range-mini-chart-canvas-wrap { height: 180px; }
}

/* ────────────────────────────────────────────────
 * [#454] 일진 기록 — 툴팁 + 모달 (오늘 미니 라인 한정)
 * ──────────────────────────────────────────────── */

/* 커스텀 툴팁 (chart.js external HTML) */
.range-tooltip-custom {
    background: rgba(27, 42, 74, 0.96);
    color: #fff;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    min-width: 180px;
    max-width: 240px;
    font-size: 14px;
    line-height: 1.5;
}
.range-tooltip-date {
    font-size: 15px;
    font-weight: 700;
    color: #FFD993;
    margin-bottom: 4px;
}
.range-tooltip-score {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 10px;
}
.range-tooltip-journal {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    padding: 8px 10px;
    margin: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.range-tooltip-mood {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}
.range-tooltip-memo {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.80);
    word-break: break-word;
    line-height: 1.45;
}
.range-tooltip-memo-empty {
    color: rgba(255, 255, 255, 0.50);
    font-style: italic;
}
.range-tooltip-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.range-tooltip-btn {
    flex: 1;
    border: none;
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, transform 0.06s;
    -webkit-tap-highlight-color: transparent;
}
.range-tooltip-btn:active { transform: scale(0.97); }
.range-tooltip-btn-primary {
    width: 100%;
    background: #FFD993;
    color: #1B2A4A;
    margin-top: 4px;
    padding: 10px 12px;
    font-size: 14px;
}
.range-tooltip-btn-primary:hover { background: #FFE2A8; }
.range-tooltip-btn-edit {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}
.range-tooltip-btn-edit:hover { background: rgba(255, 255, 255, 0.28); }
.range-tooltip-btn-delete {
    background: rgba(239, 68, 68, 0.22);
    color: #FCA5A5;
}
.range-tooltip-btn-delete:hover { background: rgba(239, 68, 68, 0.35); color: #FFF; }
.range-tooltip-journal-disabled {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
    margin-top: 6px;
}

/* 일진 모달 — login-modal-overlay/card 상속 + 자체 보강 */
.journal-modal-card {
    padding: 0 !important;            /* header/body/footer 자체 padding */
    overflow: hidden;
}
.journal-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
    border-bottom: 1px solid var(--card-border, rgba(0, 0, 0, 0.06));
}
.journal-modal-title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    color: var(--modal-title-color, var(--t-strong));
}
.journal-modal-close {
    background: transparent;
    border: none;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    color: var(--modal-skip-color, rgba(0, 0, 0, 0.45));
    padding: 4px 8px;
    border-radius: 6px;
    -webkit-tap-highlight-color: transparent;
}
.journal-modal-close:hover { background: rgba(0, 0, 0, 0.05); }
.journal-modal-body {
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.journal-mood-label {
    font-size: 17px;
    font-weight: 600;
    color: var(--t-strong);
    text-align: center;
    margin-bottom: 4px;
}
.journal-mood-buttons {
    display: flex;
    gap: 10px;
    justify-content: space-between;
}
.journal-mood-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 92px;
    background: var(--bg-card);
    border: 2px solid var(--card-border, rgba(0, 0, 0, 0.08));
    border-radius: 14px;
    padding: 12px 6px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.06s;
    -webkit-tap-highlight-color: transparent;
}
.journal-mood-btn:active { transform: scale(0.97); }
.journal-mood-btn:hover {
    border-color: rgba(255, 217, 147, 0.7);
    background: rgba(255, 217, 147, 0.06);
}
.journal-mood-btn.active {
    border-color: #FFD993;
    background: rgba(255, 217, 147, 0.18);
}
/* [#464] #462 mood별 배경 색조 폐기 — active(골드) 상태와 시각 충돌. 배경은 통일, 구름은 그림자로만 가시성 확보 (운영자 명시) */
.journal-mood-emoji {
    font-size: 36px;
    line-height: 1;
}
/* [#455·#470·#473] 날씨 아이콘 컨테이너 — 모든 mood 동일 단색 옅은 회색 동그라미 (운영자 명시).
   #470 box-shadow inset 그라데이션 → 구름이 그라데이션에 묻혀 안 보임. 단색 회색이 더 자연스러움. */
.journal-mood-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    font-size: 32px;     /* 텍스트 이모지 fallback */
    line-height: 1;
    border-radius: 50%;
    background: #F1F5F9;  /* slate-100 단색, 테두리 없음 */
}
.journal-mood-icon .mood-svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* [#474·#475] 보통(구름)·나쁨(천둥비) 가시성 보강 — 운영자 명시 (#474 1차 큰 그림자 폐기 + #475 나쁨 추가).
   외곽 윤곽선 흉내(drop-shadow 1px) + 구름 자체 색 진하게(contrast + saturate). */
.journal-mood-icon[data-mood-icon="normal"] .mood-svg,
.journal-mood-icon[data-mood-icon="bad"] .mood-svg {
    filter: drop-shadow(0 0 1px rgba(15, 23, 42, 0.55))
            contrast(1.15)
            saturate(0.85);
}
.journal-mood-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--t-strong);
}
.journal-memo-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--t-strong);
    margin-top: 4px;
}
.journal-memo-textarea {
    width: 100%;
    min-height: 96px;
    padding: 12px 14px;
    border: 1.5px solid var(--card-border, rgba(0, 0, 0, 0.12));
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.55;
    color: var(--t-strong);
    background: var(--bg-card);
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.journal-memo-textarea:focus {
    outline: none;
    border-color: #FFD993;
    box-shadow: 0 0 0 3px rgba(255, 217, 147, 0.25);
}
.journal-memo-counter {
    font-size: 13px;
    color: var(--t-muted);
    text-align: right;
}
.journal-modal-footer {
    display: flex;
    gap: 10px;
    padding: 12px 24px 20px;
    border-top: 1px solid var(--card-border, rgba(0, 0, 0, 0.06));
}
.journal-modal-delete {
    flex: 1;
    background: rgba(239, 68, 68, 0.10);
    color: #DC2626;
    border: none;
    border-radius: 12px;
    padding: 14px 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.journal-modal-delete:hover { background: rgba(239, 68, 68, 0.18); }
.journal-modal-save {
    flex: 2;
    background: var(--c-primary);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 12px;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.journal-modal-save:hover { background: #2A3D6A; }
.journal-modal-save:disabled { opacity: 0.6; cursor: not-allowed; }

/* 다크 모드 */
@media (prefers-color-scheme: dark) {
    .journal-modal-header {
        border-bottom-color: rgba(255, 255, 255, 0.10);
    }
    .journal-modal-footer {
        border-top-color: rgba(255, 255, 255, 0.10);
    }
    .journal-modal-close {
        color: rgba(255, 255, 255, 0.6);
    }
    .journal-modal-close:hover { background: rgba(255, 255, 255, 0.08); }
    .journal-mood-btn {
        border-color: rgba(255, 255, 255, 0.14);
    }
    .journal-mood-btn:hover {
        background: rgba(255, 217, 147, 0.10);
    }
    .journal-mood-btn.active {
        background: rgba(255, 217, 147, 0.22);
    }
    /* [#473] 다크 모드 — 단색 옅은 화이트 동그라미 (inset 그라데이션 폐기) */
    .journal-mood-icon {
        background: rgba(255, 255, 255, 0.08);
    }
    /* [#474·#475] 다크 모드 — 어두운 카드 위에선 filter 폐기 (충분 가시) */
    .journal-mood-icon[data-mood-icon="normal"] .mood-svg,
    .journal-mood-icon[data-mood-icon="bad"] .mood-svg {
        filter: none;
    }
    .journal-memo-textarea {
        border-color: rgba(255, 255, 255, 0.14);
    }
    .journal-modal-delete {
        background: rgba(239, 68, 68, 0.16);
        color: #FCA5A5;
    }
    .journal-modal-delete:hover { background: rgba(239, 68, 68, 0.28); }
    .journal-modal-save {
        background: #FFD993;
        color: #1B2A4A;
    }
    .journal-modal-save:hover { background: #FFE2A8; }
}

/* 모바일 미세 조정 */
@media (max-width: 767px) {
    .journal-modal-card { width: calc(100vw - 32px); }
    .journal-mood-btn { min-height: 88px; }
    .journal-mood-emoji { font-size: 32px; }
}

/* 신살 안내 */
.yearly-sinsal {
    background: rgba(27, 42, 74, 0.08);
    border: 1px solid rgba(27, 42, 74, 0.2);
    border-radius: 10px; padding: 12px 14px;
    font-size: 15px; line-height: 1.55; color: var(--t-strong);
}
.yearly-sinsal-name { font-weight: 700; color: var(--c-primary, #1B2A4A); margin-right: 6px; }

/* Y7 — 능선 양방향 진입 CTA */
.yearly-ridge-cta {
    display: flex; justify-content: center; margin-top: 8px;
}
.yearly-ridge-cta-btn {
    font-size: 16px; padding: 12px 24px; min-height: 48px;
    background: transparent;
    border: 1.5px solid var(--c-primary, #1B2A4A);
    color: var(--c-primary, #1B2A4A);
    border-radius: 12px;
}

/* 비로그인·미입력 */
.yearly-empty {
    background: var(--bg-card); border-radius: 12px;
    padding: 32px 20px; text-align: center; box-shadow: var(--shadow-1);
}
.yearly-empty p { font-size: 17px; color: var(--t-strong); margin-bottom: 16px; line-height: 1.5; }

@media (max-width: 480px) {
    .yearly-title { font-size: 20px; }
    .yearly-grade-large { font-size: 28px; }
    .yearly-oneliner-text { font-size: 17px; }
    .yearly-axis-body { font-size: 16px; }
    .yearly-mini-chart-canvas-wrap { height: 180px; }
}

@media (prefers-color-scheme: dark) {
    .yearly-ridge-cta-btn {
        border-color: var(--c-accent, #FFD993);
        color: var(--c-accent, #FFD993);
    }
}

/* [Phase 2/3 #347] 이번 달 운세 placeholder (월운 구현 전, 결정사항 #9·#13) */
.home-month-fortune {
    background: rgba(255, 217, 147, 0.1);
    border: 1px solid rgba(255, 217, 147, 0.3);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    text-align: center;
}
.home-month-fortune-label {
    font-size: 14px;
    color: var(--c-accent);
    font-weight: 700;
    margin-bottom: 4px;
}
.home-month-fortune-text {
    font-size: 16px;
    color: var(--t-strong);
    line-height: 1.5;
}

/* [Phase 2/3 #347] 홈 하단 배너 2종 (가족·지인 궁합 / 가족·지인 사주, 시니어 친숙어 + 56px+ 터치) */
.home-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    cursor: pointer;
    margin-bottom: 12px;
    min-height: 64px;
    transition: background 0.15s;
}
.home-banner:active { transform: scale(0.99); }
.home-banner-compat { background: rgba(255, 184, 140, 0.14); border: 1px solid rgba(255, 184, 140, 0.3); }
.home-banner-other  { background: rgba(59, 89, 152, 0.14); border: 1px solid rgba(59, 89, 152, 0.3); }
.home-banner-icon {
    font-size: 28px; flex-shrink: 0;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.6);
    border-radius: 12px;
}
.home-banner-body { flex: 1; min-width: 0; }
.home-banner-title {
    font-size: 18px; font-weight: 700;
    color: var(--t-strongest);
    margin-bottom: 2px;
    line-height: 1.4;
}
.home-banner-desc {
    font-size: 15px;
    color: var(--t-sub);
    line-height: 1.4;
}
.home-banner-arrow {
    font-size: 22px;
    color: var(--c-primary);
    flex-shrink: 0;
}
/* 고도 카드 (분석 전 → CTA) */
.home-card-cta {
    background: linear-gradient(135deg, var(--c-primary), #2a3f6a);
    color: #fff;
}
.home-card-cta .home-card-title { color: #fff; }
.home-card-cta .home-card-desc { color: rgba(255,255,255,0.75); white-space: normal; }
.home-card-cta .home-card-arrow { color: var(--c-accent); }

/* ===== 타로: 질문 입력 ===== */
.tarot-header { text-align: center; padding: 24px 0 16px; }
.tarot-header h2 { font-size: 24px; font-weight: 800; color: var(--t-strongest); }
.tarot-subtitle { font-size: 14px; color: var(--t-sub); margin-top: 6px; }

.tarot-category-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    margin-bottom: 16px;
}
.tarot-category-item {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 16px; background: var(--bg-card-alt); border-radius: 12px;
    border: 2px solid transparent; cursor: pointer; transition: all 0.2s;
}
.tarot-category-item:hover { border-color: var(--c-accent); }
.tarot-category-item.active { border-color: var(--c-accent); background: rgba(255,217,147,0.1); }
.tarot-category-icon { font-size: 22px; }
.tarot-category-label { font-size: 14px; font-weight: 600; color: var(--t-strong); }

.tarot-direct-input { position: relative; margin-bottom: 16px; }
.tarot-direct-input textarea {
    width: 100%; height: 80px; padding: 12px; border: 1px solid var(--b-input);
    border-radius: 12px; font-family: inherit; font-size: 14px; resize: none;
    background: var(--bg-card-alt); color: var(--t-body);
}
.tarot-direct-input textarea:focus { border-color: var(--c-accent); outline: none; }
.tarot-char-count { position: absolute; bottom: 8px; right: 12px; font-size: 11px; color: var(--t-muted); }

.tarot-spread-section { margin-bottom: 20px; }
.tarot-spread-label { font-size: 13px; font-weight: 600; color: var(--t-sub); margin-bottom: 8px; }
.tarot-spread-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.tarot-spread-chip {
    padding: 8px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--b-default); background: transparent; color: var(--t-sub);
    cursor: pointer; transition: all 0.2s; font-family: inherit;
}
.tarot-spread-chip.active { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); font-weight: 700; }
.tarot-spread-chip.recommended::after { content: ' ✨'; }
.tarot-spread-info { font-size: 12px; color: var(--t-muted); margin-top: 6px; }

.tarot-start-btn { width: 100%; margin-top: 8px; }
.tarot-start-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ===== 타로: 카드 선택 ===== */
.tarot-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: none;
    color: var(--t-sub);
    font-size: 14px;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background 0.15s;
}
.tarot-back-btn:hover { background: var(--bg-card-alt, rgba(0,0,0,0.05)); }
.tarot-select-header { text-align: center; padding: 20px 0 12px; }
.tarot-guide { font-size: 15px; color: var(--t-body); font-weight: 500; }
.tarot-select-count { font-size: 13px; color: var(--c-accent); margin-top: 4px; font-weight: 700; }

/* 카드 팬: 단순 가로 스크롤 1줄 */
/* 카드 팬: 겹침+줄바꿈 (2/3 겹침, 1/3만 노출) */
.tarot-card-fan {
    display: flex;
    flex-wrap: wrap;
    padding: 16px 12px;
    overflow: visible;
}
.tarot-fan-card {
    width: 54px;
    margin-left: -36px; /* 2/3 겹침 (54px의 2/3 = 36px) */
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    position: relative;
}
.tarot-fan-card:first-child,
.tarot-fan-card:nth-child(26n+1) { margin-left: 0; } /* 줄 첫 카드는 겹침 없음 */
.tarot-fan-card img {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
    display: block;
}
.tarot-fan-card:hover { transform: translateY(-8px); z-index: 10; }
.tarot-fan-card:active { transform: scale(1.1); z-index: 20; }
.tarot-fan-card.selected { opacity: 0.15; pointer-events: none; }

/* 카드 선택 팝업 애니메이션 */
@keyframes scaleIn { from { transform: scale(0.5); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* 선택 슬롯: 기본 (1장, 3장) */
.tarot-selected-slots {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 16px 12px;
    flex-wrap: wrap;
}
.tarot-slot {
    width: 64px; height: 96px;
    border: 2px dashed var(--b-default);
    border-radius: 8px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-size: 10px; color: var(--t-muted); text-align: center;
    padding: 4px; line-height: 1.3;
    transition: border-color 0.3s;
    background: var(--bg-card-alt);
}
.tarot-slot.filled { border-style: solid; border-color: var(--c-accent); overflow: hidden; padding: 0; background: transparent; }
.tarot-slot.filled img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; }
.tarot-slot.current { border-color: var(--c-accent); animation: pulse-border 1.5s infinite; }

/* 켈틱 크로스 슬롯: 실제 스프레드 배치 */
.tarot-selected-slots.celtic-layout {
    display: grid;
    grid-template-columns: repeat(6, 52px);
    grid-template-rows: repeat(4, 78px);
    gap: 4px;
    justify-content: center;
    padding: 8px;
}
.tarot-selected-slots.celtic-layout .tarot-slot:nth-child(1) { grid-row: 2; grid-column: 2; }
.tarot-selected-slots.celtic-layout .tarot-slot:nth-child(2) { grid-row: 2; grid-column: 3; }
.tarot-selected-slots.celtic-layout .tarot-slot:nth-child(3) { grid-row: 1; grid-column: 2 / span 2; justify-self: center; }
.tarot-selected-slots.celtic-layout .tarot-slot:nth-child(4) { grid-row: 3; grid-column: 2 / span 2; justify-self: center; }
.tarot-selected-slots.celtic-layout .tarot-slot:nth-child(5) { grid-row: 2; grid-column: 1; }
.tarot-selected-slots.celtic-layout .tarot-slot:nth-child(6) { grid-row: 2; grid-column: 4; }
.tarot-selected-slots.celtic-layout .tarot-slot:nth-child(7) { grid-row: 4; grid-column: 6; }
.tarot-selected-slots.celtic-layout .tarot-slot:nth-child(8) { grid-row: 3; grid-column: 6; }
.tarot-selected-slots.celtic-layout .tarot-slot:nth-child(9) { grid-row: 2; grid-column: 6; }
.tarot-selected-slots.celtic-layout .tarot-slot:nth-child(10) { grid-row: 1; grid-column: 6; }
@keyframes pulse-border { 0%,100% { border-color: var(--c-accent); } 50% { border-color: transparent; } }

/* ===== 타로: 카드 뒤집기 ===== */
.tarot-reveal-header { text-align: center; padding: 20px 0; }
.tarot-reveal-header h3 { font-size: 18px; color: var(--t-strong); }

.tarot-spread-layout {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
    padding: 16px 0;
}
.tarot-card-flip {
    width: 90px; text-align: center;
}
.tarot-card-flip .tarot-card-inner {
    position: relative; width: 90px; height: 135px;
    transform-style: preserve-3d; transition: transform 0.8s ease;
}
.tarot-card-flip .tarot-card-inner.flipped { transform: rotateY(180deg); }
.tarot-card-front-face, .tarot-card-back-face {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    backface-visibility: hidden; border-radius: 8px; overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.tarot-card-front-face { transform: rotateY(180deg); }
.tarot-card-front-face img, .tarot-card-back-face img { width: 100%; height: 100%; object-fit: cover; }
.tarot-card-position { font-size: 11px; color: var(--t-muted); margin-top: 6px; }
.tarot-card-name { font-size: 12px; color: var(--t-strong); font-weight: 600; margin-top: 2px; }

#tarotRevealBtn { width: 100%; margin-top: 16px; }
#tarotRevealBtn:disabled { opacity: 0.4; }

/* 뒤집기 화면: 켈틱 크로스 레이아웃 */
.tarot-spread-layout.celtic-cross {
    display: grid;
    grid-template-columns: repeat(6, 70px);
    grid-template-rows: repeat(4, auto);
    gap: 8px;
    justify-content: center;
    padding: 8px;
}
.tarot-spread-layout.celtic-cross .tarot-card-flip:nth-child(1) { grid-row: 2; grid-column: 2; }
.tarot-spread-layout.celtic-cross .tarot-card-flip:nth-child(2) { grid-row: 2; grid-column: 3; }
.tarot-spread-layout.celtic-cross .tarot-card-flip:nth-child(3) { grid-row: 1; grid-column: 2 / span 2; justify-self: center; }
.tarot-spread-layout.celtic-cross .tarot-card-flip:nth-child(4) { grid-row: 3; grid-column: 2 / span 2; justify-self: center; }
.tarot-spread-layout.celtic-cross .tarot-card-flip:nth-child(5) { grid-row: 2; grid-column: 1; }
.tarot-spread-layout.celtic-cross .tarot-card-flip:nth-child(6) { grid-row: 2; grid-column: 4; }
.tarot-spread-layout.celtic-cross .tarot-card-flip:nth-child(7) { grid-row: 4; grid-column: 6; }
.tarot-spread-layout.celtic-cross .tarot-card-flip:nth-child(8) { grid-row: 3; grid-column: 6; }
.tarot-spread-layout.celtic-cross .tarot-card-flip:nth-child(9) { grid-row: 2; grid-column: 6; }
.tarot-spread-layout.celtic-cross .tarot-card-flip:nth-child(10) { grid-row: 1; grid-column: 6; }

/* ===== 타로: 리딩 결과 ===== */
.tarot-result-header { text-align: center; padding: 20px 0 12px; }
.tarot-result-cards {
    display: flex; justify-content: center; gap: 12px;
    padding: 12px 0; overflow-x: auto;
}
.tarot-result-card-item { text-align: center; flex-shrink: 0; cursor: pointer; }
.tarot-result-card-item img { width: 80px; border-radius: 8px; box-shadow: var(--shadow-2); }
.tarot-result-card-name { font-size: 12px; font-weight: 600; color: var(--t-strong); margin-top: 6px; }
.tarot-result-card-position { font-size: 11px; color: var(--t-muted); }

.tarot-reading-box {
    background: var(--bg-card-alt); border-radius: 16px;
    padding: 20px; margin: 16px 0; position: relative;
}
.tarot-reading-text { font-size: 15px; line-height: 1.8; color: var(--t-body); }
.tarot-reading-text p { margin-bottom: 12px; }

.tarot-blur-overlay { position: relative; }
.tarot-blur-overlay > p { filter: blur(6px); user-select: none; }
.tarot-login-cta {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    text-align: center; z-index: 2;
}
.tarot-login-cta p { font-size: 14px; color: var(--t-strong); margin-bottom: 12px; font-weight: 600; }

.tarot-keywords { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.tarot-keyword {
    font-size: 12px; padding: 4px 10px; border-radius: 12px;
    background: rgba(255,217,147,0.15); color: var(--c-accent); font-weight: 500;
}

.tarot-saju-note {
    font-size: 13px; color: var(--t-sub); text-align: center;
    padding: 8px; background: var(--bg-card-alt); border-radius: 8px;
}

.tarot-result-actions {
    display: flex; gap: 10px; margin-top: 20px; padding-bottom: 20px;
}
.tarot-result-actions .btn { flex: 1; }

/* ===== 마이 탭 ===== */
.my-header { padding: 16px 0 12px; }
.my-header h2 { font-size: 22px; font-weight: 800; color: var(--t-strongest); }

.my-profile-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-card); border-radius: 16px;
    padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-1);
}
.my-profile-photo { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-card-alt); overflow: hidden; }
.my-profile-photo img { width: 100%; height: 100%; object-fit: cover; }
.my-profile-info { flex: 1; min-width: 0; overflow: hidden; }
.my-profile-name { font-size: 16px; font-weight: 700; color: var(--t-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.my-profile-saju { font-size: 13px; color: var(--t-sub); margin-top: 2px; }

.my-card {
    background: var(--bg-card); border-radius: 12px;
    padding: 16px; margin-bottom: 10px; box-shadow: var(--shadow-1);
}
.my-card-title { font-size: 14px; font-weight: 700; color: var(--t-strong); margin-bottom: 8px; }
.my-card-value { font-size: 24px; font-weight: 800; color: var(--c-accent); }

/* 내 사주 정보 카드 */
.my-saju-card { position: relative; }
.my-saju-content { margin-bottom: 12px; }
.my-saju-empty { font-size: 14px; color: var(--t-muted); }
.my-saju-registered { font-size: 15px; color: var(--t-strong); font-weight: 600; }
.my-saju-registered .my-saju-detail { font-size: 13px; color: var(--t-sub); font-weight: 400; margin-top: 4px; }
.my-saju-btn { font-size: 13px; padding: 8px 16px; }
.my-saju-warning {
    margin-top: 12px; padding: 12px; border-radius: 8px;
    background: rgba(255, 152, 0, 0.1); border: 1px solid rgba(255, 152, 0, 0.3);
    color: #e65100; font-size: 13px; line-height: 1.5;
}
@media (prefers-color-scheme: dark) {
    .my-saju-warning { background: rgba(255, 152, 0, 0.15); color: #ffb74d; }
}

/* 내 사주 정보 모달 */
/* [#375] mySajuModal body 직속 이동에 따른 .modal-overlay/.modal-content 기본 스타일 (이전엔 #section-my 부모 컨텍스트에 의존) */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-overlay[style*="display: flex"],
.modal-overlay[style*="display:flex"] { display: flex; }
.modal-content {
    background: var(--modal-bg, var(--bg-card));
    border: 1px solid var(--card-border, rgba(255,255,255,0.18));
    border-radius: 16px;
    padding: 24px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 48px rgba(0,0,0,0.45);
}
.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.modal-header h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--t-strong, var(--text-main)); }
.modal-close {
    background: transparent; border: none; color: var(--t-sub);
    font-size: 24px; cursor: pointer; padding: 4px 8px; line-height: 1;
}
.modal-close:hover { color: var(--t-strong, var(--text-main)); }
.modal-footer {
    display: flex; gap: 8px; justify-content: flex-end;
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--card-border, rgba(255,255,255,0.12));
}
body:has(.modal-overlay[style*="display: flex"]) .flow-cta-bar,
body:has(.modal-overlay[style*="display:flex"]) .flow-cta-bar { display: none !important; }

/* [#375] 내 이용권 화면 */
.tickets-header { text-align: left; padding: 4px 4px 16px; }
.tickets-header h2 { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--t-strong, var(--text-main)); }
.tickets-subtitle { margin: 0; font-size: 14px; color: var(--t-sub); line-height: 1.5; }

.tickets-status-card {
    background: var(--bg-card);
    border: 1px solid var(--card-border, rgba(255,255,255,0.12));
    border-radius: 16px;
    padding: 28px 20px;
    text-align: center;
    margin-bottom: 16px;
    box-shadow: var(--shadow-1, 0 4px 16px rgba(0,0,0,0.18));
}
.tickets-status-label { font-size: 14px; color: var(--t-sub); margin-bottom: 8px; }
.tickets-status-total {
    font-size: 56px; font-weight: 800;
    color: var(--c-accent, #FFD993);
    line-height: 1.1;
    display: flex; align-items: baseline; justify-content: center; gap: 4px;
}
.tickets-status-unit { font-size: 24px; font-weight: 600; color: var(--t-body); }
.tickets-status-breakdown {
    margin-top: 10px;
    font-size: 15px; color: var(--t-sub);
    display: flex; justify-content: center; gap: 6px;
}
.tickets-status-divider { color: var(--t-muted); }

.tickets-admin-note {
    background: rgba(255, 217, 147, 0.12);
    border: 1px solid rgba(255, 217, 147, 0.28);
    color: var(--c-accent, #FFD993);
    padding: 12px 16px;
    border-radius: 12px;
    text-align: center;
    font-size: 14px; font-weight: 600;
    margin-bottom: 16px;
}

.tickets-charge-btn {
    width: 100%;
    min-height: 56px;
    font-size: 18px; font-weight: 700;
    margin-bottom: 18px;
}

.tickets-trust-row {
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
    margin-bottom: 8px;
}
.tickets-trust-desc {
    text-align: center;
    font-size: 13px; color: var(--t-sub);
    margin: 0 0 18px;
}

.tickets-info-card {
    background: var(--bg-card-2, rgba(255,255,255,0.04));
    border: 1px solid var(--card-border, rgba(255,255,255,0.10));
    border-radius: 12px;
    padding: 18px;
}
.tickets-info-title { font-weight: 700; margin-bottom: 10px; font-size: 16px; color: var(--t-strong, var(--text-main)); }
.tickets-info-list { margin: 0; padding-left: 18px; color: var(--t-body); font-size: 14px; line-height: 1.7; }
.tickets-info-list li { margin: 2px 0; }

.my-saju-modal { max-width: 400px; }
.my-saju-modal .field-label { display: block; font-size: 13px; font-weight: 600; color: var(--t-sub); margin: 12px 0 4px; }
.my-saju-modal .field-label:first-child { margin-top: 0; }
.my-saju-modal .field-input { margin-bottom: 0; }
.my-saju-method-list { display: flex; flex-direction: column; gap: 8px; }
.my-saju-method-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px; border-radius: 12px; cursor: pointer;
    background: var(--bg-card-alt); border: 1px solid var(--card-border);
    transition: background 0.15s;
}
.my-saju-method-item:hover { background: var(--bg-card-hover, rgba(255,255,255,0.08)); }
.my-saju-method-item .method-name { font-size: 15px; font-weight: 600; color: var(--t-strong); }
.my-saju-method-item .method-info { font-size: 12px; color: var(--t-sub); margin-top: 2px; }
.my-saju-method-item .method-badge { font-size: 11px; color: var(--c-accent); font-weight: 600; }

.my-menu { margin-top: 20px; padding-bottom: 20px; }
.my-menu-item {
    display: block; padding: 14px 0; border-bottom: 1px solid var(--b-default);
    font-size: 14px; color: var(--t-body); text-decoration: none;
    background: none; border: none; width: 100%; text-align: left;
    font-family: inherit; cursor: pointer;
}
.my-menu-item:last-child { border-bottom: none; color: var(--c-danger, #EF4444); }

/* ===== 모바일 반응형: 타로 + 홈 + 탭바 ===== */
@media (max-width: 767px) {
    /* 탭바 safe-area */
    /* 탭바: 모바일에서는 padding으로 높이 결정, height 불필요 */

    /* 카드 팬: 모바일 — 가로 스크롤 유지, 패딩만 조정 */
    .tarot-card-fan { padding: 12px 8px; }
    .tarot-fan-card { width: 46px; margin-left: -30px; }
    .tarot-fan-card:first-child,
    .tarot-fan-card:nth-child(26n+1) { margin-left: 0; }

    /* 켈틱 크로스 슬롯: 모바일 축소 */
    .tarot-selected-slots.celtic-layout {
        grid-template-columns: repeat(6, 44px);
        grid-template-rows: repeat(4, 66px);
        gap: 3px;
    }

    /* 카드 뒤집기: 모바일 카드 크기 */
    .tarot-card-flip { width: 75px; }
    .tarot-card-flip .tarot-card-inner { width: 75px; height: 112px; }

    /* 켈틱 크로스 뒤집기: 모바일 축소 */
    .tarot-spread-layout.celtic-cross {
        grid-template-columns: repeat(6, 50px);
        gap: 4px;
    }
    .tarot-spread-layout.celtic-cross .tarot-card-flip { width: 50px; }
    .tarot-spread-layout.celtic-cross .tarot-card-inner { width: 50px; height: 75px; }

    /* 홈 카드: 고도 카드 텍스트 크기 */
    .home-card-altitude-value { font-size: 28px; }

    /* 스프레드 칩: 줄바꿈 */
    .tarot-spread-chips { gap: 6px; }
    .tarot-spread-chip { font-size: 12px; padding: 6px 10px; }

    /* 결과 카드 썸네일 축소 */
    .tarot-result-card-item img { width: 65px; }
}

/* ===== 인물 전환 칩 바 ===== */
.person-chips-bar {
    padding: 8px 16px 4px;
    border-bottom: 1px solid var(--b-default);
    background: var(--bg-card);
}
.person-chips-scroll {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}
.person-chips-scroll::-webkit-scrollbar { display: none; }
.person-chip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1.5px solid var(--b-default);
    background: transparent;
    color: var(--t-sub);
    font-size: 13px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.person-chip.active {
    background: var(--c-primary);
    color: #fff;
    border-color: var(--c-primary);
    font-weight: 700;
}
.person-chip-rel {
    font-size: 10px;
    opacity: 0.7;
}
.person-chip-add {
    font-size: 18px;
    padding: 4px 12px;
    color: var(--t-muted);
}
.person-chip-add:hover { color: var(--c-accent); }

@media (prefers-color-scheme: dark) {
    .person-chips-bar { background: #0F1724; border-color: rgba(255,255,255,0.06); }
    .person-chip { border-color: rgba(255,255,255,0.12); color: var(--t-sub); }
    .person-chip.active { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); }
}

/* ===== 기록 탭 ===== */
.record-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 0 8px;
}
.record-header h2 { font-size: 20px; font-weight: 800; color: var(--t-strongest); }
.record-month-select {
    padding: 6px 12px; border: 1px solid var(--b-default); border-radius: 8px;
    background: var(--bg-card-alt); color: var(--t-body); font-size: 13px; font-family: inherit;
}

/* 타임라인 */
.record-timeline { padding: 8px 0 80px; }
.timeline-date {
    font-size: 13px; font-weight: 700; color: var(--t-sub);
    padding: 16px 0 6px 28px; position: relative;
}
.timeline-date::before {
    content: '\25CF'; position: absolute; left: 6px; top: 16px;
    font-size: 10px; color: var(--c-accent);
}
.timeline-item {
    display: flex; align-items: flex-start; gap: 0;
    padding: 4px 0 4px 16px; position: relative;
    min-height: 48px;
}
.timeline-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--b-default); margin-top: 8px;
    flex-shrink: 0; z-index: 1;
}
.timeline-line {
    position: absolute; left: 19px; top: 20px; bottom: -4px;
    width: 2px; background: var(--b-default);
}
.timeline-item:last-child .timeline-line { display: none; }
.timeline-content {
    display: flex; align-items: flex-start; gap: 8px;
    flex: 1;
    background: var(--bg-card); border-radius: 10px;
    padding: 10px 12px; margin-left: 8px;
    box-shadow: var(--shadow-1);
}
.timeline-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.timeline-body { flex: 1; min-width: 0; }
.timeline-title { font-size: 13px; font-weight: 700; color: var(--t-strong); }
.timeline-desc { font-size: 12px; color: var(--t-body); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timeline-sub { font-size: 11px; color: var(--t-muted); margin-top: 2px; }
.timeline-time { font-size: 11px; color: var(--t-muted); flex-shrink: 0; margin-top: 2px; }

/* 빈 상태 */
.record-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 20px 40px; text-align: center;
}
.empty-icon { font-size: 48px; margin-bottom: 16px; }
.empty-title { font-size: 18px; font-weight: 700; color: var(--t-strongest); margin-bottom: 6px; }
.empty-desc { font-size: 14px; color: var(--t-sub); line-height: 1.6; margin-bottom: 20px; }
.empty-actions { display: flex; gap: 10px; }
.empty-actions .btn { min-width: 100px; }

/* [#362] 타인 사주 정보 화면 — 시니어 UX (16px+, 56px+) */
.other-persons-header {
    padding: 16px 20px 12px;
}
.other-persons-header h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--t-strongest);
    margin: 0;
}
.other-persons-list {
    padding: 8px 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
/* [#375] div + 본문 button + 삭제 button 분리 구조로 변경 */
.other-person-card {
    display: flex;
    align-items: stretch;
    background: var(--bg-card);
    border: 1px solid var(--b-default);
    border-radius: 14px;
    overflow: hidden;
    transition: background 0.15s;
}
.other-person-card:hover,
.other-person-card:focus-within {
    background: var(--bg-card-alt);
    box-shadow: 0 0 0 2px var(--c-accent);
}
.other-person-main {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 72px;
    padding: 16px 14px 16px 18px;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    color: inherit;
    transition: transform 0.1s;
}
.other-person-main:active { transform: scale(0.98); }
.other-person-main:focus-visible { outline: none; }
.other-person-delete {
    width: 56px; flex-shrink: 0;
    background: transparent;
    border: none; border-left: 1px solid var(--b-default);
    color: var(--t-sub);
    font-size: 22px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.other-person-delete:hover {
    background: rgba(220, 60, 60, 0.12);
    color: #ff6b6b;
}
.other-person-delete:focus-visible {
    outline: 3px solid var(--c-accent, #FFD993); outline-offset: -3px;
}
/* [#378] 목록 하단 "가족·지인 사주 봐주기" 추가 등록 버튼 */
.other-persons-add-row {
    padding: 8px 16px 24px;
    display: flex;
    justify-content: center;
}
.other-persons-add-btn {
    width: 100%;
    max-width: 360px;
    min-height: 56px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 14px;
}
/* [#378] #compat-input의 입력 모드 탭 — #input과 시각 통일 + 위·아래 여유 */
.compat-input-mode-control {
    margin: 8px 16px 16px;
}
#section-compat-input .input-mode-panel {
    padding: 0 16px 16px;
}
/* [#376] .other-person-avatar 영역 제거 (타인 사주 정보는 프로필 이미지 관리 X — 운영자 명시) */
.other-person-body { flex: 1; min-width: 0; }
.other-person-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--t-strongest);
    margin-bottom: 2px;
}
.other-person-meta {
    font-size: 14px;
    color: var(--t-sub);
    line-height: 1.5;
}
.other-person-arrow {
    font-size: 20px;
    color: var(--t-muted);
    flex-shrink: 0;
}
.other-persons-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 20px 40px; text-align: center;
}
.other-persons-empty .empty-icon { font-size: 48px; margin-bottom: 16px; }
.other-persons-empty .empty-title { font-size: 18px; font-weight: 700; color: var(--t-strongest); margin-bottom: 6px; }
.other-persons-empty .empty-desc { font-size: 15px; color: var(--t-sub); line-height: 1.6; margin-bottom: 20px; }

/* FAB (하단 고정 버튼) */
.record-fab {
    position: fixed; bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 24px);
    left: 50%; transform: translateX(-50%);
    padding: 12px 24px; border-radius: 24px;
    background: var(--c-primary); color: #fff; border: none;
    font-size: 14px; font-weight: 700; font-family: inherit;
    box-shadow: 0 4px 16px rgba(27,42,74,0.3); cursor: pointer;
    z-index: 50; transition: transform 0.2s;
}
.record-fab:active { transform: translateX(-50%) scale(0.95); }

@media (prefers-color-scheme: dark) {
    .record-month-select { background: #1A2335; border-color: rgba(255,255,255,0.1); }
    .timeline-content { background: #1A2335; }
    .record-fab { background: var(--c-accent); color: var(--c-primary); }
}

/* ===== 인트로 타로 링크 ===== */
.intro-tarot-link {
    display: block; text-align: center; margin-top: 16px;
    color: rgba(255,255,255,0.7); font-size: 14px; text-decoration: none;
    transition: color 0.2s;
}
.intro-tarot-link:hover { color: #fff; }

/* [BM Track 1 #349] 인트로 신뢰 배지 + 차별점 한 줄 */
.intro-trust-row {
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
    margin-top: 16px;
}
.intro-trust-row .trust-badge {
    background: rgba(255, 255, 255, 0.85);
    color: var(--c-primary, #1B2A4A);
    font-size: 14px; font-weight: 700;
    padding: 6px 12px; border-radius: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.intro-trust-desc {
    text-align: center;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.85);
    margin: 12px 0 0;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
/* [BM Track 1 ③ #350] 인트로 무료 AI 차별점 메시지 */
.intro-bm-compare {
    text-align: center;
    font-size: 14px;
    color: rgba(255, 217, 147, 0.95);
    margin: 8px 12px 0;
    line-height: 1.5;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    letter-spacing: -0.2px;
}
.intro-bm-compare strong {
    color: #FFD993;
    font-weight: 700;
}

/* ===== 홈 온보딩형 빈 상태 ===== */
.home-empty-onboarding {
    text-align: center; padding: 40px 20px;
    background: var(--bg-card); border-radius: 16px;
    margin-bottom: 12px; box-shadow: var(--shadow-1);
}
.home-empty-onboarding .empty-mountain { font-size: 48px; margin-bottom: 16px; }
.home-empty-onboarding .empty-title { font-size: 17px; font-weight: 700; color: var(--t-strongest); line-height: 1.5; margin-bottom: 8px; }
.home-empty-onboarding .empty-desc { font-size: 13px; color: var(--t-sub); line-height: 1.6; margin-bottom: 20px; }
.home-empty-onboarding .btn { max-width: 200px; margin: 0 auto; }
.home-tarot-sub-link {
    display: block; text-align: center; margin-top: 14px;
    color: var(--c-accent); font-size: 13px; text-decoration: none; font-weight: 500;
}

/* ===== 홈 타인만 요약 ===== */
.home-others-summary {
    background: linear-gradient(135deg, var(--c-primary), #2a3f6a);
    color: #fff; border-radius: 16px; padding: 16px 20px;
    margin-bottom: 12px; cursor: pointer;
}
.home-others-name { font-size: 18px; font-weight: 700; color: var(--c-accent); margin-top: 4px; }
.home-others-rel { font-size: 13px; color: rgba(255,255,255,0.7); margin-top: 2px; }

.home-self-cta {
    text-align: center; padding: 24px 20px;
    background: var(--bg-card); border-radius: 16px;
    margin-bottom: 12px; box-shadow: var(--shadow-1);
}
.home-self-cta .empty-mountain { font-size: 36px; margin-bottom: 10px; }
.home-self-cta .empty-title { font-size: 15px; font-weight: 700; color: var(--t-strong); margin-bottom: 12px; }

/* ===== 홈 인물 배지 ===== */
.home-person-badge {
    display: inline-block; font-size: 12px; color: rgba(255,255,255,0.7);
    margin-top: 8px; cursor: pointer;
}
.home-person-badge:hover { color: #fff; }

/* ===== 홈 타로만 요약 ===== */
.home-tarot-summary {
    background: var(--bg-card); border-radius: 16px;
    padding: 16px 20px; margin-bottom: 12px;
    box-shadow: var(--shadow-1); cursor: pointer;
}
.home-tarot-summary-icon { font-size: 20px; }
.home-tarot-summary-question { font-size: 14px; font-weight: 600; color: var(--t-strong); margin-top: 4px; }
.home-tarot-summary-date { font-size: 12px; color: var(--t-muted); margin-top: 2px; }

/* ===== 탭 공통 빈 상태 ===== */
.tab-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 80px 20px 40px; text-align: center;
}
.tab-empty-state .empty-icon { font-size: 48px; margin-bottom: 16px; }
.tab-empty-state .empty-title { font-size: 17px; font-weight: 700; color: var(--t-strongest); line-height: 1.5; margin-bottom: 8px; }
.tab-empty-state .empty-desc { font-size: 13px; color: var(--t-sub); line-height: 1.6; margin-bottom: 20px; }
.tab-empty-state .btn { max-width: 200px; }

/* ===== Phase 1 placeholder: 이용흐름개편 신규 5개 섹션 (#345) =====
   Phase 2/3에서 실제로는 #section-result + body.flow-* 가시성 토글로 동작.
   placeholder DOM은 안전망(데이터 없거나 fallback 실패 시)으로만 유지. */
.section-flow-placeholder {
    display: none;
    min-height: 60vh;
    padding: 80px 24px 40px;
    align-items: center; justify-content: center;
}
.section-flow-placeholder.active { display: flex; }
.section-flow-placeholder .flow-placeholder-content {
    max-width: 480px; width: 100%;
    text-align: center;
}
.section-flow-placeholder .flow-placeholder-icon { font-size: 56px; margin-bottom: 20px; }
.section-flow-placeholder h2 {
    font-size: 24px; font-weight: 700;
    color: var(--t-strongest);
    margin: 0 0 12px;
    line-height: 1.4;
}
.section-flow-placeholder p {
    font-size: 18px;
    color: var(--t-strong);
    line-height: 1.6;
    margin: 0 0 8px;
}
.section-flow-placeholder .placeholder-sub {
    font-size: 15px;
    color: var(--t-sub);
    margin-bottom: 28px;
}
.section-flow-placeholder .flow-placeholder-actions {
    display: flex; flex-direction: column; gap: 12px;
    max-width: 320px; margin: 0 auto;
}
.section-flow-placeholder .flow-placeholder-actions .btn {
    min-height: 56px;
    font-size: 18px;
}

/* [#369p] 차트 인사이트(B9 #349) DOM·CSS 제거 — 운영자 명시 "필요없는 문구" + 능선 화면 하단 회색 띠 정체. generateRidgeInsight 함수는 tarot.js 사용처 유지 */
/* [#368] 표로 보기 기능 제거 — chart-table-row/toggle/box, chart-data-table CSS rules 삭제 (운영자 결정) */

/* ===== Phase 2/3: 이용흐름개편 — body.flow-* 가시성 토글 (#346) =====
   기존 #section-result DOM을 그대로 두고, body class로 화면 단계별 카드 가시성을 분기.
   기획서 §3.2 "DOM은 보존하고 표시 영역만 분기" 정합. 시니어 UX(본문 18px+ / 터치 56px+) 적용. */

/* 만세력 화면 (#manse): result-hero + 사주원국 표만 노출 */
/* [#469] flow-manse 모드에서 .result-hero(현재 고도 큰 숫자 fixed) 숨김 누락 fix.
   flow-saju·flow-compat-detail 자매 패턴(line 5920~5922)과 정합. */
body.flow-manse #section-result .chart-card-wide,
body.flow-manse #section-result .result-hero,
body.flow-manse #section-result #cardSajuReading .saju-reading-text,
body.flow-manse #section-result #cardAdvice,
body.flow-manse #section-result #cardCompatibility,
body.flow-manse #section-result #lifeRecordCard,
body.flow-manse #section-result #adContainer { display: none !important; }

/* 인생능선 화면 (#ridge): result-hero + 차트 카드만 노출 */
body.flow-ridge #section-result #cardSajuReading,
body.flow-ridge #section-result #cardAdvice,
body.flow-ridge #section-result #cardCompatibility,
body.flow-ridge #section-result #lifeRecordCard,
body.flow-ridge #section-result #adContainer { display: none !important; }

/* 사주풀이 상세 화면 (#saju): result-hero + 사주풀이 텍스트 + 조언 + 삶의 기록 */
body.flow-saju #section-result .chart-card-wide,
body.flow-saju #section-result #cardCompatibility,
body.flow-saju #section-result #cardSajuReading .result-pillars-area,
/* [#368] 사주풀이 화면에서 "지금의 흐름 (현재 고도)" 헤로 영역 숨김 — 운영자 결함 보고 */
body.flow-saju #section-result .result-hero,
/* [#369b P2-1] 궁합 풀이 상세 화면에서도 동일 — flow-saju 패턴 누락 fix */
body.flow-compat-detail #section-result .result-hero { display: none !important; }

/* 궁합 능선 화면 (#compat-ridge): result-hero + 차트 + 궁합 결과(점수·해석)만 노출
   [#365] 입력폼은 #compat-input 독립 화면으로 분리됨 → cardCompatibility의 #compatInput 완전 숨김 */
/* [#369g 운영자 #5] 궁합 능선(#compat-ridge)에서 cardCompatibility 전체 숨김 — 풀이 상세는 #compat-detail에서만 표시 (사주풀이와 동일 패턴). 이전: #compatInput만 숨겼으나 #compatResult가 그래프 배경 위에 떠있어 모달처럼 보이는 결함 */
body.flow-compat-ridge #section-result #cardSajuReading,
body.flow-compat-ridge #section-result #cardAdvice,
body.flow-compat-ridge #section-result #cardCompatibility,
body.flow-compat-ridge #section-result #lifeRecordCard,
body.flow-compat-ridge #section-result #adContainer { display: none !important; }

/* 궁합 풀이 상세 화면 (#compat-detail): 신규 cardCompatDetail만 노출.
   [#477] cardAdvice·cardCompatibility 추가 숨김 — 옛 흐름의 본인 조언·입력 카드 잔존이 신규
   궁합 본문(cardCompatDetail) 대신 노출되던 결함 fix. 옛 cardCompatibility는 신규 헬퍼가
   채우지 않으므로 비표시. */
body.flow-compat-detail #section-result .chart-card-wide,
body.flow-compat-detail #section-result #cardSajuReading,
body.flow-compat-detail #section-result #cardAdvice,
body.flow-compat-detail #section-result #cardCompatibility,
body.flow-compat-detail #section-result #lifeRecordCard,
body.flow-compat-detail #section-result #adContainer { display: none !important; }
/* [#477] cardCompatDetail은 body.flow-compat-detail일 때만 노출.
   다른 모드(flow-manse·flow-saju 등)에서는 인라인 style="display:none"으로 숨김 유지. */
body.flow-compat-detail #section-result #cardCompatDetail { display: block !important; }

/* Flow CTA 바: 화면 단계별 다음 진입 버튼 컨테이너 */
.flow-cta-bar {
    display: none;
    flex-direction: column;
    gap: 12px;
    max-width: 480px;
    margin: 24px auto 32px;
    padding: 0 16px;
}

/* [#372] 비로그인(preview)/로그인 분기 — flow-cta-ridge 안에서 동시 정의 후 mode 별 표시 토글 */
.flow-cta-bar .flow-cta-login { display: none; }
body.preview-mode .flow-cta-bar.flow-cta-ridge .flow-cta-login { display: block; }
body.preview-mode .flow-cta-bar.flow-cta-ridge .flow-cta-loggedin { display: none !important; }

/* [#372] 만세력 진입 버튼 라벨 분기 — 본인/타인 텍스트 토글 */
.flow-cta-manse-btn .flow-cta-label-other { display: none; }
body.viewing-other .flow-cta-manse-btn .flow-cta-label-self { display: none; }
body.viewing-other .flow-cta-manse-btn .flow-cta-label-other { display: inline; }
body.flow-manse .flow-cta-bar.flow-cta-manse,
body.flow-ridge .flow-cta-bar.flow-cta-ridge,
body.flow-saju .flow-cta-bar.flow-cta-saju,
body.flow-compat-ridge .flow-cta-bar.flow-cta-compat-ridge,
body.flow-compat-detail .flow-cta-bar.flow-cta-compat-detail { display: flex; }
.flow-cta-bar .btn {
    min-height: 56px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 12px;
    cursor: pointer;
    /* [#482] iOS Safari 텍스트 노드 hit 우선 휴리스틱 차단 — 정세경 폰(iPhone) 텍스트 부분 터치 안 됨 결함 fix.
       텍스트 선택·long-press 우회를 막아 button 박스 hit이 텍스트 hit보다 우선되게 강제. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}
/* [#482] button 내부 모든 자식 요소(.cta-label·.flow-cta-banner-icon·.flow-cta-label-self·.flow-cta-label-other)의
   hit을 부모 button으로 위임. iOS hit testing이 텍스트 글리프 경계로 떨어지는 분기 자체 제거. */
.flow-cta-bar .btn > * { pointer-events: none; }
.flow-cta-bar .flow-cta-hint {
    text-align: center;
    font-size: 15px;
    color: var(--t-sub);
    margin: 4px 0 0;
    line-height: 1.5;
}
.flow-cta-bar .flow-cta-banner-icon {
    margin-right: 6px;
}

/* Flow 모드 헤더 라벨 (선택: section 상단에 단계 표시) */
.flow-step-label {
    display: none;
    text-align: center;
    font-size: 15px;
    color: var(--t-sub);
    margin: 12px 0 -8px;
    letter-spacing: 0.02em;
}
body.flow-manse .flow-step-label.flow-step-manse,
body.flow-ridge .flow-step-label.flow-step-ridge,
body.flow-saju .flow-step-label.flow-step-saju,
body.flow-compat-ridge .flow-step-label.flow-step-compat-ridge,
body.flow-compat-detail .flow-step-label.flow-step-compat-detail { display: block; }

/* 사주풀이 상세 진입 모달 (D1·D2 — 자동결제 안심 안내) */
.saju-gate-modal-content {
    text-align: center;
    padding: 8px 4px 4px;
}
.saju-gate-modal-content .gate-icon {
    font-size: 40px;
    margin-bottom: 12px;
}
.saju-gate-modal-content .gate-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--t-strongest);
    margin: 0 0 12px;
}
.saju-gate-modal-content .gate-body {
    font-size: 18px;
    color: var(--t-strong);
    line-height: 1.6;
    margin: 0 0 8px;
}
.saju-gate-modal-content .gate-noautopay {
    font-size: 16px;
    font-weight: 600;
    color: var(--c-primary, #1B2A4A);
    background: rgba(27, 42, 74, 0.06);
    padding: 8px 14px;
    border-radius: 8px;
    display: inline-block;
    margin: 6px 0;
}
.saju-gate-modal-content .gate-remaining {
    font-size: 16px;
    color: var(--t-sub);
    margin: 6px 0 18px;
}
.saju-gate-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 320px;
    margin: 0 auto;
}
.saju-gate-modal-actions .btn {
    min-height: 56px;
    font-size: 18px;
    font-weight: 700;
    border-radius: 12px;
}

/* ===== 사주 탭 인물 라벨 ===== */
.result-hero-person-label {
    font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 4px;
}

/* ===== 마이 탭 인물 목록 ===== */
.my-person-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 0; border-bottom: 1px solid var(--b-default); cursor: pointer;
}
.my-person-item:last-child { border-bottom: none; }
.my-person-name { font-size: 14px; font-weight: 600; color: var(--t-strong); }
.my-person-rel { font-size: 11px; color: var(--c-accent); background: rgba(255,217,147,0.15); padding: 2px 8px; border-radius: 10px; margin-left: 6px; }
.my-person-meta { font-size: 12px; color: var(--t-muted); }

/* ===== 기록 탭 필터 칩 ===== */
.record-filter-chips {
    display: flex; gap: 6px; padding: 8px 0; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.record-filter-chips::-webkit-scrollbar { display: none; }
.record-filter-chip {
    flex-shrink: 0; padding: 6px 14px; border-radius: 16px;
    border: 1px solid var(--b-default); background: transparent;
    color: var(--t-sub); font-size: 12px; font-family: inherit; font-weight: 500;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
}
.record-filter-chip.active {
    background: var(--c-primary); color: #fff; border-color: var(--c-primary);
}

/* ===== 타로 상태 배너 ===== */
.tarot-status-banner {
    background: var(--bg-card-alt, var(--bg-card)); border-radius: 10px; padding: 10px 14px;
    font-size: 13px; color: var(--t-body); margin-bottom: 12px;
}
.tarot-status-banner a { color: var(--c-accent); text-decoration: none; font-weight: 600; }

/* ===== 타로 인물 선택 ===== */
.tarot-person-select { margin-bottom: 12px; }
.tarot-person-select-label { font-size: 13px; color: var(--t-sub); margin-bottom: 6px; }
.tarot-person-chips { display: flex; gap: 6px; flex-wrap: wrap; }

/* [#365] 궁합 입력 독립 화면 (#section-compat-input) + 상대방 사주원국 (#section-compat-manse) */
#section-compat-input,
#section-compat-manse {
    padding: 24px 16px 80px;
    max-width: 600px;
    margin: 0 auto;
}
.compat-input-header { text-align: center; margin: 0 0 24px; }
.compat-input-title { font-size: 24px; font-weight: 700; color: var(--t-strong); margin: 0 0 8px; }
.compat-input-subtitle { font-size: 16px; color: var(--t-sub); margin: 0; line-height: 1.5; }

#compatStepContainer { position: relative; min-height: 360px; }
#compatStepContainer .step { display: none; }
/* [#368] display:block 결함 수정 — 부모 .step.active의 display:flex(가운데 정렬용)를 override해서 입력란이 좌측 정렬되던 결함 해소 */
#compatStepContainer .step.active { display: flex; }

.compat-manse-header { text-align: center; margin: 0 0 16px; padding-top: 8px; position: relative; }
.compat-manse-header .step-back {
    position: absolute; left: 0; top: 0;
    background: transparent; border: none; font-size: 28px; cursor: pointer; color: var(--t-strong);
    width: 44px; height: 44px;
}
.compat-manse-title { font-size: 22px; font-weight: 700; color: var(--t-strong); margin: 0 0 6px; }
.compat-manse-context { font-size: 16px; color: var(--t-sub); margin: 0 0 4px; }

.pillars-area-wrap { margin: 16px 0 24px; }

.compat-manse-cta { text-align: center; padding: 16px 0; }
.compat-manse-cta .btn { min-height: 56px; font-size: 18px; font-weight: 700; border-radius: 12px; min-width: 240px; }
.compat-manse-hint { font-size: 14px; color: var(--t-sub); margin: 8px 0 0; }

@media (prefers-color-scheme: dark) {
    .record-filter-chip.active { background: var(--c-accent); color: var(--c-primary); border-color: var(--c-accent); }
    .my-person-rel { background: rgba(255,217,147,0.1); }
}

/* [#D fix 2026-05-23] 이용권 모달 안심 배지 — 토큰 기반 다크/라이트 양방향 가시 */
.ticket-modal-badge {
    background: var(--bg-subtle, rgba(27,42,74,0.08));
    color: var(--modal-title-color);
    font-size: 14px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 14px;
}
@media (prefers-color-scheme: dark) {
    .ticket-modal-badge {
        background: rgba(255,255,255,0.08);
    }
}

/* [#380j] 이용권 충전 모달 카드 — 라이트 모드 흰 배경 묻힘 결함 fix */
.ticket-product-grid {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.ticket-product-card {
    background: var(--bg-card-alt, #EDF1F7);
    border: 1.5px solid rgba(27,42,74,0.12);
    border-radius: 12px;
    padding: 20px 16px;
    text-align: center;
    min-width: 140px;
    flex: 1;
    position: relative;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(27,42,74,0.06);
    transition: all 0.18s ease;
}
.ticket-product-card:hover {
    border-color: var(--c-primary, #1B2A4A);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(27,42,74,0.15);
}
.ticket-product-card:active {
    transform: translateY(0);
}
.ticket-product-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: var(--c-accent, #FFD993);
    color: var(--c-primary, #1B2A4A);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.ticket-product-qty {
    font-size: 28px;
    font-weight: 800;
    color: var(--t-strong, #1B2A4A);
    margin: 0 0 8px;
}
.ticket-product-price {
    font-size: 16px;
    font-weight: 600;
    color: var(--t-strong, #1B2A4A);
}
.ticket-product-unit {
    font-size: 12px;
    color: var(--t-sub, #6B7A8D);
    margin-top: 4px;
}

@media (prefers-color-scheme: dark) {
    .ticket-product-card {
        background: rgba(255,255,255,0.05);
        border-color: rgba(255,255,255,0.12);
        box-shadow: 0 2px 6px rgba(0,0,0,0.30);
    }
    .ticket-product-card:hover {
        border-color: var(--c-accent, #FFD993);
        box-shadow: 0 6px 16px rgba(255,217,147,0.15);
    }
}

/* [#380h] 종이 티켓 시각화 — 운영자 명시 (단순화: 좌우 노치 + 골드 그라데이션) */
.ticket-paper-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: linear-gradient(135deg, #FFE4A8 0%, #FFD993 50%, #FFB88C 100%);
    color: var(--c-primary, #1B2A4A);
    padding: 24px 36px;
    border-radius: 16px;
    margin: 24px auto;
    max-width: 280px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(27,42,74,0.18);
    border: 1.5px dashed rgba(255,255,255,0.55);
}
.ticket-paper-visual::before,
.ticket-paper-visual::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bg-card, #FFFFFF);
    transform: translateY(-50%);
    box-shadow: inset 0 0 0 1.5px rgba(27,42,74,0.10);
    z-index: 1;
}
.ticket-paper-visual::before { left: -10px; }
.ticket-paper-visual::after { right: -10px; }
.ticket-paper-icon { font-size: 32px; line-height: 1; }
.ticket-paper-amount { font-size: 22px; font-weight: 800; letter-spacing: -0.3px; }

@media (prefers-color-scheme: dark) {
    .ticket-paper-visual {
        background: linear-gradient(135deg, rgba(255,228,168,0.85) 0%, rgba(255,217,147,0.85) 50%, rgba(255,184,140,0.80) 100%);
        box-shadow: 0 4px 16px rgba(0,0,0,0.40);
        border-color: rgba(255,255,255,0.30);
    }
    .ticket-paper-visual::before,
    .ticket-paper-visual::after {
        background: var(--bg-card, #1A2335);
        box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.15);
    }
}

/* [#379] 이용권 차감 시각화 카드 — 기능정의서 §8.3 (보존, 다른 위치에서 사용 가능) */
.ticket-visual-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 16px auto;
    max-width: 360px;
    background: linear-gradient(135deg, rgba(255,217,147,0.18), rgba(255,184,140,0.10));
    border: 1px solid rgba(255,217,147,0.50);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 8px rgba(27,42,74,0.08);
}
.ticket-visual-left {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-right: 16px;
    border-right: 1px dashed rgba(27,42,74,0.18);
    min-width: 92px;
}
.ticket-visual-icon { font-size: 28px; line-height: 1; margin-bottom: 6px; }
.ticket-visual-use {
    font-size: 14px;
    color: var(--t-sub);
    font-weight: 500;
}
.ticket-visual-use strong {
    display: block;
    font-size: 18px;
    color: var(--t-strong);
    font-weight: 800;
    margin-top: 2px;
}
.ticket-visual-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 16px;
    text-align: left;
}
.ticket-visual-balance-label {
    font-size: 13px;
    color: var(--t-sub);
    line-height: 1.4;
}
.ticket-visual-balance-value {
    font-size: 17px;
    color: var(--t-strong);
    font-weight: 700;
    margin-top: 2px;
}
.ticket-visual-arrow {
    font-size: 14px;
    color: var(--t-sub);
    margin: 4px 0;
    line-height: 1;
}
.ticket-visual-after-label {
    font-size: 13px;
    color: var(--t-sub);
    line-height: 1.4;
}
.ticket-visual-after-value {
    font-size: 17px;
    color: var(--c-primary);
    font-weight: 800;
    margin-top: 2px;
}

@media (prefers-color-scheme: dark) {
    .ticket-visual-card {
        background: linear-gradient(135deg, rgba(255,217,147,0.10), rgba(255,184,140,0.06));
        border-color: rgba(255,217,147,0.30);
        box-shadow: 0 2px 8px rgba(0,0,0,0.30);
    }
    .ticket-visual-left { border-right-color: rgba(255,255,255,0.18); }
    .ticket-visual-after-value { color: var(--c-accent); }
}

/* ============================================================
   [#438 P5 단계 2 — 2026-05-22] 궁합 시트/모달 통합 패턴
   - 모바일(<768px): 바텀시트 100dvh
   - PC(≥768px): 중앙 모달 480px
   - opacity 20% (Sheet: 토스 패턴 — Parent View 인지)
   - 차감 Alert는 별도 (opacity 40% / 중앙)
   - D4b 오버레이: 본인 능선 위 점수 카드 + CTA
   ============================================================ */

/* === Sheet 컨테이너 === */
.compat-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: none;
}
.compat-sheet[aria-hidden="false"] {
    pointer-events: auto;
}
.compat-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.3s ease;
    cursor: pointer;
}
.compat-sheet[aria-hidden="false"] .compat-sheet-backdrop {
    background: rgba(0, 0, 0, 0.20);  /* Sheet opacity 20% (토스 의도) */
}
.compat-sheet-panel {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 100vh;
    height: 100dvh;
    background: var(--bg-card, #fff);
    border-radius: 20px 20px 0 0;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.12);
}
.compat-sheet[aria-hidden="false"] .compat-sheet-panel {
    transform: translateY(0);
}

/* === Sheet 헤더 === */
.compat-sheet-header {
    position: relative;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 56px 12px 20px;
    border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.06));
    flex-shrink: 0;
}
.compat-sheet-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--t-strong);
    margin: 0 0 4px;
}
.compat-sheet-subtitle {
    font-size: 15px;
    color: var(--t-sub);
    margin: 0;
}
.compat-sheet-close {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
    width: 48px; height: 48px;  /* 시니어 터치 48px+ */
    font-size: 22px;
    color: var(--t-strong);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.compat-sheet-close:hover,
.compat-sheet-close:focus-visible {
    background: rgba(0,0,0,0.06);
    outline: none;
}

/* === Sheet 진행률 바 === */
.compat-sheet-progress {
    padding: 12px 20px;
    border-bottom: 1px solid var(--border-soft, rgba(0,0,0,0.04));
    flex-shrink: 0;
}
.compat-sheet-progress .step-progress {
    height: 6px;
    background: rgba(0,0,0,0.06);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 6px;
}
.compat-sheet-progress .step-progress-fill {
    height: 100%;
    background: var(--c-accent, #FFD993);
    border-radius: 3px;
    transition: width 0.35s ease;
}
.compat-sheet-progress .step-progress-text {
    font-size: 13px;
    color: var(--t-sub);
    text-align: right;
}

/* === Sheet 본문 (스크롤) === */
.compat-sheet-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    -webkit-overflow-scrolling: touch;
}
.compat-sheet-step {
    display: none;
    text-align: center;
    max-width: 420px;
    margin: 0 auto;
    /* [#472] step-back 절대 위치 좌상단 정렬 컨테이너 — 본인 입력 .step과 동일 패턴. */
    position: relative;
    /* step-back 자리 확보 — 좌상단 ←가 step-question과 시각 겹치지 않도록 */
    padding-top: 8px;
}
.compat-sheet-step.active {
    display: block;
    animation: compat-sheet-step-fade 0.2s ease;
}
/* [#449 hotfix] 시트 step 내부 요소 가운데 정렬 — 본인 입력 UI 정합 */
.compat-sheet-step .step-question {
    text-align: center;
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: var(--t-strong);
}
.compat-sheet-step .field-input,
.compat-sheet-step .step-input,
.compat-sheet-step .step-select {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 0 auto 12px;
    font-size: 17px;
}
.compat-sheet-step .step-gender-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin: 12px 0;
}
.compat-sheet-step .step-gender-btn {
    flex: 1;
    max-width: 160px;
    min-height: 56px;
    font-size: 17px;
    font-weight: 600;
}
.compat-sheet-step .btn,
.compat-sheet-step .step-next {
    display: block;
    width: 100%;
    max-width: 360px;
    margin: 16px auto 0;
    min-height: 56px;
    font-size: 17px;
    font-weight: 600;
}
.compat-sheet-step .step-btn-row {
    display: flex;
    justify-content: center;
    gap: 12px;
    max-width: 360px;
    margin: 16px auto 0;
}
.compat-sheet-step .step-btn-row .btn {
    flex: 1;
    margin: 0;
}
.compat-sheet-step .step-hint {
    text-align: center;
    color: var(--t-sub);
    font-size: 14px;
    margin: 8px 0;
}
.compat-sheet-step .step-error {
    text-align: center;
    color: var(--c-danger); /* [#521] #d33 하드코딩 → 토큰 통일 */
    font-size: 14px;
    min-height: 18px;
}
.compat-sheet-step .step-helper-link {
    display: block;
    text-align: center;
    color: var(--c-accent, #FFD993);
    font-size: 14px;
    margin: 12px 0;
    text-decoration: underline;
}
.compat-sheet-step .step-time-segments {
    max-width: 360px;
    margin: 12px auto 0;
}
.compat-sheet-step .time-segment-btn {
    width: 100%;
    margin-bottom: 8px;
    min-height: 56px;
    padding: 8px 16px;
    border-radius: 12px;
    text-align: left;
}
/* [#449b hotfix] 시트 입력 모드 탭 — 기존 .input-mode-control CSS 답습 + 시트 전용 override만 */
/* [#455] width:100% + box-sizing 명시 — flex column 부모(.compat-sheet-panel) 안에서 stretch가
   작동 안 해 ctrl 폭이 자식 콘텐츠 크기(~170px)로 좁아지던 결함 fix. width:100% 강제.
   [#464] max-width 420px cap 제거 — viewport 468px+ 환경에서 body padding 20px 적용 후
   콘텐츠 영역(428px+)이 420px cap을 넘어, mode-control이 좌우 4px씩 추가 들여쓰기되어
   본문(input·다음 버튼, width 100%)과 비대칭 발생. body padding이 좌우 여백 책임지면 충분. */
.compat-sheet-mode-control {
    width: 100%;
    margin: 0 0 16px;
    box-sizing: border-box;
}
/* [#456] 시트 입력 모드 패널 — 저장된 기록 / 유명인 (compat-sheet-body 안 컨테이너)
   [#464] max-width cap 제거 + margin 단순화 (mode-control과 동일 패턴) */
.compat-sheet-mode-panel {
    width: 100%;
}
.compat-sheet-mode-hint {
    font-size: 15px;
    color: var(--t-sub);
    margin: 0 0 14px;
    text-align: center;
    line-height: 1.5;
}
.compat-sheet-mode-control .input-mode-tab {
    white-space: nowrap;
    padding: 10px 4px;
}
/* [#474] 입력 방식 선택 카드 — step 2 신규 (직접 입력 vs 저장된 기록).
   2열 grid + 큰 카드(min-height 110px) + 이모지·제목·설명 3요소. */
.input-mode-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    margin: 8px 0 16px;
}
.input-mode-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 110px;
    padding: 16px 8px;
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    border: 1.5px solid var(--b-default);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    color: var(--t-strong);
    -webkit-tap-highlight-color: transparent;
}
.input-mode-card:hover {
    border-color: var(--c-accent);
    background: rgba(255, 217, 147, 0.08);
}
.input-mode-card:active { transform: scale(0.97); }
.input-mode-card.selected {
    border-color: var(--c-accent);
    background: rgba(255, 217, 147, 0.15);
    box-shadow: 0 2px 8px rgba(255, 217, 147, 0.20);
}
.input-mode-card-icon { font-size: 32px; line-height: 1; }
.input-mode-card-title { font-size: 16px; font-weight: 700; }
.input-mode-card-desc { font-size: 12px; color: var(--t-sub); text-align: center; }

/* [#473] 관계 선택 grid — step 1 신규. 7개 카드 (2열 × 4행, 마지막 행 1개)
   시니어 친화: 큰 터치 영역(min-height 80px) + 이모지(28px) + 라벨(15px) + 간격 12px */
.relation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    width: 100%;
    margin: 8px 0 0;
}
.relation-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 80px;
    padding: 14px 8px;
    background: var(--bg-card-alt, rgba(255,255,255,0.04));
    border: 1.5px solid var(--b-default);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    color: var(--t-strong);
    -webkit-tap-highlight-color: transparent;
}
.relation-btn:hover {
    border-color: var(--c-accent);
    background: rgba(255, 217, 147, 0.08);
}
.relation-btn:active {
    transform: scale(0.97);
}
.relation-btn.selected {
    border-color: var(--c-accent);
    background: rgba(255, 217, 147, 0.15);
    box-shadow: 0 2px 8px rgba(255, 217, 147, 0.20);
}
.relation-emoji {
    font-size: 28px;
    line-height: 1;
}
.relation-label {
    font-size: 15px;
    font-weight: 600;
}
/* [#463] #457·#458·#460·#461 봉합 hack(비활성 opacity 0.40 + active 골드 outline) 제거.
   #462 근본 fix로 "셋 다 active 부여" 결함 해소되어 시각 차별화 hack 불요. 본인 사주 입력
   화면(#section-input) 탭과 동일 톤(base `.input-mode-tab.active`만 적용)으로 회귀해
   시트와 본인 입력 탭의 시각 일관성 확보. 운영자 명시 (2026-05-24). */
@keyframes compat-sheet-step-fade {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .compat-sheet-step.active { animation: none; }
    .compat-sheet-panel { transition-duration: 0.1s; }
    .compat-sheet-backdrop { transition-duration: 0.1s; }
}

/* === Sheet step 7 사주원국 === */
.compat-sheet-step[data-sheet-step="7"] .compat-step-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--t-strong);
    margin: 0 0 6px;
    text-align: center;
}
.compat-sheet-step[data-sheet-step="7"] .compat-step-context {
    font-size: 15px;
    color: var(--t-sub);
    text-align: center;
    margin: 0 0 16px;
}

/* === PC 분기 (≥768px) — [#461] 모달 폐기·바텀시트 형태로 통일.
   운영자 명시: PC에서 가운데 모달 → 바텀시트로 변경. 모바일과 일관된 진입 UX +
   하단 가까이라 마우스·터치 모두 접근성 ↑. */
@media (min-width: 768px) {
    .compat-sheet-panel {
        left: 50%; right: auto;
        bottom: 0; top: auto;
        transform: translate(-50%, 100%);  /* 기본 숨김: 하단 밖 */
        width: 480px;
        max-width: 90vw;
        height: auto;
        max-height: 85vh;
        border-radius: 20px 20px 0 0;  /* 바텀시트 — 상단만 둥글게 */
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
        box-shadow: 0 -8px 32px rgba(0,0,0,0.20);
    }
    .compat-sheet[aria-hidden="false"] .compat-sheet-panel {
        transform: translate(-50%, 0);  /* 표시: 화면 하단까지 슬라이드 업 */
    }
    .compat-sheet-header {
        padding: 20px 56px 12px 20px;  /* PC는 safe-area 불요 */
    }
    .compat-sheet-close {
        top: 12px;
        width: 40px; height: 40px;
    }
}

/* === body 스크롤 잠금 (시트·Alert 열림 시) === */
body.compat-sheet-open,
body.compat-alert-open {
    overflow: hidden;
}

/* === [§3.8] 차감 Alert (KRDS Action Confirmation + 토스 Alert 패턴) === */
.charge-alert {
    position: fixed;
    inset: 0;
    z-index: 2000;  /* Sheet(1000)보다 위 */
    pointer-events: none;
}
.charge-alert[aria-hidden="false"] {
    pointer-events: auto;
}
.charge-alert-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    transition: background 0.2s ease;
    cursor: pointer;
}
.charge-alert[aria-hidden="false"] .charge-alert-backdrop {
    background: rgba(0, 0, 0, 0.40);  /* Alert opacity 40% (집중) */
}
.charge-alert-panel {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0.92);
    width: min(360px, 90vw);
    background: var(--bg-card, #fff);
    border-radius: 16px;
    padding: 24px;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
    box-shadow: 0 16px 48px rgba(0,0,0,0.25);
}
.charge-alert[aria-hidden="false"] .charge-alert-panel {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
#chargeAlertTitle {
    font-size: 20px;
    font-weight: 700;
    color: var(--t-strong);
    margin: 0 0 12px;
    text-align: center;
}
#chargeAlertDesc {
    font-size: 16px;
    color: var(--t-sub);
    line-height: 1.6;
    margin: 0 0 20px;
    text-align: center;
}
#chargeAlertDesc strong {
    color: var(--t-strong);
    font-weight: 700;
}
#chargeAlertDesc small {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--t-sub);
}
.charge-alert-actions {
    display: flex;
    gap: 12px;
}
.charge-alert-actions .btn {
    flex: 1;
    min-height: 48px;  /* 시니어 터치 */
    font-size: 17px;
    font-weight: 600;
    border-radius: 12px;
}

/* === [§3.4 D4b] 본인 능선 오버레이 결과 카드 === */
.compat-overlay-score-card,
.compat-overlay-cta {
    display: none;  /* 기본 숨김 */
    position: fixed;
    z-index: 100;
}
body.compat-overlay-active .compat-overlay-score-card,
body.compat-overlay-active .compat-overlay-cta {
    display: flex;
}
/* [#469] 오버레이 활성 시 본인 능선 CTA 바(사주풀이·궁합 보기 2종) 숨김 →
   궁합 자세히 보기 CTA 단독 노출. 운영자 명시 (한 화면 한 정보 시니어 UX 원칙).
   [#469 hotfix] specificity 0,0,4,1 — 옛 셀렉터 body.flow-ridge .flow-cta-bar.flow-cta-ridge
   (0,0,3,1)를 덮으려면 body 클래스 2개 동시 필요. */
body.flow-ridge.compat-overlay-active .flow-cta-bar.flow-cta-ridge { display: none; }
/* [#469] 본인 hero(고도 1,503m·이름·레벨) 숨김 → 점수 카드가 hero 자리 차지.
   궁합 컨텍스트 = 두 사람 관계가 본질, 본인 단독 고도는 부차적. 운영자 명시 옵션 A. */
body.compat-overlay-active .result-hero { display: none; }
.compat-overlay-score-card {
    /* [#469] hero 위치(상단 ~110px)로 이동 + 가로폭 확장 + 점수·유형 위계 강화 */
    top: calc(110px + env(safe-area-inset-top, 0px));
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card, #fff);
    border-radius: 20px;
    padding: 24px 64px 24px 28px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.18);
    align-items: center;
    gap: 16px;
    animation: compat-overlay-card-in 0.35s ease;
    min-width: 260px;
}
/* [#470] .compat-overlay-score 규칙 폐지 — 마크업에서 span 제거. score 자체 시스템 폐지. */
/* [#473] 관계 라벨 — 유형 라벨 위 작은 부제로 노출 ("배우자" / "자녀" / "친구·지인" 등) */
.compat-overlay-relation {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--c-accent, #FFD993);
    margin-bottom: 4px;
    letter-spacing: 0.5px;
}
.compat-overlay-relation:empty {
    display: none;
}
.compat-overlay-type {
    /* [#470] score 폐지 후 유형 라벨이 카드 본질 정보 → hero급 위계로 강화. */
    font-size: 28px;
    font-weight: 800;
    color: var(--t-strong);
    line-height: 1.2;
}
.compat-overlay-clear {
    position: absolute;
    top: 8px; right: 8px;
    width: 32px; height: 32px;
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: var(--t-sub);
    display: flex;
    align-items: center;
    justify-content: center;
}
.compat-overlay-clear:hover {
    background: rgba(0,0,0,0.06);
}
.compat-overlay-cta {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    left: 16px; right: 16px;
    animation: compat-overlay-cta-in 0.35s ease;
}
.compat-overlay-cta .btn {
    width: 100%;
    min-height: 56px;
    font-size: 17px;
    font-weight: 700;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
@keyframes compat-overlay-card-in {
    from { opacity: 0; transform: translateX(-50%) translateY(-12px); }
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes compat-overlay-cta-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .compat-overlay-score-card,
    .compat-overlay-cta { animation: none; }
}

/* === 다크 모드 정합 === */
@media (prefers-color-scheme: dark) {
    .compat-sheet-panel { background: var(--bg-card); }
    .compat-sheet-close { color: rgba(255,255,255,0.9); }
    .compat-sheet-close:hover,
    .compat-sheet-close:focus-visible { background: rgba(255,255,255,0.08); }
    .charge-alert-panel { background: var(--bg-card); }
    .compat-overlay-score-card { background: var(--bg-card); }
}

/* ============================================================
   [#484] 사용자 피드백 self-service (2026-05-29)
   - 시니어 UX: 본문 18px+, 라디오·CTA 56px+ 터치, 대비 7:1+
   - 기획서: 03.설계/사용자피드백_self_service_기능정의서.md
   ============================================================ */

.feedback-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.feedback-header h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--t-strong);
}
.feedback-list-link {
    background: none;
    border: 0;
    color: var(--c-primary);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 4px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
    min-height: 44px;
}
@media (prefers-color-scheme: dark) {
    .feedback-list-link {
        color: var(--c-accent);
        text-decoration-color: var(--c-accent);
    }
}
.feedback-lead {
    margin: 0 0 24px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--t-mid);
}

.feedback-form { display: flex; flex-direction: column; gap: 24px; }
.feedback-field { display: flex; flex-direction: column; gap: 12px; }
.feedback-field-label {
    font-size: 17px;
    font-weight: 600;
    color: var(--t-strong);
}
.feedback-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.feedback-cat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 60px;
    padding: 12px 14px;
    border: 2px solid rgba(27,42,74,0.18);
    border-radius: 14px;
    background: var(--bg-card);
    color: var(--t-strong);
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, transform 0.05s;
}
.feedback-cat-btn:hover { border-color: var(--c-primary); }
.feedback-cat-btn:active { transform: scale(0.98); }
.feedback-cat-btn.selected {
    border-color: var(--c-primary);
    background: rgba(27,42,74,0.06);
    font-weight: 700;
}
.feedback-cat-icon { font-size: 22px; line-height: 1; }
.feedback-cat-label { font-size: 17px; }

.feedback-textarea {
    width: 100%;
    min-height: 200px;
    padding: 16px;
    border: 2px solid rgba(27,42,74,0.18);
    border-radius: 14px;
    font-size: 18px;
    line-height: 1.6;
    font-family: inherit;
    color: var(--t-strong);
    background: var(--bg-card);
    resize: vertical;
    box-sizing: border-box;
}
.feedback-textarea:focus { outline: none; border-color: var(--c-primary); }
.feedback-counter {
    text-align: right;
    font-size: 14px;
    color: var(--t-mid);
}
.feedback-submit-btn {
    width: 100%;
    min-height: 56px;
    font-size: 18px;
    font-weight: 700;
    margin-top: 8px;
}
.feedback-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.feedback-new-btn {
    width: 100%;
    min-height: 56px;
    font-size: 17px;
    margin-bottom: 20px;
}
.feedback-list { display: flex; flex-direction: column; gap: 14px; }
.feedback-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 16px 18px;
    border: 1px solid rgba(27,42,74,0.12);
    border-radius: 14px;
    background: var(--bg-card);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    transition: border-color 0.15s, transform 0.05s;
}
.feedback-card:hover { border-color: var(--c-primary); }
.feedback-card:active { transform: scale(0.99); }
.feedback-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 15px;
    color: var(--t-mid);
}
.feedback-card-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--t-strong);
}
.feedback-card-date { font-size: 14px; }
.feedback-card-preview {
    font-size: 17px;
    line-height: 1.5;
    color: var(--t-strong);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.feedback-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.feedback-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
}
.feedback-card-chip-status { background: rgba(27,42,74,0.06); color: var(--t-strong); }
.feedback-card-chip-answered { background: rgba(255,217,147,0.30); color: #5a3d00; }
.feedback-card-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E53E3E;
}

.feedback-empty {
    padding: 40px 16px;
    text-align: center;
}
.feedback-empty-emoji { font-size: 48px; margin-bottom: 12px; }
.feedback-empty-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--t-strong);
    margin-bottom: 8px;
}
.feedback-empty-sub {
    font-size: 16px;
    line-height: 1.6;
    color: var(--t-mid);
}

.feedback-detail { display: flex; flex-direction: column; gap: 8px; }
.feedback-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}
.feedback-detail-cat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--t-strong);
}
.feedback-detail-status {
    font-size: 14px;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(27,42,74,0.06);
    color: var(--t-strong);
    font-weight: 600;
}
.feedback-detail-date {
    font-size: 15px;
    color: var(--t-mid);
    margin-bottom: 18px;
}
.feedback-section-label {
    font-size: 15px;
    font-weight: 700;
    color: var(--t-mid);
    margin-bottom: 8px;
    letter-spacing: 0.02em;
}
.feedback-content-section { margin-top: 4px; }
.feedback-content-body {
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(27,42,74,0.04);
    font-size: 18px;
    line-height: 1.65;
    color: var(--t-strong);
    word-break: break-word;
}
.feedback-divider {
    height: 1px;
    background: rgba(27,42,74,0.12);
    margin: 28px 0 20px;
}
.feedback-response-section { margin-bottom: 24px; }
.feedback-response-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    color: var(--t-mid);
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.feedback-response-author { font-weight: 600; color: var(--t-strong); }
.feedback-response-body {
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255,217,147,0.18);
    border-left: 4px solid #FFD993;
    font-size: 18px;
    line-height: 1.65;
    color: var(--t-strong);
    word-break: break-word;
}
.feedback-response-pending {
    padding: 28px 16px;
    text-align: center;
    border: 1px dashed rgba(27,42,74,0.18);
    border-radius: 14px;
    background: rgba(27,42,74,0.02);
    margin-bottom: 24px;
}
.feedback-response-pending-icon { font-size: 36px; margin-bottom: 10px; }
.feedback-response-pending-text {
    font-size: 16px;
    line-height: 1.55;
    color: var(--t-mid);
}
.feedback-back-btn {
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
}

/* [#484/#492/#493] 프로필 메뉴 빨간 점 배지 (자가-서비스 답변 도착 알림)
   배지를 .gh-avatar-btn 형제로 분리(overflow:hidden 클리핑 회피)
   GNB 배경색과 동조한 3px 테두리로 도드라짐 강조 */
.gh-avatar-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E53E3E;
    border: 3px solid var(--bg-card);  /* GNB 기본 배경(라이트=흰/다크=다크톤) 자동 분기 */
    box-sizing: content-box;
    pointer-events: none;
    z-index: 2;
}
/* [#493] result/flow 화면 GNB가 딥 네이비라 테두리도 매칭 */
body.result-active .gh-avatar-badge {
    border-color: var(--c-primary);
}
.gh-menu-badge {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E53E3E;
    margin-left: 8px;
    vertical-align: middle;
}

/* 다크 모드 정합 */
@media (prefers-color-scheme: dark) {
    .feedback-cat-btn { color: #fff; background: var(--bg-card); border-color: rgba(255,255,255,0.18); }
    .feedback-cat-btn.selected { background: rgba(255,217,147,0.10); border-color: #FFD993; }
    .feedback-textarea { color: #fff; background: var(--bg-card); border-color: rgba(255,255,255,0.18); }
    .feedback-card { color: #fff; background: var(--bg-card); border-color: rgba(255,255,255,0.12); }
    .feedback-card-chip-status { background: rgba(255,255,255,0.08); color: #fff; }
    /* [#494] 답변 있음 칩 다크 분기 — 골드 톤 가시성 회복 */
    .feedback-card-chip-answered { background: rgba(255,217,147,0.18); color: var(--c-accent); border: 1px solid rgba(255,217,147,0.40); }
    .feedback-content-body { background: rgba(255,255,255,0.04); color: #fff; }
    .feedback-detail-status { background: rgba(255,255,255,0.08); color: #fff; }
    .feedback-response-pending { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.18); }
    .feedback-divider { background: rgba(255,255,255,0.12); }
    /* [#492] 다크 테두리 분기 제거 — 테두리 없는 빨간 점 의도 */
}
/* [#502] AI 로딩 컴포넌트 — 오늘·이달·올해·사주풀이·궁합풀이 공통.
   진행 바 + % + 단계 텍스트 패턴. 실제 진행률 알 수 없어 시간 추정 곡선 시뮬레이션.
   target에 absolute overlay로 추가 → 본문 가림 + 헤더(외부 element)는 보존. */
.ai-loading-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 32px 24px;
    background: var(--bg-card);
    border-radius: inherit;
    opacity: 1;
    transition: opacity 0.25s ease;
    min-height: 200px;
    box-sizing: border-box;
}
.ai-loading-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--t-strong);
    text-align: center;
    letter-spacing: -0.3px;
}
.ai-loading-bar-wrap {
    width: 100%;
    max-width: 280px;
    height: 8px;
    background: rgba(27, 42, 74, 0.08);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.ai-loading-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--c-primary) 0%, var(--c-accent) 100%);
    border-radius: 4px;
    width: 0%;
    transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.ai-loading-percent {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--c-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
}
.ai-loading-step {
    margin: 0;
    font-size: 14px;
    color: var(--t-body);
    text-align: center;
    min-height: 20px;
    transition: opacity 0.2s ease;
}
.ai-loading-overlay.is-fading { opacity: 0; pointer-events: none; }
@media (prefers-color-scheme: dark) {
    .ai-loading-bar-wrap { background: rgba(255, 217, 147, 0.14); }
    .ai-loading-percent { color: var(--c-accent); }
}