:root {
 	  --bg_color:#7f111b;
      --color_point: #d7000e;
	   --color_gray3:#333;
	   --primary:#d7000e;

    }
  
  * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-family: "Pretendard", "Noto Sans KR", sans-serif;
    }

    body {
      background: #f6f7f9;
      color: #222;
    }

    .layout {
      display: flex;
      min-height: 100vh;
    }

    /* 사이드바 스타일 */
    .sidebar {
      width: 260px;
      background: var(--bg_color);
      color: #fff;
      padding: 28px 20px;
      flex-shrink: 0;
    }

    .sidebar-close {
      display: none;
    }

    .brand {
      margin-bottom: 36px;
    }

    .brand-title {
      font-size: 26px;
      font-weight: 800;
    }

    .brand-sub {
      margin-top: 6px;
      font-size: 13px;
      color: rgba(255,255,255,0.75);
    }

    .menu-title {
      margin: 24px 0 4px;
      font-size: 12px;
      color: rgba(255,255,255,0.55);
      font-weight: 700;
    }

	

    .menu-item {
     margin-left:0px;
	 font-size:16px;font-weight:700;
    }

    .menu-item .menu-sub .active,
    .menu-item .menu-sub:hover {
      background: rgba(0,0,0,0.18);
      color: #fff;
      font-weight: 800;
    }

   .menu-sub {
	margin-top:12px;
       padding: 12px 14px;
      border-radius: 10px;
      font-size: 15px;
      margin-bottom: 6px;
	   background: rgba(0,0,0,0.18);
      cursor: pointer;
      transition: all 0.2s ease;

    }

    .menu-sub .menu-item {
      font-size: 14px;
      padding: 8px 3px;

      position: relative;
    }
	a{text-decoration:none;}
	  .menu-item a{text-decoration:none;font-weight: 500; color: rgba(255,255,255,0.70);}
	  .menu-item  a.fold_text{font-weight: 700;color:#fff;}

    .mobile-dim {
      display: none;
    }

    /* 메인 콘텐츠 영역 */
    .main {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
    }

    .header {
      height: 54px;
      background: #fff;
      border-bottom: 1px solid #e5e7eb;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 32px;
      gap: 16px;
    }

    .header-left {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .hamburger {
      display: none;
      width: 40px;
      height: 40px;
      border: 1px solid #e5e7eb;
      border-radius: 10px;
      background: #fff;
      font-size: 22px;
      cursor: pointer;
    }

    .header-title {
      font-size: 20px;
      font-weight: 800;
    }

    .header-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .user-name {
      font-size: 14px;
      font-weight: 700;
      color: #333;
      margin-right: 4px;
    }

    .header-btn {
      height: 34px;
      padding: 0 12px;
      border: 1px solid #ddd;
      border-radius: 8px;
      background: #fff;
      color: #333;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }

    .header-btn.logout {
      background: var(--color_gray3);
      border-color:var(--color_gray3);
      color: #fff;
    }

    .content {
      padding: 32px;
    }

    .page-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 20px;
      margin-bottom: 20px;
    }

    .page-title {
      font-size: 26px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .page-desc {
      color: #666;
      font-size: 15px;
      line-height: 1.5;
    }

    /* 권한 전환 탭 */
    .role-tabs {
      display: inline-flex;
      background: #eef0f3;
      border-radius: 12px;
      padding: 4px;
      flex-shrink: 0;
    }

    .role-tab {
      border: none;
      height: 40px;
      padding: 0 22px;
      border-radius: 10px;
      background: transparent;
      color: #555;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }

    .role-tab.active {
      background: var(--color_point);
      color: #fff;
      box-shadow: 0 6px 14px rgba(177,27,43,0.25);
    }

    .role-section {
      display: none;
    }

    .role-section.active {
      display: block;
    }

    .section-title {
		font-size:19px;
      font-weight: 800;
      color: #333;
      padding-bottom: 12px;
      border-bottom: 2px solid #333;
      margin-bottom: 18px;
    }

    /* 대시보드 카드 그리드 */
    .task-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
      margin-bottom: 28px;
    }

    .task-grid.approver-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .task-card {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      padding: 22px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.04);
      position: relative;
      overflow: hidden;
      min-height: 150px;
    }

    .task-card::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      width: 5px;
      height: 100%;
      background: #d8dce2;
    }

    .task-card.primary::before {
      background: var(--color_point);
    }

    .task-card.warning::before {
      background: #9900d9;
    }

    .task-card.success::before {
      background: #16a34a;
    }

    .task-label {
      font-size: 18px;
      color: #333;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .task-desc {
      font-size: 15px;
      color: #777;
      line-height: 1.45;
      min-height: 36px;
      margin-bottom: 16px;
    }

    .task-value {
      font-size: 34px;
      font-weight: 900;
      color: #222;
    }

    .task-value.red {
      color: var(--color_point);
    }

    .task-value.orange {
      color: #9900d9;
    }

    .task-value.green {
      color: #16a34a;
    }

    .unit {
      font-size: 15px;
      font-weight: 600;
      color: #777;
      margin-left: 2px;
    }

    /* 테이블 판넬 */
    .panel {
      background: #fff;
      border: 1px solid #e5e7eb;
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 6px 18px rgba(0,0,0,0.04);
    }


    .panel-title {
      font-size: 19px;
      font-weight: 800;
    }

    .panel-desc {
      font-size: 13px;
      color: #777;
      margin-top: 4px;
      line-height: 1.4;
    }

    /* 필터 탭 */
    .filter-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 18px;
    }

    .filter-tab {
      padding: 9px 14px;
      border-radius: 999px;
      border: 1px solid #ddd;
      background: #fff;
      font-size: 14px;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s ease;
    }

    .filter-tab.active {
      background: var(--color_point);
      color: #fff;
      border-color: var(--color_point);
      font-weight: 700;
    }

    .table-wrap {
      width: 100%;
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 14px;
    }

    th {
      text-align: left;
      color: #555;
      background: #fafafa;
      border-bottom: 1px solid #e5e7eb;
      padding: 12px;
      font-weight: 700;
      white-space: nowrap;
    }

    td {
      border-bottom: 1px solid #eef0f3;
      padding: 14px 12px;
      color: #333;
      vertical-align: middle;
      white-space: nowrap;
    }

   .table_list tr:hover td {
      background: #fff7f8;
    }

    /* 상태 배지 */
    .badge {
      display: inline-flex;
      padding: 5px 10px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
      white-space: nowrap;
    }

    .badge.approval {
      background: #f3f3f3;
      color: #555;
    }

    .badge.report {
       background: #f1e8ff;
      color: #5c2aa8;
    }

    .badge.reject {
		 background: #ffe8ea;
      color: var(--color_point);
     
    }

    .badge.progress {
      background: #e8f5ee;
      color: #137a3a;
    }

	.badge.mprogress {
      background: #e3f2fc;
      color: #1b75ae;
    }

	.badge.percent{
	  background: #fff5eb;
      color: #ff7e00;
	}

	.badge.request{ background: #fffdeb;
      color: #957e00;}

	.badge.error {
       background: #fff0f1;
      color: var(--color_point);
    }

	.badge.cansel {
       background: #f3f3f3;
      color:#666;
    }

	.deadline_title{font-weight:700;font-size:13px;color:#555;}
	.day_basic{font-weight:700;color:#111;}
	.day_over{color: var(--color_point);font-weight:700;}
	.manager_name{font-weight:700;color:#555;}

	.cansel_tr td{background:#f9f9f9;opacity:0.5;}


    /* 액션 버튼 */
    .btn {
      height: 35px;
      padding: 0 20px;
      border: none;
      border-radius: 8px;
      background: var(--color_point);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      white-space: nowrap;
	  line-height:32px;
      transition: background 0.15s ease;
    }

    .btn:hover {
      background: #90121f;
    }

    .btn.gray {
      background: #f2f3f5;
      color: #333;
    }

    .btn.gray:hover {
      background: #e4e6eb;
    }

	 .btn.outline { background: #fff; border: 1px solid #cbd5e1; color: #475569; }
    .btn.outline:hover { background: #f8fafc; }

	.date_btn{display:inline-block;margin-top:20px;padding:0px 25px;line-height:45px;height:45px;}
	.date_btn a{color:#fff;font-size:15px;}

	.new_wirte{background: #196a61;}
	.new_wirte:hover{background:#085048;}




/* ===== Pagination ===== */

.pagination{margin-top:20px;
    display:flex;
    align-items:center;
	justify-content:flex-end;
    gap:12px;
}

.pagination-list{
    display:flex;
    align-items:center;
    gap:10px;
    list-style:none;
}

.pagination-link,
.pagination-previous,
.pagination-next{
    min-width:42px;
    height:42px;
    border-radius:12px;
    border:none;
	border:1px solid #ccc;
   /* background:#f2f4f6;*/
   background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    color:var(--text);
    transition:.2s;
}

.pagination-link:hover,
.pagination-previous:hover,
.pagination-next:hover{
    background:#e7ebef;
}

.pagination-link.is-current{
    background:#555;
    color:#fff;
}


/*pc버전고정 레이아웃*/
.layout {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 260px;
    flex-shrink: 0;
}

.main {
    flex: 1;min-width:1024px;
}

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

.task-grid.approver-grid {
    grid-template-columns: repeat(3, 1fr);
}

.hamburger,
.sidebar-close,
.mobile-dim {
    display: none !important;
}



 .board-container {
      border-top: 2px solid #333;
      border-bottom: 1px solid #ccc;
      background: #fff;
      display: flex;
      flex-direction: column;
    }

.menu-item{
    margin-left:0;
    font-size:16px;
    font-weight:700;
    padding:14px 14px;
    border-radius:10px;
    cursor:pointer;
    transition:.25s;
    position:relative;
}

.menu-item a{
    color:#fff;
    text-decoration:none;
    display:block;
}

.menu-item:hover{
    background:rgba(255,255,255,.08);
}


/* ▼ 화살표 */
.has-sub::after{
    content:"▾";
    position:absolute;
    right:15px;
    top:50%;
    transform:translateY(-50%);
    transition:.3s;
    font-size:12px;
}

.has-sub.open::after{
    transform:translateY(-50%) rotate(180deg);
}


/* 펼쳐지는 메뉴 */
.menu-sub{
    overflow:hidden;
    max-height:0;
    padding:0 14px;
    margin:0 0 8px;
    background:rgba(0,0,0,.18);
    border-radius:10px;
    transition:max-height .35s ease,padding .35s ease;
}

.menu-sub.open{
    max-height:300px;
    padding:12px 14px;
}

.menu-sub .menu-item{
    padding:10px 6px;
    font-size:14px;
    border-radius:8px;
    font-weight:500;
}

.menu-sub .menu-item:hover{
    background:rgba(255,255,255,.08);
}

/* 현재 페이지 */
.menu-sub .menu-item.active,
.menu-sub .menu-item.active a{
 
    color:#ffe400;
    font-weight:700;
}

/* 상위 메뉴 활성 */
.has-sub.open{
 
   color:#ffe400;
}

/* 대시보드 */
.menu-item.active{
    background:#d7000e;
    color:#fff;
}

.menu-item.active a{
    color:#fff;
}
.menu-sub .menu-item.active{background:none;}

.has-sub{
    position:relative;
    padding-right:40px;
}

.has-sub::after{
    content:"";
    position:absolute;
    right:16px;
    top:50%;
    width:5px;
    height:5px;
    border-right:2px solid rgba(255,255,255,.8);
    border-bottom:2px solid rgba(255,255,255,.8);
    transform:translateY(-70%) rotate(45deg);
    transition:.25s ease;
}

/* 펼쳤을 때 */
.has-sub.open::after{
    transform:translateY(-30%) rotate(225deg);
}

.menu-item.has-sub.open{background:#d7000e;color:#fff;}


.inactive_state{background: #f3f3f3;color: #555;}
.active_state{background: #edfaee;color:#137318;border:1px solid #daeddb;}
.account_btn{height: 40px; padding: 0 24px;}


/*엑셀팝업*/
.excel-upload {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.file-guide {
    margin: 0;
    color: #888;
    font-size: 13px;
}

.modal-btn-area {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 25px;
}

.modal-btn-area button{height:45px;line-height:43px;font-size:16px;padding:0px 35px;}

.btn-secondary {
    background: #eee;
    color: #333;
}
.btn-secondary:hover{color:#fff;background:#666;}

/* 엑셀 파일 영역 */
.excel-upload {
    width: 100%;
}

.excel-upload-label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
}


/* 파일 선택 영역 */
.excel-file-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 46px;
    box-sizing: border-box;

    border: 1px solid #d9d9d9;
    border-radius: 5px;
    background: #fff;
    overflow: hidden;
}


/* 실제 input은 숨김 */
.excel-file-box input[type="file"] {
    display: none;
}


/* 파일찾기 버튼 */
.excel-file-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 110px;
    height: 100%;

    box-sizing: border-box;

    background: #333;


    color: #fff;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
    flex-shrink: 0;
}

.excel-file-btn:hover {
    background: #000;
}


/* 파일명 */
.excel-file-name {
    flex: 1;

    padding: 0 14px;

    color: #888;
    font-size: 13px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* 안내 문구 */
.file-guide {
    margin: 8px 0 0;

    color: #999;
    font-size: 12px;
}