/**
 * ┌─────────────────────────────────────────────────────────────────────┐
 * │  FILE INDEX — 여수뉴스포털                                          │
 * ├──────────────┬──────────────────────────────────────────────────────┤
 * │  파일명      │  news-core.css                                           │
 * │  위치        │  /news/assets/css/news-core.css                                        │
 * │  생성일      │  2026-05-16                                           │
 * │  수정일      │  2026-05-16                                           │
 * │  버전        │  v1.0                                                 │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  기능/역할   │  스타일시트 — 포털·컴포넌트별 규칙 적용               │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  레이아웃    │  기준 너비: 1200px (전역·포털 변수와 연동)            │
 * │  섹터 구조   │  .sector-wrap width:100% — 다열은 .sector-inner (원칙2) │
 * │  폰트 기준   │  최소 14px (--fs-base 등 변수 연동)                 │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  연관 파일   │  load-by  : header.php·포털 레이아웃 (상이)            │
 * │              │  변수 주입: echoLayoutVars()·포털 CSS (해당 시)       │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  참조 사항   │  /docs/PROJECT_RULES.md 원칙8·포털 CSS 접두 규칙       │
 * ├──────────────┼──────────────────────────────────────────────────────┤
 * │  변경 이력   │  2026-05-16 v1.0 - FILE INDEX 일괄 부여                     │
 * └──────────────┴──────────────────────────────────────────────────────┘
 */

/* ════════════════════════════════════════════════════════════
   §0  여수 브랜드 색 토큰 (layout_template.php 의 css_vars 와 동기화)
═══════════════════════════════════════════════════════════════ */
body.layout-news,
body.layout-news-list,
body.layout-news-detail {
  --yns-primary:    #0a4d8c;   /* 해양 블루 */
  --yns-primary-d:  #083763;
  --yns-primary-l:  #2c75bf;
  --yns-accent:     #e64a19;   /* 일출 오렌지 */
  --yns-accent-d:   #b53c14;
  --yns-ink:        #0f172a;   /* 본문 검정 */
  --yns-ink-soft:   #334155;
  --yns-muted:      #64748b;
  --yns-muted-l:    #94a3b8;
  --yns-line:       #e2e8f0;
  --yns-line-soft:  #f1f5f9;
  --yns-bg:         #ffffff;
  --yns-bg-soft:    #f8fafc;
  --yns-bg-tinted:  #f0f4f9;

  --yns-fs-hero:    28px;
  --yns-fs-h2:      21px;
  --yns-fs-h3:      18px;
  --yns-fs-body:    15px;
  --yns-fs-meta:    13px;
  --yns-fs-tiny:    12px;

  --yns-radius-sm:  4px;
  --yns-radius-md:  8px;
  --yns-radius-lg:  14px;

  --yns-gap-xs:     6px;
  --yns-gap-sm:     10px;
  --yns-gap-md:     16px;
  --yns-gap-lg:     24px;
  --yns-gap-xl:     32px;

  --yns-shadow-card: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --yns-shadow-hover: 0 4px 12px rgba(10,77,140,.12), 0 2px 4px rgba(15,23,42,.06);
}

/* ════════════════════════════════════════════════════════════
   §1  공통 — 본문 영역 골격 (모든 뉴스 페이지)
═══════════════════════════════════════════════════════════════ */
body.layout-news .sector-wrap.s7,
body.layout-news-list .sector-wrap.s7,
body.layout-news-detail .sector-wrap.s7 {
  background: var(--yns-bg-soft);
}

/* 섹션 공통 컨테이너 */
.yns-section {
  max-width: 1200px;
  margin: 0 auto var(--yns-gap-xl);
  padding: var(--yns-gap-lg) var(--yns-gap-md);
  background: var(--yns-bg);
  border-radius: var(--yns-radius-md);
  box-shadow: var(--yns-shadow-card);
}

.yns-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--yns-gap-md);
  margin-bottom: var(--yns-gap-md);
  padding-bottom: var(--yns-gap-sm);
  border-bottom: 2px solid var(--yns-ink);
  position: relative;
}

.yns-section-title {
  font-size: var(--yns-fs-h2);
  font-weight: 800;
  color: var(--yns-ink);
  margin: 0;
  letter-spacing: -.02em;
  display: inline-flex;
  align-items: center;
}

.yns-section-more {
  font-size: var(--yns-fs-meta);
  color: var(--yns-muted);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color .15s;
}
.yns-section-more:hover { color: var(--yns-primary); }

