/* ════════════════════════════════════════════════════════════════════
   새 화면 A · 업무 콘솔형 (2026-10-15 사장님 승인)
   참고: SAP Fiori Horizon (흰 셸바·밑줄 탭·메시지 띠·옅게 칠한 표 머리)
         Microsoft Fluent 2 / Azure 포털 (연회색 바탕 + 흰 카드 가는 테두리,
         4px 각진 버튼, 어둡게는 남색이 아닌 중립 차콜)
   원칙: 카드는 그림자가 아니라 테두리로 바탕과 나눈다.

   ★ 규칙은 전부 html[data-ui="a"] 아래다. 그 표시는 서버(로컬서버.화면시안)가
     테스트에서만 붙인다. 운영에는 표시가 없어 이 파일이 한 줄도 안 먹는다.
     05_도구/검증/ui_switch_regression.py ⑥ 이 그것을 본다.
   ★ 그 회귀는 선택자를 쉼표로 자른다. 그래서 :is()/:where()/:not()/:has() 괄호
     안에는 쉼표를 쓰지 않는다 — 쉼표 뒤 조각이 '범위 밖' 선택자로 잡힌다.
   ★ 우선순위: 접두 html[data-ui="a"] 가 (0,1,1) 을 더한다. 공통.css 의 클래스
     하나짜리 규칙(0,1,0)보다 세다. 그래서
       - 요소 규칙(button·th·code …)을 덮을 때는 :where() 로 감싸 공통.css 의
         요소 규칙과 같은 무게로 둔다 → 공통.css 의 클래스 규칙이 지금처럼 이긴다.
       - 바탕 클래스를 덮으면 그 변형(.활성·.현재선택 …)도 여기서 다시 적는다.
   ★ 색은 1·2절 토큰에만 둔다. 공통.css 의 :root 토큰을 A 값으로 다시 정의하면
     앱이 이미 그 변수를 쓰고 있어 대부분이 저절로 바뀐다. 아래 절들은 토큰으로
     안 되는 자리(모양·리터럴 색·글자/바탕 겸용 토큰)만 덮는다.
   ★ 손대지 않는 것: PL 흰 종이 미리보기(.PL양식-틀/.PL양식-표 — 두 테마 모두
     흰 종이·검은 글자), 밝은 제품 자동완성 목록(.pm-자동완성-목록 — 사장님 지시).
   ════════════════════════════════════════════════════════════════════ */


/* ── 1. 색 토큰 — 밝게 ─────────────────────────────────────────────
   data-theme 이 아직 없을 때(스크립트가 막힌 경우)도 밝게로 그린다.
   2절(어둡게)과 속성 목록이 같다 — 하나를 더하면 둘 다 더한다. */
html[data-ui="a"],
html[data-ui="a"][data-theme="light"] {
  color-scheme: light;

  /* 공통.css :root 토큰 — A 값으로 다시 정의 */
  --bg-base:     #f2f4f7;   /* 바탕(캔버스) */
  --bg-elev-1:   #f5f7f9;   /* 카드 안 오목한 면 — 요약 줄·업로드 상자 (머리띠는 --a-bar 로 따로) */
  --bg-elev-2:   #ffffff;   /* 카드(section)·모달·표 바탕 */
  --bg-elev-3:   #f5f7f9;   /* 표 머리·작은 카드 */
  --bg-elev-4:   #eef1f5;   /* 한 단계 더 — 누른 면 */
  --bg-input:    #ffffff;
  --bg-output:   #f5f7f9;   /* pre.output */

  --text-main:      #1f2a36;
  --text-secondary: #45515e;
  --text-muted:     #5d6976;
  --text-strong:    #111a24;
  --text-dim:       #687380;   /* 흰 바탕 4.8:1 — 입력칸 안내글·바닥줄 */

  --border:         #d6dce4;
  --border-strong:  #b9c2cc;
  --border-soft:    #e7ebf0;

  /* --accent 는 글자색(링크·summary)과 채운 바탕(hover·활성) 두 가지로 쓰인다.
     밝게는 하나로 둘 다 된다. 어둡게는 나눠야 해서 채운 쪽 선택자를 아래에서 덮는다. */
  --accent:         #0f6cbd;
  --accent-hover:   #0c5ca3;
  --accent-dark:    #0f6cbd;   /* 기본 버튼 바탕 = primary */
  --accent-soft-bg: #e7f0fa;

  /* 상태색 — 검사성적서.js·예상PL.js 가 글자색으로도 쓴다. 흰 바탕에서 읽히는 진한 값 */
  --success:      #1b6b32;
  --success-bg:   #e6f4e9;
  --success-text: #1b6b32;
  --danger:       #b3261e;
  --danger-bg:    #fdeceb;
  --danger-text:  #b3261e;
  --warning:      #8a4b00;
  --warning-bg:   #fdf2de;
  --warning-text: #8a4b00;
  --info:         #0a6b73;
  --info-bg:      #e2f3f4;

  --row-hover-bg:    #f3f7fc;
  --row-selected-bg: #e6f0fb;

  --shadow-1: 0 1px 2px rgba(17, 26, 36, 0.06);
  --shadow-2: 0 8px 24px rgba(17, 26, 36, 0.12);

  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;

  /* index.html #rw-대상폼 fieldset 이 var(--line,#ddd) 를 쓴다. 운영엔 없어 #ddd 그대로 */
  --line: #d6dce4;

  /* A 전용 토큰 (운영에는 없다 — JS 의 var(--a-이름, 원래색) 도 운영에선 원래색) */
  --a-font: "IBM Plex Sans KR", system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --a-bar: #ffffff;
  --a-bar-border: #d9dee5;
  --a-subbar: #f8fafb;
  --a-surface: #ffffff;
  --a-surface-2: #f5f7f9;
  --a-input: #ffffff;
  --a-text: #1f2a36;
  --a-text-2: #45515e;
  --a-muted: #5d6976;
  --a-strong: #111a24;
  --a-border: #d6dce4;
  --a-border-soft: #e7ebf0;
  --a-control: #7d8896;          /* 입력칸 테두리 — 의미 있는 테두리라 3:1 이상 */
  --a-control-hover: #556170;
  --a-btn-border: #b9c2cc;
  --a-btn-hover: #f1f4f7;
  --a-btn-press: #e4e9ef;
  --a-hover: #eef1f5;
  --a-tab-hover-line: #b9c2cc;
  --a-primary: #0f6cbd;
  --a-primary-hover: #0c5ca3;
  --a-on-primary: #ffffff;
  --a-accent: #0f6cbd;
  --a-accent-soft: #e7f0fa;
  --a-accent-line: #bcd5f0;
  --a-accent-ink: #0b549a;
  --a-focus: #0b4f94;
  --a-shadow: rgba(17, 26, 36, 0.06);
  --a-menu-shadow: 0 8px 24px rgba(17, 26, 36, 0.12);
  --a-dialog-shadow: 0 8px 28px rgba(17, 26, 36, 0.16);
  --a-overlay: rgba(17, 26, 36, 0.4);
  --a-ok-ink: #1b6b32;
  --a-ok-bg: #e6f4e9;
  --a-ok-border: #9fd0aa;
  --a-ok-solid: #2e8a45;
  --a-info-ink: #0a6b73;
  --a-warn-ink: #8a4b00;
  --a-warn-bg: #fdf2de;
  --a-warn-bg-hover: #fae6c2;
  --a-warn-border: #e7b465;
  --a-warn-solid: #c46a00;
  --a-danger-ink: #b3261e;
  --a-danger-bg: #fdeceb;
  --a-danger-bg-hover: #fadbd8;
  --a-danger-border: #eba59f;
  --a-danger-solid: #c8372d;
  --a-neutral-ink: #4b5663;
  --a-neutral-bg: #eef1f4;
  --a-neutral-border: #cdd4dc;
  --a-violet-ink: #6d28d9;
  --a-violet-bg: #f3e8ff;
  --a-disabled-bg: #eef1f4;
  --a-disabled-border: #dde2e8;
  --a-disabled-ink: #8a95a3;
  --a-scroll-thumb: #b9c2cc;
  --a-scroll-thumb-hover: #8f99a6;
  /* 적재도 무대 — 캔버스 선색(적재도.js)이 어두운 바탕 기준이라 두 테마 모두 어둡게 둔다 */
  --a-stage-bg: #1e1f21;
  --a-stage-ink: #9a9fa8;
}


