/* ============================================================
   monday9.com — NEWS 공개 페이지 · 홈 블록 (SPEC-NEWS-DESIGN v1.0 §2·§3)
   @front_dev / 2026-09-07

   원칙: 새 토큰 0 · 새 색 0 — 전부 noir.css 토큰(hex 리터럴 금지).
   기존 상세 셸(noir + site + detail) 위에 얹는 규칙만 둔다. 스코프:
     .news          — 공개 목록·상세(main.detail-main.news) · 미리보기 iframe 본문
     .news-home     — 홈 NEWS 블록(site.js 렌더 — 카드형 v1.2, index.html이 이 파일을 로드)
   관리자 NEWS 탭 규칙은 여기 두지 않는다(news-admin.css) — 미리보기 iframe이 이 파일만 로드한다.
   ============================================================ */

/* ---------- 공통 ---------- */
/* .rule-gold는 site.css에서 scaleX(0)로 시작해 .reveal.in에서 그려진다.
   상세·목록은 스크롤 연출 대상이 아니고(detail.js 원칙) 첫 페인트에 다 있어야 하므로 JS 없이 그려진 상태로 둔다. */
.news .rule-gold { transform: none; transition: none; }
/* sec-head 는 홈과 같은 세로 스택(룰 위·라벨 아래, site.css 기본) — QA C2: 홈 NEWS 코다 → 목록 머리가 이어져야 한다 */

/* ---------- 목록 /news/ — 헤어라인 표 (§3.1) ---------- */
.news-empty { font-size: var(--fs-small); color: var(--fg-dim); margin-block-start: var(--sp-5); }

.news-list { list-style: none; margin: var(--sp-5) 0 0; padding: 0; }
.news-list li { border-block-start: var(--rule-hair) solid var(--rule); }
.news-list li:last-child { border-block-end: var(--rule-hair) solid var(--rule); }
.news-list a {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  grid-template-areas: "d t ind" "d s s";
  column-gap: var(--sp-3);
  row-gap: var(--sp-1);
  padding-block: var(--sp-3);
  min-height: 56px;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
}
.news-list .d {
  grid-area: d;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  padding-block-start: 0.35em;   /* 제목 baseline 맞춤 */
}
.news-list .t {
  grid-area: t;
  font-family: var(--font-sans);
  font-size: var(--fs-card);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--fg);
  transition: color var(--dur-fast) var(--ease);
}
.news-list a:hover .t { color: var(--gold); }
.news-list .s {
  grid-area: s;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-mute);
  max-width: 64ch;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.news-list .ind {
  grid-area: ind;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--fg-dim);
  white-space: nowrap;
  padding-block-start: 0.35em;
}
/* 인디케이터 2종은 템플릿이 한 span 안에 " · "로 이어 넣는다(0은 미표기 = 빈 span) */

/* 페이저 — .detail-links 행 문법 재사용, 이전/다음만 */
.news-pager { display: flex; justify-content: space-between; gap: var(--sp-3); }
.news-pager li { flex: 1 1 0; border-block-start: var(--rule-hair) solid var(--rule); border-block-end: var(--rule-hair) solid var(--rule); }
.news-pager li:last-child { border-block-end: var(--rule-hair) solid var(--rule); }
.news-pager li:only-child { flex: 1 1 100%; }
.news-pager li:first-child a { justify-content: flex-start; }
.news-pager li:last-child a { justify-content: flex-end; }
.news-pager li:only-child a { justify-content: space-between; }
.news-pager a > span:not(.label) { color: var(--fg-mute); }

