/* 또또스쿨 단계 도전 도구(RK) 공통 모양 */
.rk-top { display: flex; align-items: center; gap: 10px; padding: 10px 12px 0; }
.rk-dots { display: flex; gap: 6px; flex-wrap: nowrap; }
.rk-dot { font-style: normal; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; font-weight: 800; background: rgba(255,255,255,.6); color: #7a8a98; border: 3px solid rgba(255,255,255,.9); flex: none; }
.rk-dot.cur { background: #fff; color: #2b63c4; border-color: #2b63c4; }
.rk-dot.ok { background: #ffd84d; color: #6a4a00; border-color: #e0a800; }
.rk-hearts { margin-left: auto; font-size: 22px; letter-spacing: 2px; white-space: nowrap; }
.rk-hearts i { font-style: normal; display: inline-block; transition: opacity .3s, transform .3s; }
.rk-hearts i.gone { opacity: .25; filter: grayscale(1); transform: scale(.8); }
.rk-map { width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); box-shadow: 0 3px 8px rgba(0,0,0,.15); font-size: 22px; cursor: pointer; flex: none; }
.rk-map:focus-visible { outline: 4px solid #ffd84d; outline-offset: 3px; }
.rk-ask { text-align: center; padding: 6px 12px 0; font-family: var(--sp-font-display); font-size: clamp(19px, 3.3vh, 30px); color: #1f3550; word-break: keep-all; line-height: 1.3; }
.rk-ask small { display: inline-block; font-family: var(--sp-font-body); font-weight: 800; font-size: 14px; color: #fff; background: #2b63c4; border-radius: 999px; padding: 2px 12px; margin-bottom: 4px; }
.rk-ask b { color: #e5484d; font-weight: 400; }
.rk-note { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); background: #fff8e0; border: 3px solid #e0a040; color: #5a3410; border-radius: 16px; padding: 6px 14px; font-weight: 800; font-size: clamp(15px, 2.4vh, 20px); text-align: center; max-width: calc(100% - 20px); box-shadow: 0 4px 12px rgba(0,0,0,.12); pointer-events: none; word-break: keep-all; z-index: 3; animation: rk-in .25s ease-out; }
.rk-note.ok { background: #fff4c2; border-color: #d4a000; }
.rk-note[hidden] { display: none; }
.rk-note small { display: block; font-size: 13px; font-weight: 700; opacity: .85; }
@keyframes rk-in { from { transform: translate(-50%, -6px); opacity: 0; } }
.rk-ctrl { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px max(12px, env(safe-area-inset-bottom)); flex-wrap: wrap; }
.rk-ctrl button { min-width: 56px; min-height: 54px; border: 0; border-radius: 16px; background: #fff; color: #1f3550; font-weight: 800; font-size: 18px; box-shadow: 0 4px 0 #b9cfe2; cursor: pointer; font-family: var(--sp-font-body); padding: 0 10px; }
.rk-ctrl button:active { transform: translateY(3px); box-shadow: 0 1px 0 #b9cfe2; }
.rk-ctrl button:disabled { opacity: .45; cursor: default; transform: none; }
.rk-ctrl button:focus-visible { outline: 4px solid #ffd84d; outline-offset: 3px; }
.rk-val { min-width: 150px; text-align: center; background: #1f3550; color: #fff; border-radius: 16px; padding: 6px 14px; font-family: var(--sp-font-num, var(--sp-font-display)); font-weight: 800; font-size: clamp(22px, 3.6vh, 30px); line-height: 1.15; }
.rk-val small { display: block; font-family: var(--sp-font-body); font-size: 12px; font-weight: 700; opacity: .8; }
.rk-ctrl .rk-go { background: #ff7a3d; color: #fff; box-shadow: 0 5px 0 #c4501c; font-size: 21px; min-width: 130px; min-height: 60px; }
.rk-ctrl .rk-go:active { box-shadow: 0 1px 0 #c4501c; }
.hk-toast.rk-toast { top: 30%; }
@media (max-width: 640px) {
  .rk-ctrl { gap: 6px; }
  .rk-ctrl button { min-width: 48px; font-size: 16px; }
  .rk-val { min-width: 118px; }
  .rk-ctrl .rk-go { flex: 1 1 100%; order: 9; }
  .rk-dot { width: 26px; height: 26px; font-size: 13px; }
}
@media (max-height: 520px) {
  /* 낮은 가로 화면: 위쪽 막대를 문제 줄 양옆에 겹쳐 놓아 놀이 칸을 넓혀요 */
  .rk-top { position: absolute; left: 0; right: 0; top: 0; z-index: 4; padding-top: 6px; pointer-events: none; }
  .rk-top > * { pointer-events: auto; }
  .rk-ask { padding-left: 190px !important; padding-right: 190px !important; min-height: 50px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0 8px; }
  .rk-ask br { display: none; }
  .rk-dot { width: 26px; height: 26px; font-size: 13px; }
  .rk-ask { font-size: 17px; padding-top: 2px; } .rk-ask small { font-size: 12px; margin-bottom: 0; }
  .rk-ctrl { padding: 4px 10px 8px; } .rk-ctrl button { min-height: 48px; } .rk-ctrl .rk-go { min-height: 50px; }
  .rk-val { font-size: 20px; padding: 3px 10px; }
}
/* 끌어 놓기 */
.rk-ghost { position: fixed; z-index: 9999; pointer-events: none; margin: 0; opacity: .92; box-shadow: 0 12px 26px rgba(0,0,0,.28) !important; transition: none !important; }
.rk-dragging { opacity: .35; }
.rk-picked { outline: 4px solid #ffb02e !important; outline-offset: 2px; transform: translateY(-4px); }
.rk-over { outline: 4px dashed #2fae6b !important; outline-offset: 3px; }
.rk-picking [data-rk-slot] { animation: rk-blink 1s ease-in-out infinite; }
@keyframes rk-blink { 50% { filter: brightness(1.08); } }
@media (prefers-reduced-motion: reduce) { .rk-picking [data-rk-slot] { animation: none; } }