/* ============================================================
   데일리인천 — 공개 지면

   기조는 한국 통신사 지면이다. 지역지가 하루 네 번(08:30·12:30·16:30·20:30)
   판을 갈아 내보내므로, 독자가 한 화면에서 "지금 인천에 무슨 일이 있나"를
   훑을 수 있어야 한다. 그래서 여백보다 밀도를 택했다.

   지면의 원칙 넷.

   1. 한 서체로 간다. Pretendard 하나로 제호 아래 전부를 짠다. 통신사 지면은
      제목과 본문이 같은 목소리로 말할 때 가장 빨리 읽힌다. 명조를 섞으면
      한 화면에 목소리가 둘이 되어 훑는 속도가 떨어진다.

   2. 남색은 구조에만 쓴다. 분야 머리의 밑줄, 지금 보고 있는 분야, 링크를
      누를 수 있다는 표시. 본문과 제목에는 색을 넣지 않는다 — 기사에서
      색이 말을 걸기 시작하면 무엇이 중요한지 지면이 아니라 색이 정한다.

   3. 사진은 있을 때만 자리를 차지한다. 사진은 보도자료로 판정된 기사만
      내려받으므로 공개 기사 셋 중 둘에는 사진이 없다. 자리를 미리 잡아 두면
      그 셋 중 둘이 이유 없이 좁아진다.

   4. 강조는 한 곳. 머리기사 제목만 크다. 나머지는 전부 조용하다.

   5. **사진 그릇은 언제나 같은 비율이다(16:9).** 큰 사진이든 목록 썸네일이든,
      데스크톱이든 휴대전화든, 안에 든 것이 보도사진이든 기관 로고든 그릇의
      비율은 변하지 않는다. 한 줄에 선 기사들의 사진 높이가 제각각이면 지면이
      흔들려 보이고, 무엇이 더 중요한지를 크기가 아니라 우연이 말하게 된다.
      - 비율은 `--photo` 한 곳에서만 정한다. 슬롯마다 따로 적지 않는다.
      - 안에 든 그림이 그릇과 비율이 다르면 **그릇이 아니라 그림을 맞춘다** —
        사진은 `cover`로 채우고, 로고는 `contain`으로 담아 남는 자리를 여백으로
        둔다. 로고라고 그릇을 얕게 만들면 옆 기사와 높이가 어긋난다.
      - 칸을 가르는 세로선은 **칸 사이 빈자리에 띄운다**. 칸 안에 테두리나
        패딩으로 그으면 그 칸만 폭이 줄어 사진이 낮아진다.
      - 예외는 **기사 본문의 사진 한 장뿐이다**(`.article-figure`). 거기서는
        기사가 그 사진 하나를 보라고 세운 자리라 나란히 설 것이 없고, 비율을
        강제하면 보도사진의 위아래가 잘린다. 목록에 서는 사진만 그릇에 담는다.
   ============================================================ */

:root {
    /* 두 판을 다 짰다고 브라우저에 알린다. 이 한 줄이 있어야 폼·스크롤바
       같은 브라우저 부품이 지면을 따라 어두워지고, 크롬이 제멋대로
       어둡게 칠하는 일도 멎는다. */
    color-scheme: light dark;

    /* 인천 앞바다·항만의 남색. 통신사 지면의 남색 권위를 가져오되 더 깊고
       짜게 내려 이 지면만의 색으로 둔다. */
    --brand:      #0b3c5d;   /* 단추·지표의 **바탕**. 흰 글자가 얹힌다 */
    --brand-ink:  #0b3c5d;   /* 같은 남색의 **글자·선** 노릇 */
    --brand-lit:  #1668b0;   /* 링크가 살아날 때 */
    --brand-pale: #eaf1f6;

    /* 기관 로고를 얹는 판. 로고는 흰 바탕을 전제로 만들어진 그림이라
       어두운 판에서도 밝은 판을 깔아 준다(아래 밤 판에서 다시 정한다). */
    --logo-plate: #ffffff;

    /* 붉은색은 지면 통틀어 한 곳, '최신' 눈금에만 쓴다. 두 곳이 되는 순간
       어느 쪽도 급해 보이지 않는다. */
    --flash:      #c8102e;

    --ink:        #14181c;
    --ink-2:      #565e66;
    /* 흐린 먹 — 시각·바이라인처럼 11~13px로 쓰이는 자리다.
       **흰 종이와 회색 바탕 양쪽에서 4.5:1을 넘긴다.** 예전 값(#8a929a)은
       흰 종이에서 3.15:1, `--paper-2` 위에서는 2.91:1이라 작은 글씨가
       흐려 보였다. 색조는 그대로 두고 명도만 낮췄다.
       밤 판의 같은 토큰(#7f92a4)은 어두운 종이 위에서 5.74:1이라 그대로다. */
    --ink-3:      #687078;

    --paper:      #ffffff;
    --paper-2:    #f4f6f8;

    --rule:       #e2e7eb;   /* 단을 가르는 선 */
    --rule-2:     #eef1f3;   /* 기사 사이 선 */

    --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
            "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

    --wrap: 1220px;
    --gut:  24px;
    /* 내비 항목의 좌우 안쪽 여백. 첫 항목('메인')의 글자가 지면 왼쪽
       가장자리에서 이만큼 들어가 서고, **기사 본문이 그 선에 맞춘다**.
       두 곳에 따로 적으면 한쪽만 고쳐져 기둥이 어긋난다. */
    --nav-pad: 15px;
    /* 분야 내비가 화면 맨 위에 붙박여 있다(`position: sticky`). 그 아래에
       서야 하는 것들이 이 높이를 알아야 한다 — 모르면 내비 뒤로 파고든다.
       위선 2 + 안쪽여백 24 + 글자 24.8 + 아래선 1 ≈ 52 */
    --nav-h: 52px;
    --col:  28px;   /* 단 사이 여백 */

    /* 사진 비율. **지면의 모든 기사 사진이 이 하나를 쓴다**(원칙 5).
       큰 사진과 목록 썸네일에 서로 다른 비율을 주었더니, 한 줄에 사진이 섞일
       때마다 높이가 어긋났다. 바꿀 일이 생기면 여기만 고친다. */
    --photo: 16 / 9;
}


/* ============================================================
   밤 판 — 어두운 테마
   ============================================================
   낮 판이 흰 종이에 남색 구조라면, 밤 판은 **항만의 밤**에 찍은 판이다.
   바탕을 중성 검정(#111 따위)으로 두지 않고 우리 남색의 색상각(208°)을
   그대로 내려 깔았다. 중성 회색 위에서는 같은 남색이 탁해 보이는데, 바탕이
   같은 계열이면 링크와 지표가 지면의 일부로 앉는다.

   | 무엇 | 낮 | 밤 |
   |---|---|---|
   | 바탕 | #ffffff | #0c151d (항만의 밤) |
   | 한 겹 올린 면 | #f4f6f8 | #13202a |
   | 본문 글자 | #14181c | #e8eef4 (순백은 눈이 부시다) |
   | 남색 잉크 | #0b3c5d | #86c1ef (어두운 바탕에서는 밝아야 읽힌다) |

   **순백(#fff)을 글자에 쓰지 않는다.** 검은 바탕 위의 순백은 획이 번져
   보이고 오래 읽기 어렵다. 파란 기가 도는 흰색으로 한 칸 내렸다.

   대비(실측, 바탕 대비): 본문 15.75:1 · 보조 8.69:1 · 흐린 글자 5.74:1 ·
   링크 9.55:1 · '최신' 붉은 눈금 6.69:1 · 남색 단추 위 흰 글자 7.26:1.
   흐린 글자(--ink-3)는 밤 판이 5.74:1로 먼저 기준을 넘겼다 — 어두운 바탕에서
   흐린 회색이 더 빨리 무너져 그때 올려 두었기 때문이다. **낮 판은 2026-10-01에
   따라 올렸다**(#8a929a 3.15:1 → #687078 5.03:1). 그전까지 낮 판의 시각·
   바이라인은 기준에 못 미친 채 나가고 있었다.
*/
/* 기기가 어두우면 따라간다 — **사람이 '밝게'를 고르지 않았을 때만.**
   `:not([data-theme="light"])`가 그 예외를 만든다. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --brand:      #1d5b86;
        --brand-ink:  #86c1ef;
        --brand-lit:  #a9d4f7;
        --brand-pale: #16293a;

        --flash:      #ff6b78;

        --ink:        #e8eef4;
        --ink-2:      #a5b4c2;
        --ink-3:      #7f92a4;

        --paper:      #0c151d;
        --paper-2:    #13202a;

        --rule:       #26343f;
        --rule-2:     #1c2933;

        --logo-plate: #ffffff;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --brand:      #1d5b86;
    --brand-ink:  #86c1ef;
    --brand-lit:  #a9d4f7;
    --brand-pale: #16293a;

    --flash:      #ff6b78;

    --ink:        #e8eef4;
    --ink-2:      #a5b4c2;
    --ink-3:      #7f92a4;

    --paper:      #0c151d;
    --paper-2:    #13202a;

    --rule:       #26343f;
    --rule-2:     #1c2933;

    --logo-plate: #ffffff;
}

/* 사람이 '밝게'를 골랐으면 기기가 어둡든 말든 낮 판이다 */
:root[data-theme="light"] { color-scheme: light; }


/* ── 판 바꾸기 단추 ───────────────────────────────────────────
   제호 오른쪽, 검색 옆에 선다. 세 자리를 돈다 — 기기 설정 → 낮 → 밤.
   **기기 설정으로 돌아올 길을 남기려고 세 자리다.** 두 자리뿐이면 한 번
   고른 뒤로는 기기를 따라가게 되돌릴 수 없다.

   글자 없이 그림만 두었다. 제호 줄은 좁고(390px에서 로고·날짜·검색이 이미
   붙어 있다) 해·달은 설명이 필요 없는 그림이다. 대신 `aria-label`이 지금
   자리와 다음 자리를 함께 말한다 — 눈으로 못 보는 사람에게는 그림이
   아무 말도 하지 않기 때문이다. */
.theme-btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    color: var(--ink-2);
    cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s;
}
/* 검색이 서는 자리가 폭에 따라 갈리므로 단추도 두 자리에 둔다.
   넓은 화면은 분야 줄 끝(검색창 뒤), 좁은 화면은 제호 옆(돋보기 뒤). */
