/* 운명의 카드(/destiny/) · 운명 타임라인(/life-timeline/) — 2026-11-04 운영자.
   무대·배경은 운영자 제공 그림(static/img/destiny/stage.webp · card-back.webp, static/img/timeline/hero.webp).
   무대 안(밤 장면)은 두 테마 모두 같은 어두운 색 — 리딩 결과 밤하늘 상자(reading.css)와 같은 예외.
   글·상자는 사이트 토큰(--paper·--ink·--gold·--line …)을 쓴다. 동작 줄이기면 움직임을 끈다(맨 아래). */

.ds-app, .tl-app{
  --ds-gold-1:#fff2c4; --ds-gold-2:#f6cf6a; --ds-gold-3:#e3a94a;
  --ds-glow: rgba(255,206,110,.75); --ds-glow-soft: rgba(255,190,80,.32);
  --ds-violet:#c9a7ff; --ds-night:#0b0716;
  --tl-teal:#3fd0b0; --tl-aurora:#56e0a8; --tl-deep:#0a1626;
}

/* ================================================================= 운명의 카드 — 무대 */
/* 무대 양옆까지(2026-11-04 운영자 '빨간 영역까지 꽉 채워') — 바깥 상자가 넓은 무대, 가운데 정사각 무대는 그림 그대로
   (카드 자리·빛 점 % 가 정사각 그림 기준이라). 양옆 = 같은 그림을 높이에 맞춰 이어 붙여 흐리고 어둡게 + 가운데와 맞닿는 곳은 부드럽게. */
.ds-stage-wide{position:relative;max-width:920px;margin:0 auto;border:1px solid var(--line);border-radius:var(--r-modal);
  overflow:hidden;isolation:isolate;background:var(--ds-night);
  box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,214,140,.08) inset}
.ds-stage-wide::before{content:"";position:absolute;inset:-12px;z-index:0;pointer-events:none;
  background:url(/static/img/destiny/stage.webp) center/auto 100% repeat-x;filter:blur(5px) brightness(.62) saturate(1.1)}
.ds-stage-wide::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,4,20,.75),transparent 22%,transparent 78%,rgba(8,4,20,.75))}
.ds-stage{position:relative;z-index:1;max-width:600px;margin:0 auto;aspect-ratio:992/997;
  background:var(--ds-night) url(/static/img/destiny/stage.webp) center/cover no-repeat;
  overflow:hidden;isolation:isolate;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
@media (max-width:640px){.ds-stage{-webkit-mask-image:none;mask-image:none}}
.ds-vignette{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .8s;
  background:radial-gradient(ellipse 46% 52% at 51% 47%,transparent 30%,rgba(5,2,12,.92) 100%)}
.ds-glints{position:absolute;inset:0;z-index:2;pointer-events:none}
.ds-glints i{position:absolute;width:3.4%;aspect-ratio:1;margin:-1.7% 0 0 -1.7%;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,170,.95),rgba(255,190,90,.35) 40%,transparent 70%);
  mix-blend-mode:screen;animation:dsFlicker 2.6s ease-in-out infinite}
@keyframes dsFlicker{0%,100%{opacity:.35;transform:scale(.8)}35%{opacity:1;transform:scale(1.15)}60%{opacity:.55;transform:scale(.95)}}

/* 카드 자리 = 그림 속 카드(992×997 기준 x 318~695 · y 140~800) */
.ds-slot{position:absolute;left:32.06%;top:14.04%;width:38%;height:66.2%;z-index:4;perspective:1600px}
.ds-card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.ds-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:3.5%/2%;overflow:hidden}
.ds-face img{display:block;width:100%;height:100%;object-fit:cover}
.ds-front{transform:rotateY(180deg);background:var(--ds-night)}
.ds-front img.rev{transform:rotate(180deg)}
.ds-aura{position:absolute;inset:-9% -12%;border-radius:20px;pointer-events:none;opacity:.35;filter:blur(14px);
  background:radial-gradient(ellipse at center,var(--ds-glow) 0%,var(--ds-glow-soft) 40%,transparent 70%);
  animation:dsAura 3.6s ease-in-out infinite}
@keyframes dsAura{0%,100%{opacity:.25;transform:scale(.96)}50%{opacity:.5;transform:scale(1.03)}}
.ds-stage:not(.is-charging):not(.is-revealed) .ds-card{animation:dsFloat 5s ease-in-out infinite}
@keyframes dsFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.4%)}}

