/* ═══════════════════════════════════════════════════════════
   여수포털뉴스 · 뉴스포털 통합 CSS
   news-portal.css  — 인덱스·목록·상세 3화면 통합
   거래포털(realestate.css) 골격 동일 적용
═══════════════════════════════════════════════════════════ */

/* ── CSS 변수 ──
   portal-widgets.css의 --pw-* 공통 토큰을 우선 참조하고,
   뉴스 전용 색상은 별도 --np-* 변수로 유지합니다.
   로드 순서: portal-widgets.css → news-portal.css (header.php 자동 적용)
── */
:root {
  /* 뉴스포털 전용 primary: 공통 토큰 참조 후 고유색 fallback */
  --np-primary:      var(--pw-primary,      #03c75a);
  --np-primary-dark: var(--pw-primary-dark, #029a47);
  --np-blue:         #1565c0;
  --np-red:          #d32f2f;
  --np-orange:       #e65100;
  --np-gray:         #64748b;
  --np-bg:           #f8fafc;
  --np-white:        #ffffff;
  --np-border:       #e2e8f0;
  --np-text:         #1e293b;
  --np-muted:        #64748b;
  --np-radius:       10px;
  --np-shadow:       0 2px 8px rgba(0,0,0,.08);
  --np-shadow-lg:    0 6px 24px rgba(0,0,0,.12);

  /* ── 타이포그래피 스케일 (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 — 히어로 제목 */
}

/* ── sector-inner grid 탈출 ── */
.np-subnav,
.np-page-header,
.np-type-tabs,
.np-cattabs,
.np-filter-panel,
.np-content-wrap { grid-column: 1 / -1; width: 100%; box-sizing: border-box; }

/* ══ 서브네비 ══ */
.np-subnav {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  position: sticky;
  top: 0;
  z-index: 50;
}
.np-subnav-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 16px;
  align-items: center;
  position: relative;
  /* 탭 영역은 버튼 자리 확보를 위해 오른쪽 padding 추가 */
  padding-right: 130px;
}

/* 탭 그룹 - flex-grow로 공간 채움 */
.np-snav-tabs-wrap {
  display: contents; /* 자식 요소가 flex 컨테이너 직계 자식처럼 동작 */
}

.np-snav-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 20px;
  background: #f1f5f9;
  color: #475569;
  font-size: var(--np-fs-base);
  font-weight: 500;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.np-snav-item:hover,
.np-snav-item.active { background: var(--np-primary); color: #fff; }

/* ══ 서브네비 더보기/접기 버튼 ── 우측 고정 + 차별화 ══ */
.np-snav-toggle-wrap {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  /* 탭 행이 여러 줄 되어도 버튼이 항상 우측에 고정 */
  z-index: 2;
  /* 좌측에 경계선 효과 */
  padding-left: 12px;
}
.np-snav-toggle-wrap::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: linear-gradient(to bottom, transparent, #cbd5e1, transparent);
}

.np-snav-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 8px;
  /* 그라디언트 배경으로 눈에 띄게 */
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #f0f9ff;
  font-size: var(--np-fs-base);
  font-weight: 700;
  border: 1.5px solid #475569;
  cursor: pointer;
  white-space: nowrap;
  transition: all .2s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 2px 8px rgba(15,23,42,.25), 0 1px 3px rgba(15,23,42,.15);
  letter-spacing: .3px;
  position: relative;
  overflow: hidden;
}
/* 좌측 컬러 포인트 라인 */
.np-snav-toggle::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--np-primary, #03c75a);
  border-radius: 8px 0 0 8px;
  transition: width .2s;
}
.np-snav-toggle:hover {
  background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
  border-color: var(--np-primary, #03c75a);
  color: #fff;
  box-shadow: 0 4px 16px rgba(3,199,90,.25), 0 2px 6px rgba(15,23,42,.2);
  transform: translateY(-1px);
}
.np-snav-toggle:hover::before {
  width: 5px;
}
.np-snav-toggle:active {
  transform: translateY(0);
  box-shadow: 0 1px 4px rgba(15,23,42,.2);
}

/* 아이콘 */
.np-snav-toggle .np-toggle-icon {
  font-size: var(--np-fs-base);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
  color: var(--np-primary, #03c75a);
  flex-shrink: 0;
}
/* 접기 상태일 때 아이콘 회전 */
.np-snav-toggle.is-expanded .np-toggle-icon {
  transform: rotate(180deg);
}

/* 텍스트 */
.np-snav-toggle-txt {
  font-size: var(--np-fs-base);
  font-weight: 700;
}

/* 카운트 배지 (숨겨진 탭 수 표시) */
.np-snav-toggle-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--np-primary, #03c75a);
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 800;
  line-height: 1;
  transition: all .2s;
}
/* 접기 상태에서 배지 숨김 */
.np-snav-toggle.is-expanded .np-snav-toggle-badge {
  opacity: 0;
  width: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
}

/* 반응형: 좁은 화면에서 버튼 텍스트 단축 */
@media (max-width: 600px) {
  .np-subnav-inner {
    padding-right: 96px;
  }
  .np-snav-toggle {
    padding: 7px 11px;
    gap: 4px;
  }
  .np-snav-toggle-txt {
    font-size: var(--np-fs-base);
  }
  .np-snav-toggle-badge {
    min-width: 16px;
    height: 16px;
    font-size: var(--np-fs-base);
  }
}

.np-write-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 20px;
  background: var(--np-primary);
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.np-write-btn:hover { background: var(--np-primary-dark); }

/* ══ 페이지 헤더 ══ */
.np-page-header {
  background: linear-gradient(135deg, #03c75a 0%, #029a47 100%);
  color: #fff;
  padding: 28px 24px;
}
.np-page-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.np-page-header h1 { margin: 0 0 6px; font-size: var(--np-fs-2xl); font-weight: 800; }
.np-page-header p  { margin: 0; opacity: .88; font-size: var(--np-fs-base); }

/* ══ 하위 카테고리 전체 목록 (녹색 타이틀 아래) ══ */
/* ══ 하위 카테고리 칩 목록 ══ */
.np-subcats-wrap {
  background: #f8fafc;
  border-bottom: 2px solid #e2e8f0;
  padding: 10px 16px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}
.np-subcat-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 9px;
  font-size: var(--np-fs-base);
  font-weight: 500;
  color: #475569;
  text-decoration: none;
  border-radius: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  transition: all .13s;
  line-height: 1.5;
}
.np-scc-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: .55;
}
.np-scc-cnt {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 0 6px;
  line-height: 1.5;
}
.np-subcat-chip:hover {
  background: #ecfdf5;
  border-color: var(--np-primary);
  color: var(--np-primary);
}
.np-subcat-chip:hover .np-scc-dot { opacity: 1; }
.np-subcat-chip.active {
  background: var(--np-primary);
  border-color: var(--np-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(3,199,90,.25);
}
.np-subcat-chip.active .np-scc-dot { opacity: 1; background: rgba(255,255,255,.6) !important; }
.np-subcat-chip.active .np-scc-cnt { background: rgba(255,255,255,.22); color: #fff; }
@media (max-width: 640px) {
  .np-subcats-wrap { padding: 8px 12px; gap: 5px; }
  .np-subcat-chip { font-size: var(--np-fs-base); padding: 3px 10px 3px 8px; }
}

/* ══ 카테고리 탭 ══ */
/* ══ 카테고리 탭 (가로 스크롤 + 좌우 화살표) ══ */
.np-type-tabs {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
}
/* 좌우 페이드 마스크 (스크롤 가능 여부 시각 표시) */
.np-type-tabs::after {
  content: '';
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 60px;
  background: linear-gradient(to right, transparent, #fff 80%);
  pointer-events: none;
  z-index: 2;
  transition: opacity .2s;
}
.np-type-tabs.at-end::after { opacity: 0; }

/* 좌우 스크롤 화살표 버튼 */
.np-ttab-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: none; /* JS로 제어 */
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #e2e8f0;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  cursor: pointer;
  color: #475569;
  font-size: var(--np-fs-base);
  transition: all .15s;
  flex-shrink: 0;
}
.np-ttab-arrow:hover { background: var(--np-primary); color: #fff; border-color: var(--np-primary); }
.np-ttab-arrow.visible { display: flex; }
.np-ttab-arrow-left  { left: 6px; }
.np-ttab-arrow-right { right: 6px; }

.np-type-tabs-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-behavior: smooth;
  /* 좌우 화살표 공간 확보 */
  padding: 0 4px;
  /* 끝 항목 잘림 방지 */
  scroll-padding-right: 40px;
}
.np-type-tabs-inner::-webkit-scrollbar { display: none; }
.np-ttab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 14px;
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
}
.np-ttab:hover  { color: var(--np-primary); }
.np-ttab.active {
  color: var(--np-primary);
  border-bottom-color: var(--np-primary);
}
/* active 탭 카운트 배지 강조 */
.np-ttab.active .np-ttab-cnt { background: #d1fae5; color: #065f46; }
/* parent-active: 하위 선택 시 상위 탭 연동 표시 */
.np-ttab.parent-active {
  color: #0ea060;
  border-bottom: 2px solid #a7f3d0;
}
.np-ttab.parent-active .np-ttab-cnt { background: #ecfdf5; color: #065f46; }

.np-ttab-cnt {
  font-size: var(--np-fs-base);
  background: #f1f5f9;
  border-radius: 10px;
  padding: 1px 7px;
  min-width: 24px;
  text-align: center;
}

/* ══════════════════════════════════════════════
   카테고리 탭 2단 구조 (.np-cattabs)
   ① 상위 행 .np-cattabs-parent
   ② 하위 행 .np-cattabs-child
══════════════════════════════════════════════ */
.np-cattabs {
  background: #fff;
  border-bottom: 2px solid #e2e8f0;
  /* grid 탈출 */
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
}

/* ① 상위 카테고리 행 (독립 컴포넌트 – 녹색 타이틀 위) */
.np-cattabs-parent {
  border-bottom: 2px solid #e2e8f0;
  background: #fff;
  overflow-x: auto;
  scrollbar-width: none;
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
}
.np-cattabs-parent::-webkit-scrollbar { display: none; }
.np-cattabs-parent-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 8px;
}

/* 상위 탭 아이템 */
.np-ctp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 9px 13px 8px;
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: all .15s;
  flex-shrink: 0;
  position: relative;
  min-width: 52px;
}
.np-ctp i {
  font-size: var(--np-fs-base);
  margin-bottom: 1px;
  transition: color .15s;
}
.np-ctp-name { font-size: var(--np-fs-base); line-height: 1.2; }
.np-ctp-cnt {
  font-size: var(--np-fs-base);
  background: #f1f5f9;
  border-radius: 8px;
  padding: 0 5px;
  color: #94a3b8;
  line-height: 1.6;
  min-width: 20px;
  text-align: center;
}
.np-ctp:hover {
  color: var(--np-primary);
  background: #f0fdf4;
}
.np-ctp:hover i { color: var(--np-primary); }
/* 직접 선택 active */
.np-ctp.active {
  color: var(--np-primary);
  border-bottom-color: var(--np-primary);
  background: #f0fdf4;
}
.np-ctp.active i { color: var(--np-primary); }
.np-ctp.active .np-ctp-cnt { background: #d1fae5; color: #065f46; }
/* 하위 선택으로 인한 상위 연동 */
.np-ctp.parent-active {
  color: #0ea060;
  border-bottom-color: #a7f3d0;
  background: #f0fdf4;
}
.np-ctp.parent-active i { color: #0ea060; }
.np-ctp.parent-active .np-ctp-cnt { background: #ecfdf5; color: #065f46; }

/* ② 하위 카테고리 그룹 영역 */
.np-cattabs-child {
  background: #f8fafc;
  border-top: 1px solid #e8eef4;
}
.np-cattabs-child-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 10px 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── 카테고리 그룹 (상위 1개 + 하위 칩 묶음) ── */
.np-ctg {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid #f0f4f8;
  transition: opacity .15s;
}
.np-ctg:last-child { border-bottom: none; }

/* 그룹 dimmed (상위 탭 hover 시) */
.np-ctg.dimmed { opacity: .4; pointer-events: none; }

/* 그룹 헤더 라벨 (상위 카테고리명) */
.np-ctg-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  width: 76px;
  min-width: 76px;
  padding: 4px 6px;
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #64748b;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  cursor: default;
  position: relative;
}
.np-ctg-label i {
  font-size: var(--np-fs-base);
  color: var(--ctg-color, #64748b);
}
/* 활성 상위 그룹 라벨 강조 */
.np-ctg-label.active {
  color: var(--ctg-color, var(--np-primary));
  border-color: var(--ctg-color, var(--np-primary));
  background: #f0fdf4;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ctg-color, #03c75a) 15%, transparent);
}

/* 하위 칩 묶음 */
.np-ctg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 5px;
  align-items: center;
  flex: 1;
}

/* 하위 칩 아이템 */
.np-ctc {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px 3px 8px;
  font-size: var(--np-fs-base);
  font-weight: 500;
  color: #64748b;
  text-decoration: none;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  white-space: nowrap;
  transition: all .13s;
  flex-shrink: 0;
  line-height: 1.5;
}
/* 그룹 구분 점 (상위 카테고리 색상) */
.np-ctc-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
  opacity: .65;
}
.np-ctc-cnt {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  background: #f1f5f9;
  border-radius: 8px;
  padding: 0 5px;
  line-height: 1.5;
}
.np-ctc:hover {
  background: #ecfdf5;
  border-color: var(--np-primary);
  color: var(--np-primary);
}
.np-ctc:hover .np-ctc-dot { opacity: 1; }
.np-ctc.active {
  background: var(--np-primary);
  border-color: var(--np-primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 5px rgba(3,199,90,.22);
}
.np-ctc.active .np-ctc-dot { background: rgba(255,255,255,.55) !important; opacity: 1; }
.np-ctc.active .np-ctc-cnt { background: rgba(255,255,255,.2); color: #fff; }

/* 반응형 */
@media (max-width: 640px) {
  .np-ctp { padding: 8px 10px 7px; min-width: 44px; }
  .np-ctp i { font-size: var(--np-fs-base); }
  .np-ctp-name { font-size: var(--np-fs-base); }
  .np-ctp-cnt { font-size: var(--np-fs-base); }
  .np-ctg-label { width: 60px; min-width: 60px; font-size: var(--np-fs-base); padding: 3px 5px; }
  .np-ctc { padding: 2px 8px 2px 6px; font-size: var(--np-fs-base); }
  .np-ctg { gap: 6px; padding: 4px 0; }
}

/* ══ 검색·필터 패널 ══ */
.np-filter-panel {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 12px 0;
}
.np-filter-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.np-finput {
  padding: 6px 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: var(--np-fs-base);
  color: #374151;
  background: #fff;
}
.np-finput:focus { outline: none; border-color: var(--np-primary); }
.np-fbtn-search {
  padding: 6px 16px;
  border-radius: 8px;
  background: var(--np-primary);
  color: #fff;
  border: none;
  font-size: var(--np-fs-base);
  font-weight: 600;
  cursor: pointer;
}
.np-fbtn-search:hover { background: var(--np-primary-dark); }
.np-fbtn-reset {
  padding: 6px 12px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  border: 1.5px solid #e2e8f0;
  font-size: var(--np-fs-base);
  cursor: pointer;
  text-decoration: none;
}
.np-fbtn-reset:hover { background: #e2e8f0; }

/* ══ 콘텐츠 영역 (목록 + 사이드바) ══ */
.np-content-wrap {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  padding: 24px 16px 60px;
  align-items: start;
}

/* ── 정렬 바 ── */
.np-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.np-list-total {
  font-size: var(--np-fs-base);
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.np-list-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: 20px;
  font-size: var(--np-fs-base);
  font-weight: 700;
  white-space: nowrap;
}
.np-list-section-badge i { font-size: var(--np-fs-base); }
.np-list-total-text { color: #64748b; font-size: var(--np-fs-base); }
.np-list-total-text strong { color: #1e293b; font-weight: 700; }
.np-sort-sel {
  padding: 5px 10px;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  font-size: var(--np-fs-base);
  background: #fff;
}

/* ── 기사 목록 (가로형 카드) ── */
.np-news-list { display: flex; flex-direction: column; gap: 0; }

.np-news-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 4px;
  border-bottom: 1px solid #f0f0f0;
  text-decoration: none;
  color: var(--np-text);
  transition: background .12s;
  position: relative;
}
.np-news-item:last-child { border-bottom: none; }
.np-news-item:hover { background: #f8faf9; }
/* 호버 시 왼쪽 초록 액센트 라인 */
.np-news-item::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
  background: var(--np-primary);
  transition: width .15s;
}
.np-news-item:hover::before { width: 3px; }

/* 썸네일 */
.np-item-thumb {
  flex: 0 0 160px;
  width: 160px;
  height: 107px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
  position: relative;
}
.np-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.np-news-item:hover .np-item-thumb img { transform: scale(1.04); }
.np-thumb-blank {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:var(--np-fs-3xl);
  color: #cbd5e1;
  background: #f1f5f9;
}
.np-badge-abs {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
}

/* 뱃지 */
.np-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--np-fs-base);
  font-weight: 700;
}
.np-badge-break { background: #fee2e2; color: #dc2626; }
.np-badge-top   { background: #dbeafe; color: #1565c0; }

/* 카테고리 칩 */
.np-cat-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: var(--np-fs-base);
  font-weight: 700;
  border: 1px solid transparent;
}

/* 본문 */
.np-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.np-item-meta { min-height: 20px; }
.np-item-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #111;
  line-height: 1.5;
  letter-spacing: -0.3px;
  margin: 0;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-news-item:hover .np-item-title { color: var(--np-primary); }
.np-item-summary {
  font-size: var(--np-fs-base);
  color: #64748b;
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-item-foot {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.np-sep { color: #d1d5db; }

/* ── 빈 상태 ── */
.np-empty {
  text-align: center;
  padding: 60px 24px;
  background: #f8fafc;
  border-radius: 14px;
  color: #94a3b8;
}
.np-empty i { font-size:var(--np-fs-hero); display: block; margin-bottom: 10px; }

/* ── 페이지네이션 ── */
.np-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 28px;
}
.np-pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: var(--np-fs-base);
  text-decoration: none;
  font-weight: 500;
  background: #fff;
  color: #475569;
  border: 1.5px solid #e2e8f0;
  transition: all .15s;
}
.np-pag-btn:hover   { border-color: var(--np-primary); color: var(--np-primary); }
.np-pag-btn.active  { background: var(--np-primary); color: #fff; border-color: var(--np-primary); }
.np-pag-btn.disabled { opacity: .4; pointer-events: none; }

/* ══ 사이드바 ══ */
.np-sidebar { display: flex; flex-direction: column; gap: 0; }

.np-sb-box {
  background: #fff;
  border: 1.5px solid #f1f5f9;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.np-sb-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 카테고리 위젯 */
.np-sb-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.np-sb-cat-list > li { border-bottom: 1px solid #f1f5f9; }
.np-sb-cat-list > li:last-child { border-bottom: none; }

.np-sb-cat-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 6px;
  font-size: var(--np-fs-base);
  color: #374151;
  text-decoration: none;
  transition: all .12s;
  border-radius: 6px;
}
.np-sb-cat-link:hover { background: #f0fdf4; color: var(--np-primary); }
.np-sb-cat-link.active {
  color: var(--np-primary);
  font-weight: 700;
  background: #ecfdf5;
}
/* ★ 하위 카테고리 선택 시 상위 링크 연동 활성 스타일 */
.np-sb-cat-link.parent-active {
  color: var(--np-primary);
  font-weight: 600;
  background: linear-gradient(to right, #f0fdf4, #f8fffe);
  border-left: 3px solid var(--np-primary);
  padding-left: 9px;
}
.np-sb-cat-link.parent-active .np-sb-cnt {
  background: #d1fae5;
  color: #065f46;
}
/* 하위 카테고리 선택 상태 배지 */
.np-sb-sub-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--np-fs-base);
  font-weight: 700;
  letter-spacing: .3px;
  background: var(--np-primary);
  color: #fff;
  border-radius: 4px;
  padding: 1px 4px;
  margin-left: 5px;
  vertical-align: middle;
  opacity: .85;
}

.np-sb-cnt {
  font-size: var(--np-fs-base);
  background: #f1f5f9;
  border-radius: 10px;
  padding: 1px 8px;
  color: #64748b;
  flex-shrink: 0;
}
.np-sb-cat-link.active .np-sb-cnt { background: #d1fae5; color: #065f46; }

/* 서브네비 탭 - 부모 활성 스타일 (하위 선택 시) */
.np-snav-item.parent-active {
  background: linear-gradient(135deg, #ecfdf5, #f0fdf4);
  color: var(--np-primary);
  font-weight: 700;
  border: 1.5px solid var(--np-primary);
  box-shadow: 0 0 0 2px rgba(3,199,90,.12);
}
.np-snav-item.active {
  background: var(--np-primary) !important;
  color: #fff !important;
  font-weight: 700;
}

/* 자식 카테고리 */
.np-sb-child-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 14px;
  /* 기본: 접힌 상태 */
  display: none;
  overflow: hidden;
}
/* ★ 하위 선택 시 자동 펼침 */
.np-sb-child-list.is-open {
  display: block;
}
.np-sb-child-list li { border-bottom: none; }
.np-sb-cat-child {
  font-size: var(--np-fs-base);
  padding: 6px 6px;
  color: #64748b;
}
/* 현재 선택된 하위 카테고리 강조 */
.np-sb-cat-child.active {
  color: var(--np-primary);
  font-weight: 700;
  background: #ecfdf5;
  border-radius: 6px;
}
/* 사이드바 펼쳐진 상위 항목 표시 */
.np-sb-cat-open > .np-sb-cat-link::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-bottom: 2px solid var(--np-primary);
  border-right: 2px solid var(--np-primary);
  transform: rotate(45deg);
  margin-left: 4px;
  flex-shrink: 0;
  opacity: 0;  /* 이미 is-open 으로 표현하므로 숨김 */
}

/* 인기 기사 위젯 */
.np-sb-pop-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.np-sb-pop-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f5f9;
}
.np-sb-pop-item:last-child { border-bottom: none; }

/* 순위 배지 */
.np-rank-badge {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: var(--np-fs-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-rank-1 { background: #dc2626; color: #fff; }
.np-rank-2 { background: #ff6b35; color: #fff; }
.np-rank-3 { background: #f59e0b; color: #fff; }

/* 미니 썸네일 */
.np-pop-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 42px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}
.np-pop-thumb-ph {
  flex-shrink: 0;
  width: 56px;
  height: 42px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 인기 기사 본문 */
.np-pop-body { flex: 1; min-width: 0; }
.np-pop-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--np-fs-base);
  font-weight: 600;
  line-height: 1.45;
  color: #1e293b;
  text-decoration: none;
}
.np-pop-title:hover { color: var(--np-primary); }
.np-pop-views {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  margin-top: 3px;
}

/* ══ 반응형 ══ */
@media (max-width: 860px) {
  .np-content-wrap { grid-template-columns: 1fr; }
  .np-sidebar { display: none; } /* 모바일에서 사이드바 숨김 */
}
@media (max-width: 640px) {
  .np-item-thumb { flex: 0 0 110px; width: 110px; height: 76px; }
  .np-item-title { font-size: var(--np-fs-base); }
  .np-item-summary { display: none; }
  .np-type-tabs-inner { gap: 0; }
  .np-ttab { padding: 9px 11px; font-size: var(--np-fs-base); }
  /* 모바일: 화살표 크기 축소 */
  .np-ttab-arrow { width: 24px; height: 24px; font-size: var(--np-fs-base); }
  .np-page-header { padding: 20px 16px; }
  .np-page-header h1 { font-size: var(--np-fs-xl); }
}
@media (max-width: 480px) {
  .np-item-thumb { flex: 0 0 90px; width: 90px; height: 64px; }
  .np-item-title { font-size: var(--np-fs-base); }
  .np-content-wrap { padding: 16px 12px 40px; gap: 16px; }
}

/* ════════════════════════════════════════════════════════════
   인덱스 페이지 전용 스타일 (np-hero, np-cat-grid, np-section)
════════════════════════════════════════════════════════════ */

/* 히어로 배너 */
.np-hero {
  background: linear-gradient(135deg, #029a47 0%, #03c75a 60%, #00b893 100%);
  color: #fff;
  padding: 32px 0 28px;
}
.np-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.np-hero-text h1 {
  font-size: var(--np-fs-3xl);
  font-weight: 800;
  margin: 0 0 6px;
  letter-spacing: -0.5px;
}
.np-hero-text p { margin: 0 0 14px; opacity: .9; font-size: var(--np-fs-base); }

/* 속보 티커 */
.np-ticker {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.15);
  border-radius: 24px;
  padding: 6px 14px;
  max-width: 520px;
  overflow: hidden;
}
.np-ticker-label {
  flex-shrink: 0;
  font-size: var(--np-fs-base);
  font-weight: 800;
  background: #dc2626;
  color: #fff;
  padding: 2px 8px;
  border-radius: 10px;
}
.np-ticker-wrap { flex: 1; overflow: hidden; }
.np-ticker-track {
  display: flex;
  gap: 32px;
  animation: np-ticker-scroll 22s linear infinite;
  white-space: nowrap;
}
@keyframes np-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.np-ticker-item {
  flex-shrink: 0;
  font-size: var(--np-fs-base);
  color: #fff;
  text-decoration: none;
  opacity: .95;
}
.np-ticker-item:hover { opacity: 1; text-decoration: underline; }

/* 히어로 통계 */
.np-hero-stat {
  display: flex;
  gap: 20px;
  flex-shrink: 0;
}
.np-hero-stat-item {
  text-align: center;
  background: rgba(255,255,255,.18);
  border-radius: 12px;
  padding: 12px 18px;
}
.np-hero-stat-num {
  display: block;
  font-size:var(--np-fs-2xl);
  font-weight: 800;
  line-height: 1;
}
.np-hero-stat-label {
  display: block;
  font-size: var(--np-fs-base);
  opacity: .88;
  margin-top: 4px;
}

/* 인덱스 메인 래퍼 */
.np-index-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 16px 60px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
  box-sizing: border-box;
}
.np-index-wrap,
.np-hero { grid-column: 1 / -1; width: 100%; }

/* 섹션 헤드 공통 */
.np-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1f5f9;
}
.np-sec-head h2 {
  font-size: var(--np-fs-base);
  font-weight: 800;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.np-sec-more {
  font-size: var(--np-fs-base);
  color: #64748b;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.np-sec-more:hover { color: var(--np-primary); }

/* 빅 헤드라인 블록 */
.np-headline-block {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  margin-bottom: 32px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--np-shadow);
}

/* 메인 대형 기사 */
.np-hl-main {
  display: block;
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}
.np-hl-img-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #e2e8f0;
}
.np-hl-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.np-hl-main:hover .np-hl-img { transform: scale(1.04); }
.np-hl-img-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-live-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #dc2626;
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 20px;
  z-index: 3;
  animation: np-live-pulse 1.5s infinite;
}
@keyframes np-live-pulse {
  0%,100% { opacity: 1; }
  50% { opacity: .6; }
}
.np-hl-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 50%);
  pointer-events: none;
}
.np-hl-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 20px;
  z-index: 2;
}
.np-hl-cat-badge {
  display: inline-block;
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.np-hl-title {
  font-size: var(--np-fs-xl);
  font-weight: 800;
  color: #fff;
  margin: 0 0 8px;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  word-break: keep-all;
}
.np-hl-summary {
  font-size: var(--np-fs-base);
  color: rgba(255,255,255,.88);
  margin: 0 0 8px;
  line-height: 1.5;
}
.np-hl-meta-row {
  display: flex;
  gap: 10px;
  font-size: var(--np-fs-base);
  color: rgba(255,255,255,.8);
}

/* 서브 기사 목록 */
.np-hl-sub-list {
  display: flex;
  flex-direction: column;
  padding: 12px 14px;
  gap: 0;
}
.np-hl-sub-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f5f9;
  text-decoration: none;
  color: inherit;
}
.np-hl-sub-item:last-of-type { border-bottom: none; }
.np-hl-sub-item:hover { background: #f8faf9; margin: 0 -6px; padding: 10px 6px; border-radius: 6px; }
.np-hl-sub-thumb {
  flex: 0 0 70px;
  width: 70px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f5f9;
}
.np-hl-sub-thumb img, .np-hl-sub-ph {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-hl-sub-body { flex: 1; min-width: 0; }
.np-hl-sub-cat {
  display: block;
  font-size: var(--np-fs-base);
  font-weight: 700;
  margin-bottom: 3px;
}
.np-hl-sub-title {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0 0 3px;
}
.np-hl-sub-time { font-size: var(--np-fs-base); color: #94a3b8; }
.np-hl-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
  padding: 9px;
  background: #f8fafc;
  border-radius: 8px;
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  border: 1.5px solid #e2e8f0;
}
.np-hl-more-btn:hover { background: #ecfdf5; color: var(--np-primary); border-color: var(--np-primary); }

/* 카테고리 퀵 카드 */
.np-cat-grid-section { margin-bottom: 32px; }
.np-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.np-cat-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: #fff;
  border: 1.5px solid #f1f5f9;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all .15s;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.np-cat-card:hover {
  border-color: var(--np-primary);
  box-shadow: 0 4px 12px rgba(3,199,90,.12);
  transform: translateY(-1px);
}
.np-cat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--np-fs-base);   /* portal-core 표준에 맞춤 */
  flex-shrink: 0;
}
.np-cat-body { flex: 1; min-width: 0; }
.np-cat-name { font-size: var(--np-fs-base); font-weight: 700; color: #1e293b; }
.np-cat-desc {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.np-cat-cnt { font-size: var(--np-fs-base); font-weight: 700; color: var(--np-primary); margin-top: 2px; }
.np-cat-arr { color: #cbd5e1; font-size: var(--np-fs-base); flex-shrink: 0; }
.np-cat-card:hover .np-cat-arr { color: var(--np-primary); }

/* 섹션별 기사 */
.np-section {
  background: #fff;
  border: 1.5px solid #f1f5f9;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
.np-sec-body {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 14px;
}
.np-sec-top {
  display: block;
  text-decoration: none;
  color: inherit;
}
.np-sec-top-img-wrap {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
  margin-bottom: 8px;
}
.np-sec-top-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.np-sec-top:hover .np-sec-top-img { transform: scale(1.04); }
.np-sec-top-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-badge-abs2 {
  position: absolute;
  top: 6px; left: 6px;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
}
.np-badge-break { background: #fee2e2; color: #dc2626; }
.np-badge-top   { background: #dbeafe; color: #1565c0; }
.np-sec-top-tit {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #1e293b;
  line-height: 1.45;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-sec-top:hover .np-sec-top-tit { color: var(--np-primary); }
.np-sec-top-time { font-size: var(--np-fs-base); color: #94a3b8; }
.np-sec-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.np-sec-link {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f8fafc;
  text-decoration: none;
  color: inherit;
}
.np-sec-link:last-child { border-bottom: none; }
.np-sec-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 38px;
  border-radius: 4px;
  object-fit: cover;
  display: block;
}
.np-sec-thumb-ph {
  flex: 0 0 56px;
  width: 56px;
  height: 38px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-sec-link-body { flex: 1; min-width: 0; }
.np-sec-link-tit {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
  margin: 0 0 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-sec-link:hover .np-sec-link-tit { color: var(--np-primary); }
.np-sec-link-time { font-size: var(--np-fs-base); color: #94a3b8; }
.np-sec-empty {
  text-align: center;
  padding: 24px;
  color: #94a3b8;
  font-size: var(--np-fs-base);
}
.np-sec-empty i { display: block; font-size: var(--np-fs-2xl); margin-bottom: 6px; }

/* 인덱스 사이드바 */
.np-index-side {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 64px;
}
.np-sb-cat-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 6px;
  font-size: var(--np-fs-base);
  color: #374151;
  text-decoration: none;
  transition: all .12s;
  border-radius: 6px;
}
.np-sb-cat-link:hover { background: #f0fdf4; color: var(--np-primary); }

/* ════════════════════════════════════════════════════════════
   상세 페이지 전용 스타일 (np-detail-*)
   거래포털 detail.php 패턴 동일 적용
════════════════════════════════════════════════════════════ */

/* 상세 레이아웃 래퍼 */
.np-detail-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 28px 16px 60px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
  box-sizing: border-box;
}

/* 상세 본문 영역 */
.np-detail-main { min-width: 0; }

/* 브레드크럼 */
.np-bc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  font-size: var(--np-fs-base);
  color: #94a3b8;
  margin-bottom: 16px;
}
.np-bc a { color: #64748b; text-decoration: none; }
.np-bc a:hover { color: var(--np-primary); }
.np-bc-sep { color: #d1d5db; font-size: var(--np-fs-base); }
.np-bc-cur { color: #1e293b; font-weight: 600; }

/* 목록으로 버튼 */
.np-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  background: #f1f5f9;
  border-radius: 8px;
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  margin-bottom: 18px;
  transition: all .15s;
}
.np-back-btn:hover { background: #ecfdf5; color: var(--np-primary); }

/* 기사 헤더 */
.np-art-header {
  margin-bottom: 20px;
}
.np-art-cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.np-art-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}
.np-art-badge-break {
  background: #dc2626;
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 4px;
}
.np-art-badge-feat {
  background: #1565c0;
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
}

/* 기사 제목 */
.np-art-title {
  font-size:var(--np-fs-3xl);
  font-weight: 800;
  line-height: 1.4;
  color: #111827;
  margin: 0 0 10px;
  word-break: keep-all;
  letter-spacing: -0.5px;
}
.np-art-subtitle {
  font-size: var(--np-fs-base);
  color: #64748b;
  margin: 0 0 14px;
  line-height: 1.55;
}

/* 기사 메타 */
.np-art-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: var(--np-fs-base);
  color: #94a3b8;
  padding: 12px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 18px;
}
.np-art-meta-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: var(--np-fs-base);
}
.np-art-chip-region {
  font-weight: 700;
  border: 1px solid;
}
.np-art-chip-date { color: #64748b; }
.np-art-chip-view { color: #64748b; }

/* 기자 정보 */
.np-art-writer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px;
  margin-bottom: 18px;
}
.np-art-writer-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--np-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 800;
  flex-shrink: 0;
}
.np-art-writer-name { font-size: var(--np-fs-base); font-weight: 700; color: #1e293b; }
.np-art-writer-name span { font-weight: 400; color: #64748b; }

/* 공유·폰트 툴바 */
.np-art-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 0;
  margin-bottom: 16px;
}
.np-toolbar-label { font-size: var(--np-fs-base); color: #94a3b8; }
.np-toolbar-divider { width: 1px; height: 18px; background: #e2e8f0; margin: 0 4px; }
.np-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #f1f5f9;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  font-size: var(--np-fs-base);
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.np-tool-btn:hover { background: #ecfdf5; border-color: var(--np-primary); color: var(--np-primary); }
.np-tool-fb { color: #1877f2; }
.np-tool-tw { color: #1da1f2; }
.np-font-btn { font-weight: 700; }
.np-font-btn.active { background: var(--np-primary); color: #fff; border-color: var(--np-primary); }
.np-tool-print { color: #64748b; }

/* 대표 이미지 */
.np-art-figure {
  margin: 0 0 22px;
  border-radius: 12px;
  overflow: hidden;
}
.np-art-figure img {
  width: 100%;
  display: block;
  border-radius: 12px;
}
.np-art-caption {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  padding: 8px 4px 0;
}

/* 기사 본문 */
.np-art-body {
  font-size: var(--np-fs-base);
  line-height: 1.9;
  color: #222;
  word-break: keep-all;
}
.np-art-body p { margin: 0 0 20px; }
.np-art-body [data-art-font="s"] { font-size: var(--np-fs-base); }
.np-art-body [data-art-font="l"] { font-size: var(--np-fs-base); }
.np-art-body [data-art-font="xl"] { font-size: var(--np-fs-xl); }
.np-art-notice { 
  background: #f8fafc; 
  border-left: 3px solid var(--np-primary); 
  padding: 6px 10px; 
  font-size: var(--np-fs-base); 
  color: #475569; 
}
.np-art-lead { 
  padding-left: 12px; 
  color: #374151; 
  font-size: var(--np-fs-base); 
}
.np-art-ref-block {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  margin: 24px 0;
}
.np-art-ref-divider {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.np-art-ref-list {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.np-art-ref-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--np-fs-base);
  color: #475569;
}
.np-ref-tag {
  flex-shrink: 0;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: var(--np-fs-base);
  font-weight: 700;
}
.np-ref-tag-contact { background: #dbeafe; color: #1565c0; }
.np-ref-tag-attach  { background: #dcfce7; color: #065f46; }

/* 태그 */
.np-art-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 20px 0;
}
.np-art-tag {
  display: inline-block;
  padding: 4px 12px;
  background: #f1f5f9;
  border-radius: 20px;
  font-size: var(--np-fs-base);
  color: #475569;
  text-decoration: none;
}
.np-art-tag:hover { background: #ecfdf5; color: var(--np-primary); }

/* 첨부파일 */
.np-attach-section {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
}
.np-attach-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #1e293b;
}
.np-attach-list { display: flex; flex-direction: column; gap: 8px; }
.np-attach-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #fff;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
}
.np-attach-card-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--np-fs-base);
  flex-shrink: 0;
}
.np-attach-card-body { flex: 1; min-width: 0; }
.np-attach-name { font-size: var(--np-fs-base); font-weight: 600; color: #1e293b; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-attach-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.np-attach-type-badge { padding: 1px 7px; border-radius: 4px; font-size: var(--np-fs-base); font-weight: 700; border: 1px solid; }
.np-attach-size { font-size: var(--np-fs-base); color: #94a3b8; }
.np-attach-card-actions { display: flex; gap: 6px; flex-shrink: 0; }
.np-attach-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; border-radius: 6px; font-size: var(--np-fs-base); font-weight: 600;
  text-decoration: none; cursor: pointer; border: none;
}
.np-attach-btn-preview { background: #f1f5f9; color: #475569; }
.np-attach-btn-preview:hover { background: #e0f2fe; color: #0284c7; }
.np-attach-btn-dl { background: var(--np-primary); color: #fff; }
.np-attach-btn-dl:hover { background: var(--np-primary-dark); }

/* 이전·다음 네비 */
.np-art-nav {
  margin: 28px 0;
  border-top: 1px solid #f1f5f9;
  padding-top: 20px;
}
.np-art-nav-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.np-nav-card {
  display: block;
  padding: 14px;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all .15s;
}
.np-nav-card:hover { border-color: var(--np-primary); box-shadow: 0 3px 10px rgba(3,199,90,.1); }
.np-nav-card.disabled { opacity: .4; pointer-events: none; background: #f8fafc; }
.np-nav-label {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #94a3b8;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.np-nav-card-thumb-wrap {
  width: 100%;
  aspect-ratio: 16/6;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
  background: #f1f5f9;
}
.np-nav-card-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.np-nav-tit {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-nav-card:hover .np-nav-tit { color: var(--np-primary); }
.np-nav-next .np-nav-label { justify-content: flex-end; }
.np-nav-next .np-nav-tit { text-align: right; }

/* 연관기사 */
.np-related {
  background: #fff;
  border: 1.5px solid #f1f5f9;
  border-radius: 14px;
  padding: 18px;
  margin-top: 24px;
}
.np-related-head {
  font-size: var(--np-fs-base);
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.np-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.np-related-item { }
.np-related-link { display: block; text-decoration: none; color: inherit; }
.np-related-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: 8px;
}
.np-related-thumb-ph {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 8px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-related-cat { font-size: var(--np-fs-base); font-weight: 700; display: block; margin-bottom: 4px; }
.np-related-tit {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-related-link:hover .np-related-tit { color: var(--np-primary); }
.np-related-time { font-size: var(--np-fs-base); color: #94a3b8; }

/* 읽기 진행 바 */
.np-read-progress {
  position: fixed;
  top: 0; left: 0;
  width: 0;
  height: 3px;
  background: var(--np-primary);
  z-index: 9999;
  transition: width .15s;
}

/* 플로팅 스크롤 버튼 */
.np-scroll-nav {
  position: fixed;
  right: 20px;
  bottom: 80px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 500;
}
.np-scroll-nav.visible {
  opacity: 1;
  pointer-events: auto;
}
.np-snav-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  color: #475569;
  font-size: var(--np-fs-base);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
  transition: all .15s;
}
.np-snav-btn:hover { background: var(--np-primary); color: #fff; border-color: var(--np-primary); }
.np-snav-btn:disabled { opacity: .3; cursor: not-allowed; }

/* 상세 사이드바 */
.np-detail-side {
  position: sticky;
  top: 64px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.np-detail-sb-box {
  background: #fff;
  border: 1.5px solid #f1f5f9;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.np-detail-sb-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.np-detail-pop-list { list-style: none; margin: 0; padding: 0; }
.np-detail-pop-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f5f9;
}
.np-detail-pop-item:last-child { border-bottom: none; }
.np-detail-pop-rank {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #e2e8f0;
  color: #64748b;
  font-size: var(--np-fs-base);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.np-detail-pop-rank.r1 { background: #dc2626; color: #fff; }
.np-detail-pop-rank.r2 { background: #ff6b35; color: #fff; }
.np-detail-pop-rank.r3 { background: #f59e0b; color: #fff; }
.np-detail-pop-body { flex: 1; min-width: 0; }
.np-detail-pop-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--np-fs-base);
  font-weight: 600;
  line-height: 1.45;
  color: #1e293b;
  text-decoration: none;
}
.np-detail-pop-title:hover { color: var(--np-primary); }
.np-detail-pop-views { font-size: var(--np-fs-base); color: #94a3b8; margin-top: 3px; }

.np-detail-cat-list { list-style: none; margin: 0; padding: 0; }
.np-detail-cat-list li { border-bottom: 1px solid #f1f5f9; }
.np-detail-cat-list li:last-child { border-bottom: none; }
.np-detail-cat-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  font-size: var(--np-fs-base);
  color: #374151;
  text-decoration: none;
  border-radius: 6px;
  transition: all .12s;
}
.np-detail-cat-link:hover { background: #f0fdf4; color: var(--np-primary); }
.np-detail-cat-link.active { color: var(--np-primary); font-weight: 700; background: #ecfdf5; }
.np-detail-cat-cnt {
  font-size: var(--np-fs-base);
  background: #f1f5f9;
  border-radius: 10px;
  padding: 1px 7px;
  color: #64748b;
}
.np-detail-cat-link.active .np-detail-cat-cnt { background: #d1fae5; color: #065f46; }

.np-detail-rel-list { list-style: none; margin: 0; padding: 0; }
.np-detail-rel-item { border-bottom: 1px solid #f1f5f9; }
.np-detail-rel-item:last-child { border-bottom: none; }
.np-detail-rel-link {
  display: block;
  padding: 8px 4px;
  text-decoration: none;
  color: inherit;
}
.np-detail-rel-tit {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-detail-rel-link:hover .np-detail-rel-tit { color: var(--np-primary); }
.np-detail-rel-date { font-size: var(--np-fs-base); color: #94a3b8; }

/* 링크 복사 토스트 */
.np-copy-toast {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #1e293b;
  color: #fff;
  padding: 10px 20px;
  border-radius: 24px;
  font-size: var(--np-fs-base);
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: all .25s;
  z-index: 9999;
}
.np-copy-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 이미지 모달 */
.np-img-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-img-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.75);
}
.np-img-modal-box {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
  z-index: 2;
}
.np-img-modal-close {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #f1f5f9;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--np-fs-base);
}
.np-img-modal-img { max-width: 100%; display: block; border-radius: 8px; }
.np-img-modal-name { font-size: var(--np-fs-base); color: #64748b; text-align: center; margin-top: 8px; }

/* ════════════════════════════════════════════════════════════
   인덱스·상세 반응형
════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .np-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 860px) {
  .np-index-wrap    { grid-template-columns: 1fr; padding: 20px 12px 40px; }
  .np-detail-wrap   { grid-template-columns: 1fr; padding: 16px 12px 40px; }
  .np-index-side    { display: none; }
  .np-detail-side   { display: none; }
  .np-headline-block { grid-template-columns: 1fr; }
  .np-hl-sub-list   { display: none; }
  .np-cat-grid      { grid-template-columns: repeat(2, 1fr); }
  .np-hero-stat     { display: none; }
  .np-sec-body      { grid-template-columns: 1fr; }
  .np-related-grid  { grid-template-columns: 1fr; }
  .np-art-nav-inner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .np-hero-text h1  { font-size:var(--np-fs-2xl); }
  .np-hl-title      { font-size: var(--np-fs-base); }
  .np-art-title     { font-size: var(--np-fs-xl); }
  .np-cat-grid      { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .np-art-toolbar   { gap: 4px; }
  .np-related-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .np-cat-grid  { grid-template-columns: 1fr 1fr; gap: 7px; }
  .np-art-title { font-size: var(--np-fs-base); }
  .np-art-meta  { gap: 6px; }
}

/* ════════════════════════════════════════════════════════════
   ① news/index.php 전용 — np-wrap · 티커 · 헤드라인 · 카드 그리드
════════════════════════════════════════════════════════════ */

/* 전체 래퍼 */
.np-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 60px;
  box-sizing: border-box;
}

/* ── 속보 티커 (index 전용) ───────────────────────────────── */
.np-wrap .np-ticker {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff3cd;
  border-top: 3px solid #dc2626;
  border-bottom: 1px solid #fde68a;
  padding: 0;
  border-radius: 0;
  max-width: 100%;
  margin-bottom: 24px;
  overflow: hidden;
}
.np-wrap .np-ticker-label {
  flex-shrink: 0;
  font-size: var(--np-fs-base);
  font-weight: 800;
  background: #dc2626;
  color: #fff;
  padding: 8px 14px;
  border-radius: 0;
  letter-spacing: .5px;
}
.np-wrap .np-ticker-track {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.np-wrap .np-ticker-inner {
  display: flex;
  gap: 40px;
  animation: np-ticker-run 30s linear infinite;
  white-space: nowrap;
  padding: 8px 16px;
}
@keyframes np-ticker-run {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.np-wrap .np-ticker-item {
  flex-shrink: 0;
  font-size: var(--np-fs-base);
  color: #1e293b;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.np-wrap .np-ticker-date {
  font-size: var(--np-fs-base);
  color: #dc2626;
  font-weight: 700;
  background: #fee2e2;
  padding: 1px 5px;
  border-radius: 3px;
}
.np-wrap .np-ticker-item:hover { text-decoration: underline; color: #dc2626; }

/* ── 섹션 공통 헤드 ──────────────────────────────────────── */
.np-section { margin-bottom: 32px; }
.np-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 4px solid var(--np-primary, #03c75a);
  padding-left: 12px;
  margin-bottom: 16px;
}
.np-section-title {
  font-size: var(--np-fs-md);
  font-weight: 800;
  color: #1e293b;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 7px;
}
.np-section-title i { color: var(--np-primary, #03c75a); }
.np-more-link {
  font-size: var(--np-fs-base);
  color: #64748b;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: color .15s;
}
.np-more-link:hover { color: var(--np-primary, #03c75a); }

/* ── 헤드라인 그리드 ─────────────────────────────────────── */
.np-headline-section { }
.np-headline-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}

/* 메인 헤드라인 */
.np-hl-main { display: block; text-decoration: none; color: inherit; }
.np-hl-main-link { display: block; text-decoration: none; color: inherit; }
.np-hl-main-thumb {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #e2e8f0;
}
.np-hl-main-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.np-hl-main-link:hover .np-hl-main-thumb img { transform: scale(1.04); }
.np-hl-main-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 55%);
  pointer-events: none;
}
.np-hl-cat {
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(0,0,0,.6);
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
}
.np-hl-main-body {
  padding: 16px 20px 20px;
}
.np-hl-main-title {
  font-size: var(--np-fs-xl);
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 8px;
  line-height: 1.4;
  word-break: keep-all;
}
.np-hl-main-sub {
  font-size: var(--np-fs-base);
  color: #64748b;
  margin: 0 0 10px;
  line-height: 1.6;
}
.np-hl-meta {
  display: flex;
  gap: 12px;
  font-size: var(--np-fs-base);
  color: #94a3b8;
  flex-wrap: wrap;
}
.np-hl-meta i { margin-right: 3px; }

/* 서브 헤드라인 */
.np-hl-sub-list {
  display: flex;
  flex-direction: column;
  padding: 12px;
  gap: 4px;
  border-left: 1px solid #f1f5f9;
}
.np-hl-sub {  }
.np-hl-sub-link {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  padding: 10px 6px;
  border-bottom: 1px solid #f8fafc;
  border-radius: 6px;
  transition: background .15s;
}
.np-hl-sub-link:hover { background: #f8faf9; }
.np-hl-sub-thumb {
  flex: 0 0 72px;
  width: 72px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f5f9;
  position: relative;
}
.np-hl-sub-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.np-hl-sub-body { flex: 1; min-width: 0; }
.np-cat-label {
  display: inline-block;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 4px;
}
.np-hl-sub-title {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-hl-sub-date { font-size: var(--np-fs-base); color: #94a3b8; }

/* ── 배지 (breaking/hot/etc) ─────────────────────────────── */
.np-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--np-fs-base);
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: .3px;
}
.np-badge-breaking {
  background: #dc2626;
  color: #fff;
}
.np-badge-hot {
  background: #f97316;
  color: #fff;
}
.np-badge-label {
  background: #1a5fb4;
  color: #fff;
}
.np-badge-sm { font-size: var(--np-fs-base); padding: 2px 6px; }
.np-badge-xs { font-size: var(--np-fs-base); padding: 1px 5px; }
.np-badge.np-badge-breaking.np-badge-sm,
.np-badge.np-badge-breaking.np-badge-xs {
  position: absolute; top: 6px; right: 6px;
}

/* ── 분야별 카테고리 카드 섹션 ──────────────────────────── */
.np-cat-section { }
.np-wrap .np-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.np-wrap .np-cat-card {
  background: #fff;
  border: 1.5px solid var(--cat-bg, #f1f5f9);
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  transition: box-shadow .15s, transform .15s;
}
.np-wrap .np-cat-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.np-cat-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.np-cat-card-title {
  display: flex;
  align-items: center;
  gap: 7px;
  text-decoration: none;
  font-size: var(--np-fs-base);
  font-weight: 800;
  color: var(--cat-c, #1e293b);
}
.np-cat-card-title i { font-size: var(--np-fs-base); }
.np-cat-more {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  text-decoration: none;
  transition: color .15s;
}
.np-cat-more:hover { color: var(--cat-c, #03c75a); }
.np-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.np-cat-item { }
.np-cat-item--top .np-cat-thumb-link {
  display: block;
  margin-bottom: 6px;
}
.np-cat-thumb-link img.np-cat-thumb {
  width: 100%;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.np-cat-link {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: var(--np-fs-base);
  color: #334155;
  text-decoration: none;
  line-height: 1.45;
  padding: 3px 0;
  border-bottom: 1px solid #f8fafc;
}
.np-cat-link:last-child { border-bottom: none; }
.np-cat-link:hover { color: var(--cat-c, #03c75a); }
.np-cat-date {
  flex-shrink: 0;
  margin-left: auto;
  font-size: var(--np-fs-base);
  color: #94a3b8;
}
.np-cat-empty { font-size: var(--np-fs-base); color: #94a3b8; padding: 8px 0; }

/* ── 최신 뉴스 그리드 ────────────────────────────────────── */
.np-latest-section { }
.np-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.np-news-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow .15s, transform .15s;
}
.np-news-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.np-news-card-link { display: block; text-decoration: none; color: inherit; }
.np-news-thumb-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f1f5f9;
}
.np-news-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.np-news-card-link:hover .np-news-thumb { transform: scale(1.04); }
.np-news-body { padding: 12px 14px 14px; }
.np-news-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #1e293b;
  margin: 6px 0 5px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-news-sub {
  font-size: var(--np-fs-base);
  color: #64748b;
  margin: 0 0 8px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-news-meta {
  display: flex;
  gap: 8px;
  font-size: var(--np-fs-base);
  color: #94a3b8;
  flex-wrap: wrap;
  align-items: center;
}
.np-news-meta i { font-size: var(--np-fs-base); }

/* ── 하단 2단 (인기기사 + 오피니언) ─────────────────────── */
.np-bottom-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.np-bottom-col {
  background: #fff;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* 인기기사 */
.np-popular-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.np-popular-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: 8px;
  transition: background .15s;
}
.np-popular-item:hover { background: #f8fafc; }
.np-popular-rank {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  font-size: var(--np-fs-base);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-rank-1 { background: #dc2626; color: #fff; }
.np-rank-2 { background: #ea580c; color: #fff; }
.np-rank-3 { background: #ca8a04; color: #fff; }
.np-popular-body { flex: 1; min-width: 0; }
.np-popular-title {
  display: block;
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-popular-title:hover { color: var(--np-primary, #03c75a); }
.np-popular-meta {
  display: flex;
  gap: 8px;
  font-size: var(--np-fs-base);
  color: #94a3b8;
  margin-top: 3px;
}
.np-popular-thumb {
  flex-shrink: 0;
  width: 56px;
  height: 40px;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f5f9;
}
.np-popular-thumb img { width: 100%; height: 100%; object-fit: cover; }
.np-cat-text { font-weight: 600; }

/* 오피니언·기획 */
.np-opinion-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.np-opinion-item { }
.np-opinion-link {
  display: flex;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: background .15s;
  padding: 6px;
  border-radius: 8px;
}
.np-opinion-link:hover { background: #f8fafc; }
.np-opinion-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 52px;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f5f9;
}
.np-opinion-thumb img { width: 100%; height: 100%; object-fit: cover; }
.np-opinion-body { flex: 1; min-width: 0; }
.np-opinion-title {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #1e293b;
  margin: 4px 0 4px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-opinion-meta { display: flex; gap: 8px; font-size: var(--np-fs-base); color: #94a3b8; }

.np-empty { text-align: center; padding: 20px; color: #94a3b8; font-size: var(--np-fs-base); }

/* ════════════════════════════════════════════════════════════
   ② news/list.php 전용 — nl-wrap · 탭바 · 그리드 · 사이드바
════════════════════════════════════════════════════════════ */

/* 래퍼 */
.nl-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 60px;
  box-sizing: border-box;
}

/* ── 카테고리 탭바 ────────────────────────────────────────── */
.nl-tabbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: #fff;
  border-bottom: 2px solid #e2e8f0;
  margin: 0 -16px 20px;
  padding: 0 16px;
}
.nl-tabbar-inner {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 8px 0;
}
.nl-tabbar-inner::-webkit-scrollbar { display: none; }
.nl-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-radius: 20px;
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #64748b;
  text-decoration: none;
  background: #f8fafc;
  transition: all .15s;
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.nl-tab:hover { background: #f1f5f9; color: #1e293b; }
.nl-tab--active {
  background: var(--tc, var(--np-primary, #03c75a)) !important;
  color: #fff !important;
  border-color: transparent;
}
.nl-tab--breaking { background: #fee2e2; color: #dc2626; }
.nl-tab--breaking.nl-tab--active { background: #dc2626 !important; color: #fff !important; }

/* ── 콘텐츠 영역 (본문 + 사이드바) ─────────────────────── */
.nl-content-area {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 28px;
  align-items: start;
}

/* 본문 */
.nl-main { min-width: 0; }

/* 리스트 헤드 */
.nl-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.nl-list-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.nl-list-title h1 {
  font-size: var(--np-fs-xl);
  font-weight: 800;
  color: #1e293b;
  margin: 0;
}
.nl-list-cat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--np-fs-base);
}
.nl-list-count {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  background: #f8fafc;
  padding: 3px 10px;
  border-radius: 20px;
}

/* 정렬 버튼 */
.nl-sort-btns { display: flex; gap: 4px; }
.nl-sort-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  text-decoration: none;
  transition: all .15s;
}
.nl-sort-btn:hover, .nl-sort-btn.active {
  background: var(--np-primary, #03c75a);
  color: #fff;
  border-color: transparent;
}

/* 뉴스 카드 그리드 */
.nl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 24px;
}
.nl-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  transition: box-shadow .15s, transform .15s;
}
.nl-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.nl-card-link { display: block; text-decoration: none; color: inherit; }
.nl-card-thumb-wrap {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #f1f5f9;
}
.nl-card-thumb {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s;
}
.nl-card-link:hover .nl-card-thumb { transform: scale(1.04); }
.nl-card-body { padding: 12px 14px 14px; }
.nl-card-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #1e293b;
  margin: 6px 0 4px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nl-card-sub {
  font-size: var(--np-fs-base);
  color: #64748b;
  margin: 0 0 8px;
  line-height: 1.5;
}
.nl-card-meta {
  display: flex;
  gap: 8px;
  font-size: var(--np-fs-base);
  color: #94a3b8;
  flex-wrap: wrap;
}
.nl-card-views { display: flex; align-items: center; gap: 3px; }

/* 빈 상태 */
.nl-empty {
  text-align: center;
  padding: 48px 20px;
  color: #94a3b8;
}
.nl-empty i { font-size:var(--np-fs-hero); margin-bottom: 12px; }
.nl-empty p { font-size: var(--np-fs-base); margin: 0 0 12px; }
.nl-empty-link {
  display: inline-block;
  padding: 8px 20px;
  background: var(--np-primary, #03c75a);
  color: #fff;
  border-radius: 20px;
  font-size: var(--np-fs-base);
  text-decoration: none;
}

/* 페이지네이션 */
.nl-pagination {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 24px;
  flex-wrap: wrap;
}
.nl-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 8px;
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #475569;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  text-decoration: none;
  transition: all .15s;
}
.nl-page-btn:hover { border-color: var(--np-primary, #03c75a); color: var(--np-primary, #03c75a); }
.nl-page-btn--active {
  background: var(--np-primary, #03c75a);
  color: #fff;
  border-color: transparent;
}

/* ── 사이드바 (list + detail 공용) ─────────────────────── */
.nl-sidebar, .nd-sidebar {
  position: sticky;
  top: 60px;
  min-width: 0;
}
.nl-widget, .nd-widget {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.nl-widget-head, .nd-widget-head {
  border-left: 3px solid var(--np-primary, #03c75a);
  padding-left: 10px;
  margin-bottom: 14px;
}
.nl-widget-head h3, .nd-widget-head h3 {
  font-size: var(--np-fs-base);
  font-weight: 800;
  color: #1e293b;
  margin: 0;
  display: flex; align-items: center; gap: 6px;
}
.nl-widget-head h3 i, .nd-widget-head h3 i { color: var(--np-primary, #03c75a); }

/* 사이드 인기기사 */
.nl-side-pop-list, .nd-side-pop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nl-side-pop-item, .nd-side-pop-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid #f8fafc;
}
.nl-side-pop-item:last-child, .nd-side-pop-item:last-child { border-bottom: none; }
.nl-side-pop-rank, .nd-side-pop-rank {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f1f5f9;
  color: #64748b;
  font-size: var(--np-fs-base);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.nl-rank-1, .nd-rank-1 { background: #dc2626; color: #fff; }
.nl-rank-2, .nd-rank-2 { background: #ea580c; color: #fff; }
.nl-rank-3, .nd-rank-3 { background: #ca8a04; color: #fff; }
.nl-side-pop-title, .nd-side-pop-title {
  flex: 1;
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nl-side-pop-title:hover, .nd-side-pop-title:hover { color: var(--np-primary, #03c75a); }

/* 사이드 카테고리 */
.nl-side-cat-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nl-side-cat-link {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 6px;
  border-radius: 7px;
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  transition: all .15s;
}
.nl-side-cat-link i { color: var(--lc, #64748b); font-size: var(--np-fs-base); }
.nl-side-cat-link:hover { background: #f8fafc; color: var(--lc, #03c75a); }
.nl-side-cat-link--active { background: #ecfdf5; color: var(--lc, #03c75a) !important; }
.nl-side-cat-cnt {
  margin-left: auto;
  font-size: var(--np-fs-base);
  color: #94a3b8;
  background: #f1f5f9;
  padding: 1px 6px;
  border-radius: 8px;
}

/* ════════════════════════════════════════════════════════════
   ③ news/detail.php 전용 — nd-wrap · 본문 · 관련기사 · 이전/다음
════════════════════════════════════════════════════════════ */

/* 래퍼 */
.nd-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 16px 60px;
  box-sizing: border-box;
}
.nd-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
}

/* ── 기사 본문 ────────────────────────────────────────────── */
.nd-article {
  min-width: 0;
  background: #fff;
  border-radius: 14px;
  padding: 28px 32px 32px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* 브레드크럼 */
.nd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--np-fs-base);
  color: #94a3b8;
  margin-bottom: 18px;
}
.nd-breadcrumb a { color: #64748b; text-decoration: none; }
.nd-breadcrumb a:hover { color: var(--np-primary, #03c75a); }
.nd-bc-sep { font-size: var(--np-fs-base); color: #cbd5e1; }

/* 기사 헤더 */
.nd-art-header { margin-bottom: 20px; }
.nd-label-tag {
  display: inline-block;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  background: #f1f5f9;
  color: #475569;
  margin-bottom: 8px;
  margin-right: 4px;
}
.nd-cat-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  text-decoration: none;
  margin-bottom: 12px;
}
.nd-title {
  font-size:var(--np-fs-3xl);
  font-weight: 900;
  color: #0f172a;
  margin: 0 0 10px;
  line-height: 1.4;
  word-break: keep-all;
  letter-spacing: -.5px;
}
.nd-subtitle {
  font-size: var(--np-fs-base);
  color: #64748b;
  margin: 0 0 14px;
  line-height: 1.6;
}

/* 메타 */
.nd-art-meta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: var(--np-fs-base);
  color: #64748b;
  padding: 12px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 16px;
  align-items: center;
}
.nd-meta-item { display: flex; align-items: center; gap: 5px; }
.nd-reporter-mail { color: #94a3b8; text-decoration: none; font-size: var(--np-fs-base); }
.nd-reporter-mail:hover { color: var(--np-primary, #03c75a); }

/* 공유 버튼 */
.nd-share-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.nd-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: var(--np-fs-base);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all .15s;
}
.nd-share-copy { background: #f1f5f9; color: #475569; }
.nd-share-copy:hover { background: #e2e8f0; }
.nd-share-twitter { background: #1da1f2; color: #fff; }
.nd-share-twitter:hover { background: #0d95e8; }
.nd-share-facebook { background: #1877f2; color: #fff; }
.nd-share-facebook:hover { background: #0d6edf; }
.nd-share-print { background: #f1f5f9; color: #475569; }
.nd-share-print:hover { background: #e2e8f0; }

/* 대표 이미지 */
.nd-main-thumb {
  border-radius: 12px;
  overflow: hidden;
  background: #f1f5f9;
  margin-bottom: 24px;
}
.nd-main-thumb img {
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  display: block;
}

/* 기사 본문 */
.nd-content {
  font-size: var(--np-fs-base);
  line-height: 1.85;
  color: #1e293b;
  word-break: keep-all;
}
.nd-content p { margin: 0 0 1.2em; }
.nd-content img { max-width: 100%; border-radius: 8px; }
.nd-content h2,
.nd-content h3 { font-weight: 800; margin: 1.6em 0 .6em; color: #0f172a; }
.nd-content blockquote {
  margin: 1.4em 0;
  padding: 14px 20px;
  border-left: 4px solid var(--np-primary, #03c75a);
  background: #f8fafc;
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: #475569;
}

/* 키워드 태그 */
.nd-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
  padding: 16px 0;
  border-top: 1px solid #f1f5f9;
  font-size: var(--np-fs-base);
  color: #94a3b8;
  align-items: center;
}
.nd-keyword-tag {
  display: inline-block;
  padding: 4px 12px;
  background: #f1f5f9;
  border-radius: 20px;
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  transition: all .15s;
}
.nd-keyword-tag:hover { background: #ecfdf5; color: var(--np-primary, #03c75a); }

/* 관련 기사 */
.nd-related { margin-top: 28px; }
.nd-related-title {
  font-size: var(--np-fs-base);
  font-weight: 800;
  color: #1e293b;
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.nd-related-title i { color: var(--np-primary, #03c75a); }
.nd-related-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.nd-related-card {
  display: block;
  text-decoration: none;
  color: inherit;
  background: #f8fafc;
  border-radius: 10px;
  overflow: hidden;
  transition: box-shadow .15s;
}
.nd-related-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.1); }
.nd-related-thumb {
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #e2e8f0;
}
.nd-related-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nd-related-body { padding: 10px 12px 12px; }
.nd-related-cat { font-size: var(--np-fs-base); font-weight: 700; color: #64748b; display: block; margin-bottom: 4px; }
.nd-related-title-text {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #1e293b;
  margin: 0 0 4px;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nd-related-date { font-size: var(--np-fs-base); color: #94a3b8; }

/* 이전/다음 기사 */
.nd-prevnext {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #f1f5f9;
}
.nd-prevnext-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 14px;
  background: #f8fafc;
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  border: 1.5px solid #e2e8f0;
  transition: all .15s;
}
.nd-prevnext-item:hover { border-color: var(--np-primary, #03c75a); background: #ecfdf5; }
.nd-pn-dir {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nd-pn-dir i { font-size: var(--np-fs-base); }
.nd-pn-title {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #334155;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nd-next { text-align: right; }
.nd-next .nd-pn-dir { justify-content: flex-end; }

/* 목록으로 */
.nd-back-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 20px;
}
.nd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 20px;
  border-radius: 8px;
  background: #f1f5f9;
  color: #475569;
  font-size: var(--np-fs-base);
  font-weight: 600;
  text-decoration: none;
  transition: all .15s;
}
.nd-back-btn:hover { background: #e2e8f0; color: #1e293b; }
.nd-back-btn--home { background: var(--np-primary, #03c75a); color: #fff; }
.nd-back-btn--home:hover { background: var(--np-primary-dark, #029a47); }

/* ── 상세 사이드바 래퍼 ──────────────────────────────────── */
.nd-sidebar {
  position: sticky;
  top: 70px;
  min-width: 0;
}

/* ════════════════════════════════════════════════════════════
   반응형 — index · list · detail 공통
════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .nl-grid { grid-template-columns: repeat(2, 1fr); }
  .np-news-grid { grid-template-columns: repeat(2, 1fr); }
  .np-wrap .np-cat-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .np-headline-grid { grid-template-columns: 1fr; }
  .np-hl-sub-list   { border-left: none; border-top: 1px solid #f1f5f9; flex-direction: row; flex-wrap: wrap; }
  .np-hl-sub-link   { width: calc(50% - 4px); }
  .np-bottom-row    { grid-template-columns: 1fr; }
  .nl-content-area  { grid-template-columns: 1fr; }
  .nl-sidebar       { position: static; display: none; }
  .nd-layout        { grid-template-columns: 1fr; }
  .nd-sidebar       { position: static; display: none; }
}
@media (max-width: 768px) {
  .np-wrap, .nl-wrap, .nd-wrap { padding: 0 12px 40px; }
  .np-news-grid     { grid-template-columns: 1fr; }
  .nl-grid          { grid-template-columns: 1fr; }
  .np-wrap .np-cat-grid { grid-template-columns: repeat(2, 1fr); }
  .nd-article       { padding: 20px 16px 24px; }
  .nd-title         { font-size: var(--np-fs-xl); }
  .nd-related-grid  { grid-template-columns: 1fr; }
  .nd-prevnext      { grid-template-columns: 1fr; }
  .nl-tabbar        { margin: 0 -12px 16px; padding: 0 12px; }
}
@media (max-width: 480px) {
  .np-wrap .np-cat-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .np-news-grid { grid-template-columns: 1fr; }
  .nl-grid      { grid-template-columns: 1fr; }
  .np-bottom-row { grid-template-columns: 1fr; }
  .nd-title { font-size: var(--np-fs-lg); }
  .nd-content { font-size: var(--np-fs-base); }
  .nd-share-bar { gap: 5px; }
}

/* ════════════════════════════════════════════════════════════════
   news/index.php — 연합뉴스(yna.co.kr) 골격 전용 클래스 (yn- prefix)
   추가일: 2026-04-22
════════════════════════════════════════════════════════════════ */

/* ── 속보 티커 ──────────────────────────────────────────────── */
.yn-ticker-wrap {
  background: #1b2b4b;
  border-bottom: 2px solid #d32f2f;
  position: sticky;
  top: 0;
  z-index: 200;
}
.yn-ticker-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  overflow: hidden;
  gap: 12px;
}
.yn-ticker-label {
  flex-shrink: 0;
  background: #d32f2f;
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 3px;
  letter-spacing: .5px;
}
.yn-ticker-track {
  flex: 1;
  overflow: hidden;
}
.yn-ticker-list {
  display: flex;
  gap: 40px;
  list-style: none;
  margin: 0;
  padding: 0;
  animation: yn-scroll 25s linear infinite;
  white-space: nowrap;
}
@keyframes yn-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.yn-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.yn-ticker-item a {
  color: #e2e8f0;
  text-decoration: none;
  font-size: var(--np-fs-base);
  transition: color .2s;
}
.yn-ticker-item a:hover { color: #fff; }
.yn-ticker-cat {
  color: #93c5fd;
  font-size: var(--np-fs-base);
  font-weight: 600;
}
.yn-ticker-time {
  color: #64748b;
  font-size: var(--np-fs-base);
  flex-shrink: 0;
}

/* ── 서브네비 (카테고리 탭) ────────────────────────────────── */
.yn-subnav {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.yn-subnav::-webkit-scrollbar { display: none; }
.yn-subnav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  gap: 2px;
  white-space: nowrap;
}
.yn-snav-item {
  display: inline-block;
  padding: 10px 14px;
  font-size: var(--np-fs-base);
  color: #475569;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.yn-snav-item:hover,
.yn-snav-item.active {
  color: #03c75a;
  border-bottom-color: #03c75a;
  font-weight: 600;
}

/* ── 메인 컨테이너 ─────────────────────────────────────────── */
.yn-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 60px;
}

/* ── TOP 헤드라인 영역 ─────────────────────────────────────── */
.yn-top-area {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  margin-bottom: 32px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
  overflow: hidden;
}

/* 메인 1단 */
.yn-top-main {}
.yn-main-article { display: flex; flex-direction: column; height: 100%; }
.yn-main-figure {
  position: relative;
  overflow: hidden;
}
.yn-main-figure img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform .4s;
}
.yn-main-figure:hover img { transform: scale(1.03); }
.yn-live-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #d32f2f;
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: yn-pulse 1.5s infinite;
}
@keyframes yn-pulse {
  0%,100% { opacity: 1; }
  50%      { opacity: .6; }
}
.yn-main-con {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.yn-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #fff;
  padding: 3px 10px;
  border-radius: 4px;
  text-decoration: none;
  margin-bottom: 8px;
  align-self: flex-start;
}
.yn-main-title {
  font-size:var(--np-fs-2xl);
  font-weight: 800;
  line-height: 1.4;
  color: #0f172a;
  margin: 0 0 8px;
}
.yn-main-title a { color: inherit; text-decoration: none; }
.yn-main-title a:hover { color: #03c75a; }
.yn-main-sub {
  font-size: var(--np-fs-base);
  color: #475569;
  font-weight: 600;
  margin: 0 0 8px;
}
.yn-main-lead {
  font-size: var(--np-fs-base);
  color: #64748b;
  line-height: 1.7;
  margin: 0 0 12px;
  flex: 1;
}
.yn-main-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--np-fs-base);
  color: #94a3b8;
  margin-bottom: 10px;
}
.yn-related-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;
  border-top: 1px solid #f1f5f9;
}
.yn-related-list li { margin-bottom: 5px; }
.yn-related-list a {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: var(--np-fs-base);
  color: #64748b;
  text-decoration: none;
  line-height: 1.5;
  transition: color .2s;
}
.yn-related-list a:hover { color: #03c75a; }
.yn-related-list i { color: #94a3b8; font-size: var(--np-fs-base); flex-shrink: 0; }

/* 서브 4단 */
.yn-top-subs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 16px 16px 0;
  border-left: 1px solid #f1f5f9;
}
.yn-sub-item {
  display: flex;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.yn-sub-item:last-child { border-bottom: none; padding-bottom: 0; }
.yn-sub-figure {
  flex-shrink: 0;
  width: 90px;
  height: 65px;
  border-radius: 6px;
  overflow: hidden;
}
.yn-sub-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.yn-sub-item:hover .yn-sub-figure img { transform: scale(1.05); }
.yn-sub-con { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.yn-sub-cat { font-size: var(--np-fs-base); font-weight: 700; }
.yn-sub-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yn-sub-title a { color: #0f172a; text-decoration: none; }
.yn-sub-title a:hover { color: #03c75a; }
.yn-sub-related {
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}
.yn-sub-related li { line-height: 1.4; margin-bottom: 2px; }
.yn-sub-related a {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  text-decoration: none;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
}
.yn-sub-related a:hover { color: #03c75a; }
.yn-sub-time { font-size: var(--np-fs-base); color: #94a3b8; margin-top: auto; }

/* ── 분야별 섹션 그리드 ─────────────────────────────────────── */
.yn-sections { margin-bottom: 32px; }
.yn-sections-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.yn-sec-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.yn-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 2px solid #03c75a;
}
.yn-sec-name {
  font-size: var(--np-fs-base);
  font-weight: 700;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.yn-sec-name a { text-decoration: none; }
.yn-sec-name i { font-size: var(--np-fs-base); }
.yn-sec-more {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
}
.yn-sec-more:hover { color: #03c75a; }
.yn-sec-top {
  padding: 12px 14px 8px;
  border-bottom: 1px solid #f1f5f9;
}
.yn-sec-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 8px;
}
.yn-sec-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.yn-sec-box:hover .yn-sec-thumb img { transform: scale(1.04); }
.yn-sec-top-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  line-height: 1.45;
  color: #0f172a;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yn-sec-top-title a { color: inherit; text-decoration: none; }
.yn-sec-top-title a:hover { color: #03c75a; }
.yn-sec-time { font-size: var(--np-fs-base); color: #94a3b8; }
.yn-sec-list {
  list-style: none;
  margin: 0;
  padding: 8px 14px 12px;
  flex: 1;
}
.yn-sec-list li {
  border-bottom: 1px dashed #f1f5f9;
  padding: 5px 0;
}
.yn-sec-list li:last-child { border-bottom: none; }
.yn-sec-list a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  transition: color .2s;
}
.yn-sec-list a:hover .yn-sec-li-title { color: #03c75a; }
.yn-sec-li-title {
  font-size: var(--np-fs-base);
  color: #334155;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  transition: color .2s;
}
.yn-sec-li-time {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  flex-shrink: 0;
}

/* ── 하단 2단 (주요기사 + 인기기사) ──────────────────────── */
.yn-bottom-area {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  margin-bottom: 32px;
}
.yn-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #03c75a;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.yn-section-head h3 {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.yn-section-head h3 i { color: #03c75a; }
.yn-more-link {
  font-size: var(--np-fs-base);
  color: #64748b;
  text-decoration: none;
  transition: color .2s;
}
.yn-more-link:hover { color: #03c75a; }

/* 주요기사 그리드 */
.yn-latest-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.yn-lcard {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.yn-lcard:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  transform: translateY(-2px);
}
.yn-lcard-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.yn-lcard-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.yn-lcard:hover .yn-lcard-thumb img { transform: scale(1.05); }
.yn-lcard-body {
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.yn-lcard-cat { font-size: var(--np-fs-base); font-weight: 700; }
.yn-lcard-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  line-height: 1.45;
  color: #0f172a;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yn-lcard-time { font-size: var(--np-fs-base); color: #94a3b8; margin-top: auto; }

/* 인기기사 */
.yn-popular-section { background: #fff; border-radius: 10px; box-shadow: 0 1px 6px rgba(0,0,0,.06); padding: 0 0 4px; }
.yn-popular-section .yn-section-head { padding: 14px 16px 10px; border-radius: 10px 10px 0 0; margin: 0; }
.yn-pop-list { list-style: none; margin: 0; padding: 4px 8px 8px; counter-reset: pop; }
.yn-pop-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 8px;
  border-bottom: 1px solid #f8fafc;
}
.yn-pop-item:last-child { border-bottom: none; }
.yn-pop-rank {
  font-size: var(--np-fs-lg);
  font-weight: 900;
  width: 24px;
  flex-shrink: 0;
  text-align: center;
  line-height: 1.2;
}
.yn-pop-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.yn-pop-cat { font-size: var(--np-fs-base); font-weight: 700; }
.yn-pop-title {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
}
.yn-pop-title:hover { color: #03c75a; }
.yn-pop-views { font-size: var(--np-fs-base); color: #94a3b8; }

/* ── 오피니언/기획 ─────────────────────────────────────────── */
.yn-opinion-section { margin-top: 0; }
.yn-opinion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.yn-ocard {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  gap: 12px;
  padding: 12px;
  align-items: flex-start;
  transition: box-shadow .2s;
}
.yn-ocard:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.yn-ocard-thumb {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.yn-ocard-thumb img { width: 100%; height: 100%; object-fit: cover; }
.yn-ocard-body { flex: 1; }
.yn-ocard-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  line-height: 1.45;
  color: #0f172a;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yn-ocard-meta {
  display: flex;
  gap: 8px;
  font-size: var(--np-fs-base);
  color: #94a3b8;
}

/* ════════════════════════════════════════════════════════════════
   news/list.php — 거래포털 기초 전용 클래스 (nl- prefix, 신규)
════════════════════════════════════════════════════════════════ */

/* 서브네비 */
.nl-subnav {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.nl-subnav::-webkit-scrollbar { display: none; }
.nl-subnav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  gap: 2px;
  white-space: nowrap;
}
.nl-snav-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 12px;
  font-size: var(--np-fs-base);
  color: #475569;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color .2s, border-color .2s;
  white-space: nowrap;
}
.nl-snav-item:hover,
.nl-snav-item.active {
  color: #03c75a;
  border-bottom-color: #03c75a;
  font-weight: 600;
}
.nl-snav-cnt {
  font-size: var(--np-fs-base);
  background: #f1f5f9;
  border-radius: 10px;
  padding: 1px 6px;
  color: #64748b;
}

/* 페이지 헤더 */
.nl-page-header {
  background: linear-gradient(135deg, #f8fafc 0%, #f0fdf4 100%);
  border-bottom: 1px solid #e2e8f0;
  padding: 20px 0;
}
.nl-page-header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.nl-page-header h1 {
  font-size:var(--np-fs-2xl);
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nl-page-header p { font-size: var(--np-fs-base); color: #64748b; margin: 0; }

/* 검색폼 */
.nl-search-form {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}
.nl-search-input {
  border: none;
  outline: none;
  padding: 8px 14px;
  font-size: var(--np-fs-base);
  width: 220px;
  background: transparent;
}
.nl-search-btn {
  background: #03c75a;
  border: none;
  color: #fff;
  padding: 8px 14px;
  cursor: pointer;
  font-size: var(--np-fs-base);
  transition: background .2s;
}
.nl-search-btn:hover { background: #029a47; }

/* 콘텐츠 래퍼 */
.nl-content-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}

/* 목록 영역 */
.nl-main {}
.nl-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #e2e8f0;
  flex-wrap: wrap;
  gap: 8px;
}
.nl-list-total { font-size: var(--np-fs-base); color: #64748b; }
.nl-list-total strong { color: #0f172a; font-weight: 700; }
.nl-sort-bar { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nl-sort-btn {
  font-size: var(--np-fs-base);
  color: #64748b;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 5px 10px;
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
  white-space: nowrap;
}
.nl-sort-btn:hover,
.nl-sort-btn.active {
  background: #03c75a;
  border-color: #03c75a;
  color: #fff;
}
.nl-reset-btn { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
.nl-reset-btn:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }

/* 기사 목록 */
.nl-list { display: flex; flex-direction: column; gap: 0; }
.ni-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid #f1f5f9;
  background: #fff;
  transition: background .2s;
}
.ni-item:last-child { border-bottom: none; }
.ni-item:hover { background: #f8fafc; }
.ni-thumb-link { flex-shrink: 0; }
.ni-thumb {
  width: 180px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
}
.ni-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.ni-item:hover .ni-thumb img { transform: scale(1.04); }
.ni-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.ni-meta-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ni-cat-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: .3px;
}
.ni-breaking-badge {
  background: #d32f2f;
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.ni-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  line-height: 1.45;
  color: #0f172a;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ni-title a { color: inherit; text-decoration: none; }
.ni-title a:hover { color: #03c75a; }
.ni-sub {
  font-size: var(--np-fs-base);
  color: #475569;
  font-weight: 600;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ni-summary {
  font-size: var(--np-fs-base);
  color: #64748b;
  line-height: 1.6;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
}
.ni-meta-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--np-fs-base);
  color: #94a3b8;
  flex-wrap: wrap;
  margin-top: auto;
}
.ni-reporter { color: #64748b; }
.ni-time, .ni-views { display: flex; align-items: center; gap: 4px; }

/* 빈 결과 */
.nl-empty {
  text-align: center;
  padding: 60px 20px;
  color: #94a3b8;
}
.nl-empty i { font-size:var(--np-fs-hero); margin-bottom: 12px; display: block; }
.nl-empty p { font-size: var(--np-fs-base); }

/* 페이지네이션 */
.nl-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 24px;
  padding: 16px 0;
}
.nl-pag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  color: #475569;
  font-size: var(--np-fs-base);
  text-decoration: none;
  transition: all .2s;
  padding: 0 8px;
}
.nl-pag-btn:hover { background: #03c75a; border-color: #03c75a; color: #fff; }
.nl-pag-btn.active { background: #03c75a; border-color: #03c75a; color: #fff; font-weight: 700; }
.nl-pag-btn.disabled { pointer-events: none; opacity: .4; }

/* 사이드바 */
.nl-sidebar {
  position: sticky;
  top: 60px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nl-sb-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  overflow: hidden;
}
.nl-sb-head {
  padding: 12px 14px 10px;
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #0f172a;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nl-sb-pop-list { list-style: none; margin: 0; padding: 8px 0 4px; }
.nl-sb-pop-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid #f8fafc;
}
.nl-sb-pop-item:last-child { border-bottom: none; }
.nl-sb-rank { font-size: var(--np-fs-base); font-weight: 900; width: 20px; flex-shrink: 0; text-align: center; }
.nl-sb-pop-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nl-sb-cat { font-size: var(--np-fs-base); font-weight: 700; }
.nl-sb-pop-title {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
}
.nl-sb-pop-title:hover { color: #03c75a; }
.nl-sb-views { font-size: var(--np-fs-base); color: #94a3b8; display: flex; align-items: center; gap: 3px; }
.nl-sb-cat-list { list-style: none; margin: 0; padding: 6px 8px 8px; }
.nl-sb-cat-list li { margin-bottom: 2px; }
.nl-sb-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-size: var(--np-fs-base);
  color: #475569;
  transition: background .2s, color .2s;
}
.nl-sb-cat-item:hover { background: #f0fdf4; color: #03c75a; }
.nl-sb-cat-item.active { background: #f0fdf4; font-weight: 600; }
.nl-sb-cat-name { display: flex; align-items: center; }
.nl-sb-cat-cnt {
  font-size: var(--np-fs-base);
  background: #f1f5f9;
  border-radius: 10px;
  padding: 1px 6px;
  color: #64748b;
}

/* ════════════════════════════════════════════════════════════════
   news/detail.php — 거래포털 기초 전용 클래스 (nd- prefix, 신규)
════════════════════════════════════════════════════════════════ */

/* 전체 래퍼 */
.nd-wrap {
  background: #f8fafc;
  min-height: 60vh;
  padding: 0 0 60px;
}
.nd-layout {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 0;
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 24px;
  align-items: start;
}

/* 기사 본문 */
.nd-article {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 8px rgba(0,0,0,.06);
  padding: 28px 32px 32px;
}

/* 브레드크럼 */
.nd-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--np-fs-base);
  color: #94a3b8;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.nd-breadcrumb a {
  color: #64748b;
  text-decoration: none;
  transition: color .2s;
}
.nd-breadcrumb a:hover { color: #03c75a; }
.nd-bc-sep { color: #cbd5e1; font-size: var(--np-fs-base); }

/* 기사 헤더 */
.nd-art-header { margin-bottom: 20px; }
.nd-art-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.nd-cat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 4px;
  text-decoration: none;
  transition: opacity .2s;
}
.nd-cat-badge:hover { opacity: .85; }
.nd-breaking-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #d32f2f;
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  animation: nd-blink 1.5s infinite;
}
@keyframes nd-blink { 0%,100%{opacity:1} 50%{opacity:.6} }
.nd-featured-badge {
  background: #fef3c7;
  color: #b45309;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 제목 */
.nd-art-title {
  font-size:var(--np-fs-3xl);
  font-weight: 900;
  line-height: 1.4;
  color: #0f172a;
  margin: 0 0 10px;
  word-break: keep-all;
}
.nd-art-subtitle {
  font-size: var(--np-fs-base);
  color: #475569;
  font-weight: 600;
  margin: 0 0 14px;
  line-height: 1.5;
}

/* 메타 정보 */
.nd-art-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.nd-art-meta-left { display: flex; align-items: center; gap: 10px; }
.nd-art-meta-right { display: flex; align-items: center; gap: 12px; font-size: var(--np-fs-base); color: #94a3b8; }
.nd-meta-reporter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--np-fs-base);
  color: #334155;
}
.nd-reporter-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #03c75a;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--np-fs-base);
  font-weight: 700;
  flex-shrink: 0;
}
.nd-meta-date, .nd-meta-views {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* 공유 버튼 */
.nd-share-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.nd-share-label {
  font-size: var(--np-fs-base);
  color: #64748b;
  margin-right: 4px;
}
.nd-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: var(--np-fs-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: opacity .2s, transform .15s;
}
.nd-share-btn:hover { opacity: .85; transform: translateY(-1px); }
.nd-copy-btn { background: #1e293b; color: #fff; }
.nd-twitter-btn { background: #1da1f2; color: #fff; }
.nd-fb-btn { background: #1877f2; color: #fff; }
.nd-print-btn { background: #64748b; color: #fff; }

/* 대표 이미지 */
.nd-art-figure {
  margin: 0 0 24px;
  border-radius: 10px;
  overflow: hidden;
}
.nd-art-figure img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.nd-art-figure figcaption {
  padding: 8px 12px;
  font-size: var(--np-fs-base);
  color: #64748b;
  background: #f8fafc;
  text-align: center;
}

/* 기사 본문 */
.nd-art-body { line-height: 1.8; margin-bottom: 24px; }
.nd-para {
  font-size: var(--np-fs-base);
  color: #1e293b;
  line-height: 1.85;
  margin: 0 0 18px;
}
.nd-sub-head {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #0f172a;
  margin: 20px 0 8px;
  padding-left: 10px;
  border-left: 3px solid #03c75a;
}
.nd-separator {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 20px 0;
}
.nd-ref-block {
  background: #f8fafc;
  border-left: 3px solid #94a3b8;
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: var(--np-fs-base);
  color: #64748b;
  margin: 12px 0;
}

/* 기자 노트 */
.nd-art-notice {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: var(--np-fs-base);
  color: #92400e;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 20px;
}

/* 키워드 태그 */
.nd-tags {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 16px 0;
  border-top: 1px solid #f1f5f9;
  margin-bottom: 24px;
}
.nd-tags-label { font-size: var(--np-fs-base); color: #64748b; }
.nd-tag {
  display: inline-block;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #03c75a;
  font-size: var(--np-fs-base);
  padding: 4px 10px;
  border-radius: 20px;
  text-decoration: none;
  font-weight: 600;
  transition: all .2s;
}
.nd-tag:hover { background: #03c75a; color: #fff; border-color: #03c75a; }

/* 관련기사 */
.nd-related { margin-bottom: 24px; }
.nd-related-head {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #03c75a;
  padding-bottom: 10px;
  margin-bottom: 14px;
}
.nd-related-head h3 {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nd-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.nd-rel-card {
  background: #f8fafc;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.nd-rel-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.nd-rel-thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
}
.nd-rel-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.nd-rel-card:hover .nd-rel-thumb img { transform: scale(1.05); }
.nd-rel-body { padding: 8px 10px 10px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
.nd-rel-cat { font-size: var(--np-fs-base); font-weight: 700; }
.nd-rel-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  line-height: 1.45;
  color: #0f172a;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nd-rel-time { font-size: var(--np-fs-base); color: #94a3b8; margin-top: auto; }

/* 이전/다음 네비게이션 */
.nd-prevnext {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
  border-top: 1px solid #f1f5f9;
  padding-top: 20px;
  margin-bottom: 20px;
}
.nd-pnav {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px 14px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .2s, border-color .2s;
}
.nd-pnav:hover { background: #f0fdf4; border-color: #03c75a; }
.nd-prev { text-align: left; }
.nd-next { text-align: right; }
.nd-pnav-label {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
}
.nd-next .nd-pnav-label { justify-content: flex-end; }
.nd-pnav-title {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #334155;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nd-pnav-empty { opacity: .5; cursor: default; }
.nd-pnav-empty-txt { font-size: var(--np-fs-base); color: #94a3b8; }
.nd-pnav-back {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #03c75a;
  color: #fff;
  border-radius: 8px;
  padding: 12px 16px;
  text-decoration: none;
  font-size: var(--np-fs-base);
  font-weight: 700;
  gap: 5px;
  transition: background .2s;
  white-space: nowrap;
}
.nd-pnav-back:hover { background: #029a47; }

/* 뒤로가기 버튼 */
.nd-back-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-size: var(--np-fs-base);
  text-decoration: none;
  cursor: pointer;
  transition: all .2s;
}
.nd-back-btn:hover { background: #03c75a; border-color: #03c75a; color: #fff; }
.nd-back-list { background: #fff; }

/* 사이드바 (nd-) */
.nd-sidebar {
  position: sticky;
  top: 70px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.nd-sb-box {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  overflow: hidden;
}
.nd-sb-head {
  padding: 12px 14px 10px;
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #0f172a;
  border-bottom: 1px solid #f1f5f9;
  display: flex;
  align-items: center;
  gap: 6px;
}
.nd-sb-pop-list { list-style: none; margin: 0; padding: 8px 0 4px; }
.nd-sb-pop-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid #f8fafc;
}
.nd-sb-pop-item.current { background: #f0fdf4; }
.nd-sb-pop-item:last-child { border-bottom: none; }
.nd-sb-rank { font-size: var(--np-fs-base); font-weight: 900; width: 20px; flex-shrink: 0; text-align: center; }
.nd-sb-pop-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.nd-sb-cat { font-size: var(--np-fs-base); font-weight: 700; }
.nd-sb-pop-title {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #1e293b;
  text-decoration: none;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color .2s;
}
.nd-sb-pop-title:hover { color: #03c75a; }
.nd-sb-views { font-size: var(--np-fs-base); color: #94a3b8; display: flex; align-items: center; gap: 3px; }
.nd-sb-cat-list { list-style: none; margin: 0; padding: 6px 8px 8px; }
.nd-sb-cat-list li { margin-bottom: 2px; }
.nd-sb-cat-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border-radius: 6px;
  text-decoration: none;
  font-size: var(--np-fs-base);
  color: #475569;
  transition: background .2s, color .2s;
}
.nd-sb-cat-item:hover { background: #f0fdf4; color: #03c75a; }
.nd-sb-cat-item.active { background: #f0fdf4; font-weight: 600; }
.nd-sb-cat-name { display: flex; align-items: center; }
.nd-sb-cat-cnt {
  font-size: var(--np-fs-base);
  background: #f1f5f9;
  border-radius: 10px;
  padding: 1px 6px;
  color: #64748b;
}

/* ════════════════════════════════════════════════════════════════
   반응형 — yn- / nl- / nd- 신규 클래스 포함
════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .yn-sections-grid { grid-template-columns: repeat(3, 1fr); }
  .yn-bottom-area   { grid-template-columns: 1fr 260px; }
  .yn-opinion-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .yn-top-area       { grid-template-columns: 1fr; }
  .yn-top-subs       { flex-direction: row; flex-wrap: wrap; border-left: none; border-top: 1px solid #f1f5f9; padding: 12px 16px; }
  .yn-sub-item       { width: calc(50% - 6px); border-bottom: none; }
  .yn-sections-grid  { grid-template-columns: repeat(2, 1fr); }
  .yn-bottom-area    { grid-template-columns: 1fr; }
  .yn-popular-section{ display: none; }
  .yn-latest-grid    { grid-template-columns: repeat(2, 1fr); }
  .yn-opinion-grid   { grid-template-columns: repeat(2, 1fr); }
  .nl-content-wrap   { grid-template-columns: 1fr; }
  .nl-sidebar        { display: none; }
  .nd-layout         { grid-template-columns: 1fr; }
  .nd-sidebar        { display: none; }
  .nd-related-grid   { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .yn-container       { padding: 12px 12px 40px; }
  .yn-sections-grid   { grid-template-columns: repeat(2, 1fr); }
  .yn-latest-grid     { grid-template-columns: 1fr; }
  .yn-opinion-grid    { grid-template-columns: 1fr; }
  .nl-content-wrap    { padding: 12px 12px 40px; }
  .nl-page-header-inner { flex-direction: column; align-items: flex-start; }
  .nl-search-input    { width: 160px; }
  .ni-thumb           { width: 120px; height: 80px; }
  .ni-title           { font-size: var(--np-fs-base); }
  .nd-layout          { padding: 12px 12px 0; }
  .nd-article         { padding: 20px 16px 24px; }
  .nd-art-title       { font-size: var(--np-fs-xl); }
  .nd-para            { font-size: var(--np-fs-base); }
  .nd-related-grid    { grid-template-columns: repeat(2, 1fr); }
  .nd-prevnext        { grid-template-columns: 1fr; }
  .nd-pnav-back       { display: none; }
}
@media (max-width: 480px) {
  .yn-sections-grid { grid-template-columns: 1fr; }
  .yn-top-subs      { flex-direction: column; }
  .yn-sub-item      { width: 100%; }
  .nd-related-grid  { grid-template-columns: 1fr; }
  .nd-share-bar     { gap: 5px; }
  .nd-share-btn     { padding: 5px 8px; font-size: var(--np-fs-base); }
}

/* ═══════════════════════════════════════════════════════════════
   S7 뉴스포털 홈 — 17개 섹션 레이아웃 시스템
   클래스 접두어: np- (news portal)
   추가일: 2026-04-22
═══════════════════════════════════════════════════════════════ */

/* ── 최상위 래퍼 ────────────────────────────────────────────── */
.yn-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* ── 공통 섹션 컨테이너 ─────────────────────────────────────── */
.np-sec {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 6px rgba(0,0,0,.06);
  overflow: hidden;
}

/* ── 공통 섹션 헤더 ─────────────────────────────────────────── */
.np-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-bottom: 1px solid #f1f5f9;
  border-left: 4px solid #03c75a;
}
.np-sec-hd-title {
  font-size: var(--np-fs-md);
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
}
.np-sec-hd-title i { font-size: var(--np-fs-base); }
.np-sec-hd-more {
  font-size: var(--np-fs-base);
  color: #94a3b8;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: color .2s;
}
.np-sec-hd-more:hover { color: #475569; }

/* ════════════════════════════════════════════════════════════
   §1 헤드라인 뉴스 (좌 58% 큰사진+목록 / 우 42% 2×2 그리드)
════════════════════════════════════════════════════════════ */

/* 섹션 외곽 */
.nh-wrap {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.07);
  overflow: hidden;
  margin-bottom: 24px;
}

/* 섹션 헤더 */
.nh-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 2px solid #03c75a;
}
.nh-section-title {
  font-size: var(--np-fs-md);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nh-section-title i { color: #03c75a; }
.nh-section-more {
  font-size: var(--np-fs-base);
  color: #64748b;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color .2s;
}
.nh-section-more:hover { color: #03c75a; }

/* 바디: 좌우 2열 */
.nh-body {
  display: flex;
  gap: 16px;       /* 좌우 칼럼 사이 간격 */
  padding: 16px;   /* 전체 안쪽 여백 */
}

/* ── 좌측 58% ── */
.nh-left {
  flex: 0 0 calc(58% - 8px);
  min-width: 0;
  border-right: none;   /* gap으로 구분하므로 border 제거 */
  display: flex;
  flex-direction: column;
  gap: 10px;            /* 사진과 목록 사이 간격 */
}

/* 메인 사진 링크 */
.nh-main-link {
  display: block;
  text-decoration: none;
  flex-shrink: 0;
}
.nh-main-fig {
  position: relative;
  overflow: hidden;
  line-height: 0;
  margin: 0;
}
.nh-main-fig img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform .4s;
}
.nh-main-link:hover .nh-main-fig img { transform: scale(1.03); }

/* 속보 배지 */
.nh-badge-live {
  position: absolute;
  top: 10px;
  left: 10px;
  background: #d32f2f;
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  animation: nh-pulse 1.5s infinite;
}
@keyframes nh-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .55; }
}

/* 카테고리 배지 */
.nh-badge-cat {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(3,199,90,.88);
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 4px;
  backdrop-filter: blur(2px);
}

/* 제목 오버레이 */
.nh-main-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  padding: 32px 16px 14px;
}
.nh-main-title {
  font-size: var(--np-fs-xl);
  font-weight: 800;
  color: #fff;
  margin: 0 0 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nh-main-meta {
  display: flex;
  gap: 12px;
  font-size: var(--np-fs-base);
  color: rgba(255,255,255,.8);
}
.nh-main-meta i { margin-right: 3px; }

/* 텍스트 목록 */
.nh-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}
.nh-list-item {
  border-bottom: 1px solid #f1f5f9;
}
.nh-list-item:last-child { border-bottom: none; }
.nh-list-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  text-decoration: none;
  transition: background .15s;
}
.nh-list-link:hover { background: #f8fafc; }
.nh-list-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  background: #03c75a;
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 800;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.nh-list-cat {
  flex-shrink: 0;
  font-size: var(--np-fs-base);
  font-weight: 700;
}
.nh-list-title {
  flex: 1;
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #1e293b;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nh-list-link:hover .nh-list-title { color: #1565c0; }
.nh-list-time {
  flex-shrink: 0;
  font-size: var(--np-fs-base);
  color: #b0bec5;
  white-space: nowrap;
}

/* ── 우측 42%: 2×2 그리드 ── */
.nh-right {
  flex: 0 0 calc(42% - 8px);
  min-width: 0;
}
.nh-grid22 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 12px;   /* 카드 사이 간격 (가로·세로 동일) */
  height: 100%;
}
.nh-grid-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  border: none;        /* gap으로 구분하므로 border 제거 */
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 5px rgba(0,0,0,.07);
  transition: box-shadow .2s, transform .2s;
}
.nh-grid-card:hover {
  background: #f8fafc;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
  transform: translateY(-2px);
}

.nh-grid-fig {
  position: relative;
  overflow: hidden;
  line-height: 0;
  flex-shrink: 0;
}
.nh-grid-fig img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}
.nh-grid-card:hover .nh-grid-fig img { transform: scale(1.05); }
.nh-grid-cat {
  position: absolute;
  top: 7px;
  left: 7px;
  background: rgba(3,199,90,.9);
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
}
.nh-grid-body {
  padding: 9px 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}
.nh-grid-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  color: #1e293b;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nh-grid-card:hover .nh-grid-title { color: #1565c0; }
.nh-grid-time {
  font-size: var(--np-fs-base);
  color: #b0bec5;
  margin-top: auto;
}
.nh-grid-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #94a3b8;
  font-size: var(--np-fs-base);
  padding: 40px 0;
}

/* ── 반응형 ── */
@media (max-width: 768px) {
  .nh-body { flex-direction: column; gap: 12px; padding: 12px; }
  .nh-left  { flex: none; }
  .nh-right { flex: none; }
  .nh-grid22 { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: 8px; }
  .nh-main-title { font-size: var(--np-fs-base); }
}

/* ════════════════════════════════════════════════════════════
   공통 카드 (np-card)
════════════════════════════════════════════════════════════ */
.np-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border-radius: 6px;
  overflow: hidden;
  background: #fff;
  transition: box-shadow .2s, transform .2s;
}
.np-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  transform: translateY(-2px);
}
.np-card-fig {
  overflow: hidden;
  line-height: 0;
}
.np-card-fig img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}
.np-card:hover .np-card-fig img { transform: scale(1.05); }
.np-card-body {
  padding: 10px 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.np-card-cat { font-size: var(--np-fs-base); font-weight: 700; letter-spacing: .03em; }
.np-card-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  line-height: 1.48;
  color: #1e293b;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-card-time { font-size: var(--np-fs-base); color: #b0bec5; margin-top: auto; }

/* ════════════════════════════════════════════════════════════
   그리드 레이아웃 (내부 패딩 래퍼)
════════════════════════════════════════════════════════════ */
.np-4col, .np-3col-cards, .np-5col, .np-wide2col, .np-opinion-grid {
  padding: 16px 16px 20px;
}

/* 4열 */
.np-4col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* 3열 카드 */
.np-3col-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* 5열 미니 */
.np-5col {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.np-5col .np-card-title { font-size: var(--np-fs-base); -webkit-line-clamp: 2; }

/* ════════════════════════════════════════════════════════════
   §2 정치 — 3열 (대표 wide + 목록)
════════════════════════════════════════════════════════════ */
.np-3col { padding: 0; }
.np-3col-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-bottom: 1px solid #f1f5f9;
}
.np-3col-top-fig {
  overflow: hidden;
  line-height: 0;
}
.np-3col-top-fig img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}
.np-3col-top:hover .np-3col-top-fig img { transform: scale(1.04); }
.np-3col-top-body {
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.np-3col-cat { font-size: var(--np-fs-base); font-weight: 700; }
.np-3col-top-title {
  font-size: var(--np-fs-lg);
  font-weight: 800;
  line-height: 1.42;
  color: #0f172a;
  margin: 0;
}
.np-3col-top-title a { color: inherit; text-decoration: none; }
.np-3col-top-title a:hover { color: #1565c0; }
.np-3col-top-lead { font-size: var(--np-fs-base); color: #64748b; margin: 0; line-height: 1.65; }
.np-3col-top-time { font-size: var(--np-fs-base); color: #b0bec5; margin-top: auto; }
.np-3col-list {
  list-style: none;
  margin: 0;
  padding: 4px 16px 8px;
}

/* ════════════════════════════════════════════════════════════
   §4/§10/§16 — 2열 (대표 + 목록)
════════════════════════════════════════════════════════════ */
.np-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}
.np-2col-main {
  padding: 0 0 20px;
  border-right: 1px solid #f1f5f9;
}
.np-2col-fig {
  overflow: hidden;
  line-height: 0;
}
.np-2col-fig img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}
.np-2col-main:hover .np-2col-fig img { transform: scale(1.03); }
.np-2col-cat { display: block; font-size: var(--np-fs-base); font-weight: 700; padding: 14px 20px 4px; }
.np-2col-title {
  font-size: var(--np-fs-lg);
  font-weight: 800;
  line-height: 1.4;
  color: #0f172a;
  margin: 0;
  padding: 0 20px 8px;
}
.np-2col-title a { color: inherit; text-decoration: none; }
.np-2col-title a:hover { color: #1565c0; }
.np-2col-lead { font-size: var(--np-fs-base); color: #64748b; margin: 0; padding: 0 20px 8px; line-height: 1.65; }
.np-2col-time { font-size: var(--np-fs-base); color: #b0bec5; padding: 0 20px; }
.np-2col-list {
  list-style: none;
  margin: 0;
  padding: 8px 16px 8px;
  display: flex;
  flex-direction: column;
}

/* ════════════════════════════════════════════════════════════
   공통 목록 아이템 (np-li)
════════════════════════════════════════════════════════════ */
.np-li { border-bottom: 1px solid #f8fafc; }
.np-li:last-child { border-bottom: none; }
.np-li a {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 4px;
  text-decoration: none;
  color: #334155;
  font-size: var(--np-fs-base);
  line-height: 1.5;
  transition: color .2s;
}
.np-li a:hover { color: #1565c0; }
.np-li-title {
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-li-time { font-size: var(--np-fs-base); color: #b0bec5; white-space: nowrap; flex-shrink: 0; }

/* ════════════════════════════════════════════════════════════
   §5 지역 — 3열 카드 + 인기기사 사이드
════════════════════════════════════════════════════════════ */
.np-3col-side {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 0;
  padding: 16px 16px 20px;
  gap: 20px;
}
.np-3col-main { flex: 1; }
.np-side-rank {
  border-left: 1px solid #f1f5f9;
  padding-left: 20px;
}
.np-side-head {
  font-size: var(--np-fs-base);
  font-weight: 800;
  color: #475569;
  padding-bottom: 10px;
  border-bottom: 2px solid #f1f5f9;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.np-rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.np-rank-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 9px;
  border-bottom: 1px solid #f8fafc;
}
.np-rank-item:last-child { border-bottom: none; padding-bottom: 0; }
.np-rank-no { font-size: var(--np-fs-lg); font-weight: 900; line-height: 1; }
.np-rank-title {
  font-size: var(--np-fs-base);
  font-weight: 600;
  color: #334155;
  text-decoration: none;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.np-rank-title:hover { color: #1565c0; }
.np-rank-views { font-size: var(--np-fs-base); color: #94a3b8; }

/* ════════════════════════════════════════════════════════════
   §7 관광·축제 — 와이드 2열 카드
════════════════════════════════════════════════════════════ */
.np-wide2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.np-wide-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.np-wide-fig {
  overflow: hidden;
  border-radius: 6px;
  line-height: 0;
}
.np-wide-fig img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}
.np-wide-card:hover .np-wide-fig img { transform: scale(1.04); }
.np-wide-body { padding: 12px 0 0; display: flex; flex-direction: column; gap: 6px; }
.np-wide-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  line-height: 1.45;
  color: #0f172a;
  margin: 0;
}
.np-wide-title a { color: inherit; text-decoration: none; }
.np-wide-title a:hover { color: #0288d1; }
.np-wide-lead { font-size: var(--np-fs-base); color: #64748b; margin: 0; }
.np-wide-time { font-size: var(--np-fs-base); color: #b0bec5; }

/* ════════════════════════════════════════════════════════════
   §13 오피니언 — 3열 + 필자 아바타
════════════════════════════════════════════════════════════ */
.np-opinion-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.np-opin-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.np-opin-imglink { display: block; }
.np-opin-fig {
  overflow: hidden;
  border-radius: 6px;
  line-height: 0;
}
.np-opin-fig img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  transition: transform .35s;
}
.np-opin-card:hover .np-opin-fig img { transform: scale(1.04); }
.np-opin-body { display: flex; flex-direction: column; gap: 6px; }
.np-opin-title {
  font-size: var(--np-fs-base);
  font-weight: 700;
  line-height: 1.48;
  color: #0f172a;
  margin: 0;
}
.np-opin-title a { color: inherit; text-decoration: none; }
.np-opin-title a:hover { color: #bf360c; }
.np-opin-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--np-fs-base);
  color: #64748b;
}
.np-opin-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #bf360c;
  color: #fff;
  font-size: var(--np-fs-base);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.np-opin-author { font-weight: 600; }
.np-opin-time   { color: #b0bec5; margin-left: auto; }

/* ════════════════════════════════════════════════════════════
   반응형 미디어 쿼리
════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .np-4col           { grid-template-columns: repeat(3, 1fr); }
  .np-5col           { grid-template-columns: repeat(4, 1fr); }
  .np-hl-grid        { grid-template-columns: 3fr 2fr; }
  .np-3col-side      { grid-template-columns: 1fr 200px; }
}

@media (max-width: 900px) {
  .np-hl-grid        { grid-template-columns: 1fr; }
  .np-hl-subs        { grid-template-columns: 1fr 1fr; grid-template-rows: auto; border-left: none; border-top: 1px solid #f1f5f9; }
  .np-hl-sub-item    { border-right: 1px solid #f1f5f9; border-bottom: 1px solid #f1f5f9; }
  .np-hl-sub-item:nth-child(2n)   { border-right: none; }
  .np-hl-sub-item:nth-child(3),
  .np-hl-sub-item:nth-child(4)    { border-bottom: none; }
  .np-4col           { grid-template-columns: repeat(2, 1fr); }
  .np-5col           { grid-template-columns: repeat(3, 1fr); }
  .np-3col-cards     { grid-template-columns: repeat(2, 1fr); }
  .np-3col-top       { grid-template-columns: 1fr; }
  .np-2col           { grid-template-columns: 1fr; }
  .np-2col-main      { border-right: none; border-bottom: 1px solid #f1f5f9; }
  .np-wide2col       { grid-template-columns: 1fr; gap: 16px; }
  .np-opinion-grid   { grid-template-columns: repeat(2, 1fr); }
  .np-3col-side      { grid-template-columns: 1fr; }
  .np-side-rank      { border-left: none; border-top: 1px solid #f1f5f9; padding: 16px 0 0; }
}

@media (max-width: 600px) {
  .yn-wrap           { padding: 12px 10px 40px; gap: 24px; }
  .np-hl-title       { font-size: var(--np-fs-lg); }
  .np-hl-subs        { grid-template-columns: 1fr; }
  .np-hl-sub-item:nth-child(2n) { border-right: none; }
  .np-hl-sub-item    { border-bottom: 1px solid #f1f5f9; }
  .np-hl-sub-item:last-child { border-bottom: none; }
  .np-4col           { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .np-5col           { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .np-3col-cards     { grid-template-columns: 1fr; }
  .np-opinion-grid   { grid-template-columns: 1fr; }
  .np-hl-chips       { display: none; }
}