/* ==========================================================================
   승인/결재 게시판 (nBoardType=7, skin "approval") — 회원/운영진 화면
   - 정식 전자결재 문서톤: 결재란(도장 그리드) + 문서정보 + 괘선 양식 테이블.
   - 라이트 전용. 앱 퍼플 액센트(#6d28d9). 폰트 전역 상속. 카드 지양(괘선/음영).
   - 모든 스타일은 #approvalBoardRoot(.apv-root) 하위로 스코핑하여 전역 오염 방지.
   ========================================================================== */

/* .approval-submission 은 결재 전용 화면(.apv-root) 밖("전체" 탭 피드 등)에서도 렌더되는데
   그 안에서 .apv-tag / .apv-money 같은 공용 조각을 쓴다. 변수가 .apv-root 에만 있으면
   목록에서 배경·테두리가 통째로 비어 밋밋하게 나오므로 같은 토큰을 함께 정의한다. */
.apv-root,
.approval-submission,
/* "전체" 탭 카드에서는 단계 칩·상태 라벨이 결재 스코프 밖(카드 헤더)에 놓인다.
   변수가 없으면 var(--apv-*) 선언이 통째로 무효가 되어 칩이 무색으로 나오므로 여기에도 정의한다. */
.apv-steps,
.apv-status-label {
    --apv-paper:#ffffff;
    --apv-wash:#f5f5f8;
    --apv-head-sh:#f7f8fa;
    --apv-rule:#d0d3de;
    --apv-rule-2:#E6E6E6;
    --apv-ink:#1b1b22;
    --apv-ink-2:#3a3a45;
    --apv-muted:#6f6f7a;
    --apv-faint:#a3a3ad;
    /* 액센트는 앱 공통 파랑(#3677f6). 결재 화면만 다른 색을 쓰지 않는다. */
    --apv-accent:#3677f6;
    --apv-accent-2:#2a5fd4;
    --apv-accent-wash:#F6F9FF;
    --apv-accent-ln:#D6E4FF;
    /* 진행 단계 색 — 결재 전용 지정 팔레트.
       요청=#e74c3c · 승인=#f4a736 · 진행=#0bd0c1 · 완료=회색
       (앱 공통 .vote-state 팔레트와 의도적으로 다르다. 결재는 자체 단계 색을 쓴다.)

       단계마다 토큰이 둘이다.
         --apv-{x}-fill : 지정 원색. 꽉 채우는 칩/도장의 배경.
         --apv-{x}      : 같은 색의 어두운 톤. 옅은 배경 위 "글자"용.
       원색을 그대로 글자로 쓰면 10~12px 칩에서 안 읽힌다(실측: #f4a736 1.86:1, #0bd0c1 1.80:1).
       어두운 톤은 각자의 옅은 배경 위에서 4.7~6.1:1 을 확보한 값이다.
       반려/대기는 지정 대상이 아니라 기존 값을 유지한다. */
    --apv-req:#c0392b;  --apv-req-fill:#e74c3c;  --apv-req-bg:#fdecea;  --apv-req-ln:#f7c9c3;
    --apv-apr:#8f5d00;  --apv-apr-fill:#f4a736;  --apv-apr-bg:#fef4e4;  --apv-apr-ln:#f8ddb0;
    --apv-prog:#056b64; --apv-prog-fill:#0bd0c1; --apv-prog-bg:#e4faf8; --apv-prog-ln:#a8ebe6;
    --apv-done:#555b71; --apv-done-fill:#555b71; --apv-done-bg:#f2f3f6; --apv-done-ln:#d0d3de;
    --apv-rej:#f53c14;  --apv-rej-bg:#fdeeea;  --apv-rej-ln:#fac6ba;
    --apv-wait:#8d92a3; --apv-wait-bg:#f5f6f8; --apv-wait-ln:#dfe1e7;
    /* (중지 전용 색 --apv-stop* 은 제거됨 — 반려·취소와 함께 --apv-wait 회색을 쓴다) */

    color:var(--apv-ink);
    /* line-height / font-smoothing 을 여기서 선언하지 않는다.
       선언하면 하위의 앱 공용 요소(.page-con__title 등)까지 상속받아
       다른 게시판 글쓰기·상세와 줄높이·간격이 미세하게 어긋난다.
       (실측: 라벨 18.9px → 24.8px, 필드 간격 61/65px → 67/73px)
       본문 가독성이 필요한 곳은 아래에서 요소별로 line-height 를 명시한다. */
}
.apv-root *{box-sizing:border-box;}

