/* =====================================================================
   CT · 스킨 스킨(지시 2026-10-04) — 이 미러 전용 파일 · index.html 에서 **마지막**에 로드.
   s7 복제본 위에 스킨 시안 구조를 덮는다. 구 s7 규칙(app-skin.css S7-n)은 지우지 않고 여기서 이긴다.
     CT-1 셸   = 가운데 1200 한 덩어리(구 3열 [좌측배너][본문][우측카트] 폐기)
     CT-2 헤더 = 남색 밤하늘 + 3행(로고·지갑·충환·유틸 / 흰 테두리 박스 메뉴 / 공지·이벤트 버튼) · 상단 고정 안 함
     CT-3 홈   = 잭팟 · LIVE GAME LIST │ 출금 TOP · 공지 │ EVENT │ 당첨순위 + 우측 연락 열 / 푸터
   ⚠️ 색은 전부 아래 토큰에서 — 직접 색을 박지 않는다(CT-5 팔레트 마감 때 여기 한 곳만 고친다).
   ⚠️ backdrop-filter 금지(전 미러 NOBLUR 규약 — 모바일 배경 반전 사고).
   ===================================================================== */
:root {
    --sk-w: 1200px;              /* 콘텐츠 폭(시안 360~1560) */
    --sk-side-w: 230px;          /* 홈 우측 연락 열 */
    --sk-gap: 20px;

    --sk-night: #0b1440;         /* 헤더 밤하늘 */
    --sk-night-2: #17286e;
    --sk-box: rgba(6, 12, 40, .72);
    --sk-box-line: #e6ebff;
    --sk-ink: #141414;           /* 본문 바탕 */
    --sk-ink-2: #1f1f1f;
    --sk-row: #2a2a2a;
    --sk-line: #3a3a3a;
    --sk-text: #eef1f8;
    --sk-dim: #9aa2b8;
    --sk-sky: #4aa3ff;           /* 섹션 제목 */
    --sk-red: #d81e2a;           /* 충전 · LIVE */
    --sk-blue: #1f6fd8;          /* 환전 */
    --sk-gold: #ffd23f;          /* 롤링적립 · 금액 · 공지 라벨 */

    /* s7 sticky 기준선 토큰 — 스킨 헤더는 상단 고정이 아니다 → 카트·사이드 sticky 는 화면 위에서 12px. */
    --sk-hdr-h: 0px;
}

/* ── CT-5 · 팔레트 마감(지시 2026-10-04) ─────────────────────────────────────
   s7 의 사이트 전역 토큰(--app-* · 검정+골드)을 스킨 시안 축으로 재매핑한다 — 토큰만 바꾸면
   충환전·게시판·마이페이지·배팅판 등 **토큰을 쓰는 전 화면**이 함께 바뀐다(화면별 수정 0).
     바탕 = 무채 다크(#141414 계열 · 시안 본문) / 패널 = 한 단계씩 밝은 회색
     주색(--app-primary) = 앰버 — 선택 배당·주요 버튼(시안 모바일 선택 배당 주황 계열)
     강조 글자(--sk-gold) = 노랑 — 금액·롤링적립·점수 / 신호색 2번(--app-accent-2) = 하늘색 — 섹션 제목
   ⚠️ s7 이 리터럴로 박아 둔 골드(로그인 CTA 등)는 아래에서 개별로 덮는다. */
