/* ---------- Design tokens ---------- */
/* 모바일 포털형 홈: 옅은 청회색 바탕 + 흰 둥근 카드.
   브랜드 색은 업로드된 NU 락업(넥스트유니온 로고.png)에서 그대로 뽑았다.
   - 딥 네이비 #062a5c : 워드마크 색. 밝은 면 위 제목·컨트롤에 쓴다.
   - 스트롱 블루 #0a6fae : 지구본 중간 톤. 흰 배경 대비 5.4:1 — 본문급 강조 텍스트에 안전하다.
   - 시안 #0aa9e6 : 지구본 하이라이트. 흰 배경 대비 2.7:1뿐이라 채움·테두리·장식,
     그리고 네이비 위 텍스트(5.2:1)로만 쓰고 흰 배경 위 텍스트로는 쓰지 않는다. */
:root {
  --color-navy: #062a5c;
  --color-navy-deep: #041c3f;
  --color-navy-soft: #0d3f7a;
  --color-blue: #0a6fae;
  --color-blue-deep: #075787;
  --color-cyan: #0aa9e6;
  --color-cyan-soft: #a9dcf5;
  --color-bg: #eef2f7;
  --color-surface: #ffffff;
  --color-surface-sunken: #f2f6fa;
  --color-text: #14181f;
  --color-text-muted: #566573;
  --color-border: #dce3ec;
  --color-border-strong: #c3d0de;
  --color-on-navy: #c8d6e6;
  --color-on-navy-muted: #93a9c2;

  /* SmartBiz 기준 단일 스택. --font-serif 도 같은 스택으로 두어 기사 상세를 포함한
     어떤 표면에도 세리프가 남지 않게 한다. */
  --font-sans: 'Inter', 'Noto Sans KR', sans-serif;
  --font-serif: 'Inter', 'Noto Sans KR', sans-serif;

  --max-width: 1320px;
  --radius-card: 14px;
  --radius-pill: 999px;
  --radius-shorts: 18px;
  --shell-pad: 0.75rem; /* 화면 가장자리 여백 (12px) */
  --feed-gap: 0.625rem; /* 카드 사이 간격 (10px) */
  --tap-target: 44px;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1.25rem;
  --space-lg: 2rem;
  --space-xl: 3rem;

  color-scheme: light;
}

/* ---------- Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input {
  font: inherit;
}

/* 이 디자인의 목록은 모두 스스로 번호·표식을 그린다(쇼츠 세로 피드, 랭킹 목록).
   ol 을 빼 두면 UA 기본값(왼쪽 여백 40px)이 남아 쇼츠가 화면을 꽉 채우지 못한다. */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1,
h2,
h3,
p {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Consistent, visible focus for keyboard users */
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Skip link ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-md);
  z-index: 1000;
  background: var(--color-navy);
  color: #fff;
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 0 6px 6px;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 0;
}

/* ---------- Brand header (밝은 표면 + 로고·가치 문구·검색 정렬 그룹) ---------- */
/* 좌우 기준선: 안쪽 요소가 max-width + 자체 좌우 여백을 가져 카테고리 내비·카드 피드와 같은 선에 선다.
   (바깥 .brand-header 에 여백을 주면 넓은 화면에서 기준선이 어긋난다) */
.brand-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.brand-header__utility {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--shell-pad);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}

.brand-header__date {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.brand-header__links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.brand-header__links a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0 0.45rem;
  white-space: nowrap;
  color: var(--color-navy);
  font-weight: 600;
}

.brand-header__links a:hover {
  color: var(--color-blue);
}

/* 기사 제보: 헤더에서 유일한 채움 버튼 — 운영 중인 기자 데스크로 가는 진입점 */
.brand-header__links .brand-header__tip {
  min-height: 2.25rem;
  padding: 0 0.85rem;
  background: var(--color-navy);
  border-radius: var(--radius-pill);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}

.brand-header__links .brand-header__tip:hover {
  background: var(--color-blue);
  color: #fff;
}

/* 좁은 화면에서는 유틸리티 텍스트 링크를 접고 제보 버튼만 남긴다 (전체 메뉴에 같은 항목이 있다) */
.brand-header__links .brand-header__utility-link {
  display: none;
}

/* 마스트헤드: 로고 | 2탭 | 메뉴 버튼 — 한 줄로 정렬한다.
   검색 캡슐은 전체 메뉴 서랍으로 내려갔으므로 여기서는 세 칸만 쓴다.
   메뉴 버튼은 접근성·DOM 순서를 유지한 채 grid-column 으로 맨 오른쪽에 배치한다. */
.brand-header__masthead {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--shell-pad) 0.35rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem;
}

.brand-header__menu-btn {
  grid-column: 3;
  grid-row: 1;
  justify-self: end;
}

/* 업로드 원본은 흰 배경 불투명 PNG라, 밝은 헤더 표면 위에 그대로 올린다(별도 흰 카드·그림자 없음).
   심벌 옆에는 브랜드명을 별도 텍스트로 두어 작은 락업에서도 이름이 또렷하게 읽히게 한다. */
.brand-header__wordmark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  grid-column: 1;
  grid-row: 1;
  /* grid item: 세로 락업이 자기 고유 폭(560px)으로 칸을 밀어내지 않게 한다 */
  min-width: 0;
  background: var(--color-surface);
  border-radius: 4px;
}

.brand-header__logo {
  flex: 0 0 auto;
  width: clamp(29px, 8vw, 38px);
  height: auto;
}

.brand-header__name {
  display: inline-block;
  color: var(--color-navy);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 800;
  letter-spacing: 0.035em;
  line-height: 1;
  white-space: nowrap;
}

/* ---------- 검색 블록 (전체 메뉴 서랍 안에 산다) ---------- */
/* 상단바에서는 빠졌지만 클래스 이름·마크업은 그대로 유지한다. 어느 뷰포트에서도 접히지 않고
   「가치 문구 + 검색 캡슐」 전체 모습으로 보인다. */
