/* elmoa 화면 스타일.
 * 디자인 토큰은 Astryx(https://github.com/meta/astryx, MIT, Copyright (c) 2026 Meta Platforms, Inc.)
 * 커밋 b62ca6b(2026-11-10)의 core 기본 테마(밝은 쪽) 값을 옮겼다: 색·간격·크기·글자 크기·반경·그림자·포커스.
 * 화면 틀은 Astryx AppShell(elevated: 본문 배경 위 왼쪽 SideNav, 흰 작업면)과 SideNav·NavItem 규칙을 따랐다.
 * 변수 이름은 Astryx와 같게 두었다. 근거와 범위는 docs/adr/0003-ui-design-system.md에 있다.
 * 현장 PDA(Android 8.1의 오래된 Chrome일 수 있음) 때문에 :has, :is, :where, 컨테이너 쿼리, light-dark(), oklch(),
 * 8자리 16진 색, dvh를 쓰지 않는다(8자리 색은 rgba로 바꿨다). 지원하지 않는 기능은 꾸밈만 빠지고 동작은 그대로 되게 쓴다. */
:root {
  --color-background-surface: #ffffff;
  --color-background-body: #f1f4f7;
  --color-background-card: #ffffff;
  --color-background-muted: rgba(5, 54, 89, 0.047);
  --color-accent: #0064e0;
  --color-accent-muted: rgba(0, 130, 251, 0.2);
  --color-neutral: rgba(5, 54, 89, 0.1);
  --color-overlay-hover: rgba(5, 54, 89, 0.047);
  --color-overlay-pressed: rgba(5, 54, 89, 0.098);
  --color-text-primary: #0a1317;
  --color-text-secondary: #4e606f;
  --color-text-disabled: #a4b0bc;
  --color-text-accent: #0064e0;
  --color-on-accent: #ffffff;
  --color-info: #0064e0;
  --color-text-info: #042f97;
  --color-success: #0d8626;
  --color-success-muted: rgba(11, 153, 31, 0.2);
  --color-text-success: #09441f;
  --color-on-success-muted: #09441f;
  --color-warning: #e9af08;
  --color-warning-muted: rgba(226, 164, 0, 0.2);
  --color-text-warning: #753f07;
  --color-on-warning-muted: #753f07;
  --color-error: #e3193b;
  --color-error-muted: rgba(227, 25, 59, 0.2);
  --color-text-error: #7b0210;
  --color-on-error-muted: #7b0210;
  --color-border: rgba(5, 54, 89, 0.098);
  --color-border-emphasized: #ccd3db;
  --color-track: #ccd3db;
  /* 배지 색(Astryx Badge variant: background-<색>, text-<색>) */
  --color-background-red: rgba(227, 25, 59, 0.2);     --color-text-red: #7b0210;
  --color-background-orange: rgba(242, 121, 2, 0.2);  --color-text-orange: #6b2203;
  --color-background-yellow: rgba(226, 164, 0, 0.2);  --color-text-yellow: #753f07;
  --color-background-green: rgba(36, 187, 94, 0.2);   --color-text-green: #09441f;
  --color-background-blue: rgba(1, 113, 227, 0.2);    --color-text-blue: #042f97;
  --color-background-purple: rgba(121, 82, 255, 0.2); --color-text-purple: #3e0697;
  --color-background-gray: rgba(10, 19, 23, 0.2);     --color-text-gray: #0a1317;
  --radius-inner: 4px;
  --radius-element: 8px;
  --radius-container: 12px;
  --radius-page: 28px;
  --radius-full: 9999px;
  --shadow-low: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-med: 0 1px 2px rgba(0, 0, 0, 0.1), 0 2px 12px rgba(0, 0, 0, 0.1);
  --shadow-high: 0 2px 2px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.1);
  --spacing-0-5: 0.125rem; --spacing-1: 0.25rem; --spacing-2: 0.5rem; --spacing-3: 0.75rem; --spacing-4: 1rem;
  --spacing-5: 1.25rem; --spacing-6: 1.5rem; --spacing-8: 2rem; --spacing-12: 3rem;
  --size-element-sm: 28px; --size-element-md: 32px; --size-element-lg: 36px;
  /* 글자 위계: Astryx의 역할 이름(--text-<역할>-size/leading)을 따르고, 값은 한글 화면에 맞춰 elmoa가 정했다.
     한글은 같은 크기에서 라틴 글자보다 커 보여서 Astryx의 1.2배 단계(12·14·17·20·24·29) 대신 아래 단계를 쓴다.
     줄 높이는 한글 가독성을 위해 1.5 안팎으로 두고 4px 배수 근처에 맞췄다(크기/줄 높이, px).
       숫자 카드 28/36 > 화면 제목 24/32 > 구역 제목 18/28 > 소제목 15/24
       > 본문·표·입력 14/22 > 이름표·표 머리·안내 13/20 > 보조(배지·캡션) 12/18 */
  --text-display-size: 1.75rem;     --text-display-leading: 1.2857;
  --text-heading-1-size: 1.5rem;    --text-heading-1-leading: 1.3333;
  --text-heading-2-size: 1.125rem;  --text-heading-2-leading: 1.5556;
  --text-heading-3-size: 0.9375rem; --text-heading-3-leading: 1.6;
  --text-body-size: 0.875rem;       --text-body-leading: 1.5714;
  --text-label-size: 0.8125rem;     --text-label-leading: 1.5385;
  --text-supporting-size: 0.75rem;  --text-supporting-leading: 1.5;
  --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700;
  --focus-outline-width: 2px;
  --focus-outline-color: var(--color-accent);
  --focus-outline-offset: 3px;
  /* 왼쪽 메뉴 너비: Astryx SideNav 기본 260px을 한글 메뉴 길이에 맞춰 줄였다(elmoa가 정한 값) */
  --side-width: 232px;
  /* 글꼴: Noto Sans KR(fonts.css, 서버에 둔 가변 글꼴). 받지 못하면 PC에 깔린 Noto Sans KR, 맑은 고딕 순으로 쓴다 */
  --font-body: "Noto Sans KR Web", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --font-code: "D2Coding", ui-monospace, "SF Mono", Monaco, Consolas, "Liberation Mono", monospace;
}
/* Astryx의 터치 화면 보정: 손가락으로 쓰는 좁은 화면은 본문 16px, 조작 요소를 크게 */
@media (pointer: coarse) and (max-width: 1024px) {
  :root { --size-element-md: 44px; --size-element-lg: 48px;
    --text-body-size: 1rem; --text-body-leading: 1.5; --text-label-size: 0.9375rem; --text-label-leading: 1.4667;
    --text-supporting-size: 0.875rem; --text-supporting-leading: 1.4286;
    --text-heading-3-size: 1.0625rem; --text-heading-3-leading: 1.5294; --text-heading-2-size: 1.25rem; --text-heading-2-leading: 1.4; }
}

