/* 모바일 라이브 인플레이 상세(배팅타입 탭 / 배당 셀) 터치영역 보정 — 템플릿 공용.

   배경(사장님 제보 2026-xx, 모바일 393px):
     ① 상세 패널이 좌측으로 잘려 `전체` 탭이 화면 밖으로 나감
     ② 배당 셀 행 좌측이 잘리고, 오른쪽에 다음 경기 카드가 상세 위로 겹쳐 보임
     → 탭/배당이 "보이는데 눌리지 않는" 상태.

   원인 (전부 CSS. 공용 마크업 components/games/LiveMatchDetail.vue 의 클릭 핸들러는
   데스크톱·모바일 공통이라 로직 문제가 아니다):
     - public/legacy/css/main_style.css:5640
         `._live_details_ { float:left; width:100% }`  ← box-sizing 지정 없음
     - public/legacy/mobilecss/v{0,4}/base/page.css
         `.live_odds-list .odds-find { width:100% !important; padding:16px !important }`
         → 100% + 좌우 16px 이 그대로 더해져 393px 뷰포트에서 425px 로 삐져나감.
     - 동 page.css `#lv_odds_search { display:flex; overflow-x:auto }`
         → 줄바꿈 없이 가로스크롤 → 스크롤 0 에서 첫 탭(`전체`)이 잘림.
     - 동 page.css `.live_odds-list .bet-side { width:33.3%; float:left; padding:6px 12px;
         white-space:nowrap }` → 실질 107px 에 nowrap 콘텐츠가 넘침.
     - ★겹침: 컬러셋(v4/color/test2.css:557 등)의
         `#listlive { position:absolute; top:-8px; z-index:1 }`
         → 다음 경기 카드의 시간/추가배팅옵션 바가 absolute+z-index 로 상세 위에 떠서
           document.elementFromPoint(배당셀 중심) 이 그 `#listlive` 를 돌려준다.
           상세 래퍼는 position:static 이라 z-index 경쟁 자체가 불가했다.

   수정 방침:
     - 공용 LiveMatchDetail.vue 마크업/클릭 로직은 손대지 않는다.
     - `#live-append ._live_details_.narrow`(= 모바일 인라인 상세) 로만 스코프.
       데스크톱 우측 패널(`.wide`)·프리매치 상세(`._m_view`)는 선택자에 포함되지 않는다.
     - 990px 이하에서만 적용 → 데스크톱 레이아웃 무변경.
     - 덮는 주체(`#listlive`)는 z-index:1 이므로 상세 래퍼에 z-index:3 만 주면 해소된다.
       `#listlive` 자체는 건드리지 않아 카드 디자인이 변하지 않는다.
     - V5(test2/vingoal)는 color CSS 에 이미 동등한 블록이 있다. 여기 룰은 그와
       충돌하지 않도록 !important 를 최소로만 쓰고, 값도 동일 방향(줄바꿈/104px)으로 맞췄다.

   ============================================================================
   ★★ 2차 수정 (재발) — 진짜 범인은 상세 내부가 아니라 '조상 컨테이너' 였다.
   ============================================================================
   1차 가드가 무효했던 이유:
     상세에 `width:100%` 를 줘도 그건 '부모 폭의 100%' 라, 부모가 이미 뷰포트보다
     넓으면 상세도 그만큼 넓어진다. 실측 결과 다음 두 조상이 범인이었다:

     (①) `#leftbox_out.col-md-6`
         mobilecss/v{0,4}/base/common.css:2509 의 부트스트랩 grid 공통 룰이
         `position:relative; min-height:1px; padding-left:15px; padding-right:15px` 를
         모든 .col-* 에 건다. 마크업의 `p-0 m-0` 이 padding 0을 노리지만 선택자
         명세도/로드 순서에 따라 넘어가지 못하는 조합이 있고, box-sizing 이
         content-box 로 남으면 100% + 30px 로 바로 터진다.

     (②) `.el-scrollbar__wrap`  ← ★진짜 스크롤 컨테이너
         mobilecss/v{0,4}/base/common.css:2061
           `.el-scrollbar__wrap{overflow:scroll;height:100%}`
         상세를 펼치면 내부 콘텐츠(탭 줄/배당 행/iframe)가 순간 넓어지는데,
         이 래퍼가 overflow-x:scroll 이라 그걸 자기 안에서 가로스크롤로 소화하고,
         화면은 "상세가 좌측으로 잘리고 우측에 다음 경기 카드가 나란히" 보이는
         상태가 된다(= 케이 스크린샷 그대로). 이 상태에선 탭/배당이 눈에 보여도
         터치 좌표가 스크롤 오프셋만큼 어긋나 "눌리지 않는다".

   ★반드시 페이지 한정 조상으로 스코프할 것:
     `#leftbox_out` · `.el-scrollbar__wrap` 은 스포츠/프리매치 페이지도 똑같이 쓴다
     (V*/Sports.vue 의 무한스크롤이 바로 그 `.el-scrollbar__wrap` 의 @scroll 에 달려있다).
     그래서 전역으로 건드리면 스포츠가 깨진다. 라이브 페이지 루트 클래스
     (`.v4-live-page` / `.v0-live-page` / `.v1-live-page`) 밑에서만 보정한다.

   회귀 테스트: tests/live-mobile-detail-tappable.test.mjs (393px, 실제 조상 체인 fixture)
   진단 도구:   tests/tools/v4-live-mobile-overflow-probe.mjs [--guard] */

