@charset "utf-8";

/* ================================================================
   기사 상세 (article.php)
   MO : 헤더 46(탭·선 없음) → 28 → 머리말 → 32 → 핵심 내용 → 32 → 본문(광고 포함)
        → 32 → aside(추천 검색어 · 관련 기사 · 광고, 사이 32) → 48 → 푸터
   PC : 본문 | aside 367(sticky) 2열, 사이 10 (1024부터)
        aside 첫 박스 위 = 제목 첫 줄 위(74), 본문 끝 → 푸터 132(52 + 80)
        aside 가 화면보다 길면 아래 끝 기준으로 붙어서 광고가 잘리지 않는다 (js/article.js)
   sticky 가 동작하도록 조상(html·body·main·section·.inner·.article-layout)에 overflow·transform 금지
   ================================================================ */
.body--article {
  --header-h: 46px; /* MO 탭 없는 헤더 */
  --footer-mt: clamp(48px, calc(48px + 32 * var(--fluid)), 80px);
}

.page--article {
  --page-top: 0px;
}

/* ---------- 레이아웃 ---------- */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 32px;
}

.article-aside {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

/* ---------- 머리말: 태그 → 제목 → 날짜 | 카테고리 → 요약 ----------
   간격 MO 16 / 16 / 16, PC 8 / 0 / 24. PC는 자식만 좌우 16 들여씀 */
.article-head {
  display: flex;
  flex-direction: column;
  padding: clamp(28px, calc(28px + 4 * var(--fluid)), 32px) 0 32px;
}

.article-head > * {
  margin-inline: var(--inset);
}

.article-head__tag {
  align-self: flex-start;
}

.article-head__title {
  margin-top: clamp(8px, calc(16px - 8 * var(--fluid)), 16px);
  color: var(--gray-a2);
  font-size: var(--fs-article-title);
  font-weight: 700;
  line-height: clamp(34px, calc(34px + 14 * var(--fluid)), 48px); /* 24/34 → 32/48 */
}

.article-head__meta {
  margin-top: clamp(0px, calc(16px - 16 * var(--fluid)), 16px);
  color: var(--gray-a3);
  font-size: var(--fs-body1);
  font-weight: 500;
  line-height: 1.6;
}

.article-head__summary {
  margin-top: clamp(16px, calc(16px + 8 * var(--fluid)), 24px);
  color: var(--gray-a3);
  font-size: var(--fs-title3);
  font-weight: 500;
  line-height: 1.6;
}

/* ---------- 본문: 소제목 구간(h2 + 문단·목록) ----------
   구간 안 간격 MO 16 / PC 12(목록 항목은 위아래 4 더), 구간 끝 32 */
.article-body {
  --body-gap: clamp(12px, calc(16px - 4 * var(--fluid)), 16px);
  padding-top: 32px;
}

.article-section {
  display: flex;
  flex-direction: column;
  gap: var(--body-gap);
  padding-bottom: 32px;
}

.article-section:last-child {
  padding-bottom: 0;
}

.article-section h2 {
  color: var(--gray-a2);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.4;
}

.article-section p,
.article-section li {
  color: var(--gray-a2);
  font-size: var(--fs-article);
  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere; /* 긴 주소·영문이 칸을 넘지 않게 */
}

.article-section ul,
.article-section ol {
  display: flex;
  flex-direction: column;
  gap: var(--body-gap);
}

.article-section ol {
  counter-reset: article-ol;
}

/* "•" + 글자: 글자 시작 MO 17.5 / PC 22.5 */
.article-section li {
  display: flex;
  gap: clamp(8px, calc(8px + 4 * var(--fluid)), 12px);
  padding-block: clamp(0px, calc(4 * var(--fluid)), 4px);
}

.article-section li::before {
  content: "•";
  content: "•" / ""; /* 스크린리더가 읽지 않게 (지원하는 브라우저) */
  flex: none;
}

/* 번호 목록: "•" 대신 "1." (ol 자체가 번호를 알려 주므로 스크린리더는 읽지 않게) */
.article-section ol > li {
  counter-increment: article-ol;
}

.article-section ol > li::before {
  content: counter(article-ol) ".";
  content: counter(article-ol) "." / "";
  min-width: 1.2em;
}

.article-section strong {
  font-weight: 600;
}

/* 본문 광고: 위 간격은 앞 구간의 padding-bottom 32 */
.article-body__ad {
  margin-bottom: 32px;
}

.article-body__ad:last-child {
  margin-bottom: 0;
}

/* ---------- PC: 2열 + aside sticky ---------- */
@media (min-width: 1024px) {
  .body--article {
    --header-h: 74px;
  }

  .article-layout {
    grid-template-columns: minmax(0, 1fr) 367px;
    column-gap: 10px;
    align-items: start; /* stretch 되면 sticky 가 움직이지 않는다 */
  }

  /* 화면에 다 들어가면 헤더 아래 16에, 화면보다 길면 아래 끝이 화면 바닥 16 위에 오도록 붙는다
     (광고가 잘리지 않게). --aside-h 는 js/article.js 가 넣는다 — 없으면 헤더 아래 기준 */
  .article-aside {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    top: min(calc(var(--header-h) + 16px), calc(100vh - var(--aside-h, 0px) - 16px));
    gap: 16px;
    margin-top: 74px; /* 머리말 위 32 + 태그 34 + 8 = 제목 첫 줄 위 */
  }

  .article-body {
    padding-bottom: 52px;
  }
}