/* Universal Variables & Reset */
:root {
    --bg-dark: #07040a;
    --card-bg: rgba(20, 15, 30, 0.55);
    --card-border: rgba(157, 78, 221, 0.18);
    --text-primary: #f8f7fa;
    --text-secondary: #c8c5d4;
    --text-muted: #8c889e;
    --primary-glow: rgba(157, 78, 221, 0.22);
    --accent: #9d4edd;
    --accent-secondary: #b388ff;
    --accent-glow: rgba(157, 78, 221, 0.45);
    
    /* Five Elements Colors (Mystical high contrast version) */
    --color-wood: #00f5d4;   /* Mint Green */
    --color-fire: #ff007f;   /* Neon Pink/Red */
    --color-earth: #ffb703;  /* Solar Gold */
    --color-metal: #e2eafc;  /* Astral Silver */
    --color-water: #00b4d8;  /* Deep Ocean Blue */
    
    /* Aspect Colors */
    --color-wealth: #ffa200;
    --color-love: #ff2e93;
    --color-career: #00f5d4;
    --color-health: #00d284;
}

/* Young Mode (Vibrant Cyberpunk) */
body.age-mode-young {
    --bg-dark: #07040a;
    --card-bg: rgba(20, 15, 30, 0.55);
    --card-border: rgba(157, 78, 221, 0.18);
    --accent: #9d4edd;
    --accent-secondary: #b388ff;
    --accent-glow: rgba(157, 78, 221, 0.45);
    --primary-glow: rgba(157, 78, 221, 0.22);
}

/* Adult Mode (Elegant Gold/Obsidian) */
body.age-mode-adult {
    --bg-dark: #070a13;
    --card-bg: rgba(15, 23, 42, 0.65);
    --card-border: rgba(212, 175, 55, 0.2);
    --accent: #d4af37;
    --accent-secondary: #facc15;
    --accent-glow: rgba(212, 175, 55, 0.35);
    --primary-glow: rgba(212, 175, 55, 0.12);
}

/* Light Theme Overrides (High Specificity) */
body.theme-light,
body.theme-light.age-mode-young,
body.theme-light.age-mode-adult {
    --bg-dark: #f0f4f9;
    --card-bg: rgba(255, 255, 255, 0.92);
    --card-border: rgba(140, 90, 220, 0.22);
    --text-primary: #151326;
    --text-secondary: #3e3a52;
    --text-muted: #6b6782;
    --primary-glow: rgba(120, 60, 210, 0.08);
    --accent: #7c3aed;
    --accent-secondary: #9333ea;
    --accent-glow: rgba(124, 58, 237, 0.20);

    background-color: #f0f4f9 !important;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%) !important;
    color: #151326 !important;
}

body.theme-light .card,
body.theme-light .glass-card,
body.theme-light .fortune-card,
body.theme-light .fortune-main-card,
body.theme-light .intro-section-card,
body.theme-light .input-section,
body.theme-light .modal-content,
body.theme-light .tab-pane,
body.theme-light .tarot-input-box,
body.theme-light .tarot-cosmic-bg,
body.theme-light .detail-card,
body.theme-light .tab-navigation-wrapper {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(140, 90, 220, 0.2) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06) !important;
    color: #151326 !important;
}

body.theme-light .tab-btn {
    background: rgba(0, 0, 0, 0.04) !important;
    color: #3e3a52 !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
}
body.theme-light .tab-btn.active {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: #ffffff !important;
    border-color: #7c3aed !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3) !important;
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
}

body {
    background-color: var(--bg-dark);
    background-image: 
        radial-gradient(circle at 10% 20%, var(--primary-glow) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(0, 245, 212, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, var(--primary-glow) 0%, transparent 60%);
    color: var(--text-primary);
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
    padding-bottom: 50px;
    transition: background-color 0.6s cubic-bezier(0.4, 0, 0.2, 1), background-image 0.6s ease, color 0.6s ease;
}

body.theme-light {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(124, 58, 237, 0.08) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(14, 165, 233, 0.08) 0%, transparent 40%),
        linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%);
}

body.theme-light .bg-glow {
    opacity: 0.12;
}

/* Light theme overrides for cards, inputs, modals, text & badges */
body.theme-light .age-mode-badge,
body.theme-light .theme-mode-badge {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: #1e1b2e;
}
body.theme-light .age-mode-badge:hover,
body.theme-light .theme-mode-badge:hover {
    background: rgba(0, 0, 0, 0.1);
}

.theme-mode-badge {
    padding: 8px 16px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    user-select: none;
}
.theme-mode-badge:hover {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
}
.theme-mode-badge.light-mode {
    background: linear-gradient(135deg, rgba(255, 200, 0, 0.2), rgba(255, 150, 0, 0.25));
    border-color: rgba(245, 158, 11, 0.5);
    color: #b45309;
}
body.theme-light .theme-mode-badge.light-mode {
    color: #b45309;
}

body.theme-light input,
body.theme-light select,
body.theme-light textarea {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(140, 90, 220, 0.25);
    color: #151326;
}
body.theme-light input:focus,
body.theme-light select:focus,
body.theme-light textarea:focus {
    background: #ffffff;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

body.theme-light .btn-tab-saju,
body.theme-light .btn-tab-tarot,
body.theme-light .btn-login,
body.theme-light .user-profile-box {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(140, 90, 220, 0.2);
    color: #1e1b2e !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

body.theme-light .markdown-body,
body.theme-light .modal-body,
body.theme-light pre,
body.theme-light code {
    color: #151326;
}

body.theme-light .markdown-body pre,
body.theme-light .markdown-body code {
    background: #f1f5f9;
    color: #0f172a;
    border: 1px solid #e2e8f0;
}


/* Background Glowing Orbs */
.bg-glow {
    position: fixed;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(150px);
    z-index: -1;
    opacity: 0.25;
    pointer-events: none;
}

.bg-glow-1 {
    background: radial-gradient(circle, var(--accent) 0%, rgba(0,0,0,0) 70%);
    top: -200px;
    right: -100px;
}

.bg-glow-2 {
    background: radial-gradient(circle, #5f27cd 0%, rgba(0,0,0,0) 70%);
    bottom: -100px;
    left: -200px;
}

.bg-glow-3 {
    background: radial-gradient(circle, #01a3a4 0%, rgba(0,0,0,0) 70%);
    top: 50%;
    left: 40%;
    width: 400px;
    height: 400px;
    opacity: 0.15;
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Connection Status Banner */
.status-banner {
    width: 100%;
    padding: 10px 20px;
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 10;
    transition: all 0.3s ease;
}

.status-banner.offline {
    background: rgba(243, 156, 18, 0.12);
    border-bottom: 1px solid rgba(243, 156, 18, 0.3);
    color: #f39c12;
}

.status-banner.online {
    background: rgba(46, 204, 113, 0.1);
    border-bottom: 1px solid rgba(46, 204, 113, 0.25);
    color: #2ecc71;
}

.banner-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}

.offline .status-dot {
    background-color: #f39c12;
    box-shadow: 0 0 8px #f39c12;
    animation: pulse 1.5s infinite;
}

.online .status-dot {
    background-color: #2ecc71;
    box-shadow: 0 0 8px #2ecc71;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.btn-mini {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: inherit;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 11px;
    transition: all 0.2s;
    font-weight: 500;
}

.btn-mini:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* App Container */
.app-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 20px;
}

/* Sticky Header & Category Navigation Wrapper */
.sticky-header-wrapper {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(7, 4, 10, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding-top: 15px;
    padding-bottom: 10px;
    margin-bottom: 25px;
    border-bottom: 1px solid rgba(157, 78, 221, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

body.theme-light .sticky-header-wrapper {
    background: rgba(240, 244, 249, 0.95) !important;
    border-bottom-color: rgba(140, 90, 220, 0.2) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05) !important;
}

/* All Modals & Overlays Top-Most Layer (Above Sticky Header) */
.modal-overlay,
.modal,
.saju-loading-overlay,
#modal-register,
#modal-login,
#modal-mbti-test,
#modal-married-block,
#saju-loading-overlay {
    position: fixed !important;
    z-index: 999999 !important;
}

.modal-content,
.register-modal-content,
.login-modal-content {
    position: relative !important;
    z-index: 1000000 !important;
}

.sticky-header-wrapper .app-header {
    margin-bottom: 15px;
}

/* Header */
.app-header {
    text-align: center;
    margin-bottom: 40px;
}

.logo {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.logo-icon {
    font-size: 32px;
    color: var(--accent);
    text-shadow: 0 0 15px var(--accent-glow);
    animation: rotate-slow 20s linear infinite;
}

@keyframes rotate-slow {
    100% { transform: rotate(360deg); }
}

/* ====================================================
   AI 분석 로딩 오버레이 - 태극 회전 스크린 (반응형 최적화)
   ==================================================== */
.saju-loading-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* 모바일 동적 뷰포트 높이 대응 */
    z-index: 999999 !important; /* 모달이나 팝업보다 무조건 위에 위치하도록 격상 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(7, 4, 10, 0.75) !important; /* 반투명 어두운 딤드 배경 처리 */
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    animation: overlay-fade-in 0.3s ease forwards;
    overflow: hidden; /* 모바일에서 스크롤 생김 방지 */
    box-sizing: border-box;
}

.saju-loading-overlay.hidden {
    display: none;
}

@keyframes overlay-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes overlay-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

.saju-loading-overlay.fade-out {
    animation: overlay-fade-out 0.4s ease forwards;
}

/* 🔳 정사각형 로딩 카드 */
.saju-loading-card {
    width: 290px !important;
    min-height: 290px !important; /* 모바일 기기 최소 가로폭 320px에서 이탈하지 않는 최대 최적 크기 */
    height: auto !important;      /* 내용(텍스트 줄바꿈)에 따라 예쁘게 세로로만 확장됨 */
    background: rgba(22, 12, 38, 0.95) !important;
    border: 1.5px solid rgba(157, 78, 221, 0.3) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(157, 78, 221, 0.2);
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    padding: 20px !important;
    box-sizing: border-box !important;
    animation: card-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes card-pop {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1.0); opacity: 1; }
}

/* 태극 아이콘 - 빠른 회전 */
.saju-loading-taeguk {
    font-size: 60px !important; /* 아담하게 조정 */
    color: var(--accent);
    filter: drop-shadow(0 0 15px var(--accent-glow)) drop-shadow(0 0 35px rgba(157,78,221,0.25));
    animation: taeguk-spin 1.8s linear infinite;
    line-height: 1;
}

/* 천명 브랜드 시그니처 - 순환하는 황금 & 보라 태극 로고 */
.taegeuk-spin-logo {
    --size: 70px;
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: linear-gradient(to bottom, #dfb751 50%, #765e23 50%);
    position: relative;
    animation: taeguk-spin 2s linear infinite;
    box-shadow: 0 0 25px rgba(223, 183, 81, 0.5), inset 0 0 10px rgba(0, 0, 0, 0.4);
    filter: drop-shadow(0 0 15px rgba(157, 78, 221, 0.5));
    display: inline-block;
    vertical-align: middle;
}

.taegeuk-spin-logo::before {
    content: '';
    position: absolute;
    width: calc(var(--size) / 2);
    height: calc(var(--size) / 2);
    background-color: #765e23;
    border-radius: 50%;
    top: calc(var(--size) / 4);
    left: 0;
    background-image: radial-gradient(circle, #fcf8ee 18%, #765e23 18%);
}

.taegeuk-spin-logo::after {
    content: '';
    position: absolute;
    width: calc(var(--size) / 2);
    height: calc(var(--size) / 2);
    background-color: #dfb751;
    border-radius: 50%;
    top: calc(var(--size) / 4);
    left: calc(var(--size) / 2);
    background-image: radial-gradient(circle, #fcf8ee 18%, #dfb751 18%);
}

.taegeuk-spin-logo.mystic-purple {
    background: linear-gradient(to bottom, #ffd700 50%, #7b2cbf 50%);
    box-shadow: 0 0 30px rgba(199, 125, 255, 0.6), inset 0 0 10px rgba(0, 0, 0, 0.3);
}

.taegeuk-spin-logo.mystic-purple::before {
    background-color: #7b2cbf;
    background-image: radial-gradient(circle, #ffffff 18%, #7b2cbf 18%);
}

.taegeuk-spin-logo.mystic-purple::after {
    background-color: #ffd700;
    background-image: radial-gradient(circle, #ffffff 18%, #ffd700 18%);
}

@keyframes taeguk-spin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.04); }
    100% { transform: rotate(360deg) scale(1); }
}

/* 로딩 타이틀 */
.saju-loading-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 20px !important;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #fff 30%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: -5px;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: -4px;
}

.saju-loading-title span {
    font-size: 16px;
    font-weight: 400;
    background: none;
    -webkit-text-fill-color: var(--text-secondary);
    vertical-align: middle;
    margin-left: 6px;
    letter-spacing: 1.5px;
}

/* 분석 중 메시지 */
.saju-loading-msg {
    font-size: 0.85rem !important; /* 텍스트가 여러 줄 들어갔을 때 가독성을 위해 조절 */
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    margin: 0;
    padding: 0 10px;
    line-height: 1.4 !important;
    white-space: pre-line !important; /* 이스케이프 줄바꿈(\n)을 화면에 그대로 개행 렌더링 */
    word-break: keep-all; /* 모바일에서 단어 단위 깔끔한 줄바꿈 */
}

.saju-loading-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.5px;
    padding: 0 10px;
    word-break: keep-all;
}

/* 점 세 개 애니메이션 */
.saju-loading-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.saju-loading-dots span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.3;
    animation: dot-bounce 1.4s ease-in-out infinite;
    box-shadow: 0 0 6px var(--accent-glow);
}

.saju-loading-dots span:nth-child(1) { animation-delay: 0s; }
.saju-loading-dots span:nth-child(2) { animation-delay: 0.22s; }
.saju-loading-dots span:nth-child(3) { animation-delay: 0.44s; }

.saju-loading-overlay.fade-out {
    animation: overlay-fade-out 0.5s ease forwards;
}

.saju-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    text-align: center;
    padding: 24px; /* 패딩을 줄여 모바일 콘텐츠 폭 확보 */
    width: 100%;
    max-width: 450px;
    min-height: 280px; /* 모바일 찌그러짐 방지용 최소 높이 확보 */
    box-sizing: border-box;
}

/* 태극 아이콘 - 빠른 회전 */
.saju-loading-taeguk {
    font-size: 80px; /* 기존 96px에서 크기 최적화 */
    color: var(--accent);
    filter: drop-shadow(0 0 20px var(--accent-glow)) drop-shadow(0 0 45px rgba(157,78,221,0.3));
    animation: taeguk-spin 1.8s linear infinite;
    line-height: 1;
}

@keyframes taeguk-spin {
    0%   { transform: rotate(0deg) scale(1); }
    50%  { transform: rotate(180deg) scale(1.04); }
    100% { transform: rotate(360deg) scale(1); }
}

/* 로딩 타이틀 */
.saju-loading-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 28px; /* 모바일 대응 축소 */
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #fff 30%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: -4px;
}

.saju-loading-title span {
    font-size: 16px;
    font-weight: 400;
    background: none;
    -webkit-text-fill-color: var(--text-secondary);
    vertical-align: middle;
    margin-left: 6px;
    letter-spacing: 1.5px;
}

/* 분석 중 메시지 */
.saju-loading-msg {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0.3px;
    margin: 0;
    padding: 0 10px;
    word-break: keep-all; /* 모바일에서 텍스트 줄바꿈 깔끔하게 */
}

.saju-loading-sub {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin: 0;
    letter-spacing: 0.5px;
    padding: 0 10px;
    word-break: keep-all;
}

/* 점 세 개 애니메이션 */
.saju-loading-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.saju-loading-dots span {
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.3;
    animation: dot-bounce 1.4s ease-in-out infinite;
    box-shadow: 0 0 6px var(--accent-glow);
}

.saju-loading-dots span:nth-child(1) { animation-delay: 0s; }
.saju-loading-dots span:nth-child(2) { animation-delay: 0.22s; }
.saju-loading-dots span:nth-child(3) { animation-delay: 0.44s; }

@keyframes dot-bounce {
    0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
    40%           { opacity: 1;    transform: translateY(-6px); }
}

/* 모바일 뷰포트 미세 보정 (최대 480px 이하) */
@media (max-width: 480px) {
    .saju-loading-inner {
        gap: 16px;
        padding: 16px;
    }
    .saju-loading-taeguk {
        font-size: 64px;
    }
    .saju-loading-title {
        font-size: 24px;
    }
    .saju-loading-title span {
        font-size: 14px;
    }
    .saju-loading-msg {
        font-size: 0.95rem;
    }
    .saju-loading-sub {
        font-size: 0.75rem;
    }
    .loading-ticker-wrapper {
        width: 92% !important;
        margin: 10px auto !important;
        padding: 6px 10px !important;
    }
    #loading-saju-ticker {
        font-size: 0.8rem !important;
    }
}

