@charset "UTF-8";
/* ==========================================================================
   VLACKBOX MEDIA — 공개 페이지 스타일

   레이아웃은 restofworld.org, 컬러는 당근(Daangn) 시스템을 따랐다.
     · 흰 배경 + 뉴트럴 그레이 계층, 오렌지는 포인트로만
     · 굵고(700) 행간이 좁은(1.1) 제목, 장식 없는 산세리프
     · 글꼴은 Pretendard 한 벌, 자간은 -0.02em 로 통일한다 (아래 글자 규칙 참고)
     · 1px 헤어라인으로 구획을 나눈다. 둥근 모서리는 --radius(20px) 한 값만 쓴다
     · 이미지는 전부 16:9
     · 최상단 6px 포인트 색 띠

   글자 규칙 — 화면마다 따로 놀지 않게 여기 한 곳에서 정한다.
     · 글꼴: Pretendard (--font). 어디서도 다른 글꼴로 갈아타지 않는다.
     · 크기: 9단계 토큰(--fs-*)만 쓴다. 굵기 3종(400·600·700), 행간 4종, 자간 -0.02em.
       실제 값과 어느 칸이 어느 단계인지는 파일 끝 「디자인 시스템」 구간에 있다.
       새 칸을 만들 때 px 를 새로 적지 말고 가장 가까운 단계를 고른다.
       라벨을 넓게 벌리던 옛 방식(+0.03 ~ +0.1em)은 한글에서 읽기 나빠 걷어냈다.
     · 회색: --muted(#555) 가 기본, --muted-2(#70747d) 가 가장 옅다.
       --muted-2 도 흰 바탕에서 4.68:1 이라 본문 크기로 읽힌다.
       그보다 옅은 --disabled 는 못 누르는 자리에만 쓴다.

   포인트 색을 바꾸려면 아래 --accent 한 줄만 고치면 된다.

   당근 원칙: 중요한 정보 = Dark Neutral, 행동해야 하는 요소 = Orange.
   제목·본문에는 오렌지를 쓰지 않는다. 흰 바탕의 작은 오렌지 글자는
   대비가 2.79:1 뿐이라 읽기 어렵다.
   ========================================================================== */

/* 당근(Daangn) 컬러 시스템
   화이트 + 뉴트럴 그레이 위에 오렌지를 포인트로만 얹는다.
   제목·본문은 브랜드 색을 쓰지 않고 Dark Neutral 로 간다.
   오렌지는 브랜드 띠 · 활성 상태 · 버튼 · 링크 반응에만 쓴다. */
:root {
  --accent: #ff6f0f;
  --accent-ink: #e05c00;
  /* 주황을 흰 바탕 쪽으로 끝까지 묽힌 두 값. 필자 소개 칸의 바탕과 테두리에만
     쓴다 — 글은 그 위에서 진한 회색 그대로라 대비가 죽지 않는다. */
  --accent-soft: #fff4ec;
  --accent-line: #ffd8bd;

  /* 주황 동그라미 체크. 본문 안에서 항목을 꼽아 세는 자리라면 어디서든
     이 그림 하나를 쓴다 — 한 글에 두 가지 체크가 생기지 않게 여기 모았다. */
  --check-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff6f0f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8.2 12.2 2.6 2.6 5-5.6'/%3E%3C/svg%3E");

  --ink: #191919;
  --ink-2: #333333;
  --muted: #555555;
  /* 가장 옅은 회색. 흰 바탕에서 4.68:1 — 12~14px 로도 읽히는 선까지만 내린다. */
  --muted-2: #70747d;
  --disabled: #c7c7c7;

  --line: #e0e0e0;
  --line-soft: #f0f0f0;

  --bg: #ffffff;
  --bg-soft: #f5f5f5;
  --bg-tertiary: #fafafa;
  --red: #d0021b;

  --wrap: 1240px;
  --gap: 25px;

  /*
   * 화면 폭을 그대로 쓰는 칸의 좌우 기준.
   *
   * 상단 헤더(.header-top-inner)는 본문 폭이 아니라 화면 폭을 쓴다 — 로고를
   * 왼쪽 끝에 붙이려는 짜임이다. 홈 맨 위 여는 자리도 그 헤더와 같은 선에서
   * 시작해야 하므로 두 규칙이 이 한 값을 함께 본다. 따로 적어 두면 한쪽만
   * 고쳐져 두 줄의 왼쪽 끝이 소리 없이 어긋난다.
   *
   * 좁은 화면에서는 아래 구간에서 이 한 줄만 24 로 내린다 — 그러면 헤더와
   * 여는 자리가 함께 따라온다.
   */
  --edge: 44px;

  /*
   * 기사 상세만 쓰는 본문 폭. 옆 칸(300)과 사이(56)를 빼고 나면 글 칸이
   * --wrap 에서는 836 뿐이라 큰 화면에서 오른쪽에 빈 자리가 길게 남았다.
   * 여기서는 글 칸이 996 이 된다.
   *
   * 헤더처럼 화면 끝까지 벌리지 않는 까닭은, 글줄이 그보다 길어지면 줄을
   * 바꿀 때 다음 줄 첫 글자를 찾기 어려워지기 때문이다. 읽는 칸에는 상한을 둔다.
   */
  --wrap-article: 1400px;

  /*
   * Pretendard 는 layouts/public.php 에서 CDN 으로 받아 온다(static, v1.3.9).
   * 불러오는 파일과 이름을 맞춰 "Pretendard" 를 맨 앞에 둔다. 예전에는
   * "Pretendard Variable" 을 앞에 세웠지만 그 파일은 받아 오지 않아서
   * 실제로는 한 번도 쓰이지 않았다. 굵기는 400·600·700 세 벌만 쓴다.
   *
   * 뒤쪽 OS 기본 글꼴들은 CDN 이 막혔을 때만 쓰인다. 그 자리에서는 따옴표가
   * 본문과 다른 글씨로 보일 수 있는데, 곧은 따옴표(")는 어느 글꼴에나
   * 들어 있어 굽은 따옴표보다 그 차이가 훨씬 덜 드러난다.
   */
  --font: "Pretendard", -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Malgun Gothic", "맑은 고딕", Arial, sans-serif;
}

* { box-sizing: border-box; }

/* 글꼴은 문서 뿌리에서 잡는다 — body 에만 걸면 그 바깥은 OS 기본 글꼴로 남는다. */
html {
  -webkit-text-size-adjust: 100%;
  font-family: var(--font);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: var(--ink);
  background: var(--bg);
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  /*
   * 커닝을 켠다. Pretendard 는 따옴표·마침표·괄호 같은 좁은 기호가 옆 글자와
   * 만날 때 얼마나 붙일지를 글꼴 안에 담고 있는데, 브라우저는 크기가 작을
   * 때 이 표를 건너뛰기도 한다. 켜 두면 "한국 처럼 여는 따옴표 뒤가 뜨지
   * 않고 한 낱말로 붙어 읽힌다.
   *
   * 두 줄을 같이 적는 까닭: font-kerning 을 모르는 낡은 브라우저는
   * font-feature-settings 쪽을 읽고, 아는 브라우저는 뒤에 오는
   * font-kerning 이 이긴다. 둘이 같은 것을 가리키므로 결과는 하나다.
   */
  font-feature-settings: "kern" 1;
  font-kerning: normal;
}

/* 단추·입력칸은 그냥 두면 운영체제 기본 글꼴로 빠진다 — 본문과 같은 글꼴로 묶는다. */
button, input, select, textarea { font-family: inherit; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

/*
 * 상단 헤더와 같은 좌우 기준으로 벌리는 칸.
 *
 * 헤더는 max-width 없이 화면 폭에 --edge 만 남기므로, 여기서도 상한을 풀고
 * 같은 --edge 를 쓴다. 홈 맨 위 여는 자리가 이 값을 쓴다 — 가운데 좁게 서
 * 있던 세 칸이 헤더의 로고·메뉴와 같은 선에서 시작하게 된다.
 */
.wrap--edge {
  max-width: none;
  padding: 0 var(--edge);
}

/* 기사 상세 — 글 칸을 오른쪽으로 한 단 넓힌다. 값의 근거는 --wrap-article. */
.wrap--article { max-width: var(--wrap-article); }

/* ── 라벨 (카테고리 · 국가) ────────────────────────────────── */

.card-meta,
.tag-country,
.tag-category,
.tag-type,
.link-type,
.page-desc .label {
  font-size: 12px;
}

.card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
  color: var(--muted);
}

.tag-country { color: var(--ink); font-weight: 600; }
.tag-category { color: var(--muted); }
.tag-type {
  color: var(--muted);
  padding-left: 8px;
  border-left: 1px solid var(--line);
}

/* ── 헤더 ──────────────────────────────────────────────────── */

/* 선은 전부 본문 폭(.wrap 안쪽)에 맞춘다.
   화면 끝까지 뻗으면 가운데 정렬된 내용과 어긋나 보인다. */
.site-header { background: var(--bg); }

/* 본문 폭이 아니라 화면 폭 전체를 쓴다 — 로고는 왼쪽 끝, 메뉴는 화면 정중앙.
   가운데 칸의 양옆을 같은 1fr 로 잡아야 로고 길이와 무관하게 정중앙에 선다.
   오른쪽 칸은 균형을 잡기 위한 빈 자리다. */
.header-top-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 40px;
  height: 92px;
  /* 홈 여는 자리(.wrap--edge)와 같은 한 값을 본다 — :root 의 --edge 참고. */
  padding: 0 var(--edge);
  border-top: 6px solid var(--accent);
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 10px; }

/* 칸이 좁아져도 로고는 절대 눌리지 않는다 — 비율이 깨진다. */
.brand-logo { flex: none; height: 41px; width: auto; }

.header-nav { min-width: 0; }

.header-nav-inner {
  display: flex;
  justify-content: center;
  gap: 70px;
  overflow-x: auto;
  scrollbar-width: none;
}

.header-nav-inner::-webkit-scrollbar { display: none; }

.nav-link {
  flex: none;
  position: relative;
  padding: 4px 0;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}

/* 밑줄은 글자 폭에 딱 맞게 — 헤더 아래 선과 겹치지 않도록 칸 안에 그린다. */
.nav-link::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -6px;
  left: 0;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.nav-link:hover { color: var(--accent); }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.is-active { color: var(--accent); font-weight: 700; }
.nav-link.is-active::after { transform: scaleX(1); }

/* ── 본문 영역 ─────────────────────────────────────────────── */

.site-main { padding-bottom: 80px; }

.layout-two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  margin-top: 56px;
}

/*
 * 기사 상세만 머리 위를 한 단 더 비운다.
 *
 * 목록 화면은 맨 위에 분류 탭이 있어 헤더와 내용 사이가 이미 끊겨 있지만,
 * 기사는 헤더 바로 밑에서 작은 분류 줄이 시작해 메뉴에 붙어 보였다.
 * 양쪽 칸(글·인기 기사)에 함께 걸어야 둘의 윗선이 어긋나지 않는다.
 */
.layout-two-column.layout-article { margin-top: 84px; }

.column-main { min-width: 0; }

/* ── 홈 맨 위 여는 자리 ────────────────────────────────────────
   회색 바탕 위에 흰 패널이 떠야 상자가 보이므로 바탕은 목록 화면(.hk-page)과
   같은 #eeeeee 다. 폭은 홈의 .wrap 기준.
   안쪽 세 칸의 짜임은 아래 .home-trio 에 적어 뒀다.
   ────────────────────────────────────────────────────────────── */

.home-open {
  padding: 40px 0;
  background: #eeeeee;
}

/* ── 국가 캐러셀 히어로 ────────────────────────────────────────
   고른 국가가 본문 폭 왼쪽에서 넓게 펼쳐지고 앞뒤 국가는 화면 밖으로
   잘려 나가며 살짝 보인다. 가로 위치와 자동 넘김은 site.js 가 맡는다.
   배경은 그 국가의 최신 기사 사진을 쓴다.
   ────────────────────────────────────────────────────────────── */

.country-hero {
  --card-active: 952px;
  --card-idle: 464px;
  --card-gap: 24px;
  /* 여는 두 칸 아래로 내려오면서 카드 높이를 절반으로 줄였다(640 → 320). */
  --card-height: 320px;
  padding: 48px 0 24px;
  overflow: hidden;
}

/*
 * 고른 카드의 왼쪽 끝을 본문 폭에 맞추고, 나머지 카드는 화면 양옆으로 흘려 보낸다.
 * 끌어서 넘기는 동안 글자가 잡히거나 사진이 딸려 나가지 않게 한다.
 */
.country-viewport {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
  overflow: visible;
  cursor: grab;
  user-select: none;
}

.country-viewport.is-dragging { cursor: grabbing; }
.country-viewport img { -webkit-user-drag: none; }

/* 카드 위치를 목록 기준으로 재려면 목록이 기준점이어야 한다. */
.country-list { display: flex; position: relative; gap: var(--card-gap); }

.country-card {
  position: relative;
  flex: 0 0 var(--card-idle);
  height: var(--card-height);
  overflow: hidden;
  /* 아래 최신 기사 카드(.news-card__thumb)와 한 벌로 보여야 한다.
     다만 같은 20px 을 그대로 주면 이 칸이 훨씬 커서 각져 보인다 —
     카드 크기가 두어 배인 만큼 모서리도 같은 배로 키워 눈에 같게 맞춘다.
     배너가 여는 두 칸 아래로 내려가며 높이가 절반(640 → 320)이 되었으므로
     44 를 그대로 두면 카드가 통째로 둥글어 보인다. 함께 줄여 비율을 지킨다. */
  border-radius: 28px;
  background: var(--ink-2);
  transition: flex-basis 0.5s ease;
}

.country-card.is-active { flex-basis: var(--card-active); }

/* 무한 순환 때 자리를 되돌리는 순간에는 움직임을 끈다. */
.country-list.is-instant .country-card { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .country-card { transition: none; }
}

/* 링크(플랫폼이 열린 국가)와 버튼(준비중)이 같은 모양이어야 한다. */
.country-card__link {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.country-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.country-card:hover img { transform: scale(1.04); }

/* 글자가 사진 위에서도 읽히도록 아래쪽을 어둡게 */
.country-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
}

.country-card__body {
  position: absolute;
  right: 40px;
  bottom: 36px;
  left: 40px;
  z-index: 1;
  color: #fff;
  transition: left 0.5s ease, bottom 0.5s ease;
}

/* 넓어진 카드는 글자도 안쪽으로 더 들어온다 — 레퍼런스와 같은 호흡. */
.country-card.is-active .country-card__body { bottom: 44px; left: 56px; }

/*
 * 카드가 어디로 가는지 알려 주는 줄. 늘 보인다.
 * 예전에는 마우스를 올린 카드에서만 나타났는데,
 * 카드가 플랫폼으로 나간다는 것을 눌러 보기 전에 알 수 없었다.
 */
.country-card__lead {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  opacity: 0.92;
  white-space: nowrap;
}

.country-card__name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.country-card.is-active .country-card__name { font-size: 34px; }

.country-card__arrow { font-size: 20px; }

/* 배너 아래 한 줄로 놓이는 넘김 단추들 — 이전 · 점 · 다음 · 멈춤.
   빈칸 덕분에 좌우 폭이 같아져 인디케이터가 화면 정중앙에 온다. */
.hero-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-top: 32px;
}

.hero-controls__spacer { flex: none; width: 48px; }

.hero-arrow,
.hero-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink);
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.hero-arrow:hover,
.hero-toggle:hover { background: var(--bg-soft); color: var(--accent); }

.hero-arrow svg { width: 11px; height: 18px; }
.hero-toggle svg { width: 13px; height: 15px; fill: currentColor; }

/* 멈춤/재생은 같은 자리에서 아이콘만 바뀐다. */
.hero-toggle__play { display: none; }
.hero-toggle.is-paused .hero-toggle__pause { display: none; }
.hero-toggle.is-paused .hero-toggle__play { display: block; }

.hero-dots {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 12px;
}

.hero-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ccc;
  cursor: pointer;
  transition: width 0.3s ease, background 0.3s ease;
}

.hero-dot:hover { background: var(--muted-2); }

/* 지금 보는 배너만 길게 늘어난다 — 몇 번째인지 한눈에 보이도록. */
.hero-dot.is-active { width: 36px; background: var(--accent); }

/* 아직 열리지 않은 국가 플랫폼을 눌렀을 때 뜨는 안내 */
.site-notice {
  position: fixed;
  bottom: 28px;
  left: 50%;
  z-index: 100;
  padding: 13px 20px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}

.site-notice.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* ── 홈 배치 (칼럼 매거진) ──────────────────────────────────
   일간 뉴스 편성이 아니다. 최신 기사 · 인기 기사를 앞에 두고(.news-section),
   그 아래로 칼럼 종류별 묶음(.spotlight)을 쌓는다.
   ────────────────────────────────────────────────────────────── */

/* ── 칼럼니스트 ────────────────────────────────────────────────
   얼굴이 주인공인 묶음이다. 사진을 88 → 120 으로 세우고 칸마다 카드를 깔아
   섹션 전체를 한 단 키웠다. 손을 올리면 카드가 살짝 떠오르고 얼굴 둘레로
   주황 테가 번진다 — 글자 색만 바뀌던 것보다 사람이 걸린 자리임이 드러난다.
   여섯 칸이므로 한 칸은 (1192 - 25×5) / 6 = 177 이고, 카드 안쪽 여백 12 를
   빼면 153 이 남아 사진 120 + 테 11 이 넉넉히 들어앉는다.
   ────────────────────────────────────────────────────────────── */

/* 카드를 깔면서 칸 사이를 좁혔다 — 카드 여백이 틈 노릇을 겹쳐서 한다. */
.columnist-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.columnist a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 28px 12px 26px;
  border-radius: 20px;
  text-align: center;
  transition: transform 0.35s ease, background-color 0.35s ease, box-shadow 0.35s ease;
}

.columnist a:hover {
  transform: translateY(-6px);
  background: var(--bg-tertiary);
  box-shadow: 0 14px 26px rgba(0, 0, 0, 0.08);
}

/*
 * 흰 테 3px 위에 속이 빈 주황 테를 겹쳐 두고, 손을 올릴 때 그 테만 번지게 한다.
 * 테를 box-shadow 로 그리면 원의 지름이 변하지 않아 옆 칸이 밀리지 않는다.
 */
