/**
 * 여수포털뉴스 – 레이아웃 CSS  v10
 *
 * ╔══════════════════════════════════════════════════════════════════════╗
 * ║  레이아웃 원칙                                                        ║
 * ║                                                                      ║
 * ║  ┌──────────────────────── 100vw (모니터 전체) ───────────────────┐  ║
 * ║  │  .sector-wrap.sN  ← 배경색이 모니터 가로 전체를 채움          │  ║
 * ║  │  ┌─────────────── max-width:1200px, margin:0 auto ──────────┐  │  ║
 * ║  │  │  .sector-main  ← 실제 콘텐츠 영역 (1200px 중앙정렬)     │  │  ║
 * ║  │  │  ┌─ .sector-inner ─ 3열 그리드 ────────────────────────┐ │  │  ║
 * ║  │  │  │  .sector-left │ .sector-center │ .sector-right       │ │  │  ║
 * ║  │  │  └─────────────────────────────────────────────────────┘ │  │  ║
 * ║  │  └──────────────────────────────────────────────────────────┘  │  ║
 * ║  └────────────────────────────────────────────────────────────────┘  ║
 * ╚══════════════════════════════════════════════════════════════════════╝
 *
 * - sector-wrap : 100vw 전체 → 배경색이 좌우 끝까지 채워짐
 * - sector-main : max-width 1200px, margin 0 auto → 콘텐츠 중앙 1200px
 * - sector-inner: 3열 그리드 (좌/중/우)
 * - 이미지/배너  : 부모 너비 기준 자동 조절 (width:100%, max-width:none)
 * - CSS 변수     : PHP echoLayoutVars()가 :root{}로 주입
 */

/* ══════════════════════════════════════════════════
   CSS 변수 폴백 (PHP 미주입 시 사용)
══════════════════════════════════════════════════ */
:root {
  /* 메인 콘텐츠 너비 */
  --dw:  1200px;    /* desktop_width */
  --lw:  0px;       /* left_sector_width (기본 0 = 1행1열 원칙) */
  --rw:  0px;       /* right_sector_width (기본 0 = 1행1열 원칙) */
  --cw:  1200px;    /* center = dw (lw/rw 모두 0이므로 전체폭) */
  /* 페이지 배경 */
  --page-bg: #f5f5f5;
  --page-text-color: #333333;
  /* 섹터 배경색 (LAYER: sector-wrap 전체폭 배경) */
  /* 섹터 기본 배경: 모두 백색 (DB 미설정 시 폴백) */
  --s1-bg: #ffffff;
  --s2-bg: #ffffff;
  --s3-bg: #ffffff;
  --s4-bg: #ffffff;
  --s5-bg: #ffffff;
  --s6-bg: #ffffff;
  --s7-bg: #ffffff;
  --s8-bg: #ffffff;
  --s9-bg: #ffffff;
  --s10-bg: #ffffff;   /* 푸터 상단 */
  --s11-bg: #ffffff;   /* 푸터 하단 */
  --s12-bg: #ffffff;   /* 카피라이트 바 */
  --s13-bg: transparent; /* 좌측 윙 패널 */
  --s14-bg: transparent; /* 우측 윙 패널 */
}

