/* =========================================================
	Fonts
========================================================= */
@font-face {
	font-family: 'KiaSignatureBold';
	src: url('../font/KiaSignatureBold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'KiaSignatureLight';
	src: url('../font/KiaSignatureLight.woff2') format('woff2');
	font-weight: 300;
	font-style: normal;
}
@font-face {
	font-family: 'KiaSignatureRegular';
	src: url('../font/KiaSignatureRegular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
}

/* =========================================================
	Reset & Base
========================================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
	background: #000;
	color: #fff;
	font-family: 'KiaSignatureRegular', sans-serif;
	font-size: 20px;
	line-height: 1.4;
}
img { width: 100%; height: auto; display: block; }
video { display: block; width: 100%; height: auto; }
section { position: relative; }
.page { height: 100vh; max-height: 1080px; overflow: hidden; }

.no_style { list-style: none; }
.notice { font-size: 16px; }
.bg_white { background: #FFF; }
.bg_white .contents { color: #000; }
.bg_gray { background: #f2f2f2; }
.bg_gray .contents { color: #000; }

.ver_pc { display: block; }
.ver_mobile { display: none; }
.ver_tablet { display: none; }

.red { color: red; }
.key_color { color: #156082; }
.bbox { display: inline-block; padding: 8px 14px; margin-right: 10px; border-radius: 5px; background: #0a0a0a; color: #fff; font-size: 14px; font-weight: 900; vertical-align: middle; }

/* =========================================================
	Global Header
========================================================= */
header {
	height: 100px;
	width: 100%;
	background: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom:1px solid #EAEAEA;
}
header img { width: 80%; max-width: 500px; }


/* =========================================================
	Info 블록
========================================================= */
#info {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center; /* 버튼 그룹 세로 중앙 */
	margin-left: 6%;
	margin-right: 6%;
	padding: 3% 0;
	color: #fff;
	font-family: 'KiaSignatureRegular', sans-serif;
	font-size: 20px;
	line-height: 1.8;
}
#info .info-text { flex: 1; }
#info .info-buttons {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-left: 20px; /* 텍스트와 버튼 사이 여백 */
}
#info .btn_info {
	border: 1px solid #fff;
	padding: 10px 30px;
	text-align: center;
	cursor: pointer;
	transition: all .3s;
}
#info .btn_info:hover { background: #fff; color: #000; }
#info .ls01 { letter-spacing: 1px; }

/* =========================================================
	Description 섹션
========================================================= */
#description {
	position: relative;
	padding: 6% 6%;
	background: url('../images/bg_nadal2.png?ver=2232342333') no-repeat center top / cover;
	color: #fff;
	overflow: hidden;
	font-family: 'KiaSignatureRegular', sans-serif;
	height: 100vh;
	max-height: 1000px;
}
#description .desc-text {
	position: relative;
	max-width: 720px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 22px;
	line-height: 1.4;
	text-shadow: 1px 1px 4px rgba(0,0,0,.5);
	z-index: 2;
}

#description .desc-text strong {
	font-size:24px;
	}

/* =========================================================
	공통 Content/텍스트 요소
========================================================= */
.contents { text-align: center; font-size: 20px; }
.pill {
	display: inline-block;
	background: #000;
	color: #fff;
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 20px;
	font-weight: 700;
	margin: 6% 0 40px;
}
.main_pill { font-size: 30px; padding: 6% 0 0; font-family: 'KiaSignatureBold', sans-serif;}
.ul_li_text { text-align: left; width: 1024px; margin: 0 auto; }

/* =========================================================
	중간 섹션 공통
========================================================= */
#content_hmid { background: #000; padding-top: 100px; }
#content_hmid .texts { color: #FFF; }
#content_hmid .pill {
	display: inline-block;
	background: #fff;
	color: #000;
	border-radius: 999px;
	padding: 10px 20px;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 40px;
}
#content_hmid .ul_li_text { color: #FFF; padding-bottom: 100px; }

