/* ════════════════════════════════════════════════════════════════
   매일열장 5기 Wrapped
   한글 타이포(Pretendard + 나눔명조) × Spotify Wrapped 대담한 그래디언트
   ════════════════════════════════════════════════════════════════ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700;800&display=swap');

:root{
  --sans:'Pretendard','Pretendard Variable',-apple-system,system-ui,sans-serif;
  --kserif:'Nanum Myeongjo','Pretendard',serif;   /* 한글 세리프 — 인용/문학 */
  --display:'Pretendard','Pretendard Variable',-apple-system,sans-serif;  /* Spotify Wrapped식 굵은 그로테스크 — 거대 타이틀/숫자(weight 900, 단색) */
  --ink:#fff;
  --accent:#ff3d9a;
  --r:28px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;max-width:100%;overflow-x:hidden}
body{
  font-family:var(--sans);
  background:#08070c;color:#fff;
  overflow:hidden;
  overscroll-behavior:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ════════ 전역 분위기 레이어 (그레인 + 비네트) ════════ */
.atmos{position:fixed;inset:0;z-index:60;pointer-events:none}
.atmos::before{ /* 필름 그레인 */
  content:"";position:absolute;inset:-50%;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
.atmos::after{ /* 비네트 */
  content:"";position:absolute;inset:0;
  background:radial-gradient(130% 100% at 50% 50%,transparent 55%,rgba(0,0,0,.42) 100%);
}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-5%)}60%{transform:translate(-3%,3%)}80%{transform:translate(5%,2%)}100%{transform:translate(0,0)}}

/* ════════ 트랜스폼 기반 스토리 덱 (네이티브 스크롤 비의존 → 모든 웹뷰 호환) ════════ */
.deck{
  position:relative;
  height:100vh;height:100svh;height:100dvh;   /* 100vh 폴백 필수 (구형 카톡 인앱 등) */
  overflow:hidden;
}
.track{
  height:100%;
  transition:transform .55s var(--ease);
  will-change:transform;
}
.card{
  position:relative;
  height:100%;
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(30px,7.5vw,64px);
  overflow:hidden;
  isolation:isolate;
  background-color:#08070c;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
}
.card__inner{position:relative;z-index:4;width:100%;max-width:580px;margin:0 auto}

/* ── Spotify Wrapped 배경 이미지 (1080×1920) ── */
.c-intro {background-image:url("/wrapped/5/bg/bg14.png?v=sf95523e")}  /* dark · purple arcs */
.c-days  {background-image:url("/wrapped/5/bg/bg7.png?v=sf95523e")}   /* light · yellow pucks */
.c-pages {background-image:url("/wrapped/5/bg/bg8.png?v=sf95523e")}   /* dark · green pucks */
.c-streak{background-image:url("/wrapped/5/bg/bg16.png?v=sf95523e")}  /* light · red arcs */
.c-books {background-image:url("/wrapped/5/bg/bg10.png?v=sf95523e")}  /* dark · white dots */
.c-quote {background-image:url("/wrapped/5/bg/bg12.png?v=sf95523e")}  /* light · minimal */
.c-rank  {background-image:url("/wrapped/5/bg/bg6.png?v=sf95523e")}   /* dark · purple pucks */
.c-outro {background-image:url("/wrapped/5/bg/bg17.png?v=sf95523e")}  /* dark · b&w stripes */

/* ── 가독성 스크림 (다크 카드: 어둡게, 라이트 카드: 밝게) ── */
.card::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(140% 90% at 50% 100%, rgba(0,0,0,.62), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 60%, rgba(0,0,0,.5) 100%);
}
.card.light::before{
  background:
    radial-gradient(140% 90% at 50% 100%, rgba(244,241,232,.7), transparent 72%),
    linear-gradient(180deg, rgba(244,241,232,.34) 0%, rgba(244,241,232,0) 24%, rgba(244,241,232,0) 58%, rgba(244,241,232,.6) 100%);
}
.card::after{display:none}

