/* ============================================================
   css/ai.css - 하루 10분 AI 교실
   ============================================================ */
/* 공통 section-hero는 아이콘/제목이 float라 높이가 안 잡힘 → AI 교실 페이지에서만 감싸기 */
.section-hero { display: flow-root; }
.ai-meta, .ai-progress { clear: both; }

.ai-progress { background: #eee; border-radius: 8px; height: 12px; overflow: hidden; margin: 6px 0 20px; }
.ai-progress__bar { background: linear-gradient(90deg,#7b1fa2,#ba68c8); height: 100%; }
.ai-meta { font-size: 18px; color: #666; }

.ai-steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.ai-steps li {
  counter-increment: step; position: relative;
  padding: 10px 0 10px 52px; font-size: 20px; line-height: 1.7; border-bottom: 1px dashed #e5e5e5;
}
.ai-steps li:last-child { border-bottom: 0; }
.ai-steps li::before {
  content: counter(step); position: absolute; left: 0; top: 10px;
  width: 36px; height: 36px; border-radius: 50%;
  background: #7b1fa2; color: #fff; font-weight: bold; text-align: center; line-height: 36px;
}
.ai-say {
  display: block; background: #f3e5f5; border-left: 5px solid #ba68c8;
  padding: 10px 14px; margin: 8px 0; font-size: 20px; border-radius: 6px;
}
.ai-say::before { content: "\1F4AC  "; }
.ai-warn {
  background: #fff3e0; border: 2px solid #ffb74d; border-radius: 8px;
  padding: 12px 16px; margin-top: 12px; font-size: 19px; line-height: 1.7;
}
.ai-homework {
  background: #e8f5e9; border: 2px solid #66bb6a; border-radius: 10px;
  padding: 16px 18px; margin: 24px 0 12px; font-size: 20px; line-height: 1.7;
}
.ai-homework h2 { font-size: 22px; margin: 0 0 8px; color: #2e7d32; }
.ai-done-wrap { text-align: center; margin: 12px 0 24px; }
.ai-done-btn { font-size: 20px; padding: 12px 28px; }
.ai-done-btn.is-done { background: #43a047; border-color: #43a047; color: #fff; }
.ai-note { font-size: 16px; color: #888; text-align: center; margin: 8px 0 20px; }

/* 제미나이 과정 색상 (구글 파랑) */
.section-hero--blue { background: linear-gradient(135deg, #2563eb 0%, #1e3a8a 100%); }

/* 과정 선택 탭 */
.ai-tabs { display: flex; gap: 10px; margin-bottom: 18px; }
.ai-tab {
  flex: 1 1 0; text-align: center; padding: 14px 10px; font-size: 22px; font-weight: bold;
  border: 2px solid #d8b4fe; border-radius: 12px; color: #6a1b9a; background: #fff; text-decoration: none;
}
.ai-tab.is-active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
.ai-tab--gemini { border-color: #93c5fd; color: #1d4ed8; }
.ai-tab--gemini.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }

/* 시작 전 준비하기 */
.ai-choice { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.ai-choice__btn { flex: 1 1 160px; font-size: 21px; padding: 14px 10px; }
.ai-choice__btn.is-active { background: #0891b2; border-color: #0891b2; color: #fff; }
.ai-answer { background: #f0fdff; border: 2px solid #67c7d9; border-radius: 10px; padding: 16px 18px; margin-top: 8px; }
.ai-answer h3 { font-size: 22px; margin: 0 0 10px; color: #0e7490; }
.ai-check { list-style: none; padding: 0; margin: 0 0 12px; }
.ai-check li { border-bottom: 1px dashed #e5e5e5; }
.ai-check label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 4px; font-size: 20px; line-height: 1.6; cursor: pointer; }
.ai-check input { width: 26px; height: 26px; margin-top: 4px; flex-shrink: 0; accent-color: #0891b2; }
.ai-ready-box {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #f0fdff; border: 2px solid #67c7d9; border-radius: 12px;
  padding: 16px 20px; margin-bottom: 28px; font-size: 20px;
}
.ai-ready-box__text { flex: 1 1 260px; }

.ai-pager { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 20px 0; }
.ai-pager a { flex: 1 1 200px; text-align: center; font-size: 18px; }

.ai-week { margin-bottom: 28px; }
.ai-lessons { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.ai-lessons a {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: #fff; border: 1px solid #e5e5e5; border-radius: 10px;
  font-size: 20px; color: #333; text-decoration: none;
}
.ai-lessons a:hover { border-color: #ba68c8; background: #faf5fc; }
.ai-lessons .ai-no {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%;
  background: #f3e5f5; color: #6a1b9a; font-weight: bold; text-align: center; line-height: 46px; font-size: 17px;
}
.ai-lessons a.is-done .ai-no { background: #43a047; color: #fff; }
.ai-lessons a.is-done .ai-no::after { content: " \2713"; }
@media (max-width: 768px) {
  .ai-lessons { grid-template-columns: 1fr; }
  .ai-steps li { font-size: 19px; }
}