/* =========================================================
   kids-theme.css
   초등학생 AI 영어 학습 프로그램 — 전용 디자인 시스템
   (기존 det-theme.css와는 완전히 다른 브랜드 톤 — 혼용 금지)

   방향성
   - 밝고 동글동글한 "학습지 + 놀이판" 느낌
   - 활동 5종을 각각 다른 포인트 컬러로 구분 (아이가 색으로 기억)
   - 큰 터치 영역, 두꺼운 테두리, 눌리는 버튼(3D press)
   - 별 스티커 보상으로 성취감 표현
========================================================= */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
@import url("https://fonts.googleapis.com/css2?family=Jua&display=swap");

/* =========================================================
   전역 리셋
   🔧 버그 수정: width:100%인 요소에 padding/border가 붙으면
   (텍스트박스, 선택지 버튼 등) content-box 기본값 때문에 실제 너비가
   100%를 넘어가서 카드 밖으로 삐져나가는 문제가 있었습니다.
   border-box로 통일해서 padding/border가 지정한 너비 안에 포함되게 합니다.
========================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

:root {
  /* 배경/표면 */
  --kid-bg: #FFF8EC;
  --kid-surface: #FFFFFF;
  --kid-ink: #33291F;
  --kid-ink-soft: #7A6B5A;
  --kid-line: #F0E4D0;

  /* 활동별 포인트 컬러 (5종) */
  --kid-sky: #3FB6E8;      /* 듣기 받아쓰기 */
  --kid-sky-tint: #E6F6FD;
  --kid-coral: #FF8467;    /* 사진보고 설명하기(말하기) */
  --kid-coral-tint: #FFEEEA;
  --kid-yellow: #FFB93D;   /* 단어 빈칸 채우기 */
  --kid-yellow-tint: #FFF5E1;
  --kid-purple: #9B7BE0;   /* 문장에 단어 넣기 */
  --kid-purple-tint: #F1ECFC;
  --kid-green: #4CC98A;    /* 사진보고 쓰기 */
  --kid-green-tint: #E9F9F0;

  --kid-indigo: #6C7BE0;   /* 문장 읽고 녹음하기 */
  --kid-indigo-tint: #ECEDFC;
  --kid-mint: #2FBFAE;     /* 질문 듣고 답하기 */
  --kid-mint-tint: #E5F8F6;

  /* 상태 */
  --kid-success: #3FB871;
  --kid-danger: #F0655A;
  --kid-star: #FFC83D;

  /* 서체 */
  --kid-font-heading: "Jua", "Pretendard Variable", sans-serif;
  --kid-font-body: "Pretendard Variable", Pretendard, -apple-system, "Malgun Gothic", sans-serif;

  --kid-radius: 20px;
  --kid-radius-sm: 14px;
}

.kid-body {
  background: var(--kid-bg);
  color: var(--kid-ink);
  font-family: var(--kid-font-body);
  line-height: 1.6;
}

.kid-shell {
  max-width: 480px;
  margin: 0 auto;
  padding: 20px 18px 64px;
}

/* PC 화면에서는 조금 더 넉넉하게 (학습지/활동 화면은 읽기 편한 폭 유지) */
@media (min-width: 768px) {
  .kid-shell {
    max-width: 640px;
    padding: 32px 24px 80px;
  }
}

/* 랜딩/관리자처럼 콘텐츠가 많은 페이지용 넓은 컨테이너 */
.kid-shell--wide {
  max-width: 480px;
}

@media (min-width: 768px) {
  .kid-shell--wide { max-width: 720px; }
}

@media (min-width: 1100px) {
  .kid-shell--wide { max-width: 980px; }
}

/* =========================================================
   상단 바 (레벨 배지 + 별 개수)
========================================================= */
.kid-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--kid-surface);
  border: 3px solid var(--kid-line);
  border-radius: 999px;
  margin-bottom: 18px;
}

.kid-topbar__back {
  border: none;
  background: none;
  font-size: 22px;
  cursor: pointer;
  color: var(--kid-ink);
}

.kid-topbar__level {
  font-family: var(--kid-font-heading);
  font-size: 15px;
  color: var(--kid-ink);
}

.kid-star-count {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--kid-font-heading);
  font-size: 16px;
  color: var(--kid-ink);
}

.kid-star-count::before {
  content: "⭐";
  font-size: 16px;
}

/* =========================================================
   타이틀 / 인사말
========================================================= */
.kid-hello {
  text-align: center;
  margin-bottom: 24px;
}

