/* =====================================================================
   style.css : 달빛 타로 디자인
   ---------------------------------------------------------------------
   레이아웃 개념: 밤하늘 위에 놓인 점술 테이블. 위에서 아래로
   질문 → 카드 고르기 → 세 장 펼치기 → 종합 메시지 순서로 흐릅니다.
   색과 글꼴은 아래 :root 안의 '변수(토큰)'만 바꾸면 사이트 전체가 바뀌어요.
   ===================================================================== */

:root {
  /* 색 */
  --night:      #11132a;   /* 배경: 깊은 남색 밤하늘 */
  --night-2:    #1b1e3c;   /* 한 단계 밝은 남색 (상자 배경) */
  --line:       #34385e;   /* 얇은 테두리 */
  --ink:        #ece7f6;   /* 기본 글자 */
  --mist:       #a9a4c8;   /* 흐린 보조 글자 */
  --gilt:       #d8b46a;   /* 금빛 포인트 */
  --gilt-soft:  rgba(216, 180, 106, 0.18);
  --face:       #f2ead8;   /* 카드 앞면 (상아색 종이) */
  --face-ink:   #2a2440;   /* 카드 앞면 글자 */
  --rev:        #e39a8a;   /* 역방향 표시 */

  /* 수트별 색 */
  --major:      #b8923f;
  --wands:      #c8703a;
  --cups:       #3d8ba3;
  --swords:     #8580b5;
  --pentacles:  #879844;

  /* 글꼴 */
  --font-display: 'Gowun Batang', 'Nanum Myeongjo', serif;
  --font-body:    'Gowun Dodum', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-numeral: 'Cinzel', 'Times New Roman', serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 9%,  rgba(255,255,255,.55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64% 32%, rgba(255,240,200,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 61%, rgba(255,255,255,.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 90% 72%, rgba(255,255,255,.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 84%, rgba(255,240,200,.5) 50%, transparent 51%),
    radial-gradient(ellipse 70% 45% at 50% -5%, #2b2c5c 0%, transparent 70%),
    var(--night);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}

.wrap {
  max-width: 880px;
  margin: 0 auto;
  padding-block: 40px 56px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 반짝이 캔버스: 화면 전체를 덮지만 클릭은 그대로 아래로 통과 */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }

.stage { display: flex; flex-direction: column; gap: 32px; }

/* ───── 머리말 ───── */
header { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.moon {
  width: 54px; height: 54px; border-radius: 50%;
  box-shadow: inset -14px -4px 0 0 var(--gilt);
  transform: rotate(-20deg);
  filter: drop-shadow(0 0 14px rgba(216,180,106,.45));
}
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 2.8rem);
  letter-spacing: 0.08em;
  margin: 0;
  text-wrap: balance;
}
.tagline { margin: 0; color: var(--mist); max-width: 36em; }

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.35rem;
  margin: 0;
  text-wrap: balance;
}

/* ───── 공통 버튼 ───── */
.btn {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--night);
  background: var(--gilt);
  border: 0;
  border-radius: 999px;
  padding: 12px 32px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(216,180,106,.35); }
.btn:focus-visible, .card3d:focus-visible, .pick-card:focus-visible, input:focus-visible {
  outline: 2px solid var(--gilt); outline-offset: 3px;
}
.btn.ghost { background: transparent; color: var(--gilt); border: 1px solid var(--gilt); }
a.btn { text-decoration: none; display: inline-block; }

/* ───── 0단계: 타로 리더 ───── */
#step-reader { display: flex; flex-direction: column; align-items: center; gap: 20px; text-align: center; }
.readers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 220px));
  gap: 20px;
  justify-content: center;
  width: 100%;
}
.reader-card {
  font: inherit; color: var(--ink); cursor: pointer; text-align: center;
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px 12px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transition: transform .3s, border-color .3s, box-shadow .3s;
  min-width: 0;
}
.reader-card:hover, .reader-card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--reader);
  box-shadow: 0 0 0 1px var(--reader), 0 16px 40px -10px var(--reader);
  outline: none;
}
.portrait {
  display: block; width: 100%; aspect-ratio: 3 / 4; max-width: 100%;
  border-radius: 999px 999px 14px 14px;  /* 위가 둥근 아치 모양 액자 */
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--reader) 60%, transparent);
  margin-bottom: 8px;
}
.portrait svg, .portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
.reader-name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: .1em; }
.reader-title { font-family: var(--font-numeral); font-size: .78rem; color: var(--reader); letter-spacing: .08em; }
.reader-desc { font-size: .85rem; color: var(--mist); }