/* 빛줄기 · 룬 고리 — 카드 가운데 기준 */
.ds-rays{position:absolute;left:51%;top:47%;width:170%;aspect-ratio:1;z-index:3;pointer-events:none;
  transform:translate(-50%,-50%) rotate(0);opacity:0;transition:opacity .8s;mix-blend-mode:screen;
  background:repeating-conic-gradient(from 0deg,rgba(255,220,140,.0) 0deg,rgba(255,220,140,.32) 4deg,rgba(255,220,140,0) 9deg,rgba(255,220,140,0) 18deg);
  -webkit-mask:radial-gradient(circle,#000 8%,transparent 58%);mask:radial-gradient(circle,#000 8%,transparent 58%)}
.ds-ring{position:absolute;left:51%;top:47%;width:88%;z-index:3;pointer-events:none;overflow:visible;
  transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .8s,transform 1s var(--ease)}
.ds-ring circle{fill:none;stroke:rgba(255,214,130,.7);stroke-width:.8}
.ds-ring text{fill:rgba(255,226,160,.92);font:600 9px var(--f-numeral);text-anchor:middle;letter-spacing:.06em}
.ds-ring-runes{transform-origin:100px 100px}

.ds-count{position:absolute;left:0;right:0;top:3.5%;z-index:7;text-align:center;pointer-events:none;
  font:600 clamp(2rem,7vw,3.6rem)/1 var(--f-numeral);color:var(--ds-gold-1);letter-spacing:.08em;
  text-shadow:0 0 18px var(--ds-glow),0 0 42px var(--ds-glow-soft)}
.ds-count.pop{animation:dsPop 1s ease-out}
@keyframes dsPop{0%{opacity:0;transform:scale(1.9);filter:blur(4px)}25%{opacity:1;transform:scale(1);filter:blur(0)}80%{opacity:1}100%{opacity:.15;transform:scale(.92)}}
.ds-flash{position:absolute;inset:0;z-index:8;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 51% 47%,#fff 0%,rgba(255,240,200,.9) 25%,rgba(255,220,150,0) 70%)}
.ds-fx{position:absolute;inset:0;width:100%;height:100%;z-index:9;pointer-events:none}
.ds-burst{position:absolute;left:50%;top:50%;width:70%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  border:3px solid var(--ds-gold-2);transform:translate(-50%,-50%) scale(.3);opacity:0;
  box-shadow:0 0 30px var(--ds-glow),inset 0 0 30px var(--ds-glow)}

.ds-cap{position:absolute;left:50%;bottom:2.6%;z-index:10;transform:translateX(-50%);max-width:92%;
  padding:.45em 1.1em;border-radius:var(--r-pill);background:rgba(10,6,22,.72);border:1px solid rgba(255,214,140,.35);
  color:var(--ds-gold-1);font:500 clamp(.78rem,2.4vw,.95rem)/1.4 var(--f-body);text-align:center;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;backdrop-filter:blur(4px)}
.ds-plate{position:absolute;left:50%;top:81.6%;z-index:10;transform:translateX(-50%);display:flex;align-items:center;gap:.5em;
  padding:.35em .9em;border-radius:var(--r-pill);background:rgba(10,6,22,.78);border:1px solid var(--ds-gold-3);white-space:nowrap;
  animation:dsPlate .7s var(--ease) both}
.ds-plate[hidden]{display:none}
@keyframes dsPlate{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.ds-name{color:var(--ds-gold-1);font:700 clamp(.95rem,3vw,1.25rem) var(--f-ko-display)}
.ds-rarity,.ds-dir{font-size:.72rem;padding:.12em .55em;border-radius:var(--r-pill);border:1px solid currentColor}
.ds-rarity{color:var(--ds-gold-2)}
.ds-rarity.r-legend{color:var(--ds-violet)}
.ds-dir.up{color:var(--upright)}
.ds-dir.rev{color:var(--reversed)}

/* 섞기 — 카드가 양옆으로 갈라졌다 모이며 돈다 */
.ds-slot::before,.ds-slot::after{content:"";position:absolute;inset:0;border-radius:3.5%/2%;opacity:0;pointer-events:none;
  background:url(/static/img/destiny/card-back.webp) center/cover}
.is-shuffle .ds-slot::before{animation:dsShufL 1.3s var(--ease)}
.is-shuffle .ds-slot::after{animation:dsShufR 1.3s var(--ease)}
.is-shuffle .ds-card{animation:dsShufC 1.3s var(--ease)}
@keyframes dsShufL{0%,100%{opacity:0;transform:none}20%,70%{opacity:.95;transform:translateX(-62%) rotate(-12deg)}}
@keyframes dsShufR{0%,100%{opacity:0;transform:none}30%,80%{opacity:.95;transform:translateX(62%) rotate(12deg)}}
@keyframes dsShufC{0%{transform:none}50%{transform:translateY(-6%) rotateY(180deg) scale(.94)}100%{transform:rotateY(360deg)}}

/* 긴장 연출 5초 — 단계(data-phase 1~5)마다 세진다 */
.is-charging .ds-vignette{opacity:.55}
.is-charging .ds-rays{opacity:.35;animation:dsSpin 9s linear infinite}
.is-charging .ds-ring{opacity:.85;transform:translate(-50%,-50%) scale(1)}
.is-charging .ds-ring-runes{animation:dsSpinR 14s linear infinite}
.is-charging .ds-slot{animation:dsBeat 1s ease-in-out infinite}
.is-charging .ds-card{--amp:.4;animation:dsShake .14s linear infinite}
.is-charging .ds-aura{animation:none;opacity:.6;filter:blur(16px)}
.is-charging .ds-glints i{animation-duration:.9s}
.ds-stage[data-phase="2"] .ds-vignette{opacity:.65}
.ds-stage[data-phase="2"] .ds-rays{opacity:.5;animation-duration:6s}
.ds-stage[data-phase="2"] .ds-card{--amp:.8}
.ds-stage[data-phase="2"] .ds-aura{opacity:.72}
.ds-stage[data-phase="3"] .ds-vignette{opacity:.75}
.ds-stage[data-phase="3"] .ds-rays{opacity:.68;animation-duration:3.6s}
.ds-stage[data-phase="3"] .ds-card{--amp:1.3}
.ds-stage[data-phase="3"] .ds-aura{opacity:.85;inset:-14% -18%}
.ds-stage[data-phase="3"] .ds-slot{animation-duration:.7s}
.ds-stage[data-phase="4"] .ds-vignette{opacity:.85}
.ds-stage[data-phase="4"] .ds-rays{opacity:.85;animation-duration:2s}
.ds-stage[data-phase="4"] .ds-card{--amp:2}
.ds-stage[data-phase="4"] .ds-aura{opacity:.95;inset:-18% -24%}
.ds-stage[data-phase="4"] .ds-slot{animation-duration:.5s}
.ds-stage[data-phase="4"] .ds-ring-runes{animation-duration:6s}
.ds-stage[data-phase="5"] .ds-vignette{opacity:.95}
.ds-stage[data-phase="5"] .ds-rays{opacity:1;animation-duration:1s}
.ds-stage[data-phase="5"] .ds-card{--amp:3;animation-duration:.08s}
.ds-stage[data-phase="5"] .ds-aura{opacity:1;inset:-24% -32%;filter:blur(20px)}
.ds-stage[data-phase="5"] .ds-slot{animation-duration:.32s}
.ds-stage[data-phase="5"] .ds-ring-runes{animation-duration:3s}
.ds-stage[data-phase="5"] .ds-ring circle{stroke:rgba(255,236,190,.95);stroke-width:1.4}
@keyframes dsSpin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes dsSpinR{to{transform:rotate(-360deg)}}
@keyframes dsBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.025)}30%{transform:scale(1)}45%{transform:scale(1.04)}}
@keyframes dsShake{
  0%{transform:translate(calc(var(--amp)*1px),0) rotate(calc(var(--amp)*.3deg))}
  25%{transform:translate(calc(var(--amp)*-1px),calc(var(--amp)*.6px)) rotate(calc(var(--amp)*-.3deg))}
  50%{transform:translate(calc(var(--amp)*.6px),calc(var(--amp)*-1px)) rotate(0)}
  75%{transform:translate(calc(var(--amp)*-.6px),calc(var(--amp)*.4px)) rotate(calc(var(--amp)*.2deg))}
  100%{transform:translate(calc(var(--amp)*1px),0) rotate(calc(var(--amp)*.3deg))}}

/* 섬광 → 공개 */
.is-flash .ds-flash{animation:dsFlash .75s ease-out}
@keyframes dsFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
.is-revealed .ds-card{transform:rotateY(180deg);animation:none}
.is-revealed .ds-front{animation:dsGoldRim 2.4s ease-in-out infinite}
@keyframes dsGoldRim{
  0%,100%{box-shadow:0 0 0 2px var(--ds-gold-2),0 0 26px 6px var(--ds-glow),0 0 80px 18px var(--ds-glow-soft)}
  50%{box-shadow:0 0 0 3px var(--ds-gold-1),0 0 40px 12px var(--ds-glow),0 0 120px 34px var(--ds-glow-soft)}}
.is-revealed .ds-aura{opacity:.95;inset:-20% -28%;filter:blur(18px);animation:dsAuraOn 2.4s ease-in-out infinite}
@keyframes dsAuraOn{0%,100%{opacity:.75;transform:scale(.98)}50%{opacity:1;transform:scale(1.06)}}
.is-revealed .ds-rays{opacity:.55;animation:dsSpin 22s linear infinite}
.is-revealed .ds-vignette{opacity:.35}
.is-revealed:not(.no-anim) .ds-burst{animation:dsBurst 1.3s ease-out}
@keyframes dsBurst{0%{opacity:1;transform:translate(-50%,-50%) scale(.3)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.6)}}
.no-anim .ds-card{transition:none}

