/* SO 사이트 전용 스타일 - 푸터 하단 고정 및 메인 영역 확장 */

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#header {
  flex-shrink: 0;
}

/* 헤더 높이 170px 고정 - 구조: 30px(위 여백) + 70px(검색란) + 70px(주메뉴) = 170px */
#header .header {
  height: 170px;
  min-height: 170px;
  max-height: 170px;
  padding-top: 30px;
  padding-bottom: 0;
  box-sizing: border-box;
  position: relative;
}

/* header-wrap: 70px 검색란 높이만 차지, 위 여백 30px 아래 위치 */
#header .header .header-wrap {
  height: 70px;
  min-height: 70px;
  max-height: 70px;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 0;
  box-sizing: border-box;
  position: absolute;
  top: 30px;
  left: 0;
  right: 0;
}

/* 검색란 높이 70px로 고정 */
#header .header .header-wrap .search-bx {
  height: 70px;
  min-height: 70px;
  max-height: 70px;
  margin-top: 0;
  margin-bottom: 0;
}

#header .header .header-wrap .search-bx__input {
  height: 70px;
  min-height: 70px;
  max-height: 70px;
}

#header .header .header-wrap .search-bx__btn {
  height: 70px;
  min-height: 70px;
  max-height: 70px;
  width: 70px;
}

/* 주메뉴: 하단 70px, 검색란 바로 아래, 바닥에 찰싹 붙음 */
#header .header .container:last-child {
  height: 70px;
  min-height: 70px;
  max-height: 70px;
  margin-top: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

/* 주메뉴 호버 시 흔들림 방지 - font-weight 변경으로 인한 너비 변화 방지 */
/* 가상 요소를 사용하여 볼드 텍스트의 너비를 미리 계산 */
#header .header .nav .depth-1 > .link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 볼드 텍스트를 가상 요소로 미리 렌더링하여 너비 계산 */
/* JavaScript로 각 링크에 data-text 속성이 추가됨 */
#header .header .nav .depth-1 > .link::after {
  content: attr(data-text);
  font-weight: 600;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  display: block;
  position: absolute;
}

/* 호버 시에도 동일한 너비 유지 */
#header .header .nav .depth-1 > .link:hover {
  font-weight: 600;
}

/* 영문 사이트 주메뉴 호버 시 흔들림 방지 강화 */
#header.lang-eng .header .nav .depth-1 > .link {
  /* 영문 폰트는 볼드와 일반 폰트의 너비 차이가 커서 추가 보호 필요 */
  min-width: fit-content;
}

#header.lang-eng .header .nav .depth-1 > .link::after {
  /* 영문 사이트에서도 data-text를 사용한 너비 계산 */
  content: attr(data-text);
  font-weight: 600;
  height: 0;
  visibility: hidden;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  white-space: nowrap;
  display: block;
  position: absolute;
}

#header.lang-eng .header .nav .depth-1 > .link:hover {
  font-weight: 600;
  /* 호버 시에도 위치 고정 */
  transform: translateZ(0);
  will-change: auto;
}

/* 영문 사이트에서 주메뉴를 한국어 사이트와 동일한 위치로 맞춤 */
#header.lang-eng .header .container:last-child {
  bottom: 0;
}

#contents {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

/* ============================
   영문 사이트: 상단/푸터 고정 + 콘텐츠만 스크롤
   ============================ */
html[lang="en"] body {
  /* 전체 페이지는 스크롤되지 않도록 고정 */
  overflow: hidden;
}

html[lang="en"] #contents {
  /* 플렉스 비율 고정 후, 높이를 뷰포트 기준으로 계산 */
  flex: 0 0 auto;
  height: calc(100vh - 170px - 260px); /* 헤더 170px + 푸터 260px */
  max-height: calc(100vh - 170px - 260px);
  overflow-y: auto;
}

#contents .section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#contents .section .container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

#footer {
  flex-shrink: 0;
  margin-top: auto;
  /* 푸터 높이를 한국어/영문 공통 260px로 고정 */
  height: 260px;
  min-height: 260px;
  max-height: 260px;
  padding: 40px 0;
  box-sizing: border-box;
}

/* 영문 사이트 푸터 여백 균등 조정 */
#footer.lang-eng {
  padding-top: 30px;
  padding-bottom: 30px;
}

/* 푸터 컨텐츠 영역 크기 고정 - 한국어와 영문 동일 */
#footer .container {
  position: relative;
  box-sizing: border-box;
}

/* 푸터 로고 크기 고정 */
#footer .footer__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

#footer .footer__logo .img {
  width: 180px;
  height: auto;
}

/* 푸터 텍스트 래퍼 영역 크기 고정 - 한국어와 영문 동일하게 */
#footer .footer__txt-wrap {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
}

/* 푸터 주소 영역 크기 고정 - 한국어와 영문 동일 */
#footer .footer__address {
  opacity: 0.8;
  flex: 0 0 auto;
  margin-right: auto;
  font-size: 12px;
  line-height: 1.5;
  box-sizing: border-box;
}