/* 리더 말풍선 바 */
#reader-bar {
  display: flex; align-items: center; gap: 14px;
  background: color-mix(in srgb, var(--night-2) 85%, transparent);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 10px 16px 10px 10px;
  position: sticky; top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index: 20;
  backdrop-filter: blur(8px);
}
.reader-mini {
  flex: none; width: 54px; height: 72px;
  border-radius: 999px 999px 10px 10px; overflow: hidden;
  border: 1px solid var(--reader);
  box-shadow: 0 0 18px -4px var(--reader);
}
.reader-mini svg, .reader-mini img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bubble { margin: 0; font-size: .95rem; min-height: 1.7em; min-width: 0; }

/* ───── 1단계: 질문 ───── */
#step-ask {
  display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center;
}
.ask-label { color: var(--mist); font-size: .95rem; }
#question {
  width: 100%; max-width: 440px;
  font: inherit; color: var(--ink);
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
}
#question::placeholder { color: var(--mist); opacity: .7; }

/* 섞기 연출용 카드 더미 */
.deck { position: relative; width: 92px; height: 138px; }
.deck .card-back { position: absolute; inset: 0; }
.deck .card-back:nth-child(1) { transform: rotate(-8deg); }
.deck .card-back:nth-child(2) { transform: rotate(5deg); }
.deck .card-back:nth-child(3) { transform: rotate(-3deg); }
.deck .card-back:nth-child(4) { transform: rotate(2deg); }
.deck .card-back:nth-child(5) { transform: rotate(0deg); }
.deck { animation: deckGlow 3s ease-in-out infinite; }
@keyframes deckGlow { 50% { filter: drop-shadow(0 0 18px rgba(216,180,106,.45)); } }
/* 섞기: 카드가 좌우로 갈라졌다가 공중에서 돌며 다시 모여요 */
.deck.shuffling .card-back:nth-child(1) { animation: riffleL .5s ease-in-out 3; }
.deck.shuffling .card-back:nth-child(2) { animation: riffleR .5s ease-in-out 3 .08s; }
.deck.shuffling .card-back:nth-child(3) { animation: toss 1.5s cubic-bezier(.3,.7,.3,1) 1; }
.deck.shuffling .card-back:nth-child(4) { animation: riffleL .5s ease-in-out 3 .16s; }
.deck.shuffling .card-back:nth-child(5) { animation: riffleR .5s ease-in-out 3 .24s; }
@keyframes riffleL { 50% { transform: translate(-70px, -10px) rotate(-22deg); } }
@keyframes riffleR { 50% { transform: translate(70px, -10px) rotate(20deg); } }
@keyframes toss {
  40% { transform: translateY(-120px) rotate(360deg) scale(1.1); }
  70% { transform: translateY(-40px) rotate(540deg); }
  100% { transform: translateY(0) rotate(720deg); }
}

