/* ============================================================
   ENCORE 앙코르 — 아이돌 카드 맞추기 미니게임 · 모바일 웹 UI 디자인 시안 (제안용 데모)
   도메인 레퍼런스: im-fine.co.kr(의뢰자 — 블랙 #000·화이트·경량 200 대형 타이포·lh 1.0 실측)
                  · Weverse/포토카드 컬렉션 문법 · 메모리 게임 표준(4×3~6×5 그리드)
   디자인 레퍼런스: im-fine(모노크롬 에디토리얼) · Linear(이징 cubic-bezier(.22,.61,.36,1))
   ※ 아이돌 그룹 LUMIN(루민)·멤버·기록·닉네임 등 모든 데이터는 가상입니다. 실존 인물·단체와 무관.
   ============================================================ */

:root{
  --bg:#0A0A0B; --bg-2:#111113; --panel:#161618; --line:#232326; --line-2:#2E2E33;
  --ink:#F4F2EC; --ink-2:#C9C6BD; --mut:#8A877E; --mut-2:#5C5A54;
  --acc:#D7FF3F; --acc-ink:#0A0A0B; --acc-dim:rgba(215,255,63,.14);
  --card-r:14px; --r:12px; --r-s:9px;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,system-ui,"Segoe UI","Malgun Gothic",sans-serif;
  --mono:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  /* 멤버 컬러 (포토카드 배경) */
  --m1:#B8B6AE; --m2:#8E1F1F; --m3:#1E3FA8; --m4:#C77E93; --m5:#3F5B3A; --m6:#5B3FA8;
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html{overflow-x:clip; -webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--font); background:var(--bg); color:var(--ink);
  line-height:1.55; letter-spacing:-0.011em; -webkit-font-smoothing:antialiased}
@media (prefers-reduced-motion:reduce){ *{animation:none!important; transition:none!important} }
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; padding:0}
img{max-width:100%; display:block}
.mono{font-family:var(--mono); font-feature-settings:"tnum" 1; letter-spacing:0}
::selection{background:var(--acc); color:var(--acc-ink)}

/* ============ 데스크톱 뷰어 셸 (디자인 시안 인덱스 + 폰 프레임) ============ */
.viewer{display:grid; grid-template-columns:300px 1fr; min-height:100vh}
.v-side{border-right:1px solid var(--line); padding:26px 20px; overflow:auto; max-height:100vh; position:sticky; top:0}
.v-brand{display:flex; align-items:baseline; gap:10px; margin-bottom:6px}
.v-brand .en{font-size:26px; font-weight:200; letter-spacing:.14em}
.v-brand .en b{font-weight:750; color:var(--acc)}
.v-brand small{font-size:11px; color:var(--mut); letter-spacing:.02em}
.v-sub{font-size:12px; color:var(--mut); line-height:1.6; margin-bottom:18px}
.v-part{margin-bottom:16px}
.v-part h4{font-size:10.5px; font-weight:700; letter-spacing:.12em; color:var(--mut-2); text-transform:uppercase; margin:0 0 7px; display:flex; justify-content:space-between}
.v-part h4 .pn{color:var(--acc); font-family:var(--mono); font-weight:600}
.v-list{display:flex; flex-direction:column; gap:2px}
.v-item{display:flex; align-items:center; gap:9px; padding:7px 10px; border-radius:8px; font-size:13px; color:var(--ink-2); text-align:left; transition:background .13s, color .13s; width:100%}
.v-item:hover{background:var(--panel); color:var(--ink)}
.v-item.on{background:var(--acc); color:var(--acc-ink); font-weight:680}
.v-item .no{font-family:var(--mono); font-size:10.5px; color:var(--mut-2); width:18px; flex:none}
.v-item.on .no{color:rgba(10,10,11,.55)}
.v-note{margin-top:18px; padding:12px 13px; border:1px solid var(--line); border-radius:10px; font-size:11.5px; color:var(--mut); line-height:1.6}
.v-note b{color:var(--ink-2)}
.v-stage{display:grid; place-items:center; padding:34px 20px; position:relative}
.v-stage-meta{position:absolute; top:22px; left:30px; right:30px; display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--mut)}
.v-stage-meta .t{font-weight:650; color:var(--ink-2)}
.v-stage-meta .k{font-family:var(--mono); font-size:11px}