/* ── 2. 색 토큰 — 어둡게 (남색이 아닌 중립 차콜, 카드는 바탕보다 한 단계 밝게) ── */
html[data-ui="a"][data-theme="dark"] {
  color-scheme: dark;

  --bg-base:     #161718;
  --bg-elev-1:   #1a1b1d;
  --bg-elev-2:   #212225;
  --bg-elev-3:   #292a2e;
  --bg-elev-4:   #34363b;
  --bg-input:    #1a1b1d;
  --bg-output:   #1a1b1d;

  --text-main:      #e4e6ea;
  --text-secondary: #b8bcc4;
  --text-muted:     #9a9fa8;
  --text-strong:    #f6f7f9;
  --text-dim:       #868b94;   /* 카드 위 4.6:1 */

  --border:         #33353a;
  --border-strong:  #484b52;
  --border-soft:    #2c2e32;

  /* 글자용 하늘색. 흰 글자 밑 채운 바탕(hover·활성)은 아래에서 --a-primary 로 덮는다 */
  --accent:         #5ba8f5;
  --accent-hover:   #8cc4fa;
  --accent-dark:    #1c6dc2;
  --accent-soft-bg: #1d3046;

  --success:      #84d496;
  --success-bg:   #1b3022;
  --success-text: #84d496;
  --danger:       #f4a199;
  --danger-bg:    #3a1f1e;
  --danger-text:  #f4a199;
  --warning:      #f2c06a;
  --warning-bg:   #352a15;
  --warning-text: #f2c06a;
  --info:         #72d0da;
  --info-bg:      #163135;

  --row-hover-bg:    #292b2f;
  --row-selected-bg: #1e3044;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.4);

  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;

  --line: #33353a;

  --a-font: "IBM Plex Sans KR", system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
  --a-bar: #1e1f21;
  --a-bar-border: #303236;
  --a-subbar: #1a1b1d;
  --a-surface: #212225;
  --a-surface-2: #292a2e;
  --a-input: #1a1b1d;
  --a-text: #e4e6ea;
  --a-text-2: #b8bcc4;
  --a-muted: #9a9fa8;
  --a-strong: #f6f7f9;
  --a-border: #33353a;
  --a-border-soft: #2c2e32;
  --a-control: #73777f;
  --a-control-hover: #9a9fa8;
  --a-btn-border: #484b52;
  --a-btn-hover: #2c2d31;
  --a-btn-press: #34363b;
  --a-hover: #2a2b2f;
  --a-tab-hover-line: #5a5e66;
  --a-primary: #1c6dc2;
  --a-primary-hover: #2474c9;
  --a-on-primary: #ffffff;
  --a-accent: #5ba8f5;
  --a-accent-soft: #1d3046;
  --a-accent-line: #2c4d72;
  --a-accent-ink: #8cc4fa;
  --a-focus: #7ab8f7;
  --a-shadow: rgba(0, 0, 0, 0.4);
  --a-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  --a-dialog-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  --a-overlay: rgba(0, 0, 0, 0.6);
  --a-ok-ink: #84d496;
  --a-ok-bg: #1b3022;
  --a-ok-border: #3d7049;
  --a-ok-solid: #5cc274;
  --a-info-ink: #72d0da;
  --a-warn-ink: #f2c06a;
  --a-warn-bg: #352a15;
  --a-warn-bg-hover: #42341a;
  --a-warn-border: #806023;
  --a-warn-solid: #e8a33d;
  --a-danger-ink: #f4a199;
  --a-danger-bg: #3a1f1e;
  --a-danger-bg-hover: #48262a;
  --a-danger-border: #84413b;
  --a-danger-solid: #ec6b60;
  --a-neutral-ink: #c0c4cb;
  --a-neutral-bg: #2d2f33;
  --a-neutral-border: #44474d;
  --a-violet-ink: #c4b5fd;
  --a-violet-bg: #2e2340;
  --a-disabled-bg: #2d2f33;
  --a-disabled-border: #3a3c41;
  --a-disabled-ink: #80858e;
  --a-scroll-thumb: #484b52;
  --a-scroll-thumb-hover: #5a5e66;
  --a-stage-bg: #1e1f21;
  --a-stage-ink: #9a9fa8;
}


