/* ─────────────────────────────────────────────────────────────
   팔레트는 덱 자체에서 가져왔습니다.
   ink/veil = 카드 뒷면, parchment = 1909년 인쇄 용지,
   gilt = 메이저 아르카나의 노란 하늘, vermilion = 인물들의 붉은 로브.
   ───────────────────────────────────────────────────────────── */
:root{
  --ink:       #120e1f;
  --ink-2:     #1a1330;
  --veil:      #241b3c;
  --veil-line: #3a2d5c;
  --parchment: #efe3c8;
  --parchment-dim: #cdc0a6;
  --mist:      #9186ad;
  --gilt:      #c9a227;
  --gilt-lo:   #8d7020;
  --vermilion: #c04a33;

  --f-display: 'Gowun Batang', 'Cormorant Garamond', serif;
  --f-latin:   'Cormorant Garamond', 'Gowun Batang', serif;
  --f-body:    'IBM Plex Sans KR', system-ui, sans-serif;

  --card-w: clamp(96px, 15vw, 132px);
  --ratio: 0.6;
  --card-h: calc(var(--card-w) / var(--ratio));
  --fan-top: 38px;   /* js가 덮어씁니다 */
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:
    radial-gradient(120% 80% at 50% -10%, #2a1f47 0%, transparent 55%),
    radial-gradient(90% 60% at 85% 105%, #1d2440 0%, transparent 60%),
    var(--ink);
  background-attachment: fixed;
  color:var(--parchment);
  font-family:var(--f-body);
  font-weight:300;
  line-height:1.75;
  overflow-x:hidden;
}
h1,h2,h3{ margin:0; font-weight:400; line-height:1.25; }
p{ margin:0; }
button{ font:inherit; color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
:focus-visible{ outline:2px solid var(--gilt); outline-offset:3px; border-radius:2px; }

/* ── 머리말 ───────────────────────────────────────────────── */
.masthead{
  text-align:center;
  padding:clamp(3rem,9vw,6rem) 1.25rem clamp(1.5rem,4vw,2.5rem);
}
.eyebrow{
  font-family:var(--f-latin);
  font-size:.82rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gilt); opacity:.8;
}
.wordmark{
  display:flex; align-items:baseline; justify-content:center;
  gap:.7em; margin:.45em 0 .5em;
}
.wordmark-ko{
  font-family:var(--f-display); font-weight:700;
  font-size:clamp(3rem,11vw,5.5rem); letter-spacing:.06em;
  background:linear-gradient(178deg,#f3e2b0 8%,var(--gilt) 52%,#7d6320 98%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wordmark-en{
  font-family:var(--f-latin); font-style:italic; font-weight:300;
  font-size:clamp(1rem,2.6vw,1.5rem); letter-spacing:.22em;
  color:var(--mist);
}
.lede{ color:var(--parchment-dim); font-size:.95rem; }

/* ── 스프레드 선택 ────────────────────────────────────────── */
.table{ padding:0 1rem; }
.spreadbar{
  display:flex; justify-content:center; gap:.4rem;
  flex-wrap:wrap; margin:0 auto; max-width:34rem;
}
.spread-btn{
  display:flex; align-items:baseline; gap:.5rem;
  padding:.55rem 1.05rem;
  background:transparent; border:1px solid var(--veil-line);
  border-radius:999px; cursor:pointer;
  color:var(--parchment-dim);
  transition:border-color .25s, color .25s, background .25s;
}
.spread-btn:hover{ border-color:var(--gilt-lo); color:var(--parchment); }
.spread-btn .spread-n{
  font-family:var(--f-body); font-weight:600; font-size:.9rem;
  font-variant-numeric:tabular-nums; color:var(--gilt); opacity:.9;
}
.spread-btn .spread-name{ font-size:.9rem; }
.spread-btn.is-on{
  background:rgba(201,162,39,.09);
  border-color:var(--gilt); color:var(--parchment);
}
.spread-desc{
  text-align:center; color:var(--mist);
  font-size:.85rem; margin-top:.85rem;
}

/* ── 시그니처: 78장 부채꼴 덱 ─────────────────────────────────
   카드는 자기 중심을 축으로 회전하고, 호 위의 자리는 --tx/--ty 로
   옮겨 놓습니다. (먼 회전축을 쓰면 섞는 동작과 보간이 어긋납니다.)
   호의 기하는 컨테이너 폭에 맞춰 js/app.js가 계산합니다.
   ───────────────────────────────────────────────────────── */
.fan-stage{ margin:clamp(1.25rem,3.5vw,2.25rem) auto 0; }
.fan-scroll{
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:thin; scrollbar-color:var(--veil-line) transparent;
  -webkit-overflow-scrolling:touch;
}
.fan-scroll::-webkit-scrollbar{ height:6px; }
.fan-scroll::-webkit-scrollbar-thumb{ background:var(--veil-line); border-radius:3px; }
.fan{ position:relative; margin:0 auto; }

.fan-card{
  position:absolute; left:50%; top:var(--fan-top);
  width:var(--card-w); height:var(--card-h);
  margin-left:calc(var(--card-w) / -2);
  padding:0; border:0; background:none; cursor:pointer;
  transform:translate(var(--tx, 0px), calc(var(--ty, 0px) + var(--lift, 0px))) rotate(var(--a, 0deg));
  transition:transform .38s var(--ease), filter .25s, opacity .45s;
  filter:drop-shadow(-2px 2px 5px rgba(0,0,0,.55));
  animation:deal .58s var(--ease) backwards;
  animation-delay:var(--d);
}
.fan-card svg{ width:100%; height:100%; display:block; border-radius:5px; }
.fan-card:hover,.fan-card:focus-visible{
  --lift:-30px;
  filter:drop-shadow(0 12px 22px rgba(201,162,39,.4));
  z-index:200;
}
.fan .fan-card.is-taken{
  opacity:0; pointer-events:none;
  transform:translate(var(--tx, 0px), calc(var(--ty, 0px) - 56px)) rotate(var(--a, 0deg)) scale(.8);
}
.fan.is-done .fan-card{ opacity:.16; pointer-events:none; }

@keyframes deal{
  from{ transform:translate(0,46px) scale(.92); opacity:0; }
}

/* ── 섞기: 모으기 → 자르기 → 펼치기 ──────────────────────────
   타로 덱을 실제로 다루는 순서 그대로, 큰 동작 세 번으로만 갑니다.
   튕기거나 흩어지는 이징은 쓰지 않습니다.
   ───────────────────────────────────────────────────────── */
.fan.is-busy .fan-card{ pointer-events:none; }

/* 1. 모으기 — 한 벌로 가지런히 포갭니다 */
.fan.s-gather .fan-card{
  transform:translate(var(--jx, 0px), calc(var(--jy, 0px) + var(--stack-y, 0px))) rotate(var(--jr, 0deg));
  transition-duration:.52s;
  transition-timing-function:cubic-bezier(.4,0,.2,1);
}
/* 2. 자르기 — 위쪽 뭉치를 덜어 옆에 놓습니다 */
.fan.s-cut .fan-card{
  transform:translate(calc(var(--jx, 0px) + var(--cx, 0px)),
                      calc(var(--jy, 0px) + var(--cy, 0px) + var(--stack-y, 0px))) rotate(var(--jr, 0deg));
  transition-duration:.42s;
  transition-timing-function:cubic-bezier(.32,0,.24,1);
}
/* 3. 펼치기 — 왼쪽부터 차례로 리본을 긋듯 */
.fan.s-spread .fan-card{
  transition-duration:.62s;
  transition-delay:var(--sd);
  transition-timing-function:cubic-bezier(.16,.72,.24,1);
}

.fan-swipe{
  text-align:center; margin-top:.85rem;
  font-size:.72rem; letter-spacing:.08em; color:var(--mist); opacity:.75;
}
.fan-swipe::before{ content:"↔  "; color:var(--gilt); }
.fan-swipe[hidden]{ display:none; }

.fan-tools{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.75rem,3vw,1.75rem); flex-wrap:wrap;
  margin-top:1.25rem;
}
.fan-hint{ font-size:.85rem; color:var(--mist); letter-spacing:.02em; }
.fan-hint b{
  font-family:var(--f-body); font-weight:500; font-size:.85rem;
  font-variant-numeric:tabular-nums;
  color:var(--gilt); margin-left:.45rem; letter-spacing:.08em;
}
.btn[disabled]{ opacity:.4; cursor:default; }
.btn[disabled]:hover{ border-color:var(--veil-line); color:var(--parchment-dim); background:transparent; }

/* ── 배치판 ───────────────────────────────────────────────── */
.board{
  display:grid; justify-content:center; gap:clamp(.75rem,2.4vw,1.6rem);
  margin:clamp(2rem,6vw,3.5rem) auto 0; max-width:64rem;
}
.board[data-spread="one"]{ grid-template-columns:repeat(1,auto); }
.board[data-spread="three"]{ grid-template-columns:repeat(3,auto); }
.board[data-spread="celtic"]{
  grid-template-columns:repeat(4,auto);
  grid-template-areas:
    ".  p5 .  p10"
    "p4 p1 p6 p9"
    ".  p3 .  p8"
    ".  .  .  p7";
  align-items:center;
}
.board[data-spread="celtic"] .slot:nth-child(1){ grid-area:p1; }
.board[data-spread="celtic"] .slot:nth-child(2){ grid-area:p1; }
.board[data-spread="celtic"] .slot:nth-child(3){ grid-area:p3; }
.board[data-spread="celtic"] .slot:nth-child(4){ grid-area:p4; }
.board[data-spread="celtic"] .slot:nth-child(5){ grid-area:p5; }
.board[data-spread="celtic"] .slot:nth-child(6){ grid-area:p6; }
.board[data-spread="celtic"] .slot:nth-child(7){ grid-area:p7; }
.board[data-spread="celtic"] .slot:nth-child(8){ grid-area:p8; }
.board[data-spread="celtic"] .slot:nth-child(9){ grid-area:p9; }
.board[data-spread="celtic"] .slot:nth-child(10){ grid-area:p10; }
/* 2번 카드는 전통대로 1번 위에 가로로 겹칩니다 */
.board[data-spread="celtic"] .slot:nth-child(2){
  transform:rotate(90deg); z-index:3;
}
.board[data-spread="celtic"] .slot:nth-child(2) .slot-label,
.board[data-spread="celtic"] .slot:nth-child(2) .slot-caption{ display:none; }

.slot{ width:var(--card-w); }
.slot-label{
  display:flex; align-items:flex-end; justify-content:center; gap:.35em;
  min-height:2.4em; text-align:center; margin-bottom:.5rem;
  font-family:var(--f-body); font-size:.66rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--mist);
}
.slot-label i{
  font-style:normal; font-family:var(--f-body);
  font-size:.72rem; letter-spacing:.12em;
}
/* 빈 자리는 뒤집힌 카드가 아니라 '카드가 놓일 자리'로 보여야 합니다.
   움푹한 판에 가는 테두리, 가운데 작은 표식. */
.slot-frame{
  position:relative; width:100%; aspect-ratio:var(--ratio);
}
.slot-frame::after{
  content:""; position:absolute; inset:0; border-radius:6px;
  border:1px solid var(--veil-line);
  background:rgba(0,0,0,.24);
  box-shadow:inset 0 2px 12px rgba(0,0,0,.5);
  transition:opacity .35s;
}
.slot-frame::before{
  content:""; position:absolute; left:50%; top:50%;
  width:9px; height:9px; margin:-5px 0 0 -5px;
  transform:rotate(45deg);
  border:1px solid var(--gilt); opacity:.28;
  transition:opacity .3s;
  z-index:1;
}
.slot.is-placing .slot-frame::before{ opacity:0; }
.slot.is-placing .slot-frame::after{ opacity:0; }

/* 카드는 자리에 놓이는 순간 나타나고(뒷면), 그다음 뒤집힙니다.
   등장(opacity)과 뒤집기(rotateY)를 다른 요소로 나눈 이유:
   opacity < 1 인 요소는 preserve-3d 가 평탄화돼서 뒤집기 도중
   앞뒷면이 뒤섞입니다. */
.card-wrap{
  position:absolute; inset:0; z-index:2;
  perspective:1200px;
  opacity:0; transform:translateY(-10px) scale(.94);
  transition:transform .34s var(--ease), opacity .26s;
}
.slot.is-placing .card-wrap{ opacity:1; transform:none; }

.card{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateY(180deg);
  transition:transform .82s var(--ease);
}
.slot.is-filled .card{ transform:rotateY(0deg); }
.card-face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:6px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
}
.card-front{ background:var(--ink-2); }
.card-front img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-front.is-rev img{ transform:rotate(180deg); }
.card-front.is-rev{ box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 0 1px var(--vermilion); }
.card-back{ transform:rotateY(180deg); }
.card-back svg{ width:100%; height:100%; display:block; }