.theme-btn--head { display: none; }
.nav-inner .theme-btn--nav {
    margin-left: 8px;
    /* 분야 줄은 높이가 49px이고 단추는 34px이다. 높이를 스스로 정한 항목은
       flex가 늘이지 못해 줄 맨 위에 붙는다 — 가운데로 내려 검색창과 눈높이를
       맞춘다. */
    align-self: center;
}

@media (max-width: 560px) {
    .theme-btn--head { display: grid; }
    .theme-btn--nav { display: none; }
}

.theme-btn:hover {
    color: var(--brand-ink);
    border-color: var(--rule);
    background: var(--paper-2);
}

/* 지금 어느 자리인지는 그림 하나로 말한다. 셋을 다 그려 두고 한 장만 편다 —
   자바스크립트가 클래스 하나만 바꾸면 된다. */
.theme-btn svg { display: none; }
:root:not([data-theme]) .theme-btn .ico-auto,
:root[data-theme="light"] .theme-btn .ico-sun,
:root[data-theme="dark"]  .theme-btn .ico-moon { display: block; }

/* 스크립트가 죽으면 눌러도 아무 일이 없다. 그럴 때는 서지 않는다 —
   눌러도 아무 일이 없는 단추를 두지 않는다는 기준은 지면의 다른 곳과 같다. */
.no-js .theme-btn { display: none; }

@media (max-width: 560px) {
    .theme-btn { width: 30px; height: 30px; }
}

@media print { .theme-btn { display: none; } }

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

:where(a, button):focus-visible {
    outline: 2px solid var(--brand-lit);
    outline-offset: 3px;
}

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

.skip { position: absolute; left: -9999px; top: 0;
        padding: 10px 18px; background: var(--brand); color: #fff; z-index: 50; }
.skip:focus { left: 0; }

/* 제목류 공통. 한국어는 어절 단위로 끊어야 눈이 다음 줄을 놓치지 않는다 */
.lead-title, .major-title, .row-title, .sec-lead-title,
.interview-title, .article-title, .cat-title {
    word-break: keep-all;
    letter-spacing: -.025em;
}

/* ── 제호 ─────────────────────────────────────────────────── */
.masthead-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-block: 20px 18px;
}

/* 메인에서 제호를 h1으로 감싼다(그 화면의 제목이라서). 글꼴 크기와
   여백은 태그가 아니라 제호 규칙이 정해야 하므로 h1 기본값을 지운다. */
.masthead-h1 {
    margin: 0;
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    display: contents;
}

.masthead-logo { display: block; min-width: 0; }
/* 제호. 경로 데이터는 `_logo_symbol.svg`에 한 벌만 싣고 머리글·꼬리글이
   <use>로 같은 것을 가리킨다. 색은 `fill="currentColor"`가 여기 `color`를
   물어 간다 — 브라우저가 지면을 스스로 어둡게 뒤집을 때(크롬 자동 다크
   테마) 글자 색과 함께 밝아져야 어둠에 묻히지 않는다. */
.logo-img {
    display: block;
    height: auto;
    color: var(--ink);
}
/* 심볼 보관함은 자리를 차지하지 않는다 */
.logo-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 제호의 붉은 괘선과 'DAILY'.
   **지면의 붉은 눈금과 같은 토큰을 쓴다.** 받은 원본은 #c8282e였는데
   최신 눈금(--flash #c8102e)과 미세하게 달라, 한 화면에 빨강이 둘로
   보였다. 선 하나로 쓰는 강조라 색이 갈리면 묶이지 않는다. */
.logo-rule { fill: var(--flash); }

.masthead-logo .logo-img {
    /* 지면 폭을 따라 늘고 줄되 위아래로 묶는다. vw만 쓰면 큰 화면에서 제호가
       지면을 통째로 먹고, px만 쓰면 좁은 화면에서 잘린다.

       **2026-10-03 한글 제호로 바꾸며 값을 다시 잡았다.** 처음에는 옛 영문
       제호와 높이를 맞추려고 210px로 줄였는데, 지면에 세워 보니 제호가
       왜소했다 — 영문 제호는 글자가 viewBox를 거의 다 썼지만 한글 제호는
       위아래에 'DAILY' 줄과 여백이 있어, 같은 높이에서 **글자가 더 작게**
       보인다. 높이를 맞출 것이 아니라 글자 크기를 맞춰야 했다.

       제호 오른쪽에는 한 줄 소개와 날짜뿐이라(약 180px) 지면 폭 1172px 중
       쓸 수 있는 자리가 넉넉하다. 실측으로 210·250·290·330·370을 세워 보고
       **320px을 윗한계로 잡았다** — 그 위로는 머리글이 두꺼워져 첫 화면에서
       머리기사가 밀린다. */
    width: clamp(190px, 25vw, 245px);
}

/* 제호 오른쪽. 무엇을 하는 지면인지 한 줄, 그 아래 오늘 날짜.
   판이 하루 네 번 바뀌는 지면이라 날짜가 제호와 같은 높이에 서야 한다. */
.masthead-meta { text-align: right; }
.masthead-claim {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ink-2);
}
.masthead-date {
    margin: 3px 0 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    /* '2026년 9월 22일 화요/일'로 갈리던 것 — 한 덩어리로 읽는 값이라
       가운데서 끊으면 안 된다(2026-09-22 편집자 캡처에서 드러났다). */
    white-space: nowrap;
}
/* 좁은 화면에서는 날짜를 줄여 적는다. 제호 옆 한 줄에 로고·날짜·단추 둘이
   함께 서는 자리라, 긴 표기는 로고를 밀거나 제 몸이 잘린다. */
.date-short { display: none; }
@media (max-width: 560px) {
    .date-full { display: none; }
    .date-short { display: inline; }
}

/* ── 분야 내비 ─────────────────────────────────────────────
   화면을 따라 붙어 다닌다. 목록이 길어 스크롤이 깊어지는 지면이라,
   분야를 갈아타려고 맨 위까지 올라가게 두지 않는다. */
.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--paper);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
}
.nav-inner { display: flex; gap: 0; }

.nav-item {
    position: relative;
    padding: 12px var(--nav-pad);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--ink-2);
    white-space: nowrap;
}
.nav-item:hover { color: var(--ink); }
.nav-item.is-current { color: var(--brand-ink); font-weight: 700; }
.nav-item.is-current::after {
    content: "";
    position: absolute;
    left: 15px; right: 15px; bottom: -1px;
    height: 3px;
    background: var(--brand-ink);
}

/* ── 검색 ─────────────────────────────────────────────────
   분야 오른쪽 끝에 붙는다. margin-left:auto 하나로 밀어 두면 분야가 몇 개든
   끝에 선다 — 분야를 늘리거나 줄일 때마다 자리를 다시 잡지 않아도 된다. */
.nav-search {
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-left: 12px;
}
.nav-search-input {
    width: 130px;
    padding: 6px 8px;
    border: 1px solid var(--rule);
    border-right: none;
    background: var(--paper);
    font-family: inherit;
    font-size: 13.5px;
    color: var(--ink);
    /* 검색창은 기본 모양이 브라우저마다 다르다. 둥근 모서리와 안쪽 그림자를
       걷어 지면의 선들과 같은 결로 맞춘다. */
    appearance: none;
    border-radius: 0;
}
.nav-search-input::placeholder { color: var(--ink-3); }
.nav-search-input:focus {
    outline: none;
    border-color: var(--brand);
}
.nav-search-btn {
    display: grid;
    place-items: center;
    width: 32px;
    height: 31px;
    padding: 0;
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff;
    cursor: pointer;
}
.nav-search-btn:hover { background: var(--brand-lit); border-color: var(--brand-lit); }
.nav-search:focus-within .nav-search-input { border-color: var(--brand-ink); }

/* 제호의 검색 단추. 넓은 화면에서는 내비의 검색창이 그 일을 하므로 감춘다 */
/* 좁은 화면의 도구 둘(검색·판 고르기)을 한 상자에 담는다. 제호 줄의
   간격(20px)이 둘 사이에까지 들어가지 않게 하고, 눈높이도 여기서 맞춘다.

   **넓은 화면에서는 상자째 뺀다.** 그 폭에서는 검색창과 판 고르기가 모두
   분야 줄로 내려가 안이 비는데, 빈 상자도 flex 항목이라 `space-between`이
   자리를 하나 더 세고 **날짜가 줄 한가운데로 밀려났다**(2026-09-22 편집자
   지적: "우측 끝에 정렬이 안 된다"). 항목이 둘이면 날짜가 오른쪽 끝에 선다. */
.masthead-tools { display: flex; align-items: center; gap: 2px; }

@media (min-width: 561px) {
    .masthead-tools { display: none; }
}

.masthead-search { display: none; color: var(--ink-2); }
.masthead-search:hover { color: var(--brand-ink); }

/* 화면에서만 감춘다. 읽어 주는 장치에는 그대로 남아야 한다 */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* 결과 화면의 검색창. 내비의 창은 좁아 고친 말이 다 안 보인다 */
.search-page { display: flex; margin: 22px 0 4px; }
.search-page-input {
    flex: 1 1 auto;
    max-width: 30rem;
    padding: 11px 13px;
    border: 1px solid var(--rule);
    border-right: none;
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    appearance: none;
    border-radius: 0;
}
.search-page-input:focus { outline: none; border-color: var(--brand-ink); }
.search-page-btn {
    padding: 0 20px;
    border: 1px solid var(--brand);
    background: var(--brand);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.search-page-btn:hover { background: var(--brand-lit); border-color: var(--brand-lit); }

/* 검색 결과 줄에는 분야를 함께 적는다. 여러 분야가 섞여 나오기 때문이다 */
.row-cat { font-weight: 700; color: var(--brand-ink); }
.row-cat:hover { color: var(--brand-lit); }

/* 쪽 넘기기 */
.pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin: 30px 0 10px;
    font-size: 14px;
}
.pager-link {
    padding: 8px 16px;
    border: 1px solid var(--rule);
    font-weight: 600;
}
.pager-link:hover { border-color: var(--brand-ink); color: var(--brand-ink); }
.pager-now { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── 분야 딱지 ────────────────────────────────────────────── */
.kicker {
    display: inline-block;
    margin-bottom: 9px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-ink);
}
.kicker:hover { color: var(--brand-lit); }

