/* ═══════════════════════════════════════════════════════
   현월선녀 · 입력/결과/인트로 — landing quiet luxury 통일
   ═══════════════════════════════════════════════════════ */

body.view-input,
body.view-result {
  --ld-font: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --ld-font-display: "YeolrinMyeongjo", "Noto Serif KR", Georgia, serif;
  --ld-bg: #F3F0EA;
  --ld-bg-deep: #EBE6DD;
  --ld-surface: #FAF8F4;
  --ld-muted: #E8E4DC;
  --ld-ink: #1A1814;
  --ld-text: #1A1814;
  --ld-text-mid: #4A4540;
  --ld-text-soft: #8A837A;
  --ld-accent: #5C4F3A;
  --ld-accent-soft: #7A6B56;
  --ld-emphasis: #1A1814;
  --ld-border: rgba(26, 24, 20, 0.1);
  --ld-line: rgba(26, 24, 20, 0.07);
  --ld-shadow: 0 24px 64px rgba(26, 24, 20, 0.04);
  --ld-radius: 8px;
  --ld-space-xs: 8px;
  --ld-space-sm: 12px;
  --ld-space-md: 16px;
  --ld-space-lg: 24px;
  --ld-space-xl: 32px;
  --ld-space-2xl: 48px;
  --ld-nav-h: 52px;
  /* 레거시 --c-* 토큰을 라이트 테마로 매핑 */
  --c-bg: var(--ld-bg);
  --c-surface: var(--ld-surface);
  --c-glass: rgba(26, 24, 20, 0.04);
  --c-border: var(--ld-border);
  --c-gold: var(--ld-accent);
  --c-gold-hi: var(--ld-emphasis);
  --c-cyan: var(--ld-accent-soft);
  --c-text: var(--ld-text);
  --c-muted: var(--ld-text-soft);
  font-family: var(--ld-font);
  color: var(--ld-text);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  background:
    radial-gradient(ellipse 90% 70% at 50% -8%, rgba(255, 252, 246, 0.9) 0%, transparent 58%),
    linear-gradient(180deg, #F6F3ED 0%, var(--ld-bg) 45%, var(--ld-bg) 100%);
}

body.view-input #particleCanvas,
body.view-result #particleCanvas {
  display: none;
}

body.view-input button:active,
body.view-result button:active {
  transform: none;
}

/* ── 네비 (마이페이지와 동일 solid) ── */
body.view-input .top-nav,
body.view-result .top-nav {
  background: rgba(246, 243, 237, 0.92);
  backdrop-filter: blur(20px) saturate(1.05);
  -webkit-backdrop-filter: blur(20px) saturate(1.05);
  border-bottom: none;
  box-shadow: 0 1px 0 rgba(26, 24, 20, 0.04);
  padding: 12px max(24px, env(safe-area-inset-left, 0px));
  padding-top: calc(12px + env(safe-area-inset-top, 0px));
  padding-right: max(24px, env(safe-area-inset-right, 0px));
}
body.view-input .nav-brand,
body.view-result .nav-brand {
  color: var(--ld-ink);
  font-family: var(--ld-font-display);
  letter-spacing: 0.04em;
  min-height: 44px;
  align-items: center;
}
body.view-input .nav-brand:hover,
body.view-result .nav-brand:hover {
  color: var(--ld-text-mid);
}
body.view-input .nav-brand-text,
body.view-result .nav-brand-text {
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}
body.view-input .nav-brand-han,
body.view-input .nav-link-han,
body.view-result .nav-brand-han,
body.view-result .nav-link-han {
  display: none;
}
body.view-input .nav-actions,
body.view-result .nav-actions {
  gap: 4px;
}
body.view-input .nav-link,
body.view-result .nav-link {
  background: transparent;
  border: none;
  color: var(--ld-text-soft);
  border-radius: 6px;
  min-height: 44px;
  padding: 0 12px;
  font-family: var(--ld-font);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
body.view-input .nav-link:hover,
body.view-result .nav-link:hover {
  background: var(--ld-muted);
  color: var(--ld-text);
}
body.view-input .nav-link.is-active,
body.view-result .nav-link.is-active {
  background: var(--ld-muted);
  color: var(--ld-text);
  font-weight: 600;
}

/* hyeonwol 페이지 레거시 랜딩 */
body.view-landing.page-hyeonwol .landing-hero .eyebrow {
  font-family: var(--ld-font);
  font-size: 0.6875rem;
  color: var(--ld-text-soft);
  letter-spacing: 0.14em;
}
body.view-landing.page-hyeonwol .landing-title {
  font-family: var(--ld-font-display);
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 400;
  color: var(--ld-ink);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  letter-spacing: 0.04em;
}
body.view-landing.page-hyeonwol .landing-tagline {
  font-family: var(--ld-font);
  font-size: 0.875rem;
  color: var(--ld-text-mid);
  line-height: 1.75;
  letter-spacing: -0.01em;
}

/* ── 입력 씬 ── */
body.view-input .input-scene {
  padding:
    calc(var(--ld-nav-h) + env(safe-area-inset-top, 0px))
    max(16px, env(safe-area-inset-left, 0px))
    max(var(--ld-space-lg), env(safe-area-inset-bottom, 0px))
    max(16px, env(safe-area-inset-right, 0px));
  min-height: 100dvh;
  justify-content: center;
}

body.view-input .char-header {
  max-width: 680px;
  margin: 0 auto var(--ld-space-md);
  padding: var(--ld-space-sm) var(--ld-space-md);
  background: var(--ld-surface);
  border: none;
  border-radius: 12px;
  box-shadow: none;
  overflow: visible;
}
body.view-input .char-header::before,
body.view-input .char-header::after {
  display: none;
}
body.view-input .char-header-emblem {
  width: auto;
  border: none;
  padding-right: var(--ld-space-sm);
}
body.view-input .char-header-emblem::before {
  display: none;
}
body.view-input .char-header-han {
  font-family: var(--ld-font-display);
  font-size: 1.125rem;
  color: var(--ld-text-soft);
  opacity: 0.6;
  text-shadow: none;
  animation: none;
}
body.view-input .char-header-name {
  font-family: var(--ld-font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ld-ink);
  letter-spacing: -0.02em;
  text-shadow: none;
}
body.view-input .char-header-role {
  font-family: var(--ld-font);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ld-text-soft);
  opacity: 1;
}
body.view-input .char-header-tag {
  font-family: var(--ld-font);
  font-size: 0.8125rem;
  color: var(--ld-text-mid);
  letter-spacing: -0.01em;
  line-height: 1.5;
}
body.view-input .char-header[data-character="hyeonwol"] .char-header-han,
body.view-input .char-header[data-character="hyeonwol"] .char-header-name,
body.view-input .char-header[data-character="hyeonwol"] .char-header-role {
  color: inherit;
}
body.view-input .char-header[data-character="hyeonwol"] .char-header-name {
  color: var(--ld-ink);
}
body.view-input .char-back-btn {
  width: auto;
  min-width: 52px;
  padding: 0 12px;
  border-left: 1px solid var(--ld-border);
  color: var(--ld-text-soft);
}
body.view-input .char-back-btn:hover {
  background: var(--ld-muted);
  color: var(--ld-ink);
}
body.view-input .char-back-label {
  font-size: 0.6875rem;
  letter-spacing: -0.01em;
}

body.view-input .input-col {
  max-width: 480px;
}

body.view-input .char-wrap img {
  filter: drop-shadow(0 16px 40px rgba(26, 24, 20, 0.08));
  max-height: min(52vh, 420px);
}
body.view-input .char-glow {
  background: radial-gradient(ellipse, rgba(92, 79, 58, 0.06) 0%, transparent 68%);
}