/* 폰 프레임 */
.phone{width:390px; height:812px; background:#000; border-radius:44px; border:1px solid #26262b;
  box-shadow:0 0 0 10px #141416, 0 0 0 11px #2a2a30, 0 50px 110px -40px rgba(0,0,0,.9);
  overflow:hidden; position:relative; flex:none}
.phone .notch{position:absolute; top:10px; left:50%; transform:translateX(-50%); width:118px; height:30px; background:#000; border-radius:18px; z-index:60; pointer-events:none}
.screen{position:absolute; inset:0; overflow:hidden; background:var(--bg)}

/* 모바일 실기기: 뷰어 제거, 풀스크린 */
@media(max-width:900px){
  .viewer{display:block}
  .v-side{display:none}
  .v-stage{padding:0; min-height:100vh; display:block}
  .v-stage-meta{display:none}
  .phone{width:100%; height:100vh; height:100dvh; border-radius:0; border:none; box-shadow:none}
  .phone .notch{display:none}
  .m-nav{display:flex!important}
}
/* 모바일 화면 전환 바 */
.m-nav{display:none; position:fixed; bottom:0; left:0; right:0; z-index:80; background:rgba(10,10,11,.92); backdrop-filter:blur(12px); border-top:1px solid var(--line); padding:10px 14px calc(10px + env(safe-area-inset-bottom)); gap:8px; overflow-x:auto}
.m-nav button{flex:none; height:34px; padding:0 13px; border-radius:999px; border:1px solid var(--line-2); font-size:12px; color:var(--ink-2); white-space:nowrap}
.m-nav button.on{background:var(--acc); color:var(--acc-ink); border-color:var(--acc); font-weight:680}

/* ============ 화면 공통 ============ */
.scr{position:absolute; inset:0; display:none; flex-direction:column; overflow:hidden; background:var(--bg)}
.scr.on{display:flex; animation:scrIn .34s var(--ease)}
@keyframes scrIn{from{opacity:0; transform:translateX(14px)} to{opacity:1; transform:none}}
.scr-body{flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch}
.safe-t{padding-top:54px}

/* 상단 앱바 */
.appbar{position:absolute; top:0; left:0; right:0; z-index:40; display:flex; align-items:center; justify-content:space-between; padding:50px 20px 12px; background:linear-gradient(180deg, rgba(10,10,11,.92), rgba(10,10,11,0))}
.appbar .ab-t{font-size:14px; font-weight:650; letter-spacing:-0.01em}
.ab-btn{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:16px; color:var(--ink-2); background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); backdrop-filter:blur(8px)}
.ab-btn:active{transform:scale(.94)}

/* 버튼 */
.cta{display:flex; align-items:center; justify-content:center; gap:8px; height:54px; border-radius:14px; font-size:16px; font-weight:700; letter-spacing:-0.01em; transition:transform .14s var(--ease), opacity .15s; width:100%}
.cta:active{transform:scale(.98)}
.cta-acc{background:var(--acc); color:var(--acc-ink)}
.cta-gho{background:transparent; color:var(--ink); border:1px solid var(--line-2)}
.cta-dark{background:var(--panel); color:var(--ink); border:1px solid var(--line)}
.cta.sm{height:44px; font-size:14px; border-radius:12px}

.chip{display:inline-flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--line-2); color:var(--ink-2)}
.chip.acc{background:var(--acc); color:var(--acc-ink); border-color:var(--acc); font-weight:700}
.tagline{font-size:10.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--mut); font-weight:600}
.tagline.acc{color:var(--acc)}

