/* 시연 미리보기 화면 스타일. 값은 tokens.css(S옥션 자체 토큰)만 쓴다 — 폭·높이 같은 배치 값만 예외 */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--sa-color-bg-surface); }
body {
  font-family: var(--sa-font-family-base); line-height: var(--sa-line-height-normal); word-break: keep-all;
  color: var(--sa-color-text-primary); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased;
}
button, input { font-family: inherit; }
.hidden { display: none !important; }

/* 버튼·입력 */
.btn {
  height: var(--sa-size-control-40); padding: 0 var(--sa-space-14); border: 0; border-radius: var(--sa-radius-lg);
  font-size: var(--sa-font-size-body); font-weight: var(--sa-font-weight-medium); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sa-space-6);
}
.btn--brand { background: var(--sa-color-bg-brand); color: var(--sa-color-text-on-fill); }
.btn--brand:hover { background: var(--sa-color-bg-brand-hover); }
.btn--brand-weak { background: var(--sa-color-bg-brand-weak); color: var(--sa-color-text-brand); }
.btn--brand-weak:hover { background: var(--sa-color-bg-brand-weak-hover); }
.btn--neutral { background: var(--sa-color-bg-neutral); color: var(--sa-color-text-primary); }
.btn--neutral:hover { background: var(--sa-color-bg-neutral-hover); }
.btn[disabled] { opacity: .6; cursor: default; }
.field {
  width: 100%; height: var(--sa-size-control-48); padding: 0 var(--sa-space-16); border: 1px solid transparent; outline: none;
  border-radius: var(--sa-radius-xl); background: var(--sa-color-bg-field); font-size: var(--sa-font-size-body-lg);
  color: var(--sa-color-text-primary);
}
.field::placeholder { color: var(--sa-color-text-placeholder); }
.field:hover { background: var(--sa-color-bg-field-hover); }
.field:focus { background: var(--sa-color-bg-surface); border-color: var(--sa-color-border-focus); box-shadow: var(--sa-shadow-focus); }

/* 로그인 */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--sa-space-48) var(--sa-space-56); background: var(--sa-color-bg-sidebar); }
.login__card {
  width: 100%; max-width: 480px; padding: var(--sa-space-48) var(--sa-space-40); border-radius: var(--sa-radius-4xl);
  background: var(--sa-color-bg-surface); box-shadow: var(--sa-shadow-card); display: flex; flex-direction: column; gap: var(--sa-space-40);
}
.login__head { display: flex; flex-direction: column; align-items: center; gap: var(--sa-space-12); text-align: center; }
.login__title { font-size: var(--sa-font-size-title-lg); line-height: var(--sa-line-height-title-lg); font-weight: var(--sa-font-weight-bold); letter-spacing: var(--sa-letter-spacing-tight); }
.login__sub { font-size: var(--sa-font-size-body); color: var(--sa-color-text-tertiary); }
.login__form { display: flex; flex-direction: column; gap: var(--sa-space-12); }
.login__form .btn { height: var(--sa-size-control-48); border-radius: var(--sa-radius-xl); font-size: var(--sa-font-size-body-lg); margin-top: var(--sa-space-8); }
.notice { padding: var(--sa-space-12) var(--sa-space-16); border-radius: var(--sa-radius-xl); font-size: var(--sa-font-size-body-sm); }
.notice--bad { background: var(--sa-color-bg-danger-weak); color: var(--sa-color-text-danger); }
.notice--wait { background: var(--sa-color-bg-warning-weak); color: var(--sa-color-text-warning); }

.logo {
  width: 32px; height: 32px; border-radius: var(--sa-radius-md-plus); background: var(--sa-color-bg-brand); color: var(--sa-color-text-on-fill);
  display: flex; align-items: center; justify-content: center; font-size: var(--sa-font-size-body-lg); font-weight: var(--sa-font-weight-bold);
  letter-spacing: var(--sa-letter-spacing-tight); flex-shrink: 0;
}
.logo--lg { width: 48px; height: 48px; border-radius: var(--sa-radius-xl); font-size: var(--sa-font-size-title-lg); }

