/* ============================================================
   천냥사주 v3 · 夜半觀命 (Midnight Reading)
   Deep indigo × gold × ivory · Editorial oriental cinema
   ============================================================ */

:root{
  /* Core palette */
  --ink: #0A0614;
  --indigo: #150B2E;
  --indigo-2: #241546;
  --indigo-3: #3B2570;
  --ivory: #FBF7EC;
  --ivory-2: #F3ECD9;
  --paper: #EFE6CE;
  --gold: #B8893D;
  --gold-2: #C9A15A;
  --gold-bright: #E8C77E;
  --gold-pale: #F4E5B8;
  --seal-red: #B33A3A;
  --seal-red-dark: #7A1E1E;

  --text-dark: #1A1520;
  --text: #2A2530;
  --text-soft: #6B6478;
  --text-mute: #9C9488;
  --line: #E5DCC5;
  --line-dark: rgba(232,199,126,0.18);

  /* Wu Xing */
  --wood: #3F7D4F;
  --fire:  #B33A3A;
  --earth: #B08050;
  --metal: #8B8677;
  --water: #25324D;

  --serif: 'Fraunces', 'Noto Serif KR', 'Nanum Myeongjo', serif;
  --serif-kr: 'Noto Serif KR', 'Nanum Myeongjo', serif;
  /* --serif-han: 한글 + 한자 혼용용. Noto Serif KR을 먼저 두어 한글 렌더가 자연스럽게. */
  --serif-han: 'Noto Serif KR', 'Noto Serif TC', 'Nanum Myeongjo', serif;
  /* --serif-hanja: 순수 한자(4-8자)만 있을 때 굵직한 번체 세리프. */
  --serif-hanja: 'Noto Serif TC', 'Noto Serif KR', serif;
  --sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --shadow-sm: 0 2px 8px rgba(10,6,20,0.06);
  --shadow-md: 0 8px 24px rgba(10,6,20,0.10);
  --shadow-lg: 0 20px 48px rgba(10,6,20,0.18);
  --shadow-gold: 0 8px 28px rgba(184,137,61,0.32), inset 0 1px 0 rgba(255,255,255,0.4);
}

*, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family: var(--sans);
  color: var(--text);
  background: var(--ink);
  overflow-x:hidden;
  word-break: keep-all;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a{ text-decoration:none; color:inherit; }
button{ font-family: inherit; cursor:pointer; border: none; background: none; }
img{ display:block; max-width:100%; }
::selection{ background: var(--gold-bright); color: var(--ink); }

.paper-grain{ position:relative; }
.paper-grain::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(139,111,71,0.05) 1px, transparent 1px),
    radial-gradient(rgba(139,111,71,0.03) 1px, transparent 1px);
  background-size: 3px 3px, 7px 7px;
  background-position: 0 0, 1px 1px;
  mix-blend-mode: multiply;
  opacity: 0.55;
  z-index: 0;
}
.paper-grain > *{ position: relative; z-index: 1; }

/* ============================================================
   BOOT SPLASH (한자 커튼 인트로)
   ============================================================ */
.boot-splash{
  position: fixed; inset: 0;
  z-index: 200;
  background:
    radial-gradient(ellipse 130% 90% at 50% 50%, #1a1030 0%, #0A0614 60%, #000 100%);
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s;
}
body.booted .boot-splash{ opacity: 0; visibility: hidden; }
.boot-inner{
  text-align: center;
  color: var(--gold-bright);
}
.boot-han{
  display: flex; gap: 18px;
  justify-content: center;
  font-family: var(--serif-han);
  font-size: clamp(48px, 12vw, 84px);
  font-weight: 700;
  color: var(--gold-bright);
  letter-spacing: 0.06em;
}
.boot-han span{
  display: inline-block;
  opacity: 0;
  transform: translateY(-40px);
  animation: bootFall 0.7s cubic-bezier(.2,.8,.3,1) forwards;
  animation-delay: calc(var(--i) * 0.13s);
  text-shadow: 0 0 40px rgba(232, 199, 126, 0.4);
}
@keyframes bootFall{
  0%{ opacity: 0; transform: translateY(-50px); filter: blur(4px); }
  60%{ opacity: 1; transform: translateY(4px); filter: blur(0); }
  100%{ opacity: 1; transform: translateY(0); filter: blur(0); }
}
.boot-sub{
  margin-top: 26px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.42em;
  color: rgba(232,199,126,0.5);
  opacity: 0;
  animation: fadeIn 0.6s ease 0.7s forwards;
}
.boot-line{
  width: 0;
  height: 1px;
  background: var(--gold);
  margin: 22px auto 0;
  opacity: 0.6;
  animation: bootLine 0.9s cubic-bezier(.2,.8,.3,1) 0.9s forwards;
}
@keyframes bootLine{ to{ width: 120px; } }
@keyframes fadeIn{ to{ opacity: 1; } }

body.bootstrapping{ overflow: hidden; }

/* ============================================================
   DESKTOP EDITORIAL DECOR
   ============================================================ */
.stage-decor{
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.stage-decor .han-vert{
  position: absolute;
  font-family: var(--serif-han);
  writing-mode: vertical-rl;
  color: rgba(232,199,126,0.10);
  font-weight: 400;
  letter-spacing: 0.24em;
  user-select: none;
  white-space: nowrap;
}
.stage-decor .v-left{
  top: 8vh; left: 3.4vw;
  font-size: clamp(14px, 1.5vw, 20px);
}
.stage-decor .v-right{
  top: 12vh; right: 3.4vw;
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 700;
  color: rgba(232,199,126,0.14);
  letter-spacing: 0.1em;
  line-height: 1.2;
}
.stage-decor .v-bl{
  bottom: 10vh; left: 3vw;
  font-size: clamp(18px, 2vw, 26px);
  color: rgba(232,199,126,0.10);
}
.stage-decor .v-tr{
  bottom: 12vh; right: 3.6vw;
  font-size: clamp(20px, 2.2vw, 28px);
  color: rgba(232,199,126,0.09);
  letter-spacing: 0.4em;
  font-weight: 300;
}
.stage-decor .frame-line{
  position: absolute; top: 6vh; bottom: 6vh;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(232,199,126,0.16), transparent);
}
.stage-decor .frame-line.l{ left: max(2vw, 20px); }
.stage-decor .frame-line.r{ right: max(2vw, 20px); }

.deco-issue{
  position: absolute;
  top: 3.6vh; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px;
  font-family: var(--serif);
  font-size: 11px;
  color: rgba(232,199,126,0.35);
  letter-spacing: 0.24em;
  white-space: nowrap;
}
.deco-issue .cn{ font-family: var(--serif-han); letter-spacing: 0.24em; }
.deco-issue .line{ width: 40px; height: 1px; background: rgba(232,199,126,0.3); }
.deco-issue .en{ font-weight: 500; }

.deco-badge{
  position: absolute;
  bottom: 4vh; left: 50%;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  color: rgba(232,199,126,0.4);
}
.deco-badge svg{ width: 22px; height: 22px; opacity: 0.6; }
.deco-badge span{
  font-family: var(--serif-han);
  font-size: 11px;
  letter-spacing: 0.28em;
}

@media (max-width: 900px){ .stage-decor{ display: none; } }

/* ============================================================
   PHONE FRAME (mobile-first column)
   ============================================================ */
.phone-frame{
  position: relative; z-index: 2;
  max-width: 480px;
  margin: 0 auto;
  background: var(--ivory);
  /* ISSUE-017: iOS Safari 주소창 표시/비표시 흔들림 방지를 위해 dvh 사용 */
  min-height: 100vh;      /* fallback */
  min-height: 100dvh;
  /* ISSUE-017: iPhone 홈바 아래로 컨텐츠가 파고들지 않게 세이프에어리어 확보 */
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(232,199,126,0.12);
}

/* ISSUE-016: 태블릿 세로모드 (768~1024) - 스테이지 데코 대신 폰프레임 강조 */
@media (min-width: 768px) and (max-width: 1024px){
  .phone-frame{
    max-width: 560px;
    box-shadow: 0 40px 100px rgba(0,0,0,0.72), 0 0 0 1px rgba(232,199,126,0.16);
    border-left: 1px solid rgba(232,199,126,0.08);
    border-right: 1px solid rgba(232,199,126,0.08);
  }
}

/* ISSUE-017: iPhone 홈바 위에 겹치지 않도록 FAB 위치 보정 */
.live-consult{
  bottom: calc(20px + env(safe-area-inset-bottom, 0)) !important;
}

.section{
  padding: 72px 24px 60px;
  position: relative;
}

.section-head{
  text-align: center;
  margin-bottom: 40px;
  position: relative;
  z-index: 2;
}
.section-label{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.14em;
  margin-bottom: 20px;
  font-weight: 500;
}
.section-label .num{
  font-family: var(--mono);
  font-style: normal;
  font-weight: 600;
  color: var(--seal-red);
  letter-spacing: 0.08em;
  padding: 3px 6px;
  border: 1px solid rgba(179,58,58,0.3);
  border-radius: 2px;
}
.section-label.light{ color: var(--gold-bright); }
.section-label.light .num{ color: var(--gold-bright); border-color: rgba(232,199,126,0.35); }

.section-title{
  font-family: var(--serif-kr);
  font-weight: 800;
  font-size: clamp(28px, 6.8vw, 34px);
  line-height: 1.32;
  color: var(--text-dark);
  letter-spacing: -0.02em;
}
.section-title.light{ color: var(--ivory); }
.section-title .accent{
  position: relative;
  display: inline-block;
  color: var(--seal-red);
}
.section-title .accent .brush-line{
  position: absolute;
  left: -4%; right: -4%;
  bottom: -8px;
  width: 108%;
  height: 12px;
  pointer-events: none;
}
.section-title .gold{ color: var(--gold); }
.section-title .accent-plain{ color: var(--seal-red); }

.section-desc{
  margin-top: 16px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--text-soft);
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.section-desc.light{ color: rgba(251,247,236,0.62); }
.section-desc.light .ivory{ color: var(--ivory); }
.section-desc b{ color: var(--text-dark); }
.section-desc.light b{ color: var(--gold-bright); }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative;
  min-height: 100svh;
  background:
    radial-gradient(ellipse 140% 70% at 50% 0%, var(--indigo-3) 0%, var(--indigo-2) 26%, var(--indigo) 58%, var(--ink) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  perspective: 1400px;
  color: var(--ivory);
}
#stars{ position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }

.hero::after{
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--ivory));
  z-index: 6;
}

/* 60갑자 회전 링 */
.ganzhi-ring{
  position: absolute;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  width: 480px; height: 480px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.5;
  animation: ganzhiRotate 90s linear infinite;
}
.ganzhi-ring svg{ width: 100%; height: 100%; }
@keyframes ganzhiRotate{ to{ transform: translate(-50%, -50%) rotate(360deg); } }

.star-ring{
  position: absolute;
  top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  width: 360px; height: 360px;
  z-index: 2;
  pointer-events: none;
  opacity: 0.7;
  animation: ganzhiRotate 240s linear infinite reverse;
}
.star-ring svg{ width: 100%; height: 100%; }

/* Nav */
.hero-nav{
  position: relative; z-index: 5;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 22px 22px 0;
}
.wordmark{ display: flex; align-items: center; gap: 10px; }
.wordmark .seal{ width: 32px; height: 32px; flex-shrink: 0; }
.wordmark .marks{ display: flex; flex-direction: column; }
.wordmark .han{
  font-family: var(--serif-han); font-weight: 700;
  font-size: 14px; color: var(--gold-bright);
  letter-spacing: 0.14em; line-height: 1;
}
.wordmark .en{
  font-family: var(--sans); font-weight: 500;
  font-size: 9.5px; color: rgba(255,255,255,0.42);
  letter-spacing: 0.24em; margin-top: 5px;
}
.nav-tag{
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; color: rgba(255,255,255,0.7);
  border: 1px solid rgba(201,161,90,0.34);
  padding: 6px 11px; border-radius: 100px;
  letter-spacing: 0.06em; font-weight: 500;
  backdrop-filter: blur(6px);
  background: rgba(21,11,46,0.35);
}
.nav-tag .dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px var(--gold-bright);
  animation: heartbeat 2s ease-in-out infinite;
}
@keyframes heartbeat{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:0.4; transform:scale(0.85);} }

/* Hero copy */
.hero-copy{
  position: relative; z-index: 5;
  text-align: center;
  padding: 34px 24px 0;
}
.eyebrow{
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--gold-bright);
  letter-spacing: 0.28em; margin-bottom: 24px;
  font-weight: 600; text-transform: uppercase;
}
.eyebrow em{ color: var(--gold); font-style: normal; }
.eyebrow .tick{ width: 24px; height: 1px; background: linear-gradient(to right, transparent, var(--gold), transparent); }

.headline{
  /* 한글 본문은 Noto Serif KR로 통일 — 산세리프/영문세리프 혼합 제거 */
  font-family: var(--serif-kr);
  font-weight: 600;
  font-size: clamp(32px, 8.8vw, 42px);
  line-height: 1.34;
  color: var(--ivory);
  letter-spacing: -0.02em;
  font-feature-settings: "ss02" 1, "ss03" 1;
}
.headline .hanja{
  display: block;
  font-family: var(--serif-hanja);
  font-size: 0.34em; font-weight: 400;
  color: rgba(232,199,126,0.55);
  letter-spacing: 0.5em;
  margin-bottom: 14px;
  padding-left: 0.5em;
}
.headline .line-1,
.headline .line-2,
.headline .line-3{ display: block; }
/* 강조는 폰트를 바꾸지 않고 굵기·색으로만 — 한 라인 안에서 폰트가 튀지 않게 */
.headline em{
  font-family: inherit;
  font-style: normal;
  font-weight: 800;
  color: var(--gold-bright);
  padding: 0;
}
.headline .hanja-inline{
  font-family: var(--serif-hanja);
  font-size: 0.62em;
  color: rgba(232,199,126,0.5);
  font-weight: 400;
  letter-spacing: 0.12em;
  padding: 0 0.1em;
  vertical-align: 0.06em;
}
.headline .accent{
  color: var(--gold-bright);
  position: relative;
  display: inline-block;
}
.headline .accent .brush-line{
  position: absolute;
  left: -6%; right: -6%; bottom: -8px;
  width: 112%; height: 14px;
  animation: brushDraw 1.2s ease 1.5s both;
  transform-origin: left center;
}
@keyframes brushDraw{
  from{ clip-path: inset(0 100% 0 0); }
  to{ clip-path: inset(0 0 0 0); }
}

.sub{
  margin-top: 20px;
  font-size: 14px;
  color: rgba(251,247,236,0.62);
  line-height: 1.7;
  font-weight: 400;
}
.sub .divot{
  display: inline-block; margin: 0 6px;
  color: var(--gold-2); opacity: 0.7;
}
.sub b{ color: var(--gold-bright); font-weight: 600; }

/* Stage — 4 pillars 3D */
.stage{
  position: relative; z-index: 4;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  margin: 30px 0 10px;
  min-height: 280px;
}
.glow-ring{
  position: absolute;
  width: 320px; height: 320px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232,199,126,0.15) 0%, transparent 60%);
  animation: pulseGlow 5s ease-in-out infinite;
  z-index: 1;
}
@keyframes pulseGlow{ 0%,100%{ opacity: 0.6; } 50%{ opacity: 1; } }

.pillar-stack{
  position: relative;
  width: 300px; height: 260px;
  transform-style: preserve-3d;
  transform: rotateX(12deg) rotateY(-16deg);
  transition: transform 0.2s cubic-bezier(.2,.8,.2,1);
  z-index: 3;
}
.pillar{
  position: absolute;
  top: 50%; left: 50%;
  width: 60px; height: 200px;
  margin: -100px 0 0 -30px;
  border-radius: 6px;
  background:
    linear-gradient(165deg,
      rgba(255,255,255,0.14) 0%,
      rgba(255,255,255,0.04) 30%,
      rgba(0,0,0,0.18) 60%,
      rgba(0,0,0,0.38) 100%);
  border: 1px solid rgba(232,199,126,0.32);
  box-shadow:
    0 12px 32px rgba(0,0,0,0.55),
    inset 0 1px 0 rgba(255,255,255,0.2),
    inset 0 -20px 40px rgba(0,0,0,0.3),
    0 0 40px rgba(201,161,90,0.06);
  backdrop-filter: blur(4px);
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 18px 0 14px;
  animation: floaty 7s ease-in-out infinite;
}
.pillar::before{
  content: ''; position: absolute; top: 8px; left: 6px; right: 6px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(232,199,126,0.55), transparent);
}
.pillar::after{
  content: ''; position: absolute; bottom: 8px; left: 6px; right: 6px; height: 1px;
  background: linear-gradient(to right, transparent, rgba(232,199,126,0.42), transparent);
}
.pillar .glyph{
  font-family: var(--serif-han); font-size: 32px; font-weight: 500;
  line-height: 1;
  color: var(--ivory);
  text-shadow: 0 0 12px rgba(232,199,126,0.4);
}
.pillar .label{
  font-family: var(--serif-han);
  font-size: 10px;
  letter-spacing: 0.3em;
  color: rgba(232,199,126,0.55);
  writing-mode: vertical-rl;
}
.pillar .element-dot{
  position: absolute; top: -12px;
  right: -8px;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-family: var(--serif-han);
  font-size: 11px;
  color: var(--ivory);
  display: flex; align-items: center; justify-content: center;
  border: 1.5px solid var(--ivory);
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}
.el-metal{ background: var(--metal); }
.el-water{ background: var(--water); }
.el-fire { background: var(--fire); }
.el-earth{ background: var(--earth); }
.el-wood { background: var(--wood); }

