/* =====================================================================
   기본 자리연습 / 중급 약어연습 (steno-drill)
   - 키보드 하이라이트 규칙은 약어사전(abbr-dictionary.css)과 동일
   ===================================================================== */

/* ---------- 모드 전환 ---------- */
.sd-mode-switch { display:flex; gap:10px; margin:0 0 18px; flex-wrap:wrap; }
.sd-mode-btn {
  padding:10px 20px; border:1.5px solid #dfe3ee; border-radius:99px;
  background:#fff; color:#3a4155; font-size:15px; font-weight:700; cursor:pointer;
  transition:all .15s ease;
}
.sd-mode-btn:hover { border-color:#3EC9A0; color:#149a76; }
.sd-mode-btn.active { background:#149a76; color:#fff; border-color:#149a76; box-shadow:0 4px 12px rgba(20,154,118,.25); }

/* ---------- 단계/챕터 선택 ---------- */
.sd-group-card {
  border:1px solid #e3e6ee; border-radius:16px; background:#fff;
  padding:18px 20px; margin-bottom:20px;
}
.sd-group-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.sd-group-head h3 { margin:0; font-size:17px; }
.sd-options { display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.sd-opt { display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:#4a516a; font-weight:600; }
.sd-opt select { padding:5px 8px; border:1px solid #d7dbe6; border-radius:8px; font-size:13px; background:#fff; }
/* 요약 배지 */
.sd-group-summary {
  font-size:12.5px; font-weight:800; color:#128a6a;
  padding:4px 12px; border-radius:99px; background:#E3F8F0;
}

/* 이어서 연습 배너 */
.sd-continue {
  display:flex; align-items:center; gap:16px;
  padding:10px 18px 10px 14px; margin-bottom:16px;
  border:none; border-radius:20px;
  background:linear-gradient(105deg,#E9FBF4 0%,#F2FCF8 55%,#FDF1F5 100%);
}
.sd-continue-mascot {
  width:76px; height:auto; flex-shrink:0;
  filter:drop-shadow(0 4px 6px rgba(20,120,95,.18));
  transition:transform .2s ease;
}
.sd-continue:hover .sd-continue-mascot { transform:rotate(-4deg) scale(1.04); }
.sd-continue-bubble {
  position:relative; flex:1; min-width:0;
  display:flex; flex-direction:column; gap:2px;
  background:#fff; border-radius:16px; padding:10px 16px;
  box-shadow:0 3px 10px rgba(30,80,65,.08);
}
.sd-continue-bubble::before {
  content:''; position:absolute; left:-8px; top:50%; margin-top:-7px;
  border:7px solid transparent; border-right-color:#fff; border-left:0;
}
.sd-continue-bubble b { font-size:15px; color:#1d3a30; }
.sd-continue-bubble span { font-size:12.5px; color:#7a919a; }
.sd-continue-btn {
  flex-shrink:0; padding:10px 20px; border:none; border-radius:99px;
  background:#149a76; color:#fff; font-size:13.5px; font-weight:800; cursor:pointer;
  box-shadow:0 4px 12px rgba(20,154,118,.3);
  transition:all .14s ease;
}
.sd-continue-btn:hover { background:#0f8262; transform:translateY(-1px); }

/* 챕터/단계 카드 */
.sd-group-chips { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:12px; }
.sd-group-chip {
  display:flex; flex-direction:column; align-items:stretch; gap:6px; text-align:left;
  padding:14px 15px 13px; border:1.5px solid #e6e9f2; border-radius:18px; background:#fff;
  cursor:pointer; transition:all .14s ease;
}
.sd-group-chip:hover { border-color:#3EC9A0; box-shadow:0 6px 16px rgba(62,201,160,.16); transform:translateY(-2px); }
.sd-group-chip.is-done { border-color:#B9EBD8; background:#F5FCF9; }
.sd-chip-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.sd-chip-top b { font-size:15.5px; color:#26304a; }
.sd-chip-state { font-size:11.5px; font-weight:800; padding:3px 8px; border-radius:99px; white-space:nowrap; }
.sd-chip-state.new { color:#8b93ab; background:#f0f2f8; }
.sd-chip-state.acc { color:#149a76; background:#E3F8F0; }
.sd-chip-state.done { color:#0f8262; background:#D2F3E5; }
.sd-chip-preview {
  font-size:12.5px; color:#7a819a; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sd-chip-meta { display:flex; justify-content:space-between; font-size:11.5px; color:#a2a8bd; }
.sd-chip-bar { height:4px; border-radius:99px; background:#eef0f6; overflow:hidden; }
.sd-chip-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg,#3EC9A0,#149a76); }
.sd-group-chip.active { border-color:#20283c; }

/* ---------- 연습 존 ---------- */
.sd-zone {
  border:1px solid #e3e6ee; border-radius:16px; background:#fff;
  padding:14px 18px 18px; margin-bottom:20px;
}
.sd-status-row { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px; }
.sd-progress { font-weight:800; font-size:15px; color:#26304a; }
.sd-score { font-size:13.5px; color:#6a7188; }
.sd-score .ok { color:#1f9d6d; }
.sd-score .bad { color:#d64550; }
.sd-stop-btn {
  margin-left:auto; padding:6px 14px; border:1px solid #d7dbe6; border-radius:10px;
  background:#fff; color:#5a6178; font-size:13px; font-weight:600; cursor:pointer;
}
.sd-stop-btn:hover { border-color:#d64550; color:#d64550; }
.sd-progress-bar { height:5px; border-radius:99px; background:#eef0f6; overflow:hidden; margin-bottom:12px; }
.sd-progress-fill { height:100%; width:0; border-radius:99px; background:linear-gradient(90deg,#5f85e8,#2faf89); transition:width .25s ease; }

.sd-target-card {
  border:1.5px solid #e6e9f2; border-radius:14px; background:#fafbfe;
  padding:14px 14px 8px; text-align:center; margin-bottom:10px;
  transition:border-color .15s ease, background .15s ease;
}
.sd-target-card.flash-ok { border-color:#2faf89; background:#f0fbf7; }
.sd-target-card.flash-bad { border-color:#d64550; background:#fef4f5; }
.sd-target {
  font-size:clamp(48px, 6vw, 72px); font-weight:800; color:#1d2436;
  letter-spacing:.02em; line-height:1.15; word-break:keep-all;
}
.sd-feedback { min-height:16px; margin-top:2px; font-size:12.5px; font-weight:700; }
.sd-feedback.ok { color:#1f9d6d; }
.sd-feedback.bad { color:#d64550; }

.sd-input {
  width:100%; max-width:640px; margin:0 auto 10px; display:block; box-sizing:border-box; padding:12px 18px; font-size:36px; text-align:center;
  border:2px solid #d7dbe6; border-radius:14px; outline:none; background:#fff;
  transition:border-color .15s ease;
}
.sd-input:focus { border-color:#5f85e8; }

/* ---------- 키보드 ---------- */
.sd-keyboard-wrap {
  border:none; border-radius:24px; background:#ECEEF8;
  padding:16px 20px; overflow:hidden; max-width:90%; margin:0 auto;
}
#keyboardMount svg { max-height:52vh; }
#keyboardMount { display:block; }
#keyboardMount svg { width:100%; height:auto; display:block; }
.sd-kb-error { margin:0; text-align:center; color:#8b93ab; font-size:14px; }

/* 키 하이라이트 — 참고 디자인(흰 키 + 부드러운 그림자, 테두리 없음) */
#keyboardMount .steno-key .keycap { transition:fill .16s ease, stroke .16s ease; }
#keyboardMount .steno-key:not(.is-selected):not([data-selected="true"]) .keycap {
  fill:#FFFFFF !important; stroke:transparent !important; stroke-width:0 !important;
  filter:drop-shadow(0 4px 7px rgba(30, 39, 80, .13)) !important;
}
#keyboardMount .steno-key.is-selected[id^="key_l_"] .keycap,
#keyboardMount .steno-key[data-selected="true"][id^="key_l_"] .keycap {
  fill:#DFE1FB !important; stroke:#8B8FF0 !important; stroke-width:3 !important;
  filter:drop-shadow(0 4px 7px rgba(97, 103, 220, .22)) !important;
}
#keyboardMount .steno-key.is-selected[id^="key_r_"] .keycap,
#keyboardMount .steno-key[data-selected="true"][id^="key_r_"] .keycap {
  fill:#ECDFFA !important; stroke:#AA80E8 !important; stroke-width:3 !important;
  filter:drop-shadow(0 4px 7px rgba(140, 92, 220, .22)) !important;
}
#keyboardMount .steno-key.is-selected[id^="key_thumb_"] .keycap,
#keyboardMount .steno-key[data-selected="true"][id^="key_thumb_"] .keycap {
  fill:#DDF4E7 !important; stroke:#63C295 !important; stroke-width:3 !important;
  filter:drop-shadow(0 4px 7px rgba(48, 160, 105, .22)) !important;
}
#keyboardMount .key-label { fill:#1D2436 !important; }

/* ---------- 결과 ---------- */
.sd-result {
  border:1px solid #e3e6ee; border-radius:16px; background:#fff;
  padding:24px 20px; margin-bottom:20px; text-align:center;
}
.sd-result h3 { margin:0 0 18px; font-size:20px; }
.sd-result-stats { display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-bottom:18px; }
.sd-result-stat { display:flex; flex-direction:column; gap:2px; min-width:74px; }
.sd-result-stat .num { font-size:26px; font-weight:800; color:#26304a; }
.sd-result-stat .num.ok { color:#1f9d6d; }
.sd-result-stat .num.bad { color:#d64550; }
.sd-result-stat .lbl { font-size:12.5px; color:#8b93ab; }
.sd-result-wrong { text-align:left; border-top:1px dashed #e3e6ee; padding-top:14px; margin-bottom:16px; }
.sd-result-wrong h4 { margin:0 0 10px; font-size:14px; color:#5a6178; }
.sd-result-wrong-list { display:flex; flex-wrap:wrap; gap:8px; }
.sd-wrong-chip {
  padding:5px 12px; border:1px solid #f2c8cc; border-radius:99px;
  background:#fef4f5; color:#b8323d; font-size:14px; font-weight:600;
}
.sd-result-actions { justify-content:center; }

/* ---------- 모바일 ---------- */
@media (max-width: 640px) {
  .sd-group-chips { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
  .sd-continue { flex-wrap:wrap; justify-content:center; text-align:center; }
  .sd-continue-bubble::before { display:none; }
  .sd-target { font-size:clamp(36px, 11vw, 56px); }
  .sd-input { font-size:26px; }
  .sd-keyboard-wrap { padding:8px; }
}


/* ---------- 입문 자료 바로가기 ---------- */
.sd-resources { display:flex; gap:12px; margin:0 0 18px; flex-wrap:wrap; }
.sd-resource-card {
  flex:1; min-width:260px; display:flex; align-items:center; gap:12px;
  padding:12px 16px; border-radius:16px; text-decoration:none;
  border:1.5px solid transparent; transition:all .15s ease;
}
.sd-resource-card.video { background:#EEF2FF; border-color:#DCE3FB; }
.sd-resource-card.plan { background:#E9FBF4; border-color:#CBEFDF; }
.sd-resource-card:hover { transform:translateY(-1px); box-shadow:0 5px 14px rgba(40,60,110,.1); }
.sd-resource-icon { font-size:24px; flex-shrink:0; }
.sd-resource-copy { display:flex; flex-direction:column; gap:1px; min-width:0; }
.sd-resource-copy b { font-size:14.5px; color:#26304a; }
.sd-resource-copy span { font-size:12px; color:#7a819a; }
.sd-resource-arrow { margin-left:auto; font-weight:800; color:#9aa2ba; }
.sd-resource-card.video:hover .sd-resource-arrow { color:#5b3df0; }
.sd-resource-card.plan:hover .sd-resource-arrow { color:#149a76; }

/* ---------- 연습 중 컴팩트 모드 ---------- */
body.sd-playing .page-header,
body.sd-playing .sd-mode-switch,
body.sd-playing .sd-group-card,
body.sd-playing .sd-resources { display:none !important; }
body.sd-playing .sd-zone { margin-top:0; }