/* ---------- 상세 /news/{slug}/ (§3.2) ---------- */
.news-head { margin-block: var(--sp-6) var(--sp-7); }
.news-kicker { margin: 0; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.news-kicker time { color: inherit; }
/* 국문 제목 = 산세리프 600 폴백(as-built §7b-1). --font-display 스택은 generic serif로 끝나 한글이 명조로 떨어지므로
   Playfair 뒤를 산세리프 스택으로 잇는다 — 영문은 그대로 Playfair, 한글만 시스템 산세리프(규칙 분기 0). */
.news-title { max-width: 32ch; font-family: "Playfair Display", var(--font-sans); }
.news-summary { max-width: 64ch; }
.news-cover { margin: var(--sp-5) 0 0; padding: 0; max-width: 880px; }
.news-cover img { display: block; width: 100%; max-width: 100%; height: auto; max-height: 70vh; width: auto; box-shadow: var(--noir-shadow); }   /* 원색 — 필터 없음(콘텐츠 이미지 예외). QA C3: 세로 커버가 1366×768 에서 1,320px 로 첫 화면을 넘겨 70vh 상한(좌측 정렬, 폭은 비율 따라 축소) */

.news-files { margin-block-start: var(--sp-6); }
.news-files .bh { margin: 0 0 var(--sp-1); color: var(--fg-mute); }
/* lectures.css .file/.fn/.fm 값 복제(그 파일은 .lect 스코프라 공개 셸이 로드하지 않는다) */
.news-files .file {
  display: flex; align-items: center; gap: 12px; min-height: 44px;
  text-decoration: none; color: var(--fg);
  border-block-start: var(--rule-hair) solid var(--rule);
}
.news-files .file:last-child { border-block-end: var(--rule-hair) solid var(--rule); }
.news-files .fn { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); transition: color var(--dur-fast) var(--ease); }
.news-files .file:hover .fn { color: var(--gold); }
.news-files .fm { font-size: var(--fs-label); letter-spacing: 0.08em; color: var(--fg-dim); white-space: nowrap; font-variant-numeric: tabular-nums; }

.news-meta { margin: var(--sp-6) 0 0; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
.news-meta .upd { color: inherit; }

/* ---------- 본문 마크다운 조판 (§3.3) — 서버 렌더러 출력 태그 기준 ---------- */
.news-body { max-width: 64ch; font-family: var(--font-sans); }
.news-body > :first-child { margin-block-start: 0; }
/* QA D1 — 긴 URL(링크카드 폴백 앵커 등)이 모바일 폭을 밀어내 가로 스크롤 395px 발생 → 어디서든 접는다 */
.news-body p, .news-body li, .news-body blockquote, .news-body figcaption { overflow-wrap: anywhere; }

.news-body h1,
.news-body h2 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: calc(var(--fs-card) * 1.15);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: var(--sp-6) 0 var(--sp-3);
  padding-block-end: var(--sp-2);
  border-block-end: var(--rule-hair) solid var(--rule);
}
.news-body h3,
.news-body h4,
.news-body h5,
.news-body h6 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--fs-body);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: var(--sp-4) 0 var(--sp-2);
}

.news-body p {
  font-size: var(--fs-body);
  line-height: 1.75;   /* 국문 행간 — .prose p(1.65)보다 한 단 풂 */
  color: var(--fg-mute);
  margin: 0 0 var(--sp-3);
}
.news-body strong { color: var(--fg); font-weight: 600; }
.news-body em { font-style: italic; }
.news-body del { color: var(--fg-dim); }

/* 목록 — site.css 전역 list-style:none 리셋을 스코프 안에서 복원 */
.news-body ul, .news-body ol { margin: 0 0 var(--sp-3); padding-inline-start: var(--sp-4); }
.news-body ul { list-style: disc; }
.news-body ol { list-style: decimal; }
.news-body ul ul { list-style: circle; }
.news-body li { font-size: var(--fs-body); line-height: 1.75; color: var(--fg-mute); margin-block-end: var(--sp-1); }
.news-body li::marker { color: var(--fg-dim); }
.news-body li > p { margin-block-end: var(--sp-1); }

