/**
 * news.css  v20260622
 * ─────────────────────────────────────────────────────────────
 * NWS-001 뉴스 홈 전용 스타일시트 (Newsroom v3)
 * Requires: mws-tokens.css, mws-layout.css, util-bar-auth.css
 *
 * 네이밍 규칙: news-* 또는 nws-* 접두사 (g-* SSOT와 충돌 방지)
 * SSOT 감사 체크:
 *   ✅ 인라인 CSS 중복 없음 (.g-util* / .g-header* / .g-nav* / .g-footer* 재정의 X)
 *   ✅ 하드코딩 색상 없음 — 모든 색상은 var() 사용
 *   ✅ --max-w 미사용 → var(--mw) 통일
 *   ✅ backdrop-filter 미사용
 * ─────────────────────────────────────────────────────────────
 */

/* ═══════════════════════════════════════════════════════════════
   § 1. 페이지 스코프 신규 변수 정의
   (SSOT 미포함 → news.css 상단 페이지 스코프로만 정의)
   SSOT 승격 후보:
     --news-red, --news-red-dark  → 향후 신고/경고/속보 UI 범용 가능
     --gold                       → 향후 선임기자·프리미엄 뱃지 UI 범용 가능
═══════════════════════════════════════════════════════════════ */
:root {
  /* 속보 / 경고 컬러 (SSOT 승격 후보) */
  --news-red: #e23434;
  --news-red-dark: #b02020;
  --news-red-bg: rgba(226, 52, 52, .08);
  --news-red-border: rgba(226, 52, 52, .25);

  /* 선임기자 / PARTNER 골드 (SSOT 승격 후보) */
  --gold: #c19a3a;
  --gold-light: #fef9ec;
  --gold-border: #f0d070;

  /* 뉴스 전용 내부 레이아웃 상수 */
  --news-ticker-h: 36px;
  --news-cat-tab-top: 108px;  /* g-header(64) + ticker(36) + small margin */

  /* 티커 전용 다크 배경 / 링크 텍스트 (SSOT 토큰 없음 — 페이지 스코프) */
  --news-ticker-bg: #1a2830;
  --news-ticker-text: #e0f7f5;
  /* 흰색 공통 (TICKER 텍스트, 모달, 카드 배경 등) */
  --nws-white: #ffffff;
}