/* ── 3. 바탕·글꼴 ───────────────────────────────────────────────── */
html[data-ui="a"] body {
  font-family: var(--a-font);
  font-size: 14px;
  line-height: 1.5;
  background: var(--bg-base);
  color: var(--text-main);
}
/* 폼 컨트롤은 글꼴을 물려받지 않는다(브라우저 기본) — 본문 글꼴로 맞춘다 */
html[data-ui="a"] :where(button),
html[data-ui="a"] :where(input),
html[data-ui="a"] :where(select),
html[data-ui="a"] :where(textarea) {
  font-family: inherit;
}
html[data-ui="a"] :where(input[type="checkbox"]),
html[data-ui="a"] :where(input[type="radio"]) {
  accent-color: var(--a-primary);
}
/* 포커스 링 — 키보드로 옮길 때만 */
html[data-ui="a"] :where(button:focus-visible),
html[data-ui="a"] :where(a:focus-visible),
html[data-ui="a"] :where(summary:focus-visible) {
  outline: 2px solid var(--a-focus);
  outline-offset: 2px;
}


/* ── 4. 상단바 — 왼쪽 정렬 낮은 셸바. 제목 왼쪽, 밝게/어둡게·사용자 오른쪽 ──
   마크업 순서는 단추 → 사용자 → 제목이다. 손대지 않고 order 로 자리만 바꾼다. */
html[data-ui="a"] body > header {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 48px;
  padding: 0 20px;
  background: var(--a-bar);
  border-bottom: 0;              /* 아래 대분류 줄과 한 덩어리 */
  text-align: left;
}
html[data-ui="a"] body > header > h1 {
  order: -1;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 8px 0 0;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: 0;
  color: var(--a-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 시안의 'SN' 표식 — 마크업을 안 바꾸려고 ::before 로 그린다. 읽기 프로그램에는 숨긴다 */
html[data-ui="a"] body > header > h1::before {
  content: "SN";
  content: "SN" / "";
  display: inline-block;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  border-radius: 4px;
  background: var(--a-primary);
  color: var(--a-on-primary);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 28px;
  letter-spacing: 0.02em;
  text-align: center;
  vertical-align: top;
}

/* 맨 위 버전 — 제목 바로 옆. 제목이 남은 폭을 다 먹지 않게 하고, 버전 뒤를 비워
   밝게/어둡게·사용자를 오른쪽으로 민다. 채우는 것은 ui_theme.js (data-ver · data-build · data-env). */
html[data-ui="a"] body > header > h1 { flex: 0 1 auto; }
html[data-ui="a"] .app-version {
  order: -1;
  flex: 0 0 auto;
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  line-height: 1;
  color: var(--text-muted);
  white-space: nowrap;
}
html[data-ui="a"] .app-version[hidden] { display: none; }
html[data-ui="a"] .app-ver { font-weight: 600; color: var(--text-secondary); }
html[data-ui="a"] .app-build { font-family: var(--font-mono); font-size: 11px; }
/* 테스트 서버 표시 — 운영과 헷갈려 실제 일을 테스트에 하지 않게 */
html[data-ui="a"] .app-env {
  padding: 3px 7px;
  border-radius: 3px;
  border: 1px solid var(--warning);
  background: var(--warning-bg);
  color: var(--a-warn-ink);
  font-size: 11px;
  font-weight: 600;
}

/* 밝게/어둡게 단추 — 테두리 있는 진짜 단추로 보이게 (숨김은 [hidden] !important 가 지킨다) */
html[data-ui="a"] #theme-toggle {
  order: 1;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  min-height: 0;
  padding: 0 10px;
  border: 1px solid var(--a-btn-border);
  border-radius: 4px;
  background: var(--a-surface);
  color: var(--a-text-2);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transform: none;
}
html[data-ui="a"] #theme-toggle:hover {
  background: var(--a-btn-hover);
  border-color: var(--a-control);
  color: var(--a-strong);
}
html[data-ui="a"] #theme-toggle:active { background: var(--a-btn-press); }
html[data-ui="a"] .theme-toggle-icon {
  font-size: 14px;
  line-height: 1;
  color: var(--a-accent);
}

/* 사용자 — 둥근 알약 대신 낮은 사각 단추 */
html[data-ui="a"] .header-user {
  order: 2;
  flex: 0 0 auto;
  position: relative;            /* 드롭다운의 기준 */
  top: auto;
  right: auto;
  display: block;
  margin: 0;
  font-size: 14px;
  color: var(--a-text);
}
html[data-ui="a"] .user-info {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  min-height: 0;
  padding: 0 8px 0 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--a-text);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  transform: none;
}
html[data-ui="a"] .user-info:hover {
  background: var(--a-hover);
  border-color: transparent;
}
html[data-ui="a"] .user-info[aria-expanded="true"] { background: var(--a-btn-press); }
html[data-ui="a"] #user-이름 {
  color: var(--a-strong);
  font-weight: 500;
  white-space: nowrap;
}
html[data-ui="a"] .user-role {
  padding: 0 6px;
  border-radius: 3px;
  background: var(--a-accent-soft);
  color: var(--a-accent-ink);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 18px;
  white-space: nowrap;
}
html[data-ui="a"] .user-caret {
  padding: 0;
  font-size: 10px;
  color: var(--a-muted);
}

