/* ══════════════════════════════════════════════
   연산 레벨테스트 — 학년 선택 화면 (front-leveltest.css)
   ver3 정적 시안 level-select.html 포팅
   · 학년(1~6) 원형 선택 + 파도(stagger) 효과
   · 모든 규칙을 .lt-select 로 스코프하여 공통 레이아웃/
     다른 페이지(front-leveltest-test.css 사용)에 영향 없음
   ══════════════════════════════════════════════ */

/* ── 색상 토큰 (원문 :root, 페이지 스코프) ── */
.lt-select {
  --yellow:        #F5C800;
  --yellow-pastel: #FFD840;
  --yellow-light:  #FFFBE8;
  --yellow-dark:   #7A5F00;
  --navy:          #1C1F33;
  --mint:          #2ECBA8;
  --mint-dark:     #1A9E82;
  --mint-light:    #EDFAF6;
  --gray-bg:       #F7F8FA;
  --gray-border:   #EEF0F3;
  --gray-line:     #C8CDD6;
  --gray-text:     #6B7280;
  --white:         #FFFFFF;

  /* 학년 원형 배경색 */
  --gc1: #FFF0F6;
  --gc2: #FFFBE8;
  --gc3: #EEF8FF;
  --gc4: #F4EEFF;
  --gc5: #FFF0F6;
  --gc6: #EEF8FF;

  font-family: 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  color: var(--navy);
  background: var(--gray-bg);
}

.lt-select a { text-decoration: none; color: inherit; }

/* ══════════ 상단 헤더 영역 ══════════ */
.lt-select .top-area {
  background: var(--white);
  position: relative;
  overflow: hidden;
  padding: 40px 24px 48px;
  text-align: center;
}

.lt-select .top-area::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--gray-line) 1.5px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: 0.3;
  pointer-events: none;
}

.lt-select .blob { position: absolute; pointer-events: none; }

.lt-select .topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto 32px;
}

.lt-select .back-btn {
  position: absolute;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-text);
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: color 0.18s;
  text-decoration: none;
}
.lt-select .back-btn:hover { color: var(--navy); }

.lt-select .top-nav-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  opacity: 0.55;
}

.lt-select .top-heading {
  position: relative;
  z-index: 2;
  font-size: 32px;
  font-weight: 900;
  color: var(--navy);
  letter-spacing: -0.5px;
  margin-bottom: 6px;
}
.lt-select .top-heading .em { color: var(--yellow-dark); }

.lt-select .top-badge {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 28px;
  background: var(--yellow);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 16px;
}
.lt-select .top-badge::before { content: '▼'; font-size: 11px; opacity: 0.7; }

/* 그라디언트 전환 */
.lt-select .gradient-divider {
  height: 40px;
  background: linear-gradient(to bottom, var(--white) 0%, var(--gray-bg) 100%);
}

/* ══════════ 학년 선택 영역 ══════════ */
.lt-select .grade-section {
  max-width: 900px;
  margin: 0 auto;
  padding: 52px 24px 64px;
  text-align: center;
}

.lt-select .grade-circles {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 0 8px;
  margin: 0 auto 52px;
}

.lt-select .grade-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  max-width: 140px;
  padding: 8px 0 12px;
  border-radius: 20px;
  border: 2px solid transparent;
  transition: border-color 0.2s, background 0.2s;
}

/* 짝수 항목이 위로 올라가는 파도 효과 */
.lt-select .grade-item:nth-child(even) { transform: translateY(-22px); }
.lt-select .grade-item:hover { background: rgba(0,0,0,0.03); }

.lt-select .grade-item.selected {
  border-color: var(--yellow);
  background: var(--yellow-light);
}

.lt-select .grade-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.lt-select .grade-item:hover .grade-circle    { transform: translateY(-6px) scale(1.05); }
.lt-select .grade-item.selected .grade-circle { transform: translateY(-6px) scale(1.08); box-shadow: 0 8px 22px rgba(0,0,0,0.15); }

