/* ============================================================
   콘텐츠 페이지 공통 스타일
   (개인정보처리방침·이용약관·소개·아티클에서 함께 사용)
   ============================================================ */
:root{
  --kakao:#FEE500;
  --kakao-dark:#3C1E1E;
  --bg:#F4F1EC;
  --card:#FFFFFF;
  --text:#2B2118;
  --sub:#7A6F63;
  --accent:#FF8A3D;
  --accent2:#5B7FFF;
  --radius:16px;
}
*{box-sizing:border-box;}
html,body{max-width:100%;overflow-x:hidden;}
body{
  margin:0;
  font-family:"Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.75;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;height:auto;}

/* ---- 상단 네비게이션 ---- */
.site-nav{
  background:var(--kakao);
  border-bottom:1px solid #E9D200;
  position:sticky;top:0;z-index:100;
}
.site-nav-inner{
  max-width:920px;margin:0 auto;padding:12px 16px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.site-logo{
  font-size:15px;font-weight:800;color:var(--kakao-dark);
  text-decoration:none;margin-right:auto;
}
.site-nav a.nav-link{
  font-size:12.5px;color:var(--kakao-dark);text-decoration:none;
  padding:6px 11px;border-radius:20px;font-weight:600;
}
.site-nav a.nav-link:hover{background:rgba(255,255,255,0.45);}
.site-nav a.nav-link.primary{
  background:var(--kakao-dark);color:#fff;font-weight:700;
}

/* ---- 본문 ---- */
.wrap{max-width:760px;margin:0 auto;padding:32px 16px 70px;}
.page-head{margin-bottom:26px;}
.page-head h1{
  font-size:27px;margin:0 0 10px;color:var(--kakao-dark);line-height:1.35;
}
.page-head .lead{font-size:15px;color:var(--sub);margin:0;}
.page-meta{font-size:12.5px;color:var(--sub);margin-top:12px;}

.doc{
  background:var(--card);border-radius:var(--radius);
  padding:30px 32px;box-shadow:0 2px 12px rgba(43,33,24,0.06);
}
.doc h2{
  font-size:19px;margin:34px 0 12px;color:var(--kakao-dark);
  padding-bottom:8px;border-bottom:2px solid #F1ECE0;
}
.doc h2:first-child{margin-top:0;}
.doc h3{font-size:16px;margin:24px 0 9px;color:var(--kakao-dark);}
.doc p{margin:0 0 15px;font-size:15px;}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px;}
.doc li{margin-bottom:8px;font-size:15px;}
.doc strong{color:var(--kakao-dark);}
.doc a{color:var(--accent2);}
.doc code{
  background:#F4F1EC;border-radius:5px;padding:2px 6px;
  font-size:13.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
}
.doc table{
  width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px;
}
.doc th,.doc td{
  border:1px solid #EFEAE0;padding:10px 12px;text-align:left;vertical-align:top;
}
.doc th{background:#FBF8F2;font-weight:700;color:var(--kakao-dark);}

.callout{
  background:#FFF7E6;border:1px solid #F3D98B;border-radius:12px;
  padding:15px 17px;margin:0 0 20px;font-size:14px;color:#7A5A00;
}
.callout strong{color:#9c6b00;}
.callout.info{background:#EEF4FF;border-color:#C7DBFA;color:#264a80;}
.callout.info strong{color:#123a6f;}

blockquote{
  margin:0 0 18px;padding:12px 16px;background:#FBFAF7;
  border-left:3px solid var(--accent);border-radius:0 8px 8px 0;
  font-size:14.5px;color:var(--sub);
}

/* ---- 아티클 목록 ---- */
.article-grid{display:grid;gap:14px;}
.article-card{
  background:var(--card);border-radius:14px;padding:20px 22px;
  box-shadow:0 2px 10px rgba(43,33,24,0.05);text-decoration:none;color:inherit;
  display:block;transition:transform .12s ease,box-shadow .12s ease;
}
.article-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(43,33,24,0.1);}
.article-card h3{margin:0 0 7px;font-size:17px;color:var(--kakao-dark);}
.article-card p{margin:0;font-size:14px;color:var(--sub);}
.article-card .tag{
  display:inline-block;background:#F1ECE0;color:var(--sub);
  font-size:11px;border-radius:20px;padding:3px 10px;margin-bottom:9px;
}

/* ---- CTA ---- */
.cta-box{
  background:linear-gradient(135deg,var(--kakao),#FFE066);
  border-radius:var(--radius);padding:24px 26px;margin:30px 0 0;text-align:center;
}
.cta-box h3{margin:0 0 8px;font-size:18px;color:var(--kakao-dark);}
.cta-box p{margin:0 0 16px;font-size:14px;color:#5c4a1f;}
.cta-btn{
  display:inline-block;background:var(--kakao-dark);color:#fff;
  text-decoration:none;padding:13px 28px;border-radius:12px;
  font-size:15px;font-weight:800;
}

/* ---- 광고 ---- */
.ad-slot{
  border:2px dashed #D8CBB0;border-radius:10px;padding:20px;text-align:center;
  color:#A08A63;font-size:12px;margin:26px 0;background:#FBF8F2;
}

/* ---- 푸터 ---- */
.site-footer{
  background:var(--kakao-dark);color:#D8BFA0;padding:32px 16px;margin-top:50px;
}
.site-footer-inner{max-width:760px;margin:0 auto;text-align:center;font-size:12.5px;}
.site-footer a{color:#E0C9A0;text-decoration:none;margin:0 9px;}
.site-footer a:hover{color:#FFF3DC;text-decoration:underline;}
.site-footer .copy{margin-top:14px;font-size:11.5px;color:#A89076;}

@media (max-width:640px){
  .wrap{padding:22px 12px 50px;}
  .doc{padding:22px 18px;border-radius:14px;}
  .page-head h1{font-size:22px;}
  .doc h2{font-size:17px;}
  .doc p,.doc li{font-size:14.5px;}
  .site-nav-inner{padding:10px 12px;gap:5px;}
  .site-logo{font-size:14px;width:100%;margin-bottom:4px;}
  .site-nav a.nav-link{font-size:11.5px;padding:5px 9px;}
}