@charset "utf-8";

/****************************************************************************************************************************************
W09 ↔ 공용(_Shared) 뷰 브리지

원본 W09 템플릿(type10.startapi.net)은 충전·환전·공지·마이페이지·쪽지·고객센터를 자체 페이지(money/*·board/*)로,
로그인·추천인·가입을 레이어 팝업(layer_pop/*.php)으로 띄웠다. 우리는 그 화면들을 공용 뷰(Views/Presentations/_Shared)와
공용 로그인 팝업으로 렌더하고, 원본 board.css·popup.css 는 싣지 않는다 — 공용 뷰와 클래스 이름이 겹친다
(.list-table · .write-table · .bo-tit · .btn-reset · .intro-wrap · .intro-list · .intro-tit · .join-wrap …, 전역 셀렉터라 조용히 덮는다).
→ 그 화면들의 외형은 전적으로 이 파일이 책임진다.

구조는 W10 브리지(= type03 브리지 + W08 이 업체 신고로 고친 항목 선반영)를 그대로 따르고 색만 W09 로 바꿨다.
로그인/가입 팝업 블록만 원본 W09 인트로(main/index.php 동영상 인트로 + layer_pop/login.php 검정 카드) 모양으로 새로 썼다.

전부 `body.skin-w09` 범위다 — 다른 스킨으로 새지 않는다(커버리지 테스트도 범위로 판정한다).

팔레트(원본 layout.css·main.css·popup.css·board.css 실측): 바탕 우주 사진(bg) / 강조 보라 #8601f6 · 연보라 #ae61fb · #d6a5ff /
글자 회색 #adadad · 연보라 글자 #e5ceff / 금색 #c59801(원본 가입 버튼) / 패널 검정 #111014·#1c1824(원본 #0d0e0e·#222) / 보더 #34294a.
🔴 연보라 #ae61fb 위 글자는 검정(5.9:1)이다 — 흰 글자는 3.5:1 이라 본문 크기에서 읽기 어렵다. 흰 글자 버튼은 진보라 #8601f6(6.3:1).
*****************************************************************************************************************************************/

