/*---------------------------------------------------------
    HERA SCREEN VIEWS — 카지노 로비 · 슬롯 로비

    Ours, not the export's, and the same rule as every sheet beside it: every
    selector begins with `.hera-screen`, so on a route that renders no such root
    not one rule in here can match. `skin-screen-seam.spec.ts` asserts it.

    ── What this file replaced ────────────────────────────

    Three files, and that is the point of it. Until now this skin's lobby was
    the **first skin's markup** — `casinolistbox`, `casinoitem`,
    `slot_master_item`, emitted by one console both skins rendered — styled by
    the export's own `casino.css` and `slot.css` and then bent back into shape
    by two correction sheets of ours, `slot-fit.css` (320 lines) and
    `casino-fit.css` (154). Every rule in those two existed to undo a decision
    the other skin's stylesheet had made: `img.bg` positioned for a dealer photo
    when this skin ships one-piece tiles, a caption overlaid on artwork that
    already carries the vendor's name, a `.CasinoTab` with no narrow rule at all
    that pushed the whole document to 565px on a 390px phone.

    None of that is a correction any more, because none of it is inherited.
    Both fit sheets are deleted and `casino.css` / `slot.css` are no longer
    loaded on this route.

    ── Where the design comes from ────────────────────────

    `hera_v1/css/slot.css` — the export's own modern lobby, which describes
    exactly this: 12px cards on `#1a1d2a`, cyan accents, a `repeat(auto-fill,
    minmax(…))` grid, a gradient scrim with the caption on it, a lift on hover.
    It is not loaded, for the reason none of the export's screen sheets are:
    it opens with `* { box-sizing…; margin: 0; padding: 0 }` and `#body { … }`,
    and an unlayered `*` beats every utility on the site (`sports_csr.css` is
    the standing proof). So the design is restated here, scoped.

    ── The caption is a strip, not an overlay ─────────────

    `casino-fit.css` learned this the expensive way and the lesson survives the
    file. This skin's vendor artwork is one piece — frame, model, logo and the
    vendor's own wordmark, already arranged — so a scrim with 프라그마틱 플레이
    written across it printed the vendor's name twice, in two alphabets, on top
    of itself. The slot grid therefore gives the caption a strip of its own
    under the artwork and the artwork keeps its whole box; the casino grid draws
    no caption at all, because those tiles carry the Korean already.

    ── Breakpoints ───────────────────────────────────────

    767 and 900 are the site's two, from `lib/table-cards.ts`. The grids are
    `auto-fill` so the column count follows the width without either of them.

    There is a third, 1280, and it is **not this file's number**: it is where
    `header-fit.css` stops hiding the desktop bar. The money strip is drawn
    exactly where that bar is not, so the two have to be the same width or a
    band appears carrying neither. `hera-lobby-bar.spec.ts` reads both files and
    fails when they drift.
---------------------------------------------------------*/

/*
   로비 화면은 **2200 까지** 넓어집니다.

   `screens.css` 가 모든 `.hera-screen` 에 주는 1600 은 카드형 화면의 값이고,
   원본의 로비는 `.CasinoTab` 도 `#casino_list > .listbox` 도 `max-width: 2200px`
   입니다. 1600 에 걸려 있는 동안 1920 에서 좌우 160px, 2560 에서 480px 씩
   비어 있었습니다 — 사용자가 원본과 나란히 놓고 본 그 여백입니다.

   `:has()` 로 잡는 것은 이 화면들(대문·카지노·슬롯 로비)이 마크업을 바꾸지
   않아도 되게 하기 위해서입니다. 특이도 (0,2,0) 이라 `screens.css` 의
   `.hera-screen`(0,1,0)을 이깁니다.
*/
.hera-screen:has(.hera-lobby) {
    max-width: 2200px;
}

