/*
 * SQ타임즈 스타일 (모든 페이지 공통, 이 파일 하나뿐)
 *
 * 디자인 방침 (오너 결정 5: 섞기)
 * - 제호와 제목(h1~h3)은 명조(세리프): 신문다운 품위
 * - 본문은 고딕(산세리프): 휴대폰 작은 화면에서 또렷하게
 * - 웹폰트를 내려받지 않는다. 기기에 이미 깔린 글꼴을 순서대로 찾아 쓴다(외부 요청 0건).
 * - 색은 먹색(검정·회색) 위에 강조색 남색 하나만 쓴다.
 */

:root {
  --serif: "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", "바탕", "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
    "Noto Sans KR", "Noto Sans CJK KR", "Segoe UI", Roboto, sans-serif;

  --accent: #1e3a6e;               /* 강조색: 남색 (유일한 유채색) */
  --accent-line: rgba(30, 58, 110, 0.35); /* 같은 남색을 옅게 쓴 밑줄 */
  --ink: #1a1a1a;                  /* 본문 글자 */
  --muted: #5f5f5f;                /* 출처·보조 글자 */
  --rule: #dcd8cf;                 /* 가는 구분선 */
  --paper: #fdfcf9;                /* 살짝 따뜻한 흰 바탕 (순백보다 눈이 덜 피곤하다) */

  --measure: 680px;                /* 본문 최대 폭: 한 줄이 너무 길면 눈이 줄을 놓친다 */
  --gutter: 20px;                  /* 휴대폰 좌우 여백 */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* 휴대폰을 가로로 돌렸을 때 글자가 제멋대로 커지는 것을 막는다 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;            /* 17px: 휴대폰에서 확대 없이 읽히는 크기 (16px 이상) */
  line-height: 1.8;                /* 한글은 행간이 넉넉해야 편하다 */
  /* 한글 단어 중간에서 줄이 끊기지 않게 하고, 너무 긴 낱말(URL 등)은 넘치지 않게 끊는다 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ---------- 링크: 남색 + 옅은 밑줄 ---------- */
a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent-line);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:visited {
  color: var(--accent);
}
a:hover {
  text-decoration-color: currentColor;
}
a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ---------- 상단 제호 ---------- */
.masthead {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 1.75rem var(--gutter) 0;
  text-align: center;
}
.masthead-name {
  margin: 0;
  font-family: var(--serif);
  font-size: 2.375rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.masthead-name a {
  color: var(--ink);
  text-decoration: none;
}
.masthead-slogan {
  margin: 0.375rem 0 1rem;
  color: var(--muted);
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}
/* 위 가는 줄 + 아래 두 줄: 신문 제호 아래의 전통적인 괘선 */
.site-nav {
  display: flex;
  justify-content: center;
  gap: 1.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--ink);
  font-size: 0.9375rem;
}
.site-nav a {
  color: var(--ink);
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--accent);
}

/* ---------- 본문 영역 (1단, 최대 680px) ---------- */
.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- 제목 위계: 모두 명조 ---------- */
h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  letter-spacing: -0.01em;
}
h1 {
  margin: 2rem 0 0;
  font-size: 1.75rem;
  line-height: 1.35;
}

/* ---------- 브리핑 머리: 제목, 오늘의 한 줄, 섹션 바로가기 ---------- */
.one-line {
  margin: 1.25rem 0 0;
  font-size: 1.125rem;
  line-height: 1.7;
}
.one-line-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.section-nav {
  margin: 1.5rem 0 0;
}
.section-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
/* 손가락으로 누르기 쉬운 크기(높이 40px 이상)로 만든다 */
.section-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0 0.95rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.3;
  text-decoration: none;
}
.section-nav a:hover,
.section-nav a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

/* ---------- 브리핑 본문 ---------- */
.edition-body p {
  margin: 0 0 1em;
}

/* 부서 섹션 제목: 위에 굵은 괘선을 둘러 지면이 바뀌는 느낌을 준다 */
.edition-body h2 {
  margin: 3rem 0 1.25rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--ink);
  font-size: 1.5rem;
  /* 바로가기로 이동했을 때 제목이 화면 맨 끝에 붙지 않게 약간 띄운다 */
  scroll-margin-top: 1rem;
}

/* 개별 기사 제목: 기사 사이를 가는 선으로 나눈다 (섹션 첫 기사는 선 없음) */
.edition-body h3 {
  margin: 2.25rem 0 0.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--rule);
  font-size: 1.25rem;
  line-height: 1.45;
}
.edition-body h2 + h3 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* 오늘의 헤드라인 목록 */
.edition-body ol,
.edition-body ul {
  margin: 0 0 1em;
  padding-left: 1.5em;
}
.edition-body li {
  margin: 0.5em 0;
  line-height: 1.65;
}

/* "왜 중요한가"·"대화 포인트" 강조 상자(남색 세로선)는 사이트 완성 후 재검토(오너 결정 7) — 넣는다면 여기에 */

/* 출처 줄: 작고 흐리게. 읽기 흐름을 방해하지 않되 누를 수는 있게 */
.edition-body p.sources {
  margin: 0 0 1em;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.75;
}

/* 맨 끝 발행 고지 */
.edition-body hr {
  margin: 3rem 0 1.25rem;
  border: 0;
  border-top: 1px solid var(--rule);
}
.edition-body p.colophon {
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.7;
}

/* 혹시 표나 코드가 들어와도 화면 밖으로 넘치지 않고 그 칸 안에서만 옆으로 밀리게 */
.edition-body table,
.edition-body pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.edition-body img {
  max-width: 100%;
  height: auto;
}

/* ---------- 홈의 '지난 호' 링크, 호별 페이지의 이전/다음 호 ---------- */
.more-link {
  margin: 2.5rem 0 0;
  text-align: center;
  font-size: 0.9375rem;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.pager a {
  text-decoration: none;
}
.pager span {
  display: block;
  color: var(--muted);
  font-size: 0.8125rem;
}
.pager-next {
  margin-left: auto;
  text-align: right;
}

/* ---------- 지난 호 목록 ---------- */
.page-title {
  margin-bottom: 1.25rem;
}
.archive-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--ink);
}
.archive-list li {
  border-bottom: 1px solid var(--rule);
}
.archive-list a {
  display: block;
  padding: 1.1rem 0;
  color: var(--ink);
  text-decoration: none;
}
.archive-date {
  display: block;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
}
.archive-list a:hover .archive-date {
  color: var(--accent);
}
.archive-line {
  display: block;
  margin-top: 0.3rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}

.empty {
  margin: 3rem 0;
  color: var(--muted);
  text-align: center;
}

/* ---------- 하단: AI 운영 고지 ---------- */
.site-footer {
  max-width: var(--measure);
  margin: 4rem auto 0;
  padding: 1.5rem var(--gutter) 2.5rem;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.7;
  text-align: center;
}
.site-footer p {
  margin: 0;
}
.site-footer .footer-name {
  margin-top: 0.375rem;
  font-family: var(--serif);
  font-weight: 700;
  color: var(--ink);
}

/* ---------- 넓은 화면(태블릿·PC): 제목만 조금 키운다 ---------- */
@media (min-width: 720px) {
  body {
    font-size: 1.125rem;           /* 18px */
  }
  .masthead {
    padding-top: 2.5rem;
  }
  .masthead-name {
    font-size: 3rem;
  }
  h1 {
    font-size: 2.125rem;
  }
  .edition-body h2 {
    font-size: 1.625rem;
  }
  .edition-body h3 {
    font-size: 1.3125rem;
  }
}