/* 타로 탭 (관상은 여기 넣지 않기로 확정함 — 타로는 서양 문화라 관상/사주와 결이 안 맞는다는 판단.
     관상은 홈 화면과 사주 탭에 별도 진입 카드로 붙어있음, js/physiognomy.js 참고) */
  .fortune-hub-header { text-align:center; margin: 6px 0 20px; }
  .fortune-hub-title-row { position:relative; display:flex; width:max-content; margin:0 auto; padding:0 31px; align-items:center; justify-content:center; }
  .fortune-hub-title-row::before {
    content:''; position:absolute; left:50%; top:54%; width:116px; height:48px; border-radius:50%; pointer-events:none;
    background:radial-gradient(ellipse,rgba(151,116,218,.19),transparent 70%); opacity:.42; transform:translate(-50%,-50%) scale(.92);
    animation:tarotTitleAura 5.2s ease-in-out infinite;
  }
  .fortune-hub-title { font-size:26px; font-weight:800; margin:0; letter-spacing:-0.5px; }
  .fortune-hub-sub { font-size:13px; color:#86868b; margin-top:8px; }
  .tarot-title-charm { position:absolute; width:22px; height:22px; opacity:.9; pointer-events:none; }
  .tarot-title-charm-left { left:3px; top:-2px; }
  .tarot-title-charm-right { right:4px; bottom:-2px; }
  .tarot-title-charm::before { content:none; }
  .tarot-title-orb {
    position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%;
    background:#d8c7ff; box-shadow:inset -4px 1px 0 #2a1f52,0 0 8px rgba(201,167,255,.38);
    transform:translate(-50%,-50%); animation:tarotTitleMoon 5.2s ease-in-out infinite;
  }
  .tarot-title-charm-right .tarot-title-orb { width:4px; height:4px; background:#e5c985; box-shadow:0 0 7px rgba(229,201,133,.7); animation:tarotTitleDot 5.2s ease-in-out infinite; }
  .tarot-title-star {
    position:absolute; color:#eadcff; font-size:9px; line-height:1; opacity:.28;
    animation:tarotTitleStar 5.2s ease-in-out infinite;
  }
  .tarot-title-charm-left .tarot-title-star { right:-1px; top:-2px; }
  .tarot-title-charm-right .tarot-title-star { left:-1px; bottom:-1px; animation-delay:.22s; }
  @keyframes tarotTitleAura { 0%,3%,24%,100% { opacity:.3; transform:translate(-50%,-50%) scale(.92); } 11% { opacity:.72; transform:translate(-50%,-50%) scale(1.06); } }
  @keyframes tarotTitleMoon { 0%,3%,24%,100% { opacity:.62; filter:brightness(1); transform:translate(-50%,-50%) scale(.94); } 11% { opacity:1; filter:brightness(1.18); transform:translate(-50%,-50%) scale(1.08); } }
  @keyframes tarotTitleDot { 0%,5%,24%,100% { opacity:.42; transform:translate(-50%,-50%) scale(.8); } 13% { opacity:1; transform:translate(-50%,-50%) scale(1.3); } }
  @keyframes tarotTitleStar { 0%,4%,24%,100% { opacity:.22; transform:scale(.72) rotate(0); } 12% { opacity:1; transform:scale(1.24) rotate(28deg); } 18% { opacity:.44; transform:scale(.88) rotate(42deg); } }
  @keyframes tarotTitleAuraReduced { 0%,4%,24%,100% { opacity:.3; } 12% { opacity:.68; } }
  @keyframes tarotTitleMoonReduced { 0%,4%,24%,100% { opacity:.62; filter:brightness(1); } 12% { opacity:1; filter:brightness(1.18); } }
  @keyframes tarotTitleStarReduced { 0%,4%,24%,100% { opacity:.22; } 12% { opacity:.9; } }
  /* 운세 탭 허브 카드 스타일 — 지금은 타로 하나뿐이라 마크업에서 안 쓰고 있음.
     관상 추가되면 다시 카드 선택 그리드(fortune-hub-grid)를 마크업에 붙여서 그대로 재사용할 것 */
  .fortune-hub-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-bottom:20px; }
  .fortune-hub-card {
    background:#fff; border:1.5px solid #ece7ff; border-radius:16px; padding:16px 8px; text-align:center;
    cursor:pointer; position:relative; box-shadow:0 1px 3px rgba(0,0,0,0.05);
  }
  .fortune-hub-card.active { border-color:#5e5ce6; background:linear-gradient(135deg,#f7f5ff,#fff5f8); }
  .fortune-hub-card:disabled { cursor:default; opacity:0.55; }
  .fhc-icon { font-size:26px; margin-bottom:6px; }
  .fhc-name { font-size:13px; font-weight:800; color:#1d1d1f; }
  .fhc-badge {
    position:absolute; top:8px; right:8px; font-size:9.5px; font-weight:700; color:#a1a1a6;
    background:#f5f5f6; border-radius:8px; padding:2px 6px;
  }

  .tarot-section { margin-bottom:22px; }
  .tarot-daily-secret-hint { margin:4px 0 3px; color:#8f86aa; font-size:10.5px; line-height:1.45; text-align:center; word-break:keep-all; }
  .tarot-spread-desc { font-size:12.5px; color:#6e6e73; text-align:center; margin:6px 0 12px; line-height:1.5; }
  .tarot-spread-cta-btn {
    display:block; width:100%; padding:14px 20px; border-radius:14px; border:none; cursor:pointer;
    background:linear-gradient(135deg,#5e5ce6,#ff375f); color:#fff; font-size:14px; font-weight:800; text-align:center;
  }
  .tarot-spread-cta-btn:disabled { opacity:0.6; cursor:default; }

  .tarot-card-visual {
    position:relative; width:180px; height:270px; border-radius:17px;
    box-shadow:0 10px 28px -8px rgba(0,0,0,0.4); flex:0 0 auto; border:1px solid rgba(255,255,255,0.16);
    overflow:hidden;
  }
  .tcv-bg { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .tcv-bg::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(circle at 28% 18%, rgba(255,255,255,0.35) 0%, transparent 40%),
      linear-gradient(200deg, rgba(255,255,255,0.14) 0%, transparent 45%);
    pointer-events:none;
  }
  .tcv-frame {
    position:absolute; inset:4px; border:1px solid rgba(255,255,255,0.3); border-radius:5px; pointer-events:none;
  }
  .tcv-number {
    position:absolute; top:5px; left:7px; font-size:9px; font-weight:800; color:rgba(255,255,255,0.85);
    font-variant-numeric:tabular-nums;
  }
  .tcv-suit-label {
    position:absolute; bottom:5px; left:0; right:0; text-align:center; font-size:7px; font-weight:700;
    letter-spacing:0.5px; color:rgba(255,255,255,0.75);
  }
  .tcv-symbol { font-size:26px; transition:transform 0.3s ease; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
  .tcv-symbol.tcv-reversed { transform:rotate(180deg); }

  /* 메이저 아르카나 일러스트(그림+프레임+번호/이름 텍스트, 별도 레이어로 합성) */
  .tcv-illust { position:absolute; inset:0; overflow:hidden; background:#f2ede3; }
  .tcv-illust-img, .tcv-illust-frame {
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none;
  }
  /* 행운의 조커는 완성 이미지 안에 전용 금빛 테두리가 있으므로 공통 프레임을 겹치지 않습니다. */
  .tcv-joker { position:absolute; inset:0; overflow:hidden; background:#faf5ed; }
  .tcv-joker-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
  .tcv-joker-shine {
    position:absolute; inset:-35% -75%; pointer-events:none; opacity:0;
    background:linear-gradient(108deg,transparent 38%,rgba(255,247,205,.08) 44%,rgba(255,255,255,.72) 50%,rgba(247,214,132,.16) 56%,transparent 62%);
    transform:translateX(-36%) rotate(2deg);
  }
  .tarot-joker-revealed .tcv-joker-shine { animation:tarotJokerShine 1.25s cubic-bezier(.22,.7,.3,1) .12s 1 both; }
  @keyframes tarotJokerShine { 0% { opacity:0; transform:translateX(-38%) rotate(2deg); } 20% { opacity:.9; } 100% { opacity:0; transform:translateX(38%) rotate(2deg); } }
  .tcv-illust-img.tcv-illust-reversed { transform:rotate(180deg); }
  .tcv-illust-number, .tcv-illust-name {
    position:absolute; left:4%; right:4%; text-align:center; color:#B79B67;
    -webkit-font-smoothing:antialiased;
    /* 얇은 외곽선(크리스프한 경계) + 블러 글로우(halo, 아래 text-shadow) 둘을 같이 씀.
       외곽선만으로는 실제 카드 크기(90~150px)로 축소됐을 때 선이 너무 가늘어져 배경과 비슷한 톤에서
       거의 안 보이는 문제가 있었음 — 블러 글로우는 축소돼도 옅어질 뿐 사라지지 않아서 어떤 그림 배경에도 대응됨 */
    -webkit-text-stroke:0.6px rgba(20,14,4,0.65);
    text-shadow:0 0 1.5px rgba(15,10,3,0.85), 0 0 3px rgba(15,10,3,0.6);
    paint-order:stroke fill;
  }
  /* 번호는 보조 표시로 작고 가늘게 */
  .tcv-illust-number { top:8%; font-weight:500; font-size:10px; font-family:"Cormorant Garamond", "Times New Roman", serif; letter-spacing:1px; }
  /* 카드명이 주인공 — 더 크고 진하게, 전통 채색화 톤에 어울리는 한글 세리프(붓글씨 느낌) 폰트 사용 */
  .tcv-illust-name { bottom:8.5%; font-weight:600; font-size:12px; white-space:nowrap; font-family:"Song Myung", "Noto Serif KR", serif; }
  .tcv-illust-name.tcv-illust-name-long { font-size:10.5px; }
  /* 오늘의 타로 큰 카드(180px)로 전환됐을 때 확실히 더 커 보이도록, 작은 카드보다 크게 차이 나게 잡음 */
  .tarot-card-visual .tcv-illust-number { font-size:18px; font-weight:500; }
  .tarot-card-visual .tcv-illust-name { font-size:25px; font-weight:700; }
  .tarot-card-visual .tcv-illust-name.tcv-illust-name-long { font-size:20px; }
  /* 큰 카드는 글자도 커진 만큼 글로우 반경도 비례해서 키움 */
  .tarot-card-visual .tcv-illust-number, .tarot-card-visual .tcv-illust-name {
    text-shadow:0 0 2px rgba(15,10,3,0.85), 0 0 4.5px rgba(15,10,3,0.6);
  }
  /* 마이너(완드 등) 전용 텍스트 스타일 — 두 가지 목적:
     1) 번호가 산세리프라 로마숫자(세리프)와 글꼴 자체로 확실히 구분됨. 예전엔 아라비아 숫자를 메이저와 같은
        세리프(Cormorant Garamond)로 썼더니 "11"이 "Ⅱ"처럼 보이는 문제가 있었음
     2) 이름도 메이저의 화려한 붓글씨체(Song Myung) 대신 차분한 명조체로 바꿔서, 메이저=인생의 큰 사건/
        마이너=일상적 상황이라는 급 차이가 텍스트 톤에서도 느껴지게 함 */
  .tcv-illust-minor .tcv-illust-number {
    font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight:600; letter-spacing:0.5px;
  }
  .tcv-illust-minor .tcv-illust-name {
    font-family:"Noto Serif KR", "Nanum Myeongjo", serif; font-weight:500; letter-spacing:0.3px;
  }
  /* 마이너 이름은 "수트명+직위"(예: 펜타클 페이지) 구조라 메이저 이름보다 평균적으로 훨씬 길어서,
     같은 25px을 쓰면 여백이 거의 안 남음 — 한 단계 작게 잡아서 여유를 확보 (톤 차이도 자연스레 강화됨) */
  .tarot-card-visual .tcv-illust-minor .tcv-illust-name { font-size:21px; }
  .tarot-card-visual .tcv-illust-minor .tcv-illust-name.tcv-illust-name-long { font-size:17px; }
  /* 마이너 아르카나(수트 색상 디자인)도 큰 카드에서는 같이 확대해서 메이저랑 나란히 봐도 어색하지 않게 */
  .tarot-card-visual .tcv-number { font-size:14px; top:10px; left:12px; }
  .tarot-card-visual .tcv-suit-label { font-size:11px; bottom:10px; }
  .tarot-card-visual .tcv-symbol { font-size:46px; }
  .tarot-card-visual .tcv-frame { inset:8px; }

  /* 마이너 카드 전용 표시(메이저는 카드 안에 이미 이름이 있어서 이 div 자체를 생략함) — 카드 안 마이너 이름과
     같은 차분한 명조체로 통일. "(역방향)"은 이름과 똑같은 스타일로 그냥 붙어있으면 밋밋해서, 메이저의
     역방향 배지(.tsn-reversed)처럼 작고 은은한 별도 스타일(.tcn-reversed-suffix)로 분리 */
  .tarot-card-name { font-size:15px; font-weight:500; color:#1d1d1f; margin-top:10px; text-align:center; font-family:"Noto Serif KR", "Nanum Myeongjo", serif; }
  .tarot-card-name .tcn-reversed-suffix { font-size:10.5px; font-weight:700; color:#a1a1a6; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin-left:4px; }
  .tarot-card-keyword { font-size:11.5px; color:#5e5ce6; font-weight:700; margin-top:2px; text-align:center; }
  /* 메이저 아르카나는 카드 안에 이미 이름이 적혀있어서, 아래 키워드는 이름을 대신하는 정도로 살짝 더 차분하게 */
  .tarot-card-keyword.tarot-card-keyword-major { font-size:13px; font-weight:600; font-style:italic; margin-top:10px; letter-spacing:0.2px; }
  .tarot-card-keyword.tarot-card-keyword-joker { color:#cfae61; font-style:normal; letter-spacing:.04em; }
  .tarot-card-message { font-size:13px; color:#3a3a3c; line-height:1.6; text-align:center; margin-top:10px; padding:0 8px; }
  .tarot-reveal-wrap { display:flex; flex-direction:column; align-items:center; padding:22px 12px 26px; }
  .tarot-reveal-text { width:100%; text-align:center; overflow-anchor:none; }
  .tarot-reveal-text.tarot-reveal-text-collapsed {
    display:grid; grid-template-rows:0fr; opacity:0; transform:translateY(4px);
    transition:grid-template-rows .4s cubic-bezier(.22,.75,.25,1), opacity .3s ease, transform .36s cubic-bezier(.22,.75,.25,1);
  }
  .tarot-reveal-text.tarot-reveal-text-collapsed > .tarot-reveal-text-inner { min-height:0; overflow:hidden; }
  .tarot-reveal-text.tarot-reveal-text-visible { grid-template-rows:1fr; opacity:1; transform:translateY(0); }
  .tarot-joker-result { width:min(100%,330px); margin:14px auto 2px; display:flex; flex-direction:column; align-items:center; }
  .tarot-joker-kicker { color:#cdb16b; font-size:10px; line-height:1.4; font-weight:800; letter-spacing:.08em; }
  .tarot-joker-result > strong { margin-top:3px; color:#f8f2ff; font:700 20px/1.35 "Noto Serif KR","Nanum Myeongjo",serif; }
  .tarot-joker-credit { width:min(100%,260px); box-sizing:border-box; margin-top:10px; min-height:38px; padding:8px 12px; display:flex; align-items:center; justify-content:center; gap:6px; border:1px solid rgba(235,209,139,.32); border-radius:999px; background:rgba(238,215,154,.09); color:#eee4ff; font-size:11px; line-height:1.3; }
  .tarot-joker-credit b { flex:0 0 auto; color:#f4cf72; font-size:18px; line-height:1; }
  .tarot-joker-credit > span:last-child { white-space:nowrap; }
  .tarot-joker-credit--done,.tarot-joker-credit--guest { color:#bdb2d7; }
  /* 예전엔 뽑기만 해도 바로 지급돼서 이 자리는 결과만 보여주는 문구였는데, 사용자가 직접 눌러야
     지급되도록 바뀌면서 진짜 버튼이 됨. 눌러야 한다는 게 보이도록 살짝 밝은 테두리·눌림 반응을 줌 */
  .tarot-joker-credit-claim {
    appearance:none; -webkit-appearance:none; font:inherit; cursor:pointer; width:auto;
    border-color:rgba(244,207,114,.62); background:rgba(244,207,114,.16);
    box-shadow:0 0 0 0 rgba(244,207,114,.4); transition:transform .12s ease,box-shadow .18s ease,opacity .18s ease;
    position:relative; /* 아래 반짝임 파티클(.tjc-spark)이 버튼 중심을 기준으로 사방에 흩뿌려지도록 기준점 */
  }
  .tarot-joker-credit-claim:active { transform:scale(.97); }
  .tarot-joker-credit-claim:disabled { opacity:.6; cursor:default; transform:none; }
  @keyframes tarotJokerClaimPulse { 0%,100% { box-shadow:0 0 0 0 rgba(244,207,114,.4); } 50% { box-shadow:0 0 0 5px rgba(244,207,114,0); } }
  .tarot-joker-credit-claim:not(:disabled) { animation:tarotJokerClaimPulse 1.6s ease-in-out infinite; }
  /* 상단에 크레딧 잔액 배지가 상시 노출되는 화면이 아니라서(타로 탭엔 배지가 없음), 어딘가로
     날아가는 연출 대신 버튼 자리에서 자체 완결되는 "받는 순간" 연출. 실제 지급(earned>0)일 때만
     재생되고, 이미 받은 경우엔 축하할 일이 아니므로 타지 않음 */
  .tarot-joker-credit-claim.tjc-claimed { animation:none; pointer-events:none; }
  .tjc-count { display:inline-block; min-width:1.4ch; }
  @keyframes tjcNumberPop { 0% { transform:scale(1); } 45% { transform:scale(1.4); } 100% { transform:scale(1); } }
  .tjc-count.tjc-pop { animation:tjcNumberPop .3s cubic-bezier(.34,1.4,.64,1); }
  @keyframes tjcSparkPop {
    0% { transform:translate(-50%,-50%) translate(0,0) scale(0); opacity:0; }
    35% { opacity:1; }
    100% { transform:translate(-50%,-50%) translate(var(--tjc-x1,0), var(--tjc-y1,0)) scale(1); opacity:0; }
  }
  .tjc-spark {
    position:absolute; top:50%; left:50%; width:5px; height:5px; border-radius:50%;
    background:#f4cf72; box-shadow:0 0 6px 1px rgba(244,207,114,.85);
    pointer-events:none; opacity:0; animation:tjcSparkPop .6s cubic-bezier(.22,.85,.32,1) forwards;
  }
  /* 최종 문구가 나타난 뒤 한 번 더 움직여 보이지 않도록 버튼과 결과 폭을 같게 유지하고 페이드만 사용합니다.
     축하 동작은 앞 단계의 +7 숫자 팝과 반짝임으로 이미 충분히 전달됩니다. */
  .tjc-result-enter { opacity:0; }
  .tjc-result-enter-active {
    transition:opacity .16s ease;
    opacity:1;
  }
  .tjc-result-exit {
    transition:opacity .14s ease;
    opacity:0; pointer-events:none;
  }

  /* 카드 뒷면 패턴 (별·모양 반복 도트 + 브랜드 엠블럼) */
  .tarot-card-back {
    position:absolute; inset:0; border-radius:var(--tcr, 8px); overflow:hidden;
    background:
      radial-gradient(circle at 50% 48%, rgba(167,139,250,0.2) 0%, transparent 32%),
      linear-gradient(155deg,#34205f 0%,#221542 55%,#17102d 100%);
    box-shadow:inset 0 0 0 1px rgba(201,167,255,0.2);
  }
  .tarot-card-back img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
  /* 부채꼴에서 카드끼리 겹칠 때 경계가 안 보이면 겹친 느낌이 잘 안 살아서, 이 화면의 카드에만 얇은 테두리+그림자로 구분감을 줌
     (스프레드/예스노/뒤집기 스테이지는 .tarot-flip-face 자체에 이미 테두리가 있어서 이중으로 안 겹치게 범위를 좁힘) */
  .tarot-fan-row .tarot-fan-card > .tarot-card-back {
    border:1px solid rgba(255,255,255,0.22); box-shadow:0 3px 8px -3px rgba(0,0,0,0.5);
  }

  /* 카드 뒤집기(3D 플립) — 스프레드/예스노 결과 공개에서 씀 (부채꼴 뽑기는 아래 grid 전용 규칙으로 별도 지정) */
  .tarot-fan-card, .tarot-spread-flip-card {
    position:relative; width:90px; height:135px; cursor:pointer; perspective:700px;
    transition:transform 0.22s cubic-bezier(.34,1.2,.64,1), opacity 0.28s ease;
  }
  .tarot-flip-inner {
    position:relative; width:100%; height:100%; transition:transform 0.5s cubic-bezier(.4,0,.2,1);
    transform-style:preserve-3d; -webkit-transform-style:preserve-3d;
  }
  .tarot-fan-card.tarot-flipped .tarot-flip-inner,
  .tarot-spread-flip-card.tarot-flipped .tarot-flip-inner,
  .tarot-card-visual.tarot-flipped .tarot-flip-inner { transform:rotateY(180deg); }
  .tarot-flip-face {
    position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:var(--tcr, 8px); overflow:hidden;
    border:1px solid rgba(255,255,255,0.16); box-shadow:0 4px 10px -5px rgba(0,0,0,0.35);
  }
  .tarot-flip-face.tarot-flip-front { transform:rotateY(180deg); }
  .tarot-spread-flip-card { margin-right:0; cursor:default; }

  /* 25장을 가로 스크롤+스냅으로 넘기면서 고르는 캐러셀 방식. 카드를 뽑으면(플립) 이 행 안에서 뒤집는 게 아니라
     별도의 큰 스테이지(.tarot-daily-flipstage)로 넘어가서 진행함 — 그래서 이 안에서는 카드가 커질 일이 없어
     overflow-x:auto와 overflow-y가 부딪히는 문제(브라우저가 auto와 visible을 같이 쓸 수 없어서 확대된 카드가
     세로로 잘려 보이던 문제)가 애초에 생기지 않음 */
  /* min-height를 카드를 고른 뒤의 큰 카드 스테이지(.tarot-daily-flipstage)와 똑같이 미리 잡아둠.
     예전엔 고르는 순간에 가서야 두 높이를 비교해 모자라면 늘리는 방식이었는데, 실제 렌더 높이가
     사람이 계산해둔 값과 몇 px만 어긋나도 그 순간 박스가 살짝 커지는 게 보였음(아래 pick 핸들러 참고).
     애초에 그 크기만큼 미리 확보해두면 고를 때 다시 잴 필요 자체가 없어짐 */
  .tarot-fan-wrap { width:100%; min-width:0; padding:22px 0 34px; text-align:center; overflow:visible; min-height:324px; }
  .tarot-fan-hint {
    font-size:12.5px; color:#c9beed; margin-bottom:18px; transition:opacity 0.2s ease; padding:0 10px;
    /* 안내 문구 ↔ 로딩 문구(별 아이콘 포함)로 내용이 바뀔 때, 아이콘 글자의 어센트/디센트가 커서
       줄 높이가 미세하게 달라지며 박스가 살짝 튀는 문제 방지 — 높이를 고정하고 가운데 정렬 */
    min-height:18px; line-height:18px; display:flex; align-items:center; justify-content:center;
  }
  .tarot-fan-row {
    display:flex; align-items:center; width:100%; max-width:480px; margin:0 auto; box-sizing:border-box;
    overflow-x:auto; overflow-y:hidden; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
    transition:opacity 0.18s ease, transform 0.18s ease;
    /* 좌우 여백을 넉넉히 둬서, 스크롤 맨 끝(첫/마지막 카드)도 화면 중앙 부근까지 당겨올 수 있고
       오른쪽 다음 카드가 살짝 잘려 보여서 "더 있다"는 걸 바로 알 수 있게 함 */
    padding:14px 34%;
    scrollbar-width:none; /* 모바일 터치 스크롤이라 스크롤바 안 보이게 */
    cursor:grab; /* PC에서 마우스로 드래그해서 넘길 수 있다는 걸 알려줌 */
  }
  .tarot-fan-row.tfr-preparing { opacity:0; transform:translateY(2px); pointer-events:none; }
  .tarot-fan-row.tfr-dragging { cursor:grabbing; scroll-snap-type:none; }
  /* 카드를 고른 순간, 부채꼴 전체를 즉시 지우는 대신 이 자리에 겹쳐서 부드럽게 사라지게 함.
     그동안 고른 카드는 별도로 새로 생기는 큰 스테이지(.tarot-daily-flipstage, z-index가 같지만
     DOM상 더 뒤에 와서 위에 쌓임) 위에서 바로 커지기 시작해서, "사라짐"과 "커짐"이 동시에 겹쳐
     보임 — 지연 없이 바로 반응하면서도 훅 끊기지 않고 매끈하게 이어짐.
     position:static→absolute 전환(트랜지션 불가)은 js/tarot-daily.js에서 이 프레임에 바로 처리하고,
     낱장 카드의 opacity/transform 클래스(.tfc-dismissing, 아래 참고)는 다음 프레임에 붙습니다 — 같은
     프레임에 묶으면 리플로우를 강제로 읽어도 브라우저가 한 번의 스타일 계산으로 합쳐버려 트랜지션
     없이 바로 사라지는 경우가 있었음 */
  #tarot-daily-stage > .tarot-fan-wrap.tfw-dismissing {
    /* wrap 자체는 더 이상 opacity/transform으로 통째 사라지지 않음 — 24장이 한 덩어리로 묶여서
       동시에 사라지면 "순차적으로 사라진다"는 느낌이 전혀 안 남는다는 피드백을 받아, 카드 낱장마다
       (.tfc-dismissing) 고른 카드로부터의 거리에 비례한 지연을 두고 물결처럼 사라지게 바꿈. 여기선
       터치만 즉시 막음 */
    pointer-events:none;
  }
  #tarot-daily-stage > .tarot-fan-wrap.tfw-dismissing .tarot-fan-hint {
    transition:opacity .16s ease; opacity:0;
  }
  .tarot-fan-row::-webkit-scrollbar { display:none; }
  .tarot-fan-row .tarot-fan-card {
    position:relative; flex:0 0 auto; height:auto; aspect-ratio:2/3;
    width:clamp(108px, 30vw, 136px); /* 화면 폭에 따라 자연스럽게 조절, 예전(44~90px) 대비 훨씬 큼직함 */
    scroll-snap-align:center;
    cursor:pointer; touch-action:manipulation; transition:transform 0.28s cubic-bezier(.34,1.2,.64,1), opacity 0.28s ease;
  }
  /* 살짝 겹치게(부채꼴 느낌) — 뒤 카드가 앞 카드 위로 살짝 올라오도록 DOM 순서 그대로 자연스럽게 겹침 */
  .tarot-fan-row .tarot-fan-card + .tarot-fan-card { margin-left:-26px; }
  .tarot-fan-card.tarot-spread-flip-card { margin-right:0; }
  .tarot-fan-card.tarot-fan-fade { opacity:0; transform:scale(0.85) !important; pointer-events:none; }
  /* 카드 낱장이 각자 사라지는 애니메이션. 고른 카드와의 거리(js에서 --tfc-delay로 지정)만큼 시작을
     늦춰서, 고른 카드를 중심으로 양옆으로 물결처럼 퍼지며 사라지는 것이 눈에 보이게 함. 기존
     .tarot-fan-card 트랜지션(hover/선택 시 확대용)보다 확실히 우선하도록 선택자를 더 구체적으로 둠 */
  .tarot-fan-row .tarot-fan-card.tfc-dismissing {
    /* 순차적으로 사라지는 게 보이긴 하는데 전체가 너무 빠르다는 피드백으로, 카드 낱장 전환 시간을
       두 배 이상 늘림(.26s→.56s, js의 지연 폭도 같이 늘어남) */
    transition:opacity .56s ease, transform .56s ease;
    transition-delay:var(--tfc-delay, 0ms);
    opacity:0; transform:scale(.88);
    pointer-events:none;
  }
  /* 뒤집기는 이제 별도 큰 스테이지에서 진행되므로, 이 안의 카드는 뒤집히지 않고 살짝 커지기만 하다가 사라짐(다음 줄) */

  /* 카드를 고르면 부채꼴 전체가 페이드아웃되고, 큰 카드 1장이 뒤집히는 전용 스테이지로 전환됨.
     스크롤 컨테이너 밖(overflow:visible)이라 확대돼도 잘릴 일이 없고, 이 카드가 그대로 결과 화면의
     큰 카드(.tarot-card-visual)로 이어지기 때문에(크기가 동일) 전환이 "쑥" 커지지 않고 매끈하게 이어짐 */
  .tarot-daily-flipstage { display:flex; flex-direction:column; align-items:center; padding:22px 12px 4px; }
  .tarot-daily-flipstage .tarot-card-visual {
    --tcr:17px; cursor:default; contain:layout style; overflow:visible; box-sizing:border-box;
    transform:translateZ(0); -webkit-transform:translateZ(0); border-color:transparent;
  }
  /* 고정된 326px 카드 박스의 안쪽 높이는 테두리를 제외하면 324px.
     22px 위 여백 + 270px 카드 + 8px 간격 + 18px 문구 + 4px 아래 여백 = 322px로 맞춰
     모바일에서도 로딩 문구의 아랫부분이 잘리지 않게 한다. */
  .tarot-daily-flipstage .tarot-daily-loading-hint {
    flex:0 0 18px; min-height:18px; margin:8px 0 0; padding:0; line-height:18px;
  }
  @media (max-width:430px) {
    .tarot-daily-flipstage { padding:20px 12px 12px; }
    .tarot-daily-flipstage .tarot-card-visual { width:174px; height:261px; }
    .tarot-daily-flipstage .tarot-daily-loading-hint { margin-top:9px; }
    .tarot-fan-wrap { min-height:322px; }
  }
  .tarot-daily-flipstage .tarot-flip-inner { will-change:transform; transform:translateZ(0); -webkit-transform:translateZ(0); }
  .tarot-daily-flipstage.tarot-daily-result-stage { padding-bottom:26px; }
  #tarot-daily-stage.tarot-daily-height-locked { overflow:hidden; }
  #tarot-daily-stage.tarot-daily-result-anchored { align-items:flex-start; }
  /* 확대 자체가 선택 반응이므로 선이 scale되며 진해지는 강조는 사용하지 않습니다. */
  .tarot-daily-flipstage .tarot-flip-face { border-color:transparent; box-shadow:none; border-radius:17px; }
  .tarot-daily-flipstage .tarot-card-back { box-shadow:none; border-radius:17px; }
  .tarot-daily-flipstage .tarot-card-visual::after {
    content:""; position:absolute; inset:-4px; z-index:3; border-radius:21px; pointer-events:none;
    opacity:0; box-shadow:0 0 0 0 rgba(207,174,97,0),0 0 0 rgba(156,98,230,0);
  }
  /* 조커 연출: 켜짐(빠르게 밝아짐) → 유지(잔잔하게 숨쉬듯, 시간제한 없이 계속). 뒤집히는 타이밍이나
     정해진 시간에 맞춰 스스로 꺼지지 않고, 이 화면을 벗어날 때(다른 탭으로 이동 등)만 자연스럽게
     사라짐 — 중간에 꺼지는 게 어색하다는 피드백으로 '꺼짐' 단계 자체를 없앴음. 상태 전환 시점은
     js/tarot-daily.js에서 클래스를 붙이는 방식으로 제어함. 흔들림은 빛과 분리해서 시작할 때
     짧게 한 번만 훅 치고 지나가는 별도 반응으로 둠(빛이 켜져있는 내내 흔들리면 정신없어 보임) */
  .tarot-daily-flipstage .tarot-card-visual.tarot-joker-glow-in::after { animation:tarotJokerGlowIn .15s ease-out forwards; }
  .tarot-daily-flipstage .tarot-card-visual.tarot-joker-glow-hold::after { animation:tarotJokerGlowHold 1.4s ease-in-out infinite; }
  .tarot-daily-flipstage .tarot-card-visual.tarot-joker-shake { animation:tarotJokerShake .28s cubic-bezier(.36,.07,.19,.97) both; }
  @keyframes tarotJokerGlowIn {
    0% { opacity:0; box-shadow:0 0 0 0 rgba(207,174,97,0),0 0 0 rgba(156,98,230,0); }
    100% { opacity:1; box-shadow:0 0 0 4px rgba(207,174,97,.72),0 0 22px 8px rgba(156,98,230,.42); }
  }
  @keyframes tarotJokerGlowHold {
    0%,100% { opacity:1; box-shadow:0 0 0 4px rgba(207,174,97,.72),0 0 22px 8px rgba(156,98,230,.42); }
    50% { opacity:.88; box-shadow:0 0 0 3px rgba(241,203,112,.6),0 0 26px 9px rgba(156,98,230,.36); }
  }
  @keyframes tarotJokerShake {
    0%,10% { transform:translate3d(0,0,0) rotate(0); }
    30% { transform:translate3d(-3px,0,0) rotate(-.45deg); }
    50% { transform:translate3d(3px,0,0) rotate(.45deg); }
    70% { transform:translate3d(-1.5px,0,0) rotate(-.2deg); }
    100% { transform:translate3d(0,0,0) rotate(0); }
  }
  .tarot-test-controls { width:100%; margin-top:14px; display:flex; justify-content:center; flex-wrap:wrap; gap:8px; }

  /* 카드 원래 의미 더보기 (78장 사전 데이터 그대로 노출) */
  .tarot-meaning-wrap { margin-top:12px; clear:both; }
  .tarot-meaning-toggle {
    display:inline-flex; align-items:center; justify-content:center; gap:4px; min-height:44px; background:none; border:none; cursor:pointer;
    font-size:12px; font-weight:700; color:#c9a7ff; padding:10px 8px; touch-action:manipulation; -webkit-tap-highlight-color:transparent;
  }
  .tmt-chevron { display:inline-block; transition:transform 0.2s ease; font-size:11px; }
  .tarot-meaning-toggle.tmt-open .tmt-chevron { transform:rotate(180deg); }
  .tarot-meaning-panel {
    display:grid; grid-template-rows:0fr; overflow:hidden; opacity:0; text-align:left;
    transition:grid-template-rows .3s cubic-bezier(.22,.75,.25,1), opacity .25s ease, margin-top .3s cubic-bezier(.22,.75,.25,1);
  }
  /* grid-template-rows:0fr↔1fr 방식으로 실제 콘텐츠 높이를 몰라도 항상 고르게 트랜지션됨(스크롤 높이를
     재서 max-height에 넣던 예전 방식은 재는 시점에 폰트가 아직 안 실렸거나 다른 레이아웃이 막 정리되는
     중이면 값이 어긋나 끊겨 보이는 경우가 있었음 — 이 화면 바로 위 문단이 펼쳐지는 애니메이션과 동시에
     발생하면 특히 그랬음). 같은 방식을 이미 .tarot-reveal-text-collapsed/.tarot-spread-desc-block에서
     쓰고 있어서 그대로 맞춤. grid-rows가 0fr일 때 내용이 완전히 안 보이려면 그리드 아이템 쪽에
     min-height:0이 필요함 */
  .tarot-meaning-panel > .tarot-meaning-panel-inner { min-height:0; overflow:hidden; }
  .tarot-meaning-panel.tmp-open { grid-template-rows:1fr; opacity:1; margin-top:8px; }
  .tarot-retest-btn {
    display:block; margin:14px auto 0; background:none; border:1px dashed rgba(255,255,255,0.3); border-radius:10px;
    padding:6px 12px; font-size:11px; color:#8a7fb3; cursor:pointer; -webkit-tap-highlight-color:transparent;
  }
  .tarot-test-controls .tarot-retest-btn { margin:0; }
  .tarot-test-controls .tarot-retest-btn-secondary { background:rgba(255,255,255,.08); color:#d8ceed; border-style:solid; border-color:rgba(255,255,255,.16); }
  .tarot-meaning-block { font-size:12px; line-height:1.6; padding:8px 0; color:#d7cdf0; }
  .tarot-meaning-block + .tarot-meaning-block { border-top:1px solid rgba(255,255,255,0.1); }
  .tarot-meaning-block b { display:block; font-size:11px; color:#c9a7ff; margin-bottom:2px; }

  .tarot-spread-row { display:flex; justify-content:center; gap:18px; margin-bottom:16px; }
  .tarot-spread-slot { display:flex; flex-direction:column; align-items:center; width:96px; flex:0 0 auto; text-align:center; }
  .tarot-spread-slot .tarot-flip-face .tcv-symbol { font-size:32px; }
  .tarot-spread-slot .tarot-flip-face .tcv-suit-label { font-size:8px; }
  .tarot-spread-slot-label { font-size:10.5px; color:#a1a1a6; font-weight:700; margin-bottom:6px; text-align:center; width:100%; }
  .tarot-spread-slot-name { font-size:11px; font-weight:700; color:#1d1d1f; margin-top:6px; text-align:center; max-width:96px; line-height:1.35; }
  .tarot-spread-slot .tarot-spread-flip-card { width:96px; height:144px; cursor:pointer; }
  /* 카드 뒤집기 전까지는 이름/역방향을 숨겨서 미리 스포일러 되지 않게 함. 대신 탭 유도 문구를 보여줌 */
  .tarot-spread-meta { display:grid; width:100%; min-height:34px; margin-top:6px; place-items:start center; }
  .tarot-spread-meta > * { grid-area:1/1; }
  .tarot-spread-slot-name-wrap { visibility:hidden; opacity:0; transition:opacity .25s ease; }
  .tarot-spread-slot.tss-revealed .tarot-spread-slot-name-wrap { visibility:visible; opacity:1; }
  .tarot-spread-slot.tss-revealed .tarot-spread-tap-hint { visibility:hidden; opacity:0; }
  .tarot-spread-slot.tss-opening .tarot-spread-tap-hint { opacity:0; }
  .tarot-spread-tap-hint { font-size:10.5px; color:#8a7fb3; padding-top:2px; transition:opacity .2s ease; animation:tarotTapHintPulse 1.8s ease-in-out infinite; }
  @keyframes tarotTapHintPulse { 0%,100% { opacity:0.55; } 50% { opacity:1; } }
  .tarot-spread-reveal-all-btn {
    display:block; margin:2px auto 14px; background:none; border:1px solid rgba(255,255,255,0.22); border-radius:10px;
    padding:6px 14px; font-size:11.5px; font-weight:700; color:#c9a7ff; cursor:pointer; -webkit-tap-highlight-color:transparent;
    transition:opacity 0.2s ease, transform 0.2s ease;
  }
  .tarot-spread-reveal-all-btn:disabled { cursor:default; }
  .tarot-spread-reveal-all-btn.tsr-all-done { opacity:0.55; transform:none; pointer-events:none; }
  .tsn-reversed { font-size:9.5px; font-weight:700; color:#a1a1a6; margin-top:2px; text-align:center; }
  .tarot-spread-desc-block { background:#fff; border:1px solid #ece7ff; border-radius:12px; padding:10px 14px 4px; margin-bottom:8px; font-size:12.5px; line-height:1.6; color:#3a3a3c; }
  .tarot-spread-desc-block b { display:block; font-size:11.5px; color:#5e5ce6; margin-bottom:3px; }
  .tarot-spread-summary { background:linear-gradient(135deg,#f7f5ff,#fff5f8); border-radius:12px; padding:14px; font-size:13px; line-height:1.6; color:#1d1d1f; margin-top:10px; }
  .tarot-spread-desc-block, .tarot-spread-summary {
    display:grid; grid-template-rows:0fr; box-sizing:border-box; overflow:hidden; opacity:0; transform:translateY(4px); pointer-events:none;
    transition:grid-template-rows .4s cubic-bezier(.22,.75,.25,1), opacity .28s ease, transform .4s cubic-bezier(.22,.75,.25,1), padding .4s cubic-bezier(.22,.75,.25,1), margin .4s cubic-bezier(.22,.75,.25,1), border-color .2s ease;
  }
  .tarot-spread-panel-inner { min-height:0; overflow:hidden; }
  .tarot-spread-desc-block:not(.tsdb-visible), .tarot-spread-summary:not(.tss-visible) {
    padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0; border-color:transparent;
  }
  .tarot-spread-desc-block.tsdb-visible, .tarot-spread-summary.tss-visible { grid-template-rows:1fr; opacity:1; transform:translateY(0); pointer-events:auto; }
  .tarot-spread-desc-block .tarot-meaning-wrap { margin-top:8px; margin-bottom:-2px; }

  .tarot-result-enter { animation:tarotResultEnter 0.3s ease both; }
  @keyframes tarotResultEnter { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }
  .tarot-yesno-result { display:flex; flex-direction:column; align-items:center; padding:8px 0 4px; }
  .tarot-yesno-verdict {
    font-size:30px; font-weight:800; margin-bottom:16px; letter-spacing:-0.5px;
    opacity:0; transform:translateY(4px); transition:opacity 0.28s ease, transform 0.28s ease;
  }
  .tarot-yesno-details {
    width:100%; display:flex; flex-direction:column; align-items:center;
    opacity:0; transform:translateY(4px); transition:opacity 0.28s ease 0.06s, transform 0.28s ease 0.06s;
  }
  .tarot-yesno-result.tyr-revealed .tarot-yesno-verdict,
  .tarot-yesno-result.tyr-revealed .tarot-yesno-details { opacity:1; transform:translateY(0); }
  .tarot-yesno-again-btn {
    margin-top:16px; background:none; border:1px solid rgba(255,255,255,0.25); border-radius:12px;
    padding:10px 16px; font-size:12.5px; font-weight:700; color:#c9a7ff; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  /* 운세 탭 다크 테마 — 타로 특유의 신비로운 분위기를 위해 이 탭만 어둡게 감쌈 */
  body.theme-fortune {
    background:
      radial-gradient(circle at 15% 20%, rgba(255,181,77,0.12) 0%, transparent 35%),
      radial-gradient(circle at 85% 15%, rgba(10,132,255,0.12) 0%, transparent 32%),
      radial-gradient(circle at 75% 80%, rgba(52,199,89,0.08) 0%, transparent 30%),
      radial-gradient(ellipse at top, #2a1f52 0%, #1a1330 55%, #150f26 100%);
  }
  #screen-fortune {
    padding: 32px 0 66px; min-height: calc(100vh - 64px - env(safe-area-inset-bottom));
    color: #f0eaff;
  }
  #screen-fortune .fortune-inner { max-width:640px; margin:0 auto; padding:0 20px; }
  #screen-fortune .fortune-hub-title { color:#f5f0ff; }
  #screen-fortune .fortune-hub-sub { color:#a99fc9; }
  #screen-fortune .fortune-hub-card {
    background:rgba(255,255,255,0.05); border-color:rgba(167,139,250,0.25); box-shadow:none;
  }
  #screen-fortune .fortune-hub-card.active {
    border-color:#a78bfa; background:rgba(167,139,250,0.14); box-shadow:0 0 0 1px rgba(167,139,250,0.3), 0 0 20px -4px rgba(167,139,250,0.5);
  }
  #screen-fortune .fhc-name { color:#f0eaff; }
  #screen-fortune .fhc-badge { background:rgba(255,255,255,0.08); color:#a99fc9; }
  #screen-fortune .section-title { color:#f0eaff; }
  #screen-fortune .section-title .icon-badge { color:#1d1d1f; }
  #screen-fortune .tarot-spread-desc { color:#a99fc9; }
  #screen-fortune .fortune-motion-stage {
    background:linear-gradient(135deg, rgba(94,54,230,0.28), rgba(167,68,255,0.14));
    border:1px solid rgba(167,139,250,0.22);
  }
  #screen-fortune #tarot-daily-stage {
    isolation:isolate;
    background:
      radial-gradient(circle at 50% 43%, rgba(244,222,174,.16) 0%, rgba(178,143,226,.11) 27%, transparent 49%),
      radial-gradient(circle at 18% 14%, rgba(168,139,235,.2) 0%, transparent 31%),
      linear-gradient(145deg,rgba(55,36,101,.92),rgba(30,25,66,.96));
    border-color:rgba(198,170,246,.34);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -34px 60px rgba(8,6,28,.2),0 18px 40px -32px rgba(207,168,255,.4);
  }
  #tarot-daily-stage > * { position:relative; z-index:2; }
  #tarot-daily-stage > .tarot-sparkle-piece { position:absolute; z-index:3; }
  #tarot-daily-stage::before {
    content:''; position:absolute; z-index:0; left:50%; top:54%; width:min(430px,82%); aspect-ratio:1.82;
    border:1px solid rgba(237,216,174,.16); border-radius:50%; pointer-events:none; opacity:.78;
    box-shadow:0 0 0 30px rgba(207,174,239,.065), 0 0 0 67px rgba(237,216,174,.04), 0 0 64px rgba(200,161,246,.13);
    transform:translate(-50%,-50%) rotate(-5deg);
    animation:tarotCelestialDrift 12s ease-in-out infinite;
    transition:opacity .3s ease, filter .3s ease;
  }
  #tarot-daily-stage::after {
    content:''; position:absolute; z-index:1; inset:0; pointer-events:none; opacity:.78;
    background:
      linear-gradient(32deg,transparent 48.8%,rgba(218,195,244,.09) 49.5%,rgba(218,195,244,.09) 50.5%,transparent 51.2%) 8% 16%/86px 42px no-repeat,
      linear-gradient(-28deg,transparent 48.8%,rgba(226,202,150,.08) 49.5%,rgba(226,202,150,.08) 50.5%,transparent 51.2%) 89% 72%/94px 46px no-repeat,
      radial-gradient(circle at 9% 22%,rgba(255,225,162,.92) 0 1px,transparent 1.8px),
      radial-gradient(circle at 17% 31%,rgba(218,195,244,.7) 0 1px,transparent 1.6px),
      radial-gradient(circle at 25% 18%,rgba(218,195,244,.55) 0 1px,transparent 1.6px),
      radial-gradient(circle at 81% 20%,rgba(255,225,162,.82) 0 1px,transparent 1.8px),
      radial-gradient(circle at 91% 29%,rgba(218,195,244,.72) 0 1px,transparent 1.6px),
      radial-gradient(circle at 84% 76%,rgba(255,225,162,.84) 0 1px,transparent 1.8px),
      radial-gradient(circle at 12% 78%,rgba(218,195,244,.62) 0 1px,transparent 1.6px);
    animation:tarotSkyTwinkle 6.4s ease-in-out infinite;
  }
  #tarot-daily-stage.tarot-card-chosen::before { opacity:.95; filter:drop-shadow(0 0 12px rgba(218,191,132,.13)); }
  @keyframes tarotCelestialDrift {
    0%,100% { transform:translate(-50%,-50%) rotate(-5deg) scale(.985); }
    50% { transform:translate(-50%,-51%) rotate(3deg) scale(1.015); }
  }
  @keyframes tarotSkyTwinkle { 0%,100% { opacity:.52; } 24% { opacity:.78; } 36% { opacity:.6; } 72% { opacity:.82; } }
  #screen-fortune .fm-hint { color:#c9beed; }
  #screen-fortune .fm-idle-glow { background:radial-gradient(circle, rgba(167,139,250,0.45), transparent 70%); }
  #screen-fortune .tarot-card-name { color:#f5f0ff; }
  #screen-fortune .tarot-card-name .tcn-reversed-suffix { color:#8a7fb3; }
  #screen-fortune .tarot-card-keyword { color:#c9a7ff; }
  #screen-fortune .tarot-card-message { color:#d7cdf0; }
  #screen-fortune .tarot-spread-slot-label { color:#8a7fb3; }
  #screen-fortune .tarot-spread-slot-name { color:#f0eaff; }
  #screen-fortune .tsn-reversed { color:#8a7fb3; }
  #screen-fortune .tarot-spread-desc-block {
    background:rgba(255,255,255,0.05); border-color:rgba(167,139,250,0.22); color:#d7cdf0;
  }
  #screen-fortune .tarot-spread-desc-block b { color:#c9a7ff; }
  #screen-fortune .tarot-spread-summary {
    background:rgba(167,139,250,0.14); border:1px solid rgba(167,139,250,0.28); color:#f5f0ff;
  }
  #screen-fortune .tarot-card-visual { box-shadow:0 8px 20px -6px rgba(0,0,0,0.55); }
  #screen-fortune .fm-quick-circle { background:linear-gradient(135deg,#4c1d95,#7c3aed); box-shadow:0 0 24px -4px rgba(167,139,250,0.6); }
  #screen-fortune .fm-quick-ring { border-color:rgba(167,139,250,0.55); }

  /* 컨페티 대신 타로 전용 은은한 별가루 이펙트 */
  .tarot-sparkle-piece {
    position:absolute; top:50%; left:50%; font-size:13px; color:#c9a7ff;
    transform:translate(-50%,-50%) rotate(var(--fm-angle)) translateX(0) scale(0.6); opacity:1;
    animation: tarotSparkleFly 1s ease-out forwards;
  }
  @keyframes tarotSparkleFly {
    0% { transform:translate(-50%,-50%) rotate(var(--fm-angle)) translateX(0) scale(0.5); opacity:1; }
    55% { opacity:1; }
    100% { transform:translate(-50%,-50%) rotate(var(--fm-angle)) translateX(var(--fm-dist)) scale(1); opacity:0; }
  }
  @media (max-width:370px) {
    .fortune-hub-title-row { padding-inline:28px; }
    .tarot-title-charm { transform:scale(.92); }
  }
  @media (prefers-reduced-motion:reduce) {
    .fortune-hub-title-row::before { animation:tarotTitleAuraReduced 6.8s ease-in-out infinite; transform:translate(-50%,-50%); }
    .tarot-title-orb { animation:tarotTitleMoonReduced 6.8s ease-in-out infinite; transform:translate(-50%,-50%); }
    .tarot-title-star { animation:tarotTitleStarReduced 6.8s ease-in-out infinite; transform:none; }
    #tarot-daily-stage::before, #tarot-daily-stage::after { animation:none; }
    #tarot-daily-stage::before { transform:translate(-50%,-50%) rotate(-5deg); }
    .tarot-joker-revealed .tcv-joker-shine { animation:none; }
    .tarot-joker-credit-claim { animation:none; }
    .tjc-count.tjc-pop { animation:none; }
    .tjc-spark { display:none; }
    #tarot-daily-stage > .tarot-fan-wrap.tfw-dismissing { transition:none; }
    .tarot-fan-row .tarot-fan-card.tfc-dismissing { transition:none; transition-delay:0ms; opacity:0; transform:none; }
    .tjc-result-enter-active, .tjc-result-exit { transition:none; }
    .tarot-daily-flipstage .tarot-card-visual.tarot-joker-shake { animation:none; }
    /* 유지 단계의 숨쉬는 루프는 모션 최소화 사용자에겐 끄고, 정적으로 밝은 상태만 유지함 */
    .tarot-daily-flipstage .tarot-card-visual.tarot-joker-glow-in::after,
    .tarot-daily-flipstage .tarot-card-visual.tarot-joker-glow-hold::after {
      animation:none; opacity:1; box-shadow:0 0 0 4px rgba(207,174,97,.72),0 0 22px 8px rgba(156,98,230,.42);
    }
  }
  .premium-detail .pd-title {
    display:inline-flex; align-items:center; gap:6px; min-height:32px; margin:0 0 12px; padding:5px 10px;
    border:1px solid rgba(94,92,230,.12); border-radius:999px; background:linear-gradient(135deg,#f1efff,#fff1f6);
  }
  .premium-detail .pd-title-icon { font-size:14px; line-height:1; }
  .premium-detail h4 { margin:0; color:#5e5ce6; font-size:15px; line-height:1.35; font-weight:800; letter-spacing:-.2px; }
  .premium-detail .pd-headline {
    margin:0 0 17px; padding:0 0 15px; border-bottom:1px solid #ece9f7;
    color:#1d1d1f; font-size:16px; line-height:1.55; font-weight:800; letter-spacing:-.3px; word-break:keep-all;
  }
  .premium-detail .pd-section { margin-bottom:15px; }
  .premium-detail .pd-section-title { color:#1d1d1f; font-size:14px; line-height:1.45; font-weight:750; }
  .premium-detail .pd-section p { margin:4px 0 0; color:#48484a; font-size:14px; line-height:1.7; }
  .premium-detail .pd-advice {
    margin:17px 0 2px; padding:16px 16px 18px; text-align:center;
    border:1px solid rgba(220,184,90,.3); border-radius:12px;
    background:linear-gradient(135deg,rgba(255,248,224,.94),rgba(247,243,255,.94));
  }
  .premium-detail .pd-advice-title { position:relative; display:block; width:fit-content; max-width:100%; margin:0 auto; }
  .premium-detail .pd-advice-title::after {
    content:""; position:absolute; left:50%; top:calc(100% + 7px); width:24px; height:2px; border-radius:999px;
    transform:translateX(-50%); background:linear-gradient(90deg,#e0b85f,#9b7bea); opacity:.72;
  }
  .premium-detail .pd-advice-icon {
    position:absolute; right:calc(100% + 8px); top:50%; transform:translateY(-50%);
    width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:50%;
    background:rgba(255,255,255,.78); font-size:14px; box-shadow:0 2px 8px rgba(138,104,32,.08);
  }
  .premium-detail .pd-advice strong { color:#8a681d; font-size:14px; line-height:1.4; font-weight:800; }
  .premium-detail .pd-advice p { max-width:340px; margin:18px auto 0; color:#3a3a3c; font-size:14px; line-height:1.65; text-align:center; word-break:keep-all; text-wrap:balance; }
  .premium-detail .pd-close { display:block; margin:16px auto 0; background:none; border:none; color:#8e8e93; font-size:12px; cursor:pointer; }
  /* 평생 흐름표에서 "특히 좋은 시기"(내부적으로 용신/희신 판단, 화면엔 그 단어를 쓰지 않음)로
     표시된 구간 강조. 이미 지난 시기까지 지금과 똑같이 강하게 강조하면 "내 좋은 시절은 이미
     갔다"는 아쉬움으로 읽힐 수 있어서, 지금 나이 기준 과거/현재/미래에 따라 강도를 다르게 줌.
     처음엔 현재·미래를 같은 골드 톤으로만 구분해서(테두리 실선/점선 차이만) 스크롤하며 훑어볼 땐
     구분이 잘 안 된다는 피드백을 받아, 미래는 앱 브랜드 컬러(보라)로 색 자체를 바꿔서 한눈에
     구분되게 함. 다만 보라가 앱 전체에서 이미 채도 높게 많이 쓰이는 색이라, 그대로 두면 오히려
     미래 쪽이 더 눈에 띄어 "지금이 가장 중요하다"는 위계가 뒤집힐 수 있어서, 골드(현재)는 배경·
     테두리를 더 진하게 키우고 보라(미래)는 옅고 얇게 눌러서 현재가 항상 가장 강하게 보이게 함.
     용신급(strong)·희신급(weak)은 원래 정도가 다른 두 기운인데 하나로 뭉뚱그리면 그 차이가 안
     보인다는 피드백으로, 새 색을 늘리는 대신 같은 색의 진하기만 두 단계로 나눠서 표현함(과거는
     이미 가장 옅은 단계라 강도 구분 없이 유지) */
  .premium-detail .pd-section-favorable { padding:10px 12px; margin:0 -12px 10px; border-radius:10px; }
  .premium-detail .pd-section-favorable-current-strong {
    background:linear-gradient(135deg, rgba(244,207,114,.26), rgba(244,207,114,.09));
    border:2px solid rgba(207,174,97,.7);
  }
  .premium-detail .pd-section-favorable-current-weak {
    background:linear-gradient(135deg, rgba(244,207,114,.12), rgba(244,207,114,.04));
    border:1.5px solid rgba(207,174,97,.4);
  }
  .premium-detail .pd-section-favorable-future-strong {
    background:rgba(94,92,230,.08); border:1px dashed rgba(94,92,230,.45);
  }
  .premium-detail .pd-section-favorable-future-weak {
    background:rgba(94,92,230,.03); border:1px dashed rgba(94,92,230,.2);
  }
  .premium-detail .pd-section-favorable-past-strong,
  .premium-detail .pd-section-favorable-past-weak {
    background:rgba(244,207,114,.04); border:1px solid rgba(207,174,97,.22);
  }
  /* 처음엔 제목 옆에 붙이는 작은 알약 뱃지였는데, 폭이 부족한 제목에서 아래로 줄바꿈되며 따로
     붙인 스티커처럼 보이는 문제가 있어서, 제목 위에 항상 같은 자리를 차지하는 킥커(라벨)로 바꿈 —
     타로 조커 결과 화면의 .tarot-joker-kicker와 같은 시각 언어(배경 없이 색+굵기+자간으로만 구분).
     킥커 색도 위 박스 색 구분과 맞춰서 현재는 골드, 미래는 보라로 나누고, 강도별로 진하기를 다르게 함 */
  .pd-favorable-kicker {
    display:block; margin-bottom:3px; font-size:10.5px; font-weight:800; letter-spacing:.04em;
  }
  .pd-favorable-kicker-current-strong { color:#96762a; }
  .pd-favorable-kicker-current-weak { color:#b9975c; }
  .pd-favorable-kicker-future-strong { color:#5e5ce6; }
  .pd-favorable-kicker-future-weak { color:#8886e8; }
  .pd-favorable-kicker-past-strong, .pd-favorable-kicker-past-weak { color:#9c9482; }
  .premium-earn-row { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
  .premium-earn-btn { flex:1; min-width:110px; border:1px solid #ece7ff; background:#fff; border-radius:10px; padding:8px 6px; font-size:11.5px; font-weight:700; color:#5e5ce6; cursor:pointer; }
  .premium-earn-btn:disabled { opacity:0.5; cursor:default; }
  .premium-earn-btn-done { background:#f5f5f6; border-color:#e5e5ea; color:#a1a1a6; }
  .footer { text-align:center; margin-top:16px; font-size:9.5px; color:#a1a1a6; }

  .actions { display:flex; gap:10px; margin-top:16px; }
  .actions button {
    flex:1; padding:12px; border-radius:12px; font-size:13.5px; font-weight:700; cursor:pointer; border:none;
  }
  .btn-download { background:#1d1d1f; color:#fff; }
  .btn-reset { background:#e5e5ea; color:#1d1d1f; }

  /* 타로 화면 타이포 위계. 카드 일러스트 내부 숫자·기호 크기는 시각 자산이므로 유지합니다. */
  .fhc-name,
  .tarot-spread-desc, .tarot-spread-cta-btn,
  .tarot-card-message,
  .tarot-meaning-toggle, .tarot-retest-btn, .tarot-meaning-block,
  .tarot-spread-reveal-all-btn, .tarot-spread-desc-block, .tarot-spread-summary,
  .tarot-yesno-again-btn,
  .premium-detail .pd-close,
  .premium-earn-btn,
  .actions button {
    font-size:var(--type-body);
  }

  .fortune-hub-sub,
  .tarot-daily-secret-hint,
  .tarot-fan-hint,
  .tarot-spread-slot-name, .tarot-spread-tap-hint,
  .tarot-meaning-block b, .tarot-spread-desc-block b {
    font-size:var(--type-secondary);
  }

  .fhc-badge,
  .tarot-card-name .tcn-reversed-suffix,
  .tarot-card-keyword, .tarot-card-keyword.tarot-card-keyword-major,
  .tarot-joker-kicker, .tarot-joker-credit,
  .tmt-chevron,
  .tarot-spread-slot-label, .tsn-reversed,
  .pd-favorable-kicker,
  .footer {
    font-size:var(--type-meta);
  }

  /* 짧은 보조 조작은 14px보다 한 단계만 낮추고, 대신 눌림 여백을 확보합니다. */
  @media (max-width:480px) {
    .tarot-retest-btn, .tarot-spread-reveal-all-btn { min-height:38px; padding-top:8px; padding-bottom:8px; font-size:13px; }
    .premium-earn-btn { min-height:40px; font-size:13px; }
  }