/* dutch-pay.css - 공개 도구 "스마트 N빵 계산기" 조각(WEB-INF/jsp/homepage/tool/dutchPay.jsp)의 스타일.
   2026.10.14 도구 개편 : 4단계형을 한 화면 목록형(P1-L)으로 다시 짰다. 시안 renewal.css ④ N빵 + 이 도구만의 것.

   뿌리 : <div class="nxt nxt-dutch-pay nxt-normal nxt-light nxt-calc" …>
   걸리는 순서 : tool-common.css(토큰 · 2단 · 패널) → tool-parts.css(공통 부품 · P1-L 뼈대) → 이 파일
                 (tool-calc.css · sols-tool-guide.css 는 걸지 않는다)
   배치 : div.nxt-tabs.nxt-viewtabs(900px 이하의 [입력] / [정산서]) + div.nxt-cols.nxt-p1l[data-view] > section.nxt-panel-in(멤버 → 차수) + section.nxt-panel-out.nxt-sticky(정산표)
          2단 · 고정 · 탭으로 패널 감추기 · 결과 막대는 tool-parts.css 가 한다. 여기 다시 적지 않는다.

   [이 파일에 두는 것] 이 도구만의 것뿐이다. 입력칸 · 전환 단추 · 칩 · 접이식 · 안내 상자 · 행동 줄 · 토스트 · 안내 본문의 모양은 tool-parts.css 가 정한다.
     ① 입력 패널의 묶음(멤버 / 차수)  ② 멤버 추가 줄 · 멤버 꼬리표 · 총무 고르기  ③ 차수 카드
     ④ 정산표(결과 머리 · 옵션 줄 · 멤버별 금액 · 받을 계좌 · 정산서 글)  ⑤ 저장 이미지 카드 안  ⑥ 좁은 화면
   [지운 것] 옛 규칙 전부 : 단계 표시(.step-dots · .step-dot) · 단계 화면(.phase · .step-nav) · .field-row · .tag-add-row · .tag-list · .member-chip ·
     .round-card · .round-head · .attendee-label · .attendee-row · .attendee-chip · .btn-ghost · .radio-card-row · .radio-card · .manual-picker ·
     #receiptCard · .rc-* · .member-total-row · .mt-* · .account-line · .leftover-note · #kakaoText · .result-actions.
     영수증 카드를 html2canvas 로 그대로 찍던 것(바탕 #150f2e)도 없다 - 저장 이미지는 공용 밝은 카드(.nxt-shot)다.
   [규칙] 전부 .nxt-light.nxt-dutch-pay 로 범위를 한정한다. 틀 요소(.bbs-*, body, main)를 건드리지 않는다. 색은 --nxt-* 토큰만 쓴다.
          상태는 속성으로 본다(aria-pressed · hidden). 여닫기는 hidden 하나다. */

/* ============ ① 입력 패널의 묶음 ============ */
/* <div class="nxt-group"><div class="nxt-group-head"><h3 class="nxt-group-title">멤버<span>3명</span></h3></div> … </div>
   묶음 사이에 가는 선. 마지막 묶음에는 없다 */
.nxt-light.nxt-dutch-pay .nxt-group{min-width:0;margin:0 0 20px;padding:0 0 20px;border-bottom:1px solid var(--nxt-line)}
.nxt-light.nxt-dutch-pay .nxt-group:last-child{margin-bottom:0;padding-bottom:0;border-bottom:0}
.nxt-light.nxt-dutch-pay .nxt-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;margin:0 0 8px}
.nxt-light.nxt-dutch-pay .nxt-group-title{margin:0;padding:0;border:0;font-size:15px;font-weight:700;line-height:1.5;color:var(--nxt-text)}
.nxt-light.nxt-dutch-pay .nxt-group-title>span{margin-left:4px;font-weight:400;color:var(--nxt-text-3)}

/* ============ ② 멤버 ============ */
/* 추가 줄 : <div class="nxt-field nxt-add-field"><div class="nxt-add-row"><div class="nxt-input"><input …></div><button class="nxt-btn">추가</button></div>
             <p class="nxt-error" hidden></p><p class="nxt-hint">…</p></div>
   오류 글(이미 있는 이름 · 30명 넘음)이 줄 아래에 붙도록 줄을 .nxt-field 로 감쌌다(NxTool.fieldError 는 .nxt-field 안에서 오류 글을 찾는다) */
