/* AI 쿵쿵따 — 세 글자 끝말잇기 (2026-09-17) */
#kkt-wrap{position:relative;background:#141824;border-radius:16px;padding:14px;color:#fff;
  font-family:'Pretendard',sans-serif;user-select:none;-webkit-tap-highlight-color:transparent;overflow:hidden}
#kkt-stage{position:relative;display:flex;flex-direction:column;height:560px}
@media (max-width:720px){#kkt-stage{height:74dvh;min-height:430px}}

/* HUD */
.kk-hud{display:flex;gap:6px;justify-content:space-between;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.kk-chip{background:rgba(255,255,255,.08);border-radius:10px;padding:5px 11px;font-size:.86rem;font-weight:700}
.kk-chip b{margin-left:4px}
.kk-chip.round b{color:#7dd3fc}
.kk-chip.score b{color:#fbbf24}
.kk-chip.time b{color:#4ade80}
.kk-chip.time.hurry{background:rgba(239,68,68,.22)}
.kk-chip.time.hurry b{color:#fca5a5}
.kk-snd{margin-left:auto;background:rgba(255,255,255,.08);border:0;color:#fff;width:34px;height:34px;
  border-radius:50%;cursor:pointer;font-size:.95rem}
.kk-snd.off{opacity:.45}

/* 쿵·쿵·따 비트 */
.kk-beats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:10px}
.kk-beat{position:relative;height:30px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}
.kk-beat span{position:relative;z-index:2;display:block;line-height:30px;text-align:center;
  font-size:.82rem;font-weight:800;letter-spacing:2px;color:#cbd5e1}
.kk-beat i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,#6366f1,#a855f7);z-index:1}
.kk-beat.on i{background:linear-gradient(90deg,#f59e0b,#ef4444)}
.kk-beat.done i{width:100%!important;background:linear-gradient(90deg,#334155,#475569)}

/* 대화 */
.kk-log{flex:1;overflow-y:auto;padding:4px 2px 8px;display:flex;flex-direction:column;gap:8px}
.kk-row{display:flex;gap:7px;align-items:flex-end}
.kk-row.me{flex-direction:row-reverse}
.kk-who{flex:0 0 auto;font-size:.68rem;color:#94a3b8;padding-bottom:4px}
.kk-bub{max-width:74%;padding:9px 13px;border-radius:14px;font-size:1.02rem;font-weight:800;line-height:1.35;word-break:keep-all}
.kk-row.ai .kk-bub{background:#3b3160;border-bottom-left-radius:5px}
.kk-row.me .kk-bub{background:#0e4d5c;border-bottom-right-radius:5px}
.kk-cmt{display:block;margin-top:3px;font-size:.74rem;font-weight:500;color:#c4b5fd}
.kk-sys{align-self:center;font-size:.8rem;font-weight:700;color:#fbbf24;background:rgba(251,191,36,.12);
  border-radius:999px;padding:3px 12px}
.kk-sys.bad{color:#fca5a5;background:rgba(239,68,68,.14)}
.kk-dots{display:inline-flex;gap:4px;padding:11px 14px;background:#3b3160;border-radius:14px;border-bottom-left-radius:5px}
.kk-dots i{width:6px;height:6px;border-radius:50%;background:#c4b5fd;animation:kkBlink 1s infinite}
.kk-dots i:nth-child(2){animation-delay:.18s}.kk-dots i:nth-child(3){animation-delay:.36s}
@keyframes kkBlink{0%,60%,100%{opacity:.25}30%{opacity:1}}
.kk-rep{background:none;border:0;color:#94a3b8;font-size:.68rem;cursor:pointer;padding:2px 4px;text-decoration:underline}

/* 입력 */
.kk-need{text-align:center;font-size:.86rem;color:#cbd5e1;margin:2px 0 6px}
.kk-need b{color:#fde047;font-size:1.05rem}
.kk-input{display:flex;gap:6px}
.kk-field{position:relative;flex:1;min-width:0}
.kk-input input{width:100%;box-sizing:border-box;background:#1f2637;border:2px solid #334155;border-radius:11px;
  color:#fff;font-size:1.12rem;font-weight:800;padding:11px 13px;text-align:center;letter-spacing:3px}
.kk-input input:focus{outline:none;border-color:#6366f1}
.kk-input input::placeholder{color:#64748b;font-weight:600;letter-spacing:1px}

/* 깜빡이는 커서
   ★css/jiraksil.css:55 가 `input,textarea{caret-color:black !important}` 로 전역 강제한다★
     어두운 입력창에서는 기본 커서가 검정이라 아예 안 보인다(사용자가 "커서 깜빡임 추가"라고 한 진짜 이유).
     전역 규칙은 다른 페이지가 기대고 있을 수 있어 건드리지 않고 여기서만 !important 로 덮는다.
   ★입력 글자 자체는 절대 감추지 않는다★ — 값을 통째로 흉내 내면 한글 IME 가 조합 중인 글자를
     못 따라갈 때 화면이 비어 보인다. 그래서 유령층에는 '자리만 차지하는 투명 사본 + 커서'만 둔다.
     따라가기가 한 박자 늦어도 글자는 늘 보이고 커서 위치만 잠깐 어긋난다. */
.kk-field.kk-mirror input{caret-color:transparent !important}
.kk-ghost{display:none}
.kk-field.kk-mirror .kk-ghost{
  display:flex;align-items:center;justify-content:center;
  position:absolute;inset:0;padding:11px 13px;pointer-events:none;
  font-size:1.12rem;font-weight:800;letter-spacing:3px}
.kk-ghost span{visibility:hidden}                 /* 자리만 차지 — 실제 글자는 input 이 그린다 */
.kk-ghost span.kk-ph{font-weight:600;letter-spacing:1px}
.kk-caret{width:3px;height:1.35em;margin-left:1px;background:#fde047;border-radius:1px;
  animation:kkCaret 1.05s step-end infinite}
@keyframes kkCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.kk-caret{animation:none;opacity:.9}}
.kk-input button{flex:0 0 auto;background:linear-gradient(135deg,#6366f1,#a855f7);border:0;color:#fff;
  font-weight:900;font-size:1rem;padding:0 20px;border-radius:11px;cursor:pointer}
.kk-input button:disabled{opacity:.45;cursor:not-allowed}
.kk-give{display:block;margin:8px auto 0;background:none;border:0;color:#64748b;font-size:.78rem;
  text-decoration:underline;cursor:pointer}
.kk-shake{animation:kkShake .32s}
@keyframes kkShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* 오버레이 */
.kk-over{position:absolute;inset:0;background:rgba(15,18,28,.96);border-radius:14px;z-index:20;
  display:flex;align-items:center;justify-content:center;padding:18px;overflow-y:auto}
.kk-over[hidden]{display:none}
.kk-card{width:100%;max-width:360px;text-align:center}
.kk-emoji{font-size:3rem;line-height:1;margin-bottom:8px;display:block}
.kk-title{font-size:1.45rem;font-weight:900;margin-bottom:8px}
.kk-rule{font-size:.92rem;color:#cbd5e1;line-height:1.6;margin-bottom:14px;word-break:keep-all}
.kk-rule b{color:#fde047}
.kk-rule-sub{display:inline-block;margin-top:6px;font-size:.84rem;color:#94a3b8}
.kk-rule-sub b{color:#cbd5e1}
.kk-best{font-size:.82rem;color:#94a3b8;margin-bottom:12px}
.kk-btn{background:linear-gradient(135deg,#6366f1,#a855f7);border:0;color:#fff;font-weight:900;
  font-size:1.05rem;padding:13px 30px;border-radius:999px;cursor:pointer;box-shadow:0 6px 18px rgba(99,102,241,.4)}
.kk-btn:active{transform:translateY(2px)}
.kk-final{font-size:2.3rem;font-weight:900;color:#fbbf24;margin:6px 0}
.kk-grade{font-size:1.1rem;font-weight:800;margin-bottom:10px}
.kk-stats{font-size:.84rem;color:#cbd5e1;line-height:1.7;margin-bottom:14px}
.kk-new{display:inline-block;background:#f59e0b;color:#1c1917;font-weight:900;font-size:.76rem;
  border-radius:999px;padding:3px 12px;margin-bottom:10px}

/* 규칙 박스 — 전역 .answer_shadow(가운데·1.1em)를 눌러 준다 */
.kk-guide{text-align:left;line-height:1.7;margin-top:16px}
.kk-guide h3{font-size:1rem;margin:0 0 8px}
.kk-guide p{font-size:.88rem;margin:0 0 7px}
.kk-guide small{font-size:.78rem;color:#6b7280;display:block;margin-top:4px}