/* ===========================================================
   Day 43 Phase 3-1B 신설 — app-home.css
   Home 메인 배너 영역 (PC / Mobile 반응형 정합)
   AP1 보강② (2026-07-30) — 배너 규격 정본·풀블리드·도트 오버레이:
     · PC 정본 = 1920×461(aspect-ratio 1920/461 고정 — 규격 다른 등록분은 cover 중앙 크롭 소화).
     · 풀블리드 = max-width 1920px 캡 제거(width:100% — 부모 무제약이라 화면 전폭.
       100vw 표기는 스크롤바 폭만큼 가로 스크롤 유발이라 금지 — AF 가로 스크롤 금지 원칙과 정합).
     · 슬라이드 간 높이 완전 동일 = 컨테이너 비율이 정본(전환 출렁임 0 — slick 내부 체인 height:100%).
     · 도트 = 이미지 하단 위 오버레이(반투명 흰 원 + 현재 슬라이드 불투명 — Slick 기본 오버라이드).
     · 모바일 = PC 규격 강제 금지 — 첫 이미지 비율 축(--app-mb-ratio: site.js 가 naturalW/H 로 세팅.
       미세팅(로드 전) 폴백 = 자연 높이).
   =========================================================== */

/* 메인 배너 영역 (PC / Mobile 별 영역)
   AP1 보강③ ⑵ 수리 — slick 인라인 width(px)·초기화 전 FOUC 와 비율 강제의 충돌 절단:
     컨테이너 비율은 **최외곽에서만**(aspect-ratio) + banner_container = absolute fill
     → 내부(slick 이 관리하는 track/slide 인라인 값)가 컨테이너 높이에 영향 주는 경로 자체를 절단.
     내부는 height:100% 체인으로 img 가 cover 로 받기만 함. */
.app-main-banner-pc {
    display: block;
    width: 100%;                      /* AP1 보강② — 구 max-width:1920px 캡 제거 = 풀블리드 */
    aspect-ratio: 1280 / 426;         /* PC 규격 정본 — 화면 폭 무관 비율 유지(높이 결정은 여기 단 한 곳) */
    overflow: hidden;
    position: relative;
}

.app-main-banner-mobile {
    display: none;
    width: 100%;
    overflow: hidden;
    position: relative;
    /* 첫 이미지 비율 축 — site.js appApplyMobileBannerRatio 가 세팅(등록분 자유 규격 수용·높이 통일).
       폴백 16/9 = 첫 이미지 natural 확정 전 순간 표시용(absolute fill 구조라 auto 면 높이 0 — 세팅 즉시 실비율 교체). */
    aspect-ratio: var(--app-mb-ratio, 16 / 9);
}

/* absolute fill — 내부 콘텐츠(초기화 전 세로 쌓임 포함)가 최외곽 높이를 밀어내지 못함.
   AP1 보강④ ② — slide 9600px 폭주 원인 = layout.css .banner_container 의 display:flex:
     flex 아이템(banner-slick-slider)의 기본 min-width:auto 가 콘텐츠(이미지 원본 폭 합)까지 팽창
     → slick 이 init 때 $el.width()=9600 을 재서 slide/track 인라인 width 폭주(48000/9600).
     display:block 상쇄 + slider width:100%/min-width:0 으로 컨테이너 폭 = 뷰포트 폭 확정(가운데 정렬은 cover 소관). */
.app-main-banner-pc .banner_container,
.app-main-banner-mobile .banner_container {
    position: absolute;
    inset: 0;
    height: auto;                     /* layout.css height:100% 상쇄 — inset 이 높이 결정 */
    display: block;                   /* AP1 보강④ ② — layout.css flex 상쇄(팽창 축 제거) */
}

