/* =====================================================================
 * WHALEY — 회원앱 디자인 시스템
 *
 * 색은 네온그린 계열 한 축으로만 간다. 강조색이 둘 이상이면 화면에서
 * "지금 눌러야 하는 것" 이 어느 것인지 사라진다.
 * 위험(빨강)·주의(노랑)·정보(파랑)는 상태 표시에만 쓰고 버튼에는 쓰지 않는다.
 *
 * 보라 계열 다크 테마. 참고한 것은 roobet.com 이고 색·간격만 가져왔다
 * (게임 아트·로고 같은 자산은 쓰지 않는다).
 *
 * ⚠ 콘솔(exit-whaley-console)은 아직 초록(#00e676)이다. 같은 브랜드지만
 *   관리자 화면이라 함께 바꾸지 않았다 — 운영자가 익숙한 화면을 유지하는 편이 낫고,
 *   두 화면을 한 번에 갈면 어느 쪽 문제인지 가리기 어려워진다.
 * ===================================================================== */

:root {
    /* ── 바닥 ─────────────────────────────────────────────────────────
     * 네 단계로 갈린다. 카드가 배경보다 <b>밝아야</b> 떠 보이므로
     * 위로 갈수록 밝다. 단계를 줄이면 카드와 그 안의 인풋이 붙어 보인다. */
    /* ⚠ 루벳보다 <b>채도를 낮춰</b> 잡았다.
     *
     * 루벳의 카드는 #2C2852 로 꽤 진한 보라인데, 그 화면에서는 카드의 거의 전부를
     * 화려한 게임 아트가 덮고 있어 보라가 테두리로만 보인다.
     * 우리는 라이브 2,351건에 그림이 없어 그 색이 그대로 드러난다 —
     * 같은 값을 쓰면 화면이 통째로 보라 벽이 된다.
     *
     * 그래서 바탕은 남보라 쪽으로 눕히고, 색은 강조와 타일이 지게 했다. */
    --ex-bg:          #05080F;   /* 페이지 바닥. 가장 어둡다 */
    --ex-bg-2:        #0C1220;   /* 헤더 / 사이드바 */
    --ex-surface:     #0C1220;   /* 카드 — 가장 많이 쓰인다 */
    --ex-surface-2:   #162034;   /* 카드 헤더 / 인풋 */
    --ex-surface-3:   #22304B;   /* 호버 / 활성 */
    --ex-line:        rgba(255, 255, 255, .07);
    --ex-line-2:      rgba(255, 255, 255, .12);

    /* ── 보라 (브랜드 강조) ────────────────────────────────────────────
     * 버튼 · 활성 메뉴 · 선택 상태가 전부 이 색이다.
     * <b>돈이 늘었다는 뜻이 아니다</b> — 그건 아래 --ex-up 이다. */
    --ex-primary:        #1E4FA8;
    --ex-primary-bright: #4E93FF;
    --ex-primary-dim:    #10306B;
    --ex-primary-soft:   rgba(30, 79, 168, .18);
    --ex-primary-line:   rgba(30, 79, 168, .48);
    --ex-primary-glow:   rgba(30, 79, 168, .40);

    /* ── 초록 (돈이 늘었다) ────────────────────────────────────────────
     * 당첨 · 입금 · 조건 달성처럼 <b>회원에게 유리한 변화</b>에만 쓴다.
     * 브랜드 강조와 색을 같이 쓰면 버튼과 당첨 금액이 구분되지 않는다. */
    /* 강조 — "지금 여기" 를 가리킨다.
     *
     * 보라(--ex-primary)는 브랜드색이라 화면 곳곳에 이미 깔려 있다. 같은 보라로
     * 활성 상태를 칠하면 배경과 구별이 안 되고, 밝기만 올리면 눌린 것인지 그냥
     * 카드인지 알 수 없다. 그래서 <b>보색인 청록</b>을 쓴다 —
     * 보라 위에서 가장 멀리 떨어져 보이면서, 상승(라임)·위험(핑크)·경고(앰버) 어느 것과도
     * 겹치지 않는다.
     *
     * ⚠ 돈의 방향을 뜻하지 않는다. 늘고 주는 것은 --ex-up / --ex-danger 다. */
    --ex-accent:       #2ee6d6;
    --ex-accent-dim:   #1fb8ab;
    --ex-accent-soft:  rgba(46, 230, 214, .13);
    --ex-accent-line:  rgba(46, 230, 214, .42);
    --ex-accent-glow:  rgba(46, 230, 214, .28);

    --ex-up:          #3FD98A;
    --ex-up-dim:      #2FB870;
    --ex-up-soft:     rgba(63, 217, 138, .14);

    /* ── 글자 ─────────────────────────────────────────────────────────
     * ⚠ 보조 글자가 <b>중립 회색이 아니라 보라 계열</b>이다.
     *   이 한 줄이 화면 전체의 색감을 좌우한다 — 회색으로 바꾸면
     *   같은 배경을 써도 완전히 다른 사이트로 보인다. */
    /* ★ 글자색 네 단계는 <전달본 단계에 맞춰 둔다.>
     *   (레드 2026-08-29 "폰트색 사이즈가 안맞는들이 눈에보여")
     *
     *   전에는 이름만 같고 값이 <세 칸씩 어긋났다> —
     *     우리 "보조"(#9789cd) = 전달본 --text-5 (저기는 <장식>에 쓴다)
     *     우리 "흐림"(#7b6cb9) = 전달본 --text-6 (가장 흐린 단계)
     *   그래서 <읽어야 할 보조 정보>가 전달본이 장식에 쓰는 색으로
     *   칠해져, 같은 사이트에서 <우리 화면만 흐릿하게> 보였다.
     *   로그인(auth.css)과 게시판(pages.css)은 전달본 토큰을 쓰므로
     *   <우리 화면끼리도> 보조 글자 색이 갈렸다.
     *
     *   전달본의 실제 용법에 맞춘 짝은 이렇다 —
     *     --text-3 목록 행 라벨 · 리그명 · 시각 · 벤더명  = 읽어야 할 보조
     *     --text-5 빈 상태 · 안내 · 개수 · 배지          = 장식
     *     --text-6 가장 흐린 것
     *
     * ⚠ 값을 바꿀 때는 이 네 줄만 고친다. exit.css 는 글자색을
     *   567곳에서 토큰으로 쓰고 직접 적은 것은 16곳뿐이다. */
    --ex-text-1:      #ffffff;   /* 본문          = 전달본 --text   */
    --ex-text-2:      #BECBDD;   /* 보조          = 전달본 --text-3 */
    --ex-text-3:      #6E829E;   /* 흐림          = 전달본 --text-5 */
    --ex-text-4:      #52657F;   /* 값 없음 — 스코어의 "-:-" 처럼 자리만 지키는 글자
                                    = 전달본 --text-6. 전에는 #5d5191 이었는데
                                    그건 <전달본에 아예 없는> 더 어두운 색이었다. */

    /* ── 상태 (버튼에는 쓰지 않는다) ───────────────────────────────── */
    /* 하이라이트. 루벳 실측값(#FFCE00)이다.

       ⚠ <b>입금 버튼 하나에만 쓴다.</b> 화면이 온통 보라라서 노랑이 시선을 독점하는데,
         그걸 여기저기 걸면 독점이 사라지고 그냥 어수선해진다. */
    --ex-gold:        #D8DEE6;
    --ex-gold-dim:    #8E9CAE;
    --ex-gold-soft:   rgba(216, 222, 230, .14);
    /* 노랑 위의 글자. 흰 글자를 얹으면 대비가 모자라 읽기 어렵다. */
    --ex-gold-ink:    #05080F;

    --ex-danger:      #ff3f6c;
    --ex-warning:     #ffb020;
    --ex-info:        #38bdf8;

    /* ── 치수 ─────────────────────────────────────────────────────── */
    /* 루벳 72px. 58px 은 눌려 보인다. */
    --ex-header-h:    72px;
    --ex-sidebar-w:   236px;
    --ex-sidebar-w-sm: 72px;
    /* 루벳은 12px 하나로 통일한다(428회). 작은 것만 8px(197회).
       모서리가 제각각이면 색을 맞춰도 다른 사이트로 보인다. */
    --ex-radius:      12px;
    --ex-radius-sm:   8px;

    --ex-font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Apple SD Gothic Neo", "Malgun Gothic", Roboto, sans-serif;

    /* 부드러운 인상을 만드는 것은 폰트만이 아니다. 자간을 살짝 좁히고 굵기 대비를 줄인다. */
    /* 루벳은 자간을 건드리지 않는다. 조이면 글자가 빽빽해 보인다. */
    --ex-tracking: normal;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--ex-bg);
    color: var(--ex-text-1);
    font-family: var(--ex-font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

/* 숫자는 자리를 고정한다. 잔액이 바뀔 때마다 폭이 흔들리면 눈이 따라가지 못한다. */
.ex-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-weight: 700; }

/* =====================================================================
 * 헤더
 * ===================================================================== */

.ex-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--ex-header-h);
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 18px;
    background: rgba(10, 15, 22, .88);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ex-line);
}

.ex-burger {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: var(--ex-radius-sm);
    color: var(--ex-text-2);
    font-size: 16px;
    transition: background .15s, color .15s;
}
.ex-burger:hover { background: var(--ex-surface-2); color: var(--ex-text-1); }

/* ── 로고 ──────────────────────────────────────────────────────────
 * 이미지가 아니라 글자다. 폰트만으로 서려면 자간과 굵기 대비가 필요하다.
 * EXIT 는 네온으로 세우고 IGAMING 은 흰색으로 눕혀 시선이 앞부분에 걸리게 한다.
 */
.ex-logo {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-weight: 900;
    font-size: 20px;
    letter-spacing: -.4px;
    white-space: nowrap;
    padding-right: 4px;
}
.ex-logo .ex-logo-a {
    color: var(--ex-primary);
    text-shadow: 0 0 18px var(--ex-primary-glow);
}
.ex-logo .ex-logo-b {
    color: var(--ex-text-1);
    font-weight: 700;
    letter-spacing: .5px;
}

/* ── 헤더 아이콘 버튼 ──────────────────────────────────────────────
 * 검색·고객센터가 쓴다. 로고와 로그인 버튼 사이에서 튀지 않아야 하므로
 * 평소엔 테두리 없이 흐리게 두고 올렸을 때만 면이 생긴다.
 */
.ex-icon-btn {
    width: 38px; height: 38px;
    flex: none;
    display: grid; place-items: center;
    border-radius: 999px;
    color: var(--ex-text-2);
    font-size: 16px;
    transition: background .15s, color .15s;
}
.ex-icon-btn:hover { background: var(--ex-surface-2); color: var(--ex-text-1); }

/* ── 검색 ─────────────────────────────────────────────────────────
 * 헤더에 칸을 두지 않고, 누르면 위에서 덮는다.
 *
 * 칸으로 두면 헤더 가운데를 420px 잡아먹는데 정작 쓰는 건 "찾는 게임이 있을 때" 뿐이었다.
 * 게다가 좁은 화면에서 제일 먼저 잘려(520px 이하에서 display:none) 검색 자체가 사라졌다.
 * 아이콘은 어느 폭에서도 남는다.
 */
.ex-search-overlay {
    position: fixed; inset: 0; z-index: 200;
    display: flex; justify-content: center;
    padding: 14vh 18px 0;
}
.ex-search-overlay[hidden] { display: none; }

.ex-search-panel {
    position: relative;
    width: 100%; max-width: 560px;
    animation: exSearchIn .16s ease-out;
}
@keyframes exSearchIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: none; }
}

.ex-search-form {
    position: relative;
    display: flex; align-items: center;
    height: 54px;
    border-radius: 999px;
    border: 1px solid var(--ex-primary-line);
    background: var(--ex-surface);
    box-shadow: 0 18px 50px -18px rgba(0, 0, 0, .75), 0 0 0 4px var(--ex-primary-soft);
}
.ex-search-form > i {
    position: absolute; left: 20px;
    color: var(--ex-primary); font-size: 16px; pointer-events: none;
}
.ex-search-form input {
    width: 100%; height: 100%;
    padding: 0 52px 0 48px;
    border: 0; border-radius: 999px;
    background: transparent;
    color: var(--ex-text-1);
    font-size: 16px; font-family: inherit;
    outline: none;
}
.ex-search-form input::placeholder { color: var(--ex-text-3); }

.ex-search-x {
    position: absolute; right: 8px;
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 999px;
    color: var(--ex-text-3);
    transition: background .15s, color .15s;
}
.ex-search-x:hover { background: var(--ex-surface-2); color: var(--ex-text-1); }

.ex-search-hint {
    margin: 12px 4px 0;
    color: var(--ex-text-3);
    font-size: 12px;
    text-align: center;
}
.ex-header-right { margin-left: auto; display: flex; align-items: center; gap: 6px; }

/* =====================================================================
 * 버튼
 * ===================================================================== */

.ex-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 40px;
    padding: 0 18px;
    border-radius: var(--ex-radius-sm);
    font-size: 14px; font-weight: 700;
    white-space: nowrap;
    transition: background .15s, color .15s, box-shadow .15s, transform .08s;
}
.ex-btn:active { transform: translateY(1px); }

.ex-btn-primary {
    background: var(--ex-primary);
    color: #fff;
    box-shadow: 0 6px 22px -8px var(--ex-primary-glow);
}
.ex-btn-primary:hover { background: var(--ex-primary-bright); }

/* 입금 — 화면에서 유일하게 노란 것.

   루벳이 이렇게 한다. 화면이 온통 보라라서 노랑 하나가 시선을 독점하는데,
   그 하나를 <b>돈을 넣는 행동</b>에 준다. 강조색과 같은 보라로 두면 주변에 묻힌다.

   ⚠ 다른 곳에 이 클래스를 쓰지 말 것. 노란 것이 둘이 되는 순간 독점이 사라진다. */
.ex-btn-gold {
    background: var(--ex-gold);
    color: var(--ex-gold-ink);
    font-weight: 800;
    box-shadow: 0 6px 22px -10px rgba(255, 206, 0, .55);
}
.ex-btn-gold:hover { background: var(--ex-gold-dim); }

.ex-btn-ghost { color: var(--ex-text-1); background: transparent; }
.ex-btn-ghost:hover { background: var(--ex-surface-2); }

.ex-btn-outline {
    color: var(--ex-text-1);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface-2);
}
.ex-btn-outline:hover { border-color: var(--ex-primary-line); color: var(--ex-primary); }

.ex-btn-sm { height: 32px; padding: 0 12px; font-size: 12px; }

/* =====================================================================
 * 사이드바
 * ===================================================================== */

.ex-sidebar {
    position: fixed;
    top: var(--ex-header-h); left: 0; bottom: 0;
    width: var(--ex-sidebar-w);
    z-index: 90;
    padding: 14px 10px 28px;
    overflow-y: auto;
    background: var(--ex-bg-2);
    border-right: 1px solid var(--ex-line);
    transition: width .18s ease;
}
.ex-sidebar::-webkit-scrollbar { width: 6px; }
.ex-sidebar::-webkit-scrollbar-thumb { background: var(--ex-surface-3); border-radius: 3px; }

.ex-nav-group { margin-bottom: 18px; }
.ex-nav-title {
    padding: 0 12px 7px;
    font-size: 12px; font-weight: 800;
    letter-spacing: .8px; text-transform: uppercase;
    color: var(--ex-text-3);
}

.ex-nav-item {
    display: flex; align-items: center; gap: 12px;
    height: 42px;
    padding: 0 12px;
    border-radius: var(--ex-radius-sm);
    color: var(--ex-text-2);
    font-size: 14px; font-weight: 600;
    transition: background .15s, color .15s;
}
.ex-nav-item i { width: 18px; text-align: center; font-size: 16px; }
.ex-nav-item:hover { background: var(--ex-surface-2); color: var(--ex-text-1); }
/* 활성은 청록이다 — 배경도 보라, 브랜드색도 보라라 같은 색으로 칠하면
 * "지금 여기" 가 배경에 묻힌다. 왼쪽 막대를 3px 로 키워 훑을 때 먼저 걸리게 한다. */
.ex-nav-item.active {
    background: var(--ex-accent-soft);
    color: var(--ex-accent);
    box-shadow: inset 3px 0 0 var(--ex-accent);
}
.ex-nav-badge {
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--ex-primary);
    color: #fff;
    font-size: 10px; font-weight: 800;
}

/* 접힘 — 아이콘만 남긴다 */
body.ex-collapsed .ex-sidebar { width: var(--ex-sidebar-w-sm); }
body.ex-collapsed .ex-sidebar .ex-nav-text,
body.ex-collapsed .ex-sidebar .ex-nav-title,
body.ex-collapsed .ex-sidebar .ex-nav-badge { display: none; }
body.ex-collapsed .ex-nav-item { justify-content: center; padding: 0; }
body.ex-collapsed .ex-main { margin-left: var(--ex-sidebar-w-sm); }

/* =====================================================================
 * 본문
 * ===================================================================== */

.ex-main {
    margin-left: var(--ex-sidebar-w);
    padding: calc(var(--ex-header-h) + 22px) 22px 60px;
    transition: margin-left .18s ease;
    min-height: 100vh;
}
/* 루벳 1200px. 넓히면 한 줄에 카드가 너무 많아져 하나하나가 작아 보인다. */
.ex-container { max-width: 1200px; margin: 0 auto; }

/* ── 섹션 헤더 ─────────────────────────────────────────────────────── */
.ex-section { margin-bottom: 34px; }
.ex-section-head {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 14px;
}
.ex-section-head h2 {
    margin: 0;
    font-size: 16px; font-weight: 800;
    letter-spacing: -.2px;
}
.ex-section-head .ex-sec-icon {
    color: var(--ex-primary);
    font-size: 16px;
}
.ex-section-head .ex-count {
    color: var(--ex-text-3);
    font-size: 12px; font-weight: 600;
}
.ex-section-more {
    margin-left: auto;
    color: var(--ex-text-2);
    font-size: 12px; font-weight: 700;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 10px;
    border-radius: 8px;
    transition: color .15s, background .15s;
}
.ex-section-more:hover { color: var(--ex-primary); background: var(--ex-surface-2); }

/* =====================================================================
 * 히어로 — 프로모션
 * ===================================================================== */

.ex-hero {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 34px;
}

.ex-promo {
    position: relative;
    overflow: hidden;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
    padding: 24px;
    min-height: 190px;
    display: flex; flex-direction: column; justify-content: flex-end;
    transition: border-color .18s, transform .18s;
}
.ex-promo:hover { border-color: var(--ex-primary-line); transform: translateY(-2px); }

/* 배경 글로우. 이미지 자산이 없어도 화면이 비어 보이지 않게 한다. */
.ex-promo::after {
    content: "";
    position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 88% 8%, var(--ex-primary-glow) 0%, transparent 58%);
    opacity: .55;
    pointer-events: none;
}
.ex-promo > * { position: relative; z-index: 1; }

.ex-promo-tag {
    align-self: flex-start;
    margin-bottom: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ex-primary-soft);
    border: 1px solid var(--ex-primary-line);
    color: var(--ex-primary);
    font-size: 12px; font-weight: 800; letter-spacing: .4px;
}
.ex-promo h3 {
    margin: 0 0 6px;
    font-size: 24px; font-weight: 900; letter-spacing: -.5px;
}
.ex-promo p {
    margin: 0 0 14px;
    color: var(--ex-text-2);
    font-size: 14px;
}
.ex-promo--lg h3 { font-size: 28px; }
.ex-promo--lg { min-height: 260px; }

/* =====================================================================
 * 게임 카드
 *
 * 썸네일 이미지가 아직 없다. 이름 이니셜 + 그라디언트로 채운다.
 * 회색 빈 사각형을 깔아 두면 "로딩이 안 됐다" 로 보이지만,
 * 색이 있는 타일은 그 자체로 완성된 화면으로 읽힌다.
 * ===================================================================== */

.ex-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 152px;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x proximity;
}
.ex-rail::-webkit-scrollbar { height: 6px; }
.ex-rail::-webkit-scrollbar-thumb { background: var(--ex-surface-3); border-radius: 3px; }
.ex-rail::-webkit-scrollbar-track { background: transparent; }

.ex-card { scroll-snap-align: start; }

