/*
 * SQ타임즈 스타일 (모든 페이지 공통, 이 파일 하나뿐)
 *
 * 디자인 방침 (오너 결정 5: 섞기, 6차 A안 "교정지 정돈")
 * - 제호와 제목(h1~h3)은 명조(세리프): 신문다운 품위
 * - 본문은 고딕(산세리프): 휴대폰 작은 화면에서 또렷하게
 * - 웹폰트는 fonts.css가 같은 사이트의 파일에서 불러온다(외부 요청 0건). 못 받으면 기기 글꼴로 나온다.
 * - 색은 먹색(검정·회색) 위에 강조색 교정 빨강 하나만 쓴다(SQ그룹 브랜드 가이드).
 * - 색 값은 :root 변수에만 둔다(밝은 모드, 다크 모드, 인쇄 세 곳). 규칙 안에는 색을 직접 쓰지 않는다.
 * - 다크 모드는 기기 설정을 따른다. 아래 @media 안에서 :root 변수 값만 바꾼다(규칙은 그대로, 자바스크립트 없음).
 */

:root {
  /* 웹폰트 이름(Variable, Web)을 기기 글꼴 이름과 다르게 지은 이유: 같은 이름이면 기기 글꼴을 가려서
     화면의 글꼴이 웹폰트인지 기기 글꼴인지 구분할 수 없다. 웹폰트를 못 받으면 뒤의 기기 글꼴로 나온다. */
  --serif: "Noto Serif KR Web", "Noto Serif KR", "Nanum Myeongjo", "AppleMyungjo", "Batang", "바탕", "Times New Roman", serif;
  --sans: "Noto Sans KR Variable", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕",
    "Noto Sans CJK KR", "Segoe UI", Roboto, sans-serif;

  color-scheme: light dark;        /* 스크롤바·기본 입력칸 색도 모드를 따른다 */

  --accent: #D7261E;               /* 강조색: 교정 빨강 (유일한 유채색). 밑줄·막대·초점 테두리 같은 그래픽에 쓴다 */
  --accent-text: #D7261E;          /* 작은 빨간 "글자" 자리. 다크 모드의 빨강은 글자 기준(4.5)에 못 미쳐서 변수를 따로 둔다 */
  --ink: #141414;                  /* 먹: 본문 글자, 제목, 괘선, 구독 버튼 면 */
  --on-ink: #F4F0E6;               /* 교정지 미색: 먹 면 위 글자 */
  --muted: #6B6661;                /* 연필: 출처·보조 글자 */
  --rule: #dcd8cf;                 /* 가는 구분선 */
  --paper: #fdfcf9;                /* 살짝 따뜻한 흰 바탕 (순백보다 눈이 덜 피곤하다) */
  --band: #F4F0E6;                 /* 교정지 미색 띠: 대화 포인트 바탕 */
  --pencil-line: #8A8580;          /* 연필선: 대화 포인트 왼쪽 선 */
  --end-bg: #fdfcf9;               /* 끝 블록(소개·구독) 면. 밝은 모드는 --paper와 같은 값이라 화면이 달라지지 않는다 */

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

/* ---------- 다크 모드 (기기 설정 따라감) ----------
 * 변수 값만 바꾼다. 먹 바탕에 미색 글자. 먹 위 빨강(4.14)은 그래픽(3.0 기준)에는 되지만 작은 글자(4.5)에는 모자라서
 * 빨간 글자(--accent-text)는 미색으로 두고, 빨강은 밑줄·막대로만 남긴다. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #141414;
    --ink: #F4F0E6;
    --muted: #A09B95;              /* 7차: 면이 밝아져도 연필 이름표·설명이 4.5를 지키도록 올림(사이트 다크 전용 값) */
    --accent: #E0352B;
    --accent-text: #F4F0E6;
    --on-ink: #141414;             /* 구독 버튼은 --ink/--on-ink가 서로 바뀌어 미색 면 + 먹 글자가 된다 */
    /* 면 밝기의 상한: 면 위 빨간 그래픽(밑줄·초점 테두리 --accent)이 3.0 이상이어야 해서 바탕 대비 약 1.34까지만 밝힌다 */
    --band: #302D29;
    --end-bg: #302D29;
    --pencil-line: #A09B95;
    --rule: #3A3835;
  }
  /* 상자 면은 다크에서만 둔다. 삼성 인터넷 강제 다크는 밝은 테마를 알고리즘으로 어둡게 바꾸는데, 밝은 모드에도 이 box-shadow가 있으면
     바탕과 다르게 변환되어 회색 띠로 드러났다(7차 후속). padding 대신 box-shadow(퍼짐 16px)를 쓰는 이유: 밝은 모드 글자 위치를 안 움직이려고. */
  .intro {
    background: var(--end-bg);
    box-shadow: 0 0 0 1rem var(--end-bg);
  }
}