.slot-caption{
  margin-top:.6rem; text-align:center;
  font-family:var(--f-display); font-size:.82rem; line-height:1.4;
  color:var(--parchment); opacity:0; transition:opacity .4s .5s;
}
.slot.is-filled .slot-caption{ opacity:1; }
.slot-caption{ transition-delay:.7s; }
.cross-note{
  display:block; margin-top:.35rem; padding-top:.35rem;
  border-top:1px solid var(--veil-line);
  font-family:var(--f-body); font-size:.68rem; letter-spacing:.04em;
  color:var(--mist);
}
.cross-note b{ color:var(--parchment); font-weight:400; }
.cross-note i{ font-style:normal; color:var(--vermilion); }
.slot-caption em{
  display:block; font-style:normal; font-size:.68rem;
  font-family:var(--f-body); letter-spacing:.1em;
  color:var(--vermilion);
}

/* ── 버튼 ─────────────────────────────────────────────────── */
.actions{
  display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap;
  margin-top:clamp(2rem,5vw,3rem);
}
.btn{
  padding:.6rem 1.4rem; border-radius:999px; cursor:pointer;
  font-size:.85rem; letter-spacing:.05em;
  border:1px solid var(--veil-line); background:transparent;
  color:var(--parchment-dim);
  transition:border-color .25s, color .25s, background .25s;
}
.btn:hover{ border-color:var(--gilt); color:var(--parchment); background:rgba(201,162,39,.07); }
.btn-quiet{ border-color:transparent; font-size:.78rem; color:var(--mist); padding:.3rem .7rem; }
.btn-quiet:hover{ background:transparent; border-color:var(--veil-line); }

