/* ── 공통 상단 헤더 ── */
        .global-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: var(--bg-card);
            border-bottom: 1px solid var(--b-default);
        }
        .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 {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .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%;
            border: 2px solid var(--c-primary);
            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;
        }
        .gh-dropdown {
            position: absolute;
            top: 40px;
            right: 0;
            min-width: 180px;
            background: var(--bg-card);
            border: 1px solid var(--b-default);
            border-radius: 12px;
            box-shadow: var(--shadow-2);
            padding: 12px 0;
            z-index: 1001;
        }
        .gh-dropdown-name {
            padding: 0 16px;
            font-size: var(--fs-caption);
            font-weight: 700;
            color: var(--t-strong);
        }
        .gh-dropdown-email {
            padding: 2px 16px 8px;
            font-size: var(--fs-small);
            color: var(--t-muted);
        }
        .gh-dropdown-divider {
            border: none;
            border-top: 1px solid var(--b-default);
            margin: 4px 0;
        }
        .gh-dropdown button {
            display: block;
            width: 100%;
            padding: 8px 16px;
            border: none;
            background: transparent;
            text-align: left;
            font-size: 13px;
            color: var(--t-sub);
            cursor: pointer;
            font-family: inherit;
        }
        .gh-dropdown button:hover {
            background: var(--bg-card-alt);
            color: var(--t-strong);
        }
        /* GNB: ← 뒤로가기 */
        .gh-back {
            border: none;
            background: rgba(255,255,255,0.08);
            color: rgba(255,255,255,0.9);
            font-size: 20px;
            width: 36px; height: 36px;
            border-radius: 50%;
            cursor: pointer;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .gh-back:active { background: rgba(255,255,255,0.15); }
        /* 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: 공유 버튼 */
        .gh-share-btn {
            border: none;
            background: rgba(255,184,140,0.2);
            color: rgba(255,255,255,0.85);
            font-size: 13px;
            font-weight: 600;
            padding: 6px 14px;
            border-radius: 20px;
            cursor: pointer;
            font-family: inherit;
        }
        .gh-share-btn:active { background: rgba(255,184,140,0.35); }
        /* 결과 화면: 헤더 다크 투명 */
        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; }

        :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: var(--bg-card-alt);
            --segment-border: var(--b-default);
            --segment-tab-text: var(--t-sub);
            --segment-tab-active-bg: var(--bg-card);
            --segment-tab-active-text: var(--t-strong);
            --segment-tab-active-shadow: var(--shadow-1);
            --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);

            /* 로그인 모달 / 배너 */
            --modal-bg: rgba(15,23,36,0.92);
            --modal-border: rgba(255,255,255,0.1);
            --modal-title-color: #f0f0f0;
            --modal-desc-color: rgba(255,255,255,0.6);
            --modal-skip-color: rgba(255,255,255,0.4);
            --banner-bg: rgba(15,23,36,0.88);
            --banner-border: rgba(255,255,255,0.1);
            --banner-close-color: rgba(255,255,255,0.5);
            --banner-text-color: rgba(255,255,255,0.9);

            /* 오행 */
            --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;

                /* 모달 다크 */
                --modal-bg: rgba(10,15,24,0.95);
                --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);
        }
        /* 입력/마이 화면에서 스크롤 컨테이너 적용 */
        body.input-active .app-card,
        body.my-active .app-card {
            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; }

        /* ===== 공통 요소 ===== */
        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); }

        /* ===== 인트로 배경 이미지 (블러 없음, 인트로에서만 표시) ===== */
        #intro-bg {
            position: fixed;
            top: -50px; left: -50px; right: -50px; bottom: -50px;
            background-size: cover;
            background-position: center;
            z-index: -1;
            transition: opacity 0.4s;
            will-change: transform;
        }
        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;
        }
        /* 인트로: 카드 배경 제거 → 텍스트만 배경 위에 표시 */
        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;
        }
        /* 개별 카드만 차트 위로 올림 (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;
            padding-top: 130px;
        }
        .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;
        }

        /* 차트 (다크 테마) — 모든 해상도 공통 풀스크린 */
        .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;
        }
        .glass-card.chart-card-wide .legend-dark {
            position: absolute;
            bottom: 12px; left: 0; right: 0;
            margin: 0; z-index: 2;
        }
        .legend-dark {
            display: flex; justify-content: center; gap: 24px;
            font-size: 12px; color: var(--legend-text); padding-top: 8px;
        }
        /* 차트 아래 콘텐츠: 스크롤하면 차트 위로 올라옴 */
        .glass-card.chart-card-wide ~ .glass-card,
        .glass-card.chart-card-wide ~ .btn-reset-dark {
            position: relative;
            z-index: 5;
        }
        .glass-card.chart-card-wide + .glass-card {
            margin-top: calc(100vh + 40px); margin-top: calc(100dvh + 40px);
        }
        /* 차트~첫 카드 사이 투명 스크롤 영역: 차트 위 빈 공간에서도 페이지 스크롤 가능하게 */
        .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; }

        /* 줌 슬라이더 */
        .chart-zoom-bar {
            position: absolute;
            top: 86px; 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;
        }
        .zoom-btn {
            background: none; border: none; cursor: pointer;
            font-size: 18px; color: var(--zoom-text);
            padding: 4px 6px; line-height: 1; user-select: none;
        }
        .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);
        }
        .advice-sub-label {
            font-size: 15px; font-weight: 700; color: var(--sky-mid);
            letter-spacing: 0.5px; margin-bottom: 8px;
            padding-bottom: 6px; 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;
        }
        /* 사주 원국 테이블 */
        .pillars-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 14px;
            font-size: 13px;
            border: 1px solid rgba(128,128,128,0.25);
            border-radius: 8px;
            overflow: hidden;
        }
        .pillars-table th,
        .pillars-table td {
            border: 1px solid rgba(180,180,180,0.45);
        }
        .pillars-table th {
            font-size: 12px;
            font-weight: 600;
            color: var(--t-sub);
            padding: 8px 4px 6px;
            background: rgba(128,128,128,0.1);
        }
        .pillars-table td {
            text-align: center;
            padding: 6px 4px;
            vertical-align: middle;
        }
        .pillars-row-label {
            font-size: 11px;
            font-weight: 600;
            color: var(--t-muted);
            width: 50px;
            text-align: left;
            background: rgba(128,128,128,0.08);
        }
        @media (prefers-color-scheme: dark) {
            .pillars-table th, .pillars-table td { border-color: rgba(200,200,200,0.25); }
            .pillars-table th { background: rgba(200,200,200,0.08); }
            .pillars-row-label { background: rgba(200,200,200,0.05); }
        }
        /* 한자 + 한글 글자 */
        .pillars-char-wrap {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 2px;
        }
        .pillars-hanzi {
            font-size: 22px;
            font-weight: 700;
            line-height: 1.2;
            position: relative;
        }
        .pillars-hanzi .pillars-hanja {
            font-size: 11px;
            font-weight: 400;
            position: absolute;
            bottom: -2px;
            right: -14px;
            opacity: 0.6;
        }
        .pillars-el-tag {
            font-size: 10px;
            color: var(--t-muted);
        }
        /* 오행 색상 */
        .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; }
        /* 십성 */
        .pillars-god {
            font-size: 11px;
            color: var(--t-sub);
        }
        .pillars-row-god td { padding: 3px 4px; }
        /* 지장간/12운성/신살 */
        .pillars-sub {
            font-size: 11px;
            color: var(--t-muted);
        }
        .pillars-row-sub td { padding: 4px; }
        .pillars-shinsal { color: var(--c-accent); font-weight: 500; }
        .pillars-cell-empty { color: var(--t-muted); }
        .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;
        }
        .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;
        }

        .feedback-textarea {
            width: 100%; box-sizing: border-box;
            padding: 12px; margin-bottom: 12px;
            border: 1px solid var(--reading-h4-border);
            border-radius: 12px;
            background: rgba(255,255,255,0.08);
            color: #fff;
            font-family: inherit; font-size: 14px; line-height: 1.6;
            resize: none; outline: none;
        }
        .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; }
            .input-header {
                margin: -32px -20px 16px;
                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; }
            body.intro-active .app-card {
                min-height: auto; padding: 40px 24px;
                background: none; border: none; box-shadow: none;
                backdrop-filter: none; -webkit-backdrop-filter: none;
            }

            /* 인트로 폰트 크기 */
            #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;
            }
            .result-hero { padding-top: 120px; }
            .chart-zoom-bar { top: 80px; }
            .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; }
            .altitude-number { font-size: 100px; }
            .altitude-unit { font-size: 40px; }
            .result-hero-level { font-size: 22px; }
            .result-hero-label { font-size: 14px; }
            .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;
            background: rgba(0,0,0,0.6);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }
        .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(--sunrise-gold);
            font-weight: 600;
            margin-bottom: 0;
        }
        #myRecordsLoggedOut .field-label {
            color: var(--sunrise-gold);
            font-weight: 600;
        }
        #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;
}
.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%;
}
.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; }
/* 탭바 있을 때 하단 여백 */
body:not(.intro-active):not(.onboarding-active) .app-card { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px) + 32px); }

@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 .home-card-label { font-size: 12px; color: rgba(255,255,255,0.7); }
.home-card-altitude-value { font-size: 32px; font-weight: 900; color: var(--c-accent); line-height: 1.2; }
.home-card-altitude-level { font-size: 13px; color: rgba(255,255,255,0.85); }
#homeMiniChart { width: 100%; height: 50px; opacity: 0.8; }
/* 고도 카드 (분석 전 → 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; }
}

/* 내 사주 정보 모달 */
.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; }

/* 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; }

/* ===== 홈 온보딩형 빈 상태 ===== */
.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; }

/* ===== 사주 탭 인물 라벨 ===== */
.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; }

@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); }
}