/* KidLab 공용 앱 스타일 - 5세 기준 큰 글자, 큰 버튼, 명확한 피드백 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; height: 100%; }
/* iPad 사파리는 두 번 탭 확대를 기다리느라 탭이 늦거나 빠진다. 확대는 두 손가락으로만 */
html { touch-action: manipulation; }
body {
  font-family: "Segoe UI", "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Noto Sans KR", "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  background: #fff8ec; color: #333; font-size: 22px; overflow-x: hidden; user-select: none;
  display: flex; flex-direction: column; min-height: 100vh;
}
button { font-family: inherit; cursor: pointer; border: none; }
button:focus-visible { outline: 4px solid #1982c4; outline-offset: 2px; }
/* 좁은 화면에서는 창 제목줄에 이미 앱 이름과 닫기가 있으므로 앱 머리말을 감춘다.
   이 46px이 폰에서 내용 영역의 10% 가까이 된다. */
.kl-header.compact { display: none; }
.kl-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: nowrap; padding: 10px 18px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 20; }
.kl-title { font-size: 26px; font-weight: 800; min-width: 0; }
.kl-icon { font-size: 30px; }
.kl-right { display: flex; align-items: center; gap: 12px; flex: none; }
.kl-stars { font-weight: 800; background: #fff3c4; padding: 6px 14px; border-radius: 30px; color: #b07a00; }
.kl-stars.bump { animation: bump .5s; }
.kl-avatar { font-size: 30px; }
.kl-mini { background: #eef; border-radius: 50%; width: 44px; height: 44px; font-size: 22px; }
@keyframes bump { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 100%{transform:scale(1)} }
main, .kl-main { flex: 1; padding: 18px; max-width: 1100px; margin: 0 auto; width: 100%; }

.kl-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; padding: 8px; }
.kl-menu-item { background: #fff; border-radius: 26px; padding: 22px 12px; box-shadow: 0 6px 0 rgba(0,0,0,.08); transition: transform .15s; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
@media (hover: hover) { .kl-menu-item:hover { transform: translateY(-4px) scale(1.03); } }
.kl-menu-item:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.kl-menu-icon { font-size: 64px; line-height: 1; }
.kl-menu-label { font-size: 22px; font-weight: 800; color: #333; }
.kl-menu-level { font-size: 16px; background: rgba(0,0,0,.08); padding: 3px 12px; border-radius: 20px; color: #444; }

.kl-back { background: #eee; padding: 12px 22px; border-radius: 30px; font-size: 20px; font-weight: 700; margin-bottom: 12px; min-height: 56px; min-width: 104px; }
@media (hover: hover) { .kl-back:hover { background: #ddd; } }

.kl-quiztop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.kl-dots { display: flex; gap: 8px; flex-wrap: wrap; }
.kl-dots i { width: 22px; height: 22px; border-radius: 50%; background: #e2dccf; display: inline-block; }
.kl-dots i.ok { background: #8ac926; }
.kl-dots i.ok2 { background: #ffca3a; }
.kl-level { font-weight: 800; color: #6a4c93; background: #ece6f5; padding: 4px 14px; border-radius: 20px; font-size: 18px; }
.kl-stage { background: #fff; border-radius: 30px; padding: 26px; box-shadow: 0 8px 30px rgba(0,0,0,.06); min-height: 420px; }
.kl-prompt { font-size: 36px; font-weight: 800; text-align: center; margin-bottom: 20px; line-height: 1.3; }
.kl-prompt.big { font-size: 96px; }
.kl-prompt.speakable { cursor: pointer; position: relative; padding-left: 30px; padding-right: 30px; }
/* 단계가 없는 퀴즈(책 질문, 지문)에서는 빈 단계 표시를 숨긴다 */
.kl-level:empty { display: none; }
.kl-prompt.speakable::after { content: "🔊"; position: absolute; top: -4px; right: 0; font-size: 22px; opacity: .45; }
.kl-sub { text-align: center; color: #777; font-size: 20px; margin: -8px 0 18px; }
.kl-choices { display: grid; gap: 16px; }
.kl-choices.cols1 { grid-template-columns: 1fr; }
.kl-choices.cols2 { grid-template-columns: repeat(2, 1fr); }
.kl-choices.cols3 { grid-template-columns: repeat(3, 1fr); }
.kl-choices.cols4 { grid-template-columns: repeat(4, 1fr); }
.kl-choices.cols5 { grid-template-columns: repeat(5, 1fr); }
.kl-choices.cols6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 760px) {
  body { font-size: 19px; }
  main, .kl-main { padding: 12px; }
  .kl-header { padding: 8px 12px; gap: 8px; }
  .kl-title { font-size: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .kl-icon { font-size: 24px; }
  .kl-right { gap: 8px; flex: none; }
  .kl-stars { padding: 5px 10px; font-size: 17px; white-space: nowrap; }
  .kl-avatar { font-size: 24px; }
  .kl-mini { width: 38px; height: 38px; font-size: 18px; }
  .kl-stage { padding: 16px 12px; border-radius: 22px; min-height: 0; }
  .kl-choices { gap: 10px; }
  .kl-choices.cols4, .kl-choices.cols5, .kl-choices.cols6 { grid-template-columns: repeat(3, 1fr); }
  .kl-choice { font-size: 34px; min-height: 86px; padding: 14px 6px; border-radius: 18px; }
  .kl-choice.text { font-size: 21px; }
  .kl-choice.small { font-size: 19px; }
  .kl-prompt { font-size: 26px; margin-bottom: 14px; }
  .kl-prompt.big { font-size: 64px; }
  .kl-prompt > div[style*="font-size"] { font-size: 34px !important; }
  .kl-sub { font-size: 17px; }
  .kl-menu { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; padding: 4px; }
  .kl-menu-item { min-height: 132px; padding: 14px 8px; border-radius: 20px; }
  .kl-menu-icon { font-size: 44px; }
  .kl-menu-label { font-size: 17px; }
  .kl-btn { font-size: 19px; padding: 11px 18px; }
  .kl-btn.big { font-size: 22px; padding: 14px 24px; }
  .kl-back { font-size: 18px; padding: 10px 18px; min-height: 52px; min-width: 96px; }
  .kl-dots i { width: 16px; height: 16px; }
  .kl-result-emoji { font-size: 78px; }
  .kl-result-title { font-size: 28px; }
  .kl-result-score { font-size: 22px; }
  .kl-card { padding: 16px; border-radius: 20px; }
  .kl-toast { font-size: 18px; padding: 12px 18px; bottom: 16px; }
}
.kl-choice { background: #f4f1ea; border-radius: 22px; padding: 20px 10px; font-size: 44px; font-weight: 800; min-height: 110px; transition: transform .12s, background .2s; box-shadow: 0 5px 0 rgba(0,0,0,.08); line-height: 1.2; }
.kl-choice.text { font-size: 30px; }
.kl-choice.small { font-size: 26px; }
@media (hover: hover) { .kl-choice:hover { transform: scale(1.04); background: #ecf6ff; } }
.kl-choice.right { background: #c9f0a8; animation: pop .5s; }
.kl-choice.wrong { background: #ffc9c9; animation: shake .4s; }
.kl-choice.dim { opacity: .35; }
@keyframes pop { 0%{transform:scale(1)} 50%{transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-10px)} 75%{transform:translateX(10px)} }
.kl-result { text-align: center; padding: 20px; }
.kl-result-emoji { font-size: 110px; line-height: 1; animation: pop .8s; }
.kl-result-title { font-size: 40px; font-weight: 900; margin: 14px 0; }
.kl-result-score { font-size: 30px; color: #b07a00; font-weight: 800; }
.kl-levelup { color: #6a4c93; font-size: 24px; margin-top: 8px; }
.kl-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 24px; }
.kl-btn { background: #eee; border-radius: 30px; padding: 14px 28px; font-size: 24px; font-weight: 800; box-shadow: 0 5px 0 rgba(0,0,0,.1); }
.kl-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.1); }
.kl-btn.primary { background: #ffca3a; color: #5a3d00; }
.kl-btn.green { background: #8ac926; color: #163d00; }
.kl-btn.blue { background: #1982c4; color: #fff; }
.kl-btn.red { background: #ff595e; color: #fff; }
.kl-btn.purple { background: #6a4c93; color: #fff; }
.kl-btn.big { font-size: 32px; padding: 20px 40px; }
.kl-btn:disabled { opacity: .4; cursor: default; }

.kl-toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(30px); background: #333; color: #fff; padding: 14px 26px; border-radius: 40px; font-size: 22px; font-weight: 700; opacity: 0; transition: .35s; z-index: 999; pointer-events: none; max-width: 90vw; }
.kl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.kl-floatstar { position: fixed; left: 50%; top: 40%; transform: translateX(-50%); font-size: 44px; font-weight: 900; color: #e0a500; text-shadow: 0 2px 8px #fff; animation: floatup 1.3s forwards; z-index: 998; pointer-events: none; }
@keyframes floatup { 0%{opacity:0; transform:translate(-50%,20px) scale(.6)} 20%{opacity:1; transform:translate(-50%,0) scale(1.2)} 100%{opacity:0; transform:translate(-50%,-120px) scale(1)} }
.kl-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 997; overflow: hidden; }
.kl-confetti i { position: absolute; top: -20px; width: 12px; height: 18px; border-radius: 3px; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(110vh) rotate(720deg); } }

.kl-card { background: #fff; border-radius: 26px; padding: 24px; box-shadow: 0 8px 30px rgba(0,0,0,.06); margin-bottom: 18px; }
.kl-center { text-align: center; }
.kl-hint { color: #5e5e5e; font-size: 18px; text-align: center; margin-top: 10px; }
.kl-big-emoji { font-size: 120px; line-height: 1; text-align: center; }
.speak-btn { background: #e3f0ff; border-radius: 40px; padding: 10px 22px; font-size: 22px; font-weight: 700; min-height: 48px; }


/* 세로가 짧은 화면(가로로 눕힌 폰)에서도 보기 버튼이 한 화면에 들어오도록 */
@media (max-height: 500px) {
  body { font-size: 17px; }
  main, .kl-main { padding: 8px 10px; }
  .kl-header { padding: 3px 10px; }
  /* 창 안 + 납작한 화면이면 머리말은 아예 접는다 (별은 런처 상단바에 있다) */
  .kl-header.compact { display: none; }
  .kl-title { font-size: 17px; }
  .kl-icon { font-size: 20px; }
  .kl-stars { font-size: 15px; padding: 3px 9px; }
  .kl-avatar { font-size: 20px; }
  .kl-mini { width: 32px; height: 32px; font-size: 15px; }
  .kl-back { font-size: 16px; padding: 6px 14px; margin-bottom: 6px; min-height: 44px; min-width: 88px; }
  .kl-quiztop { margin-bottom: 4px; }
  .kl-dots i { width: 12px; height: 12px; }
  .kl-level { font-size: 14px; padding: 2px 10px; }
  .kl-stage { padding: 8px 10px; border-radius: 16px; }
  .kl-prompt { font-size: 21px; margin-bottom: 4px; }
  .kl-prompt.big { font-size: 40px; }
  .kl-prompt > div[style*="font-size"] { font-size: 24px !important; }
  .kl-sub { font-size: 15px; margin: -4px 0 8px; }
  .kl-choices { gap: 8px; }
  .kl-choice { font-size: 26px; min-height: 58px; padding: 8px 4px; border-radius: 14px; }
  .kl-choice.text { font-size: 17px; }
  .kl-choice.small { font-size: 15px; }
  .kl-menu { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
  .kl-menu-item { min-height: 92px; padding: 8px 6px; gap: 2px; }
  .kl-menu-icon { font-size: 32px; }
  .kl-menu-label { font-size: 14px; }
  .kl-menu-level { font-size: 14px; }
  .kl-btn { font-size: 16px; padding: 8px 14px; }
  .kl-btn.big { font-size: 18px; padding: 10px 18px; }
  .kl-row { margin-top: 10px; gap: 10px; }
  .kl-result-emoji { font-size: 54px; }
  .kl-result-title { font-size: 22px; margin: 6px 0; }
  .kl-result-score { font-size: 17px; }
  .kl-card { padding: 10px; }
  .kl-big-emoji { font-size: 70px; }
  /* 보기는 한 줄에 몰아서 세로 공간을 아낀다 */
  .kl-choices.cols4 { grid-template-columns: repeat(4, 1fr); }
  .kl-choices.cols5 { grid-template-columns: repeat(5, 1fr); }
  .kl-choices.cols6 { grid-template-columns: repeat(6, 1fr); }
  /* 앱 안의 큰 삽화도 같이 줄인다 (body[data-app]으로 앱 자체 규칙보다 우선) */
  body[data-app] .objs { font-size: 26px; letter-spacing: 2px; }
  body[data-app] .objs.small { font-size: 22px; }
  body[data-app] .eq { gap: 8px; }
  body[data-app] .eq .grp { font-size: 18px; padding: 4px 6px; max-width: 150px; }
  body[data-app] .eq .op { font-size: 22px; }
  body[data-app] .ten-frame { grid-template-columns: repeat(5, 34px); gap: 4px; }
  body[data-app] .ten-frame i { width: 34px; height: 34px; font-size: 20px; }
  body[data-app] .num-line span { width: 34px; height: 34px; font-size: 16px; }
  body[data-app] .clock { width: 140px; height: 140px; }
  body[data-app] .kl-choice .clock { width: 86px; height: 86px; }
  body[data-app] .shape, body[data-app] .kl-choice .shape { width: 58px; height: 58px; }
  body[data-app] .chip, body[data-app] .color-chip { width: 52px; height: 52px; border-radius: 14px; }
  body[data-app] .pattern .cell { width: 46px; height: 46px; font-size: 30px; }
  body[data-app] .cell { width: 44px; height: 44px; font-size: 26px; }
  body[data-app] .seq-target .slot { width: 72px; height: 72px; font-size: 30px; }
  body[data-app] .seq-pool button { width: 78px; height: 78px; font-size: 30px; }
  body[data-app] .dpad { grid-template-columns: repeat(3, 58px); grid-template-rows: repeat(3, 58px); }
  body[data-app] .dpad button { font-size: 26px; }
  body[data-app] .breath { width: 120px; height: 120px; font-size: 18px; }
  body[data-app] .drums { max-width: 380px; }
  body[data-app] .beat i { width: 40px; height: 40px; font-size: 20px; }
  body[data-app] .keypad { grid-template-columns: repeat(3, 62px); }
  body[data-app] .keypad button { height: 50px; font-size: 22px; }
  body[data-app] .dial { font-size: 34px; min-height: 44px; }
  body[data-app] .light i { width: 40px; height: 40px; }
  body[data-app] .road { height: 130px; }
  body[data-app] .book { font-size: 17px; padding: 12px; line-height: 1.5; }
  body[data-app] .book .scene { font-size: 40px; }
  body[data-app] .mood-grid button, body[data-app] .pick-grid button { font-size: 32px; padding: 8px 4px; }
  body[data-app] .letter .ch { font-size: 34px; }
  body[data-app] .letter .em { font-size: 22px; }
  body[data-app] .abc .ch { font-size: 28px; }
  body[data-app] .abc .em { font-size: 22px; }
  body[data-app] .combo .slot { width: 64px; height: 64px; }
  body[data-app] .combo { font-size: 34px; gap: 8px; }
}

/* ---------- 따라 쓰기 (한글·영어·숫자 앱이 함께 쓴다) ---------- */
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; }
  .pick button { background: #fff; border-radius: 16px; padding: 10px 4px; box-shadow: 0 4px 0 rgba(0,0,0,.08); position: relative; }
  .pick button .ch { font-size: 34px; font-weight: 900; color: #333; line-height: 1.1; }
  .pick button .ok { position: absolute; top: 3px; right: 6px; font-size: 14px; }
  .pick button.done { background: #eaf7dc; }
  @media (hover: hover) { .pick button:hover { transform: scale(1.06); } }
  .pad { display: flex; flex-direction: column; align-items: center; gap: 8px; }
  /* 쓰기판은 줄어들면 안 된다. 줄어들면 안의 캔버스가 아래 글자를 덮는다.
     크기는 화면에 맞춰 코드에서 정한다. */
  .sheet { position: relative; flex: 0 0 auto; background: #fff; border-radius: 20px; box-shadow: 0 6px 0 rgba(0,0,0,.08); touch-action: none; overflow: hidden; }
  .sheet canvas { position: absolute; left: 0; top: 0; border-radius: 20px; }
  .sheet canvas.ink { touch-action: none; }
  .bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
  .meter { width: 100%; max-width: 420px; height: 16px; border-radius: 10px; background: #e8e8e8; overflow: hidden; }
  .meter i { display: block; height: 100%; background: linear-gradient(90deg, #8ac926, #4caf50); width: 0; transition: width .35s; }
  .verdict { font-size: 22px; font-weight: 800; min-height: 30px; text-align: center; }
  .cur { font-size: 26px; font-weight: 900; }
  body.fixed { overflow: hidden; }
  body.fixed main { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 8px 10px; gap: 6px; }
  body.fixed .kl-back { align-self: flex-start; margin: 0; }
  body.fixed .pad { flex: 1; min-height: 0; justify-content: center; }
  /* 세로가 짧으면(폰 가로모드) 쓰기판을 왼쪽에, 조작부를 오른쪽에 둔다 */
  @media (max-height: 520px) {
    body.fixed .pad { display: grid; grid-template-columns: auto minmax(180px, 1fr);
      grid-template-areas: "sheet title" "sheet meter" "sheet verdict" "sheet bar";
      align-content: center; justify-content: center; gap: 6px 14px; }
    body.fixed .pad .cur { grid-area: title; }
    body.fixed .pad .sheet { grid-area: sheet; align-self: center; }
    body.fixed .pad .meter { grid-area: meter; }
    body.fixed .pad .verdict { grid-area: verdict; }
    body.fixed .pad .bar { grid-area: bar; }
  }
  @media (max-width: 760px) {
    .pick { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 6px; }
    .pick button .ch { font-size: 28px; }
    .bar button { font-size: 16px; padding: 8px 12px; }
    .verdict { font-size: 18px; min-height: 24px; }
    .cur { font-size: 20px; }
  }

/* ---------- 화면 밖으로 밀려 잘리는 것 막기 ----------
   body가 overflow-x: hidden 이라 한 번 밀려나면 좌우로 끌어서 볼 수가 없다.
   보기 칸과 그 안의 그림은 칸 너비에 맞춰 줄어들게 한다. */
.kl-choices > * { min-width: 0; }
body[data-app] .kl-choice { min-width: 0; }
body[data-app] .kl-choice > * { max-width: 100%; }
body[data-app] .kl-choice .clock,
body[data-app] .kl-choice .shape,
body[data-app] .kl-choice .chip,
body[data-app] .kl-choice .color-chip {
  width: 100%; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; display: block; }
body[data-app] .kl-choice .clock { max-width: 150px; }
body[data-app] .kl-choice .shape { max-width: 90px; }
body[data-app] .kl-choice .chip { max-width: 100px; }
body[data-app] .kl-choice .color-chip { max-width: 90px; }
body[data-app] .clock, body[data-app] .shape { max-width: 100%; height: auto; aspect-ratio: 1 / 1; }
body[data-app] .chip, body[data-app] .color-chip, body[data-app] .tank { max-width: 100%; }
/* 그래도 넓어지는 화면이 남으면 잘라 버리지 말고 좌우로 끌 수 있게 둔다 */
body[data-app] main { overflow-x: auto; }

/* ---------- 맞고 틀림을 크게 알려 주기 (5세는 색만으로는 모른다) ---------- */
.kl-nope { position: fixed; left: 50%; top: 45%; transform: translate(-50%, -50%) scale(.6);
  background: rgba(255,89,94,.96); color: #fff; border-radius: 28px; padding: 18px 34px;
  text-align: center; z-index: 9000; pointer-events: none; opacity: 0;
  transition: opacity .18s, transform .18s; box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.kl-nope.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.kl-nope .mark { font-size: 88px; font-weight: 900; line-height: 1; }
.kl-nope .txt { font-size: 26px; font-weight: 800; margin-top: 6px; }
.kl-nope.good { background: rgba(138,201,38,.96); color: #143d00; }
.kl-feedback { min-height: 0; text-align: center; font-weight: 800; font-size: 20px; border-radius: 16px;
  margin: 6px auto 4px; max-width: 520px; padding: 0; transition: padding .15s; }
.kl-feedback.bad { background: #ffdede; color: #c0392b; padding: 8px 12px; }
.kl-feedback.good { background: #ddf5c4; color: #2f7d32; padding: 8px 12px; }
.kl-choice { position: relative; }
.kl-choice.wrong-mark::after { content: '✗'; position: absolute; top: 2px; right: 8px;
  font-size: 30px; font-weight: 900; color: #e03131; line-height: 1; }
.kl-choice.right-mark::after { content: '○'; position: absolute; top: 2px; right: 8px;
  font-size: 30px; font-weight: 900; color: #2f7d32; line-height: 1; }
.kl-choice.hintme { outline: 4px dashed #ffca3a; outline-offset: -4px; animation: hintpulse 1s infinite; }
@keyframes hintpulse { 0%,100% { background: #fff8e0; } 50% { background: #fff3c4; } }
@media (max-width: 760px) {
  .kl-nope { padding: 14px 24px; }
  .kl-nope .mark { font-size: 64px; }
  .kl-nope .txt { font-size: 20px; }
  .kl-feedback { font-size: 17px; }
  .kl-choice.wrong-mark::after, .kl-choice.right-mark::after { font-size: 22px; right: 5px; }
}

/* 지난번에 틀린 문제를 다시 낼 때 */
.kl-again { background: #ece6f5; color: #5b3c86; font-weight: 800; border-radius: 16px;
  padding: 6px 14px; text-align: center; margin: 0 auto 8px; max-width: 520px; font-size: 18px; }
@media (max-width: 760px) { .kl-again { font-size: 15px; padding: 5px 10px; } }

/* ---------- 읽기 앱 공통 ---------- */
.rd-pic { font-size: 110px; line-height: 1.1; text-align: center; }
.rd-word { font-size: 64px; font-weight: 900; text-align: center; letter-spacing: 4px; color: #2d2d2d; }
.rd-word .hl { color: #e0457b; }
.rd-word .gap, .rd-sentence .gap { display: inline-block; min-width: 1.1em; border-bottom: 6px dashed #b08fd8; color: #b08fd8; }
.rd-parts { text-align: center; font-size: 26px; font-weight: 800; color: #555; margin-top: 6px; }
.rd-parts b { color: #e0457b; }
.rd-choice-word { font-size: 40px; font-weight: 900; }
.rd-choice-pic { font-size: 56px; line-height: 1.1; }
.rd-choice-lbl { font-size: 18px; font-weight: 800; color: #555; }
/* 글자 카드 (낱말 만들기) */
.rd-slots { display: flex; gap: 10px; justify-content: center; margin: 12px 0 18px; flex-wrap: wrap; }
.rd-slot { width: 86px; height: 86px; border-radius: 20px; border: 4px dashed #c9b6e4; background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 50px; font-weight: 900; color: #333; }
.rd-slot.filled { border-style: solid; border-color: #8ac926; background: #f1fbe6; animation: pop .35s; }
.rd-tiles { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.rd-tile { width: 86px; height: 86px; border-radius: 20px; background: #fff3c4; font-size: 50px; font-weight: 900;
  box-shadow: 0 5px 0 rgba(0,0,0,.12); color: #333; }
.rd-tile.used { visibility: hidden; }
.rd-tile.wrong { background: #ffc9c9; animation: shake .4s; }
/* 문장·장면 */
.rd-sentence { font-size: 38px; font-weight: 900; text-align: center; line-height: 1.5; word-break: keep-all; }
.rd-sentence .w { display: inline-block; padding: 0 4px; border-radius: 10px; cursor: pointer; }
.rd-sentence .w.on { background: #fff3c4; }
@media (hover: hover) { .rd-sentence .w:hover { background: #fff3c4; } }
.rd-sentence .josa { color: #e0457b; }
.rd-scene { display: flex; align-items: flex-end; justify-content: center; gap: 6px; line-height: 1; }
.rd-scene.col { flex-direction: column; align-items: center; }
.rd-help { background: #e3f0ff; border-radius: 30px; padding: 8px 18px; font-size: 18px; font-weight: 800; min-height: 44px; }
@media (max-width: 760px) {
  .rd-pic { font-size: 84px; }
  .rd-word { font-size: 48px; letter-spacing: 2px; }
  .rd-parts { font-size: 20px; }
  .rd-choice-word { font-size: 30px; }
  .rd-choice-pic { font-size: 44px; }
  .rd-choice-lbl { font-size: 15px; }
  .rd-slot, .rd-tile { width: 66px; height: 66px; font-size: 38px; border-radius: 16px; }
  .rd-sentence { font-size: 28px; }
}
@media (max-height: 500px) {
  .rd-pic { font-size: 60px; }
  .rd-word { font-size: 38px; }
  .rd-slot, .rd-tile { width: 54px; height: 54px; font-size: 30px; }
  .rd-sentence { font-size: 24px; }
}

/* 그림 파일 아이콘 (한글·받침·한자 앱 머리말) */
.kl-svgicon { width: 1.2em; height: 1.2em; vertical-align: -0.22em; display: inline-block; }
/* 가로로 밀어도 브라우저 뒤로 가기가 되지 않게 (PC 터치패드·크롬) */
html, body { overscroll-behavior-x: none; }

/* 정답 뒤 짧은 설명 카드 (사자성어·속담·낱말 뜻·고전) */
.kl-explain { margin: 14px auto 0; max-width: 720px; background: #fff8e1; border-radius: 20px; padding: 14px 16px 12px; box-shadow: inset 0 0 0 2px #ffe08a; text-align: left; animation: kl-rise .25s ease-out; }
.kl-explain-body { font-size: 19px; font-weight: 700; line-height: 1.6; color: #3d2a00; word-break: keep-all; }
.kl-explain-body .ex-t { font-size: 22px; font-weight: 900; color: #2b2b2b; }
.kl-explain-body .ex-h { font-family: "Noto Serif KR", "Batang", serif; color: #6b4a12; margin-left: 6px; }
.kl-explain-body .ex-k { display: inline-block; background: #fff; border-radius: 10px; padding: 1px 8px; margin: 3px 4px 3px 0; font-size: 16px; color: #6b4a12; }
.kl-explain-body .ex-e { display: block; margin-top: 6px; background: #fff; border-radius: 12px; padding: 6px 10px; color: #1d4f7a; }
.kl-explain-next { display: block; margin: 12px 0 0 auto; min-width: 150px; }
@keyframes kl-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { .kl-explain-body { font-size: 16px; } .kl-explain-body .ex-t { font-size: 19px; } .kl-explain-body .ex-k { font-size: 14px; } }