/* =========================================================
   bathleakcost.zibsuri.com — Design System (shared)
   화장실 누수 공사 비용 정보 플랫폼
   ========================================================= */

:root{
  /* color tokens */
  --c-primary:#1B4A73;
  --c-primary-dark:#12324D;
  --c-primary-deep:#0D2438;
  --c-accent:#2FA3B8;
  --c-accent-soft:#E3F4F7;
  --c-bg:#F7F9FC;
  --c-surface:#FFFFFF;
  --c-ink:#1F2933;
  --c-ink-soft:#55707F;
  --c-muted:#8A9AA8;
  --c-line:#E3EAF0;
  --c-line-strong:#C9D6E0;
  --c-amber:#E08A2E;
  --c-terra:#C4633F;
  --c-green:#2E8B6B;
  --c-white:#FFFFFF;

  /* radius */
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-full:999px;

  /* shadows */
  --sh-sm:0 1px 2px rgba(18,50,77,.06),0 2px 8px rgba(18,50,77,.05);
  --sh-md:0 2px 6px rgba(18,50,77,.07),0 14px 34px rgba(18,50,77,.09);
  --sh-lg:0 6px 16px rgba(18,50,77,.08),0 24px 60px rgba(18,50,77,.14);

  /* type */
  --font-sans:'Pretendard Variable','Pretendard','Noto Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  --font-serif:'Noto Serif KR','Noto Serif',Georgia,'Times New Roman',serif;
  --fs-hero:clamp(2.1rem,4.6vw,3.55rem);
  --fs-h2:clamp(1.45rem,2.4vw,1.95rem);
  --fs-h3:clamp(1.15rem,1.6vw,1.35rem);
  --fs-body:1.0625rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;
  --leading-tight:1.25;
  --leading-body:1.78;
  --tracking-tight:-.02em;

  /* layout */
  --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-5:48px; --space-6:64px; --space-7:88px; --space-8:112px;
  --container:1180px;
  --content-max:760px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:var(--leading-body);
  color:var(--c-ink);
  background:var(--c-bg);
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--c-primary);text-decoration:none;transition:color .2s ease}
a:hover{color:var(--c-accent)}
h1,h2,h3,h4{font-family:var(--font-sans);line-height:var(--leading-tight);letter-spacing:var(--tracking-tight);color:var(--c-primary-deep);font-weight:700;word-break:keep-all}
h1{font-size:var(--fs-hero)}
h2{font-size:var(--fs-h2);margin:var(--space-5) 0 var(--space-3)}
h3{font-size:var(--fs-h3);margin:var(--space-4) 0 var(--space-2)}
p{margin:0 0 var(--space-3)}
strong{font-weight:700}
em{font-style:normal;background:linear-gradient(transparent 62%,var(--c-accent-soft) 0)}

.container{max-width:var(--container);margin:0 auto;padding:0 var(--space-3)}
.section{padding:var(--space-7) 0}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 26px;border-radius:var(--r-full);
  font-weight:700;font-size:1rem;letter-spacing:-.01em;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease;
  cursor:pointer;border:1px solid transparent;text-align:center;
}
.btn-primary{background:var(--c-primary);color:var(--c-white)}
.btn-primary:hover{background:var(--c-primary-dark);color:var(--c-white);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-accent{background:var(--c-accent);color:var(--c-white)}
.btn-accent:hover{background:#278DA0;color:var(--c-white);transform:translateY(-2px);box-shadow:var(--sh-md)}
.btn-ghost{background:var(--c-white);color:var(--c-primary);border-color:var(--c-line-strong)}
.btn-ghost:hover{border-color:var(--c-primary);color:var(--c-primary);transform:translateY(-2px);box-shadow:var(--sh-sm)}
.btn-lg{min-height:56px;padding:16px 34px;font-size:1.0625rem}

/* ---------- header ---------- */
.site-header{
  position:sticky;top:0;z-index:60;background:rgba(247,249,252,.86);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--c-line);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);height:76px}
.brand{display:flex;align-items:center;gap:12px;min-height:44px}
.brand-mark{flex:0 0 auto}
.brand-text{display:flex;flex-direction:column;line-height:1.15}
.brand-name{font-weight:800;color:var(--c-primary);font-size:1.02rem;letter-spacing:-.02em}
.brand-sub{font-size:.72rem;color:var(--c-muted);letter-spacing:.02em}
.main-nav{display:flex;align-items:center;gap:6px}
.main-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-full);font-weight:600;font-size:.95rem;color:var(--c-ink-soft)}
.main-nav a:hover{color:var(--c-primary);background:rgba(27,74,115,.07)}
.nav-cta{margin-left:10px}
.nav-toggle{display:none;background:none;border:0;width:48px;height:48px;border-radius:var(--r-sm);cursor:pointer;color:var(--c-primary)}
.nav-toggle svg{width:26px;height:26px}