*,
*::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.75;               /* 한글은 행간이 넉넉해야 편하다 */
  /* 한글 단어 중간에서 줄이 끊기지 않게 하고, 너무 긴 낱말(URL 등)은 넘치지 않게 끊는다 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ---------- 링크: 먹 글자 + 교정 빨강 밑줄 ---------- */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:visited {
  color: var(--ink);
}
/* 다크 모드에서는 hover 글자 색이 평소와 같은 미색이라, 밑줄이 굵어지는 것으로 알린다 */
a:hover {
  color: var(--accent-text);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}
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.125rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.masthead-name a {
  color: var(--ink);
  text-decoration: none;
}
.masthead-slogan {
  margin: 0.375rem 0 0.875rem;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
}
/* 위 가는 줄 + 아래 두 줄: 신문 제호 아래의 전통적인 괘선 */
.site-nav {
  display: flex;
  flex-wrap: wrap; /* 메뉴가 늘어나도 좁은 화면에서 가로 스크롤 대신 줄을 바꾼다 */
  justify-content: center;
  align-items: center;
  gap: 0 1.375rem;
  min-height: 2.75rem;
  border-top: 1px solid var(--ink);
  border-bottom: 3px double var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
}
/* 휴대폰(360px)에서 메뉴 4칸이 한 줄에 들어가도록 간격과 글자를 줄인다(사이트 전체) */
@media (max-width: 400px) {
  .site-nav {
    gap: 0 1rem;
    font-size: 0.875rem;
  }
}
.site-nav a {
  color: var(--ink);
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--accent-text);
}

/* ---------- 본문 영역 (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;
  /* 긴 제목이 마지막 줄에 한두 글자만 남지 않게 줄 길이를 고른다(미지원 브라우저는 그대로 나온다) */
  text-wrap: balance;
}
/* 헤드라인은 제목 위계(명조)가 아니라 SPEC대로 고딕 700·행간 1.5다. 글꼴·행간은 아래 헤드라인 규칙이 정하고, 여기선 줄 길이 고르기만 한다.
   링크 없이 li 글자만 남는 헤드라인도 같도록 li 규칙(아래)에도 둔다. */
.headlines-list a {
  text-wrap: balance;
}
h1 {
  margin: 2rem 0 0;
  font-size: 1.75rem;
  line-height: 1.3;
}

/* ---------- 브리핑 머리: 머리말, 날짜, 오늘의 한 줄 ---------- */
.edition-head {
  padding-top: 1.625rem;
}
.edition-kicker {
  margin: 0 0 0.375rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.06em;
}
.edition-head h1 {
  margin: 0 0 1.25rem;
}
/* 빨간 세로 막대는 그래픽이라 막대와 바탕의 대비 3.0이면 된다 */
.one-line {
  margin: 0 0 1.375rem;
  padding-left: 0.875rem;
  border-left: 3px solid var(--accent);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.6;
}
.one-line-label {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--accent-text);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

/* ---------- 섹션 바로가기: 위에 붙는 줄 ----------
 * sticky는 "부모 요소 안에서만" 붙어 있는다. 그래서 이 nav는 edition-head 밖, article의 바로 아래 자식이다.
 * 조상 요소에 overflow: hidden을 두면 sticky가 풀리므로 두지 않는다. */
