:root {
  --color-soft-white: #FCFCFC;
  --color-warm-white: #ECEAE4;
  --color-light-cream: #FDFBF6;

  /* 어두운 */
  --color-light-gray: #5E5E5E;
  --color-soft-dark-gray: #4B4B4B;
  --color-light-dark-gray: #3B3B3B;
  --color-charcoal: #2C2C2C;
  --color-dark-gray: #222222;
  --color-soft-black: #1A1A1A;
  --color-dark-black: #020202;
  --color-accent-orange: #EB5E28;

  --font-family: 'AppleSDGothicNeo', sans-serif;
  --font-thin: 100;
  --font-ultra-light: 200;
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semi-bold: 600;
  --font-bold: 700;
  --font-extra-bold: 800;
  --font-heavy: 900;
}

/* @font-face 설정 */
@font-face {
  font-family: 'AppleSDGothicNeo';
  font-weight: 100; /* Thin */
  src: url(../fonts/AppleSDGothicNeo/AppleSDGothicNeo-Thin.woff2) format('woff2');
}

@font-face {
  font-family: 'AppleSDGothicNeo';
  font-weight: 200; /* Ultra Light */
  src: url(../fonts/AppleSDGothicNeo/AppleSDGothicNeo-ExtraLight.woff2) format('woff2');
}

@font-face {
  font-family: 'AppleSDGothicNeo';
  font-weight: 300; /* Light */
  src: url(../fonts/AppleSDGothicNeo/AppleSDGothicNeo-Light.woff2) format('woff2');
}

@font-face {
  font-family: 'AppleSDGothicNeo';
  font-weight: 400; /* Regular */
  src: url(../fonts/AppleSDGothicNeo/AppleSDGothicNeo-Regular.woff2) format('woff2');
}

@font-face {
  font-family: 'AppleSDGothicNeo';
  font-weight: 500; /* Medium */
  src: url(../fonts/AppleSDGothicNeo/AppleSDGothicNeo-Medium.woff2) format('woff2');
}

@font-face {
  font-family: 'AppleSDGothicNeo';
  font-weight: 600; /* Semi Bold */
  src: url(../fonts/AppleSDGothicNeo/AppleSDGothicNeo-SemiBold.woff2) format('woff2');
}

@font-face {
  font-family: 'AppleSDGothicNeo';
  font-weight: 700; /* Bold */
  src: url(../fonts/AppleSDGothicNeo/AppleSDGothicNeo-Bold.woff2) format('woff2');
}

@font-face {
  font-family: 'AppleSDGothicNeo';
  font-weight: 800; /* Extra Bold */
  src: url(../fonts/AppleSDGothicNeo/AppleSDGothicNeo-ExtraBold.woff2) format('woff2');
}

@font-face {
  font-family: 'AppleSDGothicNeo';
  font-weight: 900; /* Heavy */
  src: url(../fonts/AppleSDGothicNeo/AppleSDGothicNeo-Black.woff2) format('woff2');
}

/* 기본 스타일 */
body {
  font-family: var(--font-family), sans-serif; /* 기본 폰트 */
  font-weight: var(--font-regular); /* 기본 Regular */
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* 굵기별 스타일 */
.font-1 {
  font-family: var(--font-family), sans-serif;
  font-weight: var(--font-thin); /* 100 */
  font-size: 12px;
}

.font-2 {
  font-family: var(--font-family), sans-serif;
  font-weight: var(--font-ultra-light); /* 200 */
  font-size: 14px;
}

.font-3 {
  font-family: var(--font-family), sans-serif;
  font-weight: var(--font-light); /* 300 */
  font-size: 16px;
}

.font-4 {
  font-family: var(--font-family), sans-serif;
  font-weight: var(--font-regular); /* 400 */
  font-size: 18px;
}

.font-5 {
  font-family: var(--font-family), sans-serif;
  font-weight: var(--font-medium); /* 500 */
  font-size: 20px;
}

.font-6 {
  font-family: var(--font-family), sans-serif;
  font-weight: var(--font-semi-bold); /* 600 */
  font-size: 22px;
}

.font-7 {
  font-family: var(--font-family), sans-serif;
  font-weight: var(--font-bold); /* 700 */
  font-size: 24px;
}

.font-8 {
  font-family: var(--font-family), sans-serif;
  font-weight: var(--font-extra-bold); /* 800 */
  font-size: 26px;
}

.font-9 {
  font-family: var(--font-family), sans-serif;
  font-weight: var(--font-heavy); /* 900 */
  font-size: 28px;
}

body {
  font-family: var(--font-family), sans-serif;
  font-weight: 400;
  margin: 0;
  padding: 0;
  min-width: 320px; /* 최소 창 너비 */
  display: flex; /* Flexbox 설정 */
  flex-direction: column; /* 상하 배치 */
  min-height: 100vh; /* 화면 전체 높이 */
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-direction: column;
  flex: 1; /* 본문을 푸터까지 밀어내도록 설정 */
  margin: 0;
  min-height: 100%;
  box-sizing: border-box;
}

.content {
  flex: 1;
  padding: 0;
  box-sizing: border-box;
}

.wrapper {
  max-width: 1200px; /* 최대 너비 */
  margin: 0 auto; /* 중앙 정렬 */
  box-sizing: border-box; /* 패딩 포함 */
}

.divider {
  width: 100%; /* 전체 너비 */
  height: 0.5px; /* 초극세 선 */
  background-color: rgba(2, 2, 2, 0.2); /* 밝은 회색 선 (투명도 추가) */
  margin-top: 4px; /* 위 간격 조정 */
  margin-bottom: 8px; /* 아래 간격 조정 */
}

.empty-divider {
  margin: 18px;
}

/* 배지 */
.badge {
  color: white;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #3F51B5;
  font-weight: bold;
  white-space: nowrap;
}

.big-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 31px;
  height: 31px;
  font-size: 12px;
  font-weight: bold;
  color: var(--color-light-cream); /* 배경색 */
  background-color: var(--color-light-gray); /* 글자 색상 */
  border-radius: 50%;
  text-align: center;
}

/* 페이지 로딩 시 페이드 인 */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.2s ease-in forwards;
}

/* 페이지 나갈 때 페이드 아웃 */
.fade-out {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}