@charset "utf-8";
/* ============================================================
   ui-main.css  —  유저 PC 메인 화면 (view/index.php)
   common.css 뒤에 읽혀서 덮어쓴다. common.css 는 수정하지 않는다.
   되돌리려면 view/index.php 의 <link> 한 줄만 지우면 된다.
   ============================================================ */

.main-page {
	position: relative;
	background:
		radial-gradient(1100px 520px at 50% -8%, rgba(224,161,56,.10), transparent 62%),
		linear-gradient(180deg, var(--u-bg-0), #0b0b0f 40%, var(--u-bg-0));
	padding-bottom: 60px;
}
.main-page::before {                      /* 미세 그레인 */
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--u-grain);
	opacity: .035;
	pointer-events: none;
	mix-blend-mode: overlay;
}
.main-page > * { position: relative; z-index: 1; }

/* ------------------------------------------------------------
   1. 상단 배너 슬라이드
   ------------------------------------------------------------ */
.main-visual {
	max-width: 1400px;
	margin: 22px auto 30px;
	padding: 0 16px;
}
.main-visual .slider { border-radius: var(--u-radius-lg); overflow: hidden; box-shadow: var(--u-shadow-lg); }

/* ★ 배너 높이를 묶는다 (2026-08-31 사용자 요청: "배너가 너무 크다")
   전에는 `height: auto` 라서 그림 비율 그대로 늘어났다 —
   폭 1200px 짜리 그림이 들어오면 높이가 **474px** 이 되어 첫 화면을 다 잡아먹었다.
   이제 높이를 300px 로 묶고 그림은 가운데를 기준으로 채운다(`cover`).

   ⚠ `cover` 는 넘치는 위아래를 **잘라낸다.** 관리자가 올린 그림에서
     글자가 위나 아래 끝에 붙어 있으면 잘릴 수 있다.
     그때는 `object-fit: contain` 으로 바꾼다(잘리지 않는 대신 좌우에 여백이 생긴다).
   ⚠ 높이를 바꿀 때는 아래 세 곳(.slick-list / .slick-slide / img)을 **같이** 바꾼다.
     한 곳만 바꾸면 슬라이드가 어긋난다. */
.main-visual .slick-list,
.main-visual .slick-track,
.main-visual .slick-slide,
.main-visual .slick-slide > div,
.main-visual .slide { height: 300px !important; }

.main-visual .slide img {
	display: block;
	width: 100% !important;
	height: 300px !important;
	object-fit: cover;
	object-position: center;
}
/* 배너 이미지가 아직 없을 때 — 빈 칸 대신 은은한 자리 */
.main-visual .slide:empty {
	height: 260px;
	background:
		linear-gradient(120deg, rgba(224,161,56,.10), transparent 55%),
		linear-gradient(180deg, var(--u-bg-2), var(--u-bg-0));
	border: 1px solid var(--u-line);
}
.slick-dots li button:before { color: var(--u-gold) !important; opacity: .35 !important; }
.slick-dots li.slick-active button:before { opacity: 1 !important; }

/* ------------------------------------------------------------
   2. 공통 — 구역 제목
   ------------------------------------------------------------ */
.main_content_wrap { max-width: 1400px; margin: 0 auto; padding: 0 16px; }

.casinoZone .title,
.infoZone .title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 28px 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--u-line);
}
.casinoZone .title h3,
.infoZone .title span {
	margin: 0;
	color: var(--u-text);
	font-size: 17px;
	font-weight: 800;
	letter-spacing: .01em;
}
.casinoZone .title i { color: var(--u-gold); font-size: 18px; }
/* 제목 앞 금색 막대 */
.casinoZone .title::before,
.infoZone .title::before {
	content: "";
	width: 3px;
	height: 18px;
	border-radius: 2px;
	background: linear-gradient(180deg, var(--u-gold-soft), var(--u-gold-deep));
	box-shadow: 0 0 12px rgba(224,161,56,.5);
}
.infoZone .title .logo_z { display: none; }

/* ------------------------------------------------------------
   3. 카지노 · 슬롯 목록 — 카드로 바꾼다
   ------------------------------------------------------------ */
.casino-g,
.slot-g {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
	gap: 14px;
}
.casino-g > a,
.slot-g > a { text-decoration: none; }

.casino-g .list-menugame,
.slot-g .list-menugame {
	position: relative;
	display: flex;
	align-items: flex-end;
	height: 116px;
	padding: 14px;
	box-sizing: border-box;
	overflow: hidden;
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius);
	background:
		linear-gradient(160deg, rgba(255,255,255,.05), transparent 45%),
		linear-gradient(180deg, var(--u-bg-2), var(--u-bg-1));
	box-shadow: var(--u-shadow-sm), inset 0 1px 0 rgba(255,255,255,.05);
	transition: transform .28s var(--u-ease), border-color .28s var(--u-ease),
	            box-shadow .28s var(--u-ease);
}
/* 위쪽에서 스며드는 금색 빛 */
.casino-g .list-menugame::before,
.slot-g .list-menugame::before {
	content: "";
	position: absolute;
	inset: -40% -20% auto -20%;
	height: 90%;
	background: radial-gradient(closest-side, rgba(224,161,56,.20), transparent);
	opacity: 0;
	transition: opacity .3s var(--u-ease);
}
.casino-g > a:hover .list-menugame,
.slot-g > a:hover .list-menugame {
	transform: translateY(-4px);
	border-color: var(--u-line-gold);
	box-shadow: var(--u-shadow-md), 0 0 0 1px rgba(224,161,56,.18), inset 0 1px 0 rgba(255,255,255,.09);
}
.casino-g > a:hover .list-menugame::before,
.slot-g > a:hover .list-menugame::before { opacity: 1; }

