@charset "utf-8";
/**
 * fm_money.css — 가족회비 페이지 전용 CSS
 * ══════════════════════════════════════════════════════
 * 로드 순서: layout.css → respond.css → proto.css → fm_money.css
 * 네임스페이스: 모든 선택자에 "fm-" 접두사 사용
 *   → layout.css의 #sub-tit, #list-sch, .tabs 등과 완전 분리
 *
 * layout.css [22] 충돌 대응:
 *   [22]: #sub span, #sub td, #sub th, #sub p, #sub li 등에
 *         color:inherit!important / background-color:transparent!important 적용
 *   → fm-txt-red/yellow: #sub span 에 걸리므로 더 구체적 선택자로 복원
 *   → fm-table-fill/list td/th: 흰 배경이 필요하므로 복원
 *   → fm-th-dark: 어두운 배경 헤더 복원
 * ══════════════════════════════════════════════════════
 *
 * 섹션 목록:
 *   [1] PC/모바일 탭 표시 분기
 *   [2] 색상 유틸 클래스 (layout.css [22] 충돌 복원 포함)
 *   [3] PC 상단 헤더 — fm-sub-tit
 *   [4] PC 탭 시스템 — fm-tabs
 *   [5] 검색 폼 — fm-list-sch / fm-sch-date
 *   [6] 거래내역 테이블 — fm-table6
 *   [7] 수입/지출 테이블 — fm-table-list / fm-table-fill
 *   [8] 납부/예산 카드 — fm-member-card / fm-table-title
 *   [9] 공통 유틸 — fm-nodata / fm-paging / fm-th-dark
 *  [10] 모바일 (@media max-width:1000px)
 *        - 헤더 fm-mod-money-sort
 *        - 탭 fm-mod-tabs
 *        - 테이블 fm-mod-table1~4 / fm-mod-table-list / fm-mod-table-fill
 *        - 카드 fm-mod-member-card / fm-mod-table-title
 */


/* ════════════════════════════════════
   [1] PC/모바일 탭 표시 분기
════════════════════════════════════ */
/* PC 화면(1001px 이상): 모바일 탭 숨김 */
@media screen and (min-width: 1001px) {
    .fm-mobile-tab { display: none; }
}
/* 모바일 화면(1000px 이하): PC 탭 숨김 */
@media screen and (max-width: 1000px) {
    .fm-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 .fm-txt-* 로 명시도 높여 복원
   → <font> 태그 대신 이 클래스를 사용
════════════════════════════════════ */
#sub .fm-txt-red,
.fm-txt-red    { color: #e53935 !important; }

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

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

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


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

.fm-money-left {
    display: inline-block;
    width: 50%;
}
.fm-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 .fm-sub-tit em,
.fm-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;
}

.fm-money-sort { display: inline-block; width: 50%; text-align: right; }
/* li: layout.css [22] #sub li에 걸림 → background 복원 */
#sub .fm-money-sort li,
.fm-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 .fm-money-sort li em,
.fm-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 .fm-money-sort li p,
.fm-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;
}
.fm-money-sort li:hover { background: rgba(0,200,255,0.06) !important; }


/* ════════════════════════════════════
   [4] PC 탭 시스템 — fm-tabs
   ─────────────────────────────────
   CSS :checked 방식 — JS 불필요
   라디오 input은 숨기고 label을 탭처럼 표시
════════════════════════════════════ */
.fm-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="fm-tab-item"] { display: none; }

.fm-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;
}
.fm-tab-item:hover { color: var(--accent-cyan, #00c8ff); opacity: 0.85; }

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

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

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


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

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

/* 내부 flex 컨테이너 */
.fm-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;
}
.fm-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);
}

