/* COMMON(2026-10-29) · 공용 소품 — 탭 가로 스크롤 화살표 · 로딩 스피너/빈 상태 · 404 · PC 파트너 레이아웃.
   마크업 = Mini·Virtual.razor(tabs_scroll) · Shared/LoadState.razor(history_state 재사용) · Routes.razor(NotFound) · MainLayout(is_partner_route). */

/* ── 탭 5개 이상 = 가로 스크롤 + 좌우 화살표(미니게임 그룹 탭 · 가상게임 종목 탭) ──
   한 화면 = 4.5칸(다섯 번째 탭이 반쯤 보여 넘겨 볼 수 있음을 암시). 스크롤바 숨김. 화살표 바탕 = 옆 탭 칸과 같은 색(구분 없이 탭 줄의 끝처럼). */
.tabs_scroll { position: relative; display: flex; align-items: stretch; }
.tabs_scroll .sk_sp_tabs.is_scroll {
    flex: 1 1 auto; min-width: 0;
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% / 4.5);
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs_scroll .sk_sp_tabs.is_scroll::-webkit-scrollbar { display: none; }
.tabs_scroll .sk_sp_tabs.is_scroll .sk_sp_tab { scroll-snap-align: center; white-space: nowrap; }   /* 2026-10-30 · start → center: 선택 탭 가운데 맞춤(site.js appCenterActiveTab)이 스냅에 다시 끌려가지 않게 */
.tabs_scroll .sk_sp_tabs.is_scroll .sk_sp_tab b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tabs_arrow {
    flex: 0 0 22px; margin-top: 6px; padding: 0; border: 0; border-bottom: 1px solid var(--sk-tab-line, #4a4a4a);
    background: linear-gradient(#3a2f20, #241c12); color: var(--sk-gold, #d4a24c);
    font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer;
}
.tabs_arrow:hover { color: #fff; }
/* PC = 탭이 평면 칸(app-pc-sports.css ①) — 화살표도 같은 칸 바탕·테두리·윗줄 간격(갈색 덩어리로 튀지 않게). */
@media (min-width: 1024px) {
    .tabs_scroll { gap: 2px; }
    .tabs_arrow { flex-basis: 26px; margin-top: 4px; border: 1px solid #343434; background: linear-gradient(180deg, #2c2c2c 0%, #232323 100%);
                  box-shadow: inset 0 1px 0 rgba(255,255,255,.04); color: #c9a862; }
    .tabs_arrow:hover { background: linear-gradient(180deg, #353229 0%, #2a2720 100%); color: #f8c853; }
}

/* ── 로딩 = 영역 가운데 스피너 + 「로딩중입니다.」 / 빈 상태 = 가운데 「표시할 항목이 없습니다.」 ──
   기존 history_state(내역 화면 상태 문구 — sports.css) 재사용 · 가운데 정렬 + 스피너만 덧댐. */
.history_state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
                 min-height: 260px; padding: 40px 12px; text-align: center; color: #b9b29c; font-size: 14px; }
.history_state .spinner { width: 38px; height: 38px; border-radius: 50%; border: 3px solid rgba(248,200,83,.18); border-top-color: #f8c853;
                          animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 1023.98px) { .history_state { min-height: 200px; } }

/* ── 404 = 관리자 화면 관용구(큰 404 + 안내 + 홈으로) — 헤더 아래 본문 자리 ── */
.not_found { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
             min-height: 50vh; padding: 60px 16px; text-align: center; }
.not_found .code { font-size: 72px; font-weight: 900; line-height: 1; color: #5a5a5a; letter-spacing: 2px; }
.not_found .tit { font-size: 18px; font-weight: 700; color: #e6e2d8; }
.not_found .msg { font-size: 13px; color: #8a8a8a; }
.not_found .home { margin-top: 10px; padding: 10px 28px; border: 1px solid #9c8555; background: transparent; color: #f8c853;
                   font-size: 14px; font-weight: 700; text-decoration: none; }
.not_found .home:hover { background: rgba(156,133,85,.15); }
@media (max-width: 1023.98px) { .not_found .code { font-size: 56px; } }

/* ── PC 좌측 트리(SideTree · 2026-10-30 지시) — 리그 트리(스포츠 4표면) · 게임 트리(미니·가상·토큰) = 같은 디자인 ──
   색 = 통합스포츠 막대·PC 배당판 축(판 #181818 · 선 #262626 · 금 #c9a862/#f8c853 · 금 선 #9c8555). 선택 = 금 왼쪽 선 + 금 글자. */
.tree_col { display: none; }
@media (min-width: 1024px) {
    /* 높이 = 카트와 같은 축(화면 높이 · 화면에 붙어 다님) · 위쪽 시작선 = 배당판·카트(sports_content_wrap 위 여백 10px)와 같게(지시 2026-10-30 — 안정감) */
    /* 폭·간격 = 우측 카트와 같은 변수(--sk-cart-w 260 · --sk-cart-gap 16 — app-theme.css · 지시 2026-10-30 · 카트 값이 바뀌면 트리도 함께) */
    .tree_col { display: block; flex: 0 0 var(--sk-cart-w, 260px); width: var(--sk-cart-w, 260px); margin: 10px var(--sk-cart-gap, 16px) 0 0; position: sticky; top: 12px; align-self: flex-start;
                height: calc(100vh - 24px); max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3a3427 transparent;
                background: #181818; border-top: 2px solid #9c8555; box-shadow: 0 2px 10px rgba(0,0,0,.35); }
    .tree_cap { height: 38px; padding: 0 12px; line-height: 38px; background: linear-gradient(180deg, #2a2418 0%, #18140d 100%); border-bottom: 1px solid #3a3020;
                font-size: 14px; font-weight: 700; color: #f8c853; letter-spacing: .5px; }
    .tree_line { height: 10px; background: #101010; }
    .tree_empty { padding: 14px 12px; font-size: 12.5px; color: #8c8c8c; }

    .tree_grp, .tree_item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; text-align: left; cursor: pointer; }
    .tree_grp .nm, .tree_item .nm { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .tree_grp { height: 38px; padding: 0 10px 0 12px; border-bottom: 1px solid #262626; background: linear-gradient(180deg, #262626 0%, #1e1e1e 100%);
                font-size: 13px; font-weight: 700; color: #ddd; }
    .tree_grp img { flex: 0 0 auto; width: 18px; height: 18px; object-fit: contain; }
    .tree_grp .cnt { font-size: 12px; font-weight: 700; color: #c9a862; }
    .tree_grp .chev { flex: 0 0 auto; width: 7px; height: 7px; margin: 0 2px 3px 2px; border-right: 2px solid #8a7a55; border-bottom: 2px solid #8a7a55; transform: rotate(45deg); transition: transform .15s; }
    .tree_grp.open .chev { margin-bottom: -3px; transform: rotate(-135deg); }
    .tree_grp:hover { background: linear-gradient(180deg, #353229 0%, #2a2720 100%); color: #fff; }
    .tree_grp.on { color: #f8c853; box-shadow: inset 3px 0 0 #f8c853; }

    .tree_sub { background: #141414; }
    .tree_item { min-height: 32px; padding: 4px 10px 4px 22px; border-bottom: 1px solid #1f1f1f; background: transparent; font-size: 12.5px; color: #bdbdbd; }
    .tree_cap + .tree_sub .tree_item { padding-left: 12px; }   /* 묶음 없는 목록(토큰게임) */
    .tree_item img { flex: 0 0 auto; width: 16px; height: 16px; object-fit: contain; }
    .tree_item .cnt { font-size: 11.5px; color: #8c8c8c; }
    .tree_item:hover { background: rgba(248,200,83,.06); color: #fff; }
    .tree_item.on { background: linear-gradient(90deg, rgba(248,200,83,.16) 0%, rgba(248,200,83,0) 100%); box-shadow: inset 3px 0 0 #f8c853; font-weight: 700; color: #f8c853; }
    .tree_item.on .cnt { color: #f8c853; }
}
/* 2026-10-30 지시 · 배당판 = 가운데 1200 그대로 · 트리만 왼쪽 바깥 여백으로(카트가 오른쪽 바깥으로 나가는 --sk-cart-* 관용구의 왼쪽 판).
   음수 왼쪽 여백(트리 + 간격 = 카트와 같은 260 + 16) = 본문 폭 차감 0. 왼쪽 여백 = (화면 - 1200) / 2 ≥ 276 → 카트 바깥 배치와 같은 1760 이상 · 그보다 좁으면 위 규칙(본문 옆 칸). */
@media (min-width: 1760px) {
    .tree_col { margin-left: calc(-1 * (var(--sk-cart-w, 260px) + var(--sk-cart-gap, 16px))); margin-right: var(--sk-cart-gap, 16px); }
    /* 배당판 래퍼(sports_content_wrap · layout.css padding 10px)가 있는 화면 = 왼쪽 안쪽 여백 10px 만큼 트리를 붙여
       트리 ↔ 배당판 간격 = 카트 ↔ 배당판 간격(--sk-cart-gap)과 같게(카트 쪽은 app-theme.css 가 padding-right 0). 본문 폭 차감 0 유지. */
    .page_shell:has(.sports_content_wrap) > .tree_col { margin-left: calc(-1 * (var(--sk-cart-w, 260px) + var(--sk-cart-gap, 16px) - 10px)); margin-right: calc(var(--sk-cart-gap, 16px) - 10px); }
}

/* ── 베팅가이드(board KIND 3) 규정 문서 — BoardView .inner_text.rule_doc · 원본 사이트 캡처 서식(2026-10-30 지시) ──
   클래스 무관(에디터가 클래스를 지움 — 특정 클래스 예외는 다른 문서에서 또 깨지므로 두지 않음) = 태그 + 위치로만 판정:
     h3·h4·h5 = 초록 제목(h3·h4 밑줄) / 제목 바로 뒤 p = 연노랑 굵게(안내 문구) / 표 바로 뒤 p = 연두 굵게(표 설명)
     / 그 밖 p = 흰 본문(들여쓰기) / p 안 span = 연두 작은 굵게(강조) / 표 = 첫 줄 검정 머리 · 나머지 남회색 칸.
   표 = colgroup 열 폭 유지(table 그대로) · 좁은 화면 = 본문 가로 스크롤. 에디터 인라인 색(style)은 그대로 우선(!important 없음). */
.rule_doc { overflow-x: auto; color: #ececec; font-size: 13px; line-height: 1.75; word-break: keep-all; overflow-wrap: anywhere; }
.rule_doc h3 { margin: 26px 0 14px; padding: 0 0 6px; border-bottom: 1px solid #2f3a26; font-size: 14px; font-weight: 700; color: #8fe03a; }
.rule_doc h3:first-child, .rule_doc > :first-child > h3:first-child { margin-top: 2px; }
.rule_doc h4 { margin: 22px 0 14px; padding: 0 0 6px; border-bottom: 1px solid #2f3a26; font-size: 13px; font-weight: 700; color: #8fe03a; }
.rule_doc h5 { margin: 22px 0 10px; padding-left: 14px; font-size: 13px; font-weight: 700; color: #8fe03a; }
.rule_doc p { margin: 0 0 14px; padding-left: 22px; color: #ececec; }
.rule_doc :is(h3, h4) + p { color: #f1f39a; font-weight: 700; }                            /* 제목 바로 뒤 안내 문구(원본 text01) */
.rule_doc h4 + p { color: #ececec; font-weight: 400; }                                        /* h4 뒤 = 본문(원본 text02) */
.rule_doc :is(table, figure) + p { padding-left: 0; color: #d4f27a; font-size: 12px; font-weight: 700; }   /* 표 설명(원본 text03) */
.rule_doc :is(table, figure) + p:has(+ :is(table, figure)) { padding-left: 0; color: #ececec; font-size: 13px; font-weight: 400; }   /* 표 사이 소제목(「* Odd/Even 예시」) = 본문색 */
.rule_doc p span { color: #d4f27a; font-size: 12px; font-weight: 700; }
.rule_doc p:empty { display: none; }
.rule_doc figure { margin: 0; }
.rule_doc table { width: 100%; min-width: 560px; margin: 4px 0 14px; border-collapse: collapse; }
.rule_doc th, .rule_doc td { padding: 8px 8px; border: 1px solid #5b5c66; text-align: center; vertical-align: middle; font-size: 12.5px; font-weight: 700; color: #fff; }
.rule_doc th, .rule_doc tr:first-child > td { background: #111; }
.rule_doc td { background: #2f3046; }
@media (max-width: 1023.98px) {
    .rule_doc { font-size: 12.5px; }
    .rule_doc p { padding-left: 10px; }
}

/* ── PC 파트너 페이지 = 헤더 첫 줄(sk_r0)만 남기고 아래는 파트너 레이아웃(파트너 메뉴 줄 + 전폭 본문) ──
   마커 = MainLayout #app.is_partner_route(라우트 파생). 숨김 = 메뉴 박스 · 공지/배너 · 게임사 줄 · 좌측바 · 푸터.
   파트너 메뉴·본문 = MainLayout_Partner(.partner_scope · .partner_mnav 전폭 퀵메뉴 — partner.css 정본) 그대로. */
@media (min-width: 1024px) {
    .sk_app.is_partner_route .pc_header .sk_gnb,
    .sk_app.is_partner_route .pc_header .sk_r2,
    .sk_app.is_partner_route .pc_header .sk_gnb2,
    .sk_app.is_partner_route .page_shell > .league_sidebar,
    .sk_app.is_partner_route .sk_foot { display: none !important; }
    .sk_app.is_partner_route .page_shell { display: block; max-width: none; width: 100%; padding: 0; }
    .sk_app.is_partner_route .page_shell_body { max-width: none; width: 100%; margin: 0; }
}