@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@500;700;900&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

/* D2Coding — 네이버 제작, SIL OFL 1.1 라이선스 (상업적 임베딩 허용) */
@import url('https://unpkg.com/@kfonts/d2coding-ligature/index.css');

:root {
  --ink: #1a2238;
  --ink-soft: #2c3555;
  --press-red: #c6303e;
  --paper: #faf9f6;
  --paper-dim: #f1efe8;
  --steel: #6b7280;
  --hairline: #d9d9d4;
  --gold: #a97a1f;
  --serif: 'Noto Serif KR', serif;
  --sans: 'Noto Sans KR', sans-serif;
  --article-font: 'D2Coding ligature', 'D2Coding', monospace;

  /* Bootstrap 변수를 브랜드 톤으로 덮어씁니다 */
  --bs-body-font-family: var(--sans);
  --bs-body-color: var(--ink);
  --bs-body-bg: var(--paper);
  --bs-primary: var(--ink);
  --bs-primary-rgb: 26, 34, 56;
  --bs-link-color: var(--press-red);
  --bs-link-hover-color: var(--ink);
  --bs-border-color: var(--hairline);
}

body { background: var(--paper); }
a { text-decoration: none; }
html { scroll-behavior: smooth; }

/* ---------- 마스트헤드 (Bootstrap에 없는 신문 고유 요소만 커스텀) ---------- */
.topbar { border-bottom: 1px solid var(--hairline); font-size: 12.5px; color: var(--steel); }
.topbar a { color: var(--steel); }
.topbar a:hover { color: var(--ink); }
.home-link { font-weight: 700; color: var(--ink) !important; padding-right: 2px; }
.home-link:hover { color: var(--press-red) !important; }

.masthead { padding: 30px 0 22px; text-align: center; border-bottom: 1px solid var(--ink); }
.masthead .logo-link { display: inline-block; text-decoration: none; }
.masthead .logo {
  font-family: var(--serif);
  font-weight: 900;
  font-size: 56px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1;
}
.masthead .logo .logo-news {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-left: 6px;
}
.masthead .tagline {
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--steel);
  letter-spacing: 0.12em;
}
.masthead .tagline::before, .masthead .tagline::after {
  content: '';
  display: inline-block;
  width: 28px;
  height: 1px;
  background: var(--hairline);
  vertical-align: middle;
  margin: 0 10px;
}
.masthead .tagline-accent { color: var(--bs-link-color); font-weight: 600; }
@media (max-width: 576px) {
  .masthead .logo { font-size: 36px; }
  .masthead .logo .logo-news { font-size: 18px; }
}

/* 메인 내비게이션: Bootstrap navbar 위에 신문 느낌만 덧입힘 */
.navbar-news { background: var(--ink) !important; }
.navbar-news .navbar-nav { gap: 6px; }
.navbar-news .nav-link { color: #eceef4 !important; font-weight: 700; font-size: 18px; letter-spacing: -0.01em; border-bottom: 3px solid transparent; padding: 15px 24px !important; transition: border-color .2s ease, background .2s ease; }
.navbar-news .nav-link:hover, .navbar-news .nav-link.active { border-bottom-color: var(--press-red); background: var(--ink-soft); }

/* 메뉴에 마우스를 가져가면 서브 카테고리 드롭다운이 나타납니다 */
.navbar-news .nav-item.dropdown { position: relative; }
.navbar-news .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 0;
  padding: 6px 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: 0 10px 24px rgba(10, 14, 30, 0.14);
}
.navbar-news .nav-item.dropdown:hover .dropdown-menu,
.navbar-news .nav-item.dropdown:focus-within .dropdown-menu { display: block; }
.navbar-news .dropdown-item { color: var(--ink); font-size: 14.5px; font-weight: 500; padding: 9px 20px; }
.navbar-news .dropdown-item:hover { background: var(--paper-dim); color: var(--press-red); }
.navbar-news .dropdown-toggle::after { vertical-align: 2px; opacity: 0.7; }

