/* ══════════════════════════════════════════════════════════════
   skin_game3.css — 화이트톤 캐주얼 게임 UI (2026-10-04)
   Macho 「그냥 이전 ui에 스킨만 바꿨을뿐이야 · 화이트톤의 밝고 캐주얼한 분위기 ·
           말랑말랑한 연출 · 레이아웃·버튼 크기·모양까지 정말 게임답게」
   · skin_game.css / skin_game2.css 위에 얹는다 (html body … 로 이긴다)
   · 남색 띠를 걷고 흰 바탕 + 떠 있는 흰 판 + 색 있는 동그란 아이콘
   · 눌리면 찌그러지고, 뜨는 것은 통 튀어 오른다
   되돌리는 법 = index.html 의 이 파일 <link> 한 줄을 지운다
   ══════════════════════════════════════════════════════════════ */
:root{
  --w-bg:#F6FAFF; --w-card:#FFFFFF; --w-ink:#2B3A55; --w-sub:#8794AB; --w-line:#E4ECF7;
  --w-sh:0 6px 0 #DCE6F3, 0 14px 26px -10px rgba(60,90,140,.28);
  --w-sh-s:0 4px 0 #DCE6F3, 0 8px 16px -8px rgba(60,90,140,.25);
  --c-blue:#4DA3FF; --c-blue-d:#2F7FE0; --c-green:#5FD068; --c-green-d:#37A845;
  --c-yel:#FFC83D; --c-yel-d:#E39A00; --c-pink:#FF7FA8; --c-pink-d:#E0507E;
  --c-pur:#9B7BFF; --c-pur-d:#7450E0; --c-org:#FF9A4D; --c-org-d:#E57218; --c-red:#FF6B6B; --c-red-d:#D94444;
  --spring:cubic-bezier(.34,1.56,.64,1);
}
@keyframes g3pop{0%{transform:scale(.72);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes g3bob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-7px) rotate(-1deg)}}
@keyframes g3pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
@keyframes g3shine{0%{left:-40%}55%,100%{left:130%}}
@keyframes g3up{0%{transform:translateY(16px);opacity:0}100%{transform:none;opacity:1}}

