/* ============================================
   공통 리셋 및 기본 스타일
   ============================================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* 전역 디자인 토큰 */
:root {
  /* Primary (메인 강조) */
  --color-muted-blue: #92B8D8;
  --color-deep-blue: #2F5C9C;
  --color-deep-blue-hover: #3E6FB3;

  /* Secondary (보조 강조) */
  --color-muted-green: #8ACC78;
  --color-deep-green: #4D9E46;

  /* Neutral (배경/라인/텍스트) */
  --color-background: #F4F8FB;
  --color-card-box: #FFFFFF;
  --color-soft-gray-line: #E7EBEF;
  --color-text-primary: #1A2A43;
  --color-text-secondary: #6C7A89;

  /* 그림자 */
  --shadow-soft: 0 6px 20px rgba(15, 23, 42, 0.06);
  --shadow-medium: 0 16px 35px rgba(15, 23, 42, 0.14);

  /* 간격 */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;

  /* 전환 효과 */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
}

body {
  font-family: 'LINESeedKR', system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  background: var(--color-background);
  min-height: 100vh;
  color: var(--color-text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--color-deep-blue);
}

strong,
b {
  font-weight: 700;
}

/* 공통 메인 컨테이너
   - 대부분 페이지의 <main class="main"> 에 적용
   - 개별 페이지에서 추가 여백/레이아웃이 필요하면 더 구체적인 선택자로 확장 */
.main {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing-2xl) var(--spacing-lg);
}

/* 서브 페이지 공통 섹션 */
.page-section {
  width: 100%;
  margin-bottom: var(--spacing-2xl);
}

.page-title-section {
  margin-bottom: var(--spacing-xl);
}

.page-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-sm);
}

.page-subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
}

/* 공통 카드 컴포넌트 */
.card {
  background: var(--color-card-box);
  border-radius: 16px;
  border: 1px solid var(--color-soft-gray-line);
  padding: var(--spacing-lg);
  box-shadow: var(--shadow-soft);
  transition:
    transform var(--transition-base),
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    background-color var(--transition-base);
}

.card--interactive:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-medium);
  border-color: var(--color-muted-blue);
}

/* 공통 버튼 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  color: var(--color-text-primary);
  transition:
    background var(--transition-base),
    color var(--transition-base),
    box-shadow var(--transition-base),
    transform var(--transition-base),
    border-color var(--transition-base);
}

.btn--primary {
  background: linear-gradient(
    135deg,
    var(--color-deep-blue),
    var(--color-muted-blue)
  );
  color: #ffffff;
  box-shadow: 0 10px 25px rgba(47, 92, 156, 0.35);
}

.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 35px rgba(47, 92, 156, 0.45);
}

.btn--outline {
  border-color: var(--color-deep-blue);
  color: var(--color-deep-blue);
  background: #ffffff;
}

.btn--outline:hover {
  background: var(--color-deep-blue);
  color: #ffffff;
}

.btn--subtle {
  border-color: var(--color-soft-gray-line);
  background: rgba(255, 255, 255, 0.7);
  color: var(--color-text-secondary);
}

.btn--subtle:hover {
  border-color: var(--color-muted-blue);
  color: var(--color-deep-blue);
}

/* 스크롤 리빌 애니메이션 */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 500ms ease,
    transform 500ms ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 큰 화면 (1440px 이상) */
@media (min-width: 1440px) {
  .main,
  .header,
  .sub-container,
  .page-title-section {
    max-width: 1400px;
  }
}

body.menu-open {
  height: 100vh;
  overflow: hidden;
}