/* ═══ v2 Direction System Styles ═══ */
.v2-badge{transition:all 0.2s;letter-spacing:0.02em}
.v2-dir-row{display:flex;align-items:center;gap:6px;margin:4px 0}
.v2-grade-label{font-size:11px;font-weight:500;color:var(--text2);letter-spacing:0.01em}
.v2-action-hint{font-size:10px;color:var(--text3);margin-top:2px;font-style:italic}
.v2-cat-cell{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:12px;border:1px solid var(--border);margin-bottom:6px;background:var(--card-bg);transition:all 0.2s}
.v2-cat-cell:hover{border-color:var(--text3)}
.v2-cat-left{display:flex;align-items:center;gap:8px}
.v2-cat-icon{font-size:16px;width:24px;text-align:center}
.v2-cat-name{font-size:13px;font-weight:500;color:var(--text1)}
.v2-cat-right{display:flex;align-items:center;gap:8px}
.v2-cat-score{font-size:18px;font-weight:700;min-width:28px;text-align:right}
.v2-section-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:16px;margin-bottom:12px}
.v2-section-title{font-size:14px;font-weight:600;color:var(--text1);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.v2-summary-banner{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:14px;margin-bottom:12px}

#offline-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:9999;padding:6px 16px;background:#FBBF24;color:#000;font-size:12px;font-weight:600;justify-content:center;align-items:center;gap:6px;font-family:var(--sans)}

/* 한자 독음 ruby 스타일 */
ruby{ruby-align:center}
ruby rt{font-size:0.55em;color:var(--text3,#666);font-family:var(--sans);letter-spacing:-0.02em;opacity:0.85}
ruby rp{display:none}

/* =======================================================
   LOGOS ORACLE v4.0 R2 -- Co-Star Dark Minimalism
   ======================================================= */
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;400;700;900&family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap');

:root {
  --bg: #000000;
  --surface: #0A0A0A;
  --surface2: #111111;
  --surface3: #1A1A1A;
  --text1: #F5F5F0;
  --text2: #888888;
  --text3: #555555;
  --border: #222222;
  --accent: #FFFFFF;
  --serif: 'Noto Serif KR', Georgia, 'Times New Roman', serif;
  --sans: 'Noto Sans KR', system-ui, -apple-system, sans-serif;
}

[data-theme="light"] {
  --bg: #FAFAF8;
  --surface: #F5F5F0;
  --surface2: #EEEEEA;
  --surface3: #E8E8E4;
  --text1: #0A0A0A;
  --text2: #666666;
  --text3: #777777;
  --border: #DDDDDD;
  --accent: #000000;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { font-family: var(--sans); background: var(--bg); color: var(--text1); overflow-x: hidden; transition: background .3s, color .3s; }
body {
  max-width: 440px; margin: 0 auto; min-height: 100vh; position: relative;
  /* Parchment / raw-hemp subtle texture via CSS noise */
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(139,115,85,0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(199,62,29,0.02) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(250,250,245,0.015) 0%, transparent 70%);
}
[data-theme="light"] body {
  background-image:
    radial-gradient(ellipse at 20% 50%, rgba(139,115,85,0.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(199,62,29,0.03) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(200,195,180,0.08) 0%, transparent 70%);
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideLeft { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes fillLine { from { width: 0; } to { width: 100%; } }
@keyframes pulse3 { 0%,100% { opacity: .3; } 50% { opacity: 1; } }

.screen { display: none; min-height: 100vh; animation: fadeIn .35s ease; contain: layout style; }
.screen#onboarding.active { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; position: relative; }
.screen.active { display: flex; flex-direction: column; will-change: scroll-position; }

/* -- SPLASH -- */
#splash { align-items: center; justify-content: center; background: #000; position: relative; }
#splash .brand { font-family: var(--serif); font-size: 32px; font-weight: 200; letter-spacing: .15em; color: #F5F5F0; animation: fadeIn 1s ease; }
#splash .sub { font-family: var(--sans); font-size: 11px; letter-spacing: .25em; color: #555; margin-top: 16px; text-transform: uppercase; }
#splash .load-bar { position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%); width: 120px; height: 1px; background: #222; }
#splash .load-fill { height: 1px; background: #F5F5F0; animation: fillLine 1.8s ease forwards; }

/* -- ONBOARDING -- */
.ob-wrap { flex: 1; display: flex; flex-direction: column; padding: 16px 20px 0; min-height: 0; overflow: hidden; }
.ob-dots { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; }
.ob-dot { width: 6px; height: 6px; border-radius: 50%; background: #333; transition: background .3s; }
.ob-dot.on { background: var(--text1); }
.ob-step { display: none; flex-direction: column; animation: slideUp .35s ease; overflow-y: auto; min-height: 0; flex: 1; -webkit-overflow-scrolling: touch; }
.ob-step.active { display: flex; }
.ob-label { font-family: var(--sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); margin-bottom: 6px; }
.ob-title { font-family: var(--serif); font-size: 22px; font-weight: 200; color: var(--text1); margin-bottom: 10px; line-height: 1.3; }
.ob-input { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; color: var(--text1); font-size: 17px; font-family: var(--serif); font-weight: 200; padding: 14px 16px; width: 100%; outline: none; transition: border-color .3s, box-shadow .3s; box-sizing: border-box; }
.ob-input:focus { border-color: var(--text1); box-shadow: 0 0 0 2px rgba(0,0,0,.05); }
.ob-input::placeholder { color: var(--text3); font-size: 15px; }
.ob-select-group { display: flex; gap: 12px; margin-top: 8px; }
.ob-select-btn { flex: 1; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: transparent; color: var(--text2); font-family: var(--sans); font-size: 15px; cursor: pointer; transition: all .3s; text-align: center; }
.ob-select-btn:hover { border-color: var(--text2); }
.ob-select-btn:active { background: var(--surface3); }
.ob-select-btn.selected { border-color: var(--text1); color: var(--text1); background: var(--surface2); position: relative; }
.ob-select-btn.selected::after { content: '\2713'; position: absolute; top: 6px; right: 8px; font-size: 12px; color: var(--text1); opacity: .7; }
.ob-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ob-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.ob-chip { padding: 14px 8px; border: 1px solid var(--border); border-radius: 2px; background: transparent; color: var(--text2); font-size: 13px; cursor: pointer; text-align: center; transition: all .3s; }
.ob-chip:hover { border-color: var(--text2); color: var(--text1); }
.ob-chip:active { background: var(--surface3); }
.ob-chip.selected { border-color: var(--text1); color: var(--text1); background: var(--surface2); }
/* Old ob-next/ob-guest hidden — replaced by ob-bottom-bar */
.ob-next { display: none !important; }
.ob-guest { display: none !important; }
/* Bottom fixed nav bar */
.ob-bottom-bar { display: flex; gap: 8px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--border); z-index: 10; flex-shrink: 0; }
.ob-bottom-btn { flex: 1; padding: 14px 8px; border-radius: 10px; font-family: var(--sans); font-size: 14px; font-weight: 500; cursor: pointer; transition: all .2s; letter-spacing: .02em; text-align: center; }
.ob-bottom-btn.primary { background: var(--text1); color: var(--bg); border: none; }
.ob-bottom-btn.primary:hover { opacity: .9; }
.ob-bottom-btn.primary:active { transform: scale(.98); }
.ob-bottom-btn.secondary { background: transparent; border: 1px solid var(--border); color: var(--text2); }
.ob-bottom-btn.secondary:hover { border-color: var(--text2); color: var(--text1); }
.ob-bottom-btn.back { background: transparent; border: none; color: var(--text3); flex: 0 0 auto; padding: 14px 16px; }
.ob-bottom-btn.back:hover { color: var(--text1); }
/* Field labels */
.ob-field-label { font-size: 12px; font-family: var(--sans); color: var(--text2); letter-spacing: .04em; margin-bottom: 6px; }
.ob-exact-time { margin-top: 16px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }

/* -- Onboarding Language Bar (removed: ko-only) -- */

/* -- Onboarding Clock UI (Step 4) -- */
.ob-clock { position: relative; width: 260px; height: 260px; margin: 0 auto; }
.ob-clock-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.ob-clock-center .occ-emoji { font-size: 26px; line-height: 1.2; }
.ob-clock-center .occ-text { font-size: 10px; color: var(--text2); margin-top: 2px; font-family: var(--sans); }
.ob-clock-item { position: absolute; width: 40px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border-radius: 50%; border: 1px solid var(--border); transition: all .3s; font-size: 9px; color: var(--text2); background: transparent; top: 50%; left: 50%; margin-left: -20px; margin-top: -20px; }
.ob-clock-item .oci-emoji { font-size: 13px; line-height: 1; }
.ob-clock-item .oci-label { font-size: 8px; margin-top: 1px; white-space: nowrap; }
.ob-clock-item:hover { border-color: var(--text2); color: var(--text1); }
.ob-clock-item.selected { background: var(--text1); color: var(--bg); border-color: var(--text1); }
.ob-clock-item.selected .oci-label { color: var(--bg); }
.ob-clock-unknown { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: var(--text3); cursor: pointer; background: none; border: none; font-family: var(--sans); padding: 8px; transition: color .3s; }
.ob-clock-unknown:hover { color: var(--text2); }
.ob-clock-unknown.selected { color: var(--text1); text-decoration: underline; }

/* -- Onboarding City Cards (Step 4) -- */
.ob-city-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ob-city-card { padding: 12px 6px; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 13px; cursor: pointer; text-align: center; transition: all .3s; border-radius: 2px; }
.ob-city-card .occ-name { font-size: 14px; font-weight: 400; }
.ob-city-card .occ-coord { font-size: 10px; color: var(--text3); margin-top: 4px; }
.ob-city-card:hover { border-color: var(--text2); color: var(--text1); }
.ob-city-card.selected { border-color: var(--text1); color: var(--text1); background: var(--surface2); }
.ob-geo-btn { width: 100%; padding: 12px; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 13px; cursor: pointer; font-family: var(--sans); margin-top: 8px; transition: all .2s; }
.ob-geo-btn:hover { border-color: var(--text2); color: var(--text1); }
.ob-city-expand { display: block; width: 100%; text-align: center; margin-top: 8px; font-size: 13px; color: var(--text3); cursor: pointer; background: none; border: none; font-family: var(--sans); padding: 8px; transition: color .3s; }
.ob-city-expand:hover { color: var(--text2); }
.ob-city-more { display: none; margin-top: 8px; }
.ob-city-more.show { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

/* -- Step 4 compact layout -- */
.ob-step4-sub { font-family: var(--sans); font-size: 12px; color: var(--text3); margin: -8px 0 8px; line-height: 1.5; letter-spacing: .01em; }
.ob-step4-time-card { margin-top: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ob-step4-time-card-note { font-family: var(--sans); font-size: 11px; color: var(--text3); margin-top: 10px; line-height: 1.4; letter-spacing: .01em; }
.ob-step4-time-row { display: flex; align-items: stretch; gap: 8px; }
.ob-time-colon { font-size: 18px; color: var(--text3); font-weight: 200; flex-shrink: 0; align-self: center; }
.ob-step4-time-input { flex: 1; height: 44px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text1); font-size: 16px; font-family: var(--serif); font-weight: 200; text-align: center; box-sizing: border-box; outline: none; transition: border-color .3s; padding: 0; min-width: 0; }
.ob-step4-time-input:focus { border-color: var(--text1); }
.ob-step4-time-input::placeholder { color: var(--text3); font-size: 13px; }
.ob-step4-unknown { cursor: pointer; font-family: var(--sans); font-size: 13px; color: var(--text2); }
.ob-step4-unknown.selected { border-color: var(--text1); color: var(--text1); background: var(--surface2); }
.ob-step4-city { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.ob-step4-city-row { display: flex; align-items: stretch; gap: 8px; margin-top: 6px; }
.ob-step4-city-select { flex: 0 0 44%; font-size: 14px; padding: 10px 8px; cursor: pointer; background: transparent; min-width: 0; border-radius: 8px; }
.ob-step4-geo-btn { flex: 1; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 6px; padding: 10px 12px; border: 1px solid var(--border); background: transparent; cursor: pointer; border-radius: 8px; transition: border-color .2s; }
.ob-step4-geo-btn:hover { border-color: var(--text2); }
.ob-geo-label { font-family: var(--sans); font-size: 14px; color: var(--text2); letter-spacing: .01em; }
.ob-geo-icon { font-size: 16px; }

/* -- Precision Gauge (SVG arc) -- */
.ob-precision-gauge { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 12px 16px; background: var(--surface); border-radius: 4px; }
.ob-precision-gauge svg { flex-shrink: 0; }
.ob-precision-gauge .opg-text { font-size: 13px; color: var(--text2); }
.ob-precision-gauge .opg-pct { color: var(--text1); font-weight: 500; }

/* -- F20: Onboarding Precision Notice -- */
@keyframes slideDown20 { from { max-height:0; opacity:0; padding:0 16px; } to { max-height:120px; opacity:1; padding:12px 16px; } }
@keyframes slideUp20 { from { max-height:120px; opacity:1; padding:12px 16px; } to { max-height:0; opacity:0; padding:0 16px; } }
.ob-precision-notice { background:#1A1A1A; border-left:2px solid #fff; margin-top:16px; overflow:hidden; animation:slideDown20 .3s ease forwards; border-radius:0 2px 2px 0; }
.ob-precision-notice.hide { animation:slideUp20 .3s ease forwards; }
.ob-precision-notice .pn-warn { font-size:14px; color:#fff; margin-bottom:4px; }
.ob-precision-notice .pn-detail { font-size:12px; color:#888; line-height:1.5; }
.precision-badge-home { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; background:var(--surface3); border:1px solid var(--border); border-radius:4px; font-size:11px; color:var(--text2); cursor:pointer; margin-left:8px; transition:background .2s; }
.precision-badge-home:hover { background:var(--surface2); color:var(--text1); }

/* -- F21: Streak Reward Modal -- */
@keyframes streakModalIn { from { opacity:0; transform:scale(.8); } to { opacity:1; transform:scale(1); } }
.streak-reward-modal { position:fixed; inset:0; z-index:10000; background:rgba(0,0,0,.9); display:flex; flex-direction:column; align-items:center; justify-content:center; animation:streakModalIn .4s ease; }
.streak-reward-modal .srm-days { font-size:120px; font-weight:100; color:var(--text1); line-height:1; font-family:var(--sans); }
.streak-reward-modal .srm-title { font-family:var(--serif); font-size:24px; color:var(--text1); margin-top:16px; }
.streak-reward-modal .srm-desc { font-size:15px; color:#888; margin-top:8px; text-align:center; line-height:1.5; max-width:280px; }
.streak-reward-modal .srm-cta { width:280px; padding:16px; background:#fff; color:#000; border:none; font-size:15px; font-weight:500; cursor:pointer; margin-top:32px; font-family:var(--sans); letter-spacing:.03em; transition:opacity .2s; }
.streak-reward-modal .srm-cta:hover { opacity:.9; }
.settings-badges { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.settings-badge-item { display:flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:6px; font-size:12px; }
.settings-badge-item.locked { opacity:.5; }
.settings-badge-item .badge-icon { font-size:16px; }
.settings-badge-item .badge-name { color:var(--text1); }
.settings-badge-item .badge-remain { color:var(--text3); font-size:10px; }

/* -- F22: Time-period Fortune (Home) -- */
.home-tod-section { margin:8px 24px; }
.home-tod-tabs { display:flex; gap:0; border:1px solid var(--border); border-radius:2px; overflow:hidden; }
.home-tod-tab { flex:1; padding:10px 8px; text-align:center; font-size:12px; color:#888; background:#333; cursor:pointer; border:none; font-family:var(--sans); transition:all .2s; border-right:1px solid var(--border); }
.home-tod-tab:last-child { border-right:none; }
.home-tod-tab.active { background:#fff; color:#000; }
.home-tod-content { padding:16px 0 8px; text-align:center; animation:fadeIn .2s ease; }
.home-tod-score { font-size:48px; font-weight:200; font-family:'Noto Serif KR',Georgia,serif; display:inline; }
.home-tod-max { font-size:16px; color:var(--text3); }
.home-tod-advice { font-size:14px; color:#AAA; margin-top:6px; }
[data-theme="light"] .home-tod-tab { background:var(--surface3); color:var(--text3); }
[data-theme="light"] .home-tod-tab.active { background:var(--accent); color:var(--bg); }

/* -- F23: Home Mini Fortune Graph -- */
.home-fortune-trend { margin:8px 24px; }
.home-fortune-trend .hft-label { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text2); margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.home-fortune-trend svg { width:100%; max-width:360px; display:block; margin:0 auto; }
.home-fortune-trend .hft-msg { font-size:13px; text-align:center; margin-top:8px; }

/* -- F24: Evidence Tags -- */
.evidence-tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.evidence-tag { padding:4px 10px; background:#1A1A1A; border:1px solid #333; border-radius:4px; font-size:12px; color:#AAA; cursor:pointer; transition:background .2s; display:inline-flex; align-items:center; gap:4px; }
.evidence-tag:hover { background:#222; color:var(--text1); }
.evidence-tag .et-prefix { font-size:11px; color:#666; }
[data-theme="light"] .evidence-tag { background:var(--surface3); border-color:var(--border); color:var(--text2); }
.evidence-sheet { position:fixed; inset:0; z-index:10001; display:flex; flex-direction:column; justify-content:flex-end; }
.evidence-sheet .es-overlay { position:absolute; inset:0; background:rgba(0,0,0,.5); }
.evidence-sheet .es-body { position:relative; background:var(--surface); border-radius:16px 16px 0 0; padding:24px; max-height:40vh; overflow-y:auto; animation:slideUp .3s ease; }
.evidence-sheet .es-close { position:absolute; top:12px; right:16px; background:none; border:none; color:var(--text2); font-size:20px; cursor:pointer; }
.evidence-sheet .es-title { font-family:var(--serif); font-size:16px; margin-bottom:12px; color:var(--text1); }
.evidence-sheet .es-text { font-size:14px; color:var(--text2); line-height:1.8; }

/* -- F25: Annual Plan -- */
.plan-card .pc-popular { position:absolute; top:8px; right:8px; padding:2px 8px; background:#333; color:#FFF; font-size:11px; border-radius:2px; letter-spacing:.05em; }
.plan-card .pc-monthly-equiv { font-size:14px; color:#888; margin-top:2px; }
.plan-card .pc-discount { display:inline-block; padding:2px 6px; background:#fff; color:#000; font-size:11px; font-weight:600; border-radius:2px; margin-top:4px; }
.plan-card.recommended { border:2px solid var(--text1); }

/* -- F26: Premium Value -- */
.lock-features-list { width:100%; max-width:300px; margin-top:20px; margin-bottom:24px; }
.lock-feature-row { display:flex; align-items:flex-start; gap:12px; margin-bottom:16px; }
.lock-feature-row .lf-icon { font-size:24px; color:#fff; flex-shrink:0; width:28px; text-align:center; }
.lock-feature-row .lf-text .lf-name { font-size:15px; color:#fff; font-weight:500; }
.lock-feature-row .lf-text .lf-desc { font-size:12px; color:#888; margin-top:2px; }
.lock-overlay .lock-premium-label { font-size:11px; letter-spacing:.2em; color:var(--text2); margin-bottom:16px; text-transform:uppercase; }
.lock-overlay .lock-cta-full { width:280px; padding:14px; background:#fff; color:#000; border:none; border-radius:8px; font-size:14px; font-weight:500; cursor:pointer; font-family:var(--sans); transition:opacity .2s; }
.lock-overlay .lock-cta-full:hover { opacity:.9; }
.lock-overlay .lock-cta-sub { font-size:12px; color:#666; margin-top:8px; }

/* -- City Search Autocomplete -- */
.ob-city-search { position: relative; }
.ob-city-search input[type="text"] { width: 100%; }
.city-search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: var(--surface); border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; max-height: 220px; overflow-y: auto; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.city-search-results.show { display: block; }
.city-search-item { padding: 12px 16px; cursor: pointer; transition: background .15s; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--border); }
.city-search-item:last-child { border-bottom: none; }
.city-search-item:hover, .city-search-item.highlighted { background: var(--surface2); }
.city-search-item .csi-icon { font-size: 16px; flex-shrink: 0; color: var(--text3); }
.city-search-item .csi-name { font-size: 14px; color: var(--text1); font-family: var(--sans); }
.city-search-item .csi-detail { font-size: 11px; color: var(--text3); margin-top: 1px; }
.city-search-item .csi-badge { font-size: 10px; padding: 1px 6px; background: var(--surface3); border-radius: 3px; color: var(--text3); margin-left: auto; flex-shrink: 0; }
.city-search-loading { padding: 12px 16px; text-align: center; font-size: 12px; color: var(--text3); }
.city-search-selected { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; font-size: 13px; color: var(--text2); }
.city-search-selected .css-coords { color: var(--text3); font-size: 11px; }
.city-search-selected .css-clear { background: none; border: none; color: var(--text3); cursor: pointer; margin-left: auto; font-size: 16px; padding: 2px 4px; }
.city-search-selected .css-clear:hover { color: var(--text1); }

/* -- F27: PWA Install Banner -- */
.pwa-install-banner { position:fixed; bottom:56px; left:0; right:0; max-width:440px; margin:0 auto; z-index:9999; background:#111; border-top:1px solid #333; padding:12px 16px; display:flex; align-items:center; justify-content:space-between; animation:slideUp .3s ease; }
.pwa-install-banner .pib-text { font-size:15px; color:#fff; display:flex; align-items:center; gap:8px; }
.pwa-install-banner .pib-actions { display:flex; align-items:center; gap:8px; }
.pwa-install-banner .pib-install { padding:6px 16px; background:#fff; color:#000; border:none; border-radius:4px; font-size:13px; font-weight:500; cursor:pointer; font-family:var(--sans); }
.pwa-install-banner .pib-close { background:none; border:none; color:#666; font-size:18px; cursor:pointer; padding:4px; }
.guest-banner { margin: 0 24px 8px; padding: 10px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text2); }
.guest-banner a { color: var(--text1); font-weight: 600; text-decoration: underline; cursor: pointer; }

/* -- F28: Compat Share -- */
.compat-share-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:calc(100% - 48px); margin:8px 24px; padding:14px; background:transparent; border:1px solid var(--border); color:var(--text1); font-size:13px; font-family:var(--sans); cursor:pointer; transition:all .2s; letter-spacing:.03em; }
.compat-share-btn:hover { border-color:var(--text1); }
.compat-share-modal { position:fixed; inset:0; z-index:10002; background:rgba(0,0,0,.85); display:flex; flex-direction:column; align-items:center; justify-content:center; animation:fadeIn .3s ease; padding:24px; }
.compat-share-modal .csm-card { background:#111; padding:32px 24px; max-width:360px; width:100%; text-align:center; position:relative; border:1px solid #222; }
.compat-share-modal .csm-close { position:absolute; top:12px; right:16px; background:none; border:none; color:#666; font-size:20px; cursor:pointer; }
.compat-share-modal .csm-title { font-family:var(--serif); font-size:20px; color:#F5F5F0; margin-bottom:16px; font-weight:200; }
.compat-share-modal .csm-score { font-size:64px; font-weight:100; color:#F5F5F0; line-height:1; }
.compat-share-modal .csm-score-label { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#888; margin-top:4px; }
.compat-share-modal .csm-summary { font-size:14px; color:#888; line-height:1.8; margin-top:16px; text-align:left; }
.compat-share-modal .csm-cta { width:100%; padding:14px; background:#fff; color:#000; border:none; font-size:14px; font-weight:500; cursor:pointer; font-family:var(--sans); margin-top:24px; border-radius:8px; transition:opacity .2s; }
.compat-share-modal .csm-cta:hover { opacity:.9; }

/* -- F29: Referral System -- */
.referral-section { margin-top:12px; }
.referral-stats { display:flex; gap:12px; margin-top:8px; }
.referral-stat { flex:1; text-align:center; padding:12px; border:1px solid var(--border); }
.referral-stat .rs-num { font-size:40px; font-weight:100; color:var(--text1); font-family:var(--sans); }
.referral-stat .rs-label { font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text2); margin-top:4px; }
.referral-share-btns { display:flex; gap:8px; margin-top:8px; }
.referral-share-btn { flex:1; padding:10px; border:1px solid var(--border); background:transparent; color:var(--text1); font-size:11px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; font-family:var(--sans); transition:all .2s; }
.referral-share-btn:hover { border-color:var(--text1); }

/* -- F30: Data Management -- */
.data-mgmt-row { display:flex; align-items:center; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--border); cursor:pointer; transition:background .2s; }
.data-mgmt-row:hover { background:var(--surface); }
.data-mgmt-row .dmr-icon { font-size:16px; color:var(--text2); }
.data-restore-modal { position:fixed; inset:0; z-index:10002; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; animation:fadeIn .25s ease; padding:24px; }
.data-restore-modal .drm-card { background:#111; padding:32px 24px; max-width:360px; width:100%; border:1px solid #222; }
.data-restore-modal .drm-title { font-family:var(--serif); font-size:20px; color:#F5F5F0; margin-bottom:12px; }
.data-restore-modal .drm-desc { font-size:14px; color:#888; line-height:1.7; margin-bottom:16px; }
.data-restore-modal .drm-info { font-size:12px; color:#666; margin-bottom:20px; }
.data-restore-modal .drm-actions { display:flex; gap:8px; }
.data-restore-modal .drm-cancel { flex:1; padding:12px; background:transparent; border:1px solid #333; color:#888; font-size:14px; cursor:pointer; font-family:var(--sans); }
.data-restore-modal .drm-confirm { flex:1; padding:12px; background:#fff; color:#000; border:none; font-size:14px; font-weight:500; cursor:pointer; font-family:var(--sans); }

/* -- F31: Upsell -- */
.upsell-banner { margin:8px 24px; padding:14px 16px; background:#111; border-top:1px solid #222; border-bottom:1px solid #222; display:flex; align-items:center; justify-content:space-between; gap:12px; animation:slideUp .3s ease; }
.upsell-banner .ub-text { font-size:15px; color:#F5F5F0; line-height:1.5; flex:1; }
.upsell-banner .ub-cta { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#FFF; cursor:pointer; white-space:nowrap; background:none; border:none; font-family:var(--sans); padding:0; }
.upsell-banner .ub-close { background:none; border:none; color:#666; font-size:16px; cursor:pointer; padding:2px; flex-shrink:0; }
@keyframes bottomSheetIn { from { transform:translateY(100%); } to { transform:translateY(0); } }
@keyframes bottomSheetOut { from { transform:translateY(0); } to { transform:translateY(100%); } }
.upsell-bottomsheet { position:fixed; inset:0; z-index:10003; display:flex; flex-direction:column; justify-content:flex-end; }
.upsell-bottomsheet .ubs-overlay { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.upsell-bottomsheet .ubs-body { position:relative; background:#111; border-radius:16px 16px 0 0; padding:20px 24px 32px; animation:bottomSheetIn .35s ease; max-width:440px; margin:0 auto; width:100%; }
.upsell-bottomsheet .ubs-body.closing { animation:bottomSheetOut .3s ease forwards; }
.upsell-bottomsheet .ubs-handle { width:40px; height:4px; background:#333; border-radius:2px; margin:0 auto 20px; }
.upsell-bottomsheet .ubs-title { font-family:var(--serif); font-size:24px; color:#F5F5F0; margin-bottom:16px; }
.upsell-bottomsheet .ubs-feature { display:flex; align-items:flex-start; gap:10px; margin-bottom:12px; }
.upsell-bottomsheet .ubs-check { color:#fff; font-size:16px; flex-shrink:0; }
.upsell-bottomsheet .ubs-feat-text { font-size:14px; color:#CCC; line-height:1.5; }
.upsell-bottomsheet .ubs-cta { width:100%; padding:14px; background:#fff; color:#000; border:none; font-size:14px; font-weight:500; cursor:pointer; font-family:var(--sans); margin-top:16px; border-radius:8px; height:48px; transition:opacity .2s; }
.upsell-bottomsheet .ubs-cta:hover { opacity:.9; }
.upsell-bottomsheet .ubs-sub { font-size:13px; color:#666; text-align:center; margin-top:8px; }
.ai-upsell-banner { margin:0; padding:10px 14px; background:#0A0A0A; border:1px solid #222; display:flex; align-items:center; justify-content:space-between; gap:8px; animation:slideUp .3s ease; }
.ai-upsell-banner .aub-text { font-size:14px; color:#F5F5F0; flex:1; }
.ai-upsell-banner .aub-cta { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#FFF; cursor:pointer; background:none; border:none; font-family:var(--sans); white-space:nowrap; }
.ai-upsell-banner .aub-close { background:none; border:none; color:#666; font-size:16px; cursor:pointer; padding:2px; }

/* -- F32: Trial Expiration -- */
.trial-banner { margin:0 24px 8px; padding:10px 14px; background:#111; display:flex; align-items:center; gap:10px; animation:slideUp .3s ease; }
.trial-banner.d3 { border-left:3px solid #888; }
.trial-banner.d1 { border-left:3px solid #F5F5F0; background:#1A1A1A; }
.trial-banner .tb-content { flex:1; }
.trial-banner .tb-text { font-size:14px; color:#CCC; }
.trial-banner.d1 .tb-text { color:#F5F5F0; font-weight:bold; }
.trial-banner .tb-sub { font-size:13px; color:#888; margin-top:2px; }
.trial-banner .tb-cta { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#FFF; cursor:pointer; background:none; border:none; font-family:var(--sans); white-space:nowrap; margin-top:4px; padding:0; }
.trial-banner .tb-close { background:none; border:none; color:#666; font-size:16px; cursor:pointer; padding:2px; flex-shrink:0; }
.trial-expired-modal { position:fixed; inset:0; z-index:10002; background:rgba(0,0,0,.8); display:flex; align-items:center; justify-content:center; animation:fadeIn .3s ease; padding:24px; }
.trial-expired-modal .tem-card { background:#111; padding:32px; max-width:360px; width:100%; text-align:center; border:1px solid #222; border-radius:8px; }
.trial-expired-modal .tem-icon { font-size:48px; margin-bottom:16px; }
.trial-expired-modal .tem-title { font-family:var(--serif); font-size:24px; color:#F5F5F0; margin-bottom:12px; }
.trial-expired-modal .tem-desc { font-size:15px; color:#CCC; line-height:1.7; margin-bottom:24px; }
.trial-expired-modal .tem-cta { width:100%; padding:14px; background:#fff; color:#000; border:none; font-size:14px; font-weight:500; cursor:pointer; font-family:var(--sans); border-radius:8px; height:48px; transition:opacity .2s; }
.trial-expired-modal .tem-cta:hover { opacity:.9; }
.trial-expired-modal .tem-skip { display:block; margin-top:12px; font-size:13px; color:#666; text-decoration:underline; cursor:pointer; background:none; border:none; font-family:var(--sans); }

/* -- HOME -- */
/* Scroll top-edge decoration on home */
.home-header {
  padding: 16px 24px 8px;
  display: flex; justify-content: space-between; align-items: baseline;
  position: relative;
}
.home-header::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(180deg,
    rgba(139,115,85,0.12) 0%,
    rgba(139,115,85,0.06) 40%,
    transparent 100%);
  pointer-events: none;
}
.home-date { font-family: 'Noto Serif KR', Georgia, serif; font-size: 22px; font-weight: 200; letter-spacing: .03em; }
.home-date span { font-size: 13px; color: var(--text2); font-family: var(--sans); font-weight: 300; }
.home-settings { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text2); transition: color .2s; }
.home-settings:hover { color: var(--text1); }
.home-menu-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text2); transition: color .2s; position: relative; }
.home-menu-btn:hover { color: var(--text1); }
.sub-menu {
  display: none;
  position: absolute;
  top: 44px;
  right: 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15);
  z-index: 30;
  min-width: 200px;
  overflow: hidden;
}
.sub-menu.active { display: block; }
.sub-menu-item {
  padding: 13px 18px;
  font-size: 13px;
  color: var(--text1);
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background 0.15s;
}
.sub-menu-item:last-child { border-bottom: none; }
.sub-menu-item:hover, .sub-menu-item:active { background: var(--surface2); }
[data-theme="light"] .sub-menu { box-shadow: 0 8px 32px rgba(0,0,0,0.08); }

/* -- FORTUNE SUMMARY BLOCK (new home) -- */
.fortune-summary {
  margin: 0 24px 14px; padding: 12px 16px 10px;
  border: 1px solid var(--border); cursor: pointer; transition: background .2s; border-radius: 2px;
  background-image: radial-gradient(ellipse at 50% 0%, rgba(139,115,85,0.03) 0%, transparent 60%);
  position: relative;
}
.fortune-summary::before {
  content: '';position: absolute;top: 0;left: 0;right: 0;height: 1px;
  background: linear-gradient(90deg, transparent, rgba(199,62,29,0.2), transparent);
}
.fortune-summary:hover { background: var(--surface); }
.fortune-summary:active { background: var(--surface2); }
.fortune-summary .fs-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.fortune-summary .fs-title { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); margin-bottom: 4px; }
.fortune-summary .fs-link { font-size: 11px; color: var(--text3); letter-spacing: .02em; flex-shrink: 0; margin-left: 8px; }
.fortune-summary .fs-link:hover { color: var(--text1); }
.fortune-summary .fs-desc { font-size: 12px; color: var(--text2); line-height: 1.5; }
.fortune-summary .fs-scores { margin-bottom: 0; }

/* -- MAIN QUESTION SECTION -- */
@keyframes textareaPulse { 0%,100% { border-color: rgba(74,222,128,0.15); } 50% { border-color: rgba(74,222,128,0.35); } }
/* -- QUESTION PANEL (핵심 기능) -- */
.question-section { margin: 0 24px 14px; padding: 14px 16px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); position: relative; }
.question-section::before { content: ''; position: absolute; inset: -1px; border-radius: 15px; border: 1px solid transparent; background: linear-gradient(135deg, rgba(74,222,128,0.1), rgba(96,165,250,0.1), rgba(192,132,252,0.06)) border-box; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.question-section .qs-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.question-section .qs-title-group { display: flex; align-items: center; gap: 6px; }
.question-section .qs-title { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--text1); letter-spacing: -.02em; }
.question-section .qs-badges { display: flex; align-items: center; gap: 3px; }
.question-section .qs-badge { padding: 1px 6px; border-radius: 8px; font-size: 9px; font-weight: 500; letter-spacing: .01em; }
.question-section .qs-badge.saju { background: rgba(255,152,0,.1); color: #FF9800; }
.question-section .qs-badge.iching { background: rgba(76,175,80,.1); color: #4CAF50; }
.question-section .qs-badge.astro { background: rgba(124,58,237,.1); color: #7C3AED; }
.question-section .qs-badge.ai { background: rgba(96,165,250,.1); color: #60A5FA; }
.question-section .qs-input-wrap { position: relative; margin-bottom: 6px; }
.question-section textarea { width: 100%; min-height: 100px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; color: var(--text1); padding: 12px 44px 12px 14px; font-size: 14px; font-family: var(--sans); line-height: 1.7; outline: none; resize: none; transition: border-color .3s, box-shadow .3s; }
.question-section textarea:focus { border-color: var(--text2); box-shadow: 0 0 0 3px rgba(96,165,250,0.06); }
.question-section textarea::placeholder { color: var(--text3); font-size: 13px; line-height: 1.7; }
.question-section .qs-charcount { position: absolute; bottom: 6px; right: 10px; font-size: 9px; color: var(--text3); opacity: 0; transition: opacity .2s; pointer-events: none; }
.question-section textarea:focus ~ .qs-charcount { opacity: 1; }
.keyword-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-bottom: 8px; }
.keyword-chip { padding: 5px 0; border: 1px solid var(--border); background: var(--bg); color: var(--text2); font-size: 11px; cursor: pointer; font-family: var(--sans); white-space: nowrap; transition: all .2s; border-radius: 14px; line-height: 1.3; text-align: center; }
.keyword-chip:hover { border-color: var(--text2); color: var(--text1); background: var(--surface2); }
.keyword-chip:active { transform: scale(.96); }
.question-cta { width: 100%; padding: 11px; background: linear-gradient(135deg, var(--text1) 0%, #333 100%); color: var(--bg); border: none; border-radius: 10px; font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; letter-spacing: .03em; transition: all .3s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.question-cta:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.question-cta:active { transform: translateY(0); }
.question-cta.disabled { opacity: .35; cursor: not-allowed; transform: none; box-shadow: none; }
/* Voice input button */
.qs-voice-btn { position: absolute; right: 8px; top: 10px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface); color: var(--text3); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s; font-size: 14px; padding: 0; }
.qs-voice-btn:hover { border-color: var(--text2); color: var(--text1); }
.qs-voice-btn.recording { border-color: #EF4444; color: #EF4444; background: rgba(239,68,68,.08); animation: voicePulse 1.2s ease-in-out infinite; }
@keyframes voicePulse { 0%,100% { box-shadow: 0 0 0 0 rgba(239,68,68,.3); } 50% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } }
.qs-voice-status { font-size: 10px; color: #EF4444; text-align: center; margin-top: 2px; animation: fadeIn .3s; }
/* Content action bar (복사 · 공유) */
.content-actions { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding: 8px 0 4px; margin-top: 8px; border-top: 1px solid var(--border); }
.content-action-btn { display: flex; align-items: center; gap: 4px; background: none; border: none; color: var(--text3); font-size: 11px; font-family: var(--sans); cursor: pointer; padding: 4px 2px; transition: color .2s; }
.content-action-btn:hover { color: var(--text1); }
.content-action-btn svg { width: 14px; height: 14px; }
[data-theme="light"] .question-section textarea { background: #fff; }
[data-theme="light"] .keyword-chip { background: #fff; }
[data-theme="light"] .question-cta { background: linear-gradient(135deg, #1a1a1a 0%, #333 100%); }

/* -- ANALYSIS RESULT SCREEN -- */
.congruence-header { padding: 24px 24px 16px; text-align: center; }
.congruence-header.dir-positive { background: linear-gradient(180deg, rgba(74,222,128,0.06) 0%, transparent 100%); }
.congruence-header.dir-caution { background: linear-gradient(180deg, rgba(251,191,36,0.06) 0%, transparent 100%); }
.congruence-header.dir-neutral { background: linear-gradient(180deg, rgba(148,163,184,0.06) 0%, transparent 100%); }
.congruence-header .ch-direction-label { font-size: 22px; font-weight: 700; font-family: var(--sans); margin-bottom: 4px; letter-spacing: -.02em; }
.congruence-header .ch-direction-label.positive { color: #4ADE80; }
.congruence-header .ch-direction-label.caution { color: #FBBF24; }
.congruence-header .ch-direction-label.neutral { color: var(--text2); }
.congruence-header .ch-confidence { font-size: 11px; color: var(--text3); margin-top: 2px; }
.congruence-score { font-family: 'Noto Serif KR', Georgia, serif; font-size: 72px; font-weight: 200; color: var(--text1); line-height: 1; }
.congruence-label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); margin-top: 4px; }
.congruence-badge { display: inline-block; padding: 4px 16px; margin-top: 12px; font-size: 12px; letter-spacing: .05em; border: 1px solid var(--border); }
.congruence-badge.positive { border-color: #4CAF50; color: #4CAF50; }
.congruence-badge.neutral { border-color: var(--text2); color: var(--text2); }
.congruence-badge.caution { border-color: #FF9800; color: #FF9800; }
.confidence-note { font-size: 11px; color: var(--text3); margin-top: 8px; }
.analysis-result-section { padding: 20px 24px; border-top: 1px solid var(--border); }
.analysis-result-section .ars-title { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--text1); margin-bottom: 12px; }
.analysis-result-section .ars-text { font-size: 14px; color: var(--text2); line-height: 1.8; }
.action-plan { padding: 20px 24px; border-top: 1px solid var(--border); }
.action-plan .ap-title { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--text1); margin-bottom: 16px; }
.action-plan-item { padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text2); line-height: 1.6; }
.action-plan-item .ap-period { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text1); margin-bottom: 4px; }
.analysis-ask-btn { margin: 20px 24px 100px; padding: 16px; border: 1px solid var(--border); background: transparent; color: var(--text1); font-size: 14px; cursor: pointer; font-family: var(--sans); text-align: center; transition: background .3s; width: calc(100% - 48px); }
.analysis-ask-btn:hover { background: var(--surface); }

/* -- OLD FORTUNE GRID (removed, kept for detail page) -- */
.fortune-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; background: var(--border); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.fortune-block { padding: 14px 12px; cursor: pointer; position: relative; transition: background .2s; background: var(--bg); text-align: center; }
.fortune-block:hover { background: var(--surface); }
.fortune-block:active { background: var(--surface2); }
.fortune-block .f-label { font-family: var(--sans); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); margin-bottom: 4px; }
.fortune-block .f-score { font-family: var(--sans); font-size: 32px; font-weight: 200; line-height: 1.2; color: var(--text1); }
.fortune-block .f-bar { margin-top: 6px; height: 3px; background: var(--border); border-radius: 2px; position: relative; overflow: hidden; }
.fortune-block .f-bar-fill { height: 3px; border-radius: 2px; transition: width 1.2s cubic-bezier(.4,0,.2,1); }
.fortune-block .f-bar-fill.score-great { background: #B388FF; }
.fortune-block .f-bar-fill.score-good { background: #87CEEB; }
.fortune-block .f-bar-fill.score-mid { background: #98E8C1; }
.fortune-block .f-bar-fill.score-warn { background: #E8D5B7; }
.fortune-block .f-bar-fill.score-low { background: #F8A4B8; }

.energy-section { padding: 0 24px; margin-bottom: 14px; }
.energy-panel { margin: 0 20px 14px; padding: 16px 14px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; cursor: pointer; transition: background .2s; overflow: hidden; }
.energy-panel:hover { background: var(--surface2); }
.energy-panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.energy-panel-header .section-label { padding: 0; margin: 0; flex: 1; }
.energy-panel-more { font-size: 12px; color: var(--text2); white-space: nowrap; flex-shrink: 0; margin-left: 8px; }
.energy-panel .energy-scroll { padding-bottom: 0; gap: 8px; }
.energy-panel .energy-card { background: var(--surface2); border-color: var(--border); cursor: pointer; padding: 10px 8px; gap: 6px; overflow: hidden; }
.energy-panel .energy-card:hover { background: var(--surface3); }
.section-label { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); padding: 0 24px; margin-bottom: 16px; }
.energy-scroll { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 0 16px; }
.energy-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 14px; transition: background .2s; cursor: default; }
.energy-card:hover { background: var(--surface2); }
.energy-card.ec-full { grid-column: 1 / -1; }
.ec-gauge { position: relative; width: 42px; height: 42px; flex-shrink: 0; }
.ec-gauge svg { width: 42px; height: 42px; transform: rotate(-90deg); }
.ec-gauge-bg { fill: none; stroke: var(--border); stroke-width: 4; }
.ec-gauge-fill { fill: none; stroke-width: 4; stroke-linecap: round; transition: stroke-dashoffset .8s ease; }
.ec-gauge-val { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; font-family: var(--sans); }
.ec-info { flex: 1; min-width: 0; }
.ec-info .ec-name { font-size: 11px; letter-spacing: .04em; font-weight: 600; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ec-info .ec-desc { font-size: 12px; color: var(--text2); line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.share-preview { padding: 0 24px; margin-bottom: 14px; }
.share-thumb { width: 100%; aspect-ratio: 1; background: #0A0A0A; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; cursor: pointer; transition: opacity .2s; }
.share-thumb:hover { opacity: .9; }
.share-thumb:active { opacity: .8; }
.share-thumb .st-brand { font-size: 10px; letter-spacing: .2em; color: #555; position: absolute; top: 20px; left: 20px; }
.share-thumb .st-hanja { font-family: var(--serif); font-size: 100px; font-weight: 900; color: #F5F5F0; }
.share-thumb .st-sub { font-size: 14px; color: #888; margin-top: 8px; }
.share-thumb .st-date { font-size: 11px; color: #555; position: absolute; bottom: 20px; left: 20px; }
.share-thumb .st-wm { font-size: 9px; color: #333; position: absolute; bottom: 20px; right: 20px; letter-spacing: .05em; }
.share-format-btns { display: flex; gap: 8px; margin-top: 12px; }
.share-fmt-btn { flex: 1; padding: 10px; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 12px; cursor: pointer; font-family: var(--sans); transition: all .3s; text-align: center; }
.share-fmt-btn:hover { border-color: var(--text2); }
.share-fmt-btn:active { background: var(--surface3); }
.share-fmt-btn.selected { border-color: var(--text1); color: var(--text1); background: var(--surface2); }
.share-btns { display: flex; gap: 12px; margin-top: 12px; }
.share-btn { flex: 1; padding: 12px; border: 1px solid var(--border); background: transparent; color: var(--text1); font-size: 13px; cursor: pointer; font-family: var(--sans); transition: all .3s; }
.share-btn:hover { background: var(--surface); }
.share-btn:active { background: var(--surface2); }

/* -- 소셜 공유 버튼 -- */
.share-social-btns { display: flex; gap: 8px; margin-top: 12px; }
.share-social-btn { flex: 1; padding: 10px; border: none; border-radius: 4px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: var(--sans); transition: opacity .2s; display: flex; align-items: center; justify-content: center; gap: 6px; }
.share-social-btn:hover { opacity: .85; }
.share-social-btn.kakao { background: #FEE500; color: #000; }
.share-social-btn.twitter { background: #000; color: #fff; border: 1px solid #333; }
.share-social-btn.copy-link { background: var(--surface2); color: var(--text1); border: 1px solid var(--border); }

/* -- 친구 궁합 비교 -- */
.friend-compare { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.fc-title { font-family: var(--serif); font-size: 15px; font-weight: 400; margin-bottom: 14px; }
.fc-input-row { display: flex; gap: 8px; margin-bottom: 14px; }
.fc-input { flex: 1; padding: 10px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; color: var(--text1); font-size: 13px; font-family: var(--sans); outline: none; }
.fc-input::placeholder { color: var(--text3); }
.fc-btn { width: 100%; padding: 12px; background: var(--text1); color: var(--bg); border: none; font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--sans); border-radius: 4px; transition: opacity .2s; }
.fc-btn:hover { opacity: .85; }
.fc-result { margin-top: 16px; }
.fc-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; text-align: center; margin-bottom: 16px; }
.fc-person { padding: 14px; background: var(--surface2); border-radius: 8px; }
.fc-person-label { font-size: 11px; color: var(--text2); margin-bottom: 4px; }
.fc-person-score { font-size: 28px; font-weight: 200; font-family: var(--serif); }
.fc-vs-text { font-size: 14px; color: var(--text3); font-weight: 700; }
.fc-compat { padding: 14px; background: var(--surface2); border-radius: 8px; text-align: center; }
.fc-compat-label { font-size: 11px; color: var(--text2); margin-bottom: 6px; }
.fc-compat-pct { font-size: 24px; font-weight: 200; font-family: var(--serif); }
.fc-compat-desc { font-size: 12px; color: var(--text2); margin-top: 6px; line-height: 1.5; }

/* -- 분석 결과 공유 버튼 -- */
.analysis-share-btn { width: 100%; padding: 14px; margin-top: 16px; background: var(--surface2); border: 1px solid var(--border); color: var(--text1); font-size: 13px; cursor: pointer; font-family: var(--sans); border-radius: 4px; transition: all .2s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.analysis-share-btn:hover { background: var(--surface3); }

.gua-banner { margin: 0 24px 6px; padding: 10px 16px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: background .2s; }
.gua-banner:hover { background: var(--surface); }
.gua-banner:active { background: var(--surface2); }

/* -- FORTUNE DETAIL -- */
.detail-header { padding: 16px 24px; display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--border); }
.detail-back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text1); background: none; border: none; font-size: 20px; transition: opacity .2s; }
.detail-back:hover { opacity: .7; }
.detail-back:active { opacity: .5; }
.detail-score { font-family: 'Noto Serif KR', Georgia, serif; font-size: 80px; font-weight: 200; color: var(--text1); padding: 32px 24px 24px; line-height: 1; }
.detail-score span { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); margin-bottom: 8px; font-weight: 400; }
.analysis-section { padding: 24px; border-top: 1px solid var(--border); }
.analysis-section .as-title { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--text1); margin-bottom: 16px; }
.analysis-section .as-text { font-size: 14px; color: var(--text2); line-height: 1.8; }
.analysis-actions { list-style: none; padding: 0; margin-top: 16px; }
.analysis-actions li { padding: 8px 0; font-size: 13px; color: var(--text2); line-height: 1.6; border-bottom: 1px solid var(--border); }
.analysis-actions li::before { content: attr(data-n); font-family: var(--serif); font-size: 18px; font-weight: 200; color: var(--text1); margin-right: 12px; }
.premium-lock { position: relative; }
.premium-lock .lock-overlay { position: absolute; inset: 0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); background: rgba(0,0,0,.6); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 5; }
.lock-overlay .lock-title { font-family: var(--serif); font-size: 20px; color: var(--text1); margin-bottom: 8px; }
.lock-overlay .lock-sub { font-size: 12px; color: var(--text2); margin-bottom: 20px; }
.lock-overlay .lock-btn { padding: 12px 32px; background: var(--text1); color: var(--bg); border: none; font-size: 13px; cursor: pointer; font-family: var(--sans); letter-spacing: .05em; transition: opacity .2s; }
.lock-overlay .lock-btn:hover { opacity: .9; }
.lock-overlay .lock-btn:active { opacity: .8; }
.detail-ai-btn { margin: 0 24px 100px; padding: 16px; border: 1px solid var(--border); background: transparent; color: var(--text1); font-size: 14px; cursor: pointer; font-family: var(--sans); text-align: center; transition: background .3s; }
.detail-ai-btn:hover { background: var(--surface); }
.detail-ai-btn:active { background: var(--surface2); }

/* -- TIMELINE -- */
.tl-section-label {
  font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); padding: 24px 24px 12px;
  position: relative;
}
.tl-section-label::before {
  content: '';position: absolute;top: 16px;left: 24px;right: 24px;height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,115,85,0.1), transparent);
}
.daeun-scroll { display: flex; gap: 0; overflow-x: auto; padding: 0 24px 24px; scrollbar-width: none; }
.daeun-scroll::-webkit-scrollbar { display: none; }
.daeun-block { min-width: 100px; padding: 16px 12px; border: 1px solid var(--border); border-right: none; display: flex; flex-direction: column; align-items: center; gap: 8px; flex-shrink: 0; position: relative; transition: background .2s; }
.daeun-block:last-child { border-right: 1px solid var(--border); }
.daeun-block:hover { background: var(--surface); }
.daeun-block.current { border-color: var(--text1); background: var(--surface2); }
.daeun-block .db-age { font-size: 10px; color: var(--text2); }
.daeun-block .db-ganji { font-family: var(--serif); font-size: 20px; font-weight: 400; }
.daeun-block .db-oh { font-size: 10px; color: var(--text2); letter-spacing: .05em; }
/* db-badge: see Modification 2 block below */

.seun-chart { padding: 0 24px 24px; }
.seun-bars { display: flex; align-items: flex-end; gap: 4px; height: 120px; position: relative; }
.seun-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; position: relative; }
.seun-bar { width: 100%; border-radius: 1px 1px 0 0; transition: height .8s ease; }
.seun-bar.good { background: var(--text1); }
.seun-bar.normal { background: var(--text2); }
.seun-bar.bad { background: #333; }
.seun-year { font-size: 9px; color: var(--text2); margin-top: 6px; }
.seun-ganji { font-size: 9px; color: var(--text3); }
.seun-today { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text1); z-index: 2; }
/* seun-today::after defined in Modification 2 block */

/* -- AI CHAT -- */
.chat-wrap { flex: 1; display: flex; flex-direction: column; padding-bottom: 140px; }
.chat-messages { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 12px; }
.chat-bubble { max-width: 82%; padding: 14px 18px; font-size: 14px; line-height: 1.7; animation: slideUp .3s ease; }
.chat-bubble.ai { align-self: flex-start; border-radius: 2px 16px 16px 16px; }
.chat-bubble.user { align-self: flex-end; border-radius: 16px 2px 16px 16px; }
.chat-typing { align-self: flex-start; padding: 14px 24px; }
.chat-typing span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--text2); margin: 0 2px; animation: pulse3 1.2s infinite; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
.typing-indicator { max-width: 82%; }
.typing-dots { display: flex; gap: 4px; padding: 4px 0; }
.typing-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text2);
  animation: typingPulse 1.2s infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes typingPulse {
  0%,60%,100% { opacity: 0.3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-4px); }
}
.chat-chips { display: flex; gap: 8px; overflow-x: auto; padding: 8px 24px; scrollbar-width: none; }
.chat-chips::-webkit-scrollbar { display: none; }
.chat-chip { flex-shrink: 0; padding: 8px 16px; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 12px; cursor: pointer; font-family: var(--sans); white-space: nowrap; transition: all .3s; }
.chat-chip:hover { border-color: var(--text2); color: var(--text1); }
.chat-chip:active { background: var(--surface2); color: var(--text1); }
.chat-input-wrap { position: fixed; bottom: 56px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 440px; padding: 12px 24px; background: var(--bg); border-top: 1px solid var(--border); display: flex; gap: 12px; z-index: 20; }
.chat-input { flex: 1; background: var(--surface2); border: 1px solid var(--border); color: var(--text1); padding: 12px 16px; font-size: 14px; font-family: var(--sans); outline: none; transition: border-color .3s; }
.chat-input:focus { border-color: var(--text2); }
.chat-input::placeholder { color: var(--text3); }
.chat-send { width: 44px; background: var(--text1); color: var(--bg); border: none; font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.chat-send:hover { opacity: .9; }
.chat-send:active { opacity: .7; }

/* ═══ VOICE CHAT MODE ═══ */
.vc-mode-btn { width:36px; background:transparent; border:1px solid var(--border); color:var(--text3); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius:4px; transition:all .3s; }
.vc-mode-btn:hover { border-color:var(--gold); color:var(--gold); }
.vc-mode-btn.active { background:var(--gold); color:#fff; border-color:var(--gold); animation:vc-pulse 2s ease-in-out infinite; }
@keyframes vc-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(200,169,126,.4)} 50%{box-shadow:0 0 0 6px rgba(200,169,126,0)} }
.vc-status { display:flex; align-items:center; justify-content:center; gap:8px; padding:8px 16px; background:var(--surface2); border-top:1px solid var(--border); position:fixed; bottom:102px; left:0; right:0; z-index:21; max-width:650px; margin:0 auto; }
.vc-dot { width:10px; height:10px; border-radius:50%; }
.vc-dot.vc-listening { background:#4CAF50; animation:vc-dot-blink 1.2s ease-in-out infinite; }
.vc-dot.vc-thinking { background:var(--gold); animation:vc-dot-spin .8s linear infinite; }
.vc-dot.vc-speaking { background:#2196F3; animation:vc-dot-blink .6s ease-in-out infinite; }
@keyframes vc-dot-blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes vc-dot-spin { 0%{transform:scale(1)} 50%{transform:scale(1.4)} 100%{transform:scale(1)} }
.vc-label { font-size:13px; color:var(--text2); font-weight:500; }
.vc-stop-btn { padding:4px 12px; font-size:12px; background:transparent; border:1px solid var(--text3); color:var(--text2); border-radius:12px; cursor:pointer; transition:all .2s; }
.vc-stop-btn:hover { border-color:#e74c3c; color:#e74c3c; }
.vc-skip-btn { padding:4px 12px; font-size:12px; background:transparent; border:1px solid var(--gold); color:var(--gold); border-radius:12px; cursor:pointer; transition:all .2s; }
.vc-skip-btn:hover { background:var(--gold); color:#fff; }
.chat-input-wrap.voice-mode .chat-input { opacity:.5; pointer-events:none; }
.chat-input-wrap.voice-mode .chat-send { opacity:.5; pointer-events:none; }
.chat-input-wrap.voice-mode .chat-voice-btn { opacity:.5; pointer-events:none; }
.ai-provider-badge { font-size:11px; padding:2px 8px; border-radius:10px; background:var(--surface2); color:var(--text3); border:1px solid var(--border); margin-left:auto; margin-right:8px; white-space:nowrap; }

/* -- NATAL CHART -- */
.chart-container { padding: 24px; display: flex; flex-direction: column; align-items: center; }
.chart-container svg { max-width: 340px; width: 100%; }
.planet-list { width: 100%; margin-top: 24px; }
.planet-row { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .2s; }
.planet-row:hover { background: var(--surface); }
.planet-row:active { background: var(--surface2); }
.planet-row .pr-glyph { width: 32px; font-size: 18px; text-align: center; color: var(--text1); }
.planet-row .pr-name { flex: 1; font-size: 13px; color: var(--text2); }
.planet-row .pr-deg { font-size: 12px; color: var(--text3); }
.planet-row .pr-zodiac { font-size: 13px; color: var(--text1); margin-left: 12px; }

/* -- SAJU TABLE -- */
.saju-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 24px; border: 1px solid var(--border); }
.saju-col { text-align: center; padding: 20px 8px; border-right: 1px solid var(--border); }
.saju-col:last-child { border-right: none; }
.saju-col.highlight { background: var(--surface2); }
.saju-col .sc-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); margin-bottom: 12px; }
.saju-col .sc-hanja { font-family: var(--serif); font-size: 28px; font-weight: 700; }
.saju-col .sc-kr { font-size: 10px; color: var(--text2); margin-top: 4px; }
.saju-col .sc-div { width: 24px; height: 1px; background: var(--border); margin: 10px auto; }
.oh-balance { padding: 0 24px 24px; }
.oh-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.oh-row .or-label { width: 32px; font-size: 12px; color: var(--text2); }
.oh-row .or-bar { flex: 1; height: 3px; background: var(--border); }
.oh-row .or-fill { height: 3px; transition: width .8s ease; }
.oh-row .or-count { width: 20px; font-size: 12px; color: var(--text2); text-align: right; }

/* -- SETTINGS -- */
.settings-section { padding: 0 24px; }
.settings-header { padding: 24px; display: flex; align-items: center; gap: 16px; }
.settings-avatar { width: 56px; height: 56px; border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 24px; }
.settings-group { border-top: 1px solid var(--border); padding: 20px 0; }
.settings-group .sg-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text2); margin-bottom: 16px; }
.settings-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; }
.settings-row .sr-left { font-size: 14px; color: var(--text1); }
.settings-row .sr-right { font-size: 13px; color: var(--text2); }
.settings-link { font-size: 12px; color: var(--text2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; transition: color .2s; border: none; background: none; font-family: var(--sans); padding: 0; }
.settings-link:hover { color: var(--text1); }
.toggle-switch { width: 44px; height: 24px; border-radius: 12px; background: var(--border); position: relative; cursor: pointer; transition: background .3s; }
.toggle-switch.on { background: var(--text1); }
.toggle-switch .toggle-knob { width: 20px; height: 20px; border-radius: 50%; background: var(--bg); position: absolute; top: 2px; left: 2px; transition: transform .3s; }
.toggle-switch.on .toggle-knob { transform: translateX(20px); }
.settings-btn { width: 100%; padding: 14px; border: 1px solid var(--border); background: transparent; color: var(--text1); font-size: 14px; cursor: pointer; margin-top: 8px; font-family: var(--sans); transition: all .3s; }
.settings-btn:hover { background: var(--surface); }
.settings-btn:active { background: var(--surface2); }
.settings-danger { color: #888; font-size: 12px; text-align: center; padding: 24px 0 100px; cursor: pointer; transition: color .2s; }
.settings-danger:hover { color: var(--text1); }
.api-input-wrap { display: flex; gap: 8px; margin-top: 8px; }
.api-input { flex: 1; background: var(--surface2); border: 1px solid var(--border); color: var(--text1); padding: 10px 12px; font-size: 12px; font-family: var(--sans); outline: none; }
.api-input::placeholder { color: var(--text3); }
.api-mode-badge { display: inline-block; font-size: 10px; letter-spacing: .05em; padding: 2px 8px; margin-left: 8px; }
.api-mode-badge.demo { background: var(--border); color: var(--text2); }
.api-mode-badge.api { background: var(--text1); color: var(--bg); }

/* -- SUBSCRIPTION -- */
.sub-header { padding: 32px 24px; text-align: center; }
.sub-header h2 { font-family: var(--serif); font-size: 24px; font-weight: 200; }
.sub-trial { margin: 0 24px; padding: 20px; background: var(--text1); color: var(--bg); text-align: center; }
.sub-trial .st-title { font-size: 15px; font-weight: 500; }
.sub-trial .st-sub { font-size: 12px; opacity: .7; margin-top: 4px; }
.plan-card { margin: 12px 24px; padding: 20px; border: 1px solid var(--border); cursor: pointer; transition: all .3s; position: relative; }
.plan-card:hover { border-color: var(--text2); }
.plan-card.selected { border-color: var(--text1); }
.plan-card .pc-badge { position: absolute; top: -1px; right: 16px; font-size: 9px; padding: 3px 8px; background: var(--text1); color: var(--bg); letter-spacing: .05em; }
.plan-card .pc-name { font-size: 15px; font-weight: 500; }
.plan-card .pc-price { font-family: var(--sans); font-size: 28px; font-weight: 100; margin: 8px 0; }
.plan-card .pc-desc { font-size: 12px; color: var(--text2); line-height: 1.6; }
.feature-compare { margin: 16px 24px; border: 1px solid var(--border); }
.fc-header { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; padding: 12px 8px; border-bottom: 1px solid var(--border); }
.fc-header span { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text2); text-align: center; }
.fc-header span:first-child { text-align: left; }
.fc-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; padding: 10px 8px; border-bottom: 1px solid var(--border); }
.fc-row:last-child { border-bottom: none; }
.fc-row span { font-size: 12px; text-align: center; color: var(--text2); }
.fc-row span:first-child { text-align: left; color: var(--text1); }
.fc-row .fc-yes { color: var(--text1); }
.fc-row .fc-no { color: var(--text3); }
.sub-cta { margin: 24px; padding: 16px; background: var(--text1); color: var(--bg); border: none; width: calc(100% - 48px); font-size: 15px; font-weight: 500; cursor: pointer; font-family: var(--sans); transition: opacity .2s; }
.sub-cta:hover { opacity: .9; }
.sub-cta:active { opacity: .8; }
.sub-fine { text-align: center; font-size: 11px; color: var(--text3); padding: 8px 0 100px; }

/* -- TAB NAV (4 tabs) -- */
.tab-nav {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 440px; height: 56px; background: var(--bg); border-top: 1px solid var(--border); display: flex; z-index: 50;
}
/* Scroll bottom-edge decoration above tab bar */
.tab-nav::before {
  content: '';
  position: absolute;
  top: -8px; left: 0; right: 0; height: 8px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(139,115,85,0.06) 30%,
    rgba(139,115,85,0.12) 60%,
    rgba(139,115,85,0.04) 100%);
  pointer-events: none;
}
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; color: #444; transition: color .3s; background: none; border: none; font-family: var(--sans); }
.tab-item:hover { color: var(--text2); }
.tab-item.active { color: var(--text1); }
.tab-item svg { width: 20px; height: 20px; }
.tab-item .tab-label { font-size: 9px; letter-spacing: .05em; }

/* -- BOTTOM SHEET -- */
.bottom-sheet { position: fixed; inset: 0; z-index: 100; display: none; }
.bottom-sheet.open { display: flex; flex-direction: column; justify-content: flex-end; }
.bs-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.bs-content { position: relative; background: var(--surface); max-height: 85vh; z-index: 1; animation: slideUp .35s ease; display: flex; flex-direction: column; overflow: hidden; }
.bs-header { display: flex; justify-content: flex-end; align-items: center; padding: 10px 12px 0; flex-shrink: 0; }
.bs-close { background: none; border: none; color: var(--text2); font-size: 24px; cursor: pointer; transition: color .2s; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.bs-close:hover { color: var(--text1); }
.bs-body { overflow-y: auto; -webkit-overflow-scrolling: touch; flex: 1; padding: 0 24px 24px; }

/* -- PLANET POPUP -- */
.planet-popup { padding: 24px; text-align: center; }
.planet-popup .pp-glyph { font-size: 48px; margin-bottom: 12px; }
.planet-popup .pp-name { font-family: var(--serif); font-size: 22px; margin-bottom: 16px; }
.planet-popup .pp-info { font-size: 14px; color: var(--text2); line-height: 1.8; text-align: left; }
.planet-popup .pp-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.planet-popup .pp-row span:first-child { color: var(--text2); }
.planet-popup .pp-row span:last-child { color: var(--text1); }

/* -- PRINT LAYOUT -- */
@media print {
  body {
    max-width: 100%;
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  * { color-adjust: exact !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
  .tab-nav, .detail-ai-btn, .chat-input-wrap, .bottom-sheet { display: none !important; }
  .screen { display: none !important; min-height: auto; page-break-inside: avoid; }
  #print-report { display: block !important; }
  @page { size: A4; margin: 15mm; }
  .print-page { page-break-after: always; padding: 0; min-height: 250mm; }
  .print-page:last-child { page-break-after: avoid; }
  .print-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 250mm; text-align: center; }
  .print-cover .pc-brand { font-family: Georgia, serif; font-size: 36px; font-weight: 200; letter-spacing: .15em; margin-bottom: 24px; }
  .print-cover .pc-name { font-size: 28px; margin-top: 80px; }
  .print-cover .pc-info { font-size: 14px; color: #888; margin-top: 8px; }
  .print-section-title { font-family: Georgia, serif; font-size: 20px; font-weight: 400; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 20px; }
  .print-saju-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid #ccc; margin: 16px 0; }
  .print-saju-col { text-align: center; padding: 16px 8px; border-right: 1px solid #ccc; }
  .print-saju-col:last-child { border-right: none; }
  .print-saju-col .psc-label { font-size: 10px; color: #888; text-transform: uppercase; margin-bottom: 8px; }
  .print-saju-col .psc-hanja { font-family: Georgia, serif; font-size: 28px; font-weight: bold; }
  .print-saju-col .psc-kr { font-size: 10px; color: #888; margin-top: 4px; }
  .print-oh-bar { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
  .print-oh-bar .pob-label { width: 40px; font-size: 12px; }
  .print-oh-bar .pob-bar { flex: 1; height: 16px; background: #eee; }
  .print-oh-bar .pob-fill { height: 16px; background: #333; }
  .print-oh-bar .pob-count { width: 20px; text-align: right; font-size: 12px; }
  .print-fortune-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 16px 0; }
  .print-fortune-item { border: 1px solid #ccc; padding: 16px; }
  .print-fortune-item .pfi-label { font-size: 10px; text-transform: uppercase; color: #888; }
  .print-fortune-item .pfi-score { font-size: 36px; font-weight: 100; margin: 8px 0; }
  .print-fortune-item .pfi-text { font-size: 11px; color: #666; line-height: 1.6; }
  .print-daeun-row { display: flex; gap: 0; margin: 16px 0; flex-wrap: wrap; }
  .print-daeun-block { width: 12.5%; border: 1px solid #ccc; border-right: none; padding: 8px 4px; text-align: center; font-size: 11px; }
  .print-daeun-block:last-child { border-right: 1px solid #ccc; }
  .print-daeun-block.cur { background: #f0f0f0; font-weight: bold; }
}
#print-report { display: none; }

::-webkit-scrollbar { width: 0; height: 0; }

/* === Phase 2: Typography Hierarchy System === */
.text-pro { font-size: 12px; color: var(--text3); line-height: 1.6; letter-spacing: 0.02em; }
.text-easy { font-size: 14px; color: var(--text1); line-height: 1.85; }
.text-accent { color: #FFFFFF; font-weight: 700; }
[data-theme="light"] .text-accent { color: #0A0A0A; }
.text-positive { color: #4ADE80; font-weight: 600; }
.text-caution { color: #FBBF24; font-weight: 600; }
.text-danger { color: #F87171; font-weight: 600; }
.oh-mok { color: #4CAF50; font-weight: 600; }
.oh-hwa { color: #F44336; font-weight: 600; }
.oh-to { color: #FF9800; font-weight: 600; }
.oh-geum { color: #BDBDBD; font-weight: 600; }
.oh-su { color: #2196F3; font-weight: 600; }
.gua-name { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--text1); }
.section-divider { height: 1px; background: var(--border); margin: 20px 0; }
.action-item { display: flex; align-items: flex-start; gap: 8px; padding: 8px 0; }
.action-dot { width: 6px; height: 6px; border-radius: 50%; margin-top: 7px; flex-shrink: 0; }

/* Circular Gauge */
.congruence-gauge { position: relative; width: 140px; height: 140px; margin: 0 auto 12px; }
.congruence-gauge svg { width: 140px; height: 140px; transform: rotate(-90deg); }
.congruence-gauge .gauge-bg { fill: none; stroke: var(--border); stroke-width: 6; }
.congruence-gauge .gauge-fill { fill: none; stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1.2s ease; }
.congruence-gauge .gauge-fill.positive { stroke: #4ADE80; filter: drop-shadow(0 0 6px rgba(74,222,128,0.3)); }
.congruence-gauge .gauge-fill.caution { stroke: #FBBF24; filter: drop-shadow(0 0 6px rgba(251,191,36,0.3)); }
.congruence-gauge .gauge-fill.neutral { stroke: #94A3B8; }
.congruence-gauge .gauge-value { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.congruence-gauge .gauge-pct { font-family: var(--sans); font-size: 36px; font-weight: 100; color: var(--text1); }
.congruence-gauge .gauge-sub { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); margin-top: 2px; }
.congruence-interp { font-size: 13px; color: var(--text2); text-align: center; margin-top: 8px; line-height: 1.6; }

/* Analysis result sections - Phase 2 */
.ars-section { padding: 20px 24px; border-top: 1px solid var(--border); }
.ars-section .ars-icon-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.ars-section .ars-icon-title .ars-icon { font-size: 18px; }
.ars-section .ars-icon-title .ars-title { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--text1); }

/* Cross analysis boxes */
.cross-box { border-radius: 8px; padding: 14px 16px; margin-bottom: 10px; }
.cross-box.agree { border: 1px solid rgba(74,222,128,.25); background: rgba(74,222,128,.05); }
.cross-box.warn { border: 1px solid rgba(251,191,36,.25); background: rgba(251,191,36,.05); }
.cross-item { display: flex; align-items: flex-start; gap: 8px; padding: 5px 0; font-size: 13px; line-height: 1.6; }
.cross-item .ci-mark { flex-shrink: 0; margin-top: 2px; }

/* Action plan Phase 2 */
.ap2-month { padding: 16px 0; border-bottom: 1px solid var(--border); }
.ap2-month:last-child { border-bottom: none; }
.ap2-month-header { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.ap2-month-label { font-size: 14px; font-weight: 700; color: var(--text1); }
.ap2-month-phase { font-size: 11px; color: var(--text2); letter-spacing: .05em; }
.ap2-month-desc { font-size: 13px; color: var(--text2); margin-bottom: 8px; line-height: 1.6; }
.ap2-items { display: flex; flex-direction: column; gap: 2px; }

/* Timing Calendar */
.timing-cal-wrap { padding: 0 24px 24px; }
.timing-cal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.timing-cal-cell { padding: 14px 10px; border: 1px solid var(--border); text-align: center; cursor: pointer; transition: all .2s; position: relative; }
.timing-cal-cell:hover { background: var(--surface); }
.timing-cal-cell.current { border-color: var(--gold); border-left: 3px solid var(--gold); background: var(--surface2); }
.timing-cal-cell .tcc-month { font-size: 13px; font-weight: 500; color: var(--text1); margin-bottom: 4px; }
.timing-cal-cell .tcc-ganji { font-family: var(--serif); font-size: 15px; color: var(--text2); margin-bottom: 6px; }
.timing-cal-cell .tcc-badge { display: inline-block; padding: 2px 10px; font-size: 10px; letter-spacing: .04em; border-radius: 2px; }
.timing-cal-cell .tcc-badge.good { background: rgba(74,222,128,.15); color: #4ADE80; }
.timing-cal-cell .tcc-badge.normal { background: rgba(251,191,36,.15); color: #FBBF24; }
.timing-cal-cell .tcc-badge.bad { background: rgba(248,113,113,.15); color: #F87171; }

/* Timing detail popup */
.timing-detail-popup { padding: 20px 0; }
.timing-detail-popup .tdp-title { font-family: var(--serif); font-size: 18px; text-align: center; margin-bottom: 16px; }
.timing-detail-popup .tdp-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.timing-detail-popup .tdp-row span:first-child { color: var(--text2); }
.timing-detail-popup .tdp-row span:last-child { color: var(--text1); }

/* === Modification 2: Enhanced Typography & Color Identification === */

/* 2-1. Fortune summary score colors */
.fortune-summary .fs-scores { display: flex; gap: 0; margin-bottom: 6px; align-items: center; }
.fortune-summary .fs-cat-grid { display: flex; flex: 1; gap: 0; }
.fortune-summary .fs-cat-grid .fs-score-item { flex: 1; }
.fortune-summary .fs-score-item { text-align: center; padding: 4px 0; }
.fortune-summary .fs-score-item .fs-label { font-size: 9px; color: var(--text3); display: block; margin-bottom: 2px; }
.fortune-summary .fs-overall-circle { flex: 0 0 auto; padding: 0 8px 0 0; }
.fortune-summary .fs-oval-wrap { position: relative; display: inline-block; width: 44px; height: 44px; }
.fortune-summary .fs-oval-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; font-family: var(--sans); }
.fortune-summary .fs-score-item .fs-val { font-size: 15px; font-weight: 600; }
.fortune-summary .fs-score-item .fs-val.score-great { color: #B388FF; }
.fortune-summary .fs-score-item .fs-val.score-good { color: #87CEEB; }
.fortune-summary .fs-score-item .fs-val.score-mid { color: #98E8C1; }
.fortune-summary .fs-score-item .fs-val.score-warn { color: #E8D5B7; }
.fortune-summary .fs-score-item .fs-val.score-low { color: #F8A4B8; }

/* Feature 5: Micro-tag styles */
.micro-tag {
  display: inline-block;
  font-size: 10px;
  color: var(--text3);
  padding: 2px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  margin: 2px;
  letter-spacing: 0.02em;
}
.micro-tag.mt-pos { border-color: #4ADE8040; color: #4ADE80; }
.micro-tag.mt-neg { border-color: #F8717140; color: #F87171; }
.fs-dir-grade-row { text-align:center;margin-top:-20px; }
.fs-dir-grade { display:inline-block;font-size:11px;color:var(--text2);opacity:0.85; }
.fs-micro-tags { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }
.score-notice { display:block;font-size:11px;color:var(--text2);opacity:0.8;text-align:left;line-height:1.5; }
.score-notice-link { color:var(--gold);cursor:pointer;font-weight:500;margin-left:4px; }
.score-info-overlay { position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.45);z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;animation:fadeIn .2s; }
.score-info-popup { background:var(--surface);border-radius:14px;max-width:360px;width:100%;box-shadow:0 8px 32px rgba(0,0,0,.25);overflow:hidden; }
.sip-header { display:flex;align-items:center;justify-content:space-between;padding:16px 18px;font-size:15px;font-weight:700;color:var(--text1);border-bottom:1px solid var(--border); }
.sip-close { background:none;border:none;font-size:22px;color:var(--text3);cursor:pointer;padding:0;line-height:1; }
.sip-body { padding:16px 18px 20px; }
.sip-section { margin-bottom:14px; }
.sip-engine { font-size:13px;font-weight:600;color:var(--text1);margin-bottom:4px;display:flex;align-items:center;gap:6px; }
.sip-dot { display:inline-block;width:8px;height:8px;border-radius:50%; }
.sip-weight { font-size:11px;font-weight:400;color:var(--text3);margin-left:auto; }
.sip-desc { font-size:12px;color:var(--text2);line-height:1.6;padding-left:14px; }
.sip-divider { height:1px;background:var(--border);margin:14px 0; }
.sip-note { font-size:11px;color:var(--text3);line-height:1.6; }

/* Feature 6: Delta badge styles */
.delta-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}
.delta-up { color: #4ADE80; background: #4ADE8015; }
.delta-down { color: #F87171; background: #F8717115; }
.delta-flat { color: var(--text3); background: var(--surface2); }

/* Feature 9: IChing time badge */
.fu-time-badge {
  text-align: center;
  font-size: 12px;
  color: var(--text2);
  padding: 8px 16px;
  margin: 0 0 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--serif);
  letter-spacing: 0.03em;
}

/* 2-2. Analysis section colored borders */
.ars-section.saju-section { border-left: 3px solid #FF9800; }
.ars-section.iching-section { border-left: 3px solid #4CAF50; }
.ars-section.astro-section { border-left: 3px solid #7C3AED; }
.ars-section.cross-section { border-left: 3px solid #FFFFFF; }
[data-theme="light"] .ars-section.cross-section { border-left-color: #000000; }

/* Enhanced pro-box and easy-box */
.pro-box { background: var(--surface2); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; border-left: 2px solid var(--text3); font-style: italic; }
.easy-box { padding: 0 4px; }
.easy-box .text-easy { font-size: 14px; line-height: 1.85; }

/* 2-3. Energy card category colors */
/* energy gauge colors handled inline */

/* 2-4. Timeline enhanced badges */
.daeun-block .db-badge { position: absolute; top: -8px; right: -1px; font-size: 9px; padding: 3px 10px; background: #4ADE80; color: #000; letter-spacing: .05em; border-radius: 2px; font-weight: 700; }
.seun-today::after { content: 'TODAY'; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 8px; letter-spacing: .1em; color: var(--text1); white-space: nowrap; font-weight: 700; }
.seun-today::before { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid var(--text1); }
.seun-bar-wrap.premium-blur { filter: blur(6px); position: relative; }
.seun-bar-wrap.premium-blur::after { content: '🔒 Premium'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 9px; color: var(--text2); filter: blur(0); white-space: nowrap; z-index: 3; }

/* 2-5. AI chat enhanced */
.chat-bubble.ai { position: relative; padding-left: 32px; }
.chat-bubble.ai::before { content: 'LO'; position: absolute; top: 8px; left: 8px; font-size: 8px; font-weight: 700; letter-spacing: .05em; color: var(--text3); font-family: var(--sans); background: var(--surface2); border-radius: 2px; padding: 1px 3px; }
.chat-bubble.user { background: var(--text1); color: var(--bg); }
.chat-bubble.ai { background: var(--surface2); color: var(--text1); border: 1px solid var(--border); }

/* Ohaeng keyword highlight in AI chat */
.oh-kw-mok { color: #4CAF50; font-weight: 600; }
.oh-kw-hwa { color: #F44336; font-weight: 600; }
.oh-kw-to { color: #FF9800; font-weight: 600; }
.oh-kw-geum { color: #BDBDBD; font-weight: 600; }
.oh-kw-su { color: #2196F3; font-weight: 600; }

/* Analysis section in detail page colored borders */
.analysis-section.saju-detail { border-left: 3px solid #FF9800; margin-left: 0; }
.analysis-section.iching-detail { border-left: 3px solid #4CAF50; margin-left: 0; }
.analysis-section.astro-detail { border-left: 3px solid #7C3AED; margin-left: 0; }
.analysis-section.cross-detail { border-left: 3px solid #FFFFFF; margin-left: 0; }
[data-theme="light"] .analysis-section.cross-detail { border-left-color: #000000; }

/* Daeun/Saeun detail sheet styles */
.tl-sheet-title { font-family: var(--serif); font-size: 18px; text-align: center; padding: 8px 0 4px; border-bottom: 2px solid var(--text1); margin-bottom: 16px; }
.tl-sheet-subtitle { font-size: 13px; color: var(--text2); text-align: center; margin-bottom: 20px; }
.tl-sheet-section { margin-bottom: 16px; }
.tl-sheet-section-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text2); margin-bottom: 8px; font-weight: 600; }
.tl-sheet-pro { background: var(--surface2); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; border-left: 2px solid var(--text3); font-size: 13px; color: var(--text2); line-height: 1.6; }
.tl-sheet-easy { font-size: 14px; color: var(--text1); line-height: 1.85; }
.tl-sheet-list { list-style: none; padding: 0; margin: 8px 0; }
.tl-sheet-list li { padding: 4px 0; font-size: 13px; color: var(--text2); line-height: 1.6; }
.tl-sheet-list li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 8px; vertical-align: middle; }
.tl-sheet-list li.positive::before { background: #4ADE80; }
.tl-sheet-list li.caution::before { background: #FBBF24; }

/* Light mode adjustments for new elements */
[data-theme="light"] .fortune-summary .fs-score-item .fs-val.score-great { color: #7C4DFF; }
[data-theme="light"] .fortune-summary .fs-score-item .fs-val.score-good { color: #4A90D9; }
[data-theme="light"] .fortune-summary .fs-score-item .fs-val.score-mid { color: #2E8B57; }
[data-theme="light"] .fortune-summary .fs-score-item .fs-val.score-warn { color: #B8860B; }
[data-theme="light"] .fortune-summary .fs-score-item .fs-val.score-low { color: #D2691E; }
[data-theme="light"] .pro-box { background: var(--surface2); border-left-color: var(--text3); }
[data-theme="light"] .chat-bubble.ai { background: var(--surface); border-color: var(--border); }
[data-theme="light"] .daeun-block .db-badge { background: #16A34A; color: #fff; }
[data-theme="light"] .seun-bar.bad { background: #ddd; }

/* Daeun block clickable cursor */
.daeun-block { cursor: pointer; }
.seun-bar-wrap { cursor: pointer; }

/* === Modification 1: Analysis header sticky (FIXED) === */
#analysis-result.active, #ai.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}
.analysis-header-sticky {
  position: relative;
  flex-shrink: 0;
  z-index: 10;
  background: var(--bg);
  padding: 12px 24px 10px;
  border-bottom: 1px solid var(--border);
}
.analysis-scroll-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 80px;
}
[data-theme="light"] .analysis-header-sticky {
  background: var(--bg);
}

/* === Modification 2/3/4: Deep analysis screens === */
.deep-screen-body { padding: 0 24px 100px; }
.deep-section { margin-bottom: 24px; }
.deep-section-title {
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 700;
  color: var(--text1);
  margin: 24px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.02em;
}
.deep-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
  line-height: 1.6;
}
.deep-row .dr-label { color: var(--text2); min-width: 80px; flex-shrink: 0; }
.deep-row .dr-value { color: var(--text1); text-align: right; }
.deep-bar-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.deep-bar-label { font-size: 12px; color: var(--text2); min-width: 24px; }
.deep-bar { flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.deep-bar-fill { height: 100%; border-radius: 4px; transition: width .8s ease; }
.deep-bar-pct { font-size: 11px; color: var(--text2); min-width: 48px; text-align: right; }
.deep-easy-box {
  background: var(--surface2);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 10px 0 16px;
  font-size: 14px;
  color: var(--text1);
  line-height: 1.85;
  border-left: 2px solid var(--text3);
}
.deep-btn {
  padding: 6px 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  font-family: var(--sans);
  transition: all .3s;
  white-space: nowrap;
}
.deep-btn:hover { border-color: var(--text2); color: var(--text1); }
.deep-btn:active { background: var(--surface2); }

/* === Modification 5: AI header sticky (FIXED) === */
.ai-header-sticky {
  position: relative;
  flex-shrink: 0;
  z-index: 10;
  background: var(--bg);
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ai-scroll-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
[data-theme="light"] .ai-header-sticky {
  background: var(--bg);
}
.ai-header-sticky .ai-q-text {
  font-size: 12px;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

/* === Modification 7: AI provider card === */
.ai-provider-card {
  margin: 40px 24px;
  padding: 24px 20px;
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}
.ai-provider-card .apc-title {
  font-size: 18px;
  margin-bottom: 16px;
}
.ai-provider-option {
  text-align: left;
  padding: 14px 16px;
  border: 1px solid var(--border);
  margin: 8px 0;
  cursor: pointer;
  transition: all .2s;
  position: relative;
}
.ai-provider-option:hover { background: var(--surface2); }
.ai-provider-option.selected { border-color: var(--text1); }
.ai-provider-option .apo-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text1);
  margin-bottom: 4px;
}
.ai-provider-option .apo-desc {
  font-size: 12px;
  color: var(--text2);
  line-height: 1.5;
}
.ai-provider-option .apo-badge {
  position: absolute;
  top: -1px;
  right: 12px;
  font-size: 9px;
  padding: 2px 8px;
  background: var(--text1);
  color: var(--bg);
  letter-spacing: .05em;
}
.ai-provider-link {
  display: block;
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text1);
  font-size: 14px;
  cursor: pointer;
  font-family: var(--sans);
  text-align: center;
  transition: background .2s;
  text-decoration: none;
}
.ai-provider-link:hover { background: var(--surface2); }

/* Settings AI provider radio */
.ai-provider-radios { display: flex; gap: 8px; margin: 8px 0; }
.ai-provider-radio {
  flex: 1;
  padding: 10px 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text2);
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  transition: all .3s;
  font-family: var(--sans);
}
.ai-provider-radio:hover { border-color: var(--text2); }
.ai-provider-radio.selected { border-color: var(--text1); color: var(--text1); background: var(--surface2); }
.ai-model-select-wrap { margin: 8px 0; }
.ai-model-select-wrap label { font-size: 11px; color: var(--text2); display: block; margin-bottom: 4px; }
.ai-model-select { width: 100%; padding: 8px 10px; background: var(--surface2); border: 1px solid var(--border); color: var(--text1); font-size: 12px; font-family: var(--sans); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; }
.ai-model-select:focus { outline: none; border-color: var(--text2); }
.ai-model-info { font-size: 10px; color: var(--text3); margin-top: 4px; }

/* === Phase 3: Accessory Features === */

/* Retrograde alert banner */
.retro-banner { margin: 0 24px 6px; padding: 10px 16px; border: 1px solid rgba(251,191,36,.3); background: rgba(251,191,36,.06); cursor: pointer; transition: background .2s; border-radius: 10px; }
.retro-banner:hover { background: rgba(251,191,36,.12); }
.retro-banner .rb-title { font-size: 13px; font-weight: 600; color: #FBBF24; margin-bottom: 2px; }
.retro-banner .rb-desc { font-size: 12px; color: var(--text2); }
[data-theme="light"] .retro-banner .rb-title { color: #B45309; }

/* Retrograde banner collapsed/expanded */
.retro-banner-collapsed {
  margin: 0 24px 8px;
  padding: 10px 16px;
  border: 1px solid rgba(251,191,36,0.25);
  background: rgba(251,191,36,0.05);
  font-size: 13px;
  color: #D97706;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .2s;
}
.retro-banner-collapsed:hover { background: rgba(251,191,36,0.1); }
[data-theme="light"] .retro-banner-collapsed { color: #B45309; }
.retro-banner-expanded {
  margin: 0 24px 8px;
  border: 1px solid rgba(251,191,36,0.25);
  background: rgba(251,191,36,0.05);
}
.retro-header {
  padding: 10px 16px;
  font-size: 13px;
  color: #D97706;
  cursor: pointer;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background .2s;
}
.retro-header:hover { background: rgba(251,191,36,0.1); }
[data-theme="light"] .retro-header { color: #B45309; }
.retro-item {
  padding: 8px 16px;
  border-top: 1px solid rgba(251,191,36,0.12);
  font-size: 12px;
}
.retro-item-title { color: #D97706; font-weight: 600; }
[data-theme="light"] .retro-item-title { color: #B45309; }
.retro-item-desc { color: var(--text2); font-size: 11px; margin-top: 2px; }

/* Gaeunbeop banner */
.gaeun-banner { margin: 0 24px 14px; padding: 10px 16px; border: 1px solid var(--border); cursor: pointer; transition: background .2s; display: flex; justify-content: space-between; align-items: center; }
.gaeun-banner:hover { background: var(--surface); }
.gaeun-banner .gb-text { font-size: 13px; color: var(--text2); }
.gaeun-banner .gb-arrow { color: var(--text2); font-size: 16px; }

/* Gaeunbeop detail screen */
.gaeun-section { padding: 16px 24px; border-top: 1px solid var(--border); }
.gaeun-section .gs-title { font-size: 15px; font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.gaeun-item { padding: 8px 0; font-size: 13px; color: var(--text2); line-height: 1.6; display: flex; gap: 8px; }
.gaeun-item .gi-emoji { flex-shrink: 0; font-size: 16px; }
.gaeun-item .gi-label { color: var(--text1); font-weight: 500; min-width: 80px; flex-shrink: 0; }
.gaeun-good { color: #4ADE80; }
.gaeun-bad { color: #F87171; }

/* Compatibility screen */
.compat-form { padding: 24px; }
.compat-form .cf-title { font-family: var(--serif); font-size: 16px; margin-bottom: 20px; }
.compat-input { width: 100%; background: var(--surface); border: 1px solid var(--border); color: var(--text1); padding: 12px 14px; font-size: 14px; font-family: var(--sans); outline: none; margin-bottom: 12px; transition: border-color .3s; }
.compat-input:focus { border-color: var(--text2); }
.compat-input::placeholder { color: var(--text3); }
.compat-cta { width: 100%; padding: 16px; background: var(--text1); color: var(--bg); border: none; font-family: var(--sans); font-size: 15px; font-weight: 500; cursor: pointer; transition: opacity .3s; }
.compat-cta:hover { opacity: .9; }
.compat-extra-toggle { padding:12px 0;margin-bottom:12px;font-size:13px;color:var(--text2);cursor:pointer;user-select:none;transition:color .2s; }
.compat-extra-toggle:hover { color:var(--text1); }
.compat-extra { padding:16px;margin-bottom:16px;border:1px solid var(--border);border-radius:8px;background:var(--surface);animation:slideUp .25s ease; }
.compat-result-section { padding: 20px 24px; border-top: 1px solid var(--border); }
.compat-score-big { text-align: center; padding: 24px; }
.compat-score-big .csb-num { font-size: 56px; font-weight: 100; }
.compat-score-big .csb-label { font-size: 12px; color: var(--text2); margin-top: 4px; letter-spacing: .08em; }

/* 궁합 괘 시각화 카드 */
.compat-gua-card {
  padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:10px;
  margin-bottom:8px;
  background-image:radial-gradient(ellipse at center,rgba(139,115,85,0.03) 0%,transparent 70%);
}
.cgc-lines { display:flex;flex-direction:column;gap:10px; }
.cgc-row { display:flex;align-items:center;gap:10px; }
.cgc-row.changing .cgc-label { color:var(--vermilion,#C73E1D);font-weight:700; }
.cgc-row.changing .cgc-seg { background:linear-gradient(90deg,#C73E1D,#E8A87C) !important; }
.cgc-label {
  font-size:13px;font-family:var(--serif);font-weight:400;color:var(--text2);
  min-width:32px;text-align:right;
}
.cgc-bar { display:flex;align-items:center;gap:0;flex:1;height:8px; }
.cgc-seg {
  height:8px;border-radius:3px 1px 2px 1px;
  background:linear-gradient(90deg,var(--gold,#B8860B),#D4A853);
  box-shadow:0 1px 3px rgba(0,0,0,0.12);
}
.cgc-seg.full { flex:1; }
.cgc-seg.half { flex:1; }
.cgc-gap { width:20%; }
.cgc-change {
  font-size:11px;color:var(--vermilion,#C73E1D);border:1px solid rgba(199,62,29,0.25);
  padding:2px 8px;border-radius:4px;background:rgba(199,62,29,0.06);
  font-family:var(--serif);letter-spacing:.05em;margin-left:4px;
}
.cgc-info { text-align:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--border); }
.cgc-name { font-family:var(--serif);font-size:22px;font-weight:200;letter-spacing:.08em; }
.cgc-sub { font-size:12px;color:var(--text3);margin-top:4px; }

/* Journal screen */
.journal-entry { margin: 0 24px 8px; padding: 12px 16px; border: 1px solid var(--border); }
.journal-entry .je-date { font-size: 11px; color: var(--text3); letter-spacing: .05em; margin-bottom: 4px; }
.journal-entry .je-question { font-size: 14px; color: var(--text1); margin-bottom: 4px; }
.journal-entry .je-result { font-size: 12px; color: var(--text2); }
.journal-entry .je-actual { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.journal-entry .je-feedback-btns { display: flex; gap: 4px; flex-wrap: nowrap; }
.journal-entry .je-actual-btn { padding: 6px 9px; border: 1px solid var(--border); background: transparent; color: var(--text2); font-size: 11px; cursor: pointer; font-family: var(--sans); transition: all .2s; border-radius: 16px; white-space: nowrap; flex: 1; text-align: center; }
.journal-entry .je-actual-btn:hover { border-color: var(--text1); color: var(--text1); }
.journal-entry .je-btn-positive:hover { border-color: #4ADE80; color: #4ADE80; background: rgba(74,222,128,.06); }
.journal-entry .je-btn-neutral:hover { border-color: #FBBF24; color: #FBBF24; background: rgba(251,191,36,.06); }
.journal-entry .je-btn-negative:hover { border-color: #F87171; color: #F87171; background: rgba(248,113,113,.06); }
.journal-entry .je-btn-skip:hover { border-color: var(--text3); color: var(--text3); }
.journal-entry .je-hit { color: #4ADE80; font-size: 12px; font-weight: 600; }
.journal-entry .je-miss { color: #F87171; font-size: 12px; font-weight: 600; }
.je-verdict { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12px; padding: 8px 10px; border-radius: 8px; background: var(--surface2); }
.je-verdict.match { background: rgba(74,222,128,.08); }
.je-verdict.partial { background: rgba(251,191,36,.08); }
.je-verdict.miss { background: rgba(248,113,113,.08); }
.je-v-label { color: var(--text3); font-size: 10px; }
.je-v-actual, .je-v-predict { font-weight: 600; color: var(--text1); }
.je-v-eq, .je-v-arrow { color: var(--text3); font-size: 11px; }
.je-v-result { font-weight: 700; padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.je-v-result.match { color: #4ADE80; background: rgba(74,222,128,.12); }
.je-v-result.partial { color: #FBBF24; background: rgba(251,191,36,.12); }
.je-v-result.miss { color: #F87171; background: rgba(248,113,113,.12); }
.journal-stat { padding: 16px 24px; margin-bottom: 12px; }
.journal-stat .js-label { font-size: 11px; color: var(--text2); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.journal-stat .js-val { font-size: 28px; font-weight: 100; }

/* Monthly report screen */
.mr-section { padding: 20px 24px; border-top: 1px solid var(--border); }
.mr-section .mrs-title { font-family: var(--serif); font-size: 16px; font-weight: 700; margin-bottom: 12px; color: var(--text1); }
.mr-item { padding: 8px 0; font-size: 13px; color: var(--text2); line-height: 1.6; border-bottom: 1px solid var(--border); }
.mr-week { padding: 12px 0; border-bottom: 1px solid var(--border); }
.mr-week .mrw-label { font-size: 13px; font-weight: 600; color: var(--text1); margin-bottom: 4px; }
.mr-week .mrw-desc { font-size: 13px; color: var(--text2); line-height: 1.6; }

/* === Prescription (DO/DON'T/Timing) === */
.rx-box { border-radius: 12px; padding: 16px 18px; margin-bottom: 16px; }
.rx-do { background: rgba(74,222,128,0.08); border: 1px solid rgba(74,222,128,0.25); }
.rx-dont { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.25); }
.rx-timing { background: rgba(96,165,250,0.08); border: 1px solid rgba(96,165,250,0.25); }
.rx-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.rx-do .rx-title { color: #4ADE80; }
.rx-dont .rx-title { color: #F87171; }
.rx-timing .rx-title { color: #60A5FA; }
.rx-item { display: flex; gap: 10px; margin-bottom: 12px; }
.rx-num { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
.rx-do .rx-num { background: rgba(74,222,128,0.2); color: #4ADE80; }
.rx-dont .rx-num { background: rgba(248,113,113,0.2); color: #F87171; }
.rx-item-title { font-size: 13px; font-weight: 600; color: var(--text1); }
.rx-item-desc { font-size: 12px; color: var(--text2); line-height: 1.6; margin-top: 2px; }
.rx-sub { margin-bottom: 14px; }
.rx-sub-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.rx-sub-main { font-size: 14px; font-weight: 700; color: var(--text1); }
.rx-sub-desc { font-size: 12px; color: var(--text2); line-height: 1.5; }
/* Light mode prescription */
[data-theme="light"] .rx-do { background: rgba(34,197,94,0.06); border-color: rgba(34,197,94,0.2); }
[data-theme="light"] .rx-dont { background: rgba(239,68,68,0.06); border-color: rgba(239,68,68,0.2); }
[data-theme="light"] .rx-timing { background: rgba(59,130,246,0.06); border-color: rgba(59,130,246,0.2); }
/* Modern meaning box for deep analysis */
.modern-meaning-box { background: var(--surface2); border-radius: 8px; padding: 12px 14px; margin: 8px 0 12px; border-left: 3px solid var(--text2); }
.modern-meaning-box .mm-title { font-size: 12px; font-weight: 700; color: var(--text1); margin-bottom: 6px; letter-spacing: .05em; }
.modern-meaning-box .mm-body { font-size: 13px; color: var(--text2); line-height: 1.7; }
.modern-meaning-box.mm-positive { border-left-color: #4ADE80; }
.modern-meaning-box.mm-caution { border-left-color: #FBBF24; }
.modern-meaning-box.mm-danger { border-left-color: #F87171; }
.modern-meaning-box.mm-info { border-left-color: #60A5FA; }

/* === Help Icon === */
.help-icon { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--text3); font-size: 9px; font-weight: 700; color: var(--text3); cursor: pointer; vertical-align: middle; margin-left: 3px; transition: all .2s; line-height: 1; font-family: var(--serif); flex-shrink: 0; opacity: 0.45; font-style: italic; }
.help-icon:hover { border-color: var(--text1); color: var(--text1); opacity: 0.8; }

/* === Saju Wonkuk Description === */
.wonkuk-desc { padding: 16px 24px; margin-top: 8px; }
.wonkuk-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.wonkuk-item .wi-label { font-size: 11px; letter-spacing: .06em; color: var(--text2); margin-bottom: 4px; }
.wonkuk-item .wi-text { font-size: 14px; color: var(--text1); line-height: 1.7; }

/* === Planet Chart Description === */
.planet-chart-desc { padding: 8px 0; }
.planet-chart-desc .pcd-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.planet-chart-desc .pcd-label { font-size: 11px; letter-spacing: .06em; color: var(--text2); margin-bottom: 2px; }
.planet-chart-desc .pcd-text { font-size: 13px; color: var(--text1); line-height: 1.7; }

/* === Toss Payment === */
.toss-setup-section { padding: 16px 0; }
.toss-key-input { flex: 1; background: var(--surface2); border: 1px solid var(--border); color: var(--text1); padding: 10px 12px; font-size: 12px; font-family: var(--sans); outline: none; }
.toss-key-input::placeholder { color: var(--text3); }

/* === H2: Demo credit badge === */
.demo-credit-badge { font-size: 11px; color: var(--text2); margin-top: 4px; }
.demo-credit-badge .dcb-count { color: #4ADE80; font-weight: 600; }

/* === H3: Mission Section === */
.mission-section { margin: 0 24px 14px; padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.mission-section .section-label { padding: 0; margin-bottom: 12px; }
.mission-list { display: flex; flex-direction: column; gap: 8px; }
.mission-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; transition: all .2s; }
.mission-item:hover { background: var(--surface2); }
.mission-item.done { border-color: rgba(74,222,128,.3); background: rgba(74,222,128,.05); }
.mission-check { font-size: 18px; flex-shrink: 0; width: 24px; text-align: center; }
.mission-text { font-size: 13px; color: var(--text2); line-height: 1.5; }
.mission-item.done .mission-text { color: var(--text1); text-decoration: line-through; opacity: .7; }
.mission-progress { font-size: 11px; color: var(--text3); text-align: right; margin-top: 8px; }
.streak-badge { font-size: 12px; color: var(--text2); margin-left: 8px; white-space: nowrap; }
.streak-badge .streak-num { color: #FBBF24; font-weight: 700; }

/* === H6: Notification settings === */
.notif-toggle-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; }
.notif-toggle-row .ntr-label { font-size: 13px; color: var(--text1); }
.notif-toggle-row .ntr-desc { font-size: 11px; color: var(--text3); margin-top: 2px; }
.notif-perm-status { font-size: 11px; padding: 6px 10px; margin-bottom: 8px; border: 1px solid var(--border); color: var(--text2); }
.notif-perm-status.granted { border-color: rgba(74,222,128,.3); color: #4ADE80; }
.notif-perm-status.denied { border-color: rgba(248,113,113,.3); color: #F87171; }
[data-theme="light"] .notif-perm-status.granted { color: #16A34A; }
[data-theme="light"] .notif-perm-status.denied { color: #DC2626; }
.notif-master-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.notif-master-row .nmr-label { font-size: 14px; font-weight: 600; color: var(--text1); }
.notif-push-status { font-size: 11px; color: var(--text3); margin-top: 6px; }

/* === Streak crisis banner === */
.streak-crisis-banner { margin: 0 24px 12px; padding: 14px 16px; border: 1px solid rgba(251,191,36,.3); background: rgba(251,191,36,.06); cursor: pointer; transition: background .2s; display: flex; align-items: center; gap: 10px; }
.streak-crisis-banner:hover { background: rgba(251,191,36,.12); }
.streak-crisis-banner .scb-text { font-size: 13px; color: var(--text1); line-height: 1.5; }
.streak-crisis-banner .scb-sub { font-size: 11px; color: var(--text2); margin-top: 2px; }
[data-theme="light"] .streak-crisis-banner { border-color: rgba(217,119,6,.2); background: rgba(217,119,6,.04); }

/* === Toast === */
.toast-msg { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); background: var(--text1); color: var(--bg); padding: 12px 24px; font-size: 13px; border-radius: 8px; z-index: 200; animation: slideUp .3s ease, fadeIn .3s ease; pointer-events: none; box-shadow: 0 4px 16px rgba(0,0,0,0.3); }

/* === Streaming Analysis (Feature 19) === */
.streaming-loading { text-align: center; padding: 80px 24px; }
.streaming-loading .sl-title { font-family: var(--serif); font-size: 20px; margin-bottom: 24px; color: var(--text1); }
.streaming-loading .sl-step { font-size: 13px; color: var(--text2); transition: opacity .3s ease; }
.streaming-loading .sl-bar-wrap { margin-top: 24px; height: 2px; background: var(--border); max-width: 200px; margin-left: auto; margin-right: auto; }
.streaming-loading .sl-bar { height: 2px; background: var(--text1); width: 10%; transition: width .6s ease; }
.streaming-result { padding: 0 0 80px; }
.streaming-section { padding: 20px 24px; border-top: 1px solid var(--border); opacity: 0; transform: translateY(8px); transition: opacity .4s ease, transform .4s ease; }
.streaming-section.visible { opacity: 1; transform: translateY(0); }
.streaming-section.ss-saju { border-left: 3px solid #FF9800; }
.streaming-section.ss-iching { border-left: 3px solid #4CAF50; }
.streaming-section.ss-astro { border-left: 3px solid #7C3AED; }
.streaming-section.ss-cross { border-left: 3px solid var(--text1); }
.streaming-section.ss-prescription { border-left: 3px solid #FBBF24; }
.streaming-section .ss-title { font-family: var(--serif); font-size: 16px; font-weight: 400; color: var(--text1); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.streaming-section .ss-title .ss-icon { font-size: 18px; }
.streaming-section .ss-body { font-size: 14px; color: var(--text2); line-height: 1.8; white-space: pre-wrap; }
.streaming-section .ss-body strong { color: var(--text1); font-weight: 600; }
.streaming-cursor { display: inline-block; width: 2px; height: 1em; background: var(--text1); margin-left: 2px; vertical-align: text-bottom; animation: cursorBlink 1s step-end infinite; }
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.streaming-badge { text-align: center; font-size: 10px; color: var(--text3); letter-spacing: .1em; margin: 12px 0 8px; }
.streaming-cache-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; font-size: 11px; color: var(--text2); margin: 0 auto 16px; }
.streaming-more-btn { display: block; margin: 24px auto 0; padding: 12px 32px; background: transparent; border: 1px solid var(--text1); color: var(--text1); font-size: 13px; cursor: pointer; letter-spacing: .05em; transition: background .2s, color .2s; }
.streaming-more-btn:hover { background: var(--text1); color: var(--bg); }
.streaming-refresh-btn { display: inline-block; margin-left: 8px; padding: 4px 12px; background: transparent; border: 1px solid var(--border); color: var(--text2); font-size: 11px; cursor: pointer; border-radius: 12px; transition: border-color .2s; }
.streaming-refresh-btn:hover { border-color: var(--text1); color: var(--text1); }
.precision-notice { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin: 8px 0; background: rgba(251,191,36,0.08); border: 1px solid rgba(251,191,36,0.2); border-radius: 6px; font-size: 12px; color: var(--text2); line-height: 1.5; }
.precision-notice .pn-icon { font-size: 16px; flex-shrink: 0; }
.precision-notice .pn-pct { font-weight: 600; color: #FBBF24; }
[data-theme="light"] .precision-notice { background: rgba(217,119,6,0.06); border-color: rgba(217,119,6,0.15); }
[data-theme="light"] .precision-notice .pn-pct { color: #D97706; }
.evidence-section { margin: 0 24px 16px; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 8px; background: var(--surface); }
.evidence-title { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text3); margin-bottom: 10px; }
.evidence-tag.positive { border-color: #4ADE80; color: #4ADE80; }
.evidence-tag.caution { border-color: #FBBF24; color: #FBBF24; }
/* Legacy 3-day graph (removed — merged into hero) */
.fortune-graph-wrap { display: none; }
.fg-legend { display: flex; justify-content: space-between; font-size: 11px; color: var(--text3); margin-top: 8px; }
.rx-followup { margin-top: 12px; padding: 12px 14px; background: var(--surface2); border: 1px solid var(--border); border-radius: 6px; }

/* Time-of-Day Fortune */
/* ===== TIMELINE V2 STYLES ===== */
.tl-header { padding: 20px 24px; display: flex; justify-content: space-between; align-items: baseline; position: relative; }
.tl-header::before {
  content: '';position: absolute;top: 0;left: 0;right: 0;height: 6px;
  background: linear-gradient(180deg, rgba(139,115,85,0.1) 0%, transparent 100%);
  pointer-events: none;
}
.tl-title { font-family: 'Noto Serif KR', Georgia, serif; font-size: 22px; font-weight: 200; letter-spacing: .03em; }
.tl-report-btn { font-size: 12px; color: var(--text2); background: none; border: none; cursor: pointer; font-family: var(--sans); }
.tl-report-btn:hover { color: var(--text1); }
.tl-pad { padding: 0 24px; }
.tl-divider { padding: 28px 24px 8px; display: flex; align-items: center; gap: 12px; }
.tl-divider::before, .tl-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.tl-divider-label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text3); white-space: nowrap; }

/* --- Hero Section --- */
.tl-hero { margin-bottom: 8px; }
.hero-today { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; cursor: pointer; transition: border-color .2s; }
.hero-today:hover { border-color: var(--text2); }
.hero-today-top { display: flex; align-items: flex-start; gap: 20px; margin-bottom: 16px; }
.hero-today-main { flex-shrink: 0; }
.hero-score { font-size: 52px; font-weight: 200; font-family: var(--serif); line-height: 1; }
.hero-score-label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); margin-top: 4px; }
.hero-nav-scores { flex: 1; display: flex; align-items: center; justify-content: space-around; padding: 10px 0; }
.hero-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.hero-nav-val { font-size: 18px; font-weight: 300; font-family: var(--serif); }
.hero-nav-label { font-size: 9px; color: var(--text3); letter-spacing: .06em; text-transform: uppercase; }
.hero-nav-divider { width: 1px; height: 28px; background: var(--border); }
.hero-cats { display: flex; flex-direction: column; gap: 6px; }
.hero-cat-row { display: flex; align-items: center; gap: 8px; }
.hero-cat-label { font-size: 11px; color: var(--text2); width: 28px; flex-shrink: 0; }
.hero-cat-bar-bg { flex: 1; height: 4px; background: var(--surface3); border-radius: 2px; overflow: hidden; }
.hero-cat-bar-fill { height: 100%; border-radius: 2px; transition: width .6s ease; }
.hero-cat-val { font-size: 11px; font-variant-numeric: tabular-nums; width: 22px; text-align: right; flex-shrink: 0; }

/* --- Trend Chart --- */
.hero-chart { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
.hero-chart-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.hero-chart-title { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); display: flex; align-items: center; }
.ext-tabs { display: flex; gap: 4px; }
.ext-tab { padding: 4px 10px; font-size: 11px; color: var(--text3); background: none; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; font-family: var(--sans); transition: all .15s; }
.ext-tab:hover { border-color: var(--text2); }
.ext-tab.active { color: var(--text1); border-color: var(--text1); font-weight: 600; }
.hero-chart-legend { display: flex; gap: 14px; font-size: 10px; color: var(--text3); margin-bottom: 4px; align-items: center; }
.legend-line { display: inline-block; width: 14px; height: 0; margin-right: 4px; vertical-align: middle; }
.legend-line.solid { border-top: 2px solid var(--text1); opacity: .7; }
.legend-line.dashed { border-top: 2px dashed #8B5CF6; opacity: .7; }
.ext-graph-svg { width: 100%; height: 140px; }
.hero-chart-stats { display: flex; justify-content: space-between; font-size: 10px; color: var(--text3); margin-top: 6px; }
.hero-chart-stats b { color: var(--text2); font-weight: 500; }

/* --- Planet Energies (collapsible) --- */
.hero-planets-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; margin-bottom: 10px; }
.hero-planets-toggle { padding: 12px 16px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text3); cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; }
.hero-planets-toggle::-webkit-details-marker { display: none; }
.hero-planets-toggle::after { content: '▸'; font-size: 10px; transition: transform .2s; flex-shrink: 0; }
.hero-planets-meta { font-size: 9px; color: var(--text3); font-weight: 400; letter-spacing: .02em; text-transform: none; margin-left: auto; padding-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
details[open] .hero-planets-toggle::after { transform: rotate(90deg); }
.hero-planets { padding: 0 16px 14px; }
.hero-planet-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.hero-planet-sym { font-size: 13px; width: 16px; text-align: center; }
.hero-planet-name { font-size: 10px; color: var(--text2); width: 28px; }
.hero-planet-bar-bg { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.hero-planet-bar-fill { height: 100%; border-radius: 2px; }
.hero-planet-val { font-size: 10px; width: 28px; text-align: right; font-variant-numeric: tabular-nums; }

/* --- Time of Day V2 --- */
.tod-fortune-v2 { margin: 0 0 10px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.tod-header-v2 { margin-bottom: 12px; }
.tod-title-v2 { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text2); }
.tod-periods-v2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tod-card-v2 { text-align: center; padding: 14px 8px 12px; background: var(--surface2); border-radius: 10px; cursor: pointer; transition: transform .15s, border-color .2s; position: relative; border: 1.5px solid transparent; }
.tod-card-v2:hover { transform: translateY(-2px); }
.tod-card-v2.current { border-color: var(--text1); }
.tod-card-v2.best .tod-card-score { text-shadow: 0 0 12px rgba(74,222,128,.3); }
.tod-card-top { display: flex; justify-content: center; align-items: center; gap: 6px; margin-bottom: 6px; min-height: 20px; }
.tod-emoji { font-size: 16px; }
.tod-best-v2 { font-size: 8px; color: #4ADE80; font-weight: 700; letter-spacing: .05em; background: rgba(74,222,128,.1); padding: 1px 5px; border-radius: 3px; }
.tod-now-v2 { font-size: 8px; color: var(--text1); font-weight: 700; letter-spacing: .05em; background: rgba(255,255,255,.1); padding: 1px 5px; border-radius: 3px; }
.tod-card-label { font-size: 13px; font-weight: 600; color: var(--text1); margin-bottom: 2px; }
.tod-card-time { font-size: 9px; color: var(--text3); letter-spacing: .04em; margin-bottom: 6px; }
.tod-card-score { font-size: 26px; font-weight: 200; font-family: var(--serif); line-height: 1.2; }
.tod-card-desc { font-size: 10px; color: var(--text3); margin-top: 6px; line-height: 1.4; }
.tod-card-advice { font-size: 10px; color: var(--text2); margin-top: 4px; line-height: 1.4; }

/* Legacy tod-fortune (keep for backward compat) */
.tod-fortune { display: none; }

/* Legacy ext-fortune (keep for backward compat) */
.ext-fortune { display: none; }
.rx-followup-title { font-size: 12px; font-weight: 500; color: var(--text2); margin-bottom: 8px; }
.rx-followup-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; cursor: pointer; }
.rx-followup-item .rfi-check { width: 18px; height: 18px; border: 1.5px solid var(--border); border-radius: 3px; display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; transition: all .2s; }
.rx-followup-item.done .rfi-check { background: #4ADE80; border-color: #4ADE80; color: #000; }
.rx-followup-item.done .rfi-text { text-decoration: line-through; color: var(--text3); }

/* === M2: Empty state feedback === */
.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 300px; gap: 12px; }
.empty-icon { font-size: 48px; opacity: 0.3; }
.empty-text { font-size: 14px; color: var(--text2); }
.empty-btn { padding: 10px 20px; border: 1px solid var(--border); background: transparent; color: var(--text1); font-family: var(--sans); font-size: 13px; cursor: pointer; border-radius: 8px; transition: background .2s; }
.empty-btn:hover { background: var(--surface); }

/* === M3: 320px responsive === */
@media (max-width: 360px) {
  .hero-score { font-size: 40px; }
  .hero-today-top { gap: 12px; }
  .hero-nav-val { font-size: 15px; }
  .tod-card-v2 { padding: 10px 6px 8px; }
  .tod-card-score { font-size: 22px; }
  .tod-card-desc { font-size: 9px; }
  .tl-pad { padding: 0 16px; }
  .saju-table { gap: 4px; }
  .saju-col { padding: 8px 2px; }
  .saju-col .sc-hanja { font-size: 20px; }
  .ob-grid4 { grid-template-columns: repeat(3, 1fr); }
  .fortune-summary .fs-scores { gap: 0; }
  .energy-panel { margin: 0 12px 14px; padding: 12px 10px 6px; }
  .energy-scroll { gap: 6px; }
  .energy-card { padding: 8px 6px; gap: 6px; }
  .energy-panel .energy-card { padding: 8px 6px; gap: 5px; }
  .ec-gauge { width: 36px; height: 36px; }
  .ec-gauge svg { width: 36px; height: 36px; }
  .ec-gauge-val { font-size: 12px; }
  .ec-info .ec-name { font-size: 10px; }
  .ec-info .ec-desc { font-size: 11px; -webkit-line-clamp: 2; }
  .question-section { margin: 8px 16px 12px; padding: 12px 14px 10px; }
  .question-section .qs-title { font-size: 15px; }
  .keyword-chip { padding: 4px 0; font-size: 10px; }
  .rx-box { padding: 12px 14px; }
  .planet-list .planet-row { flex-wrap: wrap; }
  .timing-cal-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .timing-cal-cell { padding: 8px 4px; font-size: 11px; }
  .ob-clock { width: 240px; height: 240px; }
  .ob-clock-item { width: 38px; height: 38px; transform-origin: center; }
}

@media (max-width: 340px) {
  .saju-table { gap: 4px; }
  .saju-table .saju-col { min-width: 0; padding: 8px 2px; }
  .saju-table .saju-col .sc-hanja, .saju-col .sc-hanja { font-size: 18px; }
  .ob-grid4 { grid-template-columns: repeat(3, 1fr); }
  .fortune-summary .fs-score-item .fs-val { font-size: 14px; }
  .question-section { margin: 6px 12px 10px; padding: 10px 12px 8px; }
  .keyword-chip { padding: 3px 0; font-size: 9px; }
  body { max-width: 100%; }
  .energy-scroll { grid-template-columns: 1fr; }
  .energy-card.ec-full { grid-column: 1; }
  .home-date { font-size: 17px; }
  .congruence-header { padding: 20px 16px 12px; }
  .ob-clock { width: 220px; height: 220px; }
  .ob-clock-item { width: 36px; height: 36px; font-size: 8px; }
  .ob-clock-item .oci-emoji { font-size: 12px; }
  .ob-clock-item .oci-label { font-size: 7px; }
}

/* === M5: chat-bubble long text overflow fix === */
.chat-bubble { word-break: break-word; overflow-wrap: break-word; hyphens: auto; }
.chat-bubble a, .chat-bubble code { word-break: break-all; }

/* === M6: Share app link button === */
.share-app-btn { width: 100%; padding: 14px; border: 1px solid var(--border); background: transparent; color: var(--text1); font-size: 14px; cursor: pointer; font-family: var(--sans); text-align: center; transition: all .2s; margin-top: 12px; border-radius: 0; }
.share-app-btn:hover { background: var(--surface); }

/* === M10: Congruence visual chart === */
.congruence-visual { display: flex; justify-content: center; gap: 20px; margin: 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: 12px; }
.congruence-visual-item { text-align: center; flex: 1; }
.congruence-visual-divider { width: 1px; background: var(--border); margin: 8px 0; }

/* === F33: Analysis Comparison View === */
.compare-overlay { position:fixed; inset:0; z-index:200; background:var(--bg); animation:slideLeft .3s ease; overflow-y:auto; max-width:440px; margin:0 auto; }
.compare-header { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--border); }
.compare-header-title { font-family:var(--serif); font-size:24px; font-weight:200; }
.compare-close { background:none; border:none; color:var(--text2); font-size:22px; cursor:pointer; padding:4px; }
.compare-panels { display:flex; gap:0; }
.compare-panel { flex:1; padding:20px 16px; }
.compare-panel:first-child { border-right:1px solid var(--border); }
.compare-panel-date { font-size:12px; color:var(--text2); letter-spacing:.05em; margin-bottom:16px; text-align:center; }
.compare-panel-label { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); text-align:center; margin-bottom:8px; }
.compare-score-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; border-bottom:1px solid #1A1A1A; }
.compare-score-label { font-size:12px; color:var(--text2); }
.compare-score-val { font-size:40px; font-weight:100; font-family:var(--sans); }
.compare-direction { text-align:center; padding:12px 0; }
.compare-direction-hanja { font-family:var(--serif); font-size:28px; }
.compare-direction-text { font-size:12px; color:var(--text2); margin-top:4px; }
.compare-msg { font-size:13px; color:var(--text2); line-height:1.6; padding:8px 0; text-align:center; }
.compare-change-section { padding:20px 24px; border-top:1px solid #222; background:#0A0A0A; }
.compare-change-title { font-family:var(--serif); font-size:16px; margin-bottom:16px; }
.compare-change-row { display:flex; justify-content:space-between; align-items:center; padding:8px 0; }
.compare-change-cat { font-size:13px; color:var(--text2); }
.compare-change-arrow { font-size:18px; }
.compare-change-diff { font-size:14px; }
.compare-change-comment { font-size:14px; color:var(--text2); line-height:1.7; margin-top:16px; padding-top:16px; border-top:1px solid #222; }
.compare-entry-btn { display:flex; align-items:center; gap:10px; padding:16px 20px; background:#111; border-radius:8px; margin:12px 24px; cursor:pointer; transition:background .2s; }
.compare-entry-btn:hover { background:#1A1A1A; }
.compare-entry-btn .ceb-icon { font-size:16px; }
.compare-entry-btn .ceb-text { font-size:14px; color:#CCC; }
.compare-entry-btn .ceb-sub { font-size:12px; color:#666; margin-top:2px; }
.compare-entry-btn .ceb-arrow { font-size:14px; color:#888; margin-left:auto; }
.je-compare-tag { font-size:11px; color:#666; text-transform:uppercase; letter-spacing:.05em; cursor:pointer; padding:2px 6px; border:1px solid #333; margin-left:8px; transition:all .2s; }
.je-compare-tag:hover { border-color:#888; color:#888; }
@media(max-width:480px){
  .compare-panels { flex-direction:column; }
  .compare-panel:first-child { border-right:none; border-bottom:1px solid var(--border); }
}

/* === F34: Enhanced Share Card Templates === */
.share-template-sheet { position:fixed; inset:0; z-index:150; display:none; flex-direction:column; justify-content:flex-end; }
.share-template-sheet.open { display:flex; }
.share-template-overlay { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.share-template-body { position:relative; background:#111; border-radius:16px 16px 0 0; padding:20px 24px 32px; z-index:1; animation:bottomSheetIn .35s ease; max-width:440px; margin:0 auto; width:100%; }
.share-template-handle { width:40px; height:4px; background:#333; border-radius:2px; margin:0 auto 16px; }
.share-template-title { font-family:var(--serif); font-size:18px; margin-bottom:16px; text-align:center; }
.share-template-grid { display:flex; gap:12px; justify-content:center; margin-bottom:20px; }
.share-tpl-thumb { width:90px; height:130px; border:2px solid #333; border-radius:4px; cursor:pointer; transition:border-color .2s; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#0A0A0A; position:relative; overflow:hidden; }
.share-tpl-thumb.selected { border-color:#F5F5F0; }
.share-tpl-thumb .stt-label { font-size:10px; color:#888; margin-top:6px; }
.share-tpl-thumb .stt-icon { font-size:24px; }
.share-tpl-lock { position:absolute; inset:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; font-size:20px; }
.share-tpl-actions { display:flex; gap:8px; }
.share-tpl-actions button { flex:1; padding:14px; border:1px solid var(--border); background:transparent; color:var(--text1); font-size:13px; cursor:pointer; font-family:var(--sans); transition:all .2s; }
.share-tpl-actions button:hover { background:var(--surface); }

/* === F36: Friends / Social === */
.friends-section { margin-top:8px; }
.friend-row { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid #1A1A1A; height:72px; cursor:pointer; transition:background .2s; position:relative; }
.friend-row:hover { background:rgba(255,255,255,.02); }
.friend-zodiac { font-size:24px; }
.friend-daymaster { font-size:16px; color:#888; }
.friend-info { flex:1; }
.friend-name { font-size:15px; color:var(--text1); }
.friend-compat { font-size:12px; color:#888; margin-top:2px; }
.friend-arrow { font-size:14px; color:#888; }
.friend-empty { text-align:center; padding:40px 0; color:#666; font-size:14px; line-height:1.8; }
.friend-add-btn { display:flex; align-items:center; gap:8px; padding:12px 16px; background:#111; border:1px solid var(--border); color:var(--text1); font-size:14px; cursor:pointer; font-family:var(--sans); margin-bottom:12px; transition:all .2s; width:100%; }
.friend-add-btn:hover { background:#1A1A1A; }
.friend-detail-sheet { position:fixed; inset:0; z-index:150; display:none; flex-direction:column; justify-content:flex-end; }
.friend-detail-sheet.open { display:flex; }
.friend-detail-overlay { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.friend-detail-body { position:relative; background:#111; border-radius:16px 16px 0 0; padding:20px 24px 32px; z-index:1; animation:bottomSheetIn .35s ease; max-width:440px; margin:0 auto; width:100%; max-height:80vh; overflow-y:auto; }
.friend-detail-handle { width:40px; height:4px; background:#333; border-radius:2px; margin:0 auto 16px; }
.friend-detail-header { text-align:center; margin-bottom:20px; }
.friend-detail-name { font-size:20px; font-weight:500; }
.friend-detail-sub { font-size:13px; color:#888; margin-top:4px; }
.friend-detail-section { margin:16px 0; }
.friend-detail-section-title { font-family:var(--serif); font-size:14px; color:var(--text2); margin-bottom:8px; }
.friend-detail-big-num { font-size:60px; font-weight:100; text-align:center; }
.friend-detail-desc { font-size:13px; color:var(--text2); text-align:center; margin-top:4px; }
.friend-detail-note { font-size:12px; color:#666; text-align:center; margin-top:8px; }
.nickname-input { background:#111; border:none; border-bottom:1px solid #333; color:var(--text1); font-size:15px; font-family:var(--sans); padding:8px 0; width:100%; outline:none; transition:border-color .2s; }
.nickname-input:focus { border-color:var(--text1); }

/* ============================================
   Timeline v2 - New Section Styles
   ============================================ */

/* --- Today Highlight Card --- */
.today-highlight-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-bottom:10px; }
.th-row { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background .15s; }
.th-row:last-child { border-bottom:none; }
.th-row:hover { background:var(--surface2); }
.th-bar { width:3px; height:32px; border-radius:2px; flex-shrink:0; }
.th-label { font-size:11px; font-weight:600; letter-spacing:.06em; width:30px; flex-shrink:0; color:var(--text2); }
.th-desc { flex:1; font-size:11px; color:var(--text3); line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.th-fact { display:inline; }
.th-score { font-size:18px; font-weight:200; font-family:var(--serif); min-width:30px; text-align:right; flex-shrink:0; }
[data-theme="light"] .th-row .th-bar[style*="#2A2A2A"] { background:#666 !important; }

/* --- Time-of-Day Segment Bar --- */
.tod-seg-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-bottom:10px; }
.tod-seg-header { margin-bottom:12px; }
.tod-seg-title { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--text2); }
.tod-seg-bar { display:flex; gap:0; border-radius:8px; overflow:hidden; border:1px solid var(--border); }
.tod-seg { flex:1; padding:12px 8px 10px; text-align:center; cursor:pointer; position:relative; transition:background .15s; border-right:1px solid var(--border); }
.tod-seg:last-child { border-right:none; }
.tod-seg:hover { background:var(--surface2) !important; }
.tod-seg-inner { display:flex; flex-direction:column; align-items:center; gap:2px; }
.tod-seg-name { font-size:12px; font-weight:500; color:var(--text1); }
.tod-seg-score { font-size:22px; font-weight:200; font-family:var(--serif); }
.tod-seg-now { font-size:8px; font-weight:700; letter-spacing:.06em; color:var(--text1); background:rgba(255,255,255,.1); padding:1px 5px; border-radius:3px; margin-top:2px; }
.seg-current { background:var(--surface2) !important; }
.tod-seg-best-line { position:absolute; bottom:0; left:10%; right:10%; height:2px; background:var(--gold); border-radius:1px; }
.tod-seg-advices { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px; }
.tod-seg-advice { font-size:10px; color:var(--text3); text-align:center; line-height:1.4; }
@media(max-width:360px){ .tod-seg-score { font-size:18px; } .tod-seg-name { font-size:10px; } }

/* --- Weekly Energy --- */
.we-details { background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-bottom:10px; }
.we-summary { padding:14px 16px; font-size:12px; font-weight:500; letter-spacing:.04em; color:var(--text2); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.we-summary::-webkit-details-marker { display:none; }
.we-summary::after { content:'\25B8'; font-size:10px; transition:transform .2s; }
details[open] > .we-summary::after { transform:rotate(90deg); }
.we-body { padding:0 16px 16px; }
.we-section-label { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); margin-bottom:8px; }
.we-planet-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; }
.we-planet-name { font-size:11px; color:var(--text2); width:42px; flex-shrink:0; }
.we-planet-bar-bg { flex:1; height:5px; background:var(--surface3); border-radius:3px; overflow:hidden; }
.we-planet-bar-fill { height:100%; border-radius:3px; background:var(--bronze); transition:width .6s ease; }
.we-planet-count { font-size:10px; color:var(--text3); width:20px; text-align:right; }
.we-chips-wrap { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.we-aspect-chip { font-size:10px; padding:3px 8px; border-radius:4px; border:1px solid var(--border); color:var(--text2); }
.we-aspect-chip.harmony { border-color:#4ADE80; color:#4ADE80; }
.we-aspect-chip.tension { border-color:#F87171; color:#F87171; }
.we-retro-banner { background:rgba(248,113,113,.1); border:1px solid rgba(248,113,113,.3); border-radius:6px; padding:8px 12px; margin-bottom:12px; font-size:11px; color:#F87171; font-weight:500; }

/* --- Lifecycle Fortune (대운+세운 통합) --- */
.lc-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; overflow:hidden; margin-top:10px; }
.lc-tabs { display:flex; border-bottom:1px solid var(--border); }
.lc-tab { flex:1; padding:12px 0; font-size:12px; font-weight:500; text-align:center; background:none; border:none; color:var(--text3); cursor:pointer; font-family:var(--sans); position:relative; transition:color .2s; }
.lc-tab.active { color:var(--text1); }
.lc-tab.active::after { content:''; position:absolute; bottom:0; left:20%; right:20%; height:2px; background:var(--text1); }
.lc-panel { padding:16px 0 16px; }
#lc-panel-daeun .daeun-scroll { display:flex; gap:0; overflow-x:auto; padding:0 24px 12px; scrollbar-width:none; }
#lc-panel-daeun .daeun-scroll::-webkit-scrollbar { display:none; }
.lc-daeun-summary { margin:0 24px; padding:12px 14px; background:var(--surface2); border-radius:8px; display:flex; align-items:center; gap:10px; }
.lc-sipsin { font-size:13px; font-weight:600; color:var(--text1); white-space:nowrap; }
.lc-summary-text { font-size:12px; color:var(--text2); }
#lc-panel-seun { padding:16px 24px; }
.seun-chart-legend { display:flex; align-items:center; gap:12px; margin-top:8px; font-size:10px; color:var(--text2); flex-wrap:wrap; padding:0 4px; }
.seun-bar-wrap.seun-current .seun-bar { outline:2px solid var(--gold); outline-offset:-1px; }

/* --- Monthly Trend Chart (월별 운세 흐름) --- */
.mt-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; margin-top:10px; }
.mt-title { font-family:var(--serif); font-size:16px; font-weight:600; color:var(--text1); margin-bottom:8px; }
.mt-tabs { display:flex; gap:4px; margin-bottom:10px; }
.mt-tab { flex:1; padding:6px 0; border:1px solid var(--border); border-radius:16px; background:transparent; color:var(--text2); font-size:12px; font-weight:500; cursor:pointer; transition:all .2s; }
.mt-tab.active { background:var(--gold); color:#000; border-color:var(--gold); font-weight:700; }
.mt-tab:hover:not(.active) { background:var(--surface2); }
.mt-year { font-size:11px; color:var(--text3); font-weight:400; }
.mt-legend { display:flex; align-items:center; gap:12px; margin-top:8px; font-size:10px; color:var(--text2); flex-wrap:wrap; }
.mt-legend-item { display:flex; align-items:center; gap:4px; }
.mt-legend-dot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.mt-flow-title { font-size:12px; font-weight:600; color:var(--text1); margin:16px 0 8px; letter-spacing:.03em; }
.mt-flow-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:4px; }
@media(max-width:400px){ .mt-flow-grid { grid-template-columns:repeat(4,1fr); } }
.mt-flow-cell { background:var(--surface2); border:1px solid var(--border); border-radius:6px; padding:4px 2px; text-align:center; position:relative; border-left-width:3px; }
.mt-flow-month { font-size:9px; color:var(--text3); }
.mt-flow-badge { font-size:10px; font-weight:600; }
.mt-flow-mark { font-size:10px; line-height:1; }
.mt-flow-meta { font-size:11px; color:var(--text2); margin-top:8px; }
.mt-flow-base { font-size:10px; color:var(--text3); margin-top:4px; }

/* --- Timing Calendar Transit counts --- */
.tcc-transits { display:flex; gap:4px; justify-content:center; margin-bottom:4px; font-size:10px; }
.tcc-t-good { color:#4ADE80; }
.tcc-t-bad { color:#F87171; }

/* --- Friend Compare Details Wrapper --- */
.fc-details { background:var(--surface); border:1px solid var(--border); border-radius:12px; margin-top:10px; }
.fc-summary { padding:14px 16px; font-family:var(--serif); font-size:14px; font-weight:400; cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; color:var(--text2); }
.fc-summary::-webkit-details-marker { display:none; }
.fc-summary::after { content:'\25B8'; font-size:10px; transition:transform .2s; }
details[open] > .fc-summary::after { transform:rotate(90deg); }
.fc-details .friend-compare { padding:0 16px 16px; border:none; background:transparent; }

/* 3-Engine Architecture Styles (moved from inline) */

/* Override accent colors for the new theme */
:root {
  --ink: #1A1A1A;
  --ivory: #FAFAF5;
  --vermilion: #C73E1D;
  --bronze: #8B7355;
  --gold: #B8860B;
  --saju-color: #C73E1D;
  --astro-color: #8B7355;
  --iching-color: #2A2A2A;
  --integrated-color: #B8860B;
}
[data-theme="light"] {
  --iching-color: #444444;
}

/* Traditional pattern divider — cloud/wave SVG pattern */
.scroll-divider {
  display:flex;align-items:center;gap:12px;padding:16px 20px;
  font-size:11px;letter-spacing:.15em;color:var(--text3);text-transform:uppercase;
  font-family:var(--serif);font-weight:200;
}
.scroll-divider::before,.scroll-divider::after {
  content:'';flex:1;height:6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='6' viewBox='0 0 48 6'%3E%3Cpath d='M0 3 Q6 0 12 3 Q18 6 24 3 Q30 0 36 3 Q42 6 48 3' fill='none' stroke='%238B7355' stroke-width='0.6' opacity='0.35'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:48px 6px;
}

/* 3-axis radar dial */
.radar-dial {
  display:flex;justify-content:center;padding:8px 0;
}
.radar-dial svg { max-width:280px;width:100%; }

/* Score gauge (circular) — with tick marks and hanja label */
.score-gauge {
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  flex-direction:column;
}
.score-gauge .sg-num {
  position:absolute;font-size:28px;font-weight:200;font-family:'Noto Serif KR',Georgia,serif;
  top:50%;left:50%;transform:translate(-50%,-55%);
}
.score-gauge-sm .sg-num { font-size:18px; }
.score-gauge .sg-hanja {
  font-size:11px;font-family:var(--serif);font-weight:400;
  letter-spacing:.08em;margin-top:2px;color:var(--text3);
}

/* Home sub-panels — parchment card style */
.home-sub-panels {
  display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 20px;margin-top:10px;
}
.home-sub-panel {
  padding:14px;border:1px solid var(--border);background:var(--surface);
  cursor:pointer;transition:border-color .2s;
  position:relative;
  background-image: radial-gradient(ellipse at center, rgba(139,115,85,0.02) 0%, transparent 70%);
}
.home-sub-panel::after {
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, rgba(139,115,85,0.12), transparent);
}
.home-sub-panel:hover { border-color:var(--text3); }
.home-sub-panel .hsp-label {
  font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);margin-bottom:8px;
  font-family:var(--serif);
}
.home-sub-panel .hsp-score {
  font-size:28px;font-weight:200;font-family:'Noto Serif KR',Georgia,serif;
}
.home-sub-panel .hsp-name {
  font-size:12px;color:var(--text2);margin-top:6px;
}

/* Category fortune rows */
.cat-fortune-row {
  display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);
}
.cat-fortune-row:last-child { border-bottom:none; }
.cat-fortune-row .cfr-label { font-size:13px;color:var(--text2);width:55px;flex-shrink:0;font-family:var(--serif);font-weight:200; }
.cat-fortune-row .cfr-bar { flex:1;height:4px;background:var(--surface3);border-radius:2px;overflow:hidden; }
.cat-fortune-row .cfr-fill { height:100%;border-radius:2px;transition:width .6s ease; }
.cat-fortune-row .cfr-val { font-size:14px;width:36px;text-align:right;font-weight:200;font-family:'Noto Serif KR',Georgia,serif; }

/* Score transparency sheet */
.transparency-sheet {
  display:none;position:fixed;inset:0;z-index:9000;
}
.transparency-sheet.open { display:flex;flex-direction:column;justify-content:flex-end; }
.ts-overlay { flex:1;background:rgba(0,0,0,.6); }
.ts-body {
  max-height:70vh;overflow-y:auto;padding:20px;
  background:var(--surface);border-top:1px solid var(--border);
  animation:slideUp .3s ease;
}
.ts-handle {
  width:40px;height:4px;background:var(--border);border-radius:2px;
  margin:0 auto 16px;
}
.ts-title {
  font-family:var(--serif);font-size:18px;margin-bottom:16px;
}
.ts-item {
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--border);font-size:13px;
}
.ts-item:last-child { border-bottom:none; }
.ts-item .ts-desc { flex:1;color:var(--text2);line-height:1.5; }
.ts-item .ts-score {
  font-weight:600;min-width:48px;text-align:right;
}
.ts-item .ts-pos { color:#4ADE80; }
.ts-item .ts-neg { color:#F87171; }

/* IChing detail page — brush stroke / old document style */
.iching-detail-wrap {
  padding:20px;
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(139,115,85,0.04) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(199,62,29,0.02) 0%, transparent 50%);
}
.iching-hexagram-visual {
  display:flex;flex-direction:column-reverse;align-items:center;gap:8px;
  padding:24px 0;
}
.iching-line {
  display:flex;gap:10px;width:110px;height:7px;
}
.iching-line .il-seg {
  flex:1;height:7px;background:var(--text1);border-radius:3px 1px 2px 1px;
  /* Brush stroke feel: slightly uneven edges */
  box-shadow:0 1px 2px rgba(0,0,0,0.15);
}
.iching-line.yin .il-seg { flex:none;width:38%;border-radius:2px 1px 3px 1px; }
.iching-line.yin .il-gap { flex:none;width:24%; }
.iching-line.changing { position:relative; }
.iching-line.changing::after {
  content:'';position:absolute;right:-16px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--vermilion);
  box-shadow:0 0 6px rgba(199,62,29,0.4);
}

.iching-pair {
  display:flex;align-items:center;gap:24px;justify-content:center;padding:20px 0;
}
.iching-pair .ip-arrow {
  font-size:28px;color:var(--bronze);
  font-family:var(--serif);font-weight:200;
  margin-bottom:40px; /* align with hex lines, not label */
}
.iching-pair .ip-gua {
  text-align:center;
}
.iching-pair .ip-gua-name {
  font-family:var(--serif);font-size:24px;font-weight:200;margin-top:10px;
  letter-spacing:.05em;
}
.iching-pair .ip-gua-sub {
  font-size:12px;color:var(--text3);
}

/* Related gua diagram — parchment cards */
.related-gua-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px 0;
}
.related-gua-card {
  padding:14px;border:1px solid var(--border);text-align:center;
  background-image: radial-gradient(ellipse at center, rgba(139,115,85,0.03) 0%, transparent 70%);
  position:relative;
}
.related-gua-card::before {
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, transparent, rgba(139,115,85,0.15), transparent);
}
.related-gua-card .rgc-type {
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);margin-bottom:6px;
  font-family:var(--serif);
}
.related-gua-card .rgc-name {
  font-family:var(--serif);font-size:18px;font-weight:200;
}
.related-gua-card .rgc-sub {
  font-size:11px;color:var(--text2);margin-top:3px;
}

/* Timeline 3-line chart — enhanced observatory style */
.tl-3line-chart {
  padding:0 20px;margin-top:12px;
  background-image: radial-gradient(ellipse at 50% 30%, rgba(139,115,85,0.02) 0%, transparent 70%);
}
.tl-3line-legend {
  display:flex;gap:14px;justify-content:center;padding:8px 0;font-size:11px;color:var(--text2);
  font-family:var(--serif);font-weight:200;
}
.tl-3line-legend span { display:flex;align-items:center;gap:5px; }
.legend-dot { width:10px;height:3px;border-radius:1px; }
.legend-dot.saju { background:var(--saju-color); }
.legend-dot.astro { background:var(--astro-color); }
.legend-dot.iching { background:var(--iching-color); }
.legend-dot.integrated { background:var(--gold);height:2px;border-top:1px dashed var(--gold); }
.tl-chart-zoom-wrap {
  overflow:hidden;touch-action:pan-y pinch-zoom;position:relative;
  transition:transform .2s ease;transform-origin:center center;
}
.tl-chart-zoom-wrap.zoomed { overflow:auto;-webkit-overflow-scrolling:touch; }
.tl-chart-zoom-wrap svg { transition:transform .15s ease; }

/* ═══════════════════════════════════════════════════
   TIMELINE v2 — Range Tabs (Feature 3 - QA fix)
   ═══════════════════════════════════════════════════ */
.tl-chart-header { display:flex; align-items:center; justify-content:space-between; padding:14px 0 6px; }
.tl-chart-title { font-size:15px; font-family:var(--serif); font-weight:400; color:var(--text1); letter-spacing:.03em; }
.tl-range-tabs { display:flex; gap:4px; }
.tl-range-tab { background:var(--surface2); border:1px solid var(--border); border-radius:12px; padding:3px 10px; font-size:11px; color:var(--text3); cursor:pointer; font-family:var(--sans); transition:all .2s; }
.tl-range-tab:hover { color:var(--text1); border-color:var(--text2); }
.tl-range-tab.active { background:var(--text1); color:var(--surface); border-color:var(--text1); font-weight:600; }

/* ═══════════════════════════════════════════════════
   TIMELINE v2 — Chart Stats + Trend (Feature 3 - QA fix)
   ═══════════════════════════════════════════════════ */
.tl-chart-stats { display:flex; align-items:center; justify-content:center; gap:8px; padding:6px 0 4px; font-size:11px; color:var(--text2); font-family:var(--sans); }
.tl-stat-item { display:inline-flex; align-items:center; gap:3px; }
.tl-stat-item b { font-weight:600; }
.tl-stat-divider { color:var(--border); font-size:10px; }
.tl-trend-badge { font-size:11px; font-weight:600; display:inline-flex; align-items:center; gap:3px; }

/* ═══════════════════════════════════════════════════
   TIMELINE v2 — Planet Energy Details (Feature 3 - QA fix)
   ═══════════════════════════════════════════════════ */
.tl-planet-details { margin:4px 0 8px; background:var(--surface2); border-radius:8px; }
.tl-planet-details summary { padding:10px 14px; font-size:11px; letter-spacing:.06em; color:var(--text3); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.tl-planet-details summary::-webkit-details-marker { display:none; }
.tl-planet-details summary::after { content:'\25B8'; font-size:10px; transition:transform .2s; }
.tl-planet-details[open] > summary::after { transform:rotate(90deg); }
.tl-planet-body { padding:0 14px 12px; }
.tl-planet-row { display:flex; align-items:center; gap:8px; padding:4px 0; }
.tl-planet-name { font-size:11px; color:var(--text2); width:32px; flex-shrink:0; font-weight:500; }
.tl-planet-bar-bg { flex:1; height:6px; background:var(--surface3); border-radius:3px; overflow:hidden; }
.tl-planet-bar-fill { height:100%; border-radius:3px; transition:width .4s ease; }
.tl-planet-count { font-size:10px; color:var(--text3); width:18px; text-align:right; flex-shrink:0; font-variant-numeric:tabular-nums; }

/* Info tooltip button */
.info-btn {
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;border-radius:50%;border:1px solid var(--border);
  font-size:10px;color:var(--text3);cursor:pointer;background:transparent;
  transition:all .2s;vertical-align:middle;margin-left:4px;
}
.info-btn:hover { border-color:var(--text2);color:var(--text1); }

/* IChing sparkline */
.sparkline-row {
  display:flex;align-items:center;gap:8px;padding:8px 0;
}
.sparkline-row .sr-label { font-size:11px;color:var(--text3);width:60px; }
.sparkline-row svg { flex:1;max-width:200px; }

/* Gua history list — parchment style */
.gua-history { padding:12px 0; }
.gua-history-item {
  display:flex;align-items:center;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--border);font-size:13px;
}
.gua-history-item:last-child { border-bottom:none; }
.gua-history-item .ghi-date { color:var(--text3);width:50px;font-size:12px; }
.gua-history-item .ghi-name { flex:1;font-family:var(--serif);font-weight:200; }
.gua-history-item .ghi-score { font-weight:200;font-family:'Noto Serif KR',Georgia,serif;font-size:14px; }

/* Enhanced scroll dividers — traditional lotus/cloud SVG pattern */
.scroll-divider-strong {
  display:flex;align-items:center;gap:14px;padding:22px 20px;
  font-size:12px;letter-spacing:.2em;color:var(--bronze);text-transform:uppercase;
  font-family:var(--serif);font-weight:200;
}
.scroll-divider-strong::before,.scroll-divider-strong::after {
  content:'';flex:1;height:10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='10' viewBox='0 0 60 10'%3E%3Cpath d='M0 5 Q5 1 10 5 Q15 9 20 5 Q25 1 30 5 Q35 9 40 5 Q45 1 50 5 Q55 9 60 5' fill='none' stroke='%23C73E1D' stroke-width='0.6' opacity='0.3'/%3E%3Cpath d='M0 5 Q7.5 2.5 15 5 Q22.5 7.5 30 5 Q37.5 2.5 45 5 Q52.5 7.5 60 5' fill='none' stroke='%238B7355' stroke-width='0.4' opacity='0.25'/%3E%3Ccircle cx='15' cy='5' r='1.2' fill='%238B7355' opacity='0.2'/%3E%3Ccircle cx='45' cy='5' r='1.2' fill='%238B7355' opacity='0.2'/%3E%3C/svg%3E");
  background-repeat:repeat-x;
  background-size:60px 10px;
}

/* Timeline date popup */
.tl-date-popup {
  position:absolute;left:50%;transform:translateX(-50%);
  background:var(--surface);border:1px solid var(--border);
  padding:10px 14px;min-width:140px;z-index:100;
  box-shadow:0 4px 20px rgba(0,0,0,.3);pointer-events:none;
  animation:fadeIn .2s ease;
}
.tl-date-popup .tdp-date {
  font-size:12px;font-weight:600;color:var(--text1);margin-bottom:8px;text-align:center;
}
.tl-date-popup .tdp-row {
  display:flex;justify-content:space-between;align-items:center;padding:3px 0;font-size:11px;
}
.tl-date-popup .tdp-label { color:var(--text3); }
.tl-date-popup .tdp-val { font-weight:600; }

/* Mini gauge for sub-panels */
.hsp-mini-gauge { display:inline-block;vertical-align:middle;margin-right:4px; }

/* Astro energy gauge section */
.astro-gauge-section {
  text-align:center;padding:20px 0 16px;
}

/* Tab nav override for 4 tabs */
.tab-nav {
  display:flex;
}
.screen#onboarding.active ~ .tab-nav,
.tab-nav.ob-hidden { display:none !important; }
.tab-nav .tab-item { flex:1; }
.tab-nav .tab-label { font-family:var(--sans);font-weight:400;letter-spacing:.03em; }

/* Fortune Unified Tabs */
.fu-tabs {
  display:flex;gap:0;border-bottom:1px solid var(--border);padding:0 20px;background:var(--surface);
}
.fu-tab {
  flex:1;padding:12px 8px;text-align:center;font-size:14px;font-family:var(--sans);font-weight:500;
  color:var(--text3);background:none;border:none;cursor:pointer;
  position:relative;transition:color .2s;letter-spacing:.03em;
}
.fu-tab.active { color:var(--text1); }
.fu-tab::after {
  content:'';position:absolute;bottom:0;left:20%;right:20%;height:2px;
  background:transparent;transition:background .2s;border-radius:1px;
}
.fu-tab[data-engine="saju"].active::after { background:var(--saju-color); }
.fu-tab[data-engine="astro"].active::after { background:var(--astro-color); }
.fu-tab[data-engine="iching"].active::after { background:var(--iching-color); }

/* Fortune Unified Tabs V2 (gauge + label) */
.fu-tabs-v2 {
  display:flex;gap:0;padding:12px 20px 0;background:var(--surface);border-bottom:1px solid var(--border);
}
.futv2-item {
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding-bottom:10px;
  position:relative;cursor:pointer;
}
.futv2-item::after {
  content:'';position:absolute;bottom:0;left:20%;right:20%;height:2.5px;
  background:transparent;transition:background .2s;border-radius:1px;
}
.futv2-item[data-engine="saju"].active::after { background:var(--saju-color,#C73E1D); }
.futv2-item[data-engine="astro"].active::after { background:var(--astro-color,#8B7355); }
.futv2-item[data-engine="iching"].active::after { background:var(--iching-color,#2A2A2A); }
.futv2-gauge {
  position:relative;width:44px;height:44px;cursor:pointer;
}
.futv2-gauge svg { display:block; }
.futv2-score {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:700;font-family:var(--sans);
}
.futv2-label {
  font-size:13px;font-weight:500;color:var(--text3);letter-spacing:.03em;transition:color .2s;
}
.futv2-item.active .futv2-label { color:var(--text1);font-weight:600; }

/* Fortune Unified Content Cards */
.fu-card {
  margin:12px 20px;padding:16px;border:1px solid var(--border);background:var(--surface);
  background-image: radial-gradient(ellipse at center, rgba(139,115,85,0.02) 0%, transparent 70%);
}
.fu-card-title {
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text3);
  margin-bottom:10px;font-family:var(--serif);
}
.fu-card-body { font-size:14px;color:var(--text2);line-height:1.7; }
.fu-card-body strong { color:var(--text1); }

/* Saju score bar rows in fu */
.fu-score-bar {
  display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);
}
.fu-score-bar:last-child { border-bottom:none; }
.fu-score-bar .fsb-label { font-size:13px;color:var(--text2);width:55px;flex-shrink:0;font-family:var(--serif);font-weight:200; }
.fu-score-bar .fsb-bar { flex:1;height:4px;background:var(--surface3);border-radius:2px;overflow:hidden; }
.fu-score-bar .fsb-fill { height:100%;border-radius:2px;transition:width .6s ease; }
.fu-score-bar .fsb-val { font-size:14px;width:36px;text-align:right;font-weight:200;font-family:'Noto Serif KR',Georgia,serif; }

/* Natal chart container in fu */
#fu-natal-chart, #tv2a-natal-chart { text-align:center;padding:16px 0;position:relative; }
#fu-natal-chart svg, #tv2a-natal-chart svg { max-width:300px; }
.fu-natal-score-overlay {
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  cursor:pointer;text-align:center;z-index:2;
}
.fu-natal-score-overlay .fns-num {
  font-size:24px;font-weight:200;font-family:'Noto Serif KR',Georgia,serif;
  color:#333;line-height:1;
}
.fu-natal-score-overlay .fns-label {
  font-size:8px;color:#888;letter-spacing:.1em;margin-top:1px;
}

/* ===== 12-House Energy Map (Astro Tab) ===== */
.fu-astro-info-bar {
  padding:12px 20px;font-size:12px;color:var(--text2);text-align:center;
  border-bottom:1px solid var(--border);line-height:1.6;
  font-family:var(--sans);letter-spacing:.02em;
}
.fu-astro-info-bar .fai-date { font-weight:600;color:var(--text1); }
.fu-astro-info-bar .fai-asc { color:var(--text3);font-size:11px; }

.fu-house-section {
  padding:0 20px;
}
.fu-house-item {
  padding:20px 0;
  border-bottom:1px solid var(--border);
}
.fu-house-item:last-child { border-bottom:none; }

.fu-house-header {
  display:flex;align-items:center;gap:8px;margin-bottom:8px;
}
.fu-house-header .fhh-icon { font-size:18px; }
.fu-house-header .fhh-title {
  font-size:14px;font-weight:600;color:var(--text1);font-family:var(--sans);
}
.fu-house-desc {
  font-size:13px;color:var(--text3);line-height:1.6;margin-bottom:12px;
  font-family:var(--sans);
}

.fu-planet-card {
  margin:8px 0;padding:12px;border:1px solid var(--border);
  background:var(--surface);position:relative;
  border-left:3px solid var(--border);
  transition:opacity .3s;
}
.fu-planet-card.active { border-left-color:var(--astro-color);opacity:1;background:var(--surface2); }
.fu-planet-card.inactive { opacity:0.3;filter:grayscale(0.5); }
.fu-house-item.empty-house { opacity:0.35; }
.fu-house-item.empty-house .fu-house-header { opacity:0.7; }
.fu-house-item.has-active { border-left:2px solid var(--astro-color); }
.fu-planet-card .fpc-planet-row {
  display:flex;align-items:center;gap:6px;margin-bottom:4px;
}
.fu-planet-card .fpc-glyph { font-size:16px; }
.fu-planet-card .fpc-name { font-size:14px;font-weight:600;color:var(--text1); }
.fu-planet-card .fpc-keyword { font-size:12px;color:var(--text3); }
.fu-planet-card .fpc-zodiac-row {
  display:flex;align-items:center;gap:6px;margin-bottom:6px;
  font-size:12px;color:var(--text2);
}
.fu-planet-card .fpc-interp {
  font-size:13px;color:var(--text2);line-height:1.6;
}

.fu-aspect-card {
  margin:6px 0;padding:10px 12px;
  border-left:3px solid #888;
  background:var(--surface);font-size:13px;
}
.fu-aspect-card.positive { border-left-color:#4ADE80; }
.fu-aspect-card.negative { border-left-color:#F87171; }
.fu-aspect-card .fac-header {
  display:flex;align-items:center;gap:6px;font-weight:600;margin-bottom:4px;
}
.fu-aspect-card .fac-header .fac-arrow-up { color:#4ADE80; }
.fu-aspect-card .fac-header .fac-arrow-down { color:#F87171; }
.fu-aspect-card .fac-desc {
  font-size:12px;color:var(--text3);line-height:1.5;
}

.fu-summary-card {
  margin:16px 20px;padding:16px;border:1px solid var(--border);
  background:var(--surface);
  background-image: radial-gradient(ellipse at center, rgba(139,115,85,0.02) 0%, transparent 70%);
}
.fu-summary-card .fsc-title {
  font-size:13px;font-weight:600;color:var(--text1);margin-bottom:8px;
}
.fu-summary-card .fsc-body {
  font-size:13px;color:var(--text2);line-height:1.7;
}
.fc-details .fc-title { display:none; }

/* ========================================
   YEARLY FORTUNE — 년도별 종합운세
   ======================================== */
.yf-header {
  text-align:center;padding:28px 20px 20px;
}
.yf-year-select {
  display:inline-flex;align-items:center;gap:10px;margin-bottom:16px;
}
.yf-year-select select {
  appearance:none;-webkit-appearance:none;
  background:var(--surface2);color:var(--text1);border:1px solid var(--border);
  padding:8px 32px 8px 14px;font-size:16px;font-family:var(--serif);
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23888' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;
}
.yf-ganji-badge {
  font-family:var(--serif);font-size:28px;font-weight:200;letter-spacing:.06em;
  color:var(--text1);margin-bottom:6px;
}
.yf-meta {
  font-size:12px;color:var(--text3);line-height:1.8;
}
.yf-meta span { margin:0 6px; }

.yf-section {
  padding:20px 20px;border-top:1px solid var(--border);
  opacity:0;transform:translateY(18px);
  transition:opacity .45s ease,transform .45s ease;
}
.yf-section.yf-visible {
  opacity:1;transform:translateY(0);
}
.yf-section-title {
  font-family:var(--serif);font-size:15px;font-weight:700;letter-spacing:.08em;
  color:var(--text1);margin-bottom:14px;display:flex;align-items:center;gap:8px;
}
.yf-section-title .yf-icon {
  font-size:16px;display:inline-block;width:22px;text-align:center;
}

/* 총평 카드 */
.yf-summary-card {
  padding:18px 16px;border:1px solid var(--border);background:var(--surface);margin-bottom:16px;
  background-image:radial-gradient(ellipse at center,rgba(139,115,85,0.03) 0%,transparent 70%);
}
.yf-keywords {
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;
}
.yf-keyword {
  font-size:12px;color:var(--bronze);padding:3px 10px;border:1px solid rgba(139,115,85,0.3);
  letter-spacing:.03em;font-weight:500;
}
.yf-engine-summary {
  padding:10px 12px;border-left:2px solid var(--border);margin-top:10px;
  font-size:13px;color:var(--text2);line-height:1.7;
}
.yf-engine-summary .yf-engine-label {
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3);
  font-weight:600;margin-bottom:4px;display:block;
}

/* 월 선택 탭 */
.yf-month-selector {
  margin: 12px 0 16px;
  padding: 8px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--border);
  display: flex;
  gap: 10px;
  align-items: stretch;
}
.yf-tab-total {
  width: 42px;
  min-height: 82px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  flex-shrink: 0;
  flex-direction: column;
  gap: 2px;
}
.yf-month-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.yf-month-row {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.yf-month-tab {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  background: var(--surface2);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: all .25s ease;
  user-select: none;
}
.yf-month-tab:hover {
  border-color: var(--bronze);
  color: var(--bronze);
}
.yf-month-tab.active {
  background: var(--bronze);
  color: #fff;
  border-color: var(--bronze);
  box-shadow: 0 2px 8px rgba(205,175,125,0.3);
}

/* 아코디언 (카테고리별 해설) */
.yf-accordion {
  border:1px solid var(--border);margin-bottom:8px;overflow:hidden;
}
.yf-acc-header {
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;cursor:pointer;background:var(--surface);
  transition:background .2s;
}
.yf-acc-header:hover { background:var(--surface2); }
.yf-acc-left {
  display:flex;align-items:center;gap:10px;
}
.yf-acc-icon { font-size:18px;width:24px;text-align:center; }
.yf-acc-name { font-size:14px;font-weight:600;color:var(--text1); }
.yf-acc-score {
  font-size:13px;font-weight:700;
}
.yf-acc-grade {
  font-size:11px;padding:2px 8px;margin-left:8px;letter-spacing:.04em;
}
.yf-acc-grade.grade-up { color:#B388FF;border:1px solid rgba(179,136,255,0.3); }
.yf-acc-grade.grade-good { color:#87CEEB;border:1px solid rgba(135,206,235,0.3); }
.yf-acc-grade.grade-mid { color:#98E8C1;border:1px solid rgba(152,232,193,0.3); }
.yf-acc-grade.grade-warn { color:#E8D5B7;border:1px solid rgba(232,213,183,0.3); }
.yf-acc-grade.grade-down { color:#F8A4B8;border:1px solid rgba(248,164,184,0.3); }
.yf-acc-arrow {
  font-size:12px;color:var(--text3);transition:transform .3s;
}
.yf-accordion.open .yf-acc-arrow { transform:rotate(180deg); }
.yf-acc-body {
  max-height:0;overflow:hidden;transition:max-height .4s ease;
  padding:0 16px;
}
.yf-accordion.open .yf-acc-body {
  max-height:2500px;padding:0 16px 16px;
}
.yf-perspective {
  padding:12px 0;border-bottom:1px solid var(--border);
}
.yf-perspective:last-child { border-bottom:none; }
.yf-persp-label {
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;margin-bottom:6px;padding:2px 8px;display:inline-block;
}
.yf-persp-label.saju { color:#FF9800;border:1px solid rgba(255,152,0,0.3); }
.yf-persp-label.iching { color:#4CAF50;border:1px solid rgba(76,175,80,0.3); }
.yf-persp-label.astro { color:#7C3AED;border:1px solid rgba(124,58,237,0.3); }
.yf-persp-text {
  font-size:13px;color:var(--text2);line-height:1.8;margin-top:4px;
}

/* 월별 차트 */
.yf-chart-wrap {
  padding:8px 0;overflow-x:auto;
}
.yf-chart-legend {
  display:flex;gap:16px;justify-content:center;margin-bottom:12px;
}
.yf-chart-legend span {
  font-size:11px;color:var(--text3);display:flex;align-items:center;gap:4px;
}
.yf-chart-legend .dot {
  width:8px;height:8px;border-radius:50%;display:inline-block;
}
.yf-month-popup {
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
  z-index:9999;background:var(--surface);border:1px solid var(--border);
  padding:20px;min-width:280px;max-width:340px;
  box-shadow:0 8px 32px rgba(0,0,0,0.5);
}
.yf-month-popup-overlay {
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9998;
  background:rgba(0,0,0,0.5);
}
.yf-month-popup .yf-mp-close {
  position:absolute;top:8px;right:12px;font-size:18px;color:var(--text3);
  cursor:pointer;background:none;border:none;
}
.yf-month-popup .yf-mp-title {
  font-family:var(--serif);font-size:16px;font-weight:600;margin-bottom:12px;
}
.yf-month-popup .yf-mp-row {
  display:flex;align-items:center;gap:8px;padding:6px 0;
  font-size:13px;color:var(--text2);
}
.yf-month-popup .yf-mp-row .yf-mp-label {
  font-size:10px;font-weight:700;letter-spacing:.08em;
}

/* 행운 아이템 카드 */
.yf-lucky-scroll {
  display:flex;gap:12px;overflow-x:auto;padding:4px 0 12px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.yf-lucky-scroll::-webkit-scrollbar { display:none; }
.yf-lucky-card {
  flex:0 0 130px;padding:14px 12px;border:1px solid var(--border);
  background:var(--surface);text-align:center;
}
.yf-lucky-card .ylc-icon { font-size:22px;margin-bottom:6px; }
.yf-lucky-card .ylc-title {
  font-size:11px;color:var(--text3);letter-spacing:.06em;margin-bottom:4px;
}
.yf-lucky-card .ylc-value {
  font-size:13px;color:var(--text1);font-weight:500;line-height:1.5;
}
.yf-color-chips {
  display:flex;gap:6px;justify-content:center;margin-top:6px;
}
.yf-color-chip {
  width:20px;height:20px;border-radius:50%;border:1px solid var(--border);
}

/* 개운법 분기 카드 */
.yf-quarter-card {
  padding:14px 16px;border:1px solid var(--border);background:var(--surface);
  margin-bottom:8px;
}
.yf-quarter-card .yqc-title {
  font-size:13px;font-weight:700;color:var(--text1);margin-bottom:6px;
}
.yf-quarter-card .yqc-body {
  font-size:13px;color:var(--text2);line-height:1.7;
}
.yf-do-dont {
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px;
}
.yf-do-box {
  padding:12px;border-radius:0;
}
.yf-do-box.do-box {
  background:rgba(74,222,128,0.06);border:1px solid rgba(74,222,128,0.2);
}
.yf-do-box.dont-box {
  background:rgba(248,113,113,0.06);border:1px solid rgba(248,113,113,0.2);
}
.yf-do-box .ydb-title {
  font-size:11px;font-weight:700;letter-spacing:.08em;margin-bottom:8px;
}
.yf-do-box.do-box .ydb-title { color:#4ADE80; }
.yf-do-box.dont-box .ydb-title { color:#F87171; }
.yf-do-box .ydb-item {
  font-size:12px;color:var(--text2);line-height:1.6;padding:2px 0;
}

/* 주역 년괘 카드 */
.yf-gua-pair {
  display:flex;align-items:center;justify-content:center;gap:20px;
  padding:16px 0;
}
.yf-gua-card {
  padding:16px;border:1px solid var(--border);background:var(--surface);
  margin-bottom:12px;
  background-image:radial-gradient(ellipse at center,rgba(139,115,85,0.02) 0%,transparent 70%);
}
.yf-gua-card .ygc-label {
  font-size:10px;color:var(--text3);letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:6px;font-weight:600;
}

/* SNS 공유 카드 */
.yf-share-section {
  text-align:center;padding:20px 0;
}
.yf-share-btn {
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border:1px solid var(--border);background:var(--surface);
  color:var(--text1);font-size:13px;font-weight:500;cursor:pointer;
  transition:background .2s;font-family:var(--sans);
}
.yf-share-btn:hover { background:var(--surface2); }

/* AI 더 물어보기 */
.yf-ai-btn {
  display:block;width:calc(100% - 40px);margin:0 20px;padding:12px;
  border:1px solid var(--border);background:var(--surface);
  color:var(--text1);font-size:13px;text-align:center;cursor:pointer;
  transition:background .2s;font-family:var(--sans);
}
.yf-ai-btn:hover { background:var(--surface2); }

/* 년운 공유 바텀시트 */
.yf-share-sheet {
  position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999;
  display:none;
}
.yf-share-sheet.open { display:block; }
.yf-share-sheet .yfs-overlay {
  position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.5);
}
.yf-share-sheet .yfs-body {
  position:absolute;bottom:0;left:0;right:0;max-width:440px;margin:0 auto;
  background:var(--surface);border-top:1px solid var(--border);
  padding:20px 20px 36px;
  transform:translateY(100%);transition:transform .3s ease;
}
.yf-share-sheet.open .yfs-body { transform:translateY(0); }
.yf-share-sheet .yfs-handle {
  width:36px;height:4px;background:var(--text3);margin:0 auto 16px;opacity:0.4;
}
.yf-share-tpl-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;
}
.yf-share-tpl {
  padding:12px;border:1px solid var(--border);background:var(--surface2);
  cursor:pointer;text-align:center;transition:border-color .2s;
}
.yf-share-tpl.selected { border-color:var(--bronze); }
.yf-share-tpl .yst-name {
  font-size:12px;color:var(--text2);margin-top:6px;
}
.yf-share-actions {
  display:flex;gap:10px;
}
.yf-share-actions button {
  flex:1;padding:12px;border:1px solid var(--border);background:var(--surface2);
  color:var(--text1);font-size:13px;cursor:pointer;font-family:var(--sans);
  transition:background .2s;
}
.yf-share-actions button:hover { background:var(--surface3); }

/* 오행 오라 */
.yf-aura-wrap {
  display:flex;justify-content:center;padding:16px 0;
  margin-top:8px;
}
.yf-aura-wrap svg {
  filter:drop-shadow(0 0 12px rgba(255,255,255,0.05));
}

/* Today Fortune V2 — Gauge Visualization */
.tv2-gauge-wrap {
  display:flex;flex-direction:column;align-items:center;
  padding:20px 0 8px;margin-top:8px;
}
.tv2-gauge-wrap svg {
  filter:drop-shadow(0 2px 16px rgba(0,0,0,0.06));
}
.tv2-engine-legend {
  display:flex;justify-content:center;gap:16px;margin-top:10px;
  padding:8px 16px;background:var(--surface);border-radius:20px;
  border:1px solid var(--border);
}
.tv2-legend-item {
  display:flex;align-items:center;gap:5px;font-size:12px;color:var(--text2);
}
.tv2-legend-item strong {
  font-weight:700;color:var(--text1);
}
.tv2-legend-dot {
  width:8px;height:8px;border-radius:50%;flex-shrink:0;
}

/* 사주 상세 V2 (tv2s-) */
.tv2s-hero {
  background:linear-gradient(135deg, rgba(180,160,100,0.12) 0%, rgba(180,160,100,0.03) 100%);
  border:1px solid var(--bronze);border-radius:14px;
  padding:22px 18px 18px;text-align:center;
  position:relative;overflow:hidden;margin-bottom:4px;
}
.tv2s-hero::before {
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 30% 0%, rgba(180,160,100,0.08) 0%, transparent 60%);
  pointer-events:none;
}
.tv2s-hero-date { font-size:11px;color:var(--text3);letter-spacing:.1em;margin-bottom:10px; }
.tv2s-hero-ganji { display:flex;align-items:baseline;justify-content:center;gap:10px;margin-bottom:8px; }
.tv2s-hero-oh { font-size:38px;font-family:var(--serif);font-weight:700;line-height:1; }
.tv2s-hero-ganji-text { font-size:22px;font-weight:600;color:var(--text1);font-family:var(--serif); }
.tv2s-hero-sipsin { font-size:14px;font-weight:600;color:var(--text1);margin-bottom:12px; }
.tv2s-key-message {
  display:flex;align-items:flex-start;gap:8px;
  font-size:13px;color:var(--text2);line-height:1.7;text-align:left;
  padding:12px 14px;background:var(--surface);border-radius:10px;border:1px solid var(--border);
}
.tv2s-km-icon { font-size:18px;flex-shrink:0;margin-top:1px; }
.tv2s-pillars { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px; }
.tv2s-pillar {
  text-align:center;padding:12px 6px 10px;
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
}
.tv2s-pillar-me {
  border-color:var(--bronze);
  background:linear-gradient(180deg, rgba(180,160,100,0.08) 0%, var(--surface) 100%);
  box-shadow:0 2px 8px rgba(180,160,100,0.12);
}
.tv2s-p-label { font-size:10px;font-weight:600;color:var(--text3);letter-spacing:.08em;margin-bottom:2px; }
.tv2s-p-desc { font-size:9px;color:var(--text3);margin-bottom:8px;opacity:0.7; }
.tv2s-p-stem { font-size:26px;font-family:var(--serif);font-weight:700;line-height:1.2; }
.tv2s-p-branch { font-size:22px;font-family:var(--serif);color:var(--text1);line-height:1.3; }
.tv2s-p-oh { font-size:10px;color:var(--text2);margin-top:6px; }
.tv2s-today-pillar {
  background:var(--surface);border:1px solid var(--border);border-radius:10px;
  padding:14px;text-align:center;margin-top:10px;border-top:2px solid var(--bronze);
}
.tv2s-layer { border-bottom:1px solid var(--border); }
.tv2s-layer:last-child { border-bottom:none; }

/* ═══════════════════════════════════════════════════
   TIMELINE v2 — Today Hero Card (Feature 1)
   ═══════════════════════════════════════════════════ */
.thc-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:20px; margin-bottom:10px; cursor:pointer; transition:border-color .2s; }
.thc-card:hover { border-color:var(--text2); }
.thc-top { display:flex; align-items:flex-start; gap:20px; margin-bottom:12px; }
.thc-main { flex-shrink:0; }
.thc-score { font-size:52px; font-weight:200; font-family:var(--serif); line-height:1; }
.thc-score-label { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); margin-top:4px; }
.thc-nav { flex:1; display:flex; align-items:center; justify-content:space-around; padding:10px 0; }
.thc-nav-item { display:flex; flex-direction:column; align-items:center; gap:2px; }
.thc-nav-val { font-size:18px; font-weight:300; font-family:var(--serif); }
.thc-nav-label { font-size:9px; color:var(--text3); letter-spacing:.06em; text-transform:uppercase; }
.thc-nav-divider { width:1px; height:28px; background:var(--border); }
.thc-badges { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.thc-resonance { font-size:10px; padding:2px 8px; border-radius:10px; border:1px solid; font-weight:500; }
.thc-grade { font-size:11px; color:var(--text2); font-weight:500; }
.thc-cats { display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.thc-cat-row { display:flex; align-items:center; gap:8px; }
.thc-cat-label { font-size:11px; color:var(--text2); width:28px; flex-shrink:0; }
.thc-cat-bar-bg { flex:1; height:4px; background:var(--surface3); border-radius:2px; overflow:hidden; }
.thc-cat-bar-fill { height:100%; border-radius:2px; transition:width .6s ease; }
.thc-cat-val { font-size:11px; font-variant-numeric:tabular-nums; width:22px; text-align:right; flex-shrink:0; }
.thc-engines { border-top:1px solid var(--border); padding-top:10px; }
.thc-engine-row { display:flex; align-items:flex-start; gap:8px; padding:6px 0; }
.thc-engine-bar { width:3px; min-height:20px; border-radius:2px; flex-shrink:0; align-self:stretch; }
.thc-engine-label { font-size:11px; font-weight:600; letter-spacing:.04em; width:24px; flex-shrink:0; color:var(--text2); padding-top:2px; }
.thc-engine-score { font-size:15px; font-weight:300; font-family:var(--serif); min-width:28px; text-align:right; flex-shrink:0; }
.thc-engine-desc { font-size:10px; color:var(--text3); flex:1; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.thc-engine-descs { flex:1; min-width:0; }
.thc-engine-desc-line { font-size:11px; color:var(--text3); line-height:1.4; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
@media(max-width:360px){
  .thc-score { font-size:40px; }
  .thc-top { gap:12px; }
  .thc-nav-val { font-size:15px; }
}

/* ═══════════════════════════════════════════════════
   TIMELINE v2 — Time of Day action line (Feature 2)
   ═══════════════════════════════════════════════════ */
.tod-action-line { padding:10px 12px; margin-top:8px; background:var(--surface2); border-radius:6px; font-size:12px; color:var(--text1); line-height:1.5; display:flex; align-items:center; gap:6px; }
.tod-action-icon { color:var(--text3); font-weight:700; }

/* ═══════════════════════════════════════════════════
   TIMELINE v2 — Weekly Energy more button (Feature 4)
   ═══════════════════════════════════════════════════ */
.we-more-btn { margin-top:10px; text-align:center; font-size:11px; color:var(--text3); cursor:pointer; padding:6px; transition:color .2s; }
.we-more-btn:hover { color:var(--text1); }

/* ═══════════════════════════════════════════════════
   TIMELINE v2 — Monthly Calendar badges (Feature 5+11)
   ═══════════════════════════════════════════════════ */
.tcc-peak-badge { font-size:9px; color:#4ADE80; font-weight:700; margin:2px 0; }
.tcc-trough-badge { font-size:9px; color:#F87171; font-weight:700; margin:2px 0; }
.tcc-moons { display:flex; gap:4px; justify-content:center; margin:2px 0; }
.tcc-moon { font-size:9px; color:var(--text3); }
.tcc-transits { display:flex; gap:4px; justify-content:center; margin:4px 0; }
.tcc-t-good { font-size:10px; color:#4ADE80; }
.tcc-t-bad { font-size:10px; color:#F87171; }

/* ═══════════════════════════════════════════════════
   UNIFIED POPUP PATTERN (Feature 8) — .up-*
   ═══════════════════════════════════════════════════ */
.up-popup { padding:8px 0 20px; }
.up-title { font-family:var(--serif); font-size:18px; text-align:center; padding:8px 0 4px; border-bottom:2px solid var(--text1); margin-bottom:16px; }
.up-score-hero { text-align:center; margin-bottom:16px; }
.up-score-big { font-size:48px; font-weight:200; font-family:var(--serif); display:block; line-height:1.1; }
.up-score-sub { font-size:12px; color:var(--text2); display:block; margin-top:4px; }
.up-interpret { padding:14px; background:var(--surface2); border-radius:8px; margin-bottom:14px; font-size:13px; line-height:1.7; color:var(--text1); }
.up-action-group { margin-bottom:14px; }
.up-action-do { margin-bottom:12px; padding-left:12px; border-left:2px solid #4ADE80; }
.up-action-caution { padding-left:12px; border-left:2px solid #F87171; }
.up-action-label { font-size:11px; letter-spacing:.06em; font-weight:600; margin-bottom:6px; }
.up-action-do .up-action-label { color:#4ADE80; }
.up-action-caution .up-action-label { color:#F87171; }
.up-action-text { font-size:13px; color:var(--text1); line-height:1.5; margin-bottom:4px; }
.up-action-caution .up-action-text { color:var(--text2); }
.up-details { margin-top:12px; background:var(--surface2); border-radius:8px; }
.up-details summary { padding:10px 14px; font-size:11px; letter-spacing:.06em; color:var(--text3); cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; }
.up-details summary::-webkit-details-marker { display:none; }
.up-details summary::after { content:'\25B8'; font-size:10px; transition:transform .2s; }
details[open] > .up-details summary::after, .up-details[open] > summary::after { transform:rotate(90deg); }
.up-details-body { padding:0 14px 12px; font-size:12px; color:var(--text2); line-height:1.6; border-left:2px solid var(--text3); margin-left:14px; }
.up-source { font-size:10px; color:var(--text3); text-align:right; margin-top:10px; letter-spacing:.02em; }

/* ═══ AI Category Chips ═══ */
.ai-cat-chips { padding: 16px 0; }
.ai-cat-title { font-size: 15px; font-weight: 600; color: var(--text1); margin-bottom: 12px; text-align: center; }
.ai-cat-grid { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ai-cat-chip { padding: 10px 16px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); color: var(--text1); font-size: 13px; cursor: pointer; transition: all .2s; font-family: var(--sans); }
.ai-cat-chip:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.ai-cat-chip:active { background: var(--gold); color: #000; border-color: var(--gold); }

/* ═══ AI Follow-up Chips ═══ */
.ai-followup-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 0; margin-top: 8px; }
.ai-followup-chip { padding: 6px 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface2); color: var(--text2); font-size: 12px; cursor: pointer; transition: all .2s; font-family: var(--sans); }
.ai-followup-chip:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.ai-followup-chip:active { background: var(--gold); color: #000; border-color: var(--gold); }
.ai-first-chips { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.ai-first-chip { padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--text1); font-size: 13px; cursor: pointer; transition: all .2s; font-family: var(--sans); text-align: left; line-height: 1.4; }
.ai-first-chip:hover { background: var(--gold); color: #000; border-color: var(--gold); }
.ai-first-chip:active { background: var(--gold); color: #000; }

/* ═══ AI Session Management ═══ */
.ai-new-session-btn {
  margin-left: auto;
  padding: 8px 18px;
  border: 1.5px solid var(--gold);
  border-radius: 20px;
  background: var(--gold)15;
  color: var(--gold);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
@media(hover:hover){.ai-new-session-btn:hover { background: var(--gold); color: #000; border-color: var(--gold); }}

.ai-sessions { margin-top: 20px; padding: 0 4px; }
.ai-sessions-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 10px;
  padding-left: 2px;
}
.ai-session-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all .2s;
  background: var(--surface);
}
.ai-session-item:hover { background: var(--surface2); border-color: var(--text3); }
.ai-session-item:active { background: var(--surface2); }
.ai-sess-cat {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--text1);
  white-space: nowrap;
}
.ai-sess-preview {
  flex: 1;
  font-size: 12px;
  color: var(--text2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ai-sess-date {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--text3);
  white-space: nowrap;
}
.ai-sess-delete {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: none;
  background: transparent;
  color: var(--text3);
  font-size: 12px;
  cursor: pointer;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  padding: 0;
}
.ai-sess-delete:hover { background: rgba(200,50,50,.15); color: #c33; }

/* ═══ AVATAR SYSTEM ═══ */

/* --- Avatar containers --- */
.chat-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text2);
  transition: all .3s;
}
.chat-avatar-mini {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text2);
  transition: all .3s;
}
.avatar-svg { display: block; }

/* --- Sage avatar gold tint --- */
.avatar-sage { color: #C8A97E; }
[data-theme="light"] .avatar-sage { color: #8B7355; }

/* --- Cute avatar warm tone --- */
.avatar-cute { color: #D4A853; }
[data-theme="light"] .avatar-cute { color: #A0875C; }

/* --- Simple avatar neutral --- */
.avatar-simple { color: var(--text2); }

/* --- AI bubble with avatar layout --- */
.chat-bubble.ai.has-avatar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding-left: 14px !important;
}
.chat-bubble.ai.has-avatar::before { display: none !important; }
.chat-bubble-body { flex: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; }

/* --- AI header avatar indicator --- */
.ai-header-avatar {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-right: 6px;
  padding: 2px;
  border-radius: 4px;
  transition: background .2s;
}
.ai-header-avatar:hover { background: var(--surface2); }

/* --- Avatar animations --- */
@keyframes avatar-breath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.96); }
}
@keyframes avatar-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(0.1); }
}
@keyframes avatar-wiggle {
  0%, 85%, 100% { transform: rotate(0deg); }
  90% { transform: rotate(-3deg); }
  95% { transform: rotate(3deg); }
}
@keyframes avatar-glow {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 transparent); }
  50% { opacity: .85; filter: drop-shadow(0 0 4px rgba(200,169,126,.25)); }
}

.avatar-anim-avatar-breath .avatar-svg { animation: avatar-breath 3.5s ease-in-out infinite; }
.avatar-anim-avatar-wiggle .avatar-svg { animation: avatar-wiggle 5s ease-in-out infinite; }
.avatar-anim-avatar-glow .avatar-svg { animation: avatar-glow 4s ease-in-out infinite; }
.avatar-blink-eye { animation: avatar-blink 5s ease-in-out infinite; }

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .avatar-anim-avatar-breath .avatar-svg,
  .avatar-anim-avatar-wiggle .avatar-svg,
  .avatar-anim-avatar-glow .avatar-svg,
  .avatar-blink-eye { animation: none; }
}

/* --- Avatar selection bottom sheet --- */
.avatar-sheet-title {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  padding: 20px 16px 12px;
  color: var(--text1);
  letter-spacing: .03em;
}
.avatar-card-grid {
  display: flex;
  gap: 10px;
  padding: 8px 16px 24px;
  justify-content: center;
}
.avatar-card {
  flex: 1;
  max-width: 130px;
  background: var(--surface2);
  border: 2px solid var(--border);
  border-radius: 14px;
  padding: 16px 10px 14px;
  text-align: center;
  cursor: pointer;
  transition: all .25s;
  position: relative;
}
.avatar-card:hover { border-color: var(--text3); }
.avatar-card.selected {
  border-color: #C8A97E;
  background: rgba(200,169,126,.06);
  box-shadow: 0 0 0 1px rgba(200,169,126,.2);
}
[data-theme="light"] .avatar-card.selected {
  border-color: #8B7355;
  background: rgba(139,115,85,.06);
  box-shadow: 0 0 0 1px rgba(139,115,85,.15);
}
.avatar-card-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.avatar-card-preview .avatar-svg {
  width: 48px;
  height: 48px;
}
.avatar-card-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text1);
  margin-bottom: 4px;
}
.avatar-card-desc {
  font-size: 10px;
  color: var(--text3);
  line-height: 1.4;
}
.avatar-card-check {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 12px;
  color: #C8A97E;
  font-weight: 700;
}
[data-theme="light"] .avatar-card-check { color: #8B7355; }

/* --- Light theme avatar adjustments --- */
[data-theme="light"] .chat-avatar { background: var(--surface3); }
[data-theme="light"] .avatar-card { background: var(--surface); }

/* ═══ 카테고리 아바타 + 말풍선 색상 + 글자 크기 ═══ */
.chat-messages { padding: 8px 8px; gap: 8px; }
.chat-bubble { max-width: 95%; padding: 10px 12px; font-size: var(--chat-font-size, 14px); }
.chat-bubble.user { background: #F5D96E; color: #1a1a1a; }
.chat-bubble.ai { background: #f0f0f0; color: #1a1a1a; border: none; }
.chat-msg-ai { display:flex; gap:8px; align-items:flex-start; margin-bottom:4px; }
.chat-avatar-head { flex-shrink:0; display:flex; flex-direction:column; align-items:center; gap:2px; }
.chat-avatar-character { width:36px; height:36px; border-radius:12px; background:var(--surface2); display:flex; align-items:center; justify-content:center; }
.chat-avatar-emoji { font-size:20px; line-height:1; }
.chat-avatar-name { font-size:10px; font-weight:700; white-space:nowrap; opacity:.7; }
.chat-ai-bubbles { display:flex; flex-direction:column; gap:4px; flex:1; min-width:0; }
.chat-ai-bubbles .chat-bubble.ai { margin:0; }
.chat-ai-bubbles .chat-bubble.ai::before { display:none; }
[data-theme="light"] .chat-avatar-character { background:var(--surface1); }
[data-theme="light"] .chat-bubble.ai { background: #f0f0f0; border: none; }
[data-theme="light"] .chat-bubble.user { background: #F5D96E; color: #1a1a1a; }
.ai-font-btn { background:transparent; border:1px solid var(--border); color:var(--text2); font-weight:700; height:28px; padding:0 6px; border-radius:6px; cursor:pointer; font-family:var(--serif); margin-left:auto; display:flex; align-items:baseline; gap:1px; }
.font-popup-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:999; display:flex; align-items:center; justify-content:center; }
.font-popup { background:var(--bg); border-radius:20px; padding:28px 24px; width:min(340px,85vw); text-align:center; box-shadow:0 8px 32px rgba(0,0,0,.2); }
.font-popup-title { font-size:20px; font-weight:800; margin-bottom:8px; color:var(--text1); }
.font-popup-desc { font-size:13px; color:var(--text3); margin-bottom:24px; line-height:1.5; }
.font-popup-options { display:flex; gap:12px; justify-content:center; margin-bottom:24px; }
.font-option { flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; padding:12px 8px; border:2px solid var(--border); border-radius:12px; transition:all .2s; }
.font-preview { font-weight:700; color:var(--text1); }
.font-option-label { font-size:12px; color:var(--text2); display:flex; align-items:center; gap:4px; }
.font-check { width:18px; height:18px; border-radius:50%; border:2px solid var(--border); display:inline-block; position:relative; }
.font-check.active { border-color:#4CAF50; background:#4CAF50; }
.font-check.active::after { content:'✓'; color:#fff; font-size:11px; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); }
.font-fine-tune { display:flex; align-items:center; justify-content:center; gap:16px; margin-bottom:20px; padding:12px; background:var(--surface2); border-radius:10px; }
.font-fine-btn { width:40px; height:36px; border:1px solid var(--border); background:var(--bg); color:var(--text1); border-radius:8px; font-size:15px; font-weight:700; cursor:pointer; font-family:var(--sans); }
.font-fine-val { font-size:16px; font-weight:700; color:var(--text1); min-width:40px; text-align:center; }
.font-popup-confirm { width:100%; padding:14px; border:none; border-radius:12px; background:#F5D96E; color:#1a1a1a; font-size:16px; font-weight:700; cursor:pointer; font-family:var(--sans); }
.ai-new-session-btn { -webkit-tap-highlight-color: transparent; }
[data-theme="light"] .avatar-card.selected { background: rgba(139,115,85,.04); }