/* 공통 */
#hero > .container, #main > .container {
	padding: 0 1.5rem;
}

.page-title {
    font-weight: 800;
    padding-bottom: 0.5rem;
}

.page-sub{
	font-size: clamp(0.85rem, 1.5vw, 20px);
	color: #595959;
}

.title-box{
	margin-bottom:3rem;
}


.text-main{
	color: #32AAFF;
}

.text-danger {
    color: #FF3C38 !important;
}

.font-sm{
	font-size: clamp(12px, 1.25vw, 16px);
}

.font-md{
	font-size: clamp(1rem, 1.75vw, 20px) !important;
}

.color-gray0 {
	color:#595959 ;
}

.color-gray2 {
	color:#C0C0C0 ;
}

.bg-primary {
    background-color: #32AAFF !important;
}

.border-primary {
	border-color: #32AAFF !important;
}


/* 체크박스 커스텀 */
.checkbox-label {
	display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.4rem;
}

.checkbox-label input[type="checkbox"] {
  display: none; /* 실제 체크박스 숨김 */
}

.checkbox-label .custom-checkbox {
  width: 15px;
  height: 15px;
  border: 1px solid #C0C0C0;
  display: inline-block;
  vertical-align: middle;
  background-color: white; /* 기본 배경색 */
  position: relative;
  border-radius: 4px;
  transition: background-color 0.2s;
}

/* 체크 시 배경색만 변경 */
.checkbox-label input[type="checkbox"]:checked + .custom-checkbox {
  background-color: #32AAFF; /* 원하는 체크박스 배경색 */
}

/* 체크 표시 ✔ */
.checkbox-label input[type="checkbox"]:checked + .custom-checkbox::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 6px;
  height: 12px;
  border: solid white;  /* 체크 표시 흰색 */
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  border-radius: 1.5px;
}

/* 비활성 체크박스 */
.checkbox-label input[type="checkbox"]:disabled + .custom-checkbox {
  background-color: #c0c0c; /* 회색 배경 */
  border-color: #aaa;     /* 테두리 색도 연하게 */
  cursor: not-allowed;
}

/*버튼*/
.btn-full{
	color: white;
	background-color: #32AAFF;
	padding: 0.57rem 1.5rem;
    border-radius: 10px !important;
	font-weight: 600;
/*	display: flex;*/
    align-items: center;
    justify-content: center;
	transition: all .5s ease;
}

.btn-out{
	color: #32AAFF;
	background-color: white;
	padding: 0.57rem 1.5rem;
	border: 1px solid #32AAFF;
    border-radius: 10px !important;
	font-weight: 600;
/*	display: flex;*/
    align-items: center;
    justify-content: center;
	transition: all .5s ease;
}

.btn-full.btn-round, .btn-out.btn-round{
    border-radius: 50px !important;
	padding: 0.7rem 1.5rem;
}

.btn-full.btn-gray {
	background-color: #C0C0C0;
}

.btn-full.btn-danger {
	background-color: #FF3C38;
}

.btn-out.btn-gray {
	color: #878787;
	border-color: #C0C0C0;
	background-color: white;
}

.btn-full:hover {
	color: white;
	background-color: #0F89E0;
}

.btn-out:hover {
	color: white;
	background-color: #32AAFF;
}


.btn-full.btn-gray:hover {
	color: white;
	background-color: #878787;
}

.btn-full.btn-danger:hover {
	color: white;
	background-color: #E02825;
}

.btn-out.btn-gray :hover {
	color: white;
	background-color: #FF3C38;
}


.btn-gray:hover {
	background-color: #C0C0C0;
}


.cat-btn{
	display: block;
    border-radius: 50px !important;
    border: 1px solid #32AAFF;
    background: #fff;
    color: #0F89E0;
    padding: .35rem 1rem;
	transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.cat-btn:hover {background: #EAF6FF;}

.cat-btn.active {
    background: #32AAFF;
    color: #fff;
    font-weight: 600;
    box-shadow: 0 0px 10px rgba(50, 170, 255, 0.4);
}


/*로그인*/
#loginform {
	margin-top:2rem;
}

@media (min-width: 1400px) {
	#loginform {
		width: 420px !important;
	}

	.join_con {
		width: 730px !important;
	}
}