/* ══════════════════════════════════════════════════
   기본 초기화
══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html {
  overflow-x: hidden;   /* 전역 가로 스크롤 차단 */
}
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  max-width: 100%;
  background: var(--page-bg, #f5f5f5);
  color: var(--page-text-color, #333333);
}
body {
  overflow-x: hidden;   /* 모바일 가로 스크롤 차단 */
}

/* ══════════════════════════════════════════════════
   site-canvas : 하위 호환용 (이미지 크기 자동 조절)
   ▸ 배경/너비 제한 제거 → 투명 전체폭 래퍼로만 사용
══════════════════════════════════════════════════ */
.site-canvas {
  width: 100%;
  max-width: none;     /* ← 1500px 제한 완전 제거 */
  margin: 0;
  background: transparent;
  position: relative;
  min-height: 100vh;
}

/* ══════════════════════════════════════════════════
   [A] 섹터 래퍼 – 모니터 전체 너비 100%
   ▸ 배경색이 좌우 끝까지 채워짐
   ▸ 모든 섹터에 동일 적용 (배너 포함)
══════════════════════════════════════════════════ */
.sector-wrap {
  width: 100%;           /* 모니터 전체 너비 */
  position: relative;    /* 윙 absolute 기준 */
  box-sizing: border-box;
  overflow: visible;
  z-index: 1;            /* 기본값 – 섹터3에서 덮어씀 */
}
/* 섹터2는 드롭다운이 섹터3 위로 나와야 하므로 s3보다 높게 */
.sector-wrap.s2 { z-index: 300; position: relative; overflow: visible; }
/* 섹터3(GNB)은 드롭다운이 아래 섹터를 덮어야 하므로 높은 z-index */
.sector-wrap.s3 { z-index: 200; }

/* 섹터별 배경색 (변수값이 전체 너비를 채움) */
/* 섹터 배경 – 폴백 모두 #ffffff (DB 미설정 시 백색) */
.sector-wrap.s1  { background: var(--s1-bg,  #ffffff); }
.sector-wrap.s2  { background: var(--s2-bg,  #ffffff); }
.sector-wrap.s3  { background: var(--s3-bg,  #ffffff); }
.sector-wrap.s4  { background: var(--s4-bg,  #ffffff); }
.sector-wrap.s5  { background: var(--s5-bg,  #ffffff); }
.sector-wrap.s6  { background: var(--s6-bg,  #ffffff); }
.sector-wrap.s7  { background: var(--s7-bg,  #ffffff); }
.sector-wrap.s8  { background: var(--s8-bg,  #ffffff); }
.sector-wrap.s9  { background: var(--s9-bg,  #ffffff); }
.sector-wrap.s10 { background: var(--s10-bg, #ffffff); }
.sector-wrap.s11 { background: var(--s11-bg, #ffffff); }
.sector-wrap.s12 { background: var(--s12-bg, #ffffff); }

/* ══════════════════════════════════════════════════
   [B] 섹터 메인 – 1200px 중앙정렬 (콘텐츠 영역)
   ▸ 모든 섹터에서 동일하게 1200px 중앙
   ▸ 배너 섹터도 동일 → 배너 내용이 1200px 중앙에 위치
══════════════════════════════════════════════════ */
.sector-main {
  width: 100%;
  max-width: var(--dw, 1200px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════
   [C] 섹터 내 3열 그리드
   좌섹터(--lw) | 중앙(--cw) | 우섹터(--rw)
══════════════════════════════════════════════════ */
.sector-inner {
  width: 100%;
  display: block;   /* ★ 기본 1행1열 — 섹터 내 좌측정렬 */
  /* 3열 그리드는 개별 섹터에서 필요시 오버라이드 */
}

.sector-left   { display: none; }          /* 기본 숨김: 1행1열 원칙 */
.sector-center { width: 100%; min-width: 0; } /* 기본 전체폭 */
.sector-right  { display: none; }          /* 기본 숨김: 1행1열 원칙 */
.sector-full   { width: 100%; }             /* 항상 전체폭 */

/* 공통 이미지 자동 크기 조절 */
.sector img,
.sector-inner img {
  max-width: 100%;
  height: auto;
  display: block;
}
/* 섹터2 전용 이미지: .sector-inner img height:auto 덮어쓰기 방지 */
.sector-inner .s2-common-img { height: 48px !important; width: auto !important; max-width: 180px !important; }
.sector-inner .s2-portal-img { height: 48px !important; width: auto !important; max-width: 180px !important; }
.sector-inner .s2-home-img   { height: 40px !important; width: auto !important; max-width: 160px !important; }

/* ══════════════════════════════════════════════════
   [D] 윙 패널 – 1200px 기준 좌우 고정 스크롤 배너
   · position:fixed → 뷰포트 기준 항상 화면에 고정
   · 1200px(--dw) 중앙 콘텐츠 블록 바깥 좌/우에 배치
   · 스크롤해도 항상 화면에 붙어 있음
   · --wing-top: 상단 오프셋(헤더 높이 + DB 설정값, JS로 동적 계산)
   · --wing-left-margin / --wing-right-margin: 내용 측면 여백
══════════════════════════════════════════════════ */
:root {
  --wing-top: 0px;            /* JS로 동적 계산 */
  --wing-left-margin: 0px;    /* 좌 패널 내부 여백 */
  --wing-right-margin: 0px;   /* 우 패널 내부 여백 */
}

/* ══════════════════════════════════════════════════
   섹터 공통
══════════════════════════════════════════════════ */
.sector {
  width: 100%;
}

/* ══════════════════════════════════════════════════
   섹터 1 – 최상단 배너
   ▸ sector-wrap 전체 배경, sector-main 안에 배너
══════════════════════════════════════════════════ */
.s1 .sector-inner {
  align-items: stretch;
  padding: 0;
}
.s1 .sector-left,
.s1 .sector-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: rgba(255,255,255,.5);
  font-size: 11px;
}
.s1 .sector-center,
.s1 .sector-full {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
}
/* s1/s4/s6 배너 섹터 sector-main 전체폭: layout.php 에서 동적으로 max-width:100% 주입
   여기서는 정적 기본값만 정의 (layout.php 의 !important 가 덮어씀) */
.s1 .sector-main {
  padding: 0;
}
/* .top-banner-ad 는 header.php에서 widget-ad-banner 클래스로 대체됨 (레거시 유지) */
.top-banner-ad {
  width: 100%;
  max-width: 100%;    /* 전체폭 확보 — 섹터 배경 노출 방지 */
  background: transparent;
  border: 1px dashed rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.4);
  font-size: 12px;
  box-sizing: border-box;
}

/* ══════════════════════════════════════════════════
   섹터 2 – 로고 & 유틸바
   구조: sector-wrap.s2 > sector-main > sector.s2 >
         sector-inner(display:block) > sector-full.s2-bar >
         .s2-item × N  (9요소 가로 flex)
══════════════════════════════════════════════════ */
.s2 .sector-inner {
  display: block !important;  /* 3열 그리드 해제 → s2-bar flex에 위임 */
  padding: 0;
}
.s2 .sector-full {
  padding: 0 !important;
  width: 100%;
}
/* s2 좌우 컬럼은 사용 안 함 — 혹시 렌더링돼도 숨김 */
.s2 .sector-left,
.s2 .sector-right {
  display: none;
}

/* ══════════════════════════════════════════════════
   섹터 3 – 메뉴바 (GNB)  ―  연합뉴스형 레이아웃
   구조: sector-wrap.s3 > sector-main > sector.s3 >
         sector-inner > sector-full > nav.s3-bar
         s3-bar = flex 행:
           ① .s3-allnews  — 좌측 고정 "전체뉴스" 버튼
           ② .s3-nav      — 우측 가변 GNB (1차 or 2차 탭)
══════════════════════════════════════════════════ */

/* sector-inner: 그리드 → 단일 flex 행 override */
.s3 .sector-inner {
  display: flex !important;
  grid-template-columns: none !important;
  align-items: stretch;
  position: relative;
  padding: 0;
  min-height: 46px;
  overflow: visible;   /* 드롭다운 패널 잘리지 않도록 */
}

/* sector-full: 1200px 전체 너비 사용 */
.s3 .sector-full {
  display: flex;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  overflow: visible;
}

/* ── nav.s3-bar: 전체 메뉴바 행 ── */
.s3-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 46px;
  position: relative;
  overflow: visible;
}

/* ── s3-nav: 우측 가변 영역 (전체뉴스 버튼 제외) ── */
.s3-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-width: 0;
  overflow: visible;
  position: relative;   /* 드롭다운 기준 */
}

/* ── 모바일 (≤900px) ── */
@media (max-width: 900px) {
  /* S3 섹터 전체: 가로 넘침만 차단 (세로는 열어둠 — 아코디언 메뉴 펼침 허용) */
  .sector-wrap.s3 {
    overflow-x: hidden;
    overflow-y: visible;        /* 아코디언이 아래로 펼쳐질 수 있어야 함 */
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
    z-index: 200;
  }
  .s3 .sector-main,
  .s3 .sector-inner,
  .s3 .sector-full {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
    overflow-y: visible;        /* 세로 펼침 허용 */
  }
  .s3 .sector-inner {
    flex-direction: column;
    min-height: auto;
  }
  .s3-bar {
    flex-direction: row;
    flex-wrap: nowrap;          /* 상단 바는 한 줄 유지 */
    align-items: center;
    min-height: 44px;
    height: 44px;
    width: 100% !important;
    overflow-x: hidden;
    overflow-y: visible;        /* 아코디언이 s3-bar 아래로 나올 수 있어야 함 */
    box-sizing: border-box !important;
    padding: 0 8px;
    position: relative;
  }
  /* 전체뉴스 버튼 */
  .s3-allnews {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* s3-nav: 남은 공간 차지, 아코디언 펼침 허용 */
  .s3-nav {
    flex: 1 1 0;
    min-width: 0;
    overflow: visible;          /* 아코디언 메뉴 잘리지 않도록 */
    display: flex;
    align-items: center;
  }
  /* 컨텍스트 탭: 가로 스크롤 (탭 메뉴 항목 많을 때 대비) */
  .s3-nav .gnb-list.gnb-ctx {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    scrollbar-width: none;      /* Firefox */
  }
  .s3-nav .gnb-list.gnb-ctx::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
}

/* ══════════════════════════════════════════════════
   섹터 4 – 서브 배너
══════════════════════════════════════════════════ */
.s4 .sector-inner {
  align-items: stretch;
  padding: 0;
}
.s4 .sector-left,
.s4 .sector-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.s4 .sector-center,
.s4 .sector-full {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mid-banner-ad {
  width: 100%;
  /* min-height: 배너 설정 image_height 기반 동적 주입, 하드코딩 제거 */
  background: transparent;
  border: 1px dashed rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 12px;
}
.side-ad-box {
  width: 100%;
  /* min-height: 배너 설정 image_height 기반 동적 주입, 하드코딩 제거 */
  background: transparent;   /* 기본 배너 투명 */
  border: none;              /* 테두리 제거 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;        /* 텍스트 숨김 */
  font-size: 11px;
  border-radius: 0;
  pointer-events: none;
  overflow: hidden;
}

/* ══════════════════════════════════════════════════
   섹터 5 – 브레드크럼 (탐색계층경로)
   · 신버전: 1행 1열 전용 (구버전 3열 그리드 제거)
   · 섹터7이 본문 역할 담당 → S5는 브레드크럼 전용
   · 원칙3: 모든 font-size 14px 이상 준수
══════════════════════════════════════════════════ */
.s5 .sector-inner {
  display: block;              /* 1행 1열 – 구버전 grid 제거 */
  width: 100%;
  padding: 0;
}
.s5 .sector-left,
.s5 .sector-right {
  display: none;               /* 좌우 열 불필요 → 숨김 */
}
.s5 .sector-center,
.s5 .sector-full {
  min-width: 0;
  padding: 0 !important;
  box-sizing: border-box;
}
/* sector-main: --dw CSS 변수로 동적 너비 */
.s5.sector-wrap > .sector-main,
.wrap-s5 > .sector-main {
  max-width: var(--dw, 1200px) !important;
  width: 100%;
  box-sizing: border-box;
}

/* ── S5 브레드크럼 컴포넌트 ─────────────────────── */
.s5-breadcrumb {
  width: 100%;
  padding: 6px 0;
}
.s5-bc-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;           /* 원칙3: 최솟값 14px */
  color: var(--s5-text, #6b7280);
  line-height: 1.5;
}
.s5-bc-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;           /* 원칙3 */
}
.s5-bc-arrow {
  font-size: 14px;           /* 원칙3: 아이콘도 14px */
  color: #cbd5e1;
  flex-shrink: 0;
}
.s5-bc-link {
  font-size: 14px;           /* 원칙3 */
  color: var(--s5-text, #6b7280);
  text-decoration: none;
  transition: color .15s;
}
.s5-bc-link:hover {
  color: var(--portal-primary, #c0392b);
}
.s5-bc-now {
  font-size: 14px;           /* 원칙3 */
  color: var(--s5-text-active, #374151);
  font-weight: 500;
}
.s5-bc-current .s5-bc-now {
  font-weight: 600;
}

/* ── S6 타이틀 컴포넌트 ──────────────────────────── */
.s6-title-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0 10px;
}

/* ── S6 서브탭 네비게이션 (뉴스 리스트 페이지에서 주입) ── */
.nl-s6-subnav {
  width: 100%;
  margin-top: 0;
  border-top: 2px solid #111;
  overflow-x: auto;
  scrollbar-width: none;
}
.nl-s6-subnav::-webkit-scrollbar { display: none; }
.s6-title-icon {
  font-size: 22px;
  color: var(--portal-primary, #c0392b);
  flex-shrink: 0;
}
.s6-title {
  font-size: 22px;           /* 페이지 제목 */
  font-weight: 700;
  color: var(--s6-text, #1f2328);
  margin: 0;
  line-height: 1.3;
  letter-spacing: -0.5px;
}
.s6-subtitle {
  font-size: 15px;           /* 부제목: 14px 이상 */
  color: var(--s6-sub-text, #6b7280);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* 다크 테마 대응 */
[data-theme="dark"] .s5-bc-list,
[data-theme="dark"] .s5-bc-item { color: #9ca3af; }
[data-theme="dark"] .s5-bc-link { color: #9ca3af; }
[data-theme="dark"] .s5-bc-now  { color: #e5e7eb; }
[data-theme="dark"] .s6-title   { color: #f3f4f6; }
[data-theme="dark"] .s6-subtitle { color: #9ca3af; }

/* 반응형 */
@media (max-width: 600px) {
  .s5-bc-list  { font-size: 14px; }
  .s5-bc-item  { font-size: 14px; }
  .s5-bc-link  { font-size: 14px; }
  .s5-bc-now   { font-size: 14px; }
  .s6-title    { font-size: 18px; }
  .s6-subtitle { font-size: 14px; }
}

/* ══════════════════════════════════════════════════
   섹터 6 – 하단 배너
══════════════════════════════════════════════════ */
.s6 .sector-inner {
  align-items: stretch;
  padding: 0;
  flex-direction: column;  /* s6-title-block + nl-s6-subnav 수직 배치 */
}
.s6 .sector-left,
.s6 .sector-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.s6 .sector-center,
.s6 .sector-full {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bot-banner-ad {
  width: 100%;
  min-height: 70px;
  background: transparent;
  border: 1px dashed rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 12px;
}

/* ══════════════════════════════════════════════════
   섹터 10 – 푸터 상단 (서비스 메뉴 + 지역 포털)
   (구버전 .s7 선택자 묘 유지 → 신버전 .s10 추가)
══════════════════════════════════════════════════ */
.s7 .sector-inner,
.s10 .sector-inner {
  display: block !important;
  padding: 0;
}
.s7 .sector-full,
.s10 .sector-full {
  padding: 28px 0 16px;
}

/* 2단 그리드: 서비스 메뉴 | 지역 포털 */
.ft-top-grid {
  display: grid;
  grid-template-columns: 1fr 360px;   /* 좌: 서비스 메뉴, 우: 지역포털(포털 많을 때 여유폭) */
  gap: 24px 40px;
  margin-bottom: 20px;
  align-items: start;
}

/* 공통 nav 레이블 */
.ft-nav-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,.5);
  margin-bottom: 10px;
}
/* 배경색은 관리자에서 설정 — 기본: 어두운 배경 + 흰색 텍스트 */
/* 밝은배경 하드코딩 제거: DB설정값이 우선 */

/* 서비스 섹션 메뉴 */
.ft-section-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ft-section-list li a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  color: rgba(255,255,255,.65);
  font-size: 12px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.ft-section-list li a:hover {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.ft-section-list li.ft-active a {
  background: rgba(255,255,255,.2);
  color: #fff;
  border-color: rgba(255,255,255,.3);
}
.ft-section-list li a i {
  font-size: 10px;
  opacity: .7;
}

/* 지역 포털 스위처 */
.ft-portal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2열 고정 그리드 */
  gap: 4px 8px;
  max-height: 260px;                /* 최대 높이: 약 10행 */
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.2) transparent;
}
.ft-portal-list::-webkit-scrollbar {
  width: 4px;
}
.ft-portal-list::-webkit-scrollbar-track { background: transparent; }
.ft-portal-list::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.2);
  border-radius: 2px;
}
.ft-portal-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: rgba(255,255,255,.6);
  font-size: 12px;
  text-decoration: none;
  padding: 3px 8px 3px 4px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.ft-portal-item:hover { color: #fff; background: rgba(255,255,255,.15); }
.ft-portal-item.ft-portal-active {
  color: #fff;
  font-weight: 600;
  background: rgba(255,255,255,.18);
  border-color: rgba(255,255,255,.28);
}

/* ── S10/S11: 배경색은 관리자 DB 설정으로만 제어 — 하드코딩 색상 없음 ── */
.ft-portal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--fp-color, #888);
  flex-shrink: 0;
}

/* 구분선 */
.ft-divider {
  border: none;
  border-top: 1px solid rgba(255,255,255,.1);
  margin: 0 0 14px;
}

/* ══════════════════════════════════════════════════
   섹터 11 – 푸터 하단 (회사정보 4단 그리드)
   (구버전 .s8 선택자 묘 유지 → 신버전 .s11 추가)
══════════════════════════════════════════════════ */
.s8 .sector-inner,
.s11 .sector-inner {
  display: block !important;
  padding: 0;
}
.s8 .sector-full,
.s11 .sector-full {
  padding: 32px 0 24px;
}

/* 3단 그리드: 로고+SNS | 회사정보 | 안내 */
.ft-info-grid {
  display: grid;
  grid-template-columns: 2fr 2.5fr 1.2fr;
  gap: 24px 40px;
  align-items: start;
}

/* 컬럼 공통 */
.ft-col {}
.ft-col-title {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: rgba(255,255,255,.45);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.fl-row {
  display: flex;
  gap: 6px;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.5;
}
.fl-row dt {
  color: rgba(255,255,255,.4);
  min-width: 90px;
  flex-shrink: 0;
  font-weight: 500;
}
.fl-row dd {
  color: rgba(255,255,255,.7);
  margin: 0;
}
.fl-row dd a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
}
.fl-row dd a:hover { color: #fff; text-decoration: underline; }

/* ③④ 링크 리스트 */
.ft-link-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ft-link-list li a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255,255,255,.6);
  font-size: 13px;
  text-decoration: none;
  transition: color .2s;
}
.ft-link-list li a:hover { color: #fff; }
.ft-link-list li a i {
  font-size: 12px;
  width: 14px;
  text-align: center;
  opacity: .6;
}
.ft-admin-link {
  opacity: .5;
}
.ft-admin-link:hover { opacity: 1 !important; }

/* ══════════════════════════════════════════════════
   섹터 12 – 카피라이트 바
   (구버전 .s9 선택자 묘 유지 → 신버전 .s12 추가)
══════════════════════════════════════════════════ */
.s9 .sector-inner,
.s12 .sector-inner {
  display: block !important;
  padding: 0;
}
.s9 .sector-full,
.s12 .sector-full {
  padding: 12px 0;
}
.ft-copyright {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 12px;
  font-size: 11px;
  color: rgba(255,255,255,.3);
  text-align: center;
}
.ft-copyright strong { color: rgba(255,255,255,.45); }
.ft-copy-sep {
  color: rgba(255,255,255,.15);
}
.ft-copy-links a {
  color: rgba(255,255,255,.35);
  text-decoration: none;
}
.ft-copy-links a:hover { color: rgba(255,255,255,.7); }
.ft-copy-dot {
  margin: 0 4px;
  color: rgba(255,255,255,.2);
}
/* ── 다크모드 토글 버튼 (섹터11 하단) ──────────── */
.ft-darkmode-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 18px 0 6px;
  border-top: 1px solid rgba(255,255,255,.06);
  margin-top: 20px;
}
.ft-dark-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.6);
  font-size: 13px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  user-select: none;
}
.ft-dark-btn:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
  color: rgba(255,255,255,.9);
}
/* 아이콘/라벨 — 모드에 따라 표시 전환 */
.ft-dark-icon, .ft-dark-label { display: none; }
/* 라이트 모드일 때 */
html:not([data-theme="dark"]) .ft-icon-light,
html:not([data-theme="dark"]) .ft-label-light { display: inline; }
/* 다크 모드일 때 */
html[data-theme="dark"] .ft-icon-dark,
html[data-theme="dark"] .ft-label-dark  { display: inline; }

.hide-mobile-inline { display: inline; }

/* ══════════════════════════════════════════════════
   모바일/반응형 숨김 클래스
══════════════════════════════════════════════════ */
.hide-mobile { /* 데스크탑에서는 보임 */ }

/* ══════════════════════════════════════════════════
   반응형 – 화면 크기별 자동 적용
══════════════════════════════════════════════════ */

/* ── 윙 패널 모바일 숨김: 콘텐츠 영역이 좁아지면 윙이 겹치므로 숨김 ── */
@media (max-width: 1440px) {
  /* 양쪽 wing 모두 보이려면 dw+wlw+wrw = 1200+120+120 = 1440px 필요
     PHP 주입 @media와 동일한 breakpoint로 통일 */
  
}

/* 1200px 이하: 윙 패널 숨김, 그리드 비율만 조정 (sector-main 너비는 유지) */
@media (max-width: 1200px) {
  .sector-main {
    /* max-width 는 건드리지 않음 → 1200px 유지 */
    padding: 0 16px;
    box-sizing: border-box;
  }
  /* s5(뉴스 본문)는 yna-wrap 자체 padding 으로 여백 처리 → 이중 padding 방지 */
  .s5 .sector-main,
  #body-main {
    padding: 0 !important;
  }
  .sector-inner {
    grid-template-columns: 1fr 4fr 1fr;
  }
}

/* 1024px 이하: padding 축소만 */
@media (max-width: 1024px) {
  .sector-main {
    padding: 0 12px;
    box-sizing: border-box;
  }
  /* s5 는 여전히 padding 0 유지 */
  .s5 .sector-main,
  #body-main {
    padding: 0 !important;
  }
}

/* ══════════════════════════════════════════════════
   900px 이하: 모바일 전역 overflow 차단 + 섹터 전환
══════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── 전역: 모든 sector-wrap 가로 넘침 차단 ── */
  .sector-wrap {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  .sector-main {
    padding: 0;
    overflow-x: hidden;
    max-width: 100% !important;
  }
  .sector-inner {
    display: block !important;
    overflow-x: hidden;
  }
  .sector-left,
  .sector-right {
    display: none !important;
  }
  .sector-center,
  .sector-full {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 12px !important;
    overflow-x: hidden !important;
  }

  /* 상세 페이지: nd-layout-wrap은 sector-center가 담당 */
  .sector-center.nd-layout-wrap {
    padding: 0 12px !important;
    overflow: hidden !important;
  }

  /* S5 본문 영역 */
  .s5 .sector-inner {
    padding: 12px 0 20px;
  }

  /* 배너 섹터: 이미지가 전체 폭 채우도록 padding 제거 */
  .s1 .sector-center,
  .s1 .sector-full,
  .s4 .sector-center,
  .s4 .sector-full,
  .s6 .sector-center,
  .s6 .sector-full {
    padding: 0 !important;
  }

  /* 모바일 숨김 섹터 */
  .sector-wrap.hide-mobile {
    display: none !important;
  }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     S7: 서비스 메뉴 + 포털 스위처
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .s7 .sector-full,
  .s10 .sector-full {
    padding: 18px 14px 10px !important;
    overflow-x: hidden !important;
  }
  .ft-top-grid {
    grid-template-columns: 1fr !important;  /* 모바일: 1열로 전환 */
    gap: 16px !important;
    width: 100% !important;
  }
  .ft-section-nav { margin-bottom: 8px; }
  .ft-portal-nav  { margin-bottom: 0; }
  /* 모바일: 포털 목록 2열 유지, max-height 축소 */
  .ft-portal-list {
    grid-template-columns: 1fr 1fr !important;
    max-height: 200px !important;
  }
  

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     S8: 회사정보 4단 → 2단 그리드
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .s8 .sector-full,
  .s11 .sector-full {
    padding: 20px 14px 14px !important;
    overflow-x: hidden !important;
  }
  .ft-info-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 16px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  /* 법적 정보 dt: 모바일에서 min-width 축소 */
  .fl-row dt {
    min-width: 72px !important;
    font-size: 11px;
  }
  .fl-row dd { font-size: 11px; }

  /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
     S9: 카피라이트 바
  ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
  .s9 .sector-full,
  .s12 .sector-full {
    padding: 8px 14px !important;
    overflow-x: hidden !important;
  }
  .hide-mobile-inline { display: none !important; }
  .ft-copyright {
    gap: 4px 6px !important;
    font-size: 10px !important;
    text-align: center !important;
    word-break: keep-all !important;
  }
}

/* ══════════════════════════════════════════════════
   480px 이하: 소형 모바일 추가 보강
══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* S11: 3단 → 1단 (소형모바일) */
  .ft-info-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 푸터 섹터 패딩 더 축소 */
  .s7 .sector-full,
  .s10 .sector-full { padding: 14px 10px 8px !important; }
  .s8 .sector-full,
  .s11 .sector-full { padding: 16px 10px 12px !important; }
  .s9 .sector-full,
  .s12 .sector-full { padding: 6px 10px !important; }

  /* 섹터 공통 패딩 추가 축소 */
  .sector-center,
  .sector-full {
    padding: 0 8px !important;
  }
  .s1 .sector-center, .s1 .sector-full,
  .s4 .sector-center, .s4 .sector-full,
  .s6 .sector-center, .s6 .sector-full {
    padding: 0 !important;
  }
}

/* ══════════════════════════════════════════════════
   섹터2 (로고 & 유틸바) – 데스크탑 9요소 가로 배치
   구성: 심볼 | 포털종류 | 검색창 | 로그인 | 회원가입
         | 서비스안내 | 후원하기 | 추가1 | 추가2 | 컨트롤
══════════════════════════════════════════════════ */
.sector-wrap.s2 .sector-inner {
  display: block !important;   /* 3열 그리드 해제 */
}
.sector-wrap.s2 .sector-full {
  padding: 0 !important;
}

/* ── s2-bar: 구버전 (v4.0에서 하단 재정의됨) ── */
.s2-bar {
  display: flex;
  align-items: center;
  gap: 0;
  height: 64px;
  padding: 0 4px;
  box-sizing: border-box;
  width: 100%;
}

/* ── 공통 아이템 ── */
.s2-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* 📱 모바일 숨김: 관리자 설정에서 체크된 항목은 900px 이하에서 숨김 */
@media (max-width: 900px) {
  .s2-item.s2-hide-mob {
    display: none !important;
  }
}

/* ① 심볼 이미지 + 드롭다운 래퍼 */
.s2-symbol {
  padding: 0 8px 0 0;
  position: relative;
  /* z-index 불필요 – 드롭다운은 body 직속으로 이동 */
}
.s2-symbol-link {
  display: flex;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  cursor: pointer;
}
.s2-symbol-img {
  height: 48px;
  width: auto;
  max-width: 56px;
  object-fit: contain;
  display: block;
}
.s2-symbol-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  color: #fff;
  font-size: 20px;
}

/* 심볼 우측 캐럿 아이콘 */
.s2-sym-caret {
  font-size: 10px;
  color: rgba(255,255,255,.7);
  margin-left: 1px;
  transition: transform .2s;
  flex-shrink: 0;
}
.s2-symbol:hover .s2-sym-caret,
.s2-symbol.sym-open .s2-sym-caret {
  transform: rotate(180deg);
}

/* ── 심볼 드롭다운 패널 (body 직속 – stacking context 탈출) ── */
/* ══ 사이트 이동 드롭다운 패널 (세로 리스트 – 롯데ON 스타일) ══ */
.s2-sym-dropdown {
  display: none;           /* JS가 sym-open 클래스로 제어 */
  position: absolute;      /* top/left는 JS positionDrop()이 계산 */
  width: 215px;            /* 세로 리스트 전용 너비 */
  background: #fff;
  border: 1px solid rgba(0,0,0,.09);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0,0,0,.16), 0 2px 8px rgba(0,0,0,.08);
  z-index: 99999;          /* body 직속이므로 어떤 섹터보다도 위 */
  padding: 0;
  pointer-events: auto;
  overflow: hidden;
}
.s2-sym-dropdown.sym-open {
  display: block;
  animation: symDropIn .2s cubic-bezier(.34,1.56,.64,1);
}
@keyframes symDropIn {
  from { opacity: 0; transform: scale(.93) translateY(-6px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

/* ── 드롭다운 상단 헤더 ("사이트 이동" 타이틀) ── */
.s2-sym-drop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 15px 9px;
  border-bottom: 1px solid #f0f0f0;
}
.s2-sym-drop-title {
  font-size: 11px;
  font-weight: 700;
  color: #999;
  letter-spacing: .4px;
  text-transform: uppercase;
}
.s2-sym-drop-caret {
  font-size: 10px;
  color: #ccc;
}

/* ── 세로 리스트 내부 ── */
.s2-sym-drop-inner {
  display: flex;
  flex-direction: column;
  padding: 6px 0 8px;
}

/* ── 구분선 ── */
.s2-sym-drop-divider {
  height: 1px;
  background: #f0f0f0;
  margin: 4px 15px;
}

/* ── 각 메뉴 아이템 (가로 배치) ── */
.s2-sym-menu-item {
  display: flex;
  flex-direction: row;       /* 세로 리스트: 가로 flex */
  align-items: center;
  gap: 11px;
  padding: 9px 15px;
  border-radius: 0;
  text-decoration: none;
  color: var(--text-dark, #333);
  font-size: 13.5px;
  font-weight: 500;
  transition: background .13s;
  position: relative;
  text-align: left;
}
.s2-sym-menu-item:hover {
  background: #f7f8fa;
}
.s2-sym-menu-item.s2-sym-active {
  color: var(--mc, #3498db);
  font-weight: 700;
  background: color-mix(in srgb, var(--mc, #3498db) 6%, transparent);
}

/* ── 아이콘 원형 배지 (크기 축소) ── */
.s2-sym-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 14px;
  flex-shrink: 0;
  transition: transform .14s;
}
.s2-sym-menu-item:hover .s2-sym-icon {
  transform: scale(1.08);
}
.s2-sym-menu-item.s2-sym-active .s2-sym-icon {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mc, #3498db) 30%, transparent);
}

/* ── 메뉴명 ── */
.s2-sym-name {
  flex: 1;
  line-height: 1.2;
  letter-spacing: -.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── 활성 도트 표시 (체크 아이콘 대체) ── */
.s2-sym-check {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mc, #3498db);
  flex-shrink: 0;
  /* fa-check 아이콘 숨김, 도트로 대체 */
  font-size: 0;
}

/* ② 포털종류 이미지 / 텍스트 로고 */
.s2-portal-type {
  padding: 0 12px 0 6px;
  border-right: 1px solid rgba(0,0,0,.08);
  margin-right: 12px;
}
.s2-portal-type a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.s2-portal-type-img {
  height: 36px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
}
.s2-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.s2-logo-main {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.s2-logo-sub {
  font-size: 10px;
  color: #999;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ③ 검색창 */
.s2-search {
  flex: 1;            /* 나머지 공간 모두 차지 */
  min-width: 160px;
  max-width: 340px;
  padding: 0 12px 0 0;
}
.s2-search-form {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  background: #f5f5f5;
  border: 1.5px solid #e0e0e0;
  border-radius: 22px;
  overflow: hidden;
  transition: border-color .2s;
}
.s2-search-form:focus-within {
  border-color: var(--primary, #c0392b);
  background: #fff;
}
.s2-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  padding: 8px 12px;
  font-size: 13px;
  outline: none;
  color: #333;
}
.s2-search-input::placeholder { color: #aaa; }
.s2-search-btn {
  flex-shrink: 0;
  border: none;
  color: #fff;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 0 20px 20px 0;
  transition: opacity .15s;
}
.s2-search-btn:hover { opacity: .85; }

/* ④⑤ 로그인/회원가입, ⑥ 서비스안내, ⑦ 후원하기, ⑧⑨ 추가메뉴 */
.s2-util-btn {
  padding: 0 3px;
}
.s2-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 5px 10px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .15s, color .15s, opacity .15s;
  line-height: 1.3;
  min-width: 48px;
}
.s2-btn i {
  font-size: 16px;
  line-height: 1;
}
/* 로그인 버튼 */
.s2-btn-login {
  color: #555;
  border: 1.5px solid #e0e0e0;
  background: #fff;
}
.s2-btn-login:hover { background: #f5f5f5; color: #222; }

/* 회원가입 버튼 */
.s2-btn-join {
  background: #fff;
  border: 1.5px solid currentColor;
}
.s2-btn-join:hover { opacity: .8; }

/* 서비스안내 버튼 */
.s2-btn-service {
  color: #444;
  background: #f0f4f8;
  border: 1.5px solid #d0d8e4;
}
.s2-btn-service:hover { background: #e2e8f0; }

/* 후원하기 버튼 */
.s2-btn-donation {
  color: #fff;
  border: none;
}
.s2-btn-donation:hover { opacity: .88; }

/* 추가메뉴 버튼 */
.s2-btn-extra {
  color: #555;
  background: #f8f8f8;
  border: 1.5px solid #e5e5e5;
}
.s2-btn-extra:hover { background: #efefef; }

/* 컨트롤 영역 (글자크기, 테마, 관심) */
.s2-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 8px;
  border-left: 1px solid rgba(0,0,0,.08);
  margin-left: 4px;
  flex-shrink: 0;
}
.s2-ctrl-btn {
  font-size: 15px;
  text-decoration: none;
  line-height: 1;
}
.s2-fz { }
.s2-theme { }
.s2-interest { }

/* 다크모드 */
html[data-theme="dark"] .s2-bar {
  background: var(--dark-s2-bg, #1e1e1e);
}
html[data-theme="dark"] .s2-search-form {
  background: #2a2a2a;
  border-color: #444;
}
html[data-theme="dark"] .s2-search-form:focus-within {
  background: #333;
}
html[data-theme="dark"] .s2-search-input { color: #e0e0e0; }
html[data-theme="dark"] .s2-btn-login,
html[data-theme="dark"] .s2-btn-service,
html[data-theme="dark"] .s2-btn-extra {
  background: #2a2a2a;
  border-color: #444;
  color: #ccc;
}
html[data-theme="dark"] .s2-portal-type { border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .s2-controls    { border-color: rgba(255,255,255,.1); }
html[data-theme="dark"] .s2-logo-sub   { color: #666; }

/* ── 반응형: 1200px 이하 ── */
@media (max-width: 1200px) {
  .s2-bar { height: auto; min-height: 56px; flex-wrap: wrap; padding: 6px 8px; gap: 4px; }
  .s2-search { max-width: none; flex-basis: 100%; order: 10; padding: 4px 0 0; }
  .s2-portal-type { border-right: none; margin-right: 4px; }
}

/* ── 반응형: 900px 이하 (모바일) ── */
@media (max-width: 900px) {
  /* S2 바: 2행 레이아웃 - 1행: 심볼+버튼류, 2행: 검색창 */
  .s2-bar {
    height: auto !important;
    flex-wrap: wrap !important;
    padding: 4px 8px !important;
    gap: 2px 4px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  /* 심볼(로고): 크기 축소 */
  .s2-symbol-img  { height: 36px !important; max-width: 40px !important; }
  /* 포털타입 이미지: 모바일 숨김 (심볼로 대체) */
  .s2-portal-type { display: none !important; }
  /* 검색창: 두 번째 행, 전체 폭 */
  .s2-search {
    flex-basis: 100% !important;
    min-width: 0 !important;     /* ← min-width:160px 제거 */
    max-width: 100% !important;
    order: 10 !important;
    padding: 2px 0 4px !important;
  }
  /* 버튼: 텍스트 숨기고 아이콘만 */
  .s2-util-btn { padding: 0 2px !important; }
  .s2-btn { padding: 4px 6px !important; font-size: 9px !important; min-width: 32px !important; }
  .s2-btn i { font-size: 13px !important; }
  .s2-btn span { display: none !important; }
  /* 서비스안내·후원하기 버튼: 모바일 숨김 (공간 절약) */
  .s2-btn-service,
  .s2-btn-extra   { display: none !important; }
  /* 글자크기·테마 컨트롤 */
  .s2-controls { gap: 4px !important; padding-left: 4px !important; }
}

/* ── 반응형: 480px 이하 (소형) ── */
@media (max-width: 480px) {
  .s2-bar { padding: 3px 6px !important; }
  .s2-symbol-img { height: 30px !important; max-width: 34px !important; }
  /* 로그인·회원가입 버튼도 숨김 (공간 절약) */
  .s2-btn-login,
  .s2-btn-join    { display: none !important; }
}

/* ── GNB 드롭다운 다크모드 ── */
html[data-theme="dark"] .gnb-dropdown {
  background: #1e2432;
  border-color: rgba(255,255,255,.1);
  border-top-color: var(--primary);
}
html[data-theme="dark"] .gnb-sub-link {
  color: #c9cdd4;
  border-bottom-color: rgba(255,255,255,.07);
}
html[data-theme="dark"] .gnb-sub-link:hover {
  background: rgba(255,255,255,.08);
  color: #fff;
}
html[data-theme="dark"] .gnb-sub-link.sub-active {
  background: rgba(255,255,255,.12);
  color: #fff;
}

/* ── 사이트 이동 드롭다운 다크모드 ── */
html[data-theme="dark"] .s2-sym-dropdown {
  background: #1a1f2e;
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 12px 36px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.25);
}
html[data-theme="dark"] .s2-sym-drop-header {
  border-bottom-color: rgba(255,255,255,.08);
}
html[data-theme="dark"] .s2-sym-drop-title {
  color: rgba(255,255,255,.4);
}
html[data-theme="dark"] .s2-sym-drop-caret {
  color: rgba(255,255,255,.25);
}
html[data-theme="dark"] .s2-sym-drop-divider {
  background: rgba(255,255,255,.08);
}
html[data-theme="dark"] .s2-sym-menu-item {
  color: #c9cdd4;
}
html[data-theme="dark"] .s2-sym-menu-item:hover {
  background: rgba(255,255,255,.07);
  color: #fff;
}
html[data-theme="dark"] .s2-sym-menu-item.s2-sym-active {
  background: color-mix(in srgb, var(--mc, #3498db) 18%, transparent);
  color: #fff;
}

/* ── 모바일 반응형: 세로 리스트는 너비만 조정 (그리드 변경 불필요) ── */
@media (max-width: 600px) {
  .s2-sym-dropdown {
    width: 200px;  /* 모바일에서 살짝 좁게 */
  }
}
@media (max-width: 900px) and (min-width: 601px) {
  .s2-sym-dropdown {
    width: 210px;  /* 태블릿 동일 너비 유지 */
  }
}

/* ══════════════════════════════════════════════════════
   ★ 모바일 헤더 완전 재설계 (≤900px)
   - s2 sticky 헤더: 로고 | 검색창(flex-grow) | 핵심버튼만
   - s3 GNB: 스티키 (s2 아래 고정)
══════════════════════════════════════════════════════ */
@media (max-width: 900px) {

  /* ── sector2: sticky 헤더 ── */
  .sector-wrap.s2 {
    position: sticky;
    top: 0;
    z-index: 500;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
  }
  html[data-theme="dark"] .sector-wrap.s2 {
    background: #1c1c1c;
  }
  .sector-wrap.s2 .sector-main { padding: 0 !important; }

  /* ── s2-bar: 높이 52px 단일 행 ── */
  .s2-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 10px !important;
    gap: 6px !important;
    overflow: visible !important;   /* ← 검색창 잘림 방지 */
    box-sizing: border-box;
  }

  /* ── 로고(심볼): 좌측 고정 ── */
  .s2-item.s2-symbol {
    display: flex !important;
    flex-shrink: 0 !important;
    order: 1;
    padding-right: 2px;
  }
  .s2-symbol-img { height: 34px !important; max-width: 40px !important; width: auto !important; }
  .s2-sym-caret  { display: none !important; }
  .s2-sym-dropdown { display: none !important; }  /* 드롭다운 모바일 비활성 */

  /* ── 포털타입+로고텍스트: 숨김 ── */
  .s2-item.s2-portal-type,
  .s2-portal-type { display: none !important; }
  .s2-logo-text { display: none !important; }

  /* ── 검색창: flex-grow로 중간 공간 최대 활용 ── */
  .s2-item.s2-search,
  .s2-search {
    display: flex !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    order: 2;
  }
  .s2-search-form {
    width: 100% !important;
    height: 36px !important;
    min-width: 0 !important;
    border-radius: 20px !important;
  }
  .s2-search-input {
    font-size: 13px !important;
    padding: 0 10px !important;
    min-width: 0 !important;
  }
  .s2-search-btn {
    width: 36px !important;
    height: 36px !important;
    flex-shrink: 0;
    border-radius: 0 20px 20px 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* ── s2-util-btn (유틸버튼들): 로그인/회원가입만, 순서3 ── */
  .s2-item.s2-util-btn { order: 3; }

  /* 서비스/후원/추가 버튼 숨김 (공간 절약) */
  .s2-item.s2-util-btn:has(.s2-btn-service),
  .s2-item.s2-util-btn:has(.s2-btn-donation),
  .s2-item.s2-util-btn:has(.s2-btn-extra) { display: none !important; }
  /* 포함 선택자 미지원 브라우저 대비 */
  .s2-btn-service  { display: none !important; }
  .s2-btn-donation { display: none !important; }
  .s2-btn-extra    { display: none !important; }

  /* ── 우측 컨트롤 그룹(폰트/테마/관심): 맨 우측 ── */
  .s2-item.s2-controls,
  .s2-controls {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-shrink: 0 !important;
    padding-left: 2px !important;
    border-left: none !important;
    order: 4;
  }

  /* 모든 s2-btn: 아이콘만 표시 */
  .s2-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    padding: 0 !important;
    border-radius: 6px !important;
    font-size: 0 !important;
    flex-shrink: 0;
  }
  .s2-btn i, .s2-btn svg {
    font-size: 15px !important;
    margin: 0 !important;
  }
  .s2-btn span { display: none !important; }

  /* 로그인/회원가입 버튼 표시 */
  .s2-btn-login,
  .s2-btn-join { display: flex !important; }

  /* 관심/폰트/테마 버튼 표시 */
  .s2-interest { display: flex !important; }
  .s2-fz       { display: flex !important; }
  .s2-theme    { display: flex !important; }

  /* ── sector3 GNB: s2 아래 스티키 ── */
  .sector-wrap.s3 {
    position: sticky;
    top: 52px;
    z-index: 490;
  }

  /* ── 서브 배너(s4): 모바일에서 최소화 ── */
  .sector-wrap.s4 { display: none !important; }
}

/* ══════════════════════════════════════════════════════
   모바일 뉴스 목록 — 가로형 카드 (≤768px)
══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 섹터 center 기본 설정 ── */
  .sector-center {
    padding: 0 10px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  /* 그리드 → 1열 세로 스택 */
  .news-grid,
  .news-grid-improved,
  .nl-news-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 0 !important;
    width: 100% !important;
  }

  /* ─── 카드: 가로형 (썸네일 왼쪽 고정) ─── */
  .news-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: var(--card-radius, 6px) !important;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
  }

  /* ─── 썸네일 링크 래퍼 (왼쪽 고정폭) ─── */
  .news-card > a:first-child {
    flex: 0 0 120px !important;
    width: 120px !important;
    min-width: 120px !important;
    max-width: 120px !important;
    height: 90px !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: var(--card-radius, 6px) 0 0 var(--card-radius, 6px) !important;
    position: relative !important;
  }

  /* ─── 썸네일 div ─── */
  .news-card > a:first-child .news-card-thumb {
    width: 120px !important;
    height: 90px !important;
    min-height: 90px !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    background: #e8edf2 !important;
    display: block !important;
  }

  /* ─── 썸네일 img: 꽉 채우기 ─── */
  .news-card > a:first-child .news-card-thumb img,
  .nl-news-grid .news-card > a:first-child .news-card-thumb img {
    display: block !important;
    width: 120px !important;
    height: 90px !important;
    min-width: 120px !important;
    min-height: 90px !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center top !important;
    border-radius: 0 !important;
  }

  /* ─── 배지: 썸네일 왼쪽 하단 ─── */
  .card-badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
    top: auto !important;
    bottom: 4px !important;
    left: 4px !important;
    right: auto !important;
  }

  /* ─── 텍스트 영역 (오른쪽) ─── */
  .news-card-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 8px 10px 6px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    overflow: hidden !important;
    height: 90px !important;
    box-sizing: border-box !important;
  }
  .news-card-title {
    font-size: 13px !important;
    line-height: 1.4 !important;
    -webkit-line-clamp: 2 !important;
    margin: 0 !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    color: var(--text-dark, #1e293b) !important;
    font-weight: 600 !important;
    flex: 1 !important;
  }
  /* 요약문 숨김 */
  .news-card-summary { display: none !important; }

  /* 메타 정보 */
  .news-card-meta {
    font-size: 10px !important;
    gap: 5px !important;
    margin-top: 4px !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  /* 페이지 헤더 */
  .list-page-header { padding: 10px 0 6px !important; }
  .list-page-title  { font-size: 15px !important; }

  /* 페이지네이션 */
  .pagination { flex-wrap: wrap; gap: 3px; justify-content: center; }
  .pagination a, .pagination span {
    min-width: 30px !important;
    height: 30px !important;
    font-size: 12px !important;
    line-height: 30px !important;
  }
}

/* ══════════════════════════════════════════════════════
   소형 모바일 (≤480px)
══════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .news-card {
    height: 80px !important;
    min-height: 80px !important;
    max-height: 80px !important;
  }
  .news-card > a:first-child {
    flex: 0 0 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 80px !important;
  }
  .news-card > a:first-child .news-card-thumb {
    width: 100px !important;
    height: 80px !important;
    min-height: 80px !important;
  }
  .news-card > a:first-child .news-card-thumb img,
  .nl-news-grid .news-card > a:first-child .news-card-thumb img {
    width: 100px !important;
    height: 80px !important;
    min-width: 100px !important;
    min-height: 80px !important;
  }
  .news-card-body {
    height: 80px !important;
  }
  .news-card-title { font-size: 12px !important; }
  .sector-center { padding: 0 8px !important; }
  .list-page-title { font-size: 14px !important; }
  .news-card-meta .reporter { max-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* 속보 티커 높이 축소 */
  
}

/* ── 모바일 */


/* (v4.0 CSS 제거됨 — v5 s2v5- 네임스페이스로 대체) */