:root{
  --bg:#dff1ff;
  --card:#ffffff;
  --line:#d7e3ee;
  --text:#16324a;
  --muted:#6a7f92;

  --pastel-annual:#cfe8ff;
  --pastel-half:#d7f5dd;
  --pastel-quarter:#fff0c9;
  --pastel-event:#f0dcff;
  --pastel-sat:#ffe0e0;

  /* ✅ segment(버튼 선택) 강조 컬러 */
  --seg-on-bg:#16324a;
  --seg-on-text:#ffffff;
  --seg-on-border:#16324a;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
  background:var(--bg);
  color:var(--text);
}

.hidden{ display:none; }
.backdrop.hidden{ display:none !important; } /* 모달이 계속 뜨는 문제 방지 */

.topbar{
  position:sticky; top:0;
  background:rgba(223,241,255,0.95);
  backdrop-filter: blur(6px);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  flex-wrap:wrap;
}

.title{ font-size:20px; font-weight:900; margin-right:6px; }

.tabs{ display:flex; gap:8px; }
.tab{
  padding:8px 12px;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
}
.tab.on{ outline:3px solid rgba(22,50,74,0.12); }

.nav{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.nav button{
  padding:8px 12px;
  font-size:16px;
  border:1px solid var(--line);
  background:var(--card);
  border-radius:10px;
  cursor:pointer;
}
.ym{ min-width:120px; text-align:center; font-size:18px; font-weight:800; }

.rightBtns{ display:flex; gap:8px; }

.ghost{
  padding:8px 12px;
  font-size:15px;
  border:1px solid var(--line);
  background:transparent;
  border-radius:10px;
  cursor:pointer;
}

button{
  padding:10px 12px;
  border:1px solid var(--line);
  border-radius:12px;
  background:var(--card);
  cursor:pointer;
  font-weight:800;
}

.wrap{ padding:16px; max-width:1100px; margin:0 auto; }
.panel.hidden{ display:none; }

.calendar{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  overflow:hidden;
}

.dowrow{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
}
.dow{
  padding:10px 10px;
  font-weight:900;
  font-size:16px;
  background:#f7fbff;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
}
.dow:nth-child(1), .dow:nth-child(7){ color:#d00000; }
.dow:nth-child(7){ border-right:none; }

.grid{
  display:grid;
  grid-template-columns: repeat(7, 1fr);
}

.cell{
  min-height:130px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cell:nth-child(7n){ border-right:none; }

.cell.other .daynum{ opacity:0.35; }
.cell.other .muted{ opacity:0.55; }

.cellHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}
.daynum{ font-size:18px; font-weight:900; }
.daynum.sun, .daynum.sat{ color:#d00000; }
.muted{ color:var(--muted); font-size:13px; }

.badges{ display:flex; flex-direction:column; gap:6px; }

.badge{
  padding:6px 8px;
  border-radius:10px;
  font-size:15px;
  line-height:1.2;
  border:1px solid rgba(0,0,0,0.06);
}

.badge.annual{ background:var(--pastel-annual); }
.badge.half{ background:var(--pastel-half); }
.badge.quarter{ background:var(--pastel-quarter); }
.badge.event{ background:var(--pastel-event); }
.badge.satwork{ background:var(--pastel-sat); }

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
}
.cardTitle{ font-size:18px; font-weight:900; margin-bottom:10px; }

.formRow{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:10px; }

.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:180px;
}
.fieldLabel{
  font-size:13px;
  font-weight:900;
  color:#234;
}

input, select{
  padding:10px 10px;
  border:1px solid var(--line);
  border-radius:12px;
  font-size:15px;
  outline:none;
  background:#fff;
}

.empList{ display:flex; flex-direction:column; gap:10px; }
.empItem{
  padding:12px;
  border:1px solid var(--line);
  border-radius:14px;
}
.empTop{ display:flex; justify-content:space-between; gap:12px; align-items:center; flex-wrap:wrap; }
.empName{ font-size:17px; font-weight:900; }
.empNums{ color:var(--muted); font-weight:800; }

.empHist{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.histLine{ font-size:14px; color:#304a5f; }

.error{ margin-top:10px; color:#b00020; font-weight:900; }

.backdrop{
  position:fixed; inset:0;
  background:rgba(0,0,0,0.35);
  display:flex; align-items:center; justify-content:center;
  padding:16px;
}

.modal{
  width:min(560px, 100%);
  background:var(--card);
  border-radius:18px;
  border:1px solid var(--line);
  overflow:hidden;
}

.modalTitle{
  padding:14px 14px;
  font-size:18px;
  font-weight:900;
  border-bottom:1px solid var(--line);
}

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

.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.label{ width:80px; font-weight:900; color:#234; }

.actions{ display:flex; gap:10px; justify-content:flex-end; margin-top:8px; }

.danger{
  background:#ffe7ea;
  border-color:#ffc1ca;
  color:#8a0015;
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  cursor:pointer;
  font-weight:900;
  background:#fff;
}
.chip.on{
  outline:3px solid rgba(22,50,74,0.12);
  background:#f4fbff;
}

#creditList .chip{
  max-width: 100%;
}

/* =========================================================
   ✅ 등록 모달: 구분/종류 버튼(세그먼트) UI
   - app.js에서 .seg 안에 .segBtn 생성 + 활성은 .on
   ========================================================= */
.seg{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.segBtn{
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  cursor:pointer;
  transition: transform 0.05s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.segBtn:active{
  transform: translateY(1px);
}

/* ✅ 활성화(눈에 띄게) */
.segBtn.on{
  background: var(--seg-on-bg);
  color: var(--seg-on-text);
  border-color: var(--seg-on-border);
  box-shadow: 0 8px 18px rgba(22,50,74,0.22);
}

/* ✅ hover 시 살짝 강조 */
.segBtn:hover{
  box-shadow: 0 6px 14px rgba(22,50,74,0.12);
}

/* (선택) 모달 안에서 seg가 너무 길어지면 줄바꿈 자연스럽게 */
.modal .seg{
  max-width: 100%;
}

@media (max-width:720px){
  .cell{ min-height:110px; padding:8px; }
  .badge{ font-size:14px; }
  .daynum{ font-size:16px; }
  .label{ width:70px; }
  .field{ min-width:160px; }

  /* 모바일에서 seg 버튼 살짝 작게 */
  .segBtn{ padding:8px 10px; font-size:14px; }
}