.ex-card-thumb {
    position: relative;
    /* 게임 아트가 가로형(210x157)으로 온다. 세로 칸에 담으면 object-fit: cover 가
       좌우를 44% 잘라 내는데, 게임 이름이 가장자리에 있는 썸네일은 그게 통째로 사라진다.
       (WHITECLIFF CDN 확인: 프로바이더 불문 210x157 한 가지뿐, 세로형 변형 없음)
       세로형 아트를 받게 되면 3/4 로 되돌린다. */
    aspect-ratio: 4 / 3;
    border-radius: var(--ex-radius-sm);
    overflow: hidden;
    border: 1px solid var(--ex-line);
    display: grid; place-items: center;
    font-size: 28px; font-weight: 900;
    color: rgba(255, 255, 255, .92);
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
.ex-card:hover .ex-card-thumb {
    transform: translateY(-3px);
    border-color: var(--ex-primary-line);
    box-shadow: 0 12px 28px -14px var(--ex-primary-glow);
}

/* 타일 색 6종. 썸네일이 없는 카드(라이브 2,351건이 전부 그렇다)의 바탕이다.

   ⚠ 한때 보라 한 색조로 통일했다가 되돌렸다. 루벳이 보라로 통일해 보이는 것은
   카드를 게임 아트가 덮고 있어서지, 바탕이 단색이라서가 아니다.
   그림 없는 카드가 백 장 넘게 깔리는 우리 화면에서는 같은 색이 벽이 된다.

   대신 <b>채도와 명도를 맞춰</b> 색상만 돌린다. 그러면 서로 구분되면서도
   화면 전체는 한 톤으로 읽힌다 — 알록달록해지는 것은 채도가 제각각일 때다. */
.ex-t1 { background: linear-gradient(150deg, #2f2a63, #191634); }
.ex-t2 { background: linear-gradient(150deg, #1f3560, #121c33); }
.ex-t3 { background: linear-gradient(150deg, #123f4e, #0b2029); }
.ex-t4 { background: linear-gradient(150deg, #4a2455, #26122c); }
.ex-t5 { background: linear-gradient(150deg, #5a2a3c, #2e1420); }
.ex-t6 { background: linear-gradient(150deg, #263b2e, #131f18); }

.ex-card-live {
    position: absolute; top: 8px; left: 8px;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(7, 11, 16, .78);
    color: var(--ex-primary);
    font-size: 10px; font-weight: 800; letter-spacing: .3px;
}
.ex-card-live::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ex-primary);
    box-shadow: 0 0 8px var(--ex-primary);
}

.ex-card-name {
    margin-top: 8px;
    font-size: 12px; font-weight: 700;
    color: var(--ex-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ex-card-sub {
    font-size: 12px;
    color: var(--ex-text-3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* =====================================================================
 * 진입 카드 (카지노 / 스포츠)
 * ===================================================================== */

.ex-portals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 34px; }

.ex-portal {
    position: relative; overflow: hidden;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
    padding: 26px;
    min-height: 148px;
    display: flex; flex-direction: column; justify-content: center;
    transition: border-color .18s, transform .18s;
}
.ex-portal:hover { border-color: var(--ex-primary-line); transform: translateY(-2px); }
.ex-portal::after {
    content: "";
    position: absolute; right: -18px; bottom: -26px;
    font-size: 128px; line-height: 1;
    opacity: .07;
    pointer-events: none;
}
.ex-portal--casino::after { content: "\f5d7"; font-family: "Font Awesome 6 Free"; font-weight: 900; }
.ex-portal--sports::after { content: "\f1e3"; font-family: "Font Awesome 6 Free"; font-weight: 900; }

.ex-portal h3 { margin: 0 0 4px; font-size: 20px; font-weight: 900; letter-spacing: -.3px; }
.ex-portal p { margin: 0 0 14px; color: var(--ex-text-2); font-size: 14px; }
.ex-portal .ex-btn { align-self: flex-start; }

/* =====================================================================
 * 푸터
 * ===================================================================== */

.ex-footer {
    margin-top: 50px;
    padding-top: 28px;
    border-top: 1px solid var(--ex-line);
    color: var(--ex-text-3);
    font-size: 12px;
}
.ex-footer-cols {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: 26px;
    margin-bottom: 26px;
}
.ex-footer h4 {
    margin: 0 0 10px;
    color: var(--ex-text-2);
    font-size: 12px; font-weight: 800;
    letter-spacing: .6px; text-transform: uppercase;
}
.ex-footer li { margin-bottom: 7px; }
.ex-footer li a { color: var(--ex-text-3); transition: color .15s; }
.ex-footer li a:hover { color: var(--ex-primary); }
.ex-footer-bottom {
    padding: 16px 0 0;
    border-top: 1px solid var(--ex-line);
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.ex-footer-note { max-width: 640px; line-height: 1.6; }
.ex-age {
    display: inline-grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 1.5px solid var(--ex-text-3);
    font-size: 12px; font-weight: 800;
    color: var(--ex-text-2);
}

/* =====================================================================
 * 반응형
 *
 * 사이드바가 좁은 화면을 잡아먹는다. 1100px 아래에서는 접고,
 * 768px 아래에서는 아예 밀어내 본문이 전폭을 쓰게 한다.
 * ===================================================================== */

@media (max-width: 1200px) {
    .ex-hero { grid-template-columns: 1fr 1fr; }
    .ex-promo--lg { grid-column: 1 / -1; }
}

@media (max-width: 1100px) {
    .ex-sidebar { width: var(--ex-sidebar-w-sm); }
    .ex-sidebar .ex-nav-text, .ex-sidebar .ex-nav-title, .ex-sidebar .ex-nav-badge { display: none; }
    .ex-nav-item { justify-content: center; padding: 0; }
    .ex-main { margin-left: var(--ex-sidebar-w-sm); }
}

@media (max-width: 768px) {
    .ex-sidebar {
        transform: translateX(-100%);
        width: var(--ex-sidebar-w);
        transition: transform .2s ease;
    }
    .ex-sidebar .ex-nav-text, .ex-sidebar .ex-nav-title, .ex-sidebar .ex-nav-badge { display: block; }
    .ex-nav-item { justify-content: flex-start; padding: 0 12px; }
    body.ex-drawer .ex-sidebar { transform: translateX(0); box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
    body.ex-drawer::after {
        content: ""; position: fixed; inset: var(--ex-header-h) 0 0 0;
        background: rgba(0, 0, 0, .55); z-index: 89;
    }

    .ex-main { margin-left: 0; padding: calc(var(--ex-header-h) + 16px) 14px 44px; }
    .ex-hero { grid-template-columns: 1fr; }
    .ex-portals { grid-template-columns: 1fr; }
    .ex-footer-cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
    .ex-rail { grid-auto-columns: 124px; }
    .ex-footer-cols { grid-template-columns: 1fr; }
}

/* =====================================================================
 * 게임 카드 — 썸네일 이미지
 *
 * 이미지는 색 타일 <b>위에</b> 덮는다. 밑에 색과 이니셜을 미리 깔아 두면
 *   1) 로딩 전에도 카드가 완성돼 보이고 (회색 사각형이 안 보인다)
 *   2) 이미지가 실패해 사라져도 그 자리가 그대로 남는다.
 * 라이브 게임 2,351건은 애초에 썸네일이 없어서 이 밑바탕이 곧 최종 화면이다.
 * ===================================================================== */

.ex-card-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    /* lazy 로 늦게 도착하므로 갑자기 튀어나오지 않게 한 박자 눕혀 준다. */
    animation: ex-fade .22s ease both;
}

@keyframes ex-fade { from { opacity: 0; } to { opacity: 1; } }

/* 그림이 없을 때 보이는 자리 — 종목 아이콘 하나.

   워터마크처럼 흐리게 둔다. 진하게 하면 아이콘이 주인공이 되어
   바카라 615장이 전부 같은 다이아로 보인다. 이름이 읽히는 것이 먼저다. */
.ex-card-glyph {
    position: relative; z-index: 0;
    font-size: 40px;
    color: rgba(255, 255, 255, .16);
}
.ex-card:hover .ex-card-glyph { color: rgba(255, 255, 255, .26); }
.ex-card-live { z-index: 2; }

/* =====================================================================
 * 언어 전환
 * ===================================================================== */

.ex-lang { position: relative; }
.ex-lang-cur { font-weight: 700; }

.ex-lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 120;
    min-width: 156px;
    padding: 6px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface);
    box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .8);
}
.ex-lang-menu a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 14px; font-weight: 600;
    color: var(--ex-text-2);
    transition: background .14s, color .14s;
}
.ex-lang-menu a:hover { background: var(--ex-surface-2); color: var(--ex-text-1); }
.ex-lang-menu a.active { color: var(--ex-primary); }
.ex-lang-menu a i { margin-left: auto; font-size: 12px; }

@media (max-width: 520px) { .ex-lang-cur { display: none; } }

/* =====================================================================
 * 모달 — 로그인 유도
 * ===================================================================== */

.ex-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; }
.ex-modal[hidden] { display: none; }

.ex-modal-back {
    position: absolute; inset: 0;
    background: rgba(3, 6, 10, .72);
    backdrop-filter: blur(3px);
}

.ex-modal-box {
    position: relative;
    width: min(420px, calc(100vw - 32px));
    padding: 32px 28px 26px;
    text-align: center;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface);
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .9);
    animation: ex-pop .18s ease both;
}

@keyframes ex-pop {
    from { opacity: 0; transform: translateY(10px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.ex-modal-icon {
    width: 56px; height: 56px;
    margin: 0 auto 16px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ex-primary-soft);
    border: 1px solid var(--ex-primary-line);
    color: var(--ex-primary);
    font-size: 20px;
}
.ex-modal-box h3 { margin: 0 0 8px; font-size: 20px; font-weight: 900; letter-spacing: -.3px; }
.ex-modal-box p { margin: 0 0 22px; color: var(--ex-text-2); font-size: 14px; line-height: 1.65; }

/* 모달 아래 단추들.
 *
 * 칸을 1fr 1fr 로 못박아 두었더니, <b>단추가 하나뿐인 모달</b>에서 왼쪽 칸만 차고
 * 오른쪽이 빈 채로 남아 한쪽으로 쏠려 보였다(게임 실행 실패 모달). 단추가 둘인
 * 로그인 모달만 보고 만들어서 오래 몰랐다.
 *
 * 이제 <b>있는 만큼</b> 칸이 잡힌다 — 하나면 꽉 차고, 둘이면 반씩 나눈다. */
.ex-modal-actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 9px;
}

/* 셋을 넘기면 가로로 늘어놓기엔 좁다. 그때는 세로로 쌓는다. */
@media (max-width: 400px) {
    .ex-modal-actions { grid-auto-flow: row; }
}

.ex-modal-close {
    position: absolute; top: 12px; right: 12px;
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 8px;
    color: var(--ex-text-3);
    transition: background .14s, color .14s;
}
.ex-modal-close:hover { background: var(--ex-surface-2); color: var(--ex-text-1); }

/* =====================================================================
 * 자리표 화면
 * ===================================================================== */

.ex-empty { padding: 90px 20px; text-align: center; }
.ex-empty-icon {
    width: 68px; height: 68px;
    margin: 0 auto 18px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ex-primary-soft);
    border: 1px solid var(--ex-primary-line);
    color: var(--ex-primary);
    font-size: 28px;
}
.ex-empty h2 {
    margin: 0 0 8px;
    font-size: 28px; font-weight: 900; letter-spacing: 1px;
    color: var(--ex-text-1);
}
.ex-empty p { margin: 0 0 24px; color: var(--ex-text-3); font-size: 14px; }

/* =====================================================================
 * 타이포 — 부드럽게
 *
 * Pretendard 가변폰트 하나로 100~900 을 전부 낸다. 정적 웨이트를 여러 개 받으면
 * 파일이 늘고, 중간 굵기가 없어 굵기 대비가 계단처럼 튄다.
 * (SIL OFL 라이선스라 프로젝트에 포함해 배포할 수 있다. LICENSE.txt 를 같이 뒀다)
 *
 * swap 으로 둔다. 폰트가 2MB 라 처음 방문에서는 늦게 도착하는데,
 * block 이면 그동안 글자가 통째로 안 보인다. 시스템 폰트로 먼저 읽히는 편이 낫다.
 * ===================================================================== */

@font-face {
    font-family: "Pretendard Variable";
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url("/assets/vendor/pretendard/PretendardVariable.woff2") format("woff2-variations");
}

body {
    letter-spacing: var(--ex-tracking);
    /* 굵기를 한 단계씩 낮춘다. 900 은 소비자 화면에서 공격적으로 읽힌다. */
    font-weight: 450;
}

h1, h2, h3, h4 { letter-spacing: -.025em; }

.ex-logo { font-weight: 800; letter-spacing: -.03em; }
.ex-logo .ex-logo-b { font-weight: 600; letter-spacing: .02em; }

.ex-promo h3, .ex-portal h3, .ex-modal-box h3 { font-weight: 800; }
.ex-section-head h2 { font-weight: 750; }
.ex-nav-item { font-weight: 550; }
.ex-card-name { font-weight: 600; }
.ex-btn { font-weight: 650; }

/* =====================================================================
 * 버튼 — 그라데이션
 *
 * 단색 네온은 넓은 면적에서 형광펜처럼 뜬다. 같은 hue 안에서 밝기만 흘려 주면
 * 면이 살짝 굽어 보여 눌러야 할 것으로 읽힌다. hue 를 섞지 않는 이유는
 * 두 색이 섞이는 순간 브랜드색이 무엇인지 흐려지기 때문이다.
 * ===================================================================== */

.ex-btn-primary {
    background: linear-gradient(135deg, var(--ex-primary-bright) 0%, var(--ex-primary) 45%, var(--ex-primary-dim) 100%);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .14);
    box-shadow: 0 8px 24px -10px var(--ex-primary-glow), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.ex-btn-primary:hover {
    background: linear-gradient(135deg, #AFC8EA 0%, var(--ex-primary-bright) 50%, var(--ex-primary) 100%);
    box-shadow: 0 12px 30px -10px var(--ex-primary-glow), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.ex-btn-outline {
    background: linear-gradient(180deg, var(--ex-surface-2) 0%, var(--ex-surface) 100%);
}

/* 소셜 로그인. 브랜드 색을 쓰지 않고 표면만 구분한다 —
   네온 버튼 옆에 파랑·검정이 서면 어느 것이 주 동작인지 흐려진다. */
.ex-btn-social {
    width: 100%;
    height: 46px;
    gap: 9px;

    /* 구글은 <a> 다 — 스프링이 만드는 주소로 가야 해서 <button> 을 쓸 수 없다.
       버튼은 가운데 정렬이 기본이지만 링크는 아니라, 여기서 못 박지 않으면
       구글만 왼쪽으로 붙는다. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line-2);
    background: linear-gradient(180deg, var(--ex-surface-2) 0%, var(--ex-surface) 100%);
    color: var(--ex-text-1);
    font-size: 14px; font-weight: 600;
    transition: border-color .15s, background .15s, transform .08s;
}
.ex-btn-social:hover { border-color: var(--ex-line-2); background: var(--ex-surface-3); }
.ex-btn-social:active { transform: translateY(1px); }
.ex-btn-social i { font-size: 16px; }

/* =====================================================================
 * 인증 화면 (회원가입 · 로그인)
 * ===================================================================== */

/* 카드를 화면 세로 가운데에 둔다.
   align-items:center 가 아니라 카드에 margin:auto 를 준다 —
   카드가 화면보다 길어지면 center 는 <b>위쪽을 잘라 먹는다.</b>
   margin:auto 는 남는 공간이 있을 때만 나눠 갖고, 모자라면 위에서부터 흐른다. */
.ex-auth {
    display: flex; justify-content: center;
    min-height: calc(100dvh - 58px);   /* 58px = 헤더 */
    padding: 20px 16px 28px;
}

/* 폭은 필드 수에 맞춘다.
   로그인은 두 칸뿐이라 넓히면 오히려 허전하고, 가입은 다섯 칸에 약관까지 붙어
   같은 폭이면 답답하다. 그래서 기본은 로그인 기준이고 가입만 넓힌다. */
.ex-auth-card {
    width: min(500px, 100%);
    margin: auto 0;
    padding: 28px 32px 24px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
    box-shadow: 0 30px 70px -34px rgba(0, 0, 0, .9);
    position: relative;
    overflow: hidden;
}
/* 카드 위쪽에만 옅은 네온을 흘린다. 폼 전체에 깔면 입력칸 글자가 읽기 어려워진다. */
.ex-auth-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 160px;
    background: radial-gradient(90% 100% at 50% 0%, var(--ex-primary-glow) 0%, transparent 70%);
    opacity: .5; pointer-events: none;
}
.ex-auth-card > * { position: relative; }

.ex-auth-card.wide { width: min(600px, 100%); }

/* 가입 폼은 입력이 다섯 칸이라 조금만 헐거워도 화면을 넘어간다.
   버튼이 잘리면 회원은 가입을 못 한다 — 여백보다 그게 먼저다. */
.ex-auth-head { text-align: center; margin-bottom: 18px; }
.ex-auth-head .ex-logo { justify-content: center; font-size: 16px; margin-bottom: 10px; }
.ex-auth-head h1 { margin: 0 0 5px; font-size: 20px; font-weight: 800; }
.ex-auth-head p { margin: 0; color: var(--ex-text-2); font-size: 14px; line-height: 1.6; }

/* ── 입력칸 ───────────────────────────────────────────────────────── */

.ex-field { margin-bottom: 12px; }
.ex-field label {
    display: block; margin-bottom: 5px;
    font-size: 12px; font-weight: 650;
    color: var(--ex-text-2);
}
.ex-field .req { color: var(--ex-primary); }

.ex-field input[type="text"],
.ex-field input[type="email"],
.ex-field input[type="password"],
.ex-field select,
.ex-field textarea {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-bg-2);
    color: var(--ex-text-1);
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

/* select 는 브라우저가 제 화살표와 배경을 그린다. 그대로 두면 이 폼에서만
   흰 상자가 튀어나온다. 기본 그림을 끄고 화살표를 직접 얹는다.
   화살표는 인라인 SVG 라 파일을 하나 더 물지 않는다. */
.ex-field select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238b8fa3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 11px 8px;
}
/* 펼친 목록은 OS 가 그린다. 어두운 배경을 물려주지 않으면 흰 바탕에 흰 글씨가 된다. */
.ex-field select option { background: var(--ex-surface-2); color: var(--ex-text-1); }

.ex-field textarea {
    height: auto;
    min-height: 120px;
    padding: 12px 14px;
    line-height: 1.7;
    resize: vertical;
}

.ex-field input::placeholder,
.ex-field textarea::placeholder { color: var(--ex-text-3); }
.ex-field input:focus,
.ex-field select:focus,
.ex-field textarea:focus {
    border-color: var(--ex-primary-line);
    background-color: var(--ex-surface-2);
    box-shadow: 0 0 0 3px var(--ex-primary-soft);
}

.ex-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--ex-text-3); }

/* 오류는 그 칸 바로 아래 붙는다. 폼 위에 몰아 두면 어디를 고칠지 못 찾는다. */
.ex-error {
    display: flex; align-items: center; gap: 5px;
    margin-top: 6px;
    font-size: 12px; font-weight: 600;
    color: var(--ex-danger);
}
.ex-field.has-error input { border-color: var(--ex-danger); }
.ex-field.has-error input:focus { box-shadow: 0 0 0 3px rgba(255, 63, 108, .12); }

/* ── 약관 체크 ────────────────────────────────────────────────────── */

.ex-agree { margin: 18px 0 20px; }

/* label.ex-check 로 잡는다 — 태그를 붙여 명시도를 올리는 것이 핵심이다.
   위쪽 .ex-field label 이 display:block 을 주는데 그쪽 명시도가 (0,1,1) 로 더 높아,
   .ex-check 만으로는 순서와 무관하게 진다. 실제로 가입 폼 약관 체크박스가
   세로로 무너져 있었다(2026-08-23 실측). */
label.ex-check {
    display: flex; align-items: flex-start; gap: 10px;
    margin-bottom: 0;   /* .ex-field label 의 6px 를 상쇄한다 */
    cursor: pointer;
}
.ex-check input { position: absolute; opacity: 0; width: 0; height: 0; }

.ex-check-box {
    flex: none;
    width: 20px; height: 20px;
    margin-top: 1px;
    display: grid; place-items: center;
    border-radius: 6px;
    border: 1.5px solid var(--ex-line-2);
    background: var(--ex-bg-2);
    color: transparent;
    font-size: 12px;
    transition: background .14s, border-color .14s, color .14s;
}
.ex-check input:checked + .ex-check-box {
    background: linear-gradient(135deg, var(--ex-primary-bright), var(--ex-primary-dim));
    border-color: transparent;
    color: #fff;
}
/* 키보드로 옮겨 다니는 사용자를 위해 초점을 보이게 한다. */
.ex-check input:focus-visible + .ex-check-box { box-shadow: 0 0 0 3px var(--ex-primary-soft); }

.ex-check-text { font-size: 12px; color: var(--ex-text-2); line-height: 1.55; }
.ex-check-text a { color: var(--ex-text-1); text-decoration: underline; text-underline-offset: 2px; }
.ex-check-text a:hover { color: var(--ex-primary); }

.ex-agree.has-error .ex-check-box { border-color: var(--ex-danger); }

/* ── 버튼 · 구분선 · 소셜 ─────────────────────────────────────────── */

.ex-btn-block { width: 100%; height: 48px; font-size: 16px; }

.ex-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0 16px;
    color: var(--ex-text-3);
    font-size: 12px;
}
.ex-divider::before, .ex-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--ex-line);
}

.ex-social { display: grid; gap: 9px; }

.ex-auth-foot {
    margin: 22px 0 0;
    text-align: center;
    font-size: 12px;
    color: var(--ex-text-3);
}
.ex-auth-foot a { color: var(--ex-primary); font-weight: 650; margin-left: 4px; }
.ex-auth-foot a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 520px) {
    .ex-auth { padding: 8px 0 30px; }
    .ex-auth-card,
    .ex-auth-card.wide { padding: 26px 18px 22px; border-radius: 12px; }
}

/* =====================================================================
 * 사이드바 아코디언
 *
 * 메뉴가 깊어졌다. 카지노 아래 8개, 스포츠 아래 5개가 붙는데 전부 펼쳐 두면
 * 목록이 화면을 넘어가 스크롤 없이는 하단 항목(VIP·고객센터)이 안 보인다.
 * 지금 보고 있는 묶음만 열어 둔다.
 * ===================================================================== */

.ex-nav-acc { margin-bottom: 2px; }

.ex-nav-head { width: 100%; text-align: left; }
.ex-nav-head .ex-nav-caret {
    margin-left: auto;
    width: auto;
    font-size: 10px;
    opacity: .45;
    transition: transform .18s ease, opacity .15s;
}
.ex-nav-acc.open .ex-nav-head .ex-nav-caret { transform: rotate(180deg); opacity: .8; }

/* 닫힘/열림을 grid 로 다룬다. max-height 로 하면 항목 수가 바뀔 때마다
   값을 다시 잡아야 하고, 넉넉히 잡아 두면 닫히는 속도가 어색해진다. */
.ex-nav-sub {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .2s ease;
}
.ex-nav-acc.open .ex-nav-sub { grid-template-rows: 1fr; }
.ex-nav-sub > * { overflow: hidden; }

.ex-nav-child {
    height: 38px;
    padding-left: 22px;
    font-size: 14px;
    font-weight: 500;
}
.ex-nav-child i { font-size: 14px; opacity: .8; }

/* 하위 항목의 활성 표시는 왼쪽 선만. 상위와 같은 배경을 쓰면 어느 쪽이 열린 묶음인지 흐려진다. */
.ex-nav-child.active {
    background: var(--ex-accent-soft);
    color: var(--ex-accent);
    box-shadow: inset 3px 0 0 var(--ex-accent);
}

.ex-nav-badge {
    margin-left: auto;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--ex-surface-3);
    color: var(--ex-text-3);
    font-size: 10px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ex-nav-child.active .ex-nav-badge { background: var(--ex-accent-soft); color: var(--ex-accent); }

/* ── 사이드바 하단 언어 ──────────────────────────────────────────── */

.ex-nav-lang {
    position: relative;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--ex-line);
}
.ex-nav-lang > button { width: 100%; text-align: left; }
.ex-nav-lang .ex-nav-caret { margin-left: auto; width: auto; font-size: 10px; opacity: .45; }

/* 위로 띄운다. 사이드바 맨 아래라 아래로 열면 화면 밖으로 나간다. */
.ex-nav-lang .ex-lang-menu {
    top: auto;
    bottom: calc(100% + 6px);
    left: 6px; right: 6px;
}

/* 접힌 사이드바에서는 하위 목록과 배지를 숨긴다. 아이콘만 남은 폭에 들어가지 않는다. */
body.ex-collapsed .ex-nav-sub,
body.ex-collapsed .ex-nav-caret { display: none; }
body.ex-collapsed .ex-nav-lang { border-top: 0; }

@media (max-width: 1100px) {
    .ex-sidebar .ex-nav-sub, .ex-sidebar .ex-nav-caret { display: none; }
}
@media (max-width: 768px) {
    .ex-sidebar .ex-nav-sub { display: grid; }
    .ex-sidebar .ex-nav-caret { display: block; }
}

/* =====================================================================
 * 알림 줄 (로그인 화면)
 *
 * 세 가지를 색으로 가른다. 같은 모양으로 띄우면 "가입 완료" 와 "비밀번호 틀림" 이
 * 같은 무게로 읽혀서, 회원이 방금 무슨 일이 있었는지 한 번에 파악하지 못한다.
 * ===================================================================== */

.ex-alert {
    display: flex; align-items: flex-start; gap: 9px;
    margin-bottom: 18px;
    padding: 11px 13px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid transparent;
    font-size: 12px; font-weight: 550; line-height: 1.55;
}
.ex-alert i { margin-top: 2px; font-size: 14px; }

.ex-alert-ok    { background: var(--ex-primary-soft);        border-color: var(--ex-primary-line); color: var(--ex-primary-bright); }
.ex-alert-warn  { background: rgba(255,176,32,.10);       border-color: rgba(255,176,32,.30); color: var(--ex-warning); }
.ex-alert-error { background: rgba(255,63,108,.10);       border-color: rgba(255,63,108,.30); color: var(--ex-danger); }

/* ── 자동로그인 / 도움말 줄 ───────────────────────────────────────── */

.ex-login-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin: 4px 0 20px;
}
.ex-check-inline { align-items: center; }
.ex-check-inline .ex-check-box { margin-top: 0; }

.ex-login-help { font-size: 12px; color: var(--ex-text-3); white-space: nowrap; }
.ex-login-help:hover { color: var(--ex-primary); text-decoration: underline; text-underline-offset: 3px; }

/* =====================================================================
 * 헤더 — 로그인 상태
 * ===================================================================== */

.ex-user { position: relative; }

.ex-user-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 10px 0 8px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line-2);
    background: linear-gradient(180deg, var(--ex-surface-2) 0%, var(--ex-surface) 100%);
    color: var(--ex-text-1);
    font-size: 14px; font-weight: 650;
    transition: border-color .15s;
}
.ex-user-btn:hover { border-color: var(--ex-primary-line); }

.ex-avatar {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--ex-primary-bright), var(--ex-primary-dim));
    color: #fff;
    font-size: 12px; font-weight: 800;
}

.ex-user-menu {
    position: absolute;
    top: calc(100% + 8px); right: 0;
    z-index: 120;
    min-width: 190px;
    padding: 6px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface);
    box-shadow: 0 18px 40px -18px rgba(0,0,0,.8);
}
.ex-user-menu a, .ex-user-menu button {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 9px 11px;
    border-radius: 8px;
    font-size: 14px; font-weight: 600;
    color: var(--ex-text-2);
    text-align: left;
    transition: background .14s, color .14s;
}
.ex-user-menu a:hover, .ex-user-menu button:hover { background: var(--ex-surface-2); color: var(--ex-text-1); }
.ex-user-menu i { width: 15px; text-align: center; font-size: 12px; }
.ex-user-menu .ex-menu-sep { height: 1px; margin: 5px 6px; background: var(--ex-line); }
.ex-user-menu .ex-menu-out { color: var(--ex-danger); }
.ex-user-menu .ex-menu-out:hover { background: rgba(255,63,108,.10); color: var(--ex-danger); }

@media (max-width: 520px) { .ex-user-name { display: none; } }

/* =====================================================================
 * 게임 카드 — 이름을 카드 안으로
 *
 * 이름을 카드 <b>밖 아래</b>에 두면 줄마다 높이가 들쭉날쭉해진다.
 * 게임명 길이가 제각각이라 어떤 카드는 한 줄, 어떤 카드는 두 줄이 되고
 * 그만큼 카드 아랫변이 어긋나 격자가 흐트러진다.
 * 안으로 넣으면 카드는 전부 같은 비율이 되고, 이름은 그 위에 얹힌다.
 *
 * 글자가 썸네일 위에 바로 놓이면 밝은 그림에서 읽히지 않으므로
 * 아래쪽에 어두운 그라데이션(스크림)을 한 겹 깐다.
 * ===================================================================== */

.ex-card-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    padding: 26px 10px 9px;
    background: linear-gradient(180deg, transparent 0%, rgba(4, 8, 12, .72) 45%, rgba(4, 8, 12, .94) 100%);
    pointer-events: none;
}
.ex-card-body .ex-card-name {
    margin: 0;
    font-size: 12px; font-weight: 700;
    color: #fff;
    line-height: 1.25;
    /* 두 줄까지만 보이고 넘치면 자른다. 세 줄이 되면 썸네일을 다 덮는다. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ex-card-body .ex-card-sub {
    margin-top: 2px;
    font-size: 10px; font-weight: 700;
    letter-spacing: .04em; text-transform: uppercase;
    color: rgba(255, 255, 255, .55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 이름이 안으로 들어갔으니 카드 자체에는 여백이 필요 없다. */
.ex-card { display: block; }

/* =====================================================================
 * 섹션 헤더 — 전체보기 + 좌우 화살표
 * ===================================================================== */

.ex-rail-nav { display: flex; gap: 6px; margin-left: 10px; }

.ex-rail-btn {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 8px;
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface-2);
    color: var(--ex-text-2);
    font-size: 12px;
    transition: border-color .15s, color .15s, opacity .15s;
}
.ex-rail-btn:hover { border-color: var(--ex-primary-line); color: var(--ex-primary); }
/* 더 밀 곳이 없으면 흐리게. 버튼을 없애면 헤더 폭이 흔들린다. */
.ex-rail-btn:disabled { opacity: .3; cursor: default; border-color: var(--ex-line); color: var(--ex-text-3); }

.ex-rail { scroll-behavior: smooth; }

/* =====================================================================
 * 카테고리 필터 (로비 / 슬롯 / 라이브 / 게임쇼 …)
 * ===================================================================== */

.ex-pills {
    display: flex; gap: 8px;
    margin-bottom: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.ex-pills::-webkit-scrollbar { height: 0; }

/* 탭·칩. 알약이 아니라 사각이다 — 루벳과 갈리던 자리다. */
.ex-pill {
    display: inline-flex; align-items: center; gap: 7px;
    flex: none;
    height: 36px; padding: 0 14px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface-2);
    color: var(--ex-text-2);
    font-size: 14px; font-weight: 650;
    white-space: nowrap;
    transition: background .15s, color .15s, border-color .15s;
}
.ex-pill i { font-size: 12px; }
.ex-pill:hover { color: var(--ex-text-1); border-color: var(--ex-line-2); background: var(--ex-surface-3); }
/* 고른 알약은 채워서 띄운다. 테두리만 바꾸면 열 개가 늘어선 줄에서 안 보인다. */
.ex-pill.active {
    background: linear-gradient(135deg, var(--ex-accent), var(--ex-accent-dim));
    border-color: transparent;
    color: #06231f;
    font-weight: 800;
    box-shadow: 0 0 0 1px var(--ex-accent-line), 0 4px 14px var(--ex-accent-glow);
}
.ex-pill-count { font-size: 12px; opacity: .7; font-variant-numeric: tabular-nums; }

/* =====================================================================
 * 목록 격자 (카지노 / 라이브 전체보기)
 * ===================================================================== */

.ex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 12px;
}
@media (max-width: 520px) { .ex-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); } }

/* 프로모션 3개를 같은 너비로. 하나만 크게 두면 나머지 둘이 곁다리로 읽힌다. */
.ex-hero { grid-template-columns: repeat(3, 1fr); }
.ex-promo--lg { min-height: 190px; }
.ex-promo--lg h3 { font-size: 24px; }
@media (max-width: 1200px) { .ex-hero { grid-template-columns: 1fr 1fr; } .ex-promo--lg { grid-column: auto; } }
@media (max-width: 768px)  { .ex-hero { grid-template-columns: 1fr; } }

/* 더 보기 */
.ex-more { display: flex; justify-content: center; margin-top: 26px; }
.ex-more .ex-btn { min-width: 180px; }

/* 목록 화면의 섹션 헤더는 화살표가 없어 아래 여백만 준다. */
.ex-grid + .ex-more { margin-top: 26px; }

/* =====================================================================
 * 헤더 잔액 — 두 축 (선택 지갑 · 표시 통화)
 *
 * 루벳은 코인 하나만 고르게 하지만 우리는 둘을 따로 고른다.
 * 그래서 pill 안이 두 줄이다 — 굵은 줄이 실제 지갑 잔액,
 * 아래 흐린 줄이 표시 통화로 환산한 값.
 *
 * 드롭다운도 두 칸으로 나눈다. 한 목록에 섞어 두면 회원이
 * "USDT 를 고르는 것" 과 "USD 로 읽는 것" 을 구분하지 못한다.
 * ===================================================================== */

.ex-wallet { position: relative; margin-left: 18px; }

.ex-wallet-btn {
    display: flex; align-items: center; gap: 10px;
    height: 40px;
    padding: 0 10px 0 8px;
    border-radius: 999px;
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface-2);
    transition: border-color .15s;
}
.ex-wallet-btn:hover { border-color: var(--ex-primary-line); }

/* 지갑 코드를 아이콘 자리에 글자로 세운다. 코인 로고를 쓰면 8개를 받아 와야 하고
   제공사가 늘 때마다 이미지가 빈다. 글자는 어떤 통화가 와도 그려진다. */
.ex-wallet-coin {
    flex: none;
    min-width: 42px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--ex-surface-3);
    color: var(--ex-text-2);
    font-size: 10px; font-weight: 800; letter-spacing: .3px;
    text-align: center;
}
.ex-wallet-coin.coin { background: var(--ex-primary-soft); color: var(--ex-primary); }

.ex-wallet-nums { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.ex-wallet-main { font-size: 14px; font-weight: 800; color: var(--ex-text-1); }
.ex-wallet-sub  { font-size: 10px; color: var(--ex-text-3); }
.ex-wallet-caret { font-size: 10px; opacity: .5; }

.ex-deposit { margin-left: 8px; }

/* ── 드롭다운 ─────────────────────────────────────────────────────── */
/* 지갑 고르기 — 헤더에 매달린 작은 서랍이 아니라 화면 가운데 창이다.
 *
 * 드롭다운이던 때는 288px 짜리가 헤더 구석에 붙어 있어, 잔액을 훑다가
 * 바깥을 잘못 눌러 닫히는 일이 잦았다. 무엇보다 <b>지금 어느 지갑으로 노는지</b>가
 * 회원이 가장 자주 확인하는 값인데 화면 구석에 있으면 눈에 안 들어온다.
 *
 * 가운데로 옮기고 뒤를 어둡게 덮는다 — 여는 순간 이 화면의 주인공이 된다. */
.ex-wallet-menu {
    position: fixed;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(460px, calc(100vw - 32px));
    z-index: 220;
    padding: 6px 0 10px;
    border-radius: 18px;
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface);
    box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .9),
                0 0 0 1px rgba(255, 255, 255, .04);
}
.ex-wallet-menu[hidden] { display: none; }

/* 뒤를 덮는 막. 창 바깥을 누르면 닫힌다 — 그 판정은 이 막이 받는다. */
.ex-wallet-modal {
    position: fixed; inset: 0;
    z-index: 210;
    background: rgba(6, 7, 18, .72);
    backdrop-filter: blur(3px);
}
.ex-wallet-modal[hidden] { display: none; }

/* 창 제목. 서랍일 때는 없어도 됐지만 가운데 창은 무엇을 고르는 자리인지 밝혀야 한다. */
.ex-wallet-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--ex-line);
}
.ex-wallet-head h3 {
    margin: 0; display: flex; align-items: center; gap: 9px;
    font-size: 16px; font-weight: 800; color: var(--ex-text-1);
}
.ex-wallet-head h3 i { color: var(--ex-accent); font-size: 14px; }
.ex-wallet-close {
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border: 0; border-radius: 999px;
    background: transparent; color: var(--ex-text-3);
    cursor: pointer; font-size: 16px;
}
.ex-wallet-close:hover { background: var(--ex-surface-2); color: var(--ex-text-1); }

/* 고른 지갑은 확실히 표시한다. 목록에서 어느 것이 지금 쓰는 것인지가
   이 창의 유일한 질문이다 — 옅은 배경만으로는 답이 안 된다. */
.ex-wallet-list button.active {
    background: var(--ex-accent-soft);
    box-shadow: inset 3px 0 0 var(--ex-accent);
}
.ex-wallet-list button.active .ex-wallet-code { color: var(--ex-accent); }
.ex-wallet-list button.active .fa-check { color: var(--ex-accent); }

.ex-wallet-sec { padding: 8px 14px 6px; }
.ex-wallet-sec h4 {
    margin: 0; font-size: 12px; font-weight: 800;
    letter-spacing: .4px; text-transform: uppercase; color: var(--ex-text-2);
}
.ex-wallet-sec p { margin: 3px 0 0; font-size: 12px; color: var(--ex-text-3); line-height: 1.45; }

.ex-wallet-list { list-style: none; margin: 0; padding: 0 6px; max-height: 232px; overflow-y: auto; }
.ex-wallet-list button {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 8px 8px;
    border-radius: var(--ex-radius-sm);
    color: var(--ex-text-2);
    font-size: 14px;
    transition: background .15s, color .15s;
}
.ex-wallet-list button:hover { background: var(--ex-surface-2); color: var(--ex-text-1); }
.ex-wallet-list button.active { color: var(--ex-primary); }
.ex-wallet-list .ex-wallet-code {
    flex: none; min-width: 46px;
    font-size: 12px; font-weight: 800; letter-spacing: .3px;
    color: var(--ex-text-2);
}
.ex-wallet-list button.active .ex-wallet-code { color: var(--ex-primary); }
.ex-wallet-list .ex-wallet-code.coin { color: var(--ex-info); }
.ex-wallet-list .ex-wallet-bal { margin-left: auto; font-variant-numeric: tabular-nums; }
.ex-wallet-list i { font-size: 12px; }

/* 표시 통화는 다섯 개뿐이라 칩으로 깐다. 목록으로 두면 스크롤이 두 번 생긴다. */
.ex-wallet-cur { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 12px 10px; }
.ex-wallet-cur button {
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--ex-line);
    color: var(--ex-text-2);
    font-size: 12px; font-weight: 700;
    transition: border-color .15s, color .15s, background .15s;
}
.ex-wallet-cur button:hover { border-color: var(--ex-line-2); color: var(--ex-text-1); }
.ex-wallet-cur button.active {
    border-color: var(--ex-primary-line);
    background: var(--ex-primary-soft);
    color: var(--ex-primary);
}

.ex-wallet-point {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 14px 4px;
    font-size: 12px; color: var(--ex-text-3);
}
.ex-wallet-point strong { color: var(--ex-text-1); font-variant-numeric: tabular-nums; }

/* 환산 시세. 포인트 줄과 같은 모양이되 강조하지 않는다 —
   회원이 찾아 보는 값이 아니라, 두 금액이 왜 다른지 물었을 때 답이 되는 값이다. */
.ex-wallet-rate {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 8px 14px 4px;
    font-size: 12px; color: var(--ex-text-3);
}
.ex-wallet-rate i { margin-right: 5px; font-size: 12px; opacity: .8; }
.ex-wallet-rate strong { color: var(--ex-text-2); font-weight: 600; font-variant-numeric: tabular-nums; }

/* 좁은 화면에서는 환산 줄과 입금 버튼부터 접는다.
   잔액 자체는 어느 폭에서도 남아야 한다 — 그것을 보러 헤더를 보는 것이다. */
@media (max-width: 720px) {
    .ex-wallet { margin-left: 10px; }
    .ex-wallet-sub { display: none; }
    .ex-deposit { display: none; }
}
@media (max-width: 420px) {
    .ex-wallet-coin { display: none; }
}

/* 잔액 덩어리를 헤더 가운데로 민다.
 *
 * .ex-header-right 에도 margin-left:auto 가 걸려 있어, 양쪽 auto 가 남는 공간을
 * 반씩 나눠 갖는다. 결과적으로 잔액이 로고와 우측 아이콘 사이 한가운데에 선다 —
 * 로고 바로 옆에 붙여 두면 가운데가 통째로 비어 헤더가 헐거워 보인다. */
.ex-wallet { margin-left: auto; }

/* 지갑이 10종이라 목록에 스크롤이 생긴다. 기본 스크롤바는 폭이 굵어
 * 좁은 패널 안에서 잔액 숫자를 밀어낸다. 사이드바와 같은 얇은 것으로 맞춘다. */
.ex-wallet-list { max-height: 268px; scrollbar-width: thin; }
.ex-wallet-list::-webkit-scrollbar { width: 6px; }
.ex-wallet-list::-webkit-scrollbar-track { background: transparent; }
.ex-wallet-list::-webkit-scrollbar-thumb { background: var(--ex-surface-3); border-radius: 3px; }

/* =====================================================================
 * 표시 통화 고르기 — 다시 잡음
 *
 * 288px 안에 칩 다섯을 흘려 두니 두 줄로 접히면서 심볼이 코드에 묻혔다.
 * 코드는 KRW·JPY·THB 가 전부 세 글자라 흘려 보면 구분이 안 되는데,
 * 심볼은 ₩·¥·฿ 한 글자로 갈린다. 그 한 글자를 배지로 앞에 세운다.
 * ===================================================================== */

.ex-wallet-menu { width: min(460px, calc(100vw - 32px)); }

.ex-wallet-cur {
    /* 두 칸씩 떨어뜨린다. 흘려 두면(flex-wrap) 통화마다 폭이 달라
       줄바꿈 위치가 들쭉날쭉해 목록으로 안 읽힌다. */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    padding: 4px 12px 12px;
}
.ex-wallet-cur button {
    display: flex; align-items: center; gap: 9px;
    height: 46px;
    padding: 0 10px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    color: var(--ex-text-2);
    transition: border-color .15s, color .15s, background .15s;
}
.ex-wallet-cur button:hover { border-color: var(--ex-line-2); color: var(--ex-text-1); }
.ex-wallet-cur button:hover .ex-cur-sym { background: var(--ex-surface-3); color: var(--ex-text-1); }

.ex-cur-sym {
    flex: none;
    width: 30px; height: 30px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--ex-surface-2);
    color: var(--ex-text-2);
    /* 심볼 하나를 크게 세운다. 여기가 눈이 먼저 닿는 자리다. */
    font-size: 16px; font-weight: 800; line-height: 1;
    transition: background .15s, color .15s;
}
.ex-cur-code { font-size: 14px; font-weight: 800; letter-spacing: .2px; }
.ex-wallet-cur button i { margin-left: auto; font-size: 10px; }

