/**
 * ================================================================
 *  여수포털뉴스 — GNB 전역 CSS  v1.0
 *  섹터3 GNB 공통 스타일 (전역 — 모든 페이지 공유)
 *
 *  ■ 규칙: 이 파일은 전역 GNB 클래스 전용
 *           섹터 파일(style.css 등)에 GNB 클래스 포함 금지
 *  ■ 로드: includes/footer.php 또는 header.php에서 include
 * ================================================================
 */

/* ════════════════════════════════════════════════════════════
   섹터3 GNB 스타일
   레이아웃 구조 (layout.css):
     nav.s3-bar = flex 행
       ① .s3-allnews  — 좌측 "[포털명]전체" 버튼 (17개 포털 패널)
       ② .s3-nav      — 우측 GNB (1차 17개 포털 or 2차탭)
   ════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════
   ① [포털명]전체 버튼 — 17개 포털 패널 토글
══════════════════════════════════════════ */
.s3-allnews {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  position: relative;
  z-index: 3100;
}

/* 버튼 본체 */
.s3-allnews-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 100%;
  min-height: 46px;
  background: rgba(0,0,0,.25);
  border: none;
  border-right: 1px solid rgba(255,255,255,.20);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, opacity .15s;
  border-radius: 0;
  flex-shrink: 0;
}
.s3-allnews-btn:hover    { background: var(--primary-dark, #155986); }
.s3-allnews-btn.is-active { background: var(--primary-dark, #155986); }

/* 텍스트 레이블 — 제목 규칙: title-sm 17px */
.s3-an-text {
  font-size: var(--nds-fz-title-sm, 17px);
  font-weight: 700;
  letter-spacing: .2px;
}

/* 화살표 아이콘 */
.s3-an-arrow {
  font-size: 14px;
  opacity: .85;
  transition: transform .2s ease;
  flex-shrink: 0;
}
.s3-allnews-btn.is-active .s3-an-arrow { transform: rotate(180deg); }

/* ══════════════════════════════════════════
   섹터3 포털 선택 (맨 우측)
══════════════════════════════════════════ */
.s3-portal-sel {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  position: relative;
  margin-left: auto;        /* 오른쪽 끝으로 밀기 */
  border-left: 1px solid rgba(255,255,255,.15);
}
.s3-portal-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 100%;
  background: rgba(0,0,0,.20);
  border: none;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.s3-portal-btn:hover,
.s3-portal-btn.open { background: rgba(0,0,0,.35); }
.s3-portal-chevron {
  font-size: 11px;
  opacity: .8;
  transition: transform .2s;
}
.s3-portal-btn.open .s3-portal-chevron { transform: rotate(180deg); }

/* 드롭다운 — 17개 포털 전체 목록 (2열 그리드, 스크롤 없음) */
.s3-portal-drop {
  /* 기본: 숨김 (위치·z-index는 main.js가 fixed로 동적 설정) */
  display: none;
  /* 2열 카드 그리드 */
  width: 380px;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 8px;
  /* 스타일 */
  background: #fff;
  border: 1px solid #dde3ea;
  border-top: 3px solid var(--primary, #24aebe);
  box-shadow: 0 8px 28px rgba(0,0,0,.16);
  border-radius: 0 0 10px 10px;
}
.s3-portal-drop.open {
  display: grid;
}

/* 카드형 포털 아이템 */
.s3-portal-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  font-size: var(--nds-fz-title-xsm, 15px); /* 포털전환 = 제목 */
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
  border-radius: 7px;
  border: 1px solid transparent;
  transition: background .13s, border-color .13s, box-shadow .13s;
  white-space: nowrap;
  overflow: hidden;
}
.s3-portal-item:hover {
  background: #f8faff;
  border-color: #dde3ea;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
}
.s3-portal-item.on {
  background: color-mix(in srgb, var(--pc, var(--primary,#1d6fa4)) 10%, #fff);
  border-color: color-mix(in srgb, var(--pc, var(--primary,#1d6fa4)) 35%, transparent);
  font-weight: 700;
}

/* 아이콘 원형 배지 */
.s3-portal-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 15px;
  flex-shrink: 0;
  transition: transform .13s;
}
.s3-portal-item:hover .s3-portal-icon { transform: scale(1.08); }

/* 포털명 */
.s3-portal-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.2px;
  color: inherit;
  font-size: var(--nds-fz-title-sm, 17px); /* 포털전환 = title-sm */
  font-weight: 600;
}
.s3-portal-item.on .s3-portal-name { color: var(--pc, var(--primary,#1d6fa4)); }

/* 다크모드 */
html[data-theme="dark"] .s3-portal-drop { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .s3-portal-item { color: #e2e8f0; }
html[data-theme="dark"] .s3-portal-item:hover { background: #243044; border-color: #3d4f68; }
html[data-theme="dark"] .s3-portal-item.on { background: #0f3460; border-color: #1e5080; }
html[data-theme="dark"] .s3-portal-item.on .s3-portal-name { color: #7dd3e8; }

/* 모바일: 숨기기 */
@media (max-width: 900px) {
  .s3-portal-sel { display: none; }
}

/* ══════════════════════════════════════════
   ② 전체 포털 드롭다운 패널
══════════════════════════════════════════ */

/* ── 패널 공통 베이스 ── */
.gnb-allnews-panel {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #dde3ea;
  border-top: 3px solid var(--primary, #1d6fa4);
  box-shadow: 0 12px 36px rgba(0,0,0,.16);
  border-radius: 0 0 8px 8px;
  z-index: 3200;
  overflow: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
.gnb-allnews-panel.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── 기본(통합) 패널 폭 ── */
.gnb-allnews-panel.panel-all  { width: 520px; }

/* ── 컨텍스트 패널 폭: 서브메뉴(1) + 포털이동(3) = 1:3 분할 ── */
.gnb-allnews-panel.panel-ctx  { width: 720px; }

/* ── 공통 inner ── */
.gnb-an-inner { padding: 0; }

/* ── 공통 닫기 버튼 ── */
.gnb-an-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  background: transparent;
  border: 1px solid #dde3ea;
  border-radius: 50%;
  cursor: pointer;
  color: #64748b;
  font-size: 13px;
  flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.gnb-an-close:hover { background: #fee2e2; color: #dc2626; border-color: #fca5a5; }


/* ════════════════════════════════════════
   [기본 패널] 통합포털 전체 — 2열 리스트
════════════════════════════════════════ */

/* 헤더 */
.gnb-an-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px 9px;
  border-bottom: 1px solid #eef0f3;
  background: #f6f8fb;
}
.gnb-an-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary, #1d6fa4);
  text-decoration: none;
}
.gnb-an-title i { font-size: 15px; }
.gnb-an-title:hover { color: var(--primary-dark, #155986); text-decoration: underline; }

/* 2열 포털 리스트 */
.gnb-an-portal-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin: 0;
  padding: 10px 12px 14px;
  gap: 2px;
}
.gnb-an-portal-list .gnb-an-item { list-style: none; }
.gnb-an-portal-list .gnb-an-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 500;
  color: #2d3a4a;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.gnb-an-portal-list .gnb-an-link:hover {
  background: color-mix(in srgb, var(--pm-c, var(--primary, #1d6fa4)) 8%, transparent);
  color: var(--pm-c, var(--primary, #1d6fa4));
}
.gnb-an-portal-list .gnb-an-link.an-active {
  background: color-mix(in srgb, var(--pm-c, var(--primary, #1d6fa4)) 12%, transparent);
  color: var(--pm-c, var(--primary, #1d6fa4));
  font-weight: 700;
}
/* 아이콘 원형 */
.gnb-an-pm-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 13px;
  flex-shrink: 0;
  transition: transform .12s;
}
.gnb-an-portal-list .gnb-an-link:hover .gnb-an-pm-icon { transform: scale(1.08); }
/* 포털명 */
.gnb-an-pm-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.2px;
  font-size: var(--nds-fz-title-sm, 17px); /* 드롭다운 제목 = title-sm */
  font-weight: 600;
}
/* 서브메뉴 수 뱃지 */
.gnb-an-pm-count {
  font-size: 11px;
  color: #94a3b8;
  background: #f1f5f9;
  border-radius: 10px;
  padding: 1px 6px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background .12s, color .12s;
}
.gnb-an-portal-list .gnb-an-link:hover .gnb-an-pm-count,
.gnb-an-portal-list .gnb-an-link.an-active .gnb-an-pm-count {
  background: color-mix(in srgb, var(--pm-c, #1d6fa4) 14%, transparent);
  color: var(--pm-c, #1d6fa4);
}
/* 화살표 */
.gnb-an-pm-arrow {
  font-size: 10px;
  color: #cbd5e1;
  flex-shrink: 0;
  transition: color .12s, transform .12s;
}
.gnb-an-portal-list .gnb-an-link:hover .gnb-an-pm-arrow {
  color: var(--pm-c, var(--primary, #1d6fa4));
  transform: translateX(2px);
}

/* 다크모드 — 기본 패널 */
html[data-theme="dark"] .gnb-an-portal-list .gnb-an-link { color: #c9cdd4; }
html[data-theme="dark"] .gnb-an-portal-list .gnb-an-link:hover { background: rgba(255,255,255,.07); color: #fff; }
html[data-theme="dark"] .gnb-an-pm-count { background: rgba(255,255,255,.08); color: #94a3b8; }


/* ════════════════════════════════════════
   [컨텍스트 패널] 현재포털 서브 + 다른포털 이동
   구조: header / body(left | divider | right)
════════════════════════════════════════ */

/* 컨텍스트 헤더 — 포털 색상 강조 */
.gnb-an-header-ctx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  border-bottom: 2px solid color-mix(in srgb, var(--ctx-color, #1d6fa4) 18%, transparent);
  background: color-mix(in srgb, var(--ctx-color, #1d6fa4) 5%, #fff);
}
.gnb-an-header-portal {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* 포털 아이콘 배지 */
.gnb-an-portal-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 9px;
  font-size: 16px;
  flex-shrink: 0;
}
.gnb-an-portal-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gnb-an-portal-name {
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -.3px;
  line-height: 1.2;
  transition: opacity .12s;
}
.gnb-an-portal-name:hover { opacity: .75; }
.gnb-an-portal-desc {
  font-size: 11px;
  color: #94a3b8;
  font-weight: 500;
}

/* 2분할 바디 */
.gnb-an-ctx-body {
  display: flex;
  min-height: 240px;
}

/* 왼쪽: 서브메뉴 영역 — 1:3 중 1 */
.gnb-an-ctx-left {
  flex: 1 1 0;          /* 전체의 1/4 */
  min-width: 120px;
  padding: 12px 4px 14px 14px;
  overflow-y: auto;
  max-height: 420px;
}

/* 오른쪽: 포털이동 영역 — 1:3 중 3 */
.gnb-an-ctx-right {
  flex: 3 1 0;          /* 전체의 3/4 */
  min-width: 0;
  padding: 12px 14px 14px 10px;
  background: #f8fafc;
  overflow-y: auto;
  max-height: 420px;
}

/* 구분선 */
.gnb-an-ctx-divider {
  width: 1px;
  background: #eef0f3;
  flex-shrink: 0;
  margin: 10px 0;
}

/* 섹션 레이블 (두 영역 공통) */
.gnb-an-section-label {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-bottom: 6px;
  padding: 0 4px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.gnb-an-section-label i { font-size: 10px; }

/* ── 왼쪽 서브메뉴 리스트 ── */
.gnb-an-ctx-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.gnb-an-ctx-list .gnb-an-item { list-style: none; }
.gnb-an-ctx-list .gnb-an-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: var(--nds-fz-title-sm, 17px); /* 세부메뉴 = 제목(title-sm) */
  font-weight: 500;
  color: #334155;
  text-decoration: none;
  transition: background .12s, color .12s, padding-left .12s;
  position: relative;
}
.gnb-an-ctx-list .gnb-an-link:hover {
  background: color-mix(in srgb, var(--ctx-c, var(--primary, #1d6fa4)) 9%, transparent);
  color: var(--ctx-c, var(--primary, #1d6fa4));
  padding-left: 14px;
}
.gnb-an-ctx-list .gnb-an-link.an-active {
  background: color-mix(in srgb, var(--ctx-c, var(--primary, #1d6fa4)) 13%, transparent);
  color: var(--ctx-c, var(--primary, #1d6fa4));
  font-weight: 700;
  padding-left: 14px;
  border-left: 3px solid var(--ctx-c, var(--primary, #1d6fa4));
}
/* 활성 캐럿 */
.gnb-an-caret {
  font-size: 11px;
  flex-shrink: 0;
}
/* 빈 목록 */
.gnb-an-empty {
  font-size: 13px;
  color: #94a3b8;
  padding: 12px 8px;
  margin: 0;
}

/* ── 오른쪽 포털이동 그리드 ── */
.gnb-an-ctx-right .gnb-an-switch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);  /* 우측 2/3 공간에 4열 배치 */
  gap: 6px;
}
.gnb-an-switch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px 9px;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: background .12s, border-color .12s;
  text-align: center;
  overflow: hidden;
}
.gnb-an-switch-item:hover {
  background: #eef2f7;
  border-color: #dde3ea;
}
/* 포털 아이콘 원형 — 왼쪽 서브메뉴와 동급 크기 */
.gnb-an-switch-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 16px;
  flex-shrink: 0;
  transition: transform .12s;
}
.gnb-an-switch-item:hover .gnb-an-switch-icon { transform: scale(1.08); }
/* 포털명 — 제목 규칙 */
.gnb-an-switch-name {
  font-size: var(--nds-fz-title-sm, 17px); /* 포털이동 = 제목(title-sm) */
  color: #374151;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: keep-all;
  width: 100%;
  max-width: 92px;  /* 17px 폰트에 맞게 확장 */
  line-height: 1.3;
  text-align: center;
}
.gnb-an-switch-item:hover .gnb-an-switch-name { color: #1e293b; }

/* 다크모드 — 컨텍스트 패널 */
html[data-theme="dark"] .gnb-an-header-ctx {
  background: color-mix(in srgb, var(--ctx-color, #1d6fa4) 12%, #1e293b);
  border-color: color-mix(in srgb, var(--ctx-color, #1d6fa4) 30%, transparent);
}
html[data-theme="dark"] .gnb-an-portal-desc { color: #64748b; }
html[data-theme="dark"] .gnb-an-ctx-right { background: #1a2436; }
html[data-theme="dark"] .gnb-an-ctx-divider { background: #334155; }
html[data-theme="dark"] .gnb-an-ctx-list .gnb-an-link { color: #c9cdd4; }
html[data-theme="dark"] .gnb-an-ctx-list .gnb-an-link:hover { background: rgba(255,255,255,.07); color: #fff; }
html[data-theme="dark"] .gnb-an-ctx-list .gnb-an-link.an-active { background: rgba(255,255,255,.08); }
html[data-theme="dark"] .gnb-an-switch-item:hover { background: rgba(255,255,255,.07); }
html[data-theme="dark"] .gnb-an-switch-name { color: #94a3b8; }
html[data-theme="dark"] .gnb-an-switch-item:hover .gnb-an-switch-name { color: #e2e8f0; }
html[data-theme="dark"] .gnb-an-section-label { color: #64748b; }

/* ══════════════════════════════════════════
   ③ s3-nav 우측 GNB 영역
══════════════════════════════════════════ */
.gnb-list {
  display: flex;
  align-items: stretch;
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── [A] 기본 GNB (1차 메뉴, 균등 배분, 텍스트 중심) ── */
.gnb-list.gnb-default .gnb-item {
  flex: 1 1 0;          /* 콘텐츠 크기 무시하고 균등 분배 */
  position: relative;
  min-width: 56px;      /* 최소 너비 보장 — 글자 잘림 방지 */
  text-align: center;   /* 아이템 내 텍스트 중앙 정렬 */
}
/* ── [A-2] 메뉴 수가 많을 때(gnb-overflow 클래스): 가로 스크롤 ── */
.gnb-list.gnb-default.gnb-overflow {
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
}
.gnb-list.gnb-default.gnb-overflow::-webkit-scrollbar { display: none; }
.gnb-list.gnb-default.gnb-overflow .gnb-item {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 70px;
}

/* ── [B] 컨텍스트 탭 스크롤 래퍼 (overflow-x만 담당) ── */
.gnb-ctx-scroll-wrap {
  display: flex;
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;          /* 탭이 넘칠 때만 스크롤 */
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
  position: relative;
  width: 100%;               /* 전체 너비 확보 */
}
.gnb-ctx-scroll-wrap::-webkit-scrollbar { display: none; }

/* gnb-ctx ul — 래퍼 너비 100% 채우기 */
.gnb-ctx-scroll-wrap > .gnb-list.gnb-ctx {
  width: 100%;
  min-width: 100%;           /* 줄어들지 않게 — 균등 배분 보장 */
}

/* ── [B] 컨텍스트 탭 ul — 스크롤 없이 overflow:visible 유지 ── */
.gnb-list.gnb-ctx {
  overflow: visible;         /* ← 드롭다운이 ul 밖으로 나올 수 있게 */
  flex-wrap: nowrap;
  position: relative;
  width: 100%;               /* 래퍼 전체 너비 채움 */
}
.gnb-list.gnb-ctx .gnb-item {
  flex: 1 1 0;               /* ← 균등 배분 (gnb-default와 동일) */
  position: relative;
  white-space: nowrap;
  text-align: center;
  min-width: 0;              /* flex 축소 허용 */
}

/* 좌우 스크롤 힌트 그라데이션 — 래퍼(div)에 적용 */
.gnb-ctx-scroll-wrap {
  position: relative; /* ::before/after 기준 */
}
.gnb-list.gnb-ctx.can-scroll-left  ~ .gnb-ctx-scroll-wrap::before,
.gnb-ctx-scroll-wrap:has(.gnb-list.gnb-ctx.can-scroll-left)::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(to right, var(--gnb-bg, #24aebe), transparent);
  pointer-events: none;
  z-index: 1;
}
.gnb-ctx-scroll-wrap:has(.gnb-list.gnb-ctx.can-scroll-right)::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 40px;
  background: linear-gradient(to left, var(--gnb-bg, #24aebe), transparent);
  pointer-events: none;
  z-index: 1;
}

/* ── gnb-link 공통 ── */
.gnb-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 100%;
  padding: 0 11px;
  font-size: var(--nds-fz-title-sm, 17px); /* GNB 탭 공통: title-sm 17px */
  font-weight: 600;
  color: rgba(255,255,255,.85);
  white-space: nowrap;
  transition: background .13s, color .13s;
  position: relative;
  text-decoration: none;
}
.gnb-link:hover {
  background: rgba(255,255,255,.12);
  color: #fff;
}
.gnb-link.active,
.gnb-item.is-active > .gnb-link {
  color: #fff;
  background: rgba(255,255,255,.15);
}

/* 기본 GNB — 1차 17개 포털, 텍스트 수평 배치 */
.gnb-list.gnb-default {
  overflow-x: auto;
  scrollbar-width: none;
  flex-wrap: nowrap;
}
.gnb-list.gnb-default::-webkit-scrollbar { display: none; }
.gnb-list.gnb-default .gnb-link {
  flex-direction: row;
  padding: 0 6px;       /* 좌우 패딩 줄여 17개 균등 수용 */
  font-size: 13px;      /* 1차 통합홈: 17개 탭 수용 위해 예외 유지 */
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-content: center;
}

/* 활성 탭 하단 바 */
.gnb-list.gnb-ctx .gnb-item.is-active > .gnb-link::after,
.gnb-list.gnb-default .gnb-item.is-active > .gnb-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10px; right: 10px;
  height: 3px;
  background: rgba(255,255,255,.95);
  border-radius: 2px 2px 0 0;
}

/* chevron */
.gnb-chevron {
  font-size: 14px;
  transition: transform .18s;
  margin-left: 2px;
  opacity: .7;
}
.gnb-item:hover .gnb-chevron,
.gnb-item.mob-open .gnb-chevron { transform: rotate(180deg); }

/* 즐겨찾기 별 */
.gnb-star { font-size: 14px; color: #ffd700; margin-left: 2px; vertical-align: middle; }

/* ════════════════════════════════════════════════════════════════
   GNB 드롭다운 — 폴더 개념 인터랙션 규칙
   ----------------------------------------------------------------
   [gnb-default / 1차 17개 포털탭]
     · hover  → 서브 미리보기 드롭다운 (풍선 툴팁형, 참고용)
     · click  → 해당 포털 페이지 이동 (다른 폴더 = 이동)
   [gnb-ctx / 2차 카테고리 탭]
     · hover  → 3차 서브드롭다운 표시 (동일 폴더 안)
     · click  → 해당 카테고리 목록 이동
   ================================================================ */

/* ── 드롭다운 기본 (숨김 상태) ── */
.gnb-dropdown {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 160px;
  background: var(--gnb-dropdown-bg, #fff);
  border: 1px solid #dde3ea;
  border-top: 3px solid var(--primary, #24aebe);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  z-index: 9999;
  padding: 4px 0;
  list-style: none;
  margin: 0;
  border-radius: 0 0 8px 8px;
  columns: 1;
  column-gap: 0;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
/* 6개 초과 시 2열 */
.gnb-dropdown:has(li:nth-child(7)) {
  columns: 2;
  min-width: 280px;
  column-gap: 0;
  column-rule: 1px solid #f1f5f9;
}
/* 마지막 2개 아이템 — 오른쪽 정렬 (화면 밖 방지) */
.gnb-item:last-child .gnb-dropdown,
.gnb-item:nth-last-child(2) .gnb-dropdown {
  left: auto; right: 0;
  transform: translateY(-6px);
}

/* ── JS가 제어하는 드롭다운 표시 상태 (drop-open 클래스) ── */
/* gnb-default: hover 미리보기 — "풍선 툴팁" 스타일 적용 */
.gnb-list.gnb-default .gnb-item.drop-open > .gnb-dropdown,
/* gnb-ctx: hover 서브드롭다운 — 동일폴더 참고형 */
.gnb-list.gnb-ctx .gnb-item.drop-open > .gnb-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}
.gnb-item:last-child.drop-open > .gnb-dropdown,
.gnb-item:nth-last-child(2).drop-open > .gnb-dropdown {
  transform: translateY(0);
}

/* gnb-default 드롭다운 — 풍선 툴팁 강조 스타일 */
.gnb-list.gnb-default .gnb-dropdown {
  border-top-width: 2px;
  border-top-style: dashed; /* 참고용 = 점선 상단으로 구분 */
  border-top-color: var(--primary, #24aebe);
  background: #f8faff;
}
.gnb-list.gnb-default .gnb-dropdown::before {
  content: '미리보기';
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 4px 16px 2px;
  border-bottom: 1px solid #eef0f3;
  margin-bottom: 2px;
}

/* gnb-ctx 드롭다운 — 동일폴더 서브 표준 스타일 */
.gnb-list.gnb-ctx .gnb-dropdown {
  border-top-width: 3px;
  border-top-style: solid;
  background: #fff;
}

/* JS-clone 드롭다운 (body에 마운트된 클론) */
.gnb-dropdown-clone {
  position: fixed;
  z-index: 99999;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  transition: none !important;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #dde3ea;
  border-top: 3px solid var(--primary, #24aebe);
  box-shadow: 0 8px 28px rgba(0,0,0,.18);
  border-radius: 0 0 8px 8px;
  min-width: 160px;
}
/* clone이 gnb-default 계열일 때 풍선 스타일 */
.gnb-dropdown-clone.from-default {
  border-top-width: 2px;
  border-top-style: dashed;
  background: #f8faff;
}
.gnb-dropdown-clone.from-default::before {
  content: '미리보기';
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 4px 16px 2px;
  border-bottom: 1px solid #eef0f3;
  margin-bottom: 2px;
}

/* ── 데스크탑 전용 z-index 스태킹 ── */
@media (min-width: 901px) {
  .gnb-list.gnb-default .gnb-item:hover,
  .gnb-list.gnb-ctx .gnb-item:hover,
  .gnb-list.gnb-default .gnb-item.drop-open,
  .gnb-list.gnb-ctx .gnb-item.drop-open {
    z-index: 10000;
  }
  /* gnb-ctx: ul 자체는 overflow:visible, 스크롤은 래퍼(div)가 담당 */
  .gnb-list.gnb-ctx {
    overflow: visible !important;
  }
  .gnb-ctx-scroll-wrap {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
}

/* 모바일 탭 열기 (mob-open은 JS 클릭으로만 부여) */
.gnb-item.mob-open > .gnb-dropdown {
  visibility: visible;
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}

.gnb-sub-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: var(--nds-fz-title-sm, 17px); /* 드롭다운 = 제목 규칙: title-sm 17px */
  color: #2d3a4a;
  border-bottom: 1px solid #f1f5f9;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-left-color .12s;
  text-decoration: none;
  white-space: nowrap;
  break-inside: avoid; /* 다단 분리 방지 */
}
.gnb-sub-link:last-child { border-bottom: none; }
.gnb-sub-link:hover,
.gnb-sub-link.sub-active {
  background: var(--primary-light, #e8f0fa);
  color: var(--primary, #1d6fa4);
  border-left-color: var(--primary, #1d6fa4);
}
.gnb-sub-link.sub-active { font-weight: 700; }

/* ══════════════════════════════════════════
   ④ 컨텍스트 모드 섹션 레이블 — 사용 안 함 (HTML에서 제거됨)
══════════════════════════════════════════ */
/* .s3-ctx-head, .s3-ctx-label — 삭제됨 (v3 개편) */

/* ══════════════════════════════════════════
   ⑤ 모바일 햄버거 버튼
══════════════════════════════════════════ */
.gnb-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  border-radius: 6px;
  margin-left: auto;
  transition: background .13s;
}
.gnb-hamburger:hover { background: rgba(255,255,255,.12); }
.gnb-hamburger span {
  display: block;
  width: 20px; height: 2px;
  background: rgba(255,255,255,.88);
  border-radius: 2px;
  transition: transform .22s, opacity .22s;
}
.gnb-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gnb-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.gnb-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════
   ⑥ 모바일 반응형 (≤ 900px)
══════════════════════════════════════════ */
@media (max-width: 900px) {

  /* [포털명]전체 버튼: 텍스트 표시 유지 (작게) */
  .s3-allnews-btn {
    padding: 0 12px;
    font-size: 14px;
  }
  .s3-an-text { font-size: var(--nds-fz-title-sm, 17px); } /* 제목 규칙 = title-sm */

  /* 드롭다운 패널: 전체 너비 */
  .s3-allnews { position: static; }
  .gnb-allnews-panel {
    position: fixed;
    left: 0; right: 0;
    width: 100% !important;
    min-width: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  /* 모바일: 기본 패널 2열 → 1열 */
  .gnb-an-portal-list { grid-template-columns: 1fr; }
  /* 모바일: 컨텍스트 패널 — 세로 스택 */
  .gnb-an-ctx-body { flex-direction: column; }
  .gnb-an-ctx-right {
    width: 100%;
    background: #f1f5f9;
    border-top: 1px solid #e2e8f0;
    padding: 10px 14px 14px;
  }
  .gnb-an-ctx-divider { display: none; }
  .gnb-an-ctx-right .gnb-an-switch-grid { grid-template-columns: repeat(4, 1fr); }
  .gnb-an-ctx-left { max-height: none; padding: 10px 14px; }

  /* 햄버거 표시 */
  .gnb-hamburger { display: flex; }

  /* ─────────────────────────────────────────────────────────
     기본 GNB 아코디언:
     · sector-wrap/s3-bar 가 overflow:hidden 이므로
       position:fixed 로 뷰포트 기준에 붙여 잘림 방지
     ───────────────────────────────────────────────────────── */
  .gnb-list.gnb-default {
    /* 기본: 숨김 */
    display: none;
    /* 열렸을 때 fixed 레이어로 뷰포트에 붙음 */
    position: fixed;
    left: 0;
    right: 0;
    /* top은 JS에서 s3-bar 높이만큼 동적으로 설정 (없으면 44px fallback) */
    top: var(--gnb-bar-bottom, 44px);
    z-index: 1500;
    flex-direction: column;
    width: 100%;
    max-height: calc(100vh - var(--gnb-bar-bottom, 44px));
    overflow-y: auto;
    background: var(--s3-bg, #1e293b);
    border-top: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    -webkit-overflow-scrolling: touch;
  }
  .gnb-list.gnb-default.open,
  .gnb-list.gnb-default.mobile-open { display: flex; }
  .gnb-list.gnb-default .gnb-item {
    flex: none;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .gnb-list.gnb-default .gnb-link {
    justify-content: flex-start;
    padding: 13px 18px;
    font-size: 16px; /* 원칙3: 15px→16px */
  }
  .gnb-list.gnb-default .gnb-item.is-active > .gnb-link::after { display: none; }

  /* 드롭다운 → 인라인 아코디언 */
  .gnb-dropdown {
    position: static;
    transform: none;
    box-shadow: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    border-left: 3px solid rgba(255,255,255,.30);
    border-radius: 0;
    background: rgba(0,0,0,.18);
    margin-left: 20px;
    /* ★ 수정: 다단(columns) 해제 → 세로 아코디언 단일 컬럼으로 표시 */
    columns: 1 !important;
    column-gap: 0;
    min-width: 0;
  }
  .gnb-sub-link { color: rgba(255,255,255,.80); border-bottom-color: rgba(255,255,255,.07); }
  .gnb-sub-link:hover, .gnb-sub-link.sub-active { background: rgba(255,255,255,.10); color: #fff; }
  .gnb-item:hover .gnb-dropdown { display: none; }
  .gnb-item.mob-open .gnb-dropdown { display: block; }

  /* 컨텍스트 탭: 가로 스크롤 */
  .gnb-ctx-scroll-wrap { overflow-x: auto; }
  .gnb-list.gnb-ctx { overflow: visible; flex-wrap: nowrap; }
  .gnb-list.gnb-ctx .gnb-link { padding: 10px 10px; font-size: var(--nds-fz-title-sm, 17px); } /* 2차 메뉴 제목 규칙 = title-sm */
}