/*
 * 헤라 스포츠 — internal.css · internationals.css · live.css 의 재서술.
 *
 * The export's three sports sheets ("Modern Casino Style", 2025-07-14) are the
 * design; they are not loadable as shipped because each opens with
 * `* { margin: 0; padding: 0 }`, `#body { … }` and a bare `button` rule — the
 * same unlayered resets that kept `deposit.css` and `bethistory.css` out. So
 * the rules are restated here with every selector under `.hera-screen`, the
 * colour tokens carried over verbatim, and the export's breakpoints
 * (1200/1300/768) translated to the site's own 900/767 — the export used its
 * width cuts to *remove* the cart and the detail panel outright; ours stack
 * them instead, on the standing rule that layout follows usability.
 *
 * The export's `blinkNeon` pulse on the bonus bar is stated as a fixed glow:
 * the seam test reads every selector in this file, and a keyframe step is a
 * selector it would rightly refuse. Composition is unchanged — the bar is
 * there, lit, in the export's colours.
 *
 * Loaded globally like the other screens-*.css: no rule in here can match
 * outside a `.hera-screen` root, which `skin-screen-seam.spec.ts` asserts.
 *
 * 한 가지 더: 이 보드는 `screens.css` 가 모든 `.hera-screen` 에 주는 상자
 * (`max-width: 1600px; margin: 30px 0; padding: 0 20px`)를 자기 뿌리에서만
 * 물립니다. 그 값은 가운데 놓인 카드 화면들의 것이고, 스포츠는 원본이 준
 * 자기 그릇을 갖고 있으며, 무엇보다 카트가 한 번 더 감싸이기 때문에 같은
 * 여백이 두 겹으로 붙었습니다 — 아래 「화면 뿌리의 상자」 주석에 실측값이
 * 있습니다. 남의 시트를 고치지 않고 여기서 되돌리는 것이 옳은 자리입니다.
 *
 * (원본 그릇의 이름은 주석에서도 우물정자 없이 `sports_wrap_new` 로
 * 적습니다. 이 시트가 제우스의 선택자를 한 번도 적지 않는다는 것을
 * `hera-sports-export-parity.spec.ts` 가 글자 단위로 재는데, 제우스가 쓰는
 * 아이디가 ujubet 의 이 이름 앞부분에 통째로 들어 있기 때문입니다.)
 */

.hera-screen.hera-sports,
.hera-screen.hera-sports-cart {
    --hs-bg-dark: #0D1018;
    --hs-bg-main: #11141d;
    --hs-bg-card: #1A1D2A;
    --hs-bg-card-header: #252936;
    --hs-blue: #00BFFF;
    --hs-text: #E0E7FF;
    --hs-text-2: #8A9CB3;
    --hs-border: #2C3A56;
    --hs-picked-bg: #00BFFF;
    --hs-picked-text: #0D1018;
    --hs-up: #EF4444;
    --hs-down: #3B82F6;
    --hs-live-red: #EF4444;
    font-family: 'Poppins', 'Noto Sans KR', sans-serif;
    color: var(--hs-text);
}

.hera-screen.hera-sports {
    background-color: var(--hs-bg-main);
}

/*
   화면 뿌리의 상자를 이 보드에서만 물립니다.

   `screens.css` 는 `.hera-screen` 마다 `max-width: 1600px; margin: 30px 0;
   padding: 0 20px` 을 줍니다 — 입금·출금처럼 가운데 놓인 카드 화면에는 맞는
   기본값입니다. 그런데 스포츠는 자기 그릇(sports_wrap_new)을 따로 갖고
   있고, 게다가 카트가 `.hera-screen.hera-sports-cart` 로 한 번 더 감싸이므로
   같은 여백이 **두 번** 붙었습니다. 1280 에서 실측한 대가:

     보드 안쪽 폭  1240 → 1200   (좌우 20 이 두 겹)
     카트 폭        380 →  340   (원본이 못 박은 380 이 무너짐)
     카트 윗변      보드보다 30px 아래 (`margin: 30px 0`)
     넓은 화면 상한 1800 → 1600

   시트를 고치는 대신 — 그 파일은 다른 화면들의 것입니다 — 이 두 뿌리에서만
   상자를 지우고, 원본이 적어 둔 값을 `.sports-wrap` 이 그대로 갖습니다.
*/
.hera-screen.hera-sports,
.hera-screen.hera-sports-cart {
    max-width: none;
    margin: 0;
    padding: 0;
}

/* internal.css:27 · internationals.css:27 · live.css:28 그대로. */
.hera-screen.hera-sports .sports-wrap {
    max-width: 1800px;
    margin: 20px auto;
    padding: 0 20px;
}

/* ---- 1. 종목 탭 ------------------------------------------------------- */

.hera-screen .sports-category-tabs {
    display: flex;
    background-color: var(--hs-bg-card);
    border-radius: 12px;
    margin-bottom: 20px;
    padding: 5px;
    overflow-x: auto;
}

.hera-screen .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px;
    border: none;
    border-radius: 8px;
    background: none;
    cursor: pointer;
    transition: background-color 0.2s;
    min-width: 90px;
    font: inherit;
}

.hera-screen .tab-item:hover {
    background-color: var(--hs-bg-card-header);
}

.hera-screen .tab-item.active {
    background-color: var(--hs-blue);
}

.hera-screen .tab-item img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.hera-screen .tab-item.active img {
    filter: brightness(0) invert(10%);
}

.hera-screen .tab-item span {
    font-size: 12px;
    color: var(--hs-text-2);
    font-weight: 500;
    white-space: nowrap;
}

.hera-screen .tab-item.active span {
    color: var(--hs-bg-dark);
}

/* 해외형·라이브는 탭이 왼쪽 패널 안에 든다 — internationals.css:40. */
.hera-screen .left-panel .sports-category-tabs {
    margin-bottom: 0;
    border-radius: 12px 12px 0 0;
    border-bottom: 1px solid var(--hs-border);
    flex-wrap: wrap;
    /*
       종목 줄이 눌리지 않게. 왼쪽 패널은 세로 flex 이고 높이가
       `calc(100vh - 120px)` 로 묶여 있는데, 이 줄에는 밑줄의 기본 규칙에서
       온 `overflow-x: auto` 가 있습니다. 넘침이 visible 이 아닌 상자는
       `min-height: auto` 가 0 으로 풀리므로, flex 가 자리를 나눌 때 이 줄부터
       납작하게 눌렀습니다 — 1280 실측: 해외형에서 탭 줄이 **55px → 20px**,
       라이브에서는 둘째 줄(UFC/복싱 · e스포츠)이 통째로 잘려 고를 수가
       없었습니다. live.css:38 이 같은 이유로 `flex-shrink: 0` 을 적어 두었고,
       해외형에도 같은 값이 필요합니다. */
    flex-shrink: 0;
}

/* 거절 문장은 흐름 밖입니다(화면 바닥 고정, 아래 3-1) — 왼쪽 판이 자리를
   나눌 때 세는 것 중에 없으므로 눌릴 것도 없습니다. */

.hera-screen .left-panel .tab-item {
    min-width: 70px;
    padding: 8px;
    gap: 4px;
}

.hera-screen .left-panel .tab-item img {
    width: 24px;
    height: 24px;
}

.hera-screen .left-panel .tab-item span {
    font-size: 11px;
}

/* ---- 2. 폴더 보너스 — 보드가 아니라 카트 안 ---------------------------
   원본은 이 선택지를 보드 위 가로 바에 두었습니다. 해외형·라이브에서는 그
   바가 폭의 3분의 1 짜리 왼쪽 칸에 들어가는데, 원본 시트의 버튼 자체가
   `padding: 15px 170px`(internal.css:125) 라서 서로 겹쳐 보였습니다 — 회원이
   말한 「3폴더나 5폴더 보너스 이런게 겹쳐서보임」 이 그것입니다. 제우스가 늘
   두어 온 자리, 곧 카트 안으로 내립니다. 폭이 정해져 있으니 한 줄에 하나씩
   쌓이고, 잠금 사유가 버튼 안에 함께 들어갑니다. */

