@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css");
/* ============================================================
   base.css — 폰트 · 리셋 · 디자인토큰 · 기본 타이포
   ============================================================ */

@font-face {
  font-family: 'Gapyeong Hanseokbong';
  font-weight: 400;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/GapyeongHanseokbong/GapyeongHanseokbong-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Gapyeong Hanseokbong';
  font-weight: 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/fonts-archive/GapyeongHanseokbong/GapyeongHanseokbong-Bold.woff2') format('woff2');
}

/* ===== 디자인 토큰 ===== */
:root {
  --bg: #313169;
  --panel: #1d1d3e;
  --panel-2: #28284c;
  --header: #1d1d3e;
  --pink: #ec869e;
  --orange: #f2b26d;
  --yellow: #ffac56;
  --blue: #4cb5d2;
  --border: #8888bf;
  --t-strong: #d7d7d7;
  --t-mute: #a4a4b5;
  --t-dim: #848494;
  --shadow: 2px 3px 10px 5px rgba(0, 0, 0, .4);
  --font-body: 'SUIT', 'SUIT Variable', 'Pretendard', 'Noto Sans KR', system-ui, sans-serif;
  --font-head: 'Gapyeong Hanseokbong', 'GapyeongHanseokbong', var(--font-body);
  --wrap: 1200px;
}

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

/* ===== 리셋 · 기본 ===== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: clip;
}

body {
  position: relative;
  background: var(--bg);
  font-family: var(--font-body);
  color: #fff;
  overflow-x: clip;
  line-height: 1.5;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 255, 255, .05), transparent 55%),
    linear-gradient(180deg, #34346f 0%, #313169 42%, #23234b 100%);
}

img {
  display: block;
  max-width: 100%;
}

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

.head {
  font-family: var(--font-head);
  font-weight: 700;
}

/* ===== 레이아웃 기초 ===== */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.sec {
  position: relative;
  overflow: hidden;
}

.sec-pad {
  padding: 80px 0;
}

.sec>.wrap {
  position: relative;
  z-index: 1;
}

@media (max-width:575px) {
  .wrap {
    padding: 0 20px;
  }
}