/* ===========================================================
   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 / 294; /* 너비 안맞으면 수정. */
    overflow: hidden;
    position: relative;
    border-radius: 20px;
}

.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; }

    /* 모바일 배너 풀폭 — layout.css `.main_banner_wrap{padding:10px 20px 0 20px}` 해제.
       데스크톱 원값은 그대로 유지(이 블록 안에서만 0). 신규 브레이크포인트 도입 없이
       PC/모바일 배너 전환이 일어나는 이 블록에 편승 — 여백과 배너 교체가 같은 축에서 움직인다.
       ⚠️ treebet 전용. s3 는 애초에 이 padding 이 없어(layout.css 실측) 조치 대상 아님. */
    .main_banner_wrap { padding: 0; }
}

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

/* CJ §B-2 · 홈 콘텐츠 상한 **해제** — 메인은 좌·우 열 사이를 꽉 채운다.
   [폐기된 구 규칙 — 경위 보존]
     G-1 에서 `.home_index > .main_banner_wrap, .home_index > .home_wrap { max-width:1248px; margin:0 auto }`
     로 홈 전용 상한을 걸었다. CJ 는 3열 레이아웃으로 가면서 중앙 열 자체가 이미 좌 260 + 우 260 을 뺀
     폭이므로 상한을 한 번 더 거는 것이 곧 이중 여백이 된다.
   ⚠️ 이 규칙이 사라지면서 홈 배너(.main_banner_wrap)는 **AP1 원 규격인 풀블리드로 복귀**한다
      (G-1 주석이 "승인 후 조치"로 남겨 뒀던 항목 — CJ §B-2 가 그 승인에 해당).
   ⚠️ 상한 자체가 공용이 아니었음(마커 `home_index` 는 Home.razor 1곳뿐) — 다른 페이지 영향 0.
      회원 페이지 폭 축 `.main_content_wrap.w-1248px`(layout.css)·파트너 `.w-1248px`(partner.css)는 **무접촉**. */

.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: 0px;
    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;
    /* 지시 · 구 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 이식(dk·c2 확정분) · **카드 높이 = 이미지 원본 높이** — 고정 틀·flex·배경은 플레이스홀더로 이관. */
.gcard_img {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ===== 카테고리별 원본 비율 매핑 — 카테고리 추가 시 **여기 한 줄만** 추가(분기 하드코딩 금지) =====
   sec_casino : 라이브카지노(50) · 호텔카지노(51)  400×224
   sec_slot   : 슬롯(60)                          376×502 */
.sec_casino .gcard_ph { aspect-ratio: 400 / 224; }
.sec_slot   .gcard_ph { aspect-ratio: 376 / 502; }

/* 실이미지는 자리 폴백 위를 덮는다(이미지 없음·로드 실패 = 머릿글자만 남음). */
/* contain — 잘림 0. 규격에 맞는 이미지는 여백 없이 정확히 채우고, 어긋난 이미지만 레터박스가 생긴다. */
/* AXK v3 · 너비만 100% 고정 — 높이는 원본 비율(작은 이미지는 작게·큰 이미지는 크게, 줄 상단 정렬). */
.gcard_img img { display: block; width: 100%; height: auto; }
/* AXK v3 · 규격 박스는 플레이스홀더 전용(이미지 없음/로드 실패 카드만 빈 높이 확보). */
.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);
}

/* AXK v3b · 이미지가 있으면 폴백 숨김 — onerror 는 img 에 인라인 style 을 남기므로 [style] = 로드 실패 → 폴백 복귀. */
.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 하단 정보 패널 — CJ §B-3 (공지사항 · 이벤트 2패널)
   ① 게시판 패널 제거로 3열 → **1fr 1fr 2분할**(Home.razor 에서 article 1개 제거).
   ② 시안 톤: 골드 그라디언트 헤더 바(좌 아이콘+타이틀 / 우 "+ MORE") + 검정 본문 + 행 하단 구분선
      + [공지]/[이벤트] 태그 녹색 강조.
   ⚠️ 클래스 구조(info_panel / info_head / info_more / hp_list)는 **그대로** — 스타일만 재정의한다.
   ============================================================ */
.home_panel_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* 패널 = 헤더 바가 상단 모서리에 딱 붙어야 하므로 패널 자체 padding 은 0 으로 내리고
   여백 책임을 헤더 바/본문 각자에게 넘긴다(구 `padding:14px 16px` 폐기). */
.info_panel {
    padding: 0;
    border: 1px solid var(--app-border);
    border-radius: 10px;
    background: #000;                 /* ② 본문 검정 배경 */
    overflow: hidden;                 /* 헤더 바 라운드 클리핑 */
}

