/*
* S옥션 자체 토큰, 값은 2026-10 수령 디자인 기준(design/html-2026-10-15/, 라이트 테마)
* - kk 결정 2026-10-15: 원티드 토큰·TDS 이름은 쓰지 않는다. 이름은 --sa- 접두사 + 용도
* - 목록·용도·쓰인 화면: design/tokens/README.md, 수령본 TDS 이름 → 이 토큰 대응: design/tokens/tds-map.md
* - 글꼴: Pretendard (SIL Open Font License 1.1, https://github.com/orioncactus/pretendard) — 글꼴 파일은 이 파일에 넣지 않는다
*/
:root {
/* 색 — 글자·아이콘 */
--sa-color-text-primary: #171719; /* 본문·제목 글자(가장 진함) */
--sa-color-text-secondary: #37383C; /* 보조 글자(표 값·설명) */
--sa-color-text-tertiary: #4E5058; /* 라벨·메타 정보 글자 */
--sa-color-text-placeholder: #5F6169; /* 입력 안내문·비활성 탭 글자·보조 아이콘 */
--sa-color-text-disabled: rgba(23,23,25,0.3); /* 비활성 입력 글자 */
--sa-color-text-brand: #006A7C; /* 링크·강조 글자·주색 아이콘 */
--sa-color-text-brand-hover: #00505E; /* 링크 마우스 올림 */
--sa-color-text-on-fill: #FFFFFF; /* 진한 배경 위 글자·아이콘(주색 버튼·도면 번호 칩) */
--sa-color-text-success: #007A2A; /* 완료·정상 글자·아이콘 */
--sa-color-text-warning: #A85000; /* 대기·주의 글자 */
--sa-color-text-danger: #C41C1C; /* 오류·취소 글자 */
--sa-color-text-accent: #247070; /* 보조 강조(청록) 버튼 글자 */
--sa-color-text-marker-number: #46474C; /* 성능점검 도면 번호 글자 */
--sa-color-text-viewer-muted: rgba(255,255,255,0.6); /* 사진 전체화면 안내 글자 */
--sa-color-icon-default: #70737C; /* 기본 아이콘 */
--sa-color-icon-subtle: #AEB0B6; /* 흐린 아이콘 */
--sa-color-icon-disabled: #C2C4C8; /* 진행 단계 중 아직 안 온 단계(점·선) */
--sa-color-icon-danger: #E52222; /* 찜(하트) 등 빨간 아이콘 */
/* 색 — 배경·채움 */
--sa-color-bg-surface: #FFFFFF; /* 본문·카드·팝오버·입력(포커스) 배경 */
--sa-color-bg-subtle: #F7F7F8; /* 아래층 배경·목록 행 마우스 올림·표 머리행 */
--sa-color-bg-section: #F6F7F9; /* 검색조건·정보 묶음·대시보드 카드 배경 */
--sa-color-bg-sidebar: #F2F5FA; /* 사이드바 배경 */
--sa-color-bg-field: #F4F5F7; /* 채움형 입력·세그먼트·토스트 배경 */
--sa-color-bg-field-hover: #EDEEF1; /* 채움형 입력·칩 마우스 올림 */
--sa-color-bg-neutral: #EAEBEC; /* 회색 채움(보조 버튼·비활성 입력·사진 자리) */
--sa-color-bg-neutral-hover: #DBDCDF; /* 회색 채움 마우스 올림 */
--sa-color-bg-ghost: rgba(23,23,25,0.04); /* 아주 옅은 채움(사진 없음 칸·선택 상자) */
--sa-color-bg-nav-selected: rgba(23,23,25,0.05); /* 선택된 사이드바 메뉴·페이지 번호 마우스 올림 */
--sa-color-bg-track: rgba(23,23,25,0.09); /* 진행 막대 바탕 */
--sa-color-bg-dim: rgba(0,0,0,0.2); /* 모달 뒤 덮개 */
--sa-color-bg-inverse: #171719; /* 진한 배경(도면 번호 칩·마커 번호 알약) */
--sa-color-bg-brand: #007A8F; /* 주색 버튼·선택 표시·탭 밑줄·체크박스 */
--sa-color-bg-brand-hover: #006A7C; /* 주색 버튼 마우스 올림 */
--sa-color-bg-brand-weak: #E0F4F7; /* 옅은 주색 채움(진행중 배지·선택 칩·현재 페이지) */
--sa-color-bg-brand-weak-hover: #C8ECF1; /* 옅은 주색 채움 마우스 올림 */
--sa-color-bg-danger: #E52222; /* 위험 채움(알림 점·지움 표시) */
--sa-color-bg-danger-hover: #C41A1A; /* 위험 채움 마우스 올림 */
--sa-color-bg-danger-weak: #FFE8E8; /* 옅은 위험 채움(문제·취소 배지·삭제 버튼) */
--sa-color-bg-danger-weak-hover: #FFD6D6; /* 옅은 위험 채움 마우스 올림 */
--sa-color-bg-success: #00BF40; /* 완료 채움(진행 단계 완료 점·선) */
--sa-color-bg-success-weak: #DCFCE7; /* 옅은 완료 채움(완료·정상 배지·엑셀 버튼) */
--sa-color-bg-success-weak-hover: #D2F3E2; /* 옅은 완료 채움 마우스 올림 */
--sa-color-bg-warning-weak: #FFEEDB; /* 옅은 주의 채움(진행·대기 배지) */
--sa-color-bg-accent-weak: rgba(34,170,170,0.11); /* 옅은 청록 채움(보조 강조 버튼) */
--sa-color-bg-accent-weak-hover: rgba(34,170,170,0.19); /* 옅은 청록 채움 마우스 올림 */
--sa-color-bg-photo-label: rgba(23,23,25,0.6); /* 사진 위 번호·이름 칩(반투명) */
--sa-color-bg-viewer: rgba(23,23,25,0.94); /* 사진 전체화면 배경 */
--sa-color-bg-viewer-control: rgba(255,255,255,0.11); /* 사진 전체화면 버튼 배경 */
--sa-color-bg-viewer-placeholder: rgba(255,255,255,0.08); /* 사진 전체화면 사진 자리 */
/* 색 — 선·포커스 */
--sa-color-border-default: #DBDCDF; /* 기본 테두리(종료 배지 테두리) */
--sa-color-border-table: #EAEBEC; /* 표 행 구분선 */
--sa-color-border-divider: rgba(23,23,25,0.09); /* 구역 구분선·탭 아래선(1px 선 배경 포함) */
--sa-color-border-column: rgba(23,23,25,0.17); /* 표 머리 칸 사이 세로선 */
--sa-color-border-control: #878A92; /* 체크박스·라디오 테두리 */
--sa-color-border-strong: #46474C; /* 구획 제목 밑줄(2px) */
--sa-color-border-focus: #007A8F; /* 입력 포커스 테두리 */
--sa-color-border-error: #E52222; /* 입력 오류 테두리 */
--sa-color-focus-ring: rgba(0,152,178,0.20); /* 포커스 바깥 고리(3px) */
--sa-color-link-underline: rgba(0,152,178,0.14); /* 차량번호 링크 밑줄 */
/* 색 — 상태 배지 5종 */
--sa-color-status-done-bg: var(--sa-color-bg-success-weak); /* 완료·정상 배지 배경 */
--sa-color-status-done-text: var(--sa-color-text-success); /* 완료·정상 배지 글자 */
--sa-color-status-done-border: rgba(0,183,92,0.18); /* 완료·정상 배지 테두리 */
--sa-color-status-wait-bg: var(--sa-color-bg-warning-weak); /* 진행·대기 배지 배경 */
--sa-color-status-wait-text: var(--sa-color-text-warning); /* 진행·대기 배지 글자 */
--sa-color-status-wait-border: rgba(252,185,0,0.31); /* 진행·대기 배지 테두리 */
--sa-color-status-bad-bg: var(--sa-color-bg-danger-weak); /* 문제·취소 배지 배경 */
--sa-color-status-bad-text: var(--sa-color-text-danger); /* 문제·취소 배지 글자 */
--sa-color-status-bad-border: rgba(237,40,49,0.13); /* 문제·취소 배지 테두리 */
--sa-color-status-live-bg: var(--sa-color-bg-brand-weak); /* 진행중 배지 배경 */
--sa-color-status-live-text: var(--sa-color-text-brand); /* 진행중 배지 글자 */
--sa-color-status-live-border: var(--sa-color-link-underline); /* 진행중 배지 테두리 */
--sa-color-status-off-bg: var(--sa-color-bg-neutral); /* 종료·비활성 배지 배경 */
--sa-color-status-off-text: var(--sa-color-text-secondary); /* 종료·비활성 배지 글자 */
--sa-color-status-off-border: var(--sa-color-border-default); /* 종료·비활성 배지 테두리 */
/* 색 — 성능점검 도면 마커 */
--sa-color-marker-replace: var(--sa-color-bg-brand); /* XX 교환 */
--sa-color-marker-sheet-metal: #A85000; /* W 판금 */
--sa-color-marker-paint: #247070; /* PP 도장 */
--sa-color-marker-adjust: #46474C; /* M 조정 */
--sa-color-marker-need: #7A3DC8; /* 필요 6종(X·Q·P·F·A·C) */
--sa-color-marker-cleared: #70737C; /* 해제 */
--sa-color-marker-erase: var(--sa-color-bg-danger); /* 지움 */
/* 글꼴 */
--sa-font-family-base: "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; /* 모든 글자 */
/* 글자 크기 */
--sa-font-size-caption: 13px; /* 작은 글자(배지·메타·표 보조) */
--sa-font-size-body-sm: 14px; /* 작은 본문(표 값·입력 보조) */
--sa-font-size-body: 15px; /* 본문·버튼 */
--sa-font-size-body-lg: 16px; /* 큰 본문·입력 */
--sa-font-size-title-sm: 17px; /* 작은 제목(사이드바 업체명·카드 제목) */
--sa-font-size-title: 18px; /* 제목(모달·구역) */
--sa-font-size-title-lg: 21px; /* 큰 제목(로그인·모달) */
--sa-font-size-heading: 23px; /* 페이지 제목 */
--sa-font-size-display-sm: 31px; /* 대시보드 숫자 */
--sa-font-size-display: 34px; /* 차량상세 금액 */
/* 줄 높이 */
--sa-line-height-caption-tight: 18px; /* 13px 글자 한 줄(사이드바 보조) */
--sa-line-height-caption: 19.5px; /* 13px 글자 */
--sa-line-height-body-sm: 21px; /* 14px 글자 */
--sa-line-height-title-sm: 22px; /* 17px 제목 한 줄 */
--sa-line-height-body: 22.5px; /* 15px 글자 */
--sa-line-height-body-lg: 24px; /* 16px 글자 */
--sa-line-height-title-lg: 30px; /* 21px 제목 */
--sa-line-height-heading: 32px; /* 23px 페이지 제목 */
--sa-line-height-display: 40px; /* 큰 숫자(34px 금액·31px 대시보드 숫자) */
--sa-line-height-none: 1; /* 아이콘 옆 숫자·칩(줄 높이 없음) */
--sa-line-height-tight: 1.3; /* 여러 줄 제목 */
--sa-line-height-snug: 1.4; /* 여러 줄 설명 */
--sa-line-height-normal: 1.5; /* 기본(화면 전체) */
--sa-line-height-relaxed: 1.6; /* 긴 안내문 */
/* 글자 굵기 */
--sa-font-weight-regular: 400; /* 본문 */
--sa-font-weight-medium: 500; /* 라벨·버튼·선택된 항목 */
--sa-font-weight-bold: 700; /* 제목·숫자 */
/* 자간 */
--sa-letter-spacing-tighter: -0.03em; /* 큰 금액(34px) */
--sa-letter-spacing-tight: -0.02em; /* 제목·로고 */
--sa-letter-spacing-snug: -0.01em; /* 큰 본문 */
--sa-letter-spacing-wide: 0.02em; /* 영문·숫자 코드 라벨 */
/* 간격(padding·margin·gap) */
--sa-space-1: 1px; /* 세로 묶음 아주 작은 틈·작은 태그 위아래 */
--sa-space-2: 2px; /* 작은 틈(세그먼트 버튼 사이 등) */
--sa-space-3: 3px; /* 세그먼트 안쪽·두 줄 칸 사이 */
--sa-space-4: 4px; /* 작은 틈 */
--sa-space-5: 5px; /* 마커 좌우·단계 표시 틈 */
--sa-space-6: 6px; /* 배지 좌우·작은 틈 */
--sa-space-8: 8px; /* 기본 작은 틈(9px 묶음 포함) */
--sa-space-10: 10px; /* 버튼 좌우·묶음 안쪽 */
--sa-space-12: 12px; /* 입력 좌우·카드 사이(11px 묶음 포함) */
--sa-space-14: 14px; /* 40px 버튼 넓은 좌우 */
--sa-space-16: 16px; /* 기본 여백 */
--sa-space-18: 18px; /* 토스트 좌우 */
--sa-space-20: 20px; /* 카드 목록 사이·본문 묶음 사이 */
--sa-space-24: 24px; /* 페이지 머리 아래·구역 사이 */
--sa-space-28: 28px; /* 사이드바 머리 왼쪽·점검 카드 안쪽 */
--sa-space-32: 32px; /* 본문 위·큰 카드 안쪽 */
--sa-space-40: 40px; /* 본문 좌우·로그인 카드 좌우 */
--sa-space-44: 44px; /* 차량상세 왼쪽 구역 사이 */
--sa-space-48: 48px; /* 본문 아래·로그인 카드 위아래 */
--sa-space-52: 52px; /* 차량상세 입찰 영역 위 */
--sa-space-56: 56px; /* 로그인 화면 좌우 */
--sa-space-64: 64px; /* 성능점검 견본 페이지 바깥 여백 */
--sa-space-80: 80px; /* 긴 화면 맨 아래 */
--sa-space-120: 120px; /* 사진 전체화면 좌우 */
/* 모서리 둥글기 */
--sa-radius-2xs: 4px; /* 작은 번호 태그 */
--sa-radius-xs: 5px; /* 20px 높이 버튼·칩 */
--sa-radius-sm: 6px; /* 22·24px 높이 배지·버튼, 번호 칩·성능점검 마커 코드 */
--sa-radius-md: 8px; /* 32px 높이 버튼·작은 카드 */
--sa-radius-md-plus: 9px; /* 34px 높이 버튼·로고 */
--sa-radius-lg: 10px; /* 40px 높이 입력·버튼 */
--sa-radius-xl: 12px; /* 48px 높이 입력·팝오버·작은 카드 */
--sa-radius-2xl: 14px; /* 56px 높이 입찰 입력 */
--sa-radius-3xl: 16px; /* 카드·정보 묶음 */
--sa-radius-4xl: 20px; /* 모달·로그인 카드 */
--sa-radius-5xl: 24px; /* 큰 패널(성능점검 도면 틀) */
--sa-radius-pill: 999px; /* 알약 모양(칩·짧은 선·진행 막대) */
--sa-radius-circle: 50%; /* 원(아바타·점·원형 버튼) */
/* 크기(높이·아이콘) */
--sa-size-icon: 16px; /* 기본 아이콘 */
--sa-size-control-20: 20px; /* 아주 작은 버튼·칩 높이 */
--sa-size-control-22: 22px; /* 배지 높이 */
--sa-size-control-24: 24px; /* 작은 버튼 높이 */
--sa-size-control-28: 28px; /* 촘촘한 버튼 높이 */
--sa-size-control-32: 32px; /* 표 안 버튼 높이 */
--sa-size-control-34: 34px; /* 보조 버튼 높이 */
--sa-size-control-40: 40px; /* 기본 입력·버튼 높이 */
--sa-size-control-48: 48px; /* 큰 입력·버튼 높이(로그인) */
--sa-size-control-56: 56px; /* 입찰 금액 입력 높이 */
/* 그림자 */
--sa-shadow-xs: 0 1px 3px 0 rgba(23,23,25,0.09); /* 선택된 칩·세그먼트 */
--sa-shadow-sm: 0 2px 4px 0 rgba(23,23,25,0.09); /* 열린 드롭다운 버튼 */
--sa-shadow-md: 0 12px 40px 4px rgba(23,23,25,0.09); /* 팝오버·드롭다운·토스트 */
--sa-shadow-lg: 0 18px 80px 4px rgba(23,23,25,0.09); /* 모달 */
--sa-shadow-card: 0 2px 8px rgba(23,23,25,0.04), 0 16px 48px -12px rgba(23,23,25,0.12); /* 떠 있는 카드(로그인·성능점검 카드) */
--sa-shadow-marker: 0 1px 3px rgba(23,23,25,0.25); /* 도면 위 마커 코드·범례 코드 칩 */
--sa-shadow-marker-number: 0 2px 8px rgba(23,23,25,0.28); /* 도면 위 번호 알약 */
--sa-shadow-marker-float: 0 4px 12px -4px rgba(23,23,25,0.35); /* 도면 위 떠 있는 선택 메뉴 */
--sa-shadow-focus: 0 0 0 3px var(--sa-color-focus-ring); /* 입력 포커스 고리 */
--sa-shadow-selected: inset 0 0 0 2px var(--sa-color-bg-brand); /* 선택된 항목 안쪽 테두리 */
--sa-shadow-dot-ring: 0 0 0 2px var(--sa-color-bg-sidebar); /* 사이드바 알림 점 테두리 */
/* z-index(쌓임 순서) */
--sa-z-click-away: 0; /* 드롭다운 바깥 클릭 덮개(투명) */
--sa-z-raised: 1; /* 덮개 위로 올린 드롭다운 버튼 */
--sa-z-float-control: 2; /* 사진 넘김 버튼 */
--sa-z-search: 3; /* 검색 줄(펼친 목록이 표 위로) */
--sa-z-popover-backdrop: 4; /* 기간 선택 팝오버 바깥 덮개 */
--sa-z-popover: 5; /* 드롭다운·팝오버 */
--sa-z-shell-overlay: 10; /* 공통 셸 모달·전체화면 덮개 */
--sa-z-panel: 20; /* 전체 화면 패널 */
--sa-z-modal: 30; /* 모달(덮개 포함) */
--sa-z-toast: 40; /* 토스트 */
--sa-z-viewer: 50; /* 사진 전체화면 */
--sa-z-viewer-toast: 60; /* 사진 전체화면 위 토스트 */
}