/* ============================================================
   콘텐츠 페이지 공통 스타일
   (개인정보처리방침·이용약관·소개·아티클에서 함께 사용)
   ============================================================ */
:root{
  --kakao:#5B5BD6;
  --kakao-dark:#2B295F;
  --bg:#F6F7FB;
  --card:#FFFFFF;
  --text:#302E42;
  --sub:#737184;
  --accent:#EE7D5B;
  --accent2:#5B5BD6;
  --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{
  position:sticky;top:0;z-index:100;
  padding:14px 16px 0;
  background:linear-gradient(110deg,#F7F6FF 0%,#F0EEFF 48%,#F8F7FF 100%);
}
.site-nav-inner{
  max-width:920px;margin:0 auto;padding:9px 13px;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  border:1px solid #E0DDF5;border-radius:18px;
  background:rgba(255,255,255,.7);box-shadow:0 8px 24px rgba(76,67,150,.08);
}
.site-logo{
  display:flex;align-items:center;color:var(--kakao-dark);
  text-decoration:none;margin-right:13px;line-height:1;
}
.site-logo-full{display:block;width:100px;height:auto;overflow:visible;}
.site-nav a.nav-link{
  font-size:12.5px;color:#66627B;text-decoration:none;
  padding:7px 8px;border-radius:9px;font-weight:650;
}
.site-nav a.nav-link:hover{background:#F0EFFF;color:var(--kakao-dark);}
.site-nav a.nav-link.primary{
  margin-left:auto;background:var(--kakao);color:#fff;font-weight:800;
  padding:8px 13px;box-shadow:0 4px 12px rgba(91,91,214,.16);
}

/* ---- 본문 ---- */
.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;border:1px solid #E8E7F1;box-shadow:0 7px 24px rgba(43,41,95,0.06);
}
.doc h2{
  font-size:19px;margin:34px 0 12px;color:var(--kakao-dark);
  padding-bottom:8px;border-bottom:2px solid #EBEAFA;
}
.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:#F2F1FA;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 #E9E8F0;padding:10px 12px;text-align:left;vertical-align:top;
}
.doc th{background:#F5F4FF;font-weight:700;color:var(--kakao-dark);}

.callout{
  background:#F2F1FF;border:1px solid #DCD9FA;border-radius:12px;
  padding:15px 17px;margin:0 0 20px;font-size:14px;color:#4A487C;
}
.callout strong{color:#3F3B9C;}
.callout.info{background:#EEF4FF;border-color:#C7DBFA;color:#264a80;}
.callout.info strong{color:#123a6f;}

blockquote{
  margin:0 0 18px;padding:12px 16px;background:#FAFAFE;
  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;
  border:1px solid #E8E7F1;box-shadow:0 2px 10px rgba(43,41,95,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:#F0EFFF;color:#5552A6;
  font-size:11px;border-radius:20px;padding:3px 10px;margin-bottom:9px;
}

/* ---- CTA ---- */
.cta-box{
  background:linear-gradient(135deg,#5B5BD6,#817EED);
  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:#fff;}
.cta-box p{margin:0 0 16px;font-size:14px;color:#F1F0FF;}
.cta-btn{
  display:inline-block;background:#fff;color:#403D9B;
  text-decoration:none;padding:13px 28px;border-radius:12px;
  font-size:15px;font-weight:800;
}

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

/* ---- 푸터 ---- */
.site-footer{
  background:#2B295F;color:#DCDCF2;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:#E3E2FF;text-decoration:none;margin:0 9px;}
.site-footer a:hover{color:#fff;text-decoration:underline;}
.site-footer .copy{margin-top:14px;font-size:11.5px;color:#AAA8CD;}

@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{padding:10px 10px 0;}
  .site-nav-inner{padding:8px 10px;gap:5px;border-radius:15px;}
  .site-logo{font-size:14px;width:auto;margin-right:7px;margin-bottom:0;}
  .site-logo-full{width:84px;}
  .site-nav a.nav-link{font-size:11.5px;padding:5px 9px;}
  .site-nav a.nav-link.primary{margin-left:auto;}
}