/* ==========================================================================
   물품 등록 화면(#/register)과 카탈로그 카드의 등록 가능 배지 — 디자인 시스템(st-*) 위의 .reg-* 배치.
   입력칸·버튼·알약·체크박스·안내 상자는 ds.css의 st-* 클래스가 맡는다. 제출 빌더(.builder·.step-tag·.preview-card)는
   등록 화면과 상품 상세가 함께 쓰므로 ds-products.css에 있다. 변수는 모두 --st-*.
   ========================================================================== */

/* 카탈로그 카드: 등록 가능 배지 줄 */
.reg-slot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-space-3); margin-top: 0; padding-top: var(--st-space-4); border-top: 1px solid var(--st-line); }
.reg-slot:empty { display: none; }
.reg-slot .reg-note { color: var(--st-ink-2); font-size: 14px; }
.reg-badge { text-decoration: none; }
a.reg-badge:hover .st-pill { box-shadow: inset 0 0 0 1px currentColor; }

/* 번호 입력 */
.reg-lookup { display: grid; gap: var(--st-space-3); max-width: 680px; margin-top: var(--st-space-6); }
.reg-lookup-row { display: flex; flex-wrap: wrap; gap: var(--st-space-3); }
.reg-lookup-row .st-input { flex: 1 1 260px; min-width: 0; }
.reg-help { margin: 0; line-height: 1.7; }
.reg-help b { color: var(--st-ink-2); }
.reg-rules { margin-top: var(--st-space-6); }
.reg-rules .st-callout-bubble p { color: var(--st-ink-2); }

/* 결과 안내(없는 물품·이미 등록됨·로그인 필요 …) */
.reg-verdict { margin-top: var(--st-space-6); }
.reg-verdict-title { margin: var(--st-space-3) 0 0; font: 800 24px/1.3 var(--st-font-sans); letter-spacing: -0.03em; }
.reg-verdict .st-gate-copy p { margin-top: var(--st-space-2); }
.reg-verdict-id { font-size: 13px; }
.reg-skel { height: 160px; margin-top: var(--st-space-6); border-radius: var(--st-radius-lg); }

/* 번호 여러 개 확인 */
.reg-rows { margin-top: var(--st-space-6); padding: 0; overflow: hidden; }
.reg-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-space-3); padding: var(--st-space-4) var(--st-space-6); }
.reg-row + .reg-row { border-top: 1px solid var(--st-line); }
.reg-row-id { min-width: 120px; font-weight: 700; }

/* 물품 요약 */
.reg-summary { display: grid; gap: var(--st-space-4); margin-top: var(--st-space-6); padding: var(--st-space-6); }
.reg-summary-title { margin: 0; font: 800 26px/1.3 var(--st-font-sans); letter-spacing: -0.035em; overflow-wrap: anywhere; text-wrap: balance; }
.reg-summary dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--st-space-2) var(--st-space-5); margin: 0; font-size: 15px; line-height: 1.5; align-items: baseline; }
.reg-summary dt { color: var(--st-ink-3); font: 600 13px/1.6 var(--st-font-sans); padding-top: 1px; }
.reg-summary dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.reg-fine { margin: 0; color: var(--st-ink-3); font: 500 13px/1.65 var(--st-font-sans); }
.reg-listings { display: grid; gap: var(--st-space-2); font-size: 14px; }
.reg-listings-title { color: var(--st-ink-2); font: 700 13px/1.4 var(--st-font-sans); }
.reg-listings ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--st-space-2); }
.reg-listings li { display: flex; flex-wrap: wrap; gap: var(--st-space-1) var(--st-space-4); color: var(--st-ink-2); }

/* 납품 줄(fact) 목록 */
.reg-facts { display: grid; gap: var(--st-space-3); }
.reg-fact { display: grid; gap: var(--st-space-3); padding: var(--st-space-4) var(--st-space-5); border: 1px solid var(--st-line); border-radius: var(--st-radius-md); background: var(--st-paper); }
.reg-fact.off { opacity: 0.6; }
.reg-fact-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--st-space-2); }
.reg-fact-head .st-t-code { overflow-wrap: anywhere; }
.reg-fact-meta { color: var(--st-ink-3); font: 600 13px/1.5 var(--st-font-sans); }
.reg-fact-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--st-space-3); padding: var(--st-space-3) var(--st-space-4); border-radius: var(--st-radius-sm); background: var(--st-paper-sunk); }
.reg-fact-grid > div > span { display: block; color: var(--st-ink-2); font: 600 12.5px/1.4 var(--st-font-sans); }
.reg-fact-grid > div > b { display: block; margin-top: 2px; font: 800 17px/1.3 var(--st-font-sans); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.reg-fact-input { display: grid; gap: var(--st-space-3); grid-template-columns: minmax(0, 1fr); }
.reg-fill { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--st-space-3); padding: var(--st-space-4) var(--st-space-5); border-radius: var(--st-radius-md); background: var(--st-paper-warm); }
.reg-fill .st-field { flex: 1 1 220px; min-width: 0; }
.reg-fill .st-field .st-input + .st-input { margin-top: var(--st-space-2); }
.reg-excluded { color: var(--st-ink-2); font-size: 13.5px; }
.reg-excluded summary { cursor: pointer; font-weight: 600; }
.reg-excluded ul { margin: var(--st-space-2) 0 0; padding-left: 18px; display: grid; gap: var(--st-space-1); }

