/*
Theme Name: 이음로직스 인사이트
Theme URI: https://eumlogics.kr/insight/
Author: 이음로직스
Description: eumlogics.kr 공식 홈페이지와 동일한 껍데기·CSS 토큰을 쓰는 인사이트 전용 테마. 본사 사이트(/assets/style.css)를 그대로 상속하고 블로그에 필요한 것만 여기서 덧붙인다.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.8
License: GPL-2.0-or-later
Text Domain: eum-insight
*/

/* 본사 공통 스타일(/assets/style.css)이 먼저 로드된다.
   여기는 블로그에만 필요한 것 — 목록/글/페이지네이션 — 만 둔다. */

/* ---------- 공통 ---------- */
.wrap-article { max-width: 780px; margin: 0 auto; padding: 0 20px; }

main { display: block; }

/* ---------- 블로그 히어로 ---------- */
.blog-hero { padding: 44px 0 30px; border-bottom: 1px solid var(--line); }
.blog-hero h1 {
  font-size: clamp(26px, 4.4vw, 36px); line-height: 1.3; letter-spacing: -.03em;
  margin: 0 0 12px; font-weight: 800;
}
.blog-hero .lede { color: var(--fg-muted); max-width: 44em; margin: 0 0 22px; }

/* 카테고리 필터 */
.cat-nav { display: flex; gap: 9px; flex-wrap: wrap; }
.cat-nav a {
  font-size: 14px; font-weight: 700; text-decoration: none;
  color: var(--fg-muted); background: var(--bg-soft);
  border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px;
}
.cat-nav a:hover { color: var(--brand); border-color: var(--brand); }
.cat-nav a[aria-current="page"] {
  background: var(--brand); border-color: var(--brand); color: var(--brand-fg);
}
.cat-nav .count { font-weight: 600; opacity: .7; }

/* ---------- 글 목록 ---------- */
.post-list { padding: 40px 0 8px; border-bottom: 0; }
.insight-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.insight-card .thumb {
  display: block; aspect-ratio: 16 / 9; background: var(--bg-soft);
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.insight-card .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.insight-card .card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.insight-card h3 { margin: 6px 0 10px; }
.insight-card .insight-date { margin-top: auto; padding-top: 10px; }

/* ---------- 페이지네이션 ---------- */
.pagination { padding: 34px 0 56px; }
.pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pagination .page-numbers {
  min-width: 40px; text-align: center; padding: 8px 13px; border-radius: 10px;
  border: 1px solid var(--line); color: var(--fg-muted);
  text-decoration: none; font-size: 15px; font-weight: 700;
}
.pagination a.page-numbers:hover { border-color: var(--brand); color: var(--brand); }
.pagination .page-numbers.current {
  background: var(--brand); border-color: var(--brand); color: var(--brand-fg);
}
.pagination .page-numbers.dots { border-color: transparent; }

/* ---------- 글 본문 ---------- */
.entry-head { padding: 26px 0 22px; border-bottom: 1px solid var(--line); margin-bottom: 30px; }
.entry-head .tag { font-size: 13px; font-weight: 700; color: var(--accent); }
.entry-head .tag a { color: inherit; text-decoration: none; }
.entry-head .tag a:hover { text-decoration: underline; }
.entry-head h1 {
  font-size: clamp(25px, 4.2vw, 35px); line-height: 1.35; letter-spacing: -.03em;
  margin: 10px 0 14px; font-weight: 800;
}
.entry-meta { font-size: 14px; color: var(--fg-faint); display: flex; gap: 14px; flex-wrap: wrap; }

.entry-content { padding-bottom: 8px; }
/* 본문은 파이프라인이 인라인 스타일로 찍어 보낸다.
   그 색만 functions.php 에서 CSS 변수로 치환하므로, 여기서는 구조만 손본다. */
.entry-content > div { max-width: 100%; }
.entry-content img { max-width: 100%; height: auto; }
.entry-content figure { margin-left: 0; margin-right: 0; }
.entry-content h2 { scroll-margin-top: 80px; }
.entry-content a { text-decoration: underline; text-underline-offset: 2px; }
.entry-content hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.entry-content blockquote {
  margin: 26px 0; padding: 4px 0 4px 20px;
  border-left: 3px solid var(--brand); color: var(--fg-muted);
}
/* 마크다운 잔재를 실제 표로 되살린 것 */
.entry-content .table-scroll { margin: 26px 0; }
.entry-content table { min-width: 460px; }

/* mu-plugin 이 붙이는 하단 CTA — 인라인 색이 라이트 고정이라 토큰으로 덮는다 */
.eum-post-cta {
  background: var(--brand-soft) !important;
  border-color: var(--line) !important;
}

/* ---------- 글 하단 내비 ---------- */
.postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 34px 0 0; }
.postnav a {
  display: block; padding: 16px 18px; border: 1px solid var(--line);
  border-radius: var(--radius); text-decoration: none; background: var(--bg-card);
}
.postnav a:hover { border-color: var(--brand); }
.postnav .dir { font-size: 13px; color: var(--fg-faint); font-weight: 700; display: block; margin-bottom: 6px; }
.postnav .ttl { font-size: 15px; color: var(--fg); font-weight: 700; line-height: 1.5; }
.postnav .next { text-align: right; }
@media (max-width: 640px) { .postnav { grid-template-columns: 1fr; } }