.pillar.p1{ transform: translateX(-108px) translateZ(30px); animation-delay: 0s; }
.pillar.p2{ transform: translateX(-36px)  translateZ(0px);  animation-delay: 0.4s; }
.pillar.p3{ transform: translateX(36px)   translateZ(-30px); animation-delay: 0.8s; }
.pillar.p4{ transform: translateX(108px)  translateZ(-60px); animation-delay: 1.2s; }

.pillar.p1{ transform: translateX(-108px) translateZ(30px); }
.pillar.p2{ transform: translateX(-36px)  translateZ(0); }
.pillar.p3{ transform: translateX(36px)   translateZ(-30px); }
.pillar.p4{ transform: translateX(108px)  translateZ(-60px); }

@keyframes floaty{ 0%,100%{ margin-top: -100px; } 50%{ margin-top: -108px; } }

/* Hero CTA */
.hero-form{
  position: relative; z-index: 5;
  padding: 6px 24px 90px;
  text-align: center;
}
.cta-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 360px;
  padding: 18px 26px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-bright) 50%, var(--gold-2) 100%);
  border-radius: 8px;
  box-shadow: var(--shadow-gold);
  position: relative;
  overflow: hidden;
  letter-spacing: -0.005em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-btn::before{
  content: ''; position: absolute;
  inset: 0;
  border-radius: 8px;
  padding: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.cta-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 34px rgba(184,137,61,0.42), inset 0 1px 0 rgba(255,255,255,0.4); }
.cta-btn:active{ transform: translateY(1px); }
.cta-btn .cta-arrow{
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  color: var(--ink);
  transition: transform 0.25s ease;
}
.cta-btn .cta-arrow svg{ width: 100%; height: 100%; }
.cta-btn:hover .cta-arrow{ transform: translateX(4px); }
.cta-btn.light{
  background: linear-gradient(180deg, #fff 0%, var(--ivory) 100%);
  color: var(--ink);
}

.cta-sub{
  margin-top: 14px;
  font-size: 11.5px;
  color: rgba(251,247,236,0.55);
  letter-spacing: 0.02em;
  font-weight: 400;
}
.cta-sub .dot-sep::after{
  content: '·';
  margin: 0 8px;
  color: var(--gold);
  opacity: 0.6;
}
.cta-sub .dot-sep.last::after{ content: ''; margin: 0; }

.selfie-link{
  display: inline-block;
  margin-top: 18px;
  font-size: 12.5px;
  color: rgba(232,199,126,0.7);
  letter-spacing: 0.02em;
  border-bottom: 1px dashed rgba(232,199,126,0.35);
  padding-bottom: 3px;
  transition: color 0.2s;
}
.selfie-link:hover{ color: var(--gold-bright); }
.selfie-link b{ color: var(--gold-bright); font-weight: 600; }
.selfie-link .arr{ margin-left: 4px; transition: transform 0.2s; display: inline-block; }
.selfie-link:hover .arr{ transform: translateX(3px); }

/* Scroll cue */
.scroll-cue{
  position: absolute;
  bottom: 76px;
  left: 50%; transform: translateX(-50%);
  z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: rgba(232,199,126,0.5);
  animation: scrollBob 2.2s ease-in-out infinite;
}
.scroll-cue .cn{
  font-family: var(--serif-han);
  font-size: 12px;
  letter-spacing: 0.24em;
}
.scroll-cue .line{
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, var(--gold-bright), transparent);
}
@keyframes scrollBob{ 0%,100%{ transform: translate(-50%, 0); opacity: 0.6; } 50%{ transform: translate(-50%, 6px); opacity: 1; } }

/* ============================================================
   HAN QUOTE
   ============================================================ */
.han-quote{
  position: relative;
  background: var(--paper);
  padding: 60px 24px 60px;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.hq-inner{
  display: flex; align-items: center; justify-content: center;
  gap: 26px;
  position: relative;
  z-index: 2;
}
.hq-vert{
  display: flex; flex-direction: row-reverse; gap: 10px;
  writing-mode: vertical-rl;
}
.hq-line{
  font-family: var(--serif-han);
  color: var(--text-dark);
  letter-spacing: 0.24em;
  line-height: 1.6;
}
.hq-line.big{
  font-size: 26px;
  font-weight: 500;
}
.hq-line.small{
  font-size: 10.5px;
  color: var(--text-soft);
  letter-spacing: 0.32em;
  font-weight: 400;
  padding-top: 8px;
}
.hq-trans{
  font-family: var(--serif-kr);
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-soft);
  max-width: 200px;
  font-style: italic;
  position: relative;
}
.hq-trans .quote-open,
.hq-trans .quote-close{
  font-family: var(--serif);
  font-size: 44px;
  color: var(--gold);
  opacity: 0.4;
  line-height: 1;
  position: absolute;
}
.hq-trans .quote-open{ top: -14px; left: -18px; }
.hq-trans .quote-close{ bottom: -30px; right: -8px; }
.hq-trans b{ color: var(--text-dark); font-style: normal; font-weight: 700; }

.hq-seal{
  position: absolute;
  right: 24px; bottom: 24px;
  width: 40px; height: 40px;
  opacity: 0.7;
  transform: rotate(-8deg);
  z-index: 2;
}

/* ============================================================
   TRUST
   ============================================================ */
.trust{
  background: var(--ivory);
}
.trust-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.trust-card{
  position: relative;
  padding: 22px 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}