/* ───── 카드 뒷면 (공통) ───── */
.card-back {
  border-radius: 10px;
  /* 루나가 쥔 덱과 같은 뒷면: 짙은 보랏빛 바탕 + 금빛 원 문양 + 하얀 테두리 */
  border: 2px solid #efe8f4;
  background:
    radial-gradient(circle at 50% 50%, #c9a24e 0 3%, #3b1450 3.5% 9%, transparent 9.5%),
    radial-gradient(circle at 50% 50%, transparent 0 21%, #d8b46a 21.5% 23%, transparent 23.5% 29%, rgba(216,180,106,.7) 29.5% 30.5%, transparent 31%),
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(216,180,106,.22) 0deg 3deg, transparent 3deg 30deg),
    radial-gradient(ellipse at 50% 45%, #5b2378, #2c0f3d 75%);
  box-shadow: 0 6px 18px rgba(0,0,0,.45), inset 0 0 0 3px #2c0f3d, inset 0 0 0 4.5px rgba(216,180,106,.85);
  display: grid; place-items: center;
  color: var(--gilt);
  font-size: 1.4rem;
}
.card-back::after { content: ''; }

/* ───── 2단계: 카드 고르기 ───── */
#step-pick { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
#pick-guide { margin: 0; color: var(--mist); }
#pick-guide strong { color: var(--gilt); font-family: var(--font-numeral); }
@keyframes sheen { to { transform: translateX(120%); } }

/* 고른 카드가 날아가 앉는 자리 3칸 */
#tray { display: flex; gap: clamp(14px, 4vw, 34px); justify-content: center; }
.tray-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tray-hole {
  width: var(--tw, 72px); aspect-ratio: 2 / 3; border-radius: 10px; position: relative;
  border: 1.5px dashed color-mix(in srgb, var(--gilt) 45%, transparent);
  background: radial-gradient(circle, rgba(216,180,106,.08), transparent 70%);
  transition: border-color .4s, box-shadow .4s;
}
.tray-slot.next .tray-hole { border-color: var(--gilt); animation: holeBreath 1.6s ease-in-out infinite; }
@keyframes holeBreath { 50% { box-shadow: 0 0 22px rgba(216,180,106,.45); } }
.tray-slot.filled .tray-hole { border: 0; animation: none; }
.tray-hole .card-back { position: absolute; inset: 0; animation: landGlow 1.2s ease-out both; }
@keyframes landGlow {
  0% { box-shadow: 0 0 0 3px #fff6d8, 0 0 70px rgba(255,233,168,1); transform: scale(1.18); }
  100% { box-shadow: 0 0 0 2px var(--gilt), 0 0 26px rgba(216,180,106,.55); transform: scale(1); }
}
.tray-name { font-family: var(--font-display); font-size: .82rem; color: var(--mist); letter-spacing: .1em; transition: color .4s; }
.tray-slot.filled .tray-name { color: var(--gilt); }

/* 부채꼴로 펼쳐진 카드 */
#fan { position: relative; width: 100%; max-width: 820px; height: var(--fan-h, 300px); margin-top: 4px; overflow-x: clip; overflow-y: visible; }
.pick-card {
  position: absolute; left: calc(50% - var(--cw) / 2); top: 34px;
  width: var(--cw); aspect-ratio: 2 / 3; padding: 0; font: inherit; cursor: pointer;
  transform-origin: 50% var(--pivot);
  transform: rotate(calc(var(--a, 0deg) + var(--push, 0deg))) translateY(var(--lift, 0px)) scale(var(--sc, 1));
  transition: transform .45s cubic-bezier(.2,.9,.25,1.1), box-shadow .3s, opacity .35s, filter .35s;
  overflow: hidden;
  z-index: var(--z, 1);
}
#fan.closed .pick-card { --a: 0deg !important; transition-duration: .01s; }
#fan.opening .pick-card { transition-delay: calc(var(--i) * 12ms); transition-duration: .8s; }
#fan { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
#fan.dragging .pick-card { transition: opacity .2s; }
.pick-card.off { opacity: 0; pointer-events: none; }
#fan.wheel .pick-card { box-shadow: 0 6px 14px rgba(0,0,0,.45); }

/* 휴대폰: 밀어서 돌리기 안내와 화살표 */
.fan-nav { display: flex; align-items: center; gap: 12px; color: var(--mist); font-size: .82rem; }
.fan-nav[hidden] { display: none; }
.fan-arrow {
  font: inherit; font-size: 1.2rem; line-height: 1; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  color: var(--gilt); background: transparent; border: 1px solid color-mix(in srgb, var(--gilt) 50%, transparent);
}
.fan-arrow:active { background: var(--gilt-soft); }

/* ───── ①-2 세 무더기로 떼기 ───── */
#step-cut { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.cut-guide { margin: 0; color: var(--mist); }
.piles { display: flex; gap: clamp(18px, 6vw, 56px); justify-content: center; padding-top: 46px; }
.pile {
  font: inherit; color: var(--mist); cursor: pointer; background: none; border: 0; padding: 0;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  transform: translate(var(--mx, 0px), 0) scale(.6); opacity: 0;
  transition: transform .7s cubic-bezier(.2,.9,.25,1.15), opacity .5s, filter .4s;
}
#step-cut.dealt .pile { transform: translate(0, 0); opacity: 1; }
#step-cut.dealt .pile:nth-child(2) { transition-delay: .08s; }
#step-cut.dealt .pile:nth-child(3) { transition-delay: .16s; }
.pile .stack { position: relative; width: clamp(64px, 18vw, 92px); aspect-ratio: 2 / 3; }
.pile .stack .card-back { position: absolute; inset: 0; font-size: 1.1rem; }
.pile .stack .card-back:nth-child(1) { transform: translate(-4px, 6px) rotate(-3deg); }
.pile .stack .card-back:nth-child(2) { transform: translate(3px, 3px) rotate(2deg); }
.pile:hover:not(:disabled) .stack, .pile:focus-visible .stack { transform: translateY(-10px); filter: drop-shadow(0 0 18px rgba(216,180,106,.55)); }
.pile .stack { transition: transform .3s, filter .3s; }
.pile-count { font-family: var(--font-numeral); font-size: .85rem; }
.pile:disabled { cursor: default; }
.pile.chosen { z-index: 3; position: relative; }
.pile.chosen .stack { transform: translateY(-36px) scale(1.12); filter: drop-shadow(0 0 30px rgba(255,233,168,.9)); }
#step-cut.dealt .pile.merge { transform: translate(var(--mx), 0); transition-delay: .25s; }
#step-cut.dealt .pile.merge:not(.chosen) { opacity: .0; }
.pile.merge .pile-count { opacity: 0; transition: opacity .3s; }
.pick-card::after {
  content: ''; position: absolute; inset: -40%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,233,168,.45) 50%, transparent 60%);
  transform: translateX(-120%); pointer-events: none;
}
.pick-card:hover:not(:disabled), .pick-card:focus-visible {
  --lift: -26px; --sc: 1.06; z-index: 50;
  box-shadow: 0 16px 30px rgba(0,0,0,.55), 0 0 26px rgba(216,180,106,.55);
}
.pick-card:hover:not(:disabled)::after { animation: sheen .8s ease-out; }
/* 고르는 순간: 부채에서 쑥 뽑혀 올라오며 빛남 */
.pick-card.chosen {
  --lift: -70px; --sc: 1.2; z-index: 60;
  box-shadow: 0 0 0 2px #fff6d8, 0 0 60px rgba(255,233,168,.95);
  transition-duration: .25s;
}
.pick-card.gone { opacity: 0; --sc: .6; pointer-events: none; }
/* 3장을 다 고르면 남은 카드가 가운데로 모였다가 사라짐 */
#fan.gather .pick-card:not(.gone) { --a: 0deg !important; --lift: 30px; opacity: 0; filter: blur(3px); transition-duration: .7s; transition-delay: calc(var(--i) * 12ms); }

/* 하늘을 나는 카드 (복제본) */
.flyer { position: fixed; z-index: 70; pointer-events: none; border-radius: 10px; will-change: transform; }
/* 화면 전체가 순간 번쩍 */
#flashveil {
  position: fixed; inset: 0; z-index: 45; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at var(--fx, 50%) var(--fy, 50%), rgba(255,240,200,.55), rgba(216,180,106,.15) 30%, transparent 60%);
}
#flashveil.on { animation: veil .55s ease-out; }
@keyframes veil { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* ───── 3단계: 세 장 펼치기 ───── */
#spread-wrap { display: flex; flex-direction: column; gap: 16px; }
#spread-guide { margin: 0; text-align: center; color: var(--mist); }
#spread {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: start;
}
.card-slot { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.slot-label { text-align: center; display: flex; flex-direction: column; }
.slot-label .pos { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: .1em; }
.slot-label .sub { font-size: .8rem; color: var(--mist); }

/* 3D 뒤집기 카드 */
.card3d {
  width: 100%; max-width: 170px; aspect-ratio: 2 / 3;
  perspective: 1000px;
  background: none; border: 0; padding: 0; cursor: pointer;
  border-radius: 12px;
}
.card3d:disabled { cursor: default; }
.card-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .9s cubic-bezier(.3,.7,.2,1);
}
.card3d { position: relative; }
.card3d:not(.flipped) { animation: floatIdle 3s ease-in-out 1.8s infinite; }
@keyframes floatIdle { 50% { transform: translateY(-6px); } }
.card3d:not(.flipped):hover .card-inner { transform: rotateY(12deg) translateY(-6px); }
.card3d:not(.flipped) .card-inner > .card-back { box-shadow: 0 6px 18px rgba(0,0,0,.45), 0 0 22px rgba(216,180,106,.25), inset 0 0 0 4px #171936, inset 0 0 0 5px rgba(216,180,106,.45); }

/* 뒤집기: 공중으로 떠오르며 한 바퀴 반 회전 → 앞면 공개 */
.card3d.flipped .card-inner {
  transform: rotateY(180deg);
  animation: flipSpin 1.25s cubic-bezier(.35,.1,.2,1) both;
}
@keyframes flipSpin {
  0%   { transform: rotateY(0) translateY(0) scale(1); }
  45%  { transform: rotateY(300deg) translateY(-28px) scale(1.18); }
  75%  { transform: rotateY(520deg) translateY(-8px) scale(1.06); }
  100% { transform: rotateY(540deg) translateY(0) scale(1); }
}
/* 앞면이 보이는 순간 터지는 빛 */
.card3d .flash {
  position: absolute; inset: -30%;
  background: radial-gradient(circle, rgba(255,250,230,.95) 0%, color-mix(in srgb, var(--suit) 70%, transparent) 30%, transparent 62%);
  opacity: 0; pointer-events: none; border-radius: 50%;
}
.card3d.flipped .flash { animation: flash 1.4s ease-out .6s both; }
@keyframes flash { 0% { opacity: 0; transform: scale(.4); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
/* 뒤집힌 카드 주위에 남는 수트 색 오라 */
.card3d.flipped .card-face { animation: aura 3s ease-in-out 1.3s infinite; }
@keyframes aura {
  0%, 100% { box-shadow: 0 0 26px color-mix(in srgb, var(--suit) 55%, transparent); }
  50% { box-shadow: 0 0 52px color-mix(in srgb, var(--suit) 85%, transparent); }
}
.card3d.is-major.flipped .card-face { animation-name: auraMajor; }
@keyframes auraMajor {
  0%, 100% { box-shadow: 0 0 36px rgba(255,220,140,.6); }
  50% { box-shadow: 0 0 70px rgba(255,233,168,.95); }
}
.major-tag {
  display: inline-block; vertical-align: 2px; margin-left: 6px;
  white-space: nowrap;
  font: 700 .68rem/1 var(--font-display); letter-spacing: .1em;
  color: var(--night); background: var(--gilt);
  padding: 4px 8px; border-radius: 999px;
  animation: tagIn .6s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes tagIn { from { opacity: 0; transform: scale(.6); } }
.card-inner > .card-back,
.card-inner > .card-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.card-inner > .card-back { font-size: 2rem; }
.card-face { transform: rotateY(180deg); border-radius: 12px; }
.card3d.flipped .card-face { box-shadow: 0 0 34px rgba(216,180,106,.35); }

/* 카드 앞면 그림 */
.face-body {
  height: 100%;
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--suit) 22%, transparent) 0 34%, transparent 35%),
    var(--face);
  color: var(--face-ink);
  border: 2px solid var(--suit);
  box-shadow: inset 0 0 0 5px var(--face), inset 0 0 0 6px color-mix(in srgb, var(--suit) 60%, transparent);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 10px 8px;
  text-align: center;
}
.face-body { position: relative; overflow: hidden; }
.face-body::after {
  content: ''; position: absolute; inset: -40%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.75) 50%, transparent 58%);
  transform: translateX(-130%);
  pointer-events: none;
}
.card3d.flipped .face-body::after { animation: sheen 1.1s ease-out 1.15s both; }
.face-body.reversed { transform: rotate(180deg); }

