/* 소리튠 주니어 — 학습자 화면 디자인 토큰 (2026-10-23 · 4학기 디자인 정리 feature/sem4-design-refresh)
 * 원본: 피그마 Junior Renewal Project 「현행 보정판(밝은 톤)」 · /root/exports/2026-10/junior_tokens.css
 * ⚠️ 학생·학부모 화면에서만 불러온다(코치·관리 화면은 안 불러옴 → 옛 색 그대로).
 *   1) --jr-* 새 토큰   2) common.css 옛 색 변수를 새 토큰으로 다시 연결(이 파일을 불러온 화면에서만 바뀐다)
 * 화면 코드에는 hex 를 새로 쓰지 않는다. 없는 값은 여기에 먼저 추가. */
:root {
  /* 주황 — 자주 쓰는 색(주요 버튼·진행·현재 메뉴) */
  --jr-orange: #FF8A2A;        /* kids/orange */
  --jr-orange-deep: #C35402;   /* fill/orange — 주황 글자·작은 글씨 */
  --jr-orange-edge: #E64A19;   /* edge/orange — 버튼 아래 테두리 */
  --jr-orange-soft: #FFF3E0;   /* soft/orange — 아이콘 타일·강조 면 */
  /* 초록 — 정답·완료 */
  --jr-green: #5FC162;  --jr-green-deep: #2E7D32;  --jr-green-soft: #E8F5E9;
  /* 하늘 — 듣기·선택·안내 */
  --jr-sky: #56ADFE;  --jr-sky-deep: #1976D2;  --jr-sky-edge: #1E88E5;  --jr-sky-soft: #E3F2FD;
  /* 보라 — 꾸준왕·카드 보상 */
  --jr-purple: #AB85F5;  --jr-purple-deep: #5E35B1;  --jr-purple-soft: #F1E9FF;
  /* 빨강 — 오답·오류 */
  --jr-red: #FF6555;  --jr-red-deep: #C62828;  --jr-red-soft: #FFEBEE;
  /* 노랑 — 코인·확인 대기 (흰 글자 금지) */
  --jr-yellow: #FFC93C;  --jr-yellow-soft: #FFF8E1;  --jr-olive: #A37F4D;  --jr-olive-deep: #6D4C00;
  /* 네이비 — 학부모 화면 강조 */
  --jr-navy: #2E5297;  --jr-navy-soft: #E8EAF6;
  /* 무채색 */
  --jr-white: #FFFFFF;  --jr-gray-50: #FAFAFA;  --jr-gray-100: #F5F5F5;  --jr-gray-200: #E0E0E0;
  --jr-gray-400: #BDBDBD;  --jr-gray-600: #757575;  --jr-gray-700: #616161;  --jr-gray-800: #424242;  --jr-gray-900: #333333;
  /* 바탕 — 유일하게 허용하는 그라데이션 */
  --jr-sky-bg-300: #4FC3F7;  --jr-sky-bg-200: #81D4FA;  --jr-sky-bg-100: #B3E5FC;  --jr-sky-bg-50: #E1F5FE;  /* sky-bg/* — 바탕 그라데이션 단계 */
  --jr-bg-sky: linear-gradient(180deg, var(--jr-sky-bg-300) 0%, var(--jr-sky-bg-200) 30%, var(--jr-sky-bg-100) 60%, var(--jr-sky-bg-50) 100%);

  /* 글자 크기 8단 (최소 13) */
  --jr-text-caption: 13px; --jr-text-label: 14px; --jr-text-body-s: 15px; --jr-text-body: 16px;
  --jr-text-title3: 18px; --jr-text-title2: 20px; --jr-text-title1: 24px; --jr-text-display: 40px;
  /* 태블릿·PC(≥1024): title2 22 · title1 28 · display 48 */
  --jr-weight-regular: 400; --jr-weight-medium: 500; --jr-weight-bold: 700; --jr-weight-black: 900;

  /* 모서리 */
  --jr-radius-tile-s: 8px;  --jr-radius-control: 12px;  --jr-radius-row: 16px;
  --jr-radius-card: 20px;   --jr-radius-overlay: 24px;  --jr-radius-full: 999px;
  /* 간격 */
  --jr-space-1: 4px; --jr-space-2: 8px; --jr-space-3: 12px; --jr-space-4: 16px;
  --jr-space-5: 20px; --jr-space-6: 24px; --jr-space-8: 32px; --jr-space-10: 40px;
  /* 터치: 최소 48 · 버튼 lg 52 / md 44 / sm 36 */

  /* 그림자 */
  --jr-shadow-card: 0 4px 16px rgba(26, 51, 89, .06);     /* Elevation/Card */
  --jr-shadow-nav: 0 -2px 16px rgba(26, 51, 89, .08);     /* Elevation/Nav */
  --jr-shadow-overlay: 0 12px 32px rgba(0, 0, 0, .18);    /* Elevation/Overlay */
  --jr-shadow-raised: 0 1px 3px rgba(0, 0, 0, .12);       /* Elevation/Raised */
}
/* 태블릿·PC */
@media (min-width: 1024px) {
  :root { --jr-text-title2: 22px; --jr-text-title1: 28px; --jr-text-display: 48px; }
}
/* 밝은 면 위 흰 글자 — 그림자 없음(2026-10-23 B안). 흰 글자는 굵게(700+), 13px 미만은 밝은 면에 흰색으로 올리지 않는다 */
.jr-on-bright { color: #fff; font-weight: var(--jr-weight-bold); }

/* 주요 버튼 예시 (Button variant=primary size=md) */
.jr-btn-primary {
  min-height: 44px; padding: 0 var(--jr-space-4); border: 0; border-radius: var(--jr-radius-control);
  background: var(--jr-orange); border-bottom: 3px solid var(--jr-orange-edge);
  font-size: var(--jr-text-body-s); font-weight: var(--jr-weight-black);
  color: #fff;
}
.jr-btn-primary:active { transform: translateY(2px); border-bottom-width: 1px; }

/* ── 레벨 색 (확정 2026-10-23) — 반 레벨 배지 안에서만 쓰는 예외 색.
 * 지금 코드엔 시험·수업·레벨테스트·ACE 마다 레벨 색이 따로 4벌 → 이 한 벌로 통일. 흰 글자는 그림자 없이(10-23). */
:root {
  --jr-level-white: #FFFFFF;  --jr-level-white-line: var(--jr-gray-200);  --jr-level-white-text: var(--jr-gray-800);
  --jr-level-yellow: var(--jr-yellow);  --jr-level-yellow-text: var(--jr-olive-deep);
  --jr-level-green: var(--jr-green);
  --jr-level-blue: var(--jr-sky);
  --jr-level-red: var(--jr-red);
  --jr-level-purple: var(--jr-purple);
  --jr-level-brown: var(--jr-olive);
  /* 소리원정대 그림 에셋에 맞춘 색 — 원정대 그림 옆에서만 */
  --jr-exp-green: #07997B;  --jr-exp-green-bg: #16AB8A;
  /* 영상 바탕·마스크 전용 검정 */
  --jr-video-black: #000000;
}

/* 그림 아이콘 (images/icons/jr-icons.svg) — 글자색 = 본 그림, --jr-ic-detail = 안쪽 그림(기본 흰색) */
.jr-ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.15em; flex-shrink: 0; color: var(--jr-orange); }

