body {
    font-family: 'Noto Sans KR', sans-serif !important;
}   

.logo-txt {
    margin-top:0;
    font-size: 1.2rem; 
    font-weight: bold; 
    margin-left:5px;
    background: linear-gradient(45deg, white, skyblue);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    vertical-align: middle;
    display: inline-block;
}   

@media (max-width: 768px) {
    .logo-img { display: none !important; }
     .header-navbar .navbar-wrapper .navbar-logo .mobile-menu { text-align: left !important;  } 
}

.pcoded-main-container  {
     background-image: url('../../images/blue_bg.png') !important; 
    background-repeat: no-repeat;           
    background-attachment: fixed;           
    background-size: cover;                 
    background-position: center;         
}   

.pcoded-mtext { 
    font-family: 'Noto Sans KR', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

.lolli-sub-navi {
    font-size: 12px !important;
    font-weight: 500 !important;
}

.content-title{
    font-size: 1.1rem; border-left: 4px solid #7c3aed; padding-left: 12px; font-weight: 600;
}
.main-project-card{
    border: 1px solid #e0e0e0; border-radius: 5px;
}

.main-title-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}

.main-title-row-col{ display: flex;  margin-left: -15px; margin-right: -15px;}
.row-wrap{ flex: 1; padding-left: 15px; padding-right: 15px; }

