/*---------------------------------------------------------
    제우스의 헤더 전환점.

    **이 파일은 제우스만 싣습니다** (`skins/assets.ts` 의 `globalSheets`).
    헤라는 자기 전환점을 자기 파일에 적어 두고 있습니다 —
    `hera_v1/css/header-fit.css` 의 `@media (max-width: 1849px)` 가 그것이고,
    그 폭 아래에서 헤라는 데스크톱 바를 숨기고 컴팩트 바를 씁니다. 두 스킨이
    디자인을 나눠 쓰지 않는다는 것이 서 있는 요구이므로, 「이 스킨은 몇 px
    까지 좁은 크롬을 쓰는가」는 스킨마다 자기 시트에서 답합니다. 공용
    `globals.css` 는 폰 셸이 **어떻게 생겼는지**만 알고, 폰에서만 켜는
    기본값을 들고 있습니다. 아래 첫 블록이 제우스의 답입니다.

    ─────────────────────────────────────────────────────────
    ① 768~1023 — 태블릿도 폰 셸을 받습니다
    ─────────────────────────────────────────────────────────

    데스크톱 헤더는 이 폭에서 들어가지 않습니다. 실측(로그인 상태, verify03,
    `scripts/.zeus-navband.mjs`):

        폭     nav 줄     넘침
        768    1016.8     248.8
        1024   1061.8      37.8
        1280   1061.8       0

    줄이 줄지도 접히지도 스크롤되지도 못하기 때문입니다. export 의 원본이
    `#header … > ul` 을 `flex-wrap: nowrap` 으로 깔고 항목마다
    `flex-shrink: 0` 을 주며 `overflow-x` 는 `visible` 입니다
    (`1bet_v4/css/header.css`). **물려받은 것이지 우리가 낸 결함이 아닙니다** —
    앞선 회차가 `application-export-20260822/` 의 `1bet_v4` 트리를 재서, 원본의
    nav 는 열두 항목 1090.9px 이라 768 에서 322.9px 넘친다고 적어 두었습니다.
    우리 쪽이 이미 나은 상태였고, 그래도 닫으라는 것이 운영자의 결정입니다.

    **패딩을 0 으로 만들어도 768 에는 못 들어갑니다.** 한글 열한 항목의 글자
    폭만으로 768 을 넘습니다. 그래서 이 폭대에서는 「데스크톱 헤더를 줄인다」가
    아니라 **폰 셸을 준다**가 답입니다 — 폰 셸은 390 에서도 768 에서도 넘침이
    0 이고, 열한 항목이 전부 왼쪽 서랍 안에 그대로 있습니다.

    선택자에 `#app >` 를 얹는 것은 순서가 아니라 특이도로 이기기 위해서입니다.
    이 두 줄이 이겨야 하는 상대가 두 시트에 나뉘어 있습니다 —
    `#header {display:none}` 은 같은 목록 안의 `css/header.css` 에 있지만,
    `.mobile-shell {display:none}` 은 **`globals.css`** 에 있고 그 시트가 이
    파일보다 앞에 실리는지 뒤에 실리는지는 `assets.ts` 가 정하는 것이 아니라
    Next 와 React 가 정합니다. 조상을 하나 더 적으면 어느 쪽이든 결과가 같습니다
    (`globals.css` 의 `.mobile-login` 주석이 같은 이야기를 합니다).

    이 폭에서 export 자신의 `@media all and (min-width:768px) and
    (max-width:1023px)` 블록(`header.css:566`)은 통째로 무의미해집니다 —
    그 안의 규칙은 전부 `#header` 아래인데 `#header` 가 없기 때문입니다.
    지우지는 않습니다. export 원본이고, 되돌릴 때 그대로 살아나야 합니다.
---------------------------------------------------------*/

@media (max-width: 1023px) {
    #app > #header {
        display: none;
    }

    #app > .mobile-shell {
        display: block;
    }
}

