:root{
  --bg:#f4f6fa; --card:#fff; --line:#e3e8ef; --pri:#1f4e79; --pri2:#2f6fae;
  --home:#2f80ed; --day:#f2994a; --night:#6b4ee6; --mine:#e53935; --sun:#d64545; --sat:#2f6fae;
}
*{box-sizing:border-box}
body{margin:0;font-family:"Malgun Gothic","Apple SD Gothic Neo",system-ui,sans-serif;background:var(--bg);color:#20262e}
a{color:inherit;text-decoration:none}
.container{max-width:1280px;margin:0 auto;padding:18px}
.topbar{display:flex;justify-content:space-between;align-items:center;background:var(--pri);color:#fff;padding:12px 22px}
.topbar .brand{font-weight:700;font-size:18px}
.topbar nav{display:flex;gap:14px;align-items:center;font-size:14px}
.who{opacity:.9}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:18px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
h1,h2,h3{margin:0 0 10px}
h2{font-size:18px} h3{font-size:15px}
.sub,.muted{color:#71808f;font-size:13px}
.hidden{display:none!important}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:8px 0}
.row.end{justify-content:flex-end}
input,select,button{font-family:inherit;font-size:14px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
button{cursor:pointer}
.btn-primary{background:var(--pri);color:#fff;border-color:var(--pri)}
.btn-primary:hover{background:var(--pri2)}
.btn-ghost{background:#fff;border:1px solid var(--line)}
.btn-del{background:#fff;color:#d64545;border-color:#f0c9c9;padding:4px 8px;font-size:12px}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:12px;font-size:14px}
.flash.error{background:#fdecec;color:#b03030;border:1px solid #f5c6c6}
.flash.message{background:#eef5fd;color:#1f4e79;border:1px solid #cfe0f5}
.notice{max-width:1280px;margin:0 auto 30px;padding:14px 18px;color:#8a4b00;background:#fff8e6;border:1px solid #ffe3a3;border-radius:10px;font-size:13px}

/* 로그인 */
.login-wrap{min-height:78vh;display:flex;align-items:center;justify-content:center}
.login-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:34px;width:100%;max-width:400px;box-shadow:0 6px 24px rgba(0,0,0,.06)}
.login-card h1{font-size:20px;text-align:center}
.login-card .sub{text-align:center;margin-bottom:18px}
.login-card label{display:block;font-size:13px;margin:12px 0 5px;color:#48566a}
.login-card input{width:100%}
.login-card button{width:100%;margin-top:18px;padding:11px}
.hint{font-size:12px;color:#7b8794;margin-top:14px;text-align:center}

/* 달력 */
.cal-header{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.cal-header h2{flex:1;text-align:center}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-head{text-align:center;font-weight:700;font-size:13px;padding:7px;background:#eef2f7;border-radius:6px}
.cal-head.sun{color:var(--sun)} .cal-head.sat{color:var(--sat)}
.cal-cell{min-height:104px;border:1px solid var(--line);border-radius:8px;padding:6px;background:#fff}
.cal-cell.empty{background:#fafbfc;border-style:dashed}
.cal-cell.sun .cal-date span,.cal-cell.holiday .cal-date span{color:var(--sun);font-weight:700}
.cal-cell.sat .cal-date span{color:var(--sat)}
.cal-cell.holiday{background:#fff6f6}
.cal-cell.today{outline:2px solid var(--pri);outline-offset:-2px}
.cal-date{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin-bottom:5px}
.hol-name{font-style:normal;font-size:10px;color:var(--sun);background:#fde8e8;padding:1px 5px;border-radius:4px}
.chips-wrap{display:flex;flex-direction:column;gap:3px}
.chip{font-size:11.5px;padding:3px 6px;border-radius:5px;color:#fff;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.home{background:var(--home)} .chip.day{background:var(--day)} .chip.night{background:var(--night)}
.chip.mine{background:var(--mine);box-shadow:0 0 0 2px #ffd5d5;font-weight:700}
.chip.empty-chip{background:#eceff3;color:#9aa5b1;text-align:center}
.legend{margin-top:12px;display:flex;gap:12px;font-size:12px;flex-wrap:wrap}
.lg::before{content:'';display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.lg.home::before{background:var(--home)} .lg.day::before{background:var(--day)}
.lg.night::before{background:var(--night)} .lg.mine::before{background:var(--mine)}
.lg.hol::before{background:#fde8e8;border:1px solid var(--sun)}

/* 다음 당직 */
.next-card{border-left:5px solid var(--pri)}
.next-list{display:flex;gap:10px;flex-wrap:wrap}
.next-item{display:flex;align-items:center;gap:8px;background:#f6f9fc;border:1px solid var(--line);border-radius:8px;padding:9px 13px;font-size:14px}
.next-item.primary{background:#fff2f2;border-color:#ffc9c9}
.dday{font-size:12px;color:#71808f}
.me-info{margin-top:10px;font-size:12px;color:#71808f}
.badge{font-size:11px;padding:2px 7px;border-radius:10px;color:#fff}
.badge.home{background:var(--home)} .badge.day{background:var(--day)} .badge.night{background:var(--night)}

/* 탭 */
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tab{background:#fff;border:1px solid var(--line);border-radius:8px 8px 0 0;padding:9px 15px;font-size:14px}
.tab.active{background:var(--pri);color:#fff;border-color:var(--pri);font-weight:700}

/* 업로드 */
.dropzone{border:2px dashed #b8c4d2;border-radius:12px;background:#fafcff;padding:44px;text-align:center;color:#5d6b7a;cursor:pointer;transition:.15s}
.dropzone.over{background:#eaf3ff;border-color:var(--pri)}
.dz-icon{font-size:38px;margin-bottom:8px}
.result{margin-top:14px;font-size:14px}
.ok{color:#1a7f37} .warn{color:#a86400} .error{color:#c0392b} .loading{color:#71808f;padding:16px}
.new-list ul{margin:6px 0 0 18px;font-size:13px}

/* 테이블 */
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.table-wrap{overflow:auto;max-height:640px;border:1px solid var(--line);border-radius:8px}
table.grid{width:100%;border-collapse:collapse;font-size:13px;background:#fff}
table.grid th{position:sticky;top:0;background:#eef2f7;padding:9px;border-bottom:1px solid var(--line);white-space:nowrap}
table.grid td{padding:7px 9px;border-bottom:1px solid #f0f3f7;text-align:center}
.new-badge{background:#e53935;color:#fff;font-size:10px;padding:2px 6px;border-radius:9px;font-weight:700}

/* 순서표 */
.order-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:900px){.order-grid{grid-template-columns:1fr}}
.dnd-list{list-style:none;margin:0;padding:0;max-height:560px;overflow:auto;border:1px solid var(--line);border-radius:8px}
.dnd-list li{display:flex;align-items:center;gap:9px;padding:8px 10px;border-bottom:1px solid #f0f3f7;background:#fff;cursor:grab;font-size:13px}
.dnd-list li.dragging{opacity:.45;background:#eaf3ff}
.dnd-list li:hover{background:#f7fafd}
.seq{width:26px;text-align:center;font-weight:700;color:var(--pri);background:#eef2f7;border-radius:5px;padding:2px 0}
.dept-tag{font-size:11px;background:#e8f0fa;color:var(--pri);padding:2px 7px;border-radius:9px}
.handle{margin-left:auto;color:#b0bac5}

/* 설정 */
.setting-block{border-top:1px solid var(--line);padding-top:14px;margin-top:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chip-tag{font-size:11.5px;background:#eef2f7;padding:3px 8px;border-radius:10px}

/* 모달 */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:50}
.modal-box{background:#fff;border-radius:12px;padding:22px;width:min(460px,92vw)}
.modal-box select{width:100%;margin:10px 0}


/* =====================================================
   전체 레이아웃 — 940px 화면에서 스크롤 없이 꽉 채우기
   ===================================================== */

/* body를 세로 flex로 고정 */
html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;           /* 바깥 스크롤 차단 */
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
  background: var(--bg);
  color: #20262e;
}

/* topbar: 고정 높이 */
.topbar {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--pri);
  color: #fff;
  padding: 10px 22px;         /* 기존 12px → 10px 로 살짝 줄임 */
  height: 48px;
  box-sizing: border-box;
}

/* main: 남은 세로 공간 전부 차지, 내부 flex column */
.container {
  flex: 1 1 0;
  min-height: 0;              /* flex 자식이 넘치지 않도록 필수 */
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 10px 18px 0;       /* 하단 padding 제거(notice가 붙도록) */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow: hidden;
}

/* =====================================================
   사용자 달력 전용 레이아웃
   ===================================================== */

/* 다음 당직 카드: 고정 높이, 줄어들지 않음 */
.next-card {
  flex-shrink: 0;
  padding: 10px 14px;
  margin-bottom: 8px;
  border-left: 5px solid var(--pri);
}

.next-card h2 {
  font-size: 15px;
  margin-bottom: 6px;
}

.next-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.next-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f6f9fc;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 11px;          /* 기존 9px → 6px */
  font-size: 13px;
}

.next-item.primary {
  background: #fff2f2;
  border-color: #ffc9c9;
}

.me-info {
  margin-top: 6px;
  font-size: 12px;
  color: #71808f;
}

/* 달력 카드: 남은 공간 전부 차지 */
.cal-card {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 14px 8px;
  margin-bottom: 0;
  overflow: hidden;
}

/* 달력 헤더 */
.cal-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cal-header h2 {
  flex: 1;
  text-align: center;
  font-size: 16px;
  margin: 0;
}

/* 달력 그리드 영역: 남은 공간 채우기 */
.calendar {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
}

/* 달력 그리드 자체도 세로를 꽉 채움 */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto repeat(6, 1fr);  /* 헤더 + 최대 6주 */
  gap: 4px;
  height: 100%;
}

/* 달력 셀: 고정 높이 대신 비율로 채움 */
.cal-cell {
  min-height: 0;              /* 기존 min-height:104px 제거 */
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 4px 5px;
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.cal-cell.empty {
  background: #fafbfc;
  border-style: dashed;
}

.cal-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  margin-bottom: 3px;
  flex-shrink: 0;
}

.hol-name {
  font-style: normal;
  font-size: 9px;
  color: var(--sun);
  background: #fde8e8;
  padding: 1px 4px;
  border-radius: 4px;
}

.chips-wrap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow: hidden;
}

.chip {
  font-size: 13px;
  padding: 2px 5px;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
}

/* 범례 */
.legend {
  margin-top: 6px;
  display: flex;
  gap: 10px;
  font-size: 11px;
  flex-wrap: wrap;
  flex-shrink: 0;
}

/* =====================================================
   notice — main 안에서 달력과 가로 폭 일치
   ===================================================== */
.notice {
  flex-shrink: 0;
  margin: 6px 0 8px;          /* 상하 여백만, 좌우 margin 제거 */
  padding: 8px 14px;
  color: #8a4b00;
  background: #fff8e6;
  border: 1px solid #ffe3a3;
  border-radius: 8px;
  font-size: 12px;
  box-sizing: border-box;
}