.brand-header__search {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

/* 가치 문구: 검색창 바로 위에서 사이트가 무엇을 주는지 한 줄로 말한다 (흰 배경 대비 5.4:1) */
.brand-header__tagline {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-blue);
}

/* 검색 캡슐: 밝은 헤더에서는 살짝 내려앉은 면 + 또렷한 테두리로 입력창임을 알린다 */
.brand-header__search-btn {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  min-height: var(--tap-target);
  padding: 0.25rem 0.3rem 0.25rem 0.9rem;
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text-muted);
  font-size: 0.88rem;
}

.brand-header__search-btn:hover {
  border-color: var(--color-blue);
}

.brand-header__search-placeholder {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.brand-header__search-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
}

.brand-header__search-btn:hover .brand-header__search-icon {
  background: var(--color-blue);
}

.icon-button {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-height: var(--tap-target);
  min-width: var(--tap-target);
  color: var(--color-navy);
  padding: 0 0.25rem;
}

.icon-button__label {
  font-size: 0.72rem;
  font-weight: 600;
}

.hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 18px;
  height: 14px;
}

.hamburger span {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* ---------- 홈 2탭 (오늘의 뉴스 / 쇼츠) ---------- */
/* 홈에서만 보인다. 선택 탭은 굵은 글씨 + 짧은 밑줄로 표시한다. */
.brand-header__tabs {
  display: none;
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  align-items: stretch;
  gap: 0.25rem;
  min-width: 0;
}

body[data-home-tab] .brand-header__tabs {
  display: flex;
}

.home-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-target);
  padding: 0 0.55rem;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.home-tab:hover {
  color: var(--color-blue);
}

.home-tab[aria-selected='true'] {
  color: var(--color-navy);
  font-weight: 800;
}

/* 짧은 밑줄 — 글자 폭보다 좁게 두어 선택 표시만 한다 */
.home-tab[aria-selected='true']::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.35rem;
  transform: translateX(-50%);
  width: 22px;
  height: 3px;
  border-radius: 2px;
  background: var(--color-navy);
}

/* 모바일 홈: 유틸리티 줄을 접고 「로고 · 2탭 · 메뉴」 한 줄만 남긴다.
   접힌 항목(날짜·뉴스레터·기사 제보)과 검색은 전체 메뉴에 그대로 있다. */
@media (max-width: 767px) {
  .brand-header__wordmark {
    gap: 0.35rem;
  }

  .brand-header__name {
    font-size: 0.85rem;
    letter-spacing: 0.025em;
  }

  .brand-header__utility {
    display: none;
  }

  .brand-header__masthead {
    padding: 0.15rem var(--shell-pad) 0.15rem;
  }

  .icon-button__label {
    display: none;
  }
}

/* ---------- 쇼츠 탭: 상단바를 뺀 화면 전부를 세로 피드가 차지한다 ---------- */
/* 기사 섹션·푸터·카테고리 칩·속보 카드가 스크롤 중간에 끼지 않도록 화면에서 비운다. */
body[data-home-tab='shorts'] {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #05070c;
}

body[data-home-tab='shorts'] .brand-header {
  flex: 0 0 auto;
}

body[data-home-tab='shorts'] #main-content {
  flex: 1 1 auto;
  min-height: 0;
}

body[data-home-tab='shorts'] .category-nav,
body[data-home-tab='shorts'] .breaking-ticker,
body[data-home-tab='shorts'] .site-footer {
  display: none;
}

/* ---------- Category nav (한 줄 가로 스크롤) ---------- */
.category-nav {
  /* 상단 분야 띠는 제거하고 카테고리는 전체 메뉴와 홈 편집 섹션에서 제공한다. */
  display: none !important;
  background: var(--color-bg);
}

.category-nav__list {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.15rem var(--shell-pad) 0.3rem;
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.category-nav__list::-webkit-scrollbar {
  display: none;
}

.category-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
}

.category-nav__link:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

/* 선택된 카테고리: 워드마크와 같은 딥 네이비를 채워 흰 글씨(14:1)로 뒤집는다 */
.category-nav__link[aria-current] {
  background: var(--color-navy);
  border-color: var(--color-navy);
  color: #fff;
}

/* ---------- Breaking ticker (한 줄 정보 카드) ---------- */
/* 속보 티커는 어떤 뷰포트·경로에서도 노출하지 않는다. HTML 의 hidden 속성과 함께 컨테이너와 카드
   모두 높이를 0 으로 유지한다. */
.breaking-ticker,
.breaking-ticker__card {
  display: none !important;
}

.breaking-ticker__card {
  align-items: center;
  gap: 0.6rem;
  min-height: var(--tap-target);
  padding: 0.3rem 0.7rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

/* 속보 배지: 시안을 면으로 채우고 글씨는 네이비 — 시안 위 흰 글씨(2.7:1)를 피한다 */
.breaking-ticker__label {
  flex-shrink: 0;
  background: var(--color-cyan);
  color: var(--color-navy);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-pill);
}

.breaking-ticker__track-wrap {
  overflow-x: auto;
  flex: 1;
  min-width: 0;
  scrollbar-width: none;
}

.breaking-ticker__track-wrap::-webkit-scrollbar {
  display: none;
}

.breaking-ticker__track {
  display: flex;
  gap: var(--space-xl);
  width: max-content;
  animation: ticker-scroll 26s linear infinite;
}

.breaking-ticker__track li {
  flex-shrink: 0;
  font-size: 0.82rem;
  color: var(--color-text);
}

.breaking-ticker__track a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
}

.breaking-ticker__track a:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

.breaking-ticker:hover .breaking-ticker__track,
.breaking-ticker:focus-within .breaking-ticker__track {
  animation-play-state: paused;
}

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

@media (prefers-reduced-motion: reduce) {
  .breaking-ticker__track {
    animation: none;
  }
}

/* ---------- 최신 뉴스 흐름 바 (홈 「오늘의 뉴스」 맨 위) ---------- */
/* 옛 속보 티커와는 별개의 블록이다. 한 줄 카드 안에서 헤드라인이 오른쪽에서 왼쪽으로 흐르고,
   같은 목록을 한 벌 더 이어 붙여(복제) 절반만큼 밀면 이음매가 보이지 않는다.
   폭은 바깥 그리드 칸을 넘지 않게 잠가 둔다 — 좁은 화면에서 가로 스크롤이 생기지 않는다. */
