/* chargeknow.com 전용 오버라이드 — style.css(공용) 뒤에 로드된다.
   2026-09-16: aitoolmetric과 색만 다르고 "구조가 똑같다"는 지적을 받고, 실제
   경쟁사 10곳 리서치를 마누스에게 브리핑으로 줘서 진짜 새 홈페이지 디자인을 뽑은
   뒤(_design_drafts/site03_chargeknow_v2/) 이 프로젝트의 Jinja2 구조로 이식했다.
   home.chargeknow.html(사이트 전용 홈 템플릿, home.html과 별개)과 같이 쓴다 —
   카테고리/글 목록 페이지는 여전히 공용 템플릿이라 여기서 헤더·푸터만 리스킨하고
   나머지 공용 클래스는 손 안 댔다(aitoolmetric에 영향 없음 — 이 파일 자체가
   chargeknow에서만 로드됨). */

:root {
  --blue: #1f3a34;       /* 짙은 잉크그린 */
  --blue-dark: #142823;
  --accent: #c2703d;     /* 구리색 포인트 */
  --accent-deep: #995127;
  --paper: #f6f3ed;      /* 차가운 파랑 톤 대신 따뜻한 종이색 */
  --cream: #fbfaf7;
  --line: #d9d6cd;
}

body { background: var(--paper); }

h1, h2,
.signal-score, .guide-number, .sidebar-card h3,
.ck-lb-title, .ck-section-title, .ck-rank-name, .ck-cat h3 {
  font-family: "Manrope", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -.02em;
}

/* ---------- 헤더/푸터 리스킨 ---------- */
.site-header { background: rgba(251,250,247,.92); border-bottom-color: var(--line); }
.site-footer { background: var(--cream); border-top-color: var(--line); }
.eyebrow-dot { background: var(--accent); box-shadow: 0 0 0 4px rgba(194,112,61,.14); }