/* 셸 */
.shell { display: flex; height: 100vh; min-width: 1280px; }
.side { width: 260px; flex-shrink: 0; padding: var(--sa-space-16) var(--sa-space-16) 0; background: var(--sa-color-bg-sidebar); display: flex; flex-direction: column; gap: var(--sa-space-16); }
.side__brand { margin: 0 calc(-1 * var(--sa-space-16)); padding: 0 var(--sa-space-16) var(--sa-space-16) var(--sa-space-28); border-bottom: 1px solid var(--sa-color-border-divider); display: flex; align-items: center; gap: var(--sa-space-10); height: 64px; }
.side__name { font-size: var(--sa-font-size-title-sm); line-height: var(--sa-line-height-title-sm); font-weight: var(--sa-font-weight-bold); letter-spacing: var(--sa-letter-spacing-tight); }
.side__org { font-size: var(--sa-font-size-caption); line-height: var(--sa-line-height-caption-tight); color: var(--sa-color-text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side__menu { flex: 1; min-height: 0; overflow: auto; display: flex; flex-direction: column; gap: var(--sa-space-2); }
.side__group { padding: var(--sa-space-12) var(--sa-space-12) var(--sa-space-4); font-size: var(--sa-font-size-caption); color: var(--sa-color-text-tertiary); }
.side__item {
  height: var(--sa-size-control-40); padding: 0 var(--sa-space-12); border-radius: var(--sa-radius-lg); display: flex; align-items: center; gap: var(--sa-space-10);
  font-size: var(--sa-font-size-body); color: var(--sa-color-text-secondary); cursor: default;
}
.side__item svg { width: var(--sa-size-icon); height: var(--sa-size-icon); color: var(--sa-color-icon-default); flex-shrink: 0; }
.side__item--on { background: var(--sa-color-bg-nav-selected); color: var(--sa-color-text-primary); font-weight: var(--sa-font-weight-medium); }
.side__item--on svg { color: var(--sa-color-text-brand); }
.side__item--off { opacity: .55; }
.side__user { margin: 0 calc(-1 * var(--sa-space-16)); padding: var(--sa-space-12) var(--sa-space-16); border-top: 1px solid var(--sa-color-border-divider); display: flex; align-items: center; gap: var(--sa-space-10); }
.avatar { width: 32px; height: 32px; border-radius: var(--sa-radius-circle); background: var(--sa-color-bg-brand-weak); color: var(--sa-color-text-brand); display: flex; align-items: center; justify-content: center; font-weight: var(--sa-font-weight-bold); font-size: var(--sa-font-size-body-sm); flex-shrink: 0; }
.side__user-name { flex: 1; min-width: 0; font-size: var(--sa-font-size-body-sm); font-weight: var(--sa-font-weight-medium); }
.side__user .btn { height: var(--sa-size-control-32); border-radius: var(--sa-radius-md); padding: 0 var(--sa-space-10); font-size: var(--sa-font-size-body-sm); }

.main { flex: 1; min-width: 0; padding: var(--sa-space-32) var(--sa-space-40) var(--sa-space-48); display: flex; flex-direction: column; gap: var(--sa-space-24); overflow: auto; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sa-space-24); padding-bottom: var(--sa-space-24); border-bottom: 1px solid var(--sa-color-border-divider); }
.page-title { font-size: var(--sa-font-size-heading); line-height: var(--sa-line-height-heading); font-weight: var(--sa-font-weight-bold); }
.page-desc { font-size: var(--sa-font-size-body); line-height: var(--sa-line-height-body); color: var(--sa-color-text-secondary); margin-top: var(--sa-space-6); }

.toolbar { display: flex; align-items: center; gap: var(--sa-space-12); flex-wrap: wrap; }
.seg { display: inline-flex; padding: var(--sa-space-3); gap: var(--sa-space-2); border-radius: var(--sa-radius-lg); background: var(--sa-color-bg-field); }
.seg button { height: var(--sa-size-control-34); padding: 0 var(--sa-space-14); border: 0; border-radius: var(--sa-radius-md-plus); font-size: var(--sa-font-size-body); cursor: pointer; background: transparent; color: var(--sa-color-text-tertiary); font-weight: var(--sa-font-weight-regular); }
.seg button.on { background: var(--sa-color-bg-surface); color: var(--sa-color-text-primary); font-weight: var(--sa-font-weight-medium); box-shadow: var(--sa-shadow-xs); }
.hint { font-size: var(--sa-font-size-body-sm); color: var(--sa-color-text-tertiary); }

.cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sa-space-12); }
.card { padding: var(--sa-space-20); border-radius: var(--sa-radius-3xl); background: var(--sa-color-bg-section); display: flex; flex-direction: column; gap: var(--sa-space-10); }
.card__title { display: flex; align-items: center; gap: var(--sa-space-6); font-size: var(--sa-font-size-body); font-weight: var(--sa-font-weight-medium); }
.dot { width: 6px; height: 6px; border-radius: var(--sa-radius-circle); }
.card__num { font-size: var(--sa-font-size-display-sm); line-height: var(--sa-line-height-display); font-weight: var(--sa-font-weight-bold); }
.card__num small { font-size: var(--sa-font-size-body-lg); font-weight: var(--sa-font-weight-medium); color: var(--sa-color-text-secondary); margin-left: var(--sa-space-2); }
.card__num--empty { color: var(--sa-color-icon-subtle); }
.card__sub { font-size: var(--sa-font-size-caption); color: var(--sa-color-text-tertiary); }

