/**
 * ┌─────────────────────────────────────────────────────────────────────┐
 * │  FILE INDEX — 여수뉴스포털                                          │
 * ├──────────────┬──────────────────────────────────────────────────────┤
 * │  파일명      │  news-list-v2.css                                     │
 * │  위치        │  /news/assets/css/news-list-v2.css                    │
 * │  생성일      │  2026-04-23                                           │
 * │  수정일      │  2026-05-01                                           │
 * │  버전        │  v1.3                                                 │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  기능/역할   │  뉴스 카테고리 목록 v2 레이아웃 CSS (중앙일보 기반)   │
 * │              │  - 고정 서브탭 헤더                                    │
 * │              │  - 히어로 카드, 스토리 목록, 사이드바                  │
 * │              │  - 배지, 메타 정보, 페이지네이션, 다크모드             │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  레이아웃    │  기준 너비: 1200px / 반응형: 960px, 640px             │
 * │  섹터 구조   │  .sector-wrap { width:100%; display:block }           │
 * │              │  ★ sector-wrap 다열 분할 금지 (원칙 2)                │
 * │              │  ★ 다열은 .sector-inner 안에서만 허용                 │
 * │  폰트 기준   │  최소 14px 준수 (원칙 3) / 배지·아이콘폰트 ≥12px 예외│
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  연관 파일   │  load-by  : news/includes/news_list_tpl.php           │
 * │              │  변수 주입: .nl-v2-wrap :root 자체 정의               │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  참조 사항   │  중앙일보 https://www.joongang.co.kr/ 참조            │
 * │              │  웹폰트: Noto Serif KR, Pretendard Variable           │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  변경 이력   │  2026-05-01 v1.3 - 원칙4 파일 색인표 추가,           │
 * │              │               원칙3 위반 폰트 수정                    │
 * │              │               (.nl-arrow-right 11px→14px,             │
 * │              │                .nl-meta 12px→14px)                    │
 * │              │  2026-04-27 v1.2 - 섹션 타이틀 22px→24px             │
 * │              │  2026-04-23 v1.1 - 최초 생성                         │
 * └──────────────┴──────────────────────────────────────────────────────┘
 */

/* ── 웹폰트 ──
   Pretendard GOV 및 Noto Serif KR 는 header.php 의 nhis-design-system.css 에서
   일괄 로드합니다. 이 파일에서 @import 를 중복 선언하면 네트워크 요청이 2회
   발생하므로 제거합니다 (원칙: 폰트 로드는 header.php 에서 단일 관리).
── */

/* ──────────────────────────────────────────────────────────────
   0. CSS 변수
────────────────────────────────────────────────────────────────*/
.nl-v2-wrap {
  --nl-red:       #d0021b;
  --nl-blue:      #1a5fa8;
  --nl-gray-900:  #111111;
  --nl-gray-800:  #222222;
  --nl-gray-700:  #333333;
  --nl-gray-600:  #555555;
  --nl-gray-500:  #666666;
  --nl-gray-400:  #888888;
  --nl-gray-300:  #aaaaaa;
  --nl-gray-200:  #cccccc;
  --nl-gray-100:  #eeeeee;
  --nl-gray-50:   #f8f9fa;
  --nl-border:    #e5e5e5;
  --nl-bg:        #ffffff;
  --nl-serif:     'Noto Serif KR', 'NotoSerifKR', Georgia, serif;
  --nl-sans:      'Pretendard Variable', Pretendard, -apple-system,
                  'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --nl-max-w:     1200px;
  --nl-gap:       32px;

  font-family: var(--nl-sans);
  color: var(--nl-gray-700);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  background: #fff;
}

.nl-v2-wrap *, .nl-v2-wrap *::before, .nl-v2-wrap *::after {
  box-sizing: border-box;
}

.nl-v2-wrap a { color: inherit; text-decoration: none; }
.nl-v2-wrap a:hover { color: var(--nl-gray-900); }
.nl-v2-wrap img { max-width: 100%; height: auto; display: block; }
.nl-v2-wrap ul, .nl-v2-wrap li { list-style: none; margin: 0; padding: 0; }
.nl-v2-wrap h1, .nl-v2-wrap h2, .nl-v2-wrap h3, .nl-v2-wrap h4 {
  margin: 0; font-weight: 700; line-height: 1.4;
}
.nl-v2-wrap figure { margin: 0; }