.login-bottom{
	display:flex;
	justify-content: space-between;
/*    align-items: center;*/
}

.login-bottom .input-group > label {
	font-weight: 400;
}


/*로그인 아이콘*/
.input-icon{
    position: absolute;
	transition: all .5s ease;
	color: #C0C0C0;
	font-size: 1.1rem;
	height: 3rem;
	width:48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.input-group:focus-within .input-icon{
  color: #32AAFF;
}

/*이용 약관*/

.terms-link {
  color: #C0C0C0;
  text-decoration: underline;
  cursor: pointer;
  font-weight: 300;
}

/*main*/
.menu-container {
	display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(0.5rem, 2vw, 2rem);
	margin: clamp(2rem, 4vw, 3rem) auto;
}

.menu-div {
	background-color: #F2F9FF;
	border-radius: clamp(10px, 1.5vw, 20px);
	width:100%;
	min-width: 0;
	min-height: clamp(65px, 12vw, 180px);
	padding: clamp(10px, 1.75vw, 25px) clamp(12px, 1.8vw, 30px);
	display: flex;
    flex-direction: column;
    justify-content: space-between;
	transition: all 0.25s ease;
	overflow: visible;
	cursor: pointer;
}

/*.menu-div:hover {*/
/*    transform: translateY(-5px) scale(1.02);*/
/*    box-shadow: 0 0px 15px rgba(0,0,0,0.1);*/
/*}*/

.menu-div p {
	font-size : clamp(0.6rem, 1.5vw, 1.4rem);
	font-weight: 800;
	margin-bottom:0;
}

.menu-dec {
	display:flex;
	justify-content: space-between;
	align-items: center;
}

.menu-dec > i {
	font-size: clamp(11px, 1.75vw, 26px);
}

.menu-dec .dec-arrow {
	background-color: rgba(129, 202, 255, 0.3);
	border-radius: 50px;
	width: clamp(13px, 2.2vw, 28px);
    height: clamp(13px, 2.2vw, 28px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dec-arrow {
	color: #32AAFF;
	font-size:clamp(6px, 1.1vw, 14px);
}

.main-container {
	display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(0.6rem, 1.75vw, 2rem);
	margin: clamp(4rem, 6.5vw, 5rem) auto;
}

.main-contents {
	display: flex;
    flex-direction: column;
}

.main-title {
	display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-title h4 {
	font-weight:800;
	font-size: clamp(1.15rem, 2vw, 1.85rem);
}

.main-title p {
	font-size:clamp(10px, 1.3vw, 14px);
	color: #32AAFF;
	cursor: pointer;
}

.main-title p > i {
	font-size:clamp(6px, 1vw, 10px);
}

.more-btn {
	display: flex;
	width: 100%;
    justify-content: space-between;
	position: absolute;
    z-index: 100;
	float: left;
    top: calc(50% - 7px);
}

.btn-prev, .btn-next {
	background-color: white;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	border-radius: 50px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
	cursor: pointer;
}

.Regular-container-wrapper {
    overflow: hidden;
    position: relative;
	width: calc(100% - 2rem);
    height: 100%;
    margin: 0 auto;
}

.Regular-container {
    display: flex;               /* 슬라이드용 flex */
    gap: clamp(0.5rem, 2vw, 2rem);
    transition: transform 0.4s ease;
	margin-top: 1.75rem;
	height : calc(100% - 1.75rem);
}

.Regular-div {
    min-width: calc((100% - clamp(0.6rem, 2vw, 2rem)) / 2);
    min-height: 140px;
    background: #EEEEEE;
    flex-shrink: 0;              /* flex shrink 방지 */
	border-radius: clamp(10px, 1.5vw, 20px);
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	cursor:pointer; 
	transition: transform 0.3s ease;
}

.Regular-div:hover {
    transform: scale(1.03);
    transform-origin: center;
}

.notice-container {
	margin-top: 1.75rem;
}


.re-box {
	background-color: rgba(255, 60, 56, 0.05);
	border-radius: clamp(10px, 1.5vw, 20px);
	width:100%;
	margin-top: clamp(2rem, 4vw, 3rem);
	padding: clamp(14px, 1.8vw, 25px) clamp(16px, 2vw, 30px);
	cursor: pointer;
}

.re-title h4 {
	font-weight:800;
	font-size: clamp(1rem, 1.85vw, 1.5rem);
	margin-bottom: 0.25rem;
}

.re-title p {
	color: #595959;
	font-size: clamp(0.8rem, 1.5vw, 1rem);
}

/*마이페이지*/
#myPage .menu-container {
    grid-template-columns: repeat(3, 1fr);
	margin: clamp(1.5rem, 3.5vw, 2.5rem) auto;
}

#myPage .menu-dec {
	justify-content: flex-end;
}

#myPage .menu-div {
	    min-height: clamp(65px, 10vw, 130px);
}

#myPage .menu-div p {
	font-size: clamp(13px, 1.75vw, 1.4rem);
}