.trust-card::before{
  content: ''; position: absolute;
  top: 0; left: 0; width: 100%; height: 2px;
  background: linear-gradient(to right, var(--gold), var(--gold-bright), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.trust-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(21,11,46,0.08);
  border-color: rgba(184,137,61,0.4);
}
.trust-card:hover::before{ transform: scaleX(1); }
.tc-mark{
  font-family: var(--serif-han);
  font-size: 48px;
  font-weight: 300;
  color: rgba(184,137,61,0.28);
  line-height: 1;
  position: absolute;
  top: 8px; right: 12px;
}
.tc-num{
  font-family: var(--serif);
  font-style: italic;
  font-size: 12px;
  color: var(--seal-red);
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.tc-t{
  font-family: var(--serif-kr);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.tc-d{
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-soft);
}

/* ============================================================
   CALC DEMO (Terminal)
   ============================================================ */
.calc-demo{
  background: var(--ivory);
  padding-top: 20px;
}
.terminal{
  background: #0f0a1c;
  border-radius: 8px;
  border: 1px solid rgba(232,199,126,0.2);
  overflow: hidden;
  box-shadow:
    0 20px 40px rgba(10,6,20,0.25),
    inset 0 1px 0 rgba(255,255,255,0.05);
  font-family: var(--mono);
}
.terminal-head{
  display: flex; align-items: center;
  padding: 10px 14px;
  background: linear-gradient(180deg, #1a1233, #14092b);
  border-bottom: 1px solid rgba(232,199,126,0.12);
  gap: 10px;
}
.terminal-head .dots{
  display: flex; gap: 6px;
}
.terminal-head .dots i{
  width: 10px; height: 10px; border-radius: 50%;
  background: #444;
  display: inline-block;
}
.terminal-head .dots i:nth-child(1){ background: #ff5f57; }
.terminal-head .dots i:nth-child(2){ background: #ffbd2e; }
.terminal-head .dots i:nth-child(3){ background: #27c93f; }
.terminal-head .term-title{
  flex: 1;
  text-align: center;
  font-size: 10.5px;
  color: rgba(232,199,126,0.6);
  letter-spacing: 0.06em;
}
.terminal-head .term-badge{
  font-size: 9.5px;
  padding: 3px 8px;
  background: rgba(63,125,79,0.18);
  color: #7fd097;
  border: 1px solid rgba(63,125,79,0.4);
  border-radius: 2px;
  letter-spacing: 0.08em;
}
.terminal-body{
  padding: 18px 16px 20px;
  font-size: 11.5px;
  line-height: 1.85;
  color: #cbc3aa;
}
.tline{
  display: flex; align-items: baseline; gap: 8px;
  opacity: 0;
  transform: translateY(4px);
  animation: tlineIn 0.4s ease forwards;
}
.tline.step{ animation-delay: calc(var(--_d, 0) * 1ms); }
.tline:nth-child(1){ animation-delay: 100ms; }
.tline:nth-child(2){ animation-delay: 260ms; }
.tline:nth-child(3){ animation-delay: 400ms; }
.tline:nth-child(4){ animation-delay: 550ms; }
.tline:nth-child(5){ animation-delay: 750ms; }
.tline:nth-child(6){ animation-delay: 950ms; }
.tline:nth-child(7){ animation-delay: 1150ms; }
.tline:nth-child(8){ animation-delay: 1350ms; }
.tline:nth-child(9){ animation-delay: 1550ms; }
.tline:nth-child(10){ animation-delay: 1750ms; }
.tline:nth-child(11){ animation-delay: 1900ms; }
.tline:nth-child(12){ animation-delay: 2100ms; }
.tline:nth-child(13){ animation-delay: 2300ms; }
@keyframes tlineIn{ to{ opacity: 1; transform: translateY(0); } }

.tline .prompt{ color: var(--gold-bright); font-weight: 600; }
.tline .cmd{ color: #fff; }
.tline.out{ color: rgba(232,199,126,0.75); padding-left: 0; }
.tline.sep{ color: rgba(232,199,126,0.25); font-size: 9px; letter-spacing: 0.1em; }
.tline.step{ color: #d8d1b8; }
.tline .stat{
  display: inline-block;
  color: #7fd097;
  font-weight: 700;
  width: 12px;
  text-align: center;
}
.tline .stat.done{ color: var(--gold-bright); }
.tline .val{
  margin-left: auto;
  padding: 2px 8px;
  background: rgba(232,199,126,0.1);
  color: var(--gold-bright);
  border-radius: 3px;
  font-family: var(--mono);
  font-weight: 600;
  font-size: 11px;
}

/* ============================================================
   MYEONG BOARD
   ============================================================ */
.myeong{
  background: var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.myeong-board{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px 18px;
  box-shadow: 0 12px 30px rgba(21,11,46,0.06);
  position: relative;
}
.myeong-board::before,
.myeong-board::after{
  content: ''; position: absolute;
  width: 12px; height: 12px;
  border: 1.5px solid var(--gold);
  opacity: 0.6;
}
.myeong-board::before{
  top: -1px; left: -1px;
  border-right: none; border-bottom: none;
}
.myeong-board::after{
  bottom: -1px; right: -1px;
  border-left: none; border-top: none;
}
.board-head{
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.bh-left{ display: flex; flex-direction: column; gap: 3px; }
.who{
  font-family: var(--serif-kr);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
}
.who b{
  font-family: var(--serif-han);
  color: var(--seal-red);
  margin-left: 4px;
  font-size: 12px;
}
.when{
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
}
.bh-right{ text-align: right; }
.issue{
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--gold);
  letter-spacing: 0.14em;
  padding: 3px 8px;
  border: 1px solid var(--gold);
  border-radius: 2px;
}

.myeong-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.myeong-col{
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 4px;
  border-radius: 4px;
  background: linear-gradient(180deg, #fdfaf0, #f6efd7);
  border: 1px solid var(--line);
  position: relative;
}
.myeong-col.day{
  background: linear-gradient(180deg, #fff8e7, #fbecc0);
  border: 1.5px solid var(--gold);
  box-shadow: 0 4px 12px rgba(184,137,61,0.16);
}
.col-label{
  font-family: var(--serif-han);
  font-size: 12px;
  color: var(--seal-red);
  letter-spacing: 0.18em;
  font-weight: 500;
}
.col-sub{
  font-family: var(--serif);
  font-style: italic;
  font-size: 9.5px;
  color: var(--text-soft);
  letter-spacing: 0.04em;
  margin-top: -4px;
  margin-bottom: 2px;
}
.gan, .ji{
  font-family: var(--serif-han);
  font-size: 32px;
  font-weight: 500;
  line-height: 1;
  margin: 2px 0;
}
.element{
  font-family: var(--serif-han);
  font-size: 10px;
  color: #fff;
  padding: 1.5px 6px;
  border-radius: 2px;
  letter-spacing: 0.08em;
}

.board-foot{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.element-bars{
  display: flex; flex-direction: column; gap: 6px;
}
.eb-row{
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  align-items: center;
  gap: 8px;
}
.eb-lb{
  font-family: var(--serif-han);
  font-size: 12px;
  color: var(--text-dark);
  font-weight: 500;
}
.eb-bar{
  height: 6px;
  background: var(--ivory-2);
  border-radius: 100px;
  overflow: hidden;
}
.eb-fill{
  height: 100%;
  border-radius: 100px;
  width: var(--w);
  transition: width 1.2s cubic-bezier(.2,.8,.2,1);
}
.eb-num{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-soft);
  text-align: right;
}

/* ============================================================
   WU XING
   ============================================================ */
.wuxing-section{
  background: var(--ivory);
  padding-top: 40px;
}
.wu-xing{
  max-width: 320px;
  margin: 0 auto;
  padding: 12px 0 4px;
}
.wu-xing-svg{ width: 100%; height: auto; display: block; }
.wu-xing .sheng-arc{
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: shengDraw 2.2s ease forwards;
  animation-delay: calc(var(--order, 0) * 0.35s + 0.4s);
}
.wu-xing .sheng-arc[data-order="0"]{ animation-delay: 0.4s; }
.wu-xing .sheng-arc[data-order="1"]{ animation-delay: 0.75s; }
.wu-xing .sheng-arc[data-order="2"]{ animation-delay: 1.10s; }
.wu-xing .sheng-arc[data-order="3"]{ animation-delay: 1.45s; }
.wu-xing .sheng-arc[data-order="4"]{ animation-delay: 1.80s; }
@keyframes shengDraw{ to{ stroke-dashoffset: 0; } }
.wx-node{ animation: nodePop 0.6s ease backwards; }
.wx-node:nth-child(1){ animation-delay: 0.1s; }
.wx-node:nth-child(2){ animation-delay: 0.25s; }
.wx-node:nth-child(3){ animation-delay: 0.4s; }
.wx-node:nth-child(4){ animation-delay: 0.55s; }
.wx-node:nth-child(5){ animation-delay: 0.7s; }
@keyframes nodePop{ from{ opacity: 0; transform: scale(0.3); transform-box: fill-box; transform-origin: center; } }

.wu-xing .caption{
  margin-top: 14px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-soft);
  line-height: 1.7;
}
.wu-xing .caption .sep{ margin: 0 8px; opacity: 0.5; }

/* ============================================================
   PREVIEW / PRICING (dark)
   ============================================================ */
.preview-section{
  background:
    radial-gradient(ellipse 130% 60% at 50% 0%, var(--indigo-2) 0%, var(--indigo) 40%, var(--ink) 100%);
  color: var(--ivory);
  padding: 72px 24px 60px;
  position: relative;
  overflow: hidden;
}
.preview-section::before{
  content: '';
  position: absolute;
  top: 30px; left: -20px;
  font-family: var(--serif-han);
  font-size: 300px;
  color: rgba(232,199,126,0.03);
  writing-mode: vertical-rl;
  content: '運';
  z-index: 0;
}

.scroll-mock{
  position: relative;
  background: linear-gradient(180deg, rgba(59,37,112,0.35), rgba(21,11,46,0.55));
  border: 1px solid rgba(232,199,126,0.3);
  border-radius: 6px;
  padding: 26px 22px 24px;
  margin-bottom: 30px;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(232,199,126,0.15);
}
.mock-corner{
  position: absolute;
  width: 24px; height: 24px;
  font-family: var(--serif-han);
  font-size: 14px;
  color: var(--gold-bright);
  opacity: 0.55;
  display: flex; align-items: center; justify-content: center;
}
.mock-corner.tl{ top: 8px; left: 10px; }
.mock-corner.tr{ top: 8px; right: 10px; }
.mock-corner.bl{ bottom: 8px; left: 10px; }
.mock-corner.br{ bottom: 8px; right: 10px; }

.mock-label{
  font-family: var(--serif-han);
  font-size: 11px;
  color: var(--gold-bright);
  letter-spacing: 0.24em;
  margin-bottom: 12px;
  text-align: center;
  padding-top: 6px;
}
.mock-title{
  font-family: var(--serif-kr);
  font-size: 18px;
  font-weight: 700;
  color: var(--ivory);
  line-height: 1.45;
  margin-bottom: 14px;
  text-align: center;
}
.mock-body{
  font-size: 13.5px;
  line-height: 1.75;
  color: rgba(251,247,236,0.75);
  padding: 0 4px;
}
.mock-body b{ color: var(--gold-bright); font-weight: 600; }

.blur-block{
  position: relative;
  margin-top: 20px;
  padding: 20px 16px;
  border-top: 1px dashed rgba(232,199,126,0.25);
}
.blur-lines{ display: flex; flex-direction: column; gap: 10px; filter: blur(4px); opacity: 0.6; }
.blur-lines .line{
  height: 10px;
  background: linear-gradient(to right, rgba(251,247,236,0.5), rgba(251,247,236,0.15));
  border-radius: 2px;
}
.blur-lines .w90{ width: 90%; }
.blur-lines .w80{ width: 80%; }
.blur-lines .w70{ width: 70%; }
.blur-lines .w50{ width: 50%; }
.lock-badge{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: rgba(10,6,20,0.85);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-size: 12px;
  border-radius: 100px;
  letter-spacing: 0.05em;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.lock-badge svg{ width: 14px; height: 14px; }

.price-row{
  display: flex; align-items: baseline; justify-content: center;
  gap: 10px;
  margin: 24px 0 6px;
}
.price-row .cn{
  font-family: var(--serif-han);
  font-size: 22px;
  color: var(--gold-bright);
  letter-spacing: 0.14em;
  opacity: 0.6;
}
.price-row .num{
  font-family: var(--serif);
  font-size: 64px;
  font-weight: 700;
  color: var(--gold-bright);
  line-height: 1;
  letter-spacing: -0.02em;
}
.price-row .unit{
  font-size: 15px;
  color: rgba(251,247,236,0.55);
  font-weight: 400;
}
.price-hint{
  text-align: center;
  font-size: 12.5px;
  color: rgba(232,199,126,0.55);
  margin-bottom: 20px;
}
.preview-cta-wrap{ text-align: center; }

/* ============================================================
   PATHS
   ============================================================ */
.paths{
  background: var(--ivory);
}
.path-cards{
  display: flex; flex-direction: column; gap: 12px;
}
.path-card{
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr auto 22px;
  align-items: center;
  gap: 14px;
  padding: 22px 20px 22px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  overflow: hidden;
}
.path-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(21,11,46,0.10);
  border-color: var(--gold);
}
.path-card:hover .pc-arrow{ transform: translateX(4px); color: var(--seal-red); }
.pc-num{
  font-family: var(--serif-han);
  font-size: 22px;
  color: rgba(184,137,61,0.4);
  text-align: center;
  writing-mode: vertical-rl;
}
.pc-badge{
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  font-family: var(--serif-han);
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ivory);
  background: var(--indigo);
  border-radius: 4px;
  opacity: 0;
}
.pc-badge.cam{ background: var(--seal-red); }
.pc-badge.cam svg{ width: 18px; height: 18px; color: var(--ivory); }

.pc-body{ display: flex; flex-direction: column; gap: 6px; }
.pc-t{
  font-family: var(--serif-kr);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.pc-d{
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.55;
}
.pc-d b{ color: var(--seal-red); font-weight: 600; }
.pc-d .live{
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--wood);
  font-weight: 600;
  font-size: 11.5px;
  margin-top: 4px;
}
.pc-d .live .pulse{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--wood);
  box-shadow: 0 0 8px var(--wood);
  animation: heartbeat 1.4s infinite;
}
.pc-p{
  text-align: right;
  display: flex; flex-direction: column; gap: 2px;
}
.pcp-num{
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.02em;
  line-height: 1;
}
.pcp-unit{
  font-size: 10.5px;
  color: var(--text-soft);
  letter-spacing: 0.06em;
}
.pc-arrow{
  color: var(--gold);
  transition: transform 0.25s, color 0.25s;
}
.pc-arrow svg{ width: 20px; height: 20px; }

/* ============================================================
   REVIEWS
   ============================================================ */
.reviews{
  background:
    radial-gradient(circle at 20% 0%, rgba(232,199,126,0.06), transparent 60%),
    radial-gradient(circle at 80% 100%, rgba(179,58,58,0.04), transparent 55%),
    var(--paper);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
  overflow: hidden;
}

/* ---------- 자동 마퀴 (2줄, 반대방향) ---------- */
.review-marquee{
  position: relative;
  margin: 24px -24px 0;
  display: flex; flex-direction: column;
  gap: 14px;
  /* 좌우 페이드 마스크 */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.rm-row{ overflow: hidden; }
.rm-track{
  display: flex; align-items: stretch;
  gap: 14px;
  width: max-content;
  padding: 6px 0;
  transform: translateZ(0);
}
/* 두 방향 · 시간은 JS가 --rm-dur/--rm-w 로 주입 */
.rm-row--l .rm-track{
  animation: rmSlideL var(--rm-dur, 60s) linear infinite;
}
.rm-row--r .rm-track{
  animation: rmSlideR var(--rm-dur, 65s) linear infinite;
}
@keyframes rmSlideL{
  from{ transform: translate3d(0, 0, 0); }
  to  { transform: translate3d(calc(var(--rm-w, 2000px) * -1), 0, 0); }
}
@keyframes rmSlideR{
  from{ transform: translate3d(calc(var(--rm-w, 2000px) * -1), 0, 0); }
  to  { transform: translate3d(0, 0, 0); }
}
/* hover: 전체 마퀴 일시정지 */
.review-marquee:hover .rm-track{ animation-play-state: paused; }

/* prefers-reduced-motion: 애니메이션 끔 */
@media (prefers-reduced-motion: reduce){
  .rm-track{ animation: none !important; }
}

/* ---------- 마퀴 카드 (입체감 강화) ---------- */
.rm-card{
  position: relative;
  flex: 0 0 300px;
  width: 300px;
  min-height: 190px;
  padding: 20px 18px 40px;
  background:
    linear-gradient(180deg, #fefcf5 0%, #fdfaf0 100%);
  border: 1px solid rgba(21,11,46,0.08);
  border-radius: 6px;
  /* 그림자 단순화 — 카드 수가 많아 다층 shadow는 렌더 부담 */
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 6px 14px -4px rgba(21,11,46,0.10),
    0 18px 30px -12px rgba(21,11,46,0.08);
}
/* 오른쪽 상단 접힘 코너 */
.rm-c-corner{
  position: absolute;
  top: 0; right: 0;
  width: 18px; height: 18px;
  background: linear-gradient(225deg, rgba(21,11,46,0.09) 50%, transparent 50%);
  border-radius: 0 6px 0 0;
}
.rm-c-stars{
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 0.12em;
  margin-bottom: 8px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}
.rm-c-title{
  font-family: var(--serif-kr);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.45;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
  /* 2줄 클램프 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rm-c-body{
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.6;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rm-c-meta{
  position: absolute; left: 18px; right: 18px; bottom: 12px;
  display: flex; align-items: center; gap: 5px;
  font-size: 10.5px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}
.rm-c-name{
  font-family: var(--serif-kr);
  color: var(--text-dark);
  font-weight: 600;
  font-size: 11.5px;
}
.rm-c-name b{
  font-family: var(--serif-han);
  color: var(--seal-red);
  font-weight: 500;
}
.rm-c-dot{ color: var(--text-mute); }
.rm-c-verify{
  margin-left: auto;
  color: var(--wood);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.02em;
}
/* 붉은 인주 도장 (조금 더 크고 진하게) */
.rm-c-seal{
  position: absolute;
  right: 10px; bottom: 34px;
  width: 34px; height: 34px;
  opacity: 0.42;
  transform: rotate(-9deg);
  filter: drop-shadow(0 2px 3px rgba(179,58,58,0.35));
  overflow: hidden;
}
.rm-c-seal svg{
  width: 100%;
  height: 100%;
  display: block;
}

/* 서로 다른 카드 카드끼리 살짝 톤 변주 (지그재그 종이) — transform은 GPU 부담이라 제거 */
.rm-track > .rm-card:nth-child(3n){
  background: linear-gradient(180deg, #fdf9ea 0%, #fcf6e2 100%);
}
.rm-track > .rm-card:nth-child(5n){
  background: linear-gradient(180deg, #fdfaf3 0%, #fbf5e8 100%);
}

.rm-foot{
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--text-soft);
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.rm-foot-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--seal-red);
  box-shadow: 0 0 8px rgba(179,58,58,0.55);
  animation: heartbeat 1.8s infinite;
}
.rm-foot-lb b{ color: var(--seal-red); font-weight: 700; }

@media (max-width: 480px){
  .rm-card{ flex: 0 0 260px; width: 260px; min-height: 180px; padding: 18px 16px 36px; }
  .rm-card:nth-child(5n){ transform: rotate(-0.25deg); }
}
.review-scroll{
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px 4px 20px;
  margin: 0 -24px;
  padding-left: 24px;
  padding-right: 24px;
  scrollbar-width: none;
}
.review-scroll::-webkit-scrollbar{ display: none; }
.review-card{
  position: relative;
  flex: 0 0 82%;
  scroll-snap-align: start;
  background: #fdfaf0;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 22px 20px 42px;
  box-shadow: 0 6px 20px rgba(21,11,46,0.06);
}
.rc-corner{
  position: absolute;
  top: 0; right: 0;
  width: 24px; height: 24px;
  background:
    linear-gradient(225deg, var(--line) 50%, transparent 50%);
}
.stars{
  font-size: 13px;
  color: var(--gold);
  letter-spacing: 0.1em;
  margin-bottom: 10px;
}
.r-title{
  font-family: var(--serif-kr);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.45;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}
.r-body{
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.65;
  margin-bottom: 14px;
}
.r-meta{
  display: flex; align-items: center; gap: 6px;
  font-size: 11px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
  flex-wrap: wrap;
}
.r-meta .r-name{
  font-family: var(--serif-kr);
  color: var(--text-dark);
  font-weight: 600;
  font-size: 12px;
}
.r-meta .r-name b{
  font-family: var(--serif-han);
  color: var(--seal-red);
  font-weight: 500;
}
.r-meta .r-dot{ color: var(--text-mute); }
.r-meta .verify{
  margin-left: auto;
  color: var(--wood);
  font-weight: 600;
  font-size: 10.5px;
}
.r-seal{
  position: absolute;
  right: 12px; bottom: 8px;
  width: 32px; height: 32px;
  opacity: 0.5;
  transform: rotate(-8deg);
}

.review-dots{
  display: flex; gap: 6px; justify-content: center; margin-top: 8px;
}
.review-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--line);
  transition: all 0.2s;
  cursor: pointer;
}
.review-dot.active{
  background: var(--seal-red);
  width: 18px; border-radius: 100px;
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{ background: var(--ivory); }
.faq-list{
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
}
.faq-item{
  border-bottom: 1px solid var(--line);
}
.faq-q{
  display: flex; align-items: center;
  padding: 20px 4px;
  cursor: pointer;
  font-family: var(--serif-kr);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  gap: 12px;
  letter-spacing: -0.01em;
  transition: color 0.2s;
}
.faq-q:hover{ color: var(--seal-red); }
.faq-idx{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gold);
  font-weight: 500;
  letter-spacing: 0.08em;
  min-width: 22px;
}
.faq-q .plus{
  margin-left: auto;
  font-size: 22px;
  color: var(--gold);
  font-weight: 300;
  transition: transform 0.3s ease;
}
.faq-item.open .faq-q .plus{ transform: rotate(45deg); color: var(--seal-red); }
.faq-a{
  max-height: 0;
  overflow: hidden;
  padding: 0 4px 0 34px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-soft);
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-a b{ color: var(--text-dark); font-weight: 700; }
.faq-item.open .faq-a{
  max-height: 260px;
  padding-bottom: 20px;
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.final-cta{
  position: relative;
  background:
    radial-gradient(ellipse 130% 90% at 50% 30%, var(--indigo-2) 0%, var(--indigo) 40%, var(--ink) 100%);
  color: var(--ivory);
  padding: 90px 24px 100px;
  text-align: center;
  overflow: hidden;
}
.fcta-decor{
  position: absolute;
  top: 40px; left: 50%; transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}
.fcta-vert{
  font-family: var(--serif-han);
  writing-mode: vertical-rl;
  font-size: 90px;
  color: rgba(232,199,126,0.06);
  letter-spacing: 0.3em;
  font-weight: 300;
  white-space: nowrap;
}
.final-cta .inner{
  position: relative; z-index: 2;
  max-width: 380px;
  margin: 0 auto;
}
.fcta-eyebrow{
  font-family: var(--serif-han);
  font-size: 12px;
  color: var(--gold-bright);
  letter-spacing: 0.42em;
  margin-bottom: 22px;
  opacity: 0.7;
}
.final-cta h2{
  font-family: var(--serif-kr);
  font-size: 34px;
  line-height: 1.3;
  color: var(--ivory);
  margin-bottom: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.final-cta h2 .accent{
  font-family: var(--serif);
  font-style: italic;
  color: var(--gold-bright);
  font-weight: 600;
}
.final-cta h2 .big{
  display: inline-block;
  font-size: 1.35em;
  color: var(--gold-bright);
  position: relative;
}
.final-cta h2 .big::after{
  content: '';
  position: absolute;
  left: -6%; right: -6%; bottom: -8px;
  height: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6' preserveAspectRatio='none'%3E%3Cpath d='M0 4 Q 25 0, 50 3 T 100 3' stroke='%23E8C77E' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
  opacity: 0.85;
}
.final-cta p{
  color: rgba(251,247,236,0.62);
  font-size: 13.5px;
  margin-bottom: 26px;
}
.seal-wrap{
  margin-top: 30px;
  opacity: 0.85;
  animation: sealSway 4s ease-in-out infinite;
}
@keyframes sealSway{ 0%,100%{ transform: rotate(-4deg); } 50%{ transform: rotate(4deg); } }

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background: var(--ink);
  color: rgba(251,247,236,0.55);
  padding: 40px 24px 60px;
  font-size: 11.5px;
  line-height: 1.7;
}
.fmark{
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 20px;
}
.fmark .seal{ width: 26px; height: 26px; }
.fmark .han{
  font-family: var(--serif-han);
  font-size: 13px;
  color: var(--ivory);
  font-weight: 700;
  letter-spacing: 0.06em;
}
.fmark .en{
  font-size: 9.5px;
  color: rgba(251,247,236,0.4);
  letter-spacing: 0.24em;
  margin-top: 2px;
}
.flinks{
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-bottom: 16px;
}
.flinks a{
  color: rgba(232,199,126,0.7);
  font-size: 12px;
  letter-spacing: -0.005em;
  border-bottom: 1px solid rgba(232,199,126,0.15);
  padding-bottom: 1px;
}
.flinks a:hover{ color: var(--gold-bright); }
.fnote{
  font-size: 11px; color: rgba(251,247,236,0.4);
  margin-bottom: 16px;
}
.fbiz{
  font-size: 10.5px;
  color: rgba(251,247,236,0.3);
  line-height: 1.7;
  padding-top: 16px;
  border-top: 1px solid rgba(232,199,126,0.1);
}

/* ============================================================
   SELFIE MODAL
   ============================================================ */
.modal-overlay{
  position: fixed; inset: 0;
  background: rgba(10,6,20,0.75);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.modal-overlay.open{ opacity: 1; visibility: visible; }
.modal-sheet{
  background: var(--ivory);
  border-radius: 8px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 24px 22px 28px;
  border: 1px solid rgba(232,199,126,0.4);
  box-shadow: 0 40px 80px rgba(0,0,0,0.5);
  transform: translateY(20px);
  transition: transform 0.3s ease;
  position: relative;
}
.modal-overlay.open .modal-sheet{ transform: translateY(0); }

.modal-head{
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.modal-title{
  display: flex; align-items: center; gap: 10px;
  font-family: var(--serif-kr);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-dark);
}
.modal-title .han{
  font-family: var(--serif-han);
  font-size: 20px;
  color: var(--seal-red);
}
.modal-close{
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-soft);
  border-radius: 50%;
  transition: background 0.2s, color 0.2s;
}
.modal-close:hover{ background: var(--ivory-2); color: var(--text-dark); }

.upload-zone{
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px;
  padding: 40px 20px;
  border: 2px dashed var(--gold);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  text-align: center;
}
.upload-zone:hover{ background: rgba(232,199,126,0.08); border-color: var(--seal-red); }
.zone-icon{
  width: 50px; height: 50px;
  color: var(--gold);
  margin-bottom: 6px;
}
.zone-icon svg{ width: 100%; height: 100%; }
.upload-zone .t{
  font-family: var(--serif-kr);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-dark);
}
.upload-zone .d{ font-size: 12px; color: var(--text-soft); }

#selfieInput{ display: none; }

.preview-wrap{
  display: none;
  margin-top: 16px;
  text-align: center;
}
.preview-wrap.show{ display: block; }
.preview-wrap-inner{
  width: 160px; height: 160px;
  margin: 0 auto 10px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--gold);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
.preview-wrap-inner img{ width: 100%; height: 100%; object-fit: cover; }
.change-btn{
  color: var(--text-soft);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.consent-row{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 16px;
  padding: 12px 14px;
  background: rgba(21, 11, 46, 0.03);
  border: 1px solid rgba(21, 11, 46, 0.12);
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-mid, #3a2f24);
  cursor: pointer;
  user-select: none;
}
.consent-row input[type="checkbox"]{
  width: 16px;
  height: 16px;
  margin-top: 2px;
  accent-color: var(--seal-red, #B33A3A);
  flex-shrink: 0;
  cursor: pointer;
}
.consent-row em{
  font-style: normal;
  color: var(--seal-red, #B33A3A);
  font-weight: 600;
}

.analyze-btn{
  width: 100%;
  padding: 16px;
  margin-top: 14px;
  background: linear-gradient(180deg, var(--seal-red) 0%, #952b1e 100%);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(179,58,58,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.2s;
}
.analyze-btn:disabled{
  opacity: 0.4;
  cursor: not-allowed;
}
.analyze-btn:not(:disabled):hover{ transform: translateY(-1px); }
.analyze-btn:not(:disabled):active{ transform: translateY(1px); }

.privacy-note{
  margin-top: 12px;
  text-align: center;
  font-size: 11.5px;
  color: var(--text-soft);
}
.privacy-note .check{ color: var(--wood); font-weight: 700; margin-right: 4px; }

.error-box{
  display: none;
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(179,58,58,0.1);
  border: 1px solid var(--seal-red);
  border-radius: 4px;
  color: var(--seal-red);
  font-size: 12px;
}
.error-box.show{ display: block; }

/* Loading */
.loading-box{
  display: none;
  text-align: center;
  padding: 20px 0;
}
.loading-box.show{ display: block; }
.taiji{
  width: 60px; height: 60px;
  margin: 0 auto 16px;
  animation: rotate 3s linear infinite;
}
@keyframes rotate{ to{ transform: rotate(360deg); } }
.loading-msg{
  font-family: var(--serif-kr);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 12px;
}
.progress-track{
  height: 4px;
  background: var(--line);
  border-radius: 100px;
  overflow: hidden;
  margin-bottom: 20px;
}
.progress-fill{
  height: 100%;
  width: 0;
  background: linear-gradient(to right, var(--gold), var(--seal-red));
  transition: width 0.35s ease;
}
.step-list{
  display: flex; flex-direction: column; gap: 8px;
  text-align: left;
  padding: 0 8px;
}
.step-item{
  display: flex; align-items: center; gap: 10px;
  font-size: 12.5px;
  color: var(--text-mute);
  padding: 6px 0;
  transition: color 0.2s;
}
.step-item .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line);
  transition: background 0.2s, transform 0.2s;
}
.step-item.active{ color: var(--text-dark); font-weight: 600; }
.step-item.active .dot{ background: var(--gold); transform: scale(1.4); box-shadow: 0 0 8px var(--gold); }
.step-item.done{ color: var(--text-soft); }
.step-item.done .dot{ background: var(--wood); }
.step-item .step-pct{
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-mute);
}

/* Result */
.result-box{
  display: none;
  animation: fadeIn 0.4s ease;
}
.result-box.show{ display: block; }
.scroll-frame{
  background: linear-gradient(180deg, #fdfaf0, var(--paper));
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 24px 20px;
  position: relative;
}
.scroll-frame::before,
.scroll-frame::after{
  content: ''; position: absolute;
  left: -6px; right: -6px;
  height: 12px;
  background: linear-gradient(90deg, var(--seal-red) 0%, #952b1e 50%, var(--seal-red) 100%);
  border-radius: 2px;
}
.scroll-frame::before{ top: -8px; }
.scroll-frame::after{ bottom: -8px; }
.result-head{
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px dashed var(--gold);
}
.result-head .cn{
  display: block;
  font-family: var(--serif-han);
  font-size: 18px;
  color: var(--seal-red);
  letter-spacing: 0.32em;
  font-weight: 500;
}
.result-head .en{
  display: block;
  font-size: 10px;
  color: var(--text-soft);
  letter-spacing: 0.24em;
  margin-top: 4px;
}
.result-body{
  font-family: var(--serif-kr);
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-dark);
  white-space: pre-wrap;
  padding: 0 4px;
}
.result-seal{
  text-align: right;
  margin-top: 16px;
}
.result-seal svg{
  width: 44px; height: 44px;
  opacity: 0.9;
  transform: rotate(-4deg);
}
.result-disclaimer{
  margin-top: 14px;
  font-size: 11px;
  color: var(--text-soft);
  text-align: center;
  line-height: 1.7;
}
.retry-btn{
  display: block;
  margin: 18px auto 0;
  padding: 10px 24px;
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  border-radius: 100px;
  transition: background 0.2s, color 0.2s;
}
.retry-btn:hover{
  background: var(--gold);
  color: var(--ivory);
}

/* ============================================================
   3-line preview gate (셀카 · 사주 공용) — 무료 3줄 / 잠금 / 결제
   ============================================================ */
.preview-teaser{
  margin-top: 12px;
  padding: 16px 18px 18px;
  background: linear-gradient(180deg, rgba(232,199,126,0.06), rgba(232,199,126,0.02));
  border: 1px solid rgba(184,137,61,0.28);
  border-radius: 10px;
  position: relative;
}
.preview-teaser::before{
  content: '';
  position: absolute; top: 0; left: 18px;
  width: 26px; height: 2px;
  background: var(--gold-bright);
  transform: translateY(-1px);
}
.teaser-label{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.tl-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 8px var(--gold-bright);
  animation: tlPulse 2s ease-in-out infinite;
}
@keyframes tlPulse{
  0%,100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.5; transform: scale(0.8); }
}
.teaser-body{
  font-family: var(--serif-kr);
  font-size: 15px;
  line-height: 1.85;
  color: var(--text-dark);
  white-space: pre-line;
  min-height: 60px;
}
.teaser-body:empty::before{
  content: '미리보기를 준비 중입니다…';
  color: var(--text-mute);
  font-style: italic;
}

/* Locked full report gate */
.result-gate{
  margin-top: 18px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #FDFAF1;
}
.result-gate.unlocked{ display: none; }
.gate-lines{
  padding: 20px 22px 8px;
  position: relative;
  filter: blur(5px);
  opacity: 0.55;
  pointer-events: none;
  user-select: none;
}
.gate-lines .gline{
  height: 12px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--text-soft), var(--text-mute));
  margin-bottom: 12px;
  opacity: 0.55;
}
.gate-lines .w90{ width: 90%; }
.gate-lines .w85{ width: 85%; }
.gate-lines .w80{ width: 80%; }
.gate-lines .w70{ width: 70%; }
.gate-lines .w60{ width: 60%; }
.gate-lines .w50{ width: 50%; }
.gate-cta{
  position: relative;
  padding: 18px 20px 22px;
  background: linear-gradient(180deg, rgba(253,250,241,0) 0%, #FDFAF1 32%);
  margin-top: -30px;
  text-align: center;
}
.gate-title{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--serif-kr);
  font-size: 15px;
  color: var(--text-dark);
  margin-bottom: 10px;
}
.gate-title b{ color: var(--seal-red); font-weight: 700; }
.gate-lock{
  width: 16px; height: 16px;
  color: var(--gold);
}
.gate-price{
  display: flex; align-items: baseline; justify-content: center; gap: 6px;
  margin-bottom: 14px;
}
.gp-num{
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--text-dark);
  letter-spacing: -0.02em;
}
.gp-unit{
  font-size: 14px; color: var(--text);
  margin-right: 6px;
}
.gp-tag{
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-mute);
  padding: 3px 8px;
  background: rgba(184,137,61,0.10);
  border-radius: 100px;
  letter-spacing: 0.03em;
}
.pay-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
  color: #1A1520;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  border: 1px solid var(--gold);
  border-radius: 100px;
  box-shadow: var(--shadow-gold);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s;
}
.pay-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 32px rgba(184,137,61,0.42), inset 0 1px 0 rgba(255,255,255,0.4); }
.pay-btn:active{ transform: translateY(0); }
.pay-btn svg{ width: 16px; height: 16px; }
.gate-guarantee{
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.02em;
}
.gate-guarantee .sep{ margin: 0 6px; opacity: 0.5; }

/* Full report body (숨김 상태) */
.result-body.full{
  display: none;
  margin-top: 20px;
  font-family: var(--serif-kr);
  font-size: 14.5px;
  line-height: 1.9;
  color: var(--text-dark);
  white-space: pre-line;
  padding-top: 20px;
  border-top: 1px dashed var(--line);
}
.result-body.full.unlocked{
  display: block;
  animation: unlockFade 0.6s ease-out;
}
@keyframes unlockFade{
  from{ opacity: 0; transform: translateY(8px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* ============================================================
   SAJU (정통사주) INPUT MODAL
   ============================================================ */
.saju-lead{
  font-family: var(--serif-kr);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px dashed var(--line);
}
.saju-lead b{ color: var(--gold); font-weight: 700; }

.saju-form{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sf-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.sf-field{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sf-label{
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-soft);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}
.sf-label .req{ color: var(--seal-red); }
.sf-label .opt{
  font-style: normal;
  color: var(--text-mute);
  font-weight: 400;
  margin-left: 4px;
  letter-spacing: 0;
  text-transform: none;
  font-size: 10px;
}
.sf-field input[type="text"],
.sf-field input[type="date"],
.sf-field input[type="time"],
.sf-field select{
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--text-dark);
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  font-weight: 500;
}
.sf-field input:focus,
.sf-field select:focus{
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,137,61,0.12);
}
.sf-gender{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sf-gender label{
  cursor: pointer;
  position: relative;
}
.sf-gender input{
  position: absolute; opacity: 0; pointer-events: none;
}
.sf-gender span{
  display: flex; align-items: center; justify-content: center;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: var(--serif-han);
  font-size: 16px;
  color: var(--text);
  transition: all 0.15s;
}
.sf-gender input:checked + span{
  border-color: var(--gold);
  background: rgba(184,137,61,0.08);
  color: var(--gold);
  font-weight: 700;
}
.sf-time-unsure label{
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  color: var(--text-soft);
  cursor: pointer;
}
.sf-time-unsure input{ accent-color: var(--gold); }
.sf-notice{
  display: flex; align-items: flex-start; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-mute);
  padding: 8px 10px;
  background: rgba(184,137,61,0.05);
  border-left: 2px solid var(--gold);
  border-radius: 2px;
  letter-spacing: 0.02em;
}
.saju-submit-btn{
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  margin-top: 8px;
  background: linear-gradient(180deg, var(--indigo-3), var(--indigo-2));
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
  border: 1px solid var(--indigo-2);
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(21,11,46,0.25);
  transition: transform 0.15s, box-shadow 0.2s;
}
.saju-submit-btn:hover{ transform: translateY(-1px); box-shadow: 0 12px 28px rgba(21,11,46,0.35); }
.saju-submit-btn svg{ width: 16px; height: 16px; }

/* SAJU calc box */
.saju-calc-box{
  display: none;
  margin-top: 10px;
}
.saju-calc-box.show{ display: block; animation: fadeIn 0.3s; }
.saju-calc-head{
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.saju-calc-head .cn{
  font-family: var(--serif-han);
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 0.15em;
}
.saju-calc-head .en{
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.14em;
}
.saju-calc-body{
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--text);
  line-height: 2.1;
}
.scl{
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 10px;
  align-items: center;
  opacity: 0.3;
  transition: opacity 0.3s;
  padding: 2px 0;
}
.scl.on{ opacity: 1; }
.scl .cok{
  color: var(--gold);
  font-weight: 700;
}
.scl.on .cok::before{
  content: '';
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
  animation: sclDot 0.4s ease-out;
}
.scl.on .cok{ font-size: 0; }
@keyframes sclDot{
  from{ transform: scale(0); }
  to{ transform: scale(1); }
}
.scl .sv{
  color: var(--gold-bright);
  font-weight: 600;
  background: rgba(184,137,61,0.08);
  padding: 2px 8px;
  border-radius: 100px;
  font-family: var(--serif-han);
  font-size: 13px;
}
.scl.on .sv{
  background: rgba(184,137,61,0.16);
  color: var(--indigo-2);
}

/* SAJU mini chart */
.saju-result-box{
  display: none;
}
.saju-result-box.show{ display: block; animation: fadeIn 0.4s; }
.sr-scroll{
  position: relative;
  background: linear-gradient(180deg, #FDFAF1 0%, #F9F3E3 100%);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px 20px 24px;
  box-shadow: var(--shadow-md);
}
.sr-head{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 16px;
}
.sr-head .cn{
  font-family: var(--serif-han);
  font-size: 15px;
  color: var(--gold);
  letter-spacing: 0.14em;
  font-weight: 600;
}
.sr-head .en{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-mute);
  letter-spacing: 0.10em;
}
.sr-chart{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 6px;
}
.src-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 6px;
  transition: background 0.2s;
}
.src-col.day{ background: rgba(184,137,61,0.09); }
.src-lb{
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-soft);
  letter-spacing: 0.14em;
}
.src-g, .src-j{
  font-family: var(--serif-han);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1;
}
.src-col.day .src-g{ color: var(--gold); }

/* ============================================================
   PAYMENT MOCK MODAL
   ============================================================ */
.pay-overlay .modal-sheet{
  max-width: 460px;
}
.pay-summary{
  padding: 16px 18px;
  background: #F9F3E3;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 18px;
}
.ps-row{
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 13px;
  color: var(--text-soft);
  padding: 4px 0;
}
.ps-row.main{
  padding-bottom: 10px;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--line);
}
.ps-row.main .ps-name{
  font-family: var(--serif-kr);
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
}
.ps-row.main .ps-amount{
  font-family: var(--serif);
  font-size: 15px;
  color: var(--text-dark);
}
.ps-row.main .ps-amount b{
  font-size: 24px;
  font-weight: 700;
  margin-right: 2px;
}
.ps-row .mono{ font-family: var(--mono); font-size: 11px; color: var(--text); }

.pay-methods{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}
.pm-card{
  cursor: pointer;
  position: relative;
}
.pm-card input{
  position: absolute; opacity: 0; pointer-events: none;
}
.pm-body{
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: #fff;
  transition: all 0.15s;
}
.pm-card input:checked + .pm-body{
  border-color: var(--gold);
  background: rgba(184,137,61,0.05);
  box-shadow: 0 0 0 3px rgba(184,137,61,0.10);
}
.pm-logo{
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 18px;
  flex-shrink: 0;
}
.pm-logo.kakao{ background: #FEE500; color: #191919; }
.pm-logo.toss{ background: #0064FF; color: #fff; }
.pm-logo.card{ background: #F0EBDD; color: #333; font-size: 20px; }
.pm-name{
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
}
.pm-note{
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-mute);
  letter-spacing: 0.05em;
}

.pay-agree{
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 12.5px;
  color: var(--text-soft);
  line-height: 1.5;
  margin-bottom: 16px;
  cursor: pointer;
}
.pay-agree input{ accent-color: var(--gold); margin-top: 2px; flex-shrink: 0; }
.pay-agree a{ color: var(--gold); text-decoration: underline; }

.pay-final-btn{
  display: flex; align-items: center; justify-content: space-between;
  width: 100%;
  padding: 15px 22px;
  background: linear-gradient(180deg, var(--seal-red) 0%, var(--seal-red-dark) 100%);
  color: var(--ivory);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(179,58,58,0.28);
  transition: transform 0.15s, box-shadow 0.2s;
}
.pay-final-btn:hover{ transform: translateY(-1px); box-shadow: 0 14px 30px rgba(179,58,58,0.38); }
.pay-final-btn:disabled{ opacity: 0.4; cursor: not-allowed; transform: none; }
.pf-price{
  font-family: var(--serif);
  font-size: 14px;
}
.pf-price b{ font-size: 20px; font-weight: 700; margin-right: 2px; }
.pf-label{
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 700;
}

.pay-mock-badge{
  display: flex; align-items: center; gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(232,199,126,0.12);
  border: 1px dashed var(--gold);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text);
  letter-spacing: 0.02em;
}
.pay-mock-badge .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 6px var(--gold-bright);
  flex-shrink: 0;
  animation: tlPulse 1.6s ease-in-out infinite;
}
.pay-mock-badge b{ color: var(--seal-red); font-weight: 700; }

.pay-processing, .pay-success{
  display: none;
  text-align: center;
  padding: 30px 20px 20px;
}
.pay-processing.show, .pay-success.show{ display: block; animation: fadeIn 0.3s; }
.pay-processing .taiji{
  width: 56px; height: 56px;
  margin: 0 auto 16px;
  animation: taijiSpin 3s linear infinite;
  display: block;
}
@keyframes taijiSpin{ to{ transform: rotate(360deg); } }
.pp-msg{
  font-family: var(--serif-kr);
  font-size: 14px;
  color: var(--text-dark);
  margin-bottom: 16px;
}
.pay-success .pk-seal{
  margin-bottom: 14px;
}
.pay-success .pk-seal svg{
  width: 60px; height: 60px;
  transform: rotate(-6deg);
  filter: drop-shadow(0 4px 12px rgba(179,58,58,0.3));
  animation: sealStamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes sealStamp{
  0%{ transform: scale(3) rotate(0deg); opacity: 0; }
  60%{ transform: scale(0.9) rotate(-8deg); opacity: 1; }
  100%{ transform: scale(1) rotate(-6deg); opacity: 1; }
}
.pk-title{
  font-family: var(--serif-kr);
  font-size: 20px;
  font-weight: 700;
  color: var(--seal-red);
  margin-bottom: 6px;
}
.pk-line{
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--text-soft);
  letter-spacing: 0.06em;
}

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* ============================================================
   TODAY'S FORTUNE · 오늘의 운세 위젯
   ============================================================ */
.today-fortune{
  position: relative;
  padding: 88px 24px 96px;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, var(--indigo-2) 0%, var(--indigo) 40%, var(--ink) 100%);
  color: var(--ivory);
  overflow: hidden;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.today-fortune::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(232,199,126,0.4), transparent 60%),
    radial-gradient(1px 1px at 82% 32%, rgba(232,199,126,0.35), transparent 60%),
    radial-gradient(1px 1px at 24% 78%, rgba(251,247,236,0.3), transparent 60%),
    radial-gradient(1.4px 1.4px at 68% 88%, rgba(232,199,126,0.5), transparent 60%);
  pointer-events: none;
  opacity: 0.7;
}
.tf-frame{
  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px 32px 44px;
  border: 1px solid rgba(232,199,126,0.28);
  border-radius: 2px;
  background:
    linear-gradient(180deg, rgba(21,11,46,0.55) 0%, rgba(10,6,20,0.72) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    inset 0 0 0 1px rgba(232,199,126,0.06),
    0 24px 60px rgba(0,0,0,0.4);
}
.tf-frame::before,
.tf-frame::after{
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,199,126,0.32), transparent);
}
.tf-frame::before{ top: 10px; }
.tf-frame::after{ bottom: 10px; }