.hera-screen .bonus-options-bar {
    margin: 4px 0 12px;
    padding: 10px;
    background-color: var(--hs-bg-dark);
    border-radius: 8px;
}

.hera-screen .bonus-options-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hs-text-2);
}

.hera-screen .bonus-options-title .bonus-count {
    font-weight: 500;
}

.hera-screen .bonus-options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.hera-screen .bonus-option {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 8px;
    width: 100%;
    background-color: var(--hs-bg-main);
    padding: 8px 12px;
    border-radius: 6px;
    border: 1px solid rgb(30, 120, 255);
    box-shadow: 0 0 8px var(--hs-blue);
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--hs-text);
    font: inherit;
    text-align: left;
}

.hera-screen .bonus-option .status {
    font-size: 11px;
    color: var(--hs-text-2);
    text-align: right;
}

.hera-screen .bonus-option.active .status {
    color: var(--hs-picked-text);
}

.hera-screen .bonus-option:not(:disabled):hover {
    background-color: var(--hs-bg-card-header);
    border-color: var(--hs-blue);
}

/* 꺼진 것은 색조를 잃는다 — 반투명은 이 팔레트에서 읽히지 않는다는 것이
   `hera-disabled-state.spec.ts` 에 이미 재어져 있으므로, 발광과 파랑을 걷어
   내고 판을 가라앉힌다. */
.hera-screen .bonus-option:disabled {
    box-shadow: none;
    border-color: var(--hs-border);
    background-color: transparent;
    color: var(--hs-text-2);
    cursor: not-allowed;
    opacity: 1;
}

.hera-screen .bonus-option:disabled .value,
.hera-screen .bonus-option:disabled .status {
    color: var(--hs-text-2);
}

.hera-screen .bonus-option.active {
    background-color: var(--hs-picked-bg);
    color: var(--hs-picked-text);
    border-color: var(--hs-picked-bg);
}

.hera-screen .bonus-option .label {
    font-size: 13px;
    font-weight: 500;
}

.hera-screen .bonus-option .value {
    font-size: 13px;
    font-weight: 700;
    color: var(--hs-blue);
}

.hera-screen .bonus-option.active .label,
.hera-screen .bonus-option.active .value {
    color: var(--hs-picked-text);
}


/* ---- 3. 본문 그리드 ---------------------------------------------------- */

.hera-screen .sports-main-content {
    display: grid;
    gap: 20px;
    align-items: flex-start;
}

.hera-screen .sports-main-content.mode-internal {
    grid-template-columns: 1fr 380px;
}

/* 해외형은 목록과 상세가 같은 폭을 나눠 갖고(internationals.css:31), 라이브는
   목록이 445px 로 못 박히고 상세가 남은 자리를 다 씁니다(live.css:31) —
   라이브 카드는 두 줄짜리 고정 높이라 폭이 늘어나 봐야 여백만 생기고,
   전광판과 시장 목록은 넓을수록 낫기 때문입니다. 사이도 20 이 아니라 15.
   `445px` 를 그대로 두면 1280 에서 가운데 칸이 눌리므로 남는 쪽을
   `minmax(0, 1fr)` 로 받습니다. */
.hera-screen .sports-main-content.mode-international {
    grid-template-columns: 1fr 1fr 380px;
}

.hera-screen .sports-main-content.mode-live {
    grid-template-columns: 445px minmax(0, 1fr) 380px;
    gap: 15px;
}

.hera-screen .sports-content-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.hera-screen .left-panel {
    background-color: var(--hs-bg-card);
    border-radius: 12px;
    border: 1px solid var(--hs-border);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 120px);
    min-width: 0;
}

/* internationals.css:35 · live.css:46 — 목록은 패널 폭을 그대로 씁니다.
   리그가 카드가 아니라 줄이 된 이상(위 4절) 안여백은 리그 몸통이 냅니다. */
.hera-screen .left-panel .match-list-area {
    overflow-y: auto;
    flex-grow: 1;
}

/*
   가운데 칸은 왼쪽과 같은 키로 섭니다 — internationals.css:33 ·
   live.css:33 의 `.left-panel, .center-panel { height: calc(100vh - …) }`.
   높이를 주지 않았더니 상세 자리표시자가 제 최소 높이인 500px 에서 끝나고
   왼쪽 목록은 780px 까지 이어져, 두 칸의 아랫변이 280px 어긋나 있었습니다 —
   1280 실측. 격자가 `align-items: flex-start` 라 칸이 내용만큼만 높기
   때문이므로, 이 칸만 늘려 둡니다.
*/
.hera-screen .center-panel {
    min-width: 0;
    align-self: stretch;
    /*
       900 아래에서 이 칸은 목록 *아래* 로 내려가고, `+N`·경기 카드가 이 칸을
       화면으로 데려옵니다(보드의 `openMatch`). 사이트 머리글이
       `position: sticky` 로 70px 을 차지하므로, 데려온 자리를 0 에 붙이면
       상세의 머리와 「목록으로」 단추가 그 밑으로 들어갑니다. 칸의 머리 위에
       비워 둘 자리를 여기서 말해 둡니다 — 보드는 머리글의 키를 모릅니다.
    */
    scroll-margin-top: 80px;
    max-height: calc(100vh - 120px);
}

/*
   카트가 스크롤을 따라오지 않던 이유. `.bet-slip-panel` 에는 이미
   `position: sticky; top: 20px` 이 있었지만(9절), 스킨 뷰가 카트를
   `.hera-screen.hera-sports-cart` 로 한 번 감싸므로 붙임의 기준 블록이 그
   래퍼가 되고, 래퍼의 높이는 곧 패널의 높이여서 움직일 여백이 0 이었습니다.
   붙임을 래퍼로 올리고 패널은 그 안에서 흐르게 둡니다.
*/
/* 붙임은 부모 안에서만 움직입니다. 격자가 `align-items: flex-start` 라서 이
   칸도 내용만큼만 높았고, 그러면 안쪽 카트가 붙어 있어도 움직일 여백이 다시
   0 입니다 — 배포 후 실측: 900px 을 내리자 카트가 -129 로 따라 올라갔습니다.
   이 칸만 줄 높이까지 늘려 두고, 왼쪽·가운데는 그대로 둡니다. */
.hera-screen .right-panel,
.hera-screen .cart-rail {
    min-width: 0;
    align-self: stretch;
}

.hera-screen .right-panel > .hera-sports-cart,
.hera-screen .cart-rail > .hera-sports-cart {
    position: sticky;
    top: 20px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
}

.hera-screen .right-panel > .hera-sports-cart > .bet-slip-panel,
.hera-screen .cart-rail > .hera-sports-cart > .bet-slip-panel {
    position: static;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ---- 3-1. 막힌 배당의 거절 ---------------------------------------------- */

/* 비어 있을 때도 노드는 남습니다 — 살아 있는 영역을 껐다 켜면 낭독기가
   문장을 놓칩니다. 빈 div 는 어차피 높이가 0 입니다. */

/*
   화면 바닥에 붙습니다.

   종목 줄 밑에 두었더니 경기 목록을 조금만 내려도 문장이 화면 위로 빠져
   나갔습니다 (2026-09-05 운영자 지적 「선택시 메세지가 맨위로가서 스크롤
   내린상태에선 안보여」). 국내형은 문서가 구르고 해외형·라이브는 왼쪽 판이
   제 안에서 구르는데, 어느 쪽이든 눌린 칸은 화면 한가운데이고 문장은 그
   위 어딘가입니다 — 아무 일도 안 일어난 것과 구별되지 않습니다.
   제우스가 같은 이유로 같은 자리를 씁니다 (`sports-board-styles.ts`).

   시트 **아래**로 깝니다. 카트를 열면 판을 덮으므로, 판의 칸에 대한 문장이
   그 위에 있을 이유가 없습니다. `pointer-events: none` 은 바닥을 가로지르는
   띠가 FAB 을 삼키지 않게 하기 위한 것입니다 — 고치려던 것보다 나쁜 결함.
*/
.hera-screen .board-refusal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: calc(var(--z-bet-slip-panel, 50) - 1);
    display: flex;
    justify-content: center;
    padding: 0 10px 10px;
    pointer-events: none;
}