/* 내부 체인 100% — img 소화용(최외곽 absolute fill 안이라 역방향 영향 0) */
.app-main-banner-pc .banner-slick-slider,
.app-main-banner-pc .slick-list,
.app-main-banner-pc .slick-track,
.app-main-banner-pc .slick-slide,
.app-main-banner-pc .slick-slide > div,
.app-main-banner-pc .app-banner-slide,
.app-main-banner-mobile .banner-slick-slider,
.app-main-banner-mobile .slick-list,
.app-main-banner-mobile .slick-track,
.app-main-banner-mobile .slick-slide,
.app-main-banner-mobile .slick-slide > div,
.app-main-banner-mobile .app-banner-slide {
    height: 100%;
}

/* AP1 보강④ ② — slick 폭 기준 확정: slider 폭 = 컨테이너(=뷰포트) 폭. min-width:0 = 콘텐츠 팽창 차단. */
.app-main-banner-pc .banner-slick-slider,
.app-main-banner-mobile .banner-slick-slider {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

/* AP1 보강③ — 초기화 전 FOUC(전 슬라이드 세로 쌓임 붕괴) 차단: slick 부착 전엔 첫 슬라이드만 표시 */
.banner-slick-slider:not(.slick-initialized) .app-banner-slide:not(:first-child) {
    display: none;
}

/* AP1 보강④ ① — img 규칙이 layout.css `.banner_container img`(동일 구체성·나중 로드로 승리)를 확실히 이기도록
   구체 선택자(0,2,1+)로 승격(!important 미사용). min-width:100% 는 여기서 0 으로 차단(9600px slide 에서 통확대 기여 축). */
.app-main-banner-pc .banner_container img,
.app-main-banner-pc .slick-slide img,
.app-main-banner-pc .app-banner-slide img,
.app-main-banner-mobile .banner_container img,
.app-main-banner-mobile .slick-slide img,
.app-main-banner-mobile .app-banner-slide img {
    width: 100%;
    min-width: 0;                     /* layout.css min-width:100% 차단 */
    height: 100%;                     /* AP1 보강② — 컨테이너 비율이 정본·cover 크롭 */
    display: block;
    object-fit: cover;
    object-position: center;
}

.app-main-banner-pc .app-banner-slide a,
.app-main-banner-mobile .app-banner-slide a {
    display: block;
    width: 100%;
    height: 100%;
}

/* AP1 보강② ③ — 도트 오버레이(Slick 기본 스타일 오버라이드): 이미지 하단 위 겹침·중앙 정렬,
   반투명 흰 원 + 현재 슬라이드 불투명 강조. slick 기본 '•' 글리프는 숨김(원은 button 배경으로). */
.app-main-banner-pc .slick-dots,
.app-main-banner-mobile .slick-dots {
    position: absolute;
    bottom: 14px;            /* 이미지 하단 위 겹침(12~16px 범위) */
    left: 0;
    right: 0;
    width: auto;             /* layout.css 전역 .slick-dots width:100% 상쇄(좌우 0 로 폭 확보하되 내용 중앙) */
    height: auto;            /* layout.css height:45px 상쇄 */
    display: flex !important;
    justify-content: center !important;   /* 전폭 분산 폐기 — 하단 중앙 모음(layout flex 우선순위 방어) */
    gap: 9px;                /* 도트 간격(8~10px) */
    margin: 0;
    padding: 0;
    list-style: none;
    z-index: 2;
}

/* AP1 도트 중앙 모음 — layout.css 전역 `.slick-dots li { flex:1 }`(카지노 마케팅 슬라이더용) 상속 차단:
   flex:1 이 배너 도트를 전폭 1/N 균등 배분시킨 근본 원인. flex:0 0 auto + float:none 으로 콘텐츠 폭만 차지 → ul flex 중앙 정렬로 모임. */
.app-main-banner-pc .slick-dots li,
.app-main-banner-mobile .slick-dots li {
    flex: 0 0 auto;
    float: none;
    margin: 0;
    width: auto;
    height: auto;
}

/* AP1 도트 스타일 변경 — 비활성 = 작은 원(8px·회색 #888 계열) / 활성 = 가로 알약(pill 24×8·골드 #e0a020) + width transition. */
.app-main-banner-pc .slick-dots li button,
.app-main-banner-mobile .slick-dots li button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 4px;      /* 원(8×8) → 활성 pill(24×8) 공용 반경 */
    background: rgba(136, 136, 136, 0.6);   /* 비활성 = 회색 #888 계열 반투명 */
    font-size: 0;            /* slick 기본 글리프 제거 */
    line-height: 0;
    text-indent: -9999px;
    cursor: pointer;
    transition: width .3s, background .3s;  /* 전환 시 width 부드럽게 */
}