/* ── 머리기사판 ───────────────────────────────────────────────
   두 단. 왼쪽은 머리기사 하나에 통째로 내주고, 오른쪽 한 단에 주요기사와
   최신 목록을 세로로 쌓는다.

   처음에는 세 단으로 갈랐다가 물렀다. 단마다 높이가 제각각이라 머리기사
   아래로 화면 절반이 빈 채 남았다. 오른쪽에 둘을 쌓으면 두 단의 키가
   저절로 비슷해진다. */
.front {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: 0;
    padding: 26px 0 28px;
    border-bottom: 2px solid var(--ink);
}
.front > * + * {
    margin-left: var(--col);
    padding-left: var(--col);
    border-left: 1px solid var(--rule);
}

/* 오른쪽 단이 없을 때 2열을 그대로 두면 머리기사가 지면 일부만 쓰고 나머지가
   빈 채 남는다. 기사가 한두 건뿐인 분야에서 실제로 그랬다. */
.front:has(.lead-col:only-child) { grid-template-columns: minmax(0, 1fr); }

/* ── 머리기사판 ──
   셋이 번갈아 서는 자리다. 슬라이드는 `hidden`으로 감추고 스크립트가 벗긴다 —
   스크립트가 죽어도 첫 기사는 그대로 보인다. */
.lead-deck { position: relative; }
.lead-deck [data-lead-slide][hidden] { display: none; }

/* 넘어갈 때만 아주 짧게 밝아진다. 미끄러지거나 밀려나는 움직임은 두지
   않았다 — 기사를 읽는 자리라 눈이 따라다녀야 하면 방해가 된다. */
@media (prefers-reduced-motion: no-preference) {
    .lead-deck--rotating [data-lead-slide]:not([hidden]) {
        animation: lead-in .45s ease-out;
    }
}
@keyframes lead-in { from { opacity: .35; } to { opacity: 1; } }

/* ── 자리 표시 ──
   점 셋이 서 있고 남색 표시가 그 위를 미끄러져 옮겨 간다. 점을 하나씩
   물들이는 대신 표시를 움직인 것은, **어디서 어디로 갔는지**가 보여야
   지금 자리가 읽히기 때문이다. 색만 바뀌면 눈을 뗀 사이에 건너뛴 것과
   구별되지 않는다.

   한 칸은 점 지름 + 사이 여백이다. 셋을 한 값(`--step`)으로 묶어 두어야
   표시가 정확히 점 위에 선다 — 따로 적으면 기사 수가 바뀔 때 어긋난다. */
/* 머리기사 바로 아래, 가운데.
   선을 두지 않는다 — 여기서 기사가 끝나는 게 아니라 같은 기사에 딸린
   표시라, 선을 그으면 아래 딸림기사와 한 덩어리로 묶여 보인다.

   **가운데 정렬은 이 바깥에서 한다.** 점들이 든 줄(rail)까지 늘여서
   가운데로 밀면 첫 점이 왼쪽 끝(left:0)에서 벗어나 표시가 어긋난다.
   줄은 내용만큼만 차지하게 두고, 그 줄을 통째로 가운데 세운다. */
.lead-nav {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* 점과 표시가 함께 서는 줄.
   한 칸은 점 지름 + 사이 여백이다. 셋을 한 값(`--step`)으로 묶어 두어야
   표시가 정확히 점 위에 선다 — 따로 적으면 기사 수나 여백이 바뀔 때
   어긋난다. */
.lead-nav-rail {
    --dot: 10px;
    --gap: 18px;
    --step: calc(var(--dot) + var(--gap));
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--gap);
    /* 표시를 두른 링(26px)이 줄 밖으로 삐져나오므로 자리를 비워 둔다 */
    min-height: 26px;
}

/* 점. 보이는 크기는 작게 두되 손가락이 닿는 넓이는 넓힌다.
   **가로로는 이웃 점과 겹치지 않는 선까지만** 넓힌다(중심 간격 28px).
   겹치면 누른 곳과 다른 기사로 가는데, 그건 과녁이 좁은 것보다 나쁘다.
   세로로는 이웃이 없으니 넉넉히 준다. */
.lead-nav-dot {
    position: relative;
    width: var(--dot);
    height: var(--dot);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    border-radius: 50%;
}
.lead-nav-dot::before {          /* 손가락 과녁 — 가로 28px · 세로 40px */
    content: "";
    position: absolute;
    inset: -15px -9px;
}
/* 보이는 점.
   단을 가르는 선 색(`--rule`)으로 뒀다가 올렸다 — 흰 종이 위에서 대비가
   1.25:1이라 **점이 셋이라는 사실 자체가 안 보였다.** 지금 색은 3.15:1로
   비텍스트 요소 권장선(3:1)을 넘긴다. 활성 표시와는 색상(남색 대 중성 회색)
   과 밝기(11.6:1 대 3.2:1) 양쪽으로 갈린다. */
.lead-nav-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--ink-3);
    transition: background .2s, transform .2s;
}
.lead-nav-dot:hover::after { background: var(--ink-2); transform: scale(1.18); }
.lead-nav-dot.is-on::after { background: transparent; }   /* 표시가 대신 선다 */
.lead-nav-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 6px; }

/* 미끄러지는 표시. 점과 같은 크기의 남색 원이다. */
.lead-nav-thumb {
    position: absolute;
    top: 50%;
    left: 0;
    width: var(--dot);
    height: var(--dot);
    border-radius: 50%;
    background: var(--brand-ink);
    transform: translate(calc(var(--seat, 0) * var(--step)), -50%);
    transition: transform .5s cubic-bezier(.33, .1, .2, 1);
    pointer-events: none;
}

/* 다음 기사까지 남은 시간. 표시를 한 바퀴 두른다. */
.lead-nav-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 26px;
    height: 26px;
    margin: -13px 0 0 -13px;
    transform: rotate(-90deg);    /* 12시에서 시작한다 */
    overflow: visible;
}
.lead-nav-ring-path {
    fill: none;
    stroke: var(--brand);
    stroke-width: 2;
    opacity: .45;
    stroke-linecap: round;
    /* 둘레 2πr(r=12) ≈ 75.4 */
    stroke-dasharray: 75.4;
    stroke-dashoffset: 75.4;
    animation: lead-ring var(--dur, 8s) linear forwards;
}
@keyframes lead-ring { to { stroke-dashoffset: 0; } }

/* 판이 멈추면 링도 멎는다. '지금은 안 넘어간다'가 눈에 보여야,
   마우스를 얹어 둔 채 읽는 동안 불안하지 않다. */
.lead-deck.is-held .lead-nav-ring-path { animation-play-state: paused; }

/* 움직임을 줄여 달라고 한 브라우저에서는 표시가 순간이동하고 링은 아예
   돌지 않는다. 자동 순환 자체를 하지 않으므로 링은 뜻이 없다. */
@media (prefers-reduced-motion: reduce) {
    .lead-nav-thumb { transition: none; }
    .lead-nav-dot::after { transition: none; }
    .lead-nav-ring { display: none; }
}

/* 오른쪽 단 안에서 주요기사와 최신을 가르는 선 */
.rail-latest {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
}

/* 머리기사 */
.lead-figure { margin: 0 0 15px; }
.lead-figure img {
    display: block;
    width: 100%;
    aspect-ratio: var(--photo);
    object-fit: cover;
    background: var(--paper-2);
}
.lead-figure figcaption {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--ink-3);
}

.lead-title {
    margin: 0 0 12px;
    font-size: clamp(27px, 3.1vw, 38px);
    font-weight: 800;
    line-height: 1.26;
}
.lead-title a:hover { color: var(--brand-lit); }

/* 사진이 없으면 제목이 커진다. 빈 칸을 남기지 않는다 */
.lead--text .lead-title { font-size: clamp(29px, 3.6vw, 42px); }

/* 요약은 제목과 같은 폭으로 흐른다.
   `max-width: 50ch`를 걸어 두었더니 데스크탑에서 제목은 761px을 쓰는데 요약만
   450px에서 꺾여(차이 311px, 한 단으로 떨어지는 1000px에서는 502px) 글 덩어리가
   중간에 잘린 것처럼 보였다. 본문 조판이라면 줄 길이를 묶는 것이 맞지만,
   이건 두세 줄짜리 맛보기라 제목이 잡은 폭을 그대로 따르는 편이 자연스럽다.
   줄 길이는 단 폭이 잡는다 — 지면 전체가 `--wrap`으로 묶여 있다. */
.lead-lede {
    margin: 0 0 14px;
    font-size: 15.5px;
    line-height: 1.74;
    color: var(--ink-2);
}

.lead-meta {
    display: flex;
    gap: 14px;
    margin: 0;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

/* 머리기사에 딸린 세 건 */
.lead-more {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--col);
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
}
.sub-pic { display: block; margin-bottom: 10px; }
.sub-pic img {
    display: block;
    width: 100%;
    aspect-ratio: var(--photo);
    object-fit: cover;
    background: var(--paper-2);
}
.sub-title {
    margin: 0 0 6px;
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.42;
    word-break: keep-all;
    letter-spacing: -.022em;
}
.sub-title a:hover { color: var(--brand-lit); }
.sub-meta {
    display: flex;
    gap: 10px;
    margin: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

/* 주요기사 — 오른쪽 단 위쪽.
   사진은 오른쪽에 작게 붙인다. 큰 사진을 세 번 세우면 단이 배로 길어지고,
   이 지면 사진의 절반은 기관 로고라 크게 키울수록 볼 것이 없다. */
/* 제목이 칸의 좌우를 다 쓰고, 그 아래에서 리드와 사진이 자리를 나눈다.
   예전에는 제목까지 사진 옆으로 밀려 폭이 88px 좁았다 — 목록에서 먼저
   읽히는 것은 제목이라 그 자리를 넓혔다. */
.major { display: block; }
.major + .major {
    margin-top: 15px;
    border-top: 1px solid var(--rule-2);
    padding-top: 15px;
}

/* 제목 아래 — 왼쪽 리드, 오른쪽 사진.
   사진이 없는 기사는 리드가 저절로 칸을 다 쓴다(빈 자리를 잡아 두지 않는다). */
.major-under {
    display: flex;
    gap: 0 14px;
    align-items: flex-start;
}

.major-title {
    margin: 0 0 5px;
    font-size: 16.5px;
    font-weight: 700;
    line-height: 1.4;
}
.major-title a:hover { color: var(--brand-lit); }

.major-lede {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
}
.major-pic { flex: 0 0 88px; }

/* 최신 — 오른쪽 단.
   지면에서 붉은색이 나오는 유일한 자리다. 판이 방금 바뀌었다는 표시라
   여기 말고는 쓸 데가 없다. */
.latest-head,
.rail-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    padding-bottom: 9px;
    font-size: 15px;
    font-weight: 800;
    border-bottom: 2px solid var(--ink);
}
.latest-head::before,
.rail-head::before {
    content: "";
    width: 6px; height: 6px;
    background: var(--flash);
}