.hera-screen .board-refusal p {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 720px;
    margin: 0;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--hs-border);
    background-color: var(--hs-bg-card);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.6);
    color: var(--hs-text-2);
    font-size: 13px;
    line-height: 1.45;
}

/* ---- 4. 리그 아코디언 -------------------------------------------------- */

/* internal.css:45 — 국내형은 리그마다 제 카드입니다. 리그 사이의 10px 은
   `.sports-content-panel` 의 `gap` 이 이미 냅니다(internal.css:42); 여기에
   `margin-bottom: 10px` 을 겹쳐 두었더니 20px 이 되어 있었습니다 — 1280
   실측. 여백을 내는 곳은 한 군데라야 합니다. */
.hera-screen .league-accordion {
    background-color: var(--hs-bg-card);
    border-radius: 8px;
    border: 1px solid var(--hs-border);
}

/* 원본은 머리글 아래에 줄을 긋고(internationals.css:58) 몸통 위에도 하나 더
   그었습니다. 둘 다 두면 2px 이 되고, 접힌 리그에는 아무 줄도 남지 않습니다.
   줄을 머리글 쪽 하나로 모으면 펼쳤을 때 보이는 그림은 같고 접혔을 때도
   리그끼리 구분됩니다 — `.league-body` 의 border-top 은 그래서 없습니다. */
.hera-screen .league-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 15px;
    cursor: pointer;
    background: none;
    border: none;
    border-bottom: 1px solid var(--hs-border);
    color: inherit;
    font: inherit;
    text-align: left;
}

.hera-screen .league-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-grow: 1;
    overflow: hidden;
}

.hera-screen .league-info .sport-icon,
.hera-screen .league-info .nation-flag {
    height: 20px;
}

.hera-screen .league-info .league-name {
    font-weight: 600;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
   리그 머리글은 보드마다 크기가 다릅니다. 위의 값은 국내형 것이고
   (internal.css:46-49 — 15px 안여백, 10px 사이, 20px 아이콘, 16px 이름),
   해외형·라이브는 같은 줄을 3분의 1 폭 패널에 넣어야 하므로 원본이 한 단씩
   줄여 적어 두었습니다(internationals.css:58-61 = live 도 같음). 지금까지는
   좁은 쪽 값이 국내형에도 걸려 있어서, 폭이 남는 보드에서 리그 이름이 14px
   로 작고 국기가 18px 로 작았습니다 — 1280 실측.
*/
.hera-screen .left-panel .league-header {
    padding: 12px 10px;
}

.hera-screen .left-panel .league-info {
    gap: 8px;
}

.hera-screen .left-panel .league-info .sport-icon,
.hera-screen .left-panel .league-info .nation-flag {
    height: 18px;
}

.hera-screen .left-panel .league-info .league-name {
    font-size: 14px;
}

/*
   해외형·라이브의 리그는 카드가 아니라 패널 안의 줄입니다 —
   internationals.css 와 live.css 에는 `.league-accordion` 규칙이 아예 없고,
   폰 시트가 그것을 분명히 합니다(international-m.css:50-52: 패널이 카드,
   리그는 밑줄로만 갈림). 카드를 카드 안에 또 그리면 테두리가 두 겹이 되고
   390 에서는 좌우로 10(패널)+1(테두리)+15(몸통) 을 세 번 잃습니다.
*/
.hera-screen .left-panel .league-accordion {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--hs-border);
    border-radius: 0;
}

.hera-screen .league-header .league-time {
    font-size: 12px;
    color: var(--hs-text-2);
    white-space: nowrap;
}

.hera-screen .expand-icon {
    margin-left: auto;
    color: var(--hs-text-2);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.hera-screen .expand-icon.expanded {
    transform: rotate(180deg);
}

.hera-screen .league-body {
    padding: 0 15px 15px;
}

.hera-screen .match-container {
    border-bottom: 1px solid var(--hs-border);
    padding: 10px 0;
}

.hera-screen .match-container:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.hera-screen .match-header {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13px;
    color: var(--hs-text-2);
    margin-bottom: 10px;
}

.hera-screen .market-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hera-screen .market-row {
    display: flex;
    align-items: center;
    gap: 5px;
}

.hera-screen .market-row .market-name {
    width: 120px;
    font-size: 12px;
    color: var(--hs-text-2);
    padding-right: 10px;
    flex-shrink: 0;
}

/* ---- 5. 배당 셀 -------------------------------------------------------- */

.hera-screen .bet-options {
    display: grid;
    grid-template-columns: 1fr 120px 1fr;
    gap: 5px;
    flex-grow: 1;
    min-width: 0;
}

/* 해외형은 가운데를 80 으로 좁히고 네 번째 50px 칸에 +N 을 세웁니다 —
   internationals.css:69. 국내형은 무승부 칸에 「무승부」 라는 낱말이 들어가서
   120 이 필요하고, 해외형은 배당만 들어가므로 80 으로 충분합니다. */
.hera-screen .mode-international .bet-options {
    grid-template-columns: 1fr 80px 1fr 50px;
}

/*
   마켓 이름을 옆이 아니라 위에.

   원본의 데스크톱 시트는 이름을 왼쪽 120px 칸에 옆으로 세웁니다. 그 시트가
   전제한 왼쪽 패널은 570px 쯤입니다 — 1300 아래에서 카트를 통째로 지우고 두
   칸으로 가기 때문입니다(internationals.css:151). 우리는 카트를 지우지
   않기로 했으므로 1280 에서 왼쪽 패널이 390px 이고, 그 폭에서 이름 칸에
   120 을 떼어 주면 홈·원정 칸이 **33px** 로 남습니다 — 실측입니다. 배당조차
   `2.09` 가 `2.0` 으로 잘렸고 팀 이름은 13px, 곧 없는 것과 같았습니다.

   (화면 뿌리의 상자를 물린 뒤로 그 패널은 390 이 아니라 410px 입니다.
   셈은 그대로 답이 같습니다 — 120 을 떼면 한 칸이 71px 이고, 거기에
   「안산 그리너스 FC」가 들어가지 않습니다.)

   390px 짜리 보드를 위한 답은 원본 자신이 이미 갖고 있습니다:
   `international-m.ejs` 는 이름을 줄 위 머리글로 올리고 칸 안에서는 이름과
   배당을 세로로 쌓습니다(international-m.css:62·65). 여기서 쓰는 것이 그
   배치입니다. 줄의 구성 — 마켓 이름 · 홈 · 가운데 · 원정 · +N — 은 그대로고,
   흐르는 방향만 칸의 실제 폭을 따릅니다.
*/
.hera-screen .mode-international .market-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.hera-screen .mode-international .market-row .market-name {
    width: auto;
    padding-right: 0;
    margin-bottom: 5px;
}

.hera-screen .mode-international .option.home,
.hera-screen .mode-international .option.away {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
}

/* 원정 칸은 배당이 먼저 오도록 쓰여 있습니다(원본의 좌우 대칭). 세로로 쌓을
   때는 그 순서를 뒤집어야 두 팀의 이름이 같은 높이에 섭니다. */
.hera-screen .mode-international .option.away {
    flex-direction: column-reverse;
}

.hera-screen .mode-international .option .name {
    font-size: 11px;
    max-width: 100%;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-align: center;
}

.hera-screen .option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    padding: 10px;
    background-color: var(--hs-bg-dark);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 42px;
    min-width: 0;
    color: var(--hs-text);
}

.hera-screen .option:hover {
    background-color: var(--hs-bg-card-header);
}

.hera-screen .option.picked {
    background-color: var(--hs-picked-bg);
    color: var(--hs-picked-text);
}

.hera-screen .option.picked .odds,
.hera-screen .option.picked .name,
.hera-screen .option.picked .odds-arrow {
    color: var(--hs-picked-text);
}