/* 디스플레이 타이포 (im-fine 이식: 경량·대형·타이트) */
.display{font-weight:200; letter-spacing:-0.01em; line-height:1.02}
.display b{font-weight:760}

/* ============ 01 스플래시 ============ */
.splash{background:#000; align-items:center; justify-content:center; display:none}
.splash.on{display:flex}
.splash-in{text-align:center; padding:0 30px; position:relative; z-index:2}
.splash .logo-en{font-size:15px; letter-spacing:.42em; font-weight:300; color:var(--ink-2); margin-bottom:18px}
.splash .logo-main{font-size:58px; font-weight:200; letter-spacing:.06em; line-height:1.0}
.splash .logo-main b{font-weight:800; color:var(--acc)}
.splash .ver{position:absolute; bottom:-120px; left:0; right:0; font-size:10.5px; color:var(--mut-2); font-family:var(--mono)}
.splash-bg{position:absolute; inset:0; opacity:.5}
.splash-bg img{width:100%; height:100%; object-fit:cover; filter:grayscale(.4) brightness(.5)}
.splash-bg::after{content:""; position:absolute; inset:0; background:radial-gradient(90% 70% at 50% 45%, transparent, #000 78%)}
.splash-load{margin-top:34px; width:140px; height:2px; background:var(--line); margin-left:auto; margin-right:auto; overflow:hidden; border-radius:2px}
.splash-load i{display:block; height:100%; width:40%; background:var(--acc); animation:loadSlide 1.3s var(--ease) infinite}
@keyframes loadSlide{from{transform:translateX(-100%)} to{transform:translateX(350%)}}

/* ============ 02 홈 ============ */
.home-hero{position:relative; height:480px; flex:none; overflow:hidden}
.home-hero img{width:100%; height:100%; object-fit:cover; object-position:top center}
.home-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,11,.25) 0%, transparent 35%, rgba(10,10,11,.96) 88%, var(--bg) 100%)}
.home-hero-txt{position:absolute; left:22px; right:22px; bottom:18px; z-index:2}
.home-hero-txt .display{font-size:40px}
.home-hero-txt p{font-size:13.5px; color:var(--ink-2); margin:10px 0 0}
.home-sec{padding:26px 22px}
.home-sec h3{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mut); font-weight:650; margin:0 0 14px; display:flex; justify-content:space-between; align-items:center}
.home-sec h3 .more{font-size:11px; color:var(--mut-2); letter-spacing:0}
.mode-cards{display:flex; flex-direction:column; gap:12px}
.mode-card{position:relative; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--panel); padding:20px; display:flex; align-items:center; gap:16px; transition:transform .16s var(--ease), border-color .16s; text-align:left; width:100%}
.mode-card:active{transform:scale(.98)}
.mode-card .mc-ico{width:46px; height:46px; border-radius:12px; display:grid; place-items:center; font-size:21px; background:var(--bg-2); border:1px solid var(--line-2); flex:none}
.mode-card .mc-t{font-size:16.5px; font-weight:700}
.mode-card .mc-d{font-size:12.5px; color:var(--mut); margin-top:3px}
.mode-card .mc-go{margin-left:auto; color:var(--mut-2); font-size:18px}
.mode-card.hot{border-color:rgba(215,255,63,.4)}
.mode-card.hot .mc-ico{background:var(--acc-dim); border-color:rgba(215,255,63,.35)}
.home-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.hstat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:14px 12px; text-align:center}
.hstat .v{font-size:22px; font-weight:760; letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.hstat .v em{font-style:normal; color:var(--acc)}
.hstat .k{font-size:10.5px; color:var(--mut); margin-top:4px}

/* ============ 03 덱 선택 (멤버) ============ */
.deck-head{padding:64px 22px 6px}
.deck-head .display{font-size:34px}
.deck-head p{font-size:13px; color:var(--mut); margin:8px 0 0}
.deck-scroll{display:flex; gap:14px; overflow-x:auto; padding:20px 22px 8px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.deck-scroll::-webkit-scrollbar{display:none}
.deck-card{flex:none; width:212px; scroll-snap-align:center; border-radius:18px; overflow:hidden; position:relative; aspect-ratio:2/3; border:1px solid var(--line-2); transition:transform .2s var(--ease), border-color .2s}
.deck-card img{width:100%; height:100%; object-fit:cover}
.deck-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(0,0,0,.82))}
.deck-card .dc-txt{position:absolute; left:16px; right:16px; bottom:14px; z-index:2}
.deck-card .dc-en{font-size:10px; letter-spacing:.24em; color:rgba(255,255,255,.7); text-transform:uppercase}
.deck-card .dc-name{font-size:22px; font-weight:750; letter-spacing:-0.02em; margin-top:3px}
.deck-card .dc-sub{font-size:11.5px; color:rgba(255,255,255,.65); margin-top:2px}
.deck-card.sel{border-color:var(--acc); box-shadow:0 0 0 2px var(--acc), 0 20px 50px -20px rgba(215,255,63,.35)}
.deck-card .dc-chk{position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%; background:var(--acc); color:var(--acc-ink); display:none; place-items:center; font-size:14px; font-weight:800; z-index:3}
.deck-card.sel .dc-chk{display:grid}
.deck-dots{display:flex; gap:6px; justify-content:center; padding:6px 0 0}
.deck-dots i{width:6px; height:6px; border-radius:50%; background:var(--line-2); transition:all .2s}
.deck-dots i.on{background:var(--acc); width:18px; border-radius:3px}
.deck-foot{padding:16px 22px calc(20px + env(safe-area-inset-bottom))}

