@charset "utf-8";
/* =========================================================
   BTMS Redesign — theme.css
   디자인 시스템: 토큰 · 리셋 · 베이스 · 섹션 헤딩 · reveal · top 버튼
   ※ 가장 먼저 로드해야 합니다 (header/footer/main 이 토큰을 참조).
   ========================================================= */
:root {
  /* primary blue scale */
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #1e40af;
  --primary-700: #1e3a8a;
  --primary-800: #1e3a8a;
  --primary-900: #172554;
  --primary-950: #0f172a;

  --brand: #1e40af;        /* 600 — main */
  --brand-ink: #1e3a8a;    /* 700 — hover/darker */
  --brand-deep: #0f172a;   /* 950 — dark sections */
  --brand-cyan: #60a5fa;   /* 400 — calm light accent */
  --brand-soft: #eff6ff;   /* 50 */
  --grad: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  --grad-deep: linear-gradient(135deg, #172554 0%, #1e40af 100%);

  --ink: #14181c;
  --ink-2: #3a434c;
  --gray-600: #5b656f;
  --gray-400: #939ca6;
  --gray-300: #c2c9d0;
  --line: #e6eaee;
  --line-2: #eef1f4;
  --bg-soft: #f6f8fa;
  --white: #ffffff;

  --radius: 20px;
  --radius-sm: 12px;
  --container: 1240px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--ink);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

/* ---------- Section heading system ---------- */
.sec { padding: 130px 0; position: relative; }
.sec-head { margin-bottom: 60px; }
.sec-head.center { text-align: center; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--brand);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--grad); border-radius: 2px; }
.center .eyebrow::after { content: ""; width: 22px; height: 2px; background: var(--grad); border-radius: 2px; }
.sec-title {
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.18;
  color: var(--ink);
}
.sec-title .grad { color: var(--brand); }
.sec-title .thin { font-weight: 300; color: var(--ink-2); }
.sec-desc {
  margin-top: 20px;
  font-size: 17px;
  color: var(--gray-600);
  font-weight: 400;
  max-width: 580px;
}
.center .sec-desc { margin-left: auto; margin-right: auto; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }
.reveal.d4 { transition-delay: 0.32s; }
.reveal.d5 { transition-delay: 0.40s; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed; right: 30px; bottom: 30px;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--brand); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 12px 30px rgba(30, 64, 175, 0.32);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: all 0.35s var(--ease); z-index: 90;
}
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { filter: brightness(1.08); }

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  .sec { padding: 84px 0; }
}