.latest-headlines {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  max-width: 100%;
  min-width: 0;
  min-height: var(--tap-target);
  padding: 0.25rem 0.6rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

/* 실시간 배지는 흐르는 트랙 밖의 왼쪽에 고정한다. */
.latest-headlines__label {
  flex: 0 0 auto;
  background: #e52b32;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.375rem 0.875rem;
  border-radius: 0;
  white-space: nowrap;
}

.latest-headlines__viewport {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  scrollbar-width: none;
}

.latest-headlines__viewport::-webkit-scrollbar {
  display: none;
}

.latest-headlines__track {
  display: flex;
  gap: var(--space-lg);
  width: max-content;
  animation: latest-headlines-scroll 60s linear infinite;
}

.latest-headlines__item {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: var(--color-text);
}

.latest-headlines__link {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  white-space: nowrap;
}

.latest-headlines__link:hover {
  color: var(--color-blue);
  text-decoration: underline;
}

/* 읽으려고 멈춰 세우는 두 가지 길: 마우스를 올리거나, 키보드로 헤드라인에 들어오거나 */
.latest-headlines:hover .latest-headlines__track,
.latest-headlines:focus-within .latest-headlines__track {
  animation-play-state: paused;
}

/* 멈춤 버튼으로 직접 세운 상태 */
.latest-headlines[data-paused='true'] .latest-headlines__track {
  animation-play-state: paused;
}

.latest-headlines__toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  margin-right: -0.35rem;
  color: var(--color-navy);
  border-radius: var(--radius-pill);
}

.latest-headlines__toggle:hover {
  background: var(--color-surface-sunken);
  color: var(--color-blue);
}

/* hidden 속성이 display:inline-flex 에 밀려 되살아나지 않게 한다 */
.latest-headlines__toggle[hidden] {
  display: none;
}

@keyframes latest-headlines-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-50% - var(--space-lg) / 2));
  }
}

/* 모션을 줄이는 기기: 흐르지 않는 정적 목록 + 손가락·트랙패드로 넘겨 보는 가로 스크롤.
   app.js 가 먼저 알아채면 복제본을 DOM 에서 걷어내고 data-reduced-motion 을 세운다. */
.latest-headlines[data-reduced-motion='true'] .latest-headlines__track {
  animation: none;
}

.latest-headlines[data-reduced-motion='true'] .latest-headlines__viewport {
  overflow-x: auto;
}

@media (prefers-reduced-motion: reduce) {
  .latest-headlines__track {
    animation: none;
  }

  .latest-headlines__viewport {
    overflow-x: auto;
  }

  .latest-headlines__item--clone {
    display: none;
  }
}

/* ---------- Article card ---------- */
.article-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.article-card:hover {
  border-color: var(--color-navy);
  box-shadow: 0 6px 18px rgba(6, 42, 92, 0.12);
}

.article-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-soft) 100%);
  overflow: hidden;
}

.article-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(6, 42, 92, 0.75);
  color: #fff;
  font-size: 0.6rem;
  padding: 0.15rem 0.4rem;
}

.article-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem 0.7rem;
  flex: 1;
}

.article-card__category {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-blue);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.article-card__title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--color-text);
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card--lead .article-card__title {
  font-size: 1.2rem;
  -webkit-line-clamp: 4;
}

.article-card__summary {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card--lead .article-card__summary {
  -webkit-line-clamp: 3;
}

/* hero 변형: full-bleed 이미지 위에 그라디언트 + 흰 제목 오버레이 (뉴스 탭의 첫 기사) */
.article-card--hero {
  position: relative;
  min-height: min(78vw, 380px);
  border: none;
  background: var(--color-navy);
  color: #fff;
}

.article-card--hero:hover {
  box-shadow: 0 10px 26px rgba(6, 42, 92, 0.28);
}

.article-card--hero .article-card__media {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.article-card--hero .article-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(3, 12, 28, 0) 30%, rgba(3, 12, 28, 0.88) 100%);
}

/* 사진 출처 표기는 제목 오버레이와 겹치지 않게 위쪽으로 올린다 */
.article-card--hero .article-card__credit {
  top: 0;
  bottom: auto;
}

.article-card--hero .article-card__body {
  position: relative;
  justify-content: flex-end;
  padding: 1rem 0.9rem 1rem;
}

.article-card--hero .article-card__category {
  color: var(--color-cyan-soft);
}