* { box-sizing: border-box; }
body { margin: 0; font-family: var(--font-body); font-size: var(--text-body-size); line-height: var(--text-body-leading);
  font-weight: var(--font-weight-normal); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  color: var(--color-text-primary); background: var(--color-background-body); }
a { color: var(--color-text-accent); text-decoration: none; } a:hover { text-decoration: underline; }
/* 키보드 포커스는 언제나 보이게 한다(스캔 입력칸이 어디인지도 보여 준다) */
a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus {
  outline: var(--focus-outline-width) solid var(--focus-outline-color); outline-offset: var(--focus-outline-offset); }
main:focus { outline: none; }
.skip { position: absolute; left: -9999px; top: 0; padding: var(--spacing-2) var(--spacing-4); background: var(--color-background-surface);
  color: var(--color-text-accent); font-weight: 600; z-index: 100; border-radius: var(--radius-element); box-shadow: var(--shadow-med); }
.skip:focus { left: var(--spacing-2); top: var(--spacing-2); }
.icon { width: 20px; height: 20px; flex-shrink: 0; vertical-align: middle; }

/* 화면 틀(Astryx AppShell elevated): 본문 배경 위 왼쪽 메뉴, 오른쪽은 흰 작업면(위 왼쪽 모서리만 둥글게) */
.side { position: fixed; top: 0; bottom: 0; left: 0; width: var(--side-width); display: flex; flex-direction: column;
  background: var(--color-background-body); z-index: 30; }
