/*
Theme Name:   GeneratePress Child — 청화
Theme URI:    https://mytipsguide.com
Description:  마이팁스가이드에 청화(靑華) 디자인 시스템을 입히는 차일드 테마. CSS 전용 — 템플릿·구조는 부모 그대로 둔다.
Author:       andreas
Template:     generatepress
Version:      1.0.0
Text Domain:  generatepress-child
*/

/* ═══════════════════════════════════════════════════════
   청화(靑華) · GeneratePress Child
   dev.mytipsguide.com 과 같은 토큰. 원본은 fss0006/src/styles/tokens.css

   범위: 색 · 활자 · 크기 · 여백 · 구분선 · 다크모드.
   안 건드림: 레이아웃 구조 · 사이드바 위치 · 위젯 · 광고 자리 · URL.
   되돌리기: 테마를 GeneratePress 로 전환하면 즉시 원상복구.
   ═══════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=Hahmlet:wght@300;400;500;600;700&family=IBM+Plex+Sans+KR:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ── 변수 ───────────────────────────────────────────────
   GeneratePress 가 이미 :root 에 7개 변수를 깔고 테마 전체를 그걸로 그린다.
   그래서 변수만 갈면 색이 통째로 따라온다.

   선택자를 :root:root 로 쓴 이유 — GP 의 인라인 CSS 도 :root 라서,
   같은 특정도면 삽입 순서에 승패가 갈린다. 순서에 기대지 않으려고
   특정도를 한 단계 올렸다.
   ─────────────────────────────────────────────────────── */

:root:root {
  --contrast:   #14181F;  /* 청먹. 순흑 아님 */
  --contrast-2: #38414E;
  --contrast-3: #6B7684;  /* 담묵 — 메타·날짜 */
  --base:       #EBEDEF;
  --base-2:     #F5F6F7;  /* 자기 냉백. 크림 아님 */
  --base-3:     #FFFFFF;
  --accent:     #1D3FBF;  /* 코발트. 링크에만 */

  --chw-rule:      #D5DAE0;
  --chw-rule-soft: #E4E8EC;

  --chw-display: "Hahmlet", "Nanum Myeongjo", ui-serif, Georgia, serif;
  --chw-body:    "IBM Plex Sans KR", system-ui, -apple-system, sans-serif;
  --chw-mono:    "IBM Plex Mono", ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
  :root:root {
    --contrast:   #E8EAED;
    --contrast-2: #B4BCC7;
    --contrast-3: #7D8897;
    --base:       #0A0D11;
    --base-2:     #0E1116;
    --base-3:     #161B22;
    --accent:     #8AA4FF;  /* 어두운 바탕에서 읽히도록 들어올림 */

    --chw-rule:      #262E39;
    --chw-rule-soft: #1B222B;
  }

  /* 이미지가 다크에서 너무 튀지 않게 아주 살짝 눌러준다 */
  .post-image img,
  .wp-block-image img { filter: brightness(.92); }
}

/* ── 본문 활자 ─────────────────────────────────────────── */