/* ──────────────────────────────────────────────────────────────
   1. 전체 래퍼
────────────────────────────────────────────────────────────────*/
.nl-contents {
  max-width: var(--nl-max-w);
  margin: 0 auto;
  padding: 24px 20px 72px;  /* 상단 여백 추가 — S6 서브탭 아래 공간 */
}

/* ──────────────────────────────────────────────────────────────
   2-A. S6 섹터 내 서브탭 네비게이션 (nl-s6-subnav)
   · S6 섹터 안(.sector-inner)에 s6-title-block 아래 배치
   · nl-section-header(sticky)는 제거 — S6 자체가 타이틀+탭 역할
────────────────────────────────────────────────────────────────*/
.nl-s6-subnav {
  margin-top: 4px;
  border-top: 2px solid #111;
  overflow-x: auto;
  scrollbar-width: none;
}
.nl-s6-subnav::-webkit-scrollbar { display: none; }

/* 2-B. 기존 nl-section-header — detail.php(tpl_detail.php)에서는 여전히 사용
   리스트 페이지(.s7-layout-news-list)에서는 숨김 처리 */
.s7-layout-news-list .nl-section-header {
  display: none !important;
}

/* 레거시 nl-section-header (detail 등에서 사용) */
.nl-section-header {
  position: sticky;
  top: 110px;               /* s2(64px) + s3(46px) = 110px */
  z-index: 99;
  background: #fff;
  border-bottom: 2px solid var(--nl-gray-900);
  margin-bottom: 32px;
}
@media (max-width: 900px) {
  .nl-section-header { top: 52px; }
}
.nl-header-area {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 16px 0 0;
}
/* ── 타이포그래피 스케일: 24px — 페이지 제목 ── */
.nl-section-title {
  font-size: 24px;
  font-weight: 800;
  white-space: nowrap;
  flex-shrink: 0;
  padding-bottom: 14px;
}
.nl-section-title a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--nl-gray-900);
}
.nl-section-title i { font-size: 17px; } /* 강조 본문 크기 유지 */

/* 서브 네비 탭 */
.nl-header-nav {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.nl-header-nav::-webkit-scrollbar { display: none; }
.nl-nav {
  display: flex;
  gap: 0;
  flex-wrap: nowrap;
  border-bottom: none;
}
/* ── 타이포그래피 스케일: 14px — 메타/보조텍스트 최솟값 ── */
.nl-nav-item a {
  display: block;
  padding: 10px 18px 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--nl-gray-500);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .18s, border-color .18s;
  position: relative;
  bottom: -2px;
  letter-spacing: -0.01em;
}
.nl-nav-item a:hover {
  color: var(--nl-gray-900);
}
.nl-nav-item.is-active a {
  color: var(--nl-gray-900);
  font-weight: 700;
  border-bottom-color: var(--nl-gray-900);
}

/* ──────────────────────────────────────────────────────────────
   3. 2단 레이아웃 (editor_wrap)
────────────────────────────────────────────────────────────────*/
.nl-editor-wrap {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--nl-gap);
  margin-bottom: 48px;
}

/* 좌측 메인 (col_lg8) */
.nl-col-main {}