/* 오브 제거 — 배경 그래픽이 분위기를 담당 */
.orb{display:none}

/* ── 카드별 텍스트(--ink) · 악센트(--accent) — 배경 주색과 절대 안 겹치게 ── */
.c-intro {--ink:#ffffff;--accent:#ff4da6}   /* 퍼플 배경 → 핫핑크 악센트 */
.c-days  {--ink:#15110a;--accent:#1d4ed8}   /* 노란 배경 → 일렉트릭 블루 (노랑 금지) */
.c-pages {--ink:#ffffff;--accent:#ff5ca8}   /* 그린 배경 → 마젠타 (그린 금지) */
.c-streak{--ink:#1a1006;--accent:#1d4ed8}   /* 레드 배경 → 블루 (레드/오렌지 금지) */
.c-books {--ink:#ffffff;--accent:#a3e635}   /* 중립 다크 → 라임 */
.c-quote {--ink:#161009;--accent:#e11d48}   /* 크림 → 크림슨 */
.c-rank  {--ink:#ffffff;--accent:#ffd23f}   /* 퍼플 배경 → 골드 (퍼플 금지) */
.c-outro {--ink:#ffffff;--accent:#ffce5b}   /* 흑백 → 골드 */
.c-pick  {--ink:#ffffff;--accent:#ff3d9a}

/* ════════ 타이포 ════════ */
/* 작은 상단 캡션 (Spotify식: 평범한 작은 텍스트, 칩 아님) */
.eyebrow{
  font-weight:800;font-size:clamp(13px,3.6vw,16px);letter-spacing:.01em;
  margin-bottom:14px;color:var(--ink);
  display:inline-flex;align-items:center;gap:8px;
}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px 2px var(--accent);animation:pulse 2.2s ease-in-out infinite;flex:0 0 auto}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.6)}}

.lead{font-weight:800;font-size:clamp(23px,6.2vw,38px);line-height:1.16;letter-spacing:-.02em}
.kicker{font-weight:700;font-size:clamp(17px,4.6vw,22px);line-height:1.5;opacity:.92}

/* 거대 숫자 (Pretendard Black — 극단적으로 크게, 단색, Spotify Wrapped식) */
.huge{
  font-family:var(--display);font-weight:900;color:var(--ink);
  font-size:clamp(124px,47vw,330px);line-height:.8;
  letter-spacing:-.03em;
  display:flex;align-items:flex-end;gap:.04em;flex-wrap:nowrap;white-space:nowrap;max-width:100%;
  font-variant-numeric:tabular-nums;
  margin:6px 0 4px;
}
.huge .n{color:var(--ink);display:inline-block}
.huge .unit{
  font-family:var(--display);font-weight:900;color:var(--accent);
  font-size:clamp(26px,7.4vw,58px);padding-bottom:.28em;letter-spacing:-.01em;
}
.sub{margin-top:22px;font-weight:600;font-size:clamp(15px,4vw,19px);line-height:1.55;opacity:.92}
.sub b{font-weight:800}
.pill{
  display:inline-flex;align-items:center;gap:8px;margin-top:22px;
  padding:11px 19px;border-radius:999px;font-weight:800;font-size:clamp(13px,3.6vw,16px);
  background:rgba(255,255,255,.16);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.3);
}
.ranktag{font-weight:900;color:var(--accent)}

/* ════════ 인트로 ════════ */
.c-intro .brandmark{font-weight:700;font-size:clamp(14px,3.8vw,17px);letter-spacing:.12em;opacity:.92;display:flex;align-items:center;gap:9px}
.c-intro .brandmark .bk{font-family:var(--kserif);font-weight:800;letter-spacing:0;font-size:1.18em}
.c-intro .title{
  font-family:var(--display);font-weight:900;color:#fff;
  font-size:clamp(52px,16vw,108px);line-height:1.04;letter-spacing:-.03em;margin:16px 0 4px;
}
.c-intro .title em{font-style:normal;color:var(--accent)}
/* Spotify 시그니처 — 하이라이트 박스(흰 블록·검정 글자) */
.c-intro .title .boxed{
  display:inline-block;background:#fff;color:#0c0c10;-webkit-text-fill-color:#0c0c10;
  padding:.02em .16em;border-radius:7px;text-shadow:none;line-height:1;
}
.c-intro .who{
  font-family:var(--display);font-weight:900;color:var(--accent);
  font-size:clamp(66px,24vw,168px);line-height:.88;margin-top:10px;letter-spacing:-.03em;
}
.c-intro .yr{font-weight:600;opacity:.88;margin-top:22px;font-size:clamp(15px,4vw,18px);letter-spacing:.04em}

/* ════════ 책 캐러셀 ════════ */
.shelf{margin:26px -8px 0;position:relative}
.shelf-track{
  display:flex;gap:18px;overflow-x:auto;padding:14px 8px 22px;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-padding-left:8px;
}
.shelf-track::-webkit-scrollbar{display:none}
.bookcard{
  flex:0 0 auto;width:138px;scroll-snap-align:start;position:relative;
}
.shelf-track::after{content:"";flex:0 0 8px}  /* 마지막 책 뒤 여백 — 잘림 방지 */
.bookcard .frame{
  position:relative;width:138px;height:204px;border-radius:6px 10px 10px 6px;overflow:hidden;
  box-shadow:0 18px 40px -12px rgba(0,0,0,.7), inset 2px 0 0 rgba(255,255,255,.18), inset -1px 0 6px rgba(0,0,0,.4);
  background:linear-gradient(135deg,var(--a),var(--c));
}
.bookcard .frame::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:linear-gradient(90deg,rgba(0,0,0,.35),transparent);z-index:3}
.bookcard img{width:100%;height:100%;object-fit:cover;display:block}
.bookcard .fallback{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;
  padding:14px 12px;gap:6px;background:linear-gradient(150deg,var(--a),var(--c) 80%);
}
.bookcard .fallback .ft{font-family:var(--kserif);font-weight:800;font-size:14px;line-height:1.25;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.bookcard .fallback .fa{font-weight:600;font-size:11px;opacity:.75}
.bookcard .check{
  position:absolute;top:8px;right:8px;z-index:4;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(135deg,#ffd23f,#ff8a1e);color:#3a1500;font-size:15px;font-weight:900;
  display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.45);
}
.bookcard .meta{margin-top:11px;padding:0 2px}
.bookcard .meta .mt{font-weight:800;font-size:12.5px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.bookcard .meta .ma{font-weight:600;font-size:11px;opacity:.62;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shelf-hint{font-weight:700;font-size:12.5px;opacity:.55;margin-top:6px;display:flex;align-items:center;gap:6px}

/* ════════ 인용 ════════ */
.c-quote .card__inner{max-width:620px}
.c-quote .mark{
  font-family:var(--kserif);font-weight:800;
  font-size:clamp(110px,28vw,180px);line-height:.8;
  background:linear-gradient(120deg,rgba(255,210,120,.92),rgba(255,140,90,.5));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  height:.5em;margin-bottom:14px;
}
.quote{
  font-family:var(--kserif);font-weight:800;
  font-size:clamp(21px,5.6vw,33px);line-height:1.55;letter-spacing:-.01em;
  max-height:46vh;overflow-y:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  -webkit-mask:linear-gradient(180deg,#000 90%,transparent);
}
.quote::-webkit-scrollbar{display:none}
.quote.long{font-size:clamp(16px,4vw,22px);line-height:1.6;white-space:pre-line}
.quote .hl{background:linear-gradient(transparent 60%,rgba(255,205,90,.32) 0);padding:0 .04em}
.qmeta{margin-top:28px;font-weight:600;opacity:.82;font-size:15px}
.qmeta b{font-family:var(--kserif);font-weight:800;opacity:1}

/* ════════ 랭킹 / 명예의 전당 ════════ */
.ranks{display:flex;flex-direction:column;gap:15px;margin-top:14px}
.rankgroup .rh{font-weight:800;font-size:12px;letter-spacing:.04em;opacity:.78;margin-bottom:7px;display:flex;gap:8px;align-items:center}
.rankrow{display:flex;align-items:center;gap:11px;position:relative;padding:5px 2px;margin-bottom:2px}
.rankrow .pos{
  font-family:var(--display);font-weight:900;
  font-size:22px;width:25px;text-align:center;flex:0 0 auto;font-variant-numeric:tabular-nums;
}
.rankrow .pos.p1{color:#ffd23f;text-shadow:0 0 18px rgba(255,210,63,.5)}
.rankrow .pos.p2{color:#dbe6ff}
.rankrow .pos.p3{color:#ffb38a}
.rankrow .nm{font-weight:800;font-size:15px;flex:0 0 auto;min-width:50px}
.rankrow .track2{flex:1 1 auto;height:11px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;position:relative;box-shadow:inset 0 1px 3px rgba(0,0,0,.35)}
.rankrow .fill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:999px;transition:width 1s var(--ease);transition-delay:var(--d,0s)}
.rankrow.p1 .fill{background:linear-gradient(90deg,#ffd23f,#ff8a1e);color:#ffb020}
.rankrow.p2 .fill{background:linear-gradient(90deg,#eaf1ff,#9bb8ff);color:#b9c8ff}
.rankrow.p3 .fill{background:linear-gradient(90deg,#ffc09a,#ff7a59);color:#ff8f66}
.rankrow .vl{font-family:var(--display);font-weight:900;font-size:15px;opacity:.96;flex:0 0 auto;min-width:48px;text-align:right;font-variant-numeric:tabular-nums}
.rankrow.me .nm{position:relative}
.rankrow.me .nm::after{content:"YOU";font-family:var(--sans);font-weight:900;font-size:9px;letter-spacing:.08em;margin-left:6px;padding:2px 5px;border-radius:5px;background:#fff;color:#111;vertical-align:middle}

/* ════════ 아웃트로 ════════ */
.c-outro .big{font-family:var(--display);font-weight:900;color:#fff;font-size:clamp(42px,12.5vw,76px);line-height:1.02;letter-spacing:-.02em}
.c-outro .big em{font-style:normal;color:var(--accent)}
.recap{display:flex;gap:9px;margin:26px 0 4px}
.recap .rc{flex:1 1 0;min-width:0;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:14px 6px;backdrop-filter:blur(6px);text-align:center;overflow:hidden}
.recap .rc b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(19px,6.2vw,30px);line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.recap .rc span{font-weight:700;font-size:12px;opacity:.74;margin-top:5px;display:block}
.actions{display:flex;flex-direction:column;gap:12px;margin-top:30px}
.btn{
  appearance:none;border:0;cursor:pointer;font-family:var(--sans);
  font-weight:800;font-size:17px;padding:18px 22px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .15s var(--ease),filter .2s,box-shadow .2s;text-decoration:none;
}
.btn:active{transform:scale(.97)}
.btn--primary{background:#fff;color:#1a0c08;box-shadow:0 10px 30px -8px rgba(255,255,255,.4)}
.btn--primary:hover{box-shadow:0 14px 40px -8px rgba(255,255,255,.55)}
.btn--ghost{background:rgba(255,255,255,.13);color:#fff;border:1px solid rgba(255,255,255,.3)}
.btn--ghost:hover{background:rgba(255,255,255,.22)}
.brandfoot{margin-top:26px;font-weight:600;font-size:12.5px;opacity:.6;display:flex;align-items:center;gap:7px;justify-content:center}
.brandfoot .bk{font-family:var(--kserif);font-weight:800}

.toast{position:fixed;left:50%;bottom:42px;transform:translateX(-50%) translateY(20px);z-index:80;background:#fff;color:#111;font-weight:800;font-size:14px;padding:13px 22px;border-radius:999px;opacity:0;transition:.35s var(--ease);pointer-events:none;box-shadow:0 14px 40px rgba(0,0,0,.4)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ════════ 스토리형 진행 바 (인스타/Spotify식) ════════ */
.story{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;gap:6px;padding:14px clamp(14px,4vw,22px);padding-top:max(14px,env(safe-area-inset-top))}
.story i{flex:1 1 0;height:4px;border-radius:999px;background:rgba(255,255,255,.3);overflow:hidden;cursor:pointer;position:relative}
.story i::after{content:"";position:absolute;inset:0;width:0;background:#fff;border-radius:999px;transition:width .5s var(--ease)}
.story i.done::after{width:100%}
.story i.on::after{width:100%;box-shadow:0 0 12px 1px var(--prog,rgba(255,255,255,.75))}
/* 라이트(크림) 카드 위에서는 어두운 세그먼트로 — 흰 바가 안 묻히게 */
.story.on-light i{background:rgba(0,0,0,.16)}
.story.on-light i::after{background:#15110a}

/* 하단 힌트 */
.hint{position:absolute;left:0;right:0;bottom:max(26px,env(safe-area-inset-bottom));z-index:5;text-align:center;font-weight:700;font-size:13px;opacity:.7;animation:bob 1.9s ease-in-out infinite;letter-spacing:.02em}
@keyframes bob{0%,100%{transform:translateY(0);opacity:.45}50%{transform:translateY(8px);opacity:.85}}

/* ════════ 진입 애니메이션 ════════ */
.reveal{opacity:0;transform:translateY(40px);filter:blur(6px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.is-active .reveal{opacity:1;transform:none;filter:none}
.is-active .reveal:nth-child(1){transition-delay:.06s}
.is-active .reveal:nth-child(2){transition-delay:.16s}
.is-active .reveal:nth-child(3){transition-delay:.26s}
.is-active .reveal:nth-child(4){transition-delay:.36s}
.is-active .reveal:nth-child(5){transition-delay:.46s}
.is-active .reveal:nth-child(6){transition-delay:.56s}
.is-active .reveal:nth-child(7){transition-delay:.66s}

@media (prefers-reduced-motion:reduce){
  .reveal{transition:none;opacity:1;transform:none;filter:none}
  .orb,.hint,.card::before,.card::after,.eyebrow .dot{animation:none}
  .track{transition:none}
}

/* ════════ 멤버 선택(랜딩) ════════ */
.pick{
  position:relative;isolation:isolate;width:100%;max-width:100%;
  height:100vh;height:100svh;height:100dvh;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;
  padding:clamp(28px,8vw,60px) clamp(22px,6vw,52px) clamp(40px,10vw,72px);
  scrollbar-width:none;
}
.pick::-webkit-scrollbar{display:none}
.pick__inner{position:relative;z-index:4;width:100%;max-width:680px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;justify-content:center}
.pick .overline{font-weight:900;font-size:clamp(13px,3.6vw,15px);letter-spacing:.34em;opacity:.7;margin-bottom:10px}
.pick .brandmark{font-weight:700;font-size:clamp(13px,3.6vw,15px);letter-spacing:.1em;opacity:.85;display:flex;align-items:center;gap:8px;margin-bottom:16px}
.pick .brandmark .bk{font-family:var(--kserif);font-weight:800;letter-spacing:0;font-size:1.15em}
.pick h1{font-family:var(--display);font-weight:900;color:#fff;font-size:clamp(44px,13.5vw,84px);line-height:1.02;letter-spacing:-.02em}
.pick h1 em{font-style:normal;color:var(--accent)}
.pick .desc{margin-top:18px;font-weight:600;font-size:clamp(15px,4vw,18px);opacity:.84;line-height:1.6;max-width:30em}
.stats3{display:flex;gap:10px;margin:28px 0 30px}
.stat{flex:1 1 0;min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:16px 12px;backdrop-filter:blur(6px);overflow:hidden}
.stat b{display:block;font-family:var(--display);font-weight:900;font-size:clamp(22px,7vw,36px);line-height:1;letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:#fff;white-space:nowrap}
.stat span{font-weight:700;font-size:12px;opacity:.7;margin-top:6px;display:block}
.who-label{font-weight:800;font-size:13px;letter-spacing:.06em;opacity:.8;margin-bottom:14px}

.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:600px){.grid{grid-template-columns:repeat(3,1fr)}}
.mcard{
  position:relative;overflow:hidden;text-decoration:none;color:#fff;
  display:flex;flex-direction:column;gap:0;padding:16px;border-radius:16px;min-height:128px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  transition:transform .25s var(--ease),background .25s,border-color .25s;
}
.mcard:hover,.mcard:focus-visible{transform:translateY(-3px);background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);outline:none}
.mcard:active{transform:scale(.98)}
.mcard .av{
  position:relative;z-index:1;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:900;font-size:16px;letter-spacing:-.02em;color:#0c0c10;
  background:var(--ac,#ff3d9a);
}
.mcard .crown{position:absolute;top:12px;right:14px;z-index:1;font-size:17px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.mcard .mn{position:relative;z-index:1;margin-top:auto;padding-top:14px;font-weight:800;font-size:17px;letter-spacing:-.01em}
.mcard .ms{position:relative;z-index:1;margin-top:4px;font-weight:700;font-size:12px;opacity:.78;font-variant-numeric:tabular-nums}
.mcard .go{position:absolute;right:15px;bottom:15px;z-index:1;font-weight:800;font-size:17px;opacity:.5;transition:opacity .3s,transform .3s}
.mcard:hover .go{opacity:1;transform:translateX(3px)}

/* 그리드 카드 스태거 등장 */
.pick.is-active .mcard{animation:cardIn .6s var(--ease) both;animation-delay:calc(var(--idx,0) * 0.045s + 0.35s)}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:none}}
.pick-foot{margin-top:30px;text-align:center;font-weight:600;font-size:12px;opacity:.5}
.pick-foot .bk{font-family:var(--kserif);font-weight:800}
@media (prefers-reduced-motion:reduce){.pick.is-active .mcard{animation:none}}

/* 랜딩 reveal */
.pick .reveal{opacity:0;transform:translateY(30px);filter:blur(5px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}
.pick.is-active .reveal{opacity:1;transform:none;filter:none}
.pick.is-active .reveal:nth-child(1){transition-delay:.04s}
.pick.is-active .reveal:nth-child(2){transition-delay:.12s}
.pick.is-active .reveal:nth-child(3){transition-delay:.2s}
.pick.is-active .reveal:nth-child(4){transition-delay:.28s}
.pick.is-active .reveal:nth-child(5){transition-delay:.36s}
.pick.is-active .reveal:nth-child(6){transition-delay:.44s}

/* ════════ 로딩 / 에러 ════════ */
.center{height:100vh;height:100svh;height:100dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;text-align:center;padding:40px;position:relative;z-index:4}
.book-load{width:54px;height:42px;position:relative;perspective:400px}
.book-load i{position:absolute;inset:0;border-radius:3px;background:linear-gradient(135deg,#ff3d9a,#7b3bff);transform-origin:left center;animation:flip 1.5s ease-in-out infinite;box-shadow:0 8px 20px -6px rgba(0,0,0,.5)}
.book-load i:nth-child(2){animation-delay:.25s;opacity:.7}
.book-load i:nth-child(3){animation-delay:.5s;opacity:.45}
@keyframes flip{0%,100%{transform:rotateY(0)}50%{transform:rotateY(-150deg)}}
.loadtxt{font-family:var(--kserif);font-weight:800;font-size:18px;opacity:.8;letter-spacing:.01em}

/* ════════════════════════════════════════════════════════════════
   Spotify Wrapped 2025 배경 적용 — 가독성 · 라이트 테마 · 카드별 레이아웃
   ════════════════════════════════════════════════════════════════ */

/* ── 다크 카드: 흰 텍스트를 배경 그래픽 위에서 또렷하게 ── */
.card .eyebrow,.card .lead,.card .sub,.card .kicker,
.c-intro .brandmark,.c-intro .yr,
.c-intro .title,.c-intro .who,.c-outro .big,.c-outro .sub,
.shelf-hint,.qmeta{
  text-shadow:0 2px 20px rgba(0,0,0,.55),0 1px 4px rgba(0,0,0,.45);
}
.huge{text-shadow:0 6px 34px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.45)}
.rankgroup .rh,.rankrow .nm,.rankrow .vl{text-shadow:0 1px 8px rgba(0,0,0,.5)}

/* ── 라이트 카드(크림 배경): 어두운 텍스트 (--ink 가 이미 짙음) ── */
.card.light{color:#161009}
.card.light .eyebrow,.card.light .lead,.card.light .sub,.card.light .kicker,
.card.light .qmeta{color:#161009;text-shadow:0 1px 16px rgba(247,244,236,.85)}
.card.light .sub{opacity:.9}
.card.light .sub b{color:#000}
.card.light .huge{text-shadow:0 2px 26px rgba(247,244,236,.95)}
.card.light .pill{
  background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.2);color:#161009;
  backdrop-filter:blur(4px);
}

/* 라이트 인용 카드 — 따옴표는 악센트(크림슨), 하이라이트는 옅은 크림슨 */
.c-quote.light .mark{
  background:none;color:var(--accent);
  -webkit-text-fill-color:var(--accent);
}
.c-quote.light .quote .hl{background:linear-gradient(transparent 56%,rgba(225,29,72,.2) 0)}
.c-quote.light .qmeta{color:#161009;opacity:.82}
.c-quote.light .qmeta b{color:#000}

/* ── 카드별 레이아웃 (Spotify식: 카드마다 텍스트 위치/정렬이 다르게) ── */
.c-intro{text-align:center}
.c-intro .brandmark{justify-content:center}
.c-days{justify-content:center;text-align:left}                            /* 중앙·좌 (큰 숫자 가운데) */
.c-pages{justify-content:flex-start;padding-top:clamp(76px,18vw,134px)}     /* 상단 정렬 (그래픽이 하단 채움) */
.c-streak{justify-content:center;text-align:left}                          /* 중앙·좌 */
.c-quote{justify-content:center}
.c-rank{justify-content:flex-start;padding-top:clamp(46px,11vw,78px)}      /* 정보량 많음 → 상단 (컴팩트) */
.c-rank .eyebrow{margin-bottom:8px}
.c-rank .lead{font-size:clamp(19px,4.8vw,26px);margin-bottom:2px}
.c-outro{justify-content:center}

/* ── 멤버 선택(랜딩) 배경 — 뷰포트 고정(fixed)으로 스크롤 전체를 덮음 ── */
/* (absolute+inset:0 는 스크롤 컨테이너의 첫 화면만 덮어서, 아래로 스크롤하면 스크림이 끊겼음) */
.c-pick{background:#08070c}
.c-pick::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:#08070c url("/wrapped/5/bg/bg11.png?v=sf95523e") center/cover no-repeat;
}
.c-pick::after{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;
  background:rgba(8,7,12,.6);  /* 균일 스크림 */
}

/* prefers-reduced-motion 외에도 정적 배경이라 추가 애니메이션 없음 */