@font-face{
	font-family:'Pretendard';
	src:url('/fonts/Pretendard-Regular.woff2') format('woff2');
	font-weight:400;
	font-style:normal;
	font-display:swap;
}

@font-face{
	font-family:'Pretendard';
	src:url('/fonts/Pretendard-Bold.woff2') format('woff2');
	font-weight:700;
	font-style:normal;
	font-display:swap;
}

@font-face{
	font-family:'Pretendard';
	src:url('/fonts/Pretendard-Black.woff2') format('woff2');
	font-weight:900;
	font-style:normal;
	font-display:swap;
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html, body {
	scroll-behavior: smooth;
}

body {
	font-family: 'Pretendard', sans-serif;
}

a {
	text-decoration: none;
	color: inherit;
}

ul {
	list-style: none;
}

img {
	width:100%;
	display:block;
}

/* ================= HEADER ================= */

.header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 70px;
	background: #fff;
	z-index: 1000;
	border-bottom: 1px solid #ddd;
}

.header .inner {
	max-width: 1400px;
	margin: 0 auto;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20px;
}

.logo img{
	height:40px;
	width:auto;
	display:block;
}

.gnb {
	display: none;
}

.gnb ul {
	display: flex;
	gap: 50px;
	font-weight: 600;
	font-size: 18px;
}

.gnb a:hover {
	color: #1e3a8a;
}

.hamburger {
	width: 28px;
	height: 22px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background: none;
	border: none;
	cursor: pointer;
}

.hamburger span {
	display: block;
	height: 3px;
	background: #0b1a4a;
	border-radius: 2px;
}

/* ================= MOBILE MENU ================= */

.mobile-menu {
	position: fixed;
	top: 0;
	right: -100%;
	width: 100%;
	height: 100vh;
	background: #070f3c;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: 0.4s ease;
	z-index: 2000;
}

.mobile-menu.active {
	right: 0;
}

.mobile-menu ul {
	text-align: center;
}

.mobile-menu li {
    margin: 50% 0;
    font-size: 18px;
    font-weight: 600;
}

.mobile-menu a {
	color: #d6d6d6;
}

.mobile-menu a:hover {
	color: #fff;
}

.close-btn {
	position: absolute;
	top: 25px;
	right: 25px;
	background: none;
	border: none;
	color: #fff;
	font-size: 30px;
	cursor: pointer;
}

.gnb a.active,
.mobile-menu a.active{
	color:#b9dbf3;
}

/* ================= RESPONSIVE ================= */

@media (min-width: 1024px) {

	.hamburger {
		display: none;
	}

	.gnb {
		display: block;
	}

	.mobile-menu {
		display: none;
	}
}

/* ================= CONTENTS ================= */

.contents {
	width:100%;
	max-width:860px;
	margin:0 auto;
}

section {
	scroll-margin-top: 70px;
}



.imagemap {
	position:relative;
	width:100%;
	}
	
.kakao_register {
	position: absolute;
    top: 83.7%;
    left: 50%;
    width: 83%;
    transform: translateX(-50%);
    height: 6.5%;
    cursor: pointer;
}


/* =====================================================
   VRUN CERTIFICATE
===================================================== */

/* ===============================
   1. TRIGGER
=============================== */

.vrun_cert{
	position: absolute;
    top: 82.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
    height: 14.5%;
    cursor: pointer;
}

.vrun_cert2 {
	position: absolute;
    top: 82.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 82%;
    height: 14.5%;
    cursor: pointer;
}


/* ===============================
   2. POPUP
=============================== */

#vrun_cert_popup{
	position:fixed;
	inset:0;
	display:none;
	z-index:9999;
}
#vrun_cert_popup.is-open{
	display:block;
}

#vrun_cert_popup .backdrop{
	position:absolute;
	inset:0;
	background:rgba(0,0,0,.7);
}

#vrun_cert_popup .content{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	width:min(92vw,430px);
	max-height:88vh;
	outline:none;

	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}

body.vrun_cert_lock{
	overflow:hidden;
}

/* Close Button */
#vrun_cert_popup .close-btn{
    position: absolute;
    top: 3.5%;
    right: 5%;
    width: 11%;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 28px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
	opacity:0;
}