/*---------------------------------------------------------
    ② 1024~1279 — 남은 37.8px

    여기는 폰 셸로 넘길 자리가 아닙니다. 1024 는 데스크톱 헤더가 거의 들어가는
    폭이고, 모자란 것이 37.8px 뿐입니다.

    네 줄 다 **export 자신의 값**입니다. 새로 지어낸 숫자가 아닙니다:

      · `a.fold {padding-right: 25px}` 는 export 가 768~1023 블록에서 쓰는
        값입니다(`header.css:576`). 기본값은 40px(`:218`)이고, 그 25px 이
        1023 에서 끊깁니다.
      · **화살표 두 줄이 그 짝입니다** (`:577` · `:579`). 접힘 표시는
        `a > span` 의 절대 배치이고 기본 위치가 `right: 0`(`:298`) ·
        열렸을 때 `right: 10px`(`:311`) 인데, 그 값들은 오른쪽 패딩이 40px 인
        것을 전제로 정해져 있습니다. 패딩만 25px 로 줄이면 화살표가 15px
        안쪽으로 들어와 **글자 위에 겹칩니다** — 1024 스크린샷에서 스포츠 ·
        이벤트 · 테더입출금하기 셋 다 그랬습니다. export 가 자기 좁은
        폭대에서 `-12px` · `-3px` 로 옮겨 두는 것이 그래서이고, 패딩을
        가져오면 이 둘도 같이 와야 합니다.
      · 링크 좌우 패딩 15px(`:201-202`)을 12px 로 줄입니다.

    실측 (1024, 로그인 상태, 열한 항목 중 접힘 셋 — 스포츠 · 이벤트 ·
    테더입출금하기):

        접힘 셋      99.2 → 81.2, 158 → 140    항목마다 18px (왼 3 + 오 15)
        나머지 여덟  6px 씩
        nav 줄       1061.9 → 959.9            102px

    38px 만 있으면 되는데 102px 이 나오는 것은 두 줄이 서로를 돕기 때문이고,
    남는 64px 은 여백으로 둡니다 — 운영자가 메뉴 이름을 한 글자 늘렸을 때
    다시 넘치지 않는 것이 이 폭대에서 값나가는 성질입니다.

    마크업은 건드리지 않습니다. 항목을 빼거나 이름을 줄이는 것은 운영자가
    고른 메뉴를 우리가 고치는 것이고, 넘침은 메뉴의 문제가 아니라 폭의
    문제입니다.

    1280 부터는 아무것도 걸리지 않습니다 — 그 폭에서는 원래 값 그대로
    들어가므로 손댈 이유가 없습니다. 실측으로 1280 의 열한 항목은 폭도
    패딩도 한 값도 움직이지 않았습니다.

    선택자는 export 의 것을 **글자 그대로** 옮겼습니다. 특이도가 같으므로
    순서로 이기고, 순서는 `assets.ts` 가 이 파일을 `css/header.css` **뒤에**
    적는 것으로 정합니다 — 헤라의 `header-fit.css` 가 자기 export 시트에 대해
    쓰는 것과 같은 장치입니다. 그 순서는 `zeus-tablet-band.spec.ts` 가
    지킵니다.
---------------------------------------------------------*/

@media (min-width: 1024px) and (max-width: 1279px) {
    #header > .inner_center > .nav_main > ul > li > a {
        padding-left: 12px;
        padding-right: 12px;
    }

    #header > .inner_center > .nav_main > ul > li > a.fold {
        padding-right: 25px;
    }

    #header > .inner_center > .nav_main > ul > li > a > span {
        right: -12px;
    }

    #header > .inner_center > .nav_main > ul > li:hover > a > span {
        right: -3px;
    }
}

