/* blog.rtmath.kr 미러 사이트 스타일 — 모바일 우선 (독자 분포 모바일 70 / PC 30) */

/* 다크 모드를 두지 않는다 (2026-07-25 사용자 지시).
   본문 이미지가 대부분 흰 바탕 도형·수식 캡처라, 어두운 배경에서는 이미지만
   흰 판때기로 떠서 조악해 보인다. 이미지를 통제할 수 없으므로 배경을 맞춘다.
   color-scheme 을 light 로 고정해 브라우저 기본 UI 도 따라오게 한다. */
:root {
  color-scheme: light;
  --fg: #1a1a1a;
  --muted: #666;
  --line: #e3e3e3;
  --link: #0b57d0;
  --bg: #fff;
  --accent: #f6f8fa;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 17px/1.75 -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  word-break: keep-all;              /* 한국어는 어절 단위로 끊는다 */
  overflow-wrap: anywhere;
}
main { max-width: 720px; margin: 0 auto; padding: 0 18px 64px; }
a { color: var(--link); }

/* ─ 헤더·푸터 ─ */
.site {
  max-width: 720px; margin: 0 auto; padding: 20px 18px 14px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
}
.site a { font-weight: 700; font-size: 1.05rem; text-decoration: none; color: var(--fg); }
/* 학원명은 네이버 블로그로 보낸다 — 이 사이트의 주 목표가 학원 홍보다.
   nofollow 를 걸지 않는다. 네이버로 권위를 흘려보내는 것이 의도다(원본 판정에도 유리). */
a.site-sub { color: var(--link); font-size: .82rem; font-weight: 600; text-decoration: none; }
a.site-sub:hover { text-decoration: underline; }
a.site-sub .sub-region { color: var(--muted); font-weight: 400; }
.site-foot {
  max-width: 720px; margin: 0 auto; padding: 24px 18px 40px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem;
}

/* ─ 본문 ─ */
h1 { font-size: 1.6rem; line-height: 1.4; margin: 18px 0 10px; }
h2 { font-size: 1.22rem; margin: 40px 0 10px; padding-top: 6px; border-top: 1px solid var(--line); }
h3 { font-size: 1.06rem; margin: 28px 0 8px; }
p { margin: 0 0 1.05em; }

.byline { color: var(--muted); font-size: .87rem; margin-bottom: 26px; }
.byline .sep { opacity: .5; padding: 0 2px; }
.intro { color: var(--muted); }

figure { margin: 24px 0; text-align: center; }
img { max-width: 100%; height: auto; border-radius: 4px; }

/* ─ 수식 — 넘쳐도 페이지가 아니라 자기 상자 안에서만 스크롤한다 ─ */
.math, .math-raw {
  overflow-x: auto; overflow-y: hidden;
  margin: 20px 0; padding: 4px 2px;
  -webkit-overflow-scrolling: touch;
}
.math .katex-display { margin: 0; }
.math-raw {
  background: var(--accent); border: 1px dashed var(--line); border-radius: 4px;
  padding: 10px 12px; font-size: .85rem; white-space: pre; color: var(--muted);
}

/* ─ 표 — 문항분석 글의 6~7열을 위해 가로 스크롤 상자에 넣는다 ─ */
.tablewrap { overflow-x: auto; margin: 20px 0; }
table { border-collapse: collapse; min-width: 100%; font-size: .9rem; }
th, td { border: 1px solid var(--line); padding: 6px 10px; text-align: left; white-space: nowrap; }

/* ─ 원문 링크 — 눈에 띄어야 한다 ─ */
.origin {
  margin: 44px 0 20px; padding: 16px 18px;
  background: var(--accent); border: 1px solid var(--line); border-radius: 8px;
}
.origin p { margin: 0 0 6px; font-size: .93rem; }
.origin p:last-child { margin: 0; }
.origin a { font-weight: 700; text-decoration: none; }
.origin a:hover { text-decoration: underline; }

/* ─ 권리 고지 — 눈에 덜 띄어야 한다 (원문 링크와 목적이 반대다) ─ */
.rights {
  margin-top: 26px; padding-top: 12px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .78rem; line-height: 1.6;
}

.tags { margin: 22px 0 0; font-size: .82rem; color: var(--muted); }
.tags span { display: inline-block; margin: 0 6px 6px 0; }

/* ─ 글끼리 잇기 — 크롤러의 이동 경로이자 독자의 다음 한 편 ─ */
.pager { display: grid; gap: 12px; margin: 40px 0 0; }
.pager div { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px;
             border: 1px solid var(--line); border-radius: 8px; }
.pager span { color: var(--muted); font-size: .74rem; letter-spacing: .04em; }
.pager a { text-decoration: none; font-size: .92rem; line-height: 1.5; }
.pager a:hover { text-decoration: underline; }

.related { margin: 36px 0 0; }
.related h2 { font-size: .95rem; border-top: 1px solid var(--line); padding-top: 16px; }
.related ul { list-style: none; padding: 0; margin: 0; }
.related li { padding: 7px 0; font-size: .92rem; }
.related a { text-decoration: none; }
.related a:hover { text-decoration: underline; }
.related .cat { color: var(--muted); font-size: .76rem; white-space: nowrap; }

@media (min-width: 620px) { .pager { grid-template-columns: 1fr 1fr; } }

/* ─ 목록 ─ */
.month { margin: 34px 0; }
.month h2 { font-size: 1.05rem; color: var(--muted); border-top: none; margin-bottom: 8px; }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 9px 0; border-bottom: 1px solid var(--line); }
.list a { text-decoration: none; }
.list a:hover { text-decoration: underline; }
.list .cat { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }

@media (min-width: 700px) {
  body { font-size: 18px; }
  h1 { font-size: 1.9rem; }
}