/**
 * news-tabs.css  — 섹션 그룹핑 · 탭 · 슬라이드 · 아코디언 · 뷰 스위치
 * ─────────────────────────────────────────────────────────
 * 구성요소
 *  [A] nt-tab-section      탭형 그룹 섹션
 *  [B] nt-slider           가로 슬라이드 (Swiper)
 *  [C] nt-accordion        아코디언 펼침/접기
 *  [D] nt-view-switch      그리드 ↔ 리스트 뷰 전환
 *  [E] nt-marquee-ticker   가로 자동 스크롤 티커
 *  [F] nt-infinite-scroll  무한 스크롤 로더
 *  [G] nt-sticky-tab       스크롤 고정 탭 바
 * ─────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════
   공통 래퍼 토큰
═══════════════════════════════════════════════════════ */
:root {
  --nt-bg        : #ffffff;
  --nt-border    : #f0f4f8;
  --nt-radius    : 10px;
  --nt-shadow    : 0 2px 8px rgba(0,0,0,.07);
  --nt-tab-h     : 48px;
  --nt-active    : #1565c0;
  --nt-active-bg : #e3f0ff;
  --nt-gray      : #94a3b8;
  --nt-text      : #0f172a;
  --nt-trans     : .22s ease;

  /* ── 타이포그래피 스케일 (PROJECT_RULES.md 원칙3 / layout.css --fs-* 공통 참조) ── */
  --np-fs-xs: var(--fs-xs, 12px);   /* 12px — 배지 전용 */
  --np-fs-sm: var(--fs-sm, 14px);   /* 14px — 메타·날짜·보조텍스트 최솟값 */
  --np-fs-base: var(--fs-base, 16px);   /* 16px — 본문 기본 */
  --np-fs-md: var(--fs-md, 17px);   /* 17px — 강조 본문·버튼·폼 */
  --np-fs-lg: var(--fs-lg, 18px);   /* 18px — 카드 제목·섹션명 */
  --np-fs-xl: var(--fs-xl, 20px);   /* 20px — 서브 헤더 */
  --np-fs-2xl: var(--fs-2xl, 24px);   /* 24px — 페이지 제목 */
  --np-fs-3xl: var(--fs-3xl, 28px);   /* 28px — 섹션 대제목 */
  --np-fs-hero: var(--fs-hero, 32px);   /* 32px — 히어로 제목 */
}

/* ═══════════════════════════════════════════════════════
   [A] 탭형 그룹 섹션
   마크업:
     <div class="nt-tab-section">
       <div class="nt-tab-bar">
         <button class="nt-tab-btn active" data-tab="tab-1">정치</button>
         <button class="nt-tab-btn"        data-tab="tab-2">경제</button>
         ...
         <a class="nt-tab-more">더보기</a>
       </div>
       <div class="nt-tab-pane active" id="tab-1">…cards…</div>
       <div class="nt-tab-pane"        id="tab-2">…cards…</div>
     </div>
═══════════════════════════════════════════════════════ */

.nt-tab-section {
  background: var(--nt-bg);
  border-radius: var(--nt-radius);
  box-shadow: var(--nt-shadow);
  overflow: hidden;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* ── 탭 바 ── */
.nt-tab-bar {
  display: flex;
  align-items: stretch;
  border-bottom: 2px solid var(--nt-border);
  background: #fff;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  position: relative;
}
.nt-tab-bar::-webkit-scrollbar { display: none; }

.nt-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--nt-tab-h);
  /* 좌우 패딩 22px → 탭 클릭 영역 충분히 확보 */
  padding: 0 22px;
  font-size: 15px;
  font-weight: 700;
  color: #64748b;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  white-space: nowrap;
  /* 탭 영역 전체가 클릭 가능하도록 */
  position: relative;
  z-index: 1;
  transition: color var(--nt-trans), border-color var(--nt-trans), background var(--nt-trans);
  flex-shrink: 0;
}
.nt-tab-btn i { font-size: 14px; }
.nt-tab-btn:hover {
  color: var(--nt-active);
  background: #f8fafc;
}
.nt-tab-btn.active {
  color: var(--nt-active);
  border-bottom-color: var(--nt-active);
  background: var(--nt-active-bg);
}
/* 카운트 배지 */
.nt-tab-btn .nt-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 14px;
  font-weight: 700;
  background: #e2e8f0;
  color: #64748b;
  border-radius: 8px;
  transition: background var(--nt-trans), color var(--nt-trans);
}
.nt-tab-btn.active .nt-tab-count {
  background: var(--nt-active);
  color: #fff;
}

