/*
 * news-single.css — 위닥스 뉴스 상세(/news/{slug}/) 전용 보강 스타일 (2026-08-07)
 *
 * 뉴스 상세는 칼럼 상세와 같은 .column-article__* 마크업/레이아웃을 재사용한다.
 * 이 파일은 **칼럼에 없는 뉴스 고유 블록만** 담는다 — column-single.css 를 건드리지 않아
 * 칼럼 상세 회귀 위험 0.
 *   · .news-progress   읽기 진행률 바
 *   · .news-safety     응급 상황 안내
 *   · .news-sources    출처 및 참고 자료 (칼럼 references 위에 뉴스 톤만 덧입힘)
 *   · .news-imprint    발행 정보 · 정정 안내
 *   · .info-share-cta  하단 공유 CTA (인라인 style 이관)
 * 의존: column-single.css (레이아웃/사이드바/목차). 반드시 뒤에 로드된다.
 */

/* ───────────────────── 읽기 진행률 ─────────────────────
   기사 본문의 스크롤 위치를 상단 얇은 바로 표시. 장식 요소라 JS 없으면 폭 0 으로 남아
   보이지 않는다(정보 손실 없음).
   ⚠️ 뷰포트 최상단 fixed — .header 가 `position:sticky; top:0; z-index:100` 이라
      같은 top:0 에 낮은 z-index 로 두면 헤더 뒤에 깔려 아예 안 보인다. 헤더 위에 얹는다. */
.news-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
  height: 3px;
  background: transparent;
  pointer-events: none;
}

/* 본문이 한 화면에 다 들어오는 짧은 기사 — JS 가 부착. 추적할 스크롤이 없어 바를 숨긴다. */
.news-progress.is-idle { display: none; }

.news-progress__bar {
  width: 0;
  height: 100%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, var(--primary, #0a52cf), var(--accent, #07a99a));
  transition: width .1s linear;
}

/* ───────────────────── 응급 상황 안내 ─────────────────────
   기사 주제와 무관하게 항상 참인 안전 정보. 면책 문구(sc-disclaimer)와 톤을 구분해야
   "형식적 고지"로 흘려보지 않으므로 경고색(코랄) 계열로 분리. */
.news-safety {
  display: flex;
  gap: 12px;
  margin: 24px 0;
  padding: 16px 18px;
  background: rgba(239, 118, 98, .06);
  border: 1px solid rgba(239, 118, 98, .28);
  border-radius: 14px;
}

.news-safety__icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(239, 118, 98, .14);
  color: #c2410c;
}

.news-safety__body { min-width: 0; }

.news-safety__title {
  margin: 0 0 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text, #132238);
  letter-spacing: -0.005em;
}

.news-safety__text {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-sub, #4f6278);
  word-break: keep-all;
}

.news-safety__text strong { color: #c2410c; font-weight: 700; }

.news-safety__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.news-safety__link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: #c2410c;
  background: #fff;
  border: 1px solid rgba(239, 118, 98, .35);
  border-radius: 999px;
  text-decoration: none;
  transition: background var(--transition, .22s ease), border-color var(--transition, .22s ease);
}

.news-safety__link:hover {
  background: rgba(239, 118, 98, .08);
  border-color: rgba(239, 118, 98, .55);
}

/* ───────────────────── 출처 및 참고 자료 ─────────────────────
   칼럼 .column-article__references 골격을 그대로 쓰되, 뉴스에서는 "누구 말인지"가
   기사 신뢰도의 핵심이라 좌측 강조선으로 시각 위계를 한 단계 올린다. */
