@charset "UTF-8";
/* ==========================================================================
   넥트홀딩스 디자인 시스템
   시각 기준: design-system.md + 이 파일의 토큰 (현재 값이 확정값 · 2026-09-16 결정)
   이 파일에 정의된 토큰/컴포넌트 클래스만 사용해서 화면을 조립합니다.

   [v2 변경 이력 — 2026-09-14]
   - 파일 인코딩 복구 (이전 전달본은 이중 인코딩으로 한글 주석 손상)
   - 기준 실측값으로 Drift 수정:
       .btn      48px -> 54px
       .input    48px -> 53px
       .dropdown 48px -> 54px
   - 토큰 신설: Spacing / Radius / Shadow / Z-index / Layout / Breakpoint
   - 상태 토큰 및 focus-visible 규칙 추가
   [v3 변경 이력 — 2026-09-15 · docs/07 P0 반영]
   - SUIT 웹폰트: family 이름 불일치 수정('SUIT Variable'), CDN 버전 고정 + font-display: swap
   - Z-index 재정렬: sticky < dropdown (본문 드롭다운이 고정 바에 가려지지 않게), --z-floating 신설
   - 표 셀 기본 규칙 특이성 0 (:where) — 셀 유틸리티(.num .cell-wrap .value-unknown)가 th/td 모두에 적용
   - 오류·읽기전용 입력의 포커스 표시, textarea 상태, 드롭다운 키보드 강조(.is-highlighted)
   - scrollbar-gutter: stable (모달 열 때 배경 흔들림 방지)
   [v4 변경 이력 — 2026-09-16 · 토큰 보강 (명세 L13)]
   - 글자 크기 스케일(--fs-xs~--fs-xl)·역할 별칭·--fs-logo, 굵기(--fw-*, 800 → 700), 줄 높이(--lh-*)
   - 보조 간격(--s0-5·--s1-5·--s2-5·--s3-5)·떠 있는 요소 간격(--float-gap·--float-margin)·컴포넌트 치수
   - Z-index 이름 토큰(--z-section-nav·--z-popover·--z-drawer-panel), 모션(--dur-*·--ease-*)
   [v5 변경 이력 — 2026-09-16 · 상태·오류 표시 계약 (명세 L10·L11)]
   - 오류 표시 계약 1곳: 컨트롤 aria-invalid="true" → 오류 경계 (page CSS 중복 규칙 제거), 체크 묶음 오류 링(선택지 폭)
   - 오류 문구: .field-error · .section-error 글자 규칙 공유, 노출은 .is-visible 또는 래퍼 .is-error
   - 상태 매트릭스: 드롭다운 읽기전용(포커스 테두리 = .input[readonly])·비활성 통일, .link-btn·.tab·.icon-btn 비활성, 버튼 비활성 hover 고정
   - .btn-text 폐기 (허용 버튼 목록 밖 — 텍스트형 보조는 .link-btn 또는 .btn-outline.btn-sm)
   [v6 변경 이력 — 2026-09-16 · 레이아웃 패턴 승격·아이콘 규격 (명세 L12·L15)]
   - 컨트롤 폭 스케일 토큰(--w-control-xs~xl) + 폭 변형 class .w-*(components.css) — 맥락 조합 선택자로 폭을 정하지 않음
   - body .dropdown.dropdown-sm 특이성 우회 삭제 (.w-xs로 대체), .required·.input-suffix 전역 1곳
   - 표: 수치 칸 입력 우측 정렬·.cell-start(줄바꿈 없는 왼쪽 정렬), 탭 바 .is-inline(밑줄은 감싸는 줄이 그림)
   [v7 변경 이력 — 2026-10-06 · 발주처 디자인 수정 요청 반영 (docs/10)]
   - CI 적용(B안 확정): Filled(CTA)·SNB 현재 메뉴 글자·아이콘·라디오·체크박스 = NECT Red, SNB 바탕 = 와인 --nect-wine(글자·아이콘 흰색, 현재 메뉴 흰 채움), 로고 = assets/images/nect-logo.svg · 흰색판 nect-logo-white.svg. 보라 Primary 폐지
   - 무채색 기반: 선택·현재 위치·포커스·체크 accent = 차콜(--gray-800), 선택 배경 --gray-150, 페이지 배경 #F4F4F4
   - 역할 토큰 분리: --*-brand(보라) → --*-selected(선택) · --*-progress(진행 중 뱃지) · --fill-brand(CTA)
   - 영역 구분: --border-default 진하게(#DCDCDC), --border-subtle 가시화(gray-200), --border-strong 신설
     (펼친 드롭다운 목록 테두리·표 머리글 아래선), 표 머리글 열 구분선
   - --fs-logo·--fill-brand-logo 삭제 (로그인 글자 타일 → 로고 이미지)
   ========================================================================== */

/* ---------- Web font: SUIT Variable (OFL) ----------
   CDN이 제공하는 CSS는 font-display가 없고 버전이 고정되지 않아 여기서 직접 선언합니다.
   자체 호스팅(assets/fonts) 전환 여부는 docs/04 Q36. */
@font-face {
  font-family: 'SUIT Variable';
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2.0.5/fonts/variable/woff2/SUIT-Variable.woff2') format('woff2-variations');
}

