/*
 * 케이미트 ERP — shadleaf(shadcn/ui) 위의 앱 고유 스타일. shadleaf 는 컴포넌트만 꾸미고 유틸리티 클래스가 없으므로
 * 페이지 둘레(여백·검색 카드 격자·결과 줄)와 Tabulator 테마 맞춤은 여기서 한다. 값은 모두 shadleaf 토큰(--background, --primary, --border, --radius …)이라
 * 스킨(application.yml 의 shadleaf.skin)과 다크 테마를 그대로 따른다. shadleaf 의 규칙은 캐스케이드 레이어 안에 있어 레이어 밖의 이 규칙이 이긴다.
 */

/* ---- 글꼴·기본 ---- */
:root {
  --font-sans: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", system-ui, -apple-system, sans-serif;
  --erp-row-hover: color-mix(in oklab, var(--accent) 60%, transparent);
}
body {
  font-family: var(--font-sans);
  line-height: 1.5;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.muted { color: var(--muted-foreground); }
.small { font-size: var(--text-xs); }

/* ---- 응용 셸 ---- */
.app-logo {
  flex-shrink: 0;
  inline-size: 2rem;
  block-size: 2rem;
  border-radius: calc(var(--radius) - 2px);
  object-fit: contain;
  background: var(--sidebar-primary-foreground);
}
.brand-mark { border-radius: 6px; }
/* 사이드바 머리의 서비스 이름: 메뉴 글자보다 한 단계 크게 (접힌 레일에서는 shadleaf 가 글자를 숨긴다) */
.sidebar-header .sidebar-menu-button[data-size="lg"] strong { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.site-header { padding-inline: 0.75rem; gap: 0.5rem; border-block-end: 1px solid var(--border); position: sticky; top: 0; z-index: 20; background: var(--background); }
.site-header-end { display: flex; align-items: center; gap: 0.5rem; }
.plain-header { position: static; }
.user-menu-today { font-weight: 400; color: var(--muted-foreground); }

/* 본문 */
.page { padding: 1rem 1.25rem 1.25rem; min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-end: 0.75rem; }
.page-head h1 { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.page-head .page-head-action { margin-inline-start: auto; }
.flash { margin-block-end: 0.75rem; }

/* 로그인·단순 화면 */
.page-login { display: grid; place-items: start center; padding-block-start: 4rem; }
.login-card { inline-size: min(100%, 26rem); }
.login-logo { margin-block-end: 0.5rem; }
.login-content { display: grid; gap: 0.75rem; }
.login-button { inline-size: 100%; }
.login-footer { justify-content: center; }

/* 홈 */
.home-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); max-width: 60rem; }
.home-user { display: flex; align-items: center; gap: 0.75rem; }
.home-user-text { display: flex; flex-direction: column; min-width: 0; }
.home-links { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* ---- 검색 카드: 여러 컬럼을 가로지르는 조건과 기간. 한 컬럼에 매이는 조건은 그리드 머리글의 헤더 필터다 ---- */
.search-card { margin-block-end: 0.75rem; }
.search-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.search-field { display: flex; flex-direction: row; align-items: center; gap: 0.5rem; --w: 240px; flex: 1 1 var(--w); min-width: min(calc(var(--w) * 0.62), 100%); max-width: calc(var(--w) * 1.6); }
.search-field-md { --w: 240px; }
.search-field-lg { --w: 320px; }
.search-field > .label { flex: none; min-width: 3rem; text-align: right; color: var(--muted-foreground); font-weight: 400; }
.search-field > .input-group { flex: 1 1 auto; min-width: 0; }
/* 기간(시작 ~ 종료): 네이티브 날짜 입력 둘 */
.search-field > .date-range { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 0.375rem; }
.date-range > .input { flex: 1 1 0; min-width: 0; }
.date-range-sep { color: var(--muted-foreground); }
.filter-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 0.5rem; }
/* 쳐 두었지만 아직 조회하지 않은 값 (list-grid.js 가 입력에 is-pending 을 단다): 점선 테두리 */
.input-group:has(.is-pending), .input.is-pending { border-style: dashed; border-color: var(--primary); }
/* 기본값과 다른 조건이 걸려 있으면 초기화 버튼을 강조한다 (list-grid.js 가 is-dirty 를 단다) */
.filter-actions .btn.is-dirty { background: var(--accent); color: var(--accent-foreground); }
@media (max-width: 640px) {
  .search-field { flex-basis: 100%; max-width: none; }
}

/* ---- 결과 줄 ---- */
.gridbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-end: 0.5rem; }
.gridbar-left, .gridbar-right { display: flex; align-items: center; gap: 0.75rem; }
.hitline { font-size: var(--text-sm); color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.hitline .count { font-weight: 600; color: var(--foreground); }
.grid-loading { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--muted-foreground); font-size: var(--text-xs); }
.grid-failure { color: var(--destructive); font-size: var(--text-xs); font-weight: 600; }
.grid-pending-note { color: var(--muted-foreground); font-size: var(--text-xs); }
.sizesel { color: var(--muted-foreground); font-size: var(--text-xs); }
.sizesel-select { inline-size: 8.5rem; }

