/* 적용 예 공통 바탕. 값은 ../tokens/cashplan-tokens.css 변수만 쓴다. */
@font-face {
  font-family: "Pretendard Variable";
  src: url("../assets/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cp-bg);
  color: var(--cp-text);
  font: 400 var(--cp-fs-body)/1.6 var(--cp-font);
  letter-spacing: var(--cp-track-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, p { margin: 0; }
h1, h2, h3 { letter-spacing: var(--cp-track-heading); line-height: 1.25; text-wrap: balance; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; }
a { color: var(--cp-accent-text); text-underline-offset: 3px; }
button { font: inherit; letter-spacing: inherit; }

::selection { background: var(--cp-accent-tint); color: var(--cp-ink); }
:focus-visible { outline: 2px solid var(--cp-focus); outline-offset: 2px; }
input, textarea { caret-color: var(--cp-accent-text); }
html { scrollbar-color: var(--cp-gray-300) transparent; }

.num { font-variant-numeric: tabular-nums; font-weight: 700; }
.wrap { width: 100%; max-width: calc(1120px + 64px); margin: 0 auto; padding: 0 32px; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--sm { width: 16px; height: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 시안용 예시 수치 표시 */
.sample-note { font-size: var(--cp-fs-caption); line-height: 1.5; color: var(--cp-text-sub); }
.cp-badge--sample { background: var(--cp-gray-100); color: var(--cp-text-sub); }

@keyframes cp-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.enter { animation: cp-enter var(--cp-dur-enter) var(--cp-ease-out) both; }

@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .enter { animation: none; }
}