/* ② 골드 그라디언트 헤더 바 — 그라디언트는 기존 토큰 재사용(리터럴 산재 0). */
.info_head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
}

/* 골드 바 위 글자·아이콘은 어두운 색이라야 읽힌다(밝은 텍스트 토큰 사용 금지). */
.info_title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #062421;
}

.info_title i { font-size: 14px; }

.info_more {
    font-size: 12px;
    font-weight: 700;
    color: #062421;
    text-decoration: none;
    opacity: .8;
}

.info_more:hover { opacity: 1; color: #062421; }

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

/* ② [공지]/[이벤트] 태그 = 녹색 강조.
   ⚠️ 신규 리터럴을 늘리지 않기 위해 기존 밝은 녹색 토큰(--app-odds-draw)을 재사용한다
      (이름은 배당 무승부 유래지만 팔레트상 유일한 밝은 녹색 — 새 토큰 신설보다 산재가 적다). */
.info_tag {
    flex: 0 0 auto;
    padding: 1px 6px;
    border: 1px solid var(--app-odds-draw);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--app-odds-draw);
}

.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: 9px 0; font-size: 13px; color: var(--app-text-dim); }

/* CJ §B-3 ④ · 노출 행수는 현행(PanelRows=5) 유지 — 조회 로직 무수정.
   시안이 공지 4·이벤트 5행이라 높이가 갈릴 수 있으나 **CSS 로만** 흡수한다(두 패널 동일 높이). */
.home_panel_grid .info_panel { align-self: stretch; }

/* 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열 감각은 그대로다.

       🔴 !important 가 필요한 이유(실측) — 마크업이 `style="--vis:4"` 처럼 **인라인**으로 값을 박는다
          (CasinoGameBrowser 의 StripCols 파라미터 · 라이브4/슬롯5). 인라인 커스텀 프로퍼티는
          일반 스타일시트 선언을 이기므로, important 없이는 이 줄이 조용히 무시돼 모바일에서도 4·5개가 나온다.
          중요 선언은 인라인을 이기고, 소비처가 getComputedStyle(root).getPropertyValue('--vis')
          (site.js visCount)라 계산값이 곧바로 2로 잡힌다.
       ⚠️ 근본 해법은 인라인 배출을 없애고 클래스축(예: gwrap col5)으로 옮기는 것이다 —
          그건 razor 동반 수정이라 이번 범위 밖. 지금은 모바일 한정 override 로 막는다. */
    .gwrap { --vis: 2 !important; }

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

/* ============================================================================
   모바일 한줄공지(홈 전용) — MainLayout 모바일 헤더 상시 바에서 이설.
   위치 = 모바일 배너(app-main-banner-mobile) 아래 · 흐름 = PC 헤더 티커 축 재사용
   (@keyframes hdrTicker 는 layout.css 전역 정의 — keyframes 는 문서 전역이라 파일 순서 무관).
   ⚠️ 노출은 ≤1024 한정 — PC 는 헤더 티커가 이미 있어 두 벌 금지(기본 display:none).
   ============================================================================ */
.home_m_notice { display: none; }

