/*
Theme Name: VS Base
Theme URI: https://example.com/vs-base
Author: VS Project
Description: 제휴 도구 사이트 공용 부모 테마(클래식). 색 토큰 프리셋(vs/warm/fintech/pro), 3상태 다크모드, 제휴 고지 자동 출력, rel="sponsored nofollow" 자동 부여. 정적 내보내기(Simply Static) 전제 — 모든 상호작용은 프론트 JS.
Version: 1.0.0
Requires at least: 6.3
Tested up to: 6.7
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vs-base
Tags: custom-colors, custom-menu, one-column, two-columns
*/

/* 색 토큰은 inc/presets.php 가 :root / 다크 3상태로 인라인 출력한다. 여기서는 구조·컴포넌트만. */

* { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 15px; line-height: 1.6; -webkit-text-size-adjust: 100%; word-break: keep-all; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 40; background: var(--notice-bg); }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap.narrow { max-width: 780px; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.22; text-wrap: balance; margin: 0; letter-spacing: -.015em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); font-weight: 800; }
h2 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); font-weight: 800; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
a { color: var(--brand); }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
ul.plain, .nav-links, .foot-links, .chips, .trust { margin: 0; padding: 0; list-style: none; }
.muted { color: var(--fg-2); }
.tiny { font-size: .8rem; color: var(--fg-3); line-height: 1.5; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.eyebrow { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-ink); font-weight: 800; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.vh, .sr-only, .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--focus, var(--brand)); outline-offset: 2px; }
.tag, .ex { display: inline-flex; align-items: center; font-size: .68rem; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--fg-2); font-weight: 700; vertical-align: middle; letter-spacing: .02em; border: 1px solid var(--line); }
.tag.ex, .ex { background: var(--notice-bg); color: var(--notice-fg); border-color: transparent; }