/* 사용자 드롭다운 — 테두리로 나누고 그림자는 옅게 */
html[data-ui="a"] .user-menu {
  top: calc(100% + 4px);
  right: 0;
  left: auto;
  padding: 4px;
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: 6px;
  box-shadow: var(--a-menu-shadow);
}
html[data-ui="a"] .user-menu-header { padding: 8px 10px; }
html[data-ui="a"] .user-menu-divider {
  border-top-color: var(--a-border-soft);
  margin: 4px 0;
}
html[data-ui="a"] .user-menu-item {
  padding: 7px 10px;
  border-radius: 4px;
  color: var(--a-text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  transform: none;
}
html[data-ui="a"] .user-menu-item:hover {
  background: var(--a-hover);
  color: var(--a-strong);
}
html[data-ui="a"] .user-menu-item.user-menu-위험:hover {
  background: var(--a-danger-bg);
  color: var(--a-danger-ink);
}
html[data-ui="a"] .user-menu-item:focus-visible { outline-offset: -2px; }
/* 아래 code 규칙(파란 글자)이 이 자리까지 바꾸지 않게 되돌린다 */
html[data-ui="a"] .user-menu-meta code {
  background: transparent;
  color: var(--text-secondary);
}


/* ── 5. 대분류 탭 — 상단바와 한 덩어리, 채운 알약 대신 밑줄 ── */
html[data-ui="a"] .menu-category-bar {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 4px;
  padding: 0 14px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  background: var(--a-bar);
  border-bottom: 1px solid var(--a-bar-border);
}
html[data-ui="a"] .menu-category-button {
  flex: 0 0 auto;
  height: 42px;
  min-height: 0;
  padding: 0 12px;
  border: 0;
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--a-text-2);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  box-shadow: none;
  transform: none;
}
html[data-ui="a"] .menu-category-button:hover {
  background: transparent;
  border-color: transparent transparent var(--a-tab-hover-line);
  color: var(--a-strong);
}
/* 활성 — 흰 글자를 쓰면 흰 바 위에서 사라진다. 글자색을 반드시 같이 바꾼다 */
html[data-ui="a"] .menu-category-button.category-active {
  background: transparent;
  border-color: transparent transparent var(--a-accent);
  color: var(--a-accent);
  font-weight: 600;
  box-shadow: none;
}
html[data-ui="a"] .menu-category-button:focus-visible {
  outline: 2px solid var(--a-focus);
  outline-offset: -2px;
}


/* ── 6. 소분류 탭 — 한 단계 조용한 둘째 줄, 선택된 것만 옅은 알약 ── */
html[data-ui="a"] .menu-subnav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 2px;
  min-height: 0;
  padding: 6px 14px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  background: var(--a-subbar);
  border-bottom: 1px solid var(--a-border);
}
html[data-ui="a"] .menu-subnav .menu-subnav-button {
  flex: 0 0 auto;
  height: 30px;
  min-height: 0;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--a-text-2);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transform: none;
}
html[data-ui="a"] .menu-subnav .menu-subnav-button:hover {
  background: var(--a-hover);
  border-color: transparent;
  color: var(--a-strong);
}
/* 활성 — 옅은 알약 위 흰 글자는 1.1:1 로 사라진다. 진한 파랑 글자로 */
html[data-ui="a"] .menu-subnav .menu-subnav-button.menu-active {
  background: var(--a-accent-soft);
  border-color: var(--a-accent-line);
  color: var(--a-accent-ink);
  font-weight: 600;
}
html[data-ui="a"] .menu-subnav .menu-subnav-button:focus-visible {
  outline: 2px solid var(--a-focus);
  outline-offset: -2px;
}


/* ── 7. 본문·카드(section) ─────────────────────────────────────── */
/* login.html 의 <main class="login-card"> 는 빼고 index 본문만 */
html[data-ui="a"] main:not(.login-card) { padding: 20px 24px 28px; }

html[data-ui="a"] section {
  padding: 16px;
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: 6px;
  box-shadow: 0 1px 2px var(--a-shadow);
}
html[data-ui="a"] section h2 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--a-strong);
}
/* 카드 머리 — 첫 제목은 구분선으로 몸통과 나눈다.
   인라인 style 로 여백을 따로 준 카드/제목은 음수 여백이 어긋나므로 뺀다. */
html[data-ui="a"] section:not([style]) > h2:first-child:not([style]) {
  margin: -16px -16px 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--a-border-soft);
}
html[data-ui="a"] section h3 {
  font-size: 14px;
  font-weight: 600;
}

/* 요약 숫자 칸 */
html[data-ui="a"] .카드 { border-radius: 6px; }
html[data-ui="a"] .카드.ok { border-color: var(--a-ok-border); }
html[data-ui="a"] .카드.fail { border-color: var(--a-danger-border); }

/* 홈 카테고리 카드 — 흰 면 + 가는 테두리, 들썩임·짙은 그림자 없이 */
html[data-ui="a"] .category-grid { gap: 12px; }
html[data-ui="a"] .category-card {
  padding: 12px 14px;
  background: var(--a-surface);
  border: 1px solid var(--a-border);
  border-radius: 6px;
}
html[data-ui="a"] .category-card:hover {
  background: var(--a-surface);
  border-color: var(--a-control);
  box-shadow: 0 1px 2px var(--a-shadow);
  transform: none;
}
html[data-ui="a"] .category-card-title {
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--a-border-soft);
  color: var(--a-strong);
  font-size: 14px;
  font-weight: 600;
}
html[data-ui="a"] .category-card-actions { gap: 6px; }
/* 카드 안 바로가기 — 소분류 탭 모양이 아니라 작은 보조 단추 */
html[data-ui="a"] .category-card .menu-subnav-button {
  height: 28px;
  min-height: 0;
  padding: 0 10px;
  border: 1px solid var(--a-btn-border);
  border-radius: 4px;
  background: var(--a-surface);
  color: var(--a-text);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transform: none;
}
html[data-ui="a"] .category-card .menu-subnav-button:hover {
  background: var(--a-btn-hover);
  border-color: var(--a-control);
  color: var(--a-strong);
}


