/* RallyLog App Store 스크린샷 — 공통 토큰·폰 프레임·앱 카드.
   카드 치수는 402pt 폭(iPhone 16 Pro) 좌표계로 쓰고, 폰/팝 컨테이너가 scale 한다.
   색은 실제 앱 캡처에서 샘플링한 값. */
:root{
  --bg:#F2F4F7; --card:#FFFFFF; --ink:#1A1C1E; --muted:#5B6068; --faint:#A3A8AF; --line:#E3E6EA;
  --orange:#ED762E; --orange-deep:#DB5F1A; --orange-soft:#FDE8DA;
  --atk:#C6504F; --def:#4BA294; --srv:#ED762E; --tot:#505254; --unk:#C3C7CC;
  --blue:#4185DE; --red:#D34A40; --navy:#324C7C;
  --blue-soft:#E6F1FC; --red-soft:#FCECEE; --cream:#FDF3E2;
  --font:-apple-system,"SF Pro Display","Apple SD Gothic Neo",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font);-webkit-font-smoothing:antialiased;color:var(--ink);overflow:hidden;position:relative}
.num{font-variant-numeric:tabular-nums}

/* ── 슬라이드 공통 타이포 ─────────────────────────── */
.eyebrow{display:inline-flex;align-items:center;gap:14px;font-size:44px;font-weight:700;color:var(--orange-deep);
  background:var(--orange-soft);padding:14px 34px;border-radius:999px;letter-spacing:-.5px}
.eyebrow i{width:14px;height:14px;border-radius:50%;background:var(--orange)}
.headline{font-size:122px;line-height:1.16;font-weight:800;letter-spacing:-4px;margin:0}
.headline em{font-style:normal;color:var(--orange)}
.sub{font-size:50px;line-height:1.45;font-weight:500;color:var(--muted);letter-spacing:-1px;margin:0}

/* ── 폰 프레임 ───────────────────────────────────── */
.phone{position:absolute;padding:calc(12px*var(--s));border-radius:calc(64px*var(--s));
  background:linear-gradient(145deg,#3A3B3E 0%,#161618 30%,#0B0B0C 70%,#2B2C2E 100%);
  box-shadow:0 0 0 calc(1.5px*var(--s)) #56575B inset, 0 60px 120px rgba(20,24,30,.28), 0 18px 40px rgba(20,24,30,.18)}
.phone .viewport{width:calc(402px*var(--s));height:calc(874px*var(--s));border-radius:calc(52px*var(--s));overflow:hidden;position:relative;background:var(--bg)}
.phone.land .viewport{width:calc(874px*var(--s));height:calc(402px*var(--s))}
.screen{position:absolute;left:0;top:0;width:402px;height:874px;transform:scale(var(--s));transform-origin:0 0;overflow:hidden;background:var(--bg)}
.phone.land .screen{width:874px;height:402px;background:#0E1116}
.island{position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;background:#000;border-radius:20px;z-index:50}
.phone.land .island{left:11px;top:50%;width:36px;height:124px;margin:-62px 0 0 0}

/* ── 상태바·탭바 ─────────────────────────────────── */
.status{position:absolute;left:0;right:0;top:0;height:54px;z-index:40}
.status .t{position:absolute;left:40px;top:17px;font-size:17px;font-weight:600;letter-spacing:-.2px}
.status svg{position:absolute;right:30px;top:21px}
.tabbar{position:absolute;left:0;right:0;bottom:0;height:86px;background:#F7F7F8;border-top:1px solid #E4E6E9;display:flex;z-index:40}
.tabbar .it{flex:1;display:flex;flex-direction:column;align-items:center;padding-top:10px;gap:3px;color:#50545A}
.tabbar .it.on{color:var(--orange)}
.tabbar .it span{font-size:11.5px;font-weight:500}
.tabbar::after{content:"";position:absolute;left:50%;bottom:8px;width:136px;margin-left:-68px;height:5px;border-radius:3px;background:#111}

/* ── 앱 카드 ─────────────────────────────────────── */
.stack{position:absolute;left:16px;right:16px;display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);border-radius:20px;padding:20px 21px;position:relative}
.card h4{margin:0;font-size:16.5px;font-weight:700;letter-spacing:-.3px}
.row{display:flex;align-items:center;justify-content:space-between}
.muted{color:var(--muted)} .faint{color:var(--faint)}
.pagetitle{position:absolute;left:18px;top:64px;font-size:29px;font-weight:800;letter-spacing:-.6px}
.pill{position:absolute;right:16px;top:60px;height:42px;padding:0 16px;border-radius:21px;background:#fff;display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:600;box-shadow:0 4px 14px rgba(0,0,0,.07)}
.glassbtn{position:absolute;top:58px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.92);
  box-shadow:0 3px 12px rgba(0,0,0,.10),0 0 0 .5px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;z-index:30}

/* 승률 카드 */
.win{background:var(--orange);color:#fff;border-radius:22px;padding:20px 22px 16px}
.win .big{font-size:58px;font-weight:800;letter-spacing:-1.5px;line-height:1}
.win .rec{font-size:16px;opacity:.82;margin-left:14px;font-weight:500}
.win .track{height:11px;border-radius:6px;background:rgba(255,255,255,.32);margin:16px 0 6px;overflow:hidden}
.win .track b{display:block;height:100%;background:#fff;border-radius:6px}
.win .ends{display:flex;justify-content:space-between;font-size:12.5px;opacity:.8}

/* 세로 막대 */
.bars{display:flex;justify-content:space-between;padding:0 6px;margin-top:14px}
.bar{display:flex;flex-direction:column;align-items:center;width:62px}
.bar .v{font-size:16px;font-weight:700;margin-bottom:8px}
.bar .tr{width:37px;height:120px;border-radius:7px;background:#F3F4F6;display:flex;align-items:flex-end;overflow:hidden}
.bar .tr b{display:block;width:100%;border-radius:7px}
.bar .n{font-size:14px;color:var(--muted);margin-top:9px}
.bar .c{font-size:11.5px;color:var(--faint);margin-top:2px}

/* 내비 카드 (인사이트·과제·성장) */
.nav{height:96px;padding:0 18px 0 21px;display:flex;align-items:center;overflow:hidden}
.nav .tt{font-size:20px;font-weight:700;letter-spacing:-.4px;flex:1}
.nav svg.art{position:absolute;right:40px;top:0}
.nav .chev{position:absolute;right:16px;top:38px}

/* 표 */
.kv{display:flex;justify-content:space-between;align-items:center;padding:13px 0;font-size:15.5px;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv .l{color:var(--muted)} .kv .r{font-weight:700;font-size:16px}
.b{color:var(--blue)} .rd{color:var(--red)}
.hbar{height:8px;border-radius:4px;background:#F0F1F4;overflow:hidden;margin:9px 0 14px}
.hbar b{display:block;height:100%;border-radius:4px}

/* 칩 */
.chip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:13px;font-size:13px;font-weight:700}
.bubble{background:var(--bg);border-radius:12px;padding:12px 14px;display:flex;gap:9px;font-size:14px;line-height:1.5;color:#3F444B}

/* 팝(확대해 들어올린 카드) */
.pop{position:absolute;transform-origin:0 0;z-index:20;filter:drop-shadow(0 30px 50px rgba(20,24,30,.20)) drop-shadow(0 8px 16px rgba(20,24,30,.10))}