/* ---- 제휴 고지(첫 줄) ---- */
.notice { background: var(--notice-bg); color: var(--notice-fg); font-size: .8rem; line-height: 1.45; }
.notice .wrap { padding-block: 7px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.notice-badge { flex: none; font-size: .66rem; font-weight: 800; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; background: var(--brand); color: var(--brand-fg); }
.notice-text { flex: 1 1 260px; min-width: 0; }

/* ---- 네비 ---- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--nav-bg); -webkit-backdrop-filter: saturate(1.5) blur(12px); backdrop-filter: saturate(1.5) blur(12px); border-bottom: 1px solid var(--nav-line, var(--line)); color: var(--nav-fg, var(--fg)); }
.nav .wrap { display: flex; align-items: center; gap: 16px; min-height: 62px; }
.logo { display: inline-flex; align-items: center; gap: 9px; color: inherit; text-decoration: none; font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; font-family: var(--font-display); }
.logo-mark { width: 28px; height: 28px; flex: none; }
.logo-word em { font-style: normal; color: var(--deal); }
.logo-tag { font-size: .78rem; font-weight: 500; color: var(--nav-fg-2, var(--fg-3)); letter-spacing: 0; margin-left: 4px; display: none; }
.nav-links { display: none; gap: 2px; margin-left: 6px; }
.nav-links a { color: var(--nav-fg-2, var(--fg-2)); text-decoration: none; font-weight: 600; font-size: .92rem; padding: 10px 13px; border-radius: 10px; }
.nav-links a:hover, .nav-links a.is-current { background: var(--surface-2); color: var(--fg); }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
@media (min-width: 760px) { .nav-links { display: flex; } .logo-tag { display: inline; } }
.theme-toggle { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--nav-line, var(--line-strong)); background: transparent; color: var(--nav-fg-2, var(--fg-2)); display: grid; place-items: center; cursor: pointer; }
.theme-toggle:hover { color: var(--fg); background: var(--surface-2); }
.theme-toggle span { display: none; line-height: 0; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle[data-mode="auto"] .tt-auto, .theme-toggle[data-mode="light"] .tt-light, .theme-toggle[data-mode="dark"] .tt-dark { display: block; }
.theme-toggle:not([data-mode]) .tt-auto { display: block; }

/* ---- 버튼 ---- */
.btn { font: inherit; font-weight: 700; font-size: .95rem; padding: 12px 20px; border-radius: var(--radius); cursor: pointer; border: 1px solid var(--brand); background: var(--brand); color: var(--brand-fg); text-decoration: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; white-space: nowrap; }
.btn svg { width: 16px; height: 16px; }
.btn:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn.ghost, .btn.btn-ghost { background: var(--surface); color: var(--brand-ink); border-color: var(--line-strong); }
.btn.ghost:hover, .btn.btn-ghost:hover { background: var(--brand-soft); border-color: var(--brand); }
.btn.btn-deal { background: var(--deal); border-color: var(--deal); color: var(--deal-fg); }
.btn.btn-deal:hover { background: var(--deal-ink); border-color: var(--deal-ink); }
.btn.btn-sm { min-height: 40px; padding: 8px 14px; font-size: .88rem; border-radius: calc(var(--radius) - 2px); }
.btn.btn-lg { min-height: 54px; padding: 14px 26px; font-size: 1.02rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn-row .btn { flex: 1 1 180px; }
.btn-note { font-size: .76rem; color: var(--fg-3); margin-top: 10px; }

/* ---- 섹션·카드 ---- */
section.block, .block, .sec { padding-block: 48px; }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 18px; margin-bottom: 20px; }
.sec-head .muted, .sec-head p.muted { font-size: .92rem; margin-top: 6px; max-width: 60ch; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; min-width: 0; box-shadow: var(--shadow); }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; align-items: flex-start; margin-bottom: 12px; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.date-pill { display: inline-flex; align-items: center; gap: 6px; }
.date-pill svg { width: 14px; height: 14px; }

/* ---- 신뢰 띠 ---- */
.trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.trust li { display: flex; gap: 9px; align-items: center; font-size: .82rem; font-weight: 600; color: var(--fg-2); min-width: 0; }
.trust svg { width: 20px; height: 20px; flex: none; color: var(--brand); }
@media (min-width: 760px) { .trust { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.trust-band { background: var(--surface); border-block: 1px solid var(--line); }
.trust-band .wrap { padding-block: 16px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; align-items: center; }
.trust-band .trust { flex: 1 1 520px; }
.social-proof { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--fg-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 10px; font-weight: 600; }
.social-proof b { color: var(--fg); font-weight: 800; }
.social-proof .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-soft); }

/* ---- 폼 ---- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; }
.field label { font-size: .82rem; color: var(--fg-2); font-weight: 600; }
.field .unit-l { font-weight: 400; color: var(--fg-3); }
.field > input[type="text"], .field > input[type="number"], .field > select { font: inherit; font-size: 1rem; color: var(--fg); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 11px 12px; width: 100%; min-width: 0; min-height: 46px; font-variant-numeric: tabular-nums; }
.field input[data-money] { font-family: var(--font-num); font-weight: 600; text-align: right; padding-right: 32px; }
.field.money .unit { position: absolute; right: 12px; bottom: 13px; font-size: .85rem; color: var(--fg-3); pointer-events: none; }
.field > input:focus-visible, .field > select:focus-visible { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.field .in { display: flex; align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 0 12px; height: 44px; }
.field .in:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.field .in input, .field .in select { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-family: var(--font-num); font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; outline: none; padding: 0; color: var(--fg); }
.field .in select { font-family: var(--font-body); font-size: .95rem; font-weight: 600; appearance: none; -webkit-appearance: none; }
.field .in .unit { font-size: .82rem; color: var(--fg-3); font-weight: 700; margin-left: 6px; }
.field .in.sel::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); transform: rotate(45deg) translateY(-2px); flex: none; margin-left: 6px; }
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-form .span2 { grid-column: 1 / -1; }
@media (min-width: 760px) { .grid-form { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.assume { font-size: .78rem; color: var(--fg-3); margin-top: 12px; line-height: 1.55; }
.range-row { display: flex; justify-content: space-between; align-items: baseline; }
.range-row output { font-weight: 800; font-size: 1.1rem; color: var(--brand); }
.range-ticks { display: flex; justify-content: space-between; font-size: .74rem; color: var(--fg-3); margin-top: 2px; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 4px 0 0; --p: 44.4%; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--brand) var(--p), var(--surface-2) var(--p)); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: var(--surface-2); }
input[type="range"]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--brand); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); box-shadow: var(--shadow); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 3px solid var(--brand); box-shadow: var(--shadow); cursor: pointer; }
.seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.seg button { font: inherit; font-size: .9rem; font-weight: 600; padding: 10px 14px; min-height: 44px; background: transparent; color: var(--fg-2); border: 0; cursor: pointer; border-right: 1px solid var(--line); flex: 1 1 auto; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--brand); color: var(--brand-fg); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-size: .9rem; font-weight: 600; padding: 9px 15px; min-height: 42px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--fg-2); }
.chip:hover { border-color: var(--brand); color: var(--fg); }
.chip[aria-pressed="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-ink); font-weight: 800; box-shadow: inset 0 0 0 1px var(--brand); }

/* ---- 표 ---- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
table { border-collapse: collapse; width: 100%; min-width: 720px; font-size: .9rem; }
th, td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; vertical-align: middle; }
th { background: var(--surface-2); font-size: .76rem; color: var(--fg-2); font-weight: 700; letter-spacing: .02em; }
td.n, th.n { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: right; }
th.n { font-family: var(--font-body); }
tbody tr:hover td { background: var(--surface-2); }
tr:last-child td { border-bottom: 0; }

/* ---- FAQ ---- */
.faq { display: grid; gap: 10px; }
.faq details { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow); }
.faq summary { cursor: pointer; padding: 18px 20px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; min-height: 44px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--fg-3); border-bottom: 2px solid var(--fg-3); transform: rotate(45deg); margin-right: 4px; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 6px; }
.faq .a, .faq .ans { padding: 0 20px 18px; color: var(--fg-2); font-size: .93rem; line-height: 1.65; max-width: 70ch; }
.faq .ans p { margin: 0 0 8px; }

