/* 이름담기 작명 가이드 — 정적 콘텐츠 전용 스타일.
   앱(SPA)과 완전히 분리된 독립 페이지용. 앱 스타일/번들과 무관. */
:root{
  --paper:#faf6ee; --paper2:#f3ecdd; --ink:#2a2620; --soft:#6b6256;
  --faint:#9a9082; --line:#e3dac7; --lineStrong:#d3c6ab;
  --inju:#b5402f; --inju-soft:#c96a52;
  --blue:#34607a; --green:#5b7a52;
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px; line-height:1.78; letter-spacing:-0.01em;
}
a{ color:var(--blue); text-decoration:none; }
a:hover{ text-decoration:underline; }

/* 헤더 / 푸터 */
header.site, footer.site{
  background:var(--paper2); border-bottom:1px solid var(--line);
}
footer.site{ border-bottom:none; border-top:1px solid var(--line); margin-top:56px; }
header.site{ position:sticky; top:0; z-index:5; backdrop-filter:saturate(1.1) blur(2px); }
.bar{
  max-width:760px; margin:0 auto; padding:14px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  font-family:"Noto Serif KR",serif; font-weight:700; font-size:20px;
  color:var(--ink); letter-spacing:0.02em;
}
.brand:hover{ text-decoration:none; color:var(--inju); }
header.site nav{ display:flex; gap:18px; font-size:14.5px; font-weight:500; }
header.site nav a{ color:var(--soft); }

/* 본문 레이아웃 */
main.article, main.hub{ max-width:760px; margin:0 auto; padding:30px 22px 8px; }
.crumb{ font-size:13.5px; color:var(--faint); margin-bottom:18px; }
.crumb a{ color:var(--faint); }
.crumb span{ color:var(--soft); }

h1{
  font-family:"Noto Serif KR",serif; font-weight:700;
  font-size:30px; line-height:1.34; margin:6px 0 22px;
  letter-spacing:-0.02em;
}
.article h2{
  font-family:"Noto Serif KR",serif; font-weight:700; font-size:22px;
  margin:42px 0 14px; padding-top:14px; border-top:1px solid var(--line);
  letter-spacing:-0.01em;
}
.article h3{ font-weight:700; font-size:18px; margin:28px 0 8px; color:#3a342b; }
.article p{ margin:0 0 18px; }
.article ul, .article ol{ margin:0 0 20px; padding-left:22px; }
.article li{ margin:7px 0; }
.article strong{ color:#1f1b15; font-weight:700; }
.article blockquote{
  margin:22px 0; padding:14px 18px; background:var(--paper2);
  border-left:3px solid var(--inju-soft); border-radius:0 8px 8px 0; color:#46402f;
}
.article table{
  width:100%; border-collapse:collapse; margin:20px 0; font-size:15.5px;
}
.article th, .article td{ border:1px solid var(--lineStrong); padding:9px 12px; text-align:left; }
.article th{ background:var(--paper2); font-weight:700; }

/* 관련 글 / 면책 */
aside.related{ margin-top:48px; padding:20px 22px; background:var(--paper2); border-radius:14px; }
aside.related h2{ font-family:"Noto Serif KR",serif; font-size:17px; margin:0 0 12px; }
aside.related ul{ margin:0; padding-left:18px; }
aside.related li{ margin:8px 0; }
.disclaimer{ margin:30px 0 0; font-size:13.5px; color:var(--faint); line-height:1.6; }

/* CTA 카드 (가이드 → 앱) */
.cta{
  margin:40px 0 8px; padding:22px; text-align:center;
  background:linear-gradient(180deg,#fff,#f3ecdd);
  border:1px solid var(--lineStrong); border-radius:16px;
}
.cta p{ margin:0 0 14px; font-family:"Noto Serif KR",serif; font-size:17px; color:#3a342b; }
.cta a.btn{
  display:inline-block; background:var(--ink); color:var(--paper);
  padding:12px 26px; border-radius:24px; font-weight:700; font-size:15px;
}
.cta a.btn:hover{ background:var(--inju); text-decoration:none; }

/* 허브(가이드 목록) */
.hub .lead{ font-size:17px; color:var(--soft); margin:0 0 28px; }
.cards{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.card{
  display:block; padding:20px; background:#fff; border:1px solid var(--line);
  border-radius:14px; color:var(--ink);
}
.card:hover{ border-color:var(--lineStrong); text-decoration:none; transform:translateY(-1px); transition:.15s; }
.card h2{ font-family:"Noto Serif KR",serif; font-size:18px; margin:0 0 8px; line-height:1.4; }
.card p{ margin:0; font-size:14.5px; color:var(--soft); line-height:1.62; }

footer.site .bar{ flex-direction:column; align-items:flex-start; gap:8px; padding:22px; }
footer.site .links{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:14px; }
footer.site .links a{ color:var(--soft); }
footer.site .copy{ font-size:12.5px; color:var(--faint); }

@media (max-width:600px){
  body{ font-size:16px; }
  h1{ font-size:25px; }
  .article h2{ font-size:20px; }
  .cards{ grid-template-columns:1fr; }
}