/* 게시판 타이틀 */
body.skin-w09 .bo-tit {position: relative; margin: 0 0 16px; padding: 12px 16px; width: 100%; display: flex; justify-content: space-between; align-items: center; background: #111014; border-left: 4px solid #d6a5ff; border-radius: 0 8px 8px 0;}
body.skin-w09 .bo-tit > h3 {margin: 0; padding: 0; font-size: 18px; font-weight: 700; color: #d6a5ff; line-height: 1;}
body.skin-w09 .bo-tit > img {height: 28px; width: auto; max-height: 28px; margin: 0; object-fit: contain;}

/* 목록 테이블 */
body.skin-w09 .scroll-wrap {position: relative; width: 100%; overflow-x: auto;}
body.skin-w09 .list-table {position: relative; margin: 20px 0; width: 100%; border: 1px solid #34294a; border-bottom: none; border-collapse: collapse;}
body.skin-w09 .list-table thead tr {background: #1c1824;}
body.skin-w09 .list-table tbody tr {background: #111014;}
body.skin-w09 .list-table th {padding: 12px 10px; text-align: center; font-weight: 600; color: #e5ceff; border-bottom: 1px solid #34294a;}
body.skin-w09 .list-table td {padding: 12px 10px; text-align: center; font-weight: 500; color: #fff; border-bottom: 1px solid #34294a;}
body.skin-w09 .list-table td.td-left {text-align: left;}
body.skin-w09 .list-table td.td-cursor {cursor: pointer;}
body.skin-w09 .list-table tbody tr:hover {background: #241d31;}

/* 입력 테이블 */
body.skin-w09 .write-table {position: relative; margin: 20px 0; width: 100%; border: 1px solid #34294a; border-bottom: none; border-collapse: collapse;}
body.skin-w09 .write-table th {padding: 12px 10px; width: 150px; text-align: center; font-weight: 600; color: #e5ceff; background: #1c1824; border-right: 1px solid #34294a; border-bottom: 1px solid #34294a;}
body.skin-w09 .write-table td {padding: 12px 10px; width: calc(100% - 150px); text-align: left; color: #fff; background: #111014; border-bottom: 1px solid #34294a;}
body.skin-w09 .write-table td > input,
body.skin-w09 .write-table td > select {margin: 0; padding: 10px; width: 100%; text-align: left; color: #fff; background: #000; border: 1px solid #34294a; border-radius: 6px;}
body.skin-w09 .write-table td > textarea {margin: 0; padding: 10px; width: 100%; height: 250px; color: #fff; background: #000; border: 1px solid #34294a; border-radius: 6px;}
body.skin-w09 .write-table td > input::placeholder,
body.skin-w09 .write-table td > textarea::placeholder {color: #8f8f8f;}
body.skin-w09 .write-table td > input + .unit-suffix {margin-left: 6px; font-size: 14px; color: #d6a5ff; vertical-align: middle;}
body.skin-w09 .write-table td > input:has(+ .unit-suffix) {width: calc(100% - 34px); display: inline-block;}
/* 🔴 select 의 펼친 목록(option)은 OS 가 그린다 — 배경을 안 주면 흰 바탕에 흰 글씨가 된다(어두운 스킨 공통 함정). */
body.skin-w09 .write-table td > select > option {color: #fff; background: #111014;}

/* 계좌확인 등 인라인 버튼 */
body.skin-w09 .account-btn {position: relative; margin: 0 5px; padding: 8px 20px; font-weight: 600; color: #000; background: #ae61fb; border: none; border-radius: 6px; cursor: pointer;}

/* 페이지네이션 */
body.skin-w09 .pagination {display: flex; justify-content: center; gap: 5px; margin: 20px 0;}
body.skin-w09 .pagination button {padding: 8px 12px; font-weight: 600; color: #fff; background: #111014; border: 1px solid #34294a; border-radius: 6px; cursor: pointer;}
body.skin-w09 .pagination button.active {color: #000; background: #d6a5ff; border-color: #d6a5ff;}
body.skin-w09 .pagination button:disabled {opacity: .5; cursor: not-allowed;}

/* 빈 데이터 / 로딩 */
body.skin-w09 .empty-row td,
body.skin-w09 .loading-row td {padding: 40px; text-align: center; color: #adadad;}

/* 고객센터 아코디언 */
body.skin-w09 .accordion-container {position: relative; width: 100%;}
body.skin-w09 .accordion-loading,
body.skin-w09 .accordion-empty {padding: 40px; text-align: center; color: #adadad; background: #111014; border: 1px solid #34294a;}

/* 상세보기 (고객센터 문의 / 쪽지) */
body.skin-w09 .detail-container {position: relative; width: 100%; background: #111014; border: 1px solid #34294a; border-radius: 8px; overflow: hidden;}
body.skin-w09 .detail-header {display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: #1c1824; border-bottom: 1px solid #34294a;}
body.skin-w09 .detail-title-wrap {display: flex; align-items: center; gap: 15px; flex: 1; min-width: 0;}
body.skin-w09 .detail-title {font-size: 18px; font-weight: 700; color: #fff;}
body.skin-w09 .detail-status {padding: 5px 15px; font-size: 13px; font-weight: 600; border-radius: 3px; color: #d6a5ff; background: rgba(174, 97, 251, .15);}
body.skin-w09 .detail-date {font-size: 14px; color: #adadad; flex-shrink: 0;}
body.skin-w09 .detail-section {padding: 0; margin: 20px;}
body.skin-w09 .detail-section-title {padding: 12px 20px; font-size: 15px; font-weight: 700; color: #e5ceff; text-align: center; background: #1c1824; border: 1px solid #34294a; border-bottom: none;}
body.skin-w09 .detail-section-body {padding: 20px; font-size: 14px; line-height: 1.8; color: #fff; background: #0b0a0e; border: 1px solid #34294a; word-break: break-word; min-height: 100px;}
body.skin-w09 .detail-answer .detail-section-title {color: #000; background: #d6a5ff; border-color: #d6a5ff;}

/* 공지/이벤트 상세 배너 이미지 */
body.skin-w09 .event-image-wrap,
body.skin-w09 .notice-image-wrap {width: 100%; margin: 0 auto 15px; text-align: center;}
body.skin-w09 .event-image-wrap img,
body.skin-w09 .notice-image-wrap img {display: block; margin: 0 auto; max-width: 100%; height: auto;}

/* 게시판 가이드 (약관·정책 페이지 등) */
body.skin-w09 .bo-guide {position: relative; margin: 20px 0; padding: 20px; width: 100%; text-align: center; color: #fff; background: #111014; border: 1px solid #34294a; border-radius: 8px;}
body.skin-w09 ul.guide-list {position: relative; margin: 0; padding: 0; width: 100%; text-align: left;}
body.skin-w09 ul.guide-list > li {list-style: disc; display: list-item; margin-left: 40px; padding: 0; line-height: 1.8; font-weight: 500; color: #e5ceff;}

/* 안내 제목 (충전·환전·포인트·마이페이지·약관 안내 상단) */
body.skin-w09 .guide-tit {position: relative; margin-bottom: 15px; width: 100%; display: flex; justify-content: flex-start; align-items: center; font-size: 16px; font-weight: 500; color: #d6a5ff;}
body.skin-w09 .guide-tit > i,
body.skin-w09 .guide-tit > svg {margin: 0 5px 0 0; font-size: 20px;}

/* 충전·환전 빠른 금액 버튼 — 🔴 [초기화](.btn-reset)는 금액 버튼과 **색으로 구분**한다(W15·W16·gd01 C1 가드와 같은 이유:
   같은 색이면 누르는 순간 금액이 0 이 되는 버튼을 금액 버튼으로 착각한다). hover 는 filter 라 구분이 유지된다. */
body.skin-w09 ul.moneyBtns {position: relative; margin: 15px auto 0 auto; padding: 0; width: 100%; display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; align-items: center;}
body.skin-w09 ul.moneyBtns > li {margin: 0 auto; padding: 10px 0; width: calc(100% / 6 - 5px); text-align: center; font-weight: 500; color: #fff; background: #241d31; border: 1px solid #34294a; border-radius: 6px; cursor: pointer;}
body.skin-w09 ul.moneyBtns > li.btn-reset {color: #000; background: #ae61fb; border-color: #ae61fb;}
@media (hover: hover) and (pointer: fine) {
    body.skin-w09 ul.moneyBtns > li:hover {filter: brightness(120%);}
}

@media (max-width: 800px) {
    body.skin-w09 ul.moneyBtns > li {width: calc(100% / 3 - 5px);}
    body.skin-w09 .write-table th {width: 100px;}
    body.skin-w09 .write-table td {width: calc(100% - 100px);}
    body.skin-w09 .detail-header {flex-direction: column; align-items: flex-start; gap: 8px;}
    body.skin-w09 ul.guide-list > li {margin-left: 20px;}
}

/****************************************************************************************************************************************
게임 팝업 (슬롯 게임목록 모달) — 공용 뷰 _Shared/Shared/_GamePopup + business/game.js

🔴 `.game-popup-list > li` 의 width + aspect-ratio 는 필수다. 목록 썸네일이 loading=lazy 라
   도착 전 크기가 0이고, li 가 박스를 안 잡으면 그리드가 가로로 접힌다(라이브 실측 1744x39).
   tests/skin-game-list-grid.test.js 가 이 계약을 지킨다.
게임 썸네일 격자(둥근 모서리·hover 시 흐린 막 + 재생 아이콘) — type03 브리지 구조에 W09 색.
*****************************************************************************************************************************************/
body.skin-w09 .game-popup {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10001; background: rgba(0, 0, 0, .85); overflow-y: auto;}
body.skin-w09 .game-popup.active {display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px;}
body.skin-w09 .game-popup-inner {position: relative; width: 100%; max-width: 1200px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: #111014; border: 1px solid #34294a; border-radius: 12px; overflow: hidden;}
body.skin-w09 .game-popup-header {display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: #07060a; border-bottom: 1px solid #34294a;}
body.skin-w09 .game-popup-title {margin: 0; font-size: 18px; font-weight: 700; color: #d6a5ff;}
body.skin-w09 .game-popup-close {width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; font-size: 16px; color: #fff; background: #241d31; border: 1px solid #34294a; border-radius: 50%; cursor: pointer;}
body.skin-w09 .game-popup-close:hover {color: #000; background: #d6a5ff; border-color: #d6a5ff;}
body.skin-w09 .game-popup-body {flex: 1; padding: 20px; overflow-y: auto; background: #000;}
body.skin-w09 .game-popup-loading {display: none; padding: 40px; text-align: center; color: #adadad;}
body.skin-w09 .game-popup-loading.active {display: block;}
body.skin-w09 .game-popup-list {display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none;}
body.skin-w09 .game-popup-list > li {position: relative; width: calc(100% / 6 - 10px); aspect-ratio: 3/4; overflow: hidden; cursor: pointer; background: #111014; border: 1px solid #2a2238; border-radius: 10px;}
body.skin-w09 .game-popup-list > li:hover {border-color: #d6a5ff;}
body.skin-w09 .game-popup-list > li > img {width: 100%; height: 100%; object-fit: contain; background: #08070b;}
@supports not (object-fit: contain) {
    body.skin-w09 .game-popup-list > li > img {height: auto;}
}
body.skin-w09 .game-popup-list > li > .game-name {position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 8px; font-size: 12px; font-weight: 500; text-align: center; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .9)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
body.skin-w09 .game-popup-list > li.no-games {width: 100%; padding: 40px; text-align: center; color: #adadad; background: transparent; border: none; cursor: default;}
body.skin-w09 .game-popup-list > li .game-hover {position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; justify-content: center; align-items: center; background: rgba(5, 10, 18, .7); backdrop-filter: blur(3px); opacity: 0; transition: .2s;}
body.skin-w09 .game-popup-list > li:hover .game-hover {opacity: 1;}
body.skin-w09 .game-popup-list > li .game-hover .play-icon {width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #000; background: #ae61fb; border-radius: 50%;}

@media (max-width: 1024px) {
    body.skin-w09 .game-popup-list > li {width: calc(100% / 4 - 9px);}
}
@media (max-width: 800px) {
    body.skin-w09 .game-popup.active {padding: 20px 10px;}
    body.skin-w09 .game-popup-list > li {width: calc(100% / 3 - 8px);}
}

/****************************************************************************************************************************************
공지 팝업 (_NoticePopup 마크업 + 공용 notice-popup.js)

🔴 이 블록이 없으면 팝업이 모달로 뜨지 않고 **페이지 하단에 날것으로 렌더**된다(W05 2026-09-17 업체 지적).
🔴 z-index 10001 — W09 모바일 고정 헤더가 999, 하단바(mo-ft)가 99 다. 그 아래로 깔리면 긴 공지에서 [닫기]·"오늘 하루"를
   누를 때 하단바 링크가 눌려 다른 화면으로 넘어간다.
*****************************************************************************************************************************************/
body.skin-w09 .notice-popup {display: none; position: fixed; inset: 0; z-index: 10001; background: rgba(0, 0, 0, .78);}
body.skin-w09 .notice-popup.active {display: flex; justify-content: center; align-items: center;}
body.skin-w09 .notice-popup-inner {position: relative; width: 500px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: #111014; border: 1px solid #34294a; border-radius: 12px; overflow: hidden;}
body.skin-w09 .notice-popup-close {position: absolute; right: 12px; top: 12px; z-index: 2; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .6); border: 1px solid #34294a; border-radius: 50%; cursor: pointer;}
body.skin-w09 .notice-popup-close:hover {color: #000; background: #d6a5ff; border-color: #d6a5ff;}
body.skin-w09 .notice-popup-swiper {flex: 0 1 auto; min-height: 0; min-width: 0; width: 100%; overflow: hidden;}
body.skin-w09 .notice-popup-slide {padding: 0;}
body.skin-w09 .notice-popup-title {margin: 0; padding: 18px 50px 18px 20px; font-size: 16px; font-weight: 700; color: #d6a5ff; background: #1c1824;}
body.skin-w09 .notice-popup-body {padding: 20px; min-height: 220px; max-height: calc(100vh - 200px); overflow-y: auto; color: #fff; background: #0b0a0e;}
body.skin-w09 .notice-popup-image {margin-bottom: 15px; text-align: center;}
body.skin-w09 .notice-popup-image img {max-width: 100%; height: auto; border-radius: 6px;}
body.skin-w09 .notice-popup-content {font-size: 14px; line-height: 1.7; color: #fff; word-break: break-word; white-space: pre-wrap;}
body.skin-w09 .notice-popup-pagination {padding: 10px 0; text-align: center; background: #1c1824;}
body.skin-w09 .notice-popup-pagination .swiper-pagination-bullet {width: 8px; height: 8px; margin: 0 4px; background: #666; opacity: 1;}
body.skin-w09 .notice-popup-pagination .swiper-pagination-bullet-active {background: #d6a5ff;}
body.skin-w09 .notice-popup-footer {display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: #111014; border-top: 1px solid #34294a;}
body.skin-w09 .notice-popup-check {display: flex; align-items: center; gap: 6px; font-size: 13px; color: #adadad; cursor: pointer;}
body.skin-w09 .notice-popup-check input[type="checkbox"] {width: 16px; height: 16px; accent-color: #d6a5ff; cursor: pointer;}
body.skin-w09 .notice-popup-close-btn {padding: 8px 22px; font-size: 13px; font-weight: 700; color: #000; background: #ae61fb; border: none; border-radius: 6px; cursor: pointer;}
body.skin-w09 .notice-popup-close-btn:hover {filter: brightness(110%);}

/* 가로 일렬 모드(POPUP_SEPARATE='Y' + ≥1280px) */
body.skin-w09 .row-popup-container {display: none; position: fixed; inset: 0; z-index: 10001; padding: 60px 30px; pointer-events: none;}
body.skin-w09 .row-popup-container.active {display: flex; justify-content: center; align-items: center; gap: 16px;}
body.skin-w09 .row-popup-card {flex: 1 1 0; min-width: 0; max-width: 340px; max-height: calc(100vh - 120px); display: flex; flex-direction: column; background: #111014; border: 1px solid #34294a; border-radius: 10px; overflow: hidden; pointer-events: auto;}
body.skin-w09 .row-popup-card-header {display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; background: #1c1824; border-bottom: 1px solid #34294a;}
body.skin-w09 .row-popup-card-title {margin: 0; font-size: 15px; font-weight: 700; color: #d6a5ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
body.skin-w09 .row-popup-card-close {flex-shrink: 0; width: 28px; height: 28px; margin-left: 8px; display: flex; align-items: center; justify-content: center; color: #fff; background: rgba(0, 0, 0, .5); border: 1px solid #34294a; border-radius: 50%; cursor: pointer;}
body.skin-w09 .row-popup-card-close:hover {color: #000; background: #d6a5ff;}
body.skin-w09 .row-popup-card-body {flex: 1; padding: 16px; overflow-y: auto; background: #0b0a0e;}
body.skin-w09 .row-popup-card-image {margin-bottom: 12px; text-align: center;}
body.skin-w09 .row-popup-card-image img {max-width: 100%; height: auto; border-radius: 6px;}
body.skin-w09 .row-popup-card-content {font-size: 13px; line-height: 1.6; color: #fff; word-break: break-word; white-space: pre-wrap;}
body.skin-w09 .row-popup-card-footer {padding: 10px 16px; background: #111014; border-top: 1px solid #34294a;}
body.skin-w09 .row-popup-card-dontshow {display: flex; align-items: center; gap: 6px; font-size: 12px; color: #adadad; cursor: pointer;}
body.skin-w09 .row-popup-card-dontshow input[type="checkbox"] {width: 14px; height: 14px; accent-color: #d6a5ff; cursor: pointer;}

/****************************************************************************************************************************************
고객센터 아코디언 — 카드를 깔아 가독성을 준다(W05 2026-09-17 업체 지적: 배경 위에 글자가 그대로 얹혀 안 읽힘)
*****************************************************************************************************************************************/
body.skin-w09 .accordion-item {margin-bottom: 10px; background: #111014; border: 1px solid #34294a; border-radius: 8px; overflow: hidden;}
body.skin-w09 .accordion-header {display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #fff; background: #111014; cursor: pointer;}
body.skin-w09 .accordion-header:hover {background: #241d31;}
body.skin-w09 .accordion-meta {display: flex; align-items: center; gap: 10px; margin-left: auto;}
body.skin-w09 .accordion-date {font-size: 13px; color: #adadad;}
body.skin-w09 .accordion-status {padding: 4px 10px; font-size: 12px; font-weight: 600; color: #d6a5ff; background: rgba(174, 97, 251, .15); border-radius: 3px;}
body.skin-w09 .accordion-arrow {color: #adadad;}
body.skin-w09 .accordion-content {padding: 0 16px 16px; color: #fff; background: #0b0a0e; border-top: 1px solid #34294a;}
body.skin-w09 .accordion-section {margin-top: 14px;}
body.skin-w09 .accordion-section-title {padding: 10px 14px; font-size: 14px; font-weight: 700; color: #e5ceff; background: #1c1824; border: 1px solid #34294a; border-bottom: none;}
body.skin-w09 .accordion-section-body {padding: 16px; font-size: 14px; line-height: 1.8; color: #fff; background: #111014; border: 1px solid #34294a; word-break: break-word;}
body.skin-w09 .accordion-answer .accordion-section-title {color: #000; background: #d6a5ff; border-color: #d6a5ff;}
body.skin-w09 .accordion-actions {display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;}
/* 🔴 배경은 **버튼에** 준다. 컨테이너(.board-btn)에 칠하면 스타일 없는 버튼이 색 띠 안에 놓여
   글자가 묻힌다(W08 diamond 2026-09-26 PPT 18 — "보내기/취소가 안 보인다"). */
body.skin-w09 .board-btn {display: flex; justify-content: center; gap: 8px; margin: 20px 0;}
body.skin-w09 .board-btn > button {padding: 10px 24px; font-weight: 600; color: #000; background: #ae61fb; border: none; border-radius: 10px; cursor: pointer;}
body.skin-w09 .board-btn > button + button {color: #fff; background: #3d3450;}

/****************************************************************************************************************************************
로그인/회원가입 팝업 (공용 _LoginPopup + auth-popup.css + auth-floating.css)

공용 CSS 는 아래 변수를 스킨에서 받는다. 정의가 없으면 남색(#252d37)·주황(#f56406) 폴백이 그대로 나와
W09 톤과 어긋나거나, W08 처럼 패널과 같은 색 글자로 안 보이게 된다(W08 2026-09-26 PPT 15).
*****************************************************************************************************************************************/
body.skin-w09 {
    /* ── 로그인/가입 팝업 ── */
    --body-bg: #1c1824;            /* 팝업 패널 · select option 배경 (입력칸 #111014 보다 한 단 밝게) */
    --bg-layer4: #34294a;             /* 입력칸 테두리 */
    --bg-layer6: #d6a5ff;          /* 입력칸 포커스 테두리 */
    --bg-layer7: #8601f6;          /* [로그인] 버튼 — 진보라(흰 글자 6.3:1) */
    --placeholder-color: #8f8f8f;
    --border2-color: #34294a;
    --border2-font: #8f8f8f;
    --intro-overlay-bg: rgba(0, 0, 0, .85);

    /* ── 로그인 팝업·스포츠 공통 토큰 ──
       🔴 스포츠 CSS 사슬(default/sport.css → st02/game.css → st02/sport-st02.css)은 이 이름들을 **기본값 없이**
          var() 로 쓴다(23곳). 정의가 없으면 그 선언이 통째로 무효가 된다. 국내형 화면뿐 아니라 공용 스포츠 화면
          (나의 배팅·베팅내역·SkyHub)도 같은 사슬을 쓰므로 스킨 전역에 둔다(ST10 은 earth.css :root 가 같은 일을 한다). */
    --color: #fff;
    --secondary: #adadad;
    --white-color: #fff;
    --black-color: #000;
    --gray-color: #adadad;
    --bg-layer1: #111014;          /* 입력칸 · 경기 행 */
    --bg-layer1-solid: #111014;
    --bg-layer2: #1a1622;          /* 팝업 제목 띠 · 리그 헤더 */
    --bg-layer3: #241d31;
    --sport-bg: #0b0a0e;
    --sport-on-bg: #2f2040;        /* 선택한 배당 칸 — 원본 강조 보라의 어두운 틴트 */
    --board-sport: #34294a;
    --board-sport-on: #d6a5ff;
    --board-1: #34294a;
    --th-bg: #1c1824;
    --border1-color: #34294a;
    --border3-color: rgba(255, 255, 255, .1);
    --orange-color: #ae61fb;
    /* 빨강·파랑은 스포츠에서 홈/원정·상승/하락 **의미색**이다(글자로 쓰인다 — 어두운 바탕 6:1 이상). */
    --red-color: #ff5a5a;
    --red-bg: #c62828;             /* 흰 글자 5.6:1 */
    --red-border: #ff5a5a;
    --blue-color: #81bef7;
    --blue-bg: #8601f6;            /* 흰 글자 6.3:1 — 중복확인·전체취소 버튼 */
    --green-color: #3ddc84;
    --green-bg: #1e7e46;
    --z-fab: 10100;                /* 모바일 카트 버튼 — 하단바(9999) 위 */
    --z-bottom-sheet: 10000;
    --z-scroll-top: 5000;
}

/* ── 원본(w09 main/index.php 동영상 인트로 + layer_pop/login.php·code.php·join.php + css/popup.css) 모양 ──
   공용 _LoginPopup 마크업은 그대로 두고(검증·추천인·USDT·보안확인이 거기 있다) 이 스킨 범위에서만 입힌다.
   원본: 어두운 동영상(brightness .4) 위에 로고 · 보라 제목, 레이어 팝업은 검정 카드(보라 1px 테두리 · 둥근 10px · 안쪽 여백 30px),
         회색 큰 제목(LOGIN 30px #868686), 흰 입력칸(#ccc 테두리 · 둥근 4px · 높이 45), [로그인] 보라 · [회원가입] 금색, hover 회색.
   🔴 동영상(intro-bg.mp4 6.7MB)은 싣지 않는다 — 같은 장면의 정지 화면(login/intro-bg.webp 46KB)을 쓴다(자산 무게 함정, W10 선례).
   🔴 이 파일은 auth-popup.css·auth-floating.css 보다 **먼저** 로드된다(_Layout) — 같은 구체성이면 공용이 이긴다.
      그래서 전부 body.skin-w09 .intro-popup … 로 시작해 공용(최대 0,3,4)보다 구체성을 높였다.
   🔴 공용 플로팅 라벨(칸 안 → 입력하면 위로)을 "칸 위 고정"으로 바꾼다(흰 입력칸 위에서 라벨 색이 안 보이는 문제를 피한다 — W10·type03 과 같은 방법).
   🔴 [로그인]·[가입하기] 의 원본 #ae61fb 는 흰 글자가 3.5:1 이라 진보라 #8601f6(6.3:1)로, [회원가입] 금색 #c59801 은 흰 글자가
      2.7:1 이라 검정 글자(7.9:1)로 바꿨다. */
body.skin-w09 .intro-popup {background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, .6)), #000 url('../img/login/intro-bg.webp') center center / cover no-repeat;}
@media (min-width: 769px) {
    body.skin-w09 .intro-popup .intro-inner {width: 420px;}
    body.skin-w09 .intro-popup .intro-inner:has(.join-wrap.active) {width: 600px;}
}
body.skin-w09 .intro-popup .intro-inner {padding: 30px 0 10px; background: #000; border: 1px solid #a961f7; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6);}

body.skin-w09 .intro-popup .intro-closeBtn {top: 12px; right: 14px; z-index: 2; font-size: 20px; color: #fff;}

/* 로고 — 원본 인트로의 로고 자리. --brand-logo(_Layout 이 BrandOptions.LogoPath 로 주입) — 스킨 CSS 에 업체 경로를 박지 않는다.
   업체 설정 ShowLoginLogo 로 공용 .intro-logo 가 나오면 같은 로고가 두 번이 되므로 공용 쪽을 감춘다. */
body.skin-w09 .intro-popup .login-form,
body.skin-w09 .intro-popup .join-form,
body.skin-w09 .intro-popup .code-wrap.active {display: flex; flex-direction: column;}
body.skin-w09 .intro-popup .login-form > .intro-logo {display: none;}
body.skin-w09 .intro-popup .login-form::before {content: ''; order: -2; display: block; height: 70px; margin: 6px 30px 6px; background: var(--brand-logo) center center / contain no-repeat;}
body.skin-w09 .intro-popup .join-form::before,
body.skin-w09 .intro-popup .code-wrap.active::before {content: ''; order: -2; display: block; height: 44px; margin: 6px 30px 6px; background: var(--brand-logo) center center / contain no-repeat;}

/* 제목 — 원본 .intro-tit(가운데 · 회색 큰 글자). 가입 단계는 칸이 많아 조금 작게. */
body.skin-w09 .intro-popup .intro-tit {order: -1; margin: 10px 0 20px; padding: 0 30px; text-align: center; font-size: 30px; font-weight: 600; color: #868686; background: transparent;}
body.skin-w09 .intro-popup .join-wrap .intro-tit,
body.skin-w09 .intro-popup .code-wrap .intro-tit {font-size: 22px; color: #d6a5ff;}

/* 폼 여백 — 원본 .popup-bg padding 30px */
body.skin-w09 .intro-popup ul.intro-list {padding: 0 30px;}
body.skin-w09 .intro-popup .intro-btns {margin: 12px 0 0; padding: 0 30px 24px;}
body.skin-w09 .intro-popup .turnstile-inline {padding-inline: clamp(0px, calc((100% - 300px) / 2), 30px);}

/* 항목 이름은 입력칸 위 고정(왼쪽) — 원본 join.php 의 label(연보라 #9e83ba) */
body.skin-w09 .intro-popup ul.intro-list > li.floating-field {display: flex; flex-direction: column; margin: 0 0 6px;}
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > .floating-input-wrap {display: flex; flex-direction: column;}
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > label,
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > .floating-input-wrap > label {order: -1; position: static; top: auto; left: auto; transform: none; padding: 6px 4px 6px; text-align: left; font-size: 14px; font-weight: 500; color: #b9a3d1; pointer-events: auto; transition: none;}
body.skin-w09 .intro-popup ul.intro-list > li.floating-field.check-list {flex-direction: row; align-items: flex-end; gap: 8px;}

/* 입력칸 — 원본: 흰 바탕 · 검정 글자 · #ccc 테두리 · 둥근 4px · 높이 45 */
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > input,
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > select,
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > .floating-input-wrap > input {padding: 0 15px; height: 45px; font-size: 14px; font-weight: 500; color: #000; background: #fff; border: 1px solid #ccc; border-radius: 4px; box-shadow: none; color-scheme: light;}
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > input:focus,
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > select:focus,
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > .floating-input-wrap > input:focus {border-color: #8601f6;}
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > select > option {color: #000; background: #fff;}
/* 칸 위에 이름이 있으니 안내문(placeholder)은 원본처럼 보인다(원본 #3e3e3e) */
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > input::placeholder,
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > .floating-input-wrap > input::placeholder {color: #6b6b6b; font-weight: 400;}
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > select:invalid {color: #6b6b6b;}
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > input:-webkit-autofill,
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > .floating-input-wrap > input:-webkit-autofill {-webkit-text-fill-color: #000; -webkit-box-shadow: 0 0 0 1000px #fff inset;}
body.skin-w09 .intro-popup ul.intro-list > li.floating-field > .date-format-hint {top: auto; bottom: 13px; font-size: 14px; color: #6b6b6b;}
body.skin-w09 .intro-popup ul.intro-list > li.floating-field.check-list > button {flex: 0 0 96px; margin: 0; padding: 0; width: 96px; height: 45px; line-height: 45px; font-size: 14px; font-weight: 600; color: #fff; background: #8601f6; border-radius: 4px;}
/* 회원 유형(일반/USDT) 등 입력칸 아닌 글자 */
body.skin-w09 .intro-popup .member-type-label,
body.skin-w09 .intro-popup .field-hint {color: #e5ceff;}

/* 버튼 — 원본 .intro-btns: 높이 45 · 둥근 4px · 굵게. [로그인]·[가입하기]·추천인 [확인] = 보라, [회원가입]·[로그인으로] = 금색 */
body.skin-w09 .intro-popup .intro-btns > button {margin: 0 0 6px; padding: 0; height: 45px; font-size: 15px; font-weight: 600; border-radius: 4px;}
body.skin-w09 .intro-popup .intro-login,
body.skin-w09 .intro-popup .go-join,
body.skin-w09 .intro-popup .ok-join {color: #fff; background: #8601f6;}
body.skin-w09 .intro-popup .intro-join,
body.skin-w09 .intro-popup .go-login {color: #000; background: #c59801;}
@media (hover: hover) and (pointer: fine) {
    body.skin-w09 .intro-popup .intro-login:hover,
    body.skin-w09 .intro-popup .go-join:hover,
    body.skin-w09 .intro-popup .ok-join:hover,
    body.skin-w09 .intro-popup .intro-join:hover,
    body.skin-w09 .intro-popup .go-login:hover {filter: none; color: #fff; background: #868686;}
}
body.skin-w09 .intro-popup .intro-telegram {color: #d6a5ff;}
body.skin-w09 .intro-popup .intro-age-notice {color: #e5ceff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8);}

/* 모바일 — 원본 430px 이하 폭 100%. 입력칸·버튼 글자 16px(iOS 는 16px 미만이면 포커스 때 확대) */
@media (max-width: 768px) {
    body.skin-w09 .intro-popup .intro-inner {padding-top: 24px;}
    body.skin-w09 .intro-popup ul.intro-list {padding: 0 15px;}
    body.skin-w09 .intro-popup .intro-btns {padding: 0 15px 20px;}
    body.skin-w09 .intro-popup .intro-tit {padding: 0 15px; font-size: 24px;}
    body.skin-w09 .intro-popup .login-form::before {margin: 6px 15px;}
    body.skin-w09 .intro-popup .code-notice {margin-inline: 15px;}
    body.skin-w09 .intro-popup ul.intro-list > li.floating-field > input,
    body.skin-w09 .intro-popup ul.intro-list > li.floating-field > select,
    body.skin-w09 .intro-popup ul.intro-list > li.floating-field > .floating-input-wrap > input {font-size: 16px;}
    body.skin-w09 .intro-popup ul.intro-list > li.floating-field > .date-format-hint {font-size: 16px;}
}


/* 추천인코드 안내 — 패널 위에서 읽히는 상자로(W08 선례: --secondary 와 패널색이 같아 1.00:1 이었다) */
body.skin-w09 .code-notice {margin: 0 30px 14px; padding: 10px 12px; width: auto; color: #e5ceff; background: #1c1824; border: 1px solid #34294a; border-radius: 6px;}
body.skin-w09 .code-notice > p {margin: 0;}
body.skin-w09 .code-notice strong {font-weight: 700; color: #d6a5ff;}

/* 🔴 로그인 강제 게이트(isloginforce ON + 홈 자동노출 = .terra-login-gate)에서는 닫기(X)를 감춘다.
   단 가입 흐름에 들어간 뒤에는 보여 준다 — X 는 로그인 단계로 되돌아가는 동작이다(auth-ui.js). W08 선례. */
body.skin-w09 .intro-popup.terra-login-gate {--intro-overlay-bg: #000;}
body.skin-w09 .intro-popup.terra-login-gate .intro-closeBtn {display: none !important;}
body.skin-w09 .intro-popup.terra-login-gate:has(.code-wrap.active) .intro-closeBtn,
body.skin-w09 .intro-popup.terra-login-gate:has(.join-wrap.active) .intro-closeBtn {display: block !important;}

/* 공용 로그인팝업의 언어 국기 띠 — 스타일이 공용에 없어 오버레이 좌상단에 그대로 붙는다.
   🔴 하단 가운데는 가입 폼 [가입하기] 버튼 자리라 클릭을 가로챈다(W08 2026-09-28 신고). PC 는 좌상단,
   폼이 화면을 채우는 모바일만 하단 가운데. */
body.skin-w09 .intro-popup .intro-lang-strip {position: absolute; top: 18px; bottom: auto; left: 18px; right: auto; transform: none; display: flex; gap: 12px; align-items: center; padding: 8px 14px; background: rgba(17, 16, 20, .9); border-radius: 22px;}
@media (max-width: 1024px) {
    body.skin-w09 .intro-popup .intro-lang-strip {top: auto; bottom: 26px; left: 50%; transform: translateX(-50%);}
}
body.skin-w09 .intro-popup .intro-lang-strip .flags {font-size: 18px; line-height: 1;}

/****************************************************************************************************************************************
나의 배팅(/Sport/MyBets) — 카트를 가린다 (type03 2026-10-13 실측·결정을 그대로 따른다)

공용 _Shared/Sport/MyBets 는 스킨의 Sport/_BetCart(W09 는 전용 _BetCart 가 없어 공용 폴백)를 넣지만
default/css/sport.css 와 sport-mybets.js 만 불러온다 → st02/game.css 사슬이 없어 카트가 서식 없이 세로로 풀리고,
sport.js 가 없어 버튼도 동작하지 않는다(ST10·ST02 는 레이아웃이 game.css 를 전역으로 불러 모양만 정상, W15·W16 은 전용 MyBets 뷰).
가려도 잃는 기능이 없다 — 여기 카트는 원래 동작하지 않고, 카트 이월(_BetCart 의 data-sport-cart-persist, 현재 W16 만)도
W09 는 쓰지 않아 페이지를 옮기면 담은 선택이 원래 비워진다(ST10 과 같음).
🔴 #betHistoryList 는 나의 배팅에만 있다. 범위 없이 .sport-right 를 숨기면 국내스포츠 카트까지 사라진다.
   .sport-left 는 flex:1(default/sport.css) 이라 내역이 폭 전체를 채운다. 모바일 카트 버튼(.mo-cart-icon)도 .sport-right 안이라 함께 숨는다.
*****************************************************************************************************************************************/
body.skin-w09 .sport-container:has(#betHistoryList) > .sport-right {display: none;}

/****************************************************************************************************************************************
에러 페이지(404·500) — 공용 Error 뷰
*****************************************************************************************************************************************/
body.skin-w09 .error-page {padding: 80px 20px; text-align: center; color: #fff;}
body.skin-w09 .error-page .error-code {font-size: 72px; font-weight: 800; line-height: 1; color: #d6a5ff;}
body.skin-w09 .error-page .error-title {margin-top: 16px; font-size: 22px; font-weight: 600;}
body.skin-w09 .error-page .error-message {margin-top: 10px; color: #adadad;}
body.skin-w09 .error-page .error-home-btn {display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; padding: 10px 24px; font-weight: 600; color: #000; background: #ae61fb; border-radius: 10px;}

/****************************************************************************************************************************************
SweetAlert2 z-index — 🔴 가입/로그인 팝업(.intro-popup z-index 9999) 위로 올린다.
없으면 성공창 [확인] 을 못 눌러 가입이 "반응 없음" 으로 보인다(W08 diamond 2026-09-28 — 이식 때 이 한 줄이 빠졌었다).
*****************************************************************************************************************************************/
.swal2-container,
.swal2-popup {z-index: 999999 !important;}