/* 내비게이션 검색창 */
.nav-search { align-items: center; margin-left: 36px; }
.nav-search input[type="search"] {
  width: 160px;
  background: var(--ink-soft);
  border: 1px solid rgba(255,255,255,0.18);
  color: #eceef4;
}
.nav-search input[type="search"]::placeholder { color: rgba(236,238,244,0.55); }
.nav-search input[type="search"]:focus {
  background: var(--ink-soft);
  color: #eceef4;
  border-color: var(--press-red);
  box-shadow: 0 0 0 0.2rem rgba(198,48,62,0.25);
}
.nav-search-btn {
  border: 1px solid rgba(255,255,255,0.18);
  border-left: none;
  background: var(--ink-soft);
  color: #eceef4;
  font-size: 13px;
  font-weight: 600;
  padding: 0 14px;
}
.nav-search-btn:hover { background: var(--press-red); border-color: var(--press-red); color: #fff; }
@media (max-width: 991px) {
  .nav-search { margin-left: 0; width: 100%; justify-content: center; padding: 8px 0 4px; }
}

/* 서브 내비게이션(정치/사회 세부 분류): Bootstrap nav-underline 커스터마이즈 */
.subnav .nav-link { color: var(--ink); font-weight: 600; padding: 10px 0; margin-right: 22px; }
.subnav .nav-link.active { color: var(--press-red) !important; border-bottom-color: var(--press-red) !important; background: none; }

/* 캐러셀 캡션 (Bootstrap carousel 위에 신문 톤 덧입힘) */
.carousel { animation: fadeInUp .6s ease both; }
.carousel .carousel-item { aspect-ratio: 16/7; background: var(--ink); }
.carousel .carousel-item img { width: 100%; height: 100%; object-fit: cover; opacity: 0.72; transition: transform 6s ease; }
.carousel .carousel-item.active img { transform: scale(1.06); }
.carousel-caption { text-align: left; left: 0; right: 0; bottom: 0; padding: 34px 44px 30px; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(10,14,30,0.86) 78%); }
.carousel-caption .tag { display: inline-block; background: var(--press-red); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; padding: 3px 9px; margin-bottom: 12px; }
.carousel-caption h2 { font-family: var(--serif); font-weight: 700; font-size: clamp(20px, 3vw, 32px); margin: 0 0 10px; max-width: 780px; line-height: 1.35; }
.carousel-caption p { color: #d7dae4; font-size: 14.5px; max-width: 620px; margin: 0; font-family: var(--article-font); }
.carousel-indicators [data-bs-target] { transition: opacity .2s ease, transform .2s ease; }
.carousel-indicators [data-bs-target]:hover { transform: scaleY(1.6); }

/* 섹션 제목 */
.section-head { border-bottom: 2px solid var(--ink); padding-bottom: 8px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; }
.section-head h3 { font-family: var(--serif); font-size: 20px; font-weight: 700; margin: 0; }

.live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--press-red); }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--press-red); animation: livePulse 1.6s ease-in-out infinite; }
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,48,62,0.45); }
  50% { box-shadow: 0 0 0 5px rgba(198,48,62,0); }
}

/* 살짝 떠오르며 나타나는 진입 애니메이션 — 기사 그리드, 캐러셀, 랭킹 리스트에 사용 */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
#article-list > .col { animation: fadeInUp .5s ease both; }
#article-list > .col:nth-child(1) { animation-delay: .03s; }
#article-list > .col:nth-child(2) { animation-delay: .08s; }
#article-list > .col:nth-child(3) { animation-delay: .13s; }
#article-list > .col:nth-child(4) { animation-delay: .18s; }
#article-list > .col:nth-child(5) { animation-delay: .23s; }
#article-list > .col:nth-child(6) { animation-delay: .28s; }
#article-list > .col:nth-child(n+7) { animation-delay: .32s; }

.rank-list > li { animation: fadeInUp .45s ease both; }
.rank-list > li:nth-child(1) { animation-delay: .05s; }
.rank-list > li:nth-child(2) { animation-delay: .1s; }
.rank-list > li:nth-child(3) { animation-delay: .15s; }
.rank-list > li:nth-child(4) { animation-delay: .2s; }
.rank-list > li:nth-child(5) { animation-delay: .25s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel, #article-list > .col, .rank-list > li, .carousel .carousel-item img { animation: none !important; transition: none !important; }
}