#sList {
	display : flex;
	border-bottom: 1px solid #EEEEEE;
	margin: clamp(1.5rem, 3.5vw, 2.5rem) auto 1rem;
	gap: clamp(0.5rem, 2vw, 2rem);
}

#sList .s-category {
	font-size: clamp(14px, 1.8vw, 1.4rem);
	color: #878787;
	padding:.5rem;
	cursor: pointer;
	transition: all 0.3s ease;
}

#sList .s-category.active {
	color: #32AAFF;
	font-weight: 800;
	border-bottom: 1.5px solid #32AAFF;
}

.date-box {
	background: #F2F9FF;
    padding: clamp(0.5rem, 1.5vw, 1rem) clamp(0.75rem, 1.5vw, 1.5rem);
    border-radius: clamp(10px, 1.5vw, 20px);
} 

.date-box input[type="date"] {
    border-radius: 10px;
    border: 1px solid #C0C0C0;
    padding: 3px 5px;
    font-size: .85rem;
} 

#myPList {
	display: flex;
    flex-direction: column;
    gap: .5rem;
}


.myPList-item {
	border: 1px solid #81CAFF;
    border-radius: clamp(10px, 1.5vw, 20px);
    padding: clamp(.75rem, 1.75vw, 1rem) clamp(1rem, 2.5vw, 2rem);
}

.myPList-item-none {
	border: 1px dashed #C0C0C0;
    border-radius: clamp(10px, 1.5vw, 20px);
	font-size: clamp(13px, 1.5vw, 1.15rem);
    padding: clamp(1rem, 2.5vw, 2rem);
	font-weight: 800;
	color:#878787;
	height: clamp(85px, 9.5vw, 100px);
	display: flex !important;
    align-items: center;
    justify-content: center;
}

.myPList-title {
    font-size: clamp(13px, 1.5vw, 1.15rem);
	font-weight: 800;
}

.badges {
	padding: .1rem .75rem;
	border-radius: 50px;
	display: inline-block;
	font-weight: 700;
	margin-bottom: .25rem;
}

.comp-badge {
	background-color: #EFFEF5;
	color: #10A957;
}

.out-badge {
	background-color: #FFF0F0;
	color: #FF5E5E;
}

.over-badge {
	background-color: #FFF7ED;
	color: #FE9239;
}

.else-badge {
	background-color: #EEEEEE;
	color: #595959;
}

#dateBtn {
	padding-top: .15rem !important;
    padding-bottom: .15rem !important;
}