/* ── 셀렉트 래퍼 ── */
.fm-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;
}
.fm-search-select-icon {
    position: absolute;
    left: 12px;
    color: var(--accent-cyan, #00c8ff);
    font-size: 12px;
    pointer-events: none;
    z-index: 1;
}
.fm-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 .fm-search-select,
.fm-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 .fm-search-select option,
.fm-search-select option {
    background: var(--bg-card, #0c1124);
    color: var(--text-primary, #e8f0ff);
}

/* ── 키워드 입력 래퍼 ── */
.fm-search-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}
.fm-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 .fm-search-input,
.fm-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 .fm-search-input::placeholder,
.fm-search-input::placeholder { color: var(--text-dim, #3a4660); }

/* ── 검색 버튼 ── */
.fm-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;
}
.fm-search-btn:hover  { filter: brightness(1.15); }
.fm-search-btn:active { transform: scale(0.97); }
.fm-search-btn i      { font-size: 13px; }

/* ── 초기화 버튼 ── */
.fm-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;
}
.fm-search-reset:hover {
    background: rgba(255,107,43,0.2) !important;
    border-color: var(--accent-orange, #ff6b2b);
    transform: rotate(-30deg);
}

/* 날짜 검색 */
.fm-sch-date       { display: flex; margin-bottom: 15px; flex-wrap: wrap; gap: 6px; align-items: center; }
.fm-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;
}
.fm-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);
}
/* fm-slt-text li: layout.css [22] #sub li color:inherit → 복원 */
#sub .fm-slt-text li,
.fm-slt-text li {
    background: transparent !important;
    color: var(--text-secondary, #7a8aaa) !important;
    font-size: 13px;
    line-height: 36px;
    list-style: none;
}


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

/* thead: 배경 복원 */
#sub .fm-table6.list > thead > tr > th,
.fm-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: 배경/색상 복원 */
.fm-table6 > tbody > tr > td {


    background: var(--bg-card, #0c1124);
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.11));
    color: var(--text-secondary, #7a8aaa) !important;
    font-size: 13px;
    padding: 12px 10px;
    transition: all 0.2s;
    background:     var(--bg-card, #0c1124);  /* 다크모드 배경 */
}
.fm-table6 > tbody > tr:nth-child(even) > td { background: rgba(0,200,255,0.02); }
.fm-table6 > tbody > tr:hover > td { background: rgba(0,200,255,0.06); }
#sub .fm-table6 > tbody > tr > td > strong,
.fm-table6 > tbody > tr > td > strong {
    color: var(--text-primary, #e8f0ff) !important;
    font-weight: 700;
}

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

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

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


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

/* ── fm-table-list (수입/지출 내역) ── */
.fm-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 .fm-table-list td,
.fm-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 .fm-table-list tr:nth-child(odd) td,
.fm-table-list tr:nth-child(odd) td { background: rgba(255,255,255,0.03) !important; }
#sub .fm-table-list tr:hover td,
.fm-table-list tr:hover td {
    background: rgba(0,200,255,0.08) !important;
    color: var(--text-primary, #e8f0ff) !important;
}
.fm-table-list td:last-child { border-right: none; }

/* ── fm-table-fill (납부/예산 카드 테이블) ── */
.fm-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 .fm-table-fill th,
.fm-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 .fm-table-fill th:last-child,
.fm-table-fill th:last-child { border-right: none; }
#sub .fm-table-fill td,
.fm-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 .fm-table-fill td:last-child,
.fm-table-fill td:last-child { border-right: none; }
#sub .fm-table-fill tr:nth-child(odd) td,
.fm-table-fill tr:nth-child(odd) td { background: rgba(255,255,255,0.03) !important; }
#sub .fm-table-fill tr:hover td,
.fm-table-fill tr:hover td {
    background: rgba(0,200,255,0.08) !important;
    color: #fff !important;
}

/* ── fm-th-dark: 어두운 헤더 (수입총액/지출총액 타이틀) ── */
#sub table .fm-th-dark,
table .fm-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;
}

/* ── fm-fraternity-wrap ── */
.fm-fraternity-wrap { width: 100%; }
.fm-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 .fm-table-center em,
.fm-table-center em {
    font-size: 22px;
    color: var(--text-primary, #e8f0ff) !important;
    font-style: normal;
}


/* ════════════════════════════════════
   [8] 납부/예산 카드 — fm-member-card / fm-table-title
════════════════════════════════════ */
.fm-member-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.fm-member-card {
    flex: 1 1 calc(33.33% - 16px);
    min-width: 200px;
    text-align: center;
}
.fm-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 .fm-table-title em,
.fm-table-title em {
    font-size: 22px;
    color: var(--text-primary, #e8f0ff) !important;
    font-style: normal;
}


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

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


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

    /* ── 모바일 헤더 ── */
    .fm-mod-sub-tit {
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
    .fm-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;
    }
    .fm-mod-money-sort h2 {
        background: transparent;
        margin: 10px;
        text-align: left;
        color: var(--text-primary, #e8f0ff);
    }
    #sub .fm-mod-money-sort em,
    .fm-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 .fm-mod-money-sort ul,
    .fm-mod-money-sort ul { display: block !important; text-align: right !important; padding: 5px !important; }
    #sub .fm-mod-money-sort li,
    .fm-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 .fm-mod-money-sort li em,
    .fm-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 .fm-mod-money-sort li p,
    .fm-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;
    }

    /* ── 모바일 탭 ── */
    .fm-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="fm-mod-tab-item"] { display: none; }
    .fm-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;
    }
    .fm-mod-tab-item:hover { color: var(--accent-cyan, #00c8ff); }
    .fm-mod-tab-content { display: none; padding: 10px 0 0; clear: both; overflow: hidden; }

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

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

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

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

    /* ── 모바일 테이블1 (헤더 고정) ── */
    .fm-mod-table1 { width: 100%; border-collapse: collapse; }
    .fm-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 (데이터) ── */
    .fm-mod-table2 { width: 100%; border-collapse: collapse; }
    #sub .fm-mod-table2 > tbody > tr > td,
    .fm-mod-table2 > tbody > tr > td {
        background: transparent !important;
        color: var(--text-secondary, #7a8aaa) !important;
        padding: 0;
    }
    #sub .fm-mod-table2 > tbody > tr:nth-child(even) > td,
    .fm-mod-table2 > tbody > tr:nth-child(even) > td { background: rgba(255,255,255,0.02) !important; }
    #sub .fm-mod-table2 > tbody > tr:hover > td,
    .fm-mod-table2 > tbody > tr:hover > td { background: rgba(0,200,255,0.06) !important; }

    /* ── 모바일 테이블4 (내부 데이터 행) ── */
    .fm-mod-table4 { width: 100%; border-collapse: collapse; }
    #sub .fm-mod-table4 > tr > th,
    .fm-mod-table4 > tr > th,
    #sub .fm-mod-table4 > tbody > tr > th,
    .fm-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;
    }

    /* ── 모바일 수입/지출 테이블 ── */
    .fm-mod-table-list {
        background: var(--bg-card, #0c1124);
        border-collapse: collapse;
        width: 99%;
    }
    #sub .fm-mod-table-list td,
    .fm-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 .fm-mod-table-list tr:nth-child(odd) td,
    .fm-mod-table-list tr:nth-child(odd) td { background: rgba(255,255,255,0.02) !important; }
    #sub .fm-mod-table-list tr:hover td,
    .fm-mod-table-list tr:hover td {
        background: rgba(0,200,255,0.08) !important;
        color: var(--text-primary, #e8f0ff) !important;
    }

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

    .fm-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 .fm-mod-table-title em,
    .fm-mod-table-title em {
        font-size: 15px;
        color: var(--text-primary, #e8f0ff) !important;
        font-style: normal;
    }

    .fm-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 .fm-mod-table-center em,
    .fm-mod-table-center em {
        font-size: 13px;
        color: var(--text-primary, #e8f0ff) !important;
        font-style: normal;
    }

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

    /* ── 모바일 납부/예산 fill 테이블 ── */
    .fm-mod-table-fill {
        background: var(--bg-card, #0c1124);
        border-collapse: collapse;
        width: 100%;
        margin-bottom: 12px;
    }
    #sub .fm-mod-table-fill th,
    .fm-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 .fm-mod-table-fill th:last-child,
    .fm-mod-table-fill th:last-child { border-right: none; }
    #sub .fm-mod-table-fill td,
    .fm-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 .fm-mod-table-fill td:last-child,
    .fm-mod-table-fill td:last-child { border-right: none; }
    #sub .fm-mod-table-fill tr:nth-child(odd) td,
    .fm-mod-table-fill tr:nth-child(odd) td { background: rgba(255,255,255,0.03) !important; }
    #sub .fm-mod-table-fill tr:hover td,
    .fm-mod-table-fill tr:hover td {
        background: rgba(0,200,255,0.08) !important;
        color: #fff !important;
    }

} /* end @media max-width:1000px */

/* ════════════════════════════════════════════════════════════
   [관리자 통일] 홈페이지-관리자 화면 동일 스타일 — 2026-04
   관리자 manage.css의 mng-fm-* 클래스를 홈페이지에도 동일 적용
════════════════════════════════════════════════════════════ */

/* :root 변수 — 홈페이지에서 미정의 변수 보완 */
:root {
    --bg-base:        #050810;
    --bg-card:        #0c1124;
    --bg-card-hover:  #101828;
    --border:         rgba(0,200,255,0.11);
    --border-bright:  rgba(0,200,255,0.36);
    --accent-cyan:    #00c8ff;
    --accent-orange:  #ff6b2b;
    --accent-blue:    #6a8aff;
    --accent-red:     #e53935;
    --text-primary:   #e8f0ff;
    --text-secondary: #7a8aaa;
    --text-dim:       #3a4660;
}

/* 탭 radio 숨김 — 관리자 name 네임스페이스 포함 */
input[name="mng-fm-tab-item"],
input[name="fm-mod-tab-item"],
input[name="fm-tab-item"] { display: none; }

/* ── [A] 상단 헤더 — mng-fm-sub-tit (관리자와 동일) ── */
.mng-fm-sub-tit {
    display:       flex;
    align-items:   flex-start;
    background:    var(--bg-card, #0c1124);
    border-bottom: 1px solid var(--border, rgba(0,200,255,0.11));
    padding:       20px 10px;
    gap:           20px;
}
.mng-fm-money-left { display: inline-block; width: 50%; }
.mng-fm-money-left h2 { color: var(--text-primary, #e8f0ff); font-size: 18px; letter-spacing: -1px; line-height: 1.4; margin-bottom: 16px; }

#sub .mng-fm-sub-tit em, .mng-fm-sub-tit em {
    color: var(--text-secondary, #7a8aaa) !important;
    display: block; font-size: 13px; font-style: normal; letter-spacing: -1px; margin-bottom: 5px;
}
.mng-fm-money-sort { display: inline-block; width: 50%; text-align: right; }

#sub .mng-fm-money-sort li, .mng-fm-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 .mng-fm-money-sort li em, .mng-fm-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 .mng-fm-money-sort li p, .mng-fm-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;
}
.mng-fm-money-sort li:hover { background: rgba(0,200,255,0.06) !important; }

/* ── [B] 탭 시스템 — mng-fm-tabs (관리자와 동일) ── */
.mng-fm-tabs {
    padding-bottom: 40px;
    background:     var(--bg-card, #0c1124);
    box-shadow:     0 0 10px rgba(0,0,0,0.4);
    width:          100%;
}
.mng-fm-tabs input[type=radio] { display: none; }
.mng-fm-tabs input[type=radio] + label { font-size: 14px; position: inherit; padding: 0; line-height: 50px; color: var(--text-secondary, #7a8aaa); }

.mng-fm-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;
}
.mng-fm-tab-item:hover { color: var(--accent-cyan, #00c8ff); opacity: 0.85; }

.mng-fm-tab-content { display: none; padding: 40px 40px 0; clear: both; overflow: hidden; }

#mng-fm-all:checked         ~ #mng-fm-all-content         { display: block; }
#mng-fm-programming:checked ~ #mng-fm-programming-content { display: block; }
#mng-fm-design:checked      ~ #mng-fm-design-content      { display: block; }

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

/* ── [C] 검색폼 — 아이콘 추가 (관리자와 동일) ── */
.mng-fm-search-select-icon  { position: absolute; left: 12px; color: var(--accent-cyan, #00c8ff); font-size: 12px; pointer-events: none; z-index: 1; }
.mng-fm-search-select-arrow { position: absolute; right: 10px; color: var(--text-dim, #3a4660); font-size: 11px; pointer-events: none; z-index: 1; }
.mng-fm-search-input-icon   { position: absolute; left: 14px; color: var(--text-dim, #3a4660); font-size: 13px; pointer-events: none; }

/* ── [D] 거래내역 테이블 — mng-fm-table6 (관리자와 동일) ── */
.mng-fm-table6 { border-top: 1px solid var(--border, rgba(0,200,255,0.11)); width: 100%; border-collapse: collapse; }
.mng-fm-table6.list { margin-top: 0; }

#sub .mng-fm-table6.list > thead > tr > th, .mng-fm-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;
}
#sub .mng-fm-table6 > tbody > tr > td, .mng-fm-table6 > tbody > tr > td {
    background: transparent !important; border-bottom: 1px solid var(--border, rgba(0,200,255,0.11));
    color: var(--text-secondary, #7a8aaa) !important; font-size: 13px; padding: 12px 10px; transition: all 0.2s;
}
#sub .mng-fm-table6 > tbody > tr > td > strong, .mng-fm-table6 > tbody > tr > td > strong { color: var(--text-primary, #e8f0ff) !important; font-weight: 700; }

#sub .mng-fm-table6.list > tbody > tr:nth-child(odd) > td,  .mng-fm-table6.list > tbody > tr:nth-child(odd) > td  { background: var(--bg-card, #0c1124) !important; }
#sub .mng-fm-table6.list > tbody > tr:nth-child(even) > td, .mng-fm-table6.list > tbody > tr:nth-child(even) > td { background: rgba(255,255,255,0.03) !important; }
#sub .mng-fm-table6.list > tbody > tr:hover > td, .mng-fm-table6.list > tbody > tr:hover > td { background: rgba(0,200,255,0.08) !important; }

.mng-fm-table6 > tbody > tr > td.no { color: var(--text-dim, #3a4660) !important; white-space: nowrap; min-width: 40px; }

/* ── [E] 총 건수 박스 — fm-total-count (관리자와 동일) ── */
.fm-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 .fm-total-count .label, .fm-total-count .label { color: var(--text-secondary, #7a8aaa) !important; font-weight: 700; font-size: 0.9rem; }
#sub .fm-total-count .value, .fm-total-count .value { color: var(--accent-blue, #6a8aff) !important; font-weight: bold; font-size: 1.1rem; }

/* ── [F] nodata / paging ── */
#sub .mng-fm-nodata, .mng-fm-nodata { color: var(--text-dim, #3a4660) !important; display: block; font-style: italic; letter-spacing: -1px; padding: 40px 0; text-align: center; }
.mng-fm-nodata::before { content: '// '; }
.mng-fm-paging { margin-top: 20px; }

/* ── [G] 날짜범위 검색 — mng-fm-sch-date (관리자와 동일) ── */
.mng-fm-sch-date { display: flex; margin-bottom: 15px; flex-wrap: wrap; gap: 6px; align-items: center; }
.mng-fm-slt-date input[type=text] {
    background: var(--bg-card, #0c1124) !important; border: 1px solid var(--border, rgba(0,200,255,0.11)) !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;
}
.mng-fm-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); }
#sub .fm-slt-text li, .fm-slt-text li { background: transparent !important; color: var(--text-secondary, #7a8aaa) !important; font-size: 13px; line-height: 36px; list-style: none; }


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

.mng-fm-search-inner {
    display: flex; align-items: center;
    background: var(--bg-card, #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-fm-search-inner:focus-within {
    width: 580px;
    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);
}
.mng-fm-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-fm-search-select-icon  { position: absolute; left: 12px; color: var(--accent-cyan, #00c8ff); font-size: 12px; pointer-events: none; z-index: 1; }
.mng-fm-search-select-arrow { position: absolute; right: 10px; color: var(--text-dim, #3a4660); font-size: 11px; pointer-events: none; z-index: 1; }
#sub .fm-search-select, .fm-search-select {
    appearance: none; -webkit-appearance: none;
    background: transparent !important; border: none !important;
    color: var(--text-primary, #e8f0ff) !important;
    cursor: pointer; font-size: 13px; height: 44px;
    padding: 0 28px 0 34px; width: 100%; outline: none;
}
#sub .fm-search-select option, .fm-search-select option { background: #0c1124; color: #e8f0ff; }

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

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

.fm-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-fm-search-reset {
    padding: 0 15px; color: var(--accent-orange, #ff6b2b) !important;
    display: flex; align-items: center; gap: 6px;
    height: 100%; text-decoration: none; font-size: 13px; font-weight: 700;
}
.mng-fm-search-reset i { transition: transform 0.5s ease; }
.fm-reset-box:hover   { background: rgba(255,107,43,0.2) !important; border-color: var(--accent-orange, #ff6b2b); transform: rotate(45deg); }
.fm-reset-box:hover i { transform: rotate(-360deg); }