:root{
  --bg:#0b1220;
  --card:#111827;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --line:#243047;
  --btn:#1f2937;
  --btnHover:#2b364a;

  --requiredBorder: rgba(239,68,68,.55);
  --requiredBg: rgba(239,68,68,.12);
  --requiredText: #fecaca;

  --male:#3b82f6;
  --female:#ef4444;
  --any:#e5e7eb;

  --greenBorder: rgba(34,197,94,.45);
  --greenBg: rgba(34,197,94,.10);
  --greenText: #bbf7d0;

  /* ✅ 상단 안내바(기본 안내) : 노란색 */
  --hintBorder: rgba(250,204,21,.35);
  --hintBg: rgba(250,204,21,.10);
  --hintText: rgba(254,249,195,.98);

  /* 화면용 짝 간격 */
  --pairGapExtra: 10px;

  /* ✅ 그룹 태그 색(모둠 1~8) */
  --g1b: rgba(239,68,68,.55);   --g1bg: rgba(239,68,68,.16);
  --g2b: rgba(250,204,21,.55);  --g2bg: rgba(250,204,21,.14);
  --g3b: rgba(34,197,94,.55);   --g3bg: rgba(34,197,94,.14);
  --g4b: rgba(59,130,246,.55);  --g4bg: rgba(59,130,246,.14);
  --g5b: rgba(168,85,247,.55);  --g5bg: rgba(168,85,247,.14);
  --g6b: rgba(249,115,22,.55);  --g6bg: rgba(249,115,22,.14);
  --g7b: rgba(20,184,166,.55);  --g7bg: rgba(20,184,166,.14);
  --g8b: rgba(244,114,182,.55); --g8bg: rgba(244,114,182,.14);
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  background: radial-gradient(1200px 600px at 20% 0%, #12203b, var(--bg));
  color:var(--text);
}

.header{padding:24px 16px 8px;max-width:1200px;margin:0 auto;}
.headerTop{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:flex-end;}
.header h1{margin:0 0 6px;font-size:24px}
.sub{margin:0;color:var(--muted);max-width:920px;line-height:1.35}

.status{display:flex;gap:8px;flex-wrap:wrap}
.pill{
  display:inline-flex;gap:6px;align-items:center;
  padding:8px 10px;border:1px solid var(--line);
  border-radius:999px;background:rgba(17,24,39,.7);
  color:var(--muted);
}
.pill b{color:var(--text); font-weight:700}

.layout{max-width:1200px;margin:12px auto 30px;padding:0 16px;}
.card{
  border:1px solid var(--line);
  border-radius:14px;
  background:rgba(17,24,39,.82);
  box-shadow:0 10px 25px rgba(0,0,0,.25);
}

.stageWrap{padding:14px;display:flex;flex-direction:column;gap:10px;}

button{
  border:1px solid var(--line);
  background:var(--btn);
  color:var(--text);
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-weight:900;
}
button:hover{background:var(--btnHover)}
button.ghost{ background:transparent; }
button.ghost:hover{ background:rgba(255,255,255,.06); }
button.smallBtn{padding:8px 10px;font-weight:900;border-radius:10px;}

/* Flash success feedback for buttons (does not block clicks elsewhere) */
button.btn-success-flash{
  background:#22c55e !important;
  border-color:#16a34a !important;
  color:#06120a !important;
  transform: scale(1.02);
  box-shadow: 0 10px 24px rgba(34,197,94,.22);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

button.required{
  border-color: var(--requiredBorder);
  background: var(--requiredBg);
  color: var(--requiredText);
}
button.required:hover{ background: rgba(239,68,68,.18); }

button.activeMode{
  border-color: rgba(59,130,246,.45);
  background: rgba(59,130,246,.12);
  color: rgba(219,234,254,1);
}

/* ✅ 버튼 툴팁(설명 풍선) */
button[data-tip]{ position: relative; }
button[data-tip]::after{
  content: attr(data-tip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%) translateY(2px);
  padding: 6px 10px;
  border-radius: 12px;
  background: rgba(0,0,0,.85);
  border: 1px solid rgba(255,255,255,.18);
  color: rgba(229,231,235,1);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease, transform .12s ease;
  z-index: 999999;
}
button[data-tip]::before{
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(0,0,0,.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 999999;
}
button[data-tip]:hover::after,
button[data-tip]:focus-visible::after{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
button[data-tip]:hover::before,
button[data-tip]:focus-visible::before{
  opacity: 1;
}

button.multiline{
  white-space:pre-line;
  line-height:1.1;
  text-align:center;
  min-width:150px;
}

.menuBar{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:flex-start;
}

@media (max-width: 900px){
  .menuBar{ grid-template-columns: 1fr; }
}

/* Phone (minimal support) */
@media (max-width: 600px){
  /* Put action buttons (저장/다운로드/인쇄) on the very top row */
  .menuRight{ grid-row:1; align-items:flex-end; }
  .menuLeft{ grid-row:2; }

  /* Mode buttons: 4 buttons in one line */
  .menuRowModes{
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap:8px;
    width:100%;
  }
  .menuRowModes .ghost{
    padding:10px 6px;
    font-size:14px;
  }
  .btnEmoji{ display:none; }

  /* Avoid left-cutoff: start grid at left, allow horizontal scroll */
  .grid{ justify-content:flex-start; }

  /* Make touch selection visually obvious */
  .seat.showActions{
    box-shadow: 0 0 0 2px rgba(252, 211, 77, .35) inset;
  }
}

.menuCol{ display:flex; flex-direction:column; gap:8px; }
.menuRow{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.menuLeft.menuCol{ align-items:flex-start; }
.menuRight.menuCol{ align-items:flex-end; justify-self:end; }

.menuRowRight{ justify-content:flex-end; }

.displayHost{ display:flex; align-items:center; }
.modeBanner{
  /* ✅ 모드(성별/고정) 안내바 : 파란색 */
  border:1px solid rgba(59,130,246,.25);
  background: rgba(59,130,246,.10);
  color: rgba(219,234,254,.95);
  border-radius:12px;
  padding:10px 12px;
  font-size:13px;
  font-weight:800;
  display:none;
}

/* 안내 바 */
.hintBar{
  border:1px solid var(--hintBorder);
  background: var(--hintBg);
  border-radius:12px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.hintText{
  color: var(--hintText);
  font-size:12.5px;
  font-weight:900;
  line-height:1.25;
  display:flex;
  align-items:center;
  gap:8px;
}
.hintIcon{
  width:18px;height:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  border:1px solid rgba(59,130,246,.35);
  background: rgba(59,130,246,.14);
  font-size:12px;
  flex:0 0 auto;
}
.hintCloseBtn{
  width:32px;
  height:28px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  color: rgba(229,231,235,.95);
  cursor:pointer;
  font-weight:1000;
  padding:0;
}
.hintCloseBtn:hover{ background: rgba(255,255,255,.06); }

.stage{
  position:relative;
  padding:12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  background:rgba(0,0,0,.18);
  overflow:auto;
  /* 모바일에서 스크롤/터치 경험 개선 */
  -webkit-overflow-scrolling: touch;
  /* PC에서 배치도 위에 마우스가 있어도 페이지 스크롤이 이어지도록 */
  overscroll-behavior: auto;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.stage.boardBottom{ gap:6px; }

.boardBar{
  display:grid;
  grid-template-columns: 1fr minmax(420px, 780px) auto;
  align-items:center;
  gap:10px;
}
.boardSpacer{ height:1px; }

.boardBig{
  height:64px;
  border-radius:14px;
  border:1px solid rgba(34,197,94,.45);
  background:rgba(34,197,94,.10);
  display:flex;
  align-items:center;
  justify-content:center;
}
.boardBigLabel{font-weight:1000;letter-spacing:.2px;color:#bbf7d0;font-size:20px;}

.boardRight{display:flex;justify-content:flex-end;}
.boardBtn{
  min-width:180px;
  border-color: rgba(34,197,94,.45) !important;
  background: rgba(34,197,94,.10) !important;
  color: #bbf7d0 !important;
}
.boardBtn:hover{ background: rgba(34,197,94,.16) !important; }

.stage.boardBottom .boardBar{ order:2; margin-top:-4px; }
.stage.boardBottom .grid{ order:1; }
.stage:not(.boardBottom) .boardBar{ order:1; }
.stage:not(.boardBottom) .grid{ order:2; }

.grid{
  display:grid;
  justify-content:center;
  width: max-content;
  margin: 0 auto;
  --seatW: 130px;
  --seatH: 70px;
  --gap: 10px;
  gap: var(--gap);
}

/* 짝 모드에서 삽입되는 '간격 칸' */
.gridGap{
  height: var(--seatH);
  pointer-events:none;
  background: transparent;
  border: none;
}

.seat{
  width: var(--seatW);
  height: var(--seatH);
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  user-select:none;
  padding: 0 10px;
  pointer-events:auto;
  /* 모바일 탭 UX 개선 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, box-shadow .12s ease;
}

/* (겹침 방지) pair 클래스가 붙어도 폭 확장 안 함 */
.seat.pair{ width: var(--seatW); }

.seat.void{
  background:transparent;
  border:1px dashed rgba(255,255,255,.14);
}
.seat.void .name{ color:rgba(156,163,175,.55); font-weight:800; }
.seat.void .groupTag, .seat.void .genderTag, .seat.void .pinBadge{ display:none !important; }

.seat .name{
  font-weight:900;
  font-size:16px;
  color:#e5e7eb;
  text-align:center;
  word-break:keep-all;
  line-height:1.1;
  pointer-events:none;
}
.seat .empty{ color:rgba(156,163,175,.75); font-weight:800; }

.seat .no{
  position:absolute;
  top:6px;left:8px;
  font-size:11px;
  color:rgba(156,163,175,.9);
  pointer-events:none;
}

/* ✅ 삭제/복구 배지(오른쪽 위) - 데스크탑: hover로 표시 */
.actionBadge{
  position:absolute;
  top:6px;
  right:6px;
  width:38px;
  height:38px;
  border-radius:12px;
  display:none;
  align-items:center;
  justify-content:center;

  border:2px solid rgba(239,68,68,.95);
  background: rgba(17,24,39,.92);
  color: #ffffff;

  cursor:pointer;
  font-size:20px;
  font-weight:1000;
  z-index:20;
  pointer-events:auto;

  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.actionBadge:hover{ background: rgba(239,68,68,.12); }

/* hover 가능한 환경에서는 hover로 노출 */
@media (hover: hover) and (pointer: fine){
  .seat:hover .actionBadge{ display:flex; }

/* 모드(성별/고정)에서는 휴지통/복구 아이콘을 숨김 */
.stage.mode-gender .seat .actionBadge,
.stage.mode-pin .seat .actionBadge{ display:none !important; }
}

/* 터치 환경에서는 '선택된 좌석'에만 표시 (JS가 .showActions 부여) */
.seat.showActions .actionBadge{ display:flex; }

/* ✅ 고정핀 배지(왼쪽 위) - 삭제와 동일한 크기 */
.pinBadge{
  position:absolute;
  top:6px;
  left:6px;
  width:30px;
  height:30px;
  border-radius:10px;
  display:none;
  align-items:center;
  justify-content:center;

  border:2px solid rgba(255,255,255,.18);
  background: rgba(17,24,39,.92);
  color: rgba(229,231,235,.95);

  cursor:pointer;
  font-size:15px;
  font-weight:1000;
  z-index:20;
  pointer-events:auto;

  box-shadow: 0 6px 14px rgba(0,0,0,.35);
}
.pinBadge:hover{ background: rgba(255,255,255,.06); }

/* 고정된 좌석: 핀 배지가 파랗게 */
.seat.locked{
  border-color: rgba(59,130,246,.45);
  background: rgba(59,130,246,.10);
}
.seat.locked .pinBadge{
  display:flex !important;
  border-color: rgba(59,130,246,.55);
  background: rgba(59,130,246,.22);
  color: rgba(219,234,254,1);
}

/* 고정 모드일 때는 고정 가능한 자리(통로 제외)에 핀 노출 */
.stage.mode-pin .seat:not(.void) .pinBadge{ display:flex; }

/* overlays */
.overlayIcon{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:rgba(0,0,0,.25);
  pointer-events:none;
}
.stage.mode-gender .seat:not(.void) .overlayIcon.gender{ display:flex; pointer-events:auto; }

.overlayIcon .iconBtn{
  width:40px;height:40px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(17,24,39,.85);
  font-size:18px;
  font-weight:1000;
  user-select:none;
  pointer-events:auto;
}

/* 성별 지정 3버튼(작게) */
.genderPad{
  display:flex;
  gap:6px;
  align-items:center;
  justify-content:center;
}
.genderPad .gbtn{
  width:34px;height:28px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(17,24,39,.88);
  font-size:12px;
  font-weight:1000;
  user-select:none;
  pointer-events:auto;
}
.genderPad .gbtn:hover{ background:rgba(255,255,255,.08); }
.genderPad .gbtn.active{ outline:2px solid rgba(34,197,94,.7); }
.genderPad .gbtn.male{ border-color: rgba(59,130,246,.45); }
.genderPad .gbtn.female{ border-color: rgba(239,68,68,.45); }
.genderPad .gbtn.any{ border-color: rgba(229,231,235,.25); }

.seat.genderM{ border-color: rgba(59,130,246,.75); }
.seat.genderF{ border-color: rgba(239,68,68,.75); }
.seat.genderA{ border-color: rgba(229,231,235,.55); }

/* 표시 체크 가로 */
#displayPanelHost .displayPanel{
  position: static;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(17,24,39,.72);
  border-radius:12px;
  padding:8px 10px;
  display:flex;
  flex-direction:row;
  gap:12px;
  align-items:center;
  backdrop-filter: blur(6px);
}
#displayPanelHost .toggle{
  font-size:12px;
  gap:6px;
  white-space:nowrap;
}
#displayPanelHost .toggle input{ transform: translateY(1px) scale(0.95); }

.displayPanel{
  border:1px solid rgba(255,255,255,.08);
  background:rgba(17,24,39,.72);
  border-radius:12px;
  padding:10px 10px;
  display:flex;
  flex-direction:column;
  gap:8px;
  backdrop-filter: blur(6px);
}

.violationsBar{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(239,68,68,.25);
  background:rgba(239,68,68,.08);
  color:#fecaca;
  font-size:12px;
  white-space:pre-wrap;
  display:none;
}

.log{
  padding:12px;
  border-radius:12px;
  background:rgba(0,0,0,0.25);
  border:1px dashed #243047;
  color:#9ca3af;
  min-height:44px;
  white-space:pre-wrap;
  font-size:12px;
}

.hiddenCanvas{ position:fixed; left:-99999px; top:-99999px; }
.hint{margin:0 0 10px;color:#9ca3af;font-size:13px;line-height:1.45;}

/* 모달 상단 안내 문구(요청: 첫째줄 크게) */
.modalHint{
  margin:0 0 12px;
  color: var(--muted);
  line-height:1.35;
}
.modalHintPrimary{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:17px;
  font-weight:1000;
  color: rgba(219,234,254,.98);
}
.modalHintSub{
  margin-left:26px;
  font-size:12.5px;
  font-weight:800;
  color: var(--muted);
}
.row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap;align-items:flex-start;}
.field{display:flex;flex-direction:column;gap:6px;flex:1;min-width:120px;}
label{font-size:12px;color:#9ca3af}
select{
  border:1px solid #243047;
  background:rgba(0,0,0,.18);
  color:#e5e7eb;
  padding:10px 10px;
  border-radius:10px;
  outline:none;
}
.sep{margin:14px 0;border:none;border-top:1px solid rgba(255,255,255,.06);}
.toggle{display:flex;gap:8px;align-items:center;color:#9ca3af;font-size:13px;}
.toggle input{ transform: translateY(1px); }
.hidden{ display:none !important; }

.previewBox{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  border-radius:10px;
  padding:10px 12px;
  font-weight:900;
  color: rgba(229,231,235,.92);
  min-height: 40px;
  display:flex;
  align-items:center;
}

/* 아코디언 스타일 */
.acc{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:hidden;
  background: rgba(0,0,0,.12);
}
.accHead{
  padding:10px 12px;
  font-weight:1000;
  font-size:14px;
  color: rgba(229,231,235,.92);
  background: rgba(255,255,255,.04);
}
.accHeadSmall{
  font-size:14px;
}
.accBody{ padding: 10px 12px 14px; }
.acc.hidden{ display:none !important; }

/* modal */
.modalOverlay{
  position:fixed;inset:0;
  background:rgba(0,0,0,.55);
  display:none;align-items:center;justify-content:center;
  padding:18px;z-index:9999;
}
.modalOverlay.open{ display:flex; }
.modal{
  width:min(760px, 100%);
  border:1px solid #243047;
  border-radius:14px;
  background:rgba(17,24,39,.98);
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  max-height: calc(100vh - 36px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modalHead{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.modalTitle{ font-weight:1000; }
.xBtn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
  color:#e5e7eb;
  width:34px;height:34px;border-radius:10px;
  cursor:pointer;font-weight:900;
}
.xBtn:hover{ background:rgba(255,255,255,.08); }
.modalBody{ padding:14px; overflow:auto; min-height:0; }

.modalBody textarea{
  width:100%;min-height:180px;resize:vertical;
  border:1px solid #243047;
  border-radius:12px;
  padding:10px 12px;
  background:rgba(0,0,0,.2);
  color:#e5e7eb;
  outline:none;
}
.modalBody textarea:focus{border-color:#3b82f6}
.modalFoot{
  padding:12px 14px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:flex-end;gap:10px;
}

/* toast */
.toast{
  position:fixed;left:50%;bottom:24px;
  transform:translateX(-50%);
  background:rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(229,231,235,.95);
  padding:10px 12px;border-radius:12px;
  font-size:13px;font-weight:900;
  z-index:10000;
  opacity:0;pointer-events:none;
  transition:opacity .15s ease;
}
.toast.show{ opacity:1; }


/* center toast (학생 입력 저장 안내) */
.centerToast{
  position:fixed;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.98);
  background:rgba(0,0,0,.82);
  border:1px solid rgba(255,255,255,.18);
  color:rgba(229,231,235,.98);
  padding:14px 18px;
  border-radius:16px;
  font-size:16px;
  font-weight:900;
  z-index:10001;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease;
  max-width:min(520px, calc(100vw - 40px));
  text-align:center;
  box-shadow:0 16px 44px rgba(0,0,0,.45);
}
.centerToast.show{
  opacity:1;
  transform:translate(-50%,-50%) scale(1);
}
/* ✅ 모둠 태그(자리 내) */
.groupTag{
  position:absolute;
  bottom:6px;left:8px;
  height:22px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  border-radius:999px;
  padding:0 8px;
  display:flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  pointer-events:auto;
  z-index:6;
}
.groupTag .groupLabel{
  color:rgba(229,231,235,.92);
  font-weight:900;
  font-size:11px;
  line-height:1;
}
.groupTag .groupCaret{
  font-size:10px;
  font-weight:1000;
  color:rgba(229,231,235,.65);
  pointer-events:none;
  transform: translateY(-0.5px);
}

/* 모둠별 색상(태그만) */
.groupTag[data-group="1"]{ border-color: var(--g1b); background: var(--g1bg); }
.groupTag[data-group="2"]{ border-color: var(--g2b); background: var(--g2bg); }
.groupTag[data-group="3"]{ border-color: var(--g3b); background: var(--g3bg); }
.groupTag[data-group="4"]{ border-color: var(--g4b); background: var(--g4bg); }
.groupTag[data-group="5"]{ border-color: var(--g5b); background: var(--g5bg); }
.groupTag[data-group="6"]{ border-color: var(--g6b); background: var(--g6bg); }
.groupTag[data-group="7"]{ border-color: var(--g7b); background: var(--g7bg); }
.groupTag[data-group="8"]{ border-color: var(--g8b); background: var(--g8bg); }

.genderTag{
  position:absolute;
  bottom:6px;right:8px;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.22);
  border-radius:999px;
  padding:2px 8px;
  color:rgba(156,163,175,.95);
  pointer-events:none;
  z-index:6;
}

.seat.violation{ outline:2px solid rgba(239,68,68,.9); }

/* ✅ 모둠 드롭다운 메뉴(잘림 방지용) */
.groupMenu{
  position:fixed;
  min-width: 140px;
  background: rgba(17,24,39,.98);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
  padding: 8px;
  z-index: 99999; /* 삭제 아이콘보다 항상 위 */
}
.groupMenu .gmItem{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  cursor:pointer;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.02);
  color: rgba(229,231,235,.95);
  font-weight:900;
  font-size:13px;
  user-select:none;
}
.groupMenu .gmItem:hover{ background: rgba(255,255,255,.06); }
.groupMenu .gmItem.active{
  border-color: rgba(59,130,246,.55);
  background: rgba(59,130,246,.14);
}
.groupMenu .gmSwatch{
  width:12px;height:12px;border-radius:4px;
  border:1px solid rgba(255,255,255,.18);
  flex:0 0 auto;
}

/* 스와치 색상 */
.groupMenu .gmItem[data-group="1"] .gmSwatch{ background: var(--g1bg); border-color: var(--g1b); }
.groupMenu .gmItem[data-group="2"] .gmSwatch{ background: var(--g2bg); border-color: var(--g2b); }
.groupMenu .gmItem[data-group="3"] .gmSwatch{ background: var(--g3bg); border-color: var(--g3b); }
.groupMenu .gmItem[data-group="4"] .gmSwatch{ background: var(--g4bg); border-color: var(--g4b); }
.groupMenu .gmItem[data-group="5"] .gmSwatch{ background: var(--g5bg); border-color: var(--g5b); }
.groupMenu .gmItem[data-group="6"] .gmSwatch{ background: var(--g6bg); border-color: var(--g6b); }
.groupMenu .gmItem[data-group="7"] .gmSwatch{ background: var(--g7bg); border-color: var(--g7b); }
.groupMenu .gmItem[data-group="8"] .gmSwatch{ background: var(--g8bg); border-color: var(--g8b); }


/* 옵션창 작은 textarea */
.miniTextarea{ min-height:120px !important; }

/* 학생 입력 편의 버튼 줄 */
.inputTools{ margin-top:0; }

/* 통로 복구 아이콘(↩)은 초록 테두리 */
.actionBadge[data-action="restore"]{ border-color: rgba(34,197,94,.95); }
.actionBadge[data-action="restore"]:hover{ background: rgba(34,197,94,.12); }


/* ✅ v0.30: 세부 옵션 섹션 헤더 */
.sectionBlock{ margin-top:2px; }
.sectionHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:6px 0 8px;
  flex-wrap:wrap;
}

.sectionHeadToggle{
  display:flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
  font-weight:1000;
  color:rgba(229,231,235,.95);
  font-size:19px;
}
.sectionHeadToggle input{
  width:24px;
  height:24px;
  cursor:pointer;
}
.sectionHeadToggle .sectionTitle{ font-size:19px; }
.sectionHeadDesc{
  font-size:12.5px;
  font-weight:900;
  color: var(--muted);
  line-height:1.25;
}
.sectionHeadDesc{
  font-size:12.5px;
  color: var(--muted);
  font-weight:800;
  line-height:1.2;
}
.checkBadge{
  width:26px;height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  border:1px solid rgba(34,197,94,.35);
  background: rgba(34,197,94,.10);
  font-size:14px;
  flex:0 0 auto;
}

.stepLabel{
  font-size:14px;
  font-weight:1000;
  color: rgba(229,231,235,.92);
}

.sectionHeadToggle input[type="checkbox"]{
  width:18px;
  height:18px;
}

.sectionTitle{ font-size:15px; }

.sectionHeadDescInline{
  font-size:12.5px;
  color: rgba(156,163,175,.95);
  font-weight:800;
  margin-left:6px;
  line-height:1.25;
}


/* ===== Share (v0.43) ===== */
.shareBox{
  margin-top:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background: rgba(0,0,0,.16);
}
.shareBox.hidden{ display:none; }
.shareHead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.shareTitle{ font-weight:900; opacity:.95; }
.smallInline{ padding:8px 10px; font-size:13px; }
.warnToggle{ margin: 6px 0 2px; }
.shareWarnText{
  margin:8px 0 10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
  color: rgba(254,202,202,.95);
  font-size:13px;
  line-height:1.35;
}
.sharePreview{
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(17,24,39,.35);
  margin-bottom:10px;
}
.sharePreview .pvRow{ display:flex; justify-content:space-between; gap:10px; padding:4px 0; }
.sharePreview .pvK{ color: rgba(156,163,175,.92); font-size:13px; }
.sharePreview .pvV{ font-weight:900; font-size:13px; text-align:right; }

/* ===== Drag feel (v0.43) ===== */
.seat.dragging{
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  cursor: grabbing;
}
.seat.dragOver{
  box-shadow: 0 0 0 2px rgba(59,130,246,.55) inset;
}

/* Mobile menu order + left-cutoff fix (v0.43) */
@media (max-width: 600px){
  /* Make inner rows become direct grid items, so we can place them in strict row order */
  .menuLeft, .menuRight{ display: contents; }
  .menuRowActions{ grid-row:1; width:100%; justify-content:flex-start; flex-wrap:wrap; }
  .menuRowMain{ grid-row:2; width:100%; }
  .menuRowModes{ grid-row:3; width:100%; }
  .menuRowToggles{ grid-row:4; width:100%; justify-content:flex-start; }

  /* Prevent left-cutoff: keep grid aligned to left on mobile, allow horizontal scroll */
  .grid{ justify-content:flex-start !important; margin: 0; }
}



/* ===== Students Input Table UI (v0.44) ===== */
.srOnly{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.studentsUi{ margin-top: 10px; }

.studentsColNo{ opacity:.8; }
.studentsCol{ font-size:14px; }

.studentsToggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:14px; /* match '이름(필수)' */
  font-weight:900;
}
.studentsToggle input{ transform: translateY(1px) scale(1.05); }

.studentsBulkRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  background: rgba(0,0,0,.14);
  margin-bottom:10px;
}
.studentsBulkLeft{ font-weight:900; opacity:.9; }
.studentsBulkRight{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.studentsTableWrap{
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  overflow:auto;
  max-height: 52vh;
  background: rgba(0,0,0,.10);
}

#studentsTable{
  width:100%;
  border-collapse:collapse;
  min-width: 560px;
}
#studentsTable th, #studentsTable td{
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:10px 10px;
  vertical-align:middle;
}
#studentsTable th{
  position:sticky;
  top:0;
  background: rgba(11,18,32,.92);
  z-index:1;
  text-align:left;
  font-size:13px;
  font-weight:900;
}


/* 학생 입력 테이블 헤더 토글(체크박스) */
.thToggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  user-select:none;
}
.thToggle input{
  transform: translateY(1px) scale(1.05);
}
#studentsTable .colNo{ width:64px; }
#studentsTable .rowNo{ opacity:.85; font-weight:900; white-space:nowrap; }

#studentsTable input.stuName{
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.92);
  outline:none;
}
#studentsTable input.stuName:focus{
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,.20);
}

.radioGroup{
  display:inline-flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  font-weight:900;
}
.radioItem{
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
}
.radioItem input{ transform: translateY(1px) scale(1.05); }


/* 학생 입력: 성별/학습수준 토글 OFF 시 회색/비활성 */
#studentsModal.genderDisabled #studentsTable td.genderCell{
  opacity:.35;
  pointer-events:none;
}
#studentsModal.levelDisabled #studentsTable td.levelCell{
  opacity:.35;
  pointer-events:none;
}