/* ── 히어로 카드 (첫 번째 기사 — 중앙일보 top story) ── */
.nl-hero-card {
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--nl-border);
}
.nl-hero-image {
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 16px;
  background: var(--nl-gray-100);
}
.nl-hero-image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform .4s ease;
}
.nl-hero-image a:hover img { transform: scale(1.025); }
.nl-hero-body {}
/* ── 타이포그래피 스케일: 24px — 페이지 제목 ── */
.nl-hero-title {
  font-family: var(--nl-serif);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.55;
  color: var(--nl-gray-900);
  margin-bottom: 10px;
  letter-spacing: -0.025em;
}
.nl-hero-title a { color: var(--nl-gray-900); }
.nl-hero-title a:hover { color: var(--nl-blue); }
/* ── 타이포그래피 스케일: 16px — 본문 기본 ── */
.nl-hero-desc {
  font-size: 16px;
  line-height: 1.75;
  color: var(--nl-gray-500);
  margin-bottom: 12px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── 서브 기사 목록 (story_list) ── */
.nl-story-list {}
.nl-story-card {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid var(--nl-border);
}
.nl-story-card:last-child { border-bottom: none; }
.nl-story-body { flex: 1; min-width: 0; }
/* ── 타이포그래피 스케일: 17px — 강조 본문 ── */
.nl-story-title {
  font-family: var(--nl-serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 7px;
  letter-spacing: -0.02em;
}
.nl-story-title a { color: var(--nl-gray-900); }
.nl-story-title a:hover { color: var(--nl-blue); }
/* ── 타이포그래피 스케일: 14px — 메타/보조텍스트 최솟값 ── */
.nl-story-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--nl-gray-400);
  margin-bottom: 9px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nl-story-thumb {
  flex-shrink: 0;
  width: 140px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--nl-gray-100);
}
.nl-story-thumb img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  transition: transform .3s;
}
.nl-story-card:hover .nl-story-thumb img { transform: scale(1.045); }

/* ──────────────────────────────────────────────────────────────
   4. 우측 사이드바 (col_lg4)
────────────────────────────────────────────────────────────────*/
.nl-col-side {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.nl-side-block {
  border: 1px solid var(--nl-border);
  border-top: 3px solid var(--nl-gray-900);
}
.nl-side-title {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--nl-border);
}
.nl-side-title strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--nl-gray-900);
  letter-spacing: -0.01em;
}

/* 사이드 카드 */
.nl-side-card, .nl-popular-card {
  display: flex;
  gap: 12px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--nl-gray-100);
  transition: background .15s;
}
.nl-side-card:last-child, .nl-popular-card:last-child { border-bottom: none; }
.nl-side-card:hover, .nl-popular-card:hover { background: var(--nl-gray-50); }

.nl-side-thumb, .nl-popular-thumb {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--nl-gray-100);
}
.nl-side-thumb img, .nl-popular-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.nl-side-card:hover img, .nl-popular-card:hover img { transform: scale(1.07); }

.nl-side-body, .nl-popular-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
/* ── 타이포그래피 스케일: 14px — 메타/보조텍스트 최솟값 ── */
.nl-side-headline, .nl-popular-headline {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--nl-gray-800);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  letter-spacing: -0.01em;
}
.nl-side-headline a:hover, .nl-popular-headline a:hover { color: var(--nl-blue); }

/* 순위 번호 */
.nl-rank-num { display: flex; align-items: center; }
/* ── 타이포그래피 스케일: 12px — 배지·순위번호 전용 예외 ── */
.nl-num {
  display: inline-block;
  font-size: 12px; /* 원칙 예외: 순위 숫자 배지 최솟값 12px */
  font-weight: 800;
  color: var(--nl-gray-300);
  min-width: 16px;
}
.nl-num1 { color: #e03131; }
.nl-num2 { color: #e8590c; }
.nl-num3 { color: #f59f00; }
.nl-rank-count { display: inline-block; margin-right: 4px; }

/* ──────────────────────────────────────────────────────────────
   5. 서브 카테고리 피드 (chain_wrap)
────────────────────────────────────────────────────────────────*/
.nl-chain-wrap {
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--nl-border);
}
.nl-chain-wrap:last-of-type { border-bottom: none; }

.nl-title-wrap {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--nl-gray-900);
}
.nl-title-area {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
/* ── 타이포그래피 스케일: 18px — 카드 제목/섹션명 ── */
.nl-chain-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--nl-gray-900);
  letter-spacing: -0.02em;
}
.nl-chain-title a { color: var(--nl-gray-900); }
.nl-chain-title a:hover { color: var(--nl-blue); }
.nl-arrow-right {
  font-size: 14px; /* 원칙3: 11px→14px 수정 (2026-05-01) */
  color: var(--nl-gray-300);
  margin-left: 4px;
  transition: transform .2s, color .2s;
}
.nl-chain-title a:hover .nl-arrow-right {
  transform: translateX(3px);
  color: var(--nl-blue);
}
/* ── 타이포그래피 스케일: 14px — 메타/보조텍스트 최솟값 ── */
.nl-total-count {
  font-size: 14px;
  color: var(--nl-gray-300);
  margin-left: auto;
  font-weight: 400;
}