@media (max-width: 990px) {
  /* ---- 0) ★조상 컨테이너 보정 (가장 중요) — 라이브 페이지 한정 ----
     아래 룰이 없으면 §1~5 의 상세 내부 보정은 전부 무의미하다.
     (부모가 넘치면 자식도 넘친다 — 1차 패치가 헛돌았던 정확한 이유) */
  .v4-live-page,
  .v0-live-page,
  .v1-live-page {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* 부트스트랩 .col-md-6 의 좌우 15px padding + 컬럼 폭 무효화.
     모바일에선 좌/우 컬럼이 아니라 상하로 쌓여야 한다(데스크톱 >=991 은 미적용). */
  .v4-live-page #leftbox_out,
  .v0-live-page #leftbox_out,
  .v1-live-page #leftbox_out {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 0 0 100%;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .v4-live-page #leftbox_out > .hlaf_sp,
  .v0-live-page #leftbox_out > .hlaf_sp,
  .v1-live-page #leftbox_out > .hlaf_sp {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  .v4-live-page #leftbox_out .el-scrollbar,
  .v0-live-page #leftbox_out .el-scrollbar,
  .v1-live-page #leftbox_out .el-scrollbar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* ★범인 — common.css `.el-scrollbar__wrap{overflow:scroll}`.
     가로만 잠그고 세로 스크롤은 문서(body)에 맡긴다.
     스포츠의 무한스크롤(@scroll)은 이 선택자에 포함되지 않는다(라이브 페이지 한정). */
  .v4-live-page #leftbox_out .el-scrollbar__wrap,
  .v0-live-page #leftbox_out .el-scrollbar__wrap,
  .v1-live-page #leftbox_out .el-scrollbar__wrap {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    margin: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    overflow-y: visible;
  }

  /* 데스크톱 전용 우측 패널이 모바일에서 폭을 차지해 2컬럼 행을 만들지 않게 전폭으로. */
  .v4-live-page .view_page.wide,
  .v0-live-page .view_page.wide,
  .v1-live-page .view_page.wide {
    float: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  /* #live-append 자체도 넘치지 않게. (전역 아닌 라이브 페이지 한정) */
  .v4-live-page #live-append,
  .v0-live-page #live-append,
  .v1-live-page #live-append {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* ---- 1) 상세 래퍼 : 가로 오버플로우 차단 + 겹침 해소 ---- */
  #live-append ._live_details_.narrow {
    position: relative;
    /* 덮고 있던 다음 카드 #listlive 가 z-index:1 → 상세를 그 위로. */
    z-index: 3;
    float: none;
    clear: both;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
    /* 세로는 자연 확장 (내부 스크롤 박스 금지 — 터치 스크롤이 탭 클릭을 먹는다). */
    overflow-y: visible;
    max-height: none;
  }

  /* 비어있을 때(상세 닫힘) 자리 차지 금지 — 카드 사이 빈 틈 방지. */
  #live-append ._live_details_.narrow:empty {
    display: none;
    height: 0;
    margin: 0;
    padding: 0;
    border: 0;
  }

  #live-append ._live_details_.narrow ._live_details_view {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  /* ---- 2) 배팅타입 탭 : 가로스크롤 금지, 줄바꿈으로 전부 화면 안에 ---- */
  /* legacy `.live_odds-list .odds-find { width:100% !important; padding:16px !important }`
     의 !important 를 이기려면 여기도 !important 가 필요하다(범위는 상세 래퍼로 한정). */
  #live-append ._live_details_.narrow .odds-find {
    float: none;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 8px 6px !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow: visible;
  }

  #live-append ._live_details_.narrow .odds-find #lv_odds_search {
    display: flex;
    /* ★핵심: 가로스크롤(overflow-x:auto) 대신 줄바꿈. 첫 탭이 잘리지 않는다. */
    flex-wrap: wrap;
    align-items: stretch;
    gap: 5px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    margin: 0 !important;
    padding: 5px !important;
    box-sizing: border-box;
    overflow-x: visible;
    overflow-y: visible;
  }

  #live-append ._live_details_.narrow .odds-find #lv_odds_search > .lv_odds_search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 3열 기본, 긴 라벨('추가 배팅옵션')은 자동으로 다음 줄. */
    flex: 1 1 calc(33.333% - 5px);
    width: auto;
    min-width: 86px;
    max-width: 100%;
    min-height: 32px;
    height: auto;
    margin: 0;
    padding: 6px 7px !important;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- 3) 배당 리스트 : 셀이 뷰포트를 벗어나지 않게 그리드로 ---- */
  #live-append ._live_details_.narrow #match-odds.live_odds-list,
  #live-append ._live_details_.narrow .match-odds {
    display: block;
    float: none;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    margin: 0 8px 8px !important;
    padding: 0 !important;
    box-sizing: border-box;
    overflow-x: hidden;
  }

  #live-append ._live_details_.narrow .match-oddslist {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 7px;
    box-sizing: border-box;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
  }

  #live-append ._live_details_.narrow .match-oddslist tbody,
  #live-append ._live_details_.narrow .match-oddslist tbody > tr,
  #live-append ._live_details_.narrow .match-oddslist tbody > tr > td {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    box-sizing: border-box;
  }

  #live-append ._live_details_.narrow .match-oddslist thead > tr,
  #live-append ._live_details_.narrow .match-oddslist .type-name {
    width: 100% !important;
    height: auto;
    min-height: 30px;
    padding: 7px 8px !important;
    box-sizing: border-box;
    line-height: 1.25;
    white-space: normal;
    word-break: keep-all;
  }

  #live-append ._live_details_.narrow .odds-container {
    display: grid;
    /* 104px = 회귀 테스트가 박아둔 "터치 가능 최소 폭" 계약. */
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 5px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    padding: 5px;
    box-sizing: border-box;
    overflow: visible;
  }

  /* legacy `.live_odds-list .bet-side { width:33.3%; float:left }` 무력화.
     float 가 남아있으면 그리드 아이템이 아니게 되어 폭 계산이 깨진다. */
  #live-append ._live_details_.narrow .odds-container .round-box,
  #live-append ._live_details_.narrow .odds-container .bet-side,
  #live-append ._live_details_.narrow .odds-container .bet-side2,
  #live-append ._live_details_.narrow .odds-container .bet-side3 {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 5px;
    float: none !important;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 36px;
    margin: 0 !important;
    padding: 7px 8px !important;
    box-sizing: border-box;
    overflow: hidden;
    line-height: 1.15;
    white-space: nowrap;
  }

  /* legacy 는 span 을 width:calc(100% - 100px) / 50px 고정 float 로 잡는다.
     그리드 칼럼 안에서는 폭 고정이 오히려 넘치게 만들므로 해제. */
  #live-append ._live_details_.narrow .odds-container .round-box > span {
    display: block;
    float: none !important;
    width: auto !important;
    max-width: 100%;
    min-width: 0;
    height: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #live-append ._live_details_.narrow .odds-container .round-box .snip {
    text-align: left;
  }

  #live-append ._live_details_.narrow .odds-container .round-box .spvalue {
    text-align: center;
  }

  #live-append ._live_details_.narrow .odds-container .round-box .odds {
    justify-self: end;
    text-align: right;
  }

  /* ---- 4) 트래커 iframe : 상세 폭 밖으로 못 나가게 ---- */
  #live-append ._live_details_.narrow #match-frame {
    width: auto;
    max-width: 100%;
    min-width: 0;
    margin: 0 8px 6px;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
  }

  #live-append ._live_details_.narrow #match-frame iframe,
  #live-append ._live_details_.narrow #match-frame .iframe_livehlf {
    display: block;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  /* ---- 5) 겹침 유발 요소 : 잠금 오버레이는 터치를 먹지 않게 ---- */
  /* count=0 카드의 `.lock` 은 z-index:20 짜리 absolute 오버레이다. 상세와 직접 겹치진
     않지만 카드 경계에서 배당 탭을 가로챌 수 있어 pointer-events 만 끈다(시각 무변경). */
  #live-append .lock {
    pointer-events: none;
  }
}