/* 생성된 파일 — 손으로 고치지 말 것. classic.css + tools/theme/new-tail.css 로
   python tools/theme/build_new_theme.py 가 만든다. */
/* 글꼴(Noto Serif KR · Pretendard)은 app/layout.tsx 의 <link> 로 싣는다. 여기서 @import 하면
   이 파일을 다 받은 뒤에야 글꼴 CSS 를 요청해서 첫 화면이 그만큼 늦게 뜬다(2026-10-13 실측). */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 로드 시 reveal 로 페이지 높이가 변해 스크롤바가 생겼다 사라지며 화면이
   좌우로 들썩였다 — 거터를 항상 확보해 고정한다 */
html { scrollbar-gutter: stable; }

:root {
  --gold: #d9b96a;
  --ink: #efe9dc;
  --dim: #b8ad97;
}

body {
  /* 두 벌 체계: 제목·자리 이름·강조는 명조(Noto Serif KR), 사용자에게
     내용을 전달하는 본문은 고딕(Pretendard). 전부 명조로 통일해 봤더니
     위계가 사라져 어디가 제목이고 어디가 내용인지 눈에 안 잡혔다
     (사용자 지적) — 읽는 글자와 보는 글자는 서로 달라야 한다. */
  font-family: "Pretendard Variable", "Pretendard", "Apple SD Gothic Neo",
    "Malgun Gothic", sans-serif;
  background: #14121f;
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  /* 첫 진입에서만 스르르 나타난다. body 는 클라이언트 라우팅으로
     다시 마운트되지 않으므로 페이지 전환 때 중복 재생되지 않는다. */
  animation: app-in 0.9s cubic-bezier(0.22, 0.7, 0.3, 1) both;
}

@keyframes app-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.994);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ── 페이지 전환: 스르르 겹쳐 바뀌는 크로스페이드 ── */
::view-transition-old(root) {
  animation: vt-out 0.34s cubic-bezier(0.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: vt-in 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes vt-out {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(0.995);
  }
}

@keyframes vt-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.995);
  }
}

/* 모션을 줄이고 싶은 사용자에게는 움직임 없이 */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 0.01s;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* 신비로운 무드의 세리프 — 제목·카드명·인용문에만 */
.hero-title,
.deck-name,
.draw-guide,
.rc-name,
.rc-quote,
.result-summary .rs-line,
.card-plate {
  font-family: "Noto Serif KR", Georgia, serif;
}

.page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 16px 60px;
}

/* ★ vw 는 세로 스크롤바를 포함해서 잰다. 화면이 좁아 스크롤이 생기는 순간
   `width: min(94vw, …)` 로 잡은 블록(26곳)이 실제 가시 폭보다 넓어져
   오른쪽으로 삐져나가고, 페이지에 가로 스크롤이 생긴다.
   (실측 360px: .bd-row 가 380px 로 좌 -18 ~ 우 362, 문서 폭 371)
   블록마다 고치는 대신 부모 폭으로 한 번 더 조인다.
   .reveal 은 display: contents 라 자식이 .page 의 플렉스 항목이 되므로
   따로 잡아야 한다 — 선택자는 상자가 아니라 DOM 을 따라간다. */
.page > *,
.page .reveal > *,
.result-wrap > *,
.adv-fold > * {
  max-width: 100%;
}

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-size: cover;
  background-position: center;
}

.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 30%, transparent 30%, rgba(10, 8, 20, 0.82) 100%),
    linear-gradient(rgba(10, 8, 20, 0.35), rgba(10, 8, 20, 0.65));
}

/* ═══════ 메인: 타이틀/덱 선택 ═══════ */
.hero-title {
  font-size: clamp(30px, 6vw, 44px);
  letter-spacing: 10px;
  font-weight: 300;
  color: var(--gold);
  margin: 26px 0 6px;
  text-align: center;
  animation: title-glow 4s ease-in-out infinite alternate;
}

.hero-sub {
  color: var(--dim);
  font-size: 14px;
  letter-spacing: 2px;
  text-align: center;
}

.hero-orn {
  width: min(280px, 62%);
  aspect-ratio: 1133 / 242;
  margin: 16px auto 26px;
  background: url(/ui/orn-divider.webp) center / contain no-repeat;
  opacity: 0.8;
}

@keyframes title-glow {
  from {
    text-shadow: 0 0 18px rgba(217, 185, 106, 0.25);
  }
  to {
    text-shadow: 0 0 34px rgba(217, 185, 106, 0.55), 0 0 70px rgba(217, 185, 106, 0.18);
  }
}

/* 덱 카드가 둥실 떠다니는 유휴 모션 (버튼 단위로 띄워 호버 transform 과 충돌 없음) */
@keyframes deck-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.deck-row {
  display: flex;
  gap: clamp(8px, 3vw, 26px);
  flex-wrap: wrap;
  justify-content: center;
  perspective: 1200px;
  /* deck-float 가 카드를 10px 들어 올린다 — 위 라벨을 침범하지 않을 만큼 띄운다 */
  margin-top: 22px;
}

.deck-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.deck-choice {
  background: none;
  border: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  animation: deck-float 5.5s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}

.deck-view-link {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--dim);
  border-bottom: 1px solid rgba(184, 173, 151, 0.35);
  padding-bottom: 2px;
  transition: color 0.18s, border-color 0.18s;
}

.deck-view-link:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.deck-view-link .dv-short {
  display: none;
}

/* 덱 갤러리 */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 18px;
  width: min(94vw, 1080px);
  margin-top: 26px;
}

.gcard {
  margin: 0;
  padding: 0;
  display: block;
  width: 100%;
  cursor: pointer;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(217, 185, 106, 0.4);
  background: rgba(10, 8, 20, 0.5);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
  transition: transform 0.25s ease-out, box-shadow 0.25s;
}

.gcard:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.55), 0 0 22px rgba(217, 185, 106, 0.2);
}

.gcard img {
  width: 100%;
  display: block;
  aspect-ratio: 9 / 16;
  object-fit: cover;
}

/* 덱 카드집 — 정사각 타일에 3D 로 세워 놓는다.
   원근은 타일마다 걸어야 한다. 부모에 한 번 걸면 오른쪽 타일이 화면 밖
   소실점을 보게 되어 같은 각도로 서지 않는다. */
.box-sec {
  width: min(94vw, 1080px);
}

/* 상자를 가운데로 모았으니 제목도 따라가야 한다.
   .step-label 은 display:flex 라서 text-align 이 듣지 않는다 — 실제로
   가운데 정렬이 안 먹어서 제목만 왼쪽에 남아 있었다. */
.box-sec > .step-label {
  justify-content: center;
}

.box-sec > .wish-hint {
  text-align: center;
  margin-bottom: 14px;
}

/* 덱이 2~3종뿐이라 격자로 깔면 오른쪽이 텅 빈다. 가운데로 모은다. */
.box-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
  width: 100%;
}

.box-card {
  --tile: 168px;
  display: block;
  width: var(--tile);
  text-align: center;
  text-decoration: none;
}

/* 정사각 무대. 원근은 타일마다 걸어야 한다 — 부모에 한 번 걸면 오른쪽
   타일이 화면 밖 소실점을 보게 되어 같은 각도로 서지 않는다. */
.box-3d {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  perspective: 700px;
}

/* 진짜 육면체로 세운다. 앞면 그림 하나를 기울이는 것과 달리 옆면·윗면이
   보여야 상자로 읽힌다. 면의 크기는 타일 폭에서 끌어온다(translateZ 는
   퍼센트를 못 받는다). */
.deck3d {
  --w: calc(var(--tile) * 0.52);
  --h: calc(var(--tile) * 0.924); /* 앞면을 카드 비율(9:16)로 맞춘다 */
  --d: calc(var(--tile) * 0.2);   /* 얇으면 옆면이 안 보여 그냥 카드로 읽힌다 */
  position: relative;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
  /* 옆면이 보일 만큼 돌려야 상자로 읽힌다. -26deg 에서는 단면이 너무 얇게
     깎여 사실상 안 보였다. */
  transform: rotateX(-7deg) rotateY(-34deg);
  transition: transform 0.45s ease;
}

.box-card:hover .deck3d {
  transform: rotateX(-4deg) rotateY(-20deg);
}

/* 면을 모두 상자 중심에 겹쳐 놓고 각자 제자리로 밀어낸다.
   처음에는 좌상단 기준으로 놓고 그 오프셋을 translateZ 로 보정했는데,
   부모 회전과 섞이면서 윗면이 깃발처럼 떠올랐다. 중심을 맞춰두면 면마다
   '한 번 회전하고 제 방향으로 한 번 이동'만 하면 된다. */
.d3 {
  position: absolute;
  top: 50%;
  left: 50%;
  backface-visibility: hidden;
}

.d3-front {
  width: var(--w);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  transform: translateZ(calc(var(--d) / 2));
  box-shadow: 0 0 0 1px rgba(217, 185, 106, 0.3);
}

/* 오른쪽 옆면 — 쌓인 카드의 종이 단면 */
.d3-side {
  width: var(--d);
  height: var(--h);
  margin: calc(var(--h) / -2) 0 0 calc(var(--d) / -2);
  transform: translateX(calc(var(--w) / 2)) rotateY(90deg);
  /* 어두운 뚜껑(별자리·미드나잇)에서도 깊이가 읽혀야 하므로 단면을 너무
     어둡게 깔지 않는다. 처음엔 검정을 많이 섞어 옆면이 배경에 묻혔다. */
  background:
    repeating-linear-gradient(
      to right,
      rgba(255, 255, 255, 0.16) 0 1px,
      rgba(0, 0, 0, 0.16) 1px 3px
    ),
    linear-gradient(
      to bottom,
      var(--edge, #d9b96a),
      color-mix(in srgb, var(--edge, #d9b96a) 45%, #000000)
    );
}

/* 위로 밀어낸 뒤 눕힌다. transform-origin 은 기본값(가운데)을 그대로 둔다 —
   top 으로 바꿨다가 회전 중심이 옮겨져 윗면이 문구를 덮었다. */
.d3-top {
  width: var(--w);
  height: var(--d);
  margin: calc(var(--d) / -2) 0 0 calc(var(--w) / -2);
  transform: translateY(calc(var(--h) / -2)) rotateX(90deg);
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--edge, #d9b96a) 78%, #ffffff),
    color-mix(in srgb, var(--edge, #d9b96a) 70%, #000000)
  );
}

/* 바닥 그림자는 3D 밖에 둔다. 면에 box-shadow 를 얹으면 회전할 때
   그림자도 같이 돌아서 조명이 카드마다 달라 보인다. */
.box-3d::after {
  content: "";
  position: absolute;
  bottom: 8%;
  left: 50%;
  width: 58%;
  height: 9%;
  transform: translateX(-52%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.6), transparent 72%);
  filter: blur(3px);
}

.box-name {
  display: block;
  margin-top: 10px;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 13.5px;
  letter-spacing: 1px;
  color: #efe3c2;
}

.box-meta {
  display: inline-block;
  margin-top: 3px;
  padding-bottom: 2px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #b9b0c8;
  border-bottom: 2px solid transparent;
}

@media (prefers-reduced-motion: reduce) {
  .box-face,
  .box-card:hover .box-face {
    transition: none;
  }
}

@media (max-width: 560px) {
  .box-grid {
    gap: 12px;
  }
  .box-card {
    --tile: 132px;
  }
  .box-name {
    font-size: 12.5px;
  }
}

/* 아직 그리지 않은 카드 자리 — 누를 수 없다는 게 보여야 한다 */
.gcard.empty {
  cursor: default;
  border-style: dashed;
  border-color: rgba(217, 185, 106, 0.22);
}

.gcard.empty:hover {
  transform: none;
  box-shadow: none;
}

.gcard-blank {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 9 / 16;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(239, 227, 194, 0.45);
  opacity: 0.5;
}

.gcard.empty .gcard-cap {
  color: rgba(239, 227, 194, 0.45);
}

.gcard-cap {
  display: block;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 12.5px;
  letter-spacing: 1px;
  color: #efe3c2;
  text-align: center;
  padding: 8px 4px;
  background: rgba(12, 9, 24, 0.85);
}

.gallery-hint {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--dim);
  margin-top: 4px;
}

/* ══════════ 카드 상세 ══════════ */
.cd-backdrop {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(6, 5, 14, 0.82);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
  animation: cd-fade 0.3s ease both;
  overflow-y: auto;
}

@keyframes cd-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.cd-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 300px) 1fr;
  gap: 32px;
  width: min(96vw, 940px);
  max-height: 88vh;
  padding: 30px 34px;
  background: linear-gradient(165deg, rgba(30, 24, 54, 0.97), rgba(11, 8, 22, 0.98));
  border: 1px solid rgba(217, 185, 106, 0.45);
  border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.cd-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  background: none;
  border: none;
  color: var(--dim);
  font-size: 18px;
  padding: 6px 10px;
  border-radius: 50%;
  transition: color 0.18s;
}

.cd-close:hover {
  color: var(--gold);
}

.cd-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.cd-card {
  width: 100%;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(217, 185, 106, 0.5);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 0 30px rgba(217, 185, 106, 0.12);
}

.cd-deckname {
  font-size: 12px;
  letter-spacing: 3px;
  color: var(--dim);
}

/* 우측 스크롤 영역 */
.cd-right {
  overflow-y: auto;
  padding-right: 10px;
  max-height: calc(88vh - 60px);
}

.cd-right::-webkit-scrollbar {
  width: 5px;
}

.cd-right::-webkit-scrollbar-thumb {
  background: rgba(217, 185, 106, 0.35);
  border-radius: 3px;
}

.cd-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(217, 185, 106, 0.25);
  padding-bottom: 12px;
  margin-bottom: 18px;
}

.cd-num {
  font-family: Georgia, serif;
  font-size: 26px;
  color: rgba(217, 185, 106, 0.5);
}

.cd-title {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 27px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
  text-shadow: 0 0 20px rgba(217, 185, 106, 0.25);
}

.cd-en {
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--dim);
}

.cd-sec {
  margin-bottom: 22px;
}

.cd-sec h3 {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #e8d9a8;
  margin-bottom: 10px;
}

.cd-sec h3.cd-up {
  color: #f0dba4;
}

.cd-sec h3.cd-rev {
  color: #e8a8a8;
}

.cd-sec p {
  font-size: 14.5px;
  line-height: 1.95;
  color: #e6e0d2;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.cd-sec p + p {
  margin-top: 10px;
}

.cd-kw {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.cd-kw span {
  font-size: 12px;
  letter-spacing: 1px;
  padding: 3px 11px;
  border-radius: 12px;
  background: rgba(217, 185, 106, 0.14);
  border: 1px solid rgba(217, 185, 106, 0.4);
  color: #f0dba4;
}

.cd-kw.rev span {
  background: rgba(190, 110, 120, 0.13);
  border-color: rgba(216, 144, 144, 0.42);
  color: #e8a8a8;
}

.cd-adv {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(217, 185, 106, 0.07);
  border-left: 2px solid rgba(217, 185, 106, 0.5);
  border-radius: 0 6px 6px 0;
  font-size: 13.5px !important;
}

.cd-adv b {
  color: var(--gold);
  margin-right: 8px;
  font-size: 12px;
  letter-spacing: 1px;
}

.cd-topics {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cd-topics li {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  align-items: start;
}

.cd-tlabel {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--gold);
  padding-top: 4px;
  white-space: nowrap;
}

.cd-topics li p {
  font-size: 13.5px;
  line-height: 1.85;
}

@media (max-width: 720px) {
  .cd-panel {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 22px 18px;
    max-height: 92vh;
    overflow-y: auto;
  }

  .cd-left {
    flex-direction: row;
    align-items: flex-end;
    gap: 14px;
  }

  .cd-card {
    width: 128px;
  }

  .cd-right {
    overflow: visible;
    max-height: none;
    padding-right: 0;
  }

  .cd-title {
    font-size: 22px;
  }

  .cd-topics li {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* 덱 카드의 고정 히트존 — 틸트는 안쪽(Tilt3D)만 움직인다 */
.deck-frame {
  position: relative;
  display: block;
  /* 아주 좁은 화면에서도 3장이 한 줄에 들어가도록 유동 */
  width: clamp(74px, 27vw, 152px);
  aspect-ratio: 9 / 16; /* 뒷면 이미지 원본 비율 그대로 */
  perspective: 700px;
  transform-style: preserve-3d;
}

.deck-card {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  border: 1px solid rgba(217, 185, 106, 0.45);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  background-size: cover;
  background-position: center;
  transition: box-shadow 0.3s;
  transform-style: preserve-3d;
}

/* 덱 카드 아래 바닥 타원 그림자 — 틸트해도 바닥에 남는다 */
.deck-frame::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: -18px;
  height: 24px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45), transparent 68%);
  filter: blur(5px);
  pointer-events: none;
}

/* 카드 뒤에 깔던 금색 3D 뒷판(translateZ(-3px))도 없앴다.
   호버에 틸트를 주지 않으니 드러날 일이 없는데, 평상시에 아래쪽으로 새어나와
   카드마다 금색 밑줄이 그어진 것처럼 보였다. 선택 표시는 금색 링과 그림자로
   충분하다. */

/* 카드 아래 단면(금색 4px 띠)은 없앴다. 3D 두께를 주려고 넣었는데 기울지 않은
   평상시에도 보여서 카드마다 밑줄이 그어진 것처럼 읽혔다. 두께는 뒤에 깔린
   ::before 가 호버로 기울 때만 드러내면 된다. */