.kid-hello h1 {
  font-family: var(--kid-font-heading);
  font-size: 24px;
  color: var(--kid-ink);
  margin: 0 0 6px;
}

.kid-hello p {
  font-size: 14px;
  color: var(--kid-ink-soft);
  margin: 0;
}

/* =========================================================
   말풍선 (격려 메시지)
========================================================= */
.kid-speech {
  position: relative;
  background: var(--kid-surface);
  border: 3px solid var(--kid-line);
  border-radius: var(--kid-radius);
  padding: 14px 18px;
  font-size: 14px;
  color: var(--kid-ink);
  margin-bottom: 20px;
}

.kid-speech::after {
  content: "";
  position: absolute;
  left: 32px;
  bottom: -12px;
  border-width: 12px 10px 0;
  border-style: solid;
  border-color: var(--kid-surface) transparent transparent;
}

.kid-speech::before {
  content: "";
  position: absolute;
  left: 30px;
  bottom: -16px;
  border-width: 14px 12px 0;
  border-style: solid;
  border-color: var(--kid-line) transparent transparent;
}

/* =========================================================
   오늘의 학습지 - 스테이션 경로
========================================================= */
.kid-path {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 10px 0 20px;
}

.kid-station {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 360px;
  text-decoration: none;
}

.kid-station:nth-child(even) { flex-direction: row-reverse; text-align: right; }

.kid-station__node {
  flex-shrink: 0;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  border: 4px solid var(--kid-surface);
  box-shadow: 0 4px 0 rgba(0,0,0,0.12);
  color: #fff;
  transition: transform .15s ease;
}

.kid-station:hover .kid-station__node { transform: scale(1.06); }

.kid-station__node.is-locked {
  background: #D9D0C2 !important;
  box-shadow: none;
  color: #A99C89;
}

.kid-station__node.is-done {
  box-shadow: 0 4px 0 rgba(0,0,0,0.12);
}

.kid-station__node.is-done::after {
  content: "⭐";
  position: absolute;
  margin-top: -46px;
  margin-left: 40px;
  font-size: 22px;
}

.kid-station--sky .kid-station__node { background: var(--kid-sky); }
.kid-station--coral .kid-station__node { background: var(--kid-coral); }
.kid-station--yellow .kid-station__node { background: var(--kid-yellow); }
.kid-station--purple .kid-station__node { background: var(--kid-purple); }
.kid-station--green .kid-station__node { background: var(--kid-green); }
.kid-station--indigo .kid-station__node { background: var(--kid-indigo); }
.kid-station--mint .kid-station__node { background: var(--kid-mint); }

.kid-station__label {
  font-family: var(--kid-font-heading);
  font-size: 16px;
  color: var(--kid-ink);
}

.kid-station__sub {
  font-size: 12.5px;
  color: var(--kid-ink-soft);
  margin-top: 2px;
}

.kid-station__connector {
  width: 4px;
  height: 28px;
  background: var(--kid-line);
  border-radius: 2px;
}

/* =========================================================
   카드
========================================================= */
.kid-card {
  background: var(--kid-surface);
  border: 3px solid var(--kid-line);
  border-radius: var(--kid-radius);
  padding: 20px;
  margin-bottom: 16px;
}

.kid-card__eyebrow {
  font-family: var(--kid-font-heading);
  font-size: 13px;
  color: var(--kid-ink-soft);
  margin: 0 0 6px;
}

.kid-card__title {
  font-family: var(--kid-font-heading);
  font-size: 19px;
  color: var(--kid-ink);
  margin: 0 0 8px;
}

/* =========================================================
   버튼 (눌리는 3D 느낌)
========================================================= */
.kid-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: var(--kid-font-heading);
  font-size: 16px;
  border: none;
  cursor: pointer;
  color: #fff;
  box-shadow: 0 5px 0 rgba(0,0,0,0.15);
  transition: transform .08s ease, box-shadow .08s ease;
}

.kid-btn:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.15);
}

.kid-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.kid-btn--full { width: 100%; }
.kid-btn--sky { background: var(--kid-sky); }
.kid-btn--coral { background: var(--kid-coral); }
.kid-btn--yellow { background: var(--kid-yellow); color: var(--kid-ink); }
.kid-btn--purple { background: var(--kid-purple); }
.kid-btn--green { background: var(--kid-green); }
.kid-btn--indigo { background: var(--kid-indigo); }
.kid-btn--mint { background: var(--kid-mint); }

.kid-btn--outline {
  background: var(--kid-surface);
  color: var(--kid-ink);
  border: 3px solid var(--kid-line);
  box-shadow: none;
}

.kid-btn--outline:active { transform: none; }

