:root{--ink:#18222d;--sub:#7c8794;--line:#e8edf2;--bg:#f7f9fb;--blue:#4169e1;--light-blue:#eef2ff;--orange:#f39a52;--green:#4dba90;--purple:#8a76d6}*{box-sizing:border-box}body{margin:0;color:var(--ink);font-family:'Noto Sans KR','DM Sans',sans-serif;background:var(--bg);font-size:17px}.app-shell{display:flex;min-height:100vh}.sidebar{width:272px;background:#fff;border-right:1px solid var(--line);padding:27px 16px 19px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:10px;padding:0 10px 27px}.brand-mark{width:31px;height:31px;flex-shrink:0;border-radius:10px;background:var(--blue);color:#fff;font-family:Georgia;font-size:30px;line-height:26px;text-align:center;font-style:italic}.brand strong{display:block;font-size:18px;letter-spacing:-.5px}.brand span{display:block;color:#a2abb5;font-size:12px;font-family:'DM Sans';letter-spacing:1.3px;margin-top:2px}.workspace-switch{height:43px;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;padding:0 12px;gap:9px;color:#596571;font-size:15px;margin-bottom:29px}.online-dot{width:7px;height:7px;background:#4dba90;border-radius:50%}.chevron{margin-left:auto;color:#aab3bb;font-size:20px}nav{flex:1}.nav-label{font:700 13px 'DM Sans';color:#aeb6bf;letter-spacing:1.2px;padding:0 11px;margin:0 0 10px}.nav-label.second{margin-top:31px}.nav-item{min-height:43px;display:flex;align-items:center;padding:6px 12px;margin:3px 0;border-radius:8px;color:#7a8591;text-decoration:none;cursor:pointer;font-size:16px;line-height:1.25}.nav-item.active{background:var(--light-blue);color:var(--blue);font-weight:700}.nav-icon{width:25px;font-size:22px;line-height:1;color:currentColor;margin-right:7px;text-align:center}.nav-count{margin-left:auto;background:#fff;color:var(--blue);font:700 13px 'DM Sans';border-radius:10px;padding:3px 7px}.nav-count.muted{color:#9a7de5}.sidebar-bottom{padding:10px 4px 0}.help-card{border:1px solid #e5e9f6;background:#fbfbff;border-radius:9px;padding:12px 10px;display:flex;gap:9px;align-items:center;margin-bottom:19px}.help-icon{width:23px;height:23px;border-radius:50%;background:#e8ecff;color:var(--blue);display:grid;place-items:center;font-weight:700}.help-card strong{display:block;font-size:14px}.help-card small,.user-mini small{display:block;color:#9aa4af;font-size:13px;margin-top:3px}.user-mini{display:flex;align-items:center;gap:9px;padding:0 4px}.user-mini strong{font-size:14px}.dots{margin-left:auto;color:#a9b0b8;letter-spacing:2px}.avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:700}.purple{color:#fff;background:#9688de}.main{flex:1;min-width:0;height:100vh;overflow-y:auto}.topbar{height:72px;border-bottom:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 42px;position:sticky;top:0;z-index:20}.breadcrumbs{font-size:15px;color:#9da7b2}.breadcrumbs strong{color:#52606c;font-size:16px}.slash{padding:0 12px;color:#d1d6dc}.top-actions{display:flex;gap:18px;align-items:center}.top-date{color:#84909a;background:#fff;border:1px solid var(--line);border-radius:7px;padding:9px 12px;font-size:14px;white-space:nowrap}.icon-btn{border:0;background:none;font-size:27px;color:#6d7985;cursor:pointer;position:relative;flex-shrink:0}.top-date,.notification-wrap,.top-actions>.avatar{flex-shrink:0}.notification i{width:6px;height:6px;background:#ed6c67;border:2px solid #fff;position:absolute;border-radius:50%;top:3px;right:2px}.content{max-width:1230px;margin:0 auto;padding:34px 42px 60px}.welcome{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px}.eyebrow{color:var(--blue);font:700 14px 'DM Sans';letter-spacing:1.1px;margin-bottom:9px}.welcome h1{font-size:31px;letter-spacing:-1.6px;margin:0 0 7px}.welcome p{margin:0;color:#8b96a1;font-size:15px}.date-chip{color:#84909a;background:#fff;border:1px solid var(--line);border-radius:7px;padding:10px 14px;font-size:14px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:16px}.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:21px}.card h3{margin:0;font-size:17px;letter-spacing:-.5px}.card-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:21px}.more{color:#9aa4ae;font-size:20px}.stat-card{min-height:151px}.stat-title{color:#7c8792;font-size:15px}.stat-value{font:700 33px 'DM Sans';margin:11px 0 10px;letter-spacing:-1px}.stat-value span{font:500 16px 'Noto Sans KR';margin-left:4px}.trend{font-size:14px;color:#94a0aa}.trend.up{color:#4cba90}.trend b{font-family:'DM Sans';margin-right:4px}.blue-stat{border-top:3px solid var(--blue)}.orange-stat{border-top:3px solid var(--orange)}.green-stat{border-top:3px solid var(--green)}.main-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:16px}.task-progress{background:#f7f8fc;border-radius:8px;padding:15px;margin-bottom:12px;display:flex;align-items:center;gap:14px}.progress-ring{height:51px;width:51px;border-radius:50%;background:conic-gradient(var(--blue) 0 73%,#e4e9f5 73%);position:relative;display:grid;place-items:center}.progress-ring:after{content:'';position:absolute;inset:6px;background:#f7f8fc;border-radius:50%}.progress-ring b{position:relative;z-index:1;font:700 15px 'DM Sans';color:var(--blue)}.task-progress strong{display:block;font-size:15px}.task-progress small{display:block;color:#929ca7;font-size:13px;margin-top:4px}.task-list{list-style:none;padding:0;margin:0}.task-list li{display:flex;gap:11px;align-items:center;padding:13px 0;border-bottom:1px solid #f0f2f4}.task-list li:last-child{border:0}.check{width:17px;height:17px;border:1px solid #cbd4dd;border-radius:5px;display:grid;place-items:center;color:transparent;cursor:pointer;font-size:14px}.task-list li.done .check{background:var(--blue);border-color:var(--blue);color:#fff}.task-list li.done .task-text{text-decoration:line-through;color:#adb5bd}.task-text{font-size:15px;flex:1}.task-meta{font-size:13px;color:#a2abb4}.badge{font-size:12px;border-radius:4px;padding:4px 7px}.badge.red{background:#fff0ed;color:#e98472}.badge.blue{background:#edf2ff;color:var(--blue)}.badge.green{background:#edf9f4;color:#4daa87}.event{display:flex;gap:12px;padding:12px 0;border-bottom:1px solid #f0f2f4}.event:last-child{border:0}.event-date{width:34px;height:38px;border-radius:6px;background:#f3f5fb;text-align:center;padding-top:4px;color:var(--blue);font:700 17px 'DM Sans'}.event-date small{display:block;font:500 12px 'Noto Sans KR';color:#94a0ab}.event strong{font-size:15px;display:block;margin:2px 0 4px}.event span{font-size:13px;color:#9aa4af}.notice-row{padding:13px 0;border-bottom:1px solid #f0f2f4;display:flex;gap:10px}.notice-row:last-child{border:0}.notice-row strong{font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notice-row small{color:#a0a9b2;font-size:13px;display:block;margin-top:4px}.notice-dot{width:5px;height:5px;border-radius:50%;background:#ee8f73;margin-top:6px;flex:none}.quick-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.quick{border:1px solid var(--line);background:#fff;border-radius:8px;padding:15px 10px;text-align:center;color:#697683;cursor:pointer}.quick:hover{border-color:#b9c7ed;color:var(--blue)}.quick-icon{display:block;color:var(--blue);font-size:25px;margin-bottom:8px}.quick span{font-size:14px}.page-placeholder h1{font-size:29px;margin:10px 0}.page-placeholder p{color:#87919d}.directory{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.person{background:#fff;border:1px solid var(--line);border-radius:9px;padding:17px;display:flex;gap:12px;align-items:center}.person strong{font-size:15px}.person small{display:block;color:#9ba5ae;font-size:13px;margin-top:4px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,20px);opacity:0;background:#273445;color:#fff;padding:12px 18px;border-radius:8px;font-size:15px;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}.month-filter-select{border:1px solid var(--line);border-radius:7px;padding:10px 12px;font:600 15px 'Noto Sans KR';color:#5c6773;background:#fff;outline:none;min-width:150px;cursor:pointer;flex-shrink:0}.month-filter-select:focus{border-color:#8ba1ec}.directory-title{flex-wrap:wrap;row-gap:12px}@media(max-width:900px){.sidebar{width:210px}.content{padding:28px 24px}.grid{grid-template-columns:1fr 1fr}.grid .stat-card:first-child{grid-column:span 2}.main-grid{grid-template-columns:1fr}}@media(max-width:650px){.sidebar{display:none}.topbar{padding:0 20px}.content{padding:23px 16px}.grid{grid-template-columns:1fr}.grid .stat-card:first-child{grid-column:auto}.welcome{display:block}.date-chip{display:inline-block;margin-top:15px}.main-grid{grid-template-columns:1fr}.quick-actions{grid-template-columns:repeat(2,1fr)}}
.brand{cursor:pointer}.brand:focus-visible{outline:2px solid var(--blue);outline-offset:4px;border-radius:8px}
.more{color:#7f8a96;font-size:14px;font-weight:600;letter-spacing:-.2px;line-height:1;cursor:pointer}.dashboard-more{border:0;background:none;padding:3px 0}.more:hover{color:var(--blue)}.purple-stat{border-top:3px solid var(--purple)}
.stat-card{min-height:auto;padding:16px 18px;cursor:pointer;transition:.15s}.stat-card:hover{border-color:#b9c7ed;box-shadow:0 4px 14px rgba(30,45,70,.06)}.stat-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}.stat-card .stat-title{font-size:14px}.stat-card .stat-value{font:700 25px 'DM Sans';margin:8px 0 5px}.stat-card .stat-value span{font-size:14px}.stat-card .trend{font-size:13.5px}
/* 사이드바 메뉴가 길어져도 화면 전체가 늘어나지 않도록 고정 — app-shell을 뷰포트 높이에 딱 맞추고, 넘치는 사이드바는 자체 스크롤 */
.app-shell{min-height:auto;height:100vh;overflow:hidden}.sidebar{overflow-y:auto}

/* 대시보드 상단 통계 카드에 근태(출근/퇴근) 빠른 실행 카드 추가 */
:root{--teal:#3fb6b0}
.grid{grid-template-columns:repeat(5,1fr)}
.teal-stat{border-top:3px solid var(--teal)}
.attendance-quick{display:flex;flex-direction:column;gap:8px;height:100%}
.attendance-quick .stat-title{margin-bottom:0}
.attendance-quick-status{font-size:14px;color:#5c6773;font-weight:600}
.attendance-quick-actions{display:flex;gap:6px;margin-top:auto}
.attendance-quick-actions button{flex:1;border:1px solid var(--line);background:#fff;border-radius:6px;padding:7px 4px;font:700 13.5px 'Noto Sans KR';color:#5c6773;cursor:pointer;transition:.15s}
.attendance-quick-actions button:hover:not(:disabled){border-color:var(--teal);color:var(--teal)}
.attendance-quick-actions button:disabled{opacity:.45;cursor:default}
.attendance-quick-actions button.done{background:#eafaf8;border-color:var(--teal);color:var(--teal)}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.grid{grid-template-columns:1fr}}

/* 대시보드 목록(업무·일정·공지) 제목 클릭 시 수정 화면으로 — 클릭 가능함을 커서/색상으로 표시 */
.dashboard-item-title{cursor:pointer;transition:.12s;border-radius:3px}
.dashboard-item-title:hover{color:var(--blue)}

/* 대시보드 업무/일정/공지 목록 — 카드 높이는 그대로 두고 목록 안에서만 스크롤 (최대 8건 표시)
   같은 행의 카드끼리는 그리드가 높이를 맞춰 늘리므로, 목록을 고정 높이로 자르지 않고
   flex:1로 남는 공간을 채우게 해서 옆 카드보다 짧아 보이는 빈 공간이 생기지 않도록 함 */
.main-grid .card{display:flex;flex-direction:column}
.dashboard-scroll-list{flex:1;min-height:40px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d7dce2 transparent}
.dashboard-scroll-list::-webkit-scrollbar{width:6px}
.dashboard-scroll-list::-webkit-scrollbar-track{background:transparent}
.dashboard-scroll-list::-webkit-scrollbar-thumb{background:#d7dce2;border-radius:10px}
.dashboard-scroll-list::-webkit-scrollbar-thumb:hover{background:#c1c8d0}

/* 대시보드가 다시 한 화면 안에 들어오도록 — main-grid 전체 높이를
   "뷰포트 - (상단바+여백+상단 통계카드 등 고정 영역 357px)"로 못박고,
   두 행(row)이 그 안에서 1:1로 나눠 갖게 함. 목록이 넘치면 카드가 커지는 대신
   .dashboard-scroll-list 안에서만 스크롤됨. 통계 카드가 2줄로 접히는 좁은 화면
   (min-width:1101px 미만)에서는 레이아웃 자체가 달라지므로 이 고정을 적용하지 않음 */
@media(min-width:1101px){
  .main-grid{height:calc(100vh - 357px);min-height:280px;grid-template-rows:minmax(0,1.3fr) minmax(0,1fr)}
  .main-grid .card{height:100%;overflow:hidden}
}

/* 게시물 목록 세로 간격 압축 — 각 카드 안에서 최대한 5줄까지 스크롤 없이 보이도록.
   업무 관리·캘린더·공지사항 등 "전체 페이지"에서 재사용되는 같은 클래스(.task-list/.event/.notice-row)는
   그대로 두고, 대시보드 위젯(.dashboard-scroll-list) 안에서만 여백을 줄임 */
.dashboard-scroll-list .task-list li{padding:3px 0}
.dashboard-scroll-list .check{width:17px;height:17px;font-size:12px}
.dashboard-scroll-list .task-text{line-height:1.2}
.dashboard-scroll-list .event{padding:3px 0;gap:7px}
.dashboard-scroll-list .event-date{width:32px;height:38px;padding-top:0;line-height:1.15}
.dashboard-scroll-list .event strong{margin:0 0 1px;line-height:1.15}
.dashboard-scroll-list .event span{line-height:1.15}
.dashboard-scroll-list .notice-row{padding:3px 0}
.dashboard-scroll-list .notice-row strong{line-height:1.2}
.dashboard-scroll-list .notice-row small{margin-top:1px;line-height:1.15}

/* 상단 인사말 문구 교체에 맞춘 여백 정리 — 부제(날짜/한 줄 소개)가 없어져 h1만 남음 */
.welcome{margin-bottom:20px}
.welcome h1{margin:0}

/* -------------------------------------------------------------------------
   전자결재 상용 벤치마킹 — 결재선 타임라인 & 참조(CC) UI
   ------------------------------------------------------------------------- */
.approval-timeline {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px 20px;
  margin: 12px 0 16px;
  overflow-x: auto;
}
.timeline-step {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  flex: 1;
  min-width: 140px;
}
.timeline-step:not(:last-child)::after {
  content: '→';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  font-size: 16px;
  font-weight: 700;
}
.step-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  background: #e2e8f0;
  color: #64748b;
}
.timeline-step.completed .step-badge {
  background: #10b981;
  color: #fff;
}
.timeline-step.active .step-badge {
  background: #3b82f6;
  color: #fff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
.timeline-step.rejected .step-badge {
  background: #ef4444;
  color: #fff;
}
.step-content {
  display: flex;
  flex-direction: column;
}
.step-content strong {
  font-size: 13px;
  color: #1e293b;
  line-height: 1.2;
}
.step-content span {
  font-size: 12px;
  color: #64748b;
  margin-top: 2px;
}
.step-content small {
  font-size: 11px;
  color: #94a3b8;
  margin-top: 1px;
}
.approval-cc-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f1f5f9;
  border-radius: 6px;
  font-size: 13px;
  color: #475569;
  margin-bottom: 14px;
}
.approval-cc-bar strong {
  color: #2563eb;
  font-size: 12px;
  background: #dbeafe;
  padding: 2px 6px;
  border-radius: 4px;
}

/* -------------------------------------------------------------------------
   플렉스(Flex) 스타일 연차 대시보드 시각화 & 게이지
   ------------------------------------------------------------------------- */
.leave-flex-dashboard {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}
.leave-flex-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.leave-stat-card {
  padding: 18px 20px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  background: #f8fafc;
  border: 1px solid #edf2f7;
}
.leave-stat-card span.stat-title {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  margin-bottom: 6px;
}
.leave-stat-card strong.stat-val {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  line-height: 1;
}
.leave-stat-card strong.stat-val small {
  font-size: 15px;
  font-weight: 600;
  color: #64748b;
  margin-left: 2px;
}
.leave-stat-card.primary {
  background: #eff6ff;
  border-color: #bfdbfe;
}
.leave-stat-card.primary strong.stat-val {
  color: #2563eb;
}
.leave-stat-card.success {
  background: #ecfdf5;
  border-color: #a7f3d0;
}
.leave-stat-card.success strong.stat-val {
  color: #059669;
}
.leave-progress-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.leave-progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
}
.leave-bar-wrap {
  width: 100%;
  height: 12px;
  background: #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.leave-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  border-radius: 6px;
  transition: width 0.4s ease;
}

/* -------------------------------------------------------------------------
   근태 유형 뱃지 & 엑셀 버튼
   ------------------------------------------------------------------------- */
.badge.purple { background: #f3e8ff; color: #7e22ce; }
.badge.orange { background: #ffedd5; color: #c2410c; }
.badge.teal { background: #ccfbf1; color: #0f766e; }
.btn-excel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 7px;
  font: 600 13px 'Noto Sans KR';
  color: #15803d;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.btn-excel:hover {
  background: #dcfce7;
  border-color: #86efac;
}