.deck-choice:hover .deck-card {
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.65), 0 0 34px rgba(217, 185, 106, 0.25);
}

.deck-name {
  font-size: 16px;
  letter-spacing: 3px;
  color: var(--gold);
}

.deck-tag {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 0.5px;
}

/* 소원 입력 */
.wish-input {
  width: min(480px, 92%);
  height: 56px;
  margin-top: 16px;
  padding: 0 22px;
  text-align: center;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 16px;
  color: var(--ink);
  background: rgba(14, 11, 26, 0.72);
  border: 1px solid rgba(217, 185, 106, 0.45);
  border-radius: 28px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.wish-input::placeholder {
  color: rgba(184, 173, 151, 0.55);
}

.wish-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 22px rgba(217, 185, 106, 0.2);
}

.wish-hint {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--dim);
}

/* 성사 지수 배너 */
.verdict-card {
  text-align: center;
  background: linear-gradient(165deg, rgba(28, 22, 50, 0.94), rgba(11, 8, 22, 0.94));
  border: 1px solid rgba(217, 185, 106, 0.5);
  border-radius: 18px;
  padding: 26px 24px 24px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 40px rgba(217, 185, 106, 0.1);
}

.verdict-card .v-wish {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #f6efdd;
  line-height: 1.7;
  margin-bottom: 8px;
}

/* 질문을 적지 않은 경우 — 인용이 아니므로 한 톤 낮춰 둔다.
   적은 질문과 같은 크기·굵기로 두면 하지도 않은 말이 자기 질문처럼 읽힌다. */
.verdict-card .v-nowish {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 1px;
  color: #a9a294;
}

.verdict-card .v-pct {
  font-family: Georgia, "Noto Serif KR", serif;
  font-size: 76px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
  text-shadow: 0 0 34px rgba(217, 185, 106, 0.4);
}

.verdict-card .v-unit {
  font-size: 34px;
  margin-left: 2px;
}

.verdict-card .v-label {
  font-size: 12px;
  letter-spacing: 5px;
  color: var(--dim);
  margin: 2px 0 10px;
}

.verdict-card .v-tier {
  font-size: 15px;
  letter-spacing: 1px;
  color: #efe3c2;
  line-height: 1.7;
}

/* 주제 선택 */
.topic-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 34px;
}

.topic-btn {
  min-width: 128px;
  background: rgba(20, 16, 34, 0.66);
  border: 1px solid rgba(217, 185, 106, 0.35);
  color: var(--ink);
  border-radius: 24px;
  padding: 11px 20px;
  font-size: 14px;
  letter-spacing: 1px;
  transition: all 0.2s ease-out;
}

.topic-btn:hover {
  background: rgba(217, 185, 106, 0.14);
  border-color: rgba(217, 185, 106, 0.7);
  color: var(--gold);
  transform: translateY(-1px);
}

/* 선택된 주제는 금장으로 확정감 있게 */
.topic-btn.on {
  background: linear-gradient(160deg, #e8cc84, #c9a44f);
  border-color: #b8933f;
  color: #2e2205;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(217, 185, 106, 0.3);
}

.topic-btn:active {
  transform: translateY(1px);
}

.step-label {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
  margin-bottom: 4px;
  color: var(--dim);
  font-size: 12px;
  letter-spacing: 4px;
}

.step-label::before,
.step-label::after {
  content: "";
  height: 1px;
  width: 60px;
}

.step-label::before {
  background: linear-gradient(90deg, transparent, rgba(217, 185, 106, 0.5));
}

.step-label::after {
  background: linear-gradient(90deg, rgba(217, 185, 106, 0.5), transparent);
}

/* ═══════ 드로우: 카드 부채꼴 ═══════ */
.draw-guide {
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 2px;
  text-align: center;
  margin: 14px 0 6px;
  min-height: 22px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}

.draw-sub {
  color: var(--dim);
  font-size: 12px;
  text-align: center;
  letter-spacing: 1px;
  min-height: 16px;
}

/* 부채꼴과 슬롯 사이 — 리더의 나래이션처럼 지금 뽑는 카드를 안내 */
.pick-hint {
  margin: 24px auto 6px;
  text-align: center;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.6;
  color: #f4e6ba;
  text-shadow: 0 0 22px rgba(217, 185, 106, 0.4), 0 2px 12px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  animation: hint-in 0.9s ease both;
  max-width: 92vw;
}

.pick-hint small {
  font-size: 13px;
  color: var(--dim);
  margin-left: 10px;
  letter-spacing: 2px;
}

@media (max-width: 720px) {
  .pick-hint {
    font-size: 16px;
  }
}

@keyframes hint-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ═══════ 카드 선택: 더미 → 여러 줄 펼침 ═══════ */

/* 커트 전 더미 */
.deck-pile {
  position: relative;
  width: clamp(96px, 22vw, 132px);
  aspect-ratio: 9 / 16;
  margin: 28px 0 10px;
  background: none;
  border: none;
  padding: 0;
  transform: rotateX(34deg);
  transform-style: preserve-3d;
  perspective: 700px;
  transition: transform 0.4s ease;
}

.deck-pile:hover {
  transform: rotateX(28deg);
}

.pile-card {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  border: 1px solid rgba(217, 185, 106, 0.45);
  background-size: cover;
  background-position: center;
  /* 쌓인 상태 — 두께만 보이게 z 로만 겹친다. 위로 들리지 않는다. */
  transform: translate3d(0, calc(var(--i) * -0.4px), calc(var(--i) * 2.4px));
  transform-origin: 50% 92%;
  transition: transform 0.42s cubic-bezier(0.22, 0.9, 0.3, 1);
}

/* 손을 올리면 옆으로 부챗살처럼 벌어진다.
   위로 들어올리는 대신 아래쪽 한 점을 축으로 좌우로 펼친다 —
   실제로 카드를 쥐고 손목을 돌려 펴는 모양. */
.deck-pile:hover .pile-card,
.deck-pile:focus-visible .pile-card {
  /* --i 0~9 → 중앙(4.5) 기준 좌우로 */
  transform: translate3d(
      calc((var(--i) - 4.5) * 7px),
      calc(var(--i) * -0.4px),
      calc(var(--i) * 2.4px)
    )
    rotate(calc((var(--i) - 4.5) * 2.6deg));
}

@media (prefers-reduced-motion: reduce) {
  .deck-pile:hover .pile-card,
  .deck-pile:focus-visible .pile-card {
    transform: translate3d(0, calc(var(--i) * -0.4px), calc(var(--i) * 2.4px));
  }
}

.deck-pile .pile-card:first-child {
  filter: drop-shadow(0 18px 14px rgba(0, 0, 0, 0.45));
}

/* 펼친 뒤: 덱 전체를 여러 줄로. 좁은 화면에선 가로 스크롤로 모든 카드에 닿는다 */
.fan-scroll {
  width: min(96vw, 1000px);
  margin-top: 20px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 14px 2px 18px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.fan-scroll::-webkit-scrollbar {
  height: 5px;
}

.fan-scroll::-webkit-scrollbar-thumb {
  background: rgba(217, 185, 106, 0.35);
  border-radius: 3px;
}

/* 다 고른 뒤: 부채가 차지하던 자리를 곧바로 비운다.
   예전엔 opacity 만 0 으로 두어 78장 높이(≈700px)의 빈 칸이 남았고, 그만큼
   아래로 밀린 슬롯이 화면 밖에서 뒤집혔다 — 카드가 잘려 보이던 원인이다.
   접힘을 애니메이션으로 두면 그 0.5초 동안 여전히 잘리므로 즉시 비운다. */
.fan-scroll.fan-away {
  display: none;
}

.fan-rows {
  /* 카드 폭이 보이는 띠의 2배를 넘으면 카드 '가운데'가 다음 카드에 덮여
     눌러도 옆 카드가 잡힌다. 폭 ≤ 띠×2 를 유지한다. */
  /* 기본값 — 실제 값은 draw 페이지가 화면 폭을 재서 인라인으로 덮는다.
     여기 값은 JS 가 아직 폭을 모르는 첫 렌더에서만 쓰인다. */
  --cw: 70px;
  --strip: 36px;
  --per: 26;
  display: flex;
  flex-direction: column;
  gap: 16px;
  /* 카드마다 최소 --strip 만큼은 보이도록 폭을 확보한다 */
  min-width: calc(var(--cw) + (var(--per) - 1) * var(--strip));
  /* 내용이 컨테이너보다 좁을 때 왼쪽에 붙지 않도록 — 스크롤 컨테이너의
     flow 는 flex 중앙 정렬을 받지 못해서 여기서 직접 가운데로 민다 */
  width: fit-content;
  margin: 0 auto;
}

.fan-row {
  position: relative;
  height: calc(var(--cw) * 16 / 9);
}

.fan-card {
  position: absolute;
  top: 0;
  /* 줄 안에서 균등하게 겹쳐 놓는다 */
  left: calc(var(--k) * (100% - var(--cw)) / var(--n));
  width: var(--cw);
  height: calc(var(--cw) * 16 / 9);
  padding: 0;
  border: none;
  background: none;
  transition: opacity 0.35s ease;
  /* 터치 하이라이트 제거 — 직접 만든 피드백만 보이게 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ── 펼치기 애니메이션 ───────────────────────────────
   덱을 누르면 DOM 이 통째로 바뀌면서 카드가 이미 제자리에 있었다 —
   '펼쳐지는' 동작이 아예 없었다. 각 카드를 줄 가운데(덱이 있던 자리)에서
   제 위치로 밀어 내고, 인덱스만큼 지연을 줘 좌우로 퍼지게 한다.

   translate 는 자기 폭 기준(%)이라 카드 수가 몇이든 같은 비율로 모인다.
   --mid 는 그 줄의 중앙 인덱스, --k 는 카드 인덱스라 (mid-k) 가
   '가운데로부터의 거리'가 된다. */
@keyframes fan-deal {
  from {
    transform: translateX(calc((var(--mid) - var(--k)) * var(--strip)))
      rotate(calc((var(--k) - var(--mid)) * 1.2deg)) scale(0.96);
    opacity: 0;
  }
  to {
    transform: none;
    opacity: 1;
  }
}

.fan-rows.dealing .fan-card {
  animation: fan-deal 0.52s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  /* 가운데에서 바깥으로 번져 나가도록 — 중앙이 먼저, 끝이 나중.
     --ad 는 draw 페이지가 계산해 넣는다(CSS abs() 는 지원이 아직 좁다). */
  animation-delay: var(--ad, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .fan-rows.dealing .fan-card {
    animation: none;
  }
}

.fan-card .back-face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  border: 1px solid rgba(217, 185, 106, 0.5);
  background-size: cover;
  background-position: center;
  filter: drop-shadow(-3px 6px 6px rgba(0, 0, 0, 0.4));
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
}

/* 마우스: 머문 카드만 위로 */
.fan-card.lift .back-face {
  transform: translateY(-18px);
  filter: drop-shadow(-3px 14px 12px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 14px rgba(217, 185, 106, 0.4));
}

/* 터치·클릭 순간의 즉각 피드백 */
.fan-card:active .back-face {
  transform: translateY(-14px) scale(1.03);
  filter: drop-shadow(-3px 12px 10px rgba(0, 0, 0, 0.45))
    drop-shadow(0 0 16px rgba(217, 185, 106, 0.55));
}

.fan-card.gone {
  opacity: 0;
  pointer-events: none;
}

/* 펼친 직후 한 번 훑고 지나가는 손짓 */
@keyframes card-beckon {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-12px);
  }
}

.fan-rows.beckon .fan-card:not(.gone) .back-face {
  animation: card-beckon 0.5s ease-in-out calc(var(--i) * 14ms + 0.4s) 1;
}

/* 부채꼴과 슬롯 사이 — 리더의 나래이션처럼 지금 뽑는 카드를 안내 */
.pick-hint {
  margin: 24px auto 6px;
  text-align: center;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 23px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 1.6;
  color: #f4e6ba;
  text-shadow: 0 0 22px rgba(217, 185, 106, 0.4), 0 2px 12px rgba(0, 0, 0, 0.9);
  pointer-events: none;
  animation: hint-in 0.9s ease both;
  max-width: 92vw;
}

.pick-hint small {
  font-size: 13px;
  color: var(--dim);
  margin-left: 10px;
  letter-spacing: 2px;
}

@media (max-width: 720px) {
  .pick-hint {
    font-size: 16px;
  }
}

@keyframes hint-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 선택 슬롯 */
.slots {
  display: flex;
  gap: clamp(10px, 3vw, 26px);
  margin-top: 18px;
  perspective: 850px; /* 낮을수록 틸트가 과감하게 보인다 */
  transform-style: preserve-3d;
}

.slot {
  width: clamp(72px, 26vw, 150px);
  aspect-ratio: 9 / 16;
  border-radius: 11px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.3, 0.8, 0.3, 1);
}

/* 결과 공개 후: 카드가 커지며 가운데 카드가 앞으로 나오는 삼면화 배치.
   컨테이너(z=0 평면)가 뒤로 물러난 양쪽 카드(z<0)의 호버를 가로채지 않도록
   포인터 이벤트는 슬롯에만 준다. */
.slots.triptych {
  gap: clamp(14px, 4vw, 34px);
  margin-bottom: 26px;
  pointer-events: none;
}

.slots.triptych .slot {
  pointer-events: auto;
}

.slots.triptych .slot {
  width: clamp(76px, 27vw, 205px);
}

.slots.triptych .slot:nth-child(1) {
  transform: rotateY(15deg) translateZ(-24px) scale(0.95);
}

.slots.triptych .slot:nth-child(2) {
  transform: translateZ(60px) scale(1.09);
  z-index: 2;
}

.slots.triptych .slot:nth-child(3) {
  transform: rotateY(-15deg) translateZ(-24px) scale(0.95);
}