.columnist-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 3px rgba(255, 111, 15, 0);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.columnist a:hover .columnist-photo {
  transform: scale(1.04);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 8px rgba(255, 111, 15, 0.18);
}

/* 사진이 없는 필자는 이름 첫 글자로 대신한다. */
.columnist-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  font-weight: 700;
  color: var(--muted-2);
}

.columnist-name { font-size: 17px; font-weight: 600; }
.columnist a:hover .columnist-name { color: var(--accent); }
.columnist-position { font-size: 13px; color: var(--muted-2); }

/* 국가별 섹션.
   앞 섹션과의 사이는 margin(54) + padding(44) = 98px 로 벌린다.
   섹션 안쪽 여백은 padding 쪽이므로 건드리지 않는다. */
.spotlight { padding-top: 44px; margin-top: 54px; border-top: 1px solid var(--line); }

/*
 * 얼굴과 카드가 커진 만큼 앞 묶음과의 사이도 벌린다.
 * 다른 .spotlight 는 44 + 54 = 98 이고 여기만 56 + 66 = 122 다.
 *
 * 반드시 위 .spotlight 뒤에 서야 한다 — 클래스 하나짜리로 힘이 같아
 * 앞에 두면 뒤따르는 .spotlight 에 덮여 44 + 54 로 되돌아간다.
 */
.spotlight--columnist { padding-top: 56px; margin-top: 66px; }

/*
 * 첫 화면 위쪽으로 올라온 묶음 — 홈의 칼럼니스트가 쓴다.
 *
 * .spotlight 의 1px 윗선은 앞 묶음과 이 묶음을 가르는 선이다. 그런데 이
 * 자리에서는 앞이 회색 띠(.home-open)라 띠의 아랫선과 겹쳐 두 줄로 보인다.
 * 선을 걷고 안쪽 여백도 지운 뒤, 사이는 margin 한 값으로만 잡는다.
 *
 * 반드시 위 두 .spotlight 규칙 뒤에 서야 한다 — 셋 다 클래스 하나짜리라
 * 힘이 같고, 앞에 두면 뒤따르는 쪽에 덮인다.
 */
.spotlight--top { padding-top: 0; margin-top: 62px; border-top: 0; }

.spotlight-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 26px;
}

/* 묶음 제목은 위쪽 "최신 기사 · 인기 기사" 와 같은 크기·굵기로 간다(32/700).
   그쪽은 가운데, 여기는 옆에 "더보기" 가 붙어 왼쪽 — 자리만 다르고 글자는 같다. */
.spotlight-title { font-size: 32px; letter-spacing: -0.02em; }

.spotlight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
}

/* 카드 사진 모서리는 홈의 기사 카드(20)보다 한 단 작게 — 카드 자체가 작아서다. */
.card-thumb,
.row-thumb {
  display: block;
  overflow: hidden;
  border-radius: 16px;
  background: var(--bg-soft);
}

.card-thumb img,
.row-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  transition: opacity 0.2s;
}

.card-thumb:hover img,
.row-thumb:hover img { opacity: 0.82; }

.card-date {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted-2);
}

/* ── 최신 기사 · 인기 기사 ─────────────────────────────────────
   배너 바로 아래에 오는 두 묶음. 최신 기사는 네 편을 두 줄로 놓고
   오른쪽에 추천 두 편을 세우며, 인기 기사는 옆으로 밀어 본다.
   ────────────────────────────────────────────────────────────── */

/* 위쪽 padding 이 앞 섹션과의 사이 간격 노릇을 한다 — 여기를 10px 씩 벌린다. */
.news-section { padding: 82px 0 76px; }
.news-section--tinted { padding: 70px 0 65px; background: var(--bg-tertiary); }

.news-heading {
  padding-bottom: 50px;
  font-size: 32px;
  text-align: center;
}

/*
 * 넘김 단추는 카드 전체(사진 + 글상자) 높이의 한가운데에서 줄 바깥으로 선다.
 * 줄 자체에 위 8 · 아래 14 여백이 있어 줄 한가운데는 카드 한가운데보다 3px 아래다.
 * 그 3px 만 끌어올리면 카드가 커지든 작아지든 언제나 정중앙에 머문다.
 */
.news-rail-wrap { position: relative; }

.news-rail-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  margin-top: -3px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.23);
  color: var(--ink);
  cursor: pointer;
  transform: translateY(-50%);
  transition: color 0.2s ease;
}

.news-rail-arrow--prev { left: -27px; }
.news-rail-arrow--next { right: -27px; }

.news-rail-arrow:hover { color: var(--accent); }
.news-rail-arrow svg { width: 10px; height: 16px; }

/* 단추가 화면 밖으로 밀려날 만큼 좁아지면 줄 안쪽으로 들인다. */
@media (max-width: 1310px) {
  .news-rail-arrow--prev { left: -6px; }
  .news-rail-arrow--next { right: -6px; }
}

/*
 * 왼쪽 사진 묶음과 오른쪽 추천 칸의 키를 맞춘다(stretch).
 * 한때는 start 로 두어 오른쪽을 내용만큼만 세웠는데, 그러면 추천 상자의
 * 아랫선이 왼쪽 사진 아랫선과 어긋나고 가운데 1px 가름선도 중간에서 끊겼다.
 */
.news-columns { display: flex; align-items: stretch; }

.news-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px 35px;
}

.news-card a { display: block; }

.news-card__thumb {
  display: block;
  overflow: hidden;
  border-radius: 20px;
  background: var(--bg-soft);
}

.news-card__thumb img,
.news-tile__thumb img {
  width: 100%;
  aspect-ratio: 100 / 62.37;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.news-card a:hover .news-card__thumb img,
.news-tile a:hover .news-tile__thumb img { transform: scale(1.05); }

.news-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: 25px;
  font-size: 20px;
  font-weight: 600;
  line-height: 31px;
  letter-spacing: -0.03em;
}

.news-card a:hover .news-card__title { color: var(--accent); }

/*
 * 오른쪽 추천 칸 — 관리자가 주요기사로 지정한 글이 온다.
 *
 * 상자들이 왼쪽 사진 묶음의 키를 균등하게 나눠 갖는다. 예전에는 상자마다
 * 최소 키(146)를 주고 사이만 23 으로 띄웠는데, 왼쪽 키는 제목 줄 수에 따라
 * 변하므로 마지막 상자 아랫선이 왼쪽 사진 아랫선과 늘 어긋났다.
 * 나눠 가지면 몇 개가 오든 아랫선이 정확히 떨어지고,
 * 왼쪽 테두리로 그은 1px 가름선도 그 키까지 곧게 내려온다.
 */
.news-picks {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 398px; /* 안쪽 칸 362 + 구분선 여백 36 */
  margin-left: 35px;
  padding-left: 35px;
  border-left: 1px solid var(--line);
}

/*
 * 본문 폭에서 왼쪽 격자는 614~676 이라 상자 셋이면 하나에
 * (614 - 32) / 3 = 194 부터가 돌아간다. 아래 값으로 짠 내용은 165 이므로
 * 글이 잘리지 않는다 — 넷까지도 145 씩 들어간다.
 * 늘어난 자리에 글이 위로 몰리지 않게 상자 가운데에 앉힌다.
 */
.news-pick {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  border-radius: 16px;
  padding: 24px 24px 24px 35px;
}

.news-pick--1 { background: #fff3ea; }
.news-pick--2 { background: var(--bg-soft); }

.news-pick__tag {
  display: block;
  padding-bottom: 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
}

.news-pick__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 21px;
  line-height: 1.3;
}

.news-pick:hover .news-pick__title { color: var(--accent); }

.news-pick__meta {
  display: block;
  margin-top: 12px;
  font-size: 14px;
  color: var(--muted);
}

/* 인기 기사 — 가로로 미는 줄. 막대는 감추고 단추로만 움직인다. */
.news-rail {
  display: flex;
  gap: 30px;
  padding: 8px 0 14px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.news-rail::-webkit-scrollbar { display: none; }

.news-tile { flex: 0 0 calc((100% - 60px) / 3); }

.news-tile a {
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 15px;
  background: var(--bg);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.06);
}

.news-tile__thumb { display: block; overflow: hidden; background: var(--bg-soft); }

.news-tile__body {
  display: block;
  min-height: 199px;
  padding: 30px 32px 40px;
}

.news-tile__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 21px;
  font-weight: 600;
  line-height: 30px;
  letter-spacing: -0.03em;
}

.news-tile a:hover .news-tile__title { color: var(--accent); }

.news-tile__summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  margin-top: 13px;
  font-size: 16px;
  line-height: 26px;
  color: var(--muted);
}

/* ── 숏폼 · 영상 ───────────────────────────────────────────────
   레퍼런스(한국일보 첫 화면의 숏폼·영상 자리)를 옮긴 짜임이다.
   글귀는 가져오지 않고 자리 · 비율 · 틈만 옮겼다.

   상자 둘이 8px 틈으로 나란히 서고, 머리글은 상자 안 왼쪽 위에 선다.
     왼쪽   숏폼 — 세로 카드 석 장 (9:16)
     오른쪽 영상 — 가로 대표 한 편 (16:9)

   본문 1192 을 반씩 가른다(592). 그러면 숏폼 카드가 폭 173 · 키 308,
   대표 영상 그림이 폭 544 · 키 306 이라 두 상자의 제목줄이 같은 선에서
   시작한다. 레퍼런스가 넓은 화면에서 66 : 34 로 가르는 것은 숏폼 카드가
   다섯 장 들어갈 때의 비율이다 — 요청대로 석 장인데 그 비율을 쓰면
   왼쪽 카드가 한참 커져(폭 240 · 키 426) 오른쪽 상자 아래가 통째로 빈다.
   레퍼런스도 좁은 화면에서는 반씩 가른다(xssm:w-[50%]).

   상자 바탕과 모서리는 블랙박스 것을 쓴다 — 흰 바탕 위 옅은 회색 상자에
   모서리 8 은 홈 주요기사 상자(.home-briefs)와 한 벌이다.
   ────────────────────────────────────────────────────────────── */

/* 바로 위가 회색 띠(인기 기사)라 그 경계가 이미 사이를 가른다 — 위쪽만 한 단 줄인다. */
.video-section { padding-top: 70px; }

.video-duo {
  display: flex;
  /* 틈 8 은 레퍼런스 값이고 홈 여는 자리(.home-trio)와도 같다. */
  gap: 8px;
  /* 같은 줄에 선 상자는 아랫선이 맞아야 한 벌로 읽힌다. */
  align-items: stretch;
}

/*
 * 폭을 flex-grow 가 아니라 flex-basis 로 못박는다. grow 로 두면 안쪽 여백
 * 때문에 반씩 갈리지 않는다 — .home-trio 에 적어 둔 것과 같은 이유다.
 * 뺄 값 8 은 위 gap 과 한 벌이라 한쪽만 고치면 어긋난다.
 */
.video-panel {
  display: flex;
  flex: 1 1 calc((100% - 8px) / 2);
  flex-direction: column;
  min-width: 0;
  padding: 24px;
  border-radius: 8px;
  background: var(--bg-soft);
}

/* ── 왼쪽 — 숏폼 세로 카드 ─────────────────────────────────── */

/* 석 장이 자리를 고르게 나눈다. 모자라게 오면 있는 만큼이 나눠 갖는다. */
.video-shorts { display: flex; gap: 12px; margin-top: 16px; }

.video-shorts > li { flex: 1 1 0; min-width: 0; }
.video-shorts > li > a { display: block; }

/* ── 오른쪽 — 대표 영상 한 편 ─────────────────────────────── */

.video-feature { margin-top: 16px; }
.video-feature > a { display: block; }

/* ── 그림 ─────────────────────────────────────────────────── */

/* 재생 표시를 그림 위에 얹으려고 자리를 만든다(position). */
.video-thumb {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
  /* 상자가 회색이라 그림 뒤는 흰색으로 둔다(.home-brief__thumb 과 같다). */
  background: #fff;
}

.video-thumb img {
  display: block;
  width: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

/* 세로 9:16 · 가로 16:9 — 둘 다 레퍼런스가 쓰는 비율이다. */
.video-thumb--short img { aspect-ratio: 9 / 16; }
.video-thumb--feature img { aspect-ratio: 16 / 9; }

.video-duo a:hover .video-thumb img { transform: scale(1.05); }

/*
 * 재생 표시 — 그림 한가운데에 반투명 검은 원과 흰 삼각형을 앉힌다.
 * 손을 올리면 원이 포인트 색으로 채워져 누를 자리임이 드러난다.
 */
.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  transform: translate(-50%, -50%);
  transition: background-color 0.3s ease;
}

.video-duo a:hover .video-play { background: var(--accent); }

/* 삼각형의 무게가 왼쪽에 쏠려 있어 3px 밀어 넣으면 원 가운데로 보인다. */
.video-play svg { width: 26px; height: 26px; margin-left: 3px; }

/* 세로 카드는 그림이 좁아(173) 원도 한 단 줄인다. */
.video-thumb--short .video-play { width: 48px; height: 48px; }
.video-thumb--short .video-play svg { width: 20px; height: 20px; margin-left: 2px; }

/* ── 글 — 레퍼런스처럼 그림 아래에 말머리와 제목이 선다 ───── */

.video-card__body { display: block; margin-top: 14px; }

.video-tag {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent-ink);
}

.video-short__title,
.video-feature__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.video-short__title { font-size: 16px; line-height: 1.5; }
.video-feature__title { font-size: 24px; line-height: 1.45; }

.video-duo a:hover .video-short__title,
.video-duo a:hover .video-feature__title { color: var(--accent); }

/* ── 섹션 ──────────────────────────────────────────────────── */

.section-block { margin-top: 52px; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: 26px;
  border-bottom: 2px solid var(--ink);
}

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

.section-more {
  font-size: 13px;
  color: var(--accent-ink);
  font-weight: 600;
}

.section-more:hover { text-decoration: underline; }

/* ── 카드 그리드 ───────────────────────────────────────────── */

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 34px var(--gap);
}

.card-thumb { position: relative; }

.card-body { margin-top: 14px; }

.card-title {
  font-size: 20px;
  line-height: 1.2;
}

.card-title a:hover { color: var(--accent); }

.card-summary {
  margin-top: 9px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}

.badge {
  position: absolute;
  top: 0;
  left: 0;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}

.badge-breaking { background: var(--red); }

/* ── 가로형 목록 ───────────────────────────────────────────── */

.row-list { display: flex; flex-direction: column; }

.row-item {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--gap);
  padding: 26px 0;
  border-bottom: 1px solid var(--line-soft);
}

.row-item:first-child { padding-top: 0; }

.row-title {
  font-size: 22px;
  line-height: 1.18;
}

.row-title a:hover { color: var(--accent); }

.row-summary {
  margin-top: 10px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

.row-meta {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted-2);
}

.row-meta a:hover { color: var(--accent); }
.dot { margin: 0 6px; }

/* ── 사이드바 ──────────────────────────────────────────────── */

.column-side { min-width: 0; }

/*
 * 넓은 화면에서는 "많이 본 기사" 가 본문을 따라 내려온다.
 *
 * align-self:start 로 칸 높이를 내용만큼만 잡고 sticky 를 건다. 그러면 붙어 다니되
 * 두 칸이 나란한 구역 안에서만 움직여서, 본문이 끝나는 자리에서 저절로 멈춘다 —
 * 푸터를 타고 넘어가지 않는다. 위 24 는 화면 꼭대기에 붙지 않게 두는 자리다.
 * 한 칸으로 접히는 좁은 화면에서는 걸지 않는다. 위아래로 놓이면 붙잡을 옆자리가 없다.
 */
@media (min-width: 1025px) {
  .column-side {
    position: sticky;
    top: 24px;
    align-self: start;
  }
}

.sidebar-block { margin-bottom: 44px; }

.sidebar-title {
  padding-bottom: 11px;
  margin-bottom: 18px;
  font-size: 18px;
  font-weight: 700;
  border-bottom: 2px solid var(--ink);
}

.rank-list { display: flex; flex-direction: column; }

.rank-item {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 12px;
  padding-bottom: 16px;
  font-size: 15px;
  line-height: 1.35;
}

.rank-item:last-child { padding-bottom: 0; }
.rank-item a:hover { color: var(--accent); }

.rank-number {
  font-size: 15px;
  font-weight: 700;
  color: var(--accent);
}

.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }

/* 낱말표 — 알약 모양으로 끝까지 굴린다. 글자가 길든 짧든 양끝이 같은 곡선이 된다. */
.chip {
  display: inline-block;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.chip:hover { border-color: var(--accent); color: var(--accent); }

/* ── 목록 페이지 머리 ──────────────────────────────────────── */

.page-head {
  padding: 44px 0 22px;
  border-bottom: 2px solid var(--ink);
}

.page-title {
  font-size: 38px;
  letter-spacing: -0.02em;
}

.page-desc {
  margin-top: 10px;
  font-size: 15px;
  color: var(--muted);
}

.breadcrumb {
  margin-bottom: 12px;
  font-size: 12px;
  color: var(--muted);
}

.breadcrumb a:hover { color: var(--accent); }

.category-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.tab {
  font-size: 14px;
  color: var(--muted);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}

.tab:hover { color: var(--ink); }
.tab.is-active { color: var(--ink); font-weight: 700; border-bottom-color: var(--accent); }

.empty-message {
  padding: 70px 0;
  text-align: center;
  color: var(--muted);
}

/* ── 기사 상세 ─────────────────────────────────────────────── */

/*
 * 글 읽는 칸의 세로 치수(제목 42/54 · 본문 18/38 · 문단 사이 24 ·
 * 사진 아래 58)는 ent.sbs.co.kr 기사 화면을 그대로 잰 값이다.
 * 제목과 본문이 같은 왼쪽 끝에서 시작하도록 가운데 정렬은 쓰지 않는다.
 *
 * 가로 폭은 잰 값(730)을 버리고 옆칸이 남긴 자리를 다 쓴다.
 * 730 으로 묶어 두면 --wrap-article 을 넓힌 뒤에도 사진과 필자 상자가
 * 847 에서 끊겨 오른쪽에 266 이 빈 채로 남았다. 이제 바깥의
 * --wrap-article(1400) 이 상한을 잡으므로 이 칸은 아무리 큰 화면에서도
 * 996 을 넘지 않는다 — 여기서 다시 숫자로 막을 필요가 없다.
 */
.article-detail {
  max-width: none;
  margin: 0;
  padding-top: 0;
  /* 자간은 글칸 전체에 한 번만 건다. 제목만 따로 조이면 제목과 본문의
     낱말 밀도가 달라 보여 한 사람이 쓴 글로 안 읽힌다. */
  letter-spacing: -0.02em;
}

/* 머리(분류 · 제목 · 작성 정보)와 본문 사이를 한 번 크게 끊는다. */
.article-head {
  padding-bottom: 23px;
  margin-bottom: 60px;
  border-bottom: 1px solid var(--line);
}

/*
 * 제목 위 분류 줄 — "베트남 정책 · 뉴스".
 *
 * 나라가 앞에 크게 서고, 분류와 종류는 서로 같은 급이라 크기·굵기를 똑같이 맞췄다.
 * 둘 사이는 세로 막대 대신 주황 점으로 끊는다 — 막대는 둘을 갈라 놓아
 * 뒤쪽이 곁다리처럼 보이게 하지만, 점은 같은 줄에 나란히 세워 준다.
 */
.article-head .card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
  margin-bottom: 12px;
  line-height: 1.4;
}

