/**
 * adpick_roulette.css
 * - 출석 룰렛(ac=roulette) leftover
 * - 휠·오버레이·당첨 티커는 absolute/애니메이션이라 CSS 유지
 * - TIP 영역은 body Tailwind
 * - layout: 공통 CSS 뒤에 로드 (통짜 adpick.roulette.css 대체)
 * - spin 키프레임은 layout.php 인라인 유지 (apis/roulette.js styleSheets[2] 의존)
 */

@keyframes bar {
	0% { transform: translateX(-100%); }
	50% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

.roulette {
	position: relative;
	max-width: 844px;
	margin: 0 auto;
	background-color: #1b1b1b;
	text-align: center;
	overflow: hidden;
}
.roulette .won {
	position: absolute;
	left: 0;
	top: 19%;
	z-index: 3;
}
.roulette .won img {
	width: 100%;
	display: block;
}
.roulette .pan {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	z-index: 5;
}
.roulette .pan img {
	width: 100%;
	display: block;
}
.roulette .blank {
	width: 100%;
	display: block;
}

.roulette .barwrap {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
	height: 100%;
	width: 75%;
	margin-left: 12.5%;
	margin-right: 12.5%;
	overflow: hidden;
}
.roulette .bar {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	perspective: 1000px;
	backface-visibility: hidden;
	transform: translateX(-100%);
}

.roulette .user-control {
	position: absolute;
	left: 0;
	top: 57.5%;
	right: 0;
	z-index: 20;
	text-align: center;
}
.roulette .user-control .button .start {
	display: inline-block;
	width: 13%;
	height: 40%;
}
.roulette .user-control .button .start .bl {
	width: 100%;
}

/* 앱 전용 커버 */
.roulette .apponly-cover {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 101;
	background-color: rgba(20, 20, 25, 0.85);
}
.roulette .apponly-cover .box {
	background-color: #fff;
	padding: 25px 50px;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 90%;
	border-radius: 10px;
	max-width: 300px;
}
.roulette .apponly-cover .tit {
	font-size: 17px;
	font-weight: bold;
	line-height: 1.5;
}
.roulette .apponly-cover .btn-app-roulette {
	background-color: #4ecdad;
	color: #fff;
	font-weight: bold;
	font-size: 17px;
	display: block;
	border-radius: 3px;
	max-width: 180px;
	height: 40px;
	line-height: 41px;
	margin: 20px auto 0;
}
@media screen and (min-width: 1024px) {
	.roulette .apponly-cover .box { padding: 30px; }
	.roulette .apponly-cover .tit { font-size: 20px; }
}

/* 무료 쿨다운 / 이용권 오버레이 */
.roulette .charge-info {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background-color: rgba(20, 20, 25, 0.85);
	color: #fff;
	align-items: center;
	justify-content: center;
	display: none;
}
.roulette .charge-info.bg-brightness {
	background-color: rgba(20, 20, 25, 0.1);
}
.roulette .charge-info.on {
	display: flex;
}
.roulette .charge-info .countdown-label {
	font-weight: 500;
	font-size: 17px;
	margin-bottom: 10px;
}
.roulette .charge-info .countdown {
	font-size: 4em;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -1px;
	vertical-align: top;
}
.roulette .charge-info .countdown .reload {
	font-size: 14px;
	font-weight: bold;
	height: 30px;
	line-height: 30px;
	border-radius: 15px;
	background-color: #fff;
	color: #37bc9b;
	display: block;
	width: 150px;
	text-align: center;
	margin: 0 auto;
}
.roulette .charge-info .txt {
	font-weight: bold;
	margin-top: 30px;
	font-size: 17px;
}
.roulette .charge-info .btn-group {
	margin-top: 15px;
}
.roulette .charge-info .btn-group.flex {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 24px;
}
.roulette .charge-info .btn-group.flex::after {
	display: none;
}
.roulette .charge-info .btn-group.flex.inline-flex {
	display: inline-flex;
}
.roulette .charge-info .btn-group.flex.inline-flex:nth-of-type(1) {
	margin-right: 10px;
}
.roulette .charge-info .img {
	width: 141px;
	height: 150px;
	display: block;
	margin: 0 5px;
	text-indent: -9999px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.roulette .charge-info .img.img-01 {
	background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_01.png");
}
.roulette .charge-info .img.img-02 {
	background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_02.png");
}
.roulette .charge-info .img.img-03 {
	background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_03.png");
}
.roulette .charge-info .img.img-04 {
	background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_04.png");
}
.roulette .charge-info .img.img-05 {
	background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_05.png");
}
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.roulette .charge-info .img.img-01 {
		background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_01@2x.png");
	}
	.roulette .charge-info .img.img-02 {
		background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_02@2x.png");
	}
	.roulette .charge-info .img.img-03 {
		background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_03@2x.png");
	}
	.roulette .charge-info .img.img-04 {
		background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_04@2x.png");
	}
	.roulette .charge-info .img.img-05 {
		background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_05@2x.png");
	}
}
@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) {
	.roulette .charge-info .img.img-01 {
		background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_01@3x.png");
	}
	.roulette .charge-info .img.img-02 {
		background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_02@3x.png");
	}
	.roulette .charge-info .img.img-03 {
		background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_03@3x.png");
	}
	.roulette .charge-info .img.img-04 {
		background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_04@3x.png");
	}
	.roulette .charge-info .img.img-05 {
		background-image: url("https://d2nkkkpf88oxbk.cloudfront.net/static/v3.adpick/images/roulette_ticket_05@3x.png");
	}
}

/* 당첨 티커 (JS .active 페이드) */
.roulette-win-list {
	background-color: #000;
	max-width: 844px;
	margin: 0 auto;
}
.roulette-win-list ul {
	height: 70px;
	position: relative;
}
.roulette-win-list ul li {
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}
.roulette-win-list ul li.active {
	opacity: 1;
	z-index: 10;
	transition: opacity 0.3s;
}
.roulette-win-list ul li a {
	color: #fff;
	display: block;
	line-height: 70px;
	padding: 0 25px;
	position: relative;
}
.roulette-win-list ul li a:after {
	display: block;
	content: "";
	clear: both;
}
.roulette-win-list ul li a .regdate {
	font-size: 0.9em;
	font-weight: bold;
	position: absolute;
	left: 25px;
	top: 0;
}
.roulette-win-list ul li a .txt {
	display: block;
	margin-left: 60px;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}