@media (max-width:960px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center}
  .main-nav{
    position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;gap:2px;
    background:var(--c-white);padding:var(--space-3);border-bottom:1px solid var(--c-line);
    box-shadow:var(--sh-md);transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:transform .2s ease,opacity .2s ease;
  }
  .main-nav.open{transform:none;opacity:1;pointer-events:auto}
  .main-nav a{padding:14px 16px;border-radius:var(--r-md);justify-content:flex-start}
  .nav-cta{margin:8px 0 0}
}

/* ---------- footer ---------- */
.site-footer{background:var(--c-primary-deep);color:#C7D4DE;margin-top:var(--space-8)}
.footer-top{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--space-5);padding:var(--space-7) 0 var(--space-5)}
.footer-brand .brand-name{color:#EAF3F8}
.footer-brand .brand-sub{color:#8FA6B5}
.footer-col h4{color:#EAF3F8;font-size:.95rem;margin-bottom:var(--space-2)}
.footer-col ul{list-style:none}
.footer-col li{margin-bottom:10px}
.footer-col a{color:#C7D4DE;font-size:.92rem}
.footer-col a:hover{color:var(--c-accent)}
.footer-notices{border-top:1px solid rgba(255,255,255,.12);padding:var(--space-4) 0 var(--space-5)}
.footer-legal{font-size:.8rem;line-height:1.7;color:#9FB2C0}
.footer-legal p{margin-bottom:8px}
.footer-meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.78rem;color:#7E95A6;margin-top:14px}
.footer-meta span{display:inline-flex;align-items:center;gap:6px}
@media (max-width:860px){
  .footer-top{grid-template-columns:1fr;gap:var(--space-4)}
  .section{padding:var(--space-6) 0}
}

/* ---------- cards ---------- */
.card{
  display:flex;flex-direction:column;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--r-lg);overflow:hidden;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--c-line-strong)}
.card-media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--c-primary-dark)}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease}
.card:hover .card-media img{transform:scale(1.04)}
.card-body{padding:var(--space-3) var(--space-3) var(--space-4);display:flex;flex-direction:column;gap:10px;flex:1}
.card-cat{font-size:.75rem;font-weight:800;color:var(--c-accent);letter-spacing:.02em}
.card-title{font-size:1.08rem;font-weight:700;color:var(--c-primary-deep);line-height:1.4}
.card:hover .card-title{color:var(--c-primary)}
.card-meta{font-size:.8rem;color:var(--c-muted);margin-top:auto}

/* ---------- article body ---------- */
.article-body{max-width:var(--content-max);margin:0 auto;font-size:1.0625rem;line-height:var(--leading-body);color:#2A3644}
.article-body h2{font-size:1.5rem;margin:var(--space-5) 0 var(--space-3);padding-bottom:12px;border-bottom:2px solid var(--c-accent-soft);position:relative}
.article-body h2::after{content:"";position:absolute;left:0;bottom:-2px;width:52px;height:2px;background:var(--c-accent)}
.article-body h3{font-size:1.18rem;margin:var(--space-4) 0 var(--space-2);color:var(--c-primary)}
.article-body ul,.article-body ol{margin:0 0 var(--space-3);padding-left:22px}
.article-body li{margin-bottom:8px}
.article-body a{font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--c-accent)}
.article-body a:hover{color:var(--c-accent)}