.ex-wallet-cur button.active {
    border-color: var(--ex-primary-line);
    background: var(--ex-primary-soft);
    color: var(--ex-primary);
}
.ex-wallet-cur button.active .ex-cur-sym,
.ex-wallet-cur button.active:hover .ex-cur-sym {
    background: var(--ex-primary);
    color: #fff;
}

@media (max-width: 420px) { .ex-wallet-menu { width: 300px; } }

/* =====================================================================
 * 지갑 목록 — 통화 칸과 같은 크기로 맞춤
 *
 * 통화 쪽만 키워 두니 위아래 무게가 어긋났다. 같은 드롭다운 안에서
 * 위는 촘촘하고 아래는 큼직하면 위쪽이 "덜 중요한 것" 으로 읽힌다.
 * 실제로는 지갑이 재화가 오가는 곳이라 더 중요하다.
 * ===================================================================== */

.ex-wallet-list button {
    gap: 9px;
    height: 46px;
    padding: 0 8px;
    font-size: 14px;
}
.ex-wallet-list .ex-wallet-code {
    min-width: 0;
    font-size: 14px; font-weight: 800; letter-spacing: .2px;
}
.ex-wallet-list .ex-wallet-bal { font-size: 14px; font-weight: 700; }

/* 코인 배지는 파랑, 법정통화는 회색. 색만으로도 둘이 갈린다. */
.ex-wallet-list .ex-cur-sym.coin { color: var(--ex-info); }
.ex-wallet-list button:hover .ex-cur-sym { background: var(--ex-surface-3); }
.ex-wallet-list button.active .ex-cur-sym,
.ex-wallet-list button.active:hover .ex-cur-sym {
    background: var(--ex-primary);
    color: #fff;
}

/* 한 칸이 커진 만큼 보이는 지갑 수가 줄어 스크롤이 길어진다. 일곱 칸까지 보인다. */
.ex-wallet-list { max-height: 322px; padding: 0 12px; }

/* 목록과 통화 칸이 둘 다 커져 낮은 화면에서는 패널이 화면 밖으로 나간다.
   패널 자체에도 한계를 둬서, 넘치면 패널이 스크롤되게 한다 —
   잘려 나가면 아래쪽 표시 통화를 아예 못 고른다. */
/* 지갑이 많으면 목록만 스크롤된다.
 *
 * 창 전체를 스크롤시키면 제목과 입출금 버튼이 같이 밀려 올라가
 * 열자마자 무슨 창인지 모르고, 아래 버튼도 찾아 내려가야 한다.
 * 창은 고정하고 가운데 목록만 움직인다. */
.ex-wallet-menu {
    display: flex; flex-direction: column;
    max-height: calc(100vh - 48px);
    overflow: hidden;
}
.ex-wallet-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
}
.ex-wallet-list::-webkit-scrollbar { width: 6px; }
.ex-wallet-list::-webkit-scrollbar-track { background: transparent; }
.ex-wallet-list::-webkit-scrollbar-thumb { background: var(--ex-surface-3); border-radius: 3px; }

/* 머리와 발은 고정한다. */
.ex-wallet-head, .ex-wallet-sec, .ex-wallet-point,
.ex-wallet-actions, .ex-wallet-settings { flex: 0 0 auto; }

/* =====================================================================
 * 헤더 잔액 두 줄 간격 — 다시 잡음
 *
 * line-height 1.15 로는 두 줄이 붙어 "470,000" 아래에 "≈ ¥ 53,523" 이
 * 겹쳐 보였다. 숫자는 어센더·디센더가 거의 없어 줄 높이만으로는 사이가 안 벌어진다.
 * 줄 높이를 1 로 눌러 글자 크기 그대로 만들고, 사이는 gap 으로 명시한다.
 * ===================================================================== */

.ex-wallet-btn { height: 44px; padding: 0 12px 0 8px; }

.ex-wallet-nums {
    gap: 4px;
    line-height: 1;
}
.ex-wallet-main { font-size: 14px; line-height: 1; }
.ex-wallet-sub  { font-size: 12px; line-height: 1; }

/* 잔액 pill 이 커진 만큼 입금 버튼도 올린다. 옆에 나란히 선 둘의 높이가
   4px 이상 어긋나면 붙여 놓은 한 덩어리로 안 읽힌다. */
.ex-deposit { height: 40px; padding: 0 16px; font-size: 14px; }

/* 환산 줄을 한 단계 밝게 올린다.
 *
 * --ex-text-3 는 가장 흐린 색이라 11px 로 쓰면 윗줄 숫자의 그림자처럼 읽힌다.
 * 두 줄이 겹쳐 보이는 데는 간격뿐 아니라 이것도 한몫했다.
 * ≈ 기호가 이미 "환산값" 을 말해 주므로 색까지 죽일 이유가 없다. */
.ex-wallet-nums { gap: 5px; }
.ex-wallet-sub { color: var(--ex-text-2); }

/* =====================================================================
 * 크립토 입금
 *
 * 이 화면에서 가장 중요한 글자는 금액이 아니라 <b>네트워크</b>다.
 * 회원이 다른 네트워크로 보내면 코인이 사라지고 되돌릴 방법이 없다.
 * 그래서 코인 카드에도, 주소 화면 맨 위에도 네트워크를 크게 둔다.
 * ===================================================================== */

.ex-deposit-page { max-width: 620px; margin: 0 auto; }

.ex-dep {
    padding: 22px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
}
.ex-dep[hidden] { display: none; }

/* ── 단계 표시 ─────────────────────────────────────────────────────── */
.ex-dep-step { display: flex; align-items: center; gap: 9px; margin: 4px 0 12px; }
.ex-dep-step:not(:first-child) { margin-top: 26px; }
.ex-dep-step h3 { margin: 0; font-size: 14px; font-weight: 800; color: var(--ex-text-1); }
.ex-dep-num {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--ex-primary-soft);
    color: var(--ex-primary);
    font-size: 12px; font-weight: 800;
}

/* ── 코인 고르기 ───────────────────────────────────────────────────── */
.ex-dep-coins {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 8px;
}
.ex-dep-coin {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 11px 12px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface-2);
    text-align: left;
    transition: border-color .15s, background .15s;
}
.ex-dep-coin:hover { border-color: var(--ex-line-2); }
.ex-dep-coin .ex-cur-sym { margin-bottom: 5px; }
.ex-dep-coin-name { font-size: 14px; font-weight: 800; color: var(--ex-text-1); }

/* 네트워크는 작아도 <b>반드시 보여야</b> 한다. 흐리게 두되 지우지 않는다. */
.ex-dep-coin-net { font-size: 10px; color: var(--ex-text-3); line-height: 1.3; }

.ex-dep-coin.active {
    border-color: var(--ex-primary-line);
    background: var(--ex-primary-soft);
}
.ex-dep-coin.active .ex-dep-coin-name { color: var(--ex-primary); }
.ex-dep-coin.active .ex-dep-coin-net { color: var(--ex-text-2); }
.ex-dep-coin.active .ex-cur-sym { background: var(--ex-primary); color: #fff; }

/* ── 금액 ─────────────────────────────────────────────────────────── */
.ex-dep-input {
    display: flex; align-items: center; gap: 10px;
    height: 56px;
    padding: 0 16px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface-2);
    transition: border-color .15s, box-shadow .15s;
}
.ex-dep-input:focus-within {
    border-color: var(--ex-primary-line);
    box-shadow: 0 0 0 3px var(--ex-primary-soft);
}
.ex-dep-cur {
    flex: none;
    font-size: 14px; font-weight: 800;
    color: var(--ex-text-3);
    white-space: nowrap;
}
.ex-dep-input input {
    width: 100%;
    border: 0; background: transparent; outline: none;
    color: var(--ex-text-1);
    font-family: inherit;
    /* 금액은 크게. 0 을 몇 개 쳤는지 세게 만들면 자리수를 틀린다. */
    font-size: 24px; font-weight: 800;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ex-dep-input input::placeholder { color: var(--ex-text-3); font-weight: 700; }

.ex-dep-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; margin-bottom: 10px; }
.ex-dep-presets button {
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--ex-line);
    color: var(--ex-text-2);
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s, color .15s;
}
.ex-dep-presets button:hover { border-color: var(--ex-primary-line); color: var(--ex-primary); }
.ex-dep-presets .ex-dep-clear { margin-left: auto; color: var(--ex-text-3); border-color: transparent; }
.ex-dep-presets .ex-dep-clear:hover { color: var(--ex-danger); border-color: transparent; }

.ex-dep-est {
    margin: 12px 2px 0;
    font-size: 14px; color: var(--ex-text-2);
}
.ex-dep-est[hidden], .ex-dep-warn[hidden] { display: none; }
.ex-dep-est b { color: var(--ex-primary); }

.ex-dep-warn {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: var(--ex-radius-sm);
    background: rgba(255, 176, 32, .10);
    border: 1px solid rgba(255, 176, 32, .28);
    color: var(--ex-warning);
    font-size: 12px; line-height: 1.5;
}

#depSubmit { margin-top: 22px; }
#depSubmit:disabled { opacity: .38; cursor: not-allowed; }

.ex-dep-note {
    margin: 14px 2px 0;
    color: var(--ex-text-3);
    font-size: 12px; line-height: 1.6;
}

/* ── 주소 화면 ─────────────────────────────────────────────────────── */

/* 경고를 맨 위에 둔다. 주소를 먼저 보면 그것만 복사하고 스크롤을 안 한다. */
.ex-dep-alert {
    display: flex; gap: 12px;
    padding: 14px 16px;
    margin-bottom: 20px;
    border-radius: var(--ex-radius-sm);
    background: rgba(255, 63, 108, .09);
    border: 1px solid rgba(255, 63, 108, .30);
}
.ex-dep-alert > i { color: var(--ex-danger); font-size: 16px; margin-top: 2px; }
.ex-dep-alert strong { display: block; color: var(--ex-danger); font-size: 14px; }
.ex-dep-alert p { margin: 4px 0 0; color: var(--ex-text-2); font-size: 12px; line-height: 1.6; }
.ex-dep-alert b { color: var(--ex-text-1); }

.ex-dep-qr { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 18px; }
.ex-dep-qr img {
    flex: none;
    width: 200px; height: 200px;
    padding: 10px;
    border-radius: var(--ex-radius-sm);
    /* QR 은 흰 바탕이어야 한다. 어두운 화면에 맞춰 반전시키면 못 읽는 스캐너가 있다. */
    background: #fff;
}
.ex-dep-qr-side { flex: 1; display: flex; flex-direction: column; gap: 14px; }

.ex-dep-field { margin-bottom: 14px; }
.ex-dep-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px; font-weight: 800;
    letter-spacing: .4px; text-transform: uppercase;
    color: var(--ex-text-3);
}
.ex-dep-field strong {
    color: var(--ex-text-1);
    font-size: 16px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ex-dep-qr-side .ex-dep-field { margin-bottom: 0; }

/* 메모가 빠지면 입금이 자동 인식되지 않는다. 라벨부터 눈에 띄게 둔다. */
.ex-dep-required { color: var(--ex-warning) !important; }
.ex-dep-required::after { content: " *"; }

.ex-dep-copy {
    display: flex; align-items: stretch; gap: 8px;
}
.ex-dep-copy code {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface-2);
    color: var(--ex-text-1);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    /* 주소는 길다. 줄여서 보여 주면 회원이 눈으로 대조할 수 없다. 통째로 접어서 보인다. */
    word-break: break-all;
}
.ex-dep-copy button {
    flex: none;
    padding: 0 14px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface-2);
    color: var(--ex-text-2);
    font-size: 12px; font-weight: 700;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.ex-dep-copy button:hover { border-color: var(--ex-primary-line); color: var(--ex-primary); }
.ex-dep-copy button.copied { border-color: var(--ex-primary-line); color: var(--ex-primary); background: var(--ex-primary-soft); }

.ex-dep-hint { margin: 6px 2px 0; color: var(--ex-text-3); font-size: 12px; line-height: 1.5; }

.ex-dep-actions { display: flex; gap: 8px; margin-top: 20px; }
.ex-dep-actions .ex-btn { flex: 1; }

@media (max-width: 520px) {
    .ex-dep { padding: 16px; }
    .ex-dep-qr { flex-direction: column; align-items: center; }
    .ex-dep-qr-side { width: 100%; flex-direction: row; justify-content: space-between; gap: 10px; }
    .ex-dep-copy { flex-direction: column; }
}

/* 아직 누를 수 없는 버튼은 확실히 죽여 둔다.
 * 네온 배경은 opacity 를 낮춰도 여전히 눈에 띄어서, 회원이 눌러 보고
 * "왜 반응이 없지" 하게 된다. 색 자체를 빼는 편이 정직하다. */
#depSubmit:disabled,
#depSubmit:disabled:hover {
    background: var(--ex-surface-3);
    color: var(--ex-text-3);
    box-shadow: none;
    opacity: 1;
}

/* =====================================================================
 * 코인 출금
 *
 * 입금 화면과 골격은 같지만 위험이 반대 방향이다. 입금은 틀려도 우리 쪽에서
 * 다시 안내할 수 있지만, <b>출금은 잘못 보내면 끝이다.</b>
 * 그래서 이 화면은 주소 입력칸을 가장 크게 두고, 경고를 그 위에 얹고,
 * 신청 버튼은 세 조건이 모두 채워지기 전까지 색을 뺀 채로 둔다.
 *
 * 잔액은 코인 카드 안에 같이 박는다 — 고르고 나서야 "얼마 있더라" 를
 * 다시 찾게 하면 회원이 위로 스크롤을 반복한다.
 * ===================================================================== */

.ex-withdraw-page { max-width: 620px; margin: 0 auto; }

.ex-wd {
    padding: 22px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
}

/* ── 단계 표시 ─────────────────────────────────────────────────────── */
.ex-wd-step { display: flex; align-items: center; gap: 9px; margin: 4px 0 12px; }
.ex-wd-step:not(:first-child) { margin-top: 26px; }
.ex-wd-step h3 { margin: 0; font-size: 14px; font-weight: 800; color: var(--ex-text-1); }
.ex-wd-num {
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--ex-primary-soft);
    color: var(--ex-primary);
    font-size: 12px; font-weight: 800;
}

/* ── 코인 고르기 ───────────────────────────────────────────────────── */
.ex-wd-coins {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(146px, 1fr));
    gap: 8px;
}
.ex-wd-coin {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 11px 12px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface-2);
    cursor: pointer;
    text-align: left;
    transition: border-color .12s, background .12s;
}
.ex-wd-coin:hover { border-color: var(--ex-line-2); }
.ex-wd-coin .ex-cur-sym { margin-bottom: 5px; }
.ex-wd-coin-name { font-size: 14px; font-weight: 800; color: var(--ex-text-1); }
.ex-wd-coin-net { font-size: 10px; color: var(--ex-text-3); line-height: 1.3; }
/* 잔액은 카드 안에 둔다. 고른 뒤에 위로 되돌아가 확인하게 두지 않는다. */
.ex-wd-coin-bal {
    margin-top: 5px;
    font-size: 12px; font-weight: 700;
    color: var(--ex-text-2);
    word-break: break-all;
}
.ex-wd-coin.active {
    border-color: var(--ex-primary-line);
    background: var(--ex-primary-soft);
}
.ex-wd-coin.active .ex-wd-coin-name { color: var(--ex-primary); }
.ex-wd-coin.active .ex-wd-coin-net,
.ex-wd-coin.active .ex-wd-coin-bal { color: var(--ex-text-2); }
.ex-wd-coin.active .ex-cur-sym { background: var(--ex-primary); color: #fff; }

/* ── 수량 ──────────────────────────────────────────────────────────── */
.ex-wd-input {
    display: flex; align-items: center; gap: 8px;
    padding: 0 10px 0 14px;
    height: 52px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface-2);
}
.ex-wd-input:focus-within {
    border-color: var(--ex-primary-line);
    background: var(--ex-surface-3);
}
.ex-wd-input input {
    flex: 1; min-width: 0;
    height: 100%;
    border: 0; background: transparent; outline: none;
    color: var(--ex-text-1);
    font-size: 20px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ex-wd-input input::placeholder { color: var(--ex-text-3); font-weight: 700; }
.ex-wd-input input:disabled { cursor: not-allowed; }
.ex-wd-unit {
    font-size: 12px; font-weight: 800;
    color: var(--ex-text-3);
    white-space: nowrap;
}
.ex-wd-max {
    height: 30px; padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--ex-line-2);
    background: transparent;
    color: var(--ex-text-2);
    font-size: 12px; font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .12s, color .12s;
}
.ex-wd-max:hover:not(:disabled) { border-color: var(--ex-primary-line); color: var(--ex-primary); }
.ex-wd-max:disabled { opacity: .4; cursor: not-allowed; }

.ex-wd-avail {
    margin: 9px 2px 0;
    font-size: 12px; color: var(--ex-text-3);
}
.ex-wd-avail b { color: var(--ex-text-1); margin-left: 4px; }

/* 수수료·실수령액. 정책이 정해지기 전이라 지금은 0 이 뜬다. */
.ex-wd-quote {
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: var(--ex-radius-sm);
    border: 1px dashed var(--ex-line-2);
    background: var(--ex-surface-2);
}
.ex-wd-quote[hidden] { display: none; }
.ex-wd-quote-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 12px; color: var(--ex-text-3);
}
.ex-wd-quote-row + .ex-wd-quote-row { margin-top: 7px; }
.ex-wd-quote-row b { color: var(--ex-text-2); font-weight: 700; }
.ex-wd-quote-row.total {
    padding-top: 8px; margin-top: 8px;
    border-top: 1px solid var(--ex-line);
    font-size: 14px;
}
.ex-wd-quote-row.total b { color: var(--ex-primary); font-size: 16px; font-weight: 800; }
.ex-wd-quote-play {
    margin: 7px 0 0;
    text-align: right;
    font-size: 12px; color: var(--ex-text-3);
}
.ex-wd-quote-play[hidden] { display: none; }

.ex-wd-warn {
    margin: 10px 0 0;
    padding: 9px 12px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid rgba(255, 176, 32, .28);
    background: rgba(255, 176, 32, .10);
    color: var(--ex-warning);
    font-size: 12px; line-height: 1.55;
}
.ex-wd-warn[hidden] { display: none; }

/* ── 주소 ──────────────────────────────────────────────────────────
 * 이 화면에서 가장 위험한 입력이다. 경고를 입력칸 위에 두는 이유는,
 * 아래에 두면 붙여 넣고 바로 버튼을 눌러 읽히지 않기 때문이다. */
.ex-wd-alert {
    display: flex; gap: 11px;
    padding: 13px 14px;
    margin-bottom: 12px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid rgba(255, 63, 108, .30);
    background: rgba(255, 63, 108, .09);
}
.ex-wd-alert > i { color: var(--ex-danger); font-size: 16px; margin-top: 2px; }
.ex-wd-alert strong { display: block; color: var(--ex-danger); font-size: 14px; }
.ex-wd-alert p { margin: 4px 0 0; color: var(--ex-text-2); font-size: 12px; line-height: 1.6; }
.ex-wd-alert b { color: var(--ex-text-1); }

.ex-wd-address input {
    width: 100%;
    height: 48px;
    padding: 0 14px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface-2);
    color: var(--ex-text-1);
    /* 주소는 눈으로 대조하게 된다. 고정폭이 아니면 l·1·I 가 구분되지 않는다. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 14px;
    outline: none;
}
.ex-wd-address input:focus { border-color: var(--ex-primary-line); background: var(--ex-surface-3); }
.ex-wd-address input:disabled { cursor: not-allowed; }
.ex-wd-hint { margin: 6px 2px 0; color: var(--ex-text-3); font-size: 12px; line-height: 1.5; }

.ex-wd-address-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.ex-wd-chip {
    height: 30px; padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--ex-line-2);
    background: transparent;
    color: var(--ex-text-2);
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: border-color .12s, color .12s, background .12s;
}
.ex-wd-chip:hover { border-color: var(--ex-primary-line); color: var(--ex-primary); }
.ex-wd-chip.copied { border-color: var(--ex-primary-line); color: var(--ex-primary); background: var(--ex-primary-soft); }
.ex-wd-chip[hidden] { display: none; }
.ex-wd-chip:disabled { opacity: .5; cursor: not-allowed; }

.ex-wd-note {
    margin: 14px 0 0;
    color: var(--ex-text-3);
    font-size: 12px; line-height: 1.6;
    text-align: center;
}

/* ── 대기 중 ───────────────────────────────────────────────────────
 * 폼 대신 이것만 뜬다. 여러 건을 동시에 걸 수 없으니
 * 채워 넣게 두고 마지막에 거절하는 것보다 아예 안 보이는 편이 낫다. */
.ex-wd-pending { text-align: center; }
.ex-wd-pending-icon {
    width: 56px; height: 56px; margin: 4px auto 14px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--ex-primary-soft);
    color: var(--ex-primary);
    font-size: 24px;
}
.ex-wd-pending h3 { margin: 0; font-size: 16px; font-weight: 800; color: var(--ex-text-1); }
.ex-wd-pending-body {
    margin: 8px auto 0; max-width: 380px;
    color: var(--ex-text-3); font-size: 12px; line-height: 1.65;
}
.ex-wd-pending-rows {
    margin-top: 20px;
    padding: 16px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface-2);
    text-align: left;
}
.ex-wd-field + .ex-wd-field { margin-top: 13px; }
.ex-wd-field label {
    display: block; margin-bottom: 4px;
    color: var(--ex-text-3);
    font-size: 12px; font-weight: 700;
}
.ex-wd-field strong, .ex-wd-field time {
    display: block;
    color: var(--ex-text-1);
    font-size: 14px; font-weight: 800;
}
.ex-wd-field code {
    display: block;
    color: var(--ex-text-2);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    word-break: break-all;
}
.ex-wd-actions { display: flex; gap: 8px; margin-top: 20px; }
.ex-wd-actions .ex-btn { flex: 1; }

/* ── 주소록 ────────────────────────────────────────────────────────
 * 출금과 별개다. 잔액이 없는 코인도 미리 등록해 둘 수 있어야
 * 정작 출금하려는 순간에 34 자를 손으로 옮기지 않는다. */
.ex-wd-book {
    margin-top: 18px;
    padding: 20px 22px 18px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
}
.ex-wd-book-head h3 {
    margin: 0; display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 800; color: var(--ex-text-1);
}
.ex-wd-book-head h3 i { color: var(--ex-text-3); font-size: 14px; }
.ex-wd-book-head p { margin: 6px 0 0; color: var(--ex-text-3); font-size: 12px; line-height: 1.6; }

.ex-wd-book-list { margin-top: 16px; }
.ex-wd-book-row {
    display: grid;
    grid-template-columns: 132px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
}
.ex-wd-book-row + .ex-wd-book-row { border-top: 1px solid var(--ex-line); }
.ex-wd-book-coin { display: flex; align-items: center; gap: 9px; min-width: 0; }
.ex-wd-book-coin strong { display: block; font-size: 14px; font-weight: 800; color: var(--ex-text-1); }
.ex-wd-book-net { display: block; font-size: 10px; color: var(--ex-text-3); }
.ex-wd-book-row input {
    width: 100%; min-width: 0;
    height: 38px;
    padding: 0 12px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface-2);
    color: var(--ex-text-1);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
    outline: none;
}
.ex-wd-book-row input:focus { border-color: var(--ex-primary-line); background: var(--ex-surface-3); }
.ex-wd-book-row .ex-btn.copied {
    border-color: var(--ex-primary-line);
    color: var(--ex-primary);
    background: var(--ex-primary-soft);
}

@media (max-width: 560px) {
    .ex-wd, .ex-wd-book { padding: 16px; }
    /* 좁은 화면에서 주소칸을 한 줄 통째로 준다. 세 칸으로 쪼개면
     * 34 자짜리 주소가 여덟 자만 보인다. */
    .ex-wd-book-row {
        grid-template-columns: 1fr auto;
        grid-template-areas: "coin  button" "input input";
        row-gap: 8px;
    }
    .ex-wd-book-coin { grid-area: coin; }
    .ex-wd-book-row input { grid-area: input; }
    .ex-wd-book-row .ex-btn { grid-area: button; }
}

/* 아직 누를 수 없는 버튼은 확실히 죽여 둔다.
 * 네온 배경은 opacity 를 낮춰도 여전히 눈에 띄어서, 회원이 눌러 보고
 * "왜 반응이 없지" 하게 된다. 색 자체를 빼는 편이 정직하다. */
#wdSubmit { margin-top: 22px; }
#wdSubmit:disabled,
#wdSubmit:disabled:hover {
    background: var(--ex-surface-3);
    color: var(--ex-text-3);
    box-shadow: none;
    opacity: 1;
}

/* =====================================================================
 * 게임사 카드 (라이브 로비 · 슬롯 게임사)
 *
 * 로고가 없다. 이름 첫 글자 배지로 대신하고 색을 여덟 갈래로 돌린다 —
 * 서른 개가 넘는 목록에서 전부 같은 색이면 눈이 미끄러진다.
 * 색은 이름에서 뽑으므로 같은 게임사는 언제나 같은 색이다.
 * ===================================================================== */

.ex-vendor-lead {
    margin: -6px 0 18px;
    color: var(--ex-text-3);
    font-size: 12px; line-height: 1.6;
}

.ex-vendor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
    gap: 10px;
}

.ex-vendor {
    display: flex; align-items: center; gap: 13px;
    padding: 14px 16px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
    text-decoration: none;
    transition: border-color .14s, background .14s, transform .14s;
}
.ex-vendor:hover {
    border-color: var(--ex-accent-line);
    background: var(--ex-surface-2);
    transform: translateY(-1px);
}
.ex-vendor:hover .ex-vendor-go { color: var(--ex-accent); }