:root {
  /* ---------- Brand (NECT CI) ----------
     출처: NECT Corporate Identity Standards Manual BS04 주 색상 — NECT Red · PANTONE 2035 C · #C8161D
     (가이드의 RGB 표기 204/0/0은 hex와 다릅니다 — 화면은 hex 기준 · docs/04 Q57)
     2026-10-16 B안 확정: 와인 SNB(글자·아이콘 흰색, 현재 메뉴 흰 채움) + CI 빨강은 CTA(Filled)·로고·SNB 현재 메뉴 글자·아이콘·라디오·체크박스에 씁니다.
     본문의 선택·현재 위치·포커스·탭 밑줄·토글은 무채색(차콜)으로 두어 빨강이 본문에 퍼지지 않게 합니다.
     ※ NECT Red는 오류 빨강(--error-700)과 색이 가까워(ΔE≈5) 글자·테두리·배경 강조에 쓰지 않습니다 */
  --nect-red: #C8161D;      /* Filled 배경 — 흰 글자 5.85 */
  --nect-red-700: #A3121A;  /* Filled hover·pressed — 흰 글자 7.90 */
  /* B안 — 와인 SNB. NECT Red의 채도·명도를 낮춘 파생값(CI 가이드 밖 → docs/04 Q61) */
  --nect-wine: #461A22;     /* SNB 바탕 — 채도 낮춘 와인(H349 S46 L19) · 흰 14.67 */
  --nect-wine-600: #66353D; /* SNB hover — 바탕보다 밝은 영역(바탕과 1.50) · 흰 9.81 */
  --nect-wine-line: #6B3D44;/* SNB 구분선·안내선 (장식) */

  /* ---------- Grayscale ---------- */
  --gray-100: #F6F6F6;
  --gray-150: #F0F0F0;      /* 선택 배경 — gray-100(hover)보다 한 단계 진하게 */
  --gray-200: #E3E3E3;
  --gray-300: #CCCCCC;
  --gray-400: #B3B3B3;
  --gray-500: #888888;
  --gray-600: #333333;
  --gray-800: #222222;      /* 선택·현재 위치 글자·선택 테두리·포커스 링 — 흰 15.91 */

  /* ---------- Status ---------- */
  --error: #EA5454;
  --warning: #E58637;
  --success: #6FC479;
  --bg: #F4F4F4;            /* 페이지 배경 — 무채색 (이전 #F7F8FA) · 흰 카드와 1.10 */

  /* ---------- 진행 중 상태색 (보라) ----------
     2026-10-06 이전 브랜드 Primary였던 보라는 '진행 중' 상태 뱃지(status-map purple) 전용으로만 남깁니다.
     선택·버튼·링크 등 상태가 아닌 곳에는 쓰지 않습니다 */
  --purple-500: #7B68F1;    /* S1 보라 테두리 (장식) */
  --purple-700: #6650EF;    /* 글자 흰 5.30 · purple-pastel 4.64 / 채움 흰 글자 5.30 */

  /* Pastel fill (Style2 badge) — 이 저장소에서 정한 파생값 */
  --error-pastel: #FCE9E9;
  --warning-pastel: #FCEEE2;
  --success-pastel: #E9F6EB;
  --purple-pastel: #F0EEFD;
  --gray-pastel: #F1F1F1;

  /* ---------- Border ----------
     특별한 지시가 없는 한 모든 테두리는 이 컬러만 사용.
     2026-10-06 영역 구분 강화: Gray 200(#E3E3E3)보다 한 단계 진하게 — 흰 위 1.37 (장식) */
  --border-default: #DCDCDC;

  /* ---------- AA 보정 파생값 (WCAG 2.1 AA) ----------
     원시 팔레트는 그대로 두고, 대비가 모자란 용도에만 쓰는 파생값입니다.
     컴포넌트·화면 CSS는 이 값을 직접 쓰지 않고 아래 역할 토큰으로만 참조합니다. */
  --white: #FFFFFF;
  --gray-550: #6B6B6B;      /* 보조 글자 — 흰 5.33 · bg 4.85 · gray-100 4.93 · gray-150 4.68 · gray-pastel 4.72 */
  --gray-450: #8D8D8D;      /* 입력 경계 — 흰 3.32 · bg 3.02 · gray-100 3.07 */
  --success-700: #337C3C;   /* 글자 흰 5.14 · pastel 4.61 / 채움 흰 글자 5.14 */
  --warning-700: #A65716;   /* 글자 흰 5.25 · pastel 4.62 / 채움 흰 글자 5.25 */
  --error-700: #D21A1A;     /* 글자 흰 5.38 · pastel 4.60 / 채움 흰 글자 5.38 */

  /* ==========================================================================
     역할(semantic) 토큰 — 컴포넌트·화면 CSS는 색을 이 토큰으로만 참조합니다.
     원시 팔레트(위 Brand~AA 보정)는 여기 정의부에서만 참조합니다. (예외: style-guide.css 팔레트 견본)
     검사 쌍: harness/resources/contrast-pairs.json — 새 역할·조합을 만들면 쌍도 추가
     2026-10-06: --*-brand(보라) 역할을 용도별로 나눴습니다 — 선택 표시는 --*-selected(차콜),
     진행 중 뱃지는 --*-progress(보라), CTA는 --fill-brand(NECT Red). 이전 이름은 쓰지 않습니다
     ========================================================================== */
  /* 글자 (1.4.3 — 4.5:1) */
  --text-default: var(--gray-600);
  --text-secondary: var(--gray-550);    /* 보조·캡션·도움말·브레드크럼·비선택 탭·미조회 값·범위 기호·단위 */
  --text-placeholder: var(--gray-550);
  --text-disabled: var(--gray-400);     /* 비활성 전용 (1.4.3 예외) — 정보 글자에 쓰지 않음 */
  --text-selected: var(--gray-800);     /* 선택·현재 위치·강조 숫자 글자 — 굵기 600과 함께 씁니다 · 흰 15.91 · gray-150 13.96 */
  --text-strong: var(--gray-800);       /* 위계 강조 글자 — 현재 제품 화면 미사용(스타일 가이드 견본만 · A안 메뉴 그룹명용) */
  --text-progress: var(--purple-700);   /* S1/S2 보라(진행 중) 뱃지 */
  --text-on-fill: var(--white);         /* --fill-* 위 글자 */
  --text-success: var(--success-700);
  --text-warning: var(--warning-700);
  --text-error: var(--error-700);       /* 오류 문구·필수 표시(*)·오류 알림 */

  /* 채움 — 흰 글자·아이콘을 올리는 배경 (4.5:1) */
  --fill-brand: var(--nect-red);        /* Filled(CTA) 버튼 전용 — 흰 글자 5.85 */
  --fill-brand-hover: var(--nect-red-700);
  --fill-strong: var(--gray-800);       /* 현재 페이지 번호·안읽음 점 — 흰 글자 15.91 */
  --fill-progress: var(--purple-700);   /* S3 보라(진행 중) */
  --fill-neutral: var(--gray-550);      /* S3 회색 뱃지 */
  --fill-inverse: var(--gray-600);      /* 기본 토스트·툴팁 */
  --fill-success: var(--success-700);   /* S3 초록·성공 토스트 */
  --fill-warning: var(--warning-700);   /* S3 주황·경고 표식 */
  --fill-error: var(--error-700);       /* S3 빨강·오류 토스트·알림 건수 */

  /* 배경 */
  --bg-page: var(--bg);
  --bg-surface: var(--white);           /* 카드·입력·모달·메뉴 */
  --bg-subtle: var(--gray-100);         /* 표 머리글·검색조건 항목명 칸·이미지 자리·고정 항목 */
  --bg-hover: var(--gray-100);
  --bg-pressed: var(--gray-100);
  --bg-readonly: var(--gray-100);
  --bg-disabled: var(--gray-100);
  --bg-selected: var(--gray-150);       /* 선택 메뉴·현재 위치·토글 선택·선택 행 */
  --bg-row-hover: var(--gray-100);      /* 클릭 가능한 표 행 hover */
  --bg-progress-subtle: var(--purple-pastel); /* S2 보라(진행 중) 뱃지 배경 */
  --bg-neutral-subtle: var(--gray-pastel);
  --bg-success-subtle: var(--success-pastel);
  --bg-warning-subtle: var(--warning-pastel); /* S2 주황·경고 알림 */
  --bg-error-subtle: var(--error-pastel);     /* S2 빨강·오류 알림·삭제 버튼 hover */
  --bg-skeleton: var(--gray-100);
  --bg-skeleton-shine: var(--gray-200);
  --bg-avatar: var(--gray-200);

  /* 경계 (1.4.11 — 입력 경계·포커스 3:1 / --border-default 등 나머지는 장식)
     --border-default는 위 Border 그룹 값을 그대로 씁니다 (카드·표 구분선) */
  --border-subtle: var(--gray-200);     /* 같은 묶음 안 구분선 — 흰 1.27 (이전 gray-100은 1.08로 보이지 않았음) */
  --border-strong: var(--gray-300);     /* 영역 구분 강조 — 펼친 드롭다운 목록 테두리·표 머리글 아래선 (장식) */
  --border-hover: var(--gray-400);      /* Outline·링크·페이지 버튼 hover (장식) */
  --border-neutral: var(--gray-300);    /* S1 회색 뱃지 (장식 — 글자가 의미 전달) */
  --border-input: var(--gray-450);      /* 입력·드롭다운·텍스트영역 경계 (읽기전용 포함) */
  --border-disabled: var(--border-default); /* 비활성 입력·드롭다운·버튼 경계 (1.4.11 예외 — 장식) */
  --border-focus: var(--gray-800);      /* 포커스 링·포커스 테두리 — 흰 15.91 · gray-150 13.96 · --border-input과 4.79
                                           오류 포커스(--border-error)와 색으로 구분됩니다. 입력 포커스는 2px 링을 함께 표시 */
  --border-selected: var(--gray-800);   /* 탭 밑줄·토글 선택·대표 이미지·드래그 중·스피너 */
  --border-progress: var(--purple-500); /* S1 보라(진행 중) (장식) */
  --border-success: var(--success);     /* S1 초록 (장식) */
  --border-warning: var(--warning);     /* S1 주황·경고 안내 막대 (장식) */
  --border-error: var(--error);         /* 오류 입력 경계·오류 포커스 링 — 흰 3.56 · gray-100 3.30 · S1 빨강
                                           ※ --border-input과는 1.07:1 → 오류 입력은 굵기(테두리+바깥 1px)로도 구분 */
  --border-warning-strong: var(--warning-700); /* 경고 표식 펼침 링 — 흰 5.25 · gray-150 4.61 */

  /* 아이콘 (1.4.11 — 3:1) */
  --icon-default: var(--gray-500);      /* 아이콘 버튼·닫기·chevron·달력·정렬 — 흰 3.54 · gray-100 3.28 · gray-150 3.11 */
  --icon-selected: var(--gray-800);     /* 펼친 chevron·정렬 활성 */
  --icon-subtle: var(--gray-300);       /* 장식 구분 기호(브레드크럼) — 1.4.11 비대상 */
  --icon-disabled: var(--gray-300);     /* 비활성 (1.4.11 예외) */
  --icon-on-fill: var(--white);         /* --fill-* 위 아이콘 */
  --icon-warning: var(--warning-700);   /* 흰 5.25 */
  --icon-error: var(--error);           /* 흰 3.56 · error-pastel 3.05 */

  /* SNB (B안 — 와인 사이드바) */
  --bg-sidebar: var(--nect-wine);              /* SNB 바탕 — 흰 글자 14.67 */
  --bg-sidebar-hover: var(--nect-wine-600);    /* SNB hover — 바탕보다 밝은 영역 · 흰 글자 9.81 */
  --bg-sidebar-active: var(--white);           /* 현재 메뉴 채움 — 와인 바탕과 14.67 */
  --text-on-sidebar-active: var(--nect-red);   /* 현재 메뉴 글자 — 흰 위 5.85 */
  --icon-on-sidebar-active: var(--nect-red);   /* 현재 메뉴 아이콘 — 흰 위 5.85 */
  --text-on-sidebar: var(--white);             /* 메뉴·하위 묶음 글자 — 흰 14.67 (피드백: 분홍 글자 대비 부족) */
  --text-on-sidebar-strong: var(--white);      /* 그룹명·hover·사용자명 */
  --icon-on-sidebar: var(--white);             /* 흰 14.67 */
  --border-sidebar: var(--nect-wine-line);     /* 그룹 구분선·3단계 안내선·사용자 줄 위선 (장식) */
  --border-sidebar-active: var(--white);       /* SNB 포커스 링 — wine 위 14.67 */

  /* 컨트롤·오버레이 */
  --control-accent: var(--nect-red);    /* 체크박스 accent-color — B안: CI 빨강 · 흰 5.85 */
  --control-accent-radio: var(--nect-red); /* 라디오 accent-color — CI 빨강 · 흰 5.85 */
  --overlay-modal: rgba(51, 51, 51, .45);
  --overlay-drawer: rgba(51, 51, 51, .35);   /* 모달과 농도 통일 여부 미정 — 기존 값 유지 */

  /* ---------- Typography ---------- */
  --font-sans: 'SUIT Variable', 'SUIT', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  /* 크기 스케일 — 기준 크기 15·16·18·24 + 화면 사용값 12·13. 이 밖의 크기는 만들지 않습니다 */
  --fs-xs: 12px;           /* 최소 글자 — 알림 건수·이미지 없음 안내 (11px 이하 금지) */
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;           /* 지표 값·요약 수치 */
  --fs-xl: 24px;
  /* 역할 별칭 — 역할이 같은 자리만 별칭을 쓰고, 다른 용도는 스케일을 씁니다 */
  --fs-caption: var(--fs-sm);      /* 보조 텍스트 */
  --fs-button: var(--fs-md);
  --fs-card-title: var(--fs-lg);   /* 카드·모달·reader 제목 */
  --fs-page-title: var(--fs-xl);
  /* 굵기 — 800 이상 쓰지 않음 */
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;
  /* 줄 높이 */
  --lh-tight: 1.3;         /* 좁은 칸 안 2줄 안내 (이미지 없음) */
  --lh-snug: 1.4;          /* 표 칸 안 여러 줄 값 */
  --lh-base: 1.5;
  --lh-relaxed: 1.6;       /* 안내 문단 */
  --lh-inline-badge: 2;    /* 용도 한정 — 뱃지가 문장 사이에 섞인 안내 문단 */

  /* ---------- Spacing (4px 배수) ---------- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;

  /* ---------- Spacing 보조 (광학 보정) ----------
     새 레이아웃 간격은 위 4px 배수를 우선합니다 */
  --s0-5: 2px;
  --s1-5: 6px;
  --s2-5: 10px;
  --s3-5: 14px;

  /* ---------- Floating (JS가 읽음) ----------
     js/dropdown.js·popover.js가 트리거 요소의 계산값으로 읽습니다 — px로 적습니다 (rem도 해석, 그 밖의 값은 JS 기본값)
     단위 계약 검사: ds_lint DS-TOKEN-04 */
  --float-gap: 6px;        /* 떠 있는 메뉴·팝오버·툴팁과 트리거 바깥 테두리 사이 */
  --float-margin: 8px;     /* 띄운 팝오버와 뷰포트 가장자리 사이 최소 여백 */

  /* ---------- Radius ---------- */
  --r-sm: 6px;
  --r: 8px;
  --r-lg: 12px;
  --r-pill: 999px;

  /* ---------- Shadow ---------- */
  --sh-1: 0 1px 2px rgba(51, 51, 51, .05);
  --sh-2: 0 8px 24px rgba(51, 51, 51, .14);   /* dropdown-menu 기준 */
  --sh-3: 0 16px 40px rgba(51, 51, 51, .18);  /* modal 기준 */
  --sh-up: 0 -4px 16px rgba(51, 51, 51, .06); /* 하단 고정 액션바 위쪽 */

  /* ---------- Control height (확정값) ---------- */
  --h-btn: 54px;
  --h-input: 53px;
  --h-dropdown: 54px;
  --h-icon-btn: 36px;
  --h-badge: 31px;
  --h-badge-s2: 33px;
  --h-row: 56px;

  /* ---------- 컴포넌트 치수 (화면 사용값) ---------- */
  --h-control-sm: 40px;    /* 좁은 영역 축소 컨트롤 (.btn-sm · .input-sm · .dropdown-sm) */
  --input-icon-slot: 44px; /* 입력 오른쪽 아이콘 자리 (달력) — 여백 16 + 아이콘 16 + 12 */
  --w-filter-label: 120px; /* 검색조건 항목명 칸 폭 (.filter-row 첫 열 · 칸 배경) — 1024: 96px */
  /* 로고 높이 — CI 공간규정(BS02): 로고 둘레 최소 여백 = 로고 높이. 최소 규격 15mm(≈57px 폭) 이상 */
  --logo-h-sidebar: 24px;  /* 사이드바 — 폭 ≈91px · 둘레 여백 --s6(24) */
  --logo-h-login: 24px;    /* 로그인 — 폭 ≈91px · 카드 안쪽 여백(1024: 좌우 --s6 24)·아래 --s7 이상 */

  /* ---------- 컨트롤 폭 스케일 (xl은 기본 폭 · 나머지는 화면 사용값) ----------
     .input·.dropdown의 폭은 이 토큰과 폭 변형 class(.w-xs~.w-full · components.css)로만 정합니다.
     새 맥락마다 조합 선택자(.xxx .dropdown { width })를 만들지 않습니다 (검수 CMP-04·TOK-04) */
  --w-control-xs: 96px;    /* 짧은 값 (연산자·단위) */
  --w-control-sm: 140px;   /* 금액 범위 입력 · 페이지 크기 */
  --w-control-md: 180px;   /* 조회 범위·검색조건 드롭다운 · 날짜 입력 */
  --w-control-lg: 240px;   /* 단위 입력 (원) */
  --w-control-xl: 323px;   /* 드롭다운 기본 폭 */

  /* ---------- Layout ---------- */
  --sidebar-w: 240px;
  --topbar-h: 64px;
  --page-x: 32px;
  --page-y: 32px;
  --reader-max-w: 720px;   /* SCR-004 등록정보만 보기 최대 폭 */
  --section-nav-h: 60px;   /* 긴 폼 바로가기 바 높이 (1024에서는 2줄 → components.css 1024 블록) */
  --action-bar-h: 88px;    /* 하단 고정 저장 바 높이 */

  /* ---------- Z-index ----------
     section-nav < sticky(탑바·액션바) < dropdown·popover·tooltip < drawer < drawer-panel < modal < floating(모달 위에 띄운 메뉴) < toast
     본문 드롭다운 메뉴가 고정 바 뒤로 숨지 않도록 dropdown이 sticky보다 위입니다.
     calc(±1) 파생 대신 이름 토큰을 둡니다. 층 순서 검사: ds_lint DS-TOKEN-04(토큰 값) · layout_probe FIXTURES(계산값) */
  --z-section-nav: 19;     /* 바로가기 바 — 탑바 아래로 지나감 */
  --z-sticky: 20;
  --z-dropdown: 40;
  --z-popover: 40;         /* 팝오버·툴팁 — 드롭다운과 같은 층 */
  --z-drawer: 60;          /* 드로어 배경 */
  --z-drawer-panel: 61;    /* 드로어 본체 — 배경 바로 위 */
  --z-modal: 80;
  --z-floating: 90;
  --z-toast: 100;

  /* ---------- Motion ---------- */
  /* 쓰는 단계만 둡니다 — 명세 초안의 --dur-base 200ms는 사용처가 없어 정의하지 않음 */
  --dur-fast: 120ms;       /* 색·테두리·아이콘 회전 전환 (hover·펼침) */
  --dur-enter: 160ms;      /* 등장 (토스트) */
  --ease-standard: ease;
  --ease-enter: ease-out;  /* 등장 */
  /* 반복 애니메이션 1주기 */
  --dur-spin: 700ms;       /* 로딩 스피너 */
  --dur-spin-reduced: 2s;  /* 동작 줄이기 설정 시 스피너 */
  --dur-spin-icon: 1s;     /* 버튼 안 새로고침 아이콘 */
  --dur-shimmer: 1.2s;     /* 스켈레톤 */
}