/* ── 화면 이동 규칙 + 공통 뒤로가기 버튼 (2026-10-26) ──
 * ① 탭 화면(홈·수업·과제·마이·랭킹) = 뒤로가기 없음. 이동은 메뉴(태블릿 왼쪽 바 · 휴대폰 아래 탭)로만.
 * ② 하위 화면(홈에서 들어가는 리스닝·원정대, 퀴즈 같은 몰입 화면) = 왼쪽 위 [‹ 홈] — 이 버튼(.jr-back) 하나만 쓴다. 글자는 돌아갈 곳 이름.
 * ③ 팝업·시트·겹쳐 뜨는 창(영상, 도움말, 전체 시간표) = 오른쪽 위 [×].
 * ④ 링크로 바로 여는 화면(알림톡·문자로 가는 리포트, 휴면 레벨테스트) = 맨 위 뒤로가기 없음(학부모·코치는 돌아갈 '홈'이 없다).
    그 안에서 들어가는 하위 화면(인증서)은 ②처럼 [‹ 리포트]. 시험·레벨테스트처럼 푸는 화면은 푸는 중에 [‹ 홈]을 누르면 한 번 묻는다(js/shared/jr-back.js).
 * 새 화면을 만들면 셋 중 어디인지 먼저 정한다. */
