@charset "utf-8";
/**
 * ============================================================
 * 파일명 : manage.css
 * 위  치 : //theme/infostep-dark/mod-property/style.css
 * 설  명 : 개인자산관리 + 음력달력 통합 전용 스타일시트
 *
 * [로드 순서]
 *   common.css → style.css
 *
 * [네임스페이스 — 클래스 접두사 규칙]
 *   pr-*    : 통장내역 / 환경설정 전용 컴포넌트
 *   gui-*   : 페이지 공통 UI 컴포넌트 (경고박스, 링크박스 등)
 *   lunar-* : 음력 달력 래퍼 및 헤더
 *   cal-*   : 달력 그리드 개별 날짜 셀
 *   dp-*    : 날짜 클릭 시 표시되는 팝업 전체
 *   ci-*    : 달력 셀 내부 정보 램프 (수입/지출/메모 표시등)
 *   cate-*  : 카테고리 관리 테이블 UI
 *
 * [layout.css 충돌 대응]
 *   layout.css 가 #sub 하위에 color:inherit !important 를 전역 적용함
 *   색상 복원이 필요한 경우 '#sub .pr-*' 이중 선택자 또는 !important 사용
 *
 * [팝업 스크롤 flex 체인 구조]
 *   .dp-popup          flex-direction:column / height:100%
 *     .dp-head         flex-shrink:0  → 항상 고정
 *     #dp-main-body    flex:1 / min-height:0 / overflow-y:auto  → 본문 스크롤
 *     #dp-form-wrap    flex:1 / min-height:0 / flex-direction:column
 *       .dp-form-tabs  flex-shrink:0  → 탭 헤더 고정
 *       #dp-tab-contents flex:1 / min-height:0 / overflow:hidden
 *         .dp-form-content height:100% / overflow-y:auto → 탭 내부 스크롤
 *     .dp-footer       flex-shrink:0  → 항상 고정
 *
 * [섹션 목록]
 *   [1]    CSS 변수 — 다크 테마 디자인 토큰
 *   [2]    색상 유틸 클래스
 *   [3]    공통 컴포넌트
 *   [4]    페이지 헤더 — pr-sub-tit
 *   [5]    탭 시스템 — pr-tabs (CSS :checked 방식)
 *   [6]    검색 폼
 *   [7]    통장내역 테이블 — pr-table6
 *   [8]    수입/지출 테이블
 *   [9]    납부/예산 카드
 *   [10]   환경설정 테이블 — pr-table
 *   [11]   공통 유틸
 *   [12]   입력 요소
 *   [13]   달력 전체 래퍼 — lunar-wrap
 *   [14]   달력 헤더
 *   [15]   달력 그리드 헤더 — lunar-grid-header
 *   [15-1] 달력 그리드 본문 — lunar-grid
 *   [16]   요일 헤더 (일~토)
 *   [17]   날짜 셀 — cal-cell
 *   [18]   공휴일명 표시
 *   [18-1] 기념일 표시
 *   [19]   근무 배지 — shift-badge
 *   [20]   카테고리 관리 UI — cate-*
 *   [21]   달력 셀 하단 정보 램프 — ci-* (Cell Info)
 *   [22]   팝업 컨테이너 — #day-view / .dp-popup
 *   [23]   팝업 본문 스크롤 — .dp-body
 *   [24]   팝업 폼 영역 스크롤 구조
 *   [25]   입/출 한줄 테이블 — .dp-inout-table
 *   [26]   팝업 근태 관리 — dp-shift-* / dp-daytype-*
 *   [27]   팝업 하단 기능 버튼 — .dp-footer
 *   [28]   항목 수정/삭제 버튼 — dp-item-actions / dp-act-*
 *   [29]   수정 모드 배너 — .dp-edit-banner
 *   [30]   근태 목록 — .dp-shift-list / .dp-shift-item
 * ============================================================
 */

/* ════════════════════════════════════
   [1] PC/모바일 탭 표시 분기
════════════════════════════════════ */
/* PC 화면(1001px 이상): 모바일 탭 숨김 */
@media screen and (min-width: 1001px) {
    .pr-mobile-tab { display: none; }
}
/* 모바일 화면(1000px 이하): PC 탭 숨김 */
@media screen and (max-width: 1000px) {
    .pr-pc-tab { display: none; }
}

/* 1. 일반 텍스트 (이름이나 '납부액:' 문구) */
span {
    font-size: 14px;         /* 기본 글자 크기 */
    color: #b0b0b0;          /* 연한 회색 (눈이 편안함) */
    margin-right: 5px;       /* 숫자와의 간격 */
}