/* 마우스 틸트: 바깥 존은 고정 히트영역, 안쪽만 기운다 */
.tilt3d-zone {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.tilt3d {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.slot .slot-empty {
  position: absolute;
  inset: 0;
  border: 1px dashed rgba(217, 185, 106, 0.4);
  border-radius: 11px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: rgba(217, 185, 106, 0.6);
  font-size: 12px;
  letter-spacing: 3px;
  background: rgba(10, 8, 20, 0.35);
  padding: 0 12px;
  text-align: center;
}

/* 포지션이 뜻하는 것 — 빈 슬롯 안의 풀이 */
.slot .slot-empty small {
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.65;
  color: rgba(184, 173, 151, 0.65);
  word-break: keep-all;
}

/* 3D 플립 카드 — 뒤집힐 때 공중으로 떠올랐다 내려앉는 아크 */
.flip-card {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* 고스트가 아직 슬롯을 덮고 있는 동안 아래에서 미리 나타나
     고스트 제거 순간 끊김 없이 이어진다 (비행 0.78s) */
  animation: land 0.3s ease-out 0.55s both;
}

@keyframes land {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* 뽑은 카드가 부채꼴에서 슬롯으로 날아가는 고스트 */
.fly-card {
  position: fixed;
  z-index: 300;
  border-radius: 9px;
  border: 1px solid rgba(217, 185, 106, 0.5);
  background-size: cover;
  background-position: center;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.55);
  pointer-events: none;
}

/* 타로 관습대로 좌우(책장 넘기듯) 플립.
   들림(anticipation) → 플립 → 착지의 3단, 각 단계 200~450ms. */
.flip-card.flipped {
  animation: flip3d 0.9s forwards;
}

@keyframes flip3d {
  0% {
    transform: translateZ(0) rotateY(0);
    animation-timing-function: cubic-bezier(0.3, 0.6, 0.4, 1);
  }
  24% {
    transform: translateZ(52px) rotateY(0);
    animation-timing-function: cubic-bezier(0.5, 0.05, 0.4, 0.95);
  }
  76% {
    transform: translateZ(52px) rotateY(180deg);
    animation-timing-function: cubic-bezier(0.35, 0.4, 0.4, 1);
  }
  100% {
    transform: translateZ(0) rotateY(180deg);
  }
}

/* 카드 그림 레이어 — 역방향이면 그림만 거꾸로 (실물 관례),
   이름판은 UI 요소라 항상 바로 선다. */
.face-art {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.flip-card.reversed .face-art {
  transform: rotate(180deg);
}

.card-plate {
  z-index: 1;
}

/* 앞면이 뒤를 보고 있을 때(아직 안 뒤집힘) 그림·이름판이 비쳐 보이지 않게.
   이름판은 backdrop-filter 때문에 backface 숨김이 안 먹는 브라우저가 있어
   뒤집히기 전엔 아예 투명 처리한다. */
.flip-face.front,
.flip-face.front .face-art,
.flip-face.front .card-plate {
  backface-visibility: hidden;
}

.flip-card:not(.flipped) .card-plate {
  opacity: 0;
}

.flip-card.flipped .card-plate {
  opacity: 1;
  transition: opacity 0.2s ease 0.45s; /* 플립이 절반을 지난 뒤에 나타난다 */
}

.flip-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 11px;
  border: 1px solid rgba(217, 185, 106, 0.55);
  background-size: cover;
  background-position: center;
  /* 큰 사각 그림자 대신 은은한 접촉 음영만 — 바닥 그림자는 슬롯의 타원이 담당 */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  /* 평면 간 z 간격을 넉넉히 — 간격이 좁으면 기울일 때 z-파이팅으로
     직선 seam(반쪽 음영)이 생긴다 */
  transform: translateZ(6px);
}

/* 카드 아래 바닥에 깔리는 부드러운 타원 그림자 — 카드가 기울어도
   바닥 그림자는 제자리에 남아 현실감이 생긴다 */
.slot:has(.flip-card)::after {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: -16px;
  height: 24px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent 68%);
  filter: blur(5px);
  transform: translateZ(-40px);
  pointer-events: none;
}

.flip-face.front {
  transform: rotateY(180deg) translateZ(6px);
  overflow: hidden;
}

/* 카드 두께 — 앞뒷면 사이(z=0)에 낀 금박 단면.
   틸트하거나 뒤집히는 순간 가장자리로 삐져나오며 실물 두께감을 만든다. */
.card-edge {
  position: absolute;
  inset: -1px;
  border-radius: 12px;
  background: linear-gradient(165deg, #d8b968, #93742f 60%, #6f5722);
  transform: translateZ(0);
  pointer-events: none;
}

/* 플립 직후 카드 표면을 스치는 광택 — 직선 띠가 아니라
   부드러운 타원형 빛 뭉치가 지나간다 (현실의 반사광처럼) */
.flip-card.flipped .flip-face.front::after {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    ellipse 42% 32% at 50% 50%,
    rgba(255, 246, 214, 0.18),
    transparent 70%
  );
  /* 얼굴 평면과 겹치지 않게 살짝 띄워 z-파이팅 방지 */
  transform: translateX(-120%) translateZ(0.5px);
  animation: glare 0.8s ease-out 0.8s forwards;
}

@keyframes glare {
  to {
    transform: translateX(120%) translateZ(0.5px);
  }
}

.card-plate {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 6%;
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  color: #efe3c2;
  background: rgba(12, 9, 24, 0.62);
  border: 1px solid rgba(217, 185, 106, 0.45);
  border-radius: 6px;
  padding: 4px 2px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.slot-label {
  position: absolute;
  bottom: -26px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--dim);
}

/* ═══════ 결과 ═══════ */
/* 결과는 위에서부터 차례차례 떠오른다.
   순서는 ResultPanel 이 --rd 로 넣는다 — 예전엔 nth-child(1~8) 로 매겼는데
   켈틱 크로스(10장)처럼 자식이 8개를 넘으면 아홉 번째부터 규칙이 없어
   지연 0 으로 한꺼번에 튀어나왔다. 카드 수에 따라 자식 수가 변하므로
   위치가 아니라 값으로 매긴다. */
.result-wrap > * {
  animation: rise-in 0.7s ease both;
  animation-delay: var(--rd, 0s);
}

/* 결과 하단의 '이 리딩을 읽는 법' — 조언 목록 스타일을 빌리되
   카드 상단 헤더 바로 아래라 구분선 없이 바짝 붙인다 */
.guide-list {
  border-top: none;
  padding-top: 0;
  margin-top: 8px;
}

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

.result-wrap {
  width: min(94vw, 700px);
  margin-top: 92px; /* 확대된 가운데 카드(transform은 공간을 안 차지함)와 안 겹치게 */
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.result-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(165deg, rgba(28, 22, 50, 0.94), rgba(11, 8, 22, 0.94));
  border: 1px solid rgba(217, 185, 106, 0.38);
  border-radius: 16px;
  padding: 26px 30px 24px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* 현재 카드 강조 */
.result-card.focus {
  border-color: rgba(217, 185, 106, 0.75);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5), 0 0 42px rgba(217, 185, 106, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* 배경의 고스트 로마숫자 */
.result-card::before {
  content: attr(data-num);
  position: absolute;
  right: 14px;
  top: -26px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 130px;
  font-weight: 700;
  color: rgba(217, 185, 106, 0.07);
  letter-spacing: -4px;
  pointer-events: none;
}

.result-card .rc-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.rc-pos {
  font-size: 12px;
  letter-spacing: 4px;
  color: var(--dim);
  border: 1px solid rgba(184, 173, 151, 0.35);
  border-radius: 4px;
  padding: 2px 9px;
}

.rc-dir {
  margin-left: auto;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 14px;
  background: rgba(217, 185, 106, 0.16);
  border: 1px solid rgba(217, 185, 106, 0.55);
  color: #f0dba4;
  letter-spacing: 1px;
}

.rc-dir.rev {
  background: rgba(190, 110, 120, 0.14);
  border-color: rgba(216, 144, 144, 0.55);
  color: #e8a8a8;
}

.rc-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 2px;
  text-shadow: 0 0 18px rgba(217, 185, 106, 0.25);
}

.rc-en {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: 3px;
  margin-left: 10px;
}

.rc-orn {
  color: rgba(217, 185, 106, 0.45);
  font-size: 10px;
  letter-spacing: 8px;
  margin: 10px 0 12px;
}

.rc-quote {
  position: relative;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.85;
  color: #f6efdd;
  padding-left: 26px; /* 따옴표와 본문 사이 숨 — 붙어 보인다는 지적 */
  /* 한국어는 어절 단위로 끊어야 어색하게 잘리지 않는다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 카드 요지와 포지션 풀이 사이에 숨 쉴 틈 */
.rc-quote + .reading-para {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(217, 185, 106, 0.16);
}

.rc-quote::before {
  content: "“";
  position: absolute;
  left: -2px;
  top: -8px;
  font-family: Georgia, serif;
  font-size: 34px;
  color: rgba(217, 185, 106, 0.65);
}

.rc-sub {
  font-size: 13px;
  line-height: 1.75;
  color: var(--dim);
  margin-top: 12px;
  padding-left: 12px;
  border-left: 2px solid rgba(217, 185, 106, 0.35);
}

.result-summary {
  text-align: center;
  padding: 4px 10px 2px;
}

/* genspark 금세공 디바이더 (실제 img 요소) — 어디에 놓여도 같은 크기 */
img.rs-orn {
  display: block;
  height: 26px;
  width: auto;
  margin: 0 auto 14px;
  opacity: 0.85;
}

.result-summary .rs-line {
  color: var(--gold);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.9;
  text-shadow: 0 0 22px rgba(217, 185, 106, 0.3);
}

/* 액션 버튼 */
.action-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 22px;
  /* 확정 폭이 필요하다. .page 가 align-items: center 라 이 줄은 shrink-to-fit
     인데, 버튼의 min-width 가 min(200px, 100%) 라 그 100% 를 재려면 줄 폭이
     먼저 정해져야 한다 — 순환이라 브라우저가 420px 로 잡았고, 버튼 합
     432px(200+10+222)이 거기 안 들어가 넓은 화면에서도 두 줄로 접혔다.
     폭을 못 박으면 100% 가 제대로 풀려 한 줄로 선다. */
  width: min(94vw, 720px);
}

/* ═══ 버튼 시스템: 한 장의 genspark 시트에서 자른 3형제 플라크 ═══
   btn-primary(금 채움) / btn-secondary(금테 다크) / btn-tertiary(은은한 금테)
   — 같은 생성물이라 모서리·테두리·코너 장식이 완전히 동일하다. */
.gold-btn,
.ghost-btn,
.text-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: min(200px, 100%);
  max-width: 100%;
  height: 52px;
  padding: 0 clamp(16px, 5vw, 32px);
  font-size: 14px;
  letter-spacing: 2px;
  border: none;
  border-radius: 12px;
  /* 이미지를 살짝 키워 가장자리를 radius 로 깎는다 — 검은 테두리 방지 */
  background-size: 103% 110%;
  background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.18s ease-out, filter 0.18s ease-out;
  -webkit-user-select: none;
  user-select: none;
}

.gold-btn:hover,
.ghost-btn:hover,
.text-btn:hover {
  transform: translateY(-2px);
}

.gold-btn:active,
.ghost-btn:active,
.text-btn:active {
  transform: translateY(1px);
  filter: brightness(0.95);
}

/* 주 버튼 — 금 채움 플라크 */
.gold-btn {
  background-image: url(/ui/btn-primary.webp),
    linear-gradient(172deg, #f0d99c, #cfa955 52%, #b8933f);
  color: #2e2205;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 246, 214, 0.5);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 18px rgba(217, 185, 106, 0.16);
}

.gold-btn:hover {
  filter: brightness(1.07);
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.5), 0 0 26px rgba(217, 185, 106, 0.3);
}

/* 보조 버튼 — 밝은 금테 다크 플라크 */
.ghost-btn {
  background-image: url(/ui/btn-secondary.webp),
    linear-gradient(rgba(16, 13, 30, 0.85), rgba(16, 13, 30, 0.85));
  color: #e6d6a8;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4);
}

.ghost-btn:hover {
  filter: brightness(1.2);
}

/* 3차 버튼 — 은은한 금테 플라크 (다시 뽑기 등) */
.text-btn {
  background-image: url(/ui/btn-tertiary.webp),
    linear-gradient(rgba(14, 11, 26, 0.7), rgba(14, 11, 26, 0.7));
  color: var(--dim);
}

.text-btn:hover {
  color: var(--gold);
  filter: brightness(1.35);
}

/* 키보드 포커스 — 접근성 */
button:focus-visible,
a:focus-visible {
  outline: 2px solid rgba(217, 185, 106, 0.85);
  outline-offset: 3px;
  border-radius: 8px;
}

/* 종합 리딩 카드 */
.reading-para {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.95;
}

.reading-card .reading-para {
  font-size: 15px;
  line-height: 1.9;
  color: #efe9dc;
  margin-bottom: 12px;
  word-break: keep-all;
}

.adv-list {
  list-style: none;
  margin-top: 16px;
  border-top: 1px solid rgba(217, 185, 106, 0.25);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.adv-list li {
  word-break: keep-all;
}

.adv-tag {
  display: block;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--gold);
  margin-bottom: 4px;
}

.adv-list li p {
  font-size: 14.5px;
  line-height: 1.8;
  color: #efe9dc;
}

.reading-synthesis {
  font-size: 15.5px;
}

/* 갤러리의 소망 입력 페이드인 */
.wish-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  animation: hint-in 0.6s ease both;
  width: 100%;
}

.wish-reveal .gold-btn {
  margin-top: 18px;
}

.toast {
  min-height: 20px;
  margin-top: 12px;
  text-align: center;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 1px;
}

.back-link {
  position: absolute;
  top: 20px;
  left: 20px;
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 2px;
  background: rgba(10, 8, 20, 0.55);
  padding: 9px 16px;
  border-radius: 20px;
  border: 1px solid rgba(217, 185, 106, 0.25);
  transition: color 0.18s, border-color 0.18s, transform 0.18s;
}

/* 뒤로가기와 같은 알약 버튼 — 안내문(.draw-sub) 바로 아래, 본문 흐름 안에 둔다.
   예전에는 우측 상단 구석(absolute)이었는데, 그 자리는 전 페이지에 고정된 타로권 칩
   (.user-chip-wrap, z-index 80)이 덮어서 버튼이 가려지고 눌리지 않았다. */
.shuffle-btn {
  margin-top: 12px;
  color: var(--dim);
  font-size: 13px;
  letter-spacing: 2px;
  background: rgba(10, 8, 20, 0.55);
  padding: 9px 16px;
  border-radius: 20px;
  border: 1px solid rgba(217, 185, 106, 0.25);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, transform 0.18s;
}

.shuffle-btn:hover {
  color: var(--gold);
  border-color: rgba(217, 185, 106, 0.6);
}

.back-link:hover {
  color: var(--gold);
  border-color: rgba(217, 185, 106, 0.6);
  transform: translateX(-2px);
}

/* ══════════ 모바일 (작은 폰 포함) 전면 대응 ══════════ */
@media (max-width: 560px) {
  .page {
    padding: 18px 10px 48px;
  }

  /* 상단 코너 버튼과 겹치지 않게 제목류는 아래로 */
  .back-link,
  .shuffle-btn {
    font-size: 12px;
    padding: 7px 11px;
    top: 12px;
  }

  .back-link {
    left: 12px;
  }

  .hero-title {
    font-size: clamp(17px, 6.2vw, 22px);
    letter-spacing: clamp(2px, 1.4vw, 5px);
    margin-top: 40px;
  }

  .hero-sub {
    font-size: 12px;
    padding: 0 14px;
  }

  .step-label {
    font-size: 12px;
    letter-spacing: 2px;
    text-align: center;
    word-break: keep-all;
  }

  .step-label::before,
  .step-label::after {
    width: 30px;
  }

  .wish-input {
    height: 50px;
    font-size: 14px;
  }

  /* 덱이 4종이라 좁은 화면에선 2×2 로 감싼다 (한 줄 강제 시 넘침) */
  .deck-row {
    gap: clamp(8px, 3vw, 14px);
    flex-wrap: wrap;
    max-width: 96vw;
    margin-top: 18px;
  }

  .deck-frame {
    width: clamp(72px, 26vw, 104px);
  }

  .deck-name {
    font-size: clamp(12px, 3.4vw, 13px);
    letter-spacing: 0.5px;
    white-space: nowrap;
  }

  .deck-tag {
    font-size: clamp(12px, 3vw, 12px);
    max-width: 28vw;
    line-height: 1.5;
    word-break: keep-all;
  }

  .deck-view-link {
    font-size: 12px;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .deck-view-link .dv-long {
    display: none;
  }

  .deck-view-link .dv-short {
    display: inline;
  }

  /* 드로우 */
  .draw-guide {
    font-size: 15px;
    margin-top: 36px;
    padding: 0 12px;
    letter-spacing: 0;
  }

  .draw-sub {
    font-size: 12px;
    padding: 0 16px;
  }

  /* 좁은 화면: 카드는 작게, 보이는 띠는 손가락이 닿을 만큼 넓게 */

  .fan-scroll {
    /* 100vw 는 세로 스크롤바를 포함해 뷰포트 밖으로 삐져나간다(왼쪽 치우침) */
    width: 100%;
    padding-left: 10px;
    padding-right: 10px;
  }

  /* 슬롯 안내는 아래 라벨과 중복이라 좁은 화면에선 라벨만 남긴다 */
  .slot .slot-empty {
    font-size: 0;
  }

  .slot-label {
    font-size: 12px;
    letter-spacing: 0;
    word-break: keep-all;
  }

  .card-plate {
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 3px 2px;
  }

  /* 결과 */
  .result-wrap {
    margin-top: 64px;
    gap: 14px;
  }

  .slots.triptych {
    gap: clamp(5px, 2.5vw, 10px);
  }

  .slots.triptych .slot {
    width: clamp(76px, 27vw, 132px);
  }

  .slots {
    gap: clamp(5px, 2.5vw, 12px);
  }

  .verdict-card {
    padding: 20px 16px 18px;
  }

  .verdict-card .v-wish {
    font-size: 15px;
  }

  .verdict-card .v-pct {
    font-size: 52px;
  }

  .verdict-card .v-unit {
    font-size: 24px;
  }

  .verdict-card .v-tier {
    font-size: 13px;
  }

  .result-summary .rs-line {
    font-size: 15px;
    letter-spacing: 1px;
  }

  .result-card {
    padding: 18px 16px 16px;
  }

  .result-card::before {
    font-size: 80px;
    top: -14px;
    right: 8px;
  }

  .rc-name {
    font-size: 19px;
    letter-spacing: 1px;
  }

  .rc-en {
    font-size: 12px;
    letter-spacing: 1.5px;
    margin-left: 6px;
  }

  .rc-quote {
    font-size: 15px;
    padding-left: 14px;
  }

  .reading-para,
  .reading-synthesis {
    font-size: 13.5px;
    line-height: 1.85;
  }

  .adv-list li p {
    font-size: 13.5px;
  }

  /* 갤러리 */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(7px, 3vw, 12px);
    width: 94vw;
  }

  .gcard-cap {
    font-size: clamp(12px, 3vw, 12px);
    letter-spacing: 0;
    padding: 6px 3px;
    word-break: keep-all;
  }

  /* 카드 상세 모달 */
  .cd-backdrop {
    padding: 14px 8px;
  }

  .cd-panel {
    padding: 20px 14px;
    gap: 14px;
  }

  .cd-left {
    gap: 10px;
  }

  .cd-card {
    width: clamp(88px, 30vw, 128px);
  }

  .cd-num {
    font-size: 20px;
  }

  .cd-sec p,
  .cd-topics li p {
    font-size: 13.5px;
    line-height: 1.85;
  }

  .cd-kw span {
    font-size: 12px;
    padding: 3px 9px;
  }

  /* 액션 버튼은 세로로 꽉 차게 */
  .action-row {
    flex-direction: column;
    align-items: center;
    gap: 9px;
  }

  /* 세로로 쌓이면 셋의 너비가 같아야 한 줄기로 보인다. 예전엔 .text-btn 만
     이 규칙에서 빠져 min-width(200px) 그대로 남아, 위 두 개는 320px 인데
     '홈으로'만 좁고 6px 낮게 떠 어긋나 보였다.
     3차 버튼이라는 위계는 이미 채움과 글자색이 말해 준다 — 크기로 또 낮추지
     않는다. */
  .gold-btn,
  .ghost-btn,
  .text-btn {
    width: min(100%, 320px);
    height: 50px;
  }
}