/* 더보기 링크 (탭 바 우측 끝) - 다른 화면 이동형 */
.nt-tab-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: var(--nt-tab-h);
  padding: 0 10px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--nt-gray);
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
  flex-shrink: 0;
  transition: color var(--nt-trans);
}
.nt-tab-more:hover { color: var(--nt-active); }
.nt-tab-more i { font-size: 14px; }

/* 섹션 접기/펼치기 토글 버튼 - 박스형으로 명확히 */
.nt-tab-bar .nt-sec-toggle {
  margin-left: 0;
  margin-right: 8px;
  align-self: center;
}

/* ── 탭 패널 ── */
.nt-tab-pane {
  display: none;
  padding: 14px 16px 18px;
  animation: nt-fade-in .2s ease;
}
.nt-tab-pane.active { display: block; }

@keyframes nt-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 탭 안 그리드 ── */
.nt-tab-pane .nt-grid-4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
}
.nt-tab-pane .nt-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
}
.nt-tab-pane .nt-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
}
.nt-tab-pane .nt-list {
  display: flex;
  flex-direction: column;
}

/* ── 아코디언 안 그리드 (탭 컨텍스트 없음) ── */
.nt-acc-body .nt-grid-4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 14px;
  padding: 6px 0;
}
.nt-acc-body .nt-grid-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px;
  padding: 6px 0;
}
.nt-acc-body .nt-grid-2 {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
  padding: 6px 0;
}

