/* 보강 화면 — PC(index.html)와 폰(mobile.html)이 같이 읽는다(src/ui/makeupUI.js).
   색은 두 쪽에 다 있는 토큰만 쓴다. 보강의 색은 인디고(--mk)다 — 출결 표에 덧씌울 때도
   같은 색을 쓴다(docs/makeup.md). */
:root { --mk: #4f46e5; --mk-light: #eef2ff; }
[data-theme="dark"] { --mk: #a5b4fc; --mk-light: rgba(99, 102, 241, .16); }

.mk-wrap { display: flex; flex-direction: column; gap: 12px; }
.mk-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-spacer { flex: 1; }
.mk-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--bg-color); border: 1px solid var(--border-color); overflow-x: auto; }
.mk-tabs button {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 6px 12px; border: none; border-radius: 7px; background: transparent;
  font-size: 13px; font-weight: 700; color: var(--text-muted); cursor: pointer;
}
.mk-tabs button.on { background: var(--card-bg); color: var(--text-main); box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.mk-n { min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--border-color); color: var(--text-main); font-size: 11px; line-height: 18px; text-align: center; }
.mk-n.warn { background: var(--warning-color); color: #fff; }
.mk-mine { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.mk-mine input { accent-color: var(--mk); }
.mk-new {
  display: inline-flex; align-items: center; gap: 5px; height: 36px; padding: 0 14px;
  border: none; border-radius: 9px; background: var(--mk); color: #fff;
  font-size: 13.5px; font-weight: 800; cursor: pointer; white-space: nowrap;
}
[data-theme="dark"] .mk-new { color: #1e1b4b; }
.mk-new svg { width: 16px; height: 16px; }

.mk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.mk-empty { grid-column: 1 / -1; padding: 40px 16px; text-align: center; color: var(--text-muted); font-size: 13.5px; border: 1px dashed var(--border-color); border-radius: 12px; }
.mk-card {
  display: flex; flex-direction: column; gap: 5px; text-align: left; width: 100%;
  padding: 13px 14px; border-radius: 12px; cursor: pointer;
  background: var(--card-bg); border: 1px solid var(--border-color); border-left: 4px solid var(--mk);
  color: var(--text-main); font: inherit;
}
.mk-card:hover { border-color: var(--mk); }
.mk-card-top { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.mk-when { color: var(--text-main); }
.mk-when b { color: var(--mk); }
.mk-card-main { font-size: 14px; }
.mk-count { margin-left: 4px; font-size: 12px; font-weight: 700; color: var(--mk); }
.mk-card-sub { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mk-card-reason { font-size: 12px; color: var(--text-muted); padding-top: 4px; border-top: 1px dashed var(--border-color); }
.mk-hint { font-size: 12px; color: var(--text-muted); }
.mk-danger { color: var(--danger-color); }

.mk-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.mk-badge.warning { background: var(--warning-light); color: #b45309; }
.mk-badge.primary { background: var(--mk-light); color: var(--mk); }
.mk-badge.success { background: var(--success-light); color: var(--success-color); }
.mk-badge.danger { background: var(--danger-light); color: var(--danger-color); }
.mk-badge.muted { background: var(--bg-color); color: var(--text-muted); border: 1px solid var(--border-color); }

/* ─── 창 ─── */
.mk-back { z-index: 2100; }
.mk-modal { max-width: 520px; max-height: 88vh; max-height: 88dvh; padding: 0; gap: 0; overflow: hidden; }
.mk-modal.mk-wide { max-width: 620px; }
.mk-modal-head { display: flex; align-items: flex-start; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--border-color); }
.mk-modal-head > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.mk-x { border: none; background: none; color: var(--text-muted); cursor: pointer; padding: 2px; }
.mk-x svg { width: 20px; height: 20px; }
.mk-modal-body { flex: 1; overflow: auto; padding: 14px 18px; display: flex; flex-direction: column; gap: 14px; }
.mk-foot { padding: 12px 18px; border-top: 1px solid var(--border-color); align-items: center; flex-wrap: wrap; }
.mk-ok { background: var(--mk); border-color: var(--mk); color: #fff; }
[data-theme="dark"] .mk-ok { color: #1e1b4b; }
.mk-ok-danger { background: var(--danger-color); border-color: var(--danger-color); }
.mk-danger-btn { color: var(--danger-color) !important; }

.mk-f { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mk-f > span { font-size: 12.5px; font-weight: 700; color: var(--text-muted); }
.mk-f > span em { font-style: normal; font-weight: 500; }
.mk-f input, .mk-f select, .mk-f textarea, .mk-pick-bar select {
  width: 100%; min-width: 0; height: 38px; padding: 0 10px; border-radius: 8px;
  border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); font: inherit; font-size: 14px;
}
.mk-f textarea { height: auto; padding: 8px 10px; resize: vertical; }
.mk-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 일시: 날짜 | 시작 ~ 끝. 폰에서는 날짜 한 줄, 시간 한 줄 */
.mk-slot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px; }
@media (max-width: 640px) { .mk-slot { grid-template-columns: 1fr; } }
.mk-trange { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mk-trange .mk-time { flex: 1; min-width: 0; }
.mk-tilde { color: var(--text-muted); font-weight: 700; }

/* 학생 고르기 */
.mk-picked { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; align-items: center; }
.mk-picked:empty, .mk-pick-list:empty { display: none; }
.mk-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 10px; border-radius: 999px; background: var(--mk-light); color: var(--mk); font-size: 12.5px; font-weight: 700; }
.mk-chip small { font-weight: 500; opacity: .75; margin-right: 4px; }
.mk-chip button { display: inline-flex; border: none; background: none; color: inherit; cursor: pointer; padding: 1px; }
.mk-chip button svg { width: 13px; height: 13px; }
.mk-pick-bar { display: grid; grid-template-columns: 1fr 150px; gap: 8px; }
.mk-search { display: flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); }
.mk-search svg { width: 16px; height: 16px; color: var(--text-muted); flex: 0 0 auto; }
.mk-search input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--text-main); font: inherit; font-size: 14px; outline: none; }
.mk-pick-list { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow: auto; border: 1px solid var(--border-color); border-radius: 10px; padding: 4px; }
.mk-pick-list .mk-hint { padding: 10px; }
.mk-pick-row { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border: none; border-radius: 8px; background: transparent; color: var(--text-main); font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.mk-pick-row:hover { background: var(--bg-color); }
.mk-pick-row span:last-child { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.mk-pick-row.on { background: var(--mk-light); }
.mk-check { width: 18px; height: 18px; border-radius: 5px; border: 1.5px solid var(--border-color); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mk-pick-row.on .mk-check { background: var(--mk); border-color: var(--mk); color: #fff; }
.mk-check svg { width: 13px; height: 13px; }

/* 상세 */
.mk-info { display: grid; grid-template-columns: 84px 1fr; gap: 8px 12px; margin: 0; font-size: 13.5px; }
.mk-info dt { color: var(--text-muted); font-weight: 700; font-size: 12.5px; padding-top: 2px; }
.mk-info dd { margin: 0; color: var(--text-main); }
.mk-names { display: flex; flex-wrap: wrap; gap: 5px; }
.mk-names .mk-chip { padding: 3px 10px; }
.mk-log { font-size: 12.5px; color: var(--text-muted); }
.mk-log summary { cursor: pointer; font-weight: 700; }
.mk-log ul { margin: 8px 0 0; padding-left: 16px; display: flex; flex-direction: column; gap: 4px; }
.mk-log time { font-variant-numeric: tabular-nums; }
.mk-log b { color: var(--text-main); }

@media (max-width: 640px) {
  .mk-back { padding: 0; align-items: flex-end; }
  .mk-modal, .mk-modal.mk-wide { max-width: none; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; }
  /* 강사·과목, 이름 찾기·반 불러오기는 폰에서도 한 줄에 둘 — 세로로 쌓으면 칸이 너무 많아 보였다 */
  .mk-pick-bar { grid-template-columns: minmax(0, 1fr) 118px; }
  .mk-list { grid-template-columns: 1fr; }
  .mk-top .mk-tabs { order: 3; width: 100%; }
  /* 칸 다섯 개가 옆으로 넘쳐 [주간 보기] 가 화면 밖으로 밀리고 스크롤 막대가 보였다 — 세 칸씩 두 줄로. */
  .mk-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
  .mk-tabs button { justify-content: center; padding: 7px 4px; font-size: 12.5px; }
}

/* 시·분 고르기(24시간제) */
.mk-time { display: flex; align-items: center; gap: 4px; }
.mk-time select { flex: 1; min-width: 0; height: 38px; padding: 0 6px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-main); font: inherit; font-size: 14px; }
.mk-time b { color: var(--text-muted); }

/* ─── 2단계: 진행 기록·이력 ─── */
.mk-warn { color: #b45309; font-weight: 700; }
.mk-need { margin-left: 4px; }
.mk-chip.on { background: var(--success-light); color: var(--success-color); }
.mk-chip.off { background: var(--bg-color); color: var(--text-muted); text-decoration: line-through; }
.mk-attend { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; }
.mk-att {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-muted); font: inherit; font-size: 14px; font-weight: 700; text-align: left;
}
.mk-att small { margin-left: auto; font-size: 11px; font-weight: 700; }
.mk-att.on { border-color: var(--mk); background: var(--mk-light); color: var(--text-main); }
.mk-att.on small { color: var(--mk); }
.mk-att.on .mk-check { background: var(--mk); border-color: var(--mk); color: #fff; }
.mk-extra { border: 1px dashed var(--border-color); border-radius: 10px; padding: 8px 10px; }
.mk-extra[open] { display: flex; flex-direction: column; gap: 8px; }
.mk-extra summary { cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--text-muted); }

.mk-hist-sum { font-size: 12px; font-weight: 700; color: var(--mk); margin-bottom: 6px; }
.mk-hist { display: flex; flex-direction: column; gap: 4px; }
.mk-hist-row {
  display: grid; grid-template-columns: 76px 86px 1fr auto; align-items: center; gap: 6px; width: 100%;
  padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border-color); border-left: 3px solid var(--mk);
  background: var(--card-bg); color: var(--text-main); font: inherit; font-size: 12.5px; text-align: left; cursor: pointer;
}
.mk-hist-row:hover { border-color: var(--mk); }
.mk-hist-d { font-weight: 700; }
.mk-hist-t { color: var(--mk); font-weight: 700; font-variant-numeric: tabular-nums; }
.mk-hist-s { color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .mk-hist-row { grid-template-columns: 70px 1fr auto; }
  .mk-hist-t { display: none; }
}

/* ─── 출석 현황의 보강 표시(인디고) — attendanceOverviewUI ─── */
.att-cal-cell.att-mk { box-shadow: inset 0 0 0 2px var(--mk); }
.att-cal-cell.att-mk.att-c-none, .att-cal-cell.att-mk.att-c-off { background: var(--mk-light); }
.att-cal-mk { display: block; font-size: 10.5px; font-weight: 800; color: var(--mk); line-height: 1.2; }
.att-g-c > i.att-mk { box-shadow: inset 0 0 0 2px var(--mk); }
.att-g-c > i.att-mk.att-c-none, .att-g-c > i.att-mk.att-c-off { background: var(--mk-light); border-color: var(--mk); }
.att-ov-lg i.att-mk { box-shadow: inset 0 0 0 2px var(--mk); background: var(--mk-light); }
.att-ov-chip.att-mk-chip { background: var(--mk-light); color: var(--mk); }

/* ─── 주간 보기 ─── */
.mk-wbar { display: flex; align-items: center; gap: 8px; }
.mk-wbar b { font-size: 14px; min-width: 110px; text-align: center; }
.mk-wbar .xc-mini svg { width: 14px; height: 14px; }
.mk-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mk-wcol { display: flex; flex-direction: column; gap: 5px; min-height: 120px; padding: 6px; border-radius: 10px; background: var(--bg-color); border: 1px solid var(--border-color); }
.mk-wcol.today { border-color: var(--mk); box-shadow: inset 0 0 0 1px var(--mk); }
.mk-wday { font-size: 12px; color: var(--text-muted); text-align: center; padding-bottom: 2px; }
.mk-wday b { color: var(--text-main); }
.mk-wcard {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; cursor: pointer;
  padding: 7px 8px; border-radius: 8px; border: 1px solid var(--border-color); border-left: 3px solid var(--mk);
  background: var(--card-bg); color: var(--text-main); font: inherit; font-size: 12px;
}
.mk-wcard.requested { opacity: .6; border-left-style: dashed; }
.mk-wcard:hover { border-color: var(--mk); }
.mk-wt { font-weight: 800; color: var(--mk); font-variant-numeric: tabular-nums; }
.mk-wt em { font-style: normal; font-weight: 600; color: var(--text-muted); font-size: 11px; }
.mk-wteacher { color: var(--text-muted); }
.mk-wstu { color: var(--text-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mk-wnone { color: var(--text-muted); text-align: center; font-size: 12px; padding-top: 10px; }
@media (max-width: 900px) {
  .mk-week { grid-template-columns: 1fr; }
  .mk-wcol { min-height: 0; }
  .mk-wday { text-align: left; }
  /* 폰에서는 빈 날을 접는다(오늘은 남긴다) — 빈 칸 일곱 개가 화면을 다 먹었다. */
  .mk-wcol.empty:not(.today) { display: none; }
}
.mk-week-empty { display: none; }
@media (max-width: 900px) { .mk-week-empty { display: block; } }

/* 완료된 보강 — 기록까지 끝난 카드는 회색으로 뒤에(2026-10-14) */
.mk-card.is-done { background: var(--bg-color); border-left-color: var(--border-separator); color: var(--text-muted); }
.mk-card.is-done .mk-when, .mk-card.is-done .mk-when b, .mk-card.is-done .mk-count { color: var(--text-muted); }
.mk-card.is-done:hover { border-color: var(--border-separator); }

/* 겹치는 보강 안내 */
.mk-ov-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.mk-ov-row { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: var(--warning-light); }
.mk-ov-row > b { min-width: 56px; font-size: 13px; color: var(--text-main); }
.mk-ov-row > div { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--text-main); }
.mk-ov-split { padding-top: 10px; border-top: 1px dashed var(--border-color); }