/* 이미지 카드: 그림에 테두리와 글자가 이미 들어 있어서 그림만 꽉 채워요 */
.face-body.face-img { padding: 0; border: 0; box-shadow: none; background: #0d0f22; display: block; }
.face-img img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 12px; }

.topnav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.deck-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.deck-label { font-size: .75rem; color: var(--mist); padding: 0 6px 0 8px; }
.deck-btn {
  font: inherit; font-size: .82rem; cursor: pointer; color: var(--mist);
  background: transparent; border: 0; border-radius: 999px; padding: 4px 12px;
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2;
}
.deck-btn small { font-size: .62rem; opacity: .8; }
.deck-btn[aria-pressed="true"] { background: var(--gilt); color: var(--night); }
.deck-btn:disabled { cursor: not-allowed; opacity: .5; }
.credit { font-size: .72rem; opacity: .75; margin-top: 4px !important; }
.topnav a {
  color: var(--gilt); font-size: .88rem; text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--gilt) 50%, transparent);
  border-radius: 999px; padding: 4px 14px;
}
.topnav a:hover { background: var(--gilt-soft); }
.face-num { font-family: var(--font-numeral); font-weight: 700; font-size: .9rem; color: var(--suit); letter-spacing: .08em; }
.face-icon { display: grid; place-items: center; font-size: clamp(2rem, 7vw, 3.2rem); line-height: 1; }
.face-name { font-family: var(--font-display); font-weight: 700; font-size: clamp(.78rem, 2.2vw, .95rem); line-height: 1.3; }
.face-en { display: block; font-family: var(--font-numeral); font-size: .6rem; color: color-mix(in srgb, var(--face-ink) 60%, transparent); letter-spacing: .06em; }