.article-card--hero .article-card__title {
  color: #fff;
  font-size: 1.35rem;
  -webkit-line-clamp: 3;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.article-card--hero .article-card__summary {
  color: rgba(255, 255, 255, 0.86);
  -webkit-line-clamp: 2;
}

.article-card--hero .article-card__meta {
  color: rgba(255, 255, 255, 0.78);
}

.article-card--hero .article-card__link {
  color: #fff;
}

.article-card__meta {
  margin-top: auto;
  padding-top: 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

.article-card__link {
  margin-left: auto;
  font-weight: 600;
  color: var(--color-navy);
}

/* 2열 카드에서는 '기사 보기' 꼬리표를 접어 밀도를 지킨다 (768px 이상에서 다시 보인다) */
.article-card--grid .article-card__link {
  display: none;
}

.article-card--row {
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
}

.article-card--row:hover {
  box-shadow: none;
  border-color: var(--color-border);
}

.article-card--row .article-card__body {
  padding: 0.55rem 0;
}

.article-card--row .article-card__title {
  font-size: 0.92rem;
  -webkit-line-clamp: 2;
}

/* feed 변형: 텍스트 + 오른쪽 둥근 썸네일 (모바일 피드 리듬) */
.article-card--feed {
  flex-direction: row;
  align-items: stretch;
  gap: var(--space-sm);
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  background: transparent;
  padding: var(--space-sm) 0;
}

.article-card--feed:hover {
  box-shadow: none;
  border-color: var(--color-border);
}

.article-card--feed .article-card__body {
  padding: 0;
  min-width: 0;
}

.article-card--feed .article-card__title {
  font-size: 0.98rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.article-card--feed .article-card__media {
  flex: 0 0 104px;
  width: 104px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  align-self: flex-start;
}

.article-card--feed .article-card__credit {
  display: none;
}

.article-card--feed .article-card__link {
  display: none;
}

/* ---------- 뉴스 쇼츠 세로 피드 (쇼츠 탭) ---------- */
/* 한 화면에 쇼츠 하나. 스크롤은 이 컨테이너 안에서만 일어나고 scroll-snap 으로 한 편씩 넘어간다. */
.shorts-feed {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #05070c;
  color: #fff;
}

.shorts-feed[hidden] {
  display: none;
}

.shorts-feed :focus-visible {
  outline: 3px solid var(--color-cyan);
  outline-offset: 2px;
}

.shorts-feed__list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.shorts-feed__list::-webkit-scrollbar {
  display: none;
}

.shorts-slide {
  position: relative;
  height: 100%;
  min-height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* 세로형 무대: 모바일에서는 화면을 꽉 채우고, 넓은 화면에서는 가운데 9:16 카드가 된다 */
.shorts-slide__frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.shorts-slide__stage {
  position: absolute;
  inset: 0;
  background: #000;
  overflow: hidden;
}

.shorts-slide__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shorts-slide__iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 상하 그라디언트: 위로는 상단바, 아래로는 제목·버튼의 가독성을 지킨다 */
.shorts-slide__shade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(4, 8, 16, 0.6) 0%,
    rgba(4, 8, 16, 0) 24%,
    rgba(4, 8, 16, 0) 44%,
    rgba(4, 8, 16, 0.88) 100%
  );
}

/* 자동재생이 막혔거나 아직 시작하지 않았을 때 사용자가 직접 누르는 중앙 재생 버튼 */
.shorts-slide__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: rgba(6, 42, 92, 0.7);
  border: 2px solid rgba(255, 255, 255, 0.78);
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.shorts-slide__play:hover {
  background: var(--color-blue);
}

/* 재생이 붙으면 포스터와 재생 버튼은 물러난다 */
.shorts-slide[data-shorts-playing] .shorts-slide__poster,
.shorts-slide[data-shorts-playing] .shorts-slide__play {
  display: none;
}

/* YouTube 플레이어가 붙은 뒤에는 자체 제목 UI가 나타난다.
   우리 제목 오버레이까지 겹치면 하단 자막이 이중으로 쌓이므로 재생 중에는 물린다.
   다만 음량·공유 버튼은 우리 것이므로 재생 중에도 계속 눌려야 한다. */
.shorts-slide[data-shorts-playing] .shorts-slide__info {
  opacity: 0;
  pointer-events: none;
}

.shorts-slide__info {
  position: absolute;
  left: 0;
  right: 4.25rem;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0 var(--shell-pad) 1rem;
  /* 텍스트가 플레이어 조작을 가로막지 않게 한다 (링크만 다시 살린다) */
  pointer-events: none;
}

.shorts-slide__info a {
  pointer-events: auto;
}

.shorts-slide__series {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-cyan-soft);
}

.shorts-slide__title {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -0.01em;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.6);
}

.shorts-slide__channel {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.82);
}

.shorts-slide__watch {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.25rem;
  margin-top: 0.15rem;
  padding: 0 0.85rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.42);
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
}

.shorts-slide__watch:hover {
  background: rgba(255, 255, 255, 0.28);
}

.shorts-slide__actions {
  position: absolute;
  right: var(--shell-pad);
  bottom: 1rem;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.shorts-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--tap-target);
  height: var(--tap-target);
  border-radius: 50%;
  background: rgba(8, 18, 34, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.34);
  color: #fff;
}

.shorts-action:hover {
  background: var(--color-blue);
}

/* 음량 조절: 우리 페이지가 가진 스피커 버튼 + 직접 만든 팝오버.
   버튼을 한 번 더 누를 때까지 열린 채로 둔다(바깥 클릭·시간으로 닫지 않는다). */
.shorts-volume {
  position: relative;
  display: flex;
}

.shorts-volume__panel {
  position: absolute;
  right: calc(var(--tap-target) + 0.5rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-pill);
  background: rgba(8, 18, 34, 0.92);
  border: 1px solid rgba(255, 255,255, 0.34);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
}

.shorts-volume__panel[hidden] {
  display: none;
}

.shorts-volume__range {
  width: 8.5rem;
  min-height: var(--tap-target);
  accent-color: var(--color-cyan-soft);
  background: transparent;
}

.shorts-volume__value {
  min-width: 2.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.86);
}

/* 채널·저작권 고지와 오늘의 편성 — 스크롤 컨테이너 밖의 얇은 띠 */
.shorts-feed__bar {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.6rem;
  padding: 0.4rem var(--shell-pad) calc(0.4rem + env(safe-area-inset-bottom, 0px));
  background: #04060a;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.64rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.68);
}

.shorts-feed__description {
  flex: 1 1 12rem;
  min-width: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.shorts-feed__edition {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  color: var(--color-cyan-soft);
  font-weight: 600;
}

.shorts-feed__edition-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-cyan);
}

.shorts-feed__channel-link {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  white-space: nowrap;
  font-weight: 700;
  color: #fff;
  text-decoration: underline;
}

.shorts-feed__empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg) var(--shell-pad);
  color: rgba(255, 255, 255, 0.75);
}

/* ---------- Main feature (리드 + 2열 카드 + 랭킹) ---------- */
.main-feature {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--feed-gap);
}

/* 주요 뉴스 카드에서는 이미지 출처·기자명·작성시각을 걷어내고 기사 링크만 남긴다. */
.main-feature .article-card__credit,
.main-feature .article-card__meta > :not(.article-card__link) {
  display: none !important;
}

.main-feature__head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.main-feature__description {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  word-break: keep-all;
}