/* 줄의 모양(.nxt-add-row)은 tool-parts.css ③-2 다. 이름은 금액이 아닌 글자 칸이라 조각에서 감싸개에 nxt-input-text(보통 굵기)를 달았다 */
.nxt-light.nxt-dutch-pay .nxt-add-field{margin:0}
/* 멤버 꼬리표 : <li class="nxt-tag"><span class="nxt-tag-name">김민지</span><span class="nxt-tag-lead"><i class="bi bi-star-fill" aria-hidden="true"></i>총무</span>
                 <button type="button" class="nxt-tag-del" aria-label="김민지 빼기"><i class="bi bi-x-lg" aria-hidden="true"></i></button></li>
   총무 표시 = 별 + "총무" 글자(색 하나에 기대지 않는다). 흰 바탕 위 주색-dk 8.4:1 */
.nxt-light.nxt-dutch-pay .nxt-tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0;padding:0;list-style:none}
.nxt-light.nxt-dutch-pay .nxt-tag{display:inline-flex;align-items:center;max-width:100%;min-height:44px;padding:0 0 0 14px;border:1px solid var(--nxt-line-dk);border-radius:999px;background:var(--nxt-panel);font-size:15px;font-weight:700;color:var(--nxt-text)}
.nxt-light.nxt-dutch-pay .nxt-tag-name{min-width:0}
.nxt-light.nxt-dutch-pay .nxt-tag-lead{flex:none;display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-size:13px;font-weight:700;white-space:nowrap;color:var(--nxt-primary-dk)}
.nxt-light.nxt-dutch-pay .nxt-tag-del{flex:none;display:grid;place-items:center;width:40px;height:42px;margin:0;padding:0;border:0;border-radius:999px;background:none;color:var(--nxt-text-3);font-size:13px;line-height:1;cursor:pointer}
.nxt-light.nxt-dutch-pay .nxt-tag-del:hover{color:var(--nxt-danger)}
.nxt-light.nxt-dutch-pay .nxt-tag-del:focus-visible{outline-offset:-4px}
/* 총무 고르기(선택) : 꼬리표 아래 */
.nxt-light.nxt-dutch-pay .nxt-lead-field{margin:12px 0 0}

/* ============ ③ 차수 카드 ============ */
/* dutch-pay.js 가 만든다 :
   <div class="nxt-round"><div class="nxt-round-head"><h4 class="nxt-round-title">1차</h4><button class="nxt-btn nxt-btn-ghost">1차 지우기</button></div>
     <div class="nxt-field"> 결제 금액 </div>
     <span class="nxt-label">참석자 …</span><div class="nxt-chips" role="group"><button class="nxt-chip" aria-pressed="true">김민지</button>…</div>
     <p class="nxt-error" hidden>참석자를 1명 이상 골라 주세요.</p></div>
   참석자 칩의 고름 / 뺌 모양은 tool-parts.css 의 .nxt-chip[aria-pressed] 다 */
.nxt-light.nxt-dutch-pay .nxt-round{min-width:0;margin:0 0 12px;padding:14px;border:1px solid var(--nxt-line-dk);border-radius:12px}
.nxt-light.nxt-dutch-pay .nxt-round-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:32px;margin:0 0 8px}
.nxt-light.nxt-dutch-pay .nxt-round-title{margin:0;padding:0;border:0;font-size:16px;font-weight:700;line-height:1.5;color:var(--nxt-text)}
.nxt-light.nxt-dutch-pay .nxt-round-head>.nxt-btn{margin:-6px -8px -6px 0}       /* 지우기 단추(44px)가 머리 줄을 키우지 않게 */
.nxt-light.nxt-dutch-pay .nxt-round .nxt-field{margin-bottom:12px}
.nxt-light.nxt-dutch-pay .nxt-round .nxt-chips{margin-top:0}
.nxt-light.nxt-dutch-pay .nxt-round>.nxt-hint{margin:0}
.nxt-light.nxt-dutch-pay .nxt-round>.nxt-error{margin-top:8px}
.nxt-light.nxt-dutch-pay .nxt-add-round{border-style:dashed}
.nxt-light.nxt-dutch-pay .nxt-add-round+.nxt-hint{margin-top:8px}

