@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&family=Noto+Sans+KR:wght@400;600;700;900&display=swap');


/* ============================================================
   header.css — MapleCC 공통 페이지 헤더 스타일
   모든 페이지에서 <link rel="stylesheet" href="css/header.css"> 로 사용
   ============================================================ */


/* ── 페이지 헤더 전체 래퍼 ── */
.page-header {
  width: 100% !important;
  box-sizing: border-box !important;
  text-align: center !important;
  /* 모든 페이지에서 동일한 상단 여백 (사이드바 버튼 60px + 여백 16px) */
  padding: 10px 16px 0 !important;
  margin: 0 0 44px 0 !important;
  /* body가 flex 구조여도 헤더가 전체 너비를 차지하도록 */
  align-self: stretch !important;
  flex-shrink: 0 !important;
  animation: fadeDown 0.6s ease both;
}

/* ── 상단 배지 ── */
.page-header .badge {
  display: inline-block !important;
  background: linear-gradient(135deg, #4a7fff, #7b5ea7) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  padding: 4px 14px !important;
  border-radius: 20px !important;
  margin-bottom: 8px !important;
  text-transform: uppercase !important;
  font-family: 'Nanum Gothic Coding', 'Noto Sans KR', sans-serif !important;
}

/* ── 메인 타이틀 — Gaegu 폰트 ── */
.page-header h1 {
  font-family: 'Nanum Gothic Coding', 'Noto Sans KR', sans-serif !important;
  font-size: 42px !important;
  color: #ffffff !important;
  line-height: 1.2 !important;
  letter-spacing: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  /* 개별 CSS의 h1 스타일 덮어쓰기 */
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: none !important;
  font-weight: 700 !important;
}

/* ── 강조 단어 — 파란→초록 그라디언트 ── */
.page-header h1 span {
  font-family: 'Nanum Gothic Coding', 'Noto Sans KR', sans-serif !important;
  font-weight: 700 !important;
  background: linear-gradient(90deg, #4a7fff, #17b978) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ── 부제목 설명 ── */
.page-header p {
  color: #aab0c6 !important;
  font-size: 14px !important;
  margin: 10px 0 0 !important;
  font-family: 'Nanum Gothic Coding', 'Noto Sans KR', sans-serif !important;
  font-weight: 400 !important;
}

/* ── 등장 애니메이션 ── */
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── 모바일 반응형 ── */
@media (max-width: 480px) {
  .page-header {
    padding-top: 72px !important;
  }
  .page-header h1 {
    font-size: 30px !important;
  }
}