.side-head { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-4) var(--spacing-4) var(--spacing-3); }
.brand { display: flex; align-items: center; color: var(--color-text-primary); font-weight: var(--font-weight-bold); font-size: var(--text-heading-2-size); line-height: 1.2; white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand-mark { display: inline-block; width: 32px; height: 32px; line-height: 32px; margin-right: var(--spacing-2); border-radius: var(--radius-element);
  background: var(--color-accent); color: var(--color-on-accent); text-align: center; font-size: 18px; font-weight: 800; }
.brand-text small { display: block; font-size: var(--text-supporting-size); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); line-height: 1.4; }
.side-nav { flex: 1; overflow-y: auto; padding: 0 var(--spacing-2) var(--spacing-2); }
.side-section { padding: var(--spacing-1) 0; }
.side-title { padding: var(--spacing-3) var(--spacing-2) var(--spacing-1); font-size: var(--text-supporting-size); line-height: var(--text-supporting-leading); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); }
/* NavItem: 행 전체가 누르는 곳. 지금 화면은 중립 채움 + 굵게(Astryx selected), 아이콘은 강조색 */
.side-nav a { display: flex; align-items: center; min-height: var(--size-element-lg); padding: 0 var(--spacing-2); margin-bottom: var(--spacing-0-5);
  border-radius: var(--radius-element); color: var(--color-text-primary); white-space: nowrap; }
.side-nav a .icon { margin-right: var(--spacing-3); color: var(--color-text-secondary); }
.side-nav a:hover { background: var(--color-overlay-hover); text-decoration: none; }
.side-nav a:active { background: var(--color-overlay-pressed); }
.side-nav a[aria-current="page"] { background: var(--color-neutral); font-weight: var(--font-weight-semibold); }
.side-nav a[aria-current="page"] .icon { color: var(--color-accent); }
.side-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--spacing-3); border-top: 1px solid var(--color-border); }
.who { display: flex; align-items: center; min-width: 0; }
.avatar { width: 32px; height: 32px; line-height: 32px; flex-shrink: 0; margin-right: var(--spacing-2); border-radius: var(--radius-full);
  background: var(--color-accent-muted); color: var(--color-text-info); text-align: center; font-weight: 700; }
.who-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-label-size); line-height: var(--text-label-leading); font-weight: var(--font-weight-semibold); }
.who-text small { display: block; font-size: var(--text-supporting-size); line-height: var(--text-supporting-leading); font-weight: var(--font-weight-normal); color: var(--color-text-secondary); }
.who-actions { display: flex; flex-shrink: 0; }
/* 아이콘 단추(Astryx Button ghost, 아이콘만). 뜻은 aria-label과 title로 전한다 */
.icon-button, button.icon-button { display: inline-flex; align-items: center; justify-content: center; width: var(--size-element-md);
  height: var(--size-element-md); min-height: 0; padding: 0; margin: 0; border: 0; border-radius: var(--radius-element);
  background: transparent; color: var(--color-text-secondary); cursor: pointer; }
.icon-button:hover, button.icon-button:hover { background: var(--color-overlay-hover); color: var(--color-text-primary); box-shadow: none; text-decoration: none; }
button.side-close, .mobilebar, .scrim { display: none; }