.hera-screen .option .name {
    font-size: 13px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hera-screen .option .odds {
    font-size: 13px;
    font-weight: 600;
    color: var(--hs-blue);
}

.hera-screen .option.draw {
    justify-content: center;
    gap: 5px;
}

.hera-screen .option.draw.disabled {
    background-color: transparent;
    cursor: default;
}

.hera-screen .option.draw.disabled .name {
    opacity: 0.7;
    color: #fff;
}

/*
   막힌 배당. 원본은 이런 칸을 그냥 회색으로 두고 아무 말도 하지 않았고,
   그래서 「선택하면 그냥 무반응」 이 됩니다. 사라지게 하지 않는 것은 원본을
   따르되, 꺼져 있다는 것이 보이도록 자물쇠와 점선을 두르고 커서를 바꿉니다.
   눌렀을 때의 문장은 모델이 말합니다 — 위의 `.board-refusal`.
   `.draw.disabled` 는 무승부가 아예 없는 자리(빈 칸)이므로 제외합니다.
*/
.hera-screen .option[aria-disabled="true"]:not(.draw),
.hera-screen .option-item[aria-disabled="true"] {
    background-color: transparent;
    border: 1px dashed var(--hs-border);
    color: var(--hs-text-2);
    cursor: not-allowed;
}

.hera-screen .option[aria-disabled="true"]:not(.draw):hover,
.hera-screen .option-item[aria-disabled="true"]:hover {
    background-color: transparent;
}

.hera-screen .option[aria-disabled="true"] .odds,
.hera-screen .option[aria-disabled="true"] .name,
.hera-screen .option-item[aria-disabled="true"] .odds,
.hera-screen .option-item[aria-disabled="true"] .name {
    color: var(--hs-text-2);
}

.hera-screen .option-lock {
    flex-shrink: 0;
    color: var(--hs-text-2);
}

.hera-screen .odds-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/*
   국내형 한 줄에서 **자물쇠가 배당의 자리를 뺏지 않게**.

   원본의 칸은 `justify-content: space-between` 에 내용이 둘입니다 — 홈은
   이름·배당, 원정은 배당·이름(좌우 대칭, internal.ejs:151·172). 그 둘은
   양 끝으로 갈라서고, 그래서 배당은 언제나 줄의 가운데 쪽 끝에 붙습니다.
   자물쇠는 우리가 더한 것이고(원본은 막힌 칸을 회색으로만 두었습니다),
   그것이 **세 번째** 항목이 되는 순간 `space-between` 은 「양 끝」이 아니라
   「셋을 고르게」가 됩니다. 1280 에서 잰 대가:

     원정 화살표   살아있는 줄 41.28  →  잠긴 줄 140.32   (+99px)
     홈 이름       살아있는 줄  10.0  →  잠긴 줄 109.8    (+100px)

   자동 여백으로 남는 자리가 갈 곳을 못 박으면 셋이든 둘이든 결과가 같습니다.
   자물쇠는 이름 쪽에 붙는 표지이므로 원정에서는 이름을 따라 바깥쪽 끝으로
   보냅니다(`order`) — 홈이 「자물쇠·이름 … 배당」이면 원정은 「배당 …
   이름·자물쇠」라야 원본의 좌우 대칭이 그대로 섭니다.
*/
.hera-screen .mode-internal .option.home .odds-wrapper {
    margin-left: auto;
}

.hera-screen .mode-internal .option.away .odds-wrapper {
    margin-right: auto;
}

.hera-screen .mode-internal .option.away .option-lock {
    order: 1;
}

/*
   테두리도 잠긴 줄에서만 생기면 안 됩니다. 막힌 칸에 두른 점선은 우리가 더한
   것이고(위 `[aria-disabled]`), 원본의 `.option` 에는 테두리가 아예 없어서
   잠긴 칸만 안쪽이 1px 씩 좁아집니다 — 위의 자리잡기를 하고 나면 남는 어긋남이
   딱 그 1px 이었습니다(1280 실측 52 → 53). 상세의 `.option-item` 은 원본이
   이미 `border: 1px solid transparent` 로 자리를 비워 두고 있어
   (internationals.css:106) 이 어긋남이 없습니다. 같은 답을 국내형 칸에도.
*/
.hera-screen .mode-internal .option {
    border: 1px solid transparent;
}

/*
   그리고 국내형의 배당도 상세와 같은 폭의 칸입니다. 화살표가 이 상자에
   맞닿아 서므로(`.odds-wrapper` 는 배당과 화살표를 8px 로 묶습니다), 상자가
   글자 폭이면 화살표가 숫자를 따라 흔들립니다 — 1280 에서 5.73px.
   홈은 오른끝맞춤, 원정은 왼끝맞춤: 두 배당이 줄의 가운데를 사이에 두고
   서로를 마주 보는 원본의 대칭이 숫자 단위까지 유지됩니다.
*/
.hera-screen .odds-wrapper .odds {
    min-width: 34px;
    text-align: right;
}

.hera-screen .option.away .odds-wrapper .odds {
    text-align: left;
}

/* 표는 줄지 않습니다. 꽉 찬 줄에서 이것이 줄어들 수 있으면 화살표의 크기까지
   줄마다 달라집니다 — 390 해외형 상세에서 15.70 ~ 16.00px 로 재였습니다. */
.hera-screen .odds-arrow {
    flex-shrink: 0;
}

.hera-screen .odds-arrow.up {
    color: var(--hs-up);
}

.hera-screen .odds-arrow.down {
    color: var(--hs-down);
}

/* 해외형: 대표 마켓 한 줄의 마지막 칸 — internationals.css:87. 격자가 폭을
   주므로 배지는 그 칸을 채우기만 합니다. */
.hera-screen .market-count-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #374151;
    color: var(--hs-text);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 4px;
    border: none;
    border-radius: 6px;
    flex-shrink: 0;
    cursor: pointer;
    font-family: inherit;
}

.hera-screen .market-count-badge:hover {
    background-color: var(--hs-blue);
    color: var(--hs-bg-dark);
}

/* ---- 6. 라이브 목록 — live.css:47 -------------------------------------- */

.hera-screen .live-match-item .item {
    padding: 12px;
    border-bottom: 1px solid var(--hs-border);
    cursor: pointer;
}

.hera-screen .live-match-item .item:hover,
.hera-screen .live-match-item .item.selected {
    background-color: var(--hs-bg-card-header);
}

.hera-screen .live-match-item .item.selected {
    box-shadow: inset 3px 0 0 var(--hs-blue);
}

.hera-screen .live-match-item .league-name {
    font-size: 12px;
    color: var(--hs-text-2);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.hera-screen .live-match-item .nation-flag {
    height: 14px;
}

.hera-screen .live-match-item .team-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 2px;
}

.hera-screen .live-match-item .team-name {
    font-weight: 500;
    font-size: 14px;
    min-width: 0;
    word-break: keep-all;
}

.hera-screen .live-match-item .score {
    font-weight: 700;
    font-size: 14px;
    color: var(--hs-blue);
    flex-shrink: 0;
}

.hera-screen .live-match-item .time-and-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--hs-text-2);
    margin-top: 8px;
}

/* live.css:56. 카드에서 유일하게 붉은 것 — 지금 뛰고 있다는 표. */
.hera-screen .live-match-item .live-tag {
    color: var(--hs-live-red);
    font-weight: 700;
}

/* ---- 7. 가운데 상세 패널 ------------------------------------------------ */

.hera-screen .panel-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100%;
    min-height: 500px;
    color: var(--hs-text-2);
    background-color: var(--hs-bg-card);
    border-radius: 12px;
    border: 1px solid var(--hs-border);
}

.hera-screen .detail-content {
    background-color: var(--hs-bg-card);
    border-radius: 12px;
    border: 1px solid var(--hs-border);
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
}

/* internationals.css:95 · live.css:62 — 상세는 제 칸을 다 씁니다. 칸이 위에서
   늘어났으므로 여기서 100% 를 받아야 아랫변이 목록과 맞습니다. */
.hera-screen .center-panel .detail-content {
    height: 100%;
}

