/*
Theme Name: LeakCost
Theme URI: https://leakcost.zibsuri.com
Author: LeakCost
Description: 아파트·주택 누수 비용 정보 플랫폼 전용 테마 — 프리미엄 디자인 시스템.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: leakcost
*/

/* ============ 디자인 토큰 ============ */
:root {
  --lk-primary: #0F4C81;
  --lk-primary-deep: #0C3D6B;
  --lk-accent: #2FA8C9;
  --lk-accent-ink: #1E7F9C;
  --lk-accent-soft: #D9EEF6;
  --lk-ink: #22303C;
  --lk-ink-soft: #46576A;
  --lk-muted: #6E8091;
  --lk-line: #E4EAF1;
  --lk-bg: #FFFFFF;
  --lk-bg-soft: #F4F7FA;
  --lk-bg-tint: #EAF4F9;
  --lk-bg-mist: #F8FAFC;
  --lk-success: #2E8B6D;
  --lk-warn: #B7791F;

  --lk-r-sm: 10px;
  --lk-r-md: 16px;
  --lk-r-lg: 24px;
  --lk-shadow-s: 0 2px 10px rgba(34,48,60,.06);
  --lk-shadow-m: 0 14px 36px rgba(34,48,60,.10);
  --lk-shadow-l: 0 28px 64px rgba(15,76,129,.14);

  --lk-font-body: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --lk-font-display: "Noto Serif KR", "Pretendard Variable", serif;
  --lk-cw: 1180px;
  --lk-cw-narrow: 820px;
}