/* =========================================================
	참가자 선정 이벤트 (nadal-challenge)
========================================================= */
.nadal-challenge {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 1280px;
	margin: 3% auto;
	gap: 30px 10px;
}
.nadal-challenge .item { text-align: center; }
.nadal-challenge .item img { width: 100%; height: auto; cursor: pointer; }
.nadal-challenge .item h3 {
	font-size: 18px;
	margin: 5px 0 10px;
	font-family: 'KiaSignatureBold', sans-serif;
}
.nadal-challenge .item p { font-size: 16px; line-height: 1.4; }
.nadal-challenge .item .item-title { font-size:16px; font-family: 'KiaSignatureBold', sans-serif;}
.nadal-challenge .item .item-subtitle { font-size:14px; line-height: 1.4}

/* =========================================================
	Video Popup Layer & 규격
========================================================= */
#videopopup_layer {
	position: fixed; inset: 0;
	background: rgba(0,0,0,.85);
	display: none; /* 열릴 때 flex로 전환 */
	align-items: center;
	justify-content: center;
	z-index: 9999;
}
#videopopup_layer.active { display: flex; }

/* 16:9 모달 프레임 */
.video-modal {
	position: relative;
	width: 90vw; max-width: 1024px;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,.5);
	overflow: hidden;
}

/* 동적 컨테이너(iframe 또는 video가 들어옴) */
#video_container {
	width: 100%;
	height: 100%;
	background: #000;
}

/* 로컬 MP4일 때 */
.video-modal video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	display: block;
}

/* 유튜브 iframe일 때 */
.video-modal iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

/* 닫기 버튼 */
.video-close {
	position: absolute; right: 8px; top: 8px;
	width: 36px; height: 36px; line-height: 36px;
	text-align: center; font-size: 28px; color: #fff;
	background: rgba(0,0,0,.35);
	border-radius: 999px; cursor: pointer; user-select: none; z-index: 10;
}

/* 영상 규격 안내 박스 */
.video-rule {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-top: 20px;
	font-family: 'KiaSignatureRegular', sans-serif;
	text-align: left;
	width: 400px;
	margin-left: 50%;
	transform: translateX(-50%);
	padding-top:3%;
	padding-bottom: 6%;
}
.video-rule .rule-title { font-weight: 700; font-size: 20px; white-space: nowrap; }

/* HTML 구조에 맞게 셀렉터 수정(.rule-body 안의 ul) */
.video-rule .rule-body ul { font-size: 16px; line-height: 1.4; margin: 0; padding: 0; }
.video-rule .rule-body li { margin-bottom: 6px; }

.video-rule .red { color: #c40000; font-weight: 600; }

/* =========================================================
	Ask-Nadal (좌 텍스트 / 우 이미지)
========================================================= */
.ask-nadal {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #EAEAEA;
	padding: 0;
	overflow: hidden;
}
.ask-nadal .wrap {
	width: 100%;
	max-width: 1920px;
	display: grid;
	grid-template-columns: 1.1fr 1.4fr; /* 우측 더 넓게 */
	gap: 0;
	align-items: stretch;
}
.ask-nadal .left {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 60px;
}
.ask-nadal .left .texts {
	color: #000;
	margin-bottom: 34px;
	font-size: 18px;
	line-height: 1.4;
	max-width: 600px;
	word-break: keep-all;
}
.ask-nadal .left .texts strong {
	display: inline-block;
	font-size: 20px;
	line-height: 1.4;
	margin-bottom: 10px;
	font-weight: 900;
}
.ask-nadal .left .texts .bbox {
	display: inline-block;
	padding: 8px 14px;
	margin-right: 10px;
	border-radius: 5px;
	background: #0a0a0a;
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	vertical-align: middle;
}
.ask-nadal .right { position: relative; }
.ask-nadal .right .imgbox {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
}
.ask-nadal .right .imgbox img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: center;
}

