:root {
  --bg: #f4f6fb;
  --card-bg: #ffffff;
  --border: #e4e8f1;
  --text: #1f2434;
  --text-mute: #707585;
  --primary: #111111;
  --primary-dark: #000000;
  --primary-soft: #eeeeee;
  --success: #16a34a;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --cell-empty: #f6f7fb;
  --cell-empty-border: #eaecf3;
  --cell-available: #dcfce7;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(20, 24, 40, 0.04), 0 4px 16px rgba(20, 24, 40, 0.05);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Malgun Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.app-header {
  background: linear-gradient(135deg, #111111 0%, #2b2b2b 100%);
  color: #fff;
  padding: 36px 20px 28px;
}
.header-inner { max-width: 1320px; margin: 0 auto; }
.app-header h1 { margin: 0 0 8px; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.subtitle { margin: 0; font-size: 14.5px; opacity: 0.92; }

.app-shell {
  max-width: 1320px;
  margin: 20px auto 0;
  padding: 0 20px 40px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  z-index: 3;
}

.sidebar {
  flex: 0 0 156px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 16px;
}
.nav-item {
  display: flex;
  align-items: center;
  text-align: left;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 16px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-mute);
  box-shadow: var(--shadow);
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.nav-item:hover { border-color: var(--primary); }
.nav-item.active {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}

.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

.page { display: none; }
.page.active { display: block; }

.card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.card-head > .btn { flex: 0 0 auto; white-space: nowrap; }
.card-head-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.card-head-actions > .btn { white-space: nowrap; }
.card-head h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.card-desc { margin: 0; font-size: 13.5px; color: var(--text-mute); }

.subsection-desc { margin-bottom: 14px; }

.settings-sections {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
#pageSettings .settings-sections {
  flex-direction: row;
  align-items: flex-start;
}
#pageSettings .settings-section { flex: 1; min-width: 0; }
#pageSettings .settings-section--backup { flex: 0 1 260px; }
.backup-actions { flex-direction: column; align-items: stretch; }
.backup-actions .btn { width: 100%; }
.settings-section {
  background: #fafbfe;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
}
.settings-section .subsection-title { margin-top: 0; }
#travelTitle { margin-top: 20px; }

/* Buttons */
.btn {
  border: none;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.05s, box-shadow 0.15s;
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-lg { padding: 12px 22px; font-size: 14.5px; }
.btn-ghost { background: var(--primary-soft); color: var(--primary); }
.btn-ghost:hover { background: #e0e0e0; }
.btn-ghost-green { background: var(--cell-available); color: var(--success); }
.btn-ghost-green:hover { background: #bbf7d0; }
.once-limit-add-btn { background: #dcdcdc; color: var(--text); font-weight: 700; }
.once-limit-add-btn:hover { background: #c7c7c7; }
.btn-danger-ghost { background: var(--danger-soft); color: var(--danger); }
.btn-danger-ghost:hover { background: #fde2e2; }
.btn-small { padding: 5px 10px; font-size: 12px; border-radius: 8px; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* "후보 생성하기" 로딩 스피너: 기본은 숨겨두고, 버튼에 .loading이 붙었을 때만 보여준다. */
.btn-spinner {
  display: none;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -2px;
  animation: btn-spin 0.7s linear infinite;
}
#generateBtnA3.loading .btn-spinner, #generateBtnBC3.loading .btn-spinner { display: inline-block; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* "후보 생성하기" 진행률 표시줄: 실제로 만든 조합 수 기준 진행률(0~100%)을 보여준다. */
.generate-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.generate-progress-track {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: var(--primary-soft);
  overflow: hidden;
}
.generate-progress-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--primary);
  transition: width 0.15s ease-out;
}
.generate-progress-text {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}

/* Availability day list (time picker) */
.avail-day-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.avail-day-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: #fff;
}
.avail-day-row + .avail-day-row { border-top: 1px solid var(--border); }
.avail-day-row.avail-day-off { background: #fafbfe; }
.avail-day-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 90px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
}
.avail-day-toggle input { width: 17px; height: 17px; accent-color: var(--primary); cursor: pointer; }
.avail-day-row.avail-day-off .avail-day-name { color: var(--text-mute); font-weight: 600; }
.avail-day-time { display: flex; align-items: center; gap: 8px; }
.avail-day-time select {
  height: 36px;
  box-sizing: border-box;
  padding: 0 32px 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23707585' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}
.avail-day-time select:disabled { background-color: #f3f4f8; color: var(--text-mute); cursor: not-allowed; }
.avail-day-time .sep { color: var(--text-mute); font-size: 13px; }

/* Candidate generation rules */
.candidate-rules-block {
  margin-bottom: 18px;
  padding: 2px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.candidate-rules-title {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  padding: 2px 0;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}
.candidate-rules-title:hover { color: var(--primary); }
.toggle-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--primary);
  transition: transform 0.2s ease;
}
.candidate-rules-block:not(.collapsed) .toggle-arrow { transform: rotate(180deg); }
.candidate-rules-block.collapsed .candidate-rules-title { margin-bottom: 0; }
.candidate-rules-block:not(.collapsed) { padding-bottom: 20px; }
.candidate-rules-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-mute);
}
.candidate-rules-block.collapsed .candidate-rules-list { display: none; }
.candidate-rules-list ul {
  margin: 4px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 미배정 회원 · 1회 제한 회원 선택 (candidate generation) — 서로 구분되도록 카드 형태로 감싼다 */
.day-start-block {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #fff;
}
/* grid를 쓰는 이유: flex(flex:1 1 240px)로는 두 칸의 내용물(칩 개수 등)에 따라 두 칸이
   같은 비율로 자라야 함에도 브라우저에 따라 폭이 미묘하게 어긋나 보이는 경우가 있었다.
   grid는 두 칸을 항상 정확히 동일한 폭(1fr씩)으로 강제하고, 폭이 480px(240*2)보다 좁아지면
   auto-fit이 자동으로 한 칸씩 세로로 쌓는다. */
.day-start-block-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 18px;
  margin-bottom: 18px;
}
.day-start-block-row .day-start-block {
  min-width: 0;
  margin-bottom: 0;
}
/* "+ 추가" 버튼을 회원 칩과 같은 .chip-row 안 맨 앞자리에 둔다 — 칩이 몇 개든 항상 그 목록의
   맨 앞(고정된 자리)에 있으므로 위치가 바뀌지도 않고, 무엇을 추가하는 버튼인지도 바로 보인다. */
.once-limit-add.ms { position: relative; flex: 0 0 auto; min-width: 0; }
.once-limit-add .ms-dropdown { min-width: 200px; }
.day-start-title { font-size: 13.5px; font-weight: 700; margin: 0 0 10px; }
.optional-tag { font-weight: 500; color: var(--text-mute); font-size: 12px; }
.generate-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
/* Location list & travel matrix */
.location-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.location-chip {
  padding: 7px 8px 7px 14px;
  font-size: 13.5px;
  font-weight: 600;
}
.location-chip-name { cursor: pointer; }
.location-chip-name:hover { text-decoration: underline; }
.location-chip-editing { padding: 3px; }
.location-name-input {
  width: 120px;
  padding: 5px 9px;
  border: 1px solid var(--primary);
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}
.location-name-input:focus { outline: 2px solid var(--primary-soft); }

.table-scroll { overflow-x: auto; }
.member-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.member-table th {
  text-align: left;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-mute);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.member-table th.sortable-th { cursor: pointer; user-select: none; }
.member-table th.sortable-th:hover { color: var(--primary); }
.member-table .sort-arrow { font-size: 10px; display: inline-block; margin-left: 3px; }
.member-table td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.member-table tr:last-child td { border-bottom: none; }
.member-name-cell { display: inline-flex; align-items: center; }
.member-name-cell .location-chip-name {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.member-name-cell .location-chip-name:hover { text-decoration: underline; }
.member-name-cell .edit-pencil {
  display: inline-flex;
  color: var(--text-mute);
  flex: 0 0 auto;
}
.member-name-cell .location-chip-name:hover .edit-pencil { color: var(--primary); }
.member-table th:first-child,
.member-table td:first-child { width: 120px; }
.member-table th:nth-child(2),
.member-table td:nth-child(2) { width: 100px; }
.member-table th:nth-child(3),
.member-table td:nth-child(3) { width: 140px; padding-left: 22px; }
.member-table .badge-cell { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.member-table .location-chip,
.member-table .category-chip {
  padding: 4px 12px;
  min-width: 64px;
  box-sizing: border-box;
  justify-content: center;
  text-align: center;
}
.member-table .category-chip-consult { background: var(--primary); color: #fff; border-color: var(--primary); }
.member-table select.category-chip {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding-right: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23707585' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 9px 5px;
}
.member-table select.category-chip.category-chip-consult {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.member-table select.category-chip:focus { outline: 2px solid var(--primary-soft); }
.member-table input[type="text"] {
  width: 100%;
  min-width: 110px;
  height: 34px;
  box-sizing: border-box;
  padding: 0 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}
.member-table input[type="text"]:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.member-table .memo-cell textarea {
  width: 100%;
  min-width: 160px;
  min-height: 34px;
  box-sizing: border-box;
  padding: 8px 9px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.4;
  background: #fff;
  color: var(--text);
  resize: none;
  overflow: hidden;
  white-space: pre-wrap;
  word-break: break-word;
}
.member-table .memo-cell textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.member-table .action-cell { width: 32px; }
.member-table .action-cell button {
  border: none; background: transparent; cursor: pointer;
  color: var(--text-mute); font-size: 15px; line-height: 1;
  width: 26px; height: 26px; border-radius: 50%;
}
.member-table .action-cell button:hover { background: var(--danger-soft); color: var(--danger); }

.subsection-title { font-size: 14px; font-weight: 700; margin: 0 0 10px; }
.subsection-subtitle { font-size: 12.5px; font-weight: 700; color: var(--text-mute); margin: 0 0 10px; }
.travel-matrix {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.travel-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.travel-pair-label { flex: 1; font-size: 13.5px; font-weight: 600; }
.travel-min-input {
  width: 70px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  text-align: right;
  background: #fff;
  color: var(--text);
}
.travel-min-input:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.travel-suffix { font-size: 12.5px; color: var(--text-mute); }

/* Calendar grid (shared) */
.grid-scroll { overflow-x: auto; }
.cal-grid {
  display: grid;
  grid-template-columns: 44px repeat(6, minmax(54px, 1fr));
  grid-auto-rows: 16px;
  user-select: none;
  min-width: 368px;
  border-top: 1px solid var(--cell-empty-border);
  border-left: 1px solid var(--cell-empty-border);
}
.cal-head {
  grid-row: 1;
  position: sticky; top: 0;
  background: #fff;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-mute);
  display: flex; align-items: center; justify-content: center;
  height: 30px;
  border-right: 1px solid var(--cell-empty-border);
  border-bottom: 1px solid var(--border);
  z-index: 2;
}
.cal-head.corner { background: #fff; }
.cal-timelabel {
  font-size: 10.5px;
  color: var(--text-mute);
  text-align: right;
  padding-right: 6px;
  border-right: 1px solid var(--cell-empty-border);
  transform: translateY(-6px);
  white-space: nowrap;
}
.cal-timelabel-first { transform: translateY(0); }
.cal-cell {
  background: var(--cell-empty);
  border-right: 1px solid var(--cell-empty-border);
  border-bottom: 1px solid var(--cell-empty-border);
  cursor: default;
}
.cal-cell.hour-start { border-top: 1px solid #dde1ec; }
.cal-cell.available { background: var(--cell-available); }
/* 드래그 시작 시점에 이 세션이 놓일 수 없는 칸 전체를 미리 빗금 처리한다(paintDropTargets) —
   포인터가 실제로 지나가야만 보이는 개별 칸 유효성(.cal-drop-preview.invalid)과 같은 빨강
   계열을 써서 "여기는 안 된다"는 의미를 일관되게 전달한다. 칸 높이가 16px로 좁아 흐린
   무늬는 잘 안 보이므로 진하게 넣는다. */
.cal-cell.cal-cell-blocked {
  background-image: repeating-linear-gradient(135deg, rgba(220,38,38,0.55), rgba(220,38,38,0.55) 6px, rgba(220,38,38,0.22) 6px, rgba(220,38,38,0.22) 12px);
  cursor: not-allowed;
}

/* 드래그 중 놓일 자리를 세션 길이만큼 통째로 보여주는 미리보기 블록. 배경을 불투명하게 칠해
   그 밑에 있던 이동 시간·빈 시간 라벨이 비쳐 보이지 않고 완전히 가려지게 한다(놓일 자리가
   기존 표시를 그대로 "덮어쓰는" 것처럼 보여야 헷갈리지 않는다). 기본은 "빈 자리로 이동"(초록),
   .swap이 붙으면 "다른 사람과 자리를 맞바꿈"(보라), .invalid가 붙으면 "놓으면 실패함"(빨강)으로
   실시간 유효성과 종류를 함께 보여준다. 클릭/드롭 판정에 끼어들지 않도록 pointer-events는
   꺼둔다(실제 대상 셀 판정은 elementsFromPoint로 따로 함). */
.cal-drop-preview {
  background: #4ade80;
  border: 2px dashed rgba(21, 128, 61, 0.9);
  border-radius: 7px;
  pointer-events: none;
  z-index: 2;
}
.cal-drop-preview.swap {
  background: #a78bfa;
  border-color: rgba(109, 40, 217, 0.9);
}
.cal-drop-preview.invalid {
  background: #f87171;
  border-color: rgba(185, 28, 28, 0.9);
}

.cal-block {
  position: relative;
  border-radius: 7px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  line-height: 1.25;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12);
  border: 1px solid rgba(255,255,255,0.35);
}
.cal-block .name { display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.cal-block .loc { display: block; font-weight: 600; font-size: 9.5px; opacity: 0.85; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.cal-block .time { display: block; font-weight: 600; font-size: 9.5px; opacity: 0.9; }
.cal-block.draggable { cursor: grab; }
.cal-block.dragging { opacity: 0.4; cursor: grabbing; }
/* 모바일 롱프레스 드래그(attachTouchDrag, script.js): 길게 눌러 대기 중인 동안 눌린 걸 알 수
   있게 살짝 확대해 보여준다. touch-action: none은 반드시 여기(.draggable, 터치가 시작되는
   시점부터 이미 붙어있는 클래스)에 있어야 한다 — 브라우저는 한 터치 제스처의 touch-action을
   그 터치가 시작되는 순간(pointerdown) 기준으로 고정해버려서, 롱프레스가 끝나 .dragging이
   붙는 시점에 뒤늦게 touch-action을 바꿔봐야 이미 시작된 제스처에는 적용되지 않는다 — 그러면
   드래그 중 손가락을 움직이는 순간 브라우저가 그 제스처를 화면 스크롤로 채가 버려(대개
   pointercancel로 이어짐) 드롭이 씹힌다 — "롱프레스로 드래그는 시작되는데 놓아도 안 옮겨진다"는
   증상과 정확히 일치한다. */
.cal-block.draggable, .cal-travel-block.draggable {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
.cal-block.touch-drag-pending, .cal-travel-block.touch-drag-pending {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.28);
  z-index: 5;
}
.cal-block.excluded {
  background: repeating-linear-gradient(45deg, #d1d5db, #d1d5db 6px, #e5e7eb 6px, #e5e7eb 12px);
  color: #4b5563;
}
/* 확정된 일정은 흰색을 섞은 배경(위 인라인 스타일) 위에서도 잘 읽히도록 글자를 진하게 바꾸고,
   테두리는 회원 원래 색상(위 인라인 스타일)으로 두껍게 둘러 미확정 블록과 확 구분되게 한다. */
.cal-block.confirmed {
  color: var(--text);
  border-width: 2.5px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
.cal-block.confirmed .loc,
.cal-block.confirmed .time { opacity: 0.75; }
.cal-block-confirmed-badge {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  color: var(--success);
  font-size: 13.5px;
  font-weight: 800;
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
  z-index: 1;
}
.cal-block-delete {
  display: none;
  position: absolute;
  top: 2px;
  right: 2px;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--danger);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.35);
  z-index: 1;
}
/* 실제 마우스 호버가 가능한 기기에서만 ×버튼을 보여준다. 터치 기기는 (hover: hover)가
   거짓이라 여기 안 걸리므로, 탭 한 번에 :hover가 "고정"되어 ×버튼부터 뜨고 지점 추가
   메뉴는 두 번째 탭에야 열리던 문제가 사라진다 — 터치 기기의 삭제는 지점 추가 메뉴 맨
   아래의 "가능 시간 삭제하기" 항목으로 처리한다. */
@media (hover: hover) and (pointer: fine) {
  .cal-block:hover .cal-block-delete { display: flex; }
}
.cal-block-delete:hover { background: var(--danger); color: #fff; }

.block-context-menu {
  position: fixed;
  z-index: 200;
  min-width: 160px;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
}
.block-context-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  border-radius: 6px;
  background: none;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}
.block-context-menu-item:hover:not(:disabled) { background: #f4f5fb; }
.block-context-menu-item:disabled { color: var(--text-mute); cursor: default; }
.block-context-menu-item.danger { color: var(--danger); }
.block-context-menu-item.danger:hover:not(:disabled) { background: var(--danger-soft); }
.block-context-menu-sep {
  height: 1px;
  margin: 5px 4px;
  background: var(--border);
}

.cal-travel-block {
  margin: 0 3px;
  border-radius: 5px;
  background: repeating-linear-gradient(135deg, #fff7ed, #fff7ed 4px, #ffedd5 4px, #ffedd5 8px);
  border: 1px dashed #fb923c;
  color: #c2410c;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  line-height: 1.15;
  z-index: 1;
}
.cal-travel-block.draggable { cursor: grab; }
.cal-travel-block.dragging { opacity: 0.4; cursor: grabbing; }

.cal-break-block {
  margin: 0 3px;
  border-radius: 7px;
  background: var(--cell-empty-border);
  border: 1px solid var(--border);
  color: var(--text-mute);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  line-height: 1.15;
  z-index: 1;
}

.cal-idle-block {
  margin: 0 3px;
  border-radius: 7px;
  background: var(--danger-soft);
  border: 1px solid #fecaca;
  color: var(--danger);
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  line-height: 1.15;
  z-index: 1;
}

/* Request form */
.request-form {
  display: flex; flex-wrap: wrap; align-items: end; gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: #fafbfe;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.field { display: flex; flex-direction: column; gap: 5px; min-width: 110px; position: relative; }
#memberName { width: 119px; } /* 이름 등록 입력 영역 30% 축소 (기존 170px → 119px) */
.field label { font-size: 12px; font-weight: 700; color: var(--text-mute); }
.label-hint { font-size: 10px; font-weight: 500; color: var(--text-mute); }
.field input, .field select {
  height: 36px;
  box-sizing: border-box;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
}
.field select {
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23707585' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}
.field input:focus, .field select:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }

/* Notion-style multi-select (branch picker) */
.ms { position: relative; min-width: 180px; }
#memberLocationMs, #memberCategoryMs { min-width: 126px; }
.ms-control {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  box-sizing: border-box;
  padding: 4px 30px 4px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  position: relative;
}
.ms-control:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.ms.open .ms-control { border-color: var(--primary); }
.ms-control:disabled { cursor: not-allowed; background: #f3f4f8; color: var(--text-mute); }
.ms-chips { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.ms-placeholder { font-size: 13.5px; color: var(--text-mute); padding: 3px 2px; }
.ms-value { font-size: 13.5px; color: var(--text); padding: 3px 2px; }
.ms-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f4f5fb;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 4px 2px 10px;
  font-size: 12.5px;
  color: var(--text);
}
.ms-chip button {
  border: none; background: transparent; cursor: pointer;
  color: var(--text-mute); font-size: 13px; line-height: 1;
  width: 16px; height: 16px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.ms-chip button:hover { background: var(--danger-soft); color: var(--danger); }
.ms-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  width: 10px; height: 6px;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23707585' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  pointer-events: none;
}
.ms-dropdown {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  max-height: 220px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--shadow);
  padding: 6px;
}
.ms.open .ms-dropdown { display: block; }
.ms-option {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13.5px;
  cursor: pointer;
  white-space: nowrap;
}
.ms-option:hover { background: #f4f5fb; }
.ms-option.selected { font-weight: 700; color: var(--primary); }
.ms-option-check {
  flex: 0 0 auto;
  width: 14px;
  visibility: hidden;
}
.ms-option.selected .ms-option-check { visibility: visible; }
.ms-empty { padding: 8px 10px; font-size: 12.5px; color: var(--text-mute); }

.schedule-example {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.schedule-example-title { margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--text); }
.schedule-example-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--text-mute);
}

.request-summary { font-size: 13px; color: var(--text-mute); margin-bottom: 10px; font-weight: 600; }
.request-summary-link { color: var(--primary); text-decoration: underline; cursor: pointer; }

.member-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.member-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}
.member-tab:hover { background: #f4f5fb; }
/* 스케줄 미등록 회원은 점선 테두리 + 흐린 글자, 등록된 회원은 초록 톤 배경으로 뚜렷하게 구분한다
   (글자색은 기본색 그대로 두고 초록으로 바뀌지 않게 함 — 선택된 탭이 최종적으로 우선) */
.member-tab.no-req { color: var(--text-mute); border-style: dashed; background: #fff; }
.member-tab.has-req { font-weight: 700; background: #f0fdf4; border-color: #bbf7d0; }
/* 선택된 회원 탭은 그리드의 가능 시간 블록과 같은 색(#4f46e5)으로 강조해 눈에 잘 띄게 한다. */
.member-tab.active { border-color: #4f46e5; border-style: solid; background: #4f46e5; color: #fff; }
.tab-loc {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 5px;
  background: rgba(0,0,0,0.08);
  font-size: 10.5px; font-weight: 800;
  flex: 0 0 auto;
}
.member-tab.active .tab-loc { background: rgba(255,255,255,0.3); }
.member-tab-delete {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border: none;
  border-radius: 50%;
  background: rgba(0,0,0,0.08);
  color: inherit;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  flex: 0 0 auto;
  padding: 0;
}
.member-tab-delete:hover { background: var(--danger); color: #fff; }
.member-tab.active .member-tab-delete { background: rgba(255,255,255,0.3); }
.member-tab.active .member-tab-delete:hover { background: var(--danger); color: #fff; }

.range-add-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: #f4f5fb;
  border: 1px solid var(--border);
  border-radius: 10px;
}
.range-day-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, auto);
  gap: 8px 16px;
}
.range-day-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.range-day-name {
  flex: 0 0 22px;
  font-size: 13.5px;
  font-weight: 700;
}
.range-time-pair {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.range-add-row select {
  height: 36px;
  box-sizing: border-box;
  padding: 0 32px 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23707585' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 10px 6px;
}
.range-add-row .sep { color: var(--text-mute); font-size: 13px; }
#rangeAddBtn { align-self: center; margin-top: 10px; }

.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: #f4f5fb;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 6px 4px 10px;
  font-size: 12px;
  color: var(--text);
}
.chip button {
  border: none; background: transparent; cursor: pointer;
  color: var(--text-mute); font-size: 13px; line-height: 1;
  width: 18px; height: 18px; border-radius: 50%;
}
.chip button:hover { background: var(--danger-soft); color: var(--danger); }
.chip-excluded { background: var(--danger-soft); border-color: var(--danger); color: var(--text-mute); font-weight: 600; }
.chip-excluded button { color: var(--text-mute); }
.chip-excluded button:hover { background: #fecaca; color: var(--danger); }

/* Candidates */
.generate-hint { font-size: 13px; color: var(--text-mute); margin: 10px 0 0; }
.generate-hint-error { color: var(--danger); }
/* Positioned out of flow so a field's error text can't grow that flex item and push its
   siblings around (.request-form bottom-aligns items, so any in-flow height change here
   shifts every other field in the row). */
.field .generate-hint {
  margin-top: 0;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 5px;
  white-space: nowrap;
}
/* Since the hint text above is out of flow, reserve room for it on the form itself so it
   doesn't overlap whatever comes right after the form (e.g. the table below). Only added
   while a hint is actually showing, so the form doesn't carry dead space normally. */
.request-form.has-hint { padding-bottom: 40px; }
/* 후보A(체인 DP) 카드들은 왼쪽 열, 후보B·C(그리디) 카드들은 오른쪽 열에 고정한다 —
   렌더링 시 script.js가 .candidates-col 두 개(왼쪽/오른쪽)를 만들어 각 열에 맞는 카드만
   채워 넣으므로, 여기서는 그 두 열을 나란히 배치하기만 하면 된다. grid로 두 열의 폭을
   항상 정확히 동일하게(1fr씩) 고정한다 — flex는 카드 개수·내용에 따라 두 열의 폭이 미묘하게
   어긋나 보일 수 있었다. 폭이 좁아지면(minmax(400px,1fr) 트랙이 800px+gap을 넘지 못하는
   지점) auto-fit이 자연히 위아래로 쌓는다. */
.candidates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  align-items: start;
  gap: 16px;
  margin-top: 18px;
}
.candidates-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.candidate-card {
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.candidate-card-placeholder { border-style: dashed; }
.candidate-card-placeholder .candidate-title { color: var(--text-mute); }
.candidate-card-placeholder-hint {
  font-size: 12px; color: var(--text-mute); margin: 10px 0 0;
}
.candidate-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 8px; }
.candidate-title { font-size: 14.5px; font-weight: 800; margin: 0 0 2px; }
.candidate-card-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; margin-left: auto; }
.regen-candidate-btn { flex: 0 0 auto; white-space: nowrap; }
/* 아이콘 전용 액션 버튼: 텍스트 라벨 버튼 4개를 나열하면 카드가 좁을 때 제목이 밀려
   두 줄로 꺾이므로, 툴팁(title/aria-label)로 설명을 대체하고 정사각형으로 압축한다. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
}
.icon-btn svg { display: block; }
.icon-btn-loading {
  width: auto;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 700;
}
.action-divider { width: 1px; height: 18px; background: var(--border); margin: 0 2px; flex: 0 0 auto; }
.candidate-desc { font-size: 12px; color: var(--text-mute); margin: 0 0 10px; }
/* "배치 페이저": 미배정/수업/이동 지표가 동점인 다른 배치를 재계산 없이 넘나보는 컨트롤. */
.candidate-pool-pager {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin: 0 0 10px;
}
.pool-pager-btn { width: 24px; height: 24px; }
.pool-pager-label { font-size: 12px; font-weight: 700; color: var(--text-mute); min-width: 64px; text-align: center; }
.pool-pager-hint { font-size: 10.5px; color: var(--text-mute); text-align: center; margin: -6px 0 10px; }
.candidate-stats {
  display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0;
  font-size: 12.5px;
}
.stat-pill {
  background: var(--primary-soft); color: var(--primary);
  padding: 4px 10px; border-radius: 999px; font-weight: 700;
}
.stat-pill-danger { background: var(--danger-soft); color: var(--danger); }
.stat-pill-muted { color: var(--text-mute); font-weight: 500; font-size: 11px; }
.stat-pill-idle { background: var(--danger-soft); color: var(--danger); }
.unassigned-box {
  margin-top: 10px; font-size: 12px; color: var(--text-mute);
  background: #fafbfe; border: 1px dashed var(--border);
  border-radius: 8px; padding: 8px 10px;
}
.unassigned-box b { color: var(--text); }
.unassigned-box-danger { background: var(--danger-soft); border-color: #fecaca; }
.double-assigned-box { background: #e9e9e9; border-color: #d4d4d4; }

.app-footer {
  text-align: center;
  padding: 20px;
  color: var(--text-mute);
  font-size: 12px;
}

@media (max-width: 860px) {
  #pageSettings .settings-sections { flex-direction: column; }
}

@media (max-width: 720px) {
  .app-shell { flex-direction: column; }
  /* app-shell이 세로 flex가 되면 app-main은 그 교차축(가로)에서 stretch되는데, 내부 콘텐츠
     (표·달력 그리드 등)가 필요로 하는 폭이 화면보다 넓으면 app-main 자체가 그만큼 넓어져
     버려 페이지 전체가 옆으로 밀린다. max-width로 못 넘게 막아야 각 내부의 overflow-x:auto
     래퍼(.table-scroll, .grid-scroll 등)가 원래 의도대로 "그 안에서만" 가로 스크롤된다. */
  .app-main { max-width: 100%; }
  .sidebar {
    flex-direction: row;
    width: 100%;
    position: static;
    overflow-x: auto;
  }
  .nav-item { flex: 1; justify-content: center; text-align: center; white-space: nowrap; }

  /* 요일별 "한 번에 추가" 컨트롤: 데스크톱의 3열 그리드는 이 폭에서 한 칸이 요일명+
     시작~종료 선택창 두 개를 한 줄에 담기엔 너무 좁아져, 요일마다 선택창이 세로로
     쌓이며 6개 요일 전체가 화면을 가득 채우는 문제가 있었다. 근무 가능 시간 설정
     (.avail-day-list/.avail-day-row)과 같은 한 줄짜리 목록 형태로 바꿔 한 요일당
     한 줄만 차지하게 한다. */
  .range-day-list {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 0;
  }
  .range-day-row {
    flex-wrap: nowrap;
    padding: 8px 0;
  }
  .range-day-row + .range-day-row { border-top: 1px solid var(--border); }
  .range-time-pair select { flex: 1 1 0; min-width: 0; }

  /* 이 폭부터는 .request-form의 필드들이 한 줄에 못 들어가고 세로로 쌓이는데(각 필드가
     혼자 한 줄 전체를 차지), 에러 메시지를 absolute로 흐름 밖에 두던 데스크톱 방식을 그대로
     쓰면 그 아래 다음 필드와 겹친다. 필드가 세로로 쌓일 때는 옆 필드를 밀어낼 걱정이 없으니
     에러 메시지가 있을 때만(:not(:empty)) 다시 흐름 안으로 넣어 그 필드 자체의 높이를
     늘려서 아래 필드를 자연스럽게 밀어내리게 한다. */
  .field .generate-hint:not(:empty) {
    position: static;
    padding-top: 0;
    margin-top: 4px;
    white-space: normal;
  }
  .request-form.has-hint { padding-bottom: 16px; }
}

@media (max-width: 640px) {
  .app-header h1 { font-size: 21px; }
  .card { padding: 18px; }
  .nav-item { padding: 10px 6px; font-size: 11.5px; }
}

@media (max-width: 480px) {
  /* 요일 체크박스(고정폭)와 시작~종료 시간 선택(고정폭 select 2개)이 한 줄에 다 안 들어가
     "23:30"처럼 오른쪽이 잘리던 문제 — 좁은 화면에서는 시간 선택을 다음 줄로 내리고, select
     폭도 유동적으로 줄어들게 한다. */
  .avail-day-row { flex-wrap: wrap; row-gap: 8px; }
  .avail-day-time { flex: 1 1 100%; }
  .avail-day-time select { flex: 1 1 0; min-width: 0; }

  /* 아주 좁은 화면에서는 요일별 시작~종료 선택창도 같은 방식으로 다음 줄로 내린다. */
  .range-day-row { flex-wrap: wrap; row-gap: 8px; }
  .range-time-pair { flex: 1 1 100%; }

  /* 지점/회원구분/이름 칼럼이 좁은 화면에서 한 글자씩 세로로 쪼개져 표시되던 문제 — 표는
     그대로 두고 .table-scroll이 가로로만 스크롤되게 해 글자가 항상 한 줄로 보이게 한다. */
  .member-table td:nth-child(1),
  .member-table td:nth-child(2),
  .member-table td:nth-child(3) { white-space: nowrap; }
}

/* Toast notifications */
.toast-container {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.toast {
  min-width: 200px;
  width: max-content;
  max-width: min(560px, calc(100vw - 40px));
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 8px 24px rgba(20, 24, 40, 0.22);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast.show { opacity: 1; transform: translateY(0); }
.toast-success { background: var(--success); }
.toast-danger { background: var(--danger); }
.toast-info { background: #1f2434; }

/* Bulk import modal (회원 스케줄 추가: 붙여넣기로 일괄 등록) */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 24, 40, 0.5);
  z-index: 500;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.modal-overlay.open { display: flex; }
.modal {
  width: 100%;
  max-width: 660px;
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: 0 12px 40px rgba(20, 24, 40, 0.3);
  padding: 22px;
}
.modal-confirm { max-width: 420px; }
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.modal-head h3 { margin: 0; font-size: 16px; font-weight: 800; }
.modal-close {
  border: none;
  background: transparent;
  color: var(--text-mute);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
}
.modal-close:hover { background: var(--danger-soft); color: var(--danger); }
.bulk-import-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13.5px;
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  color: var(--text);
}
.bulk-import-textarea:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.bulk-preview-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 4px;
}
.bulk-preview-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  background: #fafbfe;
}
.bulk-preview-row.skip { opacity: 0.55; }
.bulk-preview-row-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.bulk-preview-name { font-size: 14px; font-weight: 800; }
.bulk-preview-row-head select,
.bulk-preview-new-fields select {
  height: 32px;
  box-sizing: border-box;
  padding: 0 28px 0 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  font-family: inherit;
  background-color: #fff;
  color: var(--text);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%23707585' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}
.bulk-preview-row-head select:focus,
.bulk-preview-new-fields select:focus { outline: 2px solid var(--primary-soft); border-color: var(--primary); }
.bulk-preview-row-head select.is-new-member { background-color: #fef2f2; border-color: #fecaca; }
.bulk-preview-new-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.bulk-preview-schedule { display: flex; flex-wrap: wrap; gap: 6px; }
.bulk-preview-day-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: #eef0fa;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  color: var(--text);
}
.bulk-preview-day-chip b { font-weight: 800; }
.bulk-preview-day-chip-clear {
  background: #fef2f2;
  border-color: #fecaca;
  color: var(--danger);
  font-weight: 600;
}
.bulk-preview-note {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.5;
}
.bulk-preview-note.warning { color: #92400e; }
.bulk-preview-note.error { color: var(--danger); font-weight: 600; }