/* 가이드/법적 문서 공용 스타일 — landing.html 톤(카카오 옐로 + 크림)과 통일 */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --kakao:#FEE500;
  --brown:#3A1D1D;
  --cream:#FFFDF5;
  --cream2:#FFF9E6;
  --text1:#1A1A1A;
  --text2:#4A4A4A;
  --text3:#7A7A7A;
  --border:#EEE5D0;
  --blue:#3B82F6;
  --radius:14px;
}
html{scroll-behavior:smooth}
body{
  font-family:'Noto Sans KR','Apple SD Gothic Neo',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text1);
  background:var(--cream);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
  word-break:keep-all;
}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* 상단 내비게이션 */
.site-header{
  background:var(--kakao);
  padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:10;
  box-shadow:0 2px 8px rgba(0,0,0,0.08);
}
.site-header .logo{font-weight:900;font-size:16px;color:var(--text1);text-decoration:none}
.site-header nav{display:flex;gap:16px;flex-wrap:wrap}
.site-header nav a{color:var(--text1);font-size:13px;font-weight:600;text-decoration:none;opacity:.85}
.site-header nav a:hover{opacity:1}

/* 본문 */
main{max-width:720px;margin:0 auto;padding:40px 20px 60px}
.breadcrumb{font-size:13px;color:var(--text3);margin-bottom:20px}
.breadcrumb a{color:var(--text3)}
article h1,main>h1{font-size:28px;font-weight:900;line-height:1.4;margin-bottom:10px}
.meta{font-size:13px;color:var(--text3);margin-bottom:28px}
article h2{font-size:20px;font-weight:800;margin:36px 0 12px;padding-top:8px}
article h3{font-size:16px;font-weight:700;margin:24px 0 8px}
article p{margin-bottom:14px;color:var(--text2);font-size:15px}
article ul,article ol{margin:0 0 16px 22px;color:var(--text2);font-size:15px}
article li{margin-bottom:6px}
article strong{color:var(--text1)}
article blockquote{
  border-left:4px solid var(--kakao);
  background:var(--cream2);
  padding:14px 18px;border-radius:0 var(--radius) var(--radius) 0;
  margin:0 0 16px;color:var(--text2);font-size:14px;
}
.tip{
  background:var(--cream2);border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;margin:20px 0;font-size:14px;color:var(--text2);
}
.tip b{color:var(--text1)}
code{
  background:#F3EDDD;border-radius:5px;padding:2px 6px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;
}
pre{
  background:#2B2620;color:#F5EFD9;border-radius:var(--radius);
  padding:16px 18px;overflow-x:auto;margin:0 0 16px;font-size:13px;line-height:1.6;
}
pre code{background:none;padding:0;color:inherit}
table{width:100%;border-collapse:collapse;margin:0 0 16px;font-size:14px}
th,td{border:1px solid var(--border);padding:8px 12px;text-align:left;color:var(--text2)}
th{background:var(--cream2);color:var(--text1);font-weight:700}

/* 광고 자리 */
.ad-slot{margin:32px 0;text-align:center;overflow:hidden}

/* CTA 박스 */
.cta{
  background:var(--kakao);border-radius:var(--radius);
  padding:24px;text-align:center;margin:36px 0 0;
}
.cta p{margin:0 0 12px;font-weight:700;font-size:15px}
.cta a{
  display:inline-block;background:var(--text1);color:var(--kakao);
  font-weight:800;font-size:14px;padding:11px 24px;border-radius:10px;text-decoration:none;
}

/* 가이드 목록 */
.guide-list{list-style:none;margin:0;display:flex;flex-direction:column;gap:14px}
.guide-list li{margin:0}
.guide-list a{
  display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  padding:18px 20px;text-decoration:none;transition:box-shadow .15s,transform .15s;
}
.guide-list a:hover{box-shadow:0 6px 20px rgba(0,0,0,0.07);transform:translateY(-1px);text-decoration:none}
.guide-list .title{font-size:16px;font-weight:800;color:var(--text1);margin-bottom:4px}
.guide-list .desc{font-size:13px;color:var(--text3);line-height:1.6}
.guide-cat{font-size:12px;font-weight:800;color:var(--text3);letter-spacing:.06em;margin:32px 0 12px;text-transform:uppercase}
.guide-cat:first-of-type{margin-top:8px}

/* 푸터 */
.site-footer{
  border-top:1px solid var(--border);background:var(--cream2);
  padding:28px 20px;text-align:center;font-size:13px;color:var(--text3);
}
.site-footer nav{display:flex;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:10px}
.site-footer a{color:var(--text2);font-weight:600;text-decoration:none}
.site-footer a:hover{text-decoration:underline}

@media (max-width:520px){
  article h1,main>h1{font-size:23px}
  article h2{font-size:18px}
  main{padding:28px 16px 48px}
}