/* 발명 프로젝트 공용 스타일 — Tailwind 유틸리티로 표현하기 번거로운 것만 */

* {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
}

html {
  scroll-behavior: smooth;
  /* 초등학생이 모니터(큰 화면)로 보고 하는 수업이다. Tailwind의 text-*·padding·gap·max-width가
     전부 rem 기준이라, 루트 글자 크기 한 줄만 키우면 글자·여백·본문폭이 함께 비례 확대된다
     (16px → 20px = 전체 +25%). 화면을 더 채우면서 글자도 커진다. 좁은 화면에서도 rem 비례라 안전. */
  font-size: 20px;
}

/* 큰 화면 전제라 본문 컬럼도 조금 더 넓게 써서 모니터 여백을 줄인다 (기존 max-w-3xl≈48rem 페이지) */
@media (min-width: 1024px) {
  main.max-w-3xl { max-width: 56rem; }
}

/* 스텝바 가로 스크롤 (모바일에서 11단계가 한 줄에 안 들어갈 때) */
#stepper {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.75rem 0.25rem;
  scrollbar-width: thin;
}
#stepper::-webkit-scrollbar {
  height: 6px;
}
#stepper::-webkit-scrollbar-thumb {
  background: rgba(30, 42, 58, 0.2);
  border-radius: 999px;
}

/* 활동지 입력칸 공통 톤 */
.worksheet-input {
  width: 100%;
  border: 2px solid rgba(30, 42, 58, 0.2);
  border-radius: 0.75rem;
  padding: 0.6rem 0.9rem;
  font-size: 1rem;
  background: #fff;
}
.worksheet-input:focus {
  outline: none;
  border-color: #00b4a6;
}
textarea.worksheet-input {
  resize: vertical;
  min-height: 4.5rem;
}

.check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  cursor: pointer;
}
.check-item input {
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: #00b4a6;
  flex-shrink: 0;
}

/* 필수/도전 배지 */
.badge-required {
  background: #ff6b45;
  color: #fffbf2;
}
.badge-challenge {
  background: #ffc93c;
  color: #1e2a3a;
}

/* 인쇄용 — 학생이 인쇄해서 나눠 갖는 활동지·보고서라 폰트와 여백을 신경 써서 정리한다 */
@media print {
  @page {
    margin: 14mm 12mm;
  }
  nav,
  #stepper,
  .no-print,
  #saved-toast,
  #password-modal {
    display: none !important;
  }
  html,
  body {
    background: #fff !important;
    color: #1e2a3a !important;
    font-size: 12pt;
  }
  /* 웹폰트가 인쇄 렌더링에서도 확실히 적용되도록 print 미디어에서 다시 못박는다 */
  * {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  main {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .print-page {
    box-shadow: none !important;
    border-width: 1px !important;
    border-radius: 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
  .print-page + .print-page {
    margin-top: 10mm;
  }
  .worksheet-input {
    border-width: 1px !important;
  }
  a[href]::after {
    content: '';
  }
}

@keyframes pop-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.pop-in {
  animation: pop-in 0.35s ease-out;
}