/* 지원 폭: 1440 / 1024 2단계 (요청목록 기준). 모바일 레이아웃은 범위 외. */

* { box-sizing: border-box; }

/* 모달이 body 스크롤을 막아도 스크롤바 자리를 유지 — 클래식 스크롤바 환경에서 배경이 15px 흔들리지 않게 */
html { scrollbar-gutter: stable; }

/* [hidden] 보장 — 베이스 리셋의 유일한 !important 허용 지점.
   .state-block{display:flex} 처럼 display를 지정한 컴포넌트가 뒤에 오면
   hidden 속성이 무시되므로, 여기서 한 번만 강제합니다.
   화면/컴포넌트 CSS에서는 !important를 쓰지 마세요. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-default);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* 공통 포커스 링 — 키보드 사용자만 노출 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* 스크린리더 전용 텍스트 */
.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;
}

/* ---------- Typography ---------- */
.page-title {
  margin: 0;
  font-size: var(--fs-page-title);
  font-weight: var(--fw-bold);
  color: var(--text-default);
}

.card-title {
  margin: 0;
  font-size: var(--fs-card-title);
  font-weight: var(--fw-bold);
  color: var(--text-default);
}

.text-muted { color: var(--text-secondary); }
.text-caption { font-size: var(--fs-caption); color: var(--text-secondary); }

