@charset "utf-8";
/* ============================================================
   ui-open.css  —  오픈형(시안 "가") 헤더 + 메인 화면 보완
   common.css · ui-header.css · ui-main.css 뒤에 읽혀 덮어쓴다.
   앞의 파일들은 수정하지 않았다. head.sub.php 의 <link> 한 줄을 지우면 되돌아온다.
   ============================================================ */

/* ------------------------------------------------------------
   0. 바탕색
      common.css 는 body 에 배경색을 주지 않는다. 그래서 브라우저 기본값인
      흰색이 그대로 드러나 본문 오른쪽·아래가 하얗게 보였다.
   ------------------------------------------------------------ */
html { background: var(--u-bg-0); }
body {
	background: var(--u-bg-0);
	color: var(--u-text);
	min-height: 100vh;
}
/* 본문 껍데기들은 배경을 갖지 않는다 (바탕색이 그대로 비치게) */
.sub_content_arr_bg,
.main-page,
.main_content,
.main_content_wrap,
.main_content_wrap .casinoZone,
.main_content_wrap .casinoZone .content,
.main_content_wrap .containerInner {
	background: none !important;
	background-color: transparent !important;
}
/* 본문 위쪽에 아주 옅은 금빛 — 검정만 있으면 밋밋하다 */
.sub_content_arr_bg {
	background-image: radial-gradient(62% 260px at 50% 0%, rgba(224,161,56,.055), transparent 72%) !important;
	background-repeat: no-repeat !important;
}

/* 게임 목록 제목 (CASINO LIST / SLOT LIST) */
.main_content_wrap .casinoZone .title { color: var(--u-text) !important; }
.main_content_wrap .casinoZone .title h3 { font-size: 15px; letter-spacing: .06em; }

/* ------------------------------------------------------------
   1. 상단 바가 왼쪽 메뉴를 덮던 문제
      common.css 의 .user-info-arr 가 position:fixed 인데 left 값이 없어
      화면 왼쪽 끝(0)부터 그려졌다. 왼쪽 메뉴 너비(250px)만큼 밀어준다.
   ------------------------------------------------------------ */