.main-title-row .card {
    -webkit-box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    box-shadow: 0 1px 20px 0 rgba(69, 90, 100, 0.08);
    border: none;
    font-size: 13px;
    font-weight: bold;
    border-radius: 5px;
    margin-bottom: 30px;
    height: 80px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

.my-div{ width:100%; padding-top:10px;  height:70px; text-align:center; font-weight: bold; border:1px solid #ccc; border-radius:5px; }

.main-title-first{ border-top:4px solid #7662de; }      
.main-title-second{ border-top:4px solid #42a5f5; } 
.main-title-third{ border-top:4px solid #66bb6a; }
.main-title-fourth{ border-top:4px solid #ff7043; }
.main-title-fifth{ border-top:4px solid #404e67; }
.main-title-sixth{ border-top:4px solid #eef123; background-color: #404e67; color:#fff; cursor: pointer;}

.project-cnt { font-size: 1.2rem; font-weight: bold; }

.myred{ color: red !important; }
.myorange{ color: orange !important; }
.myyellow{ color: yellow !important; }      
.mygreen{ color: green !important; }
.myblue{ color: blue !important; }
.mypurple{ color: purple !important; }
.mypink{ color: pink !important; }
.mygray{ color: gray !important; }
.myblack{ color: black !important; }
.mywhite{ color: white !important; }

.mybold{ font-weight: bold !important; }

.myp2 { padding: 0.3rem !important; }
.myp3 { padding: 0.5rem !important; }   
.myp4 { padding: 1rem !important; }

.pm_member{ margin-left:10px; background-color: #42a5f5; color:#fff; font-size:12px; border-radius: 20px; padding: 2px 15px 4px 15px; font-weight: bold; }
.pm_host{ margin-left:10px; background-color: #bb740a; color:#fff; font-size:12px; border-radius: 20px; padding: 2px 15px 4px 15px; font-weight: bold; }

.comments_member{ background-color: #42a5f5; color:#fff; font-size:12px; border-radius: 20px; padding: 2px 15px 4px 15px; font-weight: bold; }
.comments_content{ 
    margin-top:15px; 
    font-size:0.8rem; 
    color:#000; 
    white-space: pre-wrap;
    font-family: 'Noto Sans KR', sans-serif !important; 
}
.text-muted { color: #6c757d !important; font-size: 11px; padding-left:10px;  }

.mb-bottom-10 { margin-bottom: 10px; }
.margin-0 { margin: 0; }

.project-info { border-bottom:1px solid #e0e0e0; padding-bottom:20px; margin-bottom:10px;}
.main-subject {
   display: flex; 
   justify-content: space-between; 
   align-items: center; 
   padding-bottom: 10px; 
   border-bottom: 2px solid #42a5f5; 
   margin-bottom: 10px;
   border-bottom: 2px solid var(--border-color);
}
/* 상세 페이지 */
.detail-subject {
    margin-top: 10px; ;
    padding-bottom: 15px;
    margin-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}

.detail-content {
    margin-top:20px; 
    margin-bottom: 15px; 
    padding-bottom:10px;
    border-bottom: 2px solid var(--border-color);
}

.todo-box {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-top:20px; 
    margin-bottom: 10px; 
    padding-bottom:10px;  
    border-bottom: 2px solid var(--border-color);
}

.todo-insert-btn { height:30px; display: flex; align-items: center; justify-content: center; }
.todo-add-form-box { display: none; margin-bottom: 15px; padding: 12px; border: 1px solid #e0e0e0; border-radius: 5px; background-color: #f9f9f9; }
.todo-right { text-align: right; }
.todo-add-ul { padding-left: 18px; margin: 0 0 8px 0; }
.todo-add-li { border-bottom: 1px solid #e0e0e0; padding-bottom: 6px; margin-bottom: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px;}

.preview-color { 
    display:inline-block; 
    width:70px; 
    height:20px; 
    background-color: var(--border-color);
}

.ing-box {
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 10px; 
    padding-bottom:10px;  
    border-bottom: 2px solid var(--border-color);
}

.color-btn { background-color:#42a5f5; font-size:11px; height: 22px; display: flex; align-items: center; justify-content: center; padding: 0 12px; }
/* progress bar */
.progress-box { height: 18px; margin-bottom: 10px; position: relative; }
.progress-bg {  background: var(--bar-color);  width: var(--bar-width); }
.progress-percent { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color:#fff; font-size: 12px; font-weight: bold; } 

.status-text { font-size:0.8rem !important; width:80px;  }
.btn-trash { background-color: #fff; padding: 2px 6px; font-size: 11px;}

/* ======================================================
   HR 테이블 공통 스타일 (인사정보 관리용)
   사용법: 테이블에 `class="hr-table"`을 추가해서 사용합니다.

   예시:
   <table class="hr-table">
     <thead><tr><th>#</th><th>등록자</th><th>내용</th>...</tr></thead>
     <tbody>...</tbody>
   </table>

   이 파일에서 정의한 클래스들로 전체 테이블 UI를 통일하세요.
   ====================================================== */

:root{
    --hr-border: #e6eef8;
    --hr-header-bg: #f4f8fb;
    --hr-accent: #4872AC;
    --hr-row-hover: #f7fbff;
    --badge-wait-bg: #6c757d;
    --badge-approve-bg: #28a745;
    --badge-reject-bg: #dc3545;
}

.hr-table{
    width:100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size:14px;
    background:#fff;
  /*  border:1px solid var(--hr-border); */
    border-radius:6px;
    overflow:hidden;
}

.hr-table thead th{
    background:var(--hr-header-bg);
    color:#222;
    text-align:left;
    padding:12px 14px;
    font-weight:600;
    border-bottom:1px solid var(--hr-border);
}

.hr-table tbody td{
    padding:12px 14px;
    vertical-align:middle;
}

/* 행 간 구분선을 사용하여 외곽선 중첩(두꺼워 보이는 현상) 방지 */
.hr-table tbody tr + tr td{
    border-top:1px solid #f1f5f9;
}

/* 테이블 하단의 이중선 제거: 마지막 행의 상단선만 보이도록 처리 */
.hr-table tbody tr:last-child td{ border-bottom: none; }

.hr-table tbody tr:nth-child(odd){ background:#fff; }
.hr-table tbody tr:hover{ background:var(--hr-row-hover); }

.hr-table .memo-cell .short{
    display:inline-block;
    max-width:240px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hr-table .memo-cell .full{ display:none; white-space:pre-wrap; }

.badge{ display:inline-block; padding:4px 8px; border-radius:12px; font-size:12px; color:#fff; }
.badge--wait{ background:var(--badge-wait-bg); }
.badge--approved{ background:var(--badge-approve-bg); }
.badge--rejected{ background:var(--badge-reject-bg); }

.manager-process-btn{ padding:4px 8px; font-size:13px; border-radius:4px; }

/* compact 모드: 셀패딩 축소 */
.hr-table--compact thead th{ padding:8px 10px; }
.hr-table--compact tbody td{ padding:8px 10px; font-size:13px; }

/* 반응형: 작은 화면에서 헤더 숨기고 데이터 레이블을 표시 */
@media (max-width:768px){
    .hr-table thead{ display:none; }
    .hr-table tbody td{ display:block; width:100%; box-sizing:border-box; }
    .hr-table tbody tr{ display:block; margin-bottom:12px; border-bottom:1px solid var(--hr-border); padding-bottom:8px; }
    .hr-table tbody td:before{ content:attr(data-label); font-weight:600; display:block; color:#333; margin-bottom:6px; }
    .hr-table .memo-cell .short{ max-width:100%; }
}

/* 유틸: 상태 텍스트 정렬/크기 */
.hr-status{ font-size:13px; display:inline-block; min-width:56px; text-align:center; }