#vrun_cert_popup .close-btn:hover{
	background:rgba(0,0,0,.8);
}


/* =====================================================
   3. COMMON CARD STRUCTURE (preview + final 공통)
===================================================== */

.result-card,
.final-card{
	position:relative;
	width:100%;
	transform:translateZ(0);
}

.result-card img,
.final-card img{
	display:block;
	width:100%;
	height:auto;
	position:relative;
	z-index:1;
	pointer-events:none; /* 이미지 클릭 방지 */
}

/* 텍스트 오버레이 공통 */
.status-layer{
	position:absolute;
	inset:0;
	z-index:2;
	pointer-events:none;
	font-weight:900;
}

/* 공통 텍스트 필드 */
.field{
	position:absolute;
	left:0;
	width:100%;
	transform:translateY(-50%);
	text-align:center;
}


/* =====================================================
   4. INPUT SCREEN
===================================================== */

#vrun_cert_view{
	position:relative;
	width:100%;
}

input{
	outline:none;
	border:none;
	background:transparent;
	color:#000;
}

/* 입력 위치 */
#run_no{
    position: absolute;
    top: 40.58%;
    left: 32%;
    width: 53.2%;
    height: 6.5%;
}
#name{
	position: absolute;
    top: 48.7%;
    left: 32%;
    width: 53.2%;
    height: 6.5%;
}
#distance{
	position:absolute;
	top:55.7%;
	left:32%;
	width:53.2%;
	height:6.5%;
}
#run_time{
	position: absolute;
    top: 64.55%;
    left: 32%;
    width: 53.2%;
    height: 6.5%;
}
#run_date{
	position:absolute;
	top:72.89%;
	left:32%;
	width:53.2%;
	height:6.5%;
}

/* 등록 버튼 */
#vrun_submit{
    position: absolute;
    top: 82.5%;
    left: 50%;
    transform: translateX(-50%);
    width: 73%;
    height: 10.5%;
    opacity: 0;
    cursor: pointer;
}


/* =====================================================
   5. PREVIEW TEXT POSITION
===================================================== */

.preview-layer .run_no{
	top:24.3%;
	font-size:23px;
	color:#002e73;
}

.preview-layer .name{
	top:31.2%;
	font-size:50px;
}

.preview-layer .run_time{
	top:44.7%;
	font-size:50px;
}

.preview-layer .run_date{
    top: 50.5%;
    font-size: 23px;
    color: #002e73;
}

.final-layer .run_no{
	top: 31.5%;
    font-size: 23px;
    color: #002e73;
}

.final-layer .name{
	top: 40.5%;
    font-size: 50px;
}

.final-layer .run_time{
    top: 57%;
    font-size: 50px;
}

.final-layer .run_date{
	top: 64%;
    font-size: 23px;
    color: #002e73;
}


/* ===============================
   6. PREVIEW NEXT BUTTON
=============================== */

#vrun_next{
	position:absolute;
	top:85.7%;
	left:50%;
	transform:translateX(-50%);
	width:77%;
	height:10%;
	z-index:10;
	opacity:0;
	border:0;
	background:transparent;
	cursor:pointer;
}


.select_charactor {
	position:absolute;
	top:70%;
	left:50%;
	transform:translateX(-50%);
	width:80%;
	height:auto;
	z-index:11;
}

.charactor_01 {
    position: absolute;
    top: 71%;
    left: 11%;
    width: 17%;
    height: 9%;
    z-index: 12;
    cursor: pointer;
}

.charactor_02 {
    position: absolute;
    top: 71%;
    left: 31%;
    width: 17%;
    height: 9%;
    z-index: 12;
    cursor: pointer;
}

.charactor_03 {
    position: absolute;
    top: 71%;
    left: 50.8%;
    width: 17%;
    height: 9%;
    z-index: 12;
    cursor: pointer;
}

.charactor_04 {
	position: absolute;
    top: 71%;
    left: 70.5%;
    width: 17%;
    height: 9%;
    z-index: 12;
    cursor: pointer;
}

.charactor_left {
	position: absolute;
    top: 48%;
    left: 7%;
    width: 26%;
    height: auto;
    z-index: 12;
}