main { margin-left: var(--side-width); margin-top: var(--spacing-2); min-height: calc(100vh - var(--spacing-2));
  padding: var(--spacing-6) var(--spacing-8) var(--spacing-12); background: var(--color-background-surface);
  border: 1px solid var(--color-border); border-right: 0; border-bottom: 0; border-top-left-radius: var(--radius-page); }
body.bare main { margin: 0; border: 0; border-radius: 0; background: none; min-height: 100vh; }
h1 { font-size: var(--text-heading-1-size); line-height: var(--text-heading-1-leading); font-weight: var(--font-weight-bold); margin: 0 0 var(--spacing-4); letter-spacing: -0.02em; }
h2 { font-size: var(--text-heading-2-size); line-height: var(--text-heading-2-leading); font-weight: var(--font-weight-semibold); margin: var(--spacing-6) 0 var(--spacing-2); letter-spacing: -0.01em; }
h3 { font-size: var(--text-heading-3-size); line-height: var(--text-heading-3-leading); font-weight: var(--font-weight-semibold); margin: var(--spacing-4) 0 var(--spacing-2); }
small { font-size: var(--text-supporting-size); color: var(--color-text-secondary); font-weight: var(--font-weight-normal); }
/* 제목 옆 건수·설명은 이름표 크기, 굵기는 본문 */
h1 small, h2 small, h3 small { font-size: var(--text-label-size); letter-spacing: 0; }

table { border-collapse: collapse; width: 100%; background: var(--color-background-card); margin: var(--spacing-2) 0;
  border: 1px solid var(--color-border-emphasized); border-radius: var(--radius-inner); }
th, td { border-bottom: 1px solid var(--color-border-emphasized); padding: var(--spacing-2) var(--spacing-3); text-align: left; vertical-align: top; }
th { background: var(--color-background-muted); color: var(--color-text-secondary); font-weight: var(--font-weight-semibold);
  font-size: var(--text-label-size); line-height: var(--text-label-leading); white-space: nowrap; }
tr:hover td { background: var(--color-overlay-hover); }
td.num, input.num { text-align: right; } td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-code); } .pre { white-space: pre; }
.small { font-size: var(--text-supporting-size); line-height: var(--text-supporting-leading); }
.hint { color: var(--color-text-secondary); font-size: var(--text-label-size); line-height: var(--text-label-leading); }
.warn { color: var(--color-text-error); }
.card { background: var(--color-background-card); border: 1px solid var(--color-border-emphasized); border-radius: var(--radius-container);
  padding: var(--spacing-3) var(--spacing-4); margin: var(--spacing-3) 0; }
.card.narrow { max-width: 400px; margin: 10vh auto 48px; padding: var(--spacing-8) var(--spacing-6); box-shadow: var(--shadow-med); }
.card.narrow .brand { margin-bottom: var(--spacing-6); }
.card.narrow form > button { width: 100%; min-height: var(--size-element-lg); margin-top: var(--spacing-2); }
td.bar { white-space: nowrap; } td.bar .meter { width: 72px; }
.card > h2:first-child { margin-top: var(--spacing-1); }
.row { display: flex; flex-wrap: wrap; gap: var(--spacing-3); align-items: flex-end; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3); }
label { display: flex; flex-direction: column; gap: var(--spacing-1); font-size: var(--text-label-size); line-height: var(--text-label-leading);
  color: var(--color-text-secondary); font-weight: var(--font-weight-medium); }
.card.narrow label { margin-bottom: var(--spacing-3); }
input, select, textarea { font: inherit; font-size: var(--text-body-size); min-height: var(--size-element-md); padding: var(--spacing-1) var(--spacing-2);
  border: 1px solid var(--color-border-emphasized); border-radius: var(--radius-inner); color: var(--color-text-primary); background: var(--color-background-surface); }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 18px; height: 18px; }
input:disabled { background: var(--color-background-muted); color: var(--color-text-disabled); }
input.wide, textarea.wide { width: 100%; min-width: 220px; }

