:root {
  --bg: #f6f7f9;
  --card: #fff;
  --line: #e3e6eb;
  --text: #1f2933;
  --muted: #6b7684;
  --primary: #2563eb;
  --danger: #dc2626;
  --ok: #16a34a;
  --warn: #d97706;
  --free: #d5f5ec; /* 주별 보기 공강 시간 배경. 설정에서 바꿀 수 있다 */
  font-family: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  color: var(--text);
  background: var(--bg);
}

* { box-sizing: border-box; }
body { margin: 0; }
small { color: var(--muted); }
[hidden] { display: none !important; }

button {
  font: inherit;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 14px;
  cursor: pointer;
  background: #e5e7eb;
}
button.primary { background: var(--primary); color: #fff; }
button.danger { background: var(--danger); color: #fff; }
button.ok { background: var(--ok); color: #fff; }
button.ghost { background: transparent; border-color: var(--line); color: var(--text); }
button.ghost.danger { color: var(--danger); }
button.small { padding: 3px 9px; font-size: 13px; }
button:hover { filter: brightness(0.95); }
button:disabled { opacity: 0.4; cursor: default; filter: none; }

input, select, textarea {
  font: inherit;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  width: 100%;
}

/* ---------- 로그인 ---------- */
body.locked > header, body.locked > main { display: none; }
.login-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: min(380px, 100%); background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 24px; display: flex; flex-direction: column; }
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.login-card button { padding: 10px; margin-top: 4px; }

/* ---------- 상단 ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 10px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 5;
}
.topbar h1 { font-size: 18px; margin: 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabs { display: flex; gap: 4px; flex: 1; }
.tabs button { background: transparent; color: var(--muted); font-weight: 600; }
.tabs button[aria-selected="true"] { background: #e8efff; color: var(--primary); }

main { padding: 16px 20px; max-width: 1400px; margin: 0 auto; }

.toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.toolbar input[type="search"] { width: 220px; }
.toolbar select { width: auto; }
.col-picker { position: relative; margin-left: auto; }
#col-picker-btn { display: inline-flex; align-items: center; gap: 6px; }
#col-picker-btn.changed { border-color: var(--primary); color: var(--primary); }
.col-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 200px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14); }
.col-menu-title { margin: 0 0 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.col-menu label.check { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 14px; font-weight: 500; cursor: pointer; }
.col-menu label.check input { width: auto; margin: 0; }
.col-menu #col-reset { margin-top: 8px; width: 100%; }
.toolbar h2 { margin: 0 4px; font-size: 20px; min-width: 120px; text-align: center; }

.type-tag {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  color: #fff;
  background: var(--c);
}

.badge { font-size: 12px; padding: 1px 7px; border-radius: 999px; background: #eef0f3; color: var(--muted); }
.badge.soon { background: #fef3c7; color: var(--warn); }
.badge.due { background: #fee2e2; color: var(--danger); font-weight: 700; }

/* 상단 결제 알림 */

/* 주별/월별 전환 */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin-right: 6px; }
.seg button { border-radius: 0; background: var(--card); color: var(--muted); font-weight: 600; }
.seg button[aria-pressed="true"] { background: var(--primary); color: #fff; }

/* 상단 설정(톱니) 버튼 */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; padding: 6px 8px; color: var(--muted); }
.icon-btn[aria-pressed="true"] { background: #e8efff; color: var(--primary); border-color: #c7d7fe; }
.color-row { display: flex; align-items: center; gap: 10px; }
.push-daily { margin-top: 10px; }
.push-daily select { width: auto; }
.push-daily label.check { margin-bottom: 0; }
.color-row input[type="color"] { width: 44px; height: 32px; padding: 2px; margin-left: 6px; vertical-align: middle; }
button.toggle[aria-pressed="false"] { color: var(--muted); }
button.toggle[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

.history-summary { color: var(--muted); font-size: 14px; }
/* 이력: 날짜별 묶음, 시각별 줄, 촘촘하게 */
.history-table { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14px; }
.history-table th { padding: 7px 10px; font-size: 12px; color: var(--muted); font-weight: 600; background: #fafbfc; text-align: left; border-bottom: 1px solid var(--line); }
.history-table td { padding: 4px 10px; vertical-align: middle; text-align: left; white-space: nowrap; line-height: 1.35; }
.history-table td.h-detail, .history-table td.h-memo { white-space: normal; }
.history-table tr.h-day td { padding: 7px 10px 5px; background: #f1f5f9; border-top: 1px solid var(--line); font-size: 13px; }
.history-table tr.h-day:first-child td { border-top: 0; }
.history-table tr.h-day small { margin-left: 8px; color: var(--muted); }
.history-table tr.h-item.t-start td { border-top: 1px solid #edf0f4; }
.history-table tr.h-day + tr.h-item td { border-top: 0; }
.history-table .h-time { width: 56px; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.history-table .h-memo { color: var(--muted); }
.history-table .h-stamp { color: var(--muted); font-size: 12px; }
.history-table .h-act { width: 1%; text-align: right; }
.history-table .h-act button { padding: 1px 8px; }
.mk-state { display: inline-block; padding: 0 7px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.mk-state.wait { background: #fef3c7; color: #b45309; border: 1px solid #fcd34d; }
.mk-state.attend { background: #dcfce7; color: var(--ok); }
.mk-state.absent { background: #fee2e2; color: var(--danger); }
.mk-state.planned { background: #ede9fe; color: #6d28d9; }
.mk-state.unchecked { background: #f1f5f9; color: var(--muted); }
.history-table td.empty { text-align: center; padding: 16px; color: var(--muted); }
/* 이력 구분 표시 */
.htag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; background: #eef0f3; color: var(--muted); }
.htag.payment { background: #dbeafe; color: #1d4ed8; }
.htag.attend { background: #dcfce7; color: var(--ok); }
.htag.postpone { background: #fef9c3; color: #a16207; }
.htag.absent { background: #fee2e2; color: var(--danger); }
.htag.makeup { background: #ede9fe; color: #6d28d9; }
.hfilter button { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.actions.start { justify-content: flex-start; margin-top: 0; }
.history-row { grid-template-columns: 1fr 1fr auto; }

/* ---------- 통계: 회원 × 월 ---------- */
table.enroll { border-collapse: collapse; font-size: 13px; width: 100%; }
.enroll th, .enroll td { border-bottom: 1px solid var(--line); padding: 6px 8px; text-align: center; white-space: nowrap; }
.enroll thead th { background: #fafbfc; color: var(--muted); font-weight: 600; }
.enroll th.sticky { position: sticky; left: 0; background: var(--card); text-align: left; z-index: 1; min-width: 110px; border-right: 1px solid var(--line); }
.enroll thead th.sticky { background: #fafbfc; }
.enroll th.sticky small { font-weight: 400; margin-left: 4px; }
.enroll td.active { background: #dcfce7; color: var(--ok); }
.enroll td.paused { background: #f1f5f9; color: var(--muted); font-size: 12px; }
.enroll tfoot th, .enroll tfoot td { background: #fafbfc; font-weight: 600; }
.enroll tfoot tr.total td { color: var(--primary); font-size: 15px; font-weight: 700; }
.type-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 6px; vertical-align: middle; }

/* ---------- 정산 ---------- */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 16px; }
.stat-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.stat-card .label { color: var(--muted); font-size: 13px; font-weight: 600; }
.stat-card .value { font-size: 26px; font-weight: 700; margin: 4px 0 8px; font-variant-numeric: tabular-nums; }
.cmp { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 3px 0; }
.cmp small { margin-left: 4px; }
.diff { font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.diff.up { color: var(--ok); }
.diff.down { color: var(--danger); }
.section-title { font-size: 15px; margin: 0 0 8px; }

.empty { color: var(--muted); text-align: center; padding: 16px; }
.error { color: var(--danger); min-height: 1em; margin: 6px 0; }

/* ---------- 회원 표 ---------- */
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
table.members { width: 100%; border-collapse: collapse; min-width: 860px; }
table.members th, table.members td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
table.members th { font-size: 13px; color: var(--muted); font-weight: 600; background: #fafbfc; }
table.members tr:last-child td { border-bottom: 0; }
/* 회원 목록: 촘촘하게 한 화면에 많이 */
#member-table { font-size: 14px; }
#member-table th { padding: 7px 10px; font-size: 12px; }
#member-table td { padding: 5px 10px; line-height: 1.35; }
#member-table td.cell-name b { font-size: 14px; }
#member-table td.cell-name .phone { color: var(--muted); font-size: 12px; margin-left: 4px; white-space: nowrap; }
#member-table small { font-size: 12px; }
#member-table td[data-col="last"], #member-table td[data-col="next"] { white-space: nowrap; }
#member-table .row-actions button { padding: 2px 8px; }
.list-count { margin: 8px 4px 0; text-align: right; font-size: 14px; color: var(--muted); }
.list-count b { color: var(--text); }
.nw { white-space: nowrap; }
#member-table .pay-spacer { visibility: hidden; }
.remain { font-weight: 700; }
.remain.low { color: var(--warn); }
.remain.neg { color: var(--danger); }
.row-actions { white-space: nowrap; text-align: right; }

/* ---------- 달력 ---------- */
.schedule-layout { display: grid; grid-template-columns: 1fr 300px; gap: 16px; align-items: start; }

.calendar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.dow { padding: 6px; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); background: #fafbfc; border-bottom: 1px solid var(--line); }
.cell { min-height: 110px; padding: 4px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.cell:nth-child(7n) { border-right: 0; }
.cell.blank { background: #fafbfc; }
.cell.today { background: #f0f6ff; }
.cell.today .day { background: var(--primary); color: #fff; border-radius: 999px; padding: 0 7px; }
.day { font-size: 13px; font-weight: 600; align-self: flex-start; }
.sun, .sun .day { color: #dc2626; }
.sat, .sat .day { color: #2563eb; }
.cell.today.sun .day, .cell.today.sat .day { color: #fff; }
/* 토요일 숨김: 월별 달력을 일~금 6칸으로 */
.calendar.no-sat { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.calendar.no-sat .cell:nth-child(7n) { border-right: 1px solid var(--line); }
.calendar.no-sat .cell:nth-child(6n) { border-right: 0; }

.chip {
  display: block;
  width: 100%;
  text-align: left;
  font-size: 12px;
  line-height: 1.35;
  padding: 2px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--c) 14%, white);
  border-left: 3px solid var(--c);
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chip .t { font-variant-numeric: tabular-nums; font-weight: 600; }
.chip em { font-style: normal; font-size: 11px; font-weight: 700; }
.chip.done, .chip.attend { opacity: 0.5; } /* 끝난 수업은 반투명 */
/* 연기·보강·결석·미처리는 지난 수업이어도 또렷하게 */
.chip.postpone, .chip.absent, .chip.makeup, .chip.unchecked { opacity: 1; }
/* 상태별 색: 연기 노랑, 보강 보라, 출석 흰색, 결석 빨강 */
.chip.postpone { background: #fef9c3; border-left-color: #eab308; color: #854d0e; text-decoration: line-through; }
.chip.postpone em { text-decoration: none; display: inline-block; color: #a16207; }
.chip.absent { background: #fee2e2; border-left-color: var(--danger); color: var(--danger); text-decoration: line-through; }
.chip.absent em { display: inline-block; }
.chip.makeup { background: #ede9fe; border: 1px dashed #8b5cf6; border-left: 3px solid #8b5cf6; }
.chip.makeup em { color: #7c3aed; }
.chip.attend { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--c); }
.chip.makeup.attend { border: 1px dashed #8b5cf6; border-left: 3px solid #8b5cf6; }
.chip.attend em { color: var(--ok); }
/* 지난 수업인데 출결 처리 안 함: 연기(노랑)와 헷갈리지 않게 배경은 그대로, 주황 점선만 */
.chip.note { background: #f1f5f9; border: 1px dashed #94a3b8; border-left: 3px solid #94a3b8; color: #475569; }
.chip.unchecked { outline: 1.5px dashed var(--warn); outline-offset: -1px; }
.chip.unchecked em { color: var(--warn); }

/* 결제해야 하는 수업: 결제 필요는 빨강, 곧 결제는 주황 테두리 + ₩ 표시 */
.chip.bill-due { outline: 2px solid var(--danger); outline-offset: -1px; }
.chip.bill-soon { outline: 2px solid var(--warn); outline-offset: -1px; }
.chip .bill { display: inline-block; margin-right: 3px; padding: 0 4px; border-radius: 4px; font-size: 10px; font-weight: 700; color: #fff; background: var(--danger); font-style: normal; }
.chip.bill-soon .bill { background: var(--warn); }

/* 주별 보기: 왼쪽 1시간 눈금 + 시각 위치에 수업 블록 */
.calendar.week { display: block; }
.tg { --grid: #374151; display: grid; grid-template-columns: 52px repeat(var(--days, 7), minmax(0, 1fr)); }
.tg-corner, .tg-day { background: #fafbfc; border-bottom: 1px solid var(--grid); position: sticky; top: 0; z-index: 2; }
.tg-day { padding: 6px 4px; text-align: center; font-size: 13px; font-weight: 600; color: var(--muted); border-left: 1px solid var(--grid); line-height: 1.35; display: flex; flex-direction: column; align-items: center; }
.tg-day b { color: var(--text); }
.tg-day.sun, .tg-day.sun b { color: #dc2626; }
.tg-day.sat, .tg-day.sat b { color: #2563eb; }
.tg-day.today { background: var(--primary); color: #fff; }
.tg-day.today b { color: #fff; }
.tg-times div { height: var(--hour); font-size: 11px; color: var(--text); font-weight: 600; text-align: right; padding-right: 6px; transform: translateY(-7px); font-variant-numeric: tabular-nums; }
.tg-times div:first-child { transform: none; }
/* 요일별 메모 줄 */
.tg-memo-label { border-top: 1px solid var(--grid); background: #fafbfc; font-size: 11px; font-weight: 600; text-align: right; padding: 8px 6px 0 0; }
.tg-memo { border-top: 1px solid var(--grid); border-left: 1px solid var(--grid); background: #fffdf3; padding: 4px; }
.memo-box { position: relative; }
.memo-box textarea { display: block; width: 100%; min-height: 52px; resize: none; overflow: hidden; font-size: 12px; line-height: 1.4; padding: 4px 6px; border: 1px solid transparent; background: transparent; border-radius: 6px; }
.memo-box textarea:hover { border-color: var(--line); }
.memo-box textarea:focus { border-color: var(--primary); background: #fff; outline: none; }
.memo-state { position: absolute; right: 6px; bottom: 3px; font-size: 10px; color: var(--muted); pointer-events: none; }
.memo-box[data-state="pending"] .memo-state::after, .memo-box[data-state="saving"] .memo-state::after { content: '저장 중…'; }
.memo-box[data-state="saved"] .memo-state::after { content: '저장됨'; color: var(--ok); }
.memo-box[data-state="error"] .memo-state::after { content: '저장 실패'; color: var(--danger); }
.agenda-items .memo-box textarea { font-size: 15px; border-color: var(--line); background: #fffdf3; margin-top: 4px; }
.tg-col { cursor: cell; touch-action: manipulation; } /* 두 번 눌러도 화면이 확대되지 않게 */
.tg-col {
  position: relative;
  border-left: 1px solid var(--grid);
  /* 1시간 단위 진한 선 + 30분 옅은 선 */
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) - 1px), var(--grid) calc(var(--hour) - 1px), var(--grid) var(--hour)),
    repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) / 2 - 1px), #e5e7eb calc(var(--hour) / 2 - 1px), #e5e7eb calc(var(--hour) / 2), transparent calc(var(--hour) / 2), transparent var(--hour));
}
/* 수업이 없는 빈 시간은 민트색 (수업 블록이 위를 덮는다). 오늘은 머리글 색으로만 표시 */
.tg-col, .tg-col.today { background-color: var(--free); }
.tg-col .chip { position: absolute; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; font-size: 12px; padding: 3px 6px; white-space: normal; overflow: hidden; z-index: 1; }
.tg-col .chip .n { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-col .chip:hover { z-index: 3; filter: brightness(0.97); }
.tg-col .chip.selected { outline: 2px solid var(--c); outline-offset: 1px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18); z-index: 4; touch-action: none; cursor: grab; }
.tg-col .chip.selected.postpone, .tg-col .chip.selected.attend, .tg-col .chip.selected.absent { cursor: pointer; }
.tg-col .chip.dragging { opacity: 0.35; cursor: grabbing; }
.tg-col .chip.moved { border-style: dashed; border-left-style: solid; }
.tg-ghost { position: absolute; left: 2px; right: 2px; z-index: 5; pointer-events: none; border-radius: 6px; border: 2px dashed var(--c); background: color-mix(in srgb, var(--c) 22%, white); font-size: 12px; font-weight: 700; padding: 3px 6px; }
.week-hint { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
/* 선택한 빈 칸 (휴대폰) */
.tg-slot { position: absolute; left: 1px; right: 1px; z-index: 2; pointer-events: none; border-radius: 4px; border: 2px solid var(--primary); background: color-mix(in srgb, var(--primary) 18%, transparent); }
/* 아래 탭바 바로 위에 뜨는 시트 */
.slot-sheet {
  position: fixed; left: 8px; right: 8px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 30;
  display: flex; align-items: center; gap: 8px; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}
.slot-sheet-label { flex: 1; font-weight: 700; font-size: 15px; }
.slot-sheet button { padding: 10px 14px; font-size: 15px; }
.week-hint-phone { display: none; margin: 0 0 6px; font-size: 12px; color: var(--muted); }
#range-title { cursor: pointer; border-radius: 6px; }
#range-title:hover { background: #eef2f7; }
.memo-big textarea { font-size: 16px; min-height: 140px; border-color: var(--line); background: #fffdf3; }
.state.moved { background: #eef2ff; }
.tg-now { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed color-mix(in srgb, var(--danger) 60%, transparent); z-index: 2; pointer-events: none; }
.tg-now.today { border-top: 2px solid var(--danger); }
.tg-now.today::before { content: ''; position: absolute; left: -4px; top: -5px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); }
.tg-times { position: relative; }
.tg-now-label { position: absolute; right: 2px; transform: translateY(-50%); z-index: 3; padding: 0 3px; border-radius: 4px; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }

.agenda { display: none; }
.agenda-day { display: flex; gap: 10px; padding: 8px 10px; background: var(--card); border-bottom: 1px solid var(--line); }
.agenda-day.today { background: #f0f6ff; }
.agenda-date { width: 64px; flex: none; font-weight: 600; font-size: 14px; }
.agenda-items { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.agenda-items .chip { font-size: 14px; padding: 5px 8px; }

/* ---------- 오른쪽 패널 ---------- */
.side { display: flex; flex-direction: column; gap: 12px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.panel h3 { margin: 0 0 8px; font-size: 15px; }
.pay-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.pay-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pay-list li:last-child { border-bottom: 0; }
.pay-list li.empty { justify-content: center; }
.pay-list button { flex: none; }
.pay-list li.draggable { cursor: grab; user-select: none; }
@media (min-width: 701px) { .pay-list li.draggable { touch-action: none; } }
.pay-list li.draggable.dragging { opacity: 0.4; cursor: grabbing; }
.grip { color: var(--muted); }
.badge.ok { background: #dcfce7; color: var(--ok); }
.pay-list li.booked b { color: var(--muted); }
.flex-tag { display: inline-block; padding: 0 6px; border-radius: 6px; background: #ede9fe; color: #6d28d9; font-size: 12px; font-weight: 700; }
dialog label.check, .admin-page label.check { flex-direction: row; align-items: center; gap: 6px; font-weight: 600; }
dialog label.check input, .admin-page label.check input { width: auto; }
.pick-list { list-style: none; margin: -4px 0 10px; padding: 0; border: 1px solid var(--line); border-radius: 8px; max-height: 280px; overflow-y: auto; }
.pick-list li { padding: 7px 10px; cursor: pointer; font-size: 14px; border-bottom: 1px solid var(--line); }
.pick-list li:last-child { border-bottom: 0; }
.pick-list li.active { background: #f0f6ff; }
.pick-list li.picked { background: #e8efff; box-shadow: inset 3px 0 0 var(--primary); }
.pick-list li.note-pick { color: #475569; background: #f8fafc; }
.pick-list li.note-pick.active { background: #eef2f7; }
.pick-list li.empty { cursor: default; color: var(--muted); text-align: center; }
.panel-hint { margin: -4px 0 6px; font-size: 12px; color: var(--muted); }

/* ---------- 팝업 ---------- */
dialog { border: 0; border-radius: 14px; padding: 20px; width: min(560px, 94vw); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25); }
dialog::backdrop { background: rgba(15, 23, 42, 0.45); }
dialog h3 { margin: 0 0 12px; }
dialog label, .admin-page label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; margin-bottom: 10px; }
dialog label small, .admin-page label small { font-weight: 400; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.actions.wrap { flex-wrap: wrap; }
fieldset.slots { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 10px; padding: 10px; }
fieldset.slots legend { font-size: 13px; font-weight: 600; padding: 0 4px; }
.slot-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-bottom: 6px; }
#effective-wrap { margin-top: 10px; }
.meta { color: var(--muted); margin: 0 0 10px; }
.state { padding: 8px 10px; border-radius: 8px; background: #f1f5f9; margin: 0 0 12px; }
.state.postpone { background: #f1f3f5; }
.state.absent { background: #fee2e2; color: var(--danger); }
.state.attend { background: #dcfce7; color: var(--ok); }
.state.unchecked { background: #fef3c7; color: var(--warn); }
.attend-row { justify-content: flex-start; margin: 0 0 10px; }
.state.makeup { background: #eef2ff; }
details { margin-bottom: 8px; }
summary { cursor: pointer; color: var(--primary); font-size: 14px; margin-bottom: 8px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 20px);
  background: #111827;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  max-width: 90vw;
  z-index: 100;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.error { background: var(--danger); }

/* ---------- 휴대폰 ---------- */
@media (max-width: 900px) {
  .schedule-layout { grid-template-columns: 1fr; }
}
/* 휴대폰 목록·팝업 공통 */
.free { color: var(--muted); font-size: 13px; }
.row-end { display: flex; align-items: center; gap: 6px; }
.resched { border-top: 1px dashed var(--line); margin-top: 10px; padding-top: 10px; }

@media (max-width: 700px) {
  main { padding: 10px 10px calc(80px + env(safe-area-inset-bottom)); }
  .topbar { padding: calc(8px + env(safe-area-inset-top)) 12px 8px; gap: 8px; }
  .topbar h1 { flex: 1; }
  #open-settings { padding: 6px 8px; }

  /* 탭은 화면 아래 탭바로 (한 손 조작) */
  .tabs {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; gap: 0;
    background: var(--card); border-top: 1px solid var(--line);
    padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
  }
  .tabs button { flex: 1; padding: 12px 2px; border-radius: 10px; font-size: 14px; white-space: nowrap; }

  input, select, textarea { font-size: 16px; } /* iOS에서 입력할 때 화면이 확대되지 않게 */
  button.small { padding: 7px 12px; font-size: 14px; }
  .toolbar { gap: 6px; }
  .toolbar h2 { font-size: 15px; min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hfilter { flex: 1 1 100%; overflow-x: auto; margin-right: 0; } /* 이력 필터는 한 줄, 넘치면 옆으로 밀기 */
  #tab-schedule .seg, #sat-switch { display: none; } /* 휴대폰은 주별 보기만. 이번 주는 날짜 제목을 눌러서 */
  #tab-schedule .toolbar h2 { text-align: center; }
  .toolbar input[type="search"] { flex: 1 1 100%; width: 100%; }
  .grid2 { grid-template-columns: 1fr; }

  /* 스케줄: PC와 같은 시간표, 폭만 좁게 (시간 눈금은 시만, 날짜 아래 요일, 수업 블록은 이름만) */
  .week-hint { display: none; }
  .week-hint-phone { display: block; }
  .agenda { display: none; }
  .tg { grid-template-columns: 26px repeat(var(--days, 6), minmax(0, 1fr)); }
  .tg-day { padding: 4px 1px; font-size: 11px; line-height: 1.2; }
  .tg-day b { order: -1; font-size: 15px; }
  .tg-day .mo, .tg-times .min, .tg-col .chip .t { display: none; }
  .chip .bill { padding: 0 2px; font-size: 9px; margin-right: 1px; }
  .chip .bill-txt { display: none; }
  .tg-now-label { font-size: 8px; padding: 0 1px; }
  .tg-times div { font-size: 10px; padding-right: 3px; }
  .tg-col .chip { font-size: 11px; padding: 2px 3px; }
  .tg-col .chip em { font-size: 9px; }
  .tg-memo { padding: 2px; }
  .tg-memo .memo-box textarea { font-size: 11px; padding: 2px 3px; min-height: 44px; resize: none; cursor: pointer; }
  .tg-memo .memo-state { display: none; }

  /* 표 → 카드 */
  .table-wrap { background: transparent; border: 0; overflow: visible; }
  /* 통계 표는 카드로 바꾸지 않고 표 안에서 옆으로 밀어 본다 (화면 전체가 넓어져 아래 탭바가 밀리지 않게) */
  .table-wrap.scroll-x { overflow-x: auto; background: var(--card); border: 1px solid var(--line); -webkit-overflow-scrolling: touch; }
  table.members { min-width: 0; }
  table.members thead { display: none; }
  table.members, table.members tbody, table.members tr, table.members td { display: block; width: 100%; }
  table.members tr { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-bottom: 10px; }
  table.members td { border: 0; padding: 3px 0; display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  table.members td::before { content: attr(data-label); color: var(--muted); font-size: 13px; font-weight: 400; text-align: left; flex: none; }
  table.members td.cell-name { display: block; text-align: left; font-size: 16px; padding-bottom: 6px; }
  table.members td.row-actions { justify-content: flex-start; flex-wrap: wrap; gap: 6px; padding-top: 8px; white-space: normal; }
  table.members td.cell-name::before, table.members td.row-actions::before, table.members td.empty::before { content: none; }
  table.members td.empty { display: block; text-align: center; }
  #member-table tr { padding: 8px 12px; margin-bottom: 6px; border-radius: 10px; }
  /* 이름 아래 항목은 2단 */
  #member-sort { display: none; }
  #add-member { margin-left: auto; }
  /* 상태·출강처·표시 항목을 한 줄에 */
  #tab-members .toolbar select { flex: 1 1 0; min-width: 0; }
  #tab-members .col-picker { flex: none; align-self: stretch; display: flex; }
  #col-picker-btn { padding: 0 12px; }
  #col-picker-btn .col-picker-label { display: none; }
  #member-table tr:not(:has(td.empty)) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 12px; }
  #member-table td { display: block; padding: 1px 0; font-size: 14px; text-align: left; min-width: 0; }
  #member-table td::before { display: inline; margin-right: 6px; font-size: 12px; white-space: nowrap; }
  #member-table .badge, #member-table .type-tag { white-space: nowrap; }
  #member-table td.cell-name, #member-table td.row-actions { grid-column: 1 / -1; }
  /* 휴대폰에서는 다음 결제·최근 결제를 빼고 2단 (표시 항목 메뉴에서도 숨김) */
  #member-table td[data-col="next"], #member-table td[data-col="last"],
  #col-options label:has(input[value="next"]), #col-options label:has(input[value="last"]) { display: none !important; }
  #member-table td.row-actions { display: flex; }
  #member-table td[data-col="last"], #member-table td[data-col="next"] { white-space: normal; }
  #member-table td.cell-name { font-size: 15px; padding-bottom: 3px; }
  #member-table td.cell-name b { font-size: 15px; }
  #member-table td.row-actions { padding-top: 5px; }
  #member-table .row-actions button { padding: 5px 11px; }
  /* 결제·이력은 남는 폭을 나눠 크게, 수정·삭제는 그대로 */
  #member-table td.row-actions { flex-wrap: nowrap; }
  #member-table .pay-spacer { display: none; }
  #member-table .row-actions [data-pay], #member-table .row-actions [data-history] { flex: 1 1 0; }
  #member-table .row-actions [data-edit], #member-table .row-actions [data-delete] { flex: none; }
  /* 이력: 카드 대신 촘촘한 줄 (시각 | 회원 구분 … | 버튼, 아래 작은 글씨로 내용·메모·처리) */
  .history-table { min-width: 0; display: block; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
  .history-table thead { display: none; }
  .history-table tbody { display: block; }
  .history-table tr { display: block; }
  .history-table td { display: block; padding: 0; }
  .history-table tr.h-day td { padding: 6px 10px 4px; }
  .history-table tr.h-item { display: grid; grid-template-columns: 40px auto minmax(0, 1fr) auto; column-gap: 8px; row-gap: 1px; align-items: center; padding: 4px 10px; }
  .history-table tr.h-item.t-start { border-top: 1px solid #edf0f4; }
  .history-table tr.h-day + tr.h-item { border-top: 0; }
  .history-table tr.h-item td { border: 0 !important; }
  .history-table .h-time { grid-column: 1; grid-row: 1; width: auto; font-size: 13px; }
  .history-table .h-name { grid-column: 2; grid-row: 1; }
  .history-table .h-tag { grid-column: 3; grid-row: 1; }
  .history-table .h-act { grid-column: 4; grid-row: 1; width: auto; }
  .history-table .h-detail, .history-table .h-memo, .history-table .h-stamp { grid-column: 2 / -1; font-size: 12px; color: var(--muted); white-space: normal; }
  .history-table .h-detail:empty, .history-table .h-memo:empty, .history-table .h-stamp:empty { display: none; }

  /* 팝업은 아래에서 올라오는 시트, 버튼은 엄지로 누르기 좋게 */
  dialog {
    width: 100vw; max-width: 100vw; margin: auto 0 0; max-height: 92vh;
    border-radius: 16px 16px 0 0; padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
  }
  /* 끌어내려 닫을 수 있다는 손잡이 */
  dialog::before { content: ''; position: absolute; top: 8px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #cbd5e1; }
  #member-dialog::before { content: none; } /* 회원 등록·수정은 끌어내려 닫지 않는다 */
  .actions { flex-wrap: wrap; }
  .actions button { flex: 1 1 45%; padding: 12px; font-size: 15px; }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}


/* 출강처 */
.wp-tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 6px; border-radius: 999px; background: #e0f2fe; color: #0369a1; vertical-align: 1px; }
.chip .w { font-size: 11px; font-weight: 600; color: #0369a1; } /* 출강처 이름 */
/* 휴대폰: 칸이 좁아 출강처 이름은 윗줄, 학생 이름은 아랫줄 */
@media (max-width: 700px) { .tg-col .chip .w { display: block; font-size: 9px; overflow: hidden; text-overflow: ellipsis; } }
.wp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 8em) auto; gap: 6px; margin-bottom: 6px; align-items: center; }
.wp-paid { display: flex; align-items: end; gap: 6px; margin: 6px 0; }
.wp-paid label { flex: 1; font-size: 13px; }
.cmp.warn { color: var(--warn); }
.wp-card details { margin-top: 6px; font-size: 13px; overflow-x: auto; }
.wp-card summary { cursor: pointer; color: var(--muted); }
.wp-lessons { width: 100%; border-collapse: collapse; margin-top: 4px; }
.wp-lessons td { padding: 3px 4px; border-top: 1px solid var(--line); white-space: nowrap; }
.wp-lessons td.absent { color: var(--danger); }

/* 시간 변경 범위: 이 날만 / 이 날부터 매주 */
.rs-scope { display: flex; gap: 16px; margin: 8px 0; font-size: 14px; }
.rs-scope label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* 복귀 예정: 문자 보내기 링크를 버튼처럼 */
a.button { display: inline-block; font: inherit; border-radius: 8px; padding: 7px 14px; text-decoration: none; background: #e5e7eb; color: var(--text); }
a.button.primary { background: var(--primary); color: #fff; }
a.button.small { padding: 3px 9px; font-size: 13px; }
small.plan { color: var(--primary); font-weight: 600; }


/* ---------- 설정 칸 (팝업·관리 화면 공통) ---------- */
.set-card { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 10px; padding: 10px 12px; }
.set-card h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; }
.set-card h4 small { font-weight: 500; margin-left: 4px; }
.set-desc { display: none; }
small.block { display: block; margin-top: 8px; line-height: 1.5; }
.choice-list { display: flex; flex-direction: column; gap: 6px; }
label.check.choice { align-items: flex-start; margin: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
label.check.choice input { margin-top: 3px; }
label.check.choice span { display: flex; flex-direction: column; gap: 1px; }
label.check.choice:has(input:checked) { border-color: var(--primary); background: #f0f6ff; }
.wp-head { display: none; }
.push-device { padding: 10px 12px; border-radius: 8px; background: #f8fafc; }
.push-device .meta { margin-bottom: 8px; }
.settings-actions { align-items: center; }
.settings-actions .error { flex: 1; margin: 0; }

/* ---------- 관리 화면 (관리자 톱니 버튼) ---------- */
.admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }
.admin-head h2 { margin: 0 0 4px; font-size: 22px; }
.admin-head .meta { margin: 0; }
#admin-back { flex: none; white-space: nowrap; }
.admin-layout { display: grid; grid-template-columns: 180px minmax(0, 820px); gap: 24px; align-items: start; }
.admin-nav { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 2px; }
.admin-nav button { display: block; width: 100%; text-align: left; padding: 9px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-weight: 600; font-size: 14px; }
.admin-nav button:hover { background: #eef2f7; color: var(--text); filter: none; }
.admin-nav button[aria-current="true"] { background: #e8efff; color: var(--primary); }
.admin-nav [hidden] { display: none !important; }
.admin-nav .nav-group { margin: 14px 12px 4px; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.04em; }
.panel-off { display: none !important; }
.inline-form { display: flex; gap: 8px; align-items: center; max-width: 480px; }
.inline-form input { flex: 1; min-width: 0; }
.inline-form button { flex: none; }
.admin-main .set-card { background: var(--card); border-radius: 12px; padding: 20px 24px; margin-bottom: 16px; scroll-margin-top: 72px; }
.admin-main .set-card h4 { font-size: 17px; margin-bottom: 4px; }
.admin-main .set-desc { display: block; margin: 0 0 16px; color: var(--muted); font-size: 13px; line-height: 1.5; }
.admin-main #settings-form > h3 { display: none; }
.admin-main textarea[name="types"] { max-width: 360px; }
.admin-main .choice-list { flex-direction: row; flex-wrap: wrap; }
.admin-main label.check.choice { flex: 1 1 220px; padding: 12px 14px; }
.admin-main .wp-head { display: grid; grid-template-columns: minmax(0, 1fr) 6.5em minmax(0, 8em) 2.4em; gap: 6px; margin-bottom: 4px; font-size: 12px; color: var(--muted); font-weight: 600; }
.admin-main .wp-row { grid-template-columns: minmax(0, 1fr) 6.5em minmax(0, 8em) 2.4em; }
.admin-main .push-daily textarea { max-width: 560px; }
/* 저장 버튼은 화면 아래에 붙어 있다 (설정 칸이 끝나면 함께 올라감) */
.admin-main .settings-actions {
  position: sticky; bottom: 0; z-index: 4; margin: 0 0 16px; padding: 12px 16px;
  background: color-mix(in srgb, var(--card) 92%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}
.admin-main .settings-actions button { min-width: 96px; }
/* 계정 표 */
.user-table { margin-bottom: 20px; }
.pw-row { display: flex; gap: 6px; align-items: center; }
.pw-row input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; }
.pw-row button { flex: none; }
.academy-made { margin: 0 0 12px; padding: 12px 14px; border: 1px solid #bbf7d0; background: #f0fdf4; border-radius: 10px; font-size: 14px; }
.academy-made pre { margin: 8px 0; white-space: pre-wrap; font-size: 13px; }
.user-table table.members { min-width: 0; }
.user-table input.user-name { max-width: 180px; padding: 5px 8px; }
.user-table select.user-role { width: auto; padding: 5px 8px; }
.user-table code { font-size: 13px; color: var(--muted); }
.badge.role-admin { background: #e8efff; color: var(--primary); font-weight: 700; }
.backup-head { margin: 20px 0 4px; padding-top: 16px; border-top: 1px dashed var(--line); font-size: 14px; }
.backup-head small { color: var(--muted); font-weight: 500; margin-left: 4px; }
.backup-list { list-style: none; margin: 0; padding: 0; max-height: 280px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.backup-list li { display: flex; align-items: center; gap: 10px; padding: 7px 12px; font-size: 14px; }
.backup-list li + li { border-top: 1px solid var(--line); }
.backup-list .b-name { flex: 1; min-width: 0; }
.backup-list .b-name small { color: var(--muted); margin-left: 6px; }
.backup-list .empty { color: var(--muted); justify-content: center; }
.user-add { border-top: 1px dashed var(--line); padding-top: 16px; }
.user-add h5 { margin: 0 0 10px; font-size: 14px; }
.user-add .actions { margin-top: 0; }

@media (max-width: 900px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  /* 메뉴는 위에 가로로, 넘치면 옆으로 밀기 */
  .admin-nav { top: 56px; z-index: 4; flex-direction: row; overflow-x: auto; padding: 6px 0; background: var(--bg); -webkit-overflow-scrolling: touch; }
  .admin-nav button { flex: none; width: auto; background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; font-size: 13px; }
  .admin-nav button[aria-current="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }
  .admin-nav .nav-group { display: none; }
}
@media (max-width: 700px) {
  .admin-head h2 { font-size: 19px; }
  .admin-head .meta { font-size: 13px; }
  .admin-nav { top: calc(52px + env(safe-area-inset-top)); }
  .admin-main .set-card { padding: 16px 14px; scroll-margin-top: calc(110px + env(safe-area-inset-top)); }
  .admin-main .set-card h4 { font-size: 16px; }
  .admin-main textarea[name="types"] { max-width: none; }
  .admin-main .settings-actions { bottom: calc(66px + env(safe-area-inset-bottom)); padding: 10px; }
  .admin-main .settings-actions .error { flex: 1 1 100%; }
  .admin-main .wp-head { display: none; }
  .admin-main .wp-row, .wp-row { grid-template-columns: minmax(0, 1fr) auto; }
  .wp-row .wp-amount { grid-column: 1; }
  .user-table input.user-name { max-width: none; flex: 1; }
  .user-table td.cell-name { display: flex; align-items: center; gap: 8px; }
}

/* 설정 칸 세부 정리 */
.settings-actions .error:empty { display: none; }
.settings-actions:has(.error:empty) { justify-content: flex-end; }
.push-daily input[type="time"] { width: auto; }
.push-daily label.check { white-space: nowrap; }
.set-card .meta { font-size: 14px; }
.admin-page .color-row input[type="color"], dialog .color-row input[type="color"] { width: 44px; height: 32px; }
.wp-head:has(+ #wp-rows:empty) { display: none; }
@media (max-width: 700px) {
  .user-table table.members td.cell-name { display: flex; align-items: center; gap: 8px; }
}

/* 30분 이하 수업: 시각·이름·출강처를 한 줄로 (넘치면 끝을 … 로) */
.tg-col .chip.short { flex-direction: row; align-items: center; gap: 4px; white-space: nowrap; }
.tg-col .chip.short .t { flex: none; }
.tg-col .chip.short .n { min-width: 0; }
/* 휴대폰은 칸이 좁아 출강처 이름까지 붙이면 '…'만 남는다 → 30분 칸은 학생 이름만 (출강처는 눌러서 보는 창에) */
@media (max-width: 700px) { .tg-col .chip.short .w { display: none; } }

/* 시각 표기: PC 주별 시간표는 오전/오후(오후 3시), 휴대폰과 월별 보기는 24시(15:00) */
.h12 { display: none; }
@media (min-width: 701px) {
  .calendar.week .h24 { display: none; }
  .calendar.week .h12 { display: inline; }
  .calendar.week .tg { grid-template-columns: 62px repeat(var(--days, 7), minmax(0, 1fr)); }
  .calendar.week .tg-now-label { white-space: nowrap; }
}

/* 휴강 기간의 원래 수업 자리: 연기처럼 노란 줄긋기, 보기만 (아래 빈 칸을 누를 수 있게) */
.chip.paused { background: #fef9c3; border: 1px dashed #eab308; border-left: 3px solid #eab308; color: #854d0e; text-decoration: line-through; opacity: 0.85; pointer-events: none; }
.chip.paused em { text-decoration: none; display: inline-block; color: #a16207; }

/* 스케줄 상단: 날짜와 ◀ ▶ 는 가운데. 날짜 칸 폭을 고정해서 날짜가 바뀌어도 화살표 위치가 그대로 */
.sched-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
.sched-bar .bar-side { display: flex; align-items: center; gap: 8px; }
.sched-bar .bar-side.end { justify-content: flex-end; }
.sched-bar .bar-center { display: flex; align-items: center; gap: 8px; }
.sched-bar #range-title { width: 19.5em; margin: 0; white-space: nowrap; } /* 아래 '날짜 이동 묶음'에서 다시 정함 */
@media (max-width: 700px) {
  .sched-bar { display: flex; }
  .sched-bar .bar-side { display: contents; }
  .sched-bar .bar-center { flex: 1; min-width: 0; }
  .sched-bar #range-title { width: auto; flex: 1; min-width: 0; }
}
.sched-bar button { white-space: nowrap; }
@media (min-width: 701px) and (max-width: 1000px) { .sched-bar #range-title { font-size: 17px; } } /* 좁은 PC: 날짜 칸(폭은 글자 크기에 비례)을 줄여 한 줄에 */

/* 켜기/끄기 스위치 (스케줄 '토요일') */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 38px; height: 22px; border-radius: 999px; background: #cbd5e1; transition: background 0.15s; flex: none; }
.switch-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.25); transition: transform 0.15s; }
.switch input:checked + .switch-track { background: var(--primary); }
.switch input:checked + .switch-track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch-track { outline: 2px solid var(--primary); outline-offset: 2px; }


/* ---------- 스케줄 날짜 이동 묶음: ‹ 2026년 11월 2일 – 6일 › ---------- */
.date-nav {
  gap: 2px !important; padding: 4px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.nav-arrow {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 36px; height: 36px; padding: 0; border-radius: 50%; border: 0;
  background: transparent; color: var(--text); transition: background 0.15s, color 0.15s;
}
.nav-arrow:hover { background: #eef2ff; color: var(--primary); filter: none; }
.nav-arrow:active { background: #e0e7ff; }
.nav-arrow:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.sched-bar #range-title {
  width: 17.5rem; height: 36px; display: flex; align-items: baseline; justify-content: center; gap: 8px;
  padding: 0 12px; border-radius: 999px; font-size: 17px; font-weight: 700; line-height: 36px;
  letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--text); transition: background 0.15s, color 0.15s;
}
#range-title:hover { background: #f1f5f9; }
.rt-year { font-size: 13px; font-weight: 600; color: var(--muted); }
.rt-span { overflow: hidden; text-overflow: ellipsis; }
/* 이번 주(달)를 보고 있으면 파란 글자 + 연한 파란 배경 */
.sched-bar #range-title.current { color: var(--primary); background: #eef2ff; }
#range-title.current .rt-year { color: var(--primary); opacity: 0.75; }
@media (min-width: 701px) and (max-width: 1000px) { .sched-bar #range-title { width: 16rem; font-size: 16px; } }
@media (max-width: 700px) {
  .date-nav { padding: 3px; }
  .nav-arrow { width: 34px; height: 34px; }
  .sched-bar #range-title { width: auto; height: 34px; line-height: 34px; padding: 0 6px; gap: 6px; font-size: 15px; }
  .rt-year { font-size: 12px; }
}