/* Introduction, semantic menu colors, and a quieter settings hierarchy. */
:root {
  --nav-home: #295eae;
  --nav-fortune: #a83e48;
  --nav-number: #247052;
  --nav-dream: #755098;
  --nav-settings: #176f79;
  --home-rule: #cbd6e1;
}

html[data-theme="dark"] {
  --nav-home: #a9c9ff;
  --nav-fortune: #f0a9ae;
  --nav-number: #94d8b8;
  --nav-dream: #d1b6ed;
  --nav-settings: #91d5df;
  --home-rule: #434c58;
}

.tab[data-tab="intro"] { --tab-color: var(--nav-home); }
.tab[data-tab="fortune"] { --tab-color: var(--nav-fortune); }
.tab[data-tab="number"] { --tab-color: var(--nav-number); }
.tab[data-tab="dream"] { --tab-color: var(--nav-dream); }
.tab[data-tab="info"] { --tab-color: var(--nav-settings); }

html[data-theme] .tab,
html[data-theme] .tab:not(.active) {
  color: var(--tab-color);
  opacity: 1;
}

html[data-theme] .tab.active {
  color: var(--tab-color);
  background: color-mix(in srgb, var(--tab-color) 11%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tab-color) 22%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
  font-weight: 700;
}

.tab .nav-fortune { font-size: 26px; }

.nav-lotto {
  position: relative;
  isolation: isolate;
  border: 1px solid #217349;
  background: #368956;
  color: #174c32;
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.28),
    inset 0 -2px 2px rgba(16, 59, 33, 0.15), 0 1px 2px rgba(14, 44, 29, 0.15);
  font-size: 11px;
  font-weight: 700;
}