body.view-input .scene-dialog {
  width: 100%;
  margin-left: 0;
  margin-top: -12px;
  background: var(--ld-surface);
  border: none;
  border-radius: 12px;
  padding: var(--ld-space-sm) var(--ld-space-md);
  box-shadow: none;
  backdrop-filter: none;
}
body.view-input .scene-dialog::before {
  display: none;
}
body.view-input .dialog-name {
  display: block;
  font-family: var(--ld-font);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ld-text-soft);
  letter-spacing: 0.04em;
  margin: 0 0 4px;
}
body.view-input #stepQuestion {
  display: block;
  font-family: var(--ld-font);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--ld-text-mid);
  letter-spacing: -0.01em;
}

body.view-input .input-card {
  width: 100%;
  margin-left: 0;
  margin-top: var(--ld-space-sm);
  background: var(--ld-surface);
  border: none;
  border-radius: 12px;
  padding: var(--ld-space-md);
  box-shadow: none;
  backdrop-filter: none;
}

body.view-input .step-dot {
  background: var(--ld-muted);
  border: none;
}
body.view-input .step-dot.active {
  background: var(--ld-ink);
  box-shadow: none;
  transform: scale(1.15);
}
body.view-input .step-dot.done {
  background: var(--ld-accent-soft);
}

body.view-input .field > span {
  font-family: var(--ld-font);
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ld-text-soft);
  letter-spacing: 0.04em;
  text-transform: none;
}
body.view-input .field input,
body.view-input .field select,
body.view-input .field textarea {
  background: var(--ld-bg);
  border: 1px solid var(--ld-border);
  border-radius: var(--ld-radius);
  color: var(--ld-ink);
  font-family: var(--ld-font);
  font-size: 0.9375rem;
}
body.view-input .field input:focus,
body.view-input .field select:focus,
body.view-input .field textarea:focus {
  border-color: rgba(26, 24, 20, 0.22);
  box-shadow: 0 0 0 3px rgba(26, 24, 20, 0.06);
  outline: none;
}
body.view-input .question-count,
body.view-input .pw-note,
body.view-input .history-unlock-desc {
  color: var(--ld-text-soft);
  font-family: var(--ld-font);
  letter-spacing: -0.01em;
}

body.view-input #nextStepBtn,
body.view-input #analyzeBtn {
  flex: 1;
  background: var(--ld-ink);
  color: var(--ld-surface);
  font-family: var(--ld-font);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--ld-radius);
  box-shadow: none;
  min-height: 44px;
}
body.view-input #nextStepBtn:hover,
body.view-input #analyzeBtn:hover {
  background: var(--ld-accent);
}
body.view-input .ghost-btn {
  border: 1px solid var(--ld-border);
  color: var(--ld-text-soft);
  background: transparent;
  font-family: var(--ld-font);
  font-weight: 500;
  min-height: 44px;
}
body.view-input .ghost-btn:hover {
  background: var(--ld-muted);
  color: var(--ld-ink);
}

body.view-input .chat-log-wrap {
  border-top-color: var(--ld-line);
}
body.view-input .chat-log-title {
  font-family: var(--ld-font);
  font-size: 0.6875rem;
  color: var(--ld-text-soft);
  letter-spacing: 0.04em;
  text-transform: none;
}
body.view-input .chat-log-item {
  border: 1px solid var(--ld-border);
  background: var(--ld-bg);
  color: var(--ld-text-mid);
  font-family: var(--ld-font);
  font-size: 0.8125rem;
}
body.view-input .chat-log-item strong {
  color: var(--ld-emphasis);
}

body.view-input .history-unlock-btn {
  background: var(--ld-muted);
  border: 1px solid var(--ld-border);
  color: var(--ld-ink);
  font-family: var(--ld-font);
}
body.view-input .history-pw-input {
  background: var(--ld-bg);
  border-color: var(--ld-border);
  color: var(--ld-ink);
}

