/* ==========================================================================
   천명(天命) 프리미엄 사주 랜딩페이지 & 만세력 해독 스타일시트
   Luxury Mystic Dark Mode & Traditional Korean Modern Aesthetic
   ========================================================================== */

:root {
  --bg-deep: #07060c;
  --bg-surface: #0e0c18;
  --bg-card: rgba(21, 18, 38, 0.7);
  --bg-card-hover: rgba(30, 26, 54, 0.85);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-gold: rgba(245, 208, 97, 0.25);
  --border-gold-bright: rgba(245, 208, 97, 0.6);

  /* Gold Gradients */
  --gold-primary: #f5d061;
  --gold-secondary: #e5b842;
  --gold-dark: #b8861e;
  --gold-gradient: linear-gradient(135deg, #ffe484 0%, #f5d061 40%, #d49a29 100%);
  --gold-glow: 0 0 30px rgba(245, 208, 97, 0.35);

  /* Toss Payments Theme */
  --toss-blue: #0064FF;
  --toss-blue-hover: #1b74ff;
  --toss-dark: #191f28;

  /* Mystic Glows */
  --purple-glow: rgba(142, 85, 255, 0.25);
  --cyan-glow: rgba(56, 189, 248, 0.2);

  /* Text Colors */
  --text-primary: #f8fafc;
  --text-secondary: #cbd5e1;
  --text-muted: #8b8ea4;
  --text-gold: #f5d061;

  /* Five Elements (오행) Colors */
  --el-wood: #10b981;    /* 木 - 청색/녹색 */
  --el-fire: #ef4444;    /* 火 - 적색 */
  --el-earth: #f59e0b;   /* 土 - 황색 */
  --el-metal: #cbd5e1;   /* 金 - 백색/은색 */
  --el-water: #38bdf8;   /* 水 - 흑색/청수색 */

  /* Fonts */
  --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
  --font-serif: 'Gowun Batang', 'Cinzel', serif;
}

/* Reset & 기본 설정 */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ================================================================
   커서 & 텍스트 선택 방지 (버튼/카드/라벨 등 모든 인터랙티브 요소)
   - 클릭 가능한 요소: 손가락(pointer) 커서
   - 비편집 요소: 텍스트 선택 & I-beam 커서 제거
   ================================================================ */
a,
button,
.btn,
.btn-primary-sm,
.btn-hero,
.btn-secondary,
.btn-submit,
.btn-upgrade,
.btn-outline,
.btn-primary,
.btn-reset,
.btn-share,
.btn-sticky,
.btn-toss-pay,
.btn-toss-confirm,
.btn-text-nav,
.glow-btn,
.glow-effect,
.radio-pill,
.concern-tag,
.pay-method,
.interactive-pillar-card,
.report-select-card,
.manse-teaser-box,
.modal-close,
.feature-card,
.review-card,
.pricing-card,
.nav-links a,
.header-cta a,
.logo {
  cursor: pointer !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 텍스트 전용 비편집 요소에서도 I-beam 방지 */
.hero-badge,
.hero-title,
.hero-desc,
.saju-pillars-preview,
.pillar-tag,
.pillar-label,
.hanja-box,
.hanja-box span,
.section-header,
.section-sub,
.section-title,
.section-desc,
.stats-bar,
.stat-item,
.stat-num,
.stat-label,
.top-banner,
.banner-inner,
.countdown,
.live-toast,
.toast-content,
.congrats-tag,
.result-header,
.special-badge,
.security-text,
.privacy-notice,
.pillar-detail-box,
.ai-critic-quote,
.detail-title-wrap,
.detail-advice-row,
.footer,
.footer-brand,
.company-info,
.copyright {
  cursor: default;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 실제 입력 필드만 텍스트 커서 허용 */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
textarea {
  cursor: text;
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

select {
  cursor: pointer;
}

html {
  scroll-behavior: smooth;
  font-family: var(--font-body);
  background-color: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: 70px;
}

/* 배경 별빛 캔버스 */
#starsCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

/* Typography Helpers */
.gold-gradient {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

.text-center {
  text-align: center;
}

/* Section Header */
.section-header {
  margin-bottom: 40px;
}

.section-sub {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--gold-primary);
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 4px 14px;
  background: rgba(245, 208, 97, 0.08);
  border: 1px solid rgba(245, 208, 97, 0.2);
  border-radius: 999px;
}

.section-title {
  font-family: var(--font-serif);
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.35;
  color: #ffffff;
  margin-bottom: 14px;
}

.section-desc {
  font-size: 1.05rem;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto;
}

/* SPA Page View Transitions */
.page-view {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.page-view.active {
  display: block;
  opacity: 1;
  animation: fadeInView 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInView {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.hidden {
  display: none !important;
}

/* 뒤로가기 내비 버튼 */
.view-back-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.btn-text-nav {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn-text-nav:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: var(--border-gold);
}

/* ==========================================================================
   상단 프로모션 배너 & 헤더
   ========================================================================== */
.top-banner {
  background: linear-gradient(90deg, #1b1233 0%, #2f1d52 50%, #1b1233 100%);
  border-bottom: 1px solid rgba(245, 208, 97, 0.2);
  padding: 8px 0;
  font-size: 0.85rem;
  position: relative;
  z-index: 20;
}

.banner-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.top-banner .badge {
  background: #ef4444;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
}

.countdown {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #ffe89e;
}

.countdown .time-box {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(245, 208, 97, 0.3);
  padding: 2px 6px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  color: #fff;
}

.header {
  position: sticky;
  top: 0;
  z-index: 100;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(7, 6, 12, 0.85);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: #fff;
  transition: opacity 0.2s ease;
}

.logo:hover {
  opacity: 0.95;
}

/* ==========================================================================
   전통 인장 / 직인 (낙관) 로고 마크
   ========================================================================== */
.logo-mark.stamp {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #dc2626; /* 선명한 주색(朱色) 인주 테두리 */
  border-radius: 7px;
  background: radial-gradient(circle at center, rgba(220, 38, 38, 0.25) 0%, rgba(153, 27, 27, 0.38) 100%);
  box-shadow: 
    inset 0 0 6px rgba(220, 38, 38, 0.45),
    0 0 12px rgba(220, 38, 38, 0.25);
  padding: 2px;
  box-sizing: border-box;
  transform: rotate(-2.5deg); /* 한지에 방금 찍힌 듯한 자연스러운 각도 */
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
  flex-shrink: 0;
}

.logo:hover .logo-mark.stamp {
  transform: rotate(0deg) scale(1.06);
  box-shadow: 
    inset 0 0 9px rgba(239, 68, 68, 0.55),
    0 0 18px rgba(239, 68, 68, 0.45);
}

.stamp-inner {
  width: 100%;
  height: 100%;
  border: 1px solid rgba(239, 68, 68, 0.45); /* 인장 내부 음각 라인 */
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.16);
}

.stamp-char {
  font-family: 'Noto Serif KR', 'Gowun Batang', serif;
  font-size: 0.72rem; /* 보더라인 내 완벽 중앙 정렬 */
  font-weight: 700;
  color: #fca5a5; /* 고풍스러운 주사 인주색 */
  line-height: 1.05;
  letter-spacing: 0;
  text-shadow: 0 0 3px rgba(239, 68, 68, 0.8);
  user-select: none;
}

/* ==========================================================================
   로고 텍스트 (천문사주) 브랜딩 타이포그래피
   고운바탕 & 본명조 기반의 유려하고 기품 있는 세리프 서체
   딱딱하고 무거운 고딕 볼드에서 벗어나 동양적 우아함과 높은 가독성 동시 구현
   ========================================================================== */
.logo-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.15;
}

.logo-title {
  font-family: 'Gowun Batang', 'Noto Serif KR', serif;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #f8fafc;
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
  transition: color 0.2s ease;
}

.logo:hover .logo-title {
  color: #ffffff;
}

.logo-accent {
  font-family: 'Gowun Batang', 'Noto Serif KR', serif;
  font-size: 1.06rem;
  font-weight: 600;
  background: linear-gradient(135deg, #ffe58f 0%, #f5d061 50%, #d49a29 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.01em;
  margin-left: 2px;
  filter: drop-shadow(0 0 8px rgba(245, 208, 97, 0.25));
  transition: filter 0.2s ease;
}

.logo:hover .logo-accent {
  filter: drop-shadow(0 0 12px rgba(245, 208, 97, 0.55));
}

.logo-subtag {
  font-family: 'Gowun Batang', 'Noto Serif KR', var(--font-body);
  font-size: 0.62rem;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.1em;
  margin-top: 1px;
  opacity: 0.85;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.logo:hover .logo-subtag {
  color: #cbd5e1;
  opacity: 1;
}

/* 기존 .logo-text 마크업 호환용 */
.logo-text {
  font-family: 'Gowun Batang', 'Noto Serif KR', serif;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #f8fafc;
}

.logo-text em {
  font-style: normal;
  font-family: 'Gowun Batang', 'Noto Serif KR', serif;
  font-size: 1.06rem;
  font-weight: 600;
  background: linear-gradient(135deg, #ffe58f 0%, #f5d061 50%, #d49a29 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: 2px;
}

.nav-links {
  display: flex;
  gap: 28px;
}

.nav-links a {
  text-decoration: none;
  color: var(--text-secondary);
  font-size: 0.92rem;
  font-weight: 500;
  transition: color 0.2s;
}

.nav-links a:hover {
  color: var(--gold-primary);
}

/* 버튼 공통 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  transition: all 0.25s ease;
}

.btn-primary-sm {
  background: var(--gold-gradient);
  color: #140e02;
  padding: 9px 18px;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 8px;
}

.glow-btn {
  box-shadow: 0 4px 20px rgba(245, 208, 97, 0.25);
}

.glow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(245, 208, 97, 0.45);
}

/* ==========================================================================
   VIEW 1: 메인 스토리텔링 랜딩 섹션
   ========================================================================== */
.hero-section {
  padding: 70px 0 50px;
  text-align: center;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  background: rgba(142, 85, 255, 0.12);
  border: 1px solid rgba(142, 85, 255, 0.35);
  border-radius: 999px;
  font-size: 0.84rem;
  color: #d8b4fe;
  margin-bottom: 24px;
}

.hero-title {
  font-family: var(--font-serif);
  font-size: 3.1rem;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 20px;
  letter-spacing: -1px;
}

.hero-desc {
  font-size: 1.15rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 680px;
  margin: 0 auto 36px;
  word-break: keep-all;
}

.btn-hero {
  background: var(--gold-gradient);
  color: #120c02;
  padding: 16px 38px;
  border-radius: 14px;
  font-size: 1.15rem;
  font-weight: 800;
  flex-direction: column;
  line-height: 1.25;
  position: relative;
  overflow: hidden;
}

.btn-hero .btn-subtext {
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(20, 14, 2, 0.7);
  margin-top: 4px;
}

.btn-hero i {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1rem;
}

/* 만세력 티저 카드 */
.manse-teaser-box {
  max-width: 620px;
  margin: 45px auto 0;
  background: rgba(18, 14, 34, 0.75);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 24px;
  backdrop-filter: blur(16px);
  transition: all 0.3s ease;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.manse-teaser-box:hover {
  transform: translateY(-4px);
  border-color: var(--gold-primary);
  box-shadow: 0 20px 50px rgba(245, 208, 97, 0.2);
}

.teaser-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  font-size: 0.82rem;
}

.teaser-tag {
  color: var(--gold-primary);
  font-weight: 700;
}

.teaser-hint {
  color: var(--text-muted);
}

.teaser-footer {
  font-size: 0.84rem;
  color: var(--text-secondary);
  margin-top: 16px;
  background: rgba(255, 255, 255, 0.03);
  padding: 8px 12px;
  border-radius: 8px;
}

/* 사주 4기둥 시각화 */
.saju-pillars-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.pillar-card {
  flex: 1;
  padding: 14px 6px;
  background: rgba(12, 10, 22, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.pillar-card.highlight {
  border-color: var(--gold-primary);
  background: rgba(36, 28, 62, 0.9);
  box-shadow: 0 0 20px rgba(245, 208, 97, 0.25);
  transform: scale(1.05);
}

.pillar-tag {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.current-tag {
  color: var(--gold-primary);
  font-weight: 700;
}

.hanja-box {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hanja-box span {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 800;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.pillar-label {
  font-size: 0.72rem;
  color: var(--text-secondary);
}

/* 오행 컬러 */
.wood { color: var(--el-wood) !important; border-color: rgba(16, 185, 129, 0.4) !important; }
.fire { color: var(--el-fire) !important; border-color: rgba(239, 68, 68, 0.4) !important; }
.earth { color: var(--el-earth) !important; border-color: rgba(245, 158, 11, 0.4) !important; }
.metal { color: var(--el-metal) !important; border-color: rgba(203, 213, 225, 0.4) !important; }
.water { color: var(--el-water) !important; border-color: rgba(56, 189, 248, 0.4) !important; }

/* 스토리텔링 섹션 */
.story-section {
  padding: 80px 0;
}

.story-card {
  background: linear-gradient(135deg, rgba(28, 20, 52, 0.8) 0%, rgba(14, 11, 26, 0.95) 100%);
  border: 1px solid var(--border-gold);
  border-radius: 28px;
  padding: 50px 40px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6);
}

.story-tag {
  display: inline-block;
  font-size: 0.75rem;
  letter-spacing: 2px;
  font-weight: 800;
  color: var(--gold-primary);
  margin-bottom: 12px;
}

.story-card h2 {
  font-family: var(--font-serif);
  font-size: 2.3rem;
  line-height: 1.35;
  margin-bottom: 24px;
}

.story-content {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 36px;
}

.story-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}

.point-item {
  background: rgba(10, 8, 20, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 24px;
}

.point-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(245, 208, 97, 0.12);
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 14px;
}

.point-text h4 {
  font-size: 1.05rem;
  color: #fff;
  margin-bottom: 8px;
}

.point-text p {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.story-cta-box {
  border-top: 1px solid var(--border-subtle);
  padding-top: 36px;
}

/* 4대 차별점 */
.features-section {
  padding: 80px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 50px;
}

.feature-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 28px 20px;
  position: relative;
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(245, 208, 97, 0.4);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(245, 208, 97, 0.1);
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
}

.feature-num {
  position: absolute;
  top: 22px;
  right: 20px;
  font-size: 1.2rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.08);
  font-family: var(--font-serif);
}

.feature-card h3 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin-bottom: 10px;
  color: #fff;
}

.feature-card p {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background: rgba(18, 14, 34, 0.7);
  border: 1px solid var(--border-gold);
  border-radius: 20px;
  padding: 26px 20px;
}

.stat-item {
  text-align: center;
}

.stat-num {
  display: block;
  font-family: var(--font-serif);
  font-size: 2rem;
  font-weight: 800;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
}

.stat-divider {
  width: 1px;
  height: 38px;
  background: var(--border-subtle);
}

/* 리뷰 섹션 (100개 데이터셋) */
.reviews-section {
  padding: 80px 0;
  background: rgba(10, 8, 20, 0.5);
}

.reviews-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}

.filter-btn {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 8px 18px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.filter-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(245, 208, 97, 0.3);
}

.filter-btn.active {
  background: rgba(245, 208, 97, 0.15);
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  font-weight: 700;
  box-shadow: 0 0 14px rgba(245, 208, 97, 0.2);
}

.reviews-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.review-card {
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.review-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 208, 97, 0.3);
}

.review-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.review-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #f59e0b;
  font-size: 0.85rem;
}

.review-rating .score {
  color: #fff;
  font-weight: 700;
  margin-left: 6px;
}

.review-badge {
  font-size: 0.72rem;
  font-weight: 600;
  color: #34d399;
  background: rgba(16, 185, 129, 0.12);
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.review-text {
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.65;
  word-break: keep-all;
}

.review-author {
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.author-info .name {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}

.author-info .report-name {
  font-size: 0.75rem;
  color: var(--gold-primary);
  display: block;
}

.review-date {
  font-size: 0.72rem;
  color: var(--text-muted);
}

.reviews-more-wrap {
  margin-top: 10px;
}

.btn-outline {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-gold);
  color: var(--gold-primary);
  padding: 12px 28px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 0.92rem;
  transition: all 0.25s ease;
}

.btn-outline:hover {
  background: rgba(245, 208, 97, 0.12);
  border-color: var(--gold-primary);
  transform: translateY(-2px);
}

/* ==========================================================================
   VIEW 2: 사주 정보 입력 화면 (집중 입력 뷰)
   ========================================================================== */
.input-screen-section,
.result-screen-section {
  padding: 40px 0 80px;
}

.analyzer-card {
  max-width: 820px;
  margin: 0 auto;
  background: var(--bg-card);
  border: 1px solid var(--border-gold);
  border-radius: 24px;
  padding: 44px;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
  position: relative;
  overflow: hidden;
}

.card-glow {
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(245, 208, 97, 0.15), transparent 70%);
  pointer-events: none;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 28px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.form-group.full-width {
  grid-column: 1 / -1;
}

.form-group label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-group label i {
  color: var(--gold-primary);
}

.form-group input[type="text"],
.form-group select {
  width: 100%;
  padding: 13px 16px;
  background: rgba(10, 8, 20, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: #fff;
  font-size: 0.95rem;
  font-family: inherit;
  transition: all 0.2s;
}

.form-group input[type="text"]:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--gold-primary);
  box-shadow: 0 0 12px rgba(245, 208, 97, 0.25);
}

.date-inputs {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 8px;
}

.date-inputs input {
  padding: 13px 12px;
  background: rgba(10, 8, 20, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  color: #fff;
  font-size: 0.95rem;
  text-align: center;
}

.date-inputs input:focus {
  outline: none;
  border-color: var(--gold-primary);
}

.radio-pill-group {
  display: flex;
  gap: 8px;
}

.radio-pill {
  flex: 1;
  position: relative;
}

.radio-pill input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.radio-pill span {
  display: block;
  text-align: center;
  padding: 12px 10px;
  background: rgba(10, 8, 20, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.radio-pill input:checked + span {
  background: rgba(245, 208, 97, 0.12);
  border-color: var(--gold-primary);
  color: var(--gold-primary);
  font-weight: 700;
}

.time-select-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.info-bubble {
  font-size: 0.75rem;
  color: var(--text-muted);
}

.concern-tags {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.concern-tag {
  position: relative;
}

.concern-tag input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.concern-tag span {
  display: block;
  padding: 12px 14px;
  background: rgba(10, 8, 20, 0.7);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.concern-tag input:checked + span {
  background: rgba(142, 85, 255, 0.18);
  border-color: #a855f7;
  color: #f3e8ff;
  font-weight: 700;
}

.submit-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.btn-submit {
  width: 100%;
  max-width: 480px;
  background: var(--gold-gradient);
  color: #110b02;
  font-size: 1.12rem;
  font-weight: 800;
  padding: 17px 24px;
  border-radius: 14px;
  box-shadow: 0 8px 30px rgba(245, 208, 97, 0.35);
}

.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 38px rgba(245, 208, 97, 0.5);
}

.privacy-notice {
  font-size: 0.78rem;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 로딩 화면 */
.analysis-loader {
  text-align: center;
  padding: 60px 20px;
}

.spinner-sacred {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto 24px;
  animation: rotateSacred 4s linear infinite;
}

@keyframes rotateSacred {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.yinyang-symbol {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(to bottom, #f5d061 50%, #15102a 50%);
  border: 2px solid var(--gold-primary);
  box-shadow: 0 0 25px rgba(245, 208, 97, 0.4);
}

.loader-status {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: #fff;
  margin-bottom: 8px;
}

.loader-sub {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.progress-bar-container {
  width: 100%;
  max-width: 380px;
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  margin: 0 auto;
  overflow: hidden;
}

.progress-bar {
  height: 100%;
  width: 0%;
  background: var(--gold-gradient);
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* ==========================================================================
   VIEW 3: 나만의 만세력 원국 & 촌철살인 분석 (결과 화면)
   ========================================================================== */
.result-dashboard-card {
  max-width: 900px;
}

.result-header {
  text-align: center;
  margin-bottom: 24px;
}

.congrats-tag {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.15);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #34d399;
  margin-bottom: 12px;
}

.result-header h2 {
  font-family: var(--font-serif);
  font-size: 2rem;
  line-height: 1.3;
  margin-bottom: 10px;
}

.result-header p {
  color: var(--text-secondary);
  font-size: 1rem;
  max-width: 640px;
  margin: 0 auto;
}

/* 기둥 클릭 안내 배지 */
.pillars-instruction-badge {
  text-align: center;
  background: rgba(245, 208, 97, 0.08);
  border: 1px dashed var(--border-gold);
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.86rem;
  color: #ffe699;
  margin-bottom: 22px;
}

.pillars-instruction-badge i {
  color: var(--gold-primary);
  margin-right: 4px;
}

/* 인터랙티브 사주 4기둥 그리드 */
.result-pillars-interactive {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 28px;
}

.interactive-pillar-card {
  background: rgba(12, 10, 22, 0.85);
  border: 1.5px solid var(--border-subtle);
  border-radius: 16px;
  padding: 18px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
  position: relative;
}

.interactive-pillar-card:hover {
  transform: translateY(-4px);
  border-color: rgba(245, 208, 97, 0.4);
}

.interactive-pillar-card.active {
  border-color: var(--gold-primary) !important;
  background: rgba(36, 28, 65, 0.95);
  box-shadow: 0 0 25px rgba(245, 208, 97, 0.35);
  transform: translateY(-6px) scale(1.02);
}

.p-card-tag {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 600;
}

.interactive-pillar-card.active .p-card-tag {
  color: var(--gold-primary);
  font-weight: 800;
}

.p-hanja-pair {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.p-hanja-pair .hanja-txt {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.1;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.p-meaning {
  font-size: 0.75rem;
  color: var(--text-secondary);
}

.tap-hint {
  font-size: 0.68rem;
  color: var(--gold-primary);
  background: rgba(245, 208, 97, 0.1);
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 4px;
}

/* 선택된 기둥 상세 해설 박스 (신살 & 자극적인 한줄평) */
.pillar-detail-box {
  background: linear-gradient(135deg, rgba(24, 18, 44, 0.95) 0%, rgba(12, 10, 24, 0.98) 100%);
  border: 1.5px solid var(--border-gold-bright);
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 34px;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.6);
  transition: all 0.3s ease;
}

.pulse-update {
  animation: pulseCard 0.4s ease;
}

@keyframes pulseCard {
  0% { opacity: 0.6; transform: scale(0.99); }
  100% { opacity: 1; transform: scale(1); }
}

.detail-box-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: 18px;
}

.active-pillar-badge {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--gold-primary);
  font-weight: 700;
  margin-bottom: 4px;
}

.detail-title-wrap h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: #fff;
}

.detail-shinsal-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.shinsal-pill {
  font-size: 0.78rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.shinsal-pill.warning {
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #f87171;
}

.shinsal-pill.benefit {
  background: rgba(245, 208, 97, 0.15);
  border: 1px solid rgba(245, 208, 97, 0.4);
  color: var(--gold-primary);
}

.shinsal-pill.special {
  background: rgba(168, 85, 247, 0.2);
  border: 1px solid rgba(168, 85, 247, 0.5);
  color: #c084fc;
  box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

/* 신강/신약 사주 에너지 배지 */
.strength-badge-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.strength-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: -0.3px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.strength-badge.strong {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.25) 0%, rgba(245, 158, 11, 0.3) 100%);
  border: 1.5px solid rgba(245, 158, 11, 0.6);
  color: #fef08a;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
}

.strength-badge.weak {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.2) 0%, rgba(59, 130, 246, 0.3) 100%);
  border: 1.5px solid rgba(56, 189, 248, 0.6);
  color: #bae6fd;
  box-shadow: 0 0 20px rgba(56, 189, 248, 0.25);
}

.strength-badge.balance {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(20, 184, 166, 0.3) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.6);
  color: #a7f3d0;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.25);
}

/* 기둥 카드 내 십신(심리) 배지 */
.p-tengod-badge {
  font-size: 0.72rem;
  font-weight: 700;
  color: #f5d061;
  background: rgba(245, 208, 97, 0.12);
  border: 1px solid rgba(245, 208, 97, 0.3);
  padding: 2px 8px;
  border-radius: 6px;
  margin-bottom: 2px;
}

/* 특수 지지 관계 (원진/귀문/충/합) 박스 */
.detail-relation-box {
  background: rgba(88, 28, 135, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.4);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}

.detail-relation-box i {
  color: #c084fc;
  font-size: 1.25rem;
  margin-top: 3px;
}

.detail-relation-content h5 {
  font-size: 0.88rem;
  font-weight: 800;
  color: #f3e8ff;
  margin-bottom: 4px;
}

.detail-relation-content p {
  font-size: 0.84rem;
  color: #d8b4fe;
  line-height: 1.55;
  word-break: keep-all;
}

/* 현대적 십신 심리 해독 섹션 */
.detail-psychology-box {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
  border-left: 3px solid #38bdf8;
}

.detail-psychology-box h5 {
  font-size: 0.85rem;
  color: #38bdf8;
  font-weight: 700;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.detail-psychology-box p {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* AI 촌철살인 한줄평 블록 */
.ai-critic-quote {
  background: rgba(0, 0, 0, 0.4);
  border-left: 4px solid var(--gold-primary);
  border-radius: 0 14px 14px 0;
  padding: 20px 22px;
  margin-bottom: 24px;
}

.quote-header {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--gold-primary);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.ai-critic-quote blockquote {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  line-height: 1.7;
  color: #f1f5f9;
  word-break: keep-all;
}

.detail-advice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.advice-col {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 16px;
}

.advice-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: #34d399;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.advice-label.warning {
  color: #fb7185;
}

.advice-col p {
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* 오행 분포 바 */
.elements-distribution {
  background: rgba(10, 8, 20, 0.6);
  border: 1px solid var(--border-subtle);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 34px;
}

.elements-distribution h4 {
  font-size: 0.95rem;
  margin-bottom: 16px;
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}

.bars-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.element-bar-row {
  display: grid;
  grid-template-columns: 85px 1fr 45px;
  align-items: center;
  gap: 12px;
  font-size: 0.82rem;
}

.bar-track {
  height: 8px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 1s ease;
}

.bar-fill.wood { background-color: var(--el-wood); }
.bar-fill.fire { background-color: var(--el-fire); }
.bar-fill.earth { background-color: var(--el-earth); }
.bar-fill.metal { background-color: var(--el-metal); }
.bar-fill.water { background-color: var(--el-water); }

.element-advice {
  font-size: 0.85rem;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.03);
  padding: 10px 14px;
  border-radius: 8px;
  border-left: 3px solid var(--gold-primary);
}

/* ==========================================================================
   하단: 프리미엄 3가지 리포트 선택 & 토스페이먼츠 결제란
   ========================================================================== */
.report-checkout-section {
  border-top: 1px solid var(--border-gold);
  padding-top: 40px;
  margin-top: 20px;
}

.checkout-header {
  margin-bottom: 28px;
}

.checkout-title {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  margin: 10px 0 8px;
}

.checkout-desc {
  font-size: 0.92rem;
  color: var(--text-secondary);
  max-width: 620px;
  margin: 0 auto;
}

.report-select-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-bottom: 28px;
}

.report-select-card {
  background: rgba(14, 11, 26, 0.85);
  border: 1.5px solid var(--border-subtle);
  border-radius: 18px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.25s ease;
  cursor: pointer;
}

.report-select-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.card-radio-mark {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid var(--border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: transparent;
  transition: all 0.2s;
}

.report-select-card.active {
  border-color: var(--gold-primary);
  background: rgba(30, 22, 54, 0.95);
  box-shadow: 0 10px 30px rgba(245, 208, 97, 0.2);
  transform: translateY(-4px);
}

.report-select-card.active .card-radio-mark {
  background: var(--gold-primary);
  border-color: var(--gold-primary);
  color: #120c02;
}

.rep-tag {
  font-size: 0.72rem;
  font-weight: 700;
  margin-bottom: 10px;
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 6px;
}

.rep-tag.popular {
  background: rgba(245, 208, 97, 0.15);
  color: var(--gold-primary);
}

.rep-tag.master {
  background: rgba(168, 85, 247, 0.15);
  color: #d8b4fe;
}

.rep-tag.couple {
  background: rgba(244, 63, 94, 0.15);
  color: #fda4af;
}

.rep-tag.career {
  background: rgba(56, 189, 248, 0.15);
  color: #7dd3fc;
}

.report-select-card h4 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  margin-bottom: 8px;
  color: #fff;
  line-height: 1.3;
}

.rep-summary {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.45;
  margin-bottom: 16px;
  flex: 1;
}

.rep-price-box {
  display: flex;
  align-items: baseline;
  gap: 8px;
  border-top: 1px solid var(--border-subtle);
  padding-top: 12px;
}

.rep-price-box .orig-price {
  font-size: 0.8rem;
  text-decoration: line-through;
  color: var(--text-muted);
}

.rep-price-box .sale-price {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--gold-primary);
}

.discount-badge {
  font-size: 0.7rem;
  font-weight: 700;
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  padding: 2px 6px;
  border-radius: 4px;
}

/* 토스페이먼츠 결제 UI 박스 */
.toss-payment-box {
  background: linear-gradient(135deg, rgba(20, 26, 45, 0.95) 0%, rgba(10, 14, 28, 0.98) 100%);
  border: 1.5px solid rgba(0, 100, 255, 0.4);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 0 15px 40px rgba(0, 100, 255, 0.15);
}

.toss-brand-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.toss-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.toss-logo-text {
  font-size: 1.15rem;
  font-weight: 800;
  color: #3182f6;
  letter-spacing: -0.5px;
}

.toss-sub {
  font-size: 0.76rem;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
}

.ssl-badge {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.checkout-price-summary {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 22px;
}

.sum-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--text-secondary);
}

.sum-row.total {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  border-top: 1px dashed rgba(255, 255, 255, 0.12);
  padding-top: 10px;
  margin-top: 4px;
}

.final-amt {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--gold-primary);
}

.btn-toss-pay {
  width: 100%;
  background: var(--toss-blue);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  padding: 17px;
  border-radius: 14px;
  box-shadow: 0 8px 25px rgba(0, 100, 255, 0.35);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-toss-pay:hover {
  background: var(--toss-blue-hover);
  transform: translateY(-2px);
  box-shadow: 0 10px 32px rgba(0, 100, 255, 0.5);
}

.payment-methods-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.76rem;
  color: var(--text-muted);
  flex-wrap: wrap;
}

.method-chip {
  background: rgba(255, 255, 255, 0.05);
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--text-secondary);
}

.result-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.btn-reset, .btn-share {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  padding: 10px 18px;
  font-size: 0.86rem;
  border-radius: 8px;
}

.btn-reset:hover, .btn-share:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* ==========================================================================
   토스페이먼츠 모달
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.toss-modal-card {
  width: 100%;
  max-width: 480px;
  background: #111624;
  border: 1.5px solid rgba(0, 100, 255, 0.5);
  border-radius: 22px;
  padding: 32px 28px;
  position: relative;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8);
  animation: popModal 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes popModal {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 1.2rem;
}

.modal-close:hover {
  color: #fff;
}

.toss-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 100, 255, 0.15);
  color: #3182f6;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
}

.toss-modal-card h3 {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  margin-bottom: 6px;
}

.modal-desc {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.order-summary-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
  font-size: 0.86rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  color: var(--text-secondary);
}

.summary-row.highlight {
  border-top: 1px dashed var(--border-subtle);
  padding-top: 8px;
}

.toss-price-highlight {
  color: var(--gold-primary);
  font-size: 1.1rem;
  font-weight: 800;
}

.payment-method-selector {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.pay-method {
  cursor: pointer;
}

.pay-method input {
  position: absolute;
  opacity: 0;
}

.pay-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s;
}

.pay-method input:checked + .pay-label {
  border-color: #3182f6;
  background: rgba(49, 130, 246, 0.1);
  color: #fff;
}

/* ==========================================================================
   포트원(PortOne V2) 결제 모달 수단 선택 버튼 스타일
   ========================================================================== */
.pay-method-select-wrap {
  margin-bottom: 20px;
  text-align: left;
}

.pay-method-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pay-method-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.pay-method-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 12px;
  color: #cbd5e1;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pay-method-btn:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(245, 208, 97, 0.4);
  color: #fff;
}

.pay-method-btn.active {
  background: linear-gradient(135deg, rgba(245, 208, 97, 0.15) 0%, rgba(212, 154, 41, 0.25) 100%);
  border-color: var(--gold-primary);
  color: #ffe484;
  box-shadow: 0 0 12px rgba(245, 208, 97, 0.2);
}

.portone-badge {
  display: flex;
  align-items: center;
  gap: 8px;
}

.portone-logo-text {
  font-size: 1.12rem;
  font-weight: 800;
  color: #ff5c00;
  background: linear-gradient(135deg, #ff7a00 0%, #ff3b30 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.portone-sub {
  font-size: 0.74rem;
  color: #4ade80;
  background: rgba(74, 222, 128, 0.12);
  border: 1px solid rgba(74, 222, 128, 0.3);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}

.portone-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 92, 0, 0.12);
  color: #ff7a00;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 12px;
  border: 1px solid rgba(255, 92, 0, 0.25);
}

.btn-portone-confirm,
.btn-toss-confirm {
  width: 100%;
  background: var(--gold-gradient);
  color: #120c02;
  font-size: 1.05rem;
  font-weight: 800;
  padding: 14px;
  border-radius: 12px;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 20px rgba(245, 208, 97, 0.3);
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 10px;
}

.btn-portone-confirm:hover,
.btn-toss-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(245, 208, 97, 0.45);
}

/* ==========================================================================
   푸터 & 모바일 고정 바 & 토스트
   ========================================================================== */
.footer {
  background: #05040a;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 60px 0 30px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.footer-top {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.footer-brand {
  max-width: 380px;
}

.brand-desc {
  margin-top: 14px;
  line-height: 1.6;
}

.footer-links {
  display: flex;
  gap: 48px;
}

.link-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.link-col h4 {
  color: #fff;
  font-size: 0.88rem;
  margin-bottom: 4px;
}

.link-col a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.2s;
}