.section-nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  height: 3rem;
  margin: 0 calc(-1 * var(--gutter));    /* 휴대폰에서는 화면 끝까지 닿는 줄로 */
  padding: 0 var(--gutter);
  overflow-x: auto;                      /* 버튼이 넘치면 줄바꿈 대신 가로로 밀어 본다 */
  background: var(--paper);              /* 스크롤할 때 아래 글자가 비치지 않게 */
  border-bottom: 1px solid var(--rule);
  scrollbar-width: none;
}
.section-nav ul {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.section-nav li {
  flex: none;
}
/* 바탕색을 지정하지 않는다(투명): 다크 모드에서 흰 덩어리가 되지 않게 */
.section-nav a {
  display: inline-flex;
  align-items: center;
  height: 2.25rem;
  padding: 0 0.875rem;
  border: 1px solid var(--rule);
  border-radius: 18px;
  color: var(--ink);
  font-size: 0.9375rem;
  line-height: 1.3;
  white-space: nowrap;
  text-decoration: none;
}
.section-nav a:hover,
.section-nav a:focus-visible {
  border-color: var(--accent);
  color: var(--accent-text);
}

/* ---------- 오늘의 헤드라인: 기사로 가는 링크 목록 ---------- */
.headlines {
  padding-top: 1.375rem;
}
.headlines-title {
  margin: 0 0 0.375rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
/* 번호는 HTML에 글자로 넣지 않고 CSS 카운터로 그린다(화면 낭독기가 번호를 두 번 읽지 않게) */
.headlines-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: headline;
}
.headlines-list li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.75rem;
  border-bottom: 1px solid var(--rule);
  counter-increment: headline;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  text-wrap: balance;
}
.headlines-list li:last-child {
  border-bottom: 0;
}
.headlines-list li::before {
  content: counter(headline);
  position: absolute;
  top: 0.75rem;
  left: 0;
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.2;
}
.headline-desk {
  display: block;
  margin-bottom: 0.125rem;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* ---------- 브리핑 본문 ---------- */
.edition-body p {
  margin: 0 0 1rem;
}
.edition-body p,
.about-body p {
  text-wrap: pretty;               /* 문단 끝 줄에 낱말 하나만 남는 것을 줄인다 */
}

/* 부서 섹션 제목: 위에 굵은 괘선을 둘러 지면이 바뀌는 느낌을 준다 */
.edition-body h2 {
  margin: 3.5rem 0 0;
  padding-top: 0.875rem;
  border-top: 3px solid var(--ink);
  font-size: 1.625rem;
  line-height: 1.3;
  /* 바로가기·헤드라인으로 이동했을 때 제목이 붙는 줄(48px) 밑에 가려지지 않게 */
  scroll-margin-top: 4rem;
}

/* 개별 기사 제목: 기사마다 위에 가는 선 (섹션 첫 기사도 A안 목업처럼 선이 있다) */
.edition-body h3 {
  margin: 1.125rem 0 0.875rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: 1.3125rem;
  line-height: 1.45;
  scroll-margin-top: 4rem;
}

/* 혹시 목록이 본문에 들어와도(형식이 바뀐 날) 보기 좋게 */
.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;
}

/* 빈 섹션 안내("오늘은 ... 싣지 않는다"): 기사처럼 보이지 않게 작고 흐리게 */
.section-note {
  margin: 0.75rem 0 0;
  color: var(--muted);
  font-size: 0.9375rem;
}

/* ---------- "왜 중요한가" / "대화 포인트" ----------
 * 이름표 문단은 빌드가 class를 붙인다(src/parse.js). 둘은 네 가지로 달라서 색만으로 구분하지 않는다:
 * 띠 있음/없음, 왼쪽 연필선 있음/없음, 이름표 색(먹/연필), 문장 굵기(500/400).
 * 빨강은 쓰지 않는다: 띠 위 빨간 글자는 명암비 4.41로 기준(4.5)에 못 미친다. */
.why {
  font-weight: 500;
  line-height: 1.7;
}
.why strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}
.talk {
  padding: 0.75rem 1rem 0.75rem 0.875rem;   /* 왼쪽은 연필선 굵기(2px)만큼 줄였다 */
  border-left: 2px solid var(--pencil-line);
  background: var(--band);
  font-size: 1rem;
  line-height: 1.7;
}
.talk strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.4;
}
.talk a:hover {
  color: var(--ink);              /* 띠 안에서는 hover도 빨간 글자로 바꾸지 않는다 */
}

/* 출처 줄: 작고 흐리게. 링크는 손가락으로 누를 높이(약 28px)를 준다 */
.edition-body p.sources {
  margin: 0.25rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 2;
}
.edition-body p.sources a {
  display: inline-block;
  padding: 2px 0;
}

/* 맨 끝 발행 고지 */
.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;
}

/* ---------- 페이지 맨 끝: 소개문 + 구독 버튼 ----------
 * class 이름은 intro지만 위치는 페이지 끝이다(예전에 홈 맨 위에 있던 때의 이름을 그대로 쓴다).
 * 굵은 먹 괘선이 "지면 마감"을 알린다. 면 색은 다크 모드에서만 눈에 띈다(7차). */
.intro {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 2px solid var(--ink);
}
.intro p {
  margin: 0 0 0.75em;
}
.intro p.subscribe {
  margin: 1rem 0 0;
}
/* 구독 버튼: 먹 면 + 미색 글자(빨간 면은 명암비 미달). 다크 모드에서는 변수가 바뀌어 미색 면 + 먹 글자가 된다.
 * 손가락으로 누르기 쉽게 높이 44px 이상 */