/* (안전) 예전 클래스가 남아도 숨기지 않도록 */
#studentsModal.hideGender #studentsTable td.genderCell{
  opacity:.35;
  pointer-events:none;
}
#studentsModal.hideLevel #studentsTable td.levelCell{
  opacity:.35;
  pointer-events:none;
}

/* modal footer helpers */
.modalFootBetween{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;}
.modalFootRight{display:flex;align-items:center;gap:10px;}

/* ===== 세부 옵션: 금지쌍 그룹 UI ===== */
.forbiddenGroupsUI{ display:flex; flex-direction:column; gap:10px; }
.forbiddenGroupsContainer{ display:flex; flex-direction:column; gap:10px; }
.forbidGroupRow{ display:flex; align-items:flex-start; gap:10px; flex-wrap:wrap; }
.forbidGroupLabel{ min-width:76px; font-weight:900; padding-top:10px; }
.forbidInputs{ display:flex; gap:8px; flex:1; flex-wrap:wrap; }
.forbidInputs input{
  min-width:90px;
  flex:1;
  max-width:160px;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:var(--text);
  font-weight:900;
}
.forbidInputs input:disabled{ opacity:.45; }
.addForbidMemberBtn{
  width:38px;
  height:38px;
  padding:0;
  border-radius:12px;
  font-size:18px;
  line-height:1;
}