.lt-select .gc1 { background: var(--gc1); }
.lt-select .gc2 { background: var(--gc2); }
.lt-select .gc3 { background: var(--gc3); }
.lt-select .gc4 { background: var(--gc4); }
.lt-select .gc5 { background: var(--gc5); }
.lt-select .gc6 { background: var(--gc6); }

.lt-select .grade-circle img { width: 52px; height: 52px; object-fit: contain; }

.lt-select .grade-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
}

/* ══════════ 시작 버튼 ══════════ */
.lt-select .start-btn {
  display: block;
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
  padding: 17px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--navy);
  background: var(--yellow);
  cursor: pointer;
  transition: opacity 0.2s, transform 0.18s, filter 0.18s;
  opacity: 0.3;
  pointer-events: none;
  font-family: inherit;
}
.lt-select .start-btn.ready {
  opacity: 1;
  pointer-events: auto;
}
.lt-select .start-btn.ready:hover { transform: translateY(-2px); filter: brightness(0.93); }

/* ══════════ RESPONSIVE ══════════ */
@media (max-width: 600px) {
  .lt-select .top-heading { font-size: 26px; }
  .lt-select .grade-circle { width: 72px; height: 72px; font-size: 34px; }
  .lt-select .grade-circle img { width: 42px; height: 42px; }
  .lt-select .grade-section { padding: 40px 16px 52px; }

  /* 모바일: 3개씩 2줄 */
  .lt-select .grade-circles { flex-wrap: wrap; max-width: 360px; }
  .lt-select .grade-item { flex: none; width: 100px; max-width: none; }
  .lt-select .grade-item:nth-child(even)  { transform: none; }
  .lt-select .grade-item:nth-child(2),
  .lt-select .grade-item:nth-child(5)     { transform: translateY(-22px); }
}

/* ══════════ 인쇄용 PDF 다운로드 (ver4) ══════════ */
.pdf-download-btn {
  display: block;
  width: 100%;
  max-width: 380px;
  margin: 12px auto 0;
  padding: 13px;
  border-radius: 14px;
  border: 1.5px solid var(--gray-line);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--gray-text);
  background: var(--white);
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.18s, border-color 0.18s, color 0.18s;
  opacity: 0.3;
  pointer-events: none;
  font-family: inherit;
}
.pdf-download-btn.ready { opacity: 1; pointer-events: auto; }
.pdf-download-btn.ready:hover {
  border-color: var(--navy);
  color: var(--navy);
  transform: translateY(-1px);
}


/* ══════════ 학기 선택 (ver5) ══════════ */
/* 레벨테스트는 회차(학년+학기) 단위의 독립 테스트라 학기까지 골라야 시작할 수 있다.
   학년을 고르기 전에는 접혀 있다가 펼쳐진다. */
.sem-section {
  max-width: 380px;
  margin: 0 auto;
  padding: 0 2px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.32s ease, opacity 0.26s ease, margin-bottom 0.32s ease;
}
.sem-section.show { max-height: 160px; opacity: 1; margin-bottom: 24px; }

.sem-label {
  font-size: 13px; font-weight: 700; color: var(--gray-text);
  text-align: center; margin-bottom: 10px;
}

.sem-btns { display: flex; gap: 10px; }

.sem-btn {
  flex: 1;
  padding: 15px 10px;
  border-radius: 13px;
  border: 2px solid var(--gray-line);
  background: var(--white);
  font-size: 15px; font-weight: 800; color: var(--navy);
  cursor: pointer; font-family: inherit;
  transition: border-color 0.18s, background 0.18s, transform 0.15s;
}
.sem-btn:hover:not(:disabled) { border-color: var(--navy); transform: translateY(-1px); }
.sem-btn:disabled { opacity: .4; cursor: not-allowed; }
.sem-btn.selected { border-color: var(--navy); background: var(--yellow); }