/* 버튼(Astryx Button: primary=accent 채움, secondary=중립 채움, destructive=오류 연한 채움). 기본 button은 primary */
button, .button { display: inline-block; font: inherit; font-size: var(--text-body-size); font-weight: var(--font-weight-medium); line-height: 1.4286;
  min-height: var(--size-element-md); padding: var(--spacing-1) var(--spacing-3); border: 1px solid var(--color-accent);
  background: var(--color-accent); color: var(--color-on-accent); border-radius: var(--radius-element); cursor: pointer; white-space: nowrap; }
a.button:hover { text-decoration: none; }
button:hover, .button:hover { box-shadow: inset 0 0 0 100px rgba(255, 255, 255, 0.12); }
button:active, .button:active { box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.12); }
button:disabled { opacity: 0.5; cursor: default; }
button.secondary, .button.secondary { background: var(--color-neutral); border-color: transparent; color: var(--color-text-primary); }
button.secondary:hover, .button.secondary:hover { box-shadow: inset 0 0 0 100px var(--color-overlay-hover); }
button.danger { background: var(--color-error-muted); border-color: var(--color-error-muted); color: var(--color-on-error-muted); }
button.primary { background: var(--color-success); border-color: var(--color-success); color: #ffffff; }
button.link { background: none; border: none; color: var(--color-text-accent); padding: 0; min-height: 0; text-decoration: underline; font-size: inherit; }
button.link:hover { box-shadow: none; }
form.inline { display: inline; }

/* 알림(Astryx Banner: 상태 연한 채움 + 왼쪽 선) */
.flash { padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-inner); margin: var(--spacing-2) 0; border-left: 4px solid; }
.flash.ok { background: var(--color-success-muted); color: var(--color-on-success-muted); border-color: var(--color-success); }
.flash.err { background: var(--color-error-muted); color: var(--color-on-error-muted); border-color: var(--color-error); }

/* 배지(Astryx Badge). 상태는 글자로도 적어 색만으로 구분하지 않는다 */
.tag, .badge { display: inline-block; font-size: var(--text-supporting-size); font-weight: var(--font-weight-semibold); line-height: 1.6667; padding: 0 var(--spacing-2);
  border-radius: var(--radius-full); vertical-align: middle; white-space: nowrap; background: var(--color-background-blue); color: var(--color-text-blue); }
.badge-red { background: var(--color-background-red); color: var(--color-text-red); }
.badge-orange { background: var(--color-background-orange); color: var(--color-text-orange); }
.badge-yellow { background: var(--color-background-yellow); color: var(--color-text-yellow); }
.badge-green { background: var(--color-background-green); color: var(--color-text-green); }
.badge-blue { background: var(--color-background-blue); color: var(--color-text-blue); }
.badge-purple { background: var(--color-background-purple); color: var(--color-text-purple); }
.badge-gray { background: var(--color-background-gray); color: var(--color-text-gray); }

/* 숫자 카드(대시보드) */
.tiles, .stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--spacing-3); margin: var(--spacing-3) 0; }
.tile, .stat { display: block; background: var(--color-background-card); border: 1px solid var(--color-border-emphasized);
  border-radius: var(--radius-container); padding: var(--spacing-3) var(--spacing-4); color: var(--color-text-primary); }
a.tile:hover, a.stat:hover { text-decoration: none; box-shadow: var(--shadow-low); }
.tile b { display: block; font-size: var(--text-display-size); line-height: var(--text-display-leading); }
.stat-value { display: block; font-size: var(--text-display-size); font-weight: var(--font-weight-bold); line-height: var(--text-display-leading); letter-spacing: -0.02em; margin-top: var(--spacing-2); font-variant-numeric: tabular-nums; }
.stat-value small { font-size: var(--text-label-size); font-weight: var(--font-weight-medium); letter-spacing: 0; }
.stat-sub { display: block; color: var(--color-text-secondary); font-size: var(--text-label-size); line-height: var(--text-label-leading); }
.stat.alert { border-left: 4px solid var(--color-error); }