/* ── 해석 ─────────────────────────────────────────────────── */
.reading{ max-width:44rem; margin:0 auto; padding:0 1.25rem; }
.reading:empty{ display:none; }
.reading-head{
  margin:clamp(3rem,8vw,5rem) 0 2.5rem; text-align:center;
}
.sec-title{
  font-family:var(--f-display); font-size:1.4rem; letter-spacing:.06em;
}
.reading-head .sec-title::after{
  content:""; display:block; width:2.5rem; height:1px;
  background:var(--gilt); opacity:.6; margin:1rem auto 0;
}

.entry{
  display:grid; grid-template-columns:var(--card-w) 1fr;
  gap:clamp(1rem,3vw,2rem);
  padding:1.75rem 0; border-top:1px solid var(--veil-line);
}
.entry:first-of-type{ border-top:0; }
.entry-thumb{ width:100%; border-radius:4px; display:block; }
.entry-thumb.is-rev{ transform:rotate(180deg); }
.entry-pos{
  font-family:var(--f-body); font-size:.68rem; font-variant-numeric:tabular-nums;
  letter-spacing:.22em; text-transform:uppercase; color:var(--mist);
}
.entry-name{
  font-family:var(--f-display); font-weight:700;
  font-size:1.3rem; margin:.15rem 0 .1rem;
}
.entry-numeral{
  font-family:var(--f-latin); font-variant-numeric:lining-nums; font-size:.95rem;
  color:var(--gilt); letter-spacing:.12em; margin-left:.5rem; font-weight:400;
}
.entry-dir{
  display:inline-block; font-size:.68rem; letter-spacing:.14em;
  padding:.12rem .55rem; border-radius:999px; vertical-align:.18em;
  border:1px solid currentColor; margin-left:.5rem;
}
.dir-up{ color:var(--gilt); }
.dir-rev{ color:var(--vermilion); }
.entry-kw{
  display:flex; flex-wrap:wrap; gap:.4rem; margin:.7rem 0 .8rem; padding:0; list-style:none;
}
.entry-kw li{
  font-size:.72rem; letter-spacing:.06em; color:var(--parchment-dim);
  border:1px solid var(--veil-line); border-radius:3px; padding:.1rem .5rem;
}
.entry-text{
  font-family:var(--f-display); font-size:1rem; line-height:1.9;
  color:var(--parchment-dim);
}