.link-col a:hover {
  color: var(--gold-primary);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}

.company-info {
  line-height: 1.7;
}

.live-toast {
  position: fixed;
  bottom: 85px;
  left: 20px;
  z-index: 90;
  background: rgba(18, 14, 32, 0.95);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  transform: translateY(120%);
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  max-width: 360px;
  pointer-events: none;
}

.live-toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(245, 208, 97, 0.15);
  color: var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.toast-content {
  font-size: 0.78rem;
}

.toast-text {
  color: #fff;
  line-height: 1.35;
}

.toast-text strong {
  color: var(--gold-primary);
}

.toast-time {
  color: var(--text-muted);
  font-size: 0.7rem;
}

.mobile-sticky-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(9, 7, 16, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--border-gold);
  padding: 10px 16px;
  z-index: 80;
}

.sticky-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sticky-text .tag {
  font-size: 0.68rem;
  color: var(--gold-primary);
  font-weight: 700;
}

.sticky-text .txt {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
}

.btn-sticky {
  background: var(--gold-gradient);
  color: #120c02;
  font-size: 0.88rem;
  font-weight: 800;
  padding: 9px 16px;
  border-radius: 8px;
}

/* ==========================================================================
   디지털 콘텐츠 청약철회 제한 고지 및 체크박스 (전자상거래법 필수)
   ========================================================================== */