/* 회전 배너: 카드 4장을 같은 칸(1/1)에 겹쳐 두고 활성 카드만 보인다.
   숨긴 카드는 흐름에 공간을 만들지 않고, 섹션 높이는 가장 큰 카드에 맞춰 고정된다.
   스와이프 수동 전환: 세로 팬은 브라우저 스크롤에 맡기고 가로 제스처만 스크립트가 받는다.
   전환은 좌우 슬라이드 — 드래그 중에는 transition 없이 손가락을 그대로 따라가고,
   놓으면 스크립트의 MAIN_FEATURE_SLIDE_ANIMATION_MS 와 같은 0.32s 로 스냅된다. */
.main-feature__viewport {
  position: relative;
}

.main-feature__list {
  display: grid;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
}

.main-feature__item {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
  opacity: 0;
  transition: transform 0.32s ease;
}

.main-feature__item--active,
.main-feature__item--adjacent,
.main-feature__item--leaving {
  visibility: visible;
  opacity: 1;
}

.main-feature__list--dragging .main-feature__item {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .main-feature__item,
  .main-feature__dot {
    transition: none;
  }
}

/* 점 인디케이터: 사진 하단 중앙에 겹쳐 현재 몇 번째 기사인지 보여준다.
   장식(aria-hidden)이라 포인터도 받지 않는다 — 위치는 비가시 텍스트가 따로 전한다. */
.main-feature__dots {
  position: absolute;
  right: 0;
  bottom: 0.7rem;
  left: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  pointer-events: none;
}

.main-feature__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.main-feature__dot--active {
  background: #fff;
  transform: scale(1.3);
}

/* ---------- Today flow ---------- */
.today-flow {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.85rem 0.9rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.today-flow__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem var(--feed-gap);
}

.today-flow__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-left: 3px solid var(--color-cyan);
  padding-left: 0.6rem;
  min-width: 0;
}

.today-flow__value {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

.today-flow__label {
  font-weight: 600;
  font-size: 0.82rem;
}

.today-flow__context {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  word-break: keep-all;
}

/* ---------- Section grid ---------- */
.section-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--feed-gap);
}

.section-grid__heading-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.section-grid__description {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  word-break: keep-all;
}

.section-grid__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--feed-gap);
}

.section-grid__list > li {
  min-width: 0;
}

/* 회의 확정 생활 밀착 큐레이션: 쇼츠 다음에 놓이는 빠른 진입점 */
.section-grid--practical {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--color-cyan) 28%, var(--color-border));
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-cyan) 8%, white), white 58%);
}

.section-grid--practical .section-grid__heading {
  color: var(--color-blue);
}

.section-grid--practical .section-grid__description {
  max-width: 42rem;
}

/* ---------- 피드 블록 공통 제목 (앱형 카드 피드 리듬) ---------- */
.section-grid__heading,
.original-section__heading,
.opinion-section__heading,
.today-flow__heading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  line-height: 1.3;
}

.section-grid__heading::before,
.original-section__heading::before,
.opinion-section__heading::before,
.today-flow__heading::before {
  content: '';
  flex-shrink: 0;
  width: 3px;
  height: 0.95em;
  border-radius: 2px;
  background: var(--color-cyan);
}

.today-flow__heading {
  margin-bottom: 0.65rem;
}

/* ---------- Original section ---------- */
.original-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  border-top: 1px solid var(--color-border);
}

.original-section__heading-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: var(--feed-gap);
}

.original-section__heading {
  color: var(--color-blue);
  letter-spacing: 0.02em;
}

.original-section__heading::before {
  background: var(--color-blue);
}

.original-section__description {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  word-break: keep-all;
}

.original-section__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--feed-gap);
}

.original-section__list > li {
  min-width: 0;
}

.original-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}

.original-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--color-cyan) 0%, var(--color-navy) 100%);
}

.original-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.original-card__badge {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: var(--color-blue);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
}

.original-card__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  background: rgba(6, 42, 92, 0.75);
  color: #fff;
  font-size: 0.6rem;
  padding: 0.15rem 0.4rem;
}

.original-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.6rem 0.7rem 0.7rem;
}

.original-card__title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.original-card__teaser {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- Opinion section ---------- */
.opinion-section {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  border-top: 1px solid var(--color-border);
}

.opinion-section__heading-row {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: var(--feed-gap);
}

.opinion-section__description {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  word-break: keep-all;
}

.opinion-section__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--feed-gap);
}

.opinion-card {
  display: flex;
  gap: var(--space-sm);
  padding: 0.75rem 0.85rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}

.opinion-card__avatar {
  flex-shrink: 0;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
}

.opinion-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.opinion-card__title {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

.opinion-card__teaser {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  word-break: keep-all;
}

.opinion-card__byline {
  font-size: 0.75rem;
  color: var(--color-blue);
  font-weight: 600;
}

/* ---------- Newsletter CTA ---------- */
.newsletter-cta {
  background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-blue) 100%);
  color: #fff;
  padding: var(--space-lg) var(--space-md);
  border-radius: var(--radius-card);
}

.newsletter-cta__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.newsletter-cta__copy h2 {
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
}

.newsletter-cta__copy p {
  font-size: 0.82rem;
  opacity: 0.92;
  word-break: keep-all;
}

.newsletter-cta__form {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.newsletter-cta__form input {
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
  border: 1px solid transparent;
  width: 100%;
}

/* 배경이 네이비→블루 그라데이션이라 버튼은 시안으로 채우고 글씨는 네이비로 (5.2:1) */
.newsletter-cta__form button {
  background: var(--color-cyan);
  color: var(--color-navy);
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  border-radius: 4px;
  width: 100%;
}

.newsletter-cta__form button:hover {
  background: var(--color-cyan-soft);
}

.newsletter-cta__status {
  min-height: 1.2em;
  font-size: 0.85rem;
  font-weight: 600;
}

.newsletter-cta__status--error {
  color: #fff3cd;
}

.newsletter-cta__status--success {
  color: #e9fbe9;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy);
  color: var(--color-on-navy);
}

.site-footer__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md) var(--space-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}