.app-main-banner-pc .slick-dots li button:before,
.app-main-banner-mobile .slick-dots li button:before {
    content: none;            /* slick-theme '•' 오버라이드 */
}

.app-main-banner-pc .slick-dots li.slick-active button,
.app-main-banner-mobile .slick-dots li.slick-active button {
    width: 24px;             /* 활성 = 가로로 늘어난 알약 */
    background: var(--app-primary);   /* AT · 배너 활성 도트 = 브랜드 토큰(pill+골드) */
}

/* 반응형 영역 (767px 기준 정합) */
@media (max-width: 767px) {
    .app-main-banner-pc { display: none; }
    .app-main-banner-mobile { display: block; }
}

/* ===========================================================
   AT-4 · 홈 신 섹션 (카테고리 / 인기경기 / LIVE·SLOT 스트립 / 정보패널)
   · 색은 전부 --app-* 토큰(하드코딩 0 — 톤다운 부작용 0).
   · 콘텐츠 그리드 경계 = 900(기존 값 재사용 · 신규 브레이크포인트 0).
     헤더 축(1024)·사이드바 축(1024)과 무관하게 독립 동작한다.
   · 좌우 여백은 .home_wrap 이 책임(셸 패딩 0 원칙 · w-1248px 미사용 = 컬럼 폭 그대로).
   =========================================================== */

/* G-1 · 홈 전용 콘텐츠 상한 1248 + 중앙정렬.
   부모 `.main_index_container` 가 flex-column + align-items:center 라 자식에 max-width 만 주면 자동 중앙정렬된다
   (margin:0 auto 는 중복이지만 부모가 flex 가 아니게 바뀌어도 살아남도록 함께 명시).
   ⚠️ **AP1 풀블리드와의 충돌 지목**: 배너(.main_banner_wrap)는 원래 "콘텐츠 폭 제약 해제 = 화면 전폭"이 규격이었다.
      지시대로 전 섹션을 상한 안에 넣었으므로 **홈 배너는 더 이상 풀블리드가 아니다**(1920 에서 좌우 201px 씩 여백).
      배너만 컬럼 폭으로 되돌리려면 아래 `.home_index > .main_banner_wrap` 한 줄만 빼면 된다 — 승인 후 조치. */
.home_index > .main_banner_wrap,
.home_index > .home_wrap {
    max-width: 1248px;
    margin-left: auto;
    margin-right: auto;
}

.home_wrap {
    width: 100%;
    padding: 28px 20px 56px;
    display: flex;
    flex-direction: column;
    gap: 36px;
    box-sizing: border-box;
}

.home_section { width: 100%; }

/* 섹션 헤더(제목 2톤 + 도구) */
.home_sec_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.home_sec_title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--app-text-primary);
}

.home_sec_title .accent { color: var(--app-primary); }

.home_sec_tools { display: flex; align-items: center; gap: 8px; }

.strip_nav {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    border: 1px solid var(--app-border);
    background: var(--app-bg-panel-2);
    color: var(--app-text-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.home_more {
    height: 30px;
    line-height: 28px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid var(--app-border);
    background: var(--app-bg-panel-2);
    color: var(--app-text-secondary);
    font-size: 13px;
    text-decoration: none;
    cursor: pointer;
}

.strip_nav:hover,
.home_more:hover {
    border-color: var(--app-primary);
    color: var(--app-primary);
}

/* 5-2 카테고리 카드 5장 — 이미지에 문구 포함이라 텍스트 미표기(alt 만) */
.home_cat_grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
}

.home_cat_card {
    display: block;
    aspect-ratio: 234 / 164;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--app-bg-panel);
    transition: border-color .15s;
}