/* ── 8. 입력칸 — 테두리 3:1, 4px, 포커스는 2px 실선 링 ──────────── */
html[data-ui="a"] .검색폼 input,
html[data-ui="a"] .검색폼 select,
html[data-ui="a"] .등록폼 input,
html[data-ui="a"] .등록폼 select,
html[data-ui="a"] .등록폼 textarea,
html[data-ui="a"] .모달-카드 input,
html[data-ui="a"] select.셀편집,
html[data-ui="a"] .선택모달-수량,
html[data-ui="a"] #dom-주문서텍스트 {
  border-color: var(--a-control);
  border-radius: 4px;
}
html[data-ui="a"] .검색폼 input:hover,
html[data-ui="a"] .검색폼 select:hover,
html[data-ui="a"] .등록폼 input:hover,
html[data-ui="a"] .등록폼 select:hover,
html[data-ui="a"] .등록폼 textarea:hover,
html[data-ui="a"] .모달-카드 input:hover,
html[data-ui="a"] select.셀편집:hover,
html[data-ui="a"] .선택모달-수량:hover,
html[data-ui="a"] #dom-주문서텍스트:hover {
  border-color: var(--a-control-hover);
}
html[data-ui="a"] select.셀편집 { border-radius: 4px; }
html[data-ui="a"] .선택모달-수량 { border-radius: 4px; }
/* 포커스 — 옛 액센트 번짐(rgba(79,125,243,.2)) 대신 실선 링 */
html[data-ui="a"] .검색폼 input:focus,
html[data-ui="a"] .검색폼 select:focus,
html[data-ui="a"] .등록폼 input:focus,
html[data-ui="a"] .등록폼 select:focus,
html[data-ui="a"] .등록폼 textarea:focus,
html[data-ui="a"] .모달-카드 input:focus,
html[data-ui="a"] #dom-주문서텍스트:focus,
html[data-ui="a"] select.셀편집:focus,
html[data-ui="a"] .선택모달-수량:focus {
  border-color: var(--a-focus);
  outline: 2px solid var(--a-focus);
  outline-offset: -1px;
  box-shadow: none;
}
/* 표 안 드롭다운 저장 표시 — 형광 번짐 대신 상태 바탕색 고리 */
html[data-ui="a"] select.셀편집.저장됨 {
  border-color: var(--success);
  box-shadow: 0 0 0 3px var(--a-ok-bg);
}
html[data-ui="a"] select.셀편집.저장실패 {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px var(--a-danger-bg);
}
/* 제품 자동완성 ▼ — SVG 안 색은 변수가 안 돼 테마별로 다시 그린다.
   입력칸 규칙은 background-color 만 쓴다(단축 속성을 쓰면 이 ▼ 가 지워진다). */