.charactor_right {
	position: absolute;
    top: 48%;
    right: 6%;
    width: 26%;
    height: auto;
    z-index: 12;
}

/* ===============================
   CHARACTER SLIDE ARROW
=============================== */

.char_slide_left,
.char_slide_right{
    position: absolute;
    top: 80.5%;
    width: 5%;
    height: 4%;
    z-index: 13;
    cursor: pointer;
}

.char_slide_left{
	left:11%;
	background:url('../images/char_arrow_left.png') center/contain no-repeat;
}

.char_slide_right{
	right:11%;
	background:url('../images/char_arrow_right.png') center/contain no-repeat;
}


/* ===============================
   CHARACTER SLIDE BAR
=============================== */

.charactor_indicator{
	position:absolute;
	top:82%;
	left:50%;
	transform:translateX(-50%);
	width:55%;
	height:6px;
	display:flex;
	background:#c8d3e6;
	border-radius:10px;
	overflow:hidden;
	z-index:12;
}

.charactor_indicator .bar{
	flex:1;
	background:#c8d3e6;
	transition:all .25s ease;
}

.charactor_indicator .bar.active{
	flex:1.6;
	background:#264a8a;
}
	
/* ===============================
   7. FINAL DOWNLOAD BUTTON
=============================== */

#vrun_download{
    position: absolute;
    top: 83%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    height: 13%;
    z-index: 10;
    opacity: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

/* ===============================
   CHARACTER SLIDE INDICATOR
=============================== */

.charactor_indicator{
	position:absolute;
	top:82%;
	left:50%;
	transform:translateX(-50%);
	width:55%;
	height:6px;
	display:flex;
	border-radius:10px;
	overflow:hidden;
	z-index:12;
	background:#c8d3e6;
}

.charactor_indicator .bar{
	flex:1;
	background:#c8d3e6;
	transition:all .25s ease;
}

.charactor_indicator .bar.active{
	flex:1;
	background:#264a8a;
}

.final_char_left{
	position: absolute;
    top: 61%;
    left: 7%;
    width: 26%;
    z-index: 3;
}

.final_char_right{
	position:absolute;
    top: 61%;
    right: 6%;
    width: 26%;
    z-index: 3;
}

.final_char_left img,
.final_char_right img{
	width:100%;
	height:auto;
}

.final-download-layer{
	display:none;
}


/* =====================================================
   8. MOBILE FONT TUNING
===================================================== */

@media(max-width:500px){

	.field.run_no{ font-size:17px; }
	.field.name{ font-size:37px; }
	.field.run_time{ font-size:37px; }
	.field.run_date{ font-size:17px; }

}








#goTopBtn {
	position:fixed;
	bottom:2%;
	right:3%;
	width:8%;
	max-width:80px;
	height:auto;
	cursor:pointer;
	z-index:20;
	}
	
.bg-yellow {
        background: #000038;
        }


.faq_question {
        margin: 0 auto;
        width: 82%;
        padding: 4% 3% 4% 3%;
        border-radius: 20px;
        background: #FFF;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 2;
        position: relative; /* 추가 */
        margin-bottom:2%;
        }

.faq_answer {
        margin: 0 auto;
        width: 82%;
        margin-top: -10%;
        padding: 12% 3% 4% 3%;
        border-radius: 0px 0px 20px 20px;
        background: #e8f3fb;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        z-index: 1;
        position: relative; /* 추가 */
        }

/* ::after 가상요소로 아이콘 삽입 */
.faq_question::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    display: block;
    width: 5%;
    height: 25%;
    background-image: url('../images/arrow_open.png?ver=2232');
    background-size: contain;
    background-repeat: no-repeat;
    transition: transform 0.3s ease, background-image 0.3s ease;
}

.faq_answer img, .faq_question img {
        max-width:690px;
        }

/* 열림 상태일 때 이미지 변경 */
.faq_question.open::after {
        background-image: url('../images/arrow_close.png?ver=2232');
}

.mt {
        margin-top:3%;
        }

.mv_arrow {
        position: absolute;
        top: 10%;
        left: 50%;
        transform:translateX(-50%);
        width: 100%;
        height: auto;
        animation: move_td 2s infinite;
        }