/* 바로 가기(역할별 큰 버튼) */
.quick { display: flex; flex-wrap: wrap; margin: 0 calc(-1 * var(--spacing-1)) var(--spacing-3); }
.quick a { flex: 1 1 140px; margin: var(--spacing-1); min-height: var(--size-element-lg); padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-element); background: var(--color-background-card); border: 1px solid var(--color-border-emphasized);
  color: var(--color-text-primary); font-weight: 600; text-align: center; }
.quick a:first-child { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }
.quick a:hover { text-decoration: none; box-shadow: var(--shadow-low); }

.panels { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-3); }
.panels .card { margin: 0; min-width: 0; overflow-x: auto; }
.panel-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; }
.panel-head h2 { margin: var(--spacing-1) var(--spacing-3) var(--spacing-2) 0; }
.empty { color: var(--color-text-secondary); padding: var(--spacing-3) 0; }

/* 진행 막대(Astryx ProgressBar). 옆에 숫자를 함께 적는다 */
progress.meter { -webkit-appearance: none; appearance: none; width: 100%; max-width: 160px; height: 8px; border: 0;
  border-radius: var(--radius-full); background: var(--color-border-emphasized); vertical-align: middle; }
progress.meter::-webkit-progress-bar { background: var(--color-border-emphasized); border-radius: var(--radius-full); }
progress.meter::-webkit-progress-value { background: var(--color-accent); border-radius: var(--radius-full); }
progress.meter::-moz-progress-bar { background: var(--color-accent); border-radius: var(--radius-full); }

/* 스캔 화면: id·구조는 app.js가 쓰므로 바꾸지 않는다 */
.scan input { font-size: 20px; min-height: var(--size-element-lg); }
.scan input[type="checkbox"] { min-height: 0; }
.scan label { margin-bottom: var(--spacing-3); }
.scanlog { margin-top: var(--spacing-2); max-height: 320px; overflow: auto; font-family: var(--font-code); }
.scanlog .ok { color: var(--color-text-success); }
.scanlog .err { color: var(--color-text-error); font-weight: var(--font-weight-bold); font-size: var(--text-heading-2-size); }
/* 입고 스캔(D27-5): 찍은 박스 줄은 초록 바탕 OK */
tr.scan-ok td { background: var(--color-success-muted); }
.thumb { width: 360px; max-width: 100%; border: 1px solid var(--color-border-emphasized); } table.kv { width: auto; }
/* 보류·부적합 줄: 연한 경고 채움 + 왼쪽 선(상태 배지와 색이 겹치지 않게 채움은 옅게) */
tr.st-HOLD td, tr.st-NC td { background: rgba(255, 206, 47, 0.18); }
tr.st-HOLD td:first-child, tr.st-NC td:first-child { box-shadow: inset 4px 0 0 var(--color-warning); }
.label-page { page-break-after: always; } .label-page img { width: 100mm; height: 60mm; }
@media print { .noprint, .side, .mobilebar, .scrim, .skip { display: none !important; }
  main { margin: 0; padding: 0; border: 0; border-radius: 0; min-height: 0; } @page { margin: 0; } }