/* ============ 04 난이도 ============ */
.lv-list{display:flex; flex-direction:column; gap:12px; padding:20px 22px}
.lv{border:1px solid var(--line); background:var(--panel); border-radius:var(--r); padding:18px 20px; display:flex; align-items:center; gap:16px; text-align:left; width:100%; transition:border-color .15s, transform .14s}
.lv:active{transform:scale(.98)}
.lv .lv-grid{width:44px; height:44px; flex:none; display:grid; gap:2px; padding:6px; background:var(--bg-2); border:1px solid var(--line-2); border-radius:10px}
.lv .lv-grid i{background:var(--mut-2); border-radius:1.5px}
.lv .lv-t{font-size:16px; font-weight:720}
.lv .lv-d{font-size:12px; color:var(--mut); margin-top:2px}
.lv .lv-best{margin-left:auto; text-align:right; flex:none}
.lv .lv-best .b{font-family:var(--mono); font-size:14px; font-weight:600; color:var(--ink-2)}
.lv .lv-best .k{font-size:10px; color:var(--mut-2)}
.lv.sel{border-color:var(--acc); background:linear-gradient(0deg, var(--acc-dim), var(--acc-dim)), var(--panel)}
.lv.sel .lv-grid i{background:var(--acc)}

/* ============ 05 카운트다운 ============ */
.count-wrap{flex:1; display:grid; place-items:center; position:relative}
.count-num{font-size:150px; font-weight:180; letter-spacing:-0.04em; line-height:1; color:var(--acc); animation:countPop .82s var(--ease) infinite}
@keyframes countPop{0%{transform:scale(.6); opacity:0} 25%{transform:scale(1); opacity:1} 85%{opacity:1} 100%{opacity:0}}
.count-sub{position:absolute; bottom:120px; left:0; right:0; text-align:center; font-size:13px; color:var(--mut)}