/* ==========================================================================
   Button
   Filled  = 메인 액션 (화면당 1개, 아이콘 필수)
   Outline = 서브 액션
   Muted   = Disabled 상태
   ========================================================================== */
.btn {
  appearance: none;
  text-decoration: none;
  height: var(--h-btn);
  padding: 0 var(--s4);
  border-radius: var(--r);
  font-size: var(--fs-button);
  font-weight: var(--fw-semibold);
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s1) var(--s1-5);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard);
}

/* 좁은 영역(테이블 셀, 모달 푸터)용 축소 변형 */
.btn-sm {
  height: var(--h-control-sm);
  padding: 0 var(--s3);
  font-size: var(--fs-base);
}

.btn-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn-outline {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  color: var(--text-default);
}
.btn-outline:hover { border-color: var(--border-hover); }
.btn-outline:active { background: var(--bg-pressed); }

/* 토글 버튼 선택 상태 — 빠른 기간 등. 새 class 없이 aria-pressed로 표현 */
.btn-outline[aria-pressed="true"] {
  border-color: var(--border-selected);
  background: var(--bg-selected);
  color: var(--text-selected);
}

.btn-filled {
  background: var(--fill-brand);
  border: 1px solid var(--fill-brand);
  color: var(--text-on-fill);
}
.btn-filled:hover { background: var(--fill-brand-hover); border-color: var(--fill-brand-hover); }
.btn-filled:active { background: var(--fill-brand-hover); }

