/* 사이트 공통 헤더(header.jsp)·푸터(main-footer.jsp) 스타일.
   portal.css 에서 분리해 포털 메인과 모든 하위 페이지가 함께 로드한다.
   페이지 전역 규칙(html/body 등)은 넣지 않는다. */

/* 공통 헤더는 문서 흐름에 배치되므로, 구형 절대배치 헤더(#header)를
   전제로 한 하위 페이지 레이아웃(ui_common.css)의 상단 보정 여백을 없앤다.
   포털 메인은 #container 를 쓰지 않아 영향이 없다 */
#container {
  padding-top: 0;
}

/* ========================================
   헤더
   ======================================== */
.main-header {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 12px 30px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.30);
  position: relative;
  /* 펼침 컬럼과 배경(::before, 음수 z)이 페이지 콘텐츠 위에 오도록
     헤더가 스택 문맥을 형성한다 */
  z-index: 1000;
  transition: background 0.3s ease;
}

/* 시안 기준 콘텐츠 폭 1240px, 좁은 화면에서는 축소를 허용한다 */
.header-content {
  display: flex;
  width: 1240px;
  max-width: 100%;
  align-items: center;
}

/* 로고 */
.header-logo {
  display: flex;
  padding-bottom: 0.22px;
  justify-content: center;
  align-items: flex-end;
  margin-right: 30px;
  gap: 10px;
}

.header-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  /* 하위 페이지에서 ui_common.css 의 구형 로고 여백을 무효화한다 */
  margin: 0;
}

.header-logo img {
  height: 32px;
  width: auto;
}

.header-logo-img {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 5px;
}

/* 시안 66.75x8.78, SVG 원본 67x9 기준 */
.header-logo-img img {
  width: 67px;
  height: 9px;
  flex-shrink: 0;
}

.header-logo-img .system-text {
  display: flex;
  align-items: center;
  gap: 4px;
}

.header-logo-img .system-text .system-text1 {
  width: 74px;
  height: 15px;
}

.header-logo-img .system-text .system-text2 {
  width: 158px;
  height: 14px;
}

/* 네비게이션.
   position 을 주지 않는다: 펼침 배경(.mega-dropdown-bg)이 헤더 막대
   (.main-header) 기준으로 좌우 전체 폭을 계산해야 한다 */
.header-nav {
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex: 1 0 0;
  margin-right: 30px;
}

/* 펼침 컬럼이 항목에 절대배치되므로 항목이 기준 좌표가 된다.
   항목 폭이 서로 달라도 컬럼은 자기 항목 폭을 그대로 따른다.
   padding-bottom(+상쇄 margin)은 메뉴와 패널 사이 호버 다리이자
   컬럼(top:100%)의 시작 기준선이다 */
.nav-item {
  flex: 1;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-bottom: 12px;
  margin-bottom: -12px;
}

.nav-link {
  color: #fff !important;
  text-decoration: none;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  transition: color 0.3s;
  padding: 12px 0;
  display: block;
}

.nav-link:hover {
  color: #ffd700;
}

/* 메가 드롭다운 — 컬럼은 각 .nav-item 안에 절대배치되어
   항목 폭과 컬럼 폭이 항상 일치한다(로그인 영역 폭과 무관) */