/* ---- 그리드 카드와 상세 패널 ---- */
.grid-card { padding: 0; overflow: hidden; gap: 0; }
#gridLines { margin-block-start: 1rem; }
.lines-head { display: flex; align-items: center; gap: 0.75rem; margin-block-end: 0.5rem; }
.lines-head h2 { margin: 0; font-size: 0.9375rem; font-weight: 700; }
.lines-head .lines-key { color: var(--primary); }
.lines-message { margin: 0; padding: 1.25rem 1rem; text-align: center; color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius); background: var(--card); }
.lines-message.is-loading { padding-block: 0.5rem; }
#gridLinesAlert { margin-block-end: 0.5rem; }
/* 잠긴 수정 링크(aria-disabled + is-locked): 흐리게 하지 않고 비활성 모양, 사유는 옆 글자(#gridLinesEditReason) */
#gridLinesEdit.is-locked { cursor: not-allowed; background: var(--muted); color: var(--muted-foreground); pointer-events: none; }
#gridLines .lines-jump { font-size: var(--text-xs); text-decoration: underline; color: var(--primary); }

/* ---- Tabulator(simple 테마)를 shadleaf 토큰에 맞춘다. 테마 CSS 는 레이어 없이 로드되므로 이 규칙도 레이어 밖이다 ---- */
.grid-card .tabulator { border: 0; background: transparent; font-family: inherit; font-size: 0.8125rem; color: var(--card-foreground); }
.grid-card .tabulator .tabulator-header { background: var(--muted); border-bottom: 1px solid var(--border); color: var(--muted-foreground); }
.grid-card .tabulator .tabulator-header .tabulator-col { background: var(--muted); border-right: 0; }
.grid-card .tabulator .tabulator-header .tabulator-col .tabulator-col-content { padding: 0.4rem 0.625rem; }
.grid-card .tabulator .tabulator-header .tabulator-col .tabulator-col-title { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; }
.grid-card .tabulator .tabulator-header .tabulator-col.tabulator-sortable:hover { background: var(--accent); }
.grid-card .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="ascending"] .tabulator-col-title,
.grid-card .tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort="descending"] .tabulator-col-title { color: var(--primary); }
.grid-card .tabulator .tabulator-row { border-bottom: 1px solid var(--border); background: var(--card); color: var(--card-foreground); min-height: 0; }
.grid-card .tabulator .tabulator-row.tabulator-row-even { background: var(--card); }
.grid-card .tabulator .tabulator-row:hover { background: var(--erp-row-hover); }
.grid-card .tabulator .tabulator-row .tabulator-cell { border-right: 0; padding: 0.4rem 0.625rem; font-size: 0.8125rem; }
.grid-card .tabulator .tabulator-cell.num { font-variant-numeric: tabular-nums; }
/* 셀 범위 선택 (selectableRange) */
.grid-card .tabulator .tabulator-row .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected) { background: var(--accent); }
.grid-card .tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range { border: 1px solid var(--primary); }
.grid-card .tabulator .tabulator-tableholder .tabulator-range-overlay .tabulator-range-cell-active { border: 2px solid var(--primary); }
.grid-card .tabulator .tabulator-header .tabulator-col.tabulator-range-highlight { background: var(--accent); color: var(--accent-foreground); }
/* 마스터-상세: 고른 마스터 행 (list-grid.js 의 is-selected-line) + 키보드 포커스 */
.grid-card .tabulator .tabulator-row.is-selected-line,
.grid-card .tabulator .tabulator-row.is-selected-line:hover { background: var(--accent); color: var(--accent-foreground); }
.grid-card .tabulator .tabulator-row.is-selected-line .tabulator-cell:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.grid-card .tabulator .tabulator-row[tabindex] { cursor: pointer; }
.grid-card .tabulator .tabulator-row[tabindex]:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
.grid-card .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left,
.grid-card .tabulator .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left { border-right: 1px solid var(--border); }
/* 통화 셀: 통화 코드는 왼쪽, 값은 오른쪽 (list-grid.js 의 currencyField) */
.grid-card .tabulator .tabulator-cell.cur-cell .cur-wrap { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.grid-card .tabulator .tabulator-cell.cur-cell .cur { font-size: var(--text-xs); font-weight: 600; color: var(--muted-foreground); }
.grid-card .tabulator .tabulator-row.is-selected-line .tabulator-cell .muted,
.grid-card .tabulator .tabulator-row.is-selected-line .tabulator-cell .cur { color: var(--accent-foreground); }
/* 합계행 */
.grid-card .tabulator .tabulator-calcs-holder,
.grid-card .tabulator .tabulator-calcs-holder .tabulator-row,
.grid-card .tabulator .tabulator-calcs-holder .tabulator-row .tabulator-cell { background: var(--muted); }
.grid-card .tabulator .tabulator-calcs-holder { border-top: 2px solid var(--border); border-bottom: 0; }
.grid-card .tabulator .tabulator-calcs-holder .tabulator-row { border-bottom: 0; font-weight: 700; }
.grid-card .tabulator .tabulator-calcs-holder .tabulator-row .tabulator-cell { font-variant-numeric: tabular-nums; }
.grid-card .tabulator.is-empty .tabulator-calcs-holder { display: none; }
/* 빈 결과·알림 */
.grid-card .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents { background: transparent; padding: 1.5rem; font-size: 0.8125rem; font-weight: 400; color: var(--muted-foreground); }
.grid-card .tabulator .tabulator-placeholder .grid-empty p { margin: 0; }
.grid-card .tabulator .tabulator-placeholder .grid-empty .grid-empty-conditions,
.grid-card .tabulator .tabulator-placeholder .grid-empty .grid-empty-hint { margin-top: 0.25rem; font-size: var(--text-xs); }
.grid-card .tabulator .tabulator-alert .tabulator-alert-msg { border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover); color: var(--popover-foreground); padding: 0.5rem 1rem; font-size: 0.8125rem; font-weight: 400; }
.grid-card .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error { border-color: var(--destructive); color: var(--destructive); }
/* 페이저 ◀◀ ◀ 1 2 3 ▶ ▶▶: 아웃라인 버튼 모양, 현재 쪽은 primary */
.grid-card .tabulator .tabulator-footer { border-top: 1px solid var(--border); background: transparent; padding: 0.5rem; }
.grid-card .tabulator .tabulator-footer .tabulator-footer-contents { padding: 0; }
.grid-card .tabulator .tabulator-footer .tabulator-paginator { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem; color: var(--foreground); }
.grid-card .tabulator .tabulator-footer .tabulator-page { margin: 0; display: inline-flex; min-width: 1.75rem; height: 1.75rem; align-items: center; justify-content: center; padding: 0 0.5rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - 2px); background: var(--background); color: var(--foreground); font-size: var(--text-xs); }
.grid-card .tabulator .tabulator-footer .tabulator-page:not(:disabled):hover { background: var(--accent); color: var(--accent-foreground); }
.grid-card .tabulator .tabulator-footer .tabulator-page.active { background: var(--primary); border-color: var(--primary); color: var(--primary-foreground); font-weight: 700; }
.grid-card .tabulator .tabulator-footer .tabulator-page:disabled { opacity: 1; background: var(--muted); color: var(--muted-foreground); }
/* 헤더 필터: shadleaf 입력(.input)과 같은 모양 */
.grid-card .tabulator .tabulator-header .tabulator-col .tabulator-header-filter { margin-top: 0.25rem; }
.grid-card .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input { margin: 0; height: 1.625rem; width: 100%; min-width: 0; padding: 0.125rem 0.375rem; border: 1px solid var(--input); border-radius: calc(var(--radius) - 2px); background: var(--background); color: var(--foreground); font: inherit; font-size: var(--text-xs); font-weight: 400; letter-spacing: normal; text-align: left; }
.grid-card .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::placeholder { color: var(--muted-foreground); }
.grid-card .tabulator .tabulator-header .tabulator-col.filter-list .tabulator-header-filter input { cursor: pointer; padding-right: 1.125rem; color: var(--muted-foreground); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.375rem center; }
.grid-card .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input[type="date"] { font-size: 0.6875rem; }
.grid-card .tabulator .tabulator-header .tabulator-col.filter-input .tabulator-header-filter { text-align: left; }
.grid-card .tabulator .tabulator-header .tabulator-col.has-filter .tabulator-header-filter input { border-color: var(--primary); background-color: var(--accent); color: var(--accent-foreground); font-weight: 600; }
.grid-card .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input.is-pending { border-style: dashed; border-color: var(--primary); }
.grid-card .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input:focus { outline: 2px solid var(--ring); outline-offset: 0; border-color: var(--ring); }
/* 헤더 필터 후보 목록(body 에 붙는 팝업) */
.tabulator-popup-container.tabulator-edit-list { max-height: 280px; padding: 0.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); font-family: inherit; font-size: var(--text-xs); }
.tabulator-edit-list .tabulator-edit-list-item { padding: 0.375rem 0.625rem; border-radius: calc(var(--radius) - 4px); color: var(--popover-foreground); }
.tabulator-edit-list .tabulator-edit-list-item.active, .tabulator-edit-list .tabulator-edit-list-item:hover { background: var(--accent); color: var(--accent-foreground); }
.tabulator-edit-list .tabulator-edit-list-item.focused { outline: 1px solid var(--ring); outline-offset: -1px; }
.tabulator-edit-list .tabulator-edit-list-placeholder { padding: 0.375rem 0.625rem; color: var(--muted-foreground); }
/* 다크 테마: Tabulator 가 셀에 둔 고정색은 토큰으로 이미 덮였다. 범위 선택 오버레이만 primary 를 따른다 */
.dark .grid-card .tabulator .tabulator-row .tabulator-cell.tabulator-range-selected:not(.tabulator-range-only-cell-selected) { background: color-mix(in oklab, var(--primary) 25%, transparent); }