/* 비활성 — :disabled · aria-disabled="true"(진행 중 busy 포함) · .btn-muted 모두 같은 모양.
   Filled·Outline의 hover·active·aria-pressed보다 뒤·높은 특이성으로 두어 어떤 조합에서도 비활성 모양을 유지합니다.
   aria-disabled를 켠 직후에는 .btn의 배경 전환(--dur-fast)이 끝나기 전 값이 읽힙니다 — 규칙 순서 문제가 아님 */
.btn-muted,
.btn-muted:is(:hover, :active),
.btn:is(:disabled, [aria-disabled="true"]),
.btn:is(:disabled, [aria-disabled="true"]):is(:hover, :active) {
  background: var(--bg-disabled);
  border: 1px solid var(--border-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}

/* ---------- Icon Button (36×36) ---------- */
.icon-btn {
  appearance: none;
  position: relative;
  width: var(--h-icon-btn);
  height: var(--h-icon-btn);
  border-radius: var(--r);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--icon-default);
  flex-shrink: 0;
}
.icon-btn:hover { background: var(--bg-hover); }

/* 삭제 등 되돌리기 어려운 액션. 실수 클릭을 줄이기 위해 붉은 계열로 경고 */
.icon-btn-danger {
  border-color: var(--border-error);
  color: var(--icon-error);
}
.icon-btn-danger:hover { background: var(--bg-error-subtle); }

/* 좁은 자리(표 행·알림 목록 항목·타일 액션)에 쓰는 축소 아이콘 버튼 — 28×28, 아이콘 16
   허용 버튼 목록(CLAUDE.md 절대 하지 말 것 2)의 .icon-btn-sm 정의입니다. */
.icon-btn-sm {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
}

/* 비활성 — 위험(danger) 버튼도 경계·아이콘·배경 모두 비활성 모양, hover 없음 (danger 규칙보다 뒤) */
.icon-btn:is(:disabled, [aria-disabled="true"]),
.icon-btn:is(:disabled, [aria-disabled="true"]):hover {
  color: var(--icon-disabled);
  background: var(--bg-disabled);
  border-color: var(--border-disabled);
  cursor: not-allowed;
}

/* ==========================================================================
   Form
   ========================================================================== */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.field-label {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-default);
}
/* 필수 표시(*) — 라벨·표 머리글 어디서나 같은 모양. 부모에 종속되지 않는 전역 정의 한 곳 (검수 CMP-10) */
.required {
  color: var(--text-error);
  margin-left: var(--s0-5);
}

/* 단위 표기 — 입력 오른쪽의 '원' 등 (이전 이름 .range-unit은 사용처 0이라 삭제) */
.input-suffix {
  font-size: var(--fs-base);
  color: var(--text-secondary);
}

.field-help {
  font-size: var(--fs-caption);
  color: var(--text-secondary);
}

/* 오류 문구 — 항목 단위 .field-error · 폼·섹션 단위 변형 .section-error(여백만 components.css)
   글자 크기·색은 한 규칙을 공유하고, 노출은 .is-visible 또는 래퍼(.field·.form-row·.filter-row).is-error 중 하나로 합니다.
   경계 표시는 아래 '오류 표시 계약'(컨트롤 aria-invalid) */
.field-error,
.section-error {
  display: none;
  font-size: var(--fs-caption);
  color: var(--text-error);
}
.field-error.is-visible,
.section-error.is-visible,
:is(.field, .form-row, .filter-row).is-error .field-error { display: block; }

/* ---------- Input ---------- */
.input {
  width: 726px;
  max-width: 100%;
  height: var(--h-input);
  padding: 0 var(--s6);
  border: 1px solid var(--border-input);
  border-radius: var(--r);
  background: var(--bg-surface);
  font-size: var(--fs-base);
  color: var(--text-default);
  font-family: inherit;
}
.input::placeholder { color: var(--text-placeholder); }

/* 표 안·좁은 영역용 축소 입력 (옵션 표, 반복 입력 표) */
.input.input-sm {
  height: var(--h-control-sm);
  padding: 0 var(--s3);
}
/* 포커스 — 테두리 색 + 공통 링(2px · offset 2, 파일 위 :focus-visible 규칙).
   입력 경계(--border-input)와 포커스 색은 1.24:1이라 테두리 색만으로는 위치가 보이지 않으므로 outline을 끄지 않습니다. */
.input:focus { border-color: var(--border-focus); }

.input:disabled {
  background: var(--bg-disabled);
  border-color: var(--border-disabled);   /* 비활성은 장식 경계 (1.4.11 예외) — 버튼 비활성과 같은 모양 */
  color: var(--text-disabled);
  cursor: not-allowed;
}
/* readonly는 disabled와 시각적으로 구분 — 값은 읽을 수 있으나 수정 불가 */
.input[readonly] {
  background: var(--bg-readonly);
  color: var(--text-default);
  border-color: var(--border-input);   /* 읽기전용도 입력 경계 3:1 유지 (1.4.11) */
  cursor: default;
}
/* 읽기전용도 포커스 위치는 보여야 함 (식별값 readonly 필드에서 Tab 이동) */
.input[readonly]:focus { border-color: var(--border-focus); }