.tf-corner{
  position: absolute;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-family: var(--serif-han);
  font-size: 16px;
  color: var(--gold-bright);
  opacity: 0.55;
  background: rgba(21,11,46,0.85);
  border: 1px solid rgba(232,199,126,0.35);
}
.tf-corner.tl{ top: -1px; left: -1px; border-right: none; border-bottom: none; }
.tf-corner.tr{ top: -1px; right: -1px; border-left: none; border-bottom: none; }
.tf-corner.bl{ bottom: -1px; left: -1px; border-right: none; border-top: none; }
.tf-corner.br{ bottom: -1px; right: -1px; border-left: none; border-top: none; color: var(--seal-red); opacity: 0.7; }

/* head */
.tf-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px dashed rgba(232,199,126,0.22);
  margin-bottom: 28px;
}
.tf-date{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  font-family: var(--serif-han);
}
.tf-cn{
  color: var(--gold-bright);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 3px;
}
.tf-sep{ color: rgba(232,199,126,0.4); }
.tf-ymd{
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ivory);
  letter-spacing: 1.5px;
  opacity: 0.85;
}
.tf-dow{
  font-family: var(--serif-han);
  color: var(--seal-red);
  font-size: 15px;
  padding: 2px 8px;
  border: 1px solid var(--seal-red);
  background: rgba(179,58,58,0.12);
}
.tf-ilzin{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  text-align: right;
}
.tf-ilzin-lb{
  font-family: var(--serif-kr);
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(232,199,126,0.7);
  text-transform: none;
}
.tf-ilzin-glyph{
  font-family: var(--serif-han);
  font-size: 26px;
  font-weight: 600;
  color: var(--gold-bright);
  letter-spacing: 6px;
}
.tf-ilzin-name{
  font-family: var(--serif-kr);
  font-size: 12px;
  color: var(--ivory);
  opacity: 0.75;
  letter-spacing: 1px;
}