/* 카드 그리드 (card_right_list) */
.nl-card-right-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.nl-card {}
.nl-card-image {
  overflow: hidden;
  border-radius: 3px;
  margin-bottom: 11px;
  background: var(--nl-gray-100);
}
.nl-card-image img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform .32s;
}
.nl-card:hover .nl-card-image img { transform: scale(1.05); }
.nl-card-body {}
/* ── 타이포그래피 스케일: 14px — 메타/보조텍스트 최솟값 ── */
.nl-card-headline {
  font-family: var(--nl-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  margin-bottom: 7px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  letter-spacing: -0.02em;
}
.nl-card-headline a { color: var(--nl-gray-900); }
.nl-card-headline a:hover { color: var(--nl-blue); }

/* ──────────────────────────────────────────────────────────────
   6. 전체 기사 목록 (full list)
────────────────────────────────────────────────────────────────*/
.nl-list-all {}
.nl-full-list {}
.nl-full-card {
  display: flex;
  gap: 22px;
  padding: 22px 0;
  border-bottom: 1px solid var(--nl-border);
  align-items: flex-start;
}
.nl-full-card:first-child { border-top: 1px solid var(--nl-border); }
.nl-full-thumb {
  flex-shrink: 0;
  width: 190px;
  overflow: hidden;
  border-radius: 3px;
  background: var(--nl-gray-100);
}
.nl-full-thumb img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform .3s;
}
.nl-full-card:hover .nl-full-thumb img { transform: scale(1.04); }
.nl-full-body { flex: 1; min-width: 0; }
.nl-full-badges { display: flex; gap: 6px; margin-bottom: 9px; flex-wrap: wrap; }
/* ── 타이포그래피 스케일: 18px — 카드 제목/섹션명 ── */
.nl-full-title {
  font-family: var(--nl-serif);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.55;
  margin-bottom: 9px;
  letter-spacing: -0.025em;
}
.nl-full-title a { color: var(--nl-gray-900); }
.nl-full-title a:hover { color: var(--nl-blue); }
/* ── 타이포그래피 스케일: 14px — 메타/보조텍스트 최솟값 ── */
.nl-full-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--nl-gray-400);
  margin-bottom: 11px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ──────────────────────────────────────────────────────────────
   7. 공통 메타 정보
────────────────────────────────────────────────────────────────*/
/* ── 타이포그래피 스케일: 14px — 메타/보조텍스트 최솟값 ── */
.nl-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 14px; /* 원칙3: 12px→14px 수정 (2026-05-01) */
  color: var(--nl-gray-300);
}
/* ── 타이포그래피 스케일: 14px — 메타/보조텍스트 최솟값 ── */
.nl-meta .nl-reporter {
  color: var(--nl-gray-500);
  font-weight: 500;
  font-size: 14px;
}
.nl-meta .nl-date { color: var(--nl-gray-400); }
.nl-meta .nl-views {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--nl-gray-300);
}
.nl-meta .nl-views i { font-size: 12px; } /* 원칙 예외: 아이콘 폰트 최솟값 12px */

/* 메타 구분점 */
.nl-meta .nl-reporter + .nl-date::before {
  content: '·';
  margin-right: 10px;
  color: var(--nl-gray-200);
}

/* ──────────────────────────────────────────────────────────────
   8. 배지
────────────────────────────────────────────────────────────────*/
/* ── 타이포그래피 스케일: 12px — 배지 전용 예외 ── */
.nl-badge {
  display: inline-block;
  font-size: 12px; /* 원칙 예외: 뉴스 배지 최솟값 12px */
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 2px;
  vertical-align: middle;
  letter-spacing: 0.02em;
}
.nl-badge-breaking {
  background: var(--nl-red);
  color: #fff;
}
.nl-badge-featured {
  background: #1a5fa8;
  color: #fff;
}
/* ── 타이포그래피 스케일: 12px — 배지 전용 예외 ── */
.nl-badge-cat {
  font-size: 12px; /* 원칙 예외: 카테고리 배지 최솟값 12px */
  font-weight: 700;
  background: none;
  padding: 0;
  margin-right: 2px;
  letter-spacing: 0;
}

