*{
    box-sizing:border-box;
}
body,html{margin:0;padding:0;height:100%;font-family:"Noto Sans KR",system-ui,sans-serif;}
body{display:flex;flex-direction:column;min-height:100vh;background:var(--bg); color:var(--text);}



/* 메인 영역 */
/* .main{flex:1;display:flex;align-items:center;justify-content:center;} */
.main{flex:1;display:flex;justify-content:center;}
/* .card{width:100%;max-width:400px;background:var(--card);padding:40px 32px;border-radius:12px;border:1px solid var(--border);box-shadow:0 6px 20px rgba(0,0,0,.08);animation:fadeIn .5s ease-out both;} */
.myPageCard{width:100%;background:var(--card);padding:40px 32px;border-radius:12px;border:1px solid var(--border);box-shadow:0 6px 20px rgba(0,0,0,.08);animation:fadeIn .5s ease-out both;}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}

header{text-align:center;margin-bottom:24px;}
.logo-text{font-size:25px;font-weight:700;color:var(--accent);}
.sub{font-size:14px;color:var(--muted);margin-top:4px;}

.field{margin-bottom:18px;display:grid;gap:6px;}

input{width:100%;border-radius:8px;border:1px solid var(--border);font-size:0.8em;outline:none;transition:.2s ease;}
input:focus{border-color:var(--accent-light);box-shadow:0 0 0 3px rgba(37,99,235,.2);}

.btn{width:100%;padding:14px 16px;border-radius:8px;border:0;cursor:pointer;font-weight:600;font-size:15px;background:#294063;color:#fff;transition:.2s ease;}
.btn:hover{background:var(--accent-light);}

.birthday{height:40px !important;}

/* 전체컨테이너 */
.myFavContianer {
	display:flex;
	justify-content:center;
}

.pc{
	display: flex;
}

.mobile{
	display: none;
}

.btnColor {
	background-color:red !important;
}


.mbt18 {
	margin-bottom:18px !important;
}

.labelFt {
	font-size: 14px;
}

.inwd100 {
	width:100%;
}

/* ===== 반응형 처리 ===== */
@media (max-width: 480px){
    .card{
        border-radius:10px;
        max-width:none;
    }
    .logo-text{font-size:18px;}
    .sub{font-size:13px;}
    input{padding:12px;}
    .btn{padding:12px;font-size:14px;}
		
		
}

@media (max-width: 360px){
    .navbar{padding:10px 12px;}
    .navbar img{height:40px; /*max-width:110px;*/}
    .card{padding:24px 16px;}
    .logo-text{font-size:16px;}
    .sub{font-size:12px;}
}

/* ------------------------ pc ------------------------ */
/* 네비컨테이너 */
.navContianer{
	min-width: 25% !important;width: 200px;padding:40px 32px;height:300px; margin-right:20px;border-radius: 12px;border: 1px solid var(--border);box-shadow: 0 6px 20px rgba(0, 0, 0, .08);animation: fadeIn .5s ease-out both;
}

/* 페이지 이동  */
.moveNav {
	border: 1px solid var(--border);border-top: none;border-right: none;border-left: none;text-align:center;margin-bottom:20px;font-size:15px;
}

.moveNav label {
  display: block;
  padding-bottom: 12px;
	font-size: 18px !important;
	cursor:pointer;
}

.infoContainer {
		width: 70%;
}

.secesContainer {
	width:70%;
	display:none;
}

select {
	font-size: 1em !important;
	padding: 0 15px !important;
}

.navText {
	text-align: center; 
	margin-bottom: 15px;
}

.secesInfo {
	display:flex; 
	align-items:center; 
	margin-bottom:15px;
	justify-content:space-around;
}

.wd07 {
	width: 10%;
}
	
.wd42 {
	width: 42%;
}

.gap10 {
	gap: 10px;
}

input {
	margin-bottom:10px;
}

select {
	margin-bottom:10px;
}

.wdh48 {
	width:48%;
}

/* ---------------------- 모바일 ---------------------- */
@media only screen and (max-width:1024px){
	.register {
		max-width: 100% !important;
	}
	
	.pc{
		display: none;
	}

	.mobile{
		display: flex;
	}
	
	.myFavContianer {
		display: block !important;
	}
	

	
	/* 네비컨테이너 */
	.navContianer {
		min-width: 100% !important;
		height: 40px !important;
		padding: 0 !important;
		margin-right:0;
		margin-bottom: 10px;
		border : none;
		box-shadow : none !important;
		display: flex;
		justify-content: space-around;
		gap: 10px;
		
	}
	
	.moveNav {
		margin-bottom: 0 !important; 
		width: 100% !important;
		border-top: 1px solid var(--border) !important;
		border-right: 1px solid var(--border) !important;
		border-left: 1px solid var(--border) !important;
		border-radius: 12px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.moveNav label {
		padding-bottom: 2px !important;
		font-size: 12px !important;
	}
	
	.infoContainer {
		width: 100% !important;
	}
	
	.secesContainer {
		width: 100% !important;
	}
	
	.navText {
		display: none;
	}
	

	.secesInfo {
		display: block !important;
	}

	.wd07 {
		width: 100% !important;
	}
		
	.wd42 {
		width: 100% !important;
	}
	
	.gap10 {
		margin-bottom: 12px;
	}

	input {
		font-size: 1em !important;
	}
	
	.wdh48 {
		width:100% !important;
	}
}