.ex-vendor-badge {
    width: 42px; height: 42px; flex: 0 0 42px;
    display: grid; place-items: center;
    border-radius: 12px;
    font-size: 16px; font-weight: 800; color: #fff;
}
.ex-vendor-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ex-vendor-name {
    font-size: 14px; font-weight: 800; color: var(--ex-text-1);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ex-vendor-count { font-size: 12px; color: var(--ex-text-3); }
.ex-vendor-go {
    flex: 0 0 auto;
    font-size: 12px; font-weight: 700;
    color: var(--ex-text-3);
    white-space: nowrap;
    transition: color .14s;
}
.ex-vendor-go i { font-size: 10px; margin-left: 3px; }

/* 여덟 갈래. 채도를 낮춰 배지끼리는 구별되되 화면이 알록달록해지지는 않게 한다. */
.ex-vendor.tone0 .ex-vendor-badge { background: linear-gradient(135deg, #1E4FA8, #10306B); }
.ex-vendor.tone1 .ex-vendor-badge { background: linear-gradient(135deg, #2ee6d6, #1fb8ab); }
.ex-vendor.tone2 .ex-vendor-badge { background: linear-gradient(135deg, #ff6b9d, #d43f6f); }
.ex-vendor.tone3 .ex-vendor-badge { background: linear-gradient(135deg, #ffb020, #d98c00); }
.ex-vendor.tone4 .ex-vendor-badge { background: linear-gradient(135deg, #38bdf8, #0d8ecf); }
.ex-vendor.tone5 .ex-vendor-badge { background: linear-gradient(135deg, #8fd14f, #5fa321); }
.ex-vendor.tone6 .ex-vendor-badge { background: linear-gradient(135deg, #5B8FE0, #2A4E96); }
.ex-vendor.tone7 .ex-vendor-badge { background: linear-gradient(135deg, #ff8a5b, #d95f2f); }

/* 목록 제목 옆의 개수. 몇 개짜리 목록인지 먼저 알면 훑을지 검색할지 정한다. */
.ex-sec-count {
    margin-left: 8px; padding: 2px 9px;
    border-radius: 999px;
    background: var(--ex-accent-soft);
    color: var(--ex-accent);
    font-size: 12px; font-weight: 800;
}

@media (max-width: 560px) {
    .ex-vendor-grid { grid-template-columns: 1fr; }
}


/* =====================================================================
 * 지갑 개요 · 고객센터 · 책임 게임
 * ===================================================================== */

.ex-wpage, .ex-support-page, .ex-legal { max-width: 720px; margin: 0 auto; }

/* ── 지갑 개요 ─────────────────────────────────────────────────────
 * 쓰는 지갑의 잔액이 주인공이다. 나머지는 그 아래 목록으로 내린다. */
.ex-wpage-hero {
    padding: 26px 24px 22px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-primary-line);
    background: var(--ex-primary-soft);
    text-align: center;
}
.ex-wpage-label { font-size: 12px; color: var(--ex-text-3); }
.ex-wpage-amount {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 8px; flex-wrap: wrap;
}
.ex-wpage-amount strong {
    font-size: 28px; font-weight: 800; color: var(--ex-text-1);
    word-break: break-all;
}
.ex-wpage-code { font-size: 14px; font-weight: 800; color: var(--ex-text-3); }
.ex-wpage-approx { margin: 6px 0 0; font-size: 12px; color: var(--ex-text-3); }

/* 환산 시세. 환산 금액보다 한 단계 더 물러나 있어야 한다 —
   회원이 먼저 읽어야 할 것은 자기 돈이지 시세가 아니다. */
.ex-wpage-rate {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 8px 0 0;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--ex-surface-2);
    font-size: 12px; color: var(--ex-text-3);
    font-variant-numeric: tabular-nums;
}
.ex-wpage-rate i { font-size: 10px; opacity: .8; }
.ex-wpage-actions {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
    max-width: 340px; margin: 20px auto 0;
}
.ex-wpage-actions .ex-btn { width: 100%; gap: 6px; }

.ex-wpage-h { margin: 28px 0 4px; font-size: 14px; font-weight: 800; color: var(--ex-text-1); }
.ex-wpage-help { margin: 0 0 12px; font-size: 12px; color: var(--ex-text-3); }

.ex-wpage-list { display: flex; flex-direction: column; gap: 8px; }
.ex-wpage-row {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
    cursor: pointer; text-align: left; width: 100%;
    transition: border-color .12s, background .12s;
}
.ex-wpage-row:hover { border-color: var(--ex-line-2); }
.ex-wpage-row.active { border-color: var(--ex-primary-line); background: var(--ex-primary-soft); }
.ex-wpage-row-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ex-wpage-row-name strong { font-size: 14px; font-weight: 800; color: var(--ex-text-1); }
.ex-wpage-row-name span { font-size: 12px; color: var(--ex-text-3); }
.ex-wpage-row-amt { font-size: 14px; font-weight: 700; color: var(--ex-text-2); word-break: break-all; }
.ex-wpage-check { color: var(--ex-primary); font-size: 14px; }
.ex-wpage-caret { color: var(--ex-text-3); font-size: 12px; opacity: .5; }

.ex-wpage-point {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 14px; padding: 13px 16px;
    border-radius: var(--ex-radius-sm);
    border: 1px dashed var(--ex-line-2);
    font-size: 14px; color: var(--ex-text-3);
}
.ex-wpage-point strong { color: var(--ex-text-1); font-weight: 800; }
.ex-wpage-foot { margin-top: 22px; text-align: center; }
.ex-wpage-foot a { color: var(--ex-text-3); font-size: 12px; text-decoration: none; }
.ex-wpage-foot a:hover { color: var(--ex-primary); }

/* ── 고객센터 ──────────────────────────────────────────────────────
 * 문의 창구가 FAQ 위에 온다. 급한 회원은 FAQ 를 뒤질 상황이 아니다. */
.ex-support-contact {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
    margin-bottom: 26px;
}
.ex-support-card {
    display: flex; gap: 13px;
    padding: 16px 18px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
}
.ex-support-icon {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--ex-primary-soft); color: var(--ex-primary);
    font-size: 16px;
}
.ex-support-card h3 { margin: 0 0 4px; font-size: 12px; font-weight: 800; color: var(--ex-text-3); }
.ex-support-card a, .ex-support-card strong {
    display: block; font-size: 14px; font-weight: 700;
    color: var(--ex-text-1); text-decoration: none; word-break: break-all;
}
.ex-support-card a:hover { color: var(--ex-primary); }
.ex-support-card p { margin: 5px 0 0; font-size: 12px; color: var(--ex-text-3); line-height: 1.55; }

.ex-support-h { margin: 0 0 12px; font-size: 14px; font-weight: 800; color: var(--ex-text-1); }
.ex-support-foot {
    margin-top: 24px; text-align: center;
    font-size: 12px; color: var(--ex-text-3);
}
.ex-support-foot a { color: var(--ex-primary); text-decoration: none; margin-left: 4px; }

/* ── 책임 게임 ─────────────────────────────────────────────────────
 * 읽히라고 만든 화면이다. 줄 간격을 넉넉히 두고 한 줄을 짧게 끊는다. */
.ex-legal-lead {
    margin: 0 0 22px;
    font-size: 14px; line-height: 1.75; color: var(--ex-text-2);
}
.ex-legal-sec {
    padding: 20px 22px;
    margin-bottom: 14px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
}
/* 미성년자 항목만 색을 준다. 다른 모든 것에 앞서는 선이다. */
.ex-legal-sec.warn { border-color: rgba(255,63,108,.30); background: rgba(255,63,108,.06); }
.ex-legal-sec.warn h3 { color: var(--ex-danger); }
.ex-legal-sec h3 {
    margin: 0 0 10px;
    display: flex; align-items: center; gap: 9px;
    font-size: 14px; font-weight: 800; color: var(--ex-text-1);
}
.ex-legal-sec h3 i { font-size: 14px; opacity: .8; }
.ex-legal-sec p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--ex-text-2); }
/* 전역 리셋이 마커를 지워 놓아 여기서 되살린다.
 * 마커가 없으면 여러 줄짜리 항목이 문단처럼 붙어 읽힌다. */
.ex-legal-list { margin: 12px 0 0; padding-left: 22px; list-style: disc; }
.ex-legal-list li::marker { color: var(--ex-primary); }
.ex-legal-list li { margin-bottom: 8px; font-size: 14px; line-height: 1.7; color: var(--ex-text-2); }
/* 약관 본문은 콘솔이 쓴 HTML 이다. 문단·목록이 붙어 나오지 않게 여백만 준다. */
.ex-legal-body { font-size: 14px; line-height: 1.8; color: var(--ex-text-2); }
.ex-legal-body p { margin: 0 0 12px; }
.ex-legal-body ul, .ex-legal-body ol { margin: 0 0 12px; padding-left: 22px; list-style: revert; }
.ex-legal-body li { margin-bottom: 6px; }
.ex-legal-body strong, .ex-legal-body b { color: var(--ex-text-1); }
.ex-legal-body a { color: var(--ex-primary); }
.ex-legal-body table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.ex-legal-body th, .ex-legal-body td { border: 1px solid var(--ex-line); padding: 8px 10px; }

.ex-legal-updated {
    margin: -8px 0 20px;
    font-size: 12px; color: var(--ex-text-3);
}
.ex-legal-updated i { margin-right: 5px; }

.ex-legal-note { margin-top: 12px !important; font-size: 12px !important; color: var(--ex-text-3) !important; }
.ex-legal-sec .ex-btn { margin-top: 16px; }

@media (max-width: 560px) {
    .ex-support-contact { grid-template-columns: 1fr; }
    .ex-wpage-actions { grid-template-columns: 1fr; }
    .ex-wpage-hero { padding: 20px 16px; }
    .ex-legal-sec { padding: 16px; }
}


/* =====================================================================
 * 비밀번호 찾기·변경
 *
 * 세 단계를 한 카드 안에서 갈아 끼운다. 단계마다 화면을 새로 그리면
 * 회원은 어디까지 왔는지 감을 잃는다 — 아이콘과 제목만 바뀌고 틀은 그대로 남는다.
 * ===================================================================== */

.ex-pw-step { text-align: center; }

.ex-pw-icon {
    width: 56px; height: 56px; margin: 4px auto 16px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: var(--ex-primary-soft);
    color: var(--ex-primary);
    font-size: 24px;
}
/* 끝난 단계만 초록이다. 진행 중에 쓰면 다 됐다고 읽힌다. */
.ex-pw-icon.ok { background: rgba(46, 213, 115, .12); color: #2ed573; }

.ex-pw-step h2 {
    margin: 0;
    font-size: 20px; font-weight: 800;
    color: var(--ex-text-1);
}
.ex-pw-lead {
    margin: 9px auto 20px; max-width: 340px;
    color: var(--ex-text-3);
    font-size: 12px; line-height: 1.65;
}
.ex-pw-lead b { color: var(--ex-text-1); }

/* 입력은 왼쪽 정렬이다. 라벨과 칸이 가운데로 몰리면 어디를 채워야 할지 흐려진다. */
.ex-pw-form { text-align: left; margin-top: 4px; }
.ex-pw-form .ex-btn { margin-top: 6px; }

/* 코드 여섯 자리. 칸을 쪼개지 않는 대신 글자를 크게 벌려 자릿수가 보이게 한다. */
.ex-pw-code {
    text-align: center;
    font-size: 24px !important;
    font-weight: 800;
    letter-spacing: .38em;
    text-indent: .38em;
    font-variant-numeric: tabular-nums;
}

.ex-pw-sub { margin-top: 14px; text-align: center; }
.ex-pw-sub a, .ex-linkbtn {
    color: var(--ex-text-3);
    font-size: 12px;
    text-decoration: none;
}
.ex-pw-sub a:hover, .ex-linkbtn:hover { color: var(--ex-primary); }
.ex-linkbtn {
    border: 0; background: transparent; padding: 0;
    cursor: pointer; font: inherit;
}

.ex-pw-hint {
    margin: 8px 2px 0;
    color: var(--ex-text-3);
    font-size: 12px; line-height: 1.55;
}
.ex-pw-step > .ex-pw-hint { text-align: center; margin-top: 16px; }

.ex-pw-foot {
    margin-top: 22px; padding-top: 16px;
    border-top: 1px solid var(--ex-line);
    text-align: center;
}
.ex-pw-foot a { color: var(--ex-text-3); font-size: 12px; text-decoration: none; }
.ex-pw-foot a:hover { color: var(--ex-primary); }


/* 금액의 소수점 이하. 정수부보다 작고 흐리게 둬야 콤마와 마침표가 구분된다.
 * em 단위라 어느 크기의 금액에 붙어도 비율이 유지된다. */
.ex-frac {
    font-size: .82em;
    opacity: .55;
    font-weight: inherit;
}

/* =====================================================================
 * 스포츠북
 *
 * 화면의 주인공은 배당 버튼이다. 회원이 훑다가 누르는 것이 그것뿐이라
 * 나머지(리그명·시각·팀명)는 조용히 두고 배당만 또렷하게 세운다.
 *
 * 배팅카트는 오른쪽에 붙어 따라다닌다. 좁은 화면에서는 아래에서 올라온다 —
 * 담을 때마다 화면이 바뀌면 경기를 훑는 흐름이 끊긴다.
 * ===================================================================== */

.ex-sb { max-width: 980px; }

/* ── 종목 탭 ─────────────────────────────────────────────────────── */
.ex-sb-tabs {
    display: flex; gap: 6px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 18px;
    scrollbar-width: none;
}
.ex-sb-tabs::-webkit-scrollbar { display: none; }

.ex-sb-tab {
    display: inline-flex; align-items: center; gap: 7px;
    flex: none;
    padding: 9px 14px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface-2);
    color: var(--ex-text-2);
    font-size: 14px; font-weight: 700;
    white-space: nowrap;
    transition: border-color .15s, color .15s, background .15s;
}
.ex-sb-tab:hover { border-color: var(--ex-line-2); color: var(--ex-text-1); }
.ex-sb-tab i { font-size: 12px; }
.ex-sb-tab em {
    font-style: normal;
    font-size: 12px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: var(--ex-text-3);
    font-variant-numeric: tabular-nums;
}
.ex-sb-tab.active {
    border-color: var(--ex-accent-line);
    background: var(--ex-accent-soft);
    color: var(--ex-accent);
}
.ex-sb-tab.active em { background: var(--ex-accent); color: #06231f; }

/* ── 리그 묶음 ───────────────────────────────────────────────────── */
.ex-sb-league {
    margin-bottom: 12px;
    border: 1px solid var(--ex-line);
    border-radius: var(--ex-radius);
    background: var(--ex-surface);
    overflow: hidden;
}

.ex-sb-league-head {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 15px;
    background: var(--ex-surface-2);
    color: var(--ex-text-1);
    text-align: left;
    font-size: 14px;
}
.ex-sb-league-head > i { font-size: 12px; color: var(--ex-text-3); transition: transform .18s; }
.ex-sb-area { color: var(--ex-text-3); font-size: 12px; }
.ex-sb-league-head strong { font-weight: 700; }
.ex-sb-league-head em {
    margin-left: auto;
    font-style: normal; font-size: 12px;
    color: var(--ex-text-3);
    font-variant-numeric: tabular-nums;
}

.ex-sb-league.closed .ex-sb-league-head > i { transform: rotate(-90deg); }
.ex-sb-league.closed .ex-sb-fixtures { display: none; }

/* ── 경기 한 줄 ──────────────────────────────────────────────────── */
.ex-sb-fixture {
    display: flex; align-items: center; gap: 14px;
    padding: 11px 15px;
    border-top: 1px solid var(--ex-line);
}

.ex-sb-match {
    flex: 1;
    min-width: 0;
    display: flex; align-items: center; gap: 14px;
    color: var(--ex-text-1);
}
.ex-sb-match:hover .ex-sb-teams span { color: var(--ex-primary); }

.ex-sb-time {
    flex: none;
    width: 82px;
    display: flex; flex-direction: column; gap: 3px;
    color: var(--ex-text-3);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* 시작 임박. 회원이 서두를 수 있게 색으로 알린다. */
.ex-sb-soon {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    background: rgba(255, 176, 32, .14);
    color: var(--ex-warning);
    font-size: 10px; font-weight: 800;
    width: fit-content;
}

.ex-sb-teams {
    min-width: 0;
    display: flex; flex-direction: column; gap: 3px;
    font-size: 14px; font-weight: 600;
}
.ex-sb-teams span {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color .15s;
}

.ex-sb-odds { display: flex; gap: 6px; flex: none; }
.ex-sb-more { font-size: 12px; color: var(--ex-text-3); align-self: center; }
.ex-sb-more:hover { color: var(--ex-primary); }

/* ── 배당 버튼 ───────────────────────────────────────────────────── */
.ex-odd {
    min-width: 96px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 11px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface-2);
    transition: border-color .15s, background .15s;
}
.ex-odd:hover { border-color: var(--ex-primary-line); }

.ex-odd-name {
    min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--ex-text-3);
    font-size: 12px;
}
.ex-odd-name em { font-style: normal; color: var(--ex-text-2); }

/* 배당이 이 화면의 주인공이다. 굵고 또렷하게. */
.ex-odd-price {
    flex: none;
    color: var(--ex-text-1);
    font-size: 14px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ex-odd.picked {
    border-color: var(--ex-primary-line);
    background: var(--ex-primary-soft);
}
.ex-odd.picked .ex-odd-price { color: var(--ex-primary); }
.ex-odd.picked .ex-odd-name { color: var(--ex-text-2); }

/* ── 경기 상세 ───────────────────────────────────────────────────── */
.ex-sb-back {
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 14px;
    color: var(--ex-text-3);
    font-size: 14px;
}
.ex-sb-back:hover { color: var(--ex-primary); }

.ex-sb-head {
    padding: 18px;
    margin-bottom: 16px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
}
.ex-sb-head-league {
    display: flex; align-items: center; gap: 8px;
    color: var(--ex-text-3);
    font-size: 12px;
    margin-bottom: 14px;
}
.ex-sb-head-league i { color: var(--ex-primary); }
.ex-sb-head-league strong { color: var(--ex-text-2); font-weight: 700; }

.ex-sb-head-match {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
}
.ex-sb-head-team {
    font-size: 16px; font-weight: 800;
    text-wrap: balance;
}
.ex-sb-head-match .ex-sb-head-team:last-child { text-align: right; }

.ex-sb-head-when {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    color: var(--ex-text-3);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ── 마켓 ────────────────────────────────────────────────────────── */
.ex-sb-market {
    margin-bottom: 10px;
    border: 1px solid var(--ex-line);
    border-radius: var(--ex-radius);
    background: var(--ex-surface);
    overflow: hidden;
}
.ex-sb-market-head {
    width: 100%;
    display: flex; align-items: center; gap: 10px;
    padding: 12px 15px;
    color: var(--ex-text-1);
    text-align: left;
    font-size: 14px;
}
.ex-sb-market-head > i { font-size: 12px; color: var(--ex-text-3); transform: rotate(-90deg); transition: transform .18s; }
.ex-sb-market-head strong { font-weight: 700; }
.ex-sb-market-head em {
    margin-left: auto;
    font-style: normal; font-size: 12px; color: var(--ex-text-3);
}

.ex-sb-market-body {
    display: none;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 6px;
    padding: 0 15px 14px;
}
.ex-sb-market.open .ex-sb-market-head > i { transform: rotate(0); }
.ex-sb-market.open .ex-sb-market-body { display: grid; }

/* =====================================================================
 * 배팅카트
 * ===================================================================== */

.ex-slip {
    position: fixed;
    right: 18px; bottom: 18px;
    z-index: 150;
    width: 320px;
    max-width: calc(100vw - 36px);
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface);
    box-shadow: 0 20px 50px -18px rgba(0, 0, 0, .8);
    overflow: hidden;
}

.ex-slip-head {
    width: 100%;
    display: flex; align-items: center; gap: 9px;
    padding: 13px 15px;
    background: var(--ex-primary);
    color: #fff;
    font-size: 14px; font-weight: 800;
    text-align: left;
}
.ex-slip-count {
    font-style: normal;
    min-width: 20px; height: 20px;
    display: grid; place-items: center;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    font-size: 12px;
}
.ex-slip-caret { margin-left: auto; font-size: 12px; transition: transform .18s; }

/* 접힘이 기본이다. 담는 순간 펼쳐진다 — 빈 카트가 화면을 가리면 안 된다. */
.ex-slip-body { display: none; max-height: min(66vh, 560px); overflow-y: auto; }
.ex-slip[data-open="true"] .ex-slip-body { display: block; }
.ex-slip[data-open="true"] .ex-slip-caret { transform: rotate(180deg); }

.ex-slip-empty {
    padding: 30px 20px;
    text-align: center;
    color: var(--ex-text-3);
}
.ex-slip-empty i { font-size: 24px; opacity: .5; }
.ex-slip-empty p { margin: 10px 0 0; font-size: 12px; line-height: 1.6; }

/* ── 폴더 한 줄 ──────────────────────────────────────────────────── */
.ex-slip-pick {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--ex-line);
}
.ex-slip-pick-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ex-slip-pick-main strong {
    font-size: 14px; font-weight: 700; color: var(--ex-text-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-slip-pick-main span {
    font-size: 12px; color: var(--ex-text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-slip-pick-main em {
    font-style: normal; font-size: 12px; font-weight: 700;
    color: var(--ex-danger);
}

.ex-slip-pick-odds {
    flex: none;
    font-size: 14px; font-weight: 800;
    color: var(--ex-primary);
    font-variant-numeric: tabular-nums;
}

.ex-slip-pick-x {
    flex: none;
    width: 22px; height: 22px;
    display: grid; place-items: center;
    border-radius: 4px;
    color: var(--ex-text-3);
    font-size: 12px;
    transition: background .15s, color .15s;
}
.ex-slip-pick-x:hover { background: var(--ex-surface-2); color: var(--ex-danger); }

/* 잠긴 폴더 — 배당이 닫혔거나 경기가 시작됐다. 빼거나 갱신해야 등록된다. */
.ex-slip-pick.locked { opacity: .55; }
.ex-slip-pick.locked .ex-slip-pick-odds { color: var(--ex-text-3); text-decoration: line-through; }

/* 배당이 바뀐 폴더 */
.ex-slip-pick.changed .ex-slip-pick-odds { color: var(--ex-warning); }

/* ── 아래쪽 ──────────────────────────────────────────────────────── */
.ex-slip-foot { padding: 14px; }
.ex-slip-foot[hidden] { display: none; }

.ex-slip-alert {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 11px;
    margin-bottom: 12px;
    border-radius: var(--ex-radius-sm);
    background: rgba(255, 176, 32, .11);
    border: 1px solid rgba(255, 176, 32, .3);
    color: var(--ex-warning);
    font-size: 12px; line-height: 1.5;
}
.ex-slip-alert[hidden] { display: none; }

.ex-slip-amount {
    display: flex; align-items: center; gap: 9px;
    height: 46px;
    padding: 0 13px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface-2);
    transition: border-color .15s, box-shadow .15s;
}
.ex-slip-amount:focus-within {
    border-color: var(--ex-primary-line);
    box-shadow: 0 0 0 3px var(--ex-primary-soft);
}
.ex-slip-cur { flex: none; font-size: 12px; font-weight: 800; color: var(--ex-text-3); }
.ex-slip-amount input {
    width: 100%;
    border: 0; background: transparent; outline: none;
    color: var(--ex-text-1);
    font-family: inherit;
    font-size: 20px; font-weight: 800;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.ex-slip-amount input::placeholder { color: var(--ex-text-3); }

.ex-slip-presets { display: flex; gap: 5px; margin-top: 8px; }
.ex-slip-presets button {
    flex: 1;
    padding: 6px 0;
    border-radius: 999px;
    border: 1px solid var(--ex-line);
    color: var(--ex-text-2);
    font-size: 12px; font-weight: 700;
    transition: border-color .15s, color .15s;
}
.ex-slip-presets button:hover { border-color: var(--ex-primary-line); color: var(--ex-primary); }
.ex-slip-presets .ex-slip-clear { flex: none; padding: 6px 10px; border-color: transparent; color: var(--ex-text-3); }

.ex-slip-sum { margin: 14px 0 0; display: flex; flex-direction: column; gap: 6px; }
.ex-slip-sum div { display: flex; align-items: baseline; justify-content: space-between; }
.ex-slip-sum dt { color: var(--ex-text-3); font-size: 12px; }
.ex-slip-sum dd {
    margin: 0;
    color: var(--ex-text-1);
    font-size: 14px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ex-slip-win dt { color: var(--ex-text-2); font-weight: 700; }
.ex-slip-win dd { color: var(--ex-up); font-size: 16px; font-weight: 800; }

.ex-slip-foot .ex-btn-block { margin-top: 14px; }
#slipSubmit:disabled, #slipSubmit:disabled:hover {
    background: var(--ex-surface-3);
    color: var(--ex-text-3);
    box-shadow: none;
}

.ex-slip-reset {
    width: 100%;
    margin-top: 9px;
    padding: 8px 0;
    color: var(--ex-text-3);
    font-size: 12px;
    transition: color .15s;
}
.ex-slip-reset:hover { color: var(--ex-danger); }

/*
 * 금액 칸 안 「지우기」 (레드 2026-08-29 "배팅 금액 초기화하는곳이 없음")
 *
 * ★ 전달본 .slip__amount 는 flex 라, 여기에 그냥 한 칸을 더 얹으면
 *   input 오른쪽에 붙는다. position:absolute 로 띄우면 입력 글자와 겹친다 —
 *   금액은 오른쪽 정렬이라 긴 숫자가 단추 밑으로 들어간다.
 */
.ex-slip-amt-clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-right: -4px;
  border-radius: 50%;
  background: var(--surface-3);
  color: var(--text-4);
  transition: background var(--t-bg), color var(--t-color);
}
.ex-slip-amt-clear:hover {
  background: var(--updown-down);
  color: #FFFFFF;
}

/* ── 알림 ────────────────────────────────────────────────────────
 * alert 는 화면을 막아 버려서 배당을 담는 흐름이 끊긴다. */
.ex-sb-toast {
    position: fixed;
    left: 50%; bottom: 92px;
    transform: translate(-50%, 12px);
    z-index: 260;
    max-width: min(420px, calc(100vw - 32px));
    padding: 12px 18px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface);
    color: var(--ex-text-1);
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 16px 40px -16px rgba(0, 0, 0, .8);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s, transform .18s;
}
.ex-sb-toast.show { opacity: 1; transform: translate(-50%, 0); }
.ex-sb-toast.good { border-color: var(--ex-primary-line); color: var(--ex-primary); }

@media (max-width: 768px) {
    /* 좁은 화면에서는 아래에 붙어 화면 폭을 다 쓴다. */
    .ex-slip { left: 0; right: 0; bottom: 0; width: auto; max-width: none; border-radius: 0; border-left: 0; border-right: 0; }
    .ex-slip-body { max-height: 60vh; }
    .ex-sb-toast { bottom: 76px; }
}

@media (max-width: 560px) {
    .ex-sb-fixture { flex-direction: column; align-items: stretch; gap: 10px; }
    .ex-sb-odds { display: grid; grid-template-columns: repeat(3, 1fr); }
    .ex-odd { min-width: 0; }
    .ex-sb-head-match { grid-template-columns: 1fr; text-align: center; }
    .ex-sb-head-match .ex-sb-head-team:last-child { text-align: center; }
}

/* ── 스포츠북 다듬기 ───────────────────────────────────────────────
 * 루벳과 나란히 놓고 고친 것들.
 */

/* 어떤 마켓의 배당인지. 종목마다 주력 마켓이 달라 이름 없이는
   회원이 무엇에 거는지 모른다. 배당 위에 작게 올린다. */
.ex-sb-odds-wrap { flex: none; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.ex-sb-market-tag {
    font-size: 10px;
    color: var(--ex-text-3);
    letter-spacing: .02em;
    max-width: 300px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 잠긴 폴더 — 줄 전체를 덮는다.
 * 작은 글씨로 옆에 붙이면 회원이 못 보고 배팅하기를 누른다. */
.ex-slip-pick { position: relative; }
.ex-slip-pick-cover {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(10, 15, 22, .78);
    color: var(--ex-danger);
    font-size: 12px; font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 2px;
}
/* 덮은 뒤에도 × 는 눌러야 뺄 수 있다. */
.ex-slip-pick.locked .ex-slip-pick-x { position: relative; z-index: 1; }
.ex-slip-pick.locked { opacity: 1; }
.ex-slip-pick.locked .ex-slip-pick-main,
.ex-slip-pick.locked .ex-slip-pick-odds { opacity: .35; }

@media (max-width: 560px) {
    .ex-sb-odds-wrap { align-items: stretch; }
    .ex-sb-market-tag { text-align: center; max-width: none; }
}

/* =====================================================================
 * 스포츠북 — 카드형 배당
 *
 * 콘솔 경기관리 화면과 같은 문법이다. 왼쪽 색 띠로 어느 쪽인지 알리고,
 * 이름은 위에 작게 · 배당은 아래에 크게 놓는다. 한 줄에 놓을 칸 수는
 * 서버가 마켓마다 정해 내려준다 (승무패 3 · 오버언더 2 · 스코어류 4).
 * ===================================================================== */

/* ── 시간 필터 ─────────────────────────────────────────────────────
   종목 탭과 층을 나눈다. 같은 모양이면 회원이 두 줄을 한 묶음으로 읽는다. */
.ex-sb-filters {
    display: flex; gap: 6px;
    margin: -6px 0 14px;
    overflow-x: auto;
    scrollbar-width: none;
}
.ex-sb-filters::-webkit-scrollbar { display: none; }

.ex-sb-filter {
    flex: none;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px;
    border-radius: var(--ex-radius);
    border: 1px solid transparent;
    background: var(--ex-surface-2);
    color: var(--ex-text-3);
    font-size: 12px; font-weight: 600;
    white-space: nowrap;
    transition: color .15s, border-color .15s, background .15s;
}
.ex-sb-filter i { font-size: 12px; }
.ex-sb-filter em {
    font-style: normal;
    font-size: 10px; font-weight: 700;
    color: var(--ex-text-4, var(--ex-text-3));
    font-variant-numeric: tabular-nums;
}
.ex-sb-filter:hover { color: var(--ex-text-1); border-color: var(--ex-line-2); }
.ex-sb-filter.active {
    background: var(--ex-primary-soft);
    border-color: var(--ex-primary-line);
    color: var(--ex-primary);
}
.ex-sb-filter.active em { color: var(--ex-primary); }

/* ── 목록 배당 버튼 — 폭을 고정한다 ───────────────────────────────
   flex 로 두면 팀 이름 길이에 따라 버튼이 늘었다 줄었다 해서
   경기마다 배당 열이 어긋난다. 개수와 무관하게 한 칸 폭을 못 박는다. */
.ex-sb-odds {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 104px;
    gap: 6px;
}
.ex-sb-odds .ex-odd { min-width: 0; }

/* ── 배당 카드 ─────────────────────────────────────────────────────
   이름 위 · 배당 아래. 가로로 붙여 놓으면 이름이 길 때 배당이 밀려
   회원이 숫자를 찾아 눈을 옮겨야 한다. */
.ex-odd {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 8px 11px 9px 13px;
    overflow: hidden;
    text-align: left;
}
/* 왼쪽 색 띠. 어느 쪽 선택지인지 알린다. */
.ex-odd::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--ex-line-2);
    transition: background .15s;
}
.ex-odd.side-home::before  { background: var(--ex-primary); }
.ex-odd.side-away::before  { background: var(--ex-info); }
.ex-odd.side-draw::before  { background: var(--ex-warning); }
.ex-odd.side-over::before  { background: var(--ex-primary); }
.ex-odd.side-under::before { background: var(--ex-info); }

.ex-odd-name {
    width: 100%;
    font-size: 12px;
    line-height: 1.3;
}
.ex-odd-price {
    font-size: 16px;
    line-height: 1;
}
.ex-odd:hover { background: var(--ex-surface); }
.ex-odd:hover .ex-odd-price { color: var(--ex-primary); }

/* ── 마켓 본문 ─────────────────────────────────────────────────────
   칸 수는 인라인 style 로 서버가 준다. 여기서는 간격만 잡는다. */
.ex-sb-market-body {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 2px 15px 15px;
}
/* 마켓 카드 안의 배당은 조금 더 여유 있게. 여기가 배당을 고르는 자리다. */
.ex-sb-market-body .ex-odd { padding: 10px 12px 11px 14px; }
.ex-sb-market-body .ex-odd-price { font-size: 16px; }

@media (max-width: 720px) {
    /* 좁아지면 4칸은 글자가 잘린다. 서버가 준 칸 수를 덮어쓴다. */
    .ex-sb-market-body[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .ex-sb-market-body[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px) {
    .ex-sb-odds { grid-auto-columns: minmax(0, 1fr); width: 100%; }
    .ex-sb-market-body[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

/* ── 다듬기 ────────────────────────────────────────────────────────
   화면에 띄워 놓고 고친 것들. */

/* 목록 배당은 팀 이름이 들어가서 104px 로는 대부분 잘렸다.
   이름을 두 줄까지 받고 폭을 조금 넓혀 잘림을 줄인다. */
.ex-sb-odds { grid-auto-columns: 124px; }
.ex-sb-odds .ex-odd-name {
    white-space: normal;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 필터는 종목 탭보다 <b>아래 층</b>이다. 같은 모양·같은 색이면
   회원이 두 줄을 한 묶음으로 읽고 어느 쪽이 상위인지 모른다.
   테두리만 있는 칩으로 낮추고, 고른 것만 채운다. */
.ex-sb-filters { margin: -4px 0 16px; }
.ex-sb-filter {
    padding: 5px 11px;
    background: transparent;
    border-color: var(--ex-line);
    font-size: 12px; font-weight: 600;
}
.ex-sb-filter.active {
    background: var(--ex-surface-2);
    border-color: var(--ex-line-2);
    color: var(--ex-text-1);
}
.ex-sb-filter.active em { color: var(--ex-primary); }
.ex-sb-filter.active i { color: var(--ex-primary); }

/* =====================================================================
 * 배당 카드 — 크게, 또렷하게
 *
 * 배당을 고르는 자리가 이 화면의 전부다. 작게 그리면 회원이 숫자를
 * 확인하려고 눈을 좁히고, 그 상태로는 오래 못 본다. 숫자를 키우고
 * 카드에 깊이를 줘서 "누를 것" 으로 보이게 한다.
 * ===================================================================== */

.ex-odd {
    padding: 12px 14px 13px 16px;
    border-radius: 12px;
    background: linear-gradient(160deg, var(--ex-surface-2) 0%, rgba(12, 18, 26, .9) 100%);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .03) inset;
    gap: 5px;
    transition: transform .14s, border-color .14s, box-shadow .14s, background .14s;
}
.ex-odd::before { width: 4px; }

/* 이름은 회원이 무엇에 거는지 읽는 곳이다. 회색으로 눕히지 않는다. */
.ex-odd-name {
    color: var(--ex-text-2);
    font-size: 12px; font-weight: 600;
    letter-spacing: -.01em;
}
.ex-odd-name em {
    color: var(--ex-text-1);
    font-weight: 700;
}

/* 숫자가 주인공이다. */
.ex-odd-price {
    font-size: 20px; font-weight: 800;
    letter-spacing: -.02em;
}

/* 손이 닿으면 떠오른다. 색만 바꾸면 어디를 짚었는지 흐릿하다. */
.ex-odd:hover {
    transform: translateY(-1px);
    border-color: var(--ex-primary-line);
    background: linear-gradient(160deg, var(--ex-primary-soft) 0%, rgba(25, 25, 57, .92) 100%);
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .9), 0 0 0 1px var(--ex-primary-line) inset;
}
.ex-odd:active { transform: translateY(0); }

/* 담긴 배당. 카트를 안 봐도 어느 것을 담았는지 화면에서 바로 보여야 한다. */
.ex-odd.picked {
    border-color: var(--ex-primary);
    background: linear-gradient(160deg, rgba(120, 65, 238, .26) 0%, rgba(120, 65, 238, .08) 100%);
    box-shadow: 0 0 0 1px var(--ex-primary) inset, 0 10px 26px -14px rgba(120, 65, 238, .55);
}
.ex-odd.picked::before { background: var(--ex-primary); }
.ex-odd.picked .ex-odd-price { color: var(--ex-primary-bright, var(--ex-primary)); }
.ex-odd.picked .ex-odd-name { color: var(--ex-text-1); }

/* 목록도 같은 크기로. 목록에서 작게 보이면 회원은 상세로 들어가야만
   배당을 읽을 수 있다고 배운다. */
.ex-sb-odds { grid-auto-columns: 132px; gap: 8px; }
.ex-sb-fixture { padding: 13px 15px; }

/* 마켓 카드 안은 여백을 조금 더 준다. 여기가 고르는 자리다. */
.ex-sb-market-body { gap: 10px; padding: 4px 15px 16px; }
.ex-sb-market-body .ex-odd { padding: 14px 16px 15px 18px; }
.ex-sb-market-body .ex-odd-price { font-size: 20px; }
.ex-sb-market-body .ex-odd-name { font-size: 14px; }

/* 마켓 이름도 같이 키운다. 접힌 줄이 배당보다 작으면 위계가 뒤집힌다. */
.ex-sb-market-head { padding: 14px 16px; font-size: 14px; }
.ex-sb-market-head em { font-size: 12px; }

@media (max-width: 560px) {
    .ex-sb-odds { grid-auto-columns: minmax(0, 1fr); }
    .ex-odd-price { font-size: 16px; }
    .ex-sb-market-body .ex-odd-price { font-size: 20px; }
}

/* =====================================================================
 * 내역 (마이페이지)
 *
 * 표가 아니라 줄 목록이다. 표로 짜면 좁은 화면에서 가로 스크롤이 생기는데,
 * 금액을 확인하려고 옆으로 미는 화면은 회원이 가장 자주 보는 곳에 둘 수 없다.
 *
 * 한 줄은 좌우 두 덩이다.
 *   왼쪽  분류 · 설명 · 시각
 *   오른쪽 금액 (표시 통화) · 잔액 · 지갑 금액
 * ===================================================================== */

.ex-history {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 18px;
}

.ex-history-row {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
    padding: 14px 16px;
    background: var(--ex-surface);
    border: 1px solid var(--ex-line);
    border-radius: 12px;
}

.ex-history-main { min-width: 0; }

.ex-history-cat {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700;
    color: var(--ex-text-1);
}

/* 방향을 색점 하나로 먼저 알린다. 숫자를 읽기 전에 들어온 돈인지 나간 돈인지 보인다. */
.ex-history-badge {
    width: 7px; height: 7px; flex: none;
    border-radius: 50%;
}
.ex-history-badge.plus  { background: var(--ex-up); }
.ex-history-badge.minus { background: var(--ex-danger); }

.ex-history-desc {
    margin-top: 5px;
    font-size: 12px; color: var(--ex-text-2);
    /* 설명이 길어도 줄을 넘기지 않는다. 한 줄 높이가 들쭉날쭉하면 훑기 어렵다. */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ex-history-at {
    margin-top: 5px;
    font-size: 12px; color: var(--ex-text-3);
}

.ex-history-amounts { text-align: right; flex: none; }

/* 표시 통화 금액 — 회원이 화면에서 본 숫자다. 가장 크게 둔다. */
.ex-history-amount {
    font-size: 16px; font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ex-history-amount.plus  { color: var(--ex-up); }
.ex-history-amount.minus { color: var(--ex-danger); }

.ex-history-balance {
    margin-top: 3px;
    font-size: 12px; color: var(--ex-text-3);
    font-variant-numeric: tabular-nums;
}

/* 실제로 움직인 코인. 표시 통화와 단위가 다를 때만 뜬다.
   선을 하나 그어 "같은 거래의 다른 단위" 임을 드러낸다. */
.ex-history-wallet {
    margin-top: 7px; padding-top: 7px;
    border-top: 1px dashed var(--ex-line-2);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.ex-history-wallet-amount { font-weight: 700; }
.ex-history-wallet-amount.plus  { color: var(--ex-up-dim); }
.ex-history-wallet-amount.minus { color: var(--ex-danger); }
.ex-history-wallet-balance { display: block; margin-top: 2px; color: var(--ex-text-3); }

/* 페이지 이동 */
.ex-pager {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 22px;
}
.ex-pager-at {
    font-size: 14px; color: var(--ex-text-2);
    font-variant-numeric: tabular-nums;
}
.ex-pager .ex-btn.disabled {
    opacity: .35; pointer-events: none;
}

@media (max-width: 560px) {
    /* 좁은 화면에서는 위아래로 쌓고 금액을 왼쪽으로 돌린다.
       오른쪽 정렬을 유지하면 설명과 금액이 서로 멀어져 어느 줄의 금액인지 흐려진다. */
    .ex-history-row { flex-direction: column; gap: 10px; }
    .ex-history-amounts { text-align: left; }
    .ex-history-desc { white-space: normal; }
}

/* =====================================================================
 * 지갑 설정 모달
 *
 * 표시 통화는 거의 안 바꾸는 값이라 드롭다운에서 뺐다.
 * 자주 쓰는 지갑 목록과 같은 자리에 두면 목록이 세로로 길어져
 * 정작 자주 쓰는 쪽을 훑기 어려워진다.
 * ===================================================================== */

/* 지갑 드롭다운의 입금·출금.
 * 입금이 주(primary), 출금이 부(outline)다 — 둘 다 강조하면 어느 쪽이
 * 흔한 동작인지 알 수 없고, 출금을 잘못 누르는 일이 늘어난다. */
.ex-wallet-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px 4px 2px;
}
.ex-wallet-actions .ex-btn {
    width: 100%;
    gap: 6px;
}
.ex-wallet-actions .ex-btn i { font-size: 12px; }

.ex-wallet-settings {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 11px 14px;
    background: none; border: 0; cursor: pointer;
    color: var(--ex-text-2); font-size: 12px; font-weight: 600;
}
.ex-wallet-settings:hover { background: var(--ex-surface-3); color: var(--ex-text-1); }

/* 통화가 다섯이라 드롭다운보다 넓게 잡는다. */
.ex-modal-wide { max-width: 480px; }

.ex-set-sec { margin-bottom: 12px; }
.ex-set-sec h4 {
    margin: 0 0 4px;
    font-size: 14px; font-weight: 800; color: var(--ex-text-1);
}
.ex-set-sec p { margin: 0; font-size: 12px; color: var(--ex-text-2); }

/* 환산이 근사임을 알리는 줄. 경고는 아니라 색을 죽여 둔다 —
   붉게 칠하면 문제가 생긴 것으로 읽힌다. */
.ex-set-note {
    display: flex; align-items: flex-start; gap: 7px;
    margin-top: 8px !important; padding: 9px 11px;
    background: var(--ex-surface-2);
    border-radius: 8px;
    color: var(--ex-text-3) !important;
    font-size: 12px; line-height: 1.5;
}
.ex-set-note i { margin-top: 2px; flex: none; }

.ex-set-cur {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-bottom: 4px;
}
.ex-set-cur button {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--ex-surface-2);
    border: 1px solid var(--ex-line);
    border-radius: 10px;
    color: var(--ex-text-1); font-size: 12px; font-weight: 700;
    cursor: pointer;
}
.ex-set-cur button:hover { background: var(--ex-surface-3); }
.ex-set-cur button.active {
    border-color: var(--ex-primary-line);
    background: var(--ex-primary-soft);
    color: var(--ex-primary-bright);
}
.ex-set-cur .fa-check { margin-left: auto; color: var(--ex-primary); font-size: 12px; }

.ex-set-toggle {
    display: flex; align-items: flex-start; gap: 11px;
    padding: 12px 13px;
    background: var(--ex-surface-2);
    border-radius: 10px;
    cursor: pointer;
}
.ex-set-toggle input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--ex-primary); }
.ex-set-toggle strong { display: block; font-size: 14px; color: var(--ex-text-1); }
.ex-set-toggle em {
    display: block; margin-top: 3px;
    font-style: normal; font-size: 12px; color: var(--ex-text-3); line-height: 1.5;
}

@media (max-width: 480px) {
    .ex-set-cur { grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
 * 게시판 — 공지 · 이벤트 · FAQ
 *
 * 표가 아니라 카드 줄이다. 제목만 나열하는 표는 회원이 무슨 글인지 알려면
 * 전부 눌러 봐야 한다. 미리보기 한 줄과 그림을 같이 두면 훑고 고를 수 있다.
 * ===================================================================== */

.ex-board { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }

.ex-board-item {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    background: var(--ex-surface);
    border: 1px solid var(--ex-line);
    border-radius: 12px;
    text-decoration: none;
}
.ex-board-item:hover { background: var(--ex-surface-2); border-color: var(--ex-line-2); }

.ex-board-thumb {
    width: 108px; height: 66px; flex: none;
    border-radius: 8px; overflow: hidden;
    background: var(--ex-surface-2);
}
.ex-board-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ex-board-body { min-width: 0; flex: 1; }

.ex-board-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 800; color: var(--ex-text-1);
}

.ex-board-badge {
    flex: none;
    padding: 2px 8px; border-radius: 999px;
    background: var(--ex-primary-soft);
    border: 1px solid var(--ex-primary-line);
    color: var(--ex-primary-bright);
    font-size: 10px; font-weight: 800; letter-spacing: .3px;
}
/* 끝난 이벤트. 초록으로 두면 아직 참여할 수 있는 것으로 읽힌다. */
.ex-board-badge.ended {
    background: rgba(255, 255, 255, .06);
    border-color: var(--ex-line-2);
    color: var(--ex-text-3);
}

.ex-board-summary {
    margin: 5px 0 0;
    font-size: 12px; color: var(--ex-text-2); line-height: 1.5;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ex-board-meta {
    margin-top: 7px;
    font-size: 12px; color: var(--ex-text-3);
}
.ex-board-period { display: inline-flex; align-items: center; gap: 6px; }

.ex-board-caret { flex: none; color: var(--ex-text-3); font-size: 12px; }

/* ── 상세 ───────────────────────────────────────────────────────────── */

.ex-post { max-width: 820px; margin: 0 auto; padding-top: 8px; }

.ex-post-back {
    display: inline-flex; align-items: center; gap: 7px;
    margin-bottom: 16px;
    color: var(--ex-text-2); font-size: 12px; font-weight: 600; text-decoration: none;
}
.ex-post-back:hover { color: var(--ex-text-1); }

.ex-post-title {
    margin: 0 0 10px;
    font-size: 24px; font-weight: 900; color: var(--ex-text-1); line-height: 1.35;
}

.ex-post-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding-bottom: 16px; margin-bottom: 20px;
    border-bottom: 1px solid var(--ex-line);
    font-size: 12px; color: var(--ex-text-3);
}

/* 콘솔이 작성한 HTML 이 들어오는 자리.
   에디터가 뱉는 태그가 무엇일지 모르므로 폭과 여백만 붙잡아 둔다. */
.ex-post-body { color: var(--ex-text-1); font-size: 14px; line-height: 1.75; }
.ex-post-body p { margin: 0 0 14px; }
.ex-post-body img { max-width: 100%; height: auto; border-radius: 10px; }
.ex-post-body a { color: var(--ex-primary); }
.ex-post-body table { width: 100%; border-collapse: collapse; }
.ex-post-body td, .ex-post-body th { border: 1px solid var(--ex-line); padding: 8px 10px; }
/* 넓은 표가 화면을 밀어내지 않게 가둔다. */
.ex-post-body { overflow-x: auto; }

/* ── FAQ ────────────────────────────────────────────────────────────── */

.ex-faq { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }

.ex-faq-item {
    background: var(--ex-surface);
    border: 1px solid var(--ex-line);
    border-radius: 12px;
}
.ex-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 15px 17px;
    cursor: pointer;
    list-style: none;
}
/* 사파리·크롬의 기본 삼각형을 지운다. 우리 화살표와 둘이 겹친다. */
.ex-faq-item summary::-webkit-details-marker { display: none; }

.ex-faq-q { font-size: 14px; font-weight: 700; color: var(--ex-text-1); }
.ex-faq-item summary i { flex: none; color: var(--ex-text-3); font-size: 12px; transition: transform .18s; }
.ex-faq-item[open] summary i { transform: rotate(180deg); }
.ex-faq-item[open] summary { border-bottom: 1px solid var(--ex-line); }

.ex-faq-a {
    padding: 15px 17px;
    color: var(--ex-text-2); font-size: 14px; line-height: 1.75;
}
.ex-faq-a p { margin: 0 0 12px; }
.ex-faq-a img { max-width: 100%; height: auto; border-radius: 8px; }
.ex-faq-a a { color: var(--ex-primary); }

@media (max-width: 560px) {
    .ex-board-thumb { width: 84px; height: 54px; }
    .ex-post-title { font-size: 20px; }
}

/* =====================================================================
 * VIP 등급
 *
 * 진행도 막대가 이 화면의 중심이다. 숫자만 나열하면 회원은 자기가
 * 얼마나 왔는지 계산해야 한다. 막대는 그걸 보지 않고 알게 한다.
 * ===================================================================== */

.ex-vip-now {
    display: flex; align-items: center; gap: 16px;
    padding: 20px 22px; margin-top: 18px;
    background: linear-gradient(135deg, var(--ex-surface-2), var(--ex-surface));
    border: 1px solid var(--ex-primary-line);
    border-radius: 14px;
}
.ex-vip-now-badge {
    width: 52px; height: 52px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    background: var(--ex-primary-soft);
    color: var(--ex-primary); font-size: 24px;
}
.ex-vip-now-label { font-size: 12px; color: var(--ex-text-3); letter-spacing: .4px; }
.ex-vip-now-title { font-size: 24px; font-weight: 900; color: var(--ex-text-1); }
.ex-vip-now-desc { margin: 4px 0 0; font-size: 12px; color: var(--ex-text-2); }

/* ── 진행도 ─────────────────────────────────────────────────────────── */

.ex-vip-progress {
    margin-top: 14px; padding: 20px 22px;
    background: var(--ex-surface);
    border: 1px solid var(--ex-line);
    border-radius: 14px;
}
.ex-vip-progress-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 16px;
}
.ex-vip-progress-head h3 {
    margin: 0; font-size: 16px; font-weight: 800; color: var(--ex-text-1);
}
.ex-vip-done {
    padding: 3px 10px; border-radius: 999px;
    background: var(--ex-primary-soft); border: 1px solid var(--ex-primary-line);
    color: var(--ex-primary-bright); font-size: 12px; font-weight: 800;
}

.ex-vip-reqs { display: flex; flex-direction: column; gap: 14px; }

.ex-vip-req-top {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 6px;
}
.ex-vip-req-label { font-size: 12px; color: var(--ex-text-2); }
.ex-vip-req-num {
    font-size: 12px; font-weight: 700; color: var(--ex-text-1);
    font-variant-numeric: tabular-nums;
}
.ex-vip-req-num.done { color: var(--ex-up); }
.ex-vip-req-num .sep { color: var(--ex-text-3); font-weight: 400; margin: 0 2px; }

.ex-vip-bar {
    height: 6px; border-radius: 999px;
    background: var(--ex-surface-3);
    overflow: hidden;
}
.ex-vip-bar span {
    display: block; height: 100%;
    background: var(--ex-text-3);
    border-radius: 999px;
    transition: width .3s;
}
.ex-vip-bar span.done { background: var(--ex-up); }

/* 자동 승급이 없다는 안내. 경고는 아니라 색을 죽인다. */
.ex-vip-note {
    display: flex; align-items: flex-start; gap: 7px;
    margin: 16px 0 0; padding: 10px 12px;
    background: var(--ex-surface-2); border-radius: 8px;
    color: var(--ex-text-3); font-size: 12px; line-height: 1.55;
}
.ex-vip-note i { margin-top: 2px; flex: none; }

/* ── 등급표 ─────────────────────────────────────────────────────────── */

.ex-vip-grid {
    display: grid; gap: 12px; margin-top: 16px;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.ex-vip-card {
    padding: 16px 18px;
    background: var(--ex-surface);
    border: 1px solid var(--ex-line);
    border-radius: 12px;
}
/* 내 등급은 테두리로 가른다. 배경을 칠하면 카드가 여덟 개라 화면이 어지럽다. */
.ex-vip-card.current { border-color: var(--ex-primary-line); background: var(--ex-surface-2); }

.ex-vip-card-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.ex-vip-card-title { font-size: 16px; font-weight: 900; color: var(--ex-text-1); }
.ex-vip-card-mine {
    padding: 2px 8px; border-radius: 999px;
    background: var(--ex-primary-soft); border: 1px solid var(--ex-primary-line);
    color: var(--ex-primary-bright); font-size: 10px; font-weight: 800;
}

/* dt/dd 를 두 칸 격자로. 표를 쓰면 좁은 화면에서 가로 스크롤이 생긴다. */
.ex-vip-spec {
    display: grid; grid-template-columns: auto 1fr; gap: 7px 12px;
    margin: 0; font-size: 12px;
}
.ex-vip-spec dt { color: var(--ex-text-3); white-space: nowrap; }
.ex-vip-spec dd {
    margin: 0; text-align: right; color: var(--ex-text-1); font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ex-vip-cta { display: flex; gap: 10px; justify-content: center; margin-top: 26px; }

@media (max-width: 560px) {
    .ex-vip-now { padding: 16px; }
    .ex-vip-now-title { font-size: 20px; }
}

/* =====================================================================
 * 로그인 2단계 — 이메일 코드 입력
 *
 * 한 화면에 할 일이 하나뿐이라 가운데 좁은 상자 하나로 둔다.
 * 코드 칸은 크게 — 여섯 자리를 옮겨 적는 동안 어디까지 넣었는지 보여야 한다.
 * ===================================================================== */

.ex-verify { display: grid; place-items: center; padding: 48px 20px; }

.ex-verify-box {
    width: 100%; max-width: 420px;
    padding: 34px 30px;
    background: var(--ex-surface);
    border: 1px solid var(--ex-line);
    border-radius: 16px;
    text-align: center;
}

.ex-verify-icon {
    width: 60px; height: 60px; margin: 0 auto 18px;
    display: grid; place-items: center; border-radius: 50%;
    background: var(--ex-primary-soft);
    border: 1px solid var(--ex-primary-line);
    color: var(--ex-primary-bright); font-size: 24px;
}

.ex-verify-box h1 {
    margin: 0 0 8px;
    font-size: 20px; font-weight: 900; color: var(--ex-text-1);
}
.ex-verify-lead { margin: 0 0 20px; font-size: 14px; color: var(--ex-text-2); line-height: 1.6; }

.ex-verify-alert {
    display: flex; align-items: flex-start; gap: 8px;
    margin-bottom: 16px; padding: 11px 13px;
    border-radius: 9px; text-align: left;
    background: rgba(255, 63, 108, .10);
    border: 1px solid rgba(255, 63, 108, .30);
    color: var(--ex-danger); font-size: 12px; line-height: 1.5;
}
.ex-verify-alert.warn {
    background: rgba(255, 176, 32, .10);
    border-color: rgba(255, 176, 32, .30);
    color: var(--ex-warning);
}
.ex-verify-alert i { margin-top: 2px; flex: none; }

/* 여섯 자리를 넉넉히 벌려 놓는다. 붙여 놓으면 옮겨 적다 자리를 놓친다. */
.ex-verify-code {
    width: 100%; height: 58px; margin-bottom: 14px;
    background: var(--ex-surface-2);
    border: 1px solid var(--ex-line-2);
    border-radius: 11px;
    color: var(--ex-text-1);
    font-size: 28px; font-weight: 800; letter-spacing: 10px; text-align: center;
    font-variant-numeric: tabular-nums;
}
.ex-verify-code::placeholder { color: var(--ex-text-3); letter-spacing: 10px; }
.ex-verify-code:focus {
    outline: none;
    border-color: var(--ex-primary-line);
    box-shadow: 0 0 0 3px var(--ex-primary-soft);
}

.ex-verify-submit { width: 100%; height: 46px; font-size: 14px; }

.ex-verify-foot {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 18px; font-size: 12px;
}
.ex-verify-foot a { color: var(--ex-text-2); text-decoration: none; }
.ex-verify-foot a:hover { color: var(--ex-text-1); }
.ex-verify-sep { color: var(--ex-text-3); }
.ex-verify-inline { display: inline; }

/* 폼 안의 버튼이지만 링크처럼 보여야 한다 — 재발송은 부차적인 동작이다. */
.ex-linkbtn {
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--ex-primary-bright); font-size: 12px; font-family: inherit;
}
.ex-linkbtn:hover { text-decoration: underline; }

.ex-verify-hint {
    margin: 16px 0 0;
    font-size: 12px; color: var(--ex-text-3); line-height: 1.6;
}

/* 로그인 화면의 2단계 안내.
   자동 로그인 체크박스가 있던 자리다 — 비워 두면 오른쪽 "비밀번호 찾기" 가
   혼자 떠 균형이 깨진다. 안내를 넣어 자리를 채우면서 정보도 준다. */
.ex-login-note {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--ex-text-3); font-size: 12px;
}
.ex-login-note i { color: var(--ex-primary); }


/* =====================================================================
 * 카드 렌더링 비용 줄이기
 *
 * 로비 한 화면에 카드가 160장 넘게 깔린다. 브라우저가 그 전부를 레이아웃하고
 * 이미지를 디코딩하려 들면 렌더러가 멎는다 — 실제로 스크린샷이 30초 타임아웃 났고,
 * 그동안 회원 눈에는 "이미지가 하나도 안 뜨는 화면" 으로 보인다.
 *
 * content-visibility 는 화면 밖 요소의 렌더링을 통째로 건너뛴다.
 * contain-intrinsic-size 를 같이 줘야 건너뛴 동안에도 자리를 차지해
 * 스크롤바가 널뛰지 않는다.
 * ===================================================================== */

.ex-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 210px;
}

/* 가로 레일 안에서는 끄다. 레일은 폭이 스크롤로 결정되는데
   건너뛴 카드의 폭을 짐작하면 스크롤 길이가 계속 바뀐다. */
.ex-rail .ex-card { content-visibility: visible; }
/* =====================================================================
 * VIP 등급 카드
 *
 * 여덟 등급을 PC 한 줄에 넷씩 두 줄로 놓는다.
 *
 * 등급표는 "지금 내가 어디에 있고, 올라가면 무엇이 나아지나" 를 보여 주는 화면이다.
 * 표로 늘어놓으면 숫자 비교는 되지만 <b>올라가고 싶은 마음이 안 생긴다.</b>
 * 그래서 카드마다 등급 색을 달리해 서열이 눈에 먼저 들어오게 했다.
 * ===================================================================== */

.ex-tier-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 14px;
}

.ex-tier {
    position: relative;
    display: flex; flex-direction: column;
    padding: 20px 18px 16px;
    border-radius: 16px;
    border: 1px solid var(--ex-line);
    background: linear-gradient(170deg, var(--ex-surface) 0%, var(--ex-bg-2) 100%);
    overflow: hidden;
    transition: transform .18s, border-color .18s, box-shadow .18s;
}
.ex-tier:hover {
    transform: translateY(-3px);
    border-color: var(--ex-tier, var(--ex-primary-line));
    box-shadow: 0 22px 46px -26px rgba(0, 0, 0, .9);
}

/* 카드 위쪽에만 등급 색을 옅게 흘린다. 전체에 깔면 숫자가 읽히지 않는다. */
.ex-tier-glow {
    position: absolute; inset: 0 0 auto 0; height: 120px;
    background: radial-gradient(85% 100% at 50% 0%,
                var(--ex-tier, var(--ex-primary)) 0%, transparent 72%);
    opacity: .16; pointer-events: none;
}
.ex-tier > *:not(.ex-tier-glow) { position: relative; }

/* 등급별 색. 1→8 로 갈수록 차가운 보라에서 금빛으로 옮겨 간다 —
   마지막 두 등급만 금색이라 "저기까지" 가 분명해진다. */
.ex-tier.lv1 { --ex-tier: #6d7cff; }
.ex-tier.lv2 { --ex-tier: #4E93FF; }
.ex-tier.lv3 { --ex-tier: #7FB3FF; }
.ex-tier.lv4 { --ex-tier: #c247c0; }
.ex-tier.lv5 { --ex-tier: #e04a86; }
.ex-tier.lv6 { --ex-tier: #f0644f; }
.ex-tier.lv7 { --ex-tier: #f0932b; }
.ex-tier.lv8 { --ex-tier: #f5c542; }

/* 내 등급은 테두리로 확실히 구분한다. 배지 하나로는 여덟 장 사이에서 묻힌다. */
.ex-tier.current {
    border-color: var(--ex-tier);
    box-shadow: 0 0 0 1px var(--ex-tier), 0 22px 50px -24px var(--ex-tier);
}
.ex-tier.current .ex-tier-glow { opacity: .3; }

.ex-tier-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 10px; min-height: 22px;
}
.ex-tier-rank {
    font-size: 28px; font-weight: 900; line-height: 1;
    color: var(--ex-tier, var(--ex-primary));
    opacity: .55;
    font-variant-numeric: tabular-nums;
}
.ex-tier-mine {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 9px; border-radius: 999px;
    background: var(--ex-tier); color: #10101c;
    font-size: 10px; font-weight: 800; white-space: nowrap;
}

.ex-tier-name {
    margin: 0 0 4px;
    font-size: 16px; font-weight: 800; color: var(--ex-text-1);
}
.ex-tier-desc {
    margin: 0 0 12px;
    font-size: 12px; color: var(--ex-text-3); line-height: 1.5;
}

.ex-tier-specs {
    list-style: none; margin: 10px 0 0; padding: 12px 0 0;
    border-top: 1px solid var(--ex-line);
    display: grid; gap: 8px;
}
.ex-tier-specs li {
    display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.ex-tier-specs span { font-size: 12px; color: var(--ex-text-3); white-space: nowrap; }
.ex-tier-specs b {
    font-size: 12px; font-weight: 700; color: var(--ex-text-1);
    text-align: right; font-variant-numeric: tabular-nums;
}
/* 무제한은 숫자가 아니다. 같은 굵기로 두면 금액처럼 읽혀 눈이 한 번 멈춘다. */
.ex-tier-specs b.inf {
    color: var(--ex-tier, var(--ex-primary));
    font-weight: 800; font-size: 12px; letter-spacing: .2px;
}

.ex-tier-rates {
    margin-top: auto; padding-top: 12px;
    border-top: 1px dashed var(--ex-line);
    display: grid; gap: 6px;
}
.ex-tier-rate { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ex-tier-rate span { font-size: 12px; color: var(--ex-text-3); white-space: nowrap; }
.ex-tier-rate b { font-size: 12px; font-weight: 700; color: var(--ex-text-2); }

/* 좁아지면 줄당 개수를 줄인다. 넷을 고집하면 카드가 눌려
   "최대 베팅" 같은 라벨이 두 줄로 접힌다. */
@media (max-width: 1280px) { .ex-tier-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px)  { .ex-tier-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .ex-tier-grid { grid-template-columns: 1fr; gap: 12px; } }

/* =====================================================================
 * 스포츠북 — 두 칸 짜임
 *
 * 목록을 980px 칸에 몰아넣고 배팅카트를 화면 구석에 접어 두었다.
 * 1568px 화면에서 오른쪽 570px 가 빈 채로 남았고, 회원이 향해 가는 자리인
 * 카트는 정작 접혀 있어 무엇을 담았는지 보이지 않았다 — 폴더를 확인하려면
 * 매번 열었다 닫아야 했고, 그 사이 보던 경기 줄을 놓친다.
 *
 * 넓은 화면에서는 목록이 남는 폭을 다 쓰고, 카트는 오른쪽에 펼친 채로
 * 따라 내려온다. 좁아지면 예전대로 아래에서 올라온다 — 좁은 화면에서
 * 카트에 폭을 떼어 주면 배당 세 칸이 다 잘린다.
 * ===================================================================== */

.ex-sb-layout { display: block; }

/* 폭 제한을 푼다. 이제 옆 칸이 폭을 맡는다. */
.ex-sb { max-width: none; min-width: 0; }

@media (min-width: 1200px) {
    .ex-sb-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 336px;
        gap: 20px;
        align-items: start;
    }

    /* 떠 있는 창이 아니라 짜임의 한 칸이다. 스크롤을 따라 내려오되
       헤더 아래에 멈춘다 — 그 위로 올라가면 헤더에 가린다. */
    .ex-slip {
        position: sticky;
        top: calc(var(--ex-header-h) + 18px);
        right: auto; bottom: auto;
        width: auto; max-width: none;
    }

    /* 넓은 화면에서는 늘 펼친다. 옆 칸이 비어 있는데 접을 이유가 없다.
       JS 의 data-open 은 그대로 두고 화면에서만 무시한다 —
       좁은 화면으로 줄이면 접힘이 다시 살아나야 한다. */
    .ex-slip .ex-slip-body { display: block; }
    .ex-slip-caret { display: none; }
    .ex-slip-head { cursor: default; }

    /* 카트가 화면보다 길어지면 배팅하기 단추를 아예 못 누른다. */
    .ex-slip-body { max-height: calc(100vh - var(--ex-header-h) - 96px); }

    /* 목록이 넓어진 만큼 배당 칸도 키운다. 폭만 늘리고 배당을 그대로 두면
       팀 이름과 숫자 사이가 벌어져 눈이 멀리 건너뛴다. */
    .ex-sb-odds { grid-auto-columns: 148px; }
}

/* 카트 머리 — 통보라 막대였다. 오른쪽 칸에 세워 두니 화면에서 가장
   진한 덩어리가 되어, 정작 그 아래 폴더보다 머리가 먼저 눈에 들어왔다. */
.ex-slip-head {
    background: var(--ex-surface-2);
    color: var(--ex-text-1);
    border-bottom: 1px solid var(--ex-line);
}
.ex-slip-head > i:first-child { color: var(--ex-accent); }
.ex-slip-count { background: var(--ex-accent); color: #06231f; font-weight: 800; }

/* 경기 줄 — 어느 줄에 손이 있는지. 넓어진 줄에서 팀 이름과 배당이
   멀어졌기 때문에, 짚은 줄이 통째로 밝아져야 둘이 한 줄로 읽힌다. */
.ex-sb-fixture { transition: background .13s; }
.ex-sb-fixture:hover { background: rgba(255, 255, 255, .022); }
.ex-sb-match:hover .ex-sb-teams span { color: var(--ex-accent); }

/* =====================================================================
 * 고른 것은 청록이다
 *
 * 배경도 보라, 브랜드색도 보라라 담은 배당을 보라로 칠하면 "담겼다" 가
 * 배경에 묻힌다 — 실제로 담은 카드와 안 담은 카드가 한눈에 안 갈렸다.
 *
 * 왼쪽 색 띠(홈·무·원정)는 건드리지 않는다. 그건 고름이 아니라
 * 어느 쪽 선택지인지를 뜻하고, 담는 순간에만 청록이 그 위를 덮는다.
 * ===================================================================== */

.ex-odd:hover {
    border-color: var(--ex-accent-line);
    background: linear-gradient(160deg, var(--ex-accent-soft) 0%, rgba(18, 34, 40, .92) 100%);
    box-shadow: 0 8px 20px -12px rgba(0, 0, 0, .9), 0 0 0 1px var(--ex-accent-line) inset;
}
.ex-odd:hover .ex-odd-price { color: var(--ex-accent); }

.ex-odd.picked {
    border-color: var(--ex-accent);
    background: linear-gradient(160deg, rgba(46, 230, 214, .22) 0%, rgba(16, 42, 46, .72) 100%);
    box-shadow: 0 0 0 1px var(--ex-accent) inset, 0 10px 26px -14px var(--ex-accent-glow);
}
.ex-odd.picked::before { background: var(--ex-accent); }
.ex-odd.picked .ex-odd-price { color: var(--ex-accent); }
.ex-odd.picked .ex-odd-name { color: var(--ex-text-1); }

/* 카트 안의 배당도 같은 색이어야 한다. 화면에서 청록으로 담았는데
   카트에서 보라로 적히면 같은 폴더인지 확인하게 된다. */
.ex-slip-pick-odds { color: var(--ex-accent); }

/* 시간 필터. 종목 탭보다 아래 층이라 채우지는 않고 글자와 테두리만 청록으로. */
.ex-sb-filter.active {
    background: var(--ex-accent-soft);
    border-color: var(--ex-accent-line);
    color: var(--ex-accent);
}
.ex-sb-filter.active em,
.ex-sb-filter.active i { color: var(--ex-accent); }

/* 스포츠북은 전역 1400px 칸을 벗어난다.
 *
 * 배당 칸은 폭이 못박혀 있어서, 넓어진 만큼이 전부 팀 이름 쪽으로 간다 —
 * 1400 에서는 긴 이름이 잘리던 것이 여기서는 그대로 들어온다.
 * 카지노 격자와 달리 늘어난 폭이 낭비되지 않는 유일한 화면이다.
 *
 * 그래도 상한은 둔다. 울트라와이드에서 한 줄이 3000px 로 벌어지면
 * 팀 이름과 배당 사이를 눈이 건너뛰지 못한다.
 *
 * :has() 를 못 읽는 브라우저는 1400 에 머문다 — 좁을 뿐 깨지지 않는다.
 */
/* 스포츠북만 예외. 오른쪽에 배팅카트가 한 칸 더 서기 때문이다. */
.ex-container:has(.ex-sb-layout) { max-width: 1560px; }

/* 경기 머리 — 폭을 다 쓰지 않는다.
 *
 * 목록은 넓을수록 좋지만(줄마다 팀·시각·배당이 채운다) 이 머리는 세 덩이뿐이라,
 * 화면이 넓어지자 팀 이름 둘이 좌우 끝으로 900px 갈라졌다. 두 팀이 맞붙는
 * 한 경기로 안 읽히고 관계없는 두 글자가 된다. */
.ex-sb-head-match { max-width: 880px; margin: 0 auto; }

/* =====================================================================
 * 회원 문의 — 티켓
 *
 * 목록은 "무엇을 물었나" 를 훑는 자리이고, 상세는 "무엇이라 답이 왔나" 를
 * 읽는 자리다. 그래서 목록은 한 줄에 압축하고 상세는 대화처럼 위아래로 세운다.
 * ===================================================================== */

/* ── 새 문의 (접힘) ────────────────────────────────────────────────
   이 화면에 오는 대부분은 답변을 보러 오는 것이지 새로 묻자고 오는 것이 아니다.
   펼쳐 두면 목록이 화면 밖으로 밀린다. */
.ex-inq-new {
    margin-bottom: 18px;
    border: 1px solid var(--ex-line);
    border-radius: var(--ex-radius);
    background: var(--ex-surface);
    overflow: hidden;
}

.ex-inq-new > summary {
    display: flex; align-items: center; gap: 9px;
    padding: 14px 18px;
    cursor: pointer;
    font-size: 14px; font-weight: 700;
    color: var(--ex-text-1);
    list-style: none;
}
.ex-inq-new > summary::-webkit-details-marker { display: none; }
.ex-inq-new > summary i { color: var(--ex-accent); }
.ex-inq-new > summary:hover { background: var(--ex-surface-2); }
.ex-inq-new[open] > summary { border-bottom: 1px solid var(--ex-line); }

.ex-inq-form { padding: 18px; display: flex; flex-direction: column; gap: 14px; }

/* 칸 사이는 gap 이 벌린다. .ex-field 의 아래 여백까지 더해지면 두 번 벌어진다. */
.ex-inq-form .ex-field { margin-bottom: 0; }

/* 생김새는 .ex-field 가 잡는다. 여기서는 이 카드 안이라는 것만 표시한다 —
   카드가 이미 surface 위에 얹혀 있어 입력칸이 bg 색이면 한 겹 파여 보인다.
   포커스도 이 화면의 강조색(accent)으로 맞춘다. */
.ex-inq-form input[type="text"],
.ex-inq-form select,
.ex-inq-form textarea { background-color: var(--ex-surface-2); }
.ex-inq-form input[type="text"]:focus,
.ex-inq-form select:focus,
.ex-inq-form textarea:focus {
    border-color: var(--ex-accent-line);
    box-shadow: 0 0 0 3px var(--ex-accent-soft);
}

/* ── 목록 ─────────────────────────────────────────────────────── */
.ex-inq-list { display: flex; flex-direction: column; gap: 8px; }

.ex-inq-row {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 16px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
    color: var(--ex-text-1);
    transition: border-color .15s, background .15s;
}
.ex-inq-row:hover { border-color: var(--ex-accent-line); background: var(--ex-surface-2); }

.ex-inq-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ex-inq-top { display: flex; align-items: center; gap: 7px; }

.ex-inq-cat {
    font-size: 12px; font-weight: 700;
    padding: 2px 8px; border-radius: 4px;
    background: var(--ex-surface-3); color: var(--ex-text-2);
}

/* 답변이 왔는데 안 읽었다. 상태 글자만으로는 목록에서 눈에 안 걸린다. */
.ex-inq-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--ex-accent);
    box-shadow: 0 0 0 3px var(--ex-accent-soft);
}

.ex-inq-subject {
    font-size: 14px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-inq-when { font-size: 12px; color: var(--ex-text-3); font-variant-numeric: tabular-nums; }

.ex-inq-state {
    flex: none;
    font-size: 12px; font-weight: 700;
    padding: 4px 11px; border-radius: 999px;
    border: 1px solid var(--ex-line-2);
}
.ex-inq-state.done { border-color: var(--ex-accent-line); color: var(--ex-accent); background: var(--ex-accent-soft); }
.ex-inq-state.wait { color: var(--ex-text-3); }

/* ── 상세 머리 ────────────────────────────────────────────────── */
.ex-inq-head { margin: 6px 0 18px; }
.ex-inq-head-top { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.ex-inq-head h2 { margin: 0; font-size: 20px; font-weight: 800; text-wrap: balance; }

/* 티켓 번호. 회원이 전화나 채팅으로 문의할 때 이것을 부른다. */
.ex-inq-no {
    margin-left: auto;
    font-size: 12px; color: var(--ex-text-3);
    font-variant-numeric: tabular-nums;
}

/* ── 대화 ─────────────────────────────────────────────────────── */
.ex-thread { display: flex; flex-direction: column; gap: 12px; }

.ex-thread-item {
    padding: 15px 17px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
}

/* 내 말과 답변을 색으로 가른다. 같은 모양이면 누가 한 말인지 매번 읽어야 한다. */
.ex-thread-item.theirs {
    border-color: var(--ex-accent-line);
    background: linear-gradient(180deg, var(--ex-accent-soft) 0%, var(--ex-surface) 100%);
}

.ex-thread-who {
    display: flex; align-items: center; gap: 7px;
    margin-bottom: 9px;
    font-size: 12px; font-weight: 700;
    color: var(--ex-text-2);
}
.ex-thread-item.theirs .ex-thread-who { color: var(--ex-accent); }
.ex-thread-when {
    margin-left: auto;
    font-weight: 400; color: var(--ex-text-3);
    font-variant-numeric: tabular-nums;
}

.ex-thread-body { font-size: 14px; line-height: 1.8; color: var(--ex-text-1); word-break: break-word; }

/* 관리자 답변은 콘솔 에디터가 만든 HTML 이다. 브라우저 기본 여백을 그대로 두면
   문단 사이가 벌어져 말풍선 안이 헐거워 보인다. 첫/끝 여백만 걷어 낸다. */
.ex-thread-rich > :first-child { margin-top: 0; }
.ex-thread-rich > :last-child { margin-bottom: 0; }
.ex-thread-rich p { margin: 0 0 10px; }
.ex-thread-rich ul,
.ex-thread-rich ol { margin: 0 0 10px; padding-left: 20px; }
.ex-thread-rich li { margin-bottom: 4px; }
.ex-thread-rich h1,
.ex-thread-rich h2,
.ex-thread-rich h3,
.ex-thread-rich h4,
.ex-thread-rich h5,
.ex-thread-rich h6 { margin: 16px 0 8px; font-size: 16px; font-weight: 700; color: var(--ex-text-1); }
.ex-thread-rich a { color: var(--ex-accent); text-decoration: underline; }
.ex-thread-rich hr { border: 0; border-top: 1px solid var(--ex-line); margin: 14px 0; }
.ex-thread-rich blockquote {
    margin: 0 0 10px; padding: 8px 12px;
    border-left: 3px solid var(--ex-accent);
    background: rgba(255, 255, 255, .04);
}
.ex-thread-rich pre,
.ex-thread-rich code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }
.ex-thread-rich pre { overflow-x: auto; padding: 10px; background: rgba(0, 0, 0, .25); border-radius: 6px; }

/* 표는 답변에서 드물지만 나오면 폭을 넘긴다. 말풍선이 아니라 표가 스크롤되게 둔다. */
.ex-thread-rich table { width: 100%; border-collapse: collapse; margin: 0 0 10px; font-size: 14px; }
.ex-thread-rich th,
.ex-thread-rich td { border: 1px solid var(--ex-line); padding: 6px 8px; text-align: left; }
.ex-thread-rich th { background: rgba(255, 255, 255, .05); font-weight: 600; }

/* 답변 대기. 빈 자리를 두면 "고장났나" 로 읽힌다. */
.ex-thread-item.waiting {
    display: flex; align-items: center; justify-content: center; gap: 9px;
    padding: 26px;
    border-style: dashed;
    color: var(--ex-text-3);
    font-size: 14px;
}

/* ── 지우기 ───────────────────────────────────────────────────── */
.ex-inq-delete { margin-top: 20px; text-align: center; }
.ex-inq-delete-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 16px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--ex-text-3);
    font-size: 14px;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.ex-inq-delete-btn:hover { color: var(--ex-danger); border-color: var(--ex-danger); }

.ex-alert-ok {
    display: flex; align-items: center; gap: 9px;
    padding: 12px 15px; margin-bottom: 16px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-accent-line);
    background: var(--ex-accent-soft);
    color: var(--ex-accent);
    font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════════
   인플레이 — 목록

   프리매치와 한 스포츠북이라 .ex-sb-* 토큰을 그대로 쓴다.
   여기서 새로 만드는 것은 라이브에만 있는 것들뿐이다 —
   모드 탭, 뷰 전환, 스코어, 뛰는 점.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 인플레이 / 프리매치 ─────────────────────────────────────────── */
.ex-sb-modes {
    display: flex; gap: 8px;
    margin-bottom: 14px;
}
.ex-sb-mode {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 18px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
    color: var(--ex-text-2);
    font-size: 14px; font-weight: 700;
    text-decoration: none;
    transition: border-color .15s, background .15s, color .15s;
}
.ex-sb-mode:hover { border-color: var(--ex-line-2); color: var(--ex-text-1); }
.ex-sb-mode.active {
    border-color: var(--ex-accent-line);
    background: var(--ex-accent-soft);
    color: var(--ex-text-1);
}
.ex-sb-mode i { font-size: 14px; opacity: .85; }

/* 라이브 점. 고른 탭에서만 뛴다 — 안 고른 탭에서 깜빡이면 시선을 계속 뺏는다. */
.ex-sb-mode-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ex-text-3);
    flex: none;
}
.ex-sb-mode.active .ex-sb-mode-dot {
    background: var(--ex-danger);
    animation: exLivePulse 1.6s ease-in-out infinite;
}
@keyframes exLivePulse {
    0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(255, 63, 108, .45); }
    50%      { opacity: .6; box-shadow: 0 0 0 5px rgba(255, 63, 108, 0); }
}
@media (prefers-reduced-motion: reduce) {
    .ex-sb-mode.active .ex-sb-mode-dot,
    .ex-live-dot { animation: none; }
}

/* ── 건수 · 뷰 전환 ──────────────────────────────────────────────── */
.ex-live-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 14px;
}
.ex-live-count { font-size: 12px; color: var(--ex-text-3); }
.ex-live-count strong { color: var(--ex-text-1); font-variant-numeric: tabular-nums; }

.ex-live-views {
    display: inline-flex;
    border: 1px solid var(--ex-line); border-radius: var(--ex-radius-sm);
    overflow: hidden;
}
.ex-live-view {
    width: 36px; height: 32px;
    border: 0; background: var(--ex-surface);
    color: var(--ex-text-3);
    cursor: pointer;
    font-size: 14px;
    transition: background .15s, color .15s;
}
.ex-live-view + .ex-live-view { border-left: 1px solid var(--ex-line); }
.ex-live-view:hover { color: var(--ex-text-1); }
.ex-live-view.active { background: var(--ex-accent-soft); color: var(--ex-accent); }

/* ── 구간 제목 ───────────────────────────────────────────────────── */
.ex-live-sec { margin-bottom: 18px; }
.ex-live-head {
    display: flex; align-items: center; gap: 9px;
    width: 100%;
    padding: 9px 2px 9px 0;
    margin-bottom: 10px;
    border: 0; border-bottom: 1px solid var(--ex-line);
    background: none;
    color: var(--ex-text-1);
    font-size: 14px; font-weight: 700;
    cursor: pointer;
    text-align: left;
}
.ex-live-head .ex-live-caret { font-size: 12px; color: var(--ex-text-3); transition: transform .15s; }
.ex-live-head.closed .ex-live-caret { transform: rotate(-90deg); }
.ex-live-head.live { border-bottom-color: rgba(255, 63, 108, .3); }
.ex-live-head.live > i:nth-of-type(2) { color: var(--ex-danger); }
.ex-live-head.soon > i:nth-of-type(2) { color: var(--ex-accent); }
.ex-live-head.done { opacity: .65; }
.ex-live-head em {
    margin-left: auto;
    font-style: normal; font-size: 12px;
    padding: 1px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .07); color: var(--ex-text-3);
    font-variant-numeric: tabular-nums;
}

/* ── 카드뷰 ──────────────────────────────────────────────────────── */
.ex-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}
.ex-live-card {
    display: flex; flex-direction: column; gap: 10px;
    padding: 13px 15px 11px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
    text-decoration: none;
    transition: border-color .15s, background .15s, transform .15s;
}
.ex-live-card:hover {
    border-color: var(--ex-accent-line);
    background: var(--ex-surface-2);
    transform: translateY(-2px);
}
.ex-live-card.done { opacity: .6; }

.ex-live-card-top {
    display: flex; align-items: center; gap: 7px;
    font-size: 12px; color: var(--ex-text-3);
}
.ex-live-card-top > i { font-size: 12px; }
.ex-live-league {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1 1 auto; min-width: 0;
}

.ex-live-card-body {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 10px;
}
.ex-live-team {
    font-size: 14px; font-weight: 600; color: var(--ex-text-1);
    line-height: 1.35;
    /* 팀 이름은 두 줄까지만. 세 줄이 되면 카드 높이가 제각각이 되어 격자가 어긋난다. */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
.ex-live-team.home { text-align: right; }
.ex-live-team.away { text-align: left; }

.ex-live-score {
    display: inline-flex; align-items: center; gap: 4px;
    flex: none;
    font-variant-numeric: tabular-nums;
}
.ex-live-score b {
    font-size: 20px; font-weight: 800; color: var(--ex-text-1);
    min-width: 20px; text-align: center;
}
.ex-live-score b.muted { color: var(--ex-text-4); font-weight: 600; }
.ex-live-score i { font-style: normal; color: var(--ex-text-4); font-size: 16px; }

.ex-live-card-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-top: 9px;
    border-top: 1px solid var(--ex-line);
    font-size: 12px;
}
.ex-live-clock { color: var(--ex-text-2); font-variant-numeric: tabular-nums; }
.ex-live-clock.muted { color: var(--ex-text-3); }
.ex-live-go { color: var(--ex-accent); font-weight: 700; }
.ex-live-go i { font-size: 9px; margin-left: 2px; }

/* ── 진행중 표시 ─────────────────────────────────────────────────── */
.ex-live-now {
    display: inline-flex; align-items: center; gap: 5px;
    flex: none;
    color: var(--ex-danger); font-weight: 700;
}
.ex-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--ex-danger);
    animation: exLivePulse 1.6s ease-in-out infinite;
}
.ex-live-state { flex: none; font-weight: 600; }
.ex-live-state.soon { color: var(--ex-accent); }
.ex-live-state.done { color: var(--ex-text-3); }

/* ── 리스트뷰 ────────────────────────────────────────────────────── */
.ex-live-rows { display: flex; flex-direction: column; gap: 4px; }
.ex-live-row {
    /* 칸 너비를 고정한다. 팀 이름 길이에 따라 스코어가 움직이면
       줄을 훑을 때 눈이 매번 자리를 다시 찾아야 한다. */
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.3fr) 74px minmax(0, 1.3fr) 20px;
    align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid transparent;
    background: var(--ex-surface);
    text-decoration: none;
    transition: border-color .15s, background .15s;
}
.ex-live-row:hover { border-color: var(--ex-accent-line); background: var(--ex-surface-2); }
.ex-live-row.done { opacity: .6; }

.ex-live-row-when {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 12px;
}
.ex-live-row-when em {
    font-style: normal; color: var(--ex-text-3);
    font-variant-numeric: tabular-nums;
}
.ex-live-row-league {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--ex-text-3);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-live-row-team {
    font-size: 14px; font-weight: 600; color: var(--ex-text-1);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ex-live-row-team.home { text-align: right; }
.ex-live-row-score {
    display: inline-flex; align-items: center; justify-content: center; gap: 3px;
    font-variant-numeric: tabular-nums;
}
.ex-live-row-score b { font-size: 16px; font-weight: 800; color: var(--ex-text-1); }
.ex-live-row-score b.muted { color: var(--ex-text-4); font-weight: 600; }
.ex-live-row-score i { font-style: normal; color: var(--ex-text-4); }
.ex-live-row-go { color: var(--ex-text-4); font-size: 10px; text-align: right; }

/* 좁은 화면에서는 리그와 화살표부터 접는다. 팀·스코어는 어느 폭에서도 남아야 한다. */
@media (max-width: 720px) {
    .ex-live-row {
        grid-template-columns: 88px minmax(0, 1fr) 62px minmax(0, 1fr);
        gap: 8px; padding: 10px;
    }
    .ex-live-row-league,
    .ex-live-row-go { display: none; }
    .ex-live-grid { grid-template-columns: 1fr; }
    .ex-sb-mode { flex: 1 1 0; justify-content: center; padding: 10px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   인플레이 — 경기 상세

   스코어보드는 띠 한 줄, 나머지는 전부 마켓이다. 여기서 회원이 보는 주인공은
   배당이지 스코어가 아니다.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 스코어보드 ──────────────────────────────────────────────────── */
.ex-lv-head {
    padding: 16px 18px 14px;
    margin-bottom: 14px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
}
.ex-lv-head-top {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
    font-size: 12px; color: var(--ex-text-3);
}
.ex-lv-head-top > i { font-size: 12px; }

.ex-lv-score {
    display: grid; grid-template-columns: 1fr auto 1fr;
    align-items: center; gap: 14px;
}
.ex-lv-team {
    font-size: 16px; font-weight: 700; color: var(--ex-text-1);
    line-height: 1.35;
}
.ex-lv-team.home { text-align: right; }
.ex-lv-team.away { text-align: left; }

.ex-lv-nums {
    /* ⚠ 가로다. 세로로 두면 "0" ":" "0" 이 위아래로 쌓여 스코어가 세 줄이 된다.
       시계는 아래로 내려야 하므로 wrap 을 켜고 시계만 한 줄을 통째로 차지하게 한다. */
    display: flex; flex-direction: row; flex-wrap: wrap;
    align-items: center; justify-content: center;
    gap: 0 6px;
    flex: none;
    font-variant-numeric: tabular-nums;
}
.ex-lv-nums b {
    font-size: 28px; font-weight: 800; color: var(--ex-text-1);
    min-width: 28px; text-align: center; display: inline-block;
}
.ex-lv-nums b.muted { color: var(--ex-text-4); font-weight: 600; }
.ex-lv-nums i { font-style: normal; color: var(--ex-text-4); font-size: 20px; }
.ex-lv-clock {
    /* 숫자와 같은 줄에 두면 스코어가 옆으로 밀린다. 한 줄을 통째로 받아 아래로 내려간다. */
    flex-basis: 100%;
    text-align: center;
    margin-top: 2px;
    font-size: 12px; color: var(--ex-danger); font-weight: 700;
}

/* ── 팀 스탯 ─────────────────────────────────────────────────────── */
.ex-lv-stats {
    margin-bottom: 14px;
    border: 1px solid var(--ex-line);
    border-radius: var(--ex-radius);
    background: var(--ex-surface);
    overflow: hidden;
}
.ex-lv-stats > summary {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 16px;
    cursor: pointer; list-style: none;
    font-size: 13px; font-weight: 700; color: var(--ex-text-2);
}
.ex-lv-stats > summary::-webkit-details-marker { display: none; }
.ex-lv-stats > summary i { color: var(--ex-accent); font-size: 12px; }
.ex-lv-stats[open] > summary { border-bottom: 1px solid var(--ex-line); }
.ex-lv-stat-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }

.ex-lv-stat {
    display: grid; grid-template-columns: 40px 1fr 40px;
    align-items: center; gap: 10px;
}
.ex-lv-stat .n {
    font-size: 13px; font-weight: 700; color: var(--ex-text-1);
    font-variant-numeric: tabular-nums;
}
.ex-lv-stat .n.home { text-align: right; }
.ex-lv-stat .mid { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ex-lv-stat em {
    font-style: normal; text-align: center;
    font-size: 11px; color: var(--ex-text-3);
}
/* 막대 하나로 양쪽 몫을 보여 준다. 두 개로 나누면 어느 쪽이 큰지 눈으로 못 잰다. */
.ex-lv-stat .bar {
    display: block; height: 5px; border-radius: 999px;
    background: var(--ex-danger); overflow: hidden;
}
.ex-lv-stat .bar .h { display: block; height: 100%; background: var(--ex-accent); }

/* ── 마켓 ────────────────────────────────────────────────────────── */
.ex-lv-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 10px;
}
.ex-lv-fold {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
    color: var(--ex-text-2);
    font-size: 12px; font-weight: 600;
    cursor: pointer;
}
.ex-lv-fold:hover { color: var(--ex-text-1); border-color: var(--ex-line-2); }

.ex-lv-markets { display: flex; flex-direction: column; gap: 8px; }

.ex-lv-market {
    border: 1px solid var(--ex-line);
    border-radius: var(--ex-radius);
    background: var(--ex-surface);
    overflow: hidden;
}
.ex-lv-market > summary {
    display: flex; align-items: center; gap: 9px;
    padding: 11px 15px;
    cursor: pointer; list-style: none;
    font-size: 13px; color: var(--ex-text-1);
}
.ex-lv-market > summary::-webkit-details-marker { display: none; }
.ex-lv-market > summary:hover { background: var(--ex-surface-2); }
.ex-lv-market .ex-lv-caret {
    font-size: 10px; color: var(--ex-text-3);
    transition: transform .15s;
    transform: rotate(-90deg);
}
.ex-lv-market[open] .ex-lv-caret { transform: none; }
.ex-lv-market summary strong { font-weight: 700; flex: 1 1 auto; min-width: 0; }
.ex-lv-market summary em {
    flex: none;
    font-style: normal; font-size: 11px;
    padding: 1px 7px; border-radius: 999px;
    background: rgba(255, 255, 255, .07); color: var(--ex-text-3);
    font-variant-numeric: tabular-nums;
}

.ex-lv-picks {
    display: grid; gap: 6px;
    padding: 0 12px 12px;
}
.ex-lv-picks[data-cols="1"] { grid-template-columns: 1fr; }
.ex-lv-picks[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.ex-lv-picks[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }

/* ── 선택지 ──────────────────────────────────────────────────────── */
.ex-lv-pick {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 10px 12px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface-2);
    color: var(--ex-text-1);
    font-size: 12.5px;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    /* 왼쪽 색 띠 자리. 확인된 이름만 색을 받는다. */
    border-left-width: 3px;
    border-left-color: var(--ex-line);
}
.ex-lv-pick:hover { border-color: var(--ex-accent-line); background: var(--ex-surface); }
.ex-lv-pick.picked { border-color: var(--ex-accent); background: var(--ex-accent-soft); }

.ex-lv-pick-name {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--ex-text-2);
}
.ex-lv-pick-line { color: var(--ex-text-3); font-size: 11px; margin-left: 5px; }
.ex-lv-pick-price {
    flex: none; font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* 왼쪽 색 띠 — 모르는 이름(other)은 색을 주지 않는다.
   짐작으로 홈 색을 칠하면 회원이 반대쪽에 건다. */
.ex-lv-pick.side-home  { border-left-color: var(--ex-accent); }
.ex-lv-pick.side-away  { border-left-color: #4E93FF; }
.ex-lv-pick.side-draw  { border-left-color: var(--ex-warning); }
.ex-lv-pick.side-over  { border-left-color: var(--ex-up); }
.ex-lv-pick.side-under { border-left-color: var(--ex-danger); }

/* 배당 변동. 세 갈래인 이유는 "변화 없음" 이 실측에서 27% 라,
   그걸 상승·하락으로 뭉치면 화면이 쉴 새 없이 깜빡이기 때문이다. */
@keyframes exOddsUp {
    0%, 20% { background: rgba(46, 230, 214, .22); border-color: var(--ex-accent); }
    100%    { background: var(--ex-surface-2); }
}
@keyframes exOddsDown {
    0%, 20% { background: rgba(255, 63, 108, .20); border-color: var(--ex-danger); }
    100%    { background: var(--ex-surface-2); }
}
.ex-lv-pick.tr-up   { animation: exOddsUp 2.4s ease-out; }
.ex-lv-pick.tr-down { animation: exOddsDown 2.4s ease-out; }
.ex-lv-pick.tr-up   .ex-lv-pick-price { color: var(--ex-accent); }
.ex-lv-pick.tr-down .ex-lv-pick-price { color: var(--ex-danger); }
@media (prefers-reduced-motion: reduce) {
    .ex-lv-pick.tr-up, .ex-lv-pick.tr-down { animation: none; }
}

/* 잠긴 선택지. 칸은 남기고 누를 수만 없게 한다 —
   없애면 옆 칸이 밀려 들어와 회원이 누르려던 자리에 다른 것이 온다. */
.ex-lv-pick.locked {
    cursor: not-allowed;
    opacity: .42;
    background: var(--ex-surface);
    border-left-color: var(--ex-line);
}
.ex-lv-pick.locked .ex-lv-pick-price { color: var(--ex-text-3); font-size: 11px; }
/* 정산된 것은 다시 열리지 않는다. 잠김과 다르게 보여야 한다. */
.ex-lv-pick.locked.settled { opacity: .3; }

@media (max-width: 720px) {
    /*
        ⚠⚠ 3칸을 2칸으로 꺾던 줄을 <걷었다> (레드 2026-09-18 시트
            「승,무,패 · 이닝 핸디캡 등 마켓 한 줄 정렬 (현재 2줄) · 프리매치랑 동일하게」).

          여기서만 꺾는 바람에 승·무·패가 <2 + 1> 로 두 줄이 됐다.
          프리매치(.mt-mkt__body)는 폰에서도 3칸을 그대로 쓴다 — 같은 경기의
          같은 마켓이 화면마다 다른 모양이면 회원은 다른 것으로 읽는다.

        ★ 3칸이 좁아 보이면 <글자를 줄이지> 칸을 꺾지 않는다.
          꺾는 순간 「승·무·패」라는 한 덩이가 갈라진다.
     */
    .ex-lv-team { font-size: 14px; }
    .ex-lv-nums b { font-size: 24px; }

    /* 칸이 셋이라 좁다. <안쪽만> 줄인다 — 프리매치(.mt-mkt__body)가 쓰는 처방과 같다.
       ⚠ 칸 수는 .ex-lv-row 가 정한다. 여기서 .ex-lv-picks 의 격자를 만져도 소용없다 */
    .ex-lv-picks { padding: 0 10px 12px; }
    .ex-lv-pick { min-height: 42px; padding: 0 6px; }
    .ex-lv-pick-name { font-size: 11.5px; }
    .ex-lv-pick-price { font-size: 12.5px; }
}

/* 아직 안 받아 온 마켓. 받아 오는 동안만 자리를 지킨다 —
   높이를 0 으로 두면 아래 마켓들이 위로 튀었다가 다시 내려온다. */
.ex-lv-picks.pending { min-height: 44px; padding: 0 12px 12px; }
.ex-lv-picks.pending.loading {
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent)
        no-repeat;
    background-size: 40% 100%;
    animation: exPickWait 1.1s ease-in-out infinite;
}
@keyframes exPickWait {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}
@media (prefers-reduced-motion: reduce) {
    .ex-lv-picks.pending.loading { animation: none; }
}

/* 배당 변동 자동 수락 토글.
   금액 입력 바로 위에 둔다 — 누르기 전에 눈에 들어와야 의미가 있다. */
.ex-slip-accept {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 10px; padding: 9px 11px;
    border-radius: var(--ex-radius-sm);
    background: var(--ex-surface-2);
    font-size: 12px; color: var(--ex-text-3);
    cursor: pointer;
    user-select: none;
}
.ex-slip-accept:hover { color: var(--ex-text-2); }
.ex-slip-accept input {
    flex: none;
    width: 15px; height: 15px;
    accent-color: var(--ex-accent);
    cursor: pointer;
}
/* 켜 두면 이 배팅이 어떻게 나가는지가 달라진다. 켜진 상태를 눈에 띄게 둔다. */
.ex-slip-accept:has(input:checked) {
    background: var(--ex-accent-soft);
    color: var(--ex-text-1);
}

/* 라이브 트래커. 16:9 로 자리를 미리 잡는다 —
   iframe 이 늦게 뜨면서 높이가 잡히면 아래 마켓이 통째로 밀려 내려간다. */
/* ── 라이브 트래커 ────────────────────────────────────────────────

   높이를 <고정하지 않는다>. 예전에는 16:9 로 못박아 두었는데, 그때는 iframe 이라
   안이 어떻든 상관이 없었다. 지금 들어오는 위젯은 스코어보드·타임라인·탭이 딸려 와
   종목과 경기 상황에 따라 높이가 달라진다 — 고정하면 아래가 잘리거나 검은 띠가 남는다.

   대신 <너무 커지지 않게만> 막는다. 트래커가 화면을 다 먹으면 회원이 배당을 보려고
   한참을 내려야 한다. 트래커는 곁들이는 것이지 배당이 아니다. */
.ex-lv-tracker {
    position: relative;
    margin-bottom: 14px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: #000;
    overflow: hidden;
    max-height: 62vh;
}
.ex-lv-tracker > div { width: 100%; }

/* 좁은 화면에서는 더 줄인다. 세로가 짧아 트래커 하나로 한 화면이 다 찬다. */
@media (max-width: 768px) {
    .ex-lv-tracker { max-height: 46vh; }
}

/* ── 트래커를 우리 화면에 맞춘다 ──────────────────────────────────
   위젯은 <iframe 이 아니라> 우리 DOM 에 그대로 그려진다. 그래서 저쪽 백오피스를
   거치지 않고 여기서 손볼 수 있다 — 이 사실이 아래 규칙 전부의 근거다.

   ⚠ 여기 쓰인 class 는 STATSCORE 것이다. 저쪽이 마크업을 바꾸면 이 규칙들은
   조용히 안 먹는다(깨지지는 않는다). 트래커 모양이 갑자기 되돌아갔다면 여기를 볼 것. */

/* 위젯이 <자기 스코어보드>를 들고 온다. 우리 것이 바로 위에 있어 같은 정보가
   두 번 나온다. 우리 것을 남긴다 — 사이트 색과 이닝 표기가 이미 맞춰져 있다. */
.ex-lv-tracker .STATSCOREWidget--competitionInfoBar,
.ex-lv-tracker .STATSCOREWidget--scoreboard {
    display: none !important;
}

/* 주자가 있는 베이스는 공격 중인 쪽을 색으로 구분한다. 원래는 형광 초록(홈)과
   형광 마젠타(원정)인데, 우리 화면에서 그 채도는 <배당이 올랐다>거나 <당첨>으로
   읽힌다 — 돈과 무관한 표시에 쓸 색이 아니다.
   구분은 남기되 사이트 색으로 눕힌다. 민트=홈, 보라=원정. */
.ex-lv-tracker .STATSCOREWidget--liveBaseball__base--home {
    fill: var(--ex-accent) !important;
}
.ex-lv-tracker .STATSCOREWidget--liveBaseball__base--away {
    fill: var(--ex-primary-bright) !important;
}

/* 구장 사진이 한낮이라 어두운 화면에서 혼자 튄다. 사진을 바꿀 수는 없으니
   눌러서 앉힌다. 경기 상황은 위에 얹히는 도형으로 읽히므로 밝기를 낮춰도 안 가린다. */
.ex-lv-tracker .STATSCOREWidget--liveBaseball__field {
    filter: saturate(.75) brightness(.72) contrast(1.05);
}

/* 축구·농구·하키·배구는 경기장이 <배경 이미지>로 깔리고 클래스가 같다
   (partialPitchBackground). 한 줄로 종목 전부가 잡힌다.
   야구보다 더 눌렀다 — 잔디가 화면의 거의 전부를 덮어 같은 값이면 훨씬 밝게 뜬다. */
.ex-lv-tracker .STATSCOREWidget--partialPitchBackground__background {
    filter: saturate(.7) brightness(.6) contrast(1.05);
}

/* ── 스코어보드 표 ────────────────────────────────────────────────
   야구는 이닝이 열로 서야 읽힌다. 칩을 늘어놓으면 "지금 몇 회이고 몇 회가 남았나" 를
   회원이 세어야 한다. */
.ex-lv-board {
    margin-top: 14px; padding-top: 12px;
    border-top: 1px solid var(--ex-line);
    overflow-x: auto;
}
.ex-lv-board table {
    width: 100%; border-collapse: collapse;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.ex-lv-board th, .ex-lv-board td {
    padding: 6px 8px; text-align: center;
    border-bottom: 1px solid var(--ex-line);
    white-space: nowrap;
}
.ex-lv-board thead th {
    color: var(--ex-text-3); font-weight: 600; font-size: 11px;
    background: var(--ex-surface-2);
}
/* 팀 이름 칸은 왼쪽으로. 가운데 정렬하면 이름 길이에 따라 들쭉날쭉해진다. */
.ex-lv-board .tm { text-align: left; min-width: 120px; color: var(--ex-text-2); }
.ex-lv-board tbody .tm { font-weight: 700; color: var(--ex-text-1); }
.ex-lv-board td { color: var(--ex-text-2); }
/* 지금 뛰는 구간만 표시를 준다 */
.ex-lv-board .on { background: var(--ex-accent-soft); color: var(--ex-text-1); }
/* 합계는 눈이 먼저 가야 한다 */
.ex-lv-board .tt { font-weight: 800; color: var(--ex-text-1); background: rgba(255,255,255,.04); }
.ex-lv-board tbody tr:last-child th,
.ex-lv-board tbody tr:last-child td { border-bottom: 0; }

/* ── 야구 볼카운트 ─────────────────────────────────────────────── */
.ex-lv-count {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 10px;
    font-size: 12px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.ex-lv-count .bso { color: var(--ex-text-1); }
.ex-lv-count .bso b { margin-left: 3px; }
/* 색은 야구 중계의 관습을 따른다 — 볼 초록 · 스트라이크 노랑 · 아웃 빨강 */
.ex-lv-count .bso.b { color: var(--ex-up); }
.ex-lv-count .bso.s { color: var(--ex-warning); }
.ex-lv-count .bso.o { color: var(--ex-danger); }

/* 주자. 다이아몬드를 45도 돌린 정사각형 셋으로 그린다. */
.ex-lv-bases {
    position: relative; display: inline-block;
    width: 13px; height: 13px;
    transform: rotate(45deg);
    margin: 0 2px;
}
.ex-lv-bases i {
    position: absolute; width: 5px; height: 5px;
    background: var(--ex-line-2);
    transition: background .2s;
}
.ex-lv-bases .b1 { top: 0; right: 0; }
.ex-lv-bases .b2 { top: 0; left: 0; }
.ex-lv-bases .b3 { bottom: 0; left: 0; }
.ex-lv-bases i.on { background: var(--ex-gold); }

.ex-lv-turn {
    padding: 1px 7px; border-radius: 999px;
    background: var(--ex-surface-2); color: var(--ex-accent);
    font-size: 11px;
}

/* 득점. 스코어가 바뀐 순간만 표시를 준다 —
   매 갱신마다 깜빡이면 아무 의미가 없고 눈만 피로하다. */
@keyframes exGoal {
    0%   { transform: scale(1);    color: var(--ex-text-1); }
    30%  { transform: scale(1.25); color: var(--ex-gold); }
    100% { transform: scale(1);    color: var(--ex-text-1); }
}
.ex-lv-nums b.ex-lv-goal { animation: exGoal 1.1s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .ex-lv-nums b.ex-lv-goal { animation: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   인플레이 — 활성 배당만 보기 · 마켓 바로가기
   ══════════════════════════════════════════════════════════════════════ */

/* ── 활성 배당만 보기 ────────────────────────────────────────────────
   기본은 꺼짐이다. 잠긴 칸을 남겨 두는 것이 원래 규칙이고 —
   없애면 옆 칸이 밀려 들어와 회원이 누르려던 자리에 다른 선택지가 온다 —
   회원이 직접 켰을 때만 감춘다. */
.ex-lv-onlyopen {
    display: inline-flex; align-items: center; gap: 7px;
    margin-left: auto; margin-right: 8px;
    padding: 6px 11px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
    font-size: 12px; color: var(--ex-text-3);
    cursor: pointer; user-select: none;
}
.ex-lv-onlyopen:hover { color: var(--ex-text-2); }
.ex-lv-onlyopen input {
    width: 14px; height: 14px; flex: none;
    accent-color: var(--ex-accent);
    cursor: pointer;
}
.ex-lv-onlyopen:has(input:checked) {
    background: var(--ex-accent-soft);
    border-color: var(--ex-accent-line);
    color: var(--ex-text-1);
}

/* ⚠ 칸 단위로는 감추지 않는다. <b>마켓 단위로만</b> 감춘다.
   잠긴 칸을 하나씩 빼면 세 칸짜리 줄이 한 칸만 남아 격자에 구멍이 뚫린다 —
   회원이 짝을 눈으로 못 맞추고, 옆 칸이 밀려 들어와 누르려던 자리에 다른 것이 온다.
   걸 수 있는 배당이 하나라도 있는 마켓은 <b>잠긴 것까지 전부</b> 보여 주고,
   하나도 없는 마켓만 통째로 감춘다. 감추는 것은 JS 가 lv-hidden 으로 한다. */
.lv-hidden { display: none !important; }

/* ── 바로가기 목록 ───────────────────────────────────────────────────
   마켓이 100개를 넘는다. 원하는 것을 찾으려면 스크롤만 한참이다. */
.ex-lv-shell {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.ex-lv-nav {
    position: sticky; top: calc(var(--ex-header-h) + 12px);
    max-height: calc(100vh - var(--ex-header-h) - 32px);
    display: flex; flex-direction: column;
    border: 1px solid var(--ex-line);
    border-radius: var(--ex-radius);
    background: var(--ex-surface);
    overflow: hidden;
}
.ex-lv-nav-head {
    padding: 10px 13px;
    border-bottom: 1px solid var(--ex-line);
    background: var(--ex-surface-2);
    font-size: 12px; font-weight: 700; color: var(--ex-text-2);
}
.ex-lv-nav ol {
    margin: 0; padding: 6px;
    list-style: none;
    overflow-y: auto;
    /* 목록이 길어 스크롤이 생긴다. 관성 스크롤을 켜 두면 모바일에서 훨씬 낫다. */
    -webkit-overflow-scrolling: touch;
}
.ex-lv-nav li + li { margin-top: 2px; }
.ex-lv-nav button {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: 0; border-radius: var(--ex-radius-sm);
    background: transparent;
    color: var(--ex-text-3);
    font-size: 12px; text-align: left;
    cursor: pointer;
}
.ex-lv-nav button:hover { background: var(--ex-surface-2); color: var(--ex-text-1); }
.ex-lv-nav .nm {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 걸 수 있는 배당 수. 0 이면 눌러 봐야 볼 것이 없으니 흐리게 둔다. */
.ex-lv-nav em {
    flex: none;
    font-style: normal; font-size: 11px;
    padding: 1px 6px; border-radius: 999px;
    background: rgba(255, 255, 255, .07);
    color: var(--ex-text-3);
    font-variant-numeric: tabular-nums;
}
.ex-lv-nav button em:only-child,
.ex-lv-nav li:has(em:empty) { opacity: .5; }

/* 도착한 마켓을 잠깐 표시한다. 목록에서 고른 것과 도착한 것이 같은지
   회원이 확인할 방법이 없으면 매번 제목을 다시 읽어야 한다. */
@keyframes exLanded {
    0%, 35% { border-color: var(--ex-accent); box-shadow: 0 0 0 1px var(--ex-accent) inset; }
    100%    { border-color: var(--ex-line); box-shadow: none; }
}
.ex-lv-market.lv-landed { animation: exLanded 1.6s ease-out; }
@media (prefers-reduced-motion: reduce) {
    .ex-lv-market.lv-landed { animation: none; }
}

/* ── 화면 옆 탭 ──────────────────────────────────────────────────────
   넓은 화면에서는 목록이 늘 떠 있으므로 탭이 필요 없다. */
.ex-lv-navtab { display: none; }

/* ── 좁은 화면 ───────────────────────────────────────────────────────
   목록이 늘 떠 있으면 정작 배당 볼 자리가 없다. 화면 옆에서 밀어 넣는다.

   ⚠ 768px 이다. 사이트 사이드바가 <b>딱 그 폭에서 서랍으로 빠지기 때문</b>이다.
     900px 로 두면 769~900 구간에서 사이드바가 72px 아이콘 레일로 남아 있는데
     탭이 left:0 이라 그 레일 밑에 깔려 <b>눌리지 않는다.</b>
     (사이드바 z-index 90 · 탭 61) */
@media (max-width: 768px) {
    .ex-lv-shell { display: block; }

    .ex-lv-nav {
        position: fixed;
        top: var(--ex-header-h); bottom: 0;
        left: 0;
        width: 78vw; max-width: 320px; max-height: none;
        z-index: 60;
        border-radius: 0;
        border-left: 0; border-top: 0; border-bottom: 0;
        /* 닫혀 있을 때는 화면 밖에 둔다. display:none 이면 여닫을 때 미끄러지지 않는다. */
        transform: translateX(-100%);
        transition: transform .22s ease;
    }
    .ex-lv-shell.nav-open .ex-lv-nav { transform: none; }

    /* 세로로 세운 글자 탭. 아이콘 없이 글자만 세운다. */
    .ex-lv-navtab {
        display: block;
        position: fixed;
        left: 0; top: 45%;
        z-index: 61;
        padding: 14px 6px;
        border: 1px solid var(--ex-line);
        border-left: 0;
        border-radius: 0 var(--ex-radius-sm) var(--ex-radius-sm) 0;
        background: var(--ex-surface-2);
        color: var(--ex-text-2);
        font-size: 12px; font-weight: 700;
        letter-spacing: 1px;
        cursor: pointer;
        /* 글자를 위에서 아래로 세운다. rotate 로 눕히면 글자마다 옆으로 누워
           한글이 읽히지 않는다 — 세로쓰기는 writing-mode 로 해야 한다. */
        writing-mode: vertical-rl;
        text-orientation: upright;
        transition: transform .22s ease;
    }
    .ex-lv-shell.nav-open .ex-lv-navtab {
        transform: translateX(78vw);
        background: var(--ex-accent-soft);
        color: var(--ex-text-1);
    }
    @media (max-width: 420px) {
        .ex-lv-shell.nav-open .ex-lv-navtab { transform: translateX(78vw); }
    }

    /* 열림/닫힘에 따라 글자를 바꾼다. 두 개를 넣어 두고 하나만 보인다 —
       자바스크립트가 글자를 갈아 끼우면 언어마다 다시 손봐야 한다. */
    .ex-lv-navtab .off { display: none; }
    .ex-lv-shell.nav-open .ex-lv-navtab .on { display: none; }
    .ex-lv-shell.nav-open .ex-lv-navtab .off { display: block; }

    .ex-lv-onlyopen { margin-left: 0; }
    .ex-lv-bar { flex-wrap: wrap; gap: 8px; }
}

/* ══════════════════════════════════════════════════════════════════════
   헤더 — 아주 좁은 화면

   315px 에서 헤더 내용이 547px 까지 뻗어 <b>검색·문의·내정보가 화면 밖으로 밀려</b>
   눌리지도 않았다. 페이지에 가로 스크롤이 없어 잘린 채로 사라진다.

   ⚠ 아이콘을 숨겨서 줄이지 않는다. 그러면 좁은 화면에서만 검색과 문의를 못 쓴다 —
     좁은 화면을 쓰는 회원이 더 많다. 대신 <b>줄어들 수 있게</b> 만든다.
     flex 자식은 min-width 가 auto 라 글자 길이 밑으로 안 줄어든다. 그걸 푼다.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 520px) {
    .ex-header { gap: 8px; padding: 0 10px; }

    /* 로고에서 뒷말만 뗀다. "EXIT" 만 남아도 어디인지 안다. */
    .ex-logo .ex-logo-b { display: none; }
    .ex-logo { font-size: 18px; padding-right: 0; }

    /* 잔액이 헤더에서 가장 긴 조각이다(측정 164px). 줄어들 수 있게 풀어 준다. */
    .ex-wallet { min-width: 0; flex: 0 1 auto; margin-left: 4px; }
    .ex-wallet-btn { min-width: 0; gap: 6px; padding: 0 8px; }
    .ex-wallet-nums { min-width: 0; }
    .ex-wallet-main {
        display: block; min-width: 0;
        overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* 우측 묶음은 안 줄인다 — 여기서 줄면 아이콘이 겹친다. */
    .ex-header-right { flex: none; gap: 2px; }
}

@media (max-width: 400px) {
    /* 소수부를 뗀다. 반올림이 아니라 <b>정수부만</b> 보여 주는 것이라 숫자를 속이지 않는다.
       정확한 값은 잔액을 누르면 전부 나온다. */
    .ex-wallet-main .ex-frac { display: none; }
    .ex-header { gap: 6px; padding: 0 8px; }
    .ex-burger { margin-right: -2px; }

    /* 로그인 전에는 로그인·회원가입 버튼이 헤더의 절반을 먹는다(측정 회원가입 106px).
       숨기지 않는다 — 가입 버튼은 이 화면에서 가장 중요한 버튼이다. 대신 작게 만든다. */
    .ex-header-right .ex-btn { padding: 0 10px; font-size: 12px; height: 34px; }
    .ex-header-right .ex-btn i { display: none; }
    .ex-icon-btn { width: 32px; height: 32px; }
}

/* ══════════════════════════════════════════════════════════════════════
   스크롤바

   지금까지는 스크롤이 생기는 곳마다 따로 선언했다(.ex-sidebar · .ex-rail ·
   .ex-wallet-list …). 그러다 보니 <b>새로 만든 곳은 매번 빠졌고</b>, 거기만 운영체제
   기본 스크롤바가 나와 화면이 갑자기 낡아 보인다.

   전역으로 한 번 깔아 빠짐을 없앤다. 개별 선언은 클래스 선택자라 그대로 이긴다 —
   일부러 감춰 둔 곳(.ex-pills 의 height: 0)도 안 건드려진다.

   ⚠ body 는 손대지 않는다. 페이지 전체 스크롤바까지 얇게 만들면 긴 목록에서
     지금 어디쯤인지 잡기 어려워진다.
   ══════════════════════════════════════════════════════════════════════ */

/* 파이어폭스 — 색 두 개만 받는다(썸, 트랙). */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ex-surface-3) transparent;
}

*::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--ex-surface-3);
    border-radius: 99px;
    /* 안쪽으로 여백을 줘 트랙에 딱 붙지 않게 한다. 배경색 테두리로 만든다 —
       margin 은 스크롤바 조각에 안 먹는다. */
    border: 2px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--ex-line-2);
    background-clip: content-box;
}
/* 가로·세로가 만나는 모서리. 두면 기본 회색 사각형이 남는다. */
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* 마켓 바로가기 목록은 길어서 스크롤이 늘 있다. 조금 더 또렷하게 둔다 —
   여기서는 스크롤바가 "목록이 더 있다" 는 신호이기도 하다. */
.ex-lv-nav ol::-webkit-scrollbar-thumb { background: var(--ex-line-2); background-clip: content-box; }
.ex-lv-nav ol::-webkit-scrollbar-thumb:hover { background: var(--ex-text-4); background-clip: content-box; }

/* 스코어보드는 가로로 넘친다. 야구 9회가 좁은 화면에 다 안 들어간다. */
.ex-lv-board::-webkit-scrollbar { height: 6px; }

/* 잠긴 선택지를 확실히 알아보게.
   흐리게만 두면 회원이 걸 수 있는 줄 알고 누른다 — 엔진이 거절하지만
   그때는 "왜 안 되냐" 가 된다. */
.ex-lv-pick.locked .ex-lv-pick-price i {
    /* 칸 전체는 흐리지만 자물쇠만은 또렷하게 둔다. */
    opacity: 1;
    font-size: 12px;
    color: var(--ex-text-2);
}
.ex-lv-pick.locked.settled .ex-lv-pick-price i { color: var(--ex-accent); }

/* ⚠ 실시간으로 잠긴 칸은 <button> 이라 onclick 이 그대로 살아 있다.
   서버가 그린 잠긴 칸은 <span> 이라 애초에 안 눌리는데, 이쪽만 눌려서
   걸 수 없는 배당이 카트에 담겼다. 눌리지 않게 막는다.
   (span 은 그대로 둬야 title 툴팁이 뜬다) */
button.ex-lv-pick.locked { pointer-events: none; }

/* 바로가기로 뛰어온 마켓이 헤더 밑에 묻히지 않게.
   헤더가 position: fixed 라 scrollIntoView 는 그 아래를 고려하지 않는다 —
   화면 맨 위에 붙여 놓고 정작 헤더가 그 위를 덮는다.
   scroll-margin-top 은 브라우저가 스크롤 목표를 정할 때 빼 주는 여백이라
   자바스크립트로 좌표를 계산하는 것보다 정확하고, 헤더 높이가 바뀌어도 따라간다. */
.ex-lv-market { scroll-margin-top: calc(var(--ex-header-h) + 14px); }

/* 기준선 한 줄. 줄마다 자기 격자를 가져 옆 줄이 넘어오지 못하게 한다 —
   어떤 기준선은 한쪽만 와서 빈자리가 생기는데, 하나의 큰 격자에 흘리면
   그 자리로 다음 줄의 선택지가 올라온다. */
.ex-lv-picks { display: flex; flex-direction: column; gap: 6px; }
.ex-lv-row { display: grid; gap: 6px; }
.ex-lv-row[data-cols="1"] { grid-template-columns: 1fr; }
.ex-lv-row[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.ex-lv-row[data-cols="3"] { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 720px) {
    /*
        ⚠⚠ 3칸을 2칸으로 꺾던 줄을 <걷었다> (레드 2026-09-18 시트
            「승,무,패 · 이닝 핸디캡 등 마켓 한 줄 정렬 (현재 2줄) · 프리매치랑 동일하게」).

          여기서만 꺾여 승·무·패가 <1 X / 2> 두 줄로 갈라졌다.
          프리매치(.mt-mkt__body)는 폰에서도 3칸을 그대로 쓴다 —
          같은 마켓이 화면마다 다른 모양이면 회원은 다른 것으로 읽는다.

        ★ 좁으면 <글자를 줄이지> 칸을 꺾지 않는다. 꺾는 순간
          「승·무·패」라는 한 덩이가 갈라진다.

        ⚠ 여기가 <실제로 쓰이는> 자리다. 위쪽 .ex-lv-picks[data-cols] 규칙은
          줄마다 격자를 갖는 구조로 바뀌면서 죽은 규칙이 됐다 —
          그쪽만 고치면 화면이 안 바뀐다(2026-09-18 에 그렇게 헛짚었다).
     */
    .ex-lv-row { gap: 4px; }
}

/* ══════════════════════════════════════════════════════════════════════
   배팅 접수 창

   누르고 5초를 센 뒤에 그때 보낸다. 그 5초가 방어선이라 회원이 무엇을 기다리는지
   분명히 보여야 한다 — 멈춘 화면처럼 보이면 새로고침하거나 다시 누른다.
   ══════════════════════════════════════════════════════════════════════ */
.ex-slipwait {
    position: fixed; inset: 0; z-index: 200;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
    background: rgba(6, 9, 14, .72);
    backdrop-filter: blur(3px);
}
.ex-slipwait[hidden] { display: none; }

.ex-slipwait-box {
    width: 100%; max-width: 320px;
    padding: 26px 22px 20px;
    border-radius: var(--ex-radius);
    border: 1px solid var(--ex-line);
    background: var(--ex-surface);
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}

/* 남은 시간을 숫자와 테두리로 함께 보여 준다. 숫자만 두면 몇 초짜리인지 모르고,
   테두리만 두면 몇 초 남았는지 모른다. */
.ex-slipwait-count { position: relative; width: 88px; height: 88px; margin: 0 auto 16px; }
.ex-slipwait-count[hidden] { display: none; }
.ex-slipwait-count svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ex-slipwait-count circle { fill: none; stroke-width: 3; }
.ex-slipwait-count .track { stroke: var(--ex-line); }
.ex-slipwait-count .bar { stroke: var(--ex-accent); stroke-linecap: round; }
.ex-slipwait-count b {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 30px; font-weight: 800; color: var(--ex-text-1);
    font-variant-numeric: tabular-nums;
}

.ex-slipwait-msg {
    margin: 0 0 4px;
    font-size: 14px; font-weight: 700; color: var(--ex-text-1);
    line-height: 1.5;
}
.ex-slipwait.done .ex-slipwait-msg { color: var(--ex-up); }
.ex-slipwait.fail .ex-slipwait-msg { color: var(--ex-danger); }

.ex-slipwait-sum {
    margin: 14px 0 0; padding-top: 12px;
    border-top: 1px solid var(--ex-line);
    display: flex; flex-direction: column; gap: 6px;
    font-size: 12px;
}
.ex-slipwait-sum[hidden] { display: none; }
.ex-slipwait-sum > div { display: flex; align-items: center; justify-content: space-between; }
.ex-slipwait-sum dt { color: var(--ex-text-3); margin: 0; }
.ex-slipwait-sum dd { margin: 0; font-weight: 800; color: var(--ex-text-1); }

.ex-slipwait-close { margin-top: 16px; }
.ex-slipwait-close[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
    .ex-slipwait-count .bar { transition: none !important; }
}

/* ── 지갑 창의 전환 탭 ─────────────────────────────────────────────
   전환은 지갑을 연 자리에서 한다. 전환하고 나서 확인하고 싶은 것이 결국
   지갑 잔액이라, 다른 화면으로 보내면 되돌아오게 된다. */
.ex-wallet-tabs {
    display: flex;
    gap: 4px;
    padding: 0 14px 10px;
    border-bottom: 1px solid var(--ex-line);
}
.ex-wtab {
    flex: 1;
    padding: 9px 10px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--ex-text-3);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.ex-wtab:hover { background: var(--ex-surface-2); color: var(--ex-text-1); }
.ex-wtab.active {
    background: var(--ex-primary-soft);
    color: var(--ex-primary-bright);
}

/* 표시 통화 환산은 잔액 아래 작게. 없으면 줄 자체가 안 나온다 —
   "≈ " 만 남으면 오히려 고장으로 읽힌다. */
.ex-conv-sub {
    display: block;
    font-size: 11px;
    font-weight: 400;
    color: var(--ex-text-3);
}

.ex-conv-target { padding: 0 14px; }

.ex-conv-amount {
    display: flex;
    gap: 6px;
    padding: 12px 14px 0;
}
.ex-conv-amount input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border-radius: 9px;
    border: 1px solid var(--ex-line-2);
    background: var(--ex-surface-2);
    color: var(--ex-text-1);
    font-size: 13.5px;
    text-align: right;
}
.ex-conv-amount input:focus {
    outline: none;
    border-color: var(--ex-primary-line);
}

/* 실패 사유는 버튼 <위>에 둔다. 아래 두면 창이 짧을 때 잘려서
   회원은 눌러도 아무 일이 없는 것으로 본다. */
.ex-conv-msg {
    margin: 10px 14px 0;
    padding: 9px 11px;
    border-radius: 9px;
    background: var(--ex-down-soft, rgba(255, 77, 109, .12));
    color: var(--ex-down, #ff4d6d);
    font-size: 12.5px;
    line-height: 1.5;
    word-break: keep-all;
}
.ex-conv-msg.ok {
    background: var(--ex-accent-soft);
    color: var(--ex-accent);
}

.ex-conv-go {
    width: calc(100% - 28px);
    margin: 12px 14px 4px;
    justify-content: center;
}
.ex-conv-go:disabled { opacity: .6; cursor: default; }

/* ===================================================================
   라이브챗 위젯
   ─────────────────────────────────────────────────────────────────
   ★ 화면 오른쪽 아래에 고정. 모바일에서는 전체를 덮는다 —
     좁은 화면에서 작은 창을 띄우면 입력칸이 키보드에 가린다.
   =================================================================== */
.ex-chat-fab{position:fixed;right:20px;bottom:20px;z-index:900;width:54px;height:54px;
  border:none;border-radius:50%;background:var(--ex-primary,#1E4FA8);color:#fff;
  font-size:20px;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.35)}
.ex-chat-fab:hover{filter:brightness(1.1)}
.ex-chat-dot{position:absolute;top:8px;right:8px;width:10px;height:10px;border-radius:50%;
  background:#ff4d4f}

.ex-chat-panel{position:fixed;right:20px;bottom:20px;z-index:901;width:360px;height:520px;
  display:flex;flex-direction:column;border-radius:14px;overflow:hidden;
  background:var(--ex-panel,#141527);border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 40px rgba(0,0,0,.5)}
/* ★ display:flex 가 [hidden] 의 display:none 을 이긴다.
   그래서 접기 단추를 눌러도 패널이 그대로 있었다. 명시적으로 되돌린다.
   같은 함정을 나머지 조각에도 미리 막아 둔다. */
.ex-chat-panel[hidden],
.ex-chat-fab[hidden],
.ex-chat-rate[hidden],
.ex-chat-notice[hidden],
.ex-chat-dot[hidden]{display:none !important}

.ex-chat-head{display:flex;align-items:center;gap:8px;padding:12px 14px;
  background:rgba(255,255,255,.04);border-bottom:1px solid rgba(255,255,255,.06)}
.ex-chat-title{font-weight:600;font-size:13px}
.ex-chat-state{margin-left:auto;font-size:11px;opacity:.7}
.ex-chat-x{background:none;border:none;color:inherit;cursor:pointer;opacity:.7}

.ex-chat-notice{padding:10px 14px;font-size:11.5px;line-height:1.6;
  background:rgba(255,193,7,.08);border-bottom:1px solid rgba(255,193,7,.2)}

.ex-chat-body{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.ex-chat-msg{max-width:82%;display:flex;flex-direction:column;gap:2px}
.ex-chat-member{align-self:flex-end;align-items:flex-end}
.ex-chat-admin{align-self:flex-start}
/* 시스템 안내는 가운데. 대화가 아니라 상태 알림이라 결이 달라야 한다. */
.ex-chat-system{align-self:center;max-width:100%;text-align:center;opacity:.65;font-size:11px}

.ex-chat-who{font-size:10.5px;opacity:.6}
/* 기획 2026-09-18 「라이브챗 채팅 전체 폰트 좀더 줄여주세요」 — 13→12px.
   ⚠ 아래 입력칸(.ex-chat-foot textarea)은 그대로 둔다. 적는 글자라
     작으면 오타가 나고, iOS 는 16px 미만 입력칸에서 화면을 확대한다. */
.ex-chat-text{padding:7px 10px;border-radius:12px;font-size:12px;line-height:1.5;
  white-space:pre-wrap;word-break:break-word}
.ex-chat-member .ex-chat-text{background:var(--ex-primary,#1E4FA8);color:#fff;border-bottom-right-radius:4px}
.ex-chat-admin .ex-chat-text{background:rgba(255,255,255,.07);border-bottom-left-radius:4px}
.ex-chat-system .ex-chat-text{background:none;padding:2px 0}
.ex-chat-at{font-size:10px;opacity:.45}
/* 주소를 누를 수 있게 그린 자리(chat.js paintText). 말풍선 색 위에서도 읽혀야 한다 */
.ex-chat-link{color:inherit;text-decoration:underline;word-break:break-all}

.ex-chat-foot{display:flex;gap:8px;padding:10px;border-top:1px solid rgba(255,255,255,.06)}
.ex-chat-foot textarea{flex:1;resize:none;max-height:96px;padding:9px 11px;border-radius:10px;
  border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25);color:inherit;font-size:13px}
.ex-chat-send{width:40px;border:none;border-radius:10px;background:var(--ex-primary,#1E4FA8);
  color:#fff;cursor:pointer}
.ex-chat-send:disabled{opacity:.4;cursor:default}

/* ★★ 사진 보내기 (레드 2026-09-18 「라이브챗 이미지 첨부」) ─────────────
   ⚠ 이 자리는 글 칸이 가로를 다 먹는 flex 줄이다. flex:none 이 없으면
     클립 단추가 눌려 찌그러진다. */
.ex-chat-attach{
  flex:none; width:34px; border:none; background:none; cursor:pointer;
  color:inherit; opacity:.55; font-size:15px;
}
.ex-chat-attach:hover{opacity:.95}
/* ★★ 대화 겹은 <흰 바탕>이다. 여기서 색을 안 박으면 color:inherit 이 패널의
   흰색을 물려받아 <흰 글자를 흰 바탕에> 그린다 — 단추는 멀쩡히 있는데
   아무것도 안 보인다. (레드 2026-09-18 「파일첨부 아이콘이없네」) */
.ex-chat-panel.is-talk .ex-chat-attach{ color:#9AA6C2; opacity:1; }
.ex-chat-panel.is-talk .ex-chat-attach:hover{ color:#1EA7F0; }

/* 말풍선에 들어가는 사진. ⚠ 큰 사진이 와도 창을 밀지 않게 가둔다 */
.ex-chat-photo{display:block;margin-top:4px}
.ex-chat-photo img{
  display:block; max-width:200px; max-height:200px;
  width:auto; height:auto; border-radius:8px; cursor:zoom-in;
  border:1px solid rgba(255,255,255,.12);
}
/* 90일이 지나 파일이 없어진 자리 — 깨진 그림 대신 사유를 적는다 */
.ex-chat-photo-gone{opacity:.55;font-size:12px;font-style:italic}

.ex-chat-actions{padding:0 10px 10px;text-align:right}
.ex-chat-end{background:none;border:none;color:inherit;opacity:.55;font-size:12px;cursor:pointer}
.ex-chat-end:hover{opacity:.9}

@media (max-width:520px){
  .ex-chat-panel{right:0;bottom:0;width:100%;height:100%;border-radius:0}
  /* ★★ 떠 있는 채팅 단추를 <감춘다> (레드 2026-09-15
       「채팅 위잿삭제 아이콘 만남기기」 · 「하단에 깔린 메뉴 라이브챗
       아이콘때문에 마지막 메뉴가 가려짐」).

       탭바 맨 끝이 이미 <채팅>이다. 그 위에 떠 있는 단추가 겹쳐
       마지막 칸을 눌러도 채팅만 열렸다.

     ⚠ 지우지 않고 <감춘다>. 탭바의 채팅 칸은 이 단추를 대신 눌러 준다
       (#exChatFab.click()) — 없애면 여는 길이 통째로 끊긴다.
       감춰 둔 것은 프로그램이 누를 수 있다. */
  .ex-chat-fab{right:14px;bottom:14px;display:none}

  /* ★ 모바일에서는 챗 파브가 감춰지므로 피할 것이 <탭바>다(--tabbar-h 60px).
       PC 처럼 챗 위에 두면 아무것도 없는 허공에 뜬다. */
  .ex-top-btn{right:14px;bottom:calc(var(--tabbar-h,60px) + 14px);width:44px;height:44px;font-size:15px}
}

/* ─────────────────────────────────────────────────────────────
   맨 위로 (레드 2026-09-17)

   ★ PC 는 <1:1 라이브챗 단추 위>다. 챗 파브가 right:20 bottom:20 에 54px 로
     서 있으니 20+54+12 = 86 이다. 겹치면 둘 다 못 누른다 —
     그래서 두 규칙을 <붙여 둔다.> 한쪽 위치를 바꾸면 다른 쪽도 같이 봐야 한다.
   ⚠ z-index 는 챗(900·901)보다 <낮다>. 상담 창이 열리면 그쪽이 위여야 한다.
   ───────────────────────────────────────────────────────────── */
.ex-top-btn{
  position:fixed;right:20px;bottom:86px;z-index:899;
  width:48px;height:48px;border-radius:50%;
  background:rgba(255,255,255,.10);color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 20px rgba(0,0,0,.35);
  transition:background .15s ease,transform .15s ease;
}
.ex-top-btn:hover{background:rgba(255,255,255,.18)}
.ex-top-btn:active{transform:translateY(1px)}

/* 상담 평가 — 끝난 뒤에만 뜬다 */
.ex-chat-rate{padding:12px 14px;border-top:1px solid rgba(255,255,255,.06);text-align:center}
.ex-chat-rate-ask{font-size:12px;margin-bottom:8px}
.ex-chat-stars{display:flex;justify-content:center;gap:4px;margin-bottom:8px}
.ex-chat-stars button{background:none;border:none;color:#f5c518;font-size:22px;cursor:pointer;padding:2px}
.ex-chat-rate input{width:100%;padding:7px 10px;border-radius:8px;font-size:12.5px;
  border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.25);color:inherit}
.ex-chat-rate-skip{background:none;border:none;color:inherit;opacity:.5;font-size:11.5px;
  cursor:pointer;margin-top:8px}

/* =====================================================================
   입금 탭 — 코인 / 계좌 (2026-08-27)

   ★ 코인 엔진이 죽어도 계좌 입금은 살아 있어야 한다. 그래서 탭 막대는
     deposit.available 바깥에 있고, 코인 영역만 안내문으로 바뀐다.
   ===================================================================== */
/* =====================================================================
   충전 보너스 받기 / 안 받기 (기획 2026-09-18 「첫충 매충 충전시 보너스 선택란」)

   ★ 탭 위에 둔다 — 코인이든 계좌든 똑같이 걸리는 조건이라 한 곳에 있어야 한다.
   ★ 롤링 안내를 흐리게 두지 않는다. 회원이 무엇을 지는지 알아야 고를 수 있다.
   ===================================================================== */
.ex-dbc {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line, rgba(255,255,255,.08));
    background: var(--ex-surface-2);
}
.ex-dbc__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ex-dbc__head > i { color: var(--ex-primary, #1E4FA8); }
.ex-dbc__head > b { font-size: 13px; }
/* 줄 오른쪽 끝의 더보기 — 글자 단추다 (레드 2026-09-18) */
.ex-dbc__more {
    margin-left: auto; padding: 4px 8px;
    border: 0; background: none; cursor: pointer;
    color: var(--ex-primary, #1E4FA8);
    font-size: 11.5px; font-weight: 700;
}
.ex-dbc__more:hover { text-decoration: underline; }

/* 고르개는 오른쪽 끝에. 좁아지면 아래로 내려온다 */
.ex-dbc__pick {
    margin-left: auto;
    display: flex; gap: 4px;
    padding: 3px;
    border-radius: var(--ex-radius-sm);
    background: var(--ex-surface-1);
}
.ex-dbc__btn {
    padding: 6px 14px;
    border: 0;
    border-radius: calc(var(--ex-radius-sm) - 3px);
    background: transparent;
    color: var(--ex-text-3);
    font-size: 12px; font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.ex-dbc__btn.is-on { background: var(--ex-primary, #1E4FA8); color: #fff; }
.ex-dbc__btn:disabled { opacity: .55; cursor: default; }

.ex-dbc__rules {
    margin: 9px 0 0; padding: 0; list-style: none;
    display: flex; gap: 16px; flex-wrap: wrap;
    font-size: 12.5px;
}
.ex-dbc__rules b { color: var(--ex-text-2); margin-right: 4px; }
.ex-dbc__cap { color: var(--ex-text-3); }
.ex-dbc__note { margin: 7px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--ex-text-3); }

/* 운영이 만든 선택지 목록 (레드 2026-09-18).
   ★ 라디오다 — 보너스는 입금 한 건에 하나만 붙는다.
   ★ 부연설명을 흐리게 두지 않는다. 「1.3 이하 배당은 롤링 제외」를 나중에 알면
     회원은 속았다고 여긴다 — 고르기 전에 읽혀야 한다. */
/* ★ 한 줄로 (레드 2026-09-18 「이거 한줄로가자 너무길어진다」).
     여섯 줄이 세로로 두세 칸씩 쌓이면 지갑 창이 통째로 밀린다.
   ⚠ 부연설명도 <같은 줄>에 붙인다. 좁은 화면에서만 저절로 넘어간다(flex-wrap). */
.ex-dbo { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.ex-dbo__row {
    display: flex; align-items: center; gap: 9px;
    padding: 7px 10px;
    border-radius: var(--ex-radius-sm);
    border: 1px solid var(--ex-line, rgba(255,255,255,.08));
    background: var(--ex-surface-1);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.ex-dbo__row:hover { border-color: rgba(255,255,255,.18); }
.ex-dbo__row.is-on {
    border-color: var(--ex-primary, #1E4FA8);
    background: color-mix(in oklab, var(--ex-primary, #1E4FA8) 12%, var(--ex-surface-1));
}
.ex-dbo__row input { flex: none; accent-color: var(--ex-primary, #1E4FA8); }

/* 이름 · 조건 · 부연설명을 가로로 편다 */
.ex-dbo__main {
    display: flex; align-items: baseline; flex-wrap: wrap;
    gap: 3px 8px; min-width: 0;
}
.ex-dbo__main b { font-size: 12.5px; white-space: nowrap; }
.ex-dbo__terms { font-size: 11.5px; color: var(--ex-text-2); white-space: nowrap; }
.ex-dbo__note { font-size: 11px; line-height: 1.5; color: var(--ex-text-3); }

.ex-dep-tabs,
.ex-wd-tabs {
    display: flex; gap: 6px;
    margin: 0 0 18px;
    padding: 4px;
    border-radius: var(--ex-radius-sm);
    background: var(--ex-surface-2);
}

.ex-dep-tab,
.ex-wd-tab {
    flex: 1;
    display: flex; align-items: center; justify-content: center; gap: 7px;
    padding: 10px 12px;
    border: 0;
    border-radius: calc(var(--ex-radius-sm) - 2px);
    background: transparent;
    color: var(--ex-text-3);
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.ex-dep-tab:hover,
.ex-wd-tab:hover { color: var(--ex-text-2); }

/* 고른 탭은 <바탕까지> 바꾼다. 글자색만 바꾸면 어느 쪽이 켜졌는지
   흐린 화면에서 안 보인다. */
.ex-dep-tab.is-on,
.ex-wd-tab.is-on {
    background: var(--ex-surface-1);
    color: var(--ex-text-1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .25);
}

.ex-dep-tab i,
.ex-wd-tab i { font-size: 12px; }

.ex-btn-sm { padding: 6px 12px; font-size: 12px; }

/* =====================================================================
   hidden 은 <언제나> 이긴다 (2026-08-27)

   ★ HTML 의 hidden 속성은 브라우저 기본 스타일에서 display:none 이라,
     클래스가 display 를 지정하면 그쪽이 이긴다. 실제로 계좌 안내 알림이
     hidden=true 인데 .ex-dep-alert 의 display:flex 때문에 그대로 떠 있었다.

   ★ 이건 화면마다 따로 겪게 되는 종류다 — JS 는 el.hidden = true 를
     제대로 했는데 화면에서는 안 사라지니, 원인이 CSS 라는 것을 늦게 안다.
     한 줄로 전역에서 끝낸다.
   ===================================================================== */
[hidden] { display: none !important; }

/* =====================================================================
   거래·베팅 내역 표 — 전달본에 <없는 두 가지>만 채운다 (2026-08-29)

   ★ 전달본 account.html 의 금액 칸은 <한 줄>이다. 우리는 두 줄일 수 있다 —
     회원이 화면에서 본 숫자(표시 통화)와 실제로 움직인 코인이 다르기 때문에
     잔액과 지갑 금액을 아래에 붙인다.
     그런데 <small> 에 규칙이 없어 한 줄에 뭉쳐 붙어 버렸다.
     「+1,383 KRW잔액 89,578,971 KRW+1 USDT · 잔액 …」 — 읽을 수가 없다.

   ★ 시각 칸도 좁아 「8. 29. 오전 / 1:03」 으로 두 줄로 접혔다.
     전달본은 한 줄이다. 이 칸만 안 접히게 한다.

   ⚠ 전달본에 없는 이름에만 건다. 겹치는 이름을 손대면 이 파일이
     디자인 CSS <앞에> 실리므로 어차피 지지만, 그전에 헷갈린다.
   ===================================================================== */
.ac-table td:first-child { white-space: nowrap; }

.ac-table .ac-amt--in small,
.ac-table .ac-amt--out small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-5);
}

/* ── 배팅카드 폴더 — 무엇에 걸었는지 ──────────────────────────────
 * (레드 2026-08-29 "배팅카트에 선택한 마켓 betName betLine이 명확하지않음")
 *
 * ★ 전에는 「IFK Varnamo 2.38 / Ljungskile SK vs IFK Varnamo」 뿐이었다.
 *   그 팀의 <승리>에 건 것인지 <핸디캡>에 건 것인지 알 수 없었다 —
 *   둘 다 팀 이름이 라벨이라서다.
 *
 * ⚠ 마켓 이름은 <small 안의 b> 다. 전달본 .slip__pick b 규칙(fs-xs·800)이
 *   자손까지 닿으므로, 여기서 되돌려 준다. 안 그러면 경기 이름보다
 *   작아져 읽히지 않는다.
 */
.slip__pick small .ex-slip-mkt {
    font-size: inherit;
    font-weight: 800;
    color: var(--text-3);
}
.slip__pick small .ex-slip-mkt::after {
    content: " · ";
    font-weight: 400;
    color: var(--text-6);
}

/* 기준선 칩. 목록·상세 단추(.sb-pick em)와 같은 결로 맞춘다 —
   같은 값이 자리마다 다르게 보이면 회원이 다른 것으로 읽는다. */
.slip__pick .ex-slip-line {
    font-style: normal;
    margin-left: 5px;
    padding: 1px 5px;
    border-radius: var(--r-xs);
    background: color-mix(in srgb, var(--primary) 42%, transparent);
    color: #FFFFFF;
    font-size: var(--fs-xs);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ── 지갑 탭이 넘칠 때 ────────────────────────────────────────────
 * (레드 2026-08-29 "콘버트 짤림!")
 *
 * ★ 탭이 여섯인데 flex:1 로 <균등 분할>하고 있었다. 한국어는 「전환」처럼
 *   짧아 들어맞지만, 영어는 「Buy crypto」·「Convert」로 길어져
 *   마지막 탭이 모달 밖으로 밀려 나갔다.
 *
 * ★ 균등 분할을 풀고 <글자만큼> 차지하게 한 뒤, 넘치면 민다.
 *   줄여서 밀어 넣으면 「Conve…」처럼 잘려 무슨 탭인지 알 수 없다 —
 *   탭 이름은 잘리면 안 되는 종류의 글자다.
 *
 * ⚠ scroll-x 를 함께 붙였다(마크업). 그래야 PC 에서 휠로도 밀린다 —
 *   전달본은 스크롤바를 감추기 때문에 밀 방법이 없다.
 */
.ex-wallet-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ex-wallet-tabs::-webkit-scrollbar { display: none; }

.ex-wallet-tabs .ex-wtab {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* ── 배팅카드 폴더 툴팁 ──────────────────────────────────────────
 * (레드 2026-08-29 "배팅카트 선택한 경기정보란이 작으니 거기에 툴팁을 붙이자
 *  어떤리그 어떤경기 시간 어떤마켓 어떤 벳라인에 했는지")
 *
 * ★ 카트 한 줄은 좁아서 「최종 승패 · Yokohama DeNa Bay…」로 잘린다.
 *   걸어 둔 것을 다시 확인할 길이 없어, 회원은 지우고 다시 담아 봐야 했다.
 *
 * ★ <왼쪽으로> 편다. 카트는 화면 오른쪽 끝에 붙어 있어서, 오른쪽으로 펴면
 *   화면 밖으로 나간다.
 *
 * ⚠ 폴더 줄이 position:relative 여야 한다. 전달본 .slip__pick 에는 없다 —
 *   우리가 준다. 안 주면 툴팁이 <화면 왼쪽 위 구석>에 뜬다.
 *
 * ⚠ 손가락 화면에서는 안 쓴다. 올려놓을 수가 없어 영영 못 보는 자리가 된다.
 */
.slip__pick { position: relative; }

@media (hover: hover) {
    .ex-slip-tip {
        /*
         * ⚠ fixed 다. 카트가 두 겹으로 자르기 때문이다 —
         *   .slip 은 둥근 모서리 때문에 overflow:hidden 이고,
         *   .slip__body 는 세로 스크롤이라 가로도 함께 자른다.
         *   absolute 로 두면 visibility 는 visible 인데 화면에는 안 보인다.
         * ⚠ 세로 위치(top)는 JS 가 준다. CSS 로는 폴더 줄 위치를 알 수 없다.
         */
        position: fixed;
        right: calc(var(--gutter, 16px) + 300px + 10px);
        z-index: 60;

        display: grid;
        gap: 3px;
        width: max-content;
        max-width: 280px;
        padding: 10px 12px;
        border: 1px solid var(--ex-line);
        border-radius: 10px;
        background: var(--ex-surface-1, #171436);
        box-shadow: 0 14px 34px rgba(0, 0, 0, .55);

        font-size: 12px;
        line-height: 1.45;
        text-align: left;
        white-space: normal;

        visibility: hidden;
        opacity: 0;
        transition: opacity .12s, visibility .12s;
        pointer-events: none;   /* 툴팁이 마우스를 가로채면 그 밑 단추를 못 누른다 */
    }

    .ex-slip-tip.is-on { visibility: visible; opacity: 1; }

    /* 화면이 좁으면 카트가 아래로 내려온다 — 그때는 위로 편다 */
    @media (max-width: 1100px) {
        .ex-slip-tip {
            right: var(--gutter, 16px);
            left: var(--gutter, 16px);
            max-width: none;
        }
    }
}

@media (hover: none) {
    .ex-slip-tip { display: none; }
}

.ex-slip-tip__league { color: var(--ex-text-2); font-weight: 800; }
.ex-slip-tip__match  { color: var(--ex-text-1); font-weight: 700; }
.ex-slip-tip__when   { color: var(--ex-text-3); font-size: 11px; }

.ex-slip-tip__sep {
    height: 1px;
    margin: 5px 0;
    background: var(--ex-line);
}

/* 이름과 값 두 칸. 값이 길면 접힌다 */
.ex-slip-tip__row {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 8px;
    align-items: baseline;
}
.ex-slip-tip__row em { font-style: normal; color: var(--ex-text-3); }
.ex-slip-tip__row span { color: var(--ex-text-1); }
.ex-slip-tip__row b {
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 5px;
    background: color-mix(in srgb, var(--ex-primary, #1E4FA8) 42%, transparent);
    color: #FFFFFF;
    font-variant-numeric: tabular-nums;
}

/* ── 지갑 입력칸 아래 도움말 ──────────────────────────────────────
 * (레드 2026-08-29 지갑 정리)
 *
 * ★ 「비워 두면 전부」·「얼마 더 채우면」 같은 <행동을 바꾸는 말>이 들어간다.
 *   경고가 아니라 안내라 흐린 색이고, 라벨보다 한 단 작다.
 */
#walletModal .field__hint {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-5, #6E829E);
}

/* ==========================================================================
   상담 창 — 두 겹 (레드 2026-09-15 시안)

     home  로고 · 환영 문구 · 갈 길 둘(상담원 · 텔레그램) · 아래 탭
     talk  실제 대화 (기존 조각 그대로, id 하나도 안 바꿨다)

   ★ 겹을 <감추기만> 한다. 안 그리면 chat.js 가 열자마자 #exChatBody 에 붙이는
     메시지를 영영 잃는다 — 그쪽은 이 창이 두 겹인 줄 모른다.
   ========================================================================== */
.ex-chat-panel.is-home .ex-chat-head,
.ex-chat-panel.is-home .ex-chat-notice,
.ex-chat-panel.is-home .ex-chat-body,
.ex-chat-panel.is-home .ex-chat-foot,
.ex-chat-panel.is-home .ex-chat-rate,
.ex-chat-panel.is-home .ex-chat-actions{ display:none !important; }
.ex-chat-panel.is-talk .cw-home{ display:none; }

/* ---- 첫 화면 ---------------------------------------------------------- */
.cw-home{ display:flex; flex-direction:column; height:100%; background:#fff; }
/* 머리 — 사파이어 판 위에 워드마크와 인사 */
.cw-home__top{
  position:relative; padding:22px 20px 26px;
  background:linear-gradient(160deg, #123C86, #0B2A63);
  border-radius:0 0 18px 18px;
}
.cw-home__logo{ display:block; height:34px; width:auto; }
.cw-home__x{
  position:absolute; top:18px; right:16px;
  width:32px; height:32px; display:grid; place-items:center;
  border:0; background:none; color:rgba(255,255,255,.9); font-size:20px; cursor:pointer;
}
.cw-home__hi{
  margin:18px 0 0; color:#fff;
  font-size:19px; font-weight:800; line-height:1.45;
  /* ⚠ 문구에 줄바꿈이 들어 있다(\n). 그대로 살려야 두 줄로 선다 */
  white-space:pre-line;
}

/* 갈 길 카드 — 흰 판 위에 두 줄 */
.cw-home__list{ flex:1; padding:14px; display:grid; gap:10px; align-content:start; }
.cw-link{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:14px 16px; border-radius:12px;
  /* ⚠ 바탕이 흰색이라 카드도 흰색이면 안 갈린다 — 살짝 파란 회색으로 띄운다 */
  background:#FAFBFD; border:1px solid #E7EBF3;
  box-shadow:0 1px 2px rgba(11,42,99,.05);
  color:#15224A; font-size:16px; font-weight:800; text-align:left; cursor:pointer;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.cw-link:hover{ border-color:rgba(18,60,134,.28); box-shadow:0 3px 10px rgba(11,42,99,.10); }
.cw-link:active{ transform:translateY(1px); }
.cw-link__ico{ font-size:24px; color:#1EA7F0; flex:none; width:30px; text-align:center; }
.cw-link__name{ flex:1; min-width:0; }
.cw-link__go{ font-size:14px; color:#9AA6C2; flex:none; }

/* 아래 탭 */
.cw-tabs{
  display:grid; grid-template-columns:1fr 1fr;
  border-top:1px solid rgba(18,60,134,.10); background:#fff;
  /*
   * ⚠ 실기기 아래에는 <홈 인디케이터>가 있다. 브라우저 안에서 재면
   *   852px 가 다 내 것처럼 보이지만, 기기에서는 마지막 한 뼘이 가려진다 —
   *   그 자리에 「홈 / 1:1상담」 글자가 놓여 있었다.
   * ★ env() 는 안전영역이 없는 기기에서 0 이라, 데스크톱에는 영향이 없다.
   */
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.cw-tabs button{
  display:grid; justify-items:center; gap:4px; padding:12px 0 14px;
  border:0; background:none; cursor:pointer;
  font-size:13px; font-weight:700; color:#7E8AA8;
}
.cw-tabs button i{ font-size:21px; }
.cw-tabs button.is-on{ color:#1EA7F0; }

/* ---- 대화 머리 — 뒤로가기와 아바타가 붙었다 --------------------------- */
.ex-chat-back{
  width:28px; height:28px; flex:none; display:grid; place-items:center;
  border:0; background:none; color:inherit; font-size:15px; cursor:pointer;
}
.ex-chat-ava{
  width:28px; height:28px; flex:none; display:grid; place-items:center;
  border-radius:999px; background:rgba(30,167,240,.16); color:#1EA7F0; font-size:14px;
}

/* ==========================================================================
   상담 창 — 시안에 맞춘 머리 (레드 2026-09-15)

   앞서 올린 규칙을 <덮는다>. 로고와 인사가 시안보다 작았고, 대화 머리가
   글자 한 줄이라 「누구와 말하는지」가 안 보였다.
   ========================================================================== */

/* ---- 첫 화면 머리 — 시안 비율로 잰 값 ---------------------------------
   ★ 시안은 <데스크톱 위젯> 그림이다 (743×1279, 폭:높이 0.58).
     모바일 창은 393×852 로 0.46 이라 <높이로 맞추면 안 맞는다> —
     폭을 자로 삼아 환산했다. (판 높이 = 폭의 55.8%, 로고 폭 = 폭의 35.9%)
   --------------------------------------------------------------------- */
.cw-home__top{
  /* ⚠ 아래 여백 26 — 로고를 키운 만큼 덜어 판 높이(폭의 55%)를 지킨다 */
  padding:26px 28px 26px;
  border-radius:0 0 22px 22px;
}
/* ★ 로고를 시안 크기로. 창을 열자마자 어디인지 알아야 한다 */
/* ★ 폭으로 맞춘다. 로고 파일의 종횡비가 시안 그림과 달라 높이로 잡으면 좁아진다 */
.cw-home__logo{ height:67px; }
.cw-home__x{ top:24px; right:20px; font-size:22px; }
.cw-home__hi{
  margin:26px 0 0;
  font-size:25px; font-weight:800; line-height:1.42;
}

/* ⚠ 파고들던 음수 마진을 <걷었다>. 시안에는 겹침이 없고, 파란 판 아래로
     한 칸 띄운 자리에서 카드가 시작한다 */
.cw-home__list{ margin-top:0; padding:24px 20px 14px; gap:13px; }

/* ---- 대화 머리 — 아바타 · 워드마크 · 상태 ------------------------------ */
/* ★★ 시안은 <데스크톱 위젯> 그림이다 (728×1279). 모바일 창과 종횡비가
     달라 <높이로 맞추면 안 맞는다> — 폭을 자로 삼아 환산했다.
     머리 높이 = 폭의 25%, 아바타 = 12.6%, 워드마크 폭 = 22%. */
.ex-chat-panel.is-talk .ex-chat-head{
  display:flex; align-items:center; gap:12px;
  padding:10px 20px; min-height:98px;
  background:linear-gradient(160deg, #123C86, #0B2A63);
  border-bottom:0;
}
.ex-chat-panel.is-talk .ex-chat-back{ color:#fff; font-size:24px; width:24px; }
/* 흰 원 안에 하늘색 헤드셋 — 시안의 상담원 얼굴 자리다 */
.ex-chat-panel.is-talk .ex-chat-ava{
  width:50px; height:50px; background:#fff; color:#1EA7F0; font-size:24px;
}
/* ★ 워드마크와 상태를 <왼쪽 한 줄에> 세운다 (레드 2026-09-15).
     상태가 워드마크 가운데 아래에 떠 있어 어느 쪽에도 안 붙어 보였다 —
     시안에서는 둘의 왼쪽 끝이 맞아 한 덩이로 읽힌다. */
.ex-chat-who{ flex:1; min-width:0; display:grid; gap:5px; justify-items:start; }
/* ★ 시안은 워드마크 폭이 창 폭의 22%(393 기준 86px)다. 로고 파일의
     종횡비가 시안 그림과 달라 <높이로 잡으면 좁아진다> — 높이 40 이 폭 86 이다 */
.ex-chat-mark{ height:40px; width:auto; justify-self:start; }
/* 상담 가능 표시 — 앞의 초록 점이 「지금 되는가」를 말한다 */
.ex-chat-panel.is-talk .ex-chat-state{
  display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:700; color:rgba(255,255,255,.85);
}
.ex-chat-panel.is-talk .ex-chat-state::before{
  content:""; width:10px; height:10px; border-radius:999px; background:#3FD98A; flex:none;
}
/* ⚠ 점과 글자가 <같은 말>을 해야 한다. 「연결이 어렵다」 옆의 초록 점은
     글자를 안 읽은 사람에게 정반대를 알린다 — 색이 글자보다 빨리 읽힌다.
     chat.js 가 data-state 를 찍는다. 아직 안 찍혔으면(첫 렌더) 회색이 안전하다. */
.ex-chat-panel.is-talk .ex-chat-state[data-state="online"]::before{ background:#3FD98A; }
.ex-chat-panel.is-talk .ex-chat-state[data-state="away"]::before{ background:#F5B942; }
.ex-chat-panel.is-talk .ex-chat-state[data-state="offline"]::before{ background:#9AA6C2; }
.ex-chat-panel.is-talk .ex-chat-state:empty::before{ background:#9AA6C2; }
/* ⚠ 한 줄로 둔다. 상담원 이름이 붙으면 길어지는데, 두 줄이 되면 머리가
     주저앉고 워드마크와 겹친다 — 실제로 그랬다 */
.ex-chat-panel.is-talk .ex-chat-state{
  /* ⚠ grid 칸을 꽉 채우면(stretch) 글자가 가운데로 밀린다 — 왼쪽에 못 박는다 */
  justify-self:start; max-width:100%;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ex-chat-panel.is-talk .ex-chat-x{ color:#fff; font-size:21px; opacity:1; }
/* ★ 시안의 「•••」 자리. <기능 없는 장식은 두지 않는다> — 눌러서
     아무 데도 안 가는 단추가 하나 있으면 나머지도 안 믿게 된다.
     여기는 1:1 문의로 남기는 길이다. */
.ex-chat-more{
  width:28px; height:28px; flex:none; display:grid; place-items:center;
  border:0; background:none; color:rgba(255,255,255,.9); font-size:19px; cursor:pointer;
  text-decoration:none;
}
/* 창 이름 글자는 머리에서 뺀다 — 워드마크가 그 일을 한다 */
.ex-chat-panel.is-talk .ex-chat-title{ display:none; }

/* ==========================================================================
   상담 창 대화 — 밝은 결 (레드 2026-09-15 시안)

   ★ 첫 화면이 흰 판인데 대화만 어두우면 <다른 창으로 넘어온 것>처럼 보인다.
     한 창이면 한 결이어야 한다.
   ⚠ 앞 규칙을 덮는다 — 원본을 고치지 않는다. FreeMarker 화면(로그인·가입)도
     같은 exit.css 를 쓰므로, 두 겹 규칙이 없는 그쪽은 예전 모습 그대로다.
   ========================================================================== */
.ex-chat-panel.is-talk{ background:#fff; }
.ex-chat-panel.is-talk .ex-chat-body{
  /* ⚠ 흰색이 아니라 <아주 옅은 회색>이다. 풍선도 연한 색이라 바탕이 순백이면
       둘이 안 갈리고 글자만 떠 있는 것처럼 보인다 */
  background:#FAFAFB; padding:19px 18px; gap:14px;
}

/* ---- 말풍선 ------------------------------------------------------------ */
.ex-chat-panel.is-talk .ex-chat-msg{ max-width:88%; gap:4px; }

/* 상담원 — 왼쪽, 연한 파란 판. 앞에 동그란 헤드셋이 붙는다(::before) */
.ex-chat-panel.is-talk .ex-chat-admin{
  position:relative; padding-left:47px;
}
/* ⚠⚠ 글꿃 글리프로 그렸더니 <빈 문자열>이 나왔다 — 실측 content:"" .
     파 아이콘은 글꿃 이름·두께가 판마다 달라 CSS content 로는 조용히 안 뜼다.
     오류도 안 나서 「왜 아바타가 없지」만 남는다.
   ★ 그림을 <직접 그려> 깔다. 글꿃이 무엇이든 늘 같은 모양이 나온다. */
.ex-chat-panel.is-talk .ex-chat-admin::before{
  content:"";
  position:absolute; left:0; top:2px;
  width:34px; height:34px; border-radius:999px;
  background:#EAF1FB url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231EA7F0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 13v-1a8 8 0 0 1 16 0v1'/><rect x='2.5' y='13' width='4.5' height='6.5' rx='2'/><rect x='17' y='13' width='4.5' height='6.5' rx='2'/><path d='M20 19.5v.5a3 3 0 0 1-3 3h-2.5'/></svg>") center / 19px 19px no-repeat;
}
.ex-chat-panel.is-talk .ex-chat-admin .ex-chat-text{
  background:#E9EFF8; color:#1A2440;
  /* ⚠ 시안에는 꼬리(각진 모서리)가 없다 — 네 귀가 모두 둥글다 */
  border-radius:12px;
}
/* 회원 — 오른쪽, 사파이어 판에 흰 글자 */
.ex-chat-panel.is-talk .ex-chat-member .ex-chat-text{
  background:#123C86; color:#fff;
  border-radius:12px;
}
.ex-chat-panel.is-talk .ex-chat-text{
  padding:12px 15px; font-size:16px; line-height:1.5;
  /* ⚠ 줄바꿈을 살린다. 회원이 엔터로 나눠 쓴 글이 한 줄로 붙으면 뜻이 달라진다 */
  white-space:pre-wrap; word-break:break-word;
}
/* 보낸 사람 이름·시각 — 시안에는 없다. 말풍선만 남긴다 */
.ex-chat-panel.is-talk .ex-chat-msg > .ex-chat-who{ display:none; }
.ex-chat-panel.is-talk .ex-chat-at{ font-size:11px; color:#9AA6C2; }
/* 시스템 안내 — 가운데 회색 한 줄 */
.ex-chat-panel.is-talk .ex-chat-system{ color:#8B96B4; opacity:1; }

/* ---- 안내 띠 ----------------------------------------------------------- */
/* ★★ 크림색 띠를 <상담원 풍선으로> 바꿨다 (레드 2026-09-15).
     시안에는 이 자리에 띠가 없다 — 같은 말을 상담원이 건넨 첫 마디로 한다.
     화면을 가로지르는 경고 띠는 「문제가 생겼다」로 읽히는데, 실제로는
     <지금 사람이 없으니 남겨 달라>는 안내다.
   ⚠ id(#exChatNotice)와 마크업은 그대로다 — chat.js 가 이 자리에 글을
     채우고 hidden 을 만진다. 모양만 바꿨다. */
.ex-chat-panel.is-talk .ex-chat-notice{
  position:relative;
  margin:19px 18px 0; padding:12px 15px 12px 62px;
  background:#E9EFF8; border:0; border-radius:12px;
  color:#1A2440; font-size:16px; line-height:1.5; font-weight:500;
}
.ex-chat-panel.is-talk .ex-chat-notice::before{
  content:"";
  position:absolute; left:15px; top:12px;
  width:35px; height:35px; border-radius:999px;
  background:#EAF1FB url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231EA7F0' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'><path d='M4 13v-1a8 8 0 0 1 16 0v1'/><rect x='2.5' y='13' width='4.5' height='6.5' rx='2'/><rect x='17' y='13' width='4.5' height='6.5' rx='2'/><path d='M20 19.5v.5a3 3 0 0 1-3 3h-2.5'/></svg>") center / 19px 19px no-repeat;
}
/* ⚠ 띠가 본문 바로 위에 붙으므로 본문 위 여백을 덜어 준다 */
.ex-chat-panel.is-talk .ex-chat-notice:not([hidden]) + .ex-chat-body{ padding-top:14px; }

/* ---- 입력 ------------------------------------------------------------- */
/* ★ 시안은 입력칸과 보내기를 <한 판 안에> 담는다. 줄이 아니라 상자다 */
.ex-chat-panel.is-talk .ex-chat-foot{
  /* ⚠ 아래 여백에 안전영역을 더한다 — 탭바와 같은 까닭이다 */
  margin:0 17px calc(21px + env(safe-area-inset-bottom, 0px));
  padding:10px 10px 10px 14px;
  border:1px solid #E4E8F0; border-radius:16px; background:#fff;
  align-items:center; gap:10px;
}
.ex-chat-panel.is-talk .ex-chat-foot textarea{
  background:none; border:0; color:#15224A;
  border-radius:0; padding:8px 0; font-size:16px;
}
.ex-chat-panel.is-talk .ex-chat-foot textarea::placeholder{ color:#9AA6C2; }
/* 보내기 — 시안의 하늘색 동그란 화살표 */
.ex-chat-panel.is-talk .ex-chat-send{
  width:41px; height:41px; flex:none; border-radius:999px;
  background:#1EA7F0; color:#fff; font-size:17px;
}
.ex-chat-panel.is-talk .ex-chat-send:hover{ background:#0E95DC; }

/* ---- 대화 끝내기 · 별점 ------------------------------------------------ */
.ex-chat-panel.is-talk .ex-chat-actions{ background:#fff; }
.ex-chat-panel.is-talk .ex-chat-end{ color:#7E8AA8; opacity:1; }
.ex-chat-panel.is-talk .ex-chat-end:hover{ color:#15224A; }
.ex-chat-panel.is-talk .ex-chat-rate{
  background:#F6F8FC; border-top:1px solid #E6EBF4; color:#15224A;
}
.ex-chat-panel.is-talk .ex-chat-rate input{
  background:#fff; border:1px solid #E1E7F2; color:#15224A;
}