/* ---- CTA 밴드 ---- */
.cta-band { background: var(--cta-bg); color: var(--cta-fg); }
.cta-band .wrap { padding-block: 48px; display: grid; gap: 22px; }
.cta-band .eyebrow { color: var(--cta-eyebrow); }
.cta-band h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }
.cta-band p { max-width: 60ch; opacity: .9; }
.cta-copy { display: grid; gap: 8px; }
.cta-band .btn { background: var(--cta-btn-bg); color: var(--cta-btn-fg); border-color: var(--cta-btn-bg); }
.cta-band .btn.ghost { background: transparent; color: var(--cta-fg); border-color: var(--cta-ghost-line); }
.cta-band .btn-row .btn { flex: 0 1 auto; }
.cta-band .btn-note { color: inherit; opacity: .7; margin: 0; }
@media (min-width: 900px) { .cta-band .wrap { grid-template-columns: 1fr auto; align-items: center; } .cta-band .btn-note { grid-column: 1 / -1; } }

/* ---- 푸터 ---- */
.site-foot { border-top: 1px solid var(--line); background: var(--footer-bg); }
.site-foot .wrap { padding-block: 32px 110px; display: grid; gap: 12px; font-size: .8rem; color: var(--footer-fg, var(--fg-3)); line-height: 1.6; }
.site-foot .logo { color: var(--fg); }
.foot-top { display: flex; flex-wrap: wrap; gap: 12px 20px; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.foot-links a { color: var(--fg-2); text-decoration: none; font-weight: 600; }
.foot-links a:hover { color: var(--brand); }
.site-foot .copy { margin-top: 8px; }
@media (min-width: 760px) { .site-foot .wrap { padding-bottom: 40px; } }

/* ---- 모바일 하단 고정 CTA ---- */
.m-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; display: flex; align-items: center; gap: 12px; background: var(--nav-bg); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); box-shadow: var(--shadow-lg); }
.m-cta-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.m-cta-txt b { font-size: .9rem; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-cta-txt span { font-size: .7rem; color: var(--fg-3); }
.m-cta .btn { flex: none; min-height: 46px; padding: 10px 18px; }
@media (min-width: 760px) { .m-cta { display: none; } }

/* ---- 본문(페이지·글) ---- */
.entry-content { font-size: 1rem; line-height: 1.75; }
.entry-content > * + * { margin-top: 1em; }
.entry-content h2 { margin-top: 2em; }
.entry-content h3 { margin-top: 1.6em; }
.entry-content img { height: auto; border-radius: var(--radius); }
.entry-content ul, .entry-content ol { padding-left: 1.4em; }
.entry-content blockquote { margin: 1.2em 0; padding: 12px 18px; border-left: 4px solid var(--brand); background: var(--surface-2); border-radius: 0 var(--radius) var(--radius) 0; }
.entry-content table { min-width: 0; }
.post-list { display: grid; gap: 14px; }
.post-title a { color: var(--fg); text-decoration: none; }
.post-title a:hover { color: var(--brand); }
.post-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; font-size: .9rem; }
.post-nav a { text-decoration: none; font-weight: 600; }
.post-thumb { margin: 0 0 20px; }
.pagination, .nav-links.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 24px; }
.page-numbers { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); text-decoration: none; color: var(--fg-2); }
.page-numbers.current { background: var(--brand); color: var(--brand-fg); border-color: var(--brand); }

/* ---- 모션 ---- */
@media (prefers-reduced-motion: no-preference) {
  .chip, .btn, .seg button, .nav-links a, .field input, .field select, .card { transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s, transform .18s; }
  .btn:active { transform: translateY(1px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}