.home_cat_card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home_cat_card:hover { border-color: var(--app-primary); }

/* 5-3 인기경기 — PC 3장 / ≤900 1장 노출. 기구는 LIVE·SLOT `.gwrap` 과 **완전 동일**(공통 캐러셀).
   스트립 하나가 전량을 보유하므로 구 `.pop_all_list`(별도 세로 컨테이너)는 폐기했다. */
/* ==========================================================================
   AS · 공통 스트립 캐러셀(인기경기 · 게임사 공용). transform 기반 — 신규 라이브러리 0.
   ⚠️ 구 scroll-snap + overflow-x 기구는 **폐기**(무한 순환이 성립하지 않음).
   노출 개수 정본 = `--vis` **이 한 곳**. JS 가 이 값을 읽으므로 반응형은 CSS 에만 적는다.
   ========================================================================== */
.strip_view {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;          /* 세로 스크롤은 페이지에 양보 · 가로는 드래그가 가져간다 */
    cursor: grab;
}

.strip_view.static { cursor: default; }
.strip_view.dragging { cursor: grabbing; }

.strip_track {
    display: flex;
    will-change: transform;
    /* ⚠️ transition 은 JS 가 **인라인 style 로** 넣는다(클래스 토글 금지 — 순간이동 원인). */
}

.strip_item {
    flex: 0 0 auto;               /* JS 가 px 폭을 지정 — shrink 되면 정렬이 어긋난다 */
    box-sizing: border-box;
    /* 지시(s3 동기) · 구 padding-right:14px 는 좌우 비대칭(카드가 칸 왼쪽으로 쏠림) — 반반(7px)으로 정정.
       ⚠️ gap 으로는 못 바꾼다: appStrip 이 칸폭 = 창폭÷노출수 · 이동량 = idx×칸폭 산식이라
          트랙에 gap 을 주면 이동량이 칸마다 어긋난다(JS 무수정 원칙). 반반 패딩이 시각적으로 gap 14px 와 동일. */
    padding: 0 7px;
}

/* 정적 모드(항목수 ≤ 노출수) — 클론·자동·화살표 전부 꺼진 상태. 좌측부터 그대로 나열. */
.strip_view.static .strip_track { transform: none !important; }

/* 인기경기 = PC 3장 노출 */
.pop_strip { --vis: 3; }

.pop_strip::-webkit-scrollbar { display: none; }

/* ‹ › 노출 임계가 PC(3장) 와 모바일(1장) 로 달라 마커 클래스로 가른다.
   PC 기본 숨김 → 항목이 3장 초과일 때만(has_pc_nav) 노출. 모바일은 아래 미디어에서 무조건 노출(마크업이 count>1 로 이미 거름). */
.pop_nav { display: none; }
.home_pop_section.has_pc_nav .pop_nav { display: inline-flex; align-items: center; justify-content: center; }

/* 전체보기 = 모바일 전용.
   ⚠️ "숨김이 아니라 미렌더" 지시를 CSS 게이트로 처리한 사유:
      콘텐츠 그리드 축(900)에 대응하는 **C# 판정값이 없다**. MainLayout 의 IsMobile 은 헤더 축(1024)이라
      901~1024 구간에서 오판(데스크톱 3열인데 모바일로 취급)하고, 900 전용 JS 폭 감시를 새로 만들면
      폭 감시 축이 둘로 늘어나는 부채가 생긴다(신규 브레이크포인트 금지 취지와도 어긋남).
      → 버튼은 PC 에서 display:none, 그리고 아래 `.expanded` 규칙 자체를 ≤900 미디어 안에만 두어
        **PC 에서는 펼침 상태가 렌더 결과에 전혀 반영되지 않게** 이중으로 막았다
        (모바일에서 펼친 뒤 창을 넓혀도 PC 는 항상 가로 3장 스트립). */