/* 단계마다 퍼지는 빛의 고리 — 세기 --pw(0~1.6) */
.ds-shock{position:absolute;left:51%;top:47%;width:60%;aspect-ratio:1;border-radius:50%;z-index:6;pointer-events:none;opacity:0;
  border:calc(2px + var(--pw,.5) * 4px) solid var(--ds-gold-1);transform:translate(-50%,-50%) scale(.2);
  box-shadow:0 0 40px var(--ds-glow),inset 0 0 40px var(--ds-glow)}
.ds-shock.go{animation:dsShock calc(.6s + var(--pw,.5) * .5s) cubic-bezier(.1,.7,.3,1)}
@keyframes dsShock{0%{opacity:calc(.5 + var(--pw,.5) * .4);transform:translate(-50%,-50%) scale(.2)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(calc(1.4 + var(--pw,.5) * 1.6))}}

/* 공개 직전 초고속 회전(2026-11-04 운영자 '임팩트 마지막엔 엄청 빠르게 회전하고 짠') — 점점 빨라지다(ease-in) 앞면에서 딱 멈춤.
   7바퀴 반 = 2700deg → 마지막 각도가 공개 각도(180deg)와 같아 이어지는 '공개' 상태로 튀지 않는다. */
.ds-stage.is-spin .ds-card{animation:dsHyper 1.6s cubic-bezier(.55,0,.85,.35) forwards}
@keyframes dsHyper{0%{transform:rotateY(0) scale(1)}100%{transform:rotateY(2700deg) scale(1.08)}}
.is-spin .ds-slot{animation:dsSpinGrow 1.6s ease-in forwards}
@keyframes dsSpinGrow{0%{transform:scale(1)}100%{transform:scale(1.14)}}
.is-spin .ds-card .ds-face{filter:brightness(1.25) drop-shadow(0 0 14px var(--ds-glow))}
.is-spin .ds-rays{opacity:1;animation:dsSpin .3s linear infinite}
.is-spin .ds-ring{opacity:1;transform:translate(-50%,-50%) scale(1.18)}
.is-spin .ds-ring-runes{animation:dsSpinR .45s linear infinite}
.is-spin .ds-ring circle{stroke:rgba(255,244,210,1);stroke-width:1.8}
.is-spin .ds-vignette{opacity:1}
.is-spin .ds-aura{animation:none;opacity:1;inset:-32% -44%;filter:blur(24px)}
.is-spin .ds-glints i{animation-duration:.35s}
/* 짠 — 섬광 · 카드가 튀어 오르듯 커졌다 제자리 · 무대 흔들림 · 큰 빛의 고리 */
.is-jjan .ds-card{transition:none}
.is-jjan .ds-slot{animation:dsJjan .7s cubic-bezier(.2,1.7,.4,1)}
@keyframes dsJjan{0%{transform:scale(1.14)}35%{transform:scale(1.3)}100%{transform:scale(1)}}
.is-jjan .ds-flash{animation:dsFlashBig 1s ease-out}
@keyframes dsFlashBig{0%{opacity:0}10%{opacity:1}35%{opacity:.85}100%{opacity:0}}
.is-jjan .ds-rays{opacity:1;animation:dsSpin 1.4s linear infinite}
.ds-stage-wide.is-quake{animation:dsQuake .55s cubic-bezier(.36,.07,.19,.97)}
@keyframes dsQuake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(5px,-2px)}
  30%,50%,70%{transform:translate(-8px,3px)}40%,60%{transform:translate(8px,-3px)}}