/* 카드 아래 해석 */
.reading {
  width: 100%;
  background: var(--night-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 6px;
  animation: rise .6s both;
}
.reading h3 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; }
.dir { display: inline-block; font-size: .72rem; padding: 1px 8px; border-radius: 999px; margin-left: 6px; vertical-align: 2px; border: 1px solid var(--gilt); color: var(--gilt); font-family: var(--font-body); }
.dir.is-rev { border-color: var(--rev); color: var(--rev); }
.keywords { margin: 0; font-size: .82rem; color: var(--gilt); }
.reading p { margin: 0; font-size: .92rem; }
.reading .lead { color: var(--mist); font-size: .82rem; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }

/* ───── 4단계: 종합 메시지 ───── */
#result {
  background: linear-gradient(180deg, var(--night-2), transparent);
  border-top: 1px solid var(--gilt);
  border-radius: 16px;
  padding: 26px 22px;
  display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center;
  animation: rise .8s both;
}
#result-text { margin: 0; max-width: 34em; display: flex; flex-direction: column; gap: 10px; }
#result-text p { margin: 0; }
.result-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.more { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: center; align-items: center; font-size: .88rem; border-top: 1px solid var(--line); padding-top: 14px; width: 100%; }
.more span { color: var(--mist); }
.more a { color: var(--gilt); text-decoration: none; }
.more a:hover { text-decoration: underline; }