.article-head .tag-country {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-ink);
}

/*
 * 분류(베트남 법률칼럼)도 종류(칼럼)와 같은 회색으로 내린다.
 *
 * 나라 이름만 주황으로 남기고 뒤 두 낱말은 한 급 낮춘다 — 셋이 같은 주황이면
 * 어디가 머리이고 어디가 꼬리표인지 읽는 쪽에서 가려 내야 한다.
 * 값을 .tag-type 과 나란히 적어 둔 까닭은 둘이 늘 같은 회색이어야 해서다.
 */
.article-head .tag-category {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  padding-left: 0;
  border-left: 0;
}

/*
 * 글의 종류(칼럼 · 뉴스 · 인터뷰)도 같은 회색이다.
 *
 * 나라 이름만 주황으로 남는다. 셋이 같은 주황으로 서 있으면 어디를 눌러야
 * 하는지가 흐려진다. 목록 카드의 .tag-type 도 이미 회색이므로, 이제 상세
 * 화면까지 사이트 전체가 같은 규칙이 된다.
 */
.article-head .tag-type {
  font-size: 16px;
  font-weight: 500;
  color: var(--muted);
  padding-left: 0;
  border-left: 0;
}

/* 점 앞뒤 여백은 줄 간격(8)과 같게 둬야 낱말이 한쪽으로 쏠리지 않는다.
   점은 주황으로 남긴다 — 회색으로 내리면 분류와 종류가 한 낱말로 붙어 보인다. */
.article-head .tag-type::before {
  content: "·";
  margin-right: 8px;
  font-weight: 700;
  color: var(--accent);
}

/*
 * 제목의 줄바꿈 자리를 원고가 정할 수 있게 열어 둔다.
 *
 * 뷰는 제목을 esc() 로 찍으므로 <br> 을 넣을 수 없다. 대신 제목 안에 줄바꿈
 * 문자를 그대로 담아 두고 여기서 pre-line 으로 살린다. 목록·검색 카드에는
 * 이 규칙이 없어 줄바꿈이 빈칸 하나로 접히므로 카드 모양은 그대로다.
 */
.article-title {
  font-size: 42px;
  line-height: 54px;
  letter-spacing: -0.024em;
  white-space: pre-line;
}

.article-subtitle {
  margin-top: 6px;
  font-size: 20px;
  line-height: 1.6;
  color: var(--muted);
  font-weight: 400;
}

/*
 * 제목 아래 기자 줄 — 왼쪽에 둥근 사진·이름·소개, 오른쪽 끝에 날짜.
 *
 * 둘을 양끝으로 밀어 두면 이름이 길든 짧든 날짜는 늘 같은 자리에 선다.
 * 화면이 좁아 두 덩이가 한 줄에 못 들어가면 날짜가 아래로 내려간다.
 */
.article-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  /*
   * 제목과 기자 줄 사이를 한 번 크게 벌린다. 제목이 42/54 로 큰 글자라
   * 30 으로는 두 줄이 한 덩이처럼 붙어 보였다 — 큰 글자 밑에는 그만큼
   * 넓은 자리가 있어야 제목이 제목으로 끝난다.
   */
  margin-top: 44px;
}

.byline-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.byline-photo {
  width: 52px;
  height: 52px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-soft);
}

/* 사진 자리를 비워 두지 않으려고 세우는 글자 원 — 크기·모양은 사진과 같다. */
.byline-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
}

.byline-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.byline-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.byline-position { margin-left: 2px; font-weight: 500; color: var(--muted); }
.byline-bio { font-size: 14px; line-height: 1.5; color: var(--muted); }
.byline-profile:hover .byline-name { color: var(--accent); }

.byline-date {
  display: flex;
  align-items: center;
  flex: none;
  font-size: 14px;
  line-height: 20px;
  color: var(--muted);
}

/* 사진은 잘라 내지 않고 원래 비율 그대로 — 레퍼런스와 같다. */
.article-figure { margin: 0 0 58px; text-align: center; }

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  /* 홈 기사 카드와 같은 20 — 본문에서 가장 큰 사진이라 카드 값을 그대로 쓴다. */
  border-radius: 20px;
}

.article-figure figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 28px;
  color: var(--muted-2);
  text-align: center;
}

.figure-source { margin-left: 6px; }

/*
 * 본문 첫머리의 강조문.
 *
 * 왼쪽 주황 막대와 상자를 걷어냈다. 이 줄은 글의 첫 문장이지 인용이 아니라서
 * 칸을 두르면 본문 밖의 딸린 말처럼 읽힌다. 대신 본문보다 두 급 키우고
 * 굵기와 검정으로만 세운다 — 색이나 바탕을 더 쓰지 않아도 먼저 읽힌다.
 */
.article-summary {
  padding: 0;
  margin: 0 0 40px;
  border-left: 0;
  font-size: 20px;
  line-height: 1.55;
  font-weight: 600;
  color: #000;
}

/*
 * 본문 행간은 글자 크기의 배수로 적는다.
 *
 * 전에는 18/38 — 2.11배였다. 한 줄을 읽고 다음 줄로 눈이 내려오는 거리가
 * 멀어 문단이 낱줄로 흩어져 보였다. 1.6 배로 접으면 18px 에서 28.8px 이 된다.
 * 배수로 적어 두면 아래 좁은 화면 구간에서 크기만 줄여도 같은 비율이
 * 따라온다 — 17px 은 27.2, 16px 은 25.6.
 */
.article-content {
  margin-bottom: 70px;
  font-size: 18px;
  line-height: 1.6;
  color: var(--ink-2);
  /* 글칸에서 한 번 걸었지만 em 은 물려받을 때 px 로 굳는다 — 16px 기준의
     -0.32 가 18px 본문까지 따라온다. 여기서 다시 적어 본문 크기로 계산시킨다. */
  letter-spacing: -0.02em;
  /* 문단과 문단 사이 여백은 이 한 값으로만 잡는다. 주황 강조줄·체크줄도
     결국 문단이라 같은 값을 쓴다 — 아래 좁은 화면 구간에서 이 값만 바꾸면
     셋이 함께 따라오므로 강조줄만 더 벌어지는 일이 생기지 않는다. */
  --para-gap: 20px;
}

.article-content p { margin: 0 0 var(--para-gap); }

/* 소제목은 앞을 크게 띄우고 뒤는 붙인다 — 제 아래 문단을 데리고 있게. */
.article-content h2 {
  margin: 56px 0 14px;
  font-size: 25px;
  line-height: 1.35;
  font-weight: 700;
  color: var(--ink);
}

.article-content h3 {
  margin: 40px 0 12px;
  font-size: 20px;
  color: var(--ink);
}

.article-content a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.article-content a:hover { color: var(--accent); }
/* 본문 사진도 대표 사진과 같은 20 — 한 화면에 두 라운딩이 섞이지 않게. */
/* 사진 위아래도 소제목과 같은 규칙으로 — 문단 사이(20)보다 확실히 크게. */
.article-content img { margin: 36px 0; width: 100%; border-radius: 20px; }
.article-content ul { list-style: disc; padding-left: 22px; margin: 0 0 var(--para-gap); }
.article-content ol { list-style: decimal; padding-left: 22px; margin: 0 0 var(--para-gap); }
.article-content li { margin-bottom: 6px; }

.article-content blockquote {
  margin: 26px 0;
  padding-left: 20px;
  border-left: 3px solid var(--line);
  color: var(--muted);
}

/* ── 본문 안의 상자 ────────────────────────────────────────────
 *
 * 칼럼 원고는 문단 말고도 네 가지 칸을 쓴다 — 옅은 회색 인용, 주황 강조,
 * 필자 Comment, 맨 아래 필자 소개. 넷 다 관리자에 저장한 본문 HTML 안에
 * class 로 실려 오므로 모양은 여기서만 정한다. 뷰는 건드리지 않는다.
 *
 * 이미 올라간 기사 본문에는 class 도 <img> 도 없다(44건 전수 확인). 그래서
 * 아래 규칙은 새 기사에만 걸리고 기존 기사는 그대로다.
 *
 * 상자 모서리는 16, 사진은 20 — 이 파일이 쓰던 두 값을 그대로 가져다 쓴다.
 */

.article-photo { margin: 36px 0; }

/*
 * 본문 사진 칸은 늘 같은 3:2 로 선다.
 *
 * 원본은 3:2 도 있고 16:9 도 있다. 그대로 두면 사진마다 높이가 달라져
 * 스크롤을 내릴 때 글 사이의 빈칸 크기가 들쭉날쭉해진다. 칸을 고정하고
 * cover 로 채우면 어떤 사진을 끼워도 기사 전체의 리듬이 유지된다.
 * 3:2 인 까닭은 이미 걸려 있는 사진들이 1880x1253 이라서다.
 */
.article-photo img {
  margin: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.article-photo figcaption {
  margin-top: 12px;
  font-size: 14px;
  line-height: 28px;
  color: var(--muted-2);
  text-align: center;
}

/*
 * 옅은 회색 인용 — 계약서 문장처럼 '남이 쓴 말'을 그대로 옮긴 칸.
 *
 * 바탕은 회색 그대로 두고 글자만 주황으로 올린다. 회색 칸이 본문에서 한 번
 * 쉬어 가는 자리라면, 그 안의 주황은 그 자리에서 무엇을 봐야 하는지 짚는다.
 * 기사 아래쪽에 같은 모양으로 한 칸 더 나오는데 둘은 같은 규칙을 쓴다.
 */
.article-note {
  padding: 24px 28px;
  /* 앞뒤 문단이 한 문장으로 이어지는 자리라(…아니라, / 라고 생각해보는)
     문단 사이(20)에서 4 만 더 벌린다. 더 벌리면 문장이 끊어져 읽힌다. */
  margin: 24px 0;
  background: var(--bg-soft);
  border-radius: 16px;
  color: var(--accent);
  font-weight: 600;
}

/*
 * 상자 없는 주황 한 줄 — 본문 흐름 안에서 목소리만 바꾸는 자리.
 *
 * 담당자가 던진 말, 필자가 스스로에게 묻는 말이 여기 들어간다. 칸을 두르면
 * 본문에서 떨어져 나와 인용처럼 보이므로 색과 굵기만 쓴다.
 *
 * 크기와 행간은 본문 그대로 물려받는다. 한때 19px 로 1px 키웠더니 행간도
 * 1.6 배만큼 같이 늘어(28.8 → 30.4) 앞뒤 문단과 줄 간격이 어긋나 보였다.
 * 색과 굵기만으로도 충분히 먼저 읽히므로 크기는 건드리지 않는다.
 * 여백도 문단과 같게 둔다 — 강조가 지나갈 때만 글이 벌어지면 안 된다.
 */
.article-content .article-em {
  margin: 0 0 var(--para-gap);
  font-weight: 600;
  color: var(--accent);
}

/*
 * 본문 흐름 안에서 남의 말을 한 줄로 받아 적은 자리.
 *
 * 한때 앞에 주황 체크를 달아 두었다. 그런데 이 줄은 꼽아 세는 항목이 아니라
 * 앞 문단("그러니까,")에서 이어져 뒷 문단("이라는 방식도…")으로 넘어가는
 * 한 문장이다. 아이콘이 붙자 문장이 목록의 한 칸처럼 끊겨 읽혔다. 체크는
 * 필자 Comment 의 확인 항목 쪽으로 넘기고, 여기는 굵기만 남긴다.
 * 색을 주황으로 올리지 않는 까닭도 같다 — 인용이지 강조가 아니다.
 */
.article-content .article-said {
  margin: 0 0 var(--para-gap);
  font-weight: 600;
  color: var(--ink);
}

/*
 * 글 전체의 주장 — 상자도 테두리도 없이 위아래를 크게 비워 세운다.
 *
 * 전에는 주황 테두리 칸이었다. 칸이 세 개쯤 이어지자 어느 것이 더 중한지
 * 구별이 안 돼, 이 한 줄만 남기고 테두리를 지웠다. 앞뒤 36 은 소제목 앞
 * 여백(56)보다 좁고 문단 사이(20)보다 넓어 — 문단도 장도 아닌 중간 급이다.
 *
 * 크기와 행간은 .article-em 과 같은 이유로 본문 그대로다. 이 줄이 유독
 * 넓은 행간으로 서면 앞뒤 문단과 줄 간격이 어긋나 딴 글처럼 보인다.
 * 무게는 여백으로 준다 — 글자 크기가 아니라.
 */
.article-content .article-point {
  padding: 0;
  margin: 36px 0;
  border: 0;
  background: none;
  border-radius: 0;
  font-weight: 600;
  color: var(--accent);
}

/* 필자 Comment — 사실을 적은 본문과 필자 의견 사이를 가르는 칸. */
.article-comment {
  padding: 32px;
  margin: 48px 0;
  background: var(--bg-soft);
  border-radius: 20px;
}

/*
 * 아래 넷은 모두 <p> 라 .article-content p 의 여백(0 0 24px)이 먼저 걸린다.
 * 그쪽이 요소까지 짚어 더 세기 때문이다. 그래서 .article-content 를 앞에
 * 붙여 세기를 맞춘다 — 안 그러면 이름과 직함 사이가 24px 로 벌어진다.
 */
.article-content .article-comment-title {
  margin: 0 0 18px;
  font-size: 22px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--accent);
}

/*
 * Comment 안의 목록은 점 대신 주황 동그라미 체크로 센다.
 *
 * 필자가 "계약서를 받으면 이것부터 본다"고 꼽아 놓은 확인 항목이다. 점은
 * 그냥 나열이지만 체크는 하나씩 짚어 본다는 뜻이라 이 자리에 맞는다.
 * flex 라 두 줄로 넘어가도 둘째 줄이 아이콘 밑으로 들어가지 않고 글끼리
 * 왼쪽을 맞춘다 — 점 목록의 들여쓰기와 같은 모양이 된다.
 */
.article-content .article-comment ul {
  list-style: none;
  padding-left: 0;
}

.article-content .article-comment li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

/* 아이콘은 첫 줄 한가운데에 맞춘다 — (한 줄 높이 - 아이콘)/2 만큼 내린다. */
.article-content .article-comment li::before {
  content: "";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: calc((1.6em - 22px) / 2);
  background: var(--check-icon) no-repeat center / contain;
}

/*
 * 맨 아래 필자 소개.
 *
 * 예전에 이름·직함만 되풀이하던 상자는 걷어냈었다. 이 칸은 제목 아래 기자
 * 줄에 없는 것(무엇을 다루는지, 어디로 연락하는지)만 담으므로 겹치지 않는다.
 * 좁은 화면에서 세로로 세우는 규칙은 아래쪽 720 구간에 이미 남아 있다.
 *
 * 흰 바탕에 회색 테두리만 있던 칸을 옅은 주황 카드로 바꿨다. 글이 끝나고
 * 처음 만나는 색 있는 덩이라 여기서 눈이 한 번 멈춘다. 왼쪽 둥근 자리에
 * 필자를 세우고, 오른쪽은 이름 → 경력 → 소개 → 고지 순으로 한 줄씩 낮춘다.
 */
.author-box {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 34px;
  /*
   * 본문 마지막 줄과 이 칸 사이를 한 번 더 벌린다. 글이 끝났다는 신호를
   * 색 있는 칸이 아니라 빈 자리가 먼저 주도록 — 56 에서는 마지막 문단에
   * 얹힌 듯 보였다.
   */
  margin-top: 76px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: 28px;
  font-size: 16px;
  line-height: 1.6;
}

/*
 * 왼쪽 둥근 자리. 지금은 사진이 없어 이름 첫 글자를 주황 원에 얹어 둔다.
 * 나중에 사진이 생기면 이 자리에 <img> 만 끼워도 크기가 그대로 맞는다.
 */
.author-box-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
}

.author-box-avatar img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  object-fit: cover;
}

.author-box-body { min-width: 0; }

/* 이름이 이 칸에서 가장 큰 글자다 — 기사 소제목 바로 아래 급. */
.article-content .author-box-name {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--ink);
}

/*
 * 직함이 한 줄로 줄면서 아래 소개가 뜬 자리가 생겼다 — 여백을 한 단 줄여
 * 이름 → 직함 → 소개가 다시 한 덩이로 붙게 한다.
 */
.article-content .author-box-position {
  margin: 0 0 10px;
  font-size: 16px;
  line-height: 1.55;
  font-weight: 600;
  color: var(--ink-2);
}

.article-content .author-box-intro {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* 소개 아래 고지 — 한 급 작게 두되 회색은 더 내리지 않는다. 여기서 더
   묽히면 옅은 주황 바탕 위에서 글자가 바탕에 먹힌다. */
.article-content .article-disclaimer {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--accent-line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* 상자 안 마지막 문단은 아래 여백을 지운다 — 안 그러면 칸이 아래로 뜬다. */
.article-note p:last-child,
.article-point p:last-child,
.article-comment p:last-child,
.article-comment ul:last-child,
.author-box p:last-child { margin-bottom: 0; }

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 26px;
  margin-top: 36px;
  border-top: 1px solid var(--line);
}

/* 외부 링크 (국가 플랫폼 연결) — 모서리는 홈의 추천 칸(16)과 같은 값으로 간다. */
.external-links {
  padding: 26px 28px;
  margin: 40px 0;
  border: 1px solid var(--line);
  border-radius: 16px;
}

.link-list { display: flex; flex-direction: column; gap: 2px; }

.link-list li a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-soft);
}