/* 좁은 화면(PDA·태블릿): 왼쪽 메뉴는 서랍이 되고 위에 메뉴 단추 줄이 생긴다(Astryx AppShell 모바일 서랍) */
@media (max-width: 900px) {
  .mobilebar { display: flex; align-items: center; position: -webkit-sticky; position: sticky; top: 0; z-index: 20;
    padding: var(--spacing-2) var(--spacing-3); background: var(--color-background-surface); border-bottom: 1px solid var(--color-border-emphasized); }
  .mobilebar .icon-button { margin-right: var(--spacing-2); }
  .side { width: 280px; max-width: 85vw; background: var(--color-background-surface); box-shadow: var(--shadow-high);
    -webkit-transform: translateX(-105%); transform: translateX(-105%); -webkit-transition: -webkit-transform 0.2s ease; transition: transform 0.2s ease; visibility: hidden; }
  body.nav-open .side { -webkit-transform: none; transform: none; visibility: visible; }
  body.nav-open .scrim { display: block; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 25; background: rgba(1, 18, 40, 0.4); }
  button.side-close { display: inline-flex; }
  body { background: var(--color-background-surface); }
  main { margin: 0; min-height: 0; border: 0; border-radius: 0; padding: var(--spacing-4) var(--spacing-3) var(--spacing-8); }
}
@media (prefers-reduced-motion: reduce) { .side { -webkit-transition: none; transition: none; } }
@media (max-width: 800px) {
  .cols, .panels { grid-template-columns: 1fr; }
  /* 좁은 화면에서 넓은 표는 표 안에서 옆으로 밀어 본다 */
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  th, td { white-space: nowrap; }
}

/* 화면 머리(제목 + 한 줄 요약) */
.page-head { margin-bottom: var(--spacing-4); }
.page-head h1 { margin-bottom: var(--spacing-1); }
.page-head .hint { margin: 0; }

