/* ═══ 싹 SAG 공개 사이트 공용 스타일 ═══
   랜딩(landing.html)의 토큰·타이포를 그대로 승계한다. 랜딩은 스크롤 연출 때문에
   자체 CSS를 유지하고, 하위 정보 페이지는 이 파일 하나만 쓴다.
   규칙: 선택자당 정의 한 번 · !important 금지 · transition: all 금지 · ease-in 금지 */

:root {
  --ink:#191F28; --sub:#4E5968; --mut:#65707E; --faint:#8B95A1;
  --bg:#FFFFFF; --bg-soft:#F9FAFB; --line:#E5E8EB; --line-soft:#F2F4F6;
  --lime:#C8F169; --grn:#357A22;
  --c-seo:#357A22; --c-aeo:#1B64DA; --c-geo:#7C3AED;
  --c-seo-bg:#EDF3E4; --c-aeo-bg:#E8F0FD; --c-geo-bg:#F2ECFD;
  --critical:#D22C2C; --ok:#2E7D32;
  --ease:cubic-bezier(0.23, 1, 0.32, 1);
  --r-sm:8px; --r-md:12px; --r-lg:20px; --r-pill:999px;
  --fs-h1:clamp(34px, 4.2vw, 56px);
  --fs-h2:clamp(26px, 3vw, 38px);
  --fs-h3:19px;
  --fs-lead:19px; --fs-body:16px;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,sans-serif; }
body {
  background:var(--bg); color:var(--ink); font-size:var(--fs-body); font-weight:500; line-height:1.7;
  word-break:keep-all; overflow-wrap:break-word; -webkit-font-smoothing:antialiased;
}
a { color:inherit; }
img { max-width:100%; height:auto; display:block; }
p, li { text-wrap:pretty; }
h1, h2, h3 { text-wrap:balance; }
:focus-visible { outline:2px solid var(--ink); outline-offset:3px; border-radius:4px; }
.wrap { max-width:1140px; margin:0 auto; padding:0 24px; }
.narrow { max-width:820px; }
.c-seo { color:var(--c-seo); } .c-aeo { color:var(--c-aeo); } .c-geo { color:var(--c-geo); }

.skip {
  position:absolute; left:16px; top:-64px; z-index:50; background:var(--ink); color:#fff;
  padding:12px 20px; border-radius:var(--r-md); font-size:14px; font-weight:700; text-decoration:none;
  transition:top 200ms var(--ease);
}
.skip:focus { top:16px; }

/* ── 상단 내비 ── */
.nav {
  position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid var(--line-soft);
}
.nav .wrap { display:flex; align-items:center; gap:22px; height:64px; }
.nav .brand { display:flex; align-items:baseline; gap:7px; text-decoration:none; }
.nav .brand b { font-size:21px; font-weight:800; letter-spacing:-.05em; }
.nav .brand span { font-size:10.5px; font-weight:700; letter-spacing:.26em; color:var(--grn); }
.nav .sp { flex:1; }
.nav a.txt {
  font-size:14.5px; font-weight:600; color:var(--sub); text-decoration:none;
  transition:color 160ms var(--ease);
}
.nav a.txt:hover { color:var(--ink); }
.nav a.txt[aria-current="page"] { color:var(--ink); font-weight:700; }
.nav a.cta {
  background:var(--ink); color:#fff; padding:10px 20px; border-radius:var(--r-pill);
  font-size:14px; font-weight:700; text-decoration:none; white-space:nowrap;
  transition:background-color 160ms var(--ease), transform 160ms var(--ease);
}
.nav a.cta:hover { background:#2B3440; }
.nav a.cta:active { transform:scale(0.98); }

/* ── 페이지 머리 ── */
.phead { padding:56px 0 40px; border-bottom:1px solid var(--line-soft); }
.crumb { display:flex; flex-wrap:wrap; align-items:center; gap:7px; font-size:13px; color:var(--faint); margin-bottom:18px; }
.crumb a { text-decoration:none; transition:color 160ms var(--ease); }
.crumb a:hover { color:var(--sub); }
.crumb span[aria-current] { color:var(--sub); font-weight:600; }
.eyebrow { font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--grn); margin-bottom:12px; }
.phead h1 { font-size:var(--fs-h1); font-weight:800; letter-spacing:-.035em; line-height:1.22; }
.phead .lead { font-size:var(--fs-lead); color:var(--sub); margin-top:20px; max-width:760px; line-height:1.72; }
.phead .cta-row { margin-top:30px; }