.link-list li:last-child a { border-bottom: 0; }

.link-type {
  flex: none;
  min-width: 62px;
  font-weight: 600;
  color: var(--accent);
}

.link-title { flex: 1; font-size: 15px; }
.link-arrow { color: var(--muted-2); }
.link-list li a:hover .link-title { color: var(--accent); }

/* 기자 사진 — 기자 목록·기자 페이지에서 쓴다(기사 본문 쪽은 .byline-photo). */
.author-photo,
.author-photo-empty {
  width: 62px;
  height: 62px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

.author-photo-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
}

.author-name { font-size: 17px; }
.author-position { margin-top: 3px; font-size: 13px; color: var(--muted); }
.author-bio { margin-top: 9px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.author-email { margin-top: 7px; font-size: 13px; color: var(--muted); }

/* 기자 목록 */
.author-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 26px;
  margin-top: 36px;
}

.author-card {
  display: flex;
  gap: 15px;
  padding: 20px;
  border: 1px solid var(--line);
}

.author-card:hover { border-color: var(--accent); }

.author-profile {
  display: flex;
  gap: 22px;
  align-items: center;
  padding: 34px 0;
}

.author-photo-large {
  width: 96px;
  height: 96px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
}

/* ── 검색 ──────────────────────────────────────────────────────
 *
 * 헤더에서 펼치는 칸과 /search 화면이 마크업 한 벌(partials/search_panel)을
 * 함께 쓴다. 그래서 규칙도 한 벌만 둔다 — 달라지는 곳은 variant 두 줄뿐이다.
 *   .search-panel--header  평소 display:none. 헤더 높이(92px)를 건드리지 않고,
 *                          열렸을 때만 헤더 아래로 자리를 만든다.
 *   .search-panel--page    늘 펼쳐진 모습.
 *
 * 칩은 <label> 안에 진짜 <input> 이 들어 있다. 입력칸은 눈에서만 감추고
 * (지워 버리면 키보드로 고를 수 없다) 옆의 <span> 을 칩처럼 그린다.
 * 고른 칩만 오렌지로 채운다 — 흰 바탕의 작은 오렌지 글자는 대비가 모자란다.
 * ────────────────────────────────────────────────────────────── */

/* 헤더 오른쪽 빈 칸 — 가운데 메뉴를 밀지 않도록 칸 안에서 오른쪽 끝에 붙는다. */
.header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.header-search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: var(--ink);
  background: none;
  border: 1px solid transparent;
  border-radius: 999px;
  cursor: pointer;
}

.header-search-toggle svg { width: 22px; height: 22px; }

.header-search-toggle:hover { color: var(--accent); border-color: var(--line); }

/* 열려 있는 동안은 단추 자체가 상태 표시다. */
.header-search-toggle[aria-expanded="true"] {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* ── 펼침 칸 ───────────────────────────────────────────────── */

.search-panel--header {
  display: none;
  border-bottom: 1px solid var(--line);
}

.search-panel--header.is-open {
  display: block;
  animation: search-drop 0.18s ease-out;
}

@keyframes search-drop {
  from { opacity: 0; transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .search-panel--header.is-open { animation: none; }
}

.search-box { padding: 24px 0 22px; }

.search-panel--page .search-box { padding: 26px 0 8px; }

/* ── 검색어 줄 ─────────────────────────────────────────────── */

.search-line {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 0 8px 0 20px;
  border: 1px solid var(--ink);
  border-radius: 999px;
}

.search-line:focus-within { border-color: var(--accent); }

.search-line-icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--muted);
}

.search-line-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  font-size: 17px;
  color: var(--ink);
  background: transparent;
  border: 0;
}

.search-line-input:focus { outline: none; }
.search-line-input::placeholder { color: var(--muted-2); }

/* 검색어 칸의 기본 지우기 단추 — 우리 단추들과 겹쳐 보여 걷어낸다. */
.search-line-input::-webkit-search-cancel-button { display: none; }

.search-line-submit {
  flex: none;
  height: 38px;
  padding: 0 22px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.search-line-submit:hover { background: var(--accent-ink); }

.search-line-close {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.search-line-close svg { width: 15px; height: 15px; }
.search-line-close:hover { color: var(--ink); background: var(--bg-soft); }

/* ── 필터 ──────────────────────────────────────────────────── */

.search-filters { margin-top: 16px; }

/* 라벨은 폭을 고정한다 — 묶음마다 칩이 같은 선에서 시작해야 읽힌다. */
.filter-row {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 0;
}

.filter-row + .filter-row { border-top: 1px solid var(--line-soft); }

/* '기간 직접선택' 을 고르기 전에는 줄째로 빠진다. */
.filter-row--dates[hidden] { display: none; }

.filter-label {
  padding-top: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-chip { display: inline-flex; cursor: pointer; }

/* 눈에서만 감춘다 — display:none 으로 지우면 키보드로 고를 수 없다. */
.filter-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.filter-chip span {
  display: inline-block;
  padding: 7px 15px;
  font-size: 13px;
  color: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.filter-chip:hover span { color: var(--accent-ink); border-color: var(--accent); }

.filter-chip input:checked ~ span {
  font-weight: 700;
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
}

/* 감춘 입력칸에는 테두리가 보이지 않는다 — 칩에 대신 그려 준다. */
.filter-chip input:focus-visible ~ span {
  outline: 2px solid var(--accent-ink);
  outline-offset: 2px;
}

.filter-chips--dates { align-items: center; gap: 10px; }

.filter-chips--dates input[type="date"] {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.filter-chips--dates input[type="date"]:focus { outline: none; border-color: var(--accent); }

.filter-range-dash { color: var(--muted-2); }

/* ── 결과 ──────────────────────────────────────────────────── */

/* 아래 여백은 내용이 있을 때만 — 헤더 칸은 열자마자 비어 있다. */
.search-results > .wrap:last-child { padding-bottom: 32px; }

.search-active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.search-active-label {
  margin-right: 2px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
}

.search-active-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  color: #fff;
  background: var(--accent);
  border-radius: 999px;
}

.search-active-chip svg { width: 10px; height: 10px; opacity: 0.85; }
.search-active-chip:hover { background: var(--accent-ink); }

.search-active-reset {
  margin-left: 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.search-active-reset:hover { color: var(--ink); }

.search-count {
  padding-top: 18px;
  font-size: 14px;
  color: var(--muted);
}

.search-count strong { color: var(--ink); }
.search-count .dot { color: var(--disabled); }

.search-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px var(--gap);
  margin-top: 18px;
}

.search-card-thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg-soft);
}

.search-card-body { margin-top: 12px; }
.search-card-body .card-meta { margin-bottom: 7px; }

.search-card-title {
  font-size: 17px;
  line-height: 1.35;
}

.search-card-title a:hover { color: var(--accent); }

/* 빈 화면 대신 다음에 뭘 하면 되는지 알려 준다. */
.search-empty {
  padding: 42px 0 36px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}

.search-empty strong {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}

.search-empty--hint { color: var(--muted-2); }

.search-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 34px;
}

.search-pager a,
.search-pager span {
  min-width: 34px;
  padding: 7px 11px;
  font-size: 14px;
  text-align: center;
  border: 1px solid transparent;
  border-radius: 999px;
}

.search-pager a:hover { color: var(--accent-ink); border-color: var(--line); }

.search-pager .is-current {
  font-weight: 700;
  color: #fff;
  background: var(--ink);
}

/* ── 페이지 이동 ───────────────────────────────────────────── */

.pagination {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 52px;
}

.page-link {
  min-width: 40px;
  padding: 9px 12px;
  text-align: center;
  font-size: 14px;
  border: 1px solid var(--line);
}

.page-link:hover { border-color: var(--ink); }

.page-link.is-current {
  color: #fff;
  background: var(--ink);
  border-color: var(--ink);
  font-weight: 700;
}

/* ── 목록 화면 (한국일보 오피니언 규격) ──────────────────────────
 *
 * hankookilbo.com/news/opinion 를 그대로 재서 옮겼다. 그쪽은 밑변 10px 짜리
 * 눈금을 써서 숫자가 곧 픽셀이다 — 아래 값은 전부 레퍼런스에서 읽은 그대로다.
 *
 *   바깥 폭 1280 · 좌우 40 → 안쪽 1200      두 칸 1fr / 340, 사이 8
 *   패널 모서리 8 · 안쪽 여백 32            패널 사이 8
 *   제목 막대 높이 70 · 여백 16/32          제목 30/700, 탭 14/500
 *   섹션 제목 20/700 + 꺾쇠 20             전체 기사만 밑줄 1px
 *   목록 칸 좌우 16 · 한 줄 위아래 36        줄 사이 1px #eee
 *   글칸 최소 높이 118 · 사진 236 (5:3)      둘 사이 32
 *   말머리 14/500 · 제목 20/600 · 요약 14    날짜줄 13, 위 12
 *   여는 두 칸 8:4, 사이 8                  회색 상자 안쪽 32 · 모서리 8
 *   머리기사 제목 22/600 · 사진 300 (5:3)    쉼표 62×38, 모서리 밖 19
 *   칼럼니스트 한 줄 = 이름 18/600          오른쪽 둥근 얼굴 64
 *   심층 리포트 4칸 · 사진 5:3 · 제목 16/500 아래 묶음은 윗줄 1px
 *   옆칸 패널 32/24 · 제목 18/700           순위 20/800, 사진 90 (5:3)
 *   에디터 픽 사진 5:3 · 제목 16/500        쪽 번호 30×30 · 사이 12 · 글자 15
 *
 * 나라(country) · 나라+분류(category) · 주제 모음(category_all) 세 화면이
 * partials/hk_page 한 틀을 함께 쓰므로, 아래 규칙도 그 세 곳에 같이 걸린다.
 * 그래서 이름은 모두 hk- 로 시작한다. 다른 화면이 함께 쓰는
 * .wrap · .pagination · partial 은 건드리지 않았다.
 * 다만 색은 한국일보 남색이 아니라 우리 오렌지를 그대로 쓴다.
 * ────────────────────────────────────────────────────────────── */

.hk-page {
  padding: 20px 0 100px;
  /* .site-main 이 아래에 80px 을 비워 둔다 — 회색 바탕이 푸터까지 닿도록 끌어내린다. */
  margin-bottom: -80px;
  background: #eeeeee;
}

.hk-wrap {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
}

/* 패널은 8px 틈을 두고 세로로 쌓인다 — 레퍼런스의 gap-y-8. */
.hk-wrap > * + * { margin-top: 8px; }

.hk-titlebar,
.hk-panel {
  background: #fff;
  border-radius: 8px;
}

/* 이 화면에서는 광고도 같은 흰 패널로 맞춘다. */
.hk-wrap .ad-slot {
  margin: 0;
  padding: 18px;
  background: #fff;
  border: 0;
  border-radius: 8px;
}

/* ── 제목 + 분류 탭 ─────────────────────────────────────────── */

.hk-titlebar {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 70px;
  padding: 16px 32px;
  overflow: hidden;
}

.hk-title {
  flex: none;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

/*
 * 분류가 많으면 가로로 밀어 본다 — 줄바꿈으로 막대 높이가 늘어나지 않게.
 * 오른쪽 16px 은 마지막 분류가 패널 모서리에 붙지 않게 두는 자리다.
 */
.hk-tabs {
  flex: 1;
  min-width: 0;
  padding-left: 16px;
  padding-right: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}

.hk-tabs::-webkit-scrollbar { display: none; }
.hk-tabs ul { display: flex; width: max-content; }

/* 분류 사이의 1px 짜리 짧은 세로줄. */
.hk-tabs li { position: relative; padding: 0 20px; }
.hk-tabs li:first-child { padding-left: 0; }

.hk-tabs li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background: var(--line-soft);
}

.hk-tabs li:first-child::before { display: none; }

/* 레퍼런스는 18px 이지만 우리 분류는 열 개라 다 안 들어간다 — 4px 줄여 쓴다. */
.hk-tabs a {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  /*
   * 고르지 않은 분류는 회색으로 한 단 낮춘다.
   * 먹빛 그대로 두면 옆의 나라 이름(30px 굵은 글씨)과 무게가 비슷해져
   * 지금 어느 분류를 보고 있는지가 한눈에 안 들어왔다.
   */
  color: var(--muted-2);
}

.hk-tabs a:hover { color: var(--accent); }
.hk-tabs a.is-active { font-weight: 700; color: var(--accent-ink); }

/* ── 패널 ──────────────────────────────────────────────────── */

.hk-panel { padding: 32px; }

/*
 * 패널 머리 — 레퍼런스는 제목 옆에 오른쪽 꺾쇠를 늘 붙여 둔다.
 * 갈 곳이 있는 묶음은 머리 전체가 링크가 되고, 없으면 꺾쇠만 장식으로 남는다.
 * 밑줄은 목록 패널(전체 기사)에만 긋는다 — 레퍼런스가 거기만 그어 뒀다.
 */
.hk-panel-head {
  display: flex;
  align-items: center;
  color: var(--ink);
}

.hk-panel-head--line {
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-soft);
}

.hk-panel-title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  color: inherit;
}

.hk-panel-arrow {
  display: flex;
  margin-left: 4px;
  padding: 2px;
}

a.hk-panel-head:hover { color: var(--accent); }

/* 말머리 — 분류 이름. 레퍼런스는 남색이지만 우리는 포인트 색을 쓴다. */
.hk-kicker {
  margin-bottom: 4px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--accent-ink);
}

.hk-kicker-type { font-weight: 400; color: var(--muted-2); }
.hk-kicker-type::before { content: "·"; margin: 0 5px; color: var(--muted-2); }

/* ── 여는 두 칸 (레퍼런스의 사설 + 대표 칼럼) ────────────────
 *   왼쪽 8 : 오른쪽 4 · 사이 8 — 패널을 세로로 쌓을 때와 같은 틈
 *   회색 상자 안쪽 32 · 머리기사 글칸과 사진 사이 24 · 사진 300 (5:3)
 *   아래 묶음은 28 + 1px 줄 + 28 · 칸 사이 24 에 세로줄
 * ──────────────────────────────────────────────────────────── */

.hk-open {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 8px;
  /*
   * 두 칸의 키를 맞춘다. 한때는 start 로 두어 짧은 쪽을 내용만큼만 세웠는데,
   * 나라마다 기자 수가 달라 오른쪽 패널의 아랫단이 제각각으로 떠 보였다.
   * 같은 줄에 선 상자는 아랫선이 하나로 떨어져야 한 벌로 읽힌다.
   */
  align-items: stretch;
}

/* 늘어난 키를 패널이 받아야 흰 바탕이 아래까지 내려온다. */
.hk-open > .hk-panel { display: flex; flex-direction: column; }

/* 한 묶음만 있는 화면에서는 가른 자리를 없앤다 — 옆에 빈 흰 칸이 서지 않게. */
.hk-open--single { grid-template-columns: minmax(0, 1fr); }

/*
 * 흰 패널 안에 한 겹 더 들어앉는 회색 상자.
 * 쉼표가 위 모서리 밖으로 걸쳐 나가므로 넘친 것을 자르지 않는다.
 */
.hk-editorial {
  position: relative;
  margin-top: 12px;
  padding: 32px;
  border-radius: 8px;
  background: var(--bg-soft);
}

/*
 * 쉼표 — 상자 오른쪽 위 모서리에 절반쯤 걸쳐 세운다.
 * 주황을 흰색에 옅게 푼 색이라 글을 가리지 않고 상자 위에만 얹힌다.
 */
.hk-quote {
  position: absolute;
  top: -19px;
  right: 20px;
  display: block;
  /* 글줄 높이가 남아 상자 아래로 7px 이 더 잡히지 않게 0 으로 눕힌다. */
  line-height: 0;
  color: #ffdbc3;
}

/* 머리기사 — 글이 왼쪽, 사진이 오른쪽. 레퍼런스의 사설 첫 줄과 같은 짜임이다. */
.hk-lead { display: flex; align-items: flex-start; gap: 24px; }

.hk-lead-body { flex: 1; min-width: 0; }

.hk-lead-title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hk-lead-title a:hover { color: var(--accent); }

