/* ============================================================
   KWONMO — edition-paper.css
   조간판(light). 공통 마크업 위에 얹는 "신문 판형" 표현.
   구조는 layout.css 소유. 이 파일은 색·서체·괘선·밀도만 다룬다.
   야간판과 같은 마크업을 쓰므로, 여기서 선언하지 않은 것은 자동으로 사라진다.
   ============================================================ */

/* ---------- 종이 질감 ----------
   세 겹을 서로 다른 주기로 겹쳐 깐다.
     ① 지분(紙粉) — 검은 반점. 신문지의 거친 입자
     ② 섬유 결   — 흰 올. 한 방향으로 늘인 난류라 한지의 발 자국처럼 눕는다
     ③ 얼룩      — 넓게 번진 저주파 명암. 잉크가 고르게 안 먹은 자국
   타일을 200/400/600 으로 어긋나게 잡아야 세 주기가 간섭해 반복 무늬가 안 보인다.

   핵심은 ①과 ②를 짝으로 둔 것이다. 검은 반점만 얹으면 결은 생겨도 바탕이 탁해진다.
   흰 올을 비슷한 양으로 같이 깔아 평균을 되돌린다 — 눈에 보이는 건 결이고, 평균 색조는 --bg 그대로다.

   feColorMatrix 는 채도를 죽이는 용도가 아니라 난류의 밝기를 알파로 옮기는 용도다.
   RGB 는 상수(검정/흰색)로 고정하고 A' = k·(R+G+B) + offset 으로 문턱을 준다.
   offset 이 음수라서 밝기가 문턱을 넘는 자리에만 반점이 남는다 — 그래서 성기다.
   그냥 난류를 반투명하게 얹으면 색 반점이 끼고(RGB 가 따로 논다) 결도 뭉개진다.

   stitchTiles='stitch' 가 없으면 타일 경계마다 난류가 끊겨 격자 줄이 그대로 드러난다.
   질감이 로드에 실패해도 바탕색만 남고 판형은 그대로다 — 필수 의존이 아니다. */
[data-theme="light"] body {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='p'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .32 .32 .32 0 -.545'/></filter><rect width='200' height='200' filter='url(%23p)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='400' height='400'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.02 .6' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 .46 .46 .46 0 -.645'/></filter><rect width='400' height='400' filter='url(%23f)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='600' height='600'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.006' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='600' height='600' filter='url(%23s)' opacity='.3'/></svg>");
  background-size: 12.5rem 12.5rem, 25rem 25rem, 37.5rem 37.5rem;
  background-blend-mode: normal, normal, soft-light;
}
[data-theme="light"] a:hover { color: var(--accent); }

/* ================= 제호 ================= */
[data-theme="light"] .masthead {
  background: var(--bg);
  border-bottom: var(--hairline) solid var(--rule-soft);
}
[data-theme="light"] .brand-name {
  font-family: var(--ed-display); font-weight: 900; letter-spacing: .01em;
}
[data-theme="light"] .nav-link,
[data-theme="light"] .edition {
  font-family: var(--ed-label); font-weight: 700;
}

/* 홈 전용 전체 제호 */
[data-theme="light"][data-layout="basic"] .masthead { border-bottom: none; }
/* 높이는 layout.css 가 고정(--brand-h). 여기서 세로 패딩을 주면 두 판이 어긋난다 */
[data-theme="light"][data-layout="basic"] .brand { text-align: center; }
[data-theme="light"][data-layout="basic"] .brand-name {
  font-size: clamp(2.75rem, 8.6vw, 8rem); line-height: .9;
}
[data-theme="light"][data-layout="basic"] .nav {
  position: relative;
  border-top: var(--rule-w) solid var(--rule-ink);
  border-bottom: var(--hairline) solid var(--rule-ink);
}
/* 신문 이중 괘선: 굵은 선(border-top) 3px 아래에 얇은 선.
   마진으로 띄우면 제호 높이가 야간판과 어긋나므로 높이에 영향 없는 절대배치로 그린다 */