.dropdown-column {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  padding: 24px 8px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 펼침 패널의 전체 폭 어두운 배경(단일 요소).
   글자를 담은 컬럼과 분리되어 있어 페이드 중에도 글자를 덮지 못한다.
   높이는 열릴 때 헤더 스크립트가 가장 긴 컬럼에 맞춰 지정한다 */
.mega-dropdown-bg {
  position: absolute;
  /* 기준은 .main-header(가장 가까운 positioned 조상).
     화면 밖으로 확장하는 음수 좌표 기법은 하위 페이지에서 횡스크롤을
     만들므로 헤더 막대 폭(left/right 0)만큼만 깐다 */
  top: 100%; /* main-header 패딩 박스 기준 100% = 헤더 아래 모서리 */
  left: 0;
  right: 0;
  height: 0;
  background: rgba(51, 51, 51, 0.95);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  /* 헤더 스택 문맥의 바닥층으로 보내 항상 글자 아래에 깔린다 */
  z-index: -1;
}

.dropdown-column a {
  color: #ccc;
  text-decoration: none;
  font-size: 14px;
  padding: 8px 0;
  transition: color 0.2s;
  white-space: nowrap;
}

.dropdown-column a:hover {
  color: #fff;
}

.main-header.dropdown-active {
  background: rgba(51, 51, 51, 0.95);
}

.main-header.dropdown-active .dropdown-column,
.main-header.dropdown-active .mega-dropdown-bg {
  opacity: 1;
  visibility: visible;
}

/* 인증 영역 */
.header-auth {
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-auth .user-info {
  display: flex;
  width: auto;
  justify-content: flex-end;
  align-items: flex-start;
  margin-right: 10px;
}

/* 로그인 폼 */
.header-auth form {
  display: flex;
  width: 270px;
  align-items: flex-start;
  gap: 15px;
}

.header-auth input[type="text"],
.header-auth input[type="password"] {
  display: flex;
  width: 92px;
  height: 32px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 7px;
  flex: 1 0 0;
  border: 0;
  border-bottom: 1px solid #FFF;
  color: #FFF;
  background: transparent;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.21px;
}

.header-auth input[type="text"]::placeholder,
.header-auth input[type="password"]::placeholder {
  color: #fff;
  opacity: 1;
}

.header-auth input[type="text"]:focus,
.header-auth input[type="password"]:focus {
  outline: none;
}

.header-auth button.login {
  display: flex;
  width: 60px;
  height: 32px;
  min-width: 32px;
  margin: 2px;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  border: 0px;
  border-radius: 4px;
  background: #00A0D8;
  color: #FFF;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
}

.header-auth button.login:hover {
  background: #0483b0;
}

/* 인사말은 두 줄(<br/>)로 접어 가로 폭을 줄인다 */
.user-name {
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
  white-space: nowrap;
}

/* 로그아웃·비밀번호 변경을 세로로 쌓아 가로 폭을 줄인다 */
.user-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.user-link {
  color: #fff !important;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
  padding: 0;
}

.user-link:hover {
  color: #ffd700;
}

.btn-sitemap {
  display: flex;
  height: 33px;
  padding: 7px 24px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 4px;
  background: #666;
  font-size: 16px;
  font-weight: 500;
  color: #FFF;
  font-style: normal;
  line-height: normal;
  letter-spacing: -0.5px;
}

.btn-sitemap:hover {
  background: #525151;
}

/* ========================================
   하위 페이지용 밝은 변형 (headerTheme='light')
   흰 배경 위에 어두운 글자, 로고는 -black SVG 를 쓴다
   ======================================== */
.main-header--light {
  background: #fff;
  border-bottom: 1px solid #e5e8ec;
  flex-shrink: 0;
}

.main-header--light .header-nav {
  color: #333;
}

.main-header--light .nav-link {
  color: #333 !important;
}

.main-header--light .nav-link:hover {
  color: #006abe;
}

.main-header--light .user-name {
  color: #333;
}

.main-header--light .user-link {
  color: #333 !important;
}

.main-header--light .user-link:hover {
  color: #006abe;
}

.main-header--light .header-auth input[type="text"],
.main-header--light .header-auth input[type="password"] {
  border-bottom: 1px solid #999;
  color: #333;
}

.main-header--light .header-auth input[type="text"]::placeholder,
.main-header--light .header-auth input[type="password"]::placeholder {
  color: #999;
}

/* 펼침 시 헤더 막대는 흰색을 유지한다 */
.main-header--light.dropdown-active {
  background: #fff;
}

/* 밝은 변형의 펼침 패널: 흰 배경 + 어두운 링크로 헤더와 톤을 맞춘다 */
.main-header--light .mega-dropdown-bg {
  background: #fff;
  border-bottom: 1px solid #e5e8ec;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.main-header--light .dropdown-column a {
  color: #666;
}

.main-header--light .dropdown-column a:hover,
.main-header--light .dropdown-column a:focus {
  color: #006abe;
}

/* 가리킨 메뉴의 펼침 칸 전체에 옅은 음영을 깔아 어느 묶음을 보고 있는지 드러낸다.
   칸 높이는 헤더 스크립트가 가장 긴 칸에 맞춰 지정하므로 음영 길이도 서로 같다 */
.main-header--light .nav-item:hover .dropdown-column,
.main-header--light .nav-item:focus-within .dropdown-column {
  background: #e8f1fa;
}

/* ========================================
   푸터
   ======================================== */
/* 시안 푸터 높이 58px 기준. 외부망 메뉴가 추가되면 내용에 따라 늘어난다 */
.footer-section {
  box-sizing: border-box;
  min-height: 58px;
  padding: 8px 0;
  background: #f0f0f0;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.footer-container {
  max-width: 1400px;
  width: 100%;
  padding: 0 30px;
}

.footer-menu {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 0;
}

.footer-menu a {
  margin: 0 15px;
  font-size: 15px;
}

.footer-menu a.privacy {
  color: #126fdd;
}

.footer-info {
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-right: 28px;
}

.footer-logo .logo-icon {
  display: inline-block;
  width: 81px;
  height: 30px;
}

/* 시안의 회색 단색 로고 표현: 컬러 원본을 회색조로 바꿔 표시한다 */
.footer-logo .logo-icon img {
  filter: grayscale(1);
  opacity: 0.6;
}

.footer-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  font-size: 13px;
  color: #666666;
}

.footer-text p {
  line-height: 1;
}

.footer-text p + p {
  margin-top: 4px;
}