.hk-lead-summary {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 상자가 회색이라 사진 뒤를 흰색으로 둔다 — 그림이 늦게 오는 동안 자리가 보이게. */
.hk-lead-thumb {
  position: relative;
  flex: none;
  width: 300px;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
}

.hk-lead-thumb img { width: 100%; height: 100%; object-fit: cover; }

.hk-editorial-rest {
  display: flex;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

/*
 * 남은 기사는 같은 몫으로 나눠 갖는다 — 셋이면 셋으로, 하나면 그 하나가 다 쓴다.
 * 칸을 가르는 1px 세로줄은 왼쪽 테두리로 긋고 첫 칸에서만 뺀다.
 */
.hk-editorial-rest > li { flex: 1 1 0; min-width: 0; padding: 0 24px; }
.hk-editorial-rest > li:first-child { padding-left: 0; }
.hk-editorial-rest > li:last-child { padding-right: 0; }
.hk-editorial-rest > li + li { border-left: 1px solid var(--line); }

/*
 * 아래 묶음의 요약 — 홈에서만 붙는다(목록 화면은 제목만 건다).
 * 레퍼런스의 사설 상자가 아래 두 칸에도 요약을 두 줄씩 깔아 둔 자리다.
 */
.hk-rest-summary {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 홈 맨 위 세 칸 (레퍼런스: 조선일보 첫 화면) ────────────────
 *   좌 1 : 중앙 2 : 우 1 — 요청한 50 · 100 · 50 이다.
 *   본문 폭 1240 - 좌우 여백 48 = 1192, 틈 8 둘을 빼고 넷으로 나누면
 *   옆 칸 294 · 가운데 588 이 된다.
 *
 *   틈 8 · 모서리 8 · 패널 바탕 흰색은 목록 화면의 패널(.hk-panel)과
 *   같은 한 벌이라 블랙박스 기존 짜임을 그대로 쓴다. 옆 칸만 안쪽 여백을
 *   32 → 24 로 줄였다 — 294 안에서 32 를 두면 글 자리가 230 밖에 남지 않아
 *   둥근 얼굴(48) 을 앉히면 제목이 두 글자씩 끊긴다.
 *
 *   격자가 아니라 flex 인 것은 한 묶음이 비었을 때다. 기사가 몇 건 없는
 *   나라에서 격자는 빈 칸을 그대로 남기지만 flex 는 남은 패널이 자리를
 *   나눠 가진다 — 빈 흰 칸이 서지 않는다.
 * ──────────────────────────────────────────────────────────── */

.home-trio {
  display: flex;
  gap: 8px;
  /*
   * 세 패널의 아랫선을 하나로 떨어뜨린다(flex 기본값을 적어 둔다).
   * 같은 줄에 선 상자는 아랫선이 맞아야 한 벌로 읽힌다.
   */
  align-items: stretch;
}

/* 늘어난 키를 패널 속 상자가 받아야 흰 바탕이 아래까지 내려온다. */
.home-trio > .hk-panel { display: flex; flex-direction: column; min-width: 0; }

/*
 * 너비를 flex-grow(1:2:1) 가 아니라 flex-basis 로 못박는다.
 * grow 로 두면 패널마다 안쪽 여백이 달라(옆 24 · 가운데 32) 비율이 어긋난다 —
 * box-sizing: border-box 에서 basis 0 은 여백보다 작아질 수 없어 패널의
 * 밑자리가 0 이 아닌 여백값(48 · 64 · 48)이 되고, 남은 자리만 1:2:1 로
 * 갈리기 때문이다. 실제로 302 · 572 · 302 가 나와 가운데가 16 좁았다.
 * basis 로 적으면 여백과 무관하게 294 · 588 · 294 가 된다.
 *
 * 뺄 값 16 은 틈 8 이 두 군데 든 것이다 — 위 .home-trio 의 gap 과 한 벌이라
 * 한쪽만 고치면 어긋난다.
 */
.home-trio__main { flex: 1 1 calc((100% - 16px) / 2); }
.home-trio__side { flex: 1 1 calc((100% - 16px) / 4); padding: 24px; }

/* ── 왼쪽 — 주요기사 나머지 ────────────────────────────────── */

/*
 * 목록 화면의 회색 상자(.hk-editorial)와 같은 색·모서리다.
 * 가운데 큰 사진을 감싸면 테두리가 두 겹이 되어 정작 큰 기사가 작아 보이므로
 * 상자와 쉼표를 이 칸으로 옮겨 왔다. 쉼표가 위 모서리 밖으로 걸쳐 나가니
 * 넘친 것을 자르지 않는다.
 */
.home-briefs {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-top: 12px;
  padding: 20px;
  border-radius: 8px;
  background: var(--bg-soft);
}

/*
 * 남는 자리를 아래에 몰아 두지 않고 줄들이 나눠 갖는다.
 * 가운데 큰 기사의 키에 맞춰 패널이 늘어나는데, 그 차이를 맨 아래에
 * 빈 회색으로 남기면 상자가 반쯤 빈 것처럼 보인다.
 * 사진이 붙은 첫 줄만 제 키대로 서고(flex:none) 아래 줄들이 나눠 늘어난다.
 */
.home-brief-list { display: flex; flex-direction: column; flex: 1; }

.home-brief-list > li {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.home-brief-list > li:first-child { flex: none; }

.home-brief-list > li + li {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

/*
 * 쉼표 — 홈은 목록 화면(.hk-editorial)보다 한 단 작고, 상자 오른쪽 위
 * 모서리에 바짝 붙는다.
 *
 * 이 칸은 목록 화면 상자보다 한참 좁아(안폭 254) 62 짜리를 20 안쪽에 두면
 * 쉼표가 상자 한복판까지 들어와 첫 줄 사진 위에 얹혔다.
 * right 를 0 으로 두어 오른쪽 끝이 상자 모서리와 한 선에 서고,
 * top 은 높이의 절반(26 의 절반)만큼 올려 모서리에 반쯤 걸친다.
 *
 * 목록 화면 쉼표는 그대로 둔다 — 거기 상자는 넓어 지금 자리가 맞다.
 */
.home-briefs .hk-quote { top: -13px; right: 0; }
.home-briefs .hk-quote svg { width: 42px; height: 26px; }

/* 사진은 맨 윗 건에만 — 상자가 회색이라 그림 뒤는 흰색으로 둔다. */
.home-brief__thumb {
  position: relative;
  display: block;
  margin-bottom: 12px;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: #fff;
}

.home-brief__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* 칸이 좁아진 만큼 제목만 한 단 줄인다(16 → 15). */
.home-briefs .hk-brief-title { font-size: 15px; }

/* ── 가운데 — 머리기사 한 건 ───────────────────────────────── */

.home-lead { display: flex; flex-direction: column; }

/* 카드 그림(.card-thumb 16)과 같은 모서리다 — 블랙박스 둥근 정도를 따른다. */
.home-lead__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 16px;
  background: var(--bg-soft);
}

.home-lead__thumb img { width: 100%; height: 100%; object-fit: cover; }

.home-lead__body { text-align: center; }

/*
 * 말머리를 사진 아랫선에 걸친 알약으로 세운다 — 레퍼런스가 큰 사진 아래에
 * 알약 하나를 걸쳐 둔 자리다. 글자는 레퍼런스의 문구가 아니라
 * 그 기사의 분류 이름 그대로다.
 *
 * 사진 상자는 넘친 것을 자르므로(overflow:hidden) 알약을 그 안에 둘 수 없다.
 * 글칸 맨 위에서 음수 여백으로 끌어올려 걸치고, 쌓임 차례를 만들어(position)
 * 사진 위에 얹는다. 가운데 정렬은 fit-content + auto 여백으로 잡는다.
 */
.home-lead__kicker {
  position: relative;
  z-index: 1;
  width: fit-content;
  margin: -16px auto 0;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--accent);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}

/* 알약 안에서는 회색 글씨가 묻힌다 — 같은 흰색을 옅게 쓴다. */
.home-lead__kicker .hk-kicker-type,
.home-lead__kicker .hk-kicker-type::before { color: rgba(255, 255, 255, 0.8); }

.home-lead__title {
  margin-top: 18px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.home-lead__title a:hover { color: var(--accent); }

/*
 * 요약은 넉 줄까지 받는다.
 * 왼쪽 칸이 석 줄로 서면서 세 패널이 함께 길어졌는데, 가운데는 사진·알약·
 * 제목·요약으로 끝나 아래가 허전해졌다. 요약 한 줄을 더 받아 그 자리를 메운다.
 * 요약이 짧은 기사는 그대로 두세 줄로 선다 — 넉 줄은 자르는 한도일 뿐이다.
 */
.home-lead__summary {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── 오른쪽 — 대표 칼럼 ────────────────────────────────────── */

/*
 * 짜임(.hk-col-*)은 목록 화면과 한 벌이고, 좁아진 칸에 맞춰 얼굴과 글자만
 * 한 단 줄인다. 얼굴 64 · 틈 16 을 그대로 두면 글 자리가 166 이라
 * 제목이 세 글자씩 끊긴다. 48 · 12 로 줄여 186 을 확보했다.
 *
 * 줄들도 왼쪽 상자처럼 남는 자리를 나눠 갖는다 — 나라마다 칼럼 수가 달라
 * 줄이 셋만 설 때 아래가 통째로 비어 보이기 때문이다.
 */
.home-trio__side .hk-col-list { display: flex; flex-direction: column; flex: 1; margin-top: 16px; }

.home-trio__side .hk-col-list > li {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  min-height: 0;
}

.home-trio__side .hk-col-list > li + li { margin-top: 14px; padding-top: 14px; }
.home-trio__side .hk-col-row { width: 100%; gap: 12px; }
.home-trio__side .hk-col-photo { width: 48px; height: 48px; }
.home-trio__side .hk-col-photo--empty { font-size: 18px; }
.home-trio__side .hk-col-title { font-size: 15px; }

/* ── 작은 줄 (레퍼런스의 칼럼·기고) ─────────────────────────
 *   사진 120 을 왼쪽에 두고 오른쪽에 말머리와 제목 두 줄.
 *   사설 상자 아래쪽(사진 없이 제목만)과 심층 리포트 아랫줄이 함께 쓴다.
 * ──────────────────────────────────────────────────────────── */

.hk-brief { display: flex; align-items: flex-start; }

.hk-brief-thumb {
  position: relative;
  flex: none;
  width: 120px;
  aspect-ratio: 5 / 3;
  margin-right: 20px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-soft);
}

.hk-brief-thumb img { width: 100%; height: 100%; object-fit: cover; }

.hk-brief-body { flex: 1; min-width: 0; }

.hk-brief-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hk-brief-title a:hover { color: var(--accent); }

/* ── 칼럼니스트 (레퍼런스의 대표 칼럼) ──────────────────────
 *   한 줄 = 왼쪽에 직함 14 와 이름 18/600, 오른쪽에 둥근 얼굴 64
 *   줄 사이 16 + 1px 줄 + 16
 * ──────────────────────────────────────────────────────────── */

.hk-col-list { margin-top: 20px; }

.hk-col-list > li + li {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.hk-col-row { display: flex; align-items: center; gap: 16px; }

.hk-col-body { flex: 1; min-width: 0; }

/* 이 자리에서는 말머리가 span 이라 블록으로 세워야 아래 여백이 산다. */
.hk-col-body .hk-kicker { display: block; }

.hk-col-name {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.hk-col-row:hover .hk-col-name { color: var(--accent); }

/*
 * 같은 자리에 기자 이름 대신 기사 제목이 서는 경우 — 홈의 "대표 칼럼" 이다.
 * 제목은 이름보다 기니 두 줄에서 자른다. 크기·굵기는 이름과 한 벌로 둔다.
 */
.hk-col-title {
  display: -webkit-box;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hk-col-row:hover .hk-col-title { color: var(--accent); }

/*
 * 얼굴은 동그랗게 자른다 — 레퍼런스가 원을 쓰는 자리는 여기뿐이다.
 * 사진이 없어 기사 그림을 대신 넣어도 가운데가 남도록 object-fit 으로 채운다.
 */
.hk-col-photo {
  flex: none;
  display: block;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--bg-soft);
}

.hk-col-photo img { width: 100%; height: 100%; object-fit: cover; }

/* 사진도 기사 그림도 없을 때 — 이름 첫 글자를 원 안에 앉힌다. */
.hk-col-photo--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--muted-2);
}

/*
 * 주요기사가 없어 이 묶음만 남는 나라(기사가 아직 몇 건 없는 곳)에서는
 * 줄 목록이 가로를 통째로 쓴다. 그러면 이름은 왼쪽 끝, 얼굴은 오른쪽 끝에
 * 떨어져 한 줄이 텅 비어 보이므로, 그때만 여러 칸으로 접어 깐다.
 * 칸이 나뉘면 줄 사이 가로줄은 오히려 거치적거려 걷어 내고 틈으로만 나눈다.
 */
.hk-open--single .hk-col-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px 32px;
}

.hk-open--single .hk-col-list > li + li {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ── 심층 리포트 (레퍼런스의 심층 코너) ─────────────────────
 *   윗줄 넉 장 — 사진을 위에 얹고(5:3) 아래 14, 제목 16/500
 *   아랫줄 석 줄 — 작은 사진 120 을 왼쪽에, 사이 20
 *   두 줄 사이는 16 + 1px 줄 + 16
 * ──────────────────────────────────────────────────────────── */

.hk-deep-grid,
.hk-deep-row {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

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

/*
 * 아랫줄은 석 칸이다. 윗줄과 같은 넉 칸으로 두면 한 칸이 266 인데
 * 왼쪽 작은 사진 120 과 그 옆 여백을 빼면 제목 자리가 126 밖에 남지 않아
 * 두세 글자씩 끊겼다. 석 칸이면 한 칸이 363 이 되어 제목 자리가 223 이다
 * (패널 안폭 1136 에서 실제로 재 본 값이다).
 * 컨트롤러도 일곱 건만 뽑는다(BaseController::listExtras) — 넉 장 + 석 줄.
 */
.hk-deep-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--line-soft);
}

.hk-deep { display: flex; flex-direction: column; }

.hk-deep-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 3;
  margin-bottom: 14px;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-soft);
}

.hk-deep-thumb img { width: 100%; height: 100%; object-fit: cover; }

.hk-deep-body { flex: 1; min-width: 0; }

.hk-deep-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hk-deep-title a:hover { color: var(--accent); }

/* ── 전체 기사 목록 ────────────────────────────────────────── */

.hk-list { padding: 0 16px; }
.hk-list > li { padding: 36px 0; }
.hk-list > li + li { border-top: 1px solid var(--line-soft); }

.hk-item {
  display: flex;
  justify-content: space-between;
  gap: 32px;
}

/* 사진이 글보다 클 때 줄 높이가 들쭉날쭉하지 않도록 최소 높이를 준다. */
.hk-item-body { flex: 1; min-width: 0; min-height: 118px; }

.hk-item-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.02em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hk-item-title a:hover { color: var(--accent); }

.hk-item-summary {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hk-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted-2);
}

.hk-item-meta a:hover { color: var(--accent); }

.hk-item-thumb {
  flex: none;
  align-self: flex-start;
  width: 236px;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-soft);
}

.hk-item-thumb img { width: 100%; height: 100%; object-fit: cover; }

.hk-empty {
  padding: 70px 0;
  text-align: center;
  color: var(--muted);
}

/* ── 두 칸 ─────────────────────────────────────────────────── */

.hk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 8px;
  align-items: start;
}

.hk-col-main { min-width: 0; }

