/* =============================================================
   「위 입력줄 / 아래 표」. 결제방식·택배와 역할 관리의 표 둘이 같은 모양을 쓴다.
   데이터 그리드와는 다른 물건이다 — 이쪽은 페이지도 정렬도 없는 짧은 마스터다.
   길어질 표라면 그리드를 쓰고, 여기 두지 않는다.
   ============================================================= */
.dlv-form {
  margin-bottom: 14px; padding: 12px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.dlv-form-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.dlv-form-title { font-size: 12.5px; font-weight: 700; color: var(--text); }
.dlv-form-row { display: grid; grid-template-columns: 1.2fr 1fr 1fr auto auto; gap: 8px; }
.dlv-input {
  padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface-1);
  color: var(--text); font: inherit;
}
.dlv-input::placeholder { color: var(--text-dim); }
.dlv-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.dlv-amount { text-align: right; font-variant-numeric: tabular-nums; }

#dlv-submit, #dlv-cancel, #pm-submit, #pm-cancel {
  padding: 0 16px; border-radius: var(--radius-sm); border: none;
  font: inherit; cursor: pointer; font-weight: 700;
}
#dlv-submit, #pm-submit { background: var(--accent); color: var(--on-accent); }
#dlv-submit:hover, #pm-submit:hover { background: var(--accent-hover); }
#dlv-cancel, #pm-cancel {
  border: 1px solid var(--border-strong); background: var(--surface-1);
  color: var(--text); font-weight: 400;
}

.dlv-list-wrap {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-1); flex: 1 1 auto; min-height: 0; overflow: auto;
}
.dlv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dlv-table thead { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.dlv-table th {
  padding: 8px 10px; text-align: left; font-size: 12px; font-weight: 700;
  color: var(--text); border-bottom: 1px solid var(--border); white-space: nowrap;
}
.dlv-table th.num { text-align: right; }
.dlv-table th.act { width: 64px; }
.dlv-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
.dlv-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dlv-table tr:hover { background: var(--surface-3); }
.dlv-table tr.is-editing { background: var(--accent-bg); }
.dlv-table .cat-actions { opacity: 0; }
.dlv-table tr:hover .cat-actions, .dlv-table tr.is-editing .cat-actions { opacity: 1; }

/* 탭 머리말 — 이 탭이 무엇을 위한 것인지 한 문단. */
.pm-note {
  margin: 0 0 12px; padding: 8px 12px;
  border-left: 2px solid var(--accent); background: var(--accent-bg);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; line-height: 1.75;
}
.pm-note b { color: var(--accent); }

.pm-form-row { display: grid; grid-template-columns: 132px 1fr 148px auto auto; gap: 8px; align-items: start; }
.pm-fee-cell { display: flex; align-items: center; gap: 4px; }
.pm-fee-cell input { min-width: 0; }
.pm-hint { margin: 8px 0 0; min-height: 1.4em; }

.pm-table .pm-kind {
  display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; white-space: nowrap;
  background: var(--surface-3); color: var(--text-muted);
}
.pm-table .pm-kind.is-fee { background: var(--accent-bg); color: var(--accent); }
.pm-table tr.is-system td { color: var(--text-muted); }
.pm-table .pm-lock { color: var(--text-dim); font-size: 12px; }
.pm-table .pm-undecided { color: var(--danger); font-size: 12px; }
.pm-table tr.is-inactive { opacity: .5; }
.pm-table td.pm-dash { color: var(--text-dim); }

/* 카테고리 검색 */
.op-search {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface-1); color: var(--text); font: inherit;
}
.op-search::placeholder { color: var(--text-dim); }
.op-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-ring); }
.cat-search-results {
  margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  max-height: 180px; overflow-y: auto; background: var(--surface-2);
}
.cat-search-row {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  background: transparent; color: var(--text-muted); border: none;
  border-bottom: 1px solid var(--border); font: inherit; font-size: 12.5px; cursor: pointer;
}
.cat-search-row:last-child { border-bottom: none; }
.cat-search-row:hover, .cat-search-row:focus { background: var(--surface-3); color: var(--text); outline: none; }
.cat-search-empty { padding: 12px; text-align: center; font-size: 12.5px; color: var(--text-muted); }

.cat-cols {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px;
  margin-top: 12px; flex: 1 1 auto; min-height: 0;
}
.cat-col-head {
  padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border);
  font-size: 12.5px; font-weight: 700; color: var(--text);
}

@media (max-width: 720px) {
  .cat-cols { grid-template-columns: 1fr; }
  .dlv-form-row, .pm-form-row { grid-template-columns: 1fr 1fr; }
}