/* =========================================================
	Buttons / Notice
========================================================= */
.actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 8px 20px 6% 20px;
}
.btn-outline {
	display: block;
	text-align: center;
	padding: 14px 18px;
	border: 2px solid #0a0a0a;
	border-radius: 999px;
	font-size: 18px;
	font-weight: 800;
	text-decoration: none;
	color: #0a0a0a;
	width: 300px;
	margin: 0 auto;
}
.notice-box {
	background: #fff;
	color: #000;
	border-radius: 12px;
	padding: 24px 28px;
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	text-align: left;
}
.notice-box p { font-size: 18px; font-weight: 700; margin-bottom: 12px; }
.notice-box ul { list-style: disc; padding-left: 20px; font-size: 15px; line-height: 1.4; }
.notice-box ul li { margin-bottom: 8px; }


/* =========================================================
	Form UI
========================================================= */
form { margin-top: 6px; }
.group { margin: 16px 0; }
label { display: block; margin: 0 0 8px; font-size: 14px; font-weight: 700; }

input[type="text"],
input[type="tel"],
input[type="email"] {
	width: 100%;
	height: 40px;
	border: 1px solid #cfd6db;
	border-radius: 4px;
	padding: 0 12px;
	font-size: 14px;
	background: #f9fbfc;
	outline: none;
}
input::placeholder { color: #9aa5ad; }

.phone-wrap { position: relative; }
.verify-btn {
	position: absolute; right: 3px; top: 3px;
	height: 34px; min-width: 94px; padding: 0 12px;
	background: #000; color: #fff; border-radius: 2px;
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700; cursor: pointer; user-select: none;
}

.submit-wrap { padding-top: 6px; display: flex; justify-content: center; }
.submit-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 44px; padding: 0 28px; border-radius: 999px;
	background: #000; color: #fff; font-size: 16px; font-weight: 800;
	text-decoration: none; cursor: pointer; user-select: none;
}

