/* ============================================================
   천명(天命) — tarot.css
   민화 타로 전용 스타일 (SPEC §1 디자인 / §4 터치 타깃 / §10 플립)
   ------------------------------------------------------------
   레이아웃·색은 main.css의 토큰(--ink/--hanji/--gold/--cinnabar…)만 쓴다.
   ⚠ 모션 규약: transition·animation 선언과 @keyframes 는 파일 맨 아래
      @media (prefers-reduced-motion: no-preference) 블록 안에만 둔다.
      부채꼴 배치 각도·역방향 180°·플립 완료 상태의 transform 은 모션이
      아니라 레이아웃/상태이므로 미디어쿼리 밖에 둔다 (SPEC §1).
   ⚠ .gate-lock* 는 main.css 소유 — 이 파일에서 재정의하지 않는다 (SPEC §8.2).
   ============================================================ */

/* ---------- 0. 페이지 공통 소품 ---------- */
.tmono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--gold);
}

/* 물음 되비추기 — 사용자가 적은 문장을 그대로 보여준다 */
.tarot-echo {
  margin-top: var(--space-2);
  padding-left: var(--space-2);
  border-left: 3px solid var(--gold);
  color: var(--hanji);
  font-family: var(--font-display);
  font-size: 1.0625rem;
  max-width: 34em;
  overflow-wrap: anywhere;
}

.tarot-status {
  margin-top: var(--space-1);
  font-size: var(--fs-caption);
  color: var(--hanji-dim);
}
.tarot-status:empty { display: none; }

.tarot-ask .rv-optional { margin-left: 0.5em; }

/* ---------- 1. 접힌 부채 (intro 레일 일러스트) ---------- */
.tdeck {
  position: relative;
  height: 7.5rem;
  margin-bottom: var(--space-2);
}
.tdeck__card {
  position: absolute;
  top: 0.75rem;
  left: 50%;
  width: 4rem;
  height: 6.6667rem;
  margin-left: -2rem;
  border-radius: 8px;
  background: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.tdeck__card--a { transform: translateX(-2.6rem) rotate(-13deg); }
.tdeck__card--b { transform: translateX(0) rotate(0deg); z-index: 2; }
.tdeck__card--c { transform: translateX(2.6rem) rotate(13deg); }
.tdeck__art { width: 100%; height: 100%; color: var(--gold); }

/* ---------- 2. 부채꼴 (合竹扇) ---------- */
/* 배치 규칙 — JS 는 카드마다 아래 인라인 변수만 세팅하고, 어느 배열을 쓸지는 CSS 가 고른다.
     --i    : 0~21 (스태거 지연용)
     --cd1  : 단열(22장) 중앙 기준 열 오프셋            i − 10.5
     --row2 / --cd2 : 2단(11×2) 행 번호와 행 안 오프셋
     --row3 / --cd3 : 3단(8·7·7) 행 번호와 행 안 오프셋
   ⚠ 치수를 vw 가 아니라 **컨테이너 대비 %** 로 잡는다 — vw 는 스크롤바 폭을 포함해서
      실제 컨테이너보다 넓게 계산되고, 그 오차가 그대로 카드 노출 폭을 갉아먹는다.
      %로 두면 어떤 뷰포트에서도 "노출 폭 = min(--step, --card-w) × 컨테이너 폭"으로 확정된다.
   노출 폭 실측(가장 좁은 조건): 단열 900px 뷰포트 → 31.9px / 3단 375px 뷰포트 → 36.8px
   — 둘 다 최소 24px 를 넘고 단열 1280px 에서는 46.4px 로 목표 44px 도 만족한다 (SPEC §4). */
.fan-wrap { margin-bottom: var(--space-4); }
.fan-wrap[hidden] { display: none; }

.fan {
  /* 기본 = 단열 22장 (≥900px) */
  --card-w:  6.2%;
  --step:    4.1%;    /* 카드 사이 가로 간격 = 노출 폭 */
  --ang:     2deg;
  --lift:    0.6%;    /* 호의 깊이 — 카드 높이 기준 */
  --row-gap: 0%;
  position: relative;
  height: 0;
  padding-bottom: 21%;  /* 높이도 폭에 비례 — 뷰포트가 아니라 컨테이너를 따른다 */
  margin-inline: auto;
}

.tcard {
  --hy: 0px;
  position: relative;
}

.tcard--fan {
  --cd: var(--cd1);
  --row: 0;
  position: absolute;
  top: 0;
  left: calc(50% + var(--cd) * var(--step));
  width: var(--card-w);
  aspect-ratio: 120 / 200;
  margin-left: calc(-0.5 * var(--card-w));
  z-index: calc(var(--i) + 1);
  cursor: pointer;
  border-radius: 9px;
  /* 호버 들림(--hy)은 별도 translateY 로 둔다 — calc 안에서 "+ -12px" 로 펼쳐지는 것을 피한다 */
  transform:
    translateY(calc(var(--row) * var(--row-gap) + var(--cd) * var(--cd) * var(--lift)))
    translateY(var(--hy))
    rotate(calc(var(--cd) * var(--ang)));
}
.tcard--fan:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.tcard--fan:hover:not([aria-selected='true']),
.tcard--fan:focus-visible { --hy: -12px; z-index: 40; }

/* 소진(선택 완료) — 링은 그대로 두고 그림만 죽여 대비 3:1 이상 유지 (SPEC §4 U18) */
.tcard--fan[aria-selected='true'] { cursor: default; }
.tcard--fan[aria-selected='true'] .tcard__face--cover {
  box-shadow: 0 0 0 2px var(--gold), var(--shadow-card);
  border-color: var(--gold);
}
.tcard--fan[aria-selected='true'] .tcard__svg { opacity: 0.34; }

/* 어느 자리로 갔는지 알리는 금색 낙관 (aria-label 과 중복되는 시각 정보) */
.tcard__mark {
  position: absolute;
  left: 50%;
  bottom: 6%;
  z-index: 3;
  transform: translateX(-50%);
  min-width: 1.5em;
  padding: 0.05em 0.35em;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 72%, transparent);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-family: var(--font-hanja);
  font-size: 0.75rem;
  line-height: 1.5;
  text-align: center;
}