/*---------------------------------------------------------
    ③ 폰 셸의 모양 — 656 줄, `globals.css` 에서 옮겨 온 것

    ①이 「어느 폭에서 켜는가」였다면 여기부터는 「켜지면 어떻게 생겼는가」이고,
    둘 다 이 스킨의 답입니다. 이 규칙들은 `apps/web/src/app/globals.css` 에
    있었습니다 — **두 스킨이 함께 싣는 시트**입니다.

    옮긴 까닭. 이 이름들(`.mobile-shell` · `.mobile-drawer` · `.mobile-nav` ·
    `.mobile-member`)을 그리는 곳은 `components/mobile-header.tsx` 하나이고,
    10|    그것을 등록하는 스킨은 제우스뿐입니다. 헤라는 `HeraMobileHeader` 로
    `.hera-chrome-compact` 를 그리고 자기 `hera_v1/css/header.css` ·
    `header-fit.css` 로 칠합니다. 공용 시트에 두어도 헤라에 아무 일도 일어나지
    않는다는 것은 **참이었고 실측으로도 확인된 말**이지만, 그것은 오늘의
    마크업에 대한 말입니다. 파일이 갈리면 같은 말이 배달의 성질이 됩니다.

    공용 시트에 남은 것은 두 줄입니다 — `.mobile-shell {display:none}` 과
    `@media (max-width:767px) { .mobile-shell {display:block} }`. 아무 말도 하지
    않은 스킨은 그대로 폰 헤더를 받고, 거기서 벗어나는 곳은 위 ①, 이 파일
    하나입니다.

    20|    ─────────────────────────────────────────────────────────
    옮기면서 확인한 것 — Tailwind 와 순서
    ─────────────────────────────────────────────────────────

    **Tailwind 가 이 블록에 해 주던 일.** `globals.css` 는 Tailwind 가 처리하고
    이 파일은 그대로 나갑니다. 그래서 옮기기 전에 무엇을 기대고 있었는지 실제
    빌드로 확인했습니다: `@apply` · `theme()` · `@layer` · 중첩 · 빌드 시점
    커스텀 속성 해석 — 하나도 쓰지 않습니다. `var()` 는 전부 런타임 해석이고,
    읽는 이름들(`--mobile-*` · `--z-*` · `--font-*` · `--skin-title-overlay`)은
    `:root` 에 선언되는 자리가 그대로 남아 있습니다.

    30|    딱 하나 있었습니다. 프로덕션 빌드의 Lightning CSS 가
    `.mobile-shell__backdrop` 에 **`-webkit-backdrop-filter` 를 붙여 주고**
    있었습니다 (Safari 17 이하가 접두사 쪽만 압니다). 정적 시트에는 붙여 줄
    사람이 없으므로 아래에 손으로 적었습니다. 그 밖에 `dvh` · `env()` ·
    `:has()` 는 빌드가 손대지 않고 통과시키고 있었으므로 그대로입니다.

    **순서.** 이 파일의 자리는 `assets.ts` 가 정하고 `globals.css` 의 자리는
    Next 와 React 가 정하므로, 둘 사이의 순서는 **아무도 모릅니다**. 그래서
    옮긴 402 개 선언을 남는 240 개와 전부 맞대어, 「같은 요소에 걸리고 · 같은
    속성을 다투고 · 특이도도 `!important` 도 같은」 쌍을 기계로 찾았습니다.
    40|    실제로 만나는 쌍은 둘이었고 (드로어 로그인칸의 `outline`, 가입 버튼 두 개의
    `font`), 둘 다 `globals.css` 쪽에서 조상을 하나 더 적어 **특이도로** 답하게
    두었습니다 — 그 파일의 `.mobile-login` 주석들이 왜인지 적어 두었습니다.
    이 블록 안의 `!important` 다섯 줄은 상대가 전부 이 블록 안에 있어 함께
    움직였고, `!important` 는 순서보다 먼저 정해지므로 어디에 실리든 같습니다.

    export 시트들과의 관계는 오히려 분명해졌습니다. 이 파일은 `common.css` ·
    `header.css` **뒤**, `footer.css` **앞**이라는 고정된 자리에 있습니다. 셸
    안쪽에 닿는 export 규칙은 `*` 와 `a` 뿐이고 (폰 리셋은 전부
    `:where(:not(.app-ui, .app-ui *))` 로 셸 밖에 멈춥니다), 둘 다 (0,0,0) ·
    50|    (0,0,1) 이라 아래 어느 줄에도 미치지 못합니다.
---------------------------------------------------------*/