/* useForbidden OFF 시 비활성 표시 */
#optionsModal.forbidDisabled .forbiddenGroupsUI{ opacity:.55; }
#optionsModal.forbidDisabled .forbiddenGroupsUI button,
#optionsModal.forbidDisabled .forbiddenGroupsUI input{ pointer-events:none; }


/* 학생 입력 안내 문구 강조 */
.hlGender{font-weight:700; color:#4da3ff;}
.hlLevel{font-weight:700; color:#ffb74d;}


/* v0.73 저장/불러오기: 목록형 UI */
.hiddenSelect{display:none !important;}
.savePanel{align-items:flex-start;gap:12px;}
.slotListField{flex:0 0 330px;min-width:260px;max-width:360px;}
.slotListWrap{position:relative;}
.slotList{
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:8px;
  min-height:220px;
  max-height:320px;
  overflow:auto;
  background:rgba(255,255,255,.06);
}
.slotEmpty{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  opacity:.75;
  font-size:13px;
  pointer-events:none;
}
.slotItem{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:10px;cursor:pointer;user-select:none;font-size:13px;color:rgba(229,231,235,.95);}
.slotItem:hover{background:rgba(255,255,255,.06);}
.slotItem.sel{background:rgba(255,255,255,.10);font-weight:900;}
.slotActions{display:flex;flex-direction:column;gap:10px;min-width:150px;}
.slotActions button{width:100%;}

.shareTitle{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.shareDesc{font-weight:700;opacity:.85;font-size:12px;}

/* v0.75 저장/불러오기 레이아웃 밸런스 조정 */
.save-load-modal { max-width: 720px; }
.saved-list { flex: 1.3; }
.save-load-buttons { flex: 0.7; gap: 8px; }
.save-load-buttons button { justify-content: flex-start; }


/* ===== Saved layout list UI refinements ===== */
.saved-list {
  background: rgba(255,255,255,0.06);
  max-height: 260px;
  overflow-y: auto;
}

.saved-list li {
  font-size: 0.9em;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.saved-list li.selected {
  background: rgba(120,160,255,0.18);
}

.recent-icon {
  color: #ffb400;
  font-size: 0.85em;
  margin-left: 6px;
}

.empty-list {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  color: #888;
}

/* Share note text */
.share-note {
  display: block;
  margin-top: 6px;
  font-size: 0.85em;
  color: #666;
}

/* Modal width balance */
.save-load-modal {
  max-width: 720px;
}




/* v0.79: 저장/불러오기 패널 중앙 정렬 */
.savePanel{
  justify-content: center;
  gap: 18px;
}
.slotListField{ max-width: 420px; }
.slotActions{ min-width: 170px; }

#optionsModal.balanceDisabled #groupMode{
  opacity: 0.5;
  pointer-events: none;
}
#optionsModal.balanceDisabled .sectionBlock:has(#balanceLevels) .sectionTitle{
  opacity: 0.9;
}


.studentsFootLeft{display:flex;gap:10px;align-items:center;}

.ghost.danger{border-color: rgba(239,68,68,.35); color:#fecaca;}
.ghost.danger:hover{background: rgba(239,68,68,.10);}

#studentsTable .colDel{width:48px;}
#studentsTable td.delCell{width:48px;text-align:center;}

.stuDelBtn{width:34px;height:34px;border-radius:10px;border:1px solid rgba(148,163,184,.22);background:rgba(15,23,42,.35);color:rgba(226,232,240,.85);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;}
.stuDelBtn:hover{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.35);color:#fecaca;}

/* ===== Print / Export (v0.85) ===== */
@media print{
  @page{ margin: 10mm; }
  body{ background:#fff !important; color:#111827 !important; }
  .headerTop, .status, .menuBar, .hintBar, .modeBanner, .violationsBar, .logCard, .footer{ display:none !important; }
  .layout{ max-width:none !important; margin:0 !important; padding:0 !important; }
  .card{ background:#fff !important; border-color:#111827 !important; box-shadow:none !important; }
  .stage{ background:#fff !important; border-color:#111827 !important; }
  .boardBig{ background:#fff !important; border:2px solid #111827 !important; }
  .boardBigLabel{ color:#111827 !important; }
  .seat{
    background:#fff !important;
    border:1.6px solid rgba(17,24,39,.75) !important;
    color:#111827 !important;
  }
  .seat.void{
    background:#fff !important;
    border:1.2px dashed rgba(17,24,39,.45) !important;
  }
  .name{ color:#111827 !important; }
  .seatNo{ color:rgba(17,24,39,.75) !important; }
  .groupTag, .genderTag, .pinBadge{
    border-color: rgba(17,24,39,.35) !important;
    color:#111827 !important;
    background: rgba(17,24,39,.06) !important;
  }
}