:root{
  --fs-base: 1rem;
  --radius-xs: .25rem;
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --gap-2: .5rem;
  --gap-3: .75rem;

  --clr-text: #222;
  --clr-muted: #6b7280;
  --clr-border: #ccd3e1;
  --clr-border-soft: #e7e9ef;

  --clr-brand: #385395;
  --clr-brand-weak: #eef2ff;
  --clr-accent: #4fa85f;
  --clr-accent-contrast: #fff;

  --clr-row-hover: #eef4ff;
  --clr-row-alt: #fbfcff;
  --clr-row-selected: #deebf7;

  --clr-chip-bg: #f4f6fb;
  --clr-chip-border: #e3e7f0;

  --shadow-1: 0 1px 0 rgba(0,0,0,.03);
  --shadow-2: 0 10px 26px rgba(0,0,0,.08);
}

html { font-size: var(--fs-base); }

/* ===========================
 * 공통 컨테이너 및 유틸리티
 * =========================== */
.custom-container {
  width: 80%;
  margin: 0 auto;
  background: #ffffff;
}

.top-container,
.bottom-container {
  margin-top: 0.625rem;
  margin-bottom: 24px;
}

.text-center { text-align: center; }
.text-right  { text-align: right;  }
.text-left   { text-align: left;   }

/* ===========================
 * 표 공통 스타일
 * =========================== */
.top-container-table,
.bottom-container-table {
  width: 100%;
  overflow-x: auto;
}


.top-container-table table,
.bottom-container-table table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14px;
  margin: 0;
}

.top-container-table th,
.top-container-table td,
.bottom-container-table th,
.bottom-container-table td {
  border: 1px solid #1f2937;
  padding: 8px 10px;
  box-sizing: border-box;
  vertical-align: middle;
  white-space: nowrap;
}

.bottom-container-search {
  width: 100%;
  background:#fff;
  border:1px solid var(--clr-border);
  padding:.625rem;
  margin-bottom:.625rem;
}

.form-horizontal {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.form-group {
  display: flex;
  gap: .5rem;
}

.mps-toast-container {
  position: fixed;
  inset: 0;                 /* top, right, bottom, left 모두 0 */
  z-index: 10000;

  display: flex;
  align-items: center;       /* 수직 가운데 */
  justify-content: center;   /* 수평 가운데 */

  pointer-events: none;      /* 컨테이너는 클릭 통과 */
}

.mps-toast {
  min-width: 260px;
  max-width: 420px;
  padding: 10px 14px;
  margin-bottom: 8px;

  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);

  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 13px;
  font-weight: 500;
  color: #111827;
  background: #f9fafb;

  pointer-events: auto;

  opacity: 0;
  transform: translateY(8px);
  animation: mps-toast-in 0.25s ease-out forwards;
}

/* 성공/오류 타입 컬러 */
.mps-toast--success {
  background: #ecfdf3;
  color: #14532d;
  border: 1px solid #bbf7d0;
}

.mps-toast--error {
  background: #fef2f2;
  color: #7f1d1d;
  border: 1px solid #fecaca;
}

.mps-toast__icon {
  font-size: 14px;
}

.mps-toast__msg {
  flex: 1;
  white-space: normal;      /* 여러 줄 허용 */
  overflow: visible;        /* 잘라내지 않음 */
  text-overflow: clip;      /* ... 제거 */
  word-break: keep-all;     /* 한국어 줄바꿈 자연스럽게 */
}

.mps-toast__close {
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  padding: 0 2px;
  color: inherit;
}

@keyframes mps-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mps-toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ===========================
 * 안내문구 박스 스타일
 * =========================== */
.eval-period-msg {
  margin: 12px 0 20px;
  padding: 10px 12px;
  font-size: 0.875rem;
  line-height: 1.5;

  /* 색상 계열: 기존 빨간 계열 유지 */
  color: #991b1b;
  background-color: #fef2f2;

  /* 박스 형태 */
  border: 1px solid #fecaca;
  border-left-width: 4px;
  border-left-color: #dc2626;
  border-radius: 6px;

  display: flex;
  align-items: flex-start;
  gap: 8px;
}

/* 아이콘 느낌 (HTML 수정 없이 사용 가능) */
.eval-period-msg::before {
  content: "!";
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 20px;
  height: 20px;
  margin-top: 1px;

  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 999px;

  color: #ffffff;
  background-color: #dc2626;
}

/* 여러 줄일 때 내용 영역이 자연스럽게 줄바꿈되도록 */
.eval-period-msg span,
.eval-period-msg p {
  margin: 0;
}

.top-container-table thead tr th,
.top-container-table tbody tr td,
.top-container-table tbody tr th {
  text-align: center;
}
.top-container-table thead tr:first-child th,
.td-group {
/* .top-container-table thead tr th { */
  background: #153765;
  color: #ffffff;
  /* text-align: center; */
  font-weight: 600;
}

