/* ===== Design Tokens ===== */
    :root {
      /* Primitive: Neutral Scale (Dark Theme - Warm Gray) */
      --neutral-900: #0d0c0a;
      --neutral-800: #141210;
      --neutral-700: #1c1a18;
      --neutral-600: #242220;
      --neutral-500: #2c2a28;
      --neutral-400: #3d3b38;
      --neutral-300: #5a5754;
      --neutral-200: #8a8784;  /* WCAG AAA 준수 (7:1+) */
      --neutral-100: #a8a5a2;
      --neutral-50: #c8c5c2;
      --neutral-0: #f5f4f2;

      /* Primitive: Brand/Primary (Gold - Muted) */
      --brand-900: #7a6318;
      --brand-700: #a68520;
      --brand-600: #c9a227;
      --brand-500: #c9a227;
      --brand-400: #d4af37;
      --brand-300: #e0c050;
      --brand-200: #f0d880;
      --brand-100: #f8ecb0;

      /* Primitive: Secondary (Sky Blue - 지지용) */
      --secondary-500: #87ceeb;
      --secondary-400: #a0d8ef;
      --secondary-300: #b8e2f5;

      /* Primitive: Semantic Colors */
      --success-500: #4caf50;
      --success-400: #7dce82;  /* WCAG AAA 준수 */
      --success-300: #8bc34a;
      --success-900: #2e7d32;
      --warning-500: #ff9800;
      --warning-400: #ffc107;
      --warning-900: #e65100;
      --error-500: #ef4444;
      --error-400: #ff8080;  /* WCAG AAA 준수 */
      --error-600: #ff5722;
      --error-900: #c62828;
      --info-500: #3b82f6;
      --info-400: #4dabf7;
      --info-900: #1565c0;

      /* Primitive: Metal (for 오행) */
      --metal-500: #9e9e9e;
      --metal-900: #616161;

      /* Primitive: Border Colors */
      --brand-border: rgba(212, 175, 55, 0.2);
      --brand-border-subtle: rgba(212, 175, 55, 0.15);

      /* Semantic: Surfaces */
      --bg: var(--neutral-700);
      --bg-gradient: var(--neutral-700);  /* 그래디언트 제거, 단색 */
      --surface: var(--neutral-800);
      --surface-elevated: var(--neutral-500);
      --surface-hover: rgba(255, 255, 255, 0.05);
      --surface-active: rgba(255, 255, 255, 0.1);
      --surface-card: rgba(0, 0, 0, 0.2);
      --surface-card-elevated: rgba(0, 0, 0, 0.3);

      /* Semantic: Text */
      --text-primary: var(--neutral-0);
      --text-secondary: var(--neutral-50);
      --text-muted: var(--neutral-200);
      --text-disabled: var(--neutral-300);

      /* Semantic: Borders */
      --border-default: var(--neutral-400);
      --border-subtle: rgba(255, 255, 255, 0.1);
      --border-focus: var(--brand-500);
      --border-card: var(--brand-border);

      /* Semantic: Interactive */
      --primary: var(--brand-500);
      --primary-hover: var(--brand-400);
      --primary-active: var(--brand-700);
      --primary-bg: rgba(201, 162, 39, 0.12);
      --primary-bg-hover: rgba(201, 162, 39, 0.2);
      --primary-bg-strong: rgba(201, 162, 39, 0.25);

      /* Semantic: Secondary (for 지지) */
      --secondary: var(--secondary-500);

      /* Semantic: Feedback */
      --success: var(--success-500);
      --success-light: var(--success-300);
      --warning: var(--warning-500);
      --warning-light: var(--warning-400);
      --error: var(--error-400);
      --info: var(--info-500);
      --info-light: var(--info-400);

      /* Semantic: Fortune Scores */
      --score-best: var(--success-500);
      --score-good: var(--success-400);
      --score-normal: var(--neutral-200);
      --score-bad: var(--error-400);

      /* Fortune Level Colors (상/중상/중/중하/하) */
      --fortune-best: #4caf50;      /* 상 */
      --fortune-good: #8bc34a;      /* 중상 */
      --fortune-normal: #ffc107;    /* 중 */
      --fortune-caution: #ff9800;   /* 중하 */
      --fortune-worst: #f44336;     /* 하 */
      /* Fortune Level Backgrounds (13% opacity) */
      --fortune-best-bg: rgba(76, 175, 80, 0.13);
      --fortune-good-bg: rgba(139, 195, 74, 0.13);
      --fortune-normal-bg: rgba(255, 193, 7, 0.13);
      --fortune-caution-bg: rgba(255, 152, 0, 0.13);
      --fortune-worst-bg: rgba(244, 67, 54, 0.13);

      /* Spacing (4px/8px grid system - Material Design 3 기준) */
      /* Base unit: 4px, Primary unit: 8px */
      --space-0: 0px;
      --space-1: 1px;      /* border용 */
      --space-2: 2px;      /* border용 */
      --space-xs: 4px;     /* 0.5x */
      --space-sm: 8px;     /* 1x - 기본 단위 */
      --space-md: 12px;    /* 1.5x */
      --space-lg: 16px;    /* 2x */
      --space-xl: 20px;    /* 2.5x */
      --space-2xl: 24px;   /* 3x */
      --space-3xl: 32px;   /* 4x */
      --space-36: 36px;    /* 4.5x - 아이콘 버튼용 */
      --space-4xl: 40px;   /* 5x */
      --space-44: 44px;    /* Touch target 최소 크기 */
      --space-5xl: 48px;   /* 6x */
      --space-56: 56px;    /* 7x */
      --space-6xl: 64px;   /* 8x */
      --space-72: 72px;    /* 9x */
      --space-7xl: 80px;   /* 10x */
      --space-88: 88px;    /* 11x */
      --space-8xl: 96px;   /* 12x */
      --space-9xl: 120px;  /* 15x */
      --space-128: 128px;  /* 16x */
      --space-10xl: 160px; /* 20x */
      --space-200: 200px;  /* 25x */
      --space-240: 240px;  /* 30x */
      --space-320: 320px;  /* 40x */
      --space-400: 400px;  /* 50x */
      --space-480: 480px;  /* 60x */
      --space-560: 560px;  /* 70x */
      --space-640: 640px;  /* 80x */
      --space-720: 720px;  /* 90x */
      --space-800: 800px;  /* 100x */
      --space-960: 960px;  /* 120x */
      --space-1200: 1200px; /* 150x - max-width */

      /* 레거시 호환용 (점진적 마이그레이션) */
      --space-3: 3px;
      --space-4: 4px;
      --space-5: 4px;
      --space-6: 8px;
      --space-10: 8px;
      --space-14: 12px;
      --space-15: 16px;
      --space-25: 24px;
      --space-30: 32px;
      --space-45: 48px;
      --space-50: 48px;
      --space-55: 56px;
      --space-60: 64px;
      --space-65: 64px;
      --space-70: 72px;
      --space-75: 72px;
      --space-80: 80px;
      --space-90: 88px;
      --space-100: 96px;
      --space-120: 120px;
      --space-130: 128px;
      --space-140: 144px;
      --space-150: 160px;
      --space-160: 160px;
      --space-180: 176px;
      --space-450: 480px;
      --space-500: 480px;
      --space-700: 720px;
      --space-750: 720px;
      --space-850: 800px;

      /* ===== Typography Scale (Material Design 3 기반) ===== */

      /* Font Weights */
      --font-weight-light: 300;
      --font-weight-regular: 400;
      --font-weight-medium: 500;
      --font-weight-semibold: 600;
      --font-weight-bold: 700;

      /* Line Heights */
      --line-height-tight: 1.2;    /* 제목용 */
      --line-height-snug: 1.35;    /* 짧은 텍스트 */
      --line-height-normal: 1.5;   /* 본문용 */
      --line-height-relaxed: 1.625; /* 긴 텍스트 */
      --line-height-loose: 2;      /* 여유로운 텍스트 */

      /* Letter Spacing */
      --tracking-tighter: -0.05em;
      --tracking-tight: -0.025em;
      --tracking-normal: 0;
      --tracking-wide: 0.025em;
      --tracking-wider: 0.05em;
      --tracking-widest: 0.1em;

      /* Font Sizes - Raw Scale */
      --font-2xs: 0.65rem;   /* 10.4px */
      --font-xs: 0.7rem;     /* 11.2px */
      --font-sm: 0.75rem;    /* 12px */
      --font-md: 0.8rem;     /* 12.8px */
      --font-base: 0.85rem;  /* 13.6px */
      --font-lg: 0.9rem;     /* 14.4px */
      --font-xl: 0.95rem;    /* 15.2px */
      --font-2xl: 1rem;      /* 16px */
      --font-3xl: 1.1rem;    /* 17.6px */
      --font-4xl: 1.2rem;    /* 19.2px */
      --font-5xl: 1.3rem;    /* 20.8px */
      --font-5xl-half: 1.4rem; /* 22.4px */
      --font-6xl: 1.5rem;    /* 24px */
      --font-7xl: 1.6rem;    /* 25.6px */
      --font-8xl: 1.7rem;    /* 27.2px */
      --font-9xl: 1.8rem;    /* 28.8px */
      --font-10xl: 2rem;     /* 32px */
      --font-hero: 2.5rem;   /* 40px */
      --font-display: 4rem;  /* 64px */

      /* Typography Roles (Material Design 3 Type Scale) */
      /* Display - 큰 제목, 히어로 섹션 */
      --type-display-large: var(--font-hero);
      --type-display-medium: var(--font-10xl);
      --type-display-small: var(--font-8xl);

      /* Headline - 섹션 제목 */
      --type-headline-large: var(--font-6xl);
      --type-headline-medium: var(--font-5xl);
      --type-headline-small: var(--font-4xl);

      /* Title - 컴포넌트 제목, 카드 제목 */
      --type-title-large: var(--font-3xl);
      --type-title-medium: var(--font-2xl);
      --type-title-small: var(--font-lg);

      /* Body - 본문 텍스트 */
      --type-body-large: var(--font-lg);
      --type-body-medium: var(--font-base);
      --type-body-small: var(--font-sm);

      /* Label - 버튼, 탭, 라벨 */
      --type-label-large: var(--font-md);
      --type-label-medium: var(--font-sm);
      --type-label-small: var(--font-xs);

      /* Border Radius */
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 15px;
      --radius-xl: 20px;
      --radius-full: 9999px;

      /* Transitions */
      --transition-fast: 0.15s ease;
      --transition-normal: 0.3s ease;

      /* Shadows - Minimal */
      --shadow-glow: none;
      --shadow-glow-strong: 0 0 8px rgba(201, 162, 39, 0.15);
      --shadow-btn: none;

      /* Gradients - Simplified */
      --gradient-primary: var(--brand-500);
      --gradient-primary-btn: var(--brand-500);
      --gradient-primary-bg: rgba(201, 162, 39, 0.08);

      /* Scrollbar/Selection Colors */
      --scrollbar-track: rgba(255, 255, 255, 0.03);
      --scrollbar-thumb: rgba(201, 162, 39, 0.25);
      --scrollbar-thumb-hover: rgba(201, 162, 39, 0.4);
      --selection-bg: rgba(201, 162, 39, 0.25);

      /* Semantic: State Backgrounds (Success/Error/Warning) */
      --success-bg: rgba(76, 175, 80, 0.1);
      --success-bg-strong: rgba(76, 175, 80, 0.2);
      --success-bg-subtle: rgba(76, 175, 80, 0.05);
      --success-border: rgba(76, 175, 80, 0.5);
      --error-bg: rgba(255, 107, 107, 0.1);
      --error-bg-strong: rgba(244, 67, 54, 0.2);
      --error-border: rgba(244, 67, 54, 0.5);
      --warning-bg: rgba(255, 152, 0, 0.1);
      --warning-bg-strong: rgba(255, 152, 0, 0.2);
      --health-bg: rgba(34, 197, 94, 0.08);

      /* Semantic: Element Backgrounds (오행) */
      --wood-bg: rgba(76, 175, 80, 0.2);
      --fire-bg: rgba(244, 67, 54, 0.2);
      --earth-bg: rgba(255, 152, 0, 0.2);
      --metal-bg: rgba(158, 158, 158, 0.2);
      --water-bg: rgba(33, 150, 243, 0.2);

      /* Semantic: Score Badge Backgrounds */
      --score-good-bg: rgba(139, 195, 74, 0.2);
      --score-normal-bg: rgba(255, 193, 7, 0.2);

      /* Semantic: Overlay/Modal */
      --overlay-bg: rgba(0, 0, 0, 0.8);
      --surface-glass: rgba(28, 26, 24, 0.98);
      --surface-glass-dark: rgba(36, 34, 32, 0.9);

      /* ===== Component Tokens ===== */
      /* Button */
      --btn-primary-bg: var(--gradient-primary-btn);
      --btn-primary-text: var(--neutral-700);
      --btn-primary-hover-shadow: var(--shadow-btn);
      --btn-secondary-bg: var(--border-default);
      --btn-secondary-text: var(--text-primary);
      --btn-disabled-bg: var(--neutral-400);
      --btn-disabled-text: var(--neutral-300);

      /* Card */
      --card-bg: var(--surface-card);
      --card-bg-elevated: var(--surface-card-elevated);
      --card-border: var(--border-card);
      --card-radius: var(--radius-md);

      /* Tab */
      --tab-bg: transparent;
      --tab-bg-active: var(--primary-bg);
      --tab-text: var(--text-muted);
      --tab-text-active: var(--primary);
      --tab-border-active: var(--primary);

      /* Input/Form */
      --input-bg: var(--neutral-500);
      --input-border: var(--border-default);
      --input-border-focus: var(--primary);
      --input-text: var(--text-primary);
      --input-placeholder: var(--text-muted);

      /* Modal */
      --modal-overlay: var(--overlay-bg);
      --modal-bg: var(--surface-glass);
      --modal-border: var(--border-card);

      /* Desktop Surfaces - unified with mobile */
      --desktop-card-bg: var(--surface-card);
      --desktop-card-bg-strong: var(--surface-card-elevated);
      --desktop-border: var(--border-card);
      --desktop-border-subtle: var(--brand-border-subtle);
      --desktop-hover-bg: var(--primary-bg);
    }

    /* ===== Light Theme ===== */
    [data-theme="light"] {
      /* Primitive: Neutral Scale (Light Theme - inverted) */
      --neutral-900: #ffffff;
      --neutral-800: #f8f9fa;
      --neutral-700: #f1f3f5;
      --neutral-600: #e9ecef;
      --neutral-500: #dee2e6;
      --neutral-400: #ced4da;
      --neutral-300: #adb5bd;
      --neutral-200: #6c757d;  /* WCAG AAA 준수 */
      --neutral-100: #495057;
      --neutral-50: #343a40;
      --neutral-0: #212529;

      /* Primitive: Brand (Light에서 더 진하게) */
      --brand-500: #b8942a;
      --brand-400: #d4af37;
      --brand-300: #e0c050;
      --brand-border: rgba(184, 148, 42, 0.25);
      --brand-border-subtle: rgba(184, 148, 42, 0.15);

      /* Semantic: Surfaces (Light) */
      --bg: var(--neutral-700);
      --bg-gradient: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-600) 100%);
      --surface: var(--neutral-800);
      --surface-elevated: var(--neutral-500);
      --surface-hover: rgba(0, 0, 0, 0.03);
      --surface-active: rgba(0, 0, 0, 0.06);
      --surface-card: rgba(255, 255, 255, 0.7);
      --surface-card-elevated: rgba(255, 255, 255, 0.85);

      /* Semantic: Text (Light) */
      --text-primary: var(--neutral-0);
      --text-secondary: var(--neutral-50);
      --text-muted: var(--neutral-200);
      --text-disabled: var(--neutral-300);

      /* Semantic: Borders (Light) */
      --border-default: var(--neutral-400);
      --border-subtle: rgba(0, 0, 0, 0.08);
      --border-card: var(--brand-border);

      /* Semantic: Interactive (Light - slightly darker for contrast) */
      --primary: var(--brand-500);
      --primary-hover: var(--brand-400);
      --primary-active: var(--brand-700);
      --primary-bg: rgba(184, 148, 42, 0.12);
      --primary-bg-hover: rgba(184, 148, 42, 0.2);
      --primary-bg-strong: rgba(184, 148, 42, 0.25);

      /* Semantic: Feedback (Light - darker for contrast) */
      --success: var(--success-900);
      --success-light: var(--success-500);
      --error: var(--error-500);

      /* Shadows (Light - softer) */
      --shadow-glow: 0 2px 8px rgba(0, 0, 0, 0.08);
      --shadow-glow-strong: 0 4px 12px rgba(0, 0, 0, 0.12);
      --shadow-btn: 0 4px 12px rgba(184, 148, 42, 0.2);

      /* Gradients (Light) */
      --gradient-primary-bg: linear-gradient(135deg, rgba(184, 148, 42, 0.1), rgba(255, 140, 0, 0.08));

      /* Scrollbar (Light) */
      --scrollbar-track: rgba(0, 0, 0, 0.03);
      --scrollbar-thumb: rgba(184, 148, 42, 0.3);
      --scrollbar-thumb-hover: rgba(184, 148, 42, 0.5);
      --selection-bg: rgba(184, 148, 42, 0.2);

      /* Semantic: State Backgrounds (Light) */
      --success-bg: rgba(46, 125, 50, 0.08);
      --success-bg-strong: rgba(46, 125, 50, 0.15);
      --error-bg: rgba(198, 40, 40, 0.08);
      --error-bg-strong: rgba(198, 40, 40, 0.15);
      --warning-bg: rgba(230, 81, 0, 0.1);
      --warning-bg-strong: rgba(230, 81, 0, 0.18);
      --health-bg: rgba(34, 197, 94, 0.08);

      /* Semantic: Element Backgrounds (Light - softer) */
      --wood-bg: rgba(46, 125, 50, 0.12);
      --fire-bg: rgba(198, 40, 40, 0.12);
      --earth-bg: rgba(230, 81, 0, 0.12);
      --metal-bg: rgba(97, 97, 97, 0.12);
      --water-bg: rgba(21, 101, 192, 0.12);

      /* Overlay/Modal (Light) */
      --overlay-bg: rgba(0, 0, 0, 0.5);
      --surface-glass: rgba(255, 255, 255, 0.95);
      --surface-glass-dark: rgba(248, 249, 250, 0.9);

      /* Component: Button (Light) */
      --btn-primary-text: var(--neutral-900);
    }

    /* System preference: auto dark/light */
    @media (prefers-color-scheme: light) {
      :root:not([data-theme="dark"]) {
        /* Same as [data-theme="light"] */
        --neutral-900: #ffffff;
        --neutral-800: #f8f9fa;
        --neutral-700: #f1f3f5;
        --neutral-600: #e9ecef;
        --neutral-500: #dee2e6;
        --neutral-400: #ced4da;
        --neutral-300: #adb5bd;
        --neutral-200: #6c757d;
        --neutral-100: #495057;
        --neutral-50: #343a40;
        --neutral-0: #212529;

        --brand-500: #b8942a;
        --brand-400: #d4af37;
        --brand-300: #e0c050;
        --brand-border: rgba(184, 148, 42, 0.25);
        --brand-border-subtle: rgba(184, 148, 42, 0.15);

        --bg: var(--neutral-700);
        --bg-gradient: linear-gradient(135deg, var(--neutral-700) 0%, var(--neutral-600) 100%);
        --surface: var(--neutral-800);
        --surface-elevated: var(--neutral-500);
        --surface-hover: rgba(0, 0, 0, 0.03);
        --surface-active: rgba(0, 0, 0, 0.06);
        --surface-card: rgba(255, 255, 255, 0.7);
        --surface-card-elevated: rgba(255, 255, 255, 0.85);

        --text-primary: var(--neutral-0);
        --text-secondary: var(--neutral-50);
        --text-muted: var(--neutral-200);
        --text-disabled: var(--neutral-300);

        --border-default: var(--neutral-400);
        --border-subtle: rgba(0, 0, 0, 0.08);
        --border-card: var(--brand-border);

        --primary: var(--brand-500);
        --primary-hover: var(--brand-400);
        --primary-active: var(--brand-700);
        --primary-bg: rgba(184, 148, 42, 0.12);
        --primary-bg-hover: rgba(184, 148, 42, 0.2);
        --primary-bg-strong: rgba(184, 148, 42, 0.25);

        --success: var(--success-900);
        --success-light: var(--success-500);
        --error: var(--error-500);

        --shadow-glow: 0 2px 8px rgba(0, 0, 0, 0.08);
        --shadow-glow-strong: 0 4px 12px rgba(0, 0, 0, 0.12);
        --shadow-btn: 0 4px 12px rgba(184, 148, 42, 0.2);

        --gradient-primary-bg: linear-gradient(135deg, rgba(184, 148, 42, 0.1), rgba(255, 140, 0, 0.08));

        --scrollbar-track: rgba(0, 0, 0, 0.03);
        --scrollbar-thumb: rgba(184, 148, 42, 0.3);
        --scrollbar-thumb-hover: rgba(184, 148, 42, 0.5);
        --selection-bg: rgba(184, 148, 42, 0.2);

        --success-bg: rgba(46, 125, 50, 0.08);
        --success-bg-strong: rgba(46, 125, 50, 0.15);
        --error-bg: rgba(198, 40, 40, 0.08);
        --error-bg-strong: rgba(198, 40, 40, 0.15);
        --warning-bg: rgba(230, 81, 0, 0.1);
        --warning-bg-strong: rgba(230, 81, 0, 0.18);
        --health-bg: rgba(34, 197, 94, 0.08);

        --wood-bg: rgba(46, 125, 50, 0.12);
        --fire-bg: rgba(198, 40, 40, 0.12);
        --earth-bg: rgba(230, 81, 0, 0.12);
        --metal-bg: rgba(97, 97, 97, 0.12);
        --water-bg: rgba(21, 101, 192, 0.12);

        --overlay-bg: rgba(0, 0, 0, 0.5);
        --surface-glass: rgba(255, 255, 255, 0.95);
        --surface-glass-dark: rgba(248, 249, 250, 0.9);

        --btn-primary-text: var(--neutral-900);
      }
    }

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

    body {
      font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
      background: var(--bg-gradient);
      min-height: 100vh;
      color: var(--text-secondary);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      scroll-behavior: smooth;
      -webkit-overflow-scrolling: touch;
    }

    /* 스크롤바 스타일 (데스크톱) */
    ::-webkit-scrollbar {
      width: var(--space-sm);
      height: var(--space-sm);
    }

    ::-webkit-scrollbar-track {
      background: var(--scrollbar-track);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--scrollbar-thumb);
      border-radius: var(--space-xs);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--scrollbar-thumb-hover);
    }

    /* 선택 스타일 */
    ::selection {
      background: var(--selection-bg);
      color: var(--neutral-0);
    }

    .container {
      max-width: var(--space-1200);
      margin: 0 auto;
      padding: var(--space-xl);
    }

    header {
      text-align: center;
      padding: var(--space-lg) 0;
      border-bottom: var(--space-1) solid var(--border-card);
      margin-bottom: var(--space-lg);
    }

    header h1 {
      font-size: var(--font-hero);
      color: var(--primary);
      margin-bottom: var(--space-10);
    }

    header p {
      color: var(--text-muted);
    }

    /* 생일 설정 섹션 */
    .birth-section {
      background: var(--surface-hover);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      margin-bottom: var(--space-lg);
      border: var(--space-1) solid var(--border-card);
    }

    .birth-section h2 {
      color: var(--primary);
      margin-bottom: var(--space-xl);
      font-size: var(--font-5xl);
    }

    .birth-form {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-15);
      align-items: flex-end;
    }

    .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-5);
    }

    .form-group label {
      font-size: var(--font-base);
      color: var(--neutral-100);
    }

    .form-group select, .form-group input {
      padding: var(--space-10) var(--space-15);
      border-radius: var(--radius-sm);
      border: var(--space-1) solid var(--border-default);
      background: var(--neutral-500);
      color: var(--text-primary);
      font-size: var(--font-2xl);
      min-width: var(--space-100);
      transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    .form-group select:hover, .form-group input:hover {
      border-color: var(--neutral-300);
    }

    .form-group select:focus, .form-group input:focus {
      border-color: var(--primary);
      box-shadow: 0 0 0 var(--space-2) var(--primary-bg);
      outline: none;
    }

    .btn {
      padding: var(--space-md) var(--space-2xl);
      border-radius: var(--radius-sm);
      border: none;
      font-size: var(--font-2xl);
      cursor: pointer;
      transition: var(--transition-normal);
      min-height: var(--space-44);  /* Touch target 최소 크기 */
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .btn-primary {
      background: var(--primary);
      color: var(--neutral-800);
      font-weight: var(--font-weight-bold);
    }

    .btn-primary:hover {
      background: var(--primary-hover);
    }

    .btn-secondary {
      background: transparent;
      color: var(--text-secondary);
      border: 1px solid var(--neutral-400);
    }

    .btn-secondary:hover {
      border-color: var(--primary);
      color: var(--primary);
      background: var(--surface-hover);
    }

    /* Button Active States (데스크톱용) */
    .btn:active {
      transform: scale(0.98);
    }

    .btn-primary:active {
      transform: scale(0.97);
      background: var(--primary-active);
    }

    .btn-secondary:active {
      transform: scale(0.97);
      background: var(--surface-active);
    }

    /* 사주 정보 */
    .saju-info {
      background: var(--primary-bg);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      margin-bottom: var(--space-lg);
      border: var(--space-1) solid var(--primary);
    }

    .saju-pillars {
      display: flex;
      justify-content: center;
      gap: var(--space-md);
      margin: var(--space-md) 0;
    }

    .pillar {
      text-align: center;
      padding: var(--space-15) var(--space-25);
      background: var(--surface-card-elevated);
      border-radius: var(--radius-md);
      border: var(--space-1) solid var(--border-card);
      min-width: var(--space-80);
    }

    .pillar-label {
      font-size: var(--font-md);
      color: var(--text-muted);
      margin-bottom: var(--space-10);
    }

    .pillar-stem {
      font-size: var(--font-10xl);
      color: var(--primary);
    }

    .pillar-branch {
      font-size: var(--font-10xl);
      color: var(--secondary);
    }

    .day-master {
      text-align: center;
      margin-top: var(--space-15);
      padding: var(--space-10);
      background: var(--primary-bg-hover);
      border-radius: var(--radius-sm);
    }

    /* 탭 네비게이션 */
    .tabs {
      display: flex;
      gap: var(--space-10);
      margin-bottom: var(--space-xl);
      border-bottom: var(--space-1) solid var(--border-card);
      padding-bottom: var(--space-10);
    }

    .tab {
      padding: var(--space-md) var(--space-xl);
      background: transparent;
      border: none;
      color: var(--text-muted);
      cursor: pointer;
      font-size: var(--font-2xl);
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
      transition: var(--transition-normal);
      min-height: var(--space-44);  /* Touch target */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .tab.active {
      background: var(--primary-bg);
      color: var(--primary);
      border-bottom: var(--space-2) solid var(--primary);
    }

    .tab:hover {
      color: var(--primary);
      background: var(--surface-hover);
    }

    .tab:active {
      background: var(--primary-bg);
    }

    /* 캘린더 네비게이션 */
    .calendar-nav {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-xl);
    }

    .calendar-nav h3 {
      font-size: var(--font-6xl);
      color: var(--primary);
    }

    .nav-buttons {
      display: flex;
      gap: var(--space-10);
    }

    .nav-btn {
      width: var(--space-36);
      height: var(--space-36);
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: 1px solid var(--neutral-400);
      color: var(--text-secondary);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: var(--transition-fast);
      font-size: var(--font-xl);
    }

    .nav-btn:hover {
      background: var(--surface-hover);
      border-color: var(--primary);
      color: var(--primary);
    }

    .nav-btn:active {
      transform: scale(0.95);
      background: var(--surface-active);
    }

    /* 타이틀 클릭 가능 스타일 */
    .nav-title-clickable {
      cursor: pointer;
      transition: var(--transition-fast);
    }

    .nav-title-clickable:hover {
      color: var(--primary-hover);
    }

    /* 빠른 이동 버튼 영역 */
    .nav-quick-actions {
      display: flex;
      justify-content: center;
      margin-bottom: var(--space-sm);
    }

    .btn-today {
      padding: var(--space-xs) var(--space-md);
      font-size: var(--font-sm);
      background: var(--primary);
      color: var(--neutral-800);
      border: none;
      border-radius: var(--radius-full);
      cursor: pointer;
      font-weight: var(--font-weight-medium);
      transition: var(--transition-fast);
    }

    .btn-today:hover {
      background: var(--primary-hover);
      transform: scale(1.05);
    }

    /* 월간 캘린더 */
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: var(--space-5);
    }

    .calendar-header {
      text-align: center;
      padding: var(--space-10);
      font-weight: var(--font-weight-bold);
      color: var(--text-muted);
    }

    .calendar-header.sun { color: var(--error); }
    .calendar-header.sat { color: var(--info-light); }

    .calendar-day {
      aspect-ratio: 1;
      padding: var(--space-sm);
      background: var(--surface-hover);
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: var(--transition-normal);
      display: grid;
      grid-template-rows: auto auto auto auto auto;
      align-items: start;
      justify-items: center;
      min-height: var(--space-80);
      gap: var(--space-2);
      border: var(--space-2) solid transparent;
    }

    .calendar-day:hover {
      background: var(--primary-bg);
    }

    .calendar-day:active {
      transform: scale(0.98);
      background: var(--primary-bg-hover);
    }

    .calendar-day.today {
      border-color: var(--primary);
    }

    .calendar-day.selected {
      background: var(--primary-bg-hover);
    }

    /* 일운 운세 등급별 테두리 */
    .calendar-day.best {
      border-color: var(--success);
    }

    .calendar-day.worst {
      border-color: var(--error);
    }

    .calendar-day.other-month {
      opacity: 0.3;
    }

    .day-number {
      font-size: var(--font-3xl);
      margin-bottom: var(--space-5);
    }

    .day-pillar {
      font-size: var(--font-lg);
      color: var(--primary);
    }

    .day-score {
      font-size: var(--font-sm);
      margin-top: var(--space-3);
    }

    .score-good { color: var(--success); }
    .score-normal { color: var(--text-muted); }
    .score-bad { color: var(--error); }

    /* Score Badge (점수 배지) */
    .score-badge {
      padding: var(--space-xs) var(--space-md);
      border-radius: var(--space-md);
      font-weight: var(--font-weight-semibold);
      font-size: 0.9em;
      display: inline-block;
    }
    .score-badge.level-best { background: var(--fortune-best-bg); color: var(--fortune-best); }
    .score-badge.level-good { background: var(--fortune-good-bg); color: var(--fortune-good); }
    .score-badge.level-normal { background: var(--fortune-normal-bg); color: var(--fortune-normal); }
    .score-badge.level-caution { background: var(--fortune-caution-bg); color: var(--fortune-caution); }
    .score-badge.level-worst { background: var(--fortune-worst-bg); color: var(--fortune-worst); }

    /* Score Bar Container */
    .score-bar-container {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }
    .score-bar-value {
      font-weight: var(--font-weight-semibold);
      min-width: var(--space-4xl);
    }
    .score-bar-value.level-best { color: var(--fortune-best); }
    .score-bar-value.level-good { color: var(--fortune-good); }
    .score-bar-value.level-normal { color: var(--fortune-normal); }
    .score-bar-value.level-caution { color: var(--fortune-caution); }
    .score-bar-value.level-worst { color: var(--fortune-worst); }

    /* Mini Score (작은 점수 표시) */
    .mini-score {
      font-weight: var(--font-weight-semibold);
      font-size: 0.85em;
    }
    .mini-score.level-best { color: var(--fortune-best); }
    .mini-score.level-good { color: var(--fortune-good); }
    .mini-score.level-normal { color: var(--fortune-normal); }
    .mini-score.level-caution { color: var(--fortune-caution); }
    .mini-score.level-worst { color: var(--fortune-worst); }

    /* Utility Classes (유틸리티 클래스) */
    .text-muted { color: var(--text-muted); }
    .text-primary-color { color: var(--primary); }
    .empty-state {
      text-align: center;
      color: var(--text-muted);
      padding: var(--space-xl);
    }
    .tengod-highlight {
      color: var(--primary);
    }

    /* 시간대별 운세 - 12시진 = 4x3 그리드 */
    .hourly-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-10);
    }

    @media (max-width: 600px) {
      .hourly-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
      }
    }

    .hour-card {
      background: var(--surface-hover);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      text-align: center;
      transition: var(--transition-normal);
      border: var(--space-2) solid var(--border-card);
      cursor: pointer;
      position: relative;
    }

    .hour-card:hover {
      background: var(--surface-active);
    }

    .hour-card:active {
      transform: scale(0.98);
    }

    .hour-card.best {
      border-color: var(--success);
      background: var(--success-bg);
    }

    .hour-card.worst {
      border-color: var(--error);
      background: var(--error-bg);
    }

    .hour-name {
      font-size: var(--font-4xl);
      color: var(--text-primary);
      margin-bottom: var(--space-5);
      white-space: nowrap;
      font-weight: var(--font-weight-medium);
    }

    .hour-time {
      font-size: var(--font-md);
      color: var(--text-muted);
      margin-bottom: var(--space-10);
      white-space: nowrap;
    }

    .hour-pillar {
      font-size: var(--font-6xl);
      color: var(--primary);
      margin-bottom: var(--space-5);
    }

    .hour-tengod {
      font-size: var(--font-lg);
      color: var(--neutral-100);
      margin-bottom: var(--space-5);
    }

    .hour-score {
      font-size: var(--font-lg);
    }

    /* 일간 상세 */
    .daily-detail {
      background: var(--surface-hover);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      margin-top: var(--space-md);
    }

    .daily-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-xl);
    }

    .daily-date {
      font-size: var(--font-6xl);
      color: var(--primary);
    }

    .daily-pillar {
      font-size: var(--font-10xl);
      color: var(--secondary);
    }

    .daily-interpretation {
      padding: var(--space-15);
      background: var(--surface-card);
      border-radius: var(--radius-md);
      margin-bottom: var(--space-xl);
      line-height: 1.6;
    }

    .daily-keywords {
      display: flex;
      gap: var(--space-10);
      flex-wrap: wrap;
      margin-bottom: var(--space-xl);
    }

    .keyword {
      padding: var(--space-5) var(--space-15);
      background: var(--primary-bg);
      border-radius: var(--radius-xl);
      font-size: var(--font-lg);
      color: var(--primary);
    }

    /* .daily-aspects 그리드는 #dailyAspects에서 처리 */

    .daily-aspect-card {
      background: var(--surface-hover);
      border-radius: var(--radius-md);
      padding: var(--space-md);
    }

    .daily-aspect-title {
      font-size: var(--font-base);
      color: var(--primary);
      margin-bottom: var(--space-sm);
      display: flex;
      align-items: center;
      gap: var(--space-6);
    }

    .daily-aspect-content {
      font-size: var(--font-base);
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .daily-tip {
      margin-top: var(--space-xl);
      padding: var(--space-15);
      background: var(--gradient-primary-bg);
      border-left: var(--space-3) solid var(--primary);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
    }

    .daily-tip-label {
      font-size: var(--font-md);
      color: var(--primary);
      margin-bottom: var(--space-5);
    }

    .daily-tip-content {
      font-size: var(--font-xl);
      color: var(--text-primary);
      line-height: 1.5;
    }

    /* 일간 핵심 정보 그리드 */
    .daily-info-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-sm);
      margin: var(--space-lg) 0;
    }

    .daily-info-card {
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: var(--surface-card);
      border-radius: var(--radius-md);
      padding: var(--space-md) var(--space-lg);
      border: var(--space-1) solid var(--border-subtle);
    }

    .daily-info-tengod {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-xs);
    }

    .daily-info-label {
      font-size: var(--font-md);
      color: var(--text-muted);
      flex-shrink: 0;
    }

    .daily-info-value {
      font-size: var(--font-2xl);
      color: var(--text-primary);
    }

    .daily-info-hours {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
      justify-content: flex-end;
    }

    @media (min-width: 480px) {
      .daily-info-grid {
        grid-template-columns: 1fr 1fr;
      }
      .daily-info-tengod {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
      }
    }

    /* 월간 상세 운세 */
    .monthly-aspects {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-md);
      margin-top: var(--space-xl);
    }

    .monthly-aspect-card {
      background: var(--surface-hover);
      border-radius: var(--radius-md);
      padding: var(--space-md);
    }

    .monthly-aspect-title {
      font-size: var(--font-base);
      color: var(--primary);
      margin-bottom: var(--space-sm);
      display: flex;
      align-items: center;
      gap: var(--space-6);
    }

    .monthly-aspect-content {
      font-size: var(--font-base);
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .monthly-tip {
      margin-top: var(--space-lg);
      padding: var(--space-md);
      font-size: var(--font-lg);
      color: var(--warning);
      background: var(--warning-bg);
      border-radius: var(--radius-md);
    }

    /* 년간 상세 운세 */
    .yearly-aspects {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-md);
      margin-top: var(--space-xl);
    }

    .yearly-aspect-card {
      background: var(--surface-hover);
      border-radius: var(--radius-md);
      padding: var(--space-md);
    }

    .yearly-aspect-title {
      font-size: var(--font-base);
      color: var(--primary);
      margin-bottom: var(--space-sm);
      display: flex;
      align-items: center;
      gap: var(--space-6);
    }

    .yearly-aspect-content {
      font-size: var(--font-base);
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .yearly-tip {
      margin-top: var(--space-lg);
      padding: var(--space-md);
      font-size: var(--font-lg);
      color: var(--warning);
      background: var(--warning-bg);
      border-radius: var(--radius-md);
    }

    /* ===== 실용적 십신 해석 스타일 ===== */
    .practical-summary {
      font-size: var(--font-3xl);
      font-weight: var(--font-weight-semibold);
      color: var(--primary);
      margin-bottom: var(--space-sm);
      padding: var(--space-sm) var(--space-md);
      background: var(--gradient-primary-bg);
      border-radius: var(--radius-md);
      display: inline-block;
    }

    .practical-description {
      font-size: var(--font-xl);
      color: var(--text-secondary);
      line-height: 1.6;
      margin-top: var(--space-sm);
    }

    .practical-card {
      background: var(--surface-hover);
      border-radius: var(--radius-md);
      padding: var(--space-md);
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }

    .practical-card-icon {
      font-size: var(--font-4xl);
      margin-bottom: var(--space-xs);
    }

    .practical-card-title {
      font-size: var(--font-base);
      color: var(--primary);
      font-weight: var(--font-weight-semibold);
    }

    .practical-card-content {
      font-size: var(--font-lg);
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* practical-caution 스타일 제거됨 - tip 클래스로 통합 */

    .practical-health {
      display: flex;
      align-items: flex-start;
      gap: var(--space-sm);
      padding: var(--space-md);
      background: var(--health-bg);
      border-radius: var(--radius-md);
      margin-top: var(--space-sm);
    }

    .practical-health-label {
      font-size: var(--font-base);
      font-weight: var(--font-weight-semibold);
      white-space: nowrap;
    }

    .practical-health-content {
      font-size: var(--font-lg);
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* 상황별 카드 그리드 레이아웃 */
    #yearlyAspects,
    #monthlyAspects,
    #hourlyAspects,
    #dailyAspects {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--space-sm);
      margin-top: var(--space-lg);
    }

    @media (max-width: 1024px) {
      #yearlyAspects,
      #monthlyAspects,
      #hourlyAspects,
      #dailyAspects {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 600px) {
      #yearlyAspects,
      #monthlyAspects,
      #hourlyAspects,
      #dailyAspects {
        grid-template-columns: repeat(2, 1fr);
      }
    }

    @media (max-width: 400px) {
      #yearlyAspects,
      #monthlyAspects,
      #hourlyAspects,
      #dailyAspects {
        grid-template-columns: 1fr;
      }
    }

    /* 시간 상세 운세 */
    .hourly-detail {
      background: var(--surface-hover);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      margin-bottom: var(--space-md);
    }

    .hourly-header {
      text-align: center;
      padding: var(--space-15) 0;
      border-bottom: var(--space-1) solid var(--border-subtle);
      margin-bottom: var(--space-15);
    }

    .hourly-time {
      font-size: var(--font-3xl);
      color: var(--primary);
      margin-bottom: var(--space-sm);
    }

    .hourly-pillar {
      font-size: var(--font-10xl);
      color: var(--primary);
      font-weight: var(--font-weight-bold);
    }

    .hourly-interpretation {
      font-size: var(--font-xl);
      color: var(--text-secondary);
      line-height: 1.6;
      margin-bottom: var(--space-15);
    }

    .hourly-aspects {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: var(--space-md);
      margin-top: var(--space-xl);
    }

    .hourly-aspect-card {
      background: var(--surface-hover);
      border-radius: var(--radius-md);
      padding: var(--space-md);
    }

    .hourly-aspect-title {
      font-size: var(--font-base);
      color: var(--primary);
      margin-bottom: var(--space-sm);
      display: flex;
      align-items: center;
      gap: var(--space-6);
    }

    .hourly-aspect-content {
      font-size: var(--font-base);
      color: var(--text-secondary);
      line-height: 1.5;
    }

    .hourly-tip {
      margin-top: var(--space-lg);
      padding: var(--space-md);
      font-size: var(--font-lg);
      color: var(--warning);
      background: var(--warning-bg);
      border-radius: var(--radius-md);
    }

    /* 시간 운세 확장 정보 */
    .hourly-extended-info {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-md);
      margin-top: var(--space-xl);
    }

    .extended-info-card {
      background: var(--surface-card);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      border: var(--space-1) solid var(--border-subtle);
    }

    .extended-info-title {
      font-size: var(--font-md);
      color: var(--primary);
      font-weight: var(--font-weight-semibold);
      margin-bottom: var(--space-sm);
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .extended-info-title::before {
      content: '';
      width: var(--space-xs);
      height: var(--space-14);
      background: var(--primary);
      border-radius: var(--space-2);
    }

    .extended-info-content {
      font-size: var(--font-base);
      color: var(--text-secondary);
      line-height: var(--line-height-relaxed);
    }

    /* 일간 탭 - 오늘 운세 요약 */
    .daily-today-summary {
      background: var(--gradient-primary-bg);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      margin-bottom: var(--space-xl);
      border: var(--space-1) solid var(--border-card);
    }

    .today-summary-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-md);
      padding-bottom: var(--space-md);
      border-bottom: var(--space-1) solid var(--border-subtle);
    }

    .today-summary-date {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }

    .today-summary-date span:first-child {
      font-size: var(--font-3xl);
      font-weight: var(--font-weight-bold);
      color: var(--text-primary);
    }

    .today-summary-date .lunar-date {
      font-size: var(--font-sm);
      color: var(--text-muted);
    }

    .today-summary-pillar {
      font-size: var(--font-5xl);
      color: var(--primary);
      font-weight: var(--font-weight-bold);
    }

    .today-summary-body {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
    }

    .today-summary-tengod {
      font-size: var(--font-base);
      color: var(--text-secondary);
      line-height: var(--line-height-normal);
    }

    .today-summary-score {
      display: flex;
      align-items: center;
      gap: var(--space-md);
    }

    .today-summary-score .score-bar {
      flex: 1;
      height: var(--space-sm);
      background: var(--neutral-500);
      border-radius: var(--radius-full);
      overflow: hidden;
    }

    .today-summary-score .score-fill {
      height: 100%;
      width: var(--score-width, 0%);
      border-radius: var(--radius-full);
      transition: width var(--transition-normal);
    }

    .today-summary-score .score-fill.high {
      background: var(--success);
    }

    .today-summary-score .score-fill.medium {
      background: var(--warning);
    }

    .today-summary-score .score-fill.low {
      background: var(--error);
    }

    .today-summary-hours {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--space-md);
    }

    .hour-summary {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);
    }

    .hour-summary .hour-label {
      font-size: var(--font-sm);
      color: var(--text-muted);
    }

    .hour-summary .hour-tags {
      font-size: var(--font-sm);
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }

    /* 모달 */
    .modal {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--overlay-bg);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }

    .modal.show {
      display: flex;
    }

    .modal-content {
      background: var(--neutral-700);
      border-radius: var(--radius-md);
      padding: var(--space-xl);
      max-width: var(--space-500);
      width: 90%;
      border: var(--space-1) solid var(--border-card);
    }

    .modal-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-xl);
    }

    .modal-close {
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: var(--font-6xl);
      cursor: pointer;
    }

    /* 오늘의 운세 대시보드 */
    .today-dashboard {
      background: var(--gradient-primary-bg);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      margin-bottom: var(--space-lg);
      border: var(--space-1) solid var(--primary-bg-strong);
    }

    .dashboard-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-md);
    }

    .dashboard-date {
      font-size: var(--font-5xl);
      color: var(--primary);
    }

    .dashboard-date .lunar-date {
      font-size: var(--font-lg);
      color: var(--neutral-100);
      margin-left: var(--space-10);
    }

    .dashboard-pillar {
      font-size: var(--font-9xl);
      color: var(--secondary);
    }

    .dashboard-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(var(--space-200), 1fr));
      gap: var(--space-10);
    }

    .dashboard-card {
      background: var(--surface-card);
      border-radius: var(--radius-sm);
      padding: var(--space-md);
    }

    .dashboard-card-title {
      font-size: var(--font-base);
      color: var(--text-muted);
      margin-bottom: var(--space-sm);
      display: flex;
      align-items: center;
      gap: var(--space-6);
    }

    .dashboard-card-content {
      font-size: var(--font-2xl);
      line-height: 1.6;
    }

    .dashboard-score {
      display: flex;
      align-items: center;
      gap: var(--space-10);
      margin-bottom: var(--space-15);
    }

    .score-bar {
      flex: 1;
      height: var(--space-sm);
      background: var(--border-subtle);
      border-radius: var(--radius-sm);
      overflow: hidden;
    }

    .score-fill {
      height: 100%;
      width: var(--score-width, 0%);
      border-radius: var(--radius-sm);
      transition: width var(--transition-normal);
    }

    .score-fill.high { background: linear-gradient(90deg, var(--success), var(--success-light)); }
    .score-fill.medium { background: linear-gradient(90deg, var(--warning), var(--warning-light)); }
    .score-fill.low { background: linear-gradient(90deg, var(--error-500), var(--error-600)); }

    /* 오늘의 운세 대시보드 - 새 스타일 */
    .today-date-info {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-md);
      margin-bottom: var(--space-lg);
      padding-bottom: var(--space-md);
      border-bottom: var(--space-1) solid var(--border-subtle);
    }

    .today-date {
      font-size: var(--font-4xl);
      color: var(--primary);
      font-weight: var(--font-weight-semibold);
    }

    .today-lunar {
      font-size: var(--font-lg);
      color: var(--text-muted);
    }

    .today-pillar {
      font-size: var(--font-6xl);
      color: var(--secondary);
      font-weight: var(--font-weight-bold);
      margin-left: auto;
    }

    .today-fortune-summary {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      margin-bottom: var(--space-lg);
    }

    .today-tengod {
      font-size: var(--font-3xl);
      line-height: 1.6;
    }

    .today-score {
      display: flex;
      align-items: center;
      gap: var(--space-md);
    }

    .today-score .score-bar {
      flex: 1;
      max-width: var(--space-200);
    }

    .today-score .score-text {
      font-size: var(--font-3xl);
      font-weight: var(--font-weight-bold);
      color: var(--primary);
      min-width: var(--space-50);
    }

    .today-hours-summary {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(var(--space-150), 1fr));
      gap: var(--space-md);
    }

    .hours-section {
      background: var(--surface-card);
      border-radius: var(--radius-sm);
      padding: var(--space-md);
    }

    .hours-label {
      font-size: var(--font-base);
      color: var(--text-muted);
      margin-bottom: var(--space-sm);
    }

    .hours-list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-xs);
    }

    .best-hour-tag {
      display: inline-block;
      padding: var(--space-xs) var(--space-sm);
      background: var(--fortune-best-bg);
      color: var(--fortune-best);
      border-radius: var(--radius-sm);
      font-size: var(--font-sm);
      font-weight: var(--font-weight-medium);
    }

    .worst-hour-tag {
      display: inline-block;
      padding: var(--space-xs) var(--space-sm);
      background: var(--fortune-worst-bg);
      color: var(--fortune-worst);
      border-radius: var(--radius-sm);
      font-size: var(--font-sm);
      font-weight: var(--font-weight-medium);
    }

    .best-hours {
      display: flex;
      gap: var(--space-10);
      flex-wrap: wrap;
    }

    .best-hour-tag {
      padding: var(--space-5) var(--space-md);
      background: var(--success-bg-strong);
      border: var(--space-1) solid var(--success-border);
      border-radius: var(--radius-lg);
      font-size: var(--font-base);
      color: var(--success);
    }

    .worst-hour-tag {
      padding: var(--space-5) var(--space-md);
      background: var(--error-bg-strong);
      border: var(--space-1) solid var(--error-border);
      border-radius: var(--radius-lg);
      font-size: var(--font-base);
      color: var(--error-500);
    }

    /* 오행 차트 */
    .element-chart {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      height: var(--space-150);
      padding: var(--space-15) var(--space-10);
      background: var(--surface-card);
      border-radius: var(--radius-md);
      margin-top: var(--space-15);
      overflow: hidden;
    }

    .element-bar-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      width: var(--space-50);
      height: 100%;
    }

    .element-bar {
      width: var(--space-30);
      height: var(--bar-height, 0);
      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
      transition: height var(--transition-normal);
    }

    .element-bar.wood { background: linear-gradient(180deg, var(--success), var(--success-900)); }
    .element-bar.fire { background: linear-gradient(180deg, var(--error-500), var(--error-900)); }
    .element-bar.earth { background: linear-gradient(180deg, var(--warning), var(--warning-900)); }
    .element-bar.metal { background: linear-gradient(180deg, var(--metal-500), var(--metal-900)); }
    .element-bar.water { background: linear-gradient(180deg, var(--info), var(--info-900)); }

    .element-label {
      margin-top: var(--space-sm);
      font-size: var(--font-lg);
      color: var(--neutral-100);
    }

    .element-count {
      font-size: var(--font-md);
      color: var(--primary);
      margin-top: var(--space-3);
    }

    /* 현재 시간 하이라이트 */
    .hour-card.current {
      border-color: var(--primary);
    }

    .hour-card.current::after {
      content: '현재';
      position: absolute;
      top: var(--space-xs);
      right: var(--space-xs);
      background: var(--primary);
      color: var(--neutral-900);
      padding: var(--space-1) var(--space-xs);
      border-radius: var(--radius-xs);
      font-size: var(--font-xs);
      font-weight: var(--font-weight-bold);
    }

    .hour-card.current.best {
      border-color: var(--success);
    }

    .hour-card.current.worst {
      border-color: var(--error);
    }

    .hour-card.current.best::after,
    .hour-card.current.worst::after {
      background: var(--primary);
    }

    /* 선택된 시간 하이라이트 - 배경색만 변경 */
    .hour-card.selected {
      background: var(--primary-bg-hover);
    }

    /* 음력 날짜 표시 */
    .day-lunar {
      font-size: var(--font-sm);
      color: var(--text-muted);
      min-height: 0.8em;
      white-space: nowrap;
    }

    .day-lunar.leap {
      color: var(--warning);
    }

    /* 저장된 생일 표시 */
    .saved-birthday-banner {
      background: var(--gradient-primary-bg);
      border-left: var(--space-xs) solid var(--primary);
      padding: var(--space-md) var(--space-xl);
      margin-bottom: var(--space-xl);
      border-radius: 0 var(--radius-md) var(--radius-md) 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .saved-birthday-info {
      display: flex;
      align-items: center;
      gap: var(--space-15);
    }

    .saved-birthday-label {
      color: var(--text-muted);
      font-size: var(--font-lg);
    }

    .saved-birthday-value {
      color: var(--primary);
      font-weight: var(--font-weight-bold);
    }

    /* 주간 운세 미리보기 */
    .weekly-preview {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: var(--space-6);
      margin-top: var(--space-md);
    }

    .weekly-day {
      padding: var(--space-sm) var(--space-xs);
      background: var(--surface-card);
      border-radius: var(--radius-sm);
      text-align: center;
      cursor: pointer;
      transition: var(--transition-normal);
    }

    .weekly-day:hover {
      background: var(--primary-bg);
    }

    .weekly-day.today {
      border: var(--space-1) solid var(--primary);
    }

    .weekly-day-name {
      font-size: var(--font-sm);
      color: var(--text-muted);
      margin-bottom: var(--space-3);
    }

    .weekly-day-date {
      font-size: var(--font-lg);
      color: var(--text-primary);
      margin-bottom: var(--space-5);
    }

    .weekly-day-score {
      font-size: var(--font-xs);
    }

    /* 일주 성격 설명 */
    .pillar-personality {
      margin-top: var(--space-15);
      padding: var(--space-15);
      background: var(--surface-card);
      border-radius: var(--radius-md);
      font-size: var(--font-lg);
      line-height: 1.6;
      color: var(--text-secondary);
    }

    .pillar-personality-title {
      color: var(--primary);
      font-weight: var(--font-weight-bold);
      margin-bottom: var(--space-sm);
    }

    /* 사주 기둥별 인생 해석 (근묘화실) */
    .pillar-analysis {
      margin-top: var(--space-xl);
      padding: var(--space-lg);
      background: var(--surface-card);
      border-radius: var(--radius-lg);
      border: var(--space-1) solid var(--border-subtle);
    }

    .pillar-analysis-title {
      font-size: var(--font-2xl);
      color: var(--primary);
      margin-bottom: var(--space-lg);
      text-align: center;
    }

    .pillar-period {
      padding: var(--space-md);
      margin-bottom: var(--space-sm);
      background: var(--surface-hover);
      border-radius: var(--radius-md);
      border-left: var(--space-3) solid var(--primary);
    }

    .pillar-period:last-child {
      margin-bottom: 0;
    }

    .pillar-period-header {
      display: flex;
      align-items: center;
      gap: var(--space-sm);
      margin-bottom: var(--space-xs);
    }

    .pillar-period-icon {
      font-size: var(--font-2xl);
    }

    .pillar-period-label {
      font-size: var(--font-sm);
      color: var(--text-muted);
    }

    .pillar-period-name {
      font-size: var(--font-xl);
      font-weight: var(--font-weight-semibold);
      color: var(--primary);
      margin-bottom: var(--space-xs);
    }

    .pillar-period-desc {
      font-size: var(--font-base);
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* 월운 12개월 그리드 - 항상 4x3 */
    .monthly-overview {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: var(--space-sm);
      margin-bottom: var(--space-15);
    }

    .monthly-overview .empty-state {
      grid-column: 1 / -1;
    }

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

    .monthly-item {
      padding: var(--space-sm) var(--space-sm);
      background: var(--surface-hover);
      border-radius: var(--radius-sm);
      text-align: center;
      cursor: pointer;
      transition: var(--transition-normal);
      border: var(--space-2) solid transparent;
    }

    .monthly-item:hover {
      background: var(--primary-bg);
    }

    .monthly-item.current {
      border-color: var(--primary);
    }

    .monthly-item.selected {
      background: var(--primary-bg-hover);
    }

    /* 월운 운세 등급별 테두리 */
    .monthly-item.best {
      border-color: var(--success);
    }

    .monthly-item.worst {
      border-color: var(--error);
    }

    .monthly-item-month {
      font-size: var(--font-sm);
      color: var(--text-muted);
      margin-bottom: var(--space-3);
    }

    .monthly-item-pillar {
      font-size: var(--font-lg);
      color: var(--primary);
      margin-bottom: var(--space-3);
    }

    .monthly-item-score {
      font-size: var(--font-xs);
    }

    /* 년운 년도 그리드 */
    .yearly-overview {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: var(--space-sm);
      margin-bottom: var(--space-15);
    }

    .yearly-overview .empty-state {
      grid-column: 1 / -1;
    }

    .yearly-item {
      padding: var(--space-md) var(--space-sm);
      background: var(--surface-hover);
      border-radius: var(--radius-sm);
      text-align: center;
      cursor: pointer;
      transition: var(--transition-normal);
      border: var(--space-2) solid transparent;
    }

    .yearly-item:hover {
      background: var(--primary-bg);
    }

    .yearly-item.current {
      border-color: var(--primary);
    }

    .yearly-item.selected {
      background: var(--primary-bg-hover);
    }

    /* 년운 운세 등급별 테두리 */
    .yearly-item.best {
      border-color: var(--success);
    }

    .yearly-item.worst {
      border-color: var(--error);
    }

    .yearly-item-year {
      font-size: var(--font-lg);
      color: var(--text-primary);
      font-weight: var(--font-weight-bold);
      margin-bottom: var(--space-3);
    }

    .yearly-item-pillar {
      font-size: var(--font-base);
      color: var(--primary);
      margin-bottom: var(--space-3);
    }

    .yearly-item-score {
      font-size: var(--font-xs);
    }

    /* 절기 표시 - 24절기 (계절 변화 지표) */
    .day-term {
      font-size: var(--font-sm);
      min-height: 1.1em;
      white-space: nowrap;
    }

    .day-term.active {
      color: var(--success);
      background: var(--success-bg-strong);
      padding: var(--space-1) var(--space-xs);
      border-radius: var(--space-3);
      cursor: help;
    }



    /* 절기 상세 정보 박스 (일간 상세에서 표시) */
    .solar-term-box {
      background: linear-gradient(135deg, var(--success-bg), var(--success-bg-subtle));
      border-left: var(--space-3) solid var(--success);
      padding: var(--space-md) var(--space-lg);
      margin: var(--space-md) 0;
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      font-size: var(--font-lg);
      color: var(--text-secondary);
    }

    .solar-term-box strong {
      color: var(--success);
      font-size: var(--font-2xl);
    }

    /* 빈 상태 안내 */
    .empty-state {
      text-align: center;
      padding: var(--space-30) var(--space-lg);
      color: var(--text-muted);
    }

    .empty-state-icon {
      font-size: var(--font-display);
      margin-bottom: var(--space-xl);
      opacity: 0.5;
    }

    .empty-state-title {
      font-size: var(--font-5xl);
      color: var(--neutral-100);
      margin-bottom: var(--space-10);
    }

    .empty-state-desc {
      font-size: var(--font-xl);
      line-height: 1.6;
      margin-bottom: var(--space-xl);
    }

    /* 애니메이션 */
    @keyframes fadeIn {
      from { opacity: 0; transform: translateY(var(--space-10)); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes slideIn {
      from { opacity: 0; transform: translateX(calc(-1 * var(--space-10))); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.05); }
    }

    .animate-fade {
      animation: fadeIn 0.4s ease-out;
    }

    .animate-slide {
      animation: slideIn 0.3s ease-out;
    }

    /* 오행 색상 강화 */
    .element-wood { color: var(--success); }
    .element-fire { color: var(--error-500); }
    .element-earth { color: var(--warning); }
    .element-metal { color: var(--metal-500); }
    .element-water { color: var(--info); }

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

    /* 점수 색상 */
    .score-excellent { color: var(--success); }
    .score-good { color: var(--success-light); }
    .score-normal { color: var(--warning-light); }
    .score-caution { color: var(--warning); }
    .score-warning { color: var(--error-500); }

    /* 스크롤바 스타일링 */
    .weekly-preview::-webkit-scrollbar {
      height: var(--space-xs);
    }

    .weekly-preview::-webkit-scrollbar-track {
      background: var(--border-subtle);
      border-radius: var(--space-2);
    }

    .weekly-preview::-webkit-scrollbar-thumb {
      background: var(--primary-bg-strong);
      border-radius: var(--space-2);
    }

    /* 툴팁 */
    .tooltip {
      position: relative;
      cursor: help;
    }

    .tooltip::after {
      content: attr(data-tooltip);
      position: absolute;
      bottom: 100%;
      left: 50%;
      transform: translateX(-50%);
      background: var(--border-card);
      color: var(--text-primary);
      padding: var(--space-5) var(--space-10);
      border-radius: var(--radius-sm);
      font-size: var(--font-md);
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity var(--transition-normal);
    }

    .tooltip:hover::after {
      opacity: 1;
    }

    /* 년간/월간 운세 섹션 */
    .fortune-section {
      background: var(--surface-hover);
      border-radius: var(--radius-md);
      padding: var(--space-lg);
      margin-bottom: var(--space-md);
      border: var(--space-1) solid var(--border-card);
    }

    .fortune-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: var(--space-xl);
    }

    .fortune-title {
      font-size: var(--font-6xl);
      color: var(--primary);
    }

    .fortune-score {
      flex: 1;
      max-width: var(--space-200);
      min-width: var(--space-120);
    }

    .fortune-interpretation {
      padding: var(--space-15);
      background: var(--surface-card);
      border-radius: var(--radius-md);
      margin-bottom: var(--space-xl);
      line-height: 1.8;
    }

    .fortune-aspects {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(var(--space-200), 1fr));
      gap: var(--space-15);
    }

    .aspect-card {
      background: var(--surface-hover);
      border-radius: var(--radius-md);
      padding: var(--space-15);
    }

    .aspect-title {
      color: var(--primary);
      font-size: var(--font-lg);
      margin-bottom: var(--space-sm);
      display: flex;
      align-items: center;
      gap: var(--space-sm);
    }

    .aspect-content {
      font-size: var(--font-lg);
      color: var(--text-secondary);
      line-height: 1.5;
    }

    /* 시간 상세 설명 모달 */
    .hour-description {
      font-size: var(--font-md);
      color: var(--neutral-100);
      margin-top: var(--space-sm);
      line-height: 1.4;
      text-align: left;
      padding: var(--space-sm);
      background: var(--surface-card);
      border-radius: var(--radius-sm);
      display: none;
    }

    .hour-card.expanded .hour-description {
      display: block;
    }

    .hour-card {
      cursor: pointer;
    }

    .hour-expand-hint {
      font-size: var(--font-xs);
      color: var(--text-disabled);
      margin-top: var(--space-5);
    }

    /* ========== 토스트 알림 ========== */

    .toast {
      position: fixed;
      bottom: var(--space-100);
      left: 50%;
      transform: translateX(-50%) translateY(var(--space-100));
      background: var(--surface-card);
      color: var(--text-primary);
      padding: var(--space-md) var(--space-xl);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-lg);
      display: flex;
      align-items: center;
      gap: var(--space-md);
      z-index: 10000;
      opacity: 0;
      visibility: hidden;
      transition: transform var(--transition-normal), opacity var(--transition-normal), visibility var(--transition-normal);
      max-width: calc(100vw - var(--space-40));
      border: var(--space-1) solid var(--border-subtle);
    }

    .toast.show {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      visibility: visible;
    }

    .toast-icon {
      font-size: var(--font-3xl);
      flex-shrink: 0;
    }

    .toast-message {
      font-size: var(--font-base);
      line-height: 1.5;
      white-space: pre-line;
    }

    .toast.toast-success {
      border-color: var(--success);
    }

    .toast.toast-success .toast-icon::before {
      content: '✓';
      color: var(--success);
    }

    .toast.toast-error {
      border-color: var(--error);
    }

    .toast.toast-error .toast-icon::before {
      content: '✗';
      color: var(--error);
    }

    .toast.toast-warning {
      border-color: var(--warning);
    }

    .toast.toast-warning .toast-icon::before {
      content: '⚠';
      color: var(--warning);
    }

    .toast.toast-info {
      border-color: var(--primary);
    }

    .toast.toast-info .toast-icon::before {
      content: 'ℹ';
      color: var(--primary);
    }

    /* ========== 로딩 인디케이터 ========== */

    .loading-overlay {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: var(--surface-bg);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 9999;
      opacity: 1;
      transition: opacity var(--transition-fast);
    }

    .loading-overlay.hidden {
      opacity: 0;
      pointer-events: none;
    }

    .loading-spinner {
      width: var(--space-50);
      height: var(--space-50);
      border: var(--space-4) solid var(--border-subtle);
      border-top-color: var(--primary);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }

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

    /* 탭 콘텐츠 전환 애니메이션 */
    .tab-content {
      animation: fadeInTab 0.3s ease-out;
    }

    @keyframes fadeInTab {
      from {
        opacity: 0;
        transform: translateY(var(--space-10));
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* ========== 모바일 최적화 ========== */

    /* Safe area 지원 (노치/홈 인디케이터) */
    @supports (padding: env(safe-area-inset-bottom)) {
      .container {
        padding-left: max(var(--space-xl), env(safe-area-inset-left));
        padding-right: max(var(--space-xl), env(safe-area-inset-right));
        padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
      }
    }

    /* 터치 타겟 최소 크기 보장 */
    .btn, .tab, .nav-btn, .calendar-day, .hour-card, .monthly-item, .weekly-day {
      min-height: var(--space-44);
      -webkit-tap-highlight-color: var(--primary-bg);
    }

    /* 태블릿 (768px 이하) */
    @media (max-width: 768px) {
      header {
        padding: var(--space-xl) 0;
      }

      header h1 {
        font-size: var(--font-9xl);
      }

      header p {
        font-size: var(--font-lg);
      }

      .container {
        padding: var(--space-10);
      }

      /* 생일 폼 최적화 */
      .birth-section {
        padding: var(--space-xl) var(--space-15);
      }

      .birth-section h2 {
        font-size: var(--font-3xl);
        margin-bottom: var(--space-15);
      }

      .birth-form {
        flex-direction: column;
        gap: var(--space-md);
      }

      .form-group {
        width: 100%;
      }

      .form-group label {
        font-size: var(--font-lg);
        margin-bottom: var(--space-5);
      }

      .form-group select, .form-group input {
        width: 100%;
        padding: var(--space-14) var(--space-15);
        font-size: var(--space-lg); /* iOS 줌 방지 */
        border-radius: var(--space-10);
      }

      .btn {
        width: 100%;
        padding: var(--space-14);
        font-size: var(--font-2xl);
        border-radius: var(--space-10);
      }

      /* 저장된 생일 배너 */
      .saved-birthday-banner {
        flex-direction: column;
        gap: var(--space-10);
        padding: var(--space-15);
        text-align: center;
      }

      .saved-birthday-info {
        flex-direction: column;
        gap: var(--space-5);
      }

      /* 사주 정보 */
      .saju-info {
        padding: var(--space-xl) var(--space-15);
      }

      .saju-pillars {
        flex-wrap: nowrap;
        gap: var(--space-sm);
        overflow-x: auto;
        padding-bottom: var(--space-10);
        -webkit-overflow-scrolling: touch;
      }

      .pillar {
        min-width: var(--space-65);
        flex: 0 0 auto;
        padding: var(--space-md) var(--space-10);
      }

      .pillar-label {
        font-size: var(--font-sm);
      }

      .pillar-stem, .pillar-branch {
        font-size: var(--font-5xl-half);
      }

      .day-master {
        font-size: var(--font-lg);
        padding: var(--space-md);
      }

      /* 오행 차트 */
      .element-chart {
        height: var(--space-160);
        margin-top: var(--space-10);
      }

      .element-bar-container {
        width: var(--space-40);
      }

      .element-bar {
        width: var(--space-25);
      }

      .element-label {
        font-size: var(--font-md);
      }

      /* 일주 성격 */
      .pillar-personality {
        padding: var(--space-md);
        font-size: var(--font-base);
      }

      .pillar-personality-title {
        font-size: var(--font-xl);
      }

      /* 대시보드 */
      .today-dashboard {
        padding: var(--space-xl) var(--space-15);
      }

      .dashboard-header {
        flex-direction: column;
        gap: var(--space-10);
        text-align: center;
      }

      .dashboard-date {
        font-size: var(--font-3xl);
      }

      .dashboard-date .lunar-date {
        display: block;
        margin-top: var(--space-5);
        margin-left: 0;
      }

      .dashboard-pillar {
        font-size: var(--font-6xl);
      }

      .dashboard-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
      }

      .dashboard-card {
        padding: var(--space-md);
      }

      .dashboard-card-title {
        font-size: var(--font-base);
      }

      /* 주간 미리보기 */
      .weekly-preview {
        gap: var(--space-xs);
      }

      .weekly-day {
        padding: var(--space-6) var(--space-2);
      }

      .weekly-day-name {
        font-size: var(--font-xs);
      }

      .weekly-day-date {
        font-size: var(--font-md);
      }

      /* 탭 */
      .tabs {
        flex-wrap: nowrap;
        gap: var(--space-5);
        overflow-x: auto;
        padding-bottom: var(--space-10);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .tabs::-webkit-scrollbar {
        display: none;
      }

      .tab {
        padding: var(--space-10) var(--space-14);
        font-size: var(--font-base);
        white-space: nowrap;
        flex: 0 0 auto;
      }

      /* 캘린더 네비게이션 - 모바일 */
      .calendar-nav {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-sm);
      }

      .calendar-nav h3 {
        font-size: var(--font-4xl);
        margin: 0;
        flex: 1;
        text-align: center;
      }

      .nav-btn {
        width: var(--space-44);
        height: var(--space-44);
        font-size: var(--font-2xl);
      }

      /* 캘린더 날짜 */
      .calendar-day {
        min-height: var(--space-55);
        padding: var(--space-xs) var(--space-2);
        aspect-ratio: auto;
        gap: var(--space-1);
      }

      .day-number {
        font-size: var(--font-base);
        margin-bottom: var(--space-1);
      }

      .day-lunar {
        font-size: var(--font-sm);
        min-height: 0.6em;
      }

      .day-term {
        font-size: var(--font-xs);
        min-height: 0.6em;
      }

      .day-term.active {
        padding: 0 var(--space-2);
      }

      .day-pillar {
        font-size: var(--font-sm);
      }

      .day-score {
        font-size: var(--font-sm);
        letter-spacing: calc(-1 * var(--space-1));
      }

      /* 시간별 운세 */
      .hourly-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-sm);
      }

      .hour-card {
        padding: var(--space-10) var(--space-6);
      }

      .hour-name {
        font-size: var(--font-lg);
      }

      .hour-time {
        font-size: var(--font-sm);
      }

      .hour-pillar {
        font-size: var(--font-5xl);
      }

      .hour-tengod {
        font-size: var(--font-base);
      }

      .hour-score {
        font-size: var(--font-md);
        letter-spacing: calc(-1 * var(--space-1));
      }

      .hour-expand-hint {
        font-size: var(--font-sm);
      }

      .hour-description {
        font-size: var(--font-sm);
        padding: var(--space-6);
      }

      /* 운세 섹션 */
      .fortune-section {
        padding: var(--space-xl) var(--space-15);
      }

      .fortune-header {
        flex-direction: column;
        gap: var(--space-10);
        text-align: center;
      }

      .fortune-title {
        font-size: var(--font-4xl);
      }

      .fortune-interpretation {
        font-size: var(--font-lg);
        padding: var(--space-md);
        line-height: 1.7;
      }

      .fortune-aspects {
        grid-template-columns: 1fr;
        gap: var(--space-10);
      }

      .aspect-card {
        padding: var(--space-md);
      }

      /* 월간 개요 */
      .monthly-overview {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-6);
      }

      .monthly-item {
        padding: var(--space-6) var(--space-xs);
      }

      .monthly-item-month {
        font-size: var(--font-xs);
      }

      .monthly-item-pillar {
        font-size: var(--font-base);
      }

      /* 일간 상세 */
      .daily-detail {
        padding: var(--space-xl) var(--space-15);
      }

      .daily-header {
        flex-direction: column;
        gap: var(--space-10);
        text-align: center;
      }

      .daily-date {
        font-size: var(--font-4xl);
      }

      .daily-pillar {
        font-size: var(--font-7xl);
      }

      .daily-interpretation {
        font-size: var(--font-lg);
        line-height: 1.7;
      }

      .keyword {
        padding: var(--space-6) var(--space-md);
        font-size: var(--font-base);
      }
    }

    /* 작은 모바일 (480px 이하) */
    @media (max-width: 480px) {
      header h1 {
        font-size: var(--font-6xl);
      }

      .container {
        padding: var(--space-sm);
      }

      /* 사주 4기둥 */
      .saju-pillars {
        justify-content: center;
      }

      .pillar {
        min-width: var(--space-60);
        padding: var(--space-10) var(--space-sm);
      }

      .pillar-stem, .pillar-branch {
        font-size: var(--font-5xl);
      }

      /* 캘린더 */
      .calendar-day {
        min-height: var(--space-50);
        padding: var(--space-3) var(--space-2);
        gap: 0;
      }

      .day-number {
        font-size: var(--font-sm);
      }

      .day-lunar {
        font-size: var(--font-sm);
        min-height: 0.5em;
      }

      .day-pillar {
        font-size: var(--font-sm);
      }

      .day-score {
        font-size: var(--font-sm);
      }

      .day-term {
        font-size: var(--font-2xs);
      }

      .day-term.active {
        padding: 0 var(--space-2);
      }

      /* 시간별 운세 - 3열 유지 */
      .hourly-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
      }

      .hour-card {
        padding: var(--space-sm) var(--space-xs);
      }

      .hour-name {
        font-size: var(--font-md);
      }

      .hour-time {
        font-size: var(--font-sm);
        margin-bottom: var(--space-5);
      }

      .hour-pillar {
        font-size: var(--font-2xl);
      }

      .hour-tengod {
        font-size: var(--font-xs);
      }

      .hour-score {
        font-size: var(--font-xs);
      }

      /* 월간 개요 */
      .monthly-overview {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-5);
      }

      /* 주간 미리보기 */
      .weekly-day {
        padding: var(--space-5) var(--space-2);
      }

      .weekly-day-name {
        font-size: var(--font-xs);
      }

      .weekly-day-date {
        font-size: var(--font-sm);
      }

      .weekly-day-score {
        font-size: var(--font-xs);
      }

      /* 탭 */
      .tab {
        padding: var(--space-10) var(--space-md);
        font-size: var(--font-md);
      }
    }

    /* 매우 작은 화면 (360px 이하) */
    @media (max-width: 360px) {
      header h1 {
        font-size: var(--font-5xl);
      }

      .pillar {
        min-width: var(--space-55);
        padding: var(--space-sm) var(--space-6);
      }

      .pillar-stem, .pillar-branch {
        font-size: var(--font-4xl);
      }

      .calendar-day {
        min-height: var(--space-45);
        gap: 0;
      }

      .day-number {
        font-size: var(--font-xs);
      }

      .day-lunar {
        font-size: var(--font-sm);
        min-height: 0;
      }

      .day-pillar {
        font-size: var(--font-sm);
      }

      .day-score {
        font-size: var(--font-sm);
      }

      .monthly-overview {
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-xs);
      }

      .monthly-item {
        padding: var(--space-6) var(--space-3);
      }

      .monthly-item-month {
        font-size: var(--font-sm);
      }

      .monthly-item-pillar {
        font-size: var(--font-sm);
      }

      .monthly-item-score {
        font-size: var(--font-sm);
      }
    }

    /* 가로 모드 최적화 */
    @media (max-height: 480px) and (orientation: landscape) {
      header {
        padding: var(--space-10) 0;
      }

      header h1 {
        font-size: var(--font-6xl);
      }

      .birth-section, .saju-info, .today-dashboard, .fortune-section {
        padding: var(--space-15);
      }

      .saju-pillars {
        gap: var(--space-15);
      }

      .calendar-day {
        min-height: var(--space-45);
      }

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

    /* ========== HTML에서 사용하는 새 클래스 ========== */
    .section-title {
      text-align: center;
      margin-bottom: var(--space-lg);
      color: var(--primary);
      font-size: var(--font-5xl);
    }

    .btn-small {
      padding: var(--space-sm) var(--space-md);
      font-size: var(--font-base);
    }

    .form-hint {
      font-size: var(--font-sm);
      color: var(--text-muted);
      margin-top: var(--space-xs);
    }

    .score-label {
      font-size: var(--font-lg);
      color: var(--text-muted);
      white-space: nowrap;
    }

    .dashboard-card-weekly {
      grid-column: 1 / -1;
      margin-top: var(--space-sm);
    }

    .fortune-section-detail {
      margin-top: var(--space-xl);
    }

    .tengod-display {
      text-align: center;
      margin-bottom: var(--space-lg);
    }

    .tengod-text {
      font-size: var(--font-4xl);
      color: var(--primary);
      font-weight: var(--font-weight-medium);
    }

    .tengod-text-primary {
      font-size: var(--font-5xl);
      color: var(--primary);
      font-weight: var(--font-weight-bold);
    }

    /* ========== Disabled 상태 스타일 ========== */
    .btn:disabled,
    .btn[disabled],
    button:disabled,
    button[disabled] {
      background: var(--neutral-400);
      color: var(--text-disabled);
      cursor: not-allowed;
      opacity: 0.6;
      transform: none;
      box-shadow: none;
    }

    .btn:disabled:hover,
    .btn[disabled]:hover,
    button:disabled:hover,
    button[disabled]:hover {
      transform: none;
      box-shadow: none;
    }

    .btn-primary:disabled,
    .btn-primary[disabled] {
      background: var(--neutral-400);
    }

    select:disabled,
    select[disabled],
    input:disabled,
    input[disabled] {
      background: var(--neutral-400);
      color: var(--text-disabled);
      cursor: not-allowed;
      opacity: 0.6;
      border-color: var(--neutral-300);
    }

    .tab:disabled,
    .tab[disabled] {
      color: var(--text-disabled);
      cursor: not-allowed;
      opacity: 0.5;
    }

    .nav-btn:disabled,
    .nav-btn[disabled] {
      background: var(--neutral-400);
      color: var(--text-disabled);
      cursor: not-allowed;
      opacity: 0.6;
    }

    .calendar-day.disabled,
    .hour-card.disabled,
    .monthly-item.disabled,
    .yearly-item.disabled {
      opacity: 0.4;
      cursor: not-allowed;
      pointer-events: none;
    }

    .hidden {
      display: none !important;
    }

    /* Display utility classes */
    .show-flex {
      display: flex !important;
    }

    .show-block {
      display: block !important;
    }

    .show-inline-block {
      display: inline-block !important;
    }

    /* 터치 활성 상태 */
    @media (hover: none) and (pointer: coarse) {
      .btn:active {
        transform: scale(0.98);
        opacity: 0.9;
      }

      .tab:active {
        background: var(--primary-bg-strong);
      }

      .nav-btn:active {
        background: var(--neutral-500);
      }

      .calendar-day:active {
        background: var(--primary-bg-hover);
        transform: scale(0.98);
      }

      .hour-card:active {
        transform: scale(0.98);
        background: var(--surface-active);
      }

      .monthly-item:active {
        transform: scale(0.98);
        background: var(--primary-bg-hover);
      }

      .weekly-day:active {
        transform: scale(0.95);
        background: var(--primary-bg-strong);
      }

      .keyword:active {
        transform: scale(0.95);
      }

      /* 호버 효과 제거 (터치 기기) */
      .btn:hover,
      .calendar-day:hover,
      .hour-card:hover,
      .monthly-item:hover,
      .weekly-day:hover {
        transform: none;
      }
    }

    /* 포커스 스타일 (접근성) */
    .btn:focus-visible,
    .tab:focus-visible,
    .nav-btn:focus-visible,
    .today-btn:focus-visible,
    .modal-close:focus-visible,
    select:focus-visible,
    input:focus-visible {
      outline: var(--space-2) solid var(--primary);
      outline-offset: var(--space-2);
    }

    /* 인터랙티브 요소 포커스 스타일 */
    .calendar-day:focus-visible,
    .hour-card:focus-visible,
    .monthly-item:focus-visible,
    .yearly-item:focus-visible,
    .weekly-day:focus-visible,
    .mobile-nav-item:focus-visible {
      outline: var(--space-2) solid var(--primary);
      outline-offset: var(--space-2);
      box-shadow: var(--shadow-glow);
    }

    /* 키워드/태그 포커스 */
    .keyword:focus-visible,
    .best-hour-tag:focus-visible,
    .worst-hour-tag:focus-visible {
      outline: var(--space-2) solid var(--primary);
      outline-offset: var(--space-2);
    }

    .loading {
      text-align: center;
      padding: var(--space-xl);
      color: var(--text-muted);
    }

    /* ========== 모바일 하단 네비게이션 ========== */
    .mobile-nav {
      display: none;
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      background: var(--surface-glass);
      backdrop-filter: blur(var(--space-10));
      -webkit-backdrop-filter: blur(var(--space-10));
      border-top: var(--space-1) solid var(--border-card);
      padding: var(--space-sm) 0;
      padding-bottom: max(var(--space-sm), env(safe-area-inset-bottom));
      z-index: 1000;
    }

    .mobile-nav-items {
      display: flex;
      justify-content: space-around;
      align-items: center;
      max-width: var(--space-500);
      margin: 0 auto;
    }

    .mobile-nav-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: var(--space-xs);
      padding: var(--space-sm) var(--space-md);
      background: none;
      border: none;
      color: var(--text-muted);
      font-size: var(--font-xs);
      cursor: pointer;
      transition: var(--transition-fast);
      border-radius: var(--radius-sm);
      min-width: var(--space-5xl);   /* 48px */
      min-height: var(--space-5xl);  /* 48px - Touch target */
    }

    .mobile-nav-item:active {
      transform: scale(0.95);
    }

    .mobile-nav-item.active {
      color: var(--primary);
    }

    .mobile-nav-item svg {
      width: var(--space-2xl);
      height: var(--space-2xl);
      fill: currentColor;
    }

    .mobile-nav-item span {
      font-weight: var(--font-weight-medium);
    }

    @media (max-width: 768px) {
      .mobile-nav {
        display: block;
      }

      /* 하단 네비에 가려지지 않도록 패딩 추가 */
      .container {
        padding-bottom: var(--space-80);
      }

      /* 탭 숨기기 (하단 네비로 대체) */
      .tabs {
        display: none;
      }
    }

    /* ========== 플로팅 액션 버튼 - 제거 (콘텐츠 가림 문제) ========== */
    /* FAB 버튼은 콘텐츠를 가리는 UX 문제가 있어 제거함 */
    /* 대신 하단 네비게이션에 오늘 버튼을 통합 */
    .fab {
      display: none !important;
    }

    /* ========== 빈 상태 개선 ========== */
    .empty-state {
      text-align: center;
      padding: var(--space-2xl) var(--space-lg);
      color: var(--text-muted);
    }

    .empty-state-icon {
      width: var(--space-80);
      height: var(--space-80);
      margin: 0 auto var(--space-xl);
      opacity: 0.5;
    }

    .empty-state-icon svg {
      width: 100%;
      height: 100%;
      fill: var(--primary);
    }

    .empty-state-title {
      font-size: var(--font-3xl);
      color: var(--neutral-100);
      margin-bottom: var(--space-10);
    }

    .empty-state-desc {
      font-size: var(--font-lg);
      line-height: 1.6;
      margin-bottom: var(--space-xl);
    }

    /* ========== 스켈레톤 로딩 ========== */
    .skeleton {
      background: linear-gradient(90deg, var(--surface-hover) 25%, var(--surface-active) 50%, var(--surface-hover) 75%);
      background-size: 200% 100%;
      animation: skeleton-loading 1.5s infinite;
      border-radius: var(--radius-sm);
    }

    @keyframes skeleton-loading {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }

    /* ========== 오늘 버튼 ========== */
    .today-btn {
      padding: var(--space-6) var(--space-md);
      background: var(--primary-bg);
      border: var(--space-1) solid var(--primary);
      color: var(--primary);
      border-radius: var(--radius-lg);
      font-size: var(--font-md);
      cursor: pointer;
      transition: var(--transition-fast);
    }

    .today-btn:hover {
      background: var(--primary-bg-strong);
    }

    /* ========== 점수 뱃지 ========== */
    .score-badge {
      display: inline-flex;
      align-items: center;
      gap: var(--space-xs);
      padding: var(--space-xs) var(--space-10);
      border-radius: var(--radius-md);
      font-size: var(--font-base);
      font-weight: var(--font-weight-bold);
    }

    .score-badge.excellent {
      background: var(--success-bg-strong);
      color: var(--success);
    }

    .score-badge.good {
      background: var(--score-good-bg);
      color: var(--success-light);
    }

    .score-badge.normal {
      background: var(--score-normal-bg);
      color: var(--warning-light);
    }

    .score-badge.caution {
      background: var(--earth-bg);
      color: var(--warning);
    }

    .score-badge.warning {
      background: var(--error-bg-strong);
      color: var(--error-500);
    }

