/*
 * 충남문화포털 리디자인 시안 A — 헤더 / 네비게이션
 * 방향: "우아한 격조" — 딥 인디고 헤더 포인트
 * 적용 범위: 전체 페이지 공통 (GNB, 유틸메뉴, 퀵링크, 모바일 메뉴)
 * ─────────────────────────────────────────────────────────
 * 변경 요소:
 *   1. GNB 폰트 — Noto Sans KR / Noto Serif KR
 *   2. 헤더 — 흰 배경 유지 + 상단 인디고 액센트 바 + GNB 호버 색상
 *   3. 퀵링크 — 인디고 계열
 *   4. 모바일 메뉴 — 딥 인디고 다크 패널
 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap');

/* ─────────────────────────────────────────
   1. GNB 폰트
───────────────────────────────────────── */

/* GNB 메뉴 폰트 — 가독성 개선 */
#gnb_layout .depth1_ul > li > a {
  font-family: 'Noto Sans KR', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: -0.3px;
}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a {
  font-family: 'Noto Sans KR', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
}


/* ─────────────────────────────────────────
   2. 헤더(상단 영역) 디자인 개선
   대상: #top_layout, .top_wrap, #gnb_layout
───────────────────────────────────────── */

/* 헤더 상단 액센트 바 */
#top_layout::before {
  content: '';
  display: block;
  height: 3px;
  background: rgba(45, 27, 142, 0.50);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

/* 헤더 배경 — 흰색에서 미세한 오프화이트로 */
#top_layout {
  background: #fafafa !important;
  border-bottom: 1px solid #e8e8f0 !important;
  box-shadow: 0 2px 12px rgba(45, 27, 142, 0.08) !important;
}

/* 유틸 메뉴 — 색상 개선 */
#top_layout .top_wrap .utile_wrap li a, #top_layout .top_wrap .utile_wrap li select {
  color: #3a3a5c !important;
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: color 0.2s ease !important;
}
#top_layout .top_wrap .utile_wrap li a:hover,
#top_layout .top_wrap .utile_wrap li a:focus {
  color: #4a40f3 !important;
}


/* GNB 배경 개선 */
#gnb {
  border-bottom: 1px solid rgba(45, 27, 142, 0.50) !important;
}

/* 통합검색 버튼 — 텍스트 숨김, 아이콘만 표시 */
#top_layout #search_top > a.popbtn {
  font-size: 0 !important;
  width: 36px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 50% !important;
  transition: background 0.2s ease !important;
}
#top_layout #search_top > a.popbtn:hover {
  background-color: rgba(45, 27, 142, 0.08) !important;
}
#top_layout #search_top > a.popbtn i.i-option {
  font-size: 18px !important;
  display: block !important;
}

/* GNB 메뉴 hover/active 색상 — 더 진한 인디고 */
#gnb_layout .depth1_ul > li > a.current,
#gnb_layout .depth1_ul > li > a:hover,
#gnb_layout .depth1_ul > li > a:focus {
  color: #2d1b8e !important;
}

/* GNB 활성 메뉴 점 — 인디고 */
#gnb_layout .depth1_ul > li > a.current span::before {
  background: #2d1b8e !important;
}

/* GNB 드롭다운 — 화이트 패널 + 인디고 좌측 (우아한 격조) */
#gnb_layout.open::after {
  background: #f7f7fc !important;
  border-top: 2px solid #4a40f3 !important;
  box-shadow: 0 8px 32px rgba(45, 27, 142, 0.12) !important;
}
#gnb_layout.open::before {
  background: linear-gradient(160deg, #1e1060 0%, #2d1b8e 55%, #4a40f3 100%) !important;
  background-size: cover !important;
}

/* GNB 서브 타이틀 — 인디고 패널 위 흰 텍스트 */
#gnb_layout .depth1_ul > li .item .gnb-title strong {
  font-family: 'Noto Serif KR', serif !important;
  font-size: 22px !important;
  color: #ffffff !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
#gnb_layout .depth1_ul > li .item .gnb-title .icon {
  filter: brightness(0) invert(1) !important;
  opacity: 0.85 !important;
}

/* GNB 서브메뉴 링크 — 화이트 패널 + 시각적 개선 - modify 20260609 : margin-bottom 12px -> 0px로 변경 */
#gnb_layout .depth1_ul > li .item .depth2_ul > li {
  margin: 0 0px 6px 0 !important;
  padding: 0 !important;
}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a {
  padding: 10px 10px 10px 14px !important;
  border-left: 3px solid rgba(74, 64, 243, 0.2) !important;
  border-radius: 0 8px 8px 0 !important;
  color: #1a1a2e !important;
  font-size: 15px !important;
  background: transparent !important;
  transition: background 0.18s ease, border-color 0.18s ease, padding-left 0.18s ease, color 0.18s ease !important;
}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a:hover,
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a:focus {
  color: #2d1b8e !important;
  background: rgba(74, 64, 243, 0.07) !important;
  border-left-color: #4a40f3 !important;
  padding-left: 20px !important;
}