.mobile-shell {
  /*
     The phone shell's own names, resolved from the skin's palette.
     They were nine literals — `#03080f`, `#ef7c00`, `#ffc967` and the rest
     — transcribed out of the first skin, so a member on the second skin got
     an orange header, an orange focus ring and gold figures on every phone
     page. The names stay because the shell is custom application UI rather
     than a port of the legacy drawers, and unique names are what keep
     `header.css` from styling it; only the answers moved.

     `--mobile-orange` and `--mobile-gold` keep the colour in the name, which
     is now wrong on the second skin. Renaming them touches ~40 rules and one
     reader in `mobile-header.tsx`; it is worth doing and it is not worth
     doing inside this change.

     값은 위 `:root` 로 올라갔습니다 — 서랍이 이 셸 밖에 있어서입니다.
     이 주석은 그 이름들이 왜 이렇게 불리는지를 계속 설명합니다.
  */
  /*
     Pinned to the top of the viewport while the page scrolls.

     `sticky` rather than `fixed` on purpose. The shell is what carries the
     stacking context that `--z-shell` and `--z-shell-open` are about (see
     the note on those variables), and sticky keeps that context identical to
     the `relative` it replaces — the drawer still outranks the sports cart
     bar only because the shell itself rises, exactly as before.

     It also stays in normal flow, so it goes on reserving its own height.
     That is the whole reason the pages underneath need no clearance rule:
     there is no offset to keep in step with a header whose height changes
     when a player logs in (the 보유머니 strip is drawn only for a member),
     and therefore no way to end up with the content either sliding under it
     or double-spaced away from it.
  */
  position: sticky;
  top: 0;
  z-index: var(--z-shell);
  width: 100%;
  color: var(--mobile-ink);
  font-family: var(--font-sans);
  line-height: 1.35;
}

/* The drawer covers the page, so its shell has to outrank the sports cart
   bar for as long as the drawer is open — see the note on `--z-shell`. */
.mobile-shell:has(.mobile-drawer) {
  z-index: var(--z-shell-open);
}

.mobile-shell,
.mobile-shell *,
.mobile-shell *::before,
.mobile-shell *::after {
  box-sizing: border-box;
}

.mobile-shell button,
.mobile-shell input {
  font: inherit;
}

.mobile-shell button {
  margin: 0;
  border: 0;
  cursor: pointer;
}

.mobile-shell button:focus-visible,
.mobile-shell a:focus-visible,
.mobile-shell input:focus-visible {
  outline: 2px solid var(--mobile-orange);
  outline-offset: 2px;
}

.mobile-shell__header {
  position: relative;
  z-index: var(--z-shell-header);
  width: 100%;
  background: var(--mobile-base);
  border-bottom: 1px solid #02060c;
  box-shadow:
    0 8px 22px rgba(0, 0, 0, 0.36),
    inset 0 -1px 0 rgba(51, 68, 94, 0.5);
}

/*
 * 양쪽 칸은 **같은 폭**입니다 (2026-11-05 맥스벳 「모바일페이지 로고가 가운데정렬이 아니네」). 메뉴 단추는 44px, 오른쪽
 * 로그인 · MY 단추는 64px 라 칸을 52 · 68 로 나눴더니 가운데 칸이 화면 가운데보다 8px 왼쪽이었고, 간판이 그만큼 쏠렸습니다.
 * 두 칸을 68 로 맞추고 단추를 각자 바깥 끝에 붙입니다.
 */
.mobile-shell__topbar {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr) 68px;
  align-items: center;
  min-height: 62px;
  padding: 0 9px;
  background:
    linear-gradient(100deg, rgba(239, 124, 0, 0.08), transparent 32%),
    linear-gradient(180deg, #102039 0%, #071326 100%);
}

.mobile-shell__icon-button {
  display: grid;
  justify-self: start;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--mobile-line) !important;
  border-radius: 4px;
  background: #071426;
  color: #d8dfeb;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 4px 12px rgba(0, 0, 0, 0.22);
}

.mobile-shell__icon-button svg {
  width: 23px;
  height: 23px;
  stroke-width: 1.8;
}

.mobile-shell__brand {
  display: flex;
  align-self: center;
  min-width: 0;
  height: 52px;
  align-items: center;
  justify-content: center;
}

.mobile-shell__brand img {
  display: block;
  width: auto;
  max-width: 132px;
  height: auto;
  max-height: 39px;
  object-fit: contain;
}

.mobile-shell__account-button {
  display: flex;
  justify-self: end;
  width: 64px;
  height: 44px;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid rgba(239, 124, 0, 0.55) !important;
  border-radius: 4px;
  background: rgba(239, 124, 0, 0.08);
  color: var(--mobile-gold);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.mobile-shell__account-button svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}

.mobile-shell__wallet-strip {
  display: grid;
  grid-template-columns:
    minmax(58px, 0.72fr) minmax(104px, 1.32fr)
    minmax(76px, 0.96fr) 44px;
  min-height: 49px;
  gap: 1px;
  padding: 1px 0 0;
  background: var(--mobile-black);
}

