/* 블로그. _legal.css 의 읽기 중심 톤을 잇되, 글 목록과 본문 요소를 더한다. */
:root{
  --bg:#FFFFFF; --surface:#F7F8FA; --card:#FFFFFF; --line:#E7E9EE;
  --ink:#16181D; --ink2:#4A4F5A; --ink3:#8B8D98;
  --primary:#2A78D6; --dividend:#1BAF7A; --warn:#E3A34A;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#16171B; --surface:#1B1D22; --card:#1F2126; --line:#2C2F36;
    --ink:#F2F3F5; --ink2:#B9BDC6; --ink3:#8B8D98;
    --primary:#3987E5; --dividend:#2ECC94; --warn:#E8BE72;
  }
}
:root[data-theme="dark"]{
  --bg:#16171B; --surface:#1B1D22; --card:#1F2126; --line:#2C2F36;
  --ink:#F2F3F5; --ink2:#B9BDC6; --ink3:#8B8D98;
  --primary:#3987E5; --dividend:#2ECC94;
}
:root[data-theme="light"]{
  --bg:#FFFFFF; --surface:#F7F8FA; --card:#FFFFFF; --line:#E7E9EE;
  --ink:#16181D; --ink2:#4A4F5A; --ink3:#8B8D98;
  --primary:#2A78D6; --dividend:#1BAF7A;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:'Apple SD Gothic Neo','Pretendard',-apple-system,BlinkMacSystemFont,
    'Segoe UI',Roboto,'Noto Sans KR',sans-serif;
  -webkit-font-smoothing:antialiased; line-height:1.8; font-size:16px;
}
.wrap{max-width:720px;margin:0 auto;padding:0 24px}

/* ---- 머리말 ---- */
.top{padding:22px 0;border-bottom:1px solid var(--line)}
.top .row{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink)}
.brand .mark{
  width:28px;height:28px;border-radius:9px;background:var(--primary);color:#fff;
  font-weight:900;font-size:15px;line-height:28px;text-align:center;letter-spacing:-1px;
}
.brand b{font-weight:900;letter-spacing:-.5px;font-size:17px}
.top nav{margin-left:auto;display:flex;gap:14px;align-items:center}
.top nav a{color:var(--ink3);text-decoration:none;font-size:13px;font-weight:700}
.top nav a:hover{color:var(--primary)}
#themeToggle{
  background:none;border:1px solid var(--line);border-radius:8px;
  width:30px;height:30px;cursor:pointer;font-size:14px;line-height:1;
}

/* ---- 글 목록 ---- */
.lede{color:var(--ink2);margin:10px 0 0}
.posts{list-style:none;margin:26px 0 0}
.posts li{border-bottom:1px solid var(--line)}
.posts a{display:block;padding:20px 0;text-decoration:none;color:inherit}
.posts a:hover h2{color:var(--primary)}
.posts h2{font-size:18px;font-weight:800;letter-spacing:-.4px;line-height:1.45}
.posts p{color:var(--ink2);font-size:14.5px;margin-top:6px}
.posts .meta{color:var(--ink3);font-size:12.5px;margin-top:8px;font-weight:600}

/* ---- 본문 ---- */
article{padding:36px 0 8px}
article h1{font-size:29px;font-weight:900;letter-spacing:-1.1px;line-height:1.35}
.byline{color:var(--ink3);font-size:13px;margin-top:10px;font-weight:600}
article h2{font-size:20px;font-weight:900;letter-spacing:-.5px;margin:38px 0 12px}
article h3{font-size:17px;font-weight:800;margin:24px 0 8px}
article p{color:var(--ink2);margin-bottom:14px}
article ul,article ol{color:var(--ink2);margin:0 0 14px 22px}
article li{margin-bottom:7px}
article strong{color:var(--ink);font-weight:800}
article a{color:var(--primary)}
hr{border:0;border-top:1px solid var(--line);margin:32px 0}

table{
  width:100%;border-collapse:collapse;margin:16px 0 20px;font-size:14.5px;
  display:block;overflow-x:auto;
}
@media(min-width:620px){table{display:table}}
th,td{border-bottom:1px solid var(--line);padding:10px 12px;text-align:left}
th{color:var(--ink);font-weight:800;background:var(--surface);white-space:nowrap}
td{color:var(--ink2)}
td strong{color:var(--ink)}

.note{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--primary);
  border-radius:10px;padding:14px 16px;margin:18px 0;font-size:14.5px;color:var(--ink2);
}
.note b{color:var(--ink)}
.warn{border-left-color:var(--warn)}

/* 계산 예시. 숫자가 줄 맞아야 읽힌다. */
.calc{
  background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;margin:16px 0;font-size:14px;color:var(--ink2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre;
  overflow-x:auto;line-height:1.7;
}

/* ---- 광고 자리 ----
   애드센스 코드를 이 안에 넣는다. 본문 사이에 억지로 끼우지 않고 글이 끝난
   자리에 둔다 — 읽는 흐름을 끊으면 체류 시간이 떨어지고, 그건 광고 수익에도
   나쁘다. */
.ad{margin:30px 0;min-height:1px}
.ad:empty{display:none}

.cta-box{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:20px;margin:30px 0 10px;text-align:center;
}
.cta-box p{margin-bottom:14px;font-size:14.5px}
.cta-box a{
  display:inline-block;background:var(--primary);color:#fff;text-decoration:none;
  padding:11px 22px;border-radius:10px;font-weight:800;font-size:15px;
}
.related{margin:30px 0 0}
.related h2{font-size:16px;font-weight:800;margin-bottom:10px}
.related ul{list-style:none;margin-left:0}
.related li{margin-bottom:7px}
.related a{color:var(--primary);text-decoration:none;font-size:14.5px;font-weight:600}
.related a:hover{text-decoration:underline}

footer{border-top:1px solid var(--line);margin-top:44px;padding:22px 0 48px}
.disclaimer{color:var(--ink3);font-size:12.5px;line-height:1.7}
.disclaimer strong{color:var(--ink2)}

/* 광고가 실리는 페이지에서 방침으로 닿을 길. 애드센스 요구사항이다. */
.footlinks{
  margin:18px 0 0; text-align:center;
  font-size:13px; color:var(--ink3);
}
.footlinks a{color:var(--ink3); text-decoration:none}
.footlinks a:hover{color:var(--ink); text-decoration:underline}