.refund-agree-box {
  background: rgba(245, 208, 97, 0.05);
  border: 1px solid rgba(245, 208, 97, 0.22);
  border-radius: 8px;
  padding: 11px 14px;
  margin: 14px 0;
  text-align: left;
}

.refund-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}

.refund-checkbox-label input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--gold-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.refund-checkbox-text {
  font-size: 0.82rem;
  line-height: 1.5;
  color: #cbd5e1;
}

.refund-checkbox-text strong {
  color: var(--gold-primary);
  font-weight: 700;
}

.refund-link-inline {
  color: #93c5fd;
  text-decoration: underline;
  margin-left: 4px;
  font-weight: 500;
}

.refund-link-inline:hover {
  color: #bfdbfe;
}

/* ==========================================================================
   미디어 쿼리 (반응형 최적화)
   ========================================================================== */
@media (max-width: 992px) {
  .hero-title { font-size: 2.4rem; }
  .story-points { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-bar { flex-direction: column; gap: 16px; }
  .stat-divider { display: none; }
  .report-select-grid { grid-template-columns: 1fr; }
  .detail-advice-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .mobile-sticky-bar { display: block; }
  .hero-title { font-size: 1.95rem; }
  .btn-hero { width: 100%; }
  .form-grid { grid-template-columns: 1fr; }
  .analyzer-card { padding: 24px 16px; }
  .pillar-detail-box { padding: 20px 16px; }
  .result-pillars-interactive { gap: 8px; }
  .interactive-pillar-card { padding: 12px 4px; }
  .p-hanja-pair .hanja-txt { width: 38px; height: 38px; font-size: 1.4rem; }
  .reviews-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   리포트 중복 선택 · 후킹 멘트 · 묶음 할인
   ========================================================================== */
.report-select-card {
  cursor: pointer;
  outline: none;
}

.report-select-card:hover {
  border-color: rgba(245, 208, 97, 0.45);
}

.report-select-card:focus-visible {
  box-shadow: 0 0 0 2px var(--gold-primary);
}

/* 체크박스 형태 (사각) */
.report-select-card .card-radio-mark {
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.3);
}

.report-select-card h4 {
  padding-right: 30px;
}

/* 만세력 기반 후킹 멘트 */
.rep-hook {
  position: relative;
  background: rgba(245, 208, 97, 0.06);
  border-left: 3px solid var(--gold-primary);
  border-radius: 0 10px 10px 0;
  padding: 12px 14px 12px 34px;
  margin-bottom: 14px;
  font-family: var(--font-serif);
  font-size: 0.88rem;
  line-height: 1.6;
  color: #f1e6c4;
  word-break: keep-all;
}

.rep-hook i {
  position: absolute;
  left: 12px;
  top: 14px;
  font-size: 0.7rem;
  color: var(--gold-primary);
  opacity: 0.7;
}

.report-select-card.active .rep-hook {
  background: rgba(245, 208, 97, 0.12);
}

/* 주문 요약 */
.selected-items-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.empty-selection {
  font-size: 0.85rem;
  color: var(--text-muted);
  text-align: center;
  padding: 6px 0;
}

.item-row span:first-child i {
  color: var(--gold-primary);
  font-size: 0.75rem;
  margin-right: 4px;
}

.bundle-discount {
  color: #34d399 !important;
  font-weight: 600;
}

.discount-text {
  color: #34d399;
  font-weight: 600;
}

.bundle-nudge {
  font-size: 0.84rem;
  color: #ffe699;
  background: rgba(245, 208, 97, 0.08);
  border: 1px dashed var(--border-gold);
  border-radius: 10px;
  padding: 10px 14px;
  margin-bottom: 16px;
  text-align: center;
}

.bundle-nudge.applied {
  color: #6ee7b7;
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.4);
}