/* =========================================================
   선택지 (객관식)
========================================================= */
.kid-choice {
  display: block;
  width: 100%;
  text-align: center;
  padding: 16px;
  margin-bottom: 10px;
  background: var(--kid-surface);
  border: 3px solid var(--kid-line);
  border-radius: var(--kid-radius-sm);
  font-family: var(--kid-font-heading);
  font-size: 17px;
  color: var(--kid-ink);
  cursor: pointer;
  transition: all .12s ease;
}

.kid-choice:hover { border-color: var(--kid-sky); }
.kid-choice.is-selected { border-color: var(--kid-sky); background: var(--kid-sky-tint); }
.kid-choice.is-correct { border-color: var(--kid-success); background: var(--kid-green-tint); color: var(--kid-success); }
.kid-choice.is-incorrect { border-color: var(--kid-danger); background: #FDEDEB; color: var(--kid-danger); }
.kid-choice.is-disabled { pointer-events: none; opacity: 0.7; }

/* =========================================================
   빈칸 (문장에 단어 넣기)
========================================================= */
.kid-blank {
  display: inline-block;
  min-width: 90px;
  padding: 4px 10px;
  border-bottom: 4px solid var(--kid-purple);
  font-family: var(--kid-font-heading);
  font-size: 18px;
  color: var(--kid-purple);
  text-align: center;
}

/* =========================================================
   결과 화면
========================================================= */
.kid-result-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  font-size: 40px;
  margin: 12px 0 4px;
}

.kid-result-stars .is-empty { opacity: 0.25; filter: grayscale(1); }

.kid-result-title {
  text-align: center;
  font-family: var(--kid-font-heading);
  font-size: 22px;
  color: var(--kid-ink);
  margin: 0 0 4px;
}

.kid-result-sub {
  text-align: center;
  font-size: 14px;
  color: var(--kid-ink-soft);
  margin: 0 0 20px;
}

/* =========================================================
   성적표 (스킬별 바 차트)
========================================================= */
.kid-score-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.kid-score-row__icon { font-size: 22px; width: 28px; text-align: center; }
.kid-score-row__label { font-size: 13px; color: var(--kid-ink-soft); width: 64px; flex-shrink: 0; }

.kid-score-track {
  flex: 1;
  height: 14px;
  background: var(--kid-line);
  border-radius: 999px;
  overflow: hidden;
}

.kid-score-fill { height: 100%; border-radius: 999px; }
.kid-score-row__value { font-family: var(--kid-font-heading); font-size: 14px; width: 34px; text-align: right; }

/* 날짜별 히스토리 카드 */
.kid-history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border: 3px solid var(--kid-line);
  border-radius: var(--kid-radius-sm);
  margin-bottom: 10px;
  text-decoration: none;
  color: var(--kid-ink);
}

.kid-history-item__date { font-family: var(--kid-font-heading); font-size: 14px; }
.kid-history-item__stars { font-size: 14px; }

/* =========================================================
   복습 모드 (샘과 복습)
========================================================= */
.kid-review-item {
  border: 3px solid var(--kid-line);
  border-radius: var(--kid-radius-sm);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.kid-review-item.is-correct { border-color: var(--kid-success); background: var(--kid-green-tint); }
.kid-review-item.is-incorrect { border-color: var(--kid-danger); background: #FDEDEB; }

.kid-review-item__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.kid-review-item__badge {
  font-family: var(--kid-font-heading);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  color: #fff;
}

.kid-review-item.is-correct .kid-review-item__badge { background: var(--kid-success); }
.kid-review-item.is-incorrect .kid-review-item__badge { background: var(--kid-danger); }

/* =========================================================
   로딩
========================================================= */
.kid-loading {
  display: none;
  text-align: center;
  padding: 24px 0;
}

.kid-spinner {
  width: 36px;
  height: 36px;
  margin: 0 auto 12px;
  border: 5px solid var(--kid-line);
  border-top-color: var(--kid-sky);
  border-radius: 50%;
  animation: kid-spin 0.8s linear infinite;
}

@keyframes kid-spin { to { transform: rotate(360deg); } }

/* =========================================================
   데스크탑 2단 그리드 유틸리티
========================================================= */
.kid-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 768px) {
  .kid-grid-2 {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

/* =========================================================
   접근성
========================================================= */
@media (prefers-reduced-motion: reduce) {
  .kid-spinner { animation: none; }
}

.kid-btn:focus-visible,
.kid-choice:focus-visible {
  outline: 3px solid var(--kid-sky);
  outline-offset: 2px;
}