/* ── RPG 인트로 (index) ── */
body.intro-open {
  background: var(--ld-bg, #F3F0EA);
}
body.intro-open #app {
  filter: blur(6px);
  opacity: 0.55;
}
.intro-overlay {
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 252, 246, 0.95) 0%, transparent 55%),
    linear-gradient(180deg, #F6F3ED 0%, #F3F0EA 100%);
  backdrop-filter: blur(8px);
  animation: introOverlayRevealLight 0.8s ease both;
}
@keyframes introOverlayRevealLight {
  from { opacity: 0; }
  to { opacity: 1; }
}
.intro-han-field span {
  color: rgba(26, 24, 20, 0.04);
}
.intro-veil {
  background: var(--ld-bg, #F3F0EA);
}
.intro-oracle img {
  filter: drop-shadow(0 20px 48px rgba(26, 24, 20, 0.1));
}
.intro-oracle-glow {
  background: radial-gradient(ellipse, rgba(92, 79, 58, 0.08), transparent 68%);
}
.intro-dialogue {
  background: var(--ld-surface, #FAF8F4);
  border: none;
  border-radius: 12px;
  box-shadow: var(--ld-shadow, 0 24px 64px rgba(26, 24, 20, 0.04));
  padding: var(--ld-space-md);
}
.intro-dialogue::before {
  display: none;
}
.intro-name {
  font-family: var(--ld-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ld-ink);
  letter-spacing: -0.01em;
}
.intro-name::before {
  display: none;
}
.intro-scene-label {
  font-family: var(--ld-font);
  font-size: 0.75rem;
  color: var(--ld-text-soft);
  font-style: normal;
  letter-spacing: -0.01em;
}
.intro-text {
  font-family: var(--ld-font);
  color: var(--ld-text-mid);
  font-size: 0.9375rem;
  line-height: 1.7;
  letter-spacing: -0.01em;
}
.intro-text::after {
  border-color: var(--ld-ink);
}
.intro-choice-btn {
  background: var(--ld-bg);
  border: 1px solid var(--ld-border);
  color: var(--ld-text-mid);
  border-radius: var(--ld-radius);
  font-family: var(--ld-font);
  font-size: 0.875rem;
}
.intro-choice-btn::before {
  color: var(--ld-text-soft);
}
.intro-choice-btn:hover {
  background: var(--ld-muted);
  border-color: rgba(26, 24, 20, 0.14);
  color: var(--ld-ink);
  transform: none;
}
#introNextBtn,
#introStartBtn {
  background: var(--ld-ink);
  color: var(--ld-surface);
  box-shadow: none;
  font-family: var(--ld-font);
  font-weight: 600;
  border-radius: var(--ld-radius);
}
.intro-ghost {
  background: transparent;
  border: 1px solid var(--ld-border);
  color: var(--ld-text-soft);
  font-family: var(--ld-font);
}

/* ── 분석 로딩 (의식 연출 전체) ── */
body.page-hyeonwol .loading-overlay,
body.view-input .loading-overlay,
body.view-result .loading-overlay {
  background: rgba(243, 240, 234, 0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

body.page-hyeonwol .han-char,
body.view-input .han-char,
body.view-result .han-char {
  color: rgba(26, 24, 20, 0.05);
}

body.page-hyeonwol .rring-a,
body.view-input .rring-a,
body.view-result .rring-a { stroke: rgba(26, 24, 20, 0.08); }
body.page-hyeonwol .rring-b,
body.view-input .rring-b,
body.view-result .rring-b { stroke: rgba(26, 24, 20, 0.14); }
body.page-hyeonwol .rring-c,
body.view-input .rring-c,
body.view-result .rring-c { stroke: rgba(26, 24, 20, 0.22); }
body.page-hyeonwol .rtick,
body.view-input .rtick,
body.view-result .rtick { stroke: rgba(26, 24, 20, 0.2); }
body.page-hyeonwol .rtrig,
body.view-input .rtrig,
body.view-result .rtrig { fill: rgba(26, 24, 20, 0.32); }
body.page-hyeonwol .rtrig.sm,
body.view-input .rtrig.sm,
body.view-result .rtrig.sm { fill: rgba(26, 24, 20, 0.18); }

body.page-hyeonwol .rit-aura,
body.view-input .rit-aura,
body.view-result .rit-aura {
  background: radial-gradient(circle, rgba(92, 79, 58, 0.1) 0%, transparent 70%);
}

/* 사주 4기둥 카드 */
body.page-hyeonwol .spread-card .card-face,
body.view-input .spread-card .card-face,
body.view-result .spread-card .card-face {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  box-shadow: none;
  color: var(--ld-ink);
}
body.page-hyeonwol .spread-card .card-face.day,
body.view-input .spread-card .card-face.day,
body.view-result .spread-card .card-face.day {
  border-color: rgba(26, 24, 20, 0.18);
  box-shadow: none;
}
body.page-hyeonwol .card-face::after,
body.view-input .card-face::after,
body.view-result .card-face::after {
  background: linear-gradient(
    110deg,
    transparent 0%,
    transparent 42%,
    rgba(92, 79, 58, 0.06) 48%,
    rgba(92, 79, 58, 0.14) 50%,
    rgba(92, 79, 58, 0.05) 54%,
    transparent 62%,
    transparent 100%
  );
}
body.page-hyeonwol .card-label,
body.view-input .card-label,
body.view-result .card-label {
  color: var(--ld-text-soft);
}
body.page-hyeonwol .card-gap,
body.page-hyeonwol .card-gap .stem,
body.view-input .card-gap,
body.view-input .card-gap .stem,
body.view-result .card-gap,
body.view-result .card-gap .stem {
  color: var(--ld-ink);
  text-shadow: none;
}
body.page-hyeonwol .card-gap .branch,
body.view-input .card-gap .branch,
body.view-result .card-gap .branch {
  color: var(--ld-text-mid);
}
body.page-hyeonwol .card-gap .dim,
body.view-input .card-gap .dim,
body.view-result .card-gap .dim {
  color: var(--ld-text-soft);
}
body.page-hyeonwol .card-ko,
body.view-input .card-ko,
body.view-result .card-ko {
  color: var(--ld-text-soft);
  font-family: var(--ld-font);
}

/* 명식 해독 패널 */
body.page-hyeonwol .rit-scroll,
body.view-input .rit-scroll,
body.view-result .rit-scroll {
  border: 1px solid var(--ld-border);
  border-radius: 12px;
  background: var(--ld-surface);
  box-shadow: var(--ld-shadow);
  backdrop-filter: none;
}
body.page-hyeonwol .rit-scroll::before,
body.view-input .rit-scroll::before,
body.view-result .rit-scroll::before {
  background-image:
    linear-gradient(rgba(26, 24, 20, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(26, 24, 20, 0.03) 1px, transparent 1px);
  opacity: 0.5;
}
body.page-hyeonwol .rit-scroll::after,
body.view-input .rit-scroll::after,
body.view-result .rit-scroll::after {
  border-color: var(--ld-border);
  color: rgba(92, 79, 58, 0.28);
  background: var(--ld-muted);
}
body.page-hyeonwol .rit-scroll-head,
body.view-input .rit-scroll-head,
body.view-result .rit-scroll-head {
  border-bottom-color: var(--ld-border);
}
body.page-hyeonwol .rit-scroll-head span,
body.view-input .rit-scroll-head span,
body.view-result .rit-scroll-head span {
  font-family: var(--ld-font);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ld-ink);
}
body.page-hyeonwol .rit-scroll-head em,
body.view-input .rit-scroll-head em,
body.view-result .rit-scroll-head em {
  font-family: var(--ld-font);
  font-size: 0.75rem;
  color: var(--ld-text-soft);
  font-style: normal;
}
body.page-hyeonwol .rit-read-lines span,
body.view-input .rit-read-lines span,
body.view-result .rit-read-lines span {
  color: var(--ld-text-soft);
  font-family: var(--ld-font);
  font-size: 0.6875rem;
}
body.page-hyeonwol .rit-read-lines strong,
body.view-input .rit-read-lines strong,
body.view-result .rit-read-lines strong {
  color: var(--ld-ink);
  font-family: var(--ld-font);
  font-weight: 600;
  text-shadow: none;
}
body.page-hyeonwol .rit-read-lines p,
body.view-input .rit-read-lines p,
body.view-result .rit-read-lines p {
  font-family: var(--ld-font);
}

/* 로컬 요약 pill */
body.page-hyeonwol .rit-local,
body.view-input .rit-local,
body.view-result .rit-local {
  border: 1px solid var(--ld-border);
  background: var(--ld-surface);
  backdrop-filter: none;
  box-shadow: none;
}
body.page-hyeonwol .rl-key,
body.view-input .rl-key,
body.view-result .rl-key {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
}
body.page-hyeonwol .rl-val,
body.view-input .rl-val,
body.view-result .rl-val {
  font-family: var(--ld-font);
  color: var(--ld-ink);
  font-weight: 600;
}

/* 단계 멘트 */
body.page-hyeonwol .rit-dot,
body.view-input .rit-dot,
body.view-result .rit-dot {
  background: var(--ld-accent);
  animation: ritDotBlinkLight 1.6s ease-in-out infinite;
}
@keyframes ritDotBlinkLight {
  0%, 100% { opacity: 0.35; transform: scale(0.85); box-shadow: none; }
  50%      { opacity: 1; transform: scale(1.15); box-shadow: 0 0 8px rgba(92, 79, 58, 0.25); }
}
body.page-hyeonwol #loadingPhaseText,
body.view-input #loadingPhaseText,
body.view-result #loadingPhaseText {
  font-family: var(--ld-font);
  font-size: 0.9375rem;
  color: var(--ld-text-mid);
  letter-spacing: -0.01em;
}
body.page-hyeonwol .rit-time-hint,
body.view-input .rit-time-hint,
body.view-result .rit-time-hint {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
  letter-spacing: -0.01em;
}

/* RPG 퀘스트 패널 */
body.page-hyeonwol .rit-quest,
body.view-input .rit-quest,
body.view-result .rit-quest {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: 12px;
  box-shadow: var(--ld-shadow);
  backdrop-filter: none;
  color: var(--ld-text-mid);
  font-family: var(--ld-font);
}
body.page-hyeonwol .rit-quest::before,
body.view-input .rit-quest::before,
body.view-result .rit-quest::before {
  background: linear-gradient(90deg, transparent, rgba(26, 24, 20, 0.08), transparent);
}
body.page-hyeonwol .rq-head,
body.view-input .rq-head,
body.view-result .rq-head {
  font-family: var(--ld-font);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ld-text-soft);
  border-bottom-color: var(--ld-border);
}
body.page-hyeonwol .rq-pct,
body.view-input .rq-pct,
body.view-result .rq-pct {
  font-family: var(--ld-font);
  color: var(--ld-ink);
  font-weight: 600;
}
body.page-hyeonwol .rq-step,
body.view-input .rq-step,
body.view-result .rq-step {
  font-family: var(--ld-font);
  font-size: 0.8125rem;
  letter-spacing: -0.01em;
  color: var(--ld-text-soft);
}
body.page-hyeonwol .rq-mark,
body.view-input .rq-mark,
body.view-result .rq-mark {
  border-color: var(--ld-border);
}
body.page-hyeonwol .rq-step.active,
body.view-input .rq-step.active,
body.view-result .rq-step.active {
  color: var(--ld-ink);
  text-shadow: none;
  font-weight: 500;
}
body.page-hyeonwol .rq-step.active .rq-mark,
body.view-input .rq-step.active .rq-mark,
body.view-result .rq-step.active .rq-mark {
  background: rgba(92, 79, 58, 0.12);
  border-color: var(--ld-accent);
  box-shadow: none;
  animation: rqPulseLight 1.5s ease-in-out infinite;
}
@keyframes rqPulseLight {
  0%, 100% { box-shadow: 0 0 0 2px rgba(92, 79, 58, 0.08); }
  50%      { box-shadow: 0 0 0 3px rgba(92, 79, 58, 0.16); }
}
body.page-hyeonwol .rq-step.done,
body.view-input .rq-step.done,
body.view-result .rq-step.done {
  color: #4a7a58;
}
body.page-hyeonwol .rq-step.done .rq-mark,
body.view-input .rq-step.done .rq-mark,
body.view-result .rq-step.done .rq-mark {
  background: #5a9a72;
  border-color: #5a9a72;
  box-shadow: none;
}
body.page-hyeonwol .rq-step.done .rq-mark::after,
body.view-input .rq-step.done .rq-mark::after,
body.view-result .rq-step.done .rq-mark::after {
  color: #fff;
}
body.page-hyeonwol .rq-bar,
body.view-input .rq-bar,
body.view-result .rq-bar {
  background: var(--ld-muted);
}
body.page-hyeonwol .rq-bar-fill,
body.view-input .rq-bar-fill,
body.view-result .rq-bar-fill {
  background: var(--ld-ink);
  box-shadow: none;
}
body.page-hyeonwol .rq-bar-fill::after,
body.view-input .rq-bar-fill::after,
body.view-result .rq-bar-fill::after {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35));
  opacity: 0.5;
}

