@charset "utf-8";
/* ══════════════════════════════════════════════════════════════
   로또이즈 — 화이트 베이스에 원색을 크게 쓰는 구성
   면(카드)마다 고유한 색을 주고, 아이콘은 라인이 아니라 컬러 일러스트로 간다.
   ══════════════════════════════════════════════════════════════ */

:root{
  --bg:#FFFFFF;
  --soft:#F4F5F8;
  --line:#EEEFF3;
  --line-2:#DFE1E8;

  --tx:#15161B;
  --tx-2:#4E515D;
  --tx-3:#7E8291;

  /* 원색 팔레트 */
  --pink:#FF4D7D;   --pink-sf:#FFEBF1;
  --orange:#FF8A3D; --orange-sf:#FFF1E3;
  --yellow:#FFC93C; --yellow-sf:#FFF7DF;
  --green:#2FC98E;  --green-sf:#E2F8EF;
  --blue:#3B82F6;   --blue-sf:#E8F0FE;
  --violet:#7C5CFF; --violet-sf:#F0ECFF;

  --pri:#FF4D7D;

  /* 로또 공 — 발매용지 색 그대로, 채도 살려서 */
  --b1:#FBC400;
  --b2:#3FAFEE;
  --b3:#FF5A5A;
  --b4:#9BA2AF;
  --b5:#8CC63F;

  --pad:20px;
  --tabh:66px;
  --r:20px;
  --r-sm:14px;

  /* 공은 고정 크기를 주지 않는다. 한 줄(공6 + "+" + 보너스1)이 화면을 넘지 않도록
     남는 폭을 나눠 갖게 한다. 계산식으로 잡았더니 보너스 공이 잘려 나갔다. */
  --ball-max:48px;
  --ball-gap:6px;

  --sh:0 2px 4px rgba(20,22,40,.03), 0 8px 24px rgba(20,22,40,.06);
  --sh-2:0 4px 10px rgba(20,22,40,.07), 0 18px 40px rgba(20,22,40,.10);
}

/* 로고 전용 폰트 (KBL Jump) — 브랜드에만 쓰고 본문은 Pretendard 유지 */
@font-face{
  font-family:'KblJumpExtended';
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/2601-5@1.0/KBLJump_EB_ExtendedTTF.woff2') format('woff2');
  font-weight:normal;
  font-display:swap;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
html{ background:var(--soft); }
body{
  background:var(--soft);
  color:var(--tx);
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:17.5px; line-height:1.6; letter-spacing:-.015em;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; }
svg{ width:100%; height:100%; display:block; }

.tnum,.hd-round-no,.last-no,.ball,.g-sum,.rank-v,.dist-v,.g45,.sel-b,.hero-dday{
  font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1;
}

.app{
  min-height:100dvh;
  padding-bottom:calc(var(--tabh) + env(safe-area-inset-bottom));
  max-width:600px; margin:0 auto; background:var(--soft);
  overflow-x:hidden;   /* 어떤 경우에도 가로 스크롤이 생기지 않게 */
}

/* ─────────────────────────── 헤더 ─────────────────────────── */
.hd{
  position:sticky; top:0; z-index:40;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.8) blur(14px);
  padding-top:env(safe-area-inset-top);
  border-bottom:1px solid rgba(238,239,243,.9);
}
.hd-in{ height:56px; padding:0 var(--pad); display:flex; align-items:center; justify-content:space-between; gap:12px; }
/* 로고를 눌러도 홈으로 간다 */
.brand{
  display:flex; align-items:center; gap:8px;
  padding:4px 2px; margin-left:-2px;
  transition:transform .16s cubic-bezier(.2,.9,.3,1), opacity .16s;
}
.brand:active{ transform:scale(.94); opacity:.7; }
.brand-mark{ width:25px; height:25px; flex:none; }
.brand-txt{
  font-family:'KblJumpExtended','Pretendard Variable',Pretendard,sans-serif;
  font-size:21px; font-weight:normal; letter-spacing:-.01em; line-height:1;
  padding-top:2px;
}
.brand-txt em{ font-style:normal; color:var(--pink); }

.hd-round{ display:flex; align-items:center; gap:6px; }
.hd-round-no{ font-size:14.5px; font-weight:700; color:var(--tx-2); }
.hd-round-dday{
  font-size:13.5px; font-weight:800; color:#fff;
  background:var(--pink); border-radius:100px; padding:4px 11px;
}

/* ─────────────────────────── 레이아웃 ─────────────────────────── */
.mn{ padding:0 var(--pad) 34px; }
.pg{ padding-top:16px; }
.pg > *{ animation:up .45s cubic-bezier(.16,.84,.32,1) both; }
.pg > *:nth-child(2){ animation-delay:.06s; }
.pg > *:nth-child(3){ animation-delay:.12s; }
.pg > *:nth-child(4){ animation-delay:.18s; }
.pg > *:nth-child(5){ animation-delay:.24s; }
.pg > *:nth-child(6){ animation-delay:.3s; }
@keyframes up{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none;} }