/* 주요기사는 아래에 사진 낀 덩어리가 오므로 한 칸 더 띄운다.
   최신 목록은 제목만 흘러 10px로 충분하다. */
.rail-head { margin-bottom: 13px; }

.latest-item {
    display: block;
    padding: 9px 0;
    border-bottom: 1px solid var(--rule-2);
}
.latest-item:last-child { border-bottom: none; }
.latest-time {
    display: block;
    margin-bottom: 3px;
    font-size: 11.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}
.latest-title {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.45;
    word-break: keep-all;
    letter-spacing: -.02em;
}
.latest-item:hover .latest-title { color: var(--brand-lit); }

/* ── 광고 ─────────────────────────────────────────────────── */
.ad { display: flex; justify-content: center; margin: 26px 0; }

.ad-slot {
    display: grid;
    place-items: center;
    width: 100%;
    background: var(--paper-2);
    border: 1px solid var(--rule);
}
.ad-slot span {
    font-size: 12px;
    letter-spacing: .45em;
    /* 자간을 준 만큼 마지막 글자 뒤에도 여백이 붙어 가운데가 틀어진다 */
    text-indent: .45em;
    color: var(--ink-3);
}
.ad--leaderboard .ad-slot { max-width: 728px; aspect-ratio: 728 / 90; }
.ad--rect .ad-slot { max-width: 300px; aspect-ratio: 300 / 250; }
.ad--rect { margin: 34px 0 6px; }

/* ── 분야 머리 ────────────────────────────────────────────── */
.sec-head {
    margin: 0 0 2px;
    padding-bottom: 9px;
    font-size: 17px;
    font-weight: 800;
    border-bottom: 2px solid var(--ink);
}
.sec-head a:hover { color: var(--brand-lit); }

/* ── 분야별 묶음 ────────────────────────────────────────────
   3열 격자로 짜되, 분야 안의 세 토막(분야명 · 머리기사 · 목록)이 **줄끼리**
   높이를 맞춘다(subgrid).

   처음에는 평범한 3열 격자였다. 분야마다 기사 수가 달라 행 높이가 가장 큰
   칸에 맞춰지고, 기사 한 건뿐인 '국제' 아래로 화면 절반이 빈 채 남았다.
   그래서 신문 단(column-count)으로 바꿨더니 이번에는 **앞 분야가 끝난 자리에서
   다음 분야가 시작**해, 둘째 줄부터 분야명이 칸마다 제각각 내려갔다
   (실측 1889 · 1959 · 2078 — 189px 차이).

   subgrid가 둘을 함께 푼다. 분야명은 분야명끼리, 머리기사는 머리기사끼리,
   목록은 목록끼리 같은 줄에 선다. 기사가 적은 분야에 남는 자리는 목록 칸
   안에서만 비므로, 신문의 한 단이 먼저 끝난 것처럼 읽힌다.

   칸을 가르는 세로선은 column-rule이 없어졌으니 왼쪽 테두리로 세운다.
   첫 칸(3n+1)에는 긋지 않는다 — 지면 왼쪽 가장자리에 선이 서면 안 된다. */
.fields {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* **칸 사이는 gap이 벌린다.** 예전에는 칸마다 좌우 패딩을 절반씩 주고
       양 끝 칸에서 그것을 지웠는데, 그 바람에 첫 칸과 끝 칸만 14px 넓어져
       사진이 9px 높았다(실측 377x212 대 362x203). 한 줄에 선 다섯 장의
       높이가 제각각으로 보인 까닭이다 — 원칙 5. */
    gap: 26px var(--col);
    padding-top: 24px;
}
.field {
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;      /* 분야명 · 머리기사 · 목록 */
    align-content: start;
}

/* 마지막 줄에 혼자 남은 분야 — 폭을 다 쓰고 카드 셋으로 눕는다.

   `.field`는 옆 칸과 줄을 맞추려고 subgrid로 세 줄(분야명·머리기사·목록)을
   물려받는다. 혼자 선 칸에는 줄을 맞출 상대가 없으므로 그 장치를 푼다 —
   풀지 않으면 빈 두 칸의 높이를 따라 제 키가 늘어난다. */
.field--wide {
    grid-column: 1 / -1;
    grid-row: auto;
    display: block;
}
/* 세로선은 옆 칸과 나눌 때 긋는 것이다. 나눌 상대가 없으면 뜻이 없다 */
.field--wide::before { content: none; }

/* 칸을 가르는 세로선. 칸 안에 테두리로 그으면 그 칸만 폭이 줄어드니,
   칸 사이 빈자리 한가운데에 띄운다. 자리를 차지하지 않게 절대 위치로 둔다
   (격자 칸을 하나 잡아먹지 않는다 — subgrid의 세 줄이 그대로 유지된다). */
.field::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--col) / -2);
    border-left: 1px solid var(--rule);
}

/* 줄의 첫 칸에는 긋지 않는다 — 지면 왼쪽 가장자리에 선이 서면 안 된다.
   `nth-child(3n)` 같은 규칙은 **칸이 셋일 때만 맞는 말**이라 칸 수마다
   제 규칙을 따로 쥔다. 미디어 쿼리 밖에 두었더니 2열 화면까지 따라가
   넷째 칸(3n+1에 걸린다)에 선이 사라졌었다. */
@media (min-width: 1041px) {
    .field:nth-child(3n + 1)::before { content: none; }
}

/* subgrid를 모르는 브라우저에서도 줄은 맞아야 한다. 칸 안에서 세 토막이
   차례로 서기만 하면 되므로 평범한 격자로 떨어진다. */
@supports not (grid-template-rows: subgrid) {
    .field { display: block; }
}

/* 분야마다 맨 위 한 건은 사진과 요약을 달아 세운다. 아래 두 건은 제목만
   흘린다 — 셋을 똑같이 세우면 무엇을 먼저 보라는 말이 없어진다. */
.sec-lead { padding: 14px 0 13px; border-bottom: 1px solid var(--rule-2); }
.sec-lead-pic { display: block; margin-bottom: 11px; }
.sec-lead-pic img {
    display: block;
    width: 100%;
    aspect-ratio: var(--photo);
    object-fit: cover;
    background: var(--paper-2);
}
.sec-lead-title {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
}
.sec-lead-title a:hover { color: var(--brand-lit); }
.sec-lead-lede {
    margin: 0 0 6px;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--ink-2);
}
.sec-lead-meta {
    display: flex;
    gap: 12px;
    margin: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

/* ── 기사 한 줄 ─────────────────────────────────────────────
   flex로 짠다. 처음에 grid로 두고 썸네일에 grid-row: span을 걸었는데,
   열을 못 박아 두니 자동 배치가 썸네일을 제목 아래로 흘려 보냈다.
   본문 덩어리와 사진, 둘만 나란히 서면 되는 자리라 flex가 맞다. */
.row {
    display: flex;
    gap: 0 14px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule-2);
}
.row-body { flex: 1 1 auto; min-width: 0; }
.row:last-child { border-bottom: none; }

.row-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.45;
}
.row-title a:hover { color: var(--brand-lit); }

.row-lede {
    margin: 6px 0 0;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--ink-2);
}

/* 시각과 기자를 한 줄로 묶어 제목 아래에 둔다. 통신사 지면에서 시각은
   제목보다 뒤에 온다 — 먼저 무엇인지 알고, 그다음 언제인지 본다. */
.row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 6px 0 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

.row-pic { flex: 0 0 96px; }

/* 썸네일 공통. 큰 사진과 달리 여기서는 폭을 flex가 정하므로 100%로 둔다 */
.row-pic img,
.major-pic img {
    display: block;
    width: 100%;
    aspect-ratio: var(--photo);
    object-fit: cover;
    background: var(--paper-2);
}

/* 기관 로고로 갈아끼운 사진은 잘라내면 안 된다. cover로 채우면 CI의 글자가
   먼저 잘려 나가 무슨 기관인지 알아볼 수 없다 — 실제로 인천시 CI가 'NC'로
   잘려 나갔다. 비율을 지켜 담고 남는 자리는 여백으로 둔다. */
.pic--logo img {
    object-fit: contain;
    padding: 9%;
    /*
      **로고는 흰 판 위에 얹는다 — 밤 판에서도.**

      기관 CI는 흰 종이를 전제로 만든 그림이다. 어두운 바탕에 그대로 놓으면
      짙은 남색 글자가 묻힌다(2026-09-22 편집자 화면에서 그랬다).

      처음에는 눈부심을 덜려고 #e9eef2로 한 칸 내렸는데, 그 한 칸이 화면에서
      **회색 판**으로 읽혔다(편집자 확인). 로고 파일의 바탕은 순백이라 판만
      조금 어두우면 그림과 판의 경계가 드러난다 — 어정쩡하게 내리느니
      순백으로 맞춰 '흰 종이 한 장'으로 보이게 한다.
    */
    background: var(--logo-plate);
    border: 1px solid var(--rule-2);
}

/* **로고라고 그릇을 얕게 만들지 않는다.** 예전에는 큰 자리의 로고만
   2.8:1 띠로 눌러 담았다. 흰 여백은 줄었지만, 같은 줄에 선 사진 기사와
   높이가 70px 넘게 어긋나 지면이 흔들렸다(2026-09-22 확인). 남는 자리는
   여백으로 두는 편이 낫다 — 원칙 5. */

/* 한 분야를 전폭으로 펼칠 때.
   예전에는 제목과 요약에만 max-width를 걸어 글 폭을 묶었다. 줄은 여전히
   지면 끝까지 뻗었으므로 **글은 696px에서 끝나는데 사진은 308px을 건너뛴
   오른쪽 끝에 홀로 섰다**(2026-09-22 실측).

   글 폭은 이제 **단이 정한다**. 넓은 화면은 두 단으로 나누고(아래), 좁은
   화면은 한 단을 그대로 쓴다. 한 단이 가장 넓어지는 1040px에서도 글 칸은
   802px — 한 줄 59자라 눈이 다음 줄 첫머리를 놓칠 만큼 길지 않다. 글에 따로
   max-width를 걸지 않으므로 사진은 언제나 글 바로 옆(22px)에 선다. */
