/* ============================================================
   최애돌 포춘텔러 — 사주 케미 결과 화면 테마 (피그마 737:2757)
   * 이 파일만 지우면 원래 스타일로 돌아갑니다.
   ============================================================ */

/* 단조에는 ·  …  →  ×  ※  ° 같은 기호 글자가 "빈칸"으로 들어있습니다.
   그대로 두면 화면에 공백으로 보이므로, 한글/영문/숫자/기본문장부호만
   단조로 그리고 나머지 기호는 아래 Pretendard가 대신 그리도록 범위를 지정합니다. */
@font-face {
  font-family: "Danjo";
  src: url("./fonts/Danjo-bold.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+0020-005F, U+0061-007B, U+007D-007E, U+3001-3002, U+3008-3009,
    U+300C-300D, U+3130-318F, U+AC00-D7A3, U+FF01-FF60;
}

@font-face {
  font-family: "Pretendard";
  src: url("./fonts/Pretendard-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: block;
}

/* 단조(Danjo) — 제목·이름·점수·본문·버튼
   단조에 없는 글자(일본어, 희귀 한글)는 자동으로 Pretendard로 넘어갑니다. */
.fd {
  font-family: "Danjo", "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", sans-serif;
  font-weight: 400;
}

/* Pretendard Bold — 섹션 라벨 */
.fp {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", sans-serif;
  font-weight: 700;
}

/* 78점 — 그라데이션 글자 */
.score-grad {
  background: linear-gradient(90deg, #e6ab47 17.017%, #d57c49 186.04%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* 이미지 저장용 — 저장하는 순간에만 375px로 고정해서
   기기 화면 크기와 상관없이 항상 같은 크기의 공유 이미지를 만듭니다. */
.capture-fixed {
  width: 375px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}


/* ============================================================
   전통 문양 테두리
   · orn-frame : 카드 안쪽 얇은 선 — 카드가 길어지면 함께 늘어남
   · orn-c     : 네 모서리 문양 — 17x16 고정, 항상 모서리에 붙음
   ============================================================ */
.orn-frame {
  position: absolute;
  inset: 5px;
  border: 1px solid #e9ded2;
  pointer-events: none;
}
.orn-c {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
  background: url("./Icon/corner.svg?v=4") no-repeat center / contain;
}
.orn-tl { top: 5px; left: 5px; }
.orn-tr { top: 5px; right: 5px; transform: scaleX(-1); }
.orn-bl { bottom: 5px; left: 5px; transform: scaleY(-1); }
.orn-br { bottom: 5px; right: 5px; transform: scale(-1, -1); }

/* 대화 카드용 — 배경이 어두워서 문양/선을 흰색으로 반전 */
.orn-frame-w {
  position: absolute;
  inset: 5px;
  border: 1px solid #ffffff;
  pointer-events: none;
}
.orn-c-w { background-image: url("./Icon/corner-inv.svg?v=2"); }

/* 입력 화면 — 목록 스크롤 */
.pick-list {
  max-height: 240px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* 입력칸 placeholder 색 통일 */
.fd::placeholder { color: #b3a99c; opacity: 1; }

/* 다운로드 이미지에만 들어가는 최애돌 로고 (화면에서는 숨김) */
.share-logo { display: none; }
.capture-fixed .share-logo { display: block; }
.capture-fixed { padding: 20px 20px 28px !important; }

/* ============================================================
   일본어 — Yusei Magic (단일 굵기)
   앱에서 쓰는 글자만 담은 경량판. v9부터 두 파일로 나눔
   (글자가 많아져 한 번에 받으면 Google Fonts 주소 길이 제한에 걸림).
   브라우저가 unicode-range를 보고 두 파일을 한 글꼴처럼 합쳐 씀.
   v9 (2026-09-21): 타로 카드 22장 영·일 번역 반영 — Google Fonts Yusei Magic (OFL)
   ============================================================ */
/* v10a (셀럽, 2026-09-22) — 가나·일본어 기호·영문·숫자 (34KB) */
@font-face {
  font-family: "YuseiMagic";
  src: url("./fonts/YuseiMagic-subset-v10a.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+0020-024F, U+2018-201D, U+2026, U+3000-30FF, U+FF00-FFEF;
}
/* v10b (셀럽, 2026-09-22) — 한자 + 셀럽 이름 한자 (90KB) */
@font-face {
  font-family: "YuseiMagic";
  src: url("./fonts/YuseiMagic-subset-v10b.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+3400-4DBF, U+4E00-9FFF;
}

/* 일본어 줄바꿈 — 한국어용 keep-all(띄어쓰기에서만 줄바꿈)이 일본어에 걸리면
   띄어쓰기가 없어 「」·、에서만 끊겨 어색해짐. 일본어는 글자 단위 + 금칙 처리로 */
main[data-lang="ja"] [style*="keep-all"],
.ft-save-pop[data-lang="ja"] .fd {
  word-break: normal !important;
  line-break: strict;
}

/* 일본어 화면일 때만 앞세움 — 숫자·영문도 함께 통일됩니다 */
main[data-lang="ja"] .fd,
main[data-lang="ja"] .fp,
.ft-save-pop[data-lang="ja"] .fd {
  font-family: "YuseiMagic", "Danjo", "Pretendard", -apple-system,
    "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
  font-weight: 400;
}

/* ============================================================
   홈 화면 (사주 테스트_홈)
   ============================================================ */
@font-face { font-family:"Pretendard"; src:url("./fonts/Pretendard-Regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Pretendard"; src:url("./fonts/Pretendard-Medium.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Pretendard"; src:url("./fonts/Pretendard-SemiBold.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap; }

/* 홈 전용 — Pretendard 4종 (굵기는 요소별로 지정) */
.hp { font-family:"Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif; }

/* 밤하늘 배경 */
/* 모든 화면 공통 — 앱 칼럼 바깥(레터박스) 영역을 밤하늘로 */
html { background: linear-gradient(180deg,#000000 0%,#050505 38%,#141417 78%,#1B1B1F 100%) !important; }
body, #root { background: transparent !important; }
.night-sky { background: transparent; }
/* 밤하늘 별 — 시안 분포(약 270개/화면, 1~3px, 밝기 편차)를 반영해 생성 */
#root::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    radial-gradient(circle 0.6px at 81.68% 60.96%, rgba(255,255,255,0.98) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 8.85% 53.84%, rgba(255,255,255,0.97) 0 100%, transparent 0),
    radial-gradient(circle 1.0px at 45.72% 93.10%, rgba(255,255,255,1.00) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 19.75% 63.20%, rgba(255,255,255,0.59) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 10.72% 51.64%, rgba(255,255,255,0.69) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 37.79% 47.58%, rgba(255,255,255,0.41) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 76.63% 24.16%, rgba(255,255,255,0.45) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 3.32% 17.58%, rgba(255,255,255,0.48) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 68.27% 21.13%, rgba(255,255,255,0.49) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 5.50% 58.20%, rgba(255,255,255,0.61) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 57.45% 75.02%, rgba(255,255,255,0.71) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 45.05% 41.08%, rgba(255,255,255,0.46) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 65.26% 29.93%, rgba(255,255,255,0.94) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 61.05% 52.12%, rgba(255,255,255,1.00) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 31.30% 78.07%, rgba(255,255,255,0.64) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 0.07% 57.87%, rgba(255,255,255,0.74) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 69.41% 75.20%, rgba(255,255,255,0.62) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 35.42% 3.49%, rgba(255,255,255,0.46) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 52.36% 98.25%, rgba(255,255,255,0.84) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 19.36% 66.36%, rgba(255,255,255,0.77) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 47.70% 49.30%, rgba(255,255,255,0.72) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 39.31% 47.00%, rgba(255,255,255,1.00) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 36.79% 31.59%, rgba(255,255,255,0.36) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 35.58% 20.91%, rgba(255,255,255,0.67) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 46.62% 94.32%, rgba(255,255,255,0.67) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 22.06% 77.84%, rgba(255,255,255,0.80) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 56.25% 80.32%, rgba(255,255,255,0.76) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 36.67% 50.88%, rgba(255,255,255,0.77) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 40.73% 97.20%, rgba(255,255,255,0.76) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 15.80% 93.13%, rgba(255,255,255,0.89) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 97.67% 69.49%, rgba(255,255,255,0.58) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 12.79% 98.23%, rgba(255,255,255,0.59) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 17.14% 75.09%, rgba(255,255,255,0.26) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 56.29% 28.26%, rgba(255,255,255,0.98) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 96.41% 51.61%, rgba(255,255,255,0.57) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 32.20% 41.09%, rgba(255,255,255,0.78) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 89.72% 58.78%, rgba(255,255,255,0.94) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 29.96% 66.60%, rgba(255,255,255,0.79) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 22.07% 17.76%, rgba(255,255,255,0.28) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 67.06% 98.84%, rgba(255,255,255,0.47) 0 100%, transparent 0),
    radial-gradient(circle 1.0px at 53.72% 4.74%, rgba(255,255,255,0.55) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 93.76% 59.62%, rgba(255,255,255,0.72) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 79.70% 97.85%, rgba(255,255,255,0.34) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 58.66% 57.97%, rgba(255,255,255,0.45) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 35.96% 93.09%, rgba(255,255,255,0.20) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 66.04% 81.67%, rgba(255,255,255,0.38) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 25.37% 87.77%, rgba(255,255,255,0.57) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 73.13% 78.45%, rgba(255,255,255,0.72) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 52.67% 96.96%, rgba(255,255,255,0.27) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 25.06% 67.70%, rgba(255,255,255,0.76) 0 100%, transparent 0),
    radial-gradient(circle 1.0px at 83.47% 55.88%, rgba(255,255,255,0.34) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 94.34% 38.43%, rgba(255,255,255,0.64) 0 100%, transparent 0),
    radial-gradient(circle 1.0px at 60.02% 42.16%, rgba(255,255,255,0.48) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 48.10% 80.05%, rgba(255,255,255,0.30) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 39.49% 62.75%, rgba(255,255,255,0.72) 0 100%, transparent 0),
    radial-gradient(circle 1.0px at 36.34% 42.97%, rgba(255,255,255,0.39) 0 100%, transparent 0),
    radial-gradient(circle 1.0px at 22.58% 75.33%, rgba(255,255,255,0.94) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 38.16% 30.17%, rgba(255,255,255,0.72) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 58.73% 12.68%, rgba(255,255,255,0.57) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 7.90% 60.78%, rgba(255,255,255,0.43) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 14.37% 57.58%, rgba(255,255,255,0.70) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 8.47% 80.59%, rgba(255,255,255,0.65) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 84.46% 40.36%, rgba(255,255,255,0.30) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 12.00% 86.46%, rgba(255,255,255,0.33) 0 100%, transparent 0),
    radial-gradient(circle 1.0px at 9.06% 21.67%, rgba(255,255,255,0.50) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 55.66% 86.86%, rgba(255,255,255,0.49) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 48.62% 90.86%, rgba(255,255,255,0.39) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 59.45% 97.25%, rgba(255,255,255,0.56) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 52.30% 64.97%, rgba(255,255,255,1.00) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 86.48% 4.49%, rgba(255,255,255,0.45) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 84.21% 54.26%, rgba(255,255,255,0.87) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 12.71% 78.76%, rgba(255,255,255,0.32) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 77.30% 9.95%, rgba(255,255,255,0.69) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 65.37% 93.66%, rgba(255,255,255,1.00) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 1.00% 51.72%, rgba(255,255,255,0.85) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 93.07% 32.20%, rgba(255,255,255,0.58) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 77.53% 64.73%, rgba(255,255,255,0.64) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 15.95% 60.01%, rgba(255,255,255,0.80) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 50.56% 51.94%, rgba(255,255,255,0.30) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 68.43% 89.09%, rgba(255,255,255,0.41) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 79.79% 45.40%, rgba(255,255,255,0.54) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 33.22% 40.56%, rgba(255,255,255,0.60) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 98.18% 92.34%, rgba(255,255,255,1.00) 0 100%, transparent 0),
    radial-gradient(circle 1.0px at 26.84% 14.54%, rgba(255,255,255,0.23) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 72.24% 61.73%, rgba(255,255,255,0.81) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 31.65% 71.75%, rgba(255,255,255,0.39) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 55.66% 59.77%, rgba(255,255,255,0.18) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 45.52% 64.06%, rgba(255,255,255,0.27) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 51.39% 54.07%, rgba(255,255,255,0.43) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 91.16% 55.70%, rgba(255,255,255,1.00) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 1.45% 41.93%, rgba(255,255,255,0.42) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 91.06% 2.39%, rgba(255,255,255,0.18) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 40.32% 58.14%, rgba(255,255,255,0.33) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 26.01% 92.51%, rgba(255,255,255,1.00) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 15.59% 32.47%, rgba(255,255,255,0.37) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 2.03% 91.14%, rgba(255,255,255,0.78) 0 100%, transparent 0),
    radial-gradient(circle 1.5px at 35.52% 14.49%, rgba(255,255,255,0.61) 0 100%, transparent 0),
    radial-gradient(circle 1.0px at 51.59% 68.43%, rgba(255,255,255,0.80) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 47.05% 96.80%, rgba(255,255,255,0.38) 0 100%, transparent 0),
    radial-gradient(circle 0.9px at 44.25% 85.99%, rgba(255,255,255,0.73) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 88.30% 94.45%, rgba(255,255,255,0.63) 0 100%, transparent 0),
    radial-gradient(circle 1.1px at 93.93% 97.61%, rgba(255,255,255,0.74) 0 100%, transparent 0),
    radial-gradient(circle 1.0px at 22.87% 88.22%, rgba(255,255,255,0.87) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 93.72% 76.85%, rgba(255,255,255,0.19) 0 100%, transparent 0),
    radial-gradient(circle 0.8px at 72.20% 31.26%, rgba(255,255,255,0.83) 0 100%, transparent 0),
    radial-gradient(circle 0.6px at 48.75% 3.65%, rgba(255,255,255,0.44) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 10.80% 28.19%, rgba(255,255,255,0.22) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 89.67% 89.66%, rgba(255,255,255,0.85) 0 100%, transparent 0),
    radial-gradient(circle 1.3px at 99.87% 61.02%, rgba(255,255,255,0.41) 0 100%, transparent 0),
    radial-gradient(circle 0.7px at 69.38% 80.42%, rgba(255,255,255,0.85) 0 100%, transparent 0);
}

/* 언어 드롭다운 목록 */
.lang-menu { position:absolute; right:0; top:34px; min-width:88px; background:#1a1a1a;
  border:1px solid #4d4d4d; border-radius:10px; overflow:hidden; z-index:30; }
.lang-menu button { display:block; width:100%; text-align:left; padding:9px 14px;
  font-size:12px; color:#fff; background:transparent; }
.lang-menu button[aria-current="true"] { background:rgba(255,255,255,.10); }

/* 랭킹 배너 — 아래로 갈수록 가려지는 페이드 */
.rank-fade { position:absolute; left:-1px; right:-1px; top:-0.21px; height:51px; pointer-events:none;
  background: linear-gradient(180deg, rgba(26,26,26,0.50) 0%, #1a1a1a 68%); }

/* 언어 드롭다운 — 바깥 아무 곳이나 누르면 닫히도록 */
.lang-backdrop { position:fixed; inset:0; z-index:25; background:transparent; }

/* 타이틀 카피 — 강조어(운명적/destined/運命) 위 장식점 3개. 글자에 붙어 다니므로 언어·기기와 무관하게 정위치 */
.hm-em { position: relative; }
.hm-dots { position: absolute; left: 50%; top: -3px; transform: translateX(-50%);
  display: flex; gap: 9px; width: max-content; flex: none; line-height: 0; pointer-events: none; }
.hm-dots img { display: block; width: 2px; height: 2px; }

/* 랭킹 제목 — 강조 문구에 붙는 형광펜 밑줄 (언어·기기 무관하게 문구 폭에 정확히 일치) */
.hm-hl { position: relative; }
.hm-hl::before { content: ""; position: absolute; left: 0; right: 0; bottom: -0.79px;
  height: 5px; background: rgba(160,89,201,0.3); border-radius: 99px; z-index: -1; pointer-events: none; }

/* 결과지 — 최애돌 앱 버튼 위 말풍선. 아래쪽 꼬리 + 위아래로 둥둥 떠다니는 모션 */
.tip-float { position: relative; display: inline-flex; align-items: center; justify-content: center;
  animation: tipFloat 2.4s ease-in-out infinite; will-change: transform; }
.tip-float::after { content: ""; position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, -6.5px); pointer-events: none;
  width: 19.88px; height: 13.82px;
  background-color: var(--tip-tail, #33241F);
  -webkit-mask: url("./Icon/tip-tail.svg") no-repeat center / 100% 100%;
          mask: url("./Icon/tip-tail.svg") no-repeat center / 100% 100%; }
@keyframes tipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}
/* 기기에서 '동작 줄이기'를 켠 사용자에게는 모션을 끕니다 */
@media (prefers-reduced-motion: reduce) { .tip-float { animation: none; } }

/* ============================================================
   별자리 테스트 결과 화면
   ============================================================ */
.zod-page { background: #020414; }

/* 밤하늘 배경 — 스크롤해도 고정 */
.zod-sky {
  position: fixed; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; pointer-events: none; z-index: 0;
  background-color: #020414;
  background-image: url("./zodiac/bg-sky.jpg?v=3");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
}

/* 상단바 */
.zod-top {
  height: 56px; background: #010101;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
}

/* 유리 카드 */
.zod-card {
  position: relative;
  background-color: rgba(215,213,255,0.07);
  border: 2px solid rgba(215,213,255,0.5);
  border-radius: 4px;
  box-shadow: 0 12px 24px 0 rgba(0,0,0,0.25);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
/* 카드 안쪽 이중선 */
.zod-card::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none;
  border: 1px solid rgba(215,213,255,0.15); border-radius: 2px;
}

/* 별 아이콘 (22px 자리 + 글로우가 밖으로 삐져나옴) */
.zod-star { position: relative; display: block; width: 22px; height: 22px; flex: none; }
/* 전역 img{max-width:100%} 때문에 별의 가로만 잘려 찌그러지던 문제 */
.zod-star { --zglow: rgba(255,244,218,0.8); }
.zod-star-d { --zglow: #454A93; }
/* 글로우를 SVG 필터가 아닌 CSS로 — SVG가 저해상도로 구워지지 않아 선명해짐 */
.zod-star img { max-width: none !important;
  filter: drop-shadow(0 0 4.63px var(--zglow)); }
/* 사자자리 ↔ 쌍둥이자리 사이 별만 회전 */
.zod-spin { animation: zodSpin 12s linear infinite; will-change: transform; }
@keyframes zodSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .zod-spin { animation: none; } }
/* 이미지로 저장하는 순간에는 기울지 않도록 정지 */
.capture-fixed .zod-spin, .capture-fixed .zod-spin * { animation: none !important; transform: none !important; }

/* 점수 (그라데이션 글자) */
.zod-score {
  background-image: linear-gradient(109.907deg, #A8AFEA 4.9228%, #DFE4FF 98.77%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* 별자리 원형 (120px) */
.zod-circle {
  position: relative; width: 120px; height: 120px; flex: none;
  border: 1.5px solid transparent; border-radius: 88px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding-bottom: 16px;
}
.zod-circle-bg { position: absolute; inset: -1.5px; border-radius: 88px; overflow: hidden; pointer-events: none; }
.zod-circle-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.zod-circle-shade { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 50%, #000 85%); }

/* 지표 박스 3개 */
.zod-stat {
  position: relative; flex: 1 0 0; min-width: 0;
  background: rgba(215,213,255,0.05);
  border: 1px solid transparent;
  border-radius: 2px; padding: 8px;
  display: flex; flex-direction: column; align-items: flex-start;
}

/* 카드 안 구분선 */
.zod-hr { width: 280px; max-width: 100%; height: 2px; flex: none;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%); }
.zod-hr-full { width: 100%; }

/* 리포트 안쪽 박스 */
.zod-inner {
  position: relative;
  background: rgba(215,213,255,0.05);
  border: 1px solid transparent;
  border-radius: 4px; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start;
}

/* 섹션 구분선 (선 — 별 — 선) */
.zod-line { flex: 1 0 0; min-width: 0; height: 2px;
  background: linear-gradient(90deg, rgba(255,244,218,0) 0%, rgba(255,244,218,0.2) 50%, rgba(255,244,218,0) 100%); }

/* 흰 말풍선 (꼬리도 흰색) */
.zod-tip { --tip-tail: #FFFFFF; }

/* 저장 이미지 배경 */
/* 피그마 1814:37251 — #020414 위에 밤하늘 그림을 원래 비율로 위에서부터 (어둡게 덮는 막 없음) */
.zod-cap.capture-fixed { background: #020414 !important; }   /* 밤하늘 그림은 아래 .cap-bg 이미지로 깔림 */

/* ------------------------------------------------------------
   그라디언트 외곽선 (지표 박스 / 리포트 안쪽 박스 / 별자리 원형)
   피그마 실측: #D7D5FF 위 13% → 아래 8% 세로 그라디언트
   ------------------------------------------------------------ */
.zod-stat::after, .zod-inner::after, .zod-circle::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none; background: transparent;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
/* 절대배치 기준이 패딩박스여서 테두리 두께만큼 안쪽에 그려지던 문제 → 음수 inset으로 바깥선에 맞춤 */
.zod-stat::after, .zod-inner::after { inset: -1px; padding: 1px; }
.zod-circle::after { inset: -1.5px; padding: 1.5px; }
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .zod-stat::after, .zod-inner::after, .zod-circle::after {
    background: linear-gradient(180deg, rgba(215,213,255,0.13) 0%, rgba(215,213,255,0.08) 100%);
  }
}

/* 카드 네 모서리 별 (16px 자리, 안쪽 10px) — '다른 테스트' 카드는 제외 */
.zod-card:not(.zod-card-plain) {
  background-image:
    url("./zodiac/corner-star.svg"), url("./zodiac/corner-star.svg"),
    url("./zodiac/corner-star.svg"), url("./zodiac/corner-star.svg");
  background-repeat: no-repeat;
  background-origin: border-box;
  background-size: 14.3728px 14.3728px;
  background-position:
    left 10.81px top 10.81px,    right 10.81px top 10.81px,
    left 10.81px bottom 10.81px, right 10.81px bottom 10.81px;
}

/* ============================================================
   별자리 입력 / 로딩 화면
   ============================================================ */
/* 메인 이미지 (안쪽 이중선 포함) */
.zod-hero {
  position: relative; height: 188.54px;
  border: 2px solid rgba(215,213,255,0.5); border-radius: 4px; overflow: hidden;
  box-shadow: 0 12px 24px 0 rgba(0,0,0,0.25);
}
.zod-hero::before {
  content: ""; position: absolute; inset: 5px; z-index: 1; pointer-events: none;
  border: 1px solid rgba(215,213,255,0.15); border-radius: 2px;
}

/* 입력 칸 */
.zod-field {
  position: relative;
  background: rgba(215,213,255,0.07);
  border: 1px solid transparent; border-radius: 2px;
  padding: 12px;
}
.zod-field::after {
  content: ""; position: absolute; inset: -1px; border-radius: inherit;
  pointer-events: none; padding: 1px; background: transparent;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
}
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  .zod-field::after {
    background: linear-gradient(180deg, rgba(215,213,255,0.13) 0%, rgba(215,213,255,0.08) 100%);
  }
}
.zod-input {
  width: 100%; background: transparent; border: 0; outline: none; color: #fff;
  font-size: 14px; line-height: 1.5; letter-spacing: -0.28px; padding: 0;
}
.zod-input::placeholder { color: rgba(255,255,255,0.5); }

/* 콤보박스 드롭다운 */
.zod-backdrop { position: fixed; inset: 0; z-index: 40; background: transparent; }
.zod-menu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 50;
  max-height: 240px; overflow-y: auto; overscroll-behavior: contain;
  background: #131233; border: 1px solid rgba(215,213,255,0.35);
  border-radius: 4px; box-shadow: 0 12px 24px 0 rgba(0,0,0,0.5);
}
.zod-menu > button {
  display: block; width: 100%; text-align: left; padding: 10px 12px;
  font-size: 14px; line-height: 1.5; color: #fff; background: transparent;
}
.zod-menu > button[aria-current="true"] { background: rgba(215,213,255,0.14); }
.zod-menu-bias { max-height: 300px; }
.zod-menu-search { position: sticky; top: 0; background: #131233; padding: 10px 12px;
  border-bottom: 1px solid rgba(215,213,255,0.2); }
.zod-opt { display: flex !important; align-items: baseline; gap: 6px; }
.zod-opt-name { font-size: 14px; color: #fff; }
.zod-opt-grp { font-size: 11px; color: rgba(255,255,255,0.6); }
.zod-menu-empty { padding: 16px 12px; text-align: center;
  font-size: 13px; color: rgba(255,255,255,0.6); }

/* 로딩 채팅 말풍선 */
.zod-bub {
  max-width: 240px; border-radius: 99px; padding: 8px 20px 10px;
  font-size: 14px; line-height: 1.5; letter-spacing: -0.28px; color: #11042C;
  word-break: keep-all;
}
.zod-bub-a { background: #B4B2FF; filter: drop-shadow(0 0 4px rgba(180,178,255,0.3)); }
.zod-bub-b { background: #FFF4DA; filter: drop-shadow(0 0 4px rgba(255,244,218,0.3)); }
.zod-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(17,4,44,0.45);
  display: inline-block; animation: zodDot 1s ease-in-out infinite; }
@keyframes zodDot { 0%,60%,100% { opacity:.35; transform: translateY(0); }
                    30% { opacity:1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .zod-dot { animation: none; } }

/* 콤보박스가 열린 카드를 위로 올려 아래 카드에 가리지 않게 */
.zod-card:has(.zod-menu) { z-index: 60; }

/* ============================================================
   타로 결과 화면 (피그마 1603:33678) — 라이트 톤 카드 리디자인
   * 이 섹션만 지우면 타로 "결과" 화면이 리디자인 이전(어두운 톤)으로 돌아갑니다.
   * 타로 입력/셔플 화면, 사주/별자리/홈 화면은 이 섹션과 무관합니다.
   ============================================================ */

/* 상단 하늘색+구름 배경 — 타로 결과 화면 전용, main 안에서만 absolute */
/* 피그마 v2 레이어 그대로: #B5CBDB 위 구름(56~758px) → 56px부터 814px까지 #B5CBDB로 서서히 덮임 → 전체에 흰색 20%
   (814px 아래는 main 배경 #CBDBE6 = #B5CBDB + 흰색 30% 와 같은 색이라 이음새 없음 · 피그마 v3에서 20%→30%) */
.tarot-sky {
  position: absolute; left: 0; right: 0; top: 0; height: 814px; pointer-events: none; z-index: 0;
  background:
    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)),
    linear-gradient(180deg, rgba(181,203,219,0) 55.9px, #B5CBDB 813.6px),
    url("./tarot/sky-cloud.jpg") 0 56.1px / 100% 701.8px no-repeat,
    #B5CBDB;
}

/* 흰 배경 카드 프레임 공통 — 두꺼운 회청색 테두리 + 오프셋 드롭섀도우 */
.tarot-card {
  position: relative;
  background: #fff;
  border: 2px solid #889dad;
  box-shadow: 6px 6px 0 rgba(136,157,173,0.6);
}

/* 카드 안쪽 얇은 이중 테두리 + 금색 코너 장식 (기존 orn-c 문양 재사용) */
.tarot-card-inner { position: absolute; inset: 4px; border: 1.5px solid #e7d2ac; border-radius: 2px; pointer-events: none; }
/* 모서리 별꽃 — 피그마 실측: 바깥선에서 별 중심까지 20.5px (4귀퉁이 동일 모양) */
.tarot-corner { position: absolute; width: 20.29px; height: 20.29px; pointer-events: none;
  background: url("./tarot/corner-spark.svg") no-repeat center / 100% 100%; }
.tarot-corner-tl { left: 8.36px; top: 8.36px; }
.tarot-corner-tr { right: 8.36px; top: 8.36px; }
.tarot-corner-bl { left: 8.36px; bottom: 8.36px; }
.tarot-corner-br { right: 8.36px; bottom: 8.36px; }

/* 핵심 카드 위/타로덱 리포트 위 — 금색 플라워 장식 (피그마 Group 아이콘) */
.tarot-flourish { width: 30px; height: 30px; display: block; }

/* 선택한 카드 칩 로우 */
.tarot-chip-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; }
.tarot-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff7e9; border: 1px solid rgba(231,210,172,0.6); border-radius: 99px;
  padding: 2px 10px 4px; white-space: nowrap;
  font-size: 11px; letter-spacing: -0.22px; line-height: 1.5;
}
.tarot-chip-n { color: #cfa559; }
.tarot-chip-name { color: #665435; }

/* 점수 — 그라데이션 텍스트 */
.tarot-score-grad {
  background: linear-gradient(-69.79deg, rgb(172, 41, 21) 11.317%, rgb(252, 218, 149) 250.54%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}

/* 구분선 (질문/조언 카드 안) */
.tarot-hr { width: 280px; max-width: 100%; height: 1px; background: rgba(231,210,172,0.5); flex: none; }

/* 타로 덱 리포트 — 카드 1개 행 */
.tarot-report-row { display: flex; align-items: flex-start; gap: 12px; background: #fff7e9;
  border: 1px solid #e7d2ac; border-radius: 2px; padding: 16px 12px; width: 100%; }
.tarot-report-thumb { width: 58px; flex-shrink: 0; align-self: stretch; display: flex; align-items: center; }
.tarot-report-badge { background: rgba(231,210,172,0.5); border: 1px solid rgba(231,210,172,0.3);
  border-radius: 99px; padding: 0 5px 1.5px; line-height: 1.5; font-size: 9px; letter-spacing: -0.18px; color: #665435; white-space: nowrap; }

/* 상세내용 접기 버튼 */
.tarot-fold-btn { background: #3a5a8a; color: #fff; border-radius: 99px; padding: 12px 24px 14px;
  font-size: 14px; text-align: center; letter-spacing: -0.28px; width: fit-content; }

/* 공유 원형 아이콘 버튼 (다운로드 / X / 링크) */
.tarot-circle-btn {
  width: 48px; height: 48px; padding: 0; border-radius: 99px; background: #3a5a8a; color: #fff;
  position: relative; overflow: hidden; display: block;
}

/* 하단 파란 pill 버튼 (앱 유도 / 다시보기) */
.tarot-pill-btn {
  width: 100%; display: flex; align-items: center; justify-content: center;
  background: #3a5a8a; color: #fff; border-radius: 99px; padding: 14px 10px 16px;
  font-size: 16px; letter-spacing: -0.32px; line-height: 1.5;
}

/* 점선+별 구분선 (기존 zod-line/zod-star 톤을 라이트 버전으로) */
/* 장식 구분선 — 점·실선·점·초승달·별꽃·초승달·점·실선·점 (카드 안 금색 / 카드 밖 흰색) */
.tarot-divider { width: 100%; display: flex; align-items: center; gap: 4px; }
.tarot-divider-line { flex: 1 0 0; min-width: 1px; height: 1px; background: #E7D2AC; }
.tarot-divider-dot { width: 4px; height: 4px; border-radius: 50%; background: #E7D2AC; flex: none; }
.tarot-divider-w .tarot-divider-line, .tarot-divider-w .tarot-divider-dot { background: #F3F4EE; }
.tarot-divider-moon { width: 6.25px; height: 10px; flex: none; display: block; max-width: none !important; }
.tarot-divider-moon-l { transform: scaleX(-1); }
.tarot-divider-spark { width: 28px; height: 28px; flex: none; display: block; max-width: none !important; }

/* 카드 이미지 — 예전 타로 카드 부품의 둥근 모서리·테두리·보라 그림자 제거 (피그마: 네모, 효과 없음) */
.tarot-flat > div, .tarot-report-thumb > div {
  border-width: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; background: transparent !important; }
.tarot-report-thumb img { object-fit: contain !important; }

/* ============================================================
   타로 입력 / 카드 고르기 / 결과 로딩 (피그마 1810:36705 · 1807:36186 · 1810:36600)
   ============================================================ */
/* 배경: 결과 화면과 같은 구름 그림을 원래 비율로, 헤더 밑부터 → #B5CBDB로 서서히 덮임 → 흰색 30% */
.tarot-sky-in { height: 810px; background:
    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)),
    linear-gradient(180deg, rgba(181,203,219,0) 0px, #B5CBDB 809.6px),
    url("./tarot/sky-cloud.jpg") 0 53.8px / 100% auto no-repeat,
    #B5CBDB; }
.tarot-sky-pk { height: 715px; background:
    linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)),
    linear-gradient(180deg, rgba(181,203,219,0) 58px, #B5CBDB 711px),
    url("./tarot/sky-cloud.jpg") 0 55.8px / 100% auto no-repeat,
    #B5CBDB; }

.tarot-hero { position: relative; height: 188.54px; border: 2px solid #889dad; background: #fff;
  box-shadow: 6px 6px 0 rgba(136,157,173,0.6); overflow: hidden; }
.tarot-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; display: block; }

.tarot-textarea { display: block; width: 100%; height: 100px; resize: none; margin: 0;
  background: rgba(255,247,233,0.8); border: 1px solid #e7d2ac; border-radius: 2px; padding: 12px;
  font-size: 14px; line-height: 1.5; letter-spacing: -0.28px; color: #262e34; outline: none; }
.tarot-textarea::placeholder { color: rgba(102,84,53,0.7); opacity: 1; }
.tarot-textarea:focus { border-color: #cfa559; }

/* 스프레드 선택 버튼 */
.tarot-spread { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px;
  background: #fff7e9; border: 1px solid rgba(231,210,172,0.8); border-radius: 2px; cursor: pointer;
  transition: background-color .15s, border-color .15s; }
.tarot-spread.on { background: rgba(231,210,172,0.8); border-color: #cfa559; }
.tarot-spread-ic { display: flex; flex-direction: column; align-items: center; gap: 1.433px; opacity: .6; }
.tarot-spread.on .tarot-spread-ic { opacity: 1; }
.tarot-spread-row { display: flex; gap: 1.433px; }
.tarot-spread-row img { width: 15px; height: 20px; border-radius: .495px; object-fit: cover; display: block; max-width: none; }
.tarot-spread-name { font-size: 14px; line-height: 1.5; letter-spacing: -0.28px; color: rgba(38,46,52,0.7); white-space: nowrap; }
.tarot-spread-desc { font-size: 12px; line-height: 1.5; letter-spacing: -0.24px; color: rgba(102,84,53,0.7); text-align: center; }
.tarot-spread.on .tarot-spread-name { color: #262e34; }
.tarot-spread.on .tarot-spread-desc { color: #665435; }

/* 파란 메인 버튼 (타로 풀이 시작 / 다 골랐어) */
.tarot-cta { width: 100%; display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer;
  background: #255193; color: #fff; border-radius: 99px; padding: 14px 10px 16px;
  font-size: 16px; line-height: 1.5; letter-spacing: -0.32px; }

/* 카드 고르기 */
.tarot-progress { position: relative; width: 100%; height: 4px; border-radius: 99px; background: rgba(136,157,173,0.5); overflow: hidden; }
.tarot-progress > span { position: absolute; left: 0; top: 0; height: 4px; border-radius: 99px; background: #255193; transition: width .3s ease; }
.tarot-pick-grid { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tarot-pick { position: relative; aspect-ratio: 600 / 800; padding: 0; border: 0; border-radius: 3px; overflow: hidden;
  background: transparent; cursor: pointer; box-shadow: 0 2px 2px rgba(161,188,209,0.7); }
.tarot-pick img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; display: block; }
.tarot-pick-on { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(81,103,120,0.8); color: #e7d2ac; font-size: 18px; line-height: 1.5; letter-spacing: -0.36px; }

/* 결과 로딩 카드 */
.tarot-load-card { position: relative; width: 150px; height: 200px; border-radius: 7px; overflow: hidden;
  box-shadow: 0 8px 10px rgba(161,188,209,0.7); flex: none; }
.tarot-load-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; max-width: none; display: block; }

/* 타로 저장 이미지 액자 (피그마 1814:37443) — 저장하는 순간에만 적용
   #B5CBDB 위 구름 그림(원래 비율) → 14.5px부터 537.5px까지 #B5CBDB로 서서히 덮임 → 흰색 30% */
.tarot-cap.capture-fixed { background: #B5CBDB !important; }   /* 구름 그림·덮개는 아래 .cap-bg 로 깔림 */

/* 저장 이미지 그림자 — 아이폰 사파리는 저장 이미지 속 box-shadow를 위아래 뒤집어 그림.
   저장하는 순간에만 그림자 효과를 끄고, 같은 크기의 판을 카드 뒤 오른쪽 아래로 6px 밀어 깔아서 대신함.
   (카드 테두리 2px 기준: 4px = -2px + 6px) */
.capture-fixed { isolation: isolate; }
.capture-fixed .tarot-card, .capture-fixed .cap-shadow { box-shadow: none !important; }
.capture-fixed .tarot-card::before, .capture-fixed .cap-shadow::before {
  content: ""; position: absolute; left: 4px; top: 4px;
  width: calc(100% + 4px); height: calc(100% + 4px);
  background: var(--cap-sh, rgba(136,157,173,0.6)); z-index: -1; pointer-events: none; }
.capture-fixed .cap-shadow { --cap-sh: rgba(129,112,105,0.4); }

/* 타로 카드 크게 보기 팝업 (피그마 1814:37745) — 화면 어디를 눌러도 닫힘 */
.tarot-pop { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  background: rgba(38,46,52,0.8); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); cursor: pointer; }
.tarot-pop-body { display: flex; flex-direction: column; align-items: center; gap: 11px; }
/* 앱 카드 그림(JPG)은 둥근 카드 바깥이 흰색 → 어두운 배경에서 흰 모서리가 보이므로 그림의 모서리 곡선(600px 기준 약 27px)에 맞춰 12px로 잘라냄.
   피그마는 모서리가 투명한 PNG라 같은 모양으로 보임 */
.tarot-pop-card { position: relative; width: 270px; height: 360px; flex: none; border-radius: 12px; overflow: hidden; }
.tarot-pop-meta { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tarot-pop-name { font-size: 24px; line-height: 1.5; letter-spacing: -0.48px; color: #fff; text-align: center; }
.tarot-pop-tag { background: #fff7e9; border: 1px solid rgba(231,210,172,0.6); border-radius: 99px; padding: 2px 10px 4px;
  font-size: 12px; line-height: 1.5; letter-spacing: -0.24px; color: #665435; white-space: nowrap; }

/* 저장 이미지 배경 그림 — CSS 배경 이미지(url)는 아이폰 사파리 저장 때 빠지는 경우가 있어서
   카드 그림처럼 실제 이미지 요소로 깔아둠. 화면에서는 숨기고, 저장하는 순간에만 맨 뒤에 보임 */
.cap-bg { display: none; }
.capture-fixed { position: relative; }
.capture-fixed > .cap-bg { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.cap-bg-img { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-width: none !important; display: block; }
.cap-bg-cover .cap-bg-img { height: 100%; object-fit: cover; object-position: center; }
/* 타로: 14.5px부터 537.5px까지 #B5CBDB로 서서히 덮고, 전체에 흰색 30% (피그마 1814:37443) */
.cap-bg-veil-tarot { position: absolute; inset: 0;
  background: linear-gradient(rgba(255,255,255,.3), rgba(255,255,255,.3)),
              linear-gradient(180deg, rgba(181,203,219,0) 14.5px, #B5CBDB 537.5px); }


/* ============================================================
   저장 안내 팝업 (.ft-save-pop)
   아이폰에서 사진 저장이 바로 안 될 때만 뜨는 화면.
   테스트별(사주·별자리·타로) 배경 톤과 버튼 색을 그대로 따라갑니다.
   ============================================================ */
.ft-save-pop {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 24px 20px max(24px, env(safe-area-inset-bottom));
  animation: ftSavePopIn .18s ease-out both;

  /* 기본값 = 별자리 */
  --sp-text: #FFFFFF;
  --sp-sub: rgba(255, 236, 193, .78);
  --sp-frame: rgba(255, 255, 255, .22);
  --sp-btn: #B4B2FF;
  --sp-btn-text: #11042C;
  background: radial-gradient(120% 80% at 50% 0%, #1B1235 0%, #020414 62%);
}

/* 사주 — 종이/먹색 톤, 버튼 #A44732 */
.ft-save-pop--saju {
  --sp-text: #FFF4DA;
  --sp-sub: rgba(255, 244, 218, .62);
  --sp-frame: rgba(255, 244, 218, .26);
  --sp-btn: #A44732;
  --sp-btn-text: #FFFFFF;
  background: radial-gradient(120% 80% at 50% 0%, #5B4236 0%, #33241F 62%);
}

/* 별자리 — 밤하늘, 버튼 #B4B2FF */
.ft-save-pop--zodiac {
  --sp-text: #FFFFFF;
  --sp-sub: rgba(255, 236, 193, .78);
  --sp-frame: rgba(255, 255, 255, .22);
  --sp-btn: #B4B2FF;
  --sp-btn-text: #11042C;
  background: radial-gradient(120% 80% at 50% 0%, #1B1235 0%, #020414 62%);
}

/* 타로 — 새벽하늘, 버튼 #3A5A8A */
.ft-save-pop--tarot {
  --sp-text: #FFFFFF;
  --sp-sub: rgba(203, 219, 230, .85);
  --sp-frame: rgba(203, 219, 230, .26);
  --sp-btn: #3A5A8A;
  --sp-btn-text: #FFFFFF;
  background: radial-gradient(120% 80% at 50% 0%, #2F4A6B 0%, #16222F 62%);
}

/* 잔별 — 별자리에서만 (이미지 없이 CSS로) */
.ft-save-pop--zodiac::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255,244,218,.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 78% 12%, rgba(255,244,218,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(255,244,218,.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 74%, rgba(255,244,218,.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 88%, rgba(255,244,218,.7) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 35% 40%, rgba(255,244,218,.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 66% 30%, rgba(255,244,218,.6) 50%, transparent 51%);
}

.ft-save-pop > * { position: relative; }

.ft-save-pop__title {
  margin: 0;
  color: var(--sp-text);
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.34px;
  text-align: center;
  word-break: keep-all;
}

.ft-save-pop__sub {
  margin: 0 0 4px;
  color: var(--sp-sub);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: -0.26px;
  text-align: center;
  word-break: keep-all;
}

.ft-save-pop__img {
  max-width: 100%;
  max-height: 60vh;
  object-fit: contain;
  display: block;
  border-radius: 16px;
  border: 1px solid var(--sp-frame);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}

.ft-save-pop__btn {
  margin-top: 4px;
  border: none;
  border-radius: 99px;
  background: var(--sp-btn);
  color: var(--sp-btn-text);
  padding: 14px 28px 16px;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.32px;
  white-space: nowrap;
  cursor: pointer;
}
.ft-save-pop__btn:active { transform: translateY(2px); }

@keyframes ftSavePopIn { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { .ft-save-pop { animation: none } }

/* date-empty-fix v2 — 사주 생년월일 칸: 비어 있을 때 눌러도 가짜 안내(2000.01.01)만 보이게.
   브라우저 자체 '연도. 월. 일'과 파란 선택 표시는 숨기고, 키보드로 숫자를 치기 시작하면(data-typing)
   가짜 안내를 숨기고 친 숫자를 회색으로 보여준다 */
input[type="date"][data-empty="1"]:not([data-typing])::-webkit-datetime-edit,
input[type="date"][data-empty="1"]:not([data-typing])::-webkit-datetime-edit-fields-wrapper,
input[type="date"][data-empty="1"]:not([data-typing])::-webkit-datetime-edit-text,
input[type="date"][data-empty="1"]:not([data-typing])::-webkit-datetime-edit-year-field,
input[type="date"][data-empty="1"]:not([data-typing])::-webkit-datetime-edit-month-field,
input[type="date"][data-empty="1"]:not([data-typing])::-webkit-datetime-edit-day-field {
  color: transparent !important; background: transparent !important; }
input[type="date"][data-empty="1"][data-typing] { color: #B3A99C !important; }
input[type="date"][data-empty="1"][data-typing] + span { display: none; }