.logo-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    font-size: 36px;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, #fff 30%, var(--accent-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.logo-title span {
    font-size: 20px;
    font-weight: 400;
    color: var(--text-secondary);
    vertical-align: middle;
    margin-left: 8px;
    letter-spacing: 2px;
}

.subtitle {
    color: var(--text-secondary);
    font-weight: 300;
    font-size: 16px;
    letter-spacing: 0.5px;
}

/* Main Layout: Forced 100% Full Width */
.main-layout {
    display: block !important;
    width: 100% !important;
}

.main-layout > section,
.main-layout > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.main-layout.has-active-sidebar {
    display: grid !important;
    grid-template-columns: 320px 1fr !important;
    gap: 30px;
    align-items: start;
}

.hidden,
#intro-section.hidden,
#dashboard-content.hidden,
.input-section.hidden {
    display: none !important;
}

#intro-section,
.intro-section-card,
#dashboard-content,
.dashboard-grid {
    width: 100% !important;
    max-width: 100% !important;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 15px;
}

.intro-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

/* Glassmorphism Card Style */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 24px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
    border-color: var(--accent-glow);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.5), 0 0 30px var(--primary-glow), inset 0 1px 1px rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 12px;
}

.card-icon {
    font-size: 18px;
    color: #b388ff;
    width: 32px;
    height: 32px;
    background: rgba(179, 136, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.card-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.header-text-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-birth-details {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
}

/* Input Form Styling */
.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 14px;
    color: var(--text-muted);
    font-size: 14px;
}

.input-wrapper input,
.input-wrapper select {
    width: 100%;
    background: rgba(10, 8, 20, 0.6);
    border: 1px solid rgba(157, 78, 221, 0.2);
    border-radius: 12px;
    padding: 14px 16px 14px 44px;
    color: var(--text-primary);
    font-size: 14px;
    outline: none;
    transition: all 0.25s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.input-wrapper input:focus,
.input-wrapper select:focus {
    border-color: #b388ff;
    background: rgba(10, 8, 20, 0.8);
    box-shadow: 0 0 15px rgba(179, 136, 255, 0.25), inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.gender-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.gender-selector input[type="radio"] {
    display: none;
}

.gender-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px;
    text-align: center;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-secondary);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.gender-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.gender-selector input[type="radio"]:checked + .gender-btn {
    border-color: #b388ff;
    color: #b388ff;
    background: rgba(179, 136, 255, 0.08);
    font-weight: 500;
}

.calendar-selector {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
}

.calendar-selector input[type="radio"] {
    display: none;
}

.calendar-btn {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 12px 6px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.calendar-btn:hover {
    background: rgba(255, 255, 255, 0.05);
}

.calendar-selector input[type="radio"]:checked + .calendar-btn {
    border-color: #b388ff;
    color: #b388ff;
    background: rgba(179, 136, 255, 0.08);
    font-weight: 500;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, #7b2cbf 0%, #9d4edd 100%);
    border: none;
    border-radius: 12px;
    padding: 16px;
    color: white;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(123, 44, 191, 0.35);
    letter-spacing: 0.5px;
}

.btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(123, 44, 191, 0.55);
    background: linear-gradient(135deg, #9d4edd 0%, #b388ff 100%);
}

.btn-submit:active {
    transform: translateY(0);
}

/* Dashboard Grid & Tabs */
.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.tab-navigation {
    display: flex;
    background: rgba(15, 10, 25, 0.5);
    border: 1px solid rgba(157, 78, 221, 0.15);
    border-radius: 14px;
    padding: 6px;
    gap: 8px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 14px;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.tab-btn:hover {
    color: var(--text-primary);
    background: rgba(157, 78, 221, 0.08);
}

.tab-btn.active {
    background: rgba(157, 78, 221, 0.22);
    color: #e0aaff;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(157, 78, 221, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.tab-pane {
    display: none !important;
    animation: fadeIn 0.4s ease forwards;
}

.tab-pane.active {
    display: block !important;
    min-height: 200px;
}

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

/* Tab 1: 오늘의 운세 디자인 */
.pane-grid-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    margin-bottom: 25px;
}

.fortune-main-card .fortune-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.fortune-score-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    width: 100%;
    background: rgba(157, 78, 221, 0.05);
    border: 1px solid rgba(157, 78, 221, 0.1);
    border-radius: 16px;
    padding: 20px;
}

@media (min-width: 768px) {
    .fortune-main-card .fortune-body {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    
    .fortune-score-container {
        width: 100%;
        padding: 24px;
    }
}

/* Horizontal progress bar chart */
.fortune-bar-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 5px;
}

.fortune-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}

.fortune-bar-title {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.fortune-bar-title i {
    color: #b388ff;
}

.fortune-bar-score {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
    transition: all 0.5s ease;
}

.fortune-bar-bg {
    width: 100%;
    height: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 30px;
    overflow: hidden;
    padding: 2px;
}

.fortune-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 30px;
    background-color: #b388ff;
    transition: width 1.2s cubic-bezier(0.1, 0.8, 0.3, 1), background-color 0.5s ease, box-shadow 0.5s ease;
    box-shadow: 0 0 12px rgba(179, 136, 255, 0.5);
}

.fortune-energy-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 30px;
    padding: 6px 16px;
    font-size: 13px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.badge-sipsin {
    background: linear-gradient(135deg, #7b1fa2, #e040fb);
    color: white;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.fortune-summary-box {
    background: rgba(10, 8, 20, 0.4);
    border-radius: 14px;
    padding: 22px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(157, 78, 221, 0.12);
    border-left: 4px solid var(--accent);
}

.fortune-summary-box p {
    font-size: 15px;
    line-height: 1.8;
    color: var(--text-primary);
    letter-spacing: 0.2px;
}

/* Inline Lucky Tips styling */
.fortune-text-content {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.lucky-tips-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    width: 100%;
}

@media (min-width: 768px) {
    .lucky-tips-row {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    .lucky-tips-row {
        grid-template-columns: 1fr;
    }
}

.lucky-pill {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(157, 78, 221, 0.04);
    border: 1px solid rgba(157, 78, 221, 0.1);
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 13px;
    transition: all 0.25s ease;
}

.lucky-pill:hover {
    background: rgba(157, 78, 221, 0.08);
    border-color: rgba(157, 78, 221, 0.25);
    transform: translateY(-1px);
}

.lucky-pill-icon {
    font-size: 16px;
    color: var(--accent);
    background: rgba(157, 78, 221, 0.12);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    flex-shrink: 0;
}

.lucky-pill-label {
    color: var(--text-muted);
    font-weight: 500;
}

.lucky-pill-val {
    color: var(--text-primary);
    font-weight: 600;
}

/* 4 Aspects Grid */
.aspects-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.aspect-card {
    padding: 20px;
}

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

.aspect-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.aspect-icon.wealth { background: rgba(255, 159, 67, 0.1); color: var(--color-wealth); }
.aspect-icon.love { background: rgba(255, 77, 109, 0.1); color: var(--color-love); }
.aspect-icon.career { background: rgba(0, 210, 211, 0.1); color: var(--color-career); }
.aspect-icon.health { background: rgba(29, 209, 161, 0.1); color: var(--color-health); }

.aspect-header h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: auto;
    margin-left: 10px;
}

.aspect-score {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
}

.aspect-progress-bar {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-fill.wealth { background: var(--color-wealth); }
.progress-fill.love { background: var(--color-love); }
.progress-fill.career { background: var(--color-career); }
.progress-fill.health { background: var(--color-health); }

.aspect-desc {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* Weekly Calendar Flow */
.weekly-days-list {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 12px;
}

.day-item {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 15px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.day-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.day-item.active {
    background: rgba(179, 136, 255, 0.08);
    border-color: #b388ff;
    box-shadow: 0 0 10px rgba(179, 136, 255, 0.15);
}

.day-name {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: 500;
}

.day-date {
    font-size: 13px;
    font-weight: 600;
}

.day-saju-ganji {
    font-size: 11px;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
}

.day-score-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--text-primary);
}

.day-item.active .day-score-circle {
    background: #b388ff;
    color: black;
}

/* Tab 2: 사주 만세력 & 오행 디자인 */
.saju-pillars-container {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 25px;
    margin-bottom: 25px;
}

.pillars-layout {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.pillar-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 12px;
    padding: 15px 10px;
}

.pillar-label {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-weight: 500;
}

.me-pillar {
    border: 1.5px dashed rgba(179, 136, 255, 0.4);
    background: rgba(179, 136, 255, 0.02);
}

.me-tag {
    background: #b388ff;
    color: black;
    padding: 0 4px;
    border-radius: 3px;
    font-size: 9px;
    font-weight: 700;
    margin-left: 2px;
}

.pillar-chars {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.char-card {
    height: 70px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.02);
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.char-card .hanja {
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 2px;
}

.char-card .hangul {
    font-size: 11px;
    color: var(--text-secondary);
}

/* Elements coloring cards */
.elem-wood { border-color: rgba(46, 204, 113, 0.3); background: linear-gradient(135deg, rgba(46, 204, 113, 0.03), rgba(46, 204, 113, 0.09)); }
.elem-wood .hanja { color: var(--color-wood); text-shadow: 0 0 10px rgba(46, 204, 113, 0.3); }

.elem-fire { border-color: rgba(231, 76, 60, 0.3); background: linear-gradient(135deg, rgba(231, 76, 60, 0.03), rgba(231, 76, 60, 0.09)); }
.elem-fire .hanja { color: var(--color-fire); text-shadow: 0 0 10px rgba(231, 76, 60, 0.3); }

.elem-earth { border-color: rgba(241, 196, 222, 0.3); background: linear-gradient(135deg, rgba(241, 196, 222, 0.03), rgba(241, 196, 222, 0.09)); }
.elem-earth .hanja { color: var(--color-earth); text-shadow: 0 0 10px rgba(241, 196, 222, 0.3); }

.elem-metal { border-color: rgba(210, 218, 226, 0.3); background: linear-gradient(135deg, rgba(210, 218, 226, 0.03), rgba(210, 218, 226, 0.09)); }
.elem-metal .hanja { color: var(--color-metal); text-shadow: 0 0 10px rgba(210, 218, 226, 0.3); }

.elem-water { border-color: rgba(52, 152, 219, 0.3); background: linear-gradient(135deg, rgba(52, 152, 219, 0.03), rgba(52, 152, 219, 0.09)); }
.elem-water .hanja { color: var(--color-water); text-shadow: 0 0 10px rgba(52, 152, 219, 0.3); }

.me-char {
    outline: 2px solid #b388ff;
    outline-offset: -1px;
}

.pillar-sipsins {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin-top: 10px;
    align-items: center;
}

.sipsin-label {
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.04);
    padding: 2px 6px;
    border-radius: 4px;
    width: 100%;
    text-align: center;
}

.me-tag-label {
    background: rgba(179, 136, 255, 0.15);
    color: #b388ff;
}

/* Saju Metrics Card */
.metrics-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.metric-row:last-child {
    border-bottom: none;
}

.m-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.m-value {
    font-size: 14px;
    font-weight: 500;
}

.font-highlight {
    color: #b388ff;
}

.text-uppercase {
    text-transform: uppercase;
}

/* Pane Grid 2: Chart & Balance */
.pane-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
}

.element-chart-card .chart-body {
    display: flex;
    align-items: center;
    gap: 30px;
}

.chart-container {
    position: relative;
    width: 150px;
    height: 150px;
}

.element-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.legend-item {
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
}

.legend-item .color-box {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    display: inline-block;
}

.element-wood .color-box { background-color: var(--color-wood); }
.element-fire .color-box { background-color: var(--color-fire); }
.element-earth .color-box { background-color: var(--color-earth); }
.element-metal .color-box { background-color: var(--color-metal); }
.element-water .color-box { background-color: var(--color-water); }

/* Yin Yang & Climate Styles */
.subsection-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    margin-top: 15px;
}

.subsection-title:first-of-type {
    margin-top: 0;
}

.yinyang-bar {
    width: 100%;
    height: 24px;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    font-size: 11px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
}

.yy-fill.yang {
    background: #eceff1;
    color: #263238;
}

.yy-fill.yin {
    background: #37474f;
    color: #cfd8dc;
}

.climate-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.climate-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cl-label {
    font-size: 12px;
    color: var(--text-muted);
    width: 90px;
}

.cl-bar-wrapper {
    flex: 1;
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
    overflow: hidden;
}

.cl-bar {
    height: 100%;
    border-radius: 3px;
}

.cl-bar.cold { background-color: #00d2d3; }
.cl-bar.hot { background-color: #ff7675; }
.cl-bar.dry { background-color: #ffeaa7; }
.cl-bar.wet { background-color: #74b9ff; }

.cl-val {
    font-size: 12px;
    font-weight: 600;
    width: 20px;
    text-align: right;
}

/* Tab 3: AI 진로 예측 디자인 */
.career-intro-card {
    margin-bottom: 25px;
}

.career-p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 15px;
}

.demo-badge-alert {
    background: rgba(243, 156, 18, 0.08);
    border: 1px solid rgba(243, 156, 18, 0.2);
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 13px;
    color: #f39c12;
    line-height: 1.5;
}

.ai-predictions-layout {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 25px;
}

.model-card {
    position: relative;
    padding-top: 42px !important; /* Adequate space for absolute badge inside card */
    overflow: visible !important;
}

.model-badge {
    position: absolute;
    top: 12px;
    left: 16px;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 700;
    color: white;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    z-index: 2;
}

.model-badge.mlp { background: linear-gradient(135deg, #1abc9c, #16a085); }
.model-badge.rf { background: linear-gradient(135deg, #3498db, #2980b9); }
.model-badge.gbdt { background: linear-gradient(135deg, #9b59b6, #8e44ad); }

.model-accuracy {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 18px;
}

.pred-bars-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.pred-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pred-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
}

.pred-cat {
    font-weight: 500;
    color: var(--text-secondary);
}

.pred-pct {
    font-weight: 700;
    color: var(--text-primary);
}

.pred-progress-bg {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.pred-progress-fill {
    height: 100%;
    border-radius: 4px;
    background: #b388ff;
    transition: width 1s ease-out;
}

/* Synthesis Card */
.career-synthesis-card .synthesis-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 30px;
}

.synthesized-ranks {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.rank-item {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.03);
    padding: 12px 15px;
    border-radius: 12px;
}

.rank-item.first {
    border-color: rgba(255, 215, 0, 0.2);
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.02), rgba(255, 215, 0, 0.05));
}

.rank-num {
    font-family: 'Outfit', sans-serif;
    font-size: 24px;
    font-weight: 800;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.first .rank-num {
    background: #ffd700;
    color: black;
}

.rank-detail h4 {
    font-size: 15px;
    font-weight: 700;
}

.rank-sub {
    font-size: 11px;
    color: var(--text-muted);
}

.career-interpretation h3 {
    font-size: 15px;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.career-interpretation p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Hidden Utility */
.hidden {
    display: none !important;
}

/* Modal Styling */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

.modal-content {
    background: #14161d;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    width: 550px;
    max-width: 90%;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.modal-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.btn-close-modal {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
}

.modal-body {
    padding: 24px;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.step-box {
    margin-top: 15px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.04);
    padding: 14px;
    border-radius: 8px;
}

.step-num {
    background: #b388ff;
    color: black;
    font-weight: 700;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 6px;
}

.modal-body pre {
    background: #000;
    padding: 10px;
    border-radius: 6px;
    overflow-x: auto;
    font-family: monospace;
    color: #2ecc71;
    margin-top: 8px;
}

.modal-footer {
    padding: 14px 24px;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: flex-end;
}

.btn-primary {
    background: #b388ff;
    color: black;
    border: none;
    padding: 8px 20px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary:hover {
    background: #d1c4e9;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    .main-layout,
    .main-layout.has-active-sidebar {
        display: block !important;
        grid-template-columns: 1fr !important;
    }
    .pane-grid-1, .saju-pillars-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .aspects-grid {
        grid-template-columns: 1fr 1fr;
    }
    .weekly-days-list {
        grid-template-columns: repeat(4, 1fr);
    }
    .pillars-layout {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    .pane-grid-2 {
        grid-template-columns: 1fr;
    }
    .ai-predictions-layout {
        grid-template-columns: 1fr;
    }
    .career-synthesis-card .synthesis-layout {
        grid-template-columns: 1fr;
    }
}

/* AI & Blockchain Matchmaking Styles */
.matching-intro-body {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.matching-p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}
.strategy-cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
.strategy-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
    transition: transform 0.2s, border-color 0.2s;
}
.strategy-card:hover {
    transform: translateY(-3px);
    border-color: rgba(179, 136, 255, 0.2);
}
.strategy-icon {
    font-size: 22px;
    color: #b388ff;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(179, 136, 255, 0.4);
}
.strategy-card h4 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-primary);
}
.strategy-card p {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Candidates Container */
.candidates-container {
    min-height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
}
.searching-match {
    text-align: center;
    padding: 30px;
}
.pulse-heart {
    font-size: 48px;
    color: var(--color-love);
    animation: heartPulse 1.2s infinite alternate;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 15px rgba(255, 77, 109, 0.5));
}
@keyframes heartPulse {
    0% { transform: scale(0.9); }
    100% { transform: scale(1.1); }
}
.searching-match p {
    font-size: 13px;
    color: var(--text-secondary);
}

.candidate-card-item {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: all 0.3s;
}
.candidate-card-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(0, 0, 0, 0.25);
}
.candidate-card-item.active {
    border-color: #b388ff;
    background: rgba(179, 136, 255, 0.04);
    box-shadow: 0 0 15px rgba(179, 136, 255, 0.1);
}
.candidate-header {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
.candidate-meta-row {
    display: flex;
    align-items: center;
    gap: 15px;
}
.candidate-avatar {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #ab47bc, #6200ea);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: white;
    box-shadow: 0 0 10px rgba(179, 136, 255, 0.3);
}
.candidate-name-age h3 {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 3px;
    color: var(--text-primary);
}
.candidate-name-age h3 span {
    font-size: 13px;
    font-weight: 400;
    color: var(--text-secondary);
    margin-left: 6px;
}
.candidate-job-edu {
    font-size: 11.5px;
    color: var(--text-muted);
}
.candidate-manner-badge {
    background: rgba(255, 77, 109, 0.1);
    color: var(--color-love);
    border: 1px solid rgba(255, 77, 109, 0.2);
    border-radius: 30px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
}
.badge-did-group {
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 5px;
}
.badge-did {
    font-size: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    padding: 2px 6px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
}
.badge-did.verified {
    background: rgba(46, 204, 113, 0.08);
    border-color: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}
.candidate-desc-box {
    background: rgba(0, 0, 0, 0.2);
    border-left: 3px solid #b388ff;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.candidate-score-pills {
    display: flex;
    gap: 10px;
}
.score-capsule {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 6px 12px;
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.score-capsule .val {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #b388ff;
}
.score-capsule .lbl {
    font-size: 10px;
    color: var(--text-muted);
}
.btn-candidate-action {
    background: linear-gradient(135deg, #6200ea, #ab47bc);
    border: none;
    border-radius: 8px;
    padding: 10px 14px;
    color: white;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.btn-candidate-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(106, 27, 154, 0.4);
}
.btn-candidate-action.selected-state {
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ecc71;
    box-shadow: none;
    cursor: default;
}

/* Escrow Demo styles */
.escrow-body {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.escrow-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.escrow-visual {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
}
.escrow-actor {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 90px;
    z-index: 2;
}
.actor-avatar {
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-secondary);
}
.escrow-actor.user .actor-avatar {
    border-color: #b388ff;
    color: #b388ff;
    background: rgba(179, 136, 255, 0.05);
}
.escrow-actor.partner .actor-avatar {
    border-color: var(--color-love);
    color: var(--color-love);
    background: rgba(255, 77, 109, 0.05);
}
.escrow-actor span {
    font-size: 11px;
    color: var(--text-secondary);
    text-align: center;
    white-space: nowrap;
}
.escrow-flow-center {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
}
.escrow-vault {
    width: 54px;
    height: 54px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    transition: all 0.3s;
}
.escrow-vault.locked {
    border-color: #2ecc71;
    background: rgba(46, 204, 113, 0.08);
    box-shadow: 0 0 15px rgba(46, 204, 113, 0.2);
}
.escrow-vault i {
    font-size: 16px;
    color: var(--text-muted);
    transition: all 0.3s;
}
.escrow-vault.locked i {
    color: #2ecc71;
}
.vault-status {
    font-size: 8px;
    color: var(--text-muted);
    margin-top: 3px;
}
.escrow-vault.locked .vault-status {
    color: #2ecc71;
    font-weight: 500;
}
.flow-line {
    position: absolute;
    top: 50%;
    left: 10%;
    right: 10%;
    height: 2px;
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-50%);
    z-index: 1;
}
.flow-line.locked {
    background: linear-gradient(90deg, #b388ff 0%, #2ecc71 50%, var(--color-love) 100%);
    background-size: 200% 200%;
    animation: flowPulse 2s infinite linear;
}
@keyframes flowPulse {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}
.escrow-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.escrow-step {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-muted);
}
.escrow-step.active {
    color: var(--text-primary);
    font-weight: 500;
}
.escrow-step.completed {
    color: #2ecc71;
    font-weight: 500;
}
.escrow-step .step-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}
.escrow-step.active .step-dot {
    background: #b388ff;
    color: black;
    font-weight: 600;
}
.escrow-step.completed .step-dot {
    background: #2ecc71;
    color: black;
    font-weight: 600;
}
.btn-escrow-action {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 10px;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}
.btn-escrow-action:not(:disabled):hover {
    background: #b388ff;
    color: black;
    border-color: #b388ff;
}
.btn-escrow-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.btn-escrow-action.secondary {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.2);
    color: #2ecc71;
}
.btn-escrow-action.secondary:hover {
    background: #2ecc71;
    color: black;
}
.escrow-hash-box {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: monospace;
    font-size: 11px;
    display: flex;
    justify-content: space-between;
}
.hash-label {
    color: var(--text-muted);
}
.hash-val {
    color: #2ecc71;
}

/* Chat Simulator Styles */
.chat-sim-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 25px;
    align-items: stretch;
}
.chat-room-container {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    height: 420px;
    overflow: hidden;
}
.chat-room-header {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    padding: 12px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-partner-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.partner-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--text-muted);
}
.chat-partner-info h4 {
    font-size: 14px;
    font-weight: 600;
}
.did-badge {
    font-size: 9px;
    background: rgba(46, 204, 113, 0.1);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.2);
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 2px;
}
.manner-temp-box {
    text-align: right;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.manner-temp-box span {
    font-size: 9px;
    color: var(--text-muted);
}
.manner-temp-box strong {
    font-size: 13px;
    color: var(--color-love);
}
.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: rgba(0, 0, 0, 0.1);
}
.chat-system-message {
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
    background: rgba(255, 255, 255, 0.02);
    padding: 8px 12px;
    border-radius: 8px;
    margin: 10px 0;
}
.chat-msg {
    display: flex;
    flex-direction: column;
    max-width: 75%;
}
.chat-msg.partner {
    align-self: flex-start;
}
.chat-msg.user {
    align-self: flex-end;
}
.msg-bubble {
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.5;
    word-break: break-all;
}
.chat-msg.partner .msg-bubble {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border-top-left-radius: 2px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top-right-radius: 12px;
}
.chat-msg.user .msg-bubble {
    background: #6200ea;
    color: white;
    border-top-right-radius: 2px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border-top-left-radius: 12px;
}
.msg-time {
    font-size: 9px;
    color: var(--text-muted);
    margin-top: 4px;
}
.chat-msg.partner .msg-time { align-self: flex-start; }
.chat-msg.user .msg-time { align-self: flex-end; }

.chat-input-area {
    padding: 12px;
    background: rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    gap: 10px;
}
.chat-input-area input {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px 14px;
    color: white;
    font-size: 13px;
    outline: none;
    transition: all 0.2s;
}
.chat-input-area input:focus {
    border-color: #b388ff;
    background: rgba(0, 0, 0, 0.5);
}
.btn-chat-send {
    background: #b388ff;
    color: black;
    border: none;
    border-radius: 8px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s;
}
.btn-chat-send:disabled {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-muted);
    cursor: not-allowed;
}
.btn-chat-send:not(:disabled):hover {
    transform: scale(1.05);
    background: white;
}

/* Chat Coach panel */
.chat-coach-panel {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.chat-coach-panel .panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 10px;
}
.chat-coach-panel .panel-header i {
    color: #b388ff;
    text-shadow: 0 0 10px rgba(179, 136, 255, 0.5);
}
.chat-coach-panel .panel-header h3 {
    font-size: 15px;
    font-weight: 600;
}
.coach-content-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.coach-desc {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
.coach-advice-box {
    background: rgba(179, 136, 255, 0.04);
    border: 1px dashed rgba(179, 136, 255, 0.2);
    border-radius: 10px;
    padding: 15px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
    min-height: 100px;
}
.coach-actions-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.btn-coach-action {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 10px;
    color: var(--text-secondary);
    font-size: 11.5px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-coach-action:not(:disabled):hover {
    background: rgba(179, 136, 255, 0.08);
    border-color: rgba(179, 136, 255, 0.3);
    color: #b388ff;
}
.btn-coach-action:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.btn-coach-action.warning:not(:disabled):hover {
    background: rgba(231, 76, 60, 0.1);
    border-color: rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}
.chat-warning-banner {
    background: rgba(231, 76, 60, 0.08);
    border: 1px solid rgba(231, 76, 60, 0.2);
    border-radius: 8px;
    padding: 10px;
    font-size: 11px;
    line-height: 1.5;
    color: #e74c3c;
    margin: 10px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Responsive adjustment for matching */
@media (max-width: 1024px) {
    .chat-sim-layout {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 768px) {
    .strategy-cards-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* MBTI Modal specific styling */
.mbti-modal {
    width: 600px !important;
    background: #181b24;
}
.mbti-intro-text {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-bottom: 20px;
    text-align: center;
}
.mbti-progress {
    font-size: 12px;
    color: #b388ff;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mbti-question {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--text-primary);
}
.mbti-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.btn-mbti-option {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 16px 20px;
    text-align: left;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}
.btn-mbti-option:hover {
    background: rgba(179, 136, 255, 0.08);
    border-color: rgba(179, 136, 255, 0.4);
    color: var(--text-primary);
    transform: translateY(-2px);
}
.btn-mbti-option .option-letter {
    font-size: 24px;
    font-weight: 800;
    color: #b388ff;
    width: 32px;
    height: 32px;
    background: rgba(179, 136, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-mbti-option .option-desc {
    flex: 1;
    font-size: 13.5px;
    line-height: 1.4;
}

/* Result Card */
.mbti-result-card {
    background: linear-gradient(135deg, rgba(179, 136, 255, 0.05), rgba(179, 136, 255, 0.01));
    border: 1px solid rgba(179, 136, 255, 0.2);
    border-radius: 14px;
    padding: 30px;
    text-align: center;
    margin-top: 10px;
}
.mbti-result-title {
    font-size: 13px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.mbti-result-badge {
    font-family: 'Outfit', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #b388ff;
    text-shadow: 0 0 20px rgba(179, 136, 255, 0.4);
    margin-bottom: 8px;
}
.mbti-result-summary {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 15px;
}
.mbti-result-desc {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Today's OOTD & Weather Card Styles */
.fortune-style-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.weather-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 14px 18px;
}

.weather-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.weather-icon-wrapper {
    width: 40px;
    height: 40px;
    background: rgba(179, 136, 255, 0.1);
    border: 1px solid rgba(179, 136, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #b388ff;
    animation: pulseGlow 3s infinite alternate;
}

@keyframes pulseGlow {
    0% { transform: scale(1); box-shadow: 0 0 5px rgba(179, 136, 255, 0.2); }
    100% { transform: scale(1.05); box-shadow: 0 0 15px rgba(179, 136, 255, 0.4); }
}

.weather-text-group {
    display: flex;
    flex-direction: column;
}

.weather-status {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.weather-temp {
    font-size: 11px;
    color: var(--text-muted);
}

.lucky-color-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.lucky-color-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
}

.lucky-color-badge {
    background: rgba(179, 136, 255, 0.15);
    border: 1px solid rgba(179, 136, 255, 0.3);
    color: #b388ff;
    padding: 3px 10px;
    border-radius: 30px;
    font-size: 11.5px;
    font-weight: 600;
}

.ootd-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

@media (min-width: 768px) {
    .ootd-items {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 15px;
    }
}

.ootd-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.01);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    padding: 10px 14px;
    transition: all 0.2s;
}

.ootd-item:hover {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    transform: translateX(4px);
}

.ootd-item .item-icon {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--text-secondary);
}

.ootd-item .item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ootd-item .item-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 500;
}

.ootd-item .item-val {
    font-size: 12.5px;
    color: var(--text-primary);
    font-weight: 500;
    line-height: 1.4;
}

.ootd-advice-box {
    background: rgba(179, 136, 255, 0.04);
    border-left: 3px solid #b388ff;
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
    position: relative;
    margin-top: 5px;
}

.ootd-advice-box p {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Adjust grid layout of pane-grid-1 on desktop */
@media (min-width: 992px) {
    .pane-grid-1 {
        grid-template-columns: 1fr;
    }
}

/* ----------------------------------------------------
   SASANG CONSTITUTION STYLE
   ---------------------------------------------------- */
.sasang-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 4px;
}

.sasang-intro-card {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.45) 0%, rgba(15, 23, 42, 0.45) 100%);
    border: 1px solid rgba(179, 136, 255, 0.15);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
}

.sasang-intro-body p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.sasang-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 24px;
}

@media (max-width: 992px) {
    .sasang-grid-layout {
        grid-template-columns: 1fr;
    }
}

/* Saju Elements Bars */
.sasang-progress-group {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 20px;
}

.sasang-progress-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sasang-name-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.sasang-prob-val {
    font-size: 14px;
    font-weight: 700;
    color: #b388ff;
}

.sasang-progress-bar-bg {
    height: 10px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.03);
}

.sasang-progress-bar {
    height: 100%;
    border-radius: 5px;
    transition: width 1s cubic-bezier(0.1, 0.8, 0.25, 1);
    width: 0%;
}

.fill-taemin {
    background: linear-gradient(90deg, #10b981 0%, #059669 100%);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.35);
}

.fill-soemin {
    background: linear-gradient(90deg, #06b6d4 0%, #0891b2 100%);
    box-shadow: 0 0 10px rgba(6, 182, 212, 0.35);
}

.fill-soyang {
    background: linear-gradient(90deg, #f97316 0%, #ea580c 100%);
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.35);
}

.fill-taeyang {
    background: linear-gradient(90deg, #a855f7 0%, #7e22ce 100%);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.35);
}

.saju-sasang-tip {
    margin-top: 15px;
    padding: 14px;
    background: rgba(179, 136, 255, 0.03);
    border-radius: 10px;
    border: 1px dashed rgba(179, 136, 255, 0.15);
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.saju-sasang-tip i {
    color: #b388ff;
    margin-right: 5px;
}

/* Questionnaire Box styling */
.survey-question-box {
    margin-bottom: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding-bottom: 20px;
}

.survey-question-box:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.survey-q-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    display: inline-block;
    line-height: 1.5;
}

.survey-q-title .q-num {
    background: rgba(179, 136, 255, 0.15);
    color: #b388ff;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 8px;
    font-size: 11px;
    font-weight: 700;
}

.survey-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.survey-opt {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.survey-opt:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(179, 136, 255, 0.25);
    transform: translateX(4px);
}

.survey-opt input[type="radio"] {
    margin-right: 12px;
    accent-color: #b388ff;
    transform: scale(1.1);
    cursor: pointer;
}

.survey-opt .opt-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
    transition: color 0.2s ease;
}

.survey-opt input[type="radio"]:checked + .opt-text {
    color: #fff;
    font-weight: 600;
}

.survey-opt:has(input[type="radio"]:checked) {
    background: rgba(179, 136, 255, 0.08);
    border-color: #b388ff;
    box-shadow: 0 0 12px rgba(179, 136, 255, 0.15);
}

.btn-sasang-diagnose {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #7e22ce 0%, #b388ff 100%);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    box-shadow: 0 4px 15px rgba(126, 34, 206, 0.25);
}

.btn-sasang-diagnose:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(126, 34, 206, 0.45), 0 0 10px rgba(179, 136, 255, 0.3);
    filter: brightness(1.05);
}

/* Results section styling */
.sasang-result-section {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: sasangFadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes sasangFadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.result-alignment {
    display: flex;
    flex-direction: row;
    gap: 32px;
    align-items: center;
    padding: 8px;
}

@media (max-width: 768px) {
    .result-alignment {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 24px;
    }
}

.result-badge-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    min-width: 190px;
}

.sasang-main-badge {
    font-size: 26px;
    font-weight: 800;
    color: #fff;
    padding: 16px 28px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(126, 34, 206, 0.25) 0%, rgba(179, 136, 255, 0.15) 100%);
    border: 2px solid #b388ff;
    text-shadow: 0 0 10px rgba(179, 136, 255, 0.6);
    box-shadow: 0 0 20px rgba(179, 136, 255, 0.2);
}

.sasang-subtitle-badge {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 12px;
    border-radius: 20px;
}

.result-detail-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.result-desc-p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.result-warning-diseases {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
    background: rgba(231, 76, 60, 0.05);
    border-left: 3px solid #e74c3c;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.result-warning-diseases .warning-title {
    font-weight: 700;
    color: #e74c3c;
    display: flex;
    align-items: center;
    gap: 6px;
}

.result-warning-diseases span:last-child {
    font-weight: 600;
    color: #ffa39e;
}

/* Dietary & Concern tabs styling */
.concern-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.concern-tab-btn {
    flex: 1;
    min-width: 130px;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.concern-tab-btn:hover {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
}

.concern-tab-btn.active {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    border-color: #a78bfa;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.3);
}

.diet-result-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .diet-result-grid {
        grid-template-columns: 1fr;
    }
}

.diet-box {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(255, 255, 255, 0.01);
}

.diet-box-title {
    font-size: 14.5px;
    font-weight: 700;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.text-green {
    color: #2ecc71;
}

.text-red {
    color: #e74c3c;
}

.text-yellow {
    color: #f1c40f;
}

.good-food-box {
    border-color: rgba(46, 204, 113, 0.15);
    background: rgba(46, 204, 113, 0.01);
    box-shadow: inset 0 0 15px rgba(46, 204, 113, 0.02);
}

.bad-food-box {
    border-color: rgba(231, 76, 60, 0.15);
    background: rgba(231, 76, 60, 0.01);
    box-shadow: inset 0 0 15px rgba(231, 76, 60, 0.02);
}

.diet-food-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.diet-food-list li {
    font-size: 13.5px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.diet-food-list li i {
    font-size: 12px;
}

.health-advice-banner {
    margin-top: 20px;
    padding: 16px 20px;
    background: rgba(241, 196, 15, 0.03);
    border-left: 4px solid #f1c40f;
    border-radius: 0 10px 10px 0;
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.health-advice-banner strong {
    color: var(--text-primary);
}

/* ==========================================================================
   대운 & 세운 스타일
   ========================================================================== */
.daeun-seun-card {
    margin-top: 25px;
    width: 100%;
}

.daeun-summary {
    background: rgba(10, 8, 20, 0.4);
    border: 1px solid rgba(157, 78, 221, 0.12);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 20px;
}

.info-badge-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.info-badge {
    background: rgba(179, 136, 255, 0.1);
    border: 1px solid rgba(179, 136, 255, 0.2);
    color: #e0aaff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13.5px;
    font-weight: 500;
}

.daeun-desc {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.daeun-grid-container,
.seun-section-container {
    margin-top: 20px;
}

.daeun-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 12px;
    margin-top: 10px;
}

@media (max-width: 1024px) {
    .daeun-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 576px) {
    .daeun-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.daeun-item {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
}

.daeun-item:hover {
    border-color: rgba(179, 136, 255, 0.35);
    background: rgba(179, 136, 255, 0.03);
    transform: translateY(-2px);
}

.daeun-item.active {
    background: rgba(157, 78, 221, 0.15);
    border-color: #b388ff;
    box-shadow: 0 0 15px rgba(157, 78, 221, 0.25);
}

.daeun-item.current::after {
    content: "★";
    position: absolute;
    top: 4px;
    right: 6px;
    color: #ffd700;
    font-size: 11px;
}

.daeun-age {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.daeun-pillar-box {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}

.daeun-char-mini {
    width: 28px;
    height: 38px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.daeun-char-mini.wood { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.3); }
.daeun-char-mini.fire { background: rgba(231, 76, 60, 0.15); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.3); }
.daeun-char-mini.earth { background: rgba(241, 196, 15, 0.15); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.3); }
.daeun-char-mini.metal { background: rgba(210, 218, 226, 0.15); color: #d2dae2; border: 1px solid rgba(210, 218, 226, 0.3); }
.daeun-char-mini.water { background: rgba(52, 152, 219, 0.15); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.3); }

.daeun-sipsin-box {
    display: flex;
    flex-direction: column;
    font-size: 10px;
    color: var(--text-secondary);
    gap: 2px;
}

.daeun-sipsin-val {
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
}

/* 세운 스타일 */
.seun-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-top: 10px;
}

@media (max-width: 768px) {
    .seun-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    .seun-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.seun-item {
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.seun-item:hover {
    border-color: rgba(179, 136, 255, 0.35);
    background: rgba(179, 136, 255, 0.03);
    transform: translateY(-2px);
}

.seun-item.current-year {
    border-color: rgba(179, 136, 255, 0.5);
    background: rgba(179, 136, 255, 0.08);
    box-shadow: 0 0 10px rgba(179, 136, 255, 0.15);
}

.seun-year {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.seun-year .me-tag {
    background: #b388ff;
    color: #000;
    font-size: 9px;
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 2px;
    font-weight: bold;
}

.seun-pillar-box {
    display: flex;
    gap: 4px;
    margin: 4px 0;
}

.seun-char-mini {
    width: 28px;
    height: 38px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
}

.seun-char-mini.wood { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border: 1px solid rgba(46, 204, 113, 0.3); }
.seun-char-mini.fire { background: rgba(231, 76, 60, 0.15); color: #e74c3c; border: 1px solid rgba(231, 76, 60, 0.3); }
.seun-char-mini.earth { background: rgba(241, 196, 15, 0.15); color: #f1c40f; border: 1px solid rgba(241, 196, 15, 0.3); }
.seun-char-mini.metal { background: rgba(210, 218, 226, 0.15); color: #d2dae2; border: 1px solid rgba(210, 218, 226, 0.3); }
.seun-char-mini.water { background: rgba(52, 152, 219, 0.15); color: #3498db; border: 1px solid rgba(52, 152, 219, 0.3); }

.seun-sipsin-box {
    display: flex;
    flex-direction: column;
    font-size: 10px;
    color: var(--text-secondary);
    gap: 2px;
}

.seun-sipsin-val {
    background: rgba(255, 255, 255, 0.05);
    padding: 1px 4px;
    border-radius: 3px;
}

/* ==========================================================================
   대운 & 세운 해설 모달 스타일
   ========================================================================== */
.fortune-detail-modal {
    width: 600px;
    max-width: 95%;
}

.fortune-detail-pillar-box {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

.fortune-pillar-char {
    font-size: 32px;
    font-weight: 800;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

/* 오행 색상 클래스 */
.fortune-pillar-char.wood { background: rgba(46, 204, 113, 0.15); color: #2ecc71; border: 2px solid rgba(46, 204, 113, 0.4); }
.fortune-pillar-char.fire { background: rgba(231, 76, 60, 0.15); color: #e74c3c; border: 2px solid rgba(231, 76, 60, 0.4); }
.fortune-pillar-char.earth { background: rgba(241, 196, 15, 0.15); color: #f1c40f; border: 2px solid rgba(241, 196, 15, 0.4); }
.fortune-pillar-char.metal { background: rgba(255, 255, 255, 0.1); color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.3); }
.fortune-pillar-char.water { background: rgba(52, 152, 219, 0.15); color: #3498db; border: 2px solid rgba(52, 152, 219, 0.4); }

.fortune-detail-badges {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.fortune-detail-desc-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

.detail-section-title {
    font-size: 14px;
    font-weight: 600;
    color: #e0aaff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.fortune-detail-text {
    font-size: 13.5px;
    color: var(--text-secondary);
    line-height: 1.6;
}

.fortune-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.fortune-detail-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 14px;
}

.card-icon-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.card-icon-title .icon {
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.card-icon-title .icon.wealth { background: rgba(254, 215, 0, 0.1); color: #fed700; }
.card-icon-title .icon.career { background: rgba(52, 152, 219, 0.1); color: #3498db; }
.card-icon-title .icon.love { background: rgba(231, 76, 60, 0.1); color: #e74c3c; }

.card-icon-title h5 {
    font-size: 13.5px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.fortune-detail-card p {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

/* User Auth Section */
.user-auth-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn-login {
    padding: 8px 18px;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    outline: none;
}

.btn-login:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

.user-profile-box {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 12px;
    border-radius: 30px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.user-profile-img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-logout-mini {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    transition: all 0.2s;
}

.btn-logout-mini:hover {
    color: #e74c3c;
    background: rgba(231, 76, 60, 0.1);
}

.btn-profile-edit-mini {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 8px;
    transition: all 0.2s;
}

.btn-profile-edit-mini:hover {
    color: #b388ff;
    background: rgba(179, 136, 255, 0.1);
}

/* Login Modal Specifics */
.login-modal-content {
    width: 400px !important;
}

.register-modal-content {
    width: 520px !important;
}

.login-modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
}

.login-intro {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.login-buttons-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 10px;
}

.social-login-btn {
    width: 100%;
    height: 45px;
    border-radius: 8px;
    border: none;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
}

.social-login-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.google-btn {
    background: #ffffff;
    color: #3c4043;
    padding: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #dadce0;
}

.google-btn:hover {
    background: #f7f9fa;
    border-color: #d2d4d7;
}

.naver-btn {
    background: #03C75A;
    color: #ffffff;
}

.naver-btn:hover {
    background: #02b34f;
}

.naver-btn svg {
    width: 16px;
    height: 16px;
}

/* Age Level Mode Toggle Pill Badge */
.age-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(168, 85, 247, 0.1);
    border: 1px solid rgba(168, 85, 247, 0.2);
    color: #c084fc;
    user-select: none;
}

.age-mode-badge.adult-mode {
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.2);
    color: #facc15;
}

.age-mode-badge:hover {
    transform: translateY(-1px) scale(1.02);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.age-mode-badge:active {
    transform: translateY(0) scale(0.98);
}

/* Intro Landing Section Styling */
.intro-section-card {
    height: auto;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    background: var(--card-bg);
}

.intro-main-desc {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 24px;
    border-left: 3px solid var(--accent);
    padding-left: 16px;
    transition: border-color 0.6s ease;
}

.intro-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.intro-feature-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 18px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid rgba(255, 255, 255, 0.03);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.intro-feature-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent-glow);
    transform: translateX(6px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.feature-icon-wrapper {
    font-size: 1.25rem;
    color: var(--accent-secondary);
    width: 44px;
    height: 44px;
    background: rgba(179, 136, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(179, 136, 255, 0.25);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

body.age-mode-adult .feature-icon-wrapper {
    color: var(--accent-secondary);
    background: rgba(212, 175, 55, 0.1);
    border-color: rgba(212, 175, 55, 0.25);
}

.feature-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.feature-text h4 {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--text-primary);
    transition: color 0.3s ease;
}

.intro-feature-item:hover .feature-text h4 {
    color: var(--accent-secondary);
}

.feature-text p {
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* AI Face/Palm Scanner Styles */
.facepalm-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.facepalm-grid-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.facepalm-scanner-card, .facepalm-result-card, .facepalm-specs-card {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}


.scanner-mode-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.03);
    padding: 6px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.mode-btn {
    flex: 1;
    padding: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.3s ease;
    outline: none;
}

.mode-btn.active,
.mode-btn.active * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: linear-gradient(135deg, #a855f7, #6366f1);
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.25);
}

.viewfinder-container {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4; /* 세로형 세팅 (3/4) */
    background: #090a0f;
    border-radius: 16px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 30px rgba(0,0,0,0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

#facepalm-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

#facepalm-video.mirrored {
    transform: scaleX(-1); /* 전면 카메라일 때만 좌우반전 */
}

#facepalm-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 2;
    pointer-events: none;
}

#facepalm-canvas.mirrored {
    transform: scaleX(-1); /* 전면 카메라일 때만 가이드 좌우반전 */
}

.scanner-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, transparent, #10b981, transparent);
    box-shadow: 0 0 12px #10b981;
    z-index: 3;
    pointer-events: none;
    display: none;
}

.scanner-line.active {
    display: block;
    animation: scannerScan 2.5s ease-in-out infinite;
}

@keyframes scannerScan {
    0% { top: 0%; }
    50% { top: 100%; }
    100% { top: 0%; }
}

.camera-placeholder {
    position: absolute;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    color: var(--text-muted);
}

.camera-placeholder i {
    font-size: 3.5rem;
    color: rgba(255, 255, 255, 0.15);
}

.camera-placeholder p {
    font-size: 0.95rem;
}

.scanner-controls {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.btn-scanner-action {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    outline: none;
}

.btn-camera-toggle {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-camera-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-friend-toggle {
    background: rgba(168, 85, 247, 0.06);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.2);
}

.btn-friend-toggle:hover {
    background: rgba(168, 85, 247, 0.12);
    color: #d8b4fe;
}

.btn-friend-toggle.active {
    background: linear-gradient(135deg, #a855f7, #8b5cf6);
    color: white;
    border-color: transparent;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.25);
}


.btn-scan-trigger {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.25);
}

.btn-scan-trigger:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.35);
}

.btn-scan-trigger.disabled {
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    cursor: not-allowed;
    box-shadow: none;
}

.privacy-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: rgba(16, 185, 129, 0.05);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid rgba(16, 185, 129, 0.1);
}

.result-placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    height: 100%;
    min-height: 350px;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

.result-placeholder-content i {
    font-size: 3rem;
    color: rgba(168, 85, 247, 0.2);
    animation: pulseGlow 2.5s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.85; }
}

.result-summary-box {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

.result-summary-box h4 {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--text-primary) !important;
}

.facepalm-bar-item {
    margin-bottom: 18px;
}

.facepalm-bar-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.facepalm-bar-bg {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.facepalm-bar-fill {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    transition: width 1s ease-in-out;
    background: linear-gradient(90deg, #6366f1, #a855f7);
}

.result-tips-box {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-top: 24px !important;
}

body.theme-light .facepalm-scanner-card,
body.theme-light .facepalm-result-card {
    background: #ffffff !important;
    border: 1px solid rgba(168, 85, 247, 0.25) !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05) !important;
    color: #0f172a !important;
}

body.theme-light .facepalm-result-card .card-body,
body.theme-light .facepalm-result-card #facepalm-result-placeholder,
body.theme-light .facepalm-result-card #facepalm-result-content,
body.theme-light .facepalm-result-card .result-summary-box,
body.theme-light .facepalm-result-card .result-tips-box,
body.theme-light .facepalm-result-card .result-bars-group,
body.theme-light .facepalm-result-card .result-placeholder-content,
body.theme-light .facepalm-result-card div {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 !important;
}

body.theme-light .result-placeholder-content {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    color: #64748b !important;
}

body.theme-light .result-placeholder-content p {
    color: #475569 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
}

body.theme-light .facepalm-scanner-card .scanner-controls {
    background: transparent !important;
    border: none !important;
}

body.theme-light .facepalm-scanner-card .privacy-badge {
    background: rgba(16, 185, 129, 0.08) !important;
    border: 1px solid rgba(16, 185, 129, 0.2) !important;
    color: #047857 !important;
}

body.theme-light .facepalm-scanner-card .privacy-badge span {
    color: #047857 !important;
}

body.theme-light .btn-scanner-action {
    background: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

body.theme-light .btn-scanner-action:hover {
    background: #e0e7ff !important;
    color: #4f46e5 !important;
    border-color: #818cf8 !important;
}

body.theme-light .btn-friend-toggle.active {
    background: linear-gradient(135deg, #7c3aed, #a855f7) !important;
    color: #ffffff !important;
    border-color: #7c3aed !important;
}

body.theme-light #txt-facepalm-main-title {
    color: #312e81 !important;
}

body.theme-light #txt-facepalm-summary {
    color: #1e293b !important;
}

body.theme-light #txt-facepalm-sub-title {
    color: #4f46e5 !important;
}

body.theme-light #txt-facepalm-detail-desc {
    color: #334155 !important;
}

/* AI Saju & MBTI Fusion Gunghap Styles */
.gunghap-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 25px;
    align-items: start;
}

@media (max-width: 1024px) {
    .gunghap-layout {
        grid-template-columns: 1fr;
    }
}

.gunghap-form-panel, .gunghap-result-panel {
    background: rgba(255, 255, 255, 0.01);
    border-radius: 16px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.04);
}

.gunghap-score-container {
    padding: 15px;
    background: rgba(236, 72, 153, 0.05);
    border: 1px solid rgba(236, 72, 153, 0.1);
    border-radius: 12px;
}

.gunghap-score-title {
    font-size: 0.95rem;
    color: #f472b6;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gunghap-score-val {
    font-size: 2.5rem;
    font-weight: 800;
    color: #f43f5e;
    text-shadow: 0 0 15px rgba(244, 63, 94, 0.4);
    margin-top: 5px;
}

/* App Footer Styles */
.app-footer {
    margin-top: 50px;
    padding: 40px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(10, 8, 18, 0.4);
    border-radius: 16px;
    backdrop-filter: blur(10px);
}

.footer-links {
    margin-bottom: 20px;
    display: flex;
    gap: 15px;
    align-items: center;
}

.footer-links a {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.2s ease;
}

.footer-links a:hover {
    color: var(--accent-secondary);
    text-shadow: 0 0 8px rgba(179, 136, 255, 0.5);
}

.footer-links .divider {
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.8rem;
}

.footer-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px 40px;
    margin-bottom: 25px;
    color: var(--text-muted);
    font-size: 0.82rem;
    line-height: 1.8;
}

.footer-info strong {
    color: var(--text-secondary);
}

.footer-info .placeholder-text {
    color: var(--accent-secondary);
    font-weight: 500;
    background: rgba(157, 78, 221, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px dashed rgba(157, 78, 221, 0.3);
}

.footer-copyright {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.78rem;
}

/* Modal policy adjustments */
.policy-modal-content {
    width: 700px;
    max-width: 95%;
}

.policy-text-content {
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--text-secondary);
    padding-right: 10px;
}

.policy-text-content h4 {
    color: var(--text-primary);
    margin-top: 20px;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 0.95rem;
}

.policy-text-content p, .policy-text-content ul {
    margin-bottom: 12px;
}

.policy-text-content ul {
    padding-left: 20px;
    list-style-type: disc;
}

/* ==========================================
   SCROLLING TICKER (DATA STREAM SCANNER)
   ========================================== */
@keyframes ticker {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

.ticker-wrapper {
    overflow: hidden;
    white-space: nowrap;
    background: rgba(168, 85, 247, 0.08);
    border: 1px solid rgba(168, 85, 247, 0.2);
    padding: 10px 14px;
    border-radius: 8px;
    margin: 15px 0;
    position: relative;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.4);
}

.ticker-content {
    display: inline-block;
    padding-left: 100%;
    animation: ticker 25s linear infinite;
    color: #c084fc;
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.5px;
    text-shadow: 0 0 5px rgba(168, 85, 247, 0.5);
}

.loading-ticker-wrapper {
    overflow: hidden;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 10px 14px;
    border-radius: 8px;
    margin: 20px auto;
    width: 85%;
    max-width: 500px;
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
}

/* User profile setting edit btn styling for profile card */
.btn-profile-edit-mini {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 10px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-profile-edit-mini:hover {
    background: rgba(168, 85, 247, 0.15);
    border-color: rgba(168, 85, 247, 0.3);
    color: white;
    box-shadow: 0 2px 10px rgba(168, 85, 247, 0.2);
}

/* ====================================================
   Mobile Responsive Adjustments for Loading Screen and Modals
   ==================================================== */
@media (max-width: 576px) {
    /* 1. Loading Overlay Mobile Adjustments */
    .saju-loading-inner {
        padding: 20px !important;
        gap: 15px !important;
        width: 90% !important;
        max-width: 320px !important;
    }
    .saju-loading-taeguk {
        font-size: 72px !important;
    }
    .saju-loading-title {
        font-size: 24px !important;
    }
    .saju-loading-title span {
        font-size: 14px !important;
    }
    .saju-loading-msg {
        font-size: 0.95rem !important;
        line-height: 1.4;
    }
    .saju-loading-sub {
        font-size: 0.78rem !important;
        line-height: 1.4;
    }
    .loading-ticker-wrapper {
        width: 90% !important;
        margin: 10px auto !important;
        padding: 6px 10px !important;
    }
    .ticker-content {
        font-size: 0.8rem !important;
    }

    /* 2. Login & Profile Modals Mobile Adjustments */
    .login-modal-content {
        width: 90% !important;
        max-width: 360px !important;
        margin: 0 auto;
    }
    .register-modal-content {
        width: 95% !important;
        max-width: 480px !important;
        margin: 0 auto;
    }
    .modal-content {
        border-radius: 12px !important;
    }
}

/* ====================================================
   iOS PWA Bottom Sheet & In-App Modal Styles (Mobile First)
   ==================================================== */
.ios-sheet-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.ios-sheet-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.ios-sheet-content {
    width: 100%;
    max-width: 480px;
    background: linear-gradient(to bottom, #161224 0%, #0c0915 100%);
    border-top: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 24px 24px 0 0;
    padding: 20px 24px 35px 24px;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.1, 0.76, 0.55, 0.94);
    box-sizing: border-box;
}

.ios-sheet-overlay.active .ios-sheet-content {
    transform: translateY(0);
}

.ios-sheet-handle {
    width: 40px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    margin: 0 auto 15px auto;
}

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

.ios-sheet-header h3 {
    font-family: 'Outfit', 'Noto Sans KR', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
}

.ios-sheet-close {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.75rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.ios-sheet-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-top: -10px;
    margin-bottom: 20px;
}

.ios-guide-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 25px;
}

.ios-guide-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 12px 16px;
}

.ios-guide-step .step-num {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.ios-guide-step .step-text {
    font-size: 0.9rem;
    color: var(--text-primary);
    line-height: 1.5;
}

.ios-pointing-finger {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--accent-secondary);
    margin-top: 15px;
}

.ios-pointing-finger i {
    animation: bounceFinger 1.5s infinite;
}

.ios-pointing-finger span {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

@keyframes bounceFinger {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(8px); }
}

/* iOS In-App Warning Modal */
.ios-inapp-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background-color: rgba(7, 4, 10, 0.95);
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ios-inapp-content {
    width: 100%;
    max-width: 360px;
    background: linear-gradient(135deg, #1f1a3a 0%, #0d0a1b 100%);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 20px;
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    box-sizing: border-box;
}

.ios-inapp-logo {
    font-size: 48px;
    color: var(--accent-secondary);
    margin-bottom: 15px;
    animation: rotateLogo 10s linear infinite;
}

@keyframes rotateLogo {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ios-inapp-content h3 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 10px;
    font-weight: 700;
}

.ios-inapp-content p {
    font-size: 0.88rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 20px;
}

.ios-inapp-guide {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 14px 18px;
    text-align: left;
    margin-bottom: 24px;
}

.ios-inapp-guide p {
    font-size: 0.85rem;
    margin-bottom: 8px;
    color: #fff;
}

.ios-inapp-guide ol {
    padding-left: 20px;
    color: var(--text-secondary);
    font-size: 0.82rem;
    line-height: 1.5;
}

.ios-inapp-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.btn-copy-link {
    background: linear-gradient(135deg, #a855f7, #6366f1);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn-copy-link:active {
    transform: scale(0.97);
}

.btn-close-inapp {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px;
    font-size: 0.85rem;
    cursor: pointer;
}

/* ====================================================
   Mobile Responsive Optimizations for Tab Navigation & Result Cards
   ==================================================== */
@media (max-width: 768px) {
    /* 탭 메뉴를 가로 스크롤 형태로 변경하여 화면이 강제로 넓어지는 현상 차단 */
    .tab-navigation {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 6px !important;
        padding: 6px !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch; /* iOS Safari 터치 스크롤 최적화 */
        box-sizing: border-box !important;
    }
    
    .tab-btn {
        flex: 0 0 auto !important; /* 버튼이 강제로 찌그러져 뭉개지지 않도록 방어 */
        padding: 10px 16px !important;
        font-size: 0.85rem !important;
        white-space: nowrap !important;
    }
    
    /* 가로 스크롤바 감추기 (시각적으로 깔끔하게) */
    .tab-navigation::-webkit-scrollbar {
        display: none !important;
    }

    /* 대시보드 및 결과 영역 가로 폭 강제 제한 */
    .dashboard-grid {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    .tab-pane {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* 결과 페이지 내 기타 큰 표나 그리드가 화면을 삐져나가지 않도록 제어 */
    .pane-grid-1, .pane-grid-2, .saju-chart-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* ====================================================
   Extreme Mobile Responsive Patch (width <= 576px)
   ==================================================== */
@media (max-width: 576px) {
    /* 모바일 브라우저 줌아웃 예방을 위한 극약 처방 */
    body, html {
        overflow-x: hidden !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    
    .app-container {
        padding: 6px 4px !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
    
    /* 결과 대시보드 카드 패딩 완화 */
    .card {
        padding: 14px 10px !important;
        margin-bottom: 12px !important;
        border-radius: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* 패밀리 라이프스타일 케어 가로폭 최대화 */
    .family-care-card .card-body {
        padding: 12px 6px !important;
    }
    .spouse-care-section, .child-care-section {
        padding: 12px 8px !important;
        border-radius: 8px !important;
        margin-bottom: 15px !important;
    }

    /* 만세력 사주팔자 기둥 가로폭 박멸 */
    .pillars-layout {
        grid-template-columns: repeat(4, 1fr) !important; /* 기둥을 가로 4열로 유지하되, 내부 크기를 극도로 소형화 */
        gap: 6px !important;
    }
    
    .pillar-box {
        padding: 8px 4px !important;
        border-radius: 8px !important;
        background: rgba(25, 20, 35, 0.4) !important;
    }
    
    .pillar-label {
        font-size: 9px !important;
        margin-bottom: 4px !important;
    }
    
    .pillar-chars {
        gap: 4px !important;
    }
    
    .pillar-char {
        width: 50px !important;
        height: 50px !important;
        font-size: 16px !important;
        line-height: 46px !important;
        border-radius: 8px !important;
    }
    
    .pillar-sipsins {
        font-size: 9px !important;
        margin-top: 4px !important;
    }
    
    /* 오늘 하루 운세 흐름 그리드 1열 배치 */
    .aspects-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    
    /* 주간 운세 7일 카드 가로 스크롤 및 크기 최적화 */
    .weekly-days-list {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 8px !important;
        padding-bottom: 5px !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .weekly-days-list::-webkit-scrollbar {
        display: none !important;
    }
    
    .weekly-day-btn {
        flex: 0 0 calc(25% - 6px) !important; /* 가로 한 칸에 약 4개씩 모이도록 유동 배치 */
        padding: 8px 4px !important;
        font-size: 11px !important;
    }

    /* 행운의 아이템 그리드 1열 배치 */
    .lucky-items-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    /* 대운/세운 표 가로 스크롤 지원 및 크기 다듬기 */
    .daeun-list-container, .seun-list-container {
        display: flex !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
        gap: 8px !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 10px !important;
    }
    
    .daeun-list-container::-webkit-scrollbar, .seun-list-container::-webkit-scrollbar {
        display: none !important;
    }
    
    .daeun-pillar-box, .seun-pillar-box {
        flex: 0 0 75px !important; /* 모바일에서 찌그러짐 방지하고 적당한 너비로 열거 */
    }
    
    /* AI 중매 매칭 그리드 1열 배치 */
    .matching-candidates-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* 사상체질 설문조사 카드 정비 */
    .sasang-question-box {
        padding: 12px !important;
    }
    
    .sasang-options {
        grid-template-columns: 1fr !important; /* 옵션 1열 나열 */
        gap: 8px !important;
    }

    /* 오행 원소 차트 카드 모바일 세로 배치 및 레전드 2열화 */
    .element-chart-card .chart-body {
        flex-direction: column !important;
        gap: 15px !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .element-legend {
        width: 100% !important;
        grid-template-columns: repeat(2, 1fr) !important; /* 레전드를 2열 그리드로 나열 */
        display: grid !important;
        gap: 8px !important;
        padding: 0 10px !important;
    }

    /* 모바일 브라우저 포커스 시 자동 줌인(확대) 현상을 원천적으로 차단하기 위한 16px 폰트 규격 강제화 */
    input[type="text"], 
    input[type="date"], 
    select, 
    textarea {
        font-size: 16px !important;
    }
}

/* ──────────────────────────────────────────────────
   탭 가로 스크롤 좌우 화살표 삼각형 인디케이터 (한 줄 Flex 결속형)
   ────────────────────────────────────────────────── */
.tab-navigation-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 20px !important;
    gap: 8px !important; /* 화살표와 탭 메뉴 사이의 안전 간격 */
    box-sizing: border-box !important;
    position: relative;
}

/* 기본 데스크톱에서는 탭이 한눈에 보이므로 좌우 삼각형(화살표)을 강제 숨김 */
.tab-scroll-arrow {
    display: none !important;
}

@media (max-width: 768px) {
    /* 모바일에서만 노출되는 예쁜 좌우 삼각형 플로팅 화살표 (Flex 자식으로 참여) */
    .tab-scroll-arrow {
        display: flex !important;
        flex: 0 0 28px !important; /* 가로세로 28px 고정 크기로 찌그러짐 방지 */
        width: 28px !important;
        height: 28px !important;
        background: rgba(22, 12, 38, 0.95) !important;
        border: 1px solid rgba(179, 136, 255, 0.4) !important;
        border-radius: 50% !important;
        color: #b388ff !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5) !important;
        transition: all 0.2s ease !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important; /* 절대 배치 제거하여 한 줄 Flex에 강제 동기화 */
        z-index: 15 !important;
    }
    
    .tab-scroll-arrow:active {
        transform: scale(0.88) !important;
        background: var(--accent) !important;
        color: #000 !important;
    }
    
    /* 탭 메뉴 컨테이너가 양 끝 화살표 사이의 남는 모든 가로폭을 유연하게 채움 */
    .tab-navigation {
        flex: 1 !important;
        min-width: 0 !important; /* flex container 내부 오버플로우 한계선 방어 */
        margin: 0 !important;
        width: auto !important; /* 고정 width: 100%를 무력화하여 화살표와 공존하도록 함 */
        max-width: calc(100% - 64px) !important;
    }
}

/* ──────────────────────────────────────────────────
   天命 브랜드 철학 및 신뢰도 강화 카드 스타일
   ────────────────────────────────────────────────── */
.brand-philosophy-card {
    background: linear-gradient(135deg, rgba(23, 14, 43, 0.75) 0%, rgba(10, 11, 13, 0.95) 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.25) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin: 20px 0 30px 0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    position: relative;
    overflow: hidden;
}

.brand-philosophy-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.15) 0%, transparent 70%);
    z-index: 0;
    pointer-events: none;
}

.philosophy-header {
    margin-bottom: 18px;
    position: relative;
    z-index: 1;
}

.philosophy-badge {
    display: inline-block;
    background: rgba(168, 85, 247, 0.15);
    color: #c084fc;
    border: 1px solid rgba(168, 85, 247, 0.3);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.philosophy-header h3 {
    font-size: 1.35rem;
    font-weight: 800;
    color: white;
    margin: 0;
    line-height: 1.4;
    background: linear-gradient(to right, #ffffff, #e1d5ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.philosophy-quote {
    font-family: 'Noto Sans KR', serif;
    background: rgba(255, 255, 255, 0.02);
    border-left: 3px solid #a855f7;
    padding: 12px 16px;
    margin: 0 0 16px 0;
    font-size: 0.95rem;
    color: #e2d9ff;
    line-height: 1.6;
    position: relative;
    z-index: 1;
}

.quote-sub {
    display: block;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 4px;
}

.philosophy-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #d1d5db;
    margin: 0 0 20px 0;
    position: relative;
    z-index: 1;
}

.philosophy-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1;
}

@media (max-width: 768px) {
    .philosophy-grid {
        grid-template-columns: 1fr;
    }
}

.philosophy-item {
    display: flex;
    gap: 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 14px;
}

.philosophy-item .item-icon {
    font-size: 1.25rem;
    color: #b388ff;
    margin-top: 2px;
}

.philosophy-item .item-desc h5 {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    margin: 0 0 6px 0;
}

.philosophy-item .item-desc p {
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

.philosophy-ml-info {
    display: flex;
    gap: 12px;
    background: rgba(168, 85, 247, 0.06);
    border: 1px solid rgba(168, 85, 247, 0.15);
    border-radius: 10px;
    padding: 16px;
    position: relative;
    z-index: 1;
}

.philosophy-ml-info i {
    font-size: 1.15rem;
    color: #c084fc;
    margin-top: 2px;
}

.philosophy-ml-info span {
    font-size: 0.82rem;
    line-height: 1.55;
    color: #e2d9ff;
}

/* 자녀 케어 상단 철학 안내 팁 박스 */
.family-philosophy-banner {
    background: linear-gradient(135deg, rgba(236, 72, 153, 0.1) 0%, rgba(123, 44, 191, 0.08) 100%) !important;
    border: 1px solid rgba(236, 72, 153, 0.25) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}

.family-philosophy-banner i {
    font-size: 1.1rem;
    color: #ec4899;
    margin-right: 6px;
    vertical-align: middle;
}

.family-philosophy-banner p {
    font-size: 0.88rem;
    line-height: 1.55;
    color: #fce7f3;
    margin: 0;
}

/* 모바일에서 사주 입력란 제어 */
.mobile-only-edit-btn-container {
    display: none !important;
}

@media (max-width: 768px) {
    .mobile-only-edit-btn-container {
        display: block !important;
        width: 100% !important;
        margin-top: 5px !important;
        margin-bottom: 15px !important;
    }
    
    .input-section.mobile-hidden {
        display: none !important;
    }
}

/* 서브 탭 네비게이션 스타일 (토정비결 그룹 내부) */
.sub-tab-navigation {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    gap: 6px;
    background: rgba(15, 10, 25, 0.4);
    border: 1px solid rgba(157, 78, 221, 0.1);
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 20px;
    -webkit-overflow-scrolling: touch;
}

.sub-tab-navigation::-webkit-scrollbar {
    display: none !important;
}

.sub-tab-btn {
    flex: 1;
    background: transparent;
    border: none;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
}

.sub-tab-btn:hover {
    color: var(--text-primary);
    background: rgba(157, 78, 221, 0.05);
}

.sub-tab-btn.active {
    background: rgba(157, 78, 221, 0.15);
    color: #e0aaff;
    font-weight: 700;
}

.sub-tab-pane {
    display: none !important;
    animation: fadeIn 0.3s ease forwards;
}

.sub-tab-pane.active {
    display: block !important;
}

/* ====================================================
   Markdown Body responsive style to prevent mobile overflow
   ==================================================== */
.markdown-body {
    width: 100% !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}

.markdown-body p, 
.markdown-body li, 
.markdown-body span, 
.markdown-body h1, 
.markdown-body h2, 
.markdown-body h3, 
.markdown-body h4, 
.markdown-body h5, 
.markdown-body h6 {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

.markdown-body table {
    width: auto;
    border-collapse: collapse !important;
    margin: 15px 0 !important;
}

.markdown-body pre, 
.markdown-body code {
    white-space: pre-wrap !important;
    word-break: break-all !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}









/* ====================================================
   Mystic Tarot AI ("당신의 마음을 비추는 AI 타로") CSS
   ==================================================== */

.tarot-cosmic-bg {
    position: relative;
    background: radial-gradient(circle at 50% 20%, #170e38 0%, #0c071e 60%, #05020d 100%);
    border-radius: 20px;
    padding: 30px 20px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 30px rgba(157, 78, 221, 0.15);
    border: 1px solid rgba(179, 136, 255, 0.2);
}

#tarot-cosmic-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.tarot-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.tarot-hero-title {
    font-size: 32px;
    font-weight: 800;
    background: linear-gradient(135deg, #fff 0%, #e0aaff 50%, #c77dff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 8px;
    letter-spacing: -0.5px;
    text-shadow: 0 0 20px rgba(199, 125, 255, 0.4);
}

.tarot-hero-subtitle {
    font-size: 15px;
    color: rgba(224, 170, 255, 0.85);
    margin-bottom: 25px;
    font-weight: 400;
}

/* Candle Glow Animation */
.candle-glow-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.candle-flame {
    width: 12px;
    height: 24px;
    background: linear-gradient(to top, #ff4500, #ff8c00, #ffd700, #ffffff);
    border-radius: 50% 50% 35% 35%;
    box-shadow: 0 0 15px #ff8c00, 0 0 30px #ff4500, 0 0 45px #ffd700;
    animation: candleFlicker 1.2s infinite alternate ease-in-out;
}

@keyframes candleFlicker {
    0% { transform: scale(1) rotate(-1deg); opacity: 0.9; }
    50% { transform: scale(1.1) rotate(2deg); opacity: 1; }
    100% { transform: scale(0.95) rotate(-2deg); opacity: 0.85; }
}

/* Question Tag Bubbles */
.tarot-tag-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 15px;
    margin-bottom: 25px;
}

.tarot-tag-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(179, 136, 255, 0.25);
    color: #e0aaff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.25s ease;
    backdrop-filter: blur(5px);
}

.tarot-tag-chip:hover {
    background: rgba(199, 125, 255, 0.25);
    border-color: #c77dff;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(199, 125, 255, 0.3);
}

/* Input Area Glassmorphism */
.tarot-input-box {
    position: relative;
    max-width: 650px;
    margin: 0 auto 30px auto;
}

.tarot-textarea {
    width: 100%;
    min-height: 100px;
    background: rgba(18, 11, 40, 0.65);
    border: 1.5px solid rgba(179, 136, 255, 0.3);
    border-radius: 16px;
    padding: 16px 20px;
    color: #fff;
    font-size: 15px;
    line-height: 1.6;
    outline: none;
    backdrop-filter: blur(12px);
    transition: all 0.3s ease;
    resize: vertical;
    box-sizing: border-box;
}

.tarot-textarea:focus {
    border-color: #c77dff;
    box-shadow: 0 0 20px rgba(199, 125, 255, 0.35), inset 0 0 10px rgba(199, 125, 255, 0.1);
}

.tarot-textarea::placeholder {
    color: rgba(224, 170, 255, 0.45);
}

.tarot-spread-selector {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
}

.tarot-spread-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #b388ff;
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
}

.tarot-spread-btn.active,
.tarot-spread-btn.active *,
.tarot-spread-btn:hover,
.tarot-spread-btn:hover * {
    background: linear-gradient(135deg, #7e22ce 0%, #9d4edd 100%);
    border-color: #c77dff;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(157, 78, 221, 0.4);
}

.btn-tarot-start {
    background: linear-gradient(135deg, #9d4edd 0%, #c77dff 50%, #e0aaff 100%);
    border: none;
    color: #0c071e;
    padding: 16px 36px;
    border-radius: 30px;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 6px 25px rgba(199, 125, 255, 0.45);
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}

.btn-tarot-start.disabled {
    opacity: 0.55 !important;
    visibility: visible !important;
    pointer-events: none !important;
    background: linear-gradient(135deg, #3d2458 0%, #583c79 100%) !important;
    color: rgba(224, 170, 255, 0.7) !important;
    box-shadow: none !important;
    transform: none !important;
    border: 1px solid rgba(199, 125, 255, 0.3) !important;
}

.btn-tarot-start.visible {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    animation: pulseBtnGlow 1.8s infinite ease-in-out;
}

@keyframes pulseBtnGlow {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 25px rgba(199, 125, 255, 0.6); }
    50% { transform: scale(1.04); box-shadow: 0 10px 35px rgba(255, 215, 0, 0.8); }
}

.btn-tarot-start:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 35px rgba(199, 125, 255, 0.65);
    filter: brightness(1.1);
}

/* 3D Card Stage & Flipping Animation */
.tarot-stage-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(5, 2, 13, 0.94);
    backdrop-filter: blur(20px);
    z-index: 10000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 20px 60px 20px;
    overflow-y: auto;
}

.tarot-stage-modal.active {
    display: flex;
    animation: fadeIn 0.4s ease forwards;
}

.tarot-stage-header {
    text-align: center;
    margin-bottom: 25px;
}

.tarot-stage-message {
    font-size: 20px;
    font-weight: 700;
    color: #e0aaff;
    margin-bottom: 8px;
    text-shadow: 0 0 12px rgba(224, 170, 255, 0.5);
}

.tarot-cards-row {
    display: flex;
    flex-wrap: wrap !important;
    justify-content: center;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 1050px;
    margin: 0 auto 30px auto;
    perspective: 1000px;
}

/* 3D Card Item - Large High-Detail Dimension */
.tarot-card-item {
    width: 145px;
    min-width: 125px;
    max-width: 165px;
    height: 240px;
    flex: 0 0 145px;
    perspective: 1000px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    margin: 6px;
    transform: translateY(0);
}

.tarot-card-item:hover {
    transform: scale(1.03);
    box-shadow: 0 20px 45px rgba(255, 215, 0, 0.35), 0 0 25px rgba(199, 125, 255, 0.5);
}

.tarot-card-item.flipped {
    transform: translateY(0) scale(1);
}

.tarot-card-item.flipped:hover {
    transform: translateY(0) scale(1.02);
}

@media (max-width: 768px) {
    .tarot-cards-row {
        gap: 10px;
    }
    .tarot-card-item {
        width: 135px;
        height: 225px;
        flex: 0 1 135px;
        margin: 3px;
    }
    .tarot-card-art-box {
        height: 140px;
    }
}

@media (max-width: 576px) {
    .tarot-cards-row {
        gap: 6px;
        padding: 0 4px;
    }
    .tarot-card-item {
        width: 105px;
        height: 175px;
        flex: 0 1 105px;
        margin: 2px;
    }
    .tarot-card-header-bar {
        padding: 2px 4px;
    }
    .tarot-roman, .tarot-card-front-title {
        font-size: 10px;
    }
    .tarot-orientation-badge {
        font-size: 8px;
        padding: 1px 4px;
    }
    .tarot-card-art-box {
        height: 105px;
    }
    .tarot-card-footer-bar {
        font-size: 8px;
        padding: 2px 4px;
    }
    .tarot-card-back-emblem {
        width: 55px;
        height: 55px;
    }
    .tarot-ring-outer {
        width: 52px;
        height: 52px;
    }
    .tarot-ring-inner {
        width: 40px;
        height: 40px;
    }
    .tarot-celestial-star {
        font-size: 24px;
    }
    .tarot-card-back-title {
        font-size: 9px;
        margin-top: 4px;
    }
    .card-back-corner {
        font-size: 8px;
    }
}

.tarot-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

.tarot-card-item.flipped .tarot-card-inner {
    transform: rotateY(180deg);
}

.tarot-card-item.is-reversed.flipped .tarot-card-inner {
    transform: rotateY(180deg);
}

.tarot-card-img.is-reversed-img {
    transform: rotate(180deg);
}

.tarot-card-face {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    border-radius: 14px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.85), 0 0 20px rgba(199, 125, 255, 0.3);
    overflow: hidden;
    box-sizing: border-box;
}

/* Authentic Mystical Card Back (White & Gold Celestial Sacred Geometry) */
.tarot-card-back {
    background: radial-gradient(circle at 50% 50%, #1a102f 0%, #0d061a 60%, #05020c 100%);
    border: 3px solid #ffffff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    position: relative;
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 255, 255, 0.25);
    overflow: hidden;
}

.tarot-card-back::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 8px;
    right: 8px;
    bottom: 8px;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.15);
    pointer-events: none;
}

.tarot-card-back::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 14px;
    right: 14px;
    bottom: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: 8px;
    pointer-events: none;
}

.tarot-card-back-frame {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.card-back-corner {
    position: absolute;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
}
.card-back-corner.top-left { top: 18px; left: 18px; }
.card-back-corner.top-right { top: 18px; right: 18px; }
.card-back-corner.bottom-left { bottom: 18px; left: 18px; }
.card-back-corner.bottom-right { bottom: 18px; right: 18px; }

.tarot-card-back-emblem {
    position: relative;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tarot-ring-outer {
    position: absolute;
    width: 86px;
    height: 86px;
    border: 1.5px solid rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
}

.tarot-ring-inner {
    position: absolute;
    width: 68px;
    height: 68px;
    border: 1px dashed rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    animation: rotateSlow 25s linear infinite;
}

@keyframes rotateSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.tarot-celestial-star {
    font-size: 38px;
    color: #ffffff;
    filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.9));
    animation: celestialGlow 3s ease-in-out infinite alternate;
}

@keyframes celestialGlow {
    0% { transform: scale(0.95); opacity: 0.85; filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7)); }
    100% { transform: scale(1.08); opacity: 1; filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)); }
}

.tarot-card-back-title {
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Ornate Traditional Rider-Waite Card Front Frame */
.tarot-card-front {
    background: #0b0617;
    transform: rotateY(180deg);
    border: 3px solid #ffffff;
    border-radius: 14px;
    padding: 6px;
    box-sizing: border-box;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7), 0 0 15px rgba(255, 255, 255, 0.2);
}

.tarot-card-gold-frame {
    width: 100%;
    height: 100%;
    border: 1px solid rgba(255, 215, 0, 0.6);
    border-radius: 8px;
    background: radial-gradient(circle at 50% 30%, #1e113a 0%, #0d061c 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 8px 6px;
    box-sizing: border-box;
    position: relative;
}

.tarot-card-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px;
    background: rgba(15, 8, 30, 0.9);
    border-bottom: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 4px;
}

.tarot-roman {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 13px;
    font-weight: bold;
    color: #ffd700;
}

.tarot-card-front-title {
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.3px;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.6);
}

.tarot-orientation-badge {
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 8px;
}
.tarot-orientation-badge.up {
    background: rgba(76, 201, 240, 0.25);
    color: #4cc9f0;
    border: 1px solid rgba(76, 201, 240, 0.5);
}
.tarot-orientation-badge.rev {
    background: rgba(247, 37, 133, 0.25);
    color: #f72585;
    border: 1px solid rgba(247, 37, 133, 0.5);
}

/* Card Art Image Box */
.tarot-card-art-box {
    width: 100%;
    height: 220px;
    margin: 4px 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid rgba(255, 215, 0, 0.5);
    box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.8);
    position: relative;
    background: #090414;
}

.tarot-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.5s ease;
}

.tarot-card-item:hover .tarot-card-img {
    transform: scale(1.05);
}

.tarot-card-fallback-art {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle, #2a1444 0%, #0d061c 100%);
}
.mystic-gold-seal {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid #ffd700;
    background: radial-gradient(circle, #3d1c63 0%, #17092c 100%);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.45), inset 0 0 15px rgba(255, 215, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
}
.seal-star {
    font-size: 14px;
    color: #ffd700;
}
.seal-roman {
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 22px;
    font-weight: bold;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.8);
}
.fallback-icon {
    font-size: 64px;
    margin-bottom: 8px;
    filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.8));
}
.fallback-name {
    font-size: 13px;
    color: #ffd700;
    font-weight: bold;
}
.fallback-sub {
    font-size: 10px;
    color: rgba(224, 170, 255, 0.7);
    margin-top: 2px;
}

.tarot-card-footer-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 3px 6px;
    background: rgba(15, 8, 30, 0.9);
    border-top: 1px solid rgba(255, 215, 0, 0.4);
    border-radius: 4px;
}

.tarot-pos-badge {
    font-size: 10px;
    font-weight: bold;
    color: #e0aaff;
    background: rgba(199, 125, 255, 0.2);
    padding: 2px 6px;
    border-radius: 6px;
}

.tarot-name-en {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
}

/* 8-Step Reading Report Box */
.tarot-result-wrapper {
    background: rgba(15, 10, 33, 0.85);
    border: 1px solid rgba(199, 125, 255, 0.3);
    border-radius: 20px;
    padding: 30px;
    margin-top: 30px;
    backdrop-filter: blur(15px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

.tarot-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.tarot-result-title {
    font-size: 22px;
    font-weight: 800;
    color: #e0aaff;
}

.tarot-voice-controls {
    display: flex;
    gap: 10px;
}

.btn-voice {
    background: rgba(199, 125, 255, 0.15);
    border: 1px solid rgba(199, 125, 255, 0.4);
    color: #e0aaff;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.btn-voice:hover {
    background: rgba(199, 125, 255, 0.35);
    color: #fff;
}

.tarot-8step-box {
    line-height: 1.8;
    color: #d1c4e9;
    font-size: 15px;
}

.tarot-8step-box h3, .tarot-8step-box strong {
    color: #e0aaff;
}

/* Daily Tarot Lucky Grid */
.tarot-daily-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.tarot-lucky-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(179, 136, 255, 0.15);
    border-radius: 12px;
    padding: 16px;
    text-align: center;
}

.tarot-lucky-label {
    font-size: 12px;
    color: rgba(224, 170, 255, 0.6);
    margin-bottom: 4px;
}

.tarot-lucky-val {
    font-size: 16px;
    font-weight: 700;
    color: #ffd700;
}

/* Service Tab Bar Prominent Styling */
.main-service-tab-bar {
    z-index: 100;
}

.service-tab-btn {
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.service-tab-btn:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.15);
}

.service-tab-btn.active {
    box-shadow: 0 8px 25px rgba(199, 125, 255, 0.6) !important;
}

/* PWA Mobile Optimization for Family Lifestyle Care (Tab 7) */
.family-care-container {
    width: 100% !important;
    max-width: 1000px;
    margin: 0 auto;
    box-sizing: border-box;
}

.family-care-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.spouse-care-section,
.child-care-section {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 768px) {
    .family-care-container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .family-care-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        border-radius: 12px !important;
    }

    .family-care-card .card-body {
        padding: 14px 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 1st Card: 배우자 케어 */
    .spouse-care-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* 2nd Card: 자녀 케어 (1번째 카드 폭의 최대치까지 키움) */
    .child-care-section {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 10px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 15px !important;
        box-sizing: border-box !important;
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 16px;
    }

    /* All Sub-Cards & Cards inside Cards Width Maximization (100% Edge-to-Edge) */
    .card .card,
    .card-body > div,
    .spouse-care-section,
    .child-care-section,
    .spouse-care-section > div,
    .child-care-section > div,
    #spouse-care-content > div,
    #child-care-content > div,
    .family-philosophy-banner,
    .talmud-care-card-box,
    .talmud-box,
    .sub-card,
    .inner-card {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    .family-philosophy-banner {
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px 10px !important;
        box-sizing: border-box !important;
    }

    .talmud-box {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ====================================================
   LIGHT MODE DESIGN OVERHAUL (밝은 모드 고품격 화이트 테마)
   ==================================================== */

/* 1. Category Bar & Wrapper: 옅은 회색(Light Gray) 바탕에 흰색 버튼 */
body.theme-light .sticky-header-wrapper {
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid rgba(168, 85, 247, 0.15) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
}

body.theme-light .tab-navigation-wrapper,
body.theme-light .tab-navigation {
    background: #f1f5f9 !important; /* 짙은 회색 제거 -> 옅은 회색 바탕 */
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 6px !important;
}

body.theme-light .app-header {
    background: transparent !important;
}

body.theme-light .logo-title {
    background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

body.theme-light .logo-title span,
body.theme-light .subtitle {
    color: #475569 !important;
}

body.theme-light #user-profile-box {
    background: rgba(248, 250, 252, 0.9) !important;
    border: 1px solid rgba(168, 85, 247, 0.2) !important;
    color: #0f172a !important;
}

/* 2. Category Tab Navigation Buttons in Light Mode: Pure White, thin line borders */
body.theme-light .tab-navigation .tab-btn,
body.theme-light .service-tab-btn,
body.theme-light .tab-btn {
    background: #ffffff !important;
    border: 1px solid rgba(168, 85, 247, 0.22) !important;
    color: #1e293b !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    font-weight: 600 !important;
}

body.theme-light .tab-navigation .tab-btn i,
body.theme-light .service-tab-btn i,
body.theme-light .tab-btn i {
    color: #7c3aed !important;
}

body.theme-light .tab-navigation .tab-btn:hover,
body.theme-light .service-tab-btn:hover,
body.theme-light .tab-btn:hover {
    background: #ffffff !important;
    border-color: #a855f7 !important;
    color: #6b21a8 !important;
    transform: translateY(-2px) !important;
}

body.theme-light .tab-navigation .tab-btn.active,
body.theme-light .service-tab-btn.active,
body.theme-light .tab-btn.active {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.12), rgba(99, 102, 241, 0.12)) !important;
    border: 1.5px solid #a855f7 !important;
    color: #6b21a8 !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(168, 85, 247, 0.15) !important;
}

/* 3. 모든 분석 리포트 & 만세력 배경색: 회색 -> 100% 흰색(Pure White) + 초슬림 테두리 */
body.theme-light .card,
body.theme-light .fortune-main-card,
body.theme-light .saju-pillar-card,
body.theme-light .saju-grid,
body.theme-light .family-care-card,
body.theme-light .intro-hero-card,
body.theme-light .intro-section-card,
body.theme-light .aspect-card,
body.theme-light .tojeong-header-card,
body.theme-light .tojeong-code-card,
body.theme-light .modal-content,
body.theme-light .parenting-guide-card,
body.theme-light .tarot-result-wrapper,
body.theme-light .analysis-result-card {
    background: #ffffff !important; /* 분석 리포트 및 만세력 회색 배경 -> 흰색 변환 */
    border: 1px solid rgba(168, 85, 247, 0.18) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    color: #0f172a !important;
}

body.theme-light .card-header {
    border-bottom: 1px solid rgba(168, 85, 247, 0.12) !important;
    background: transparent !important;
}

/* 4. 카드 속 카드(서브 카드) 배경: 순백색 및 옅은 슬레이트 틴트 */
body.theme-light .card .card,
body.theme-light .card-body > div,
body.theme-light .spouse-care-section,
body.theme-light .child-care-section,
body.theme-light .spouse-care-section > div,
body.theme-light .child-care-section > div,
body.theme-light #spouse-care-content > div,
body.theme-light #child-care-content > div,
body.theme-light .family-philosophy-banner,
body.theme-light .talmud-care-card-box,
body.theme-light .talmud-box,
body.theme-light .survey-question-box,
body.theme-light .diet-box,
body.theme-light .health-advice-banner,
body.theme-light .tarot-lucky-card,
body.theme-light .sub-card,
body.theme-light .inner-card,
body.theme-light .pillar-box,
body.theme-light div[style*="background: rgba(0,0,0"],
body.theme-light div[style*="background: rgba(255,255,255,0.02"],
body.theme-light div[style*="background: rgba(255,255,255,0.03"] {
    background: #f8fafc !important;
    border: 1px solid rgba(168, 85, 247, 0.15) !important;
    color: #1e293b !important;
}

/* 만세력 한자 기둥 셀 배경: 흰색 */
body.theme-light .pillar-char-box,
body.theme-light .pillar-char {
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #0f172a !important;
}

/* 5. 이탤릭체(기울임꼴) 가독성 긴급 개선: 정체(Normal) + 짙은 선명한 폰트 적용 */
body.theme-light em,
body.theme-light i:not(.fa-solid):not(.fa-regular):not(.fa-brands),
body.theme-light .italic,
body.theme-light font[style*="italic"],
body.theme-light span[style*="italic"],
body.theme-light p[style*="italic"] {
    font-style: normal !important; /* 흐릿한 기울임 제거하여 또렷하게 */
    color: #1e293b !important;
    font-weight: 600 !important;
    opacity: 1 !important;
}

/* 6. Typography & Text Color Overrides in Light Mode (진한 숯색/검정색 폰트) */
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6,
body.theme-light strong,
body.theme-light b,
body.theme-light .card-header h2,
body.theme-light .card-header h3,
body.theme-light .survey-q-title,
body.theme-light .diet-box-title {
    color: #0f172a !important;
}

body.theme-light p,
body.theme-light span,
body.theme-light li,
body.theme-light div,
body.theme-light label,
body.theme-light .section-desc,
body.theme-light .tab-desc,
body.theme-light .aspect-desc,
body.theme-light .markdown-body,
body.theme-light .markdown-body-parenting,
body.theme-light .login-intro,
body.theme-light .opt-text {
    color: #334155 !important;
}

/* Force dark text on inline white text overrides */
body.theme-light *[style*="color: white"],
body.theme-light *[style*="color: #white"],
body.theme-light *[style*="color: #fff"],
body.theme-light *[style*="color: #ffffff"],
body.theme-light *[style*="color: #e4e4e7"],
body.theme-light *[style*="color: #d4d4d8"],
body.theme-light *[style*="color: #e0aaff"],
body.theme-light *[style*="color: #d1c4e9"],
body.theme-light *[style*="color: #a1a1aa"] {
    color: #1e293b !important;
}

body.theme-light *[style*="color: #ffd700"],
body.theme-light *[style*="color: #c084fc"],
body.theme-light *[style*="color: #a855f7"],
body.theme-light *[style*="color: #6366f1"] {
    color: #6b21a8 !important;
}

/* Sub-tab navigation in Light Mode */
body.theme-light .sub-tab-navigation {
    background: #f1f5f9 !important;
    border: 1px solid rgba(168, 85, 247, 0.15) !important;
}

body.theme-light .sub-tab-btn {
    background: transparent !important;
    color: #475569 !important;
}

body.theme-light .sub-tab-btn:hover {
    color: #7c3aed !important;
}

body.theme-light .sub-tab-btn.active {
    background: #ffffff !important;
    color: #6b21a8 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
}

/* Brand Philosophy Card & Quotes in Light Mode: Pure White background + Bold Charcoal Text */
body.theme-light .brand-philosophy-card,
body.theme-light .brand-philosophy-card div,
body.theme-light .philosophy-body,
body.theme-light .philosophy-header {
    background: #ffffff !important;
    border-color: rgba(168, 85, 247, 0.2) !important;
    color: #0f172a !important;
}

body.theme-light .philosophy-item,
body.theme-light .philosophy-ml-info,
body.theme-light .intro-feature-item {
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}

body.theme-light .brand-philosophy-card h3,
body.theme-light .philosophy-header h3 {
    background: none !important;
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: #3b0764 !important;
    color: #3b0764 !important;
    font-weight: 800 !important;
}

body.theme-light .brand-philosophy-card h4,
body.theme-light .brand-philosophy-card h5,
body.theme-light .brand-philosophy-card p,
body.theme-light .brand-philosophy-card span,
body.theme-light .philosophy-quote,
body.theme-light .quote-sub,
body.theme-light .philosophy-text {
    color: #0f172a !important;
    opacity: 1 !important;
}

body.theme-light .philosophy-quote {
    color: #6b21a8 !important;
    font-weight: 700 !important;
}

/* Fix italic quotes like "가장 부드러운 것이 가장 단단한 것을 부드럽게 이긴다. (도덕경)" */
body.theme-light blockquote,
body.theme-light blockquote *,
body.theme-light font,
body.theme-light em,
body.theme-light i:not(.fa-solid):not(.fa-regular):not(.fa-brands),
body.theme-light .quote-text,
body.theme-light p[style*="italic"],
body.theme-light span[style*="italic"],
body.theme-light *[style*="font-style: italic"],
body.theme-light *[style*="font-style:italic"] {
    font-style: normal !important;
    color: #0f172a !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* ALL FORTUNE SUMMARY BOXES, RESULT BOXES, LUCKY PILLS & INNER CONTAINERS IN LIGHT MODE -> PURE WHITE BACKGROUND (#ffffff) WITH DEEP BLACK TEXT (#000000 / #0f172a) */
body.theme-light .fortune-summary-box,
body.theme-light .result-summary-box:not(.facepalm-result-card .result-summary-box),
body.theme-light .ai-summary-box,
body.theme-light .tojeong-summary-box,
body.theme-light .fortune-text-content > div,
body.theme-light .lucky-pill,
body.theme-light .fortune-energy-badge,
body.theme-light .fortune-score-container,
body.theme-light div[class*="summary"]:not(.pulse-summary-card):not(.summary-header):not(.summary-body),
body.theme-light div[class*="result"]:not(.result-summary-box):not(.result-tips-box):not(.result-placeholder-content):not(#facepalm-result-placeholder):not(.facepalm-result-card):not(.facepalm-result-card *) {
    background: #ffffff !important;
    border: 1px solid rgba(168, 85, 247, 0.25) !important;
    border-left: 5px solid #7c3aed !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04) !important;
    color: #0f172a !important;
}

/* AI 관상·손금 리포트 카드 내부는 다크모드와 동일하게 카드 1장에 통일되어 표시되도록 서브 박스 배경/테두리 투명화 */
body.theme-light .facepalm-result-card .card-body,
body.theme-light .facepalm-result-card #facepalm-result-placeholder,
body.theme-light .facepalm-result-card #facepalm-result-content,
body.theme-light .facepalm-result-card .result-summary-box,
body.theme-light .facepalm-result-card .result-tips-box,
body.theme-light .facepalm-result-card .result-bars-group,
body.theme-light .facepalm-result-card div {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    outline: none !important;
}

body.theme-light .facepalm-bar-label {
    color: #334155 !important;
    font-weight: 600 !important;
}

body.theme-light .facepalm-bar-bg {
    background: #e2e8f0 !important;
}

body.theme-light .fortune-summary-box p,
body.theme-light .fortune-summary-box span,
body.theme-light .fortune-summary-box div,
body.theme-light .result-summary-box p,
body.theme-light .result-summary-box h4,
body.theme-light .result-summary-box span,
body.theme-light .lucky-pill span,
body.theme-light .lucky-pill-label,
body.theme-light .lucky-pill-val,
body.theme-light .fortune-bar-title,
body.theme-light .fortune-bar-score,
body.theme-light .fortune-energy-badge {
    color: #0f172a !important;
    opacity: 1 !important;
    font-weight: 600 !important;
}

body.theme-light .fortune-summary-box strong,
body.theme-light .fortune-summary-box b,
body.theme-light .result-summary-box strong,
body.theme-light .result-summary-box b {
    color: #000000 !important;
    font-weight: 800 !important;
}

/* ====================================================
   LIGHT MODE: ALL GRADIENT ELIMINATION (밝은 모드 모든 그라데이션 전면 제거 및 단색화)
   ==================================================== */

/* 1. Remove text gradients from ALL text elements in Light Mode */
body.theme-light *,
body.theme-light h1,
body.theme-light h2,
body.theme-light h3,
body.theme-light h4,
body.theme-light h5,
body.theme-light h6,
body.theme-light span,
body.theme-light p,
body.theme-light a,
body.theme-light .logo-title,
body.theme-light .tarot-hero-title,
body.theme-light .philosophy-header h3,
body.theme-light .card-header h2,
body.theme-light .card-header h3,
body.theme-light .gradient-text {
    background-image: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: initial !important;
    text-shadow: none !important;
}

body.theme-light .logo-title {
    color: #4c1d95 !important;
    font-weight: 800 !important;
}

body.theme-light .tarot-hero-title {
    color: #3b0764 !important;
    font-weight: 800 !important;
}

body.theme-light .philosophy-header h3,
body.theme-light .brand-philosophy-card h3 {
    color: #3b0764 !important;
    font-weight: 800 !important;
}

/* 2. Remove background gradients from ALL cards and containers in Light Mode */
body.theme-light .card,
body.theme-light .intro-hero-card,
body.theme-light .intro-section-card,
body.theme-light .brand-philosophy-card,
body.theme-light .sasang-intro-card,
body.theme-light .fortune-main-card,
body.theme-light .saju-pillar-card,
body.theme-light .tojeong-header-card,
body.theme-light .tojeong-code-card,
body.theme-light .tarot-cosmic-bg,
body.theme-light .tarot-result-wrapper,
body.theme-light .analysis-result-card,
body.theme-light .parenting-guide-card {
    background-image: none !important;
    background: #ffffff !important;
    border: 1px solid rgba(168, 85, 247, 0.2) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
}

/* 3. Remove background gradients from buttons in Light Mode and replace with solid colors */
body.theme-light .btn-analyze-main,
body.theme-light #btn-run-saju-analysis {
    background-image: none !important;
    background-color: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.25) !important;
}

body.theme-light .btn-tarot-start {
    background-image: none !important;
    background-color: #7c3aed !important;
    color: #ffffff !important;
}

body.theme-light .tab-navigation .tab-btn.active,
body.theme-light .service-tab-btn.active,
body.theme-light .tab-btn.active {
    background-image: none !important;
    background-color: #ffffff !important;
    border: 2px solid #a855f7 !important;
    color: #6b21a8 !important;
    font-weight: 700 !important;
}

/* Light Mode High-Contrast Overrides for ALL Active Selector Buttons & Tabs */
body.theme-light .mode-btn.active,
body.theme-light .mode-btn.active *,
body.theme-light .tarot-spread-btn.active,
body.theme-light .tarot-spread-btn.active *,
body.theme-light .concern-tab-btn.active,
body.theme-light .concern-tab-btn.active *,
body.theme-light .sub-tab-btn.active,
body.theme-light .sub-tab-btn.active * {
    background-image: none !important;
    background-color: #f3e8ff !important;
    border: 2px solid #7c3aed !important;
    color: #6b21a8 !important;
    -webkit-text-fill-color: #6b21a8 !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.25) !important;
    font-weight: 800 !important;
    opacity: 1 !important;
}

body.theme-light .mode-btn:not(.active),
body.theme-light .mode-btn:not(.active) *,
body.theme-light .tarot-spread-btn:not(.active),
body.theme-light .tarot-spread-btn:not(.active) *,
body.theme-light .concern-tab-btn:not(.active),
body.theme-light .concern-tab-btn:not(.active) *,
body.theme-light .sub-tab-btn:not(.active),
body.theme-light .sub-tab-btn:not(.active) * {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    background-color: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    opacity: 0.9 !important;
}

/* 4. Remove background gradients from badges and tags in Light Mode */
body.theme-light .badge,
body.theme-light .info-badge,
body.theme-light .philosophy-badge,
body.theme-light .badge-sipsin,
body.theme-light .tarot-tag-chip {
    background-image: none !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #cbd5e1 !important;
    color: #4c1d95 !important;
}

/* High Contrast White Text Override for Purple Buttons */
.btn-analyze-main,
.btn-analyze-main *,
#btn-run-saju-analysis,
#btn-run-saju-analysis *,
#txt-analyze-btn,
body.theme-light .btn-analyze-main,
body.theme-light .btn-analyze-main *,
body.theme-light #btn-run-saju-analysis,
body.theme-light #btn-run-saju-analysis *,
body.theme-light #txt-analyze-btn {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) !important;
}

body.theme-light .btn-analyze-main i.fa-wand-magic-sparkles,
body.theme-light #btn-run-saju-analysis i.fa-wand-magic-sparkles {
    color: #ffd700 !important;
    -webkit-text-fill-color: #ffd700 !important;
}

/* ====================================================
   Real-Time AI Market Pulse Card Styles
   ==================================================== */
.market-pulse-card {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.75), rgba(15, 23, 42, 0.95)) !important;
    border: 1px solid rgba(99, 102, 241, 0.3) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.35), 0 0 20px rgba(99, 102, 241, 0.15) !important;
    margin-bottom: 24px;
}

.pulse-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: 16px;
}

.pulse-header-title {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    flex: 1;
    min-width: 280px;
}

.pulse-icon-glow {
    background: rgba(99, 102, 241, 0.2) !important;
    color: #818cf8 !important;
    border: 1px solid rgba(99, 102, 241, 0.4) !important;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.4);
}