[data-theme="light"][data-layout="basic"] .nav::before {
  content: ""; position: absolute; top: var(--rule-gap); left: 0; right: 0;
  height: var(--hairline); background: var(--rule-ink);
}
/* 링크 사이 간격은 .nav 의 gap 이 아니라 링크가 갖는다.
   gap 은 우측 버튼(이름·판 전환·전체화면) 사이에도 그대로 붙어서,
   패딩으로 띄우는 야간판과 간격이 30px 씩 어긋났다. */
[data-theme="light"][data-layout="basic"] .nav-link + .nav-link { margin-left: 1.875rem; }
[data-theme="light"] .nav-link { font-size: .875rem; letter-spacing: .12em; color: var(--text); }
[data-theme="light"] .nav-link.is-current { color: var(--accent); }
[data-theme="light"] .edition { font-size: .9rem; letter-spacing: .14em; color: var(--text-mid); }
[data-theme="light"] .edition:hover { color: var(--text); }

/* 로그인 이름 — 메뉴와 같은 줄에 서므로 활자도 메뉴에 맞춘다.
   굵기·크기·자간이 저 혼자 달라서 같은 줄에서 튀어 보였다. 색으로만 구분한다. */
[data-theme="light"] .session-user {
  font-size: .875rem; font-weight: 700; letter-spacing: .12em; color: var(--text-mid);
}
[data-theme="light"] .session-user:hover { color: var(--text); }
[data-theme="light"] .fullscreen { color: var(--text-mid); }
[data-theme="light"] .fullscreen:hover { color: var(--text); }

/* 축약 헤더(특수 레이아웃 페이지) */
[data-theme="light"]:not([data-layout="basic"]) .masthead { background: var(--surface); }
[data-theme="light"]:not([data-layout="basic"]) .brand-name { font-size: 1.05rem; letter-spacing: .1em; }
[data-theme="light"]:not([data-layout="basic"]) .nav-link + .nav-link { margin-left: 1.125rem; }

/* ================= 지면 ================= */
/* 이 비율은 데스크톱에서만 쓰인다(태블릿·모바일은 layout.css 가 덮는다).
   머리기사 폭을 5% 줄여 우측 단(달력·날씨)에 준다 — 2.5:1 에서 머리기사 71.4% → 67.7% */
[data-theme="light"] { --stage-cols: 2.1fr 1fr; }
[data-theme="light"][data-layout="basic"] .stage { padding-top: 1.875rem; }

/* ---------- 머리기사 ---------- */
[data-theme="light"] .lead { padding-right: 2.5rem; border-right: var(--hairline) solid var(--rule-soft); }
[data-theme="light"] .lead-kicker {
  font-family: var(--ed-label); font-weight: 800; font-size: .75rem;
  letter-spacing: .3em; color: var(--accent);
}
[data-theme="light"] .lead-title {
  font-size: clamp(1.75rem, 3.6vw, 2rem); font-weight: 800; line-height: 1.22;
  letter-spacing: -.015em; margin-top: .875rem; text-wrap: pretty;
}
[data-theme="light"] .lead-deck {
  font-size: 1.0625rem; line-height: 1.7; color: var(--text-mid);
  margin-top: var(--sp-md); text-wrap: pretty;
}
[data-theme="light"] .lead-byline {
  gap: .875rem; margin: 1.125rem 0 1.25rem; padding-bottom: 1.25rem;
  border-bottom: var(--hairline) solid var(--rule-soft);
  font-family: var(--ed-label); font-weight: 700; font-size: .625rem;
  letter-spacing: .16em; color: var(--text-dim);
}
[data-theme="light"] .lead-body { column-count: 2; column-gap: 2rem; }
/* 발췌가 두어 문단뿐이면 단마다 한 줄씩만 들어가 조판이 무너진다(home.js 가 세어 붙인다) */
[data-theme="light"] .lead-body.is-short { column-count: 1; }
[data-theme="light"] .lead-body p {
  font-size: .9375rem; line-height: 1.95; color: var(--text);
  text-align: justify; margin-bottom: 1em; text-wrap: pretty;
}

