/* 온보딩 모의고사 화면 — 스케치북 디자인 확정판 (docs/DESIGN-SYSTEM.md) */

/* ── 공통 프레임 ── */
.ob{display:flex;flex-direction:column;min-height:100%;gap:var(--sp-3)}
.ob-top{display:flex;align-items:center;gap:12px}
.ob-x{width:40px;height:40px;flex-shrink:0}
.ob-x img{width:100%;height:100%;object-fit:contain;opacity:.8}
.ob-progress{flex:1;height:16px;background:var(--card);border:1.5px solid var(--edge);
  border-radius:var(--radius-pill);overflow:hidden;position:relative}
.ob-progress i{display:block;height:100%;background:var(--cray-yellow);
  border-radius:0 8px 8px 0;transition:width .3s}
.ob-count{font-family:var(--font-hand);font-size:19px;color:var(--sub);flex-shrink:0}

/* 장면 카드 */
.ob-scene{position:relative;background-size:cover;background-position:center;
  border:1.5px solid var(--edge);border-radius:var(--wobble-lg);overflow:hidden;
  box-shadow:var(--shadow-card);min-height:150px;padding:var(--sp-3)}
.ob-scene .char{position:absolute;right:6px;bottom:0;width:96px;
  filter:drop-shadow(0 3px 4px rgba(90,70,40,.25))}
.ob-scene .txt{position:relative;max-width:calc(100% - 96px);background:var(--scrim);
  border-radius:14px 18px 12px 16px;padding:10px 13px;font-size:14.5px;line-height:1.6;font-weight:600}
.ob-scene .txt q{font-family:var(--font-hand);font-size:18px;quotes:"\201C" "\201D"}

.ob-prompt{font-family:var(--font-hand);font-size:22px;line-height:1.4;text-align:center;
  padding:0 6px}
.ob-prompt b{color:var(--cray-red)}

/* ── MCQ 보기 카드 ── */
.ob-opts{display:flex;flex-direction:column;gap:11px}
.ob-opt{background:var(--card);border:1.5px solid var(--edge);border-radius:var(--wobble);
  padding:14px 16px;font-size:16px;font-weight:600;line-height:1.5;text-align:left;
  box-shadow:0 6px 20px rgba(58,52,46,.13);min-height:var(--tap-min)}
.ob-opt:nth-child(odd){transform:rotate(-.5deg)} .ob-opt:nth-child(even){transform:rotate(.5deg)}
.ob-opt.sel{background:#FFF3C9;border-color:var(--cray-yellow);border-width:4px;
  box-shadow:0 2px 0 rgba(58,52,46,.15)}
.ob-opt.sel::after{content:"";position:absolute}

/* ── mine: 카톡 스레드 ── */
.ob-chat{display:flex;flex-direction:column;gap:10px}
.ob-msg{max-width:82%;padding:11px 14px;font-size:15px;font-weight:600;line-height:1.55;
  border:1.5px solid var(--edge);position:relative;box-shadow:0 5px 16px rgba(58,52,46,.12)}