/* ── 기록 ─────────────────────────────────────────────────── */
.log{ max-width:44rem; margin:clamp(4rem,10vw,7rem) auto 0; padding:0 1.25rem; }
.log-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-bottom:.8rem; border-bottom:1px solid var(--veil-line);
}
.log-list{ list-style:none; margin:0; padding:0; }
.log-item{
  display:flex; align-items:baseline; gap:.9rem; flex-wrap:wrap;
  padding:.85rem 0; border-bottom:1px solid rgba(58,45,92,.5);
  font-size:.85rem;
}
.log-when{
  font-family:var(--f-latin); font-size:.85rem;
  color:var(--mist); letter-spacing:.08em; min-width:8.5rem;
}
.log-spread{ color:var(--gilt); font-size:.78rem; letter-spacing:.08em; }
.log-cards{ color:var(--parchment-dim); flex:1 1 12rem; }
.log-open{
  border:0; background:none; cursor:pointer; padding:.2rem .4rem;
  color:var(--mist); font-size:.75rem; letter-spacing:.1em;
  border-bottom:1px solid transparent;
}
.log-open:hover{ color:var(--parchment); border-bottom-color:var(--gilt); }

/* ── 꼬리말 · 토스트 ──────────────────────────────────────── */
.colophon{
  max-width:44rem; margin:clamp(4rem,10vw,7rem) auto 0;
  padding:2rem 1.25rem 4rem; text-align:center;
  border-top:1px solid var(--veil-line);
  color:var(--mist); font-size:.76rem; line-height:2;
}
.toast{
  position:fixed; left:50%; bottom:2rem; transform:translate(-50%,1.5rem);
  background:var(--veil); border:1px solid var(--gilt-lo); border-radius:999px;
  padding:.55rem 1.3rem; font-size:.82rem; color:var(--parchment);
  opacity:0; pointer-events:none; transition:opacity .3s, transform .3s;
  z-index:50;
}
.toast.is-up{ opacity:1; transform:translate(-50%,0); }

/* ── 반응형 ───────────────────────────────────────────────── */
@media (max-width:760px){
  :root{ --card-w:clamp(74px,23vw,104px); }
  .board[data-spread="three"]{ grid-template-columns:repeat(3,auto); }
  .board[data-spread="celtic"]{
    grid-template-columns:repeat(2,auto);
    grid-template-areas:none;
  }
  .board[data-spread="celtic"] .slot{ grid-area:auto !important; }
  .board[data-spread="celtic"] .slot:nth-child(2){ transform:none; }
  .board[data-spread="celtic"] .slot:nth-child(2) .slot-label{ transform:none; }
  .entry{ grid-template-columns:calc(var(--card-w) * .8) 1fr; }
  .log-when{ min-width:0; }
}
@media (max-width:420px){
  .wordmark{ flex-direction:column; align-items:center; gap:.2em; }
}

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