@charset "utf-8";

/****************************************************************************************************************************************
W08(=type17.startapi.net) ↔ 공용(_Shared) 뷰 브리지

원본 w08 템플릿에는 없는 화면(충전·환전·포인트·마이페이지·쪽지·공지/이벤트·고객센터)은
공용 뷰(Views/Presentations/_Shared)가 렌더한다. 그 뷰들이 쓰는 공통 클래스를
W08 팔레트로 입히는 파일이다.

🔴 원본 w08 에는 board.css 가 아예 없다(모든 보조화면을 레이어 팝업으로 처리하던 데모라서).
   따라서 게시판 계열 화면의 외형은 **전적으로 이 파일이 책임진다.**

🔴 W08 은 다른 스킨과 달리 **라이트 테마**다 — 원본 layout.css 실측 body{color:#000; background:#fff}.
   어두운 스킨(W05 등)의 값을 그대로 가져오면 흰 배경에 흰 글씨가 된다.

팔레트(원본 실측): 배경 #fff / 패널 #f3fffe / 테이블헤더 #eaf7f6 / 헤더띠 #81d8d0 /
포인트 틸 #0d9d99 / 보조 딥틸 #229389 / 서브텍스트 #6b8f8d / 보더 #c0d9dc / 버튼 #1fa498
구조는 W05 브리지와 동일하게 맞추고 색만 바꿨다(공용 뷰가 같은 클래스를 쓰므로).
*****************************************************************************************************************************************/

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