/* 2. 강조 텍스트 (실제 숫자나 금액) */
strong {
    font-size: 16px;         /* 숫자를 더 크게 */
    color: #00d4ff;          /* 밝은 하늘색 (다크모드 포인트 컬러) */
    font-weight: 700;        /* 글자를 두껍게 */
    letter-spacing: -0.5px;  /* 숫자는 자간을 좁히면 더 깔끔함 */
}
/* ════════════════════════════════════
   [2] 색상 유틸 클래스
   ─────────────────────────────────
   layout.css [22] color:inherit!important 가
   #sub span에 적용되어 <font color="">와 동일하게 덮힘
   → #sub .pr-txt-* 로 명시도 높여 복원
   → <font> 태그 대신 이 클래스를 사용
════════════════════════════════════ */
#sub .pr-txt-red,
.pr-txt-red    { color: #e53935 !important; }

#sub .pr-txt-yellow,
.pr-txt-yellow { color: #F7D358 !important; }

#sub .pr-txt-bold,
.pr-txt-bold   { font-weight: 700; }

/* 최종 잔고 금액 강조 */
.pr-last-money    { font-size: 26px; font-weight: 700; }
.pr-last-money-mo { font-size: 18px; font-weight: 700; }


/* ════════════════════════════════════
   [3] PC 상단 헤더 — pr-sub-tit
════════════════════════════════════ */
.pr-sub-tit {
    display: flex;
    background: var(--bg-card, #0c1124);
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.11));
    padding: 20px 10px;
}

.pr-money-left {
    display: inline-block;
    width: 50%;
}
.pr-money-left h2 {
    color: var(--text-primary, #e8f0ff);
    font-size: 18px;
    letter-spacing: -1px;
    line-height: 1.4;
    margin-bottom: 16px;
}
/* em: layout.css [22] #sub p 에 걸려 color:inherit — 명시적 복원 */
#sub .pr-sub-tit em,
.pr-sub-tit em {
    color: var(--text-secondary, #7a8aaa) !important;
    display: block;
    font-size: 13px;
    font-style: normal;
    letter-spacing: -1px;
    margin-bottom: 5px;
    text-align: left;
}

.pr-money-sort { display: inline-block; width: 50%; text-align: right; }
/* li: layout.css [22] #sub li에 걸림 → background 복원 */
#sub .pr-money-sort li,
.pr-money-sort li {
    background: var(--bg-card, #0c1124) !important;
    border: 1px solid var(--border-bright, rgba(0,200,255,0.36));
    border-radius: 6px;
    display: inline-flex;
    overflow: hidden;
    transition: all 0.2s;
    margin: 5px;
}
#sub .pr-money-sort li em,
.pr-money-sort li em {
    padding: 5px 5px 5px 15px;
    color: var(--text-secondary, #7a8aaa) !important;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 30px;
}
#sub .pr-money-sort li p,
.pr-money-sort li p {
    padding: 5px 15px 5px 5px;
    color: var(--accent-blue, #6a8aff) !important;
    font-size: 12px;
    font-weight: 700;
    line-height: 30px;
    margin-left: 5px;
}
.pr-money-sort li:hover { background: rgba(0,200,255,0.06) !important; }


/* ════════════════════════════════════
   [4] PC 탭 시스템 — pr-tabs
   ─────────────────────────────────
   CSS :checked 방식 — JS 불필요
   라디오 input은 숨기고 label을 탭처럼 표시
════════════════════════════════════ */
.pr-tabs {
    padding-bottom: 40px;
    background: var(--bg-card, #0c1124);
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
    width: 100%;
    margin: 0 auto;
}

/* 라디오 버튼 숨김 */
input[name="pr-tab-item"] { display: none; }

.pr-tab-item {
    width: calc(100% / 3);
    height: 50px;
    border-bottom: 3px solid var(--border-bright, rgba(0,200,255,0.36));
    background: var(--bg-card, #0c1124);
    line-height: 50px;
    font-size: 16px;
    text-align: center;
    color: var(--text-secondary, #7a8aaa);
    display: block;
    float: left;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}
.pr-tab-item:hover { color: var(--accent-cyan, #00c8ff); opacity: 0.85; }

/* 탭 컨텐츠 기본: 숨김 */
.pr-tab-content { display: none; padding: 40px 40px 0; clear: both; overflow: hidden; }

/* 선택된 탭 컨텐츠 표시 */
#pr-all:checked         ~ #pr-all-content         { display: block; }
#pr-programming:checked ~ #pr-programming-content { display: block; }
#pr-design:checked      ~ #pr-design-content      { display: block; }

/* 선택된 탭 강조 */
.pr-tabs input[name="pr-tab-item"]:checked + .pr-tab-item {
    background: rgba(0,200,255,0.1);
    color: var(--accent-cyan, #00c8ff);
    border-bottom-color: var(--accent-cyan, #00c8ff);
}


/* ════════════════════════════════════
   [5] 검색 폼 — .pr-search-bar
   ─────────────────────────────────
   구조: .pr-search-bar > .pr-search-inner >
         .pr-search-select-wrap + .pr-search-input-wrap
         + .pr-search-btn + .pr-search-reset(선택)
   PC: 한 줄 가로 배치
   모바일(.pr-search-bar-mo): 반응형 축소
════════════════════════════════════ */

/* 폼 전체 래퍼 */
.pr-search-bar {
    margin-bottom: 20px;
}

/* 내부 flex 컨테이너 */
.pr-search-inner {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-card, #0c1124);
    border: 1px solid var(--border-bright, rgba(0,200,255,0.36));
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,0.3), 0 0 0 1px rgba(0,200,255,0.06);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.pr-search-inner:focus-within {
    border-color: var(--accent-cyan, #00c8ff);
    box-shadow: 0 0 0 3px rgba(0,200,255,0.12), 0 2px 16px rgba(0,0,0,0.3);
}

/* ── 셀렉트 래퍼 ── */
.pr-search-select-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0;
    border-right: 1px solid var(--border, rgba(0,200,255,0.18));
    background: rgba(0,200,255,0.05);
    min-width: 130px;
}
.pr-search-select-icon {
    position: absolute;
    left: 12px;
    color: var(--accent-cyan, #00c8ff);
    font-size: 12px;
    pointer-events: none;
    z-index: 1;
}
.pr-search-select-arrow {
    position: absolute;
    right: 10px;
    color: var(--text-dim, #3a4660);
    font-size: 11px;
    pointer-events: none;
    z-index: 1;
}
/* select: layout.css [22] #sub select background:transparent → 복원 */
#sub .pr-search-select,
.pr-search-select {
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary, #e8f0ff) !important;
    cursor: pointer;
    font-family: var(--font-body, 'Noto Sans KR', sans-serif);
    font-size: 13px;
    height: 44px;
    padding: 0 28px 0 32px;
    width: 100%;
    outline: none;
}
#sub .pr-search-select option,
.pr-search-select option {
    background: var(--bg-card, #0c1124);
    color: var(--text-primary, #e8f0ff);
}

/* ── 키워드 입력 래퍼 ── */
.pr-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}
.pr-search-input-icon {
    position: absolute;
    left: 14px;
    color: var(--text-dim, #3a4660);
    font-size: 13px;
    pointer-events: none;
}
/* input: layout.css [22] #sub input background:transparent → 복원 */
#sub .pr-search-input,
.pr-search-input {
    background: transparent !important;
    border: none !important;
    color: var(--text-primary, #e8f0ff) !important;
    font-family: var(--font-body, 'Noto Sans KR', sans-serif);
    font-size: 14px;
    height: 44px;
    outline: none;
    padding: 0 14px 0 38px;
    width: 100%;
}
#sub .pr-search-input::placeholder,
.pr-search-input::placeholder { color: var(--text-dim, #3a4660); }

/* ── 검색 버튼 ── */
.pr-search-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    height: 44px;
    padding: 0 22px;
    background: linear-gradient(135deg, var(--accent-cyan, #00c8ff), #0055dd) !important;
    border: none !important;
    border-left: 1px solid rgba(0,200,255,0.3);
    border-radius: 0 9px 9px 0;
    color: #fff !important;
    cursor: pointer;
    font-family: var(--font-body, 'Noto Sans KR', sans-serif);
    font-size: 14px;
    font-weight: 600;
    transition: filter 0.2s, transform 0.15s;
    white-space: nowrap;
}
.pr-search-btn:hover  { filter: brightness(1.15); }
.pr-search-btn:active { transform: scale(0.97); }
.pr-search-btn i      { font-size: 13px; }

/* ── 초기화 버튼 ── */
.pr-search-reset {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin: 0 6px;
    background: rgba(255,107,43,0.1) !important;
    border: 1px solid rgba(255,107,43,0.3);
    border-radius: 8px;
    color: var(--accent-orange, #ff6b2b) !important;
    font-size: 13px;
    text-decoration: none;
    transition: all 0.2s;
}
.pr-search-reset:hover {
    background: rgba(255,107,43,0.2) !important;
    border-color: var(--accent-orange, #ff6b2b);
    transform: rotate(-30deg);
}

/* 날짜 검색 */
.pr-sch-date       { display: flex; margin-bottom: 15px; flex-wrap: wrap; gap: 6px; align-items: center; }
.pr-slt-date input[type=text] {
    background: var(--bg-card, #0c1124) !important;
    border: 1px solid var(--border, rgba(0,200,255,0.18)) !important;
    border-radius: 8px;
    color: var(--text-primary, #e8f0ff) !important;
    font-size: 14px;
    height: 36px;
    width: 110px;
    padding: 0 10px;
    outline: none;
    transition: border-color 0.2s;
}
.pr-slt-date input[type=text]:focus {
    border-color: var(--accent-cyan, #00c8ff) !important;
    box-shadow: 0 0 0 2px rgba(0,200,255,0.12);
}
/* pr-slt-text li: layout.css [22] #sub li color:inherit → 복원 */
#sub .pr-slt-text li,
.pr-slt-text li {
    background: transparent !important;
    color: var(--text-secondary, #7a8aaa) !important;
    font-size: 13px;
    line-height: 36px;
    list-style: none;
}


/* ════════════════════════════════════
   [6] 거래내역 테이블 — pr-table6
   ─────────────────────────────────
   layout.css [22] #sub td/th background:transparent 대응
   → 명시적 선택자로 배경/색상 복원
════════════════════════════════════ */
.pr-table6 { border-top: 1px solid var(--border, rgba(0,200,255,0.11)); width: 100%; border-collapse: collapse; }
.pr-table6.list { margin-top: 0; }

/* thead: 배경 복원 */
#sub .pr-table6.list > thead > tr > th,
.pr-table6.list > thead > tr > th {
    background: rgba(0,200,255,0.06) !important;
    border-bottom: 2px solid rgba(0,200,255,0.22);
    color: var(--text-secondary, #7a8aaa) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 10px;
    text-align: center;
}

/* tbody td: 배경/색상 복원 */
.pr-table6 > tbody > tr > td {

    padding:        8px 10px;
    border-bottom:  1px solid var(--border, rgba(0,200,255,0.11));
    background:     var(--pr-bg-card, #0c1124);               /* 다크모드 배경 */
    color:          var(--text-primary, #e8f0ff);
    font-size:      13px;
    letter-spacing: -0.5px;
    vertical-align: middle;
}
/* 짝수 행 줄무늬 — 약간 밝게 */
.pr-table6 > tbody > tr:nth-child(even) > td {
    background: rgba(0,200,255,0.025);
}
/* hover 행 강조 */
.pr-table6 > tbody > tr:hover > td {
    background: rgba(0,200,255,0.06);
}
#sub .pr-table6 > tbody > tr > td > strong,
.pr-table6 > tbody > tr > td > strong {
    color: var(--text-primary, #e8f0ff) !important;
    font-weight: 700;
}

/* 교차 배경 */
#sub .pr-table6.list > tbody > tr:nth-child(odd) > td,
.pr-table6.list > tbody > tr:nth-child(odd) > td  { background: var(--bg-card, #0c1124) !important; }
#sub .pr-table6.list > tbody > tr:nth-child(even) > td,
.pr-table6.list > tbody > tr:nth-child(even) > td { background: rgba(255,255,255,0.03) !important; }

/* hover */
#sub .pr-table6.list > tbody > tr:hover > td,
.pr-table6.list > tbody > tr:hover > td { background: rgba(0,200,255,0.08) !important; }

/* no 열 */
.pr-table6 > tbody > tr > td.no { color: var(--text-dim, #3a4660) !important; font-size: 11px; }


/* ════════════════════════════════════
   [7] 수입/지출 테이블 — pr-table-list / pr-table-fill
   ─────────────────────────────────
   layout.css [22] background:transparent 로 흰배경이 사라지는 문제 복원
   → #sub .pr-table-* 로 명시도 높여 배경 복원
════════════════════════════════════ */

/* ── pr-table-list (수입/지출 내역) ── */
.pr-table-list {
    background: var(--bg-card, #0c1124);
    border-radius: 6px;
    border-collapse: collapse;
    width: 99%;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
#sub .pr-table-list td,
.pr-table-list td {
    background: var(--bg-card, #0c1124) !important;
    color: var(--text-secondary, #7a8aaa) !important;
    vertical-align: middle;
    font-size: 16px;
    border-right: 1px solid var(--border, rgba(0,200,255,0.11));
    padding: 6px 8px;
}
#sub .pr-table-list tr:nth-child(odd) td,
.pr-table-list tr:nth-child(odd) td { background: rgba(255,255,255,0.03) !important; }
#sub .pr-table-list tr:hover td,
.pr-table-list tr:hover td {
    background: rgba(0,200,255,0.08) !important;
    color: var(--text-primary, #e8f0ff) !important;
}
.pr-table-list td:last-child { border-right: none; }

/* ── pr-table-fill (납부/예산 카드 테이블) ── */
.pr-table-fill {
    background: var(--bg-card, #0c1124);
    border-radius: 6px;
    border-collapse: collapse;
    margin: auto;
    max-width: 400px;
    width: 90%;
    padding: 5px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}
#sub .pr-table-fill th,
.pr-table-fill th {
    background: rgba(0,200,255,0.08) !important;
    color: var(--text-secondary, #7a8aaa) !important;
    width: 50%;
    height: 44px;
    border-bottom: 2px solid var(--border-bright, rgba(0,200,255,0.36));
    border-right: 1px solid var(--border, rgba(0,200,255,0.11));
    font-weight: 600;
    text-align: center;
    vertical-align: middle;
}
#sub .pr-table-fill th:last-child,
.pr-table-fill th:last-child { border-right: none; }
#sub .pr-table-fill td,
.pr-table-fill td {
    background: var(--bg-card, #0c1124) !important;
    color: var(--text-primary, #e8f0ff) !important;
    height: 44px;
    text-align: center;
    vertical-align: middle;
    font-size: 17px;
    font-weight: 300;
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.11));
    border-right: 1px solid var(--border, rgba(0,200,255,0.11));
}
#sub .pr-table-fill td:last-child,
.pr-table-fill td:last-child { border-right: none; }
#sub .pr-table-fill tr:nth-child(odd) td,
.pr-table-fill tr:nth-child(odd) td { background: rgba(255,255,255,0.03) !important; }
#sub .pr-table-fill tr:hover td,
.pr-table-fill tr:hover td {
    background: rgba(0,200,255,0.08) !important;
    color: #fff !important;
}

/* ── pr-th-dark: 어두운 헤더 (수입총액/지출총액 타이틀) ── */
#sub table .pr-th-dark,
table .pr-th-dark {
    background: rgba(0,200,255,0.1) !important;
    color: var(--text-primary, #e8f0ff) !important;
    border-bottom: 2px solid var(--border-bright, rgba(0,200,255,0.36));
    padding: 12px;
}

/* ── pr-fraternity-wrap ── */
.pr-fraternity-wrap { width: 100%; }
.pr-table-center {
    display: block;
    margin: 0 auto;
    padding: 10px;
    text-align: center;
    background: rgba(0,200,255,0.1);
    border-radius: 6px 6px 0 0;
    margin-bottom: 8px;
}
/* em: #sub span에 걸려 color:inherit → 복원 */
#sub .pr-table-center em,
.pr-table-center em {
    font-size: 22px;
    color: var(--text-primary, #e8f0ff) !important;
    font-style: normal;
}


/* ════════════════════════════════════
   [8] 납부/예산 카드 — pr-member-card / pr-table-title
════════════════════════════════════ */
.pr-member-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.pr-member-card {
    flex: 1 1 calc(33.33% - 16px);
    min-width: 200px;
    text-align: center;
}
.pr-table-title {
    display: block;
    margin: auto;
    padding: 8px;
    width: 100%;
    text-align: center;
    background: rgba(0,200,255,0.12);
    border-radius: 6px 6px 0 0;
    margin-bottom: 4px;
}
/* em: #sub span 에 걸림 → 복원 */
#sub .pr-table-title em,
.pr-table-title em {
    font-size: 22px;
    color: var(--text-primary, #e8f0ff) !important;
    font-style: normal;
}


/* ════════════════════════════════════
   [9] 공통 유틸
════════════════════════════════════ */
/* 데이터 없음 */
#sub .pr-nodata,
.pr-nodata {
    color: var(--text-dim, #3a4660) !important;
    display: block;
    font-style: italic;
    letter-spacing: -1px;
    padding: 40px 0;
    text-align: center;
}
.pr-nodata::before { content: '// '; }

/* 페이징 */
.pr-paging { margin-top: 20px; }


/* ════════════════════════════════════
   [10] 모바일 (@media max-width:1000px)
════════════════════════════════════ */
@media screen and (max-width: 1000px) {

    /* ── 모바일 헤더 ── */
    .pr-mod-sub-tit {
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    .pr-mod-money-sort {
        border: 1px solid var(--border, rgba(0,200,255,0.11));
        display: inline-block;
        width: 100%;
        background: var(--bg-card, #0c1124);
        text-align: right;
    }
    .pr-mod-money-sort h2 {
        background: transparent;
        margin: 10px;
        text-align: left;
        color: var(--text-primary, #e8f0ff);
    }
    #sub .pr-mod-money-sort em,
    .pr-mod-money-sort em {
        color: var(--text-secondary, #7a8aaa) !important;
        display: block;
        font-style: normal;
        letter-spacing: -1px;
        margin: 0 0 5px 10px;
        text-align: left;
    }
    /* ul/li: layout.css [22] #sub ul/li background → 복원 */
    #sub .pr-mod-money-sort ul,
    .pr-mod-money-sort ul { display: block !important; text-align: right !important; padding: 5px !important; }
    #sub .pr-mod-money-sort li,
    .pr-mod-money-sort li {
        display: inline-block !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 2px !important;
        padding: 5px 10px !important;
        border: 1px solid var(--border, rgba(0,200,255,0.11));
        background: var(--bg-card, #0c1124) !important;
        box-sizing: border-box !important;
        vertical-align: top !important;
    }
    #sub .pr-mod-money-sort li em,
    .pr-mod-money-sort li em {
        display: inline-block !important;
        font-size: 11px !important;
        margin: 0 !important;
		padding-right: 10px;
        color: var(--text-secondary, #7a8aaa) !important;
        vertical-align: middle;
    }
    #sub .pr-mod-money-sort li p,
    .pr-mod-money-sort li p {
        display: inline-block !important;
        font-size: 11px !important;
        margin: 0 !important;
        color: var(--accent-blue, #6a8aff) !important;
        vertical-align: middle;
    }

    /* ── 모바일 탭 ── */
    .pr-mod-tabs {
        padding-bottom: 20px;
        background: var(--bg-card, #0c1124);
        box-shadow: 0 0 10px rgba(0,0,0,0.4);
        width: 100%;
        margin: 0 auto;
    }
    input[name="pr-mod-tab-item"] { display: none; }
    .pr-mod-tab-item {
        width: calc(100% / 3);
        height: 46px;
        border-bottom: 3px solid var(--border-bright, rgba(0,200,255,0.36));
        background: var(--bg-card, #0c1124);
        line-height: 46px;
        font-size: 12px;
        text-align: center;
        color: var(--text-secondary, #7a8aaa);
        display: block;
        float: left;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.2s ease;
    }
    .pr-mod-tab-item:hover { color: var(--accent-cyan, #00c8ff); }
    .pr-mod-tab-content { display: none; padding: 10px 0 0; clear: both; overflow: hidden; }

    /* 선택된 탭 컨텐츠 표시 */
    #pr-mod-all:checked         ~ #pr-mod-all-content         { display: block; }
    #pr-mod-programming:checked ~ #pr-mod-programming-content { display: block; }
    #pr-mod-design:checked      ~ #pr-mod-design-content      { display: block; }

    .pr-mod-tabs input[name="pr-mod-tab-item"]:checked + .pr-mod-tab-item {
        background: rgba(0,200,255,0.1);
        color: var(--accent-cyan, #00c8ff);
        border-bottom-color: var(--accent-cyan, #00c8ff);
    }

    /* ── 모바일 검색바 축소 ── */
    .pr-search-bar-mo .pr-search-inner { border-radius: 8px; }
    .pr-search-bar-mo .pr-search-select-wrap { min-width: 100px; }
    .pr-search-bar-mo .pr-search-select { font-size: 12px; height: 40px; padding: 0 24px 0 28px; }
    .pr-search-bar-mo .pr-search-input  { font-size: 12px; height: 40px; padding: 0 10px 0 32px; }
    .pr-search-bar-mo .pr-search-btn    { height: 40px; padding: 0 14px; font-size: 13px; gap: 0; }
    .pr-search-bar-mo .pr-search-btn span { display: none; } /* 모바일: 버튼 텍스트 숨김 */
    .pr-search-bar-mo .pr-search-input-icon { font-size: 12px; left: 10px; }
    .pr-search-bar-mo .pr-search-select-icon { font-size: 11px; left: 9px; }
    .pr-search-bar-mo .pr-search-reset { width: 30px; height: 30px; margin: 0 4px; }

    /* ── 모바일 날짜 검색 ── */
    .pr-mod-sch-date { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px; }

    /* ── 모바일 테이블1 (헤더 고정) ── */
    .pr-mod-table1 { width: 100%; border-collapse: collapse; }
    .pr-mod-table1.list > thead > tr > th {
        background: rgba(0,200,255,0.06) !important;
        border-bottom: 1px solid var(--border-bright, rgba(0,200,255,0.36));
        color: var(--text-secondary, #7a8aaa) !important;
        font-size: 11px;
        padding: 8px 3px;
        text-align: center;
    }

    /* ── 모바일 테이블2 (데이터) ── */
    .pr-mod-table2 { width: 100%; border-collapse: collapse; }
    #sub .pr-mod-table2 > tbody > tr > td,
    .pr-mod-table2 > tbody > tr > td {
        background: transparent !important;
        color: var(--text-secondary, #7a8aaa) !important;
        padding: 0;
    }
    #sub .pr-mod-table2 > tbody > tr:nth-child(even) > td,
    .pr-mod-table2 > tbody > tr:nth-child(even) > td { background: rgba(255,255,255,0.02) !important; }
    #sub .pr-mod-table2 > tbody > tr:hover > td,
    .pr-mod-table2 > tbody > tr:hover > td { background: rgba(0,200,255,0.06) !important; }

    /* ── 모바일 테이블4 (내부 데이터 행) ── */
    .pr-mod-table4 { width: 100%; border-collapse: collapse; }
    #sub .pr-mod-table4 > tr > th,
    .pr-mod-table4 > tr > th,
    #sub .pr-mod-table4 > tbody > tr > th,
    .pr-mod-table4 > tbody > tr > th {
        background: var(--bg-card, #0c1124) !important;
        color: var(--text-secondary, #7a8aaa) !important;
        border-bottom: 1px solid var(--border, rgba(0,200,255,0.11));
        font-size: 11px;
        font-weight: 400;
        padding: 6px 4px;
        text-align: center;
    }

    /* ── 모바일 수입/지출 테이블 ── */
    .pr-mod-table-list {
        background: var(--bg-card, #0c1124);
        border-collapse: collapse;
        width: 99%;
    }
    #sub .pr-mod-table-list td,
    .pr-mod-table-list td {
        background: var(--bg-card, #0c1124) !important;
        color: var(--text-secondary, #7a8aaa) !important;
        font-size: 11px;
        padding: 4px;
        border-bottom: 1px solid var(--border, rgba(0,200,255,0.11));
    }
    #sub .pr-mod-table-list tr:nth-child(odd) td,
    .pr-mod-table-list tr:nth-child(odd) td { background: rgba(255,255,255,0.02) !important; }
    #sub .pr-mod-table-list tr:hover td,
    .pr-mod-table-list tr:hover td {
        background: rgba(0,200,255,0.08) !important;
        color: var(--text-primary, #e8f0ff) !important;
    }

    /* ── 모바일 납부/예산 카드 ── */
    .pr-mod-member-row {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 16px;
    }
    .pr-mod-member-card { width: 100%; text-align: center; }

    .pr-mod-table-title {
        display: block;
        width: 100%;
        padding: 6px;
        text-align: center;
        background: rgba(0,200,255,0.12);
        border-radius: 6px 6px 0 0;
        margin-bottom: 2px;
    }
    #sub .pr-mod-table-title em,
    .pr-mod-table-title em {
        font-size: 15px;
        color: var(--text-primary, #e8f0ff) !important;
        font-style: normal;
    }

    .pr-mod-table-center {
        display: block;
        width: 100%;
        padding: 8px;
        text-align: center;
        background: rgba(0,200,255,0.1);
        border-radius: 6px 6px 0 0;
        margin-bottom: 6px;
    }
    #sub .pr-mod-table-center em,
    .pr-mod-table-center em {
        font-size: 13px;
        color: var(--text-primary, #e8f0ff) !important;
        font-style: normal;
    }

    .pr-mod-fraternity-wrap { width: 100%; }

    /* ── 모바일 납부/예산 fill 테이블 ── */
    .pr-mod-table-fill {
        background: var(--bg-card, #0c1124);
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 12px;
    }
    #sub .pr-mod-table-fill th,
    .pr-mod-table-fill th {
        background: rgba(0,200,255,0.08) !important;
        color: var(--text-secondary, #7a8aaa) !important;
        width: 50%;
        height: 35px;
        border-bottom: 2px solid var(--border-bright, rgba(0,200,255,0.36));
        border-right: 1px solid var(--border, rgba(0,200,255,0.11));
        font-weight: 600;
        text-align: center;
        font-size: 13px;
    }
    #sub .pr-mod-table-fill th:last-child,
    .pr-mod-table-fill th:last-child { border-right: none; }
    #sub .pr-mod-table-fill td,
    .pr-mod-table-fill td {
        background: var(--bg-card, #0c1124) !important;
        color: var(--text-primary, #e8f0ff) !important;
        height: 40px;
        text-align: center;
        vertical-align: middle;
        font-size: 14px;
        border-bottom: 1px solid var(--border, rgba(0,200,255,0.11));
        border-right: 1px solid var(--border, rgba(0,200,255,0.11));
    }
    #sub .pr-mod-table-fill td:last-child,
    .pr-mod-table-fill td:last-child { border-right: none; }
    #sub .pr-mod-table-fill tr:nth-child(odd) td,
    .pr-mod-table-fill tr:nth-child(odd) td { background: rgba(255,255,255,0.03) !important; }
    #sub .pr-mod-table-fill tr:hover td,
    .pr-mod-table-fill tr:hover td {
        background: rgba(0,200,255,0.08) !important;
        color: #fff !important;
    }


    /* ════════════════════════════════════
       달력 그리드 — 모바일 셀 레이아웃
       표시 순서: 양력날짜 → 주/야 → 근태배지 → 일정(점) → 수입(점) → 지출(점) → 음력
    ════════════════════════════════════ */

    /* 달력 그리드 — 모바일 최소 높이 */
    .lunar-grid       { grid-template-columns: repeat(7, 1fr); gap: 1px; }
    .cal-cell         { padding: 3px 2px; min-height: 72px; font-size: 11px; border-radius: 3px; }

    /* 셀 상단: 양력날짜(좌) + 음력(우) 순서 뒤바꿈 — 양력 아래에 음력 */
    .cell-top-row     { flex-direction: column; align-items: flex-start; gap: 1px; }
    .day-num          { font-size: 13px; font-weight: 700; line-height: 1.2; }
    .lunar-date       { font-size: 8px; color: var(--pr-text-dim, #3a4660); order: 6; align-self: flex-end; margin-top: auto; }

    /* 주/야 배지 — 날짜 아래 */
    .cell-shift-row   { margin-top: 1px; }
    .lunar-wrap .shift-badge { font-size: 8px; padding: 1px 3px; border-radius: 2px; }

    /* 공휴일명/기념일명 숨김 (모바일 공간 부족) */
    .holiday-name, .isholiday-name { display: none; }

    /* cell-spacer 제거 */
    .cell-spacer      { display: none; }

    /* 하단 정보 램프 — 세로 나열 (일정→수입→지출) */
    .cell-bottom      { margin-top: 2px; }
    .cell-info        { display: flex; flex-direction: column; gap: 1px; }

    /* ci-item 모바일: 점(lamp)만 보이는 간결 모드 */
    .ci-item          {
        display:      flex;
        align-items:  center;
        gap:          3px;
        padding:      1px 2px;
        border-radius: 2px;
        background:   transparent !important;  /* 배경 제거 — 점만 강조 */
    }
    .ci-lamp          { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }
    .ci-label         { font-size: 8px; color: var(--pr-text-dim, #5a6a8a); }
    .ci-value         { font-size: 8px; }

    /* 일정 점: 파랑 */
    .ci-item.ci-memo .ci-lamp  { background: #5b9ff5; box-shadow: none; }
    .ci-item.ci-memo .ci-label { color: #7ab4ff; }
    .ci-item.ci-memo .ci-value { color: #a8cdff; }

    /* 수입 점: 초록 */
    .ci-item.ci-in  .ci-lamp   { background: #00c896; box-shadow: none; }
    .ci-item.ci-in  .ci-label  { color: #00c896; }
    .ci-item.ci-in  .ci-value  { color: #7ae8c8; }

    /* 지출 점: 빨강 */
    .ci-item.ci-out .ci-lamp   { background: #ff4c4c; box-shadow: none; }
    .ci-item.ci-out .ci-label  { color: #ff8080; }
    .ci-item.ci-out .ci-value  { color: #ffaaaa; }

    /* 음력 날짜 — 맨 아래 배치 (order: 6) */
    .cell-top-row .lunar-date  { display: block; }

    /* ════════════════════════════════════
       달력 팝업 모바일 — 전체화면
    ════════════════════════════════════ */
    #day-view {
        width:         100vw !important;
        height:        100vh !important;
        top:           0 !important;
        left:          0 !important;
        transform:     none !important;
        border-radius: 0 !important;
        max-height:    none !important;
    }
    .dp-popup {
        border-radius: 0 !important;
        max-height:    100vh !important;
    }
    /* 팝업 헤더 */
    .dp-head-date     { font-size: 14px; }
    /* 팝업 본문 스크롤 */
    .dp-body          { font-size: 13px; }
    /* 폼 입력 */
    .dp-form-input    { font-size: 14px; height: 38px; }
    .dp-form-row      { flex-direction: column; gap: 4px; }
    .dp-form-label    { min-width: unset; font-size: 12px; }

    /* ── 달력 링크/환경설정 버튼 (모바일) ── */
    .pr-cal-link      { margin-top: 6px; padding: 5px 12px; font-size: 12px; }
    .pr-money-sort    { width: 100%; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }


} /* end @media max-width:1000px */
/* ════════════════════════════════════════════════════════════════════════════
   [10] 환경설정 테이블 — pr-table
   · 두꺼운 thead + th/td 혼합 레이아웃 (라벨:값 형태)
   · btn1(등록), btn2(삭제), input.keyword 포함
════════════════════════════════════════════════════════════════════════════ */

/* 테이블 컨테이너 — 둥근 테두리 */
#sub .pr-table, .pr-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    background: var(--pr-bg-card) !important;
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    overflow: hidden;                                /* 내부 셀이 radius 밖으로 나오지 않도록 */
}

/* ── thead th — 섹션 제목 헤더 ── */
#sub .pr-table > thead > tr > th,
.pr-table > thead > tr > th {
    background: rgba(0,200,255,0.08) !important;
    color: var(--pr-text-primary) !important;
    font-size: 14px;
    font-weight: 700;
    padding: 13px 16px;
    text-align: left;
    border-bottom: 2px solid var(--pr-border-bright);/* 헤더 하단 강조선 */
    letter-spacing: -0.3px;
}

/* 헤더 내 아이콘 (Font Awesome 등) */
#sub .pr-table > thead > tr > th i,
.pr-table > thead > tr > th i {
    color: var(--pr-cyan);
    margin-right: 6px;                               /* 아이콘과 텍스트 간격 */
}

/* 헤더 내 부가 설명 small */
#sub .pr-table > thead > tr > th small,
.pr-table > thead > tr > th small {
    color: var(--pr-text-dim) !important;
    font-size: 11px;
    font-weight: 400;
    margin-left: 8px;
}

/* ── tbody/tfoot th — 행 레이블 (왼쪽 라벨 셀) ── */
#sub .pr-table > tbody > tr > th,
.pr-table > tbody > tr > th,
#sub .pr-table > tfoot > tr > th,
.pr-table > tfoot > tr > th {
    background: rgba(0,200,255,0.04) !important;     /* 아주 약한 청록 배경 */
    color: var(--pr-text-sub) !important;
    font-size: 13px;
    font-weight: 600;
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--pr-border);
    border-right: 1px solid var(--pr-border);        /* 라벨/값 세로 구분선 */
    white-space: nowrap;                             /* 레이블 줄바꿈 방지 */
    vertical-align: middle;
    width: 160px;                                    /* 라벨 고정 너비 */
}

/* ── tbody/tfoot td — 행 값 (오른쪽 값 셀) ── */
#sub .pr-table > tbody > tr > td,
.pr-table > tbody > tr > td,
#sub .pr-table > tfoot > tr > td,
.pr-table > tfoot > tr > td {
    background: var(--pr-bg-card) !important;
    color: var(--pr-text-primary) !important;
    font-size: 13px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--pr-border);
    vertical-align: middle;
}

/* 홀수 행 배경 */
#sub .pr-table > tbody > tr:nth-child(odd) > td,
.pr-table > tbody > tr:nth-child(odd) > td {
    background: var(--pr-bg-card) !important;
}

/* 짝수 행 배경 (미묘한 교번) */
#sub .pr-table > tbody > tr:nth-child(even) > td,
.pr-table > tbody > tr:nth-child(even) > td {
    background: rgba(255,255,255,0.025) !important;
}

/* 행 호버 */
#sub .pr-table > tbody > tr:hover > td,
.pr-table > tbody > tr:hover > td {
    background: rgba(0,200,255,0.05) !important;
}

/* 마지막 행 하단 테두리 제거 (테이블 외곽 테두리와 중복 방지) */
#sub .pr-table > tbody > tr:last-child > td,
.pr-table > tbody > tr:last-child > td,
#sub .pr-table > tbody > tr:last-child > th,
.pr-table > tbody > tr:last-child > th {
    border-bottom: none;
}

/* tfoot 첫 번째 th — 합계/합산 레이블 강조 */
#sub .pr-table > tfoot > tr:first-child > th,
.pr-table > tfoot > tr:first-child > th {
    background: rgba(0,200,255,0.07) !important;
    border-top: 2px solid var(--pr-border-bright);   /* 본문과의 이중 구분선 */
    color: var(--pr-text-primary) !important;
    font-size: 13px;
    font-weight: 700;
    padding: 10px 16px;
    width: auto;                                     /* 고정 너비 해제 */
}

/* td 내 강조 텍스트 */
#sub .pr-table > tbody > tr > td strong,
.pr-table > tbody > tr > td strong {
    color: var(--pr-text-primary) !important;
    font-size: 14px;
    font-weight: 700;
}

/* td 내 부가 설명 */
#sub .pr-table > tbody > tr > td small,
.pr-table > tbody > tr > td small {
    color: var(--pr-text-dim) !important;
    font-size: 11px;
    margin-left: 6px;
}

/* ── 삭제 버튼 btn2 — 빨간 아이콘 버튼 ── */
#sub .pr-table .btn2, .pr-table .btn2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    padding: 0;
    background: rgba(229,57,53,0.12) !important;     /* 빨간 12% 배경 */
    border: 1px solid rgba(229,57,53,0.3) !important;
    border-radius: 6px;
    color: var(--pr-red) !important;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

/* 삭제 버튼 호버 — 더 선명한 빨강 */
#sub .pr-table .btn2:hover, .pr-table .btn2:hover {
    background: rgba(229,57,53,0.25) !important;
    border-color: var(--pr-red) !important;
    box-shadow: 0 0 10px rgba(229,57,53,0.2);
}

/* ── 등록/저장 버튼 btn1 — 청록 그라데이션 ── */
#sub .pr-table .btn1, .pr-table .btn1 {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    background: linear-gradient(135deg, var(--pr-cyan), #0055dd) !important;
    border: none !important;
    border-radius: 7px;
    color: #fff !important;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s, transform 0.15s;
    text-decoration: none;
    white-space: nowrap;
}

/* 등록 버튼 호버 */
#sub .pr-table .btn1:hover, .pr-table .btn1:hover { filter: brightness(1.15); }

/* 등록 버튼 클릭 */
#sub .pr-table .btn1:active, .pr-table .btn1:active { transform: scale(0.97); }

/* ── 키워드 입력 필드 ── */
#sub .pr-table input.keyword, .pr-table input.keyword {
    background: var(--pr-bg-card) !important;
    border: 1px solid rgba(0,200,255,0.22) !important;
    border-radius: 6px;
    color: var(--pr-text-primary) !important;
    font-size: 13px;
    height: 36px;
    padding: 0 12px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 160px;
}

/* 키워드 입력 포커스 */
#sub .pr-table input.keyword:focus, .pr-table input.keyword:focus {
    border-color: var(--pr-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0,200,255,0.12);
}

/* 키워드 placeholder */
#sub .pr-table input.keyword::placeholder,
.pr-table input.keyword::placeholder {
    color: var(--pr-text-dim);
}

/* ── 텍스트 정렬 유틸 ── */
#sub .pr-table .tac, .pr-table .tac { text-align: center; }  /* 가운데 정렬 */
#sub .pr-table .tal, .pr-table .tal { text-align: left; }    /* 왼쪽 정렬 */
#sub .pr-table .tar, .pr-table .tar { text-align: right; }   /* 오른쪽 정렬 */


/* ════════════════════════════════════════════════════════════════════════════
   [11] 공통 유틸
   · 데이터 없음 표시 / 페이징 / 전체 건수 뱃지
════════════════════════════════════════════════════════════════════════════ */

/* 데이터 없음 메시지 — 코드 주석 스타일 */
#sub .pr-nodata, .pr-nodata {
    color: var(--pr-text-dim) !important;
    display: inline-block;
    font-style: italic;
    padding: 20px 0;
    text-align: center;
    width: 100%;
    letter-spacing: -0.5px;
}

/* '// ' 접두어 자동 삽입 (개발자 감성) */
.pr-nodata::before { content: '// '; }

/* 페이징 컨테이너 */
.pr-paging { margin-top: 20px; }

/* 전체 건수 뱃지 바 */
.pr-total-count {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 0 20px;
    height: 44px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(0,200,255,0.3);
    border-radius: 8px;
    white-space: nowrap;
}

/* 건수 레이블 */
#sub .pr-total-count .label, .pr-total-count .label {
    color: var(--pr-text-sub) !important;
    font-weight: 700;
    font-size: 0.9rem;
}

/* 건수 값 — 블루 강조 */
#sub .pr-total-count .value, .pr-total-count .value {
    color: var(--pr-blue) !important;
    font-weight: bold;
    font-size: 1.1rem;
}


/* ════════════════════════════════════════════════════════════════════════════
   [12] 입력 요소
   · 관리자 메모/긴 텍스트 입력을 위한 textarea
════════════════════════════════════════════════════════════════════════════ */

/* 관리 textarea 기본 */
.pr-admin-textarea {
    background: var(--pr-bg-card) !important;
    border: 1px solid var(--pr-border) !important;
    border-radius: 6px;
    color: var(--pr-text-primary) !important;
    font-size: 13px;
    padding: 10px;
    width: 100%;
    resize: vertical;                                /* 상하 크기 조절만 허용 */
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    line-height: 1.6;
}

/* textarea 포커스 */
.pr-admin-textarea:focus {
    border-color: var(--pr-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0,200,255,0.12);
}

/* textarea placeholder */
.pr-admin-textarea::placeholder { color: var(--pr-text-dim); }

/* pr-table 내부 textarea — 최소 높이 지정 */
#sub .pr-table .pr-admin-textarea, .pr-table .pr-admin-textarea {
    min-height: 80px;                                /* 충분한 입력 공간 확보 */
}

/* ════════════════════════════════════════════════════════════════════════════
   [13] 달력 전체 래퍼 — lunar-wrap
   · 뷰포트 높이 기반으로 달력이 화면에 꽉 차도록 설정
   · flex-direction:column 으로 헤더/그리드 수직 배치
════════════════════════════════════════════════════════════════════════════ */
.lunar-wrap {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;                          /* 헤더 위, 그리드 아래 */
    color: #e8f0ff;
    padding: 0 4px 40px;                            /* 하단 padding으로 푸터 여백 확보 */
}


/* ════════════════════════════════════════════════════════════════════════════
   [14] 달력 헤더
   · 연도(좌) / 월 + 이전·다음(가운데) / 오늘 버튼(우) 3분할 레이아웃
════════════════════════════════════════════════════════════════════════════ */

/* 헤더 전체 행 */
.lunar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 4px 14px;
    flex-shrink: 0;                                  /* 달력 줄어들어도 헤더 크기 유지 */
}

/* 좌측 — 연도 표시 영역 */
.header-year {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;                                /* 연도가 짧아도 좌측 공간 유지 */
}

/* 가운데 — 월 표시 + 이전/다음 버튼 */
.header-month-center {
    flex: 1;                                         /* 나머지 공간 차지 */
    text-align: center;
}

/* 우측 — 오늘 이동 버튼 영역 */
.header-month-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 140px;
    justify-content: flex-end;                       /* 우측 끝 정렬 */
}

/* 연도 텍스트 */
.lunar-wrap .year-label {
    font-size: 16px;
    font-weight: 600;
    color: #a0b4d0;                                  /* 흐린 청회색 */
    min-width: 60px;
    text-align: center;
}

/* 월 숫자 — 크고 선명한 청록 */
.month-big {
    font-size: 28px;
    font-weight: 800;
    color: #00c8ff;                                  /* 브랜드 청록 */
    letter-spacing: 0.02em;
}

/* 이전/다음 월 버튼 — 원형 */
.lunar-wrap .nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;                              /* 완전한 원형 */
    background: rgba(0,200,255,0.1);
    color: #00c8ff;
    font-size: 20px;
    text-decoration: none;
    transition: background 0.18s;
    line-height: 1;
    position: static;                                /* 부모 레이아웃 흐름 유지 */
    border: none;
    padding: 0;
    letter-spacing: normal;
    font-family: inherit;
    white-space: nowrap;
}

/* nav-btn 호버 */
.lunar-wrap .nav-btn:hover {
    background: rgba(0,200,255,0.26);
    color: #00c8ff;
    transform: none;                                 /* 글로벌 a:hover transform 재정의 방지 */
    border-color: transparent;
}

/* 오늘 이동 버튼 */
.lunar-wrap .today-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 13px;
    border-radius: 6px;
    background: rgba(0,200,255,0.12);
    color: #00c8ff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(0,200,255,0.28);
    transition: background 0.18s;
    white-space: nowrap;
    width: auto;
    height: auto;
    letter-spacing: normal;
    font-family: inherit;
}

/* 오늘 버튼 호버 */
.lunar-wrap .today-btn:hover {
    background: rgba(0,200,255,0.26);
    color: #00c8ff;
    transform: none;                                 /* 전역 hover 효과 방지 */
}

/* ════════════════════════════════════════════════════════════════════════════
   [15] 달력 그리드 헤더 — lunar-grid-header
   · CSS Grid 7열 균등 분할 (요일 헤더용)
════════════════════════════════════════════════════════════════════════════ */
.lunar-grid-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);           /* 7열 균등 분할 */
    gap: 3px;                                        /* 셀 간격 */
}

/* ════════════════════════════════════════════════════════════════════════════
   [15-1] 달력 그리드 본문 — lunar-grid
   · CSS Grid — 7열(일~토), 날짜 셀 6행
════════════════════════════════════════════════════════════════════════════ */
.lunar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);           /* 7열 균등 분할 */
    grid-auto-rows: minmax(110px, auto);             /* 행 최소 110px, 내용에 따라 늘어남 */
    gap: 3px;                                        /* 셀 간격 */
}


/* ════════════════════════════════════════════════════════════════════════════
   [16] 요일 헤더 (일~토)
════════════════════════════════════════════════════════════════════════════ */

/* 요일 헤더 공통 */
.dow-header {
    display: grid;
    padding: 7px 4px;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #7a8aaa;                                  /* 흐린 보조색 */
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(0,200,255,0.1);    /* 하단 구분선 */
}

/* 일요일 — 빨간색 */
.dow-header.sun { color: #ff6b6b; }

/* 토요일 — 파란색 */
.dow-header.sat { color: #5b9ff5; }


/* ════════════════════════════════════════════════════════════════════════════
   [17] 날짜 셀 — cal-cell
   · flex-direction:column 으로 날짜번호(상) / 정보(하) 배치
════════════════════════════════════════════════════════════════════════════ */

/* 날짜 셀 기본 */
.cal-cell {
    padding: 6px 8px;
    background: rgba(0,200,255,0.03);                /* 매우 약한 청록 배경 */
    border: 1px solid rgba(0,200,255,0.07);
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;                          /* 상단:날짜번호 / 하단:정보 수직 배치 */
    box-sizing: border-box;
    min-height: 0;                                   /* grid 자식 overflow 허용 */
    overflow: hidden;                                /* 내용이 넘쳐도 클리핑 */
    position: relative;                              /* 내부 절대위치 기준 */
}

/* 1. 공통: 휴무 배지 기본 디자인 */
.cal-cell.is-leave {
    position: relative; /* 배지의 기준점이 됨 */
}

/* ::after 가상 요소로 중앙에 글자 배지 생성 */
.cal-cell.is-leave::after {
    position: absolute;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%); /* 완벽한 정중앙 배치 */
    
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: bold;
    color: #ffffff; /* 글자색은 흰색 고정 */
    white-space: nowrap; /* 글자 줄바꿈 방지 */
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* 살짝 그림자 효과 */
}

/* 2. 항목별 배경색 및 내용 지정 */

/* 대휴: 보라색 */
.cal-cell.leave-대휴::after {
    content: "대휴";
    background-color: #722ed1; 
}

/* 월차: 빨간색 */
.cal-cell.leave-월차::after {
    content: "월차";
    background-color: #ff4d4f;
}

/* 적치: 초록색 */
.cal-cell.leave-적치::after {
    content: "적치";
    background-color: #52c41a;
}

/* 연차: 파란색 */
.cal-cell.leave-연차::after {
    content: "연차";
    background-color: #1890ff;
}

/* 기타/휴무: 오렌지색 */
.cal-cell.leave-기타::after,
.cal-cell.leave-휴무::after {
    content: "휴무";
    background-color: #fa8c16;
}

/* 3. (옵션) 휴무일 날짜 숫자 색상 변경 */
.cal-cell.is-leave .day-num {
    color: #8c8c8c; /* 휴무인 날은 날짜 숫자를 조금 흐리게 처리 */
}

/* 셀 호버 */
.cal-cell:hover {
    background: rgba(0,200,255,0.09);
    border-color: rgba(0,200,255,0.22);
}

/* 다른 달 날짜 — 흐리게 + 클릭 불가 */
.cal-cell.ghost {
    opacity: 0.28;
    pointer-events: none;                            /* 클릭 이벤트 차단 */
}

/* 오늘 날짜 — 청록 배경 강조 */
.cal-cell.today {
    background: rgba(0,200,255,0.11);
    border-color: rgba(0,200,255,0.44);
}

/* 선택된 날짜 — 더 강한 청록 */
.cal-cell.selected {
    background: rgba(0,200,255,0.18);
    border-color: rgba(0,200,255,0.62);
}

/* 공휴일 날짜 숫자 빨간색 */
.cal-cell.holiday .day-num { color: #ff6b6b; }

/* 기념일 날짜 숫자 보라색 */
.cal-cell.isholiday .day-num { color: #3182ce; }

/* 토요일 날짜 숫자 파란색 */
.cal-cell.sat .day-num { color: #5b9ff5; }

/* 셀 상단 행 — 날짜번호 + 음력 날짜 */
.cell-top-row {
    display: flex;
    align-items: baseline;                           /* 폰트 크기 달라도 기준선 정렬 */
    justify-content: space-between;                  /* 날짜↔음력 양끝 배치 */
    width: 100%;
    flex-shrink: 0;                                  /* 상단은 줄어들지 않음 */
}

/* 양력 날짜 숫자 */
.day-num {
    font-size: 15px;
    font-weight: 700;
    color: #e8f0ff;
    line-height: 1;
}

/* 오늘 날짜 숫자 — 청록 */
.cal-cell.today .day-num { color: #00c8ff; }

/* 음력 날짜 */
.lunar-date {
    font-size: 10px;
    color: #7a8aaa;
    line-height: 1;
    white-space: nowrap;
}

/* 셀 하단 — 정보 표시 영역 (하단 자동 정렬) */
.cell-bot {
    margin-top: -3px;                                /* 일자박스에서 일자와 수평맞추기 위해 */
    margin-left: 20px;                               /* 일자박스에서 일자옆에 배치 */
    position: absolute;
/*
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
*/
}


/* ════════════════════════════════════════════════════════════════════════════
   [18] 공휴일명 표시
════════════════════════════════════════════════════════════════════════════ */
.cal-cell .holiday-name {
    font-size: 9px;                                  /* 셀 공간 고려한 최소 크기 */
    color: #ff6b6b;                                  /* 공휴일 빨간색 */
    margin-top: 10px;                                /* 날짜와 휴일명 표시 간격  */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;                         /* 긴 이름은 '...' 처리 */
    flex-shrink: 0;
    position: static;
    align-self: auto;
    text-align: left;
    max-width: 100%;                                 /* 셀 너비 초과 방지 */
}

/* ════════════════════════════════════════════════════════════════════════════
   [18-1] 기념일 표시
════════════════════════════════════════════════════════════════════════════ */
.cal-cell .isholiday-name {
    font-size: 9px;                                  /* 셀 공간 고려한 최소 크기 */
    color: #ff6b6b;                                  /* 날짜는#805ad5 (보라색) 기념일명은 빨간색(여긴 빨간색)*/
    margin-top: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;                         /* 긴 이름은 '...' 처리 */
    flex-shrink: 0;
    position: static;
    align-self: auto;
    text-align: left;
    max-width: 100%;                                 /* 셀 너비 초과 방지 */
}

/* ════════════════════════════════════════════════════════════════════════════
   [19] 근무 배지 — shift-badge
   · 전역 style.css 의 .shift-badge 스타일과 충돌 방지를 위해
     .lunar-wrap 하위로 범위 한정하여 재정의
════════════════════════════════════════════════════════════════════════════ */

/* 근무 배지 공통 — position:static 으로 절대위치 재정의 */
.lunar-wrap .shift-badge {
    position: static !important;                     /* 전역 absolute/fixed 재정의 */
    top: auto !important;
    left: auto !important;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 4px;
    line-height: 1.4;
    display: inline-block;
    pointer-events: none;                            /* 배지 클릭 이벤트 부모로 전달 */
    white-space: nowrap;
    letter-spacing: normal;
    font-family: inherit;
    opacity: 1 !important;                           /* 전역 opacity 재정의 */
}

/* 주간 근무 배지 — 파란 계열 */
.lunar-wrap .shift-badge.shift-day {
    background: rgba(52,152,219,0.22);
    color: #5b9ff5;
    border: 1px solid rgba(52,152,219,0.32);
}

/* 야간 근무 배지 — 보라 계열 */
.lunar-wrap .shift-badge.shift-night {
    background: rgba(155,127,212,0.22);
    color: #9b7fd4;
    border: 1px solid rgba(155,127,212,0.32);
}

/* 휴가 배지 — 초록 계열 */
.lunar-wrap .shift-badge.shift-vacation {
    background: rgba(0,255,157,0.13);
    color: #00ff9d;
    border: 1px solid rgba(0,255,157,0.28);
}

/* 다른 달 셀(ghost)의 배지는 흐리게 */
.lunar-wrap .cal-cell.ghost .shift-badge {
    opacity: 0.3 !important;
}


/* ════════════════════════════════════════════════════════════════════════════
   [20] 카테고리 관리 UI — cate-*
   · pr-table 기반에 카테고리 특화 스타일 추가
   · select + 삭제버튼 조합 / 신규 입력 행 포함
════════════════════════════════════════════════════════════════════════════ */

/* 카테고리 테이블 — 열 너비 자동 계산 */
.cate-table { table-layout: fixed; }

/* 카테고리 th — 중앙 정렬, 청록 텍스트 */
#sub .cate-table > tbody > tr > th.cate-th,
.cate-table > tbody > tr > th.cate-th {
    width: auto;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--pr-cyan) !important;                /* 청록 강조 */
    background: rgba(0,200,255,0.08) !important;
    border-bottom: 1px solid var(--pr-border);
    border-right: 1px solid var(--pr-border);
    padding: 10px 12px;
    vertical-align: middle;
    white-space: nowrap;
}

/* 마지막 th 우측 테두리 제거 */
#sub .cate-table > tbody > tr > th.cate-th:last-child,
.cate-table > tbody > tr > th.cate-th:last-child { border-right: none; }

/* 카테고리 td — 상단 정렬 (select+버튼 높이 차이 대응) */
#sub .cate-table > tbody > tr > td.cate-td,
.cate-table > tbody > tr > td.cate-td {
    padding: 10px 12px;
    border-right: 1px solid var(--pr-border);
    border-bottom: 1px solid var(--pr-border);
    vertical-align: top;                             /* 상단 정렬 */
    background: var(--pr-bg-card) !important;
}

/* 마지막 td 우측 테두리 제거 */
#sub .cate-table > tbody > tr > td.cate-td:last-child,
.cate-table > tbody > tr > td.cate-td:last-child { border-right: none; }

/* select + 삭제버튼 가로 배치 */
.cate-select-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

/* 카테고리 select */
#sub .cate-table .cate-select, .cate-table .cate-select {
    flex: 1;
    min-width: 0;                                    /* flex 자식 overflow 허용 */
    background: var(--pr-bg-card) !important;
    border: 1px solid rgba(0,200,255,0.22) !important;
    border-radius: 6px;
    color: var(--pr-text-primary) !important;
    font-size: 13px;
    height: 36px;
    padding: 0 10px;
    outline: none;
    transition: border-color 0.2s, opacity 0.2s;
    cursor: pointer;
    appearance: none;                                /* 기본 OS 스타일 제거 */
    -webkit-appearance: none;
}

/* select 포커스 */
#sub .cate-table .cate-select:focus, .cate-table .cate-select:focus {
    border-color: var(--pr-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0,200,255,0.12);
}

/* select 비활성 */
#sub .cate-table .cate-select:disabled, .cate-table .cate-select:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}

/* select 드롭다운 option */
#sub .cate-table .cate-select option, .cate-table .cate-select option {
    background: var(--pr-bg-card);
    color: var(--pr-text-primary);
}

/* 항목 삭제 버튼 — 빨간 아이콘 버튼 */
#sub .cate-table .cate-del-btn, .cate-table .cate-del-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(229,57,53,0.12) !important;
    border: 1px solid rgba(229,57,53,0.3) !important;
    border-radius: 6px;
    color: var(--pr-red) !important;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
}

/* 삭제 버튼 호버 */
#sub .cate-table .cate-del-btn:hover, .cate-table .cate-del-btn:hover {
    background: rgba(229,57,53,0.28) !important;
    border-color: var(--pr-red) !important;
    box-shadow: 0 0 10px rgba(229,57,53,0.2);
}

/* 삭제 버튼 비활성 */
#sub .cate-table .cate-del-btn:disabled, .cate-table .cate-del-btn:disabled {
    opacity: 0.28;
    cursor: not-allowed;
    box-shadow: none;
}

/* 신규 입력 행 — 상단 2px 강조선으로 기존 행과 구분 */
#sub .cate-table > tbody > tr > td.cate-input-row,
.cate-table > tbody > tr > td.cate-input-row {
    padding: 10px 12px;
    background: rgba(0,200,255,0.025) !important;    /* 아주 약한 청록 배경 */
    border-top: 2px solid var(--pr-border-bright);   /* 입력행 상단 강조선 */
}

/* 신규 카테고리 텍스트 입력 */
#sub .cate-table .cate-input, .cate-table .cate-input {
    background: var(--pr-bg-card) !important;
    border: 1px solid rgba(0,200,255,0.22) !important;
    border-radius: 6px;
    color: var(--pr-text-primary) !important;
    font-size: 13px;
    height: 34px;
    padding: 0 10px;
    width: 100%;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, opacity 0.2s;
    margin-bottom: 6px;                              /* 아래 버튼과의 간격 */
}

/* 입력 포커스 */
#sub .cate-table .cate-input:focus, .cate-table .cate-input:focus {
    border-color: var(--pr-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0,200,255,0.12);
}

/* 입력 비활성 */
#sub .cate-table .cate-input:disabled, .cate-table .cate-input:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

/* 입력 placeholder */
#sub .cate-table .cate-input::placeholder,
.cate-table .cate-input::placeholder { color: var(--pr-text-dim); }

/* 버튼 그룹 — flex 가로 배치 */
.cate-btn-group {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;                                 /* 좁은 공간에서 줄바꿈 */
}

/* 액션 버튼 (추가/저장) — 청록 그라데이션 */
#sub .cate-table .cate-act-btn, .cate-table .cate-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    background: linear-gradient(135deg, var(--pr-cyan), #0055dd) !important;
    border: none !important;
    border-radius: 6px;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s, transform 0.15s, opacity 0.2s;
    white-space: nowrap;
}

/* 액션 버튼 호버 (비활성이 아닐 때만) */
#sub .cate-table .cate-act-btn:hover:not(:disabled),
.cate-table .cate-act-btn:hover:not(:disabled) { filter: brightness(1.15); }

/* 액션 버튼 클릭 */
#sub .cate-table .cate-act-btn:active:not(:disabled),
.cate-table .cate-act-btn:active:not(:disabled) { transform: scale(0.97); }

/* 액션 버튼 비활성 */
#sub .cate-table .cate-act-btn:disabled,
.cate-table .cate-act-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: none;
}

/* 수정 버튼 변형 — 파란 그라데이션 */
#sub .cate-table .cate-mod-btn,
.cate-table .cate-mod-btn {
    background: linear-gradient(135deg, #6a8aff, #0044aa) !important;
}

/* 미리보기 영역 */
.cate-preview {
    margin-top: 6px;
    border-radius: 0 0 8px 8px;                     /* 하단만 둥글게 */
    overflow: hidden;
}


/* ════════════════════════════════════════════════════════════════════════════
   [21] 달력 셀 하단 정보 램프 — ci-* (Cell Info)
   · 각 날짜 셀에 수입/지출/메모를 작은 발광 도트 + 텍스트로 표시
════════════════════════════════════════════════════════════════════════════ */

/* 셀 상단과 하단 사이 빈 공간 */
.cell-spacer { flex: 1; }                            /* 남은 공간 채워 정보를 하단 고정 */

/* 셀 하단 래퍼 */
.cell-bottom {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

/* 정보 아이템 묶음 */
.cell-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
}

/* 개별 정보 아이템 행 */
.ci-item {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 3px;
    border-radius: 3px;
    width: 100%;
    box-sizing: border-box;
    min-height: 16px;
}

/* 발광 도트 — 각 항목 타입 색상 */
.ci-lamp {
    width: 7px;
    height: 7px;
    border-radius: 50%;                              /* 완전한 원 */
    flex-shrink: 0;
    display: inline-block;
}

/* 타입 레이블 텍스트 */
.ci-label {
    font-size: 9px;
    font-weight: 600;
    flex-shrink: 0;
    line-height: 1;
    opacity: 0.8;                                    /* 약간 투명하게 */
}

/* 금액/내용 값 텍스트 — 우측 끝 정렬, 넘치면 '...' */
.ci-value {
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    flex: 1;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── 메모 항목 — 파란 계열 ─── */
.ci-item.ci-memo { background: rgba(91,159,245,0.12); }
.ci-item.ci-memo .ci-lamp  { background: #5b9ff5; box-shadow: 0 0 4px rgba(91,159,245,0.9); }  /* 파랑 발광 */
.ci-item.ci-memo .ci-label { color: #7ab4ff; }
.ci-item.ci-memo .ci-value { color: #a8cdff; }

/* ─── 지출 항목 — 빨간 계열 ─── */
.ci-item.ci-out  { background: rgba(255,76,76,0.12); }
.ci-item.ci-out  .ci-lamp  { background: #ff4c4c; box-shadow: 0 0 4px rgba(255,76,76,0.9); }   /* 빨강 발광 */
.ci-item.ci-out  .ci-label { color: #ff8080; }
.ci-item.ci-out  .ci-value { color: #ffaaaa; }

/* ─── 수입 항목 — 초록 계열 ─── */
.ci-item.ci-in   { background: rgba(0,232,150,0.12); }
.ci-item.ci-in   .ci-lamp  { background: #00e896; box-shadow: 0 0 4px rgba(0,232,150,0.9); }   /* 초록 발광 */
.ci-item.ci-in   .ci-label { color: #00d484; }
.ci-item.ci-in   .ci-value { color: #66ffcc; }


/* ════════════════════════════════════════════════════════════════════════════
   [22] 팝업 컨테이너 — #day-view / .dp-popup
   · 클릭된 날짜 상세 팝업 (모달)
   · #day-view-bg: 반투명 오버레이 (블러 효과 포함)
════════════════════════════════════════════════════════════════════════════ */

/* 팝업 모달 — 화면 정중앙 고정 */
#day-view {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);                /* 정확한 중앙 배치 */
    z-index: 301;                                    /* 배경(300)보다 위 */
    display: none;                                   /* JS에서 show/hide */
    pointer-events: none;                            /* 숨김 상태에서 클릭 차단 */
    border-radius: 8px;
    overflow: hidden;
    padding: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);         /* 깊이감 있는 그림자 */
}

/* 팝업 내부 기존 .tit 숨김 (레이아웃 충돌 방지) */
#day-view .tit { display: none !important; }

/* 팝업 .cont 전체 높이 사용, padding/margin 초기화 */
#day-view .cont {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

/* 배경 오버레이 — 블러 + 반투명 */
#day-view-bg {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);                      /* 배경 흐림 효과 */
    display: none;                                   /* JS에서 show/hide */
    pointer-events: none;                            /* 숨김 상태에서 클릭 차단 */
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 300;                                    /* 팝업(301)보다 아래 */
}

/* 팝업 내부 패널 — flex column 스크롤 구조 핵심 */
.dp-popup {
    height: 100%;
    background: var(--pr-bg-card);
    border: 1px solid var(--pr-border-bright);
    border-radius: 8px;
    display: flex;
    width: 100vh;
    max-height: 620px;
    flex-direction: column;                          /* 헤더/본문/푸터 수직 배치 */
    overflow: hidden;
    box-sizing: border-box;
}

/* 팝업 헤더 — 날짜 + 닫기버튼 */
.dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: rgba(0,200,255,0.07);
    border-bottom: 1px solid var(--pr-border);
    flex-shrink: 0;                                  /* 헤더 크기 고정 */
}

/* 날짜 텍스트 */
.dp-head-date {
    font-size: 15px;
    font-weight: 700;
    color: var(--pr-cyan);
    letter-spacing: -0.3px;
}

/* 공휴일명 뱃지 */
.dp-head-holiday {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    background: rgba(255,107,107,0.15);
    border: 1px solid rgba(255,107,107,0.3);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #ff6b6b;
    vertical-align: middle;
}

/* 닫기 버튼 — 원형 X */
.dp-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,0.06);
    border-radius: 50%;
    color: var(--pr-text-sub);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    font-size: 13px;
    padding: 0;
    text-decoration: none;
}

/* 닫기 버튼 호버 — 빨간 X */
.dp-close:hover {
    background: rgba(229,57,53,0.2);
    color: var(--pr-red);
}

/* 닫기 버튼 내 아이콘 색 상속 */
#sub .dp-close i, .dp-close i { color: inherit !important; }


/* ════════════════════════════════════════════════════════════════════════════
   [23] 팝업 본문 스크롤 — .dp-body
   ※ flex:1 + min-height:0 이 없으면 overflow-y:auto 가 동작하지 않음
      (flex 자식에서 overflow 허용은 반드시 min-height:0 필요)
════════════════════════════════════════════════════════════════════════════ */

/* 본문 스크롤 영역 */
.dp-body {
    flex: 1;                                         /* dp-popup 의 남은 공간 모두 */
    min-height: 0;                                   /* flex 자식 overflow 허용 필수! */
    overflow-y: auto;                                /* 본문 스크롤 */
    padding: 0 0 4px;
    scrollbar-width: thin;                           /* Firefox 얇은 스크롤바 */
    scrollbar-color: rgba(0,200,255,0.2) transparent;/* Firefox 스크롤바 색상 */
}

/* Webkit 스크롤바 커스텀 */
.dp-body::-webkit-scrollbar       { width: 4px; }
.dp-body::-webkit-scrollbar-track { background: transparent; }
.dp-body::-webkit-scrollbar-thumb { background: rgba(0,200,255,0.2); border-radius: 2px; }

/* 섹션 구분 (일정/수입/지출 등) */
.dp-section {
    padding: 14px 16px;
    border-bottom: 1px solid var(--pr-border);
}

/* 마지막 섹션 하단선 제거 */
.dp-section:last-child { border-bottom: none; }

/* 섹션 소제목 */
.dp-section-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--pr-text-sub);
    letter-spacing: 0.5px;
    text-transform: uppercase;                       /* 영문 대문자 */
    margin-bottom: 10px;
}

/* 섹션 소제목 아이콘 */
.dp-section-title i { color: var(--pr-cyan); font-size: 12px; }

/* 인라인 뱃지 */
.dp-badge {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
}

/* 파란 뱃지 */
.dp-badge-blue {
    background: rgba(91,159,245,0.18);
    color: #7ab4ff;
}

/* 데이터 없음 */
.dp-nodata {
    font-size: 12px;
    color: var(--pr-text-dim);
    font-style: italic;
    text-align: center;
    padding: 10px 0;
}

/* 일정 목록 */
.dp-sch-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

/* 일정 아이템 */
.dp-sch-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(0,200,255,0.04);
    border: 1px solid var(--pr-border);
    border-radius: 6px;
}

/* 일정 색상 도트 */
.dp-sch-color {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 4px;                                 /* 텍스트 첫줄과 수직 정렬 */
}

/* 일정 내용 영역 */
.dp-sch-info { flex: 1; min-width: 0; }             /* flex 자식 overflow 허용 */

/* 일정 제목 */
#sub .dp-sch-title, .dp-sch-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--pr-text-primary) !important;
    margin-bottom: 3px;
}

/* 반복 일정 뱃지 */
.dp-sch-multi {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(106,138,255,0.18);
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    color: #7ab4ff;
    margin-left: 6px;
    vertical-align: middle;
}

/* 일정 설명 */
#sub .dp-sch-content, .dp-sch-content {
    font-size: 11px;
    color: var(--pr-text-sub) !important;
    line-height: 1.6;
    margin: 0;
    word-break: break-all;                           /* 긴 단어 강제 줄바꿈 */
}

/* 수입/지출 합계 바 */
.dp-inout-sum {
    display: flex;
    align-items: stretch;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 12px;
}

/* 합계 아이템 (수입 / 지출) */
.dp-sum-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px 8px;
    gap: 3px;
}

/* 수입/지출 구분선 */
.dp-sum-divider { width: 1px; background: var(--pr-border); flex-shrink: 0; }

/* 합계 레이블 */
.dp-sum-label { font-size: 10px; font-weight: 600; letter-spacing: 0.5px; opacity: 0.7; }

/* 합계 금액 */
.dp-sum-value { font-size: 14px; font-weight: 700; line-height: 1; }

/* 수입 합계 — 초록 */
.dp-sum-in .dp-sum-label { color: #00d484; }
.dp-sum-in .dp-sum-value { color: #00e896; }

/* 지출 합계 — 빨강 */
.dp-sum-out .dp-sum-label { color: #ff8080; }
.dp-sum-out .dp-sum-value { color: #ff4c4c; }

/* 상세 내역 목록 래퍼 */
.dp-list-wrap { margin-top: 8px; }

/* 소제목 (통장내역 / 카드내역 등) */
.dp-list-subtitle {
    font-size: 10px;
    font-weight: 600;
    color: var(--pr-text-dim);
    letter-spacing: 0.5px;
    margin-bottom: 5px;
    padding-left: 2px;
}

.dp-list-subtitle i { margin-right: 4px; }

/* 통장/카드 목록 */
.dp-bank-list, .dp-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }

/* 통장/카드 아이템 */
.dp-bank-item, .dp-card-item {
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--pr-border);
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

/* 통장 메타 정보 행 (시간 + 내용) */
.dp-bank-meta { display: flex; align-items: center; gap: 8px; }

/* 거래 시간 */
.dp-bank-time { font-size: 10px; color: var(--pr-text-dim); flex-shrink: 0; }

/* 거래 내용 텍스트 */
#sub .dp-bank-content, .dp-bank-content {
    font-size: 12px;
    font-weight: 600;
    color: var(--pr-text-sub) !important;
}

/* 금액 행 */
.dp-bank-amount, .dp-card-amount { display: flex; align-items: center; gap: 8px; }

/* 지출 금액 — 빨강 */
.dp-amount-out { font-size: 13px; font-weight: 700; color: #ff6b6b; }

/* 수입 금액 — 초록 */
.dp-amount-in  { font-size: 13px; font-weight: 700; color: #00e896; }

/* 잔액 표시 */
#sub .dp-bank-balance, .dp-bank-balance {
    font-size: 10px;
    color: var(--pr-text-dim) !important;
}

/* 메모 표시 — 좌측 청록 바 */
.dp-bank-memo {
    font-size: 11px;
    color: var(--pr-text-sub);
    padding: 3px 6px;
    background: rgba(0,200,255,0.04);
    border-radius: 4px;
    border-left: 2px solid rgba(0,200,255,0.3);      /* 메모 구분 좌측 바 */
}

.dp-bank-memo i { margin-right: 4px; color: var(--pr-text-dim); }

/* 카드 메타 정보 행 */
.dp-card-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* 카드명 뱃지 */
.dp-card-name {
    display: inline-block;
    padding: 1px 8px;
    background: rgba(106,138,255,0.15);
    border: 1px solid rgba(106,138,255,0.3);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #7ab4ff;
}

/* 카드 대분류 */
.dp-card-cate {
    display: inline-block;
    padding: 1px 7px;
    background: rgba(0,200,255,0.08);
    border: 1px solid rgba(0,200,255,0.2);
    border-radius: 4px;
    font-size: 10px;
    color: var(--pr-text-sub);
}

/* 카드 소분류 — 약간 더 흐리게 */
.dp-card-cate2 { opacity: 0.7; }


/* ════════════════════════════════════════════════════════════════════════════
   [24] 팝업 폼 영역 스크롤 구조
   ※ JS dpShowForm() 에서 display:flex 로 전환 후 flex chain 동작
   ※ display 는 CSS에서 선언하지 않음 → JS 제어와 충돌 방지
════════════════════════════════════════════════════════════════════════════ */

/* 폼 래퍼 — flex:1 + min-height:0 필수 (내부 스크롤 허용) */
#dp-form-wrap {
    flex: 1;
    min-height: 0;                                   /* 자식 overflow 허용 필수! */
    flex-direction: column;                          /* column 방향 (display는 JS 처리) */
    overflow: hidden;
    width: 100vh;
    max-height: 620px;
}
/* ⚠ display 속성은 JS에서 none ↔ flex 전환 — 여기서 선언하면 충돌! */

/* 폼 내부 상단 헤더 — 뒤로가기 + 선택 날짜 */
.dp-form-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 14px;
    background: rgba(0,200,255,0.04);
    border-bottom: 1px solid var(--pr-border);
    flex-shrink: 0;                                  /* 헤더 크기 고정 */
}

/* 뒤로가기 버튼 */
.dp-form-back {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: rgba(0,200,255,0.08);
    border: 1px solid var(--pr-border);
    border-radius: 6px;
    color: var(--pr-text-sub);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

/* 뒤로가기 호버 */
.dp-form-back:hover {
    background: rgba(0,200,255,0.16);
    color: var(--pr-cyan);
}

.dp-form-back i { font-size: 11px; }

/* 폼 날짜 표시 */
.dp-form-date {
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-cyan);
}

/* 탭 콘텐츠 래퍼 — 스크롤 구조 핵심 삼총사
   flex:1 → 남은 공간, min-height:0 → overflow 허용, overflow:hidden → 외부 클리핑 */
#dp-tab-contents {
    flex: 1;
    min-height: 0;                                   /* 필수! 없으면 스크롤 미동작 */
    overflow: hidden;                                /* 필수! 탭 간 내용 클리핑 */
    position: relative;
    height: 100%;                                    /* 부모(#dp-tab-contents) 높이 기준 */
    overflow-y: auto;                                /* 탭 내부 스크롤 */
    scrollbar-width: thin;
    scrollbar-color: rgba(0,200,255,0.2) transparent;
}

/* 탭 콘텐츠 — 스크롤 동작 핵심
   height:100% 없으면 overflow-y:auto 가 동작하지 않음 */
.dp-form-content {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Webkit 스크롤바 */
.dp-form-content::-webkit-scrollbar       { width: 4px; }
.dp-form-content::-webkit-scrollbar-track { background: transparent; }
.dp-form-content::-webkit-scrollbar-thumb { background: rgba(0,200,255,0.2); border-radius: 2px; }

/* 폼 내부 패딩 영역 */
.dp-form-inner {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;                                       /* 폼 행 간격 */
}

/* 폼 한 행 (레이블 + 입력요소) */
.dp-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* 상단 정렬 행 (textarea 등 높이가 큰 요소) */
.dp-form-row-top { align-items: flex-start; }

/* 레이블 상단 정렬 (textarea 와 수직 맞춤) */
.dp-form-label-top { padding-top: 8px; }

/* 폼 레이블 — 고정 너비, 우측 정렬 */
.dp-form-label {
    flex-shrink: 0;
    width: 52px;                                     /* 레이블 고정 너비 */
    font-size: 11px;
    font-weight: 600;
    color: var(--pr-text-sub);
    letter-spacing: 0.3px;
    text-align: right;                               /* 입력과의 자연스러운 연결 */
}

/* 폼 입력 필드 */
#sub .dp-form-input, .dp-form-input {
    flex: 1;
    background: var(--pr-bg-card) !important;
    border: 1px solid rgba(0,200,255,0.22) !important;
    border-radius: 6px;
    color: var(--pr-text-primary) !important;
    font-size: 13px;
    height: 36px;
    padding: 0 10px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    box-sizing: border-box;
}

/* 입력 포커스 */
#sub .dp-form-input:focus, .dp-form-input:focus {
    border-color: var(--pr-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0,200,255,0.12);
}

/* 입력 placeholder */
#sub .dp-form-input::placeholder, .dp-form-input::placeholder {
    color: var(--pr-text-dim);
}

/* 날짜 input — 달력 아이콘 색상 보정 */
.dp-form-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.6) sepia(1) hue-rotate(160deg); /* 기본 검정 → 청록 계열로 */
    cursor: pointer;
}

/* select 래퍼 */
.dp-sel-wrap {
    flex: 1;
    display: flex;
    min-width: 0;
}

/* 폼 select */
#sub .dp-form-select, .dp-form-select {
    flex: 1;
    background: var(--pr-bg-card) !important;
    border: 1px solid rgba(0,200,255,0.22) !important;
    border-radius: 6px;
    color: var(--pr-text-primary) !important;
    font-size: 13px;
    height: 36px;
    padding: 0 10px;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: border-color 0.2s, opacity 0.2s;
    min-width: 0;
}

/* select 포커스 */
#sub .dp-form-select:focus, .dp-form-select:focus {
    border-color: var(--pr-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0,200,255,0.12);
}

/* select 비활성 */
#sub .dp-form-select:disabled, .dp-form-select:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* select option */
#sub .dp-form-select option, .dp-form-select option {
    background: var(--pr-bg-card);
    color: var(--pr-text-primary);
}

/* 금액 입력 행 (input + 단위텍스트) */
.dp-amount-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.dp-amount-wrap .dp-form-input { flex: 1; }

/* 단위 텍스트 ('원' 등) */
.dp-amount-unit {
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--pr-text-sub);
}

/* 제출 버튼 행 — 우측 정렬 */
.dp-form-submit { justify-content: flex-end; }

/* 제출 버튼 공통 */
.dp-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    transition: filter 0.2s, transform 0.15s;
}

.dp-submit-btn:hover  { filter: brightness(1.12); }
.dp-submit-btn:active { transform: scale(0.97); }

/* ─── 제출 버튼 타입별 색상 ─── */
.dp-submit-in    { background: linear-gradient(135deg, #00c875, #007a45); }  /* 수입 — 초록 */
.dp-submit-out   { background: linear-gradient(135deg, #ff5555, #bb2222); }  /* 지출 — 빨강 */
.dp-submit-sch   { background: linear-gradient(135deg, #00a8d4, #005588); }  /* 일정 — 청록 */
.dp-submit-shift { background: linear-gradient(135deg, #9b7fd4, #5533aa); }  /* 근무 — 보라 */

/* 폼 textarea */
#sub .dp-form-textarea, .dp-form-textarea {
    flex: 1;
    background: var(--pr-bg-card) !important;
    border: 1px solid rgba(0,200,255,0.22) !important;
    border-radius: 6px;
    color: var(--pr-text-primary) !important;
    font-size: 13px;
    padding: 8px 10px;
    outline: none;
    resize: vertical;
    height: 70px;
    line-height: 1.6;
    transition: border-color 0.2s, box-shadow 0.2s;
    font-family: inherit;                            /* 시스템 모노스페이스 방지 */
    width: 100%;
    box-sizing: border-box;
}

/* textarea 포커스 */
#sub .dp-form-textarea:focus, .dp-form-textarea:focus {
    border-color: var(--pr-cyan) !important;
    box-shadow: 0 0 0 2px rgba(0,200,255,0.12);
}

/* textarea placeholder */
#sub .dp-form-textarea::placeholder, .dp-form-textarea::placeholder {
    color: var(--pr-text-dim);
}

/* 색상 선택 영역 */
.dp-color-wrap {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    flex: 1;
}

/* 색상 선택 원형 버튼 */
.dp-color-btn {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.15);        /* 흰색 15% 테두리 */
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    padding: 0;
    flex-shrink: 0;
}

/* 색상 버튼 호버 — 약간 확대 */
.dp-color-btn:hover {
    transform: scale(1.18);
    border-color: rgba(255,255,255,0.5);
}

/* 선택된 색상 버튼 — 테두리 강조 + 확대 */
.dp-color-btn.dp-color-selected {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255,255,255,0.4);
    transform: scale(1.18);
}

/* 선택 색상 미리보기 원 */
.dp-color-preview {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.3);
    flex-shrink: 0;
    margin-left: 4px;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
    transition: background 0.2s;                     /* 색상 변경 시 부드럽게 */
}


/* ════════════════════════════════════════════════════════════════════════════
   [26] 팝업 근태 관리 — dp-shift-* / dp-daytype-*
   · 날짜 유형(주중/토/공휴일) 표시 + 근무 유형 선택 버튼
════════════════════════════════════════════════════════════════════════════ */

/* 날짜 유형 표시 래퍼 */
.dp-shift-daytype-wrap { margin-bottom: 14px; }

/* 날짜 유형 뱃지 — 전체 너비 중앙 배치 */
.dp-daytype-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 700;
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
}

.dp-daytype-badge i { font-size: 12px; }

/* 평일 뱃지 — 파란 계열 */
.dp-daytype-week { background: rgba(91,159,245,0.12);  color: #7ab4ff; border: 1px solid rgba(91,159,245,0.25); }

/* 토요일 뱃지 — 주황 계열 */
.dp-daytype-sat  { background: rgba(255,179,71,0.12);  color: #ffb347; border: 1px solid rgba(255,179,71,0.25); }

/* 공휴일 뱃지 — 초록 계열 */
.dp-daytype-hol  { background: rgba(0,232,150,0.10);   color: #00e896; border: 1px solid rgba(0,232,150,0.22); }

/* 기존 근무 안내 알림 */
.dp-shift-exists {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(255,179,71,0.08);
    border: 1px solid rgba(255,179,71,0.22);
    border-radius: 6px;
    font-size: 11px;
    color: #ffb347;
    margin-bottom: 12px;
}

.dp-shift-exists i { margin-right: 2px; }

/* 기존 근무 유형 태그 */
.dp-shift-exist-tag {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(255,179,71,0.15);
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #ffd080;
}

/* 소제목 — 'WORK TYPE' 등 */
.dp-shift-section-title {
    font-size: 10px;
    font-weight: 700;
    color: var(--pr-text-dim);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* 근무 유형 선택 버튼 그룹 */
.dp-shift-btn-group {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

/* 근무 유형 버튼 공통 — 세로 나열 아이콘+텍스트 */
.dp-shift-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pr-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    color: var(--pr-text-sub);
}

.dp-shift-btn i { font-size: 18px; margin-bottom: 2px; }

/* 근무 버튼 호버 */
.dp-shift-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.2);
}

/* 근무 버튼 레이블 (메인) */
#sub .dp-shift-btn-label, .dp-shift-btn-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--pr-text-primary) !important;
    line-height: 1;
}

/* 근무 버튼 보조 설명 */
#sub .dp-shift-btn-sub, .dp-shift-btn-sub {
    font-size: 10px;
    color: var(--pr-text-dim) !important;
    line-height: 1;
}

/* 선택된 근무 버튼 공통 — 테두리 2px, 그림자 */
.dp-shift-btn.dp-shift-btn-active {
    border-width: 2px;
    box-shadow: 0 0 14px rgba(0,0,0,0.3);
}

/* ─── 근무 유형별 활성 색상 ─── */

/* 지연(대기) 근무 — 보라 */
.dp-shift-btn-deferred.dp-shift-btn-active { background: rgba(155,127,212,0.18); border-color: #9b7fd4; color: #9b7fd4; }
.dp-shift-btn-deferred i { color: #9b7fd4; }

/* 월 고정 근무 — 파랑 */
.dp-shift-btn-monthly.dp-shift-btn-active  { background: rgba(91,159,245,0.18);  border-color: #5b9ff5; color: #5b9ff5; }
.dp-shift-btn-monthly i { color: #5b9ff5; }

/* 휴무 — 회색 */
.dp-shift-btn-off.dp-shift-btn-active      { background: rgba(160,180,208,0.18); border-color: #a0b4d0; color: #a0b4d0; }
.dp-shift-btn-off i { color: #a0b4d0; }

/* 누적 휴가 — 초록 */
.dp-shift-btn-accrue.dp-shift-btn-active   { background: rgba(0,232,150,0.15);   border-color: #00e896; color: #00e896; }
.dp-shift-btn-accrue i { color: #00e896; }

/* 연차 — 파랑 */
.dp-shift-btn-full.dp-shift-btn-active     { background: rgba(91,159,245,0.18);  border-color: #5b9ff5; color: #5b9ff5; }
.dp-shift-btn-full i { color: #5b9ff5; }

/* 반차 — 주황 */
.dp-shift-btn-half.dp-shift-btn-active     { background: rgba(255,179,71,0.18);  border-color: #ffb347; color: #ffb347; }
.dp-shift-btn-half i { color: #ffb347; }

/* 시간 선택 버튼 그룹 */
.dp-shift-hour-btns {
    display: flex;
    flex-wrap: wrap;                                 /* 줄바꿈 허용 */
    gap: 6px;
    margin-bottom: 10px;
}

/* 시간 버튼 개별 */
.dp-shift-hour-btn {
    padding: 7px 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--pr-border);
    border-radius: 6px;
    color: var(--pr-text-sub);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

/* 시간 버튼 호버 — 초록 */
.dp-shift-hour-btn:hover {
    background: rgba(0,232,150,0.1);
    border-color: rgba(0,232,150,0.3);
    color: #00e896;
}

/* 선택된 시간 버튼 */
.dp-shift-hour-btn.dp-shift-hour-active {
    background: rgba(0,232,150,0.18);
    border-color: #00e896;
    border-width: 2px;
    color: #00e896;
}

/* 초과근무 안내 메모 */
#sub .dp-shift-ot-note, .dp-shift-ot-note {
    font-size: 11px;
    color: var(--pr-text-dim) !important;
    margin: 6px 0 12px;
    line-height: 1.5;
}

.dp-shift-ot-note i { margin-right: 4px; color: #00e896; }

/* 반차/초과근무 서브 래퍼 */
.dp-shift-half-wrap { margin-bottom: 4px; }
.dp-shift-ot-wrap   { margin-bottom: 4px; }


/* ════════════════════════════════════════════════════════════════════════════
   [27] 팝업 하단 기능 버튼 — .dp-footer
   · flex-shrink:0 으로 항상 화면 하단에 고정 표시
   · 등록 진입 버튼 4종 (일정/근무/수입/지출)
════════════════════════════════════════════════════════════════════════════ */

/* 하단 버튼 바 */
.dp-footer {
    display: flex;
    align-items: stretch;                            /* 버튼 높이 통일 */
    border-top: 2px solid var(--pr-border);
    flex-shrink: 0;                                  /* 푸터 항상 고정 */
    background: rgba(0,0,0,0.15);                   /* 약간 어두운 배경 */
}

/* 개별 버튼 */
.dp-foot-btn {
    flex: 1;                                         /* 균등 너비 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 11px 4px;
    border: none;
    border-top: 3px solid transparent;            /* 활성 시 색상 탭으로 변환 */
    margin-top: -2px;                             /* 탭 하단선과 자연스럽게 연결 */
    background: transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
    border-right: 1px solid var(--pr-border);        /* 버튼 간 세로 구분선 */
    color: var(--pr-text-sub);
}

/* 마지막 버튼 우측 구분선 제거 */
.dp-foot-btn:last-child { border-right: none; }

/* 버튼 아이콘 */
.dp-foot-btn i { font-size: 15px; }

/* 버튼 호버 — 청록 배경 */
.dp-foot-btn:hover {
    background: rgba(0,200,255,0.07);
    color: var(--pr-text-primary);
}

/* 버튼 클릭 */
/* 수입 탭 활성 — 초록 */
#dp-btn-income.dp-tab-active   { color: #00e896; border-top-color: #00e896; background: rgba(0,232,150,0.06); }
#dp-btn-income.dp-tab-active i { color: #00e896; }

/* 지출 탭 활성 — 빨강 */
#dp-btn-outcome.dp-tab-active   { color: #ff6b6b; border-top-color: #ff6b6b; background: rgba(255,107,107,0.06); }
#dp-btn-outcome.dp-tab-active i { color: #ff6b6b; }

/* 일정 탭 활성 — 청록 */
#dp-btn-schedule.dp-tab-active   { color: var(--pr-cyan); border-top-color: var(--pr-cyan); background: rgba(0,200,255,0.06); }
#dp-btn-schedule.dp-tab-active i { color: var(--pr-cyan); }

/* 근무 탭 활성 — 보라 */
#dp-btn-shift.dp-tab-active   { color: #9b7fd4; border-top-color: #9b7fd4; background: rgba(155,127,212,0.06); }
#dp-btn-shift.dp-tab-active i { color: #9b7fd4; }

/* span 텍스트 색상 상속 */
#sub .dp-foot-btn span, .dp-foot-btn span { color: inherit !important; }

/* ─── 버튼 타입별 아이콘 색상 ─── */
#dp-btn-schedule i { color: #5b9ff5; }               /* 일정 — 파랑 */
#dp-btn-shift    i { color: #9b7fd4; }               /* 근무 — 보라 */
#dp-btn-income   i { color: #00e896; }               /* 수입 — 초록 */
#dp-btn-outcome  i { color: #ff6b6b; }               /* 지출 — 빨강 */

/* ─── 버튼 타입별 호버 배경 ─── */
#dp-btn-schedule:hover { background: rgba(91,159,245,0.1); }   /* 일정 — 파란 반투명 */
#dp-btn-shift:hover    { background: rgba(155,127,212,0.1); }  /* 근무 — 보라 반투명 */
#dp-btn-income:hover   { background: rgba(0,232,150,0.1); }    /* 수입 — 초록 반투명 */
#dp-btn-outcome:hover  { background: rgba(255,107,107,0.1); }  /* 지출 — 빨강 반투명 */

/* ════════════════════════════════════════════════════════════════════════════
   [25] 입/출 한줄 테이블 — .dp-inout-table
   · 팝업 내 통장/수입/지출 통합 리스트 표시
   · dp-row-bank / dp-row-income / dp-row-outcome 행 타입별 좌측 테두리 색상
════════════════════════════════════════════════════════════════════════════ */
.dp-inout-table-wrap { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:6px 0 0; }
.dp-inout-table { width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; }
.dp-col-type { width:24px; } .dp-col-label { width:auto; } .dp-col-card { width:60px; }
.dp-col-out  { width:72px; } .dp-col-in   { width:72px; } .dp-col-bal  { width:72px; }
.dp-inout-thead tr { background:rgba(255,255,255,0.05); border-bottom:1px solid rgba(255,255,255,0.1); }
.dp-inout-thead th { padding:5px 3px; text-align:center; color:var(--pr-text-sub,#aaa); font-weight:500; white-space:nowrap; }
.dp-th-label { text-align:left; }
.dp-inout-row { border-bottom:1px solid rgba(255,255,255,0.06); transition:background 0.15s; }
.dp-inout-row:last-child { border-bottom:none; }
.dp-inout-row:hover { background:rgba(255,255,255,0.04); }
.dp-row-bank    { border-left:3px solid var(--pr-cyan,   #00c8ff); }
.dp-row-income  { border-left:3px solid var(--pr-green,  #00e896); }
.dp-row-outcome { border-left:3px solid var(--pr-orange, #ffb347); }
.dp-inout-table td { padding:6px 3px; vertical-align:middle; }
.dp-td-type { text-align:center; font-size:11px; color:var(--pr-text-sub,#aaa); }
.dp-row-bank    .dp-td-type { color:var(--pr-cyan,   #00c8ff); }
.dp-row-income  .dp-td-type { color:var(--pr-green,  #00e896); }
.dp-row-outcome .dp-td-type { color:var(--pr-orange, #ffb347); }
.dp-td-label  { text-align:left; overflow:hidden; }
.dp-row-label { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--pr-text-main,#eee); font-size:12px; }
.dp-row-sub   { display:block; font-size:10px; color:var(--pr-text-sub,#999); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-row-memo  { display:block; font-size:10px; color:var(--pr-cyan,#00c8ff); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:2px; }
.dp-row-memo i { font-size:9px; margin-right:2px; }
.dp-td-card { text-align:center; font-size:11px; color:var(--pr-text-sub,#aaa); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dp-td-out, .dp-td-in, .dp-td-bal { text-align:right; white-space:nowrap; }
.dp-amount-out  { color:var(--pr-orange,#ffb347); font-size:12px; }
.dp-amount-in   { color:var(--pr-green, #00e896); font-size:12px; }
.dp-balance     { color:var(--pr-text-sub,#aaa);  font-size:11px; }
.dp-amount-none { color:rgba(255,255,255,0.2);     font-size:11px; }
.dp-inout-subtotal { margin-top:8px; padding:6px 8px; background:rgba(255,255,255,0.03); border-radius:6px; border:1px solid rgba(255,255,255,0.07); }
.dp-subtotal-row { display:flex; align-items:center; gap:8px; padding:3px 0; font-size:11px; border-bottom:1px dashed rgba(255,255,255,0.06); }
.dp-subtotal-row:last-child { border-bottom:none; }
.dp-subtotal-label { flex:1; color:var(--pr-text-sub,#aaa); }
.dp-subtotal-in  { color:var(--pr-green, #00e896); font-weight:600; }
.dp-subtotal-out { color:var(--pr-orange,#ffb347); font-weight:600; }

/* ── 근태 중복 차단 안내 박스 ── */
.dp-shift-blocked {
    display:flex;
    align-items:center;
    gap:8px;
    padding:14px 16px;
    background:rgba(229,57,53,0.10);
    border:1px solid rgba(229,57,53,0.30);
    border-radius:8px;
    font-size:13px;
    color:#ff8080;
    line-height:1.7;
    margin-top:4px;
}
.dp-shift-blocked i { font-size:16px; flex-shrink:0; color:#ff6b6b; }

/* ── 평일 휴무 유형 버튼 색상 ── */
.dp-shift-btn-tps.dp-shift-btn-active { background:rgba(91,159,245,0.18); border-color:#5b9ff5; color:#5b9ff5; }
.dp-shift-btn-tps i { color:#5b9ff5; }
.dp-shift-btn-sps.dp-shift-btn-active { background:rgba(155,127,212,0.18); border-color:#9b7fd4; color:#9b7fd4; }
.dp-shift-btn-sps i { color:#9b7fd4; }
.dp-shift-btn-etc.dp-shift-btn-active { background:rgba(160,180,208,0.18); border-color:#a0b4d0; color:#a0b4d0; }
.dp-shift-btn-etc i { color:#a0b4d0; }





/* ════════════════════════════════════════════════════════════════════════════
   [28] 항목 수정/삭제 버튼 — dp-item-actions / dp-act-*
   · 일정 아이템(.dp-sch-item) / 근태 아이템(.dp-shift-item) 우측에 배치
   · dp-act-mod: 수정 버튼 (청록)
   · dp-act-del: 삭제 버튼 (빨강)
   · dp-act-sm : 테이블 행 안에서 사용하는 작은 버튼 변형
   · dp-row-actions: 테이블 셀 안 버튼 묶음
════════════════════════════════════════════════════════════════════════════ */

/* 수정/삭제 버튼 묶음 — 아이템 우측 정렬 */
.dp-item-actions {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;                                  /* 버튼 크기 고정, 축소 방지 */
    margin-left: auto;                               /* 자동 좌측 여백으로 우측 끝 배치 */
}

/* 수정 버튼 공통 — 청록 계열 */
.dp-act-mod {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(0,200,255,0.10);                /* 청록 10% 배경 */
    border: 1px solid rgba(0,200,255,0.28);          /* 청록 28% 테두리 */
    border-radius: 6px;
    color: var(--pr-cyan);                           /* 청록 아이콘 */
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

/* 수정 버튼 호버 */
.dp-act-mod:hover {
    background: rgba(0,200,255,0.22);
    border-color: var(--pr-cyan);
    box-shadow: 0 0 8px rgba(0,200,255,0.25);
}

/* 삭제 버튼 공통 — 빨강 계열 */
.dp-act-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    background: rgba(229,57,53,0.10);                /* 빨강 10% 배경 */
    border: 1px solid rgba(229,57,53,0.28);          /* 빨강 28% 테두리 */
    border-radius: 6px;
    color: var(--pr-red);                            /* 빨강 아이콘 */
    font-size: 11px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
    flex-shrink: 0;
}

/* 삭제 버튼 호버 */
.dp-act-del:hover {
    background: rgba(229,57,53,0.25);
    border-color: var(--pr-red);
    box-shadow: 0 0 8px rgba(229,57,53,0.22);
}

/* 테이블 행 안 소형 버튼 (수정/삭제 동일 크기 24×24) */
.dp-act-sm {
    width: 24px;                                     /* 테이블 셀 내 작은 버튼 */
    height: 24px;
    font-size: 10px;
    border-radius: 4px;
}

/* 테이블 셀 안 버튼 묶음 — 세로 나열 */
.dp-row-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;                                        /* 수정/삭제 버튼 간격 */
}

/* 테이블 관리 컬럼 — 고정 너비 */
.dp-col-act { width: 36px; }                         /* 수정/삭제 버튼 컬럼 너비 */
.dp-th-act  { text-align: center; }

/* 관리 td 셀 */
.dp-td-act {
    text-align: center;
    vertical-align: middle;
    padding: 4px 2px;                                /* 버튼이 셀 밖으로 나오지 않도록 여백 최소화 */
}


/* ════════════════════════════════════════════════════════════════════════════
   [29] 수정 모드 배너 — .dp-edit-banner
   · 수정 버튼 클릭 시 폼 상단에 표시되는 안내 배너
   · 뒤로가기 클릭 시 숨겨짐
════════════════════════════════════════════════════════════════════════════ */

/* 수정 모드 안내 배너 */
.dp-edit-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: rgba(255,179,71,0.10);               /* 주황 10% 배경 */
    border-bottom: 1px solid rgba(255,179,71,0.28);  /* 하단 주황 구분선 */
    font-size: 12px;
    font-weight: 600;
    color: #ffb347;                                  /* 주황 텍스트 */
    flex-shrink: 0;                                  /* 배너 크기 고정 */
}

/* 배너 아이콘 */
.dp-edit-banner i {
    font-size: 13px;
    flex-shrink: 0;
}

/* 배너 텍스트 */
.dp-edit-banner span {
    flex: 1;
    line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════════════════════
   [30] 근태 목록 — .dp-shift-list / .dp-shift-item
   · 팝업 본문에 기등록 근태를 목록 형태로 표시
   · 각 항목에 수정/삭제 버튼 포함
════════════════════════════════════════════════════════════════════════════ */

/* 근태 목록 */
.dp-shift-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* 근태 아이템 행 — 태그 + 버튼 좌우 배치 */
.dp-shift-item {
    display: flex;
    align-items: center;
    justify-content: space-between;                  /* 태그 좌측, 버튼 우측 */
    gap: 8px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--pr-border);
    border-radius: 6px;
}

/* 일정 아이템 — 수정/삭제 버튼 포함 시 가로 정렬 보정 */
.dp-sch-item {
    align-items: flex-start;                         /* 버튼이 제목 상단과 정렬 */
}

/* [추가] 달력 링크 버튼 — 2026-04 */
.pr-cal-link { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; margin-top: 8px; background: rgba(0,200,255,0.07); border: 1px solid rgba(0,200,255,0.28); border-radius: 6px; color: #00c8ff !important; font-size: 13px; font-weight: 500; letter-spacing: -0.5px; text-decoration: none !important; transition: all 0.2s; white-space: nowrap; }
.pr-cal-link:hover { background: rgba(0,200,255,0.16) !important; border-color: rgba(0,200,255,0.55) !important; box-shadow: 0 0 14px rgba(0,200,255,0.22); transform: translateY(-2px); }
.pr-cal-link i { font-size: 14px; }


/* ════════════════════════════════════════════════════════════════════════════
   [추가] 팝업 완성도 개선 — 2026-04
   · #day-view / .dp-popup 너비 버그 수정 (100vh → 90vw/560px)
   · 팝업 전체 레이아웃 강화
   · 배경 오버레이 강화
   · 폼 입력 레이아웃 개선
   · 반응형 팝업 크기 조정
════════════════════════════════════════════════════════════════════════════ */

/* 팝업 모달 컨테이너 — 크기 재정의 */
#day-view {
    width:      min(90vw, 560px);                    /* 뷰포트 90% 이하, 최대 560px */
    max-height: min(88vh, 680px);                    /* 뷰포트 88% 이하, 최대 680px */
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.7),
                0 0 0 1px rgba(0,200,255,0.15);      /* 테두리 글로우 */
}

/* 배경 오버레이 강화 — 더 진하게 */
#day-view-bg {
    background: rgba(0, 0, 0, 0.72);                /* 55% → 72% */
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* 팝업 내부 패널 — 너비 버그 수정 */
.dp-popup {
    width:      100%;                                /* 부모(#day-view) 너비 따름 */
    max-height: min(88vh, 680px);
    min-width:  0;                                   /* 100vh 버그 제거 */
    background: #0c1124;                             /* 완전 불투명 다크 배경 */
    border:     1px solid rgba(0,200,255,0.22);
    border-top: 3px solid #00c8ff;                  /* 상단 시안 라인 포인트 */
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(0,200,255,0.06);
}

/* 팝업 헤더 강화 */
.dp-head {
    padding:    14px 18px;
    background: rgba(0,200,255,0.06);
    border-bottom: 1px solid rgba(0,200,255,0.15);
}
.dp-head-date { font-size: 16px; letter-spacing: -0.5px; }

/* 팝업 본문 배경 */
.dp-body { background: #0c1124; }

/* 섹션 배경 */
.dp-section { background: transparent; }
.dp-section:nth-child(even) { background: rgba(0,200,255,0.02); }

/* 섹션 소제목 강화 */
.dp-section-title {
    font-size:   13px;
    font-weight: 700;
    color:       #e8f0ff;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0,200,255,0.1);
}

/* 입출금 합계 박스 강화 */
.dp-inout-sum {
    display:    flex;
    gap:        0;
    background: rgba(0,0,0,0.25);
    border:     1px solid rgba(0,200,255,0.12);
    border-radius: 6px;
    overflow:   hidden;
    margin-bottom: 10px;
}
.dp-sum-item {
    flex:       1;
    display:    flex;
    flex-direction: column;
    align-items: center;
    padding:    8px 6px;
    gap:        3px;
}
.dp-sum-label {
    font-size:  10px;
    color:      #5a6a8a;
    letter-spacing: 0.3px;
}
.dp-sum-in .dp-sum-value  { font-size: 13px; font-weight: 700; color: #00e896; }
.dp-sum-out .dp-sum-value { font-size: 13px; font-weight: 700; color: #ff6b6b; }
.dp-sum-divider {
    width:      1px;
    background: rgba(0,200,255,0.1);
    margin:     8px 0;
    flex-shrink: 0;
}

/* 입출금 테이블 강화 */
.dp-inout-table { font-size: 12px; }
.dp-inout-table th {
    background:  rgba(0,200,255,0.06) !important;
    color:       #5a7aa0 !important;
    font-size:   11px;
    font-weight: 600;
    padding:     6px 4px;
    border-bottom: 1px solid rgba(0,200,255,0.12);
}
.dp-inout-table td {
    padding:    7px 4px;
    color:      #9aa8c0;
    border-bottom: 1px solid rgba(0,200,255,0.06);
}
.dp-inout-table tr:hover td { background: rgba(0,200,255,0.04); }
.dp-row-income  td:first-child { border-left: 3px solid #00e896; }
.dp-row-outcome td:first-child { border-left: 3px solid #ff6b6b; }
.dp-row-bank    td:first-child { border-left: 3px solid #00c8ff; }

/* 데이터 없음 */
.dp-nodata {
    text-align: center;
    color:      #3a4660;
    font-size:  13px;
    padding:    16px 0;
    font-style: italic;
}

/* 폼 래퍼 — 너비 버그 수정 */
#dp-form-wrap {
    width:      100%;                                /* 100vh → 100% */
    max-height: min(88vh, 680px);
}

/* 폼 입력 개선 */
.dp-form-input {
    background:    rgba(0,200,255,0.04) !important;
    border:        1px solid rgba(0,200,255,0.18) !important;
    border-radius: 6px !important;
    color:         #e8f0ff !important;
    font-size:     13px;
    height:        36px;
    padding:       0 10px !important;
    transition:    border-color 0.2s, box-shadow 0.2s;
}
.dp-form-input:focus {
    border-color: #00c8ff !important;
    box-shadow:   0 0 0 2px rgba(0,200,255,0.12) !important;
    outline:      none;
}
.dp-form-input::placeholder { color: #3a4660; }

/* 폼 textarea 개선 */
.dp-form-textarea {
    background:    rgba(0,200,255,0.04) !important;
    border:        1px solid rgba(0,200,255,0.18) !important;
    border-radius: 6px !important;
    color:         #e8f0ff !important;
    resize:        vertical;
    min-height:    70px;
    padding:       8px 10px !important;
    font-size:     13px;
    line-height:   1.5;
}
.dp-form-textarea:focus {
    border-color: #00c8ff !important;
    box-shadow:   0 0 0 2px rgba(0,200,255,0.12) !important;
    outline:      none;
}

/* 폼 레이블 */
.dp-form-label { color: #5a7aa0; font-size: 11px; font-weight: 600; letter-spacing: 0.3px; }

/* 폼 하단 저장/취소 버튼 */
.dp-form-submit {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    padding:     0 18px;
    height:      36px;
    background:  linear-gradient(135deg, #00c8ff, #0055dd);
    border:      none;
    border-radius: 7px;
    color:       #fff;
    font-size:   13px;
    font-weight: 600;
    cursor:      pointer;
    transition:  filter 0.2s;
}
.dp-form-submit:hover { filter: brightness(1.15); }

.dp-form-cancel {
    display:     inline-flex;
    align-items: center;
    gap:         5px;
    padding:     0 14px;
    height:      36px;
    background:  rgba(255,255,255,0.05);
    border:      1px solid rgba(255,255,255,0.1);
    border-radius: 7px;
    color:       #7a8aaa;
    font-size:   13px;
    cursor:      pointer;
    transition:  all 0.2s;
}
.dp-form-cancel:hover { background: rgba(255,255,255,0.1); color: #e8f0ff; }

/* 폼 하단 영역 */
.dp-footer { background: rgba(0,0,0,0.3); border-top: 1px solid rgba(0,200,255,0.12); }

/* 반응형 — 모바일 팝업 */
@media screen and (max-width: 1000px) {
    #day-view      { width: 96vw; max-height: 92vh; }
    .dp-popup      { max-height: 92vh; }
    #dp-form-wrap  { max-height: 92vh; }
    .dp-foot-btn   { font-size: 11px; padding: 9px 2px; }
    .dp-foot-btn i { font-size: 13px; }
}


/* ════════════════════════════════════════════════════════════════════════════
   [추가] 달력 팝업 배경 하드코딩 수정 — 2026-04
   var(--pr-bg-card) 는 CSS 변수 미정의 시 투명으로 보임
   → 하드코딩 #0c1124 로 완전 불투명 보장
════════════════════════════════════════════════════════════════════════════ */

/* 팝업 오버레이 배경 강화 */
#day-view-bg {
    background:            rgba(0,0,0,0.78) !important;
    backdrop-filter:       blur(8px)        !important;
    -webkit-backdrop-filter: blur(8px)      !important;
}

/* 팝업 패널 배경 하드코딩 (변수 미정의 폴백) */
.dp-popup {
    background:  #0c1124 !important;
    border:      1px solid rgba(0,200,255,0.25) !important;
    border-top:  3px solid #00c8ff             !important;
    width:       min(90vw, 560px)              !important;
    max-height:  min(88vh, 680px)              !important;
    min-width:   0                             !important;
    box-shadow:  0 20px 60px rgba(0,0,0,0.85),
                 0 0 0 1px rgba(0,200,255,0.12) !important;
}

/* 팝업 컨테이너 */
#day-view {
    width:      min(90vw, 560px) !important;
    max-height: min(88vh, 680px) !important;
    box-shadow: 0 24px 64px rgba(0,0,0,0.85) !important;
}

/* 팝업 헤더 */
.dp-head { background: rgba(0,200,255,0.08) !important; border-bottom: 1px solid rgba(0,200,255,0.18) !important; }
.dp-head-date { color: #00c8ff !important; font-size: 16px !important; }

/* 팝업 본문 */
.dp-body { background: #0c1124 !important; }
.dp-section { background: transparent !important; }
.dp-section:nth-child(even) { background: rgba(0,200,255,0.02) !important; }

/* 섹션 소제목 */
.dp-section-title { color: #e8f0ff !important; font-size: 13px !important; font-weight: 700 !important; }
.dp-section-title i { color: #00c8ff !important; }

/* 입출금 합계 */
.dp-inout-sum { background: rgba(0,0,0,0.3) !important; border: 1px solid rgba(0,200,255,0.1) !important; border-radius: 8px !important; overflow: hidden !important; }
.dp-sum-label { color: #5a6a8a !important; font-size: 10px !important; }
.dp-sum-in  .dp-sum-value { color: #00e896 !important; font-weight: 700 !important; }
.dp-sum-out .dp-sum-value { color: #ff6b6b !important; font-weight: 700 !important; }

/* 테이블 헤더/셀 */
.dp-inout-table th { background: rgba(0,200,255,0.05) !important; color: #5a7aa0 !important; }
.dp-inout-table td { color: #9aa8c0 !important; }
.dp-inout-table tr:hover td { background: rgba(0,200,255,0.05) !important; }

/* 행 타입별 좌측 선 */
.dp-row-income  td:first-child { border-left: 3px solid #00e896 !important; }
.dp-row-outcome td:first-child { border-left: 3px solid #ff6b6b !important; }
.dp-row-bank    td:first-child { border-left: 3px solid #00c8ff !important; }

/* 폼 영역 배경 */
#dp-form-wrap { background: #0c1124 !important; width: min(90vw, 560px) !important; max-height: min(88vh, 680px) !important; }

/* 폼 입력 */
#sub .dp-form-input, .dp-form-input {
    background:    rgba(0,200,255,0.04) !important;
    border:        1px solid rgba(0,200,255,0.2) !important;
    border-radius: 6px !important;
    color:         #e8f0ff !important;
}
#sub .dp-form-input:focus, .dp-form-input:focus {
    border-color: #00c8ff !important;
    box-shadow:   0 0 0 2px rgba(0,200,255,0.15) !important;
}

/* 폼 하단 */
.dp-footer { background: rgba(0,0,0,0.4) !important; border-top: 1px solid rgba(0,200,255,0.15) !important; }
.dp-foot-btn { color: #7a8aaa !important; }
.dp-foot-btn:hover { color: #e8f0ff !important; }

/* 데이터 없음 */
.dp-nodata { color: #3a4660 !important; }

/* 모바일 */



/* ════════════════════════════════════
   환경설정 버튼 (pr-config-link)
════════════════════════════════════ */
.pr-config-link {
    background:  rgba(106,138,255,0.08);               /* 보라빛 배경 */
    border-color: rgba(106,138,255,0.35);
    color:        var(--accent-blue, #6a8aff) !important;
    margin-left:  6px;
}
.pr-config-link:hover {
    background: rgba(106,138,255,0.16);
    box-shadow: 0 0 10px rgba(106,138,255,0.2);
    color:      var(--accent-blue, #6a8aff) !important;
}
.pr-config-link i { color: var(--accent-blue, #6a8aff) !important; }

/* ════════════════════════════════════
   환경설정 화면 레이아웃 (.pr-cfg-*)
════════════════════════════════════ */
.pr-cfg-wrap   { padding: 0 0 40px; }

.pr-cfg-table  { width: 100%; border-collapse: collapse; margin-top: 0; }
.pr-cfg-table > thead > tr > th {
    background:     rgba(0,200,255,0.06);
    border-bottom:  1px solid var(--border, rgba(0,200,255,0.18));
    color:          var(--text-primary, #e8f0ff);
    font-size:      14px;
    font-weight:    700;
    letter-spacing: -0.5px;
    padding:        12px 16px;
    text-align:     left;
}
.pr-cfg-table > thead > tr > th small { font-size: 11px; color: #7a8aaa; font-weight: 400; margin-left: 8px; }
.pr-cfg-table > tbody > tr > th {
    background:     rgba(0,200,255,0.03);
    border-bottom:  1px solid var(--border, rgba(0,200,255,0.08));
    color:          var(--text-secondary, #7a8aaa);
    font-size:      13px;
    font-weight:    600;
    padding:        10px 16px;
    width:          140px;
    vertical-align: middle;
}
.pr-cfg-table > tbody > tr > td {
    background:     var(--pr-bg-card, #0c1124);
    border-bottom:  1px solid var(--border, rgba(0,200,255,0.08));
    color:          var(--text-primary, #e8f0ff);
    font-size:      13px;
    padding:        10px 16px;
    vertical-align: middle;
}
.pr-cfg-input-row { padding: 12px 16px !important; }

/* textarea */
.pr-cfg-textarea {
    width:       100%;
    min-height:  140px;
    background:  var(--pr-bg-card, #0c1124);
    border:      1px solid var(--border, rgba(0,200,255,0.18));
    border-radius: 4px;
    color:       var(--text-primary, #e8f0ff);
    font-family: var(--font-body, 'Noto Sans KR', sans-serif);
    font-size:   12px;
    padding:     10px 12px;
    resize:      vertical;
}
.pr-cfg-textarea:focus {
    border-color: var(--accent-cyan, #00c8ff);
    outline:      none;
}


/* ════════════════════════════════════════════════════════════════════════════
   [최종 수정 패치] 2026-04
   · --pr-* CSS 변수 :root 정의 (미정의로 팝업 버튼 비정상 원인)
   · 달력 상단 헤더(pr-sub-tit) 배경/색상 강화
   · 팝업 하단 버튼(dp-footer) 완전 재정의
   · pr-cal-link 스타일 개선
════════════════════════════════════════════════════════════════════════════ */

/* ── CSS 변수 :root 정의 ── */
:root {
    --pr-bg-base:       #050810;
    --pr-bg-card:       #0c1124;
    --pr-bg-hover:      #101828;
    --pr-border:        rgba(0,200,255,0.11);
    --pr-border-bright: rgba(0,200,255,0.36);
    --pr-cyan:          #00c8ff;
    --pr-orange:        #ff6b2b;
    --pr-green:         #00ff9d;
    --pr-blue:          #6a8aff;
    --pr-red:           #e53935;
    --pr-text-primary:  #e8f0ff;
    --pr-text-sub:      #7a8aaa;
    --pr-text-dim:      #3a4660;
    --pr-glow-cyan:     0 0 22px rgba(0,200,255,0.28);
    --pr-glow-orange:   0 0 22px rgba(255,107,43,0.38);
}


/* ════════════════════════════════════════════════
   달력 상단 헤더(lunar.tpl.php) — pr-sub-tit 기반
   형제회비 관리자 mng-fm-sub-tit 와 동일한 스타일
   ════════════════════════════════════════════════ */
#lunar-wrap .pr-sub-tit,
.lunar-wrap .pr-sub-tit {
    display:         flex !important;
    align-items:     flex-start !important;
    background:      #0c1124 !important;
    border-bottom:   2px solid rgba(0,200,255,0.18) !important;
    border-top:      3px solid #00c8ff !important;
    padding:         18px 16px !important;
    gap:             20px !important;
    box-shadow:      0 2px 16px rgba(0,0,0,0.4) !important;
}
#lunar-wrap .pr-money-left { width: 55% !important; }
#lunar-wrap .pr-money-left h2 {
    color:        #e8f0ff !important;
    font-size:    20px !important;
    font-weight:  800 !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 8px !important;
    line-height:  1.3 !important;
}
#lunar-wrap .pr-money-left h2 i { color: #00c8ff !important; margin-right: 8px !important; }

#sub #lunar-wrap .pr-sub-tit em,
#lunar-wrap .pr-sub-tit em {
    color:      #5a7aa0 !important;
    font-size:  12px !important;
    font-style: normal !important;
    display:    block !important;
    margin-top: 3px !important;
}
#lunar-wrap .pr-money-sort {
    width:           45% !important;
    text-align:      right !important;
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     flex-end !important;
    gap:             8px !important;
    justify-content: center !important;
}

/* 달력 내부 .pr-cal-link 버튼 */
#lunar-wrap .pr-cal-link {
    display:         inline-flex !important;
    align-items:     center !important;
    gap:             7px !important;
    padding:         8px 18px !important;
    background:      rgba(0,200,255,0.08) !important;
    border:          1px solid rgba(0,200,255,0.3) !important;
    border-radius:   8px !important;
    color:           #00c8ff !important;
    font-size:       13px !important;
    font-weight:     600 !important;
    text-decoration: none !important;
    transition:      all 0.2s !important;
    white-space:     nowrap !important;
    letter-spacing:  -0.3px !important;
}
#lunar-wrap .pr-cal-link:hover {
    background:   rgba(0,200,255,0.18) !important;
    border-color: rgba(0,200,255,0.55) !important;
    box-shadow:   0 0 14px rgba(0,200,255,0.22) !important;
}
#lunar-wrap .pr-cal-link i { font-size: 13px !important; }


/* ════════════════════════════════════════════════
   팝업 하단 기능 버튼 — dp-footer 완전 재정의
   (--pr-* 변수 미정의로 비정상 표시 문제 해결)
   ════════════════════════════════════════════════ */
.dp-footer {
    display:     flex !important;
    align-items: stretch !important;
    border-top:  2px solid rgba(0,200,255,0.15) !important;
    flex-shrink: 0 !important;
    background:  rgba(0,0,0,0.35) !important;
    overflow:    hidden !important;
}

.dp-foot-btn {
    flex:            1 !important;
    display:         flex !important;
    flex-direction:  column !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             5px !important;
    padding:         12px 4px !important;
    border:          none !important;
    border-top:      3px solid transparent !important;
    border-right:    1px solid rgba(0,200,255,0.08) !important;
    margin-top:      -2px !important;
    background:      transparent !important;
    cursor:          pointer !important;
    transition:      color 0.2s, border-color 0.2s, background 0.2s !important;
    font-size:       11px !important;
    font-weight:     700 !important;
    letter-spacing:  0.3px !important;
    color:           #5a7aa0 !important;
}
.dp-foot-btn:last-child { border-right: none !important; }
.dp-foot-btn i { font-size: 16px !important; }
#sub .dp-foot-btn span, .dp-foot-btn span { color: inherit !important; font-size: 11px !important; }

/* 버튼 호버 */
.dp-foot-btn:hover { background: rgba(255,255,255,0.04) !important; color: #e8f0ff !important; }

/* 버튼별 아이콘 색상 */
#dp-btn-income   i { color: #00e896 !important; }
#dp-btn-outcome  i { color: #ff6b6b !important; }
#dp-btn-schedule i { color: #5b9ff5 !important; }
#dp-btn-shift    i { color: #9b7fd4 !important; }

/* 버튼별 활성(탭 선택) 스타일 */
#dp-btn-income.dp-tab-active   { color: #00e896 !important; border-top-color: #00e896 !important; background: rgba(0,232,150,0.07) !important; }
#dp-btn-outcome.dp-tab-active  { color: #ff6b6b !important; border-top-color: #ff6b6b !important; background: rgba(255,107,107,0.07) !important; }
#dp-btn-schedule.dp-tab-active { color: #5b9ff5 !important; border-top-color: #5b9ff5 !important; background: rgba(91,159,245,0.07) !important; }
#dp-btn-shift.dp-tab-active    { color: #9b7fd4 !important; border-top-color: #9b7fd4 !important; background: rgba(155,127,212,0.07) !important; }

/* 버튼별 호버 */
#dp-btn-income:hover   { background: rgba(0,232,150,0.08) !important; }
#dp-btn-outcome:hover  { background: rgba(255,107,107,0.08) !important; }
#dp-btn-schedule:hover { background: rgba(91,159,245,0.08) !important; }
#dp-btn-shift:hover    { background: rgba(155,127,212,0.08) !important; }


/* ════════════════════════════════════════════════
   팝업 폼 탭 전환 — dp-tab-content
   (JS에서 dp-tab-show 클래스 토글로 탭 전환)
   ════════════════════════════════════════════════ */
.dp-tab-content              { display: none !important; }
.dp-tab-content.dp-tab-show  { display: block !important; }

/* 팝업 폼 탭 버튼 바 */
.dp-form-tabs {
    display:       flex !important;
    border-bottom: 1px solid rgba(0,200,255,0.12) !important;
    background:    rgba(0,0,0,0.2) !important;
    flex-shrink:   0 !important;
}
.dp-tab-btn {
    flex:            1 !important;
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    gap:             4px !important;
    padding:         10px 4px !important;
    background:      transparent !important;
    border:          none !important;
    border-bottom:   2px solid transparent !important;
    color:           #3a4660 !important;
    cursor:          pointer !important;
    font-size:       12px !important;
    font-weight:     600 !important;
    transition:      all 0.2s !important;
    white-space:     nowrap !important;
}
.dp-tab-btn:hover   { color: #7a8aaa !important; background: rgba(255,255,255,0.03) !important; }
.dp-tab-btn.dp-tab-active { color: #00c8ff !important; border-bottom-color: #00c8ff !important; background: rgba(0,200,255,0.05) !important; }
.dp-tab-btn i { font-size: 12px !important; }


/* ════════════════════════════════════════════════
   모바일 달력 — pc-only/mo-only 제어
   ════════════════════════════════════════════════ */
.pc-only { display: block; }
.mo-only { display: none;  }

@media screen and (max-width: 1000px) {
    .pc-only { display: none  !important; }
    .mo-only { display: block !important; }

    /* 달력 상단 헤더 모바일 */
    #lunar-wrap .pr-sub-tit {
        flex-direction: column !important;
        padding:        12px 12px !important;
        gap:            10px !important;
    }
    #lunar-wrap .pr-money-left,
    #lunar-wrap .pr-money-sort {
        width:      100% !important;
        align-items: flex-start !important;
        flex-direction: row !important;
        gap: 8px !important;
    }
    #lunar-wrap .pr-money-left h2 { font-size: 16px !important; margin-bottom: 4px !important; }

    /* 달력 셀 모바일 — 양력 → 주/야 → 음력 → dot */
    .cal-cell {
        padding:        3px 2px !important;
        min-height:     62px !important;
        display:        flex !important;
        flex-direction: column !important;
        align-items:    center !important;
        gap:            1px !important;
        border-radius:  4px !important;
        cursor:         pointer !important;
    }
    .cell-top-row {
        display:         flex !important;
        justify-content: center !important;
        width:           100% !important;
        margin-bottom:   0 !important;
    }
    /* PC 음력 숨김 */
    .cell-top-row .lunar-date.pc-only { display: none !important; }
    .day-num { font-size: 14px !important; font-weight: 700 !important; text-align: center !important; }
    /* 근무 배지 */
    .cell-shift-row { margin: 1px 0 !important; }
    .shift-badge { font-size: 8px !important; padding: 1px 3px !important; border-radius: 2px !important; }
    /* 음력 mo-only */
    .lunar-date.mo-only {
        font-size:   9px !important;
        color:       #3a5068 !important;
        text-align:  center !important;
        line-height: 1.2 !important;
        display:     block !important;
    }
    /* 공휴일/기념일 숨김 */
    .cal-cell .holiday-name,
    .cal-cell .isholiday-name { display: none !important; }
    /* PC 셀 정보 숨김 */
    .cell-spacer    { display: none !important; }
    .cell-bottom.pc-only { display: none !important; }

    /* 점(dot) */
    .cell-dots {
        display:         flex !important;
        justify-content: center !important;
        align-items:     center !important;
        gap:             2px !important;
        margin-top:      auto !important;
        padding-bottom:  2px !important;
        min-height:      8px !important;
    }
    .cdot {
        display:       block !important;
        width:         5px !important;
        height:        5px !important;
        border-radius: 50% !important;
        flex-shrink:   0 !important;
    }
    .cdot-sch { background: #00c8ff !important; }
    .cdot-out { background: #ff6b6b !important; }
    .cdot-in  { background: #00e896 !important; }

    /* 달력 그리드 */
    .lunar-grid { grid-auto-rows: minmax(62px, auto) !important; gap: 2px !important; }
    .lunar-grid-header { gap: 2px !important; }
    .dow-header { padding: 4px 2px !important; font-size: 10px !important; }

    /* 팝업 모바일 */
    #day-view, .dp-popup, #dp-form-wrap { width: 96vw !important; max-height: 92vh !important; }

    /* 팝업 하단 버튼 모바일 */
    .dp-foot-btn { padding: 10px 2px !important; font-size: 10px !important; }
    .dp-foot-btn i { font-size: 14px !important; }
}

/* ════════════════════════════════════
   검색폼 CSS — mng-pr-* (관리자 동일)
   홈페이지 style.css에 미정의 보완
════════════════════════════════════ */
.mng-pr-search-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 12px; }
.pr-search-group   { display: flex; align-items: center; gap: 10px; }

.mng-pr-search-inner {
    display: flex; align-items: center;
    background: #0c1124;
    border: 1px solid rgba(0,200,255,0.23);
    border-radius: 8px; overflow: hidden;
    height: 44px; width: 440px; cursor: text;
    transition: width 0.35s ease, border-color 0.3s, box-shadow 0.3s;
}
.mng-pr-search-inner:focus-within {
    width: 580px;
    border-color: #00c8ff;
    box-shadow: 0 0 0 3px rgba(0,200,255,0.12), 0 2px 16px rgba(0,0,0,0.3);
}
.mng-pr-search-select-wrap {
    position: relative; display: flex; align-items: center;
    flex-shrink: 0; border-right: 1px solid rgba(0,200,255,0.18);
    background: rgba(0,200,255,0.05); min-width: 130px; height: 100%;
}
.mng-pr-search-select-icon  { position: absolute; left: 12px; color: #00c8ff; font-size: 12px; pointer-events: none; z-index: 1; }
.mng-pr-search-select-arrow { position: absolute; right: 10px; color: #3a4660; font-size: 11px; pointer-events: none; z-index: 1; }
#sub .pr-search-select, .pr-search-select {
    appearance: none; -webkit-appearance: none;
    background: transparent !important; border: none !important;
    color: #e8f0ff !important;
    cursor: pointer; font-size: 13px; height: 44px;
    padding: 0 28px 0 34px; width: 100%; outline: none;
}
#sub .pr-search-select option, .pr-search-select option { background: #0c1124; color: #e8f0ff; }

.mng-pr-search-input-wrap { position: relative; display: flex; align-items: center; flex: 1; }
.mng-pr-search-input-icon { position: absolute; left: 14px; color: #3a4660; font-size: 13px; pointer-events: none; }
#sub .pr-search-input, .pr-search-input {
    background: transparent !important; border: none !important;
    color: #e8f0ff !important;
    font-size: 13px; height: 44px; padding: 0 14px 0 38px; width: 100%; outline: none;
}
#sub .pr-search-input::placeholder, .pr-search-input::placeholder { color: #3a4660; }

.mng-pr-search-btn {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0; height: 100%; padding: 0 22px;
    background: linear-gradient(135deg, #00c8ff, #0055dd) !important;
    border: none !important; color: #fff !important;
    cursor: pointer; font-weight: 600; white-space: nowrap;
    transition: filter 0.2s;
}
.mng-pr-search-btn:hover { filter: brightness(1.15); }
.mng-pr-search-btn i     { font-size: 13px; }

.pr-reset-box {
    display: flex; align-items: center; height: 44px;
    background: rgba(255,107,43,0.1) !important;
    border: 1px solid rgba(255,107,43,0.3); border-radius: 8px;
    transition: background 0.3s, transform 0.4s cubic-bezier(0.175,0.885,0.32,1.2);
}
.mng-pr-search-reset {
    padding: 0 15px; color: #ff6b2b !important;
    display: flex; align-items: center; gap: 6px;
    height: 100%; text-decoration: none; font-size: 13px; font-weight: 700;
}
.mng-pr-search-reset i { transition: transform 0.5s ease; }
.pr-reset-box:hover   { background: rgba(255,107,43,0.2) !important; border-color: #ff6b2b; transform: rotate(45deg); }
.pr-reset-box:hover i { transform: rotate(-360deg); }


/* ════════════════════════════════════════════════════════════════════════════
   [최종 수정] 2026-04-13
   ① 달력 헤더 버튼 한줄 배치
   ② PC 셀 shift-badge 날짜 옆 인라인
   ③ 모바일 달력 완전 재정의
   ④ 팝업 모바일 입력 개선
   ⑤ dp-footer 버튼 배경 완전 제거
════════════════════════════════════════════════════════════════════════════ */

/* ① 달력 헤더 버튼 한줄 배치 */
#lunar-wrap .pr-money-sort {
    display:        flex !important;
    flex-direction: row !important;        /* 세로→가로 */
    align-items:    center !important;
    justify-content: flex-end !important;
    gap:            10px !important;
    width:          auto !important;
    flex-shrink:    0 !important;
}
#lunar-wrap .pr-sub-tit {
    align-items: center !important;        /* 좌우 수직 중앙 정렬 */
}

/* ② PC 셀 — shift-badge 날짜 옆 인라인 */
.cell-top-row {
    display:     flex !important;
    align-items: center !important;
    gap:         4px !important;
    flex-wrap:   nowrap !important;
}
/* PC: shift-badge 소형 인라인 */
.cell-top-row .shift-badge {
    font-size:     10px !important;
    padding:       1px 5px !important;
    border-radius: 3px !important;
    flex-shrink:   0 !important;
    line-height:   1.4 !important;
}
/* PC: 음력은 오른쪽 끝 */
.cell-top-row .lunar-date {
    margin-left: auto !important;
    font-size:   11px !important;
    color:       #3a5068 !important;
    white-space: nowrap !important;
}


/* ⑤ dp-footer / dp-foot-btn 배경 완전 제거 */
.dp-footer {
    background: transparent !important;
    border-top: 1px solid rgba(0,200,255,0.12) !important;
}
.dp-foot-btn {
    background: transparent !important;
    color:      #5a7aa0 !important;
}
.dp-foot-btn:hover  { background: transparent !important; }
/* 활성 탭도 배경 제거 */
#dp-btn-income.dp-tab-active   { background: transparent !important; }
#dp-btn-outcome.dp-tab-active  { background: transparent !important; }
#dp-btn-schedule.dp-tab-active { background: transparent !important; }
#dp-btn-shift.dp-tab-active    { background: transparent !important; }


/* ════════════════════════════════════════════════
   ③ 모바일 달력 — 완전 재정의
   ════════════════════════════════════════════════ */
@media screen and (max-width: 1000px) {

    /* 헤더 버튼 모바일 */
    #lunar-wrap .pr-money-sort {
        flex-direction: column !important;
        align-items:    flex-end !important;
        gap:            6px !important;
    }
    #lunar-wrap .pr-cal-link {
        padding:   6px 12px !important;
        font-size: 12px !important;
    }

    /* 달력 그리드 셀 — flex column 중앙정렬 */
    .cal-cell {
        display:        flex !important;
        flex-direction: column !important;
        align-items:    center !important;
        justify-content: flex-start !important;
        padding:        4px 2px 4px !important;
        min-height:     70px !important;
        gap:            0 !important;
        cursor:         pointer !important;
        box-sizing:     border-box !important;
    }

    /* 1. 양력 날짜 — 최상단 중앙 */
    .cal-cell .cell-top-row {
        display:         flex !important;
        justify-content: center !important;
        align-items:     center !important;
        width:           100% !important;
        margin-bottom:   3px !important;
    }
    .cal-cell .day-num {
        font-size:   15px !important;
        font-weight: 700 !important;
        line-height: 1.2 !important;
    }
    /* PC 전용 요소 숨김 */
    .cal-cell .cell-top-row .shift-badge.pc-only { display: none !important; }
    .cal-cell .cell-top-row .lunar-date.pc-only  { display: none !important; }

    /* 2. 주/야 배지 (모바일 전용 행) */
    .cal-cell .cell-shift-row.mo-only {
        display:         flex !important;
        justify-content: center !important;
        margin-bottom:   3px !important;
    }
    .cal-cell .cell-shift-row.mo-only .shift-badge {
        font-size:     9px !important;
        padding:       1px 5px !important;
        border-radius: 3px !important;
    }

    /* 3. 근태(공휴일/기념일) 숨김 — 공간 절약 */
    .cal-cell .holiday-name,
    .cal-cell .isholiday-name { display: none !important; }

    /* PC 셀 정보 숨김 */
    .cal-cell .cell-spacer    { display: none !important; }
    .cal-cell .cell-bottom.pc-only { display: none !important; }

    /* 4~6. 점(dot) — 일정/수입/지출 */
    .cal-cell .cell-dots.mo-only {
        display:         flex !important;
        justify-content: center !important;
        align-items:     center !important;
        gap:             2px !important;
        margin-bottom:   3px !important;
    }
    .cdot {
        display:       block !important;
        width:         5px !important;
        height:        5px !important;
        border-radius: 50% !important;
        flex-shrink:   0 !important;
    }
    .cdot-sch { background: #00c8ff !important; }
    .cdot-out { background: #ff6b6b !important; }
    .cdot-in  { background: #00e896 !important; }

    /* 7. 음력 날짜 — 맨 아래 */
    .cal-cell .lunar-date.mo-only {
        display:    block !important;
        font-size:  9px !important;
        color:      #3a5068 !important;
        text-align: center !important;
        line-height: 1.2 !important;
        margin-top: auto !important;
    }

    /* 오늘/ghost 셀 */
    .cal-cell.today .day-num { color: #00c8ff !important; }
    .cal-cell.today { background: rgba(0,200,255,0.08) !important; }
    .cal-cell.ghost { opacity: 0.4 !important; }

    /* 달력 그리드 */
    .lunar-grid {
        grid-auto-rows: minmax(70px, auto) !important;
        gap:            2px !important;
    }
    .lunar-grid-header { gap: 2px !important; }
    .dow-header { padding: 5px 2px !important; font-size: 10px !important; }

    /* ④ 팝업 모바일 입력 개선 */
    #day-view, #dp-form-wrap {
        width:      100vw !important;
        max-width:  100vw !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
    }
    .dp-popup {
        width:      100vw !important;
        max-width:  100vw !important;
        border-radius: 0 !important;
    }

    /* 팝업 헤더 */
    .dp-head { padding: 10px 14px !important; }
    .dp-head-date { font-size: 14px !important; }

    /* 팝업 하단 버튼 */
    .dp-footer { border-top: 1px solid rgba(0,200,255,0.12) !important; }
    .dp-foot-btn {
        padding:   10px 2px !important;
        font-size: 10px !important;
        background: transparent !important;
    }
    .dp-foot-btn i { font-size: 15px !important; }

    /* 폼 탭 버튼 */
    .dp-tab-btn {
        padding:   8px 2px !important;
        font-size: 11px !important;
    }

    /* 폼 입력 행 — 모바일에서 세로 배치 */
    .dp-form-row {
        flex-direction: column !important;
        align-items:    flex-start !important;
        gap:            4px !important;
        margin-bottom:  10px !important;
    }
    .dp-form-label {
        width:     100% !important;
        font-size: 11px !important;
        color:     #5a7aa0 !important;
    }
    #sub .dp-form-input,
    .dp-form-input,
    #sub .dp-form-select,
    .dp-form-select,
    #sub .dp-form-textarea,
    .dp-form-textarea {
        width:     100% !important;
        font-size: 14px !important;
    }
    .dp-form-inner  { padding: 10px 12px !important; }
    .dp-amount-wrap { width: 100% !important; }

    /* 폼 저장/취소 버튼 */
    .dp-form-footer-bar {
        padding: 10px 12px !important;
        gap:     8px !important;
    }
    #sub .dp-form-submit,
    .dp-form-submit,
    #sub .dp-form-cancel,
    .dp-form-cancel {
        flex:      1 !important;
        height:    42px !important;
        font-size: 14px !important;
    }
}


/* ════════════════════════════════════════════════════════
   환경설정 3열 배치 — 고정지출 / 개인기념일 / 개인애도일
   ════════════════════════════════════════════════════════ */
.pr-cfg-3col {
    display:   flex;
    gap:       16px;
    align-items: flex-start;
    margin-top: 20px;
}
.pr-cfg-3col .pr-cfg-table {
    flex:       1;
    min-width:  0;
    margin-top: 0 !important;
}

/* 모바일: 세로 배치 */
@media screen and (max-width: 1000px) {
    .pr-cfg-3col { flex-direction: column; gap: 12px; }
}