/* ══════════ 초소형 화면 (갤럭시 폴드 외부화면 ~ iPhone SE) ══════════ */
@media (max-width: 380px) {
  .page {
    padding: 14px 8px 40px;
  }

  .back-link,
  .shuffle-btn {
    font-size: 12px;
    letter-spacing: 1px;
    padding: 6px 9px;
  }

  .hero-sub,
  .wish-hint {
    font-size: 12px;
    word-break: keep-all;
  }

  .step-label {
    font-size: 12px;
    gap: 8px;
  }

  .step-label::before,
  .step-label::after {
    width: 16px;
  }

  .wish-input {
    height: 46px;
    font-size: 13px;
    padding: 0 14px;
  }

  .draw-guide {
    font-size: 13.5px;
    margin-top: 34px;
  }

  .pick-hint {
    font-size: 14px;
    letter-spacing: 0;
  }

  .verdict-card .v-pct {
    font-size: 44px;
  }

  .verdict-card .v-wish {
    font-size: 14px;
  }

  .verdict-card .v-tier,
  .result-summary .rs-line {
    font-size: 12.5px;
    letter-spacing: 0;
  }

  .result-card {
    padding: 15px 13px 14px;
  }

  /* 좁은 폭에서 포지션 라벨과 방향 배지가 겹치지 않게 */
  .rc-head {
    flex-wrap: wrap;
    gap: 6px;
  }

  .rc-name {
    font-size: 17px;
  }

  .rc-quote {
    font-size: 14px;
    padding-left: 12px;
  }

  .rc-quote::before {
    font-size: 26px;
  }

  .reading-para,
  .reading-synthesis,
  .adv-list li p,
  .cd-sec p {
    font-size: 12.8px;
    line-height: 1.85;
  }

  .adv-tag {
    font-size: 12px;
    letter-spacing: 1px;
  }

  .cd-title {
    font-size: 19px;
  }

  .gold-btn,
  .ghost-btn,
  .text-btn {
    font-size: 13px;
    letter-spacing: 1px;
  }
}

/* ══════════ 카테고리 선택 (랜딩) ══════════ */
.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  width: min(94vw, 780px);
  margin-top: 18px;
}

.cat-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px solid rgba(217, 185, 106, 0.32);
  background: linear-gradient(165deg, rgba(28, 22, 50, 0.82), rgba(11, 8, 22, 0.86));
  transition: transform 0.2s ease-out, border-color 0.2s, box-shadow 0.2s;
}

.cat-card:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 185, 106, 0.75);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45), 0 0 20px rgba(217, 185, 106, 0.12);
}

.cat-name {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 1px;
}

.cat-hint {
  font-size: 12px;
  line-height: 1.6;
  color: var(--dim);
  word-break: keep-all;
}

.foot-links {
  margin-top: 30px;
  font-size: 13px;
  letter-spacing: 2px;
}

.foot-links a {
  color: var(--dim);
  border-bottom: 1px solid rgba(184, 173, 151, 0.35);
  padding-bottom: 2px;
}

.foot-links a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

.disclaimer {
  max-width: min(92vw, 620px);
  margin-top: 30px;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(184, 173, 151, 0.62);
  text-align: center;
  word-break: keep-all;
}

/* ══════════ 질문 · 스프레드 선택 ══════════ */
.q-examples {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: center;
  margin-top: 12px;
  max-width: min(92vw, 560px);
}

.q-chip {
  font-family: inherit;
  font-size: 12px;
  color: var(--dim);
  background: rgba(20, 16, 34, 0.6);
  border: 1px solid rgba(217, 185, 106, 0.28);
  border-radius: 16px;
  padding: 6px 13px;
  word-break: keep-all;
  transition: color 0.18s, border-color 0.18s;
}

.q-chip:hover {
  color: var(--gold);
  border-color: rgba(217, 185, 106, 0.7);
}

.spread-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
  gap: 10px;
  width: min(94vw, 760px);
  margin-top: 16px;
}

.spread-item {
  font-family: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 15px;
  border-radius: 10px;
  border: 1px solid rgba(217, 185, 106, 0.3);
  background: rgba(14, 11, 26, 0.7);
  color: var(--ink);
  transition: border-color 0.18s, background 0.18s;
}

.spread-item:hover {
  border-color: rgba(217, 185, 106, 0.6);
}

.spread-item.on {
  border-color: var(--gold);
  background: rgba(217, 185, 106, 0.13);
}

.sp-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.sp-head b {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 14.5px;
  color: var(--gold);
}

.sp-head em {
  font-size: 12px;
  font-style: normal;
  color: var(--dim);
  letter-spacing: 1px;
}

.sp-desc {
  font-size: 12px;
  line-height: 1.6;
  color: var(--dim);
  word-break: keep-all;
}

.deck-choice.on .deck-card {
  box-shadow: 0 0 0 2px var(--gold), 0 18px 34px rgba(0, 0, 0, 0.55);
}

.opt-row {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 20px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
}

.opt-row input {
  width: 17px;
  height: 17px;
  accent-color: #c9a44f;
}

.opt-row em {
  font-style: normal;
  font-size: 12px;
  color: var(--dim);
}

/* ══════════ 여러 장 스프레드 (5·10장) ══════════ */
.slots.grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(6px, 1.6vw, 16px);
  width: min(96vw, 900px);
  perspective: 1400px;
}

.slots.grid .slot {
  width: 100%;
}

.slots.grid.triptych .slot,
.slots.grid.triptych .slot:nth-child(1),
.slots.grid.triptych .slot:nth-child(2),
.slots.grid.triptych .slot:nth-child(3) {
  transform: none;
  width: 100%;
}

/* ══════════ 카드 상세 페이지 ══════════ */
.cd-page {
  display: grid;
  grid-template-columns: minmax(180px, 290px) 1fr;
  gap: 34px;
  width: min(94vw, 940px);
  margin-top: 24px;
  align-items: start;
}

.cd-page .cd-left {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cd-page .cd-right {
  overflow: visible;
  max-height: none;
  padding-right: 0;
}

.cd-flabel {
  display: inline-block;
  min-width: 62px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 1px;
  margin-right: 8px;
}

/* 별자리 덱 전용 해설 — 대응을 한 줄로 보이고, 겹친 요소를 조각으로 나열 */
.cd-astro-label {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 15px;
  letter-spacing: 0.5px;
  color: #f0e6cd;
  margin: 0 0 12px;
}

.cd-astro-parts {
  display: grid;
  gap: 8px;
}

.cd-astro-part {
  display: grid;
  grid-template-columns: 62px 96px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(180, 175, 210, 0.28);
  border-radius: 8px;
  background: rgba(28, 26, 48, 0.5);
}

.cd-astro-kind {
  font-size: 12px;
  letter-spacing: 1px;
  color: #9a93b8;
}

.cd-astro-name {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 13.5px;
  color: #e6dcc4;
}

.cd-astro-kw {
  font-size: 12.5px;
  color: #b9b0c8;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .cd-astro-part {
    grid-template-columns: 52px 1fr;
  }
  .cd-astro-kw {
    grid-column: 1 / -1;
  }
}

.cd-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(217, 185, 106, 0.22);
  font-size: 12.5px;
  color: var(--dim);
}

.cd-nav a:hover {
  color: var(--gold);
}

@media (max-width: 720px) {
  .cd-page {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .cd-page .cd-left {
    flex-direction: row;
    align-items: flex-end;
  }

  .cd-page .cd-card {
    width: 132px;
  }

  .slots.grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 560px) {
  .cat-grid {
    grid-template-columns: 1fr 1fr;
    gap: 9px;
  }

  .cat-card {
    padding: 13px 12px;
  }

  .cat-name {
    font-size: 14px;
  }

  .cat-hint {
    font-size: 12px;
  }

  .spread-list {
    grid-template-columns: 1fr;
  }
}

/* ── 역방향 3단계 선택 (ask STEP 4) ── */
.rev-row {
  display: flex;
  gap: 10px;
  width: min(94vw, 560px);
  margin: 4px auto 0;
  flex-wrap: wrap;
}
.rev-opt {
  flex: 1 1 150px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  text-align: left;
  border-radius: 12px;
  border: 1px solid rgba(217, 185, 106, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: #e8e3f2;
  cursor: pointer;
  transition: border-color 0.25s, background 0.25s, transform 0.25s;
}
.rev-opt:hover { border-color: rgba(217, 185, 106, 0.5); transform: translateY(-2px); }
.rev-opt.on {
  border-color: rgba(217, 185, 106, 0.9);
  background: rgba(217, 185, 106, 0.12);
  box-shadow: 0 0 18px rgba(217, 185, 106, 0.18);
}
/* 성별은 한 글자짜리 둘이다. 역방향 선택지(설명이 두 줄 붙는 긴 카드)와 같은
   규칙을 쓰면 좁은 화면에서 `flex: 1 1 100%` 를 물려받아 각각 한 줄을 차지했다. */
.rev-opt.sex-opt {
  flex: 0 0 auto;
  min-width: 84px;
  align-items: center;
  text-align: center;
}

.rev-label { font-size: 14px; letter-spacing: 1px; }
.rev-hint { font-size: 12px; color: #a79cc0; word-break: keep-all; }

@media (max-width: 560px) {
  .rev-row { gap: 8px; }
  .rev-opt { flex: 1 1 100%; padding: 10px 12px; }
  .rev-label { font-size: 13px; }
  .rev-hint { font-size: 12px; }
}

/* ── 도감 그룹 필터 칩 ── */
.gfilter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: min(94vw, 1080px);
  margin: 20px auto 6px;
}
.gchip {
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(217, 185, 106, 0.24);
  background: rgba(255, 255, 255, 0.03);
  color: #c9c1dd;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: border-color 0.25s, color 0.25s, background 0.25s;
}
.gchip:hover { border-color: rgba(217, 185, 106, 0.55); color: #f0ead9; }
.gchip.on {
  border-color: rgba(217, 185, 106, 0.85);
  background: rgba(217, 185, 106, 0.13);
  color: #f3e9cd;
}
@media (max-width: 560px) {
  .gfilter { gap: 6px; margin-top: 16px; }
  .gchip { padding: 6px 12px; font-size: 12px; }
}

/* 4종 덱이 3+1 로 갈라지는 폭에서는 2×2 로 못박는다 (한 줄에 4장이 안 들어감) */
@media (max-width: 470px) {
  .deck-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
    row-gap: 24px;
    max-width: 92vw;
  }
  .deck-frame {
    width: clamp(88px, 34vw, 128px);
  }
}

/* 터치 타깃 최소 높이 — 손가락으로 누르기 편한 크기 확보 */
@media (hover: none) {
  .gchip,
  .q-chip {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
  .back-link {
    padding-block: 8px;
  }
  .deck-view-link,
  .cd-nav a,
  .foot-links a {
    padding-block: 9px;
  }
  .back-link,
  .shuffle-btn {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
}

/* 코너 버튼은 마우스에서도 너무 얇지 않게 (기본 20px → 30px) */
.back-link,
.shuffle-btn {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
}

/* ── 첫 진입 인트로 (Splash) ────────────────────────────────
   타임라인: 0.1s 장식 → 0.35s 로고 → 1.05s 문구 → 2.3s 베일 걷힘
   같은 세션에서 홈으로 다시 오면 html[data-splash-seen] 으로 건너뛴다. */
.splash {
  position: fixed;
  /* inset: 0 을 쓰면 안 된다. body 의 app-in 애니메이션이 fill-mode:both 로
     항등 transform 을 남기고, transform 이 있는 조상은 fixed 요소의 컨테이닝
     블록이 된다 → 뷰포트가 아니라 '문서 높이'로 잡혀 하단 안내가 화면 밖으로
     밀렸다. 뷰포트 단위로 못박는다. */
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  z-index: 90;
  /* grid 로 가운데 정렬하면 absolute 자식(.splash-skip)이 뷰포트가 아니라
     '그리드 영역' 기준으로 배치돼 화면 밖으로 밀린다. flex 는 패딩 박스 기준. */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  animation: splash-out 0.95s cubic-bezier(0.45, 0, 0.2, 1) 2.3s forwards;
}

html[data-splash-seen] .splash {
  display: none;
}

/* 배경은 랜딩과 같은 밤하늘 — 걷히면서 아래 페이지로 자연히 이어진다 */
.splash-veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(63, 54, 104, 0.55) 0%, transparent 62%),
    url(/ui/home-bg.webp) center / cover no-repeat,
    radial-gradient(ellipse at 50% 0%, #241f3c 0%, #100e18 62%);
  animation: splash-veil 2.4s ease-out both;
}

.splash-inner {
  position: relative;
  padding: 0 22px;
  text-align: center;
  animation: splash-lift 1.1s cubic-bezier(0.2, 0.7, 0.3, 1) 2.15s both;
}

.splash-orn {
  width: min(240px, 54vw);
  aspect-ratio: 1133 / 242;
  margin: 0 auto 22px;
  background: url(/ui/orn-divider.webp) center / contain no-repeat;
  opacity: 0;
  animation: splash-orn 1s cubic-bezier(0.2, 0.7, 0.3, 1) 0.1s both;
}

.splash-logo {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: clamp(30px, 9.5vw, 62px);
  font-weight: 600;
  letter-spacing: clamp(4px, 1.8vw, 14px);
  /* letter-spacing 이 마지막 글자 뒤에도 붙어 중심이 왼쪽으로 밀린다 */
  text-indent: clamp(4px, 1.8vw, 14px);
  color: var(--gold);
  white-space: nowrap;
  /* ::after 금빛 스침이 글자 폭만 덮도록 박스를 글자에 맞춘다
     (블록이면 화면을 가로지르는 띠가 된다) */
  display: inline-block;
  position: relative;
  opacity: 0;
  animation:
    splash-logo 1.5s cubic-bezier(0.16, 0.8, 0.24, 1) 0.35s both,
    splash-glow 1.6s ease-in-out 1.5s both;
}

.splash-line {
  margin-top: clamp(16px, 3.4vw, 26px);
  font-size: clamp(12.5px, 3.4vw, 17px);
  line-height: 1.9;
  letter-spacing: clamp(1px, 0.5vw, 3px);
  color: #cfc6b2;
  word-break: keep-all;
  opacity: 0;
  animation: splash-line 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) 1.05s both;
}

/* 좁은 화면에서는 문구를 두 줄로 접는다 */
.splash-br::before {
  content: ", ";
}

@media (max-width: 430px) {
  .splash-br {
    display: block;
    height: 0;
  }
  .splash-br::before {
    content: "";
  }
}

.splash-skip {
  position: absolute;
  bottom: max(28px, env(safe-area-inset-bottom, 0px));
  font-size: 12px;
  letter-spacing: 1.5px;
  color: rgba(184, 173, 151, 0.5);
  opacity: 0;
  /* 베일이 2.3s 에 걷히기 시작하므로 그보다 확실히 앞서 떠야 읽힌다 */
  animation: splash-skip 0.6s ease-out 1.35s both;
}

@keyframes splash-veil {
  from {
    transform: scale(1.08);
    filter: brightness(0.5);
  }
  to {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes splash-orn {
  from {
    opacity: 0;
    transform: scaleX(0.4);
  }
  to {
    opacity: 0.75;
    transform: none;
  }
}

@keyframes splash-logo {
  from {
    opacity: 0;
    letter-spacing: clamp(14px, 5vw, 44px);
    filter: blur(9px);
    text-shadow: 0 0 0 rgba(217, 185, 106, 0);
  }
  to {
    opacity: 1;
    filter: blur(0);
    text-shadow: 0 0 34px rgba(217, 185, 106, 0.34);
  }
}

/* 자리를 잡은 뒤 금빛이 한 번 차올랐다 가라앉는다.
   슬라이딩 그라디언트 오버레이는 mix-blend-mode 가 의도대로 섞이지 않아
   반투명 사각형으로 드러났다 - 글자 자체의 번짐으로 대신한다. */
@keyframes splash-glow {
  0% {
    text-shadow: 0 0 34px rgba(217, 185, 106, 0.34);
  }
  45% {
    text-shadow: 0 0 16px rgba(255, 244, 214, 0.75),
      0 0 58px rgba(217, 185, 106, 0.6);
  }
  100% {
    text-shadow: 0 0 30px rgba(217, 185, 106, 0.38);
  }
}

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

@keyframes splash-skip {
  to {
    opacity: 1;
  }
}

/* 베일이 걷힐 때 안쪽은 살짝 더 멀어지며 사라진다 (막이 올라가는 느낌) */
@keyframes splash-lift {
  to {
    opacity: 0;
    transform: translateY(-16px) scale(1.05);
  }
}

@keyframes splash-out {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* 애니메이션을 줄이는 설정에서는 문구만 잠깐 보여주고 넘긴다 */
@media (prefers-reduced-motion: reduce) {
  .splash {
    animation: splash-out 0.4s linear 1.1s forwards;
  }
  .splash-veil,
  .splash-inner,
  .splash-orn,
  .splash-logo,
  .splash-line {
    animation: none;
    opacity: 1;
    filter: none;
    transform: none;
  }
  .splash-skip {
    display: none;
  }
}


/* ── 인접 카드 조합 (카드에서 카드로) ── */
.pair-note + .pair-note {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(217, 185, 106, 0.14);
}
.pair-route {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 7px;
  font-size: 12.5px;
  letter-spacing: 0.5px;
  color: var(--gold);
}
.pair-route em {
  color: rgba(217, 185, 106, 0.55);
  font-style: normal;
}
.pair-tag {
  margin-left: 2px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid rgba(217, 185, 106, 0.3);
  background: rgba(217, 185, 106, 0.1);
  font-size: 12px;
  font-weight: 400;
  color: #f0e6cd;
}
.pair-gap {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(217, 185, 106, 0.16);
  color: #bdb3a0;
}
@media (max-width: 560px) {
  .pair-route { font-size: 12px; gap: 5px; }
  .pair-tag { padding: 2px 7px; font-size: 12px; }
  .pair-note + .pair-note { margin-top: 13px; padding-top: 13px; }
}

/* ── 도감 덱 선택 줄 ── */
.gfilter.deck-pick {
  margin-bottom: 0;
}
.gfilter.deck-pick .gchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
/* 장수 배지 — 78장인지 22장인지 한눈에 */
.gfilter.deck-pick .gchip em {
  font-style: normal;
  font-size: 12px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(217, 185, 106, 0.16);
  color: #d9c9a2;
}
.gfilter.deck-pick .gchip.on em {
  background: rgba(217, 185, 106, 0.3);
  color: #f6efdc;
}
@media (max-width: 560px) {
  .gfilter.deck-pick .gchip { gap: 5px; }
  /* 10.5px 아래로 내리면 읽기 어렵다 — 폰트는 줄이지 말고 여백만 줄인다 */
  .gfilter.deck-pick .gchip em { font-size: 12px; padding: 1px 5px; }
}

/* 자리에 따라 읽는 법이 달라지는 카드 안내 (장애물·조언 자리) */
/* 켈틱 크로스의 원전 낭송문 — 본문보다 낮은 톤으로 병기 */
.pos-classic {
  color: #9a93b8;
  font-size: 0.92em;
  font-style: italic;
}

.pos-note {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 2px solid rgba(217, 185, 106, 0.45);
  border-radius: 0 8px 8px 0;
  background: rgba(217, 185, 106, 0.07);
  font-size: 13.5px;
  color: #ded5c2;
}
@media (max-width: 560px) {
  .pos-note { padding: 9px 11px; font-size: 12.5px; }
}

/* 비교할 두 갈래 입력 (선택 비교 스프레드) */
.ab-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: min(94vw, 560px);
  margin: 6px auto 0;
}
.ab-input {
  width: auto;
  flex: 1 1 0;
  min-width: 0;
  height: 48px;
  margin-top: 0;
  padding: 0 14px;
  font-size: 14px;
}
.ab-vs {
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: 1px;
}
@media (max-width: 430px) {
  .ab-row { flex-wrap: wrap; gap: 8px; }
  .ab-input { flex: 1 1 100%; height: 44px; }
  .ab-vs { flex: 1 1 100%; text-align: center; }
}

/* ── 대분류 선택 (정통 / 별자리) ── */
.mode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  width: min(94vw, 860px);
  margin: 8px auto 0;
}
.mode-card {
  --card-bg: url(/ui/mode-classic.webp);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 24px 20px;
  border-radius: 16px;
  border: 1px solid rgba(217, 185, 106, 0.32);
  background: linear-gradient(165deg, rgba(28, 22, 50, 0.9), rgba(11, 8, 22, 0.9));
  text-decoration: none;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}
/* 젠스파크 전용 배경 — 오른쪽에 모티프, 왼쪽은 글 자리. 호버 때 천천히 확대 */
.mode-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--card-bg) right center / cover no-repeat;
  transition: transform 0.6s ease;
}
/* 글 밑을 어둡게 눌러 가독성 확보 — 오른쪽 모티프는 살린다 */
.mode-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    90deg,
    rgba(12, 10, 22, 0.86) 0%,
    rgba(12, 10, 22, 0.66) 48%,
    rgba(12, 10, 22, 0.18) 100%
  );
}
.mode-card:hover {
  border-color: rgba(217, 185, 106, 0.75);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5);
}
.mode-card:hover::before {
  transform: scale(1.05);
}
.mode-card.star {
  --card-bg: url(/ui/mode-star.webp);
  background: linear-gradient(165deg, rgba(24, 26, 56, 0.92), rgba(9, 10, 24, 0.92));
}
.mode-card.saju {
  --card-bg: url(/ui/mode-saju.webp);
}
.mode-tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(217, 185, 106, 0.35);
  background: rgba(217, 185, 106, 0.1);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gold);
}
.mode-name {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--ink);
}
.mode-desc {
  font-size: 13.5px;
  line-height: 1.8;
  color: #c8bfae;
  word-break: keep-all;
}
.mode-meta {
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #8d8470;
}
@media (max-width: 640px) {
  .mode-grid { grid-template-columns: 1fr; gap: 12px; }
  .mode-card { padding: 18px 18px 16px; }
  .mode-name { font-size: 19px; }
  .mode-desc { font-size: 12.5px; }
}