@keyframes move_td {
        0%, 100% {
                transform: translateX(-50%) translateY(0);
        }
        50% {
                transform: translateX(-50%) translateY(10%);
        }
}



/* ------------------------------------- */
/*   Community */
/* ------------------------------------- */

#community{
	width:100%;
	/* min-height:100vh; */

	background:url(../images/community_bg.png) no-repeat center center;
	background-size:cover;

	padding-bottom:60px;
}

/* 상단 이미지 */

.community_top{
	padding-top:40px;
	width:90%;
	margin:0 auto;
}

.community_top img{
	width:100%;
	display:block;
}

/* 정렬 버튼 */

.community_sort{
	width:78%;
	margin:30px auto 10px auto;

	display:flex;
	justify-content:space-between;
	gap:10px;
}

.community_sort button{
    width: 30%;
    height: 58px;
    border-radius: 30px;
    border: 0;
    background: #c7def0;
    color: #0b2a5c;
    font-size: 33px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    gap: 6px;
    cursor: pointer;
}

.community_sort button img{
	width:18%;
	max-width:28px;
}

.community_sort button.on{
	background:#071c63;
	color:#fff;
}

.write_btn{
	background:#9dc0df;
}

/* 카드 리스트 */

.community_list{
	width:90%;
	margin:20px auto;

	display:grid;
	grid-template-columns:48% 48%;
	justify-content:space-between;
	row-gap:22px;
}

/* 카드 */