.hk-col-side {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hk-panel--side { padding: 32px 24px; }

.hk-side-title {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

/* 에디터 픽 — 사진 한 장에 제목 한 줄. 레퍼런스의 "지평선" 상자 규격이다. */
.hk-pick {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

.hk-pick-thumb {
  width: 100%;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-soft);
}

.hk-pick-thumb img { width: 100%; height: 100%; object-fit: cover; }

.hk-pick-title {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hk-pick:hover .hk-pick-title { color: var(--accent); }

.hk-rank > li:not(:last-child) {
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}

.hk-rank-item { display: flex; align-items: flex-start; gap: 12px; }

.hk-rank-body { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px; }

.hk-rank-no {
  flex: none;
  min-width: 14px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.5;
  color: var(--accent);
}

.hk-rank-title {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hk-rank-title a:hover { color: var(--accent); }

.hk-rank-thumb {
  flex: none;
  width: 90px;
  aspect-ratio: 5 / 3;
  overflow: hidden;
  border-radius: 4px;
  background: var(--bg-soft);
}

.hk-rank-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ── 쪽 번호 ───────────────────────────────────────────────── */

.hk-pager-wrap { display: flex; justify-content: center; padding: 12px 0; }
.hk-pager { display: flex; align-items: center; }
.hk-pager-item { display: flex; }

.hk-pager-item > a,
.hk-pager-item > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

.hk-pager-num {
  height: 30px;
  min-width: 30px;
  padding: 0 5px;
  border-radius: 4px;
  font-size: 15px;
  color: var(--ink-2);
  white-space: nowrap;
}

.hk-pager-num + .hk-pager-num { margin-left: 12px; }

.hk-pager-item.is-arrow {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  color: var(--ink);
}

.hk-pager-item.is-prev { margin-right: 12px; }
.hk-pager-item.is-next { margin-left: 12px; }

.hk-pager-num:hover,
.hk-pager-item.is-arrow:hover { background: var(--ink); color: #fff; }

.hk-pager-num.is-active { background: var(--ink); color: #fff; }

/* 갈 곳이 없는 화살표는 자리만 지키고 눌리지 않는다. */
.hk-pager-item.is-disabled { pointer-events: none; color: var(--disabled); }

/* ── 광고 ──────────────────────────────────────────────────── */

.ad-slot {
  position: relative;
  margin: 34px 0;
  padding: 18px;
  border: 1px solid var(--line-soft);
  text-align: center;
}

.ad-label {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 10px;
  color: var(--muted-2);
}

.ad-slot img { margin: 0 auto; }

/* ── 푸터 ──────────────────────────────────────────────────── */

/* 헤더와 같이 화면 폭을 다 쓴다 — 바탕은 메인 오렌지, 글씨는 모두 흰색. */
.site-footer {
  background: var(--accent);
  color: #fff;
}

.site-footer a { color: #fff; }

/* 바탕은 화면 폭을 다 쓰되, 글과 메뉴는 가운데로 모은다.
   레퍼런스와 같은 1368 + 좌우 84 — 안쪽 폭이 1200 으로 본문과 나란히 선다. */
.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  max-width: 1368px;
  min-height: 269px;
  margin: 0 auto;
  padding: 52px 84px;
}

.footer-left { padding-top: 7px; }

/* 로고와 메뉴는 한 줄에 나란히 선다. */
.footer-brand {
  display: flex;
  align-items: center;
}

.footer-logo {
  display: block;
  width: auto;
  height: 40px;
  margin-right: 80px;
}

/* 로고 옆 국가 줄. 로고가 32 → 40 으로 커진 만큼 글자도 16 → 18 로 같이 올린다. */
.footer-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 48px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.footer-menu a { opacity: 1; transition: opacity 0.2s ease; }
.footer-menu a:hover { opacity: 0.75; }

.footer-info {
  margin-top: 57px;
  font-size: 15px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -0.02em;
  /*
   * 푸터 바탕이 주황이라 흰 글자라도 대비가 넉넉하지 않다.
   * 여기서 더 흐려 놓으면 읽히지 않으므로 거의 흰색에서 멈춘다 —
   * 위 국가 줄(순백)과는 이 미세한 차이로만 층을 나눈다.
   */
  color: rgba(255, 255, 255, 0.92);
}

.footer-info a { text-decoration: underline; }
.footer-info a:hover { opacity: 0.8; }

/* 오른쪽은 SNS 한 줄. 아이콘 한가운데가 왼쪽 로고 한가운데와 나란히 서는 값이다. */
.footer-right { flex: none; padding-top: 15px; }

.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  /* 아이콘마다 두른 6px 여백만큼 줄 양끝이 밀려난다 — 그만큼 도로 당겨 붙인다. */
  margin: -6px;
}

/*
 * 24px 글리프 둘레에 6px 을 둘러 36px 짜리 누를 자리를 만든다(보이는 사이 22).
 * 주소를 아직 안 넣은 곳은 <a> 가 아니라 <span> 으로 서지만(partials/footer_social)
 * 줄에 선 자리는 같아야 하므로 여백을 함께 준다.
 */
.footer-social a,
.footer-social > span {
  display: flex;
  padding: 6px;
  transition: opacity 0.2s ease;
}

/* 갈 곳이 있는 아이콘만 손을 올릴 때 옅어진다. */
.footer-social a:hover { opacity: 0.7; }
.footer-social > span { cursor: default; }

/* ── 태블릿 ────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /*
   * 화면 폭을 쓰는 칸의 좌우 기준을 한 단 줄인다. 이 한 줄이면 상단 헤더와
   * 홈 여는 자리가 함께 따라온다 — 둘 다 --edge 를 본다.
   */
  :root { --edge: 24px; }

  /*
   * 두 칸이 한 칸으로 접히는 폭이다. 여기서도 1400 을 쓰면 옆 칸이 사라진
   * 만큼 글줄이 그대로 1352 까지 늘어난다 — 읽기 어려워지므로 상한을
   * 본문 폭으로 되돌린다.
   */
  .wrap--article { max-width: var(--wrap); }

  .layout-two-column { grid-template-columns: 1fr; gap: 44px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /*
   * 추천 칸을 옆에 두기엔 좁다 — 최신 기사 아래로 내린다.
   * 아래로 내려오면 맞출 왼쪽 키가 없으니 나눠 갖기를 그만두고
   * 세 칸을 나란히 깐다(둘로 깔면 셋째가 반 칸만 차지해 어긋나 보인다).
   */
  .news-columns { flex-direction: column; }
  .news-grid { width: 100%; }
  .news-picks {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    margin: 40px 0 0;
    padding-left: 0;
    border-left: 0;
  }
  .news-tile { flex-basis: calc((100% - 30px) / 2); }

  /*
   * 숏폼·영상 — 상자 둘은 그대로 나란히 둔다. 반씩 가르므로 좁아져도
   * 세로 카드와 대표 영상의 키가 함께 줄어 제목줄이 같은 선에 머문다.
   * 대표 영상 제목만 상자 폭에 맞춰 한 단 줄인다.
   */
  .video-panel { padding: 20px; }
  .video-shorts { gap: 10px; }
  .video-feature__title { font-size: 21px; }

  .columnist-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .spotlight--columnist { padding-top: 44px; margin-top: 54px; }
  /* 위쪽으로 올라온 묶음은 이 폭에서도 선과 안쪽 여백을 걷은 채로 둔다 —
     같은 구간에 다시 적지 않으면 바로 윗줄에 덮인다. */
  .spotlight--top { padding-top: 0; margin-top: 48px; border-top: 0; }
  .spotlight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* 로고와 메뉴를 한 줄에 두기엔 좁다 — 메뉴를 아래로 내리고 가로로 넘긴다. */
  .header-top-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    height: auto;
    padding: 18px var(--edge) 16px;
  }

  .header-nav-inner { justify-content: flex-start; gap: 26px; }
  .nav-link { font-size: 18px; }

  /* 좁은 화면에서는 고른 카드를 넓히지 않는다 — 한 장이 거의 화면을 채운다. */
  .country-hero {
    --card-active: 80vw;
    --card-idle: 80vw;
    --card-height: 240px;
    padding-top: 32px;
  }

  /* 카드가 작아진 만큼 모서리도 같이 줄여야 아래 기사 카드와 같아 보인다. */
  .country-card { border-radius: 34px; }

  .hero-controls { gap: 14px; padding-top: 22px; }
  .country-card__name { font-size: 20px; }
  .country-card.is-active .country-card__name { font-size: 28px; }

  /* 좌우로 벌려 두기엔 좁다 — SNS 를 아래로 내린다. */
  .footer-inner {
    flex-direction: column;
    gap: 0;
    min-height: 0;
    padding: 44px 24px 48px;
  }

  .footer-logo { height: 36px; margin-right: 48px; }
  .footer-menu { gap: 28px; font-size: 17px; }
  .footer-info { margin-top: 34px; }

  /* 글칸 상한은 위에서 이미 없앴다(.article-detail { max-width: none }).
     옆칸이 사라진 이 폭에서도 그대로 화면을 다 쓰므로 여기서 덮지 않는다. */
  .article-head { margin-bottom: 44px; }
  .article-head .card-meta { gap: 10px; line-height: 30px; }
  .article-head .tag-country { font-size: 18px; }
  .article-head .tag-category { font-size: 15px; }
  .article-title { font-size: 34px; line-height: 46px; }
  .article-meta { margin-top: 26px; }
  .article-figure { margin-bottom: 40px; }
  .article-summary { margin-bottom: 34px; font-size: 19px; }
  /* 행간은 위에서 배수로 걸어 뒀다 — 크기만 줄이면 27.2 로 따라온다. */
  .article-content { margin-bottom: 52px; font-size: 17px; }
  .article-content h2 { margin-top: 48px; }
  /* 크기는 본문을 물려받으므로 여백만 한 단 줄인다. */
  .article-content .article-point { margin: 30px 0; }

  /* 목록 화면 — 옆칸이 아래로 내려가고 좌우 여백이 40 → 20 으로 준다.
     레퍼런스도 이 폭에서 --wrap-px 를 2rem 으로 줄인다. */
  .hk-wrap { padding: 0 20px; }
  .hk-grid { grid-template-columns: minmax(0, 1fr); }
  .hk-list { padding: 0 8px; }
  .hk-list > li { padding: 32px 0; }
  .hk-panel--side { padding: 32px; }

  /* 여는 두 칸도 위아래로 놓는다 — 오른쪽 칸이 더 좁아지면 이름이 접힌다. */
  .hk-open { grid-template-columns: minmax(0, 1fr); }
  .hk-lead-thumb { width: 240px; }

  /*
   * 홈 맨 위 세 칸 — 셋을 한 줄에 두면 가운데 큰 사진이 손바닥만 해진다.
   * 큰 기사를 한 줄 통째로 올리고(order 로 markup 차례보다 앞에 세운다)
   * 옆 칸 둘을 그 아래에 나란히 깐다.
   */
  .home-trio { flex-wrap: wrap; }
  .home-trio__main { order: -1; flex: 1 1 100%; }
  .home-trio__side { flex: 1 1 0; }
  .home-lead__title { font-size: 26px; }

  .hk-deep-grid,
  .hk-deep-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

  /* 옆칸이 본문 아래로 내려오면 사진 한 장이 지나치게 커진다. */
  .hk-pick-thumb { max-width: 340px; }

  .footer-right {
    width: 100%;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
  }
}

/* ── 모바일 ────────────────────────────────────────────────── */

@media (max-width: 720px) {
  /* 본문 폭과 화면 폭 기준을 같은 18 로 모은다 — 이 폭에서는 둘을 갈라 둘
     까닭이 없다. 갈라 두면 헤더와 본문의 왼쪽 끝만 어긋나 보인다. */
  :root { --edge: 18px; }

  .wrap { padding: 0 18px; }

  /* 목록 화면 — 레퍼런스가 이 폭에서 쓰는 값으로 한 단씩 내린다.
     막대 70 → 58 · 글칸 118 → 72 · 사진 236 → 120 · 한 줄 36 → 20. */
  .hk-page { padding: 10px 0 70px; }
  .hk-wrap { padding: 0 10px; }
  .hk-titlebar { height: 58px; padding: 12px 20px; gap: 12px; }
  .hk-title { font-size: 24px; }
  .hk-tabs { padding-right: 12px; padding-left: 12px; }
  .hk-tabs li { padding: 0 14px; }
  .hk-tabs a { font-size: 13px; }

  .hk-panel { padding: 24px 16px 32px; }
  .hk-panel--side { padding: 24px 16px 32px; }
  .hk-panel-title { font-size: 18px; }

  /* 사설 상자 — 안쪽 여백을 줄이고, 머리기사는 사진을 글 위로 올린다. */
  .hk-editorial { padding: 20px; }
  .hk-quote { top: -15px; right: 14px; }
  .hk-quote svg { width: 48px; height: 30px; }
  .hk-lead { flex-direction: column-reverse; gap: 14px; }
  .hk-lead-thumb { width: 100%; }
  .hk-lead-title { font-size: 19px; }
  .hk-lead-summary { margin-top: 8px; font-size: 14px; }

  /* 남은 기사는 한 칸에 하나씩 — 세로줄 대신 가로줄로 나눈다. */
  .hk-editorial-rest { margin-top: 20px; padding-top: 20px; }
  .hk-editorial-rest > li { flex: 1 1 100%; padding: 0; }
  .hk-editorial-rest > li + li {
    margin-top: 16px;
    padding-top: 16px;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  /*
   * 홈 맨 위 세 칸 — 이 폭에서는 나란히 세울 자리가 없어 셋을 위아래로 쌓는다.
   * 세로로 서면 키를 맞출 이유도 없어진다 — 남는 자리를 나눠 갖던 줄들을
   * 제 키대로 세워야 상자 안이 헐렁해지지 않는다.
   */
  .home-trio { flex-direction: column; }
  .home-trio__side { flex: none; padding: 24px 16px 32px; }
  .home-briefs { padding: 18px; }
  .home-brief-list > li,
  .home-trio__side .hk-col-list > li { flex: none; }
  .home-lead__title { margin-top: 14px; font-size: 21px; }
  .home-lead__summary { margin-top: 10px; font-size: 15px; }

  .hk-col-list { margin-top: 16px; }
  .hk-col-name { font-size: 16px; }
  .hk-col-photo { width: 56px; height: 56px; }
  .hk-col-photo--empty { font-size: 21px; }

  /* 심층 리포트는 한 줄에 한 건 — 위아래 두 묶음도 한 덩이로 이어 붙는다. */
  .hk-deep-grid,
  .hk-deep-row { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px; }
  .hk-deep-row { padding-top: 20px; }

  .hk-pick-thumb { max-width: none; }

  .hk-list { padding: 0; }
  .hk-list > li { padding: 20px 0; }
  .hk-item { gap: 16px; }
  .hk-item-body { min-height: 72px; }
  .hk-item-title { font-size: 18px; }
  .hk-item-summary { margin-top: 8px; }
  .hk-item-meta { gap: 0 8px; margin-top: 8px; }
  .hk-item-thumb { width: 120px; }

  .hk-side-title { font-size: 16px; }
  .hk-rank-title { font-size: 16px; }
  .hk-rank-no { font-size: 18px; }
  .hk-rank-thumb { width: 100px; }

  .hk-pager-wrap { padding: 20px 0 0; }

  .header-top-inner { padding: 16px var(--edge) 14px; }

  .brand-logo { height: 39px; }

  .header-nav-inner { gap: 24px; padding-bottom: 4px; }

  .card-grid { grid-template-columns: 1fr; gap: 30px; }

  .row-item { grid-template-columns: 132px minmax(0, 1fr); gap: 14px; padding: 18px 0; }
  .row-title { font-size: 17px; }
  .row-summary { display: none; }

  .news-section { padding: 48px 0 52px; }
  .news-section--tinted { padding: 44px 0 48px; }
  .news-heading { padding-bottom: 32px; font-size: 24px; }
  .news-grid { grid-template-columns: 1fr; gap: 34px; }
  .news-card__title { margin-top: 18px; font-size: 18px; line-height: 27px; }
  .news-picks { grid-template-columns: 1fr; margin-top: 34px; }
  .news-rail { gap: 20px; }
  .news-tile { flex-basis: 78vw; }
  .news-tile__body { min-height: 0; padding: 24px 24px 30px; }

  /* 자리는 그대로 카드 한가운데다 — 좁아진 만큼 단추만 작게 줄인다. */
  .news-rail-arrow {
    width: 44px;
    height: 44px;
  }

  .news-rail-arrow--prev { left: 4px; }
  .news-rail-arrow--next { right: 4px; }
  .news-tile__title { font-size: 18px; line-height: 27px; }
  .news-tile__summary { font-size: 15px; line-height: 24px; }

  /*
   * 숏폼·영상 — 여기서는 상자 둘을 위아래로 놓는다. 반씩 가르면 상자가
   * 한 칸에 170 도 안 되어 세로 카드 석 장이 손톱만해진다.
   * 위아래로 놓으면 카드가 상자 안폭을 석 장으로 나눠 가지므로
   * 세로 비율(9:16)과 카드 석 장은 그대로 산다.
   */
  .video-section { padding-top: 48px; }
  .video-duo { flex-direction: column; }
  .video-panel { flex: none; padding: 16px; }
  .video-shorts { gap: 8px; }
  .video-card__body { margin-top: 10px; }
  .video-short__title { font-size: 14px; }
  .video-feature__title { font-size: 18px; line-height: 27px; }
  .video-play { width: 48px; height: 48px; }
  .video-play svg { width: 20px; height: 20px; }
  .video-thumb--short .video-play { width: 32px; height: 32px; }
  .video-thumb--short .video-play svg { width: 14px; height: 14px; }

  .section-block { margin-top: 38px; }
  .layout-two-column { margin-top: 34px; }

  /* 좁은 화면에서도 같은 구조 — 폭만 화면 기준으로 줄인다. */
  .country-hero {
    --card-active: 84vw;
    --card-idle: 84vw;
    --card-gap: 20px;
    --card-height: 235px;
    padding-bottom: 26px;
  }

  .country-card { border-radius: 28px; }

  /* 카드 왼쪽 끝을 좁아진 본문 폭에 다시 맞춘다. */
  .country-viewport { padding: 0 18px; }

  .hero-controls { gap: 10px; padding-top: 18px; }
  .hero-dots { gap: 8px; margin: 0 4px; }
  .hero-dot { width: 7px; height: 7px; }
  .hero-dot.is-active { width: 22px; }
  .country-card__body { right: 18px; bottom: 18px; left: 18px; }
  .country-card__lead { font-size: 13px; }
  .country-card__name { font-size: 18px; }
  .country-card.is-active .country-card__name { font-size: 24px; }

  /* 한 줄에 셋 — 카드 여백을 줄이고 얼굴도 한 단 내린다(120 → 76). */
  .columnist-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .columnist a { gap: 10px; padding: 18px 6px 16px; border-radius: 16px; }
  .columnist-photo { width: 76px; height: 76px; font-size: 26px; }
  .columnist-name { font-size: 15px; }
  .columnist-position { font-size: 12px; }
  .spotlight { padding-top: 32px; margin-top: 32px; }
  .spotlight--columnist { padding-top: 32px; margin-top: 32px; }
  .spotlight--top { padding-top: 0; margin-top: 34px; border-top: 0; }
  .spotlight-grid { grid-template-columns: 1fr; gap: 28px; }
  .spotlight-title { font-size: 24px; }

  .page-title { font-size: 27px; }

  /* 화면이 좁아진 만큼 글자와 사이 간격을 한 단씩 줄인다 — 짜임은 그대로다. */
  .article-head { padding-bottom: 18px; margin-bottom: 32px; }
  .article-head .card-meta { gap: 8px; margin-bottom: 4px; line-height: 24px; }
  .article-head .tag-country { font-size: 16px; }
  .article-head .tag-category { font-size: 14px; }
  .article-head .tag-type { font-size: 13px; }
  .article-title { font-size: 28px; line-height: 38px; }
  .article-subtitle { font-size: 16px; line-height: 1.55; }
  .article-meta { margin-top: 18px; font-size: 13px; }
  .article-figure { margin-bottom: 28px; }
  .article-figure figcaption { margin-top: 10px; font-size: 13px; line-height: 22px; }
  .article-summary { margin-bottom: 28px; font-size: 18px; }
  /* 16 × 1.6 = 25.6 — 배수는 위에서 한 번만 정한다.
     문단 사이는 18 로 한 단 좁힌다. 주황 강조줄·체크줄도 이 값을 쓰므로
     여기 한 줄이면 셋이 함께 좁아진다. */
  .article-content { margin-bottom: 44px; font-size: 16px; --para-gap: 18px; }
  .article-content h2 { margin-top: 40px; font-size: 21px; }
  .article-content h3 { margin-top: 30px; font-size: 18px; }

  /* 본문 상자 — 좌우 여백을 줄여 글줄이 너무 좁아지지 않게. */
  .article-photo { margin: 28px 0; }
  .article-content img { margin: 28px 0; }
  .article-note { padding: 18px 18px; margin: 22px 0; }
  .article-content .article-point { margin: 26px 0; }
  .article-comment { padding: 22px 20px; margin: 34px 0; }
  .article-content .article-comment li { gap: 8px; }
  .article-content .article-comment li::before { width: 19px; height: 19px; margin-top: calc((1.6em - 19px) / 2); }
  .article-comment-title { margin-bottom: 14px; font-size: 19px; }

  /* 세로로 세우면 둥근 자리와 이름이 위아래로 놓인다 — 원을 한 단 줄이고
     왼쪽 끝을 맞춰 이름·경력·소개가 같은 선에서 시작하게 둔다. */
  .author-box {
    flex-direction: column;
    gap: 18px;
    padding: 24px 22px;
    margin-top: 40px;
    border-radius: 22px;
    font-size: 15px;
  }

  .author-box-avatar { width: 62px; height: 62px; font-size: 25px; }
  .article-content .author-box-name { font-size: 21px; }
  .article-content .author-box-position,
  .article-content .author-box-intro { font-size: 15px; }

  .author-profile { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* 로고와 국가를 한 줄에 두기엔 좁다 — 국가를 로고 아래로 내린다. */
  .footer-inner { padding: 38px 18px 42px; }
  .footer-brand { display: block; }
  .footer-logo { height: 33px; margin: 0 0 22px; }
  .footer-menu { gap: 18px 22px; font-size: 16px; }
  .footer-info { margin-top: 26px; font-size: 14px; line-height: 23px; }
  .footer-right { margin-top: 26px; padding-top: 22px; }
}

/* ── 검색 — 좁은 화면 ──────────────────────────────────────────
 *
 * 앞쪽 규칙(헤더·검색)보다 뒤에 와야 이긴다. 그래서 위의 두 묶음에
 * 끼워 넣지 않고 파일 끝에 따로 둔다.
 * ────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  /*
   * 이 폭에서 헤더는 한 칸으로 접히고 메뉴가 로고 아래로 내려간다.
   * 그대로 두면 검색 단추가 메뉴 아래 셋째 줄에 혼자 서므로,
   * 로고와 같은 줄 오른쪽 끝에 세우고 메뉴만 아래 줄을 통째로 쓰게 한다.
   */
  .header-top-inner { grid-template-columns: minmax(0, 1fr) auto; }
  .header-top-inner .brand { grid-row: 1; grid-column: 1; }
  .header-top-inner .header-tools { grid-row: 1; grid-column: 2; }
  .header-top-inner .header-nav { grid-row: 2; grid-column: 1 / -1; }

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

@media (max-width: 720px) {
  /* 라벨 폭을 따로 둘 자리가 없다 — 칩 위로 올린다. */
  .filter-row { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 0; }
  .filter-label { padding-top: 0; }

  .search-line { height: 48px; padding-left: 16px; }
  .search-line-input { font-size: 16px; }
  .search-line-submit { padding: 0 16px; }

  .search-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .search-card-title { font-size: 15px; }
  .search-pager { gap: 4px; }
}

/* ──────────────────────────────────────────────────────────────
 * 디자인 시스템 — 글자 9단계 · 모서리 · 메인 섹션 간격 · 모바일 헤더
 *
 * 화면마다 제각각이던 값(글자 크기 16종, 굵기 5종, 행간 15종,
 * 모서리 4~34px)을 토큰으로 묶었다. 위쪽 규칙을 하나하나 고치는 대신
 * 파일 끝에서 덮어쓰므로, 이 구간이 항상 마지막에 와야 한다.
 *
 * 글자 단계                데스크톱 / ≤1024 / ≤720   굵기  행간
 *   display  기사 제목         42 / 34 / 28          700   1.3
 *   h1       섹션·페이지 제목   32 / 28 / 24          700   1.3
 *   h2       메인 머리기사      28 / 26 / 22          700   1.4
 *   h3       박스 제목·소제목   24 / 22 / 20          700   1.4
 *   h4       큰 카드 제목       20 / 19 / 18          600   1.4  (블록 제목은 700)
 *   title    작은 카드·목록     17 / 17 / 16          600   1.5
 *   body     기사 본문          18 / 17 / 16          400   1.6
 *   sub      요약·보조 본문     15 / 15 / 14          400   1.6
 *   caption  라벨·날짜·태그     13 / 13 / 13          400·600 1.5
 * ────────────────────────────────────────────────────────────── */

:root{
  /* 라운딩 · 섹션 간격 */
  --radius: 20px;
  --section-gap: 144px;

  /* 글자 크기 9단계                데스크톱 */
  --fs-display: 42px;  /* 기사 상세 제목 */
  --fs-h1: 32px;       /* 섹션 제목 · 페이지 제목 */
  --fs-h2: 28px;       /* 메인 대표기사 제목 */
  --fs-h3: 24px;       /* 박스 제목(주요기사·대표칼럼·숏폼·영상) · 기사 소제목 */
  --fs-h4: 20px;       /* 큰 카드 기사 제목 · 사이드 제목 */
  --fs-title: 17px;    /* 작은 카드·목록 기사 제목 */
  --fs-body: 18px;     /* 기사 본문 */
  --fs-sub: 15px;      /* 요약문 · 보조 본문 */
  --fs-caption: 13px;  /* 라벨 · 날짜 · 태그 */

  /* 행간 5종 */
  --lh-tight: 1.3;     /* display · h1 */
  --lh-heading: 1.4;   /* h2 · h3 · h4 */
  --lh-title: 1.5;     /* title · caption */
  --lh-body: 1.6;      /* body · sub */

  /* 굵기 3종 */
  --fw-regular: 400;   /* 본문 · 요약 · 날짜 */
  --fw-semibold: 600;  /* 기사 제목 · 라벨 */
  --fw-bold: 700;      /* 헤딩 */

  --ls: -0.02em;       /* 자간 1종 */
}
@media (max-width: 1024px){
  :root{
    --fs-display: 34px; --fs-h1: 28px; --fs-h2: 26px; --fs-h3: 22px;
    --fs-h4: 19px; --fs-title: 17px; --fs-body: 17px; --fs-sub: 15px;
  }
}
@media (max-width: 720px){
  :root{
    --section-gap: 88px;
    --fs-display: 28px; --fs-h1: 24px; --fs-h2: 22px; --fs-h3: 20px;
    --fs-h4: 18px; --fs-title: 16px; --fs-body: 16px; --fs-sub: 14px;
  }
}

/* ── 6. 폰트 체계 ───────────────────────────────────────────────────────── */
/* 자간을 em 으로 요소마다 다시 계산한다(px 로 상속되어 크기마다 비율이 달라지던 문제) */
body *{ letter-spacing: var(--ls); }
.news-card__title, .news-tile__title, .video-short__title, .video-feature__title,
.article-title, .country-card__name{ letter-spacing: var(--ls); } /* -0.03em · -0.024em 로 따로 적힌 곳 */

/* Display — 기사 상세 제목 */
.article-title{
  font-size: var(--fs-display); font-weight: var(--fw-bold); line-height: var(--lh-tight);
}

/* H1 — 섹션 제목 · 페이지 제목 */
.spotlight-title, .news-heading, .hk-title, .page-title,
.country-card.is-active .country-card__name{
  font-size: var(--fs-h1); font-weight: var(--fw-bold); line-height: var(--lh-tight);
}

/* H2 — 메인 대표기사 제목 */
.home-lead__title, .home-lead__title a{
  font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-heading);
}

/* H3 — 박스 제목 · 기사 소제목 · 필자 이름 */
.hk-panel-title, .home-trio .hk-panel-title, .video-section .hk-panel-title,
.article-content h2, .article-content .article-comment-title, .article-comment-title,
.article-content .author-box-name, .country-card__name{
  font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading);
}

/* H4 헤딩 — 사이드·블록 제목, 기사 머리 국가 태그, 순위 숫자 */
.section-title, .sidebar-title, .hk-side-title, .article-head .tag-country, .hk-rank-no, .nav-link{
  font-size: var(--fs-h4); font-weight: var(--fw-bold); line-height: var(--lh-heading);
}

/* H4 기사 제목 — 큰 카드 */
.news-card__title, .news-pick__title, .news-tile__title, .video-feature__title,
.card-title, .card-title a, .row-title, .hk-lead-title, .hk-lead-title a,
.hk-item-title, .hk-item-title a, .article-summary, .article-content h3{
  font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-heading);
}
.article-subtitle{ font-size: var(--fs-h4); font-weight: var(--fw-regular); line-height: var(--lh-body); }

/* Title — 작은 카드·목록 기사 제목 */
.hk-brief-title, .hk-brief-title a, .home-briefs .hk-brief-title,
.hk-col-title, .home-trio__side .hk-col-title, .home-trio .hk-col-title,
.hk-deep-title, .hk-deep-title a, .hk-pick-title, .hk-rank-title, .hk-rank-title a,
.video-short__title, .columnist-name, .hk-col-name, .author-name,
.search-card-title, .rank-item, .rank-item a, .rank-number, .link-title, .footer-menu{
  font-size: var(--fs-title); font-weight: var(--fw-semibold); line-height: var(--lh-title);
}
.rank-number{ font-weight: var(--fw-bold); }

/* Body — 기사 본문 */
.article-content{ font-size: var(--fs-body); font-weight: var(--fw-regular); line-height: var(--lh-body); }
.article-content p, .article-content li{ line-height: var(--lh-body); }

/* Sub — 요약문 · 보조 본문 */
.home-lead__summary, .news-tile__summary, .hk-lead-summary, .hk-rest-summary,
.card-summary, .hk-item-summary, .row-summary, .page-desc, .search-empty,
.author-box, .article-content .author-box-intro, .article-content .author-box-position, .author-bio, .footer-info,
.byline-name, .byline-position, .article-head .tag-category, .article-head .tag-type,
.article-content .article-disclaimer, .site-notice{
  font-size: var(--fs-sub); font-weight: var(--fw-regular); line-height: var(--lh-body);
}
.article-content .author-box-position, .byline-name, .site-notice{ font-weight: var(--fw-semibold); }

/* Caption — 라벨 · 날짜 · 태그 */
.hk-kicker, .hk-kicker-type, .home-lead__kicker, .country-card__lead,
.news-pick__tag, .video-tag, .section-more, .tag-country, .tag-category, .tag-type,
.card-meta, .card-date, .row-meta, .link-type, .news-pick__meta, .hk-item-meta,
.byline-date, .byline-bio, .article-meta, .article-figure figcaption, .article-photo figcaption,
.columnist-position, .author-position, .author-email, .breadcrumb, .chip, .tab, .hk-tabs a,
.page-link, .search-count, .search-pager a, .search-pager span, .hk-pager-num{
  font-size: var(--fs-caption); line-height: var(--lh-title);
}
.hk-kicker-type, .card-meta, .card-date, .row-meta, .news-pick__meta, .hk-item-meta,
.byline-date, .byline-bio, .article-meta, .article-figure figcaption, .article-photo figcaption,
.columnist-position, .author-position, .author-email, .breadcrumb, .chip, .tab, .hk-tabs a,
.page-link, .search-count, .search-pager a, .search-pager span, .hk-pager-num,
.tag-category, .tag-type{ font-weight: var(--fw-regular); }
.hk-kicker, .home-lead__kicker, .country-card__lead, .news-pick__tag, .video-tag,
.section-more, .tag-country, .link-type{ font-weight: var(--fw-semibold); }
.hk-kicker .hk-kicker-type{ font-weight: var(--fw-regular); }

/* 굵기 3종 밖의 값 정리 */
.hk-tabs a.is-active, .tab.is-active, .page-link.is-current, .search-pager .is-current,
.filter-label, .search-active-label, .search-active-reset, .search-line-submit{ font-weight: var(--fw-bold); }

/* ── 4. 라운딩 통일 ─────────────────────────────────────────────────────── */
.hk-panel, .hk-titlebar, .hk-wrap .ad-slot, .hk-editorial,
.home-briefs, .home-brief__thumb, .home-lead__thumb,
.hk-lead-thumb, .hk-brief-thumb, .hk-deep-thumb, .hk-item-thumb, .hk-pick-thumb, .hk-rank-thumb,
.country-card, .columnist a, .card-thumb, .row-thumb,
.news-card__thumb, .news-pick, .news-tile a, .video-panel, .video-thumb,
.article-figure img, .article-content img, .article-note, .article-comment,
.author-box, .external-links, .site-notice{ border-radius: var(--radius); }

.home-brief__thumb, .home-lead__thumb, .hk-lead-thumb, .hk-brief-thumb, .hk-deep-thumb,
.hk-item-thumb, .hk-pick-thumb, .hk-rank-thumb, .card-thumb, .row-thumb,
.news-card__thumb, .news-tile a, .video-thumb, .country-card{ overflow: hidden; }
.home-brief__thumb img, .home-lead__thumb img, .hk-lead-thumb img, .hk-brief-thumb img,
.hk-deep-thumb img, .hk-item-thumb img, .hk-pick-thumb img, .hk-rank-thumb img,
.card-thumb img, .row-thumb img, .news-card__thumb img, .news-tile img,
.video-thumb img, .country-card img{ border-radius: inherit; }

/* ── 5. 숏폼 / 영상 박스 — 24px 제목에 맞춘 안쪽 여백 ────────────────── */
.video-panel{ padding: 32px; }
.video-panel .hk-panel-head{ min-height: 34px; }
.video-panel .hk-panel-arrow{ margin-left: 6px; }
.video-shorts, .video-feature{ margin-top: 20px; }
@media (max-width: 1024px){
  .video-panel{ padding: 24px; }
}

/* ── 3. 메인홈 섹션 사이 여백 ───────────────────────────────────────────── */
.home-open{ padding-top: 56px; padding-bottom: 56px; }
.spotlight--columnist.spotlight--top{ margin-top: calc(var(--section-gap) - 56px); }
.country-hero{ padding-top: var(--section-gap); padding-bottom: 48px; }
.country-hero + .news-section{ padding-top: calc(var(--section-gap) - 48px); }

/* ── 1. 모바일 (≤720px) ─────────────────────────────────────────────────── */
.header-menu-toggle{ display: none; }

@media (max-width: 720px){
  /* 헤더: 한 줄(로고 · 검색 · 메뉴 단추). 국가 메뉴는 단추를 눌렀을 때만 아래로 펼친다 — js/site.js */
  .site-header{ position: relative; z-index: 50; }
  .header-top-inner{
    grid-template-columns: minmax(0,1fr) auto;
    gap: 0; height: 60px; padding: 0 var(--edge); border-top-width: 4px;
  }
  .brand-logo{ height: 28px; }
  .header-tools{ gap: 2px; }
  .header-search-toggle{ width: 40px; height: 40px; }

  .header-menu-toggle{
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; margin-right: -8px; padding: 0;
    color: var(--ink); background: none; border: 0; cursor: pointer;
  }
  .header-menu-toggle span{ position: relative; display: block; width: 20px; height: 2px; background: currentColor; transition: background .2s; }
  .header-menu-toggle span::before,
  .header-menu-toggle span::after{ content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform .2s; }
  .header-menu-toggle span::before{ top: -6px; }
  .header-menu-toggle span::after{ top: 6px; }
  .site-header.is-menu-open .header-menu-toggle span{ background: transparent; }
  .site-header.is-menu-open .header-menu-toggle span::before{ transform: translateY(6px) rotate(45deg); }
  .site-header.is-menu-open .header-menu-toggle span::after{ transform: translateY(-6px) rotate(-45deg); }

  .header-top-inner .header-nav{
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
  }
  .site-header.is-menu-open .header-nav{ display: block; }
  .header-nav-inner{ flex-direction: column; gap: 0; padding: 4px var(--edge) 8px; overflow: visible; }
  .nav-link{ display: block; padding: 15px 0; font-size: var(--fs-title); border-bottom: 1px solid var(--line); }
  .nav-link:last-child{ border-bottom: 0; }
  .nav-link::after{ display: none; }

  /* 메인 상단 */
  .home-open{ padding-top: 16px; padding-bottom: 40px; }
  .home-trio__main{ padding: 20px 16px 28px; }

  /* 섹션 간격 */
  .spotlight--columnist.spotlight--top{ margin-top: calc(var(--section-gap) - 40px); }
  .country-hero{ padding-bottom: 32px; }
  .country-hero + .news-section{ padding-top: calc(var(--section-gap) - 32px); }

  /* 숏폼·영상 박스 */
  .video-panel{ padding: 20px; }
  .video-panel .hk-panel-head{ min-height: 28px; }
  .video-shorts, .video-feature{ margin-top: 16px; }
  .video-short__title{ font-size: var(--fs-sub); } /* 카드 폭 100px 남짓이라 한 단 내림 */

  /* 가로 넘침 방지 */
  html, body{ overflow-x: clip; }
  .article-content img, .article-content video, .article-content iframe{ max-width: 100%; }
}

/* ──────────────────────────────────────────────────────────────
 * 홈 첫 화면 손질 (2026-09-28)
 *   · 왼쪽 칸이 기사 대신 플랫폼 바로가기로 바뀌었다(.platform-list)
 *   · 대표 칼럼 줄은 한 단 키운다 — 얼굴 옆 글이 작아 읽기 어려웠다
 *   · 국가 카드 글자도 한 단 키운다 — 사진 위 흰 글씨라 더 커야 읽힌다
 *   · 칼럼니스트가 맨 아래로 내려가, 회색 띠 다음이 곧바로 국가 카드다
 * ────────────────────────────────────────────────────────────── */

/* 왼쪽 플랫폼 바로가기 — 줄 짜임은 대표 칼럼과 한 벌, 화살표만 포인트 색으로 */
.platform-list .hk-col-title{ display: flex; align-items: center; gap: 6px; }
.platform-list .platform-arrow{ color: var(--accent); font-weight: var(--fw-bold); }
.platform-list .hk-col-row:hover .platform-arrow{ transform: translate(1px, -1px); }

/* 대표 칼럼 · 플랫폼 바로가기 줄 — 제목 17 → 20, 말머리 13 → 16 */
.home-trio__side .hk-col-title,
.home-trio .hk-col-title{ font-size: 20px; }
.home-trio__side .hk-col-row .hk-kicker{ font-size: 16px; }

/* 국가 카드 — 말머리 13 → 17, 이름 24 → 28(고른 카드 32 → 36), 화살표 20 → 24 */
.country-card__lead{ font-size: 17px; }
.country-card__name{ font-size: 28px; }
.country-card.is-active .country-card__name{ font-size: 36px; }
.country-card__arrow{ font-size: 24px; }

/* 회색 띠(.home-open) 바로 다음이 국가 카드가 되었다 — 띠 아래 여백 56 을 빼고 잰다 */
.home-open + .country-hero{ padding-top: calc(var(--section-gap) - 56px); }

@media (max-width: 1024px){
  .home-trio__side .hk-col-title,
  .home-trio .hk-col-title{ font-size: 19px; }
  .country-card__lead{ font-size: 16px; }
  .country-card__name{ font-size: 24px; }
  .country-card.is-active .country-card__name{ font-size: 32px; }
  .country-card__arrow{ font-size: 22px; }
}

@media (max-width: 720px){
  .home-trio__side .hk-col-title,
  .home-trio .hk-col-title{ font-size: 19px; }
  .home-trio__side .hk-col-row .hk-kicker{ font-size: 15px; }
  .country-card__lead{ font-size: 15px; }
  .country-card__name{ font-size: 22px; }
  .country-card.is-active .country-card__name{ font-size: 28px; }
  .country-card__arrow{ font-size: 20px; }
  .home-open + .country-hero{ padding-top: calc(var(--section-gap) - 40px); }
}

/* ──────────────────────────────────────────────────────────────
 * 홈 손질 2차 (2026-09-28) — 화면에 표시한 주석 반영
 *   · 왼쪽 플랫폼 칸의 첫 줄을 사진 카드로 (기사 칸이던 시절과 같은 크기)
 *   · 두 줄짜리 제목이 "세 / 가지" 처럼 갈라지지 않게
 *   · 국가 카드: 글자 한 단 더, 사진을 둥근 모서리에 딱 맞게, 높이 +5%
 *   · 모바일: 카드가 화면 가로 안에 온전히 들어오게 (최신·인기 2열, 배너 1장)
 * ────────────────────────────────────────────────────────────── */

/* 1. 왼쪽 플랫폼 바로가기 */
.platform-briefs .hk-brief-title a{ display: inline-flex; align-items: center; gap: 4px; }
.platform-briefs .platform-arrow{ color: var(--accent); font-weight: var(--fw-bold); }
.home-trio .platform-briefs .hk-brief-title{ font-size: 20px; }
.home-trio .platform-briefs .hk-kicker{ font-size: 16px; }

/* 2. 제목 줄바꿈 — 낱말이 아니라 뜻 단위로 갈리게 */
.hk-col-title, .hk-brief-title, .home-lead__title{ text-wrap: balance; }

/* 3. 국가 카드 */
.country-hero{ --card-height: 336px; }
.country-card__link,
.country-card__link::after,
.country-card img{ border-radius: inherit; }
.country-card__lead{ font-size: 19px; }
.country-card__name{ font-size: 32px; }
.country-card.is-active .country-card__name{ font-size: 40px; }
.country-card__arrow{ font-size: 28px; }

/* 4. 메인 배너 요약 +2 */
.home-lead__summary{ font-size: 17px; }

@media (max-width: 1024px){
  /* 인기 기사 — 옆으로 끌던 줄을 격자로 바꾼다. 태블릿·가로 화면에서 세 장이 한눈에 들어온다. */
  .news-rail-wrap{ overflow: visible; }
  .news-rail{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; overflow: visible; }
  .news-tile{ flex: none; }
  .news-tile a{ height: 100%; }
  .news-tile__body{ min-height: 0; padding: 18px 18px 22px; }
  .news-rail-arrow{ display: none; }
  .news-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .country-hero{ --card-height: 300px; }
  .country-card__lead{ font-size: 18px; }
  .country-card__name{ font-size: 28px; }
  .country-card.is-active .country-card__name{ font-size: 36px; }
  .country-card__arrow{ font-size: 26px; }
  .home-lead__summary{ font-size: 16px; }
}

@media (max-width: 720px){
  /* 국가 카드 한 장이 화면 폭에 온전히 들어온다 — 옆 카드가 걸치지 않는다 */
  .country-hero{
    --card-active: calc(100vw - 36px);
    --card-idle: calc(100vw - 36px);
    --card-gap: 12px;
    --card-height: 252px;
  }
  .country-card__lead{ font-size: 16px; }
  .country-card__name{ font-size: 24px; }
  .country-card.is-active .country-card__name{ font-size: 30px; }
  .country-card__arrow{ font-size: 22px; }
  .country-card__body{ right: 16px; bottom: 16px; left: 16px; }
  .country-card.is-active .country-card__body{ bottom: 18px; left: 18px; }

  .home-lead__summary{ font-size: 16px; }
  .home-trio .platform-briefs .hk-brief-title{ font-size: 18px; }
  .home-trio .platform-briefs .hk-kicker{ font-size: 15px; }

  /* 최신 기사 — 두 장씩, 화면 가로에 딱 맞게 */
  .news-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
  .news-card__thumb{ border-radius: 14px; }
  .news-card__title{ margin-top: 10px; font-size: 15px; line-height: 1.45; }
  .news-picks{ grid-template-columns: minmax(0, 1fr); margin-top: 26px; }

  /* 인기 기사 — 옆으로 끌던 줄을 두 칸 격자로 바꾼다 */
  .news-rail-wrap{ overflow: visible; }
  .news-rail{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; overflow: visible; }
  .news-tile{ flex: none; }
  .news-tile a{ height: 100%; border-radius: 14px; }
  .news-tile__body{ min-height: 0; padding: 14px 14px 18px; }
  .news-tile__title{ font-size: 15px; line-height: 1.45; }
  .news-tile__summary{ display: none; }
  .news-rail-arrow{ display: none; }
}

/* 가로로 눕힌 화면 — 키가 낮으므로 배너와 위아래 여백을 줄여 한 화면에 담는다 */
@media (orientation: landscape) and (max-height: 520px){
  /* 카드 한 장이 화면 폭을 채운다 — 옆 카드가 걸쳐 잘리지 않게 */
  .country-hero{
    --card-active: calc(100vw - 48px);
    --card-idle: calc(100vw - 48px);
    --card-gap: 14px;
    --card-height: 200px;
    padding-top: 72px;
    padding-bottom: 28px;
  }
  .home-open{ padding-top: 24px; padding-bottom: 32px; }
  .home-open + .country-hero{ padding-top: 72px; }
}

/* ── 홈 잔손질 (2026-09-28) ──────────────────────────────────
 *   · 칼럼니스트가 맨 아래로 내려가면서 그 위 1px 선은 뜻을 잃었다 — 지운다
 *   · 플랫폼 바로가기 화살표는 포인트 색이 아니라 검정 85% 로 (글과 한 덩이로 읽히게)
 *   · 두 곳(플랫폼 칸 사진 · 국가 카드)의 사진은 상자를 꽉 채운다
 * ────────────────────────────────────────────────────────── */
.spotlight--columnist{ border-top: 0; }
.platform-briefs .platform-arrow{ color: rgba(0, 0, 0, 0.85); }
.platform-briefs .hk-brief-title a:hover .platform-arrow{ color: var(--accent); }
.platform-briefs .home-brief__thumb{ overflow: hidden; }
.platform-briefs .home-brief__thumb img{ width: 100%; height: 100%; object-fit: cover; }

/* ──────────────────────────────────────────────────────────────
 * 화면 주석 반영 3차 (2026-09-28) — PC · 모바일 함께
 *
 *  1 홈 플랫폼 바로가기  화살표를 사진 오른쪽 끝선에, 글씨는 대표 칼럼과 한 벌
 *  2 국가 배너           재생 단추를 뺐다(home.php) · 손으로 끌어 넘기기를 터치까지
 *  3 홈 모바일           오른쪽 추천 칸 키 낮춤 · 맨 위 머리띠 키 낮춤
 *  4 국가 화면 분류 탭   고른 분류 뒤에 서던 파란 칠 제거 · PC 글씨 +2
 *  5 국가 화면 머리기사  제목 +4(석 줄까지) · 요약 +3
 *  6 국가 화면 심층 리포트 모바일 두 칸 · 아래 석 줄은 모바일에서 내림
 *  7 기사 상세          필자 사진 확대(모바일은 축소·왼쪽) · 관련기사 날짜 제거
 *  8 기자 화면          작성 기사 목록을 둥근 상자 하나로
 *
 * 전체 기사 쪽수(한 쪽 다섯 건)는 글이 아니라 셈이라 Controllers/BaseController
 * ::pagingData 에 있다.
 * ────────────────────────────────────────────────────────────── */

/* ── 1. 플랫폼 바로가기 ─────────────────────────────────────── */
/*
 * 화살표를 글자 뒤에 붙여 두면 나라 이름 길이만큼 줄마다 자리가 달라진다.
 * 줄 전체를 펴고 화살표만 끝으로 밀어 세 줄의 화살표가 한 세로줄에 선다 —
 * 그 선이 곧 윗 사진의 오른쪽 끝이다(사진도 이 칸의 가로를 다 쓴다).
 */
.platform-briefs .hk-brief-title a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}
.platform-briefs .platform-arrow{ flex: none; }

/* 글씨는 오른쪽 대표 칼럼 줄(.hk-col-title)과 같은 값·같은 굵기로 맞춘다. */
.home-trio .platform-briefs .hk-brief-title{
  font-size: 20px;
  font-weight: var(--fw-semibold);
  line-height: var(--lh-title);
}
.home-trio .platform-briefs .hk-kicker{ font-size: 16px; }

/* ── 2. 국가 배너 — 손으로 끌어 넘기기 ─────────────────────── */
/*
 * 끄는 동작은 js/site.js 가 이미 받고 있었는데, 터치 화면에서는 브라우저가
 * 가로 움직임을 먼저 가져가 스크롤로 써 버려 배너가 따라오지 않았다.
 * 세로만 브라우저에 넘기면(pan-y) 가로는 스크립트 몫이 된다.
 */
.country-viewport{ touch-action: pan-y; }

/* ── 4. 국가 화면 분류 탭 ───────────────────────────────────── */
/*
 * 분류를 누르면 글자가 잡히며 파란 칠이 깔렸다(브라우저 기본 선택 색).
 * 탭은 읽어서 복사하는 글이 아니라 누르는 자리이므로 선택 자체를 끈다.
 * 키보드로 옮겨 다닐 때의 테두리는 남긴다 — 그래야 지금 어디인지 보인다.
 */
.hk-tabs{ -webkit-tap-highlight-color: transparent; }
.hk-tabs a{
  font-size: 15px;          /* 13 → 15 */
  user-select: none;
  -webkit-user-select: none;
}
.hk-tabs a::selection{ background: transparent; }
.hk-tabs a:focus{ outline: none; }
.hk-tabs a:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── 5. 국가 화면 머리기사 ─────────────────────────────────── */
/*
 * 제목은 뜻 단위로 갈려야 읽힌다 — 낱말 가운데를 끊지 않게 keep-all 을 주고,
 * 두 줄로 자르던 것을 석 줄까지 편다(글자가 커진 만큼 두 줄로는 끝이 잘렸다).
 *
 * 줄바꿈은 글쓴이가 정한다 — 제목에 넣어 둔 줄바꿈(\n)을 그대로 세운다.
 * 지금까지는 HTML 이 그것을 빈칸 하나로 눌러 버려 "…쓰면 안 / 되는 이유" 처럼
 * 한 낱말이 두 줄로 갈렸다. pre-line 이면 "베트남 근로계약서," 다음에서
 * 글쓴이가 끊은 대로 내려가고, keep-all 이 남은 낱말을 통째로 지킨다.
 * 줄을 더 나누려면 관리자에서 제목에 줄바꿈을 한 번 더 넣으면 된다.
 */
.hk-lead-title, .hk-lead-title a{ font-size: 24px; }   /* 20 → 24 */
.hk-lead-title{
  -webkit-line-clamp: 3;
  white-space: pre-line;
  word-break: keep-all;
  text-wrap: pretty;
}
.hk-lead-summary{ font-size: 18px; word-break: keep-all; }  /* 15 → 18 */

/* ── 7. 기사 상세 ───────────────────────────────────────────── */
/*
 * 본문 끝 필자 소개 상자 — 둥근 사진이 76 이라 옆 글 덩이(이름·직함·소개로
 * 124)의 절반을 조금 넘었고, 왼쪽 위에만 작은 동그라미가 떠 있는 꼴이었다.
 * 그 글 덩이 키에 맞춰 키운다.
 */
.author-box-avatar{ width: 120px; height: 120px; font-size: 46px; }

/* 관련기사 — 날짜는 뷰에서 껐다. 카드 사이 아래 여백만 한 단 줄인다. */
.card-grid--related{ gap: 28px var(--gap); }

/* ── 8. 기자 화면 ───────────────────────────────────────────── */
/*
 * 줄마다 긋던 가름선 대신 목록 전체를 둥근 상자 하나로 담는다 —
 * 다른 화면의 패널(.hk-panel)과 같은 모서리 값을 쓴다.
 */
.author-articles .section-head{ padding-bottom: 0; margin-bottom: 16px; border-bottom: 0; }
.author-articles .row-list{
  padding: 10px 28px;
  background: var(--bg-soft);
  border-radius: var(--radius);
}
.author-articles .row-item{ padding: 22px 0; border-bottom: 0; }
.author-articles .row-item:first-child{ padding-top: 22px; }
.author-articles .row-thumb{ background: var(--bg); }

@media (max-width: 1024px){
  .home-trio .platform-briefs .hk-brief-title{ font-size: 19px; }
  .hk-lead-title, .hk-lead-title a{ font-size: 23px; }
  .hk-lead-summary{ font-size: 18px; }
  .author-box-avatar{ width: 104px; height: 104px; font-size: 40px; }
}

@media (max-width: 720px){
  /* 1 · 플랫폼 바로가기 */
  .home-trio .platform-briefs .hk-brief-title{ font-size: 19px; }
  .home-trio .platform-briefs .hk-kicker{ font-size: 15px; }

  /* 3 · 홈 오른쪽 추천 칸 — 안쪽 여백과 글자를 줄여 키를 낮춘다 */
  .news-picks{ gap: 10px; margin-top: 20px; }
  .news-pick{ padding: 14px 16px; border-radius: 14px; }
  .news-pick__tag{ padding-bottom: 6px; font-size: 12px; }
  .news-pick__title{ font-size: 16px; line-height: 1.35; }
  .news-pick__meta{ margin-top: 6px; font-size: 12px; }

  /* 3 · 맨 위 머리띠 — 아래 내용이 한 화면에 더 들어오게 키를 낮춘다 */
  .header-top-inner{ height: 50px; border-top-width: 3px; }
  .brand-logo{ height: 24px; }
  .header-search-toggle{ width: 36px; height: 36px; }
  .header-menu-toggle{ width: 36px; height: 36px; }

  /* 4 · 분류 탭은 좁은 화면에서 열 개가 나란히 서야 하므로 크기는 그대로 */
  .hk-tabs a{ font-size: 13px; }

  /* 5 · 머리기사 */
  .hk-lead-title, .hk-lead-title a{ font-size: 22px; }
  .hk-lead-summary{ font-size: 17px; }

  /* 6 · 심층 리포트 — 두 칸이 화면 가로를 꽉 채운다. 아래 석 줄은 내린다 */
  .hk-deep-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .hk-deep-row{ display: none; }

  /*
   * 7 · 필자 소개 상자 — 좁은 화면에서는 사진을 위로 올려 두었더니 그 아래
   * 글까지 한 덩이가 길어졌다. 사진을 작게 줄여 왼쪽에 세우고, 글은 남은
   * 가로를 끝까지 쓴다(min-width:0 이 있어야 긴 줄이 상자를 밀지 않는다).
   */
  .author-box{ flex-direction: row; align-items: flex-start; gap: 14px; }
  .author-box-avatar{ width: 48px; height: 48px; font-size: 19px; }
  .author-box-body{ flex: 1 1 auto; min-width: 0; }

  /* 7 · 관련기사 — 석 장이 화면 가로에 딱 맞게 */
  .card-grid--related{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .card-grid--related .card-thumb{ border-radius: 12px; }
  .card-grid--related .card-body{ margin-top: 8px; }
  .card-grid--related .card-meta{ display: none; }
  .card-grid--related .card-title{ font-size: 13px; line-height: 1.4; }

  /* 8 · 기자 화면 목록 상자 */
  .author-articles .row-list{ padding: 6px 16px; border-radius: 16px; }
  .author-articles .row-item{ padding: 16px 0; }
  .author-articles .row-item:first-child{ padding-top: 16px; }
}

/* ──────────────────────────────────────────────────────────────
 * 모바일 첫 화면 줄이기 (2026-09-28) — 화면에 붙인 쪽지 반영
 *
 * 폰에서 국가 배너(플랫폼 바로가기)까지 내려가는 길이 너무 멀었다.
 * 맨 위 세 칸(주요기사 머리기사 · 플랫폼 바로가기 · 대표 칼럼)의 키를 줄여
 * 배너가 1505 → 1254 위치로 올라온다(390 폭 기준, 약 250 단축).
 *
 * 값은 모두 좁은 화면에서만 바뀐다. PC 는 손대지 않았다.
 * ────────────────────────────────────────────────────────────── */
@media (max-width: 720px){
  /*
   * 1 · 주요기사 머리기사 카드
   * 사진이 16:9 라 폭이 좁아져도 키가 181 이나 됐다. 2:1 로 눕히면
   * 같은 폭에서 32 가 줄고, 사진은 object-fit 이 가운데를 살려 준다.
   */
  .home-trio__main{ padding: 14px 14px 18px; }
  .home-lead__thumb{ aspect-ratio: 2 / 1; }
  .home-lead__title{ margin-top: 8px; line-height: 1.35; }
  .home-lead__summary{ margin-top: 6px; }

  /*
   * 2 · 플랫폼 바로가기 · 대표 칼럼
   * 사진을 2:1 로 눕히고, 줄 사이 가름선 위아래 여백(16+16)을 10+10 으로,
   * 글자는 19 → 16 · 말머리 15 → 13 으로 한 단 내린다.
   * 두 칸은 같은 짜임이라 글자 크기를 한 벌로 맞춘다.
   */
  .home-trio__side{ padding: 16px 14px 20px; }
  .platform-briefs{ padding: 14px; }
  .platform-briefs .home-brief__thumb{ aspect-ratio: 2 / 1; margin-bottom: 8px; }
  .platform-briefs .home-brief-list > li + li{ margin-top: 10px; padding-top: 10px; }
  .home-trio .platform-briefs .hk-brief-title{ font-size: 16px; line-height: 1.4; }
  .home-trio .platform-briefs .hk-kicker{ font-size: 13px; margin-bottom: 2px; }
  .home-trio__side .hk-col-title,
  .home-trio .hk-col-title{ font-size: 16px; line-height: 1.4; }
  .home-trio__side .hk-col-row .hk-kicker{ font-size: 13px; }

  /* 3 · 국가 배너 — 카드 252 → 200, 위아래 여백과 단추도 한 단 */
  .country-hero{ --card-height: 200px; padding-bottom: 20px; }
  .home-open + .country-hero{ padding-top: 28px; }
  .hero-controls{ padding-top: 12px; }
  .hero-arrow{ width: 40px; height: 40px; }

  /*
   * 4 · 최신기사 제목 — "…알아보는 세 / 가지 질문" 처럼 한 낱말이 갈렸다.
   * keep-all 로 낱말 안쪽을 지키고, balance 로 두 줄 길이를 고르게 나눠
   * "좋은 통역사를 / 알아보는 세 가지 질문" 으로 떨어진다.
   */
  .news-card__title{ word-break: keep-all; text-wrap: balance; }

  /*
   * 5 · 푸터 로고 — 그림 안쪽에 여백이 있어 글자 V 가 아래 국가 메뉴보다
   * 2px 안으로 들어가 보였다. 그만큼 왼쪽으로 당겨 같은 선에 세운다.
   */
  .footer-logo{ margin-left: -2px; }
}