/* 리딩 결과 공용 디자인 — 사용자 화면(#result) · 관리자 타로점 · 타로리더 작업실 · 네이버 접수 카드 · 공유 페이지.
 *
 * 범위: .reading-theme 안(카드·단락·진행 표시), .rt-sky = 밤하늘 상자.
 * Midnight Arcana(docs/design/STYLE_GUIDE.md) — 값은 style.css :root 토큰을 쓴다.
 * 관리자 화면은 style.css 를 불러오지 않으므로 아래 --rt-* 별칭이 토큰이 없을 때의 값을 함께 가진다
 * (토큰이 있으면 늘 토큰이 이긴다 — 색의 원본은 style.css 한 곳).
 * 렌더는 static/js/reading_view.js(관리자·작업실·네이버·공유)와 app.js(사용자) — 마크업 클래스가 같다.
 * 글은 숨기지 않는다: 스크롤 등장(.rv)은 JS 가 있을 때만 붙고, 등장 전에도 완전히 투명하지 않다.
 */
.reading-theme,.rt-sky{
  --rt-bg:var(--bg,#0D0B1A); --rt-bg2:var(--bg-2,#161229); --rt-paper:var(--paper,#1F1938); --rt-raise:var(--raise,#2A2248);
  --rt-ink:var(--ink,#EDE6D6); --rt-muted:var(--muted,#A99FBF); --rt-faint:var(--faint,#6E6688);
  --rt-gold:var(--gold,#D4AF6A); --rt-gold-d:var(--primary-d,#E8CD8E); --rt-on-gold:var(--on-primary,#1A1426);
  --rt-line:var(--line,rgba(212,175,106,.28)); --rt-glow:var(--glow-ring,rgba(212,175,106,.18));
  --rt-violet:var(--violet,#9C8CDB); --rt-tint-violet:var(--tint-violet,rgba(156,140,219,.12));
  --rt-up:var(--upright,#86B39A); --rt-up-tint:var(--lime,rgba(134,179,154,.16));
  --rt-rev:var(--reversed,#D0637A); --rt-rev-tint:var(--tint-reversed,rgba(208,99,122,.16));
  --rt-water:var(--el-water,#E59AB0); --rt-fire:var(--el-fire,#E8A26A); --rt-air:var(--el-air,#9C8CDB);
  --rt-face:var(--card-face,#EFE4CB); --rt-rim:var(--card-rim,#B8955A); --rt-shadow-card:var(--shadow-card,0 10px 26px rgba(0,0,0,.45));
  --rt-display:var(--f-ko-display,"Gowun Batang","Nanum Myeongjo",serif);
  --rt-numeral:var(--f-numeral,"Cormorant SC","Cormorant Garamond",Georgia,serif);
  --rt-body:var(--f-body,"IBM Plex Sans KR","Malgun Gothic",system-ui,sans-serif);
  --rt-ease:var(--ease,cubic-bezier(.22,.61,.36,1));
}

/* ---------- 밤하늘 상자 — 남색 표면 + 금빛 괘선 (그림자·그라디언트 글자 없음) ---------- */
.rt-sky{position:relative;overflow:hidden;border:1px solid var(--rt-line);border-radius:var(--r-modal,10px);
  color:var(--rt-ink);font-family:var(--rt-body);
  background:
    radial-gradient(120% 60% at 50% -10%,var(--rt-tint-violet),transparent 60%),
    radial-gradient(90% 50% at 100% 100%,var(--rt-glow),transparent 60%),
    var(--rt-bg2);
  box-shadow:none}
.rt-sky h3,.rt-title{font-family:var(--rt-display);font-weight:700;letter-spacing:0;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--rt-ink)}
.rt-sky .result-disclaimer{font-size:.8rem;line-height:1.6;color:var(--rt-muted);background:var(--rt-tint-violet);
  border:1px solid var(--rt-line);border-radius:var(--r-ui,4px);padding:10px 14px;box-shadow:none}

/* ---------- 상단 — 주제·질문 ---------- */
.reading-theme .result-question{position:relative;margin:0 0 20px;padding:18px 20px 18px 56px;border-radius:var(--r-panel,6px);
  background:linear-gradient(90deg,var(--rt-glow),transparent 70%),var(--rt-paper);
  border:1px solid var(--rt-line);box-shadow:none}
.reading-theme .result-question[hidden]{display:none}
/* 왼쪽 눈 아이콘(선 아이콘, 금색) — 옛 🔮 이모지 대신 */
.reading-theme .result-question::before{content:"";position:absolute;left:18px;top:19px;width:24px;height:24px;
  background:var(--rt-gold);filter:none;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 16s5-8 13-8 13 8 13 8-5 8-13 8S3 16 3 16z' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='16' r='4'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 16s5-8 13-8 13 8 13 8-5 8-13 8S3 16 3 16z' stroke-linejoin='round'/%3E%3Ccircle cx='16' cy='16' r='4'/%3E%3C/svg%3E") center/contain no-repeat}
.reading-theme .rq-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.reading-theme .rq-label{display:block;margin:0;color:var(--rt-gold);letter-spacing:.18em;font-size:.72rem;font-weight:600;text-transform:uppercase}
.reading-theme .rq-type{font-size:.74rem;font-weight:600;color:var(--rt-gold-d);background:transparent;border:1px solid var(--rt-line);
  padding:1px 10px;border-radius:var(--r-pill,999px)}
.reading-theme .rq-type[hidden]{display:none}
.reading-theme .rq-meta{font-size:.78rem;color:var(--rt-muted)}
.reading-theme .rq-text{margin:0;font-family:var(--rt-display);font-size:1.12rem;line-height:1.6;color:var(--rt-ink);font-weight:700;letter-spacing:0;
  white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}

/* ---------- 뽑은 카드 — 금박 이중 테두리 · 양피지 앞면 · 뒤집기 700ms · 누르면 해당 단락으로 ---------- */
.reading-theme .picked-cards{display:flex;justify-content:center;gap:22px;flex-wrap:wrap;margin:20px 0}
.reading-theme .pc{width:150px;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;color:var(--rt-ink)}
.reading-theme .pc .label{font-family:var(--rt-numeral);font-size:.86rem;margin-bottom:8px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--rt-gold)}
.reading-theme .pc .flipper{position:relative;width:150px;height:257px;perspective:900px;margin:0 auto}
.reading-theme .pc.flipped .flipper{animation:rtLift .7s var(--rt-ease)}
.reading-theme .pc .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-card,8px);
  transition:transform .7s var(--rt-ease);overflow:hidden;border:1px solid var(--rt-rim);
  box-shadow:var(--rt-shadow-card);background:var(--rt-bg2)}
.reading-theme .pc .face img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 1.1s var(--rt-ease)}
/* 앞면 = 양피지 위 그림 + 안쪽 금선(실물 덱 질감) */
.reading-theme .pc .front{transform:rotateY(180deg);background:var(--rt-face);padding:6px;
  box-shadow:inset 0 0 0 4px var(--rt-face),inset 0 0 0 5px var(--rt-rim),var(--rt-shadow-card)}
.reading-theme .pc .front img{border-radius:3px}
.reading-theme .pc.flipped .back{transform:rotateY(180deg)}
.reading-theme .pc.flipped .front{transform:rotateY(360deg)}
.reading-theme .pc.reversing .front img{animation:rtReverse 1.15s var(--rt-ease) forwards}
.reading-theme .pc.reversed:not(.reversing) .front img{transform:rotate(180deg)}
.reading-theme .pc .name{font-family:var(--rt-display);font-weight:700;margin-top:12px;font-size:.98rem;color:var(--rt-ink)}
.reading-theme .pc .theme{color:var(--rt-muted);font-size:.8rem;margin-top:3px;font-weight:400}
.reading-theme .pc .dir{margin-top:6px}
/* 정/역방향 배지 — 색만으로 구분하지 않고 늘 글자 라벨과 함께 */
.reading-theme .dir-badge{display:inline-block;padding:3px 10px;border-radius:var(--r-pill,999px);font-size:.72rem;font-weight:600;letter-spacing:.06em;border:0}
.reading-theme .dir-up{background:var(--rt-up-tint);color:var(--rt-up)}
.reading-theme .dir-rev{background:var(--rt-rev-tint);color:var(--rt-rev)}
.reading-theme .pc.settled{animation:pcFloat 7s ease-in-out infinite;animation-delay:var(--float-delay,0s)}
.reading-theme .pc.settled .face.front{animation:pcGlow 5s ease-in-out infinite;animation-delay:var(--float-delay,0s)}
.reading-theme .pc:hover .face{border-color:var(--rt-gold-d)}
.reading-theme .pc:focus-visible{outline:2px solid var(--rt-gold-d);outline-offset:6px;border-radius:var(--r-card,8px)}
@keyframes rtLift{0%{transform:translateY(0)}45%{transform:translateY(-10px)}100%{transform:none}}
@keyframes rtReverse{from{transform:rotate(0)}to{transform:rotate(180deg)}}
@keyframes pcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes pcGlow{0%,100%{box-shadow:inset 0 0 0 4px var(--rt-face),inset 0 0 0 5px var(--rt-rim),var(--rt-shadow-card)}
  50%{box-shadow:inset 0 0 0 4px var(--rt-face),inset 0 0 0 5px var(--rt-rim),var(--rt-shadow-card),0 0 24px var(--rt-glow)}}

/* ---------- 해석 블록 — 좌: 카드 / 우: Label → 제목(명조) → 본문. 단락 사이는 금빛 괘선 ---------- */
.reading-theme .sec{position:relative;overflow:hidden;animation:none;margin-bottom:14px;border-radius:var(--r-panel,6px);
  border:1px solid var(--rt-line);background:var(--rt-paper);box-shadow:none}
.reading-theme .sec::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--sec-accent,var(--rt-gold));opacity:.9}
.reading-theme .sec.rv{opacity:.12;transform:translateY(22px);transition:opacity .7s ease,transform .7s var(--rt-ease)}
.reading-theme .sec.rv.in{opacity:1;transform:none}
.reading-theme .sec.seen{transition:none}
.reading-theme .sec-head{display:flex;align-items:center;gap:12px;background:transparent !important;
  border-bottom:1px solid var(--rt-line);padding:14px 20px}
.reading-theme .sec-badge{flex-shrink:0;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;color:var(--sec-ic,var(--rt-gold));background:transparent;border:1px solid var(--rt-line);box-shadow:none}
.reading-theme .sec-badge svg{width:22px;height:22px}
.reading-theme .sec-titlewrap{flex:1;min-width:0}
.reading-theme .sec-pretitle{display:block;font-family:var(--rt-body);font-size:.7rem;letter-spacing:.18em;font-weight:600;text-transform:uppercase;color:var(--rt-gold);margin-bottom:2px}
.reading-theme .sec-title{font-family:var(--rt-display);font-size:1.2rem;color:var(--rt-ink);font-weight:700;letter-spacing:0;line-height:1.4}
.reading-theme .sec-time{font-family:var(--rt-numeral);font-size:.95rem;font-weight:500;letter-spacing:.18em;flex-shrink:0;color:var(--rt-gold);opacity:.7}
.reading-theme .sec-body{white-space:normal;background:transparent;color:var(--rt-ink);font-size:1rem;line-height:1.85;
  font-weight:400;letter-spacing:0;word-break:keep-all;overflow-wrap:anywhere;padding:16px 22px 20px;max-width:40em}
.reading-theme .sec-body p{margin:0 0 .9em}
.reading-theme .sec-body p:last-child{margin-bottom:0}
.reading-theme .sec-body b{color:var(--rt-gold-d);font-weight:600}
/* 단락 색 띠 — 원소 4색 + 골드만(무지개 금지) */
.reading-theme .sec-overall{--sec-accent:var(--rt-gold)}
.reading-theme .sec-past{--sec-accent:var(--rt-fire);--sec-ic:var(--rt-fire)}
.reading-theme .sec-present{--sec-accent:var(--rt-gold);--sec-ic:var(--rt-gold)}
.reading-theme .sec-future{--sec-accent:var(--rt-air);--sec-ic:var(--rt-air)}
.reading-theme .sec-bonus{--sec-accent:var(--rt-water);--sec-ic:var(--rt-water)}
.reading-theme .sec-psych{--sec-accent:var(--rt-air);--sec-ic:var(--rt-air)}
.reading-theme .sec-gauge{--sec-accent:var(--rt-gold)}
.reading-theme .sec-advice{--sec-accent:var(--rt-gold-d)}
/* 한 줄 리딩 — 인용(좌측 2px 금선, 명조) */
.reading-theme .sec-oneline{--sec-accent:var(--rt-gold-d)}
.reading-theme .sec-oneline .sec-body{font-family:var(--rt-display);font-size:1.12rem;font-weight:700;color:var(--rt-ink);text-align:left;line-height:1.75;
  margin:16px 22px 20px;padding:4px 0 4px 16px;border-left:2px solid var(--rt-gold)}
.reading-theme .sec-overall .sec-body{font-size:1.05rem;color:var(--rt-ink)}
.reading-theme .sec-flash{animation:secFlash 1.6s ease}
@keyframes secFlash{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 2px var(--rt-gold),0 0 0 6px var(--rt-glow)}}

/* 자리 단락 — 카드가 있으면 왼쪽 카드 열 + 오른쪽 글(모바일은 1열) */
.reading-theme .sec:has(> .sec-card){display:grid;grid-template-columns:128px minmax(0,1fr);grid-template-areas:"head head" "card body"}
.reading-theme .sec:has(> .sec-card) > .sec-head{grid-area:head}
.reading-theme .sec:has(> .sec-card) > .sec-card{grid-area:card;flex-direction:column;align-items:center;text-align:center;padding:18px 0 18px 18px}
.reading-theme .sec:has(> .sec-card) > .sec-body{grid-area:body}
.reading-theme .sec-card{display:flex;align-items:center;gap:10px;padding:14px 22px 0}
.reading-theme .sec-card img{width:110px;max-width:100%;height:auto;border-radius:var(--r-card,8px);background:var(--rt-face);padding:4px;
  border:1px solid var(--rt-rim);box-shadow:inset 0 0 0 3px var(--rt-face),inset 0 0 0 4px var(--rt-rim),var(--rt-shadow-card)}
.reading-theme .sec-card img.rev{transform:rotate(180deg)}
.reading-theme .sec-card-meta{display:flex;flex-direction:column;align-items:inherit;gap:5px}
.reading-theme .sec-card-meta b{font-family:var(--rt-display);color:var(--rt-ink);font-size:.92rem;font-weight:700}
.reading-theme .sec-dir{align-self:inherit;font-size:.72rem;font-weight:600;padding:2px 9px;border-radius:var(--r-pill,999px);border:0}
.reading-theme .sec-dir.up{background:var(--rt-up-tint);color:var(--rt-up)}
.reading-theme .sec-dir.rev{background:var(--rt-rev-tint);color:var(--rt-rev)}

/* 핵심 조언 항목 · 운세 지수 */
.reading-theme .adv-item{display:block;margin:8px 0;padding:10px 14px;border-radius:var(--r-ui,4px);background:var(--rt-bg2);
  border-left:2px solid var(--rt-gold);line-height:1.75}
.reading-theme .adv-item:first-child{margin-top:2px}
.reading-theme .adv-item.adv-gain{border-left-color:var(--rt-up);background:var(--rt-up-tint)}
.reading-theme .adv-item.adv-yn{border-left-color:var(--rt-gold-d);background:var(--rt-glow);font-weight:600}
.reading-theme .gauge{white-space:normal;margin:2px 0 4px}
.reading-theme .gauge-labels{display:flex;justify-content:space-between;font-weight:600;font-size:.95rem;margin-bottom:8px;font-variant-numeric:tabular-nums}
.reading-theme .gauge-pos-lbl{color:var(--rt-gold-d)}
.reading-theme .gauge-neg-lbl{color:var(--rt-violet)}
.reading-theme .gauge-bar{display:flex;height:12px;border-radius:var(--r-pill,999px);overflow:hidden;background:var(--rt-bg);border:1px solid var(--rt-line)}
.reading-theme .gauge-pos{background:linear-gradient(90deg,var(--rt-gold),var(--rt-gold-d));box-shadow:none;transition:width .8s ease}
.reading-theme .gauge-neg{background:var(--rt-raise);transition:width .8s ease}
.reading-theme .gauge-note{margin-top:10px;font-size:.92rem;color:var(--rt-muted)}

/* ---------- 해석 중 표시 — 쓰고 있는 단락 자리의 카드가 천천히 한 바퀴(앞면·뒷면) ---------- */
.reading-theme .sec-progress .rp{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px 8px 8px}
.reading-theme .rp-cards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;perspective:800px}
.reading-theme .rp-card{position:relative;width:78px;aspect-ratio:7/12;transform-style:preserve-3d;animation:rpSpin 7s linear infinite}
.reading-theme .rp-cards.many .rp-card{width:56px}
.reading-theme .rp-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:var(--r-card,8px);overflow:hidden;
  border:1px solid var(--rt-rim);box-shadow:var(--rt-shadow-card)}
