/* 99casino 브랜드 오버라이드 — 디자인 원본(style.nine.css) 위에 얹는 보정 CSS */

/* 슬롯 상세: 게임 썸네일 비율 균일화.
   디자인 원본 `.game-view img { width:100%; max-height:157px }` 는 폭을 100%로 늘린 뒤
   높이만 157px로 잘라 이미지를 세로로 찌부러뜨림(제공사마다 원본비율 상이). 고정 비율 +
   object-fit:cover 로 왜곡 없이 균일하게 채움. */
.popup_box.SlotDetail .slotnav .game-view a img,
.popup_box.SlotDetail .game-view img {
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: 10px;
	display: block;
	background: #efe7db; /* 로딩/누락 시 카드와 이질감 없는 바탕 */
}

/* 이미지 로드 실패(onerror 로 hidden 처리)해도 카드 레이아웃 유지 */
.popup_box.SlotDetail .game-view a img[hidden] { display: none; }

/* 동적 벤더 타일 중 전용 아트가 없는 게임사(관리자가 새로 켠 벤더 등) — 무아트 카드.
   깨진 이미지 대신 브랜드 톤 배경 + 하단 게임사명으로 표시. */
.game_list .game_img.game_img--noart {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	background: linear-gradient(135deg, #3a2410 0%, #1c1206 100%);
}
/* 전용 아트 없는 벤더: 실제 게임 썸네일이 로드되면 카드 전체를 cover 로 채움 */
.game_list .game_img.game_img--noart.noart_hasimg {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
/* 썸네일도 없는 벤더(라이브카지노 등): 빈 카드 대신 벤더명 라벨 표시 */
.game_list .game_img.game_img--noart .noart_label {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	text-align: center;
	color: #f0e2c0;
	font-weight: 700;
	font-size: 15px;
	line-height: 1.3;
	word-break: keep-all;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
	pointer-events: none;
}
.game_list .game_img.game_img--noart.noart_hasimg .noart_label { display: none; }

/* 우상단 쪽지 안읽음 배지 */
.after_login .msg_badge {
	display: inline-block;
	min-width: 16px;
	height: 16px;
	margin-left: 4px;
	padding: 0 4px;
	border-radius: 8px;
	background: #e00028;
	color: #fff;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	font-weight: 700;
	vertical-align: middle;
}

/* 슬롯 상세: 게임 썸네일 비율 균일화 (이하 기존) */
/* 카드 높이가 이미지에 따라 들쭉날쭉하지 않도록 이름 영역 고정 */
.popup_box.SlotDetail .game-view > a { gap: 4px; }
.popup_box.SlotDetail .game-view .nm_sgame {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Turnstile — 이 스킨은 공용 auth-floating.css 를 로드하지 않아 여기에 둔다.
   위 여백 15px = .form_area 안 .form 블록끼리의 간격과 동일(실측). 안 주면 비밀번호 칸에 딱 붙는다.
   아래 여백은 .button_area 의 margin-top:40px 이 흡수하므로 두지 않는다. */
.turnstile-inline {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin: 15px 0 0;
	/* max-height 를 길이로 미리 잡아둔다 — none → 0 은 보간이 안 돼 전환이 안 걸린다
	   (auth-floating.css 의 같은 규칙 주석 참조). */
	max-height: 200px;
	transition: opacity .18s ease, max-height .18s ease, margin .18s ease,
	            visibility .18s ease;
}
/* 🔴 width:100% 가 있어야 size:'flexible' 이 실제로 먹는다 — 없으면 위젯이 자기 콘텐츠
   폭(300px)에 머문다(공용 auth-floating.css 의 같은 규칙 주석 참조). */
.turnstile-inline > .cf-turnstile {
	width: 100%;
	/* CF 위젯은 300px 밑으로 줄지 않는다 — 없으면 좁은 폼에서 밖으로 넘친다
	   (이 스킨 모바일 실측 268px → 300px 복원, 팝업 안에 들어감). */
	min-width: 300px;
	/* 🔴 상한이 없으면 폼이 넓을 때 위젯이 그만큼 늘어난다(W16 600px 제보).
	   공용 auth-floating.css 의 같은 규칙과 동일한 계약. */
	max-width: 400px;
}

/* 인증 통과 후 캡차 박스만 감춘다. 🔴 게이트 부활이 아니다 — 로그인폼·닫기는 그대로.
   (공용 auth-floating.css 의 동명 규칙과 같은 계약. 이 스킨은 그 파일을 안 읽어 별도로 둔다.)
   display 대신 높이만 접는 이유는 auth-floating.css 의 같은 규칙 주석 참조. */
.turnstile-inline.is-verified {
	max-height: 0;
	min-height: 0;
	margin: 0;
	opacity: 0;
	overflow: hidden;
	visibility: hidden;
	/* 🔴 delay 금지 — 토글 반복 시 최종값에 도달하지 못한다(auth-floating.css 주석 참조). */
	transition: opacity .18s ease, max-height .18s ease, margin .18s ease,
	            visibility .18s ease;
}

@media (prefers-reduced-motion: reduce) {
	.turnstile-inline,
	.turnstile-inline.is-verified { transition: none; }
}
.turnstile-msg {
	font-size: 12px;
	line-height: 1.5;
	text-align: center;
	color: #e35d6a;
	word-break: keep-all;
}
.turnstile-msg:empty { display: none; }

/****************************************************************************************************************************************
공지/이벤트/고객센터 팝업 본문 — 에디터 이미지가 모달 밖으로 잘리던 것 (2026-09-19 베가 업체 지적)

99casino 스킨은 정보성 팝업을 SweetAlert 로 띄우고(99casino-bridge.js) 본문 HTML 을 그대로 넣는다.
첨부 이미지(BF_IMAGE)는 인라인으로 max-width 가 걸려 있지만, **에디터 본문 안에 넣은 이미지**는
원본 크기 그대로라 720px 모달을 넘어가 잘린다(가로 스크롤도 안 생겨 오른쪽이 날아간다).

다른 스킨은 공용 `css/business/suneditor-viewer.css` 가 같은 일을 하는데 이 스킨은 그 시트를 로드하지 않는다.
→ 스킨 전용 파일인 여기서 팝업 본문에만 한정해 제약한다(다른 스킨·다른 테넌트 영향 0).
*****************************************************************************************************************************************/
.swal2-html-container img,
.swal2-html-container video,
.swal2-html-container iframe {
	max-width: 100%;
	height: auto;
}
.swal2-html-container table {
	max-width: 100%;
	table-layout: fixed;
}
.swal2-html-container td,
.swal2-html-container th {
	word-break: break-word;
}
/* 에디터가 figure 로 감싸는 경우(이미지 캡션·정렬) — figure 자체도 폭을 넘길 수 있다 */
.swal2-html-container figure {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/****************************************************************************************************************************************
고객센터 답변·문의내용 URL 자동 링크(STX.linkifyText) — 평문처럼 보이던 것 (2026-09-19)

99casino 는 자체 화면(Main/ 만)에서는 이 경로로 안내하지 않지만, 로그인 상태에서 /Customer 같은
공용(_Shared) 경로로 직접 들어오면(북마크·상담원이 보낸 링크 등) 그 뷰가 그대로 렌더된다.
답변/문의내용의 URL 은 STX.linkifyText 가 <a> 로 만들어 주지만, 링크 자체는 스타일이 없어 다른
스킨의 basic.css a 초기화처럼 평문으로 보인다(관련 fix: css/business/suneditor-viewer.css).

다른 스킨은 공용 `css/business/suneditor-viewer.css` 가 같은 일을 하는데 이 스킨은 그 시트를
로드하지 않는다. → 스킨 전용 파일인 여기서 고객센터·쪽지 컨테이너에만 한정해 제약한다
(로비 화면 스타일은 건드리지 않음 — 재조사 금지 결정 그대로 유지, [[project_99casino_popup_only_skin]]).
*****************************************************************************************************************************************/
#cust-content a,
#cust-answer a,
#msg-content a,
.accordion-section-body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

/****************************************************************************************************************************************
고객센터 팝업(99casino-bridge.js customer_detail) URL 자동 링크 — 위와 별개 경로 (2026-09-19)

99casino 는 상단 "고객센터" 버튼을 누르면 위 _Shared 뷰가 아니라 자체 SweetAlert 팝업으로
문의/답변을 보여준다(99casino-bridge.js, 실사용자가 실제로 쓰는 경로 — 위 #cust-* 규칙은
직접 URL 접근에만 해당하고 이 팝업은 못 잡는다). 이 팝업 본문(.swal2-html-container)의 <a>
도 아래 전역 초기화(common.css `a { text-decoration:none; color:#fafafa }`)를 그대로 받아
평문처럼 보인다.

🔴 color:inherit(다른 스킨과 같은 방식) 로 처음 적용했으나 라이브 실측(2026-09-19)에서
글자가 11px로 매우 작고 밑줄 색이 글자색과 같아 육안으로 거의 안 보였다(사용자 제보로
확인). 이 팝업 전용 강조색 변수도 없어(--etype-color-point 는 짙은 남색이라 흰 배경에서
거의 검정) 표준 링크 파란색을 직접 지정한다.
*****************************************************************************************************************************************/
.swal2-html-container a {
	color: #3b6ce0;
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

/* ── 슬롯 게임목록: 검색창 (업체 요청 2026-09-28 PPT 슬라이드 9) ──
   목록은 이미 전량 로드돼 있으므로 서버 요청 없이 카드만 걸러낸다. */
.popup_box.SlotDetail .slot-search-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px 12px;
}
.popup_box.SlotDetail .slot-search-bar input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 9px 12px;
	color: #fff;
	background: rgba(0, 0, 0, .35);
	border: 1px solid rgba(178, 112, 44, .55);
	border-radius: 6px;
	font-size: 1.4rem;
}
.popup_box.SlotDetail .slot-search-bar input::placeholder { color: rgba(255, 255, 255, .45); }
.popup_box.SlotDetail .slot-search-bar input:focus {
	outline: none;
	border-color: #b2702c;
}
.popup_box.SlotDetail .slot-search-count {
	flex: 0 0 auto;
	color: rgba(255, 255, 255, .6);
	font-size: 1.3rem;
	white-space: nowrap;
}
.popup_box.SlotDetail .slot-search-empty {
	padding: 40px;
	text-align: center;
	color: #999;
}

/* ── 슬롯 게임목록: 세로 스크롤바 노출 (업체 요청 2026-09-28 PPT 슬라이드 10) ──
   🔴 원인은 스크롤이 없어서가 아니다. 디자인 원본이 **전역** `::-webkit-scrollbar { width: 3px }`
      를 걸어둬서 3px 짜리 막대가 사실상 안 보였을 뿐이다(common.css:10, 2873).
      전역값을 건드리면 사이트 전체 외형이 바뀌므로, 실제로 스크롤되는 컨테이너
      (.modal-content > .user_card, overflow:auto + max-height)에만 넓고 보이는 막대를 준다. */
.popup_box.SlotDetail .slot_detail.layer_content .modal-content .user_card {
	scrollbar-width: thin;                              /* Firefox */
	scrollbar-color: #b2702c rgba(0, 0, 0, .45);
	scrollbar-gutter: stable;                           /* 스크롤바 등장 시 카드가 밀리지 않게 */
}
.popup_box.SlotDetail .slot_detail.layer_content .modal-content .user_card::-webkit-scrollbar {
	width: 10px;
}
.popup_box.SlotDetail .slot_detail.layer_content .modal-content .user_card::-webkit-scrollbar-track {
	background: rgba(0, 0, 0, .45);
	border-radius: 10px;
}
.popup_box.SlotDetail .slot_detail.layer_content .modal-content .user_card::-webkit-scrollbar-thumb {
	background: #b2702c;
	border-radius: 10px;
	border: 2px solid rgba(0, 0, 0, .45);               /* 막대가 트랙 안에 떠 보이게 */
}
.popup_box.SlotDetail .slot_detail.layer_content .modal-content .user_card::-webkit-scrollbar-thumb:hover {
	background: #d08c3d;
}