/* ── 별자리 입력 ── */
.bd-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  /* 마지막 방어선 — 그래도 안 들어가면 잘리는 대신 접힌다 */
  flex-wrap: wrap;
  /* .action-row 와 같은 이유로 확정 폭이 필요하다. shrink-to-fit 로 두면
     폭이 실제보다 좁게 잡혀, 320px 에서 연·월·일이 네 줄로 쪼개졌다. */
  width: min(100%, 460px);
}
.bd-input {
  width: 92px;
  height: 52px;
  margin-top: 0;
  text-align: center;
  font-size: 18px;
}
.bd-sep {
  color: var(--dim);
  font-size: 14px;
  margin-right: 6px;
}
.zo-found {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 16px auto 0;
  padding: 14px 22px;
  border-radius: 14px;
  border: 1px solid rgba(217, 185, 106, 0.4);
  background: rgba(217, 185, 106, 0.08);
}
.zo-name {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--gold);
}
.zo-sub { font-size: 12.5px; color: #cec5b2; }
.zo-kw { font-size: 12px; color: #9a917e; letter-spacing: 0.5px; }

.zo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  width: min(94vw, 620px);
  margin: 6px auto 0;
}
.zo-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 6px;
  border-radius: 11px;
  border: 1px solid rgba(217, 185, 106, 0.22);
  background: rgba(255, 255, 255, 0.03);
  color: #ded5c2;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.zo-chip:hover { border-color: rgba(217, 185, 106, 0.55); }
.zo-chip.on {
  border-color: rgba(217, 185, 106, 0.9);
  background: rgba(217, 185, 106, 0.13);
}
.zo-chip b { font-size: 13px; font-weight: 400; letter-spacing: 0.5px; }
.zo-chip em { font-size: 12px; font-style: normal; color: #8d8470; }
@media (max-width: 560px) {
  .zo-grid { grid-template-columns: repeat(3, 1fr); }
  .zo-chip b { font-size: 12px; }
}

/* ── 결과의 점성술 대응·공명 ── */
.astro-box {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(140, 160, 220, 0.28);
  background: rgba(60, 70, 130, 0.14);
}
.astro-box.r3 {
  border-color: rgba(217, 185, 106, 0.6);
  background: rgba(217, 185, 106, 0.11);
}
.astro-box.r2 { border-color: rgba(180, 175, 210, 0.4); }
.astro-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.astro-label {
  font-size: 12.5px;
  letter-spacing: 0.5px;
  color: #cdd4f0;
}
.astro-box.r3 .astro-label { color: #f0e6cd; }
.astro-score {
  flex: 0 0 auto;
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(217, 185, 106, 0.2);
  font-size: 12px;
  color: #f3e9cd;
}
.astro-score em { font-style: normal; opacity: 0.65; }
.astro-box .reading-para { font-size: 13.5px; color: #ded5c2; }
.astro-rev { margin-top: 6px; color: #b3aa98 !important; }
@media (max-width: 560px) {
  .astro-box { padding: 10px 11px; }
  .astro-label { font-size: 12px; }
  .astro-box .reading-para { font-size: 12.5px; }
}

/* 질문 가드레일 안내 — 위기(crisis)는 가장 눈에 띄게, 전문가 안내(refer)는 차분하게 */
.guard-box {
  width: min(92vw, 560px);
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(217, 185, 106, 0.4);
  background: rgba(28, 26, 48, 0.72);
  text-align: left;
}

.guard-crisis {
  border-color: rgba(232, 128, 128, 0.65);
  background: rgba(64, 28, 34, 0.8);
}

.guard-block {
  border-color: rgba(232, 176, 112, 0.55);
}

.guard-title {
  display: block;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 14.5px;
  color: #f0e6cd;
  margin-bottom: 6px;
}

.guard-msg {
  font-size: 13px;
  line-height: 1.7;
  color: #d8d0c0;
  margin: 0;
}

.guard-again {
  margin-top: 8px;
  color: #b9b0c8;
}

.guard-res {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.9;
  color: #efe3c2;
}

.guard-res a {
  color: #f2c9c9;
  font-weight: 700;
  text-decoration: underline;
}

/* 오늘의 데칸 카드 — 전 사용자 공통. 열흘마다 바뀐다 */
.decan-today {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(92vw, 560px);
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid rgba(180, 175, 210, 0.3);
  border-radius: 12px;
  background: rgba(28, 26, 48, 0.6);
  text-align: left;
}

.decan-today img {
  width: 56px;
  border-radius: 6px;
  border: 1px solid rgba(217, 185, 106, 0.35);
}

.decan-today .dt-text b {
  display: block;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 13.5px;
  color: #f0e6cd;
  margin-bottom: 4px;
}

.decan-today .dt-text span {
  font-size: 12.5px;
  line-height: 1.65;
  color: #b9b0c8;
}

/* 이어카드·버스카드 */
.birth-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  width: min(92vw, 560px);
  margin-top: 16px;
}

.bc-item {
  width: 104px;
  text-align: center;
}

.bc-item img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(217, 185, 106, 0.35);
}

.bc-item b {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #9a93b8;
}

.bc-item span {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 13px;
  color: #efe3c2;
}

.bc-note {
  width: 100%;
  font-size: 12px;
  line-height: 1.7;
  color: #8f88a6;
  margin: 2px 0 0;
  text-align: center;
}

.bd-year {
  width: 104px;
}
/* 입력값(18px)에 맞춘 크기로 '연도(선택)' 같은 안내 글자가 잘렸다.
   자리표시는 값보다 작게 둔다 — 잘리는 것보다 작은 편이 낫다. */
.bd-input::placeholder {
  font-size: 14px;
  letter-spacing: 0;
}

/* 단계를 넘기는 버튼 — 아직 넣을 것이 남았으면 눌리지 않는다 */
.gold-btn:disabled,
.ghost-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.5);
}
.gold-btn:disabled:hover,
.ghost-btn:disabled:hover {
  transform: none;
}

/* 사주 6자 — 연·월·일주 */
.saju-pillars {
  display: flex;
  gap: 12px;
  margin-top: 18px;
}

.sp-item {
  width: 108px;
  padding: 12px 10px;
  border: 1px solid rgba(217, 185, 106, 0.35);
  border-radius: 12px;
  background: rgba(28, 26, 48, 0.6);
  text-align: center;
}

.sp-item b {
  display: block;
  font-size: 12px;
  letter-spacing: 2px;
  color: #9a93b8;
}

.sp-hanja {
  display: block;
  margin: 6px 0 2px;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 26px;
  letter-spacing: 4px;
  color: #f0e6cd;
}

.sp-ko {
  font-size: 12px;
  color: #b9b0c8;
}

/* 일간 카드 — 칠요 브리지 */
.ilgan-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(92vw, 560px);
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid rgba(217, 185, 106, 0.45);
  border-radius: 12px;
  background: rgba(34, 30, 56, 0.72);
  text-align: left;
}

.ilgan-card img {
  width: 74px;
  border-radius: 8px;
  border: 1px solid rgba(217, 185, 106, 0.4);
}

.ilgan-card .ic-text b {
  display: block;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 14.5px;
  color: #f0e6cd;
  margin-bottom: 5px;
}

.ilgan-card .ic-text span {
  font-size: 12.5px;
  line-height: 1.7;
  color: #c8bfae;
}

.ilgan-card .ic-text em {
  font-style: normal;
  color: #e8c877;
}

/* 오행 분포 — 메이저 5장 */
.ohaeng-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  width: min(94vw, 640px);
}

.oh-item {
  width: 104px;
  text-align: center;
}

.oh-item img {
  width: 100%;
  border-radius: 8px;
  border: 1px solid rgba(217, 185, 106, 0.35);
}

.oh-item.lack img {
  opacity: 0.42;
  filter: grayscale(0.55);
}

.oh-item b {
  display: block;
  margin-top: 6px;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 13px;
  color: #efe3c2;
}

.oh-bar {
  display: block;
  font-size: 12px;
  letter-spacing: 3px;
  color: #d9b96a;
  margin-top: 2px;
}

.oh-note {
  display: block;
  font-size: 12px;
  color: #9a93b8;
  margin-top: 2px;
}

/* 십성 5그룹 */
.sipseong-list {
  width: min(92vw, 560px);
  display: grid;
  gap: 8px;
}

.ss-item {
  display: grid;
  grid-template-columns: 52px 76px 1fr;
  align-items: baseline;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid rgba(180, 175, 210, 0.26);
  border-radius: 10px;
  background: rgba(28, 26, 48, 0.55);
  text-align: left;
}

.ss-item b {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 13.5px;
  color: #e6dcc4;
}

.ss-line {
  font-size: 12px;
  color: #b9b0c8;
}

@media (max-width: 560px) {
  .sp-item { width: 92px; }
  .sp-hanja { font-size: 22px; }
  .ss-item { grid-template-columns: 44px 68px 1fr; }
}

/* ── 결과: '배열에서 보이는 것' — 관찰 항목마다 분류 태그 ── */
.obs-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
.obs-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.obs-tag {
  flex: 0 0 auto;
  min-width: 66px;
  text-align: center;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gold);
  border: 1px solid rgba(217, 185, 106, 0.35);
  border-radius: 999px;
  padding: 4px 10px;
  margin-top: 3px;
  word-break: keep-all;
}
.obs-list li p {
  font-size: 14.5px;
  line-height: 1.85;
  color: #efe9dc;
  word-break: keep-all;
}

/* ── 결과: '카드를 하나로 이으면' — 자리 순서 타임라인 ── */
.story-steps {
  list-style: none;
  margin: 12px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.story-step {
  position: relative;
  padding-left: 24px;
}
.story-step::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(217, 185, 106, 0.55);
}
.story-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 7.5px;
  top: 21px;
  bottom: -15px;
  width: 1px;
  background: linear-gradient(rgba(217, 185, 106, 0.45), rgba(217, 185, 106, 0.1));
}
.step-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.step-pos {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--gold);
}
.step-card {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #f4eee0;
}
.step-rev {
  font-size: 12px;
  color: #d8a0a8;
  border: 1px solid rgba(216, 160, 168, 0.4);
  border-radius: 999px;
  padding: 1px 8px;
}
/* 생년월일을 채우는 순간 결과가 통째로 튀어나온다. 위에서부터 차례로 떠올려
   '방금 이게 새로 나타났다'가 보이게 한다.

   display: contents 라서 이 상자 자체는 레이아웃에 없다 — 자식들이 .page 의
   flex 항목으로 그대로 남아야 가운데 정렬이 유지된다.
   애니메이션은 마운트될 때 한 번만 돈다. 이미 떠 있는 절은 글자를 고쳐도
   다시 뜨지 않고, 나중에 붙는 절(시각을 넣어 생기는 시주 등)만 새로 뜬다. */
.reveal {
  display: contents;
}
@keyframes reveal-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.reveal > * {
  animation: reveal-in 0.5s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
/* 딜레이를 길게 잡으면 나중에 붙는 절(시각을 넣어 생기는 시주)도 그 자리의
   딜레이를 그대로 물려받아, 입력 후 반응이 굼떠 보인다. 계단은 짧게 둔다. */
.reveal > *:nth-child(1) { animation-delay: 0.03s; }
.reveal > *:nth-child(2) { animation-delay: 0.08s; }
.reveal > *:nth-child(3) { animation-delay: 0.13s; }
.reveal > *:nth-child(4) { animation-delay: 0.18s; }
.reveal > *:nth-child(5) { animation-delay: 0.23s; }
/* 여섯 번째부터는 첫 화면 밖이라 더 늦출 이유가 없다 */
.reveal > *:nth-child(n + 6) { animation-delay: 0.28s; }

@media (prefers-reduced-motion: reduce) {
  .reveal > * {
    animation: none;
  }
}

/* 자리가 많은 스프레드에서 먼저 볼 곳 */
.step-focus {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: #2e2205;
  background: linear-gradient(172deg, #f0d99c, #cfa955);
  border-radius: 999px;
  padding: 1px 9px;
  font-weight: 700;
}
.story-step.focus-step::before {
  width: 11px;
  height: 11px;
  left: 2.5px;
  top: 6px;
  box-shadow: 0 0 12px rgba(217, 185, 106, 0.85);
}

/* 핵심 블록과 근거 구간을 가르는 줄 */
.evidence-label {
  width: min(94vw, 720px);
  margin: 26px auto 2px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 12px;
  letter-spacing: 2px;
  color: #8d8778;
}
.evidence-label::before,
.evidence-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 185, 106, 0.28), transparent);
}

/* 사주·별자리에서 들고 온 맥락 — 주제 고르기·질문·덱 화면에 계속 따라붙는다 */
.flow-chip {
  width: min(94vw, 620px);
  margin: 16px auto 0;
  padding: 12px 16px 11px;
  border: 1px solid rgba(217, 185, 106, 0.3);
  border-radius: 13px;
  background: rgba(217, 185, 106, 0.06);
}
.flow-chip > b {
  display: block;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  color: var(--gold);
}
.flow-chip ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}
.flow-chip li {
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(217, 185, 106, 0.28);
  background: rgba(217, 185, 106, 0.08);
  font-size: 12.5px;
  color: #f4eee0;
}
.flow-chip > span {
  display: block;
  margin-top: 9px;
  font-size: 12px;
  line-height: 1.7;
  color: #a9a294;
}