/* 오행 게이지 패널 */
body.page-hyeonwol .rit-five,
body.view-input .rit-five,
body.view-result .rit-five {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: 12px;
  box-shadow: var(--ld-shadow);
  backdrop-filter: none;
}
body.page-hyeonwol .rit-five::before,
body.view-input .rit-five::before,
body.view-result .rit-five::before {
  background: linear-gradient(90deg, transparent, rgba(26, 24, 20, 0.08), transparent);
}
body.page-hyeonwol .rf-head,
body.view-input .rf-head,
body.view-result .rf-head {
  font-family: var(--ld-font);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  color: var(--ld-text-soft);
  border-bottom-color: var(--ld-border);
}
body.page-hyeonwol .rf-han,
body.view-input .rf-han,
body.view-result .rf-han {
  font-family: var(--ld-font-display);
  text-shadow: none;
}
body.page-hyeonwol .rf-row[data-el="목"] .rf-han,
body.view-input .rf-row[data-el="목"] .rf-han,
body.view-result .rf-row[data-el="목"] .rf-han { color: #4a8a56; }
body.page-hyeonwol .rf-row[data-el="화"] .rf-han,
body.view-input .rf-row[data-el="화"] .rf-han,
body.view-result .rf-row[data-el="화"] .rf-han { color: #b54a4a; }
body.page-hyeonwol .rf-row[data-el="토"] .rf-han,
body.view-input .rf-row[data-el="토"] .rf-han,
body.view-result .rf-row[data-el="토"] .rf-han { color: #8a7344; }
body.page-hyeonwol .rf-row[data-el="금"] .rf-han,
body.view-input .rf-row[data-el="금"] .rf-han,
body.view-result .rf-row[data-el="금"] .rf-han { color: #6a6660; }
body.page-hyeonwol .rf-row[data-el="수"] .rf-han,
body.view-input .rf-row[data-el="수"] .rf-han,
body.view-result .rf-row[data-el="수"] .rf-han { color: #4a7a96; }
body.page-hyeonwol .rf-bar,
body.view-input .rf-bar,
body.view-result .rf-bar {
  background: var(--ld-muted);
}
body.page-hyeonwol .rf-fill-mok,
body.view-input .rf-fill-mok,
body.view-result .rf-fill-mok { background: linear-gradient(90deg, #3d6e48, #5a9a6a); box-shadow: none; }
body.page-hyeonwol .rf-fill-hwa,
body.view-input .rf-fill-hwa,
body.view-result .rf-fill-hwa { background: linear-gradient(90deg, #8a3a3a, #c45a5a); box-shadow: none; }
body.page-hyeonwol .rf-fill-to,
body.view-input .rf-fill-to,
body.view-result .rf-fill-to { background: linear-gradient(90deg, #6e5a30, #a08850); box-shadow: none; }
body.page-hyeonwol .rf-fill-geum,
body.view-input .rf-fill-geum,
body.view-result .rf-fill-geum { background: linear-gradient(90deg, #6a6660, #9a9690); box-shadow: none; }
body.page-hyeonwol .rf-fill-su,
body.view-input .rf-fill-su,
body.view-result .rf-fill-su { background: linear-gradient(90deg, #3a6078, #5a8aaa); box-shadow: none; }
body.page-hyeonwol .rf-cnt,
body.view-input .rf-cnt,
body.view-result .rf-cnt {
  font-family: var(--ld-font);
  color: var(--ld-text-mid);
}

body.page-hyeonwol .rit-status,
body.view-input .rit-status,
body.view-result .rit-status,
body.page-hyeonwol .rit-sub,
body.view-input .rit-sub,
body.view-result .rit-sub {
  font-family: var(--ld-font);
  color: var(--ld-text-mid);
}

/* 로딩 → 결과 전환 (라이트) */
body.page-hyeonwol .loading-overlay.ritual-exiting,
body.view-input .loading-overlay.ritual-exiting,
body.view-result .loading-overlay.ritual-exiting {
  animation: ritualOverlayExitLight 1.5s ease-in both;
}
@keyframes ritualOverlayExitLight {
  0%   { opacity: 1; background: rgba(243, 240, 234, 0.96); }
  18%  { opacity: 1; background: rgba(250, 248, 244, 0.98); }
  40%  { opacity: 1; background: rgba(255, 252, 246, 1); }
  56%  { opacity: 1; background: rgba(243, 240, 234, 1); }
  100% { opacity: 0; background: rgba(243, 240, 234, 0); }
}
body.page-hyeonwol .loading-overlay.ritual-exiting .rit-wrapper,
body.view-input .loading-overlay.ritual-exiting .rit-wrapper,
body.view-result .loading-overlay.ritual-exiting .rit-wrapper {
  animation: ritualWrapperExitLight 0.62s ease-in both;
}
@keyframes ritualWrapperExitLight {
  0%   { opacity: 1; transform: scale(1); filter: brightness(1); }
  32%  { opacity: 1; transform: scale(1.04); filter: brightness(1.08); }
  100% { opacity: 0; transform: scale(0.96); filter: brightness(1); }
}
body.page-hyeonwol #resultView.ritual-revealed,
body.view-input #resultView.ritual-revealed,
body.view-result #resultView.ritual-revealed {
  animation: resultRitualRevealLight 1.0s cubic-bezier(0.16, 1, 0.3, 1) both !important;
}
@keyframes resultRitualRevealLight {
  0%   { opacity: 0; transform: scale(0.98) translateY(12px); filter: none; }
  100% { opacity: 1; transform: none; filter: none; }
}
body.page-hyeonwol #ritualHanRain .rh-char,
body.view-input #ritualHanRain .rh-char,
body.view-result #ritualHanRain .rh-char {
  color: rgba(26, 24, 20, 0.06);
}

/* ── 결과 뷰 — 가독성 · quiet luxury ── */
body.view-result #resultView.active {
  background: var(--ld-bg);
  background-image:
    radial-gradient(ellipse 90% 70% at 50% -8%, rgba(255, 252, 246, 0.9) 0%, transparent 58%),
    linear-gradient(180deg, #F6F3ED 0%, var(--ld-bg) 100%);
}

body.view-result .res-topbar {
  background: rgba(246, 243, 237, 0.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--ld-border);
}
body.view-result .res-back,
body.view-result .music-toggle {
  border: 1px solid var(--ld-border);
  color: var(--ld-text-soft);
  font-family: var(--ld-font);
  font-size: 0.75rem;
  font-weight: 500;
  background: transparent;
  border-radius: 6px;
}
body.view-result .res-back:hover,
body.view-result .music-toggle:hover,
body.view-result .music-toggle.playing {
  background: var(--ld-muted);
  border-color: rgba(26, 24, 20, 0.14);
  color: var(--ld-ink);
}
body.view-result #resultMeta {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
  font-size: 0.75rem;
  letter-spacing: -0.01em;
}

body.view-result .book-vp::-webkit-scrollbar-thumb {
  background: rgba(26, 24, 20, 0.12);
}

/* 콘텐츠 영역 */
body.view-result .bpi {
  max-width: 680px;
  margin: 0 auto;
  padding:
    var(--ld-space-lg)
    max(20px, env(safe-area-inset-right, 0px))
    calc(88px + env(safe-area-inset-bottom, 0px))
    max(20px, env(safe-area-inset-left, 0px));
  word-break: normal;
  overflow-wrap: normal;
}

/* 캐릭터 인트로 */
body.view-result .boracle {
  display: flex;
  align-items: flex-start;
  gap: var(--ld-space-md);
  background: var(--ld-surface);
  border: none;
  border-radius: 12px;
  padding: var(--ld-space-md);
  margin-bottom: var(--ld-space-lg);
  box-shadow: none;
}
body.view-result .boracle-img {
  width: 56px;
  height: 56px;
  border: 1px solid var(--ld-border);
  box-shadow: none;
}
body.view-result .boracle-name {
  font-family: var(--ld-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ld-text-soft);
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}
body.view-result .boracle-bubble p {
  font-family: var(--ld-font);
  font-size: 1rem;
  color: var(--ld-text-mid);
  line-height: 2;
  font-weight: 400;
  word-break: normal;
  overflow-wrap: normal;
}

/* 지표 섹션 카드 */
body.view-result .bm {
  margin-bottom: var(--ld-space-md);
  padding: var(--ld-space-md);
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: 12px;
  box-shadow: none;
}
body.view-result .bm-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: var(--ld-space-md);
  padding-bottom: var(--ld-space-sm);
  border-bottom: 1px solid var(--ld-line);
}
body.view-result .bm-head em {
  font-family: var(--ld-font-display);
  font-style: normal;
  font-size: 1.125rem;
  font-weight: 400;
  color: rgba(92, 79, 58, 0.18);
  line-height: 1;
}
body.view-result .bm-head h2 {
  font-family: var(--ld-font);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--ld-ink);
}
body.view-result .bm-desc {
  margin-top: var(--ld-space-sm);
  font-family: var(--ld-font);
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--ld-text-mid);
  line-height: 1.95;
  word-break: normal;
  overflow-wrap: normal;
}

body.view-result .bm,
body.view-result .bpi {
  color: var(--ld-text-mid);
  font-family: var(--ld-font);
  font-size: 0.9375rem;
  line-height: 1.95;
  letter-spacing: -0.01em;
}

/* 일간 카드 */
body.view-result .ds-han-wrap {
  border-radius: 10px;
}
body.view-result .ds-ko {
  font-family: var(--ld-font);
  color: var(--ld-ink);
}
body.view-result .ds-trait {
  font-family: var(--ld-font);
  color: var(--ld-text-mid);
  line-height: 1.7;
}

/* 사주 원국 미니 그리드 */
body.view-result .pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: var(--ld-space-md);
  background: var(--ld-bg);
  border: 1px solid var(--ld-line);
  border-radius: 12px;
}

body.view-result .pillar-col {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 0;
}

body.view-result .pillar-label {
  display: block;
  text-align: center;
  font-family: var(--ld-font);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ld-text-soft);
  letter-spacing: 0.02em;
  margin-bottom: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ld-line);
}

body.view-result .pillar-stem,
body.view-result .pillar-branch {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 6px;
  min-height: 76px;
  background: var(--ld-surface);
  border: 1px solid var(--ld-line);
  border-radius: 10px;
  box-sizing: border-box;
}

body.view-result .pillar-stem {
  margin-bottom: 0;
}

body.view-result .pillar-stem::before,
body.view-result .pillar-branch::before {
  display: block;
  font-family: var(--ld-font);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ld-text-soft);
  line-height: 1;
}

body.view-result .pillar-stem::before {
  content: "천간";
}

body.view-result .pillar-branch::before {
  content: "지지";
}

body.view-result .pillar-han {
  font-family: var(--ld-font-display);
  font-size: clamp(1.35rem, 4.5vw, 1.625rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: none;
}

body.view-result .pillar-ko {
  font-family: var(--ld-font);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ld-text-mid);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  word-break: keep-all;
}

body.view-result .pillar-el-dot {
  width: 6px;
  height: 6px;
  margin-top: 2px;
  flex-shrink: 0;
}

body.view-result .pillar-col--day .pillar-label {
  color: var(--ld-ink);
}

body.view-result .pillar-col--day .pillar-stem {
  border-color: rgba(26, 24, 20, 0.16);
  background: rgba(92, 79, 58, 0.07);
  box-shadow: inset 0 -2px 0 var(--ld-accent);
}

body.view-result .pillar-col--day .pillar-branch {
  border-color: rgba(26, 24, 20, 0.12);
  background: var(--ld-surface);
}

body.view-result .pillar-col--unknown {
  opacity: 0.55;
}

body.view-result .pillar-col--unknown .pillar-ko {
  color: var(--ld-text-soft);
  font-style: normal;
}

/* 사주표 */
body.view-result .soju-col {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  box-shadow: none;
}
body.view-result .soju-day-col {
  border-color: rgba(26, 24, 20, 0.18);
  box-shadow: none;
}
body.view-result .soju-col-head {
  background: var(--ld-muted);
  border-bottom-color: var(--ld-border);
}
body.view-result .soju-pillar-han {
  color: var(--ld-ink);
  text-shadow: none;
}
body.view-result .soju-day-col .soju-pillar-han {
  color: var(--ld-ink);
}
body.view-result .soju-pillar-ko,
body.view-result .soju-rl-s {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
  border-color: var(--ld-border);
}
body.view-result .soju-main-stem {
  color: var(--ld-ink);
  text-shadow: none;
}
body.view-result .soju-main-branch {
  color: var(--ld-text-mid);
  text-shadow: none;
}
body.view-result .soju-day-col .soju-main-stem,
body.view-result .soju-day-col .soju-main-branch {
  color: var(--ld-ink);
}

/* 오행 바 */
body.view-result .five-ko {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
}
body.view-result .five-track {
  height: 6px;
  background: var(--ld-muted);
}
body.view-result .five-pct {
  font-family: var(--ld-font);
  color: var(--ld-text-mid);
  opacity: 1;
}
body.view-result .five-status {
  font-family: var(--ld-font);
}
body.view-result .five-status--high {
  color: #8b3a3a;
  background: rgba(200, 94, 74, 0.12);
  border-color: rgba(200, 94, 74, 0.22);
}
body.view-result .five-status--rich {
  color: #3d6b52;
  background: rgba(74, 156, 109, 0.12);
  border-color: rgba(74, 156, 109, 0.22);
}
body.view-result .five-status--mid {
  color: var(--ld-text-soft);
  background: var(--ld-muted);
  border-color: var(--ld-line);
}
body.view-result .five-status--low {
  color: #7a6530;
  background: rgba(201, 148, 76, 0.12);
  border-color: rgba(201, 148, 76, 0.22);
}
body.view-result .five-status--empty {
  color: #4a6078;
  background: rgba(91, 136, 200, 0.12);
  border-color: rgba(91, 136, 200, 0.22);
}

/* 신강·신약 게이지 */
body.view-result .sg-track {
  height: 6px;
  background: var(--ld-muted);
}
body.view-result .sg-track-fill {
  background: linear-gradient(90deg, #6a8ab0 0%, var(--ld-accent) 50%, #b56a6a 100%);
}
body.view-result .sg-thumb {
  border-color: var(--ld-surface);
  box-shadow: 0 1px 4px rgba(26, 24, 20, 0.12);
}
body.view-result .sg-center-tick {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
}
body.view-result .sg-lbl--weak { color: #6a8ab0; }
body.view-result .sg-lbl--strong { color: #b56a6a; }
body.view-result .sg-type {
  font-family: var(--ld-font);
  color: var(--ld-ink);
}
body.view-result .sg-score {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
}

/* 대운 타임라인 */
body.view-result .dw-row {
  border-bottom-color: var(--ld-line);
  padding: 10px 0;
}
body.view-result .dw-age {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
}
body.view-result .dw-row--current {
  background: var(--ld-muted);
  border-radius: 8px;
  padding: 10px 12px;
  margin: 0 -4px;
}
body.view-result .dw-row--current .dw-age {
  color: var(--ld-ink);
  font-weight: 500;
}
body.view-result .dw-ganzhi {
  font-family: var(--ld-font);
  color: var(--ld-ink);
}
body.view-result .dw-year-range {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
}
body.view-result .dw-now-badge {
  font-family: var(--ld-font);
  background: rgba(92, 79, 58, 0.08);
  border-color: var(--ld-border);
  color: var(--ld-accent);
}

/* 재물 차트 영역 */
body.view-result .wealth-canvas-wrap {
  background: var(--ld-muted);
  border: 1px solid var(--ld-border);
  border-radius: 8px;
}

/* 챕터 헤더 · 본문 */
body.view-result .bchap-header {
  margin-bottom: var(--ld-space-lg);
  padding-bottom: var(--ld-space-md);
  border-bottom: 1px solid var(--ld-border);
}
body.view-result .bchap-num {
  font-family: var(--ld-font);
  font-size: 0.6875rem;
  color: var(--ld-text-soft);
  letter-spacing: 0.08em;
  text-transform: none;
  margin-bottom: 8px;
}
body.view-result .bchap-title {
  font-family: var(--ld-font);
  font-size: clamp(1.25rem, 4.2vw, 1.5rem);
  font-weight: 600;
  color: var(--ld-ink);
  letter-spacing: -0.02em;
  line-height: 1.45;
  text-shadow: none;
}
body.view-result .bchap-guide {
  margin: 0 0 var(--ld-space-md);
  padding: var(--ld-space-md);
  border: 1px solid var(--ld-border);
  border-radius: 12px;
  background: var(--ld-surface);
  box-shadow: none;
}
body.view-result .bchap-guide-img {
  border-color: var(--ld-border);
  box-shadow: none;
}
body.view-result .bchap-guide-label {
  font-family: var(--ld-font);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: none;
  color: var(--ld-text-soft);
}
body.view-result .bchap-guide p {
  font-family: var(--ld-font);
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--ld-text-mid);
  line-height: 1.95;
  word-break: normal;
  overflow-wrap: normal;
}
body.view-result .bchap-body {
  font-family: var(--ld-font);
  font-size: 1rem;
  font-weight: 400;
  line-height: 2;
  color: var(--ld-text-mid);
  word-break: normal;
  overflow-wrap: normal;
}
body.view-result .bchap-body p {
  margin: 0 0 1em;
  color: var(--ld-text-mid);
}
body.view-result .bchap-body p:last-child {
  margin-bottom: 0;
}
body.view-result .bchap-body h3 {
  font-family: var(--ld-font);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ld-ink);
  margin: 1.75em 0 0.65em;
  padding-left: 12px;
  border-left: 3px solid var(--ld-accent);
  line-height: 1.5;
  text-shadow: none;
}
body.view-result .bchap-body h4 {
  font-family: var(--ld-font);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ld-ink);
  margin: 1.5em 0 0.5em;
  line-height: 1.5;
}
body.view-result .bchap-body strong {
  color: var(--ld-emphasis);
  font-weight: 600;
}
body.view-result .bchap-body th {
  background: var(--ld-muted);
  color: var(--ld-text-mid);
  border-color: var(--ld-border);
  font-family: var(--ld-font);
  font-weight: 600;
}
body.view-result .bchap-body td {
  color: var(--ld-text-mid);
  border-color: var(--ld-border);
  font-family: var(--ld-font);
}

/* 13장 생활 궁합 요약표 */
body.view-result .bchap-body .lifemap-section {
  position: relative;
  margin: var(--ld-space-md) 0 var(--ld-space-lg);
  padding: var(--ld-space-lg) var(--ld-space-md) var(--ld-space-md);
  border: 1px solid var(--ld-border);
  border-radius: 14px;
  background: var(--ld-surface);
  box-shadow: none;
  overflow: visible;
}
body.view-result .bchap-body .lifemap-section + .lifemap-section {
  margin-top: var(--ld-space-sm);
}
body.view-result .bchap-body .lifemap-section::before {
  display: block;
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(26, 24, 20, 0.06) 0%,
    rgba(26, 24, 20, 0.02) 100%
  );
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}

body.view-result .bchap-body .lifemap-cat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: var(--ld-space-md);
  padding-bottom: var(--ld-space-sm);
  border-bottom: 1px solid var(--ld-line);
}
body.view-result .bchap-body .lifemap-cat-han {
  flex-shrink: 0;
  width: 2.25rem;
  font-family: var(--ld-font-display);
  font-size: 1.625rem;
  font-weight: 600;
  color: var(--ld-accent);
  line-height: 1;
  letter-spacing: 0.02em;
  text-shadow: none;
  text-align: center;
}
body.view-result .bchap-body .lifemap-cat-ko {
  font-family: var(--ld-font);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ld-ink);
  letter-spacing: -0.01em;
  text-transform: none;
  opacity: 1;
}

body.view-result .bchap-body .lifemap-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

body.view-result .bchap-body .lifemap-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 14px 14px 12px;
  border-radius: 10px;
  border: 1px solid var(--ld-line);
  background: var(--ld-bg);
  overflow: visible;
}
body.view-result .bchap-body .lifemap-card--near {
  border-color: rgba(90, 122, 98, 0.2);
  background: linear-gradient(
    165deg,
    rgba(90, 122, 98, 0.07) 0%,
    rgba(90, 122, 98, 0.02) 48%,
    var(--ld-bg) 100%
  );
  box-shadow: inset 3px 0 0 rgba(90, 122, 98, 0.55);
}
body.view-result .bchap-body .lifemap-card--away {
  border-color: rgba(154, 107, 90, 0.18);
  background: linear-gradient(
    165deg,
    rgba(154, 107, 90, 0.06) 0%,
    rgba(154, 107, 90, 0.02) 48%,
    var(--ld-bg) 100%
  );
  box-shadow: inset 3px 0 0 rgba(154, 107, 90, 0.45);
}
body.view-result .bchap-body .lifemap-card--near::after,
body.view-result .bchap-body .lifemap-card--away::after {
  display: none;
}
body.view-result .bchap-body .lifemap-card p {
  margin: 0;
}

body.view-result .bchap-body .lifemap-card-tag {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--ld-font);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  box-shadow: none;
}
body.view-result .bchap-body .lifemap-card--near .lifemap-card-tag {
  color: #4a6b52;
  background: rgba(90, 122, 98, 0.12);
  border: 1px solid rgba(90, 122, 98, 0.16);
}
body.view-result .bchap-body .lifemap-card--away .lifemap-card-tag {
  color: #8a5f4f;
  background: rgba(154, 107, 90, 0.1);
  border: 1px solid rgba(154, 107, 90, 0.14);
}