/* 상태 도장/pill 공통 색 — 목록의 활성 단계 칩(.apv-step--on)과 완전히 같은 값으로 칠한다.
   찍힌 도장 = 그 단계가 실제로 일어났다는 표시라 목록의 "현재 단계" 칩과 같은 무게로 보여야 한다.
     · 배경/테두리 = 단계 지정 원색(--apv-*-fill)   · 글자 = 흰색(네 단계 통일, 칩과 동일 규칙)
   가독성 보완이 필요하면 글자색이 아니라 --apv-*-fill 을 어둡게 내린다(칩 규칙과 같은 방침). */
.apv-s-req  {color:#fff;            background:var(--apv-req-fill);  border-color:var(--apv-req-fill);}
.apv-s-apr  {color:#fff;            background:var(--apv-apr-fill);  border-color:var(--apv-apr-fill);}
.apv-s-prog {color:#fff;            background:var(--apv-prog-fill); border-color:var(--apv-prog-fill);}
.apv-s-done {color:#fff;            background:var(--apv-done-fill); border-color:var(--apv-done-fill);}
/* 반려·중지·취소, 그리고 아직 오지 않은 단계(대기)는 모두 같은 옅은 회색으로 통일한다.
   진행 단계(요청→승인→진행→완료)만 색으로 구분하고, 그 밖으로 빠진 결과는 색을 주지 않는다.
   — 목록 상태 라벨(.apv-status-label)과 상세 결재란 도장(.apv-stamp)이 같은 클래스를 쓰므로
     이 한 줄로 두 화면이 함께 바뀐다. */
.apv-s-rej,
.apv-s-stop,
.apv-s-wait {color:var(--apv-wait); background:var(--apv-wait-bg);   border-color:var(--apv-wait-ln);}

/* 로딩/빈 상태 */
.apv-loading,
.apv-empty{
    padding:48px 18px;
    text-align:center;
    color:var(--apv-faint);
    font-size:14px;
    line-height:1.6;
}
.apv-empty .apv-empty__title{font-size:15px;font-weight:700;color:var(--apv-muted);margin-bottom:6px;}

/* (상세/제출의 자체 헤더 .apv-head 는 제거됨 — 공통 헤더의 뒤로가기를 쓴다) */

/* ==========================================================================
   목록 (list)
   ========================================================================== */
/* 상태 탭 — 다른 게시판 목록과 좌우 정렬(16px)을 맞춘다. 가볍고 절제된 언더라인 탭. */
.apv-tabs{
    display:flex;gap:20px;
    padding:8px 16px 0;
    margin-bottom:2px;
    /* 하단 구분선은 border 가 아니라 inset box-shadow 로 그린다(레이아웃에 두께가 잡히지 않음).
       예전 조합(컨테이너 border-bottom + 버튼 margin-bottom:-1px)은 이 요소가 스크롤 컨테이너라
       scrollHeight(52) > clientHeight(51) 를 만들어, 내용이 넘치지도 않는데 세로 스크롤이 생겼다. */
    box-shadow:inset 0 -1px 0 var(--apv-rule-2);
    overflow-x:auto;
    /* overflow-x 를 지정하면 반대축의 visible 이 auto 로 계산된다(CSS overflow 스펙).
       세로로는 어떤 경우에도 스크롤되지 않도록 명시적으로 잠근다. */
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
}
.apv-tabs__btn{
    flex:0 0 auto;
    background:none;border:0;cursor:pointer;
    padding:9px 0 12px;
    font-size:14px;font-weight:600;color:var(--apv-muted);
    /* 선택 언더라인(2px)이 컨테이너 하단 구분선 위에 겹쳐 그려진다.
       음수 마진으로 끌어올리지 않는다 — 위 주석의 1px 세로 스크롤 원인이었다. */
    border-bottom:2px solid transparent;
    min-height:44px;
    white-space:nowrap;
}
.apv-tabs__btn .apv-tabs__n{
    font-size:12px;color:var(--apv-faint);margin-left:4px;font-variant-numeric:tabular-nums;
}
.apv-tabs__btn[aria-selected="true"]{color:var(--apv-ink);border-bottom-color:var(--apv-accent);}
.apv-tabs__btn[aria-selected="true"] .apv-tabs__n{color:var(--apv-accent);}

/* 목록 카드는 뷰 게시판(.community-gallery--view .view-card) 마크업을 그대로 재사용한다.
   → 카드 여백·아바타·본문 5줄 클램프·더보기가 뷰 게시판과 픽셀 동일. 결재 고유부만 아래에 둔다. */

/* 카드 제목 (뷰 게시판에는 없는 결재 고유 요소) */
.apv-card__title{
    font-size:16px;font-weight:bold;color:#191919;line-height:1.4;
    margin-bottom:6px;word-break:break-word;
}

/* 카드 본문 — 뷰 게시판의 5줄 클램프(-webkit-line-clamp)를 해제해 신청 내용을 전부 보여준다.
   결재는 항목 몇 줄이 전부라 접을 필요가 없고, 접으면 목록에서 내용 확인이 안 된다. */
.apv-root .community-gallery--view .view-card .gallery-con{
    display:block;-webkit-line-clamp:none;overflow:visible;text-overflow:clip;
}
.apv-root .community-gallery--view .view-card .btn-text__more{display:none !important;}

/* 카드 본문은 "전체" 탭과 같은 .approval-submission 마크업을 쓴다(스타일은 klubo.css 공용).
   → 두 목록이 같은 클래스를 공유하므로 표 정렬·색·칩이 자동으로 일치한다. */

/* 헤더 우측 진행 단계 — 요청 › 승인 › 진행 › 완료 */
/* 이름/양식명이 길어도 단계 칩을 밀어내지 않도록 한 줄 말줄임 처리 */
.community-gallery--view .view-card__header .byline{
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* 반응형: 기본값은 모바일 최소폭(320px)에서도 4칸이 한 줄에 들어가는 크기.
   폭이 넓어질수록 단계적으로 키운다. 어떤 폭에서도 줄바꿈하지 않는다. */
.apv-steps{
    flex:0 0 auto;display:flex;flex-wrap:nowrap;align-items:center;
    gap:1px;margin-left:6px;
}
.apv-step{
    font-size:10px;line-height:1;padding:4px 5px;
    color:#b3b7c2;background:#f5f6f8;border:1px solid transparent;
    white-space:nowrap;
}
@media (min-width:400px){
    .apv-steps{gap:2px;margin-left:8px;}
    .apv-step{font-size:11px;padding:5px 8px;}
}
@media (min-width:600px){
    .apv-steps{gap:3px;margin-left:12px;}
    .apv-step{font-size:12px;padding:7px 11px;}
}
.apv-step:first-child{border-radius:4px 0 0 4px;}
.apv-step:last-child{border-radius:0 4px 4px 0;}
/* 지나온 단계는 옅게, 현재 단계만 또렷하게 */
.apv-step--done{color:#8d92a3;background:#eef0f4;}
.apv-step--on{font-weight:bold;}
/* 활성(현재) 단계 칩만 지정 원색으로 꽉 채운다. 비활성 칩은 위 회색 그대로 둔다.
   글자색은 네 단계 모두 흰색으로 통일한다(요청). 승인(#f4a736)·진행(#0bd0c1)은
   흰 글자 대비가 2.01:1 / 1.94:1 로 낮으므로, 가독성 보완을 원하면 글자색이 아니라
   --apv-apr-fill / --apv-prog-fill 을 어둡게 내리는 방향으로 조정한다. */
.apv-step--s-req.apv-step--on {background:var(--apv-req-fill); border-color:var(--apv-req-fill); color:#fff;}
.apv-step--s-apr.apv-step--on {background:var(--apv-apr-fill); border-color:var(--apv-apr-fill); color:#fff;}
.apv-step--s-prog.apv-step--on{background:var(--apv-prog-fill);border-color:var(--apv-prog-fill);color:#fff;}
.apv-step--s-fin.apv-step--on {background:var(--apv-done-fill);border-color:var(--apv-done-fill);color:#fff;}
.apv-status-label{
    display:inline-block;vertical-align:middle;
    font-size:11px;font-weight:700;line-height:1.5;
    padding:1px 7px;margin-right:8px;
    border-radius:5px;
    /* .apv-stamp 와 같은 이유로 단축속성을 쓰지 않는다 — border-color 가 currentColor 로
       리셋되면 .apv-s-* 가 정한 테두리색이 무시된다. */
    border-width:1px;border-style:solid;
    white-space:nowrap;
}

/* 더보기 */
.apv-more{
    display:block;width:calc(100% - 32px);
    margin:16px 16px 8px;padding:14px;
    font-size:13.5px;font-weight:600;color:var(--apv-muted);
    background:var(--apv-paper);border:1px solid var(--apv-rule);border-radius:10px;
    cursor:pointer;
}
.apv-more:active{background:var(--apv-wash);}

/* ==========================================================================
   문서 상세 (detail) 공통 문서부 — 결재란/문서정보/양식
   ========================================================================== */
/* 상세 상단/본문은 다른 게시판 글 상세의 표준 클래스
   (.community-detail__top / .community-detail__con)를 그대로 쓴다. 여기서는 결재 고유부만 보정. */
.community-detail__top .byline .apv-status-label{vertical-align:baseline;}

/* 결재란 (도장 그리드) */
/* 승인 / 진행 / 완료 3칸 (기안자는 상단 작성자 영역에 표기되므로 '요청' 칸 없음) */
.apv-gyeol{
    margin-top:16px;
    display:grid;grid-template-columns:repeat(3,1fr);
    border:1px solid #E6E6E6;border-radius:4px;overflow:hidden;
}
.apv-gyeol__col{border-right:1px solid var(--apv-rule-2);text-align:center;min-width:0;}
.apv-gyeol__col:last-child{border-right:0;}
.apv-gyeol__ch{
    font-size:11px;font-weight:700;color:var(--apv-muted);
    padding:6px 2px;background:var(--apv-head-sh);
    border-bottom:1px solid var(--apv-rule-2);letter-spacing:.02em;
}
.apv-gyeol__cell{
    padding:9px 3px 8px;min-height:74px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
}
.apv-stamp{
    font-size:11px;font-weight:800;padding:3px 8px;border-radius:6px;letter-spacing:.02em;
    /* border 단축속성(border:1px solid)을 쓰면 색 자리가 비어 border-color 가 currentColor 로
       리셋된다. 이 규칙이 .apv-s-* 보다 뒤에 있어서 상태별 테두리색이 글자색으로 덮이고,
       도장에만 검은 테두리가 둘려 목록 칩과 달라 보였다. 색은 .apv-s-* 가 정한다. */
    border-width:1px;border-style:solid;
    white-space:nowrap;
}
/* 결재란 + 사유 툴팁 래퍼.
   .apv-gyeol 자체는 overflow:hidden(모서리 둥글리기) 이라 툴팁을 그 안에 두면 잘린다.
   툴팁은 표 밖(래퍼 기준)에 절대배치한다. */
.apv-gyeol__wrap{position:relative;}
/* 도장 + 사유보기('!') 묶음. '!' 는 도장 옆에 붙이지 않고 아래 줄에 단독으로 놓는다
   — 도장 옆에 붙으면 좁은 칸에서 둘이 한 덩어리로 읽혀 버튼인지 구분되지 않는다. */
.apv-gyeol__stamprow{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:100%;}
/* 사유 보기 아이콘 — 앱 표준 .address-info-icon(원 + '!') 구조를 쓰되
   좁은 표 칸에 맞게 크기를 20px → 16px 로 줄이고, 색은 연한 빨강으로 바꾼다.
   (표준 파랑은 "안내"인데 여기 붙는 사유는 반려·중지라 경고 쪽이 맞다)
   글자색은 원색 --apv-rej(#f53c14) 보다 한 단계 어둡게 잡았다 — 옅은 배경 위 11px 글자라
   원색 그대로면 대비가 모자란다. 선택자는 .address-info-icon 과 같은 특정성이라
   로드 순서에 기대지 않도록 부모를 붙여 한 단계 올린다. */
.apv-gyeol__cell .apv-gyeol__why{
    position:relative;flex:0 0 auto;
    width:16px;height:16px;margin-left:0;font-size:11px;
    color:#d0300f;background-color:var(--apv-rej-bg);
    border:1px solid var(--apv-rej-ln);
}
.apv-gyeol__cell .apv-gyeol__why:hover,
.apv-gyeol__cell .apv-gyeol__why:focus-visible{
    color:#fff;background-color:var(--apv-rej);border-color:var(--apv-rej);
}
/* 실제 탭 영역 40x40 — 아이콘 크기는 그대로 두고 히트박스만 넓힌다. */
.apv-gyeol__why:after{content:"";position:absolute;top:-12px;right:-12px;bottom:-12px;left:-12px;}

/* 사유 툴팁 — 앱 표준 .address-info-tooltip 을 결재란 폭에 맞춘다.
   표준값(min-width:280px)을 그대로 두면 360px 화면에서 표보다 넓어져 오른쪽으로 삐져나간다. */
.apv-reason-tooltip{left:0;right:0;min-width:0;max-width:100%;}
/* 툴팁은 어두운 배경(#2e3240)이라 본문 링크색(파랑)은 대비가 모자란다 → 밝은 톤으로. */
.apv-reason-tooltip .tooltip-content a{color:#9ec5ff;text-decoration:underline;word-break:break-all;}
/* 화살표는 사유가 달린 칸(3등분)의 가운데를 가리킨다. 반려=승인칸, 중지=진행칸. */
.apv-reason-tooltip--col1 .tooltip-arrow{left:16.66%;margin-left:-6px;}
.apv-reason-tooltip--col2 .tooltip-arrow{left:50%;margin-left:-6px;}
.apv-gyeol__nm{
    font-size:12px;font-weight:700;color:var(--apv-ink);line-height:1.4;
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* 'MM.DD HH:mm' — 좁은 폭에서도 날짜와 시각이 두 줄로 갈라지지 않게 한 줄 고정 */
.apv-gyeol__dt{font-size:10px;color:var(--apv-faint);font-variant-numeric:tabular-nums;white-space:nowrap;}
.apv-gyeol__cell.apv-pending .apv-gyeol__nm{color:var(--apv-faint);font-weight:600;}
/* 아직 처리되지 않은 칸 — 도장 뱃지 없이 흐린 '대기' 텍스트만 둔다.
   (처리된 칸은 이름·일시가 처리 사실을 말해주므로 뱃지를 렌더하지 않는다. 반려만 예외로 남는다) */
.apv-gyeol__wait{font-size:12px;font-weight:600;color:var(--apv-faint);line-height:1.4;}

/* (문서정보 표 .apv-meta 는 제거됨 — 기안자/기안일/상태는 상단 .community-detail__top 에서 표기) */

/* (중단 안내 배너 .apv-rbanner / .apv-cbanner 는 제거됨 — 반려·중지·취소 사실은
   상단 상태 라벨과 결재란 도장이 이미 말하고 있어 배너가 같은 말을 세 번째로 되풀이했다.
   사유는 결재란의 '!' 툴팁에서 본다) */

/* 섹션 라벨 — 앱 폼 제목(.page-con__title)과 같은 크기/색 */
.apv-sec{
    font-size:16px;font-weight:bold;color:#2D2D2E;
    margin:24px 0 4px;
}

/* 신청 내용 (읽기 렌더)
   괘선 표(회색 라벨열 + 테두리)는 다른 게시판 글 상세와 이질적이라
   "작은 회색 라벨 + 본문 값 + 하단 구분선" 세로 스택으로 읽히게 한다. */
.apv-ftable{margin:0;border:0;border-radius:0;}
/* 라벨 열 + 값 열이 세로로 정렬되는 표 형태.
   (라벨 폭을 고정해야 값 시작점이 줄마다 맞아 표처럼 읽힌다) */
.apv-fr{
    display:grid;grid-template-columns:96px 1fr;gap:8px;
    padding:12px 0;border-bottom:1px solid #f3f3f3;
}
.apv-fr:last-child{border-bottom:0;}
.apv-fr__fk{
    background:none;border:0;padding:0;
    font-size:13px;font-weight:normal;color:#72788d;line-height:22px;word-break:break-word;
}
.apv-fr__fv{
    font-size:15px;color:#222;padding:0;line-height:22px;min-width:0;
    white-space:pre-wrap;word-break:break-word;
}
.apv-empty-val{color:var(--apv-faint);}
/* 금액·숫자 입력은 type=number 다. 스피너 화살표가 뜨면 폼의 다른 입력들과 모양이 달라지고
   좁은 폭에서 글자를 밀어내므로 감춘다(숫자 키패드·브라우저 숫자 검증만 취한다). */
.apv-amount::-webkit-outer-spin-button,
.apv-amount::-webkit-inner-spin-button,
.apv-num::-webkit-outer-spin-button,
.apv-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.apv-amount,
.apv-num{-moz-appearance:textfield;appearance:textfield;}
/* 신청 내용에 적힌 URL 자동 링크.
   전역 규칙이 a{color:inherit;text-decoration:none} 이라 칠하지 않으면 본문과 구별되지 않는다.
   긴 URL 이 칸을 밀어내지 않게 break-all 을 함께 준다. */
.apv-fr__fv a{color:var(--apv-accent);text-decoration:underline;word-break:break-all;}
.apv-fr__fv a:hover{color:var(--apv-accent-2);}
@media (max-width:380px){
    .apv-fr{grid-template-columns:84px 1fr;gap:6px;}
}
/* 안내문은 라벨이 없는 전폭 블록 — 위 2열 격자를 1열로 되돌린다(안 하면 라벨 열 폭에 갇혀 찌그러진다) */
.apv-fr.apv-note{grid-template-columns:1fr;padding:0;border-bottom:0;margin:14px 0;}
.apv-fr.apv-note .apv-fr__fk{display:none;}
.apv-fr.apv-note .apv-fr__fv{
    background:var(--apv-note-bg,var(--apv-wash));color:var(--apv-note-tx,var(--apv-ink-2));
    border:1px solid var(--apv-note-ln,transparent);
    font-size:14px;line-height:1.6;padding:12px 14px;border-radius:4px;
}

/* ---------- 안내문(section) 색상 ----------
   운영자가 양식 빌더에서 고른 색(field.color)이 .apv-note--{color} 로 붙는다.
   토큰만 갈아끼우고 실제 적용은 위(상세)·아래(작성폼) 규칙이 var() 폴백으로 공유한다.
   → 색 미지정(기존 데이터)은 토큰이 없어 기존 회색 톤 그대로 보인다.
   색값은 양식 빌더 칩(approvalFormBuilder.css .approval-form__color--*)과 동일하게 유지한다. */
.apv-note--gray  {--apv-note-bg:#f5f5f8;--apv-note-tx:#3a3a45;--apv-note-ln:#E6E6E6;}
.apv-note--blue  {--apv-note-bg:#F6F9FF;--apv-note-tx:#2a5fd4;--apv-note-ln:#D6E4FF;}
.apv-note--purple{--apv-note-bg:#F6F2FF;--apv-note-tx:#6d28d9;--apv-note-ln:#E2D8FA;}
.apv-note--green {--apv-note-bg:#EDF9F2;--apv-note-tx:#1a7f4b;--apv-note-ln:#C7E9D6;}
.apv-note--orange{--apv-note-bg:#FEF4E4;--apv-note-tx:#8f5d00;--apv-note-ln:#F8DDB0;}
.apv-note--red   {--apv-note-bg:#FDECEA;--apv-note-tx:#c0392b;--apv-note-ln:#F7C9C3;}
/* 안내문 첨부 이미지(최대 3장) — 상세(.apv-fr.apv-note)·작성폼(.apv-note-fv) 공용.
   안내 문구 "위"에 전폭 블록으로 붙고, 원본 비율을 유지한다(잘라내지 않는다).
   좁은 폭에서 밀려나지 않도록 max-width:100%, 세로로 길어져도 화면을 먹지 않게 상한을 둔다.
   부모가 white-space:pre-wrap 이므로 이 블록 안에서는 normal 로 되돌린다
   (마크업 개행이 캐러셀 안 빈 줄로 새는 것 방지). */
.apv-note-imgs{margin:0 0 10px;white-space:normal;}
.apv-note-img img{
    display:block;width:auto;max-width:100%;max-height:420px;margin:0 auto;
    border-radius:4px;border:1px solid rgba(0,0,0,.06);cursor:pointer;
}

/* 2~3장: 좌우 스와이프 캐러셀. autoHeight 라 슬라이드 높이는 이미지가 정한다. */
.apv-note-sw{width:100%;overflow:hidden;}
.apv-note-sw .swiper-slide{display:block;height:auto;}
/* 페이지네이션은 캐러셀 밖 별도 줄(정적 흐름). 사진 위에 겹치지 않아 밝은 사진에서도 보이고
   세로로 긴 사진의 아랫부분을 가리지 않는다. 색은 모임 배너(.detail-banner)와 같은 규칙. */
.apv-note-sw__pg{margin-top:6px;text-align:center;line-height:0;}
.apv-note-sw__pg .swiper-pagination-bullet{
    display:inline-block;width:6px;height:6px;margin:0 3px;border-radius:50%;
    background:#c9ccd6;opacity:1;cursor:pointer;
}
.apv-note-sw__pg .swiper-pagination-bullet-active{background:#3677f6;}
/* Swiper 미로드/초기화 실패 폴백 — 가로 flex 로 찌그러지지 않게 세로로 나열 */
.apv-note-sw--nosw .swiper-wrapper{display:block;}
.apv-note-sw--nosw .swiper-slide + .swiper-slide{margin-top:8px;}
.apv-note-sw--nosw + .apv-note-sw__pg{display:none;}
.apv-tags{display:flex;flex-wrap:wrap;gap:5px;}
.apv-tag{
    font-size:12px;font-weight:600;padding:3px 9px;border-radius:6px;
    background:var(--apv-accent-wash);color:var(--apv-accent-2);border:1px solid var(--apv-accent-ln);
}
.apv-tag.apv-off{background:var(--apv-wash);color:var(--apv-faint);border-color:var(--apv-rule-2);font-weight:500;}
.apv-money{font-weight:700;font-variant-numeric:tabular-nums;}
.apv-money .apv-kr{font-size:12px;color:var(--apv-faint);font-weight:600;margin-left:6px;}
/* (파일명 링크였던 .apv-attach 는 제거됨 — 첨부는 이미지뿐이라 상세에서도
   글쓰기·다른 게시판과 같은 .club-img__list.review 썸네일 그리드로 보여준다) */

/* 첨부 썸네일 그리드(글쓰기 미리보기 · 상세 보기 공용)
   .club-img__list.review 는 float + `.club-img__item + .club-img__item{margin-left:12px}` 로 배치되는데,
   그 인접 선택자는 줄이 바뀐 첫 칸에도 걸려 두 번째 줄이 왼쪽으로 12px 밀린다.
   다른 게시판은 이미지 상한이 5개라 줄바꿈이 없어 드러나지 않지만 결재는 10개까지라 실제로 생긴다.
   전역 규칙은 그대로 두고 결재 그리드에서만 flex 로 정렬한다(칸 너비 계산식은 gap 12px 과 동일). */
.js-apv-preview.club-img__list,
.js-apv-attach.club-img__list{display:flex;flex-wrap:wrap;gap:12px;}
.js-apv-preview .club-img__item,
.js-apv-attach .club-img__item{float:none;margin-left:0;margin-bottom:0;}

/* 액션바 — 버튼은 앱 표준 .members__apply(.red).
   동작마다 되돌리기 난이도가 달라서 시각 무게를 위계대로 나눈다.
     주 동작(승인/진행/완료) = solid 1개  ·  반려 = 연한 아웃라인  ·  요청 취소 = 텍스트 버튼
   (예전에는 셋 다 같은 크기의 solid pill + 상단 8px 회색 밴드 + 안내문구라 영역이 산만했다) */
.apv-actionbar{
    margin:32px -16px 0;padding:20px 16px 4px;
    border-top:1px solid var(--apv-rule-2);
    display:flex;flex-direction:column;gap:8px;
}
.apv-actionbar__row{display:flex;gap:8px;}
.apv-actionbar__row .members__apply{flex:1 1 0;width:auto;}
/* 반려 — 버튼 단계에서는 위험색(빨강)을 쓰지 않는다.
   빨강은 누른 뒤 뜨는 반려 사유 시트의 확정 버튼(.apv-bt--rej-solid)에서만 등장시켜,
   문서 하단은 파랑 하나로 정리하고 경고는 되돌릴 수 없는 순간에만 준다.
   (앱에 회색 아웃라인 표준 변형이 없어 결재 액션바 안으로 스코핑한 모디파이어를 둔다) */
.apv-actionbar__row .members__apply.apv-bt-reject{
    background:var(--apv-paper);border-color:var(--apv-rule);color:var(--apv-done);
    font-weight:normal;
}
.apv-actionbar__row .members__apply.apv-bt-reject:active{background:var(--apv-wash);}
/* 요청 취소는 되돌릴 수 없는 파괴적 동작 → 버튼 무게를 빼고 텍스트로 낮춘다(터치 타깃 44px 확보) */
.apv-actionbar__cancel{
    align-self:center;min-height:44px;padding:0 16px;
    display:inline-flex;align-items:center;justify-content:center;
    background:none;border:0;font-family:inherit;font-size:13px;color:var(--apv-muted);
    text-decoration:underline;text-underline-offset:3px;cursor:pointer;
}
.apv-actionbar__cancel:active{color:var(--apv-ink);}
/* (결재 전용 버튼 .apv-bt* 는 제거됨 — 사유 시트도 앱 표준 .members__apply(.half/.gray/.red)를 쓴다) */

/* 상세 하단 댓글 섹션(공용 comment.php) 래퍼 — root 밖에 서버렌더되므로 별도 스코프 */
.apv-view-comments{
    margin-top:22px;
    border-top:8px solid #f5f5f8;
    padding-top:8px;
}

/* ==========================================================================
   제출 폼 (write/submit)
   - 다른 게시판 글쓰기(skin/default/write.php)와 같은 앱 표준 폼 언어를 쓴다.
     .my-sub__wrap > .join-club__input(좌우 16px) / .page-con__title / .input-text__wrap .input /
     .club-introduction__box / .input-selecte__wrap / 하단 .bottom-btn__wrap + .members__apply
   - 여기서는 결재 고유 요소(필수 표시·선택칩·금액·첨부)의 보정만 담당한다.
   ========================================================================== */
.apv-root .page-con__title strong{font-weight:bold;}
.apv-rq{color:var(--apv-rej);margin-left:3px;}

/* 안내문/구분 필드 */
.apv-note-row{margin-top:24px;}
.apv-note-fv{
    background:var(--apv-note-bg,var(--apv-wash));color:var(--apv-note-tx,var(--apv-ink-2));
    border:1px solid var(--apv-note-ln,transparent);
    font-size:13px;line-height:1.6;padding:12px 14px;border-radius:4px;
    white-space:pre-wrap;word-break:break-word;
}

/* 여러 줄 입력: 글 내용 textarea(260px)는 너무 크므로 필드용 높이로 */
textarea.apv-ta{height:120px;min-height:120px;resize:vertical;}

/* 금액: 우측 정렬(인라인 style 금지 규칙에 따라 클래스로) */
.apv-amount{text-align:right;}

/* 첨부: 다른 게시판의 "이미지 추가" 보조 버튼과 동일 */
.apv-file-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;}
.apv-filebtn{display:block;box-sizing:border-box;cursor:pointer;}

.apv-inp{
    width:100%;font-family:inherit;font-size:13.5px;color:var(--apv-ink);
    background:var(--apv-paper);border:1px solid var(--apv-rule);border-radius:8px;padding:11px;
    min-height:44px;
}
.apv-inp:focus{outline:2px solid var(--apv-accent-wash);border-color:var(--apv-accent);}
.apv-inp::placeholder{color:var(--apv-faint);}
textarea.apv-inp{resize:vertical;min-height:66px;}
.apv-inp[readonly]{background:var(--apv-paper);cursor:pointer;}

.apv-dt-i .apv-dt-ic{
    position:absolute;right:11px;top:50%;transform:translateY(-50%);
    color:var(--apv-faint);pointer-events:none;font-size:15px;
}
.apv-dt-i .input{padding-right:36px;}

.apv-checks{display:flex;flex-wrap:wrap;gap:8px;}
.apv-ck{
    display:inline-flex;align-items:center;gap:7px;font-size:14px;
    padding:9px 12px;border-radius:4px;border:1px solid #d0d3de;
    background:var(--apv-paper);color:var(--apv-ink-2);cursor:pointer;min-height:44px;
}
/* 선택 표시(점/체크)는 글자가 아니라 CSS 로 그린다.
   ●/✓ 글리프를 넣으면 폰트 메트릭(글자 박스에 어센더·디센더 여백이 포함) 때문에
   place-items:center 로도 시각적 중앙에 오지 않는다 — ● 는 눈에 띄게 위로 뜬다.
   ::after 를 절대배치로 중앙에 놓으면 폰트와 무관하게 항상 정중앙이다. */
.apv-ck__mk{
    width:16px;height:16px;border-radius:4px;border:1.5px solid var(--apv-rule);
    display:block;position:relative;flex:0 0 auto;
}
.apv-ck.apv-on{border-color:var(--apv-accent);background:var(--apv-accent-wash);color:var(--apv-accent-2);font-weight:600;}
.apv-ck.apv-on .apv-ck__mk{background:var(--apv-accent);border-color:var(--apv-accent);}
.apv-ck--radio .apv-ck__mk{border-radius:50%;}
/* 라디오: 가운데 흰 점 */
.apv-ck--radio.apv-on .apv-ck__mk:after{
    content:"";position:absolute;top:50%;left:50%;
    width:6px;height:6px;margin:-3px 0 0 -3px;
    border-radius:50%;background:#fff;
}
/* 체크박스: 흰 체크(테두리 두 변을 45° 회전). 시각 무게중심이 살짝 아래라 -1px 보정 */
.apv-ck:not(.apv-ck--radio).apv-on .apv-ck__mk:after{
    content:"";position:absolute;top:50%;left:50%;
    width:4px;height:8px;margin:-5px 0 0 -2px;
    border:solid #fff;border-width:0 2px 2px 0;
    transform:rotate(45deg);
}

.apv-krh{margin-top:6px;font-size:12px;color:var(--apv-faint);}

/* (파일명만 나열하던 .apv-filelist 는 제거됨 — 첨부 미리보기는 다른 게시판 글쓰기와 같은
   .club-img__list.review 썸네일 그리드(klubo.css 전역)를 그대로 쓴다.
    썸네일 크기·정사각 비율·삭제버튼·"이미지 추가" 버튼 간격이 모두 전역 규칙에서 나오므로
    여기에는 결재 전용 보정 규칙을 두지 않는다 — 두면 다른 게시판과 어긋난다) */

/* 제출 버튼은 다른 게시판과 동일하게 하단 고정 .bottom-btn__wrap + .members__apply(파랑) 사용.
   #boardContainer 에 margin-bottom:180px 이 있어 본문이 가려지지 않는다. */

/* ==========================================================================
   반려 사유 입력 시트 (바텀시트)
   ========================================================================== */
/* 사유 입력 바텀시트 — 마크업·딤·z-index 를 앱 표준(.layer-bottm--fixed + #klubo-dimm)에 맡긴다.
   결재 전용 .apv-sheet* 규칙은 제거했다. 이 시트는 .apv-root 밖(body/.full-screen)에 붙으므로
   --apv-* 토큰을 참조하는 스타일을 여기에 두면 var() 가 무효가 되어 배경이 사라진다.
   본문 여백만 표준 레이어 톤에 맞춰 최소 보정한다. */
#apvReasonSheet .club-introduction__box{min-height:120px;resize:vertical;}
/* .members__apply.half 는 float 라 부모에 clear 가 필요하다(.bottom-btn__wrap 계열은 position:fixed 라 못 씀) */
#apvReasonSheet .apv-reason__btns{margin-top:16px;}
#apvReasonSheet .apv-reason__btns:after{content:"";display:block;clear:both;}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width:380px){
    .apv-gyeol__ch{font-size:10.5px;}
    .apv-gyeol__cell{min-height:68px;}
    /* 단계 칩 크기는 clamp() 가 담당하므로 여기서 따로 줄이지 않는다. */
}