:root {
    --app-primary:        #f0a830;
    --app-primary-light:  #ffc766;
    --app-primary-hover:  #f6b445;
    --app-primary-active: #c9861c;
    --app-primary-grad:   linear-gradient(180deg, #ffc766, #e0921c);
    --app-primary-tint:   rgba(240, 168, 48, .12);

    --app-text-primary:   #ffffff;
    --app-text-secondary: #c9ccd6;
    --app-text-muted:     #8f95a3;
    --app-text-dim:       #646a78;

    --app-bg-root:        #0d0d0d;
    --app-bg:             #141414;
    --app-bg-panel:       #1c1c1c;
    --app-bg-panel-2:     #222222;
    --app-bg-panel-3:     #2a2a2a;
    --app-bg-card:        rgba(28, 28, 28, .9);

    --app-border:         #333333;
    --app-border-soft:    #444444;

    --sk-frame-1: #c9861c;
    --sk-frame-2: #f0a830;
    --sk-frame-3: #646a78;
    --sk-glow: 0 0 0 1px rgba(240, 168, 48, .35), 0 8px 24px rgba(0, 0, 0, .5);

    --sk-bg-lighten: #1c1c1c;
    --sk-bg-light:   #242424;
    --sk-bg-dark:    #121212;
    --sk-bg-table:   #2a2a2a;
    --sk-border:     #333333;
    --sk-btn-2nd:    #3a3a3a;

    --app-accent-2:      #4aa3ff;
    --app-accent-2-soft: #8cc4ff;
    --app-accent-2-tint: rgba(74, 163, 255, .14);
}
body { background: var(--sk-ink); background-image: none; color: var(--sk-text); }


/* s7 리터럴 골드 개별 덮기 — 로그인 CTA = 시안 빨강 · 알림 버튼 = 회색 · 모달 테두리 = 중립 */
.login_btn_primary { background: var(--sk-red); color: #fff; }
.app-alert-btn { background: linear-gradient(180deg, #3a3a3a, #262626); }
.app-login-modal { background: rgba(28, 28, 28, .97); border-color: var(--app-border-soft); }
.sk_modal { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 80px rgba(0, 0, 0, .75); }
.league_sidebar .side_menu_block { background: #1c1c1c; border-color: var(--app-border); }
.league_sidebar .sk_user_card    { background: #1f1f1f; border-color: var(--app-border); }
.league_sidebar .side_menu_item.on {
    background: var(--app-primary-tint);
    box-shadow: inset 3px 0 0 var(--app-primary), inset 0 0 0 1px rgba(240, 168, 48, .3);
}
@keyframes c2FeedIn {
    0%   { background: rgba(240, 168, 48, .16); transform: translateY(6px); opacity: .2; }
    35%  { transform: translateY(0); opacity: 1; }
    100% { background: transparent; }
}

/* ── CT-1 · 셸 ─────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
    .page_shell {
        max-width: var(--sk-w);
        margin: 0 auto;
        padding: 0;
        background: transparent;
    }
    .page_shell_body { min-width: 0; flex: 1 1 auto; }
    /* 지시(2026-10-04) · 파트너 페이지 = 전폭(1200 제한 해제 · 좌우 여백 16) */
    .page_shell.is_partner { max-width: none; padding: 0 16px; }
}

/* ── CT-2 · 헤더 ───────────────────────────────────────────────────── */
.pc_header.sk_hdr_top.sk_hdr {
    position: relative;
    top: auto;
    z-index: 60;
    margin: 0;
    padding: 0 0 14px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    /* 불꽃 자산 도착 전 = 밤하늘 그라데이션 + 점광 몇 개(이미지 오면 background-image 한 줄 교체) */
    background:
        radial-gradient(circle at 14% 30%, rgba(255, 111, 176, .22) 0 2px, transparent 70px),
        radial-gradient(circle at 84% 18%, rgba(255, 210, 63, .18) 0 2px, transparent 90px),
        radial-gradient(circle at 62% 72%, rgba(127, 178, 255, .16) 0 2px, transparent 110px),
        radial-gradient(ellipse at 50% 0%, var(--sk-night-2), var(--sk-night) 72%);
}
.pc_header.sk_hdr::before { content: none; }
.sk_hdr .sk_in { width: var(--sk-w); max-width: 100%; margin: 0 auto; }

/* ① 로고 · 지갑 · 충환 · 유틸 */
.sk_hdr .sk_r0 { display: flex; align-items: center; gap: 26px; height: 96px; }
.sk_hdr .sk_logo { flex: 0 0 auto; display: flex; align-items: center; text-decoration: none; }
.sk_hdr .sk_logo img { display: block; max-height: 74px; width: auto; }
.sk_hdr .sk_wallet { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 700; white-space: nowrap; }
.sk_hdr .sk_w_item { display: inline-flex; align-items: center; gap: 4px; position: relative; }
.sk_hdr .sk_w_lb { cursor: pointer; color: var(--sk-text); }
.sk_hdr .sk_w_val { color: var(--sk-gold); font-variant-numeric: tabular-nums; }
.sk_hdr .sk_w_unit { color: var(--sk-text); }
.sk_hdr .sk_w_swap {
    height: 22px; padding: 0 6px; border: 1px solid var(--sk-text); border-radius: 0;
    background: transparent; color: var(--sk-text); font-size: 13px; font-weight: 700; cursor: pointer;
}
.sk_hdr .sk_w_swap:hover { background: rgba(255, 255, 255, .12); }
.sk_hdr .sk_cur { display: inline-flex; position: relative; background: transparent; }

.sk_hdr .sk_cashbtns { display: flex; flex: 0 0 auto; }
.sk_hdr .sk_cashbtn {
    display: inline-flex; align-items: center; gap: 4px;
    height: 42px; padding: 0 16px; border: 0; border-radius: 0;
    color: #fff; font-size: 14px; font-weight: 700; cursor: pointer;
}
.sk_hdr .sk_cashbtn i { font-size: 11px; }
.sk_hdr .sk_cashbtn_dep { background: var(--sk-red); }
.sk_hdr .sk_cashbtn_wd { background: var(--sk-blue); }
.sk_hdr .sk_cashbtn:hover { filter: brightness(1.12); }

.sk_hdr .sk_utils { margin-left: auto; display: flex; align-items: center; font-size: 13px; white-space: nowrap; }
.sk_hdr .sk_u {
    position: relative;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 6px; border: 0; background: transparent;
    color: #d6dcf0; font-size: 13px; cursor: pointer;
}
.sk_hdr .sk_u + .sk_u::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 1px; background: rgba(255, 255, 255, .25); }
.sk_hdr .sk_u:hover { color: #fff; }
.sk_hdr .sk_u_nick img { width: 18px; height: 18px; object-fit: contain; }
.sk_hdr .sk_u_partner { color: var(--sk-gold); }
.sk_hdr .sk_u .app-msg-badge { position: static; margin-left: 2px; }

/* 비로그인 = 로그인·가입 버튼군(구 hdr_btn 재사용) — 오른쪽 끝 */
.sk_hdr .sk_guest { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.sk_hdr .sk_guest .hdr_btn { height: 34px; padding: 0 14px; border-radius: 0; font-size: 13px; font-weight: 700; }
.sk_hdr .sk_guest .hdr_btn_login { background: var(--sk-red); border: 0; color: #fff; }
.sk_hdr .sk_guest .hdr_btn_signup { background: var(--sk-blue); border: 0; color: #fff; }
.sk_hdr .sk_guest .hdr_btn_anon { background: transparent; border: 1px solid var(--sk-text); color: var(--sk-text); }
.sk_hdr .sk_guest .hdr_btn_icon { width: 34px; padding: 0; background: transparent; border: 1px solid rgba(255, 255, 255, .3); color: var(--sk-text); }
.sk_hdr .sk_guest .hdr_btn_icon svg { width: 16px; height: 16px; fill: currentColor; }
.sk_hdr .sk_guest .app-header-login-input { height: 34px; border-radius: 0; }

/* ② 흰 테두리 박스 메뉴 */
.sk_hdr .sk_gnb {
    display: flex; align-items: center;
    height: 66px; padding: 0 38px;
    border: 2px solid var(--sk-box-line);
    background: var(--sk-box);
}
/* 큰 글씨 7종(실시간~미니게임) + 작은 링크 5종 — 1196px 안에 한 줄(지시 2026-10-04 · 베팅가이드·롤링적립 제거로 확보한 폭) */
.sk_hdr .sk_gnb_big { display: flex; align-items: center; gap: 28px; }
.sk_hdr .sk_gnb_item {
    color: #fff; text-decoration: none; white-space: nowrap;
    font-size: 20px; font-weight: 900; letter-spacing: -.5px;
}
.sk_hdr .sk_gnb_item:hover, .sk_hdr .sk_gnb_item.active { color: var(--sk-gold); }
.sk_hdr .sk_gnb_sm { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.sk_hdr .sk_gnb_link {
    padding: 0; border: 0; background: transparent; cursor: pointer;
    color: #fff; font-size: 15px; font-weight: 700; white-space: nowrap;
}
.sk_hdr .sk_gnb_link:hover { color: var(--sk-gold); }
/* 헤더 유틸 — 롤링적립(노랑 · 파트너 옆) · 로그아웃(아이콘 + 글자) */
.sk_hdr .sk_u_roll { color: var(--sk-gold); font-weight: 700; }
.sk_hdr .sk_u_logout i { font-size: 12px; }

/* ③ 공지 티커 + 이벤트 버튼 */
.sk_hdr .sk_r2 { display: flex; align-items: center; gap: 14px; height: 52px; }
.sk_hdr .sk_notice {
    flex: 1 1 auto; min-width: 0; width: auto; max-width: none;
    height: 28px; margin: 0; padding: 0 0 0 30px;
    background: transparent; border: 0;
    color: #fff; font-size: 14px; font-weight: 700;
}
.sk_hdr .sk_notice .hdr_notice_tag { color: var(--sk-gold); font-size: 14px; margin-right: 18px; background: transparent; padding: 0; }
.sk_hdr .sk_evbtns { flex: 0 0 auto; display: flex; gap: 8px; }
.sk_hdr .sk_ev {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px; border: 0; border-radius: 8px;
    font-size: 15px; font-weight: 900; cursor: pointer; white-space: nowrap;
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .45);
}
.sk_hdr .sk_ev small { font-size: 9px; font-weight: 700; line-height: 1; }
.sk_hdr .sk_ev_pb { background: linear-gradient(#8ee6ff, #3fb6d8); color: #0a3a7a; }
.sk_hdr .sk_ev_cp { background: linear-gradient(#ff9fb8, #e8577e); color: #4a0a1e; }
/* 룰렛 = 좌우 버튼과 같은 「밝은 바탕 + 진한 글자」 축(지시 — 흰 글자 폐기) */
.sk_hdr .sk_ev_rl { background: linear-gradient(#c9b6ff, #8f6cf0); color: #24104f; }
.sk_hdr .sk_ev_at { background: linear-gradient(#ffe066, #f2b705); color: #5a3200; }
.sk_hdr .sk_ev:hover { filter: brightness(1.08); }

/* ── CT-3 · 홈 ─────────────────────────────────────────────────────── */
/* 구 S7-9 home_index 그리드(본문|레일 270) 무력화 — 스킨 홈은 자체 그리드(sk_home_grid). */
.page_shell_body .main_index_container.home_index.sk_home { display: block; padding: 16px 0 40px; }
.sk_home_grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--sk-side-w); gap: var(--sk-gap); align-items: start; }
.sk_main { min-width: 0; }

/* 잭팟 띠 기본 규칙 — c1 app-home.css JP-2 원문 이식(s7 계열엔 없던 규칙). */
.jackpot_wrap { width: 100%; max-width: 1248px; margin: 0 auto; padding: 18px 0 0; box-sizing: border-box; }
.jackpot_banner { position: relative; width: 100%; overflow: hidden; border-radius: 8px; background: #0b0b0b; }
.jackpot_bg { display: block; width: 100%; height: auto; }
.jackpot_amount {
    position: absolute; top: 0; right: 0; bottom: 0; left: 38%;
    display: flex; align-items: center; justify-content: flex-end; gap: .35em;
    padding-right: 4%;
    font-size: clamp(15px, 3.3vw, 42px); font-weight: 800; line-height: 1; letter-spacing: .01em;
    pointer-events: none;
}
.jp_cur { font-size: .52em; color: #f3d489; text-shadow: 0 2px 4px rgba(0, 0, 0, .7); }
.jp_num {
    font-size: 1em; color: #ffd76a; font-variant-numeric: tabular-nums;
    background: linear-gradient(180deg, #fff3c4 0%, #ffd76a 45%, #e0a020 100%);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .75));
}

.sk_jackpot.jackpot_wrap { max-width: none; padding: 0; }
.sk_jackpot .jackpot_banner { border-radius: 0; }
.sk_jackpot .jackpot_bg { height: 164px; object-fit: cover; object-position: left center; }
.sk_jackpot .jackpot_amount { left: 40%; padding-right: 26px; font-size: 64px; font-family: "Oswald", "Arial Narrow", sans-serif; }
.sk_jackpot .jp_cur { font-size: .9em; color: var(--sk-gold); }
/* JACKPOT(2026-10-28) · 최근 당첨자 띠(잭팟 띠 아래 한 줄 흐름 · 잭팟이벤트 「최근 당첨자 띠」 ON) */
.jackpot_ticker { overflow: hidden; white-space: nowrap; background: #14110a; border-top: 1px solid #3a3220; color: #e9e2c8; font-size: 13px; }
.jackpot_ticker_track { display: inline-block; padding: 7px 0; padding-left: 100%; animation: jackpot_roll 28s linear infinite; }
.jackpot_ticker_item { margin-right: 36px; }
.jackpot_ticker_item em { font-style: normal; color: var(--sk-gold); font-weight: 700; margin-right: 4px; }
@keyframes jackpot_roll { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.sk_cols { display: grid; grid-template-columns: 562px minmax(0, 1fr); gap: 21px; }
.sk_col_l, .sk_col_r { min-width: 0; }

.sk_sec { margin-top: 30px; min-width: 0; }
.sk_sec_title {
    display: flex; align-items: center; gap: 10px;
    margin: 0 0 0; padding-bottom: 10px;
    border-bottom: 1px solid var(--sk-line);
    color: var(--sk-sky); font-size: 22px; font-weight: 500; line-height: 1.1;
}
.sk_sec_title a { color: inherit; text-decoration: none; }
.sk_live { background: var(--sk-red); color: #fff; padding: 3px 9px; font-weight: 500; }
.sk_empty { padding: 18px 10px; color: var(--sk-dim); font-size: 13px; }

/* LIVE GAME LIST */
.sk_games { font-size: 13px; }
.sk_lg { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--sk-row); font-weight: 700; border-bottom: 1px solid #000; }
.sk_lg_ico { width: 18px; height: 18px; object-fit: contain; }
.sk_lg_flag { width: 22px; height: 15px; object-fit: cover; }
.sk_lg_name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 지시(2026-10-04) · **배당은 무조건 보인다** — 배당 3칸은 고정폭 + 말줄임 없음, 줄어드는 건 팀명(1fr)만. */
.sk_game {
    display: grid; grid-template-columns: 96px 46px minmax(0, 1fr) 54px 58px 54px minmax(0, 1fr);
    background: var(--sk-ink-2); border-bottom: 1px solid #000; cursor: pointer; font-weight: 500;
}
.sk_game > span { padding: 9px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk_game > .sk_g_odd, .sk_game > .sk_g_draw { padding: 9px 4px; overflow: visible; text-overflow: clip; color: #fff; }
.sk_game:hover { background: #262626; }
.sk_g_vs { background: #111; color: var(--sk-gold); text-align: center; }
.sk_g_odd { text-align: right; font-variant-numeric: tabular-nums; }
.sk_g_odd_r { text-align: left; }
.sk_g_draw { text-align: center; border-left: 1px solid #000; border-right: 1px solid #000; font-variant-numeric: tabular-nums; }
.sk_g_team_r { text-align: right; }

/* 인기경기(A안 · 잭팟 아래 전폭 · 지시 2026-10-04 캡처 정합) — 캐러셀·카드 골격은 app-home.css 정본(.strip_* / .pop_*) 그대로.
   PC 3장(--vis 3) / ≤900 1장(app-home 정본). s7 골드 프레임 PNG(::before) 는 끈다.
   제목 줄 = [인기경기] ····· [‹][›][MORE] — ‹ › = 둥근 남색 원, MORE = 글자 버튼. */
.sk_pop { margin-top: 24px; }
/* 🔴 노출 3장 — s7 app-skin `.page_shell.no_side .pop_strip { --vis: 4 }`(0,3,0)가 이겨서 4장이 나왔다 → 같은 0,3,0 + 나중 파일로 덮는다.
      appStrip JS 가 이 --vis 를 읽어 칸 폭(창폭÷3)을 정한다. 모바일 1장은 아래 ≤900 블록. */
.page_shell .sk_pop .pop_strip { --vis: 3; }
@media (max-width: 900px) { .page_shell .sk_pop .pop_strip { --vis: 1; } }
.sk_pop_head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--sk-line); }
.sk_pop_head .sk_sec_title { border-bottom: 0; padding-bottom: 0; margin: 0; }
.sk_pop_head .home_sec_tools { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.sk_pop .home_sec_tools .strip_nav {
    width: 40px; height: 40px; border-radius: 50%;
    background: #222b44; border: 0; color: #b9c3e0; font-size: 20px; line-height: 1;
}
.sk_pop .home_sec_tools .strip_nav:hover { background: #2e3a5e; color: #fff; }
.sk_pop .home_sec_tools .home_more {
    order: -1;                                         /* 캡처 = MORE 가 ‹ › 왼쪽 */
    height: auto; padding: 0 6px; border: 0; background: transparent;
    color: #fff; font-size: 14px; font-weight: 800; line-height: 40px;
}
.sk_pop .home_sec_tools .home_more::before { content: "+"; margin-right: 2px; }
.sk_pop .home_sec_tools .home_more:hover { background: transparent; color: var(--sk-gold); }
.home_index.sk_home .pop_card {
    padding: 18px 8px 8px; gap: 14px;   /* 지시 · 좌우·아래 8 — 무승부 3칸일 때 「원정」 글자 줄바꿈 방지 */
    background: #1a1a1a; border: 0; border-radius: 14px;
}
.home_index.sk_home .pop_card::before { content: none; }
.home_index.sk_home .pop_card:hover { filter: none; background: #1f1f22; }
/* 입체감(지시) — 위쪽 하이라이트 보더 + 바깥 그림자 · hover 시 살짝 뜸 */
.home_index.sk_home .pop_card {
    border: 1px solid #2c2c30; border-top-color: #3d3d44;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .05);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* hover = 튀어나오지 않게(이동·확대 없음 — 위 영역 침범으로 border-top 이 가려지던 현상) · 테두리만 옅게 밝아짐 */
.home_index.sk_home .pop_card:hover { transform: none; border-color: #4a4a52; box-shadow: 0 6px 16px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .07); }
/* 머리 줄 = [종목(좌)] [리그기 + 리그명(가운데 · 하늘색)] [빈 칸(가운데 정렬 기준)] */
.home_index.sk_home .pop_league.sk_pop_lg {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px;
    white-space: nowrap; overflow: visible;
}
.sk_pop_sport { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: var(--sk-dim); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.sk_pop_sport img { width: 18px; height: 18px; object-fit: contain; flex: none; }
.sk_pop_lgname { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.sk_pop_lgname img { width: 22px; height: 15px; object-fit: cover; flex: none; border-radius: 2px; }
.sk_pop_lgname b { color: var(--sk-sky); font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; }
.home_index.sk_home .pop_emblem { width: 44px; height: 44px; }
.home_index.sk_home .pop_team_name { font-size: 13.5px; font-weight: 700; }
.home_index.sk_home .pop_date { color: #fff; font-size: 14px; font-weight: 700; }
.home_index.sk_home .pop_time { color: #fff; font-size: 20px; font-weight: 800; }
.home_index.sk_home .pop_market { color: var(--sk-gold); font-size: 12px; font-weight: 800; letter-spacing: 0; }
.home_index.sk_home .pod { height: 42px; padding: 0 10px; white-space: nowrap; background: #2a2a2a; border: 0; border-radius: 6px; font-size: 14px; font-weight: 700; }
.home_index.sk_home .pod b { color: #fff; font-variant-numeric: tabular-nums; }
.home_index.sk_home .pod_home i { color: #ff4d5a; }
.home_index.sk_home .pod_draw i { color: #c9ccd6; }
.home_index.sk_home .pod_away i { color: #3aa0ff; }
.home_index.sk_home .pod:hover { background: #333; }

/* 빈 상태(A안) — 빨간 줄 안내 · 곧 시작할 경기 · 전체보기 */
.sk_live_empty {
    display: flex; align-items: center; gap: 12px;
    margin: 8px 0 6px; padding: 13px 12px;
    background: linear-gradient(90deg, rgba(216, 30, 42, .12), transparent 70%); border-left: 3px solid var(--sk-red);
    font-size: 14px;
}
.sk_live_empty b { display: block; font-weight: 700; }
.sk_live_empty span { color: var(--sk-dim); font-size: 12.5px; }
.sk_live_dot { width: 10px; height: 10px; border-radius: 50%; background: #555; box-shadow: 0 0 0 4px rgba(255, 255, 255, .04); flex: none; }
.sk_up_head { display: flex; align-items: center; gap: 6px; margin: 10px 0 4px; color: var(--sk-gold); font-weight: 700; font-size: 14px; }
.sk_up_head em { margin-left: auto; font-style: normal; font-weight: 400; font-size: 12px; color: var(--sk-dim); }
.sk_game.sk_game_up { grid-template-columns: 76px 52px minmax(0, 1fr) 54px 50px 54px minmax(0, 1fr); }
.sk_game_up > .sk_g_cd { color: var(--sk-gold); font-weight: 700; font-size: 12px; overflow: visible; text-overflow: clip; }
.sk_game_up > .sk_g_tm { color: var(--sk-dim); font-family: "Oswald", "Arial Narrow", sans-serif; overflow: visible; text-overflow: clip; }
.sk_game_up > .sk_g_od { text-align: center; background: #262626; color: #fff; font-variant-numeric: tabular-nums; padding-inline: 2px; overflow: visible; text-overflow: clip; }
.sk_game_up > .sk_g_od.x { color: var(--sk-dim); }
.sk_live_cta {
    display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; padding: 9px;
    background: linear-gradient(#1b2a6e, #0e1748); border: 1px solid #3a4a9a; color: #fff; font-weight: 700; font-size: 13px; text-decoration: none;
}
.sk_live_cta:hover { filter: brightness(1.15); }

/* LIVE — 앞서는 팀 = 굵게 + 연한 파랑(스킨 하늘 계열) */
.sk_game_live > .sk_g_team.lead { color: #8cc4ff; font-weight: 900; }

/* LIVE GAME LIST(진행 중 경기) 행 — [진행 표기][스코어][홈][VS][원정][+N].
   진행 표기·스코어는 **잘리지 않는다**(고정폭 + 말줄임 없음) · 줄어드는 건 팀명(1fr)뿐. */
.sk_game.sk_game_live {
    grid-template-columns: 100px 62px minmax(0, 1fr) 30px minmax(0, 1fr) 46px;
    color: var(--sk-text); text-decoration: none;
}
.sk_game_live > .sk_g_prog { color: var(--sk-red); font-weight: 700; font-size: 12px; overflow: visible; text-overflow: clip; }
.sk_game_live > .sk_g_score { background: #111; color: var(--sk-gold); text-align: center; font-weight: 700; overflow: visible; text-overflow: clip; font-variant-numeric: tabular-nums; }
.sk_game_live > .sk_g_vs2 { color: var(--sk-dim); text-align: center; padding-inline: 0; }
.sk_game_live > .sk_g_more { text-align: center; color: var(--sk-sky); font-weight: 700; overflow: visible; text-overflow: clip; }

/* 순위 표(출금 TOP · 당첨순위) — 창 5행 고정 + c2Feed 세로 롤링. 행 높이 정본 = --sk-rank-row(JS 는 실측 높이로 이동). */
.sk_rank_view { --sk-rank-row: 37px; height: calc(var(--sk-rank-row) * 5); overflow: hidden; }
.sk_rank_view .sk_feed_track { will-change: transform; }
.sk_rank_view .sk_feed_row.sk_rank_row {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 44px; align-items: center; gap: 10px;
    height: var(--sk-rank-row); padding: 0 6px; margin: 0;
    border-bottom: 1px solid #262626; background: transparent; border-radius: 0; font-size: 13px;
}
.sk_rank_view .sk_feed_row.is_new { animation: none; background: rgba(255, 210, 63, .06); }
.sk_more { margin-left: auto; color: var(--sk-dim); font-size: 12px; font-weight: 400; text-decoration: none; }
.sk_more:hover { color: var(--sk-gold); }
.sk_rank_no { color: var(--sk-gold); font-weight: 700; }
.sk_rank_id { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sk_rank_amt { font-variant-numeric: tabular-nums; }
.sk_rank_at { color: var(--sk-dim); text-align: right; }

/* 공지 │ EVENT */
.sk_boards { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sk_bd { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.sk_bd li { border-bottom: 1px solid #2a2a2a; }
.sk_bd a { display: flex; gap: 14px; padding: 10px; color: var(--sk-text); text-decoration: none; font-weight: 700; min-width: 0; }
.sk_bd a:hover { color: var(--sk-gold); }
.sk_bd_k { flex: 0 0 auto; color: var(--sk-dim); font-weight: 400; }
/* NOTICE / EVENT 영문 태그 — 같은 폭으로 세로 정렬 */
.sk_bd .sk_bd_k { width: 52px; font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 11.5px; font-weight: 500; letter-spacing: .04em; }
.sk_board:first-child .sk_bd_k { color: var(--sk-gold); }
.sk_board:last-child .sk_bd_k { color: var(--sk-sky); }
.sk_bd_t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 우측 연락 열 */
.sk_side { display: flex; flex-direction: column; gap: 10px; }
.sk_clock { display: flex; align-items: baseline; gap: 10px; padding: 4px 0 2px; font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 26px; font-weight: 700; }
.sk_clock span { color: #555; }
.sk_clock b { color: var(--sk-text); font-variant-numeric: tabular-nums; }
.sk_cbn {
    position: relative; display: flex; flex-direction: column; justify-content: center;
    height: 88px; padding: 0 14px; overflow: hidden;
    text-decoration: none; font-weight: 900; line-height: 1.2;
}
.sk_cbn_t { font-size: 20px; }
.sk_cbn_v { font-size: 24px; }
.sk_cbn i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 40px; opacity: .85; }
.sk_cbn_tg { background: linear-gradient(#36a3e6, #1f84c8); color: #fff; }
.sk_cbn_ka { background: #f7d82e; color: #3a2a00; }
.sk_cbn_ch { background: linear-gradient(#1b2a6a, #0e173e); color: #fff; border: 1px solid #2c3d90; }
.sk_cbn_ch .sk_cbn_t { font-size: 17px; color: var(--sk-gold); }
.sk_cbn:hover { filter: brightness(1.08); }
.sk_cs { background: #000; padding: 14px; font-size: 12px; color: var(--sk-dim); }
.sk_cs h4 { margin: 0 0 6px; color: var(--sk-gold); font-size: 18px; font-weight: 900; }
.sk_cs p { margin: 0; line-height: 1.5; }
.sk_cs_btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 10px; border: 1px solid var(--sk-gold); color: var(--sk-gold); font-weight: 700; text-decoration: none; }

/* 푸터 */
.sk_foot { margin-top: 0; }
/* 지시(2026-10-04) · 내용이 짧은 화면(예: 문의 내역 0건)에서도 푸터는 화면 맨 아래 — 레이아웃 #app 을 세로 플렉스로,
   본문(page_shell)이 남는 높이를 채운다. PC 한정(모바일은 푸터 숨김 · 하단 탭바가 자리 차지).
   ⚠️ 루트 #app(index.html) 안에 MainLayout 의 #app 이 한 번 더 있다 → page_shell 을 직접 가진 쪽만 잡는다.
   ⚠️ 플렉스 아이템이 되면 margin:auto 가 폭을 줄이므로 page_shell 은 width:100% 를 명시(max-width 1200 + 가운데 정렬 유지). */
@media (min-width: 1025px) {
    #app:has(> .page_shell) { display: flex; flex-direction: column; min-height: 100vh; }
    #app:has(> .page_shell) > * { flex-shrink: 0; }
    #app:has(> .page_shell) > .page_shell { flex: 1 0 auto; width: 100%; }
}
.sk_foot_logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 30px; padding: 16px 16px; background: #202020; }
.sk_foot_logo { color: #8a8a8a; font-size: 15px; font-weight: 700; white-space: nowrap; }
.sk_foot_copy { padding: 10px 16px; background: #111; color: #ccc; font-size: 12px; text-align: center; }

/* ── 좁은 PC(1025~1240) — 1200 이 안 들어가면 좌우 여백 16 + 열 비율로 줄인다 ── */
@media (min-width: 1025px) and (max-width: 1240px) {
    .page_shell { padding: 0 16px; }
    .sk_hdr .sk_in { padding: 0 16px; }
    .sk_cols { grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); }
    .sk_hdr .sk_gnb { padding: 0 20px; }
    .sk_hdr .sk_gnb_big { gap: 16px; }
    .sk_hdr .sk_gnb_item { font-size: 18px; }
    .sk_hdr .sk_gnb_sm { gap: 12px; }
    .sk_hdr .sk_gnb_link { font-size: 14px; }
    .sk_hdr .sk_r0 { gap: 14px; }
}

/* ── CT-4 · 스포츠 섹션 머리(SportsSurfaceTabs) = 「통합스포츠」 바 + 4탭 — PC·모바일 공통 ── */
.sk_sp_head { margin: 0 0 8px; }
.sk_sp_bar {
    padding: 9px 0; text-align: center;
    background: linear-gradient(#3a2f20, #241c12); border-top: 1px solid #5a4528;
    color: var(--sk-gold); font-size: 15px; font-weight: 700;
}
/* 지시(2026-10-04) · 선택 탭 = **폴더 탭** — 위·좌·우만 테두리, 아래는 열림(#202020 판이 아래 콘텐츠로 이어진 모양).
   비선택 탭은 아래 기준선(--sk-tab-line) 위에 놓이고 탭 사이는 세로 구분선(│).
       ┌────────┐
   실시간│해외배당│크로스│스페셜
   ──────┘        └──────────────
   ⚠️ 구분선은 선택 탭 양옆에서 지운다(선택 탭 자체 테두리가 그 자리를 맡는다 — :has 로 앞 형제 판정). */
:root { --sk-tab-on: #202020; --sk-tab-line: #4a4a4a; }
.sk_sp_tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: transparent; padding-top: 6px; }
.sk_sp_tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 10px 2px 9px;
    border: 1px solid transparent; border-bottom-color: var(--sk-tab-line);
    color: var(--sk-dim); text-decoration: none; line-height: 1.15;
}
.sk_sp_tab::after {                       /* 세로 구분선 │ — 오른쪽 이웃과의 경계 */
    content: ""; position: absolute; right: -1px; top: 12px; bottom: 12px; width: 1px; background: var(--sk-tab-line);
}
.sk_sp_tab:last-child::after,
.sk_sp_tab.on::after,
.sk_sp_tab:has(+ .sk_sp_tab.on)::after { content: none; }
.sk_sp_tab b { font-size: 14px; font-weight: 900; color: #cfd3dc; }
.sk_sp_tab small { font-size: 10.5px; color: var(--sk-dim); }
.sk_sp_tab:hover b { color: #fff; }
.sk_sp_tab.on {
    background: var(--sk-tab-on);
    border-color: var(--sk-tab-line);
    border-bottom-color: transparent;
    border-radius: 6px 6px 0 0;
}
/* 지시 · 골드 글자는 **선택된 탭만**(실시간 탭 상시 골드 폐기 — 다른 탭과 같은 색) */
.sk_sp_tab.on b { color: var(--sk-gold); }
.sk_sp_tab.on small { color: #b8bdc9; }

/* ── CT-6 · 카트 있는 스포츠 섹션(지시 2026-10-04) ───────────────────────────
   ① 목록(left_panel) 자체 스크롤 폐기 → 페이지 전체 스크롤(구 sticky + 100vh 고정 높이 해제).
   ② 카트 고정 토글(SportsBetSidebar is_pinned / is_unpinned · 버튼 = Cart .cart_pin_btn):
        고정(기본) = 스크롤을 따라 화면 위 12px 에 붙어 다님 · 높이 상한 = 화면 높이(넘치면 카트 안 스크롤)
        해제       = 제자리(페이지 맨 위) — 스크롤하면 함께 올라간다.
      ⚠️ 적용 구간 = 카트가 **도킹**된 폭만: ≥1280 전 페이지 / 1024~1279.98 은 4단 페이지(.four_col — 드로어 해제 구간)만.
         3단 페이지의 1024~1279.98 = 드로어(fixed) 구간이라 손대지 않는다(AE 정본 그대로).
   ③ 중앙 열(betting_center_col)은 콘텐츠 폭(1200)을 꽉 채우고, 카트는 **화면 오른쪽 남는 공간**으로 나간다.
      남는 공간이 카트폭+간격(276)보다 넓을 때만(= 화면 ≥ 1200 + 276×2 = 1752 → 여유 두고 1760) — 그보다 좁으면 기존처럼 콘텐츠 안 오른쪽.
      방법 = 래퍼를 276 만큼 오른쪽으로 넓히고(음수 margin) 카트가 그 자리에 앉는다 → sticky 가 그대로 산다(absolute/fixed 아님). */
:root { --sk-cart-w: 260px; --sk-cart-gap: 16px; }
@media (min-width: 1024px) {
    .left_panel { position: static; top: auto; height: auto; max-height: none; overflow: visible; }
    /* 지시(2026-10-04) · 상세 패널(right_detail_panel)도 자체 스크롤 폐기 → 페이지 전체 스크롤 */
    .right_detail_panel { position: static; top: auto; height: auto; max-height: none; overflow: visible; }
}
/* CT-7(지시 2026-10-04 재정정) · **해외형(크로스)·인플레이**(= .four_col 4단 페이지) 상세 패널은 다시 **자체 스크롤**.
   목록은 페이지 전체 스크롤 · 상세는 화면에 붙어(sticky top 12) 패널 안에서 스크롤 → 30번째 경기를 눌러도 상세가 늘 화면 안에 있다.
   (구 「클릭한 행 옆에 열기」 A 방식 JS 는 폐기 — sticky 로 같은 문제가 풀린다.) 그 외 페이지는 위 규칙(자체 스크롤 없음) 그대로. */
@media (min-width: 1134px) {
    .four_col .right_detail_panel {
        position: sticky; top: 12px; align-self: flex-start;
        height: auto; max-height: calc(100vh - 24px); overflow-y: auto;
    }
}
/* ⚠️ 4단 F3(1024~1133.98) = 상세 **오버레이**(fixed 슬라이드) — 내부 스크롤 유지(sports.css AF 정본 복원). */
@media (min-width: 1024px) and (max-width: 1133.98px) {
    .four_col .right_detail_panel { position: fixed; top: 0; height: 100vh; overflow-y: auto; }
}
.cart_pin_btn { display: none; }
@media (min-width: 1280px) {
    .cart_sidebar.ae_drawer { align-self: flex-start; }
    .cart_sidebar.ae_drawer.is_pinned { position: sticky; top: 12px; height: auto; max-height: calc(100vh - 24px); overflow-y: auto; }
    .cart_sidebar.ae_drawer.is_unpinned { position: relative; top: auto; height: auto; max-height: none; overflow: visible; }
    .cart_sidebar.ae_drawer .cart_pin_btn { display: inline-flex; }
}
@media (min-width: 1024px) and (max-width: 1279.98px) {
    .four_col .cart_sidebar.ae_drawer { align-self: flex-start; }
    .four_col .cart_sidebar.ae_drawer.is_pinned { position: sticky; top: 12px; height: auto; max-height: calc(100vh - 24px); overflow-y: auto; }
    .four_col .cart_sidebar.ae_drawer.is_unpinned { position: relative; top: auto; height: auto; max-height: none; overflow: visible; }
    .four_col .cart_sidebar.ae_drawer .cart_pin_btn { display: inline-flex; }
}
@media (min-width: 1760px) {
    /* 지시(2026-10-04) · 미니게임·가상게임(BET365) 카트(.cart_sidebar · 드로어 마커 없음)도 같은 우측 여백으로 */
    .page_shell_body .sports_content_wrap:has(> .cart_sidebar) {
        width: calc(100% + var(--sk-cart-w) + var(--sk-cart-gap));
        margin-right: calc(-1 * (var(--sk-cart-w) + var(--sk-cart-gap)));
        padding-right: 0;
        gap: var(--sk-cart-gap);
    }
    .sports_content_wrap > .cart_sidebar { width: var(--sk-cart-w); }
}
/* 미니·가상 카트 = 헤더가 상단 고정이 아니므로 sticky 기준선 115 → 12(화면에 붙어 다님 · 높이 상한 = 화면) */
@media (min-width: 1024px) {
    .sports_content_wrap > .cart_sidebar:not(.ae_drawer) { position: sticky; top: 12px; align-self: flex-start; height: auto; max-height: calc(100vh - 24px); }
    /* 2026-10-30 · 미니·가상 카트도 고정 토글(스포츠 is_pinned / is_unpinned 와 같은 값) — 꺼짐 = 제자리 · 버튼 표시 */
    .sports_content_wrap > .cart_sidebar:not(.ae_drawer).is_unpinned { position: relative; top: auto; max-height: none; }
    .sports_content_wrap > .cart_sidebar:not(.ae_drawer) .cart_pin_btn { display: inline-flex; }
}
/* 고정 버튼 — BET SLIP 제목 줄 오른쪽 작은 알약. 켜짐 = 골드 */
.cart_pin_btn {
    align-items: center; gap: 4px;
    margin-left: auto; height: 22px; padding: 0 8px;
    border: 1px solid #555; border-radius: 11px; background: transparent;
    color: var(--sk-dim); font-size: 11px; font-weight: 700; cursor: pointer;
}
.slip_title .cart_pin_btn { order: 1; margin-right: 4px; }   /* [BET SLIP] ······ [고정][⌄] */
.slip_title .cart_toggle_btn { order: 2; }
.cart_pin_btn i { font-size: 10px; transform: rotate(45deg); }
.cart_pin_btn.on { border-color: var(--sk-gold); color: var(--sk-gold); }
.cart_pin_btn.on i { transform: none; }

/* 모바일 빠른메뉴는 PC 에서 숨긴다(PC = 헤더 메뉴가 같은 역할). */
.sk_quick_home { display: none; }

/* ── 모바일(≤1024) — CT-4 ── */
@media (max-width: 1024.98px) {
    .pc_header.sk_hdr { display: none; }
    .sk_foot { display: none; }

    /* 모바일 헤더 = [☰] [로고 정중앙] [닉네임 님 / 보유금] — 로고는 양쪽 폭과 무관하게 가운데(절대배치) */
    .mobile_header.sk_mhdr { background: radial-gradient(ellipse at 50% 0%, var(--sk-night-2), var(--sk-night) 80%); border-bottom-color: #24337a; }
    .sk_mhdr .m_header_top { position: relative; }
    .sk_mhdr .sk_mlogo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; pointer-events: auto; }
    .sk_mhdr .sk_mlogo img { max-height: 40px; width: auto; }
    .sk_mhdr .sk_mlogo a { text-decoration: none; }
    .sk_muser { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.25; font-size: 11.5px; color: var(--sk-text); cursor: pointer; white-space: nowrap; }
    .sk_muser_nick { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
    .sk_muser_nick img { width: 14px; height: 14px; object-fit: contain; }
    .sk_muser_money { color: var(--sk-gold); font-size: 12px; font-variant-numeric: tabular-nums; }

    /* 홈 = 공지 띠 → 잭팟 → 빠른메뉴. PC 섹션(경기·순위·게시판·연락 열)은 모바일에서 숨긴다(시안). */
    .page_shell_body .main_index_container.home_index.sk_home { padding: 0 0 90px; }
    .sk_home_grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .sk_side { display: none; }
    /* 지시(2026-10-04) · 모바일 홈 = 빠른메뉴 → 인기경기 → **공지사항 · 이벤트**. LIVE·순위(PC 전용)는 숨김.
       인기경기·게시판 블록은 좌우 14px 띄워 안정감(빠른메뉴 판은 전폭 그대로). */
    .sk_cols { display: block; padding: 0 14px; }
    .sk_col_r,
    .sk_col_l > .sk_sec:first-child { display: none; }   /* LIVE GAME LIST · 출금 TOP · 당첨순위 */
    .sk_boards { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .sk_pop { margin: 22px 14px 0; width: auto; max-width: none; }
    .sk_pop .home_sec_tools .strip_nav { width: 34px; height: 34px; font-size: 18px; }
    .sk_pop .home_sec_tools .home_more { line-height: 34px; }
    .sk_jackpot .jackpot_bg { height: 110px; }
    .sk_jackpot .jackpot_amount { font-size: 34px; padding-right: 14px; }

    /* c3 sk_quick_grid — 간격·보더만 스킨 시안(칸 테두리 없음 · 아이콘 상자만 둥근 사각 + 파란 보더) */
    .sk_quick_home { display: block; margin: 0; padding: 20px 14px 18px; background: linear-gradient(#141c4a, #0b1236); }
    .sk_quick_home .sk_quick_grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; }
    .sk_quick_home .sk_quick {
        display: flex; flex-direction: column; align-items: center; gap: 6px;
        height: auto; padding: 0; border: 0; border-radius: 0; background: transparent;
        color: var(--sk-text); text-decoration: none; font: inherit; cursor: pointer;
    }
    .sk_quick_home .sk_quick:active { background: transparent; }
    .sk_quick_home .sk_quick_ico {
        display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px;
        background: linear-gradient(#2c3f94, #17225e); border: 2px solid #4561c9;
        box-shadow: inset 0 2px 0 rgba(255, 255, 255, .16), 0 2px 6px rgba(0, 0, 0, .5);
    }
    .sk_quick_home .sk_quick:active .sk_quick_ico { filter: brightness(1.2); }
    .sk_quick_home .sk_quick_ico svg { width: 30px; height: 30px; fill: #dbe3ff; }
    .sk_quick_home .sk_quick_txt { font-family: "Oswald", "Arial Narrow", sans-serif; font-size: 18px; font-weight: 700; color: #dbe3ff; }
    .sk_quick_home .sk_quick_lb { font-size: 12px; font-weight: 700; }
    .sk_quick_home_div { height: 1px; margin: 18px -14px; background: #2b3a86; }

    /* 배팅슬립 바 = 스킨 갈색/골드(구 s7 핑크 대체) · 위치·z축은 구 CART-BAR 그대로(하단 탭바 위) */
    .mobile_cart_bar {
        background: linear-gradient(#4a3a22, #2f2414);
        border-top: 1px solid #6a5430; color: var(--sk-gold);
    }
    .mobile_cart_bar .cart_info_left .text,
    .mobile_cart_bar .cart_info_center,
    .mobile_cart_bar .cart_info_center .unit,
    .mobile_cart_bar .cart_info_right { color: var(--sk-gold); }
    .mobile_cart_bar .cart_info_center .total_odds,
    .mobile_cart_bar .total_odds { color: #fff; }
    .mobile_cart_bar .badge { background: var(--sk-gold); color: #2a1a00; }
    /* airplane BJ-SHEET/BJ-CART2 이식 — 아래서 올라오는 시트 높이 상한 + 내부 스크롤(배팅하기까지 첫 화면) */
    .mobile_cart_overlay {
        max-height: calc(100vh - 160px);
        max-height: calc(100dvh - 160px);
        overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
        border-top: 2px solid var(--sk-gold);
    }
    .mobile_cart_overlay .cart_section .cart_list,
    .mobile_cart_overlay .cart_section .cart_list.expanded {
        max-height: max(120px, calc(100vh - 520px));
        max-height: max(120px, calc(100dvh - 520px));
        overflow-y: auto; scrollbar-width: thin;
    }
    body:has(.mobile_cart_overlay.open) #go-btn { display: none; }
}

/* ── CT-8 · 로그인(지시 2026-10-04 · 시안 = 캐슬 로그인 페이지) ──────────────────────
   ① 로그인 도어(/login · .login_page) = 성 야경 배경(img/login/login_bg.jpg) + 가운데 「캐슬 스킨」 로고
      + [아이디/비밀번호 2줄 | 세로 로그인] + 보안문자(캡차 ON 사이트만) + 남색 회원가입 바(USDT 가입 ON 이면 2분할).
      구 공용 아트(/images/login/login-art.png — 주황 폰 프레임)는 끈다. 관리자 배경(SITE_BACKGROUND_IMAGE)이 설정되면 그게 우선(인라인 --login-bg).
   ② 도어 없음(0·2 모드) = 우리 방식 그대로(헤더 로그인 → LoginModal) · 모양만 남색 판 + 작은 로고 + 빨강 로그인.
   ⚠️ .login_form 은 도어 페이지·모달 공용 클래스 → ①은 .login_page 아래로, ②는 .login_form_modal 로 스코프를 가른다. */
:root {
    --login-bg: url('/img/login/login_bg.jpg');
    --login-art: none;
    --login-stage-bg: #0b1035;
}
.login_page::before { content: ""; position: absolute; inset: 0; background: rgba(10, 14, 48, .25); pointer-events: none; }
.login_page .login_stage { aspect-ratio: auto; width: 100%; height: 100vh; max-height: none; }
.login_page .login_form {
    left: 50%; top: 50%;
    width: 298px; gap: 6px;
}
.login_page .login_logo_img { max-width: 277px; width: 100%; margin: 0 auto 18px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5)); }
.login_page .login_grid { display: grid; grid-template-columns: minmax(0, 1fr) 86px; grid-template-rows: auto auto; gap: 6px; }
.login_page .login_grid .login_in_id { grid-column: 1; grid-row: 1; }
.login_page .login_grid .pwi_wrap { grid-column: 1; grid-row: 2; min-width: 0; }
.login_page .login_grid .login_btn_side { grid-column: 2; grid-row: 1 / span 2; height: auto; }
.login_page .login_in,
.login_page .login_cap_box {
    height: 32px; border-radius: 0;
    background: #fff; border: 1px solid #cfd5e6; color: #222; font-size: 13px;
}
.login_page .login_in::placeholder { color: #8a8f9c; }
.login_page .login_in:focus { border-color: #4a63d9; box-shadow: none; }
.login_page .pwi_eye { color: #6a7086; }
.login_page .login_btn { border-radius: 0; font-size: 13.5px; font-weight: 700; }
.login_page .login_btn_primary,
.login_page .login_btn_sub {
    background: linear-gradient(#1b2a6e, #0e1748); border: 1px solid #3a4a9a; color: #fff;
}
.login_page .login_btn_primary:hover:not(:disabled),
.login_page .login_btn_sub:hover { filter: brightness(1.15); }
.login_page .login_row2 { gap: 6px; margin-top: 4px; }
.login_page .login_row2 .login_btn { height: 30px; }
.login_page .login_btn_usdt { background: linear-gradient(#174a3a, #0d2a22); border-color: #2f7a5f; }
.login_page .login_hint { color: #c9cfe6; font-size: 11.5px; text-align: center; text-shadow: 0 1px 2px #000; }
/* 텔레그램·카카오톡(SocialContactButtons · 사이트 설정 노출) — 지시(2026-10-04) 「CSS 를 못 받는 것 같다」 수리.
   원인 = 구 s7 app-login.css `.login_page .app-social-buttons { flex-direction: column }` + `.app-social-btn { 회색 판 }` 이
   컴포넌트 스코프 CSS 를 덮고, 세로 플렉스에서 컴포넌트의 `flex: 1 1 0%` 가 높이를 0 기준으로 눌러 22px 로 납작해졌다.
   → 로그인 도어에서는 **가로 2분할 · 폼과 같은 각진 32px · 브랜드색**(텔레그램 파랑 / 카카오 노랑). */
.login_page .app-social-buttons { flex-direction: row; gap: 6px; margin-top: 6px; }
.login_page .app-social-btn {
    flex: 1 1 0; height: 32px; min-height: 32px; padding: 0 8px;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 0; border-radius: 0; font-size: 13px; font-weight: 700; text-decoration: none;
}
.login_page .app-social-btn svg { width: 16px; height: 16px; flex: none; }
.login_page .app-social-telegram { background: #0088cc; color: #fff; }
.login_page .app-social-kakao { background: #fee500; color: #3a1d1d; }
@media (max-width: 767.98px) {
    .login_page .app-social-btn { height: 42px; min-height: 42px; font-size: 14px; }
}
@media (max-width: 767.98px) {
    .login_page .login_form { width: min(320px, calc(100% - 40px)); }
    .login_page .login_logo_img { max-width: 220px; }
    .login_page .login_grid { grid-template-columns: minmax(0, 1fr) 84px; }
    .login_page .login_in, .login_page .login_cap_box { height: 42px; font-size: 14px; }
    .login_page .login_row2 .login_btn { height: 40px; }
}

/* ② 로그인 모달(도어 없음) — 남색 판 · 작은 로고 · 빨강 로그인 · 남색 가입 */
.app-login-modal { background: #141a3a; border: 1px solid #2c3d90; border-radius: 0; }
/* SKIN-0 · 로그인 모달 = 한글 로고(castle_logo_ko · 277×170) — 세로형이라 폭 180 */
.login_form_modal .login_modal_logo { display: block; width: 180px; height: auto; margin: 0 auto 8px; }
.login_form_modal .login_modal_logo + .app-login-modal-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.login_form_modal .login_in, .login_form_modal .login_cap_box { border-radius: 0; background: #fff; border: 1px solid #cfd5e6; color: #222; }
.login_form_modal .login_in::placeholder { color: #8a8f9c; }
.login_form_modal .login_btn { border-radius: 0; }
.login_form_modal .login_btn_primary { background: var(--sk-red); color: #fff; border: 0; }
.login_form_modal .login_btn_sub { background: linear-gradient(#1b2a6e, #0e1748); border: 1px solid #3a4a9a; color: #fff; }

/* ══ HDR-UNIFY(2026-10-06 지시 · s9 기준) — 스포츠 5표면 · 미니게임 · 가상게임 머리 = 막대 + 폴더 탭(s7~s10 같은 표기) ══
   스포츠 = 공용 SportsSurfaceTabs(막대 「통합스포츠」 + 4탭) · 미니 = 막대 「미니게임」 + 우측 ∨ + 그룹 탭 · 가상 = 막대 「가상게임」 + 우측 ∨(공급사 탭 없음).
   선택 탭 = 폴더 탭(위·좌·우 테두리 · 아래 열림) · ∨ 목록은 막대 머리를 탭 위로(z) 올려 아래 탭에 깔리지 않게. */
.game_head .sk_sp_bar { position: relative; z-index: 30; }
.game_head .sk_sp_bar .vm-dd-wrap { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.game_head .sk_sp_bar .vm-dd-btn { width: 30px; height: 30px; border: 1px solid #5a4528; border-radius: 4px; background: rgba(0, 0, 0, .25); color: var(--sk-gold, #d4a24c); font-size: 13px; }
.game_head .sk_sp_bar .vm-dd-btn:hover { background: rgba(0, 0, 0, .45); color: #fff; }
/* 2026-10-30 · 글자 버튼(크로스·스페셜 「전체보기」/「닫기」) — 같은 모양 · 폭만 글자에 맞춤 · 켜짐 = 금 테 */
.game_head .sk_sp_bar .vm-dd-btn.wide { width: auto; padding: 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0; }
.game_head .sk_sp_bar .vm-dd-btn.wide.on { border-color: var(--sk-gold, #d4a24c); background: rgba(212, 162, 76, .18); color: #fff; }
.game_head .sk_sp_bar .vm-dd-menu { z-index: 100; text-align: left; font-weight: 500; background: #1a1a1f; border-color: #3a3a44; }
.game_head .sk_sp_bar .vm-dd-item { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; color: #dbe5f1; }
.game_head .sk_sp_bar .vm-dd-item:hover { background: #26262e; color: #fff; }
.game_head .sk_sp_bar .vm-dd-item.active { color: var(--sk-gold, #d4a24c); }
button.sk_sp_tab { background: transparent; font: inherit; cursor: pointer; }
button.sk_sp_tab.on { background: #202020; }
.game_head + .virtual-sport-tabs { display: flex; margin-bottom: 8px; }

/* ══ SAFE(2026-10-13) · 금고 — PC 헤더 블록 · 내정보 카드 줄 · 이동 모달(금고로 = 파랑 / 머니로 = 빨강) ══ */
.pc_header .sk_safe { cursor: pointer; padding-right: 10px; }
.sk_money_coin_safe, .sk_um_coin_safe { display: inline-flex; align-items: center; justify-content: center; background: transparent !important; }
.sk_money_coin_safe svg, .sk_um_coin_safe svg, .safe_title svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hdr_bal_safe .hdr_bal_val { color: #9cc0ff; }
@media (max-width: 1024px) { .pc_header .sk_safe { display: none; } }   /* 모바일 헤더 금고 숨김 — 우측 내정보(드로어)에서 */
.ledger_kind { margin-left: 4px; padding: 0 4px; border: 1px solid #4a6fa8; border-radius: 3px; color: #9cc0ff; font-size: 10px; vertical-align: middle; }

.safe_backdrop { position: fixed; inset: 0; z-index: 1990; background: rgba(0, 0, 0, .6); }
.safe_modal {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2000;
    width: min(440px, calc(100vw - 24px)); max-height: calc(100vh - 32px); overflow-y: auto;
    background: var(--app-bg-panel, #16161f); border: 1px solid var(--app-border-soft, #30303f); border-radius: 12px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .6); color: #e8eaed;
}
.safe_head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--app-border, #262634); }
.safe_title { display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; }
.safe_close { position: relative; z-index: 5; width: 32px; height: 32px; border: 0; border-radius: 8px; background: var(--app-bg-panel-2, #1c1c27); color: #cfd3d8; cursor: pointer; }
.safe_balances { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 16px 6px; }
.safe_bal { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 8px; background: var(--app-bg-panel-2, #1c1c27); text-align: center; }
.safe_bal small { color: #9aa0a6; font-size: 11px; }
.safe_bal b { font-size: 15px; font-variant-numeric: tabular-nums; }
.safe_bal.is_safe b { color: #9cc0ff; }
.safe_tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 16px 0; }
.safe_tab { height: 40px; border: 1px solid var(--app-border-soft, #30303f); border-radius: 8px; background: var(--app-bg-panel-2, #1c1c27); color: #aeb3b9; font-weight: 700; cursor: pointer; }
.safe_tab.in.on { background: #1d4ed8; border-color: #1d4ed8; color: #fff; }
.safe_tab.out.on { background: #c62828; border-color: #c62828; color: #fff; }
.safe_body { padding: 12px 16px 16px; }
.safe_input { display: flex; align-items: center; gap: 6px; }
.safe_input .input_amount { flex: 1; min-width: 0; }
.safe_hint { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: #9aa0a6; }
.safe_hint b { color: #e8eaed; font-variant-numeric: tabular-nums; }
.safe_all { margin-left: auto; height: 26px; padding: 0 10px; border: 1px solid var(--app-border-soft, #30303f); border-radius: 6px; background: transparent; color: #cfd3d8; cursor: pointer; }
.safe_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px; }
.safe_grid.in .btn_amt:not(.reset) { background-color: #1d4ed8; }
.safe_grid.out .btn_amt:not(.reset) { background-color: #c62828; }
.safe_submit { display: block; width: 220px; max-width: 100%; height: 48px; margin: 16px auto 0; border: 0; border-radius: 8px; color: #fff; font-size: 15px; font-weight: 800; cursor: pointer; text-shadow: 0 1px 2px rgba(0, 0, 0, .65), 0 0 1px rgba(0, 0, 0, .8); }
.safe_tab.on, .safe_grid .btn_amt { text-shadow: 0 1px 2px rgba(0, 0, 0, .55); }
.safe_submit.in { background: #1d4ed8; }
.safe_submit.out { background: #c62828; }
.safe_submit:disabled { opacity: .6; cursor: default; }
/* SAFE · 금고 아이콘 = 이미지(images/icon/exchange/ico_safe.webp · 512 투명) — 자리별 크기 */
.safe_ico { display: block; width: 20px; height: 20px; object-fit: contain; }
.drawer_swap .safe_ico { width: 18px; height: 18px; }
.sk_money_coin_safe .safe_ico { width: 24px; height: 24px; }
.sk_um_coin_safe .safe_ico { width: 20px; height: 20px; }
.safe_title .safe_ico { width: 22px; height: 22px; }

/* SAFE-CONFIRM(2026-10-13) · 금고 이동 확인 단계 — 위 현재 잔액·금고 잔액 / 가운데 이동 금액 + V자 화살표 / 아래 이동 후 목록 */
.safe_confirm { padding-top: 14px; }
.safe_cf_top { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.safe_cf_card { padding: 10px 8px; border-radius: 10px; background: rgba(255, 255, 255, .05); text-align: center; }
.safe_cf_card small { display: block; font-size: 12px; color: #9aa0a6; }
.safe_cf_card b { display: block; margin-top: 2px; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: #e8eaed; }
.safe_cf_card.is_safe b, .safe_cf_row b.sv { color: #9cc0ff; }
.safe_cf_move { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; margin: 8px 0 6px; }
.safe_cf_arw { display: flex; justify-content: center; }
.safe_cf_arw svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.safe_cf_amt { padding: 8px 14px; border-radius: 10px; text-align: center; }
.safe_cf_amt small { display: block; font-size: 12px; color: #e8eaed; }
.safe_cf_amt b { display: block; font-size: 19px; font-weight: 900; white-space: nowrap; font-variant-numeric: tabular-nums; }
.safe_cf_move.in .safe_cf_amt { background: rgba(29, 78, 216, .3); }
.safe_cf_move.in .safe_cf_amt b { color: #8fb6ff; }
.safe_cf_move.in .safe_cf_arw { color: #5b8cff; }
.safe_cf_move.out .safe_cf_amt { background: rgba(198, 40, 40, .3); }
.safe_cf_move.out .safe_cf_amt b { color: #ff8f8f; }
.safe_cf_move.out .safe_cf_arw { color: #ff6b6b; }
.safe_cf_list { margin-top: 6px; }
.safe_cf_row { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-bottom: 1px dashed rgba(255, 255, 255, .12); font-size: 14px; }
.safe_cf_row span { color: #aeb3b9; }
.safe_cf_row b { font-variant-numeric: tabular-nums; color: #e8eaed; }
.safe_cf_q { margin-top: 16px; text-align: center; font-size: 15px; font-weight: 800; }
.safe_cf_btns { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
.safe_cf_btns .safe_submit { margin: 12px 0 0; width: 160px; }
.safe_cf_cancel { width: 120px; height: 48px; margin-top: 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 8px; background: transparent; color: #cfd3d8; font-size: 15px; font-weight: 700; cursor: pointer; }
@media (max-width: 380px) { .safe_cf_card b { font-size: 14px; } .safe_cf_amt b { font-size: 16px; } .safe_cf_amt { padding: 8px; } }

/* SAFE-ALL(2026-10-13) · 사이트별 금고 자리 공용 — 아이콘 버튼 · PC 전용(모바일 = 내정보/드로어에서) · 줄 강조색 */
.safe_btn { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; margin-left: 4px; padding: 0; border: 0; background: transparent; cursor: pointer; vertical-align: middle; }
.safe_btn .safe_ico { width: 18px; height: 18px; }
@media (max-width: 1024px) { .safe_pc { display: none !important; } }
.hdr_bal_safe .hdr_bal_val, .safe_li .value, .sk_dr_safe .sk_dr_val, .rt_user_safe .rt_user_val { color: #9cc0ff; }
.sk_dr_safe .sk_dr_lb .safe_ico { display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: -3px; }
.dd_coin_safe { background: transparent !important; }
.dd_coin_safe .safe_ico { width: 22px; height: 22px; }