@charset "utf-8";

html, body {
	margin: 0;
	padding: 0;
	overflow-x: hidden; /* 가로 스크롤 강제 차단 */
  }

/* 회원가입 이메일 자동완성 */
.autocomplete-suggestions { 
	border: 1px solid #ccc; 
	max-height: 150px; 
	overflow-y: auto; 
	position: relative; 
/* 	position: absolute;  */
	background-color: white; 
	z-index: 1000; 
	width: calc(100% - 22px); 
} 


/* ===== 인사말 ===== ====================================================================================*/
.greeting{width:100%;padding:clamp(32px,4vw,60px) 0;font-family:"Noto Sans KR",sans-serif;}
.greeting .greeting__inner{max-width:1400px;margin:0 auto;}
.greeting .greeting__header{text-align:center;}
.greeting__title{color:#514E4E;font-family:"Ria Sans";font-size:clamp(28px,3.2vw,48px);font-weight:700;line-height:1;padding:clamp(2rem,3vw,140px) 0 !important; word-break: keep-all;}
.greeting .greeting__content{display:flex;align-items:center;gap:clamp(16px,3vw,40px);aspect-ratio:1400/510;height:auto;overflow:hidden;padding-bottom:clamp(2rem,3vw,140px) 0;}
.greeting .greeting__image{flex:1 1 50%;width:50%;}
.greeting .greeting__image img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:8px;}
.greeting .greeting__text{color:#514E4E;font-family:Pretendard;font-size:clamp(15px,1.2vw,18px);font-weight:500;line-height:1.7;text-align:left;display:flex;flex-direction:column;justify-content:center;width:50%;height:100%; word-break: keep-all;}
.greeting .greeting__intro{color:#514E4E;font-family:Pretendard;font-size:clamp(20px,1.8vw,28px);font-weight:500;line-height:1.5;text-align:left; word-break: keep-all;}
.greeting .greeting__intro .highlight{color:#FF8B8B;font-weight:700;}

/* 태블릿 이하: 비율 해제 + 세로 스택 */
@media (max-width:1023px){
  .greeting .greeting__content{aspect-ratio:auto;flex-direction:column;align-items:stretch;}
  .greeting .greeting__image{width:100%;}
  .greeting .greeting__image img{aspect-ratio:16/9;}
  .greeting .greeting__text{width:100%;height:auto;}
}

/* 작은 모바일: 이미지 먼저 꽉 차고 텍스트 여백 확보 */
@media (max-width:599px){
  .greeting{padding:clamp(24px,5vw,36px) 0;}
  .greeting .greeting__header{margin-bottom:clamp(16px,4vw,24px);}
  .greeting .greeting__image img{aspect-ratio:3/2;}
}


/* ===== 기관소개 ========================================================================================= */
.about { width:100%; font-family:"Noto Sans KR",sans-serif; }
.about .about__inner { max-width:1400px; margin:0 auto; padding-bottom:clamp(2rem,3vw,100px); }

/* 콘텐츠 박스 */
.about .about__content { display:flex; flex-direction:row; align-items:stretch; gap:32px; margin-bottom:40px; }
.about .about__content:nth-child(1) { height:120px; }
.about .about__content:nth-child(2) { height:400px; }

/* 타이틀 영역 */
.about .about__titles { flex:0 0 260px; display:flex; flex-direction:column; gap:20px; }
.about .about__icon-box { width:100%; height:120px; border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:18px; font-weight:700; gap:8px; text-align:center; background:#fff; }
.about .about__icon-box img { width:40px; height:30px; object-fit:contain; }

/* 점 */
.about .about__dots { flex:0 0 56px; display:flex; align-items:center; justify-content:center; gap:10px; }
.about .about__dots span { display:inline-block; width:6px; height:6px; border-radius:50%; opacity:.9; }

/* 설명 텍스트 */
.about .about__descs { flex:1; display:flex; flex-direction:column; gap:18px; height:100%; }
.about .about__desc { display:flex; align-items:center; padding:22px; font-size:16px; color:#999999; line-height:1.7; text-align:left; border-radius:12px; background:#fff; border:2px solid #eeeeee; height:auto; }

/* 고정 높이 PC에서만 유지 */
@media (min-width:769px) {
  .about .about__content:nth-child(1) .about__desc { height:100%; }
  .about .about__content:nth-child(2) .about__desc { height:calc(100% / 3); }
}

/* 색상 테마 */
.about .about__content:nth-child(1) span { color:#f0b266; }
.about .about__content:nth-child(2) span { color:#f4a4bd; }
.about .about__icon--orange { background:#fff8ef; border:2px solid #f0b266; }
.about .about__icon--pink { background:#fff7f9; border:2px solid #f4a4bd; height: 100%;}
.about .about__icon--blue { background:#e0f5f5; border:2px solid #2ca7a7; }
.about .about__icon--sky { background:#eaf5ff; border:2px solid #3b82f6; }
.about .about__dots--orange span { background:#f0b266; }
.about .about__dots--pink span { background:#f4a4bd; }

/* 반응형 */
@media (max-width:1024px) {
  .about .about__content { gap:24px; }
  .about .about__titles { flex-basis:220px; }
}
@media (max-width:768px) {
  .about .about__content { flex-direction:column; align-items:flex-start; gap:20px; height:auto !important; }
  .about .about__titles { flex-basis:auto; width:100%; }
  .about .about__icon-box { height:auto; padding:20px 0; }
  .about .about__dots { display:none; }
  .about .about__descs { width:100%; gap:16px; }
  .about .about__desc { font-size:15px; padding:18px; height:auto !important; }
}




/* ===== 공간소개 ========================================================================================= */
/* base */
.space{width:100%;padding:clamp(40px,6vw,80px) 0;font-family:"Noto Sans KR",sans-serif;}
.space__inner{max-width:1400px;margin:0 auto;}
.space__header{text-align:center;margin-bottom:clamp(24px,3vw,48px);}
.space__title{font-size:clamp(22px,2vw,28px);font-weight:700;color:#333;}

/* PC 기본: 3열 */
.space__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px) clamp(16px,2vw,30px);}
.space__item{text-align:left;}
.space__card{border-radius:12px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.05);background:#fff;transition:transform .3s;}
.space__card:hover{transform:translateY(-4px);}
.space__card img{width:100%;aspect-ratio:385/290;display:block;object-fit:cover;}
.space_card__textbox{padding:10px;}
.space__name{font-size:clamp(16px,1.2vw,18px);font-weight:700;margin:16px 0 8px;color:#333;}
.space__desc{font-size:clamp(13px,1vw,14px);color:#555;line-height:1.6;margin:0;}

/* 태블릿 이하: 2열 고정 */
@media (max-width:1024px){
  .space__list{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* ===== 오시는 길 ========================================================================================= */
/* 기본 */
.map {width:100%; padding:60px 0; font-family:"Noto Sans KR",sans-serif;}
.map__inner {max-width:1400px; margin:0 auto;}
.map__header {text-align:center; margin-bottom:40px;}
.map__title {font-size:28px; font-weight:700; color:#333;}
.map__area {
  width:100%;
  aspect-ratio:1400 / 500; /* ✅ 비율 유지 */
  background:#f5f5f5;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#666;
  font-size:18px;
  margin-top:clamp(2rem, 3vw, 72px);
  margin-bottom:40px;
  overflow:hidden;
}
.map__area img {width:100%; height:100%; object-fit:cover;}

.map__cards {display:flex; gap:30px; justify-content:center; margin-top:clamp(2rem, 3vw, 72px);}
.map__card {flex:1 1 50%; padding:30px; border-radius:16px; background:#fff6f6; border:2px solid #ff8b8b; box-shadow:0 2px 6px rgba(0,0,0,0.05); text-align:center;}
.map__card-icon {display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:20px;}
.map__card-icon img {width:32px; height:32px;}
.map__card-icon p {font-weight:700; color:#333;}
.map__card-list {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; text-align:center;}
.map__card-list li {display:flex; align-items:flex-start; gap:36px; font-size:15px; color:#777; line-height:1.6; justify-content:center;}
.map__card-list span {flex:1; text-align:left;}
.map__card-list strong.label {display:flex; justify-content:space-between; width:90px; font-weight:700; color:#111; text-align:center;}
.map__card-list strong.label--split {display:flex; justify-content:space-between; width:90px;}
.map__card-list strong.label--split span {text-align:center;}
.map__notice {margin-top:16px; font-size:14px; color:#ff8b8b; text-align:left;}

/* ✅ 반응형 */

/* 1200px 이하 - 태블릿 가로 */
@media (max-width:1200px) {
  .map__title {font-size:26px;}
  .map__cards {gap:24px;}
  .map__card {padding:24px;}
}

/* 992px 이하 - 태블릿 세로 */
@media (max-width:992px) {
  .map__cards {
    flex-direction:column;
    align-items:center;
  }
  .map__card {
    width:100%;
    max-width:600px;
  }
  .map__card-list li {gap:20px;}
}

/* 768px 이하 - 모바일 중간 */
@media (max-width:768px) {
  .map {padding:40px 0;}
  .map__title {font-size:22px;}
  .map__card {padding:20px;}
  .map__card-icon img {width:28px; height:28px;}
  .map__card-list li {font-size:14px;}
}

/* 480px 이하 - 모바일 작은 화면 */
@media (max-width:480px) {
  .map {padding:30px 0;}
  .map__title {font-size:20px;}
  .map__cards {gap:16px;}
  .map__card {padding:16px;}
  .map__card-list li {gap:12px; font-size:13px;}
  .map__notice {font-size:12px;}
}

/* 344px 이하 - 초소형 기기 */
@media (max-width:344px) {
  .map__title {font-size:18px;}
  .map__card {padding:14px;}
  .map__card-list li {gap:8px; font-size:12px;}
}



/* ===== 콘텐츠 배너 ========================================================================================= */

/* 기존 유지 */
.content_banner{width:100%;aspect-ratio:1920/320;display:flex;justify-content:center;}
.content_banner .greeting__inner{width:100%;max-width:1920px;height:100%;}
.content_banner .greeting__inner ul{display:flex;width:100%;height:100%;}
.content_banner .greeting__inner ul li{flex:1 1 50%;height:100%;}
.content_banner .greeting__inner ul .banner_text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:100%;padding: 0 2.5vw;}
.content_banner .greeting__inner ul .banner_text h1{font-family:"Ria Sans";font-size:clamp(24px,3.5vw,48px);font-weight:700;line-height:1.1;text-align:left;margin-bottom:clamp(10px,1vw,18px);}
.content_banner .greeting__inner ul .banner_text p{color:#999;font-family:Pretendard;font-size:clamp(14px,1.5vw,20px);font-weight:500;line-height:1.4;text-align:left;}
.content_banner .greeting__inner ul .img_con{width:100%;height:100%;}
.content_banner .greeting__inner ul .img_con img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}

/* 화면이 줄어들수록 배너 높이를 더 확보해서 크롭 완화 */
@media(max-width:1400px){.content_banner{aspect-ratio:1920/380;}}
@media(max-width:1200px){.content_banner{aspect-ratio:1920/440;}}
@media(max-width:1024px){.content_banner{aspect-ratio:1920/520;}}
/* 필요 시 이미지 초점 위치도 살짝 이동 (예시: 피사체가 좌측이면 35%로) */
@media(max-width:1024px){.content_banner .greeting__inner ul .img_con img{object-position:35% 50%;}}

.orgchart_wrap{width: 100%; display: flex; justify-content: center;}
.orgchart_wrap .orgchart_box{width: 100%; aspect-ratio: 1500/738; max-width: 1400px;}
.orgchart_wrap .orgchart_box img{width: 100%; height: 100%; object-fit: contain;}



/* ===== 탭 메뉴 ===== ====================================================================================*/
.intro-tabs{display:flex;justify-content:center;background:#f9f9f9;border-radius:30px;padding:6px;box-shadow:0 4px 8px rgba(0,0,0,0.06);gap:8px;max-width:1400px;margin:0 auto; margin-top: clamp(2rem, 3vw, 140px);}
.intro-tab{flex:1;min-width:120px;padding:10px 0;border:none;border-radius:30px;background:transparent;font-size:14px;color:#777;cursor:pointer;transition:all 0.3s ease;}
.intro-tab.active{background:#ff8b8b;color:#fff;font-weight:700;box-shadow:0 4px 6px rgba(0,0,0,0.1);}
.intro-tab-content{display:none;font-size:16px;color:#333;text-align:center;margin-bottom: clamp(2rem,7vw, 140px);}
.intro-tab-content.active{display:block;}

@media (max-width:767px){
  .intro-tabs{flex-wrap:wrap;}
  .intro-tab{flex:1 1 calc(50% - 8px); min-width:140px;}
}