/* 목록 테이블 */
body.skin-w08 .scroll-wrap {position: relative; width: 100%; overflow-x: auto;}
body.skin-w08 .list-table {position: relative; margin: 20px 0; width: 100%; border: 1px solid #c0d9dc; border-bottom: none; border-collapse: collapse;}
body.skin-w08 .list-table thead tr {background: #eaf7f6;}
body.skin-w08 .list-table tbody tr {background: #ffffff;}
body.skin-w08 .list-table th {padding: 12px 10px; text-align: center; font-weight: 600; color: #229389; border-bottom: 1px solid #c0d9dc;}
body.skin-w08 .list-table td {padding: 12px 10px; text-align: center; font-weight: 500; color: #000; border-bottom: 1px solid #c0d9dc;}
body.skin-w08 .list-table td.td-left {text-align: left;}
body.skin-w08 .list-table td.td-cursor {cursor: pointer;}
body.skin-w08 .list-table tbody tr:hover {background: #e3f4f3;}

/* 입력 테이블 */
body.skin-w08 .write-table {position: relative; margin: 20px 0; width: 100%; border: 1px solid #c0d9dc; border-bottom: none; border-collapse: collapse;}
body.skin-w08 .write-table th {padding: 12px 10px; width: 150px; text-align: center; font-weight: 600; color: #229389; background: #ffffff; border-right: 1px solid #c0d9dc; border-bottom: 1px solid #c0d9dc;}
body.skin-w08 .write-table td {padding: 12px 10px; width: calc(100% - 150px); text-align: left; color: #000; border-bottom: 1px solid #c0d9dc;}
body.skin-w08 .write-table td > input,
body.skin-w08 .write-table td > select {margin: 0; padding: 10px; width: 100%; text-align: left; color: #000; background: #fff; border: 1px solid #c0d9dc;}
body.skin-w08 .write-table td > textarea {margin: 0; padding: 10px; width: 100%; height: 250px; color: #000; background: #fff; border: 1px solid #c0d9dc;}
body.skin-w08 .write-table td > input::placeholder,
body.skin-w08 .write-table td > textarea::placeholder {color: #666;}
/* 단위 표기(원·USDT) — 14px 작은 글씨라 브랜드 틸 #0d9d99(3.33:1)로는 AA(4.5:1) 미달이었다.
   같은 틸 계열에서 명도만 낮춘 #0a7b78(5.10:1)로 올린다. 제목·표머리의 브랜드색은 그대로 둔다
   (그쪽은 크고 굵어 AA Large 3:1 충족 — 전부 바꾸면 스킨 전체 톤이 달라진다). */
body.skin-w08 .write-table td > input + .unit-suffix {margin-left: 6px; font-size: 14px; color: #0a7b78; vertical-align: middle;}
body.skin-w08 .write-table td > input:has(+ .unit-suffix) {width: calc(100% - 34px); display: inline-block;}

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

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

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

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

/* 상세보기 (고객센터 문의 / 쪽지) */
body.skin-w08 .detail-container {position: relative; width: 100%; background: #ffffff; border: 1px solid #c0d9dc; overflow: hidden;}
body.skin-w08 .detail-header {display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; background: #f3fffe; border-bottom: 1px solid #c0d9dc;}
body.skin-w08 .detail-title-wrap {display: flex; align-items: center; gap: 15px; flex: 1; min-width: 0;}
body.skin-w08 .detail-title {font-size: 18px; font-weight: 700; color: #000;}
body.skin-w08 .detail-status {padding: 5px 15px; font-size: 13px; font-weight: 600; border-radius: 3px; color: #0d9d99; background: rgba(255, 211, 45, .15);}
body.skin-w08 .detail-date {font-size: 14px; color: #6b8f8d; flex-shrink: 0;}
body.skin-w08 .detail-section {padding: 0; margin: 20px;}
body.skin-w08 .detail-section-title {padding: 12px 20px; font-size: 15px; font-weight: 700; color: #229389; text-align: center; background: #eaf7f6; border: 1px solid #c0d9dc; border-bottom: none;}
body.skin-w08 .detail-section-body {padding: 20px; font-size: 14px; line-height: 1.8; color: #000; background: #f3fffe; border: 1px solid #c0d9dc; word-break: break-word; min-height: 100px;}
body.skin-w08 .detail-answer .detail-section-title {color: #fff; background: #0d9d99; border-color: #0d9d99;}

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

/* 게시판 가이드 (약관·정책 페이지 등) */
body.skin-w08 .bo-guide {position: relative; margin: 20px 0; padding: 20px; width: 100%; text-align: center; color: #000; background: #ffffff; border: 1px solid #c0d9dc;}
body.skin-w08 ul.guide-list {position: relative; margin: 0; padding: 0; width: 100%; text-align: left;}
/* 🔴 color 는 #000 이다. 예전 #ccc 는 **다크테마 스킨 브리지에서 복사된 잔재**로,
   W08 은 라이트 테마(위 13행 주석: body{color:#000; background:#fff})라 흰 .bo-guide 위에서
   대비 1.61:1 — 사실상 안 보였다(다이아몬드 업체 신고 2026-10-07 "충전·환전 문구가 흐릿").
   같은 박스의 .bo-guide 와 다른 본문(.list-table td · .write-table td · .detail-section-body)이
   전부 #000 이라 그 값에 맞춘다(21:1). */
body.skin-w08 ul.guide-list > li {list-style: disc; display: list-item; margin-left: 40px; padding: 0; line-height: 1.8; font-weight: 500; color: #000;}

@media (max-width: 800px) {
    body.skin-w08 .write-table th {width: 100px;}
    body.skin-w08 .write-table td {width: calc(100% - 100px);}
    body.skin-w08 .detail-header {flex-direction: column; align-items: flex-start; gap: 8px;}
    body.skin-w08 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 가 이 계약을 지킨다.
*****************************************************************************************************************************************/
body.skin-w08 .game-popup {display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: rgba(0, 0, 0, .85); overflow-y: auto;}
body.skin-w08 .game-popup.active {display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px;}
body.skin-w08 .game-popup-inner {position: relative; width: 100%; max-width: 1200px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: #ffffff; border: 1px solid #fdf6b0; border-radius: 10px; overflow: hidden;}
body.skin-w08 .game-popup-header {display: flex; justify-content: space-between; align-items: center; padding: 15px 20px; background: rgba(0, 0, 0, .8); border-bottom: 1px solid #c0d9dc;}
body.skin-w08 .game-popup-title {margin: 0; font-size: 18px; font-weight: 700; color: #0d9d99;}
body.skin-w08 .game-popup-close {width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; font-size: 16px; color: #000; background: #fff; border: 1px solid #c0d9dc; border-radius: 50%; cursor: pointer;}
body.skin-w08 .game-popup-close:hover {color: #fff; background: #0d9d99; border-color: #0d9d99;}
body.skin-w08 .game-popup-body {flex: 1; padding: 20px; overflow-y: auto; background: #eaf7f6;}
body.skin-w08 .game-popup-loading {display: none; padding: 40px; text-align: center; color: #6b8f8d;}
body.skin-w08 .game-popup-loading.active {display: block;}
body.skin-w08 .game-popup-list {display: flex; flex-wrap: wrap; gap: 15px; margin: 0; padding: 0; list-style: none;}
body.skin-w08 .game-popup-list > li {position: relative; width: calc(100% / 6 - 12.5px); aspect-ratio: 3/4; overflow: hidden; cursor: pointer; background: #fff; border: 1px solid #c0d9dc; border-radius: 8px;}
body.skin-w08 .game-popup-list > li:hover {border-color: #0d9d99;}
body.skin-w08 .game-popup-list > li > img {width: 100%; height: 100%; object-fit: contain; background: #0a0a0a;}
@supports not (object-fit: contain) {
    body.skin-w08 .game-popup-list > li > img {height: auto;}
}
body.skin-w08 .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: #000; background: linear-gradient(transparent, rgba(0, 0, 0, .9)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
body.skin-w08 .game-popup-list > li.no-games {width: 100%; padding: 40px; text-align: center; color: #6b8f8d; background: transparent; border: none; cursor: default;}
body.skin-w08 .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(0, 0, 0, .7); opacity: 0; transition: .2s;}
body.skin-w08 .game-popup-list > li:hover .game-hover {opacity: 1;}
body.skin-w08 .game-popup-list > li .game-hover .play-icon {width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #fff; background: #0d9d99; border-radius: 50%;}

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

/****************************************************************************************************************************************
메인 전용 — 컨테이너 폭 해제

원본 템플릿은 `header`(1528px)와 메인 히어로 `.hero`(1528px)를 같은 폭으로 맞추고,
그 아래 섹션만 `.main-inner`(1300px)로 좁힌다. 그런데 히어로가 `.container`(1300px) 안에 들어가면
자기 폭이 부모보다 커서 오른쪽으로 삐져나가 헤더와 좌우 정렬이 깨진다(2026-09-17 실측).
메인에서만 폭 제한을 풀어 헤더와 히어로의 좌우를 맞춘다. `.container` 클래스 자체는 유지해야 한다 —
≤1380px 에서 고정헤더 높이(69px)만큼 본문을 내리는 게 그 클래스이기 때문이다.
*****************************************************************************************************************************************/
body.skin-w08 .container.container-wide {width: 100%; max-width: none; padding-left: 0; padding-right: 0;}

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

🔴 이 블록이 없으면 팝업이 모달로 뜨지 않고 **페이지 하단에 날것으로 렌더**된다
   (체크박스·"오늘 하루 보지 않기"·팝업 본문이 푸터 아래 그대로 노출 — 2026-09-17 업체 지적).
   W16 에서 마크업만 가져오고 스타일을 안 옮겨서 생겼던 누락이다.
*****************************************************************************************************************************************/
body.skin-w08 .notice-popup {display: none; position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, .78);}
body.skin-w08 .notice-popup.active {display: flex; justify-content: center; align-items: center;}
body.skin-w08 .notice-popup-inner {position: relative; width: 500px; max-width: calc(100vw - 32px); max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: #ffffff; border: 1px solid #fdf6b0; border-radius: 10px; overflow: hidden;}
body.skin-w08 .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: #000; background: rgba(0, 0, 0, .6); border: 1px solid #c0d9dc; border-radius: 50%; cursor: pointer;}
body.skin-w08 .notice-popup-close:hover {color: #fff; background: #0d9d99; border-color: #0d9d99;}
body.skin-w08 .notice-popup-swiper {flex: 0 1 auto; min-height: 0; min-width: 0; width: 100%; overflow: hidden;}
body.skin-w08 .notice-popup-slide {padding: 0;}
body.skin-w08 .notice-popup-title {margin: 0; padding: 18px 50px 18px 20px; font-size: 16px; font-weight: 700; color: #0d9d99; background: #eaf7f6;}
body.skin-w08 .notice-popup-body {padding: 20px; min-height: 220px; max-height: calc(100vh - 200px); overflow-y: auto; color: #000; background: #141116;}
body.skin-w08 .notice-popup-image {margin-bottom: 15px; text-align: center;}
body.skin-w08 .notice-popup-image img {max-width: 100%; height: auto; border-radius: 6px;}
body.skin-w08 .notice-popup-content {font-size: 14px; line-height: 1.7; color: #000; word-break: break-word; white-space: pre-wrap;}
body.skin-w08 .notice-popup-pagination {padding: 10px 0; text-align: center; background: #eaf7f6;}
body.skin-w08 .notice-popup-pagination .swiper-pagination-bullet {width: 8px; height: 8px; margin: 0 4px; background: #666; opacity: 1;}
body.skin-w08 .notice-popup-pagination .swiper-pagination-bullet-active {background: #0d9d99;}
body.skin-w08 .notice-popup-footer {display: flex; justify-content: space-between; align-items: center; padding: 12px 20px; background: #ffffff; border-top: 1px solid #c0d9dc;}
body.skin-w08 .notice-popup-check {display: flex; align-items: center; gap: 6px; font-size: 13px; color: #229389; cursor: pointer;}
body.skin-w08 .notice-popup-check input[type="checkbox"] {width: 16px; height: 16px; accent-color: #0d9d99; cursor: pointer;}
body.skin-w08 .notice-popup-close-btn {padding: 8px 22px; font-size: 13px; font-weight: 700; color: #fff; background: #0d9d99; border: none; border-radius: 4px; cursor: pointer;}
body.skin-w08 .notice-popup-close-btn:hover {filter: brightness(110%);}

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

/****************************************************************************************************************************************
고객센터 아코디언 — 본문이 배경사진 위에 그대로 얹혀 글자가 안 읽히던 것(2026-09-17 업체 지적).
헤더 메뉴와 같은 패널색(#ffffff)으로 카드를 깔아 가독성을 준다.
*****************************************************************************************************************************************/
body.skin-w08 .accordion-item {margin-bottom: 10px; background: #ffffff; border: 1px solid #c0d9dc; border-radius: 4px; overflow: hidden;}
body.skin-w08 .accordion-header {display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #000; background: #ffffff; cursor: pointer;}
body.skin-w08 .accordion-header:hover {background: #e3f4f3;}
body.skin-w08 .accordion-meta {display: flex; align-items: center; gap: 10px; margin-left: auto;}
body.skin-w08 .accordion-date {font-size: 13px; color: #6b8f8d;}
body.skin-w08 .accordion-status {padding: 4px 10px; font-size: 12px; font-weight: 600; color: #0d9d99; background: rgba(255, 211, 45, .15); border-radius: 3px;}
body.skin-w08 .accordion-arrow {color: #229389;}
body.skin-w08 .accordion-content {padding: 0 16px 16px; color: #000; background: #141116; border-top: 1px solid #c0d9dc;}
body.skin-w08 .accordion-section {margin-top: 14px;}
body.skin-w08 .accordion-section-title {padding: 10px 14px; font-size: 14px; font-weight: 700; color: #229389; background: #eaf7f6; border: 1px solid #c0d9dc; border-bottom: none;}
body.skin-w08 .accordion-section-body {padding: 16px; font-size: 14px; line-height: 1.8; color: #000; background: #ffffff; border: 1px solid #c0d9dc; word-break: break-word;}
body.skin-w08 .accordion-answer .accordion-section-title {color: #fff; background: #0d9d99; border-color: #0d9d99;}
body.skin-w08 .accordion-actions {display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;}
/* 🔴 버튼이 아니라 **감싸는 컨테이너**(.board-btn)에 배경을 칠하고 있었다.
   그래서 청록 띠 안에 스타일 없는 흰 버튼이 놓이고, 버튼 글자는 원본 popup.css 의 color:#fff 라
   흰 배경에 흰 글씨가 되어 "보내기/취소"가 안 보였다(diamond 2026-09-26 PPT 18).
   배경은 버튼에 주고, 컨테이너는 정렬만 담당한다(원본 popup.css .board-btn 의 flex 배치를 그대로 살린다). */
body.skin-w08 .board-btn > button {padding: 10px 20px; font-weight: 600; color: #fff; background: #0d9d99; border: none; border-radius: 25px; cursor: pointer;}
/* 두 번째 버튼(취소/전체삭제)은 보조 동작 — 같은 톤의 연한 색으로 구분한다. */
body.skin-w08 .board-btn > button + button {background: #7fb5b2;}

/****************************************************************************************************************************************
로그인/회원가입 팝업 상단 브랜드 로고 (업체 요청 2026-09-17)
--brand-logo 는 _Layout 의 body style 에서 주입 — 스킨을 쓰는 어느 브랜드든 자기 로고가 들어간다.
*****************************************************************************************************************************************/
body.skin-w08 .login-form .intro-tit::before,
body.skin-w08 .join-form .intro-tit::before {content: ''; display: block; height: 58px; margin: 0 auto 16px; background: var(--brand-logo) center center / contain no-repeat;}

/* 🔴 로고가 든 제목 영역이 팝업 패널과 겉돈다 (업체 요청 2026-09-28).
   공용 auth-popup.css 는 `.intro-tit{background: var(--bg-layer2, var(--third-bg, #252d37))}` 인데
   W08 은 그 변수를 정의하지 않아 **짙은 남색 #252d37** 폴백이 그대로 쓰인다.
   팝업 패널은 w08 popup.css 가 `.intro-wrap{background:#1fa498}` 로 칠하는 **민트**라,
   민트 패널 한가운데에 남색 판이 얹힌 모양이 된다.
   🔴 보기만 나쁜 게 아니다 — 제목 글자는 W08 의 `--color:#123b38`(진한 청록)을 상속하는데
      그 남색 판 위에서 대비가 **1.13:1** 이다(사실상 안 읽힘). 스크린샷의 '로그인' 이 그 상태다.
   → 판을 없애 패널에 녹이고(배경 투명), 글자는 민트 위에서 읽히는 값으로 바꾼다
      (#0a2e2b on #1fa498 = **4.74:1**, 본문 기준 AA 통과).
   terra 도 같은 자리에서 같은 처리를 했다(`body.brand-tera .intro-popup .intro-tit{background:transparent}`).
   `body.skin-w08` 스코프라 타 스킨 무영향. */
body.skin-w08 .intro-popup .intro-tit {
    background: transparent;
    color: #0a2e2b;
    text-align: center;   /* 로고가 가운데라 제목도 같이 가운데로 — 좌측 정렬이면 로고와 축이 어긋난다 */
    padding: 20px 25px 0;
    margin-bottom: 14px;
}

/****************************************************************************************************************************************
카지노·슬롯 벤더 타일 그리드 — **W08 에는 두지 않는다** (2026-09-27 제거)

이 자리에 W05 브리지의 타일 그리드가 통째로 복사돼 있었다. W05 마크업은 `li > img` + `.game-tit` 인데
W08 원본 카드는 `.g-logo / .g-panel / .g-img / .g-footer .kr-text` 로 완전히 다르다.
그래서 `> img`·`.game-tit` 규칙은 아무것도 안 맞고 **`> li` 규칙만 적중해** 원본 카드를 망가뜨렸다:
  · border 1px #2a2a2a · background #0d0d0d  → 라이트 스킨에 어두운 테두리·검은 배경
  · aspect-ratio 29/26                       → 카드가 21px 눌려 아래가 잘림(실측 782 vs 802)
  · gap 10px 0                               → 원본 20px 가로 간격이 0 이 됨
W08 카드 외형은 main.css 가 전담한다(.g-panel/.g-footer/ul.game-list). 공용 뷰 중 W08 에서
`ul.game-list > li > .game-tit` 를 내는 화면은 없다(_Shared/Casino·Slot 은 W08 자체 뷰가 가리고,
미니게임은 `mg-game-list` 다). 되살리려면 그 마크업을 실제로 쓰는 화면이 생겼는지 먼저 확인할 것.
배너 비율 제각각 문제는 아래 `.g-img {aspect-ratio}` 한 줄이 이미 담당한다.
*****************************************************************************************************************************************/

/****************************************************************************************************************************************
메인 메뉴 카드(라이브카지노 / 슬롯) — 브랜드 무빙 이미지 지원

원본 템플릿은 `li > img {min-width:100%}`(높이 auto)라 두 카드의 높이가 소재 비율을 그대로 따라간다.
업체가 준 무빙 소재가 각각 800×449(16:9)·800×532(3:2)로 **비율이 달라** 그대로 넣으면 두 칸 높이가 어긋난다.
→ 카드 박스를 기존 정지이미지와 같은 5:3(600×360)으로 고정하고 소재는 object-fit:cover 로 채운다.
   정지이미지 테넌트는 같은 비율이라 렌더 결과가 바뀌지 않는다(회귀 0).
*****************************************************************************************************************************************/
body.skin-w08 ul.main-menu > li {aspect-ratio: 5 / 3; overflow: hidden;}
body.skin-w08 ul.main-menu > li > img,
body.skin-w08 ul.main-menu > li > video.menu-motion {display: block; width: 100%; height: 100%; min-width: 0; object-fit: cover;}

/****************************************************************************************************************************************
로그인/회원가입 입력칸 — floating-field 톤 변수 (auth-floating.css)

🔴 이식 당시 이 블록이 빠져 있었다. 공용 auth-floating.css 는 `color: var(--color)` 로 글자색을 정하는데
   W08 에는 --color 정의가 없어 선언이 무효가 되고, 상위(어두운 배경용 흰 글씨)를 그대로 상속받았다.
   그 결과 **흰 입력칸에 흰 글씨** 가 되어 아이디를 입력해도 보이지 않았다(diamond 2026-09-26 PPT 15).

   W08 은 흰 입력칸 + 민트 테두리의 **밝은** 스킨이다. W05 계열에서 복사돼 있던 `color-scheme: dark`
   (어두운 입력칸 전제)도 같이 걷어낸다 — 정반대 선언이라 자동완성 미리보기 글자를 흰색으로 만든다.
*****************************************************************************************************************************************/
body.skin-w08 {
    --bg-layer1: #fff;                     /* input 배경 — 원본 .input-list 와 동일한 흰색 */
    --color: #123b38;                      /* input 텍스트 — 민트 톤에 맞춘 진한 청록 */
    --secondary: #1fa498;                  /* floating 떠오른 라벨(focus) */
    --border2-color: #c0d9dc;              /* input 테두리 — 원본 값 */
    --border2-font: #7f9ea2;               /* 라벨 기본 / placeholder */
}

body.skin-w08 ul.intro-list > li input,
body.skin-w08 ul.intro-list > li select {color-scheme: light;}

/* 원본 템플릿 버그 — .input-list 는 배경이 흰색(#fff)인데 글자도 흰색이라 입력값이 보이지 않는다.
   회원가입·정보수정 등 .input-list 를 쓰는 폼 전체가 같은 증상이라 여기서 한 번에 바로잡는다. */
body.skin-w08 .input-list > input {color: #123b38;}

/****************************************************************************************************************************************
헤더 보완 — 원본 데모에는 없던 실서비스 요소
*****************************************************************************************************************************************/

/* 흐르는 환영문구 — 원본은 <marquee>(폐기된 태그)였다. 같은 동작을 CSS 로 낸다.
   .top-notice 는 원본에서 높이·배경이 고정이라 내용이 비면 정체불명의 흰 상자가 남는다. */
body.skin-w08 .top-notice {overflow: hidden;}
body.skin-w08 .w08-marquee {display: block; width: 100%; height: 100%; overflow: hidden; white-space: nowrap;}
body.skin-w08 .w08-marquee > span {display: inline-block; padding-left: 100%; animation: w08-marquee 14s linear infinite;}
body.skin-w08 .w08-marquee:hover > span {animation-play-state: paused;}
@keyframes w08-marquee {
    from {transform: translateX(0);}
    to   {transform: translateX(-100%);}
}
/* 애니메이션을 원치 않는 사용자에게는 흐르지 않게 둔다(접근성 — 원본 marquee 에는 없던 배려) */
@media (prefers-reduced-motion: reduce) {
    body.skin-w08 .w08-marquee > span {padding-left: 0; animation: none;}
}

/* 🔴 게이트에서는 닫기(X)를 감춘다 — 업체 재요청 2026-09-28
   "x 닫기를 눌러도 계속 차단돼 있어야 한다". 배경만 불투명하게 해두면 X 한 번에 뚫린다.
   `.terra-login-gate` 는 서버가 Flipt **`isloginforce` ON + 홈 자동노출**일 때만 붙이는 클래스다
   (_LoginPopup.cshtml). 헤더 로그인버튼으로 직접 연 팝업에는 안 붙으므로 그건 평소처럼 닫힌다 —
   "내가 연 팝업이 안 닫히는" 사고가 구조적으로 안 난다.
   auth-ui.js 도 같은 클래스를 보고 **닫기 동작 자체를** 막는다(CSS 로 숨기기만 하면 개발자도구·
   스크립트로 눌러서 뚫린다). 이름은 terra 선례에서 왔고 기능은 스킨 무관 공용이다. */
body.skin-w08 .intro-popup.terra-login-gate .intro-closeBtn {display: none !important;}

/* 🔴 단, 가입 흐름(추천인코드·가입폼)에 들어간 뒤에는 X 를 보여 준다.
   게이트의 목적은 "로그인 없이 사이트를 쓰지 못하게" 이지 "가입 폼에 가두는 것" 이 아니다.
   X 를 누르면 팝업이 닫히는 게 아니라 **로그인 단계로 되돌아간다**(auth-ui.js) — 게이트는 유지된다.
   업체 신고 2026-09-28: 가입을 시작하면 빠져나올 방법이 아예 없었다. */
body.skin-w08 .intro-popup.terra-login-gate:has(.code-wrap.active) .intro-closeBtn,
body.skin-w08 .intro-popup.terra-login-gate:has(.join-wrap.active) .intro-closeBtn {display: block !important;}

/* 로그인 게이트 뒷배경 차단 — 업체 요청(2026-09-27 PPT 슬라이드 5)
   "유저페이지 도메인 입장시 로그인창만 볼 수 있게 하며, 뒷배경은 보이지 않게".
   공용 auth-popup.css 의 기본값이 rgba(0,0,0,0.7) 라 메인이 그대로 비쳤다.
   불투명 딥틸(#229389 계열의 어두운 값)로 덮는다 — 어둡게 가리는 느낌은 그대로 두면서
   뒤가 전혀 안 보이고, 팝업 패널(#1fa498)·국기 알약(rgba(0,0,0,.45))이 그 위에서 또렷하다.
   같은 변수를 default(#071d2a·#e0e0e0)·w04(#eceff6) 도 쓴다 — 스킨별 불투명 지정이 기존 관례다.
   body.skin-w08 스코프라 타 스킨 무영향. */
body.skin-w08 {--intro-overlay-bg: #0f3f3c;}

/* 🔴 공용 로그인팝업의 언어 선택 국기(.intro-lang-strip)는 스타일이 어디에도 없다
   (st02 만 자체 정의). 그래서 고정 오버레이(.intro-popup, inset:0)의 **좌상단**에 그대로 붙고,
   W08 은 헤더 로고가 바로 거기 있어서 국기가 로고를 덮는다(첫 배포에서 실제로 그랬다).
   팝업 오른쪽 위로 옮겨 로고와 겹치지 않게 한다. */
body.skin-w08 .intro-popup .intro-lang-strip {
    /* 🔴 하단 가운데는 **가입 폼의 [가입하기] 버튼 자리**였다.
       국기 띠가 z-index 50001 로 그 위에 떠서 버튼 클릭을 통째로 가로챘다
       (업체 신고 2026-09-28 — PC 에서만. 모바일은 폼이 좁아 겹치지 않았다).

       처음 하단으로 보낸 이유는 "상단은 헤더 로고·버튼과 겹친다" 였는데, 그 사이
       오버레이가 **불투명**(--intro-overlay-bg)으로 바뀌어 헤더가 아예 가려진다.
       실측: 좌상단·우상단 모두 오버레이 빈 공간이고 가입 패널은 x≥451 에서 시작한다.
       → 폼과 절대 겹치지 않는 **좌상단**으로 되돌린다. */
    position: absolute; top: 18px; bottom: auto; left: 18px; right: auto;
    transform: none;
    display: flex; gap: 12px; align-items: center;
    padding: 8px 14px; background: rgba(0, 0, 0, .45); border-radius: 22px;
}
/* 모바일은 폼이 화면 폭을 거의 채워 상단도 패널과 부딪힌다. 겹치지 않는 하단 가운데를 유지한다
   (실측에서 모바일은 원래 겹침이 없었다). */
@media (max-width: 1024px) {
    body.skin-w08 .intro-popup .intro-lang-strip {
        top: auto; bottom: 26px; left: 50%; transform: translateX(-50%);
    }
}
body.skin-w08 .intro-popup .intro-lang-strip .flags {font-size: 18px; line-height: 1;}

/****************************************************************************************************************************************
게임사 타일 이미지 — 비율 고정

🔴 원본은 `.g-img {width:100%}` 만 주고 높이를 이미지 비율에 맡긴다. 아트 파일이 전부 같은 규격일 때만
   성립하는 전제인데, 실제로는 표준 290x260(카지노 21·슬롯 42장) 사이에 세로로 긴 200x288 계열이
   섞여 있다(ela·betsoft·playtech·rectangle·asia·peaches18 등 슬롯 7장).
   그 타일만 이미지가 폭에 맞춰 늘어나며 훨씬 높아져 혼자 튀어 보였다(diamond 2026-09-27 PPT 16).

   파일 7장을 리사이즈하는 대신 비율을 CSS 로 고정한다 — 앞으로 들어올 아트가 어떤 규격이든 타일이 일정하다.
   잘라내지 않고(contain) 여백을 두는 이유: 캐릭터 아트라 cover 로 채우면 얼굴이 잘린다.
*****************************************************************************************************************************************/
body.skin-w08 .g-img {aspect-ratio: 290 / 260; height: auto; object-fit: contain;}

/****************************************************************************************************************************************
로고 심볼 — 워드마크 앞 다이아몬드 (업체 요청 2026-09-27)

원본 W08 로고는 텍스트뿐이라(.first-logo/.rest-logo) 심볼 자리가 없었다.
글자 크기에 맞춰 따라가도록 em 으로 잡는다 — 데스크톱 50px / 모바일 35px 글자에 각각 비례한다.
🔴 flex-shrink:0 이 없으면 좁은 화면에서 심볼이 찌그러진다(.logo 가 flex 컨테이너다).
*****************************************************************************************************************************************/
/* 🔴 em 은 **자기 font-size** 기준이다. 원본은 `.logo > span` 에만 50px 을 주고
   `.logo` 자체는 기본 크기(16px)라, 심볼 height:1.05em 이 15px 로 나왔다(배포 후 실측).
   컨테이너에 같은 크기를 얹어 기준을 맞춘다 — span 은 자기 font-size 를 명시하고 있어
   글자 크기는 그대로다(상속받지 않는다). */
body.skin-w08 .logo { font-size: 50px; }

body.skin-w08 .logo-icon {
    /* 🔴 basic.css 의 전역 리셋 `* {font-size:14px}` 이 img 에도 **직접** 걸린다.
       (37번 줄이 li·p·span 등은 inherit 로 되돌리는데 img 는 그 목록에 없다.)
       그래서 상속이 끊겨 1.05em 이 14px 기준으로 계산됐다 — 두 번째 실측에서 잡은 원인.
       inherit 로 명시해야 위의 .logo(50px/35px) 를 기준으로 삼는다. */
    font-size: inherit;
    height: 1.05em;              /* 글자 높이에 맞춤 — 폰트가 바뀌어도 같이 따라간다 */
    width: auto;
    margin-right: 0.22em;
    flex: 0 0 auto;
    display: block;
    /* 워드마크와 함께 등장하도록 첫 글자 애니메이션에 얹는다(원본 .first-logo 와 같은 타이밍) */
    opacity: 0;
    transform: scale(2);
    animation: firstLogo 1s ease-out forwards;
}
/* 모바일은 글자가 35px 로 줄어드는데, 심볼까지 같이 줄면 로고가 허전해 보여 살짝 키운다. */
@media (max-width: 1024px) {
    body.skin-w08 .logo { font-size: 35px; }        /* 원본 모바일 글자 크기와 동일 */
    body.skin-w08 .logo-icon { height: 1.15em; margin-right: 0.18em; }
}

/* 🔴 모바일에서 업체명이 잘린다 — layout.css 가 .logo-wrap 을 **고정 150px + overflow:hidden**
   으로 잡아 뒀다. 원본 데모 로고가 짧아서(DEMO-H) 성립하던 값이다.
   DIAMOND 는 심볼 없이도 161px, 심볼까지 207px 이라 'DIAMO…' 로 잘렸다(≤1024 전 구간 실측).
   헤더 우측 햄버거(.mo-bar)는 390px 화면에서도 x=345 부터라 사이에 195px 이 남아 있다.
   → 폭을 내용에 맞추되 햄버거를 침범하지 못하게 상한만 둔다(overflow:hidden 은 로고 슬라이드
      연출이 쓰므로 유지). 업체명 길이와 무관하게 동작한다. */
@media (max-width: 1024px) {
    body.skin-w08 .logo-wrap { width: auto; max-width: calc(100% - 60px); }
}

/* 가입팝업 기본 추천인코드 안내 (.code-notice)
   🔴 공용 auth-popup.css 는 `color: var(--secondary)` 를 쓰는데, W08 브리지가 --secondary 를
      #1fa498 로 두고 **팝업 패널 배경도 같은 #1fa498** 이라 글자가 배경에 묻혔다
      (실측 대비 1.00:1 = 완전 비가시). diamond 가 Site:Brand:ReferralCode 를 쓴 첫 테넌트라
      이제서야 드러난 자리다. 다른 스킨은 각자 .code-notice 를 정의해 두어 무관하다.
   라이트 테마 패널(#f3fffe)+딥틸 텍스트로 안내를 박스로 띄운다(실측 7.1:1 / strong 5.9:1). */
body.skin-w08 .code-notice {margin: -4px 25px 14px; padding: 10px 12px; width: auto; background: #f3fffe; border: 1px solid #c0d9dc; border-radius: 6px; color: #12615b; font-size: 13px; line-height: 1.6;}
body.skin-w08 .code-notice > p {margin: 0;}
body.skin-w08 .code-notice strong {font-weight: 700; color: #0a6f6b;}

/****************************************************************************************************************************************
SweetAlert2 z-index — 🔴 가입/로그인 팝업 위로 올린다

STX.success/error 확인창(.swal2-container 기본 **1060**)이 로그인/회원가입 팝업
(.intro-popup **z-index:9999**) 뒤로 깔린다. 그러면 메시지는 DOM 에 있는데 **[확인] 을 누를 수 없고**,
가입 성공 콜백(location.reload)이 영영 실행되지 않아 화면이 그대로 멈춘다.

업체 신고(diamond 2026-09-28) "가입하기·중복확인이 반응하지 않는다" 의 실제 원인이 이것이다 —
가입은 성공(200)했는데 성공창의 확인을 못 눌러 실패로 보였다(실측: 확인 버튼 중앙에 INPUT 이 잡힘).

W15·W16·W18A·w06·st10·st11·hangang·st88-cheongung 은 이미 같은 규칙을 갖고 있다.
**W08 이식 때 이 한 줄이 빠졌다.**
*****************************************************************************************************************************************/
.swal2-container,
.swal2-popup {z-index: 999999 !important;}