.community_card{

	width:100%;
	background:#fff;

	border-radius:18px;

	padding:12px;

	box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* 이미지 영역 */

.thumb{
	width:100%;
	aspect-ratio:1/1;
	overflow:hidden;
	border-radius:14px;
	background:#ddd;
}

.thumb img{
	width:100%;
	height:100%;
	object-fit:cover;
}

/* 제목 */

.card_title{
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 4px;
    margin-top: 10px;
}

/* 이름 */

.card_name{

	font-size:14px;
	color:#7a7a7a;
}

/* 하단 아이콘 */

.community_bottom{
	width:100%;
	height:100px;
	top:0px;
	left:0;

	background:url("../images/community_footer.png") repeat-x center bottom;
	background-size:auto 100%;
}


/* -----------------------------
   COMMUNITY POPUP
----------------------------- */

.community_popup{

	position:fixed;
	left:0;
	top:0;

	width:100%;
	height:100%;

	background:rgba(0,0,0,0.55);

	display:none;

	align-items:center;
	justify-content:center;

	z-index:999;

	overflow-y:auto; /* 추가 */
	padding:40px 0;  /* 위아래 여백 */
}

.community_popup.on{
	display:flex;
}

/* 팝업 본체 */

.popup_inner{
	width: 90%;
    max-width: 540px;
    background: #fff;
    border-radius: 24px;
    padding: 5% 2%;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    max-height: 78vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 닫기 */

.popup_close{

	position:absolute;
	right:14px;
	top:10px;

	border:0;
	background:none;

	font-size:26px;
	cursor:pointer;
}

/* 이미지 */

.popup_image{

	width:100%;
	aspect-ratio:1/1;

	background:#ddd;

	border-radius:18px;

	overflow:hidden;

	margin-bottom:16px;
}

.popup_image img{

	width:100%;
	height:100%;

	object-fit:cover;
}

/* 제목 */

.popup_title{

	font-size:22px;
	font-weight:800;

	margin-bottom:4px;
}

/* 참가자 */

.popup_user{

	font-size:14px;
	color:#888;

	margin-bottom:14px;
}

/* 버튼 영역 */

.popup_actions{

	display:flex;
	gap:10px;
}

.popup_actions button{
    border: 0;
    cursor: pointer;
    height: 42px;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 700;
    font-size: 20px;
}

/* 인스타 버튼 */

.btn_instagram{

	background:#c7def0;
	color:#0b2a5c;

	padding:0 18px;
}

/* 좋아요 */

.btn_like{

	width:42px;
	background:#c7def0;
}

/* 제목 + 버튼 가로 정렬 */

.popup_header{

	display:flex;
	justify-content:space-between;
	align-items:center;

	margin-bottom:20px;
}

/* 텍스트 */

.popup_text{
	flex:1;
}

/* 버튼 영역 */

.popup_actions{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: -30px;
}

/* 인스타 버튼 */

.btn_instagram{

    background: #c7def0;
    color: #0b2a5c;
    padding: 0px 11px;
    height: 44px;
}

.btn_instagram img{
	width:100%;
	max-width:20px;
}
/* 좋아요 */

.btn_like{
	width:80px;
	height:44px;
	background:#c7def0;
}

.btn_like{

	display:flex;
	align-items:center;
	gap:6px;

}

#popupLikeCount{

	font-weight:700;
	font-size:16px;
	color:#000;

}


.btn_like img{
	width:100%;
	max-width:24px;
}

/* 하단 콘텐츠 */

.popup_bottom{
	width: 100%;
    /* background: #ddd; */
    border-radius: 18px;
    border: 1px solid #EAEAEA;
    padding: 5%;
}


/* ------------------------------------- */
/*   글쓰기 */
/* ------------------------------------- */
input,
textarea{
	border:none;
	outline:none;
	resize:none;
}

input:focus,
textarea:focus{
	outline:none;
	box-shadow:none;
}

.input_subject {
    position: absolute;
    top: 16.9%;
    left: 50%;
    width: 85%;
    transform: translateX(-50%);
    height: 4.1%;
    font-size: 24px;
}

.input_sns {
	position: absolute;
    top: 22.85%;
    left: 50%;
    width: 85%;
    transform: translateX(-50%);
    height: 4.1%;
    font-size: 24px;
}

.input_name {
    position: absolute;
    top: 28.75%;
    left: 50%;
    width: 85%;
    transform: translateX(-50%);
    height: 4.1%;
    font-size: 24px;
}

.input_file {
    position: absolute;
    top: 35.5%;
    left: 5%;
    width: 28%;
    height: 5%;
    font-size: 24px;
    cursor: pointer;
    opacity: 0;
}

.input_contents {
	position: absolute;
    top: 48.5%;
    left: 50%;
    width: 87%;
    transform: translateX(-50%);
    height: 20.3%;
    font-size: 24px;
    font-family: 'Pretendard', sans-serif;
}

.input_submit {
	position: absolute;
    top: 1.8%;
    left: 72%;
    width: 22%;
    height: 5.3%;
    opacity: 0;
    cursor: pointer;
}

.my_picture{
	position:absolute;
	top:34%;
	left:36%;
	width:23%;
	height:12.5%;

	overflow:hidden;
	border-radius:10px;
}

.my_picture img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.mobile { display:none; }
.pc {display:block; }


@media(max-width:1080px){
	.mobile { display:block; }
	.pc {display:none; }
	.vrun_cert{
		position:absolute;
		top:87.5%;
		left:50%;
		transform:translateX(-50%);
		width:82%;
		height:9.5%;
		cursor:pointer;
	}
}


@media (max-width: 1024px) {
	.community_sort button {
		height: 39px;
        font-size: 18px;
        gap: 0px;
        width: 32%;
	}
	
	.community_sort button img {
		width: 20%;
		max-width: 28px;
		
	}
	
	.popup_inner {
        width: 90%;
        padding: 12% 3%;
		max-height:82vh;
		margin-top:70px;
	}
	
	.card_title {
		font-size: 13px;
	}
	
	.card_name {
		font-size: 13px;
	}

	.popup_title {
		font-size: 16px;
	}

	.popup_actions {
		gap: 4px;
		margin-top: -35px;
	}
	
	.popup_actions button {
		border: 0;
		cursor: pointer;
		height: 36px;
		border-radius: 30px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		font-weight: 700;
		font-size: 15px;
	}
	.input_subject, .input_sns, .input_contents, .input_name  {
		font-size: 14px;
	}	
	.btn_like img {
		width: 100%;
		max-width: 22px;
	}	
	
	.community_bottom{
		height:70px;
	}
}

.notice_card{

	border:2px solid #ff4d4f;
	background:#fff6f6;

}

.notice_card .card_title{

	font-weight:700;

}