.hera-screen .hera-lobby {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/*
   The hero.

   `visual-banner.css` positions the composed slide *inside* a list it does not
   size — its own comment says so: 「casino.css and slot.css still own their
   #casino_visual / #slot_visual shells」. This skin no longer loads either of
   those files, so the shell is restated here, scoped, or the slides collapse to
   nothing and their absolutely positioned images print over the vendor grid.
   That is exactly what happened the first time this sheet shipped without it.

   The phone height is deliberately not restated: `globals.css` gives every
   `#casino_visual`/`#slot_visual` list an `aspect-ratio: 768 / 320` below 768px
   — the ratio the API normalises every uploaded slide to — and that rule
   outranks these on id specificity, which is what keeps the two in step.
*/
/*
   히어로는 **화면 폭을 다 씁니다.** 페이지 칸 안에 든 둥근 상자가 아닙니다.

   원본은 `#casino_visual > .visual_list` 를 `width: 100%; aspect-ratio: 1920/500;
   max-height: 500px` 로 두고 라운드도 좌우 여백도 주지 않습니다
   (`casino.css:264`). 배너 자체는 swiper 로 `height: 450px; width: 100%`
   (`banners.ejs`)이고요. 우리는 이것을 1240 짜리 칸 안의 **364px 고정 · 라운드
   12** 상자로 그리고 있었습니다 — 넓은 화면일수록 차이가 벌어져, 1920 에서
   원본은 1920×500 이고 우리는 1560×364 였습니다.

   못 본 이유를 적어 둡니다: 대조에 쓴 정적 기준 화면에는 **운영자 배너도
   데이터도 없어서** 히어로가 빈 상자로 그려졌고, 그 빈 상자를 보고 「구조는
   맞다」고 판정했습니다. 비어 있는 것끼리는 크기가 달라도 같아 보입니다.

   폭 제한을 **CSS 로 빠져나가지 않고 DOM 에서 꺼냈습니다.** `100vw` 는 세로
   스크롤바 폭만큼 넘치는데 이 사이트에는 `overflow-x` 를 잡아 주는 곳이 없어
   그대로 가로 스크롤이 됩니다. 세 로비 뷰가 히어로를 `.hera-screen` 의 형제로
   내보내고, 그 형제는 아래 규칙으로 폭 제한을 비웁니다 — 형제이지 자식이 아니
   므로 `.hera-screen` 이 두 번 물리는 문제(BACKLOG 의 그 항목)도 없습니다.
*/
.hera-screen.hera-lobby-hero {
    position: relative;
    max-width: none;
    margin: 0;
    padding: 0;
}

/*
   자르지 않습니다. 켜진 점은 `0 0 50px #fff` 까지 번지는 발광을 달고 있어서,
   배너 안에 서 있어도 그 빛은 상자 밖으로 나갑니다 — 여기에 `hidden` 을 쓰면
   빛이 배너 바닥에서 끊겨 알약 아래쪽만 각지게 잘립니다.

   자를 것도 없습니다: 슬라이드는 `.visual_list` 안에 `inset: 0` 로 절대배치되어
   상자를 넘지 않습니다.
*/
.hera-screen .hera-lobby-visual {
    overflow: visible;
}

/*
   캐러셀 점은 **배너 이미지 안**에 섭니다 — 어느 폭에서도.

   여기는 원본에서 벗어나는 자리이고, 운영자가 그렇게 정했습니다(2026-08-29,
   「가운데 페이지네이션을 배너 이미지 안쪽으로 옮기는게 더 깔끔하겠다」).

   원본의 넓은 화면은 반대로 합니다: `casino.css:90` 의 `.visual_btns` 는
   `#casino_visual` 을 기준으로 `bottom: -60px` 이라 배너 **밖**으로 나가 바로
   아래 `.CasinoTab` 줄에 앉습니다. 그 배치는 아래에 그 줄이 있을 때만 성립하고,
   같은 날 같은 결정으로 그 줄은 데스크톱 바가 그려지는 폭에서 없어졌습니다 —
   그대로 두면 점이 배너와 타일 격자 사이의 **빈 자리**에 뜹니다.

   `10px` 은 지어낸 값이 아니라 원본이 점을 배너 안에 놓을 때 쓰는 값입니다
   (`game-m.ejs:256`, `.visual_btns { bottom: 10px }`). 폭마다 다르게 두지
   않으므로 아래 767 블록은 `bottom` 을 다시 말하지 않습니다 — 두 규칙이
   특이도로 다투던 자리가 그래서 없어집니다(미디어 질의는 특이도를 주지 않고,
   바깥 규칙이 (0,4,0) 이라 폰 규칙이 짧으면 졌습니다).

   우리 점은 `VisualBanner` 가 `.visual_list` 안에 그리는데 그 컴포넌트는 제우스와
   공유하므로, 마크업을 건드리지 않고 이 스킨에서 자리만 옮깁니다.
*/
.hera-screen.hera-lobby-hero .hera-lobby-visual .visual_btns {
    bottom: 10px;
    z-index: 1;
}

/* A skin-and-domain with no slides configured renders nothing at all, and an
   empty box would still take a row gap. */
.hera-screen .hera-lobby-visual:empty {
    display: none;
}

/*
   `casino.css:264` 그대로 — 높이를 고정하지 않고 비율로 잡고 500 에서 멈춥니다.

   `overflow` 는 위의 상자와 같은 이유로 `visible` 입니다: 점은 이제 이 안에
   서지만 켜진 점의 발광은 그래도 바닥 밖으로 번지고, 슬라이드는
   `object-fit: cover` 라 상자를 넘지 않으므로 자를 것이 없습니다.
*/
.hera-screen .hera-lobby-visual .visual_list {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    aspect-ratio: 1920 / 500;
    overflow: visible;
}

.hera-screen .hera-lobby-visual .visual_item {
    position: absolute;
    display: block;
    inset: 0;
    opacity: 0;
    transition: opacity 600ms;
}

.hera-screen .hera-lobby-visual .visual_item.active {
    opacity: 1;
}

/* `bottom` 은 여기서 말하지 않습니다 — 위의 히어로 규칙이 (0,4,0) 으로 항상
   이기므로, 여기에 적는 값은 어느 폭에서도 쓰이지 않는 죽은 선언입니다. */
.hera-screen .hera-lobby-visual .visual_btns {
    position: absolute;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    transform: translateX(-50%);
}

/*
   `casino.css:121` 그대로입니다 — 그리고 원본의 점은 **원이 아니라 알약**
   입니다. 꺼진 점은 16px 정사각(반지름 14 라 원으로 보이고), 켜진 점은 같은
   높이에 폭만 40 인 흰 알약에 시안 발광 셋이 겹칩니다. 우리는 10px 회보라
   점에 14px 파란 점이었습니다.
*/
.hera-screen .hera-lobby-visual .btn_circle {
    display: block;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #87898e;
    cursor: pointer;
    transition: all 300ms;
}

.hera-screen .hera-lobby-visual .btn_circle.active {
    width: 40px;
    background: #fff;
    box-shadow:
        0 0 20px #16bbf7,
        0 0 30px #16bbf7,
        0 0 50px #fff;
}

/* --- 입금하기 · 출금하기 · 보유머니 -------------------------------------- */

/*
   **이 줄은 데스크톱 바가 없는 폭에만 있습니다.**

   운영자 결정입니다(2026-08-29): 「피씨에선 그냥 입금하기 출금하기, 카지노 &
   슬롯 머니 없애고」. 원본에서 벗어나는 자리라 그렇다고 적어 둡니다 —
   `game.ejs:35` 의 `.CasinoTab` 은 넓은 화면에 있습니다.

   **경계는 1280 이고 이 파일이 고른 값이 아닙니다.** 이 스킨의 데스크톱 바는
   `header-fit.css` 의 `@media (max-width: 1279px)` 로 숨겨지므로, 1280 부터
   머리에 입금하기 · 출금하기 · 보유머니가 **직접** 보이고 그 아래에서는 셋 다
   서랍 안입니다. 즉 이 줄이 없어지는 폭과 머리가 같은 것을 내놓는 폭이 같은
   값이어야 하고, 어긋나면 둘 다 없는 띠가 생깁니다 —
   `hera-lobby-bar.spec.ts` 가 두 숫자를 맞춰 봅니다.

   **그 경계는 1850 이었습니다.** 운영자가 「피씨」라고 부른 것은 1280 인데
   그 폭에서 이 스킨은 햄버거를 그리고 있었으므로, 줄만 지우면 회원이 서랍을
   열지 않고 자기 잔액을 볼 자리가 없어졌습니다. 그래서 먼저 머리를 1280 까지
   내렸고(`header-fit.css` 의 접힌 바), 줄은 그 값을 따라왔습니다. 두 숫자가
   같은 한 어느 폭에서도 셋 중 하나가 화면에 있습니다.

   ── 그리고 이 줄 위에 여백이 두 겹이었습니다 ──────────

   배포본 실측: 배너 바닥 → 줄 위끝 30 (768·1280·1920 모두), 줄의
   `padding: 25px 0`, `margin-bottom: -20px`, 줄 바닥 → 격자 0.

   그 30 은 `.hera-screen` 의 `margin: 30px auto`(`screens.css:64`)이고, 히어로는
   그 칸의 **형제**라 히어로 바닥과 칸 위끝 사이에 그대로 섭니다. 겹친 쪽은 줄
   자신의 **`padding: 25px 0`** 입니다: 원본에서 그 25 는 배너와 버튼 사이의
   *전부*인데(`#casino_visual` 바닥과 `.CasinoTab` 위끝이 같은 자리, 아래도
   `.CasinoTab` 바닥 547 = `#casino_wrap` 위끝 547), 우리는 그 값을 옮겨 오면서
   이미 30 을 내고 있는 칸 **안**에 넣었습니다. 배경도 테두리도 없는 줄의 세로
   padding 은 여백과 구별되지 않으므로, 그것은 padding 이라고 적힌 여백이었고
   위쪽이 55 가 됐습니다. `margin-bottom: -20px` 은 그 뒷수습입니다 — 위에 55 를
   만들어 놓았으니 아래의 행 간격 20 을 지워야 줄이 떠 보이지 않았습니다.

   둘 다 지웁니다. 남는 것은 한 겹입니다: 위 30(칸의 여백), 줄 자신 60(세 물건의
   높이), 아래 20(`.hera-lobby` 의 행 간격). 배너 바닥에서 격자까지 110 으로,
   원본의 `.CasinoTab` 이 차지하는 110 과 같습니다.

   ── 아래는 그 줄이 그려질 때의 모양 ────────────────

   머니줄은 **카드가 아닙니다.**

   `casino.css:47` 의 `.CasinoTab` 은 테두리도 라운드도 배경도 선언하지 않습니다
   — `display:flex; align-items:center; justify-content:space-between; width:100%;
   max-width:2200px; margin:0 auto; padding:25px 20px; gap:0` 이 전부이고, 그래서
   원본에서 이 줄에 보이는 것은 파란 버튼 둘과 잔액 상자 하나뿐입니다. 우리는
   그 셋을 `--hera-bg-card` 판에 1px 테두리와 라운드 12 를 둘러 담고 있었습니다.
   회원이 「완전 달라」라고 한 첫 번째가 이 상자입니다.

   가로 여백도 **0 입니다.** 원본의 줄은 페이지 폭을 그대로 쓰고 자기 안에서
   20 을 내어 내용을 x=20 에 놓는데, 우리 줄은 이미 `.hera-screen` 의
   `padding: 0 20px` 안에 들어 있습니다. 여기에 25 를 더 주고 있어서 1280 실측
   에서 버튼이 x=46 — 아래 타일 격자(x=20)와 어긋나 있었습니다.

   폰은 반대로 상자가 **있습니다** — 원본의 폰 화면(`game-m.ejs`)이 이 줄을
   `.info-bar.clean-ui` 카드로 그립니다. 아래 767 블록에서 되돌립니다.
*/
.hera-screen .hera-lobby-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
}

