/* 취소 수수료 정책 패널. 버튼·입력은 fradmin-button / fradmin-input / fradmin-label 을 그대로 쓰고 배치·표만 여기서 정한다. */
.sjpen { color: var(--ink-1, #27364f); font-size: 13px; line-height: 1.6; }
.sjpen[aria-busy="true"] .sjpen-section, .sjpen[aria-busy="true"] .sjpen-table-wrap { opacity: .65; transition: opacity .15s; }
.sjpen .fradmin-input { min-height: 38px; padding: 7px 10px; font-size: 13px; }
.sjpen .fradmin-input:disabled { color: #8a94a6; background: #f3f5f9; cursor: not-allowed; }
.sjpen .fradmin-label { margin: 0 0 6px; }

.sjpen-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.sjpen-filter, .sjpen-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sjpen-filter-label { color: #4b5770; font-size: 12px; font-weight: 700; }
.sjpen-date { width: 160px; }
.sjpen-help { margin: 0 0 12px; color: #5f6b80; font-size: 12px; line-height: 1.7; }
.sjpen-help strong { color: #354057; }

.sjpen-notice { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #dfe4ed; border-radius: 8px; background: #f8faff; color: #44516a; font-size: 12.5px; line-height: 1.65; }
.sjpen-notice.is-error { border-color: #efcfcc; background: #fff6f5; color: #b44949; }
.sjpen-notice.is-success { border-color: #c9e6d8; background: #f3fbf7; color: #23815b; }
.sjpen-notice.is-warn { border-color: #f0dfbf; background: #fffaf0; color: #8a6420; }
.sjpen-notice.is-info { border-color: #d6e3fa; background: #f5f9ff; color: #3d5a8c; }

.sjpen-table-wrap { overflow-x: auto; border: 1px solid #e1e6ef; border-radius: 8px; background: #fff; }
.sjpen-table { width: 100%; min-width: 640px; border-collapse: collapse; }
.sjpen-table th { padding: 10px 12px; border-bottom: 1px solid #e6eaf1; color: #5d6a80; background: #f8fafd; font-size: 12px; font-weight: 750; text-align: left; white-space: nowrap; }
.sjpen-table td { padding: 10px 12px; border-bottom: 1px solid #eef1f6; vertical-align: middle; }
.sjpen-table tbody tr:last-child td { border-bottom: 0; }
.sjpen-row { cursor: pointer; transition: background .12s; }
.sjpen-row:hover { background: #f7faff; }
.sjpen-col-check { width: 44px; text-align: center !important; }
.sjpen-col-check input { width: 16px; height: 16px; cursor: pointer; }
.sjpen-col-check input:disabled { cursor: not-allowed; }
.sjpen-col-num, .sjpen-col-state { width: 88px; text-align: center !important; }
.sjpen-col-del { width: 72px; text-align: center !important; }
.sjpen-lines { color: #44516a; font-size: 12.5px; line-height: 1.7; }
.sjpen-dim { color: #a2aaba; }
.sjpen-empty { padding: 28px 12px !important; color: #7c879c; text-align: center; }
.sjpen-empty.is-error { color: #b44949; }
.sjpen-empty .fradmin-button { margin-left: 8px; }

.sjpen-link { padding: 0; border: 0; background: none; color: var(--brand, #0b5cff); font: inherit; font-weight: 700; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.sjpen-link:hover { text-decoration: underline; }
.sjpen-link:focus-visible, .sjpen-row:focus-visible { outline: 2px solid var(--brand, #0b5cff); outline-offset: 2px; }

.sjpen-badge { display: inline-block; padding: 2px 8px; border: 1px solid #e1e6ef; border-radius: 999px; color: #6b768a; background: #f6f8fb; font-size: 11px; font-weight: 700; line-height: 1.6; vertical-align: middle; }
.sjpen-badge.is-on { border-color: #bfe0cf; color: #1f7a54; background: #eefaf4; }

.sjpen-form-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.sjpen-form-head .sjpen-help { margin: 0; }
.sjpen-section { margin-bottom: 16px; padding: 16px 18px; border: 1px solid #e1e6ef; border-radius: 10px; background: #fff; }
.sjpen-section .sjpen-table-wrap { border-color: #e8ecf3; }
.sjpen-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.sjpen-section-title { margin: 0 0 6px; color: #354057; font-size: 14px; font-weight: 800; }
.sjpen-section-head .sjpen-section-title { margin: 0; }
.sjpen-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-top: 12px; }
.sjpen-req { margin-left: 4px; color: #c2554d; font-size: 11px; font-weight: 700; }
.sjpen-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; min-width: 0; margin: 0; padding: 0; border: 0; }
.sjpen-choice legend { float: left; width: 100%; }
.sjpen-choice label { display: inline-flex; align-items: center; gap: 6px; color: #3c4860; font-size: 13px; cursor: pointer; }
.sjpen-choice:disabled label { color: #9aa3b4; cursor: not-allowed; }
.sjpen-inline { display: flex; align-items: center; gap: 6px; }
.sjpen-num { width: 110px; }
.sjpen-unit { flex: none; color: #5f6b80; font-size: 12px; white-space: nowrap; }
.sjpen-edit-table td { padding: 8px 10px; }
.sjpen-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 720px) {
  .sjpen-grid { grid-template-columns: minmax(0, 1fr); }
  .sjpen-toolbar { align-items: stretch; }
  .sjpen-date { width: 100%; max-width: 180px; }
  .sjpen-section { padding: 14px 12px; }
  .sjpen-edit-table { min-width: 560px; }
}
@media (max-width: 640px) {
  /* iOS 는 16px 미만 입력란에 초점이 가면 화면을 확대한다. */
  .sjpen .fradmin-input { font-size: 16px; }
  .sjpen-actions { width: 100%; }
  .sjpen-actions > .fradmin-button { flex: 1 1 0; }
}