.panels { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: var(--sa-space-24); align-items: start; }
.panel { padding: var(--sa-space-16) var(--sa-space-24); border-radius: var(--sa-radius-3xl); background: var(--sa-color-bg-section); }
.panel--white { background: var(--sa-color-bg-surface); border: 1px solid var(--sa-color-border-table); overflow-x: auto; }
.panel__title { font-size: var(--sa-font-size-title); font-weight: var(--sa-font-weight-bold); padding: var(--sa-space-4) 0 var(--sa-space-8); }
.task { display: flex; align-items: center; gap: var(--sa-space-12); padding: var(--sa-space-10) 0; border-top: 1px solid var(--sa-color-border-divider); }
.task:first-of-type { border-top: 0; }
.task__ic { width: 32px; height: 32px; border-radius: var(--sa-radius-md); background: var(--sa-color-bg-surface); color: var(--sa-color-text-brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.task__ic svg { width: var(--sa-size-icon); height: var(--sa-size-icon); }
.task__txt { flex: 1; min-width: 0; }
.task__name { font-size: var(--sa-font-size-body); font-weight: var(--sa-font-weight-medium); }
.task__desc { font-size: var(--sa-font-size-caption); color: var(--sa-color-text-tertiary); }
.task__n { font-size: var(--sa-font-size-title); font-weight: var(--sa-font-weight-bold); }
.task__n--zero { color: var(--sa-color-icon-subtle); }

table.list { width: 100%; border-collapse: collapse; font-size: var(--sa-font-size-body-sm); }
.list th { text-align: left; font-weight: var(--sa-font-weight-medium); color: var(--sa-color-text-tertiary); background: var(--sa-color-bg-subtle); padding: var(--sa-space-10) var(--sa-space-12); white-space: nowrap; }
.list td { padding: var(--sa-space-12) var(--sa-space-10); border-bottom: 1px solid var(--sa-color-border-table); color: var(--sa-color-text-secondary); white-space: nowrap; }
.list td.plate { color: var(--sa-color-text-brand); font-weight: var(--sa-font-weight-medium); }
.list td.num { text-align: right; color: var(--sa-color-text-primary); }
.list .empty { text-align: center; color: var(--sa-color-text-tertiary); padding: var(--sa-space-40); }

.badge { display: inline-flex; align-items: center; height: var(--sa-size-control-22); padding: 0 var(--sa-space-8); border-radius: var(--sa-radius-sm); font-size: var(--sa-font-size-caption); font-weight: var(--sa-font-weight-medium); border: 1px solid; }
.badge--done { background: var(--sa-color-status-done-bg); color: var(--sa-color-status-done-text); border-color: var(--sa-color-status-done-border); }
.badge--wait { background: var(--sa-color-status-wait-bg); color: var(--sa-color-status-wait-text); border-color: var(--sa-color-status-wait-border); }
.badge--bad { background: var(--sa-color-status-bad-bg); color: var(--sa-color-status-bad-text); border-color: var(--sa-color-status-bad-border); }
.badge--live { background: var(--sa-color-status-live-bg); color: var(--sa-color-status-live-text); border-color: var(--sa-color-status-live-border); }
.badge--off { background: var(--sa-color-status-off-bg); color: var(--sa-color-status-off-text); border-color: var(--sa-color-status-off-border); }

.toast { position: fixed; left: 50%; bottom: var(--sa-space-32); transform: translateX(-50%); z-index: var(--sa-z-toast); padding: var(--sa-space-12) var(--sa-space-18); border-radius: var(--sa-radius-xl); background: var(--sa-color-bg-field); box-shadow: var(--sa-shadow-md); font-size: var(--sa-font-size-body); }

/* --- 10/15 확장: 역할별 셸·경매차량·입찰·확인 창 --- */
a { color: inherit; text-decoration: none; }
a.side__item { cursor: pointer; }
a.side__item:hover { background: var(--sa-color-bg-nav-selected); }
.side__gap { height: var(--sa-space-8); }
.side__role { font-size: var(--sa-font-size-caption); font-weight: var(--sa-font-weight-medium); color: var(--sa-color-text-brand); margin-left: var(--sa-space-4); }
.page-actions { display: flex; gap: var(--sa-space-8); }
.seg a { height: var(--sa-size-control-34); padding: 0 var(--sa-space-14); border-radius: var(--sa-radius-md-plus); font-size: var(--sa-font-size-body); color: var(--sa-color-text-tertiary); display: inline-flex; align-items: center; }
.seg a.on { background: var(--sa-color-bg-surface); color: var(--sa-color-text-primary); font-weight: var(--sa-font-weight-medium); box-shadow: var(--sa-shadow-xs); }
.btn--danger { background: var(--sa-color-bg-danger); color: var(--sa-color-text-on-fill); }
.btn--danger:hover { background: var(--sa-color-bg-danger-hover); }
.btn--danger-weak { background: var(--sa-color-bg-danger-weak); color: var(--sa-color-text-danger); }
.btn--danger-weak:hover { background: var(--sa-color-bg-danger-weak-hover); }
.btn--sm { height: var(--sa-size-control-32); border-radius: var(--sa-radius-md); padding: 0 var(--sa-space-10); font-size: var(--sa-font-size-body-sm); }
.search { height: var(--sa-size-control-40); min-width: 220px; padding: 0 var(--sa-space-12); border-radius: var(--sa-radius-lg); background: var(--sa-color-bg-field); border: 1px solid transparent; display: flex; align-items: center; gap: var(--sa-space-8); color: var(--sa-color-icon-default); }
.search:hover { background: var(--sa-color-bg-field-hover); }
.search:focus-within { background: var(--sa-color-bg-surface); border-color: var(--sa-color-border-focus); box-shadow: var(--sa-shadow-focus); }
.search svg { width: var(--sa-size-icon); height: var(--sa-size-icon); flex-shrink: 0; }
.search input, .search select { border: 0; outline: none; background: transparent; font-size: var(--sa-font-size-body); color: var(--sa-color-text-primary); width: 100%; }
.result { font-size: var(--sa-font-size-body); color: var(--sa-color-text-secondary); }
.result b { color: var(--sa-color-text-brand); }
.empty-box { height: 320px; border-radius: var(--sa-radius-3xl); background: var(--sa-color-bg-section); display: flex; align-items: center; justify-content: center; color: var(--sa-color-text-tertiary); font-size: var(--sa-font-size-body); }

.lots { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sa-space-20); }
.lot { border-radius: var(--sa-radius-3xl); border: 1px solid var(--sa-color-border-table); background: var(--sa-color-bg-surface); overflow: hidden; display: flex; flex-direction: column; }
.lot:hover { box-shadow: var(--sa-shadow-sm); }
.lot__photo { position: relative; height: 180px; background: var(--sa-color-bg-neutral); color: var(--sa-color-icon-subtle); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sa-space-6); font-size: var(--sa-font-size-caption); }
.lot__photo svg { width: 32px; height: 32px; }
.lot__status { position: absolute; top: var(--sa-space-12); left: var(--sa-space-12); }
.lot__body { padding: var(--sa-space-16) var(--sa-space-20) var(--sa-space-20); display: flex; flex-direction: column; gap: var(--sa-space-14); flex: 1; }
.lot__title { font-size: var(--sa-font-size-title-sm); line-height: var(--sa-line-height-title-sm); font-weight: var(--sa-font-weight-bold); }
.lot__title:hover { color: var(--sa-color-text-brand); }
.lot__spec { font-size: var(--sa-font-size-caption); color: var(--sa-color-text-tertiary); margin-top: var(--sa-space-4); }
.lot__prices { display: flex; flex-direction: column; gap: var(--sa-space-6); padding: var(--sa-space-12) var(--sa-space-14); border-radius: var(--sa-radius-xl); background: var(--sa-color-bg-section); font-size: var(--sa-font-size-body-sm); }
.lot__prices > div { display: flex; justify-content: space-between; align-items: baseline; }
.lot__prices span { color: var(--sa-color-text-tertiary); }
.lot__prices b { font-size: var(--sa-font-size-body); }
.lot__prices .mine b { color: var(--sa-color-text-brand); }
.lot__time { justify-content: flex-start !important; gap: var(--sa-space-6); color: var(--sa-color-text-secondary); font-size: var(--sa-font-size-caption); }
.lot__time svg { width: 14px; height: 14px; }
.bid-btns { display: flex; gap: var(--sa-space-8); margin-top: auto; align-items: center; }
.bid-btns .btn { flex: 1; }
.bid-form { display: flex; flex-direction: column; gap: var(--sa-space-6); margin-top: auto; }
.bid-form__label { font-size: var(--sa-font-size-body-sm); font-weight: var(--sa-font-weight-medium); display: flex; flex-direction: column; gap: var(--sa-space-2); }
.bid-form__row { display: flex; gap: var(--sa-space-6); }
.field--sm { height: var(--sa-size-control-40); border-radius: var(--sa-radius-lg); font-size: var(--sa-font-size-body); text-align: right; flex: 1; min-width: 0; padding: 0 var(--sa-space-12); }