/* ---------- 기사 리스트 (가로형 — 썸네일 좌측, 본문 우측, 구분선) ---------- */
.article-row { display: flex; gap: 22px; padding: 24px 0; border-bottom: 1px solid var(--hairline); text-decoration: none; color: inherit; transition: padding-left .2s ease, background .2s ease; }
.article-row:hover { background: var(--paper-dim); padding-left: 10px; }
.article-row:first-child { padding-top: 0; }
.article-row .thumb { flex: 0 0 220px; aspect-ratio: 4/3; overflow: hidden; background: var(--paper-dim); }
.article-row .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.article-row:hover .thumb img { transform: scale(1.05); }
.article-row .content { flex: 1; min-width: 0; }
.article-row .cat-tag { font-size: 12px; font-weight: 700; color: var(--press-red); letter-spacing: 0.03em; margin-bottom: 4px; }
.article-row h4 { font-family: var(--serif); font-size: 20px; font-weight: 700; margin: 0 0 8px; line-height: 1.4; transition: color .2s ease; }
.article-row:hover h4 { text-decoration: underline; text-underline-offset: 3px; color: var(--press-red); }
.article-row .summary { font-family: var(--article-font); font-size: 14px; color: #444; line-height: 1.7; margin: 0 0 10px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.article-row time { font-size: 12.5px; color: #9a9a94; }
@media (max-width: 576px) {
  .article-row { gap: 14px; }
  .article-row .thumb { flex-basis: 120px; }
  .article-row h4 { font-size: 16px; }
}

/* 카드형 그리드(홈 화면 최신기사에서 계속 사용) */
.card-news { display: block; transition: transform .25s ease; }
.card-news:hover { transform: translateY(-5px); }
.card-news .thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--paper-dim); transition: box-shadow .25s ease; }
.card-news:hover .thumb { box-shadow: 0 14px 28px rgba(10,14,30,.14); }
.card-news .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card-news:hover .thumb img { transform: scale(1.06); }
.card-news .cat-tag { font-size: 11.5px; font-weight: 700; color: var(--press-red); letter-spacing: .04em; }
.card-news h4 { font-family: var(--serif); font-size: 16.5px; line-height: 1.4; font-weight: 700; transition: color .2s ease; }
.card-news:hover h4 { color: var(--press-red); text-decoration: underline; text-underline-offset: 3px; }
.card-news p { font-family: var(--article-font); font-size: 13px; color: var(--steel); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card-news time { font-size: 11.5px; color: #9a9a94; }

/* 사이드바 */
.rank-list li { border-bottom: 1px solid var(--hairline); transition: padding-left .2s ease; }
.rank-list li:hover { padding-left: 6px; background: var(--paper-dim); }
.rank-list li:last-child { border-bottom: none; }
.rank-num { font-family: var(--serif); font-weight: 900; font-size: 18px; color: var(--press-red); width: 22px; flex-shrink: 0; transition: transform .2s ease; }
.rank-list li:hover .rank-num { transform: scale(1.15); }
.rank-list h5 { font-size: 13.5px; font-weight: 600; margin: 0; line-height: 1.45; transition: color .2s ease; }
.rank-list li:hover h5 { color: var(--press-red); }
.membership-box { background: var(--ink); color: #fff; transition: transform .25s ease, box-shadow .25s ease; }
.membership-box:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(10,14,30,.2); }
.membership-box h5 { font-family: var(--serif); }

/* 기사 상세 */
.article-page { max-width: 720px; }
.article-page .cat-tag { font-size: 12.5px; font-weight: 700; color: var(--press-red); letter-spacing: .04em; }
.article-page h1 { font-family: var(--serif); font-size: 32px; line-height: 1.4; }
.article-page .subtitle { font-family: var(--article-font); font-size: 16.5px; color: var(--steel); line-height: 1.6; }
.article-page .body-text { font-family: var(--article-font); font-size: 16px; line-height: 1.95; white-space: pre-line; }

/* 폼 */
.form-page { max-width: 420px; margin: 70px auto; }
.form-page h2 { font-family: var(--serif); }

/* 눈 아이콘(비밀번호 표시) */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 42px; }
.password-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: none; background: none; padding: 0;
  display: flex; align-items: center; justify-content: center; color: var(--steel); cursor: pointer; z-index: 5;
}
.password-toggle:hover { color: var(--ink); }
.password-toggle svg { width: 18px; height: 18px; pointer-events: none; }

/* 로고/버튼 등 브랜드 버튼 */
.btn-brand { background: var(--press-red); border-color: var(--press-red); color: #fff; }
.btn-brand:hover { background: #a82533; border-color: #a82533; color: #fff; }

footer { border-top: 1px solid var(--hairline); font-size: 12px; color: var(--steel); }
footer .logo-small { font-family: var(--serif); font-weight: 700; color: var(--ink); font-size: 15px; }

/* ---------- 홈 화면: 캐러셀 아래 카테고리 블록(정치사회/외교국방/북한/산업경제/데이터뉴스) ---------- */
/* 카테고리마다 동일한 사이즈의 카드 3개를 3열 그리드로 보여줍니다. */
#home-cat-blocks { margin: 6px 0 8px; }
.cat-block { padding: 30px 0; border-bottom: 1px solid var(--hairline); }
.cat-block:last-child { border-bottom: none; }

.cat-block-head { border-top: 3px solid var(--press-red); padding-top: 10px; margin-bottom: 18px; }
.cat-block-head h3 { font-family: var(--serif); font-size: 19px; font-weight: 700; margin: 0; }

.cat-block-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

@media (max-width: 767px) {
  .cat-block-grid { grid-template-columns: 1fr; gap: 20px; }
}