@media (max-width: 1024px) {
    .home_m_notice {
        display: flex;
        align-items: center;
        gap: 8px;
        height: 34px;
        /* 지시(침범 수리) · 부모 .main_index_container 가 flex column + align-items:center 라
           이 바는 **내용 폭 shrink-to-fit** 플렉스 아이템이었다 — 짧은 공지 = 양옆 뜬 것처럼 / 긴 공지 = 텍스트
           폭만큼 바가 커져 화면을 침범(실사고). stretch 로 폭을 부모 전폭에 **고정**한다(풀블리드 음수마진 폐기 —
           그 방식은 폭이 내용에 좌우되는 원인 위에 얹은 미봉이었다). */
        align-self: stretch;
        margin: 8px 0 0;
        padding: 0 12px;
        background: var(--app-bg-panel-2);
        border-radius: 0;
        overflow: hidden;
        cursor: pointer;   /* 클릭 = 공지 목록(/cs/notice) 이동 */
    }

    .home_m_notice_tag {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        color: var(--app-text-secondary);
        font-size: 12.5px;
        font-weight: 700;
        white-space: nowrap;
    }

    .home_m_notice_tag i { color: var(--app-primary); font-size: 13px; }

    .home_m_notice_vp {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;   /* 스크롤바 0 */
        position: relative;
        height: 100%;
    }

    .home_m_notice_track {
        /* 지시(침범 수리) · 절대배치 — 트랙 길이가 바/컨테이너 폭에 영향 주지 못하게 격리(공지 아이콘은 고정 유지).
           기준 = .home_m_notice_vp(relative · overflow hidden). scrollWidth 실측 축은 그대로 유효. */
        position: absolute;
        left: 0;
        top: 0;
        display: inline-flex;
        align-items: center;
        height: 100%;
        white-space: nowrap;
        will-change: transform;
        /* 30s = 폴백 duration(구 축약형은 0s 라 JS 실패 시 정지) — appNoticeTicker 가 실측값으로 덮어씀. */
        animation: hdrTicker 30s linear infinite;
        /* 마퀴 정규화(PC 헤더와 동일 사유) — 짧은 문구의 "안녕하세요 안녕하세요 …" 반복 나열 방지.
           두 벌 각각이 최소 뷰포트 폭을 점유해 한 벌씩 지나간다. */
        min-width: 200%;
    }

    .home_m_notice_seg {
        flex: 1 0 auto;
        padding-right: 60px;   /* 반복 사이 간격 */
        color: var(--app-text-muted);
        font-size: 12px;
    }

    /* [[ ]] 강조 — HomeNoticeHtml 치환 span(헤더 티커와 동일 문법). */
    .home_m_notice_seg .hl { color: var(--app-warning); font-weight: 700; }
}

/* ==========================================================================
   CEO-1(2026-08-19) · front.ceo 홈 — 배너 2분할 · 공지/이벤트 · 게임 타일(호버) · 모바일 3열 타일 · 하단 소개 이미지 · 게이트 플레이스홀더
   ========================================================================== */
/* 게이트 대기 플레이스홀더 — 푸터가 첫 화면에 못 올라오게 뷰포트만큼 선점 */
.home_gate_ph { min-height: calc(100vh - 140px); }

/* PC 배너 2분할(각 628×270). 기존 .app-main-banner-pc 규칙(aspect-ratio·absolute banner_container)은 이 변형에서 해제. */
.app-main-banner-pc.ceo_banner_split {
    aspect-ratio: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    border-radius: 0;
    overflow: visible;
}
.app-main-banner-pc.ceo_banner_split.has_right { grid-template-columns: 1fr 1fr; }
.ceo_bn_left, .ceo_bn_right {
    position: relative;
    aspect-ratio: 628 / 270;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid var(--app-border);
    background: var(--app-bg-panel);
}
.ceo_bn_left > .app-banner-slide,
.ceo_bn_right > .app-banner-slide,
.ceo_bn_right > .banner-slick-slider { position: absolute; inset: 0; height: auto; width: auto; }
.ceo_bn_right .slick-list, .ceo_bn_right .slick-track, .ceo_bn_right .slick-slide, .ceo_bn_right .slick-slide > div { height: 100%; }
.ceo_bn_left img, .ceo_bn_right img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ceo_bn_right .slick-dots { bottom: 8px; }