html[data-ui="a"] input.pm-자동완성-입력 {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%235d6976' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-ui="a"][data-theme="dark"] input.pm-자동완성-입력 {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239a9fa8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}


/* ── 9. 단추 — 4px 각진 사각형, 역할별 채움 ───────────────────────
   기본(채움) 색은 토큰(--accent-dark → primary)이 이미 바꾼다. */
html[data-ui="a"] :where(button) { border-radius: 4px; }
/* 공통.css 의 button:active { translateY(1px) } 를 끈다 — 시안 A 는 눌러도 제자리 */
html[data-ui="a"] :where(button:active) { transform: none; }
html[data-ui="a"] a.보조,
html[data-ui="a"] a.버튼 { border-radius: 4px; }
/* 크기 — 모양이 따로 있는 단추(탭·메뉴·칩·페이지 번호 …)는 뺀다 */
html[data-ui="a"] :where(button:not(.menu-category-button):not(.menu-subnav-button):not(.user-info):not(.user-menu-item):not(.theme-toggle):not(.적재도-순서단추):not(.적재도-칩):not(.po-링크):not(.페이지버튼)),
html[data-ui="a"] :where(a.보조),
html[data-ui="a"] :where(a.버튼) {
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.3;
}
/* 위 크기 규칙과 같은 무게인 공통.css 자리별 크기를 되살린다 */
html[data-ui="a"] .작업열 button,
html[data-ui="a"] .작업열 a {
  padding: 0.25rem 0.6rem;
  font-size: 0.8rem;
}
html[data-ui="a"] .적재도-바 button {
  padding: 0.42rem 0.85rem;
  font-size: 0.87rem;
}

/* hover — 공통.css 는 var(--accent) 로 칠한다. 어둡게에서 그건 글자용 하늘색이라
   흰 글자가 2.5:1 이 된다. 채움 전용 색으로. (:where 라 클래스 hover 는 지금처럼 이긴다) */
html[data-ui="a"] :where(button:hover) {
  background: var(--a-primary-hover);
  border-color: var(--a-primary-hover);
}
html[data-ui="a"] a.버튼:hover {
  background: var(--a-primary-hover);
  border-color: var(--a-primary-hover);
  color: var(--a-on-primary);
  text-decoration: none;
}
/* 꺼진 단추 — 흰 글자가 연회색 위에서 사라지지 않게 색을 정해 준다 */
html[data-ui="a"] :where(button:disabled) {
  background: var(--a-disabled-bg);
  border-color: var(--a-disabled-border);
  color: var(--a-disabled-ink);
  opacity: 1;
}

/* 보조 — 흰 면 + 회색 테두리 */
html[data-ui="a"] button.보조,
html[data-ui="a"] button[type="reset"],
html[data-ui="a"] a.보조 {
  background: var(--a-surface);
  border-color: var(--a-btn-border);
  color: var(--a-text);
}
html[data-ui="a"] button.보조:hover,
html[data-ui="a"] button[type="reset"]:hover,
html[data-ui="a"] a.보조:hover {
  background: var(--a-btn-hover);
  border-color: var(--a-control);
  color: var(--a-strong);
  text-decoration: none;
}

/* 위험 — 테두리 단추 (시안 btn-danger-ghost). 산호색 hover·흰 글자 3.4:1 을 없앤다 */
html[data-ui="a"] button.위험 {
  background: transparent;
  border-color: var(--a-danger-border);
  color: var(--a-danger-ink);
}
html[data-ui="a"] button.위험:hover {
  background: var(--a-danger-bg);
  border-color: var(--a-danger-solid);
  color: var(--a-danger-ink);
}

/* 꺼진 보조·위험 — 위 두 규칙보다 뒤에 둔다 */
html[data-ui="a"] button.보조:disabled,
html[data-ui="a"] button[type="reset"]:disabled,
html[data-ui="a"] button.위험:disabled {
  background: var(--a-disabled-bg);
  border-color: var(--a-disabled-border);
  color: var(--a-disabled-ink);
}

/* 선택된 파일 단추 — 보조 규칙이 덮어 버리므로 다시 적는다(공통.css 1186) */
html[data-ui="a"] .apl-선택btn.현재선택,
html[data-ui="a"] .ai-선택btn.현재선택,
html[data-ui="a"] .pl학습-선택btn.현재선택 {
  background: var(--a-primary);
  border-color: var(--a-accent);
  color: var(--a-on-primary);
  font-weight: 600;
}

/* PO번호 단추 */
html[data-ui="a"] button.po-링크 {
  background: var(--a-primary);
  color: var(--a-on-primary);
}
html[data-ui="a"] button.po-링크:hover {
  background: var(--a-primary-hover);
  filter: none;
}

/* 표 접기 바의 단추 — 보조 모양 */
html[data-ui="a"] .표스크롤 > .표접기바 button {
  background: var(--a-surface);
  border-color: var(--a-btn-border);
  color: var(--a-text);
}
html[data-ui="a"] .표스크롤 > .표접기바 button:hover {
  background: var(--a-btn-hover);
  border-color: var(--a-control);
  color: var(--a-strong);
}

/* 페이지 번호 — 보조 단추, 지금 쪽만 채움 */
html[data-ui="a"] .페이지네이션 .페이지버튼.활성 {
  background: var(--a-primary);
  border-color: var(--a-primary);
  color: var(--a-on-primary);
}

/* 적재도 범례 칩 — 공통 hover(파랑 채움)에 보조 글자색이 얹히지 않게 */
html[data-ui="a"] .적재도-칩:hover {
  background: var(--a-hover);
  border-color: var(--a-control);
  color: var(--a-strong);
}


/* ── 10. 표 — 촘촘한 행, 옅게 칠한 머리, 줄무늬 없음 ─────────────── */
html[data-ui="a"] .표스크롤 { border-radius: 4px; }
html[data-ui="a"] :where(th) {
  color: var(--a-text-2);
  font-size: 0.8125rem;
  border-bottom-color: var(--a-border);
}
/* 틀(.표스크롤) 테두리와 마지막 줄 아래선이 겹쳐 두 줄로 보이지 않게 */
html[data-ui="a"] .표스크롤 tbody tr:last-child td { border-bottom: 0; }
/* 행 바탕은 공통.css 와 같은 순서로 다시 쌓는다.
   줄무늬를 없애려면 (0,1,3) 짝수행 규칙보다 세야 하는데, 그러면 hover·선택·경고 행
   규칙까지 이겨 버린다. 그래서 그 뒤 규칙들을 같은 순서로 여기 다시 적는다. */
html[data-ui="a"] tbody tr:nth-child(even) td { background: transparent; }
html[data-ui="a"] tbody tr:hover td { background: var(--row-hover-bg); }
html[data-ui="a"] tbody tr.selected td,
html[data-ui="a"] tbody tr.선택강조 td {
  background: var(--row-selected-bg);
  color: var(--text-strong);
}
/* 학습 불가 행 — 옅은 노랑 위 옅은 노랑 글자(1.1:1)를 진한 갈색으로 */
html[data-ui="a"] tbody tr.학습불가 td {
  background: var(--a-warn-bg);
  color: var(--a-warn-ink);
}
/* 오류 행 — 흰 바탕 위 옅은 분홍(1.6:1)을 진한 빨강으로 */
html[data-ui="a"] tbody tr.행오류 td {
  background: var(--a-danger-bg);
  color: var(--a-danger-ink);
}
html[data-ui="a"] tbody tr.apl-selected td {
  background: var(--row-selected-bg);
  color: var(--text-strong);
}
html[data-ui="a"] tbody tr.학습불가:hover td {
  background: var(--a-warn-bg-hover);
  color: var(--a-warn-ink);
}
html[data-ui="a"] tbody tr.행오류:hover td {
  background: var(--a-danger-bg-hover);
  color: var(--a-danger-ink);
}
html[data-ui="a"] table.정적표 tbody tr:hover td { background: transparent; }

/* ★ PL 흰 종이 — 위 행 규칙이 우선순위로 이겨 버리므로 여기서 다시 고정한다.
   두 테마 모두 흰 종이·검은 글자, hover 강조 없음. 칸 테두리는 인라인이라 그대로. */
html[data-ui="a"] .PL양식-틀 {
  background: #ffffff;
  color: #1a1a1a;
  /* 글꼴도 운영 그대로 — 칸이 pre-wrap 이라 글자 폭이 바뀌면 칸 안 줄바꿈이 달라진다.
     미리보기는 엑셀 원본과 같아야 한다(사장님이 따로 물으신 자리). */
  font-family: system-ui, -apple-system, "Segoe UI", "Malgun Gothic", sans-serif;
}
/* 밝은 화면에서는 흰 종이가 흰 모달·카드 위에 놓여 경계가 사라진다 — 둘레선만 준다 */
html[data-ui="a"][data-theme="light"] .PL양식-틀 { box-shadow: 0 0 0 1px var(--a-border); }
html[data-ui="a"] .PL양식-표 td,
html[data-ui="a"] .PL양식-표 tbody tr:nth-child(even) td,
html[data-ui="a"] .PL양식-표 tbody tr:hover td {
  background: #ffffff;
  color: #1a1a1a;
}


/* ── 11. 상태 배지 — 옅은 바탕 + 같은 계열 테두리 + 점 ────────────
   바탕 규칙이 공통.css 변형(.활성 …)보다 세서 변형을 전부 다시 적는다. */
html[data-ui="a"] .뱃지 {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 8px;
  border: 1px solid var(--a-neutral-border);
  border-radius: 999px;
  background: var(--a-neutral-bg);
  color: var(--a-neutral-ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  white-space: nowrap;
  vertical-align: middle;
}
html[data-ui="a"] .뱃지::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
html[data-ui="a"] .뱃지.활성,
html[data-ui="a"] .뱃지.요청생성가능 {
  background: var(--a-ok-bg);
  border-color: var(--a-ok-border);
  color: var(--a-ok-ink);
}
html[data-ui="a"] .뱃지.비활성,
html[data-ui="a"] .뱃지.제품매칭실패,
html[data-ui="a"] .뱃지.수량오류 {
  background: var(--a-danger-bg);
  border-color: var(--a-danger-border);
  color: var(--a-danger-ink);
}
/* 재고부족 — 옅은 주황 위 옅은 주황 글자(1.45:1)였다 */
html[data-ui="a"] .뱃지.검증용,
html[data-ui="a"] .뱃지.확인필요,
html[data-ui="a"] .뱃지.재고부족 {
  background: var(--a-warn-bg);
  border-color: var(--a-warn-border);
  color: var(--a-warn-ink);
}
/* JS 가 색을 인라인으로 박은 배지(복합·확정 가능 …)는 그 색 그대로, 테두리만 감춘다 */
/*   ★ [style] 전체로 잡으면 글자 크기·여백만 인라인으로 준 배지(출고대기현황 .뱃지 활성 등)의
     테두리까지 사라진다 — 바탕색을 박은 것만 잡는다. */
html[data-ui="a"] .뱃지[style*="background"] { border-color: transparent; }

/* 이력표 작업 배지 */
html[data-ui="a"] table.이력표 .작업뱃지 { border-radius: 3px; }
html[data-ui="a"] table.이력표 .작업뱃지.사용여부변경 {
  background: var(--a-violet-bg);
  color: var(--a-violet-ink);
}

/* 상태 점 — 번짐 대신 바탕색 고리 */
html[data-ui="a"] .dot.ok {
  background: var(--a-ok-solid);
  box-shadow: 0 0 0 3px var(--a-ok-bg);
}
html[data-ui="a"] .dot.fail {
  background: var(--a-danger-solid);
  box-shadow: 0 0 0 3px var(--a-danger-bg);
}


/* ── 12. code·출력 ─────────────────────────────────────────────── */
/* 하늘색(#93c5fd)이 밝은 회색 위 1.7:1 — 품목코드·S/N 이 앱 전체에 깔려 있다 */
html[data-ui="a"] :where(code) { color: var(--a-accent-ink); }
/* 출력 상자 글자(#cbd5e1)가 밝은 바탕에서 1.4:1 — 토큰 글자색으로 */
html[data-ui="a"] .output { color: var(--text-main); }


/* ── 13. 알림 띠 (Fiori 메시지 띠 식) ─────────────────────────────── */
html[data-ui="a"] .form-result { border-radius: 4px; }
html[data-ui="a"] .form-result.success { border-color: var(--a-ok-border); }
html[data-ui="a"] .form-result.fail { border-color: var(--a-danger-border); }
html[data-ui="a"] .초기설정모달 .안내문 {
  border-color: var(--a-warn-border);
  border-radius: 4px;
}
html[data-ui="a"] details.위험접이 {
  border-color: var(--a-danger-border);
  border-radius: 6px;
}
html[data-ui="a"] .적재도-경고칸 { border-left-color: var(--a-warn-solid); }


/* ── 14. 모달·선택창 ──────────────────────────────────────────── */
/* 가림막 — 밝게는 검정 60%·남색 74% 가 너무 무겁다. 어둡게는 검정 60% */
html[data-ui="a"] .모달-배경,
html[data-ui="a"] .선택모달-오버레이 {
  background: var(--a-overlay);
}
html[data-ui="a"] .모달-카드,
html[data-ui="a"] .선택모달 {
  border-color: var(--a-border);
  border-radius: 8px;
  box-shadow: var(--a-dialog-shadow);
}
html[data-ui="a"] .선택모달-목록 { border-radius: 4px; }
html[data-ui="a"] .선택모달-옵션 { border-radius: 4px; }
html[data-ui="a"] .PO상세-요약 { border-radius: 4px; }


/* ── 15. 드롭다운·후보 목록 ───────────────────────────────────── */
html[data-ui="a"] .ir-드롭다운 { box-shadow: var(--a-menu-shadow); }
html[data-ui="a"] .ir-후보.현재선택,
html[data-ui="a"] .ir-드롭줄:hover,
html[data-ui="a"] .ir-드롭줄.현재선택 {
  background: var(--a-primary);
  color: var(--a-on-primary);
}


/* ── 16. 끌어다 놓기·업로드·운송 요약 ───────────────────────────── */
html[data-ui="a"] .드롭존 { border-radius: 6px; }
/* 끌고 있는 동안 — 고정 #eaf2ff 위 흰 글자(1.1:1)가 되던 자리 */
html[data-ui="a"] .드롭존.드래그중 {
  background: var(--a-accent-soft);
  color: var(--a-text);
}
html[data-ui="a"] .업로드박스 { border-radius: 6px; }
html[data-ui="a"] .운송요약 .항목 { border-radius: 6px; }
html[data-ui="a"] .일괄바 { border-radius: 6px; }
html[data-ui="a"] .적재도-바 { border-radius: 6px; }

/* 적재도 무대 — 캔버스 윤곽선이 밝은 무대에서 사라지므로 두 테마 모두 어둡게 */
html[data-ui="a"] .적재도-무대 { background: var(--a-stage-bg); }
html[data-ui="a"] .적재도-도움 { color: var(--a-stage-ink); }


/* ── 17. index.html 인라인 색 — 인라인이라 !important 가 있어야 이긴다 ── */
/* 입고 · 부속품 입고 칸 — 연보라 고정 바탕 위 흰 제목(어둡게 1.1:1). 강조는 옅은 파랑으로 */
html[data-ui="a"] section:has(#acc-품목코드) {
  background: var(--a-accent-soft) !important;
  border-color: var(--a-accent-line) !important;
}
html[data-ui="a"] section:has(#acc-품목코드) label,
html[data-ui="a"] #in-제품검색영역 label {
  color: var(--a-text-2) !important;
}
/* 회색 #d1d5db 테두리(1.47:1)·흰 칸 고정 */
html[data-ui="a"] #acc-품목코드,
html[data-ui="a"] #acc-수량,
html[data-ui="a"] #acc-로트,
html[data-ui="a"] #in-검색어 {
  border-color: var(--a-control) !important;
  background-color: var(--a-input);
  color: var(--a-text);
}
/* 고른 제품 표시 — 민트 고정 바탕 위 흰 글자(어둡게 1.2:1) */
html[data-ui="a"] #in-선택제품표시 {
  background-color: var(--a-ok-bg) !important;
  border-color: var(--a-ok-border) !important;
  color: var(--a-text);
}
/* 남색 #1e3a8a 글자 — 어둡게 1.5:1 */
html[data-ui="a"] #ai-선택파일명,
html[data-ui="a"] #pl학습-선택파일명,
html[data-ui="a"] #apl-선택파일명,
html[data-ui="a"] #op-신규폼영역 > summary {
  color: var(--a-accent-ink) !important;
}