/* 사주 입력이 덜 찼을 때 — 무엇이 비었고 넣으면 뭐가 더 나오는지 */
.saju-todo {
  width: min(94vw, 620px);
  margin: 18px auto 4px;
  padding: 14px 18px 13px;
  border: 1px solid rgba(217, 185, 106, 0.42);
  border-radius: 14px;
  background: rgba(217, 185, 106, 0.07);
}
.saju-todo b {
  display: block;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 14.5px;
  color: var(--gold);
  margin-bottom: 7px;
}
.saju-todo ul {
  margin: 0;
  padding-left: 17px;
}
.saju-todo li {
  font-size: 13.5px;
  line-height: 1.8;
  color: #e9e3d6;
}
.saju-todo li b {
  display: inline;
  font-size: inherit;
  margin: 0;
}
.saju-todo > span {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.7;
  color: #a9a294;
}

/* 명리 용어가 촘촘한 절들 — 기본 접힘 */
.saju-more {
  width: min(94vw, 720px);
  margin: 16px auto 0;
}
.saju-more > summary {
  position: relative;
  cursor: pointer;
  list-style: none;
  padding: 12px 34px 12px 16px;
  border: 1px solid rgba(217, 185, 106, 0.3);
  border-radius: 12px;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 14px;
  color: var(--gold);
  letter-spacing: 1px;
}
.saju-more > summary::-webkit-details-marker {
  display: none;
}
/* 부제(span)가 블록이라 화살표가 세 번째 줄로 떨어졌다. 오른쪽에 고정한다. */
.saju-more > summary::after {
  content: "▾";
  position: absolute;
  right: 16px;
  top: 13px;
  color: rgba(217, 185, 106, 0.7);
}
.saju-more[open] > summary::after {
  content: "▴";
}
.saju-more > summary span {
  display: block;
  margin-top: 3px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0;
  color: #a9a294;
}

/* '같이 있는 두 힘'의 자리 이름 — 두 축이 한눈에 갈라져 읽히도록 금색으로 */
.t-pos {
  color: var(--gold);
  font-weight: 700;
}

/* 앞 카드와의 기운 전이를 잇는 이음어 — 본문과 같은 크기, 금색으로만 살짝 세운다 */
.step-link {
  font-style: normal;
  color: var(--gold);
  opacity: 0.9;
}

/* 같은 자리에서 '뜻' 다음에 오는 '무엇을 할까' — 금색 세로선으로 구분한다 */
.step-adv {
  margin-top: 7px;
  padding-left: 11px;
  border-left: 2px solid rgba(217, 185, 106, 0.45);
  color: #f4eee0 !important;
}
.story-step p {
  font-size: 14.5px;
  line-height: 1.85;
  color: #e9e3d6;
  word-break: keep-all;
}

/* ── 결과: '정리하면' 총평 박스 ── */
.synthesis {
  margin-top: 18px;
  border: 1px solid rgba(217, 185, 106, 0.3);
  background: linear-gradient(160deg, rgba(217, 185, 106, 0.09), rgba(217, 185, 106, 0.02));
  border-radius: 12px;
  padding: 15px 17px;
}
.syn-label {
  display: block;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 12px;
  letter-spacing: 3px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 7px;
}
.synthesis p {
  font-size: 15px;
  line-height: 1.9;
  color: #f2ecdf;
  word-break: keep-all;
}

@media (max-width: 560px) {
  .obs-list li {
    flex-direction: column;
    gap: 5px;
  }
  .obs-tag {
    align-self: flex-start;
  }
}

/* 홈 네 번째 칸 — 카드 도감. 리딩 카드와 구별되게 한지빛 바탕 */
.mode-card.gallery {
  --card-bg: url(/ui/mode-gallery.webp);
  background: linear-gradient(165deg, rgba(46, 38, 24, 0.88), rgba(16, 12, 8, 0.92));
}

/* 덱 칩 줄에서 78장 무리와 22장 무리를 가르는 세로선 */
.gchip-div {
  width: 1px;
  height: 20px;
  align-self: center;
  background: rgba(217, 185, 106, 0.28);
  margin: 0 6px;
}

/* ── 한국어 줄바꿈 일괄 정리 ──
   단어 중간에서 꺾여 "있는 일 1 /" / "3" 처럼 갈라지던 텍스트들.
   keep-all 로 단어 단위로만 꺾고, 진행 카운터(1 / 3)는 한 덩어리로 묶는다 */
.draw-guide,
.draw-sub,
.pick-hint,
.v-tier,
.rs-line,
.wish-hint,
.guard-msg,
.slot-empty,
.hero-sub,
.mode-name,
.box-name,
.step-label,
.gcard-cap,
.disclaimer {
  word-break: keep-all;
  overflow-wrap: break-word;
}

.pick-hint small {
  white-space: nowrap;
}


/* ── 조합 해석 사전 표시 (사주 일주·궁위·오행 / 별자리 태양 사인) ── */
.interp-box {
  width: min(94vw, 640px);
  margin: 6px auto 0;
}
.interp-core {
  font-size: 15px;
  line-height: 1.9;
  color: #efe9dc;
  word-break: keep-all;
  text-align: left;
}
.interp-ss {
  color: var(--gold);
  font-weight: 700;
}
.interp-dig {
  font-size: 12px;
  letter-spacing: 1px;
  color: #b8ad97;
}

/* ── 실행 간소화 (피드백: 해설·실행이 어렵다) ── */

/* (구) 한 줄 배지 — 고정 덱도 deck-choice 카드로 통일되며 미사용 */
.deck-fixed {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 22px auto 0;
  padding: 10px 16px;
  border: 1px solid rgba(217, 185, 106, 0.3);
  border-radius: 999px;
  width: fit-content;
  max-width: 94vw;
  font-size: 13.5px;
  color: #d9d2c2;
  word-break: keep-all;
}
.deck-fixed-thumb {
  width: 22px;
  height: 36px;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(217, 185, 106, 0.4);
  flex: 0 0 auto;
}

/* 접힌 세부 설정 (역방향) */
.adv-fold {
  width: min(94vw, 640px);
  margin: 18px auto 0;
}
.adv-fold summary {
  cursor: pointer;
  list-style: none;
  text-align: center;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--dim);
  padding: 8px 0;
}
.adv-fold summary::-webkit-details-marker { display: none; }
.adv-fold summary::after { content: " ▾"; opacity: 0.7; }
.adv-fold[open] summary::after { content: " ▴"; }
.adv-fold summary b { color: var(--gold); font-weight: 600; }
.adv-fold .wish-hint { text-align: center; }

/* 결과의 '읽는 법' 접기 */
.guide-fold > summary { cursor: pointer; list-style: none; }
.guide-fold > summary::-webkit-details-marker { display: none; }
.guide-summary { display: flex; align-items: center; justify-content: space-between; }
.guide-open { font-size: 12px; color: var(--dim); letter-spacing: 1px; }
.guide-fold[open] .guide-open { display: none; }

/* 모바일: 안내문이 화면 가장자리에 붙던 문제 */
@media (max-width: 560px) {
  .wish-hint,
  .disclaimer {
    padding-left: 14px;
    padding-right: 14px;
    max-width: 100%;
  }
}

/* 접힌 스프레드 선택 */
.spread-fold {
  margin-top: 20px;
}
.spread-fold .spread-list {
  margin-top: 10px;
  /* 목록이 자기 폭(min(94vw,760px))을 그대로 쓰면 부모 폴드(640px)보다 넓어
     오른쪽으로 삐져나온다(768px 화면에서 718 vs 640). 부모를 채우게 한다. */
  width: 100%;
}

/* ── 초소형 폰 (~320px) ── */
@media (max-width: 380px) {
  .hero-title { font-size: 24px; letter-spacing: 4px; }
  .deck-frame { width: 84px; }
  .spread-list { grid-template-columns: 1fr; }
  .slots.triptych .slot { width: clamp(72px, 26vw, 94px); }
  .v-pct { font-size: 44px; }
  .step-card { font-size: 15px; }
  .obs-tag { min-width: 0; }
  .gold-btn, .ghost-btn { padding-left: 18px; padding-right: 18px; }
  .deck-fixed { font-size: 12.5px; padding: 8px 12px; }
  /* 생년월일 칸 — 세 칸이 한 줄에 보여야 무엇을 넣는 자리인지 한눈에 읽힌다.
     320px 실측: 콘텐츠 폭 287px 안에 66+76+66 + 구분자 30 + 간격 20 = 258. */
  .bd-row { gap: 4px; }
  .bd-input { width: 66px; font-size: 16px; }
  .bd-year { width: 76px; }
  .bd-sep { margin-right: 0; font-size: 12px; }
}

/* 성사 서술(수치 제거 후) — 지수 자리에는 7단계 서술만 크게 */
.v-verdict {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: clamp(26px, 5vw, 34px);
  letter-spacing: 3px;
}