.news-sources {
  border-left: 3px solid var(--primary, #0a52cf);
}

/* ───────────────────── 발행 정보 · 정정 안내 ─────────────────────
   인터넷신문 등록 매체의 기사 하단 표기(발행 주체·발행일·정정 창구·저작권).
   본문이 아니라 서지 정보이므로 톤을 낮춰 본문 흐름을 방해하지 않게 한다. */
.news-imprint {
  margin: 28px 0 0;
  padding: 18px 20px;
  background: var(--muted, #edf3f9);
  border: 1px solid var(--border, #d8e2ee);
  border-radius: 14px;
}

.news-imprint__title {
  margin: 0 0 12px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text, #132238);
  letter-spacing: -0.005em;
}

.news-imprint__list { margin: 0; }

.news-imprint__row {
  display: flex;
  gap: 10px;
  padding: 5px 0;
  font-size: 12.5px;
  line-height: 1.65;
}

.news-imprint__label {
  flex-shrink: 0;
  width: 62px;
  font-weight: 600;
  color: var(--text-sub, #4f6278);
}

.news-imprint__value {
  margin: 0;
  min-width: 0;
  color: var(--text-sub, #4f6278);
  word-break: keep-all;
}

.news-imprint__value a {
  color: var(--primary, #0a52cf);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.news-imprint__copyright {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #d8e2ee);
  font-size: 11.5px;
  color: var(--text-muted, #5a6a80);
  word-break: keep-all;
}

/* ───────────────────── 하단 공유 CTA ─────────────────────
   기존 인라인 style 을 이관. 뉴스는 확산이 핵심 KPI 라 버튼을 넉넉히. */
.info-share-cta {
  margin: 32px 0;
  padding: 22px 20px;
  background: var(--surface, #fff);
  border: 1.5px solid var(--border, #d8e2ee);
  border-radius: 14px;
  text-align: center;
}

.info-share-cta__text {
  margin: 0 0 12px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text, #132238);
  word-break: keep-all;
}

.info-share-cta .btn {
  min-height: 44px; /* 터치 타깃 최소 44px */
  padding-inline: 22px;
}

/* ───────────────────── 기자 프로필 ─────────────────────
   카드 골격은 칼럼 전문가 카드(.column-article__doctor-card, column-single.css)를 재사용.
   여기는 뉴스 전용 추가분만: 바이라인 44px 아바타 + 카드 하단 문의 안내. */
.news-byline__avatar {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 0 0 1px var(--border, #d8e2ee);
}

.news-reporter-card__note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border, #d8e2ee);
  font-size: 12px;
  color: var(--text-muted, #5a6a80);
  word-break: keep-all;
}

.news-reporter-card__note a {
  color: var(--primary, #0a52cf);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ───────────────────── 사이드바 액션 카드 ───────────────────── */
.news-action-card__caption {
  margin: 0 0 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-sub, #4f6278);
  line-height: 1.5;
  word-break: keep-all;
}

/* ───────────────────── 모바일 노출 순서 ─────────────────────
   ≤1024px 에서 column-single.css 가 main/sidebar 를 display:contents 로 풀고 order 로 재배치한다
   (본문 1 → 액션·CTA 2 → 관련 3 → 나머지 사이드바 4).
   발행 정보는 서지 정보라 본문 끝(order 1)에 그대로 두면 액션·관련 기사보다 위로 올라온다.
   → 5 로 밀어 페이지 최하단에 오도록 한다. */
@media (max-width: 1024px) {
  .column-article__main > .news-imprint { order: 5; }
}

/* ───────────────────── 터치 타깃 / 접근성 ─────────────────────
   모바일에서 칩·태그·목차 링크가 44px 미만이면 오탭이 잦다. 뉴스 상세에 한정해 보정. */
@media (max-width: 767px) {
  .news-article-page .column-article__hero-chip,
  .news-article-page .column-article__tags .wiki-card__tag {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
  }
  .news-article-page .news-safety__link { min-height: 40px; }
  .news-imprint__row { flex-direction: column; gap: 2px; }
  .news-imprint__label { width: auto; }
}

/* 키보드 포커스 — 신규 인터랙션 요소에도 동일 링 적용. */
.news-safety__link:focus-visible,
.info-share-cta .btn:focus-visible,
.news-imprint__value a:focus-visible {
  outline: 2px solid var(--primary, #0a52cf);
  outline-offset: 2px;
}

/* 모션 축소 설정 — 진행률 바의 폭 트랜지션 제거. */
@media (prefers-reduced-motion: reduce) {
  .news-progress__bar { transition: none; }
  .news-safety__link { transition: none; }
}

/* 인쇄 — 진행률 바 / 공유 CTA 는 종이에서 의미 없음. 출처·발행 정보는 남긴다. */
@media print {
  .news-progress,
  .info-share-cta { display: none !important; }
  .news-imprint {
    background: transparent;
    border: 1px solid #ccc;
  }
}