.tarot-count {
  margin-top: var(--space-2);
  text-align: center;
  color: var(--hanji-dim);
  font-size: var(--fs-caption);
  letter-spacing: 0.04em;
}

/* ---------- 3. 카드 몸체 (앞/뒤 두 면) ---------- */
.tcard__inner {
  position: relative;
  width: 100%;
  height: 100%;
}

.tcard__face {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 뒷면 — 먹빛 바탕 + 금선 운문 + 天命 인장 (아트는 tarot-cards.js 스프라이트) */
.tcard__face--cover {
  background: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  box-shadow: var(--shadow-card);
  transform: rotateY(0deg) translateZ(1px);
}
.tcard__svg { width: 100%; height: 100%; display: block; }

/* 앞면 — 한지 종이 패 */
.tcard__face--art {
  background: var(--hanji);
  color: var(--ink);
  border: 1px solid color-mix(in srgb, var(--ink) 26%, var(--hanji));
  box-shadow: var(--shadow-card);
  transform: rotateY(180deg) translateZ(1px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding: 6% 5% 5%;
  text-align: center;
}

.tcard__roman {
  font-family: var(--font-hanja);
  font-size: 0.8em;
  line-height: 1.2;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--ink) 70%, var(--hanji));
}

/* 역방향은 이 상자만 180° 돈다 — 이름·배지는 바로 선 채로 읽힌다 */
.tcard__art {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: 4% 0;
  transform: rotate(0deg);
}
.tcard[data-reversed='true'] .tcard__art { transform: rotate(180deg); }
.tcard__art .tcard__svg { color: var(--ink); }

.tcard__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.15em;
  line-height: 1.25;
  color: var(--ink);
}
.tcard__hanja {
  display: block;
  font-family: var(--font-hanja);
  font-size: 0.85em;
  line-height: 1.4;
  color: color-mix(in srgb, var(--ink) 72%, var(--hanji));
}
.tcard__badge {
  display: inline-block;
  margin-top: 0.35em;
  padding: 0.1em 0.55em;
  border-radius: 999px;
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--ink);
  background: color-mix(in srgb, var(--gold) 30%, var(--hanji));
  border: 1px solid color-mix(in srgb, var(--gold) 72%, var(--hanji));
}
.tcard[data-reversed='true'] .tcard__badge {
  background: color-mix(in srgb, var(--cinnabar) 22%, var(--hanji));
  border-color: color-mix(in srgb, var(--cinnabar) 60%, var(--hanji));
}

/* ---------- 4. 병풍 슬롯 (屛風) ---------- */
.screen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  /* 34rem 좌측 쏠림 → 세 폭을 무대 중앙에, 폭도 한 뼘 키워 병풍의 존재감을 살린다 */
  max-width: 40rem;
  margin-inline: auto;
}
.screen[hidden] { display: none; }