/* title */
.tf-title{
  font-family: var(--serif-kr);
  font-weight: 600;
  font-size: clamp(24px, 4.6vw, 32px);
  line-height: 1.3;
  color: var(--ivory);
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tf-title-cn{
  font-family: var(--serif-han);
  font-size: 12px;
  letter-spacing: 8px;
  color: var(--gold-bright);
  opacity: 0.7;
  text-transform: none;
  font-weight: 400;
}
.tf-accent{
  color: var(--gold-bright);
  font-style: italic;
}
.tf-lead{
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(251,247,236,0.72);
  margin-bottom: 32px;
  max-width: 520px;
}
.tf-lead b{ color: var(--gold-bright); font-weight: 500; }

/* cards */
.tf-cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 32px;
}
.tf-card{
  position: relative;
  padding: 20px 16px 22px;
  border: 1px solid rgba(232,199,126,0.22);
  background:
    linear-gradient(180deg, rgba(251,247,236,0.04) 0%, rgba(251,247,236,0.01) 100%);
  border-radius: 1px;
  overflow: hidden;
  transition: transform .3s, border-color .3s, background .3s;
}
.tf-card:hover{
  transform: translateY(-2px);
  border-color: rgba(232,199,126,0.5);
  background: linear-gradient(180deg, rgba(251,247,236,0.07) 0%, rgba(251,247,236,0.02) 100%);
}
.tf-card::before{
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold-bright), transparent);
  opacity: 0.5;
}
.tf-card-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.tf-card-idx{
  font-family: var(--serif-han);
  font-size: 13px;
  color: var(--seal-red);
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 1px solid var(--seal-red);
  background: rgba(179,58,58,0.14);
}
.tf-card-lb{
  font-family: var(--serif-kr);
  font-size: 11.5px;
  letter-spacing: 3px;
  color: var(--gold-bright);
  opacity: 0.85;
}
.tf-card-star{
  color: var(--gold-bright);
  font-size: 15px;
  letter-spacing: 4px;
  margin-bottom: 12px;
  font-family: var(--mono);
  line-height: 1;
}
.tf-card-star .off{ color: rgba(232,199,126,0.22); }
.tf-card-glyph{
  font-family: var(--serif-han);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 12px;
  opacity: 0.9;
}
.tf-card[data-glyph="木"] .tf-card-glyph{ color: var(--wood); }
.tf-card[data-glyph="火"] .tf-card-glyph{ color: #E86A5C; }
.tf-card[data-glyph="土"] .tf-card-glyph{ color: #D8A66E; }
.tf-card[data-glyph="金"] .tf-card-glyph{ color: #E8C77E; }
.tf-card[data-glyph="水"] .tf-card-glyph{ color: #7BA0D6; }
.tf-card-body{
  font-family: var(--serif-kr);
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--ivory);
  opacity: 0.85;
  word-break: keep-all;
}

/* triplet: 길방 · 색 · 시간 */
.tf-triplet{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  padding: 22px 0;
  margin-bottom: 32px;
  border-top: 1px dashed rgba(232,199,126,0.2);
  border-bottom: 1px dashed rgba(232,199,126,0.2);
}
.tf-tri-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  padding: 0 12px;
  border-right: 1px solid rgba(232,199,126,0.14);
}
.tf-tri-item:last-child{ border-right: none; }
.tf-tri-lb{
  font-family: var(--serif-kr);
  font-size: 10.5px;
  letter-spacing: 3px;
  color: rgba(232,199,126,0.72);
}
.tf-tri-val{
  font-family: var(--serif-han);
  font-size: 22px;
  font-weight: 600;
  color: var(--ivory);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  letter-spacing: 2px;
}
.tf-color-dot{
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1px solid rgba(232,199,126,0.5);
  box-shadow: 0 0 12px currentColor;
  display: inline-block;
}
.tf-tri-sub{
  font-family: var(--sans);
  font-size: 11px;
  color: rgba(251,247,236,0.55);
  letter-spacing: 1px;
}

/* CTA */
.tf-cta-row{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.tf-cta{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 28px;
  background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-bright) 50%, var(--gold-2) 100%);
  color: var(--ink);
  font-family: var(--serif-kr);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.5px;
  border-radius: 2px;
  box-shadow: 0 8px 24px rgba(184,137,61,0.35), inset 0 1px 0 rgba(255,255,255,0.5);
  transition: transform .2s, box-shadow .2s;
}
.tf-cta:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(184,137,61,0.5), inset 0 1px 0 rgba(255,255,255,0.6);
}
.tf-cta svg{ width: 16px; height: 16px; }
.tf-note{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  color: rgba(251,247,236,0.5);
  letter-spacing: 0.5px;
}
.tf-note-dot{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 6px var(--gold-bright);
  animation: tf-pulse 2s ease-in-out infinite;
}
.tf-note b{ color: var(--gold-bright); font-weight: 500; }

@keyframes tf-pulse{
  0%, 100%{ opacity: 0.4; }
  50%{ opacity: 1; }
}

/* responsive */
@media (max-width: 640px){
  .today-fortune{ padding: 60px 16px 72px; }
  .tf-frame{ padding: 32px 20px 32px; }
  .tf-head{ flex-direction: column; gap: 14px; }
  .tf-ilzin{ align-items: flex-start; text-align: left; }
  .tf-cards{ grid-template-columns: 1fr; gap: 12px; }
  .tf-card-glyph{ font-size: 38px; margin-bottom: 8px; }
  .tf-triplet{ grid-template-columns: 1fr; gap: 16px; padding: 20px 0; }
  .tf-tri-item{
    border-right: none;
    border-bottom: 1px dashed rgba(232,199,126,0.14);
    padding-bottom: 16px;
  }
  .tf-tri-item:last-child{ border-bottom: none; padding-bottom: 0; }
  .tf-tri-val{ font-size: 20px; }
  .tf-cta{ width: 100%; justify-content: center; }
  .tf-corner{ width: 24px; height: 24px; font-size: 13px; }
}


/* ============================================================
   HERO NAV — RIGHT SIDE (kakao login)
   ============================================================ */
.hero-nav-right{
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.kakao-login-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px 8px 11px;
  background: #FEE500;
  color: #191600;
  /* 카카오 브랜드는 산세리프. 명조로 렌더되면 어색해 보임 */
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: -0.01em;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(254,229,0,0.28);
  transition: transform .2s, box-shadow .2s;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.kakao-login-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(254,229,0,0.4);
}
.kakao-login-btn .kkb-icon{
  display: inline-grid;
  place-items: center;
  width: 16px; height: 16px;
}
.kakao-login-btn .kkb-icon svg{ width: 16px; height: 16px; display:block; }

/* logged-in badge */
.user-badge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  background: rgba(232,199,126,0.12);
  border: 1px solid rgba(232,199,126,0.35);
  border-radius: 999px;
  color: var(--ivory);
  font-family: var(--serif-kr);
  font-size: 12.5px;
}
.user-badge .ub-avatar{
  width: 24px; height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold));
  color: var(--ink);
  display: grid; place-items: center;
  font-family: var(--serif-han);
  font-weight: 700;
  font-size: 13px;
}
.user-badge:hover{ background: rgba(232,199,126,0.2); }

@media (max-width: 640px){
  .hero-nav-right{ gap: 6px; }
  .kakao-login-btn{ padding: 6px 10px; font-size: 11px; }
  .kakao-login-btn .kkb-icon{ width: 14px; height: 14px; }
  .kakao-login-btn .kkb-icon svg{ width: 14px; height: 14px; }
  .nav-tag{ font-size: 10px !important; padding: 4px 8px !important; }
}

/* ============================================================
   LIVE CONSULT · 실시간 상담 플로팅 탭
   ============================================================ */
.live-consult{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 900;
  font-family: var(--serif-kr);
}

/* FAB (접힌 상태) */
.lc-fab{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 62px;
  background: linear-gradient(180deg, #241546 0%, #150B2E 100%);
  color: var(--ivory);
  border: 1px solid rgba(232,199,126,0.5);
  border-radius: 999px;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.42),
    0 0 24px rgba(232,199,126,0.18),
    inset 0 1px 0 rgba(232,199,126,0.25);
  overflow: visible;
  transition: transform .2s, box-shadow .2s;
}
.lc-fab:hover{
  transform: translateY(-2px);
  box-shadow:
    0 16px 40px rgba(0,0,0,0.5),
    0 0 32px rgba(232,199,126,0.3),
    inset 0 1px 0 rgba(232,199,126,0.3);
}
.lc-fab-cn{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--serif-han);
  font-size: 15px;
  color: var(--gold-bright);
  letter-spacing: 1px;
  z-index: 3;
  pointer-events: none;
  text-shadow: 0 0 8px rgba(232,199,126,0.5);
}
.lc-fab-label{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}
.lc-fab-t{
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ivory);
  letter-spacing: 0.3px;
}
.lc-fab-live{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  color: var(--gold-bright);
  letter-spacing: 0.8px;
  opacity: 0.9;
}
.lc-live-dot{
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #4ADE80;
  box-shadow: 0 0 6px #4ADE80;
  animation: lc-live-blink 1.6s ease-in-out infinite;
}
@keyframes lc-live-blink{
  0%, 100%{ opacity: 1; transform: scale(1); }
  50%{ opacity: 0.5; transform: scale(0.85); }
}

/* Flames wrap (촛불) */
.lc-flames{
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  pointer-events: none;
  z-index: 2;
}
/* base halo */
.lc-flames::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232,150,50,0.35) 0%, rgba(232,150,50,0.15) 40%, transparent 70%);
  animation: lc-halo 3s ease-in-out infinite;
}
@keyframes lc-halo{
  0%, 100%{ opacity: 0.6; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.15); }
}