.modal-dim { position: fixed; inset: 0; z-index: var(--sa-z-modal); background: var(--sa-color-bg-dim); display: flex; align-items: center; justify-content: center; padding: var(--sa-space-24); }
.modal { width: 100%; max-width: 440px; border-radius: var(--sa-radius-4xl); background: var(--sa-color-bg-surface); box-shadow: var(--sa-shadow-lg); padding: var(--sa-space-28) var(--sa-space-28) var(--sa-space-24); display: flex; flex-direction: column; gap: var(--sa-space-16); }
.modal--wide { max-width: 760px; }
.modal__title { font-size: var(--sa-font-size-title); font-weight: var(--sa-font-weight-bold); }
.modal__body { font-size: var(--sa-font-size-body); color: var(--sa-color-text-secondary); display: flex; flex-direction: column; gap: var(--sa-space-12); max-height: 60vh; overflow: auto; }
.modal__body p { margin: 0; }
.modal__btns { display: flex; justify-content: flex-end; gap: var(--sa-space-8); }
.modal__btns .btn { min-width: 88px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--sa-space-8) var(--sa-space-16); padding: var(--sa-space-14) var(--sa-space-16); border-radius: var(--sa-radius-xl); background: var(--sa-color-bg-section); font-size: var(--sa-font-size-body-sm); }
.kv span { color: var(--sa-color-text-tertiary); }
.kv b { text-align: right; color: var(--sa-color-text-primary); font-weight: var(--sa-font-weight-medium); }
.kv b.em { color: var(--sa-color-text-brand); font-weight: var(--sa-font-weight-bold); font-size: var(--sa-font-size-body); }
.toast--done { background: var(--sa-color-bg-success-weak); color: var(--sa-color-text-success); }
.toast--bad { background: var(--sa-color-bg-danger-weak); color: var(--sa-color-text-danger); }
.list th.num { text-align: right; }