/* ========== 데스크톱 전용 스타일 (min-width: 769px) ========== */

/* ========== 데스크톱 레이아웃 (769px+) ========== */
@media (min-width: 769px) {
  /* 전체 컨테이너 - 좁고 중앙 정렬 */
  .container {
    max-width: var(--space-750);
    margin: 0 auto;
    padding: var(--space-xl) var(--space-30);
  }

  /* 탭 네비게이션 - 세련된 스타일 */
  .tabs {
    display: flex;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-sm);
    background: var(--surface-card-elevated);
    border-radius: var(--space-30);
    max-width: var(--space-450);
    margin: 0 auto var(--space-2xl);
  }

  .tab {
    padding: var(--space-10) var(--space-xl);
    font-size: var(--font-xl);
    border-radius: var(--space-xl);
    min-width: var(--space-70);
    border: none;
    transition: var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .tab:hover {
    background: var(--primary-bg);
  }

  .tab.active {
    background: var(--gradient-primary);
    color: var(--neutral-900);
    font-weight: var(--font-weight-semibold);
  }

  /* 헤더 */
  header {
    padding: var(--space-xl) 0;
    margin-bottom: var(--space-xl);
  }

  header h1 {
    font-size: var(--font-9xl);
  }

  header p {
    font-size: var(--font-xl);
  }

  /* 생일 배너 */
  .saved-birthday-banner {
    padding: var(--space-14) var(--space-xl);
    border-radius: var(--space-md);
  }

  /* 내 사주 카드 */
  #sajuInfo {
    background: var(--primary-bg);
    border-radius: var(--space-lg);
    padding: var(--space-2xl);
    border: var(--space-1) solid var(--primary);
  }

  #sajuInfo h2 {
    font-size: var(--font-5xl);
    margin-bottom: var(--space-xl);
  }

  /* 사주 4주 표시 */
  .saju-pillars {
    display: flex;
    justify-content: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
  }

  .pillar {
    width: var(--space-75);
    padding: var(--space-md) var(--space-sm);
    background: var(--surface-card-elevated);
    border-radius: var(--space-md);
    border: var(--space-1) solid var(--border-card);
  }

  .pillar-title {
    font-size: var(--font-md);
    margin-bottom: var(--space-sm);
  }

  .stem, .branch {
    font-size: var(--font-8xl);
    line-height: 1.3;
  }

  /* 일간 표시 바 */
  .day-master-bar {
    max-width: var(--space-400);
    margin: 0 auto var(--space-xl);
    padding: var(--space-10) var(--space-lg);
    border-radius: var(--space-xl);
  }

  /* 오행 차트 - 컴팩트하고 명확하게 */
  .element-chart {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: var(--space-sm);
    height: var(--space-140);
    max-width: var(--space-320);
    margin: var(--space-lg) auto var(--space-xl);
    padding: var(--space-lg) var(--space-md);
    background: var(--surface-card-elevated);
    border-radius: var(--space-md);
  }

  .element-bar-container {
    width: var(--space-50);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
  }

  .element-bar {
    width: var(--space-3xl);
    border-radius: var(--space-xs) var(--space-xs) 0 0;
    min-height: var(--space-xs);
  }

  .element-label {
    font-size: var(--font-base);
    margin-top: var(--space-6);
  }

  .element-count {
    font-size: var(--font-md);
    margin-top: var(--space-2);
  }

  /* 일주 성격 */
  .pillar-personality {
    background: var(--surface-card);
    border-radius: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    margin-top: var(--space-lg);
  }

  .pillar-personality h3 {
    font-size: var(--font-3xl);
  }

  /* 년간/월간 탭 */
  #yearlyTab, #monthlyTab {
    max-width: var(--space-700);
    margin: 0 auto;
  }

  .year-overview, .month-overview {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-bottom: var(--space-2xl);
  }

  .year-card, .month-card {
    min-width: var(--space-100);
    padding: var(--space-md) var(--space-lg);
  }

  /* 운세 상세 카드 */
  .fortune-detail {
    background: var(--surface-card);
    border-radius: var(--space-lg);
    padding: var(--space-2xl);
    border: var(--space-1) solid var(--desktop-border-subtle);
  }

  .fortune-header {
    margin-bottom: var(--space-lg);
  }

  .fortune-aspects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .fortune-aspect-card {
    padding: var(--space-lg);
    border-radius: var(--space-md);
  }

  /* 일간 캘린더 */
  #dailyTab {
    max-width: var(--space-700);
    margin: 0 auto;
  }

  .calendar-grid {
    gap: var(--space-xs);
  }

  .calendar-day {
    padding: var(--space-sm) var(--space-xs);
    min-height: var(--space-90);
    border-radius: var(--space-sm);
  }

  /* 시간 탭 */
  #hourlyTab {
    max-width: var(--space-700);
    margin: 0 auto;
  }

  .hourly-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-10);
    margin-bottom: var(--space-2xl);
  }

  .hour-card {
    padding: var(--space-md) var(--space-sm);
    min-height: var(--space-120);
    border-radius: var(--space-10);
  }

  .hour-name {
    font-size: var(--font-2xl);
  }

  .hour-time {
    font-size: var(--font-sm);
  }

  .hour-pillar {
    font-size: var(--font-4xl);
  }

  /* 시간 상세 */
  .hourly-detail {
    background: var(--surface-card);
    border-radius: var(--space-lg);
    padding: var(--space-2xl);
    border: var(--space-1) solid var(--desktop-border-subtle);
  }

  /* 점수 바 */
  .score-bar {
    max-width: var(--space-180);
  }

  /* 버튼 스타일 */
  .nav-btn {
    width: var(--space-36);
    height: var(--space-36);
    font-size: var(--font-xl);
  }
}