.ds-count.jjan{animation:dsJjanTxt 1s cubic-bezier(.2,1.6,.4,1) both;top:30%;font-size:clamp(3rem,12vw,6rem);
  color:#fff;text-shadow:0 0 20px var(--ds-gold-1),0 0 50px var(--ds-glow),0 0 90px var(--ds-glow-soft)}
@keyframes dsJjanTxt{0%{opacity:0;transform:scale(.3) rotate(-8deg)}30%{opacity:1;transform:scale(1.25) rotate(3deg)}
  70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
/* 희귀도 — 메이저는 보랏빛 빛줄기가 더해진다 */
.is-legend.is-revealed .ds-aura{background:radial-gradient(ellipse at center,var(--ds-glow) 0%,rgba(201,167,255,.5) 38%,transparent 70%)}
.is-legend.is-revealed .ds-rays{opacity:.8;background:repeating-conic-gradient(from 0deg,rgba(255,220,140,0) 0deg,rgba(255,220,140,.36) 4deg,rgba(201,167,255,0) 9deg,rgba(201,167,255,.3) 13deg,rgba(201,167,255,0) 18deg)}
/* 연속 출석 단계 — 3일 금빛 · 7일 오로라 · 30일 전설 */
.ds-stage[data-tier="1"].is-revealed .ds-aura{filter:blur(22px)}
.ds-stage[data-tier="2"].is-revealed .ds-aura{background:conic-gradient(from 0deg,rgba(255,214,120,.8),rgba(86,224,168,.6),rgba(201,167,255,.7),rgba(255,214,120,.8));animation:dsAuraSpin 6s linear infinite}
.ds-stage[data-tier="3"].is-revealed .ds-aura{background:conic-gradient(from 0deg,#ffd76a,#ff9fc8,#c9a7ff,#7fd8ff,#56e0a8,#ffd76a);animation:dsAuraSpin 4s linear infinite}
@keyframes dsAuraSpin{to{transform:rotate(360deg)}}

/* ================================================================= 운명의 카드 — 시작 · 고르기 */
.ds-panel{max-width:820px;margin:var(--space-5) auto;text-align:center}
/* 머리글(고정)·면책 띠 아래로 보이게 — 스크롤해 올 때 위쪽 여유 */
.ds-pick,.ds-result,.tl-pick,.tl-result,.ds-stage,.ds-stage-wide,.tl-dec{scroll-margin-top:150px}
.ds-panel[hidden],.ds-result[hidden]{display:none}
.ds-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin-bottom:var(--space-4)}
.ds-chip{display:inline-flex;align-items:center;gap:.4em;padding:.4em .9em;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--paper);color:var(--muted);font-size:.9rem}
.ds-chip b{color:var(--gold);font-family:var(--f-numeral);font-size:1.15em}
.ds-chip .ic,.ds-h .ic,.ds-g-tag .ic,.ds-f-tag .ic,.ds-links .ic,.ds-go .ic,.ds-again .ic{width:1.15em;height:1.15em;flex:0 0 auto}
.ds-go{position:relative;display:inline-flex;align-items:center;gap:.5em;padding:.9em 2.2em;font-size:1.08rem;overflow:hidden;
  background:linear-gradient(135deg,var(--ds-gold-3),var(--ds-gold-2) 45%,var(--ds-gold-1) 55%,var(--ds-gold-3));
  color:var(--on-primary);border:0;box-shadow:0 0 0 1px var(--ds-gold-1) inset,0 0 26px var(--ds-glow-soft)}
.ds-go::after{content:"";position:absolute;top:0;bottom:0;width:40%;left:-60%;transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);animation:dsSheen 2.8s ease-in-out infinite}
@keyframes dsSheen{0%,55%{left:-60%}100%{left:130%}}
.ds-note{margin-top:var(--space-3);color:var(--faint);font-size:.85rem}
.ds-pick-q{margin-bottom:var(--space-4);color:var(--muted)}
.ds-pick-q b{color:var(--gold)}
.ds-deck{display:grid;grid-template-columns:repeat(13,1fr);gap:6px;max-width:780px;margin:0 auto;perspective:900px}
.ds-dc{position:relative;padding:0;border:0;background:none;cursor:pointer;aspect-ratio:377/660;border-radius:4px;
  transition:transform .25s var(--ease),opacity .4s,filter .25s}
.ds-dc img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px;box-shadow:0 3px 8px rgba(0,0,0,.45)}
.ds-dc:hover,.ds-dc:focus-visible{transform:translateY(-8px) scale(1.08);z-index:2;filter:drop-shadow(0 0 10px var(--ds-glow));outline:none}
.ds-deck.dealt .ds-dc{animation:dsDeal .55s var(--ease) both;animation-delay:var(--d)}
@keyframes dsDeal{from{opacity:0;transform:translateY(-40px) rotate(-14deg) scale(.6)}to{opacity:1;transform:none}}
/* 다시 섞기 — 펼친 카드를 가운데로 모았다가(gather) 새로 펼친다(dealt) */
.ds-deck.gather .ds-dc{animation:dsGather .5s var(--ease) both;animation-delay:calc(var(--d) * .4)}
@keyframes dsGather{to{opacity:0;transform:translateY(-36px) rotate(12deg) scale(.45)}}
/* 다시 뽑기 안내 · 신중하게 문구(2026-11-04 운영자) */
.ds-caution,.tl-caution{display:flex;flex-direction:column;align-items:center;gap:.35em;max-width:560px;margin:var(--space-3) auto 0;padding:.75em 1em;
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);border-radius:var(--r-ui);text-align:center;
  background:color-mix(in srgb,var(--gold) 9%,transparent);color:var(--ink);font-size:.88rem;line-height:1.65;word-break:keep-all}
.ds-caution .ic,.tl-caution .ic{flex:none;width:1.25em;height:1.25em;color:var(--gold)}
.ds-caution b,.tl-caution b{color:var(--gold)}
.ds-caution.is-last,.tl-caution.is-last{border-color:color-mix(in srgb,var(--reversed) 60%,transparent);
  background:color-mix(in srgb,var(--reversed) 10%,transparent)}
