/* ============================================================
 *  타로 — 라우트 스코프 다크 테마 + 카드 뽑기 애니메이션
 *
 *  테마 락: 모든 규칙은 body[data-route="tarot"] 아래에만 산다.
 *  사주 라우트의 라이트 토큰을 절대 건드리지 않는다.
 *  액센트는 골드 #E8B84B 하나로 고정 (배경 #0B0B10 대비 ≈10:1, AA 통과).
 * ============================================================ */

body[data-route="tarot"] {
  --t-bg:      #0B0B10;
  --t-bg-2:    #14131C;
  --t-bg-3:    #1D1B27;
  --t-line:    #2A2836;
  --t-ink:     #F4F1E8;
  --t-ink-2:   #C7C1B4;
  --t-ink-3:   #9A9486;  /* 본문 보조 — 배경 대비 ≈5.4:1 */
  --t-gold:    #E8B84B;
  --t-gold-2:  #C79A33;
  --t-gold-soft: rgba(232,184,75,.12);
  --t-rev:     #C77DFF;  /* 역방향 표식 전용 (액센트 아님) */

  background: var(--t-bg);
  color: var(--t-ink);
}

/* 상단바도 함께 어두워져야 라우트 안에서 테마가 갈라지지 않는다 */
body[data-route="tarot"] .topbar {
  background: rgba(11,11,16,.78);
  border-bottom-color: rgba(255,255,255,.06);
}
body[data-route="tarot"] .brand-name { color: var(--t-ink); }
body[data-route="tarot"] .brand-sub { color: var(--t-ink-3); }
body[data-route="tarot"] .brand-mark { background: var(--t-gold); color: #14131C; }
body[data-route="tarot"] .icon-btn {
  background: var(--t-bg-3); color: var(--t-ink-2); box-shadow: none;
  border: 1px solid var(--t-line);
}
body[data-route="tarot"] .to-top {
  background: var(--t-bg-3); color: var(--t-ink); border: 1px solid var(--t-line);
}
body[data-route="tarot"] :focus-visible { outline-color: var(--t-gold); }

#route-tarot .view.hidden { display: none; }

/* ── 주제 선택 ────────────────────────────────────────── */
.t-hero { padding: 26px 6px 20px; }
.t-hero-title {
  font-size: 27px; font-weight: 800; letter-spacing: -.03em;
  margin: 0 0 9px; line-height: 1.3; color: var(--t-ink);
}
.t-hero-desc { font-size: 14.5px; color: var(--t-ink-3); margin: 0; line-height: 1.6; }

.t-topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.t-topic {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 16px 6px 13px;
  background: var(--t-bg-2); border: 1px solid var(--t-line);
  border-radius: 15px; color: var(--t-ink-2);
  font-family: inherit; font-size: 14px; font-weight: 700;
  transition: border-color .16s ease, background .16s ease, transform .16s ease;
}
.t-topic small { font-size: 11px; font-weight: 500; color: var(--t-ink-3); }
.t-topic:hover { border-color: var(--t-gold-2); background: var(--t-bg-3); }
.t-topic:active { transform: scale(.97); }
.t-topic[aria-pressed="true"] {
  background: var(--t-gold-soft); border-color: var(--t-gold); color: var(--t-gold);
}
.t-topic[aria-pressed="true"] small { color: var(--t-gold-2); }

.t-switch {
  display: flex; align-items: flex-start; gap: 11px;
  margin: 20px 0 0; padding: 15px 16px;
  background: var(--t-bg-2); border: 1px solid var(--t-line); border-radius: 15px;
  cursor: pointer;
}
.t-switch input { margin-top: 3px; accent-color: var(--t-gold); width: 17px; height: 17px; }
.t-switch b { display: block; font-size: 14px; color: var(--t-ink); margin-bottom: 3px; }
.t-switch small { display: block; font-size: 12.5px; color: var(--t-ink-3); line-height: 1.55; }

/* ── 뽑기 화면 ────────────────────────────────────────── */
.t-draw-head { padding: 14px 6px 8px; text-align: center; }
.t-draw-topic {
  font-size: 12px; font-weight: 700; color: var(--t-gold);
  margin: 0 0 6px; letter-spacing: .04em;
}
.t-draw-title {
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 14px; line-height: 1.4; color: var(--t-ink);
}

/* 뽑은 카드가 안착하는 세 자리.
 * 뽑기 화면에서는 덱이 주인공이라 슬롯은 작게 — 세로 공간을 덱에 양보한다. */
.t-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.t-slot {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
}
.t-slot-box {
  width: 100%; max-width: 68px; aspect-ratio: 100 / 168;
  border-radius: 9px; border: 1.5px dashed var(--t-line);
  display: grid; place-items: center;
  color: var(--t-ink-3); font-size: 20px; font-weight: 700;
  transition: border-color .2s ease, background .2s ease;
}
.t-slot.filled .t-slot-box {
  border: none; background: transparent;
  animation: t-land .42s cubic-bezier(.16,1,.3,1);
}
.t-slot-label { font-size: 11.5px; color: var(--t-ink-3); font-weight: 600; text-align: center; }
.t-slot.filled .t-slot-label { color: var(--t-gold); }
@keyframes t-land {
  0%   { transform: translateY(-14px) scale(.86); opacity: 0; }
  100% { transform: none; opacity: 1; }
}

/* 슬롯 안의 뒷면 카드 */
.t-slot-card {
  width: 100%; height: 100%; border-radius: 9px;
  background:
    repeating-linear-gradient(45deg, rgba(232,184,75,.10) 0 3px, transparent 3px 6px),
    linear-gradient(160deg, #2A2740, #14131F);
  border: 1px solid rgba(232,184,75,.42);
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}

/* ── 78장 덱 (무지개 아치) ────────────────────────────────
 * 라운드 8. 이전(격자형 부채)에는 카드 한 장이 54px 남짓이라 옆 카드를
 * 잘못 누르는 일이 잦았다. 지금은 카드가 위로 볼록한 원호 위에 놓이고,
 * 꼭대기 한 장만 크게 확대돼 '지금 고를 카드'를 눈으로 확정할 수 있다.
 * 양끝은 화면 밖으로 흘러 무지개처럼 반쯤만 보인다. */
.t-deck-wrap {
  margin: 16px -16px 0;   /* .main 좌우 패딩을 상쇄해 전폭으로 편다 */
  padding: 4px 16px 8px;
  overflow: hidden;
  background:
    radial-gradient(120% 78% at 50% 8%, rgba(232,184,75,.09), transparent 60%),
    var(--t-bg);
}
.t-deck {
  position: relative;
  height: 340px;              /* JS가 아치 크기에 맞춰 덮어쓴다 */
  margin: 0 auto;
  max-width: 470px;
  touch-action: none;         /* 덱 안에서 미는 동작은 페이지 스크롤이 아니라 카드 넘김이다 */
  user-select: none; -webkit-user-select: none;
  cursor: grab;
}
.t-deck.dragging { cursor: grabbing; }
.t-deck:focus-visible { outline: 2px solid var(--t-gold); outline-offset: 4px; border-radius: 14px; }

/* 카드 한 장.
 * 버튼(.t-card)은 원호 위를 **회전만** 하고, 카드 그림(> i)이 확대·부상을 맡는다.
 * 회전축(transform-origin)이 카드 위에서 --r 만큼 아래 — 그 점이 무지개의 중심이다.
 * 두 역할을 한 요소에 합치면 scale 이 회전축을 기준으로 걸려 카드가 궤도를 벗어난다.
 *
 * ⚠️ 버튼은 **실제로 노출된 폭(--hit-w)** 만 차지하고, 카드 그림은 그보다 넓게
 *    삐져나오되 pointer-events 를 끈다. 버튼을 카드 그림만큼 넓게 잡으면 이웃 카드가
 *    서로의 클릭을 가로채 "누른 카드와 다른 카드가 반응하는" 문제가 다시 생긴다.
 *    카드는 원호 위에서 위쪽이 더 벌어지므로 히트 박스도 위쪽 62% 에만 둔다. */
.t-card {
  position: absolute;
  left: 50%; top: var(--pad-top, 84px);
  width: var(--hit-w, 44px); height: calc(var(--ch, 151px) * .62);
  margin-left: calc(var(--hit-w, 44px) / -2);
  border: none; padding: 0; background: none;
  transform-origin: 50% var(--r, 330px);
  transition: transform .34s cubic-bezier(.2,.9,.25,1), opacity .28s ease;
  cursor: pointer;
}
/* 가운데 카드만은 손가락이 편하게 닿도록 히트 박스를 넓힌다.
 * 폭은 이웃 카드의 중심선을 침범하지 않는 선(간격의 85%)까지만. */
.t-card.active::before {
  content: ''; position: absolute; left: 50%; bottom: 0;
  width: calc(var(--hit-w, 44px) * 1.7); height: calc(var(--ch, 151px) * 1.5);
  margin-left: calc(var(--hit-w, 44px) * -.85);
}
.t-card > i {
  display: block; position: absolute;
  left: 50%; top: 0;
  width: var(--cw, 90px); height: var(--ch, 151px);
  margin-left: calc(var(--cw, 90px) / -2);
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg, rgba(232,184,75,.10) 0 3px, transparent 3px 6px),
    linear-gradient(160deg, #2A2740, #14131F);
  border: 1px solid rgba(232,184,75,.22);
  box-shadow: 0 4px 14px rgba(0,0,0,.55);
  pointer-events: none;                 /* 클릭은 언제나 자기 버튼에서만 */
  transform-origin: 50% 100%;
  transform: translateY(var(--lift, 0)) scale(var(--s, 1));
  filter: brightness(var(--dim, 1));
  transition: transform .34s cubic-bezier(.2,.9,.25,1), filter .28s ease,
              box-shadow .28s ease, border-color .28s ease;
}
/* 카드 뒷면 문양 — 순수 CSS, 이미지 없음 */
.t-card > i::after {
  content: ''; position: absolute; inset: 5px;
  border: 1px solid rgba(232,184,75,.3); border-radius: 4px;
}
/* 카드 번호 — 몇 번째 카드인지 카드 위에서 바로 읽힌다.
 * 원호 위에서는 카드 **위쪽**이 더 벌어져 이웃에 덜 가리므로 상단에 둔다. */
.t-card > i > b {
  position: absolute; left: 0; right: 0; top: 6px;
  font-style: normal; font-size: 11px; font-weight: 800;
  text-align: center; color: rgba(232,184,75,.78);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 3px rgba(0,0,0,.85);
  transform: translateX(var(--nx, 0));
  transition: transform .34s cubic-bezier(.2,.9,.25,1);
}
/* 가운데 카드 — 크게·밝게·골드 테두리. 여기서만 뽑힌다. */
.t-card.active > i {
  border-color: var(--t-gold);
  box-shadow: 0 18px 38px rgba(0,0,0,.72), 0 0 26px rgba(232,184,75,.26);
}
.t-card.active > i::after { inset: 6px; border-color: rgba(232,184,75,.62); }
.t-card.active > i > b { top: 10px; font-size: 15px; color: var(--t-gold); }

.t-deck:not(.dragging) .t-card:hover > i { filter: brightness(1.25); }
.t-card:focus-visible { outline: none; }
.t-card:focus-visible > i { border-color: var(--t-gold); filter: brightness(1.25); }

/* 드래그 중에는 손끝을 그대로 따라와야 한다 — 전환을 끈다 */
.t-deck.dragging .t-card, .t-deck.no-anim .t-card,
.t-deck.dragging .t-card > i, .t-deck.no-anim .t-card > i { transition: none; }

/* 섞는 순간 — 아치가 가운데로 접혔다가 새 순서로 다시 펴진다 */
.t-deck.shuffling .t-card {
  transition: transform .32s cubic-bezier(.5,0,.5,1), opacity .32s ease;
  transform: rotate(0deg) !important;
  opacity: .3 !important;
}

/* 뽑힌 카드가 아치에서 빠져나와 슬롯으로 날아가는 잔상 (JS가 위치를 계산해 붙인다) */
.t-ghost {
  position: fixed; z-index: 1200; pointer-events: none;
  border-radius: 8px;
  background:
    repeating-linear-gradient(45deg, rgba(232,184,75,.10) 0 3px, transparent 3px 6px),
    linear-gradient(160deg, #2A2740, #14131F);
  border: 1px solid var(--t-gold);
  box-shadow: 0 20px 44px rgba(0,0,0,.75), 0 0 30px rgba(232,184,75,.3);
  transform-origin: 50% 50%;
  transition: transform .3s cubic-bezier(.16,1,.3,1);
}

/* 카드 번호 카운터 + 뽑기 버튼 */
.t-pickbar { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.t-counter { flex: none; min-width: 98px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px; }
.t-counter-no {
  font-size: 27px; font-weight: 800; color: var(--t-gold);
  line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.t-counter-unit { font-size: 13px; font-weight: 700; color: var(--t-ink-2); }
.t-counter-total { width: 100%; margin-top: 3px; font-size: 11.5px; color: var(--t-ink-3); }
.t-pickbar .t-btn { flex: 1; }
.t-btn:disabled { opacity: .45; cursor: default; }

.t-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--t-ink-3); text-align: center; }

.t-draw-actions { display: flex; gap: 10px; margin-top: 14px; }
.t-btn {
  flex: 1; padding: 15px 12px; border-radius: 14px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  border: 1px solid var(--t-line); background: var(--t-bg-2); color: var(--t-ink-2);
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.t-btn:hover { background: var(--t-bg-3); border-color: var(--t-gold-2); }
.t-btn:active { transform: translateY(1px); }
.t-btn.primary {
  background: var(--t-gold); border-color: var(--t-gold); color: #14131C;
}
.t-btn.primary:hover { background: var(--t-gold-2); border-color: var(--t-gold-2); }

/* ── 결과 ─────────────────────────────────────────────── */
.t-res-head { padding: 24px 4px 18px; text-align: center; }
.t-res-topic {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--t-gold); background: var(--t-gold-soft);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 12px;
}
.t-res-title {
  font-size: 22px; font-weight: 800; letter-spacing: -.02em;
  margin: 0 0 8px; line-height: 1.35; color: var(--t-ink);
}
.t-res-sub { font-size: 13.5px; color: var(--t-ink-3); margin: 0; line-height: 1.6; }

/* 공개된 세 장 */
.t-spread { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 4px 0 26px; }
.t-spread-item { display: flex; flex-direction: column; align-items: center; gap: 9px; }
.t-face-wrap { width: 100%; aspect-ratio: 100 / 168; perspective: 900px; }
.t-face {
  width: 100%; height: 100%; border-radius: 9px; overflow: hidden;
  background: var(--t-bg-3); box-shadow: 0 6px 20px rgba(0,0,0,.5);
  border: 1px solid var(--t-line);
  animation: t-flip .62s cubic-bezier(.16,1,.3,1) backwards;
  animation-delay: var(--d, 0s);
}
.t-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.t-face.reversed img { transform: rotate(180deg); }
@keyframes t-flip {
  0%   { transform: rotateY(90deg) scale(.9); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.t-spread-cap { text-align: center; }
.t-pos-label { display: block; font-size: 11.5px; font-weight: 700; color: var(--t-gold); margin-bottom: 3px; }
.t-card-name { display: block; font-size: 13px; font-weight: 700; color: var(--t-ink); line-height: 1.35; }
.t-card-en {
  display: block; font-size: 10.5px; color: var(--t-ink-3); margin-top: 2px;
  font-family: Georgia, 'Times New Roman', serif; letter-spacing: .02em;
}
.t-ori {
  display: inline-block; margin-top: 5px; font-size: 10.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(255,255,255,.07); color: var(--t-ink-3);
}
.t-ori.rev { background: rgba(199,125,255,.14); color: var(--t-rev); }

/* 카드별 해석 블록 */
.t-block {
  background: var(--t-bg-2); border: 1px solid var(--t-line);
  border-radius: 17px; padding: 20px 18px; margin-bottom: 12px;
}
.t-block-head {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding-bottom: 12px; margin-bottom: 13px; border-bottom: 1px solid var(--t-line);
}
.t-block-pos { font-size: 12px; font-weight: 700; color: var(--t-gold); }
.t-block-name { font-size: 17px; font-weight: 800; color: var(--t-ink); letter-spacing: -.01em; }
.t-block-hint { font-size: 12px; color: var(--t-ink-3); width: 100%; margin-top: 2px; }
.t-kw { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.t-kw span {
  font-size: 11.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
  background: var(--t-bg-3); color: var(--t-ink-2); border: 1px solid var(--t-line);
}
.t-text { font-size: 14.5px; line-height: 1.75; color: var(--t-ink); margin: 0 0 12px; }
.t-core {
  font-size: 13px; line-height: 1.7; color: var(--t-ink-3);
  margin: 0; padding: 12px 14px; border-left: 2px solid var(--t-gold-2);
  background: rgba(255,255,255,.03); border-radius: 0 9px 9px 0;
}

/* 세 장을 함께 봐야 보이는 관찰 */
.t-notes {
  background: var(--t-gold-soft); border: 1px solid rgba(232,184,75,.28);
  border-radius: 17px; padding: 19px 18px; margin: 18px 0 12px;
}
.t-notes h3 { font-size: 14px; font-weight: 800; color: var(--t-gold); margin: 0 0 12px; }
.t-note { display: flex; gap: 10px; margin-bottom: 11px; }
.t-note:last-child { margin-bottom: 0; }
.t-note b {
  flex: none; font-size: 11px; font-weight: 700; color: #14131C; background: var(--t-gold);
  padding: 3px 9px; border-radius: 999px; height: fit-content; margin-top: 2px;
}
.t-note p { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--t-ink-2); }

.t-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 14px; }
.t-actions .t-btn.wide { grid-column: 1 / -1; }

.t-disclaimer {
  font-size: 12.5px; color: var(--t-ink-3); line-height: 1.65;
  text-align: center; margin: 18px 0 0; padding: 0 8px;
}

/* 용어 밑줄 — 사주의 .term 과 같은 인터랙션, 색만 골드 */
body[data-route="tarot"] .term {
  border-bottom: 1px dashed var(--t-gold-2); color: var(--t-ink); cursor: pointer;
}

/* 로딩 */
.t-loading { text-align: center; padding: 60px 20px; color: var(--t-ink-3); }
.t-loading .t-spin {
  width: 30px; height: 30px; margin: 0 auto 16px;
  border: 2.5px solid var(--t-line); border-top-color: var(--t-gold);
  border-radius: 50%; animation: t-spin .8s linear infinite;
}
@keyframes t-spin { to { transform: rotate(360deg); } }

.t-error {
  background: rgba(240,68,82,.1); border: 1px solid rgba(240,68,82,.3);
  color: #FF8A94; border-radius: 14px; padding: 16px; font-size: 14px; line-height: 1.6;
}

/* ── 반응형 ───────────────────────────────────────────── */
@media (min-width: 480px) {
  .t-hero-title { font-size: 30px; }
}
@media (max-width: 360px) {
  .t-topics { gap: 7px; }
  .t-topic { font-size: 13px; padding: 13px 4px 11px; }
  .t-spread { gap: 7px; }
  .t-card-name { font-size: 12px; }
  .t-counter { min-width: 82px; }
  .t-counter-no { font-size: 23px; }
}

/* ── 모션 최소화 ──────────────────────────────────────
 * 카드가 실제로 뽑히고 공개되는 흐름은 유지하되, 움직임만 없앤다. */
@media (prefers-reduced-motion: reduce) {
  .t-card,
  .t-card > i,
  .t-deck.shuffling .t-card,
  .menu-tile,
  .t-topic,
  .t-btn { transition: none; }
  .t-face { animation: none; }
  .t-slot.filled .t-slot-box { animation: none; }
  .t-loading .t-spin { animation: none; }
}