/* 움직임 줄이기 */
@media (prefers-reduced-motion: reduce) {
  .site-header, .grid-card { transition: none; }
}

/* ---- 등록·수정 폼 (구매계약 등록·수정): sl:card 안의 sl:field 격자 + 상세 행 표 + 타입어헤드 + 저장 줄 ---- */
.page-form { padding-block-end: 0; }
.form-card { margin-block-end: 0.75rem; gap: 0.5rem; padding-block: 0.625rem; }
.form-card > .card-header { padding-block-end: 0.5rem; }
.flash-link { margin-inline-start: 0.5rem; text-decoration: underline; }
.form-summary ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; }
.form-summary p { margin: 0; }
.form-summary a { text-decoration: underline; }
.form-grid { display: grid; gap: 0.5rem 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: start; }
@media (min-width: 1100px) { .form-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.form-field-wide { grid-column: span 2; }
.form-field { gap: 0.25rem; }
.req { color: var(--destructive); }
.field-error:empty { display: none; }
/* 타입어헤드 (lookup.js): 입력 아래 뷰포트 기준(fixed)으로 뜨는 후보 목록 — 상세내역 스크롤 상자 안에서도 잘리지 않는다. 위치·폭은 스크립트가 입력칸에 맞춘다 */
.lookup { position: relative; }
.lookup-list { position: fixed; z-index: 30; margin: 0; padding: 0.25rem; min-width: 15rem; max-height: 15rem; overflow: hidden auto; list-style: none; border: 1px solid var(--border); border-radius: var(--radius); background: var(--popover); color: var(--popover-foreground); box-shadow: 0 4px 12px rgb(0 0 0 / 0.12); font-size: var(--text-sm); }
.lookup-list li { min-height: 1.5rem; padding: 0.25rem 0.5rem; border-radius: calc(var(--radius) - 2px); cursor: pointer; overflow-wrap: anywhere; }
.lookup-list li:hover, .lookup-list li.active { background: var(--accent); color: var(--accent-foreground); }
.lookup-list li.active { outline: 1px solid var(--ring); outline-offset: -1px; }
.lookup-list li.is-chosen { font-weight: 600; }
.lookup-list li.lookup-empty, .lookup-list li.lookup-empty:hover { cursor: default; background: transparent; color: var(--muted-foreground); }
/* 상세내역 카드: contract-form.js 가 처음 한 번 남은 화면 높이로 고정하고(style.height), 머리는 두고 행 표(.lines-scroll)만 안에서 스크롤한다 */
.lines-card { display: flex; flex-direction: column; }
.lines-card > .card-header { flex: none; }
.lines-card-title { display: flex; align-items: center; gap: 0.25rem; }
.lines-card > .card-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.line-status { margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.5rem; }
/* role=status 줄은 비어 있어도 DOM 에 둔다 (display:none 토글은 낭독되지 않을 수 있다): 비면 높이만 접는다 */
.line-status:empty, .history-status:empty, .history-box .lines-message:empty { margin: 0; padding: 0; height: 0; overflow: hidden; }
.lines-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; scroll-padding-top: 2rem; }
.lines-scroll .table-container { overflow: visible; }
.lines-table { min-width: 920px; }
.lines-table thead th { position: sticky; top: 0; z-index: 10; background: var(--card); white-space: nowrap; }
.lines-table td { vertical-align: top; }
.lines-table .col-no { width: 2.75rem; white-space: nowrap; }
.lines-table .line-no { display: inline-block; padding-block-start: 0.375rem; font-variant-numeric: tabular-nums; color: var(--muted-foreground); }
.lines-table .col-stage { width: 20rem; }
.lines-table .col-item { min-width: 14rem; }
.lines-table .col-num { width: 9.5rem; }
.lines-table .col-num .input, .lines-table .col-num .input-group-input { text-align: end; font-variant-numeric: tabular-nums; }
.lines-table .input-group-text { font-size: var(--text-xs); font-weight: 600; }
.lines-table .col-so { width: 8rem; }
.lines-table .col-cust { min-width: 12rem; }
.lines-table .col-act { width: 2.5rem; }
.lines-table .col-right { text-align: end; }
.lines-table tfoot td { font-weight: 600; font-variant-numeric: tabular-nums; }
.lines-table td.is-invalid .input, .lines-table td.is-invalid .input-group { border-color: var(--destructive); }
/* 수입 단계 진행 표시 (fragments/stage): 배지 여섯 칸을 한 줄에 */
.stage-track { display: inline-flex; flex-wrap: nowrap; gap: 0.125rem; margin: 0; padding: 0.25rem 0 0; list-style: none; }
.stage-track .is-skipped { border-style: dashed; color: var(--muted-foreground); }
.stage-track .is-ahead { border-color: transparent; color: var(--muted-foreground); }
/* 구매계약 이력 (등록 화면): 상세 행 표와 위아래 반반. 640px 이하에서는 쌓는다 */
.lines-split { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.lines-pane, .history-box { display: flex; flex-direction: column; min-height: 0; }
.history-box { padding-block-start: 0.5rem; border-block-start: 1px solid var(--border); }
.history-head { display: flex; flex: none; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; margin-block-end: 0.5rem; }
.history-title { display: flex; align-items: center; gap: 0.25rem; align-self: center; margin: 0; font-size: var(--text-sm); font-weight: 600; }
.history-field { inline-size: 10rem; }
.history-field-search { inline-size: 16rem; }
.history-status { margin: 0 0 0.5rem; flex: none; font-weight: 600; color: var(--primary); }
.history-status.is-error { color: var(--destructive); }
.history-table { min-width: 760px; }
.history-table tbody tr { cursor: pointer; }
.history-table tbody tr.is-selected, .history-table tbody tr.is-selected:hover { background: var(--accent); color: var(--accent-foreground); }
.history-table tbody tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.history-table tbody tr:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; }
@media (max-width: 640px) {
  .lines-split { display: block; }
  .history-box .lines-scroll { max-height: 40vh; }
  .form-field-wide { grid-column: auto; }
}
/* 저장 줄: 긴 폼에서도 저장·목록이 늘 화면 아래에 보인다. 본문 좌우 여백(.page 1.25rem)까지 배경을 깔아 뒤의 표가 비치지 않게 한다 */
.form-actions { display: flex; align-items: center; gap: 0.5rem; }
.form-actions-sticky { position: sticky; bottom: 0; z-index: 20; margin-inline: -1.25rem; padding: 0.5rem 1.25rem; background: var(--background); border-block-start: 1px solid var(--border); }