.field--full { padding: 0; border-left: none; }
.field--full .row { padding: 15px 0; gap: 0 22px; }
.field--full .row-title { font-size: 18px; font-weight: 700; }
.field--full .row-pic { flex: 0 0 168px; }

/* 넓은 화면에서는 **두 단**으로 흘린다.
   한 단으로 두면 글 칸 오른쪽에 지면의 4분의 1이 빈 채로 남는다(2026-09-22
   독자 지적). 이 지면의 첫째 원칙이 밀도라, 그 자리를 여백으로 두느니 기사를
   한 건 더 세운다 — 한 화면에 들어오는 기사가 두 배가 된다.

   단이 둘이 되는 지점은 분야 칸과 같은 1041px이다. 그 아래에서는 단 하나가
   좁아져 제목이 석 줄씩 꺾이므로 한 단으로 되돌린다. */
@media (min-width: 1041px) {
    .field--full .field-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: var(--col);
    }

    /* 단이 좁아진 만큼 사진도 한 뼘 줄인다. 168px 그대로 두면 글 칸이
       320px 아래로 내려가 제목이 넉 줄씩 꺾인다. */
    .field--full .row-pic { flex: 0 0 140px; }

    /* 요약은 두 줄까지만. 단이 좁아진 만큼 줄 수가 늘어, 그대로 두면 넉 줄씩
       늘어져 제목이 요약에 묻힌다. 글자 수로 자르는 것은 서버가 이미 했고
       (110자), 여기서는 단 폭에 맞춰 눈에 보이는 줄 수를 쥔다. */
    .field--full .row-lede {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    /* 단을 가르는 세로선. 분야 칸과 같은 방식으로 단 사이 빈자리에 띄운다 —
       줄 안에 테두리로 그으면 그 줄만 폭이 줄어 사진이 밀린다. */
    .field--full .row { position: relative; }
    .field--full .row:nth-child(2n)::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--col) / -2);
        border-left: 1px solid var(--rule);
    }

    /* 맨 아랫줄은 둘 다 밑줄을 걷는다. `:last-child` 하나만으로는 왼쪽 단의
       마지막 줄에 밑줄이 남아 목록이 한쪽만 닫힌 것처럼 보인다. */
    .field--full .row:nth-last-child(-n + 2) { border-bottom: none; }
}

/* ── 분야 페이지 머리 ─────────────────────────────────────── */
.cat-banner {
    padding: 26px 0 20px;
    border-bottom: 2px solid var(--ink);
}
.cat-title {
    margin: 0;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 800;
    line-height: 1.2;
}
.cat-blurb {
    margin: 9px 0 0;
    max-width: 52ch;
    font-size: 14px;
    color: var(--ink-2);
}

/* ── 인터뷰 ───────────────────────────────────────────────── */
.interviews { margin-top: 30px; }
.interviews .sec-head { margin-bottom: 16px; }

/* 분야 칸과 같은 짜임이다 — 칸 사이는 gap이 벌리고, 가르는 선은 그 빈자리에
   띄운다. 칸마다 패딩을 주고 양 끝에서 지우면 그 두 칸의 사진만 넓어진다. */
.interview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 var(--col);
}
.interview { position: relative; }
.interview::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--col) / -2);
    border-left: 1px solid var(--rule);
}
.interview:first-child::before { content: none; }

.interview-pic { display: block; margin-bottom: 12px; }
.interview-pic img {
    display: block;
    width: 100%;
    aspect-ratio: var(--photo);
    object-fit: cover;
    background: var(--paper-2);
}

.interview-title {
    margin: 0 0 7px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.38;
}
.interview-title a:hover { color: var(--brand-lit); }

.interview-lede {
    margin: 0 0 8px;
    font-size: 13.5px;
    line-height: 1.62;
    color: var(--ink-2);
}

.interview-meta {
    display: flex;
    gap: 12px;
    margin: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
}

/* ── 기사 상세 ────────────────────────────────────────────── */
.article {
    max-width: 42rem;
    margin: 0 auto;
    padding: 26px 0 60px;
}

/* 어디에 있는 기사인지. 분야 페이지로 돌아가는 길이기도 하다 */
.crumbs {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 14px;
    font-size: 12.5px;
    color: var(--ink-3);
}
.crumbs a:hover { color: var(--brand-lit); }
.crumbs .crumb-cat { font-weight: 700; color: var(--brand-ink); }
.crumbs .crumb-sep { color: var(--rule); }

.article-title {
    margin: 0 0 16px;
    font-size: clamp(26px, 3.4vw, 36px);
    font-weight: 800;
    line-height: 1.32;
}

/* 왼쪽에 발행 일시, 오른쪽에 바이라인 */
.article-byline {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 11px 0;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
}
.byline-name { font-weight: 600; color: var(--ink-2); }
.byline-times { display: inline-flex; flex-wrap: wrap; gap: 10px; }
.byline-revised { color: var(--ink-3); }

/* 본문 조판은 article-type.css의 .prose가 쥔다. 편집기와 같은 파일을 봐야
   기자가 보는 모습과 독자가 보는 모습이 갈라지지 않는다. 여기에는 지면에서만
   필요한 여백만 남긴다. */
.article-body { margin-top: 26px; }

/* 기사 끝 서명 — 한 줄 표어와 기자 연락처.

   본문에서 두 줄쯤(34px) 띄운다. 붙여 두면 기사 마지막 문단으로 읽힌다.
   선은 긋지 않는다 — 바로 아래 꼬리표가 이미 선을 갖고 있어, 여기서 또
   그으면 짧은 구간에 가로줄이 둘이 된다. */
.article-sign {
    margin: 34px 0 0;
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--ink-2);
}
/* 좁은 화면에서는 기자 이름이 다음 줄로 내려간다. 한 줄에 우겨 넣으면
   글자가 잘리거나 가로로 밀린다. */
.article-sign .sign-who { color: var(--ink-3); }
.sign-sep {
    margin: 0 8px;
    color: var(--rule);
}
.article-sign a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: var(--rule);
}
.article-sign a:hover { color: var(--brand-lit); text-decoration-color: currentColor; }

/* 표어 앞 동그라미. 글자(⦿)를 쓰면 서체에 없어 기기마다 다르게 떨어지므로
   직접 그린다 — 테두리 원 안에 점 하나다. */
.sign-mark {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 7px;
    border: 1.5px solid var(--brand);
    border-radius: 50%;
    position: relative;
    vertical-align: -1px;
}
.sign-mark::after {
    content: "";
    position: absolute;
    inset: 2.5px;
    border-radius: 50%;
    background: var(--brand-ink);
}

/* 꼬리표. 기사가 끝나고 광고·관련기사가 시작되는 자리라, 위에 선을 하나
   두어 '기사는 여기까지'를 눈으로 알린다. 낱말 수가 둘에서 다섯이라
   한 줄에 들어가지만 좁은 화면에서는 접히게 둔다. */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 8px;
    margin: 30px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
}
.article-tags .tag {
    padding: 4px 11px;
    border: 1px solid var(--rule);
    border-radius: 999px;
    background: var(--paper-2);
    font-size: 12.5px;
    color: var(--ink-2);
    /* 낱말 가운데서 줄이 갈리면 해시가 딴 낱말에 붙은 것처럼 보인다 */
    white-space: nowrap;
    /* 이제 꼬리표는 묶음 화면으로 가는 링크다. 밑줄 대신 칩 자체가 단추처럼
       보이게 두고, 닿으면 테두리와 글자가 진해진다. */
    text-decoration: none;
    transition: border-color .15s, color .15s, background-color .15s;
}

.article-tags .tag:hover,
.article-tags .tag:focus-visible {
    border-color: var(--brand-ink);
    background: var(--brand-pale);
    color: var(--brand-ink);
}

/* 사진 설명은 회색 띠에 얹는다. 본문과 붙여 놓으면 설명인지 기사인지
   구별되지 않고, 공백으로만 띄우면 좁은 화면에서 붙어 버린다. */
.article-figure { margin: 26px 0; }
.article-figure img { display: block; width: 100%; background: var(--paper-2); }
.article-figure figcaption {
    padding: 10px 13px;
    background: var(--paper-2);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-2);
}

/* 사진 출처.
   설명과 같은 줄에 이어 붙되 한 단 낮춰 적는다 — 이것은 사진이 무엇을 담고
   있는지가 아니라 **누구의 것인지**를 말하는 자리다. 설명이 없는 사진에서는
   출처만 남으므로 그 경우에도 읽히게 앞 여백을 두지 않는다. */
figcaption .credit {
    color: var(--ink-3);
    font-size: 0.92em;
    white-space: nowrap;
}
/* 설명이 앞에 있을 때만 구분자를 세운다. **`:first-child`로 가르면 안 된다** —
   그 선택자는 글자 마디를 자식으로 세지 않아, 설명이 있어도 이 span이 늘
   첫 자식이라 구분자가 통째로 사라진다. 어느 쪽인지는 템플릿이 안다. */
figcaption .credit--after::before { content: "／"; margin: 0 3px 0 4px; opacity: .5; }

.related { margin-top: 44px; }
.related .row { padding: 12px 0; }
.related .row-title { font-size: 16px; }
.related .row-pic { flex: 0 0 104px; }

/* ── 공유·인쇄 줄 ─────────────────────────────────────────
   바이라인 바로 아래, 오른쪽 끝에 붙는다. 제목과 본문 사이를 가로지르는
   자리라 눈에 띄되 말을 걸지는 않아야 한다 — 그래서 아이콘은 회색이고,
   마우스를 얹었을 때만 지면의 남색이 올라온다.

   본문을 읽기 시작한 독자가 다시 위로 올라오게 하지 않으려면 기사 끝에도
   같은 줄을 두는 방법이 있다. 지금은 한 줄만 둔다 — 공유는 대개 제목을
   보고 결정한다.
   ─────────────────────────────────────────────────────── */
.share {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-top: 14px;
}

.share-btns { display: flex; align-items: center; gap: 6px; }

.share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: var(--paper);
    color: var(--ink-2);
    border: 1px solid var(--rule);
    border-radius: 50%;
    cursor: pointer;
    transition: color .12s, border-color .12s, background-color .12s;
}
.share-btn:hover {
    color: var(--brand-ink);
    border-color: var(--brand-ink);
    background: var(--brand-pale);
}
.share-btn:active { transform: translateY(1px); }