/* 위의 머리말이 말한 그 한 줄 — 머리가 셋을 직접 내놓는 폭에서는 이 줄이
   없습니다. 값은 `header-fit.css` 의 1279 와 맞물려 있습니다. */
@media (min-width: 1280px) {
    .hera-screen .hera-lobby-bar {
        display: none;
    }
}

/* `.CasinoTab .tab-box` (casino.css:58). `flex: 1 1 0` 이라 남는 폭은 버튼
   쪽이 가져가고, 잔액 상자는 오른쪽 끝에 붙습니다. */
.hera-screen .hera-lobby-bar-actions {
    display: flex;
    flex: 1 1 0;
    justify-content: flex-start;
    gap: 10px;
}

/*
   `casino.css:65` 의 `.CasinoTab .tab-box .tab-item` 그대로입니다.

   **둘 다 채웁니다.** 여기가 첫째만 파랗고 둘째는 회색이었는데, 원본은 두
   버튼을 같은 무게로 둡니다 — 충전과 환전 중 하나를 권하는 화면이 아니기
   때문입니다. 대문에서 제일 먼저 눈에 띄는 차이였습니다.

   `#16bbf7` 은 스킨의 `--primary-blue`(`#00BFFF`)가 아닙니다. 원본이 이 두
   버튼에만 쓰는 별도 값이고, 토큰으로 접으면 그 사실이 사라지므로 글자로
   둡니다. 높이 60 · 너비 150 도 그 규칙의 것입니다.
*/
.hera-screen .hera-lobby-bar-link {
    display: flex;
    width: 150px;
    height: 60px;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    border: 1px solid #16bbf7;
    border-radius: 8px;
    background-color: #16bbf7;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}

.hera-screen .hera-lobby-bar-link:hover {
    background-color: #16bdf9;
    color: #fff;
}

/*
   상자는 **누르는 것이 아닙니다.**

   여기 있던 `cursor: pointer` 와 hover 배경, 그리고 그 아래 있던 가져오기
   얼굴(아이콘 + 게임머니 가져오기)은 `game.ejs:41` 쪽 — `ng-mouseenter` ·
   `ng-click` 을 단 카지노 & 슬롯 머니 — 의 옷이었습니다. 그 얼굴은 이 스킨에서
   없어졌습니다: 원본이 폰에 보내는 화면(`game-m.ejs:36-43`)은 이 자리에
   핸들러 없는 `<div>` 로 **보유머니**를 놓고, 운영자가 그쪽으로 정했습니다.
   가져오기는 서랍 바닥(`hera/chrome.tsx` 의 menu-footer)과 출금하기 ·
   테더출금 · 스포츠 장바구니의 `VendorRecallControl` 에 그대로 있습니다.

   상자 자체는 원본의 것을 그대로 씁니다 —
   `.CasinoTab .balance { background-color: #1b222c; border-radius: 8px;
   height: 60px; padding: 0 30px; min-width: 235px; max-width: 300px }`
   (`casino.css:73`). 높이 60 은 옆의 두 버튼과 같은 값이라 세 물건이 한 줄에
   나란히 섭니다.

   글자는 상자가 정합니다 — 원본은 `.balance` 에 `font-size: 15px; font-weight:
   600; color: #fff` 을 걸고, 안의 세 조각(제목 · 숫자 · 「원」)에는 **크기를
   따로 주지 않습니다.**

   `justify-content` 도 `space-between` 입니다 (`casino.css:136` 이 위의
   `flex-end` 를 같은 특이도로 덮습니다 — 원본 계산값 실측 `space-between`).
   제목이 왼쪽 끝, 숫자와 「원」이 오른쪽 끝입니다. 우리 마크업에는 원본의
   `.balance-content` 묶음이 없으므로 제목에 `margin-right: auto` 를 주어 같은
   배치를 냅니다.
*/
.hera-screen .hera-lobby-balance {
    display: flex;
    min-width: 235px;
    max-width: 300px;
    height: 60px;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0 30px;
    border-radius: 8px;
    background-color: #1b222c;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
}

.hera-screen .hera-lobby-balance-label {
    margin-right: auto;
}

/*
   숫자만 색이 다릅니다.

   원본의 이 자리는 빨강입니다 — `game.ejs:49` 가 `<data>` 에 인라인으로
   `#ff3333` 을 적어 `casino.css:141` 의 `#16bbf7` 을 이깁니다. 그 빨강은
   **벤더에 묶여 있는 돈**의 색이었고, 여기 서는 숫자는 이제 회원 자신의
   보유머니라 그 뜻이 아닙니다. 원본이 보유머니를 그리는 자리
   (`game-m.ejs:316` 의 `.balance-money { color: var(--primary-blue) }`)의 색을
   씁니다 — 아래 767 블록과 같은 값이라, 한 낱말이 폭에 따라 색을 바꾸지
   않습니다.

   `tabular-nums` 만 우리 것입니다. 이 숫자는 10초마다 자리에서 새로 그려지는데
   (`player-provider` 의 heartbeat), 비례 숫자로 두면 자릿수가 그대로여도 폭이
   흔들립니다. 원본은 `font_gmarket_sans` 로 같은 일을 하고 우리에게는 그
   서체가 없습니다.
*/
.hera-screen .hera-lobby-balance-value {
    color: var(--hera-blue);
    font-variant-numeric: tabular-nums;
}

/* --- the two grids ------------------------------------------------------- */

/* `slot.css` 의 `.game-grid` — 슬롯 벤더와 게임 목록이 쓰는 기본값입니다. */
.hera-screen .hera-lobby-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

/*
   카지노 벤더 목록만 **네 칸 고정**입니다. `auto-fill` 이 아닙니다.

   원본에서 이 둘은 다른 격자입니다 — 카지노는
   `#casino_list > .listbox { grid-template: repeat(1,1fr) / repeat(4,1fr) }`
   (`casino.css:384`)이고, 슬롯 벤더는 `.game-grid.provider-grid` 의
   `auto-fill minmax(250px, 1fr)` 입니다. 위 기본값이 후자라 카지노에만 덮습니다.

   `auto-fill` 은 1280 에서 우연히 4칸이 나옵니다. 그 한 폭만 재면 맞아 보이고,
   1600 부터 5칸이 되어 타일이 296px 로 쪼그라듭니다 — 사용자가 원본과 나란히
   놓고 「아직도 다르다」고 한 것이 이것입니다. 한 폭에서 맞는 것과 맞는 것은
   다릅니다.
*/
.hera-screen .hera-lobby-grid-casino {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hera-screen .hera-lobby-grid-slot {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.hera-screen .hera-lobby-grid-games {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.hera-screen .hera-lobby-card {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
    border: 1px solid #182a47;
    border-radius: 12px;
    background-color: var(--hera-bg-dark);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    text-align: left;
    transition:
        transform 300ms,
        box-shadow 300ms;
}

.hera-screen .hera-lobby-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 191, 255, 0.2);
}

/* 점검중. Not a hover target and not a lift — the model refuses it either way,
   and a card that still rises under the pointer reads as pressable. */
.hera-screen .hera-lobby-card.hera-lobby-off {
    cursor: default;
}

.hera-screen .hera-lobby-card.hera-lobby-off:hover {
    transform: none;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.hera-screen .hera-lobby-card.hera-lobby-on {
    border-color: var(--hera-blue);
    box-shadow: 0 0 0 1px var(--hera-blue-glow);
}

/*---------------------------------------------------------
    카지노 타일 — 원본의 `.casinoitem` 을 그대로 따릅니다

    각진 모서리 · `#8d8d8d` 테두리 · 그림자 없음 · 호버는 들림이 아니라 확대
    (`casino.css:400-418`). 간격 20px 도 그 시트의 값입니다 — 1600px 이하에서
    20, 그 위에서 10 이라, 이 사이트가 실제로 쓰이는 폭에서는 20 입니다.

    **슬롯 타일과 다른 모양이 되는 것이 맞습니다.** 위의 카드 규칙은 slot.css
    의 카드 언어이고 여기까지 한 벌로 쓰면 더 깔끔하지만, 그건 우리 각색이지
    ujubet 이 아닙니다. 원본의 `game.ejs` 는 `casino.css` 와 `slot.css` 를 **둘
    다** 싣고, 두 격자가 한 화면에서 서로 다른 카드로 그려집니다. 그 혼재까지
    재현하는 쪽으로 정했습니다 (2026-08-28, 사용자 판단).

    안쪽 그림의 호버 확대는 건드리지 않습니다. 원본은 카드 1.05 위에 그림
    1.2 를 겹쳐 배율이 곱해지는데, 그 합성까지 옮기는 것은 별개의 판단입니다.
---------------------------------------------------------*/

.hera-screen .hera-lobby-grid-casino {
    gap: 20px;
}

.hera-screen .hera-lobby-grid-casino .hera-lobby-card {
    border-color: #8d8d8d;
    border-radius: 0;
    box-shadow: none;
}

.hera-screen .hera-lobby-grid-casino .hera-lobby-card:hover {
    transform: scale(1.05);
    box-shadow: none;
}

/* 점검중은 여기서도 반응하지 않습니다 — 위의 규칙과 같은 이유입니다. */
.hera-screen
    .hera-lobby-grid-casino
    .hera-lobby-card.hera-lobby-off:hover {
    transform: none;
    box-shadow: none;
}

/* 선택 표시는 테두리 고리로 남깁니다. 그림자를 없애면서 같은 특이도의 위
   규칙을 덮게 되므로, 여기서 다시 세우지 않으면 조용히 사라집니다. */
.hera-screen .hera-lobby-grid-casino .hera-lobby-card.hera-lobby-on {
    border-color: var(--hera-blue);
    box-shadow: 0 0 0 1px var(--hera-blue-glow);
}

/*
   The artwork's own box, so the caption strip below can take height without
   cropping the picture. `casino-fit.css` shipped the other arrangement first —
   a shortened caption inside a card fixed at 4/3 — and `object-fit: cover` paid
   for it by trimming exactly where a slot tile keeps its wordmark; it took
   노리밋 시티's own "CITY" off the deployed page.
*/
.hera-screen .hera-lobby-card-art {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

/*
   The casino tiles are 431×247 and carry the vendor's Korean name burnt into
   the artwork, hard left. A 4/3 box crops about a fifth off each side and takes
   the first syllable of every name with it — 에볼루션 게이밍 rendered as
   「볼루션 게이밍」 on the deployed page. 400/220 is the ratio the export's own
   `.casinoitem` used and it trims about four percent, which is frame.
*/
.hera-screen .hera-lobby-grid-casino .hera-lobby-card-art {
    aspect-ratio: 400 / 220;
}

/*
   `:not(.hera-lobby-card-logo)` — the artwork, not the wordmark sitting on top
   of it. **The logo is a direct child `<img>` of the same box**, so without
   this exclusion these two rules reach it and win on specificity: `> img`
   scores (0,3,1) against the logo's own (0,2,0), and the hover rule (0,4,1)
   beats it by more.

   That collision shipped two defects at once and the fix for the first one
   missed the second:

     `object-fit: cover` — the logo was cropped to the card's 4/3 instead of
     being letterboxed. 플레이앤고 (123×33) lost 76px a side and rendered as
     「AY'n GO」. The `400/220` rule above was added for exactly this failure on
     the casino grid, but casino tiles are one piece with no logo layer, so it
     could not reach the slot grid.

     `transform: scale(1.05)` — replaced the logo's `translate(-50%, -50%)`,
     which is what centres it, so hovering a slot tile threw the wordmark to
     the corner.

   Narrowing the selector rather than raising the logo's specificity is
   deliberate: the next property added here would collide again, and
   「the artwork image」 is what these rules were always meant to say.
*/
.hera-screen .hera-lobby-card-art > img:not(.hera-lobby-card-logo) {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms;
}

.hera-screen
    .hera-lobby-card:hover
    .hera-lobby-card-art
    > img:not(.hera-lobby-card-logo) {
    transform: scale(1.05);
}

/*
   This one keeps the logo on purpose — a stopped vendor's wordmark should grey
   out with its artwork, and `filter` collides with nothing the logo sets.

   점검 리본만은 뺍니다. `casino_stop.png` 는 56×56 붉은 모서리 띠이고, 카드
   위에서 「이 게임사는 멈춰 있다」고 말하는 것은 그 띠 하나뿐인데, 직계
   `<img>` 라는 이유로 `grayscale(1) brightness(0.5)` 가 함께 걸려 **카드에서
   가장 어두운 조각이 되어 있었습니다**. 원본은 리본에 아무 필터도 걸지
   않습니다 — `casino.css` 의 `.casinoitem > img.stop` 은 위치와 z-index 만
   정하고, 어두워지는 것은 `img.bg` 쪽입니다. 그림은 색을 잃고 리본은 남습니다.
*/
.hera-screen
    .hera-lobby-card.hera-lobby-off
    .hera-lobby-card-art
    > img:not(.hera-lobby-card-stop) {
    filter: grayscale(1) brightness(0.5);
}

/* The second layer, for artwork that ships one. A one-piece tile has no logo
   to draw and the element is simply absent — never an `<img>` with an empty
   `src`, which is a broken-image glyph in the middle of the card. */
.hera-screen .hera-lobby-card-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 75%;
    max-height: 45%;
    object-fit: contain;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

.hera-screen .hera-lobby-card-stop {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    max-width: 46%;
    pointer-events: none;
}

/*
   The caption, on a strip of its own. Flat rather than a gradient: there is no
   artwork behind it to fade out of, and the artwork above it already carries
   this vendor's Latin wordmark.
*/
.hera-screen .hera-lobby-card-name {
    display: flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    overflow: hidden;
    border-top: 1px solid #182a47;
    background: var(--hera-bg-dark);
    color: var(--hera-ink);
    font-size: 14px;
    font-weight: 600;
}

/*
   이름을 자르는 것은 띠가 아니라 **이 칸**입니다.

   위의 띠는 `display: flex` 라서 글자가 익명 flex 항목으로 들어가고, 익명
   항목에는 `text-overflow` 가 닿지 않습니다. 띠에 걸어 두었던 말줄임은
   그래서 처음부터 아무 일도 하지 않았고, `justify-content: center` 와 겹쳐
   **긴 이름이 좌우로 똑같이 흘러넘쳐 앞 글자와 뒷 글자가 같이 잘렸습니다** —
   390px 에서 재보면 양쪽 29px 씩입니다. 회원이 두 번 말한 「이름이 잘리고
   가운데가 아니다」가 이 모양이고, 지금 실려 있는 열한 곳은 우연히 다 들어가서
   보이지 않을 뿐입니다(운영자가 콘솔에서 이름을 바꾸면 그날 나옵니다).

   진짜 항목을 하나 두면 둘이 같이 풀립니다: 들어가는 이름은 flex 가 가운데로
   놓고, 넘치는 이름은 `flex-shrink` 가 칸 너비까지 줄여 **뒤에만** 말줄임을
   답니다. 앞 글자는 어떤 이름에서도 남습니다.
*/
.hera-screen .hera-lobby-card-label {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A game tile: square, and the title rides over the bottom of the thumbnail. */
.hera-screen .hera-lobby-game-art {
    aspect-ratio: 1 / 1;
}

.hera-screen .hera-lobby-game-title {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 10px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 13px;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- the open vendor ----------------------------------------------------- */

.hera-screen .hera-lobby-detail {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hera-screen .hera-lobby-detail-head {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    border-radius: 12px;
    background-color: var(--hera-bg-card);
}

.hera-screen .hera-lobby-detail-logo {
    height: 35px;
    max-width: 160px;
    object-fit: contain;
}

/*
   로고가 없는 게임사의 이름.

   이 스킨의 슬롯 열한 곳 가운데 로고 층을 들고 오는 것은 넷뿐이라 이 자리는
   보통 글자입니다 — 그런데 규칙이 하나도 없어서 본문을 그대로 물려받아
   1280 에서 14px, 390 에서 12px 회색으로 그려지고 있었습니다. 열려 있는
   게임사의 이름이 그 아래 게임 제목보다 작았다는 뜻입니다. 원본은 이 머리
   전체에 `font-size: 20px; color: #16bbf7` 을 겁니다(`slot.css` 의
   `.slot-detail-header`); 그 둘을 머리 대신 이름에만 옮겨 답니다. 머리에
   걸면 옆의 검색칸과 뒤로가기까지 20px 이 됩니다.
*/
.hera-screen .hera-lobby-detail-title {
    min-width: 0;
    overflow: hidden;
    color: #16bbf7;
    font-size: 20px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hera-screen .hera-lobby-back {
    margin-left: auto;
    padding: 10px 15px;
    border: 0;
    background: none;
    color: #63d2ff;
    font-size: 14px;
    cursor: pointer;
}

.hera-screen .hera-lobby-back:hover {
    color: var(--hera-ink);
}

/* --- search -------------------------------------------------------------- */

/*
   `max-width` 는 원본에서 베낀 것이 아니라 원본에 없는 것을 재는 자입니다.
   검색은 우리가 더한 것이고, `flex: 1 1 auto` 만 두었더니 1280 에서 머리
   전체를 먹어 **950px 짜리 입력칸**이 되어 있었습니다 — 한 줄에 스무 글자
   남짓 들어가는 칸을 그 열 배로 그린 것입니다. 460 은 이 자리에 실제로 오는
   가장 긴 안내문(「프라그마틱 플레이 게임 검색」)이 여유 있게 들어가는 폭이고,
   남는 자리는 아래의 `margin-left: auto` 가 뒤로가기를 오른쪽 끝으로 보냅니다.
*/
.hera-screen .hera-lobby-search {
    display: flex;
    min-width: 0;
    max-width: 460px;
    flex: 1 1 auto;
    align-items: center;
    gap: 12px;
}

.hera-screen .hera-lobby-search-field {
    position: relative;
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
}

.hera-screen .hera-lobby-search-field > svg {
    position: absolute;
    left: 12px;
    width: 17px;
    height: 17px;
    color: var(--hera-ink-dim);
    pointer-events: none;
}

.hera-screen .hera-lobby-search-field > input {
    width: 100%;
    height: 44px;
    padding: 0 42px 0 37px;
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    outline: none;
    background: #10131c;
    color: var(--hera-ink);
    font-size: 14px;
    transition: border-color 160ms;
}

.hera-screen .hera-lobby-search-field > input:focus {
    border-color: var(--hera-blue);
}

.hera-screen .hera-lobby-search-field > input::placeholder {
    color: var(--hera-ink-dim);
}

/* 44px of tappable area over a 14px glyph, inside the field's own padding. */
.hera-screen .hera-lobby-search-clear {
    position: absolute;
    right: 0;
    display: grid;
    width: 42px;
    height: 44px;
    place-items: center;
    border: 0;
    background: transparent;
    color: var(--hera-ink-dim);
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.hera-screen .hera-lobby-search-clear:hover {
    color: var(--hera-ink);
}

.hera-screen .hera-lobby-search-count {
    flex-shrink: 0;
    color: var(--hera-blue);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- notices and paging -------------------------------------------------- */

.hera-screen .hera-lobby-note {
    grid-column: 1 / -1;
    margin: 0;
    padding: 64px 20px;
    color: var(--hera-ink-dim);
    font-size: 15px;
    line-height: 1.7;
    text-align: center;
}

.hera-screen .hera-lobby-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 4px 0 8px;
}

.hera-screen .hera-lobby-pager > button {
    min-width: 84px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--hera-line);
    border-radius: 8px;
    background: var(--hera-bg-card);
    color: var(--hera-ink);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition:
        border-color 160ms,
        color 160ms;
}

.hera-screen .hera-lobby-pager > button:hover:not(:disabled) {
    border-color: var(--hera-blue);
}

/*
   꺼진 것은 흐려지는 것이 아니라 색조를 잃습니다. 반투명으로 꺼진 티를 내면
   어두운 판 위에서 읽히지 않는다는 것이 이 스킨에서 이미 확인된 사실이라,
   `--hera-off-*` 팔레트를 쓰고 `opacity` 는 명시적으로 1로 되돌립니다
   (`lib/hera-disabled-state.spec.ts`).
*/
.hera-screen .hera-lobby-pager > button:disabled {
    border-color: var(--hera-off-line);
    background: var(--hera-off-bg);
    color: var(--hera-off-ink);
    cursor: not-allowed;
    opacity: 1;
}

.hera-screen .hera-lobby-pager-state {
    min-width: 74px;
    color: var(--hera-ink-dim);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/*
   `.hera-lobby-toast` 가 여기 있었습니다 (2026-09-17 에 없앴습니다).

   「Fixed, above everything」이라고 적혀 있었지만 `bottom: 40px` 이었고, 그
   자리가 운영자가 「맨묍에뜨네」라고 말한 자리입니다. 다섯 스킨이 각자
   아래쪽에 자기 것을 띄우고 있었습니다.

   한 벌로 합쳤습니다 — `components/screen-toast.tsx` 가 오른쪽 위에
   그립니다. 시계도 그쪽이 듭니다.
*/

/* --- 767: the phone ------------------------------------------------------ */

@media (max-width: 767px) {
    /* `game-m.ejs:256` 의 `.visual_btns { bottom: 10px; gap: 8px }` — `bottom`
       은 이제 바깥 규칙이 같은 값으로 말하므로 간격만 남습니다. */
    .hera-screen.hera-lobby-hero .hera-lobby-visual .visual_btns {
        gap: 8px;
    }

    /* 같은 파일 265행. 폰의 점은 8px 반투명 흰 원이고, 켜진 것은 폭 20 의
       흰 알약입니다 — 넓은 화면의 회색 16px · 발광하는 40px 과 다릅니다. */
    .hera-screen .hera-lobby-visual .btn_circle {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
    }

    .hera-screen .hera-lobby-visual .btn_circle.active {
        width: 20px;
        background: #fff;
        box-shadow: none;
    }

    /*
       폰의 머니줄은 **다른 화면에서 옵니다.**

       ujubet 은 폰에 `game.ejs` 를 좁혀 보내지 않고 `game-m.ejs` 라는 별도
       화면을 보내는데, 그 화면의 이 줄은 `.info-bar.clean-ui` 라는 카드이고
       넓은 화면의 `.CasinoTab` 과 배치가 뒤집혀 있습니다 — **돈이 위, 버튼이
       아래**입니다. 우리는 버튼이 위였고 버튼은 60px 짜리 파란 덩어리 둘,
       줄 전체가 162px 였습니다(원본 101.4).

       값은 그 파일의 **≤480 갈래**를 씁니다. 원본은 480 에서 한 번 더 갈라
       481~767 에 조금 큰 값을 두는데, 이 시트의 중단점은 767 과 900 둘뿐이고
       (파일 머리말) 그 사이 구간을 위해 셋째를 들이는 것보다 폰에서 맞는 쪽이
       낫습니다. 회원이 보는 폭이 그쪽입니다.

       `13px 7px 12px 11px` 은 원본의 좌우가 어긋난 값 그대로입니다.
    */
    .hera-screen .hera-lobby-bar {
        flex-wrap: wrap;
        gap: 10px;
        padding: 13px 7px 12px 11px;
        border-radius: 10px;
        background-color: var(--hera-bg-card);
    }

    .hera-screen .hera-lobby-bar-actions {
        order: 2;
        flex: 1 1 100%;
        gap: 8px;
    }

    /*
       `.balance-actions-block button` — 36px 높이에 14px/600, 남는 폭을 둘이
       나눠 가집니다. 그리고 **두 버튼의 무게가 다릅니다**: 입금은 시안 그라
       디언트에 어두운 글자, 출금은 남색 판에 흐린 글자와 1.2px 테두리.

       넓은 화면에서 둘 다 파란 것과 모순이 아닙니다 — `casino.css:65` 와
       `game-m.ejs:347` 은 서로 다른 화면의 규칙이고, 원본은 폭에 따라 실제로
       다르게 말합니다. 아이콘(fa-coins · fa-wallet)도 그 화면의 것이라 마스크로
       그립니다. 이 뷰의 마크업은 이 작업의 범위 밖입니다.
    */
    .hera-screen .hera-lobby-bar-link {
        height: 36px;
        flex: 1 1 0;
        gap: 7px;
        padding: 0;
        font-size: 14px;
    }

    .hera-screen .hera-lobby-bar-link::before {
        content: "";
        width: 17px;
        height: 17px;
        flex-shrink: 0;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    .hera-screen .hera-lobby-bar-actions > .hera-lobby-bar-link:first-child {
        border: 0;
        background: linear-gradient(90deg, #36eaff 50%, #00bfff 100%);
        color: #0d1018;
    }

    .hera-screen .hera-lobby-bar-actions > .hera-lobby-bar-link:first-child::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7h-2zm-6 .67l2.59-2.58L17 11.5l-5 5-5-5 1.41-1.41L11 12.67V3h2v9.67z'/%3E%3C/svg%3E");
    }

    .hera-screen .hera-lobby-bar-actions > .hera-lobby-bar-link:last-child {
        border: 1.2px solid #233554;
        background: #182135;
        color: #a6bbcc;
    }

    .hera-screen .hera-lobby-bar-actions > .hera-lobby-bar-link:last-child::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5 12V5h14v7h2V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v7h2zm6-1.33l-2.59 2.58L7 11.84l5-5 5 5-1.41 1.41L13 10.67V18h-2v-7.33z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M5 12V5h14v7h2V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v7h2zm6-1.33l-2.59 2.58L7 11.84l5-5 5 5-1.41 1.41L13 10.67V18h-2v-7.33z'/%3E%3C/svg%3E");
    }

    /*
       `.balance-value-row` — 판도 라운드도 없이 줄의 오른쪽 끝에 붙는 한 줄
       입니다 (`.balance-block { justify-content: right }`). 넓은 화면의 어두운
       알약은 폰에서 사라집니다: 바깥 카드가 이미 판이라, 판 안에 판을 또 그리는
       모양이 됩니다.
    */
    .hera-screen .hera-lobby-balance {
        order: 1;
        min-width: 0;
        max-width: none;
        height: auto;
        flex: 1 1 100%;
        align-items: baseline;
        justify-content: flex-end;
        gap: 7px;
        padding: 0;
        border-radius: 0;
        background-color: transparent;
    }

    /* 셋이 오른쪽에 모여야 하므로, 넓은 화면에서 제목을 왼쪽 끝으로 밀던
       `margin-right: auto` 를 여기서 되돌립니다. */
    .hera-screen .hera-lobby-balance-label {
        margin-right: 0;
        color: var(--hera-ink-dim);
        font-size: 14px;
    }

    .hera-screen .hera-lobby-balance-unit {
        color: var(--hera-ink-dim);
        font-size: 14px;
    }

    /* `.balance-money { font-size: 23px; font-weight: 700 }` — 색은 바깥 규칙이
       이미 같은 값으로 말합니다(위의 그 자리 참고). */
    .hera-screen .hera-lobby-balance-value {
        font-size: 23px;
        font-weight: 700;
    }

    .hera-screen .hera-lobby-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    /* game-m.ejs 의 `.game-card { border-radius: 8px }`. 넓은 화면의 12px 을
       그대로 쓰면 179px 짜리 칸에서는 모서리가 눈에 띄게 둥급니다. */
    .hera-screen .hera-lobby-card {
        border-radius: 8px;
    }

    .hera-screen .hera-lobby-card-name {
        min-height: 34px;
        padding: 0 6px;
        font-size: 12px;
    }

    /* 같은 파일의 `.game-card.slot .title-bar { padding: 8px }` 와
       `.title { font-size: 12px }`. 177px 칸에서 두 글자쯤 더 들어갑니다. */
    .hera-screen .hera-lobby-game-title {
        padding: 8px;
        font-size: 12px;
    }

    /*
       game-m.ejs:196 dropped the vendor grid once a vendor was open rather
       than making a phone scroll past every other vendor to reach the games.
       The platform skin states the same thing about its own markup; this is
       this skin's copy of that decision, about this skin's markup.
    */
    .hera-screen .hera-lobby:has(.hera-lobby-detail) .hera-lobby-vendors {
        display: none;
    }

    /*
       머리가 스크롤을 따라옵니다 — 이것은 원본을 베낀 것이 **아니라** 원본이
       하지 않는 것입니다.

       한 게임사를 열면 390px 에서 문서가 6,366px 이 됩니다(프라그마틱 플레이,
       한 쪽 60개, 두 칸). 화면 하나가 844px 이니 일곱 화면 반이고, 목록으로
       돌아가는 단추와 검색칸은 그 맨 위 121px 안에 있어서 한 번 내려가면 둘
       다 손에 닿지 않습니다. 회원이 말한 「모바일에서 게임 목록을 넘기기
       힘들다」가 이것입니다. 원본은 더 나빠서 쪽 나눔조차 없이 그 게임사의
       게임을 전부 한 줄에 잇습니다 — 그러니 여기서는 원본을 따르지 않고
       머리를 붙입니다. 우리 쪽 nav 는 `--header-height` 만큼 위에 붙어 있으므로
       그만큼 내려서 겹치지 않게 합니다.
    */
    .hera-screen .hera-lobby-detail-head {
        position: sticky;
        top: var(--header-height, 70px);
        z-index: 5;
        flex-wrap: wrap;
    }

    /* 좁은 화면에서는 검색이 제 줄을 다 씁니다 — 위의 460px 은 넓은 화면에서
       머리를 다 먹지 않게 하는 자이지, 여기서 줄이려는 것이 아닙니다. */
    .hera-screen .hera-lobby-search {
        order: 3;
        max-width: none;
        flex: 1 1 100%;
    }

    .hera-screen .hera-lobby-detail-title {
        font-size: 16px;
    }

    .hera-screen .hera-lobby-pager > button {
        min-width: 0;
        flex: 1 1 0;
    }

}