.reading-theme .rp-face img{display:block;width:100%;height:100%;object-fit:cover}
.reading-theme .rp-back{transform:rotateY(180deg)}
.reading-theme .rp-card.rev .rp-front img{transform:rotate(180deg)}
@keyframes rpSpin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
.reading-theme .rp-text{margin:0;font-size:.9rem;color:var(--rt-muted);text-align:center}
.reading-theme .rp-dots i{font-style:normal;animation:rpDot 1.4s infinite;opacity:.2;color:var(--rt-gold)}
.reading-theme .rp-dots i:nth-child(2){animation-delay:.2s}
.reading-theme .rp-dots i:nth-child(3){animation-delay:.4s}
@keyframes rpDot{0%,100%{opacity:.2}50%{opacity:1}}

/* ---------- 모바일 ---------- */
@media (max-width:640px){
  .reading-theme .picked-cards{gap:10px}
  .reading-theme .pc{width:104px}
  .reading-theme .pc .flipper{width:104px;height:178px}
  .reading-theme .pc .name{font-size:.86rem;margin-top:8px}
  .reading-theme .pc .theme{font-size:.74rem}
  .reading-theme .sec:has(> .sec-card){grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "card" "body"}
  .reading-theme .sec:has(> .sec-card) > .sec-card{flex-direction:row;text-align:left;padding:14px 16px 0}
  .reading-theme .sec-card img{width:64px}
}
@media (max-width:380px){
  .reading-theme .picked-cards{gap:8px}
  .reading-theme .pc{width:90px}
  .reading-theme .pc .flipper{width:90px;height:154px}
}
@media (max-width:520px){
  .rt-sky{border-radius:var(--r-panel,6px)}
  .reading-theme .result-question{padding:15px 15px 15px 48px}
  .reading-theme .result-question::before{left:14px;top:16px;width:22px;height:22px}
  .reading-theme .rq-text{font-size:1.02rem}
  .reading-theme .sec-body{font-size:.98rem;line-height:1.85;padding:14px 16px 18px}
  .reading-theme .sec-oneline .sec-body{margin:14px 16px 18px}
  .reading-theme .sec-head{padding:12px 16px;gap:10px}
  .reading-theme .sec-badge{width:34px;height:34px}
  .reading-theme .sec-title{font-size:1.05rem}
}
@media (prefers-reduced-motion:reduce){
  .reading-theme .pc.settled,.reading-theme .pc.settled .face.front,.reading-theme .rp-card,.reading-theme .rp-dots i{animation:none}
  .reading-theme .rp-dots i{opacity:1}
  .reading-theme .sec.rv{opacity:1;transform:none;transition:none}
  .reading-theme .pc .face,.reading-theme .pc.flipped .flipper{transition:none;animation:none}
}

/* 공유 페이지 — 콘텐츠 본문 안의 밤하늘 상자 */
.share-sky{padding:22px 20px;margin:8px 0 18px}
.share-sky .share-reading-h{font-size:1.15rem;margin:22px 0 12px}
@media (max-width:640px){.share-sky{padding:14px 12px}}

/* 운세 지수 라벨 — 이모지(✨🌑) 대신 색 점(빛 = 골드, 그림자 = 자수정) */
.reading-theme .gauge-pos-lbl::before,.reading-theme .gauge-neg-lbl::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px}
.reading-theme .gauge-pos-lbl::before{background:var(--rt-gold)}
.reading-theme .gauge-neg-lbl::before{background:var(--rt-violet)}