body {

	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	margin-bottom: 0;
	padding: 0 auto;
	margin: 0 auto;
	background-size: cover;
	background-color: #000;
	max-width: 800px;
	width: 100%;
	height: 100%;
	font-size:10px;
}

.swiper-container {
	width: 100%;
	margin: 0;
	/*position:absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%); */
	max-width: 800px;
}

.swiper-slide {
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;

}

.imagemap {
	position: relative;
	width: 100%;
}

img {
	display: block;
	width: 100%;
	image-rendering: -webkit-optimize-contrast;
	transform: translateZ(0);
	backface-visibility: hidden;
}

video {
	display: block;
	width: 100%;
	border: 0;
}


.link01 {    
    position: absolute;
    top: 75.52%;
    left: 18%;
    width: 13%;
    height: 10.1%;
	}

.link02 {    
	position: absolute;
    top: 75.52%;
    left: 35%;
    width: 13%;
    height: 10.1%;
	}

.link03 {    
	position: absolute;
    top: 75.52%;
    left: 52%;
    width: 13%;
    height: 10.1%;
	}

.link04 {    
	position: absolute;
    top: 75.52%;
    left: 69%;
    width: 13%;
    height: 10.1%;
	}

.kakaomap {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: 30%;
    margin: 0 auto;
}


button {
	padding: 10px 20px 10px 20px;
	text-align: center;
	margin: 0 auto;
	background: #000;
	color: #fff;
	border: none;
	border-right: 0px;
	border-top: 0px;
	border-left: 0px;
	border-bottom: 0px;
}

h3 {
	font-size:16px;
	}

#musicb {
	position: fixed;
	text-align: center;
	padding: 2px 2px 2px 2px;
	top: 5px;
	left: 5px;
	z-index: 10000;
	font-size: 10px;
	background: skyblue;
}

.popup-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 20;
	opacity: 1;
	transition: opacity 2s ease-in-out;
}

.popup-content {
	max-width: 90%;
	max-height: 90%;
}

.popup-content img {
	display: block;
	width: 100%;
	max-height: 100%;
	margin: 0 auto;
	max-width: 800px;
}

/* ===== Location ===== */
#location{background:#0f1011;color:#fff;padding:clamp(36px,7vw,90px) 0;}
.loc-wrap{position:absolute; top:57%; left:50%; transform:translateX(-50%); width:92%; height:30%;}
.loc-title{
	text-align:center;font-weight:800;font-size:clamp(24px,4.5vw,48px);
	background:linear-gradient(120deg,#74b8c4,#dbd0de,#e9ba2f);
	-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;
	margin:0 0 clamp(24px,5vw,60px);
}
.loc-place strong{display:block;font-size:clamp(18px,3.2vw,26px);font-weight:800}
.loc-addr{opacity:.9;font-size:clamp(13px,2.6vw,15px)}
.loc-actions{display:flex;gap:8px;flex-wrap:wrap}
.loc-btn{
	padding:5px 10px;border-radius:5px;border:0;cursor:pointer;
	background:#e9ba2f;color:#222;font-weight:700
}
.loc-btn.ghost{background:#222;color:#fff}
.loc-btn:active{transform:translateY(1px)}

.loc-map{width:100%;height:360px;border-radius:16px;overflow:hidden;background:#111;box-shadow:0 10px 30px rgba(0,0,0,.25);}

.loc-nav{margin-top:22px}
.loc-nav h3{font-size:18px;margin:0 0 10px;font-weight:800}
.nav-buttons{display:flex;gap:8px;flex-wrap:wrap}
.nav-btn{
	display:inline-flex;align-items:center;justify-content:center;
	padding:10px 14px;border-radius:12px;background:#233158;color:#fff;text-decoration:none;font-weight:700
}
.nav-btn:hover{background:#2b3a6a}

.loc-tabs{
	gap:8px;
	margin:26px 0 10px;
	justify-content:flex-start;	/* ← 왼쪽 정렬 */
}

.loc-tabs .tab{
	padding:10px 14px;border-radius:5px;border:1px solid #2a2a2a;background:#15171c;color:#ddd;cursor:pointer;margin-right: 5px;
}
.loc-tabs .tab.on{background:#e9ba2f;color:#222;border-color:#e9ba2f}
.loc-panels .panel{background:#13151b;border:1px solid #222;border-radius:14px;padding:16px}
.loc-panels .panel:not(.on){display:none}
.loc-panels .bullet{list-style:none;padding:0;margin:0}
.loc-panels .bullet li{
	margin: 6px 0;
    padding-left: 15%;
    text-indent: -17%;
    line-height: 1.6;
}
.loc-panels .bullet li span{opacity:.9}

.loc-head {
	position: absolute;
    top: 20%;
    right: 4%;
    width: auto;
    height: auto;
	}


.countdown-content {
	position: absolute;
	z-index: 1;
	top:50%;
	width: 100%;
	height:20%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: #fff;
}

/* 기존 이미지/그리드는 이전 스타일 그대로 */
.cd-image{ width:60%; max-width:400px; height:auto; margin-bottom:24px; }
.cd-grid{ display:grid; grid-template-columns: repeat(4, minmax(90px,120px)); gap: clamp(10px,2vw,18px); margin-bottom:16px; }
.cd-item{ background:#fff; color:#7a584b; border-radius:18px; padding: clamp(12px,2.5vw,18px) clamp(10px,2vw,16px); box-shadow:0 6px 20px rgba(0,0,0,.08); min-width:90px; }
.cd-num{ font-weight:700; line-height:1; font-size: clamp(22px,5vw,36px); margin-bottom:6px; }
.cd-label{ font-size: clamp(10px,2.3vw,13px); opacity:.9; }
.cd-sub{ font-size: clamp(12px,2.5vw,14px); opacity:.9; }

	.swiper-button-next,
	.swiper-button-prev{
		transition:opacity .6s ease;
	}

	.swiper-button-hide{
		opacity:0;
		pointer-events:none;
	}

@media (max-width:560px){
	.loc-map{height:300px}
	#footer img {
		max-width: 200px;
		width: 30%;
		margin: 20px auto;
	}
	
	.video-title {
		padding-top:0px;
	}
}


@media (max-width:560px){ 
	.cd-grid{ grid-template-columns:repeat(2, minmax(100px,1fr)); } 
	#introduction{ height:300px;}
	#countdown{height: 360px;}
}
@media (max-width: 480px){
	.thumb{ width: 25vw; border-radius:5px; }      /* 약 2x38vw + 여백 → 2열 안정 */
	.thumb-lg{ width: 30vw; border-radius:5px; }   /* YB만 살짝 큼 */
	.artist-grid{ column-gap: 12px; row-gap: 16px; }
	.artist-card{ gap: 10px; }
	.artist-card .name{ font-size: clamp(13px, 3.6vw, 16px); }
}
@media (max-width:360px){ .cd-grid{ grid-template-columns:1fr 1fr; gap:10px; } .cd-item{ border-radius:14px; } }