/* lesson-lv2.css — Level 2 Word Study */

/* CATEGORY FILTER */
.cat-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.cat-btn {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid #e4eaf3;
  background: #f4f7fb;
  color: #666;
  cursor: pointer;
  transition: all 0.15s;
}
.cat-btn.on { background: #185FA5; color: #fff; border-color: #185FA5; }
.cat-btn:hover:not(.on) { border-color: #378ADD; color: #185FA5; }

/* WORD GRID */
.word-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

/* WORD CARD */
.word-card {
  background: #f4f7fb;
  border: 1px solid #e4eaf3;
  border-radius: 12px;
  padding: 16px 10px 12px;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s, background 0.15s;
}
.word-card:hover  { border-color: #378ADD; background: #f0f6ff; }
.word-card.active { border: 2px solid #185FA5; background: #E6F1FB; }

.word-kr  { font-size: 22px; color: #185FA5; font-weight: 700; line-height: 1.2; }
.word-rom { font-size: 11px; color: #378ADD; margin-top: 4px; }
.word-eng { font-size: 11px; color: #888; margin-top: 3px; }
.word-cat { font-size: 10px; color: #bbb; margin-top: 5px; }

.word-speak-btn {
  position: absolute;
  top: 4px; right: 4px;
  width: 18px; height: 18px;
  background: none; border: none;
  font-size: 11px; cursor: pointer;
  color: #9bbcdc; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  transition: color 0.15s, transform 0.1s;
}
.word-speak-btn:hover { color: #185FA5; transform: scale(1.2); }
.word-speak-btn.playing { color: #D85A30; animation: pulse 0.5s infinite alternate; }

/* WORD DETAIL BOX */
.word-detail {
  background: #E6F1FB;
  border: 1px solid #B5D4F4;
  border-radius: 10px;
  padding: 18px 20px;
  margin-top: 14px;
  display: none;
  align-items: center;
  gap: 20px;
}
.word-detail.show { display: flex; }
.wd-left { display: flex; flex-direction: column; align-items: center; gap: 10px; min-width: 80px; }
.wd-big  { font-size: 42px; color: #185FA5; font-weight: 700; line-height: 1; text-align: center; }
.wd-speak-btn {
  background: #185FA5; color: #fff; border: none;
  border-radius: 8px; padding: 6px 14px;
  font-size: 12px; cursor: pointer; white-space: nowrap;
  transition: background 0.15s;
}
.wd-speak-btn:hover { background: #0C447C; }
.wd-speak-btn.playing { background: #D85A30; }
.wd-info { flex: 1; }
.wd-eng  { font-size: 20px; font-weight: 700; color: #042C53; margin-bottom: 6px; }
.wd-rom  { font-size: 14px; color: #378ADD; margin-bottom: 8px; }
.wd-cat  { font-size: 12px; color: #888; }

/* LISTEN TAB */
.listen-box { text-align: center; }
.listen-prompt { font-size: 13px; color: #888; margin-bottom: 16px; }
.listen-play-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #185FA5; color: #fff; border: none;
  border-radius: 10px; padding: 14px 32px;
  font-size: 15px; cursor: pointer; margin-bottom: 24px;
  transition: background 0.15s;
}
.listen-play-btn:hover { background: #0C447C; }
.listen-play-btn.playing { background: #D85A30; }
.listen-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 480px; margin: 0 auto; }
.listen-opt {
  background: #f4f7fb; border: 1px solid #e4eaf3;
  border-radius: 10px; padding: 14px;
  text-align: center; cursor: pointer;
  font-size: 14px; color: #1a1a2e;
  transition: all 0.15s;
}
.listen-opt:hover  { border-color: #378ADD; background: #E6F1FB; }
.listen-opt.correct { background: #EAF3DE; border-color: #639922; color: #27500A; font-weight: 600; }
.listen-opt.wrong   { background: #FCEBEB; border-color: #E24B4A; color: #501313; }

/* SHARED QUIZ STYLES (reused from level1) */
.lv2-result { text-align: center; margin-top: 14px; font-size: 14px; font-weight: 600; min-height: 22px; }
.lv2-result.ok { color: #3B6D11; }
.lv2-result.no { color: #A32D2D; }
.lv2-next {
  display: none; margin: 14px auto 0;
  background: #185FA5; color: #fff; border: none;
  padding: 10px 24px; border-radius: 8px;
  font-size: 14px; cursor: pointer;
  transition: background 0.15s;
}
.lv2-next:hover { background: #0C447C; }
.lv2-next.show  { display: block; }

/* QUIZ TAB */
.quiz-word-display {
  font-size: 48px; color: #185FA5; font-weight: 700;
  text-align: center; margin: 16px 0 6px;
  line-height: 1.2;
}
.quiz-word-rom { font-size: 16px; color: #378ADD; text-align: center; margin-bottom: 20px; }
.quiz-word-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-word-opt {
  background: #f4f7fb; border: 1px solid #e4eaf3;
  border-radius: 10px; padding: 14px;
  text-align: center; cursor: pointer;
  font-size: 14px; color: #1a1a2e;
  transition: all 0.15s;
}
.quiz-word-opt:hover  { border-color: #378ADD; background: #E6F1FB; }
.quiz-word-opt.correct { background: #EAF3DE; border-color: #639922; color: #27500A; font-weight: 600; }
.quiz-word-opt.wrong   { background: #FCEBEB; border-color: #E24B4A; color: #501313; }

/* SCORE */
.lv2-score-row { display: flex; gap: 20px; justify-content: center; margin-top: 16px; }
.lv2-score-item { text-align: center; }
.lv2-score-num  { font-size: 22px; font-weight: 700; }
.lv2-score-lbl  { font-size: 11px; color: #888; margin-top: 2px; }
.score-ok { color: #3B6D11; }
.score-no { color: #A32D2D; }