.toss-logo-text {
  color: #fff;
}

.btn-toss-pay:disabled {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-muted);
  box-shadow: none;
  cursor: not-allowed !important;
  transform: none;
}

.btn-toss-confirm:disabled {
  opacity: 0.7;
  cursor: wait !important;
}

/* ==========================================================================
   VIEW 4: 프리미엄 운명서 E-Book 서책 뷰어 (모바일 퍼스트 UX)
   ========================================================================== */
.report-screen-section {
  padding: 20px 0 80px;
}

.report-container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 모바일 상단 고정 툴바 */
.report-top-bar {
  position: sticky;
  top: 70px;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(14, 12, 24, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border-gold);
  border-radius: 14px;
  padding: 10px 14px;
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.btn-report-nav {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
}

.btn-report-nav:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.report-bar-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cert-pill {
  font-size: 0.72rem;
  font-weight: 800;
  color: #10b981;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.35);
  padding: 3px 8px;
  border-radius: 999px;
}

.report-user-name {
  font-size: 0.9rem;
  font-weight: 800;
  color: #fff;
}

.report-bar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-report-tool {
  background: var(--gold-gradient);
  border: none;
  color: #120c02;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 15px rgba(245, 208, 97, 0.3);
}

.btn-report-tool:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 208, 97, 0.5);
}

/* 구매 리포트 탭 네비게이션 (모바일 가로 스크롤) */
.report-tabs-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
  margin-bottom: 16px;
  scrollbar-width: none;
}

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