.casino-g .companys-title,
.slot-g .companys-title {
	position: relative;
	width: 100%;
	/* 2026-09-19 관리자 요청 — 기존 서버에서 쓰던 업체 그림을 그대로 쓴다.
	   예전에는 그림 파일이 없어서 background 를 없앴다. 이제 채웠으니 되살린다.
	   그림은 common.css 의 `.companys-title.csn_XX` 규칙이 넣는다.
	   되돌리려면 아래 한 줄의 주석을 풀면 된다. */
	/* background: none !important; */
	text-indent: 0 !important;
}
.casino-g .companys-title span,
.slot-g .companys-title span {
	display: block;
	color: var(--u-text);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -.01em;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
/* 카드 오른쪽 위 작은 표식 (카지노=칩, 슬롯=릴)
   2026-09-19 — 업체 그림을 되살렸더니 그림 위에 겹쳐서 끈다.
   되돌리려면 아래 display:none 한 줄만 지우면 된다. */
.casino-g .list-menugame::after,
.slot-g .list-menugame::after { display: none !important; }
.casino-g .list-menugame::after,
.slot-g .list-menugame::after {
	content: "";
	position: absolute;
	top: 14px; right: 14px;
	width: 26px; height: 26px;
	background-color: rgba(224,161,56,.5);
	-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
	-webkit-mask-size: contain;    mask-size: contain;
	transition: background-color .28s var(--u-ease), transform .28s var(--u-ease);
}
.casino-g .list-menugame::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v3.2M12 17.8V21M3 12h3.2M17.8 12H21'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 3v3.2M12 17.8V21M3 12h3.2M17.8 12H21'/%3E%3C/svg%3E");
}
.slot-g .list-menugame::after {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M9 5v14M15 5v14'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.6'%3E%3Crect x='3' y='5' width='18' height='14' rx='3'/%3E%3Cpath d='M9 5v14M15 5v14'/%3E%3C/svg%3E");
}
.casino-g > a:hover .list-menugame::after,
.slot-g > a:hover .list-menugame::after {
	background-color: var(--u-gold-soft);
	transform: scale(1.08);
}

/* ------------------------------------------------------------
   4. 실시간 출금 · 주간 TOP · 공지
   ------------------------------------------------------------ */
.infoZone {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	margin-top: 8px;
}
.infoZone .info01 {
	flex: 1 1 380px;
	min-width: 0;
	padding: 4px 18px 14px;
	box-sizing: border-box;
	border: 1px solid var(--u-line);
	border-radius: var(--u-radius);
	background: linear-gradient(180deg, var(--u-bg-1), var(--u-bg-0));
	box-shadow: var(--u-shadow-sm);
}
.infoZone .listFrame { overflow: hidden; }
.infoZone .list ul { margin: 0; padding: 0; list-style: none; }

.vertical-ticker-ar li,
.infoZone .listA {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 34px;
	padding: 0 4px;
	border-bottom: 1px dashed rgba(255,255,255,.05);
	color: var(--u-text-2);
	font-size: 13px;
}
.vertical-ticker-ar li .table_cell { display: flex; align-items: center; gap: 6px; }
.vertical-ticker-ar li .table_cell:nth-child(1) { flex: 0 0 auto; }
.vertical-ticker-ar li .table_cell:nth-child(2) { flex: 0 0 110px; color: var(--u-text-3); }
.vertical-ticker-ar li .table_cell:nth-child(3) { flex: 1 1 auto; color: var(--u-text-3); }
.vertical-ticker-ar li .table_cell:nth-child(4) { flex: 0 0 auto; color: var(--u-text-3); font-size: 12px; }

/* 출금 뱃지 */
.vertical-ticker-ar .out_put {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	border-radius: 999px;
	background: rgba(224,161,56,.12);
	border: 1px solid var(--u-line-gold);
	color: var(--u-gold-soft);
	font-size: 11px;
	font-weight: 700;
}
.vertical-ticker-ar li strong {
	color: var(--u-gold-soft);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}

/* 공지 목록 */
.infoZone .listA { border-bottom: 1px solid var(--u-line); }
.infoZone .listA a {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	color: var(--u-text-2);
	text-decoration: none;
	transition: color .2s var(--u-ease-io);
}
.infoZone .listA a:hover { color: var(--u-gold-soft); }
.infoZone .listA .message { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.infoZone .listA i { color: var(--u-gold); }
.infoZone .listA font { font-size: 13.5px !important; }

/* ------------------------------------------------------------
   5. 좁은 화면
   ------------------------------------------------------------ */
@media (max-width: 900px) {
	.casino-g, .slot-g { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
	.infoZone .info01 { flex: 1 1 100%; }
	.vertical-ticker-ar li .table_cell:nth-child(3) { display: none; }
}