/* ---------- 자산 파일럿 콘텐츠 페이지 공용 스타일 ----------
   /blog, /about, /privacy, /terms, /contact 등 SPA 앱 셸(index.html) 밖에서
   독립적으로 열리는 정적 문서용 스타일시트. index.html의 body는 height:100vh;overflow:hidden
   으로 고정된 앱 셸 레이아웃이라 콘텐츠 페이지에 그대로 재사용하면 긴 글이 스크롤되지 않으므로,
   브랜드 색상/폰트만 공유하고 레이아웃은 완전히 분리했다. */
:root{
  --bg:#f2f4f6;
  --card:#ffffff;
  --card-soft:#f9fafb;
  --ink-1:#191f28;
  --ink-2:#4e5968;
  --ink-3:#8b95a1;
  --line:#eef0f2;
  --brand:#585CE5;
  --brand-2:#3182f6;
  --brand-soft:rgba(88,92,229,0.08);
  --shadow-card:0 2px 10px rgba(15,23,42,0.04), 0 12px 32px -18px rgba(15,23,42,0.10);
  --radius-lg:24px;
  --radius-md:18px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b0f14;
    --card:#161b22;
    --card-soft:#1c222b;
    --ink-1:#f0f2f5;
    --ink-2:#a8b1bd;
    --ink-3:#6b7480;
    --line:#262c36;
    --brand:#7377ef;
    --brand-2:#5b9bf7;
    --brand-soft:rgba(115,119,239,0.16);
    --shadow-card:0 2px 10px rgba(0,0,0,0.3), 0 12px 32px -18px rgba(0,0,0,0.5);
  }
}
/* 앱/마이페이지에서 라이트·다크를 명시적으로 골랐다면(fincalc_theme_pref) 시스템 설정과
   무관하게 그 선택을 그대로 따른다 — index.html이 매길 렌더 전에 data-theme을 심어준다. */
:root[data-theme="dark"]{
  --bg:#0b0f14;
  --card:#161b22;
  --card-soft:#1c222b;
  --ink-1:#f0f2f5;
  --ink-2:#a8b1bd;
  --ink-3:#6b7480;
  --line:#262c36;
  --brand:#7377ef;
  --brand-2:#5b9bf7;
  --brand-soft:rgba(115,119,239,0.16);
  --shadow-card:0 2px 10px rgba(0,0,0,0.3), 0 12px 32px -18px rgba(0,0,0,0.5);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-1);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Pretendard","Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  letter-spacing:-0.02em;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;}

.cp-header{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  max-width:760px;margin:0 auto;padding:20px 20px 16px;
}
.cp-logo{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:800;color:var(--ink-1);}
.cp-logo-mark{
  width:32px;height:32px;border-radius:10px;background:var(--brand);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:15px;flex:none;
}
.cp-header-nav{display:flex;gap:16px;font-size:13.5px;font-weight:700;color:var(--ink-2);}
.cp-header-nav a{color:var(--ink-2);}
.cp-header-nav a:hover{color:var(--brand);}

.cp-wrap{max-width:760px;margin:0 auto;padding:8px 20px 80px;}

.cp-eyebrow{font-size:13px;font-weight:700;color:var(--brand);margin:0 0 8px;}
.cp-title{font-size:28px;font-weight:800;color:var(--ink-1);margin:0 0 12px;line-height:1.35;}
.cp-meta{font-size:13px;color:var(--ink-3);margin:0 0 28px;display:flex;gap:10px;flex-wrap:wrap;}

.cp-card{
  background:var(--card);border-radius:var(--radius-lg);padding:28px 24px;
  box-shadow:var(--shadow-card);margin-bottom:20px;
}

.cp-article h2{font-size:19px;font-weight:800;color:var(--ink-1);margin:28px 0 10px;}
.cp-article h2:first-child{margin-top:0;}
.cp-article h3{font-size:15.5px;font-weight:800;color:var(--ink-1);margin:20px 0 8px;}
.cp-article p{font-size:14.5px;line-height:1.85;color:var(--ink-2);margin:0 0 14px;}
.cp-article ul,.cp-article ol{margin:0 0 14px;padding-left:20px;color:var(--ink-2);font-size:14.5px;line-height:1.85;}
.cp-article li{margin-bottom:6px;}
.cp-article strong{color:var(--ink-1);}

.cp-formula{
  background:var(--card-soft);border-radius:14px;padding:14px 16px;
  font-size:14px;font-weight:700;color:var(--brand);margin:0 0 16px;word-break:keep-all;
}

.cp-faq-item{margin-bottom:16px;}
.cp-faq-item:last-child{margin-bottom:0;}
.cp-faq-q{font-size:14.5px;font-weight:800;color:var(--ink-1);margin:0 0 4px;}
.cp-faq-a{font-size:14px;color:var(--ink-2);margin:0;line-height:1.75;}

