/* 업무비서 디자인 A안 (2026-10-21 사장님 확정): 밝고 조용한 업무 화면.
   전부 html[data-ui="a"] 아래에만 적용 — data-ui="classic" 이면 이 파일은 아무 영향이 없다(되돌리기 = base.html 의 스위치).
   기준: 바탕과 같은 옅은 회색 메뉴 + 8px 안쪽으로 올린 흰 시트, 주 버튼은 거의 검정, 모서리 6~8px 하나, 그림자 없음,
   색은 데이터·상태에만, 맑은 고딕 한 글꼴(숫자는 같은 폭). 보관본: design_snapshots/classic_20261021 */

html[data-ui="a"] {
  --accent: #1d1f20; --accent-dark: #000; --accent-soft: #eceef1; --accent-2: #247b50;
  --ink: #111; --muted: #5f6368; --line: #e8e8e8; --bg: #f6f7f9; --card: #fff;
  --ok: #247b50; --bad: #c4242a; --warn: #92400e; --radius: 8px;
}
/* 글꼴: 맑은 고딕(2026-10-21 사장님 — Pretendard 는 처음 화면이 흐리게 보여 교체). 기기에 깔린 글꼴을 쓰므로 내려받기 없음.
   Pretendard 로 다시 쓰려면: static/fonts/PretendardVariable.woff2 가 서버에 남아 있으니 @font-face 를 되살리면 됨(메모리 project-ui-theme-a). */