.ds-bonus,.tl-bonus{margin-top:var(--space-4);padding-top:var(--space-4);border-top:1px solid var(--line);text-align:center}
.tl-bonus{margin:0 0 var(--space-4);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--r-panel);background:var(--paper)}
.ds-bonus-h,.tl-bonus-h{display:block;margin-bottom:.4em;color:var(--gold);font-size:1rem}
.ds-bonus p,.tl-bonus p{margin:.35em 0;color:var(--ink);font-size:.92rem;line-height:1.7;word-break:keep-all}
/* '이용후기를 작성해야' 강조(2026-11-04 운영자) — 금빛 띠 */
.ds-hl{display:inline-block;padding:.12em .6em;border-radius:6px;font-weight:800;color:var(--on-primary,#1a1230);
  background:linear-gradient(135deg,var(--ds-gold-2),var(--ds-gold-1));box-shadow:0 0 14px var(--ds-glow-soft)}
.ds-must{font-size:1.02rem!important;line-height:1.9!important}
.ds-must .ds-hl{font-size:1.08em;margin-bottom:.2em}
.ds-bonus .btn,.tl-bonus .btn{text-decoration:none;display:inline-flex;align-items:center;gap:.45em;margin-top:var(--space-3)}
.ds-bonus .ds-caution,.tl-bonus .tl-caution{margin:var(--space-3) auto 0}
.ds-bonus .btn .ic,.tl-bonus .btn .ic{width:1.15em;height:1.15em;flex:none}
.ds-shuf-n{min-height:1.4em;margin-top:var(--space-3);color:var(--gold);font-size:.9rem}
.ds-shuf-n:empty{display:none}
.ds-deck.chosen .ds-dc:not(.picked){opacity:.18;transform:scale(.9);pointer-events:none}
.ds-deck.chosen .ds-dc.picked{transform:translateY(-14px) scale(1.4);z-index:3;filter:drop-shadow(0 0 16px var(--ds-glow));animation:none}

/* ================================================================= 운명의 카드 — 결과 */
.ds-result{max-width:820px;margin:var(--space-6) auto 0;scroll-margin-top:80px}
.ds-msg{position:relative;text-align:center;padding:var(--space-6) var(--space-5);margin-bottom:var(--space-5);
  border:1px solid var(--gold-dim);border-radius:var(--r-modal);color:var(--ds-gold-1);
  background:radial-gradient(ellipse at 50% 0%,rgba(255,206,110,.22),transparent 65%),linear-gradient(180deg,#221a3f,#120d26);
  animation:dsRise .8s var(--ease) both}
.ds-kicker{display:block;font:700 1.05rem var(--f-ko-display,var(--f-body));letter-spacing:.14em;color:var(--ds-gold-1);text-transform:uppercase;margin-bottom:var(--space-2);
  text-shadow:0 0 12px var(--ds-glow-soft)}   /* 2026-11-04 운영자 '너무 작음' — .78rem → 1.05rem
.ds-quote{font:700 clamp(1.15rem,3.6vw,1.6rem)/1.6 var(--f-ko-display);color:var(--ds-gold-1);word-break:keep-all;
  text-shadow:0 0 22px rgba(255,206,110,.35)}
.ds-quote::before,.ds-quote::after{content:"";display:block;width:64px;height:1px;margin:var(--space-3) auto;
  background:linear-gradient(90deg,transparent,var(--ds-gold-2),transparent)}
.ds-date{color:#e6dcc0;font-size:1.02rem;font-weight:600;letter-spacing:.02em}
.ds-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-panel);padding:var(--space-5);margin-bottom:var(--space-4);
  animation:dsRise .7s var(--ease) both}
.ds-box:nth-of-type(2){animation-delay:.1s}.ds-box:nth-of-type(3){animation-delay:.2s}.ds-box:nth-of-type(4){animation-delay:.3s}
@keyframes dsRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ds-h{display:flex;align-items:center;gap:.45em;margin:0 0 var(--space-3);font:700 1.08rem var(--f-ko-display);color:var(--gold)}
.ds-reading p{margin:0 0 .8em;line-height:1.85;word-break:keep-all}
.ds-reading p:last-child{margin-bottom:0}
.ds-reading b{color:var(--primary-d)}
.ds-keys{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-bottom:var(--space-4)}
.ds-key{padding:.45em 1.1em;border-radius:var(--r-pill);border:1px solid var(--gold);color:var(--gold);font-weight:600;
  background:color-mix(in srgb,var(--gold) 10%,transparent);animation:dsKey .6s var(--ease) both}
.ds-key::before{content:"#";opacity:.6;margin-right:.15em}
@keyframes dsKey{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.ds-lucky{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-2);margin:0}
.ds-lucky>div{padding:var(--space-3);border:1px solid var(--line);border-radius:var(--r-ui);text-align:center;background:var(--bg-2)}
.ds-lucky dt{font-size:.78rem;color:var(--faint);margin-bottom:.3em}
.ds-lucky dd{margin:0;font-weight:600;display:flex;align-items:center;justify-content:center;gap:.4em;word-break:keep-all}
.ds-lucky .ds-num{font:600 1.5rem var(--f-numeral);color:var(--gold)}
.ds-swatch{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 2px var(--bg-2),0 0 0 3px var(--line)}
.ds-guide{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}
.ds-g{padding:var(--space-4);border-radius:var(--r-ui);border:1px solid var(--line);border-left:3px solid var(--upright);background:var(--bg-2)}
.ds-g.avoid{border-left-color:var(--reversed)}
.ds-g-tag,.ds-f-tag{display:inline-flex;align-items:center;gap:.35em;font-size:.8rem;color:var(--upright);margin-bottom:.4em}
.ds-g.avoid .ds-g-tag{color:var(--reversed)}
.ds-g b{display:block;margin-bottom:.3em;font-family:var(--f-ko-display)}
.ds-g p,.ds-f p{margin:0;color:var(--muted);line-height:1.75;word-break:keep-all}
.ds-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.ds-f{padding:var(--space-4);border:1px solid var(--line);border-radius:var(--r-ui);background:var(--bg-2)}
.ds-f-tag{color:var(--gold);font-weight:600}
.ds-links{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;margin:var(--space-5) 0}
.ds-links .btn{display:inline-flex;align-items:center;gap:.4em}

/* 다음 운명까지 · 연속 · 도감 */
.ds-loop{display:grid;gap:var(--space-4);text-align:left}
.ds-loop>div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-panel);padding:var(--space-5)}
.ds-next{text-align:center;background:linear-gradient(180deg,#221a3f,#120d26)!important;border-color:var(--gold-dim)!important}
.ds-timer{display:block;font:600 clamp(2rem,8vw,3rem)/1.1 var(--f-numeral);letter-spacing:.08em;color:var(--ds-gold-1);
  text-shadow:0 0 18px rgba(255,206,110,.4);font-variant-numeric:tabular-nums}
.ds-next-sub{color:#cbbfa0;font-size:.88rem;margin:var(--space-2) 0 0;line-height:1.7}
.ds-streak-head{display:flex;align-items:baseline;gap:.4em;margin-bottom:var(--space-3)}
.ds-streak-head b{font:600 2.4rem/1 var(--f-numeral);color:var(--gold)}
.ds-week{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-2);list-style:none;margin:0;padding:0}
.ds-week li{display:flex;flex-direction:column;align-items:center;gap:.3em}
.ds-wd{font-size:.75rem;color:var(--faint)}
.ds-week img{width:100%;max-width:48px;aspect-ratio:300/512;object-fit:cover;border-radius:3px;box-shadow:0 0 0 1px var(--gold-dim),0 0 10px rgba(255,206,110,.25)}
.ds-week img.rev,.ds-col-grid img.rev{transform:rotate(180deg)}
.ds-empty{display:block;width:100%;max-width:48px;aspect-ratio:300/512;border:1px dashed var(--line);border-radius:3px}
.ds-week li:last-child .ds-wd{color:var(--gold);font-weight:700}
.ds-goal{margin:var(--space-3) 0 0;color:var(--muted);font-size:.9rem}
.ds-goal b{color:var(--gold)}
.ds-col-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-2)}
.ds-col-head b{color:var(--gold);font-family:var(--f-numeral);font-size:1.3em}
.ds-bar{height:8px;border-radius:var(--r-pill);background:var(--bg-2);overflow:hidden;border:1px solid var(--line)}
.ds-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ds-gold-3),var(--ds-gold-1));transition:width 1.2s var(--ease)}
.ds-col-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin-top:var(--space-3)}
.ds-col-grid[hidden]{display:none}
.ds-cell{aspect-ratio:300/512;border-radius:3px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;
  color:var(--faint);font:600 .9rem var(--f-numeral);overflow:hidden}