/*정기조사*/
/* 1. 최상위 부모: 높이를 확실히 잡고 3D 효과의 깊이(perspective)를 여기서 설정합니다 */
.slide-wrapper {
    position: relative;
    width: 100%;
    height: 50vh; /* 혹은 500px처럼 고정값 */
    overflow: hidden;
    user-select: none;
}

/* 2. 컨테이너: 부모의 전체 크기를 다 쓰도록 설정 */
.slide-container {
    position: relative;
    width: 100%;
    height: 100%; 
}

/* 3. 개별 슬라이드: 정중앙 배치의 핵심 */
.slide-container .slide {
    transition: all 0.5s ease; /* 부드러운 전환 */
    width: 60%;
    height: 90%;
    background: white;
    border-radius: 20px !important;
    box-shadow: 0 0px 2rem rgba(129, 202, 255, 0.25);
    position: absolute;
    left: 50%;
    top: 50%;
    /* 기본 transform: 정중앙 유지 + 깊이값 */
    transform: translate(-50%, -50%)scale(0.7);
    opacity: 0;
    visibility: hidden;
	padding : 2rem 1.5rem !important;
}

/* --- 위치별 스타일 (중앙 정렬을 위해 translate(-50%, -50%)를 모두 포함) --- */


/* 3번: 왼쪽 가까이 */
.slide-container .slide.prev {
    transform: translate(-80%, -50%) scale(0.8);
    opacity: 0.8;
    visibility: visible;
	color: #292929;
}

/* 4번: 정중앙 (주인공) */
.slide-container .slide.active {
    transform: translate(-50%, -50%) scale(1); /* 살짝 앞으로 튀어나오게 */
    opacity: 1;
    z-index: 10;
    visibility: visible;
}

/* 5번: 오른쪽 가까이 */
.slide-container .slide.next {
    transform: translate(-20%, -50%) scale(0.8);
    opacity: 0.8;
    visibility: visible;
	color: #292929;
}




/*문항 등록*/
#optionsContainer {
	display: flex;
    gap: .5rem;
    flex-direction: column;
}

#optionsContainer .option-item {
	display: flex;
    align-items: center;
}

.form-group > label {font-weight:700; margin-bottom:0.5rem;}


/* 문항 미리보기 */
/* 기본 버튼 스타일 */
.survey-title {
	display: flex;
    align-items: center;
    gap: .5rem;
	border-bottom : 1px solid #EEEEEE;
}

.Q-badge {
    font-size: 0.85rem;
    padding: 5px 8px;
    border-radius: 4px;
}

.survey-title h5 {
	font-size: clamp(0.95rem, 1.6vw, 1.1rem);
}


.code-btn {
    transition: all 0.2s ease;
    border: 1px solid #dee2e6;
    background: #fff;
	padding: clamp(0.25rem, 1vw, 0.75rem) clamp(0.5rem, 1.15vw, 1rem);
    font-weight: 500;
	font-size: clamp(0.85rem, 1.45vw, 1rem);
}

[type=button].code-btn {
	display: flex;
    justify-content: space-between;
    align-items: center;
}

[type=button].code-btn > span {
	position: static;
}

/* 마우스 호버 시 */
.code-btn:hover {
    background-color: #f8f9fa;
    border-color: #32AAFF;
	color:#595959;
}

/* 선택되었을 때 강조 (JS에서 클래스 추가) */
.rank-btn.border-primary {
    border-width: 2px !important;
    background-color: rgba(50, 170, 255, 0.025);
    box-shadow: 0 4px 6px rgba(50, 170, 255, 0.1);
}

/* 배지 스타일 */
.rank-badge {
    font-size: clamp(0.65rem, 1.25vw, 0.85rem);
    padding: 5px 8px;
    border-radius: 4px;
}

.codes-group {
	overflow-y: auto;
	padding-right: 10px;
	scrollbar-width: thin;
    scrollbar-color: #32AAFF #F5F8FA;
	height: calc(100% - 3.5rem);
}

/* Chrome, Edge, Safari용 스크롤바 스타일 */
.codes-group::-webkit-scrollbar {
    width: 6px;
}

