/*
Theme Name: GeneratePress Child - Newsline
Theme URI: https://newsline.kr
Description: 뉴스라인 메인 페이지(뉴스 매거진 레이아웃)용 GeneratePress 자식 테마
Author: Newsline
Template: generatepress
Version: 1.0.0
*/

/* ============================================================
   메인 페이지 (front-page.php) 전용 스타일 — .nl-home 스코프
   본문 글 페이지 스타일은 기존 추가 CSS(readability.css)가 담당
   ============================================================ */

.nl-home {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

.nl-home a { text-decoration: none; color: inherit; }
.nl-home a:hover .nl-title { text-decoration: underline; }

/* ---------- 섹션 공통 ---------- */
.nl-section { margin-bottom: 44px; }

.nl-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid #1a1a1a;
}
.nl-section-head .nl-bar {
  width: 6px; height: 22px; border-radius: 2px;
  background: #2f6fdb;
}
.nl-section-head h2 {
  margin: 0; font-size: 1.25em; font-weight: 800; letter-spacing: -0.01em;
}
.nl-section-head .nl-more {
  margin-left: auto; font-size: 0.85em; color: #777;
}
.nl-section-head .nl-more:hover { color: #2f6fdb; }

/* 카테고리별 포인트 색 (썸네일 생성기와 동일 팔레트) */
.nl-cat-support .nl-bar   { background: #1d4ed8; }
.nl-cat-tax .nl-bar       { background: #0f766e; }
.nl-cat-welfare .nl-bar   { background: #b45309; }
.nl-cat-life .nl-bar      { background: #4338ca; }

/* ---------- 카테고리 배지 ---------- */
.nl-badge {
  display: inline-block;
  font-size: 0.72em; font-weight: 700;
  padding: 3px 9px; border-radius: 4px;
  background: #eef3fd; color: #2f6fdb;
  margin-bottom: 8px;
}

/* ---------- 헤드라인 존 ---------- */
.nl-hero {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 28px;
  margin-bottom: 48px;
}

.nl-hero-main .nl-thumb {
  aspect-ratio: 1200 / 630;
  border-radius: 10px;
  overflow: hidden;
  background: #e9edf3;
  margin-bottom: 14px;
}
.nl-hero-main .nl-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease;
}
.nl-hero-main a:hover .nl-thumb img { transform: scale(1.02); }
.nl-hero-main .nl-title {
  font-size: 1.55em; font-weight: 800; line-height: 1.35;
  margin: 0 0 10px; color: #111; letter-spacing: -0.01em;
}
.nl-hero-main .nl-excerpt {
  color: #555; line-height: 1.7; font-size: 0.95em; margin: 0;
}

.nl-hero-side { display: flex; flex-direction: column; }
.nl-hero-side .nl-side-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid #ececec;
}
.nl-hero-side .nl-side-item:first-child { padding-top: 4px; }
.nl-hero-side .nl-side-item:last-child { border-bottom: 0; }
.nl-hero-side .nl-thumb {
  flex: 0 0 110px; aspect-ratio: 1200 / 630;
  border-radius: 6px; overflow: hidden; background: #e9edf3;
}
.nl-hero-side .nl-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.nl-hero-side .nl-title {
  font-size: 0.98em; font-weight: 700; line-height: 1.45;
  margin: 0 0 6px; color: #1c1c1c;
}
.nl-hero-side .nl-meta { font-size: 0.78em; color: #999; }

/* ---------- 카드 그리드 (카테고리 섹션) ---------- */
.nl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.nl-card .nl-thumb {
  aspect-ratio: 1200 / 630;
  border-radius: 8px; overflow: hidden; background: #e9edf3;
  margin-bottom: 10px;
}
.nl-card .nl-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .25s ease;
}
.nl-card a:hover .nl-thumb img { transform: scale(1.03); }
.nl-card .nl-title {
  font-size: 0.95em; font-weight: 700; line-height: 1.45;
  margin: 0 0 6px; color: #1c1c1c;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.nl-card .nl-meta { font-size: 0.78em; color: #999; }

/* ---------- 최신 글 리스트 ---------- */
.nl-latest-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.nl-latest-item {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 13px 0; border-bottom: 1px solid #ececec;
}
.nl-latest-item .nl-thumb {
  flex: 0 0 96px; aspect-ratio: 1200 / 630;
  border-radius: 6px; overflow: hidden; background: #e9edf3;
}
.nl-latest-item .nl-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.nl-latest-item .nl-title {
  font-size: 0.93em; font-weight: 600; line-height: 1.45;
  margin: 0 0 5px; color: #222;
}
.nl-latest-item .nl-meta { font-size: 0.76em; color: #999; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .nl-hero { grid-template-columns: 1fr; gap: 8px; }
  .nl-grid { grid-template-columns: repeat(2, 1fr); }
  .nl-latest-list { grid-template-columns: 1fr; }
  .nl-hero-main .nl-title { font-size: 1.3em; }
}
@media (max-width: 480px) {
  .nl-home { padding: 18px 14px 40px; }
  .nl-grid { gap: 14px; }
}