body.view-result .bchap-body .lifemap-card-items {
  flex: 1;
  margin: 0 0 10px;
  font-family: var(--ld-font);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ld-ink);
  line-height: 1.72;
  letter-spacing: -0.01em;
  word-break: keep-all;
}
body.view-result .bchap-body .lifemap-card--near .lifemap-card-items,
body.view-result .bchap-body .lifemap-card--away .lifemap-card-items {
  color: var(--ld-ink);
}

body.view-result .bchap-body .lifemap-card-note {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--ld-line);
  font-family: var(--ld-font);
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--ld-text-soft);
  line-height: 1.65;
  letter-spacing: -0.01em;
}
body.view-result .bchap-body .lifemap-card--near .lifemap-card-note {
  border-top-color: rgba(90, 122, 98, 0.14);
}
body.view-result .bchap-body .lifemap-card--away .lifemap-card-note {
  border-top-color: rgba(154, 107, 90, 0.12);
}

/* CTA */
body.view-result .bpage-foot {
  margin-top: var(--ld-space-xl);
}
body.view-result .bcta-btn {
  padding: 14px 32px;
  background: var(--ld-ink);
  color: var(--ld-surface);
  font-family: var(--ld-font);
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: none;
  border-radius: var(--ld-radius);
  box-shadow: none;
  transition: opacity 0.2s;
}
body.view-result .bcta-btn:hover {
  transform: none;
  opacity: 0.88;
  box-shadow: none;
}