.site-footer__brand {
  /* grid item: allow the logo panel to shrink below the lockup's intrinsic 560px width */
  min-width: 0;
}

/* 헤더와 같은 흰 로고 패널 — 불투명 PNG 락업을 네이비 푸터 위에 그대로 올린다 */
.site-footer__logo-panel {
  display: block;
  width: clamp(75px, 23vw, 100px);
  padding: 0.6rem 0.65rem;
  background: var(--color-surface);
  border-radius: var(--radius-card);
  box-shadow: 0 8px 22px rgba(4, 16, 38, 0.4);
}

.site-footer__logo {
  width: 100%;
  height: auto;
}

.site-footer__tagline {
  color: var(--color-cyan);
  font-size: 0.85rem;
  margin-top: 0.7rem;
}

.site-footer__nav h3,
.site-footer__notice h3 {
  color: #fff;
  font-size: 0.85rem;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  font-size: 0.85rem;
}

.site-footer__nav a:hover {
  color: var(--color-cyan);
}

.site-footer__notice p {
  font-size: 0.78rem;
  line-height: 1.6;
  margin-bottom: 0.5rem;
  color: var(--color-on-navy);
}

.site-footer__photo-credit {
  color: var(--color-on-navy-muted) !important;
}

.site-footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  font-size: 0.75rem;
}

/* ---------- Overlays (search / mobile menu) ---------- */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
}

.overlay[hidden] {
  display: none;
}

.overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 42, 92, 0.55);
  border: none;
}

.overlay__panel {
  position: relative;
  z-index: 1;
  background: var(--color-bg);
  width: min(420px, 100%);
  height: 100%;
  padding: var(--space-lg) var(--space-md);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  box-shadow: 8px 0 24px rgba(0, 0, 0, 0.25);
}

/* 전체 메뉴 서랍은 오른쪽 메뉴 버튼과 같은 쪽에서 연다.
   검색 오버레이는 기존처럼 왼쪽에 유지한다. */
#mobile-menu .overlay__panel.mobile-menu {
  margin-left: auto;
  box-shadow: -8px 0 24px rgba(0, 0, 0, 0.25);
}

.overlay__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.overlay__header h2 {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-navy);
}

.overlay__close {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-target);
  min-height: var(--tap-target);
  font-size: 1.2rem;
  color: var(--color-navy);
}

.search-overlay__input {
  width: 100%;
  min-height: var(--tap-target);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: #fff;
}

.search-overlay__hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.search-overlay__results ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.search-overlay__results a {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.6rem 0.7rem;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.search-overlay__results a:hover {
  border-color: var(--color-navy);
}

.search-overlay__result-category {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-blue);
}

/* 서랍 맨 위 검색: 제목·닫기 줄 바로 아래, 카테고리 목록 위에서 한 칸 띄어 구분한다 */
.mobile-menu__search {
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
}

.mobile-menu__categories {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-md);
}

.mobile-menu__categories a {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0.4rem 0.2rem;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--color-navy);
}

.mobile-menu__categories a:hover {
  color: var(--color-blue);
}

.mobile-menu__utility a {
  display: flex;
  align-items: center;
  min-height: var(--tap-target);
  padding: 0.3rem 0.2rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ---------- 홈 카드 피드 (모바일 우선 2열 혼합 피드) ---------- */
/* 「오늘의 뉴스」 탭 패널(#panel-news)이 피드 컨테이너다. 블록은 기본으로 2열 전체 폭을
   차지하고, 그 안의 목록이 2열 카드로 펼쳐지면서 대표 기사와 일반 기사가 섞인다. */
.home-feed {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: var(--feed-gap);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--feed-gap) var(--shell-pad) var(--space-lg);
}

.home-feed[hidden] {
  display: none;
}

.home-feed > * {
  grid-column: 1 / -1;
  min-width: 0;
}

/* 피드 안에서는 블록이 스스로 바깥 여백·구분선을 갖지 않는다 */
.home-feed > .original-section,
.home-feed > .opinion-section {
  max-width: none;
  padding: 0;
  border-top: none;
}

/* ---------- Breakpoints ---------- */
/* 768px: 카드 폭과 열 수가 자연스럽게 넓어진다 */
@media (min-width: 768px) {
  .home-feed {
    gap: 0.875rem;
    padding: 0.875rem var(--space-md) var(--space-xl);
  }

  .brand-header__utility {
    padding: 0 var(--space-md);
  }

  .brand-header__masthead {
    padding: 0 var(--space-md) 0.55rem;
    /* 넓은 화면에서는 2탭 칸이 남는 폭을 가져가 가운데 정렬된다 */
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.7rem;
  }

  .home-tab {
    font-size: 1rem;
    padding: 0 0.9rem;
  }

  .article-card--hero {
    min-height: 360px;
  }

  .article-card--hero .article-card__title {
    font-size: 1.9rem;
  }

  /* 검은 배경 가운데 세로형 플레이어 — 주변은 어두운 여백 */
  .shorts-slide__frame {
    width: auto;
    height: 100%;
    aspect-ratio: 9 / 16;
    max-width: 480px;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  }

  .shorts-feed__bar {
    justify-content: center;
    font-size: 0.7rem;
  }

  .shorts-feed__description {
    flex: 0 1 auto;
    -webkit-line-clamp: 1;
  }

  .brand-header__links .brand-header__utility-link {
    display: inline-flex;
  }

  .category-nav__list {
    padding: 0.15rem var(--space-md) 0.4rem;
  }

  .breaking-ticker {
    padding: 0.3rem var(--space-md) 0;
  }

  .article-card__title {
    font-size: 1rem;
  }

  .article-card--lead .article-card__title {
    font-size: 1.5rem;
  }

  .article-card--grid .article-card__link {
    display: inline;
  }

  .today-flow {
    padding: var(--space-md);
  }

  .today-flow__list {
    grid-template-columns: repeat(4, 1fr);
  }

  .section-grid__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .original-section__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .opinion-section__list {
    grid-template-columns: repeat(2, 1fr);
  }

  .newsletter-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .newsletter-cta__copy {
    max-width: 55%;
  }

  .newsletter-cta__form {
    flex-direction: row;
    flex: 1;
    max-width: 420px;
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr;
  }

  .site-footer__logo {
    max-width: 290px;
  }
}