.cp-cta{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  background:var(--brand-soft);border-radius:var(--radius-md);padding:18px 20px;margin:24px 0;
}
.cp-cta p{margin:0;font-size:14px;font-weight:700;color:var(--ink-1);}
.cp-cta a{
  background:var(--brand);color:#fff;font-weight:700;font-size:13.5px;
  padding:10px 18px;border-radius:999px;white-space:nowrap;
}
.cp-cta a:hover{text-decoration:none;opacity:0.92;}

.cp-disclaimer{font-size:12.5px;color:var(--ink-3);line-height:1.7;margin-top:24px;padding-top:16px;border-top:1px solid var(--line);}

.cp-table-wrap{overflow-x:auto;margin:0 0 18px;border-radius:14px;border:1px solid var(--line);}
.cp-table{width:100%;border-collapse:collapse;font-size:13.5px;white-space:nowrap;}
.cp-table th,.cp-table td{padding:11px 14px;text-align:right;border-bottom:1px solid var(--line);}
.cp-table th:first-child,.cp-table td:first-child{text-align:left;}
.cp-table thead th{background:var(--card-soft);color:var(--ink-1);font-weight:800;}
.cp-table tbody td{color:var(--ink-2);}
.cp-table tbody tr:last-child td{border-bottom:none;}
.cp-table tbody tr:last-child td{color:var(--ink-1);font-weight:700;}

.cp-callout{border-radius:14px;padding:14px 16px;margin:0 0 16px;font-size:13.5px;line-height:1.75;border-left:3px solid var(--brand-2);background:var(--card-soft);}
.cp-callout-label{display:block;font-weight:800;color:var(--brand-2);font-size:12.5px;margin:0 0 4px;}
.cp-callout p{margin:0;color:var(--ink-2);font-size:13.5px;line-height:1.75;}
.cp-callout--warn{border-left-color:#e8590c;}
.cp-callout--warn .cp-callout-label{color:#e8590c;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .cp-callout--warn{border-left-color:#ff922b;}
  :root:not([data-theme="light"]) .cp-callout--warn .cp-callout-label{color:#ff922b;}
}
:root[data-theme="dark"] .cp-callout--warn{border-left-color:#ff922b;}
:root[data-theme="dark"] .cp-callout--warn .cp-callout-label{color:#ff922b;}

.cp-checklist{list-style:none;margin:0 0 16px;padding:0;}
.cp-checklist li{position:relative;padding:9px 0 9px 26px;font-size:14.5px;line-height:1.7;color:var(--ink-2);border-bottom:1px solid var(--line);}
.cp-checklist li:last-child{border-bottom:none;}
.cp-checklist li::before{content:"✓";position:absolute;left:2px;top:9px;color:var(--brand);font-weight:800;}

.cp-grid{display:grid;grid-template-columns:1fr;gap:14px;}
@media (min-width:640px){ .cp-grid{grid-template-columns:1fr 1fr;} }

.cp-post-card{
  display:block;background:var(--card);border-radius:var(--radius-md);padding:20px;
  box-shadow:var(--shadow-card);color:inherit;
}
.cp-post-card:hover{text-decoration:none;box-shadow:0 6px 18px rgba(15,23,42,0.09);}
.cp-post-card-cat{font-size:12px;font-weight:700;color:var(--brand);margin:0 0 8px;}
.cp-post-card h3{font-size:15.5px;font-weight:800;color:var(--ink-1);margin:0 0 8px;line-height:1.4;}
.cp-post-card p{font-size:13px;color:var(--ink-3);margin:0;line-height:1.6;}

.cp-back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink-2);margin-bottom:18px;}
.cp-back:hover{color:var(--brand);}

.cp-footer{
  max-width:760px;margin:0 auto;padding:24px 20px 40px;
  display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;
  font-size:12.5px;color:var(--ink-3);border-top:1px solid var(--line);
}
.cp-footer-links{display:flex;flex-wrap:wrap;gap:6px 16px;}
.cp-footer-links a{color:var(--ink-3);}
.cp-footer-links a:hover{color:var(--brand);}

.cp-info-list{list-style:none;margin:0;padding:0;}
.cp-info-list li{display:flex;gap:10px;font-size:14px;color:var(--ink-2);padding:10px 0;border-bottom:1px solid var(--line);}
.cp-info-list li:last-child{border-bottom:none;}
.cp-info-list span:first-child{flex:none;width:96px;font-weight:700;color:var(--ink-1);}

.cp-form label{display:block;font-size:13px;font-weight:700;color:var(--ink-1);margin:0 0 6px;}
.cp-form input,.cp-form textarea{
  width:100%;background:var(--card-soft);border:1px solid var(--line);border-radius:12px;
  padding:12px 14px;font-size:14px;color:var(--ink-1);font-family:inherit;margin-bottom:16px;
}
.cp-form textarea{min-height:120px;resize:vertical;}
.cp-form button{
  background:var(--brand);color:#fff;border:none;border-radius:999px;
  padding:13px 26px;font-size:14.5px;font-weight:700;cursor:pointer;font-family:inherit;
}