/* 영단어(시험관리 › 영단어) — 단어장·출제·채점·진도 관리.
   PC(index.html)와 폰(mobile.html)이 **같은 화면 코드**(src/ui/vocab*.js)를 쓰므로 모양도 한 벌이다.
   원래 styles.css 에 있던 것을 떼어 냈다(2026-09-25). 폰에서의 배치는 맨 아래 «좁은 화면» 절.
   변수(--primary-color 등)는 styles.css 와 mobile.css 가 같은 이름으로 정의한다. */

/* ─── 영단어 단어장(시험관리 › 영단어) ───────────────────────────────
   보기 전용 화면이다. 책 → Day → 단어 세 걸음이고, 되돌아가는 길은 서브탭 줄
   자리의 [뒤로] 가 맡는다(examTabsUI). 2026-09-12 이관. */
.vocab-head { margin-bottom: 14px; }
.vocab-head h2 { margin: 0; font-size: 17px; font-weight: 800; }
.vocab-head h2 span { font-size: 13px; font-weight: 600; color: var(--text-muted); margin-left: 4px; }
.vocab-head p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }

.vocab-sec { margin-bottom: 16px; }
.vocab-sec-title { font-size: 12.5px; font-weight: 800; color: var(--text-muted); margin-bottom: 6px; }
.vocab-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.vocab-book {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 12px 14px; text-align: left; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 10px;
  transition: border-color .12s, background-color .12s;
}
.vocab-book:hover { border-color: var(--primary-color); background: var(--primary-light); }
.vocab-book-name { font-size: 13.5px; font-weight: 700; color: var(--text-main); }
.vocab-book-meta { font-size: 11.5px; color: var(--text-muted); }

.vocab-search { position: relative; margin-bottom: 12px; max-width: 420px; }
.vocab-search i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--text-muted); }
.vocab-search input {
  width: 100%; box-sizing: border-box; padding: 9px 12px 9px 34px; font-size: 13px;
  border: 1px solid var(--border-color); border-radius: 8px;
  background: var(--bg-color); color: var(--text-main);
}
.vocab-search input:focus { outline: none; border-color: var(--primary-color); }

