/* ============================================================
  단계 0: 파일 개요
  - 파일명: style/chapter.css
  - 역할: 신규 챕터 상세페이지(서론·1부·3부·5부) 공통 스타일
  - 근거: DESIGN.md v3 "Tinted Grid" (목업 2a)
  - 전제: style/tokens.css를 먼저 로드해야 함 (시맨틱 토큰 참조)
  - 원칙: 직각 · 2px 잉크 룰 + 1px 구분선 · 무그림자 · 세리프 본문 · 산세리프 킥커
============================================================ */

/* ============================================================
  단계 1: 전역 기본 — 연한 파랑 지면
============================================================ */
* { box-sizing: border-box; }
body {
  margin: 0; padding: 0;
  background: var(--bg, #EEF7FC);                                  /* 연한 파랑 패널 */
  color: var(--text, #0D2733);                                     /* 잉크 텍스트 */
  font-family: var(--font-serif, 'Noto Serif KR', Georgia, serif); /* 본문 = 저널 세리프 */
  font-size: 1.02rem;
  line-height: 1.85;                                               /* 세리프 최적 행간 */
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent, #0A5A73); text-decoration: none; transition: color var(--motion, 0.2s ease); }
a:hover { color: var(--accent-hover, #073E52); text-decoration: underline; }

/* ============================================================
  단계 2: 네비게이션 — 잉크 띠 (전 페이지 공통)
============================================================ */
.ch-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.9rem 2rem;
  background: var(--maca-night, #0D2733);                          /* 표면 무관 네이비 고정 */
  border-bottom: 1px solid rgba(10,90,115,0.14);                  /* 사이언 헤어라인 */
  font-family: var(--font-body, 'Inter', 'Noto Sans KR', sans-serif); /* 구조 = 산세리프 */
}
.ch-nav__logo {
  font-size: 0.8rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--maca-blue, #0A5A73);                                /* 워드마크 = 시그널 블루 */
}
.ch-nav__links { display: flex; gap: 1.4rem; }
.ch-nav__links a {
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;               /* 킥커 스타일 */
  color: var(--maca-gray, #52707E);
}
.ch-nav__links a:hover { color: var(--maca-blue, #0A5A73); text-decoration: none; }

/* ============================================================
  단계 3: 히어로 배너 — 잉크 띠 (배너 → 밝은 지면 전환)
============================================================ */
.ch-hero {
  background: var(--maca-night, #0D2733);   /* 잉크 배너 — 라이트 지면과 대비 */
  color: #FFFFFF;                           /* 배너 안은 흰 텍스트 */
  padding: 4rem 2rem 3.5rem;
  text-align: center;
  border-bottom: 2px solid var(--maca-blue, #0A5A73);              /* 하단 시그널 블루 라인 */
}
.ch-hero__kicker {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--maca-blue, #0A5A73);                                /* 부(部) 표시 킥커 */
  margin-bottom: 1rem;
}
.ch-hero__title {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(1.9rem, 4vw, 3rem);                             /* 반응형 디스플레이 */
  font-weight: 700; margin: 0 0 0.8rem;
  line-height: 1.25;
}
.ch-hero__sub {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9rem; color: rgba(255,255,255,0.72);
  max-width: 640px; margin: 0 auto; letter-spacing: 0.03em;
}

/* ============================================================
  단계 4: 본문 지면 — 세리프 리딩 최적 폭 860px
============================================================ */
.ch-main {
  max-width: 860px;                                                /* 세리프 본문 최적 행길이 */
  margin: 3rem auto 4rem;
  padding: 0 2rem;
}
.ch-section { padding: 2.5rem 0; border-bottom: 1px solid var(--border-light, rgba(13,39,51,0.18)); }
.ch-section:last-of-type { border-bottom: none; }
.ch-section h2 {
  font-family: var(--font-display, 'Playfair Display', serif);
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  margin: 0 0 1.3rem;
  padding-left: 0.9rem;
  border-left: 2px solid var(--accent, #0A5A73);                   /* 섹션 표식 = 2px 잉크 바 */
  line-height: 1.35;
}
.ch-section h3 {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1.05rem; font-weight: 600;
  color: var(--accent, #0A5A73);
  margin: 2rem 0 0.8rem;
}
.ch-section p { margin: 0 0 1.1rem; }
.ch-section strong { font-weight: 700; }

/* ============================================================
  단계 5: 핵심 개념 카드 — 직각 · 헤어라인 · 무그림자
============================================================ */
.ch-concepts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));     /* 반응형 그리드 */
  gap: 1px;                                                        /* 1px 간격 = 헤어라인 격자 */
  background: var(--border-light, rgba(13,39,51,0.18));            /* 격자선 색 */
  border: 1px solid var(--border-light, rgba(13,39,51,0.18));
  margin: 1.5rem 0 2rem;
}
.ch-concept {
  background: var(--bg-section, #FFFFFF);                          /* 카드 지면 */
  padding: 1.3rem 1.4rem;
}
.ch-concept__name {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent, #0A5A73);                                   /* 개념명 = 킥커 */
  margin-bottom: 0.45rem;
}
.ch-concept__desc { font-size: 0.93rem; line-height: 1.7; margin: 0; }

/* ============================================================
  단계 6: 사례 블록 — 좌측 잉크 보더 (인쇄 조판 문법)
============================================================ */
.ch-cases { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.ch-cases li {
  border-left: 2px solid var(--text, #0D2733);                     /* 잉크 보더 */
  background: var(--bg-card, #FFFFFF);                             /* 소프트 페이퍼 */
  padding: 1rem 1.3rem;
  margin-bottom: 0.8rem;
  font-size: 0.95rem;
}
.ch-cases li:last-child { margin-bottom: 0; }

/* ============================================================
  단계 7: 데이터 표 — 헤어라인 행 구분 (브로드시트 밀도)
============================================================ */
.ch-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.9rem; }
.ch-table th {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-align: left; padding: 0.7rem 0.8rem;
  border-bottom: 2px solid var(--text, #0D2733);                   /* 헤더 하단 잉크 라인 */
}
.ch-table td { padding: 0.65rem 0.8rem; border-bottom: 1px solid var(--border-light, rgba(13,39,51,0.18)); }
.ch-table tr:hover td { background: var(--bg-card, #FFFFFF); }     /* 행 호버 */
.ch-table .num { font-family: var(--font-display, 'Playfair Display', serif); font-weight: 700; }

/* 단계 7-1: 데이터 등급 의미색 (DESIGN.md v3 — 장식 사용 금지) */
.grade-health    { color: #2E8B6E; font-weight: 600; }             /* High Health */
.grade-moderate  { color: var(--text-muted, #2C4E5E); font-weight: 600; }  /* Moderate */
.grade-corrosive { color: #C33F33; font-weight: 600; }             /* Corrosive */

/* ============================================================
  단계 8: 페이지 하단 이동 링크
============================================================ */
.ch-pager {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--border-light, rgba(13,39,51,0.18));
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.06em;
}

/* ============================================================
  단계 9: 푸터 — 잉크 (홈과 동일)
============================================================ */
.ch-footer {
  background: var(--maca-night, #0D2733);
  color: var(--maca-gray, #52707E);
  text-align: center;
  padding: 1.8rem 1rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.8rem;
}
.ch-footer a { color: var(--maca-blue, #0A5A73); }

/* ============================================================
  단계 10: 반응형 — 768px 이하
============================================================ */
@media (max-width: 768px) {
  .ch-nav { flex-direction: column; gap: 0.7rem; padding: 0.8rem 1rem; }
  .ch-nav__links { gap: 1rem; flex-wrap: wrap; justify-content: center; }
  .ch-hero { padding: 2.8rem 1.2rem 2.4rem; }
  .ch-main { padding: 0 1.2rem; margin-top: 2rem; }
  .ch-table { display: block; overflow-x: auto; }                  /* 표 가로 스크롤 */
}