/* 대여 반납 · 보증금 환급 — refund-form.js 와 짝이다.
   ① 반납 구역(.rf) — 주문 상세(.odsec · .oblk) 안의 동급 구역. ② 요청서(.rfd) — 공통 '적는 창'(auth.css .dialog.wide)에 없는 것만 더한다.
   값은 chrome.css 토큰을 쓴다. */

/* ── ① 반납 구역 ──────────────────────────────────────────────────── */
.rf{font-size:14px;line-height:1.6;color:var(--t02);word-break:keep-all}
.rf[hidden]{display:none}

/* 구역 머리 — 다른 구역(.odhd · .oblk > h3)과 같은 꼴에 밑줄 */
.rf-hd{margin:0 0 var(--s6)}
.rf-h{margin:0;padding-bottom:var(--s2);border-bottom:1px solid var(--t01);
      font-size:16px;font-weight:700;line-height:1.5;color:var(--t01);letter-spacing:-.01em}
.rf-intro{margin:var(--s3) 0 0;font-size:14px;color:var(--t03)}

/* 단계 — 점 셋을 선으로 잇는다. 주문 상태 그림(.flow)보다 한 단 작게(점 24 · 이름 13), 좁은 화면도 가로 그대로 */
.rf-steps{list-style:none;margin:0 0 var(--s6);padding:0;
          display:grid;grid-template-columns:repeat(3,1fr)}
.rf-steps li{position:relative;text-align:center;min-width:0;padding:0 var(--s1)}
/* 이음선 — 점 한가운데 높이, 좌우 18px 비움 */
.rf-steps li + li::before{content:"";position:absolute;top:11px;left:-50%;right:50%;
      margin:0 18px;height:2px;border-radius:2px;background:var(--bd-l)}
.rf-steps li[data-state="done"]::before{background:var(--g500)}
.rf-steps .dot{position:relative;display:grid;place-items:center;margin:0 auto;
      width:24px;height:24px;border-radius:999px;box-sizing:border-box;
      border:2px solid var(--bd);background:#fff;color:var(--t04);
      font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.rf-steps .dot svg{display:block;width:12px;height:12px}
.rf-steps li[data-state="done"] .dot{background:var(--g500);border-color:var(--g500);color:#fff}
/* 지금 단계 — 고리 + 초록 굵은 이름(색만으로 가르지 않는다) */
.rf-steps li[aria-current="step"] .dot{box-shadow:0 0 0 4px var(--g50)}
.rf-steps .lb{display:block;margin-top:var(--s2);font-size:13px;font-weight:500;color:var(--t03)}
.rf-steps li[data-state="done"] .lb{color:var(--t01)}
.rf-steps li[aria-current="step"] .lb{color:var(--g700);font-weight:700}
/* 화면 읽기 프로그램에만 남는 글 */
.rf-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
       overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 지금 상태 — 제목과 다음 일 두 줄. 알림 상자로 만들지 않는다. */
.rf-state{margin:0 0 var(--s6)}
.rf-done{margin:0;font-size:16px;font-weight:700;line-height:1.5;color:var(--t01);letter-spacing:-.01em}
.rf-lead{margin:var(--s1) 0 0;color:var(--t02)}

/* 반납 신청 정보 — 줄 사이 12, 이름 칸 120(좁은 화면 88)으로 값의 왼쪽 선을 맞춘다 */
.rf-grp{margin:0}
.rf-gh{margin:0 0 var(--s3);font-size:14px;font-weight:700;color:var(--t01)}
.rf-dl{margin:0;display:grid;gap:var(--s3)}
.rf-dl > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s4)}
.rf-dl dt{color:var(--t03)}
.rf-dl dd{margin:0;color:var(--t01);overflow-wrap:anywhere}

/* 돌려받을 돈 — 회색 면(--n50) 하나에 금액 · 딸린 줄 · 단서. 단계마다 이름만 바뀐다(값은 서버 그대로).
   금액 18(좁은 화면 17) — 주문 합계(20)보다 한 단 아래. */
.rf-money{margin-top:var(--s6);padding:var(--s4) var(--s5);border-radius:var(--rd12, 12px);
          background:var(--n50)}