/* ── 18. login.html — 그 파일의 <style> 이 이 파일보다 뒤라 접두로 이긴다 ── */
html[data-ui="a"] .login-card {
  border-color: var(--a-border);
  border-radius: 8px;
  box-shadow: 0 1px 2px var(--a-shadow);
}
html[data-ui="a"] .login-card input {
  border-color: var(--a-control);
  border-radius: 4px;
}
html[data-ui="a"] .login-card input:hover { border-color: var(--a-control-hover); }
html[data-ui="a"] .login-card input:focus {
  border-color: var(--a-focus);
  outline: 2px solid var(--a-focus);
  outline-offset: -1px;
  box-shadow: none;
}
html[data-ui="a"] .login-error {
  border-color: var(--a-danger-border);
  border-radius: 4px;
}


/* ── 18-2. 도움말 말풍선 ─────────────────────────────────────────
   숨은 말풍선도 자리를 차지해 휴대폰에서 문서 폭이 화면보다 넓어졌다
   (375px 화면에서 532px — 공통.css 그대로도 564px). 안 보일 때는 아예 빼 둔다. */
html[data-ui="a"] .도움말::after,
html[data-ui="a"] .도움말::before {
  display: none;
}
html[data-ui="a"] .도움말:hover::after,
html[data-ui="a"] .도움말:hover::before,
html[data-ui="a"] .도움말:focus::after,
html[data-ui="a"] .도움말:focus::before {
  display: block;
}


