/* =============================================================
   일정 참가비 — 상세 페이지 UI
   회원: 참가비/계좌/납부상태/입금완료 신고
   관리자: 참가비 입금 현황(승인·반려·증빙)
   신고 레이어 / 증빙 이미지 모달
   ============================================================= */

/* ------- 회원: 참가비 패널 ------- */
/* 섹션 구분 — 위쪽 실선. 참가비 패널은 상단 액션버튼 뒤라 .info-wrap + .info-wrap
   구분선(1px #d2d2d2)이 안 걸리므로 동일 스타일을 직접 부여해 섹션임을 표시한다.
   단, 앞 요소가 대등한 콘텐츠 섹션이 아니라 콘텐츠에 딸린 '액션버튼 줄'이라
   섹션 간 표준 간격(32px)은 과해 붕 떠 보인다 → margin-top 16px 로 좁혀
   버튼과 자연스럽게 이어지게 한다(구분선/padding-top 은 유지). */
.fee-panel {
    border-top: 1px solid #d2d2d2;
    margin-top: 16px;
    padding-top: 16px;
}
/* 참가비 제목 + 우측 '참가비 관리' 인라인 링크 (관리자) — 제목 줄 우측 끝에 작게.
   제목(.info-title)과 같은 줄에 놓고 flex 로 양끝 정렬한다. */