.ds-cell.got{border:1px solid var(--gold-dim)}
.ds-cell.got.r-legend{box-shadow:0 0 0 1px var(--ds-violet),0 0 8px rgba(201,167,255,.5)}
.ds-cell img{width:100%;height:100%;object-fit:cover}
.ds-again{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;background:none!important;border:0!important;padding:0!important}
.ds-again .btn{display:inline-flex;align-items:center;gap:.4em}
.ds-about{margin-top:var(--space-7)}
.ds-disclaimer{color:var(--faint);font-size:.88rem}

/* ================================================================= 운명 타임라인 */
.tl-hero{position:relative;aspect-ratio:1196/671;border-radius:var(--r-modal);overflow:hidden;border:1px solid var(--line);
  background:var(--tl-deep) url(/static/img/timeline/hero.webp) center/cover no-repeat;box-shadow:0 30px 70px rgba(0,0,0,.55);isolation:isolate}
.tl-hero-ring{position:absolute;left:50.4%;top:32.5%;width:41%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  box-shadow:0 0 40px 8px rgba(255,214,120,.35),inset 0 0 40px 6px rgba(255,214,120,.25);animation:tlRing 4s ease-in-out infinite;mix-blend-mode:screen}
@keyframes tlRing{0%,100%{opacity:.35}50%{opacity:1}}
.tl-hero-path i{position:absolute;width:1.4%;aspect-ratio:1;margin:-.7% 0 0 -.7%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#fff8d8,rgba(255,214,120,.6) 45%,transparent 70%);mix-blend-mode:screen;animation:tlClimb 2.4s ease-in-out infinite}
@keyframes tlClimb{0%,100%{opacity:0;transform:scale(.5)}40%{opacity:1;transform:scale(1.6)}}
.tl-hero-copy{position:absolute;left:0;right:0;bottom:0;padding:16% var(--space-5) var(--space-5);text-align:center;
  background:linear-gradient(180deg,transparent,rgba(5,12,24,.78) 45%,rgba(5,12,24,.94))}
.tl-kicker{display:block;font:600 .78rem var(--f-numeral);letter-spacing:.24em;color:var(--tl-aurora);margin-bottom:var(--space-2)}
.tl-hero-title{margin:0 0 var(--space-4);font:700 clamp(1.2rem,3.4vw,1.75rem)/1.4 var(--f-ko-display);color:var(--ds-gold-1);
  text-shadow:0 0 22px rgba(255,206,110,.45)}
.tl-go{display:inline-flex;align-items:center;gap:.5em;padding:.85em 2em;font-size:1.05rem}
.tl-go .ic,.tl-h .ic,.tl-sum-list .ic,.tl-peak-tag .ic,.tl-dtag .ic,.tl-foot .ic,.tl-pick-foot .ic{width:1.15em;height:1.15em;flex:0 0 auto}
.tl-hero-note{display:block;margin-top:var(--space-2);color:#b9d4cc;font-size:.82rem}

.tl-panel{max-width:860px;margin:var(--space-5) auto;text-align:center}
.tl-panel[hidden],.tl-result[hidden]{display:none}
.tl-pick-q{color:var(--muted);margin-bottom:var(--space-4)}
.tl-pick-q b{color:var(--gold);font-size:1.2em}
.tl-pick-q.is-done b{color:var(--tl-aurora)}
.tl-pick-n{margin-left:.5em;font-family:var(--f-numeral);color:var(--faint)}
.tl-slots{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--space-2);list-style:none;padding:0;margin:0 0 var(--space-5)}
.tl-slot{display:flex;flex-direction:column;align-items:center;gap:.25em}
.tl-slot-card{display:block;width:100%;max-width:70px;aspect-ratio:3/5;border:1px dashed var(--line);border-radius:5px;overflow:hidden;
  perspective:600px;transition:box-shadow .3s}
.tl-slot-card img{display:block;width:100%;height:100%;object-fit:cover}
.tl-slot-card img.rev{transform:rotate(180deg)}
.tl-slot.is-now .tl-slot-card{border:1px solid var(--tl-aurora);box-shadow:0 0 0 3px rgba(86,224,168,.18),0 0 18px rgba(86,224,168,.4);animation:tlNow 1.6s ease-in-out infinite}
@keyframes tlNow{50%{box-shadow:0 0 0 5px rgba(86,224,168,.1),0 0 28px rgba(86,224,168,.6)}}
.tl-slot.is-filled .tl-slot-card{border:1px solid var(--gold-dim);animation:tlIn .45s var(--ease)}
@keyframes tlIn{from{transform:translateY(-14px) scale(.8);opacity:0}to{transform:none;opacity:1}}
.tl-slot.is-flip .tl-slot-card{animation:tlFlip .6s var(--ease);box-shadow:0 0 0 1px var(--ds-gold-2),0 0 20px var(--ds-glow)}
@keyframes tlFlip{0%{transform:rotateY(90deg)}100%{transform:none}}
.tl-slot b{font-size:.85rem;color:var(--ink)}
.tl-slot small{font-size:.68rem;color:var(--faint);word-break:keep-all;line-height:1.3}
.tl-deck{display:grid;grid-template-columns:repeat(13,1fr);gap:6px;max-width:760px;margin:0 auto}
.tl-dc{padding:0;border:0;background:none;cursor:pointer;aspect-ratio:3/5;border-radius:4px;transition:transform .2s var(--ease),opacity .35s}
.tl-dc img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.tl-dc:hover,.tl-dc:focus-visible{transform:translateY(-7px) scale(1.08);filter:drop-shadow(0 0 9px rgba(86,224,168,.7));outline:none}
.tl-deck.dealt .tl-dc{animation:dsDeal .5s var(--ease) both;animation-delay:var(--d)}
/* 고른 카드 — 흐리게 + 어느 자리인지 표시. 다시 누르면 그 자리만 비운다(2026-11-04 운영자) */
.tl-dc{position:relative}
.tl-dc.taken{opacity:.45;transform:scale(.86);filter:grayscale(.4)}
.tl-dc.taken::after{content:attr(data-age);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  padding:.1em .35em;border-radius:var(--r-pill);background:rgba(10,6,22,.85);border:1px solid var(--gold-dim);
  color:var(--gold);font-size:.62rem;font-weight:700;white-space:nowrap;pointer-events:none}
.tl-dc.taken:hover,.tl-dc.taken:focus-visible{opacity:.8;transform:scale(.92);filter:drop-shadow(0 0 8px rgba(255,107,107,.6))}
.tl-slot.is-filled{cursor:pointer}
.tl-pick-tip{margin:0 0 var(--space-3);text-align:center;color:var(--faint);font-size:.82rem}
.tl-pick-foot{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-5)}
.tl-pick-foot .btn{display:inline-flex;align-items:center;gap:.4em}