.top-container-table tbody tr:first-child th.td-rowlbl,
.top-container-table tbody tr:first-child td {
  background: #e4edf8;
}
/* 현재 행 강조 (예: .current-row 클래스 사용) */
.top-container-table tbody tr:last-child th.td-rowlbl,
.top-container-table tbody tr:last-child td {
  background: #fecaca;
}

.th-grade {
  width: 12%;
}

.bottom-container-table thead tr th {
  background: #e4edf8;
  color: #111827;
  text-align: center;
  font-weight: 700;
}

.adjust-box {
  display: flex;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.btn-adjust {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  background: #f9fafb;
  cursor: pointer;
  padding: 0;
}

.btn-adjust:hover {
  background: #e5e7eb;
}

.td-cnt.over {
  color: #dc2626; /* red-600 */
  font-weight: 600;
}

.td-cnt.under {
  color: #2563eb; /* blue-600 */
  font-weight: 600;
}
/* bottom-container-table tbody: 마지막 두 TD만 제외하고 가운데 정렬 */
.bottom-container-table tbody tr td:not(:nth-last-child(-n+2)) {
  text-align: center;
}


/* ===========================
 * 평가 상태 및 버튼 그룹
 * =========================== */
/* 버튼/상태 영역 전체 */
.button-container-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* 왼쪽 상태 텍스트 영역 */
.eval-status-area {
  display: flex;
  align-items: center;
  min-height: 32px;
}

/* 뱃지 기본 */
.eval-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: bold;
  background: #e5e7eb;
  color: #374151;
}

/* 기본 상태 점 */
.eval-status-badge::before {
  content: "●";
  font-size: 8px;
}

/* 작성 중 상태 */
.eval-status-badge.is-editing {
  background: #eff6ff;
  color: #1d4ed8;
}
.eval-status-badge.is-editing::before {
  color: #3b82f6;
}

/* 제출 완료 상태 */
.eval-status-badge.is-submitted {
  background: #dcfce7;
  color: #166534;
}
.eval-status-badge.is-submitted::before {
  color: #22c55e;
}

/* 오른쪽 버튼 그룹 */
.eval-btn-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 필요 시 버튼 공통 스타일 (이미 mps-btn이 있다면 생략 가능) */
.mps-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid transparent;
  cursor: pointer;
}

/* 예시: 속성별 변형 */
.mps-btn--ghost {
  background: #ffffff;
  border-color: #d1d5db;
  color: #111827;
}
.mps-btn--ghost:hover {
  background: #f3f4f6;
}

.mps-btn--primary {
  background: #153765;
  border-color: #153765;
  color: #ffffff;
}
.mps-btn--primary:hover {
  background: #1e3a8a;
}

.mps-btn--danger {
  background: #fee2e2;
  border-color: #f97373;
  color: #b91c1c;
}
.mps-btn--danger:hover {
  background: #fecaca;
}

/* 조정사유 입력 UI */
.adj-reason-wrap{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.adj-reason-input{
  width:100%;
  padding:8px 10px;
  border:1px solid #d1d5db;
  border-radius:10px;
  background:#fff;
  font-size:13px;
  line-height:1.35;
  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}

.adj-reason-input:focus{
  border-color:#6366f1;
  box-shadow:0 0 0 3px rgba(99,102,241,.18);
}

.adj-reason-meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:12px;
  color:#6b7280;
}

.adj-reason-counter{
  font-variant-numeric: tabular-nums;
}

.adj-reason-counter b{ color:#111827; }

.adj-reason-wrap.is-warning .adj-reason-meta{ color:#f59e0b; }
.adj-reason-wrap.is-warning .adj-reason-counter b{ color:#f59e0b; }

#search-submit {
  /* display: inline-block; */
  display: none;
  background: #fff;
  color: #153765;
  border: 2px solid #153765;
  border-radius: 8px;
  padding: 7px 18px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  vertical-align: middle;
}
#search-submit:hover,
#search-submit:focus {
  background: #153765;
  color: #fff;
}

/* bottom-container-table: sticky columns (번호~성명) */
.bottom-container-table.sticky-enabled {
  overflow-x: auto;
}

.bottom-container-table.sticky-enabled table {
  border-collapse: separate;
  border-spacing: 0;
}

.bottom-container-table.sticky-enabled .sticky-col {
  position: sticky;
  left: 0;
  z-index: 5;
  background: #ffffff;
  background-clip: padding-box;
}

.bottom-container-table.sticky-enabled thead .sticky-col {
  z-index: 10;
  background: #e4edf8;
}

.bottom-container-table.sticky-enabled .sticky-col.col-1 {
  box-shadow: -1px 0 0 #1f2937;
}

.bottom-container-table.sticky-enabled .sticky-edge {
  box-shadow: 2px 0 0 #1f2937;
}

/* .bottom-container-table.sticky-enabled tbody tr:hover .sticky-col {
  background: var(--clr-row-hover);
} */