.fee-panel .info-title--with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.fee-panel .fee-manage-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #8A8A8A;
    text-decoration: none;
    white-space: nowrap;
}
.fee-panel .fee-manage-link:hover {
    color: #3677f6;
}
/* 확인 대기 건수 배지 — 제목 링크 옆 작은 앰버 알림 */
.fee-panel .fee-manage-link .badge-count {
    display: inline-block;
    min-width: 16px;
    height: 16px;
    padding: 0 5px;
    border-radius: 999px;
    background: #FF3B30;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
/* 금액 행 — 계좌/예금주/기한 행과 라벨 열(.club__info .title, 100px) 정렬 통일 */
.fee-panel .fee-amount-row .fee-amount {
    font-size: 17px;
    font-weight: 700;
    color: #3677f6;
}
/* 정산 전(후불·더치) 금액 미정 상태 — 금액(파란 굵은 숫자) 자리에 '아직 미정'임이
   분명한 상태 칩. 회색 텍스트(과거 .fee-amount--pending)는 비활성 금액/플레이스홀더로
   오인돼 제거. 색은 이 기능의 대기(pending) 팔레트(앰버)와 통일 — 미납 배지와 동일 톤. */
.fee-panel .fee-amount-row .fee-amount-chip {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    background: #FFF7E6;
    color: #B76E00;
    font-size: 14px;
    font-weight: 600;
    line-height: 18px;
    vertical-align: middle;
}
.fee-panel .fee-amount-row .fee-amount-sub {
    margin-left: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #8A8A8A;
}
/* 면제 칩 클릭 → 원래 참가비 금액 토글 (.fee-amount-sub 와 시각은 비슷하지만 상태(.show)를
   가진 별도 요소라 분리 — 후불 정산 안내 등 항상 노출용인 .fee-amount-sub 에 상태를 얹으면
   다른 용도에 영향을 줄 수 있다) */
.fee-panel .fee-amount-row .fee-amount-chip.js-fee-exempt-toggle {
    cursor: pointer;
}
.fee-panel .fee-amount-row .fee-amount-original {
    display: none;
    margin-left: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #8A8A8A;
}
.fee-panel .fee-amount-row .fee-amount-original.show {
    display: inline;
}

/* 입금계좌 행 — 값(은행 계좌번호) '바로 옆'에 '복사'를 세로 중앙 인라인 배치.
   공용 .club__info .con .copy 는 display:flex + margin-top:8px 이라 다음 줄로 떨어짐.
   셀(.con)을 flex(align-items:center)로 만들어 값과 복사를 같은 세로 중앙선에 두되,
   값(.fee-account__val)은 flex:0 1 auto 로 '자기 콘텐츠 폭'만 갖게 해 복사가 셀 우측 끝이 아니라 값 바로 뒤에 붙는다.
   계좌번호가 길어 셀 폭을 넘치면 flex-wrap:wrap + word-break:break-all 로 값이 셀 안에서 줄바꿈되어 레이아웃이 깨지지 않는다.
   .club__info 는 table-layout:fixed 이므로 값 셀이 flex 여도 열 폭은 100px 라벨 + 나머지로 유지된다.
   (예금주는 별도 .fee-holder-row 로 분리) */
.fee-panel .fee-account {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 8px;
}
.fee-panel .fee-account .fee-account__val {
    min-width: 0;
    flex: 0 1 auto;
    word-break: break-all;
}
/* 공용 line-height:16px 가 아이콘 18px 와 안 맞아 어긋나는 것 방지 — 아이콘+텍스트 세로 중앙 */
.fee-panel .fee-account .copy {
    margin: 0;
    display: inline-flex;
    align-items: center;
    line-height: 1;
    flex: 0 0 auto;
}

.fee-panel .fee-account-guide {
    color: #8D92A3;
    font-size: 13px;
    margin-top: 4px;
}

/* 본인 납부상태 — 정보 행(점 + 색 텍스트). pill 대신 다른 정의행과 라벨 열 정렬 통일 */
/* 값 텍스트는 라벨(.title)과 동일한 baseline·줄높이(26px)·크기(16px)로 정렬.
   과거 값에만 걸린 vertical-align:middle 이 텍스트를 라벨 baseline 위로 띄워 이 행만 어긋났음 → baseline 으로 통일.
   컬러 점(dot)만 vertical-align:middle 로 텍스트 중앙에 붙여 텍스트를 밀어 올리지 않게 한다. */
.fee-panel .fee-status-row .fee-status-row__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
}
.fee-panel .fee-status-row .fee-status-row__text {
    font-size: 16px;
    line-height: 26px;
    font-weight: 600;
    vertical-align: baseline;
}
.fee-panel .fee-status-row.fee-status--pending  .fee-status-row__text { color: #B76E00; }
.fee-panel .fee-status-row.fee-status--pending  .fee-status-row__dot  { background: #F59E0B; }
.fee-panel .fee-status-row.fee-status--paid     .fee-status-row__text { color: #1B8A4B; }
.fee-panel .fee-status-row.fee-status--paid     .fee-status-row__dot  { background: #22c55e; }
.fee-panel .fee-status-row.fee-status--rejected .fee-status-row__text { color: #D63A3A; }
.fee-panel .fee-status-row.fee-status--rejected .fee-status-row__dot  { background: #FF4D4F; }
.fee-panel .fee-status-row.fee-status--exempt   .fee-status-row__text { color: #8A8A8A; }
.fee-panel .fee-status-row.fee-status--exempt   .fee-status-row__dot  { background: #B0B0B0; }

.fee-panel .fee-my-status__notice {
    margin-top: 8px;
    font-size: 13px;
    color: #D63A3A;
    line-height: 1.5;
}

/* 정산 전 안내 노트 — 후불/더치 정산예정에서 정산박스가 없을 때 휑함을 채우는 안내 블록.
   아이콘 + 한 줄 설명(언제/왜 금액이 정해지는지). 값 옆 서브텍스트 중복을 여기로 통합.
   카드가 아니라 인라인 '안내 노트'(같은 패널 계열의 연한 배경 박스, 무그림자·무테두리). */
.fee-panel .fee-pending-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 16px 0 0;
    padding: 16px;
    background: #F7F8FA;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    color: #5A5F6B;
}
.fee-panel .fee-pending-note__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

/* ------- 본인 납부 액션 (미납/반려 시) — 아웃라인 필 버튼 2개 ------- */
/* 상단 '출석체크' 액션버튼(.calendar-action-btn)과 동일 룩. 컨테이너 전제(.calendar-action-buttons)에
   묶이지 않도록 fee 전용 클래스로 스타일만 복제하고, 가로 2등분(각 flex:1)으로 나란히 배치. */
.fee-panel .fee-btn-row {
    display: flex;
    gap: 8px;
    margin-top: 16px;
}
.fee-panel .fee-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 46px;
    padding: 8px 14px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    color: #333;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.fee-panel .fee-btn:active {
    background: #f8f9fa;
    border-color: #4a90e2;
    box-shadow: 0 2px 5px rgba(74, 144, 226, 0.2);
}
.fee-panel .fee-btn .fee-btn__icon {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}
.fee-panel .fee-btn .fee-btn__text {
    line-height: 1;
}
/* 송금 앱 브랜드 아이콘 (카카오페이/토스) — 회원 버튼·미납 레이어 공용, self-host 인라인 SVG(외부 CDN 금지) */
.fee-pay-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    vertical-align: middle;
}
.fee-pay-icon--kakaopay {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='7' fill='%23FEE500'/><ellipse cx='12' cy='10.8' rx='6.2' ry='4.7' fill='%233C1E1E'/><path d='M8 14.5 7.3 17.8 10.8 15.4z' fill='%233C1E1E'/></svg>") center/contain no-repeat;
}
.fee-pay-icon--toss {
    background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><rect width='24' height='24' rx='7' fill='%230064FF'/><text x='12' y='16' font-family='Arial,Helvetica,sans-serif' font-size='9' font-weight='700' fill='%23ffffff' text-anchor='middle'>toss</text></svg>") center/contain no-repeat;
}
/* 미납 레이어 송금 버튼: 아이콘-텍스트 간격(버튼에 gap 없을 수 있어 마진으로 보정) */
.fee-unpaid-layer__kakaopay .fee-pay-icon,
.fee-unpaid-layer__toss .fee-pay-icon { margin-right: 6px; }
/* 입금 완료 신고는 송금 버튼 아래 별도 줄 전체폭. 송금 줄이 앞에 있으면 간격 8px. */
.fee-panel .fee-btn-row + .fee-btn-row--report {
    margin-top: 8px;
}

/* ------- 관리자: 참가비 입금 현황 ------- */
.fee-admin .info-title .fee-admin__count {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #FFF7E6;
    color: #B76E00;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}
.fee-admin__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* 카드 대신 구분선 리스트 */
.fee-admin__item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f0;
}
.fee-admin__item:last-child { border-bottom: none; }

.fee-admin__who {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.fee-admin__nick {
    font-size: 15px;
    font-weight: 600;
    color: #2D2D2E;
}
.fee-admin__badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}
.fee-admin__item.fee-status--pending  .fee-admin__badge { background: #FFF7E6; color: #B76E00; }
.fee-admin__item.fee-status--paid     .fee-admin__badge { background: #E9F9EF; color: #1B8A4B; }
.fee-admin__item.fee-status--rejected .fee-admin__badge { background: #FFECEC; color: #D63A3A; }

.fee-admin__sub {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-top: 6px;
    font-size: 13px;
    color: #8D92A3;
}
.fee-admin__sub .fee-admin__date { color: #B0B4BD; }

/* 증빙/승인/반려 버튼 행 — 각 44px 탭 타깃 */
.fee-admin__side {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.fee-admin__actions {
    display: flex;
    gap: 8px;
    flex: 1;
}
.fee-admin__receipt,
.fee-admin__approve,
.fee-admin__reject {
    flex: 1;
    min-height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.fee-admin__receipt {
    border: 1px solid #C7CAD1;
    background: #fff;
    color: #5A5F6B;
}
.fee-admin__approve {
    border: none;
    background: #3677f6;
    color: #fff;
}
.fee-admin__approve:active { background: #2f6ae0; }
.fee-admin__reject {
    border: 1px solid #FFB3B3;
    background: #fff;
    color: #D63A3A;
}
.fee-admin__reject:active { background: #FFECEC; }

/* ------- 입금완료 신고 레이어 (표준 바텀시트) -------
   레이어 컨테이너/딤/헤더/닫기 포지셔닝은 klubo.css 의 표준
   .layer-bottm--fixed / .layer__top / .layer-bottom__con / #klubo-dimm 규칙을 그대로 쓴다(중복 정의 금지).
   여기서는 바텀시트 '내용' 스타일만 .fee-report 스코프로 유지한다. */
/* 증빙 이미지 첨부 등으로 내용이 길어지면 시트 안에서 스크롤 (화면 밖으로 넘치지 않게) */
.fee-report .layer-bottom__con {
    max-height: calc(85vh - 48px);
    overflow-y: auto;
}
.fee-report .fee-report-file-input {
    display: none;
}
.fee-report .fee-report-field {
    margin-top: 16px;
}
.fee-report .fee-report-field:first-child {
    margin-top: 0;
}
.fee-report .fee-report-field__label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2D2D2E;
}
.fee-report .fee-report-field .input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #E0E2E6;
    border-radius: 8px;
    font-size: 15px;
    box-sizing: border-box;
}
.fee-report .fee-report-upload {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    border: 1px dashed #C7CAD1;
    border-radius: 8px;
    background: #F7F8FA;
    color: #5A5F6B;
    font-size: 14px;
    cursor: pointer;
}
.fee-report .fee-report-preview {
    position: relative;
    margin-top: 12px;
    display: inline-block;
}
.fee-report .fee-report-preview img {
    max-width: 100%;
    max-height: 240px;
    border-radius: 8px;
    display: block;
}
.fee-report .fee-report-preview__remove {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.fee-report .fee-report-footer {
    margin-top: 24px;
}
.fee-report .fee-report-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 52px;
    border: none;
    border-radius: 8px;
    background: #3677f6;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.fee-report .fee-report-submit:active { background: #2f6ae0; }

/* ------- 참가비 환불 필요 목록 (작성자/관리자 · 정보성) ------- */
.fee-refund .info-title .fee-refund__count {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #FFECEC;
    color: #D63A3A;
    font-size: 12px;
    font-weight: 600;
    vertical-align: middle;
}
.fee-refund__notice {
    margin: 0 0 12px;
    padding: 12px;
    background: #FFF5F5;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    color: #C0392B;
}
.fee-refund__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fee-refund__item {
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
}
.fee-refund__item:last-child { border-bottom: none; }
.fee-refund__who {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.fee-refund__nick {
    font-size: 15px;
    font-weight: 600;
    color: #2D2D2E;
}
.fee-refund__amount {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 700;
    color: #D63A3A;
}
.fee-refund__date {
    margin-top: 4px;
    font-size: 13px;
    color: #8D92A3;
}

/* 증빙 이미지 모달 → 공용 .klubo-image-viewer 로 통합(www/js/common/imageViewer.js). (기존 .fee-image-modal 은 미사용 dead CSS 였음) */

/* ------- 미납자 진입 안내 레이어 (세션당 1회) ------- */
.fee-unpaid-layer {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
/* 배경 딤은 공용 #klubo-dimm 사용 (자체 __overlay 제거). 이 컨테이너는 시트 중앙정렬만 담당(투명). */
.fee-unpaid-layer__sheet {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 340px;
    padding: 28px 24px 24px;
    background: #fff;
    border-radius: 16px;
    text-align: center;
}
.fee-unpaid-layer__icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
}
.fee-unpaid-layer__icon .emo {
    width: 48px;
    height: 48px;
}
.fee-unpaid-layer__title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #2D2D2E;
}
.fee-unpaid-layer__desc {
    margin: 0 0 16px;
    font-size: 14px;
    line-height: 1.6;
    color: #5A5F6B;
}
.fee-unpaid-layer__info {
    padding: 16px;
    background: #F7F8FA;
    border-radius: 8px;
    text-align: left;
}
.fee-unpaid-layer__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
}
.fee-unpaid-layer__row + .fee-unpaid-layer__row {
    margin-top: 8px;
}
.fee-unpaid-layer__row span { color: #8D92A3; flex: 0 0 auto; }
.fee-unpaid-layer__row strong {
    color: #2D2D2E;
    font-weight: 600;
    text-align: right;
    word-break: break-all;
}
/* 입금계좌 행: 값 + 복사 칩 (예금주 제외 "은행 계좌번호" 복사) */
.fee-unpaid-layer__accval {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
.fee-unpaid-layer__copy {
    flex: 0 0 auto;
    min-height: 26px;
    padding: 3px 10px;
    border: 1px solid #C7CAD1;
    border-radius: 999px;
    background: #fff;
    color: #5A5F6B;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
}
.fee-unpaid-layer__copy:active { background: #eef0f4; }
/* 카카오페이·토스 송금 버튼 공통: 채도 완화 아웃라인 스타일.
   브랜드색은 아이콘칩(.fee-pay-icon)에만 남겨 식별하고, 버튼 배경은 흰색/중립 테두리로 통일 → 풀필 스택 눈부심 제거 */
.fee-unpaid-layer__kakaopay,
.fee-unpaid-layer__toss {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    margin-top: 16px;
    border: 1px solid #D8DBE0;
    border-radius: 8px;
    background: #fff;
    color: #3A3F4A;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.fee-unpaid-layer__kakaopay:active,
.fee-unpaid-layer__toss:active { background: #f4f5f7; }
/* 카카오페이 버튼이 앞에 있으면 토스 버튼 간격 8px */
.fee-unpaid-layer__kakaopay + .fee-unpaid-layer__toss {
    margin-top: 8px;
}

.fee-unpaid-layer__actions {
    display: flex;
    gap: 8px;
    margin-top: 20px;
}
.fee-unpaid-layer__kakaopay + .fee-unpaid-layer__actions,
.fee-unpaid-layer__toss + .fee-unpaid-layer__actions {
    margin-top: 8px;
}
.fee-unpaid-layer__later,
.fee-unpaid-layer__report {
    flex: 1;
    min-height: 48px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.fee-unpaid-layer__later {
    flex: 0 0 96px;
    border: 1px solid #E0E2E6;
    background: #fff;
    color: #5A5F6B;
}
/* 레이어 유일한 채움 강조 = 주 CTA. 눈부심 완화 위해 프라이머리 블루 톤을 약간 차분히 */
.fee-unpaid-layer__report {
    border: none;
    background: #3f6fd8;
    color: #fff;
}
.fee-unpaid-layer__report:active { background: #3560c0; }