/* individual flames */
.flame{
  position: absolute;
  left: 50%; bottom: 30%;
  width: 10px; height: 18px;
  border-radius: 50% 50% 40% 40% / 60% 60% 40% 40%;
  transform-origin: 50% 100%;
  filter: blur(1px);
  mix-blend-mode: screen;
}
.flame.f1{
  background: radial-gradient(ellipse at 50% 100%, #FFE29A 0%, #FFB74D 35%, #E86A3C 70%, transparent 100%);
  transform: translate(-50%, 0) scale(1);
  animation: flame-flicker-a 1.3s ease-in-out infinite;
  z-index: 3;
}
.flame.f2{
  background: radial-gradient(ellipse at 50% 100%, #FFEFBF 0%, #FFC85E 40%, #E68A2B 75%, transparent 100%);
  width: 8px; height: 14px;
  transform: translate(-70%, 0) scale(0.9);
  animation: flame-flicker-b 1.1s ease-in-out infinite;
  animation-delay: -0.3s;
  z-index: 2;
  opacity: 0.85;
}
.flame.f3{
  background: radial-gradient(ellipse at 50% 100%, #FFF3D0 0%, #FFCF70 40%, #E88A38 75%, transparent 100%);
  width: 7px; height: 13px;
  transform: translate(-30%, 0) scale(0.85);
  animation: flame-flicker-c 1.5s ease-in-out infinite;
  animation-delay: -0.7s;
  z-index: 2;
  opacity: 0.8;
}
.flame.f4{
  background: radial-gradient(ellipse at 50% 100%, #FFE29A 0%, #E88A38 40%, transparent 90%);
  width: 12px; height: 20px;
  transform: translate(-50%, 0) scale(1.1);
  animation: flame-flicker-a 1.7s ease-in-out infinite;
  animation-delay: -0.4s;
  filter: blur(3px);
  z-index: 1;
  opacity: 0.5;
}
.flame-core{
  position: absolute;
  left: 50%; bottom: 32%;
  width: 4px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF6D6 0%, #FFD980 60%, transparent 100%);
  transform: translate(-50%, 0);
  animation: flame-core-flicker 0.8s ease-in-out infinite;
  z-index: 4;
  filter: blur(0.5px);
}
@keyframes flame-flicker-a{
  0%, 100%{ transform: translate(-50%, 0) scale(1, 1); opacity: 0.95; }
  25%{ transform: translate(-52%, -2px) scale(0.96, 1.08); opacity: 1; }
  50%{ transform: translate(-48%, -1px) scale(1.02, 0.94); opacity: 0.9; }
  75%{ transform: translate(-53%, -2px) scale(0.94, 1.06); opacity: 1; }
}
@keyframes flame-flicker-b{
  0%, 100%{ transform: translate(-70%, 0) scale(0.9, 0.9); opacity: 0.85; }
  33%{ transform: translate(-72%, -3px) scale(0.86, 1.02); opacity: 1; }
  66%{ transform: translate(-68%, -1px) scale(0.94, 0.86); opacity: 0.75; }
}
@keyframes flame-flicker-c{
  0%, 100%{ transform: translate(-30%, 0) scale(0.85, 0.85); opacity: 0.8; }
  40%{ transform: translate(-28%, -2px) scale(0.9, 0.94); opacity: 0.95; }
  80%{ transform: translate(-32%, -1px) scale(0.8, 0.8); opacity: 0.72; }
}
@keyframes flame-core-flicker{
  0%, 100%{ transform: translate(-50%, 0) scale(1); opacity: 0.95; }
  50%{ transform: translate(-50%, -2px) scale(0.85); opacity: 1; }
}

/* embers (튀는 불티) */
.lc-ember{
  position: absolute;
  width: 2px; height: 2px;
  border-radius: 50%;
  background: #FFD980;
  box-shadow: 0 0 4px #FFB74D;
  left: 50%; top: 30%;
  opacity: 0;
  pointer-events: none;
}
.lc-ember.e1{ animation: ember-rise 2.4s ease-out infinite; animation-delay: 0s; }
.lc-ember.e2{ animation: ember-rise 2.8s ease-out infinite; animation-delay: -0.9s; }
.lc-ember.e3{ animation: ember-rise 3.2s ease-out infinite; animation-delay: -1.7s; }
@keyframes ember-rise{
  0%{ opacity: 0; transform: translate(-50%, 0) scale(0.6); }
  20%{ opacity: 1; }
  100%{
    opacity: 0;
    transform: translate(calc(-50% + var(--drift, 8px)), -34px) scale(0.3);
  }
}
.lc-ember.e1{ --drift: -6px; }
.lc-ember.e2{ --drift: 10px; }
.lc-ember.e3{ --drift: -12px; }

/* Panel (펼친 상태) */
.lc-panel{
  position: absolute;
  right: 0;
  bottom: calc(100% + 14px);
  width: 380px;
  max-width: calc(100vw - 40px);
  background:
    linear-gradient(180deg, #241546 0%, #150B2E 100%);
  border: 1px solid rgba(232,199,126,0.4);
  border-radius: 4px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  color: var(--ivory);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px) scale(0.98);
  transform-origin: bottom right;
  transition: opacity .28s ease, transform .28s ease, visibility .28s;
  overflow: hidden;
}
.lc-panel.open{
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.lc-panel::before{
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(232,199,126,0.12);
  pointer-events: none;
}

.lc-panel-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 22px 22px 16px;
  border-bottom: 1px dashed rgba(232,199,126,0.2);
}
.lc-title-cn{
  font-family: var(--serif-han);
  font-size: 10.5px;
  letter-spacing: 6px;
  color: var(--gold-bright);
  opacity: 0.75;
  margin-bottom: 4px;
}
.lc-title{
  font-family: var(--serif-kr);
  font-weight: 600;
  font-size: 18px;
  color: var(--ivory);
  letter-spacing: 0.5px;
}
.lc-close{
  color: rgba(251,247,236,0.6);
  font-size: 16px;
  padding: 6px 10px;
  border-radius: 4px;
  transition: color .2s, background .2s;
}
.lc-close:hover{ color: var(--ivory); background: rgba(232,199,126,0.1); }

.lc-master-list{
  padding: 12px 14px;
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,199,126,0.3) transparent;
}
.lc-master-list::-webkit-scrollbar{ width: 4px; }
.lc-master-list::-webkit-scrollbar-thumb{ background: rgba(232,199,126,0.3); border-radius: 2px; }
.lc-master{
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 12px;
  padding: 14px 10px;
  border-radius: 3px;
  transition: background .2s;
}
.lc-master:hover{
  background: rgba(232,199,126,0.06);
}
.lc-master + .lc-master{
  border-top: 1px solid rgba(232,199,126,0.1);
}
.lc-master-av{
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(232,199,126,0.2), rgba(184,137,61,0.4));
  display: grid; place-items: center;
  border: 1px solid rgba(232,199,126,0.35);
}
.lc-av-cn{
  font-family: var(--serif-han);
  font-size: 20px;
  font-weight: 600;
  color: var(--gold-bright);
}
.lc-av-status{
  position: absolute;
  right: -2px; bottom: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  border: 2px solid #150B2E;
}
.lc-av-status.online{
  background: #4ADE80;
  box-shadow: 0 0 6px #4ADE80;
  animation: lc-live-blink 1.6s ease-in-out infinite;
}
.lc-av-status.busy{ background: #F87171; }
.lc-master-info{
  min-width: 0;
}
.lc-master-name{
  font-family: var(--serif-kr);
  font-weight: 600;
  font-size: 14px;
  color: var(--ivory);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.lc-master-jung{
  font-family: var(--serif-han);
  font-size: 11px;
  color: var(--gold-bright);
  opacity: 0.8;
  font-weight: 400;
}
.lc-badge-verify{
  font-size: 9.5px;
  font-family: var(--sans);
  color: var(--seal-red);
  border: 1px solid var(--seal-red);
  background: rgba(179,58,58,0.18);
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.3px;
  font-weight: 500;
}
.lc-master-tags{
  font-size: 11.5px;
  color: rgba(251,247,236,0.6);
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}
.lc-master-tags .sep{ opacity: 0.4; margin: 0 2px; }
.lc-master-bio{
  font-size: 11.5px;
  color: rgba(251,247,236,0.5);
  font-style: italic;
  line-height: 1.4;
  padding-left: 6px;
  border-left: 2px solid rgba(232,199,126,0.25);
}
.lc-master-cta{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 78px;
}
.lc-price{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--gold-bright);
  font-weight: 500;
}
.lc-wait{
  font-size: 10.5px;
  color: rgba(251,247,236,0.55);
}
.lc-wait b{ color: var(--ivory); font-weight: 600; }
.lc-wait.busy{ color: #F87171; }
.lc-connect{
  margin-top: 4px;
  padding: 6px 12px;
  background: var(--seal-red);
  color: var(--ivory);
  font-family: var(--serif-kr);
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 2px;
  letter-spacing: 0.5px;
  transition: background .2s;
}
.lc-connect:hover{ background: #C84545; }
.lc-connect:disabled{
  background: rgba(120,120,140,0.4);
  cursor: not-allowed;
}

.lc-notice{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  margin: 0 14px;
  font-size: 11.5px;
  color: rgba(251,247,236,0.75);
  background: rgba(232,199,126,0.06);
  border: 1px dashed rgba(232,199,126,0.2);
  border-radius: 2px;
  letter-spacing: 0.2px;
}
.lc-notice-dot{
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-bright);
  flex-shrink: 0;
}
.lc-notice b{ color: var(--gold-bright); font-weight: 600; }

.lc-footer{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px 18px;
  font-size: 11.5px;
}
.lc-more{
  color: var(--gold-bright);
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: color .2s;
}
.lc-more:hover{ color: var(--ivory); }
.lc-more span{ margin-left: 4px; }
.lc-hours{
  font-family: var(--mono);
  color: rgba(251,247,236,0.5);
}

/* mobile responsive */
@media (max-width: 640px){
  .live-consult{ right: 12px; bottom: 12px; }
  .lc-fab-label{ display: none; }
  .lc-fab{
    padding: 0;
    width: 60px; height: 60px;
    border-radius: 50%;
    justify-content: center;
    gap: 0;
  }
  .lc-fab-cn{
    position: absolute;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    text-shadow: 0 0 6px rgba(232,199,126,0.6);
  }
  .lc-flames{
    left: 50%;
    top: 32%;
    transform: translate(-50%, -50%);
    width: 34px; height: 34px;
  }
  .lc-panel{
    width: calc(100vw - 24px);
    right: 0;
  }
}

/* ============================================================
   KAKAO LOGIN MODAL
   ============================================================ */
.kakao-overlay .kakao-sheet{
  max-width: 440px;
}
.kk-lead{
  padding: 4px 0 22px;
  font-family: var(--serif-kr);
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-soft);
}
.kk-lead b{ color: var(--text-dark); font-weight: 600; }
.kk-benefits{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 0 24px;
  border-top: 1px dashed var(--line);
  border-bottom: 1px dashed var(--line);
  margin-bottom: 22px;
}
.kk-benefit{
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.kkb-glyph{
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--gold);
  background: rgba(184,137,61,0.08);
  color: var(--gold);
  font-family: var(--serif-han);
  font-weight: 600;
  font-size: 15px;
  border-radius: 2px;
}
.kkb-t{
  font-family: var(--serif-kr);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dark);
  margin-bottom: 3px;
}
.kkb-d{
  font-size: 12.5px;
  color: var(--text-soft);
}
.kakao-big-btn{
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px;
  background: #FEE500;
  color: #191600;
  /* 카카오 브랜드는 산세리프 */
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: -0.01em;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(254,229,0,0.35);
  transition: transform .2s, box-shadow .2s;
}
.kakao-big-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(254,229,0,0.5);
}
.kakao-big-btn:active{ transform: translateY(0); }
.kkbb-icon{ display: inline-grid; place-items: center; width: 22px; height: 22px; }
.kkbb-icon svg{ width: 22px; height: 22px; display:block; }
.kk-alt{
  text-align: center;
  padding: 14px 0 4px;
}
.kk-guest{
  color: var(--text-soft);
  font-family: var(--serif-kr);
  font-size: 13px;
  padding: 8px 12px;
  transition: color .2s;
}
.kk-guest:hover{ color: var(--seal-red); }
.kk-guest span{ margin-left: 4px; }
.kk-note{
  font-size: 11px;
  color: var(--text-mute);
  line-height: 1.6;
  text-align: center;
  padding: 8px 12px 4px;
}
.kk-note a{ color: var(--gold); text-decoration: underline; }

.kk-processing{
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 32px 12px 20px;
}
.kk-processing.active{ display: flex; }
.kk-processing p{
  font-family: var(--serif-kr);
  font-size: 13.5px;
  color: var(--text-soft);
}
.kk-spin{
  width: 36px; height: 36px;
  border: 2.5px solid rgba(0,0,0,0.08);
  border-top-color: #FEE500;
  border-right-color: #FEE500;
  border-radius: 50%;
  animation: kk-spin 0.9s linear infinite;
}
@keyframes kk-spin{
  to{ transform: rotate(360deg); }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .flame, .flame-core, .lc-ember, .lc-live-dot, .lc-flames::before,
  .kk-spin{
    animation: none !important;
  }
}


/* ============================================================
   [v7 append] 3-path cards · Daeun graph · Gunghap modal
   ============================================================ */

/* --- 3-path grid: 홈 진입 3열 카드 --- */
.path-cards.path-cards--3{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px){
  .path-cards.path-cards--3{ grid-template-columns: 1fr; gap: 12px; }
}

/* 3열 안에 들어갈 때 카드 자체를 세로 스택 레이아웃으로 재정의 */
.path-cards--3 .path-card{
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 18px 14px 16px;
  min-height: 200px;
  overflow: hidden;
}
/* 큰 한자 인덱스: 배경 워터마크로 (텍스트를 가리지 않음) */
.path-cards--3 .pc-num{
  position: absolute;
  bottom: 10px; left: 12px;
  writing-mode: horizontal-tb;
  font-size: 44px;
  line-height: 1;
  color: rgba(184,137,61,0.10);
  pointer-events: none;
  z-index: 0;
}
/* 뱃지: 우측 상단, 크기 축소 */
.path-cards--3 .pc-badge{
  top: 10px; right: 10px;
  width: 28px; height: 28px;
  font-size: 14px;
  border-radius: 4px;
  z-index: 2;
}
.path-cards--3 .pc-badge svg{ width: 14px; height: 14px; }
.path-cards--3 .pc-badge.gh .gh-han-a,
.path-cards--3 .pc-badge.gh .gh-han-b{ font-size: 13px; }

/* 본문 영역 */
.path-cards--3 .pc-body{
  position: relative; z-index: 1;
  gap: 8px;
  padding-right: 34px; /* 뱃지 공간 확보 */
  flex: 1 1 auto;
}
.path-cards--3 .pc-t{
  font-size: 15px;
  line-height: 1.4;
}
.path-cards--3 .pc-d{
  font-size: 11.5px;
  line-height: 1.55;
}
.path-cards--3 .pc-d .live{
  font-size: 11px;
  margin-top: 6px;
}

/* 가격/화살표 하단 정렬 */
.path-cards--3 .pc-p{
  position: relative; z-index: 1;
  text-align: left;
  flex-direction: row;
  align-items: baseline;
  gap: 4px;
  margin-top: auto;
}
.path-cards--3 .pcp-num{ font-size: 18px; }
.path-cards--3 .pcp-unit{ font-size: 10px; }
.path-cards--3 .pc-arrow{
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
}
.path-cards--3 .pc-arrow svg{ width: 16px; height: 16px; }

/* 궁합 카드 뱃지 (陰陽 조합) */
.pc-badge.gh{
  background: linear-gradient(135deg, #150B2E 0%, #B33A3A 100%);
  position: relative;
  overflow: hidden;
}
.pc-badge.gh .gh-han-a,
.pc-badge.gh .gh-han-b{
  position: absolute;
  font-family: var(--serif-kr);
  font-weight: 700;
  color: #FBF7EC;
  font-size: 18px;
  line-height: 1;
}
.pc-badge.gh .gh-han-a{ top: 6px; left: 8px; opacity: 0.9; }
.pc-badge.gh .gh-han-b{ bottom: 6px; right: 8px; opacity: 0.9; }

.path-card.c{
  border-color: rgba(179, 58, 58, 0.35);
}
.path-card.c:hover{
  border-color: var(--seal-red);
}
.path-card.c .pc-arrow{ color: var(--seal-red); }
.path-card.c .pc-num{ color: var(--seal-red); opacity: 0.85; }

/* ============================================================
   대운(大運) 시각화
   ============================================================ */
.daeun-panel{
  margin: 24px 0 18px;
  padding: 22px 20px 20px;
  border: 1px solid rgba(232, 199, 126, 0.28);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(21, 11, 46, 0.85) 0%, rgba(10, 6, 20, 0.92) 100%);
  position: relative;
  overflow: hidden;
}
.daeun-panel::before{
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 30% at 20% 0%, rgba(232, 199, 126, 0.08), transparent 60%),
    radial-gradient(ellipse 40% 30% at 80% 100%, rgba(179, 58, 58, 0.08), transparent 60%);
  pointer-events: none;
}
.daeun-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
.dh-lc{ display: flex; align-items: center; gap: 14px; }
.dh-han{
  font-family: var(--serif-kr);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.3em;
  color: var(--gold-bright);
  border: 1px solid rgba(232, 199, 126, 0.4);
  padding: 5px 12px 4px;
  border-radius: 3px;
  line-height: 1;
}
.dh-tag{
  font-family: var(--serif-kr);
  font-size: 12.5px;
  color: rgba(232, 199, 126, 0.75);
  letter-spacing: 0.08em;
}
.dh-rc{ display: flex; align-items: center; gap: 10px; }
.dh-dir{
  font-family: var(--serif-kr);
  font-size: 12px;
  color: var(--gold-bright);
  padding: 3px 8px;
  border: 1px solid rgba(232, 199, 126, 0.3);
  border-radius: 3px;
  letter-spacing: 0.12em;
}
.dh-age{
  font-family: var(--mono);
  font-size: 11px;
  color: var(--seal-red);
  letter-spacing: 0.08em;
}

/* 그래프 캔버스 */
.daeun-graph{
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 8px;
  position: relative;
  z-index: 1;
}
.dg-y{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 0 46px;
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(232, 199, 126, 0.4);
  letter-spacing: 0.08em;
  text-align: right;
}
.dg-y span:nth-child(3){ color: rgba(232, 199, 126, 0.7); }
.dg-canvas{
  position: relative;
  min-height: 260px;
  padding-bottom: 46px; /* 카드 공간 */
}
.dg-svg{
  width: 100%;
  height: 220px;
  display: block;
  overflow: visible;
}

/* 8단 대운 카드 (SVG 아래 절대배치) */
.dg-cards{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 4px;
}
.dg-card{
  background: rgba(21, 11, 46, 0.6);
  border: 1px solid rgba(232, 199, 126, 0.22);
  border-radius: 4px;
  padding: 6px 4px 5px;
  text-align: center;
  cursor: default;
  transition: all 0.2s ease;
  position: relative;
}
.dg-card:hover{
  border-color: var(--gold-bright);
  background: rgba(232, 199, 126, 0.08);
  z-index: 3;
}
.dg-card.now{
  border-color: var(--seal-red);
  background: rgba(179, 58, 58, 0.12);
}
.dg-card.locked{ opacity: 0.35; filter: grayscale(0.4); }
.dg-card .dc-age{
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(232, 199, 126, 0.55);
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.dg-card .dc-gj{
  font-family: var(--serif-kr);
  font-weight: 600;
  font-size: 15px;
  color: var(--gold-bright);
  line-height: 1.1;
  margin: 2px 0 1px;
  letter-spacing: 0.04em;
}
.dg-card .dc-el{
  font-family: var(--mono);
  font-size: 8.5px;
  color: rgba(232, 199, 126, 0.5);
  letter-spacing: 0.04em;
}
.dg-card .dc-tag{
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 8px;
  padding: 1px 5px;
  border-radius: 2px;
  letter-spacing: 0.05em;
  background: var(--seal-red);
  color: #FBF7EC;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
}
.dg-card.now .dc-tag{ opacity: 1; }
.dg-card .dc-tag.peak{ background: var(--gold-bright); color: var(--ink); }
.dg-card .dc-tag.peak,
.dg-card .dc-tag.trough{ opacity: 1; }
.dg-card .dc-tag.trough{ background: #2A1F44; color: rgba(232, 199, 126, 0.85); }

/* 잠금 오버레이 (게이트 뒤 3~8단만 덮음) */
.dg-lock{
  position: absolute;
  top: 0;
  left: 25%; /* 앞 2단만 노출 → 나머지 6단 덮음 */
  right: 0;
  bottom: 46px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(10, 6, 20, 0.55) 12%, rgba(10, 6, 20, 0.85) 40%);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--serif-kr);
  font-size: 13px;
  color: var(--gold-bright);
  z-index: 2;
  pointer-events: none;
  border-radius: 4px;
}
.dg-lock svg{ width: 14px; height: 14px; opacity: 0.8; }
.daeun-panel[data-locked="false"] .dg-lock{ display: none; }
.daeun-panel[data-locked="false"] .dg-card.locked{ opacity: 1; filter: none; }