/* Two of the four cells are plain text rather than buttons, so the strip
   paints its children by position and not by tag. */
.mobile-shell__wallet-strip > * {
  min-width: 0;
  background: var(--mobile-panel);
}

.mobile-shell__wallet-identity,
.mobile-shell__wallet-stat {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 6px 9px;
  text-align: left;
}

.mobile-shell__wallet-identity span,
.mobile-shell__wallet-stat span {
  display: block;
  overflow: hidden;
  width: 100%;
  color: var(--mobile-muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-shell__wallet-identity strong {
  display: block;
  overflow: hidden;
  width: 100%;
  margin-top: 2px;
  color: var(--mobile-ink);
  font-size: 12px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-shell__wallet-stat strong {
  display: block;
  overflow: hidden;
  width: 100%;
  margin-top: 1px;
  color: var(--mobile-gold);
  font-family: var(--font-numeric);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-shell__refresh {
  display: grid;
  place-items: center;
  color: var(--mobile-orange);
}

.mobile-shell__refresh:disabled,
.mobile-member__refresh:disabled {
  cursor: default;
  opacity: 0.45;
}

.mobile-shell__refresh svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.9;
}

.mobile-shell .is-spinning {
  animation: mobile-spin 800ms linear infinite;
}

.mobile-shell__backdrop {
  position: fixed;
  z-index: var(--z-drawer-scrim);
  inset: 0;
  width: 100%;
  height: 100dvh;
  background: rgba(1, 5, 12, 0.78);
  /* 이 한 줄만 손으로 적었습니다. `globals.css` 에 있는 동안은 프로덕션 빌드의
     Lightning CSS 가 붙여 주고 있었고 (Safari 17 이하는 접두사 쪽만 압니다),
     이 파일은 빌드를 지나지 않습니다. 파일 머리 ③의 「Tailwind 가 해 주던
     일」이 이것입니다 — 없으면 그 브라우저에서 서랍 뒤가 흐려지지 않고, 화면은
     멀쩡해 보입니다. */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.mobile-drawer {
  position: fixed;
  z-index: var(--z-drawer);
  top: 0;
  bottom: 0;
  display: flex;
  width: min(360px, calc(100vw - 32px));
  height: 100dvh;
  flex-direction: column;
  overflow: hidden;
  border-color: #2c3c56;
  background:
    linear-gradient(180deg, rgba(10, 27, 51, 0.98), rgba(3, 9, 18, 0.99));
  box-shadow: 0 0 42px rgba(0, 0, 0, 0.68);
  overscroll-behavior: contain;
}

.mobile-drawer--left {
  left: 0;
  border-right-style: solid;
  border-right-width: 1px;
  animation: mobile-drawer-in-left 220ms ease-out both;
}

.mobile-drawer--right {
  right: 0;
  border-left-style: solid;
  border-left-width: 1px;
  animation: mobile-drawer-in-right 220ms ease-out both;
}

.mobile-drawer__header {
  display: flex;
  min-height: 84px;
  flex: 0 0 84px;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 18px;
  border-bottom: 1px solid var(--mobile-black);
  background:
    var(--skin-title-overlay) left center / auto 100%
      no-repeat,
    var(--mobile-panel);
  box-shadow: inset 0 -1px 0 rgba(46, 63, 88, 0.8);
}

.mobile-drawer__header > div > span {
  display: block;
  color: var(--mobile-orange);
  font-family: var(--font-numeric);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

.mobile-drawer__header h2 {
  margin: 4px 0 0;
  color: var(--mobile-ink);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
}

.mobile-drawer__header > button {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid var(--mobile-line) !important;
  border-radius: 4px;
  background: rgba(3, 10, 19, 0.7);
  color: #cbd3df;
}

.mobile-drawer__header > button svg {
  width: 20px;
  height: 20px;
}

.mobile-nav {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  align-content: start;
  gap: 1px;
  overflow-y: auto;
  padding: 12px;
  background: var(--mobile-black);
  scrollbar-width: thin;
  scrollbar-color: #26344b transparent;
}

.mobile-nav__group {
  display: grid;
  gap: 1px;
  background: var(--mobile-black);
}

.mobile-nav__entry {
  position: relative;
  display: grid;
  width: 100%;
  min-height: 50px;
  grid-template-columns: 24px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--mobile-panel);
  color: #c9d1de;
  text-align: left;
}

.mobile-nav__entry > svg {
  width: 18px;
  height: 18px;
  color: #73829a;
  stroke-width: 1.7;
}

.mobile-nav__entry > span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-nav__entry > svg:last-child {
  width: 16px;
  height: 16px;
  transition: transform 180ms ease;
}

.mobile-nav__entry > svg:last-child.is-open {
  transform: rotate(180deg);
}

.mobile-nav__entry.is-active,
.mobile-nav__group.is-active > .mobile-nav__entry {
  box-shadow: inset 3px 0 0 var(--mobile-orange);
  color: var(--mobile-ink);
  background:
    linear-gradient(90deg, rgba(239, 124, 0, 0.13), transparent 52%),
    var(--mobile-panel);
}

.mobile-nav__entry.is-active > svg,
.mobile-nav__group.is-active > .mobile-nav__entry > svg:first-child {
  color: var(--mobile-orange);
}

.mobile-nav__children {
  display: grid;
  gap: 1px;
  background: var(--mobile-black);
}

.mobile-nav__children[hidden] {
  display: none;
}

.mobile-nav__children button {
  display: grid;
  min-height: 44px;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 0 14px 0 48px;
  background: #0a1526;
  color: #8f9bad;
  font-size: 12px;
  font-weight: 600;
  text-align: left;
}

.mobile-nav__children button > span {
  width: 12px;
  height: 1px;
  background: #39475d;
}

.mobile-nav__children button.is-active {
  color: var(--mobile-gold);
  background: #101d30;
}

.mobile-nav__children button.is-active > span {
  background: var(--mobile-orange);
}

/* 서랍의 말 고르는 줄 — 위 메뉴(.mobile-nav)와 같은 바깥 여백으로, 메뉴 바로 아래 한 줄. 서랍의 맨 끝이라 폰의 홈 막대만큼 띄웁니다. */
.mobile-drawer__language {
  flex: 0 0 auto;
  padding: 0 12px calc(12px + env(safe-area-inset-bottom));
  background: var(--mobile-black);
}

.mobile-member {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 14px 14px calc(18px + env(safe-area-inset-bottom));
}

.mobile-member__identity {
  display: flex;
  min-height: 78px;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid #293a54;
  background:
    linear-gradient(110deg, rgba(239, 124, 0, 0.11), transparent 44%),
    var(--mobile-panel);
}

.mobile-member__identity > svg {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  color: var(--mobile-orange);
  stroke-width: 1.4;
}

.mobile-member__identity span {
  display: block;
  color: var(--mobile-muted);
  font-family: var(--font-numeric);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mobile-member__identity strong {
  display: block;
  margin-top: 3px;
  color: var(--mobile-ink);
  font-size: 18px;
  font-weight: 800;
}

.mobile-member__balances {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-top: 12px;
  background: var(--mobile-black);
}

.mobile-member__balance {
  min-width: 0;
  min-height: 86px;
  padding: 13px 12px;
  background: var(--mobile-field);
}

.mobile-member__balance > span {
  display: block;
  color: var(--mobile-muted);
  font-size: 10px;
  font-weight: 700;
}

.mobile-member__balance > strong {
  display: block;
  overflow: hidden;
  margin-top: 9px;
  color: var(--mobile-gold);
  font-family: var(--font-numeric);
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-member__parked {
  min-height: 44px;
  grid-column: 1 / -1;
  margin: 0;
  padding: 11px 12px;
  background: #0a1729;
  color: #e08a4a;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
}

.mobile-member__refresh {
  display: flex;
  min-height: 44px;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: center;
  gap: 7px;
  background: var(--mobile-panel);
  color: #aeb9c9;
  font-size: 11px;
  font-weight: 700;
}

.mobile-member__refresh svg {
  width: 15px;
  height: 15px;
  color: var(--mobile-orange);
}

.mobile-member__links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 12px;
  background: var(--mobile-black);
}

.mobile-member__links button {
  display: flex;
  min-width: 0;
  min-height: 76px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 5px;
  background: var(--mobile-panel);
  color: #bdc6d4;
}

/*
 * 서랍의 파트너 칸.
 *
 * 옆 칸들과 같은 격자에 앉되 **색만 다릅니다** — 주황→빨강. 구 사이트의
 * `.btn-special.operator` 가 쓰던 색이고, 옮겨 온 파트너의 눈이 이미 아는
 * 색입니다. 격자 규칙(`button`)이 `a` 에는 안 걸려서 모양은 여기서 다시
 * 적습니다: 태그를 `button` 으로 바꾸면 눌렀을 때 이 앱 안에서 처리되어야
 * 하는데, 이 주소는 브라우저가 직접 따라가야 하는 길입니다.
 */
/*
 * 서랍의 파트너 칸.
 *
 * 옆 칸들과 **같은 격자, 같은 바탕**입니다. 다른 것은 빛뿐이고, 그 빛은 PC
 * 머리띠의 파트너 단추가 쓰는 것과 같습니다 (`1bet_v4/css/header.css`).
 * 한 사이트에서 같은 문이 두 모양이면 같은 문으로 안 보입니다.
 *
 * 자리는 **한 줄 전체**입니다 (2026-11-05 맥스벳 「파트너 옆에가 비어있어서 보기안좋고」). 세 칸 격자의 넷째라
 * 혼자 다음 줄 첫 칸에 서고 옆 두 칸이 검게 비었습니다. 유저D~G 처럼 바로가기 아래 한 줄, 아이콘과 이름은 가로로.
 */
.mobile-member__links .mobile-member__partner {
  display: flex;
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 52px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 5px;
  background: var(--mobile-panel);
  color: #fff0c8;
  text-shadow: 0 0 5px #fff, 0 0 10px #ff8100, 0 0 15px #f00, 0 0 5px #ef7c00,
    0 0 5px #ef7c00, 0 0 10px #f92552, 0 0 20px #ef7c00, 0px 0 40px #ef7c00;
  animation: beat 0.25s infinite alternate;
}

/*
 * 격자의 `svg`/`span` 규칙이 아래에 또 있습니다. 클래스를 겹쳐 적어 이쪽이
 * 이기게 합니다 — 순서로 이기려 들면 누가 이 파일에 한 줄 보태는 순간
 * 조용히 뒤집힙니다.
 */
.mobile-member__links .mobile-member__partner svg {
  width: 20px;
  height: 20px;
  color: #fff0c8;
  stroke-width: 1.8;
  /* 글자만 켜면 아이콘이 꺼져 보입니다. `text-shadow` 는 `svg` 에 안 걸립니다. */
  filter: drop-shadow(0 0 5px #ff8100) drop-shadow(0 0 10px #f92552);
}

.mobile-member__links .mobile-member__partner span {
  overflow: hidden;
  width: auto;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-member__links svg {
  width: 20px;
  height: 20px;
  color: var(--mobile-orange);
  stroke-width: 1.6;
}

.mobile-member__links span {
  overflow: hidden;
  width: 100%;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-member__logout {
  display: flex;
  width: 100%;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 12px !important;
  border: 1px solid transparent !important;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 800;
}

.mobile-member__logout {
  border-color: #344057 !important;
  background: #091322;
  color: #aeb8c7;
}

.mobile-member__logout svg {
  width: 18px;
  height: 18px;
}


@media (max-width: 340px) {
  .mobile-shell__wallet-strip {
    grid-template-columns: 54px minmax(95px, 1.35fr) minmax(70px, 0.9fr) 44px;
  }

  .mobile-shell__wallet-identity,
  .mobile-shell__wallet-stat {
    padding-right: 6px;
    padding-left: 6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-drawer--left,
  .mobile-drawer--right {
    animation: none;
  }

  .mobile-nav__entry > svg:last-child {
    transition: none;
  }
}

/*---------------------------------------------------------
    데스크톱 로고의 크기.

    원본(`1bet_v4/css/header.css`)은 로고 크기 줄을 주석으로 꺼 두어 그림의
    픽셀 크기 그대로 겁니다. 그 원본의 로고는 152×47 이었지만 운영자가 올리는
    로고는 680×247 같은 크기라, 그대로 걸면 104px 헤더를 넘어 메뉴를 덮습니다
    (2026-11-05 맥스벳). 다른 스킨처럼 높이로 묶습니다.
---------------------------------------------------------*/
#header > .inner_center > .link_logo > img {
  width: auto;
  height: 60px;
  max-width: 280px;
  object-fit: contain;
}