/* ---------- 관련 글 ---------- */
.related { padding: 48px 0 0; border-bottom: 0; }
.related h2 { font-size: 21px; margin-bottom: 18px; }

/* ---------- 검색 ---------- */
.searchform { display: flex; gap: 8px; max-width: 420px; margin: 0 0 8px; }
.searchform input[type="search"] {
  flex: 1; padding: 10px 14px; font-size: 15px; font-family: inherit;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--bg-card); color: var(--fg);
}
.searchform input[type="search"]:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
.searchform button {
  padding: 10px 18px; font-size: 15px; font-weight: 700; font-family: inherit;
  border: 1px solid var(--brand); border-radius: 10px;
  background: var(--brand); color: var(--brand-fg); cursor: pointer;
}

/* ---------- 빈 결과 / 404 ---------- */
.empty { padding: 56px 0 64px; }
.empty h1 { font-size: clamp(24px, 4vw, 32px); margin: 0 0 12px; font-weight: 800; }
.empty p { color: var(--fg-muted); max-width: 40em; }

/* ---------- 사진 배경 목록 헤더 ----------
   .hero-media 의 배경·색은 본사 style.css 가 정의한다. 여기선 목록 전용 요소만 맞춘다. */
.blog-hero.hero-media { padding: 54px 0 40px; }
.blog-hero.hero-media h1 { color: #fff; }
.blog-hero.hero-media .lede { color: #c6d5da; }
.blog-hero.hero-media .cat-nav a {
  color: #d3e2e7; background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .22);
}
.blog-hero.hero-media .cat-nav a:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
.blog-hero.hero-media .cat-nav a[aria-current="page"] {
  background: #2fa3c7; border-color: #2fa3c7; color: #06181f;
}

/* ---------- 목차 ----------
   글이 8~11분 분량이라 남은 내용을 가늠할 수단이 필요하다. */
.toc {
  margin: 30px 0 34px; padding: 20px 24px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-soft);
}
.toc .toc-t {
  margin: 0 0 10px; font-size: 13px; font-weight: 800; letter-spacing: .04em;
  color: var(--fg-faint); text-transform: none;
}
.toc ol { margin: 0; padding-left: 1.25em; }
.toc li { margin-bottom: 7px; font-size: 15px; line-height: 1.6; }
.toc li:last-child { margin-bottom: 0; }
.toc a { color: var(--fg); text-decoration: none; }
.toc a:hover { color: var(--brand); text-decoration: underline; }