/* ============ ④ 정산표 ============ */
/* 결과 머리 : <dl class="nxt-settle-sum"><div><dt>총</dt><dd>150,000원</dd></div><div><dt>걷을 돈</dt>…</div><div><dt>잔돈</dt>…</div></dl> */
.nxt-light.nxt-dutch-pay .nxt-settle-sum{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:12px 14px;border-radius:10px;background:var(--nxt-tint);font-size:14px;color:var(--nxt-text-2)}
.nxt-light.nxt-dutch-pay .nxt-settle-sum>div{display:flex;align-items:baseline;gap:6px}
.nxt-light.nxt-dutch-pay .nxt-settle-sum dt{margin:0}
.nxt-light.nxt-dutch-pay .nxt-settle-sum dd{margin:0;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--nxt-text)}
/* 옵션 줄 : 절사 단위 · 잔돈 처리(· 직접 지정한 멤버). 정산표 위 */
.nxt-light.nxt-dutch-pay .nxt-settle-opts{display:grid;gap:10px;min-width:0}
.nxt-light.nxt-dutch-pay .nxt-settle-opts .nxt-seg{margin:0}
.nxt-light.nxt-dutch-pay .nxt-settle-pick{margin:0}
/* 주 결과 = 멤버별 금액(22px)
   <ul class="nxt-settle"><li><span class="nxt-settle-who"><span class="nxt-settle-name">김민지<span class="nxt-tag-lead">…총무</span></span>
     <span class="nxt-settle-sub">1차 · 2차 참석</span></span><strong class="nxt-settle-amt">58,300원</strong></li>…</ul>   흰 바탕 위 주색 6.2:1 */
.nxt-light.nxt-dutch-pay .nxt-settle{margin:0;padding:0;border:1px solid var(--nxt-line);border-radius:10px;list-style:none}
.nxt-light.nxt-dutch-pay .nxt-settle>li{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:8px 14px;border-top:1px solid var(--nxt-line)}
.nxt-light.nxt-dutch-pay .nxt-settle>li:first-child{border-top:0}
.nxt-light.nxt-dutch-pay .nxt-settle-who{display:grid;gap:2px;min-width:0}
.nxt-light.nxt-dutch-pay .nxt-settle-name{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 8px;font-size:16px;font-weight:700;color:var(--nxt-text)}
.nxt-light.nxt-dutch-pay .nxt-settle-name>.nxt-tag-lead{margin-left:0}
.nxt-light.nxt-dutch-pay .nxt-settle-sub{font-size:13px;color:var(--nxt-text-3)}
.nxt-light.nxt-dutch-pay .nxt-settle-amt{flex:none;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--nxt-primary)}
/* 받을 계좌 넣기(선택) : 결과 영역의 사이 간격(12px)을 그대로 쓴다 - 접이식의 아래 여백을 뺀다.
   은행 · 계좌는 글자 칸이라 조각에서 감싸개에 nxt-input-text(보통 굵기)를 달았다 */
.nxt-light.nxt-dutch-pay .nxt-result>.nxt-more{margin:0}
/* 은행 · 계좌번호 : 칸이 200px 보다 좁아지면(좁은 화면, 1000px 안팎의 2단) 두 줄로 쌓는다 - 계좌번호 15자리가 잘리지 않게.
   줄바꿈은 tool-parts.css 의 .nxt-field-row-wrap(조각에 달았다)이 하고, 여기는 그 기준 폭만 정한다(기본 150px → 200px) */
.nxt-light.nxt-dutch-pay .nxt-acct .nxt-field-row{--nxt-row-min:200px}
.nxt-light.nxt-dutch-pay .nxt-acct-hint{margin:0 0 12px}
/* 정산서 글 : [결과 복사]가 복사하는 글 그대로 (textarea, readonly) */
.nxt-light.nxt-dutch-pay .nxt-receipt{display:block;width:100%;min-height:168px;margin:0;padding:12px;border:1px solid var(--nxt-field-line);border-radius:var(--nxt-r);background:var(--nxt-soft);color:var(--nxt-text);font:inherit;font-size:14px;line-height:1.7;resize:vertical}

/* ============ ⑤ 저장 이미지 카드 안 ============ */
/* NxTool.renderCard 가 멤버별 금액(ul.nxt-settle)과 잔돈 · 계좌 줄(dl.nxt-rows)을 카드(.nxt-shot, 720px) 안에 옮겨 찍는다. 글자만 조금 키운다 */
.nxt-light.nxt-dutch-pay .nxt-shot .nxt-settle-name{font-size:18px}
.nxt-light.nxt-dutch-pay .nxt-shot .nxt-settle-sub{font-size:14px}
.nxt-light.nxt-dutch-pay .nxt-shot .nxt-settle-amt{font-size:26px}
.nxt-light.nxt-dutch-pay .nxt-shot .nxt-rows dt{flex:none}

/* ============ ⑥ 좁은 화면 ============ */
@media (max-width:900px){
	/* ([정산서 보기]가 탭 줄을 화면에 들일 때의 띄움 - scroll-margin-top - 은 tool-parts.css ② 의 .nxt-viewtabs 에 있다) */
	/* 터치 화면 : 꼬리표의 빼기 단추를 44 × 44 로 */
	.nxt-light.nxt-dutch-pay .nxt-tag{min-height:46px}
	.nxt-light.nxt-dutch-pay .nxt-tag-del{width:44px;height:44px}
}