/* --- 차량상세(P1-05) --- */
.detail { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: var(--sa-space-24); align-items: start; }
.detail__main { display: flex; flex-direction: column; gap: var(--sa-space-24); min-width: 0; }
.detail__side { position: sticky; top: 0; }
.gallery { display: flex; flex-direction: column; gap: var(--sa-space-8); }
.gallery__big { height: 420px; border-radius: var(--sa-radius-3xl); background: var(--sa-color-bg-neutral); color: var(--sa-color-icon-subtle); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sa-space-8); font-size: var(--sa-font-size-body-sm); }
.gallery__big svg { width: 40px; height: 40px; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sa-space-8); }
.gallery__thumbs div { height: 72px; border-radius: var(--sa-radius-md); background: var(--sa-color-bg-neutral); color: var(--sa-color-icon-subtle); display: flex; align-items: center; justify-content: center; }
.gallery__thumbs svg { width: 20px; height: 20px; }
.sec { display: flex; flex-direction: column; gap: var(--sa-space-12); }
.sec__title { font-size: var(--sa-font-size-title); font-weight: var(--sa-font-weight-bold); padding-bottom: var(--sa-space-8); border-bottom: 2px solid var(--sa-color-border-strong); display: flex; align-items: center; gap: var(--sa-space-8); }
.spec-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sa-space-20); }
.spec-grid div { display: flex; justify-content: space-between; padding: var(--sa-space-12) 0; border-bottom: 1px solid var(--sa-color-border-table); font-size: var(--sa-font-size-body-sm); }
.spec-grid span { color: var(--sa-color-text-tertiary); }
.spec-grid b { font-weight: var(--sa-font-weight-medium); }
.soon { padding: var(--sa-space-24); border-radius: var(--sa-radius-xl); background: var(--sa-color-bg-section); color: var(--sa-color-text-tertiary); font-size: var(--sa-font-size-body-sm); }
.side-card { border-radius: var(--sa-radius-3xl); border: 1px solid var(--sa-color-border-table); background: var(--sa-color-bg-surface); padding: var(--sa-space-20); display: flex; flex-direction: column; gap: var(--sa-space-16); box-shadow: var(--sa-shadow-xs); }
.side-card__head { display: flex; gap: var(--sa-space-6); }
.side-card .hint { margin: 0; }

/* --- 입고 리스트(P3-24a)·출품 관리(P2-16) 표 --- */
.list td .sub { font-size: var(--sa-font-size-caption); color: var(--sa-color-text-tertiary); margin-top: var(--sa-space-2); }
.list td.soon-cell { color: var(--sa-color-icon-subtle); }
.list td .btn { height: var(--sa-size-control-32); border-radius: var(--sa-radius-md); padding: 0 var(--sa-space-10); font-size: var(--sa-font-size-body-sm); }
.list td.acts { display: flex; gap: var(--sa-space-6); }
.list tbody tr:hover td { background: var(--sa-color-bg-subtle); }
.search--select { min-width: 160px; }