/* =========================================================
   0. 디자인 변수 — 색·글꼴·둥글기를 여기서 한 번에 바꿉니다
   ========================================================= */
:root {
  --bg: #0a0a0a;                       /* 페이지 배경 (거의 검정) */
  --surface: #121212;                  /* 카드 배경 (배경보다 살짝 밝게) */
  --line: rgba(255, 255, 255, 0.08);   /* 아주 옅은 테두리 */
  --text: #fafafa;                     /* 기본 글자 */
  --muted: rgba(255, 255, 255, 0.64);  /* 보조 글자 (흐린 흰색) */
  --accent: #0044ff;                   /* 포인트 색 (파랑) */
  --radius: 8px;                       /* 모서리 둥글기 */
  --font: "Pretendard", system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --font-pixel: "Galmuri11", monospace;
}

/* =========================================================
   1. 기본
   ========================================================= */
* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  /* 배경에 옅은 점 무늬 */
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}
a { color: inherit; }
main, .site-header, .site-footer { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
section { padding: 96px 0; }

/* 제목: 크고, 굵고, 글자 사이를 좁게 */
h1, h2, h3 { margin: 0 0 16px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
h1 { font-size: clamp(44px, 8vw, 96px); }   /* 화면 폭에 따라 44~96px 사이로 자동 조절 */
h2 { font-size: clamp(32px, 5vw, 56px); }
h3 { font-size: 22px; }
p  { color: var(--muted); margin: 0 0 24px; }

/* =========================================================
   2. 공지 띠 + 상단 메뉴
   ========================================================= */
.announce {
  display: block; padding: 8px; text-align: center; text-decoration: none;
  font-family: var(--font-pixel); font-size: 12px; letter-spacing: 0.05em;
  background: #191919; border-bottom: 1px solid var(--line);
}
.site-header {
  position: sticky; top: 0; z-index: 10;          /* 스크롤해도 위에 붙어 있음 */
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  height: 64px;
  background: rgba(10, 10, 10, 0.64);
  backdrop-filter: blur(12px);                    /* 뒤가 흐리게 비치는 유리 효과 */
}
.logo { font-weight: 700; font-size: 20px; text-decoration: none; }
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a { text-decoration: none; font-size: 14px; font-weight: 500; }
.site-nav a:not(.button):hover { color: var(--muted); }
.nav-toggle { display: none; font-size: 22px; background: none; border: 0; color: inherit; cursor: pointer; }

/* =========================================================
   3. 버튼
   ========================================================= */
.button {
  display: inline-block; padding: 10px 16px; border: 0; border-radius: var(--radius);
  font: 600 14px/1 var(--font); text-decoration: none; cursor: pointer;
  transition: opacity .2s;
}
.button:hover { opacity: .85; }
.button-primary { background: var(--accent); color: #fff; }
.button-light   { background: #fff; color: #0a0a0a; }

/* =========================================================
   4. 섹션별
   ========================================================= */
.hero { padding: 120px 0 96px; }
.eyebrow { font-size: 14px; color: var(--text); }
.lead { max-width: 520px; font-size: 18px; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));  /* 폭에 맞춰 1~3열 자동 */
  gap: 16px;
}
.card {
  padding: 28px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line);
  transition: border-color .2s, transform .2s;
}
.card:hover { border-color: rgba(255, 255, 255, 0.24); transform: translateY(-4px); }
.card a { font-size: 14px; font-weight: 600; text-decoration: none; }

.quote {
  margin: 0 0 96px; padding: 56px; border-radius: var(--radius);
  background: var(--accent);
}
.quote blockquote { margin: 0 0 24px; font-size: clamp(20px, 2.5vw, 28px); font-weight: 500; line-height: 1.4; max-width: 760px; }
.quote-who { color: rgba(255, 255, 255, 0.8); font-size: 14px; margin: 0; }

.cta { text-align: center; border-top: 1px solid var(--line); }

/* =========================================================
   5. 푸터
   ========================================================= */
.site-footer { padding-top: 32px; padding-bottom: 48px; border-top: 1px solid var(--line); font-size: 13px; }
.site-footer p { margin: 0 0 6px; }

/* =========================================================
   6. 휴대폰 (폭 640px 이하)
   ========================================================= */
@media (max-width: 640px) {
  section { padding: 64px 0; }
  .quote { padding: 32px 24px; }
  .nav-toggle { display: block; }
  .site-header { height: auto; min-height: 64px; }
  .site-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 16px; padding: 8px 0 20px; }
  .site-nav.open { display: flex; }
}