/* legend */
.daeun-legend{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(232, 199, 126, 0.15);
  font-family: var(--serif-kr);
  font-size: 11.5px;
  color: rgba(232, 199, 126, 0.6);
  position: relative;
  z-index: 1;
}
.dl-item{ display: inline-flex; align-items: center; gap: 6px; }
.dl-item .dot{
  width: 8px; height: 8px; border-radius: 50%;
}
.dl-item .dot.peak{ background: var(--gold-bright); box-shadow: 0 0 6px var(--gold-bright); }
.dl-item .dot.flow{ background: var(--gold); }
.dl-item .dot.trough{ background: #4A3A6B; }
.dl-item.mono{
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: rgba(232, 199, 126, 0.5);
}

@media (max-width: 640px){
  .daeun-panel{ padding: 16px 12px 14px; }
  .daeun-head{ flex-direction: column; align-items: flex-start; gap: 10px; }
  .dg-svg{ height: 180px; }
  .dg-cards{ gap: 2px; }
  .dg-card{ padding: 5px 2px 4px; }
  .dg-card .dc-gj{ font-size: 12px; }
  .dg-card .dc-age{ font-size: 8px; }
  .dg-card .dc-el{ display: none; }
  .daeun-legend{ font-size: 10.5px; gap: 8px; }
  .dl-item.mono{ display: none; }
}

/* ============================================================
   궁합(宮合) 모달
   ============================================================ */
.gunghap-sheet{
  max-width: 640px;
}
.gh-steps{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 24px 20px;
  border-bottom: 1px solid rgba(232, 199, 126, 0.12);
}
.gh-step{
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid rgba(232, 199, 126, 0.2);
  border-radius: 4px;
  background: transparent;
  transition: all 0.25s;
  opacity: 0.5;
}
.gh-step.on{
  border-color: var(--gold-bright);
  background: rgba(232, 199, 126, 0.08);
  opacity: 1;
}
.gh-step.done{
  border-color: var(--seal-red);
  opacity: 1;
}
.gh-step.done .ghs-n{ color: var(--seal-red); }
.ghs-n{
  font-family: var(--serif-kr);
  font-weight: 700;
  font-size: 14px;
  color: var(--gold-bright);
}
.ghs-t{
  font-family: var(--serif-kr);
  font-size: 12px;
  color: rgba(232, 199, 126, 0.85);
  letter-spacing: 0.08em;
}
.gh-step-line{
  height: 1px;
  width: 32px;
  background: rgba(232, 199, 126, 0.2);
}

/* panels */
.gh-panel{
  display: none;
  padding: 20px 24px 24px;
}
.gh-panel[data-active="true"]{ display: block; }
.gh-panel-title{
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(232, 199, 126, 0.15);
}
.gpt-cn{
  display: block;
  font-family: var(--serif-kr);
  font-weight: 600;
  font-size: 16px;
  color: var(--gold-bright);
  letter-spacing: 0.15em;
}
.gpt-en{
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(232, 199, 126, 0.5);
  letter-spacing: 0.12em;
  margin-top: 4px;
  text-transform: uppercase;
}

.gh-gender{
  display: flex;
  gap: 8px;
}
.gh-gender label{
  flex: 1;
  border: 1px solid rgba(232, 199, 126, 0.2);
  border-radius: 4px;
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--serif-kr);
  color: rgba(232, 199, 126, 0.7);
}
.gh-gender label:has(input:checked){
  border-color: var(--gold-bright);
  background: rgba(232, 199, 126, 0.08);
  color: var(--gold-bright);
}
.gh-gender input{ display: none; }
.gh-gender span{ font-size: 16px; font-weight: 700; }

.gh-nav-row{
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}
.gh-back{
  background: transparent;
  border: 1px solid rgba(232, 199, 126, 0.25);
  color: rgba(232, 199, 126, 0.8);
  font-family: var(--serif-kr);
  font-size: 13px;
  padding: 12px 20px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  flex-shrink: 0;
}
.gh-back:hover{
  border-color: var(--gold-bright);
  color: var(--gold-bright);
}
.gh-nav-row .pay-btn{ flex: 1; }
.gh-next{ margin-top: 8px; }

