/* 레슨 엔진 전용 (onboarding.css의 ob-* 공용 + 추가분) */

/* 즉시 피드백 패널 */
.ls-feedback{border:1.5px solid var(--edge);border-radius:var(--wobble);padding:14px 16px;
  margin-top:2px;animation:pop .18s ease-out}
.ls-feedback.good{background:#EAF6E6;border-color:var(--cray-green-d)}
.ls-feedback.bad{background:#FDEDEA;border-color:var(--cray-red)}
.ls-feedback .verdict{display:flex;align-items:center;gap:8px;font-family:var(--font-hand);
  font-size:21px;margin-bottom:6px}
.ls-feedback .verdict img{width:28px}
.ls-feedback p{font-size:13.5px;line-height:1.65;font-weight:600;color:var(--ink)}
.ls-feedback p+p{margin-top:5px;color:var(--sub)}
@keyframes pop{from{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}

/* 정오답 보기 강조 */
.ob-opt.good{background:#EAF6E6;border-color:var(--cray-green-d)}
.ob-opt.bad{background:#FDEDEA;border-color:var(--cray-red)}

/* cloze 워드뱅크 */
.ls-cloze-sent{font-family:var(--font-hand);font-size:22px;line-height:1.7;text-align:center;
  background:var(--card);border:1.5px solid var(--edge);border-radius:var(--wobble);padding:16px}
.ls-cloze-sent .gap{display:inline-block;min-width:86px;border-bottom:4px solid var(--cray-blue);
  color:var(--cray-blue);text-align:center;padding:0 4px}
.ls-bank{display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.ls-chip{border:1.5px solid var(--edge);background:var(--card);border-radius:12px 16px 11px 15px;
  padding:9px 14px;font-family:var(--font-hand);font-size:18px;box-shadow:0 5px 16px rgba(58,52,46,.12)}
.ls-chip.used{opacity:.35;pointer-events:none}

/* order 카드 */
.ls-order{display:flex;flex-direction:column;gap:10px}
.ls-ocard{position:relative;background:var(--card);border:1.5px solid var(--edge);
  border-radius:var(--wobble);padding:13px 16px 13px 52px;font-size:15px;font-weight:600;
  text-align:left;box-shadow:0 5px 16px rgba(58,52,46,.12)}
.ls-ocard .seq{position:absolute;left:11px;top:50%;transform:translateY(-50%);width:30px;height:30px;
  border:1.5px solid var(--edge);border-radius:50%;background:var(--paper);
  font-family:var(--font-hand);font-size:17px;display:flex;align-items:center;justify-content:center}
.ls-ocard.picked .seq{background:var(--cray-yellow)}

/* rewrite 카드 뒤집기 */
.ls-wrong{border:3px solid var(--cray-red);background:#FDEDEA;border-radius:var(--wobble);
  padding:14px 16px;font-family:var(--font-hand);font-size:20px;color:#a8402f;text-align:center;
  text-decoration:line-through;text-decoration-thickness:3px}
.ls-right{border:3px solid var(--cray-green-d);background:#EAF6E6;border-radius:var(--wobble);
  padding:14px 16px;font-family:var(--font-hand);font-size:20px;color:#33702c;text-align:center}

/* 발화 드릴 */
.ls-speech{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ls-speech .target{font-family:var(--font-hand);font-size:26px;line-height:1.5;
  background:#fff;border:1.5px solid var(--edge);border-radius:6px 24px 22px 20px;
  padding:18px 22px;box-shadow:0 6px 20px rgba(58,52,46,.13)}
.ls-mic{width:92px;height:92px;border-radius:50%;border:1.5px solid var(--edge);background:var(--cray-yellow);
  display:flex;align-items:center;justify-content:center;box-shadow:0 5px 0 rgba(58,52,46,.25)}
.ls-mic img{width:46px}
.ls-mic.rec{background:var(--cray-red);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.07)}}
.ls-heard{min-height:24px;font-size:14px;color:var(--cray-blue);font-weight:700}

/* 레슨 결과 */
.ls-result-stats{display:flex;gap:10px;text-align:center}
.ls-result-stats>div{flex:1;background:var(--card);border:1.5px solid var(--edge);
  border-radius:var(--wobble);padding:12px 6px}
.ls-result-stats b{font-family:var(--font-hand);font-size:28px;display:block}
.ls-result-stats span{font-size:11.5px;color:var(--sub);font-weight:700}

/* 하단 고정 피드백 시트 (스크롤 제거 — 듀오링고 방식) */
.ls-sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;
  z-index:40;border-top:1.5px solid var(--edge);border-radius:22px 26px 0 0;
  padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 24px rgba(58,52,46,.18);animation:slideup .22s ease-out}
.ls-sheet.good{background:#EAF6E6}
.ls-sheet.bad{background:#FDEDEA}
.ls-sheet .verdict{display:flex;align-items:center;gap:8px;font-family:var(--font-hand);
  font-size:22px;margin-bottom:6px}
.ls-sheet .verdict img{width:28px}
.ls-sheet .why{max-height:26dvh;overflow-y:auto;margin-bottom:12px}
.ls-sheet .why p{font-size:13.5px;line-height:1.6;font-weight:600}
.ls-sheet .why p+p{margin-top:4px;color:var(--sub)}
@keyframes slideup{from{transform:translate(-50%,30%);opacity:.4}to{transform:translate(-50%,0);opacity:1}}

/* 대사 한 글자씩 드러내기 (옹알옹알과 짝) */
.ob-scene .txt .tc{opacity:0;transition:opacity .09s linear}
.ob-scene .txt .tc.on{opacity:1}
@media (prefers-reduced-motion:reduce){ .ob-scene .txt .tc{opacity:1} }

/* 결과 별점 — 700ms(sfx.stars 와 동시)에 하나씩 튀어나온다. 크레용 star.png 3개 */
.ls-stars{display:flex;justify-content:center;gap:14px;min-height:64px}
.ls-stars img{width:56px;height:56px;object-fit:contain}
.ls-stars img.earn{opacity:0;transform:scale(.2) rotate(-25deg)}
.ls-stars.go img.earn{animation:star-pop .5s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay:calc((var(--d) - 1) * .19s)}   /* sfx.stars 의 190ms 간격과 동일 */
.ls-stars img.miss{opacity:.22;filter:grayscale(1)}
@keyframes star-pop{
  0%{opacity:0;transform:scale(.2) rotate(-25deg)}
  70%{opacity:1;transform:scale(1.25) rotate(6deg)}
  100%{opacity:1;transform:scale(1) rotate(0)}
}