.sec-t{
  margin:28px 0 13px; font-size:19px; font-weight:800; letter-spacing:-.045em;
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
}
.sec-t small{ font-size:15px; font-weight:500; color:var(--tx-3); letter-spacing:-.01em; }
.sec-t small b{ color:var(--tx-2); font-weight:700; }

.card{ background:var(--bg); border-radius:var(--r); box-shadow:var(--sh); }

.chip{ font-size:14px; font-weight:800; color:var(--tx-2); background:var(--soft); border-radius:100px; padding:4px 10px; }
.chip-g{ color:#fff; background:var(--pink); }

.mini{ font-size:15px; font-weight:600; color:var(--tx-3); }

/* ─────────────────────────── 히어로 ─────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  border-radius:var(--r); padding:24px 20px 26px;
  background:linear-gradient(135deg,#FF6B8A 0%,#FF4D7D 45%,#7C5CFF 130%);
  box-shadow:0 10px 28px rgba(255,77,125,.28);
  color:#fff;
}
.hero-bubbles{ position:absolute; inset:0; pointer-events:none; }
.hb{ position:absolute; border-radius:50%; display:block; }
.hb1{ width:120px; height:120px; right:-30px; top:-40px; background:rgba(255,255,255,.16); animation:float 7s ease-in-out infinite; }
.hb2{ width:56px;  height:56px;  right:44px;  bottom:-18px; background:rgba(255,201,60,.5); animation:float 5.5s ease-in-out infinite .6s; }
.hb3{ width:26px;  height:26px;  right:104px; top:26px; background:rgba(255,255,255,.32); animation:float 6.4s ease-in-out infinite 1.1s; }
.hb4{ width:14px;  height:14px;  right:20px;  top:66px; background:rgba(255,255,255,.5); animation:float 4.8s ease-in-out infinite .3s; }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-11px);} }

.hero-tx{ position:relative; }
.hero-tag{ font-size:15px; font-weight:700; opacity:.92; }
.hero-dday{ display:block; font-size:34px; font-weight:800; letter-spacing:-.05em; line-height:1.15; margin-top:3px; }
.hero-sub{ margin:10px 0 0; font-size:15px; opacity:.9; word-break:keep-all; }
.hero-sub b{ font-weight:800; }

/* ─────────────────────────── 지난 회차 ─────────────────────────── */
.last{ padding:18px 16px 16px; margin-top:12px; }
.last-hd{ display:flex; align-items:center; gap:8px; margin-bottom:16px; }
.last-no{ font-size:17.5px; font-weight:800; letter-spacing:-.04em; }
.last-date{ font-size:15px; color:var(--tx-3); margin-left:auto; }
.last-ft{
  margin-top:15px; padding-top:13px; border-top:1px solid var(--line);
  font-size:15px; color:var(--tx-3); display:flex; justify-content:space-between;
}
.last-ft b{ color:var(--tx); font-weight:800; }

/* ─────────────────────────── 공 ─────────────────────────── */
.balls{
  display:flex; align-items:center; gap:var(--ball-gap);
  width:100%; min-width:0;
}
.ball{
  flex:1 1 0; min-width:0; max-width:var(--ball-max);
  aspect-ratio:1; width:auto; height:auto;
  border-radius:50%; display:grid; place-items:center;
  font-size:clamp(15px, 4.5vw, 21px); font-weight:800; letter-spacing:-.06em;
  color:#fff; position:relative;
  box-shadow:0 4px 9px rgba(20,22,40,.16);
}
.ball::after{
  content:''; position:absolute; left:20%; top:12%; width:34%; height:26%;
  border-radius:50%; background:rgba(255,255,255,.55); filter:blur(.5px);
}
.ball.c1{ background:var(--b1); }
.ball.c2{ background:var(--b2); }
.ball.c3{ background:var(--b3); }
.ball.c4{ background:var(--b4); }
.ball.c5{ background:var(--b5); }
.ball.miss{ background:var(--soft); color:var(--tx-3); box-shadow:none; }
.ball.miss::after{ display:none; }
.ball-plus{ flex:0 0 auto; color:var(--tx-3); font-size:16.5px; font-weight:800; width:11px; text-align:center; }
.ball.sm{ flex:0 0 auto; width:30px; height:30px; max-width:none; font-size:14.5px; }

.ball.hit::before{ content:''; position:absolute; inset:-4px; border-radius:50%; border:3px solid var(--pink); }
.ball.hit{ animation:hitPulse 1.6s ease-in-out infinite; }
@keyframes hitPulse{
  0%,100%{ box-shadow:0 4px 9px rgba(20,22,40,.16), 0 0 0 0 rgba(255,77,125,.5); }
  50%    { box-shadow:0 4px 9px rgba(20,22,40,.16), 0 0 0 9px rgba(255,77,125,0); }
}

.ball.pop{ animation:pop .55s cubic-bezier(.18,1.6,.4,1) both; }
@keyframes pop{
  0%  { opacity:0; transform:scale(.2) translateY(-20px) rotate(-30deg); }
  60% { opacity:1; transform:scale(1.16) translateY(4px) rotate(6deg); }
  100%{ opacity:1; transform:scale(1) translateY(0) rotate(0); }
}

/* ─────────────────────────── 빠른 메뉴 ─────────────────────────── */
.quick{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px;
  margin-top:14px; padding:16px 8px;
  background:var(--bg); border-radius:var(--r); box-shadow:var(--sh);
}
.qk{ display:flex; flex-direction:column; align-items:center; gap:8px; font-size:14.5px; font-weight:700; color:var(--tx-2); }
.qk-ic{
  width:48px; height:48px; border-radius:16px; display:grid; place-items:center;
  transition:transform .18s cubic-bezier(.2,1.5,.4,1);
}
.qk-ic svg{ width:30px; height:30px; }
.qk:active .qk-ic{ transform:scale(.88); }
.qk-blue{ background:var(--blue-sf); }
.qk-violet{ background:var(--violet-sf); }
.qk-orange{ background:var(--orange-sf); }
.qk-pink{ background:var(--pink-sf); }

/* ─────────────────────────── 모드 3종 ─────────────────────────── */
.modes{ display:flex; flex-direction:column; gap:12px; }
.mode{
  position:relative; overflow:hidden;
  width:100%; display:flex; align-items:center; gap:12px;
  padding:20px 18px; text-align:left; border-radius:var(--r);
  transition:transform .18s cubic-bezier(.2,.85,.3,1), box-shadow .18s;
}
.mode:active{ transform:scale(.975); }
.m-pink  { background:var(--pink-sf);   box-shadow:0 6px 18px rgba(255,77,125,.14); }
.m-orange{ background:var(--orange-sf); box-shadow:0 6px 18px rgba(255,138,61,.16); }
.m-green { background:var(--green-sf);  box-shadow:0 6px 18px rgba(47,201,142,.16); }

.mode-tx{ flex:1; min-width:0; }
.mode-tx em{
  display:block; font-style:normal; font-size:13.5px; font-weight:800;
  letter-spacing:.08em; margin-bottom:4px;
}
.m-pink   .mode-tx em{ color:var(--pink); }
.m-orange .mode-tx em{ color:#E8720F; }
.m-green  .mode-tx em{ color:#17A76F; }
.mode-tx b{ display:block; font-size:19px; font-weight:800; letter-spacing:-.05em; color:var(--tx); }
.mode-tx i{
  display:block; font-style:normal; font-size:15px; color:var(--tx-2);
  margin-top:6px; line-height:1.5; word-break:keep-all; opacity:.85;
}
.mode-ic{ width:62px; height:62px; flex:none; }

.notice{ margin:24px 2px 0; font-size:14.5px; line-height:1.65; color:var(--tx-3); word-break:keep-all; }

/* ─────────────────────────── 추출 화면 ─────────────────────────── */
.back{ display:inline-flex; align-items:center; font-size:15px; font-weight:700; color:var(--tx-2); margin-bottom:14px; }
.draw-hd h2{ margin:0; font-size:27px; font-weight:800; letter-spacing:-.055em; }
.draw-hd p{ margin:7px 0 0; font-size:16px; color:var(--tx-3); word-break:keep-all; }

.picker{ margin-top:20px; background:var(--bg); border-radius:var(--r); box-shadow:var(--sh); padding:16px; }
.picker-hd{ display:flex; align-items:center; justify-content:space-between; font-size:15px; font-weight:600; color:var(--tx-2); margin-bottom:13px; }
.picker-hd b{ color:var(--pink); }
.grid45{ display:grid; grid-template-columns:repeat(9,minmax(0,1fr)); gap:6px; }
.g45{
  aspect-ratio:1; border-radius:50%; background:var(--soft);
  font-size:15px; font-weight:700; color:var(--tx-2);
  display:grid; place-items:center;
  transition:transform .14s cubic-bezier(.2,1.5,.4,1), background .14s, color .14s;
}
.g45:active{ transform:scale(.82); }
.g45.on{ background:var(--pink); color:#fff; transform:scale(1.08); box-shadow:0 3px 8px rgba(255,77,125,.4); }
.picker-tip{ font-size:14.5px; color:var(--tx-3); margin:12px 0 0; }

/* ─────────────────────────── 추출 무대 ─────────────────────────── */
.slot{ margin:22px 0 20px; }
.slot-frame{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,#FFF7DF 0%,#FFEBF1 55%,#F0ECFF 100%);
  border-radius:var(--r); padding:28px 14px 24px;
}
.reels{
  display:flex; align-items:flex-end; justify-content:center; gap:var(--ball-gap);
  min-height:calc(var(--ball-max) + 24px); position:relative; z-index:1;
}
.slot-dot{
  flex:1 1 0; min-width:0; max-width:var(--ball-max);
  aspect-ratio:1; border-radius:50%; background:rgba(255,255,255,.72);
}

.bouncer{ }
.bouncer .ball{ animation:bounce .6s cubic-bezier(.4,0,.6,1) infinite alternate; }
.bouncer .ball:nth-child(1){ animation-delay:0s; }
.bouncer .ball:nth-child(2){ animation-delay:.08s; }
.bouncer .ball:nth-child(3){ animation-delay:.16s; }
.bouncer .ball:nth-child(4){ animation-delay:.24s; }
.bouncer .ball:nth-child(5){ animation-delay:.32s; }
.bouncer .ball:nth-child(6){ animation-delay:.40s; }
@keyframes bounce{
  from{ transform:translateY(0) scaleY(.92) scaleX(1.08); }
  to  { transform:translateY(-28px) scaleY(1.06) scaleX(.96); }
}
.bouncer .ball::before{
  content:''; position:absolute; left:10%; right:10%; bottom:-14px; height:6px;
  border-radius:50%; background:rgba(20,22,40,.14);
  animation:shadow .6s cubic-bezier(.4,0,.6,1) infinite alternate;
  animation-delay:inherit;
}
@keyframes shadow{ from{ transform:scaleX(1); opacity:.55; } to{ transform:scaleX(.5); opacity:.12; } }

.slot-cap{ margin-top:20px; text-align:center; font-size:15.5px; color:var(--tx-3); min-height:20px; font-weight:600; }
.slot.spin .slot-cap{ color:var(--pink); }

.slot-glow{
  position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .5s;
  background:radial-gradient(48% 58% at 50% 42%, rgba(255,255,255,.85), transparent 72%);
}
.slot.spin .slot-glow{ opacity:1; }

/* ─────────────────────────── CTA ─────────────────────────── */
.cta{
  width:100%; height:60px; border-radius:18px;
  background:linear-gradient(120deg,#FF6B8A,#FF4D7D 55%,#FF3D6E);
  color:#fff; font-size:18px; font-weight:800; letter-spacing:-.045em;
  box-shadow:0 8px 22px rgba(255,77,125,.36);
  transition:transform .16s cubic-bezier(.2,.9,.3,1), box-shadow .16s, opacity .2s;
}
.cta:active{ transform:scale(.97); box-shadow:0 4px 12px rgba(255,77,125,.28); }
.cta[disabled]{ opacity:.5; box-shadow:none; }

/* ─────────────────────────── 결과 ─────────────────────────── */
.result{ margin-top:28px; }
.res-hd{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.games{ display:flex; flex-direction:column; gap:10px; }
.game{
  background:var(--bg); border-radius:var(--r); box-shadow:var(--sh); padding:16px;
  animation:up .5s cubic-bezier(.16,.84,.32,1) both;
}
.g-hd{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:12px; font-size:14.5px; }
.g-no{ font-weight:800; color:var(--pink); font-size:15px; }
.g-sum{ color:var(--tx-3); }
.game .ball.fx::before{ content:''; position:absolute; inset:-4px; border-radius:50%; border:3px solid var(--pink); }

.res-why{
  margin-top:16px; padding:18px; background:var(--violet-sf); border-radius:var(--r);
  font-size:15px; line-height:1.75; color:#4A3F7A; word-break:keep-all;
}
.res-why b{ color:var(--violet); font-weight:800; }
.res-act{ display:flex; gap:9px; margin-top:16px; }
.btn-2{
  flex:1; height:52px; border-radius:16px; background:var(--bg);
  color:var(--tx); font-size:16.5px; font-weight:700; box-shadow:var(--sh);
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .16s;
}
.btn-2:active{ transform:scale(.97); }
.btn-2.b-violet{ background:var(--violet-sf); color:#5B41D6; }
.btn-ic{ width:22px; height:22px; flex:none; }

/* ─────────────────────────── 당첨확인 ─────────────────────────── */
.chk-tools{ display:flex; gap:9px; margin:18px 0 20px; }
.rnd{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.rnd label{ font-size:15px; font-weight:600; color:var(--tx-3); flex:none; }
.rnd select{
  flex:1; height:50px; border-radius:16px; padding:0 16px;
  background:var(--bg); border:0; color:var(--tx); box-shadow:var(--sh);
  font-size:16.5px; font-weight:800; font-family:inherit;
  appearance:none; -webkit-appearance:none;
}
.rnd-win{ padding:18px 16px 16px; }

.slots{ display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.slot-row{
  display:flex; align-items:center; gap:10px; padding:13px 14px;
  background:var(--bg); border-radius:var(--r-sm); box-shadow:var(--sh);
  transition:box-shadow .18s;
}
.slot-row.act{ box-shadow:0 0 0 2.5px var(--pink), var(--sh); }
.slot-k{ font-size:15.5px; font-weight:800; color:var(--pink); width:14px; flex:none; }
.sel{ display:flex; gap:6px; flex:1; min-width:0; }
.sel-b{
  width:31px; height:31px; border-radius:50%; flex:none;
  background:var(--soft); color:var(--tx-3);
  font-size:15px; font-weight:700; display:grid; place-items:center;
}
.sel-b.on{ color:#fff; box-shadow:0 2px 6px rgba(20,22,40,.16); }
.sel-b.on.c1{ background:var(--b1); }
.sel-b.on.c2{ background:var(--b2); }
.sel-b.on.c3{ background:var(--b3); }
.sel-b.on.c4{ background:var(--b4); }
.sel-b.on.c5{ background:var(--b5); }
.slot-x{ color:var(--tx-3); font-size:19px; width:18px; flex:none; text-align:right; }
.slot-add{
  width:100%; padding:15px; border-radius:var(--r-sm);
  font-size:16px; font-weight:800; color:var(--pink); background:var(--pink-sf);
}

.chk-res{ margin-top:26px; }
.cr{ background:var(--bg); border-radius:var(--r); box-shadow:var(--sh); padding:16px; margin-bottom:10px; }
.cr-hd{ display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.cr-k{ font-size:15.5px; font-weight:800; color:var(--tx-2); }
.cr-rank{ font-size:14.5px; font-weight:800; padding:5px 11px; border-radius:100px; background:var(--soft); color:var(--tx-3); }
.cr-rank.win{ background:var(--pink); color:#fff; }
.cr-amt{ font-size:15px; font-weight:700; color:var(--tx-3); }
.cr-sum{
  margin-top:18px; padding:26px 16px; border-radius:var(--r); text-align:center; color:#fff;
  background:linear-gradient(135deg,#FF6B8A,#FF4D7D 50%,#7C5CFF 130%);
  box-shadow:0 10px 26px rgba(255,77,125,.3);
}
.cr-sum b{ display:block; font-size:28px; font-weight:800; letter-spacing:-.05em; margin-top:6px; }
.cr-sum span{ font-size:15px; opacity:.9; }
.cr-sum.none{ background:var(--bg); color:var(--tx-2); box-shadow:var(--sh); }
.cr-sum.none b{ color:var(--tx); font-size:18px; }

/* QR 카메라 */
.qr{ position:fixed; inset:0; z-index:300; background:#000; display:none; }
.qr.on{ display:block; }
.qr video{ width:100%; height:100%; object-fit:cover; }
.qr-mask{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; }
.qr-box{ width:min(70vw,300px); aspect-ratio:1; border:3px solid #fff; border-radius:24px; box-shadow:0 0 0 100vmax rgba(0,0,0,.6); }
.qr-cap{ position:absolute; left:0; right:0; bottom:13%; text-align:center; color:#fff; font-size:15px; font-weight:600; }
.qr-close{
  position:absolute; top:calc(env(safe-area-inset-top) + 14px); right:16px; z-index:2;
  width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.25); color:#fff;
  font-size:21px; display:grid; place-items:center; backdrop-filter:blur(6px);
}

/* ─────────────────────────── 분석 ─────────────────────────── */
.stat-blk{ margin:14px 0 0; background:var(--bg); border-radius:var(--r); box-shadow:var(--sh); padding:18px 16px; }
.stat-blk h3{ margin:0 0 16px; font-size:16.5px; font-weight:800; letter-spacing:-.045em; display:flex; align-items:baseline; gap:8px; }
.stat-blk h3 span{ font-size:14.5px; font-weight:500; color:var(--tx-3); }

.rank{ display:flex; flex-direction:column; gap:10px; }
.rank-row{ display:flex; align-items:center; gap:10px; }
.rank-i{ font-size:14px; font-weight:700; color:var(--tx-3); width:13px; flex:none; }
.rank-bar{ flex:1; height:7px; background:var(--soft); border-radius:100px; overflow:hidden; }
.rank-bar i{ display:block; height:100%; background:linear-gradient(90deg,#FF8A3D,#FF4D7D); border-radius:100px; animation:grow .9s cubic-bezier(.2,.9,.3,1) both; }
@keyframes grow{ from{ transform:scaleX(0); transform-origin:left; } to{ transform:scaleX(1); } }
.rank-v{ font-size:14.5px; font-weight:600; color:var(--tx-2); width:62px; text-align:right; flex:none; }

.dist{ display:flex; flex-direction:column; gap:7px; }
.dist-row{ display:flex; align-items:center; gap:10px; font-size:15px; }
.dist-k{ width:76px; flex:none; color:var(--tx-3); }
.dist-bar{ flex:1; height:17px; background:var(--soft); border-radius:7px; overflow:hidden; }
.dist-bar i{ display:block; height:100%; background:#C9CEDA; border-radius:7px; animation:grow .9s cubic-bezier(.2,.9,.3,1) both; }
.dist-bar i.hi{ background:linear-gradient(90deg,#3FAFEE,#7C5CFF); }
.dist-v{ width:44px; text-align:right; font-weight:600; color:var(--tx-2); flex:none; }

.rc{ padding:13px 0; border-bottom:1px solid var(--line); }
.rc:last-child{ border-bottom:0; padding-bottom:0; }
.rc-hd{ display:flex; align-items:baseline; gap:8px; font-size:14.5px; color:var(--tx-3); margin-bottom:9px; }
.rc-hd b{ color:var(--tx); font-size:15.5px; font-weight:800; }

/* ─────────────────────────── 내 번호 ─────────────────────────── */
.empty{
  padding:64px 24px; text-align:center; color:var(--tx-3); font-size:16px; line-height:1.75;
  background:var(--bg); border-radius:var(--r); box-shadow:var(--sh);
}
.empty b{ color:var(--tx-2); }
.saved{ display:flex; flex-direction:column; gap:10px; }
.sv{ background:var(--bg); border-radius:var(--r); box-shadow:var(--sh); padding:16px; }
.sv-hd{ display:flex; align-items:center; gap:8px; font-size:14.5px; color:var(--tx-3); margin-bottom:13px; }
.sv-hd b{ color:var(--tx); font-weight:800; font-size:16px; }
.sv-del{ margin-left:auto; color:var(--tx-3); font-size:14.5px; }
.sv-g{ margin-bottom:11px; }
.sv-g:last-child{ margin-bottom:0; }

/* ─────────────────────────── 하단 탭 ─────────────────────────── */
.tabs{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  max-width:600px; margin:0 auto;
  height:calc(var(--tabh) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.94); backdrop-filter:blur(16px);
  border-top:1px solid rgba(238,239,243,.9); display:flex;
}
.tab{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  color:#7C8091; font-size:13px; font-weight:700; letter-spacing:-.03em;
  transition:color .2s;
}
.tab svg{ width:27px; height:27px; transition:transform .3s cubic-bezier(.2,1.6,.4,1); }
.tab:active svg{ transform:scale(.88); }
.tab.on{ color:var(--pink); font-weight:800; }
.tab.on svg{ transform:translateY(-2px) scale(1.06); }

/* ─────────────────────────── 반응형 ─────────────────────────── */
@media (max-width:359px){
  :root{ --pad:15px; }
  .hero-dday{ font-size:29px; }
  .draw-hd h2{ font-size:24px; }
  .mode-tx b{ font-size:17.5px; }
  .mode-ic{ width:52px; height:52px; }
  .grid45{ grid-template-columns:repeat(8,1fr); }
  .dist-k{ width:66px; }
  .sel-b{ width:28px; height:28px; font-size:13px; }
  .qk-ic{ width:44px; height:44px; }
}
@media (min-width:520px){
  :root{ --ball-max:54px; --ball-gap:8px; --pad:26px; }
}

/* ══════════ 축포 ══════════ */
.confetti{ position:fixed; inset:0; z-index:400; pointer-events:none; overflow:hidden; }
.confetti i{
  position:absolute; top:-20px; width:9px; height:14px; display:block;
  animation:fall linear forwards;
}
@keyframes fall{
  0%  { transform:translateY(-20px) rotate(0deg); opacity:1; }
  100%{ transform:translateY(105vh) rotate(720deg); opacity:.15; }
}

/* ══════════ 로또이즈 성적표 ══════════ */
.wincard{
  position:relative; overflow:hidden;
  margin-top:12px; padding:20px 18px 18px; border-radius:var(--r);
  background:#fff; box-shadow:var(--sh);
  border:2px solid var(--pink-sf);
}
/* 카드를 한 번 훑고 지나가는 빛 */
.wincard::after{
  content:''; position:absolute; top:0; bottom:0; width:45%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.8),transparent);
  transform:translateX(-180%);
  animation:sweep 4.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sweep{ 0%,55%{ transform:translateX(-180%);} 85%,100%{ transform:translateX(340%);} }

.wc-hd{ position:relative; display:flex; align-items:baseline; gap:8px; margin-bottom:15px; }
.wc-t{ font-size:17px; font-weight:800; letter-spacing:-.04em; }
.wc-sub{ margin-left:auto; font-size:13.5px; font-weight:600; color:var(--tx-3); }

/* 큰 숫자 — 카드의 주인공. 트로피 + 회전하는 빛줄기 */
.wc-big{
  position:relative; text-align:center; padding:22px 12px 24px; margin-bottom:15px;
  border-radius:18px; overflow:hidden;
  background:linear-gradient(140deg,#7C5CFF 0%,#FF4D7D 55%,#FF8A3D 130%);
  box-shadow:0 10px 26px rgba(124,92,255,.32);
  color:#fff;
}
/* 뒤에서 천천히 도는 빛줄기 */
.wc-rays{
  position:absolute; left:50%; top:34%; width:340px; height:340px;
  transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,
    rgba(255,255,255,.30) 0deg 8deg, transparent 8deg 30deg,
    rgba(255,255,255,.22) 30deg 36deg, transparent 36deg 60deg,
    rgba(255,255,255,.30) 60deg 68deg, transparent 68deg 90deg,
    rgba(255,255,255,.22) 90deg 96deg, transparent 96deg 120deg,
    rgba(255,255,255,.30) 120deg 128deg, transparent 128deg 150deg,
    rgba(255,255,255,.22) 150deg 156deg, transparent 156deg 180deg,
    rgba(255,255,255,.30) 180deg 188deg, transparent 188deg 210deg,
    rgba(255,255,255,.22) 210deg 216deg, transparent 216deg 240deg,
    rgba(255,255,255,.30) 240deg 248deg, transparent 248deg 270deg,
    rgba(255,255,255,.22) 270deg 276deg, transparent 276deg 300deg,
    rgba(255,255,255,.30) 300deg 308deg, transparent 308deg 330deg,
    rgba(255,255,255,.22) 330deg 336deg, transparent 336deg 360deg);
  -webkit-mask-image:radial-gradient(closest-side,#000 30%,transparent 78%);
  mask-image:radial-gradient(closest-side,#000 30%,transparent 78%);
  animation:spin 22s linear infinite;
  pointer-events:none;
}
@keyframes spin{ to{ transform:translate(-50%,-50%) rotate(360deg); } }

/* 트로피 */
.wc-trophy{
  position:relative; display:block; width:92px; height:92px; margin:0 auto 4px;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.28));
  animation:trophy 3.4s ease-in-out infinite;
}
@keyframes trophy{
  0%,100%{ transform:translateY(0) rotate(-2.5deg); }
  50%    { transform:translateY(-6px) rotate(2.5deg); }
}
/* 트로피 뒤 광채 */
.wc-trophy::before{
  content:''; position:absolute; left:50%; top:52%; width:120px; height:120px;
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,231,150,.55), transparent 62%);
  animation:halo 2.6s ease-in-out infinite; z-index:-1;
}
@keyframes halo{ 0%,100%{ opacity:.5; transform:translate(-50%,-50%) scale(.85);} 50%{ opacity:1; transform:translate(-50%,-50%) scale(1.1);} }

.wc-big em{ position:relative; display:block; font-style:normal; font-size:13.5px; font-weight:700; opacity:.95; }
.wc-big strong{
  position:relative; display:block; margin:1px 0 3px;
  font-size:60px; font-weight:800; letter-spacing:-.07em; line-height:1.02;
  font-variant-numeric:tabular-nums;
  color:#FFF3C4;
  text-shadow:0 0 22px rgba(255,220,120,.7), 0 4px 16px rgba(0,0,0,.25);
  animation:glowNum 2.8s ease-in-out infinite;
}
@keyframes glowNum{
  0%,100%{ text-shadow:0 0 18px rgba(255,220,120,.55), 0 4px 16px rgba(0,0,0,.25); }
  50%    { text-shadow:0 0 34px rgba(255,230,150,.95), 0 4px 16px rgba(0,0,0,.25); }
}
.wc-big strong i{ font-style:normal; font-size:30px; margin-left:2px; }
.wc-big .wc-cap{ position:relative; display:block; font-size:14px; opacity:.95; font-weight:600; }
.wc-spark{ position:absolute; inset:0; pointer-events:none; }
.wc-spark i{
  position:absolute; display:block; border-radius:50%;
  background:rgba(255,255,255,.75);
  animation:twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{ transform:scale(.4) translateY(0); opacity:.2; }
  50%    { transform:scale(1.2) translateY(-8px); opacity:.95; }
}

/* 등급 타일 */
.wc-grid{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; position:relative; }
.wc-i{
  background:var(--soft); border-radius:14px; padding:13px 4px 11px; text-align:center;
  animation:tileIn .55s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes tileIn{ from{ opacity:0; transform:translateY(14px) scale(.86);} to{ opacity:1; transform:none;} }
.wc-i b{
  display:block; font-size:24px; font-weight:800; letter-spacing:-.05em; color:var(--tx-3);
  font-variant-numeric:tabular-nums;
}
.wc-i span{ display:block; margin-top:3px; font-size:13px; font-weight:700; color:var(--tx-3); }
.wc-i.hit b, .wc-i.hit span{ color:#fff; }
.wc-i.hit b{ text-shadow:0 2px 6px rgba(0,0,0,.16); }
.wc-i.hit.g5{ background:linear-gradient(150deg,#FFC93C,#FF8A3D); box-shadow:0 5px 14px rgba(255,138,61,.32); }
.wc-i.hit.g4{ background:linear-gradient(150deg,#FF8A3D,#FF4D7D); box-shadow:0 5px 14px rgba(255,77,125,.34); }
.wc-i.hit.g3,.wc-i.hit.g2,.wc-i.hit.g1{ background:linear-gradient(150deg,#7C5CFF,#FF4D7D); box-shadow:0 5px 16px rgba(124,92,255,.38); }
/* 당첨 타일은 계속 두근거린다 */
.wc-i.hit{ animation:tileIn .55s cubic-bezier(.2,1.6,.4,1) both, beat 2.4s ease-in-out .9s infinite; }
@keyframes beat{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.05);} }

.wc-ft{
  position:relative; margin-top:14px; padding-top:13px; border-top:1px solid var(--line);
  font-size:14px; line-height:1.65; color:var(--tx-2); word-break:keep-all;
}
.wc-ft b{ color:var(--pink); font-weight:800; }

/* 실사용자 현황 — 사람이 모이면 자동으로 채워진다 */
.wc-live{
  position:relative; margin-top:12px; padding:12px 14px; border-radius:14px;
  background:var(--soft); font-size:13.5px; color:var(--tx-2); word-break:keep-all;
}
.wc-live b{ color:var(--pink); font-weight:800; }
.wc-live .dot{
  display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--green);
  margin-right:6px; animation:blink 1.6s ease-in-out infinite;
}
@keyframes blink{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.3; transform:scale(.7);} }

.wc-cute{
  position:relative; margin:14px 2px 2px; font-size:13px; line-height:1.6;
  color:var(--tx-3); text-align:center; word-break:keep-all;
}

/* ══════════ 홈 추가 구성 ══════════ */

/* 2열 미니 통계 카드 */
.mini2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.m2{
  min-width:0; overflow:hidden;
  background:var(--bg); border-radius:var(--r); box-shadow:var(--sh);
  padding:15px 13px; text-align:left;
}
.m2-t{ font-size:14px; min-width:0; font-weight:800; color:var(--tx-3); display:flex; align-items:center; gap:5px; }
.m2-t i{ width:6px; height:6px; border-radius:50%; display:block; }
.m2-pink  .m2-t i{ background:var(--pink); }
.m2-blue  .m2-t i{ background:var(--blue); }
.m2-orange .m2-t i{ background:var(--orange); }
.m2-green .m2-t i{ background:var(--green); }
.m2-row{ display:flex; gap:5px; margin-top:11px; min-width:0; }
.m2-row .ball{ flex:1 1 0; min-width:0; width:auto; height:auto; max-width:32px; font-size:14px; }
.m2-sub{ margin-top:9px; font-size:13px; word-break:keep-all; color:var(--tx-3); }
.m2-big{ margin-top:8px; font-size:24px; font-weight:800; letter-spacing:-.05em; }
.m2-big span{ font-size:14px; font-weight:600; color:var(--tx-3); margin-left:3px; letter-spacing:0; }

/* 최근 회차 리스트 */
/* 최근 당첨번호 — 회차/날짜 한 줄, 공 한 줄. 공을 크게 보여주려고 두 줄로 쓴다 */
.rlist{ background:var(--bg); border-radius:var(--r); box-shadow:var(--sh); padding:4px 16px; }
.rl{ padding:16px 0; border-bottom:1px solid var(--line); }
.rl:last-child{ border-bottom:0; }
.rl-no{
  display:flex; align-items:baseline; gap:8px; margin-bottom:12px;
  font-size:16px; font-weight:800; color:var(--tx);
}
.rl-no em{ font-style:normal; font-size:13.5px; font-weight:500; color:var(--tx-3); }
.rl .ball{ max-width:var(--ball-max); }

/* 더보기 */
.more{
  width:100%; margin-top:10px; padding:14px; border-radius:var(--r-sm);
  background:var(--bg); box-shadow:var(--sh);
  font-size:15.5px; font-weight:700; color:var(--tx-2);
}

/* 푸터 */
.ft{ margin-top:32px; padding:22px 4px 8px; border-top:1px solid var(--line); }
.ft-b{ font-size:15px; font-weight:800; color:var(--tx-2); }
.ft-p{ margin:8px 0 0; font-size:14px; line-height:1.7; color:var(--tx-3); word-break:keep-all; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* 약관 링크 */
.ft-link{ margin:12px 0 0; display:flex; gap:16px; }
.ft-link a{ font-size:13px; color:var(--tx-3); text-decoration:none; }
.ft-link a b{ color:var(--tx-2); font-weight:700; }