.screen__panel {
  display: grid;
  gap: var(--space-1);
  justify-items: center;
  padding: var(--space-2) var(--space-1);
  border: 1px solid color-mix(in srgb, var(--gold) 38%, transparent);
  border-radius: var(--radius);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--gold) 7%, var(--ink-2)),
      var(--ink-2) 42%,
      color-mix(in srgb, var(--ink) 45%, var(--ink-2)));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 60%, transparent);
}

.screen__label {
  display: grid;
  justify-items: center;
  gap: 0.1em;
  line-height: 1.3;
}
.screen__hanja {
  font-family: var(--font-hanja);
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  color: var(--gold);
}
.screen__kr {
  font-size: var(--fs-caption);
  letter-spacing: 0.18em;
  color: var(--hanji);
}

.screen__seat {
  position: relative;
  width: 100%;
  aspect-ratio: 120 / 200;
  perspective: 900px;
  -webkit-perspective: 900px;
}
/* 빈 자리 — 금선 테두리의 자리 표시 */
.screen__seat::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px dashed color-mix(in srgb, var(--gold) 48%, transparent);
  border-radius: 9px;
}
.screen__seat.is-filled::before { display: none; }

.tcard--slot {
  position: absolute;
  inset: 0;
  font-size: clamp(0.625rem, 1.6vw, 0.8125rem);
  /* perspective 는 직계 자식에게만 걸린다 — 실제로 도는 것은 .tcard__inner 이므로
     좌석이 아니라 카드 자신이 원근 컨텍스트를 가져야 한다 */
  -webkit-perspective: 900px;
  perspective: 900px;
}
.tcard--slot .tcard__inner {
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform: rotateY(0deg);
}
/* 플립 완료 상태의 rotateY 는 "상태"이므로 미디어쿼리 밖 (SPEC §1) */
.tcard--slot[data-turned='true'] .tcard__inner { transform: rotateY(180deg); }

/* 고스팅 차단 — 양 끝 상태에서는 반대 면을 아예 렌더에서 뺀다 (S1·R6 보강) */
.tcard--slot:not([data-turned='true']) .tcard__face--art { visibility: hidden; }
.tcard--slot[data-flipped='true'] .tcard__face--cover { visibility: hidden; }

/* ---------- 5. 서첩 결과 (書帖) ---------- */
#tarot-readings:empty,
#tarot-overall:empty,
#tarot-lock:empty { display: none; }