/* 영문 푸터만 최대 287px 높이로 제한 */
#footer.lang-eng .footer__txt-wrap {
  max-height: 287px;
  overflow: hidden;
  align-items: flex-start;
}

/* 푸터 주소 텍스트 크기 고정 */
#footer .footer__address p {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
}

#footer .footer__address p.mt-1 {
  margin-top: 4px;
}

#footer .footer__address a {
  font-size: 12px;
}

/* 영문 푸터 스타일 - 이미지 형식에 맞춤 */
#footer.lang-eng .footer__address p strong {
  font-weight: 600;
  display: block;
  font-size: 12px;
  line-height: 1.5;
}

#footer.lang-eng .footer__address {
  font-size: 12px;
  line-height: 1.5;
}

/* 푸터 정책 링크 영역 크기 고정 - 한국어와 영문 동일 */
#footer .footer__policy {
  margin-left: auto;
  text-align: right;
  flex: 0 0 auto;
  font-size: 14px;
  box-sizing: border-box;
}

#footer .footer__policy li {
  line-height: 1.5;
  font-size: 14px;
}

#footer .footer__policy li.mt-1 {
  margin-top: 4px;
}

#footer .footer__policy a {
  font-size: 14px;
}

#footer .footer__policy img {
  width: 115px;
  height: auto;
}

/* 메인 페이지에서도 적용 */
.main-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.main-body #contents {
  flex: 1;
}

/* 서브 페이지에서도 적용 */
.sub-body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sub-body #contents {
  flex: 1;
}

/* 공지사항 목록 아래 여백 확장 */
.sub-main {
  flex: 1;
}

.sub-main .section {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sub-main .section .container {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* 메인 페이지 높이 최적화 - Full HD(1080px)에서 스크롤바 없도록 */
.main-body {
  max-height: 100vh;
  overflow: hidden;
}

.main-body #contents {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

/* 메인 페이지 섹션 높이 제한 */
.main-body .main .section {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-body .main .section .container.main-container-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 메인 페이지 섹션 여백 최소화 */
.main-body .main .section.mt-12 {
  margin-top: 20px !important;
}

/* 메인 페이지 welcome-message 여백 최소화 */
.main-body .main .welcome-message {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.main-body .main .welcome-message .display-4 {
  margin-bottom: 10px !important;
  font-size: 2rem !important;
}

.main-body .main .welcome-message .lead {
  font-size: 1.1rem !important;
  margin-bottom: 0 !important;
}

/* 메인 페이지 pb-40 클래스 여백 줄이기 */
.main-body .main.pb-40 {
  padding-bottom: 20px !important;
}

/* 메인 페이지(홈) 전용 레이아웃: 70% / 30% 분할 컨테이너 */
.main-container-wrapper {
  max-width: 100%;
  margin: 0 auto;
  height: 100%;
}

.main-layout {
  display: flex;
  gap: 20px;
  align-items: stretch;
  width: 100%;
  height: 100%;
}

.main-content-left {
  width: 70%;
  flex: 0 0 70%;
  box-sizing: border-box;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
}

.main-content-right {
  width: 30%;
  flex: 0 0 30%;
  box-sizing: border-box;
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  flex-direction: column;
}

/* 우측 회색 영역 */
.side-box {
  width: 100%;
  flex: 1;
  background: #ffffff;
  border: 1px dashed #ddd;
  box-sizing: border-box;
}

/* 메인 페이지 공지사항/한국어교육소식 영역 좌우 마진 */
.main-content-left .col-6 {
  padding-top: 30px;
  padding-left: 45px;
  padding-right: 30px;
}

/* 메인 페이지 공지사항/한국어교육소식 리스트 스타일 */
.notice-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notice-list li {
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.notice-list li:last-child {
  border-bottom: none;
}

.notice-list .title {
  display: inline-block;
  font-size: 14px;
  color: #333;
  flex: 1;
  min-width: 0; /* 텍스트 오버플로우 방지 */
  text-align: left; /* 왼쪽 정렬 */
}

.notice-list .date {
  display: inline-block;
  font-size: 12px;
  white-space: nowrap;
  width: 90px; /* 날짜 고정 너비로 세로선 맞춤 */
  text-align: right; /* 오른쪽 정렬 */
  flex-shrink: 0; /* 축소 방지 */
  margin-left: auto; /* 오른쪽으로 찰싹 붙게 */
}

.notice-list a {
  display: flex;
  justify-content: flex-start; /* 왼쪽부터 시작 */
  align-items: center;
}

.notice-list a:hover .title {
  color: #e50057;
  text-decoration: underline;
}

/* 공지사항 페이지 컨텐츠 영역 패딩 */
.so-notice-page main .section .container {
  padding: 20px;
  box-sizing: border-box;
}