/* ---- 다른 폼 화면이 함께 쓰는 조각: 읽기 전용 값 목록, 후보 표, 보조 패널, 삭제 묶음 ---- */
/* 읽기 전용 값 목록(dl): 격자는 .form-grid 와 같다. 이름은 라벨, 값은 본문 */
.summary-grid { display: grid; gap: 0.5rem 1rem; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin: 0; }
@media (min-width: 1100px) { .summary-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.summary-item { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.summary-item dt { font-size: var(--text-xs); color: var(--muted-foreground); }
.summary-item dd { margin: 0; min-height: 1.25rem; font-size: var(--text-sm); overflow-wrap: anywhere; }
/* 보조 패널(.lines-panel: L/C 의 AMEND 내역): 상세 패널과 같은 머리 + 카드 */
.lines-panel { margin-block-start: 1rem; }
.lines-panel .lines-title { margin: 0; font-size: 0.9375rem; font-weight: 700; }
/* 상세내역 위 조건 줄(계약일자 시작 + 검색) */
.lines-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem 1rem; margin-block-end: 0.5rem; }
.lines-filter .field { inline-size: 10rem; }
.lines-filter .form-field-search { inline-size: 16rem; }
/* 후보 줄이 많은 표: 화면 높이 안에서 스크롤 (스크립트가 높이를 정하기 전의 대비) */
.lines-scroll-capped { max-height: 70vh; }
/* 체크를 푼 줄(합계에서 빠진 줄)은 흐리게, 고른 후보 행은 accent, 그 아래 펼친 품목 상세 행은 muted 바탕의 안쪽 표 */
.lines-table tr.is-off td { background: var(--muted); color: var(--muted-foreground); }
.lines-table tr[data-lc-row] { cursor: pointer; }
.lines-table tr.is-selected td { background: var(--accent); }
.lines-table tr[data-lc-lines] > td { padding: 0.5rem 0.75rem 0.75rem 2.75rem; background: var(--muted); }
.lines-table .lines-table, .lines-table-head-nowrap { min-width: 0; }
.lines-table .lines-table thead th { position: static; background: transparent; }
.lines-table-head-nowrap { table-layout: auto; }
.lines-table-head-nowrap > thead > tr > th { white-space: nowrap; }
.lines-table-head-nowrap > thead > tr > th:not(.col-cust) { width: 1%; }
.lines-table-head-nowrap > tbody > tr[data-lc-row] > td:not(.col-cust) { white-space: nowrap; }
.lc-detail-table { inline-size: 100%; table-layout: auto; }
.lc-detail-table th, .lc-detail-table td { white-space: nowrap; }
.lc-detail-table th { width: 1%; }
.lc-detail-table th.col-text { width: auto; }
.lc-detail-table td.col-text { white-space: normal; }
/* 셀 전체를 눌러 고르는 체크·라디오 칸: 라벨이 셀을 채운다 */
.lines-table :is(td, th).col-act:has(> label) { padding: 0; }
.lines-table :is(td, th).col-act > label { display: flex; align-items: center; justify-content: center; min-height: 2.25rem; cursor: pointer; }
.lines-table :is(td, th).col-act > label:has(> :disabled) { cursor: not-allowed; }
.lines-table input[type="checkbox"], .lines-table input[type="radio"] { width: 0.875rem; height: 0.875rem; accent-color: var(--primary); }
/* 선적 수정의 비율 폭 표 */
.lines-table-fluid { table-layout: fixed; }
.lines-table-fluid th, .lines-table-fluid td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lines-table-fluid .col-no { width: 6%; }
.lines-table-fluid .col-code { width: 7%; }
.lines-table-fluid .col-item { min-width: 0; width: auto; }
.lines-table-fluid .col-num, .lines-table-fluid .col-so { width: 9%; }
.lines-table-fluid .col-date { width: 12%; }
.lines-table-fluid .col-offer { width: 11%; }
.lines-table-fluid th { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.4; vertical-align: bottom; }
.lines-scroll:has(.lines-table-fluid) { scroll-padding-top: 2.75rem; }
/* 통관의 입고 처리·통관 처리 표 */
.lines-table-receive { min-width: 960px; }
.lines-table-receive .col-act { width: 2.25rem; }
.lines-table-receive .col-so { width: 5.5rem; }
.lines-table-receive .col-dist { width: 11rem; }
.lines-table-receive .col-num { width: 7rem; }
.lines-table-receive .col-item { min-width: 10rem; }
.lines-table-receive input.is-default:not(:disabled), .lines-table-receive select.is-default:not(:disabled) { color: var(--muted-foreground); }
.lines-table-receive output { display: block; text-align: end; font-variant-numeric: tabular-nums; }
/* 숫자 입력 + 단위(부보비율 %), 읽기 전용 숫자칸 */
.input-suffix-group { display: flex; align-items: center; gap: 0.375rem; }
.input-suffix { font-size: var(--text-sm); color: var(--muted-foreground); }
.input-suffix-group .ratio-select { inline-size: auto; flex: none; }
.input-num { text-align: end; font-variant-numeric: tabular-nums; }
.lines-table td.lines-message { padding: 0.5rem 0.375rem; text-align: start; border: 0; }
/* 저장 줄의 삭제 묶음(확인 체크 + 삭제)과 안내 한 줄 */
.delete-actions { display: flex; align-items: center; gap: 0.5rem; margin-inline-start: 0.5rem; padding-inline-start: 1rem; border-inline-start: 1px solid var(--border); }
.delete-confirm { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--text-sm); }
.form-actions-sticky:has(> .form-actions-note:not([hidden])) { flex-wrap: wrap; }
.form-actions-sticky > .form-actions-note { margin: 0 0 0.25rem; flex-basis: 100%; }
/* 단계 이동 줄(통관 처리) */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-block-end: 0.75rem; }
.toolbar .button > .badge { margin-inline-start: 0.25rem; }
.toolbar .button[aria-current="step"] { font-weight: 700; border-color: var(--primary); }
/* 보조 패널의 조회 실패 알림(.lines-alert)은 카드 위라 아래 여백만; 안내 카드(구매 준비 중·오류)는 폭을 제한하고 위쪽 가운데에 */
.lines-alert { margin-block-end: 0.5rem; }
.notice-card { inline-size: min(100%, 40rem); }
.page-plain { display: grid; place-items: start center; padding-block-start: 3rem; }
/* L/C 화면: 스크립트가 켜는 경고(.is-invalid), 요약+입력 쌓기, 둘째 머리(AMEND 등록), 조건 줄 칸 폭, 선택 요약 */
.field.is-invalid > .field-label { color: var(--destructive); }
.field.is-invalid .input { border-color: var(--destructive); }
.form-stack { display: grid; gap: 0.75rem; }
.page-head-next { margin-block-start: 1.25rem; }
.page-head h2 { margin: 0; font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
.lines-filter { flex: none; }
.lines-filter-field { inline-size: 10rem; }
.lines-filter-search { inline-size: 16rem; }
.lines-summary { margin: 0; white-space: nowrap; }
.lines-table .col-act .checkbox-wrapper { vertical-align: middle; }
/* 통관 화면: 두 폼 사이 간격, 기본값으로 채운 칸(data-default)의 회색 글자, 표 안 select 폭, 관세 메모 */
.proc-form + .proc-form { margin-block-start: 1rem; }
.lines-table th.col-act > label { min-height: 1.5rem; }
.lines-table-receive :is(.input, .native-select)[data-default]:not(:disabled) { color: var(--muted-foreground); }
.lines-table-receive output { padding-block-start: 0.375rem; }
.lines-table .native-select-wrapper { inline-size: 100%; }
.tariff-note { display: block; }
.tariff-note:empty { display: none; }
/* 부보·선적 화면: 후보 표 선택 행의 왼쪽 막대, 표 안 체크 여백, 표 아래 작은 안내 줄, 삭제 확인 체크, 삭제 예정 줄, 스크립트가 켜는 p.infobar-error, 스크립트가 만든 .btn 링크 */
.lines-table tr.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.lines-table input[type="checkbox"], .lines-table input[type="radio"] { margin: 0.4rem 0 0; }
.lines-table .col-act > label input[type="checkbox"], .lines-table .col-act > label input[type="radio"] { margin: 0; }
.lines-alert { margin-block-end: 0.5rem; }
.lines-alert p { margin: 0; }
.lines-note { margin: 0.375rem 0 0; }
.lines-note:empty, .lines-card .lines-message:empty, [data-candidate-status]:empty, [data-candidate-cap]:empty, [data-rate-hint]:empty { margin: 0; padding: 0; height: 0; overflow: hidden; border: 0; }
.delete-confirm input { inline-size: 0.875rem; block-size: 0.875rem; accent-color: var(--destructive); }
.form-actions [data-delete-locked] { margin: 0; }
tr.is-clearing td { background: color-mix(in oklab, var(--destructive) 10%, transparent); }
tr.is-clearing td:first-child > span::after { content: " · 삭제 예정"; color: var(--destructive); font-weight: 700; }
p.infobar-error:not(.alert) { margin: 0 0 0.5rem; padding: 0.5rem 0.75rem; border: 1px solid color-mix(in oklab, var(--destructive) 40%, transparent); border-radius: var(--radius); color: var(--destructive); font-size: var(--text-sm); }
.lines-message .btn { padding: 0; border: 0; background: none; color: var(--primary); text-decoration: underline; cursor: pointer; font: inherit; }
/* 좁은 비율 폭 표(선적 수정)와 입고·통관 표의 입력은 안쪽 여백을 줄여 숫자가 잘리지 않게 */
.lines-table-fluid .input, .lines-table-receive .input, .lines-table-receive .native-select { padding-inline: 0.375rem; }
/* 고정 저장 줄이 있는 화면: 포커스가 간 칸이 줄 밑에 숨지 않게 아래 scroll-padding 을 줄 높이(패딩 16px + 버튼 28px + 윗선 1px)보다 넉넉히 둔다 */
html:has(.form-actions-sticky) { scroll-padding-bottom: 3.5rem; }
/* 숫자 입력의 스핀 버튼은 좁은 표 칸의 폭을 먹지 않게 숨긴다 (키보드 ↑↓·휠은 그대로다) */
input[type="number"] { appearance: textfield; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; }