/* --- gh result --- */
.gh-panel.gh-result{ padding: 0; }
.gh-calc{
  display: none;
  padding: 40px 24px 48px;
  text-align: center;
}
.gh-calc[data-active="true"]{ display: block; }
.gh-calc .taiji{
  width: 44px; height: 44px;
  animation: spin 3s linear infinite;
  margin: 0 auto 16px;
  display: block;
}
.gh-calc-msg{
  font-family: var(--serif-kr);
  font-size: 15px;
  color: var(--gold-bright);
  margin-bottom: 20px;
}
.gh-calc-lines{
  max-width: 340px;
  margin: 0 auto;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ghl{
  font-family: var(--serif-kr);
  font-size: 13px;
  color: rgba(232, 199, 126, 0.35);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s;
}
.ghl .d{
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(232, 199, 126, 0.25);
  transition: all 0.3s;
}
.ghl.on{ color: var(--gold-bright); }
.ghl.on .d{ background: var(--gold-bright); box-shadow: 0 0 6px var(--gold-bright); }

.gh-out{
  display: none;
  padding: 24px 24px 20px;
}
.gh-out[data-active="true"]{ display: block; }
.gh-out-head{
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(232, 199, 126, 0.15);
}
.gh-out-head .cn{
  display: block;
  font-family: var(--serif-kr);
  font-weight: 600;
  font-size: 17px;
  color: var(--gold-bright);
  letter-spacing: 0.2em;
}
.gh-out-head .en{
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: rgba(232, 199, 126, 0.55);
  letter-spacing: 0.15em;
  margin-top: 5px;
  text-transform: uppercase;
}

/* 상성 지수 링 */
.gh-score{
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.gh-score-ring{
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.gh-score-num{
  font-family: var(--serif-kr);
  color: var(--gold-bright);
  text-align: center;
  line-height: 1;
}
.gh-score-num b{
  font-size: 42px;
  font-weight: 700;
  display: block;
}
.gh-score-num span{
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(232, 199, 126, 0.5);
  letter-spacing: 0.1em;
}
.gh-score-lbl{
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif-kr);
  font-size: 12.5px;
  color: var(--seal-red);
  letter-spacing: 0.15em;
  white-space: nowrap;
}

/* 두 명식 pair */
.gh-pair{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  margin: 32px 0 24px;
}
.gh-pair-side{
  border: 1px solid rgba(232, 199, 126, 0.2);
  border-radius: 6px;
  padding: 10px 8px 12px;
  background: rgba(21, 11, 46, 0.35);
}
.gh-pair-side.them{ border-color: rgba(179, 58, 58, 0.3); }
.ghps-lb{
  font-family: var(--serif-kr);
  font-size: 11px;
  color: rgba(232, 199, 126, 0.7);
  letter-spacing: 0.15em;
  text-align: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px dashed rgba(232, 199, 126, 0.12);
}
.gh-pair-side.them .ghps-lb{ color: rgba(232, 156, 156, 0.75); }
.ghps-chart{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.ghps-chart .src-col{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 0;
}
.ghps-chart .src-lb{
  font-family: var(--serif-kr);
  font-size: 9px;
  color: rgba(232, 199, 126, 0.5);
}
.ghps-chart .src-g,
.ghps-chart .src-j{
  font-family: var(--serif-kr);
  font-weight: 600;
  font-size: 18px;
  color: var(--gold-bright);
  line-height: 1;
}
.ghps-chart .day .src-g{
  color: var(--seal-red);
  font-size: 20px;
}
.gh-pair-mid{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 4px;
}
.gpm-han{
  font-family: var(--serif-kr);
  font-weight: 700;
  font-size: 22px;
  color: var(--seal-red);
  background: var(--paper);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.gpm-line{
  width: 1px;
  flex: 1;
  min-height: 20px;
  background: linear-gradient(180deg, transparent, rgba(232, 199, 126, 0.3), transparent);
}

/* 오행 5비교 그리드 */
.gh-elem{
  margin: 20px 0;
  padding: 14px 12px;
  border: 1px solid rgba(232, 199, 126, 0.15);
  border-radius: 6px;
  background: rgba(21, 11, 46, 0.3);
}
.ge-lb{
  font-family: var(--serif-kr);
  font-size: 11.5px;
  color: rgba(232, 199, 126, 0.7);
  letter-spacing: 0.15em;
  margin-bottom: 10px;
  text-align: center;
}
.ge-grid{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.ge-col{
  text-align: center;
}
.ge-name{
  font-family: var(--serif-kr);
  font-weight: 600;
  font-size: 13px;
  color: var(--gold-bright);
  margin-bottom: 4px;
}
.ge-bars{
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  height: 46px;
  padding: 0 2px;
}
.ge-bar{
  flex: 1;
  max-width: 12px;
  background: rgba(232, 199, 126, 0.25);
  border-radius: 1px;
  min-height: 3px;
  transition: height 0.6s;
}
.ge-bar.me{ background: var(--gold-bright); }
.ge-bar.them{ background: var(--seal-red); }
.ge-nums{
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(232, 199, 126, 0.5);
  letter-spacing: 0.03em;
}
.ge-nums .me{ color: var(--gold-bright); }
.ge-nums .them{ color: rgba(232, 156, 156, 0.85); }

/* 4개 지표 */
.gh-signals{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin: 18px 0 20px;
}
.ghsig{
  border: 1px solid rgba(232, 199, 126, 0.15);
  border-radius: 5px;
  padding: 10px 12px;
  background: rgba(21, 11, 46, 0.4);
}
.ghsig-lb{
  font-family: var(--mono);
  font-size: 9.5px;
  color: rgba(232, 199, 126, 0.5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.ghsig-val{
  font-family: var(--serif-kr);
  font-weight: 600;
  font-size: 14px;
  color: var(--gold-bright);
  margin-bottom: 3px;
}
.ghsig-val.good{ color: var(--gold-bright); }
.ghsig-val.warn{ color: var(--seal-red); }
.ghsig-note{
  font-family: var(--serif-kr);
  font-size: 11.5px;
  color: rgba(232, 199, 126, 0.6);
  line-height: 1.4;
}

.gh-foot{ text-align: center; margin-top: 20px; }

@media (max-width: 640px){
  .gh-steps{ padding: 12px 16px 16px; gap: 4px; }
  .gh-step{ padding: 5px 8px; gap: 4px; }
  .ghs-t{ font-size: 11px; }
  .gh-step-line{ width: 12px; }
  .gh-panel{ padding: 16px 16px 20px; }
  .gh-out{ padding: 18px 14px 16px; }
  .gh-pair{ gap: 4px; }
  .gh-pair-side{ padding: 8px 4px 10px; }
  .ghps-chart .src-g, .ghps-chart .src-j{ font-size: 15px; }
  .ghps-chart .day .src-g{ font-size: 17px; }
  .gpm-han{ width: 26px; height: 26px; font-size: 16px; }
  .gh-signals{ grid-template-columns: 1fr; }
  .ge-grid{ gap: 3px; }
  .ge-name{ font-size: 11px; }
  .ge-bars{ height: 36px; }
}

@keyframes spin{ from{ transform: rotate(0); } to{ transform: rotate(360deg); } }

/* ============================================================
   FACE SCANNER — AI 관상 히어로 그래픽 (mobile-first, 480px column)
   ============================================================ */
.face-scanner{
  position: relative; z-index: 4;
  display: block;
  padding: 32px 20px 16px;
  text-align: center;
}
.face-scanner > *{ margin-left: auto; margin-right: auto; }
.face-scanner > * + *{ margin-top: 14px; }

/* ---- 상단 상태바 ---- */
.fs-statusbar{
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(232,199,126,0.7);
  letter-spacing: 0.1em;
  border: 1px solid rgba(232,199,126,0.2);
  background: linear-gradient(180deg, rgba(21,11,46,0.55), rgba(10,6,20,0.35));
  backdrop-filter: blur(4px);
  border-radius: 4px;
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.fs-statusbar::before{
  content: ''; position: absolute; top: -1px; left: 14px; width: 30px; height: 1px;
  background: var(--gold-bright);
  box-shadow: 0 0 8px var(--gold-bright);
}
.fs-sb-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #7EE8B4;
  box-shadow: 0 0 6px #7EE8B4;
  animation: heartbeat 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.fs-sb-k{
  font-weight: 600;
  color: var(--gold-bright);
}
.fs-sb-sep{ opacity: 0.4; }
.fs-sb-v[data-fs="analyze"]{
  color: #7EE8B4;
  font-weight: 600;
  animation: fsBlink 1.4s ease-in-out infinite;
}
.fs-sb-spacer{ flex: 1; }
.fs-sb-model{
  color: rgba(232,199,126,0.55);
  font-size: 9.5px;
  white-space: nowrap;
}
@keyframes fsBlink{ 0%,100%{ opacity: 1; } 50%{ opacity: 0.4; } }

/* ---- 오행 컬러 유틸 ---- */
.fs-el-fire{ color: #FF9A6C; }
.fs-el-wood{ color: #7EE8B4; }
.fs-el-earth{ color: #E8C77E; }
.fs-el-metal{ color: #F4E5B8; }
.fs-el-water{ color: #8BB6FF; }

/* ---- 프레임 아래 오행 요약 5분면 ---- */
.fs-summary{
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 320px;
  width: 100%;
  margin: 22px auto 0;
}
.fs-sm-item{
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 1px solid rgba(232,199,126,0.15);
  background: rgba(21,11,46,0.35);
  border-radius: 3px;
  position: relative;
}
.fs-sm-item::before{
  content: ''; position: absolute; top: -1px; left: 30%; right: 30%; height: 1px;
  background: currentColor;
  opacity: 0.5;
}
.fs-sm-item:nth-child(1){ color: #FF9A6C; }
.fs-sm-item:nth-child(2){ color: #7EE8B4; }
.fs-sm-item:nth-child(3){ color: #E8C77E; }
.fs-sm-item:nth-child(4){ color: #F4E5B8; }
.fs-sm-item:nth-child(5){ color: #8BB6FF; }

.fs-sm-han{
  font-family: var(--serif-han);
  font-size: 16px; font-weight: 600;
  line-height: 1;
}
.fs-sm-lb{
  font-family: var(--serif-han);
  font-size: 9px;
  color: rgba(251,247,236,0.55);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* ---- 중앙 프레임 ---- */
.fs-frame{
  position: relative;
  aspect-ratio: 4 / 5;
  max-width: 300px;
  width: 100%;
  margin: 4px auto 0;
  container-type: size;
  container-name: fsframe;
  overflow: hidden;
}

.fs-corner{
  position: absolute; width: 22px; height: 22px;
  border: 1.5px solid var(--gold-bright);
  filter: drop-shadow(0 0 4px rgba(232,199,126,0.5));
}
.fs-corner.tl{ top: -1px; left: -1px; border-right: none; border-bottom: none; }
.fs-corner.tr{ top: -1px; right: -1px; border-left: none; border-bottom: none; }
.fs-corner.bl{ bottom: -1px; left: -1px; border-right: none; border-top: none; }
.fs-corner.br{ bottom: -1px; right: -1px; border-left: none; border-top: none; }

.fs-grid{
  position: absolute; inset: 12px;
  background-image:
    linear-gradient(rgba(232,199,126,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,199,126,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 30%, transparent 90%);
          mask-image: radial-gradient(ellipse 70% 90% at 50% 50%, #000 30%, transparent 90%);
  border-radius: 6px;
}

.fs-face{
  position: absolute; inset: 8%;
  width: 84%; height: 84%;
  z-index: 2;
  filter: drop-shadow(0 6px 24px rgba(232,199,126,0.15));
}
.fs-face-outline{
  animation: fsFacePulse 4s ease-in-out infinite;
}
@keyframes fsFacePulse{
  0%,100%{ stroke-opacity: 0.55; }
  50%{ stroke-opacity: 0.85; }
}

.fs-analysis-lines line{
  animation: fsLineFade 3s ease-in-out infinite;
}
.fs-analysis-lines line:nth-child(2){ animation-delay: 0.6s; }
.fs-analysis-lines line:nth-child(3){ animation-delay: 1.2s; }
.fs-analysis-lines line:nth-child(4){ animation-delay: 1.8s; }
@keyframes fsLineFade{
  0%,100%{ opacity: 0.4; }
  50%{ opacity: 1; }
}

.fs-connections{
  position: absolute; inset: 8%;
  width: 84%; height: 84%;
  z-index: 3;
  pointer-events: none;
}
.fs-connections path{
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: fsDrawPath 6s ease-in-out infinite;
}
@keyframes fsDrawPath{
  0%{ stroke-dashoffset: 300; opacity: 0; }
  10%{ opacity: 1; }
  60%{ stroke-dashoffset: 0; opacity: 1; }
  90%{ opacity: 1; }
  100%{ stroke-dashoffset: 0; opacity: 0; }
}

/* ---- 오행 포인트 (얼굴 위) ---- */
.fs-points{
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
}
.fs-pt{
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center;
  gap: 3px;
  animation: fsPtIn 0.6s ease both;
}
.fs-pt:nth-child(1){ animation-delay: 0.2s; }
.fs-pt:nth-child(2){ animation-delay: 0.5s; }
.fs-pt:nth-child(3){ animation-delay: 0.8s; }
.fs-pt:nth-child(4){ animation-delay: 1.1s; }
.fs-pt:nth-child(5){ animation-delay: 1.4s; }
@keyframes fsPtIn{
  from{ opacity: 0; transform: translate(-50%, -40%) scale(0.6); }
  to{ opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.fs-pt-ring{
  position: relative;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid currentColor;
  display: grid; place-items: center;
  background: rgba(10,6,20,0.55);
  backdrop-filter: blur(2px);
}
.fs-pt-ring::before,
.fs-pt-ring::after{
  content: ''; position: absolute; inset: -6px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.4;
  animation: fsPtPulse 2.4s ease-out infinite;
}
.fs-pt-ring::after{ animation-delay: 1.2s; }
@keyframes fsPtPulse{
  0%{ transform: scale(0.6); opacity: 0.7; }
  100%{ transform: scale(1.8); opacity: 0; }
}
.fs-pt-han{
  position: absolute;
  font-family: var(--serif-han);
  font-size: 11px; font-weight: 600;
  color: currentColor;
  line-height: 1;
}
.fs-pt-lb{
  font-family: var(--serif-han);
  font-size: 8.5px; letter-spacing: 0.08em;
  color: currentColor;
  opacity: 0.92;
  white-space: nowrap;
  margin-top: 3px;
  padding: 2px 5px;
  background: rgba(10,6,20,0.78);
  border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
  border-radius: 2px;
  line-height: 1;
}
.fs-pt--fire{ color: #FF9A6C; }
.fs-pt--wood{ color: #7EE8B4; }
.fs-pt--earth{ color: #E8C77E; }
.fs-pt--metal{ color: #F4E5B8; }
.fs-pt--water{ color: #8BB6FF; }

/* ---- 스캔 라인 — 프레임 위→아래 완주, 강한 발광 ---- */
.fs-scanline{
  position: absolute; left: -4px; right: -4px; top: 0;
  height: 56px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(232,199,126,0.04) 30%,
    rgba(232,199,126,0.18) 60%,
    rgba(255,220,140,0.55) 88%,
    #FFF3C4 98%,
    #FFFFFF 100%);
  box-shadow:
    0 0 24px 4px rgba(232,199,126,0.75),
    0 0 60px 12px rgba(232,199,126,0.35),
    0 6px 40px 0 rgba(255,220,140,0.5);
  filter: drop-shadow(0 0 8px rgba(255,220,140,0.7));
  mix-blend-mode: screen;
  animation: fsScan 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
/* 스캔라인 아래로 잔광 트레일 */
.fs-scanline::after{
  content: '';
  position: absolute; left: 0; right: 0; bottom: 100%;
  height: 140px;
  background: linear-gradient(180deg,
    rgba(232,199,126,0) 0%,
    rgba(232,199,126,0.04) 40%,
    rgba(232,199,126,0.12) 80%,
    rgba(232,199,126,0.22) 100%);
  pointer-events: none;
}
@keyframes fsScan{
  0%   { transform: translateY(-60px); opacity: 0; }
  6%   { opacity: 1; }
  50%  {
    box-shadow:
      0 0 32px 6px rgba(232,199,126,0.95),
      0 0 80px 20px rgba(232,199,126,0.5),
      0 8px 60px 0 rgba(255,220,140,0.7);
  }
  94%  { opacity: 1; }
  100% { transform: translateY(100cqh); opacity: 0; }
}
/* container query fallback (구형 브라우저) */
@supports not (height: 100cqh){
  @keyframes fsScan{
    0%   { transform: translateY(-60px); opacity: 0; }
    6%   { opacity: 1; }
    94%  { opacity: 1; }
    100% { transform: translateY(380px); opacity: 0; }
  }
}

/* ---- 하단 캡션 ---- */
.fs-caption{
  position: absolute; left: 8px; right: 8px; bottom: -30px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10px; letter-spacing: 0.15em;
  color: rgba(232,199,126,0.7);
}
.fs-cap-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #7EE8B4;
  box-shadow: 0 0 6px #7EE8B4;
  animation: heartbeat 1.6s ease-in-out infinite;
}
.fs-cap-txt{ flex: 1; }
.fs-cap-pct{
  color: var(--gold-bright);
  font-weight: 600;
  font-size: 11px;
}

/* ---- CTA 셀카 강조 ---- */
.cta-btn.cta-selfie{
  padding: 18px 28px 18px 22px;
  gap: 12px;
}
.cta-btn.cta-selfie .cta-icon{
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  color: var(--ink);
}
.cta-btn.cta-selfie .cta-icon svg{ width: 22px; height: 22px; }
.cta-price{
  font-size: 12px;
  font-weight: 500;
  opacity: 0.72;
  margin-left: 4px;
}
.selfie-link--alt{
  margin-top: 14px;
  font-size: 12.5px;
  color: rgba(251,247,236,0.5);
}
.selfie-link--alt:hover{ color: rgba(251,247,236,0.85); }
.selfie-link--alt b{ color: var(--ivory); font-weight: 600; }

/* ---- 아주 좁은 화면 (< 360px) ---- */
@media (max-width: 360px){
  .fs-frame{ max-width: 260px; }
  .fs-sm-han{ font-size: 14px; }
  .fs-sm-lb{ font-size: 8px; }
  .fs-statusbar{ font-size: 9px; padding: 6px 10px; }
  .fs-sb-model{ display: none; }
}


/* ============================================================
   [v8 append] DEPTH · 전체 입체감 강화
   ============================================================ */

/* --- Path cards (3열): 다층 그림자 + top hilight + hover 3D --- */
.path-cards--3 .path-card{
  background:
    linear-gradient(180deg, #ffffff 0%, #fbf7ec 100%);
  border: 1px solid rgba(21,11,46,0.08);
  border-radius: 8px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 rgba(21,11,46,0.04) inset,
    0 2px 4px rgba(21,11,46,0.05),
    0 14px 28px -10px rgba(21,11,46,0.14),
    0 28px 56px -14px rgba(21,11,46,0.10);
  transition:
    transform 0.35s cubic-bezier(.2,.8,.3,1),
    box-shadow 0.35s cubic-bezier(.2,.8,.3,1),
    border-color 0.35s;
}
.path-cards--3 .path-card::after{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, transparent 30%);
  opacity: 0.6;
}
.path-cards--3 .path-card:hover{
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 -1px 0 rgba(21,11,46,0.05) inset,
    0 4px 8px rgba(21,11,46,0.08),
    0 24px 40px -12px rgba(21,11,46,0.22),
    0 40px 70px -16px rgba(21,11,46,0.16);
}
.path-cards--3 .path-card.b:hover{ border-color: var(--seal-red); }
.path-cards--3 .path-card.c:hover{ border-color: var(--seal-red); }

/* 카드 안 큰 한자 워터마크에 미묘한 depth */
.path-cards--3 .pc-num{
  text-shadow:
    0 1px 0 rgba(255,255,255,0.6),
    0 2px 3px rgba(184,137,61,0.10);
}

/* 뱃지: 압출 그림자 */
.path-cards--3 .pc-badge{
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 4px 10px rgba(21,11,46,0.28);
}

/* --- CTA 셀카 버튼: 더 강한 압출감 --- */
.cta-btn.cta-selfie{
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 -2px 0 rgba(122,30,30,0.08) inset,
    0 10px 24px rgba(184,137,61,0.36),
    0 20px 40px -10px rgba(184,137,61,0.28),
    0 30px 60px -20px rgba(21,11,46,0.35);
}
.cta-btn.cta-selfie:hover{
  transform: translateY(-2px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.85) inset,
    0 -2px 0 rgba(122,30,30,0.10) inset,
    0 14px 30px rgba(184,137,61,0.46),
    0 28px 50px -10px rgba(184,137,61,0.34),
    0 40px 70px -20px rgba(21,11,46,0.40);
}
.cta-btn.cta-selfie:active{
  transform: translateY(1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 6px 14px rgba(184,137,61,0.32);
}

/* --- Face scanner: 살짝 3D perspective --- */
.face-scanner{
  perspective: 1200px;
  perspective-origin: 50% 40%;
}
.fs-frame{
  transform: rotateX(6deg) rotateY(-3deg);
  transform-style: preserve-3d;
  box-shadow:
    0 1px 0 rgba(232,199,126,0.25) inset,
    0 -1px 0 rgba(0,0,0,0.35) inset,
    0 20px 40px -12px rgba(0,0,0,0.55),
    0 40px 80px -20px rgba(232,199,126,0.18);
  transition: transform 0.6s cubic-bezier(.2,.8,.3,1);
}
.hero:hover .fs-frame{
  transform: rotateX(3deg) rotateY(0deg);
}

/* --- Today fortune 카드: depth up --- */
.tf-card{
  box-shadow:
    0 1px 0 rgba(255,255,255,0.7) inset,
    0 -1px 0 rgba(21,11,46,0.05) inset,
    0 2px 5px rgba(21,11,46,0.05),
    0 14px 28px -10px rgba(21,11,46,0.14) !important;
  transition: transform 0.35s, box-shadow 0.35s;
}
.tf-card:hover{
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 -1px 0 rgba(21,11,46,0.06) inset,
    0 4px 8px rgba(21,11,46,0.07),
    0 22px 40px -10px rgba(21,11,46,0.22) !important;
}

/* --- 카카오 로그인 버튼: 압출 --- */
.kakao-login-btn{
  box-shadow:
    0 1px 0 rgba(255,255,255,0.35) inset,
    0 -2px 0 rgba(61,30,30,0.15) inset,
    0 6px 14px rgba(254,229,0,0.45),
    0 10px 22px -6px rgba(0,0,0,0.25);
}
.kakao-login-btn:hover{
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.45) inset,
    0 -2px 0 rgba(61,30,30,0.18) inset,
    0 8px 18px rgba(254,229,0,0.55),
    0 14px 28px -6px rgba(0,0,0,0.30);
}

/* --- Live consult FAB: 부양감 --- */
#lcFab{
  box-shadow:
    0 1px 0 rgba(255,255,255,0.25) inset,
    0 -2px 0 rgba(0,0,0,0.2) inset,
    0 10px 24px rgba(179,58,58,0.42),
    0 20px 40px -10px rgba(0,0,0,0.35) !important;
}

/* --- FAQ 아이템: 미묘한 깊이 --- */
.faq-item{
  transition: box-shadow 0.25s, transform 0.25s;
}
.faq-item.open{
  box-shadow:
    0 1px 0 rgba(255,255,255,0.6) inset,
    0 2px 6px rgba(21,11,46,0.06),
    0 14px 30px -12px rgba(21,11,46,0.14);
}

/* --- Phone frame outer glow: 무대 위 오브제처럼 --- */
@media (min-width: 901px){
  .phone-frame{
    box-shadow:
      0 0 0 1px rgba(232,199,126,0.08),
      0 20px 60px -20px rgba(0,0,0,0.55),
      0 60px 120px -40px rgba(232,199,126,0.10);
  }
}

/* ============ READER INTRO (영상 액자) ============ */
.reader-intro{
  margin: 44px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 200px) 1fr;
  gap: 24px;
  align-items: center;
  max-width: 420px;
}
/* 폰프레임(≤520) 안에서는 액자 세로 폭이 폭주하므로, 액자 자체를 폭 제한 + 가운데 정렬 */
@media (max-width: 520px){
  .reader-intro{
    grid-template-columns: minmax(0, 168px) 1fr;
    gap: 18px;
    margin: 32px auto 0;
  }
}
@media (max-width: 380px){
  .reader-intro{
    grid-template-columns: minmax(0, 140px) 1fr;
    gap: 14px;
  }
}

.reader-intro .ri-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4.55;
  border-radius: 4px;
  overflow: hidden;
  background: #0e0a1c;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 20px 40px -12px rgba(21,11,46,0.55),
    0 40px 80px -30px rgba(179,58,58,0.35);
}
.reader-intro .ri-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  /* 다크한 영상 → 살짝만 채도 올려서 이보리 지면과 톤 맞춤 */
  filter: saturate(1.05) contrast(1.02);
}
/* 아르누보 모서리 러그 */
.reader-intro .ri-corner{
  position: absolute;
  width: 18px; height: 18px;
  border: 1.5px solid rgba(232,199,126,0.85);
  z-index: 3;
  pointer-events: none;
}
.reader-intro .ri-corner.tl{ top: 8px;  left: 8px;  border-right: none; border-bottom: none; }
.reader-intro .ri-corner.tr{ top: 8px;  right: 8px; border-left: none;  border-bottom: none; }
.reader-intro .ri-corner.bl{ bottom: 8px; left: 8px;  border-right: none; border-top: none; }
.reader-intro .ri-corner.br{ bottom: 8px; right: 8px; border-left: none;  border-top: none; }

/* 붉은 인주 도장 오버레이 */
.reader-intro .ri-seal{
  position: absolute;
  right: 14px; bottom: 14px;
  width: 44px; height: 44px;
  z-index: 4;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4));
  transform: rotate(-6deg);
  opacity: 0.95;
}
.reader-intro .ri-seal svg{
  width: 100%; height: 100%;
  display: block;
}

/* 음소거 토글 버튼 */
.reader-intro .ri-sound{
  position: absolute;
  left: 12px; bottom: 12px;
  width: 32px; height: 32px;
  border-radius: 999px;
  background: rgba(15, 8, 36, 0.6);
  border: 1px solid rgba(232, 199, 126, 0.35);
  color: rgba(251, 247, 236, 0.9);
  z-index: 4;
  display: grid; place-items: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  padding: 0;
}
.reader-intro .ri-sound:hover{
  background: rgba(15, 8, 36, 0.85);
  transform: scale(1.05);
}
.reader-intro .ri-sound svg{
  width: 15px; height: 15px;
}

/* 캡션 (오른쪽) */
.reader-intro .ri-caption{
  padding: 6px 0;
}
.reader-intro .ri-eyebrow{
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
  font-family: var(--serif-en, 'Fraunces', serif);
  font-size: 9.5px;
  letter-spacing: 0.22em;
  color: var(--gold, #B8893D);
  text-transform: uppercase;
}
@media (min-width: 521px){
  .reader-intro .ri-eyebrow{ font-size: 10.5px; letter-spacing: 0.24em; gap: 10px; margin-bottom: 14px; }
}
.reader-intro .ri-eb-line{
  width: 24px; height: 1px; background: currentColor; opacity: 0.6;
}
.reader-intro .ri-eb-han{
  font-family: var(--serif-hanja, 'Noto Serif TC', serif);
  font-weight: 700;
  letter-spacing: 0.32em;
  color: var(--seal-red, #B33A3A);
}
.reader-intro .ri-eb-en{
  opacity: 0.75;
}
.reader-intro .ri-title{
  font-family: var(--serif-han, 'Noto Serif KR', serif);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  color: var(--ink, #0F0824);
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
@media (min-width: 521px){
  .reader-intro .ri-title{ font-size: 22px; line-height: 1.35; }
}
.reader-intro .ri-title em{
  font-style: normal;
  color: var(--seal-red, #B33A3A);
  font-family: var(--serif-en, 'Fraunces', serif);
  font-weight: 500;
}
.reader-intro .ri-body{
  font-size: 12.5px;
  line-height: 1.68;
  color: var(--text-mid, #3a2f24);
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
@media (min-width: 521px){
  .reader-intro .ri-body{ font-size: 13.5px; line-height: 1.72; }
}
.reader-intro .ri-body b{
  color: var(--ink, #0F0824);
  font-weight: 700;
}

/* prefers-reduced-motion: 영상 정지 */
@media (prefers-reduced-motion: reduce){
  .reader-intro .ri-video{
    animation-play-state: paused;
  }
}

/* ============ COMING SOON PATH CARDS ============ */
/* 정통 사주 / 궁합 상품이 런칭 전이라 클릭 비활성 + Coming Soon 배지 */
.path-cards--3 .path-card.coming-soon{
  cursor: not-allowed;
  pointer-events: none;
  filter: saturate(0.35);
  opacity: 0.62;
  position: relative;
}
.path-cards--3 .path-card.coming-soon:hover{
  transform: none;
  border-color: var(--border, #D9CFB5);
  box-shadow: none;
}
.path-cards--3 .path-card.coming-soon .pc-p .pcp-num{
  font-size: 15px;
  color: var(--text-mute, #6E6459);
  letter-spacing: 0.02em;
}
.path-cards--3 .path-card.coming-soon .pc-p .pcp-unit{
  color: var(--text-fade, #9A907B);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-family: var(--serif-en, "Fraunces", serif);
  font-size: 9px;
}
.path-cards--3 .path-card.coming-soon .pc-ribbon{
  position: absolute;
  top: 12px;
  right: -6px;
  background: rgba(21, 11, 46, 0.82);
  color: #F6F0E1;
  font-family: var(--serif-en, "Fraunces", serif);
  font-size: 10px;
  letter-spacing: 0.20em;
  padding: 4px 10px 4px 12px;
  text-transform: uppercase;
  border-radius: 2px 0 0 2px;
  z-index: 3;
  box-shadow: 0 4px 8px rgba(21,11,46,0.18);
}
.path-cards--3 .path-card.coming-soon .pc-ribbon::after{
  content: '';
  position: absolute;
  right: 0; bottom: -6px;
  width: 0; height: 0;
  border-top: 6px solid rgba(21,11,46,0.55);
  border-right: 6px solid transparent;
}