.pulse-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.pulse-title-row h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #f8fafc;
    margin: 0;
}

.pulse-header-sub {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 4px;
    line-height: 1.45;
}

.pulse-sentiment-badge {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.5px;
}

.badge-buy, .badge-bull {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.4) !important;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.2);
}

.badge-neutral {
    background: rgba(245, 158, 11, 0.18) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.4) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.2);
}

.badge-caution, .badge-sell {
    background: rgba(244, 63, 94, 0.18) !important;
    color: #f87171 !important;
    border: 1px solid rgba(244, 63, 94, 0.4) !important;
    box-shadow: 0 0 10px rgba(244, 63, 94, 0.2);
}

.pulse-action-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pulse-timestamp-text {
    font-size: 0.75rem;
    color: #64748b;
    font-family: monospace;
}

.pulse-refresh-btn {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pulse-refresh-btn:hover {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
    border-color: rgba(99, 102, 241, 0.4);
    transform: rotate(45deg);
}

/* Loading state */
.pulse-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 20px;
    text-align: center;
    gap: 16px;
}

.pulse-spinner-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pulse-brain-icon {
    font-size: 24px;
    color: #818cf8;
    animation: brainPulse 2s ease-in-out infinite;
}

.pulse-ring {
    position: absolute;
    width: 54px;
    height: 54px;
    border: 3px solid transparent;
    border-top-color: #818cf8;
    border-right-color: #c084fc;
    border-radius: 50%;
    animation: pulseSpin 1.2s linear infinite;
}

