/* ---------- 한글 확인 퀴즈 (k-check) ----------
   우주 장면 위에 네온 테두리 문제 카드, 그 아래 보기 카드 3장. 문제를 읽어 주는 동안 보기는 흐리게 */
.ck { width: min(760px, 100%); display: flex; flex-direction: column; align-items: center; gap: 22px; }
.ck-dots { display: flex; gap: 6px; justify-content: center; }
.ck-dots i {
  width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, .28);
  display: grid; place-items: center; font-style: normal; font-size: 10px; color: #fff; transition: transform .2s;
}
.ck-dots i.now { background: #F4F18A; box-shadow: 0 0 0 3px rgba(244, 241, 138, .3); }
.ck-dots i.ok { background: #2FCF9B; }
.ck-dots i.ok::after { content: "✓"; }
.ck-dots i.miss { background: #F08A8A; }
.ck-dots i.miss::after { content: "·"; }

.ck-card {
  position: relative; width: 100%; min-height: 170px; padding: 22px 26px;
  display: flex; align-items: center; justify-content: center; gap: 26px;
  border: 3px solid #39C9A7; border-radius: 10px;
  background: rgba(40, 32, 92, .55);
  box-shadow: 0 0 0 3px rgba(97, 136, 255, .35), 0 0 22px rgba(57, 201, 167, .45), inset 0 0 18px rgba(57, 201, 167, .2);
}
.ck-card.enter { animation: ck-in .35s ease-out; }
@keyframes ck-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.ck-say {
  flex: none; width: 70px; height: 70px; border-radius: 50%; border: 0; cursor: pointer;
  font-size: 32px; background: #F4F18A; box-shadow: 0 0 0 6px rgba(244, 241, 138, .2);
}
.ck-say.on { background: #2FDDA8; animation: ck-glow 1s ease-in-out infinite; }
@keyframes ck-glow { 50% { box-shadow: 0 0 0 12px rgba(47, 221, 168, .25); } }
.ck-line, .ck-ask { margin: 0; color: #fff; font-family: var(--font-display); font-size: 34px; line-height: 1.4; display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ck-ask { color: rgba(255, 255, 255, .7); font-size: 24px; }
.ck-blank { display: inline-flex; gap: 4px; margin: 0 4px; }
.ck-blank i { width: 34px; height: 34px; border: 3px solid #F4F18A; border-radius: 6px; background: rgba(0, 0, 0, .25); }
.ck-card.pic { padding: 14px; }
.ck-pic {
  display: grid; place-items: center; min-width: 190px; height: 140px; padding: 0 22px; font-size: 84px; line-height: 1;
  background: #FFFBF0; border-radius: 46% 54% 42% 58% / 56% 44% 56% 44%;
}

.ck-opts { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; transition: opacity .25s; }
.ck-opts.is-sentence { grid-template-columns: 1fr; gap: 10px; max-width: 560px; }
.ck-opts.wait { opacity: .5; pointer-events: none; }
.ck-opts.wait .ck-opt { background: #CDB8E6; color: rgba(51, 38, 77, .4); box-shadow: none; }
.ck-opt {
  position: relative; min-height: 104px; border: 0; border-radius: 16px; cursor: pointer;
  background: #FFFBF0; color: var(--ink); font-family: var(--font-display); font-size: 32px;
  box-shadow: 0 6px 0 rgba(0, 0, 0, .18); transition: transform .12s;
}
.ck-opt.is-pic { font-size: 62px; }
.ck-opt.is-glyph { font-size: 52px; }
.ck-opt.is-sentence { min-height: 54px; font-size: 22px; border-radius: 12px; padding: 8px 18px; }
.ck-opt:hover { transform: translateY(-2px); }
.ck-opt.ok { outline: 4px solid #2FCF9B; outline-offset: 2px; }
.ck-opt.ok::before {
  content: "✓"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: #2FCF9B; color: #fff; font-size: 28px; animation: pop .35s;
}
.ck-opt.is-sentence.ok::before { left: 30px; width: 30px; height: 30px; font-size: 18px; }
.ck-opt.show:not(.is-sentence)::before { opacity: .9; }
.ck-opt.miss { opacity: .55; animation: wiggle .4s; }
.ck-opt.miss::after { content: "✕"; position: absolute; right: 10px; top: 6px; font-size: 20px; color: #D9534F; }

@media (max-width: 560px) {
  .ck-card { flex-direction: column; gap: 14px; padding: 18px 14px; min-height: 140px; }
  .ck-line { font-size: 26px; justify-content: center; }
  .ck-blank i { width: 28px; height: 28px; }
  .ck-opts { gap: 10px; }
  .ck-opt { min-height: 84px; font-size: 24px; }
  .ck-opt.is-pic { font-size: 48px; }
  .ck-opt.is-sentence { font-size: 18px; }
}

/* 보상 화면의 확인 퀴즈 결과 */
.check-result {
  display: flex; flex-direction: column; gap: 4px; margin: 6px auto 0; max-width: 360px; padding: 10px 16px;
  border-radius: 16px; background: #FFF1DC; color: var(--ink);
}
.check-result b { font-family: var(--font-display); font-size: 22px; }
.check-result span { font-size: 15px; color: var(--ink-soft); }
.check-result.pass { background: #DFF7EC; }

/* 한글 차시 판: 확인 퀴즈까지 남은 날 */
.check-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 15px; color: var(--ink-soft); }
.check-row small { color: var(--ink-faint); }
.check-days { display: inline-flex; gap: 5px; }
.check-days i {
  width: 24px; height: 24px; border-radius: 50%; border: 2px dashed var(--line, #DDD); font-style: normal;
  display: grid; place-items: center; font-size: 13px;
}
.check-days i.on { background: var(--hangul, #EE6C5F); border: 2px solid var(--hangul, #EE6C5F); }
.check-days i.now { border-style: solid; border-color: var(--hangul, #EE6C5F); }