/* ── 복합 레이아웃: 대표 + 사이드 리스트 ── */
.nt-featured-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 0;
  align-items: stretch;
}
/* 좌측 대표 기사 컬럼 */
.nt-feat-main {
  min-width: 0;
  padding: 16px 20px 16px 16px;
  display: flex;
  flex-direction: column;
}
.nt-featured-aside {
  min-width: 0;
  border-left: 1px solid var(--nt-border);
  padding: 14px 16px 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 대표 기사 이미지 (탭 내) */
.nt-feat-img {
  display: block;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 10px;
  background: #e2e8f0;
  /* 이미지가 컬럼 밖으로 넘치지 않도록 */
  max-width: 100%;
}
.nt-feat-img img {
  width: 100%;
  max-width: 100%;   /* 추가: grid 컬럼 너비 초과 방지 */
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}
.nt-tab-section:hover .nt-feat-img img { transform: scale(1.03); }

/* 대표 기사 본문 전체 링크 */
/* 제목+메타 링크 영역 (이미지 아래, 요약문 위까지) */
.nt-feat-body-link {
  display: block;
  width: 100%;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  padding: 10px 0 4px;
}
.nt-feat-body-link:hover .nt-feat-title { color: #1565c0; }

.nt-feat-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--nt-text);
  line-height: 1.5;
  margin: 0 0 6px;
  word-break: keep-all;
}
.nt-feat-title a { color: inherit; text-decoration: none; }
.nt-feat-title a:hover { color: #1565c0; }

.nt-feat-lead {
  font-size: 14px;
  color: #64748b;
  line-height: 1.65;
  margin: 6px 0 0;
  padding: 8px 0 6px;
  border-top: 1px dashed #e8edf2;
  flex: 1;
}
.nt-feat-footer {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #f1f5f9;
}

/* ── 사이드 목록 아이템 ── */
.nt-side-item {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--nt-border);
  transition: background var(--nt-trans);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  flex: 1;
}
.nt-side-item:last-child { border-bottom: none; }
.nt-side-item:hover { background: #f8fafc; padding-left: 5px; border-radius: 4px; }
.nt-side-thumb {
  width: 80px;
  height: 56px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.nt-side-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}
.nt-side-item:hover .nt-side-thumb img { transform: scale(1.06); }
.nt-side-body { flex: 1; min-width: 0; }
.nt-side-title {
  display: -webkit-box;
  font-size: 14px;
  font-weight: 700;
  color: var(--nt-text);
  text-decoration: none;
  line-height: 1.5;
  word-break: keep-all;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.nt-side-title:hover { color: #1565c0; }
.nt-side-meta {
  font-size: 14px;
  color: #94a3b8;
  margin-top: 3px;
}
/* 목록으로 링크 */
.nt-feat-listlink {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--nt-border);
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  transition: color .2s;
}
.nt-feat-listlink:hover { color: #03c75a; }

/* ── GRP1 탭 레이아웃 ── */
/* ① 상단 대표기사: 전체 영역 클릭 */
.nt-grp1-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--nt-border);
  align-items: start;
  position: relative;          /* 오버레이 기준 */
  cursor: pointer;
}
/* 전체 덮는 투명 링크 오버레이 */
.nt-grp1-top > .nt-feat-img::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* 내부 텍스트/링크는 오버레이 위에 */
.nt-grp1-top-body {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}
.nt-grp1-top .nt-feat-img {
  margin-bottom: 0;
  border-radius: 8px;
  overflow: hidden;
  display: block;
}
/* ② 상단 대표기사 내부 요소 — 카드 <a> 로 클릭 전달 */
.nt-grp1-top * { pointer-events: none; }
.nt-grp1-top:hover { background: #f8fafc; }
.nt-grp1-top:hover .nt-feat-img img { transform: scale(1.02); }
.nt-grp1-top-body .nt-feat-title {
  font-size: 18px;
  line-height: 1.5;
}
.nt-grp1-top-body .nt-feat-lead {
  font-size: 14px;
  color: #64748b;
  line-height: 1.7;
  flex: 1;
}

/* 하단: 기사 목록 2열 3행 카드 */
.nt-grp1-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--nt-border);
  border-top: 1px solid var(--nt-border);
}
/* ② 하단 카드: <a> 전체 감싸기 + 내부 요소 pointer 보장 */
.nt-grp1-card {
  display: flex;
  gap: 10px;
  padding: 12px 16px;
  background: #fff;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
  cursor: pointer;
}
.nt-grp1-card * { pointer-events: none; }   /* 내부 요소 클릭 → 카드 <a>로 전달 */
.nt-grp1-card:hover { background: #f8fafc; }
.nt-grp1-thumb {
  width: 88px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.nt-grp1-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.nt-grp1-card:hover .nt-grp1-thumb img { transform: scale(1.06); }
.nt-grp1-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nt-grp1-title {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nt-grp1-card:hover .nt-grp1-title { color: #1565c0; }
.nt-grp1-meta {
  font-size: 14px;
  color: #94a3b8;
  margin-top: auto;
}

/* 하단 목록으로 바 */
.nt-grp1-foot {
  padding: 10px 18px;
  border-top: 1px solid var(--nt-border);
  background: #f8fafc;
}

/* ═══════════════════════════════════════════════════════
   [B] 슬라이더 섹션 (Swiper 기반)
   마크업:
     <div class="nt-slider-section">
       <div class="nt-slider-head">…</div>
       <div class="nt-slider-wrap">
         <div class="swiper nt-swiper">
           <div class="swiper-wrapper">
             <div class="swiper-slide">…card…</div>
           </div>
         </div>
         <div class="nt-swiper-prev nt-swiper-btn"><i class="fas fa-chevron-left"></i></div>
         <div class="nt-swiper-next nt-swiper-btn"><i class="fas fa-chevron-right"></i></div>
         <div class="nt-swiper-pagination"></div>
       </div>
     </div>
═══════════════════════════════════════════════════════ */
/* 디버깅 감춤 처리 제거 완료 — 원인: initStickyTabs scrollIntoView */

.nt-slider-section {
  background: var(--nt-bg);
  border-radius: var(--nt-radius);
  box-shadow: var(--nt-shadow);
  overflow: hidden;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.nt-slider-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 16px 12px;
  border-bottom: 1px solid var(--nt-border);
}
.nt-slider-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--nt-text);
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  border-left: 4px solid currentColor;
  padding-left: 10px;
}
.nt-slider-title i { font-size: 14px; }
.nt-slider-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nt-slider-more {
  font-size: 14px;
  color: var(--nt-gray);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: color var(--nt-trans);
}
.nt-slider-more:hover { color: #475569; }

/* Swiper 래퍼 */
.nt-slider-wrap {
  position: relative;
  padding: 14px 16px 18px;
}
.nt-swiper {
  overflow: hidden;
  border-radius: 6px;
  /*
   * touch-action: pan-y
   *   브라우저에게 "수직 스크롤은 내가 처리한다"고 명시
   *   → Swiper가 touchstart 를 독점하더라도
   *     브라우저가 수직 pan 제스처를 먼저 인식해
   *     페이지 스크롤이 정상 작동함
   *   → 수평 스와이프(pan-x)는 Swiper가 그대로 처리
   */
  touch-action: pan-y;
}
/* 슬라이드 당 4개 → CSS로 width 설정 (JS가 덮어씀) */
.nt-swiper .swiper-slide {
  height: auto;
}
/* ─────────────────────────────────────────────────────
   핵심: swiper-wrapper 에 touch-action: pan-y 적용
   Swiper CDN이 swiper-wrapper 에 touch-action:none 을 설정하는데
   이를 pan-y 로 덮어써서 브라우저가 수직 스크롤을 직접 처리하게 함
───────────────────────────────────────────────────── */
.nt-swiper .swiper-wrapper,
.nt-hero-swiper .swiper-wrapper {
  touch-action: pan-y !important;
}

/* 화살표 버튼 */
.nt-swiper-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 34px;
  height: 34px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: #475569;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  transition: background var(--nt-trans), color var(--nt-trans), box-shadow var(--nt-trans);
  user-select: none;
}
.nt-swiper-btn:hover {
  background: var(--nt-active);
  color: #fff;
  border-color: var(--nt-active);
  box-shadow: 0 4px 12px rgba(21,101,192,.25);
}
.nt-swiper-btn.swiper-button-disabled {
  opacity: .35;
  pointer-events: none;
}
.nt-swiper-prev { left: -4px; }
.nt-swiper-next { right: -4px; }

/* Pagination dots */
.nt-swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 12px;
}
.nt-swiper-pagination .swiper-pagination-bullet {
  width: 7px;
  height: 7px;
  background: #cbd5e1;
  border-radius: 50%;
  cursor: pointer;
  transition: background var(--nt-trans), transform var(--nt-trans);
}
.nt-swiper-pagination .swiper-pagination-bullet-active {
  background: var(--nt-active);
  transform: scale(1.3);
}

/* ── 헤드라인 히어로 슬라이더 ── */
.nt-hero-slider .nt-slider-wrap { padding: 0; }
.nt-hero-slider .nt-swiper-btn {
  width: 40px;
  height: 40px;
  top: 45%;
}
.nt-hero-slider .nt-swiper-prev { left: 12px; }
.nt-hero-slider .nt-swiper-next { right: 12px; }
.nt-hero-slide {
  position: relative;
  display: block;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  border-radius: var(--nt-radius) var(--nt-radius) 0 0;
  /* 수직 스크롤 허용: 오버레이 영역에서도 위아래 스크롤 가능 */
  touch-action: pan-y;
}
.nt-hero-slide img {
  width: 100%;
  aspect-ratio: 21/9;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}
.nt-hero-slider .swiper-slide-active .nt-hero-slide img { transform: scale(1.03); }
.nt-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.08) 55%, transparent 100%);
}
.nt-hero-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 24px 22px;
}
.nt-hero-title {
  font-size: 22px;
  font-weight: 900;
  color: #fff;
  line-height: 1.45;
  text-shadow: 0 1px 6px rgba(0,0,0,.5);
  margin: 6px 0 8px;
  word-break: keep-all;
}
.nt-hero-meta {
  font-size: 14px;
  color: rgba(255,255,255,.75);
  display: flex;
  gap: 10px;
}
/* 히어로 페이지네이션 (오버레이 위) */
.nt-hero-slider .nt-swiper-pagination {
  position: absolute;
  bottom: 14px;
  right: 18px;
  margin-top: 0;
  z-index: 5;
}
.nt-hero-slider .nt-swiper-pagination .swiper-pagination-bullet {
  background: rgba(255,255,255,.5);
}
.nt-hero-slider .nt-swiper-pagination .swiper-pagination-bullet-active {
  background: #fff;
}

