* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  background: #f0f2f5;
  display: flex;
  height: 100vh;
  overflow: hidden;
}

/* ── 좌측 패널 ── */
#left-panel {
  width: 370px;
  min-width: 300px;
  background: #fff;
  border-right: 2px solid #dee2e6;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 2px 0 8px rgba(0,0,0,0.08);
  z-index: 1;
}

#panel-header {
  background: #1e3a5f;
  color: #fff;
  padding: 10px 14px;
  flex-shrink: 0;
}
#panel-title { font-size: 15px; font-weight: bold; letter-spacing: 0.5px; }
#panel-school {
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-top: 2px;
  min-height: 16px;
}
#panel-school.loaded { color: #7ecfff; }

/* 프리셋 툴바 */
#preset-toolbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
  padding: 7px 10px;
  border-bottom: 1px solid #dce4f0;
  background: #eaf0fb;
  flex-shrink: 0;
}
.preset-btn {
  padding: 5px 4px;
  font-size: 11px;
  border: 1px solid #b8cde8;
  background: #fff;
  border-radius: 5px;
  cursor: pointer;
  color: #1e3a5f;
  font-family: inherit;
  transition: background 0.15s;
  text-align: center;
  white-space: nowrap;
}
.preset-btn:hover { background: #d4e6f7; }
.preset-btn.accent { background: #1e7de8; color: #fff; border-color: #1666cc; }
.preset-btn.accent:hover { background: #1666cc; }

/* 추가 폼 */
#add-form {
  padding: 8px 10px;
  border-bottom: 1px solid #eee;
  display: flex;
  gap: 4px;
  align-items: flex-end;
  flex-shrink: 0;
  background: #f8f9fa;
}
.form-label { font-size: 10px; color: #999; display: block; margin-bottom: 2px; }
.form-group { display: flex; flex-direction: column; }
#add-form select, #add-form input[type=number] {
  padding: 5px 6px;
  border: 1px solid #ced4da; border-radius: 5px;
  font-size: 13px; font-family: inherit; background: #fff;
}
#sel-grade { width: 70px; }
#sel-class { width: 55px; }
#inp-count  { width: 52px; }
#add-btn {
  padding: 6px 10px;
  background: #1e7de8; color: #fff;
  border: none; border-radius: 5px;
  cursor: pointer; font-size: 13px;
  font-family: inherit; white-space: nowrap;
  transition: background 0.15s; height: 31px;
}
#add-btn:hover { background: #1666cc; }

/* 학반 목록 */
#class-list { flex: 1; overflow-y: auto; padding: 7px; }
#class-list-empty { color: #bbb; font-size: 13px; text-align: center; margin-top: 24px; line-height: 1.8; }
.class-item {
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px 10px; margin-bottom: 5px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  user-select: none;
}
.class-item:hover { border-color: #adb5bd; }
.class-item.selected { border-color: #1e7de8; background: #e8f2ff; }
.class-item-header { display: flex; align-items: center; gap: 6px; }
.class-color-dot {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.15);
}
.class-name { font-weight: bold; font-size: 14px; flex: 1; }
.class-count-badge {
  font-size: 12px; color: #555;
  background: #e9ecef; border-radius: 10px; padding: 1px 7px;
}
.class-btns { display: flex; gap: 2px; flex-shrink: 0; }
.btn-icon {
  background: none; border: 1px solid #ced4da; border-radius: 4px;
  cursor: pointer; font-size: 11px; padding: 2px 6px; color: #555;
  font-family: inherit; transition: background 0.1s, color 0.1s; line-height: 1.4;
}
.btn-icon:disabled { opacity: 0.3; cursor: default; }
.btn-icon:not(:disabled):hover { background: #e9ecef; }
.btn-icon.del:not(:disabled):hover { background: #ffe0e0; color: #c0392b; border-color: #e74c3c; }

/* 배정 좌석 pills */
.class-seats-info { margin-top: 7px; padding-top: 7px; border-top: 1px solid #dee2e6; }
.seats-info-label {
  font-size: 10px; color: #999;
  letter-spacing: 0.3px; font-weight: 600; margin-bottom: 4px; text-transform: uppercase;
}
.seat-pills { display: flex; flex-wrap: wrap; gap: 3px; }
.seat-pill {
  display: inline-flex; align-items: center; gap: 3px;
  background: #eef3ff; border: 1px solid #c7d7f5;
  border-radius: 5px; padding: 3px 8px; font-size: 12px; color: #1e3a5f; line-height: 1.3;
}
.seat-pill-row { font-weight: bold; color: #1e7de8; }
.seat-pill-nums { color: #333; }

/* 인라인 편집 */
.edit-row { display: flex; align-items: center; gap: 5px; margin-top: 5px; }
.edit-count-input {
  width: 55px; padding: 3px 6px;
  border: 1.5px solid #1e7de8; border-radius: 4px;
  font-size: 13px; font-family: inherit;
}
.btn-save {
  padding: 3px 9px; background: #1e7de8; color: #fff;
  border: none; border-radius: 4px; font-size: 12px;
  cursor: pointer; font-family: inherit;
}
.btn-save:hover { background: #1666cc; }

/* 하단 바 */
#bottom-bar {
  padding: 9px 11px; border-top: 1px solid #dee2e6;
  background: #f8f9fa; flex-shrink: 0;
}
#total-info { font-size: 12px; color: #666; text-align: center; margin-bottom: 7px; }
#total-info.over { color: #e74c3c; font-weight: bold; }
.bottom-btns { display: flex; gap: 6px; }
#arrange-btn {
  flex: 1; padding: 9px;
  background: #27ae60; color: #fff;
  border: none; border-radius: 6px;
  cursor: pointer; font-size: 15px; font-weight: bold;
  font-family: inherit; transition: background 0.15s;
}
#arrange-btn:hover { background: #219a52; }
#reset-btn {
  padding: 9px 12px; background: #95a5a6; color: #fff;
  border: none; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-family: inherit; transition: background 0.15s; white-space: nowrap;
}
#reset-btn:hover { background: #7f8c8d; }

/* ── 우측 패널 ── */
#right-panel { flex: 1; overflow: auto; padding: 22px 20px; display: flex; flex-direction: column; align-items: center; }
#stage-label {
  background: #2c3e50; color: #ecf0f1;
  padding: 8px 48px; border-radius: 6px;
  font-size: 13px; letter-spacing: 3px;
  margin-bottom: 18px; flex-shrink: 0;
}
#seat-map { display: flex; flex-direction: column; gap: 4px; align-items: stretch; width: 100%; max-width: 720px; }
.seat-row { display: flex; align-items: center; }
.row-label { font-weight: bold; font-size: 12px; color: #6c757d; width: 26px; text-align: center; flex-shrink: 0; }
.seats-container { flex: 1; display: flex; justify-content: center; gap: 3px; }
.seat {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid #ced4da; background: #e9ecef;
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: #adb5bd;
  transition: all 0.15s; cursor: default;
  flex-shrink: 0; font-weight: 500; letter-spacing: -0.3px;
}
.seat.assigned { border-color: transparent; color: rgba(255,255,255,0); font-size: 7px; font-weight: bold; }
.seat.dimmed { opacity: 0.13; }
.seat.highlighted {
  color: rgba(255,255,255,0.95) !important; font-size: 7px;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1e3a5f;
  transform: scale(1.2); z-index: 2;
}
#legend {
  margin-top: 18px; display: flex; flex-wrap: wrap;
  gap: 6px; justify-content: center; max-width: 720px;
}
.legend-item {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; color: #555; cursor: pointer;
  padding: 3px 8px; border-radius: 12px;
  border: 1.5px solid transparent; transition: border-color 0.15s;
}
.legend-item:hover { border-color: #aaa; }
.legend-item.selected { border-color: #1e3a5f; background: #f0f4ff; }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }

/* ════════════════════════════════════
   모달 공통
   ════════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.48); z-index: 200;
  align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }
.modal {
  background: #fff; border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.28);
  width: 560px; max-width: 96vw; max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal.wide { width: 780px; }
.modal-header {
  background: #1e3a5f; color: #fff;
  padding: 13px 16px; font-size: 15px; font-weight: bold;
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.modal-close {
  background: none; border: none; color: rgba(255,255,255,0.65);
  font-size: 22px; cursor: pointer; padding: 0 2px; line-height: 1;
}
.modal-close:hover { color: #fff; }
.modal-body { overflow-y: auto; padding: 16px; flex: 1; }
.modal-footer {
  padding: 11px 16px; border-top: 1px solid #eee;
  display: flex; gap: 8px; justify-content: flex-end;
  flex-shrink: 0; background: #fafafa;
}

/* 프리셋 목록 모달 */
.no-presets { text-align: center; color: #bbb; font-size: 13px; padding: 20px 0; line-height: 2; }
.preset-list-item {
  display: flex; align-items: center;
  padding: 10px 12px; border: 1px solid #dee2e6;
  border-radius: 7px; margin-bottom: 6px; gap: 8px;
  transition: background 0.1s;
}
.preset-list-item:hover { background: #f8f9fa; }
.preset-school-name { flex: 1; font-weight: bold; font-size: 14px; }
.preset-school-meta { font-size: 11px; color: #999; }
.btn-load {
  padding: 4px 11px; background: #1e7de8; color: #fff;
  border: none; border-radius: 4px; font-size: 12px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.btn-load:hover { background: #1666cc; }
.btn-sm {
  padding: 4px 8px; background: none;
  border: 1px solid #ced4da; border-radius: 4px;
  font-size: 12px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.btn-sm:hover { background: #e9ecef; }
.btn-sm.danger { border-color: #e74c3c; color: #e74c3c; }
.btn-sm.danger:hover { background: #ffe0e0; }

.share-notice {
  background: #fffbe6; border: 1px solid #f0c040;
  border-radius: 6px; padding: 10px 13px;
  font-size: 12px; color: #665500; line-height: 1.7;
  margin-bottom: 14px;
}
.share-notice strong { color: #333; }

.save-section { border-top: 1px solid #eee; margin-top: 14px; padding-top: 14px; }
.save-section h4 { font-size: 13px; color: #444; margin-bottom: 8px; }
.save-row { display: flex; gap: 6px; }
.save-row input {
  flex: 1; padding: 6px 10px;
  border: 1px solid #ced4da; border-radius: 5px;
  font-size: 13px; font-family: inherit;
}
.btn-green {
  padding: 6px 14px; background: #27ae60; color: #fff;
  border: none; border-radius: 5px; font-size: 13px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.btn-green:hover { background: #219a52; }
.btn-blue {
  padding: 8px 22px; background: #1e7de8; color: #fff;
  border: none; border-radius: 6px; font-size: 14px;
  font-weight: bold; cursor: pointer; font-family: inherit;
}
.btn-blue:hover { background: #1666cc; }
.btn-cancel {
  padding: 8px 16px; background: #f8f9fa;
  border: 1px solid #ced4da; border-radius: 6px;
  font-size: 14px; cursor: pointer; font-family: inherit;
}
.btn-cancel:hover { background: #e9ecef; }

/* ════ 학교 편집 모달 ════ */
.editor-two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 620px) { .editor-two-col { grid-template-columns: 1fr; } }

.editor-section { margin-bottom: 14px; }
.editor-section h4 {
  font-size: 11px; color: #999; letter-spacing: 0.4px;
  margin-bottom: 7px; text-transform: uppercase; font-weight: 700;
  display: flex; align-items: center; gap: 8px;
}
.school-name-input {
  width: 100%; padding: 8px 12px;
  border: 1.5px solid #ced4da; border-radius: 6px;
  font-size: 15px; font-family: inherit;
}
.school-name-input:focus { outline: none; border-color: #1e7de8; }

/* 좌석 행 편집 */
#editor-row-list {
  border: 1px solid #eee; border-radius: 6px;
  max-height: 220px; overflow-y: auto; padding: 4px;
  margin-bottom: 7px;
}
#editor-row-list-empty { text-align: center; color: #ccc; font-size: 12px; padding: 12px 0; }
.row-edit-item {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 4px; border-radius: 4px;
}
.row-edit-item:hover { background: #f8f9fa; }
.rei-name-input {
  width: 42px; padding: 3px 5px; text-align: center;
  border: 1px solid #ddd; border-radius: 4px;
  font-size: 13px; font-family: inherit; font-weight: bold;
}
.rei-count-input {
  width: 46px; padding: 3px 5px; text-align: center;
  border: 1px solid #ddd; border-radius: 4px;
  font-size: 13px; font-family: inherit;
}
.rei-label { font-size: 12px; color: #888; flex: 1; }
.btn-del-row {
  background: none; border: none; color: #ccc;
  cursor: pointer; font-size: 15px; padding: 0 2px; line-height: 1;
}
.btn-del-row:hover { color: #e74c3c; }

.add-row-form {
  display: flex; gap: 5px; align-items: center; flex-wrap: wrap;
}
.add-row-form input {
  padding: 4px 6px; border: 1px solid #ced4da;
  border-radius: 4px; font-size: 13px; font-family: inherit;
}
.arf-name { width: 44px; text-align: center; }
.arf-count { width: 52px; }
.btn-add-row {
  padding: 4px 10px; background: #6c757d; color: #fff;
  border: none; border-radius: 4px; font-size: 12px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.btn-add-row:hover { background: #5a6268; }
.btn-link {
  background: none; border: none; color: #1e7de8;
  font-size: 11px; cursor: pointer; text-decoration: underline;
  font-family: inherit; padding: 0;
}
.btn-link:hover { color: #1666cc; }

/* 학반 편집 (우측 컬럼) — 라벨을 위로 올려 입력칸 폭을 확보한다 */
.batch-row, .indiv-row { display: flex; gap: 6px; align-items: flex-end; }
.batch-row .form-group, .indiv-row .form-group { flex: 1 1 0; min-width: 0; }
.batch-row .form-group.grade, .indiv-row .form-group.grade { flex: 0 0 76px; }
.batch-row select, .batch-row input,
.indiv-row select, .indiv-row input {
  width: 100%; padding: 6px 8px;
  border: 1px solid #ced4da; border-radius: 5px;
  font-size: 13px; font-family: inherit; background: #fff;
}
.batch-row input::placeholder, .indiv-row input::placeholder { color: #bbb; }
.btn-batch, .btn-indiv {
  flex: 0 0 auto; height: 31px;
  padding: 0 12px; color: #fff;
  border: none; border-radius: 5px; font-size: 13px;
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.btn-batch { background: #6c757d; }
.btn-batch:hover { background: #5a6268; }
.btn-indiv { background: #1e7de8; }
.btn-indiv:hover { background: #1666cc; }

.editor-divider { height: 1px; background: #f0f0f0; margin: 10px 0; }

#editor-class-list {
  max-height: 200px; overflow-y: auto;
  border: 1px solid #eee; border-radius: 6px; padding: 4px 6px;
}
#editor-class-list-empty { text-align: center; color: #ccc; font-size: 12px; padding: 12px 0; }
.editor-class-row {
  display: flex; align-items: center;
  padding: 3px 5px; border-radius: 4px; gap: 6px; font-size: 13px;
}
.editor-class-row:hover { background: #f8f9fa; }
.editor-class-row.editing { background: #eef5ff; }
.ecr-name { flex: 1; color: #333; }
.ecr-count { font-size: 12px; color: #777; }
.editor-class-row .edit-count-input { width: 62px; }
.btn-edit-ecr, .btn-del-ecr {
  background: none; border: none; color: #ccc;
  cursor: pointer; font-size: 14px; padding: 0 3px; line-height: 1;
}
.btn-edit-ecr:hover { color: #1e7de8; }
.btn-del-ecr { font-size: 15px; }
.btn-del-ecr:hover { color: #e74c3c; }

/* 총계 바 */
.editor-summary {
  font-size: 11px; color: #888; padding: 4px 6px;
  background: #f8f9fa; border-radius: 4px; margin-top: 6px;
}

/* ════════════════════════════════════
   이미지 저장
   ════════════════════════════════════ */
#img-btn {
  padding: 9px 12px; background: #34495e; color: #fff;
  border: none; border-radius: 6px; cursor: pointer;
  font-size: 13px; font-family: inherit; transition: background 0.15s; white-space: nowrap;
}
#img-btn:hover:not(:disabled) { background: #2c3e50; }
#img-btn:disabled { background: #c8cdd2; cursor: default; }

/* ════════════════════════════════════
   공유 · 저장 상태
   ════════════════════════════════════ */
#save-status { font-size: 11px; margin-top: 3px; min-height: 14px; color: rgba(255,255,255,0.55); }
#save-status.ok  { color: #8fe3a8; }
#save-status.err { color: #ff9d9d; }

.share-field { margin-bottom: 13px; }
.share-field label {
  display: block; font-size: 12px; color: #555;
  font-weight: bold; margin-bottom: 4px;
}
.share-field input {
  width: 100%; padding: 8px 10px;
  border: 1px solid #ced4da; border-radius: 6px;
  font-size: 14px; font-family: inherit;
}
.share-field input:focus { outline: none; border-color: #1e7de8; }
.share-hint { font-size: 11px; color: #888; line-height: 1.6; margin-top: 5px; }

.link-row { display: flex; gap: 6px; }
.link-row input {
  flex: 1; background: #f4f7fb; color: #1e3a5f;
  font-size: 13px; font-family: 'Consolas', monospace;
}
.link-row button { white-space: nowrap; padding: 8px 14px; }

/* ════════════════════════════════════
   보기 전용 모드
   ════════════════════════════════════ */
#viewer-bar { display: none; }

body.view-mode #left-panel { display: none; }
body.view-mode #viewer-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  width: 100%; max-width: 900px;
  background: #fff; border: 1px solid #dee2e6; border-radius: 10px;
  padding: 12px 16px; margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
#viewer-school { font-size: 17px; font-weight: bold; color: #1e3a5f; }
#viewer-title  { font-size: 12px; color: #7f8c8d; margin-top: 2px; }
#viewer-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.viewer-btn {
  padding: 7px 12px; font-size: 12px;
  border: 1px solid #ced4da; background: #fff; color: #37474f;
  border-radius: 6px; cursor: pointer; font-family: inherit;
  transition: background 0.15s;
}
.viewer-btn:hover { background: #eef2f7; }
.viewer-btn.primary { background: #1e7de8; color: #fff; border-color: #1666cc; }
.viewer-btn.primary:hover { background: #1666cc; }

/* 보기 전용에서는 좌석맵을 넓게 */
body.view-mode #right-panel { padding-top: 16px; }
body.view-mode #seat-map, body.view-mode #legend { max-width: 900px; }

/* ════════════════════════════════════
   좁은 화면 (선생님들이 폰으로 열어보는 경우)
   ════════════════════════════════════ */
@media (max-width: 720px) {
  body.view-mode #right-panel { padding: 12px 10px; }
  body.view-mode #seat-map { min-width: max-content; }
  body.view-mode .seat { width: 20px; height: 20px; }
}

/* ════════════════════════════════════
   학교 선택 — 탭 · 검색 · 공개 목록
   ════════════════════════════════════ */
.tab-bar {
  display: flex; gap: 4px;
  border-bottom: 2px solid #e5e9ef; margin-bottom: 12px;
}
.tab-btn {
  padding: 8px 16px; background: none; border: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  font-size: 14px; color: #888; cursor: pointer; font-family: inherit;
}
.tab-btn:hover { color: #1e3a5f; }
.tab-btn.active { color: #1e7de8; border-bottom-color: #1e7de8; font-weight: bold; }

.search-row { position: relative; margin-bottom: 12px; }
.search-row .search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: 0.5; pointer-events: none;
}
#school-search {
  width: 100%; padding: 8px 12px 8px 32px;
  border: 1px solid #ced4da; border-radius: 6px;
  font-size: 14px; font-family: inherit;
}
#school-search:focus { outline: none; border-color: #1e7de8; }

.catalog-item .catalog-main { flex: 1; min-width: 0; }
.catalog-item .preset-school-name { flex: none; }
.catalog-item .preset-school-meta { margin-top: 2px; }
.mine-badge {
  font-size: 10px; color: #1e7de8;
  background: #e8f2ff; border: 1px solid #c7d7f5;
  border-radius: 10px; padding: 2px 7px; white-space: nowrap;
}

/* 공개 등록 옵션 (학교 등록 모달) */
.publish-toggle {
  display: flex; align-items: flex-start; gap: 8px;
  cursor: pointer; user-select: none;
}
.publish-toggle input { margin-top: 3px; width: 15px; height: 15px; cursor: pointer; }
.publish-toggle strong { font-size: 13px; color: #333; display: block; }
.publish-toggle small { font-size: 11px; color: #999; }
.publish-fields {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-top: 10px; padding: 12px;
  background: #f6f9fd; border: 1px solid #dce6f5; border-radius: 7px;
}
.publish-fields .form-group { flex: 1 1 180px; }
.publish-fields input {
  width: 100%; padding: 7px 10px;
  border: 1px solid #ced4da; border-radius: 5px;
  font-size: 13px; font-family: inherit; background: #fff;
}
.publish-fields input:focus { outline: none; border-color: #1e7de8; }
.publish-fields .share-hint { flex: 1 1 100%; margin-top: 0; }