.yns-section-bar {
  position: absolute;
  left: 0; bottom: -2px;
  width: 60px; height: 2px;
  background: var(--yns-accent);
}

/* ════════════════════════════════════════════════════════════
   §2  TREND 6탭 (NHX 트렌드)
═══════════════════════════════════════════════════════════════ */
.yns-trend-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--yns-gap-xs);
  margin-bottom: var(--yns-gap-md);
  border-bottom: 1px solid var(--yns-line);
}

.yns-trend-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  font-size: var(--yns-fs-body);
  font-weight: 600;
  color: var(--yns-muted);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
  font-family: inherit;
}
.yns-trend-tab:hover { color: var(--yns-ink); }
.yns-trend-tab.is-active {
  color: var(--yns-primary);
  border-bottom-color: var(--yns-primary);
}

.yns-trend-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
}
.yns-trend-list.is-active { display: block; }

.yns-trend-row {
  border-bottom: 1px solid var(--yns-line-soft);
  display: flex;
  align-items: center;
  gap: var(--yns-gap-md);
  padding: 12px 4px;
}
.yns-trend-row:last-child { border-bottom: 0; }

.yns-trend-rank {
  font-size: 24px;
  font-weight: 800;
  font-style: italic;
  width: 36px;
  flex-shrink: 0;
  text-align: center;
  color: var(--yns-primary);
}

.yns-trend-link {
  display: flex;
  flex: 1;
  min-width: 0;
  flex-wrap: wrap;
  gap: var(--yns-gap-xs) var(--yns-gap-md);
  align-items: baseline;
  text-decoration: none;
  color: inherit;
}
.yns-trend-link:hover .yns-trend-title {
  color: var(--yns-primary);
  text-decoration: underline;
}

.yns-trend-cat {
  font-size: var(--yns-fs-tiny);
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: -.01em;
}

.yns-trend-title {
  flex: 1;
  min-width: 0;
  font-size: var(--yns-fs-body);
  font-weight: 600;
  color: var(--yns-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yns-trend-date {
  font-size: var(--yns-fs-tiny);
  color: var(--yns-muted-l);
  flex-shrink: 0;
}

.yns-trend-empty {
  text-align: center;
  padding: var(--yns-gap-xl);
  color: var(--yns-muted-l);
}

/* ════════════════════════════════════════════════════════════
   §3  SCL — 분야별 단순 리스트 (6칸 그리드)
═══════════════════════════════════════════════════════════════ */
.yns-scl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--yns-gap-lg);
}
@media (min-width: 980px) {
  .yns-scl-grid { grid-template-columns: repeat(3, 1fr); }
}

.yns-scl-card {
  background: var(--yns-bg);
  border: 1px solid var(--yns-line);
  border-radius: var(--yns-radius-md);
  padding: var(--yns-gap-md);
  display: flex;
  flex-direction: column;
}

.yns-scl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--yns-gap-sm);
  margin-bottom: var(--yns-gap-sm);
  border-bottom: 2px solid var(--yns-ink);
}

.yns-scl-cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: var(--yns-fs-h3);
  font-weight: 800;
  letter-spacing: -.02em;
}

.yns-scl-more {
  font-size: var(--yns-fs-tiny);
  color: var(--yns-muted);
  text-decoration: none;
  font-weight: 600;
}
.yns-scl-more:hover { color: var(--yns-primary); }

.yns-scl-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.yns-scl-row {
  border-bottom: 1px dashed var(--yns-line);
  padding: 8px 0;
}
.yns-scl-row:last-child { border-bottom: 0; }

.yns-scl-link {
  display: flex;
  gap: var(--yns-gap-sm);
  text-decoration: none;
  color: inherit;
  align-items: flex-start;
}

.yns-scl-thumb {
  display: block;
  width: 90px; height: 70px;
  flex-shrink: 0;
  border-radius: var(--yns-radius-sm);
  background: var(--yns-bg-tinted) center/cover no-repeat;
}

.yns-scl-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}

.yns-scl-title {
  font-size: var(--yns-fs-body);
  font-weight: 600;
  color: var(--yns-ink);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yns-scl-link:hover .yns-scl-title {
  color: var(--yns-primary);
}

.yns-scl-summary {
  font-size: var(--yns-fs-meta);
  color: var(--yns-muted);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yns-scl-date {
  font-size: var(--yns-fs-tiny);
  color: var(--yns-muted-l);
}

.yns-scl-lead .yns-scl-title {
  font-size: 17px;
  font-weight: 700;
  -webkit-line-clamp: 3;
}

.yns-scl-empty {
  color: var(--yns-muted-l);
  text-align: center;
  padding: var(--yns-gap-md);
}

/* ════════════════════════════════════════════════════════════
   §4  OPN — 오피니언 그리드 (사설+칼럼)
═══════════════════════════════════════════════════════════════ */
.yns-opn-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--yns-gap-md);
}
@media (min-width: 720px)  { .yns-opn-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .yns-opn-grid { grid-template-columns: repeat(4, 1fr); } }