.tl-result{max-width:900px;margin:var(--space-6) auto 0;scroll-margin-top:80px}
.tl-sum{position:relative;text-align:center;padding:var(--space-6) var(--space-5);margin-bottom:var(--space-4);border-radius:var(--r-modal);
  border:1px solid var(--gold-dim);overflow:hidden;color:var(--ds-gold-1);
  background:linear-gradient(180deg,rgba(5,12,24,.55),rgba(5,12,24,.92)),url(/static/img/timeline/hero.webp) center 30%/cover;
  animation:dsRise .8s var(--ease) both}
.tl-shape{margin:0;font:700 clamp(1.5rem,5vw,2.3rem)/1.3 var(--f-ko-display);color:var(--ds-gold-1);text-shadow:0 0 26px rgba(255,206,110,.5)}
.tl-shape-desc{max-width:560px;margin:var(--space-3) auto var(--space-4);color:#d7e6e0;line-height:1.75;word-break:keep-all}
.tl-sum-list{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:center;list-style:none;padding:0;margin:0}
.tl-sum-list li{display:inline-flex;align-items:center;gap:.4em;padding:.4em .9em;border-radius:var(--r-pill);
  background:rgba(5,12,24,.6);border:1px solid rgba(86,224,168,.35);color:#cfe7df;font-size:.88rem}
.tl-sum-list b{color:var(--ds-gold-1)}
.tl-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-panel);padding:var(--space-5);margin-bottom:var(--space-4)}
.tl-box-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-2);margin-bottom:var(--space-3)}
.tl-box-head .tl-h{margin:0}
.tl-h{display:flex;align-items:center;gap:.45em;margin:0 0 var(--space-3);font:700 1.08rem var(--f-ko-display);color:var(--gold)}
.tl-now{display:inline-flex;align-items:center;gap:.4em;font-size:.88rem;color:var(--muted)}
.tl-now select{padding:.35em .6em;border-radius:var(--r-ui);border:1px solid var(--line);background:var(--bg-2);color:var(--ink)}
.tl-chart-box{background:linear-gradient(180deg,#0c1d2c,#0a1220 70%,#0d0b1a)!important;border-color:rgba(86,224,168,.35)!important}
.tl-chart-box .tl-h{color:var(--ds-gold-1)}
.tl-chart-box .tl-now{color:#b9d4cc}
.tl-chart{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tl-svg{display:block;width:100%;min-width:520px;height:auto}
.tl-star{fill:#fff;opacity:.5;animation:tlTw 3s ease-in-out infinite}
@keyframes tlTw{50%{opacity:.1}}
.tl-grid{stroke:rgba(86,224,168,.12);stroke-dasharray:2 6}
.tl-area{opacity:0;transition:opacity 1.4s .8s}
.tl-line,.tl-line-glow{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.tl-line{stroke-width:3.4}
.tl-line-glow{stroke-width:11;opacity:.6}
.tl-line-glow{stroke-dasharray:2000;stroke-dashoffset:2000}
.drawn .tl-line{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.3,1)}
.drawn .tl-line-glow{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.3,1)}
.drawn .tl-area{opacity:1}
.tl-spark{fill:#fff6d0;opacity:0;animation:tlTw 1.8s ease-in-out infinite}
.drawn .tl-spark{opacity:.9}
.tl-pt{opacity:0;transform-box:fill-box}
.drawn .tl-pt{opacity:1;transition:opacity .5s calc(var(--i) * .3s + .5s)}
.tl-pt-dot{stroke:#fff8dc;stroke-width:2}
.tl-pt-halo{opacity:.35;animation:tlHalo 2.2s ease-in-out infinite}
@keyframes tlHalo{50%{opacity:.08}}
.tl-pt.ph-peak .tl-pt-dot,.tl-pt.ph-peak .tl-pt-halo{fill:#ffd76a}
.tl-pt.ph-rise .tl-pt-dot,.tl-pt.ph-rise .tl-pt-halo{fill:var(--tl-aurora)}
.tl-pt.ph-change .tl-pt-dot,.tl-pt.ph-change .tl-pt-halo{fill:var(--ds-violet)}
.tl-pt.ph-steady .tl-pt-dot,.tl-pt.ph-steady .tl-pt-halo{fill:#8fb8ff}
.tl-pt.ph-rest .tl-pt-dot,.tl-pt.ph-rest .tl-pt-halo{fill:#8c84a6}
.tl-pt.ph-peak .tl-pt-halo{r:22}
.tl-pt-age{fill:#e8f2ee;font:600 15px var(--f-body);text-anchor:middle}
.tl-pt.is-now .tl-pt-age{fill:#ffd76a}
.tl-pt-score{fill:#b9d4cc;font:500 11px var(--f-body);text-anchor:middle}
.tl-pt-card{filter:drop-shadow(0 0 4px rgba(255,214,120,.45))}
.tl-dom rect{stroke:none}
.tl-dom text{font:700 10px var(--f-body);text-anchor:middle;fill:#1a1426}
.tl-dom.d-money rect{fill:#ffd76a}.tl-dom.d-work rect{fill:var(--tl-aurora)}.tl-dom.d-love rect{fill:#ff9fc8}
.tl-nowpin line{stroke:#ffd76a;stroke-width:1.4;stroke-dasharray:4 4}
.tl-nowpin rect{fill:#ffd76a}
.tl-nowpin text{fill:#1a1426;font:700 11px var(--f-body);text-anchor:middle}
.tl-legend{display:flex;flex-wrap:wrap;gap:var(--space-3);justify-content:center;list-style:none;padding:0;margin:var(--space-3) 0 0;color:#cfe7df;font-size:.82rem}
.tl-legend li::before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:.35em;vertical-align:-1px}
.tl-legend .ph-peak::before{background:#ffd76a}.tl-legend .ph-rise::before{background:var(--tl-aurora)}
.tl-legend .ph-change::before{background:var(--ds-violet)}.tl-legend .ph-steady::before{background:#8fb8ff}.tl-legend .ph-rest::before{background:#8c84a6}

.tl-peaks{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3)}
.tl-peak{padding:var(--space-4);border-radius:var(--r-ui);border:1px solid var(--line);border-top:3px solid var(--gold);background:var(--bg-2)}
.tl-peak.d-work{border-top-color:var(--tl-aurora)}.tl-peak.d-love{border-top-color:var(--el-water)}
.tl-peak-tag{display:inline-flex;align-items:center;gap:.35em;font-weight:600;color:var(--gold);font-size:.9rem}
.tl-peak.d-work .tl-peak-tag{color:var(--tl-aurora)}.tl-peak.d-love .tl-peak-tag{color:var(--el-water)}
.tl-peak-age{display:block;margin:.2em 0;font:700 1.8rem var(--f-ko-display);color:var(--ink)}
.tl-peak-card{display:flex;align-items:center;gap:.45em;font-size:.85rem;color:var(--muted);margin-bottom:.5em}
.tl-peak-card img{width:24px;height:auto;border-radius:2px}
.tl-peak-card img.rev,.tl-year img.rev,.tl-dec>img.rev{transform:rotate(180deg)}
.tl-peak p{margin:0;color:var(--muted);line-height:1.7;font-size:.92rem;word-break:keep-all}
.tl-years{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--space-2)}
.tl-year{display:flex;flex-direction:column;align-items:center;gap:.35em;padding:var(--space-3) var(--space-2);text-align:center;
  border:1px solid var(--line);border-radius:var(--r-ui);background:var(--bg-2)}
.tl-year.is-now{border-color:var(--gold);box-shadow:0 0 0 3px var(--glow-ring),0 0 22px rgba(255,206,110,.25)}
.tl-year-y{font:600 1.15rem var(--f-numeral);color:var(--gold)}
.tl-year-y em{font-style:normal;font:600 .66rem var(--f-body);margin-left:.4em;padding:.1em .5em;border-radius:var(--r-pill);background:var(--gold);color:var(--on-primary);vertical-align:2px}
.tl-year img{width:56px;height:auto;border-radius:3px}
.tl-year b{font-size:.88rem}
.tl-year-key{font-size:.78rem;color:var(--tl-aurora)}
.tl-year p{margin:0;font-size:.8rem;color:var(--muted);line-height:1.55;word-break:keep-all}
.tl-meter{display:block;width:80%;height:5px;border-radius:var(--r-pill);background:var(--paper);overflow:hidden}
.tl-meter i{display:block;height:100%;background:linear-gradient(90deg,var(--tl-teal),var(--ds-gold-2))}
.tl-sub{color:var(--faint);font-size:.85rem;margin:var(--space-3) 0 0}
.tl-decades{list-style:none;padding:0;margin:0;position:relative}
.tl-decades::before{content:"";position:absolute;left:38px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--ds-gold-2),var(--tl-aurora),var(--ds-violet));opacity:.5}
.tl-dec{position:relative;display:grid;grid-template-columns:78px 64px 1fr;gap:var(--space-3);align-items:start;padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.tl-dec:last-child{border-bottom:0}
.tl-dec.is-now{background:color-mix(in srgb,var(--gold) 7%,transparent);border-radius:var(--r-ui)}
.tl-dec-side{position:relative;z-index:1;text-align:center;padding-top:.3em}
.tl-dec-side b{display:inline-block;padding:.25em .6em;border-radius:var(--r-pill);background:var(--bg-2);border:1px solid var(--gold-dim);color:var(--gold);font-size:.9rem}
.tl-dec-side small{display:block;margin-top:.35em;font-size:.7rem;color:var(--faint);word-break:keep-all;line-height:1.35}
.tl-dec>img{width:64px;height:auto;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.4)}
.tl-dec-top{display:flex;flex-wrap:wrap;align-items:center;gap:.4em;margin-bottom:.35em}
.tl-ph{padding:.12em .6em;border-radius:var(--r-pill);font-size:.75rem;font-weight:700;color:#1a1426;background:#8fb8ff}
.ph-peak .tl-ph{background:#ffd76a}.ph-rise .tl-ph{background:var(--tl-aurora)}.ph-change .tl-ph{background:var(--ds-violet)}.ph-rest .tl-ph{background:#8c84a6}
.tl-dec-card{font-size:.82rem;color:var(--muted)}
.tl-dtag{display:inline-flex;align-items:center;gap:.25em;font-size:.72rem;padding:.1em .5em;border-radius:var(--r-pill);border:1px solid var(--gold);color:var(--gold)}
.tl-dtag.d-work{border-color:var(--tl-aurora);color:var(--tl-aurora)}.tl-dtag.d-love{border-color:var(--el-water);color:var(--el-water)}
.tl-dec-title{display:block;font-family:var(--f-ko-display);margin-bottom:.25em}
.tl-dec-body p{margin:0 0 .35em;color:var(--muted);line-height:1.75;word-break:keep-all}
.tl-dec-ph{font-size:.85rem;color:var(--faint)!important}
.tl-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-2);margin:var(--space-5) 0}
.tl-foot .btn{display:inline-flex;align-items:center;gap:.4em}
.tl-foot .tl-sub{width:100%;text-align:center;margin:0}
.tl-about{margin-top:var(--space-7)}

/* ================================================================= 폰 */
@media (max-width:780px){
  .ds-guide{grid-template-columns:1fr}
  .ds-fields{grid-template-columns:1fr}
  .tl-peaks{grid-template-columns:1fr}
  .tl-years{grid-template-columns:repeat(5,minmax(110px,1fr));overflow-x:auto;padding-bottom:var(--space-2)}
}
@media (max-width:640px){
  .ds-lucky{grid-template-columns:1fr 1fr}
  .ds-deck,.tl-deck{grid-template-columns:repeat(10,1fr);gap:4px}
  .ds-box,.tl-box,.ds-loop>div{padding:var(--space-4)}
  .ds-msg{padding:var(--space-5) var(--space-4)}
  .tl-hero{aspect-ratio:auto;padding-top:56.1%;background-size:100% auto;background-position:top center}
  .tl-hero-ring,.tl-hero-path{display:none}
  .tl-hero-copy{position:relative;padding:var(--space-4);background:linear-gradient(180deg,rgba(5,12,24,.9),rgba(5,12,24,.98))}
  .tl-slots{gap:4px}
  .tl-slot small{display:none}
  .tl-dec{grid-template-columns:56px 52px 1fr;gap:var(--space-2)}
  .tl-dec>img{width:52px}
  .tl-decades::before{left:27px}
}

/* ================================================================= 동작 줄이기 */
@media (prefers-reduced-motion:reduce){
  .ds-app *,.tl-app *{animation:none!important;transition-duration:.01s!important}
  .tl-line,.tl-line-glow{stroke-dasharray:none;stroke-dashoffset:0}
  .tl-pt,.tl-area{opacity:1}
}