.subscribe-button,
.subscribe-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 1.4rem;
  border-radius: 4px;
  background: var(--ink);
  color: var(--on-ink);
  font-weight: 700;
  text-decoration: none;
}
.subscribe-button:hover {
  opacity: 0.9;
}
.subscribe-note {
  display: block;
  margin-top: 0.5rem;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ---------- 소개 페이지(만드는 사람들) ---------- */
.about-body p {
  margin: 0 0 1em;
}
.about-body h2 {
  margin: 2.5rem 0 1rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--ink);
  font-size: 1.375rem;
}
.about-body ol,
.about-body ul {
  margin: 0 0 1em;
  padding-left: 1.5em;
}
.about-body li {
  margin: 0.5em 0;
  line-height: 1.65;
}
/* 표(AI 직원 조직도 등)가 화면보다 넓으면 페이지 전체가 아니라 표만 옆으로 밀리게 한다 */
.about-body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  margin: 0 0 1em;
  border-collapse: collapse;
  font-size: 0.9375rem;
  line-height: 1.6;
}
.about-body th,
.about-body td {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.about-body th {
  border-bottom: 2px solid var(--ink);
  white-space: nowrap;
}
.about-body .analytics-notice {
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.875rem;
}

/* ---------- 「사람 없는 회사 일지」 코너 전용 (9차). 소개 페이지(.about-body 단독)는 건드리지 않는다 ---------- */
.log > .edition-kicker {
  margin: 1.625rem 0 0.375rem;
}
.log > .edition-kicker + .page-title {
  margin-top: 0;
}
.log-index .edition-kicker {
  margin: 1.625rem 0 0.375rem;
}
.log-index .page-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
}
.log-intro {
  margin: 0 0 1.25rem;
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.log-no {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.4;
}
/* 소제목: 굵은 먹 선 대신 가는 선. 굵은 선은 글이 끝나는 곳(구독 상자 위)에서만 쓴다 */
.log .about-body h2 {
  margin: 2.25rem 0 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-size: 1.375rem;
}
@media (min-width: 720px) {
  .log .about-body h2 {
    font-size: 1.5rem;
  }
}
/* 회장 한 줄: 홈의 "오늘의 한 줄"과 같은 빨간 왼쪽 막대. 위 h2 규칙보다 이기도록 h2까지 쓴다 */
.log .about-body h2.chair-label {
  margin: 2.5rem 0 0;
  padding: 0 0 0.25rem 0.875rem;
  border-top: 0;
  border-left: 3px solid var(--accent);
  font-family: var(--sans);
  font-size: 0.8125rem;
  color: var(--accent-text);
  letter-spacing: 0.04em;
}
.log .chair-line {
  margin: 0;
  padding: 0 0 0 0.875rem;
  border-left: 3px solid var(--accent);
  font-size: 1.1875rem;
  font-weight: 500;
  line-height: 1.6;
}
.log ~ .pager a {
  max-width: 48%;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.45;
}
.log ~ .pager span {
  font-family: var(--sans);
  font-weight: 400;
}

/* ---------- 홈의 '지난 호' 링크, 호별 페이지의 이전/다음 호 ---------- */
.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-text);
}
.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);
}
/* RSS 링크: 꼬리말 글씨와 같은 색·크기로 두고 밑줄로만 링크임을 알린다(아이콘 없음) */
.site-footer .footer-links {
  margin-top: 0.375rem;
}
.site-footer .footer-links a,
.site-footer .footer-links a:visited {
  color: inherit;
  text-decoration-color: currentColor;
}

/* ---------- 해설 코너 (11차). 소개 페이지 본문 스타일(.about-body)과 목록 스타일(.log-index)을 재사용하고 필요한 몇 줄만 더한다 ---------- */
.guide > .edition-kicker {
  margin: 1.625rem 0 0.375rem;
}
.guide > .edition-kicker + .page-title {
  margin-top: 0;
}
.guide-dates {
  margin: 0.25rem 0 0.75rem;
  color: var(--muted);
  font-size: 0.875rem;
}
/* 검수 표시: 홈의 "오늘의 한 줄"과 같은 빨간 왼쪽 막대로 본문과 구분한다 */
.guide-notice {
  margin: 0 0 1.5rem;
  padding: 0.25rem 0 0.25rem 0.875rem;
  border-left: 3px solid var(--accent);
  color: var(--muted);
  font-size: 0.9375rem;
  line-height: 1.65;
}
.guide-asof {
  display: block;
  margin-top: 0.25rem;
  color: var(--muted);
  font-size: 0.8125rem;
}
.guide-related {
  margin-top: 2.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
}
.guide-related h2 {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
}
.guide-related ul {
  margin: 0;
  padding-left: 1.25rem;
}