/* 하단 네비 · 목차 */
body.view-result .book-nav {
  background: rgba(246, 243, 237, 0.95);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--ld-border);
}
body.view-result .barrow {
  border: 1px solid var(--ld-border);
  background: var(--ld-surface);
  color: var(--ld-text-soft);
  border-radius: 8px;
}
body.view-result .barrow:hover:not(:disabled) {
  background: var(--ld-muted);
  color: var(--ld-ink);
}
body.view-result .bnav-label,
body.view-result .bnav-total {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
  font-size: 0.75rem;
}
body.view-result .bnav-progress {
  background: var(--ld-muted);
}
body.view-result .bnav-progress-fill,
body.view-result .bnav-prog {
  background: var(--ld-muted);
}
body.view-result .bnav-progbar {
  background: var(--ld-ink);
  box-shadow: none;
}

body.view-result .toc-backdrop {
  background: rgba(26, 24, 20, 0.32);
}
body.view-result .toc-drawer {
  background: var(--ld-surface);
  border-top: 1px solid var(--ld-border);
  box-shadow: 0 -12px 40px rgba(26, 24, 20, 0.08);
}
body.view-result .toc-drawer-head::after {
  background: linear-gradient(90deg, transparent, var(--ld-border), transparent);
}
body.view-result .toc-head-han {
  color: var(--ld-text-soft);
}
body.view-result .toc-head-ko {
  font-family: var(--ld-font);
  color: var(--ld-ink);
  font-weight: 600;
}
body.view-result .toc-head-sub {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
}
body.view-result .toc-close-btn {
  color: var(--ld-text-soft);
  border-color: var(--ld-border);
}
body.view-result .toc-close-btn:hover {
  color: var(--ld-ink);
  background: var(--ld-muted);
}
body.view-result .toc-list::-webkit-scrollbar-thumb {
  background: rgba(26, 24, 20, 0.12);
}
body.view-result .toc-handle-bar {
  background: rgba(26, 24, 20, 0.14);
}