/* 게임 타일 PC 5열(332×330) + 호버 오버레이(c2 TOP30 관용구) */
.ceo_tiles_pc { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.ceo_tile { position: relative; aspect-ratio: 332 / 330; border-radius: 0px; overflow: hidden; border: 1px solid var(--app-border); transition: transform .15s, box-shadow .15s, border-color .15s; }
.ceo_tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ceo_tile_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;
}
.ceo_tile_hover b { color: #fff; font-size: 15px; font-weight: 800; }
.ceo_tile_play { width: 46px; height: 46px; }
.ceo_tile:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, .55), 0 0 0 1px var(--app-primary); border-color: var(--app-primary); }
.ceo_tile:hover .ceo_tile_hover { opacity: 1; }
/* 모바일 3열 12장(230×250) — 900 컷에서 PC 5열 대신 표시(기존 home_cat_pc/mo 토글 승계) */
.ceo_tiles_mo { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ceo_tiles_mo .ceo_tile { aspect-ratio: 230 / 250; }

/* 하단 소개 이미지 — PC 1장 중앙(1259×512) / 모바일 2장 세로. 페이드인. */
.ceo_footer_imgs { display: flex; flex-direction: column; align-items: center; width: 100%; margin: 24px 0 0; padding: 20px 0 0; background: #171717; animation: ceoFade .5s ease-out both; }   /* 구 footer_area 자리·톤 · 전폭 */
.ceo_footer_imgs img { display: block; max-width: 100%; height: auto; }
.ceo_footer_imgs .ceo_footer_pc { display: block; width: 100%; max-width: none; }   /* CEO-2c · 전폭 */
/* ⚠️ 구체성 — 위 `.ceo_footer_imgs img { display:block }`(0,1,1) 이 `.ceo_footer_mo { display:none }`(0,1,0) 을 이겨 PC 에 모바일 2장이 새어 보였다 → 같은 조합 선택자로. */
.ceo_footer_imgs .ceo_footer_mo { display: none; width: 100%; max-width: 646px; }
@keyframes ceoFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
    .ceo_footer_imgs .ceo_footer_pc { display: none; }
    .ceo_footer_imgs .ceo_footer_mo { display: block; }
}

/* ==========================================================================
   CEO-1b · 홈 패널/타일 질감(캡쳐 1) — 골드 그라디언트 헤더 · [NOTICE]/[EVENT] 태그 · 보더 정리 · 인기경기 프레임
   ========================================================================== */
.home_index .info_head {
    height: 44px;
    padding: 0 16px;
    background: linear-gradient(137deg, rgba(255,255,234,1) 0%, rgba(255,219,159,1) 5%, rgba(108, 198, 189,1) 20%, rgba(184, 242, 236,1) 50%, rgba(63, 158, 149,1) 80%, rgba(79, 179, 169,1) 95%, rgba(143, 220, 212,1) 100%) !important;
    border-radius: 6px 6px 0 0;
}
.home_index .info_title, .home_index .info_more {
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 6px rgba(0, 0, 0, .35);   /* 밝은 골드 위 가독성 */
    opacity: 1;
}
.home_index .info_title { font-size: 16px; }
.home_index .info_title small { font-size: 12px; font-weight: 500; opacity: .9; margin-left: 2px; }
.home_index .info_more { font-size: 13px; }
/* 패널 = 보더 없이(캡쳐) · 행 = 동일 간격 + 얇은 구분선 */
.home_index .info_panel { border: 0; background: transparent; border-radius: 0; }
.home_index .hp_list { padding: 2px 12px 4px; }
.home_index .info_row { border-bottom: 1px solid #1a1a1a; }
.home_index .info_row a { padding: 12px 0; gap: 8px; }
.home_index .info_tag { padding: 0; border: 0; border-radius: 0; font-size: 13px; font-weight: 600; color: var(--app-primary); }
.home_index .info_subject { font-size: 13.5px; color: #e6e6e6; }
/* 인기경기 카드 = 골드 프레임 이미지(자산 img/main/ceo_pop_frame.webp · 370×160 — 도착 전엔 검정 판) */
.home_index .pop_card {
    border: 0;
    border-radius: 0;
    padding: 20px 26px;
    /* CEO-3 · 프레임을 요소 배경이 아니라 ::before 자체 레이어로 — transform 으로 움직이는 캐러셀 트랙
       (.strip_track) 위의 스트레치 배경이 iOS 실기기에서 일부(위쪽)만 래스터화되는 글리치 회피(캡쳐 실증상).
       로컬·배포 CSS 는 동일·데스크톱 렌더 정상 실측 — 렌더 경로만 바꾼다(결과 동일·translateZ = 독립 레이어 승격). */
    position: relative;
    isolation: isolate;
    background: none;
}
.home_index .pop_card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: url("/img/main/ceo_pop_frame.webp") center / 100% 100% no-repeat;
    transform: translateZ(0);
}
.home_index .pop_card:hover { filter: brightness(1.12); }
/* 배너·타일 = 얇은 골드 라인(캡쳐) */
.ceo_bn_left, .ceo_bn_right, .ceo_tile { border-color: #5fbfb6; }

/* CEO-1d · 홈 배경 = 헤더와 같은 그라디언트(시안) */
.main_index_container.home_index { background: linear-gradient(180deg, #232323 0, #121213); }

/* CEO-2b · 모바일(≤767)에서 PC 2분할 배너 숨김 — `.app-main-banner-pc.ceo_banner_split{display:grid}`(0,2,0) 이 기존 숨김(0,1,0)을 이겨 새어 보였다. */
@media (max-width: 767px) {
    .app-main-banner-pc.ceo_banner_split { display: none; }
}

/* CEO-2c · 모바일 배너 래퍼 패딩 0 */
@media (max-width: 1024px) {
    .home_index .main_banner_wrap, .main_banner_wrap { padding: 0; }
}

/* CEO-2d · 공지/이벤트 패널 = PC 전용(게임 타일 아래) · 모바일(≤900) 미표시 */
@media (max-width: 900px) { .ceo_panels_pc { display: none; } }