@charset "utf-8";

:root {
  --black-950: #080808;
  --black-900: #111111;
  --black-800: #242424;
  --black-700: #3b3b3b;
  --black-600: #555555;
  --black-500: #707070;
  --black-400: #969696;
  --black-300: #bdbdbd;
  --black-200: #dedede;
  --black-100: #f0f0f0;
  --black-50: #f8f8f8;

  --red-900: #7b0c10;
  --red-800: #991117;
  --red-700: #b9141c;
  --red-600: #d71920;
  --red-500: #ef2b33;
  --red-400: #f2575d;
  --red-300: #f8878b;
  --red-200: #fbb9bc;
  --red-100: #fde1e2;
  --red-50: #fff3f4;

  --gray-950: #20242a;
  --gray-900: #343a42;
  --gray-800: #4b535e;
  --gray-700: #626b77;
  --gray-600: #747e8b;
  --gray-500: #8b95a2;
  --gray-400: #aab2bd;
  --gray-300: #c8ced6;
  --gray-200: #dfe3e8;
  --gray-100: #eef0f3;
  --gray-50: #f7f8fa;

  --white: #ffffff;
  --info: #2f6bdc;
  --success: #18a957;
  --warning: #f2a427;
  --error: #d71920;

  --color-primary: var(--red-600);
  --color-primary-dark: var(--red-700);
  --color-text: var(--black-900);
  --color-text-sub: var(--gray-700);
  --color-text-muted: var(--gray-500);
  --color-line: var(--gray-200);
  --color-line-soft: var(--gray-100);
  --color-surface: var(--white);
  --color-surface-sub: var(--gray-50);
  --color-page: #e9ebef;

  --overlay-black-40: rgba(8, 8, 8, 0.4);
  --overlay-black-72: rgba(8, 8, 8, 0.72);
  --overlay-black-94: rgba(8, 8, 8, 0.94);
  --overlay-red-40: rgba(239, 43, 51, 0.4);
  --overlay-red-10: rgba(215, 25, 32, 0.1);
  --overlay-red-dark-60: rgba(123, 12, 16, 0.6);
  --overlay-white-98: rgba(255, 255, 255, 0.98);
  --overlay-white-20: rgba(255, 255, 255, 0.2);
  --overlay-white-16: rgba(255, 255, 255, 0.16);
  --overlay-white-08: rgba(255, 255, 255, 0.08);

  --shadow-app: 0 32px 72px rgba(18, 22, 30, 0.18);
  --shadow-soft: 0 16px 40px rgba(13, 15, 20, 0.08);
  --shadow-card: 0 8px 24px rgba(18, 22, 30, 0.06);
  --shadow-icon: 0 4px 16px rgba(0, 0, 0, 0.05);
  --shadow-nav: 0 4px 24px rgba(0, 0, 0, 0.08);

  --header-height: 72px;
  --footer-height: 80px;
  --app-width: 520px;
}

* { box-sizing: border-box; }
html,
body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-page);
  color: var(--color-text);
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  word-break: keep-all;
}
a { color: inherit; text-decoration: none; }
button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
ul,
ol { margin: 0; padding: 0; list-style: none; }
h1,
h2,
h3,
p { margin: 0; }
img { display: block; max-width: 100%; }

.blind {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
}
.svg-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon,
.benefit-icon {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 800;
}
.btn .icon { width: 16px; height: 16px; }
.btn-primary { padding: 12px 16px; background: var(--color-primary); color: var(--white); }
.btn-primary:hover,
.btn-primary:focus-visible { background: var(--color-primary-dark); }
.badge {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--red-50);
  color: var(--color-primary);
  font-size: 12px;
  font-weight: 800;
}