/* 목차 항목 — 다크 골드 호버/그림자 제거, quiet luxury 톤 */
body.view-result .toc-item {
  color: var(--ld-text-mid);
  font-family: var(--ld-font);
  border-color: var(--ld-line);
  border-radius: 10px;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
}
body.view-result .toc-item::before {
  display: none;
}
body.view-result .toc-item-han {
  color: var(--ld-text-soft);
  border-right-color: var(--ld-line);
  transition: color 0.2s ease;
}
body.view-result .toc-item-num {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
  transition: color 0.2s ease;
}
body.view-result .toc-item-name {
  font-family: var(--ld-font);
  color: var(--ld-text-mid);
  transition: color 0.2s ease;
}
body.view-result .toc-item-arrow {
  color: rgba(26, 24, 20, 0.18);
  transition: color 0.2s ease, transform 0.2s ease;
}
body.view-result .toc-item:hover {
  background: var(--ld-muted);
  border-color: rgba(26, 24, 20, 0.11);
  box-shadow: none;
  transform: none;
}
body.view-result .toc-item:active {
  background: var(--ld-bg-deep);
  transform: none;
}
body.view-result .toc-item:hover .toc-item-han {
  color: var(--ld-accent);
}
body.view-result .toc-item:hover .toc-item-num {
  color: var(--ld-text-soft);
}
body.view-result .toc-item:hover .toc-item-name {
  color: var(--ld-ink);
}
body.view-result .toc-item:hover .toc-item-arrow {
  color: var(--ld-text-soft);
  transform: translateX(1px);
}
body.view-result .toc-item.toc-item--active {
  background: var(--ld-bg-deep);
  border-color: rgba(26, 24, 20, 0.14);
  box-shadow: inset 3px 0 0 var(--ld-ink);
  transform: none;
}
body.view-result .toc-item.toc-item--active .toc-item-han {
  color: var(--ld-ink);
}
body.view-result .toc-item.toc-item--active .toc-item-num {
  color: var(--ld-text-soft);
}
body.view-result .toc-item.toc-item--active .toc-item-name {
  color: var(--ld-ink);
  font-weight: 600;
}
body.view-result .toc-item.toc-item--active .toc-item-arrow {
  color: var(--ld-ink);
  transform: translateX(1px);
}

body.view-result .toc-toggle-btn {
  transition: none;
}
body.view-result .toc-toggle-btn:hover,
body.view-result .toc-toggle-btn:active {
  transform: none;
}
body.view-result .toc-toggle-btn .toc-btn-orb {
  background: var(--ld-surface);
  border-color: var(--ld-border);
  box-shadow: none;
  color: var(--ld-text-mid);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
body.view-result .toc-toggle-btn:hover .toc-btn-orb {
  background: var(--ld-muted);
  border-color: rgba(26, 24, 20, 0.14);
  box-shadow: none;
  color: var(--ld-ink);
}
body.view-result .toc-toggle-btn.active .toc-btn-orb {
  background: var(--ld-bg-deep);
  border-color: rgba(26, 24, 20, 0.16);
  box-shadow: none;
  color: var(--ld-ink);
}
body.view-result .toc-btn-label {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
  transition: color 0.2s ease;
}
body.view-result .toc-toggle-btn:hover .toc-btn-label,
body.view-result .toc-toggle-btn.active .toc-btn-label {
  color: var(--ld-ink);
}

/* 페이지 전환 — 라이트 */
body.view-result .pg-flash {
  background: radial-gradient(ellipse 55% 35% at 50% 30%, rgba(255, 252, 246, 0.5) 0%, transparent 70%);
}
body.view-result .book-page.active.page-enter-next,
body.view-result .book-page.active.page-enter-prev {
  animation: pgFadeInLight 0.38s ease both;
}
@keyframes pgFadeInLight {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; filter: none; }
}

body.view-result.result-theme-hyeonwol #resultView .boracle,
body.result-theme-hyeonwol #resultView .boracle {
  border: none;
  background: var(--ld-surface);
  box-shadow: none;
}
body.view-result.result-theme-hyeonwol #resultView .boracle-name,
body.view-result.result-theme-hyeonwol #resultView .bchap-title,
body.view-result.result-theme-hyeonwol #resultView .bchap-num,
body.result-theme-hyeonwol #resultView .boracle-name,
body.result-theme-hyeonwol #resultView .bchap-title,
body.result-theme-hyeonwol #resultView .bchap-num {
  color: var(--ld-ink);
  text-shadow: none;
}

body.view-result .book-stage {
  background: transparent;
  border-color: var(--ld-border);
  box-shadow: none;
}
body.view-result .book-head h2 {
  font-family: var(--ld-font);
  color: var(--ld-ink);
  text-shadow: none;
}