/* ── 버튼 ── */
.cta-row { display:flex; flex-wrap:wrap; gap:10px; }
.btn {
  display:inline-block; padding:13px 24px; border-radius:var(--r-pill);
  font-size:15px; font-weight:700; text-decoration:none;
  transition:background-color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.btn-primary { background:var(--ink); color:#fff; }
.btn-primary:hover { background:#2B3440; }
.btn-ghost { background:var(--bg-soft); color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover { border-color:#D3D8DE; }
.btn:active { transform:scale(0.98); }

/* ── 섹션 ── */
section { padding:64px 0; }
section + section { border-top:1px solid var(--line-soft); }
h2 { font-size:var(--fs-h2); font-weight:800; letter-spacing:-.03em; line-height:1.3; }
h2 + .sub { font-size:17px; color:var(--sub); margin-top:14px; max-width:720px; }
h3 { font-size:var(--fs-h3); font-weight:700; letter-spacing:-.02em; }
.body-copy p + p { margin-top:16px; }
.body-copy { color:var(--sub); }
.body-copy strong { color:var(--ink); font-weight:700; }

/* ── 카드 ── */
.grid { display:grid; gap:16px; margin-top:34px; }
.g2 { grid-template-columns:repeat(2, 1fr); }
.g3 { grid-template-columns:repeat(3, 1fr); }
.card {
  border:1px solid var(--line); border-radius:var(--r-lg); padding:26px 24px; background:var(--bg);
  transition:border-color 160ms var(--ease);
}
.card:hover { border-color:#D3D8DE; }
.card h3 { margin-bottom:10px; }
.card p { font-size:15px; color:var(--sub); }
.card .tag { display:inline-block; font-size:12px; font-weight:700; padding:4px 10px; border-radius:var(--r-pill); margin-bottom:12px; }
.tag-seo { background:var(--c-seo-bg); color:var(--c-seo); }
.tag-aeo { background:var(--c-aeo-bg); color:var(--c-aeo); }
.tag-geo { background:var(--c-geo-bg); color:var(--c-geo); }
.card a.more { display:inline-block; margin-top:14px; font-size:14px; font-weight:700; color:var(--grn); text-decoration:none; }
.card a.more:hover { text-decoration:underline; }

/* ── 번호 목록 (단계) ── */
.steps { display:grid; gap:2px; margin-top:34px; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; }
.step { display:grid; grid-template-columns:64px 1fr; gap:20px; padding:24px; background:var(--bg); border-top:1px solid var(--line-soft); }
.step:first-child { border-top:0; }
.step .n { font-size:15px; font-weight:800; color:var(--faint); letter-spacing:.04em; }
.step h3 { margin-bottom:8px; }
.step p { font-size:15px; color:var(--sub); }

/* ── 표 ── */
.tbl-wrap { overflow-x:auto; margin-top:30px; border:1px solid var(--line); border-radius:var(--r-lg); }
table { width:100%; border-collapse:collapse; font-size:15px; min-width:520px; }
th, td { padding:14px 18px; text-align:left; border-top:1px solid var(--line-soft); vertical-align:top; }
th { background:var(--bg-soft); font-weight:700; font-size:13.5px; color:var(--sub); border-top:0; white-space:nowrap; }
td { color:var(--sub); }
td:first-child { color:var(--ink); font-weight:600; }

/* ── 체크 목록 ── */
.checks { list-style:none; margin-top:26px; display:grid; gap:12px; }
.checks li { display:grid; grid-template-columns:20px 1fr; gap:12px; font-size:15.5px; color:var(--sub); }
.checks li::before { content:""; width:7px; height:7px; margin-top:9px; border-radius:50%; background:var(--grn); }
.checks li.no::before { background:var(--faint); }

/* ── FAQ ── */
.faq { margin-top:34px; border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary {
  padding:22px 40px 22px 0; font-size:17px; font-weight:700; cursor:pointer; list-style:none; position:relative;
  transition:color 160ms var(--ease);
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary:hover { color:var(--grn); }
.faq summary::after {
  content:""; position:absolute; right:8px; top:31px; width:9px; height:9px;
  border-right:2px solid var(--faint); border-bottom:2px solid var(--faint);
  transform:rotate(45deg); transition:transform 200ms var(--ease);
}
.faq details[open] summary::after { transform:rotate(-135deg); }
.faq .a { padding:0 0 24px; font-size:15.5px; color:var(--sub); max-width:800px; }

/* ── 마무리 CTA ── */
.cta-band { background:var(--bg-soft); border-top:1px solid var(--line); }
.cta-band .wrap { padding-top:64px; padding-bottom:64px; }
.cta-band h2 { max-width:640px; }
.cta-band .sub { margin-bottom:28px; }

/* ── 푸터 ── */
footer { background:var(--ink); color:#fff; padding:52px 0 40px; }
footer .cols { display:grid; grid-template-columns:1.4fr repeat(3, 1fr); gap:32px; }
footer .brand { display:flex; align-items:baseline; gap:7px; text-decoration:none; margin-bottom:14px; }
footer .brand b { font-size:19px; font-weight:800; letter-spacing:-.05em; }
footer .brand span { font-size:10px; font-weight:700; letter-spacing:.26em; color:var(--lime); }
footer h4 { font-size:12.5px; font-weight:700; letter-spacing:.06em; color:var(--faint); margin-bottom:14px; }
footer nav { display:grid; gap:9px; }
footer nav a { font-size:14.5px; color:#D6DBE0; text-decoration:none; transition:color 160ms var(--ease); }
footer nav a:hover { color:#fff; }
footer .fine { margin-top:40px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; color:var(--faint); line-height:1.75; }
footer .fine b { color:#D6DBE0; font-weight:600; }

@media (max-width:900px) {
  .g3, .g2 { grid-template-columns:1fr; }
  footer .cols { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  section { padding:48px 0; }
  .phead { padding:36px 0 30px; }
  .nav .wrap { gap:14px; }
  .nav a.txt.hide-m { display:none; }
  .nav a.cta .hide-m { display:none; }
  .step { grid-template-columns:1fr; gap:8px; }
  footer .cols { grid-template-columns:1fr; gap:26px; }
}

/* ── 인사이트 글 (CMS-001) ── */
.preview-bar {
  background:#8A6414; color:#fff; font-size:13.5px; font-weight:650; text-align:center; padding:11px 20px;
}
.meta-line { font-size:13.5px; color:var(--faint); margin-top:16px; }
.answer {
  margin-top:8px; padding:24px 26px; border-left:3px solid var(--grn); background:var(--bg-soft);
  border-radius:0 var(--r-md) var(--r-md) 0;
}
.answer p { font-size:17px; color:var(--ink); line-height:1.72; }
.toc { margin-top:30px; padding:22px 24px; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--r-lg); }
.toc h2 { font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--faint); margin-bottom:14px; }
.toc ol { margin-left:18px; display:grid; gap:8px; }
.toc a { font-size:15px; font-weight:600; color:var(--sub); text-decoration:none; transition:color 160ms var(--ease); }
.toc a:hover { color:var(--grn); }

/* 본문 블록 — 편집자가 쓴 내용이 들어오는 곳 */
.prose > * + * { margin-top:18px; }
.prose h2 { font-size:var(--fs-h2); font-weight:800; letter-spacing:-.03em; margin-top:44px; scroll-margin-top:84px; }
.prose h3 { font-size:var(--fs-h3); font-weight:700; margin-top:30px; scroll-margin-top:84px; }
.prose p { color:var(--sub); }
.prose strong { color:var(--ink); font-weight:700; }
.prose a { color:var(--grn); }
.prose ul, .prose ol { margin-left:20px; display:grid; gap:9px; color:var(--sub); }
.prose blockquote {
  padding:16px 22px; border-left:3px solid var(--line-strong, var(--line)); background:var(--bg-soft);
  border-radius:0 var(--r-md) var(--r-md) 0; color:var(--sub);
}
.prose code {
  background:var(--bg-soft); border:1px solid var(--line); border-radius:5px;
  padding:1px 6px; font-size:14px; font-family:inherit;
}
.prose pre {
  background:#191F28; color:#E5E8EB; border-radius:var(--r-md); padding:20px 22px; overflow-x:auto; font-size:14px;
}
.prose pre code { background:none; border:0; padding:0; color:inherit; }
.prose figure img { border:1px solid var(--line); border-radius:var(--r-md); }
.prose .tbl-wrap { margin-top:18px; }

.sources { list-style:none; margin-top:22px; display:grid; gap:11px; font-size:15px; }
.sources li { color:var(--sub); }
.sources a { color:var(--grn); }
.sources .when { color:var(--faint); font-size:13.5px; margin-left:8px; }