/* 1024px: 중앙 정렬된 최대 폭 컨테이너 */
@media (min-width: 1024px) {
  .home-feed {
    gap: 1rem;
    padding: 1rem var(--space-md) var(--space-xl);
  }

  .section-grid__list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .original-section__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .opinion-section__list {
    grid-template-columns: repeat(3, 1fr);
  }

  .site-footer__inner {
    grid-template-columns: 1fr 1fr 1.4fr;
  }

  .site-footer__logo {
    max-width: 320px;
  }
}

/* 1440px: comfortable max-width breathing room */
@media (min-width: 1440px) {
  :root {
    --space-xl: 3.5rem;
  }
}

/* ---------- Category section page ---------- */
.category-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-md) var(--shell-pad) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.category-page__header {
  padding: 0.9rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.category-page__kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--color-blue);
}

.category-page__title {
  font-family: var(--font-serif);
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--color-navy);
}

.category-page__description {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  max-width: 46rem;
}

.category-page__count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-navy-soft);
}

.category-page__articles {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.category-page__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.category-page__empty {
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-card);
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* 카테고리 페이지 안에서는 기획·오피니언 섹션의 바깥 여백을 없애 흐름을 맞춘다 */
.category-page .original-section,
.category-page .opinion-section {
  max-width: none;
  padding: var(--space-lg) 0 0;
}

.category-page__more {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

.category-page__more-heading {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: var(--space-md);
}

.category-page__more-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.category-page__nav {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

.category-page__nav-heading {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}

.category-page__nav-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.category-page__nav-list a {
  display: inline-block;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  background: var(--color-surface);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-navy);
}

.category-page__nav-list a:hover {
  border-color: var(--color-blue);
  color: var(--color-blue);
}

.article-page__category:hover {
  text-decoration: underline;
}

@media (min-width: 768px) {
  .category-page__list,
  .category-page__more-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .category-page__list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- Article detail page ----------
   신문 기사창 스타일: 흰 배경 위 평평한 1200px 컨테이너, 전폭 헤더,
   데스크톱에서 본문(가변) + 관련 기사 사이드바(300px) 2열. 참고 기사창의
   보편 수치(제목 40px, 본문 18px/1.72, 사진 600px)를 NU 토큰으로 구현. */
.article-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.article-page__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.article-page__category {
  color: var(--color-blue);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}

.article-page__title {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-text);
  font-size: 1.65rem;
  line-height: 1.4;
  letter-spacing: -0.5px;
  word-break: keep-all;
}

/* 부제·리드는 본문 시작 전 핵심 요약 — 굵은 본문색으로 밀도 있게. */
.article-page__lead {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text);
  word-break: keep-all;
}

.article-page__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.article-page__meta a {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: underline;
}

.article-page__layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.article-page__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.article-page__sidebar {
  min-width: 0;
}

/* 본문 사진: 기사 열 안에서 600px 중앙 정렬, 원본 비율 그대로(crop·둥근 모서리 없음). */
.article-page__media {
  margin: 0;
}

.article-page__media img {
  width: auto;
  max-width: min(600px, 100%);
  height: auto;
  margin: 0 auto;
}

.article-page__media figcaption {
  max-width: min(600px, 100%);
  margin: 12px auto 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

.article-page__body {
  font-size: 18px;
  line-height: 1.72;
  letter-spacing: -0.5px;
  color: var(--color-text);
  overflow-wrap: break-word;
}

.article-page__body p {
  margin: 0 0 27px;
}

.article-page__body p:last-child {
  margin-bottom: 0;
}

.article-page__citation {
  padding: var(--space-md);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.article-page__reporter-contact {
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.article-page__reporter-contact a {
  color: var(--color-navy);
  font-weight: 600;
  text-decoration: underline;
}

.article-page__related h2 {
  font-family: var(--font-serif);
  font-size: 1.2rem;
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--color-navy);
  margin-bottom: var(--space-md);
}

/* 사이드바형 목록: 어디서든 한 열로 쌓인다(모바일에서는 본문 뒤 일반 섹션). */
.article-page__related-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

/* 관련 기사 카드에서는 독서 흐름을 방해하는 사진 출처와 기자 이름을 표시하지 않는다. */
.article-page__related .article-card__credit,
.article-page__related .article-card__source,
.article-page__related .article-card__source + [aria-hidden='true'] {
  display: none !important;
}

/* 데스크톱: 참고 기사창처럼 넓은 여백의 2열 — 본문 가변폭 + 사이드바 300px, 간격 56px. */
@media (min-width: 1024px) {
  .article-page {
    padding: var(--space-xl) var(--space-lg);
  }

  .article-page__title {
    font-size: 40px;
    line-height: 55px;
    letter-spacing: -1px;
    /* 제목은 우측 여백을 둔 넓은 2줄 영역 */
    padding-right: 6rem;
  }

  .article-page__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 56px;
    align-items: start;
  }
}

.article-page__home-link,
.not-found__home-link,
.reporter-profile__home-link {
  align-self: flex-start;
  font-weight: 600;
  color: var(--color-navy);
  text-decoration: underline;
}

/* ---------- Reporter profile page ---------- */
.reporter-profile {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.reporter-profile__avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.reporter-profile__role {
  color: var(--color-text-muted);
}

.reporter-profile__facts {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
}

.reporter-profile__facts div {
  display: flex;
  gap: var(--space-sm);
}

.reporter-profile__facts dt {
  min-width: 5.5rem;
  color: var(--color-text-muted);
}

.reporter-profile__facts dd {
  margin: 0;
  font-weight: 600;
}

.reporter-profile__facts a {
  color: var(--color-navy);
  text-decoration: underline;
}

/* ---------- 404 page ---------- */
.not-found {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.not-found__code {
  font-family: var(--font-serif);
  font-size: 3rem;
  font-weight: 900;
  color: var(--color-blue);
}

/* ---------- No-JS notice ---------- */
noscript .noscript-banner {
  display: block;
  background: var(--color-navy);
  color: #fff;
  text-align: center;
  padding: var(--space-md);
  font-size: 0.9rem;
}

/* ---------- 데스크 기사 (앱에서 승인된 기사) ---------- */
.article-page__subtitle {
  margin: 0 0 var(--space-sm);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-text);
  word-break: keep-all;
}

.article-page__dateline {
  font-weight: 700;
  color: var(--color-navy);
}

.article-page__tags {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  margin-left: 0.5rem;
  color: var(--color-text-muted);
}

.article-loading {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  color: var(--color-text-muted);
}

.article-card--desk .article-card__source {
  color: var(--color-blue);
  font-weight: 600;
}

/* 푸터 하단 — 기자용 데스크 앱으로 가는 작은 링크 */
.site-footer__desk-link {
  font-size: 0.8em;
  color: inherit;
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__desk-link:hover,
.site-footer__desk-link:focus-visible {
  opacity: 1;
}

/* ---------- 2026-09 SmartBiz형 홈 편집면 ---------- */
/* 카드형 앱 화면과 달리 기사와 구분선이 중심인 신문형 편집면. 이미지 모서리는 전부 직각이다. */
.article-card,
.article-card__media,
.original-card__media,
.article-card--feed .article-card__media {
  border-radius: 0;
}

.original-card__media {
  border-radius: 0;
}

.home-category-directory {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--shell-pad) 2.5rem;
}

/* 카테고리별 주요 뉴스 카드에서는 이미지 출처·기자명과 그 뒤 구분점을 걷어내고 게시 시각은 남긴다. */
.home-category-directory .article-card__credit,
.home-category-directory .article-card__source,
.home-category-directory .article-card__source + [aria-hidden='true'] {
  display: none !important;
}

.home-category-section {
  min-width: 0;
  padding-top: 1rem;
  border-top: 3px solid var(--color-navy);
}

.home-category-section__heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.9rem;
}

.home-category-section__heading {
  font-family: var(--font-serif);
  font-size: 1.35rem;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.home-category-section__heading a:hover,
.home-category-section__more:hover {
  color: var(--color-blue);
}

.home-category-section__more {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
}

.home-category-section__feature .article-card {
  border: 0;
  background: transparent;
}

.home-category-section__feature .article-card:hover {
  box-shadow: none;
}

.home-category-section__feature .article-card__body {
  padding: 0.65rem 0 0;
}

.home-category-section__feature .article-card__title {
  font-family: var(--font-serif);
  font-size: 1.05rem;
}

.home-category-section__feature .article-card__summary,
.home-category-section__feature .article-card__link,
.home-category-section__headlines .article-card__category,
.home-category-section__headlines .article-card__link {
  display: none;
}

.home-category-section__headlines {
  border-top: 1px solid var(--color-border-strong);
}

.home-category-section__headlines .article-card__body {
  padding: 0.7rem 0;
}

.home-category-section__headlines .article-card__title {
  font-size: 0.92rem;
  line-height: 1.45;
}

.home-category-section__empty {
  min-height: 7rem;
  color: var(--color-text-muted);
  font-size: 0.85rem;
}

@media (max-width: 767px) {
  .category-nav {
    display: none;
  }

  .home-feed {
    display: block;
  }

  .main-feature__list {
    grid-template-columns: 1fr;
  }

  .home-category-directory {
    display: block;
  }

  .home-category-section {
    margin-top: 1.6rem;
  }

  .home-category-section__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0.8rem;
  }

  .home-category-section__feature .article-card__summary,
  .home-category-section__feature .article-card__meta,
  .home-category-section__feature .article-card__category {
    display: none;
  }

  .home-category-section__headlines {
    border-top: 0;
  }
}

@media (min-width: 768px) {
  .category-nav__list {
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }

  .category-nav__link {
    min-height: 2.9rem;
    padding: 0 0.9rem;
    border: 0;
    border-radius: 0;
    color: #fff;
    font-size: 0.82rem;
  }

  .category-nav__link:hover,
  .category-nav__link[aria-current] {
    background: #fff;
    color: var(--color-navy-deep);
  }
}

@media (min-width: 1024px) {
  body:not([data-home-tab='shorts']) {
    background: #fff;
  }

  .home-feed {
    display: block;
    max-width: none;
    padding: 0;
  }

  .latest-headlines {
    max-width: var(--max-width);
    margin: 0.9rem auto 0;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  /* 회전 배너 하나가 섹션 전체 폭을 쓴다. 카드는 모든 뷰포트에서 같은
     오버레이형(사진 위 그라디언트 + 제목) hero — 높이만 배너 비율로 키운다. */
  .main-feature {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 1.5rem var(--shell-pad) 2rem;
    border-bottom: 1px solid var(--color-border-strong);
  }

  .main-feature .article-card--hero {
    min-height: 440px;
  }

  .main-feature .article-card--hero .article-card__title {
    font-size: clamp(1.9rem, 2.3vw, 2.5rem);
    line-height: 1.25;
  }

  .home-category-directory {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.6rem 1.8rem;
    padding-top: 2.5rem;
  }

  .newsletter-cta {
    margin-top: 0;
  }
}

/* ---------- Dashboard-managed homepage popup ---------- */
.homepage-popup[hidden] { display: none !important; }
.homepage-popup {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: rgb(4 28 63 / 78%);
}
.homepage-popup__panel {
  position: relative;
  display: grid;
  place-items: center;
  max-width: min(92vw, 960px);
  max-height: 92dvh;
}
.homepage-popup__image {
  width: auto;
  height: auto;
  max-width: min(92vw, 960px);
  max-height: 92dvh;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 18px 60px rgb(0 0 0 / 38%);
}
.homepage-popup__close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 999px;
  background: rgb(4 28 63 / 88%);
  color: #fff;
  cursor: pointer;
}
.homepage-popup__close:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
body.homepage-popup-open { overflow: hidden; }