/* ============ 06 게임플레이 ============ */
.play-top{padding:56px 20px 10px; display:flex; align-items:center; justify-content:space-between; flex:none}
.play-timer{display:flex; align-items:baseline; gap:5px}
.play-timer .t{font-family:var(--mono); font-size:30px; font-weight:600; letter-spacing:-0.02em; font-variant-numeric:tabular-nums}
.play-timer .t.low{color:#FF5A48}
.play-timer .s{font-size:11px; color:var(--mut)}
.play-meta{display:flex; gap:8px}
.pill-mini{height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--line-2); font-size:12px; font-weight:600; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px}
.pill-mini b{color:var(--acc); font-family:var(--mono); font-weight:600}
.play-prog{height:3px; background:var(--line); margin:8px 20px 0; border-radius:3px; overflow:hidden; flex:none}
.play-prog i{display:block; height:100%; background:var(--acc); width:0; transition:width .4s var(--ease)}
.board-wrap{flex:1; display:grid; place-items:center; padding:14px 16px 90px}
.board{display:grid; gap:9px; width:100%; max-width:365px}
.gcard{position:relative; aspect-ratio:3/4; cursor:pointer; perspective:600px; -webkit-perspective:600px}
.gcard-in{position:absolute; inset:0; transform-style:preserve-3d; transition:transform .42s var(--ease)}
.gcard.flip .gcard-in{transform:rotateY(180deg)}
.gface{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:11px; overflow:hidden}
.gface.back{background:linear-gradient(145deg, #1B1B1E, #101012); border:1px solid var(--line-2); display:grid; place-items:center}
.gface.back .bk{font-size:13px; font-weight:200; letter-spacing:.18em; color:var(--mut-2)}
.gface.back .bk b{font-weight:800; color:var(--acc); font-size:15px}
.gface.front{transform:rotateY(180deg); border:1px solid var(--line-2)}
.gface.front img{width:100%; height:100%; object-fit:cover}
.gface.front .ph{width:100%; height:100%; display:grid; place-items:center; font-size:26px; font-weight:800; color:#fff}
.gcard.matched .gcard-in{animation:matchPulse .5s var(--ease)}
.gcard.matched .gface.front{border-color:var(--acc); box-shadow:0 0 0 1.5px var(--acc), 0 8px 26px -8px rgba(215,255,63,.5)}
.gcard.matched{pointer-events:none}
@keyframes matchPulse{0%,100%{transform:rotateY(180deg) scale(1)} 45%{transform:rotateY(180deg) scale(1.07)}}
.gcard.wrong .gcard-in{animation:wrongShake .4s}
@keyframes wrongShake{0%,100%{transform:rotateY(180deg) translateX(0)} 25%{transform:rotateY(180deg) translateX(-5px)} 65%{transform:rotateY(180deg) translateX(5px)}}
.play-foot{position:absolute; bottom:0; left:0; right:0; padding:12px 20px calc(16px + env(safe-area-inset-bottom)); display:flex; gap:10px; background:linear-gradient(0deg, rgba(10,10,11,.95), rgba(10,10,11,0)); z-index:30}
.play-foot .cta{height:46px; font-size:14px; border-radius:12px}

/* ============ 07 일시정지 / 모달 공통 ============ */
.overlay{position:absolute; inset:0; z-index:50; background:rgba(5,5,6,.78); backdrop-filter:blur(10px); display:grid; place-items:center; padding:28px}
.ov-panel{width:100%; background:var(--panel); border:1px solid var(--line-2); border-radius:20px; padding:28px 24px; text-align:center; animation:ovIn .3s var(--ease)}
@keyframes ovIn{from{opacity:0; transform:translateY(14px) scale(.97)} to{opacity:1; transform:none}}
.ov-panel .display{font-size:30px}
.ov-panel .ov-sub{font-size:13px; color:var(--mut); margin:10px 0 20px}
.ov-panel .stack{display:flex; flex-direction:column; gap:10px}

/* ============ 08 힌트 ============ */
.hint-flash .gface.front{box-shadow:0 0 0 1.5px var(--acc)}

/* ============ 09~11 결과 ============ */
.result-hero{position:relative; height:340px; flex:none; overflow:hidden}
.result-hero img{width:100%; height:100%; object-fit:cover; object-position:center 20%}
.result-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,11,.2), rgba(10,10,11,.97) 92%)}
.result-hero .rh-txt{position:absolute; left:22px; right:22px; bottom:16px; z-index:2}
.result-hero .tagline{margin-bottom:8px}
.result-hero .display{font-size:44px}
.result-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:18px 22px}
.rstat{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px 10px; text-align:center}
.rstat .v{font-family:var(--mono); font-size:21px; font-weight:600; letter-spacing:-0.02em}
.rstat .v.acc{color:var(--acc)}
.rstat .k{font-size:10.5px; color:var(--mut); margin-top:4px}
.reward-card{margin:8px 22px 0; border:1px solid rgba(215,255,63,.35); background:linear-gradient(135deg, var(--acc-dim), transparent 60%), var(--panel); border-radius:var(--r); padding:16px 18px; display:flex; align-items:center; gap:14px}
.reward-card .rw-img{width:52px; height:70px; border-radius:8px; overflow:hidden; border:1px solid var(--line-2); flex:none}
.reward-card .rw-img img{width:100%; height:100%; object-fit:cover}
.reward-card .rw-t{font-size:14.5px; font-weight:700}
.reward-card .rw-d{font-size:12px; color:var(--mut); margin-top:2px}
.reward-card .rw-new{margin-left:auto; flex:none}
.result-foot{padding:18px 22px calc(22px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:10px}
/* 신기록 */
.newrec-burst{position:relative}
.newrec-num{font-size:76px; font-weight:180; letter-spacing:-0.03em; line-height:1; color:var(--acc)}
.newrec-num small{font-size:22px; font-weight:400; color:var(--ink-2)}
/* 실패 */
.fail-tone .result-hero img{filter:grayscale(1) brightness(.65)}

/* ============ 12~13 컬렉션 ============ */
.col-head{padding:64px 22px 14px}
.col-head .display{font-size:34px}
.col-head .col-prog{display:flex; align-items:center; gap:12px; margin-top:14px}
.col-head .col-prog .bar{flex:1; height:4px; background:var(--line); border-radius:4px; overflow:hidden}
.col-head .col-prog .bar i{display:block; height:100%; background:var(--acc); width:0; transition:width .8s var(--ease)}
.col-head .col-prog .n{font-family:var(--mono); font-size:12px; color:var(--ink-2)}
.col-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:6px 22px 30px}
.pcard{position:relative; aspect-ratio:2/3; border-radius:12px; overflow:hidden; border:1px solid var(--line-2); cursor:pointer; transition:transform .16s var(--ease)}
.pcard:active{transform:scale(.96)}
.pcard img{width:100%; height:100%; object-fit:cover}
.pcard .pc-name{position:absolute; left:8px; bottom:7px; font-size:10.5px; font-weight:650; z-index:2; text-shadow:0 1px 6px rgba(0,0,0,.7)}
.pcard.locked img{filter:grayscale(1) brightness(.3)}
.pcard.locked::after{content:"🔒"; position:absolute; inset:0; display:grid; place-items:center; font-size:18px; opacity:.8}
.pcard .pc-rare{position:absolute; top:7px; left:7px; z-index:2; font-size:9px; font-weight:800; letter-spacing:.08em; padding:3px 7px; border-radius:5px; background:rgba(0,0,0,.55); backdrop-filter:blur(4px); color:var(--acc)}
/* 카드 상세 */
.detail-stage{flex:1; display:grid; place-items:center; padding:70px 40px 30px; position:relative}
.detail-card{width:100%; max-width:250px; aspect-ratio:2/3; border-radius:18px; overflow:hidden; border:1px solid var(--line-2); box-shadow:0 40px 90px -30px rgba(0,0,0,.9); position:relative; transition:transform .2s var(--ease)}
.detail-card img{width:100%; height:100%; object-fit:cover}
.detail-card .holo{position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(215,255,63,.22) 46%, rgba(255,255,255,.28) 50%, rgba(215,255,63,.22) 54%, transparent 70%); transform:translateX(-120%); pointer-events:none}
.detail-card:hover .holo, .detail-card.sweep .holo{animation:holoSweep 1.1s var(--ease)}
@keyframes holoSweep{to{transform:translateX(120%)}}
.detail-meta{padding:0 26px calc(24px + env(safe-area-inset-bottom))}
.detail-meta .dm-row{display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px}
.detail-meta .dm-row .k{color:var(--mut)} .detail-meta .dm-row .v{font-weight:600}
.detail-meta .dm-row .v.mono{font-family:var(--mono); font-weight:500}