/* ── 19. 스크롤바 —공통.css 손잡이(--bg-elev-3)가 밝은 바탕과 같은 색이 된다 ── */
html[data-ui="a"]::-webkit-scrollbar-thumb,
html[data-ui="a"] ::-webkit-scrollbar-thumb {
  background: var(--a-scroll-thumb);
  border-color: var(--bg-base);
}
html[data-ui="a"]::-webkit-scrollbar-thumb:hover,
html[data-ui="a"] ::-webkit-scrollbar-thumb:hover {
  background: var(--a-scroll-thumb-hover);
}


/* ── 20. 좁은 화면 ────────────────────────────────────────────── */
@media (max-width: 720px) {
  html[data-ui="a"] .app-build { display: none; }
  /* 공통.css 720 규칙과 같은 폭에서 카드·본문 여백을 줄인다 */
  html[data-ui="a"] main:not(.login-card) { padding: 12px 12px 24px; }
  html[data-ui="a"] section { padding: 12px; }
  html[data-ui="a"] section:not([style]) > h2:first-child:not([style]) {
    margin: -12px -12px 12px;
    padding: 10px 12px;
  }
}
@media (max-width: 640px) {
  /* 상단바 — 낮게, 제목은 줄임표 */
  html[data-ui="a"] body > header {
    height: 44px;
    padding: 0 10px 0 12px;
    gap: 4px;
  }
  html[data-ui="a"] body > header > h1 { font-size: 14px; }
  html[data-ui="a"] body > header > h1::before {
    width: 26px;
    height: 26px;
    margin-right: 8px;
    font-size: 11px;
    line-height: 26px;
  }
  html[data-ui="a"] #theme-toggle {
    gap: 4px;
    padding: 0 8px;
  }
  html[data-ui="a"] .user-info {
    gap: 4px;
    padding: 0 6px;
  }
  html[data-ui="a"] .user-info .user-role { display: none; }

  /* 탭은 한 줄 유지, 옆으로 밀어서 본다 (스크롤바는 숨김) */
  html[data-ui="a"] .menu-category-bar,
  html[data-ui="a"] .menu-subnav {
    scrollbar-width: none;
  }
  html[data-ui="a"] .menu-category-bar::-webkit-scrollbar,
  html[data-ui="a"] .menu-subnav::-webkit-scrollbar {
    display: none;
  }
  html[data-ui="a"] .menu-category-bar {
    gap: 0;
    padding: 0 4px;
  }
  html[data-ui="a"] .menu-category-button {
    height: 40px;
    padding: 0 10px;
  }
  html[data-ui="a"] .menu-subnav { padding: 6px 8px; }
  html[data-ui="a"] .menu-subnav .menu-subnav-button {
    padding: 0 10px;
    font-size: 13px;
  }
}


/* ── 21. 움직임 — 색만 짧게, 모션 줄이기 설정이면 없음 ─────────────
   공통.css 는 transition: all .13s~.2s 를 조건 없이 건다. A 에서는 여기서만 켠다. */
html[data-ui="a"] :where(button),
html[data-ui="a"] .menu-category-button,
html[data-ui="a"] .menu-subnav-button,
html[data-ui="a"] .user-info,
html[data-ui="a"] .user-menu-item,
html[data-ui="a"] #theme-toggle,
html[data-ui="a"] .category-card,
html[data-ui="a"] a.보조,
html[data-ui="a"] a.버튼 {
  transition: none;
}
@media (prefers-reduced-motion: no-preference) {
  html[data-ui="a"] :where(button),
  html[data-ui="a"] .menu-category-button,
  html[data-ui="a"] .menu-subnav-button,
  html[data-ui="a"] .user-info,
  html[data-ui="a"] .user-menu-item,
  html[data-ui="a"] #theme-toggle,
  html[data-ui="a"] .category-card,
  html[data-ui="a"] a.보조,
  html[data-ui="a"] a.버튼 {
    transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
  }
  /* 공통.css 가 0.2s 로 건 두 자리 */
  html[data-ui="a"] .페이지푸터,
  html[data-ui="a"] select.셀편집 {
    transition-duration: 120ms;
  }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ui="a"] *,
  html[data-ui="a"] *::before,
  html[data-ui="a"] *::after {
    transition: none !important;
    animation: none !important;
  }
}