/* 한국어 교실 연습장 — 밝고 순한 교실 색. 빽빽하게 (유영수 님 지침) */

.kpgm-ko { max-width: 900px; margin: 0 auto; }
.kpgm-ko__h { margin: 6px 0 10px; }
.kpgm-ko__h2 { margin: 18px 0 4px; font-size: 16px; }
.kpgm-ko__note { margin: 4px 0 8px; font-size: 12.5px; color: #7a756c; }

/* 장면 고르기 */
.kpgm-ko__pick { display: flex; gap: 10px; flex-wrap: wrap; }
.kpgm-ko__card {
  flex: 1 1 180px; min-width: 160px; padding: 18px 10px 14px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 1px solid #dfe5e1; border-radius: 14px; background: #fff; cursor: pointer;
  font: inherit;
}
.kpgm-ko__card:hover { border-color: #1f5c46; box-shadow: 0 4px 14px rgba(31,92,70,.12); }
.kpgm-ko__cardmoji { font-size: 44px; line-height: 1; }
.kpgm-ko__card small { color: #7a756c; }

/* 위 줄 */
.kpgm-ko__top { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; }
.kpgm-ko__where { font-size: 16px; }

.kpgm-ko__chip {
  height: 28px; padding: 0 11px; font: inherit; font-size: 12.5px; cursor: pointer;
  border: 1px solid #dfe5e1; border-radius: 8px; background: #fff;
}
.kpgm-ko__chip:hover:not(:disabled) { border-color: #1f5c46; }
.kpgm-ko__chip:disabled { opacity: .45; cursor: not-allowed; }

/* ── 무대 — 라이브2D 전의 「애니메이션 삽화」 판 ──
   삽화(자료실 그림)가 있으면 그것을 깔고, 없으면 CSS 무대가 선다 */
.kpgm-ko__stage {
  position: relative; min-height: 300px; border-radius: 16px; overflow: hidden;
  background-size: cover; background-position: center;
  border: 1px solid #dfe5e1;
  display: flex; align-items: flex-end; padding: 18px;
}
.kpgm-ko__stage--store   { background: linear-gradient(180deg, #dff0ff 0 55%, #f6ead2 55%); }
.kpgm-ko__stage--food    { background: linear-gradient(180deg, #ffe9d8 0 55%, #e8d5bd 55%); }
.kpgm-ko__stage--airport { background: linear-gradient(180deg, #dfe9ff 0 60%, #e6e8ee 60%); }
.kpgm-ko__stage--hospital { background: linear-gradient(180deg, #e8f4ef 0 55%, #f2f2f0 55%); }
.kpgm-ko__stage--market   { background: linear-gradient(180deg, #fff1d6 0 55%, #ead9c0 55%); }
.kpgm-ko__stage--church   { background: linear-gradient(180deg, #f3e9ff 0 55%, #e8e0d2 55%); }
.kpgm-ko__stage.has-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,.25));
}

/* 캐릭터 — 살아 있는 척: 둥실둥실 + 말할 때 맥동 */
.kpgm-ko__char {
  position: relative; z-index: 2;
  width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; background: #fff; border: 3px solid #1f5c46;
  box-shadow: 0 8px 20px rgba(0,0,0,.18);
  animation: kpgmKoBob 3.2s ease-in-out infinite;
}
@keyframes kpgmKoBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.kpgm-ko__char.is-talking { animation: kpgmKoTalk .5s ease-in-out infinite; }
@keyframes kpgmKoTalk { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* 말풍선 */
.kpgm-ko__bubble {
  position: relative; z-index: 2; margin: 0 0 26px 14px; max-width: 70%;
  padding: 12px 16px; border-radius: 14px 14px 14px 4px;
  background: #fff; border: 1px solid #dfe5e1; box-shadow: 0 6px 16px rgba(0,0,0,.14);
  font-size: 16px; line-height: 1.6;
}

/* 교정·힌트 */
.kpgm-ko__aid { min-height: 8px; margin: 8px 2px; }
.kpgm-ko__fix  { margin: 4px 0; font-size: 13.5px; color: #1f5c46; }
.kpgm-ko__hint { margin: 4px 0; font-size: 13.5px; color: #7a5c1e; }

/* 말하는 줄 */
.kpgm-ko__row { display: flex; gap: 6px; margin: 6px 0 2px; }
.kpgm-ko__in {
  flex: 1; height: 40px; padding: 0 12px; font: inherit; font-size: 15px;
  border: 1px solid #dfe5e1; border-radius: 10px;
}
.kpgm-ko__in:focus { outline: none; border-color: #1f5c46; }
.kpgm-ko__send {
  height: 40px; padding: 0 18px; font: inherit; font-weight: 700; cursor: pointer;
  border: 0; border-radius: 10px; background: #1f5c46; color: #fff;
}
.kpgm-ko__send:disabled { opacity: .45; cursor: not-allowed; }

/* 문장 연습 */
.kpgm-ko__lines { display: flex; flex-direction: column; gap: 4px; }
.kpgm-ko__line {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 7px 10px; border: 1px solid #eceeeb; border-radius: 10px; background: #fff;
}
.kpgm-ko__linetxt { flex: 1 1 240px; font-size: 15px; }
.kpgm-ko__score { font-size: 12.5px; }
.kpgm-ko__score .good { color: #1f5c46; }
.kpgm-ko__score .soso { color: #a07a1e; }
.kpgm-ko__score .bad  { color: #b4432c; }
.kpgm-ko__score small { color: #8a857c; margin-left: 4px; }

@media (max-width: 640px) {
  .kpgm-ko__stage { min-height: 230px; padding: 12px; }
  .kpgm-ko__char { width: 72px; height: 72px; font-size: 40px; }
  .kpgm-ko__bubble { max-width: 100%; font-size: 15px; }
}

/* ── 0.2.0 — 발음 연습 강화 ── */
.kpgm-ko__btns { display: inline-flex; gap: 5px; flex-wrap: wrap; }
.kpgm-ko__line { flex-wrap: wrap; }
.kpgm-ko__score { flex: 1 1 100%; line-height: 1.6; }
.kpgm-ko__score b.good { color: #1f5c46; }
.kpgm-ko__score b.soso { color: #a07a1e; }
.kpgm-ko__score b.bad  { color: #b4432c; }
.kpgm-ko__linetxt b { font-weight: 600; }
.kpgm-ko__linetxt b.hit  { color: #1f5c46; }
.kpgm-ko__linetxt b.miss { color: #b4432c; text-decoration: underline wavy #b4432c 1.5px; }
.kpgm-ko__chip--pay { border-color: #c9a24a; color: #7a5c1e; }
.kpgm-ko__dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  background: #d33; animation: kpgmKoBlink .8s ease-in-out infinite;
}
@keyframes kpgmKoBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.kpgm-ko__card.has-art {
  background-size: cover; background-position: center; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,.75);
}
.kpgm-ko__card.has-art small { color: #eee; }