/* bottomnav.css — CLUB M 모바일 하단바 겉모습.
   ⚠️ 바를 새로 만들지 않는다. 이미 있는 .mobar 를 그대로 쓴다(이동·4개국어 라벨이 이미 붙어 있음).

   우팀장 지시 2026-07-31 (기준 이미지 3단):
     평소  = CLUBM.BET 명패가 박힌 그림, 작게
     누르면= 그 칸만 중간 크기로 커지고, 명패가 빈 그림으로 바뀌면서 그 자리에 이름이 뜬다
   그림 두 벌: assets/navicons(명패에 CLUBM.BET) / assets/navicons_plate(명패 비어 있음)
   글자 폭 맞춤은 js/bottomnav.js 가 --fit 으로 넣어준다(언어마다 길이가 달라서). */

@media (max-width: 860px) {
  .mobar {
    --icn: 55px;          /* 평소 아이콘 높이 */
    --icn-on: 70px;       /* 누른 칸 아이콘 높이 */
    --icn-ar: .925;       /* 원본 가로/세로 비 */
    --plate-y: .075;      /* 명패 글자줄 위치(누른 아이콘 높이 기준, 아래에서) */
    --plate-w: .65;       /* 명패 안 글자 폭(누른 아이콘 폭 기준) — 이 폭을 꽉 채운다 */
    --plate-fs: .295;     /* 명패 글자 크기(누른 아이콘 높이 기준) */
    height: calc(74px + env(safe-area-inset-bottom, 0px));
    background: var(--panel);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .35);
  }
  .mobar .mb { gap: 0; position: relative; }

  /* 원래 선 아이콘은 감추고 브랜드 이미지를 쓴다 */
  .mobar .mb svg { display: none; }
  .mobar .mb::before {
    content: "";
    display: block;
    height: var(--icn);
    width: calc(var(--icn) * var(--icn-ar));
    background-position: center; background-repeat: no-repeat; background-size: contain;
    opacity: .8;
    transition: width .18s ease, height .18s ease, opacity .18s ease, filter .18s ease;
  }
  /* 누른 칸만 커지고, 명패가 빈 그림으로 바뀐다(그 자리에 이름이 들어간다) */
  .mobar .mb.on::before {
    height: var(--icn-on);
    width: calc(var(--icn-on) * var(--icn-ar));
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(230, 196, 107, .32));
  }

  /* 이름표 = 커진 그림의 빈 명패 위에 얹는다 */
  .mobar .mb span {
    position: absolute;
    left: 50%;
    bottom: calc((100% - var(--icn-on)) / 2 + var(--icn-on) * var(--plate-y));
    transform: translateX(-50%) scaleX(var(--fit, 1));
    transform-origin: 50% 100%;
    white-space: nowrap;
    font-size: calc(var(--icn-on) * var(--plate-fs));
    line-height: 1;
    font-weight: 800;
    letter-spacing: -.3px;
    color: var(--navplate-ink);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75);
    opacity: 0;
    transition: opacity .16s ease;
    pointer-events: none;
  }
  .mobar .mb.on span { opacity: 1; }

  /* 평소 = 명패에 CLUBM.BET */
  .mobar .mb[data-act="menu"]::before        { background-image: url(../assets/navicons/menu.png?v=b1); }
  .mobar .mb[data-go="#/home"]::before       { background-image: url(../assets/navicons/casino.png?v=b1); }
  .mobar .mb[data-go="#/home/slots"]::before { background-image: url(../assets/navicons/slots.png?v=b1); }
  .mobar .mb[data-go="#/sports"]::before     { background-image: url(../assets/navicons/sports.png?v=b1); }
  .mobar .mb[data-go="#/profile"]::before    { background-image: url(../assets/navicons/profile.png?v=b1); }
  /* 누른 칸 = 명패 빈 그림(이름이 들어갈 자리) */
  .mobar .mb.on[data-act="menu"]::before        { background-image: url(../assets/navicons_plate/menu.png?v=p1); }
  .mobar .mb.on[data-go="#/home"]::before       { background-image: url(../assets/navicons_plate/casino.png?v=p1); }
  .mobar .mb.on[data-go="#/home/slots"]::before { background-image: url(../assets/navicons_plate/slots.png?v=p1); }
  .mobar .mb.on[data-go="#/sports"]::before     { background-image: url(../assets/navicons_plate/sports.png?v=p1); }
  .mobar .mb.on[data-go="#/profile"]::before    { background-image: url(../assets/navicons_plate/profile.png?v=p1); }

  /* 바가 높아진 만큼 본문 아래 여백도 맞춘다(하단바가 내용을 가리지 않게) */
  body { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 860px) and (-webkit-min-device-pixel-ratio: 2),
       (max-width: 860px) and (min-resolution: 192dpi) {
  .mobar .mb[data-act="menu"]::before        { background-image: url(../assets/navicons/menu@2x.png?v=b1); }
  .mobar .mb[data-go="#/home"]::before       { background-image: url(../assets/navicons/casino@2x.png?v=b1); }
  .mobar .mb[data-go="#/home/slots"]::before { background-image: url(../assets/navicons/slots@2x.png?v=b1); }
  .mobar .mb[data-go="#/sports"]::before     { background-image: url(../assets/navicons/sports@2x.png?v=b1); }
  .mobar .mb[data-go="#/profile"]::before    { background-image: url(../assets/navicons/profile@2x.png?v=b1); }
  .mobar .mb.on[data-act="menu"]::before        { background-image: url(../assets/navicons_plate/menu@2x.png?v=p1); }
  .mobar .mb.on[data-go="#/home"]::before       { background-image: url(../assets/navicons_plate/casino@2x.png?v=p1); }
  .mobar .mb.on[data-go="#/home/slots"]::before { background-image: url(../assets/navicons_plate/slots@2x.png?v=p1); }
  .mobar .mb.on[data-go="#/sports"]::before     { background-image: url(../assets/navicons_plate/sports@2x.png?v=p1); }
  .mobar .mb.on[data-go="#/profile"]::before    { background-image: url(../assets/navicons_plate/profile@2x.png?v=p1); }
}

@media (max-width: 360px) {
  .mobar { --icn: 48px; --icn-on: 62px; }
}