/* SCM 입고등록·입고예정·입하현황(결정 D26) */
.table-wrap { overflow-x: auto; }
.row .grow { flex: 1 1 240px; }
.row.compact label { flex: 1 1 7.5rem; max-width: 11rem; }
.item-edit p { margin: 0 0 var(--spacing-2); }
label.check { flex-direction: row; align-items: center; gap: var(--spacing-1); }
label.check input { width: auto; min-height: 0; }
.inline-details { display: inline-block; }
.inline-details > summary { list-style: none; cursor: pointer; }
.inline-details > summary::-webkit-details-marker { display: none; }
.row-actions { white-space: nowrap; }
.row-actions form, .row-actions .button { margin-right: var(--spacing-1); }
#scm-items tr.filled td { background: var(--color-background-muted); }
#scm-items .extra { display: none; } #scm-items.show-extra .extra { display: table-cell; }  /* 유효기간 관리 품목이 없어 기본 숨김(Q-A6) */
.scm-foot { margin-top: var(--spacing-3); }
.split { display: flex; flex-wrap: wrap; gap: var(--spacing-4); }
.split > * { flex: 1 1 420px; min-width: 0; }
tr.current td { background: var(--color-accent-muted); }
/* 로그인(D26 SCM 로그인 화면): 남색 대각선 배경 위 흰 카드 */
body.login-page { background: linear-gradient(162deg, #1e1f4f 0%, #24296a 52%, #eef0f6 52.2%, #eef0f6 100%); min-height: 100vh; }
body.login-page main { background: none; border: 0; }
.login-card { max-width: 420px; margin: 14vh auto 48px; padding: var(--spacing-8) var(--spacing-8) var(--spacing-6);
  background: #fff; border-radius: var(--radius-container); box-shadow: 0 12px 40px rgba(16, 20, 60, 0.18); }
.login-logo { text-align: center; font-size: 30px; font-weight: 800; font-style: italic; letter-spacing: 0.02em; color: #24296a; }
.login-sub { text-align: center; color: var(--color-text-secondary); margin: var(--spacing-1) 0 var(--spacing-3); }
.login-rule { width: 44px; height: 3px; background: #e3342f; border: 0; margin: 0 auto var(--spacing-6); }
.login-card label { color: var(--color-text-primary); font-weight: 600; margin-bottom: var(--spacing-3); }
.login-card input { min-height: 44px; }
.login-card button { width: 100%; min-height: 46px; background: #24296a; border-color: #24296a; font-weight: 600; }
.login-note { text-align: center; color: var(--color-text-secondary); font-size: var(--font-size-sm); margin-top: var(--spacing-6); }

/* 확인 요청 게시판: 휴대폰(폭 360px)에서 한 손으로 고르고 쓰게 줄을 세로로 쌓고 누를 곳을 크게 한다 */
.qa-filter { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-bottom: var(--spacing-3); }
.qa-filter a { display: inline-flex; align-items: center; gap: var(--spacing-1); min-height: var(--size-element-lg); padding: 0 var(--spacing-3);
  border: 1px solid var(--color-border-emphasized); border-radius: var(--radius-full); background: var(--color-background-card); color: var(--color-text-primary); }
.qa-filter a[aria-current="page"] { background: var(--color-neutral); font-weight: var(--font-weight-semibold); }
.qa-list { list-style: none; padding: 0; margin: 0; }
.qa-list a { display: block; padding: var(--spacing-3); margin-bottom: var(--spacing-2); border: 1px solid var(--color-border-emphasized);
  border-radius: var(--radius-container); background: var(--color-background-card); color: var(--color-text-primary); }
.qa-list a:hover { text-decoration: none; box-shadow: var(--shadow-low); }
.qa-list b, .qa-list small { display: block; margin-top: var(--spacing-1); overflow-wrap: anywhere; }
.qa-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.qa-item { margin-bottom: var(--spacing-2); }
.qa-form { max-width: 640px; }
.qa-form > label, .qa-form fieldset { margin-bottom: var(--spacing-3); }
.qa-form fieldset { border: 0; padding: 0; min-width: 0; }
.qa-form legend { font-size: var(--text-label-size); font-weight: var(--font-weight-semibold); margin-bottom: var(--spacing-1); }
.qa-form textarea.wide, .qa-form input.wide { min-width: 0; }
label.choice { flex-direction: row; align-items: center; gap: var(--spacing-2); min-height: 44px; font-size: var(--text-body-size); }
@media (max-width: 800px) { .qa-form button { width: 100%; min-height: 48px; } }

/* 품목 자동완성(결정 D26-1) */
.suggest { position: absolute; z-index: 50; max-height: 18rem; overflow-y: auto; background: var(--color-background-surface);
  border: 1px solid var(--color-neutral); border-radius: 8px; box-shadow: 0 6px 20px rgba(5, 54, 89, 0.15); padding: 4px 0; }
.suggest button { display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 0; padding: 8px 12px;
  color: var(--color-text-primary); font: inherit; cursor: pointer; white-space: nowrap; min-height: 0; box-shadow: none; }
.suggest button:hover, .suggest button[aria-selected="true"] { background: var(--color-overlay-hover); }
.suggest[hidden] { display: none; }

/* SCM 공지(게시판 요청 R-0002) */
.notice-body h3 { margin: 0.8em 0 0.3em; font-size: 1rem; }
.notice-body ul { margin: 0.2em 0 0.6em 1.2em; }
.notice-body .notice-warn { color: #b42318; font-weight: 600; }
/* 비밀번호 칸 안쪽 오른쪽의 [보기](app.js, ASVS 2.1.12). 로그인 카드의 큰 단추 규칙보다 앞서도록 선택자를 구체적으로 둔다. */
.pw-wrap { position: relative; display: block; }
.pw-wrap > input { width: 100%; padding-right: 5em; }
.pw-wrap > button.reveal, .login-card .pw-wrap > button.reveal { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: auto;
  min-height: 0; margin: 0; padding: 2px 10px; background: transparent; border-color: transparent; color: var(--color-text-secondary);
  font-size: var(--text-label-size); font-weight: var(--font-weight-medium); }
/* 카메라 스캔(app.js): 화면 전체를 덮는 어두운 판, 가운데 영상과 안내·닫기 */
.cam-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.85); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--spacing-3); padding: var(--spacing-4); color: #ffffff; }
.cam-overlay video { width: 100%; max-width: 480px; border-radius: var(--radius-element); background: #000000; }
button.camera { margin-left: var(--spacing-2); }