/*
Theme Name: CoalaCoding
Theme URI: https://coalacoding.com
Description: CoalaCoding child theme (GeneratePress 기반). MDN 풍 한국어 웹기술 문서 디자인 이식용.
Author: Mango
Template: generatepress
Version: 0.2.0
Text Domain: coalacoding
*/

/* ============================================================
   디자인 토큰 — coalacoding(Next.js) globals.css 의 --coal-* 이식.
   ============================================================ */
:root {
  --coal-bg-primary: #ffffff;
  --coal-bg-secondary: #f8f9fa;
  --coal-bg-code: #1e1e1e;
  --coal-text-primary: #1b1b1b;
  --coal-text-secondary: #4a4a4a;
  --coal-text-muted: #71717a;
  --coal-accent: #3b82f6;
  --coal-accent-hover: #2563eb;
  --coal-border: #e5e7eb;

  --font-sans: "Pretendard Variable", "Pretendard", system-ui, -apple-system, sans-serif;
  --font-mono: "Intel One Mono", "JetBrains Mono", "Fira Code", monospace;
}

/* 본문 기본 — GeneratePress body 폰트/색을 coalacoding 톤으로 */
body {
  font-family: var(--font-sans);
  color: var(--coal-text-primary);
}

/* 스크롤바 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--coal-border); border-radius: 3px; }

/* ============================================================
   본문 타이포그래피 — coalacoding .prose-coal → WP .entry-content
   ============================================================ */
.entry-content {
  line-height: 1.85;
  color: var(--coal-text-primary);
}
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  text-wrap: balance;
  scroll-margin-top: 4.5rem;
}
.entry-content h1 {
  font-size: 2rem;
  letter-spacing: -0.07rem;
  font-weight: 700;
  color: var(--coal-text-primary);
  margin: 2rem 0 1rem;
  line-height: 1.3;
}
.entry-content h2 {
  font-family: "Pretendard Variable";
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--coal-text-primary);
  margin: 1.75rem 0 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--coal-border);
}
.entry-content h3 {
  font-family: "Pretendard Variable";
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--coal-text-primary);
  margin: 1.5rem 0 0.5rem;
}
.entry-content h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 1.25rem 0 0.5rem;
}

/* 한국어 가독성 — keep-all 로 단어 중간 끊김 방지 + 긴 영문/URL 만 강제 줄바꿈 */
.entry-content p,
.entry-content li {
  width: 100%;
  max-width: 65ch;
  word-break: keep-all;
  overflow-wrap: anywhere;
  word-spacing: -0.05em;
  text-wrap: pretty;
}
.entry-content p {
  margin: 1rem 0;
  line-height: 1.85;
}
.entry-content a {
  color: var(--coal-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}
.entry-content a:hover { color: var(--coal-accent-hover); }

/* 인라인 코드 */
.entry-content code {
  font-family: var(--font-mono);
  font-size: 1rem;
  background: var(--coal-bg-secondary);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  border: 1px solid var(--coal-border);
}
/* 코드블록 */
.entry-content pre {
  font-family: var(--font-mono);
  font-size: 1rem;
  line-height: 1.6;
  background: var(--coal-bg-code);
  color: #d4d4d8;
  padding: 1rem 1.25rem;
  border-radius: 8px;
  margin: 1rem 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.entry-content pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
  white-space: inherit;
  word-break: inherit;
  overflow-wrap: inherit;
}

/* 리스트 */
.entry-content ul,
.entry-content ol { padding-left: 1.5rem; margin: 0.75rem 0; }
.entry-content li { margin: 0.25rem 0; }
.entry-content ul li { list-style-type: disc; }
.entry-content ol li { list-style-type: decimal; }

/* 표 */
.entry-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
  font-size: 1rem;
}
.entry-content th,
.entry-content td {
  border: 1px solid var(--coal-border);
  padding: 0.5rem 0.75rem;
  text-align: left;
}
.entry-content th { background: var(--coal-bg-secondary); font-weight: 600; }
/* 표 셀 안 단락/리스트는 폭 제한 해제 */
.entry-content td p,
.entry-content td li,
.entry-content th p,
.entry-content th li { max-width: none; }

/* 인용 */
.entry-content blockquote {
  border-left: 3px solid var(--coal-accent);
  padding: 0.5rem 1rem;
  margin: 1rem 0;
  background: var(--coal-bg-secondary);
  border-radius: 0 6px 6px 0;
}
.entry-content hr {
  border: none;
  border-top: 1px solid var(--coal-border);
  margin: 2rem 0;
}

/* 이미지 */
.entry-content img { max-width: 100%; height: auto; border-radius: 8px; }

/* 콜아웃(알림) — `> [!INFO|WARNING|TIP|NOTE]` → <div class="callout callout-*"> */
.entry-content .callout {
  border-left: 4px solid var(--coal-border);
  border-radius: 0 8px 8px 0;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}
.entry-content .callout::before {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.entry-content .callout > :first-child { margin-top: 0; }
.entry-content .callout > :last-child { margin-bottom: 0; }
.entry-content .callout-info { border-left-color: #3b82f6; background: rgba(59,130,246,0.1); }
.entry-content .callout-info::before { content: "ℹ️ 설명"; color: #2563eb; }
.entry-content .callout-warning { border-left-color: #f59e0b; background: rgba(245,158,11,0.1); }
.entry-content .callout-warning::before { content: "⚠️ 중요"; color: #b45309; }
.entry-content .callout-tip { border-left-color: #10b981; background: rgba(16,185,129,0.1); }
.entry-content .callout-tip::before { content: "💡 정보"; color: #059669; }
.entry-content .callout-note { border-left-color: #94a3b8; background: rgba(148,163,184,0.1); }
.entry-content .callout-note::before { content: "📝 요약"; color: #475569; }

/* 본문 안 비디오 임베드 */
.entry-content .video-embed {
  display: block;
  width: 100%;
  max-width: 720px;
  aspect-ratio: 16 / 9;
  height: auto;
  margin: 1rem 0;
  border: 0;
  border-radius: 8px;
}

/* 버튼처럼 보이는 링크 */
.entry-content a.btn {
  display: inline-block;
  padding: 0.5rem 1rem;
  margin: 0.25rem 0;
  background: var(--coal-accent);
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.15s ease;
}
.entry-content a.btn:hover { background: var(--coal-accent-hover); color: #fff; }

/* 키보드 단축키 */
kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.75em;
  padding: 0.15em 0.5em;
  font-family: var(--font-mono);
  font-size: 0.85em;
  font-weight: 500;
  line-height: 1;
  color: var(--coal-text-secondary);
  background: var(--coal-bg-secondary);
  border: 1px solid var(--coal-border);
  border-bottom-width: 2px;
  border-radius: 6px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  white-space: nowrap;
  vertical-align: middle;
}
kbd + kbd { margin-left: 0.25em; }

/* ============================================================
   다크모드 — coalacoding 은 .dark 클래스 토글.
   WP 에는 아직 토글 UI 가 없어 변수만 보존(향후 토글 도입 시 활성).
   ============================================================ */
:root.dark,
.dark {
  --coal-bg-primary: #1a1a2e;
  --coal-bg-secondary: #16213e;
  --coal-bg-code: #0f0f23;
  --coal-text-primary: #e4e4e7;
  --coal-text-secondary: #a1a1aa;
  --coal-text-muted: #71717a;
  --coal-accent: #60a5fa;
  --coal-accent-hover: #93c5fd;
  --coal-border: #27272a;
}