.ob-msg.her{align-self:flex-start;background:#fff;border-radius:4px 18px 16px 14px}
.ob-msg.me{align-self:flex-end;background:#FFF3C9;border-radius:18px 4px 14px 16px}
.ob-msg.tag{background:#FFE0D8;border-color:var(--cray-red)}
.ob-msg .bomb{position:absolute;top:-16px;right:-12px;width:36px;transform:rotate(10deg)}
.ob-minecount{display:flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--font-hand);font-size:19px}
.ob-minecount img{width:28px}

/* ── translate: 치환 매칭 ── */
.ob-pairs{display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;position:relative}
.ob-pcard{background:var(--card);border:1.5px solid var(--edge);border-radius:14px 18px 12px 16px;
  padding:11px 12px;font-size:13.5px;font-weight:700;line-height:1.45;min-height:64px;
  display:flex;align-items:center;justify-content:center;text-align:center}
.ob-pcard.left{border-color:var(--cray-red);color:#a8402f;transform:rotate(-.6deg)}
.ob-pcard.right{border-color:var(--cray-green-d);color:#33702c;transform:rotate(.6deg)}
.ob-pcard.sel{background:#FFF3C9;border-width:4px}
.ob-pcard.linked{opacity:.55;background:#F1EFE6}
.ob-links{position:absolute;inset:0;pointer-events:none}
.ob-links path{stroke:var(--cray-blue);stroke-width:5;stroke-linecap:round;fill:none;opacity:.75}

/* ── timing: 3초 타이머 ── */
.ob-timer{display:flex;flex-direction:column;align-items:center;gap:6px;margin:2px 0}
.ob-timer .num{font-family:var(--font-hand);font-size:64px;line-height:1;color:var(--cray-red)}
.ob-timer .bar{width:78%;height:14px;border:1.5px solid var(--edge);border-radius:var(--radius-pill);
  overflow:hidden}
.ob-timer .bar i{display:block;height:100%;background:var(--cray-red);transition:width .1s linear}
.ob-opt.big{font-family:var(--font-hand);font-size:20px;text-align:center;padding:18px}

/* ── 하단 ── */
.ob-next{margin-top:auto}

/* ── MCQ 번호 뱃지 ── */
.ob-opt{position:relative;padding-left:52px}
.ob-opt .no{position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:30px;height:30px;border:1.5px solid var(--edge);border-radius:11px 13px 10px 14px;
  background:var(--paper);font-family:var(--font-hand);font-size:18px;font-weight:700;
  display:flex;align-items:center;justify-content:center;color:var(--cray-blue)}
.ob-opt.sel .no{background:var(--cray-yellow);color:var(--ink)}

/* ── 인트로·결과 ── */
.ob-hero{position:relative;text-align:center;background-size:cover;background-position:center top;
  border:1.5px solid var(--edge);border-radius:var(--wobble-lg);overflow:hidden;padding:20px 18px 0}
.ob-hero img.char{width:150px;margin:10px auto -4px;display:block;
  filter:drop-shadow(0 2px 3px rgba(90,70,40,.3))}
/* 예전엔 그림 위 글자를 흰 판(scrim) 위에 얹었는데, 크레용 그림 위에 종이가 한 장 더
   덧대진 것처럼 어색했다 (대표 지적 2026-08-13). 판을 없애고 **글자에만** 종이색
   외곽선을 둘러 읽히게 한다 — 인트로 자막과 같은 방식이다. 판은 그림을 덮지만
   외곽선은 글자에만 붙어서 배경 그림이 끝까지 살아 있다. */
.ob-hero .plate{display:inline-block;padding:4px 10px 10px;
  -webkit-text-stroke:6px var(--paper);paint-order:stroke fill}
.ob-kicker{display:inline-block;background:var(--ink);color:#FFF3C9;font-family:var(--font-hand);
  font-size:16px;padding:4px 14px 5px;border-radius:999px;transform:rotate(-1.2deg);margin-bottom:8px}
.ob-grade{font-family:var(--font-hand);font-size:34px;line-height:1.2;color:var(--ink)}
.ob-score{font-family:var(--font-hand);font-size:76px;line-height:1;color:var(--cray-blue);
  text-shadow:0 2px 0 rgba(255,255,255,.9)}
.ob-comment{font-size:14px;font-weight:600;color:var(--sub);line-height:1.7;padding:0 8px}
.ob-hero .plate .ob-kicker{-webkit-text-stroke:0}   /* 자기 배경이 있는 요소는 외곽선 제외 */

/* ── 캐릭터 생명 — 정지 그림에 숨을 넣는다 (크레용 종이인형 스타일) ── */
/* 1층: 상시 숨쉬기. 발밑 고정으로 위가 살짝 부풀었다 가라앉는다 */
.ob-scene .char, .ob-hero img.char{
  transform-origin:50% 100%;
  animation:char-idle 2.6s ease-in-out infinite alternate}
@keyframes char-idle{
  from{transform:translateY(0) scale(1)}
  to{transform:translateY(-2px) scale(1.018,1.03)}}

/* 2층: 말하는 동안 — 옹알옹알(blip)과 같은 호흡으로 들썩인다 */
.ob-scene .char.talking{animation:char-talk .34s ease-in-out infinite}
@keyframes char-talk{
  0%,100%{transform:translateY(0) rotate(0)}
  30%{transform:translateY(-3px) rotate(-1.2deg)}
  70%{transform:translateY(-1px) rotate(1.2deg)}}

/* 3층: 반응 — 정답이면 폴짝, 오답이면 부르르 */
.ob-scene .char.react-pop{animation:char-pop .55s cubic-bezier(.34,1.56,.64,1)}
@keyframes char-pop{
  0%{transform:translateY(0) scale(1)}
  40%{transform:translateY(-14px) scale(1.12,1.06) rotate(3deg)}
  70%{transform:translateY(0) scale(.96,1.04)}
  100%{transform:translateY(0) scale(1)}}
.ob-scene .char.react-shake{animation:char-shake .5s ease-in-out}
@keyframes char-shake{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-5px) rotate(-2deg)}
  40%{transform:translateX(5px) rotate(2deg)}
  60%{transform:translateX(-4px)}
  80%{transform:translateX(3px)}}
/* 결과 화면 캐릭터 등장 */
.ob-hero img.char.enter{animation:char-pop .55s cubic-bezier(.34,1.56,.64,1),
  char-idle 2.6s .6s ease-in-out infinite alternate}