/**
 * 404 Error 페이지 스타일
 *
 * 존재하지 않는 페이지 접근 시 표시되는 에러 페이지 스타일
 * - .error404-container: 페이지 메인 컨테이너
 * - .error404-content: 콘텐츠 영역 (중앙 정렬)
 * - .error404-graphic: 에러 아이콘/이미지
 * - .error404-button: 홈으로 돌아가기 버튼
 */

/* ==================== 404 Error 컨테이너 ==================== */
.error404-container {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;

  & .error404-content {
    text-align: center;
    max-width: 600px;

    & .error404-graphic {
      width: 200px;
      height: 200px;
      margin: 0 auto 30px;
      background: url(../sass/img/img-empty.png) no-repeat center;
      background-size: contain;
    }

    & .error404-title {
      font-size: 48px;
      font-weight: 700;
      color: var(--bg-nav-primary);
      margin: 0 0 20px;
    }

    & .error404-message {
      font-size: 18px;
      color: #666;
      line-height: 1.6;
      margin: 0 0 40px;
    }

    & .error404-button {
      display: inline-block;
      padding: 14px 32px;
      background-color: var(--bg-nav-primary);
      color: white;
      text-decoration: none;
      border-radius: 6px;
      font-size: 16px;
      font-weight: 600;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(17, 29, 74, 0.2);

      &:hover {
        background-color: #0d1534;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(17, 29, 74, 0.3);
      }
    }
  }
}

/* ==================== 반응형: 태블릿 (768px 이하) ==================== */
@media screen and (max-width: 768px) {
  .error404-container {
    padding: 40px 20px;

    & .error404-content {
      & .error404-graphic {
        width: 150px;
        height: 150px;
        margin-bottom: 20px;
      }

      & .error404-title {
        font-size: 36px;
      }

      & .error404-message {
        font-size: 16px;
        margin-bottom: 30px;
      }
    }
  }
}

/* ==================== 반응형: 모바일 (480px 이하) ==================== */
@media screen and (max-width: 480px) {
  .error404-container {
    padding: 30px 15px;

    & .error404-content {
      & .error404-graphic {
        width: 120px;
        height: 120px;
      }

      & .error404-title {
        font-size: 28px;
      }

      & .error404-message {
        font-size: 14px;
      }

      & .error404-button {
        padding: 12px 24px;
        font-size: 14px;
      }
    }
  }
}