/* IAX 보안 뉴스룸 — site.css(iax.kr 디자인 시스템 복사본) 위에 얹는 뉴스 전용 스타일.
   토큰·기초·카드·글 페이지 스타일은 site.css가 담당한다. 여기는 마스트헤드·히어로·아이템 구조만. */

/* ───────── 뉴스룸 헤더(마스트헤드) ───────── */
:root { --header-h: 112px; }

.news-head {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--line);
}
.news-head .wrap { position: relative; }
.news-head-top { height: 68px; display: flex; align-items: center; gap: 20px; }
.news-head .logo { font-size: 22px; }
.news-head .logo::after { content: "보안 뉴스룸"; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink-2); margin-left: 10px; }
.channel-nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  height: 44px;
  font-size: 14.5px;
  border-top: 1px solid var(--line);
}
.channel-nav > a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  color: var(--ink-2);
  transition: background .2s;
}
.channel-nav > a:hover, .channel-nav > a[aria-current="page"] { background: var(--paper-2); color: var(--ink); }
.nav-sep { color: var(--line-strong); font-size: 12px; }

/* ───────── 홈 히어로: 오늘의 브리핑 ───────── */
.news-hero { padding-block: clamp(36px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.news-hero .eyebrow { color: var(--accent); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px 56px; align-items: start; }
.news-hero h1 { font-size: var(--step-4); letter-spacing: -0.035em; }
.news-hero .lede { margin-top: 14px; font-size: var(--step-1); color: var(--ink-2); max-width: 44ch; line-height: 1.6; }
.hero-items { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line-strong); display: grid; }
.hero-items li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--line); }
.hero-items li a { font-weight: 600; border-bottom: 1px solid transparent; }
.hero-items li a:hover { border-color: var(--ink); }
.hero-side { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 22px; }
.hero-side .side-title { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
.hero-side > p { font-size: 15px; color: var(--ink-2); margin-top: 10px; }
.hero-side .signal-strip { margin-top: 18px; grid-template-columns: 1fr; border-top: 0; }
.hero-side .signal-strip div { border-top: 1px solid var(--line); padding: 12px 0 0; }
.hero-side .signal-strip div + div { padding-left: 0; border-left: 0; margin-top: 12px; }

/* ───────── 브리핑 카드 ───────── */
.brief-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 14px; }
.brief-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  transition: border-color .25s, transform .35s var(--ease), box-shadow .35s;
}
.brief-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.brief-card .meta { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.brief-card h3 { font-size: var(--step-1); line-height: 1.42; letter-spacing: -0.02em; }
.brief-card h3 a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.brief-card > p { color: var(--muted); font-size: 15px; line-height: 1.65; }
.brief-card .foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; font-size: var(--step--1); color: var(--faint); font-family: var(--font-mono); padding-top: 10px; border-top: 1px dashed var(--line); }
.card-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 14.5px; color: var(--ink-2); }
.card-items li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: baseline; }
.card-items li.more { color: var(--faint); font-family: var(--font-mono); font-size: var(--step--1); }
.tag.type { color: var(--accent); }
.brief-card .date { color: var(--faint); font-size: var(--step--1); }

/* ───────── 채널 표(color chip) ───────── */
.tag.ch-vuln { color: var(--caution); background: var(--caution-wash); }
.tag.ch-incident { color: var(--note); background: var(--note-wash); }
.tag.ch-policy { color: var(--accent); background: var(--accent-wash); }
.tag.ch-tactic { color: var(--ink-2); background: var(--paper-2); }
.tag.ch-ai { color: var(--signal); background: var(--signal-wash); }

/* ───────── 브리핑 본문: 아이템 구조 ───────── */
.prose { counter-reset: nitem; }
.news-item { position: relative; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line-strong); counter-increment: nitem; }
.prose .news-item:first-of-type { margin-top: 8px; }
.news-item > h2 { font-size: var(--step-2); line-height: 1.35; letter-spacing: -0.025em; }
.news-item > h2::before {
  content: counter(nitem, decimal-leading-zero);
  display: block;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: .06em;
  color: var(--faint);
  margin-bottom: 6px;
}
.news-item::before {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .02em;
  padding: 3px 10px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.news-item[data-channel="vuln"]::before { color: var(--caution); background: var(--caution-wash); }
.news-item[data-channel="incident"]::before { color: var(--note); background: var(--note-wash); }
.news-item[data-channel="policy"]::before { color: var(--accent); background: var(--accent-wash); }
.news-item[data-channel="tactic"]::before { color: var(--ink-2); background: var(--paper-2); }
.news-item[data-channel="ai"]::before { color: var(--signal); background: var(--signal-wash); }
.news-item h3.why, .news-item h3.todo {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  margin-top: 26px;
}
.news-item h3.why { color: var(--note); }
.news-item h3.todo { color: var(--accent); }
.news-item h3.why + p, .news-item h3.todo + p, .news-item h3.todo + ul { border-left: 2px solid var(--line-strong); padding-left: 16px; }
.news-item h3.todo + ul { list-style: none; margin: 8px 0 0; padding: 0 0 0 16px; display: grid; gap: 8px; }
.news-item h3.todo + ul li { position: relative; padding-left: 16px; color: var(--ink-2); }
.news-item h3.todo + ul li::before { content: "□"; position: absolute; left: 0; color: var(--faint); font-size: 12px; top: 4px; }

/* ───────── 채널 페이지·기타 ───────── */
.question-index .idx { font-size: 13px; }
.row-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; font-size: 14.5px; color: var(--muted); }
.row-items li::before { content: "— "; color: var(--faint); }
.iax-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.iax-links a { border-bottom: 1px solid var(--line-strong); }
.about-prose { max-width: 76ch; }
.about-band p { max-width: 68ch; color: var(--ink-2); }
.empty-hint { color: var(--muted); padding: 20px 0; grid-column: 1 / -1; }

/* ───────── 반응형 ───────── */
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-side { order: -1; }
}
@media (max-width: 860px) {
  :root { --header-h: 68px; }
  .channel-nav, .nav-sep { display: none; }
  .news-head .logo::after { font-size: 14px; margin-left: 8px; }
  .hero-items li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}
@media (max-width: 560px) {
  .news-hero h1 { font-size: var(--step-3); }
  .news-item > h2 { font-size: var(--step-1); }
}

/* ───────── 인쇄 ───────── */
@media print {
  .news-head, .hero-side, .channel-nav, .news-item h3.todo + ul li::before { display: none !important; }
  .news-item { break-inside: avoid; margin-top: 18px; padding-top: 14px; }
}

/* 아이템 채널 표: 채널 목록은 lab/build.py 가 정본 */
.news-item[data-channel="vuln"]::before{content:"취약점·패치"}
.news-item[data-channel="incident"]::before{content:"침해·사고"}
.news-item[data-channel="policy"]::before{content:"정책·규제"}
.news-item[data-channel="tactic"]::before{content:"도구·기법"}
.news-item[data-channel="ai"]::before{content:"AI·보안"}