/* ══════════════════════════════════════════════════════════════
   toon.css — 툰블라스트 방식 아이콘 꾸미기 (2026-09-24)

   Macho 「툰블라스트같이 만든다고 하지 않았어? 왜 다 블랙에 심플 아이콘이야?」

   ★툰블라스트 실측 규칙 (rawg.io 스크린샷 확대)
     · 하단탭 : 원형 배경(청록) + 흰 실루엣 + 짙은 테두리 + 아래 그림자
     · 선택   : 크림색 원 + 금색 테두리 + 위로 튀어나옴
     · 재화   : 각자 고유색 + 광택 + 테두리
   ★우리 색으로 옮긴다 — 태극청 #15599F · 금색 #C9A227 · 종이색 #FAF5E9
   ══════════════════════════════════════════════════════════════ */

/* ── 하단탭 ───────────────────────────────────────────── */
.tabbar button .ic{
  width:40px; height:40px; line-height:0; display:block;
  border-radius:50%;
  background:linear-gradient(180deg,#3C86D8,#15599F);
  border:2.5px solid #0E3E70;
  box-shadow:0 3px 0 #0A2D52, inset 0 2px 0 rgba(255,255,255,.35);
  padding:6px; box-sizing:border-box;   /* 아이콘을 크게 — 원 안에서 작아 보였다 */
  color:#FAF5E9;
  transition:transform .12s cubic-bezier(.34,1.56,.64,1);
}
.tabbar button .ic svg{ width:100%; height:100%; display:block; }

/* 선택 — 크림 원 + 금 테두리 + 위로 */
.tabbar button.on .ic{
  background:linear-gradient(180deg,#FFF8E6,#F2E6C8);
  border-color:#C9A227;
  box-shadow:0 3px 0 #9A7A14, inset 0 2px 0 rgba(255,255,255,.8),
             0 0 12px -2px rgba(201,162,39,.75);
  color:#15599F;
  transform:translateY(-6px) scale(1.06);
}
.tabbar button.on .tx{ color:#15599F; font-weight:900 }
.tabbar button:active .ic{ transform:translateY(2px) scale(.96) }
.tabbar button.on:active .ic{ transform:translateY(-4px) scale(1.02) }

/* 선택 상태의 ::before(옛 배경판)는 끈다 — 원판이 대신한다 */
.tabbar button.on::before{ display:none !important }

/* ── 상단 승차권 칩 ───────────────────────────────────── */
.hudchip .h{
  width:30px; height:30px; line-height:0; display:block;
  border-radius:50%;
  background:linear-gradient(180deg,#E8C255,#C9A227);
  border:2px solid #8A6410;
  box-shadow:0 2px 0 #6B4708, inset 0 1.5px 0 rgba(255,255,255,.5);
  padding:6px; box-sizing:border-box;
  color:#FFF8E6;
}
.hudchip .h svg{ width:100%; height:100%; display:block }

/* ── 상점 지갑·버튼 재화 ──────────────────────────────── */
.sh-ic{
  display:inline-block; line-height:0; border-radius:50%;
  padding:5px; box-sizing:border-box; vertical-align:-7px;
  border:2px solid rgba(0,0,0,.28);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.45);
  color:#FFF8E6;
}
.sh-ic svg{ width:100%; height:100%; display:block }
/* 재화마다 고유색 — 툰블라스트의 하트=빨강·코인=노랑 자리 */
.sh-ic.ic-gold  { background:linear-gradient(180deg,#F2C14E,#E8A317); border-color:#9A6B10 }
.sh-ic.ic-coin  { background:linear-gradient(180deg,#C8503F,#A8301F); border-color:#6E1F14 }
.sh-ic.ic-ticket{ background:linear-gradient(180deg,#E8C255,#C9A227); border-color:#8A6410 }

.sh-wallet .sh-ic{ display:block; margin:0 auto 3px; width:32px; height:32px; vertical-align:0 }
.k-btn .sh-ic{ width:22px; height:22px; padding:4px }

/* ── ? 팝업 줄 아이콘 ─────────────────────────────────── */
.qi{
  width:26px; height:26px; flex:none; display:inline-block; line-height:0;
  border-radius:50%; padding:5px; box-sizing:border-box;
  background:linear-gradient(180deg,#3C86D8,#15599F);
  border:2px solid #0E3E70;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35);
  color:#FAF5E9;
}
.qi svg{ width:100%; height:100%; display:block }

/* ── 게임 중 상단 상자 (남은 걸음·시간) ───────────────── */
.box .ic{
  width:34px; height:34px; line-height:0; margin:0 auto 2px;
  border-radius:50%; padding:7px; box-sizing:border-box;
  background:linear-gradient(180deg,#3C86D8,#15599F);
  border:2px solid #0E3E70;
  box-shadow:0 2px 0 #0A2D52, inset 0 1.5px 0 rgba(255,255,255,.35);
  color:#FAF5E9;
}
.box .ic svg{ width:100%; height:100%; display:block }

/* ── 쪽지함 단추 ──────────────────────────────────────── */
.mailbtn{ position:relative }
.mailbtn svg{
  width:22px; height:22px; display:block; color:#15599F;
}

/* ── 이 역의 신령 줄 ──────────────────────────────────── */
.stgod .ic{
  width:28px; height:28px; line-height:0; flex:none;
  border-radius:50%; padding:6px; box-sizing:border-box;
  background:linear-gradient(180deg,#3C86D8,#15599F);
  border:2px solid #0E3E70;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.35);
  color:#FAF5E9;
}
.stgod.got .ic{
  background:linear-gradient(180deg,#E8C255,#C9A227);
  border-color:#8A6410;
}
.stgod .ic svg{ width:100%; height:100%; display:block }


/* ══════════════════════════════════════════════════════════════
   그림 아이콘(.tn) — 원판·테두리·그림자가 ★그림에 이미 들어 있다.
   CSS 가 또 원판을 그리면 이중이 되므로, 담는 칸의 꾸밈을 지운다.
   ══════════════════════════════════════════════════════════════ */
.tn{ width:100%; height:100%; display:block; object-fit:contain }

.tabbar button .ic:has(.tn),
.hudchip .h:has(.tn),
.qi:has(.tn),
.box .ic:has(.tn),
.stgod .ic:has(.tn),
.sh-ic:has(.tn){
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
/* 하단탭 선택 — 그림은 색을 못 바꾸니 크기·위치로만 구분한다 */
.tabbar button.on .ic:has(.tn){
  transform:translateY(-6px) scale(1.14);
  filter:drop-shadow(0 4px 6px rgba(201,162,39,.55));
}
/* ★2026-09-25 Macho 「아이콘 크기들도 너무 작아」 — ★칸에서 키운다
   그림(.tn/.ob)은 width:100% 라 칸을 따라온다. 그림만 키우면 삐져나간다. */
.mailbtn .tn, .mailbtn .ob{ width:34px; height:34px }
.tabbar button .ic{ width:52px !important; height:52px !important;
                    display:flex !important; align-items:center; justify-content:center;
                    margin:0 auto; transform-origin:center center }


/* ══════════════════════════════════════════════════════════════
   오브젝트 아이콘(.ob) — 2026-09-24
   Macho 「승차권이나 재화는 버튼이 아니라 아이콘이어야잖아」
   재화·상태 표시는 ★배지가 없다. 담는 칸의 원판·테두리를 전부 지운다.
   ══════════════════════════════════════════════════════════════ */
.ob{ width:100%; height:100%; display:block; object-fit:contain }

.tabbar button .ic:has(.ob),
.hudchip .h:has(.ob),
.qi:has(.ob),
.box .ic:has(.ob),
.stgod .ic:has(.ob),
.sh-ic:has(.ob){
  background:none !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  border-radius:0 !important;
}
/* 오브젝트는 배지보다 살짝 크게 — 테두리가 없어 작아 보인다 */
.hudchip .h:has(.ob){ width:32px; height:32px }
.sh-wallet .sh-ic:has(.ob){ width:36px; height:36px }
.qi:has(.ob){ width:28px; height:28px }
.box .ic:has(.ob){ width:38px; height:38px }
.mailbtn .ob{ width:26px; height:26px }