/* 스크린리더 전용*/

/* 에러 섹션 레이아웃 */
.error-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  gap: var(--space-md);
  padding: var(--space-lg) var(--container-padding);
  box-sizing: border-box;
}

.error-image {
  width: clamp(18rem, 35vw, 27rem);
  aspect-ratio: 276 / 236;
  background-image: var(--icon-404);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
  margin: 0;
}

.error-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
  width: 100%;
  max-width: 42rem;
}

.error-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.error-title {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}

.error-description {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* 버튼 컨테이너 */
.error-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--form-gap);
  width: 100%;
}

/* 404 버튼 */
.error-buttons .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 20rem;
  height: var(--btn-height-sm);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  cursor: pointer;
}

.error-buttons .btn:active {
  transform: translateY(1px);
}

/* 메인 버튼*/
.error-buttons .btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border: none;
}

.error-buttons .btn-primary:hover {
  background-color: var(--color-primary-hover);
}

.error-buttons .btn-primary:active {
  background-color: var(--color-primary-active);
}

/* 보조 버튼 */
.error-buttons .btn-secondary {
  background-color: var(--color-bg-base);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border-primary);
}

.error-buttons .btn-secondary:hover {
  background-color: var(--color-bg-secondary);
  color: var(--color-dark-hover);
}

.error-buttons .btn-secondary:active {
  background-color: var(--color-bg-secondary);
  color: var(--color-dark-active);
}

/* 태블릿 (768px 이상) */
@media (min-width: 768px) {

  .error-title {
    font-size: var(--fs-3xl);
  }

  .error-description {
    font-size: var(--fs-md);
  }

  .error-buttons .btn {
    height: var(--btn-height-md);
  }
}

/* 데스크톱 (1024px 이상) */
@media (min-width: 1024px) {
  .error-section {
    flex-direction: row;
    gap: var(--space-lg);
  }

  .error-content {
    align-items: flex-start;
    text-align: left;
  }

  .error-buttons {
    justify-content: flex-start;
  }
}