.codes-group::-webkit-scrollbar-track {
    background: #F5F8FA;
    border-radius: 10px;
}

.codes-group::-webkit-scrollbar-thumb {
    background: #32AAFF; /* 포인트 컬러 적용 */
    border-radius: 10px;
}

.codes-group::-webkit-scrollbar-thumb:hover {
    background: #0056b3;
}


/*정기조사 결과*/
.wrap_list .pageArea {
	margin-top: 1.5rem !important;
}

#trTitle .page-sub {
    transition: all 0.2s ease;
    display: inline-block; /* 크기 변화나 정렬을 위해 권장 */
}


/*추천인*/
#recom_btn {
	width: 960px;
	display: flex;
    flex-direction: column;
    gap: 1rem
}
@media (max-width: 1400px) {
	#recom_btn {
		width: 100%;
	}
}


#myQnaList {
    min-height: 30vh;
}


/* 태블릿 */
@media (max-width: 991px) {
    .menu-container, .main-container, .re-box {
        margin: 2.5rem auto;
    }

	.main-container {
		grid-template-columns: repeat(1, 1fr);
		gap: 2.5rem;
	}

	.Regular-container-wrapper {
		width: 100%;
	}

	.Regular-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        transform: none; /* 슬라이드 필요 없음 */
		height : calc(100% - 1.25rem);
    }

	.Regular-container, .notice-container{
		margin-top: 1.25rem;
	}

	.more-btn {
		display: none;
	}

	/* 1. 슬라이드 크기 조정 */
    .slide-container .slide {
        width: 60%;
        height: 80%;
    }

    /* 3번: 왼쪽 가까이 */
	.slide-container .slide.prev {
		transform: translate(-80%, -50%) scale(0.8);
		opacity: 0.8;
		visibility: visible;
	}

	/* 4번: 정중앙 (주인공) */
	.slide-container .slide.active {
		transform: translate(-50%, -50%) scale(1); /* 살짝 앞으로 튀어나오게 */
		opacity: 1;
		z-index: 10;
		visibility: visible;
	}

	/* 5번: 오른쪽 가까이 */
	.slide-container .slide.next {
		transform: translate(-20%, -50%) scale(0.8);
		opacity: 0.8;
		visibility: visible;
	}
}

@media (max-width: 768px) {
    /* 1. 슬라이드 크기 조정 */
    .slide-container .slide {
        width: 80%;
        height: 85%;
    }

	 /* 3번: 왼쪽 가까이 */
	.slide-container .slide.prev {
		transform: translate(-65%, -50%) scale(0.8);
		opacity: 0.8;
		visibility: visible;
	}

	/* 4번: 정중앙 (주인공) */
	.slide-container .slide.active {
		transform: translate(-50%, -50%) scale(1); /* 살짝 앞으로 튀어나오게 */
		opacity: 1;
		z-index: 10;
		visibility: visible;
	}

	/* 5번: 오른쪽 가까이 */
	.slide-container .slide.next {
		transform: translate(-35%, -50%) scale(0.8);
		opacity: 0.8;
		visibility: visible;
	}

}

/* 모바일 */
@media (max-width: 500px) {
    .menu-container, .main-container, .re-box {
        margin: 2rem auto;
    }

	.main-container {
		gap: 2rem;
	}

	.Regular-container-wrapper {
		width: calc(100% - 2rem);
	}

	.Regular-container {
		display: flex !important;
		margin-top: 1rem;
		transition: transform 0.4s ease;
		height : calc(100% - 1rem);
	}

	.notice-container {
		margin-top: 1rem;
	}

	.more-btn {
		display: flex;		
		top: calc(50% - 3px);
	}

	.btn-prev, .btn-next {
		width: 25px;
		height: 25px;
	}

	.btn-prev > i, .btn-next > i {
		font-size : 12px;
	}

	/*	마이페이지*/
	.date-box input[type="date"] {
		width :100px;
	}
}