.news-body blockquote {
  margin: var(--sp-4) 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-inline-start: var(--rule-mark) solid var(--gold);   /* THIS WEEK inset 문법의 세로 전개 */
}
.news-body blockquote p { color: var(--fg); }
.news-body blockquote > :last-child { margin-block-end: 0; }

.news-body code {
  background: var(--bg-raise);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.1em 0.35em;
  border-radius: 0;
}
.news-body pre {
  background: var(--bg-raise);
  padding: var(--sp-3);
  margin: 0 0 var(--sp-3);
  overflow-x: auto;
  max-width: 100%;
  font-size: var(--fs-small);
  line-height: 1.6;
  color: var(--fg-mute);
}
.news-body pre code { background: none; padding: 0; font-size: inherit; color: inherit; }

/* 표 — 서버가 .table-wrap으로 감싼다(부록 A-4). detail.css 규칙 그대로 + 산문 셀 줄바꿈 허용 */
.news-body .table-wrap { margin: var(--sp-3) 0; }
.news-body .table-wrap td { white-space: normal; }
.news-body .table-wrap table { min-width: 480px; }   /* QA D2: 0 이면 390 에서 셀 89px 압착·단어 중간 개행. detail.css 모바일 값과 동일 — 래퍼가 스크롤한다 */

/* 이미지 테두리 — 1px 헤어라인(--rule-hair · --rule: 카드 상단 헤어라인·목록 구분선과 같은 토큰). 직각.
   outline + 음수 offset 으로 이미지 '안쪽'에 그린다 — 바깥 크기·레이아웃 불변(홈 카드 썸네일 하단 정렬 편차 0 유지).
   img·video 같은 대체 요소는 inset box-shadow 가 콘텐츠에 가려 보이지 않으므로 outline 을 쓴다.
   적용: 상세 커버 · 본문 사진 · 영상 포스터 면 · 홈 카드 썸네일 프레임(썸네일 없는 텍스트 카드에는 요소 자체가 없다) */
.news-cover img,
.news-body .fig img,
.news-body .video video,
.news-card-thumb {
  outline: var(--rule-hair) solid var(--rule);
  outline-offset: calc(-1 * var(--rule-hair));
}

/* 이미지 — 서버 출력 figure.fig(A-4). 원색·--noir-shadow·캡션 = alt */
.news-body .fig { margin: var(--sp-4) 0; padding: 0; }
.news-body .fig img { display: block; max-width: 100%; height: auto; box-shadow: var(--noir-shadow); }
.news-body .fig figcaption,
.news-body .video figcaption { margin-block-start: var(--sp-1); font-size: var(--fs-small); color: var(--fg-dim); line-height: var(--lh-body); }

/* 자체 호스팅 영상 — 서버 출력 figure.video > video[controls][poster] > source (DESIGN-NEWS-VIDEO-BLOCK.md).
   .embed 와 같은 폭·16:9 면·--bg-raise 바탕(포스터 로드 전·레터박스 여백), 모서리는 --radius 0 규약 그대로.
   캡션은 위 .fig figcaption 규칙을 공유한다. 네이티브 컨트롤 — 새 색·이징 없음 */
.news-body .video { margin: var(--sp-4) 0; padding: 0; }
.news-body .video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--bg-raise);
  box-shadow: var(--noir-shadow);
}

.news-body a {
  color: var(--fg);
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.15em;
  transition: color var(--dur-fast) var(--ease), text-decoration-color var(--dur-fast) var(--ease);
}
.news-body a:hover { color: var(--gold); text-decoration-color: currentColor; }

.news-body hr { border: 0; border-block-start: var(--rule-hair) solid var(--rule); margin: var(--sp-6) 0; }