/* ═══════════════════════════════════════════════════════════════
   § 1-B. 유틸바 뉴스 전용 추가 스타일
   — g-util / g-util-inner / g-util-list 는 util-bar-auth.css SSOT
   — g-util-promo (좌측 문구) / g-util-cta (기자신청 강조) 만 추가
═══════════════════════════════════════════════════════════════ */
.g-util-promo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary, #4a5568);
}
.g-util-promo em {
  font-style: normal;
  font-weight: 700;
  color: var(--mint-dark, #228E84);
}
/* 기자신청 CTA — util-bar-auth.css last-child 규칙과 동일한 효과 */
.g-util-cta {
  color: var(--mint-dark, #228E84) !important;
  font-weight: 700 !important;
}
.g-util-cta:hover {
  color: var(--mint, #81D8D0) !important;
}

/* ═══════════════════════════════════════════════════════════════
   § 2. 스킵 링크 (접근성)
═══════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -9999px;
  left: 12px;
  background: var(--mint-dark);
  color: var(--nws-white);
  padding: 8px 16px;
  border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
  font-size: 13px;
  font-weight: 700;
  z-index: 9999;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}

/* ═══════════════════════════════════════════════════════════════
   § 3. 뉴스 페이지 레이아웃
═══════════════════════════════════════════════════════════════ */
.news-page {
  background: var(--bg, #fafaf8);
  min-height: 100vh;
}
/* Mobile-First: 모바일 기본값 → 데스크톱 확장 */
.news-inner {
  max-width: var(--mw, 1280px);
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 768px) {
  .news-inner { padding: 0 24px; }
}

/* 포커스 표시 — 접근성 */
*:focus-visible {
  outline: 2px solid var(--mint-dark, #228E84);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   § 4. NEWS TICKER (속보 띠배너)
   Mobile-First: 모바일 기본값(top:54px, h:32px) → 데스크톱 확장
═══════════════════════════════════════════════════════════════ */
.news-ticker {
  background: var(--news-ticker-bg);
  height: 32px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: sticky;
  top: 54px;   /* 모바일 g-header(54px) 아래 */
  z-index: 95;
  flex-shrink: 0;
}
@media (min-width: 768px) {
  .news-ticker {
    height: var(--news-ticker-h);
    top: 64px; /* 데스크톱 g-header(64px) 아래 */
  }
}
.news-ticker[hidden] { display: none; }

.news-ticker-inner {
  max-width: var(--mw, 1280px);
  margin: 0 auto;
  padding: 0 12px;  /* 모바일 기본값 */
  display: flex;
  align-items: center;
  gap: 8px;         /* 모바일 기본값 */
  width: 100%;
  height: inherit;
  overflow: hidden;
  flex-wrap: nowrap;
}
@media (min-width: 768px) {
  .news-ticker-inner { padding: 0 24px; gap: 12px; }
}

.news-ticker-label {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--news-red);
  color: var(--nws-white);
  font-size: 10px;  /* 모바일 기본값 */
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 3px;
  letter-spacing: .04em;
  white-space: nowrap;
}
@media (min-width: 768px) {
  .news-ticker-label { font-size: 11px; }
}
.news-ticker-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--nws-white);
  animation: nws-dot-blink 1s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes nws-dot-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .15; }
}

.news-ticker-track {
  flex: 1;
  overflow: hidden;
  position: relative;
}
.news-ticker-list {
  display: flex;
  gap: 48px;
  white-space: nowrap;
  animation: nws-ticker-scroll 30s linear infinite;
  color: var(--nws-white);
  font-size: 12px;  /* 모바일 기본값 */
}
@media (min-width: 768px) {
  .news-ticker-list { font-size: 13px; }
}
.news-ticker-list a {
  color: var(--news-ticker-text);
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s;
}
.news-ticker-list a:hover { color: var(--nws-white); text-decoration: underline; }

@keyframes nws-ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.news-ticker-more {
  flex-shrink: 0;
  font-size: 11px;
  color: var(--mint-light, #C0EDE9);
  white-space: nowrap;
  text-decoration: none;
  border-left: 1px solid rgba(255,255,255,.2);
  padding-left: 12px;
}
.news-ticker-more:hover { color: var(--nws-white); }

/* 스크린리더 전용 정적 목록 — 시각적으로 완전 제거 (티커 1줄 보장) */
.news-ticker-sr-list {
  display: none;  /* ★ flex 흐름에서 완전 분리, 스크린리더는 aria-label로 대체 */
}

/* ═══════════════════════════════════════════════════════════════
   § 5. 브레드크럼 (g-breadcrumb 패턴 그대로 재사용)
═══════════════════════════════════════════════════════════════ */
.news-breadcrumb-bar {
  background: var(--nws-white);
  border-bottom: 1px solid var(--border, #eaecef);
}
.news-breadcrumb {
  max-width: var(--mw, 1280px);
  margin: 0 auto;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary, #4a5568);
  list-style: none;
}
.news-breadcrumb a { color: var(--text-secondary, #4a5568); text-decoration: none; }
.news-breadcrumb a:hover { color: var(--mint-dark, #228E84); }
.news-breadcrumb .sep { color: var(--border, #eaecef); }
.news-breadcrumb .current { color: var(--text-primary, #1a1c1e); font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════
   § 5-B. 아이콘 색상 헬퍼 (inline style 대체 — 절대금지 #11 대응)
═══════════════════════════════════════════════════════════════ */
.ic-gold       { color: var(--gold); }
.ic-mint-dark  { color: var(--mint-dark); }
.ic-news-red   { color: var(--news-red); }
.ic-violet     { color: var(--violet, #7C3AED); }
.ic-text-sec   { color: var(--text-secondary); font-size: 13px; }
.nws-period-label {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-tertiary);
  margin-left: 6px;
}
.nws-violet-head { color: var(--violet, #7C3AED); }

/* ═══════════════════════════════════════════════════════════════
   § 6. 섹션 공통 헤더  (Mobile-First)
═══════════════════════════════════════════════════════════════ */
.news-section {
  padding: 20px 0;  /* 모바일 기본값 */
}
@media (min-width: 768px) {
  .news-section { padding: 32px 0; }
}
@media (min-width: 1024px) {
  .news-section { padding: 40px 0; }
}
.news-section + .news-section {
  border-top: 1px solid var(--border, #eaecef);
}
.news-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;  /* 모바일 기본값 */
}
@media (min-width: 768px) {
  .news-section-head { margin-bottom: 20px; }
}
/* 패턴D: clamp 타이포그래피 */
.news-section-title {
  font-size: clamp(15px, 2vw, 18px);
  font-weight: 800;
  color: var(--text-primary, #1a1c1e);
  display: flex;
  align-items: center;
  gap: 8px;
}
.news-section-more {
  font-size: 12px;
  color: var(--mint-dark, #228E84);
  text-decoration: none;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
}
.news-section-more:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════════
   § 7. TOP HEADLINE (① 섹션)  패턴B: Mobile-First
   모바일: flex column → 데스크톱: grid 2열
═══════════════════════════════════════════════════════════════ */
.news-headline-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;  /* 모바일 기본값 */
}
@media (min-width: 1024px) {
  .news-headline-grid {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 20px;
  }
}

/* 메인 카드 */
.news-headline-main {
  position: relative;
  height: 220px;  /* 모바일 기본값 */
  border-radius: var(--radius, 8px);
  overflow: hidden;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
@media (min-width: 480px) {
  .news-headline-main { height: 260px; }
}
@media (min-width: 1024px) {
  .news-headline-main { height: 360px; }
}
.news-headline-main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: var(--mint-pale, #FAFEFD);
}
.news-headline-main-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.18) 60%, transparent 100%);
}
.news-headline-main-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 22px;
}
.news-kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--mint-light, #C0EDE9);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* 패턴D: clamp 타이포그래피 */
.news-headline-main-title {
  font-size: clamp(16px, 3vw, 22px);
  font-weight: 800;
  color: var(--nws-white);
  line-height: 1.35;
  margin-bottom: 10px;
}
.news-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.75);
  flex-wrap: wrap;
}
.news-meta-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: rgba(255,255,255,.8);
  font-size: 13px;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: color .15s;
}
.news-meta-btn:hover { color: var(--nws-white); }

/* 서브 카드 3개 — 모바일 기본(세로) → 태블릿 가로 */
.news-headline-subs {
  display: flex;
  flex-direction: column;
  gap: 10px;  /* 모바일 기본값 */
}
/* 768px+: 태블릿·데스크톱 모두 가로 배치
   데스크톱(1024+)에서는 grid가 되어 .news-headline-subs가 오른쪽 열에 flex column으로 재정렬됨 */
@media (min-width: 768px) {
  .news-headline-subs {
    flex-direction: row;
    gap: 10px;
  }
  .news-headline-sub { flex: 1; }
}
@media (min-width: 1024px) {
  /* 데스크톱: grid 2열 레이아웃 내 서브카드는 다시 세로 배치 */
  .news-headline-subs {
    flex-direction: column;
    gap: 12px;
  }
  .news-headline-sub { flex: none; }
}
.news-headline-sub {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px;
  background: var(--nws-white);
  border-radius: var(--radius, 8px);
  border: 1px solid var(--border, #eaecef);
  text-decoration: none;
  transition: box-shadow .15s, border-color .15s;
  cursor: pointer;
}
.news-headline-sub:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  border-color: var(--mint, #81D8D0);
}
.news-headline-sub-img {
  width: 96px;
  height: 72px;
  border-radius: 6px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--mint-pale, #FAFEFD);
}
.news-headline-sub-body { flex: 1; min-width: 0; }
.news-headline-sub-kicker {
  font-size: 10px;
  color: var(--mint-dark, #228E84);
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.news-headline-sub-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary, #1a1c1e);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}
.news-headline-sub-meta {
  font-size: 11px;
  color: var(--text-tertiary, #8a94a6);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   § 8. CATEGORY TABS (② 섹션, sticky)  패턴C: Mobile-First
   모바일: overflow-x scroll → 데스크톱: center 정렬
═══════════════════════════════════════════════════════════════ */
.news-cat-bar {
  background: var(--nws-white);
  border-bottom: 2px solid var(--border, #eaecef);
  position: sticky;
  top: 86px;   /* 모바일: g-header(54px) + ticker(32px) */
  z-index: 90;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}
@media (min-width: 768px) {
  .news-cat-bar { top: var(--news-cat-tab-top); }
}
.news-cat-inner {
  max-width: var(--mw, 1280px);
  margin: 0 auto;
  padding: 0 12px;   /* 모바일 기본값 */
  display: flex;
  align-items: center;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.news-cat-inner::-webkit-scrollbar { display: none; }
@media (min-width: 1024px) {
  .news-cat-inner { padding: 0 24px; overflow-x: visible; }
}

.news-cat-tab {
  display: inline-flex;
  align-items: center;
  height: 40px;   /* 모바일 기본값 */
  padding: 0 12px;
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary, #4a5568);
  transition: color .15s, border-color .15s;
  text-decoration: none;
  flex-shrink: 0;
  margin-bottom: -2px;
}
@media (min-width: 768px) {
  .news-cat-tab { height: 46px; padding: 0 16px; }
}
.news-cat-tab:hover { color: var(--text-primary, #1a1c1e); }
.news-cat-tab.active {
  color: var(--mint-dark, #228E84);
  border-bottom-color: var(--mint-dark, #228E84);
  font-weight: 700;
}
.news-cat-tab[data-cat="breaking"] { color: var(--news-red); }
.news-cat-tab[data-cat="breaking"].active { border-bottom-color: var(--news-red); color: var(--news-red); }
.news-cat-tab[data-cat="column"] { color: var(--violet, #7C3AED); }
.news-cat-tab[data-cat="column"].active { border-bottom-color: var(--violet, #7C3AED); color: var(--violet, #7C3AED); }

/* ═══════════════════════════════════════════════════════════════
   § 9. LATEST 타임라인 (③ 섹션)  Mobile-First
═══════════════════════════════════════════════════════════════ */
.news-latest-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.news-latest-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;  /* 모바일: 줄바꿈 허용 */
  gap: 8px;         /* 모바일 기본값 */
  padding: 12px 0;
  border-bottom: 1px solid var(--border, #eaecef);
  text-decoration: none;
  transition: background .12s;
  border-radius: 4px;
}
@media (min-width: 768px) {
  .news-latest-item {
    flex-wrap: nowrap;
    gap: 12px;
    padding: 13px 0;
  }
}
.news-latest-item:last-child { border-bottom: none; }
.news-latest-item:hover { background: var(--mint-pale, #FAFEFD); padding-left: 8px; padding-right: 8px; margin: 0 -8px; }

.news-latest-time {
  font-size: 12px;
  color: var(--text-tertiary, #8a94a6);
  white-space: nowrap;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  min-width: 42px;
}
.news-cat-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
/* 카테고리별 칩 색상 */
.news-cat-chip[data-cat="all"]       { background: var(--mint-pale, #FAFEFD); color: var(--mint-dark, #228E84); }
.news-cat-chip[data-cat="breaking"]  { background: var(--news-red-bg); color: var(--news-red); border: 1px solid var(--news-red-border); }
.news-cat-chip[data-cat="venue"]     { background: var(--mint-light, #EADFCB); color: var(--mint-dark, #228E84); }
.news-cat-chip[data-cat="photo"]     { background: #fde2e2; color: #b91c1c; }
.news-cat-chip[data-cat="goods"]     { background: #ecfdf5; color: #065f46; }
.news-cat-chip[data-cat="honeymoon"] { background: #e0f2fe; color: #0369a1; }
.news-cat-chip[data-cat="celeb"]     { background: #fce7f3; color: #9d174d; }
.news-cat-chip[data-cat="industry"]  { background: #fef3e7; color: #92400e; }
.news-cat-chip[data-cat="column"]    { background: var(--violet-lt, #f5f3ff); color: var(--violet, #7C3AED); }

.news-latest-title {
  flex: 1;
  min-width: 0;
  font-size: clamp(13px, 1.8vw, 14px);
  font-weight: 600;
  color: var(--text-primary, #1a1c1e);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* 모바일: 2줄 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px) {
  .news-latest-title { -webkit-line-clamp: 1; }
}
.news-type-badge {
  font-size: 11px;
  color: var(--text-tertiary, #8a94a6);
  border: 1px solid var(--border, #eaecef);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.news-latest-reporter {
  font-size: 12px;
  color: var(--text-tertiary, #8a94a6);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 빈 상태 */
.news-empty {
  padding: 40px 0;
  text-align: center;
  color: var(--text-tertiary, #8a94a6);
  font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   § 10. 영상 뉴스 (④ 섹션)  패턴A: Mobile-First 그리드
   모바일 2열 → 태블릿 3열 → 데스크톱 4열
═══════════════════════════════════════════════════════════════ */
.news-video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);  /* 모바일 기본값 */
  gap: 12px;
}
@media (min-width: 768px) {
  .news-video-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; }
}
@media (min-width: 1024px) {
  .news-video-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
.news-video-card {
  text-decoration: none;
  display: block;
}
.news-video-thumb {
  position: relative;
  border-radius: var(--radius, 8px);
  overflow: hidden;
  height: 100px;  /* 모바일 기본값 */
  background: var(--mint-pale, #FAFEFD);
  margin-bottom: 8px;
}
@media (min-width: 768px) {
  .news-video-thumb { height: 110px; margin-bottom: 10px; }
}
@media (min-width: 1024px) {
  .news-video-thumb { height: 120px; }
}
.news-video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.news-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.6) 0%, transparent 60%);
}
.news-video-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center;
  color: var(--news-red);
  font-size: 14px;
  transition: transform .15s;
}
.news-video-card:hover .news-video-play { transform: translate(-50%,-50%) scale(1.1); }
.news-video-duration {
  position: absolute;
  bottom: 6px; right: 8px;
  font-size: 11px;
  color: var(--nws-white);
  background: rgba(0,0,0,.6);
  padding: 1px 5px;
  border-radius: 3px;
}
.news-video-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary, #1a1c1e);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px;
}
.news-video-meta {
  font-size: 11px;
  color: var(--text-tertiary, #8a94a6);
}

/* ═══════════════════════════════════════════════════════════════
   § 11. 많이 본 뉴스 (⑤ 섹션)
═══════════════════════════════════════════════════════════════ */
.news-popular-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.news-popular-toggle {
  display: flex;
  gap: 0;
  border: 1px solid var(--border, #eaecef);
  border-radius: 6px;
  overflow: hidden;
}
.news-popular-toggle-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 5px 12px;
  border: none;
  background: var(--nws-white);
  color: var(--text-secondary, #4a5568);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.news-popular-toggle-btn + .news-popular-toggle-btn {
  border-left: 1px solid var(--border, #eaecef);
}
.news-popular-toggle-btn[aria-checked="true"],
.news-popular-toggle-btn.active {
  background: var(--mint, #CEB588);
  color: var(--nws-white);
  font-weight: 700;
}

.news-popular-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.news-popular-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border, #eaecef);
  text-decoration: none;
}
.news-popular-item:last-child { border-bottom: none; }
.news-popular-rank {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--news-red);
  min-width: 28px;
  flex-shrink: 0;
  line-height: 1;
}
.news-popular-rank.low { color: var(--text-tertiary, #8a94a6); }
.news-popular-title {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #1a1c1e);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-popular-stats {
  font-size: 11px;
  color: var(--text-tertiary, #8a94a6);
  display: flex;
  gap: 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   § 12. 산업·정책 리포트 (⑥ 섹션)  패턴A: Mobile-First 그리드
   모바일 1열 → 데스크톱 2열
═══════════════════════════════════════════════════════════════ */
.news-report-grid {
  display: grid;
  grid-template-columns: 1fr;  /* 모바일 기본값 */
  gap: 12px;
}
@media (min-width: 768px) {
  .news-report-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.news-report-card {
  background: var(--nws-white);
  border: 1px solid var(--border, #eaecef);
  border-radius: var(--radius, 8px);
  padding: 20px;
  text-decoration: none;
  transition: box-shadow .15s, border-color .15s;
}
.news-report-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  border-color: var(--mint, #81D8D0);
}
.news-report-kicker {
  font-size: 11px;
  font-weight: 700;
  color: var(--mint-dark, #228E84);
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.news-report-title {
  font-size: clamp(14px, 2vw, 15px);
  font-weight: 800;
  color: var(--text-primary, #1a1c1e);
  line-height: 1.4;
  margin-bottom: 8px;
}
.news-report-snippet {
  font-size: 13px;
  color: var(--text-secondary, #4a5568);
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 12px;
}
.news-report-meta {
  font-size: 11px;
  color: var(--text-tertiary, #8a94a6);
  display: flex;
  gap: 10px;
}

/* ═══════════════════════════════════════════════════════════════
   § 13. 칼럼 (⑦ 섹션)  Mobile-First
═══════════════════════════════════════════════════════════════ */
.news-column-section {
  background: linear-gradient(135deg, var(--violet-lt, #f5f3ff), #fdf2f8);
  border-top: 1px solid #e9d5ff;
  border-bottom: 1px solid #e9d5ff;
  padding: 20px 0;  /* 모바일 기본값 */
}
@media (min-width: 768px) {
  .news-column-section { padding: 32px 0; }
}
@media (min-width: 1024px) {
  .news-column-section { padding: 40px 0; }
}
.news-column-notice {
  background: rgba(124,58,237,.06);
  border: 1px solid #e9d5ff;
  border-radius: var(--radius, 8px);
  padding: 12px 16px;
  font-size: 12px;
  color: var(--violet, #7C3AED);
  margin-bottom: 20px;
  line-height: 1.6;
}
.news-column-grid {
  display: grid;
  grid-template-columns: 1fr;  /* 모바일 기본값 */
  gap: 12px;
}
@media (min-width: 768px) {
  .news-column-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.news-column-card {
  background: rgba(255,255,255,.85);
  border: 1px solid #e9d5ff;
  border-radius: var(--radius, 8px);
  padding: 18px;
  text-decoration: none;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  transition: box-shadow .15s;
}
.news-column-card:hover { box-shadow: 0 4px 16px rgba(124,58,237,.12); }
.news-column-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--violet-lt, #f5f3ff);
  border: 2px solid #e9d5ff;
}
.news-column-body { flex: 1; min-width: 0; }
.news-column-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-primary, #1a1c1e);
  line-height: 1.4;
  margin-bottom: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-column-meta {
  font-size: 11px;
  color: var(--text-tertiary, #8a94a6);
  display: flex;
  gap: 8px;
  align-items: center;
}
.news-column-like {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-tertiary, #8a94a6);
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 0;
  margin-left: auto;
  transition: color .15s;
}
.news-column-like:hover, .news-column-like.active { color: var(--news-red); }

/* ═══════════════════════════════════════════════════════════════
   § 14. 선임기자 픽 (⑧ 섹션)  패턴A: Mobile-First 그리드
   모바일 1열 → 태블릿 2열 → 데스크톱 3열
═══════════════════════════════════════════════════════════════ */
.news-senior-grid {
  display: grid;
  grid-template-columns: 1fr;  /* 모바일 기본값 */
  gap: 12px;
}
@media (min-width: 768px) {
  .news-senior-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (min-width: 1024px) {
  .news-senior-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}
.news-senior-card {
  background: var(--nws-white);
  border: 1px solid var(--border, #eaecef);
  border-radius: var(--radius, 8px);
  padding: 22px;
  text-decoration: none;
  text-align: center;
  transition: box-shadow .15s, border-color .15s;
}
.news-senior-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.08);
  border-color: var(--gold-border);
}
.news-senior-avatar {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 10px;
  display: block;
  border: 3px solid var(--gold-border);
  background: var(--gold-light);
}
.news-senior-grade-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  background: var(--gold-light);
  border: 1px solid var(--gold-border);
  padding: 3px 8px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.news-senior-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary, #1a1c1e);
  margin-bottom: 3px;
}
.news-senior-specialty {
  font-size: 12px;
  color: var(--text-tertiary, #8a94a6);
  margin-bottom: 12px;
}
.news-senior-quote {
  font-size: 13px;
  color: var(--text-secondary, #4a5568);
  font-style: italic;
  line-height: 1.5;
  border-top: 1px solid var(--border, #eaecef);
  padding-top: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   § 15. FOOTER — 뉴스 전용 영역
═══════════════════════════════════════════════════════════════ */
.news-footer-wrap {
  background: var(--nws-white);
  border-top: 1px solid var(--border, #eaecef);
  padding: 36px 0 0;
}

/* 정정 보도 박스 */
.news-foot-correction {
  background: var(--news-red-bg);
  border: 1px solid var(--news-red-border);
  border-radius: var(--radius, 8px);
  padding: 18px 20px;
  margin-bottom: 32px;
}
.news-foot-correction h4 {
  font-size: 14px;
  font-weight: 800;
  color: var(--news-red);
  margin-bottom: 10px;
}
.news-foot-correction ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}
.news-foot-correction ul li {
  font-size: 13px;
  color: var(--text-secondary, #4a5568);
}
.news-foot-correction ul li a {
  color: var(--news-red-dark);
  text-decoration: underline;
}
.news-foot-correction ul li a:hover { color: var(--news-red); }
.news-foot-correction-more {
  font-size: 12px;
  color: var(--news-red-dark);
  font-weight: 700;
  text-decoration: none;
}
.news-foot-correction-more:hover { text-decoration: underline; }

/* 운영정보 — Mobile-First: 1열 → 데스크톱 3열 */
.news-foot-info {
  display: grid;
  grid-template-columns: 1fr;  /* 모바일 기본값 */
  gap: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border, #eaecef);
}
@media (min-width: 768px) {
  .news-foot-info { grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 24px; }
}
@media (min-width: 1024px) {
  .news-foot-info { grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-bottom: 28px; }
}
.news-foot-info-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary, #4a5568);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}
.news-foot-info-text {
  font-size: 12px;
  color: var(--text-tertiary, #8a94a6);
  line-height: 1.7;
}
.news-foot-info-text a {
  color: var(--mint-dark, #228E84);
  text-decoration: none;
}
.news-foot-info-text a:hover { text-decoration: underline; }
.news-foot-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.news-foot-links a {
  font-size: 13px;
  color: var(--text-secondary, #4a5568);
  text-decoration: none;
  transition: color .12s;
}
.news-foot-links a:hover { color: var(--mint-dark, #228E84); }

/* 편집장 카드 */
.news-foot-chief {
  background: var(--mint-pale, #FAFEFD);
  border: 1px solid var(--mint-light, #EADFCB);
  border-radius: var(--radius, 8px);
  padding: 16px;
}
.news-foot-chief-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--mint-dark, #228E84);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 8px;
}
.news-foot-chief-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text-primary, #1a1c1e);
  margin-bottom: 2px;
}
.news-foot-chief-role {
  font-size: 12px;
  color: var(--text-secondary, #4a5568);
  margin-bottom: 6px;
}
.news-foot-chief-mail {
  font-size: 12px;
  color: var(--mint-dark, #228E84);
  text-decoration: none;
}
.news-foot-chief-mail:hover { text-decoration: underline; }

/* 카피라이트 */
.news-foot-copy {
  padding: 16px 0;
  font-size: 12px;
  color: var(--text-tertiary, #8a94a6);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   § 16. 로그인 모달
═══════════════════════════════════════════════════════════════ */
.news-login-modal-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
.news-login-modal-bg.open { display: flex; }
.news-login-modal {
  background: var(--nws-white);
  border-radius: 12px;
  padding: 32px 28px;
  max-width: 340px;
  width: 90%;
  text-align: center;
}
.news-login-modal h3 {
  font-size: 18px;
  font-weight: 800;
  margin-bottom: 10px;
  color: var(--text-primary, #1a1c1e);
}
.news-login-modal p {
  font-size: 14px;
  color: var(--text-secondary, #4a5568);
  margin-bottom: 20px;
  line-height: 1.6;
}
.news-login-modal-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.news-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: .15s;
}
.news-modal-btn-primary {
  background: linear-gradient(135deg, var(--mint, #CEB588), var(--mint-dark, #A8884E));
  color: var(--nws-white);
}
.news-modal-btn-primary:hover { opacity: .9; }
.news-modal-btn-ghost {
  background: transparent;
  border: 1.5px solid var(--border, #eaecef);
  color: var(--text-secondary, #4a5568);
}
.news-modal-btn-ghost:hover { background: var(--mint-pale, #FAFEFD); }

/* ═══════════════════════════════════════════════════════════════
   § 17. 반응형 — Mobile-First 전환 완료
   (§3~§15에서 min-width 미디어쿼리로 이미 분산 정의됨)
   이 섹션은 광역 레이아웃 보완 및 1280px+ 와이드 처리만 담당
═══════════════════════════════════════════════════════════════ */
/* 1280px 이상: 뉴스 섹션 최대폭 패딩 강화 */
@media (min-width: 1280px) {
  .news-inner { padding: 0 40px; }
}

/* §18 — 구 max-width 블록 삭제됨 (Mobile-First 전환 완료)
   @media max-width 미디어쿼리 0건 확인 ✅ (prefers-reduced-motion 제외)
   모달 내 max-width: 340px 는 레이아웃 미디어쿼리가 아닌 박스 크기 제한 — 허용 */

/* ═══════════════════════════════════════════════════════════════
   § 18. 브레드크럼 Mobile-First 보완
═══════════════════════════════════════════════════════════════ */
.news-breadcrumb-bar { display: none; }  /* 모바일: 브레드크럼 숨김 */
@media (min-width: 768px) { .news-breadcrumb-bar { display: block; } }

/* ═══════════════════════════════════════════════════════════════
   § 19. 모션 감소 (접근성)
═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .news-ticker-list { animation: none; }
  .news-ticker-dot  { animation: none; }
}