html[data-ui="a"] body {
  font: 14px/1.55 "Malgun Gothic", "맑은 고딕", "Apple SD Gothic Neo", "Segoe UI", system-ui, sans-serif;
  background: var(--bg); color: var(--ink); font-variant-numeric: tabular-nums;
}
html[data-ui="a"] h1 { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
html[data-ui="a"] h3 { font-size: 16px; font-weight: 600; }

/* ---- 틀: 메뉴는 바탕과 같은 옅은 회색, 본문은 8px 안쪽의 흰 시트 ---- */
html[data-ui="a"] .shell { background: var(--bg); }
html[data-ui="a"] .sidebar { background: var(--bg); border-right: 0; width: 232px; flex: 0 0 232px; padding: 0 8px; }
html[data-ui="a"] .side-logo { padding: 18px 10px 14px; gap: 10px; }
html[data-ui="a"] .side-logo .mark { width: 26px; height: 26px; border-radius: 6px; font-size: 14px; background: #1d1f20; box-shadow: none; }
html[data-ui="a"] .side-logo .word { font-size: 15px; font-weight: 600; letter-spacing: 0; }
html[data-ui="a"] .main-col { margin: 8px 8px 8px 0; background: #fff; border: 1px solid #e8e8e8; border-radius: 8px; min-height: calc(100vh - 16px); }
html[data-ui="a"] .shell.sb-off .main-col { margin: 8px; }
html[data-ui="a"] .main-col .wrap { padding: 24px 28px 48px; }
html[data-ui="a"] .main-col .usage { border-top: 1px solid #f0f0f0; }

/* ---- 메뉴 ---- */
html[data-ui="a"] .nav-a { padding: 0 0 12px; gap: 1px; }
html[data-ui="a"] .nav-a .side-group { padding: 16px 10px 6px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--muted); }
html[data-ui="a"] .nav-a .nav-item { gap: 10px; padding: 6px 10px; border-radius: 6px; color: #3c4043 !important; font-weight: 400; font-size: 14px; min-height: 32px; }
html[data-ui="a"] .nav-a .nav-item .ic { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; color: #5f6368; }
html[data-ui="a"] .nav-a .nav-item:hover { background: #eceef1; color: #111 !important; }
html[data-ui="a"] .nav-a .nav-item.active { background: #e9eaed; color: #111 !important; font-weight: 600; }
html[data-ui="a"] .nav-a .nav-item.active .ic { color: #111; }
html[data-ui="a"] .nav-a .nav-item.nav-sub { margin-left: 18px; padding-left: 12px; font-size: 13px; min-height: 30px; border-left: 1px solid #dcdfe3; border-radius: 0 6px 6px 0; }
html[data-ui="a"] .nav-a .aidot { width: 6px; height: 6px; border-radius: 50%; background: #8a8f98; flex: none; margin-left: auto; }
html[data-ui="a"] .nav-a .nbadge { margin-left: 6px; background: #c4242a; }
html[data-ui="a"] .side-foldbtn { width: 100%; display: flex; align-items: center; gap: 6px; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
html[data-ui="a"] .side-foldbtn i { font-style: normal; font-size: 11px; transition: transform .15s; }
html[data-ui="a"] .side-fold.open .side-foldbtn i { transform: rotate(180deg); }
html[data-ui="a"] .side-foldbody { display: none; flex-direction: column; gap: 1px; }
html[data-ui="a"] .side-fold.open .side-foldbody { display: flex; }
html[data-ui="a"] .side-foot { border-top: 0; padding: 12px 10px 16px; flex-wrap: wrap; }
html[data-ui="a"] .side-user { font-size: 12px; }
html[data-ui="a"] .side-out { font-size: 12px; font-weight: 500; color: var(--muted); }
html[data-ui="a"] .ui-switch { flex: 1 1 100%; margin-top: 6px; padding: 5px 8px; border: 1px solid #d1d5db; background: #fff; color: #3c4043; border-radius: 6px; font: inherit; font-size: 12px; cursor: pointer; text-align: center; }
html[data-ui="a"] .ui-switch:hover { border-color: #1d1f20; }
html[data-ui="a"] .side-api { margin: 0 10px 6px; }
html[data-ui="a"] .sb-toggle { border-radius: 6px; border-color: #d1d5db; }
html[data-ui="a"] .sb-toggle[aria-pressed="true"] { background: #1d1f20; border-color: #1d1f20; }

/* ---- 부품 ---- */
html[data-ui="a"] .card { background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: none; }
html[data-ui="a"] .btn { padding: 7px 14px; border: 1px solid #d1d5db; border-radius: 6px; font-weight: 600; font-size: 13px; background: #fff; color: #111; }
html[data-ui="a"] .btn:hover { border-color: #1d1f20; }
html[data-ui="a"] .btn.primary { background: #1d1f20; border-color: #1d1f20; color: #fff; }
html[data-ui="a"] .btn.primary:hover { background: #000; }
html[data-ui="a"] .btn.danger { color: #c4242a; border-color: #e5b5b7; }
html[data-ui="a"] .btn.small { padding: 4px 10px; font-size: 12px; }
html[data-ui="a"] input, html[data-ui="a"] select, html[data-ui="a"] textarea { border-radius: 6px; border-color: #d1d5db; font-size: 14px; padding: 7px 10px; }
html[data-ui="a"] input:focus, html[data-ui="a"] select:focus, html[data-ui="a"] textarea:focus { outline: 2px solid #d9dce1; border-color: #1d1f20; }
html[data-ui="a"] .pill { border-radius: 4px; background: #eef0f3; color: #3c4043; font-weight: 500; }
html[data-ui="a"] .pill.ok { background: #dcfae5; color: #04250e; }
html[data-ui="a"] .pill.off { background: #f1f2f4; color: #5f6368; }
html[data-ui="a"] .status { border-radius: 6px; font-weight: 500; }
html[data-ui="a"] .status.good, html[data-ui="a"] .flash.ok { background: #dcfae5; color: #04250e; }
html[data-ui="a"] .status.warn { background: #fffbeb; color: #92400e; }
html[data-ui="a"] .flash { border-radius: 6px; font-weight: 500; }
html[data-ui="a"] .flash.bad, html[data-ui="a"] .flash.ok { box-shadow: none; }
html[data-ui="a"] .flash.bad { background: #ffedea; color: #831c1e; }
html[data-ui="a"] .cchip { border-radius: 4px; font-weight: 500; }
html[data-ui="a"] .cchip.good { background: #dcfae5; color: #04250e; }
html[data-ui="a"] .cchip.warn { background: #fffbeb; color: #92400e; }
html[data-ui="a"] .cchip.run { background: #eceef1; color: #1d1f20; }
html[data-ui="a"] .tbl th { font-size: 12px; font-weight: 400; color: var(--muted); }
html[data-ui="a"] .tbl th, html[data-ui="a"] .tbl td { border-bottom-color: #f0f0f0; }
html[data-ui="a"] tr.on-row td { background: #f6f7f9; }
html[data-ui="a"] code { background: #eef0f3; border-radius: 4px; }
html[data-ui="a"] .bar { background: #eceef1; }
html[data-ui="a"] .csec::before { background: #1d1f20; }
html[data-ui="a"] .ui-ibody { border-left-color: #c9ccd1; background: #f6f7f9; }
html[data-ui="a"] .ui-i:hover, html[data-ui="a"] .ui-i.on { background: #eceef1; border-color: #1d1f20; color: #111; }
html[data-ui="a"] .fold-ic { border-radius: 6px; }
html[data-ui="a"] .savebar .sb-btn.primary { background: #f2f2f3; border-color: #f2f2f3; color: #111; }
html[data-ui="a"] .rp-item:hover { background: #f1f2f4; }
html[data-ui="a"] .rp-row.rp-new { border-color: #1d1f20; background: #f6f7f9; }
html[data-ui="a"] .rp-right .rp-list.over { outline-color: #1d1f20; background: #f6f7f9; }

/* ---- 홈 메뉴 카드: 평평하게 ---- */
html[data-ui="a"] .mcard { padding: 14px 16px; gap: 12px; transition: border-color .12s; }
html[data-ui="a"] .mcard:hover { border-color: #1d1f20; box-shadow: none; transform: none; }
html[data-ui="a"] .mico { flex: 0 0 36px; width: 36px; height: 36px; border-radius: 8px; background: #f1f2f4; color: #3c4043; font-size: 18px; }
html[data-ui="a"] .mname { font-size: 15px; font-weight: 600; }
html[data-ui="a"] .mstat { color: #111; font-weight: 600; }
html[data-ui="a"] a.tile:hover { border-color: #1d1f20; }

/* ---- jjj 보기 사이트 상단 바 ---- */
html[data-ui="a"] .jjj-bar { background: #1d1f20; }

/* ---- 휴대폰: 위쪽 가로 메뉴를 같은 회색 톤으로 ---- */
@media (max-width: 600px) {
  html[data-ui="a"] .sidebar { width: 100%; flex: none; padding: 0; border-bottom: 1px solid var(--line); }
  html[data-ui="a"] .main-col { margin: 0; border: 0; border-radius: 0; min-height: 0; }
  html[data-ui="a"] .main-col .wrap { padding: 16px 14px 48px; }
  html[data-ui="a"] .nav-a { flex-direction: row; overflow-x: auto; padding: 6px 4px; gap: 4px; }
  html[data-ui="a"] .nav-a .side-group, html[data-ui="a"] .nav-a .side-foldbtn { display: none; }
  html[data-ui="a"] .nav-a .side-fold, html[data-ui="a"] .nav-a .side-foldbody { display: contents; }
  html[data-ui="a"] .nav-a .nav-item { flex: 0 0 auto; padding: 8px 10px; min-height: 40px; }
  html[data-ui="a"] .nav-a .nav-item.nav-sub { margin-left: 0; border-left: 0; border-radius: 6px; font-size: 14px; min-height: 40px; padding-left: 10px; }
  html[data-ui="a"] .nav-a .aidot { margin-left: 4px; }
  html[data-ui="a"] .ui-switch { display: none; }
}
@media (min-width: 601px) and (max-width: 900px) {
  html[data-ui="a"] .sidebar { width: 176px; flex: 0 0 176px; padding: 0 6px; }
  html[data-ui="a"] .main-col .wrap { padding: 20px 18px 40px; }
}

/* ============ 단가비교 안쪽(A안 2차) — 거래처 색은 작은 표시·1위 막대에만, 나머지는 회색·검정 ============ */
html[data-ui="a"] .cmp { font-size: 14px; --rowline: #eceef1; }
html[data-ui="a"] .cmp .card { padding: 14px 16px; margin-bottom: 12px; border-color: #e8e8e8; }
html[data-ui="a"] .cmp .cmp-tabs { display: inline-flex; gap: 2px; padding: 3px; background: #f1f2f4; margin-bottom: 12px; }
html[data-ui="a"] .cmp .cmp-tabs .ct { padding: 6px 18px; border: 0; background: transparent; color: #5f6368; font-weight: 500; font-size: 14px; }
html[data-ui="a"] .cmp .cmp-tabs .ct.on { background: #fff; color: #111; font-weight: 600; }
html[data-ui="a"] .cmp .cmp-sec .lead, html[data-ui="a"] .cmp .cmp-pick .lead, html[data-ui="a"] .cmp .cmp-now .lead { font-size: 12px; font-weight: 400; color: #5f6368; }
html[data-ui="a"] .cmp .cmp-sec a { padding: 4px 14px; border: 1px solid #d1d5db; background: #fff; color: #3c4043; font-weight: 500; font-size: 13px; }
html[data-ui="a"] .cmp .cmp-sec a.on { background: #1d1f20; border-color: #1d1f20; color: #fff; font-weight: 600; }
html[data-ui="a"] .cmp .cmp-pick .sp { padding: 3px 12px; border: 1px solid var(--sc, #d1d5db); background: #fff; color: var(--sc, #5f6368); font-weight: 600; }
/* 거래처 단추: 켜진 것은 거래처 색 50% 투명 바탕(2026-10-23 사장님) */
html[data-ui="a"] .cmp .cmp-pick .sp.on { background: color-mix(in srgb, var(--sc, #1d1f20) 50%, transparent); border-color: var(--sc, #1d1f20); color: #111; font-weight: 700; }
html[data-ui="a"] .cmp .rfbtn { border: 1px solid #d1d5db; background: #fff; color: #111; font-weight: 600; padding: 4px 12px; }
html[data-ui="a"] .cmp .rfbtn:hover { background: #f1f2f4; }

/* 거래처 카드: 흰 바탕·회색 테두리, 이름 앞에 거래처 색 네모, 우세 개수는 큰 숫자 */
html[data-ui="a"] .cmp .cmp-sups { gap: 10px; }
html[data-ui="a"] .cmp .sup { background: #fff; color: #111; border: 1px solid #e8e8e8; }
html[data-ui="a"] .cmp .sup .nm { font-size: 15px; font-weight: 600; }
html[data-ui="a"] .cmp .sup .nm::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--sup, #5f6368); margin-right: 8px; vertical-align: 1px; }
html[data-ui="a"] .cmp .sup .dt, html[data-ui="a"] .cmp .sup .win small, html[data-ui="a"] .cmp .sup .vas .vl, html[data-ui="a"] .cmp .sup .vtxt { color: #5f6368; opacity: 1; }
html[data-ui="a"] .cmp .sup .vas .vl { font-weight: 400; }
html[data-ui="a"] .cmp .sup .win b { font-size: 26px; font-weight: 600; color: #111; font-variant-numeric: tabular-nums; }
html[data-ui="a"] .cmp .sup .vas button.vp { background: #f1f2f4; color: #3c4043; font-weight: 500; }
html[data-ui="a"] .cmp .sup .vas button.vp.on { background: #1d1f20; color: #fff; }
html[data-ui="a"] .cmp .sup-top:hover .nm { text-decoration: underline; }

/* 조건 줄: 알록달록한 윤곽 버튼을 모두 같은 회색 윤곽, 켜진 것은 검정 */
html[data-ui="a"] .cmp .cmp-btns .cb { border: 1px solid #d1d5db; background: #fff; color: #111; font-weight: 500; padding: 3px 12px; }
html[data-ui="a"] .cmp .cmp-btns .cb:hover { background: #f1f2f4; }
html[data-ui="a"] .cmp .cmp-btns .cb.main, html[data-ui="a"] .cmp .cmp-btns .cb.best, html[data-ui="a"] .cmp .cmp-btns .cb.sale, html[data-ui="a"] .cmp .cmp-btns .cb.cash { border-color: #d1d5db; color: #111; }
html[data-ui="a"] .cmp .cmp-btns .cb.main.on, html[data-ui="a"] .cmp .cmp-btns .cb.best.on, html[data-ui="a"] .cmp .cmp-btns .cb.sale.on, html[data-ui="a"] .cmp .cmp-btns .cb.cash.on { background: #1d1f20; border-color: #1d1f20; color: #fff; }
html[data-ui="a"] .cmp .cmp-btns .cb.share { background: #1d1f20; border-color: #1d1f20; color: #fff; font-weight: 600; }
html[data-ui="a"] .cmp .cmp-btns .cb-mg { font-weight: 500; }
html[data-ui="a"] .cmp .cmp-slots { border-color: #e8e8e8; background: #f6f7f9; }
html[data-ui="a"] .cmp .cmp-slots .sl { border: 1px solid #d1d5db; color: #111; background: #fff; font-weight: 500; }
html[data-ui="a"] .cmp .cmp-slots .sl.on { background: #1d1f20; border-color: #1d1f20; color: #fff; }
html[data-ui="a"] .cmp .cmp-slots .sl.empty { color: #5f6368; border-style: dashed; opacity: 1; }
html[data-ui="a"] .cmp .cmp-chip { background: #eceef1; color: #111; font-weight: 500; }
html[data-ui="a"] .cmp .seg { background: #f1f2f4; border: 0; }
html[data-ui="a"] .cmp .seg span { font-weight: 500; }
html[data-ui="a"] .cmp .seg input:checked + span { background: #fff; color: #111; font-weight: 600; box-shadow: none; }
html[data-ui="a"] .cmp .cmp-f > .ttl { font-weight: 400; }
html[data-ui="a"] .cmp .fchips .fc { border: 1px solid #d1d5db; font-weight: 500; }
html[data-ui="a"] .cmp .fchips .fc.on { background: #1d1f20; border-color: #1d1f20; color: #fff; }
html[data-ui="a"] .cmp .adp .svb button { border-color: #d1d5db; }

/* 표(가독성 보정 2026-10-21): 줄·칸 구분선은 또렷하게, 머리글은 거래처 색 옅은 바탕+색 밑줄, 1위 칸은 거래처 색 옅은 바탕+굵은 숫자+색 밑줄, 막대는 뺌 */
html[data-ui="a"] .cmp .cmp-tbl { border: 1px solid #d3d7dd; }
html[data-ui="a"] .cmp .cmp-tbl th, html[data-ui="a"] .cmp .cmp-tbl td { border: 0; border-bottom: 1px solid #dfe2e7; background: #fff; }
html[data-ui="a"] .cmp .cmp-tbl th + th, html[data-ui="a"] .cmp .cmp-tbl td + td { border-left: 1px solid #eceef1; }
html[data-ui="a"] .cmp .cmp-tbl th { color: #3c4043; font-weight: 600; font-size: 12px; background: #f3f4f6; border-bottom: 1px solid #c9ccd1; }
html[data-ui="a"] .cmp .cmp-tbl th.s { color: #111; font-weight: 700; font-size: 13px; background: color-mix(in srgb, var(--sup, #5f6368) 13%, #fff); border-bottom: 3px solid var(--sup, #5f6368); }
html[data-ui="a"] .cmp .cmp-tbl th .fb { border: 1px solid #c9ccd1; background: #fff; color: #5f6368; }
html[data-ui="a"] .cmp .cmp-tbl th .fb.on { background: #1d1f20; border-color: #1d1f20; color: #fff; }
html[data-ui="a"] .cmp .cmp-tbl td.mdl { border-left: 0; background: #fff; background-image: none; }
html[data-ui="a"] .cmp .cmp-tbl td .nm1 { font-size: 14px; font-weight: 700; color: #111; }
html[data-ui="a"] .cmp .cmp-tbl td .mc { color: #5f6368; font-size: 11px; }
html[data-ui="a"] .cmp .cmp-tbl td .stag { font-weight: 700; }
html[data-ui="a"] .cmp .cmp-tbl tr.snew td { border-top: 1px solid #b8bcc4; }
html[data-ui="a"] .cmp .cmp-tbl tr:hover td:not([class^="w-"]) { background-image: none; background: #f6f7f9; }
html[data-ui="a"] .cmp .cmp-tbl .tot { font-size: 18px; font-weight: 600; color: #111; }
html[data-ui="a"] .cmp .cmp-tbl .tot.neg { color: #c4242a; }
html[data-ui="a"] .cmp .cmp-tbl td[class^="w-"] { background: color-mix(in srgb, var(--sup, #5f6368) 13%, #fff); box-shadow: inset 0 -3px 0 var(--sup, #5f6368); }
html[data-ui="a"] .cmp .cmp-tbl td[class^="w-"] .tot { color: #000; font-weight: 800; }
html[data-ui="a"] .cmp .cmp-tbl .sp { color: #3c4043; font-weight: 600; }
html[data-ui="a"] .cmp .cmp-tbl .sp.cashp { color: #3c4043; }
html[data-ui="a"] .cmp .cmp-tbl .diff { color: #3c4043; font-weight: 600; }
html[data-ui="a"] .cmp .cmp-tbl tr.grp td { background: #e9ebef; color: #111; font-size: 12px; font-weight: 700; border-bottom: 1px solid #c9ccd1; border-left: 0; }
html[data-ui="a"] .cmp .pill-w { background: color-mix(in srgb, var(--sup, #94a0b8) 16%, #fff); color: #111; border: 0; font-weight: 700; }
html[data-ui="a"] .cmp .pill-w { padding: 2px 6px; font-size: 12px; word-break: keep-all; white-space: normal; }
html[data-ui="a"] .cmp .cmp-tbl th .lb { word-break: keep-all; }
html[data-ui="a"] .cmp .cmp-tbl th.s { font-size: 13px; }
html[data-ui="a"] .cmp .brk { border-color: #c9ccd1; }

/* 조건 영역 단순화: 아래 선택칸과 같은 내용을 한 번 더 보여 주던 요약 알약은 숨김, 선택된 칸은 검정으로 또렷하게 */
html[data-ui="a"] .cmp .cmp-now .cmp-chip { display: none; }
html[data-ui="a"] .cmp .seg input:checked + span { background: #1d1f20; color: #fff; font-weight: 600; box-shadow: none; }
html[data-ui="a"] .cmp .seg span { color: #3c4043; }
html[data-ui="a"] .cmp .sup { border-top: 3px solid var(--sup, #d1d5db); }
html[data-ui="a"] .cmp .sup .win b { font-weight: 700; }
/* ============ 테두리 구분(2026-10-21 사장님 '크기가 아니라 테두리의 구분이 문제'): 새 디자인이 선을 너무 옅게·적게 써서 영역끼리 섞여 보임 →
   선 색을 진하게, 표는 칸마다 격자, 버튼·입력칸·분할 선택은 또렷한 윤곽, 큰 구역(시트·카드·거래처 카드)은 눈에 띄는 테두리 ============ */
html[data-ui="a"] { --line: #c9ced6; --rowline: #c5cad2; }
html[data-ui="a"] .main-col { border-color: #aeb4be; }
html[data-ui="a"] .card { border-color: #c0c6cf; }
html[data-ui="a"] input, html[data-ui="a"] select, html[data-ui="a"] textarea { border-color: #9aa1ab; }
html[data-ui="a"] .btn { border-color: #9aa1ab; }
html[data-ui="a"] .btn:hover, html[data-ui="a"] .btn.primary { border-color: #000; }
html[data-ui="a"] .sb-toggle, html[data-ui="a"] .ui-i, html[data-ui="a"] .fold-ic { border-color: #9aa1ab; }
html[data-ui="a"] .tbl th, html[data-ui="a"] .tbl td { border-bottom-color: #cfd4dc; }
html[data-ui="a"] .cmp .cmp-tabs { border: 1px solid #aeb4be; }
html[data-ui="a"] .cmp .cmp-sec a, html[data-ui="a"] .cmp .cmp-pick .sp, html[data-ui="a"] .cmp .cmp-btns .cb, html[data-ui="a"] .cmp .cmp-slots .sl, html[data-ui="a"] .cmp .fchips .fc, html[data-ui="a"] .cmp .rfbtn { border-color: #9aa1ab; }
html[data-ui="a"] .cmp .cmp-slots { border-color: #aeb4be; }
html[data-ui="a"] .cmp .seg { border: 1px solid #9aa1ab; background: #fff; padding: 0; gap: 0; }
html[data-ui="a"] .cmp .seg label + label { border-left: 1px solid #9aa1ab; }
html[data-ui="a"] .cmp .seg span { padding: 6px 4px; }
html[data-ui="a"] .cmp .sup { border-color: #aeb4be; border-top: 3px solid var(--sup, #aeb4be); }
html[data-ui="a"] .cmp .sup .vas button.vp { border: 1px solid #aeb4be; }
html[data-ui="a"] .cmp .sup .vas button.vp.on { border-color: #000; }
html[data-ui="a"] .cmp .cmp-tbl { border: 1px solid #8e96a2; }
html[data-ui="a"] .cmp .cmp-tbl th, html[data-ui="a"] .cmp .cmp-tbl td { border: 1px solid #c5cad2; }
html[data-ui="a"] .cmp .cmp-tbl th { border-bottom: 1px solid #8e96a2; }
html[data-ui="a"] .cmp .cmp-tbl tr.snew td { border-top: 2px solid #8e96a2; }
html[data-ui="a"] .cmp .cmp-tbl tr.grp td { border-top: 1px solid #8e96a2; border-bottom: 1px solid #8e96a2; border-left: 0; border-right: 0; }
html[data-ui="a"] .cmp .pill-w { border: 1px solid color-mix(in srgb, var(--sup, #94a0b8) 55%, #fff); }
html[data-ui="a"] .cmp .brk { border-color: #8e96a2; }
/* ============ 모서리: 거의 각지게(2px) — 둥근 곳 전부 (체크·라디오 상자는 기본 모양 그대로) ============ */
html[data-ui="a"] *, html[data-ui="a"] *::before, html[data-ui="a"] *::after { border-radius: 2px !important; }
html[data-ui="a"] input[type="checkbox"], html[data-ui="a"] input[type="radio"] { border-radius: revert !important; }

/* 모델명 칸: 계열(시리즈) 색 띠 3px + 은은한 그라데이션 10% (예전 디자인 가독성 복원, 과하지 않게 2026-10-21) */
html[data-ui="a"] .cmp .cmp-tbl td.mdl { border-left: 3px solid var(--sc, #94a0b8); background-color: #fff; background-image: linear-gradient(90deg, color-mix(in srgb, var(--sc, #94a0b8) 10%, #fff), #fff 78%); }
html[data-ui="a"] .cmp .cmp-tbl tr:hover td.mdl { background-color: #fff; background-image: linear-gradient(90deg, color-mix(in srgb, var(--sc, #94a0b8) 16%, #fff), #f6f7f9 78%); }
html[data-ui="a"] .ctoggle { padding: 0; width: 30px; height: 30px; }
html[data-ui="a"] .cmp .cmp-pick .sp[data-sid] { border-color: var(--sc, #9aa1ab); }   /* 거래처 단추 테두리는 거래처 색(위 공통 테두리 규칙보다 뒤) */