/* 인쇄는 공유가 아니다. 사이를 띄워 두 무리로 읽히게 한다 */
.share-btn--print { margin-left: 6px; }

/* 아이콘은 선으로 그린 것과 면으로 채운 것이 섞인다. 상표가 있는 것
   (카카오·페이스북·X)은 면, 우리가 그린 것(복사·공유·인쇄)은 선이다. */
.ico {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ico--solid { fill: currentColor; stroke: none; }

/* 복사했다는 말. 자리를 미리 잡아 두지 않는다 — 빈 줄이 늘 떠 있으면
   제목과 본문 사이가 이유 없이 벌어진다. */
.share-note {
    order: -1;              /* 단추 왼쪽에 선다 */
    margin: 0;
    font-size: 12.5px;
    color: var(--ink-3);
}
.share-note.is-warn { color: var(--flash); }

@media (max-width: 560px) {
    /* 좁은 화면에서는 손가락이 닿을 만큼 키우고 줄 전체를 쓴다 */
    .share-btn { width: 40px; height: 40px; }
    .share-note { order: 0; flex-basis: 100%; text-align: right; }
}

/* 인쇄에만 나오는 것. 화면에서는 자리조차 차지하지 않는다 */
.print-only { display: none; }

/* ── 푸터 ─────────────────────────────────────────────────── */
.site-footer {
    margin-top: 48px;
    padding: 34px 0 44px;
    background: var(--paper-2);
    border-top: 1px solid var(--rule);
}
.footer-mark .logo-img {
    /* 꼬리글은 머리글보다 한 급 작게. 같은 제호가 두 번 서는 자리라
       아래쪽이 작아야 위가 머리라는 것이 읽힌다. */
    width: 180px;
    color: var(--ink-2);
}
/* 표어(왼쪽)와 약관·접수 줄(오른쪽)을 한 행에 세운다.
   `align-items: baseline`이라 글자 크기가 달라도 밑선이 맞는다. */
.footer-top {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px 32px;
    margin: 13px 0 18px;
}
.footer-line { margin: 0; font-size: 13px; color: var(--ink-2); }

/* 발행 정보. 항목이 늘어도 줄이 무너지지 않게 흐르는 목록으로 둔다 */
.masthead-box {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 20px;
    padding: 16px 0 0;
    border-top: 1px solid var(--rule);
    font-size: 12px;
    line-height: 1.7;
    color: var(--ink-2);
}
.masthead-box > div { display: flex; gap: 6px; }
.masthead-box dt { margin: 0; color: var(--ink-3); }
.masthead-box dd { margin: 0; }
.masthead-box a { text-decoration: underline; }

/* 겉보기로는 그냥 글자다. 밑줄도 색도 주지 않고 커서도 평소엔 글자 위와
   같게 두었다가, 마우스를 얹었을 때만 손가락으로 바꿔 누를 곳임을 알린다.
   키보드로 탐색할 때는 전역 :focus-visible 테두리가 그대로 보인다.
   선택자를 .masthead-box a(0-1-1)보다 무겁게 잡아야 밑줄 규칙에 지지 않는다. */
.masthead-box a.quiet-link,
a.quiet-link { color: inherit; text-decoration: none; cursor: default; }
.masthead-box a.quiet-link:hover,
a.quiet-link:hover { cursor: pointer; text-decoration: none; }

.footer-copy { margin: 18px 0 0; font-size: 11.5px; color: var(--ink-3); }
/* 둘째 줄은 성격이 다른 고지라 간격을 좁혀 한 덩어리로 묶는다 */
.footer-copy + .footer-copy { margin-top: 5px; }

.empty { padding: 80px 0; text-align: center; color: var(--ink-3); }

/* ── 오류 화면 ────────────────────────────────────────────── */
.notice { max-width: 34rem; margin: 0 auto; padding: 90px 0 110px; }
.notice-code { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--brand-ink); }
.notice-title { margin: 0 0 10px; font-size: 27px; font-weight: 800; letter-spacing: -.025em; }
.notice-text { margin: 0 0 22px; color: var(--ink-2); }
.notice-back {
    display: inline-block;
    padding: 10px 18px;
    background: var(--brand);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}
.notice-back:hover { background: var(--brand-lit); }

/* ── 반응형 ───────────────────────────────────────────────── */
@media (max-width: 1040px) {
    /* 칸이 둘이면 둘을 센다 */
    .fields { grid-template-columns: repeat(2, 1fr); }
    .field:nth-child(2n + 1)::before { content: none; }

    .interview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .interview::before { content: ""; }
    .interview:nth-child(2n + 1)::before { content: none; }
    .interview:nth-child(n + 3) { margin-top: 22px; }
}

/* 두 단을 이 아래까지 끌고 가면 오른쪽 단이 280px까지 눌려 주요기사 제목이
   석 줄씩 꺾인다. 그 전에 단을 쌓고, 쌓인 자리에서는 가로로 편다. */
@media (max-width: 1000px) {
    .front { grid-template-columns: 1fr; }
    .front > * + * {
        margin: 22px 0 0;
        padding: 20px 0 0;
        border-left: none;
        border-top: 1px solid var(--rule);
    }

    /* 주요기사는 두 칸으로 나란히. 세로로 쌓으면 최신 목록이 화면 두 배
       아래로 밀려 아무도 닿지 않는다. */
    .rail-majors {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px var(--col);
    }
    .major + .major { margin-top: 0; padding-top: 0; border-top: none; }

    /* 최신 목록도 같은 이유로 가로로 눕힌다. 제목만 있는 목록이라 읽힌다. */
    .latest-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 var(--col);
    }
}

@media (max-width: 860px) {
    .masthead-claim { display: none; }
    .masthead-date { font-size: 11.5px; }

    /* 한 칸이면 나란히 설 것이 없다. 줄을 맞출 이유도, 세로선을 그을 이유도
       없으므로 subgrid를 풀고 위에서 아래로 흐르게 둔다. */
    .fields { display: block; }
    .field { display: block; margin-bottom: 26px; }
    .field::before { content: none; }

    .interview-grid { grid-template-columns: 1fr; }
    .interview::before { content: none; }
    .interview + .interview {
        margin-top: 20px;
        padding-top: 20px;
        border-top: 1px solid var(--rule-2);
    }

    .field--full .row-pic { flex-basis: 120px; }
}

@media (max-width: 560px) {
    :root { --gut: 18px; }

    .masthead-inner { padding-block: 16px 14px; }
    /* 좁은 화면에서는 한 줄 소개가 숨고(.masthead-claim) 날짜만 짧게 남아
       제호가 쓸 자리가 넓어진다. 360px 화면에서 230px이면 날짜와 부딪히지
       않으면서 가장 크다(실측). */
    .masthead-logo .logo-img { width: min(62vw, 230px); }

    /* 분야가 아홉이라 좁은 화면에서는 가로로 밀어 본다.
       검색창은 내비에서 뺀다 — 밀어야 닿는 자리에 있으면 없는 것과 같고,
       분야를 미는 동작만 방해한다. 검색은 결과 화면의 큰 창으로 한다. */
    .nav-search { display: none; }
    /* 판 고르기 단추와 **같은 그릇**으로 세운다. 한쪽은 패딩을 준 링크,
       다른 쪽은 크기를 정한 단추면 아이콘이 4px 어긋난다. */
    .masthead-search {
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        padding: 0;
    }
    .nav-inner { overflow-x: auto; scrollbar-width: none; }
    .nav-inner::-webkit-scrollbar { display: none; }
    :root { --nav-pad: 12px; }
    .nav-item { padding: 11px var(--nav-pad); font-size: 15px; }
    .nav-item.is-current::after { left: var(--nav-pad); right: var(--nav-pad); }

    .front { padding: 20px 0 22px; }
    .lead-title,
    .lead--text .lead-title { font-size: clamp(24px, 6.8vw, 30px); }

    .latest-list { grid-template-columns: 1fr; }

    /* 두 칸으로도 좁아지면 한 칸으로. 칸 사이를 가르던 선을 되살린다 */
    .rail-majors { grid-template-columns: 1fr; gap: 0; }
    .major + .major {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid var(--rule-2);
    }

    /* 딸림 기사 셋을 좁은 화면에서 나란히 세우면 제목이 한 글자씩 끊긴다 */
    .lead-more { grid-template-columns: 1fr; gap: 0; }
    .sub + .sub { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--rule-2); }
    .sub-pic { float: right; width: 96px; margin: 0 0 8px 14px; }

    .row,
    .field--full .row { gap: 0 12px; }
    .row-pic,
    .field--full .row-pic { flex-basis: 84px; }
    .field--full .row-title { font-size: 16.5px; }

    .article { padding: 20px 0 44px; }
    .article-body { font-size: 16.5px; line-height: 1.85; }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}


/* ============================================================
   인쇄

   독자가 종이로 들고 나가는 것은 **기사 한 건**이다. 그래서 지면을 그대로
   축소하지 않고, 종이에 필요한 것만 남긴다 — 제호, 제목, 발행 일시,
   기자명, 본문. 내비·검색·광고·관련 기사·발행 정보는 종이에서 아무 일도
   하지 못한다(누를 수 없는 링크와 읽히지 않는 목록으로 잉크만 쓴다).

   사진은 넣지 않는다. 대부분 기관이 제공한 보도사진이라 흑백 인쇄에서
   형체가 뭉개지고, 캡션의 출처 표기까지 함께 흐려진다. 사진도 함께 찍고
   싶으면 아래 `.article-figure { display: none }` 한 줄만 지우면 된다.

   단위를 pt로 쓰는 이유: 종이에서 px는 브라우저마다 다른 길이로 떨어진다.
   ============================================================ */