/* ---------- 넓은 화면(태블릿·PC): 제목과 본문을 한 단계 키운다 ---------- */
@media (min-width: 720px) {
  body {
    font-size: 1.125rem;           /* 18px */
  }
  .masthead {
    padding-top: 2.25rem;
  }
  .masthead-name {
    font-size: 2.75rem;
  }
  .masthead-slogan {
    font-size: 0.875rem;
  }
  h1 {
    font-size: 2.25rem;
  }
  .edition-kicker,
  .headlines-title {
    font-size: 0.875rem;
  }
  .one-line {
    font-size: 1.3125rem;
  }
  .headlines-list li {
    font-size: 1.1875rem;
  }
  .edition-body h2 {
    font-size: 1.875rem;
  }
  .edition-body h3 {
    font-size: 1.5rem;
  }
  .talk {
    font-size: 1.0625rem;
  }
}

/* ---------- 인쇄 ----------
 * 다크 모드 기기에서 인쇄해도 흰 종이에 먹 글자가 되도록 색 변수를 밝은 모드 값으로 되돌린다.
 * (그러지 않으면 미색 글자가 흰 종이에 거의 안 보인다.) 출처·발행 고지·AI 고지는 그대로 인쇄된다. */
@media print {
  :root {
    color-scheme: light;
    --accent: #D7261E;
    --accent-text: #D7261E;
    --ink: #141414;
    --on-ink: #F4F0E6;
    --muted: #6B6661;
    --rule: #dcd8cf;
    --paper: #fdfcf9;
    --band: #F4F0E6;
    --pencil-line: #8A8580;
    --end-bg: #fdfcf9;
  }
  .site-nav,
  .section-nav,
  .intro,
  .pager,
  .more-link {
    display: none;
  }
  h2,
  h3 {
    break-after: avoid;
  }
  .why,
  .talk {
    break-inside: avoid;
  }
}

/* 10차: 그룹 첫 화면(sqgroup.kr/)용 규칙. group 배치로 빌드할 때만 style.css 맨 끝에 덧붙는다(새 CSS 파일을 만들지 않는다).
   legacy 배치의 style.css는 이 규칙이 없는 지금 그대로다. 바탕·글자색은 사이트 변수(--paper, --ink)를 그대로 써서 다크 모드를 따라간다.
   계열사 색은 이름 앞 작은 점에만 쓴다(브랜드 가이드 3-2~3-4). 점은 장식이고, 구분은 항상 이름 글자가 한다. */

.group-page {
  padding-top: 3rem;
}
.group-title {
  margin: 0 0 1rem;
  font-size: 2rem;
  line-height: 1.3;
}
.group-intro {
  margin: 0 0 2rem;
}
.group-heading {
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--ink);
  font-size: 1rem;
  color: var(--muted);
}
.group-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.group-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.75rem;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
}
.group-name {
  font-family: var(--serif);
  font-weight: 700;
}
.group-desc {
  color: var(--muted);
  font-size: 0.9375rem;
}
/* SQ타임즈로 가는 큰 링크: 첫 화면에서 가장 크게 보이는 항목 */
.group-item-main {
  padding: 1.25rem 0;
}
.group-item-main .group-name {
  font-size: 1.5rem;
}
.group-dot {
  display: inline-block;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  /* 점 중심이 글자 한가운데 오도록 baseline 정렬 보정 */
  transform: translateY(0.0625rem);
}
/* 밝은 바탕 값 */
.group-dot-1 { background: #D7261E; }
.group-dot-2 { background: #1F4BE0; }
.group-dot-3 { background: #A87A00; }
.group-dot-4 { background: #7B4DFF; }
@media (prefers-color-scheme: dark) {
  /* 어두운 바탕 값 */
  .group-dot-1 { background: #E0352B; }
  .group-dot-2 { background: #5B8CFF; }
  .group-dot-3 { background: #F2B705; }
  .group-dot-4 { background: #7B4DFF; }
}
@media (min-width: 720px) {
  .group-page {
    padding-top: 4.5rem;
  }
  .group-title {
    font-size: 2.5rem;
  }
}