.hera-screen .selected-match-header {
    padding: 15px;
    border-bottom: 1px solid var(--hs-border);
    text-align: center;
    background-color: var(--hs-bg-card-header);
    border-radius: 12px 12px 0 0;
    position: relative;
    flex-shrink: 0;
}

/* 닫기 ✕ 와 돌아가기 ← 는 둘 다 절대 위치라 자리를 차지하지 않습니다. 긴
   팀 이름 두 개가 들어오면 그 아래로 파고들어 단추가 글자에 덮였습니다. */
.hera-screen .selected-match-header .teams {
    font-size: 16px;
    font-weight: 600;
    padding: 0 44px;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.hera-screen .selected-match-header .teams .vs {
    font-size: 13px;
    color: var(--hs-text-2);
    margin: 0 10px;
}

.hera-screen .selected-match-header .time {
    font-size: 12px;
    color: var(--hs-text-2);
    margin-top: 5px;
}

.hera-screen .selected-match-header .close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background-color: transparent;
    color: var(--hs-blue);
    border: none;
    padding: 0;
    line-height: 1;
}

.hera-screen .selected-match-header .close-btn:hover {
    color: #fff;
}

/*
   모바일에서는 상세가 목록을 대신하므로(원본 `-m` 템플릿과 같은 자리바꿈),
   ✕ 가 아니라 왼쪽 화살표라야 「목록으로 돌아간다」로 읽힙니다.
   live-m.css:69 의 `.btn.btn-back` 자리입니다.
*/
.hera-screen .selected-match-header .btn-back {
    position: absolute;
    top: 50%;
    left: 6px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    padding: 0;
    color: var(--hs-text-2);
    cursor: pointer;
}

.hera-screen .selected-match-header .btn-back:hover {
    color: #fff;
}

.hera-screen .detail-panel-mobile {
    padding: 10px;
    /* 위 `.center-panel` 과 같은 이유 — 폰에서는 이 칸이 목록을 대신하고,
       문서가 짧아지면서 브라우저가 스크롤을 새 바닥으로 잘라 붙입니다. */
    scroll-margin-top: 80px;
}

.hera-screen .detail-panel-mobile .detail-content {
    max-height: none;
}

/* live.css:63 — 제 테두리를 두른 전광판. 머리글과 시장 목록 사이에 놓이고,
   목록이 스크롤해도 줄어들지 않습니다. */
.hera-screen .live-match-display {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid var(--hs-border);
    flex-shrink: 0;
}

.hera-screen .live-match-display .header {
    color: var(--hs-text-2);
    font-size: 13px;
    margin-bottom: 15px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.hera-screen .live-match-display .body {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.hera-screen .live-match-display .team-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

/* `keep-all` 하나만 두면 「웨스트브로미치」 같은 한 어절이 끊기지 못해 칸을
   넘어 카드 밖으로 흘러 나갑니다 — 1280·390 양쪽에서 실측. 어절을 지키되
   정 넘칠 때는 끊도록 둘을 함께 씁니다. */
.hera-screen .live-match-display .team-name {
    font-size: 18px;
    font-weight: 600;
    flex: 1;
    min-width: 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.hera-screen .live-match-display .team-name.home {
    text-align: right;
}

.hera-screen .live-match-display .team-name.away {
    text-align: left;
}

.hera-screen .live-match-display .score {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.hera-screen .live-match-display .vs {
    font-size: 24px;
    color: var(--hs-text-2);
}

.hera-screen .market-list-detail {
    overflow-y: auto;
    flex-grow: 1;
    padding: 15px;
}

.hera-screen .market-group {
    margin-bottom: 15px;
}

.hera-screen .market-group .market-name {
    font-size: 12px;
    color: var(--hs-text-2);
    margin-bottom: 6px;
}

/* 라이브 상세는 한 경기의 시장이 길게 이어집니다. 원본은 그래서 시장 이름을
   작은 회색 딱지가 아니라 밑줄 그은 소제목으로 세웁니다 — live.css:74. */
.hera-screen .mode-live .market-group .market-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--hs-text);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--hs-border);
}

.hera-screen .bet-options-detail {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hera-screen .option-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.hera-screen .option-item {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background-color: var(--hs-bg-dark);
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    min-width: 0;
    color: var(--hs-text);
}

.hera-screen .option-item:hover {
    border-color: var(--hs-blue);
}

.hera-screen .option-item.disabled {
    cursor: default;
    opacity: 0.7;
}

.hera-screen .option-item.picked {
    background-color: var(--hs-picked-bg);
    color: var(--hs-picked-text);
}

/* 화살표까지 함께 뒤집는 것은 `internationals.css:108` 보다 한 걸음 더
   나간 것입니다. 골라 둔 칸은 시안(#00BFFF)이 되는데 언더의 파랑(#3B82F6)이
   그 위에서는 2:1 도 안 되게 묻힙니다. 원본도 국내형에서는 같은 답을 냈고
   (`internal.css:65`), 이 시트는 그것을 이미 옮겨 두었습니다(위
   `.option.picked .odds-arrow`). 방향은 모양이 말하고 이름에도 오버·언더가
   적혀 있으니, 두 보드를 같은 규칙으로 맞춥니다. */
.hera-screen .option-item.picked .odds,
.hera-screen .option-item.picked .name,
.hera-screen .option-item.picked .odds-arrow {
    color: var(--hs-picked-text);
}

/*
   화살표는 **배당의 것**입니다 — 이름의 것이 아닙니다.

   원본은 위 화살표에 `margin-left: auto`, 아래 화살표에 `margin-right: auto`
   를 줍니다(internationals.css:197 · live.css:135). 그러면 위 화살표는 배당
   옆에, 아래 화살표는 이름 옆에 섭니다. 같은 세 줄이 `internal.css:73` 에도
   글자까지 똑같이 있고 거기에는 상세가 쓰지도 않는 `.odds-wrapper` 규칙까지
   딸려 있으므로, 이 갈림은 결정이 아니라 **복사된 자국**입니다.

   그 자국을 그대로 옮긴 대가를 배포본에서 쟀습니다(1280·라이브 상세):
   아래 화살표는 이름에 매여 있으니 이름 앞의 자물쇠가 들어오는 순간 함께
   밀려, 살아 있는 줄 80.05 · 잠긴 줄 100.90 — 한 열 안에서 20.85px 이
   어긋났습니다. 위 화살표는 배당에 매여 있어 자물쇠에는 꿈쩍도 안 했습니다.
   한 줄의 두 화살표가 서로 다른 것에 매여 있었던 것이 「삐뚤빼뚤」입니다.

   둘 다 배당에 붙입니다. 배당은 아래에서 폭이 못 박힌 칸이 되므로, 화살표는
   줄이 잠겼든 이름이 길든 칸의 오른쪽 끝에서 언제나 같은 자리에 섭니다.
   화살표와 배당 사이는 `.option-item` 의 `gap` 이 내는 8px — 원본이 적어 둔
   값 그대로입니다(지금까지는 그 gap 에 여백 8px 이 더해져 16px 이었습니다).
*/
.hera-screen .option-item .odds-arrow {
    margin-left: auto;
}

/* 상세의 승무패 칸은 좁아서, 기본 줄바꿈 규칙이면 「무승부」가 무·승·부 로
   한 글자씩 끊깁니다 — 390 에서 확인. 한국어는 어절 단위로만 끊습니다.
   긴 팀 이름이 들어오면 이름이 배당을 밀어내 `2.05` 가 `2.0` 으로 잘렸으므로
   (라이브 상세, 1280·390), 이름은 줄어들 수 있게 두고 배당은 못 줄이게 합니다. */
.hera-screen .option-item .name {
    font-size: 13px;
    font-weight: 500;
    min-width: 0;
    word-break: keep-all;
    overflow-wrap: anywhere;
}

/*
   배당은 낱말이 아니라 **칸**입니다.

   원본은 상세의 배당에 `width: 20px` 을 못 박았습니다(internationals.css:110
   · live.css:82). 20px 은 우리 숫자가 들어갈 폭이 아니라 옮기지 않았는데,
   대신 아무것도 두지 않아 배당 상자가 글자 폭 그대로가 됐습니다. Poppins 의
   숫자는 폭이 제각각이라(실측: `1.67` 21.84px · `2.04` 26.47px · `12.00`
   31.80px) 그 앞에 서는 화살표가 배당의 글자 폭만큼 흔들렸습니다 — 1280
   라이브 상세에서 8.53px, 해외형에서 3.08px.

   못 박되 숫자가 들어갈 만큼: 34px 은 배포본에서 잰 가장 넓은 배당(31.80px)
   보다 넓습니다. `min-width` 인 것은 여섯 자리 배당이 들어오면 잘리는 대신
   칸을 넓히라는 뜻이고, 그때는 그 줄의 화살표만 그만큼 왼쪽에 섭니다.
   오른끝맞춤이라 숫자 자체는 칸의 오른쪽 여백에 붙은 채입니다.

   **화살표가 선 줄에만** 겁니다. 칸을 넓히는 만큼 이름이 좁아지는데, 승무패
   처럼 한 줄에 셋이 서는 시장에는 화살표가 없어 넓힐 이유가 없고 자리도
   없습니다 — 390 에서 그 칸은 안폭이 75px 뿐이라 8px 을 떼면 「India U20」이
   한 글자씩 끊겼습니다(실측). 화살표는 배당 앞에 서므로 형제 선택자가 그
   조건을 그대로 씁니다.

   **남는 자리는 배당 앞입니다** — 화살표가 없는 줄에서도.

   위 화살표 규칙은 이 칸의 자리잡기를 화살표가 선 줄에서만 고쳤습니다. 기계는
   같습니다: 원본의 칸은 내용이 둘(이름·배당)이라 `space-between` 이 「양 끝」
   이고, 우리가 이름 앞에 더한 자물쇠가 셋째가 되는 순간 그것이 「셋을 고르게」
   가 됩니다. 화살표가 있는 줄은 화살표가 남는 자리를 흡수해 넘어갔지만,
   승무패·핸디캡처럼 화살표가 없는 시장에는 흡수할 것이 없어 이름이 그대로
   가운데로 떠올랐습니다. 배포본 실측(해외형 상세, 이름의 왼쪽 오프셋):

        1280   살아있는 줄 0   ·   잠긴 줄 20 ~ 41.50
         390   살아있는 줄 0   ·   잠긴 줄 20 ~ 24.45

   자물쇠가 차지하는 자리는 20px(12px + gap 8px)이므로 20 은 제자리이고, 그
   위로 뜬 만큼이 결함입니다 — 최대 21.50px. 한 핸디캡 시장에서 살아 있는 열두
   줄이 0 에 서는 동안 잠긴 두 줄만 41 에 서 있었습니다. 뜨는 양이 줄마다 다른
   것은 그것이 **남는 자리의 절반**이기 때문이고, 그래서 같은 열의 이름들이
   서로 어긋납니다.

   자동 여백은 남는 자리를 `justify-content` 보다 **먼저** 다 가져갑니다.
   그래서 항목이 둘이든 셋이든 자물쇠·이름은 왼끝에 붙고 배당은 오른끝에
   섭니다. 꽉 찬 줄에서는 남는 자리가 0 이라 아무것도 움직이지 않습니다.
*/
.hera-screen .option-item .odds {
    font-size: 13px;
    font-weight: 600;
    color: var(--hs-blue);
    flex-shrink: 0;
    margin-left: auto;
}

/* 화살표가 선 줄은 화살표가 이미 그 자리를 잡고 있습니다(위
   `.option-item .odds-arrow`). 여기서 한 번 더 가져가면 둘이 나눠 갖고
   화살표와 배당 사이가 벌어지므로 되돌립니다. */
.hera-screen .option-item .odds-arrow ~ .odds {
    margin-left: 0;
    min-width: 34px;
    text-align: right;
}

/* ---- 8. 빈 목록 · 페이지네이션 ------------------------------------------ */

.hera-screen .no-list-box {
    text-align: center;
    padding: 40px 20px;
    color: var(--hs-text-2);
}

/* 원본은 여기에 `margin-left: 125px` 을 두어(internal.css:169) 쪽번호가
   가운데가 아니라 오른쪽으로 밀려 있습니다 — 카트 폭을 눈대중으로 상쇄한
   자리이고, 해외형·라이브 시트에는 그 값이 없습니다. 따라가지 않고 가운데에
   둡니다. 위아래 20px 은 원본 그대로. */
.hera-screen .listpagenation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin: 20px 0;
}

.hera-screen .listpagenation .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    /* 원본이 못 박은 36 은 줄어들면 안 되는 값입니다 — 390 에서 flex 가
       한 칸을 34.9 로 깎고 있었습니다. */
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background-color: var(--hs-bg-card);
    border: 1px solid var(--hs-border);
    color: var(--hs-text-2);
    cursor: pointer;
    font: inherit;
}