.nav-lotto > span {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  background: #ffffff;
  color: #174c32;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.ai-action-icon .nav-lotto { font-size: 12px; }
.ai-action-icon .nav-lotto > span { width: 21px; height: 21px; font-size: 12px; }


/* One narrative, with the actual combination distribution as its only preview. */
.view.active { grid-template-columns: minmax(0, 1fr); }
.view > * { min-width: 0; }
html { scroll-padding-block: 100px 116px; }
#intro { padding: 0 0 4px; }
#intro.active { display: block; }
#intro > *, .home-proof > * { min-width: 0; max-width: 100%; }
.home-opening { padding: 20px 0 32px; }
.home-kicker { margin: 0; color: var(--nav-home); font-size: 14px; line-height: 1.6; font-weight: 600; }
.home-title { margin: 12px 0 24px; color: var(--ink); font-size: 36px; line-height: 1.3; font-weight: 700; }
.home-lead { margin: 0 0 20px; color: var(--ink); font-size: 24px; line-height: 1.5; font-weight: 600; text-wrap: balance; }
.home-line { display: block; text-wrap: balance; }
.home-opening > .btn { margin-top: 28px; }
#intro .btn { min-height: 54px; border-radius: 8px; padding: 12px 16px; font-size: 16px; line-height: 1.5; }
#intro .btn > span { flex: 0 0 auto; }
#intro :is(h1,h2,h3,p,button) { word-break: keep-all; overflow-wrap: anywhere; }
.home-story, .home-personal { padding: 32px 0; border-top: 1px solid var(--home-rule); }
#intro :is(.home-story,.home-personal) h2 { margin: 12px 0 20px; font-size: 24px; line-height: 1.5; font-weight: 600; text-wrap: balance; }
#intro .copy { line-height: 1.75; }
.home-story > .copy + .copy, .home-personal > .copy + .copy { margin-top: 16px; }
.home-proof { margin: 28px 0 0; }
.home-preview-heading { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.home-preview-heading h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.6; }
.home-sample-label { color: var(--muted); font-size: 14px; line-height: 1.6; }
/* The bitmap's pixel density must never determine its layout width. */
.home-distribution { position: relative; margin-top: 16px; width: 100%; min-width: 0; aspect-ratio: 1.9; contain: inline-size; }
.home-distribution canvas { position: absolute; inset: 0; width: 100%; max-width: 100%; height: 100%; display: block; }
.home-glass-result { position: relative; margin-top: 8px; padding: 20px 16px; border: 1px solid var(--glass-outline); border-radius: 12px; }
#homePreviewNumbers { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin: 0 0 16px; }
#homePreviewNumbers .ball { width: 100%; max-width: 44px; height: auto; aspect-ratio: 1; justify-self: center; font-size: 17px; }
.home-result-note { text-align: center; font-size: 15px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.home-example-note { margin: 12px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }
.home-principle-note { margin: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.home-elements { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); padding: 24px 0; margin: 24px 0; border-block: 1px solid var(--home-rule); }
.home-elements > span { text-align: center; font-family: "Batang","Songti SC",serif; font-size: 30px; font-weight: 500; line-height: 1.3; }
.home-elements small { display: block; margin-top: 8px; font-family: "Pretendard Variable",sans-serif; font-size: 14px; font-weight: 500; }
.home-elements .wood { color: #23724e; } .home-elements .fire { color: #b34250; }
.home-elements .earth { color: #876716; } .home-elements .metal { color: #725b97; }
.home-elements .water { color: #316aaa; }
.home-closing { padding: 36px 0; border-top: 1px solid var(--home-rule); }
.home-closing > p:first-child { margin-bottom: 20px; color: var(--ink-soft); font-size: 22px; font-weight: 400; line-height: 1.8; text-wrap: balance; }
.home-closing strong { color: var(--ink); font-weight: 600; }
.home-closing .btn { margin-top: 24px; }
.home-bottom-link { border-top: 1px solid var(--home-rule); padding-top: 12px; }
.home-text-link { display: inline-flex; min-height: 48px; align-items: center; gap: 12px; padding: 8px 0; border: 0; background: transparent; color: var(--nav-home); font-size: 14px; line-height: 1.6; font-weight: 500; cursor: pointer; }
#analysisStandards {
  margin: 0 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--surface);
  scroll-margin-top: 100px;
}

#analysisStandards > summary {
  min-height: 64px;
  padding: 18px 20px;
  border-radius: 8px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
}

#analysisStandards > summary::after {
  content: "+";
  width: 20px;
  height: 24px;
  flex: 0 0 20px;
  color: var(--muted);
  text-align: center;
  font-size: 22px;
  line-height: 24px;
  font-weight: 400;
}

#analysisStandards[open] > summary::after { content: "−"; }
.standards-body { padding: 0 20px 20px; }
.standards-body h3 { margin: 16px 0 8px; font-size: 17px; line-height: 1.5; font-weight: 600; }
.standards-body p, .standards-list dd { font-size: 16px; line-height: 1.7; color: var(--ink-soft); word-break: keep-all; overflow-wrap: anywhere; }
.standards-list { margin: 20px 0; }
.standards-list > div { border-top: 1px solid var(--line); padding: 16px 0; }
.standards-list dt { font-size: 16px; line-height: 1.5; font-weight: 600; }
.standards-list dd { margin: 8px 0 0; }
.standards-notice { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 16px; }
.standards-notice b { display: block; font-weight: 600; margin-bottom: 8px; }
.calendar-basis { margin-top: 12px; color: var(--muted); font-size: 14px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.calendar-basis:empty { display: none; }

#radarPanel .radar-wrap { max-width: 340px; }
#radarPanel .radar-wrap svg text { font-size: 18px; font-weight: 500; }
.radar-legend { grid-template-columns: minmax(0, 1fr); }
.legend-item { grid-template-columns: 104px minmax(0, 1fr); }
.legend-item > div { min-width: 0; grid-template-columns: minmax(0, 1fr) auto; }
.legend-item b { white-space: nowrap; font-variant-numeric: tabular-nums; }
body[data-text-size="large"] #radarPanel .radar-wrap text { font-size: 19px !important; }
.birth-picker { grid-template-columns: minmax(0, 1.35fr) repeat(2, minmax(0, 1fr)); }
.birth-picker .picker-select { min-width: 0; padding-inline: 10px 24px; background-size: 14px; background-position: right 5px center; font-variant-numeric: tabular-nums; }
@media (max-width: 350px) {
  .birth-picker .picker-select { padding-inline: 8px 22px; }
}


/* Translucent surfaces share the same edge, reflection, and depth. */
:root {
  --glass-fill: rgba(255,255,255,.72);
  --glass-reflection: linear-gradient(118deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.08) 40%,rgba(200,219,235,.16) 100%);
  --glass-outline: rgba(153,174,193,.70);
  --glass-highlight: rgba(255,255,255,.94);
  --glass-shadow: 0 8px 24px rgba(34,57,73,.08),inset 0 1px 0 rgba(255,255,255,.96),inset 1px 0 0 rgba(255,255,255,.66);
}
html[data-theme="dark"] {
  --glass-fill: rgba(37,45,51,.72);
  --glass-reflection: linear-gradient(118deg,rgba(220,239,244,.10) 0%,rgba(255,255,255,.02) 40%,rgba(89,123,135,.07) 100%);
  --glass-outline: rgba(159,183,194,.42);
  --glass-highlight: rgba(233,248,255,.34);
  --glass-shadow: 0 8px 26px rgba(0,0,0,.16),inset 0 1px 0 rgba(233,248,255,.18),inset 1px 0 0 rgba(233,248,255,.08);
}
html[data-theme] :is(header,nav,.home-glass-result,.panel:not(.dark)) {
  background-color: var(--glass-fill);
  background-image: var(--glass-reflection);
  border-color: var(--glass-outline);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(155%);
  backdrop-filter: blur(20px) saturate(155%);
}
html[data-theme] header { border-bottom: 1px solid var(--glass-outline); padding-top: env(safe-area-inset-top,0px); }
.safe { display: none; }
.topbar { min-height: 76px; padding: 16px var(--page-pad); gap: 12px; }
.brand-sub { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; font-size: 14px; line-height: 1.5; }
.header-action { flex-shrink: 0; }
.logo { width: 44px; height: 46px; flex: 0 0 44px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.logo img { display: block; width: 44px; height: 46px; object-fit: contain; }
.logo .brand-white { display: none; }
html[data-theme="dark"] .logo .brand-color { display: none; }
html[data-theme="dark"] .logo .brand-white { display: block; }
.brand { min-width: 0; gap: 12px; }
.brand-title { font-size: 21px; line-height: 1.3; }
.brand-sub { font-size: 14px; word-break: keep-all; overflow-wrap: anywhere; }
.home-kicker { max-width: 30ch; word-break: keep-all; }
html[data-theme] nav { grid-template-columns: repeat(4,minmax(0,1fr)); border-top-color: var(--glass-highlight); }
.tab { min-width: 0; min-height: 62px; }
html[data-theme="light"] { --muted: #566374; }
html[data-theme] .ai-action-copy span,
html[data-theme] .ai-action-quota em { color: #fff; font-size: 14px; line-height: 1.5; }
html[data-theme="light"] :is(.radar-center,.mini-radar-center) small { color: #3f526b; }
html[data-theme] :is(.radar-center,.mini-radar-center) small { font-size: 14px; line-height: 1.5; }
html[data-theme] :is(.radar-center,.mini-radar-center) span { font-size: 14px !important; line-height: 1.5; }
html[data-theme] :is(.radar-center,.mini-radar-center) { min-width: 112px; }
html[data-theme="light"] :is(.radar-center,.mini-radar-center) span { color: #33465f !important; }
html[data-theme="dark"] :is(.radar-center,.mini-radar-center) :is(span,span.good) { color: #f0f5ff !important; }
html[data-theme="light"] :is(.radar-center,.mini-radar-center) span.watch { color: #664718 !important; }
html[data-theme="dark"] :is(.radar-center,.mini-radar-center) span.watch { color: #f5d79b !important; }
html[data-theme] .tab.active {
  border: 1px solid color-mix(in srgb,var(--tab-color) 24%,transparent);
  background: color-mix(in srgb,var(--tab-color) 12%,var(--glass-fill));
  box-shadow: inset 0 1px 0 var(--glass-highlight),0 2px 8px rgba(22,42,55,.07);
}
html[data-theme] .panel:not(.dark) { border-radius: 12px; }
html[data-theme] .home-glass-result { -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); }
html[data-theme] .panel.dark {
  border-color: rgba(136,162,183,.60);
  box-shadow: inset 0 1px 0 rgba(226,241,251,.24),0 8px 22px rgba(26,46,66,.12);
}
#fortuneToday, #fortuneResult, #fortuneOverview { scroll-margin-top: calc(100px + env(safe-area-inset-top,0px)); }
.daily-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.daily-heading h2 { margin: 0; font-size: 20px; line-height: 1.5; font-weight: 600; }
.daily-heading time { font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.daily-title { margin: 24px 0 16px; font-size: 23px; line-height: 1.5; font-weight: 600; }
.daily-reading p { margin: 0; font-size: 16px; line-height: 1.8; color: var(--ink-soft); word-break: keep-all; overflow-wrap: anywhere; }
.daily-reading p + p { margin-top: 16px; }
.daily-advice { margin-top: 24px; padding: 20px 0; border-block: 1px solid var(--line); }
.daily-advice span { color: var(--muted); font-size: 14px; }
.daily-advice p { margin-top: 8px; font-size: 16px; line-height: 1.7; font-weight: 500; }
.daily-details { margin: 12px 0 0; }
.daily-details > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; }
.daily-details dt { flex: 0 0 auto; color: var(--muted); font-size: 14px; }
.daily-details dd { margin: 0; font-size: 16px; line-height: 1.6; text-align: right; font-variant-numeric: tabular-nums; }
.daily-lucky { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.daily-lucky h3,.fortune-numbers-label { font-size: 18px; line-height: 1.5; font-weight: 600; margin: 0; }
.fortune-numbers-label { margin-top: 28px; }
#todayLuckyNumbers { justify-content: flex-start; gap: 14px; margin: 20px 0; }
#todayLuckyNumbers .ball { width: 52px; height: 52px; flex-basis: 52px; font-size: 21px; }
.daily-lucky .btn { margin-top: 24px; font-size: 16px; padding: 12px; }
html[data-theme="dark"] .home-elements .wood { color: #9bd3b6; }
html[data-theme="dark"] .home-elements .fire { color: #efa5ae; }
html[data-theme="dark"] .home-elements .earth { color: #dec185; }
html[data-theme="dark"] .home-elements .metal { color: #cbb5e7; }
html[data-theme="dark"] .home-elements .water { color: #a3c9ed; }
body[data-text-size="large"] :is(#intro .copy,.daily-reading p,.daily-advice p,.daily-lucky .copy) { font-size: 18px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-theme] :is(header,nav,.home-glass-result,.panel:not(.dark)) { background-color: var(--surface); }
}
@media (prefers-reduced-transparency: reduce) {
  html[data-theme] :is(header,nav,.home-glass-result,.panel:not(.dark)) { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .view { animation: none; } button { transition: none; }
}

/* Stable action and disclosure geometry keeps long Korean labels readable. */
html[data-theme] .ai-action-button { display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; padding: 18px; text-align: left; }
.ai-action-left { gap: 12px; }
html[data-theme] .ai-action-icon { width: 40px; height: 40px; flex-basis: 40px; }
html[data-theme] .ai-action-copy b { font-size: 19px; line-height: 1.5; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; }
html[data-theme] .ai-action-copy span { white-space: normal; word-break: keep-all; }
html[data-theme] .ai-action-quota { display: flex; width: 100%; max-width: none; min-height: 32px; align-items: baseline; justify-content: flex-end; gap: 6px; padding: 8px 0 0; border: 0; border-top: 1px solid rgba(255,255,255,.32); border-radius: 0; background: none; box-shadow: none; }
html[data-theme] .ai-action-quota strong { font-size: 19px; line-height: 1.4; font-variant-numeric: tabular-nums; }
html[data-theme] .metric-card { position: relative; min-height: 98px; padding: 20px 68px 20px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; }
html[data-theme] .metric-card::after { content: "+"; position: absolute; inset: 0 4px 0 auto; margin-block: auto; display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 26px; line-height: 1; font-weight: 400; }
html[data-theme] .metric-card[aria-expanded="true"]::after { content: "−"; border-color: var(--nav-number); color: var(--nav-number); }
.metric-head { gap: 12px; }
.metric-head span:last-child { white-space: nowrap; }
html[data-theme] .personal-analysis { border-color: var(--glass-outline); }
.personal-analysis > summary { gap: 16px; min-height: 90px; padding: 20px; }
.personal-analysis > summary small { display: block; margin-bottom: 4px; color: var(--muted); font-size: 14px; line-height: 1.6; font-weight: 400; }
.personal-analysis > summary strong { display: block; color: var(--ink); font-size: 18px; line-height: 1.5; font-weight: 600; }
.personal-analysis .analysis-actions { grid-template-columns: minmax(0,1fr); gap: 12px; }
.personal-analysis .analysis-actions .btn { min-height: 52px; }
.personal-analysis > summary svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--nav-number); }
.score-method { margin-top: 24px; border-top: 1px solid var(--line); }
.score-method > summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; cursor: pointer; min-height: 56px; padding: 16px 0; font-size: 15px; font-weight: 500; line-height: 1.6; color: var(--ink); }
.score-method > summary::-webkit-details-marker { display: none; }
.score-method > summary::after { content: "+"; flex: 0 0 24px; text-align: center; font-size: 24px; font-weight: 400; }
.score-method[open] > summary::after { content: "−"; }
.score-method p { margin: 0 0 12px; color: var(--muted); font-size: 14px; line-height: 1.7; word-break: keep-all; overflow-wrap: anywhere; }
html[data-theme] :is(.radar-center,.mini-radar-center) { display: grid; align-content: center; gap: 2px; min-width: 88px; width: 88px; height: 88px; border-radius: 50%; background: var(--glass-fill); border: 1px solid var(--glass-highlight); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); box-shadow: 0 2px 12px rgba(34,57,73,.05); }
html[data-theme] .radar-center { inset: calc(50% - 44px) auto auto calc(50% - 44px); transform: none; }
html[data-theme] :is(.radar-center,.mini-radar-center) b { color: var(--ink); font-size: 28px; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; }
html[data-theme] :is(.radar-center,.mini-radar-center) small { color: var(--muted); font-size: 14px; font-weight: 500; }
.plan-list { margin-top: 24px; }
.plan-option { padding: 24px 0; border-top: 1px solid var(--line-strong); }
.plan-heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.plan-heading h4 { margin: 0; font-size: 19px; line-height: 1.5; font-weight: 600; }
.plan-price { margin: 0; color: var(--ink); font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.plan-price small { color: var(--muted); font-size: 14px; font-weight: 400; }
.plan-price span { margin-left: 4px; color: var(--muted); font-size: 14px; font-weight: 400; }
.plan-option > p { margin-top: 16px; color: var(--ink-soft); font-size: 16px; line-height: 1.7; word-break: keep-all; }
.plan-option ul { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; }
.plan-option li { font-size: 16px; line-height: 1.6; color: var(--ink-soft); }
.plan-option.current h4::after { content: "이용 중"; margin-left: 12px; color: var(--nav-home); font-size: 14px; font-weight: 500; }
.plan-conditions { margin-top: 16px; }
#planPriceStatus { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.fortune-overview-lead { margin: 20px 0 16px; font-size: 23px; line-height: 1.55; font-weight: 600; word-break: keep-all; }
.fortune-overview-copy { font-size: 16px; line-height: 1.75; color: var(--ink-soft); word-break: keep-all; overflow-wrap: anywhere; }
.fortune-overview-copy + .fortune-overview-copy { margin-top: 16px; }
body[data-text-size="large"] :is(.plan-option li,.fortune-overview-copy) { font-size: 18px; }
@media (max-width: 350px) {
  html[data-theme] .ai-action-button { padding: 16px 12px; }
  html[data-theme] .ai-action-copy b { font-size: 17px; }
  html[data-theme] .ai-action-icon { width: 32px; height: 36px; flex-basis: 32px; }
  html[data-theme] .metric-card { padding-right: 60px; }
}