:root{
      --bg:#fbfbfa;
      --card:#ffffff;
      --pink-soft:#fff0f3;
      --pink:#ff8fa3;
      --main:#ff8fa3;
      --text:#37352f;
      --muted:#8a8a8a;
      --line:#edece9;
      --shadow:0 1px 3px rgba(0,0,0,.05);
      --radius:14px;
    }

.sum-bar {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.sum-chip {
  background: #fff;
  border: 1.5px solid #f0f0f0;
  border-radius: 14px;
  padding: 10px 18px;
  text-align: center; min-width: 72px;
  box-shadow: var(--shadow, 0 1px 6px rgba(0,0,0,0.06));
}
.sum-chip .sn { font-size: 20px; font-weight: 900; line-height: 1.1; }
.sum-chip .sl { font-size: 10px; color: #aaa; margin-top: 3px; }
.sn-all  { color: var(--main, #ff8fa3); }
.sn-pass { color: #34c759; }
.sn-wait { color: #D4AF37; }
.sn-fail { color: #ff4d6d; }
.sn-pend { color: #ccc; }

/* ── 추가 버튼 ───────────────────────────── */
.top-row {
  display: flex; justify-content: flex-end;
  margin-bottom: 14px;
}
.top-row .btn,
button.btn {
  background: var(--main, #ff8fa3);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 10px 20px;
  font-size: 13px; font-weight: 900;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(255,143,163,0.28);
  transition: opacity .15s;
}
button.btn:active { opacity: 0.8; }

/* ── 테이블 래퍼 ─────────────────────────── */
.table-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #f0f0f0;
  box-shadow: var(--shadow, 0 2px 12px rgba(0,0,0,0.05));
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px;
}
.apply-tbl {
  width: 100%; border-collapse: collapse;
  font-size: 13px; min-width: 660px;
}

/* 헤더 */
.apply-tbl thead tr { background: var(--point, #fff0f3); }
.apply-tbl th {
  padding: 11px 10px;
  font-size: 10px; font-weight: 900;
  color: var(--main, #ff8fa3);
  text-align: center;
  border-bottom: 1.5px solid #fde0e8;
  white-space: nowrap;
}
.apply-tbl th:first-child { text-align: left; padding-left: 4px; }
.apply-tbl th:nth-child(2){ text-align: left; }

/* 셀 */
.apply-tbl td {
  padding: 10px 10px;
  text-align: center;
  border-bottom: 1px solid #f8f8f8;
  vertical-align: middle;
}
.apply-tbl td:first-child { text-align: left; padding-left: 4px; }
.apply-tbl td:nth-child(2){ text-align: left; }
.apply-tbl tbody tr:last-child td { border-bottom: none; }
.apply-tbl tbody tr:hover { background: #fffafc; }

/* 행 색상 */
.row-pass { background: #d4f5de !important; }
.row-pass td { color: #1a5c2a !important; }
.row-pass .td-ratio { color: #1a7a35 !important; }
.row-wait { background: #faedb0 !important; }
.row-wait td { color: #5a4200 !important; }
.row-wait .td-ratio { color: #896800 !important; }
.row-fail { background: #fff4f6 !important; }

.td-school { font-weight: 900; font-size: 13px; white-space: nowrap; }
.td-dept   { font-size: 12px; color: #666; max-width: 120px; }
.td-num    { font-weight: 700; color: #555; font-size: 12px; }
.td-ratio  { font-weight: 900; color: var(--main, #ff8fa3); font-size: 13px; }

/* 1차합 배지 */
.pb {
  display: inline-block; padding: 3px 9px;
  border-radius: 20px; font-size: 10px; font-weight: 900; white-space: nowrap;
}
.pb-pass { background: #e6faea; color: #1a7a35; }
.pb-wait { background: #fdf9e3; color: #896800; }
.pb-fail { background: #fff0f3; color: #d4003a; }
.pb-pend { background: #f3f3f3; color: #bbb; }

/* 결과 버튼 */
.s-grp { display: flex; gap: 4px; justify-content: center; }
.s-btn {
  width: 28px; height: 28px; border-radius: 8px;
  border: 1.5px solid #e5e5e5; background: #fafafa;
  font-size: 13px; font-weight: 900; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #ccc; transition: all .15s; line-height: 1;
}
.s-btn:hover { border-color: #bbb; color: #555; }
.s-btn.ap { background: #e6faea; border-color: #34c759; color: #1a7a35; }
.s-btn.aw { background: #fdf9e3; border-color: #D4AF37; color: #896800; }
.s-btn.af { background: #fff0f3; border-color: #ff4d6d; color: #d4003a; }

/* 1차합 토글 버튼 */
.p1-btn {
  width: 34px; height: 28px; border-radius: 8px;
  border: 1.5px solid #e5e5e5; background: #fafafa;
  font-size: 14px; font-weight: 900; cursor: pointer;
  color: #ccc; transition: all .15s;
}
.p1-btn:hover { border-color: #bbb; }
.p1-o { background: #e6faea; border-color: #34c759 !important; color: #1a7a35; }
.p1-x { background: #fff0f3; border-color: #ff4d6d !important; color: #d4003a; }

/* ── 예비번호 표시 배지 ─────────────────── */
.wn-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: #fdf9e3; border: 1.5px solid #D4AF37;
  border-radius: 10px; padding: 4px 10px;
  font-size: 12px; font-weight: 900; color: #896800;
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.wn-badge:hover {
  background: #faf3c8; border-color: #b8970c;
}
.wn-badge .wn-num { font-size: 14px; }
.wn-empty {
  display: inline-flex; align-items: center;
  background: #f8f8f8; border: 1.5px dashed #ddd;
  border-radius: 10px; padding: 4px 10px;
  font-size: 11px; font-weight: 700; color: #bbb;
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.wn-empty:hover { border-color: #D4AF37; color: #D4AF37; background: #fdf9e3; }

/* 블러 행 */
.row-blur td {
  filter: blur(2.5px);
  opacity: 0.35;
  pointer-events: none;
}
.row-blur .del-btn,
.row-blur .s-btn.af {
  pointer-events: all !important;
  filter: none !important;
  opacity: 1 !important;
}
.row-blur td:nth-child(8),
.row-blur td:nth-child(9) {
  filter: none;
  opacity: 0.7;
  pointer-events: all;
}

/* 빈 행 */
.empty-td {
  text-align: center !important;
  color: #ccc; font-size: 13px;
  padding: 44px 0 !important;
}

/* ── 모달 공통 ─────────────────────────────── */
.modal-ov {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.38); z-index: 500;
  align-items: flex-end; justify-content: center;
}
.modal-ov.open { display: flex; }
.modal-sh {
  background: #fff; border-radius: 24px 24px 0 0;
  width: 100%; max-width: 480px; padding: 24px 20px 44px;
  animation: slideUp .25s cubic-bezier(.22,1,.36,1);
}
@keyframes slideUp {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.modal-ttl {
  font-size: 15px; font-weight: 900;
  color: var(--main, #ff8fa3); margin-bottom: 18px;
}
.frow { display: flex; gap: 10px; margin-bottom: 12px; }
.mf   { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.mf label { font-size: 11px; color: #bbb; font-weight: 700; }
.mf input {
  background: #f8f8f8; border: 1.5px solid #eee;
  border-radius: 10px; color: #111;
  font-size: 13px; font-weight: 700;
  padding: 10px 12px; outline: none;
}
.mf input:focus { border-color: var(--main, #ff8fa3); }
.mf input::placeholder { color: #ccc; font-weight: 400; }
.mbtns { display: flex; gap: 10px; margin-top: 6px; }
.m-cancel {
  flex: 1; padding: 13px; background: #f5f5f5;
  border: none; border-radius: 12px; color: #aaa;
  font-size: 13px; font-weight: 900; cursor: pointer;
}
.m-save {
  flex: 2; padding: 13px;
  background: var(--main, #ff8fa3); border: none;
  border-radius: 12px; color: #fff;
  font-size: 13px; font-weight: 900; cursor: pointer;
}

/* ── 예비번호 모달 전용 ─────────────────── */
.wn-modal-info {
  background: #fdf9e3;
  border: 1.5px solid #f0e08a;
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
  font-size: 12px;
  color: #7a6200;
  line-height: 1.6;
}
.wn-modal-info .info-school {
  font-weight: 900; font-size: 14px;
  color: #555; margin-bottom: 2px;
}
.wn-modal-info .info-dept {
  font-size: 12px; color: #888;
}

.wn-big-input {
  background: #f8f8f8 !important;
  border: 2px solid #D4AF37 !important;
  border-radius: 14px !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #896800 !important;
  padding: 14px 16px !important;
  text-align: center;
  width: 100%; box-sizing: border-box;
  outline: none;
  -webkit-appearance: none;
}
.wn-big-input:focus {
  border-color: #b8970c !important;
  background: #fdf9e3 !important;
}
.wn-big-input::placeholder { color: #ddd !important; font-size: 15px !important; font-weight: 400 !important; }

.wn-hint {
  text-align: center; font-size: 11px;
  color: #ccc; margin-top: 8px; margin-bottom: 4px;
}

.m-delete {
  flex: 1; padding: 13px; background: #fff0f3;
  border: none; border-radius: 12px; color: #ff4d6d;
  font-size: 13px; font-weight: 900; cursor: pointer;
}
.m-save-wn {
  flex: 2; padding: 13px;
  background: #D4AF37; border: none;
  border-radius: 12px; color: #fff;
  font-size: 13px; font-weight: 900; cursor: pointer;
}

/* ── 토스트 ─────────────────────────────── */
.odin-toast {
  position: fixed; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  background: #333; color: #fff;
  font-size: 12px; font-weight: 700;
  padding: 9px 18px; border-radius: 10px;
  opacity: 0; transition: opacity .3s;
  z-index: 999; pointer-events: none; white-space: nowrap;
}
  .header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 6px;
  }
  .header-row h1 { margin: 0; }
  .goto-interview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 16px;
    background: var(--main, #ff8fa3);
    color: #fff;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    border: 2px solid var(--main, #ff8fa3);
    box-shadow: 0 2px 8px var(--shadow, rgba(0,0,0,0.1));
    transition: all 0.15s;
    white-space: nowrap;
    cursor: pointer;
  }
  .goto-interview:hover {
    background: var(--main-strong, var(--main, #ff8fa3));
    border-color: var(--main-strong, var(--main, #ff8fa3));
    transform: translateY(-1px);
  }
/* ── 페이지 기본 ─────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; padding: 20px;
  background: var(--bg, #fbfbfa);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  color: var(--text, #37352f);
}
.container { max-width: 980px; margin: 0 auto; }
.back {
  color: #888; text-decoration: none; font-weight: 800;
  cursor: pointer; margin-bottom: 10px; display: inline-block;
  font-size: 13px;
}
.back:hover { color: var(--main, #ff8fa3); }
.page-sub {
  color: var(--muted, #888); font-size: 12px; margin: 4px 0 14px;
}

/* ── 표: 군 컬럼 ─────────────────────────── */
.td-gun {
  font-weight: 900; font-size: 14px;
  color: var(--main, #ff8fa3);
  background: var(--pink-soft, #fff0f3);
  text-align: center !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
  width: 44px;
}

/* ── 표: 셀 내부 input ───────────────────── */
.tbl-input {
  width: 100%; box-sizing: border-box;
  background: transparent;
  border: 1.5px solid transparent;
  border-radius: 8px;
  padding: 6px 8px;
  font-size: 13px; font-weight: 700;
  color: inherit;
  outline: none;
  transition: border-color .15s, background .15s;
  font-family: inherit;
}
.tbl-input:hover { border-color: #eee; }
.tbl-input:focus {
  border-color: var(--main, #ff8fa3);
  background: #fff;
}
.tbl-input::placeholder { color: #ccc; font-weight: 400; }
.tbl-input-text { text-align: left; }
.tbl-input-num  { text-align: center; -moz-appearance: textfield; }
.tbl-input-num::-webkit-outer-spin-button,
.tbl-input-num::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.tbl-input-wn {
  background: #fdf9e3;
  border: 1.5px solid #D4AF37;
  color: #896800;
  text-align: center;
  font-weight: 900;
  max-width: 70px;
}
.tbl-input-wn:focus {
  background: #fff; border-color: #b8970c;
}
.td-disabled { color: #ccc; font-size: 12px; }
.goto-interview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    background: var(--pink-soft, #fff0f3);
    color: var(--main, #ff8fa3);
    border: 2px solid var(--main-border, #ffd0df);
    border-radius: 50px;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
    margin-right: 8px;
    font-family: inherit;
    white-space: nowrap;
  }
  .goto-interview:hover {
    background: var(--main, #ff8fa3);
    color: #fff;
    border-color: var(--main, #ff8fa3);
  }