/* ============================================================
   b2b리워드 — 다크 핀테크 디자인 시스템 (base.css)
   톤: 무게감 있는 B2B 운영 콘솔. 딥네이비 + 시안/그린 액센트
   ============================================================ */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* 배경 계층 */
  --bg-0: #070b14;        /* 최심부 */
  --bg-1: #0c111d;        /* 페이지 바탕 */
  --bg-2: #121826;        /* 카드 */
  --bg-3: #1a2233;        /* 카드 위 요소 / 입력창 */
  --bg-4: #232d42;        /* hover / 보더 강조 */

  /* 라인 */
  --line: #1e2638;
  --line-2: #2b3650;

  /* 텍스트 */
  --txt-0: #f1f5fb;       /* 헤딩 */
  --txt-1: #c2cbdb;       /* 본문 */
  --txt-2: #8593ab;       /* 보조 */
  --txt-3: #56627a;       /* 비활성 */

  /* 액센트 — 시안/민트 (핀테크 신뢰감) */
  --acc: #2ee6c5;
  --acc-2: #16b8e8;
  --acc-glow: rgba(46, 230, 197, .18);
  --acc-grad: linear-gradient(135deg, #2ee6c5 0%, #16b8e8 100%);

  /* 상태 */
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f5576c;
  --danger-bg: rgba(245, 87, 108, .1);

  /* 효과 */
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 20px;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
  --shadow-glow: 0 0 0 1px var(--acc-glow), 0 8px 32px var(--acc-glow);

  --font: 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg-1);
  color: var(--txt-1);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  min-height: 100vh;
}

/* 배경 글로우 (서브틀한 핀테크 분위기) */
body::before {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(900px 600px at 85% -10%, rgba(22,184,232,.10), transparent 60%),
    radial-gradient(700px 500px at -5% 110%, rgba(46,230,197,.07), transparent 55%);
  pointer-events: none; z-index: 0;
}

h1,h2,h3,h4 { color: var(--txt-0); font-weight: 800; letter-spacing: -0.025em; line-height: 1.25; }

a { color: inherit; text-decoration: none; }

.mono { font-family: var(--mono); font-feature-settings: "tnum"; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font); font-weight: 700; font-size: 15px;
  padding: 14px 24px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
  background: var(--acc-grad); color: #04221d;
  box-shadow: 0 6px 20px var(--acc-glow);
}
.btn-primary:hover { box-shadow: 0 10px 30px var(--acc-glow); transform: translateY(-1px); }
.btn-primary:disabled {
  background: var(--bg-4); color: var(--txt-3);
  cursor: not-allowed; box-shadow: none; transform: none;
}
.btn-ghost {
  background: var(--bg-3); color: var(--txt-1); border-color: var(--line-2);
}
.btn-ghost:hover { background: var(--bg-4); border-color: var(--acc); color: var(--txt-0); }
.btn-block { width: 100%; }
.btn-lg { padding: 17px 28px; font-size: 16px; }

/* ---------- 입력 ---------- */
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 13px; font-weight: 600; color: var(--txt-2);
  margin-bottom: 8px; letter-spacing: 0;
}
.input, .select, textarea.input {
  width: 100%; font-family: var(--font); font-size: 15px; color: var(--txt-0);
  background: var(--bg-3); border: 1px solid var(--line-2);
  border-radius: var(--radius-sm); padding: 14px 16px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.input::placeholder { color: var(--txt-3); }
.input:focus, .select:focus {
  outline: none; border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-glow); background: var(--bg-2);
}

/* ---------- 카드 ---------- */
.card {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
}

/* ---------- 칩/뱃지 ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; padding: 5px 11px;
  border-radius: 999px; background: var(--bg-3); color: var(--txt-2);
  border: 1px solid var(--line-2);
}
.chip-acc { background: var(--acc-glow); color: var(--acc); border-color: transparent; }

.badge {
  font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 6px;
  letter-spacing: 0.02em;
}
.badge-wait { background: rgba(251,191,36,.12); color: var(--warn); }
.badge-run  { background: rgba(52,211,153,.12); color: var(--ok); }
.badge-pre  { background: rgba(22,184,232,.12); color: var(--acc-2); }

/* ---------- 유틸 ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.text-acc { color: var(--acc); }
.text-muted { color: var(--txt-2); }
.divider { height: 1px; background: var(--line); border: 0; margin: 24px 0; }

::selection { background: var(--acc); color: #04221d; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-1); }
::-webkit-scrollbar-thumb { background: var(--bg-4); border-radius: 6px; border: 2px solid var(--bg-1); }
::-webkit-scrollbar-thumb:hover { background: var(--line-2); }