.hera-screen .listpagenation .btn_page.active {
    background-color: var(--hs-blue);
    color: var(--hs-bg-dark);
    font-weight: 700;
    border-color: var(--hs-blue);
}

/* ---- 9. 배팅카트 — internal.css:78 -------------------------------------- */

.hera-screen .bet-slip-panel {
    background-color: var(--hs-bg-card);
    border-radius: 12px;
    border: 1px solid var(--hs-border);
    position: sticky;
    top: 20px;
}

.hera-screen .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--hs-bg-card-header);
    border-radius: 12px 12px 0 0;
}

.hera-screen .panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--hs-text);
}

.hera-screen .header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hera-screen .panel-header .folder-count {
    background-color: var(--hs-blue);
    color: var(--hs-bg-dark);
    font-weight: bold;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.hera-screen .btn-icon-delete {
    background-color: transparent;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 0;
    color: var(--hs-blue);
    transition: color 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
}

.hera-screen .btn-icon-delete:hover {
    color: #fff;
}

.hera-screen .panel-body {
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.hera-screen .cart-list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hera-screen .cart-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    background-color: var(--hs-bg-dark);
    padding: 8px;
    border-radius: 6px;
}

.hera-screen .cart-item.suspended {
    opacity: 0.55;
}

.hera-screen .item-info {
    font-size: 12px;
    overflow: hidden;
}

.hera-screen .item-info span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hera-screen .item-info .match-name {
    display: block;
    color: var(--hs-text-2);
}

.hera-screen .item-info .market-name {
    display: block;
    font-weight: 500;
}

.hera-screen .item-info .picked-value {
    color: var(--hs-blue);
}

.hera-screen .item-odds {
    font-weight: 600;
}

.hera-screen .item-odds s {
    color: var(--hs-text-2);
    font-weight: 400;
}

.hera-screen .item-odds .odds-moved-up {
    color: #5ac37d;
}

.hera-screen .item-odds .odds-moved-down {
    color: #d9646e;
}

.hera-screen .item-odds .odds-suspended {
    color: var(--hs-text-2);
    font-weight: 400;
    font-size: 11px;
}

.hera-screen .cart-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--hs-text-2);
}

.hera-screen .cart-empty svg {
    display: block;
    margin: 0 auto 10px;
}

.hera-screen .panel-footer {
    padding: 20px;
    background-color: var(--hs-bg-card-header);
    border-top: 1px solid var(--hs-border);
    border-radius: 0 0 12px 12px;
}

.hera-screen .info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
}

.hera-screen .info-row label {
    color: var(--hs-text-2);
}

.hera-screen .info-row .money {
    font-weight: 600;
}

.hera-screen .money-input-group {
    display: flex;
    align-items: center;
    background-color: var(--hs-bg-dark);
    border: 1px solid var(--hs-border);
    border-radius: 8px;
    padding-left: 10px;
    margin-bottom: 10px;
}

.hera-screen .money-input-group:focus-within {
    border-color: var(--hs-blue);
}

.hera-screen .money-input-group label {
    color: var(--hs-text-2);
    padding-right: 10px;
    white-space: nowrap;
}