/* ============ 14 랭킹 ============ */
.rank-tabs{display:flex; gap:8px; padding:14px 22px 6px}
.rank-tabs button{height:34px; padding:0 15px; border-radius:999px; border:1px solid var(--line-2); font-size:12.5px; font-weight:600; color:var(--mut)}
.rank-tabs button.on{background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:700}
.rank-podium{display:flex; align-items:flex-end; justify-content:center; gap:14px; padding:18px 22px 8px}
.pod{text-align:center; flex:1; max-width:96px}
.pod .pd-av{width:56px; height:56px; border-radius:50%; overflow:hidden; border:2px solid var(--line-2); margin:0 auto 8px}
.pod .pd-av img{width:100%; height:100%; object-fit:cover}
.pod.p1 .pd-av{width:72px; height:72px; border-color:var(--acc); box-shadow:0 0 24px rgba(215,255,63,.3)}
.pod .pd-n{font-size:12px; font-weight:650; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pod .pd-s{font-family:var(--mono); font-size:11px; color:var(--acc); margin-top:2px}
.pod .pd-med{font-size:15px; margin-bottom:4px}
.rank-list{padding:10px 22px 30px; display:flex; flex-direction:column; gap:6px}
.rrow{display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:11px 14px}
.rrow .rn{font-family:var(--mono); font-size:12px; color:var(--mut); width:20px; text-align:center}
.rrow .rav{width:34px; height:34px; border-radius:50%; overflow:hidden; border:1px solid var(--line-2); flex:none}
.rrow .rav img{width:100%; height:100%; object-fit:cover}
.rrow .rname{font-size:13.5px; font-weight:600; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rrow .rtime{font-family:var(--mono); font-size:13px; color:var(--ink-2)}
.rrow.me{border-color:rgba(215,255,63,.45); background:linear-gradient(0deg, var(--acc-dim), var(--acc-dim)), var(--panel)}
.rrow.me .rname::after{content:" · 나"; color:var(--acc); font-size:11px}

/* ============ 15 이벤트 ============ */
.ev-card{margin:14px 22px; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); position:relative; aspect-ratio:16/10}
.ev-card img{width:100%; height:100%; object-fit:cover}
.ev-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(0,0,0,.85))}
.ev-card .ev-txt{position:absolute; left:16px; right:16px; bottom:13px; z-index:2}
.ev-card .ev-k{font-size:10px; letter-spacing:.18em; color:var(--acc); text-transform:uppercase; font-weight:700}
.ev-card .ev-t{font-size:18px; font-weight:750; margin-top:4px}
.ev-card .ev-d{font-size:11.5px; color:rgba(255,255,255,.7); margin-top:3px}
.notice-list{padding:4px 22px 30px}
.nrow{display:flex; justify-content:space-between; gap:12px; padding:14px 2px; border-bottom:1px solid var(--line); font-size:13.5px}
.nrow .nt{color:var(--ink-2)} .nrow .nd{color:var(--mut-2); font-size:11.5px; font-family:var(--mono); flex:none}