.rf-amt{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);flex-wrap:wrap;row-gap:0}
/* 이름은 낱말 가운데서 끊지 않는다 — 모자라면 금액이 다음 줄로 */
.rf-amt .k{font-size:15px;font-weight:600;color:var(--t01);word-break:keep-all}
.rf-amt .v{margin-left:auto}
.rf-amt .v{font-size:18px;font-weight:700;color:var(--t01);font-variant-numeric:tabular-nums;white-space:nowrap}
.rf-sub{margin:var(--s3) 0 0;display:grid;gap:var(--s1)}
.rf-sub > div{display:flex;justify-content:space-between;gap:var(--s4);font-size:13px}
.rf-sub dt{color:var(--t03)}
.rf-sub dd{margin:0;color:var(--t02);text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.rf-note{margin:var(--s2) 0 0;font-size:13px;color:var(--t03)}

/* 신청 전 — 머리 아래 20 · 단계 ↔ 면 20 · 면 ↔ 단추 16 */
.rf-pre .rf-hd{margin-bottom:var(--s5)}
.rf-pre .rf-steps{margin-bottom:var(--s5)}
.rf-pre .rf-state{margin-bottom:0}
.rf-pre .rf-money{margin-top:var(--s5)}
.rf-pre .rf-note{margin-top:var(--s1)}
.rf-pre .rf-act{margin-top:var(--s4)}

/* 할 일 — 오른쪽 끝. 수정은 테두리 단추, 처음 신청만 초록. 면과 사이 16. */
.rf-act{display:flex;align-items:center;justify-content:flex-end;gap:var(--s4);
        margin-top:var(--s4)}
.rf-act:empty{display:none}
/* 요청 뒤 '요청 수정하기' — 보증금 면 바로 아래 12 */
.rf-act.near{margin-top:var(--s3)}
.rf-hint{margin:0 auto 0 0;font-size:13px;color:var(--t03)}
.rf-btn{height:44px;padding:0 var(--s5);font:inherit;font-size:15px;font-weight:700;border-radius:var(--rd8, 8px);
        cursor:pointer;border:1px solid transparent;white-space:nowrap}
.rf-btn.p{background:var(--g500);color:#fff}
.rf-btn.p:hover{background:var(--g600)}
.rf-btn.s{background:#fff;color:var(--t01);border-color:var(--bd)}
.rf-btn.s:hover{border-color:var(--t01)}
.rf-btn:focus-visible{outline:2px solid var(--g600);outline-offset:2px}

/* ── ② 요청서 — 적는 창 ───────────────────────────────────────────── */
/* 스크롤은 공통 규칙(auth.css .dialog-body)에 맡긴다 — 요청서가 <form class="dialog-body"> 다. */
/* 요약 띠 — 주문번호 · 돌려받을 보증금. 회색 면 하나, 금액만 굵게 */
.rfd .rfd-sum{margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border-radius:var(--rd8, 8px);
              background:var(--n50);display:grid;gap:var(--s1)}
.rfd .rfd-sum > div{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);font-size:14px}
.rfd .rfd-sum dt{color:var(--t03)}
.rfd .rfd-sum dd{margin:0;color:var(--t01);text-align:right;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.rfd .rfd-sum .hi dt{color:var(--t01);font-weight:700}
.rfd .rfd-sum .hi dd{font-size:17px;font-weight:700}

/* 묶음 — 테두리 없는 fieldset. 묶음 사이 24 · 이름 ↔ 첫 칸 12 · 칸 사이 16(공통 24 를 줄인다) */
.rfd .rfd-grp{margin:var(--s6) 0 0;padding:0;border:0;min-width:0}
.rfd .rfd-gh{display:block;padding:0;margin:0 0 var(--s3);font-size:13px;font-weight:700;
             color:var(--t03);letter-spacing:.01em}
.rfd.dialog .dialog-body .rfd-grp .alabel.show{margin-top:var(--s4)}
.rfd.dialog .dialog-body .rfd-grp > .alabel.show:first-of-type{margin-top:0}
.rfd .ahint{margin-top:var(--s2)}
.rfd .rfd-other[hidden]{display:none}
/* 계좌번호 · 예금주 — 한 줄에, 좁으면 아래로 */
.rfd .rfd-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s3);margin-top:var(--s4)}
/* 위 여백은 줄(.rfd-two)이 한 번만 준다 — 좁은 화면에서 두 칸 사이가 벌어지지 않게 */
.rfd.dialog .dialog-body .rfd-two .alabel.show{margin-top:0}
.rfd textarea.ainput{height:auto;min-height:72px;padding:12px 16px;resize:vertical;line-height:1.6}
/* 체크 ↔ 글자 12(좁은 화면 8). 체크 칸은 chrome.css .chk 가 그린다. */
.rfd .rfd-agree{display:flex;gap:var(--s3);align-items:flex-start;margin-top:var(--s6);
                font-size:13px;line-height:1.6;color:var(--t02);word-break:keep-all}
.rfd .rfd-agree input{margin-top:1px;flex:none}
.rfd .amsg{margin-top:var(--s3)}
.rfd .amsg[hidden]{display:none}
/* 빠진 칸 — 그 칸으로 데려가 붉게 표시한다(refund-form.js miss) */
.rfd .sel.bad,.rfd .sel.bad:focus{border-color:#D92D20;box-shadow:0 0 0 3px rgba(217,45,32,.12)}
.rfd .rfd-agree.bad{color:#D92D20}
.rfd .rfd-agree.bad .chk{border-color:#D92D20;box-shadow:0 0 0 3px rgba(217,45,32,.12)}

/* 접수 알림 — 제목 앞 초록 동그라미 체크 하나 */
.rfd .rfd-okhd{align-items:center}
.rfd .rfd-ok{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:999px;
             background:var(--g50);color:var(--g700)}
.rfd .rfd-ok svg{width:18px;height:18px}
.rfd .rfd-okhd .dialog-title{flex:1 1 0}

@media (max-width:640px){
  .rf-dl > div{grid-template-columns:88px minmax(0,1fr);gap:var(--s3)}
  .rf-amt .v{font-size:17px}
  .rf-money{padding:var(--s4)}
  .rf-steps .lb{font-size:13px}
  /* 단추는 한 줄을 다 쓴다. 안내는 그 위로 */
  .rf-act{flex-direction:column;align-items:stretch;gap:var(--s3)}
  .rf-hint{margin:0}
  .rf-btn{width:100%;height:48px}
  .rfd .rfd-two{grid-template-columns:1fr}
  .rfd .rfd-agree{gap:var(--s2)}
}