.hera-screen .money-input-group input {
    flex-grow: 1;
    min-width: 0;
    text-align: right;
    background: none;
    border: none;
    outline: none;
    color: var(--hs-text);
    font-size: 16px;
    font-family: inherit;
    padding: 8px 0;
}

.hera-screen .money-input-group input:disabled {
    color: var(--hs-text-2);
    cursor: not-allowed;
    opacity: 1;
}

.hera-screen .money-input-group .btn-clear {
    background: none;
    border: none;
    color: var(--hs-text-2);
    cursor: pointer;
    font-size: 16px;
    padding: 0 10px;
}

.hera-screen .money-input-group .btn-clear:disabled {
    color: var(--hs-border);
    cursor: not-allowed;
    opacity: 1;
}

.hera-screen .money-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
    margin-bottom: 15px;
}

.hera-screen .money-buttons button {
    padding: 8px;
    background-color: var(--hs-bg-dark);
    border-radius: 6px;
    color: var(--hs-text);
    cursor: pointer;
    border: 1px solid transparent;
    font: inherit;
    font-size: 13px;
}

.hera-screen .money-buttons button:not(:disabled):hover {
    border-color: var(--hs-blue);
}

.hera-screen .money-buttons button.secondary {
    background-color: var(--hs-bg-main);
}

.hera-screen .money-buttons button:disabled {
    background-color: transparent;
    border-color: var(--hs-border);
    color: var(--hs-text-2);
    cursor: not-allowed;
    opacity: 1;
}

.hera-screen .stake-hint {
    margin: 0 0 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--hs-text-2);
}

.hera-screen .summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 10px;
    font-weight: 600;
}

.hera-screen .summary-row label {
    color: var(--hs-text-2);
    font-weight: 500;
}

/* 규칙이 말해야 하는 것들 — 배당 변경 · 대기 · 접수 · 취소 · 사전검사. */
.hera-screen .cart-alert {
    display: block;
    padding: 8px 10px;
    border: 1px solid var(--hs-border);
    border-radius: 6px;
    background-color: var(--hs-bg-dark);
    color: var(--hs-text);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 8px;
}

.hera-screen .cart-alert p {
    margin: 0;
}

.hera-screen .cart-alert-price {
    border-color: #8a5a1f;
    background-color: #2b1f10;
}

.hera-screen .cart-alert-hold {
    border-color: #2a5a80;
    background-color: #0f2436;
}

.hera-screen .cart-alert-placed {
    border-color: #2f6b3f;
    background-color: #102a18;
}

.hera-screen .cart-alert-bonus {
    border-color: var(--hs-blue);
    color: var(--hs-blue);
}

.hera-screen .cart-alert-hint {
    border-color: #6b3a42;
    color: #d98b93;
}

.hera-screen .cart-alert-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.hera-screen .cart-alert button,
.hera-screen .cart-alert-hold button {
    border: 1px solid var(--hs-border);
    background-color: var(--hs-bg-card);
    color: var(--hs-text);
    cursor: pointer;
    font-size: 11px;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    font-family: inherit;
}

.hera-screen .footer-actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 15px;
}

.hera-screen .btn-submit {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: bold;
    background-color: var(--hs-blue);
    color: var(--hs-bg-dark);
    border-radius: 8px;
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.hera-screen .btn-submit:disabled {
    background-color: var(--hs-bg-main);
    color: var(--hs-text-2);
    cursor: not-allowed;
    opacity: 1;
}

/* ---- 10. 폰의 카트 — internal-m.ejs 의 FAB · 패널 · 오버레이 ------------- */

.hera-screen .bet-slip-mobile-fab {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: var(--z-cart-bar, 40);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px;
    border: none;
    border-radius: 999px;
    background-color: var(--hs-blue);
    color: var(--hs-bg-dark);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    font: inherit;
    font-weight: 700;
}

/*
   Out of the way while the sheet is up. The export buries its FAB under the
   open panel by z-order (998 under 1000, internal-m.css:76/80); here the
   platform's tokens run the other way (--z-cart-bar 1260 over
   --z-bet-slip-panel 1240), so the button was floating on top of the sheet's
   footer, half-covering BET — measured at 390. The sheet's own X and the
   overlay are the close controls, exactly as the export had it.
*/
.hera-screen .bet-slip-mobile-fab[aria-expanded="true"] {
    display: none;
}

.hera-screen .bet-slip-mobile-fab .folder-count {
    background-color: var(--hs-bg-dark);
    color: var(--hs-blue);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.hera-screen .bet-slip-panel-mobile {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-bet-slip-panel, 50);
    background-color: var(--hs-bg-card);
    border-top: 1px solid var(--hs-border);
    /* internal-m.css:80 — 시트의 어깨는 16px 입니다(카드의 12px 이 아니라). */
    border-radius: 16px 16px 0 0;
    max-height: calc(100dvh - 60px);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateY(105%);
    transition: transform 0.25s ease;
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.55);
}

.hera-screen .bet-slip-panel-mobile.open {
    transform: none;
}

.hera-screen .bet-slip-panel-mobile .panel-body {
    max-height: 30dvh;
}

/*
   원본은 스크림 999, 시트 1000 — 스크림이 시트 *아래* 입니다
   (internal-m.css:86/88). 여기서는 스크림이 `--z-cart-bar`(1260)를 쓰고
   시트가 `--z-bet-slip-panel`(1240)을 써서 순서가 뒤집혀 있었고, 그래서
   카트를 열면 카트까지 함께 어두워졌습니다 — 390 에서 확인한 그대로입니다.
   토큰 값이 앞으로 어떻게 바뀌든 스크림이 시트를 넘지 못하도록 시트의
   토큰에서 한 단 빼서 계산합니다.
*/
.hera-screen .overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-bet-slip-panel, 50) - 1);
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.hera-screen .overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* ---- 11. 반응형 --------------------------------------------------------
   The export removed columns at its cuts (internal.css:159 hides the cart
   below 1200, internationals.css:151 below 1300 and the detail below 900);
   ours stack at the site's 900 and tighten at 767 instead, so nothing a
   player can act on disappears. */

@media (max-width: 900px) {
    .hera-screen .sports-main-content.mode-internal,
    .hera-screen .sports-main-content.mode-international,
    .hera-screen .sports-main-content.mode-live {
        grid-template-columns: 1fr;
    }

    .hera-screen .left-panel {
        max-height: none;
    }

    .hera-screen .left-panel .match-list-area {
        overflow-y: visible;
    }

    .hera-screen .center-panel {
        max-height: none;
    }

    .hera-screen .detail-content {
        max-height: none;
    }

    .hera-screen .panel-placeholder {
        min-height: 160px;
    }
}