/* ============ 16~17 설정 ============ */
.set-group{margin:16px 22px 0}
.set-group h4{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--mut-2); margin:0 0 8px; font-weight:700}
.set-panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.srow{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 16px; border-bottom:1px solid var(--line); font-size:14px}
.srow:last-child{border-bottom:none}
.srow .sk{display:flex; align-items:center; gap:11px}
.srow .sk .ico{font-size:15px; width:20px; text-align:center}
.srow .sv{font-size:12.5px; color:var(--mut)}
.toggle{width:46px; height:27px; border-radius:999px; background:var(--line-2); position:relative; transition:background .18s; flex:none}
.toggle::after{content:""; position:absolute; top:3px; left:3px; width:21px; height:21px; border-radius:50%; background:#fff; transition:transform .18s var(--ease)}
.toggle.on{background:var(--acc)}
.toggle.on::after{transform:translateX(19px)}

/* ============ 18 튜토리얼 ============ */
.tut-steps{padding:16px 22px 30px; display:flex; flex-direction:column; gap:12px}
.tut{display:flex; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:var(--r); padding:16px}
.tut .tn{width:30px; height:30px; border-radius:50%; background:var(--acc); color:var(--acc-ink); display:grid; place-items:center; font-weight:800; font-size:13px; flex:none}
.tut .tt{font-size:14.5px; font-weight:700}
.tut .td{font-size:12.5px; color:var(--mut); margin-top:3px; line-height:1.55}

/* ============ 19 로딩 / 20 오류 ============ */
.load-wrap{flex:1; display:grid; place-items:center}
.load-card{width:84px; height:112px; border-radius:12px; background:linear-gradient(145deg,#1B1B1E,#101012); border:1px solid var(--line-2); display:grid; place-items:center; animation:cardSpin 1.5s var(--ease) infinite}
.load-card b{font-weight:800; color:var(--acc); font-size:18px}
@keyframes cardSpin{0%{transform:rotateY(0)} 50%{transform:rotateY(180deg)} 100%{transform:rotateY(360deg)}}
.err-wrap{flex:1; display:grid; place-items:center; text-align:center; padding:0 34px}
.err-wrap .e-ico{font-size:44px; margin-bottom:16px; opacity:.9}
.err-wrap .display{font-size:26px}
.err-wrap p{font-size:13px; color:var(--mut); margin:10px 0 22px; line-height:1.6}

/* ============ 인터랙션 레드팀 반영 ============ */
/* 진입 stagger 리빌 */
.si{opacity:0; transform:translateY(14px); animation:siIn .5s var(--ease) forwards}
.si[data-d="1"]{animation-delay:.06s} .si[data-d="2"]{animation-delay:.12s}
.si[data-d="3"]{animation-delay:.18s} .si[data-d="4"]{animation-delay:.24s}
.si[data-d="5"]{animation-delay:.30s} .si[data-d="6"]{animation-delay:.36s}
@keyframes siIn{to{opacity:1; transform:none}}
/* 덱 카드 호버(데스크톱) — 리프트 + 이미지 줌 */
.deck-card img{transition:transform .5s var(--ease)}
@media(hover:hover){
  .deck-card:hover{transform:translateY(-6px)}
  .deck-card:hover img{transform:scale(1.05)}
  .mode-card:hover{border-color:var(--line-2); transform:translateY(-2px)}
  .mode-card.hot:hover{border-color:var(--acc)}
  .pcard:hover{transform:translateY(-4px)}
  .lv:hover{border-color:var(--line-2)}
}
/* 콘페티 캔버스 (성공·신기록) */
.confetti{position:absolute; inset:0; z-index:45; pointer-events:none}

/* ============ 토스트 ============ */
.toast-wrap{position:absolute; bottom:100px; left:0; right:0; z-index:90; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none}
.toast{background:var(--ink); color:var(--bg); padding:10px 18px; border-radius:999px; font-size:13px; font-weight:650; box-shadow:0 14px 40px -12px rgba(0,0,0,.7); animation:toastIn .3s var(--ease)}
.toast.acc{background:var(--acc); color:var(--acc-ink)}
@keyframes toastIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

.disclaimer{font-size:10.5px; color:var(--mut-2); text-align:center; padding:14px 20px 90px; line-height:1.6}