body {
  font-family: var(--chw-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.85;
  word-break: keep-all;          /* 한글은 어절 단위로 끊는다 */
  letter-spacing: -0.003em;
}

h1, h2, h3, h4,
.entry-title,
.widget-title,
.site-branding .main-title {
  font-family: var(--chw-display);
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* ── 머리 · 내비 ───────────────────────────────────────── */

.site-header {
  background-color: var(--base-2);
  border-bottom: 1px solid var(--chw-rule);
}

.main-navigation,
.main-navigation .main-nav ul ul {
  background-color: var(--base-2);
}

.main-navigation a {
  font-family: var(--chw-body);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
  background-color: transparent;
  color: var(--accent);
}

.site-branding .main-title {
  font-weight: 600;
  letter-spacing: -0.03em;
}

/* ── 글 목록 · 상자를 걷어낸다 ──────────────────────────
   GeneratePress 기본형(separate-containers)은 글마다 흰 상자를 세운다.
   답답함의 주범이라 상자를 없애고 헤어라인 하나로 가른다.
   구조는 그대로 — 보이는 것만 바뀐다.
   ─────────────────────────────────────────────────────── */

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.separate-containers .inside-page-header {
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 2.75rem;
}

.separate-containers .site-main > *:not(:last-child) {
  border-bottom: 1px solid var(--chw-rule-soft);
  margin-bottom: 2.75rem;
}

.separate-containers .site-main { margin-top: 2.5rem; }

/* 제목 — 이 개편의 주인공 */
.entry-title {
  font-size: clamp(1.5rem, 3.4vw, 2.125rem);
  font-weight: 600;
  line-height: 1.26;
  margin-bottom: 0.6rem;
}

.entry-title a { color: var(--contrast); }

.entry-title a:hover {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}

/* 단독 글 페이지는 더 크게 */
.single .entry-title {
  font-size: clamp(1.875rem, 5vw, 3rem);
  line-height: 1.16;
  letter-spacing: -0.028em;
}

/* 메타 — 몸을 낮춘다 */
.entry-meta {
  font-family: var(--chw-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.07em;
  color: var(--contrast-3);
  line-height: 1.9;
  font-variant-numeric: tabular-nums;
}

.entry-meta a { color: var(--contrast-3); }
.entry-meta a:hover { color: var(--accent); }

.entry-summary,
.entry-content { color: var(--contrast-2); }

.entry-summary p { margin-bottom: 0.75rem; }

/* 대표 이미지 */
.post-image { margin-bottom: 1.25rem; }

.post-image img {
  border-radius: 0;                /* 둥근 모서리 제거 — 각을 살린다 */
  border: 1px solid var(--chw-rule-soft);
}

/* ── 단독 글 본문 ──────────────────────────────────────── */

.single .entry-content { font-size: 1.0625rem; line-height: 1.95; }

.single .entry-content > p { margin-bottom: 1.6rem; }

.single .entry-content h2 {
  font-size: 1.625rem;
  font-weight: 600;
  margin: 3rem 0 1rem;
  line-height: 1.4;
}

.single .entry-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2.25rem 0 0.75rem;
}

.single .entry-content strong { color: var(--contrast); font-weight: 500; }

.single .entry-content blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.125rem;
  margin-left: 0;
  color: var(--contrast-3);
  font-style: normal;
}

.entry-content code,
.entry-content pre {
  font-family: var(--chw-mono);
  font-size: 0.875em;
}

.entry-content pre {
  background-color: var(--base);
  border: 1px solid var(--chw-rule-soft);
  border-left: 2px solid var(--accent);
  border-radius: 0;
  overflow-x: auto;               /* 코드만 넘치게. 본문은 안 밀린다 */
}

/* 표 */
.entry-content table { border-collapse: collapse; font-size: 0.9375rem; }

.entry-content th {
  font-family: var(--chw-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--contrast-3);
  text-align: left;
  border-bottom: 1px solid var(--chw-rule);
  background: none;
}

.entry-content td { border-bottom: 1px solid var(--chw-rule-soft); }

/* ── 사이드바 — 남기되 조용하게 ────────────────────────── */

.separate-containers .widget {
  background-color: transparent;
  box-shadow: none;
  border-radius: 0;
  padding: 0 0 2rem;
}

.widget-title {
  font-size: 0.75rem;
  font-weight: 500;
  font-family: var(--chw-mono);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--contrast-3);
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--chw-rule);
}

.widget ul li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--chw-rule-soft);
  font-size: 0.9rem;
  line-height: 1.6;
}

.widget ul li:last-child { border-bottom: none; }
.widget a { color: var(--contrast-2); }
.widget a:hover { color: var(--accent); }

/* ── 페이지네이션 · 버튼 ───────────────────────────────── */

.paging-navigation .nav-links a,
.paging-navigation .page-numbers {
  font-family: var(--chw-mono);
  font-size: 0.8125rem;
  border-radius: 0;
}

button, .button, input[type="submit"] {
  border-radius: 0;
  font-family: var(--chw-body);
  font-weight: 400;
  letter-spacing: 0.01em;
}

input[type="search"], input[type="text"], input[type="email"], textarea {
  border-radius: 0;
  border: 1px solid var(--chw-rule);
  background-color: var(--base-3);
  color: var(--contrast);
  font-family: var(--chw-body);
}

/* ── 꼬리 ──────────────────────────────────────────────── */

.site-footer,
.site-info {
  background-color: var(--base-2);
  border-top: 1px solid var(--chw-rule);
  font-family: var(--chw-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  color: var(--contrast-3);
}

.site-info a { color: var(--contrast-3); }
.site-info a:hover { color: var(--accent); }

/* ── 초점 표시 — 접근성 ────────────────────────────────── */

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ── 읽기 폭 ───────────────────────────────────────────
   1200px 컨테이너에서 사이드바를 빼도 본문이 한 줄 100자를 넘는다.
   눈이 줄을 놓친다. 본문 단만 좁힌다 — 컨테이너는 안 건드린다.
   ─────────────────────────────────────────────────────── */

@media (min-width: 769px) {
  .single .entry-content > p,
  .single .entry-content > ul,
  .single .entry-content > ol,
  .single .entry-content > blockquote,
  .single .entry-content > h2,
  .single .entry-content > h3 {
    max-width: 40rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}