@media (max-width: 767px) {
    /* internal-m.css:26 · international-m.css:26 · live-m.css:26 —
       sports_wrap_new_mobile 이 `padding: 10px; padding-bottom: 80px`.
       80 은 원본이 뜬 카트 단추 자리로 비워 둔 것입니다. */
    .hera-screen.hera-sports .sports-wrap {
        margin: 0 auto;
        padding: 10px 10px 80px;
    }

    /* 폰의 종목 줄은 세 원본 시트가 한 글자도 다르지 않게 적어 두었습니다
       (internal-m.css:29-37 = international-m = live-m): 한 줄로 가로
       스크롤, 12px 둥근 카드, 아래 15px, 아이콘 24, 이름 11px, 사이 4px.
       우리는 데스크톱 값(28 · 12px · 5px · 20px)을 그대로 쓰고 있었고,
       해외형·라이브에서는 패널 안에 갇힌 채 두 줄(134px)로 접혀 있었습니다 —
       390 실측. */
    .hera-screen .sports-category-tabs {
        margin-bottom: 15px;
    }

    .hera-screen .tab-item {
        min-width: 70px;
        padding: 8px;
        gap: 4px;
    }

    .hera-screen .tab-item img {
        width: 24px;
        height: 24px;
    }

    .hera-screen .tab-item span {
        font-size: 11px;
    }

    /*
       폰에서는 왼쪽 패널이 카드이기를 그만둡니다. 원본의 폰 템플릿에는
       `.left-panel` 이 없고, 종목 줄과 목록이 각각 제 카드로 서로 떨어져
       섭니다(international-m.css:30·50 · live-m.css:30·51). 우리 마크업은
       셋을 한 패널에 담으므로, 폰에서만 그 패널의 테두리를 걷고 안의 둘에게
       카드를 돌려줍니다 — 그래야 탭 줄이 다시 한 줄로 스크롤합니다.
    */
    .hera-screen .left-panel {
        background-color: transparent;
        border: none;
        border-radius: 0;
    }

    .hera-screen .left-panel .sports-category-tabs {
        flex-wrap: nowrap;
        border-radius: 12px;
        border-bottom: none;
        margin-bottom: 15px;
    }

    .hera-screen .left-panel .match-list-area {
        background-color: var(--hs-bg-card);
        border: 1px solid var(--hs-border);
        border-radius: 12px;
    }

    .hera-screen .left-panel .detail-panel-mobile {
        padding: 0;
    }

    /* 폰에서는 국내형도 좁은 쪽 값을 씁니다 — internal-m.css:53-55 가
       international-m.css:54-55 와 한 글자도 다르지 않습니다. 390 에서 20px
       국기와 16px 리그 이름은 머리글 한 줄을 51px 까지 밀어 올렸습니다. */
    .hera-screen .league-info {
        gap: 8px;
    }

    .hera-screen .league-info .sport-icon,
    .hera-screen .league-info .nation-flag {
        height: 18px;
    }

    .hera-screen .league-info .league-name {
        font-size: 14px;
    }

    /* international-m.css:59 · internal-m.css:58 — 폰의 리그 몸통은 10px. */
    .hera-screen .league-body {
        padding: 0 10px 10px;
    }

    /* internal-m.css:61 — 시각·팀 줄은 한 단 작게. */
    .hera-screen .match-header {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .hera-screen .market-row {
        flex-direction: column;
        align-items: stretch;
    }

    .hera-screen .market-row .market-name {
        width: auto;
        text-align: left;
        margin-bottom: 5px;
    }

    /*
       한 줄에 이름과 배당을 나란히 두면 390 에서는 이름이 21px 까지 줄어
       사실상 사라집니다 — 지난 묶음에서 배당만 지켜 준 결과입니다. 원본의
       모바일 시트는 애초에 세로로 쌓습니다(international-m.css:65 —
       `flex-direction: column`, 이름 11px, 최소 높이 48px). 같은 답을 씁니다:
       이름이 위, 배당이 아래, 둘 다 온전하게.
    */
    .hera-screen .option {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2px;
        min-height: 48px;
        padding: 6px 4px;
    }

    /* `overflow-wrap: anywhere` 만 두면 좁은 칸에서 한국어가 한 글자씩
       끊깁니다. `keep-all` 로 어절을 지키고, 넘칠 때만 마지막 수단으로
       끊도록 둘을 함께 씁니다. */
    .hera-screen .option .name {
        font-size: 11px;
        max-width: 100%;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
        text-align: center;
    }

    .hera-screen .option .odds,
    .hera-screen .odds-wrapper {
        flex-shrink: 0;
        font-size: 13px;
    }

    /*
       상세 칸의 좌우 여백은 폰에서 5px — live-m.css:82 의 값입니다.

       390 에서 이 칸은 165px(승무패처럼 셋이 서면 105px)이고, 14px 씩 물면
       안폭이 135px 밖에 남지 않아 **원래도 모자랐습니다**: 배포본에서 표가
       16px 을 못 채우고 15.70px 로 찌그러졌고 이름 둘이 두 줄로 접혀
       있었습니다. 배당을 34px 짜리 칸으로 못 박으면 그 부족분이 7px 늘어
       접히는 이름이 둘에서 여덟으로 갑니다.

       원본은 이 폭에서 같은 답을 이미 냈습니다. 해외형의 폰 시트만 14px 을
       유지하는데(international-m.css:78), 두 보드의 상세는 같은 폭에서 같은
       줄을 그리므로 좁은 쪽(live-m)을 따릅니다. 18px 이 돌아와 이름이
       135 → 153px 을 나눠 갖고, 접히는 이름은 여덟도 둘도 아닌 0 이 됩니다.
    */
    .hera-screen .option-item {
        padding: 10px 5px;
    }

    /*
       위의 자물쇠·배당 자리잡기는 칸이 **가로 줄**일 때의 것입니다. 여기서는
       칸이 세로로 쌓이므로 자동 여백은 남는 자리가 아니라 교차축을 먹어
       가운데 정렬을 깨고, `order` 는 자물쇠를 옆이 아니라 발치로 보냅니다.
       폰에서는 자물쇠가 이름·배당 위에 따로 서므로 애초에 뺏을 자리가 없어,
       데스크톱 줄에서만 쓰는 값들을 여기서 되돌립니다.
    */
    .hera-screen .mode-internal .option.home .odds-wrapper,
    .hera-screen .mode-internal .option.away .odds-wrapper {
        margin: 0;
    }

    .hera-screen .mode-internal .option.away .option-lock {
        order: 0;
    }

    .hera-screen .option.draw {
        min-width: 50px;
    }

    /*
       이름이 두 줄로 접히면 홈·무·원정의 높이가 어긋납니다.

       그리고 가운데 칸은 내용만큼만. 데스크톱의 120px 은 「무승부」라는
       낱말이 들어가라고 떼어 둔 자리인데(5절), 390 에서는 한 줄이 314px 뿐이라
       그 120 을 빼고 나면 홈·원정이 **92px** 씩밖에 남지 않았습니다 — 실측.
       원본의 폰 시트는 애초에 `1fr auto 1fr` 입니다(internal-m.css:65).
       같은 값을 쓰면 홈·원정이 127px 로 돌아옵니다.
    */
        .hera-screen .bet-options {
            align-items: stretch;
            grid-template-columns: 1fr auto 1fr;
        }

    /* 폰에서는 가운데와 +N 이 내용만큼만 차지합니다 —
       international-m.css:64 가 `1fr auto 1fr`, 배지는 그 오른쪽. */
    .hera-screen .mode-international .bet-options {
        grid-template-columns: 1fr auto 1fr auto;
    }

    /* live-m.css:71 — 전광판이 좁아집니다. 팀 이름이 두 팀 다 길면 두 줄로
       접히게 두고, 표식과 점수는 줄지 않습니다. */
    .hera-screen .live-match-display {
        padding: 15px 10px;
    }

    .hera-screen .live-match-display .body {
        gap: 8px;
    }

    .hera-screen .live-match-display .team-icon {
        width: 32px;
        height: 32px;
    }

    .hera-screen .live-match-display .team-name {
        font-size: 14px;
    }

    .hera-screen .live-match-display .score {
        font-size: 22px;
    }

    .hera-screen .live-match-display .vs {
        font-size: 18px;
    }

    /*
       `+3` 은 눌리고 있었습니다 — 상세가 화면 7,800px 아래에 그려져서
       무반응으로 보였을 뿐입니다. 상세가 목록을 대신하도록 바꾼 뒤로는
       제자리에 뜨므로, 여기서는 손가락이 닿을 넓이만 보장합니다.
    */
    .hera-screen .market-count-badge {
        min-width: 44px;
        min-height: 44px;
        margin-left: 6px;
    }

    /* 폰의 카트 발치는 데스크톱보다 한 단씩 좁습니다 — internal-m.css:104 ·
       107 · 109 (= international-m · live-m). 화면이 낮으니 줄 사이를 줄여
       배팅하기 단추가 접히는 선 위에 남게 하는 값입니다. */
    .hera-screen .money-buttons {
        margin-bottom: 10px;
    }

    .hera-screen .summary-row {
        margin-bottom: 5px;
    }

    /* 원본은 여기 윗여백이 아예 없습니다. 우리 카트는 이 위에 배당 변경 ·
       대기 같은 알림 상자가 설 수 있어서 10px 만 남깁니다. */
    .hera-screen .footer-actions {
        gap: 5px;
        margin-top: 10px;
    }
}