@media (max-width: 680px) {
  body.view-input .input-scene {
    padding-top: calc(var(--ld-nav-h) + env(safe-area-inset-top, 0px));
    justify-content: center;
  }
  body.view-input .char-header {
    margin-bottom: var(--ld-space-sm);
  }
  body.view-input .char-wrap img {
    max-height: min(44vh, 360px);
  }
  body.view-input .scene-dialog,
  body.view-input .input-card {
    border-radius: 10px;
  }

  /* 결과 페이지 모바일 가독성 */
  body.view-result .bpi {
    padding:
      var(--ld-space-md)
      max(16px, env(safe-area-inset-right, 0px))
      calc(80px + env(safe-area-inset-bottom, 0px))
      max(16px, env(safe-area-inset-left, 0px));
  }
  body.view-result .bchap-title {
    font-size: 1.2rem;
  }
  body.view-result .bchap-body {
    font-size: 0.9375rem;
    line-height: 1.98;
  }
  body.view-result .bchap-body h3 {
    font-size: 0.96875rem;
    margin-top: 1.5em;
  }
  body.view-result .bm {
    padding: var(--ld-space-sm) var(--ld-space-md);
  }
  body.view-result .boracle-bubble p {
    font-size: 0.9375rem;
  }
  body.view-result .pillar-grid {
    gap: 8px;
    padding: 12px 10px;
  }
  body.view-result .pillar-stem,
  body.view-result .pillar-branch {
    min-height: 68px;
    padding: 10px 4px;
  }
  body.view-result .pillar-han {
    font-size: 1.25rem;
  }
  body.view-result .pillar-ko {
    font-size: 0.6875rem;
  }
  body.view-result .pillar-label {
    font-size: 0.6875rem;
    padding-bottom: 6px;
  }
  body.view-result .bcta-btn {
    width: 100%;
    box-sizing: border-box;
  }

  /* 13장 생활 궁합 요약표 — 모바일 */
  body.view-result .bchap-body .lifemap-section {
    padding: var(--ld-space-md) 14px 14px;
    border-radius: 12px;
    margin: var(--ld-space-sm) 0 var(--ld-space-md);
  }
  body.view-result .bchap-body .lifemap-cat-row {
    gap: 10px;
    margin-bottom: 12px;
  }
  body.view-result .bchap-body .lifemap-cat-han {
    width: 2rem;
    font-size: 1.45rem;
  }
  body.view-result .bchap-body .lifemap-cat-ko {
    font-size: 0.78125rem;
  }
  body.view-result .bchap-body .lifemap-duo {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  body.view-result .bchap-body .lifemap-card {
    padding: 12px 12px 10px;
  }
  body.view-result .bchap-body .lifemap-card-items {
    font-size: 0.90625rem;
    line-height: 1.68;
  }
  body.view-result .bchap-body .lifemap-card-note {
    font-size: 0.78125rem;
    padding-top: 8px;
  }
}

/* ── 시네마틱 오프닝 중 배경 ── */
body.hco-open,
body.page-hyeonwol.hco-open {
  background: #F3F0EA;
}
body.hco-open #particleCanvas,
body.page-hyeonwol #particleCanvas {
  display: none;
}

/* styles.css 다크 테마 오버라이드 — result-theme (boracle 등은 상단 결과 뷰 섹션 참조) */

/* 결과 화면 라이트 테마 — 로딩 관련 중복 제거됨 (상단 분석 로딩 섹션 참조) */

/* 후기 모달 */
body.view-input .review-modal-backdrop,
body.view-result .review-modal-backdrop {
  background: rgba(26, 24, 20, 0.32);
  backdrop-filter: blur(8px);
}
body.view-input .review-modal-card,
body.view-result .review-modal-card {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  box-shadow: var(--ld-shadow);
  color: var(--ld-text);
}
body.view-input .review-modal-card::before,
body.view-result .review-modal-card::before {
  background: rgba(26, 24, 20, 0.12);
}
body.view-input .review-modal-kicker,
body.view-result .review-modal-kicker {
  font-family: var(--ld-font);
  color: var(--ld-text-soft);
  letter-spacing: 0.1em;
  opacity: 1;
}
body.view-input .review-modal-title,
body.view-result .review-modal-title {
  font-family: var(--ld-font);
  color: var(--ld-ink);
  font-weight: 600;
}
body.view-input .review-modal-desc,
body.view-result .review-modal-desc {
  font-family: var(--ld-font);
  color: var(--ld-text-mid);
}
body.view-input .review-modal-card hr,
body.view-result .review-modal-card hr {
  border-color: var(--ld-border);
}
body.view-input .review-star,
body.view-result .review-star {
  color: var(--ld-muted);
}
body.view-input .review-star.active,
body.view-result .review-star.active {
  color: var(--ld-accent);
  text-shadow: none;
}
body.view-input .review-textarea,
body.view-result .review-textarea {
  background: var(--ld-bg);
  border-color: var(--ld-border);
  color: var(--ld-ink);
  font-family: var(--ld-font);
}
body.view-input .review-textarea::placeholder,
body.view-result .review-textarea::placeholder {
  color: var(--ld-text-soft);
}
body.view-input .review-textarea:focus,
body.view-result .review-textarea:focus {
  border-color: rgba(26, 24, 20, 0.22);
  box-shadow: 0 0 0 3px rgba(26, 24, 20, 0.06);
}
body.view-input .review-later-btn,
body.view-result .review-later-btn {
  border-color: var(--ld-border);
  color: var(--ld-text-soft);
  font-family: var(--ld-font);
}
body.view-input .review-later-btn:hover,
body.view-result .review-later-btn:hover {
  border-color: rgba(26, 24, 20, 0.18);
  color: var(--ld-ink);
}
body.view-input .review-submit-btn,
body.view-result .review-submit-btn {
  background: var(--ld-ink);
  color: var(--ld-surface);
  font-family: var(--ld-font);
  font-weight: 600;
  box-shadow: none;
}

/* hyeonwol 페이지 — 마이페이지는 styles.css view-mypage 토큰 사용 */
body.page-hyeonwol.view-landing .landing-scene,
body.page-hyeonwol.view-input,
body.page-hyeonwol.view-result,
body.page-hyeonwol.view-mypage {
  font-family: var(--ld-font, "Pretendard", system-ui, sans-serif);
}

/* 카카오 · 토스트 · 작업 배너 (입력/결과) */
body.view-input .kakao-modal-backdrop,
body.view-result .kakao-modal-backdrop {
  background: rgba(26, 24, 20, 0.32);
  backdrop-filter: blur(6px);
}
body.view-input .kakao-modal-card,
body.view-result .kakao-modal-card {
  padding: var(--ld-space-lg) var(--ld-space-md) var(--ld-space-md);
  background: var(--ld-surface);
  border: none;
  border-radius: 14px;
  box-shadow: var(--ld-shadow);
  color: var(--ld-text);
  text-align: center;
}
body.view-input .kakao-modal-close,
body.view-result .kakao-modal-close {
  color: var(--ld-text-soft);
}
body.view-input .kakao-modal-close:hover,
body.view-result .kakao-modal-close:hover {
  color: var(--ld-ink);
}
body.view-input .kakao-modal-label,
body.view-result .kakao-modal-label,
body.view-input .kakao-modal-title,
body.view-result .kakao-modal-title,
body.view-input .kakao-modal-desc,
body.view-result .kakao-modal-desc,
body.view-input .kakao-modal-foot,
body.view-result .kakao-modal-foot {
  font-family: var(--ld-font);
}
body.view-input .kakao-modal-label,
body.view-result .kakao-modal-label {
  font-size: 0.6875rem;
  color: var(--ld-text-soft);
}
body.view-input .kakao-modal-title,
body.view-result .kakao-modal-title {
  color: var(--ld-ink);
  font-weight: 600;
}
body.view-input .kakao-modal-desc,
body.view-result .kakao-modal-desc {
  color: var(--ld-text-mid);
}
body.view-input .kakao-modal-foot,
body.view-result .kakao-modal-foot {
  color: var(--ld-text-soft);
}
body.view-input .app-toast,
body.view-result .app-toast {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  color: var(--ld-text);
  font-family: var(--ld-font);
  box-shadow: 0 8px 24px rgba(26, 24, 20, 0.08);
}
body.view-input .active-job-banner,
body.view-result .active-job-banner {
  background: var(--ld-surface);
  border: 1px solid var(--ld-border);
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(26, 24, 20, 0.1);
  font-family: var(--ld-font);
}
body.view-input .ajb-label,
body.view-result .ajb-label,
body.view-input .ajb-msg,
body.view-result .ajb-msg {
  font-family: var(--ld-font);
  color: var(--ld-text-mid);
}
body.view-input .ajb-body::after,
body.view-result .ajb-body::after {
  display: none;
}