.article-lead{font-size:1.15rem;line-height:1.75;color:var(--c-ink-soft);margin-bottom:var(--space-4);font-weight:500}
.key-summary{
  background:linear-gradient(135deg,#EAF3F8,#F3F8FB);border:1px solid #D6E4EE;border-radius:var(--r-md);
  padding:var(--space-3) var(--space-4);margin:0 0 var(--space-4);font-size:.97rem;color:#33475A;
}
.key-summary strong{color:var(--c-primary)}
.callout{
  background:var(--c-surface);border-left:4px solid var(--c-accent);border-radius:0 var(--r-md) var(--r-md) 0;
  box-shadow:var(--sh-sm);padding:var(--space-3) var(--space-4);margin:var(--space-3) 0;
  color:var(--c-ink-soft);font-size:1rem;
}
.article-figure{margin:var(--space-4) 0}
.article-figure img{border-radius:var(--r-lg);box-shadow:var(--sh-md);width:100%}
.article-figure figcaption{font-size:.8rem;color:var(--c-muted);margin-top:10px;text-align:center}

/* tables */
.article-body table{
  width:100%;border-collapse:separate;border-spacing:0;margin:var(--space-3) 0 var(--space-4);
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);overflow:hidden;
  font-size:.93rem;line-height:1.6;
}
.article-body caption{font-size:.82rem;color:var(--c-muted);text-align:left;padding:0 2px 10px;caption-side:top}
.article-body th{background:var(--c-primary);color:var(--c-white);font-weight:700;text-align:left;padding:12px 14px;font-size:.88rem;letter-spacing:.01em}
.article-body td{padding:12px 14px;border-top:1px solid var(--c-line);vertical-align:top;color:#33475A}
.article-body tr:nth-child(even) td{background:#FAFCFE}
.article-body tbody tr:hover td{background:var(--c-accent-soft)}

/* inline chart */
.cost-chart{margin:var(--space-3) 0 var(--space-2);background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);padding:var(--space-3) var(--space-4);display:grid;gap:12px}
.chart-row{display:grid;grid-template-columns:150px 1fr 74px;align-items:center;gap:12px}
.chart-label{font-size:.85rem;font-weight:700;color:var(--c-primary);text-align:right}
.chart-track{height:12px;background:#EDF2F7;border-radius:var(--r-full);overflow:hidden}
.chart-bar{display:block;height:100%;border-radius:var(--r-full);background:linear-gradient(90deg,var(--c-accent),var(--c-primary));opacity:.92}
.chart-value{font-size:.78rem;font-weight:700;color:var(--c-ink-soft)}
.chart-note{font-size:.78rem;color:var(--c-muted);margin-top:4px}
@media (max-width:640px){
  .chart-row{grid-template-columns:104px 1fr 58px;gap:8px}
  .chart-label{font-size:.76rem;text-align:left}
  .article-body table{display:block;overflow-x:auto;white-space:nowrap;border-radius:var(--r-md)}
}

/* TOC (easy-table-of-contents) */
#ez-toc-container{
  background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-md);
  box-shadow:var(--sh-sm);padding:var(--space-3) var(--space-4);margin:0 0 var(--space-4) !important;
  max-width:100% !important;
}
#ez-toc-container .ez-toc-title{font-weight:800;color:var(--c-primary);font-size:.95rem}
#ez-toc-container ul{list-style:none;padding-left:0}
#ez-toc-container li{margin:6px 0}
#ez-toc-container a{color:var(--c-ink-soft);font-size:.92rem;font-weight:600}
#ez-toc-container a:hover{color:var(--c-accent)}

/* legal / ai notice */
.legal-notice{font-size:.85em !important;color:#777 !important}
.legal-notice p{margin:4px 0}
.ai-notice{font-size:.85em !important;color:#888 !important}

/* related posts */
.related-posts{margin-top:var(--space-6)}
.related-posts h2{font-size:1.3rem}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-3)}
@media (max-width:860px){.related-grid{grid-template-columns:1fr}}

/* scroll reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .reveal{opacity:1;transform:none}
}

/* a11y */
:focus-visible{outline:3px solid var(--c-accent);outline-offset:2px;border-radius:4px}
.skip-link{position:absolute;left:-999px;top:0;background:var(--c-primary);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;z-index:100}
.skip-link:focus{left:0}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* post hero */
.post-hero{background:linear-gradient(160deg,var(--c-primary-deep),var(--c-primary) 62%,#245B8C);color:#fff;padding:var(--space-7) 0 var(--space-6);position:relative;overflow:hidden}
.post-hero::after{content:"";position:absolute;inset:0;background:radial-gradient(600px 300px at 85% 10%,rgba(47,163,184,.28),transparent 70%);pointer-events:none}
.post-hero .hero-inner{position:relative;z-index:1;max-width:var(--content-max);margin:0 auto}
.post-hero .post-cat{display:inline-flex;align-items:center;min-height:28px;padding:4px 14px;border-radius:var(--r-full);background:rgba(47,163,184,.2);border:1px solid rgba(47,163,184,.5);color:#BFE6EC;font-size:.78rem;font-weight:800;letter-spacing:.03em;margin-bottom:var(--space-3)}
.post-hero h1{color:#fff;font-size:clamp(1.7rem,3.4vw,2.5rem)}
.post-hero .post-date{color:#9FB9CB;font-size:.88rem;margin-top:var(--space-2)}

/* page content */
.page-content{max-width:var(--content-max);margin:0 auto}
.entry-body{background:var(--c-surface);border:1px solid var(--c-line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);padding:clamp(22px,4vw,48px);margin-top:var(--space-4)}
.entry-body h2{margin-top:var(--space-4)}
.entry-body ul,.entry-body ol{padding-left:22px;margin-bottom:var(--space-3)}
.entry-body li{margin-bottom:8px}