.textarea {
  width: 100%;
  min-height: 106px;
  padding: var(--s4) var(--s6);
  border: 1px solid var(--border-input);
  border-radius: var(--r);
  background: var(--bg-surface);
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--text-default);
  line-height: var(--lh-base);
  resize: vertical;
}
.textarea:focus { border-color: var(--border-focus); }   /* 링은 .input:focus 주석 참고 */
.textarea::placeholder { color: var(--text-placeholder); }
.textarea:disabled {
  background: var(--bg-disabled);
  border-color: var(--border-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}
.textarea[readonly] {
  background: var(--bg-readonly);
  color: var(--text-default);
  cursor: default;
}
.textarea[readonly]:focus { border-color: var(--border-focus); }

/* ---------- Checkbox / Radio ---------- */
/* 클릭 영역은 라벨 전체입니다. WCAG 2.2 SC 2.5.8(AA)의 최소 24×24 CSS px 을 만족시키려고
   네모 자체(18px)는 그대로 두고 라벨에 최소 크기를 줍니다 — 글자 없는 표 선택칸도 24px 이 됩니다. */
.check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  min-width: 24px;
  min-height: 24px;
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--text-default);
}
.check input {
  width: 18px;
  height: 18px;
  accent-color: var(--control-accent);
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
}
.check input[type="radio"] { accent-color: var(--control-accent-radio); }   /* 라디오만 CI 빨강 (2026-10-06 디자인 결정) */
.check input:disabled { cursor: not-allowed; }
.check:has(input:disabled) { color: var(--text-disabled); cursor: not-allowed; }
/* 고정 선택(checked + disabled — 필수 열 등): '선택됨'이 정보이므로 이름은 기본 글자색,
   바꿀 수 없음은 체크박스의 비활성 모양으로 표시 (1.4.3 — 정보 글자에 --text-disabled 금지) */
.check:has(input:disabled:checked) { color: var(--text-default); }

/* 체크박스·라디오 묶음 — 줄바꿈 허용 */
.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  margin: 0;
  padding: 0;
  border: 0;
}
.check-group legend { padding: 0; }

/* ==========================================================================
   Dropdown
   ========================================================================== */
.dropdown {
  position: relative;
  width: var(--w-control-xl);
  max-width: 100%;
  height: var(--h-dropdown);
  padding: 0 var(--s5);
  border: 1px solid var(--border-input);
  border-radius: var(--r);
  background: var(--bg-surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  font-size: var(--fs-base);
  color: var(--text-default);
  cursor: pointer;
}

/* 좁은 영역(검색조건·표 안)용 축소 변형 — .btn-sm·.input-sm과 같은 40px 계열. 폭은 그대로 .w-*로 정합니다 */
.dropdown.dropdown-sm {
  height: var(--h-control-sm);
  padding: 0 var(--s4);
}

.dropdown .icon {
  display: inline-flex;
  align-items: center;
  color: var(--icon-default);
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-standard);
}

