/*
Theme Name:   Sseulmo (GeneratePress Child)
Theme URI:    https://sseulmo.com
Description:  쓸모 블로그용 자식 테마. GeneratePress 위에 한글 타이포그래피를 얹는다.
              굵기가 아니라 크기와 여백으로 위계를 만드는 방식(참고: sseulmo-voice 스킬 §7).
Author:       sseulmo
Template:     generatepress
Version:      1.0.0
Text Domain:  generatepress-child
*/

/* ── 폰트 ──────────────────────────────────────────────
   Pretendard 동적 서브셋. 브라우저가 필요한 글자 구간만 내려받는다.
   전체 파일(약 1MB) 대신 보통 30~50KB 정도만 로드된다.            */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  --sm-font: "Pretendard Variable", Pretendard, -apple-system,
             "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --sm-ink: #24292e;
  --sm-ink-soft: #57606a;
  --sm-line: #e6e8eb;
}

/* ── 본문 ──────────────────────────────────────────────
   한글은 글자가 조밀해서 영문 기준 줄간격(1.4~1.6)이면 답답하다.
   1.8 근처가 편안하고, 자간을 아주 살짝 좁히면 덩어리가 정돈된다. */
body,
button, input, select, textarea {
  font-family: var(--sm-font);
  font-weight: 400;
  letter-spacing: -0.019em;
  word-break: keep-all;          /* 한글: 어절 중간에서 안 끊기게 */
}

/* overflow-wrap: break-word를 body에 전역으로 걸면 안 된다.
   좁은 영역에서 영문 단어가 중간에 잘린다("Comment s"처럼).
   긴 URL이나 코드가 실제로 넘칠 수 있는 곳에만 건다. */
.entry-content a,
.entry-content code,
.entry-content pre,
.entry-content td {
  overflow-wrap: break-word;
}

body {
  font-size: 17.5px;
  line-height: 1.85;
  color: var(--sm-ink);
}

.entry-content p {
  margin-bottom: 1.7em;
  line-height: 1.85;
}

/* ── 소제목 ────────────────────────────────────────────
   굵게 만들지 않는다. 크기와 위쪽 여백으로만 위계를 만든다.    */
.entry-content h2,
.entry-content h3 {
  font-family: var(--sm-font);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.45;
  color: #1b1f23;
}

.entry-content h2 {
  font-size: 1.55em;
  margin-top: 3.2em;
  margin-bottom: 0.9em;
}

.entry-content h3 {
  font-size: 1.2em;
  margin-top: 2.4em;
  margin-bottom: 0.7em;
}

.entry-title { letter-spacing: -0.035em; line-height: 1.35; font-weight: 700; }

/* ── 목록 ────────────────────────────────────────────── */
.entry-content ul,
.entry-content ol { margin-bottom: 1.7em; padding-left: 1.4em; }
.entry-content li { margin-bottom: 0.55em; line-height: 1.8; }

/* ── 인용 ──────────────────────────────────────────────
   왼쪽 얇은 세로선 + 들여쓰기. 배경색은 넣지 않는다.          */
.entry-content blockquote {
  border-left: 3px solid #d0d7de;
  background: none;
  margin: 2.2em 0;
  padding: 0.2em 0 0.2em 1.4em;
  color: var(--sm-ink-soft);
  font-style: normal;
}
.entry-content blockquote p { margin-bottom: 0.8em; }

/* ── 표 ──────────────────────────────────────────────── */
.entry-content .wp-block-table { margin: 2.4em 0; overflow-x: auto; }
.entry-content .wp-block-table table {
  border-collapse: collapse;
  font-size: 0.94em;
  line-height: 1.7;
  width: 100%;
}
.entry-content .wp-block-table th,
.entry-content .wp-block-table td {
  border: 1px solid var(--sm-line);
  padding: 0.75em 1em;
  text-align: left;
  vertical-align: top;
}
.entry-content .wp-block-table th {
  background: #f6f8fa;
  font-weight: 600;
  white-space: nowrap;
}

/* ── 코드 ──────────────────────────────────────────────
   복구 명령어가 자주 나오는 블로그라 가로 스크롤을 확실히 잡아둔다. */
.entry-content pre,
.entry-content pre.wp-block-code {
  background: #f6f8fa;
  border: 1px solid var(--sm-line);
  border-radius: 4px;
  padding: 1em 1.2em;
  overflow-x: auto;
  font-size: 0.9em;
  line-height: 1.65;
  letter-spacing: 0;
}
.entry-content :not(pre) > code {
  background: #f2f4f6;
  border-radius: 3px;
  padding: 0.12em 0.36em;
  font-size: 0.9em;
  letter-spacing: 0;
}

/* ── 이미지 ────────────────────────────────────────────── */
.entry-content figure { margin: 2.4em 0; }
.entry-content figcaption {
  font-size: 0.88em;
  color: var(--sm-ink-soft);
  text-align: center;
  margin-top: 0.8em;
  line-height: 1.7;
}
.entry-content img { border-radius: 4px; }

/* ── 강조 ────────────────────────────────────────────── */
.entry-content strong { font-weight: 600; color: #1b1f23; }

/* ── 모바일 ────────────────────────────────────────────── */
@media (max-width: 768px) {
  body { font-size: 16.5px; line-height: 1.8; }
  .entry-content h2 { font-size: 1.4em; margin-top: 2.6em; }
  .entry-content .wp-block-table table { font-size: 0.88em; }
}


/* ── 목록에서 대표 이미지 ──────────────────────────────
   세로로 긴 사진이 목록을 통째로 차지하는 걸 막는다.
   위쪽을 기준으로 잘라 보여주고, 글을 클릭하면 원본이 나온다. */
.blog .post-image img,
.archive .post-image img,
.search .post-image img {
  display: block;          /* inline이면 부모가 높이를 못 잡아 레이아웃이 찌그러진다 */
  width: 100%;
  height: 340px;
  object-fit: cover;
  object-position: center center;   /* top으로 두면 세로 사진에서 배경(벽)만 보인다 */
  border-radius: 4px;
}

.blog .post-image,
.archive .post-image,
.search .post-image {
  display: block;
  line-height: 0;          /* 이미지 아래 생기는 여백 제거 */
  margin-bottom: 1.4em;
}

/* ── 목록의 글 사이 간격 ────────────────────────────── */
.blog .site-main > article,
.archive .site-main > article { margin-bottom: 2.6em; }

/* ── 하단 링크 ────────────────────────────────────────── */
.sm-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4em 1.6em;
  margin-bottom: 0.9em;
}
.sm-footer-links a {
  font-size: 0.92em;
  text-decoration: none;
  opacity: 0.9;
}
.sm-footer-links a:hover { opacity: 1; text-decoration: underline; }
.sm-footer-copy { font-size: 0.86em; opacity: 0.75; }

/* ── 상단 카테고리 메뉴 ──────────────────────────────── */
.main-navigation .main-nav ul li a { letter-spacing: -0.02em; }