.treadings {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.treading {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.treading__head {
  display: grid;
  gap: 0.25em;
  padding-bottom: var(--space-2);
  border-bottom: var(--line-gold);
}
.treading__pos {
  font-size: var(--fs-caption);
  letter-spacing: 0.16em;
  color: var(--gold);
}
.treading__pos .treading__poshanja {
  font-family: var(--font-hanja);
  letter-spacing: 0.14em;
  margin-right: 0.5em;
}
.treading__name {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  color: var(--hanji);
}
.treading__namehanja {
  font-family: var(--font-hanja);
  font-size: 0.8em;
  color: var(--hanji-dim);
  margin-left: 0.4em;
}
.treading__dir {
  justify-self: start;
  padding: 0.1em 0.7em;
  border-radius: 999px;
  font-size: var(--fs-caption);
  font-weight: 600;
  color: var(--hanji);
  background: color-mix(in srgb, var(--gold) 22%, var(--ink-2));
  border: 1px solid color-mix(in srgb, var(--gold) 60%, transparent);
}
.treading__dir--reversed {
  background: color-mix(in srgb, var(--cinnabar) 26%, var(--ink-2));
  border-color: color-mix(in srgb, var(--cinnabar) 75%, transparent);
}

.treading__keys {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em;
}
.treading__keys li {
  padding: 0.15em 0.7em;
  border: 1px solid var(--ink-3);
  border-radius: 999px;
  font-size: var(--fs-caption);
  color: var(--gold);
}

.treading__core {
  color: var(--hanji);
  font-family: var(--font-display);
  line-height: 1.8;
}
.treading__text {
  color: var(--hanji);
  font-size: 0.95rem;
  line-height: 1.85;
}

/* 종합 리딩 */
.toverall {
  display: grid;
  gap: var(--space-2);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
}
.toverall__eyebrow {
  font-family: var(--font-hanja);
  font-size: var(--fs-caption);
  letter-spacing: 0.24em;
  color: var(--gold);
}
.toverall__title {
  font-family: var(--font-display);
  font-size: var(--fs-sub);
  color: var(--hanji);
}
.toverall__text {
  color: var(--hanji);
  line-height: 1.9;
  max-width: 44em;
}
.toverall__cards {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
  padding-top: var(--space-2);
  border-top: 1px solid var(--ink-3);
  font-size: var(--fs-caption);
  color: var(--hanji-dim);
}
.toverall__cards strong { color: var(--hanji); font-weight: 600; }

/* 행동 버튼 줄 */
.tarot-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}
.tarot-actions[hidden],
.tarot-actions .btn[hidden] { display: none; }
.tarot-actions .tarot-status { margin-top: 0; flex-basis: 100%; }

/* ---------- 6. 내 타로 기록 ---------- */
.saved-item__main--bad {
  display: grid;
  gap: 0.15em;
  flex: 1;
  padding: 0.4em 0;
  font-size: 0.95rem;
  color: var(--hanji-dim);
  cursor: default;
}
.saved-item__main--bad .saved-item__ganji { color: var(--e-earth); }
.trecord__names { font-weight: 600; }

/* ---------- 7. 반응형 ---------- */
/* 900px 미만: 2단 호(11 × 2) — 노출 폭 8.6% (561px 뷰포트에서 43.5px) */
@media (max-width: 899px) {
  .fan {
    --card-w:  9.4%;
    --step:    8.6%;
    --ang:     1.6deg;
    --lift:    1.1%;
    --row-gap: 122%;
    padding-bottom: 43%;
  }
  .tcard--fan { --cd: var(--cd2); --row: var(--row2); }
  .treadings { grid-template-columns: 1fr; }
  .screen { max-width: none; }
}

/* 560px 이하: 3단 호(8 · 7 · 7) — 11장을 한 줄에 늘어놓으면 카드 자체가 24px 밑으로
   내려가므로 줄을 하나 더 늘린다. 노출 폭 11.5% (375px 뷰포트에서 36.8px) */
@media (max-width: 560px) {
  .fan {
    --card-w:  13%;
    --step:    11.5%;
    --ang:     1.5deg;
    --lift:    1.6%;
    --row-gap: 124%;
    padding-bottom: 82%;
  }
  .tcard--fan { --cd: var(--cd3); --row: var(--row3); }
}

/* 481~899px 구간은 .section-inset(레일 인셋)이 살아 있어 부채가 좁아진다 —
   부채 줄만 인셋을 되돌려 컨테이너 폭을 온전히 쓴다 (480px 이하는 main.css가 이미 0) */
@media (min-width: 481px) and (max-width: 899px) {
  .fan-wrap { margin-left: calc(-1 * var(--rail-inset)); }
}

@media (max-width: 480px) {
  .screen { gap: 0.625rem; }
  .screen__panel { padding: var(--space-1) 0.35rem; }
  .screen__hanja { font-size: 1.1rem; }
  .tdeck { height: 6.5rem; }
  .tdeck__card { width: 3.4rem; height: 5.6667rem; margin-left: -1.7rem; }
  .tdeck__card--a { transform: translateX(-2.1rem) rotate(-13deg); }
  .tdeck__card--c { transform: translateX(2.1rem) rotate(13deg); }
}

/* ---------- 8. 모션 (이 블록 안에만 둔다) ---------- */
/* 플립 애니메이션 길이 500ms — JS의 플립 간격 600ms 와 짝을 이룬다 (SPEC §2-3).
   reduce 환경에서는 이 블록이 통째로 적용되지 않아 전환이 0이 되고,
   JS도 matchMedia 로 간격·지연을 0으로 낮춰 세 장을 즉시 공개한다. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes tarot-deal {
    from { opacity: 0; transform: translateY(26px) scale(0.9); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes tarot-seat-in {
    from { opacity: 0; transform: translateY(-14px) scale(0.94); }
    to   { opacity: 1; transform: none; }
  }

  .fan .tcard__inner {
    animation: tarot-deal 420ms var(--ease-out) both;
    animation-delay: calc(var(--i) * 24ms);
  }
  .tcard--fan {
    transition:
      transform 240ms var(--ease-out),
      opacity   240ms var(--ease-out);
  }
  .tcard--fan .tcard__svg { transition: opacity 240ms var(--ease-out); }
  .tcard--fan .tcard__face--cover { transition: box-shadow 240ms var(--ease-out), border-color 240ms var(--ease-out); }

  .tcard--slot { animation: tarot-seat-in 320ms var(--ease-out) both; }
  .tcard--slot .tcard__inner { transition: transform 500ms var(--ease-out); }

  .screen__panel { transition: border-color 240ms var(--ease-out); }
  .tdeck__card { transition: transform 320ms var(--ease-out); }
  .tdeck:hover .tdeck__card--a { transform: translateX(-3.1rem) rotate(-18deg); }
  .tdeck:hover .tdeck__card--c { transform: translateX(3.1rem) rotate(18deg); }
}