.dropdown-value {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown[aria-expanded="true"] { border-color: var(--border-focus); }
.dropdown[aria-expanded="true"] .icon {
  color: var(--icon-selected);
  transform: rotate(180deg);
}

/* 비활성(선택할 수 없음) — .dropdown-disabled와 aria-disabled="true"는 같은 모양입니다 (js/dropdown.js는 둘 다 열지 않음).
   값이 정보라면 비활성 대신 아래 읽기전용을 씁니다. 탭 순서 제외는 화면이 tabindex="-1"로 정합니다 */
.dropdown-disabled,
.dropdown[aria-disabled="true"] {
  background: var(--bg-disabled);
  border-color: var(--border-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}
.dropdown-disabled .icon,
.dropdown[aria-disabled="true"] .icon { color: var(--icon-disabled); }
/* 고정값(chevron 없는 비활성 — 'Disabled' 변형)만 가운데 정렬. chevron이 있는 선택형 비활성은 기본 배치 유지 */
.dropdown-disabled:not(:has(.icon)),
.dropdown[aria-disabled="true"]:not(:has(.icon)) { justify-content: center; }

/* 읽기전용 — 값은 읽을 수 있고 포커스(tabindex 0)는 받되 열리지 않음 (js/dropdown.js가 aria-readonly 존중)
   .input[readonly]와 같은 규격: 읽기전용 배경 · 기본 글자 · 입력 경계 유지(1.4.11) · chevron 숨김 · 좌측 정렬
   · 포커스 시 테두리 Primary 500 + 공통 포커스 링. 마우스 클릭은 열리지 않으므로 키보드 포커스(:focus-visible)에서만 */
.dropdown[aria-readonly="true"] {
  background: var(--bg-readonly);
  border-color: var(--border-input);
  color: var(--text-default);
  cursor: default;
  justify-content: flex-start;
}
.dropdown[aria-readonly="true"]:focus-visible { border-color: var(--border-focus); }
.dropdown[aria-readonly="true"] .icon { display: none; }

/* 팝업: 테두리 + 그림자 (2026-10-06 — 그림자만으로는 아래 컨트롤과 섞여 보여 영역 테두리 추가)
   테두리는 border-box 안쪽이라 위치·폭 계산(JS 포함)은 그대로입니다. hover·선택은 선택 배경 */
.dropdown-menu {
  position: absolute;
  /* 기준은 트리거 바깥 테두리 — js/dropdown.js의 띄운 메뉴(getBoundingClientRect)와 같은 위치·폭.
     absolute 기준(100%·0)은 테두리 안쪽이라 .dropdown 테두리 1px만큼 보정 (ds_lint DS-TOKEN-02 예외) */
  top: calc(100% + 1px + var(--float-gap));
  left: -1px;
  z-index: var(--z-dropdown);
  min-width: calc(100% + 2px);
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: var(--s1-5);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s1-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: var(--sh-2);
}
.dropdown-menu[hidden] { display: none; }

/* 모달 본문·표 스크롤 영역처럼 overflow가 잘리는 곳에서는
   js/dropdown.js가 뷰포트 기준 위치를 변수로 넘겨 메뉴를 띄웁니다. */
.dropdown-menu.is-floating {
  position: fixed;
  top: var(--dropdown-top, 0);
  left: var(--dropdown-left, 0);
  min-width: var(--dropdown-width, 0);
  z-index: var(--z-floating);
}

/* 클리핑 조상이 없는 일반 배치에서도 트리거가 뷰포트 하단에 가까우면(예: 사이드바 하단 사용자 메뉴)
   위로 뒤집는다. absolute 배치는 그대로 두고 top 대신 bottom 기준으로만 바꾼다(js/dropdown.js flipUpIfNeeded). */
.dropdown-menu.dropdown-menu-flip-up {
  top: auto;
  bottom: calc(100% + 1px + var(--float-gap));
}

.dropdown-menu-item {
  padding: var(--s2-5) var(--s3);
  border-radius: var(--r-sm);
  font-size: var(--fs-base);
  color: var(--text-default);
  cursor: pointer;
  white-space: nowrap;
}
/* hover · 키보드 강조(.is-highlighted, ↑↓로 이동만 한 상태) · 선택(.is-active)은 같은 모양
   ↑↓는 강조만 옮기고 Enter·클릭에서 확정합니다 (js/dropdown.js) */
.dropdown-menu-item:hover,
.dropdown-menu-item.is-highlighted,
.dropdown-menu-item.is-active {
  background: var(--bg-selected);
  color: var(--text-selected);
}
/* 확정된 선택값은 굵기로 한 번 더 구분 — hover·키보드 강조와 같은 배경이라 색만으로는 구분되지 않음 */
.dropdown-menu-item.is-active { font-weight: var(--fw-semibold); }

/* ==========================================================================
   오류 표시 계약 — 입력·텍스트영역·드롭다운·체크 묶음 공통 (명세 L10)
   - 경계: 잘못된 컨트롤에 aria-invalid="true" 하나로 표시합니다. 폼 행·필터 행·표·모달 어디서든 같은 모양이며
     page CSS에서 다시 정의하지 않습니다. .field.is-error · .form-row.is-error 래퍼만 있는 기존 마크업도 같은 결과(호환).
     .filter-row는 한 행에 입력이 여럿이라 잘못된 입력에만 aria-invalid를 붙입니다(래퍼 호환 없음).
   - 굵기: 입력 경계(--border-input)와 오류 색은 1.07:1이라 색만으로 구분되지 않아 바깥 1px 그림자로 2px (1.4.1 · 레이아웃 변화 없음)
   - 체크 묶음(.check-group): 테두리가 없는 묶음이라 경계 대신 바깥 링(outline)으로 표시. 링은 행 끝까지 늘어나지 않고
     선택지 폭만 감쌉니다(fit-content · 최대 100% — 줄바꿈·선택지 위치 불변, 레이아웃 변화 없음)
   - 포커스: 공통 포커스 링과 같은 모양(2px · offset 2)의 오류 색 링. 경계는 오류 색 유지
   - 문구: .field-error / .section-error (Form 절) — 문구는 aria-describedby로 컨트롤에 연결
   - 같은 특이성의 기본·포커스(:focus)·펼침(aria-expanded) 규칙보다 뒤에 두어 포커스 입력·열린 드롭다운에서도 오류 경계를 유지합니다
   ========================================================================== */
:is(.input, .textarea, .dropdown)[aria-invalid="true"],
:is(.field, .form-row).is-error :is(.input, .textarea, .dropdown) {
  border-color: var(--border-error);
  box-shadow: 0 0 0 1px var(--border-error);
}
.check-group[aria-invalid="true"] {
  width: fit-content;
  max-width: 100%;
  border-radius: var(--r-sm);
  outline: 2px solid var(--border-error);
  outline-offset: var(--s1);
}
:is(.input, .textarea)[aria-invalid="true"]:focus,
.dropdown[aria-invalid="true"]:focus-visible,
:is(.field, .form-row).is-error :is(.input, .textarea):focus,
:is(.field, .form-row).is-error .dropdown:focus-visible { outline: 2px solid var(--border-error); outline-offset: 2px; }

/* ==========================================================================
   Status Badge — Style1 outline / Style2 pastel / Style3 solid
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 78px;
  height: var(--h-badge);
  padding: 0 var(--s3);
  border-radius: var(--r-pill);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* AA: S1 = 흰 배경 + 기본색 테두리(장식) + --text-* 글자 / S2 = pastel + --text-* / S3 = --fill-* + 흰 글자 */
.badge-s1-gray   { background: var(--bg-surface); border: 1px solid var(--border-neutral); color: var(--text-secondary); }
.badge-s1-green  { background: var(--bg-surface); border: 1px solid var(--border-success); color: var(--text-success); }
.badge-s1-orange { background: var(--bg-surface); border: 1px solid var(--border-warning); color: var(--text-warning); }
.badge-s1-red    { background: var(--bg-surface); border: 1px solid var(--border-error); color: var(--text-error); }
.badge-s1-purple { background: var(--bg-surface); border: 1px solid var(--border-progress); color: var(--text-progress); }

.badge-s2 { height: var(--h-badge-s2); border: none; }
.badge-s2-gray   { background: var(--bg-neutral-subtle); color: var(--text-secondary); }
.badge-s2-green  { background: var(--bg-success-subtle); color: var(--text-success); }
.badge-s2-orange { background: var(--bg-warning-subtle); color: var(--text-warning); }
.badge-s2-red    { background: var(--bg-error-subtle); color: var(--text-error); }
.badge-s2-purple { background: var(--bg-progress-subtle); color: var(--text-progress); }

.badge-s3 { border: none; color: var(--text-on-fill); }
.badge-s3-gray   { background: var(--fill-neutral); }
.badge-s3-green  { background: var(--fill-success); }
.badge-s3-orange { background: var(--fill-warning); }
.badge-s3-red    { background: var(--fill-error); }
.badge-s3-purple { background: var(--fill-progress); }

/* ==========================================================================
   Tab
   ========================================================================== */
.tab-bar {
  display: flex;
  width: 457px;
  max-width: 100%;
  border-bottom: 1px solid var(--border-default);
}

/* 다른 요소와 한 줄을 이루는 탭 바 — 밑줄은 감싸는 줄(.manager-nav 등)이 그립니다 */
.tab-bar.is-inline {
  width: auto;
  border-bottom: none;
}

.tab {
  appearance: none;
  background: none;
  border: none;
  font-family: inherit;
  padding: var(--s3-5) var(--s5);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);   /* 비선택 탭 — AA (이전 Gray 400은 1.97:1) */
  cursor: pointer;
  position: relative;
}
.tab:hover { color: var(--text-default); }
.tab[aria-selected="true"] { color: var(--text-default); }
/* 밑줄: hover = 회색(장식) / 선택 = 브랜드 — 글자색이 같아진 hover와 선택을 밑줄 색으로 구분 */
.tab:hover::after,
.tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--border-hover);
}
.tab[aria-selected="true"]::after { background: var(--border-selected); }
/* 분절(세그먼트) 탭 — 버튼 두 개가 아니라 「토글 하나」다. 테두리는 바깥 한 겹만 두르고
   그 안에서 선택된 칸만 채운다(사이 간격·칸별 테두리 없음). 발주·입고처럼 같은 화면의
   두 모드를 고를 때 쓴다(밑줄 탭은 한 화면 안의 하위 영역용).
   .tab 의 밑줄 ::after 는 꺼 둔다. */
.tab-bar.is-segmented {
  display: inline-flex;
  width: auto;
  gap: 0;
  border: 1px solid var(--border-default);
  border-radius: var(--r-sm);
  overflow: hidden;
  background: var(--bg-surface);
  margin-bottom: var(--s5);
}

.tab-bar.is-segmented .tab {
  padding: var(--s3) var(--s5);
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--text-default);
  font-weight: var(--fw-semibold);
}

.tab-bar.is-segmented .tab:not([aria-selected="true"]):hover {
  background: var(--bg-hover);
}

.tab-bar.is-segmented .tab[aria-selected="true"] {
  background: var(--fill-strong);
  color: var(--text-on-fill);
}

/* 밑줄 장식은 토글에서 쓰지 않는다 */
.tab-bar.is-segmented .tab:hover::after,
.tab-bar.is-segmented .tab[aria-selected="true"]::after { content: none; }

/* 비활성 탭 — 비활성 글자, hover 밑줄 없음 (js/tabs.js가 클릭·← → 이동에서 제외) */
.tab:is(:disabled, [aria-disabled="true"]) { color: var(--text-disabled); cursor: not-allowed; }
.tab:is(:disabled, [aria-disabled="true"]):hover::after { content: none; }