/* 서브 메뉴 hover — 언더라인 비활성화 (border-left로 대체) */
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a > span::after {
  display: none !important;
}
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a:hover > span::before,
#gnb_layout .depth1_ul > li .item .depth2_ul > li > a:focus > span::before {
  opacity: 0 !important;
}

/* gnb-title 장식선 */
#gnb_layout .depth1_ul > li .item .gnb-title {
  /*padding-top: 28px !important;*/
  padding-top: 8px !important;
}
#gnb_layout .depth1_ul > li .item .gnb-title strong::after {
  content: '' !important;
  display: block !important;
  width: 36px !important;
  height: 3px !important;
  background: rgba(255, 255, 255, 0.4) !important;
  margin: 12px auto 0 !important;
  border-radius: 2px !important;
}

/* depth3 링크 */
#gnb_layout .depth3_ul > li a {
  color: #4a4a6a !important;
}

/* 퀵링크 — 인디고 계열로 통일 */
#quick ul li a {
  background: #2d1b8e !important;
}
#quick ul li a:hover {
  background: #4a40f3 !important;
}


/* ─────────────────────────────────────────
   모바일 메뉴 — 인디고 팔레트 통일
───────────────────────────────────────── */

/* 전체 패널 배경 */
#mobile-menu .modal-dialog .modal-content {
  background: #1a1535 !important;
}

/* 상단 유틸 바 */
#mobile-menu .mtop_until {
  background: #1a1535 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}
#mobile-menu .mtop_until .langlist ul li a {
  color: rgba(255, 255, 255, 0.8) !important;
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 13px !important;
}
#mobile-menu .mtop_until .langlist ul li:after {
  border-left-color: rgba(255, 255, 255, 0.2) !important;
}

/* 1depth 메뉴 항목 */
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a {
  background: #1a1535 !important;
  color: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  font-family: 'Noto Serif KR', serif !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  padding: 16px 48px 16px 0 !important;
  letter-spacing: -0.3px !important;
}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a:before {
  border-color: rgba(255, 255, 255, 0.5) !important;
}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a.ov {
  color: #c4bcff !important;
}

/* 2depth 서브메뉴 */
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul {
  background: rgba(45, 27, 142, 0.3) !important;
  border-left: 3px solid rgba(74, 64, 243, 0.5) !important;
  padding: 12px 20px 16px !important;
}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a {
  color: rgba(255, 255, 255, 0.78) !important;
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a span {
  padding: 6px 0 !important;
}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a:hover,
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul > li > a:focus {
  color: #ffffff !important;
}

/* 3depth 서브메뉴 */
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul {
  background: rgba(10, 5, 50, 0.35) !important;
  padding: 0 12px !important;
}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li {
  background: transparent !important;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li:last-child {
  border: none !important;
}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li:after {
  background: rgba(255, 255, 255, 0.25) !important;
}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li > a span {
  color: rgba(255, 255, 255, 0.62) !important;
  font-family: 'Noto Sans KR', sans-serif !important;
  font-size: 13px !important;
}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li > a:hover span,
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul .depth2_ul .depth3_ul > li > a:focus span {
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 하단 검색창 */
#mobile-menu .modal-dialog .form_wrap {
  background: #2d1b8e !important;
}
#mobile-menu .modal-dialog .form_wrap fieldset > div input {
  font-family: 'Noto Sans KR', sans-serif !important;
}

/* 서브메뉴 기본 닫기 — JS가 .ov 클래스를 a에 붙일 때만 열림 */
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > .item {
  display: none !important;
}
#mobile-menu .modal-dialog .modal-content .modal-body .depth1_ul > li > a.ov + .item {
  display: block !important;
}

/* 작은 화면 — 패널 너비 조정 (왼쪽 여백 44px 유지, 오버플로 방지) */
@media screen and (max-width: 500px) {
  #mobile-menu .modal-dialog {
    margin: 0 0 0 44px !important;
    width: calc(100% - 44px) !important;
    max-width: calc(100% - 44px) !important;
  }
  #mobile-menu .modal-dialog .modal-content {
    padding-left: 24px !important;
    padding-right: 16px !important;
  }
  #mobile-menu .modal-dialog .form_wrap {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
  #mobile-menu .mtop_until .langlist ul {
    padding-right: 24px !important;
  }
}

/* ─────────────────────────────────────────
   반응형 (767px 이하) — 모바일 메뉴
───────────────────────────────────────── */
@media screen and (max-width: 767px) {
  /* 모바일 메뉴 — X(닫기) 버튼 위치 수정 + 패널 높이 축소 */
  #mobile-menu .mobile-close {
    position: fixed !important;
    top: 24px !important;
    right: 20px !important;
  }
  /* MYPAGE 텍스트가 X버튼과 겹치지 않도록 우측 여백 확보 */
  #mobile-menu .mtop_until .langlist ul {
    padding-right: 56px !important;
  }
  /* 드롭다운 패널 — 세로 전체 높이, 왼쪽 여백으로 슬라이드 패널 효과 */
  #mobile-menu {
    padding: 0 !important;
  }
  #mobile-menu .modal-dialog {
    height: 100vh !important;
    margin: 0 0 0 56px !important;
    width: calc(100% - 56px) !important;
    max-width: calc(100% - 56px) !important;
    border-radius: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}