/* ── 자동재생 진행 바 ── */
.nt-slider-progress {
  height: 3px;
  background: #f0f4f8;
  border-radius: 0 0 var(--nt-radius) var(--nt-radius);
  overflow: hidden;
}
.nt-slider-progress-bar {
  height: 100%;
  background: var(--nt-active);
  border-radius: 2px;
  width: 0%;
  transition: width linear;
}

/* ═══════════════════════════════════════════════════════
   [C] 아코디언 섹션
   마크업:
     <div class="nt-accordion">
       <div class="nt-acc-item open">
         <button class="nt-acc-head">
           <span>정치</span><i class="fas fa-chevron-down"></i>
         </button>
         <div class="nt-acc-body">…cards…</div>
       </div>
     </div>
═══════════════════════════════════════════════════════ */
.nt-accordion {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;        /* yn-wrap flex 컨테이너 안에서 가로 100% 확보 */
  min-width: 0;
  box-sizing: border-box;
}
.nt-acc-item {
  background: var(--nt-bg);
  border-radius: var(--nt-radius);
  box-shadow: var(--nt-shadow);
  overflow: hidden;
  border: 1px solid var(--nt-border);
  transition: box-shadow var(--nt-trans);
}
.nt-acc-item.open { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.nt-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  color: var(--nt-text);
  transition: background var(--nt-trans);
  min-height: 60px;
}
.nt-acc-head:hover { background: #f0f6ff; }
.nt-acc-head .nt-acc-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nt-acc-head .nt-acc-left i { font-size: 18px; }
/* 아코디언 펼치기/접기 버튼 (chevron 회전형) */
.nt-acc-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  border-radius: 50%;
  cursor: pointer;
  color: #475569;
  font-size: 14px;
  flex-shrink: 0;
  transition: background .2s, color .2s, border-color .2s;
}
.nt-acc-toggle-btn i {
  transition: transform .3s cubic-bezier(0.4,0,0.2,1);
  display: block;
}
.nt-acc-toggle-btn:hover { background: #e2e8f0; color: #1e293b; border-color: #94a3b8; }
.nt-acc-item.open .nt-acc-toggle-btn { background: var(--nt-active-bg); border-color: var(--nt-active); color: var(--nt-active); }
/* 열린 상태: chevron-up 그대로 / 닫힌 상태: 180도 회전 → chevron-down 효과 */
.nt-acc-item:not(.open) .nt-acc-toggle-btn i { transform: rotate(180deg); }

/* 아코디언 목록보기 링크 (작게, 명확하게) */
.nt-acc-goto {
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  gap: 4px;
}
.nt-acc-goto:hover { color: var(--nt-active); }
.nt-acc-goto i { font-size: 14px; }
.nt-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .38s cubic-bezier(0.4,0,0.2,1),
              padding var(--nt-trans);
  padding: 0 16px;
}
.nt-acc-item.open .nt-acc-body {
  max-height: 2400px;
  padding: 0 16px 16px;
}