/* ==========================================================================
   Alert / Notice
   ========================================================================== */
.alert {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s4);
  border-radius: var(--r);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.alert-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: var(--icon-on-fill);
  flex-shrink: 0;
}
.alert-icon svg { display: block; }

/* 알럿 오른쪽 끝의 이동 버튼 — .alert 는 flex 라 margin 하나로 오른쪽에 붙습니다.
   inline style 금지(전달본 규칙 5) 때문에 올려 둔 자리입니다. 같은 패턴이 .file-upload-actions ·
   .card-head-actions 에도 있어 화면 CSS 에 복사하지 않고 공통으로 둡니다. */
.alert-action { margin-left: auto; }

.alert-warning { background: var(--bg-warning-subtle); color: var(--text-warning); }
.alert-warning .alert-icon { background: var(--fill-warning); }

/* 정보 알림 — 경고가 아니라 "알아두면 되는 사실"을 알릴 때(예: 수량 미확인 건수 안내) */
.alert-info { background: var(--bg-selected); color: var(--text-selected); }
.alert-info .alert-icon { background: var(--fill-strong); }

.alert-error { background: var(--bg-error-subtle); color: var(--text-error); }
.alert-error .alert-icon { background: var(--fill-error); }

/* 한 줄 축소 알럿 — 표 위·카드 머리 옆에 인라인으로 두는 짧은 안내 ("확인 필요 N건").
   아이콘(.alert-icon 16px)·간격·글자 크기는 기본과 같고 크기와 여백만 줄입니다 */
.alert.is-compact {
  display: inline-flex;
  margin: 0;
  padding: var(--s1-5) var(--s3);
}

/* ==========================================================================
   Card
   ========================================================================== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-lg);
  padding: var(--s6);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
}

/* ==========================================================================
   Table
   ========================================================================== */
/* position: relative — 표 안의 .sr-only(absolute)가 스크롤 영역 밖으로 나가 페이지 폭을 늘리지 않게 */
.table-scroll { position: relative; overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

/* 셀 기본값은 :where()로 특이성을 0으로 낮춥니다.
   → 셀 유틸리티(.num .cell-wrap .value-unknown)와 page CSS의 단일 class가 순서만으로 이깁니다.
   (이전에는 .data-table td(0,1,1)가 .stock-cell 같은 단일 class를 눌러 정렬·색이 무시됐음) */
.data-table :where(thead th) {
  text-align: center;
  padding: var(--s3-5) var(--s4);
  background: var(--bg-subtle);
  color: var(--text-default);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  white-space: nowrap;
  /* 머리글 아래선(강조)·열 구분선 — 칸 구분 (2026-10-06).
     border-collapse 표에서 고정 머리글의 테두리는 함께 스크롤되므로 안쪽 그림자로 그립니다 */
  box-shadow: inset 0 -1px 0 var(--border-strong);
}
.data-table :where(thead th + th) {
  box-shadow: inset 0 -1px 0 var(--border-strong), inset 1px 0 0 var(--border-default);
}

.data-table :where(td, tbody th) {
  padding: 0 var(--s4);
  height: var(--h-row);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-default);
  white-space: nowrap;
  text-align: center;
}
/* 행 머리글(th[scope=row])은 td와 같은 칸 모양에 굵기만 600 — 열 머리글의 회색 배경을 물려받지 않음 */
.data-table :where(tbody th) { font-weight: var(--fw-semibold); }

/* 행 클릭 가능 표시 — 클릭 가능한데 affordance 없는 문제 방지 */
.data-table tbody tr.is-clickable { cursor: pointer; }
.data-table tbody tr.is-clickable:hover { background: var(--bg-row-hover); }

/* 여러 행을 한 단위로 묶은 tbody (상품 1개 = 옵션 N행) */
.data-table tbody.is-clickable { cursor: pointer; }
.data-table tbody.is-clickable:hover :is(td, th) { background: var(--bg-row-hover); }

/* 표 안 입력칸 — 기본 726px 대신 칸 폭을 따름 (화면별 폭은 page CSS에서 지정) */
.data-table .input {
  width: 100%;
  min-width: 120px;
}

/* 셀 유틸리티 — th·td 모두 적용 */
/* 긴 상품명·옵션코드·메모용 — 줄바꿈 허용 셀 */
.data-table :is(td, th).cell-wrap {
  white-space: normal;
  word-break: break-word;
  text-align: left;
  min-width: 180px;
}

/* 수치 열은 우측 정렬 — 칸 안 입력칸도 칸의 정렬을 따릅니다. 고정폭 숫자(tabular-nums)라 행끼리 자릿수가 맞습니다 */
.data-table :is(td, th).num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.data-table :is(td, th).num .input { text-align: right; }
/* 숫자 열이어도 머리글만 가운데로 — 셀이 입력칸이라 열이 넓어진 경우, 라벨이 오른쪽 끝에 붙으면
   어느 열의 제목인지 읽히지 않습니다. 값(td)은 그대로 오른쪽 정렬을 유지합니다. */
.data-table th.num.head-center { text-align: center; }

/* 줄바꿈 없이 왼쪽 정렬하는 칸 (사이즈명 등 짧은 이름 열 — 줄바꿈까지 필요하면 .cell-wrap) */
.data-table :is(td, th).cell-start { text-align: left; }

/* 한 줄 말줄임 — 설계서가 '지정 글자수까지만 한 줄로, 초과분은 말줄임표'라고 정한 열(SCR-005-04).
   셀이 아니라 셀 안 요소에 겁니다 — 셀에 overflow를 걸면 같은 칸의 .tooltip 이 잘립니다.
   폭은 화면마다 다르므로 max-width 는 page CSS 에서 조정합니다. */
.data-table .cell-clip {
  display: block;
  max-width: 320px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 조회 실패·미조회는 0과 구분해 — 로 표시 (설계서 SCR-002-06, SCR-004-13·14) */
.value-unknown,
.data-table :is(td, th).value-unknown { color: var(--text-secondary); }   /* 정보 글자 — AA (이전 Gray 400) */

/* 정렬 가능 헤더 */
.th-sort {
  cursor: pointer;
  user-select: none;
}
.th-sort .sort-icon { margin-left: var(--s1); color: var(--icon-default); }
.th-sort[aria-sort="ascending"] .sort-icon,
.th-sort[aria-sort="descending"] .sort-icon { color: var(--icon-selected); }

/* 테이블 안 소형 링크 버튼 */
.link-btn {
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  border-radius: var(--r-sm);
  padding: var(--s1-5) var(--s3);
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--text-default);
  cursor: pointer;
}
.link-btn:hover { border-color: var(--border-hover); }
/* 비활성 — .btn 비활성과 같은 모양, hover 없음 */
.link-btn:is(:disabled, [aria-disabled="true"]) {
  background: var(--bg-disabled);
  border-color: var(--border-disabled);
  color: var(--text-disabled);
  cursor: not-allowed;
}