/* 링크카드 — 서버 출력 a.linkcard(A-4). .detail-links 행 문법 확장, OG 이미지 없음 */
.news-body .linkcard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "t a" "h a";
  align-items: center;
  gap: 2px var(--sp-3);
  padding: var(--sp-3) 0;
  margin: var(--sp-4) 0;
  border-block: var(--rule-hair) solid var(--rule);
  text-decoration: none;
  color: var(--fg);
}
.news-body .linkcard + .linkcard { border-block-start: 0; margin-block-start: calc(var(--sp-4) * -1); }
.news-body .linkcard-title {
  grid-area: t;
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--fg);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.news-body .linkcard-host {
  grid-area: h;
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.news-body .linkcard::after {
  content: "→";
  grid-area: a;
  color: var(--fg-mute);
  transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.news-body .linkcard:hover::after { color: var(--gold); transform: translateX(4px); }

/* ---------- 임베드 — 클릭 전 정적 프레임 (§3.4) ---------- */
/* 서버 출력 figure.embed[data-embed][data-id] > a.embed-frame. iframe은 news.js가 클릭 시 같은 자리에 넣는다.
   외부 썸네일·아이콘 자산 0 — 재생 표시는 CSS 도형(직각 윤곽 + 삼각형, --radius 0 규약). */
.news-body .embed {
  position: relative;
  margin: var(--sp-4) 0;
  padding: 0;
  aspect-ratio: 16 / 9;
  background: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(242, 243, 245, 0.06), transparent 60%), var(--bg-raise);
}
.news-body .embed-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  text-decoration: none;
  color: var(--fg);
  box-shadow: inset 0 0 0 var(--rule-hair) var(--rule);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.news-body .embed-frame:hover,
.news-body .embed-frame:focus-visible { box-shadow: inset 0 0 0 1px var(--gold); outline: none; }
.news-body .embed-frame::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, calc(-50% - 48px));
  box-shadow: inset 0 0 0 var(--rule-hair) var(--fg-mute);
  transition: box-shadow var(--dur-fast) var(--ease);
}
.news-body .embed-frame::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(calc(-50% + 2px), calc(-50% - 48px));
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent var(--fg-mute);
  transition: border-color var(--dur-fast) var(--ease);
}
.news-body .embed-frame:hover::before { box-shadow: inset 0 0 0 var(--rule-hair) var(--gold); }
.news-body .embed-frame:hover::after { border-left-color: var(--gold); }
.news-body .embed-title {
  font-size: var(--fs-card);
  font-weight: 500;
  line-height: var(--lh-tight);
  color: var(--fg);
  text-align: center;
  max-width: 32ch;
  padding-block-start: 64px;   /* 재생 도형 자리 */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.news-body .embed-host {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-3);
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-dim);
}
.news-body .embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 홈 NEWS 블록 (§2 v1.2 카드형) — BOOKS의 코다 ---------- */
/* 패딩·:has 규칙은 v1.1 그대로(코다 간격 기준 ⓑ·ⓒ 불변 — QA C1: NEWS 상단 48 + BOOKS 하단 72 = 120px, BOOKS 하단 패딩은 NEWS 가 실제로
   삽입된 경우에만 낮아진다. 폴백·:has 미지원은 168 그대로 = API 실패 시 홈 픽셀 불변. NEWS→CONTACT 336 유지). 배경은 .sec 기본(--bg) — --bg-deep 금지.
   v1.1 텍스트 3행 규격은 SPEC-NEWS-DESIGN §2.8 폐기 기록 참조. */
.news-home { padding-block: var(--sp-5) var(--sp-8); }
.sec:has(+ .news-home) { padding-block-end: var(--sp-6); }

