@charset "utf-8";
/* ==========================================================================
   ui-mg.css — PC 미니게임 · 카지노 목록 칸 (view/minigame.php)

   2026-09-19 관리자 요청 "미니게임 이미지(등록반영)" 로 만든 파일이다.

   이 화면은 스타일이 **하나도 없었다.** 마크업이 <img ... width="100%"> 라서
   그림이 생기자마자 한 칸이 화면 폭을 통째로 먹어 화면이 무너졌다.
   (그림이 없던 동안에는 깨진 아이콘이라 티가 안 났다.)

   그래서 목록을 **아이콘 타일 격자**로 세운다.
     · 그림은 칸의 썸네일 — 비율 고정, 넘치면 잘라 채운다
     · 이름은 그림 아래, 남은시간은 오른쪽에 숫자로

   범위 : PC 에서 `.banner_4ea` 를 쓰는 화면은 view/minigame.php 하나뿐이다
     (전수로 확인했다). 모바일은 inc/csn_list.php 가 하나 더 써서 거기서는
     `:not(:has(.t-line0))` 으로 비켜 가지만, PC 는 그럴 필요가 없다.

   되돌리기 : head.sub.php 의 이 파일 <link> 한 줄을 지우면 된다.
   ========================================================================== */

/* ---------- 목록 틀 ---------- */
.content_wrap .banner_4ea{
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 4px 0 24px !important;
	background: none !important;
	box-sizing: border-box;
}
.content_wrap .banner_4ea ul{
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
}
@media (max-width: 1500px){ .content_wrap .banner_4ea ul{ grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (max-width: 1200px){ .content_wrap .banner_4ea ul{ grid-template-columns: repeat(3, minmax(0,1fr)); } }

/* ---------- 칸 ---------- */
.content_wrap .banner_4ea li.item-box{
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	border: 1px solid rgba(255,255,255,.07) !important;
	border-radius: 12px !important;
	background: #12141c !important;
	overflow: hidden;
	cursor: pointer;
	transition: border-color .15s, transform .15s;
}
.content_wrap .banner_4ea li.item-box:hover{
	border-color: rgba(214,175,96,.55) !important;
	transform: translateY(-2px);
}
.content_wrap .banner_4ea li.item-box > a{
	display: block;
	line-height: 0;
	text-decoration: none;
}

/* ---------- 그림 ---------- */
.content_wrap .banner_4ea li.item-box img{
	display: block !important;
	width: 100% !important;
	aspect-ratio: 16 / 10;
	height: auto !important;
	object-fit: cover;
	background: #0c0e14;
}

/* ---------- 이름 · 남은시간 ---------- */
.content_wrap .banner_4ea li.item-box .nav_title{
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 9px 11px 10px !important;
	border: 0 !important;
	background: none !important;
	text-align: left !important;
	line-height: 1.3 !important;
}
.content_wrap .banner_4ea li.item-box .nav_title > div{
	float: none !important;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	text-align: left !important;
}
/* 이름 */
.content_wrap .banner_4ea li.item-box .nav_title > div:first-child{
	flex: 1 1 auto;
	min-width: 0;
	color: #EDEFF4 !important;
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: -.02em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* 남은시간 */
.content_wrap .banner_4ea li.item-box .nav_title > div:last-child:not(:first-child){
	flex: 0 0 auto;
	color: #D6AF60 !important;
	font-size: 13px !important;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}


/* ==========================================================================
   업체 목록 칸 — 기존 서버의 그림이 칸을 채우게 (관리자 요청 2026-09-19)

   화면 : view/game_select.php (라이브카지노 · 슬롯게임 업체 목록)

   관리자 지적 — "뒤에 있는 칸은 큰데 보여지는 이미지는 칸보다 작다."
   맞다. 그림은 `background-size:contain` 이라 칸 안에 **들어가기만** 했다.
   기존은 칸 자체가 그림 비율(padding-top:54%)이라 꽉 찼는데, 새 스킨이
   칸을 `min-height:82px` 짜리 가로로 긴 상자로 바꿔서 좌우가 남았다.

   칸을 기존과 같은 비율로 되돌리고 그림이 칸을 채우게 한다.
   이름은 기존 PC 와 같게 그림 아래쪽에 겹쳐 둔다.
   범위는 세부 화면(.sub_content_arr) 안으로 좁힌다 — 메인 화면은 건드리지 않는다.
   ========================================================================== */
.sub_content_arr .companys .companys-title,
.sub_content_arr .companys .companys-title2{
	display: block !important;
	position: relative !important;
	min-height: 0 !important;
	height: auto !important;
	padding: 0 !important;
	aspect-ratio: 300 / 162;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	overflow: hidden;
}
.sub_content_arr .companys .companys-title span,
.sub_content_arr .companys .companys-title2 span{
	display: block !important;
	position: absolute !important;
	left: 0; right: 0; bottom: 0;
	height: auto !important;
	padding: 14px 8px 7px !important;
	background: linear-gradient(transparent, rgba(0,0,0,.8)) !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 700;
	line-height: 1.2 !important;
	text-align: center !important;
	text-shadow: 0 1px 4px #000;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}


/* ==========================================================================
   메인 화면의 카지노·슬롯 칸 — 그림이 칸을 꽉 채우게 (관리자 요청 2026-09-19)

   관리자 지적 — 접속하자마자 보이는 미니게임·라이브카지노·슬롯게임 그림이
   칸에 비해 너무 작아 지저분해 보인다.

   원인은 업체 목록 화면과 같다. 그림은 `background-size:contain` 이라
   칸 안에 들어가기만 하고, 칸(.list-menugame 카드)은 그림보다 크다.
   칸을 그림 비율로 맞추고 그림이 칸을 채우게 한다.
   이름은 그림 아래쪽에 겹쳐 둔다 (기존 PC 와 같은 모양).

   범위 : 메인의 .casino-g · .slot-g 만. 세부 화면은 위 절이 따로 맡는다.
   되돌리기 : 이 절만 지우면 된다.
   ========================================================================== */
.casino-g .list-menugame,
.slot-g .list-menugame{
	/* 카드가 flex + 고정 높이라 그림 위에 검은 띠가 16px 남았다.
	   내용(그림) 높이를 그대로 따르게 한다. */
	display: block !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}
.casino-g .companys-title,
.slot-g .companys-title,
.casino-g .companys-title2,
.slot-g .companys-title2{
	display: block !important;
	position: relative !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	aspect-ratio: 300 / 162;
	border: 0 !important;
	border-radius: 0 !important;
	background-size: cover !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	overflow: hidden;
}
.casino-g .companys-title span,
.slot-g .companys-title span,
.casino-g .companys-title2 span,
.slot-g .companys-title2 span{
	display: block !important;
	position: absolute !important;
	left: 0; right: 0; bottom: 0;
	width: auto !important;
	height: auto !important;
	padding: 16px 8px 8px !important;
	background: linear-gradient(transparent, rgba(0,0,0,.82)) !important;
	color: #ffffff !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-align: center !important;
	text-shadow: 0 1px 4px #000;
	white-space: nowrap;
	overflow: hidden !important;
	text-overflow: ellipsis;
}