@keyframes pulseSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes brainPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; filter: drop-shadow(0 0 8px #818cf8); }
}

.pulse-loading-text-group h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #e2e8f0;
    margin-bottom: 6px;
}

.pulse-loading-text-group p {
    font-size: 0.8rem;
    color: #94a3b8;
    max-width: 450px;
}

/* Content layout */
.pulse-content-box {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 14px;
}

.pulse-indices-container {
    overflow-x: auto;
    padding-bottom: 4px;
}

.pulse-indices-row {
    display: flex;
    gap: 10px;
    min-width: max-content;
}

.pulse-index-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 120px;
}

.pulse-index-name {
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 600;
}

.pulse-index-val {
    font-size: 0.88rem;
    font-weight: 700;
    color: #f1f5f9;
    font-family: monospace;
}

.pulse-index-change {
    font-size: 0.72rem;
    font-weight: 600;
}

.pulse-index-change.up { color: #34d399; }
.pulse-index-change.down { color: #f87171; }
.pulse-index-change.stable { color: #94a3b8; }

.pulse-summary-card {
    background: transparent !important;
    border: none !important;
    border-left: 5px solid #818cf8 !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0px 12px 12px 0px !important;
    padding: 12px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease;
}

.summary-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #e9d5ff !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

.summary-header i {
    font-size: 1.15rem !important;
    color: #818cf8 !important;
}

.summary-body {
    font-size: 0.98rem !important;
    color: #e2e8f0 !important;
    line-height: 1.85 !important;
    white-space: pre-line !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    letter-spacing: -0.1px !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Light Theme Overrides - Exact 1:1 Copy of Dark Mode Layout with Light Color Palette */
body.theme-light .pulse-summary-card {
    background: transparent !important;
    border: none !important;
    border-left: 5px solid #6366f1 !important;
    box-shadow: none !important;
    outline: none !important;
    border-radius: 0px 12px 12px 0px !important;
    padding: 12px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease;
}

body.theme-light .summary-header {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #312e81 !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

body.theme-light .summary-header i {
    font-size: 1.15rem !important;
    color: #4f46e5 !important;
}

body.theme-light .summary-body {
    font-size: 0.98rem !important;
    color: #0f172a !important;
    line-height: 1.85 !important;
    white-space: pre-line !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    letter-spacing: -0.1px !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.pulse-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

@media (max-width: 768px) {
    .pulse-grid-row {
        grid-template-columns: 1fr;
    }
}

.pulse-info-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-box-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2e8f0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-box-title i {
    color: #818cf8;
}

.info-box-desc {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.6;
    margin: 0;
}

.pulse-bullet-list {
    margin: 0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pulse-bullet-list li {
    font-size: 0.82rem;
    color: #cbd5e1;
    line-height: 1.5;
}

.pulse-bullet-list.warning-list li {
    color: #fda4af;
}

.macro-phase-content {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.macro-phase-badge {
    align-self: flex-start;
    background: rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
    border: 1px solid rgba(168, 85, 247, 0.4);
    font-size: 0.78rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.macro-phase-desc {
    font-size: 0.8rem;
    color: #94a3b8;
    margin: 0;
}

.pulse-keywords-box {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    background: rgba(99, 102, 241, 0.05);
    border: 1px dashed rgba(99, 102, 241, 0.2);
    padding: 12px 16px;
    border-radius: 10px;
}

.keywords-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: #a5b4fc;
    display: flex;
    align-items: center;
    gap: 6px;
}

.keywords-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.keyword-chip {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #c7d2fe;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 14px;
    transition: all 0.2s ease;
}

.keyword-chip:hover {
    background: rgba(99, 102, 241, 0.3);
    transform: translateY(-1px);
}

/* ====================================================
   Mobile Screen Fit Patch (Today's Fortune, Market Pulse, Outfit & Weather Cards)
   ==================================================== */
@media (max-width: 576px) {
    /* 1. Global Card Padding & Width Constraints */
    .card {
        padding: 16px 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Model Card Mobile Fit Override (Prevents AI career badge top clipping) */
    .card.model-card {
        padding-top: 42px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: 16px !important;
        overflow: visible !important;
    }

    .model-badge {
        top: 12px !important;
        left: 12px !important;
    }

    /* 2. Today's Fortune Card (.fortune-main-card) Mobile Layout */
    .fortune-main-card .card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .fortune-main-card .header-text-group h2 {
        font-size: 1.05rem !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
    }

    #btn-fortune-tts {
        width: 100% !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    .fortune-energy-badge {
        font-size: 0.8rem !important;
        word-break: keep-all !important;
        flex-wrap: wrap !important;
    }

    /* 3. Real-time AI Market Pulse Card (.market-pulse-card) Mobile Layout */
    .market-pulse-card {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .pulse-card-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    .pulse-header-title {
        min-width: 0 !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .pulse-title-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 6px !important;
    }

    .pulse-title-row h2 {
        font-size: 1.05rem !important;
        word-break: keep-all !important;
        overflow-wrap: break-word !important;
        line-height: 1.35 !important;
    }

    .pulse-header-sub {
        font-size: 0.76rem !important;
        word-break: keep-all !important;
    }

    .pulse-action-group {
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        border-top: 1px dashed rgba(255, 255, 255, 0.08) !important;
        padding-top: 8px !important;
    }

    .pulse-grid-row {
        grid-template-columns: 1fr !important;
    }

    .pulse-summary-card {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 18px 16px !important;
        border-left-width: 5px !important;
    }

    .summary-header {
        font-size: 0.98rem !important;
        margin-bottom: 12px !important;
        padding-bottom: 8px !important;
        gap: 8px !important;
    }

    .summary-body {
        font-size: 0.94rem !important;
        line-height: 1.8 !important;
        word-break: keep-all !important;
    }

    /* 4. Today's Outfit & Weather Card Mobile Layout */
    .weather-row {
        padding: 10px 12px !important;
        gap: 8px !important;
        box-sizing: border-box !important;
    }

    .weather-info {
        gap: 8px !important;
    }

    .weather-icon-wrapper {
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
    }

    .weather-status {
        font-size: 13px !important;
    }

    .weather-temp {
        font-size: 11px !important;
    }

    .lucky-color-info {
        align-items: flex-end !important;
    }

    .lucky-color-badge {
        padding: 2px 8px !important;
        font-size: 10.5px !important;
    }

    .ootd-item {
        padding: 8px 10px !important;
        box-sizing: border-box !important;
    }

    .ootd-item .item-val {
        font-size: 12px !important;
        word-break: keep-all !important;
    }
}

/* ====================================================
   PDF Download & Print Single-Row Layout Stylesheet
   ==================================================== */
@media print {
    /* Hide unneeded site controls */
    header, nav, footer, .app-footer, .header-container, .tarot-voice-controls, .btn-voice, .saju-input-section, .intro-section-card, .dashboard-grid > *:not(#tab-tarot), .tarot-input-box, .tarot-tag-container, .tarot-spread-selector, .btn-tarot-start, .tarot-stage-modal, #btn-fortune-tts {
        display: none !important;
    }

    body, html {
        background: #ffffff !important;
        color: #1e293b !important;
        margin: 0 !important;
        padding: 0 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    #tab-tarot, #tarot-result-wrapper {
        display: block !important;
        background: #ffffff !important;
        color: #0f172a !important;
        padding: 10px !important;
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        width: 100% !important;
    }

    .tarot-result-header {
        border-bottom: 2px solid #6366f1 !important;
        padding-bottom: 12px !important;
        margin-bottom: 20px !important;
    }

    .tarot-result-title {
        color: #312e81 !important;
        font-size: 1.4rem !important;
    }

    /* Single row compact card layout for PDF */
    #tarot-drawn-display {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 12px !important;
        width: 100% !important;
        margin: 15px 0 25px 0 !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
    }

    #tarot-drawn-display .tarot-card-item {
        width: 130px !important;
        height: 215px !important;
        max-width: 130px !important;
        flex: 0 0 130px !important;
        margin: 0 !important;
        transform: none !important;
        page-break-inside: avoid !important;
        break-inside: avoid !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    }

    #tarot-drawn-display .tarot-card-inner {
        transform: rotateY(180deg) !important;
    }

    #tarot-drawn-display .tarot-card-front {
        padding: 3px !important;
        border: 2px solid #6366f1 !important;
        background: #ffffff !important;
    }

    #tarot-drawn-display .tarot-card-gold-frame {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        padding: 4px !important;
    }

    #tarot-drawn-display .tarot-card-header-bar {
        background: #e0e7ff !important;
        border-bottom: 1px solid #c7d2fe !important;
        padding: 2px 4px !important;
    }

    #tarot-drawn-display .tarot-roman,
    #tarot-drawn-display .tarot-card-front-title {
        color: #1e1b4b !important;
        font-size: 10px !important;
    }

    #tarot-drawn-display .tarot-card-art-box {
        height: 140px !important;
        margin: 3px 0 !important;
        border: 1px solid #cbd5e1 !important;
        background: #ffffff !important;
    }

    #tarot-drawn-display .tarot-card-footer-bar {
        background: #f1f5f9 !important;
        padding: 2px 4px !important;
        font-size: 9px !important;
        color: #475569 !important;
    }

    .tarot-8step-box {
        background: #f8fafc !important;
        border: 1px solid #cbd5e1 !important;
        color: #1e293b !important;
        padding: 20px !important;
        box-shadow: none !important;
        border-radius: 12px !important;
    }

    .tarot-8step-box h3, .tarot-8step-box h4 {
        color: #312e81 !important;
    }
}

/* ====================================================
   Markdown Table & Divider Styles (Dark & Light Mode)
   ==================================================== */
.markdown-table-wrapper {
    overflow-x: auto;
    margin: 20px 0;
    border-radius: 12px;
    border: 1px solid rgba(168, 85, 247, 0.2);
    background: rgba(15, 23, 42, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body.theme-light .markdown-table-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(168, 85, 247, 0.25) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
}

.markdown-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
    font-size: 0.92rem;
    min-width: 450px;
}

.markdown-table th {
    padding: 12px 16px;
    font-weight: 700;
    color: #c084fc;
    background: linear-gradient(90deg, rgba(168, 85, 247, 0.15), rgba(99, 102, 241, 0.15));
    border-bottom: 2px solid rgba(168, 85, 247, 0.3);
    font-size: 0.88rem;
}

body.theme-light .markdown-table th {
    color: #6b21a8 !important;
    background: #f3e8ff !important;
    border-bottom: 2px solid #c084fc !important;
}

.markdown-table td {
    padding: 10px 16px;
    color: #e4e4e7;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    line-height: 1.6;
}

body.theme-light .markdown-table td {
    color: #1e293b !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.markdown-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

body.theme-light .markdown-table tr:hover {
    background: #f8fafc !important;
}

.markdown-hr {
    border: none !important;
    border-top: 1px solid rgba(168, 85, 247, 0.25) !important;
    margin: 24px 0 !important;
}

body.theme-light .markdown-hr {
    border-top: 1px solid rgba(124, 58, 237, 0.3) !important;
}

/* ====================================================
   Light Mode High-Contrast Overrides for Select & Option Elements
   ==================================================== */
body.theme-dark select option,
select option {
    background-color: #1e1b2e !important;
    color: #ffffff !important;
}

body.theme-light select,
body.theme-light select#gh-relation-type,
body.theme-light .input-wrapper select {
    background-color: #ffffff !important;
    color: #151326 !important;
    border-color: rgba(124, 58, 237, 0.35) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.theme-light select option,
body.theme-light select#gh-relation-type option,
body.theme-light .input-wrapper select option {
    background-color: #ffffff !important;
    color: #151326 !important;
}

body.theme-light .gh-relation-label,
body.theme-light label[for="gh-relation-type"] {
    color: #4c1d95 !important;
    font-weight: 700 !important;
}

body.theme-light .fusion-gunghap-card label {
    color: #3b0764 !important;
    font-weight: 700 !important;
}

/* Typing / Streaming Cursor & Fade Animation */
.typing-streaming-active {
    position: relative;
    border-right: 2px solid var(--accent, #9d4edd);
    animation: typing-cursor-blink 0.7s infinite;
}

@keyframes typing-cursor-blink {
    0%, 100% { border-color: transparent; }
    50% { border-color: var(--accent, #9d4edd); }
}