/* ========== 대형 데스크톱 (1024px+) ========== */
@media (min-width: 1024px) {
  .container {
    max-width: var(--space-850);
  }

  .tabs {
    max-width: var(--space-500);
  }

  #dailyTab, #hourlyTab, #yearlyTab, #monthlyTab {
    max-width: var(--space-800);
  }

  .hourly-grid {
    gap: var(--space-md);
  }

  .hour-card {
    min-height: var(--space-130);
  }
}

/* ========== 광고 컨테이너 ========== */
.ad-container {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin: var(--space-xl) 0;
  text-align: center;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.ad-label {
  font-size: var(--font-xs);
  color: var(--text-muted);
  margin-bottom: var(--space-xs);
}

.ad-placeholder {
  color: var(--text-disabled);
  font-size: var(--font-sm);
}

/* 광고 반응형 */
@media (min-width: 768px) {
  .ad-container {
    max-width: 728px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========== 십신 천간/지지 표시 ========== */
.tengod-stem {
  color: var(--primary);
  font-weight: var(--font-weight-semibold);
}

.tengod-separator {
  color: var(--text-muted);
  margin: 0 var(--space-xs);
}

.tengod-branch {
  color: var(--secondary);
  font-weight: var(--font-weight-semibold);
}

/* ========== 오행 강약 ========== */
.element-strength-section {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--surface-secondary);
  border-radius: var(--radius-lg);
}

.element-strength-section .section-title {
  font-size: var(--font-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
  text-align: center;
}

.strength-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.strength-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.strength-label {
  width: 50px;
  font-size: var(--font-sm);
  font-weight: var(--font-weight-semibold);
}

.strength-label.wood { color: var(--success-400); }
.strength-label.fire { color: var(--error-400); }
.strength-label.earth { color: var(--warning-400); }
.strength-label.metal { color: var(--neutral-100); }
.strength-label.water { color: var(--info-400); }

.strength-bar-bg {
  flex: 1;
  height: 12px;
  background: var(--neutral-600);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.strength-bar-fill {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.5s ease;
}

.strength-bar-fill.wood { background: linear-gradient(90deg, var(--success-900), var(--success-400)); }
.strength-bar-fill.fire { background: linear-gradient(90deg, var(--error-900), var(--error-400)); }
.strength-bar-fill.earth { background: linear-gradient(90deg, var(--warning-900), var(--warning-400)); }
.strength-bar-fill.metal { background: linear-gradient(90deg, var(--metal-900), var(--metal-500)); }
.strength-bar-fill.water { background: linear-gradient(90deg, var(--info-900), var(--info-400)); }

.strength-value {
  width: 40px;
  font-size: var(--font-sm);
  color: var(--text-secondary);
  text-align: right;
}