CreatorLMS Editor

<style>
  .kv-list{ display:flex; flex-direction:column; gap:.65rem; }
  .kv-row{ display:flex; align-items:flex-start; gap:12px; }
  .kv-label{ width:160px; font-weight:600; color:#374151; white-space:nowrap; padding-top:6px; }
  .kv-sep{ width:1px; background:rgba(0,0,0,.08); margin-top:4px; margin-bottom:4px; }
  .kv-value{ flex:1; min-width:0; padding-top:0; }
  .kv-value, .kv-value *{ text-align:left; }

.inline-actions{ display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; }
  .radio-row{ display:flex; flex-wrap:wrap; gap:.75rem 1.2rem; padding-top:4px; }
  .radio-row .form-check{ margin:0; }

.readonly-like{
    background:#f8f9fa; border:1px solid rgba(0,0,0,.12);
    border-radius:.5rem; padding:.5rem .75rem; min-height:38px;
    display:flex; align-items:center;
  }

.panel{
    border:1px solid rgba(0,0,0,.08);
    border-radius:.75rem;
    background:#fff;
    padding:12px;
    margin-top:10px;
  }
  .help-muted{ color:#6b7280; font-size:.85rem; }

@media (max-width: 576px){
    .kv-label{ width:120px; }
  }
</style>

<div class="d-flex align-items-center justify-content-between mb-2">
  <div>
    <h1 class="h4 mb-1">환불 등록

</h1>
    <div class="text-muted">관리자가 환불 건을 수동으로 등록합니다.</div>
  </div>
</div>

<div class="kv-row">
  <div class="kv-label"><span class="text-danger me-1">*</span> 계정 ID</div><div class="kv-sep"></div>
  <div class="kv-value">
    example10
  </div>
</div>

<div class="kv-row">
  <div class="kv-label"><span class="text-danger me-1">*</span> 이메일</div><div class="kv-sep"></div>
  <div class="kv-value">
    user@example.com
  </div>
</div>

<div class="kv-row">
  <div class="kv-label"><span class="text-danger me-1">*</span> PG사</div><div class="kv-sep"></div>
  <div class="kv-value">
    토스페이먼츠
  </div>
</div>

<div class="kv-row">
            <div class="kv-label"><span class="text-danger me-1">*</span> 환불액</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="inline-actions">
                <input type="text" class="form-control" placeholder="예) ₩19,000 또는 $10" maxlength="20" style="max-width:260px;">
                <button type="button" class="btn btn-outline-secondary" onclick="alert('이 버튼은 결제액 전액을 자동 입력합니다.');">전액</button>
                <button type="button" class="btn btn-outline-secondary" onclick="alert('이 버튼은 부분 환불 계산 팝업을 띄웁니다.');">부분환불</button>
              </div>
              <div class="form-text">* 부분환불 샘플을 지원합니다.</div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label"><span class="text-danger me-1">*</span> 환불사유</div><div class="kv-sep"></div>
            <div class="kv-value">
              <select class="form-select" style="max-width:260px;">
                <option value="change">단순변심</option>
                <option value="dupe">중복결제</option>
                <option value="bad">서비스불만</option>
                <option value="etc">기타</option>
              </select>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label"><span class="text-danger me-1">*</span> 환불수단</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="radio-row">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="refund_method" id="rm_origin" checked
                    onchange="document.getElementById('bankPanel').style.display='none';">
                  <label class="form-check-label" for="rm_origin">원결제수단</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="refund_method" id="rm_point"
                    onchange="document.getElementById('bankPanel').style.display='none';">
                  <label class="form-check-label" for="rm_point">포인트</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="refund_method" id="rm_bank"
                    onchange="document.getElementById('bankPanel').style.display='block';">
                  <label class="form-check-label" for="rm_bank">계좌환불</label>
                </div>
              </div>

<div id="bankPanel" class="panel" style="display:none;">
                <div class="fw-semibold mb-2">계좌 정보</div>
                <div class="kv-list">
                  <div class="kv-row">
                    <div class="kv-label">은행</div><div class="kv-sep"></div>
                    <div class="kv-value">
                      <input type="text" class="form-control" placeholder="예) 국민은행" style="max-width:260px;">
                    </div>
                  </div>
                  <div class="kv-row">
                    <div class="kv-label">계좌번호</div><div class="kv-sep"></div>
                    <div class="kv-value">
                      <input type="text" class="form-control" placeholder="예) 123-456-789012" style="max-width:320px;">
                    </div>
                  </div>
                  <div class="kv-row">
                    <div class="kv-label">예금주</div><div class="kv-sep"></div>
                    <div class="kv-value">
                      <input type="text" class="form-control" placeholder="예) 김민수" style="max-width:260px;">
                    </div>
                  </div>
                </div>
                <div class="help-muted mt-2">* 계좌환불 선택 시에만 입력합니다.</div>
              </div>
            </div>
          </div>

<div class="kv-row">
            <div class="kv-label">환불상태</div><div class="kv-sep"></div>
            <div class="kv-value">
              <div class="radio-row">
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="refund_status" id="rs_req" checked>
                  <label class="form-check-label" for="rs_req">요청</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="refund_status" id="rs_ing">
                  <label class="form-check-label" for="rs_ing">처리중</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="refund_status" id="rs_done">
                  <label class="form-check-label" for="rs_done">완료</label>
                </div>
                <div class="form-check">
                  <input class="form-check-input" type="radio" name="refund_status" id="rs_reject">
                  <label class="form-check-label" for="rs_reject">거절</label>
                </div>
              </div>
              <div class="form-text">* 실제 완료시각은 완료 처리 후 기록됩니다.</div>
            </div>
          </div>

</div>

<div class="form-text mt-2">* “환불 등록”을 클릭하면 리스트 혹은 상세화면으로 이동(예정)</div>
      </div>
    </div>
  </div>
</div>

간단 소스 편집기