.user-info-arr {
	left: 250px !important;
	right: 0 !important;
	width: auto !important;
	height: 66px !important;
	background-image: none !important;
	background: linear-gradient(180deg, #131317, #0E0E12) !important;
	border-bottom: 1px solid var(--u-line) !important;
	box-shadow: 0 6px 22px rgba(0,0,0,.45);
}
.user-info-cont {
	height: 66px !important;
	width: auto !important;
	gap: 20px;
	padding: 0 22px !important;
}
/* 본문이 상단 바에 가리지 않게
   ★★ 2026-08-31 — 여기서 `margin-top` 을 쓰면 안 된다. 실제로 사고가 났다.

   `.sub_content_arr_bg` 위에는 여백도 테두리도 없는 형제(#popup-zone)뿐이라
   이 66px 위쪽 여백이 **`<body>` 밖으로 빠져나가 버렸다**(여백 상쇄, margin collapsing).
   그 결과 페이지 전체가 아래로 밀려 **왼쪽 로고 위에 56px 짜리 검은 공백**이 생겼다
   (66px 에서 `.main-page` 의 `-10px` 이 상쇄되어 56px. 실측으로 확인했다).

   `padding` 은 상쇄되지 않는다. 같은 66px 을 안쪽 여백으로 바꾸면
   본문은 그대로 상단 바 아래에서 시작하고, 왼쪽 메뉴는 화면 맨 위에 붙는다. */
.sub_content_arr_bg {
	margin-top: 0 !important;
	padding-top: 66px !important;
}

/* ------------------------------------------------------------
   2. 로고 — 기존 사이트 로고를 그대로 쓴다 (새로 그리지 않는다)
   ------------------------------------------------------------ */
.logo_top::after { display: none !important; }   /* 임시로 그렸던 글자 로고 제거 */
.logo_top img {
	display: block !important;
	width: auto;
	height: 62px;
	filter: drop-shadow(0 6px 18px rgba(224,161,56,.28));
}
/* 로고 위아래 여백 — 2026-08-31 사용자 요청("로고 위 공백을 없애 달라")으로 줄였다.
   위 공백의 큰 원인(56px)은 위 1장의 여백 상쇄였고, 여기서는 남은 여백을 다듬는다.
   `.logo_top` 은 common.css 에서 위아래 20px 씩 더 갖고 있어 그것도 푼다. */
.user-info-arr1 { display: flex; justify-content: center; margin: 16px auto 14px !important; }
.logo_top { margin: 0 !important; }

/* ------------------------------------------------------------
   3. 공지 줄
   ------------------------------------------------------------ */
/* common.css 가 공지 줄에 테두리·너비를 주어 속 빈 금색 띠처럼 보였다. 지운다. */
.noticeText {
	width: auto !important;
	max-width: 620px;
	flex: 0 1 auto !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	font-size: 13px;
	overflow: hidden;
}
.noticeText marquee { width: 100%; max-width: 560px; color: var(--u-text-2); }
.noticeText .notice-none { color: var(--u-text-3); }

/* ------------------------------------------------------------
   4. 상단 줄 로그인 (오픈형 · 시안 "가")
      로그인하지 않은 사람에게만 보인다.
   ------------------------------------------------------------ */
.hd-login {
	display: flex;
	align-items: center;
	gap: 7px;
	margin-left: auto;
	flex: 0 0 auto;
}
.hd-login input {
	width: 132px;
	height: 38px;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid var(--u-line);
	border-radius: 9px;
	background: var(--u-bg-2);
	color: var(--u-text);
	font-size: 13.5px;
	outline: none;
	transition: border-color .18s var(--u-ease-io), box-shadow .18s var(--u-ease-io), background .18s var(--u-ease-io);
}
.hd-login input::placeholder { color: var(--u-text-3); }
.hd-login input:hover  { border-color: var(--u-line-2); }
.hd-login input:focus  { border-color: var(--u-line-gold); background: var(--u-bg-3); box-shadow: var(--u-ring, 0 0 0 3px rgba(224,161,56,.14)); }
/* 자동완성이 흰 배경으로 덮는 것 방지 */
.hd-login input:-webkit-autofill,
.hd-login input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--u-text);
	-webkit-box-shadow: 0 0 0 1000px var(--u-bg-3) inset;
	caret-color: var(--u-text);
}
.hd-login .hd-go {
	height: 38px;
	padding: 0 20px;
	border: 0;
	border-radius: 9px;
	background: var(--u-gold);
	color: #1B1305;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
	transition: background .16s var(--u-ease-io), transform .12s var(--u-ease-io);
}
.hd-login .hd-go:hover  { background: #edb04c; }
.hd-login .hd-go:active { transform: translateY(1px); background: var(--u-gold-deep); }
.hd-login .hd-join {
	display: inline-flex;
	align-items: center;
	height: 38px;
	padding: 0 15px;
	border: 1px solid var(--u-line-2);
	border-radius: 9px;
	color: var(--u-text-2);
	font-size: 13.5px;
	text-decoration: none;
	white-space: nowrap;
	transition: color .16s var(--u-ease-io), border-color .16s var(--u-ease-io);
}
.hd-login .hd-join:hover { color: var(--u-gold-soft); border-color: var(--u-line-gold); }

/* ------------------------------------------------------------
   5. 회원정보 줄 — 글자가 세로로 쪼개지던 문제
      좁아지면 "입 금", "마 이 페 이 지" 처럼 한 글자씩 잘렸다.
   ------------------------------------------------------------ */
.user-info01 { flex-wrap: nowrap !important; gap: 4px; }
.user-info01 > li { flex: 0 0 auto; white-space: nowrap; }
.user-info01 a { white-space: nowrap; }
.user-info01 a .txt,
.user-info01 .txt { display: inline !important; white-space: nowrap; }
.user-info01 li { line-height: normal !important; padding: 0 !important; }
.user-info01 .PointChange { white-space: nowrap; }

/* 화면이 좁으면 글자를 줄이고, 더 좁으면 아이콘 버튼만 남긴다 */
@media (max-width: 1500px) {
	.user-info01 a { padding: 6px 9px; font-size: 12.5px; }
	.noticeText marquee { max-width: 300px; }
}
@media (max-width: 1320px) {
	.noticeText { display: none; }
	.hd-login input { width: 112px; }
}

/* ------------------------------------------------------------
   6. 메인 : 업체 목록 — 로고 이미지가 없어도 이름이 보이게
      common.css 는 업체 이름을 display:none 으로 숨기고 배경 이미지에 맡겼다.
      이미지가 없으면 검은 네모만 남는다. 이름을 항상 보이게 바꾼다.
   ------------------------------------------------------------ */
.casino-g .list-menugame,
.slot-g .list-menugame {
	width: auto;
	padding: 0;
	float: none;
}
.companys-title,
.companys-title2 {
	display: flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 12px !important;
	min-height: 82px;
	border: 1px solid var(--u-line);
	border-radius: 12px;
	background: linear-gradient(160deg, #1C1C23, #121216);
	background-size: cover;
	background-position: center;
	transition: border-color .2s var(--u-ease-io), background .2s var(--u-ease-io), transform .2s var(--u-ease-io);
}
.companys-title:hover,
.companys-title2:hover {
	transform: translateY(-2px) !important;
	border-color: var(--u-line-gold);
}
.companys-title span,
.companys-title2 span {
	display: block !important;
	position: static !important;
	height: auto !important;
	line-height: 1.4 !important;
	background: none !important;
	color: var(--u-text) !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	letter-spacing: -.01em;
	text-align: center;
	word-break: keep-all;
}
.companys-title:hover span,
.companys-title2:hover span { color: var(--u-gold-soft) !important; }

/* ------------------------------------------------------------
   7. 메인 : 보여줄 자료가 없을 때
      빈 상자만 덩그러니 남지 않게 안내 문구를 넣는다.
   ------------------------------------------------------------ */
.main_content_wrap .info01 .listFrame .list:empty::after,
.main_content_wrap .info01 .vertical-ticker-ar:empty::after {
	content: "표시할 내용이 없습니다.";
	display: block;
	padding: 26px 0;
	color: var(--u-text-3);
	font-size: 13px;
	text-align: center;
}
.main_content_wrap .info01 .listFrame { min-height: 0; }

/* 자료가 없을 때 넣는 한 줄 (index.php 에서 넣는다) */
.ticker-empty {
	display: block !important;
	padding: 34px 0 !important;
	color: var(--u-text-3) !important;
	font-size: 13px !important;
	text-align: center !important;
	background: none !important;
	border: 0 !important;
}
/* 안내 한 줄만 있을 때 상자가 쓸데없이 크지 않게 */
.main_content_wrap .info01 .listFrame .list { height: auto !important; min-height: 0 !important; }
.main_content_wrap .infoZone .info01:has(.ticker-empty) { padding-bottom: 8px; }

/* 배너가 없으면 그 자리를 접는다 (빈 검은 여백을 남기지 않는다) */
.main-visual:empty { display: none; }

/* ------------------------------------------------------------
   8. 왼쪽 메뉴 아래 배지
   ------------------------------------------------------------ */
/* 이미지를 숨기지 않는다 — 평생 도메인 안내와 청소년 이용불가 배너가 그대로 보여야 한다
   (관리자 요청 2026-09-22. 자세한 경위는 ui-header.css 5번 항목) */
.bannermss, .bannermss_19 { display: flex; justify-content: center; margin: 10px 0; }
.bannermss img, .bannermss_19 img { display: block; }

@media (prefers-reduced-motion: reduce) {
	.companys-title, .companys-title2 { transition: none; }
}

/* ★ 상단 로그인 — 버튼만 (2026-09-29, 관리자 요청)

   입력칸을 없애고 로그인 화면으로 보내기로 했다. form 이 div 로 바뀌었으므로
   가로로 나란히 두고, 로그인 쪽을 눈에 띄게 한다.
   옛 .hd-login input 규칙은 그대로 둔다 — 되돌릴 때 쓴다. */
.hd-login > .hd-go,
.hd-login > .hd-join {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 34px;
	padding: 0 16px;
	border-radius: var(--u-radius-sm, 9px);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: -.01em;
	text-decoration: none;
	white-space: nowrap;
	transition: background .16s var(--u-ease-io), border-color .16s var(--u-ease-io);
}
.hd-login > .hd-go {
	background: var(--u-gold);
	border: 1px solid transparent;
	color: #1B1305;
	font-weight: 700;
}
.hd-login > .hd-go:hover { background: #edb04c; }
.hd-login > .hd-join {
	background: transparent;
	border: 1px solid var(--u-line-2);
	color: var(--u-text-2);
}
.hd-login > .hd-join:hover { border-color: var(--u-line-gold); color: var(--u-gold-soft); }