.pop_more { display: none; }

.pop_card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-bg-panel);
    cursor: pointer;
    transition: border-color .15s;
}

.pop_card:hover { border-color: var(--app-primary); }

.pop_league {
    text-align: center;
    font-size: 12px;
    color: var(--app-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pop_body {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.pop_team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.pop_emblem { width: 38px; height: 38px; object-fit: contain; }

.pop_team_name {
    max-width: 100%;
    font-size: 13px;
    color: var(--app-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pop_mid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    color: var(--app-text-muted);
}

.pop_time { font-size: 14px; font-weight: 700; color: var(--app-text-secondary); }
.pop_market { font-size: 10px; letter-spacing: .04em; color: var(--app-text-dim); }

/* 배당 버튼 — 2버튼 50/50 · 3버튼 36/28/36(균등 33.33 금지). 비율은 fr 로 표현. */
.pop_odds { display: grid; gap: 6px; }
.pop_odds.two { grid-template-columns: 1fr 1fr; }
.pop_odds.three { grid-template-columns: 36fr 28fr 36fr; }

.pod {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--app-border);
    border-radius: 6px;
    background: var(--app-bg-panel-3);
    font-size: 13px;
}

.pod i { font-style: normal; }
.pod b { color: var(--app-text-primary); }
.pod_home i { color: var(--app-odds-home); }
.pod_draw i { color: var(--app-odds-draw); }
.pod_away i { color: var(--app-odds-away); }

/* 5-4 LIVE CASINO / SLOT GAME 스트립 — 인기경기와 **같은 공통 캐러셀**(중복 구현 0). */
/* 게임사 = PC **5개** 노출(지시 · 구 4개). 노출 개수 정본은 이 `--vis` 한 곳뿐이고
   JS(appStrip)가 이 값을 읽어 칸 폭·이동량을 산출한다 — 다른 데를 고치면 안 된다. */
.gwrap { --vis: 4; }   /* 기본=라이브카지노 4. 슬롯(5)은 StripCols 인라인이 덮는다. */

/* 4단 레이아웃(cross·inplay)은 중앙 폭이 좁으므로 3개 노출로 축소(기존 규칙 승계 — 신규 상수 0). */
.four_col .gwrap { --vis: 3; }

.gcard {
    border: 1px solid var(--app-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--app-bg-panel);
    cursor: pointer;
    transition: border-color .15s;
}

.gcard:hover { border-color: var(--app-primary); }
/* AS · 실행 중 비활성은 **창(.strip_view)** 에 건다 — 카드에 걸면 재렌더 시 클론과 모양이 갈린다. */
.gcard.disabled,
.strip_view.disabled .gcard { opacity: .6; pointer-events: none; }

/* ⚠️ 셀 **너비는 노출 개수로 등분해 고정**(캐러셀 소관), **높이는 원본 비율**이 결정한다.
   구 `aspect-ratio:16/9` + `object-fit:cover` 가 376×502 슬롯 이미지를 위아래로 잘라내던 원인.
   `height:auto` 단독을 쓰지 않는 이유 2가지 —
     ① 이미지 로드 전 높이가 0이라 카드가 순차 로드되며 화면이 출렁인다(레이아웃 시프트).
     ② 규격에 어긋난 이미지가 올라오면 그 셀만 높이가 달라져 줄 정렬이 깨진다.
   `aspect-ratio` 로 공간을 선점하면 둘 다 사라지고, 규격에 맞는 이미지는 `contain` 이라 여백 없이 정확히 채운다.
   → **잘림은 어느 경우에도 0.** 비율은 아래 카테고리 매핑 1곳에서만 관리한다. */
/* AXK v3 · **카드 높이 = 이미지 원본 높이**(지시 확정 — 400×224 두 장 + 376×502 세 장 혼합 시안).
   · 이미지 카드: 너비만 100% 고정, 높이는 원본 비율(height:auto·정적 흐름) — 작은 이미지는 작게, 큰 이미지는 크게(줄 상단 정렬).
   · 카테고리 규격 박스(aspect-ratio)는 **플레이스홀더 전용**으로 이동 — 이미지 없음/로드 실패 카드만 빈 높이를 확보.
   경위: contain(중앙 레터박스) → cover(확대 크롭) → v2(고정 틀+상단 정렬·아래 빈 패널) 전부 기각. */
.gcard_img {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.gcard_img img { display: block; width: 100%; height: auto; }

/* ===== 카테고리별 규격 매핑(플레이스홀더 박스 전용) — 카테고리 추가 시 여기 한 줄만 =====
   sec_casino : 라이브카지노(50) · 호텔카지노(51)  400×224
   sec_slot   : 슬롯(60)                          376×502 */
.gcard_ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 400 / 224;      /* 기본 = 카지노 규격(매핑 미지정 카테고리 폴백) */
    background: var(--app-bg-panel-2);
    font-size: 28px; font-weight: 800; color: var(--app-text-dim);
}
.sec_slot .gcard_ph { aspect-ratio: 376 / 502; }

/* AXK v3b · 이미지가 있으면 자리 폴백(머릿글자) 숨김(지시) — 구 설계는 절대배치 이미지가 ph 를 '덮는' 방식이라
   정적 배치 전환으로 ph 가 이미지 아래에 드러났다(실측). onerror 는 img 에 인라인 style(display:none)을 남기므로
   [style] 존재 = 로드 실패 → ph 복귀(별도 마크업 수정 0 — ThumbCard 의 인라인 토글 관용구와도 양립). */
.gcard_img img + .gcard_ph { display: none; }
.gcard_img img[style] + .gcard_ph { display: flex; }

.gcard_lock {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--app-error);
    color: var(--app-text-primary);
    font-size: 11px;
    z-index: 1;
}

/* AS §3-3 · 게임사명 시각 제거. **마크업은 유지**(접근성·검색) — 시각만 감춘다. */
.gcard_name {
    display: none;
    padding: 10px;
    text-align: center;
    font-size: 13px;
    color: var(--app-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 5-5 하단 정보 패널 3종 */
.home_panel_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.info_panel {
    padding: 14px 16px;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: var(--app-bg-panel);
}

.info_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.info_title { margin: 0; font-size: 15px; font-weight: 700; color: var(--app-text-primary); }
.info_more { font-size: 12px; color: var(--app-text-muted); text-decoration: none; }
.info_more:hover { color: var(--app-primary); }

/* ⚠️ 클래스명 충돌 절단 — `.info_list` 는 partner.css:1300(모바일 사용자 드로어 자산 목록)이 이미 쓰는 이름이다.
   app-home.css 가 partner.css 보다 **먼저** 로드되므로 겹치는 속성은 파트너가 이기지만,
   ① 여기서만 선언한 `display:flex/gap` 은 드로어로 새어나가고
   ② 파트너의 `.info_list li { padding:12px 0; border-top }` 이 홈 패널 행을 덮친다(양방향 오염).
   → 홈 쪽만 `hp_list` 로 개명해 이름을 분리한다(드로어 무접촉). */
.hp_list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.info_row a { display: flex; align-items: center; gap: 8px; min-width: 0; text-decoration: none; }

.info_tag {
    flex: 0 0 auto;
    padding: 1px 6px;
    border: 1px solid var(--app-primary);
    border-radius: 4px;
    font-size: 11px;
    color: var(--app-primary);
}

.info_subject {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13px;
    color: var(--app-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.info_row a:hover .info_subject { color: var(--app-text-primary); }
.info_empty { padding: 6px 0; font-size: 13px; color: var(--app-text-dim); }

/* 900 이하 · 콘텐츠 그리드 모바일(헤더 1024 축과 별개 — 4축 분리) */
@media (max-width: 900px) {
    .home_wrap { padding: 20px 14px 44px; gap: 28px; }
    .home_sec_title { font-size: 17px; }

    /* 카테고리 = 3열 2행(마지막 행 2장) */
    .home_cat_grid { grid-template-columns: repeat(3, 1fr); }

    /* 인기경기 = 1장 노출(기구는 PC 와 동일 · 노출 개수만 축소 — 기존 900 컷 그대로) */
    .pop_strip { --vis: 1; }
    .pop_nav { display: inline-flex; align-items: center; justify-content: center; }
    .pop_more { display: inline-block; }

    /* 펼침 = 세로 1열 리스트. ⚠️ 이 블록이 ≤900 안에만 있는 것이 PC 유출 차단의 핵심(위 주석 참조).
       AS · 캐러셀은 펼침 시 JS 가 파기되므로(transform 잔여 0) 창을 열고 트랙을 세로로 되돌리기만 하면 된다. */
    .pop_strip.expanded { overflow: visible; touch-action: auto; cursor: default; }

    .pop_strip.expanded .strip_track {
        display: flex;
        flex-direction: column;
        width: auto !important;
        transform: none !important;
        gap: 14px;
    }

    .pop_strip.expanded .strip_item { width: auto !important; padding: 0; }

    /* LIVE/SLOT = 2개 노출(구 2행 2열 격자는 캐러셀 전환으로 1행 유지 — 이동 단위가 칸이라 행 분할 불가).
       기존 900 컷의 "한 화면 2열" 감각은 그대로다. */
    .gwrap { --vis: 2; }

    .home_panel_grid { grid-template-columns: 1fr; }
}

/* ===========================================================
   CG-TAG · 홈 태그 큐레이션(2026-08-19) — 태그 네비 칩 + 태그별 스트립 + MORE 모달 그리드
     · 칩 = 참조 사이트 관용구(아이콘 + 라벨 · 2px 보더 · 활성 = 프라이머리 보더 · 가로 스크롤).
     · 카드 = 기존 .gcard(sec_slot 376×502 · contain) + 이름 1줄(말줄임). 스트립 --vis:6(PC) / 2(≤900).
     · 섹션 앵커 = 칩 클릭 스크롤 — sticky 헤더 가림 방지 scroll-margin-top.
   =========================================================== */
.sk_tag_nav_section { scroll-margin-top: 80px; }
.sk_tag_section     { scroll-margin-top: 80px; }

.sk_tag_nav {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 6px;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}
.sk_tag_nav::-webkit-scrollbar { height: 6px; }
.sk_tag_nav::-webkit-scrollbar-thumb { background: var(--app-border); border-radius: 3px; }

.sk_tag_chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 12px 0 6px;
    border: 2px solid var(--app-border);
    border-radius: 8px;
    background: var(--app-bg);
    color: var(--app-text-secondary);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s, color .2s, background .2s;
}
.sk_tag_chip:hover { background: rgba(255, 255, 255, .06); color: var(--app-text-primary); }
.sk_tag_chip.on { border-color: var(--app-primary); color: var(--app-text-primary); }

/* 아이콘 = 관리자 업로드(25×25 고정). 비활성 칩 = 회색 + 어둡게(시안) · 활성 = 원색. */
.sk_tag_chip_ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    font-size: 16px;
    line-height: 1;
    object-fit: contain;
    filter: grayscale(1) brightness(.55);           /* 비활성 = 어둡게(시안) */
    transition: filter .2s;
}
.sk_tag_chip:hover .sk_tag_chip_ico { filter: grayscale(.5) brightness(.85); }
.sk_tag_chip.on .sk_tag_chip_ico { filter: none; }

/* 모달 안 네비 — 본문 헤더 위 1줄. */
.sk_tag_modal_nav { margin-bottom: 12px; }

/* 호버 오버레이(재생 아이콘 + 제목) + 카드 그림자·살짝 부양 — "클릭된다"를 인지시킨다. 터치(호버 없음)는 무영향. */
.sk_tag_hover {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: rgba(0, 0, 0, .55);
    color: var(--app-primary);
    opacity: 0;
    transition: opacity .2s;
    pointer-events: none;                    /* 클릭은 카드(.gcard) 가 받는다 */
    z-index: 2;
}
.sk_tag_play { width: 44px; height: 44px; max-width: 40%; }
.sk_tag_hover_title {
    margin: 0;
    padding: 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    line-height: 1.3;
    max-width: 100%;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* 호버 부양(-3px)·그림자가 스트립 창(.strip_view overflow:hidden)에 잘리지 않도록 창에 상하 여유를 두고 음수 마진으로 상쇄
   (overflow 클립은 패딩 박스 기준 — 패딩만큼 그릴 공간이 생긴다). 좌우는 카드가 창 폭을 꽉 채우므로 그림자만 살짝 잘림(허용). */
.sk_tag_strip { padding: 8px 0 14px; margin: -8px 0 -14px; }

.sk_tag_strip .gcard,
.sk_tag_modal .gcard { cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.sk_tag_strip .gcard:hover,
.sk_tag_modal .gcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 0 0 1px var(--app-primary);
}
.sk_tag_strip .gcard:hover .sk_tag_hover,
.sk_tag_modal .gcard:hover .sk_tag_hover { opacity: 1; }
/* 점검 카드는 오버레이 대신 잠금 라벨 유지(호버해도 재생 아이콘 미표시). */
.gcard:has(.gcard_lock):hover .sk_tag_hover { opacity: 0; }

/* 카드 이름/벤더 — 이미지 아래 1줄씩(말줄임). */
.sk_tag_card_name,
.sk_tag_card_vendor {
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.sk_tag_card_name   { padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--app-text-primary); }
.sk_tag_card_vendor { padding-bottom: 8px; font-size: 11px; color: var(--app-text-dim); }
.sk_tag_strip .sk_tag_card_name { padding-bottom: 8px; }

/* 태그 카드 이미지 박스 = **정사각(1/1)** — 공급사 태그용 썸네일이 square 규격(예: ppgames /square/200/)이라
   sec_slot 의 376/502 를 물리면 상하로 레터박스가 생겨 "div 와 이미지 크기가 안 맞는" 증상이 됐다.
   폭은 노출 개수(--vis:7)가, 높이는 이 비율이 정한다 → 항상 7장 = 화면 폭 기준 균등. */
.sk_tag_strip .gcard_img,
.sk_tag_modal .gcard_img { aspect-ratio: 1 / 1; }
.sk_tag_strip .gcard_img img,
.sk_tag_modal .gcard_img img { object-fit: cover; }   /* 정사각 원본이라 cover 여도 잘림 0 · 규격 이탈분만 크롭 */

/* MORE 모달 그리드 — game_grid col_6 위에 gcard 재사용(카드 폭은 그리드 소관). 실행 중 = 창 단위 비활성. */
.sk_tag_grid.disabled .gcard { opacity: .6; pointer-events: none; }

@media (max-width: 900px) {
    .sk_tag_chip { height: 34px; font-size: 12px; padding: 0 10px 0 4px; }
    .sk_tag_chip_ico { width: 22px; height: 22px; font-size: 14px; }
    /* 시안 = 3.5개(마지막 칸이 반쯤 걸쳐 "옆으로 지나가는 것"이 보인다). 인라인 --vis:7 을 덮는다. */
    .gwrap.sk_tag_strip { --vis: 3.5 !important; }   /* ⚠️ 아래 .gwrap 2.5 규칙보다 구체성 높게(같은 !important 면 뒤가 이긴다) */
    .sk_tag_card_name { font-size: 12px; }

    /* 시안 · LIVE CASINO / SLOT GAME = 2.5개(구 2 → 반 칸 노출로 스와이프 힌트). 슬롯 인라인 --vis:5 도 덮는다. */
    .gwrap { --vis: 2.5 !important; }

    /* 시안 · 모바일 섹션 제목 축소(LIVE CASINO 등 — 구 20px). */
    .home_sec_title { font-size: 15px; gap: 4px; }
    .home_sec_head { margin-bottom: 10px; }
}