.jr-back {
  display: inline-flex; align-items: center; gap: 2px; flex: none;
  width: auto; height: auto; min-width: 0; min-height: 40px; margin: 0; padding: 0 14px 0 8px;
  border: 0; border-radius: var(--jr-radius-full); background: var(--jr-white); box-shadow: var(--jr-shadow-raised);
  font-family: inherit; font-size: var(--jr-text-body-s); font-weight: var(--jr-weight-black); line-height: 1;
  color: var(--jr-gray-800); text-decoration: none; cursor: pointer;
}
.jr-back::before { content: '‹'; font-size: 24px; line-height: 1; color: var(--jr-orange); margin-top: -2px; }
.jr-back:active { transform: translateY(1px); }
/* 앱 밖 페이지(시험·레벨테스트·인증서)의 맨 위 줄 — [‹ 홈]/[‹ 리포트] 자리 */
.jr-pagebar { width: 100%; max-width: 560px; margin: 0 auto; padding: 12px 16px 0; box-sizing: border-box; align-self: stretch; }
.jr-pagebar[hidden] { display: none; }
/* 태블릿·PC: 본문 폭이 페이지마다 달라서 [‹ 홈]은 화면 왼쪽 위 모서리에 둔다(퀴즈 위 바와 같은 자리) */
@media (min-width: 1024px) { .jr-pagebar { max-width: none; padding: 16px 20px 0; } }

/* ── 움직임 (2026-10-27 확정 · 피그마 03 「UI 규칙」 14 · 움직임 · 변수 「Junior DS · Motion」) ──
 * 시간 6개 · 곡선 3개만 쓴다. 목적: press=누름 · fast=상태 바뀜 · base=화면 들어오기·팝업 열기·토스트·진행 막대
 * · exit=닫기·나가기 · pop=정답·보상 한 번 · celebrate=축하 효과 최대 길이. 튀는 곡선(ease-pop)은 보상·정답에만. */
:root {
  --jr-dur-press: 100ms;  --jr-dur-fast: 150ms;  --jr-dur-base: 250ms;
  --jr-dur-exit: 180ms;   --jr-dur-pop: 400ms;   --jr-dur-celebrate: 1200ms;
  --jr-ease-out: cubic-bezier(.22, .61, .36, 1);   /* 기본 — 들어오기·상태 바뀜 */
  --jr-ease-in: cubic-bezier(.4, 0, 1, 1);         /* 닫기·나가기 */
  --jr-ease-pop: cubic-bezier(.34, 1.56, .64, 1);  /* 보상·정답에만 */
}
/* 정답·오답 — 퀴즈·단어·블록·파닉스가 같은 움직임을 쓴다.
 * 쓰는 법: animation: jr-correct var(--jr-dur-pop) var(--jr-ease-out) both;  /  jr-wrong 도 같은 시간·곡선 */
@keyframes jr-correct { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes jr-wrong {
  0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(4px); }
}
/* 누름 반응 — :active 에서 눌리는데(translate/scale) 전환이 없어 딱 바뀌던 버튼들(10-29 움직임 4단계).
 * :where() 라 특이도 0 — 이미 transition 을 적어 둔 규칙이 있으면 그쪽이 이긴다(빈 곳만 채운다). */
:where(.ranking-me-bar, .card-history-item, .landing-intro-cta, .home-listening-go, .exp-meet-btn, .exp-nav, .htodo.is-go,
  .hhero-chip-btn, .hhero-my, .hhelp-ok, .jrt-next-go, .jr-btn-primary, .jr-back, .qz-btn, .qz-listen-xl, .qz-tile, .qz-cta, .qz-sub, .lt-opt) {
  transition: transform var(--jr-dur-press) var(--jr-ease-out), box-shadow var(--jr-dur-press) var(--jr-ease-out), border-width var(--jr-dur-press) var(--jr-ease-out);
}
/* 계속 도는 움직임은 허용 목록만(녹음·재생 중 · LIVE · 시간 경고 · 홈 캐릭터 · 로딩). 표시용 깜빡임은 이것 하나:
 * animation: jr-pulse 1s ease-in-out infinite; */
@keyframes jr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* 기기 「동작 줄이기」 — 이 파일을 불러오는 모든 화면에서 움직임을 끈다(계속 도는 것도 1회로 멈춤).
 * 0 이 아니라 .01ms 로 두는 이유: animationend·transitionend 가 그대로 와서 그 이벤트를 기다리는 JS 가 멈추지 않는다. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important;
  }
}