/* =========================================================
   layout.css (정리본)
   Header / Sub Hero / Content / Footer
   ========================================================= */

/* ===== 고정 Header ===== */
:root { --header-height: 80px; }  /* 헤더 높이 공통 변수 */

/* =========================================================
   PATCH: Header 정렬 + 드롭다운 방식 통일 (최종 override)
   - 메뉴가 아래로 처져 보이는 문제 해결
   - common.css(Opacity 방식) vs layout.css(Display none) 충돌 해결
   ========================================================= */

#header .header-inner { align-items: center; }

/* LOGO / GNB / UTIL 수직 중앙 정렬 강제 */
#header .logo,
#header .gnb,
#header .util-menu{
  height: var(--header-height);
  display: flex;
  align-items: center;
}


/* 2뎁스 표시: 부모(1뎁스 li)가 hover일 때만 열리고 클릭 가능 */
#header .gnb-menu > li.has-sub:hover > .sub-menu {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 3뎁스 표시: 2뎁스 li가 hover일 때만 열리고 클릭 가능 */
#header .gnb-menu > li.has-sub > .sub-menu > li.has-sub:hover > .sub-menu,
#header .gnb-menu > li.has-sub > .sub-menu > li.has-sub:hover > .sub-menu-3depth {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 안전장치: 서브메뉴 안의 링크는 무조건 클릭 허용 */
#header .gnb-menu .sub-menu a {
  pointer-events: auto !important;
}

/* ===== Util ===== */
.login-btn, .mypage-btn, .logout-btn {
  padding: 6px 10px;
  border: 1px solid #d6d6d6;
  border-radius: 4px;
  color: #888;
  font-size: 14px;
}

/* ===== Sub Hero ===== */
.sub-hero {
  margin-top: var(--header-height);
  min-height: 300px;
  padding: 60px 20px;
  text-align: center;
  color: #fff;
}

.sub-hero h2 { font-size: 50px; margin: 15px 0 10px; }
.sub-hero p  { font-size: 18px; }

/* 배너들 */
.banner-about {
  position: relative;
  background: url("../images/banner-about.png") center / cover no-repeat;
}
.banner-about::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.banner-about .hero-inner { position: relative; z-index: 1; }

.banner-service   { background: url("../images/banner-service.png") center / cover no-repeat; }
.banner-archive   { background: url("../images/banner-fileroom.png") center / cover no-repeat; }
.banner-community { background: url("../images/banner-notice.png") center / cover no-repeat; }

/* ===== Content Section ===== */
.content { padding: 80px 0; }
.content-inner { max-width: 1200px; margin: 0 auto; }

.bg-light { background: #f7f9fc; }
.bg-point { background: #e8fafb; padding: 40px 0; }

#header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
}

/* ===== Footer (Sticky footer) ===== */
#footer{
  margin-top: auto;            /* 핵심: 내용이 짧아도 footer는 아래로 */
  background: #1f2937;
  color: #d1d5db;
  padding: 40px 20px;
}

.footer-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  text-align: center;
}

.footer-info p{
  font-size: 14px;
  margin-bottom: 6px;
}

/* =========================================
   GNB Dropdown Final Fix (deterministic)
   - 기본: 완전히 닫힘(overlay 제거)
   - hover: 해당 메뉴만 열림
   - 3뎁스: 해당 2뎁스 항목 hover일 때만 열림
========================================= */

/* 기준점 */
#header .gnb-menu > li,
#header .gnb-menu > li > .sub-menu > li {
  position: relative !important;
}

/* 2뎁스 기본: 완전히 닫힘 + 클릭/hover 가로채지 않음 */
#header .gnb-menu > li > .sub-menu{
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  transform: none !important;

  display: block !important;         /* display:none 대신 아래 방식으로 제어 */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  z-index: 10000 !important;
}

/* 1뎁스 hover일 때만 2뎁스 열림 */
#header .gnb-menu > li:hover > .sub-menu{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 3뎁스 기본: 완전히 닫힘 */
#header .gnb-menu > li > .sub-menu > li > .sub-menu,
#header .gnb-menu > li > .sub-menu > li > .sub-menu-3depth{
  position: absolute !important;
  top: 0 !important;
  left: 100% !important;
  transform: none !important;

  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  z-index: 10001 !important;
}

/* 2뎁스 항목 hover일 때만 3뎁스 열림 */
#header .gnb-menu > li > .sub-menu > li:hover > .sub-menu,
#header .gnb-menu > li > .sub-menu > li:hover > .sub-menu-3depth{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* 링크 클릭 안전장치 */
#header .gnb-menu .sub-menu a{
  pointer-events: auto !important;
}
/* =========================================
   GNB font size = H1 level (visual match)
========================================= */

/* 1단계 메뉴 */
#header .gnb-menu > li > a {
  font-size: 20px;          /* h1(48px) 대비 한 단계 아래 */
  font-weight: 700;
  line-height: var(--header-height);
  padding: 0 22px;
}

/* 2단계 메뉴 */
#header .gnb-menu > li > .sub-menu > li > a {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
  padding: 6px 22px;
  white-space: nowrap;
}

/* 3단계 메뉴 */
#header .gnb-menu > li > .sub-menu > li > .sub-menu-3depth a,
#header .gnb-menu > li > .sub-menu > li > .sub-menu a {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  padding: 6px 20px;
}