/* ============ 리셋/기본 ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
  margin: 0;
  font-family: var(--lk-font-body);
  font-size: 16px;
  line-height: 1.7;
  color: var(--lk-ink);
  background: var(--lk-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
a { color: var(--lk-primary); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--lk-accent-ink); }
h1, h2, h3, h4, h5, h6 { line-height: 1.35; letter-spacing: -0.01em; color: var(--lk-ink); font-weight: 700; }
p { margin: 0 0 1.1em; }
:focus-visible { outline: 3px solid var(--lk-accent); outline-offset: 2px; border-radius: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: -999px; top: 8px; z-index: 9999; background: var(--lk-primary); color: #fff; padding: 10px 18px; border-radius: 8px; }
.skip-link:focus { left: 8px; color: #fff; }

/* ============ 헤더 ============ */
.lk-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--lk-line); }
.lk-header-inner { max-width: var(--lk-cw); margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 24px; height: 72px; }
.lk-brand { display: flex; align-items: center; gap: 12px; min-height: 44px; }
.lk-brand-mark { width: 40px; height: 40px; flex: none; display: block; }
.lk-brand-name { font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--lk-ink); }
.lk-brand-name em { font-style: normal; color: var(--lk-primary); }
.lk-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.lk-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; font-weight: 600; font-size: 15px; color: var(--lk-ink-soft); }
.lk-nav a:hover, .lk-nav a[aria-current="page"] { color: var(--lk-primary); background: var(--lk-bg-tint); }
.lk-nav-cta { background: var(--lk-primary) !important; color: #fff !important; padding: 0 18px !important; margin-left: 8px; box-shadow: var(--lk-shadow-s); }
.lk-nav-cta:hover { background: var(--lk-primary-deep) !important; color: #fff !important; }
.lk-nav-toggle { display: none; }

@media (max-width: 860px) {
  .lk-nav { position: fixed; inset: 72px 0 auto 0; background: #fff; border-bottom: 1px solid var(--lk-line); flex-direction: column; align-items: stretch; padding: 12px 20px 20px; gap: 2px; transform: translateY(-130%); transition: transform .22s ease; box-shadow: var(--lk-shadow-m); }
  .lk-nav.is-open { transform: translateY(0); }
  .lk-nav a { justify-content: flex-start; }
  .lk-nav-cta { margin-left: 0; justify-content: center; }
  .lk-nav-toggle { display: inline-flex; margin-left: auto; width: 44px; height: 44px; align-items: center; justify-content: center; border: 0; background: var(--lk-bg-soft); border-radius: 10px; cursor: pointer; color: var(--lk-ink); }
  .lk-nav-toggle span { display: block; width: 18px; height: 2px; background: currentColor; margin: 2px 0; border-radius: 2px; }
}

/* ============ 공통 레이아웃 ============ */
.lk-container { max-width: var(--lk-cw); margin: 0 auto; padding: 0 24px; }
.lk-main { min-height: 60vh; }

/* ============ 포스트 본문 ============ */
.lk-single { max-width: var(--lk-cw-narrow); margin: 0 auto; padding: 56px 24px 96px; }
.lk-single-hero { text-align: center; margin-bottom: 40px; }
.lk-kicker { display: inline-flex; align-items: center; gap: 8px; background: var(--lk-bg-tint); color: var(--lk-primary); font-weight: 700; font-size: 13px; letter-spacing: .02em; padding: 6px 14px; border-radius: 999px; margin-bottom: 20px; }
.lk-single h1.entry-title { font-family: var(--lk-font-display); font-size: clamp(30px, 4.6vw, 46px); font-weight: 700; line-height: 1.28; margin: 0 0 16px; letter-spacing: -0.02em; word-break: keep-all; }
.lk-post-meta { color: var(--lk-muted); font-size: 14px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.lk-hero-img { margin: 0 0 40px; border-radius: var(--lk-r-lg); overflow: hidden; box-shadow: var(--lk-shadow-m); }
.lk-hero-img img { display: block; width: 100%; }

.lk-content { font-size: 17px; line-height: 1.8; }
.lk-content > * { max-width: 100%; }
.lk-content h2 { font-size: clamp(22px, 3vw, 27px); margin: 56px 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--lk-line); letter-spacing: -0.015em; }
.lk-content h2::before { content: ""; display: inline-block; width: 10px; height: 10px; background: var(--lk-accent); border-radius: 3px; margin-right: 10px; transform: translateY(-2px); }
.lk-content h3 { font-size: 20px; margin: 36px 0 14px; color: var(--lk-primary-deep); }
.lk-content p { margin: 0 0 1.25em; }
.lk-content ul, .lk-content ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.lk-content li { margin-bottom: .45em; }
.lk-content a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--lk-accent); }
.lk-content a:hover { text-decoration-color: var(--lk-primary); }

/* 요약 박스 */
.lk-summary { background: linear-gradient(135deg, #F0F7FC, #EAF4F9); border: 1px solid #D6E8F2; border-radius: var(--lk-r-md); padding: 24px 26px; margin: 0 0 36px; }
.lk-summary-title { font-weight: 800; color: var(--lk-primary); font-size: 15px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.lk-summary-title::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lk-accent); }
.lk-summary ul { margin: 0; padding-left: 1.1em; }
.lk-summary li { margin-bottom: 6px; font-size: 15.5px; color: var(--lk-ink-soft); }

/* 표 */
.lk-table-wrap { overflow-x: auto; margin: 0 0 28px; border-radius: var(--lk-r-md); border: 1px solid var(--lk-line); box-shadow: var(--lk-shadow-s); }
table.lk-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: #fff; min-width: 560px; }
.lk-table caption { caption-side: top; text-align: left; font-weight: 700; font-size: 14px; color: var(--lk-primary); padding: 14px 18px 4px; }
.lk-table thead th { background: var(--lk-bg-soft); color: var(--lk-primary-deep); font-weight: 700; text-align: left; padding: 13px 16px; border-bottom: 2px solid var(--lk-primary); white-space: nowrap; }
.lk-table tbody td { padding: 13px 16px; border-bottom: 1px solid var(--lk-line); vertical-align: top; }
.lk-table tbody tr:nth-child(even) { background: #FBFCFE; }
.lk-table tbody tr:last-child td { border-bottom: 0; }

/* 콜아웃 */
.lk-content blockquote.lk-callout, .lk-callout { margin: 0 0 28px; padding: 20px 24px; background: #FFFBF2; border: 1px solid #F2E2BC; border-left: 4px solid var(--lk-warn); border-radius: 0 var(--lk-r-md) var(--lk-r-md) 0; font-size: 15.5px; color: var(--lk-ink-soft); }
.lk-callout p { margin: 0; }

/* 차트 */
.lk-chart { margin: 0 0 28px; padding: 22px 24px; background: var(--lk-bg-mist); border: 1px solid var(--lk-line); border-radius: var(--lk-r-md); }
.lk-chart-title { font-weight: 800; font-size: 15px; color: var(--lk-primary-deep); margin: 0 0 16px; }
.lk-bar-row { display: grid; grid-template-columns: 132px 1fr 118px; align-items: center; gap: 12px; margin-bottom: 12px; }
.lk-bar-row:last-child { margin-bottom: 0; }
.lk-bar-label { font-size: 13.5px; font-weight: 600; color: var(--lk-ink-soft); }
.lk-bar-track { height: 10px; background: #E8EEF4; border-radius: 999px; overflow: hidden; }
.lk-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--lk-primary), var(--lk-accent)); border-radius: 999px; }
.lk-bar-value { font-size: 12.5px; color: var(--lk-muted); text-align: right; }

/* 목록 */
.lk-content ol.lk-steps { list-style: none; counter-reset: lkstep; padding-left: 0; margin: 0 0 28px; }
.lk-steps li { counter-increment: lkstep; position: relative; padding: 0 0 16px 46px; margin: 0; }
.lk-steps li::before { content: counter(lkstep); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--lk-primary); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; }
.lk-steps li strong { display: block; font-size: 15.5px; }
.lk-steps li { color: var(--lk-ink-soft); font-size: 15.5px; }
ul.lk-check { list-style: none; padding-left: 0; margin: 0 0 28px; }
ul.lk-check li { position: relative; padding-left: 30px; margin-bottom: 10px; color: var(--lk-ink-soft); }
ul.lk-check li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--lk-accent-soft); color: var(--lk-primary); font-weight: 800; font-size: 12px; display: flex; align-items: center; justify-content: center; }