/* ═══════════════════════════════════════════════════════
   [D] 뷰 스위치: 그리드 ↔ 리스트
   마크업:
     <div class="nt-view-bar">
       <span class="nt-view-label">정치 기사</span>
       <div class="nt-view-switch">
         <button class="nt-vs-btn active" data-view="grid" title="그리드"><i class="fas fa-th-large"></i></button>
         <button class="nt-vs-btn"        data-view="list" title="리스트"><i class="fas fa-list"></i></button>
       </div>
     </div>
     <div class="nt-view-content grid-view">…</div>
═══════════════════════════════════════════════════════ */
.nt-view-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px 10px;
  border-bottom: 1px solid var(--nt-border);
}
.nt-view-label {
  font-size: 14px;
  color: var(--nt-gray);
}
.nt-view-switch {
  display: flex;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.nt-vs-btn {
  width: 28px;
  height: 24px;
  border: none;
  background: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--nt-trans), color var(--nt-trans);
}
.nt-vs-btn.active {
  background: #fff;
  color: var(--nt-active);
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.nt-vs-btn:hover:not(.active) { color: #475569; }

/* 뷰 콘텐츠 컨테이너 */
.nt-view-content { padding: 14px 16px 16px; }
.nt-view-content.grid-view .nt-grid-4  { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.nt-view-content.grid-view .nt-grid-3  { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.nt-view-content.list-view .nt-grid-4,
.nt-view-content.list-view .nt-grid-3  { display: flex; flex-direction: column; }
.nt-view-content.list-view .nc-card    {
  flex-direction: row;
  align-items: flex-start;
}
.nt-view-content.list-view .nc-card .nc-thumb {
  width: 140px;
  flex-shrink: 0;
  border-radius: 8px 0 0 8px;
}
.nt-view-content.list-view .nc-card .nc-thumb img {
  width: 140px;
  height: 90px;
  aspect-ratio: unset;
  border-radius: 8px 0 0 8px;
}
.nt-view-content.list-view .nc-card .nc-body {
  padding: 10px 12px;
}
.nt-view-content.list-view .nc-title { font-size: 14px; -webkit-line-clamp: 2; }

/* ═══════════════════════════════════════════════════════
   [E] 마퀴 티커 (수평 자동 스크롤)
═══════════════════════════════════════════════════════ */
.nt-ticker-wrap {
  background: #1a237e;
  border-radius: var(--nt-radius);
  box-shadow: var(--nt-shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0;
}
.nt-ticker-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  background: #283593;
  height: 100%;
  flex-shrink: 0;
  border-right: 1px solid rgba(255,255,255,.15);
}
.nt-ticker-label i { font-size: 14px; color: #ffb300; }
.nt-ticker-track {
  flex: 1;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}
.nt-ticker-list {
  display: flex;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  animation: nt-ticker-scroll 40s linear infinite;
  white-space: nowrap;
}
.nt-ticker-wrap:hover .nt-ticker-list { animation-play-state: paused; }
@keyframes nt-ticker-scroll {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}
.nt-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 0 24px 0 0;
}
.nt-ticker-item a {
  font-size: 14px;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  transition: color var(--nt-trans);
}
.nt-ticker-item a:hover { color: #fff; text-decoration: underline; }
.nt-ticker-cat {
  font-size: 14px;
  font-weight: 700;
  color: #ffb300;
  margin-right: 5px;
}
.nt-ticker-sep {
  color: rgba(255,255,255,.3);
  font-size: 14px;
  margin-left: 24px;
  margin-right: 0;
}

/* ═══════════════════════════════════════════════════════
   [F] 무한 스크롤 로더
═══════════════════════════════════════════════════════ */
.nt-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 0;
  gap: 10px;
  color: #94a3b8;
  font-size: 14px;
}
.nt-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: var(--nt-active);
  border-radius: 50%;
  animation: nt-spin .7s linear infinite;
}
@keyframes nt-spin {
  to { transform: rotate(360deg); }
}
.nt-load-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 24px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 24px;
  font-size: 14px;
  font-weight: 700;
  color: #475569;
  cursor: pointer;
  transition: all var(--nt-trans);
  margin: 16px auto 0;
}
.nt-load-more-btn:hover {
  background: var(--nt-active);
  color: #fff;
  border-color: var(--nt-active);
  box-shadow: 0 4px 12px rgba(21,101,192,.2);
}
.nt-load-more-btn.loading {
  pointer-events: none;
  opacity: .7;
}
.nt-load-more-btn.loading .nt-btn-icon {
  animation: nt-spin .7s linear infinite;
}

/* ═══════════════════════════════════════════════════════
   [G] 스티키 탭 바 (스크롤 시 상단 고정)
═══════════════════════════════════════════════════════ */
/* ─── 3차 섹션 이동 스티키 탭 바 ───────────────────────────── */
.nt-sticky-tabs {
  background: #f1f5f9;           /* 2차(#fff)와 확실히 다른 배경 */
  border-top: 1px solid #e2e8f0;
  border-bottom: 2px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0,0,0,.07);
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  scrollbar-width: none;
  /* 오른쪽 마지막 탭이 잘리지 않도록 fade-out 그라데이션 힌트 */
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
  mask-image: linear-gradient(to right, black calc(100% - 40px), transparent 100%);
}
.nt-sticky-tabs::-webkit-scrollbar { display: none; }
/* 마지막 탭 뒤에 여백 확보 (mask 뒤로 숨겨진 영역) */
.nt-sticky-tabs::after {
  content: '';
  flex-shrink: 0;
  min-width: 40px;
}

/* 섹션 이동 레이블 */
.nt-sticky-tab-label {
  display: inline-flex;
  align-items: center;
  padding: 0 12px 0 14px;
  font-size: 14px;
  font-weight: 700;
  color: #94a3b8;
  white-space: nowrap;
  flex-shrink: 0;
  border-right: 1px solid #e2e8f0;
  letter-spacing: .03em;
}

.nt-sticky-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 46px;
  padding: 0 20px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  /* 위쪽에도 투명 경계 → 활성시 inset 강조선 표시 */
  border-top: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--nt-trans), border-color var(--nt-trans), background var(--nt-trans);
  flex-shrink: 0;
  position: relative;
}
.nt-sticky-tab-btn:hover {
  color: var(--nt-active);
  background: #e8f0fe;
}
/* 활성 탭: 배경색 + 위아래 강조선 + 진한 글씨로 2차 탭과 명확히 구분 */
.nt-sticky-tab-btn.active {
  color: var(--nt-active);
  font-weight: 800;
  background: #dbeafe;
  border-bottom-color: var(--nt-active);
  border-top-color: var(--nt-active);
}