/* ---------- 섹션 표제 ---------- */
[data-theme="light"] .sec-title {
  gap: .75rem;
  font-family: var(--ed-label); font-weight: 800; font-size: .75rem;
  letter-spacing: .3em; color: var(--accent);
}
[data-theme="light"] .sec-title::after {
  content: ""; flex-grow: 1; height: var(--hairline);
  background: color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ---------- 우측 단 ---------- */
[data-theme="light"] .rail { padding-left: 2.5rem; }
[data-theme="light"] .index-list { margin-top: .75rem; border-top: var(--hairline) solid var(--rule-ink); }
[data-theme="light"] .index-list li {
  justify-content: space-between; align-items: baseline;
  padding-block: .6875rem; border-bottom: var(--hairline) solid var(--rule-soft);
}
[data-theme="light"] .index-name { font-size: 1rem; font-weight: 700; }
[data-theme="light"] .index-num {
  font-family: var(--ed-label); font-weight: 700; font-size: .6875rem;
  letter-spacing: .16em; color: var(--text-dim);
}

/* 이번 달 달력 — 굵은 괘선 아래 표, 오늘은 먹으로 칠한다 */
[data-theme="light"] .cal-grid { margin-top: .75rem; border-top: var(--hairline) solid var(--rule-ink); }
[data-theme="light"] .cal-grid th {
  padding-block: .5rem; border-bottom: var(--hairline) solid var(--rule-soft);
  font-family: var(--ed-label); font-weight: 700; font-size: .6875rem; letter-spacing: .1em; color: var(--text-dim);
}
[data-theme="light"] .cal-grid td { height: 2.125rem; font-size: 1rem; font-weight: 700; }
[data-theme="light"] .cal-grid .is-sun,
[data-theme="light"] .cal-grid .is-holiday { color: var(--accent); }
[data-theme="light"] .cal-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; border-radius: 50%;
}
[data-theme="light"] .cal-grid .is-today .cal-num { background: var(--rule-ink); color: var(--bg); }
[data-theme="light"] .cal-lun { font-family: var(--ed-label); font-weight: 400; font-size: .6rem; color: var(--text-dim); }
[data-theme="light"] .cal-grid .has-mark::after {
  content: ""; position: absolute; left: 50%; bottom: .0625rem;
  width: .25rem; height: .25rem; margin-left: -.125rem; border-radius: 50%; background: var(--text-dim);
}
[data-theme="light"] .cal-list { margin-top: .625rem; border-top: var(--hairline) solid var(--rule-soft); }
[data-theme="light"] .cal-list li {
  gap: .75rem; padding-block: .4375rem; border-bottom: var(--hairline) solid var(--rule-soft); font-size: .8125rem;
}
[data-theme="light"] .cal-when {
  min-width: 2.75rem; font-family: var(--ed-label); font-weight: 700; font-size: .6875rem;
  letter-spacing: .08em; color: var(--text-dim);
}
[data-theme="light"] .cal-list .is-holiday .cal-name { color: var(--accent); font-weight: 700; }

