/* ─────────────────────────────────────────────
   조선시대 직업 카드
   주인공은 카드 일러스트다. UI는 조용한 액자 역할만 한다.
   ───────────────────────────────────────────── */

:root {
  --paper: #f4ece0;
  --paper-2: #fbf6ee;
  --ink: #2a2118;
  --ink-soft: #6b5d4d;
  --line: #d9cbb6;
  --accent: #8a6a3f;
  --accent-soft: #f0e4d0;
  --shadow: 0 2px 0 rgba(42, 33, 24, 0.16);
  --radius: 14px;
  --card-ratio: 1086 / 1448;
}

/* 오행별 테마. 결과 화면에서 data-element로 갈아끼운다. */
[data-element="WOOD"]  { --accent: #5f7f43; --accent-soft: #e6ecdd; }
[data-element="FIRE"]  { --accent: #b0503c; --accent-soft: #f6e3dc; }
[data-element="EARTH"] { --accent: #9a7a33; --accent-soft: #f3e9d4; }
[data-element="METAL"] { --accent: #6f6c63; --accent-soft: #ecebe6; }
[data-element="WATER"] { --accent: #44607d; --accent-soft: #e0e7ee; }

* { box-sizing: border-box; }

/* .check{display:flex} 같은 선언이 [hidden]을 이기지 못하게 한다. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* 결과 화면 뒤로 아주 느리게 흘러가는 서운. 카드가 떠 있는 하늘처럼 보이게 한다. */
.skycloud {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.skycloud.is-on { opacity: 1; }

.skycloud i {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 46%;
  background: url("/public/fx/서운.webp") no-repeat center / 100% 100%;
}

.skycloud i:nth-child(1) { top: 2%; opacity: 0.28; animation: sky-slide 54s linear infinite; }
.skycloud i:nth-child(2) { bottom: -4%; opacity: 0.2; transform: scale(-1); animation: sky-slide 82s linear infinite reverse; }

@keyframes sky-slide {
  from { translate: -6% 0; }
  to   { translate: 12% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .skycloud i { animation: none; }
}

/* 종이 질감. 카드 일러스트의 수채화 톤과 이어지게 한다. */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(160, 130, 90, 0.09) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 66%, rgba(120, 95, 60, 0.07) 0 1px, transparent 1px);
  background-size: 13px 13px, 19px 19px;
}

.app {
  position: relative;
  z-index: 1;
  max-width: 440px;
  margin: 0 auto;
  padding: 28px 20px calc(40px + env(safe-area-inset-bottom));
}

.screen[hidden] { display: none; }
.screen.is-active { animation: rise 0.36s ease both; }

@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── 입력 ───────────────────────────────── */

.intro { text-align: center; margin-bottom: 22px; }

.intro__kicker {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--accent);
  font-weight: 700;
}

.intro__title {
  margin: 0;
  font-size: clamp(28px, 8.4vw, 36px);
  line-height: 1.28;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.intro__title em {
  font-style: normal;
  position: relative;
  white-space: nowrap;
  z-index: 0;
}

/* 손그림 카드와 톤을 맞춘 붓 강조 */
.intro__title em::after {
  content: "";
  position: absolute;
  left: -4px;
  right: -4px;
  bottom: 2px;
  height: 40%;
  background: var(--accent);
  opacity: 0.26;
  border-radius: 40% 60% 55% 45%;
  z-index: -1;
}

.intro__sub {
  margin: 12px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.panel {
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 18px;
}

.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 20px;
}

.seg__btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 0;
  border-radius: 7px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.seg__btn.is-on {
  background: var(--ink);
  color: var(--paper-2);
}

.field-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 8px;
}

.date-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.date-row select {
  flex: 1;
  min-width: 0;
  appearance: none;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 8px;
  font: inherit;
  font-size: 16px; /* 16px 미만이면 iOS가 포커스 시 화면을 확대한다 */
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  cursor: pointer;
}

.date-row select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.date-row select:disabled { opacity: 0.45; cursor: default; }

.unit { font-size: 13px; color: var(--ink-soft); flex: none; }

.check {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
}

.check input { width: 17px; height: 17px; accent-color: var(--accent); }

.disclosure {
  appearance: none;
  width: 100%;
  margin-top: 16px;
  padding: 11px 0;
  background: transparent;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  cursor: pointer;
}

.disclosure__hint { font-weight: 400; opacity: 0.7; }
.disclosure[aria-expanded="true"] { border-style: solid; color: var(--ink); }

.advanced { margin-top: 12px; }
.advanced[hidden] { display: none; }

/* ── 버튼 ───────────────────────────────── */

.btn {
  appearance: none;
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 16px 18px;
  font: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.1s, opacity 0.15s;
}

.btn:active { transform: translateY(1px) scale(0.995); }

.btn--primary {
  margin-top: 20px;
  background: var(--ink);
  color: var(--paper-2);
  box-shadow: 0 3px 0 rgba(42, 33, 24, 0.28);
}

.btn--ghost {
  background: var(--paper-2);
  color: var(--ink);
  border: 1.5px solid var(--line);
  font-size: 15px;
  padding: 14px 12px;
}

.btn--dark {
  margin-top: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  padding: 14px 18px;
}

.btn--text {
  margin-top: 22px;
  background: transparent;
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 14px;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px;
}

/* ── 개봉 ───────────────────────────────── */

[data-screen="open"] {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 74vh;
  gap: 22px;
}

[data-screen="open"][hidden] { display: none; }

.open__status {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: Gaegu, Pretendard, sans-serif;
  font-size: 21px;
  color: var(--ink-soft);
}

/* 세월이 거꾸로 갈수록 화면 전체가 누렇게 바랜다 */
.age {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(92, 64, 30, 0.28) 100%),
    rgba(196, 160, 104, 0.32);
}

/* ── 현판: 연도가 거꾸로 흐르고, 멈추면 시대가 새겨진다 ── */
.plaque {
  position: relative;
  z-index: 2;
  min-width: min(72vw, 268px);
  padding: 8px 18px 7px;
  border-radius: 6px;
  background: linear-gradient(180deg, #4a2f17, #2e1c0c);
  box-shadow: inset 0 0 0 2px #8a6236, inset 0 0 0 5px #2e1c0c, inset 0 0 0 6px #c79a5e, 0 8px 18px rgba(42, 33, 24, 0.35);
  color: #f1d58a;
  text-align: center;
  line-height: 1.2;
}

.plaque__year {
  display: block;
  font-size: clamp(24px, 7.5vw, 30px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.plaque__era {
  display: block;
  margin-top: 2px;
  font-size: 17px;
  font-weight: 800;
  color: #f6e2b0;
  letter-spacing: 0.04em;
}

/* ── 무대 ── */
.draw {
  --w: min(72vw, 268px);
  position: relative;
  width: var(--w);
  aspect-ratio: var(--card-ratio);
}

.scene {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(180deg, #151a33 0%, #252b4f 32%, #4a4868 50%, #7a6a6a 56%);
  box-shadow: 0 14px 30px rgba(42, 33, 24, 0.32);
}

/* 별: 점 몇 개를 배경으로 흩뿌린다 */
.scene::before {
  content: "";
  position: absolute;
  inset: 0 0 45%;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 30%, #dfe8ff, transparent),
    radial-gradient(1px 1px at 63% 12%, #fff, transparent),
    radial-gradient(2px 2px at 81% 22%, #fff7d6, transparent),
    radial-gradient(1px 1px at 90% 40%, #fff, transparent),
    radial-gradient(1px 1px at 7% 42%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 55% 4%, #fff, transparent),
    radial-gradient(1px 1px at 36% 46%, #fff, transparent);
  opacity: 0.85;
}

/* ── 환생: 빛이 번진 자리부터 카드가 피어난다 ── */
.rebirth {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper-2);
  box-shadow: 0 14px 30px rgba(42, 33, 24, 0.28);
  clip-path: circle(0% at 50% 52%);
  z-index: 5;
}

.rebirth img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rebirth .inkcard { border-width: 5px; padding: 9px; gap: 7px; }

/* ── 기본 무대(g): 세월의 문 → 먹 번짐 ──
   조선 대문이 하나씩 다가온다. 문 위 현판의 연도가 60년씩 거슬러 올라가고, 화면은 누렇게 바랜다.
   마지막 문 앞에 멈추면 위쪽 현판에 "1695년 · 숙종 때"가 새겨지고, 문이 열린다.
   열린 문 안 흰 한지에 먹 한 방울이 떨어져 번지며 전생의 카드가 그려진다. */
.draw[data-mode="g"] { --cy: 50%; }

/* 문은 화면 한가운데, 카드 크기로 선다. */
.gate {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(74vw, 290px);
  aspect-ratio: var(--card-ratio);
  transform-style: preserve-3d;
  will-change: transform, opacity;
}


.draw[data-mode="g"] .scene { display: none; }

/* 문이 다가오는 어두운 공간. 화면 전체를 덮는다. 뽑기 중에만 켠다(app.js). */
.corridor {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  opacity: 0;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 50%, #6b5a46 0%, #3a3026 45%, #241d16 100%);
  perspective: 760px;
  perspective-origin: 50% 50%;
  pointer-events: none;
}

.gates {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.gate__frame {
  position: absolute;
  inset: 0;
  border: 7px solid #5a3a1c;
  border-radius: 6px;
  background: transparent;
  transform-style: preserve-3d;
  box-shadow: 0 0 0 3px #8a6236, 0 10px 24px rgba(0, 0, 0, 0.45);
  display: flex;
}

/* 좌우 두 짝. 마지막 문에서만 바깥으로 열린다. */
.gate__panel {
  position: relative;
  flex: 1;
  background:
    repeating-linear-gradient(90deg, rgba(90, 58, 28, 0.35) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #d9bd86, #b9945c);
  transform-origin: left center;
  transition: none;
  backface-visibility: hidden;
}

.gate__panel--r { transform-origin: right center; }

/* 문고리 */
.gate__panel::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 13px;
  height: 13px;
  margin-top: -6px;
  border-radius: 50%;
  border: 2px solid #4a3016;
  background: #8a6236;
}

.gate__panel--l::after { right: 7px; }
.gate__panel--r::after { left: 7px; }

/* 문 위 현판: 그 문이 가리키는 해 */
.gate__plaque {
  position: absolute;
  left: 50%;
  top: -13%;
  transform: translateX(-50%);
  padding: 4px 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, #4a2f17, #2e1c0c);
  box-shadow: inset 0 0 0 1.5px #c79a5e, 0 4px 10px rgba(0, 0, 0, 0.5);
  color: #f1d58a;
  font-size: clamp(15px, 4.6vw, 19px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 마지막 문 뒤에서 쏟아지는 빛 */
.lightburst {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  width: min(66vw, 260px);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, #ffffff 0 24%, rgba(255, 252, 245, 0.85) 48%, rgba(252, 246, 235, 0.3) 72%, rgba(250, 243, 230, 0) 100%);
  filter: blur(8px);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
}

/* 결과 화면 도착: 카드가 자리 잡는 동안 나머지는 숨었다가 뒤이어 떠오른다 */
[data-screen="result"] > * { transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
[data-screen="result"].is-arriving > :not(.cardframe) { opacity: 0; transition: none; }

/* 문 앞 안내. 누르면 바로 열리고, 안 눌러도 저절로 열린다. */
.open__hint {
  position: relative;
  z-index: 2;
  margin: -10px 0 0;
  min-height: 19px; /* 문구가 없을 때도 자리를 지켜서 화면이 밀리지 않게 */
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0;
  transition: opacity 0.25s ease;
}

.open__hint.is-on { opacity: 0.9; }
.draw.is-tappable { cursor: pointer; }

.open__skip {
  position: absolute;
  z-index: 3;
  top: 0;
  right: 0;
  border: 0;
  background: transparent;
  color: var(--ink-soft);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px;
  cursor: pointer;
}

/* ── 결과 ───────────────────────────────── */

.result-head { text-align: center; margin-bottom: 16px; }

.result-lead {
  margin: 0 0 6px;
  font-family: Gaegu, Pretendard, sans-serif;
  font-size: 20px;
  color: var(--ink-soft);
}

.result-kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--accent);
}

.cardframe {
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 26px rgba(42, 33, 24, 0.24);
  animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

/* 결과 카드: 손가락을 따라 기울어진다. 기울기 값은 app.js가 --rx/--ry로 넣는다. */
.cardframe.is-tiltable {
  animation: none;
  transform: perspective(760px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
  touch-action: pan-y;
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.cardframe__inner { aspect-ratio: var(--card-ratio); }

/* 움직임 줄이기 설정에서는 분위기 층을 아예 걷는다. */
@media (prefers-reduced-motion: reduce) {
}
.cardframe img { width: 100%; height: 100%; display: block; object-fit: cover; }

/* 일러스트 미완성 일주용 먹지 카드. 빈 화면 대신 완결된 카드를 보여준다. */
.inkcard {
  width: 100%;
  height: 100%;
  background: var(--paper-2);
  border: 8px solid var(--accent);
  display: flex;
  flex-direction: column;
  padding: 16px;
  gap: 12px;
}

.inkcard__title {
  margin: 0;
  text-align: center;
  font-size: 19px;
  font-weight: 800;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 8px 6px;
  line-height: 1.25;
}

.inkcard__stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  padding: 12px;
  min-height: 0;
}

.inkcard__hanja {
  font-size: clamp(52px, 17vw, 76px);
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
  letter-spacing: 0.04em;
}

.inkcard__symbol {
  margin: 0;
  font-family: Gaegu, Pretendard, sans-serif;
  font-size: 16px;
  color: var(--ink-soft);
  text-align: center;
}

.inkcard__note {
  margin: 0;
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.8;
  text-align: center;
}

.inkcard__bottom {
  display: grid;
  grid-template-columns: 38fr 62fr; /* MASTER 템플릿의 하단 분할 비율을 따른다 */
  gap: 10px;
}

.inkcard__stats { display: flex; flex-direction: column; gap: 6px; }

.inkcard__stat {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 4px;
}

.inkcard__stars { color: var(--accent); letter-spacing: -0.04em; }

.inkcard__desc {
  margin: 0;
  font-family: Gaegu, Pretendard, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  border-left: 2px solid var(--line);
  padding-left: 10px;
}

.weakness {
  margin: 18px 0 0;
  text-align: center;
  font-family: Gaegu, Pretendard, sans-serif;
  font-size: 20px;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1.5px solid var(--accent);
  border-radius: 10px;
  padding: 12px 14px;
}

.weakness b { color: var(--accent); }

/* 강점·약점 두 줄 (traits.js). 위아래로 나누고 사이에 점선. */
.weakness .trait {
  display: block;
  font-size: 18px;
  line-height: 1.45;
}
.weakness .trait + .trait {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1.5px dashed var(--accent);
}
.weakness .trait b {
  display: inline-block;
  margin-right: 4px;
  padding: 0 7px;
  border-radius: 6px;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  line-height: 20px;
  vertical-align: 2px;
  color: #fff;
  background: var(--accent);
}
.weakness .trait--down b { background: var(--ink-soft); }

.share { margin-top: 20px; }

/* 왜 그 해인지 한 줄 (결과 머리 아래) */
.result-why {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--ink-soft);
}

/* 내 일주 풀이: 접어 두고, 펼치면 풀이 글이 나온다 */
.pillar-reading {
  margin-top: 18px;
  border: 1.5px solid var(--accent);
  border-radius: 12px;
  background: var(--paper-2);
  overflow: hidden;
}

.pillar-reading__toggle {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pillar-reading__toggle::-webkit-details-marker { display: none; }
.pillar-reading__toggle::after {
  content: "";
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
.pillar-reading[open] .pillar-reading__toggle::after { transform: rotate(-135deg) translateY(-2px); }

.pillar-reading__body {
  padding: 0 16px 16px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink);
  text-align: left;
}

.pillar-reading__body p { margin: 0 0 12px; }
.pillar-reading__body p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .pillar-reading__toggle::after { transition: none; }
}
.share .btn--primary { margin-top: 0; }

.share__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.upsell {
  margin-top: 26px;
  padding: 18px;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius);
}

.upsell__lead { margin: 0; font-size: 16px; font-weight: 800; }
.upsell__lead strong { color: var(--accent); }
.upsell__body { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }

.fineprint {
  margin: 18px 0 0;
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.75;
}

.fineprint--tight { margin-top: 12px; }

/* ── 토스트 ─────────────────────────────── */

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(28px + env(safe-area-inset-bottom));
  transform: translate(-50%, 14px);
  background: var(--ink);
  color: var(--paper-2);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s, transform 0.22s;
  z-index: 50;
  max-width: calc(100vw - 40px);
  text-align: center;
}

.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

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

/* ── 궁합 ───────────────────────────────── */

.pairbait {
  margin-top: 24px;
  padding: 18px;
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.pairbait__lead {
  margin: 0;
  font-family: Gaegu, Pretendard, sans-serif;
  font-size: 22px;
  font-weight: 700;
}

.pairbait__body {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--ink-soft);
}

.pairbait .btn--dark { margin-top: 12px; }

.intro__sub b { color: var(--ink); }

.verdict {
  text-align: center;
  padding: 22px 18px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  border: 1.5px solid var(--line);
}

/* 판정 등급에 따라 색을 바꾼다. 점수보다 색이 먼저 읽힌다. */
.verdict[data-tone="best"]  { --accent: #b8862f; --accent-soft: #fbf0d6; }
.verdict[data-tone="good"]  { --accent: #5f7f43; --accent-soft: #e9f0e0; }
.verdict[data-tone="mid"]   { --accent: #8a6a3f; --accent-soft: #f2e7d5; }
.verdict[data-tone="low"]   { --accent: #a8703a; --accent-soft: #f7e6d4; }
.verdict[data-tone="worst"] { --accent: #a04a3c; --accent-soft: #f7e0da; }

.verdict__score {
  margin: 0;
  font-size: 58px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  letter-spacing: -0.03em;
}

.verdict__score small { font-size: 22px; margin-left: 2px; }

.verdict__title {
  margin: 8px 0 0;
  font-size: clamp(26px, 7.5vw, 33px);
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* 전생 관계 이름: 점수 바로 아래. 공유되는 문장이라 판정 다음으로 크게. */
.verdict__story {
  margin: 12px 0 0;
  font-family: Gaegu, Pretendard, sans-serif;
  font-size: clamp(21px, 6vw, 25px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--accent);
  word-break: keep-all;
}
.verdict__story small {
  display: block;
  margin-bottom: 2px;
  font-family: Pretendard, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

/* 전생 관계 이야기: 두 카드 아래 */
.pair-story {
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1.5px dashed var(--line);
  border-radius: 12px;
  background: var(--paper-2);
  font-size: 15px;
  line-height: 1.7;
  word-break: keep-all;
}

.verdict__tags {
  margin: 12px 0 0;
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
}

.tag {
  font-size: 12px;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--accent);
  color: var(--accent);
}

.versus {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 8px;
  margin-top: 20px;
}

.versus__card { margin: 0; min-width: 0; }

.versus__slot {
  aspect-ratio: var(--card-ratio);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 5px 14px rgba(42, 33, 24, 0.22);
}

.versus__slot img { width: 100%; height: 100%; object-fit: cover; display: block; }

.versus__card figcaption {
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: var(--ink-soft);
  line-height: 1.35;
  word-break: keep-all;
}

.versus__x {
  align-self: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--ink-soft);
  padding-bottom: 26px;
}

/* 궁합 카드는 아주 작다. 먹지 카드를 그 크기에 맞춘다. */
.versus__slot .inkcard { border-width: 4px; padding: 7px; gap: 5px; }
.versus__slot .inkcard__title { font-size: 9px; padding: 3px 2px; border-width: 1px; border-radius: 4px; }
.versus__slot .inkcard__stage { gap: 3px; padding: 4px; border-radius: 4px; }
.versus__slot .inkcard__hanja { font-size: 30px; }
.versus__slot .inkcard__symbol { font-size: 7px; }
.versus__slot .inkcard__note { display: none; }
.versus__slot .inkcard__bottom { gap: 4px; }
.versus__slot .inkcard__stat { font-size: 6px; padding-bottom: 1px; }
.versus__slot .inkcard__desc { font-size: 7px; padding-left: 4px; line-height: 1.3; }

.reading {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reading li {
  background: var(--paper-2);
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 14.5px;
  line-height: 1.6;
  word-break: keep-all;
}

/* 마지막 줄이 대체로 공유되는 문장이다. 눈에 띄게 둔다. */
.reading li:last-child {
  font-family: Gaegu, Pretendard, sans-serif;
  font-size: 19px;
  background: var(--accent-soft);
}