/* ──────────────────────────────────────────────────────────────
   9. 빈 상태
────────────────────────────────────────────────────────────────*/
.nl-empty {
  text-align: center;
  padding: 72px 20px;
  color: var(--nl-gray-200);
}
.nl-empty i { font-size: 44px; margin-bottom: 18px; display: block; }
/* ── 타이포그래피 스케일: 16px — 본문 기본 ── */
.nl-empty p { font-size: 16px; color: var(--nl-gray-400); }

/* ──────────────────────────────────────────────────────────────
   10. 페이지네이션
────────────────────────────────────────────────────────────────*/
.nl-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid var(--nl-border);
}
/* ── 타이포그래피 스케일: 14px — 메타/보조텍스트 최솟값 ── */
.nl-page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 500;
  color: var(--nl-gray-500);
  border: 1px solid var(--nl-border);
  border-radius: 3px;
  transition: all .18s;
  text-decoration: none;
}
.nl-page:hover {
  background: var(--nl-gray-50);
  border-color: var(--nl-gray-300);
  color: var(--nl-gray-900);
}
.nl-page.is-active {
  background: var(--nl-gray-900);
  border-color: var(--nl-gray-900);
  color: #fff;
  font-weight: 700;
}
.nl-page-first, .nl-page-last {
  border-color: var(--nl-gray-100);
  color: var(--nl-gray-300);
}

/* ──────────────────────────────────────────────────────────────
   11. 다크 모드
────────────────────────────────────────────────────────────────*/
html[data-theme="dark"] .nl-v2-wrap {
  --nl-gray-900:  #f0f0f0;
  --nl-gray-800:  #e0e0e0;
  --nl-gray-700:  #cccccc;
  --nl-gray-600:  #aaaaaa;
  --nl-gray-500:  #888888;
  --nl-gray-400:  #666666;
  --nl-gray-300:  #444444;
  --nl-gray-200:  #333333;
  --nl-gray-100:  #2a2a2a;
  --nl-gray-50:   #232323;
  --nl-border:    #3a3a3a;
  --nl-bg:        #1a1a1a;
  background: var(--nl-bg);
}
html[data-theme="dark"] .nl-section-header,
html[data-theme="dark"] .nl-side-block { background: var(--nl-bg); }

/* ──────────────────────────────────────────────────────────────
   12. 반응형
────────────────────────────────────────────────────────────────*/
@media (max-width: 960px) {
  .nl-editor-wrap {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .nl-col-side {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
  }
  .nl-side-block { flex: 1 1 calc(50% - 8px); min-width: 260px; }
  .nl-card-right-list { grid-template-columns: repeat(2, 1fr); }
  .nl-hero-title { font-size: 20px; } /* ≤960px: 서브 헤더 수준 */
  .nl-full-thumb { width: 150px; }
}

@media (max-width: 640px) {
  .nl-contents { padding: 0 14px 48px; }
  .nl-header-area { gap: 10px; flex-wrap: wrap; }
  .nl-section-title { font-size: 20px; } /* 모바일: 서브 헤더 수준 */
  .nl-nav-item a { padding: 9px 12px 11px; font-size: 14px; } /* 최솟값 14px 유지 */
  .nl-editor-wrap { grid-template-columns: 1fr; }
  .nl-col-side { flex-direction: column; }
  .nl-side-block { min-width: unset; }
  .nl-card-right-list { grid-template-columns: 1fr; }
  .nl-full-card { flex-direction: column; }
  .nl-full-thumb { width: 100%; }
  .nl-full-thumb img { aspect-ratio: 16/9; }
  .nl-hero-title { font-size: 20px; } /* 최솟값 유지 */
  .nl-story-thumb { width: 108px; }
  .nl-pagination { gap: 2px; }
  .nl-page { min-width: 32px; height: 33px; font-size: 14px; } /* 최솟값 14px 유지 */
}