/* 이미지 */
.lk-figure { margin: 28px 0; }
.lk-figure img { display: block; width: 100%; border-radius: var(--lk-r-md); box-shadow: var(--lk-shadow-s); }
.lk-figure figcaption { margin-top: 10px; font-size: 13px; color: var(--lk-muted); text-align: center; }

/* 목차(EZ TOC) */
#ez-toc-container { background: var(--lk-bg-mist); border: 1px solid var(--lk-line); border-radius: var(--lk-r-md); padding: 18px 22px; margin: 0 0 32px; box-shadow: none; }
#ez-toc-container .ez-toc-title { font-weight: 800; color: var(--lk-primary); font-size: 15px; }
#ez-toc-container ul.ez-toc-list { margin: 10px 0 0; padding-left: 1.1em; }
#ez-toc-container li { margin-bottom: 6px; font-size: 14.5px; }
#ez-toc-container a { color: var(--lk-ink-soft); text-decoration: none; }
#ez-toc-container a:hover { color: var(--lk-primary); }

/* 법적 고지 */
.legal-notice, .ai-notice { font-size: .85em; color: var(--lk-muted); }
.legal-notice { background: #F8F9FA; border-left: 3px solid #CBD5E1; padding: 14px 16px; border-radius: 0 10px 10px 0; margin-top: 40px; }
.legal-notice p { margin: 5px 0; color: #6E8091; }

/* 관련글 */
.lk-related { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--lk-line); }
.lk-related h2 { font-family: var(--lk-font-display); font-size: 24px; margin: 0 0 22px; border: 0; padding: 0; }
.lk-related h2::before { display: none; }
.lk-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.lk-card { background: #fff; border: 1px solid var(--lk-line); border-radius: var(--lk-r-md); overflow: hidden; box-shadow: var(--lk-shadow-s); transition: transform .2s ease, box-shadow .2s ease; display: flex; flex-direction: column; }
.lk-card:hover { transform: translateY(-4px); box-shadow: var(--lk-shadow-m); }
.lk-card-img { aspect-ratio: 16/9; overflow: hidden; background: var(--lk-bg-soft); }
.lk-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.lk-card:hover .lk-card-img img { transform: scale(1.04); }
.lk-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.lk-card h3 { font-size: 17px; margin: 0; line-height: 1.45; }
.lk-card h3 a { color: var(--lk-ink); text-decoration: none; }
.lk-card h3 a:hover { color: var(--lk-primary); }
.lk-card p { font-size: 14px; color: var(--lk-muted); margin: 0; }

/* 포스트 네비 */
.lk-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 48px; }
.lk-postnav a { display: block; padding: 18px 20px; background: var(--lk-bg-mist); border: 1px solid var(--lk-line); border-radius: var(--lk-r-md); font-size: 14.5px; font-weight: 600; color: var(--lk-ink); }
.lk-postnav a:hover { border-color: var(--lk-accent); color: var(--lk-primary); }
.lk-postnav span { display: block; font-size: 12.5px; color: var(--lk-muted); font-weight: 500; margin-bottom: 4px; }

/* ============ 푸터 ============ */
.lk-footer { background: #14202B; color: #A7B5C2; margin-top: 0; }
.lk-footer a { color: #C7D3DE; }
.lk-footer a:hover { color: #fff; }
.lk-footer-top { max-width: var(--lk-cw); margin: 0 auto; padding: 64px 24px 40px; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; }
.lk-footer h4 { color: #fff; font-size: 15px; margin: 0 0 14px; }
.lk-footer .lk-brand-name { color: #fff; }
.lk-footer p { font-size: 14px; line-height: 1.7; margin: 0 0 10px; color: #8FA0AF; }
.lk-footer ul { list-style: none; margin: 0; padding: 0; }
.lk-footer ul li { margin-bottom: 10px; }
.lk-footer ul a { font-size: 14px; }
.lk-footer-bottom { border-top: 1px solid rgba(255,255,255,.08); }
.lk-footer-bottom-inner { max-width: var(--lk-cw); margin: 0 auto; padding: 24px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13px; color: #75869A; }
.lk-footer-legal { max-width: var(--lk-cw); margin: 0 auto; padding: 0 24px 40px; }
.lk-footer-legal .legal-notice { background: rgba(255,255,255,.04); border-left-color: #3E5568; }
.lk-footer-legal .legal-notice p { color: #8FA0AF; }
.lk-footer-ai { max-width: var(--lk-cw); margin: 0 auto; padding: 0 24px 28px; font-size: 13px; color: #75869A; }

@media (max-width: 860px) {
  .lk-footer-top { grid-template-columns: 1fr; gap: 28px; }
  .lk-card-grid { grid-template-columns: 1fr; }
  .lk-postnav { grid-template-columns: 1fr; }
  .lk-single { padding: 40px 20px 72px; }
  .lk-bar-row { grid-template-columns: 104px 1fr 100px; gap: 8px; }
  .lk-container { padding: 0 20px; }
}

/* ============ 아카이브(글 목록) ============ */
.lk-archive { max-width: var(--lk-cw); margin: 0 auto; padding: 56px 24px 96px; }
.lk-archive h1 { font-family: var(--lk-font-display); font-size: clamp(28px, 4vw, 40px); margin: 0 0 8px; }
.lk-archive .lk-archive-desc { color: var(--lk-muted); margin-bottom: 40px; }
.lk-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .lk-archive-grid { grid-template-columns: 1fr; } .lk-archive { padding: 40px 20px 72px; } }

/* 페이지 */
.lk-page { max-width: var(--lk-cw-narrow); margin: 0 auto; padding: 56px 24px 96px; }
.lk-page h1 { font-family: var(--lk-font-display); font-size: clamp(28px, 4vw, 40px); margin: 0 0 24px; }

/* 댓글/기본 WP 크롬 제거 */
.comments-area, #respond, .comment-respond { display: none; }
.widget-area { display: none; }
.alignwide { margin-left: 0; margin-right: 0; }