/* ---------- 상단 신뢰 스트립 (home.chargeknow.html의 pre_header 블록) ---------- */
.topbar { background: var(--blue); color: #eef1ea; font-size: 12px; letter-spacing: .02em; }
.topbar-inner { min-height: 32px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.topbar-right { color: #c8d0c8; }

/* ---------- 히어로 ---------- */
.ck-hero { padding: 68px 0 58px; background: var(--cream); border-bottom: 1px solid var(--line); }
.ck-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center; }
.ck-eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: .13em; color: var(--accent-deep); font-weight: 800; margin: 0 0 18px; }
.ck-hero h1 { font-size: clamp(38px, 4.6vw, 60px); letter-spacing: -.04em; line-height: 1.04; margin: 0 0 22px; max-width: 600px; }
.ck-hero h1 em { font-style: normal; color: var(--accent); }
.ck-hero-copy { font-size: 17px; line-height: 1.65; color: #55645e; max-width: 520px; margin: 0 0 28px; }
.ck-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.button-ck { display: inline-flex; align-items: center; gap: 8px; padding: 12px 17px; border-radius: 7px; font-weight: 750; font-size: 13px; border: 1px solid transparent; }
.button-ck.primary { background: var(--blue); color: #fff; transition: background .18s ease, transform .18s ease; }
.button-ck.primary:hover { background: var(--blue-dark); transform: translateY(-2px); }
.button-ck.secondary { border-color: #aab4ad; color: var(--blue); }
.ck-method-note { display: flex; align-items: center; gap: 9px; color: #6a746d; font-size: 12px; margin-top: 20px; }
.ck-dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; flex: none; }

.ck-leaderboard { background: var(--blue); color: #fff; border-radius: 18px; padding: 26px 26px 22px; box-shadow: 0 14px 35px rgba(31,58,52,.16); position: relative; overflow: hidden; }
.ck-leaderboard::before { content: ""; position: absolute; right: -42px; top: -42px; width: 180px; height: 180px; border: 1px solid rgba(194,112,61,.35); border-radius: 50%; }
.ck-lb-head { display: flex; align-items: flex-start; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.2); padding-bottom: 18px; margin-bottom: 4px; gap: 12px; }
.ck-lb-title { font-weight: 800; font-size: 15px; }
.ck-lb-sub { font-size: 11px; color: #c6d0c8; margin-top: 4px; }
.ck-lb-asof { font: 11px "SFMono-Regular", Consolas, monospace; color: #c9a38c; white-space: nowrap; }
.ck-rank { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.15); }
.ck-rank:last-of-type { border-bottom: 0; }
.ck-rank-no { font: 13px "SFMono-Regular", Consolas, monospace; color: #c9a38c; }
.ck-rank-name { font-size: 13px; font-weight: 750; }
.ck-rank-price { font: 700 18px "SFMono-Regular", Consolas, monospace; color: #f3c19e; }

/* ---------- 섹션 공통 ---------- */
.ck-section { padding: 56px 0; }
.ck-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.ck-section-label { font-size: 12px; text-transform: uppercase; letter-spacing: .13em; color: var(--accent-deep); font-weight: 800; margin-bottom: 8px; }
.ck-section-title { font-size: 28px; letter-spacing: -.03em; margin: 0; }
.ck-section-intro { color: var(--muted-ink); font-size: 13px; max-width: 380px; margin: 0; }

/* ---------- 카테고리 그리드 ---------- */
.ck-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ck-cat { background: #fff; border: 1px solid var(--line); padding: 22px 20px 19px; min-height: 168px; display: flex; flex-direction: column; justify-content: space-between; transition: .2s ease; }
.ck-cat:hover { transform: translateY(-3px); box-shadow: 0 14px 35px rgba(31,58,52,.08); border-color: #a8b4aa; }
.ck-cat-top { display: flex; justify-content: space-between; align-items: start; }
.ck-cat-icon { font: 700 19px "SFMono-Regular", Consolas, monospace; color: var(--accent); }
.ck-arrow { font-size: 17px; color: #8a9890; }
.ck-cat h3 { margin: 22px 0 6px; font-size: 17px; letter-spacing: -.02em; }
.ck-cat p { font-size: 12px; color: var(--muted-ink); margin: 0; }

/* ---------- 최근 비교 + 사이드 신뢰 카드 ---------- */
.ck-compare-area { display: grid; grid-template-columns: 1fr 300px; gap: 30px; align-items: start; }
.ck-article-list { border-top: 2px solid var(--blue); }
.ck-article { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.ck-article h3 { font-size: 15px; letter-spacing: -.02em; margin: 0 0 6px; font-family: "Manrope", sans-serif; font-weight: 750; }
.ck-article p { margin: 0; font-size: 12px; color: var(--muted-ink); max-width: 480px; }
.ck-tag { display: inline-block; font-size: 10px; letter-spacing: .05em; color: var(--accent-deep); border: 1px solid #d8b59f; padding: 3px 7px; margin-bottom: 8px; border-radius: 3px; }
.ck-read { font-size: 12px; font-weight: 800; color: var(--accent-deep); white-space: nowrap; }
.ck-side-card { background: #e9eee8; border: 1px solid #d0dad2; padding: 22px 20px; }
.ck-side-card h3 { margin: 0 0 10px; font-size: 16px; }
.ck-side-card p { font-size: 12px; color: #5c6a62; margin: 0 0 15px; }
.ck-source-row { font-size: 11px; border-top: 1px solid #cbd6cd; padding: 9px 0; color: #56645b; display: flex; justify-content: space-between; gap: 12px; }
.ck-source-row span:last-child { font-family: "SFMono-Regular", Consolas, monospace; text-align: right; }
.ck-side-link { font-size: 12px; font-weight: 800; color: var(--accent-deep); display: inline-block; margin-top: 8px; }

.ck-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 24px 0; margin-top: 20px; display: flex; gap: 46px; align-items: center; flex-wrap: wrap; }
.ck-strip strong { font-size: 14px; }
.ck-strip p { font-size: 12px; color: var(--muted-ink); margin: 0; max-width: 620px; }
.ck-mini-rule { width: 1px; height: 32px; background: var(--line); }

/* "EV Models" 카테고리(tone: blue) 아이콘 배지 배경도 옅은 파랑이 하드코딩돼 있어서
   아이콘 색만 초록으로 바뀌면 배지 배경과 안 맞는다 — 옅은 그린 톤으로 맞춤(글/카테고리 페이지용). */
.category-icon.blue { background: #e3ebe8; }
.up-pill { background: #fbeadf; color: var(--accent); }
.metric-bar i { background: linear-gradient(90deg, var(--accent), var(--blue)); }
.hero-grid::after { background: radial-gradient(circle, rgba(194,112,61,.18), rgba(194,112,61,0) 68%); }

@media (max-width: 860px) {
  .ck-hero-grid, .ck-compare-area { grid-template-columns: 1fr; }
  .ck-categories { grid-template-columns: repeat(2, 1fr); }
  .ck-section-head { display: block; }
  .ck-section-intro { margin-top: 8px; }
  .ck-strip { flex-direction: column; align-items: flex-start; gap: 14px; }
  .ck-mini-rule { width: 50px; height: 1px; }
}
@media (max-width: 560px) {
  .ck-categories { grid-template-columns: 1fr; }
  .ck-article { flex-direction: column; align-items: flex-start; gap: 8px; }
  .topbar-right { display: none; }
}