.news-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));   /* .cards 와 같은 분기·거터. minmax(0,…) — 769~789 가로 스크롤 방어(site.css .cards 주석 참조) */
  gap: var(--sp-4) var(--gutter);
}
/* 카드 전체가 링크(BOOKS .book-link 원칙). 패널(--bg-raise 면·주홍 상단 룰) 없음 — 코다는 BOOKS·목록과 같은 헤어라인 문법 */
.news-card-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  border-block-start: var(--rule-hair) solid var(--rule);
  padding-block-start: var(--sp-3);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-fast) var(--ease);
}
.news-card-date {
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--sp-1);
}
.news-card-title {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.35;            /* 국문 3행 — 1.2 는 붙고 1.65 는 카드 높이 낭비(조판 리터럴, 색·이징 아님) */
  color: var(--fg);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  overflow-wrap: anywhere;
  margin-block-end: var(--sp-2);
  transition: color var(--dur-fast) var(--ease);
}
.news-card-thumb {
  display: block;
  margin-block-start: auto;     /* 같은 행의 썸네일 하단을 한 선에 — 제목 행수 차이는 위에서 흡수 */
  aspect-ratio: 16 / 10;
  background: var(--bg-raise);  /* 로드 전·세로 원본 contain 여백에서만 보인다 */
  overflow: hidden;
}
.news-card-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;     /* 원색 — 필터 없음(콘텐츠 이미지 확정 ⑤). 그림자 없음 — 4장 격자에 24px 그림자는 소음 */
}
.news-card-thumb.is-portrait img { object-fit: contain; }
.news-card-link:hover,
.news-card-link:focus-visible { border-block-start-color: var(--gold); }
.news-card-link:hover .news-card-title,
.news-card-link:focus-visible .news-card-title { color: var(--gold); }
.news-card-link:focus-visible { outline: var(--rule-hair) solid var(--gold); outline-offset: 4px; }   /* 직각 아웃라인(--radius 0) */

.news-more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  min-height: 44px;
  margin-block-start: var(--sp-4);   /* v1.2: sp-3 → sp-4 — 헤어라인 아래가 아니라 이미지 하단선 아래에 서므로 한 단 더 */
  font-size: var(--fs-label);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-mute);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.news-more:hover { color: var(--gold); }
.news-more .arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.news-more:hover .arrow { transform: translateX(4px); }

/* ---------- 모바일 (§5) — 조건 분기 없이 행 구조를 고정한다 ---------- */
@media (max-width: 768px) {
  /* 목록: 날짜 / 제목 / 요약 / 인디케이터 4행 고정(LECTURES §7c 원칙) */
  .news-list a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "d" "t" "s" "ind"; row-gap: 6px; }
  .news-list .ind:empty { display: none; }
  .news-list .d, .news-list .ind { padding-block-start: 0; }
  /* 첨부 행: 파일명 1행 + 메타 2행 */
  .news-files .file { flex-wrap: wrap; row-gap: 0; padding-block: 6px; }
  .news-files .fn { flex-basis: 100%; }
  .news-files .fm { padding-inline-start: 0; }
  /* 임베드 */
  .news-body .embed-frame { padding: var(--sp-3); }
  .news-body .embed-title { font-size: var(--fs-body); padding-block-start: 56px; }
  .news-body .embed-frame::before { transform: translate(-50%, calc(-50% - 40px)); }
  .news-body .embed-frame::after { transform: translate(calc(-50% + 2px), calc(-50% - 40px)); }
  .news-body .embed-host { left: var(--sp-3); bottom: var(--sp-2); }
  /* 홈 블록: 카드 2열(2×2 한 덩어리, §2.2 — .band 모바일 2열 선례). 1열은 4카드 스택이 BOOKS 내용부의 0.96 이 되어 기각 */
  /* 코다 간격 32+48 = 80px(모바일 row-gap 72, 기준 ⓑ ≤83). 하단 sp-6 — NEWS→CONTACT 72+72 = 144 ≥ 간격×1.5(120), 스펙 §2 v1.1a
     (@designer 재검수: ×2 는 모바일 섹션 리듬을 깨서만 충족되는 값이라 ×1.5 로 완화, 144 vs 80 = 1.8배로 "CONTACT 보다 BOOKS 에 가깝다" 성립) */
  .news-home { padding-block: var(--sp-4) var(--sp-6); }
  .sec:has(+ .news-home) { padding-block-end: var(--sp-5); }
  .news-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-2); row-gap: var(--sp-4); }
}