/* ── AI 심층 풀이 ─────────────────────────────── */
.ai-reading { border-color: rgba(217, 185, 106, 0.35); }
.ai-tickets {
  margin-left: auto;
  font-size: 12px;
  color: #d9b96a;
  letter-spacing: 1px;
}
.ai-intro { color: #cfc8b8; }
.ai-gen-btn { margin-top: 10px; width: 100%; }
.ai-loading {
  color: #b9b2a2;
  text-align: center;
  padding: 18px 0;
  animation: ai-pulse 2.2s ease-in-out infinite;
}
@keyframes ai-pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }
.ai-text { white-space: pre-wrap; }
.ai-note {
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.6;
  color: #8d8778;
}
.ai-earn { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.ai-earn li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px;
  border: 1px solid rgba(217, 185, 106, 0.28);
  border-radius: 10px;
  background: rgba(217, 185, 106, 0.05);
  font-size: 13.5px;
}
.ai-earn li b { color: #efe3c2; font-weight: 600; }
.ai-earn li span { color: #d9b96a; font-size: 12px; }
.ai-earn li.soon { opacity: 0.5; }
.ai-earn li.soon span { color: #8d8778; }
/* 광고 보상 — li 전체가 버튼인 항목 */
.ad-reward-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  /* <button> 의 기본값은 가운데 정렬이다 — 바로 아래 '타로권 구매'(<a>) 행과
     라벨 시작선이 어긋나 보였다 */
  text-align: left;
}
.ad-reward-btn:disabled { cursor: wait; opacity: 0.6; }
.ad-reward-btn b { color: #efe3c2; font-weight: 600; }
.ad-reward-btn span { color: #d9b96a; font-size: 12px; }
.ad-reward-msg {
  flex-basis: 100%;
  margin: 8px 0 0;
  font-size: 12px;
  color: #cfc4a8;
}
.ai-earn li:has(.ad-reward-btn) { flex-wrap: wrap; }
/* 프로필 패널 안의 광고 행 */
.uc-earn { list-style: none; margin: 0 0 10px; padding: 0; }

/* ── 생년월일 입력 패널 (사주 STEP 2) — 레퍼런스: NN/g·USWDS·Smashing.
   세 개의 떠 있는 카드 대신 패널 하나, 좌측 라벨 열 + 헤어라인 구분.
   단위는 필드 '위' 라벨로 — 캡슐 옆 조사식 라벨의 중복·리듬 문제 제거. */
.bd-panel {
  width: min(480px, 94vw);
  margin: 14px auto 0;
  border: 1px solid rgba(217, 185, 106, 0.32);
  border-radius: 16px;
  background: linear-gradient(170deg, rgba(24, 19, 44, 0.78), rgba(11, 8, 22, 0.85));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.bd-sec {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 14px;
  align-items: start;
  padding: 18px 20px;
  text-align: left;
}
.bd-sec + .bd-sec {
  border-top: 1px solid rgba(217, 185, 106, 0.14);
}
.bd-sec-label {
  padding-top: 9px;
  font-size: 12.5px;
  letter-spacing: 2px;
  color: #d9b96a;
  word-break: keep-all;
}
.bd-sec-body { min-width: 0; }
.bd-sec-hint {
  margin: 9px 0 0;
  font-size: 12px;
  line-height: 1.65;
  color: #8f87a8;
  word-break: keep-all;
}
.bd-sec-hint b { color: #cfc4a8; font-weight: 600; }
/* 숫자 필드 — 위에 작은 라벨, 아래에 정갈한 상자 */
.bd-fields {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.bd-f {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.bd-f span {
  font-size: 12px;
  letter-spacing: 1px;
  color: #9c93b5;
}
.bd-f input {
  width: 58px;
  height: 44px;
  text-align: center;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 18px;
  color: #f0e9d8;
  background: rgba(8, 6, 16, 0.55);
  border: 1px solid rgba(217, 185, 106, 0.28);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.bd-f input::placeholder { color: rgba(156, 147, 181, 0.4); }
.bd-f input:focus {
  border-color: rgba(217, 185, 106, 0.75);
  box-shadow: 0 0 14px rgba(217, 185, 106, 0.14);
}
.bd-f-year input { width: 84px; }
.bd-colon {
  padding-bottom: 11px;
  color: rgba(217, 185, 106, 0.55);
  font-size: 18px;
}
.bd-time { animation: hero-rise 0.3s ease both; margin-top: 12px; }
/* 세그먼트 토글 — 시각 입력/몰라요, 남/여 */
.bd-seg {
  display: inline-flex;
  padding: 3px;
  border: 1px solid rgba(217, 185, 106, 0.28);
  border-radius: 999px;
  background: rgba(8, 6, 16, 0.55);
}
.bd-seg button {
  padding: 7px 18px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #9c93b5;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
}
.bd-seg button.on {
  background: linear-gradient(160deg, rgba(246, 231, 189, 0.95), rgba(217, 185, 106, 0.95));
  color: #14121f;
  font-weight: 700;
}
@media (max-width: 560px) {
  .bd-sec {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 15px 16px;
  }
  .bd-sec-label { padding-top: 0; }
}

/* 구글 로그인 (AI 잠금 화면) */
.ai-earn-login {
  margin: 12px 0;
  padding: 14px;
  border: 1px solid rgba(217, 185, 106, 0.35);
  border-radius: 10px;
  background: rgba(217, 185, 106, 0.07);
  display: grid;
  gap: 10px;
  justify-items: center;
}
.ai-earn-login > b { color: #efe3c2; font-size: 14px; font-weight: 600; }
.google-btn-slot { min-height: 40px; display: flex; justify-content: center; }
.ai-bonus {
  margin: 8px 0 2px;
  padding: 9px 12px;
  border-radius: 8px;
  background: rgba(217, 185, 106, 0.12);
  color: #e8c877;
  font-size: 13.5px;
  text-align: center;
}

/* 카드별 AI 풀이 — 엔진 판정 아래에 금빛 왼줄로 붙는 층 */
.ai-card-note {
  margin: 10px 0 4px;
  padding: 10px 12px 10px 14px;
  border-left: 2px solid rgba(217, 185, 106, 0.55);
  background: rgba(217, 185, 106, 0.06);
  border-radius: 0 8px 8px 0;
}
.ai-card-tag {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 2px;
  color: #d9b96a;
  margin-bottom: 6px;
}
.ai-card-note p {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  color: #e6dfd0;
}
/* AI 문장이 도착하는 순간 — 잉크가 스미듯 부드럽게 */
.ai-in {
  animation: ai-fade-in 0.7s ease both;
}
@keyframes ai-fade-in {
  from { opacity: 0.15; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
/* 집필 중 — 카드박스 하단의 작은 금색 맥동 */
.ai-writing {
  margin: 8px 0 2px;
  font-size: 12.5px;
  letter-spacing: 0.4px;
  color: rgba(217, 185, 106, 0.8);
  animation: ai-writing-pulse 1.6s ease-in-out infinite;
}
@keyframes ai-writing-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* ── AI 심층 풀이 v2 — 리더의 편지 ─────────────── */
.ai-reading {
  border: 1px solid rgba(217, 185, 106, 0.4);
  background:
    linear-gradient(180deg, rgba(217, 185, 106, 0.06), rgba(0, 0, 0, 0) 120px),
    rgba(16, 14, 26, 0.72);
  box-shadow: 0 0 0 1px rgba(217, 185, 106, 0.08), 0 18px 44px rgba(0, 0, 0, 0.35);
}
.ai-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.ai-head-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(217, 185, 106, 0.5));
}
.ai-head-line:last-child {
  background: linear-gradient(90deg, rgba(217, 185, 106, 0.5), transparent);
}
.ai-head-title {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 15px;
  letter-spacing: 4px;
  color: #e8c877;
  white-space: nowrap;
}
.ai-tickets-line {
  margin: 0 0 10px;
  text-align: center;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: rgba(217, 185, 106, 0.75);
}
.ai-body { padding: 2px 2px 0; }
.ai-body .ai-text {
  margin: 0;
  font-size: 15px;
  line-height: 2.05;
  color: #ece5d6;
  text-align: left;
  white-space: pre-wrap;
}
/* 문단 사이 — 여백 + 작은 금박 구분점 */
.ai-body .ai-text + .ai-text {
  margin-top: 26px;
  position: relative;
}
.ai-body .ai-text + .ai-text::before {
  content: "✦";
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  color: rgba(217, 185, 106, 0.55);
}
.ai-reading .ai-note {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid rgba(217, 185, 106, 0.14);
  text-align: center;
}
/* 카드별 AI 풀이 v2 — 카드 박스 안에서 조용히 빛나는 층 */
.ai-card-note {
  margin: 12px 0 4px;
  padding: 12px 14px;
  border: 1px solid rgba(217, 185, 106, 0.22);
  border-left: 2px solid rgba(217, 185, 106, 0.6);
  background: linear-gradient(135deg, rgba(217, 185, 106, 0.08), rgba(217, 185, 106, 0.02));
  border-radius: 0 10px 10px 0;
}
.ai-card-tag {
  font-family: "Noto Serif KR", Georgia, serif;
  letter-spacing: 3px;
}
.ai-card-note p { line-height: 1.95; }
@media (max-width: 560px) {
  .ai-head-title { font-size: 13px; letter-spacing: 3px; }
  .ai-body .ai-text { font-size: 14px; line-height: 1.95; }
}

/* 종합 섹션 컨트롤·근거 접힘 v3 */
.ai-cta {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(217, 185, 106, 0.14);
  display: grid;
  gap: 10px;
  justify-items: center;
}
.ai-cta .ai-gen-btn { width: min(100%, 340px); margin: 0; }
.ai-cta .ai-note { margin: 0; padding: 0; border: 0; }
.card-basis { margin-top: 12px; }
.card-basis summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 2px;
  color: rgba(217, 185, 106, 0.7);
}
.card-basis summary::-webkit-details-marker { display: none; }
.card-basis[open] summary { margin-bottom: 6px; }
.basis-sub { margin-top: 16px; }
.basis-sub + .basis-sub { border-top: 1px solid rgba(217, 185, 106, 0.12); padding-top: 14px; }

/* ── 로그인 박스 v2 — 금박 초대장 ─────────────── */
.ai-earn-login {
  position: relative;
  margin: 14px 0 4px;
  padding: 26px 20px 20px;
  border: 1px solid rgba(217, 185, 106, 0.45);
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(217, 185, 106, 0.13), rgba(217, 185, 106, 0.02) 55%),
    rgba(14, 12, 22, 0.6);
  box-shadow:
    inset 0 0 0 1px rgba(217, 185, 106, 0.08),
    0 14px 34px rgba(0, 0, 0, 0.35);
  display: grid;
  gap: 6px;
  justify-items: center;
  overflow: hidden;
}
.ai-earn-login::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(217, 185, 106, 0.16);
  border-radius: 10px;
  pointer-events: none;
}
/* 타로권 3장 부채 */
.login-fan {
  display: flex;
  justify-content: center;
  height: 46px;
  margin-bottom: 4px;
}
.login-ticket {
  width: 30px;
  height: 44px;
  margin: 0 -7px;
  border: 1px solid rgba(217, 185, 106, 0.65);
  border-radius: 5px;
  background: linear-gradient(160deg, #2b2445, #171226 70%);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #d9b96a;
}
.login-ticket.t1 { transform: rotate(-14deg) translateY(4px); }
.login-ticket.t2 { transform: translateY(-2px); z-index: 1; }
.login-ticket.t3 { transform: rotate(14deg) translateY(4px); }
.login-title {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 16px;
  letter-spacing: 1px;
  color: #f0e8d6;
  font-weight: 600;
}
.login-sub {
  font-size: 13.5px;
  color: #b9b2a2;
  margin-bottom: 10px;
}
.login-sub em {
  font-style: normal;
  color: #e8c877;
  font-weight: 700;
}
.login-privacy {
  margin: 8px 0 0;
  font-size: 12px;
  color: #7d7768;
  letter-spacing: 0.3px;
}
/* 구글 버튼 래퍼 — 금빛 헤일로 */
.google-btn-slot {
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(217, 185, 106, 0.35), 0 0 22px rgba(217, 185, 106, 0.12);
  transition: box-shadow 0.25s;
}
.google-btn-slot:hover {
  box-shadow: 0 0 0 1px rgba(217, 185, 106, 0.6), 0 0 28px rgba(217, 185, 106, 0.22);
}

/* ── 타로권 칩 + 로딩 무대 + 종합 타이포 v2 ─────── */
.ai-tickets-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.ai-user { color: rgba(217, 185, 106, 0.7); font-size: 12px; letter-spacing: 1px; }
.ticket-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 13px;
  border: 1px solid rgba(217, 185, 106, 0.5);
  border-radius: 999px;
  background: linear-gradient(160deg, rgba(217, 185, 106, 0.16), rgba(217, 185, 106, 0.04));
  color: #e8c877;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  font-weight: 600;
}
.ticket-chip i { font-style: normal; font-size: 10px; }

/* 로딩 무대 — 카드 세 장이 숨 쉬듯 떠오른다 */
.ai-stage { padding: 26px 0 18px; text-align: center; }
.ai-stage-cards {
  display: flex;
  justify-content: center;
  height: 74px;
  margin-bottom: 18px;
}
.stage-card {
  width: 46px;
  height: 68px;
  margin: 0 -9px;
  border: 1px solid rgba(217, 185, 106, 0.7);
  border-radius: 7px;
  background:
    radial-gradient(60% 45% at 50% 38%, rgba(217, 185, 106, 0.22), transparent 70%),
    linear-gradient(160deg, #2c2449, #151021 70%);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55), 0 0 18px rgba(217, 185, 106, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d9b96a;
  font-size: 14px;
}
.stage-card.c1 { animation: stage-sway 2.6s ease-in-out infinite; transform-origin: bottom center; }
.stage-card.c2 { animation: stage-lift 2.6s ease-in-out infinite 0.3s; z-index: 1; }
.stage-card.c3 { animation: stage-sway 2.6s ease-in-out infinite 0.6s reverse; transform-origin: bottom center; }
@keyframes stage-sway {
  0%, 100% { transform: rotate(-13deg) translateY(6px); }
  50% { transform: rotate(-9deg) translateY(-2px); }
}
@keyframes stage-lift {
  0%, 100% { transform: translateY(0); box-shadow: 0 8px 22px rgba(0,0,0,.55), 0 0 18px rgba(217,185,106,.12); }
  50% { transform: translateY(-9px); box-shadow: 0 16px 30px rgba(0,0,0,.6), 0 0 30px rgba(217,185,106,.3); }
}
/* 금빛이 흐르는 로딩 문구 */
.ai-stage-line {
  margin: 0 0 6px;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 15.5px;
  letter-spacing: 1px;
  background: linear-gradient(90deg, #8d8778 20%, #f4e3b2 50%, #8d8778 80%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 2.4s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }
.ai-stage-sub { margin: 0; font-size: 12px; color: #7d7768; letter-spacing: 0.5px; }

/* 종합 본문 — 신뢰감 있는 세리프, 넉넉한 호흡 */
.ai-body .ai-text {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 15.5px;
  line-height: 2.12;
  letter-spacing: 0.01em;
  color: #efe9db;
  word-break: keep-all;
}
.ai-body .ai-text:first-child::first-letter {
  font-size: 1.5em;
  color: #e8c877;
  line-height: 1;
}

/* 주제 카드가 버튼이 되며 필요한 리셋 + 선택 상태 */
button.cat-card {
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.cat-card.on {
  border-color: rgba(217, 185, 106, 0.75);
  background: rgba(217, 185, 106, 0.1);
}

/* 종합 섹션 전용 배경 — 젠스파크 생성(별자수 벨벳·촛불 모서리·빈 중앙) */
.ai-reading {
  background:
    linear-gradient(180deg, rgba(12, 10, 20, 0.82), rgba(12, 10, 20, 0.9)),
    url("/ui/ai-bg.webp") center / cover no-repeat,
    rgba(16, 14, 26, 0.9);
}

/* 카드 수 선택(정통 입구) */
.scope-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(92vw, 640px);
}
.scope-card {
  font: inherit;
  text-align: left;
  cursor: pointer;
  padding: 22px 20px;
  border: 1px solid rgba(217, 185, 106, 0.35);
  border-radius: 14px;
  background: rgba(20, 17, 32, 0.65);
  display: grid;
  gap: 6px;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
.scope-card:hover {
  border-color: rgba(217, 185, 106, 0.75);
  background: rgba(217, 185, 106, 0.08);
  transform: translateY(-2px);
}
.scope-name {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 19px;
  color: #efe3c2;
  letter-spacing: 1px;
}
.scope-deck { font-size: 12px; color: #d9b96a; letter-spacing: 0.5px; }
.scope-hint { font-size: 12.5px; color: #8d8778; line-height: 1.6; }
@media (max-width: 560px) {
  .scope-grid { grid-template-columns: 1fr; }
}

/* ⑦ 홈 히어로 — 더 크게, 금박 그라데이션 + 은은한 광휘 */
.hero-title {
  font-size: clamp(34px, 7vw, 58px);
  letter-spacing: clamp(6px, 1.6vw, 14px);
  background: linear-gradient(180deg, #f6e7bd 0%, #d9b96a 55%, #a8853f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 22px rgba(217, 185, 106, 0.28))
    drop-shadow(0 2px 2px rgba(0, 0, 0, 0.6));
}
.hero-sub {
  font-size: clamp(14px, 2.4vw, 17px);
  letter-spacing: clamp(2px, 0.6vw, 5px);
  color: #cfc4a8;
}

/* ⑧ 홈 히어로 대형판 — 살아 있는 금박 + 후광 + 등장 모션 (홈 전용) */
.home-hero {
  position: relative;
  width: 100%;
  text-align: center;
}
.home-hero::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -70px;
  width: min(720px, 96vw);
  height: 300px;
  transform: translateX(-50%);
  background: radial-gradient(
    ellipse at 50% 45%,
    rgba(217, 185, 106, 0.16),
    rgba(120, 90, 200, 0.07) 45%,
    transparent 70%
  );
  pointer-events: none;
}
.hero-eyebrow {
  position: relative;
  margin: 4px 0 0;
  font-size: clamp(12px, 1.8vw, 13px);
  letter-spacing: clamp(3px, 0.8vw, 6px);
  color: rgba(217, 185, 106, 0.75);
  animation: hero-rise 0.9s ease both;
}
.hero-eyebrow span {
  font-size: 9px;
  vertical-align: 2px;
  opacity: 0.8;
}
.hero-title-xl {
  position: relative;
  font-size: clamp(38px, 8.4vw, 74px);
  letter-spacing: clamp(7px, 2vw, 18px);
  /* 왼쪽으로 치우쳐 보이는 마지막 자간만큼 되밀기 */
  padding-left: clamp(7px, 2vw, 18px);
  margin: 14px 0 8px;
  background: linear-gradient(
    100deg,
    #a8853f 0%,
    #f6e7bd 22%,
    #d9b96a 45%,
    #fff3cf 58%,
    #d9b96a 72%,
    #a8853f 100%
  );
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 금박 위로 광택이 천천히 흐른다 — 정적 그라데이션과 살아있는 금의 차이 */
  animation: gold-sheen 8s linear infinite, hero-rise 1.1s ease both;
}
@keyframes gold-sheen {
  to {
    background-position: -220% 0;
  }
}
@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.home-hero .hero-sub {
  animation: hero-rise 1.3s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .hero-title-xl,
  .hero-eyebrow,
  .home-hero .hero-sub {
    animation: none;
  }
}

/* 카드 접힘 — 정·역 뜻 라벨 + 도감 링크 */
.basis-dir {
  display: inline-block;
  margin-right: 8px;
  padding: 1px 9px;
  border: 1px solid rgba(217, 185, 106, 0.45);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #d9b96a;
  font-weight: 600;
}
.basis-dir.rev { border-color: rgba(150, 140, 190, 0.5); color: #a99fd0; }
.basis-more {
  display: inline-block;
  margin-top: 8px;
  font-size: 12.5px;
  color: #d9b96a;
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 185, 106, 0.4);
}
.basis-more:hover { color: #f0dfae; }

/* 한 문장 요약 — 리딩의 낙인 */
.ai-oneliner {
  margin: 22px 0 4px;
  padding: 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-top: 1px solid rgba(217, 185, 106, 0.35);
  border-bottom: 1px solid rgba(217, 185, 106, 0.35);
  background:
    radial-gradient(60% 120% at 50% 50%, rgba(217, 185, 106, 0.1), transparent 75%);
}
.ai-oneliner p {
  margin: 0;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: clamp(17px, 3.4vw, 21px);
  line-height: 1.7;
  letter-spacing: 0.5px;
  text-align: center;
  word-break: keep-all;
  background: linear-gradient(180deg, #f6e7bd, #d9b96a 70%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 14px rgba(217, 185, 106, 0.25));
}
.ai-ol-orn { color: rgba(217, 185, 106, 0.6); font-size: 12px; flex: none; }

/* 잠금 목록 — .ai-cta(grid·center) 안에서 li 가 내용 폭으로 줄어
   라벨과 상태("곧 열려요")가 붙던 문제. 폭을 채우고 최소 간격을 강제한다. */
.ai-cta .ai-earn { width: 100%; }
.ai-earn li { gap: 14px; }
.ai-earn li b { flex: 1; }
.ai-earn li span { flex: none; white-space: nowrap; }

/* 모바일 정렬·넘침 보정 (2026-09-10 실기기 스크린샷) */
/* 고정 덱 1장 — 초소형에서 deck-row 가 2열 그리드가 되며 왼쪽에 갇히던 것 */
.deck-row > .deck-choice:only-child { grid-column: 1 / -1; }
/* placeholder 가 칸을 넘치면 말줄임 — 예시문이 긴 주제 대비 */
.wish-input::placeholder {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
@media (max-width: 430px) {
  .wish-input::placeholder { font-size: 15px; }
}

/* ── 우상단 프로필/타로권 칩 — 전 페이지 상시 ─────────────── */
.user-chip-wrap {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 80;
}
.user-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(217, 185, 106, 0.45);
  background: rgba(13, 11, 24, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: #e6dfd0;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.user-chip:hover {
  border-color: rgba(217, 185, 106, 0.85);
  box-shadow: 0 0 18px rgba(217, 185, 106, 0.18);
}
.uc-tickets {
  color: #d9b96a;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
.uc-tickets i {
  font-style: normal;
  font-size: 12px;
}
.uc-name {
  max-width: 84px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #cfc4a8;
}
.uc-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #14121f;
  background: linear-gradient(160deg, #f6e7bd, #d9b96a);
  flex: none;
}
.uc-avatar.big {
  width: 34px;
  height: 34px;
  font-size: 16px;
}
.uc-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  /* 구글 로그인 버튼(고정 270px)이 넘치지 않는 내폭 확보 */
  width: min(306px, calc(100vw - 28px));
  padding: 16px;
  border-radius: 14px;
  border: 1px solid rgba(217, 185, 106, 0.4);
  background: rgba(15, 12, 26, 0.96);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  animation: uc-pop 0.18s ease both;
}
@keyframes uc-pop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.uc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 13px;
  color: #cfc4a8;
}
.uc-account {
  justify-content: flex-start;
  margin-bottom: 12px;
}
.uc-account b {
  display: block;
  color: #f0e9d8;
  font-size: 14px;
}
.uc-account small {
  display: block;
  color: #8f87a8;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.uc-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}
.uc-stats.solo {
  grid-template-columns: 1fr;
}
.uc-stats > div {
  padding: 10px 8px;
  text-align: center;
  border-radius: 10px;
  border: 1px solid rgba(217, 185, 106, 0.22);
  background: rgba(217, 185, 106, 0.05);
}
.uc-stats b {
  display: block;
  font-size: 22px;
  color: #d9b96a;
  font-family: "Noto Serif KR", Georgia, serif;
}
.uc-stats span {
  font-size: 12px;
  color: #9c93b5;
  letter-spacing: 1px;
}
.uc-pay {
  padding: 9px 2px;
  border-top: 1px dashed rgba(217, 185, 106, 0.2);
}
.uc-soon {
  color: #8f87a8;
  font-size: 12px;
}
.uc-logout {
  width: 100%;
  margin-top: 10px;
  padding: 8px 0;
  border-radius: 9px;
  border: 1px solid rgba(150, 140, 190, 0.35);
  background: none;
  color: #a99fd0;
  font-size: 12.5px;
  cursor: pointer;
}
.uc-logout:hover {
  border-color: rgba(150, 140, 190, 0.7);
}
.uc-hint {
  margin: 0 0 10px;
  font-size: 13px;
  text-align: center;
  color: #cfc4a8;
}
.uc-hint em {
  font-style: normal;
  color: #d9b96a;
}
.uc-note {
  margin: 10px 0 0;
  font-size: 12px;
  color: #8f87a8;
  text-align: center;
}
@media (max-width: 560px) {
  .user-chip-wrap { top: 10px; right: 10px; }
  .user-chip { padding: 6px 11px; font-size: 12px; }
  .uc-name { max-width: 56px; }
}

/* ── 타로권 상점 ─────────────── */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  width: min(560px, 94vw);
  margin: 6px auto 0;
}
.shop-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 18px;
  border: 1px solid rgba(217, 185, 106, 0.35);
  border-radius: 14px;
  background: linear-gradient(170deg, rgba(24, 19, 44, 0.8), rgba(11, 8, 22, 0.86));
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}
.shop-card:hover {
  border-color: rgba(217, 185, 106, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
}
.shop-badge {
  position: absolute;
  top: -9px;
  right: 14px;
  padding: 2px 10px;
  border-radius: 999px;
  background: linear-gradient(160deg, #f6e7bd, #d9b96a);
  color: #14121f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
}
.shop-name { font-size: 16px; color: #f0e9d8; }
.shop-price {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 24px;
  color: #d9b96a;
}
.shop-desc { font-size: 12.5px; line-height: 1.6; color: #9c93b5; word-break: keep-all; }
.shop-perk { font-size: 12px; color: #d9b96a; }
.shop-checkout {
  width: min(480px, 94vw);
  margin: 0 auto;
  padding: 16px;
  border: 1px solid rgba(217, 185, 106, 0.35);
  border-radius: 14px;
  background: rgba(15, 12, 26, 0.9);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.shop-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  color: #f0e9d8;
}
.shop-summary span { color: #d9b96a; font-size: 18px; }
.shop-pay-btn { width: 100%; }
.shop-note { margin: 14px 0 0; text-align: center; font-size: 13.5px; color: #cfc4a8; }
.shop-note.dim { font-size: 12px; color: #8f87a8; }
.shop-login {
  width: min(360px, 94vw);
  margin: 0 auto;
  padding: 18px;
  border: 1px solid rgba(217, 185, 106, 0.35);
  border-radius: 14px;
  background: rgba(15, 12, 26, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 13.5px;
  color: #cfc4a8;
  text-align: center;
}
/* 결제창(팝업) 방식 체크아웃 — 화면은 끝까지 어두운 테마 */
.shop-checkout-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #9c93b5;
  word-break: keep-all;
}
.shop-paylist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 2px;
  padding: 0;
  list-style: none;
}
.shop-paylist li {
  padding: 4px 11px;
  border: 1px solid rgba(217, 185, 106, 0.25);
  border-radius: 999px;
  font-size: 12px;
  color: #cfc4a8;
}
.uc-pass {
  margin: 0 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(217, 185, 106, 0.4);
  border-radius: 9px;
  background: rgba(217, 185, 106, 0.08);
  font-size: 12px;
  color: #d9b96a;
  text-align: center;
}
.uc-shop-btn {
  display: block;
  margin-top: 2px;
  padding: 10px 0;
  border: 1px solid rgba(217, 185, 106, 0.5);
  border-radius: 9px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  color: #d9b96a;
  transition: background 0.18s;
}
.uc-shop-btn:hover { background: rgba(217, 185, 106, 0.1); }
.ai-earn-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  text-decoration: none;
}
.ai-earn-link b { color: #efe3c2; font-weight: 600; }
.ai-earn-link span { color: #d9b96a; font-size: 12px; }

/* ── 디스플레이 광고 슬롯 ─────────────── */
.ad-banner {
  width: min(720px, 94vw);
  margin: 26px auto 0;
}
.ad-banner-label {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(156, 147, 181, 0.55);
  text-align: center;
}

/* ── 광고 사전 안내 게이트 ─────────────── */
.adgate-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 4, 12, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: uc-pop 0.25s ease both;
}
.adgate {
  width: min(340px, 90vw);
  padding: 26px 22px 20px;
  border: 1px solid rgba(217, 185, 106, 0.5);
  border-radius: 18px;
  background: linear-gradient(170deg, rgba(26, 21, 46, 0.98), rgba(12, 9, 24, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(217, 185, 106, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.adgate-orn { color: #d9b96a; font-size: 18px; }
.adgate-title {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 19px;
  letter-spacing: 3px;
  color: #f0e9d8;
}
.adgate-body {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: #cfc4a8;
  word-break: keep-all;
}
.adgate-count {
  width: 52px;
  height: 52px;
  margin: 6px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(217, 185, 106, 0.5);
  border-radius: 50%;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 24px;
  color: #d9b96a;
  animation: ai-writing-pulse 1s ease-in-out infinite;
}
.adgate-buy { width: 100%; }
.adgate-note { margin: 0; font-size: 12px; color: #8f87a8; }
.adgate-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* 카카오 로그인 버튼 — 브랜드 옐로 (#FEE500) */
.kakao-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 270px;
  height: 40px;
  border: 0;
  border-radius: 999px;
  background: #fee500;
  color: #191919;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s;
}
.kakao-btn:hover { filter: brightness(0.96); }
.kakao-symbol { display: inline-flex; }

/* ── 사업자 표기 푸터 + 약관 페이지 ─────────────── */
.site-footer {
  width: 100%;
  margin-top: 40px;
  padding: 22px 16px 26px;
  border-top: 1px solid rgba(217, 185, 106, 0.14);
  text-align: center;
}
.sf-biz {
  margin: 2px 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(156, 147, 181, 0.75);
  word-break: keep-all;
}
.sf-biz a { color: rgba(207, 196, 168, 0.9); text-decoration: none; }
.sf-links { margin: 8px 0 0; font-size: 12px; }
.sf-links a {
  color: rgba(217, 185, 106, 0.75);
  text-decoration: none;
  border-bottom: 1px solid rgba(217, 185, 106, 0.3);
}
.terms-body {
  width: min(640px, 94vw);
  margin: 0 auto;
  text-align: left;
}
.terms-body h2 {
  margin: 26px 0 8px;
  font-size: 16px;
  letter-spacing: 1px;
  color: #d9b96a;
  font-family: "Noto Serif KR", Georgia, serif;
}
.terms-body p, .terms-body li {
  font-size: 13.5px;
  line-height: 1.85;
  color: #cfc4a8;
  word-break: keep-all;
}
.terms-body b { color: #f0e9d8; }
.terms-body ul { padding-left: 18px; margin: 6px 0; }

/* 선택 비교의 대조 문단 — 문단 사이에 숨 */
.compare-story .reading-para + .reading-para {
  margin-top: 10px;
}

/* ── 인라인 style 을 걷어낸 자리 (2026-09-18) ──────────────────
   여기까지는 리디자인 직전의 globals.css 그대로다. 마크업은 두 레이아웃이 같이 쓰므로,
   리디자인 때 걷어낸 인라인 style 과 새로 생긴 요소만 여기서 맞춘다. */
/* 배경 그림 — 예전에는 페이지마다 인라인 style 로 넣었다 */
.page-bg:not([style]) {
  background-image: url(/ui/home-bg.webp), radial-gradient(ellipse at 50% 0%, #2a2347 0%, #14121f 60%);
}
/* 하위 페이지 제목 — 예전 인라인 값(fontSize 25~27, letterSpacing 5~6) */
.hero-title.hero-title-sm {
  font-size: 26px;
  letter-spacing: 5px;
}
/* ── 관리자 레이아웃 전환 창 (키보드 "admin") ─────────────────
   두 테마 파일에 똑같이 들어 있다 — 어느 레이아웃에서든 같은 모습이어야 한다.
   그래서 토큰을 쓰지 않고 색을 직접 적는다. */
.admin-veil {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(5, 6, 14, 0.78);
}
.admin-box {
  width: min(100%, 380px);
  padding: 24px 20px 12px;
  border-radius: 12px;
  border: 1px solid #b8935a;
  background: #1a1e38;
  color: #f2eee3;
  text-align: left;
}
.admin-title {
  margin: 0 0 16px;
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  letter-spacing: 0;
  color: #f2eee3;
}
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.admin-label {
  font-size: 14px;
  color: #b9b5c9;
}
.admin-input {
  height: 52px;
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid #5e6499;
  background: #0b0d1a;
  color: #f2eee3;
  font: inherit;
  font-size: 18px;
  letter-spacing: 0.3em;
}
.admin-input:focus {
  outline: none;
  border-color: #d9b86a;
}
.admin-btn {
  width: 100%;
}
.admin-note {
  margin: 0 0 2px;
  font-size: 14px;
  line-height: 21px;
  color: #b9b5c9;
}
.admin-choice {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 64px;
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid #5e6499;
  background: #12152a;
  color: #f2eee3;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.admin-choice b {
  font-size: 16px;
  font-weight: 600;
}
.admin-choice span {
  font-size: 13px;
  color: #b9b5c9;
}
.admin-choice:hover:not(:disabled) {
  border-color: #d9b86a;
}
.admin-choice.on {
  border-color: #d9b86a;
  background: #242948;
  cursor: default;
}
.admin-msg {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 21px;
  color: #ff7a7a;
}
.admin-close {
  width: 100%;
  margin-top: 8px;
}

/* ═══════ 새 레이아웃 보강 (2026-09-19) ═══════════════════════════
   이 파일의 위쪽은 이전 레이아웃(classic.css)과 **같다**. 1차 리디자인은 표면·버튼·
   결과 화면까지 새로 입혔다가 "이전 디자인이 훨씬 낫다"는 평가를 받았다 — 그래서
   디자인은 이전 것을 그대로 두고, 기능 개선만 이전 디자인의 언어(보랏빛 패널 ·
   금선 · 알약 · 금장 플라크 버튼)로 여기에 덧붙인다. 고칠 때도 이 원칙을 지킬 것:
   모양을 바꾸는 규칙은 넣지 않는다. 근거는 docs/DESIGN-2026-09-18.md. */

/* 화면 끝까지 닿아야 하는 요소(하단 도크)가 이 값만큼 음수 마진으로 빠져나간다.
   .page 의 패딩(32/16/60, 560px 이하 18/10/48)과 같은 값이어야 한다. */
.page {
  --gutter: 16px;
  --page-bottom: 60px;
}
@media (max-width: 560px) {
  .page {
    --gutter: 10px;
    --page-bottom: 48px;
  }
}

/* ── 배경: 폰에는 세로로 그린 판 ──
   가로 그림을 세로 화면에 cover 로 맞추면 달과 조디악 휠이 잘려 나간다. */
@media (max-width: 640px) and (orientation: portrait) {
  .page-bg:not([style]) {
    background-image: url(/ui/home-bg-m.webp), radial-gradient(ellipse at 50% 0%, #2a2347 0%, #14121f 60%);
  }
}

/* ── 홈: '오늘의 카드' 1탭 배너 — 방식 카드(.mode-card)와 같은 생김새 ── */
.today-card {
  --card-bg: url(/ui/mode-today.webp);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: min(94vw, 860px);
  margin: 8px auto 0;
  padding: 22px 24px 20px;
  border-radius: 16px;
  border: 1px solid rgba(217, 185, 106, 0.55);
  background: linear-gradient(165deg, rgba(28, 22, 50, 0.9), rgba(11, 8, 22, 0.9));
  box-shadow: 0 0 40px rgba(217, 185, 106, 0.08);
  text-decoration: none;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}
.today-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--card-bg) right center / cover no-repeat;
  transition: transform 0.6s ease;
}
.today-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, rgba(12, 10, 22, 0.86) 0%, rgba(12, 10, 22, 0.66) 48%, rgba(12, 10, 22, 0.18) 100%);
}
.today-card:hover {
  border-color: rgba(217, 185, 106, 0.85);
  transform: translateY(-3px);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.5), 0 0 40px rgba(217, 185, 106, 0.12);
}
.today-card:hover::before {
  transform: scale(1.05);
}
.today-tag {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(217, 185, 106, 0.35);
  background: rgba(217, 185, 106, 0.1);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--gold);
}
.today-title {
  font-family: "Noto Serif KR", Georgia, serif;
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--ink);
}
.today-sub {
  margin-bottom: 6px;
  font-size: 13.5px;
  line-height: 1.8;
  color: #c8bfae;
  word-break: keep-all;
}
/* 넓은 화면의 배너는 가로로 길다(5:1) — cover 로 채우면 카드 그림의 위아래가 잘린다.
   높이에 맞춰 오른쪽에 붙이고, 그림의 왼쪽 가장자리는 마스크로 풀어 이음매를 없앤다. */
@media (min-width: 641px) {
  .today-card::before {
    left: auto;
    width: 56%;
    background-size: auto 150%;
    background-position: right -30px center;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
    mask-image: linear-gradient(90deg, transparent, #000 40%);
  }
  .today-card::after {
    background: linear-gradient(90deg, rgba(12, 10, 22, 0.5) 0%, rgba(12, 10, 22, 0) 70%);
  }
}
@media (max-width: 640px) {
  .today-card {
    padding: 18px 18px 16px;
  }
  .today-title {
    font-size: 19px;
  }
  .today-sub {
    font-size: 13px;
  }
}
.today-card + .mode-grid {
  margin-top: 16px;
}
.home-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 22px;
  margin-top: 26px;
  font-size: 13px;
  letter-spacing: 2px;
}
.home-foot a {
  position: relative;
  color: var(--dim);
  border-bottom: 1px solid rgba(184, 173, 151, 0.35);
  padding-bottom: 2px;
  transition: color 0.18s, border-color 0.18s;
}
.home-foot a:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ── 정통 입구: 카드 수 토글 — 주제 버튼(.topic-btn)과 같은 알약 ── */
.seg {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
}
.seg-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 150px;
  min-height: 48px;
  padding: 7px 22px;
  border-radius: 26px;
  border: 1px solid rgba(217, 185, 106, 0.35);
  background: rgba(20, 16, 34, 0.66);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 1px;
  transition: all 0.2s ease-out;
}
.seg-item small {
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--dim);
}
.seg-item:hover {
  background: rgba(217, 185, 106, 0.14);
  border-color: rgba(217, 185, 106, 0.7);
  color: var(--gold);
}
/* 선택된 쪽은 금장으로 — 색 + 굵기 + aria-pressed 로 함께 알린다 */
.seg-item.on {
  background: linear-gradient(160deg, #e8cc84, #c9a44f);
  border-color: #b8933f;
  color: #2e2205;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(217, 185, 106, 0.3);
}
.seg-item.on small {
  color: #4a3a12;
  font-weight: 400;
}

/* ── 질문: 펼치기 버튼을 화면 아래에 붙인다 ──
   덱 그림(이 화면의 얼굴)은 그대로 크게 두고, 버튼이 1.5화면 아래로 밀리던 것만 푼다.
   가드레일 안내도 같은 도크 안 — 버튼을 누른 자리에서 바로 보여야 한다. */
.cta-dock {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: calc(100% + 2 * var(--gutter));
  max-width: none !important;
  margin: 26px calc(-1 * var(--gutter)) calc(-1 * var(--page-bottom));
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(rgba(12, 10, 22, 0.78), rgba(12, 10, 22, 0.94));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(217, 185, 106, 0.22);
}
.cta-dock .gold-btn {
  order: 1;
  width: min(100%, 360px);
}
.cta-note {
  order: 2;
  font-size: 12px;
  line-height: 1.6;
  color: #8f8776;
  text-align: center;
  word-break: keep-all;
}
.cta-dock .guard-box {
  order: 0;
  width: min(100%, 560px);
  max-height: 46vh;
  margin: 0;
  overflow-y: auto;
}

/* ── 결과: 떠 있는 구역 내비 — 뒤로가기 알약과 같은 생김새 ──
   위쪽에 붙이면 우상단 프로필 칩과 겹친다. 결과 묶음의 맨 끝에 두고 화면 아래에 붙인다
   (엄지가 닿는 자리이기도 하다). 가로로 넘치면(켈틱 크로스 10장) 옆으로 민다. */
.result-nav {
  position: sticky;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 6;
  align-self: center;
  display: flex;
  gap: 2px;
  max-width: 100%;
  margin-top: 6px;
  padding: 4px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: 999px;
  border: 1px solid rgba(217, 185, 106, 0.32);
  background: rgba(12, 10, 22, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.55);
}
.result-nav::-webkit-scrollbar {
  display: none;
}
.result-nav-item {
  flex: 0 0 auto;
  min-width: 52px;
  height: 44px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: none;
  font-size: 12.5px;
  letter-spacing: 1.5px;
  white-space: nowrap;
  color: var(--dim);
  transition: color 0.18s, background 0.18s, border-color 0.18s;
}
.result-nav-item:hover {
  color: var(--gold);
}
.result-nav-item.on {
  background: rgba(217, 185, 106, 0.16);
  border-color: rgba(217, 185, 106, 0.55);
  color: #f0dba4;
  font-weight: 600;
}
.result-card,
.verdict-card,
.rs-anchor {
  scroll-margin-top: 16px;
}
.rs-anchor {
  display: block;
  height: 0;
  animation: none !important;
}

/* ── 접근성 최소선 — 모양은 그대로, 기준에 못 미치던 곳만 ──
   (실측 2026-09-19: 대비 4.5:1 미달은 아래 네 곳뿐이었다) */
.disclaimer {
  color: #8f8776; /* 3.9 → 5.0:1 */
}
.mode-meta {
  color: #9a917d; /* 4.0 → 5.3:1 */
}
.sf-biz {
  color: #9a93b8; /* 4.1 → 5.9:1 */
}
.cd-num {
  color: #a08c5a;
}
/* 아이폰은 16px 미만 입력칸에 초점이 가면 화면을 확대한다 */
@media (max-width: 560px) {
  .wish-input {
    font-size: 16px;
  }
}
/* 코너 버튼 44px — 알약 모양은 그대로 */
.back-link,
.shuffle-btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* 작은 글자 버튼들은 생김새를 두고 '눌리는 넓이'만 44px 로 넓힌다 */
.q-chip,
.foot-links a,
.sf-links a,
.sf-biz a,
.basis-more,
.deck-view-link {
  position: relative;
}
.q-chip::after,
.foot-links a::after,
.home-foot a::after,
.sf-links a::after,
.sf-biz a::after,
.basis-more::after,
.deck-view-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.adv-fold summary,
.card-basis summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px; /* flex 안에서는 ::after 의 " ▾" 앞 공백이 사라진다 */
}
.card-basis summary {
  justify-content: flex-start;
  gap: 8px;
}
/* 도감 카드 상세 — 왼쪽 위 뒤로가기(44px)와 카드 그림이 겹치지 않게 */
@media (max-width: 720px) {
  .cd-page {
    margin-top: 44px;
  }
}