/* 근거 입력 카드 */
.reg-ev { display: grid; gap: var(--st-space-4); padding: var(--st-space-5); border-radius: var(--st-radius-md); background: var(--st-paper-warm); box-shadow: inset 0 0 0 1px var(--st-line); }
.reg-ev-head { display: flex; align-items: center; gap: var(--st-space-3); }
.reg-ev-head b { font: 800 15px/1.3 var(--st-font-sans); letter-spacing: -0.02em; }
.reg-ev-head .reg-ev-del { margin-left: auto; }
.reg-ev-del { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--st-paper); color: var(--st-ink-2); font-size: 18px; line-height: 1; cursor: pointer; box-shadow: inset 0 0 0 1px var(--st-line-strong); transition: background-color 0.15s, color 0.15s; }
.reg-ev-del:hover { background: var(--st-danger-soft); color: var(--st-danger); }
.reg-ev-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--st-space-3); }
.reg-ev-checks { display: flex; flex-wrap: wrap; gap: var(--st-space-2) var(--st-space-6); }
.reg-ev textarea.st-input { min-height: 96px; }
.reg-short { min-height: 88px; }
.reg-count { margin-left: var(--st-space-1); color: var(--st-ink-3); font: 600 12.5px/1 var(--st-font-sans); font-style: normal; }
.reg-count.hot { color: var(--st-danger); }
.reg-bad { color: var(--st-danger); font-weight: 700; }

/* 등록 완료 모달 */
.reg-done { text-align: center; }
.reg-done h2 { margin-top: var(--st-space-4); }
.reg-receipt { margin: var(--st-space-5) 0; padding: 0; text-align: left; border: 0; border-radius: var(--st-radius-md); background: var(--st-paper-sunk); font: inherit; overflow: hidden; }
.reg-receipt div { display: flex; justify-content: space-between; gap: var(--st-space-4); padding: var(--st-space-3) var(--st-space-4); border-bottom: 1px solid var(--st-line); }
.reg-receipt div:last-child { border-bottom: 0; }
.reg-receipt dt { color: var(--st-ink-3); font: 600 13px/1.5 var(--st-font-sans); }
.reg-receipt dd { margin: 0; min-width: 0; font-size: 14px; text-align: right; overflow-wrap: anywhere; word-break: break-all; }
.reg-receipt-amt { font-weight: 800; }
.reg-done .reg-fine { margin: 0 0 var(--st-space-5); }
.reg-done .st-dialog-actions { justify-content: center; margin-top: 0; }

/* 가격 차이 기준(ADR 0022) — 켜진 이벤트에서만 보인다. 미리보기 카드의 한 줄(알림)과 거절 때 보이는 숫자 상자. */
.reg-gap-note { margin: 0; padding: var(--st-space-3) var(--st-space-4); border-radius: var(--st-radius-md); background: var(--st-paper-sunk); color: var(--st-ink-2); font: 600 13.5px/1.65 var(--st-font-sans); overflow-wrap: anywhere; }
.reg-gap-note.ok { background: var(--st-ok-soft); color: var(--st-ok); }
.reg-gap-note.warn { background: var(--st-warn-soft); color: var(--st-ink); }
.reg-gap-box { display: grid; gap: var(--st-space-3); margin-top: var(--st-space-3); padding: var(--st-space-3) var(--st-space-4); border-radius: var(--st-radius-md); background: var(--st-paper-sunk); color: var(--st-ink); }
.reg-gap-group b { display: block; margin-bottom: var(--st-space-2); font: 700 13.5px/1.4 var(--st-font-sans); }
.reg-gap-group dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: var(--st-space-2) var(--st-space-4); margin: 0; }
.reg-gap-group dl div { min-width: 0; }
.reg-gap-group dt { color: var(--st-ink-3); font: 600 12.5px/1.5 var(--st-font-sans); }
.reg-gap-group dd { margin: 0; color: var(--st-ink); font: 700 14px/1.5 var(--st-font-sans); overflow-wrap: anywhere; }
.reg-gap-box .st-hint { margin: 0; color: var(--st-ink-2); font-size: 13px; line-height: 1.6; }
.reg-gap-note[hidden] { display: none; }

/* hidden 속성으로 숨기는 요소 — 위 클래스들이 display를 지정해 UA의 [hidden]{display:none}을 이기므로 되돌려 놓는다
   (납품 줄 8건씩 펼치기·더 보기 버튼·근거 지우기 버튼). */
.reg-fact[hidden], #reg-more[hidden], .reg-ev-del[hidden] { display: none; }

@media (max-width: 720px) {
  .reg-fact-grid { grid-template-columns: 1fr; gap: var(--st-space-2); }
  .reg-ev-grid { grid-template-columns: 1fr; }
  .reg-summary dl { grid-template-columns: 1fr; gap: 2px; }
  .reg-summary dd { margin-bottom: var(--st-space-2); }
  .reg-lookup-row .st-btn { width: 100%; }
  .reg-row { padding: var(--st-space-4); }
  .reg-done .st-dialog-actions .st-btn { flex: 1 1 100%; }
}