/* 신버전 시간표의 창·단추(src/ttproto/dialog.js · editors.js)
   — tt-proto.html(신버전 창)과 본 시간표 탭(index.html — «수업 시간 설정» 창, src/ui/ttClassTimeUI.js)이 함께 쓴다(2026-10-20).
   이름이 모두 tp- 로 시작해 다른 화면과 부딪히지 않는다. 색 값은 창 안에서만 정한다(본 앱의 :root 와 섞이지 않게). */
.tp-modal-back, .tp-toast, .tp-loader, .tp-float {
  --bg: #f4f6fa; --card: #ffffff; --line: #e2e8f0; --line2: #cbd5e1; --text: #0f172a; --muted: #64748b;
  --accent: #0f766e; --accent-soft: #f0fdfa; --primary: #4f46e5; --danger: #dc2626;
}
.tp-modal { color: #0f172a; }
.tp-modal svg.lucide, .tp-toast svg.lucide, .tp-float svg.lucide { width: 15px; height: 15px; flex-shrink: 0; }
.tp-modal input, .tp-modal select { color: #0f172a; background: #fff; }

.tp-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 8px;
  border: 1px solid var(--line2); background: #fff; color: var(--text); font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.tp-btn:hover:not(:disabled) { background: #f8fafc; border-color: #94a3b8; }
.tp-btn:disabled { opacity: .45; cursor: default; }
.tp-btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.tp-btn-primary:hover:not(:disabled) { background: #4338ca; border-color: #4338ca; }
.tp-btn-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.tp-btn-accent:hover:not(:disabled) { background: #115e59; border-color: #115e59; }
.tp-btn-danger { color: var(--danger); border-color: #fecaca; }
.tp-btn-danger:hover:not(:disabled) { background: #fef2f2; }
.tp-btn-sm { padding: 5px 9px; font-size: 12px; }
.tp-iconbtn { padding: 7px 8px; }

/* ── 대화상자 ── */
.tp-modal-back { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; }
.tp-modal { background: #fff; border-radius: 14px; width: min(520px, 100%); max-height: calc(100vh - 40px); display: flex; flex-direction: column; box-shadow: 0 20px 50px rgba(15,23,42,.3); }
.tp-modal-wide { width: min(1100px, 100%); }
.tp-modal-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--line); font-weight: 800; font-size: 15px; }
.tp-x { margin-left: auto; border: none; background: none; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 6px; display: flex; }
.tp-x:hover { background: #f1f5f9; }
.tp-modal-body { padding: 16px 18px; overflow: auto; }
.tp-modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); }
.tp-msg { margin: 0; line-height: 1.6; }
.tp-form { display: flex; flex-direction: column; gap: 12px; }
.tp-field { display: flex; flex-direction: column; gap: 5px; }
.tp-field > span { font-size: 12px; font-weight: 800; color: var(--muted); }
.tp-field input[type=text], .tp-field select { padding: 8px 10px; border: 1px solid var(--line2); border-radius: 8px; font-size: 14px; }
.tp-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tp-chips { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tp-chip { padding: 5px 11px; border-radius: 20px; border: 1px solid var(--line2); background: #fff; font-size: 12.5px; font-weight: 700; cursor: pointer; color: #334155; }
.tp-chip:hover { border-color: #94a3b8; }
.tp-chip.on { background: #eef2ff; border-color: #818cf8; color: #3730a3; }
.tp-chipsep { width: 1px; height: 18px; background: var(--line2); margin: 0 3px; }
.tp-hint { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); font-weight: 600; margin: 0 0 4px; }
.tp-swatches { display: flex; gap: 6px; }
.tp-swatch input { display: none; }
.tp-swatch span { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line2); cursor: pointer; font-size: 11px; font-weight: 800; color: var(--muted); }
.tp-swatch.on span { box-shadow: 0 0 0 2px var(--primary); }
.tp-trange { display: flex; align-items: center; gap: 6px; }
.tp-trange input, .tp-tslot input, .tp-bulk input { padding: 5px 6px; border: 1px solid var(--line2); border-radius: 6px; font-size: 13px; }
.tp-formbtns { display: flex; justify-content: space-between; margin-top: 4px; }
.tp-mini { display: inline-flex; align-items: center; justify-content: center; padding: 4px; border: 1px solid var(--line2); background: #fff; border-radius: 6px; cursor: pointer; color: #475569; }
.tp-mini:hover:not(:disabled) { background: #f1f5f9; }
.tp-mini:disabled { opacity: .35; cursor: default; }
.tp-mini svg { width: 13px; height: 13px; }
.tp-empty { color: var(--muted); font-size: 13px; }

/* 상세 설정 — 요일 × 반 표 */
.tp-detail { position: relative; }
.tp-timing { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 12px; background: #fefce8; border: 1px solid #fde68a; border-radius: 10px; margin-bottom: 10px; font-size: 13px; font-weight: 700; }
.tp-timing-title { display: inline-flex; align-items: center; gap: 5px; color: #854d0e; font-weight: 800; }
.tp-timing label { display: inline-flex; align-items: center; gap: 5px; }
.tp-timing input { padding: 4px 6px; border: 1px solid var(--line2); border-radius: 6px; font-size: 13px; }
.tp-timing input[type=number] { width: 58px; }
.tp-matrix { border-collapse: separate; border-spacing: 0; width: 100%; margin-top: 6px; }
.tp-matrix th, .tp-matrix td { padding: 4px; text-align: center; border-bottom: 1px solid var(--line); }
.tp-matrix thead th { font-size: 14px; font-weight: 800; color: #0369a1; background: #e0f2fe; position: sticky; top: -16px; z-index: 1; }
.tp-matrix thead th.is-focus, .tp-matrix td.is-focus { background: #f0f9ff; }
.tp-matrix tbody th { text-align: left; font-size: 13px; white-space: nowrap; padding-left: 10px; width: 120px; }
.tp-mx-grow th, .tp-mx-grow td { background: #f8fafc; }
.tp-mx-grow th { font-weight: 800; color: #334155; }
.tp-mx-cls { font-weight: 700; color: #475569; padding-left: 22px !important; }
.tp-mx-del { border: none; background: none; color: #cbd5e1; cursor: pointer; padding: 2px; margin-left: 4px; vertical-align: middle; border-radius: 4px; }
.tp-mx-del:hover { color: var(--danger); background: #fef2f2; }
.tp-mx-del svg { width: 12px; height: 12px; }
.tp-mx { min-width: 74px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-size: 13px; font-weight: 700; color: #475569; cursor: pointer; }
.tp-mx:hover { border-color: #94a3b8; background: #f8fafc; }
.tp-mx-own { background: #ccfbf1; border-color: #5eead4; color: #0f766e; font-weight: 800; }
.tp-mx-own:hover { background: #99f6e4; }
.tp-mx-grade { border-style: dashed; }
.tp-mx-off { border: 1px dashed transparent; background: none; color: #cbd5e1; font-size: 15px; }
.tp-mx-off:hover { border-color: var(--line2); color: #64748b; background: #fff; }
.tp-mx-demo { background: #ccfbf1; color: #0f766e; padding: 0 6px; border-radius: 5px; font-weight: 800; }
.tp-addrow { display: flex; align-items: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tp-addrow input[type=text] { width: 150px; padding: 6px 9px; border: 1px dashed var(--line2); border-radius: 8px; font-size: 13px; }
.tp-movecells { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: #475569; cursor: pointer; }
.tp-pop { position: absolute; z-index: 5; width: 240px; background: #fff; border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 12px 30px rgba(15,23,42,.18); padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.tp-pop-title { font-size: 12.5px; font-weight: 800; color: #334155; }
.tp-pop-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tp-pop-chips small { font-size: 10px; color: var(--muted); font-weight: 700; }
.tp-pop-custom { display: flex; gap: 6px; }
.tp-pop-custom input { flex: 1; padding: 5px 6px; border: 1px solid var(--line2); border-radius: 6px; }

.tp-mx-sub { display: block; font-size: 10px; font-weight: 700; opacity: .85; margin-top: 1px; }
.tp-pop-more { border-top: 1px solid var(--line); padding-top: 6px; }
.tp-pop-more summary { cursor: pointer; font-size: 12px; font-weight: 800; color: #475569; }
.tp-pop-more summary b { color: #0f766e; font-size: 11px; margin-left: 4px; }
.tp-pop-timing { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 6px; font-size: 12px; font-weight: 700; }
.tp-pop-timing label { display: inline-flex; align-items: center; gap: 3px; }
.tp-pop-timing input { width: 48px; padding: 3px 4px; border: 1px solid var(--line2); border-radius: 6px; font-size: 12px; }
.tp-pop-row { display: flex; gap: 6px; }

.tp-float { position: fixed; z-index: 60; width: 280px; }
.tp-float .tp-btn { justify-content: flex-start; }
.tp-float-grp { display: flex; gap: 8px; align-items: flex-start; }
.tp-float-grp > span { flex-shrink: 0; width: 44px; font-size: 11.5px; font-weight: 800; color: var(--muted); padding-top: 6px; }
.tp-chip-custom { border-style: dashed; color: #b45309; }
.tp-custom-tag { font-size: 10.5px; color: #b45309; background: #fef3c7; padding: 1px 6px; border-radius: 8px; }
.tp-warn { display: flex; gap: 6px; align-items: flex-start; font-size: 11.5px; font-weight: 700; color: #b45309; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 7px 8px; line-height: 1.45; }
.tp-warn[hidden] { display: none; }
.tp-warn svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; }

/* 이미지 창 — 뒤의 표가 보이게 오른쪽 위에 붙인다 */
.tp-modal-dock { background: none; pointer-events: none; align-items: flex-start; justify-content: flex-end; padding: 96px 20px 20px; }
.tp-modal-dock .tp-modal { pointer-events: auto; width: 420px; box-shadow: 0 16px 40px rgba(15,23,42,.28); }

.tp-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 20px); background: #0f172a; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 700; opacity: 0; transition: .2s; z-index: 300; pointer-events: none; }
.tp-toast.on { opacity: 1; transform: translate(-50%, 0); }
.tp-loader { position: fixed; inset: 0; z-index: 400; background: rgba(255,255,255,.7); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; font-weight: 800; }
.tp-spin { width: 34px; height: 34px; border: 3px solid #c7d2fe; border-top-color: var(--primary); border-radius: 50%; animation: tpspin .8s linear infinite; }
@keyframes tpspin { to { transform: rotate(360deg); } }

/* 표 위 반 넣기·빼기 — 요일 머리 [＋]·반 이름(신버전 창과 본 시간표 탭이 함께 — src/ui/ttClassEditUI.js) */
.tp-addcls-btn { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; margin-left: 2px; border-radius: 6px; border: 1px dashed #7dd3fc; background: #fff; color: #0369a1; cursor: pointer; vertical-align: middle; }
.tp-addcls-btn:hover { border-style: solid; background: #e0f2fe; }
.tp-addcls-btn svg { width: 12px; height: 12px; }
#timetableMainTable th.tp-clshead { cursor: pointer; }
#timetableMainTable th.tp-clshead:hover { text-decoration: underline; }
#timetableMainTable th.tp-cls-custom { font-style: italic; text-decoration: underline dashed #f59e0b; text-underline-offset: 3px; }
.tp-chip-custom { border-style: dashed; color: #b45309; }
.tp-custom-tag { font-size: 10.5px; color: #b45309; background: #fef3c7; padding: 1px 6px; border-radius: 8px; }
.tp-empty { color: var(--muted); font-size: 13px; }
.tp-float { color: #0f172a; }

/* 시간 일정 — 빠른 추가 */
.tp-quick { border: 1px solid #99f6e4; background: #f0fdfa; border-radius: 10px; padding: 10px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.tp-quick-title { display: flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 800; color: #0f766e; }
.tp-quick-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tp-seg-mini { display: inline-flex; padding: 2px; gap: 2px; background: #fff; border: 1px solid var(--line2); border-radius: 8px; }
.tp-seg-mini button { border: none; background: none; padding: 5px 10px; border-radius: 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); cursor: pointer; }
.tp-seg-mini button.on { background: #0f766e; color: #fff; }
.tp-q-min { display: inline-flex; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; }
.tp-q-min input { width: 56px; padding: 5px 6px; border: 1px solid var(--line2); border-radius: 6px; font-size: 13px; }
.tp-q-text { flex: 1; min-width: 180px; padding: 6px 9px; border: 1px solid var(--line2); border-radius: 8px; font-size: 13px; }
.tp-q-label { font-size: 12px; font-weight: 800; color: var(--muted); margin: 0 2px 0 6px; }
.tp-q-label:first-child { margin-left: 0; }
.tp-chip:disabled { opacity: .35; cursor: default; }
.tp-quick-foot { justify-content: space-between; align-items: flex-start; flex-wrap: nowrap; }
.tp-q-preview { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 12px; color: #134e4a; }
.tp-q-item b { margin-right: 2px; }
.tp-q-muted { color: var(--muted); }