.report-tab-btn {
  flex-shrink: 0;
  background: rgba(20, 16, 36, 0.85);
  border: 1.5px solid var(--border-subtle);
  border-radius: 12px;
  padding: 10px 18px;
  color: var(--text-secondary);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.25s ease;
}

.report-tab-btn:hover {
  border-color: rgba(245, 208, 97, 0.4);
  color: #fff;
}

.report-tab-btn.active {
  background: rgba(36, 28, 65, 0.95);
  border-color: var(--gold-primary);
  color: #ffe699;
  box-shadow: 0 4px 20px rgba(245, 208, 97, 0.25);
}

.purchased-report-section {
  display: none;
}

.purchased-report-section.active {
  display: block;
  animation: fadeInReport 0.3s ease;
}

@keyframes fadeInReport {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 서책 본문 래퍼 */
.report-book-wrapper {
  background: #0f0c1e;
  border: 1.5px solid var(--border-gold);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  overflow: hidden;
}

/* 전통 서책 커버 */
.report-cover-card {
  padding: 36px 24px;
  background: radial-gradient(circle at 50% 20%, rgba(42, 32, 74, 0.6) 0%, rgba(15, 12, 30, 0.98) 100%);
  border-bottom: 2px solid var(--border-gold);
}

.cover-ornament-border {
  border: 1px dashed rgba(245, 208, 97, 0.35);
  padding: 30px 20px;
  border-radius: 16px;
  text-align: center;
  background: rgba(0, 0, 0, 0.25);
  position: relative;
}

.cover-header-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}

.cover-main-titles .sub-title {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: 0.92rem;
  letter-spacing: 4px;
  color: var(--gold-primary);
  margin-bottom: 12px;
}

/* 전통 서책 제첨 (題籤) 명패 */
.traditional-jecheom-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(245, 208, 97, 0.12);
  border: 1.5px solid var(--border-gold);
  padding: 5px 18px;
  border-radius: 4px;
  margin-bottom: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.jecheom-tag {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--gold-primary);
  letter-spacing: 0.12em;
}

.jecheom-sub {
  font-family: var(--font-serif);
  font-size: 0.84rem;
  color: #fff;
  letter-spacing: 0.08em;
  border-left: 1px solid rgba(245, 208, 97, 0.4);
  padding-left: 10px;
}

.cover-main-titles .main-book-title {
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.35;
  margin-bottom: 14px;
  word-break: keep-all;
}

.cover-main-titles .book-recipient {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  color: #f1e6c4;
  margin-bottom: 28px;
}

.cover-stamp-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 20px;
  margin-bottom: 14px;
}

.cover-royal-seal {
  width: 48px;
  height: 48px;
  background: #991b1b;
  border: 2px solid #ef4444;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 16px rgba(239, 68, 68, 0.4);
  transform: rotate(-2deg);
  flex-shrink: 0;
}

.seal-outer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  text-align: center;
}

.seal-inner-char {
  color: #fef2f2;
  font-family: var(--font-serif);
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.cover-stamp-row .stamp-text {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cover-stamp-row .stamp-text strong {
  font-size: 0.9rem;
  color: #fff;
}

.cover-stamp-row .stamp-text span {
  font-size: 0.76rem;
  color: var(--text-secondary);
}

.cover-footer-meta {
  display: flex;
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--text-muted);
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  padding-top: 12px;
  margin-top: 8px;
}  color: var(--text-muted);
}

/* 챕터 본문 영역 */
.report-chapter {
  padding: 34px 24px;
  border-bottom: 1px solid var(--border-subtle);
}

.report-chapter:last-child {
  border-bottom: none;
}

.chapter-badge {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--gold-primary);
  background: rgba(245, 208, 97, 0.1);
  border: 1px solid rgba(245, 208, 97, 0.25);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}

.chapter-title {
  font-family: var(--font-serif);
  font-size: 1.55rem;
  color: #fff;
  line-height: 1.4;
  margin-bottom: 18px;
  word-break: keep-all;
}

.chapter-prose {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--text-secondary);
  word-break: keep-all;
  margin-bottom: 22px;
}

.chapter-prose p {
  margin-bottom: 16px;
}

.chapter-prose strong {
  color: #ffe699;
}

/* 핵심 포인트 박스 */
.key-point-box {
  background: rgba(245, 208, 97, 0.07);
  border-left: 4px solid var(--gold-primary);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 20px 0;
}

.key-point-box h5 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--gold-primary);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.key-point-box p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #f1e6c4;
}

/* 주의 경고 박스 */
.critical-warning-box {
  background: rgba(239, 68, 68, 0.08);
  border-left: 4px solid #ef4444;
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
  margin: 20px 0;
}

.critical-warning-box h5 {
  font-size: 0.92rem;
  font-weight: 800;
  color: #f87171;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.critical-warning-box p {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #fca5a5;
}

/* 1월 ~ 12월 월별 운세 카드 그리드 (모바일 친화적) */
.monthly-grid-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 24px;
}

.month-flow-card {
  background: rgba(18, 14, 34, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px;
  transition: all 0.2s ease;
}

.month-flow-card:hover {
  border-color: rgba(245, 208, 97, 0.4);
  transform: translateY(-2px);
}

.month-flow-card.turning-point {
  border-color: var(--gold-primary);
  background: linear-gradient(135deg, rgba(36, 28, 65, 0.9) 0%, rgba(18, 14, 34, 0.95) 100%);
  box-shadow: 0 4px 20px rgba(245, 208, 97, 0.15);
}

.month-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  padding-bottom: 8px;
}

.month-badge {
  font-size: 0.86rem;
  font-weight: 800;
  color: #fff;
}

.month-tag-pill {
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}

.month-tag-pill.good {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.35);
}

.month-tag-pill.caution {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.month-tag-pill.pivot {
  background: rgba(245, 208, 97, 0.18);
  color: #fde047;
  border: 1px solid rgba(245, 208, 97, 0.45);
}

.month-card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #f1e6c4;
  margin-bottom: 6px;
  word-break: keep-all;
}

.month-card-desc {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-secondary);
  word-break: keep-all;
}

/* 10년 단위 세로형 대운 타임라인 (모바일 최적화) */
.vertical-daeun-timeline {
  position: relative;
  padding-left: 28px;
  margin: 24px 0;
}

.vertical-daeun-timeline::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-primary) 0%, rgba(245, 208, 97, 0.2) 100%);
}

.daeun-timeline-node {
  position: relative;
  margin-bottom: 26px;
}

.daeun-timeline-node:last-child {
  margin-bottom: 0;
}

.node-dot {
  position: absolute;
  left: -28px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #151128;
  border: 2px solid var(--gold-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.node-dot::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--gold-primary);
  border-radius: 50%;
}

.daeun-timeline-node.prime .node-dot {
  box-shadow: 0 0 15px var(--gold-primary);
  background: var(--gold-primary);
}

.daeun-timeline-node.prime .node-dot::after {
  background: #120c02;
}

.node-card {
  background: rgba(20, 16, 36, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 16px 18px;
}

.daeun-timeline-node.prime .node-card {
  border-color: var(--gold-primary);
  background: rgba(36, 28, 65, 0.95);
  box-shadow: 0 4px 25px rgba(245, 208, 97, 0.2);
}

.node-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.node-age {
  font-size: 0.92rem;
  font-weight: 800;
  color: #fff;
}

.node-highlight-badge {
  font-size: 0.72rem;
  font-weight: 800;
  color: #120c02;
  background: var(--gold-gradient);
  padding: 3px 8px;
  border-radius: 6px;
}

.node-card h5 {
  font-size: 1.05rem;
  font-family: var(--font-serif);
  color: #ffe699;
  margin-bottom: 6px;
}

.node-card p {
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--text-secondary);
  word-break: keep-all;
}

/* 궁합 및 속궁합 카드 그리드 */
.chemistry-cards-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 20px 0;
}

.chemistry-item-card {
  background: rgba(20, 16, 36, 0.85);
  border: 1px solid var(--border-subtle);
  border-radius: 14px;
  padding: 18px 16px;
  text-align: center;
}

.chemistry-item-card .chem-icon {
  font-size: 1.8rem;
  margin-bottom: 8px;
}

.chemistry-item-card h5 {
  font-size: 0.92rem;
  color: #fff;
  margin-bottom: 6px;
}

.chemistry-item-card p {
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.5;
  word-break: keep-all;
}

/* 서책 하단 푸터 */
.report-book-footer {
  padding: 30px 24px;
  background: rgba(12, 10, 24, 0.95);
  border-top: 1px solid var(--border-subtle);
}

.footer-save-banner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: rgba(245, 208, 97, 0.08);
  border: 1px dashed var(--border-gold);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
}

.footer-save-banner i {
  color: var(--gold-primary);
  font-size: 1.4rem;
  margin-top: 2px;
}

.save-text strong {
  display: block;
  font-size: 0.92rem;
  color: #fff;
  margin-bottom: 4px;
}

.save-text p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.report-footer-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.btn-save-pdf {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  background: var(--gold-gradient);
  color: #120c02;
  font-size: 1rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: 0 4px 20px rgba(245, 208, 97, 0.4);
}