.vocab-days { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.vocab-day {
  display: flex; align-items: center; gap: 6px; padding: 9px 11px; cursor: pointer; text-align: left;
  background: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px;
}
.vocab-day:hover { border-color: var(--primary-color); background: var(--primary-light); }
.vocab-day-label { font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.vocab-day-title { font-size: 11px; color: var(--text-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.vocab-day-count { margin-left: auto; font-size: 11px; color: var(--text-muted); }

.vocab-hit-note { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; }
.vocab-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 10px; }
.vocab-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.vocab-table th {
  position: sticky; top: 0; z-index: 1;
  padding: 8px 10px; text-align: left; font-size: 11.5px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-color); border-bottom: 1px solid var(--border-color); white-space: nowrap;
}
.vocab-table td { padding: 8px 10px; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.vocab-table tr:last-child td { border-bottom: 0; }
.vocab-w { font-weight: 700; white-space: nowrap; }
.vocab-s { color: var(--text-muted); line-height: 1.6; }
.vocab-s b { color: var(--primary-color); }
.vocab-t { display: block; margin-top: 2px; font-size: 11.5px; opacity: 0.85; }
.vocab-none { color: var(--text-muted); opacity: 0.6; }
.vocab-link {
  padding: 0; background: transparent; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 700; color: var(--primary-color); white-space: nowrap;
}
.vocab-empty { padding: 40px 0; text-align: center; font-size: 13px; color: var(--text-muted); }
.vocab-empty span { font-size: 12px; }

/* ─── 영단어 시험 출제 ─── */

.vt-form { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.vt-f { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; }
.vt-f-sm { flex: 0 0 110px; }
.vt-f > span { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.vt-f input {
  padding: 7px 9px; font-size: 13px; border: 1px solid var(--border-color);
  border-radius: 8px; background: var(--card-bg); color: var(--text-main);
}

/* 첫 화면 머리 — 제목·설명과 [단어장] [새 시험 만들기] */
.vt-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.vt-top h2, .vt-wz-head h2, .vg-top h2 { margin: 0; font-size: 18px; font-weight: 800; }
.vt-sub { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }
.vt-top-acts { display: flex; gap: 8px; align-items: center; }
.vt-ibtn { display: inline-flex; align-items: center; gap: 5px; }
.vt-ibtn svg { width: 15px; height: 15px; }
/* .xc-modal-ok 는 height 고정이라 위아래 padding 을 주면 글자가 아래로 밀린다 — 높이로 키운다. */
.vt-big { height: 36px; padding: 0 16px; }
.vt-x { border: 0; background: transparent; color: var(--text-muted); cursor: pointer; display: inline-flex; padding: 2px; }
.vt-x svg { width: 16px; height: 16px; color: inherit; }

.vt-sec { margin-bottom: 22px; }
.vt-sec-head {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 8px;
  font-size: 13.5px; font-weight: 800;
}
.vt-sec-head em {
  font-style: normal; font-size: 11.5px; font-weight: 700; padding: 0 7px; border-radius: 999px;
  background: var(--border-color); color: var(--text-muted);
}
.vt-emptybox {
  padding: 22px; text-align: center; font-size: 13px; color: var(--text-muted);
  border: 1px dashed var(--border-color); border-radius: 12px;
}

/* 채점할 시험 카드 — 제목·설정 / 제출 막대 / 단추 */
.vt-card {
  display: grid; grid-template-columns: minmax(0, 1fr) 220px auto; align-items: center; gap: 18px;
  padding: 14px 16px; margin-bottom: 8px;
  border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg);
}
.vt-card-main { min-width: 0; }
/* 출제 선생님 배지(vocabTestUI.whoBadge) — 카드·줄 맨 앞. */
.vt-with-who { display: flex; align-items: center; gap: 12px; }
.vt-card-text { min-width: 0; flex: 1; }
.vt-who {
  flex: none; min-width: 54px; height: 36px; padding: 0 9px; border-radius: 10px; box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  /* 선생님마다 색(--who-h, vocabTestUI.whoHue). 없으면 강조색 계열. */
  background: hsl(var(--who-h, 235) 85% 93%); color: hsl(var(--who-h, 235) 60% 32%);
  border: 1px solid hsl(var(--who-h, 235) 60% 82%);
  font-size: 12.5px; font-weight: 800; white-space: nowrap; letter-spacing: -.2px;
}
[data-theme="dark"] .vt-who:not(.is-none) {
  background: hsl(var(--who-h, 235) 35% 22%); color: hsl(var(--who-h, 235) 80% 80%); border-color: hsl(var(--who-h, 235) 35% 32%);
}
.vt-who.is-none { background: var(--bg-color); color: var(--text-muted); font-weight: 600; border-color: var(--border-color); }
.vt-done .vt-who { min-width: 50px; height: 30px; border-radius: 8px; font-size: 12px; }
.vt-card-title { font-size: 14.5px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-card-meta { margin-top: 3px; font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-meter { height: 6px; border-radius: 999px; background: var(--border-color); overflow: hidden; }
.vt-meter span { display: block; height: 100%; border-radius: inherit; background: var(--primary-color); }
.vt-stat-text { margin-top: 5px; font-size: 12px; color: var(--text-muted); }
.vt-stat-text b { color: var(--text-main); font-size: 13px; }
.vt-stat-warn { color: #b45309; font-weight: 700; }
.vt-card-acts { display: flex; align-items: center; gap: 6px; }
.vt-badge {
  font-style: normal; margin-left: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 800;
  background: #fff; color: var(--primary-color);
}
.vt-ico { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; color: var(--text-muted); }
.vt-ico svg { width: 15px; height: 15px; }

/* 끝난 시험 — 한 줄씩 */
.vt-donebox { border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); overflow: hidden; }
.vt-done { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 14px; padding: 10px 16px; }
.vt-done + .vt-done { border-top: 1px solid var(--border-color); }
.vt-done-title { font-size: 13.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-avg { font-size: 12px; color: var(--text-muted); text-align: right; }
.vt-avg b { color: var(--text-main); font-size: 13.5px; }
.vt-next-test { color: var(--primary-color); border: 1px solid var(--primary-color); font-weight: 700; }
.vt-more { margin-top: 8px; }
/* 폰: 끝난 시험을 날짜별로 접는다 */
.vt-dday + .vt-dday { margin-top: 6px; }
.vt-dday-head {
  display: flex; align-items: center; gap: 6px; width: 100%; padding: 10px 12px;
  border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-bg);
  color: var(--text-main); font: inherit; font-size: 13.5px; text-align: left; cursor: pointer;
}
.vt-dday-head svg { width: 16px; height: 16px; color: var(--text-muted); transition: transform .15s; flex: 0 0 auto; }
.vt-dday.is-open .vt-dday-head svg { transform: rotate(90deg); }
.vt-dday-head em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--text-muted); }
.vt-dday.is-open .vt-dday-head { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.vt-dday.is-open .vt-donebox { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; }

/* 새 시험 머리 */
.vt-wz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

.vt-warn.vt-bad { border-color: #fca5a5; background: rgba(239, 68, 68, .08); }
.vt-warn .xc-mini { flex-shrink: 0; white-space: nowrap; align-self: center; margin-left: auto; }
.vt-warn.vt-bad svg { color: #dc2626; }
.vt-tag { margin-left: 8px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.vt-tag-warn { background: rgba(250, 204, 21, .22); color: #92400e; }
.vt-tag-bad { background: rgba(239, 68, 68, .12); color: #b91c1c; }
/* 단어장을 다 뗀 학생의 안내 — 누르면 진도 바꾸기 창(vocabTestUI.fixProgress). */
.vt-donebtn {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(245, 158, 11, .45); background: rgba(245, 158, 11, .12); color: #b45309;
  font: inherit; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.vt-donebtn:hover { background: rgba(245, 158, 11, .22); }
.vt-donebtn svg { width: 13px; height: 13px; flex: none; }
.vt-donebtn.vt-tag-bad { border-color: rgba(239, 68, 68, .4); }
.vt-donebtn.vt-tag-bad:hover { background: rgba(239, 68, 68, .2); }
.vt-range .vt-donebtn { margin-left: 8px; }
.vt-row.is-short { box-shadow: inset 3px 0 0 #f0c36d; }
.vt-row.is-bad { box-shadow: inset 3px 0 0 #ef4444; }

@media (max-width: 820px) {
  .vt-card { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vt-done { grid-template-columns: minmax(0, 1fr) auto; }
  .vt-done .vt-card-acts { grid-column: 1 / -1; }
}

/* ─── 채점 화면 ─── */
.vg-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vg-top p { margin: 4px 0 0; font-size: 12.5px; color: var(--text-muted); }
.vg-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 110px)) minmax(0, 1fr); gap: 8px; margin-bottom: 18px; }
.vg-stat {
  padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-bg);
  display: flex; flex-direction: column; gap: 2px;
}
.vg-stat span { font-size: 11.5px; font-weight: 700; color: var(--text-muted); }
.vg-stat b { font-size: 20px; font-weight: 800; }
.vg-stat small { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.vg-stat.is-warn { border-color: #f0c36d; background: rgba(250, 204, 21, .12); }
.vg-stat.is-warn b { color: #b45309; }
.vg-stat-act { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 4px; }
.vg-stat-act span { font-size: 11.5px; color: var(--text-muted); }
.vg-finish { height: 38px; padding: 0 18px; }
.vg-sec { margin-bottom: 20px; }
.vg-sec-help { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.vg-queue { border: 1px solid var(--border-color); border-radius: 12px; background: var(--card-bg); overflow: hidden; }
/* 열은 **내용 폭만큼** 붙여 둔다 — 1fr 로 늘리면 넓은 PC 화면에서 단어·쓴 답·정답·O/X 가
   멀리 떨어져 한 줄을 눈으로 따라가기 어려웠다(2026-09-24). 남는 폭은 오른쪽에 둔다. */
.vg-qrow {
  display: grid; grid-template-columns: 110px minmax(120px, 260px) minmax(90px, 180px) minmax(90px, 220px) auto;
  justify-content: start; align-items: center; gap: 14px; padding: 8px 14px; font-size: 13px;
}
.vg-qrow + .vg-qrow { border-top: 1px solid var(--border-color); }
.vg-qhead { font-size: 11.5px; font-weight: 700; color: var(--text-muted); padding-top: 7px; padding-bottom: 7px; }
.vg-qrow.is-unsure { background: rgba(250, 204, 21, .10); }
/* 키보드로 고른 줄(↑↓·O/X, v884) */
.vg-qrow.is-kb { box-shadow: inset 3px 0 0 var(--primary-color); background: rgba(59, 130, 246, .08); }
.vg-kb-help { display: inline-block; margin-left: 6px; white-space: nowrap; }
.vg-kb-help kbd { display: inline-block; min-width: 16px; padding: 0 4px; margin: 0 1px; border: 1px solid var(--border-color);
  border-bottom-width: 2px; border-radius: 4px; font: 700 10.5px/15px inherit; text-align: center; background: var(--card-bg); }
.vt-made-extra { font-style: normal; color: #b45309; }
.vg-qname { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vg-qname small { font-weight: 500; color: var(--text-muted); }
.vg-qask { min-width: 0; overflow-wrap: anywhere; }
.vg-qmine { font-weight: 800; overflow-wrap: anywhere; }
.vg-qmine i { font-weight: 400; color: var(--text-muted); }
.vg-qans { color: var(--text-muted); overflow-wrap: anywhere; }
.vg-ox.vg-o.is-on { background: #16a34a; border-color: #16a34a; }
.vg-ox.vg-x.is-on { background: #dc2626; border-color: #dc2626; }
.vg-waiting { margin-bottom: 8px; font-size: 12.5px; color: var(--text-muted); }
@media (max-width: 820px) {
  .vg-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vg-stat-act { grid-column: 1 / -1; align-items: stretch; }
  .vg-qrow { grid-template-columns: minmax(0, 1fr) auto; }
  .vg-qhead { display: none; }
  .vg-qname, .vg-qask, .vg-qmine, .vg-qans { grid-column: 1; }
  .vg-qrow .vg-q-btns { grid-column: 2; grid-row: 1 / span 4; }
}

/* 걸음 표시. 지난 걸음은 눌러서 되돌아간다. */
.vt-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; list-style: none; margin: 0 0 18px; padding: 0; }
.vt-steps button {
  width: 100%; display: grid; grid-template-columns: 26px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 8px; align-items: center; padding: 8px 10px; text-align: left;
  border: 0; border-top: 3px solid var(--border-color); background: transparent; color: var(--text-muted);
  cursor: pointer;
}
.vt-steps button:disabled { cursor: default; }
.vt-step-no {
  grid-row: span 2; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12.5px; font-weight: 800; background: var(--border-color); color: var(--text-muted);
}
.vt-step-no svg { width: 14px; height: 14px; }
.vt-step-label { font-size: 13px; font-weight: 700; }
.vt-step-sum { font-size: 11.5px; min-height: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-steps .is-done button { border-top-color: var(--primary-color); color: var(--text-main); }
.vt-steps .is-done .vt-step-no { background: var(--primary-light); color: var(--primary-color); }
.vt-steps .is-done button:hover .vt-step-label { color: var(--primary-color); }
.vt-steps .is-now button { border-top-color: var(--primary-color); color: var(--text-main); }
.vt-steps .is-now .vt-step-no { background: var(--primary-color); color: #fff; }

.vt-body { min-height: 260px; }
.vt-q { font-size: 15px; font-weight: 800; margin-bottom: 12px; }

/* 아래 이동 줄 — 긴 명단에서도 [다음] 이 늘 보이게 바닥에 붙인다. */
.vt-nav {
  position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 12px;
  margin-top: 16px; padding: 12px 0; background: var(--bg-color); border-top: 1px solid var(--border-color);
}
.vt-nav-hint { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 12.5px; color: var(--text-muted); }
.vt-prev, .vt-next { display: inline-flex; align-items: center; gap: 4px; }
.vt-prev svg, .vt-next svg { width: 16px; height: 16px; }
.vt-next { height: 36px; padding: 0 18px; }

.vt-made {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 14px;
  border-radius: 10px; background: var(--primary-light); font-size: 13px;
}
.vt-made > span { flex: 1 1 auto; }
.vt-made svg { width: 18px; height: 18px; color: var(--primary-color); flex-shrink: 0; }

.vt-listbar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }

.vt-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.vt-cards-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vt-kind small {
  margin-left: 4px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700;
  background: var(--primary-color); color: #fff; vertical-align: 1px;
}
.vt-manualbox {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; margin-bottom: 12px;
  border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-bg); font-size: 13px;
}
/* [다시 고르기] 가 좁은 화면에서 «다시 / 고르기» 두 줄로 꺾이던 것(2026-10-03) — 글 쪽이 줄어들고 단추는 한 줄 그대로. */
.vt-manual-what { flex: 1 1 auto; min-width: 0; }
.vt-manual-what .vt-sethelp { display: block; margin-top: 2px; }
.vt-nowrap { flex: 0 0 auto; white-space: nowrap; }
.vt-pickwords { margin-bottom: 12px; }

/* 자유 시험 ② 학생별 범위 */
.vt-free { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.vt-free-what { flex: 1 1 160px; min-width: 0; font-size: 12.5px; }
.vt-free-what.is-none { color: var(--warning-color); }
.vt-free-acts { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.vt-seg { padding: 4px 9px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer; border-radius: 999px;
  border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-muted); }
.vt-seg.is-on { border-color: var(--primary-color); background: var(--primary-light); color: var(--primary-color); }
.vt-range-fixed .vt-plus { margin-left: 6px; padding: 2px 8px; font-size: 11px; vertical-align: 1px; }
/* 단어 고르기 창의 PLUS단어 표시 — [전체 선택] 에서 빠진다 */
.vw-plus { font-style: normal; font-size: 10px; font-weight: 800; color: var(--text-muted); border: 1px solid var(--border-color);
  border-radius: 4px; padding: 0 4px; margin-left: 4px; vertical-align: 1px; }
.vw-plus-note { display: block; margin-top: 2px; font-size: 11.5px; color: var(--text-muted); }

.vt-setrows { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-bg); }
.vt-setrow { display: flex; align-items: center; gap: 12px; padding: 10px 14px; flex-wrap: wrap; }
.vt-setrow + .vt-setrow { border-top: 1px solid var(--border-color); }
.vt-setlabel { flex: 0 0 72px; font-size: 13px; font-weight: 700; }
.vt-setrow > input {
  width: 80px; padding: 6px 8px; font-size: 13px; text-align: center; border: 1px solid var(--border-color);
  border-radius: 8px; background: var(--card-bg); color: var(--text-main);
}
.vt-toggles { display: inline-flex; gap: 6px; }
.vt-sethelp { font-size: 12px; color: var(--text-muted); }
/* 칸 제목 옆 ? — 폰에서만 보인다(설명 줄 대신 눌러서 쪽지). PC 는 설명 줄을 그대로 둔다. */
.vt-help {
  display: none; align-items: center; justify-content: center; width: 22px; height: 22px; margin-left: 2px; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted); cursor: pointer; vertical-align: middle;
}
.vt-help svg { width: 15px; height: 15px; }

.vt-facts { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.vt-facts span {
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: var(--primary-light); color: var(--primary-color);
}
.vt-foot-note { margin-top: 8px; font-size: 12px; color: var(--text-muted); }

.vt-kind {
  display: flex; flex-direction: column; gap: 3px; padding: 10px;
  border: 1px solid var(--border-color); border-radius: 10px;
  background: var(--card-bg); color: var(--text-main); cursor: pointer; text-align: left;
}
.vt-kind b { font-size: 13.5px; }
.vt-kind span { font-size: 11.5px; color: var(--text-muted); line-height: 1.35; }
.vt-kind:hover { border-color: var(--primary-color); }
.vt-kind.is-on { border-color: var(--primary-color); background: var(--primary-light); }

.vt-warn {
  display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid #f0c36d; border-radius: 10px; background: rgba(250, 204, 21, .12);
  font-size: 12.5px; line-height: 1.5;
}
.vt-warn i { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; color: #b8860b; }

.vt-count { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }

.vt-list { display: flex; flex-direction: column; gap: 4px; }
/* 머리 줄과 학생 줄이 **같은 격자**를 쓴다 — 칸마다 min-width 로 폭을 잡던 때는
   이름 길이에 따라 칸이 밀려 머리의 «문항»·«합격» 과 입력칸이 어긋났다.
   g1 = ① 대상, g2 = ② 범위, g4 = ④ 확인. */
.vt-g1, .vt-g2, .vt-g4 { display: grid; align-items: center; column-gap: 12px; }
.vt-g1 { grid-template-columns: 18px 96px 110px minmax(0, 1fr); }
.vt-g2 { grid-template-columns: 96px 110px minmax(0, 1fr); }
.vt-g4 { grid-template-columns: 96px 110px minmax(0, 1fr) 62px 62px; }
/* ④ 에 Day 칸이 붙는 진도 시험 */
.vt-g4.vt-g4d { grid-template-columns: 96px 110px minmax(0, 1fr) 54px 62px 62px; }
.vt-row {
  padding: 8px 12px;
  border: 1px solid var(--border-color); border-radius: 9px; background: var(--card-bg);
}
label.vt-row { cursor: pointer; }
label.vt-row:hover { border-color: var(--primary-color); }
.vt-prog { font-size: 12.5px; color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-prog.is-none { color: #b45309; }
.vt-row.is-on { border-color: var(--primary-color); background: var(--primary-light); }
/* 진도를 아직 안 정한 학생. 고르기 전에 눈에 띄어야 한다. 테두리를 굵히면 줄 안의
   칸이 2px 밀려 머리와 어긋나므로 안쪽 그림자로 긋는다. */
.vt-row.is-new { box-shadow: inset 3px 0 0 #f0c36d; }
.vt-name { font-size: 13.5px; font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-grade { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vt-range { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vt-book {
  flex: 1 1 auto; min-width: 0; max-width: 230px; padding: 5px 7px; font-size: 12.5px;
  border: 1px solid var(--border-color); border-radius: 7px;
  background: var(--card-bg); color: var(--text-main);
}
.vt-day { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); }
.vt-day input {
  width: 58px; padding: 5px 6px; font-size: 12.5px; text-align: center;
  border: 1px solid var(--border-color); border-radius: 7px;
  background: var(--card-bg); color: var(--text-main);
}
/* ④ 학생별 «+plus 단어» 넣기 — 켜면 인디고(강조색)로 채운다. 기본은 꺼짐(2026-10-03 ② 에서 ④ 로 옮김). */
.vt-plus {
  flex: 0 0 auto; padding: 5px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; cursor: pointer;
  border: 1px solid var(--border-color); border-radius: 999px; background: var(--card-bg); color: var(--text-muted);
}
.vt-plus.is-on { border-color: var(--primary-color); background: var(--primary-color); color: #fff; }

.vt-del:hover { color: var(--danger-color, #dc2626); border-color: var(--danger-color, #dc2626); }

/* 학생 고르기 필터 — 학년·반 둘. PC 는 자리가 넉넉하니 폰처럼 시트를 열지 않고
   칩을 늘어놓는다. */
.vt-filter {
  display: flex; flex-direction: column; gap: 6px; padding: 9px 11px; margin-bottom: 10px;
  border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-bg);
}
.vt-frow { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.vt-flabel { flex: 0 0 34px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.vt-chip {
  padding: 4px 11px; font-size: 12px; border: 1px solid var(--border-color);
  border-radius: 999px; background: var(--card-bg); color: var(--text-main); cursor: pointer;
}
.vt-chip:hover { border-color: var(--primary-color); }
.vt-chip.is-on { border-color: var(--primary-color); background: var(--primary-light); font-weight: 700; color: var(--primary-color); }

@media (max-width: 820px) {
  .vt-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vt-steps { gap: 4px; }
  .vt-step-sum { display: none; }
  .vt-g1 { grid-template-columns: 18px 70px 80px minmax(0, 1fr); column-gap: 6px; }
  .vt-g2 { grid-template-columns: 70px 80px minmax(0, 1fr); column-gap: 6px; }
  .vt-g4 { grid-template-columns: 70px 80px minmax(0, 1fr) 54px 54px; column-gap: 6px; }
  .vt-g4.vt-g4d { grid-template-columns: 70px 80px minmax(0, 1fr) 46px 54px 54px; }
  .vt-range { flex-wrap: wrap; gap: 4px; }
}

/* ─── 영단어: 출제 추가 옵션 ─── */
.vt-mix {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 9px 11px; margin-bottom: 10px;
  border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-bg);
}
.vt-mix-label { font-size: 12px; font-weight: 700; color: var(--text-muted); }
.vt-mix-f { display: flex; align-items: center; gap: 5px; font-size: 12.5px; }
.vt-mix-f input {
  width: 56px; padding: 5px 6px; font-size: 12.5px; text-align: center;
  border: 1px solid var(--border-color); border-radius: 7px;
  background: var(--card-bg); color: var(--text-main);
}
.vt-mix-f input:disabled { background: var(--bg-hover); color: var(--text-muted); opacity: .6; cursor: not-allowed; }
.vt-mix-sum { font-size: 12px; font-weight: 700; color: var(--text-muted); }
/* 합계가 문항 수와 다르면 눈에 띄게 — 막지는 않는다(모자라면 고르게 채운다). */
.vt-mix-sum.is-off { color: #b45309; }

.vt-toggle {
  padding: 6px 12px; font-size: 12.5px; border: 1px solid var(--border-color);
  border-radius: 999px; background: var(--card-bg); color: var(--text-main); cursor: pointer;
}
.vt-toggle.is-on { border-color: var(--primary-color); background: var(--primary-light); font-weight: 700; }

/* 줄의 padding(12px)+테두리(1px)만큼 안으로 들여 격자가 줄과 겹치게 한다. */
.vt-listhead {
  padding: 0 13px 5px; font-size: 11.5px;
  font-weight: 700; color: var(--text-muted);
}
.vt-listhead .vt-c { text-align: center; }
.vt-ov {
  width: 100%; box-sizing: border-box; padding: 5px 6px; font-size: 12.5px; text-align: center;
  border: 1px dashed var(--border-color); border-radius: 7px;
  background: transparent; color: var(--text-main);
}
.vt-ov:focus { border-style: solid; }
.vt-range-fixed { min-width: 0; font-size: 12.5px; color: var(--text-muted); }

/* 단어 고르기 창 */
.xc-modal-words { max-width: 640px; width: 100%; }
.vw-bar { display: flex; gap: 8px; padding: 6px 0 10px; flex-wrap: wrap; }
.vw-bar select, .vw-bar input {
  padding: 7px 9px; font-size: 13px; border: 1px solid var(--border-color);
  border-radius: 8px; background: var(--card-bg); color: var(--text-main);
}
.vw-bar input { flex: 1 1 140px; }
.vw-list {
  max-height: 46vh; max-height: 46dvh; overflow: auto; border: 1px solid var(--border-color);
  border-radius: 10px; padding: 4px;
}
.vw-row {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: 7px; font-size: 13px; cursor: pointer;
}
.vw-row:hover { background: var(--primary-light); }
.vw-row.is-on { background: var(--primary-light); }
.vw-w { font-weight: 700; min-width: 116px; }
.vw-m { flex: 1 1 auto; min-width: 0; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vw-d { font-size: 11.5px; color: var(--text-muted); }

/* ─── 영단어: 채점·검수 ─── */
.vg-list { display: flex; flex-direction: column; gap: 6px; }
.vg-row { border: 1px solid var(--border-color); border-radius: 10px; background: var(--card-bg); overflow: hidden; }
.vg-row.is-open { border-color: var(--primary-color); }
.vg-sum {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  background: none; border: 0; color: var(--text-main); cursor: pointer; text-align: left;
}
.vg-sum i { width: 16px; height: 16px; color: var(--text-muted); }
.vg-name { font-size: 14px; font-weight: 700; min-width: 76px; }
.vg-range { flex: 1 1 auto; min-width: 0; font-size: 12px; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-score { font-size: 15px; font-weight: 800; }
.vg-score.is-pass { color: #15803d; }
.vg-score.is-fail { color: #b91c1c; }
.vg-detail { font-size: 12px; color: var(--text-muted); }
.vg-wait { font-size: 12.5px; color: var(--text-muted); }
.vg-unsure-n {
  font-size: 11.5px; font-weight: 700; color: #b45309;
  background: rgba(250, 204, 21, .18); padding: 2px 7px; border-radius: 999px;
}
.vg-done { font-size: 11.5px; font-weight: 700; color: #15803d;
  background: rgba(34, 197, 94, .14); padding: 2px 7px; border-radius: 999px; }
.vg-parked { margin-left: 6px; }

.vg-detail-box { border-top: 1px solid var(--border-color); padding: 8px 12px 12px; }
.vg-qs { display: flex; flex-direction: column; gap: 2px; }
.vg-q {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px;
  border-radius: 7px; font-size: 13px;
}
/* 맞은 것은 조용히, 틀린 것과 애매한 것만 눈에 들어오게. */
.vg-q.is-right { color: var(--text-muted); }
.vg-q.is-wrong { background: rgba(239, 68, 68, .08); }
.vg-q.is-unsure { background: rgba(250, 204, 21, .16); }
.vg-detail-box.only-wrong .vg-q.is-right { display: none; }
.vg-q-no { flex: 0 0 22px; text-align: right; font-size: 11.5px; color: var(--text-muted); }
.vg-q-ask { flex: 1 1 34%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vg-q-mine { flex: 1 1 28%; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.vg-q-ans { flex: 1 1 28%; min-width: 0; color: var(--text-muted); overflow-wrap: anywhere; }
.vg-q-btns { flex: 0 0 auto; display: flex; gap: 4px; }
.vg-ox {
  width: 28px; height: 26px; font-size: 12px; font-weight: 800;
  border: 1px solid var(--border-color); border-radius: 7px;
  background: var(--card-bg); color: var(--text-muted); cursor: pointer;
}
.vg-ox.is-on { color: #fff; background: var(--primary-color); border-color: var(--primary-color); }
.vg-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

@media (max-width: 820px) {
  .vg-q { flex-wrap: wrap; }
  .vg-q-ask, .vg-q-mine, .vg-q-ans { flex: 1 1 100%; white-space: normal; }
}

/* 종이로 채점 */
.vg-paper { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: var(--border-color); color: var(--text-muted); }
.vg-paper-start { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vg-paper-start p { flex: 1 1 240px; margin: 0; font-size: 13px; color: var(--text-muted); }
.vg-paper-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.vg-paper-bar label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.vg-paper-bar input {
  width: 180px; padding: 6px 9px; font-size: 13px; border: 1px solid var(--border-color);
  border-radius: 8px; background: var(--card-bg); color: var(--text-main);
}
.vg-waiting span { margin-left: 4px; }

/* 학생 줄: [요약 단추 | 진도 단추] — 진도는 펼치지 않고 바꾼다. 펼친 내용은 두 칸을 다 쓴다. */
.vg-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.vg-row > .vg-detail-box { grid-column: 1 / -1; }

/* AI 추천 — 규칙의 «확인할 답» 과 따로 둔 영역. 도는 동안엔 자리만 잡는다. */
.vg-ai-sec .vt-sec-head { align-items: center; }
.vg-ai-badge {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px;
  font-size: 12.5px; font-weight: 800; background: rgba(99, 102, 241, .12); color: var(--primary-color);
}
.vg-ai-badge svg { width: 13px; height: 13px; }
.vg-ai-wait {
  display: flex; align-items: center; gap: 8px; padding: 14px 16px; font-size: 13px; color: var(--text-muted);
  border: 1px dashed var(--border-color); border-radius: 12px;
}
.vg-ai-wait svg { width: 15px; height: 15px; animation: vg-spin 1.2s linear infinite; }
@keyframes vg-spin { to { transform: rotate(360deg); } }
.vg-ai-chip svg { width: 11px; height: 11px; margin-right: 2px; vertical-align: -1px; }
.vg-ai-chip {
  display: inline-flex; align-items: center; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle;
}
.vg-ai-chip.is-o { background: rgba(22, 163, 74, .12); color: #15803d; }
.vg-ai-chip.is-x { background: rgba(239, 68, 68, .10); color: #b91c1c; }
.vt-tag-re { background: rgba(99, 102, 241, .12); color: var(--primary-color); }
.vt-tag-plus { background: var(--primary-color); color: #fff; }
.vg-absent { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: rgba(239, 68, 68, .10); color: #b91c1c; }
/* 진도 관리 — 보이는 학생에게 한꺼번에 */
.vt-bulk {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 12px; margin-bottom: 12px;
  border: 1px dashed var(--border-color); border-radius: 10px; font-size: 13px;
}
.vt-bulk select {
  padding: 5px 7px; font-size: 12.5px; border: 1px solid var(--border-color); border-radius: 7px;
  background: var(--card-bg); color: var(--text-main); max-width: 230px;
}
.vg-done-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-muted); }
.vg-done-note svg { width: 15px; height: 15px; color: #16a34a; }
.vg-dirty-note { font-size: 12.5px; font-weight: 700; color: #b45309; }

/* 성적 탭 › 영어 학습성과 — 영단어 시험 기록 표(vocabRecordsUI) */
.vr-sort { cursor: pointer; user-select: none; }
.vr-row { cursor: pointer; }
.vr-row:hover td { background: var(--bg-hover); }
.vr-legacy td { color: var(--text-muted); }
.vr-sub { display: block; font-size: 11.5px; color: var(--text-muted); }
.vr-range { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.vr-tag { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(99, 102, 241, .12); color: var(--primary-color); }
.vr-pass { font-size: 12px; font-weight: 700; color: #15803d; }
.vr-fail { font-size: 12px; font-weight: 700; color: #b91c1c; }
.vr-total td { font-size: 12.5px; font-weight: 700; color: var(--text-muted); background: var(--bg-hover); }
.vr-modal { max-width: 640px; width: 100%; }
.vr-words { max-height: 60vh; max-height: 60dvh; overflow: auto; border: 1px solid var(--border-color); border-radius: 10px; margin: 10px 0; }
.vr-w {
  display: grid; grid-template-columns: 30px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr) 56px;
  gap: 10px; align-items: center; padding: 6px 12px; font-size: 13px;
}
.vr-w + .vr-w { border-top: 1px solid var(--border-color); }
.vr-whead { font-size: 11.5px; font-weight: 700; color: var(--text-muted); position: sticky; top: 0; background: var(--card-bg); }
.vr-w.is-x { background: rgba(239, 68, 68, .06); }
.vr-mine { font-weight: 700; }
.vr-mine i { font-weight: 400; color: var(--text-muted); }
.vr-ans { color: var(--text-muted); }
.vr-ox { text-align: center; font-weight: 800; }
.vr-w.is-o .vr-ox { color: #15803d; }
.vr-w.is-x .vr-ox { color: #b91c1c; }
.vr-ox small { display: block; font-size: 10px; font-weight: 600; color: var(--text-muted); }

/* 진도 — 두 단추 중 하나 고르기 */
.vg-adv-wrap { display: inline-flex; align-items: center; gap: 6px; margin-right: 10px; }
.vg-adv-seg { display: inline-flex; padding: 2px; gap: 2px; border-radius: 9px; background: var(--border-color); }
.vg-adv-seg button {
  padding: 4px 9px; font-size: 12px; font-weight: 600; white-space: nowrap; border: 0; border-radius: 7px;
  background: transparent; color: var(--text-muted); cursor: pointer;
}
.vg-adv-seg button small { margin-left: 4px; font-size: 10px; font-weight: 600; opacity: .7; }
.vg-adv-seg button.is-on { background: var(--card-bg); color: var(--text-main); font-weight: 800; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.vg-adv-seg button.is-on:first-child { color: #15803d; }
.vg-adv-seg button.is-on:last-child { color: #b45309; }
.vg-refinish { height: 28px; padding: 0 10px; font-size: 12px; }
/* 진도가 이 시험 자리에 없어 단추가 쓸모없을 때 — 까닭은 쪽지(data-tip) */
.vg-adv-fixed {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 9px;
  background: var(--border-color); color: var(--text-muted); font-size: 12px; font-weight: 600; white-space: nowrap; cursor: help;
}

/* 학생별 문항 줄도 붙여 둔다 */
.vg-q {
  display: grid; grid-template-columns: 24px minmax(120px, 280px) minmax(90px, 180px) minmax(90px, 220px) auto;
  justify-content: start; align-items: center; gap: 14px;
}
.vg-q .vg-q-ask, .vg-q .vg-q-mine, .vg-q .vg-q-ans { flex: none; }
@media (max-width: 820px) {
  .vg-q { display: flex; flex-wrap: wrap; }
  .vg-q .vg-q-ask, .vg-q .vg-q-mine, .vg-q .vg-q-ans { flex: 1 1 100%; white-space: normal; }
  .vg-adv-wrap { margin: 0 8px 8px; }
}

/* 새 시험 — 종류 고르기 */
.vt-choose .vt-kind { padding: 20px; gap: 6px; }
.vt-choose .vt-kind > svg { width: 22px; height: 22px; color: var(--primary-color); margin-bottom: 4px; }
.vt-choose .vt-kind b { font-size: 15px; }
.vt-choose .vt-kind span { font-size: 12.5px; }
.vt-kind-tag { margin-left: 6px; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--primary-light); color: var(--primary-color); vertical-align: 2px; }
.vt-pickwords { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 18px; border: 1px dashed var(--border-color); border-radius: 12px; }
.vt-pickwords p { flex: 1 1 240px; margin: 0; font-size: 13px; color: var(--text-muted); }
.vr-time { margin-left: 6px; font-size: 11.5px; color: var(--text-muted); }
.vt-kind.is-off { opacity: .5; cursor: not-allowed; background: var(--bg-hover); }
.vt-kind.is-off:hover { border-color: var(--border-color); }
.vt-kind-warn { font-style: normal; font-size: 11px; font-weight: 700; color: #b45309; margin-top: 2px; }

/* 새 시험 종류 셋 · 동명이인 · 혼합 배분 · 채점 머리 단추 */
.vt-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 820px) { .vt-cards-3 { grid-template-columns: minmax(0, 1fr); } }
.vt-dup { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.vt-mixb { display: block; font-size: 11.5px; color: var(--text-muted); margin-top: 2px; }
.vt-mixb em { font-style: normal; color: #b45309; font-weight: 700; }
.vg-top-acts { display: inline-flex; gap: 6px; align-items: center; }

/* 단어 확인·고르기 창(재시험 다시 볼 단어 · 혼합 직접 고르기) — 단어장·Day 별 구분선 */
.vt-panel { max-width: 640px; width: 100%; }
.vt-pk-list { max-height: 58vh; max-height: 58dvh; overflow: auto; border: 1px solid var(--border-color); border-radius: 10px; margin: 10px 0; }
.vt-pk-g {
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; position: sticky; top: 0; z-index: 1;
  background: var(--bg-hover); border-bottom: 1px solid var(--border-color); font-size: 12.5px; font-weight: 800;
}
.vt-pk-g em { font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--text-muted); }
.vt-pk-g .xc-mini { margin-left: auto; }
.vt-pk-row {
  display: grid; grid-template-columns: 20px minmax(80px, 150px) minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 6px 12px; font-size: 13px; cursor: pointer;
}
.vt-pk-row + .vt-pk-row { border-top: 1px solid var(--border-color); }
.vt-pk-row small { font-size: 11.5px; color: var(--text-muted); white-space: nowrap; }
.vt-pk-row span { color: var(--text-muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-pk-kind { grid-template-columns: minmax(80px, 150px) minmax(0, 1fr) auto; cursor: default; }
.vt-pk-bulk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 700; margin-top: 6px; }
.vt-seg4 { display: inline-flex; padding: 2px; gap: 2px; border-radius: 8px; background: var(--border-color); }
.vt-seg4 button { padding: 3px 8px; font-size: 11.5px; font-weight: 600; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); cursor: pointer; }
.vt-seg4 button.is-on { background: var(--card-bg); color: var(--primary-color); font-weight: 800; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.vt-seg4 button[data-v="off"].is-on { color: #b91c1c; }
.vt-seg4 button:disabled { opacity: .35; cursor: not-allowed; }
.vt-look { display: inline-flex; align-items: center; justify-content: center; margin-left: 6px; width: 26px; height: 26px; border: 1px solid var(--border-color); border-radius: 7px; background: var(--card-bg); color: var(--text-muted); cursor: pointer; vertical-align: middle; }
.vt-look:hover { color: var(--primary-color); border-color: var(--primary-color); }
.vt-look svg { width: 14px; height: 14px; }
.vt-excl { margin-left: 6px; font-size: 11px; font-weight: 700; color: #b45309; }
.vt-direct { margin: -4px 0 14px; padding: 10px 12px; border: 1px dashed var(--border-color); border-radius: 10px; }
.vt-direct-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 13px; }
.vt-direct-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 6px 0; }
.vt-direct-row + .vt-direct-row { border-top: 1px solid var(--border-color); }
.vt-direct-who { flex: 1 1 220px; min-width: 0; font-size: 13px; }
.vt-direct-who small { display: block; font-size: 11.5px; color: var(--text-muted); }
.vt-direct-state { font-size: 12px; color: var(--text-muted); }
.vt-mixb b { color: var(--primary-color); }
.vt-direct-btn { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
.vt-direct-btn small { font-size: 11.5px; font-weight: 700; color: var(--primary-color); }
.vt-direct-pop { margin: 10px 0; max-height: 55vh; max-height: 55dvh; overflow: auto; border-style: solid; }
.vt-ov:disabled { background: var(--bg-hover); color: var(--text-main); border-style: solid; cursor: not-allowed; }

/* ─── 좁은 화면(폰 — mobile.html 의 [영단어] 탭, 2026-09-25) ─────────────
   화면 코드는 PC 와 같다. 여기서는 배치만 바꾼다 — 창은 아래에 붙이고, 한 줄에 못 들어가는 것은 두 줄로. */
@media (max-width: 600px) {
  /* ④ 시험 이름이 날짜 칸 옆에서 잘려 «재시ㅎ» 로 보였다 — 폰에서는 한 줄씩(2026-09-25 점검). */
  .vt-form .vt-f, .vt-form .vt-f-sm { flex: 1 1 100%; }
  .xc-modal-back { padding: 8px; align-items: flex-end; }
  /* [vh 가 아니라 dvh — 2026-10-08 «아이폰에서 단어 암기 프린트 창 위가 잘린다»] 아이폰 사파리의 1vh 는 주소창·도구막대가
     접혔을 때의 큰 화면 기준이라, 막대가 보이는 평소에는 90vh 창이 보이는 높이보다 커져 아래 붙인 창의 제목이 화면 위로
     잘려 나갔다(iPhone 15 에서 45px). dvh 는 지금 보이는 높이다. 폰 화면이 읽는 CSS 의 vh 는 모두 dvh 를 겹쳐 적었다
     (dvh 를 모르는 옛 브라우저는 앞의 vh 를 쓴다). 확인은 node scripts/iphone/run.cjs (scripts/iphone/README.md). */
  .xc-modal { max-height: 90vh; max-height: 90dvh; padding: 14px; border-radius: 16px; }
  .xc-modal-foot { flex-wrap: wrap; align-items: center; }
  .xc-modal-foot .xc-hint { flex: 1 1 100%; }

  /* 걸음 머리 — 번호 위, 이름 아래. 고른 내용 요약은 좁아서 뺀다(앞 걸음을 누르면 보인다). */
  .vt-steps { gap: 3px; margin-bottom: 14px; }
  .vt-steps button { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 6px 2px; row-gap: 3px; }
  .vt-step-no { grid-row: auto; }
  .vt-step-label { font-size: 11.5px; line-height: 1.25; }
  .vt-step-sum { display: none; }

  /* 단어 확인·고르기 창 — 단어·뜻을 한 줄에, 곁말·유형 단추는 그 아래 줄에 */
  .vt-pk-row { grid-template-columns: 20px minmax(64px, .8fr) minmax(0, 1fr); row-gap: 2px; padding: 8px 10px; }
  .vt-pk-row small { grid-column: 2 / -1; }
  .vt-pk-kind { grid-template-columns: minmax(64px, .8fr) minmax(0, 1fr); row-gap: 6px; }
  .vt-pk-kind .vt-seg4 { grid-column: 1 / -1; display: flex; }
  .vt-pk-kind .vt-seg4 button { flex: 1 1 0; padding: 7px 0; font-size: 12.5px; }
  .vt-pk-list { max-height: 52vh; max-height: 52dvh; }

  /* ④ 확인 줄 — 이름·학년반·범위를 왼쪽에 쌓고, 문항·합격 칸은 오른쪽에 */
  .vt-g4 { grid-template-columns: minmax(0, 1fr) 54px 54px; row-gap: 2px; column-gap: 6px; }
  .vt-g4 > :nth-child(-n+3) { grid-column: 1; }
  .vt-g4 > :nth-child(4) { grid-column: 2; grid-row: 1 / span 3; }
  .vt-g4 > :nth-child(5) { grid-column: 3; grid-row: 1 / span 3; }
  .vt-listhead.vt-g4 > :nth-child(2), .vt-listhead.vt-g4 > :nth-child(3) { display: none; }
  .vt-listhead.vt-g4 > :nth-child(4), .vt-listhead.vt-g4 > :nth-child(5) { grid-row: 1; }
  .vt-g4 .vt-grade { font-size: 11.5px; }
  .vt-g4.vt-g4d { grid-template-columns: minmax(0, 1fr) 44px 50px 50px; }
  .vt-g4.vt-g4d > :nth-child(4) { grid-column: 2; grid-row: 1 / span 3; }
  .vt-g4.vt-g4d > :nth-child(5) { grid-column: 3; grid-row: 1 / span 3; }
  .vt-g4.vt-g4d > :nth-child(6) { grid-column: 4; grid-row: 1 / span 3; }
  .vt-listhead.vt-g4.vt-g4d > :nth-child(6) { grid-row: 1; }

  /* 첫 화면 머리 단추 — [단어 인쇄] 가 늘어 [새 시험 만들기] 가 가로를 넘었다(2026-09-26). 작은 셋은 한 줄,
     새 시험 만들기는 그 아래 한 줄을 다 쓴다. */
  .vt-top-acts { flex-wrap: wrap; width: 100%; }
  .vt-top-acts #vtNew { order: 9; flex: 1 1 100%; justify-content: center; }

  /* ③ 설명 줄 대신 제목 옆 ? (2026-09-26 — 칸마다 설명이 붙어 화면이 글로 찼다) */
  .vt-help { display: inline-flex; }
  .vt-sethelp-long { display: none; }
  .vt-prev { white-space: nowrap; flex-shrink: 0; }
  .vt-nav-hint { font-size: 11.5px; }

  /* 단어 직접 고르기 창 */
  .vw-bar select { flex: 1 1 40%; min-width: 0; }
  .vw-w { min-width: 84px; }
  .vw-row { padding: 9px 8px; }
  .vw-list { max-height: 50vh; max-height: 50dvh; }
}

/* ─── 단어 암기 프린트 창(vocabWordPrintUI.js) ─── */
.wp-panel { width: min(520px, 100%); }
.wp-bar { display: flex; gap: 6px; margin-bottom: 8px; }
.wp-list { max-height: 46vh; max-height: 46dvh; overflow: auto; border: 1px solid var(--border-color); border-radius: 10px; }
.wp-row { display: grid; grid-template-columns: 18px minmax(64px, auto) minmax(0, 1fr); align-items: center; column-gap: 10px;
  padding: 8px 12px; font-size: 13px; cursor: pointer; }
.wp-row + .wp-row { border-top: 1px solid var(--border-color); }
.wp-row b small { font-weight: 500; color: var(--text-muted); }
.wp-row span { color: var(--text-muted); font-size: 12px; min-width: 0; overflow-wrap: anywhere; }
.wp-ex { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 10px;
  background: var(--bg-color, #f6f7fb); cursor: pointer; }
.wp-ex input { margin-top: 3px; }
.wp-ex b { display: block; font-size: 13px; }
.wp-ex small { display: block; font-size: 12px; color: var(--text-muted); }
.wp-ex.is-off { opacity: .55; cursor: default; }
.wp-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.wp-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 700; color: var(--text-muted); }
.wp-f select { min-width: 200px; height: 34px; }
.wp-f-day input { width: 64px; height: 34px; }
.wp-f-day { flex-direction: row; align-items: center; gap: 6px; }
.wp-f-day span { margin-right: 2px; }
.wp-info { margin: 10px 0 0; font-size: 13px; color: var(--text-main); }
@media (max-width: 600px) {
  .wp-f, .wp-f select { width: 100%; }
  .wp-f-day { flex-wrap: wrap; }
}

/* 2026-10-03 — 어디서나 보이는 ? (자유 시험 ②), 버튼·요약 한 줄 고정, 진도 일괄 적용 창 */
.vt-help.is-always { display: inline-flex; }
.vt-q .vt-help { vertical-align: -3px; }
.vt-pickwords .vt-help { margin-left: -6px; }
.vt-free-bar { flex-wrap: nowrap; min-width: 0; }
.vt-nowrap-ellipsis { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-bulk-form { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 4px 0 14px; }
.vt-bulk-form .vt-f { flex: 1 1 200px; }
.vt-bulk-form .vt-f-sm { flex: 0 0 90px; }
.vt-bulk-form select, .vt-bulk-form input { width: 100%; box-sizing: border-box; }

/* 자유 시험 ② 의 두 선택지 — 각자 진도 / 공통 단어(2026-10-03) */
.vt-free-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
.vt-free-mode { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; text-align: left;
  padding: 10px 12px; border: 1.5px solid var(--border-color); border-radius: 10px; background: var(--card-bg); color: var(--text-main); cursor: pointer; }
.vt-free-mode svg { grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--text-muted); }
.vt-free-mode b { font-size: 14px; }
.vt-free-mode span { font-size: 12px; color: var(--text-muted); }
.vt-free-mode.is-on { border-color: var(--primary-color); background: var(--primary-light); }
.vt-free-mode.is-on svg, .vt-free-mode.is-on b { color: var(--primary-color); }

/* ─── 단어장 고르기 창(src/ui/vocabBookPicker.js, 2026-10-14) ─── */
.vbp-back { z-index: 4200; }
.vbp [hidden] { display: none !important; }
.vbp { max-width: 900px; height: min(640px, 86vh); height: min(640px, 86dvh); padding: 0; gap: 0; overflow: hidden; }
.vbp-head { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px 10px; border-bottom: 1px solid var(--border-color); }
.vbp-head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vbp-x { border: 0; background: transparent; cursor: pointer; color: var(--text-muted); padding: 4px; border-radius: 6px; display: inline-flex; }
.vbp-x:hover { background: var(--bg-hover); }
.vbp-x svg { width: 18px; height: 18px; }
.vbp-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.vbp-left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border-color); }
.vbp-tools { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.vbp-search { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 9px; background: var(--bg-color); }
.vbp-search input { border: 0; background: transparent; outline: none; flex: 1; min-width: 0; font-size: 13px; color: var(--text-main); padding: 0; }
.vbp-search svg { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
.vbp-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.vbp-chip { padding: 4px 11px; border-radius: 999px; border: 1px solid var(--border-color); background: transparent; font-size: 12px; font-weight: 600; color: var(--text-muted); cursor: pointer; }
.vbp-chip.on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }
.vbp-list { flex: 1; overflow: auto; padding: 0 12px 12px; }
.vbp-sec { margin-top: 10px; }
.vbp-sec-h { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; color: var(--text-muted); padding: 4px 2px; position: sticky; top: 0; background: var(--card-bg); z-index: 1; }
.vbp-sec-h i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.vbp-sec-h small { font-weight: 600; }
.vbp-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.vbp-book { position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 8px 10px 8px 14px; border-radius: 9px; border: 1px solid var(--border-color); background: var(--card-bg); cursor: pointer; overflow: hidden; }
.vbp-book::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--c); }
.vbp-book:hover { border-color: var(--c); }
.vbp-book.on { border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-light); }
.vbp-book b { font-size: 13px; color: var(--text-main); line-height: 1.25; padding-right: 30px; }
.vbp-book span { font-size: 11px; color: var(--text-muted); }
.vbp-book em { position: absolute; top: 6px; right: 7px; font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 6px; border-radius: 999px; background: var(--success-light); color: #047857; }
.vbp-right { display: flex; flex-direction: column; min-height: 0; background: var(--bg-color); }
.vbp-rhead { padding: 12px 14px 8px; display: flex; flex-direction: column; gap: 3px; }
.vbp-rhead b { font-size: 14px; color: var(--text-main); }
.vbp-rhead span { font-size: 11.5px; color: var(--text-muted); }
.vbp-return { display: none; align-self: flex-start; }
.vbp-units { flex: 1; overflow: auto; padding: 4px 14px 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 5px; align-content: start; }
.vbp-unit { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); cursor: pointer; text-align: left; min-height: 44px; min-width: 0; }
.vbp-unit:hover { border-color: var(--primary-color); }
.vbp-unit b { font-size: 12.5px; color: var(--text-main); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbp-unit span { font-size: 10.5px; color: var(--text-muted); line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.vbp-unit.done { background: var(--primary-light); }
.vbp-unit.cur { border-color: var(--primary-color); box-shadow: 0 0 0 2px var(--primary-light); }
.vbp-unit.all { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 8px; min-height: 0; }
.vbp-placeholder { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; text-align: center; padding: 20px; }
.vbp-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border-color); background: var(--card-bg); }
.vbp-foot .xc-hint { flex: 1; }
/* 단어 고르기 창 안의 [단어장·Day] 단추 */
.vbp-open { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); font-size: 13px; cursor: pointer; min-width: 0; }
.vbp-open:hover { border-color: var(--primary-color); }
.vbp-open span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbp-open svg { width: 14px; height: 14px; color: var(--text-muted); flex: none; }
@media (max-width: 680px) {
  .vbp-back { padding: 0; align-items: stretch; }
  .vbp { max-width: none; height: 100vh; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .vbp-body { grid-template-columns: 1fr; }
  .vbp-left { border-right: 0; }
  .vbp-right { display: none; }
  .vbp.step2 .vbp-left { display: none; }
  .vbp.step2 .vbp-right { display: flex; }
  .vbp-return { display: inline-flex; }
  .vbp-books { grid-template-columns: 1fr 1fr; }
  .vbp-units { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vbp-foot { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .vbp-head { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
}