@charset "utf-8";

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

원본 W05 템플릿에는 없는 화면(충전·환전·포인트·마이페이지·쪽지·공지/이벤트·고객센터)은
공용 뷰(Views/Presentations/_Shared)가 렌더한다. 그 뷰들이 쓰는 공통 클래스를
W05 팔레트로 입히는 파일이다. 구조는 W16 board.css 를 기준으로 맞췄고 색만 W05 로 바꿨다.

팔레트(원본 layout.css 실측): 배경 #000 / 패널 #1d1d1d / 보조패널 #141414 /
포인트 골드 #ffd32d / 보조 베이지 #c1ad8b / 서브텍스트 #888 / 보더 #333 / 파랑버튼 #0a3b52
*****************************************************************************************************************************************/

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

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

/* 입력 테이블 */
body.skin-w05 .write-table {position: relative; margin: 20px 0; width: 100%; border: 1px solid #333; border-bottom: none; border-collapse: collapse;}
body.skin-w05 .write-table th {padding: 12px 10px; width: 150px; text-align: center; font-weight: 600; color: #c1ad8b; background: #1d1d1d; border-right: 1px solid #333; border-bottom: 1px solid #333;}
body.skin-w05 .write-table td {padding: 12px 10px; width: calc(100% - 150px); text-align: left; color: #fff; border-bottom: 1px solid #333;}
body.skin-w05 .write-table td > input,
body.skin-w05 .write-table td > select {margin: 0; padding: 10px; width: 100%; text-align: left; color: #fff; background: #000; border: 1px solid #333;}
body.skin-w05 .write-table td > textarea {margin: 0; padding: 10px; width: 100%; height: 250px; color: #fff; background: #000; border: 1px solid #333;}
body.skin-w05 .write-table td > input::placeholder,
body.skin-w05 .write-table td > textarea::placeholder {color: #666;}
body.skin-w05 .write-table td > input + .unit-suffix {margin-left: 6px; font-size: 14px; color: #ffd32d; vertical-align: middle;}
body.skin-w05 .write-table td > input:has(+ .unit-suffix) {width: calc(100% - 34px); display: inline-block;}

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

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

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

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

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

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

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

@media (max-width: 800px) {
    body.skin-w05 .write-table th {width: 100px;}
    body.skin-w05 .write-table td {width: calc(100% - 100px);}
    body.skin-w05 .detail-header {flex-direction: column; align-items: flex-start; gap: 8px;}
    body.skin-w05 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-w05 .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-w05 .game-popup.active {display: flex; justify-content: center; align-items: flex-start; padding: 40px 20px;}
body.skin-w05 .game-popup-inner {position: relative; width: 100%; max-width: 1200px; max-height: calc(100vh - 80px); display: flex; flex-direction: column; background: #1d1d1d; border: 1px solid #fdf6b0; border-radius: 10px; overflow: hidden;}
body.skin-w05 .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 #333;}
body.skin-w05 .game-popup-title {margin: 0; font-size: 18px; font-weight: 700; color: #ffd32d;}
body.skin-w05 .game-popup-close {width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; font-size: 16px; color: #fff; background: #000; border: 1px solid #333; border-radius: 50%; cursor: pointer;}
body.skin-w05 .game-popup-close:hover {color: #000; background: #ffd32d; border-color: #ffd32d;}
body.skin-w05 .game-popup-body {flex: 1; padding: 20px; overflow-y: auto; background: #101010;}
body.skin-w05 .game-popup-loading {display: none; padding: 40px; text-align: center; color: #888;}
body.skin-w05 .game-popup-loading.active {display: block;}
body.skin-w05 .game-popup-list {display: flex; flex-wrap: wrap; gap: 15px; margin: 0; padding: 0; list-style: none;}
body.skin-w05 .game-popup-list > li {position: relative; width: calc(100% / 6 - 12.5px); aspect-ratio: 3/4; overflow: hidden; cursor: pointer; background: #000; border: 1px solid #333; border-radius: 8px;}
body.skin-w05 .game-popup-list > li:hover {border-color: #ffd32d;}
body.skin-w05 .game-popup-list > li > img {width: 100%; height: 100%; object-fit: contain; background: #0a0a0a;}
@supports not (object-fit: contain) {
    body.skin-w05 .game-popup-list > li > img {height: auto;}
}
body.skin-w05 .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-w05 .game-popup-list > li.no-games {width: 100%; padding: 40px; text-align: center; color: #888; background: transparent; border: none; cursor: default;}
body.skin-w05 .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-w05 .game-popup-list > li:hover .game-hover {opacity: 1;}
body.skin-w05 .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: #ffd32d; border-radius: 50%;}

@media (max-width: 1024px) {
    body.skin-w05 .game-popup-list > li {width: calc(100% / 4 - 11.25px);}
}
@media (max-width: 800px) {
    body.skin-w05 .game-popup.active {padding: 20px 10px;}
    body.skin-w05 .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-w05 .container.container-wide {width: 100%; max-width: none; padding-left: 0; padding-right: 0;}

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

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

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

/****************************************************************************************************************************************
고객센터 아코디언 — 본문이 배경사진 위에 그대로 얹혀 글자가 안 읽히던 것(2026-09-17 업체 지적).
헤더 메뉴와 같은 패널색(#1d1d1d)으로 카드를 깔아 가독성을 준다.
*****************************************************************************************************************************************/
body.skin-w05 .accordion-item {margin-bottom: 10px; background: #1d1d1d; border: 1px solid #333; border-radius: 4px; overflow: hidden;}
body.skin-w05 .accordion-header {display: flex; align-items: center; gap: 10px; padding: 14px 16px; color: #fff; background: #1d1d1d; cursor: pointer;}
body.skin-w05 .accordion-header:hover {background: #262626;}
body.skin-w05 .accordion-meta {display: flex; align-items: center; gap: 10px; margin-left: auto;}
body.skin-w05 .accordion-date {font-size: 13px; color: #888;}
body.skin-w05 .accordion-status {padding: 4px 10px; font-size: 12px; font-weight: 600; color: #ffd32d; background: rgba(255, 211, 45, .15); border-radius: 3px;}
body.skin-w05 .accordion-arrow {color: #c1ad8b;}
body.skin-w05 .accordion-content {padding: 0 16px 16px; color: #fff; background: #141116; border-top: 1px solid #333;}
body.skin-w05 .accordion-section {margin-top: 14px;}
body.skin-w05 .accordion-section-title {padding: 10px 14px; font-size: 14px; font-weight: 700; color: #c1ad8b; background: #101010; border: 1px solid #333; border-bottom: none;}
body.skin-w05 .accordion-section-body {padding: 16px; font-size: 14px; line-height: 1.8; color: #fff; background: #1d1d1d; border: 1px solid #333; word-break: break-word;}
body.skin-w05 .accordion-answer .accordion-section-title {color: #000; background: #ffd32d; border-color: #ffd32d;}
body.skin-w05 .accordion-actions {display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px;}
body.skin-w05 .board-btn {padding: 8px 20px; font-weight: 600; color: #000; background: #ffd32d; border: none; border-radius: 4px; cursor: pointer;}

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

/****************************************************************************************************************************************
카지노·슬롯 벤더 타일 그리드 (W05 Casino/Slot 페이지)

🔴 벤더 배너 원본이 **비율 제각각**이다 — 대부분 290×260 이지만 196×286·213×288 같은 세로형도 섞여 있다.
   원본 템플릿 CSS 는 `li > img {width:100%}`(높이 auto)라 타일마다 높이가 달라져 줄이 들쭉날쭉하고
   이름이 제자리에 안 붙어 "이미지가 깨져 보인다"는 지적을 받았다(2026-09-17 업체 PPT 슬라이드 14).

   → 타일에 고정 비율(29:26 = 배너 표준비)을 주고 이미지는 object-fit:cover 로 채운다.
     늘어남(왜곡) 없이 모든 타일이 같은 크기가 되고, 세로형 배너는 중앙 기준으로 자연스럽게 잘린다.
   → 이름표(.game-tit)는 타일 하단에 그라디언트로 얹는다. 고정 비율 박스 안에 글자를 넣으면
     타일 높이가 밀리기 때문이고, 겸사겸사 카드처럼 보인다.
*****************************************************************************************************************************************/
body.skin-w05 ul.game-list {gap: 10px 0; align-items: stretch;}
body.skin-w05 ul.game-list > li {position: relative; margin: 0 5px 10px; width: calc(100% / 5 - 10px); aspect-ratio: 29 / 26; border: 1px solid #2a2a2a; border-radius: 6px; background: #0d0d0d;}
body.skin-w05 ul.game-list > li > img {width: 100%; height: 100%; object-fit: cover; object-position: center center; border-radius: 6px;}
body.skin-w05 ul.game-list > li > .game-tit {position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; margin: 0; padding: 8px 8px 7px; width: 100%; font-size: 14px; font-weight: 600; text-align: center; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .45) 38%, rgba(0, 0, 0, .95)); text-shadow: 0 1px 3px rgba(0, 0, 0, .9); border-radius: 0 0 6px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
body.skin-w05 ul.game-list > li:hover {border-color: #ffd32d;}
body.skin-w05 ul.game-list > li:hover > .game-tit {color: #ffd32d;}

@media (max-width: 1380px) {
    body.skin-w05 ul.game-list > li {width: calc(100% / 4 - 10px);}
}
@media (max-width: 1024px) {
    body.skin-w05 ul.game-list > li {width: calc(100% / 3 - 10px);}
}
@media (max-width: 767px) {
    body.skin-w05 ul.game-list > li {width: calc(100% / 2 - 10px);}
    body.skin-w05 ul.game-list > li > .game-tit {font-size: 13px;}
}