.btn-back-dashboard {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-back-dashboard:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* 모바일 전용 반응형 (화면 폭 640px 이하) */
@media (max-width: 640px) {
  /* 모바일 헤더 로고 크기 및 여백 최적화 */
  .logo {
    gap: 9px;
  }
  .logo-mark.stamp {
    width: 35px;
    height: 35px;
  }
  .stamp-char {
    font-size: 0.68rem;
  }
  .logo-title {
    font-size: 1.2rem;
  }
  .logo-accent {
    font-size: 0.96rem;
  }
  .logo-subtag {
    font-size: 0.56rem;
    letter-spacing: 0.08em;
  }

  .report-screen-section {
    padding: 10px 0 60px;
  }
  .report-container {
    padding: 0 10px;
  }
  .report-top-bar {
    top: 60px;
    padding: 8px 10px;
  }
  .btn-report-tool span {
    display: none; /* 모바일에서는 아이콘만 깔끔하게 노출 */
  }
  .report-cover-card {
    padding: 24px 14px;
  }
  .cover-ornament-border {
    padding: 20px 12px;
  }
  .cover-main-titles .main-book-title {
    font-size: 1.6rem;
  }
  .report-chapter {
    padding: 24px 16px;
  }
  .chapter-title {
    font-size: 1.3rem;
  }
  .monthly-grid-cards {
    grid-template-columns: 1fr; /* 모바일에서는 1열 카드 */
  }
  .chemistry-cards-grid {
    grid-template-columns: 1fr;
  }

  /* 모바일 화면 가독성 극대화 (스마트폰에서 깨알글씨 방지, 시원한 1.05rem 글자 크기) */
  .chapter-prose {
    font-size: 1.05rem !important; /* ~17px: 모바일에서도 시원하고 큼직한 최적 가독성 */
    line-height: 1.88 !important;
    letter-spacing: -0.015em !important;
    color: #e2e8f0 !important;
    word-break: keep-all !important;
  }
  .chapter-prose p {
    font-size: 1.05rem !important;
    line-height: 1.88 !important;
    margin-bottom: 18px !important;
    word-break: keep-all !important;
  }
  .chapter-prose strong {
    color: #ffd875 !important;
    font-weight: 800 !important;
  }
  .key-point-box, .advice-box, .secret-formula-box, .warning-box {
    padding: 16px 14px !important;
    font-size: 0.98rem !important;
    line-height: 1.75 !important;
    margin: 18px 0 !important;
    border-radius: 10px !important;
  }
  .medical-organ-table, .report-detail-table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    font-size: 0.86rem !important;
  }

  /* 리포트 열람 중 모바일 화면 가림 방지 (탑배너, 헤더, 토스트 자동 숨김 -> 몰입형 E-Book 모드) */
  body.in-report-view .top-banner,
  body.in-report-view header.header,
  body.in-report-view #liveToast,
  body.in-report-view #urgencyBanner,
  body.in-report-view .live-toast {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.in-report-view .report-top-bar {
    top: 0 !important;
  }
  body.in-report-view .report-screen-section {
    padding-top: 50px !important;
  }
}

/* ==========================================================================
   목판본 명식표 & 정밀 신살 그리드 (웹 & 모바일 & 인쇄 통합)
   ========================================================================== */
.myeongshik-woodblock-card {
  background: linear-gradient(145deg, #161226, #0e0a1a);
  border: 2px solid var(--border-gold);
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 30px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.woodblock-inner-border {
  border: 1px dashed rgba(245, 208, 97, 0.4);
  border-radius: 12px;
  padding: 20px;
}

.myeongshik-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(245, 208, 97, 0.25);
  padding-bottom: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  gap: 14px;
}

.myeongshik-seal-box {
  width: 52px;
  height: 52px;
  border: 2px solid #ef4444;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(239, 68, 68, 0.12);
}

.myeongshik-seal-box .seal-text {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  font-weight: 800;
  color: #f87171;
  text-align: center;
  line-height: 1.15;
  letter-spacing: 0.05em;
}

.myeongshik-title-group {
  flex: 1;
  text-align: center;
}

.woodblock-cert {
  display: block;
  font-size: 0.76rem;
  color: var(--gold-primary);
  letter-spacing: 0.15em;
  margin-bottom: 4px;
}

.myeongshik-owner {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  color: #fff;
  letter-spacing: 0.04em;
}

.myeongshik-meta-box {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.78rem;
  color: var(--text-secondary);
  text-align: right;
}

.myeongshik-table-wrap {
  overflow-x: auto;
  margin-bottom: 18px;
}

.myeongshik-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 8px;
  min-width: 520px;
}

.myeongshik-table th {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
}

.col-main-label {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--gold-primary);
}

.col-sub-desc {
  display: block;
  font-size: 0.72rem;
  color: var(--text-secondary);
  margin-top: 2px;
}

.myeongshik-table td {
  text-align: center;
}

.myeongshik-char-block {
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  transition: transform 0.2s;
}

.myeongshik-char-block:hover {
  transform: translateY(-2px);
  border-color: var(--gold-primary);
}

.myeongshik-char-block .m-tengod {
  font-size: 0.74rem;
  color: var(--text-secondary);
  font-weight: 600;
}

.myeongshik-char-block .m-char {
  font-family: var(--font-serif);
  font-size: 1.85rem;
  font-weight: 900;
  color: #fff;
  line-height: 1.1;
}