.yns-opn-card {
  background: var(--yns-bg);
  border: 1px solid var(--yns-line);
  border-radius: var(--yns-radius-md);
  padding: var(--yns-gap-md);
  transition: box-shadow .15s, transform .15s;
}
.yns-opn-card:hover {
  box-shadow: var(--yns-shadow-hover);
  transform: translateY(-1px);
}

.yns-opn-link {
  display: flex;
  flex-direction: column;
  gap: var(--yns-gap-xs);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.yns-opn-tag {
  font-size: var(--yns-fs-tiny);
  font-weight: 700;
  color: #bf360c;
  background: #fff3e0;
  padding: 2px 8px;
  border-radius: 99px;
  align-self: flex-start;
}

.yns-opn-title {
  font-size: var(--yns-fs-h3);
  font-weight: 700;
  color: var(--yns-ink);
  margin: 4px 0 0;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.yns-opn-card:hover .yns-opn-title { color: var(--yns-primary); }

.yns-opn-summary {
  font-size: var(--yns-fs-meta);
  color: var(--yns-ink-soft);
  line-height: 1.5;
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.yns-opn-foot {
  margin-top: auto;
  padding-top: var(--yns-gap-sm);
  display: flex;
  justify-content: space-between;
  font-size: var(--yns-fs-tiny);
  color: var(--yns-muted-l);
}

.yns-opn-byline { font-weight: 600; color: var(--yns-muted); }

.yns-opn-lead { grid-column: span 1; }
@media (min-width: 1000px) {
  .yns-opn-lead:nth-child(1),
  .yns-opn-lead:nth-child(2),
  .yns-opn-lead:nth-child(3) {
    background: linear-gradient(180deg, #fff8f0 0%, #ffffff 60%);
    border-color: #ffd6b3;
  }
}

/* ════════════════════════════════════════════════════════════
   §5  LIST 페이지 — 좌 트리 + 메인 리스트 + 우 사이드 (NHX 톤)
═══════════════════════════════════════════════════════════════ */
body.layout-news-list .nl-with-tree {
  background: var(--yns-bg-soft);
  padding-bottom: var(--yns-gap-xl);
}

body.layout-news-list .nl-tree-col {
  background: var(--yns-bg);
  border-radius: var(--yns-radius-md);
  box-shadow: var(--yns-shadow-card);
  padding: var(--yns-gap-sm) !important;
  padding-top: var(--yns-gap-sm) !important;
}

body.layout-news-list .nl-cat-tabs {
  background: var(--yns-bg);
  border-radius: var(--yns-radius-md) var(--yns-radius-md) 0 0;
  box-shadow: var(--yns-shadow-card);
  padding: 6px 8px;
  border-bottom: 2px solid var(--yns-ink);
}

body.layout-news-list .nl-content-wrap {
  background: var(--yns-bg);
  border-radius: 0 0 var(--yns-radius-md) var(--yns-radius-md);
  box-shadow: var(--yns-shadow-card);
  padding: var(--yns-gap-md);
}

/* 첫 기사를 큰 카드로 강조 (NHX 카테고리 페이지 패턴) */
body.layout-news-list .ni-grid > .ni-item:first-child {
  border-left: 4px solid var(--yns-accent);
  padding-left: 12px;
  background: linear-gradient(90deg, #fff8f0 0%, #ffffff 40%);
  margin-bottom: 8px;
}
body.layout-news-list .ni-grid > .ni-item:first-child .ni-title {
  font-size: 24px !important;
  font-weight: 800 !important;
}

/* 사이드바 인기기사 강조 */
body.layout-news-list .nl-sb-popular .nl-sb-row:first-child {
  background: var(--yns-bg-tinted);
  padding: 8px 10px;
  border-radius: var(--yns-radius-sm);
  border-left: 3px solid var(--yns-primary);
}

/* 페이지네이션 — NHX 톤 */
body.layout-news-list .nl-pager a,
body.layout-news-list .nl-pager span {
  border-radius: var(--yns-radius-sm) !important;
}
body.layout-news-list .nl-pager .nl-pager-current,
body.layout-news-list .nl-pager [aria-current="page"] {
  background: var(--yns-primary) !important;
  color: #fff !important;
  border-color: var(--yns-primary) !important;
}

/* ════════════════════════════════════════════════════════════
   §6  DETAIL 페이지 — 기사 상세 (NHX 톤)
═══════════════════════════════════════════════════════════════ */
body.layout-news-detail .sector-wrap.s7 {
  background: var(--yns-bg-soft);
}

/* 본문 컨테이너 폭 정돈 (가독성 우선) */
body.layout-news-detail .nd-wrap,
body.layout-news-detail .nd-body,
body.layout-news-detail .nd-article {
  background: var(--yns-bg);
}

/* 기사 hero 영역 강조 */
body.layout-news-detail .nd-hero {
  border-bottom: 1px solid var(--yns-line);
}

body.layout-news-detail .nd-cat-tag,
body.layout-news-detail .article-cat,
body.layout-news-detail .news-cat-badge {
  background: var(--yns-primary);
  color: #fff;
  padding: 4px 12px;
  border-radius: 99px;
  font-size: var(--yns-fs-tiny);
  font-weight: 700;
  display: inline-block;
}

/* 기사 본문 가독성 개선 */
body.layout-news-detail .nd-article p,
body.layout-news-detail .news-body p,
body.layout-news-detail .article-body p {
  font-size: 17px !important;
  line-height: 1.85 !important;
  letter-spacing: -.01em !important;
  color: var(--yns-ink) !important;
  margin-bottom: 1.4em !important;
}

/* 사이드바 카드 톤 */
body.layout-news-detail .nd-sb,
body.layout-news-detail .news-sidebar {
  background: var(--yns-bg);
  border-radius: var(--yns-radius-md);
  box-shadow: var(--yns-shadow-card);
}

/* 관련기사 그리드 강조 */
body.layout-news-detail .nd-related,
body.layout-news-detail .related-news {
  border-top: 2px solid var(--yns-ink);
  padding-top: var(--yns-gap-md);
  margin-top: var(--yns-gap-xl);
}

/* 좋아요 버튼 등 */
body.layout-news-detail .nd-like.is-liked,
body.layout-news-detail .like-btn.active {
  background: var(--yns-accent) !important;
  color: #fff !important;
  border-color: var(--yns-accent) !important;
}

/* ════════════════════════════════════════════════════════════
   §7  메인 페이지 (layout-news) — 기존 .yn-wrap 톤 정돈
═══════════════════════════════════════════════════════════════ */
body.layout-news .yn-wrap {
  background: var(--yns-bg-soft);
  padding-bottom: var(--yns-gap-xl);
}

/* ════════════════════════════════════════════════════════════
   §8  모바일 반응형
═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .yns-section {
    padding: var(--yns-gap-md) 12px;
    border-radius: 0;
    margin-bottom: var(--yns-gap-md);
  }

  .yns-section-title { font-size: 18px; }

  .yns-trend-tab { padding: 8px 10px; font-size: 15px; }
  .yns-trend-rank { width: 28px; font-size: 18px; }
  .yns-trend-title { font-size: 14px; white-space: normal; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }

  .yns-scl-grid { grid-template-columns: 1fr; gap: var(--yns-gap-md); }
  .yns-scl-thumb { width: 70px; height: 56px; }
  .yns-scl-lead .yns-scl-title { font-size: 15px; }
  .yns-scl-summary { display: none; }

  .yns-opn-grid { grid-template-columns: 1fr 1fr; }
  .yns-opn-title { font-size: 15px; }

  body.layout-news-list .ni-grid > .ni-item:first-child .ni-title { font-size: 18px !important; }
  body.layout-news-detail .nd-article p,
  body.layout-news-detail .news-body p,
  body.layout-news-detail .article-body p { font-size: 16px !important; line-height: 1.75 !important; }
}

@media (max-width: 480px) {
  .yns-opn-grid { grid-template-columns: 1fr; }
  .yns-trend-tabs { gap: 0; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .yns-trend-tab { white-space: nowrap; flex-shrink: 0; }
}

/* ════════════════════════════════════════════════════════════
   §9  유틸 — 인쇄용 / 접근성
═══════════════════════════════════════════════════════════════ */
@media print {
  body.layout-news .nt-sticky-tabs,
  body.layout-news-list .nl-tree-col,
  body.layout-news-detail .nd-share,
  body.layout-news-detail .nd-toc { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .yns-opn-card { transition: none !important; }
}