/* ═══════════════════════════════════════════════════════
   [H] 섹션 레이아웃 - 복합 구성 (탭 + 슬라이드 혼합)
═══════════════════════════════════════════════════════ */

/* 섹션 구분 래퍼 (yn-wrap 내부) */
.nt-section-group {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 2단 사이드 레이아웃 */
.nt-layout-main-side {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
.nt-side-sticky {
  position: sticky;
  top: 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 광고 삽입 구역 */
.nt-section-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 4px 0;
}
.nt-ad-label {
  font-size: 14px;
  color: #b0bec5;
  letter-spacing: .08em;
  font-weight: 500;
}
.nt-ad-slot {
  width: 100%;
  max-width: 1200px;
  height: 90px;
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: #94a3b8;
  cursor: pointer;
  transition: background var(--nt-trans);
  position: relative;
}
.nt-ad-slot:hover { background: #f1f5f9; }
.nt-ad-slot .nt-ad-tag {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 14px;
  font-weight: 700;
  color: #94a3b8;
  letter-spacing: .06em;
  background: #e2e8f0;
  padding: 1px 5px;
  border-radius: 2px;
}
.nt-ad-slot.rect {
  max-width: 300px;
  height: 250px;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════
   반응형
═══════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  /* 1100px 이하: 비율 유지하되 우측 컬럼 최소 220px 보장 */
  .nt-featured-row { grid-template-columns: minmax(0,3fr) minmax(220px,2fr); }
  .nt-tab-pane .nt-grid-4 { grid-template-columns: repeat(3,1fr); }
  .nt-acc-body .nt-grid-4 { grid-template-columns: repeat(3,1fr); }
  .nt-layout-main-side { grid-template-columns: 1fr 260px; }
}
@media (max-width: 900px) {
  /* 900px 이하: 단일 컬럼으로 전환 */
  .nt-featured-row { grid-template-columns: 1fr; }
  .nt-featured-row > *:first-child { padding: 14px 16px 16px; }
  .nt-featured-aside {
    border-left: none;
    border-top: 1px solid var(--nt-border);
    padding: 12px 16px 16px;
  }
  .nt-tab-pane .nt-grid-4,
  .nt-tab-pane .nt-grid-3 { grid-template-columns: repeat(2,1fr); }
  .nt-acc-body .nt-grid-4,
  .nt-acc-body .nt-grid-3 { grid-template-columns: repeat(2,1fr); }
  .nt-layout-main-side { grid-template-columns: 1fr; }
  .nt-side-sticky { position: static; }
  .nt-hero-slide img { aspect-ratio: 16/9; }
}
@media (max-width: 600px) {
  .nt-tab-btn { padding: 0 10px; font-size: 14px; }
  .nt-tab-pane .nt-grid-4,
  .nt-tab-pane .nt-grid-3,
  .nt-tab-pane .nt-grid-2 { grid-template-columns: 1fr; }
  .nt-acc-body .nt-grid-4,
  .nt-acc-body .nt-grid-3,
  .nt-acc-body .nt-grid-2 { grid-template-columns: 1fr; }
  .nt-hero-title { font-size: 16px; }
  .nt-hero-body { padding: 14px 14px 16px; }
  .nt-swiper-btn { display: none; }
  .nt-slider-wrap { padding: 10px 10px 14px; }
  .nt-view-content { padding: 10px 10px 12px; }
}

/* ═══════════════════════════════════════════════════════
   애니메이션 유틸리티
   기본값: visible (JS 없이도 콘텐츠 표시)
   JS가 .js-ready 클래스를 <html>에 추가하면 애니메이션 활성화
═══════════════════════════════════════════════════════ */
.nt-appear {
  opacity: 1;
  transform: translateY(0);
  transition: opacity .4s ease, transform .4s ease;
}
/* JS 로드 후 애니메이션 대기 상태 */
.js-ready .nt-appear {
  opacity: 0;
  transform: translateY(12px);
}
.js-ready .nt-appear.visible {
  opacity: 1;
  transform: translateY(0);
}
/* 순차 지연 (JS 환경에서만 적용) */
.js-ready .nt-appear:nth-child(1) { transition-delay: .05s; }
.js-ready .nt-appear:nth-child(2) { transition-delay: .10s; }
.js-ready .nt-appear:nth-child(3) { transition-delay: .15s; }
.js-ready .nt-appear:nth-child(4) { transition-delay: .20s; }
.js-ready .nt-appear:nth-child(5) { transition-delay: .25s; }

/* ── 접기/펼치기 토글 버튼 ── */
.nt-sec-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 60px;
  height: 28px;
  padding: 0 10px;
  margin-left: 6px;
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  cursor: pointer;
  color: #475569;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s;
}
.nt-sec-toggle:hover { background: #e2e8f0; color: #1e293b; border-color: #94a3b8; }
.nt-sec-toggle i { font-size: 14px; transition: none; }
.nt-sec-toggle .nt-toggle-label { font-size: 14px; }

/* 접힌 상태 */
.nt-tab-section.collapsed .nt-tab-pane,
.nt-tab-section.collapsed .nt-view-content,
.nt-tab-section.collapsed .nt-grid-3,
.nt-tab-section.collapsed .nt-slider-wrap {
  display: none !important;
}

/* 슬라이더 섹션 접힘 */
.nt-slider-section.collapsed .nt-slider-wrap,
.nt-slider-section.collapsed .swiper { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   버튼 유형별 시각 구분 시스템
   [이동형] ↗ 파란 계열  /  [토글형] ▣ 회색 박스
═══════════════════════════════════════════════════════════════ */

/* ── 이동형(가기): 페이지 이동 링크 공통 스타일 ── */
.np-goto {
  color: #475569;
  font-weight: 600;
  text-decoration: none;
  transition: color .15s;
}
.np-goto:hover {
  color: #1565c0;
  text-decoration: none;
}
.np-goto i.fa-arrow-up-right-from-square {
  font-size: 14px;
  opacity: .75;
}

/* ── 탭바 내 "전체 목록" / "목록으로" 링크 ── */
.nt-tab-more.np-goto {
  color: #475569;
  font-size: 14px;
  font-weight: 600;
}
.nt-tab-more.np-goto:hover { color: #1565c0; }

/* ── 토글 버튼: 박스형, 텍스트 포함으로 역할 명확화 ── */
.nt-sec-toggle {
  /* 배경이 있어야 박스처럼 보임 */
  background: #f1f5f9;
  border: 1.5px solid #cbd5e1;
  color: #334155;
}
.nt-sec-toggle:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}
/* 접힌 상태: 펼치기 버튼 강조 */
.nt-tab-section.collapsed .nt-sec-toggle,
.nt-slider-section.collapsed .nt-sec-toggle,
.np-sec.collapsed .nt-sec-toggle {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}

/* ── 아코디언 chevron 버튼 (반응형) ── */
.nt-acc-toggle-btn {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  color: #475569;
}
.nt-acc-toggle-btn:hover {
  background: #dbeafe;
  border-color: #93c5fd;
  color: #1d4ed8;
}
.nt-acc-item.open .nt-acc-toggle-btn {
  background: #eff6ff;
  border-color: #93c5fd;
  color: #1d4ed8;
}