.myeongshik-char-block.wood .m-char { color: #86efac; }
.myeongshik-char-block.fire .m-char { color: #fca5a5; }
.myeongshik-char-block.earth .m-char { color: #fde047; }
.myeongshik-char-block.metal .m-char { color: #e2e8f0; }
.myeongshik-char-block.water .m-char { color: #93c5fd; }

.myeongshik-char-block .m-korean {
  font-size: 0.74rem;
  color: var(--text-secondary);
}

.myeongshik-char-block.empty {
  opacity: 0.4;
}

.m-shinsals-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}

.m-shinsal-pill {
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 700;
}

.m-shinsal-pill.benefit { background: rgba(34, 197, 94, 0.15); color: #86efac; border: 1px solid rgba(34, 197, 94, 0.4); }
.m-shinsal-pill.warning { background: rgba(239, 68, 68, 0.15); color: #fca5a5; border: 1px solid rgba(239, 68, 68, 0.4); }
.m-shinsal-pill.special { background: rgba(168, 85, 247, 0.15); color: #d8b4fe; border: 1px solid rgba(168, 85, 247, 0.4); }

.myeongshik-summary-bar {
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(245, 208, 97, 0.25);
  border-radius: 10px;
  padding: 14px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.myeongshik-summary-bar .sum-item.full {
  grid-column: span 2;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  padding-top: 8px;
  margin-top: 4px;
}

.myeongshik-summary-bar strong {
  color: #fff;
  margin-right: 4px;
}

.myeongshik-summary-bar .sum-val.gold {
  color: var(--gold-primary);
  font-weight: 800;
}

/* 신살 검사 그리드 (웹 뷰) */
.shinsal-inspect-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin: 16px 0 24px;
}

.shinsal-inspect-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-subtle);
  border-radius: 12px;
  padding: 14px 16px;
  border-left: 4px solid var(--gold-primary);
}

.shinsal-inspect-card.benefit { border-left-color: #34d399; }
.shinsal-inspect-card.warning { border-left-color: #f87171; }
.shinsal-inspect-card.special { border-left-color: #c084fc; }

.s-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.s-card-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 6px;
}

.s-card-badge {
  font-size: 0.7rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-secondary);
}

.s-card-desc {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

/* ==========================================================================
   인쇄 및 PDF 저장 전용 스타일 (@media print - A4 황실 감명서 규격)
   ========================================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 8mm 8mm 8mm;
  }

  html, body {
    background: #eee1c8 !important;
    background-color: #eee1c8 !important;
    color: #120c06 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', 'Batang', serif !important;
    font-size: 10pt !important;
    line-height: 1.80 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 불필요한 웹 UI 전면 차단 */
  #starsCanvas,
  #liveToast,
  .live-toast,
  .top-banner,
  #urgencyBanner,
  .urgency-banner,
  .top-promo-banner,
  .top-urgency-banner,
  .header,
  .navbar,
  .report-top-bar,
  .report-tabs-nav,
  .report-book-footer,
  .mobile-sticky-bar,
  .footer,
  .social-proof-toast,
  .social-toast,
  #socialToast,
  .view-back-nav,
  .report-footer-actions,
  .btn-report-tool,
  .tap-hint,
  .modal-backdrop,
  .pay-modal-backdrop,
  .pay-modal-container {
    display: none !important;
  }

  .page-view {
    display: none !important;
  }
  #reportView {
    display: block !important;
    background: #faf4e6 !important;
  }
  .purchased-report-section {
    display: block !important;
    page-break-before: always !important;
    break-before: page !important;
  }
  .purchased-report-section ~ .purchased-report-section .myeongshik-woodblock-card {
    display: none !important;
  }

  .report-screen-section {
    padding: 0 !important;
  }
  .report-container {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .report-book-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #1f1610 !important;
  }

  /* --------------------------------------------------------------------------
     1. 표지 (Cover Page): A4 1페이지 전체 고서 제첨 & 낙관 완벽 규격
     -------------------------------------------------------------------------- */
  .report-cover-card {
    page-break-after: always !important;
    break-after: page !important;
    min-height: 278mm !important;
    max-height: 278mm !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 13mm 11mm !important;
    background-color: #f3e8d2 !important;
    background-image: 
      /* 1. 네 모서리 고서 손때와 세월의 산화 얼룩 */
      radial-gradient(ellipse 380px 300px at 0% 0%, rgba(150, 95, 35, 0.38) 0%, rgba(185, 130, 60, 0.16) 45%, transparent 75%),
      radial-gradient(ellipse 380px 300px at 100% 0%, rgba(150, 95, 35, 0.34) 0%, rgba(185, 130, 60, 0.14) 45%, transparent 75%),
      radial-gradient(ellipse 420px 340px at 100% 100%, rgba(145, 90, 30, 0.42) 0%, rgba(180, 125, 55, 0.18) 45%, transparent 75%),
      radial-gradient(ellipse 380px 300px at 0% 100%, rgba(145, 90, 30, 0.36) 0%, rgba(180, 125, 55, 0.16) 45%, transparent 75%),
      /* 2. 고서 가장자리 세월의 그을림 */
      linear-gradient(90deg, rgba(85, 45, 15, 0.28) 0mm, rgba(130, 75, 25, 0.14) 4mm, rgba(165, 110, 45, 0.04) 14mm, transparent 22mm),
      linear-gradient(270deg, rgba(120, 70, 25, 0.22) 0mm, rgba(160, 105, 45, 0.08) 6mm, transparent 18mm),
      linear-gradient(180deg, rgba(110, 65, 20, 0.20) 0mm, rgba(150, 95, 40, 0.06) 5mm, transparent 15mm),
      linear-gradient(0deg, rgba(110, 65, 20, 0.22) 0mm, rgba(150, 95, 40, 0.08) 6mm, transparent 16mm),
      /* 3. 닥나무 껍질과 천연 한지 섬유질 구름 얼룩 (선형 줄무늬 배제, 유기적 얼룩) */
      radial-gradient(ellipse 260px 180px at 22% 28%, rgba(160, 110, 45, 0.09) 0%, transparent 55%),
      radial-gradient(ellipse 300px 210px at 78% 68%, rgba(150, 100, 40, 0.08) 0%, transparent 60%),
      radial-gradient(circle 140px at 45% 82%, rgba(165, 115, 50, 0.07) 0%, transparent 45%),
      radial-gradient(circle 120px at 80% 22%, rgba(155, 105, 40, 0.06) 0%, transparent 40%),
      radial-gradient(ellipse 200px 140px at 30% 60%, rgba(160, 110, 45, 0.05) 0%, transparent 50%),
      /* 4. 본문 가독 온백색 한지 중심 (자연스러운 닥종이 채색) */
      radial-gradient(ellipse at 50% 50%, #fefcf6 0%, #f8f1de 58%, #ede0c4 90%, #d8be94 100%) !important;
    border: 3.5px solid #201004 !important;
    box-shadow: inset 0 0 0 3px #dfc398, inset 0 0 0 5px #54270c !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  .cover-ornament-border {
    border: 1.5px solid #78441b !important;
    padding: 15mm 13mm !important;
    background: rgba(255, 253, 248, 0.76) !important;
    min-height: 246mm !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 0 15px rgba(138, 90, 42, 0.08) !important;
  }

  .cover-header-meta span {
    color: #5c3214 !important;
    font-weight: 800 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
    font-size: 9pt !important;
    letter-spacing: 0.12em !important;
  }

  /* 전통 제첨 (題籤) 명패 */
  .traditional-jecheom-badge {
    border: 2.5px solid #5a2e0e !important;
    background: #f7eed8 !important;
    padding: 8px 24px !important;
    box-shadow: 2px 2px 8px rgba(35, 17, 4, 0.22) !important;
    border-radius: 3px !important;
  }
  .traditional-jecheom-badge .jecheom-tag {
    color: #4a1c04 !important;
    font-weight: 900 !important;
    letter-spacing: 0.18em !important;
  }
  .traditional-jecheom-badge .jecheom-sub {
    color: #6d3815 !important;
    font-weight: 800 !important;
    border-left: 1.5px solid #8c5222 !important;
  }

  .cover-main-titles .main-book-title {
    color: #120c06 !important;
    font-size: 23pt !important;
    line-height: 1.35 !important;
    letter-spacing: -0.02em !important;
    font-weight: 900 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
    margin: 22px 0 18px 0 !important;
    text-shadow: 0.5px 0.5px 0px rgba(0,0,0,0.1) !important;
  }

  .cover-main-titles .book-recipient {
    color: #231104 !important;
    font-size: 15.5pt !important;
    font-weight: 900 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
    border-bottom: 2.5px solid #6d3815 !important;
    display: inline-block !important;
    padding-bottom: 6px !important;
    letter-spacing: 0.05em !important;
  }

  .cover-royal-seal {
    background: #fef2f2 !important;
    border: 2.5px solid #b91c1c !important;
    box-shadow: 2px 2px 8px rgba(185, 28, 28, 0.18) !important;
  }
  .cover-royal-seal .seal-outer {
    border: 1.5px solid #b91c1c !important;
    background: #fef2f2 !important;
  }
  .cover-royal-seal .seal-inner-char {
    color: #b91c1c !important;
    font-weight: 900 !important;
  }
  .stamp-text strong {
    color: #120c06 !important;
    font-size: 11pt !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
    font-weight: 900 !important;
  }
  .stamp-text span {
    color: #4a2810 !important;
    font-weight: 700 !important;
  }

  .cover-footer-meta {
    border-top: 1.5px solid #8c5222 !important;
    padding-top: 14px !important;
    color: #4a2810 !important;
    font-size: 9.2pt !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
    letter-spacing: 0.08em !important;
  }

  /* --------------------------------------------------------------------------
     2. 목판본 명식표 (A4 단독 1페이지)
     -------------------------------------------------------------------------- */
  .myeongshik-woodblock-card {
    page-break-after: always !important;
    break-after: page !important;
    min-height: 278mm !important;
    max-height: 278mm !important;
    background-color: #f3e8d2 !important;
    background-image: 
      /* 1. 네 모서리 고서 손때와 세월의 산화 얼룩 */
      radial-gradient(ellipse 380px 300px at 0% 0%, rgba(150, 95, 35, 0.38) 0%, rgba(185, 130, 60, 0.16) 45%, transparent 75%),
      radial-gradient(ellipse 380px 300px at 100% 0%, rgba(150, 95, 35, 0.34) 0%, rgba(185, 130, 60, 0.14) 45%, transparent 75%),
      radial-gradient(ellipse 420px 340px at 100% 100%, rgba(145, 90, 30, 0.42) 0%, rgba(180, 125, 55, 0.18) 45%, transparent 75%),
      radial-gradient(ellipse 380px 300px at 0% 100%, rgba(145, 90, 30, 0.36) 0%, rgba(180, 125, 55, 0.16) 45%, transparent 75%),
      /* 2. 고서 가장자리 세월의 그을림 */
      linear-gradient(90deg, rgba(85, 45, 15, 0.28) 0mm, rgba(130, 75, 25, 0.14) 4mm, rgba(165, 110, 45, 0.04) 14mm, transparent 22mm),
      linear-gradient(270deg, rgba(120, 70, 25, 0.22) 0mm, rgba(160, 105, 45, 0.08) 6mm, transparent 18mm),
      linear-gradient(180deg, rgba(110, 65, 20, 0.20) 0mm, rgba(150, 95, 40, 0.06) 5mm, transparent 15mm),
      linear-gradient(0deg, rgba(110, 65, 20, 0.22) 0mm, rgba(150, 95, 40, 0.08) 6mm, transparent 16mm),
      /* 3. 닥나무 껍질과 천연 한지 섬유질 구름 얼룩 (선형 줄무늬 배제, 유기적 얼룩) */
      radial-gradient(ellipse 260px 180px at 22% 28%, rgba(160, 110, 45, 0.09) 0%, transparent 55%),
      radial-gradient(ellipse 300px 210px at 78% 68%, rgba(150, 100, 40, 0.08) 0%, transparent 60%),
      radial-gradient(circle 140px at 45% 82%, rgba(165, 115, 50, 0.07) 0%, transparent 45%),
      radial-gradient(circle 120px at 80% 22%, rgba(155, 105, 40, 0.06) 0%, transparent 40%),
      radial-gradient(ellipse 200px 140px at 30% 60%, rgba(160, 110, 45, 0.05) 0%, transparent 50%),
      /* 4. 본문 가독 온백색 한지 중심 (자연스러운 닥종이 채색) */
      radial-gradient(ellipse at 50% 50%, #fefcf6 0%, #f8f1de 58%, #ede0c4 90%, #d8be94 100%) !important;
    border: 3.5px solid #201004 !important;
    box-shadow: inset 0 0 0 3px #dfc398, inset 0 0 0 5px #54270c !important;
    padding: 10mm 9mm !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }

  .woodblock-inner-border {
    border: 1.5px solid #78441b !important;
    padding: 9mm 8mm !important;
    background: rgba(255, 253, 248, 0.76) !important;
    min-height: 252mm !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-shadow: inset 0 0 15px rgba(138, 90, 42, 0.08) !important;
  }

  .myeongshik-header {
    border-bottom: 2px solid #5a2e0e !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
  }

  .myeongshik-seal-box {
    border: 2px solid #b91c1c !important;
    color: #b91c1c !important;
    background: #fef2f2 !important;
  }
  .myeongshik-seal-box .seal-text {
    color: #b91c1c !important;
    font-weight: 900 !important;
  }

  .woodblock-cert {
    color: #5c2d12 !important;
    font-weight: 900 !important;
    letter-spacing: 0.18em !important;
  }

  .myeongshik-owner {
    color: #120c06 !important;
    font-size: 16.5pt !important;
    font-weight: 900 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
  }
  .myeongshik-meta-box span {
    color: #4a2810 !important;
    font-weight: 700 !important;
  }

  .myeongshik-table {
    border-collapse: collapse !important;
    width: 100% !important;
    border: 2px solid #4a240a !important;
    background: #fffefb !important;
  }

  .myeongshik-table th, .myeongshik-table td {
    border: 1px solid #9c7144 !important;
    padding: 7px 5px !important;
    text-align: center !important;
  }

  .myeongshik-table th {
    background: #e2ceab !important;
    color: #2b1204 !important;
    border-bottom: 2px solid #4a240a !important;
  }
  .myeongshik-table th .col-main-label {
    color: #2b1204 !important;
    font-weight: 900 !important;
  }
  .myeongshik-table th .col-sub-desc {
    color: #5c3014 !important;
  }

  .myeongshik-char-block {
    color: #120c06 !important;
    background: transparent !important;
    border: none !important;
    padding: 3px !important;
  }

  .myeongshik-char-block .m-char {
    font-size: 21pt !important;
    font-weight: 900 !important;
    color: #0b0704 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
  }

  .myeongshik-char-block .m-tengod {
    font-size: 8.5pt !important;
    color: #4a240a !important;
    font-weight: 900 !important;
  }
  .myeongshik-char-block .m-korean {
    color: #5c3214 !important;
    font-weight: 700 !important;
  }

  .myeongshik-summary-bar {
    background: #f0e2c8 !important;
    border: 1.5px solid #9c7144 !important;
    color: #231104 !important;
    padding: 9px 12px !important;
    margin-top: 10px !important;
    font-size: 8.8pt !important;
  }
  .myeongshik-summary-bar .sum-item,
  .myeongshik-summary-bar .sum-item strong,
  .myeongshik-summary-bar .sum-item span {
    color: #231104 !important;
  }
  .myeongshik-summary-bar .sum-val.gold {
    color: #6b2804 !important;
    font-weight: 900 !important;
  }

  /* --------------------------------------------------------------------------
     3. 본문 챕터 페이징 제어 & 사주쌍변(四周雙邊) 목판본 고서 프레임
     -------------------------------------------------------------------------- */
  .report-chapter {
    page-break-before: always !important;
    break-before: page !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    min-height: 278mm !important;
    max-height: 278mm !important;
    box-sizing: border-box !important;
    padding: 11mm 11mm 9mm 11mm !important;
    margin: 0 !important;
    background-color: #f3e8d2 !important;
    background-image: 
      /* 1. 네 모서리 고서 손때와 세월의 산화 얼룩 */
      radial-gradient(ellipse 380px 300px at 0% 0%, rgba(150, 95, 35, 0.38) 0%, rgba(185, 130, 60, 0.16) 45%, transparent 75%),
      radial-gradient(ellipse 380px 300px at 100% 0%, rgba(150, 95, 35, 0.34) 0%, rgba(185, 130, 60, 0.14) 45%, transparent 75%),
      radial-gradient(ellipse 420px 340px at 100% 100%, rgba(145, 90, 30, 0.42) 0%, rgba(180, 125, 55, 0.18) 45%, transparent 75%),
      radial-gradient(ellipse 380px 300px at 0% 100%, rgba(145, 90, 30, 0.36) 0%, rgba(180, 125, 55, 0.16) 45%, transparent 75%),
      /* 2. 고서 가장자리 세월의 그을림 */
      linear-gradient(90deg, rgba(85, 45, 15, 0.28) 0mm, rgba(130, 75, 25, 0.14) 4mm, rgba(165, 110, 45, 0.04) 14mm, transparent 22mm),
      linear-gradient(270deg, rgba(120, 70, 25, 0.22) 0mm, rgba(160, 105, 45, 0.08) 6mm, transparent 18mm),
      linear-gradient(180deg, rgba(110, 65, 20, 0.20) 0mm, rgba(150, 95, 40, 0.06) 5mm, transparent 15mm),
      linear-gradient(0deg, rgba(110, 65, 20, 0.22) 0mm, rgba(150, 95, 40, 0.08) 6mm, transparent 16mm),
      /* 3. 닥나무 껍질과 천연 한지 섬유질 구름 얼룩 (선형 줄무늬 배제, 유기적 얼룩) */
      radial-gradient(ellipse 260px 180px at 22% 28%, rgba(160, 110, 45, 0.09) 0%, transparent 55%),
      radial-gradient(ellipse 300px 210px at 78% 68%, rgba(150, 100, 40, 0.08) 0%, transparent 60%),
      radial-gradient(circle 140px at 45% 82%, rgba(165, 115, 50, 0.07) 0%, transparent 45%),
      radial-gradient(circle 120px at 80% 22%, rgba(155, 105, 40, 0.06) 0%, transparent 40%),
      radial-gradient(ellipse 200px 140px at 30% 60%, rgba(160, 110, 45, 0.05) 0%, transparent 50%),
      /* 4. 본문 가독 온백색 한지 중심 (자연스러운 닥종이 채색) */
      radial-gradient(ellipse at 50% 50%, #fefcf6 0%, #f8f1de 58%, #ede0c4 90%, #d8be94 100%) !important;
    border: 3.5px solid #201004 !important;
    box-shadow: inset 0 0 0 3px #dfc398, inset 0 0 0 5px #54270c !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
  }

  /* 고서 상단 판수(版首) / 어미(魚尾) 계선 */
  .report-chapter::before {
    content: "天門秘書 · 正統 命理鑑明 \00a0\00a0❖\00a0\00a0 欽定秘藏 原局指南" !important;
    display: block !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
    font-size: 8.2pt !important;
    color: #5c2d12 !important;
    letter-spacing: 0.20em !important;
    font-weight: 800 !important;
    text-align: center !important;
    border-bottom: 2px double #8c5222 !important;
    padding-bottom: 5px !important;
    margin-bottom: 10px !important;
  }

  /* 고서 하단 판심(版心) / 낙서(落書) */
  .report-chapter::after {
    content: "天門命理學術院 謹鑑 · 萬世曆 命理秘傳 · 欽定秘藏 · CHEONMUN.LIFE" !important;
    display: block !important;
    margin-top: auto !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
    font-size: 7.8pt !important;
    color: #7a461b !important;
    letter-spacing: 0.14em !important;
    text-align: center !important;
    border-top: 1.5px double #a87848 !important;
    padding-top: 7px !important;
  }

  .chapter-badge {
    background: #ebd8b6 !important;
    border: 1.5px solid #6b3109 !important;
    color: #3b1602 !important;
    padding: 3.5px 16px !important;
    font-size: 8.8pt !important;
    font-weight: 900 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
    letter-spacing: 0.10em !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 2px !important;
    box-shadow: 1.5px 1.5px 4px rgba(80, 40, 10, 0.18) !important;
  }
  .chapter-badge::before {
    content: "天門秘藏" !important;
    background: #b91c1c !important;
    color: #fffdf8 !important;
    font-size: 7.2pt !important;
    font-weight: 900 !important;
    padding: 1.5px 5px !important;
    border-radius: 2px !important;
    margin-right: 9px !important;
    letter-spacing: 0.12em !important;
    border: 1px solid #7f1d1d !important;
    box-shadow: 1px 1px 3px rgba(185, 28, 28, 0.35) !important;
  }

  .chapter-title {
    color: #120c06 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
    font-size: 15pt !important;
    font-weight: 900 !important;
    line-height: 1.35 !important;
    margin: 10px 0 12px 0 !important;
    border-bottom: 2px solid #8c5222 !important;
    padding-bottom: 6px !important;
    letter-spacing: -0.01em !important;
  }

  .chapter-prose p {
    color: #181008 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
    font-size: 9.8pt !important;
    line-height: 1.80 !important;
    margin-bottom: 10px !important;
    text-align: justify !important;
  }

  .chapter-prose strong {
    color: #000000 !important;
    font-weight: 900 !important;
  }

  /* 전통 괘선식 표 (Woodblock Tables) */
  .medical-organ-table,
  .report-detail-table {
    background: #fffefb !important;
    border: 2px solid #4a240a !important;
    border-collapse: collapse !important;
    margin: 10px 0 !important;
    width: 100% !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .medical-organ-table th,
  .report-detail-table th {
    background: #dfcca2 !important;
    color: #2b1204 !important;
    border: 1px solid #8c6032 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
    font-size: 9pt !important;
    font-weight: 900 !important;
    padding: 7px 10px !important;
  }
  .medical-organ-table td,
  .report-detail-table td {
    color: #181008 !important;
    border: 1px solid #bf9d72 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
    font-size: 8.8pt !important;
    padding: 7px 10px !important;
    background: #fbf5e7 !important;
    line-height: 1.6 !important;
  }

  /* 4대 전통 서지형 박스 (Traditional Scrolls) */
  .key-point-box {
    background: #fbf3dd !important;
    border: 1.5px solid #8c601c !important;
    border-left: 5px solid #6d4008 !important;
    box-shadow: inset 0 0 0 1px #faeec7 !important;
    color: #231104 !important;
    padding: 10px 14px !important;
    border-radius: 4px !important;
    margin: 10px 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .key-point-box h5 {
    color: #6d4008 !important;
    font-size: 9.8pt !important;
    font-weight: 900 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
  }

  .critical-warning-box {
    background: #fdf0ef !important;
    border: 1.5px solid #b91c1c !important;
    border-left: 5px solid #881337 !important;
    box-shadow: inset 0 0 0 1px #fecaca !important;
    color: #231104 !important;
    padding: 10px 14px !important;
    border-radius: 4px !important;
    margin: 10px 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .critical-warning-box h5 {
    color: #881337 !important;
    font-size: 9.8pt !important;
    font-weight: 900 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
  }

  .counseling-empathy-box {
    background: #eef5f8 !important;
    border: 1.5px solid #1e3a8a !important;
    border-left: 5px solid #0f2452 !important;
    box-shadow: inset 0 0 0 1px #dbeafe !important;
    color: #0f2452 !important;
    padding: 11px 14px !important;
    border-radius: 4px !important;
    margin: 10px 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .counseling-empathy-box h5 {
    color: #0f2452 !important;
    font-size: 9.8pt !important;
    font-weight: 900 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
  }
  .counseling-empathy-box p {
    color: #172554 !important;
  }

  .erotic-secret-box {
    background: #fcf0f3 !important;
    border: 1.5px solid #9f1239 !important;
    border-left: 5px solid #700b2b !important;
    box-shadow: inset 0 0 0 1px #ffe4e6 !important;
    color: #3b0713 !important;
    padding: 11px 14px !important;
    border-radius: 4px !important;
    margin: 10px 0 !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .erotic-secret-box h5 {
    color: #700b2b !important;
    font-size: 9.8pt !important;
    font-weight: 900 !important;
    font-family: 'Gowun Batang', 'Noto Serif KR', serif !important;
  }
  .erotic-secret-box p {
    color: #3b0713 !important;
  }

  /* 월별 터닝포인트 그리드 (2열 정렬) */
  .monthly-grid-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .month-flow-card {
    background: #faf6ed !important;
    border: 1.5px solid #c9b08f !important;
    padding: 10px 12px !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .month-flow-card.turning-point {
    border-left: 4px solid #b91c1c !important;
    background: #fff5f5 !important;
  }
  .month-card-title {
    color: #1a1410 !important;
    font-size: 9.5pt !important;
    font-weight: 800 !important;
  }
  .month-card-desc {
    color: #432e1d !important;
    font-size: 8.5pt !important;
    line-height: 1.5 !important;
  }

  /* 대운 타임라인 */
  .daeun-timeline-node {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
    margin-bottom: 10px !important;
  }
  .daeun-timeline-node .node-card {
    background: #faf6ed !important;
    border: 1.5px solid #c9b08f !important;
    padding: 10px 14px !important;
  }
  .daeun-timeline-node.prime .node-card {
    border: 2px solid #ca8a04 !important;
    background: #fcf7e8 !important;
  }
  .node-card h5 {
    color: #1a1410 !important;
    font-size: 10pt !important;
    font-weight: 800 !important;
  }
  .node-card p {
    color: #432e1d !important;
    font-size: 8.5pt !important;
  }

  /* 신살 검사 그리드 */
  .shinsal-inspect-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .shinsal-inspect-card {
    border: 1.5px solid #c9b08f !important;
    padding: 8px 12px !important;
    background: #faf6ed !important;
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }
  .shinsal-inspect-card.benefit {
    border-left: 4px solid #15803d !important;
  }
  .shinsal-inspect-card.warning {
    border-left: 4px solid #b91c1c !important;
  }
  .shinsal-inspect-card.special {
    border-left: 4px solid #7e22ce !important;
  }
  .s-card-name {
    color: #1a1410 !important;
    font-weight: 800 !important;
    font-size: 9pt !important;
  }
  .s-card-desc {
    color: #5c3516 !important;
    font-size: 8pt !important;
  }
}