/* ───────── 바탕 ───────── */
html body{ background:var(--w-bg); color:var(--w-ink) }
html body .wrap{
  background-color:var(--w-bg);
  background-image:radial-gradient(circle at 12% 6%,#FFFFFF 0 90px,transparent 91px),
                   radial-gradient(circle at 88% 14%,#EEF5FF 0 120px,transparent 121px),
                   linear-gradient(180deg,#F1F7FF 0%,#FBFDFF 60%,#FFFFFF 100%);
  padding-bottom:112px;
}
html body h3{ color:var(--w-ink) } html body .note, html body .sub{ color:var(--w-sub) }

/* ───────── 누르면 찌그러진다 (전부 공통) ───────── */
html body button{ transition:transform .16s var(--spring), box-shadow .1s, filter .1s }
html body button:active{ transform:scale(.93) !important; filter:brightness(.97) }

/* ───────── 위 : 재화 알약 ───────── */
.g3-top{ display:flex; align-items:center; gap:7px; padding:8px 2px 6px; position:sticky; top:0; z-index:22 }
.g3-top .sp{ flex:1 }
.g3-pill{ display:flex; align-items:center; gap:5px; height:42px; padding:0 9px 0 5px; border-radius:999px; background:#fff;
  box-shadow:var(--w-sh-s); font-family:var(--font-t); font-size:17px; color:var(--w-ink); border:0; cursor:pointer; min-width:0 }
.g3-pill .ic{ width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex:none; color:#fff;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.55), inset 0 -3px 0 rgba(0,0,0,.14) }
.g3-pill .ic svg{ width:19px; height:19px }
.g3-pill.tk .ic{ background:var(--c-pink) } .g3-pill.gd .ic{ background:var(--c-yel) } .g3-pill.cn .ic{ background:var(--c-org) }
.g3-pill .ic i{ width:14px; height:14px; border-radius:50%; border:2.5px solid rgba(255,255,255,.9); display:block }
.g3-pill.cn .ic i{ border-radius:4px 4px 50% 50%; height:15px; width:10px; background:rgba(255,255,255,.9); border:0 }
/* 2026-10-14 재화 그림 하나로 — 위쪽 바도 그림(ob_gold·ob_coin) */
html body .g3-pill.gd .ic, html body .g3-pill.cn .ic{ background:none !important; box-shadow:none !important }
html body .g3-pill .ic img.cur-ic{ width:28px; height:28px; vertical-align:0 }
img.cur-ic{ width:1.25em; height:1.25em; vertical-align:-0.28em; object-fit:contain; display:inline-block }
.g3-pill .t{ font-family:inherit; font-size:11px; color:var(--w-sub); margin-left:1px }
.g3-pill .pl{ width:20px; height:20px; border-radius:50%; background:var(--c-green); color:#fff; font-size:16px; line-height:19px; text-align:center;
  box-shadow:0 2px 0 var(--c-green-d); margin-left:2px; flex:none }
.g3-rnd{ width:40px; height:40px; min-width:40px; border-radius:50%; border:0; background:#fff; box-shadow:var(--w-sh-s); color:var(--c-blue);
  display:flex; align-items:center; justify-content:center; font-size:22px; cursor:pointer; position:relative; padding:0 }
.g3-rnd svg{ width:22px; height:22px }
.g3-top .g3-ttl{ font-family:var(--font-t); font-size:20px; color:var(--w-ink); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:center }
.g3-top.flow{ padding-bottom:8px }

/* ───────── 첫 화면 : 다음 역 무대 ───────── */
/* ★2026-10-14 UX 전수 ③ 결과창 줄이기 — 별·보상·광고·카드·다음 역이 한꺼번에 나와 길었다 */
html body .rs2 .rs2-gotlb{ display:none }
html body .rs2 .rs2-stars{ transform:scale(.82); margin:-6px 0 -8px }
html body .rs2 .rs2-rec{ margin:2px auto 4px }
html body .rs2 .rs2-gain{ margin:4px 0 8px }
html body button.rs2-adx2{ min-height:50px; display:flex; align-items:center; justify-content:center; gap:4px 10px; flex-wrap:wrap; padding:8px 12px }
html body button.rs2-adx2 b{ display:inline; font-size:14.5px }
html body button.rs2-adx2 .rs2-adg{ display:inline; margin:0; font-size:14px }
html body button.rs2-adx2 em{ display:none }
html body .rs2 .rwp{ padding:8px 12px; gap:10px; margin-bottom:8px }
html body .rs2 .rwp-st{ width:48px; height:60px }
html body .rs2 .rwp-b{ width:40px; height:52px }
html body .rs2 .rwp-tx b{ font-size:15.5px }
html body .rs2 .rwp-tx span{ font-size:12.5px }
/* ① 알림 띠 — 판 화면에서는 작게(역 이름판·목표칸을 덜 덮게) */
html body.play .toast{ font-size:13px; padding:7px 14px; max-width:86%; line-height:1.35 }
/* ② 노선도 위 줄 — 그림만 있던 단추에 글 */
html body .vtog .vt{ min-width:0; padding:0 10px; font-size:13px; font-weight:900; white-space:nowrap }
html body .tab.static{ cursor:default; pointer-events:none }
/* ★2026-10-14 UX 전수 — 상점 위 골드·츄르·승차권 큰 칸은 맨 위 알약과 같은 숫자라 자리만 먹었다 → 숨김 */
html body .sh-wallet{ display:none }
html body .sh-wrap > .sh-tabs:first-of-type{ margin-top:4px }
/* ★2026-10-14 홈 「고른 역」 카드 — 노선도 아래, 가로로 낮게 (노선도와 함께 한 화면에) */
.g3-pick{ position:relative; display:grid; grid-template-columns:70px 1fr; gap:6px 12px; align-items:center; background:#fff; border-radius:24px; box-shadow:var(--w-sh); padding:12px 12px 12px; margin:10px 0 12px }
.g3-pick .pk-cat{ position:relative; width:70px; height:93px; border-radius:12px; overflow:hidden; background:#EEF2F8; box-shadow:0 3px 0 var(--w-line); cursor:pointer }
.g3-pick .pk-cat img{ width:100%; height:100%; object-fit:cover; display:block }
.g3-pick .pk-cat img.sil{ filter:brightness(0) opacity(.28) }
.g3-pick .pk-cat .q{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-t); font-size:30px; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.25) }
.g3-pick .pk-cat .gr{ position:absolute; left:4px; top:4px; padding:0 6px; border-radius:999px; background:rgba(43,58,85,.82); color:#fff; font-size:10.5px; font-weight:900; line-height:17px }
.g3-pick .pk-in{ min-width:0 }
.g3-pick .pk-tag{ display:flex; align-items:center; gap:5px; font-size:12px; font-weight:800; color:var(--w-sub) }
.g3-pick .pk-tag i{ width:9px; height:9px; border-radius:50%; background:var(--lc) }
.g3-pick .pk-nm{ display:block; font-family:var(--font-t); font-weight:400; font-size:27px; line-height:1.15; color:var(--w-ink); margin:2px 0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.g3-pick .pk-ms{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 6px; font-size:13px; font-weight:800; color:var(--w-ink); line-height:1.3; padding-right:36px; position:relative }
.g3-pick .pk-ms > *{ white-space:normal }
.g3-pick .pk-ms .qbtn{ position:absolute; right:0; top:50%; translate:0 -50%; width:30px; height:30px; min-width:30px; border-radius:50%; border:0; background:var(--w-bg); color:var(--c-blue); font-weight:900 }
.g3-pick .pk-go{ grid-column:1 / -1 }
.g3-pick .pk-go .g3-play{ width:100%; min-height:60px }
.g3-pick .pk-back{ position:absolute; right:10px; top:10px; min-height:32px; padding:0 11px; border:0; border-radius:999px; background:#EAF3FF; color:#2F6FD0; font-family:inherit; font-size:12px; font-weight:900; cursor:pointer; box-shadow:0 2px 0 #CFE0F7 }
/* 짧은 폰 — 노선도를 줄여 고른 역 카드까지 한 화면에 (360x640 에서 플레이 단추가 탭 밑에 깔렸다) */
@media (max-height:720px){ html body .mapbox{ max-height:max(190px, calc(100vh - 445px)) } }
.g3-stage{ position:relative; background:#fff; border-radius:28px; box-shadow:var(--w-sh); padding:14px 14px 16px; margin:4px 0 12px;
  text-align:center; overflow:hidden; animation:g3up .35s ease both }
.g3-stage::before{ content:''; position:absolute; left:-10%; right:-10%; top:-60px; height:210px; border-radius:50%;
  background:linear-gradient(180deg,color-mix(in srgb,var(--lc,#4DA3FF) 26%,#fff),#fff); opacity:.9 }
.g3-stage > *{ position:relative }
.g3-line{ display:inline-flex; align-items:center; gap:6px; height:26px; padding:0 11px 0 8px; border-radius:999px; background:#fff;
  font-size:12.5px; font-weight:800; color:var(--w-ink); box-shadow:0 2px 0 var(--w-line) }
.g3-line i{ width:10px; height:10px; border-radius:50%; background:var(--lc,#4DA3FF) }
.g3-cat{ width:132px; height:176px; margin:10px auto 6px; border-radius:20px; background:#fff; padding:5px; box-shadow:0 8px 0 rgba(60,90,140,.12), 0 16px 26px -10px rgba(60,90,140,.4);
  animation:g3bob 3.2s ease-in-out infinite; position:relative }
.g3-cat img{ width:100%; height:100%; object-fit:cover; border-radius:15px; display:block }
.g3-cat img.sil{ filter:grayscale(1) blur(7px) brightness(1.15) opacity(.75) }
.g3-cat{ overflow:visible } .g3-cat img{ clip-path:inset(0 round 15px) }
.g3-cat .q{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--font-t); font-size:64px; color:#fff;
  text-shadow:0 4px 0 rgba(60,90,140,.25) }
.g3-cat .gr{ position:absolute; left:-6px; top:-6px; padding:2px 9px; border-radius:999px; background:var(--c-pur); color:#fff; font-family:var(--font-t); font-size:13px;
  box-shadow:0 2px 0 var(--c-pur-d) }
.g3-st small{ display:block; font-size:12px; font-weight:800; color:var(--w-sub) }
.g3-st b{ display:block; font-family:var(--font-t); font-weight:400; font-size:34px; line-height:1.1; color:var(--w-ink) }
.g3-ms{ display:inline-flex; align-items:center; gap:6px; margin:8px auto 12px; padding:4px 5px 4px 12px; border-radius:999px; background:var(--w-bg);
  font-size:13.5px; font-weight:800; color:var(--w-ink); max-width:100% }
.g3-ms .qbtn{ width:34px; height:34px; min-width:34px; border-radius:50%; border:0; background:#fff; color:var(--c-blue); font-weight:900; box-shadow:0 2px 0 var(--w-line) }
.g3-play{ display:block; width:86%; margin:0 auto; min-height:68px; border:0; border-radius:24px; cursor:pointer; position:relative; overflow:hidden;
  background:linear-gradient(180deg,#7BE582,var(--c-green)); color:#fff; font-family:var(--font-t);
  box-shadow:0 7px 0 var(--c-green-d), 0 14px 22px -8px rgba(55,168,69,.6), inset 0 3px 0 rgba(255,255,255,.5);
  animation:g3pulse 1.8s ease-in-out infinite }
.g3-play b{ display:block; font-weight:400; font-size:28px; line-height:1.1; text-shadow:0 3px 0 rgba(0,0,0,.16) }
.g3-play small{ display:block; font-size:12.5px; opacity:.95; margin-top:1px }
.g3-play::after{ content:''; position:absolute; top:-20%; bottom:-20%; width:26%; left:-40%; transform:skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); animation:g3shine 2.8s ease-in-out infinite }
.g3-play:active{ box-shadow:0 2px 0 var(--c-green-d) !important; transform:translateY(5px) scale(.98) !important; animation:none }
.g3-play.no{ background:linear-gradient(180deg,#FFD9A0,var(--c-org)); box-shadow:0 7px 0 var(--c-org-d), inset 0 3px 0 rgba(255,255,255,.5); animation:none }

/* ───────── 판·카드 : 흰 판이 떠 있다 ───────── */
html body .card, html body .stn, html body .mapcard, html body .spot, html body .shopcard, html body .mislab,
html body .sh-card, html body .sh-wallet>div, html body .wk-week, html body .rl-week, html body .cx-box, html body .dk-bonus,
html body .dk-card, html body .warn, html body .k-panel, html body .sh-res, html body .mapbox, html body .season{
  background:#fff; border:0; border-radius:22px; box-shadow:var(--w-sh-s);
}
html body .warn, html body .wk-week, html body .sh-res{ background:#FFF8E1; box-shadow:0 4px 0 #F3E3B0 }
html body .season{ padding:8px 12px; margin:0 0 10px }
html body .season .season-tag{ background:var(--c-pur); color:#fff; border-radius:999px; padding:2px 9px }
html body .qbtn{ border-radius:50% }
html body .sh-c, html body .cx-card{ border-color:var(--w-line); border-radius:16px }
html body .cx-bar, html body .wk-bar, html body .prog{ background:var(--w-line); box-shadow:none }
html body .pill{ background:var(--w-bg); color:var(--w-ink) }

/* ───────── 단추 ───────── */
html body .k-btn, html body .btn, html body .tab, html body .bigbtn.sub, html body .cx-sw button, html body .sh-t, html body .cx-ax{
  border-radius:18px; background:#fff; color:var(--w-ink); text-shadow:none;
  box-shadow:0 5px 0 #DCE6F3, 0 8px 14px -8px rgba(60,90,140,.3);
}
html body .btn.on, html body .tab.on, html body .cx-sw button.on, html body .sh-t.on, html body .cx-ax.on, html body .vtog .vt.on{
  background:linear-gradient(180deg,#7CC0FF,var(--c-blue)); color:#fff; box-shadow:0 5px 0 var(--c-blue-d), inset 0 2px 0 rgba(255,255,255,.5);
}
html body .k-btn.blue, html body .k-btn.green, html body .bigbtn, html body .qbox .qclose{
  border-radius:20px; background:linear-gradient(180deg,#7BE582,var(--c-green)); color:#fff;
  box-shadow:0 6px 0 var(--c-green-d), inset 0 3px 0 rgba(255,255,255,.5); text-shadow:0 2px 0 rgba(0,0,0,.15);
}
html body .k-btn.yellow{ border-radius:20px; background:linear-gradient(180deg,#FFE07A,var(--c-yel)); color:#6B4300; box-shadow:0 6px 0 var(--c-yel-d), inset 0 3px 0 rgba(255,255,255,.6) }
html body .k-btn.red{ border-radius:20px; background:linear-gradient(180deg,#FF9A9A,var(--c-red)); color:#fff; box-shadow:0 6px 0 var(--c-red-d), inset 0 3px 0 rgba(255,255,255,.45) }
html body .cx-tab, html body .cx-chip, html body .dk-wc, html body .chip{ background:#fff; color:var(--w-ink); box-shadow:0 3px 0 #DCE6F3 }
html body .cx-tab.on, html body .cx-chip.on, html body .chip.on{ background:var(--c-blue); color:#fff; box-shadow:0 3px 0 var(--c-blue-d) }
html body .vtog{ background:#fff; box-shadow:var(--w-sh-s) }
html body .zoom button{ background:#fff; color:var(--c-blue); box-shadow:0 4px 0 #DCE6F3 }
html body .mailbtn{ background:#fff; box-shadow:var(--w-sh-s) }

/* ───────── 아래 메뉴 : 떠 있는 흰 띠 + 색 동그라미 ───────── */
html body .tabbar{
  left:50%; right:auto; transform:translateX(-50%); width:calc(100% - 20px); max-width:380px; bottom:calc(10px + env(safe-area-inset-bottom,0px));
  background:#fff; border-radius:28px; padding:8px 6px 7px; box-shadow:0 6px 0 #DCE6F3, 0 16px 30px -8px rgba(60,90,140,.4);
}
html body .tabbar button{ min-height:60px; padding:0; gap:2px; color:var(--w-sub) }
html body .tabbar button::after, html body .tabbar button.on::after{ display:none }
html body .tabbar button .ic{
  width:46px; height:46px; padding:9px; border-radius:50%; color:#fff; filter:none;
  background:var(--tc,#4DA3FF); box-shadow:0 4px 0 var(--tcd,#2F7FE0), inset 0 3px 0 rgba(255,255,255,.5);
  transition:transform .28s var(--spring);
}
html body .tabbar button[data-k=map]  { --tc:var(--c-blue); --tcd:var(--c-blue-d) }
html body .tabbar button[data-k=deck] { --tc:var(--c-org);  --tcd:var(--c-org-d) }
html body .tabbar button[data-k=codex]{ --tc:var(--c-pur);  --tcd:var(--c-pur-d) }
html body .tabbar button[data-k=shop] { --tc:var(--c-yel);  --tcd:var(--c-yel-d) }
html body .tabbar button[data-k=rank] { --tc:var(--c-green); --tcd:var(--c-green-d) }   /* 랭킹 탭 (2026-10-07) — 색이 없으면 켜졌을 때 흰 바탕에 흰 아이콘이 된다 */
html body .tabbar button .tx{ font-family:var(--font-t); font-size:12px; color:var(--w-sub); opacity:1; transform:none; font-weight:400 }
html body .tabbar button.on .ic{ transform:translateY(-14px) scale(1.12); box-shadow:0 5px 0 var(--tcd), 0 0 0 5px #fff, 0 12px 16px -4px rgba(60,90,140,.45), inset 0 3px 0 rgba(255,255,255,.5); color:#fff; background:var(--tc) }
html body .tabbar button.on .tx{ color:var(--w-ink); transform:translateY(-6px) }
html body .tabbar button:active .ic{ transform:scale(.88) }
html body .toast{ background:#fff; color:var(--w-ink); box-shadow:var(--w-sh); bottom:auto; top:calc(6px + env(safe-area-inset-top,0px)); transform:translate(-50%,-12px); z-index:60 }
html body .toast.on{ transform:translate(-50%,0) }
/* ★2026-10-14 FGT 「알림 띠가 목표 칸·노선도·확률 글자를 덮는다」 — 모든 화면에서 맨 위 가장자리(재화·역 이름 막대 자리)로. 그 막대는 2초 가려도 된다 */

/* ───────── 플레이 화면 ───────── */
html body.play, html body.play .wrap{
  background-color:#EAF4FF;
  background-image:radial-gradient(circle at 14% 10%,#FFFFFF 0 46px,transparent 47px),radial-gradient(circle at 27% 12%,#FFFFFF 0 30px,transparent 31px),
                   radial-gradient(circle at 84% 22%,#FFFFFF 0 52px,transparent 53px),linear-gradient(180deg,#DDEEFF 0%,#EEF7FF 55%,#F9FCFF 100%);
}
html body.play .wrap{ padding-bottom:20px }
html body.play .hud{ background:#fff; border-radius:26px; box-shadow:var(--w-sh); padding:9px; margin-bottom:9px }
html body.play .hud .box.gl{ background:var(--w-bg); box-shadow:none; border-radius:18px }
html body.play .hud .box.gl b, html body.play .hud .box.gl .ml{ color:var(--w-ink) }
html body.play .hud .box.mv b{ background:#fff; color:var(--c-blue-d); border:5px solid var(--c-yel); box-shadow:0 4px 0 var(--c-yel-d); white-space:nowrap }
html body.play .hud .box.mv b small{ font-size:.48em; margin-left:1px; vertical-align:.08em }   /* 2026-10-14 시간제 판 「56초」 — 「초」만 작게 */
html body.play .hud .box.mv span{ color:var(--w-sub); text-shadow:none }
html body.play .restore, html body.play .restore.slim{ background:#fff; box-shadow:0 3px 0 #DCE6F3 }
html body.play .restore .rs-track{ background:var(--w-line) }
html body.play .restore .rs-lab, html body.play .restore .rs-lab em{ color:var(--w-ink) !important }
/* ★2026-10-14 역 이름판 — 예전 제목 줄 높이(44px)에 맞춰 아래 화면이 밀리지 않게 */
.g3-sign{ flex:1; min-width:0; margin:0 8px; background:#fff; border-radius:12px; box-shadow:0 3px 0 #D3DEEC; overflow:hidden }
.g3-sign .gs-r1{ display:flex; align-items:center; justify-content:center; gap:6px; height:26px; padding:0 6px }
.g3-sign .gs-no{ flex:none; width:20px; height:20px; border-radius:50%; background:var(--lc); color:#fff; font:900 12px/20px system-ui,sans-serif; text-align:center }
.g3-sign .gs-nm{ font-family:var(--font-t); font-size:18px; font-weight:900; color:#1d2433; letter-spacing:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:26px }
.g3-sign .gs-bar{ display:flex; justify-content:space-between; align-items:center; gap:6px; height:18px; padding:0 8px; background:var(--lc); color:#fff; font-size:11.5px; font-weight:800; white-space:nowrap }
.g3-sign .gs-bar span{ max-width:48%; overflow:hidden; text-overflow:ellipsis }
/* ★전동차 진행도 — 예전 「도색 복원」 막대와 같은 높이(32px) */
.g3-trk{ display:flex; align-items:center; gap:6px; height:32px; box-sizing:border-box; padding:0 12px; margin:0 0 9px; background:#fff; border-radius:16px; box-shadow:0 3px 0 #DCE6F3 }
html body.play .g3-trk{ margin-bottom:9px }
.g3-trk .gt-st{ flex:none; max-width:30%; overflow:hidden; text-overflow:ellipsis; font-size:12.5px; font-weight:900; color:#1d2433; white-space:nowrap }
.g3-trk .gt-pct{ flex:none; font-style:normal; font-size:12.5px; font-weight:900; color:var(--lc) }
.g3-trk .gt-line{ position:relative; flex:1; height:8px; border-radius:4px; background:#E3EAF3; margin:0 14px }
.g3-trk .gt-line i{ position:absolute; left:0; top:0; bottom:0; width:0; border-radius:4px; background:var(--lc); transition:width .5s ease }
.g3-trk .gt-d{ position:absolute; top:50%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%; background:#fff; border:3px solid var(--lc); box-sizing:border-box }
.g3-trk .gt-d.a{ left:0 } .g3-trk .gt-d.b{ left:100%; border-color:#B8C4D4 } .g3-trk .gt-line.done .gt-d.b{ border-color:var(--lc); background:var(--lc) }
.g3-trk .gt-train{ position:absolute; left:0; top:50%; width:28px; height:28px; margin:-16px 0 0 -14px; transition:left .5s cubic-bezier(.3,1.3,.5,1); filter:drop-shadow(0 2px 2px rgba(0,0,0,.25)); pointer-events:none }
html body.play #m3host{ border:8px solid #fff; border-radius:26px; background:#D6E6F8; box-shadow:var(--w-sh) }
html body.play .bl-board{ background:#D6E6F8; border-radius:16px }
html body.play .bl-item{ border-radius:28% }
html body .tt-tip{ background:#fff; color:var(--w-ink); box-shadow:var(--w-sh-s) }

/* ───────── 팝업 : 흰 창이 통 튀어 오른다 ───────── */
html body .result{ background:rgba(43,58,85,.5) }
html body .result .inner, html body .certbox, html body .qbox, html body .cp-box, html body .tt-mbox{
  background:#fff; border-radius:30px; box-shadow:0 10px 0 #DCE6F3, 0 26px 50px -10px rgba(30,50,90,.5); animation:g3pop .42s var(--spring) both;
}
html body .ml-box{ background:#fff; box-shadow:0 -10px 40px rgba(30,50,90,.25) }
html body .rs2 .rs2-top > b, html body .result .inner > b:first-child{ border-radius:999px; padding:9px 30px 11px }
html body .rs2 .rs2-top > b{ background:linear-gradient(180deg,#7CC0FF,var(--c-blue)); box-shadow:0 5px 0 var(--c-blue-d), inset 0 3px 0 rgba(255,255,255,.5) }
html body .rs2 .rs2-gain .gi, html body .rs2 .rs2-gain .gi.coin{ background:var(--w-bg); border:0; color:var(--w-ink) }
html body .rs2 .rs2-rec.new{ background:#FFF3C4 }
html body .rs2-x, html body .cp-x, html body .ml-x{ box-shadow:0 4px 0 var(--c-red-d), 0 0 0 4px #fff; background:linear-gradient(180deg,#FF9A9A,var(--c-red)) }
html body button.rs2-adx2{ border-radius:20px; background:linear-gradient(180deg,#B9A2FF,var(--c-pur)); box-shadow:0 6px 0 var(--c-pur-d), inset 0 3px 0 rgba(255,255,255,.45) }
html body .lo-btn{ border-radius:20px }
html body .cp-full{ background:#fff; color:var(--w-ink); box-shadow:0 5px 0 #DCE6F3 }
html body .qbox h4, html body .certbox h3, html body .ml-h{ color:var(--w-ink) }
html body .qbox .qrow{ border-top-color:var(--w-line) }

/* ───────── 못 만난 카드 : 까만 칸 대신 밝은 빈 칸 ───────── */
html body .cf-locked .cf-in{ background:#EDF2FA !important }
html body .cf-locked .cf-in img{ opacity:0 }
html body .cf-locked .cf-lock{ color:#B7C4D9; text-shadow:0 2px 0 #fff }
html body .cf-locked .cf-nm{ color:#A9B6CB; background:transparent }

/* ───────── 판 아래 응원석 : 주인공 고양이 + 말풍선 ───────── */
html body.play #view{ display:flex; flex-direction:column; min-height:calc(100dvh - 86px) }
.g3-dock{ margin-top:auto; padding-top:12px; display:flex; align-items:center; gap:12px }
.g3-mas{ width:76px; height:76px; flex:none; border-radius:50%; background:#fff; padding:4px; box-shadow:var(--w-sh-s); animation:g3bob 3s ease-in-out infinite }
.g3-mas img{ width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:50% 30%; display:block }
.g3-mas.hop{ animation:g3hop .5s var(--spring) }
.g3-say{ position:relative; flex:1; min-width:0; background:#fff; border-radius:20px; padding:12px 14px; font-size:15px; font-weight:800; color:var(--w-ink);
  box-shadow:var(--w-sh-s); line-height:1.35 }
.g3-say::before{ content:''; position:absolute; left:-7px; top:50%; width:16px; height:16px; background:#fff; transform:translateY(-50%) rotate(45deg); border-radius:3px }
.g3-say.pop{ animation:g3pop .36s var(--spring) }
/* 처음 보는 장애물 안내 (2026-10-14) — 목표 문구와 구분되게 노란 바탕 */
.g3-say.tip{ background:#FFF4C9; box-shadow:0 0 0 2px #F2B300 inset; color:#5a3d00 }
@keyframes g3hop{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-14px) scale(1.08,.94)}70%{transform:translateY(0) scale(.95,1.06)}100%{transform:none}}
@media (max-height:700px){ html body.play .wrap{ padding-bottom:8px } .g3-dock{ padding-top:2px } .g3-mas{ width:48px; height:48px } .g3-say{ padding:8px 12px; font-size:14px } body:has(.tt-tip) .g3-dock{ opacity:0 } }

/* ───────── 덱 바 = 스킬 단추 (2026-10-04) — 「카드에 기능이 없나?」 그림만 보여서 스킬인 줄 몰랐다 ───────── */
html body.play .cd-bar{ display:flex; justify-content:center; gap:8px; margin-top:12px }
html body.play .cd-slot{ width:auto; flex:1 1 0; max-width:112px; min-width:0; background:#fff; border-radius:20px; padding:6px 6px 7px; box-shadow:var(--w-sh-s);
  transition:transform .2s var(--spring) }
html body.play .cd-slot .cd-face{ border-radius:14px; overflow:hidden; aspect-ratio:5/4; height:auto; border-width:0 !important; box-shadow:none !important }
html body.play .cd-slot .cd-face img{ width:100%; height:100%; object-fit:cover; object-position:50% 28%; display:block }
html body.play .cd-slot .cd-rk{ border-radius:999px; font-family:var(--font-t) }
html body.play .cd-g{ height:16px; margin-top:6px; border-radius:999px; background:var(--w-line); overflow:hidden }
html body.play .cd-g>i{ background:linear-gradient(180deg,#7CC0FF,var(--c-blue)) !important; border-radius:999px }
html body.play .cd-g>b{ line-height:16px; font-size:11px; color:var(--w-ink); text-shadow:0 1px 0 #fff }
html body.play .cd-name.cd-sk{ font-size:12px; font-weight:800; color:var(--w-ink); margin-top:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.3px }
html body.play .cd-slot.ready{ animation:g3ready .9s ease-in-out infinite; box-shadow:0 6px 0 var(--c-green-d), 0 0 0 3px var(--c-green), 0 12px 20px -6px rgba(55,168,69,.6) }
html body.play .cd-slot.ready .cd-g>i{ background:linear-gradient(180deg,#7BE582,var(--c-green)) !important }
html body.play .cd-slot.ready .cd-g>b{ color:#fff; text-shadow:0 1px 0 rgba(0,0,0,.25); font-family:var(--font-t); font-size:12px }
@keyframes g3ready{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-6px) scale(1.04)}}
/* 덱이 있으면 응원석은 말풍선만 — 고양이는 이미 위에 앉아 있다 */
html body.play .cd-bar:not(:empty) + .g3-dock .g3-mas{ display:none }
html body.play .cd-bar:not(:empty) + .g3-dock .g3-say{ text-align:center; padding:9px 12px }
html body.play .cd-bar:not(:empty) + .g3-dock .g3-say::before{ left:50%; top:-6px; transform:translateX(-50%) rotate(45deg) }
/* 알림은 판 위쪽으로 — 아래에 뜨면 스킬 단추를 가린다 */
html body.play .toast{ bottom:auto; top:calc(6px + env(safe-area-inset-top,0px)) }   /* 전엔 58px — 목표 칸을 덮었다 (2026-10-14) */

/* ───────── 스킬 잠금 · 패시브 띠 (2026-10-05) ───────── */
html body.play .cd-slot.ready.lock{ animation:none; transform:none; box-shadow:var(--w-sh-s); opacity:.85 }
html body.play .cd-slot.ready.lock .cd-g>i{ background:linear-gradient(180deg,#C9D3E2,#AEBBD0) !important }
html body.play .cd-slot.ready.lock .cd-g>b{ color:var(--w-ink); text-shadow:none; font-family:inherit; font-size:10.5px }
html body.play .cd-face{ position:relative }
html body.play .cd-psv{ position:absolute; left:4px; right:4px; bottom:4px; padding:2px 4px; border-radius:999px; background:rgba(255,255,255,.92);
  color:var(--c-pur-d); font-size:10px; font-weight:900; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.4px;
  box-shadow:0 1px 3px rgba(60,90,140,.25) }

/* ───────── 클리어 도장 배너 · 광고 대기 창 — 남은 어두운 창 두 개 ───────── */
html body .cele-banner .banner{ background:#fff; border:0; border-radius:28px; padding:16px 26px 14px;
  box-shadow:0 8px 0 #DCE6F3, 0 22px 40px -10px rgba(30,50,90,.45) }
html body .cele-banner .banner .big{ color:var(--w-ink); text-shadow:none; font-family:var(--font-t); font-weight:400 }
html body .cele-banner .banner .sub2{ color:var(--c-green-d); text-shadow:none }
html body .cele-banner .glow{ background:radial-gradient(circle,rgba(255,224,122,.75) 0%,rgba(255,224,122,0) 70%) }
html body .cele-banner .stamp{ background:#fff; border-color:var(--c-red); color:var(--c-red); text-shadow:none;
  box-shadow:0 0 0 4px rgba(255,107,107,.2) inset, 0 8px 0 rgba(217,68,68,.25), 0 16px 30px rgba(217,68,68,.3); font-family:var(--font-t); font-weight:400 }
html body .cele-banner .stamp.big{ border-color:var(--c-yel); color:var(--c-yel-d) }
html body .ad-dim{ background:rgba(43,58,85,.55) }
html body .ad-box{ background:#fff; border:0; border-radius:30px; color:var(--w-ink); box-shadow:0 10px 0 #DCE6F3, 0 26px 50px -10px rgba(30,50,90,.5);
  animation:g3pop .42s var(--spring) both }
html body .ad-s{ color:var(--w-sub) }
html body .ad-n{ color:var(--c-blue-d); font-family:var(--font-t); font-weight:400 }
html body .ad-bar{ height:12px; background:var(--w-line); border-radius:999px }
html body .ad-bar i{ background:linear-gradient(180deg,#7CC0FF,var(--c-blue)); border-radius:999px }
html body .ad-btn{ border-radius:20px; background:#EEF2F8; color:var(--w-sub); min-height:54px; font-family:var(--font-t); font-weight:400; font-size:17px }
html body .ad-btn.on{ background:linear-gradient(180deg,#7BE582,var(--c-green)); color:#fff; box-shadow:0 6px 0 var(--c-green-d), inset 0 3px 0 rgba(255,255,255,.5) }

/* 짧은 화면(360x640) — 세로 4px 넘치던 것 */
@media (max-height:700px){ html body.play .hud{ padding:7px; margin-bottom:6px } html body.play .cd-bar{ margin-top:8px } }

html body.play .cd-psv::before{ content:'🔮'; margin-right:1px; font-size:9px }
/* 짧은 화면(높이 700 이하) + 덱이 있을 때 — 카드 그림을 띠로 줄이고 응원석은 걷는다 (360x640 에서 114px 넘쳤다) */
@media (max-height:700px){
  html body.play .cd-slot{ padding:4px 4px 5px; border-radius:16px }
  html body.play .cd-slot .cd-face{ aspect-ratio:auto; height:38px; border-radius:11px }
  html body.play .cd-slot .cd-face img{ object-position:50% 22% }
  html body.play .cd-slot .cd-rk{ font-size:9px; padding:0 5px }
  html body.play .cd-psv{ bottom:2px; font-size:9px; padding:0 3px }
  html body.play .cd-g{ height:14px; margin-top:4px } html body.play .cd-g>b{ line-height:14px }
  html body.play .cd-name.cd-sk{ font-size:11px; margin-top:3px }
  html body.play .cd-bar:not(:empty) + .g3-dock{ display:none }
  html body.play .revealbar, html body.play .restore{ margin-bottom:5px }
}
@media (max-height:700px){
  html body.play .hud .box.gl .ic{ display:none }                 /* 목표 그림 — 숫자 칸 색으로 이미 보인다 */
  html body.play .hud .box.mv b{ width:62px; height:62px; line-height:52px; font-size:28px }
  html body.play .restore{ margin-bottom:4px !important }
  html body.play .cd-bar{ padding-top:2px !important; margin-top:6px }
}
/* 등급 표시는 위 왼쪽으로 — 아래쪽 패시브 띠가 덮었다 (2026-10-05) */
html body.play .cd-slot .cd-rk{ top:4px; bottom:auto; left:4px; right:auto; border-radius:999px; padding:0 6px; line-height:16px; box-shadow:0 1px 3px rgba(0,0,0,.2) }
/* 첫 3판 새 카드 — 단추 없이 바로 펼친 칸 (2026-10-05) */
html body .g3-newcards{ background:#FFF8E1; border-radius:20px; padding:10px 8px 6px; margin:0 0 10px; box-shadow:0 4px 0 #F3E3B0; animation:g3pop .45s var(--spring) both }

/* ═══ 2026-10-05 Macho 플레이 지적 3종 ═══════════════════════════════
   ① 「블럭이 정사각형이 아닌 것처럼 보여 — 윗부분을 입체적으로 보이려고 밝기를 줬는데 개선해야 해」
      원인 : skin_game.css 가 위 4px 흰 띠 · 아래 5px 검은 띠를 딱 끊어 그려서, 안쪽 면이 가로로 긴 네모로 보였다.
             블록끼리 틈도 없이 붙어 있었다.
      고침 : 위아래가 대칭인 네모 — 띠 대신 부드러운 광택 한 점 + 고른 테두리 + 블록 사이 2px 틈
   ② 「블럭 화살표 · 특수블럭 아이콘 중앙정렬」
      원인 : ↔ ↕ ✹ ❂ 를 글자로 찍었다. 글꼴마다 그림이 비켜 앉고, 아래쪽 검은 띠 때문에 면 가운데보다 처져 보였다.
      고침 : (12,12) 대칭 SVG 그림으로 — 칸 가운데에 정확히
   ③ 「우측 상단 승차권 이미지 뒤 원형 이미지 삭제」 — 무엇인지 알 수 없는 분홍 동그라미 */
/* ★2026-10-05 Macho 「블럭은 이전 이미지가 더 나아 보여 — 블럭을 5%만 줄이고 블럭 사이 간격을 아주 조금」
   → 위 ① 의 새 모양(광택·대칭)은 걷어 냈다. 예전 젤리 모양(skin_game.css 띠 + 둥근 28%)을 그대로 두고,
     투명 테두리 1px 로 블록만 약 5% 줄여 칸 사이에 2px 틈을 낸다(37px 칸 → 35px 블록). 아이콘 SVG 는 그대로 */
html body.play .bl-item{
  border-width:1px !important; border-style:solid !important; border-color:transparent !important;
  background-clip:padding-box !important;
}
html body.play .bl-item.bl-sp::after{
  content:'' !important; inset:0; text-shadow:none !important;
  background-position:center; background-repeat:no-repeat; background-size:68%;
  filter:drop-shadow(0 1px 1.2px rgba(0,0,0,.4));
}
html body.play .bl-item.bl-rocket::after { background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cpath d=%22M2.4 12 7.7 6.7v3.4h8.6V6.7l5.3 5.3-5.3 5.3v-3.4H7.7v3.4z%22 fill=%22%23fff%22 stroke=%22%23000%22 stroke-opacity=%22.38%22 stroke-width=%221.1%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") }
html body.play .bl-item.bl-rocketV::after{ background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cg transform=%22rotate(90 12 12)%22%3E%3Cpath d=%22M2.4 12 7.7 6.7v3.4h8.6V6.7l5.3 5.3-5.3 5.3v-3.4H7.7v3.4z%22 fill=%22%23fff%22 stroke=%22%23000%22 stroke-opacity=%22.38%22 stroke-width=%221.1%22 stroke-linejoin=%22round%22/%3E%3C/g%3E%3C/svg%3E") }
html body.play .bl-item.bl-bomb::after   { background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Ccircle cx=%2211.6%22 cy=%2213.4%22 r=%226.9%22 fill=%22%232E3346%22 stroke=%22%23fff%22 stroke-width=%221.9%22/%3E%3Cpath d=%22M15.6 8.6 17.9 6.3%22 stroke=%22%23fff%22 stroke-width=%222%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%2218.9%22 cy=%225.3%22 r=%222.1%22 fill=%22%23FFD23F%22 stroke=%22%23fff%22 stroke-width=%22.9%22/%3E%3Ccircle cx=%229.3%22 cy=%2211.2%22 r=%221.9%22 fill=%22%23fff%22 fill-opacity=%22.6%22/%3E%3C/svg%3E"); background-size:74% }
html body.play .bl-item.bl-relic::after  { background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22%3E%3Cdefs%3E%3ClinearGradient id=%22r%22 x1=%220%22 y1=%220%22 x2=%221%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FF5F6D%22/%3E%3Cstop offset=%22.35%22 stop-color=%22%23FFD36B%22/%3E%3Cstop offset=%22.65%22 stop-color=%22%236DD5FF%22/%3E%3Cstop offset=%221%22 stop-color=%22%23B07CFF%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M12.00 1.80 L13.68 7.93 L19.21 4.79 L16.07 10.32 L22.20 12.00 L16.07 13.68 L19.21 19.21 L13.68 16.07 L12.00 22.20 L10.32 16.07 L4.79 19.21 L7.93 13.68 L1.80 12.00 L7.93 10.32 L4.79 4.79 L10.32 7.93Z%22 fill=%22url(%2523r)%22 stroke=%22%23fff%22 stroke-width=%221.5%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%222.3%22 fill=%22%23fff%22/%3E%3C/svg%3E"); background-size:78% }
/* 얼음·상자·금 같은 덧그림도 둥근 모서리를 블록과 맞춘다 */
html body.play .bl-item.bl-ice::before, html body.play .bl-item.bl-box::before, html body.play .bl-item.bl-gold::before,
html body.play .bl-item.bl-seal::before, html body.play .bl-item.bl-root::before, html body.play .bl-item.bl-drop::before{ border-radius:22% }

/* ③ 승차권 알약 — 뒤 동그라미를 없애고 승차권 그림만 */
html body .g3-pill.tk .ic{ background:none !important; box-shadow:none !important; width:34px; height:30px }
html body .g3-pill.tk .ic svg{ width:30px; height:30px }

/* 실패창 — 광고 보고 이어하기 (2026-10-05) */
html body .lo-btn.ad{ background:linear-gradient(180deg,#B9A2FF,#9B7BFF) !important; color:#fff !important; box-shadow:0 5px 0 #7450E0, inset 0 2px 0 rgba(255,255,255,.45) !important; border:0 !important }
html body .lo-btn.ad span{ color:#fff; opacity:.92 }
/* 무제한 승차 중 — 알약이 분홍으로 */
html body .g3-pill.tk.unl{ background:#FFE4EE }
html body .g3-pill.tk.unl #hkN{ color:#C2185B; font-size:20px }
html body .g3-pill.tk.unl .t{ color:#C2185B }

/* 이겨서 승차권을 돌려받았다 (2026-10-05) */
html body .rs2 .rs2-gain .gi.tk{ background:#FFE4EE; color:#C2185B }

/* ★봇2차 (2026-10-05) — 44px 보다 작은 누름 자리.
   도감 역 이름(13px 띠)은 카드를 누르려다 걸려 노선도로 넘어갔다 → 누르지 않게 한다(카드 창 안 역 링크로 간다).
   닫기·나가기 동그라미 40 → 44. 물음표는 보이는 크기는 두고 누름 자리만 넓힌다 */
html body .cx-stn{ pointer-events:none; text-decoration:none }
html body .g3-rnd, html body .ml-x, html body .cp-x, html body .rs2-x{ width:44px !important; height:44px !important; min-width:44px !important; min-height:44px; line-height:44px }
html body .cp-st.go{ min-height:44px; box-sizing:border-box }
html body .mx-link{ min-height:44px }
html body .g3-ms .qbtn{ position:relative }
html body .g3-ms .qbtn::after{ content:''; position:absolute; inset:-5px; border-radius:50% }

/* 봇2차 남은 누름 자리 (2026-10-05) — 다른 선택 34 · 도감 탭 36 · 지도/목록 38 → 44 */
html body .rs2 .rs2-more{ min-height:44px }
html body .cx-tab{ min-height:44px }
html body .vtog .vt{ min-height:44px }

/* ⚙️ 설정 단추 (2026-10-06) — 쪽지함과 같은 동그라미 */
html body .g3-top .setbtn{ margin-left:6px; color:#5E6F94; display:inline-flex; align-items:center; justify-content:center }

/* ★덱 편성 안내 (2026-10-06) — 칸 아래 한 줄 · 카드마다 넣기/빼기 · 빈 칸 ＋ 고르기 창 */
html body .dk-guide{ margin:10px 2px 4px; padding:10px 12px; border-radius:14px; background:#EAF4FF; color:#2a4a7a; font-size:13.5px; line-height:1.55 }
html body .dk-guide b{ color:#1f6fd0 }
html body .dk-guide span{ color:#6a7a94; font-size:12.5px }
html body .dk-slot.lock{ cursor:pointer }
html body .dk-slot.lock .dk-lockin{ font-size:12px; line-height:1.35; text-align:center; color:#8a96aa; font-weight:800 }
html body .dk-card{ position:relative }
html body .dk-eqb{ align-self:center; flex:none; min-width:60px; min-height:44px; padding:0 12px; margin-left:6px; border:0; border-radius:12px; background:linear-gradient(180deg,#5CB2FF,#3D8EF0); color:#fff; font:900 15px/1 inherit; font-family:inherit; box-shadow:0 3px 0 #2A6FC4; cursor:pointer }
html body .dk-eqb.off{ background:#fff; color:#6a7a94; box-shadow:0 0 0 2px #DCE3EE inset, 0 3px 0 #DCE3EE }
html body .dkp-bg{ position:fixed; inset:0; z-index:75; background:rgba(20,30,50,.42); display:flex; align-items:flex-end; justify-content:center }
html body .dkp-sh{ width:100%; max-width:480px; max-height:80vh; max-height:80dvh; background:#F4F6FA; border-radius:22px 22px 0 0; display:flex; flex-direction:column; overflow:hidden }
html body .dkp-hd{ display:flex; align-items:center; gap:8px; padding:12px 12px 10px 16px; background:#fff; border-bottom:1px solid #E3E8F0 }
html body .dkp-hd b{ flex:1; font-size:17px; font-weight:900; color:#22304d }
html body .dkp-x{ width:44px; height:44px; min-width:44px; border:0; border-radius:50%; background:#EEF2F8; color:#4a5a78; font-size:20px; font-weight:900; cursor:pointer }
html body .dkp-list{ overflow-y:auto; padding:10px 12px calc(16px + env(safe-area-inset-bottom)); display:grid; gap:8px }
html body .dkp-it{ display:flex; align-items:center; gap:10px; width:100%; min-height:64px; padding:8px 10px; border:0; border-radius:14px; background:#fff; box-shadow:0 2px 0 #E1E6EF; text-align:left; font-family:inherit; cursor:pointer }
html body .dkp-it:active{ background:#EEF5FF }
html body .dkp-it > :first-child{ width:52px; flex:none }
html body .dkp-nm b{ display:block; font-size:15px; color:#22304d }
html body .dkp-nm small{ display:block; font-size:12.5px; color:#7a879e; margin-top:2px }
html body .dkp-none{ padding:26px 16px calc(26px + env(safe-area-inset-bottom)); text-align:center; color:#4a5a78; font-weight:800; line-height:1.6 }
html body .dkp-none small{ font-weight:600; color:#8a96aa }

/* ★위 줄 알약 겹침 (2026-10-07) — 360·375px 에서 알약 셋 + 동그라미 둘이 안 들어가
   승차권 「+」가 골드 알약에 덮이고 골드 숫자(3,25…)가 잘리고 츄르 「+」가 쪽지 단추 밑에 깔렸다.
   「+」는 알약 오른쪽 위 모서리 배지로 올리고, 아이콘·간격을 줄인다. 누름 자리 44px 는 그대로 */
html body .g3-top{ gap:3px }
html body .g3-top .setbtn{ margin-left:0 }
html body .g3-pill{ position:relative; gap:2px; padding:0 7px 0 4px; font-size:16px; flex:none; min-width:0 }
html body .g3-pill .ic{ width:26px; height:26px }
html body .g3-pill .ic svg{ width:17px; height:17px }
html body .g3-pill.tk .ic{ width:26px; height:26px }
html body .g3-pill.tk .ic svg{ width:26px; height:26px }
html body .g3-pill .t{ font-size:10.5px; margin-left:0 }
html body .g3-pill .pl{ position:absolute; right:-3px; top:-5px; width:18px; height:18px; font-size:14px; line-height:17px; margin:0; box-shadow:0 1px 0 var(--c-green-d), 0 0 0 2px #fff }