@media print {
    @page {
        size: A4;
        margin: 15mm 16mm;
    }

    /* 종이는 흰 바탕에 검은 글씨다. 회색 글씨는 흑백 출력에서 흐려지므로
       본문과 제목은 순검정으로 끌어올린다. */
    body {
        background: #fff;
        color: #000;
        font-size: 10.5pt;
    }

    /* 종이에서 할 일이 없는 것들 */
    .skip,
    .nav,
    .masthead-search,
    .crumbs,
    .share,
    .ad,
    .related,
    .site-footer { display: none !important; }

    /* 사진은 빼고 인쇄한다(위 설명 참조) */
    .article-figure { display: none; }

    .wrap { max-width: none; padding-inline: 0; }

    /* ── 제호 ──
       종이 맨 위에 서는 것은 제호다. 어느 신문의 기사인지가 첫 줄에 있어야
       스크랩해 두었을 때 출처를 잃지 않는다. 아래에 굵은 선을 둘러 기사와
       가른다 — 신문 1면의 제호 아래 선과 같은 노릇이다. */
    .masthead {
        border-bottom: 2pt solid #000;
        padding-bottom: 6pt;
        margin-bottom: 14pt;
    }
    .masthead-inner { padding-block: 0; gap: 12pt; }
    .masthead-logo .logo-img { width: 150pt; }
    .logo-img { color: #000; }
    /* A4 인쇄 폭은 CSS 픽셀로 700 남짓이라 좁은 화면 규칙(860px)에 걸려
       제호 옆 한 줄이 사라진다. 종이에는 화면 폭이라는 게 없으므로 되살린다. */
    .masthead-claim { display: block; font-size: 8pt; color: #000; }
    .masthead-date { font-size: 8pt; color: #333; }

    /* ── 기사 ──
       화면에서는 한 줄 42rem으로 묶어 가운데 세우지만, 종이에서는 쪽 여백이
       이미 폭을 정해 준다. 여기서 또 묶으면 기사만 안쪽으로 들어가 제호·
       꼬리말과 왼쪽 끝이 어긋난다. */
    .article {
        max-width: none;
        margin: 0;
        padding: 0;
    }

    .article-title {
        font-size: 20pt;
        line-height: 1.35;
        margin: 0 0 10pt;
        color: #000;
        /* 제목만 남기고 쪽이 넘어가면 종이 두 장이 다 못 읽을 물건이 된다 */
        break-after: avoid;
        page-break-after: avoid;
    }

    /* 발행 일시와 기자명. 화면과 같은 배치(왼쪽 일시, 오른쪽 이름)를 유지하되
       위아래 선을 종이에 맞게 가늘게 내린다. */
    .article-byline {
        font-size: 8.5pt;
        padding: 5pt 0;
        color: #333;
        border-top: 1pt solid #000;
        border-bottom: .5pt solid #999;
        break-after: avoid;
        page-break-after: avoid;
    }
    .byline-name { color: #000; }
    .byline-revised { color: #555; }

    /* 머리기사판은 종이에서 돌 수 없다. 단추를 빼고, 감춰 둔 기사도 모두
       편다 — 종이는 넘길 수 없으니 한 건만 찍히면 나머지는 사라진 셈이다. */
    .lead-nav { display: none; }
    .lead-deck [data-lead-slide][hidden] { display: block !important; }
    .lead-deck [data-lead-slide] + [data-lead-slide] {
        margin-top: 14pt;
        padding-top: 12pt;
        border-top: .5pt solid #999;
    }

    /* 서명은 종이에도 남긴다 — 종이로 건네받은 사람에게 연락처를 알리는
       유일한 자리다. 링크 밑줄은 잉크만 먹으므로 뺀다. */
    .article-sign {
        margin-top: 16pt;
        font-size: 9pt;
        color: #333;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .article-sign a { text-decoration: none; color: #000; }
    .sign-mark { border-color: #000; }
    .sign-mark::after { background: #000; }

    /* 꼬리표는 종이에도 남긴다 — 이 기사가 무엇을 다뤘는지 말해 준다.
       다만 칩 모양(배경·테두리)은 잉크만 먹으므로 글자만 남긴다. */
    .article-tags {
        margin-top: 12pt;
        padding-top: 6pt;
        gap: 4pt 8pt;
        border-top: .5pt solid #999;
        break-inside: avoid;
        page-break-inside: avoid;
    }
    .article-tags .tag {
        padding: 0;
        border: 0;
        background: none;
        font-size: 8.5pt;
        color: #333;
    }

    /* 본문. 화면에서는 한 줄 42rem으로 묶어 두지만 종이에서는 이미 여백이
       폭을 정해 준다 — 여기서 또 묶으면 오른쪽이 통째로 빈다. */
    .article-body { margin-top: 12pt; }
    .article-body.prose {
        max-width: none;
        font-size: 10.5pt;
        line-height: 1.75;
        color: #000;
    }
    .prose p { margin: 0 0 .85em; }
    /* 문단 첫 줄이나 끝 줄만 홀로 다음 쪽에 넘어가지 않게 한다 */
    .prose p, .prose li { orphans: 3; widows: 3; }
    .prose h2 { font-size: 13pt; margin: 1.3em 0 .4em; break-after: avoid; page-break-after: avoid; }
    .prose h3 { font-size: 11.5pt; margin: 1.2em 0 .35em; break-after: avoid; page-break-after: avoid; }
    /* 종이에서 링크는 누를 수 없다. 파란 밑줄은 잉크만 쓴다 */
    .prose a { color: #000; text-decoration: none; }

    /* ── 꼬리말 ── */
    .print-only { display: block; }
    .print-foot {
        margin-top: 14pt;
        padding-top: 6pt;
        border-top: .5pt solid #999;
        font-size: 8pt;
        color: #333;
    }
    .print-foot p { margin: 0; }
    .print-foot-url { word-break: break-all; }
}

/* ── 분야 쪽 넘김 ──────────────────────────────────────────────────
   양끝에 길, 가운데에 지금 자리. 한쪽이 없어도 빈 span이 자리를 지켜
   '지금 몇 쪽'이 가운데에 그대로 선다. */
.pager {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    margin: 28px 0 8px;
    padding-top: 20px;
    border-top: 1px solid var(--rule);
}

.pager-link {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--brand-ink);
    text-decoration: none;
    padding: 10px 2px;      /* 손가락이 닿을 높이 */
}

.pager-link:hover,
.pager-link:focus-visible { text-decoration: underline; }
.pager > .pager-link:last-child { text-align: right; }

.pager-now {
    font-size: 0.85rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

@media print { .pager { display: none; } }

/* ── 읽는 화면의 두 단 ─────────────────────────────────────────
   왼쪽 본문, 오른쪽 옆줄. 비율은 메인 첫 화면(.front)과 같게 두었다 —
   같은 신문인데 쪽마다 기둥 위치가 달라지면 눈이 매번 다시 자리를 잡는다.

   `align-items: start`가 있어야 옆줄이 본문 높이만큼 늘어나지 않는다.
   늘어나면 sticky가 듣지 않는다(늘어난 자신이 이미 끝까지 차 있으므로). */
.read {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    gap: 0 34px;
    align-items: start;
    /* 두 단이 같은 높이에서 시작하게 위 여백을 껍데기가 쥔다. 본문에만
       두면 옆줄 첫 제목이 내비에 붙는다. */
    padding-top: 26px;
}

/* **본문을 왼쪽 단의 왼쪽에 붙인다.**

   `.article`은 읽기 좋은 폭(42rem)을 지키려고 `margin: 0 auto`로 가운데
   섰다. 한 단이던 시절에는 그것이 곧 지면 중앙이었다. 두 단이 되면서
   가운데의 기준이 '왼쪽 단'으로 바뀌었고, 단(739px)이 본문(672px)보다
   넓어 **왼쪽에 33px이 남는다** — 본문이 오른쪽으로 밀려 보이는 까닭이다.
   읽기 폭은 그대로 두고 남는 자리를 오른쪽으로 몰아 준다. */
.read > .article {
    /* 지면 왼쪽 가장자리가 아니라 **내비 첫 항목('메인')의 글자 시작선**에
       세운다. 로고는 가장자리에 붙고 내비 글자는 한 칸 들어가 서는데,
       본문을 가장자리에 붙이면 위아래 기둥이 어긋나 보인다. */
    margin-inline: var(--nav-pad) auto;
    /* **그리드 항목의 기본 `min-width: auto`를 푼다.**
       트랙은 `minmax(0, …)`으로 줄어들게 해 두었지만 항목 자체는 안쪽
       내용의 최소 너비 아래로 안 줄어든다. 본문에 표가 들어오자 390px
       화면에서 기사 상자가 470px로 불어나 지면이 통째로 밀렸다(실측).
       표는 제 안에서 가로로 넘기게 두고(.prose table) 상자는 가만히 둔다. */
    min-width: 0;
    padding-top: 0;
}

/* 옆줄은 읽는 내내 따라온다. 본문이 길면 옆줄만 먼저 끝나 오른쪽이
   허옇게 비는데, 그 빈자리가 기사보다 먼저 눈에 든다. */
.read-rail {
    position: sticky;
    /* **내비 아래에 선다.** 16px에 두었더니 스크롤할 때 옆줄 위쪽 36px이
       붙박이 내비 뒤로 들어가 '주요기사' 제목이 잘렸다(내비 z-index가
       높아 옆줄이 뒤로 숨는다). */
    top: calc(var(--nav-h) + 14px);
    /* 옆줄이 화면보다 길면(주요 4 + 최신 6 ≈ 890px) 낮은 노트북에서
       아래쪽이 잘린 채 굳는다. 남는 높이만큼만 쓰고 넘치면 옆줄 안에서
       넘긴다 — 본문 스크롤과 섞이지 않게 `overscroll-behavior`로 가둔다. */
    max-height: calc(100vh - var(--nav-h) - 28px);
    overflow-y: auto;
    overscroll-behavior: contain;
}
.read-rail .rail { padding-top: 0; }

/* 안내(404) 화면 아래 목록. 여기서는 따라올 것이 없다 — 위쪽 안내가
   짧아 스크롤이 거의 없다. 두 단으로 벌리지 않고 폭을 다 쓴다. */
.notice-more {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 2px solid var(--ink);
}

/* **여기서는 주요기사를 두 칸으로 세운다.**

   옆줄에서는 칸이 좁아 제목 아래 리드와 사진(88px)이 맞붙는다. 그런데 이
   화면의 목록은 지면 폭을 통째로 쓰므로, 한 줄에 하나씩 세우면 그 둘
   사이가 1,000px 가까이 벌어져 한 기사로 읽히지 않는다.

   좁은 화면(1000px 이하)에서 이미 쓰는 두 칸 배치를, 여기서는 넓은
   화면에도 쓴다. 그 아래 폭에서는 기존 반응형이 이어받는다. */
@media (min-width: 1001px) {
    .notice-more .rail-majors {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px var(--col);
    }
    /* 두 칸이 되면 위아래를 가르던 줄이 뜻을 잃는다 */
    .notice-more .major + .major {
        margin-top: 0;
        padding-top: 0;
        border-top: none;
    }

    /* **제목은 두 칸을 가로지른다.**
       `.rail-majors`가 격자가 되면서 제목(h2)도 칸 하나를 차지해 버렸다 —
       "주요기사" 오른쪽에 기사가 한 건 서는 꼴이었다. 제목은 그 아래
       목록 전체를 가리키는 말이므로 폭을 다 써야 한다. */
    .notice-more .rail-head {
        grid-column: 1 / -1;
    }

    /* 최신 목록도 같은 꼴로 눕힌다. 제목만 있는 목록이라 두 칸에서도 읽힌다 */
    .notice-more .latest-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 var(--col);
    }
}

@media (max-width: 1000px) {
    /* 한 단으로 접는다. 옆줄은 본문 **아래**로 — 휴대전화에서 목록이
       먼저 나오면 정작 읽으러 온 기사를 가린다. */
    .read { grid-template-columns: 1fr; }
    /* 한 단으로 돌아오면 '가운데'의 기준도 지면 전체로 돌아온다.
       **폭을 못 박는다.** 좌우 `auto` 여백만 주면 그리드 항목이
       `stretch`를 잃고 **내용 크기(fit-content)**로 잡혀, 본문에 표가
       들어온 날 기사 상자가 단을 넘어 불어난다(390px 화면에서 470px로
       불어난 것을 실측했다). 폭을 100%로 묶으면 표가 제 안에서 가로로
       넘어간다(.prose table). */
    .read > .article { margin-inline: auto; width: 100%; }
    .read-rail { position: static; margin-top: 30px; }
}

/* 종이에는 옆줄을 싣지 않는다. 읽고 있는 기사만 나가야 한다 */
@media print {
    .read { display: block; }
    .read-rail { display: none; }
    .notice-more { display: none; }
}

/* ===========================================================================
   푸터 링크 · 제보/청구 폼 · 약관 쪽
   =========================================================================== */

/* 푸터의 약관·접수 줄. **표어 오른쪽**에 선다(.footer-top 안).

   글자는 아래 발행 정보(.masthead-box)와 똑같이 맞춘다 — 크기·줄 간격·
   색·칸 사이 여백이 전부 같다. 둘은 성격이 같은 고지라 서로 다른 글자로
   적을 이유가 없다. */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px 20px;
    margin: 0;
    font-size: 12px;
    line-height: 1.7;
    color: var(--ink-2);
}
/* 밑줄을 주지 않는다 — 위 상호·주소와 같은 결로 보여야 한다.
   누를 곳이라는 것은 마우스를 얹었을 때 알린다. */
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { color: var(--brand-ink); text-decoration: underline; }

/* 좁은 화면에서는 둘이 한 행에 못 들어가 약관 줄이 표어 아래로 접힌다.
   그때 오른쪽 정렬이면 줄 머리가 들쭉날쭉해 읽기 나쁘다 — 왼쪽으로 돌려
   표어·발행 정보와 같은 기준선에 세우고 사이를 조금 띄운다. */
@media (max-width: 860px) {
    .footer-links { justify-content: flex-start; margin-top: 4px; }
}

/* ── 제보·청구 폼 ────────────────────────────────────────────────── */
/* 읽는 쪽보다 좁게 잡는다. 입력 칸이 넓으면 눈이 줄을 잃는다 */
.inq {
    max-width: 680px;
    margin: 36px auto 60px;
    padding: 0 var(--gut);
}
.inq-title {
    margin: 0 0 10px;
    font-size: 26px;
    letter-spacing: -0.02em;
}
.inq-lead {
    margin: 0 0 26px;
    color: var(--ink-2);
    font-size: 15px;
    line-height: 1.7;
}

.inq-errors {
    margin: 0 0 22px;
    padding: 14px 18px;
    border: 1px solid var(--flash);
    background: var(--paper-2);
    font-size: 14px;
}
.inq-errors-head { margin: 0 0 6px; font-weight: 600; color: var(--flash); }
.inq-errors ul { margin: 0; padding-left: 18px; line-height: 1.7; }

.inq-row { margin-bottom: 20px; }
.inq-row > label {
    display: block;
    margin-bottom: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink);
}
.inq-req { color: var(--flash); font-weight: 400; }

.inq-row input[type="text"],
.inq-row input[type="url"],
.inq-row textarea {
    width: 100%;
    padding: 11px 13px;
    font: inherit;
    font-size: 15px;
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 2px;
    box-sizing: border-box;
}
.inq-row textarea { line-height: 1.75; resize: vertical; min-height: 200px; }
.inq-row input:focus,
.inq-row textarea:focus {
    outline: 2px solid var(--brand-lit);
    outline-offset: -1px;
    border-color: var(--brand-lit);
}
.inq-row input[type="file"] {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px dashed var(--rule);
    background: var(--paper-2);
    box-sizing: border-box;
}
.inq-help {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--ink-3);
}

/* 고른 파일 목록. 너무 큰 파일은 붉게 알려 준다 */
.inq-picked {
    margin: 8px 0 0;
    padding: 9px 12px;
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--ink-2);
    background: var(--brand-pale);
    border-radius: 2px;
    word-break: break-all;
}
.inq-picked--bad { background: var(--paper-2); }
.inq-picked-over { color: var(--flash); font-weight: 600; }

/* **숨긴 칸.** 자동 등록기만 채우게 둔다.
   `display:none`은 일부 등록기가 알아채고 건너뛰므로 화면 밖으로 밀어낸다.
   `visibility`나 `opacity`도 쓰지 않는다 — 탭으로 닿을 수 있다. */
.inq-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.inq-agree {
    margin: 26px 0 22px;
    padding: 15px 17px;
    background: var(--paper-2);
    border: 1px solid var(--rule-2);
    font-size: 14px;
}
.inq-agree label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
    line-height: 1.7;
}
.inq-agree input { margin-top: 4px; flex: none; }
.inq-agree-detail {
    display: block;
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--ink-3);
}
.inq-agree-detail a { color: var(--brand-ink); }

.inq-send {
    width: 100%;
    padding: 14px;
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--brand);
    border: 0;
    border-radius: 2px;
    cursor: pointer;
}
.inq-send:hover { background: var(--brand-lit); }

.inq-foot {
    margin: 22px 0 0;
    font-size: 13px;
    line-height: 1.75;
    color: var(--ink-3);
}
.inq-foot a { color: var(--brand-ink); }

/* 접수 완료 */
.inq-done {
    padding: 28px 26px;
    border: 1px solid var(--rule);
    background: var(--paper-2);
    font-size: 15px;
    line-height: 1.8;
}
.inq-done-head {
    margin: 0 0 12px;
    font-size: 19px;
    font-weight: 600;
    color: var(--brand-ink);
}
.inq-done p { margin: 0 0 10px; }
.inq-done-note {
    margin-top: 14px !important;
    padding-top: 14px;
    border-top: 1px solid var(--rule-2);
    font-size: 13.5px;
    color: var(--ink-2);
}
.inq-back {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 14px;
    color: #fff;
    background: var(--brand);
    text-decoration: none;
    border-radius: 2px;
}

/* ── 약관·방침 쪽 ────────────────────────────────────────────────── */
/* 긴 글을 읽는 자리다. 기사보다 글자를 조금 작게, 줄 간격은 넓게 */
.policy {
    max-width: 760px;
    margin: 36px auto 60px;
    padding: 0 var(--gut);
    font-size: 15px;
    line-height: 1.85;
    color: var(--ink);
}
.policy-title {
    margin: 0 0 6px;
    font-size: 27px;
    letter-spacing: -0.02em;
}
.policy-date {
    margin: 0 0 26px;
    font-size: 13px;
    color: var(--ink-3);
}
.policy-lead {
    margin: 0 0 30px;
    padding: 15px 18px;
    background: var(--paper-2);
    border-left: 3px solid var(--brand);
    font-size: 14.5px;
}
.policy h2 {
    margin: 36px 0 12px;
    padding-top: 16px;
    border-top: 1px solid var(--rule-2);
    font-size: 18px;
    letter-spacing: -0.01em;
}
.policy h2:first-of-type { border-top: 0; padding-top: 0; }
.policy h3 {
    margin: 22px 0 8px;
    font-size: 15.5px;
    color: var(--brand-ink);
}
.policy p { margin: 0 0 12px; }
.policy ul, .policy ol { margin: 0 0 14px; padding-left: 22px; }
.policy li { margin-bottom: 7px; }
.policy a { color: var(--brand-ink); }

/* 눈에 띄게 둬야 하는 단락 — 제보자 보호, 선삭제 원칙 따위 */
.policy-note {
    margin: 14px 0 16px !important;
    padding: 13px 16px;
    background: var(--brand-pale);
    border-radius: 2px;
    font-size: 14px;
}

.policy-table {
    width: 100%;
    margin: 0 0 18px;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.65;
}
.policy-table th,
.policy-table td {
    padding: 9px 12px;
    border: 1px solid var(--rule-2);
    text-align: left;
    vertical-align: top;
}
.policy-table thead th { background: var(--paper-2); font-weight: 600; }
/* 표의 왼쪽 칸이 머리글 노릇을 하는 꼴(보호책임자 표) */
.policy-table tbody th {
    width: 170px;
    background: var(--paper-2);
    font-weight: 500;
    color: var(--ink-2);
}

.policy-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    margin-top: 40px;
    padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: 13.5px;
}
.policy-nav a { color: var(--ink-2); text-decoration: none; }
.policy-nav a:hover { color: var(--brand-ink); text-decoration: underline; }
.policy-nav-here { color: var(--ink-3); font-weight: 600; }

/* 좁은 화면. 표가 가로로 넘치지 않게 칸 폭을 풀어 준다 */
@media (max-width: 640px) {
    .policy { font-size: 14.5px; }
    .policy-title { font-size: 23px; }
    .policy-table { font-size: 13px; }
    .policy-table th, .policy-table td { padding: 7px 9px; }
    .policy-table tbody th { width: auto; }
    .inq-title { font-size: 22px; }
}

/* 종이로 뽑을 때. 방침은 인쇄해 두는 사람이 있다 */
@media print {
    .footer-links, .policy-nav { display: none; }
    .policy { max-width: none; }
}