textarea {
	width: 100%;
	min-height: 80px;
	border: 1px solid #cfd6db;
	border-radius: 4px;
	padding: 10px;
	font-size: 12px;
	line-height: 1.4;
	margin-bottom: 16px;
	resize: vertical;
	background: #f9fbfc;
	font-family: 'KiaSignatureLight', sans-serif;
}
textarea::placeholder { color: #9aa5ad; }

.upload-wrap { margin: 18px 0; text-align: center; }
.upload-label {
	display: inline-flex; flex-direction: column; align-items: center;
	justify-content: center; cursor: pointer;
	color: #000; font-weight: 600; font-size: 15px; text-decoration: none;
}
.upload-label img { width: 50px; height: 50px; margin-bottom: 6px; }
.upload-label input { display: none; }

.btn {
	display: block; width: 80%; max-width: 280px;
	margin: 12px auto 0; text-align: center;
	background: #000; color: #fff; font-size: 16px; font-weight: 800;
	padding: 14px 0; text-decoration: none; cursor: pointer;
}

/* =========================================================
	mypage
========================================================= */
toolbar{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:14px;
}
.pill-outline{
	display:inline-block;
	padding:6px 12px;
	border:2px solid #0a0a0a;
	border-radius:999px;
	font-size:13px;
	font-weight:800;
}
.alert{
	margin:8px 0;
	padding:10px 12px;
	border-radius:10px;
	font-size:13px;
	line-height:1.4;
}
.alert.ok{ background:#f0fff5; color:#0a8a2a; }
.alert.err{ background:#fff5f5; color:#b30; }

.summary{
	display:grid;
	grid-template-columns: repeat(4, minmax(0,1fr));
	gap:8px;
	margin:12px 0 16px 0;
}
.summary-item{
	background:#f7f7f7;
	border:1px solid #eee;
	border-radius:10px;
	padding:10px 12px;
	display:flex; align-items:center; gap:8px;
}
.summary-item .label{ font-size:12px; color:#666; }
.summary-item .value{ font-size:14px; font-weight:800; }

.table-ui{
	width:100%;
	overflow:auto;
	border:1px solid #eee;
	border-radius:12px;
}
.table-ui table{
	width:100%;
	border-collapse:collapse;
	min-width:920px;
}
.table-ui thead th{
	position:sticky; top:0;
	background:#fafafa;
	border-bottom:1px solid #eee;
	padding:12px 10px;
	font-size:13px;
	text-align:left;
}
.table-ui tbody td{
	padding:12px 10px;
	border-bottom:1px solid #f0f0f0;
	vertical-align:top;
	font-size:14px;
	color:#000;
}
.table-ui tbody tr:nth-child(even){ background:#fcfcfc; }

.vtable {
	width:100%;
	border-collapse:collapse;
	margin-bottom:20px;
	border:1px solid #eee;
	border-radius:12px;
	overflow:hidden;
}
.vtable th {
	width:120px;
	background:#fafafa;
	text-align:left;
	padding:10px;
	border-bottom:1px solid #eee;
	font-size:13px;
	color:#555;
	vertical-align:top;
}
.vtable td {
	padding:10px;
	border-bottom:1px solid #f0f0f0;
	font-size:14px;
}
.vtable tr:last-child th,
.vtable tr:last-child td {
	border-bottom:none;
}

.summary-vtable table {
	width:100%;
	border-collapse:collapse;
	border:1px solid #eee;
	border-radius:12px;
	overflow:hidden;
	margin:12px 0 16px 0;
}
.summary-vtable th {
	width:120px;
	background:#fafafa;
	text-align:left;
	padding:10px;
	font-size:13px;
	color:#555;
	border-bottom:1px solid #eee;
	white-space:nowrap;
}
.summary-vtable td {
	padding:10px;
	font-size:14px;
	font-weight:700;
	border-bottom:1px solid #f0f0f0;
	color:#000;
}
.summary-vtable tr:last-child th,
.summary-vtable tr:last-child td {
	border-bottom:none;
}

/* =========================================================
	Common Modal
========================================================= */
.modal {
	display: none;
	position: fixed;
	left: 0; top: 0; right: 0; bottom: 0;
	background: rgba(0,0,0,.6);
	z-index: 999;
	align-items: center; /* flex는 .show에서 */
	justify-content: center;
}
.modal.show { display: flex; }
.modal-content {
	background: #fff;
	width: 80%; max-width: 320px;
	padding: 20px; border-radius: 12px; text-align: center;
}
.modal-content p { margin: 10px 0; font-size: 14px; line-height: 1.4; }
.modal-content .btn-close {
	margin-top: 20px;
	background: #000; color: #fff; font-size: 16px; font-weight: 700;
	padding: 12px 0; border-radius: 999px; width: 100%;
	cursor: pointer; text-decoration: none; display: inline-block;
}

/* ===== section01.php 전용 스코프: 약관 페이지 ===== */
.page-terms01{
	max-width:1200px;
	margin:50px auto 0; /* 모바일 hero 고정 높이 보정 */
	background:#fff;
	position:relative;
	color:#000;
	padding-bottom:88px;
}
.page-terms01 .card{
	margin:0 auto; background:#fff; border-radius:18px 18px 0 0; padding:24px 20px; text-align:left;
}
.page-terms01 .card h3{font-size:20px; font-weight:800; margin:0 0 14px 0;}
.page-terms01 .card h2{font-size:20px; font-weight:800; margin:0 0 14px 0;}
.page-terms01 .card p{font-size:15px; line-height:1.4; margin:0 0 16px 0;}
.page-terms01 .box{border:1px solid #000; padding:16px 14px; font-size:14px; line-height:1.4;}
.page-terms01 .box p{margin:0 0 10px 0; font-size:14px; line-height:1.4;}
.page-terms01 .box ul{margin:0; padding-left:18px;}
.page-terms01 .box ul li{margin:4px 0; font-size:14px; line-height:1.4;}
.page-terms01 .checks{margin-top:14px; font-size:14px; line-height:1.4;}
.page-terms01 .checks label{display:block; margin:6px 0;}
.page-terms01 .checks input{margin-right:6px;}
.page-terms01 .btn-agree{
	display:block; margin:28px auto 0; padding:14px 20px; background:#000; color:#fff;
	text-align:center; font-size:18px; font-weight:800; border-radius:999px; width:80%; text-decoration:none;
}
.page-terms01 .nav-btns{
	position:absolute; left:0; right:0; bottom:16px;
	display:flex; justify-content:flex-start; padding:0 16px;
}
.page-terms01 .nav-btns a{font-size:16px; font-weight:700; color:#000; text-decoration:none;}

/* 폼 */
form{margin-top:6px}
.group{margin:16px 0}
label{display:block;margin:0 0 8px 0;font-size:14px;font-weight:700}
input[type="text"],
input[type="tel"],
input[type="email"]{
	width:100%;
	height:40px;
	border:1px solid #cfd6db;
	border-radius:4px;
	padding:0 12px;
	font-size:14px;
	background:#f9fbfc;
	outline:none;
}
input::placeholder{color:#9aa5ad}

/* 휴대전화 + 인증 버튼 */
.phone-wrap{position:relative}
.verify-btn{
	position:absolute;right:3px;top:3px;
	height:34px;min-width:94px;padding:0 12px;
	background:#000;color:#fff;border-radius:2px;
	display:flex;align-items:center;justify-content:center;
	font-size:13px;font-weight:700;cursor:pointer;user-select:none;
}

/* 확인 버튼 */
.submit-wrap{padding-top:6px;display:flex;justify-content:center}
.submit-btn{
	display:inline-flex;align-items:center;justify-content:center;
	height:44px;padding:0 28px;border-radius:999px;
	background:#000;color:#fff;font-size:16px;font-weight:800;
	text-decoration:none;cursor:pointer;user-select:none;
}

textarea{
	width:100%;
	min-height:80px;
	border:1px solid #cfd6db;
	border-radius:4px;
	padding:10px;
	font-size:12px;
	line-height:1.4;
	margin-bottom:16px;
	resize:vertical;
	background:#f9fbfc;
	font-family: 'KiaSignatureLight', sans-serif;
}
textarea::placeholder{color:#9aa5ad;}

/* 업로드 영역 */
.upload-wrap{margin:18px 0;text-align:center}
.upload-label{
	display:inline-flex;flex-direction:column;align-items:center;
	justify-content:center;cursor:pointer;
	color:#000;font-weight:600;font-size:15px;text-decoration:none;
}
.upload-label img{width:50px;height:50px;margin-bottom:6px}
.upload-label input{display:none}

/* 버튼 */
.btn{
	display:block;
	width:80%;
	max-width:280px;
	margin:12px auto 0;
	text-align:center;
	background:#000;
	color:#fff;
	font-size:16px;
	font-weight:800;
	padding:14px 0;
	text-decoration:none;
	cursor:pointer;
}

/* =========================================================
	Responsive (반응형은 반응형끼리 묶음)
========================================================= */

/* <= 1200 (랩탑/태블릿) */
@media (max-width: 1760px) {
	#description .desc-text { font-size: 20px; }
}

/* <= 992 (태블릿 세로) */
@media (max-width: 992px) {
	#info { font-size:16px; }
	#description { padding: 8% 0 10%; }
	#description .desc-text { max-width: 88%; font-size: 19px; }
	
	.right .ver_pc { display: none; }
	.right .ver_tablet { display: block; }
	
	.main_pill {font-size:24px;}
	.bg_white .contents p { font-size:16px; }
	
	.bg_white .contents .texts { font-size:16px; }
	.bg_white .contents .texts strong { font-size:16px; }
	
	.video-rule {font-size:16px; margin-left: 62%;}

	.ul_li_text {
		width: 800px;
	}
	.notice-box {
		width: 95%;
		margin:0 auto;
		max-width: 800px;
	}
	.ask-nadal .left .texts {
		margin-top:35px;
		font-size: 16px;
		line-height: 1.4;
		max-width: 80%;
	}
}

/* <= 768 (태블릿/모바일 진입) */
@media (max-width: 768px) {
	/* 헤더 */
	header img { width: 65%; max-width: 500px; }
	/* PC/Mobile 토글 */
	.ver_mobile { display: block; }
	.ver_pc { display: none; }
	.right .ver_tablet { display: none; }

	/* Info */
	#info { flex-direction: column; align-items: flex-start; font-size: 13.8px; line-height: 1.4; padding:50px 0px;}
	#info .info-buttons {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-left: 0;
		margin-top: 15px;
		width: 100%;
	}
	#info .btn_info { flex: 1; }

	/* Description */
	#description { padding: 50px 0px; background: url('../images/bg_nadal2.png?ver=22323341234') no-repeat 40% top / cover; height:45vh; }
	#description .desc-text { max-width: 88%; font-size: 14px; margin-left:5%; line-height: 1.4;}
	#description .desc-text strong { font-size:16px; }
	
	.bg_white .contents { width:90%; margin:0 auto; padding-top:50px; }
    .bg_white .contents .texts { font-size: 14px; }
	
	.bg_gray .contents .pill {margin:50px 0 40px;}
	/* Text sizes */
	.pill { font-size: 18px; }
	.main_pill { font-size: 22px; width: 80%; margin:0 auto; padding:0px;}
	.contents { font-size: 12px; line-height:1.4; }
	.contents strong {line-height:1.4; }
	.ul_li_text { width: 95%; }
	
	.bbox { font-size:12px; }

	/* Grid, Modal */
	.nadal-challenge {
		grid-template-columns: repeat(1, minmax(0, 1fr));
		gap: 20px 10px;
	}
	
	
	/* 혹시 아이템이 열 전체를 먹는 스타일을 예방 */
	.nadal-challenge .item { grid-column: auto; }
	.nadal-challenge .item h3 { font-size: 18px; }
	.nadal-challenge .item p { font-size: 14px; }
	.nadal-challenge .item .item-title { font-size:14px; font-family: 'KiaSignatureBold', sans-serif; margin:5px auto;line-height:1.2;}
	.nadal-challenge .item .item-subtitle { font-size:10px; line-height: 1.4}
	
	.video-rule {transform: translateX(-32%); margin-top:0px; padding-top:0px; padding-bottom:50px; width:320px; margin-left:31%;}
	.video-rule .rule-title {font-size:14px;}
	.video-rule .rule-body li {font-size:12px; margin-bottom:0px;}
	.video-modal { width: 96vw; border-radius: 10px; }
	.video-close { right: 6px; top: 6px; width: 32px; height: 32px; line-height: 32px; }

	/* Ask-Nadal → 1열, 이미지 숨김 */
	.ask-nadal { height: auto; max-height: none; padding: 15px 3%; }
	.ask-nadal .wrap { display: block; }
	.ask-nadal .left { padding-left:2% }
	.ask-nadal .left .texts { font-size: 14px; }
	.ask-nadal .left .texts strong { font-size:16px; }
	.ask-nadal .left .texts .bbox { font-size:12px; }
	.ask-nadal .left .notice { font-size: 12px; }

	/* 기타 */
	#um .texts { margin-bottom: 6%; }
	
	.notice-box {padding:5%;}
	.notice-box ul {font-size:12px;}
}

/* <= 760 (세밀 모바일) */
@media (max-width: 760px) {
	/* 필요 시 768 이하와 분기되는 세밀 조정만 여기에 둠 */
}