footer { text-align: center; color: var(--mist); font-size: .8rem; }
footer p { margin: 0; }

/* ───── 휴대폰 화면 ───── */
@media (max-width: 640px) {
  .wrap { padding-block: 28px 40px; gap: 32px; }
  #spread { grid-template-columns: 1fr; gap: 28px; }
  .card3d { max-width: 150px; }
  .readers { gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reader-desc { font-size: .78rem; }
  .bubble { font-size: .88rem; }
}

/* 움직임 줄이기 설정을 켠 사람을 위한 배려 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

[hidden] { display: none !important; }

/* ── 현대식 덱: 그림 위에 금빛 테두리·숫자·제목을 코드로 얹어요 ── */
.face-img.framed { position: relative; overflow: hidden; container-type: inline-size; }
.face-img.framed .mf-frame {
  position: absolute; inset: 0; border-radius: 12px; pointer-events: none;
  box-shadow: inset 0 0 0 2px #e8c77a, inset 0 0 0 5px rgba(13, 15, 34, .55), inset 0 0 0 6px rgba(232, 199, 122, .7), inset 0 0 24px rgba(0, 0, 0, .45);
}
.face-img.framed .mf-frame::before, .face-img.framed .mf-frame::after {
  content: ''; position: absolute; width: 14%; aspect-ratio: 1; border: 1.5px solid #e8c77a; border-radius: 2px; transform: rotate(45deg);
}
.face-img.framed .mf-frame::before { left: -7%; top: -7%; }
.face-img.framed .mf-frame::after { right: -7%; bottom: -7%; }
.face-img.framed .mf-num {
  position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
  font-family: var(--font-numeral); font-weight: 700; color: #ffe9b0; font-size: max(9px, 9cqi); letter-spacing: .08em;
  text-shadow: 0 0 8px rgba(255, 210, 130, .7), 0 1px 2px #000;
}
.face-img.framed .mf-title {
  position: absolute; left: 0; right: 0; bottom: 0; height: 12%; padding: 0 6%; text-align: center; justify-content: center;
  background: #07080f; border-top: 1px solid #e8c77a;
  font-family: var(--font-numeral); font-weight: 700; letter-spacing: .06em; color: #ffe9b0; font-size: max(8px, 6.4cqi); line-height: 1.15;
  display: flex; flex-direction: column; align-items: center; gap: 1px; text-shadow: 0 1px 3px #000;
}
.face-img.framed .mf-title small { font-family: var(--font-numeral); font-weight: 500; font-size: .55em; letter-spacing: .14em; color: #d9c08a; text-transform: uppercase; }

/* ── 각 집의 기원 이야기 (페이지 맨 위) ── */
.origin { background: rgba(14, 12, 30, .62); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.origin .o-kicker { font-family: var(--font-numeral); font-size: .72rem; letter-spacing: .25em; color: var(--gilt); }
.origin h2 { margin: 0; font-size: 1.25rem; }
.origin .o-lead { margin: 0; color: var(--ink); line-height: 1.7; }
.o-time { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.o-time li { border-left: 2px solid var(--gilt); padding: 4px 0 4px 12px; min-width: 0; }
.o-time b { display: block; font-family: var(--font-display); color: var(--gilt); font-size: .95rem; }
.o-time span { color: var(--mist); font-size: .84rem; line-height: 1.5; }
.origin details { border-top: 1px solid var(--line); padding-top: 10px; }
.origin summary { cursor: pointer; color: var(--gilt); font-size: .9rem; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.origin summary::-webkit-details-marker { display: none; }
.origin summary::before { content: '＋'; font-size: .8rem; }
.origin details[open] summary::before { content: '－'; }
.o-body { display: flex; flex-direction: column; gap: 14px; margin-top: 12px; }
.o-body h3 { margin: 0 0 4px; font-family: var(--font-display); font-size: 1rem; color: var(--ink); }
.o-body p { margin: 0; color: var(--mist); line-height: 1.75; font-size: .93rem; }
.o-body .o-note { background: var(--gilt-soft); border-radius: 12px; padding: 12px 14px; color: var(--ink); }
.o-src { font-size: .78rem; color: var(--mist); opacity: .8; }

/* ── 홈 화면 설치 안내 (pwa.js) ── */
#install-tip { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 50;
  width: min(440px, calc(100% - 32px)); display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px;
  background: rgba(27, 30, 60, .96); border: 1px solid var(--gilt); box-shadow: 0 10px 30px rgba(0,0,0,.5); color: var(--ink); font-size: .85rem; }
#install-tip img { border-radius: 10px; flex: none; }
#install-tip div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
#install-tip div > b { color: var(--gilt); font-weight: 400; font-family: var(--font-display); }
#install-tip span { color: var(--mist); line-height: 1.5; }
#install-tip .it-go { font: inherit; background: var(--gilt); color: #1b1e3c; border: 0; border-radius: 999px; padding: 7px 14px; cursor: pointer; }
#install-tip .it-x { font: inherit; font-size: 1.2rem; background: none; border: 0; color: var(--mist); cursor: pointer; padding: 4px 6px; }
/* 현대식 덱: 그림은 아래 제목 띠(12%) 위에서 끝나요 — 제목이 그림을 가리지 않게 */
.face-img.framed img { height: 88%; border-radius: 12px 12px 0 0; object-position: 50% 55%; }
.face-img.framed { background: #07080f; }
.reader-mini img { object-position: 50% 18%; }
.portrait img { object-position: 50% 30%; }

/* ───── 집마다의 소개란 (intro.js) ───── */
.intro { background: rgba(14, 12, 30, .66); border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--ink); text-align: left; }
.intro .i-kicker { font-family: var(--font-numeral); font-size: .7rem; letter-spacing: .22em; color: var(--gilt); }
.intro h2 { margin: 0; font-size: 1.25rem; display: flex; flex-direction: column; gap: 2px; text-wrap: balance; }
.intro h2 small { font-family: var(--font-numeral); font-size: .78rem; font-weight: 400; color: var(--mist); letter-spacing: .04em; }
.intro .i-lead { margin: 0; line-height: 1.8; }
.intro .i-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.intro .i-steps li { counter-increment: st; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: .88rem; line-height: 1.6; min-width: 0; }
.intro .i-steps li::before { content: counter(st); display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; margin-right: 6px; border-radius: 50%; background: var(--gilt); color: #1a1030; font-weight: 700; font-size: .8rem; }
.intro details summary { cursor: pointer; color: var(--gilt); font-size: .9rem; }
.intro .i-terms { margin: 10px 0 6px; display: grid; gap: 6px; }
.intro .i-terms div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; font-size: .86rem; }
.intro .i-terms dt { color: var(--gilt); font-weight: 700; }
.intro .i-terms dd { margin: 0; color: var(--mist); }
.intro .i-more { color: var(--mist); font-size: .82rem; }
@media (max-width: 620px) { .intro .i-steps { grid-template-columns: 1fr; } .intro .i-terms div { grid-template-columns: 1fr; gap: 0; } }

/* ───── 캐릭터 무대 (집주인이 크게 맞이해요) ───── */
.hstage { --hc: var(--gilt); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; position: relative; }
.hs-figure { position: relative; width: min(72vw, 320px); max-width: 100%; aspect-ratio: 3 / 4; }
.hs-figure::before { content: ''; position: absolute; inset: 6% 0 14%; border-radius: 50%; background: radial-gradient(closest-side, var(--hc), transparent); opacity: .32; filter: blur(22px); animation: hsAura 5s ease-in-out infinite; }
.hs-figure img { position: relative; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; -webkit-mask-image: radial-gradient(ellipse 58% 64% at 50% 40%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 58% 64% at 50% 40%, #000 58%, transparent 100%); transform-origin: 50% 100%; animation: hsBreath 6s ease-in-out infinite; }
.hstage.talking .hs-figure::before { opacity: .55; }
@keyframes hsBreath { 50% { transform: scale(1.012) translateY(-3px); } }
@keyframes hsAura { 50% { opacity: .5; transform: scale(1.05); } }
.hs-talk { width: min(100%, 560px); margin-top: -70px; position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.hs-name { font-size: .78rem; letter-spacing: .06em; color: var(--hc); background: rgba(10, 9, 24, .78); border: 1px solid var(--hc); border-radius: 999px; padding: 2px 12px; }
.hs-bubble { margin: 0; width: 100%; background: rgba(18, 15, 32, .88); border: 1px solid color-mix(in srgb, var(--hc) 55%, transparent); border-radius: 16px; padding: 14px 16px; font-family: var(--font-display); line-height: 1.7; color: var(--ink); text-align: center; box-shadow: 0 0 34px -12px var(--hc); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); min-height: 3.4em; }
@media (min-width: 760px) {
  .hstage { grid-template-columns: 300px minmax(0, 1fr); align-items: end; justify-items: stretch; }
  .hs-figure { width: 300px; }
  .hs-talk { margin: 0 0 48px -36px; align-items: flex-start; }
  .hs-bubble { text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .hs-figure img, .hs-figure::before { animation: none; } }
.hs-float { position: fixed; z-index: 60; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: min(calc(100% - 32px), 520px); display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 18px; background: rgba(16, 13, 30, .92); border: 1px solid var(--hc, var(--gilt)); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 24px -8px var(--hc, var(--gilt)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: hsUp .35s ease; cursor: pointer; }
.hs-float img { flex: none; width: 52px; height: 52px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 1px solid var(--hc, var(--gilt)); }
.hs-float p { margin: 0; font-family: var(--font-display); font-size: .9rem; line-height: 1.55; color: var(--ink); min-width: 0; }
@keyframes hsUp { from { opacity: 0; transform: translate(-50%, 12px); } }
@media (max-width: 620px) { .hs-float { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } }

/* ───── 신비로운 분위기 (mystic.js) ───── */
.mys-vig, .mys-stars, .mys-mist { position: fixed; inset: 0; pointer-events: none; z-index: -1; }
.mys-vig { background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, rgba(4, 3, 14, .55) 100%); }
.mys-stars {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 246, 220, .9), transparent 60%),
    radial-gradient(1px 1px at 68% 32%, rgba(220, 210, 255, .8), transparent 60%),
    radial-gradient(1.6px 1.6px at 38% 72%, rgba(255, 236, 190, .85), transparent 60%),
    radial-gradient(1px 1px at 86% 84%, rgba(200, 220, 255, .75), transparent 60%),
    radial-gradient(1.3px 1.3px at 52% 8%, rgba(255, 255, 255, .8), transparent 60%),
    radial-gradient(1px 1px at 24% 52%, rgba(230, 210, 255, .7), transparent 60%);
  background-size: 340px 340px; opacity: .55; animation: mysTwinkle 5.5s ease-in-out infinite alternate;
}
.mys-stars.b2 { background-size: 520px 520px; background-position: 120px 80px; animation-duration: 8s; animation-delay: -3s; opacity: .4; }
@keyframes mysTwinkle { from { opacity: .18; } to { opacity: .6; } }
.mys-mist {
  inset: -20% -30%; mix-blend-mode: screen; opacity: .32; will-change: translate;
  background:
    radial-gradient(28% 16% at 22% 70%, rgba(170, 150, 235, .28), transparent 70%),
    radial-gradient(26% 14% at 72% 38%, rgba(150, 175, 240, .22), transparent 70%),
    radial-gradient(34% 18% at 50% 92%, rgba(210, 180, 255, .2), transparent 70%);
  animation: mysDrift 38s ease-in-out infinite alternate;
}
.mys-mist.m2 { opacity: .22; animation-duration: 54s; animation-direction: alternate-reverse; transform: scaleX(-1); }
@keyframes mysDrift { from { translate: -6% 1%; } to { translate: 6% -2%; } }
.mys-veil { position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: 0; transition: opacity .38s ease;
  background: radial-gradient(circle at 50% 42%, rgba(255, 244, 214, .9) 0, rgba(210, 190, 255, .55) 12%, #0a0918 46%); }
.mys-veil.on { opacity: 1; }
.mys-ripple { position: fixed; z-index: 9980; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 240, 200, .9), rgba(200, 170, 255, .35) 45%, transparent 70%); animation: mysRipple .9s ease-out forwards; }
@keyframes mysRipple { to { transform: scale(9); opacity: 0; } }
/* 집주인 무대: 빛 속에서 서서히 나타나요 */
.hs-figure img { animation: hsBreath 6s ease-in-out infinite, hsAppear .6s ease-out both; }
@keyframes hsAppear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; } }
.hs-figure::after { content: ''; position: absolute; inset: 10% 12% 20%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--hc) 40%, transparent), transparent 70%); mix-blend-mode: screen; opacity: .25; animation: hsAura 5s ease-in-out infinite reverse; }
@media (prefers-reduced-motion: reduce) { .mys-stars, .mys-mist, .hs-figure img, .hs-figure::after { animation: none !important; } .mys-veil { transition: none; } }