/* 날씨 — 달력 아래, 같은 괘선 문법으로 */
[data-theme="light"] .weather { margin-top: 2.125rem; }
[data-theme="light"] .wx-now {
  column-gap: .875rem; margin-top: .75rem; padding-block: .875rem;
  border-top: var(--hairline) solid var(--rule-ink); border-bottom: var(--hairline) solid var(--rule-soft);
}
[data-theme="light"] .wx-place {
  font-family: var(--ed-label); font-weight: 700; font-size: .6875rem;
  letter-spacing: .16em; color: var(--text-dim);
}
[data-theme="light"] .wx-temp { font-family: var(--ed-display); font-size: 2.75rem; font-weight: 700; line-height: 1.15; }
[data-theme="light"] .wx-sky { font-size: 1rem; font-weight: 700; }
[data-theme="light"] .wx-meta,
[data-theme="light"] .wx-air { font-size: .8125rem; color: var(--text-mid); }
[data-theme="light"] .wx-days { column-gap: .875rem; }
[data-theme="light"] .wx-days li { padding-block: .6875rem; border-bottom: var(--hairline) solid var(--rule-soft); }
[data-theme="light"] .wx-day { font-size: 1rem; font-weight: 700; }
[data-theme="light"] .wx-day-sky { font-size: .875rem; }
[data-theme="light"] .wx-range { font-size: .875rem; font-weight: 700; }
[data-theme="light"] .wx-pop,
[data-theme="light"] .wx-src,
[data-theme="light"] .wx-msg {
  font-family: var(--ed-label); font-weight: 700; font-size: .6875rem;
  letter-spacing: .08em; color: var(--text-dim);
}
[data-theme="light"] .wx-src { margin-top: .625rem; }
[data-theme="light"] .wx-msg { margin-top: .75rem; }

[data-theme="light"] .status {
  border: var(--stroke-2) solid var(--rule-ink); padding: 1.25rem 1.125rem; margin-top: 2.125rem;
}
[data-theme="light"] .status .sec-title { color: var(--text); }
[data-theme="light"] .status .sec-title::after { background: var(--rule-soft); }
[data-theme="light"] .kv { margin-top: .9375rem; }
[data-theme="light"] .kv > div {
  padding-bottom: .5625rem; font-family: var(--ed-label); font-size: .75rem; line-height: 1.5;
}
[data-theme="light"] .kv dt { color: var(--text-dim); letter-spacing: .1em; }
[data-theme="light"] .kv dd { font-weight: 700; text-align: right; }
[data-theme="light"] .status-live {
  padding-top: .75rem; border-top: var(--hairline) solid var(--rule-soft);
  font-family: var(--ed-label); font-weight: 700; font-size: .625rem;
  letter-spacing: .14em; color: var(--text-mid);
}
[data-theme="light"] .dot { width: .4375rem; height: .4375rem; }

/* ---------- 3단 ---------- */
[data-theme="light"] .feeds {
  margin-top: 2.125rem; padding-top: 1.875rem;
  border-top: var(--rule-w) solid var(--rule-ink);
}
/* ---------- 단 사이 괘선 ----------
   형제 순서(.feed + .feed)로 그리면 2열·1열로 접힐 때 엉뚱한 자리에 괘선이 남는다.
   괘선은 여백 한가운데에 절대배치로 그리고, 격자에서 "첫 열"·"첫 행"에 해당하는
   항목만 열 수에 맞춰 꺼준다(꺼주는 규칙은 브레이크포인트별로 아래에). */
[data-theme="light"] .feed::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(var(--feed-gutter) / -2);
  width: var(--hairline); background: var(--rule-soft);
}
[data-theme="light"] .feed::after {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(var(--feed-row-gap) / -2);
  height: var(--hairline); background: var(--rule-soft);
}
[data-theme="light"] .entry { padding-block: 1.125rem; border-bottom: var(--hairline) solid var(--rule-soft); }
/* 각 단의 마지막 항목까지 밑줄이 남으면 단마다 끝나는 높이가 달라 지저분해진다 */
[data-theme="light"] .entry:last-child { border-bottom: none; }
[data-theme="light"] .entry-meta {
  font-family: var(--ed-label); font-weight: 700; font-size: .625rem;
  letter-spacing: .16em; color: var(--text-dim);
}
[data-theme="light"] .entry-title {
  font-size: 1.1875rem; font-weight: 800; line-height: 1.35;
  margin: .3125rem 0 .375rem; text-wrap: pretty;
}
[data-theme="light"] .entry-title a { color: inherit; }
[data-theme="light"] .entry-dek { font-size: .875rem; line-height: 1.65; color: var(--text-mid); text-wrap: pretty; }

