/* Shared reading and dialog foundation. Color-bearing outfit/food/SVG assets stay intact. */
:root {
  --ui-page:#F5F7F8; --ui-surface:#FFFFFF; --ui-ink:#182B3A;
  --ui-muted:#425563; --ui-line:#D5DFE3; --ui-accent:#205D62;
  --ui-tint:#F0F5F5; --ui-radius:20px; --ui-soft:#F2F5F6;
}
body { color:var(--ui-ink); }
.reading-heading p, .reading-view .card > p { color:var(--ui-ink); }
.reading-view .card > p:not(:first-child) { font-size:1rem!important; line-height:1.9!important; }
.reading-view .report-entry > p:first-child { font-size:1.25rem!important; line-height:1.6!important; }
.reading-profile { background:var(--ui-surface); border:1px solid var(--ui-line); }
.reading-profile p, .reading-caption, .reading-view .card > .reading-caption { color:var(--ui-muted); font-size:.9375rem!important; }
.reading-view .reading-lead { background:var(--ui-surface); }
.reading-eyebrow { color:var(--ui-accent); font-size:.875rem; letter-spacing:.04em; }
.reading-primary, .reading-view .report-entry > button { background:var(--ui-accent)!important; color:#FFF!important; min-height:52px; }
.reading-text-button, .reading-archive-link { color:var(--ui-accent); min-height:44px; font-size:.9375rem; }
.reading-tabs button[aria-selected="true"] { font-weight:800; }
.period-choices button[aria-pressed="true"] { color:#FFF; background:var(--ui-accent); border-color:var(--ui-accent); }
.concern-choices button { color:var(--ui-muted); }
.concern-choices button[aria-pressed="true"] { background:var(--ui-surface); border-color:var(--ui-accent); }
.concern-choices button[aria-pressed="true"] span { color:var(--ui-accent); }
.reading-links button, .period-choices button { background:var(--ui-surface); border-color:var(--ui-line); }
.reading-view button:focus-visible, .reading-view summary:focus-visible, #archiveDetailModal button:focus-visible { outline-color:var(--ui-accent); }
.reading-view .badge-main-wood { background:#047857; }
.reading-view .badge-main-earth { background:#9A5708; }
.reading-view .elem-earth, #valEarth, #valEarth ~ span { color:#8A4B08!important; }

/* Purchased HTML is generated by several report services, including older saved reports. */
:is(#archiveModalBody,.period-reading) { background:var(--ui-surface); color:var(--ui-ink); text-align:left; word-break:keep-all; overflow-wrap:anywhere; }
:is(#archiveModalBody,.period-reading) :is(div,p,li,span,strong,em,summary) { color:var(--ui-ink)!important; }
:is(#archiveModalBody,.period-reading) :is(p,li,div,summary) { font-size:1rem!important; line-height:1.9!important; }
:is(#archiveModalBody,.period-reading) :is(h3,h4,h5,h6) { color:var(--ui-ink)!important; font-size:1.125rem!important; line-height:1.65!important; }
:is(#archiveModalBody,.period-reading) :is(div,section,article,details)[style*="background"] {
  background:var(--ui-soft)!important; border-color:var(--ui-line)!important;
}
:is(#archiveModalBody,.period-reading) [style*="border-left"] { border-left-color:var(--ui-accent)!important; }
:is(#archiveModalBody,.period-reading) :is(details,section,article) { margin-bottom:16px; }
:is(#archiveModalBody,.period-reading) summary { padding:8px 0; }
:is(#archiveModalBody,.period-reading) [data-current-cycle="true"] { border:2px solid var(--ui-accent)!important; }
#readingReportContents button { background:var(--ui-surface); border-color:var(--ui-line); color:var(--ui-accent); }
#readingReportMeta { color:var(--ui-muted); }

/* All eight dialogs share the same heading, controls, panels and action hierarchy. */
.modal-bg { background:rgba(16,32,44,.58); padding:16px; backdrop-filter:blur(6px); }
.modal-bg .modal-content {
  width:100%; max-width:460px!important; max-height:calc(100dvh - 32px)!important;
  background:var(--ui-surface)!important; color:var(--ui-ink); border:1px solid var(--ui-line);
  border-radius:var(--ui-radius)!important; padding:24px!important; gap:20px;
  box-shadow:0 24px 80px #10202C30; overflow-y:auto; overscroll-behavior:contain;
  text-align:left; scrollbar-gutter:stable;
}
.modal-content > * { flex-shrink:0; min-width:0; }
.modal-content .ui-modal-heading { display:flex; align-items:center; gap:12px; padding-bottom:16px!important; margin-bottom:0!important; border-bottom:1px solid var(--ui-line)!important; }
.modal-content .ui-modal-heading h3 { color:var(--ui-ink)!important; font-size:1.25rem!important; line-height:1.5; letter-spacing:-.025em; }
.modal-content :is(p,.form-label) { color:var(--ui-muted)!important; font-size:.9375rem!important; line-height:1.8!important; }
.modal-content .form-label { display:block; color:var(--ui-ink)!important; font-weight:650; margin-bottom:8px; }
.modal-content :is(.form-input,.form-select-box) { width:100%; min-width:0; background:var(--ui-surface); color:var(--ui-ink); border:1px solid #AABBC3; border-radius:10px; min-height:48px; padding:11px 10px; font-size:1rem; }
.modal-content .form-input::placeholder { color:var(--ui-muted); opacity:1; }
.modal-content .ui-close { width:44px; height:44px; min-width:44px; padding:0!important; border:1px solid var(--ui-line)!important; border-radius:50%!important; background:var(--ui-surface)!important; color:var(--ui-ink)!important; font-size:1.5rem!important; flex-shrink:0; }
.modal-content .ui-action { min-height:48px; padding:12px 16px!important; border-radius:12px!important; font-size:1rem!important; font-weight:700!important; line-height:1.6; }
.modal-content .ui-action-primary { background:var(--ui-accent)!important; color:#FFF!important; border:1px solid var(--ui-accent)!important; }
.modal-content .ui-action-secondary { background:var(--ui-surface)!important; color:var(--ui-ink)!important; border:1px solid #AABBC3!important; }
.modal-content .ui-panel { background:var(--ui-soft)!important; border:1px solid var(--ui-line)!important; border-radius:14px!important; padding:16px!important; }
.modal-content .ui-panel :is(h4,span,p,div) { color:var(--ui-ink)!important; }
.modal-content .ui-option { display:flex!important; gap:10px!important; padding:16px!important; background:var(--ui-surface)!important; color:var(--ui-ink)!important; border:1px solid var(--ui-line)!important; border-radius:12px!important; font-size:1rem!important; line-height:1.65; }
.modal-content .ui-option:has(input:checked) { background:var(--ui-tint)!important; border:2px solid var(--ui-accent)!important; padding:15px!important; }
.modal-content input { accent-color:var(--ui-accent); }
.modal-content :is(.tile-btn,.color-chip,.mat-chip) { background:var(--ui-surface); color:var(--ui-ink); border:1px solid var(--ui-line); border-radius:12px; padding:12px 7px; min-height:48px; }
.modal-content :is(.tile-btn,.color-chip,.mat-chip).selected { border-color:var(--ui-accent); box-shadow:inset 0 0 0 1px var(--ui-accent); background:var(--ui-tint); color:var(--ui-ink); }
.modal-content .ui-package { background:var(--ui-surface)!important; border:1px solid var(--ui-line)!important; border-radius:14px!important; padding:18px 14px!important; gap:10px; }
.modal-content .ui-package:focus-visible, .modal-content .ui-package:hover { border-color:var(--ui-accent)!important; background:var(--ui-soft)!important; }
.modal-content .ui-package p { color:var(--ui-ink)!important; }
.modal-content .ui-price { background:var(--ui-tint)!important; color:var(--ui-accent)!important; font-size:.9375rem!important; flex-shrink:0; padding:6px 8px!important; }
#zodiacModalOverview { color:var(--ui-ink)!important; font-size:1rem!important; line-height:1.9!important; }
#zodiacModalTitle, #talismanTitle, #pgItemPrice { color:var(--ui-ink)!important; }
#zodiacModalScore, #zodiacExtraInfo, #wizardStepLabel { color:var(--ui-accent)!important; }
#zodiacYearTipsBox :is(p,span,div) { color:var(--ui-ink)!important; font-size:.9375rem!important; line-height:1.85!important; }
#zodiacYearTipsBox [style*="background"] { background:var(--ui-soft)!important; border-color:var(--ui-line)!important; }
#archiveDetailModal .modal-content { max-width:640px!important; gap:14px; }
#archiveModalBody { flex:1 1 auto; padding:0 4px 0 0!important; margin:0!important; }
#talismanRealBox svg { max-width:100%; }
#talismanModal .modal-content { border-radius:var(--ui-radius)!important; }
#talismanModal button.ui-action-primary { background:var(--ui-accent)!important; color:#FFF!important; border-radius:12px!important; }
#view-mypage button[onclick="openChargeStore()"] { background:var(--ui-accent)!important; }
#onboardingInputView .form-label { color:var(--ui-ink)!important; font-size:.9375rem; }
#onboardingInputView :is(.form-input,.form-select-box) { background:var(--ui-surface); border-color:#AABBC3; color:var(--ui-ink); min-height:48px; }
#onboardingInputView .cal-btn.active { background:var(--ui-accent); color:#FFF; }

/* Dedicated comparison addresses do not change a visitor's saved design or account. */
.design-comparison { background:var(--ui-surface); border-bottom:1px solid var(--ui-line); color:var(--ui-ink); padding:14px 22px; }
.design-comparison p { margin:0 0 8px; font-size:.875rem; line-height:1.65; color:var(--ui-muted); }
.design-comparison-links { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.design-comparison a { color:var(--ui-accent); border:1px solid var(--ui-line); border-radius:8px; padding:8px 12px; min-height:44px; display:inline-flex; align-items:center; font-size:.875rem; font-weight:700; text-decoration:none; }
.design-comparison a[aria-current="page"] { background:var(--ui-accent); color:#FFF; border-color:var(--ui-accent); }
.design-comparison .design-sample-link { border:0; text-decoration:underline; text-underline-offset:4px; }
.design-notice { position:fixed; bottom:110px; left:50%; transform:translateX(-50%); z-index:3000; width:calc(100% - 40px); max-width:460px; padding:16px; border-radius:12px; background:var(--ui-ink); color:#FFF; box-shadow:0 8px 28px #10202C30; font-size:.9375rem; line-height:1.6; }

/* B — slide 13: modern structure, moonlit navy, hanji ivory, gold only at focal points. */
html[data-design="moonlight"] {
  --ui-page:#F7F4EE; --ui-surface:#FFFEFA; --ui-ink:#182B38; --ui-muted:#47545B;
  --ui-line:#DCD6CA; --ui-accent:#183A4A; --ui-tint:#EEE9DE; --ui-soft:#F3F0E9; --ui-radius:12px;
}
html[data-design="moonlight"] body { background:#E8E4DB; }
html[data-design="moonlight"] .app-container { box-shadow:0 0 80px #183A4A0D; }
html[data-design="moonlight"] .app-container > header { background:#183A4A; border-bottom:1px solid #315262; padding-top:24px; padding-bottom:24px; }
html[data-design="moonlight"] .logo-box > div > div > span:first-child { color:#FFFEFA!important; }
html[data-design="moonlight"] .logo-box > div > div > span:last-child { color:#D9B45B!important; }
html[data-design="moonlight"] .logo-box > div > span { color:#E1E7E8!important; }
html[data-design="moonlight"] .logo-box svg [stroke] { stroke:#D9B45B; }
html[data-design="moonlight"] .logo-box svg [fill]:not([fill="none"]) { fill:#D9B45B; }
html[data-design="moonlight"] .coin-btn { background:#183A4A; color:#FFFEFA; border-color:#6D8793; border-radius:8px; }
html[data-design="moonlight"] .charge-tag { background:#294E5E; color:#FFFEFA; }
html[data-design="moonlight"] main { padding-top:28px; gap:28px; }
html[data-design="moonlight"] .card { box-shadow:none; }
html[data-design="moonlight"] .daily-banner { border-top:3px solid #B78B35!important; padding-top:28px!important; padding-bottom:28px!important; }
html[data-design="moonlight"] .reading-heading { padding:4px 2px 28px; border-bottom:1px solid var(--ui-line); margin-bottom:24px; }
html[data-design="moonlight"] .reading-heading h2 { font-size:2.125rem; letter-spacing:-.05em; font-weight:750; }
html[data-design="moonlight"] .reading-eyebrow { color:#705321; }
html[data-design="moonlight"] .reading-heading .reading-eyebrow::before { content:""; display:inline-block; width:22px; height:2px; vertical-align:middle; background:#B78B35; margin-right:10px; }
html[data-design="moonlight"] .reading-profile { border:0; border-left:3px solid #B78B35; border-radius:0; background:var(--ui-tint); }
html[data-design="moonlight"] .reading-tabs { gap:0; border:1px solid var(--ui-line); border-radius:10px; padding:4px; background:var(--ui-surface); }
html[data-design="moonlight"] .reading-tabs button { border:0; border-radius:7px; padding:12px 2px; }
html[data-design="moonlight"] .reading-tabs button[aria-selected="true"] { background:var(--ui-accent); color:#FFF; }
html[data-design="moonlight"] .reading-lead { border-top:3px solid #B78B35!important; }
html[data-design="moonlight"] .reading-links { gap:0; border:1px solid var(--ui-line); border-radius:12px; overflow:hidden; }
html[data-design="moonlight"] .reading-links button { border:0; border-radius:0; border-bottom:1px solid var(--ui-line); padding:20px 16px; }
html[data-design="moonlight"] .reading-links button:nth-child(odd) { border-right:1px solid var(--ui-line); }
html[data-design="moonlight"] .concern-choices { gap:10px; }
html[data-design="moonlight"] .concern-choices button { border-radius:10px; padding:20px 15px; }
html[data-design="moonlight"] .concern-choices button[aria-pressed="true"] { background:var(--ui-accent); color:#E4EAE9; }
html[data-design="moonlight"] .concern-choices button[aria-pressed="true"] span { color:#FFF; }
html[data-design="moonlight"] #bottomNavBar { background:var(--ui-surface); border-color:var(--ui-line); }
html[data-design="moonlight"] .tab-btn.active { background:var(--ui-tint); border-radius:9px; }
html[data-design="moonlight"] .modal-content .ui-modal-heading { border-bottom-color:#C8B58C!important; }
html[data-design="moonlight"] .modal-content { box-shadow:0 28px 90px #182B3840; }
html[data-design="moonlight"] .look-card, html[data-design="moonlight"] .menu-photo-card { border-color:var(--ui-line); border-radius:10px; }
html[data-design="moonlight"] .action-card { background:var(--ui-tint); border-radius:12px; }
html[data-design="moonlight"] .login-gate-card { background:var(--ui-surface); border-top:3px solid #B78B35; border-radius:12px; }
@media(max-width:380px) {
  .app-container > header { padding:16px!important; gap:10px; }
  .logo-box > div > span { display:none!important; }
  .coin-btn { flex-shrink:0; white-space:nowrap; }
  .charge-tag { white-space:nowrap; }
  #modalOptionBox > div { grid-template-columns:1fr!important; }
  .modal-content .ui-option { word-break:keep-all; }
  .modal-bg { padding:10px; }
  .modal-bg .modal-content { padding:20px 16px!important; max-height:calc(100dvh - 20px)!important; }
  .modal-content .ui-modal-heading h3 { font-size:1.125rem!important; }
  .modal-content .ui-action { padding:12px 10px!important; }
  .design-comparison { padding:12px 16px; }
  .modal-content .ui-package { padding:14px 10px!important; flex-wrap:wrap; }
}
@media(max-width:480px) {
  #archiveDetailModal { padding:0; }
  #archiveDetailModal .modal-content { height:100dvh; max-height:100dvh!important; border-radius:0!important; padding:20px 18px max(18px,env(safe-area-inset-bottom))!important; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; } }
.menu-mode-controls { display:flex; gap:6px; padding:4px; border-radius:12px; background:var(--ui-soft,#F1F5F9); border:1px solid var(--ui-line,#E2E8F0); }
.menu-mode-controls button { flex:1; min-height:42px; border:0; border-radius:8px; font:inherit; font-size:14px; font-weight:700; color:var(--ui-muted,#475569); background:transparent; cursor:pointer; }
.menu-mode-controls button[aria-pressed="true"] { color:var(--ui-ink,#172B3A); background:var(--ui-surface,#FFF); box-shadow:0 1px 4px #10202c1a; }
.menu-status { margin:10px 0; font-size:13px; line-height:1.6; color:var(--ui-muted,#475569); }
.menu-next { width:100%; min-height:46px; border:0; border-radius:11px; font:inherit; font-size:14px; font-weight:700; background:var(--ui-accent,#2D6A4F); color:var(--ui-on-accent,#FFF); cursor:pointer; }
.menu-next:disabled, .menu-mode-controls button:disabled { opacity:.6; cursor:wait; }
.menu-error { font-size:13px; line-height:1.65; color:#A12C2C; margin:8px 0 0; }
.menu-error:empty { display:none; }
.menu-photo-placeholder { width:100%; aspect-ratio:1; display:grid; place-items:center; color:var(--ui-muted,#68786E); background:var(--ui-soft,#F1F5F9); border-radius:10px; }
.menu-photo-placeholder svg { width:65%; max-width:120px; }