/* ---------- 카드: 손 얹기 / 확대 ----------
   조간판에서는 종이 한 장이 지면에서 살짝 들리는 느낌. 확대되면 굵은 잉크 테두리가 둘러진다. */
[data-theme="light"] .card:not(.is-open) {
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
[data-theme="light"] .card:not(.is-open):hover {
  transform: translateY(-.125rem);
  box-shadow: 0 .375rem 1.125rem rgba(25, 23, 19, .10);
}
[data-theme="light"] .entry.card:not(.is-open):hover { background: var(--surface); }
[data-theme="light"] .card:not(.is-open):focus-visible {
  outline: var(--focus-ring) solid var(--accent); outline-offset: var(--focus-ring);
}

[data-theme="light"] .card.is-open {
  /* 바탕을 완전히 덮지 않는다. 뒤 지면이 비쳐야 새 화면이 아니라
     제자리에서 커진 것으로 읽힌다. 비침 정도는 val.css 의 --card-open-alpha 한 값이 정한다 */
  background: color-mix(in srgb, var(--surface) var(--card-open-alpha), transparent);
  padding: var(--sp-xl);
  border: var(--rule-w) solid var(--rule-ink);
  box-shadow: 0 1rem 3rem rgba(25, 23, 19, .22);
}
/* 지면에 있을 때의 단 구분선은 확대되면 의미가 없다 */
[data-theme="light"] .lead.card.is-open { border-right: var(--rule-w) solid var(--rule-ink); }
/* 펼치면 회차 전문이 들어와 세로로 길어진다. 2단을 유지하면 왼쪽 단을 끝까지 내려 읽고
   다시 맨 위로 올라가 오른쪽 단을 읽어야 하므로, 펼친 상태에서는 한 단으로 흘린다.
   폭은 제목·괘선과 같은 카드 폭을 그대로 쓴다 — 본문만 좁히면 좌우가 비어 보인다. */
[data-theme="light"] .lead.card.is-open .lead-body { column-count: 1; }
[data-theme="light"] .entry.card.is-open { border-bottom: var(--rule-w) solid var(--rule-ink); }
/* 확대된 3단 항목은 제목이 머리기사만큼 커진다 */
[data-theme="light"] .entry.card.is-open .entry-title {
  font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.22; letter-spacing: -.015em;
  margin: .625rem 0 .875rem;
}
[data-theme="light"] .entry .card-detail { column-count: 2; column-gap: 2rem; margin-top: 1.25rem; }
[data-theme="light"] .entry .card-detail p {
  font-size: .9375rem; line-height: 1.95; color: var(--text);
  text-align: justify; margin-bottom: 1em; text-wrap: pretty;
}

@media (max-width: 80em) {
  [data-theme="light"] .entry .card-detail { column-count: 1; }
}

/* ---------- 인쇄 이력 ---------- */
[data-theme="light"] .log {
  margin-top: 1.875rem; padding-block: var(--sp-md);
  border-top: var(--hairline) solid var(--rule-ink);
  border-bottom: var(--hairline) solid var(--rule-ink);
}
/* 열 간격은 목록이 소유한다 — subgrid 로 물려주는 축이라 줄에 걸면 안 먹는다 */
[data-theme="light"] .log-list { column-gap: 1.375rem; row-gap: .4375rem; margin-top: .8125rem; }
[data-theme="light"] .log-list li { row-gap: var(--sp-xs); font-family: var(--ed-label); font-size: .75rem; color: var(--text-mid); }
[data-theme="light"] .log-time { color: var(--text-dim); letter-spacing: .08em; }
[data-theme="light"] .log-kind { font-weight: 800; color: var(--accent); letter-spacing: .1em; }
[data-theme="light"] .log-ref { color: var(--text-dim); letter-spacing: .08em; }

/* ---------- 색인 ---------- */
[data-theme="light"] .tags { gap: 1.625rem; margin-top: 1.625rem; }
[data-theme="light"] .tags .sec-title { flex: 0 0 auto; }
[data-theme="light"] .tags .sec-title::after { display: none; }
[data-theme="light"] .tag-list {
  gap: 1.375rem; font-family: var(--ed-label); font-size: .8125rem;
  font-weight: 700; color: var(--text-mid); letter-spacing: .06em;
}
[data-theme="light"] .tag-list a { color: inherit; }

/* ---------- 판권 ---------- */
[data-theme="light"] .colophon {
  margin-top: 1.625rem; padding-top: var(--sp-md); padding-bottom: var(--sp-xl);
  border-top: var(--rule-w) solid var(--rule-ink);
  font-family: var(--ed-label); font-weight: 800; font-size: .6875rem;
  letter-spacing: .22em; color: var(--text-dim);
}

/* ---------- 태블릿 이하: 단이 무너지면 세로 괘선도 걷는다 ---------- */
@media (max-width: 48em) {
  [data-theme="light"] .lead { padding-right: 0; border-right: none; }
  [data-theme="light"] .lead-body { column-count: 1; }
  [data-theme="light"] .rail { padding-left: 0; margin-top: 1.875rem; }
  /* 1열: 세로 괘선 없음. 첫 단 위에만 가로 괘선을 빼고 나머지는 행 구분으로 남긴다 */
  [data-theme="light"] .feed::before { display: none; }
  [data-theme="light"] .feed:nth-child(1)::after { display: none; }
  [data-theme="light"] .colophon { flex-direction: column; align-items: flex-start; gap: var(--sp-xs); }
}

/* ---------- 모바일 확대 카드: 야간판만큼 본문을 싣는다 ----------
   375px 폭에서 조간판은 한 줄에 16자, 야간판은 22자였다. 여백이 2.5rem 이고 본문이 15px/1.95 라
   좁은 화면에서 지면 밀도가 그대로 비용이 된다. 여기서만 여백과 활자를 줄여 두 판을 맞춘다 —
   판형 자체(세리프·양끝맞춤·괘선)는 건드리지 않는다. */
@media (max-width: 48em) {
  [data-theme="light"] .card.is-open { padding: var(--sp-md); }
  [data-theme="light"] .lead-body p,
  [data-theme="light"] .entry .card-detail p {
    font-size: .875rem; line-height: 1.75; margin-bottom: .75em;
  }
  [data-theme="light"] .lead-deck { font-size: .9375rem; }
}

/* 태블릿: 지면 폭이 좁아 머리기사 2단은 한 단에 14자 정도밖에 안 들어간다 */
@media (min-width: 48.0625em) and (max-width: 80em) {
  [data-theme="light"] .lead-body { column-count: 1; }
}

/* ---------- 단 구분선: 열 수에 맞춰 "첫 열 / 첫 행"만 끈다 ---------- */

/* 태블릿 2열 — 1·3번째가 첫 열, 1·2번째가 첫 행 */
@media (min-width: 48.0625em) and (max-width: 80em) {
  [data-theme="light"] .feed:nth-child(2n+1)::before { display: none; }
  [data-theme="light"] .feed:nth-child(-n+2)::after { display: none; }
}

/* 데스크톱 3열 — 1번째만 첫 열, 전부 첫 행이라 가로 괘선은 없음 */
@media (min-width: 80.0625em) {
  [data-theme="light"] .feed:nth-child(3n+1)::before { display: none; }
  [data-theme="light"] .feed::after { display: none; }
}

/* 확대된 카드 뒤의 지면은 잉크 한 겹을 덮어 가라앉힌다.
   layout.css 의 기본값(--menu-bg)은 종이색이라 조간판에서는 거의 안 눌린다 */
[data-theme="light"] .card-backdrop { background: rgba(25, 23, 19, .30); }